simpo-component-library 0.0.5 → 0.0.7

package/fesm2022/simpo-component-library.mjs

@@ -3,32 +3,19 @@ import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Directive, Input, EventEmitter, Output, HostListener, Component, ViewChild } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
-import { StyleDirectivesModule } from '@simpo-ui/directive';
 import { SimpoElementsModule } from '@simpo-ui/elements';
 import { SimpoComponentModule } from '@simpo-ui/components';
 import * as i1$1 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
-import { AnimationDirective as AnimationDirective$1 } from '@simpo-ui/directive/animation-directive';
-import { BorderDirective as BorderDirective$1 } from '@simpo-ui/directive/border-directive';
-import { OverlayDirective as OverlayDirective$1 } from '@simpo-ui/directive/overlay-directive';
-import { BackgroundDirective as BackgroundDirective$1 } from '@simpo-ui/directive/background-directive';
-import { ContentFitDirective as ContentFitDirective$1 } from '@simpo-ui/directive/content-fit-directive';
-import { ContainerFitDirective as ContainerFitDirective$1 } from '@simpo-ui/directive/container-fir.directive';
-import { HoverDirective as HoverDirective$1 } from '@simpo-ui/directive/hover-element-directive';
-import { BannerContentFitDirective as BannerContentFitDirective$1 } from '@simpo-ui/directive/banner-content-fit-directive';
-import { CornerDirective as CornerDirective$1 } from '@simpo-ui/directive/corner-directive';
-import { ColumnDirectiveDirective as ColumnDirectiveDirective$1 } from '@simpo-ui/directive/column-directive.directive';
-import { ImageDirectiveDirective as ImageDirectiveDirective$1 } from '@simpo-ui/directive/image-directive.directive';
-import { simpoConetenAlignmentDirective as simpoConetenAlignmentDirective$1 } from '@simpo-ui/directive/content-alignment-directive';
-import { PositionLayoutDirectiveDirective as PositionLayoutDirectiveDirective$1 } from '@simpo-ui/directive/position-layout-directive.directive';
-import { SimpoFooterLayoutDirective as SimpoFooterLayoutDirective$1 } from '@simpo-ui/directive/footer-layout-directive';
-import { ButtonDirectiveDirective as ButtonDirectiveDirective$1 } from '@simpo-ui/directive/button-directive.directive';
-import { TextBackgroundDirectiveDirective as TextBackgroundDirectiveDirective$1 } from '@simpo-ui/directive/text-background-directive.directive';
 import { SimpoButtonComponent as SimpoButtonComponent$1 } from '@simpo-ui/elements/simpo-button/simpo-button.component';
 import * as i1 from '@simpo-ui/services/events.service';
+import { contentAlignment as contentAlignment$1, AlignContent as AlignContent$1, ImageFit as ImageFit$1, ImageRatio as ImageRatio$1, BANNERALIGNMENT as BANNERALIGNMENT$1, FooterTypes as FooterTypes$1, TextPosition as TextPosition$1 } from '@simpo-ui/styles';
+import { ButtonDirectiveDirective as ButtonDirectiveDirective$1 } from '@simpo-ui/directive/button-directive.directive';
 import { MatIconModule } from '@angular/material/icon';
 import { SociaIconsComponent as SociaIconsComponent$1 } from '@simpo-ui/elements/socia-icons/socia-icons.component';
-import { FooterTypes as FooterTypes$1, ImageFit as ImageFit$1, ImageRatio as ImageRatio$1, TextPosition as TextPosition$1, contentAlignment as contentAlignment$1, AlignContent as AlignContent$1, BANNERALIGNMENT as BANNERALIGNMENT$1 } from '@simpo-ui/styles';
+import { CornerDirective as CornerDirective$1 } from '@simpo-ui/directive/corner-directive';
+import { ImageDirectiveDirective as ImageDirectiveDirective$1 } from '@simpo-ui/directive/image-directive.directive';
+import { TextBackgroundDirectiveDirective as TextBackgroundDirectiveDirective$1 } from '@simpo-ui/directive/text-background-directive.directive';
 import * as i1$3 from '@angular/platform-browser';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
@@ -278,85 +265,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['simpoAnimation']
             }] } });
 
-class BorderDirective {
-    constructor(el, eventService) {
-        this.el = el;
-        this.eventService = eventService;
-        this.eventService.borderChangeChecks.subscribe((res) => {
-            if (this.el.nativeElement.id === res.id) {
-                if (res.data?.display) {
-                    this.el.nativeElement.style.setProperty('border-bottom', res.data.thickness + 'px' +
-                        ' ' +
-                        res.data.type +
-                        ' ' +
-                        res.data.color);
-                }
-                else {
-                    this.el.nativeElement.style.setProperty('border-bottom', 'none');
-                }
-            }
-        });
-    }
-    ngOnChanges() {
-        if (this.borderData?.display) {
-            this.el.nativeElement.style.setProperty('border-bottom', this.borderData.thickness + 'px' +
-                ' ' +
-                this.borderData.type +
-                ' ' +
-                this.borderData.color);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BorderDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: BorderDirective, isStandalone: true, selector: "[simpoBorder]", inputs: { borderData: ["simpoBorder", "borderData"] }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BorderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoBorder]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { borderData: [{
-                type: Input,
-                args: ['simpoBorder']
-            }] } });
-
-class OverlayDirective {
-    constructor(el, eventService) {
-        this.el = el;
-        this.eventService = eventService;
-        this.eventService.colorOverlayChangeChecks.subscribe((res) => {
-            if (this.el.nativeElement.id === res.type) {
-                if (res.data?.showImage) {
-                    this.el.nativeElement.style.setProperty('background-color', this.getRGBA(res.data.color, res.data.opacity));
-                }
-            }
-        });
-    }
-    ngOnChanges() {
-        if (this.backgroundData?.showImage) {
-            this.el.nativeElement.style.setProperty('background-color', this.getRGBA(this.backgroundData.color, this.backgroundData.opacity));
-        }
-    }
-    getRGBA(bgColor, opacity) {
-        const r = parseInt(bgColor.slice(1, 3), 16);
-        const g = parseInt(bgColor.slice(3, 5), 16);
-        const b = parseInt(bgColor.slice(5, 7), 16);
-        return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: OverlayDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: OverlayDirective, isStandalone: true, selector: "[simpoOverlay]", inputs: { backgroundData: ["simpoOverlay", "backgroundData"] }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: OverlayDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoOverlay]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { backgroundData: [{
-                type: Input,
-                args: ['simpoOverlay']
-            }] } });
-
 class BackgroundDirective {
     constructor(el, eventService) {
         this.el = el;
@@ -473,418 +381,368 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['simpoLayout']
             }] } });
 
-class HoverDirective {
-    constructor(el) {
+class BannerContentFitDirective {
+    constructor(el, eventService, renderer) {
         this.el = el;
-        this.hovering = new EventEmitter();
+        this.eventService = eventService;
+        this.renderer = renderer;
+        this.eventService.alignmentChangeChecks.subscribe((res) => {
+            if (this.layout?.bannerImageDisplay) {
+                Object.entries(BANNERALIGNMENT).forEach(([className, classValue]) => {
+                    if (res.data?.align === className) {
+                        this.renderer.addClass(this.el.nativeElement, classValue);
+                        if (res.data?.align == 'top' || res.data?.align == 'bottom') {
+                            this.el.nativeElement.style.setProperty('text-align', "center");
+                        }
+                    }
+                });
+            }
+            else {
+                Object.entries(BANNERHALIGN).forEach(([className, classValue]) => {
+                    if (res.data?.layoutAlignment?.value === className) {
+                        this.renderer.addClass(this.el.nativeElement, `flex-lg-row`);
+                        classValue.split(" ").forEach(element => {
+                            this.renderer.addClass(this.el.nativeElement, element);
+                        });
+                    }
+                });
+            }
+            applySpacing(this.el.nativeElement, this.layout?.spacing);
+        });
+        this.eventService.spacingChangeChecks.subscribe((res) => {
+            if (this.el.nativeElement.id === res.type) {
+                if (this.layout?.fit === 'content') {
+                    fitContent(this.el.nativeElement);
+                }
+                else {
+                    fitScreen(this.el.nativeElement);
+                }
+                applySpacing(this.el.nativeElement, res.data.spacing);
+            }
+        });
     }
-    ngOnChanges() {
+    ngOnInit() {
+        this.appply();
     }
-    onMouseEnter() {
-        this.hovering.emit(true);
+    ngOnChanges() {
+        this.appply();
     }
-    onMouseLeave() {
-        this.hovering.emit(false);
+    appply() {
+        if (this.layout?.fit === 'content') {
+            fitContent(this.el.nativeElement);
+        }
+        else {
+            fitScreen(this.el.nativeElement);
+        }
+        if (this.layout?.bannerImageDisplay) {
+            Object.entries(BANNERALIGNMENT).forEach(([className, classValue]) => {
+                if (this.layout?.layoutAlignment.value === className) {
+                    this.renderer.addClass(this.el.nativeElement, classValue);
+                    if (this.layout.layoutAlignment.value == 'top' || this.layout.layoutAlignment.value == 'bottom') {
+                        this.el.nativeElement.style.setProperty('text-align', "center");
+                    }
+                }
+            });
+        }
+        else {
+            Object.entries(BANNERHALIGN).forEach(([className, classValue]) => {
+                if (this.layout?.layoutAlignment.value === className) {
+                    this.renderer.addClass(this.el.nativeElement, `flex-lg-row`);
+                    classValue.split(" ").forEach(element => {
+                        this.renderer.addClass(this.el.nativeElement, element);
+                    });
+                }
+            });
+        }
+        applySpacing(this.el.nativeElement, this.layout?.spacing);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: HoverDirective, isStandalone: true, selector: "[simpoHover]", outputs: { hovering: "hovering" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BannerContentFitDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: BannerContentFitDirective, isStandalone: true, selector: "[simpoBannerLayout]", inputs: { layout: ["simpoBannerLayout", "layout"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BannerContentFitDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[simpoHover]',
+                    selector: '[simpoBannerLayout]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hovering: [{
-                type: Output
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }, { type: i0.Renderer2 }], propDecorators: { layout: [{
+                type: Input,
+                args: ['simpoBannerLayout']
             }] } });
 
-class TextElementComponent {
-    constructor() {
-        this.textData = '';
+class BorderDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
+        this.eventService.borderChangeChecks.subscribe((res) => {
+            if (this.el.nativeElement.id === res.id) {
+                if (res.data?.display) {
+                    this.el.nativeElement.style.setProperty('border-bottom', res.data.thickness + 'px' +
+                        ' ' +
+                        res.data.type +
+                        ' ' +
+                        res.data.color);
+                }
+                else {
+                    this.el.nativeElement.style.setProperty('border-bottom', 'none');
+                }
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TextElementComponent, isStandalone: true, selector: "simpo-text-element", inputs: { textData: "textData" }, ngImport: i0, template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\"></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    ngOnChanges() {
+        if (this.borderData?.display) {
+            this.el.nativeElement.style.setProperty('border-bottom', this.borderData.thickness + 'px' +
+                ' ' +
+                this.borderData.type +
+                ' ' +
+                this.borderData.color);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BorderDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: BorderDirective, isStandalone: true, selector: "[simpoBorder]", inputs: { borderData: ["simpoBorder", "borderData"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-text-element', standalone: true, imports: [CommonModule], template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\"></div>\n" }]
-        }], propDecorators: { textData: [{
-                type: Input
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BorderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoBorder]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { borderData: [{
+                type: Input,
+                args: ['simpoBorder']
             }] } });
 
-class SimpoButtonComponent {
-    ngOnInit() {
+class ButtonDirectiveDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
+        this.buttonStyleChangeCheck();
     }
-    redirectTo() {
-        if (this.buttonContent?.newTab) {
-            window.open(this.buttonContent.redirectionUrl, '_blank');
+    ngOnChanges() {
+        this.applyButtonStyleChanges();
+    }
+    ngOnDestroy() {
+        this.buttonStyleSubscription?.unsubscribe();
+    }
+    applyButtonStyleChanges() {
+        if (this.buttonStyle?.type) {
+            this.applyButtonType(this.buttonStyle, this.color ? this.color : '#ffffff');
+        }
+        if (this.buttonStyle?.shape) {
+            this.applyButtonShape(this.buttonStyle);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", color: "color", sectionId: "sectionId" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective$1, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color"] }] }); }
+    applyButtonType(style, color) {
+        if (style?.type === 'Solid') {
+            this.el.nativeElement.style.setProperty('background', color);
+            this.el.nativeElement.style.setProperty('color', this.getTextColor(color));
+            this.el.nativeElement.style.setProperty('border', `2px solid ${color} `);
+        }
+        else {
+            this.el.nativeElement.style.setProperty('border', `2px solid ${color}`);
+            this.el.nativeElement.style.setProperty('background', 'transparent');
+            this.el.nativeElement.style.setProperty('color', color);
+        }
+    }
+    applyButtonShape(style) {
+        if (style?.shape === 'Round') {
+            this.el.nativeElement.style.setProperty('border-radius', '5px');
+        }
+        else {
+            this.el.nativeElement.style.setProperty('border-radius', '0px');
+        }
+    }
+    getTextColor(bgColor) {
+        if (bgColor) {
+            const threshold = 130; // Adjust this threshold as needed
+            const r = parseInt(bgColor.slice(1, 3), 16);
+            const g = parseInt(bgColor.slice(3, 5), 16);
+            const b = parseInt(bgColor.slice(5, 7), 16);
+            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+            return brightness > threshold ? '#000000' : '#ffffff';
+        }
+        return "#ffffff;";
+    }
+    buttonStyleChangeCheck() {
+        this.buttonStyleSubscription = this.eventService.buttonStyleChangeChecks.subscribe((res) => {
+            this.changeButtonStyle(res.id, res.buttonStyle, res.color);
+        });
+    }
+    changeButtonStyle(id, style, bgColor) {
+        if (this.el.nativeElement.id === id) {
+            if (style?.type) {
+                this.applyButtonType(style, bgColor ? bgColor : '#ffffff');
+            }
+            if (style?.shape) {
+                this.applyButtonShape(style);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonDirectiveDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ButtonDirectiveDirective, isStandalone: true, selector: "[simpoButtonDirective]", inputs: { buttonStyle: "buttonStyle", color: "color" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective$1], template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"] }]
-        }], propDecorators: { buttonContent: [{
-                type: Input
-            }], buttonStyle: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonDirectiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoButtonDirective]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { buttonStyle: [{
                 type: Input
             }], color: [{
                 type: Input
-            }], sectionId: [{
-                type: Input
             }] } });
 
-class HoverElementsComponent {
-    constructor(_eventService) {
-        this._eventService = _eventService;
-        this.edit = new EventEmitter();
+class ColumnDirectiveDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
+        this.checkSizeChanges();
     }
-    ngOnInit() {
+    ngOnChanges() {
+        if (this.columnDirective === 'Large') {
+            this.el.nativeElement.classList.add('col-md-6');
+        }
+        if (this.columnDirective === 'Medium') {
+            this.el.nativeElement.classList.add('col-md-4');
+        }
+        if (this.columnDirective === 'Small') {
+            this.el.nativeElement.classList.add('col-md-3');
+        }
     }
-    editSection() {
-        this._eventService.editSection.emit({ data: this.data });
+    ngOnDestroy() {
+        if (this.cardSizeSubSubscription) {
+            this.cardSizeSubSubscription.unsubscribe();
+        }
     }
-    regenerateSection() {
-        this._eventService.regenerateSection.emit({ data: this.data });
+    checkSizeChanges() {
+        this.cardSizeSubSubscription = this.eventService.cardSizeChangeChecks.subscribe((res) => {
+            this.addClass(res.size, res.id);
+        });
     }
-    changeContent() {
-        this._eventService.changeContent.emit({ data: this.data });
+    addClass(res, id) {
+        if (this.el.nativeElement.id == id) {
+            this.removeAllClasses();
+            if (res === 'Large') {
+                this.el.nativeElement.classList.add('col-md-6');
+            }
+            if (res === 'Medium') {
+                this.el.nativeElement.classList.add('col-md-4');
+            }
+            if (res === 'Small') {
+                this.el.nativeElement.classList.add('col-md-3');
+            }
+        }
     }
-    copySection() {
-        this._eventService.duplicate.emit({ data: this.data });
+    removeAllClasses() {
+        this.el.nativeElement.classList.remove("col-md-3");
+        this.el.nativeElement.classList.remove("col-md-4");
+        this.el.nativeElement.classList.remove("col-md-6");
     }
-    moveUp() {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ColumnDirectiveDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ColumnDirectiveDirective, isStandalone: true, selector: "[simpoColumnDirective]", inputs: { columnDirective: ["simpoColumnDirective", "columnDirective"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ColumnDirectiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoColumnDirective]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { columnDirective: [{
+                type: Input,
+                args: ['simpoColumnDirective']
+            }] } });
+
+class ContainerFitDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
     }
-    moveDown() {
+    ngOnInit() {
+        this.appply();
     }
-    deleteSection() {
-        this._eventService.delete.emit({ data: this.data });
+    ngOnChanges() {
+        this.appply();
     }
-    addSection(position) {
-        this._eventService.addNewSectionClick.emit({ status: true, index: this.index, position: position, webCompName: this.data });
+    appply() {
+        if (this.layout?.align == 'center') {
+            this.el.nativeElement.style.setProperty('margin', 'auto');
+            this.el.nativeElement.style.setProperty('align-items', 'center');
+        }
+        else if (this.layout?.align == "left") {
+            this.el.nativeElement.style.setProperty('margin-right', "auto");
+            this.el.nativeElement.style.setProperty('align-items', 'flex-start');
+        }
+        else {
+            this.el.nativeElement.style.setProperty("margin-left", "auto");
+            this.el.nativeElement.style.setProperty('align-items', 'flex-end');
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverElementsComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\">\r\n    <div class=\"top-btn\" *ngIf=\"data.sectionType != 'footer'\">\r\n        <button class=\"add_btn_top\" (click)=\"addSection('ABOVE')\">Add Section +</button>\r\n    </div>\r\n    <section class=\"hover-tab\">\r\n        <div class=\"tabs-section\">\r\n            <div class=\"edit-tab\">\r\n                <button (click)=\"editSection()\">\r\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <g clip-path=\"url(#clip0_1076_52409)\">\r\n                            <path\r\n                                d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n                                fill=\"#0267c1\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_1076_52409\">\r\n                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg>\r\n                    <span class=\"edit-text\">\r\n                        Edit\r\n                    </span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"></div>\r\n            <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer'\">\r\n                <button (click)=\"regenerateSection()\">\r\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path\r\n                            d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\"\r\n                            fill=\"#0267c1\" />\r\n                    </svg>\r\n                    <span class=\"edit-text\">\r\n                        Regenerate\r\n                    </span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"  *ngIf=\"data.sectionType != 'footer'\"></div>\r\n            <div class=\"regenerate\"  *ngIf=\"data.sectionType != 'footer'\">\r\n                <button (click)=\"changeContent()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-width=\"1.5\" d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\">\r\n                        </path>\r\n                        <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                            d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\"></path>\r\n                    </svg>\r\n                    <span class=\"edit-text\">Change Content</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"  *ngIf=\"data.sectionType != 'footer'\"></div>\r\n            <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer'\">\r\n                <button class=\"copy\" (click)=\"copySection()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path\r\n                            d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n                        </path>\r\n                        <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"moveUp()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"moveDown()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </section>\r\n    <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer'\">\r\n        <button class=\"add_btn\" (click)=\"addSection('BELOW')\">Add Section +</button>\r\n    </div>\r\n</mat-dialog-content>", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:20px;height:auto}.bottom-btn{position:absolute;top:100%;z-index:1001;border-bottom:4px solid #0267c1;width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.add_btn_top{top:0!important;width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.top-btn{border-bottom:4px solid #0267c1}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContainerFitDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ContainerFitDirective, isStandalone: true, selector: "[simpoContainerLayout]", inputs: { layout: ["simpoContainerLayout", "layout"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverElementsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-hover-elements', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule], template: "<mat-dialog-content class=\"mat-typography\">\r\n    <div class=\"top-btn\" *ngIf=\"data.sectionType != 'footer'\">\r\n        <button class=\"add_btn_top\" (click)=\"addSection('ABOVE')\">Add Section +</button>\r\n    </div>\r\n    <section class=\"hover-tab\">\r\n        <div class=\"tabs-section\">\r\n            <div class=\"edit-tab\">\r\n                <button (click)=\"editSection()\">\r\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <g clip-path=\"url(#clip0_1076_52409)\">\r\n                            <path\r\n                                d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n                                fill=\"#0267c1\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_1076_52409\">\r\n                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg>\r\n                    <span class=\"edit-text\">\r\n                        Edit\r\n                    </span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"></div>\r\n            <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer'\">\r\n                <button (click)=\"regenerateSection()\">\r\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path\r\n                            d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\"\r\n                            fill=\"#0267c1\" />\r\n                    </svg>\r\n                    <span class=\"edit-text\">\r\n                        Regenerate\r\n                    </span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"  *ngIf=\"data.sectionType != 'footer'\"></div>\r\n            <div class=\"regenerate\"  *ngIf=\"data.sectionType != 'footer'\">\r\n                <button (click)=\"changeContent()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-width=\"1.5\" d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\">\r\n                        </path>\r\n                        <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                            d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\"></path>\r\n                    </svg>\r\n                    <span class=\"edit-text\">Change Content</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"  *ngIf=\"data.sectionType != 'footer'\"></div>\r\n            <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer'\">\r\n                <button class=\"copy\" (click)=\"copySection()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path\r\n                            d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n                        </path>\r\n                        <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"moveUp()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"moveDown()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </section>\r\n    <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer'\">\r\n        <button class=\"add_btn\" (click)=\"addSection('BELOW')\">Add Section +</button>\r\n    </div>\r\n</mat-dialog-content>", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:20px;height:auto}.bottom-btn{position:absolute;top:100%;z-index:1001;border-bottom:4px solid #0267c1;width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.add_btn_top{top:0!important;width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.top-btn{border-bottom:4px solid #0267c1}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { edit: [{
-                type: Output
-            }], data: [{
-                type: Input
-            }], index: [{
-                type: Input
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContainerFitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoContainerLayout]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { layout: [{
+                type: Input,
+                args: ['simpoContainerLayout']
             }] } });
 
-class TextSectionComponent {
-    constructor(_dialog) {
-        this._dialog = _dialog;
-        this._mainContainer = null;
-        this.showEditors = false;
+class simpoConetenAlignmentDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
     }
-    ngOnInit() {
-        this.content = this.data?.content;
-        this.styles = this.data?.styles;
+    ngOnChanges() {
+        this.applyContentAlignment();
     }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
+    ngOnDestroy() {
+        if (this.contentAlignmentSubscription) {
+            this.contentAlignmentSubscription.unsubscribe();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextSectionComponent, deps: [{ token: i1$1.MatDialog }], 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" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\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          <div *ngFor=\"let item of content?.inputText\">\r\n            <simpo-text-element [textData]=\"item.value\"></simpo-text-element>\r\n          </div>\r\n          <div class=\"d-grid 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\" [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 class=\"hover_effect\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 0}.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:100%}.mt-15{margin-top:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: StyleDirectivesModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
+    changeAlignmentCheck() {
+        this.contentAlignmentSubscription = this.eventService.contentAlignmentChangeCheck.subscribe((res) => {
+            if (this.el.nativeElement.id === res.id) {
+                this.contentAlignmentData = res.data;
+                this.applyContentAlignment();
+            }
+        });
+    }
+    applyContentAlignment() {
+        this.removeAllClassIfPresent();
+        if (this.contentAlignmentData) {
+            this.el.nativeElement.classList.add(contentAlignment$1[this.contentAlignmentData]);
+        }
+    }
+    removeAllClassIfPresent() {
+        this.el.nativeElement.classList.remove(contentAlignment$1[AlignContent$1.Image_BOTTOM]);
+        this.el.nativeElement.classList.remove(contentAlignment$1[AlignContent$1.Image_CENTER]);
+        this.el.nativeElement.classList.remove(contentAlignment$1[AlignContent$1.Image_TOP]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: simpoConetenAlignmentDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: simpoConetenAlignmentDirective, isStandalone: true, selector: "[simpoContentAlignment]", inputs: { contentAlignmentData: ["simpoContentAlignment", "contentAlignmentData"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-text-section', standalone: true, imports: [
-                        CommonModule,
-                        MatGridListModule,
-                        StyleDirectivesModule,
-                        SimpoElementsModule,
-                        SimpoComponentModule,
-                        MatDialogModule,
-                        SimpoButtonComponent$1,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1,
-                        SimpoButtonComponent$1
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\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          <div *ngFor=\"let item of content?.inputText\">\r\n            <simpo-text-element [textData]=\"item.value\"></simpo-text-element>\r\n          </div>\r\n          <div class=\"d-grid 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\" [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 class=\"hover_effect\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 0}.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:100%}.mt-15{margin-top:15px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], _mainContainer: [{
-                type: ViewChild,
-                args: ['mainContainer']
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: simpoConetenAlignmentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoContentAlignment]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { contentAlignmentData: [{
+                type: Input,
+                args: ['simpoContentAlignment']
             }] } });
 
-class BannerSectionComponent {
-    constructor() {
-        this.showEditors = false;
-    }
-    ngOnInit() {
-        this.content = this.data?.content;
-        this.styles = this.data?.styles;
-        if (!this.styles || !this.content)
-            return;
-        // this.styles.layout.bannerImageDisplay = this.content.image.showImage;
-    }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BannerSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n    [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage\">\r\n        <img\r\n          [src]=\"content?.image?.url\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element  [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [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=\"hover_effect\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:100%}.button-display{display:flex;gap:10px}.gap-15{gap:15px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "ngmodule", type: 
-                // StyleDirectivesModule,
-                MatGridListModule }, { kind: "directive", type: AnimationDirective$1, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective$1, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective$1, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective$1, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: ContentFitDirective$1, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective$1, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: simpoConetenAlignmentDirective$1, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: PositionLayoutDirectiveDirective$1, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BannerSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-banner-section', standalone: true, imports: [
-                        SimpoElementsModule,
-                        CommonModule,
-                        SimpoComponentModule,
-                        // StyleDirectivesModule,
-                        MatGridListModule,
-                        SimpoButtonComponent$1,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n    [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage\">\r\n        <img\r\n          [src]=\"content?.image?.url\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element  [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [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=\"hover_effect\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:100%}.button-display{display:flex;gap:10px}.gap-15{gap:15px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }] } });
-
-class HeadingElementComponent {
-    constructor() {
-        this.data = '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HeadingElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: HeadingElementComponent, isStandalone: true, selector: "simpo-heading-element", inputs: { data: "data" }, ngImport: i0, template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\n", styles: [""] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HeadingElementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-heading-element', standalone: true, imports: [], template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\n" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }] } });
-
-class FaqSectionComponent {
-    constructor() {
-        this.showEditors = false;
-    }
-    ngOnInit() {
-        this.content = this.data?.content;
-        this.style = this.data?.styles;
-    }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FaqSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\n      <div *ngFor=\"let text of data?.content?.inputText\" class=\"mb-2\">\n        <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\n      </div>\n\n      <div *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\">\n        <p class=\"heading-medium\" data-toggle=\"collapse\" [attr.data-target]=\"'#collapse-' + i\">\n          {{itemData.inputText[0].value}}</p>\n        <div class=\"body-desc desc collapse multi-collapse\" [attr.id]=\"'collapse-' + i\">{{itemData.inputText[1].value}}\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective$1, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: 
-                // StyleDirectivesModule,
-                SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective$1, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective$1, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective$1, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective$1, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: HoverDirective$1, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FaqSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-faq-section', standalone: true, imports: [
-                        SimpoElementsModule,
-                        CommonModule,
-                        ContentFitDirective$1,
-                        // StyleDirectivesModule,
-                        SimpoComponentModule,
-                        SimpoButtonComponent$1,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\n      <div *ngFor=\"let text of data?.content?.inputText\" class=\"mb-2\">\n        <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\n      </div>\n\n      <div *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\">\n        <p class=\"heading-medium\" data-toggle=\"collapse\" [attr.data-target]=\"'#collapse-' + i\">\n          {{itemData.inputText[0].value}}</p>\n        <div class=\"body-desc desc collapse multi-collapse\" [attr.id]=\"'collapse-' + i\">{{itemData.inputText[1].value}}\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}\n"] }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }] } });
-
-class SociaIconsComponent {
-    constructor() { }
-    ngOnInit() {
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SociaIconsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SociaIconsComponent, isStandalone: true, selector: "simpo-socia-icons", inputs: { socialIconData: "socialIconData", color: "color" }, ngImport: i0, template: "<div *ngIf=\"socialIconData?.type == 'FACEBOOK'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M10.4375 21.8784C5.65941 21.1274 2 16.9877 2 12 2 6.48086 6.48086 2 12 2c5.5191 0 10 4.48086 10 10 0 4.9877-3.6594 9.1274-8.4375 9.8784v-6.9878h2.3301L16.3359 12h-2.7734v-1.8758c0-.79084.3874-1.5617 1.6296-1.5617h1.261V6.10156s-1.1443-.19531-2.2385-.19531c-2.2842 0-3.7771 1.38438-3.7771 3.89063V12H7.89844v2.8906h2.53906v6.9878Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'TWITTER'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path\r\n                d=\"M13.6756 10.6218 20.2324 3h-1.5537l-5.6933 6.61788L8.43817 3H3.1935l6.8763 10.0074L3.1935 21h1.55384l6.01226-6.9887L15.5618 21h5.2447l-7.1313-10.3782h.0004Zm-2.1282 2.4738-.6967-.9965-5.54349-7.92939h2.38662l4.47367 6.39919.6967.9966 5.8152 8.318h-2.3866l-4.7454-6.7875v-.0004Z\">\r\n            </path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'LINKEDIN'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M19.5565 2C20.9051 2 22 3.09492 22 4.44352V19.5565C22 20.9051 20.9051 22 19.5565 22H4.44352C3.09492 22 2 20.9051 2 19.5565V4.44352C2 3.09492 3.09488 2 4.44352 2H19.5565ZM8.26801 18.5343V9.71723H5.33676v8.81707h2.93125Zm10.56789 0v-5.0562c0-2.7083-1.446-3.96822-3.3742-3.96822-1.5549 0-2.2513.85512-2.6413 1.45572V9.71723H9.88988c.03887.82737 0 8.81707 0 8.81707h2.93052v-4.9241c0-.2636.0189-.527.0966-.7154.2115-.5264.694-1.0716 1.5037-1.0716 1.0599 0 1.4846.8088 1.4846 1.9936v4.7175h2.9306ZM6.82219 5.4657c-1.00289 0-1.65813.65934-1.65813 1.52352 0 .84601.63532 1.52351 1.61934 1.52351 1.02207 0 1.67719-.6775 1.67719-1.52351-.01895-.86297-.63442-1.52164-1.6384-1.52352Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'YOUTUBE'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M21.0053 5.6191c.5996.6477.7946 2.11879.7946 2.11879S22 9.46405 22 11.1908v1.618c0 1.7268-.2001 3.453-.2001 3.453s-.1956 1.4705-.7946 2.1169c-.6859.7654-1.4461.8449-1.8754.8897-.0469.0049-.0899.0094-.1283.0143-2.799.2145-7.0016.222-7.0016.222s-5.20038-.0507-6.80025-.2145c-.07572-.0151-.16746-.0268-.27131-.0402-.50666-.0651-1.3018-.1673-1.93375-.8719-.59957-.6465-.79463-2.1169-.79463-2.1169S2 14.5356 2 12.8082v-1.618c0-1.72615.20006-3.45231.20006-3.45231s.19569-1.47109.79463-2.11879c.68895-.76815 1.4516-.84541 1.88002-.88881.04511-.00457.08651-.00876.12373-.01335C7.79681 4.5 11.995 4.5 11.995 4.5h.0094s4.1982 0 6.9972.21694c.0372.00459.0786.00879.1238.01336.4285.0434 1.1916.12069 1.8799.8888Zm-5.251 6.3832-6.25196 3.7512V8.25117l6.25196 3.75113Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'INSTAGRAM'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M12 2c5.5191 0 10 4.48086 10 10 0 5.5191-4.4809 10-10 10-5.51914 0-10-4.4809-10-10C2 6.48086 6.48086 2 12 2Zm0 3.75c-1.6974 0-1.9102.00719-2.57688.03762-.66523.03035-1.11957.13601-1.51714.29051-.41098.15972-.75953.37343-1.107.72089-.34746.34746-.56117.69602-.72089 1.107-.1545.39753-.26012.85187-.29051 1.5171C5.75719 10.0898 5.75 10.3026 5.75 12s.00719 1.9102.03758 2.5769c.03039.6652.13601 1.1195.29051 1.5171.15972.411.37343.7595.72089 1.107.34747.3475.69602.5612 1.107.7209.39757.1545.85191.2601 1.51714.2905.66668.0304.87948.0376 2.57688.0376s1.9102-.0072 2.5769-.0376c.6652-.0304 1.1195-.136 1.5171-.2905.411-.1597.7595-.3734 1.107-.7209.3475-.3475.5612-.696.7209-1.107.1545-.3976.2601-.8519.2905-1.5171.0304-.6667.0376-.8795.0376-2.5769 0-1.6974-.0072-1.9102-.0376-2.57688-.0304-.66523-.136-1.11957-.2905-1.5171-.1597-.41098-.3734-.75954-.7209-1.107s-.696-.56117-1.107-.72089c-.3976-.1545-.8519-.26016-1.5171-.29051C13.9102 5.75719 13.6974 5.75 12 5.75Zm0 1.12613c1.6688 0 1.8665.00637 2.5255.03645.6094.02781.9403.12961 1.1606.21519.2917.11336.4999.24883.7186.46754.2187.21867.3542.42692.4675.71864.0856.22023.1874.55113.2152 1.1605.0301.65905.0365.85675.0365 2.52555s-.0064 1.8665-.0365 2.5255c-.0278.6094-.1296.9403-.2152 1.1606-.1133.2917-.2488.4999-.4675.7186-.2187.2187-.4269.3542-.7186.4675-.2203.0856-.5512.1874-1.1606.2152-.6589.0301-.8566.0365-2.5255.0365s-1.8666-.0064-2.52555-.0365c-.60937-.0278-.94027-.1296-1.1605-.2152-.29176-.1133-.49997-.2488-.71868-.4675-.21871-.2187-.35414-.4269-.4675-.7186-.08558-.2203-.18742-.5512-.21523-1.1606-.03008-.659-.03641-.8567-.03641-2.5255s.00633-1.8665.03641-2.52555c.02781-.60937.12965-.94027.21523-1.1605.11336-.29172.24879-.49997.4675-.71864.21871-.21871.42692-.35418.71868-.46754.22023-.08558.55113-.18738 1.1605-.21519.65905-.03008.85675-.03645 2.52555-.03645Zm0 1.91442c-1.7725 0-3.20945 1.43695-3.20945 3.20945S10.2275 15.2095 12 15.2095s3.2095-1.437 3.2095-3.2095c0-1.7725-1.437-3.20945-3.2095-3.20945Zm0 5.29275c-1.1506 0-2.08332-.9327-2.08332-2.0833 0-1.1506.93272-2.08332 2.08332-2.08332S14.0833 10.8494 14.0833 12 13.1506 14.0833 12 14.0833Zm4.0863-5.41955c0 .41422-.3358.74996-.7501.74996-.4141 0-.7499-.33574-.7499-.74996s.3358-.75.7499-.75c.4143 0 .7501.33578.7501.75Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'TELEGRAM'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M22 12c0 5.5229-4.4771 10-10 10-5.52285 0-10-4.4771-10-10C2 6.47715 6.47715 2 12 2c5.5229 0 10 4.47715 10 10Zm-9.6417-2.61755c-.9726.40455-2.91653 1.24185-5.83173 2.51195-.47339.1883-.72136.3725-.74394.5525-.03815.3044.34296.4242.86192.5874.0706.0222.14374.0452.21872.0695.51059.166 1.19741.3602 1.55446.3679.32388.007.68537-.1265 1.08446-.4006 2.72381-1.8386 4.12981-2.7679 4.21801-2.788.0623-.0141.1486-.0319.2071.0201.0585.052.0527.1504.0465.1768-.0377.1609-1.5335 1.5516-2.3077 2.2714-.2415.2244-.4127.3836-.4477.42-.0784.0814-.1583.1584-.2351.2325-.4743.4572-.83.8001.0197 1.3601.4084.2691.7352.4917 1.0612.7137.356.2424.7111.4842 1.1705.7854.117.0767.2288.1564.3377.234.4143.2954.7865.5608 1.2464.5184.2672-.0245.5432-.2758.6834-1.0252.3313-1.771.9825-5.6083 1.133-7.18949.0132-.13853-.0034-.31583-.0167-.39367-.0134-.07782-.0412-.18872-.1424-.2708-.1198-.09722-.3048-.11772-.3875-.11627-.3761.00663-.9531.20728-3.7303 1.36238Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'THREADS'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path\r\n                d=\"M12.1482 21.6888h-.0058c-2.89118-.0194-5.1138-.9727-6.60781-2.833-1.32737-1.6568-2.01334-3.9608-2.03659-6.848v-.0136c.02325-2.88921.70922-5.19128 2.03853-6.84806C7.0286 3.28395 9.25316 2.33057 12.1424 2.31119h.0116c2.2168.0155 4.0712.5852 5.511 1.6936 1.3545 1.04252 2.3079 2.52685 2.833 4.41423l-1.6471.45925c-.8914-3.19731-3.1469-4.83085-6.7047-4.85604-2.34853.01744-4.12546.75573-5.28037 2.19355C5.7865 7.56253 5.22842 9.50804 5.20711 12c.02131 2.492.57939 4.4375 1.66066 5.7842 1.15491 1.4398 2.93184 2.1781 5.28043 2.1936 2.118-.0155 3.519-.5097 4.6836-1.651 1.3293-1.3022 1.306-2.9008.8797-3.8736-.25-.5736-.7054-1.0503-1.3196-1.4126-.155 1.0909-.5019 1.9746-1.0367 2.6412-.7151.8894-1.7285 1.3758-3.0113 1.4455-.9708.0523-1.9068-.1763-2.63149-.6472-.85843-.5561-1.36031-1.4049-1.41457-2.3931-.05232-.9612.32942-1.8448 1.07352-2.4881.71114-.6143 1.71104-.9747 2.89304-1.0425.8701-.0485 1.6859-.0097 2.4377.1143-.1007-.5988-.3022-1.07546-.6045-1.41844-.4147-.47282-1.0561-.7131-1.9049-.71891h-.0232c-.6821 0-1.6084.18796-2.19743 1.06577l-1.41844-.95145c.7906-1.17428 2.07337-1.82149 3.61587-1.82149h.0349c2.5791.0155 4.1158 1.59478 4.2689 4.35032.0872.0368.1744.0755.2596.1143 1.2034.5658 2.0831 1.4223 2.5462 2.4784.6434 1.4707.7035 3.8678-1.2498 5.7803-1.494 1.4611-3.3058 2.1219-5.8753 2.1393h-.0058Zm.81-9.4388c-.1958 0-.3934.0058-.5969.0174-1.4824.0833-2.40667.7635-2.3544 1.7304.0543 1.0135 1.1724 1.4844 2.2479 1.4262.9882-.0523 2.2749-.4379 2.4919-2.9957-.5464-.1183-1.1452-.1783-1.7885-.1783Z\">\r\n            </path>\r\n        </svg>\r\n    </a>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SociaIconsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-socia-icons', standalone: true, imports: [
-                        CommonModule
-                    ], template: "<div *ngIf=\"socialIconData?.type == 'FACEBOOK'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M10.4375 21.8784C5.65941 21.1274 2 16.9877 2 12 2 6.48086 6.48086 2 12 2c5.5191 0 10 4.48086 10 10 0 4.9877-3.6594 9.1274-8.4375 9.8784v-6.9878h2.3301L16.3359 12h-2.7734v-1.8758c0-.79084.3874-1.5617 1.6296-1.5617h1.261V6.10156s-1.1443-.19531-2.2385-.19531c-2.2842 0-3.7771 1.38438-3.7771 3.89063V12H7.89844v2.8906h2.53906v6.9878Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'TWITTER'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path\r\n                d=\"M13.6756 10.6218 20.2324 3h-1.5537l-5.6933 6.61788L8.43817 3H3.1935l6.8763 10.0074L3.1935 21h1.55384l6.01226-6.9887L15.5618 21h5.2447l-7.1313-10.3782h.0004Zm-2.1282 2.4738-.6967-.9965-5.54349-7.92939h2.38662l4.47367 6.39919.6967.9966 5.8152 8.318h-2.3866l-4.7454-6.7875v-.0004Z\">\r\n            </path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'LINKEDIN'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M19.5565 2C20.9051 2 22 3.09492 22 4.44352V19.5565C22 20.9051 20.9051 22 19.5565 22H4.44352C3.09492 22 2 20.9051 2 19.5565V4.44352C2 3.09492 3.09488 2 4.44352 2H19.5565ZM8.26801 18.5343V9.71723H5.33676v8.81707h2.93125Zm10.56789 0v-5.0562c0-2.7083-1.446-3.96822-3.3742-3.96822-1.5549 0-2.2513.85512-2.6413 1.45572V9.71723H9.88988c.03887.82737 0 8.81707 0 8.81707h2.93052v-4.9241c0-.2636.0189-.527.0966-.7154.2115-.5264.694-1.0716 1.5037-1.0716 1.0599 0 1.4846.8088 1.4846 1.9936v4.7175h2.9306ZM6.82219 5.4657c-1.00289 0-1.65813.65934-1.65813 1.52352 0 .84601.63532 1.52351 1.61934 1.52351 1.02207 0 1.67719-.6775 1.67719-1.52351-.01895-.86297-.63442-1.52164-1.6384-1.52352Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'YOUTUBE'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M21.0053 5.6191c.5996.6477.7946 2.11879.7946 2.11879S22 9.46405 22 11.1908v1.618c0 1.7268-.2001 3.453-.2001 3.453s-.1956 1.4705-.7946 2.1169c-.6859.7654-1.4461.8449-1.8754.8897-.0469.0049-.0899.0094-.1283.0143-2.799.2145-7.0016.222-7.0016.222s-5.20038-.0507-6.80025-.2145c-.07572-.0151-.16746-.0268-.27131-.0402-.50666-.0651-1.3018-.1673-1.93375-.8719-.59957-.6465-.79463-2.1169-.79463-2.1169S2 14.5356 2 12.8082v-1.618c0-1.72615.20006-3.45231.20006-3.45231s.19569-1.47109.79463-2.11879c.68895-.76815 1.4516-.84541 1.88002-.88881.04511-.00457.08651-.00876.12373-.01335C7.79681 4.5 11.995 4.5 11.995 4.5h.0094s4.1982 0 6.9972.21694c.0372.00459.0786.00879.1238.01336.4285.0434 1.1916.12069 1.8799.8888Zm-5.251 6.3832-6.25196 3.7512V8.25117l6.25196 3.75113Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'INSTAGRAM'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M12 2c5.5191 0 10 4.48086 10 10 0 5.5191-4.4809 10-10 10-5.51914 0-10-4.4809-10-10C2 6.48086 6.48086 2 12 2Zm0 3.75c-1.6974 0-1.9102.00719-2.57688.03762-.66523.03035-1.11957.13601-1.51714.29051-.41098.15972-.75953.37343-1.107.72089-.34746.34746-.56117.69602-.72089 1.107-.1545.39753-.26012.85187-.29051 1.5171C5.75719 10.0898 5.75 10.3026 5.75 12s.00719 1.9102.03758 2.5769c.03039.6652.13601 1.1195.29051 1.5171.15972.411.37343.7595.72089 1.107.34747.3475.69602.5612 1.107.7209.39757.1545.85191.2601 1.51714.2905.66668.0304.87948.0376 2.57688.0376s1.9102-.0072 2.5769-.0376c.6652-.0304 1.1195-.136 1.5171-.2905.411-.1597.7595-.3734 1.107-.7209.3475-.3475.5612-.696.7209-1.107.1545-.3976.2601-.8519.2905-1.5171.0304-.6667.0376-.8795.0376-2.5769 0-1.6974-.0072-1.9102-.0376-2.57688-.0304-.66523-.136-1.11957-.2905-1.5171-.1597-.41098-.3734-.75954-.7209-1.107s-.696-.56117-1.107-.72089c-.3976-.1545-.8519-.26016-1.5171-.29051C13.9102 5.75719 13.6974 5.75 12 5.75Zm0 1.12613c1.6688 0 1.8665.00637 2.5255.03645.6094.02781.9403.12961 1.1606.21519.2917.11336.4999.24883.7186.46754.2187.21867.3542.42692.4675.71864.0856.22023.1874.55113.2152 1.1605.0301.65905.0365.85675.0365 2.52555s-.0064 1.8665-.0365 2.5255c-.0278.6094-.1296.9403-.2152 1.1606-.1133.2917-.2488.4999-.4675.7186-.2187.2187-.4269.3542-.7186.4675-.2203.0856-.5512.1874-1.1606.2152-.6589.0301-.8566.0365-2.5255.0365s-1.8666-.0064-2.52555-.0365c-.60937-.0278-.94027-.1296-1.1605-.2152-.29176-.1133-.49997-.2488-.71868-.4675-.21871-.2187-.35414-.4269-.4675-.7186-.08558-.2203-.18742-.5512-.21523-1.1606-.03008-.659-.03641-.8567-.03641-2.5255s.00633-1.8665.03641-2.52555c.02781-.60937.12965-.94027.21523-1.1605.11336-.29172.24879-.49997.4675-.71864.21871-.21871.42692-.35418.71868-.46754.22023-.08558.55113-.18738 1.1605-.21519.65905-.03008.85675-.03645 2.52555-.03645Zm0 1.91442c-1.7725 0-3.20945 1.43695-3.20945 3.20945S10.2275 15.2095 12 15.2095s3.2095-1.437 3.2095-3.2095c0-1.7725-1.437-3.20945-3.2095-3.20945Zm0 5.29275c-1.1506 0-2.08332-.9327-2.08332-2.0833 0-1.1506.93272-2.08332 2.08332-2.08332S14.0833 10.8494 14.0833 12 13.1506 14.0833 12 14.0833Zm4.0863-5.41955c0 .41422-.3358.74996-.7501.74996-.4141 0-.7499-.33574-.7499-.74996s.3358-.75.7499-.75c.4143 0 .7501.33578.7501.75Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'TELEGRAM'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M22 12c0 5.5229-4.4771 10-10 10-5.52285 0-10-4.4771-10-10C2 6.47715 6.47715 2 12 2c5.5229 0 10 4.47715 10 10Zm-9.6417-2.61755c-.9726.40455-2.91653 1.24185-5.83173 2.51195-.47339.1883-.72136.3725-.74394.5525-.03815.3044.34296.4242.86192.5874.0706.0222.14374.0452.21872.0695.51059.166 1.19741.3602 1.55446.3679.32388.007.68537-.1265 1.08446-.4006 2.72381-1.8386 4.12981-2.7679 4.21801-2.788.0623-.0141.1486-.0319.2071.0201.0585.052.0527.1504.0465.1768-.0377.1609-1.5335 1.5516-2.3077 2.2714-.2415.2244-.4127.3836-.4477.42-.0784.0814-.1583.1584-.2351.2325-.4743.4572-.83.8001.0197 1.3601.4084.2691.7352.4917 1.0612.7137.356.2424.7111.4842 1.1705.7854.117.0767.2288.1564.3377.234.4143.2954.7865.5608 1.2464.5184.2672-.0245.5432-.2758.6834-1.0252.3313-1.771.9825-5.6083 1.133-7.18949.0132-.13853-.0034-.31583-.0167-.39367-.0134-.07782-.0412-.18872-.1424-.2708-.1198-.09722-.3048-.11772-.3875-.11627-.3761.00663-.9531.20728-3.7303 1.36238Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'THREADS'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path\r\n                d=\"M12.1482 21.6888h-.0058c-2.89118-.0194-5.1138-.9727-6.60781-2.833-1.32737-1.6568-2.01334-3.9608-2.03659-6.848v-.0136c.02325-2.88921.70922-5.19128 2.03853-6.84806C7.0286 3.28395 9.25316 2.33057 12.1424 2.31119h.0116c2.2168.0155 4.0712.5852 5.511 1.6936 1.3545 1.04252 2.3079 2.52685 2.833 4.41423l-1.6471.45925c-.8914-3.19731-3.1469-4.83085-6.7047-4.85604-2.34853.01744-4.12546.75573-5.28037 2.19355C5.7865 7.56253 5.22842 9.50804 5.20711 12c.02131 2.492.57939 4.4375 1.66066 5.7842 1.15491 1.4398 2.93184 2.1781 5.28043 2.1936 2.118-.0155 3.519-.5097 4.6836-1.651 1.3293-1.3022 1.306-2.9008.8797-3.8736-.25-.5736-.7054-1.0503-1.3196-1.4126-.155 1.0909-.5019 1.9746-1.0367 2.6412-.7151.8894-1.7285 1.3758-3.0113 1.4455-.9708.0523-1.9068-.1763-2.63149-.6472-.85843-.5561-1.36031-1.4049-1.41457-2.3931-.05232-.9612.32942-1.8448 1.07352-2.4881.71114-.6143 1.71104-.9747 2.89304-1.0425.8701-.0485 1.6859-.0097 2.4377.1143-.1007-.5988-.3022-1.07546-.6045-1.41844-.4147-.47282-1.0561-.7131-1.9049-.71891h-.0232c-.6821 0-1.6084.18796-2.19743 1.06577l-1.41844-.95145c.7906-1.17428 2.07337-1.82149 3.61587-1.82149h.0349c2.5791.0155 4.1158 1.59478 4.2689 4.35032.0872.0368.1744.0755.2596.1143 1.2034.5658 2.0831 1.4223 2.5462 2.4784.6434 1.4707.7035 3.8678-1.2498 5.7803-1.494 1.4611-3.3058 2.1219-5.8753 2.1393h-.0058Zm.81-9.4388c-.1958 0-.3934.0058-.5969.0174-1.4824.0833-2.40667.7635-2.3544 1.7304.0543 1.0135 1.1724 1.4844 2.2479 1.4262.9882-.0523 2.2749-.4379 2.4919-2.9957-.5464-.1183-1.1452-.1783-1.7885-.1783Z\">\r\n            </path>\r\n        </svg>\r\n    </a>\r\n</div>" }]
-        }], ctorParameters: () => [], propDecorators: { socialIconData: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
-
-class SimpoFooterLayoutDirective {
-    constructor(el, eventService) {
-        this.el = el;
-        this.eventService = eventService;
-    }
-    ngOnInit() {
-        this.appply();
-    }
-    ngOnChanges() {
-        this.appply();
-    }
-    appply() {
-        applySpacing(this.el.nativeElement, this.layout?.spacing);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoFooterLayoutDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: SimpoFooterLayoutDirective, isStandalone: true, selector: "[simpoFooterLayout]", inputs: { layout: ["simpoFooterLayout", "layout"] }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoFooterLayoutDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoFooterLayout]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { layout: [{
-                type: Input,
-                args: ['simpoFooterLayout']
-            }] } });
-
-class FooterSectionComponent {
-    constructor() {
-        this.color = '#ffffff';
-        this.footerTypes = FooterTypes$1;
-        this.showEditors = false;
-    }
-    ngOnInit() {
-        this.style = this.data?.styles;
-        this.content = this.data?.content;
-    }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FooterSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\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-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n                    <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n                    align-items-end\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n                    <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\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-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n                    <div class=\"d-flex align-items-center 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-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\"></simpo-hover-elements>\r\n    </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: StyleDirectivesModule }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FooterSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-footer-section', standalone: true, imports: [
-                        SimpoElementsModule,
-                        CommonModule,
-                        ContentFitDirective$1,
-                        StyleDirectivesModule,
-                        SimpoComponentModule,
-                        SimpoButtonComponent$1,
-                        SociaIconsComponent$1
-                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\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-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n                    <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n                    align-items-end\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n                    <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\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-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n                    <div class=\"d-flex align-items-center 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-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\"></simpo-hover-elements>\r\n    </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }] } });
-
-class ImageCarouselSectionComponent {
-    constructor() {
-        this.screenWidth = 0;
-        this.getScreenSize();
-    }
-    ngOnInit() {
-        this.content = this.data?.content;
-        this.style = this.data?.styles;
-    }
-    getScreenSize(event) {
-        this.screenWidth = window.innerWidth;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageCarouselSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\">\n  <div class=\"row\">\n    <div *ngFor=\"let text of data?.content?.inputText\">\n      <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n    </div>\n\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\">\n      <ol class=\"carousel-indicators\">\n        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n          data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\n      </ol>\n      <div class=\"carousel-inner\">\n        <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\n          <div class=\"row\">\n            <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\n              <img class=\"d-block position-relative\"style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block image-height-80vh\"style=\"width: 60%;\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n            <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\n              <img class=\"d-block w-100 image-height-40vh\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n          </div>\n        </div>\n      </div>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Previous</span>\n      </a>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Next</span>\n      </a>\n    </div>\n\n\n  </div>\n</section>", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BackgroundDirective$1, selector: "[simpoBackground]", inputs: ["simpoBackground"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageCarouselSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-image-carousel-section', standalone: true, imports: [
-                        SimpoElementsModule,
-                        CommonModule,
-                        ColumnDirectiveDirective$1,
-                        // StyleDirectivesModule,
-                        SimpoButtonComponent$1,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1
-                    ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\">\n  <div class=\"row\">\n    <div *ngFor=\"let text of data?.content?.inputText\">\n      <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n    </div>\n\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\">\n      <ol class=\"carousel-indicators\">\n        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n          data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\n      </ol>\n      <div class=\"carousel-inner\">\n        <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\n          <div class=\"row\">\n            <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\n              <img class=\"d-block position-relative\"style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block image-height-80vh\"style=\"width: 60%;\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n            <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\n              <img class=\"d-block w-100 image-height-40vh\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n          </div>\n        </div>\n      </div>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Previous</span>\n      </a>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Next</span>\n      </a>\n    </div>\n\n\n  </div>\n</section>", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], getScreenSize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
-
-class CornerDirective {
-    constructor(el, eventService) {
-        this.el = el;
-        this.eventService = eventService;
-        this.checkSizeChanges();
+class CornerDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
+        this.checkSizeChanges();
     }
     ngOnInit() {
     }
@@ -942,6 +800,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['simpoCorner']
             }] } });
 
+class SimpoFooterLayoutDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
+    }
+    ngOnInit() {
+        this.appply();
+    }
+    ngOnChanges() {
+        this.appply();
+    }
+    appply() {
+        applySpacing(this.el.nativeElement, this.layout?.spacing);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoFooterLayoutDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: SimpoFooterLayoutDirective, isStandalone: true, selector: "[simpoFooterLayout]", inputs: { layout: ["simpoFooterLayout", "layout"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoFooterLayoutDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoFooterLayout]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { layout: [{
+                type: Input,
+                args: ['simpoFooterLayout']
+            }] } });
+
+class HoverDirective {
+    constructor(el) {
+        this.el = el;
+        this.hovering = new EventEmitter();
+    }
+    ngOnChanges() {
+    }
+    onMouseEnter() {
+        this.hovering.emit(true);
+    }
+    onMouseLeave() {
+        this.hovering.emit(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: HoverDirective, isStandalone: true, selector: "[simpoHover]", outputs: { hovering: "hovering" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoHover]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hovering: [{
+                type: Output
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 class ImageDirectiveDirective {
     constructor(el, eventService) {
         this.el = el;
@@ -1017,429 +935,322 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }] } });
 
-class ImageGridSectionComponent {
-    constructor(eventService) {
+class OverlayDirective {
+    constructor(el, eventService) {
+        this.el = el;
         this.eventService = eventService;
-        this._mainContainer = null;
-        this.showEditors = false;
-    }
-    ngOnInit() {
-        this.content = this.data?.content;
-        this.style = this.data?.styles;
+        this.eventService.colorOverlayChangeChecks.subscribe((res) => {
+            if (this.el.nativeElement.id === res.type) {
+                if (res.data?.showImage) {
+                    this.el.nativeElement.style.setProperty('background-color', this.getRGBA(res.data.color, res.data.opacity));
+                }
+            }
+        });
     }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageGridSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\n          *ngFor=\"let img of content?.listItem?.data\"\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\n          <div class=\"image-section\">\n            <img [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" />\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section,.image-section img{width:100%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective$1, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: StyleDirectivesModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageGridSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-image-grid-section', standalone: true, imports: [
-                        SimpoElementsModule,
-                        CommonModule,
-                        ColumnDirectiveDirective$1,
-                        StyleDirectivesModule,
-                        ImageDirectiveDirective$1,
-                        ContentFitDirective$1,
-                        // StyleDirectivesModule,
-                        SimpoButtonComponent$1,
-                        SimpoComponentModule,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\n          *ngFor=\"let img of content?.listItem?.data\"\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\n          <div class=\"image-section\">\n            <img [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" />\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section,.image-section img{width:100%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], _mainContainer: [{
-                type: ViewChild,
-                args: ['mainContainer']
-            }] } });
-
-class ImageSectionComponent {
-    constructor() {
-        this._mainContainer = null;
-        this.showEditors = false;
-    }
-    ngOnInit() {
-        this.content = this.data?.content;
-        this.style = this.data?.styles;
-    }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n                <div *ngFor=\"let text of data?.content?.inputText\">\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n                </div>\n\n                <div class=\"image-section\" [ngStyle]=\"style?.fullWidth ? {'padding': '0px', 'margin': '0px'} : {}\">\n                    <img [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\"\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\"\n                        [id]=\"data?.id\" />\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n    </div>\n</section>\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: StyleDirectivesModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-image-section', standalone: true, imports: [
-                        SimpoElementsModule,
-                        CommonModule,
-                        ColumnDirectiveDirective$1,
-                        StyleDirectivesModule,
-                        ContentFitDirective$1,
-                        SimpoComponentModule,
-                        SimpoButtonComponent$1,
-                        SimpoComponentModule,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n                <div *ngFor=\"let text of data?.content?.inputText\">\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n                </div>\n\n                <div class=\"image-section\" [ngStyle]=\"style?.fullWidth ? {'padding': '0px', 'margin': '0px'} : {}\">\n                    <img [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\"\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\"\n                        [id]=\"data?.id\" />\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n    </div>\n</section>\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], _mainContainer: [{
-                type: ViewChild,
-                args: ['mainContainer']
-            }] } });
-
-class BelowImageCardComponent {
-    ngOnInit() {
-        // if(this.button && !this.button.content){
-        //   this.button.content = this.data.button
-        // }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BelowImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div>\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BelowImageCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-below-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective$1, CornerDirective$1, SimpoButtonComponent], template: "<div>\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"] }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], styles: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], componentId: [{
-                type: Input
-            }], button: [{
-                type: Input
-            }] } });
-
-class TopOfImageCardComponent {
-    ngOnInit() {
-        // if(this.button && !this.button.content){
-        //   this.button.content = this.data.button
-        // }
-        console.log(this.button);
+    ngOnChanges() {
+        if (this.backgroundData?.showImage) {
+            this.el.nativeElement.style.setProperty('background-color', this.getRGBA(this.backgroundData.color, this.backgroundData.opacity));
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TopOfImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\n\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective$1, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective$1, CornerDirective$1, TextBackgroundDirectiveDirective$1, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\n\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"] }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], styles: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], componentId: [{
-                type: Input
-            }], button: [{
-                type: Input
-            }] } });
-
-class CoveringImageCardComponent {
-    ngOnInit() {
-        // if(this.button && !this.button.content){
-        //   this.button.content = this.data.button
-        // }
+    getRGBA(bgColor, opacity) {
+        const r = parseInt(bgColor.slice(1, 3), 16);
+        const g = parseInt(bgColor.slice(3, 5), 16);
+        const b = parseInt(bgColor.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoveringImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective$1, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: OverlayDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: OverlayDirective, isStandalone: true, selector: "[simpoOverlay]", inputs: { backgroundData: ["simpoOverlay", "backgroundData"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective$1, CornerDirective$1, TextBackgroundDirectiveDirective$1, SimpoButtonComponent], template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"] }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], styles: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], componentId: [{
-                type: Input
-            }], button: [{
-                type: Input
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: OverlayDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoOverlay]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { backgroundData: [{
+                type: Input,
+                args: ['simpoOverlay']
             }] } });
 
-class ColumnDirectiveDirective {
+class PositionLayoutDirectiveDirective {
     constructor(el, eventService) {
         this.el = el;
         this.eventService = eventService;
-        this.checkSizeChanges();
+        this.positionLayoutChangeCheck();
     }
     ngOnChanges() {
-        if (this.columnDirective === 'Large') {
-            this.el.nativeElement.classList.add('col-md-6');
-        }
-        if (this.columnDirective === 'Medium') {
-            this.el.nativeElement.classList.add('col-md-4');
-        }
-        if (this.columnDirective === 'Small') {
-            this.el.nativeElement.classList.add('col-md-3');
-        }
+        this.changePositionLayout();
     }
     ngOnDestroy() {
-        if (this.cardSizeSubSubscription) {
-            this.cardSizeSubSubscription.unsubscribe();
+        if (this.positionLayoutSubscription) {
+            this.positionLayoutSubscription.unsubscribe();
         }
     }
-    checkSizeChanges() {
-        this.cardSizeSubSubscription = this.eventService.cardSizeChangeChecks.subscribe((res) => {
-            this.addClass(res.size, res.id);
-        });
+    changePositionLayout() {
+        this.removeAllClassIfPresent();
+        this.el.nativeElement.classList.add(BANNERALIGNMENT$1[this.positionLayout?.value]);
     }
-    addClass(res, id) {
-        if (this.el.nativeElement.id == id) {
-            this.removeAllClasses();
-            if (res === 'Large') {
-                this.el.nativeElement.classList.add('col-md-6');
-            }
-            if (res === 'Medium') {
-                this.el.nativeElement.classList.add('col-md-4');
-            }
-            if (res === 'Small') {
-                this.el.nativeElement.classList.add('col-md-3');
-            }
-        }
+    removeAllClassIfPresent() {
+        this.el.nativeElement.classList.remove(BANNERALIGNMENT$1.left);
+        this.el.nativeElement.classList.remove(BANNERALIGNMENT$1.right);
+        this.el.nativeElement.classList.remove(BANNERALIGNMENT$1.top);
+        this.el.nativeElement.classList.remove(BANNERALIGNMENT$1.bottom);
     }
-    removeAllClasses() {
-        this.el.nativeElement.classList.remove("col-md-3");
-        this.el.nativeElement.classList.remove("col-md-4");
-        this.el.nativeElement.classList.remove("col-md-6");
+    positionLayoutChangeCheck() {
+        this.positionLayoutSubscription = this.eventService.postionLayoutChangeChecks.subscribe((res) => {
+            if (this.el.nativeElement.id === res.id) {
+                this.positionLayout = res.data;
+                this.changePositionLayout();
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ColumnDirectiveDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ColumnDirectiveDirective, isStandalone: true, selector: "[simpoColumnDirective]", inputs: { columnDirective: ["simpoColumnDirective", "columnDirective"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: PositionLayoutDirectiveDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: PositionLayoutDirectiveDirective, isStandalone: true, selector: "[simpoPositionLayoutDirective]", inputs: { positionLayout: ["simpoPositionLayoutDirective", "positionLayout"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ColumnDirectiveDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: PositionLayoutDirectiveDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[simpoColumnDirective]',
+                    selector: '[simpoPositionLayoutDirective]',
                     standalone: true
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { columnDirective: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { positionLayout: [{
                 type: Input,
-                args: ['simpoColumnDirective']
+                args: ['simpoPositionLayoutDirective']
             }] } });
 
-class ServiceSectionComponent {
-    constructor(eventService) {
+class TextBackgroundDirectiveDirective {
+    constructor(el, eventService) {
+        this.el = el;
         this.eventService = eventService;
-        this._mainContainer = null;
-        this.TextPosition = TextPosition$1;
-        this.showEditors = false;
+        this.textBackgroundChangeCheck();
     }
-    ngOnInit() {
-        this.content = this.data?.content;
-        this.style = this.data?.styles;
-        this.button = this.data?.action.buttons[0];
+    ngOnChanges() {
+        if (this.textBackgroundDirective) {
+            let opacity = this.textBackgroundDirective?.amount / 100;
+            let rgb = this.getrgbFormColor(this.textBackgroundDirective.color);
+            let backgroundColor = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + ')';
+            if (this.checkColorIsRgbFormOrNot(backgroundColor)) {
+                let rgba = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + "," + opacity + ')';
+                this.el.nativeElement.style.setProperty('background', rgba);
+                this.el.nativeElement.style.setProperty('color', this.getContrastColorFromRGBA(rgba));
+            }
+        }
     }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
+    ngOnDestroy() {
+        if (this.textBackgroundSubscription) {
+            this.textBackgroundSubscription.unsubscribe();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective$1, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: StyleDirectivesModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ServiceSectionComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'simpo-service-section', standalone: true, imports: [
-                        SimpoElementsModule,
-                        CommonModule,
-                        ContentFitDirective$1,
-                        StyleDirectivesModule,
-                        SimpoComponentModule,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1,
-                        SimpoButtonComponent$1
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], _mainContainer: [{
-                type: ViewChild,
-                args: ['mainContainer']
-            }] } });
-
-class TeamMemberSectionComponent {
-    constructor(eventService) {
-        this.eventService = eventService;
-        this.TextPosition = TextPosition$1;
-        this.showEditors = false;
+    getrgbFormColor(hexCode) {
+        const hexColorRegex = /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+        if (hexColorRegex.test(hexCode)) {
+            const r = parseInt(hexCode.slice(1, 3), 16);
+            const g = parseInt(hexCode.slice(3, 5), 16);
+            const b = parseInt(hexCode.slice(5, 7), 16);
+            return { r, g, b };
+        }
+        return hexCode;
+    }
+    checkColorIsRgbFormOrNot(color) {
+        const rgbColorRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/;
+        return rgbColorRegex.test(color);
+    }
+    textBackgroundChangeCheck() {
+        this.textBackgroundSubscription = this.eventService.textBackgroundChangeChecks.subscribe((res) => {
+            this.changeTextBackground(res.id, res.textBackground);
+        });
+    }
+    changeTextBackground(id, textBackground) {
+        if (this.el.nativeElement.id === id && textBackground) {
+            let opacity = textBackground.amount / 100;
+            let rgb = this.getrgbFormColor(textBackground.color);
+            let backgroundColor = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + ')';
+            if (this.checkColorIsRgbFormOrNot(backgroundColor)) {
+                let rgba = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + "," + opacity + ')';
+                this.el.nativeElement.style.setProperty('background', rgba);
+                this.el.nativeElement.style.setProperty('color', this.getContrastColorFromRGBA(rgba));
+            }
+        }
+    }
+    getContrastColorFromRGBA(rgbaString) {
+        // Extract RGBA values from the RGBA string
+        const rgbaValues = this.extractRGBA(rgbaString);
+        if (rgbaValues) {
+            // Get contrast color based on RGBA values
+            return this.getContrastColor(rgbaValues);
+        }
+        // Return null if extraction failed
+        return null;
+    }
+    // Function to extract RGBA values from RGBA string
+    extractRGBA(rgbaString) {
+        // Regular expression to match RGBA values
+        const rgbaRegex = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*(?:\.\d+)?)?\)/;
+        // Match the RGBA string against the regex
+        const match = rgbaString.match(rgbaRegex);
+        if (match) {
+            // Extract RGBA values from the regex groups
+            const [, r, g, b, a] = match.map(parseFloat);
+            // If alpha (a) is not provided, set it to 1
+            const alpha = typeof a === 'undefined' ? 1 : a;
+            // Return the RGBA values as an array
+            return [r, g, b, alpha];
+        }
+        // Return null if no match found
+        return null;
+    }
+    // Function to calculate contrast color based on RGBA values
+    getContrastColor(rgba) {
+        // Extract RGB values from the RGBA color
+        const [r, g, b, a] = rgba;
+        // Convert RGB values to luminance
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+        // Determine threshold for color selection
+        const threshold = 0.5;
+        // Choose contrasting color based on luminance
+        return luminance > threshold ? 'black' : 'white';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextBackgroundDirectiveDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: TextBackgroundDirectiveDirective, isStandalone: true, selector: "[simpoTextBackgroundDirective]", inputs: { textBackgroundDirective: ["simpoTextBackgroundDirective", "textBackgroundDirective"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextBackgroundDirectiveDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoTextBackgroundDirective]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { textBackgroundDirective: [{
+                type: Input,
+                args: ['simpoTextBackgroundDirective']
+            }] } });
+
+class TextElementComponent {
+    constructor() {
+        this.textData = '';
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TextElementComponent, isStandalone: true, selector: "simpo-text-element", inputs: { textData: "textData" }, ngImport: i0, template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\"></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-text-element', standalone: true, imports: [CommonModule], template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\"></div>\n" }]
+        }], propDecorators: { textData: [{
+                type: Input
+            }] } });
+
+class SimpoButtonComponent {
     ngOnInit() {
-        this.content = this.data?.content;
-        this.style = this.data?.styles;
-        this.button = this.data?.action.buttons[0];
     }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
+    redirectTo() {
+        if (this.buttonContent?.newTab) {
+            window.open(this.buttonContent.redirectionUrl, '_blank');
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TeamMemberSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TeamMemberSectionComponent, isStandalone: true, selector: "simpo-team-member-section", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective$1, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: StyleDirectivesModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SimpoButtonComponent, isStandalone: true, selector: "app-button-element", inputs: { buttonContent: "buttonContent", buttonStyle: "buttonStyle", color: "color", sectionId: "sectionId" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective$1, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TeamMemberSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-team-member-section', standalone: true, imports: [
-                        SimpoElementsModule,
-                        CommonModule,
-                        ContentFitDirective$1,
-                        StyleDirectivesModule,
-                        SimpoComponentModule,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1,
-                        SimpoButtonComponent$1
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
+            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective$1], template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"] }]
+        }], propDecorators: { buttonContent: [{
                 type: Input
-            }], index: [{
+            }], buttonStyle: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], sectionId: [{
                 type: Input
             }] } });
 
-class ContainerFitDirective {
-    constructor(el, eventService) {
-        this.el = el;
-        this.eventService = eventService;
+class HoverElementsComponent {
+    constructor(_eventService) {
+        this._eventService = _eventService;
+        this.edit = new EventEmitter();
     }
     ngOnInit() {
-        this.appply();
     }
-    ngOnChanges() {
-        this.appply();
+    editSection() {
+        this._eventService.editSection.emit({ data: this.data });
     }
-    appply() {
-        if (this.layout?.align == 'center') {
-            this.el.nativeElement.style.setProperty('margin', 'auto');
-            this.el.nativeElement.style.setProperty('align-items', 'center');
-        }
-        else if (this.layout?.align == "left") {
-            this.el.nativeElement.style.setProperty('margin-right', "auto");
-            this.el.nativeElement.style.setProperty('align-items', 'flex-start');
-        }
-        else {
-            this.el.nativeElement.style.setProperty("margin-left", "auto");
-            this.el.nativeElement.style.setProperty('align-items', 'flex-end');
-        }
+    regenerateSection() {
+        this._eventService.regenerateSection.emit({ data: this.data });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContainerFitDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ContainerFitDirective, isStandalone: true, selector: "[simpoContainerLayout]", inputs: { layout: ["simpoContainerLayout", "layout"] }, usesOnChanges: true, ngImport: i0 }); }
+    changeContent() {
+        this._eventService.changeContent.emit({ data: this.data });
+    }
+    copySection() {
+        this._eventService.duplicate.emit({ data: this.data });
+    }
+    moveUp() {
+    }
+    moveDown() {
+    }
+    deleteSection() {
+        this._eventService.delete.emit({ data: this.data });
+    }
+    addSection(position) {
+        this._eventService.addNewSectionClick.emit({ status: true, index: this.index, position: position, webCompName: this.data });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverElementsComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\">\r\n    <div class=\"top-btn\" *ngIf=\"data.sectionType != 'footer'\">\r\n        <button class=\"add_btn_top\" (click)=\"addSection('ABOVE')\">Add Section +</button>\r\n    </div>\r\n    <section class=\"hover-tab\">\r\n        <div class=\"tabs-section\">\r\n            <div class=\"edit-tab\">\r\n                <button (click)=\"editSection()\">\r\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <g clip-path=\"url(#clip0_1076_52409)\">\r\n                            <path\r\n                                d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n                                fill=\"#0267c1\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_1076_52409\">\r\n                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg>\r\n                    <span class=\"edit-text\">\r\n                        Edit\r\n                    </span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"></div>\r\n            <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer'\">\r\n                <button (click)=\"regenerateSection()\">\r\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path\r\n                            d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\"\r\n                            fill=\"#0267c1\" />\r\n                    </svg>\r\n                    <span class=\"edit-text\">\r\n                        Regenerate\r\n                    </span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"  *ngIf=\"data.sectionType != 'footer'\"></div>\r\n            <div class=\"regenerate\"  *ngIf=\"data.sectionType != 'footer'\">\r\n                <button (click)=\"changeContent()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-width=\"1.5\" d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\">\r\n                        </path>\r\n                        <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                            d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\"></path>\r\n                    </svg>\r\n                    <span class=\"edit-text\">Change Content</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"  *ngIf=\"data.sectionType != 'footer'\"></div>\r\n            <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer'\">\r\n                <button class=\"copy\" (click)=\"copySection()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path\r\n                            d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n                        </path>\r\n                        <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"moveUp()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"moveDown()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </section>\r\n    <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer'\">\r\n        <button class=\"add_btn\" (click)=\"addSection('BELOW')\">Add Section +</button>\r\n    </div>\r\n</mat-dialog-content>", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:20px;height:auto}.bottom-btn{position:absolute;top:100%;z-index:1001;border-bottom:4px solid #0267c1;width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.add_btn_top{top:0!important;width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.top-btn{border-bottom:4px solid #0267c1}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContainerFitDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoContainerLayout]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { layout: [{
-                type: Input,
-                args: ['simpoContainerLayout']
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverElementsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-hover-elements', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule], template: "<mat-dialog-content class=\"mat-typography\">\r\n    <div class=\"top-btn\" *ngIf=\"data.sectionType != 'footer'\">\r\n        <button class=\"add_btn_top\" (click)=\"addSection('ABOVE')\">Add Section +</button>\r\n    </div>\r\n    <section class=\"hover-tab\">\r\n        <div class=\"tabs-section\">\r\n            <div class=\"edit-tab\">\r\n                <button (click)=\"editSection()\">\r\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <g clip-path=\"url(#clip0_1076_52409)\">\r\n                            <path\r\n                                d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n                                fill=\"#0267c1\" />\r\n                        </g>\r\n                        <defs>\r\n                            <clipPath id=\"clip0_1076_52409\">\r\n                                <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                            </clipPath>\r\n                        </defs>\r\n                    </svg>\r\n                    <span class=\"edit-text\">\r\n                        Edit\r\n                    </span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"></div>\r\n            <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer'\">\r\n                <button (click)=\"regenerateSection()\">\r\n                    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                        <path\r\n                            d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\"\r\n                            fill=\"#0267c1\" />\r\n                    </svg>\r\n                    <span class=\"edit-text\">\r\n                        Regenerate\r\n                    </span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"  *ngIf=\"data.sectionType != 'footer'\"></div>\r\n            <div class=\"regenerate\"  *ngIf=\"data.sectionType != 'footer'\">\r\n                <button (click)=\"changeContent()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-width=\"1.5\" d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\">\r\n                        </path>\r\n                        <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n                            d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\"></path>\r\n                    </svg>\r\n                    <span class=\"edit-text\">Change Content</span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"  *ngIf=\"data.sectionType != 'footer'\"></div>\r\n            <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer'\">\r\n                <button class=\"copy\" (click)=\"copySection()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path\r\n                            d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n                        </path>\r\n                        <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"moveUp()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"moveDown()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n                <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                        class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                        <path fill-rule=\"evenodd\"\r\n                            d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n                            clip-rule=\"evenodd\"></path>\r\n                    </svg>\r\n                </button>\r\n            </div>\r\n        </div>\r\n    </section>\r\n    <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer'\">\r\n        <button class=\"add_btn\" (click)=\"addSection('BELOW')\">Add Section +</button>\r\n    </div>\r\n</mat-dialog-content>", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:20px;height:auto}.bottom-btn{position:absolute;top:100%;z-index:1001;border-bottom:4px solid #0267c1;width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.add_btn_top{top:0!important;width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.top-btn{border-bottom:4px solid #0267c1}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { edit: [{
+                type: Output
+            }], data: [{
+                type: Input
+            }], index: [{
+                type: Input
             }] } });
 
-class TestimonialSectionComponent {
-    constructor() {
+class TextSectionComponent {
+    constructor(_dialog) {
+        this._dialog = _dialog;
         this._mainContainer = null;
         this.showEditors = false;
     }
     ngOnInit() {
         this.content = this.data?.content;
-        this.style = this.data?.styles;
+        this.styles = this.data?.styles;
     }
     showEditTabs(isShow) {
         this.showEditors = isShow;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TestimonialSectionComponent, deps: [], 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" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\">\n          <ol class=\"carousel-indicators\">\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n              data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n          </ol>\n          <div class=\"carousel-inner\">\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\n              [class.active]=\"i === 0\">\n              <div style=\"width: 90%; margin: auto;\">\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [simpoContainerLayout]=\"style?.layout\">\n                  <img [src]=\"testimonial.image.url\" class=\"mb-1\">\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Previous</span>\n          </a>\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Next</span>\n          </a>\n        </div>\n\n\n      </div>\n    </div>\n  </div>\n\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;width:45px;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: StyleDirectivesModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextSectionComponent, deps: [{ token: i1$1.MatDialog }], 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" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\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          <div *ngFor=\"let item of content?.inputText\">\r\n            <simpo-text-element [textData]=\"item.value\"></simpo-text-element>\r\n          </div>\r\n          <div class=\"d-grid 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\" [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 class=\"hover_effect\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 0}.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:100%}.mt-15{margin-top:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.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"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TestimonialSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-testimonial-section', standalone: true, imports: [
-                        SimpoElementsModule,
+            args: [{ selector: 'simpo-text-section', standalone: true, imports: [
                         CommonModule,
-                        ColumnDirectiveDirective$1,
-                        StyleDirectivesModule,
-                        ContentFitDirective$1,
+                        MatGridListModule,
+                        SimpoElementsModule,
                         SimpoComponentModule,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1,
-                        SimpoButtonComponent$1
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\">\n          <ol class=\"carousel-indicators\">\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n              data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n          </ol>\n          <div class=\"carousel-inner\">\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\n              [class.active]=\"i === 0\">\n              <div style=\"width: 90%; margin: auto;\">\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [simpoContainerLayout]=\"style?.layout\">\n                  <img [src]=\"testimonial.image.url\" class=\"mb-1\">\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Previous</span>\n          </a>\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Next</span>\n          </a>\n        </div>\n\n\n      </div>\n    </div>\n  </div>\n\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;width:45px;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
-        }], propDecorators: { data: [{
+                        MatDialogModule,
+                        SimpoButtonComponent$1,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\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          <div *ngFor=\"let item of content?.inputText\">\r\n            <simpo-text-element [textData]=\"item.value\"></simpo-text-element>\r\n          </div>\r\n          <div class=\"d-grid 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\" [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 class=\"hover_effect\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 0}.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:100%}.mt-15{margin-top:15px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.MatDialog }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -1448,209 +1259,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['mainContainer']
             }] } });
 
-class simpoConetenAlignmentDirective {
-    constructor(el, eventService) {
-        this.el = el;
-        this.eventService = eventService;
-    }
-    ngOnChanges() {
-        this.applyContentAlignment();
-    }
-    ngOnDestroy() {
-        if (this.contentAlignmentSubscription) {
-            this.contentAlignmentSubscription.unsubscribe();
-        }
-    }
-    changeAlignmentCheck() {
-        this.contentAlignmentSubscription = this.eventService.contentAlignmentChangeCheck.subscribe((res) => {
-            if (this.el.nativeElement.id === res.id) {
-                this.contentAlignmentData = res.data;
-                this.applyContentAlignment();
-            }
-        });
+class BannerSectionComponent {
+    constructor() {
+        this.showEditors = false;
     }
-    applyContentAlignment() {
-        this.removeAllClassIfPresent();
-        if (this.contentAlignmentData) {
-            this.el.nativeElement.classList.add(contentAlignment$1[this.contentAlignmentData]);
-        }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        if (!this.styles || !this.content)
+            return;
+        // this.styles.layout.bannerImageDisplay = this.content.image.showImage;
     }
-    removeAllClassIfPresent() {
-        this.el.nativeElement.classList.remove(contentAlignment$1[AlignContent$1.Image_BOTTOM]);
-        this.el.nativeElement.classList.remove(contentAlignment$1[AlignContent$1.Image_CENTER]);
-        this.el.nativeElement.classList.remove(contentAlignment$1[AlignContent$1.Image_TOP]);
+    showEditTabs(isShow) {
+        this.showEditors = isShow;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: simpoConetenAlignmentDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: simpoConetenAlignmentDirective, isStandalone: true, selector: "[simpoContentAlignment]", inputs: { contentAlignmentData: ["simpoContentAlignment", "contentAlignmentData"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BannerSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n    [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage\">\r\n        <img\r\n          [src]=\"content?.image?.url\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element  [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [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=\"hover_effect\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:100%}.button-display{display:flex;gap:10px}.gap-15{gap:15px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: simpoConetenAlignmentDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoContentAlignment]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { contentAlignmentData: [{
-                type: Input,
-                args: ['simpoContentAlignment']
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BannerSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-banner-section', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        SimpoComponentModule,
+                        MatGridListModule,
+                        SimpoButtonComponent$1,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\"\r\n    [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n    [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage\">\r\n        <img\r\n          [src]=\"content?.image?.url\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n        </div>\r\n        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of data?.action?.buttons\">\r\n            <app-button-element  [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [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=\"hover_effect\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:100%}.button-display{display:flex;gap:10px}.gap-15{gap:15px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
             }] } });
 
-class PositionLayoutDirectiveDirective {
-    constructor(el, eventService) {
-        this.el = el;
-        this.eventService = eventService;
-        this.positionLayoutChangeCheck();
-    }
-    ngOnChanges() {
-        this.changePositionLayout();
-    }
-    ngOnDestroy() {
-        if (this.positionLayoutSubscription) {
-            this.positionLayoutSubscription.unsubscribe();
-        }
-    }
-    changePositionLayout() {
-        this.removeAllClassIfPresent();
-        this.el.nativeElement.classList.add(BANNERALIGNMENT$1[this.positionLayout?.value]);
-    }
-    removeAllClassIfPresent() {
-        this.el.nativeElement.classList.remove(BANNERALIGNMENT$1.left);
-        this.el.nativeElement.classList.remove(BANNERALIGNMENT$1.right);
-        this.el.nativeElement.classList.remove(BANNERALIGNMENT$1.top);
-        this.el.nativeElement.classList.remove(BANNERALIGNMENT$1.bottom);
-    }
-    positionLayoutChangeCheck() {
-        this.positionLayoutSubscription = this.eventService.postionLayoutChangeChecks.subscribe((res) => {
-            if (this.el.nativeElement.id === res.id) {
-                this.positionLayout = res.data;
-                this.changePositionLayout();
-            }
-        });
+class HeadingElementComponent {
+    constructor() {
+        this.data = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: PositionLayoutDirectiveDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: PositionLayoutDirectiveDirective, isStandalone: true, selector: "[simpoPositionLayoutDirective]", inputs: { positionLayout: ["simpoPositionLayoutDirective", "positionLayout"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HeadingElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: HeadingElementComponent, isStandalone: true, selector: "simpo-heading-element", inputs: { data: "data" }, ngImport: i0, template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\n", styles: [""] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: PositionLayoutDirectiveDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoPositionLayoutDirective]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { positionLayout: [{
-                type: Input,
-                args: ['simpoPositionLayoutDirective']
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HeadingElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-heading-element', standalone: true, imports: [], template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\n" }]
+        }], propDecorators: { data: [{
+                type: Input
             }] } });
 
-class TextImageSectionComponent {
-    constructor(eventService) {
-        this.eventService = eventService;
+class FaqSectionComponent {
+    constructor() {
         this.showEditors = false;
     }
     ngOnInit() {
         this.content = this.data?.content;
-        this.styles = this.data?.styles;
-        if (!this.styles || !this.content)
-            return;
+        this.style = this.data?.styles;
     }
     showEditTabs(isShow) {
         this.showEditors = isShow;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextImageSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TextImageSectionComponent, isStandalone: true, selector: "simpo-text-image-section", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n      <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [simpoAnimation]=\"styles?.animation\" [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n      >\r\n        <div class=\"col-10 col-sm-8 col-lg-6\">\r\n          <img\r\n            [src]=\"content?.image?.url\"\r\n            [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n            [simpoCorner]=\"styles?.corners\"\r\n            class=\"d-block mx-lg-auto img-fluid\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n        </div>\r\n        <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n            <div *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [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=\"hover_effect\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n    </div>\r\n  </div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:100%}.button-display{display:flex;gap:10px;margin-top:15px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "ngmodule", type: StyleDirectivesModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "ngmodule", type: MatGridListModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FaqSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\n      <div *ngFor=\"let text of data?.content?.inputText\" class=\"mb-2\">\n        <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\n      </div>\n\n      <div *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\">\n        <p class=\"heading-medium\" data-toggle=\"collapse\" [attr.data-target]=\"'#collapse-' + i\">\n          {{itemData.inputText[0].value}}</p>\n        <div class=\"body-desc desc collapse multi-collapse\" [attr.id]=\"'collapse-' + i\">{{itemData.inputText[1].value}}\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.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"], outputs: ["edit"] }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextImageSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FaqSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-text-image-section', standalone: true, imports: [
+            args: [{ selector: 'simpo-faq-section', standalone: true, imports: [
                         SimpoElementsModule,
                         CommonModule,
+                        ContentFitDirective,
                         SimpoComponentModule,
-                        StyleDirectivesModule,
-                        MatGridListModule,
-                        SimpoButtonComponent$1,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1,
-                        SimpoButtonComponent$1
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n      <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [simpoAnimation]=\"styles?.animation\" [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n      >\r\n        <div class=\"col-10 col-sm-8 col-lg-6\">\r\n          <img\r\n            [src]=\"content?.image?.url\"\r\n            [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n            [simpoCorner]=\"styles?.corners\"\r\n            class=\"d-block mx-lg-auto img-fluid\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n        </div>\r\n        <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n            <div *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [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=\"hover_effect\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n    </div>\r\n  </div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:100%}.button-display{display:flex;gap:10px;margin-top:15px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\n      <div *ngFor=\"let text of data?.content?.inputText\" class=\"mb-2\">\n        <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\n      </div>\n\n      <div *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\">\n        <p class=\"heading-medium\" data-toggle=\"collapse\" [attr.data-target]=\"'#collapse-' + i\">\n          {{itemData.inputText[0].value}}</p>\n        <div class=\"body-desc desc collapse multi-collapse\" [attr.id]=\"'collapse-' + i\">{{itemData.inputText[1].value}}\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".mb-2{margin-bottom:2.5rem!important}.data{display:flex;flex-direction:column;gap:1rem;padding-top:2.5rem;padding-bottom:2.5rem;box-shadow:#11182733 0 -1px inset;cursor:pointer}.flex-col{display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{height:auto;position:relative}\n"] }]
+        }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }] } });
 
-class VideoSectionComponent {
-    constructor(dom) {
-        this.dom = dom;
-        this._mainContainer = null;
-        this.videoLink = '';
+class SociaIconsComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SociaIconsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SociaIconsComponent, isStandalone: true, selector: "simpo-socia-icons", inputs: { socialIconData: "socialIconData", color: "color" }, ngImport: i0, template: "<div *ngIf=\"socialIconData?.type == 'FACEBOOK'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M10.4375 21.8784C5.65941 21.1274 2 16.9877 2 12 2 6.48086 6.48086 2 12 2c5.5191 0 10 4.48086 10 10 0 4.9877-3.6594 9.1274-8.4375 9.8784v-6.9878h2.3301L16.3359 12h-2.7734v-1.8758c0-.79084.3874-1.5617 1.6296-1.5617h1.261V6.10156s-1.1443-.19531-2.2385-.19531c-2.2842 0-3.7771 1.38438-3.7771 3.89063V12H7.89844v2.8906h2.53906v6.9878Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'TWITTER'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path\r\n                d=\"M13.6756 10.6218 20.2324 3h-1.5537l-5.6933 6.61788L8.43817 3H3.1935l6.8763 10.0074L3.1935 21h1.55384l6.01226-6.9887L15.5618 21h5.2447l-7.1313-10.3782h.0004Zm-2.1282 2.4738-.6967-.9965-5.54349-7.92939h2.38662l4.47367 6.39919.6967.9966 5.8152 8.318h-2.3866l-4.7454-6.7875v-.0004Z\">\r\n            </path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'LINKEDIN'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M19.5565 2C20.9051 2 22 3.09492 22 4.44352V19.5565C22 20.9051 20.9051 22 19.5565 22H4.44352C3.09492 22 2 20.9051 2 19.5565V4.44352C2 3.09492 3.09488 2 4.44352 2H19.5565ZM8.26801 18.5343V9.71723H5.33676v8.81707h2.93125Zm10.56789 0v-5.0562c0-2.7083-1.446-3.96822-3.3742-3.96822-1.5549 0-2.2513.85512-2.6413 1.45572V9.71723H9.88988c.03887.82737 0 8.81707 0 8.81707h2.93052v-4.9241c0-.2636.0189-.527.0966-.7154.2115-.5264.694-1.0716 1.5037-1.0716 1.0599 0 1.4846.8088 1.4846 1.9936v4.7175h2.9306ZM6.82219 5.4657c-1.00289 0-1.65813.65934-1.65813 1.52352 0 .84601.63532 1.52351 1.61934 1.52351 1.02207 0 1.67719-.6775 1.67719-1.52351-.01895-.86297-.63442-1.52164-1.6384-1.52352Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'YOUTUBE'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M21.0053 5.6191c.5996.6477.7946 2.11879.7946 2.11879S22 9.46405 22 11.1908v1.618c0 1.7268-.2001 3.453-.2001 3.453s-.1956 1.4705-.7946 2.1169c-.6859.7654-1.4461.8449-1.8754.8897-.0469.0049-.0899.0094-.1283.0143-2.799.2145-7.0016.222-7.0016.222s-5.20038-.0507-6.80025-.2145c-.07572-.0151-.16746-.0268-.27131-.0402-.50666-.0651-1.3018-.1673-1.93375-.8719-.59957-.6465-.79463-2.1169-.79463-2.1169S2 14.5356 2 12.8082v-1.618c0-1.72615.20006-3.45231.20006-3.45231s.19569-1.47109.79463-2.11879c.68895-.76815 1.4516-.84541 1.88002-.88881.04511-.00457.08651-.00876.12373-.01335C7.79681 4.5 11.995 4.5 11.995 4.5h.0094s4.1982 0 6.9972.21694c.0372.00459.0786.00879.1238.01336.4285.0434 1.1916.12069 1.8799.8888Zm-5.251 6.3832-6.25196 3.7512V8.25117l6.25196 3.75113Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'INSTAGRAM'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M12 2c5.5191 0 10 4.48086 10 10 0 5.5191-4.4809 10-10 10-5.51914 0-10-4.4809-10-10C2 6.48086 6.48086 2 12 2Zm0 3.75c-1.6974 0-1.9102.00719-2.57688.03762-.66523.03035-1.11957.13601-1.51714.29051-.41098.15972-.75953.37343-1.107.72089-.34746.34746-.56117.69602-.72089 1.107-.1545.39753-.26012.85187-.29051 1.5171C5.75719 10.0898 5.75 10.3026 5.75 12s.00719 1.9102.03758 2.5769c.03039.6652.13601 1.1195.29051 1.5171.15972.411.37343.7595.72089 1.107.34747.3475.69602.5612 1.107.7209.39757.1545.85191.2601 1.51714.2905.66668.0304.87948.0376 2.57688.0376s1.9102-.0072 2.5769-.0376c.6652-.0304 1.1195-.136 1.5171-.2905.411-.1597.7595-.3734 1.107-.7209.3475-.3475.5612-.696.7209-1.107.1545-.3976.2601-.8519.2905-1.5171.0304-.6667.0376-.8795.0376-2.5769 0-1.6974-.0072-1.9102-.0376-2.57688-.0304-.66523-.136-1.11957-.2905-1.5171-.1597-.41098-.3734-.75954-.7209-1.107s-.696-.56117-1.107-.72089c-.3976-.1545-.8519-.26016-1.5171-.29051C13.9102 5.75719 13.6974 5.75 12 5.75Zm0 1.12613c1.6688 0 1.8665.00637 2.5255.03645.6094.02781.9403.12961 1.1606.21519.2917.11336.4999.24883.7186.46754.2187.21867.3542.42692.4675.71864.0856.22023.1874.55113.2152 1.1605.0301.65905.0365.85675.0365 2.52555s-.0064 1.8665-.0365 2.5255c-.0278.6094-.1296.9403-.2152 1.1606-.1133.2917-.2488.4999-.4675.7186-.2187.2187-.4269.3542-.7186.4675-.2203.0856-.5512.1874-1.1606.2152-.6589.0301-.8566.0365-2.5255.0365s-1.8666-.0064-2.52555-.0365c-.60937-.0278-.94027-.1296-1.1605-.2152-.29176-.1133-.49997-.2488-.71868-.4675-.21871-.2187-.35414-.4269-.4675-.7186-.08558-.2203-.18742-.5512-.21523-1.1606-.03008-.659-.03641-.8567-.03641-2.5255s.00633-1.8665.03641-2.52555c.02781-.60937.12965-.94027.21523-1.1605.11336-.29172.24879-.49997.4675-.71864.21871-.21871.42692-.35418.71868-.46754.22023-.08558.55113-.18738 1.1605-.21519.65905-.03008.85675-.03645 2.52555-.03645Zm0 1.91442c-1.7725 0-3.20945 1.43695-3.20945 3.20945S10.2275 15.2095 12 15.2095s3.2095-1.437 3.2095-3.2095c0-1.7725-1.437-3.20945-3.2095-3.20945Zm0 5.29275c-1.1506 0-2.08332-.9327-2.08332-2.0833 0-1.1506.93272-2.08332 2.08332-2.08332S14.0833 10.8494 14.0833 12 13.1506 14.0833 12 14.0833Zm4.0863-5.41955c0 .41422-.3358.74996-.7501.74996-.4141 0-.7499-.33574-.7499-.74996s.3358-.75.7499-.75c.4143 0 .7501.33578.7501.75Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'TELEGRAM'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M22 12c0 5.5229-4.4771 10-10 10-5.52285 0-10-4.4771-10-10C2 6.47715 6.47715 2 12 2c5.5229 0 10 4.47715 10 10Zm-9.6417-2.61755c-.9726.40455-2.91653 1.24185-5.83173 2.51195-.47339.1883-.72136.3725-.74394.5525-.03815.3044.34296.4242.86192.5874.0706.0222.14374.0452.21872.0695.51059.166 1.19741.3602 1.55446.3679.32388.007.68537-.1265 1.08446-.4006 2.72381-1.8386 4.12981-2.7679 4.21801-2.788.0623-.0141.1486-.0319.2071.0201.0585.052.0527.1504.0465.1768-.0377.1609-1.5335 1.5516-2.3077 2.2714-.2415.2244-.4127.3836-.4477.42-.0784.0814-.1583.1584-.2351.2325-.4743.4572-.83.8001.0197 1.3601.4084.2691.7352.4917 1.0612.7137.356.2424.7111.4842 1.1705.7854.117.0767.2288.1564.3377.234.4143.2954.7865.5608 1.2464.5184.2672-.0245.5432-.2758.6834-1.0252.3313-1.771.9825-5.6083 1.133-7.18949.0132-.13853-.0034-.31583-.0167-.39367-.0134-.07782-.0412-.18872-.1424-.2708-.1198-.09722-.3048-.11772-.3875-.11627-.3761.00663-.9531.20728-3.7303 1.36238Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'THREADS'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path\r\n                d=\"M12.1482 21.6888h-.0058c-2.89118-.0194-5.1138-.9727-6.60781-2.833-1.32737-1.6568-2.01334-3.9608-2.03659-6.848v-.0136c.02325-2.88921.70922-5.19128 2.03853-6.84806C7.0286 3.28395 9.25316 2.33057 12.1424 2.31119h.0116c2.2168.0155 4.0712.5852 5.511 1.6936 1.3545 1.04252 2.3079 2.52685 2.833 4.41423l-1.6471.45925c-.8914-3.19731-3.1469-4.83085-6.7047-4.85604-2.34853.01744-4.12546.75573-5.28037 2.19355C5.7865 7.56253 5.22842 9.50804 5.20711 12c.02131 2.492.57939 4.4375 1.66066 5.7842 1.15491 1.4398 2.93184 2.1781 5.28043 2.1936 2.118-.0155 3.519-.5097 4.6836-1.651 1.3293-1.3022 1.306-2.9008.8797-3.8736-.25-.5736-.7054-1.0503-1.3196-1.4126-.155 1.0909-.5019 1.9746-1.0367 2.6412-.7151.8894-1.7285 1.3758-3.0113 1.4455-.9708.0523-1.9068-.1763-2.63149-.6472-.85843-.5561-1.36031-1.4049-1.41457-2.3931-.05232-.9612.32942-1.8448 1.07352-2.4881.71114-.6143 1.71104-.9747 2.89304-1.0425.8701-.0485 1.6859-.0097 2.4377.1143-.1007-.5988-.3022-1.07546-.6045-1.41844-.4147-.47282-1.0561-.7131-1.9049-.71891h-.0232c-.6821 0-1.6084.18796-2.19743 1.06577l-1.41844-.95145c.7906-1.17428 2.07337-1.82149 3.61587-1.82149h.0349c2.5791.0155 4.1158 1.59478 4.2689 4.35032.0872.0368.1744.0755.2596.1143 1.2034.5658 2.0831 1.4223 2.5462 2.4784.6434 1.4707.7035 3.8678-1.2498 5.7803-1.494 1.4611-3.3058 2.1219-5.8753 2.1393h-.0058Zm.81-9.4388c-.1958 0-.3934.0058-.5969.0174-1.4824.0833-2.40667.7635-2.3544 1.7304.0543 1.0135 1.1724 1.4844 2.2479 1.4262.9882-.0523 2.2749-.4379 2.4919-2.9957-.5464-.1183-1.1452-.1783-1.7885-.1783Z\">\r\n            </path>\r\n        </svg>\r\n    </a>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SociaIconsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-socia-icons', standalone: true, imports: [
+                        CommonModule
+                    ], template: "<div *ngIf=\"socialIconData?.type == 'FACEBOOK'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M10.4375 21.8784C5.65941 21.1274 2 16.9877 2 12 2 6.48086 6.48086 2 12 2c5.5191 0 10 4.48086 10 10 0 4.9877-3.6594 9.1274-8.4375 9.8784v-6.9878h2.3301L16.3359 12h-2.7734v-1.8758c0-.79084.3874-1.5617 1.6296-1.5617h1.261V6.10156s-1.1443-.19531-2.2385-.19531c-2.2842 0-3.7771 1.38438-3.7771 3.89063V12H7.89844v2.8906h2.53906v6.9878Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'TWITTER'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path\r\n                d=\"M13.6756 10.6218 20.2324 3h-1.5537l-5.6933 6.61788L8.43817 3H3.1935l6.8763 10.0074L3.1935 21h1.55384l6.01226-6.9887L15.5618 21h5.2447l-7.1313-10.3782h.0004Zm-2.1282 2.4738-.6967-.9965-5.54349-7.92939h2.38662l4.47367 6.39919.6967.9966 5.8152 8.318h-2.3866l-4.7454-6.7875v-.0004Z\">\r\n            </path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'LINKEDIN'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M19.5565 2C20.9051 2 22 3.09492 22 4.44352V19.5565C22 20.9051 20.9051 22 19.5565 22H4.44352C3.09492 22 2 20.9051 2 19.5565V4.44352C2 3.09492 3.09488 2 4.44352 2H19.5565ZM8.26801 18.5343V9.71723H5.33676v8.81707h2.93125Zm10.56789 0v-5.0562c0-2.7083-1.446-3.96822-3.3742-3.96822-1.5549 0-2.2513.85512-2.6413 1.45572V9.71723H9.88988c.03887.82737 0 8.81707 0 8.81707h2.93052v-4.9241c0-.2636.0189-.527.0966-.7154.2115-.5264.694-1.0716 1.5037-1.0716 1.0599 0 1.4846.8088 1.4846 1.9936v4.7175h2.9306ZM6.82219 5.4657c-1.00289 0-1.65813.65934-1.65813 1.52352 0 .84601.63532 1.52351 1.61934 1.52351 1.02207 0 1.67719-.6775 1.67719-1.52351-.01895-.86297-.63442-1.52164-1.6384-1.52352Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'YOUTUBE'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M21.0053 5.6191c.5996.6477.7946 2.11879.7946 2.11879S22 9.46405 22 11.1908v1.618c0 1.7268-.2001 3.453-.2001 3.453s-.1956 1.4705-.7946 2.1169c-.6859.7654-1.4461.8449-1.8754.8897-.0469.0049-.0899.0094-.1283.0143-2.799.2145-7.0016.222-7.0016.222s-5.20038-.0507-6.80025-.2145c-.07572-.0151-.16746-.0268-.27131-.0402-.50666-.0651-1.3018-.1673-1.93375-.8719-.59957-.6465-.79463-2.1169-.79463-2.1169S2 14.5356 2 12.8082v-1.618c0-1.72615.20006-3.45231.20006-3.45231s.19569-1.47109.79463-2.11879c.68895-.76815 1.4516-.84541 1.88002-.88881.04511-.00457.08651-.00876.12373-.01335C7.79681 4.5 11.995 4.5 11.995 4.5h.0094s4.1982 0 6.9972.21694c.0372.00459.0786.00879.1238.01336.4285.0434 1.1916.12069 1.8799.8888Zm-5.251 6.3832-6.25196 3.7512V8.25117l6.25196 3.75113Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'INSTAGRAM'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M12 2c5.5191 0 10 4.48086 10 10 0 5.5191-4.4809 10-10 10-5.51914 0-10-4.4809-10-10C2 6.48086 6.48086 2 12 2Zm0 3.75c-1.6974 0-1.9102.00719-2.57688.03762-.66523.03035-1.11957.13601-1.51714.29051-.41098.15972-.75953.37343-1.107.72089-.34746.34746-.56117.69602-.72089 1.107-.1545.39753-.26012.85187-.29051 1.5171C5.75719 10.0898 5.75 10.3026 5.75 12s.00719 1.9102.03758 2.5769c.03039.6652.13601 1.1195.29051 1.5171.15972.411.37343.7595.72089 1.107.34747.3475.69602.5612 1.107.7209.39757.1545.85191.2601 1.51714.2905.66668.0304.87948.0376 2.57688.0376s1.9102-.0072 2.5769-.0376c.6652-.0304 1.1195-.136 1.5171-.2905.411-.1597.7595-.3734 1.107-.7209.3475-.3475.5612-.696.7209-1.107.1545-.3976.2601-.8519.2905-1.5171.0304-.6667.0376-.8795.0376-2.5769 0-1.6974-.0072-1.9102-.0376-2.57688-.0304-.66523-.136-1.11957-.2905-1.5171-.1597-.41098-.3734-.75954-.7209-1.107s-.696-.56117-1.107-.72089c-.3976-.1545-.8519-.26016-1.5171-.29051C13.9102 5.75719 13.6974 5.75 12 5.75Zm0 1.12613c1.6688 0 1.8665.00637 2.5255.03645.6094.02781.9403.12961 1.1606.21519.2917.11336.4999.24883.7186.46754.2187.21867.3542.42692.4675.71864.0856.22023.1874.55113.2152 1.1605.0301.65905.0365.85675.0365 2.52555s-.0064 1.8665-.0365 2.5255c-.0278.6094-.1296.9403-.2152 1.1606-.1133.2917-.2488.4999-.4675.7186-.2187.2187-.4269.3542-.7186.4675-.2203.0856-.5512.1874-1.1606.2152-.6589.0301-.8566.0365-2.5255.0365s-1.8666-.0064-2.52555-.0365c-.60937-.0278-.94027-.1296-1.1605-.2152-.29176-.1133-.49997-.2488-.71868-.4675-.21871-.2187-.35414-.4269-.4675-.7186-.08558-.2203-.18742-.5512-.21523-1.1606-.03008-.659-.03641-.8567-.03641-2.5255s.00633-1.8665.03641-2.52555c.02781-.60937.12965-.94027.21523-1.1605.11336-.29172.24879-.49997.4675-.71864.21871-.21871.42692-.35418.71868-.46754.22023-.08558.55113-.18738 1.1605-.21519.65905-.03008.85675-.03645 2.52555-.03645Zm0 1.91442c-1.7725 0-3.20945 1.43695-3.20945 3.20945S10.2275 15.2095 12 15.2095s3.2095-1.437 3.2095-3.2095c0-1.7725-1.437-3.20945-3.2095-3.20945Zm0 5.29275c-1.1506 0-2.08332-.9327-2.08332-2.0833 0-1.1506.93272-2.08332 2.08332-2.08332S14.0833 10.8494 14.0833 12 13.1506 14.0833 12 14.0833Zm4.0863-5.41955c0 .41422-.3358.74996-.7501.74996-.4141 0-.7499-.33574-.7499-.74996s.3358-.75.7499-.75c.4143 0 .7501.33578.7501.75Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'TELEGRAM'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path fill-rule=\"evenodd\"\r\n                d=\"M22 12c0 5.5229-4.4771 10-10 10-5.52285 0-10-4.4771-10-10C2 6.47715 6.47715 2 12 2c5.5229 0 10 4.47715 10 10Zm-9.6417-2.61755c-.9726.40455-2.91653 1.24185-5.83173 2.51195-.47339.1883-.72136.3725-.74394.5525-.03815.3044.34296.4242.86192.5874.0706.0222.14374.0452.21872.0695.51059.166 1.19741.3602 1.55446.3679.32388.007.68537-.1265 1.08446-.4006 2.72381-1.8386 4.12981-2.7679 4.21801-2.788.0623-.0141.1486-.0319.2071.0201.0585.052.0527.1504.0465.1768-.0377.1609-1.5335 1.5516-2.3077 2.2714-.2415.2244-.4127.3836-.4477.42-.0784.0814-.1583.1584-.2351.2325-.4743.4572-.83.8001.0197 1.3601.4084.2691.7352.4917 1.0612.7137.356.2424.7111.4842 1.1705.7854.117.0767.2288.1564.3377.234.4143.2954.7865.5608 1.2464.5184.2672-.0245.5432-.2758.6834-1.0252.3313-1.771.9825-5.6083 1.133-7.18949.0132-.13853-.0034-.31583-.0167-.39367-.0134-.07782-.0412-.18872-.1424-.2708-.1198-.09722-.3048-.11772-.3875-.11627-.3761.00663-.9531.20728-3.7303 1.36238Z\"\r\n                clip-rule=\"evenodd\"></path>\r\n        </svg>\r\n    </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === 'THREADS'\">\r\n    <a [href]=\"socialIconData?.link\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n            class=\"icon w-8 h-8\" aria-hidden=\"true\" [style.color]=\"color\">\r\n            <path\r\n                d=\"M12.1482 21.6888h-.0058c-2.89118-.0194-5.1138-.9727-6.60781-2.833-1.32737-1.6568-2.01334-3.9608-2.03659-6.848v-.0136c.02325-2.88921.70922-5.19128 2.03853-6.84806C7.0286 3.28395 9.25316 2.33057 12.1424 2.31119h.0116c2.2168.0155 4.0712.5852 5.511 1.6936 1.3545 1.04252 2.3079 2.52685 2.833 4.41423l-1.6471.45925c-.8914-3.19731-3.1469-4.83085-6.7047-4.85604-2.34853.01744-4.12546.75573-5.28037 2.19355C5.7865 7.56253 5.22842 9.50804 5.20711 12c.02131 2.492.57939 4.4375 1.66066 5.7842 1.15491 1.4398 2.93184 2.1781 5.28043 2.1936 2.118-.0155 3.519-.5097 4.6836-1.651 1.3293-1.3022 1.306-2.9008.8797-3.8736-.25-.5736-.7054-1.0503-1.3196-1.4126-.155 1.0909-.5019 1.9746-1.0367 2.6412-.7151.8894-1.7285 1.3758-3.0113 1.4455-.9708.0523-1.9068-.1763-2.63149-.6472-.85843-.5561-1.36031-1.4049-1.41457-2.3931-.05232-.9612.32942-1.8448 1.07352-2.4881.71114-.6143 1.71104-.9747 2.89304-1.0425.8701-.0485 1.6859-.0097 2.4377.1143-.1007-.5988-.3022-1.07546-.6045-1.41844-.4147-.47282-1.0561-.7131-1.9049-.71891h-.0232c-.6821 0-1.6084.18796-2.19743 1.06577l-1.41844-.95145c.7906-1.17428 2.07337-1.82149 3.61587-1.82149h.0349c2.5791.0155 4.1158 1.59478 4.2689 4.35032.0872.0368.1744.0755.2596.1143 1.2034.5658 2.0831 1.4223 2.5462 2.4784.6434 1.4707.7035 3.8678-1.2498 5.7803-1.494 1.4611-3.3058 2.1219-5.8753 2.1393h-.0058Zm.81-9.4388c-.1958 0-.3934.0058-.5969.0174-1.4824.0833-2.40667.7635-2.3544 1.7304.0543 1.0135 1.1724 1.4844 2.2479 1.4262.9882-.0523 2.2749-.4379 2.4919-2.9957-.5464-.1183-1.1452-.1783-1.7885-.1783Z\">\r\n            </path>\r\n        </svg>\r\n    </a>\r\n</div>" }]
+        }], ctorParameters: () => [], propDecorators: { socialIconData: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+class FooterSectionComponent {
+    constructor() {
+        this.color = '#ffffff';
+        this.footerTypes = FooterTypes$1;
         this.showEditors = false;
     }
     ngOnInit() {
-        this.content = this.data?.content;
         this.style = this.data?.styles;
-        if (this.content?.videoLink.url) {
-            this.videoLink = this.content?.videoLink?.url;
-        }
+        this.content = this.data?.content;
     }
     showEditTabs(isShow) {
         this.showEditors = isShow;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large mb-1\" [innerHTML]=\"text.value\">\n                </div>\n\n\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\n                    <iframe class=\"video\"\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(videoLink)\" frameborder=\"0\" allowfullscreen></iframe>\n                    \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n    </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: StyleDirectivesModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FooterSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\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-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n                    <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n                    align-items-end\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n                    <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\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-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n                    <div class=\"d-flex align-items-center 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-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\"></simpo-hover-elements>\r\n    </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: VideoSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FooterSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-video-section', standalone: true, imports: [
+            args: [{ selector: 'simpo-footer-section', standalone: true, imports: [
                         SimpoElementsModule,
                         CommonModule,
-                        ColumnDirectiveDirective$1,
-                        StyleDirectivesModule,
-                        ContentFitDirective$1,
+                        ContentFitDirective,
                         SimpoComponentModule,
-                        AnimationDirective$1,
-                        BorderDirective$1,
-                        OverlayDirective$1,
-                        BackgroundDirective$1,
-                        ContentFitDirective$1,
-                        ContainerFitDirective$1,
-                        HoverDirective$1,
-                        BannerContentFitDirective$1,
-                        CornerDirective$1,
-                        ColumnDirectiveDirective$1,
-                        ImageDirectiveDirective$1,
-                        simpoConetenAlignmentDirective$1,
-                        PositionLayoutDirectiveDirective$1,
-                        SimpoFooterLayoutDirective$1,
-                        ButtonDirectiveDirective$1,
-                        TextBackgroundDirectiveDirective$1,
-                        SimpoButtonComponent$1
-                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large mb-1\" [innerHTML]=\"text.value\">\n                </div>\n\n\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\n                    <iframe class=\"video\"\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(videoLink)\" frameborder=\"0\" allowfullscreen></iframe>\n                    \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n    </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
-        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { data: [{
+                        SimpoButtonComponent$1,
+                        SociaIconsComponent$1,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\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-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n                    <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n                    align-items-end\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n                    <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\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-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div\r\n                class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [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?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n                    <div class=\"d-flex align-items-center 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-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.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 class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\"></simpo-hover-elements>\r\n    </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
-            }], _mainContainer: [{
-                type: ViewChild,
-                args: ['mainContainer']
             }] } });
 
-class NavbarSectionComponent {
+class ImageCarouselSectionComponent {
     constructor() {
-        this.color = '#000000';
-        this.screenWidth = 0;
-        this.getScreenSize();
+        this.screenWidth = 475;
+        // this.getScreenSize();
     }
     ngOnInit() {
         this.content = this.data?.content;
@@ -1659,12 +1450,33 @@ class NavbarSectionComponent {
     getScreenSize(event) {
         this.screenWidth = window.innerWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [], 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", index: "index" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<nav class=\"navbar navbar-expand-lg bg-light d-block mb-0\">\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\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\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?.source === 'BRANDING'\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\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?.source != 'BRANDING'\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n        </div>\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\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\"\r\n        aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n    </div>\r\n    <div class=\"collapse navbar-collapse p-4\" *ngIf=\"screenWidth > 475\">\r\n      <div class=\"navbar-nav align-items-center\">\r\n        <div class=\"d-flex\">\r\n          <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Home</a>\r\n          <a class=\"nav-link\" href=\"#\">Features</a>\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?.isSocialLink ? 'justify-content-between' : 'justify-content-end'\">\r\n            <div class=\"d-flex mt-0\" *ngIf=\"content?.isSocialLink\">\r\n              <ng-container *ngFor=\"let item of content?.socialLinks\">\r\n                <div style=\"position: relative;margin-right: 10px;\">\r\n                  <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></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=\"content?.isButton\" class=\"button-display mt-0 mb-4\">\r\n            <div *ngFor=\"let button of content?.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 class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 475\">\r\n      asfjklsajdfkl\r\n    </div>\r\n  </div>\r\n</nav>", styles: [".navbar-toggler{height:40px}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SimpoButtonComponent$1, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent$1, selector: "simpo-socia-icons", inputs: ["socialIconData", "color"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageCarouselSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\">\n  <div class=\"row\">\n    <div *ngFor=\"let text of data?.content?.inputText\">\n      <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n    </div>\n\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\">\n      <ol class=\"carousel-indicators\">\n        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n          data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\n      </ol>\n      <div class=\"carousel-inner\">\n        <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\n          <div class=\"row\">\n            <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\n              <img class=\"d-block position-relative\"style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block image-height-80vh\"style=\"width: 60%;\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n            <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\n              <img class=\"d-block w-100 image-height-40vh\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n          </div>\n        </div>\n      </div>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Previous</span>\n      </a>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Next</span>\n      </a>\n    </div>\n\n\n  </div>\n</section>", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageCarouselSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-navbar-section', standalone: true, imports: [CommonModule, SimpoButtonComponent$1, SociaIconsComponent$1], template: "<nav class=\"navbar navbar-expand-lg bg-light d-block mb-0\">\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\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\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?.source === 'BRANDING'\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\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?.source != 'BRANDING'\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n        </div>\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\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\"\r\n        aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n    </div>\r\n    <div class=\"collapse navbar-collapse p-4\" *ngIf=\"screenWidth > 475\">\r\n      <div class=\"navbar-nav align-items-center\">\r\n        <div class=\"d-flex\">\r\n          <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Home</a>\r\n          <a class=\"nav-link\" href=\"#\">Features</a>\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?.isSocialLink ? 'justify-content-between' : 'justify-content-end'\">\r\n            <div class=\"d-flex mt-0\" *ngIf=\"content?.isSocialLink\">\r\n              <ng-container *ngFor=\"let item of content?.socialLinks\">\r\n                <div style=\"position: relative;margin-right: 10px;\">\r\n                  <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></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=\"content?.isButton\" class=\"button-display mt-0 mb-4\">\r\n            <div *ngFor=\"let button of content?.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 class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 475\">\r\n      asfjklsajdfkl\r\n    </div>\r\n  </div>\r\n</nav>", styles: [".navbar-toggler{height:40px}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}\n"] }]
+            args: [{ selector: 'simpo-image-carousel-section', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        ColumnDirectiveDirective,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\">\n  <div class=\"row\">\n    <div *ngFor=\"let text of data?.content?.inputText\">\n      <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n    </div>\n\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\">\n      <ol class=\"carousel-indicators\">\n        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n          data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\n      </ol>\n      <div class=\"carousel-inner\">\n        <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\n          <div class=\"row\">\n            <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\n              <img class=\"d-block position-relative\"style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block image-height-80vh\"style=\"width: 60%;\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n            <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\n              <img class=\"d-block w-100 image-height-40vh\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n          </div>\n        </div>\n      </div>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Previous</span>\n      </a>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Next</span>\n      </a>\n    </div>\n\n\n  </div>\n</section>", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -1674,280 +1486,470 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
-class BannerContentFitDirective {
-    constructor(el, eventService, renderer) {
-        this.el = el;
+class ImageGridSectionComponent {
+    constructor(eventService) {
         this.eventService = eventService;
-        this.renderer = renderer;
-        this.eventService.alignmentChangeChecks.subscribe((res) => {
-            if (this.layout?.bannerImageDisplay) {
-                Object.entries(BANNERALIGNMENT).forEach(([className, classValue]) => {
-                    if (res.data?.align === className) {
-                        this.renderer.addClass(this.el.nativeElement, classValue);
-                        if (res.data?.align == 'top' || res.data?.align == 'bottom') {
-                            this.el.nativeElement.style.setProperty('text-align', "center");
-                        }
-                    }
-                });
-            }
-            else {
-                Object.entries(BANNERHALIGN).forEach(([className, classValue]) => {
-                    if (res.data?.layoutAlignment?.value === className) {
-                        this.renderer.addClass(this.el.nativeElement, `flex-lg-row`);
-                        classValue.split(" ").forEach(element => {
-                            this.renderer.addClass(this.el.nativeElement, element);
-                        });
-                    }
-                });
-            }
-            applySpacing(this.el.nativeElement, this.layout?.spacing);
-        });
-        this.eventService.spacingChangeChecks.subscribe((res) => {
-            if (this.el.nativeElement.id === res.type) {
-                if (this.layout?.fit === 'content') {
-                    fitContent(this.el.nativeElement);
-                }
-                else {
-                    fitScreen(this.el.nativeElement);
-                }
-                applySpacing(this.el.nativeElement, res.data.spacing);
-            }
-        });
+        this._mainContainer = null;
+        this.showEditors = false;
     }
     ngOnInit() {
-        this.appply();
-    }
-    ngOnChanges() {
-        this.appply();
+        this.content = this.data?.content;
+        this.style = this.data?.styles;
     }
-    appply() {
-        if (this.layout?.fit === 'content') {
-            fitContent(this.el.nativeElement);
-        }
-        else {
-            fitScreen(this.el.nativeElement);
-        }
-        if (this.layout?.bannerImageDisplay) {
-            Object.entries(BANNERALIGNMENT).forEach(([className, classValue]) => {
-                if (this.layout?.layoutAlignment.value === className) {
-                    this.renderer.addClass(this.el.nativeElement, classValue);
-                    if (this.layout.layoutAlignment.value == 'top' || this.layout.layoutAlignment.value == 'bottom') {
-                        this.el.nativeElement.style.setProperty('text-align', "center");
-                    }
-                }
-            });
-        }
-        else {
-            Object.entries(BANNERHALIGN).forEach(([className, classValue]) => {
-                if (this.layout?.layoutAlignment.value === className) {
-                    this.renderer.addClass(this.el.nativeElement, `flex-lg-row`);
-                    classValue.split(" ").forEach(element => {
-                        this.renderer.addClass(this.el.nativeElement, element);
-                    });
-                }
-            });
-        }
-        applySpacing(this.el.nativeElement, this.layout?.spacing);
+    showEditTabs(isShow) {
+        this.showEditors = isShow;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BannerContentFitDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: BannerContentFitDirective, isStandalone: true, selector: "[simpoBannerLayout]", inputs: { layout: ["simpoBannerLayout", "layout"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageGridSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\n          *ngFor=\"let img of content?.listItem?.data\"\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\n          <div class=\"image-section\">\n            <img [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" />\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section,.image-section img{width:100%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BannerContentFitDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoBannerLayout]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }, { type: i0.Renderer2 }], propDecorators: { layout: [{
-                type: Input,
-                args: ['simpoBannerLayout']
-            }] } });
-
-class ButtonDirectiveDirective {
-    constructor(el, eventService) {
-        this.el = el;
-        this.eventService = eventService;
-        this.buttonStyleChangeCheck();
-    }
-    ngOnChanges() {
-        this.applyButtonStyleChanges();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageGridSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-image-grid-section', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        ColumnDirectiveDirective,
+                        ImageDirectiveDirective,
+                        ContentFitDirective,
+                        SimpoComponentModule,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\n          *ngFor=\"let img of content?.listItem?.data\"\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\n          <div class=\"image-section\">\n            <img [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" />\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section,.image-section img{width:100%}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], _mainContainer: [{
+                type: ViewChild,
+                args: ['mainContainer']
+            }] } });
+
+class ImageSectionComponent {
+    constructor() {
+        this._mainContainer = null;
+        this.showEditors = false;
     }
-    ngOnDestroy() {
-        this.buttonStyleSubscription?.unsubscribe();
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.style = this.data?.styles;
     }
-    applyButtonStyleChanges() {
-        if (this.buttonStyle?.type) {
-            this.applyButtonType(this.buttonStyle, this.color ? this.color : '#ffffff');
-        }
-        if (this.buttonStyle?.shape) {
-            this.applyButtonShape(this.buttonStyle);
-        }
+    showEditTabs(isShow) {
+        this.showEditors = isShow;
     }
-    applyButtonType(style, color) {
-        if (style?.type === 'Solid') {
-            this.el.nativeElement.style.setProperty('background', color);
-            this.el.nativeElement.style.setProperty('color', this.getTextColor(color));
-            this.el.nativeElement.style.setProperty('border', `2px solid ${color} `);
-        }
-        else {
-            this.el.nativeElement.style.setProperty('border', `2px solid ${color}`);
-            this.el.nativeElement.style.setProperty('background', 'transparent');
-            this.el.nativeElement.style.setProperty('color', color);
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n                <div *ngFor=\"let text of data?.content?.inputText\">\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n                </div>\n\n                <div class=\"image-section\" [ngStyle]=\"style?.fullWidth ? {'padding': '0px', 'margin': '0px'} : {}\">\n                    <img [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\"\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\"\n                        [id]=\"data?.id\" />\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n    </div>\n</section>\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-image-section', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        ColumnDirectiveDirective,
+                        ContentFitDirective,
+                        SimpoComponentModule,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n                <div *ngFor=\"let text of data?.content?.inputText\">\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n                </div>\n\n                <div class=\"image-section\" [ngStyle]=\"style?.fullWidth ? {'padding': '0px', 'margin': '0px'} : {}\">\n                    <img [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\"\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\"\n                        [id]=\"data?.id\" />\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n    </div>\n</section>\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], _mainContainer: [{
+                type: ViewChild,
+                args: ['mainContainer']
+            }] } });
+
+class BelowImageCardComponent {
+    ngOnInit() {
+        // if(this.button && !this.button.content){
+        //   this.button.content = this.data.button
+        // }
     }
-    applyButtonShape(style) {
-        if (style?.shape === 'Round') {
-            this.el.nativeElement.style.setProperty('border-radius', '5px');
-        }
-        else {
-            this.el.nativeElement.style.setProperty('border-radius', '0px');
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BelowImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div>\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BelowImageCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-below-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective$1, CornerDirective$1, SimpoButtonComponent], template: "<div>\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\"\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], componentId: [{
+                type: Input
+            }], button: [{
+                type: Input
+            }] } });
+
+class TopOfImageCardComponent {
+    ngOnInit() {
+        // if(this.button && !this.button.content){
+        //   this.button.content = this.data.button
+        // }
+        console.log(this.button);
     }
-    getTextColor(bgColor) {
-        if (bgColor) {
-            const threshold = 130; // Adjust this threshold as needed
-            const r = parseInt(bgColor.slice(1, 3), 16);
-            const g = parseInt(bgColor.slice(3, 5), 16);
-            const b = parseInt(bgColor.slice(5, 7), 16);
-            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-            return brightness > threshold ? '#000000' : '#ffffff';
-        }
-        return "#ffffff;";
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TopOfImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\n\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective$1, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective$1, CornerDirective$1, TextBackgroundDirectiveDirective$1, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\n\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], componentId: [{
+                type: Input
+            }], button: [{
+                type: Input
+            }] } });
+
+class CoveringImageCardComponent {
+    ngOnInit() {
+        // if(this.button && !this.button.content){
+        //   this.button.content = this.data.button
+        // }
     }
-    buttonStyleChangeCheck() {
-        this.buttonStyleSubscription = this.eventService.buttonStyleChangeChecks.subscribe((res) => {
-            this.changeButtonStyle(res.id, res.buttonStyle, res.color);
-        });
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoveringImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective$1, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective$1, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective$1, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective$1, CornerDirective$1, TextBackgroundDirectiveDirective$1, SimpoButtonComponent], template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], styles: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], componentId: [{
+                type: Input
+            }], button: [{
+                type: Input
+            }] } });
+
+class ServiceSectionComponent {
+    constructor(eventService) {
+        this.eventService = eventService;
+        this._mainContainer = null;
+        this.TextPosition = TextPosition$1;
+        this.showEditors = false;
     }
-    changeButtonStyle(id, style, bgColor) {
-        if (this.el.nativeElement.id === id) {
-            if (style?.type) {
-                this.applyButtonType(style, bgColor ? bgColor : '#ffffff');
-            }
-            if (style?.shape) {
-                this.applyButtonShape(style);
-            }
-        }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.style = this.data?.styles;
+        this.button = this.data?.action.buttons[0];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonDirectiveDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ButtonDirectiveDirective, isStandalone: true, selector: "[simpoButtonDirective]", inputs: { buttonStyle: "buttonStyle", color: "color" }, usesOnChanges: true, ngImport: i0 }); }
+    showEditTabs(isShow) {
+        this.showEditors = isShow;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.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"], outputs: ["edit"] }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonDirectiveDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoButtonDirective]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { buttonStyle: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ServiceSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-service-section', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        ContentFitDirective,
+                        SimpoComponentModule,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
                 type: Input
-            }], color: [{
+            }], index: [{
                 type: Input
+            }], _mainContainer: [{
+                type: ViewChild,
+                args: ['mainContainer']
             }] } });
 
-class TextBackgroundDirectiveDirective {
-    constructor(el, eventService) {
-        this.el = el;
+class TeamMemberSectionComponent {
+    constructor(eventService) {
         this.eventService = eventService;
-        this.textBackgroundChangeCheck();
+        this.TextPosition = TextPosition$1;
+        this.showEditors = false;
     }
-    ngOnChanges() {
-        if (this.textBackgroundDirective) {
-            let opacity = this.textBackgroundDirective?.amount / 100;
-            let rgb = this.getrgbFormColor(this.textBackgroundDirective.color);
-            let backgroundColor = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + ')';
-            if (this.checkColorIsRgbFormOrNot(backgroundColor)) {
-                let rgba = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + "," + opacity + ')';
-                this.el.nativeElement.style.setProperty('background', rgba);
-                this.el.nativeElement.style.setProperty('color', this.getContrastColorFromRGBA(rgba));
-            }
-        }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.style = this.data?.styles;
+        this.button = this.data?.action.buttons[0];
     }
-    ngOnDestroy() {
-        if (this.textBackgroundSubscription) {
-            this.textBackgroundSubscription.unsubscribe();
-        }
+    showEditTabs(isShow) {
+        this.showEditors = isShow;
     }
-    getrgbFormColor(hexCode) {
-        const hexColorRegex = /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-        if (hexColorRegex.test(hexCode)) {
-            const r = parseInt(hexCode.slice(1, 3), 16);
-            const g = parseInt(hexCode.slice(3, 5), 16);
-            const b = parseInt(hexCode.slice(5, 7), 16);
-            return { r, g, b };
-        }
-        return hexCode;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TeamMemberSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TeamMemberSectionComponent, isStandalone: true, selector: "simpo-team-member-section", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.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"], outputs: ["edit"] }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TeamMemberSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-team-member-section', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        ContentFitDirective,
+                        SimpoComponentModule,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n          *ngFor=\"let service of content?.listItem?.data\">\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-below-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\n          </ng-container>\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\n          </ng-container>\n\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
+class TestimonialSectionComponent {
+    constructor() {
+        this._mainContainer = null;
+        this.showEditors = false;
     }
-    checkColorIsRgbFormOrNot(color) {
-        const rgbColorRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/;
-        return rgbColorRegex.test(color);
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.style = this.data?.styles;
     }
-    textBackgroundChangeCheck() {
-        this.textBackgroundSubscription = this.eventService.textBackgroundChangeChecks.subscribe((res) => {
-            this.changeTextBackground(res.id, res.textBackground);
-        });
+    showEditTabs(isShow) {
+        this.showEditors = isShow;
     }
-    changeTextBackground(id, textBackground) {
-        if (this.el.nativeElement.id === id && textBackground) {
-            let opacity = textBackground.amount / 100;
-            let rgb = this.getrgbFormColor(textBackground.color);
-            let backgroundColor = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + ')';
-            if (this.checkColorIsRgbFormOrNot(backgroundColor)) {
-                let rgba = 'rgb' + '(' + rgb.r + "," + rgb.g + "," + rgb.b + "," + opacity + ')';
-                this.el.nativeElement.style.setProperty('background', rgba);
-                this.el.nativeElement.style.setProperty('color', this.getContrastColorFromRGBA(rgba));
-            }
-        }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TestimonialSectionComponent, deps: [], 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" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\">\n          <ol class=\"carousel-indicators\">\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n              data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n          </ol>\n          <div class=\"carousel-inner\">\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\n              [class.active]=\"i === 0\">\n              <div style=\"width: 90%; margin: auto;\">\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [simpoContainerLayout]=\"style?.layout\">\n                  <img [src]=\"testimonial.image.url\" class=\"mb-1\">\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Previous</span>\n          </a>\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Next</span>\n          </a>\n        </div>\n\n\n      </div>\n    </div>\n  </div>\n\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;width:45px;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.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"], outputs: ["edit"] }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TestimonialSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-testimonial-section', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        ColumnDirectiveDirective,
+                        ContentFitDirective,
+                        SimpoComponentModule,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\">\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n        <div *ngFor=\"let text of data?.content?.inputText\">\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n        </div>\n\n        <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\">\n          <ol class=\"carousel-indicators\">\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n              data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n          </ol>\n          <div class=\"carousel-inner\">\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\n              [class.active]=\"i === 0\">\n              <div style=\"width: 90%; margin: auto;\">\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [simpoContainerLayout]=\"style?.layout\">\n                  <img [src]=\"testimonial.image.url\" class=\"mb-1\">\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"prev\">\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Previous</span>\n          </a>\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"next\">\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n            <span class=\"sr-only\">Next</span>\n          </a>\n        </div>\n\n\n      </div>\n    </div>\n  </div>\n\n  <div class=\"hover_effect\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;width:45px;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], _mainContainer: [{
+                type: ViewChild,
+                args: ['mainContainer']
+            }] } });
+
+;
+class TextImageSectionComponent {
+    constructor(eventService) {
+        this.eventService = eventService;
+        this.showEditors = false;
     }
-    getContrastColorFromRGBA(rgbaString) {
-        // Extract RGBA values from the RGBA string
-        const rgbaValues = this.extractRGBA(rgbaString);
-        if (rgbaValues) {
-            // Get contrast color based on RGBA values
-            return this.getContrastColor(rgbaValues);
-        }
-        // Return null if extraction failed
-        return null;
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        if (!this.styles || !this.content)
+            return;
     }
-    // Function to extract RGBA values from RGBA string
-    extractRGBA(rgbaString) {
-        // Regular expression to match RGBA values
-        const rgbaRegex = /rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d*(?:\.\d+)?)?\)/;
-        // Match the RGBA string against the regex
-        const match = rgbaString.match(rgbaRegex);
-        if (match) {
-            // Extract RGBA values from the regex groups
-            const [, r, g, b, a] = match.map(parseFloat);
-            // If alpha (a) is not provided, set it to 1
-            const alpha = typeof a === 'undefined' ? 1 : a;
-            // Return the RGBA values as an array
-            return [r, g, b, alpha];
+    showEditTabs(isShow) {
+        this.showEditors = isShow;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextImageSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TextImageSectionComponent, isStandalone: true, selector: "simpo-text-image-section", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n      <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [simpoAnimation]=\"styles?.animation\" [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n      >\r\n        <div class=\"col-10 col-sm-8 col-lg-6\">\r\n          <img\r\n            [src]=\"content?.image?.url\"\r\n            [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n            [simpoCorner]=\"styles?.corners\"\r\n            class=\"d-block mx-lg-auto img-fluid\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n        </div>\r\n        <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n            <div *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [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=\"hover_effect\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n    </div>\r\n  </div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:100%}.button-display{display:flex;gap:10px;margin-top:15px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextImageSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-text-image-section', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        SimpoComponentModule,
+                        MatGridListModule,
+                        SimpoButtonComponent$1,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" >\r\n      <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n      [simpoAnimation]=\"styles?.animation\" [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\"\r\n      >\r\n        <div class=\"col-10 col-sm-8 col-lg-6\">\r\n          <img\r\n            [src]=\"content?.image?.url\"\r\n            [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n            [simpoCorner]=\"styles?.corners\"\r\n            class=\"d-block mx-lg-auto img-fluid\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\"/>\r\n        </div>\r\n        <div class=\"col-lg-6 d-flex flex-column\" [simpoContentAlignment]=\"styles?.contentAlignment\" [id]=\"data?.id\">\r\n          <div *ngFor=\"let item of content?.inputText\">\r\n            <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n          <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\">\r\n            <div *ngFor=\"let button of data?.action?.buttons\">\r\n              <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\" [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=\"hover_effect\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\r\n    </div>\r\n  </div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:100%}.button-display{display:flex;gap:10px;margin-top:15px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.EventsService }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }] } });
+
+class VideoSectionComponent {
+    constructor(dom) {
+        this.dom = dom;
+        this._mainContainer = null;
+        this.videoLink = '';
+        this.showEditors = false;
+    }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.style = this.data?.styles;
+        if (this.content?.videoLink.url) {
+            this.videoLink = this.content?.videoLink?.url;
         }
-        // Return null if no match found
-        return null;
     }
-    // Function to calculate contrast color based on RGBA values
-    getContrastColor(rgba) {
-        // Extract RGB values from the RGBA color
-        const [r, g, b, a] = rgba;
-        // Convert RGB values to luminance
-        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-        // Determine threshold for color selection
-        const threshold = 0.5;
-        // Choose contrasting color based on luminance
-        return luminance > threshold ? 'black' : 'white';
+    showEditTabs(isShow) {
+        this.showEditors = isShow;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextBackgroundDirectiveDirective, deps: [{ token: i0.ElementRef }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: TextBackgroundDirectiveDirective, isStandalone: true, selector: "[simpoTextBackgroundDirective]", inputs: { textBackgroundDirective: ["simpoTextBackgroundDirective", "textBackgroundDirective"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: VideoSectionComponent, isStandalone: true, selector: "simpo-video-section", inputs: { data: "data", index: "index" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large mb-1\" [innerHTML]=\"text.value\">\n                </div>\n\n\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\n                    <iframe class=\"video\"\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(videoLink)\" frameborder=\"0\" allowfullscreen></iframe>\n                    \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n    </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index"], outputs: ["edit"] }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextBackgroundDirectiveDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[simpoTextBackgroundDirective]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.EventsService }], propDecorators: { textBackgroundDirective: [{
-                type: Input,
-                args: ['simpoTextBackgroundDirective']
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: VideoSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-video-section', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        ColumnDirectiveDirective,
+                        ContentFitDirective,
+                        SimpoComponentModule,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n            [simpoLayout]=\"style?.layout\">\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large mb-1\" [innerHTML]=\"text.value\">\n                </div>\n\n\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\n                    <iframe class=\"video\"\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(videoLink)\" frameborder=\"0\" allowfullscreen></iframe>\n                    \u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div class=\"hover_effect\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\"></simpo-hover-elements>\n    </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1$3.DomSanitizer }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], _mainContainer: [{
+                type: ViewChild,
+                args: ['mainContainer']
+            }] } });
+
+class NavbarSectionComponent {
+    constructor() {
+        this.color = '#000000';
+        this.screenWidth = 475;
+        // this.getScreenSize();
+    }
+    ngOnInit() {
+        this.content = this.data?.content;
+        this.style = this.data?.styles;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [], 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", index: "index" }, ngImport: i0, template: "<nav class=\"navbar navbar-expand-lg bg-light d-block mb-0\">\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\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\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?.source === 'BRANDING'\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\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?.source != 'BRANDING'\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n        </div>\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\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\"\r\n        aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n    </div>\r\n    <div class=\"collapse navbar-collapse p-4\" *ngIf=\"screenWidth > 475\">\r\n      <div class=\"navbar-nav align-items-center\">\r\n        <div class=\"d-flex\">\r\n          <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Home</a>\r\n          <a class=\"nav-link\" href=\"#\">Features</a>\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?.isSocialLink ? 'justify-content-between' : 'justify-content-end'\">\r\n            <div class=\"d-flex mt-0\" *ngIf=\"content?.isSocialLink\">\r\n              <ng-container *ngFor=\"let item of content?.socialLinks\">\r\n                <div style=\"position: relative;margin-right: 10px;\">\r\n                  <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></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=\"content?.isButton\" class=\"button-display mt-0 mb-4\">\r\n            <div *ngFor=\"let button of content?.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 class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 475\">\r\n      asfjklsajdfkl\r\n    </div>\r\n  </div>\r\n</nav>", styles: [".navbar-toggler{height:40px}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SimpoButtonComponent$1, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent$1, selector: "simpo-socia-icons", inputs: ["socialIconData", "color"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-navbar-section', standalone: true, imports: [CommonModule, SimpoButtonComponent$1, SociaIconsComponent$1], template: "<nav class=\"navbar navbar-expand-lg bg-light d-block mb-0\">\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\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\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?.source === 'BRANDING'\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\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?.source != 'BRANDING'\">\r\n        <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n          <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"100px\">\r\n        </div>\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\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\"\r\n        aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n        <span class=\"navbar-toggler-icon\"></span>\r\n      </button>\r\n    </div>\r\n    <div class=\"collapse navbar-collapse p-4\" *ngIf=\"screenWidth > 475\">\r\n      <div class=\"navbar-nav align-items-center\">\r\n        <div class=\"d-flex\">\r\n          <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">Home</a>\r\n          <a class=\"nav-link\" href=\"#\">Features</a>\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?.isSocialLink ? 'justify-content-between' : 'justify-content-end'\">\r\n            <div class=\"d-flex mt-0\" *ngIf=\"content?.isSocialLink\">\r\n              <ng-container *ngFor=\"let item of content?.socialLinks\">\r\n                <div style=\"position: relative;margin-right: 10px;\">\r\n                  <simpo-socia-icons [socialIconData]=\"item\" [color]=\"color\"></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=\"content?.isButton\" class=\"button-display mt-0 mb-4\">\r\n            <div *ngFor=\"let button of content?.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 class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 475\">\r\n      asfjklsajdfkl\r\n    </div>\r\n  </div>\r\n</nav>", styles: [".navbar-toggler{height:40px}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
             }] } });
 
 class ButtonElementComponent {