simpo-component-library 0.3.6 → 0.3.8

package/fesm2022/simpo-component-library.mjs

@@ -6,9 +6,9 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import * as i1 from '@angular/material/dialog';
+import * as i2$2 from '@angular/material/dialog';
 import { MatDialogModule } from '@angular/material/dialog';
-import * as i1$1 from '@angular/platform-browser';
+import * as i1 from '@angular/platform-browser';
 
 class ButtonElementComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -45,6 +45,7 @@ class EventsService {
         this.changeContent = new EventEmitter();
         this.restyleSection = new EventEmitter();
         this.pageRedirectionButton = new EventEmitter();
+        this.buttonRedirection = new EventEmitter();
         //reference services
         this.backgroundImageChangeCheck = new EventEmitter();
         this.colorOverlayChangeChecks = new EventEmitter();
@@ -455,20 +456,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
             }] } });
 
 class SimpoButtonComponent {
+    constructor(_eventService) {
+        this._eventService = _eventService;
+    }
     ngOnInit() {
     }
     redirectTo() {
-        if (this.buttonContent?.newTab) {
-            window.open(this.buttonContent.redirectionUrl, '_blank');
-        }
+        this._eventService.buttonRedirection.emit({ data: this.buttonContent });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoButtonComponent, deps: [{ token: EventsService }], 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, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color"] }] }); }
 }
 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], 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: [{
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonContent: [{
                 type: Input
             }], buttonStyle: [{
                 type: Input
@@ -788,7 +790,7 @@ class HoverElementsComponent {
         this._eventService.duplicate.emit({ index: this.index, data: this.data });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverElementsComponent, deps: [{ token: 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", editOptions: "editOptions" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n    <div class=\"top-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\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' && data.sectionType != 'header'\">\r\n                <button (click)=\"restyleSection()\">\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                        Restyle\r\n                    </span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\"></div>\r\n            <div class=\"regenerate\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\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' && data.sectionType != 'header'\">\r\n                <button class=\"copy\" (click)=\"duplicateSection()\">\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()\" [disabled]=\"index == 1\">\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' && data.sectionType != 'header'\">\r\n        <button class=\"add_btn\" (click)=\"addSection('BELOW')\">Add Section +</button>\r\n    </div>\r\n</mat-dialog-content>\r\n", 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}.top-btn{position:absolute;top:0%;z-index:1001;width:100%;border-bottom:4px solid #0267c1}.top-btn .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}.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;z-index:1001}.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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index", editOptions: "editOptions" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n    <div class=\"top-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\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' && data.sectionType != 'header'\">\r\n                <button (click)=\"restyleSection()\">\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                        Restyle\r\n                    </span>\r\n                </button>\r\n            </div>\r\n            <div class=\"vr-line\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\"></div>\r\n            <div class=\"regenerate\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\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' && data.sectionType != 'header'\">\r\n                <button class=\"copy\" (click)=\"duplicateSection()\">\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()\" [disabled]=\"index == 1\">\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' && data.sectionType != 'header'\">\r\n        <button class=\"add_btn\" (click)=\"addSection('BELOW')\">Add Section +</button>\r\n    </div>\r\n</mat-dialog-content>\r\n", 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}.top-btn{position:absolute;top:0%;z-index:1001;width:100%;border-bottom:4px solid #0267c1}.top-btn .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}.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;z-index:1001}.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: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverElementsComponent, decorators: [{
             type: Component,
@@ -803,16 +805,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }] } });
 
+class DeleteHoverElementComponent {
+    constructor(_eventService) {
+        this._eventService = _eventService;
+        this.edit = new EventEmitter();
+    }
+    deleteSection() {
+        this._eventService.delete.emit({ index: this.index });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: DeleteHoverElementComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: DeleteHoverElementComponent, isStandalone: true, selector: "simpo-delete-hover-element", inputs: { index: "index", data: "data" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\">\n  <section class=\"hover-tab\">\n      <div class=\"tabs-section\">\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\n                      <path fill-rule=\"evenodd\"\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\n                          clip-rule=\"evenodd\"></path>\n                  </svg>\n              </button>\n          </div>\n      </div>\n  </section>\n</mat-dialog-content>\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: DeleteHoverElementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-delete-hover-element', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule], template: "<mat-dialog-content class=\"mat-typography\">\n  <section class=\"hover-tab\">\n      <div class=\"tabs-section\">\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\n                      <path fill-rule=\"evenodd\"\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\n                          clip-rule=\"evenodd\"></path>\n                  </svg>\n              </button>\n          </div>\n      </div>\n  </section>\n</mat-dialog-content>\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { index: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], edit: [{
+                type: Output
+            }] } });
+
 class SimpoComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.3", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent], exports: [HoverElementsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.3", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent, DeleteHoverElementComponent], exports: [HoverElementsComponent, DeleteHoverElementComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent, DeleteHoverElementComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [HoverElementsComponent],
-                    exports: [HoverElementsComponent],
+                    imports: [HoverElementsComponent, DeleteHoverElementComponent],
+                    exports: [HoverElementsComponent, DeleteHoverElementComponent],
                 }]
         }] });
 
@@ -1362,7 +1386,7 @@ class OverlayDirective {
         this.el = el;
         this.eventService = eventService;
         this.eventService.colorOverlayChangeChecks.subscribe((res) => {
-            if (this.el.nativeElement.id === res.type) {
+            if (this.el.nativeElement.id === res.id) {
                 if (res.data?.showImage) {
                     this.el.nativeElement.style.setProperty('background-color', this.getRGBA(res.data.color, res.data.opacity));
                 }
@@ -1440,22 +1464,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['simpoPositionLayoutDirective']
             }] } });
 
-class TextSectionComponent {
+class BaseSection {
+    constructor() {
+        this.deleteSelected = false;
+        this.showEditors = false;
+        this.showDelete = false;
+    }
+    showEditTabs(isShow) {
+        if (this.deleteSelected) {
+            this.showDelete = isShow;
+        }
+        else {
+            this.showEditors = isShow;
+        }
+    }
+}
+
+class TextSectionComponent extends BaseSection {
     constructor(_dialog, _eventService) {
+        super();
         this._dialog = _dialog;
         this._eventService = _eventService;
         this._mainContainer = null;
-        this.showEditors = false;
     }
     ngOnInit() {
         this.content = this.data?.content;
         this.styles = this.data?.styles;
+        this.deleteSelected = this.delete;
     }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextSectionComponent, deps: [{ token: i1.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit" }, 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".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:auto}.mt-15{margin-top:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData"] }, { 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", "editOptions"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextSectionComponent, deps: [{ token: i2$2.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 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:auto}.mt-15{margin-top:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData"] }, { 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", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { 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"] }] }); }
 }
@@ -1485,35 +1523,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         OverlayDirective,
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective
-                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".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:auto}.mt-15{margin-top:15px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: EventsService }], propDecorators: { data: [{
+                    ], 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 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:auto}.mt-15{margin-top:15px}\n"] }]
+        }], ctorParameters: () => [{ type: i2$2.MatDialog }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
             }], _mainContainer: [{
                 type: ViewChild,
                 args: ['mainContainer']
             }] } });
 
-class BannerSectionComponent {
+class BannerSectionComponent extends BaseSection {
     constructor(_eventService) {
+        super();
         this._eventService = _eventService;
-        this.showEditors = false;
+        this.delete = false;
     }
     ngOnInit() {
+        this.deleteSelected = this.delete;
         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: [{ token: EventsService }], 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", edit: "edit" }, 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\" [simpoObjectPosition]=\"content?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\" [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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
+    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", edit: "edit", delete: "delete" }, usesInheritance: true, 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\" [simpoObjectPosition]=\"content?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\" [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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}\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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
@@ -1543,29 +1582,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective
-                    ], 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\" [simpoObjectPosition]=\"content?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\" [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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}\n"] }]
+                    ], 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\" [simpoObjectPosition]=\"content?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\" [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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
             }] } });
 
-class FaqSectionComponent {
+class FaqSectionComponent extends BaseSection {
     constructor(_eventService) {
+        super();
         this._eventService = _eventService;
-        this.showEditors = false;
+        this.delete = false;
     }
     ngOnInit() {
         this.content = this.data?.content;
         this.style = this.data?.styles;
-    }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
+        this.deleteSelected = this.delete;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FaqSectionComponent, deps: [{ token: EventsService }], 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", edit: "edit" }, 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "directive", type: 
+    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", edit: "edit", delete: "delete" }, usesInheritance: 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 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".mb-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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
@@ -1593,31 +1633,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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"] }]
+                    ], 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".mb-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"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
+class ColorDirective {
+    constructor(el, eventService) {
+        this.el = el;
+        this.eventService = eventService;
+    }
+    ngOnChanges() {
+        this.applyColor();
+        this.bgColorChangeCheck();
+    }
+    ngOnDestroy() {
+        this.colorSubscription?.unsubscribe();
+    }
+    applyColor() {
+        if (this.bgColor) {
+            this.el.nativeElement.style.setProperty('color', this.getTextColor());
+        }
+    }
+    bgColorChangeCheck() {
+        this.colorSubscription = this.eventService.backgroundImageChangeCheck.subscribe((res) => {
+            if (res.id === this.el.nativeElement.id) {
+                this.bgColor = res?.data?.color;
+                this.applyColor();
+            }
+        });
+    }
+    getTextColor() {
+        if (this.bgColor) {
+            const threshold = 130; // Adjust this threshold as needed
+            const r = parseInt(this.bgColor.slice(1, 3), 16);
+            const g = parseInt(this.bgColor.slice(3, 5), 16);
+            const b = parseInt(this.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: ColorDirective, deps: [{ token: i0.ElementRef }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.3", type: ColorDirective, isStandalone: true, selector: "[simpoColor]", inputs: { bgColor: ["simpoColor", "bgColor"] }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[simpoColor]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: EventsService }], propDecorators: { bgColor: [{
+                type: Input,
+                args: ['simpoColor']
             }] } });
 
-class FooterSectionComponent {
+class FooterSectionComponent extends BaseSection {
     constructor(_eventService) {
+        super();
         this._eventService = _eventService;
+        this.edit = true;
+        this.delete = false;
         this.color = '#ffffff';
         this.footerTypes = FooterTypes;
-        this.showEditors = false;
     }
     ngOnInit() {
+        this.deleteSelected = this.delete;
         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: [{ token: EventsService }], 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", edit: "edit" }, 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], 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"] }] }); }
+    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", edit: "edit", delete: "delete" }, usesInheritance: true, 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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], 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"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FooterSectionComponent, decorators: [{
             type: Component,
@@ -1644,14 +1736,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></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"] }]
+                        TextBackgroundDirectiveDirective,
+                        ColorDirective
+                    ], 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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".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: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
             }] } });
 
 class ImageCarouselSectionComponent {
@@ -1705,21 +1800,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
-class ImageGridSectionComponent {
+class ImageGridSectionComponent extends BaseSection {
     constructor(_eventService) {
+        super();
         this._eventService = _eventService;
+        this.delete = false;
         this._mainContainer = null;
-        this.showEditors = false;
     }
     ngOnInit() {
         this.content = this.data?.content;
         this.style = this.data?.styles;
-    }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
+        this.deleteSelected = this.delete;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageGridSectionComponent, deps: [{ token: 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", edit: "edit" }, 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\"  [simpoObjectPosition]=\"img.image.position\"\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" />\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n</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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "directive", type: 
+    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", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\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\"  [simpoObjectPosition]=\"img.image.position\"\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" />\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section,.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
@@ -1750,33 +1844,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective
-                    ], 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\"  [simpoObjectPosition]=\"img.image.position\"\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" />\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n</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"] }]
+                    ], 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\"  [simpoObjectPosition]=\"img.image.position\"\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" />\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section,.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: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
             }], _mainContainer: [{
                 type: ViewChild,
                 args: ['mainContainer']
             }] } });
 
-class ImageSectionComponent {
+class ImageSectionComponent extends BaseSection {
     constructor(_eventService) {
+        super();
         this._eventService = _eventService;
+        this.delete = false;
         this._mainContainer = null;
-        this.showEditors = false;
     }
     ngOnInit() {
         this.content = this.data?.content;
         this.style = this.data?.styles;
-    }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
+        this.deleteSelected = this.delete;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageSectionComponent, deps: [{ token: EventsService }], 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", edit: "edit" }, 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\" [simpoObjectPosition]=\"content?.image?.position\"\n                        [id]=\"data?.id\" />\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n</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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "directive", type: 
+    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", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\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\" [simpoObjectPosition]=\"content?.image?.position\"\n                        [id]=\"data?.id\" />\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
@@ -1806,35 +1901,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective
-                    ], 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\" [simpoObjectPosition]=\"content?.image?.position\"\n                        [id]=\"data?.id\" />\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n</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"] }]
+                    ], 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\" [simpoObjectPosition]=\"content?.image?.position\"\n                        [id]=\"data?.id\" />\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
             }], _mainContainer: [{
                 type: ViewChild,
                 args: ['mainContainer']
             }] } });
 
-class ServiceSectionComponent {
+class ServiceSectionComponent extends BaseSection {
     constructor(_eventService) {
+        super();
         this._eventService = _eventService;
         this._mainContainer = null;
         this.TextPosition = TextPosition;
-        this.showEditors = false;
     }
     ngOnInit() {
         this.content = this.data?.content;
         this.style = this.data?.styles;
         this.button = this.data?.action.buttons[0];
-    }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
+        this.deleteSelected = this.delete;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: 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", edit: "edit" }, 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "directive", type: 
+    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", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { 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"] }] }); }
 }
@@ -1862,34 +1957,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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"] }]
+                    ], 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
             }], _mainContainer: [{
                 type: ViewChild,
                 args: ['mainContainer']
             }] } });
 
-class TeamMemberSectionComponent {
+class TeamMemberSectionComponent extends BaseSection {
     constructor(_eventService) {
+        super();
         this._eventService = _eventService;
         this.TextPosition = TextPosition;
-        this.showEditors = false;
     }
     ngOnInit() {
         this.content = this.data?.content;
         this.style = this.data?.styles;
         this.button = this.data?.action.buttons[0];
-    }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
+        this.deleteSelected = this.delete;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TeamMemberSectionComponent, deps: [{ token: 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", edit: "edit" }, 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "directive", type: 
+    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", edit: "edit", delete: "delete" }, usesInheritance: 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { 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"] }] }); }
 }
@@ -1917,32 +2012,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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"] }]
+                    ], 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
             }] } });
 
-class TestimonialSectionComponent {
+class TestimonialSectionComponent extends BaseSection {
     constructor(_eventService) {
+        super();
         this._eventService = _eventService;
         this._mainContainer = null;
-        this.showEditors = false;
     }
     ngOnInit() {
         this.content = this.data?.content;
         this.style = this.data?.styles;
-    }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
+        this.deleteSelected = this.delete;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit" }, 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\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%;\" [id]=\"data?.id\"\n                [simpoColor]=\"style?.background?.color\" [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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left: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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { 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"] }] }); }
+                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"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TestimonialSectionComponent, decorators: [{
             type: Component,
@@ -1968,38 +2063,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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"] }]
+                        TextBackgroundDirectiveDirective,
+                        ColorDirective
+                    ], 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%;\" [id]=\"data?.id\"\n                [simpoColor]=\"style?.background?.color\" [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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n  </div>\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left: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"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
             }], _mainContainer: [{
                 type: ViewChild,
                 args: ['mainContainer']
             }] } });
 
 ;
-class TextImageSectionComponent {
+class TextImageSectionComponent extends BaseSection {
     constructor(_eventService) {
+        super();
         this._eventService = _eventService;
-        this.showEditors = false;
+        this.delete = false;
     }
     ngOnInit() {
+        this.deleteSelected = this.delete;
         this.content = this.data?.content;
         this.styles = this.data?.styles;
         if (!this.styles || !this.content)
             return;
     }
-    showEditTabs(isShow) {
-        this.showEditors = isShow;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextImageSectionComponent, deps: [{ token: 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", edit: "edit" }, 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\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [simpoCorner]=\"styles?.corners\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\" 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 *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n  </div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
+    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", edit: "edit", delete: "delete" }, usesInheritance: true, 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\" [simpoObjectPosition]=\"content?.image?.position\"\r\n            [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [simpoCorner]=\"styles?.corners\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\" 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 *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: 
                 //directive
-                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { 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"] }] }); }
+                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"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextImageSectionComponent, decorators: [{
             type: Component,
@@ -2027,22 +2124,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
                         ObjectPositionDirective
-                    ], 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\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [simpoCorner]=\"styles?.corners\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\" 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 *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n  </div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}\n"] }]
+                    ], 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\" [simpoObjectPosition]=\"content?.image?.position\"\r\n            [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [simpoCorner]=\"styles?.corners\"\r\n            class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"100\" 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 *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </div>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
             }] } });
 
-class VideoSectionComponent {
+class VideoSectionComponent extends BaseSection {
     constructor(dom, _eventService) {
+        super();
         this.dom = dom;
         this._eventService = _eventService;
         this._mainContainer = null;
         this.videoLink = '';
-        this.showEditors = false;
     }
     ngOnInit() {
         this.content = this.data?.content;
@@ -2050,12 +2149,10 @@ class VideoSectionComponent {
         if (this.content?.videoLink.url) {
             this.videoLink = this.content?.videoLink?.url;
         }
+        this.deleteSelected = this.delete;
     }
-    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$1.DomSanitizer }, { token: EventsService }], 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", edit: "edit" }, 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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: VideoSectionComponent, deps: [{ token: i1.DomSanitizer }, { token: EventsService }], 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", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n    class=\"total-container\">\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\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
 }
@@ -2084,13 +2181,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         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 [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></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$1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
+                    ], 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\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
             }], edit: [{
                 type: Input
+            }], delete: [{
+                type: Input
             }], _mainContainer: [{
                 type: ViewChild,
                 args: ['mainContainer']
@@ -2104,26 +2203,15 @@ class NavbarButtonElementComponent {
     ngOnInit() {
         // console.log(this.buttonData)
     }
-    getTextColor() {
-        if (this.bgColor) {
-            const threshold = 130; // Adjust this threshold as needed
-            const r = parseInt(this.bgColor.slice(1, 3), 16);
-            const g = parseInt(this.bgColor.slice(3, 5), 16);
-            const b = parseInt(this.bgColor.slice(5, 7), 16);
-            const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-            return brightness > threshold ? '#000000' : '#ffffff';
-        }
-        return "#ffffff;";
-    }
     changePage() {
         this._eventService.pageRedirectionButton.emit({ data: this.buttonData });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarButtonElementComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarButtonElementComponent, isStandalone: true, selector: "simpo-navbar-button-element", inputs: { buttonData: "buttonData", buttonStyle: "buttonStyle", selectedStyle: "selectedStyle", bgColor: "bgColor" }, ngImport: i0, template: "<div *ngIf=\"buttonData?.status\">\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n        <button mat-stroked-button style=\"border: none;\"\r\n    [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\"></div>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div *ngIf=\"!buttonData?.status\">\r\n    <button mat-stroked-button style=\"border: none;width: max-content!important;\" (click)=\"changePage()\"\r\n    [ngStyle]=\"{color: getTextColor()}\" class=\"status-navbar-button\">{{buttonData?.label}}</button>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:18px!important}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#fff!important;display:flex;justify-content:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarButtonElementComponent, isStandalone: true, selector: "simpo-navbar-button-element", inputs: { buttonData: "buttonData", buttonStyle: "buttonStyle", selectedStyle: "selectedStyle", bgColor: "bgColor", sectionId: "sectionId" }, ngImport: i0, template: "<div *ngIf=\"buttonData?.status\">\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n        <button mat-stroked-button style=\"border: none;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n    [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\"></div>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div *ngIf=\"!buttonData?.status\">\r\n    <button mat-stroked-button style=\"border: none;width: max-content!important;\" (click)=\"changePage()\" [id]=\"sectionId\"\r\n    [simpoColor]=\"bgColor\" class=\"status-navbar-button\">{{buttonData?.label}}</button>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:18px!important}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#fff!important;display:flex;justify-content:flex-start}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarButtonElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-navbar-button-element', standalone: true, imports: [CommonModule, MatButtonModule], template: "<div *ngIf=\"buttonData?.status\">\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n        <button mat-stroked-button style=\"border: none;\"\r\n    [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\"></div>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div *ngIf=\"!buttonData?.status\">\r\n    <button mat-stroked-button style=\"border: none;width: max-content!important;\" (click)=\"changePage()\"\r\n    [ngStyle]=\"{color: getTextColor()}\" class=\"status-navbar-button\">{{buttonData?.label}}</button>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:18px!important}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#fff!important;display:flex;justify-content:flex-start}}\n"] }]
+            args: [{ selector: 'simpo-navbar-button-element', standalone: true, imports: [CommonModule, MatButtonModule, ColorDirective], template: "<div *ngIf=\"buttonData?.status\">\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.TAB\">\r\n        <button mat-stroked-button style=\"border: none;\" [id]=\"sectionId\" [simpoColor]=\"bgColor\"\r\n    [ngStyle]=\"{color:buttonStyle?.color}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    <div [ngStyle]=\"{'border-bottom':'1px solid'+buttonStyle?.color}\"></div>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_SUBTLE\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.ROUND_BOLD\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_SUBTLE\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;border-radius: 0px !important;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.subtleColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <div *ngIf=\"selectedStyle === HeaderButtonStyle.SQUARE_BOLD\">\r\n        <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" style=\"border: none;padding: 20px 5px;width: max-content!important;\"\r\n        [ngStyle]=\"{color:buttonStyle?.color,'background-color':buttonStyle?.backgroundColor}\" class=\"navbar-button\">{{buttonData?.label}}</button>\r\n    </div>\r\n    <!-- <button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\">{{buttonData?.content?.label}}</button> -->\r\n\r\n</div>\r\n<div *ngIf=\"!buttonData?.status\">\r\n    <button mat-stroked-button style=\"border: none;width: max-content!important;\" (click)=\"changePage()\" [id]=\"sectionId\"\r\n    [simpoColor]=\"bgColor\" class=\"status-navbar-button\">{{buttonData?.label}}</button>\r\n</div>\r\n", styles: [".navbar-button,.status-navbar-button{font-size:18px!important}@media only screen and (max-width : 475px){.navbar-button{width:100%!important;display:flex;justify-content:flex-start}.status-navbar-button{color:#fff!important;display:flex;justify-content:flex-start}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonData: [{
                 type: Input
             }], buttonStyle: [{
@@ -2132,6 +2220,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }], bgColor: [{
                 type: Input
+            }], sectionId: [{
+                type: Input
             }] } });
 
 class NavbarSectionComponent {
@@ -2165,7 +2255,7 @@ class NavbarSectionComponent {
         this.showEditors = isShow;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <nav class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"w-50 left-logo-text\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\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\" *ngIf=\"screenWidth > 768\">\r\n        <div class=\"navbar-nav align-items-center\">\r\n          <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n            <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n              <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n              [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n              <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                  <div style=\"position: relative;margin-right: 10px;\">\r\n                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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=\"action?.display\" class=\"button-display mt-0 mb-4\">\r\n              <div *ngFor=\"let button of action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n        <div class=\"inner-height p-4\">\r\n          <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n            <div class=\"d-flex flex-column w-100\">\r\n              <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"title-row\">\r\n                  <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                    <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                      <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"50px\">\r\n                    </div>\r\n                    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"d-flex gap-3 align-items-center\"\r\n                    *ngIf=\"content?.logo?.isImage && 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 align-items-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=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                  <mat-icon>close</mat-icon>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                <div class=\"d-flex flex-column gap-4 w-100\">\r\n                  <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                    <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-column\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                  [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                  <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                    <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                      <div style=\"position: relative;margin-right: 10px;\">\r\n                        <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 mt-4\">\r\n                <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                  <div *ngFor=\"let button of action?.buttons\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], 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"] }] }); }
+    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", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <nav class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"w-50 left-logo-text\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\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\" *ngIf=\"screenWidth > 768\">\r\n        <div class=\"navbar-nav align-items-center\">\r\n          <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n            <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n              <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                [bgColor]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n              [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n              <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                  <div style=\"position: relative;margin-right: 10px;\">\r\n                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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=\"action?.display\" class=\"button-display mt-0 mb-4\">\r\n              <div *ngFor=\"let button of action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n        <div class=\"inner-height p-4\">\r\n          <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n            <div class=\"d-flex flex-column w-100\">\r\n              <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"title-row\">\r\n                  <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                    <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                      <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"50px\">\r\n                    </div>\r\n                    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"d-flex gap-3 align-items-center\"\r\n                    *ngIf=\"content?.logo?.isImage && 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 align-items-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=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                  <mat-icon>close</mat-icon>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                <div class=\"d-flex flex-column gap-4 w-100\">\r\n                  <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                    <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-column\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                  [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                  <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                    <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                      <div style=\"position: relative;margin-right: 10px;\">\r\n                        <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 mt-4\">\r\n                <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                  <div *ngFor=\"let button of action?.buttons\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], 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: NavbarSectionComponent, decorators: [{
             type: Component,
@@ -2186,7 +2276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         ImageDirectiveDirective,
                         OverlayDirective,
                         PositionLayoutDirectiveDirective,
-                        TextBackgroundDirectiveDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <nav class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"w-50 left-logo-text\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\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\" *ngIf=\"screenWidth > 768\">\r\n        <div class=\"navbar-nav align-items-center\">\r\n          <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n            <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n              <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n              [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n              <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                  <div style=\"position: relative;margin-right: 10px;\">\r\n                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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=\"action?.display\" class=\"button-display mt-0 mb-4\">\r\n              <div *ngFor=\"let button of action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n        <div class=\"inner-height p-4\">\r\n          <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n            <div class=\"d-flex flex-column w-100\">\r\n              <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"title-row\">\r\n                  <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                    <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                      <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"50px\">\r\n                    </div>\r\n                    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"d-flex gap-3 align-items-center\"\r\n                    *ngIf=\"content?.logo?.isImage && 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 align-items-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=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                  <mat-icon>close</mat-icon>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                <div class=\"d-flex flex-column gap-4 w-100\">\r\n                  <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                    <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-column\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                  [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                  <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                    <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                      <div style=\"position: relative;margin-right: 10px;\">\r\n                        <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 mt-4\">\r\n                <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                  <div *ngFor=\"let button of action?.buttons\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}\n"] }]
+                        TextBackgroundDirectiveDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <nav class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid\">\r\n      <div class=\"w-50 left-logo-text\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\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\" *ngIf=\"screenWidth > 768\">\r\n        <div class=\"navbar-nav align-items-center\">\r\n          <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n            <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n              <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                [bgColor]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"d-flex\">\r\n            <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n              [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n              <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                  <div style=\"position: relative;margin-right: 10px;\">\r\n                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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=\"action?.display\" class=\"button-display mt-0 mb-4\">\r\n              <div *ngFor=\"let button of action?.buttons\">\r\n                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                  [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n        <div class=\"inner-height p-4\">\r\n          <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n            <div class=\"d-flex flex-column w-100\">\r\n              <div class=\"d-flex justify-content-between align-items-center\">\r\n                <div class=\"title-row\">\r\n                  <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                    <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                      <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" width=\"50px\">\r\n                    </div>\r\n                    <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                      <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"d-flex gap-3 align-items-center\"\r\n                    *ngIf=\"content?.logo?.isImage && 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 align-items-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=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                  <mat-icon>close</mat-icon>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                <div class=\"d-flex flex-column gap-4 w-100\">\r\n                  <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                    <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-column\">\r\n              <div class=\"d-flex\">\r\n                <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                  [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                  <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                    <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                      <div style=\"position: relative;margin-right: 10px;\">\r\n                        <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 mt-4\">\r\n                <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                  <div *ngFor=\"let button of action?.buttons\">\r\n                    <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                      [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2225,5 +2315,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerContentFitDirective, BannerSectionComponent, BorderDirective, ButtonDirectiveDirective, ChannelType, ColumnDirectiveDirective, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, Padding, PositionLayoutDirectiveDirective, RedirectionLinkType, SPACING, ServiceSectionComponent, SimpoFooterLayoutDirective, Style, TeamMemberSectionComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, VALIGN, VideoSectionComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, simpoConetenAlignmentDirective };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerContentFitDirective, BannerSectionComponent, BorderDirective, ButtonDirectiveDirective, ChannelType, ColorDirective, ColumnDirectiveDirective, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, EventsService, FaqSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HeaderButtonStyle, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, Padding, PositionLayoutDirectiveDirective, RedirectionLinkType, SPACING, ServiceSectionComponent, SimpoFooterLayoutDirective, Style, TeamMemberSectionComponent, TestimonialSectionComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, VALIGN, VideoSectionComponent, animation, applySpacing, applyStyle, contentAlignment, fitContent, fitScreen, simpoConetenAlignmentDirective };
 //# sourceMappingURL=simpo-component-library.mjs.map