simpo-component-library 0.4.7 → 0.4.9

package/fesm2022/simpo-component-library.mjs

@@ -12,11 +12,11 @@ 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 }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ButtonElementComponent, isStandalone: true, selector: "simpo-button-element", inputs: { buttonData: "buttonData" }, ngImport: i0, template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ButtonElementComponent, isStandalone: true, selector: "simpo-button-element", inputs: { buttonData: "buttonData" }, ngImport: i0, template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-button-element', standalone: true, imports: [CommonModule, MatButtonModule], template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\n" }]
+            args: [{ selector: 'simpo-button-element', standalone: true, imports: [CommonModule, MatButtonModule], template: "<button mat-stroked-button color=\"primary btn-lg px-4 me-md-2\" *ngIf=\"buttonData?.disabled\">{{buttonData?.text}}</button>\r\n" }]
         }], propDecorators: { buttonData: [{
                 type: Input
             }] } });
@@ -26,11 +26,11 @@ class TextElementComponent {
         this.textData = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TextElementComponent, isStandalone: true, selector: "simpo-text-element", inputs: { textData: "textData" }, ngImport: i0, template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\"></div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TextElementComponent, isStandalone: true, selector: "simpo-text-element", inputs: { textData: "textData" }, ngImport: i0, template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\"></div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-text-element', standalone: true, imports: [CommonModule], template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\"></div>\n" }]
+            args: [{ selector: 'simpo-text-element', standalone: true, imports: [CommonModule], template: "<div [innerHTML]=\"textData\" style=\"text-wrap: balance;\"></div>\r\n" }]
         }], propDecorators: { textData: [{
                 type: Input
             }] } });
@@ -467,11 +467,11 @@ class SimpoButtonComponent {
         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: [{ 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", buttonId: "buttonId", color: "color", sectionId: "sectionId" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color"] }] }); }
+    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", buttonId: "buttonId", color: "color", sectionId: "sectionId" }, ngImport: i0, template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\r\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"], dependencies: [{ kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color"] }] }); }
 }
 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+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"] }]
+            args: [{ selector: 'app-button-element', standalone: true, imports: [ButtonDirectiveDirective], template: "<button class=\"button\" (click)=\"redirectTo()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\">{{buttonContent?.label}}</button>\r\n", styles: [".button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { buttonContent: [{
                 type: Input
             }], buttonStyle: [{
@@ -531,11 +531,11 @@ class BelowImageCardComponent {
         // }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BelowImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div>\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: BelowImageCardComponent, isStandalone: true, selector: "simpo-below-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div>\r\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\">\r\n  <div class=\"ptb-1\">\r\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: BelowImageCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-below-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, SimpoButtonComponent, ObjectPositionDirective], template: "<div>\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\">\n  <div class=\"ptb-1\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"] }]
+            args: [{ selector: 'simpo-below-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, SimpoButtonComponent, ObjectPositionDirective], template: "<div>\r\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\" [simpoObjectPosition]=\"data.image?.position\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.display.showImage\">\r\n  <div class=\"ptb-1\">\r\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [buttonId]=\"button ? button.id : ''\" [sectionId]=\"componentId\"\r\n        [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.ptb-1{padding-top:1.5rem;padding-bottom:1.5rem}.mb-1{margin-bottom:1rem!important}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], styles: [{
@@ -662,11 +662,11 @@ class TopOfImageCardComponent {
         console.log(this.button);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TopOfImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\n\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TopOfImageCardComponent, isStandalone: true, selector: "simpo-top-of-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<!-- <div style=\"position: relative;\">\r\n\r\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n      *ngIf=\"content.showHeading\"></div>\r\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n    </div>\r\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n  </div>\r\n</div>\r\n -->\r\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\r\n      *ngIf=\"content.display.showHeading\"></div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TopOfImageCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\n\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\n\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.showHeading\"></div>\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\n    </div>\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n  </div>\n</div>\n -->\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\n      *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\n    </div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"] }]
+            args: [{ selector: 'simpo-top-of-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent], template: "<!-- <div style=\"position: relative;\">\r\n\r\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\" [simpoImageDirective]=\"styles?.image\"\r\n    [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100\" *ngIf=\"content.showImage\">\r\n\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div style=\"color: white;\" class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\"\r\n      *ngIf=\"content.showHeading\"></div>\r\n    <div style=\"color: white;\" class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.showContent\">\r\n    </div>\r\n    <app-button-element [buttonData]=\"data?.button\" [sectionId]=\"componentId\" [buttonStyle]=\"styles?.button\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n  </div>\r\n</div>\r\n -->\r\n <div class=\"top-container\" [ngStyle]=\"{'background-image' : content.display.showImage ? 'url('+data.image.url+')' : ''}\"\r\n [simpoCorner]=\"styles?.corners\" [id]=\"componentId\">\r\n <div [simpoImageDirective]=\"styles?.image\" [id]=\"componentId\" *ngIf=\"content.display.showImage\"></div>\r\n  <div class=\"content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"content.display.showImage ? styles?.textBackground : ''\">\r\n    <div class=\"heading-medium mb-1 lh-40\" [innerHtml]=\"data.inputText[0].value\"\r\n      *ngIf=\"content.display.showHeading\"></div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\">\r\n    </div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element  [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{padding:3rem 1.5rem 1.5rem;min-height:256px;display:flex;flex-direction:column;justify-content:end}.top-container{background-position:center center;background-size:cover}.lh-40{line-height:40px}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], styles: [{
@@ -686,11 +686,11 @@ class CoveringImageCardComponent {
         // }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoveringImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\"  [simpoObjectPosition]=\"data.image?.position\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CoveringImageCardComponent, isStandalone: true, selector: "simpo-covering-image-card", inputs: { data: "data", styles: "styles", content: "content", componentId: "componentId", button: "button" }, ngImport: i0, template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\r\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\"  [simpoObjectPosition]=\"data.image?.position\">\r\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: TextBackgroundDirectiveDirective, selector: "[simpoTextBackgroundDirective]", inputs: ["simpoTextBackgroundDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CoveringImageCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent, ObjectPositionDirective], template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\"  [simpoObjectPosition]=\"data.image?.position\">\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\n    </div>\n  </div>\n</div>\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"] }]
+            args: [{ selector: 'simpo-covering-image-card', standalone: true, imports: [CommonModule, ImageDirectiveDirective, CornerDirective, TextBackgroundDirectiveDirective, SimpoButtonComponent, ObjectPositionDirective], template: "<div class=\"parent-tab\" [id]=\"componentId\" [simpoImageDirective]=\"styles?.image\">\r\n  <img [src]=\"data.image.url\" [alt]=\"data.image.altText\"  [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" class=\"w-100 img\" *ngIf=\"content.display.showImage\"  [simpoObjectPosition]=\"data.image?.position\">\r\n  <div class=\"ptb-1 content\" [simpoCorner]=\"styles?.corners\" [id]=\"componentId\" [simpoTextBackgroundDirective]=\"styles?.textBackground\">\r\n    <div class=\"heading-medium mb-1\" [innerHtml]=\"data.inputText[0].value\" *ngIf=\"content.display.showHeading\"></div>\r\n    <div class=\"body-desc\" [innerHtml]=\"data.inputText[01].value\" *ngIf=\"content.display.showContent\"></div>\r\n    <div *ngIf=\"content.display.showLink && content.display.linkType === 'Button'\">\r\n      <app-button-element [buttonContent]=\"data.button\" [buttonStyle]=\"button?.styles\" [sectionId]=\"componentId\" [buttonId]=\"button ? button.id : ''\" [color]=\"styles?.background?.accentColor\"></app-button-element>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".w-100{width:100%}.mb-1{margin-bottom:1rem!important}.content{position:relative;bottom:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:center;height:fit-content;min-height:100%}.parent-tab{position:relative;height:100%;width:100%}.img{position:absolute;height:100%;display:flex}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], styles: [{
@@ -708,11 +708,11 @@ class HeadingElementComponent {
         this.data = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HeadingElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: HeadingElementComponent, isStandalone: true, selector: "simpo-heading-element", inputs: { data: "data" }, ngImport: i0, template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: HeadingElementComponent, isStandalone: true, selector: "simpo-heading-element", inputs: { data: "data" }, ngImport: i0, template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\r\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HeadingElementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-heading-element', standalone: true, imports: [], template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\n" }]
+            args: [{ selector: 'simpo-heading-element', standalone: true, imports: [], template: "<h2 class=\"heading-large\" [innerHtml]=\"data\"></h2>\r\n" }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -822,11 +822,11 @@ class DeleteHoverElementComponent {
         this._eventService.delete.emit({ index: this.data });
     }
     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=\"edit-tab\">\n            <button (click)=\"editSection()\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <g clip-path=\"url(#clip0_1076_52409)\">\n                        <path\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\n                            fill=\"#0267c1\" />\n                    </g>\n                    <defs>\n                        <clipPath id=\"clip0_1076_52409\">\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\n                        </clipPath>\n                    </defs>\n                </svg>\n                <span class=\"edit-text\">\n                    Edit\n                </span>\n            </button>\n        </div>\n        <div class=\"vr-line\"></div>\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\n                      <path fill-rule=\"evenodd\"\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\n                          clip-rule=\"evenodd\"></path>\n                  </svg>\n              </button>\n          </div>\n      </div>\n  </section>\n</mat-dialog-content>\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 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"] }] }); }
+    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\">\r\n  <section class=\"hover-tab\">\r\n      <div class=\"tabs-section\">\r\n        <div class=\"edit-tab\">\r\n            <button (click)=\"editSection()\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <g clip-path=\"url(#clip0_1076_52409)\">\r\n                        <path\r\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n                            fill=\"#0267c1\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_1076_52409\">\r\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg>\r\n                <span class=\"edit-text\">\r\n                    Edit\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"vr-line\"></div>\r\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\r\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                      <path fill-rule=\"evenodd\"\r\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n                          clip-rule=\"evenodd\"></path>\r\n                  </svg>\r\n              </button>\r\n          </div>\r\n      </div>\r\n  </section>\r\n</mat-dialog-content>\r\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 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=\"edit-tab\">\n            <button (click)=\"editSection()\">\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <g clip-path=\"url(#clip0_1076_52409)\">\n                        <path\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\n                            fill=\"#0267c1\" />\n                    </g>\n                    <defs>\n                        <clipPath id=\"clip0_1076_52409\">\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\n                        </clipPath>\n                    </defs>\n                </svg>\n                <span class=\"edit-text\">\n                    Edit\n                </span>\n            </button>\n        </div>\n        <div class=\"vr-line\"></div>\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\n                      <path fill-rule=\"evenodd\"\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\n                          clip-rule=\"evenodd\"></path>\n                  </svg>\n              </button>\n          </div>\n      </div>\n  </section>\n</mat-dialog-content>\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"] }]
+            args: [{ selector: 'simpo-delete-hover-element', standalone: true, imports: [MatIconModule, MatDialogModule, CommonModule], template: "<mat-dialog-content class=\"mat-typography\">\r\n  <section class=\"hover-tab\">\r\n      <div class=\"tabs-section\">\r\n        <div class=\"edit-tab\">\r\n            <button (click)=\"editSection()\">\r\n                <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <g clip-path=\"url(#clip0_1076_52409)\">\r\n                        <path\r\n                            d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n                            fill=\"#0267c1\" />\r\n                    </g>\r\n                    <defs>\r\n                        <clipPath id=\"clip0_1076_52409\">\r\n                            <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n                        </clipPath>\r\n                    </defs>\r\n                </svg>\r\n                <span class=\"edit-text\">\r\n                    Edit\r\n                </span>\r\n            </button>\r\n        </div>\r\n        <div class=\"vr-line\"></div>\r\n          <div class=\"remainin-sections\"  *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\r\n              <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n                      class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n                      <path fill-rule=\"evenodd\"\r\n                          d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n                          clip-rule=\"evenodd\"></path>\r\n                  </svg>\r\n              </button>\r\n          </div>\r\n      </div>\r\n  </section>\r\n</mat-dialog-content>\r\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { index: [{
                 type: Input
             }], data: [{
@@ -835,16 +835,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Output
             }] } });
 
+class InputFieldsComponent {
+    constructor() {
+        this.opacity = 1;
+        this.ratingHoverIndex = null;
+        this.selectedDropdown = null;
+        this.enteredValue = null;
+        this.colorCode = this.generateColorBasedOnNumber(this.opacity ?? 0);
+    }
+    ngOnChanges(changes) {
+        this.colorCode = this.generateColorBasedOnNumber(this.opacity ?? 0);
+    }
+    handleMoneyInput(event) {
+        if (!(event.code.includes("Digit") || event.code.includes("Backspace")) || !event.target) {
+            event.preventDefault();
+            return;
+        }
+        event.target.value = "$" + Number(event.target.value.replaceAll(",", "").replaceAll("$", "")).toLocaleString();
+    }
+    get getTextColor() {
+        return (this.opacity ?? 0) < 50 ? '#FFF' : '#000';
+    }
+    interpolateColor(color1, color2, factor) {
+        if (factor === 0)
+            return color1;
+        if (factor === 1)
+            return color2;
+        const hex = (x) => this.padZero(Math.round(x).toString(16), 2);
+        const r1 = parseInt(color1.substring(1, 3), 16);
+        const g1 = parseInt(color1.substring(3, 5), 16);
+        const b1 = parseInt(color1.substring(5, 7), 16);
+        const r2 = parseInt(color2.substring(1, 3), 16);
+        const g2 = parseInt(color2.substring(3, 5), 16);
+        const b2 = parseInt(color2.substring(5, 7), 16);
+        const r = Math.ceil(r1 * (1 - factor) + r2 * factor);
+        const g = Math.ceil(g1 * (1 - factor) + g2 * factor);
+        const b = Math.ceil(b1 * (1 - factor) + b2 * factor);
+        return `#${hex(r)}${hex(g)}${hex(b)}`;
+    }
+    padZero(str, length) {
+        return str.length < length ? this.padZero("0" + str, length) : str;
+    }
+    generateColorBasedOnNumber(number) {
+        const factor = number / 100; // Assuming number ranges from 0 to 100
+        return this.interpolateColor("#000000", "#FFFFFF", factor);
+    }
+    selectDropdown(value) {
+        this.selectedDropdown = null;
+        this.enteredValue = value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: InputFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: InputFieldsComponent, isStandalone: true, selector: "simpo-input-fields", inputs: { feild: "feild", opacity: "opacity" }, usesOnChanges: true, ngImport: i0, template: "<section [ngSwitch]=\"feild.type\"  class=\"mt-15\">\r\n\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'text'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'address'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'email'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"email\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'password'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"password\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'rating'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <div class=\"d-flex\">\r\n            <span class=\"fa fa-star\" *ngFor=\"let _ of [].constructor(5); let idx = index\" [ngClass]=\"{'checked': idx < (ratingHoverIndex ?? feild.value)  }\" (mouseenter)=\"ratingHoverIndex = idx +1\" (mouseleave)=\"ratingHoverIndex = null\" (click)=\"feild.value = idx +1\"></span>\r\n        </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'date'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"date\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'checkbox'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <div class=\"d-flex align-items-center flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let checkbox of feild.options\">\r\n                <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n                    <input type=\"checkbox\" [attr.id]=\"checkbox.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n                    <label [attr.for]=\"checkbox.value\" class=\"mb-0 mt-1\">{{ checkbox.value }}</label>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'number'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"number\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'money'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"text\" class=\"p-2\" value=\"$\" (keydown)=\"handleMoneyInput($event)\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'desc'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <textarea class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\"></textarea>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2 position-relative\" *ngSwitchCase=\"'dropdown'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n\r\n        <input type=\"text\" readonly [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [value]=\"enteredValue\" (click)=\"selectedDropdown = feild.value\">\r\n        <div class=\"container-list position-absolute\" [hidden]=\"feild.value != selectedDropdown\">\r\n            <ng-container *ngFor=\"let option of feild.options\">\r\n                <div class=\"container\" [ngClass]=\"{'container-selected': option.value == selectedDropdown}\" (click)=\"selectDropdown(option.value)\">{{ option.value }}</div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</section>\r\n", styles: ["input,textarea,select{border-radius:5px;border:none;outline:none;padding:8px 8px 8px 10px!important;font-size:large;background-color:#000;font-weight:400}.fa-star{opacity:.3;cursor:pointer}.checked{opacity:1;color:#daa520}.input-field-label{color:#4a535b;font-size:16px;font-weight:400}.mt-15{margin-top:15px}.container-list{box-shadow:0 0 3px #999;background-color:#fff;border-radius:5px;padding:3px 0;font-weight:400;overflow:hidden;position:absolute;top:70px;width:100%}.container-list .container{cursor:pointer;padding:10px}.container-list .container-selected{color:#fff;background-color:purple}.container-list .container:hover{color:#fff;background-color:purple;width:100%;font-weight:600!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: InputFieldsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-input-fields', standalone: true, imports: [
+                        CommonModule,
+                    ], template: "<section [ngSwitch]=\"feild.type\"  class=\"mt-15\">\r\n\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'text'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'address'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'email'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"email\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'password'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"password\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'rating'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <div class=\"d-flex\">\r\n            <span class=\"fa fa-star\" *ngFor=\"let _ of [].constructor(5); let idx = index\" [ngClass]=\"{'checked': idx < (ratingHoverIndex ?? feild.value)  }\" (mouseenter)=\"ratingHoverIndex = idx +1\" (mouseleave)=\"ratingHoverIndex = null\" (click)=\"feild.value = idx +1\"></span>\r\n        </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'date'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"date\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'checkbox'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <div class=\"d-flex align-items-center flex-wrap\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let checkbox of feild.options\">\r\n                <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n                    <input type=\"checkbox\" [attr.id]=\"checkbox.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n                    <label [attr.for]=\"checkbox.value\" class=\"mb-0 mt-1\">{{ checkbox.value }}</label>\r\n                </div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'number'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"number\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'money'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <input type=\"text\" class=\"p-2\" value=\"$\" (keydown)=\"handleMoneyInput($event)\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\">\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'desc'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n        <textarea class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\"></textarea>\r\n    </div>\r\n    <div class=\"d-flex flex-column mr-2 position-relative\" *ngSwitchCase=\"'dropdown'\">\r\n        <label [attr.for]=\"feild.value\" class=\"input-field-label\">{{ feild.value }}</label>\r\n\r\n        <input type=\"text\" readonly [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [value]=\"enteredValue\" (click)=\"selectedDropdown = feild.value\">\r\n        <div class=\"container-list position-absolute\" [hidden]=\"feild.value != selectedDropdown\">\r\n            <ng-container *ngFor=\"let option of feild.options\">\r\n                <div class=\"container\" [ngClass]=\"{'container-selected': option.value == selectedDropdown}\" (click)=\"selectDropdown(option.value)\">{{ option.value }}</div>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n</section>\r\n", styles: ["input,textarea,select{border-radius:5px;border:none;outline:none;padding:8px 8px 8px 10px!important;font-size:large;background-color:#000;font-weight:400}.fa-star{opacity:.3;cursor:pointer}.checked{opacity:1;color:#daa520}.input-field-label{color:#4a535b;font-size:16px;font-weight:400}.mt-15{margin-top:15px}.container-list{box-shadow:0 0 3px #999;background-color:#fff;border-radius:5px;padding:3px 0;font-weight:400;overflow:hidden;position:absolute;top:70px;width:100%}.container-list .container{cursor:pointer;padding:10px}.container-list .container-selected{color:#fff;background-color:purple}.container-list .container:hover{color:#fff;background-color:purple;width:100%;font-weight:600!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { feild: [{
+                type: Input
+            }], opacity: [{
+                type: Input
+            }] } });
+
 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, DeleteHoverElementComponent], exports: [HoverElementsComponent, DeleteHoverElementComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent, DeleteHoverElementComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.3", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent], exports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoComponentModule, imports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SimpoComponentModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [HoverElementsComponent, DeleteHoverElementComponent],
-                    exports: [HoverElementsComponent, DeleteHoverElementComponent],
+                    imports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent],
+                    exports: [HoverElementsComponent, DeleteHoverElementComponent, InputFieldsComponent],
                 }]
         }] });
 
@@ -1611,7 +1674,7 @@ class FaqSectionComponent extends BaseSection {
         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", 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: 
+    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\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n      <div *ngFor=\"let text of data?.content?.inputText\" class=\"mb-2\">\r\n        <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n      </div>\r\n\r\n      <div *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\">\r\n        <p class=\"heading-medium\" data-toggle=\"collapse\" [attr.data-target]=\"'#collapse-' + i\">\r\n          {{itemData.inputText[0].value}}</p>\r\n        <div class=\"body-desc desc collapse multi-collapse\" [attr.id]=\"'collapse-' + i\">{{itemData.inputText[1].value}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".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"] }] }); }
 }
@@ -1639,7 +1702,7 @@ 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  <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"] }]
+                    ], template: "<section [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    <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\" [simpoLayout]=\"style?.layout\">\r\n      <div *ngFor=\"let text of data?.content?.inputText\" class=\"mb-2\">\r\n        <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n      </div>\r\n\r\n      <div *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\">\r\n        <p class=\"heading-medium\" data-toggle=\"collapse\" [attr.data-target]=\"'#collapse-' + i\">\r\n          {{itemData.inputText[0].value}}</p>\r\n        <div class=\"body-desc desc collapse multi-collapse\" [attr.id]=\"'collapse-' + i\">{{itemData.inputText[1].value}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".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: [{
@@ -1772,7 +1835,7 @@ class ImageCarouselSectionComponent extends BaseSection {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageCarouselSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\nclass=\"total-container\">\n  <div class=\"row\">\n    <div *ngFor=\"let text of data?.content?.inputText\">\n      <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n    </div>\n\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\">\n      <ol class=\"carousel-indicators\">\n        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n          data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\n      </ol>\n      <div class=\"carousel-inner\">\n        <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\n          <div class=\"row\">\n            <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\n              <img class=\"d-block position-relative\"style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block image-height-80vh\"style=\"width: 60%;\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n            <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\n              <img class=\"d-block w-100 image-height-40vh\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n          </div>\n        </div>\n      </div>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Previous</span>\n      </a>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Next</span>\n      </a>\n    </div>\n\n\n  </div>\n  <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>", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}.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: "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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\">\r\n  <div class=\"row\">\r\n    <div *ngFor=\"let text of data?.content?.inputText\">\r\n      <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n    </div>\r\n\r\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\">\r\n      <ol class=\"carousel-indicators\">\r\n        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n          data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n      </ol>\r\n      <div class=\"carousel-inner\">\r\n        <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n          <div class=\"row\">\r\n            <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n              <img class=\"d-block position-relative\"style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\r\n              <img class=\"d-block image-height-80vh\"style=\"width: 60%;\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\r\n              <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\r\n            </div>\r\n            <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n              <img class=\"d-block w-100 image-height-40vh\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"sr-only\">Previous</span>\r\n      </a>\r\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"sr-only\">Next</span>\r\n      </a>\r\n    </div>\r\n\r\n\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}.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: "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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageCarouselSectionComponent, decorators: [{
             type: Component,
@@ -1798,7 +1861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         OverlayDirective,
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective
-                    ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\nclass=\"total-container\">\n  <div class=\"row\">\n    <div *ngFor=\"let text of data?.content?.inputText\">\n      <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\n    </div>\n\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\">\n      <ol class=\"carousel-indicators\">\n        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n          data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\n      </ol>\n      <div class=\"carousel-inner\">\n        <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\n          <div class=\"row\">\n            <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\n              <img class=\"d-block position-relative\"style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block image-height-80vh\"style=\"width: 60%;\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n              <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n            <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\n              <img class=\"d-block w-100 image-height-40vh\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\n            </div>\n          </div>\n        </div>\n      </div>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Previous</span>\n      </a>\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n        <span class=\"sr-only\">Next</span>\n      </a>\n    </div>\n\n\n  </div>\n  <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>", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}.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: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\">\r\n  <div class=\"row\">\r\n    <div *ngFor=\"let text of data?.content?.inputText\">\r\n      <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n    </div>\r\n\r\n    <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\">\r\n      <ol class=\"carousel-indicators\">\r\n        <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n          data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n      </ol>\r\n      <div class=\"carousel-inner\">\r\n        <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n          <div class=\"row\">\r\n            <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n              <img class=\"d-block position-relative\"style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\r\n              <img class=\"d-block image-height-80vh\"style=\"width: 60%;\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\r\n              <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\">\r\n            </div>\r\n            <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n              <img class=\"d-block w-100 image-height-40vh\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n        <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"sr-only\">Previous</span>\r\n      </a>\r\n      <a *ngIf=\"screenWidth > 475\" class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n        <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n        <span class=\"sr-only\">Next</span>\r\n      </a>\r\n    </div>\r\n\r\n\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}.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: [{
@@ -1824,7 +1887,7 @@ class ImageGridSectionComponent extends BaseSection {
         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", 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: 
+    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\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n\r\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let img of content?.listItem?.data\"\r\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n          <div class=\"image-section\">\r\n            <img [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"  [simpoObjectPosition]=\"img.image.position\"\r\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" />\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section,.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"] }] }); }
 }
@@ -1855,7 +1918,7 @@ 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  <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"] }]
+                    ], template: "<section [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    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n\r\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let img of content?.listItem?.data\"\r\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n          <div class=\"image-section\">\r\n            <img [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\"  [simpoObjectPosition]=\"img.image.position\"\r\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" />\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section,.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: [{
@@ -1881,7 +1944,7 @@ class ImageSectionComponent extends BaseSection {
         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", 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: 
+    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)\"\r\n    class=\"total-container\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div>\r\n\r\n                <div class=\"image-section\" [ngStyle]=\"style?.fullWidth ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <img [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\" />\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@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"] }] }); }
 }
@@ -1911,7 +1974,7 @@ 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    <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"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n                <div *ngFor=\"let text of data?.content?.inputText\">\r\n                    <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n                </div>\r\n\r\n                <div class=\"image-section\" [ngStyle]=\"style?.fullWidth ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <img [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\" />\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".image{width:100%}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -1939,7 +2002,7 @@ class ServiceSectionComponent extends BaseSection {
         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", 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: 
+    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\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let service of content?.listItem?.data\">\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-below-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], 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"] }] }); }
 }
@@ -1967,7 +2030,7 @@ 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  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let service of content?.listItem?.data\">\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-below-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -1994,7 +2057,7 @@ class TeamMemberSectionComponent extends BaseSection {
         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", 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: 
+    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\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let service of content?.listItem?.data\">\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-below-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], 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"] }] }); }
 }
@@ -2022,7 +2085,7 @@ 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  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n  </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n        <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let service of content?.listItem?.data\">\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n            <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-below-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n            <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-top-of-image-card>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n            <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n              [componentId]=\"data?.id\"></simpo-covering-image-card>\r\n          </ng-container>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2045,7 +2108,7 @@ class TestimonialSectionComponent extends BaseSection {
         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", 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;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: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n        <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\">\r\n          <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\">\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\">\r\n              <div style=\"width: 90%; margin: auto;\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <img [src]=\"testimonial.image.url\" class=\"mb-1\">\r\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\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"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
@@ -2075,7 +2138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         PositionLayoutDirectiveDirective,
                         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;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"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n        <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\">\r\n          <ol class=\"carousel-indicators\">\r\n            <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n              data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n          </ol>\r\n          <div class=\"carousel-inner\">\r\n            <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n              [class.active]=\"i === 0\">\r\n              <div style=\"width: 90%; margin: auto;\">\r\n                <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n                [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n                  <img [src]=\"testimonial.image.url\" class=\"mb-1\">\r\n                  <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n                  <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n            <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Previous</span>\r\n          </a>\r\n          <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n            <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n            <span class=\"sr-only\">Next</span>\r\n          </a>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2161,7 +2224,7 @@ class VideoSectionComponent extends BaseSection {
         this.deleteSelected = this.delete;
     }
     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: 
+    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)\"\r\n    class=\"total-container\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large mb-1\" [innerHTML]=\"text.value\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(videoLink)\" frameborder=\"0\" allowfullscreen></iframe>\r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], 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"] }] }); }
 }
@@ -2190,7 +2253,7 @@ 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\n                </div>\n\n            </div>\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</section>\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
+                    ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"container-fluid main-section\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n\r\n                <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large mb-1\" [innerHTML]=\"text.value\">\r\n                </div>\r\n\r\n\r\n                <div class=\"video-section\" [ngStyle]=\"style?.fullScreen ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n                    <iframe class=\"video\"\r\n                        [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'video': style?.layout?.fit === 'screen'}\"\r\n                        [src]=\"dom.bypassSecurityTrustResourceUrl(videoLink)\" frameborder=\"0\" allowfullscreen></iframe>\r\n\r\n                </div>\r\n\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.video{width:100%;height:100vh}.main-section{width:100%;height:100%!important;display:block!important}.h-80{width:100%;height:80vh}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -2305,15 +2368,79 @@ class AddNewSectionComponent {
         this._eventService.addNewSectionClick.emit({ index: this.index, position: "ABOVE" });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AddNewSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: AddNewSectionComponent, isStandalone: true, selector: "simpo-add-new-section", inputs: { index: "index" }, ngImport: i0, template: "<section class=\"main_section\">\n  <div>\n      <div #displayElements></div>\n  </div>\n  <section class=\"add_btn\" (click)=\"addSection()\">\n      <mat-icon>add</mat-icon>\n      <span style=\"margin-left: 5px;\">Add Section</span>\n  </section>\n</section>\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: AddNewSectionComponent, isStandalone: true, selector: "simpo-add-new-section", inputs: { index: "index" }, ngImport: i0, template: "<section class=\"main_section\">\r\n  <div>\r\n      <div #displayElements></div>\r\n  </div>\r\n  <section class=\"add_btn\" (click)=\"addSection()\">\r\n      <mat-icon>add</mat-icon>\r\n      <span style=\"margin-left: 5px;\">Add Section</span>\r\n  </section>\r\n</section>\r\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AddNewSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-add-new-section', standalone: true, imports: [MatIcon], template: "<section class=\"main_section\">\n  <div>\n      <div #displayElements></div>\n  </div>\n  <section class=\"add_btn\" (click)=\"addSection()\">\n      <mat-icon>add</mat-icon>\n      <span style=\"margin-left: 5px;\">Add Section</span>\n  </section>\n</section>\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"] }]
+            args: [{ selector: 'simpo-add-new-section', standalone: true, imports: [MatIcon], template: "<section class=\"main_section\">\r\n  <div>\r\n      <div #displayElements></div>\r\n  </div>\r\n  <section class=\"add_btn\" (click)=\"addSection()\">\r\n      <mat-icon>add</mat-icon>\r\n      <span style=\"margin-left: 5px;\">Add Section</span>\r\n  </section>\r\n</section>\r\n", styles: [".main_section{width:100%;padding:2% 0;overflow-y:scroll}.main_section:hover{border:3px solid #025eb0!important}.add_btn{font-family:lexandReg;font-size:14px;color:#3f3b3b;font-style:normal;font-weight:400;display:flex;justify-content:center;align-items:center;height:150px;width:100%;cursor:pointer;font-size:20px;font-weight:600;color:#09c}.add_btn img{width:2%}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }], propDecorators: { index: [{
                 type: Input
             }] } });
 
+class ContactUsComponent extends BaseSection {
+    constructor(_eventService) {
+        super();
+        this._eventService = _eventService;
+        this.buttonId = '';
+    }
+    ngOnInit() {
+        this.deleteSelected = this.delete;
+        this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        this.button = this.data?.action?.buttons[0];
+        this.buttonId = (this.data ? this.data.id : '') + (this.button ? this.button.id : '');
+        if (!this.styles || !this.content)
+            return;
+    }
+    getWidthByField(field) {
+        if (field.type == "address") {
+            return ((this.content?.contactField.fields.filter((add) => add.type == "address").length ?? 1) % 2) ? '96' : '48';
+        }
+        return field.type == "desc" ? '96' : '48';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\">\r\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n        [simpoBorder]=\"styles?.border\">\r\n        <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n            <div class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n                <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;\">\r\n                    <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                        <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"></simpo-input-fields>\r\n                    </ng-container>\r\n                    <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\">{{ content?.contactField?.button }}</button>\r\n                </div>\r\n\r\n                <div class=\"d-flex flex-column col-5 pt-5\">\r\n                    <div  *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n                        [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" ></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity"] }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContactUsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-contact-us', standalone: true, imports: [
+                        SimpoElementsModule,
+                        CommonModule,
+                        SimpoComponentModule,
+                        MatGridListModule,
+                        SimpoButtonComponent,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        BannerContentFitDirective,
+                        BorderDirective,
+                        ButtonDirectiveDirective,
+                        ColumnDirectiveDirective,
+                        ContainerFitDirective,
+                        simpoConetenAlignmentDirective,
+                        ContentFitDirective,
+                        CornerDirective,
+                        SimpoFooterLayoutDirective,
+                        HoverDirective,
+                        ImageDirectiveDirective,
+                        OverlayDirective,
+                        PositionLayoutDirectiveDirective,
+                        TextBackgroundDirectiveDirective,
+                        ObjectPositionDirective,
+                        ButtonDirectiveDirective
+                    ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    class=\"total-container\">\r\n    <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n        [simpoBorder]=\"styles?.border\">\r\n        <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n            <div class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n                <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;\">\r\n                    <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n                        <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"></simpo-input-fields>\r\n                    </ng-container>\r\n                    <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\">{{ content?.contactField?.button }}</button>\r\n                </div>\r\n\r\n                <div class=\"d-flex flex-column col-5 pt-5\">\r\n                    <div  *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n                        [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" ></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</div>\r\n", styles: [".send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of simpo-ui
  */
@@ -2324,5 +2451,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, 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 };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerContentFitDirective, BannerSectionComponent, BorderDirective, ButtonDirectiveDirective, ChannelType, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, 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