npm - simpo-component-library - Versions diffs - 1.4.11 → 1.4.13 - Mend

simpo-component-library 1.4.11 → 1.4.13

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

Files changed (102) hide show

package/esm2022/lib/sections/faq-section/faq-section.component.mjs CHANGED Viewed

@@ -58,12 +58,12 @@ export class FaqSectionComponent extends BaseSection {
             this._eventService.editSection.emit({ data: this.data });
         }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FaqSectionComponent, deps: [{ token: i1.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\" \r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage\">\r\n      <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n        [simpoLayout]=\"style?.layout\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span>{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\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\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}.heading-large{margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i2.HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i4.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i5.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FaqSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FaqSectionComponent, isStandalone: true, selector: "simpo-faq-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" \r\n  class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n    [simpoBorder]=\"style?.border\" [simpoAnimation]=\"style?.animation\">\r\n\r\n    <div *ngIf=\"!content?.image?.showImage\">\r\n      <div class=\"container-fluid flex-col\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n        [simpoLayout]=\"style?.layout\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\"(click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span style=\"display: block;\">{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\" style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"content?.image?.showImage\" class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoLayout]=\"style?.layout\" [simpoPositionLayoutDirective]=\"style?.positionLayout\"\r\n      [ngClass]=\"{ 'align-items-stretch': style?.positionLayout?.value === 'left' || style?.positionLayout?.value === 'right' }\">\r\n\r\n\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\"\r\n        [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"style?.contentAlignment\">\r\n\r\n        <div *ngFor=\"let text of data?.content?.inputText\" class=\"\" [simpoContentTitleSpace]=\"headingSpace\">\r\n          <simpo-heading-element [data]=\"text.value\"></simpo-heading-element>\r\n        </div>\r\n\r\n        <div [simpoContainerAlignment]=\"stylesLayout\" *ngFor=\"let itemData of content?.listItem?.data;let i = index\" class=\"data\" (click)=\"toggleContent(i)\">\r\n          <p class=\"heading-medium d-flex align-items-center justify-content-between position-relative\" data-toggle=\"collapse\">\r\n            <span>{{itemData.inputText[0].value}}</span>\r\n            <mat-icon *ngIf=\"unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_up</mat-icon>\r\n            <mat-icon *ngIf=\"!unCollapsedList.includes(i)\"style=\"position: absolute; right: 0px;\">keyboard_arrow_down</mat-icon>\r\n          </p>\r\n          <div class=\"body-large desc multi-collapse\" [ngClass]=\"{'collapse': unCollapsedList.includes(i)}\" [innerHTML]=\"itemData.inputText[1].value\"></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\r\n        <img [src]=\"content?.image?.url\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n          [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"style?.corners\"\r\n          [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\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\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}.heading-large{margin-top:20px}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i2.HeadingElementComponent, selector: "simpo-heading-element", inputs: ["data"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i4.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i5.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FaqSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FaqSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-faq-section', standalone: true, imports: [
                         SimpoElementsModule,

package/esm2022/lib/sections/features-section/features-section.component.mjs CHANGED Viewed

@@ -46,10 +46,10 @@ export class FeaturesSectionComponent extends BaseSection {
             this._eventService.editSection.emit({ data: this.data });
         }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturesSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\" (click)=\"editSection()\">\r\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\">\r\n        <div class=\"image\">\r\n          <img [src]=\"currentData?.image?.url\" alt=\"\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          loading=\"lazy\">\r\n        </div>\r\n        <div class=\"content-heading heading-large\"  [id]=\"data?.id\">\r\n          {{currentData?.inputText?.[1]?.value}}\r\n          <div class=\"content-description body-large mt-5\">\r\n            {{currentData?.inputText?.[2]?.value}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturesSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturesSectionComponent, isStandalone: true, selector: "simpo-features-section", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n  class=\"total-container\" [simpoBorder]=\"styles?.border\" (click)=\"editSection()\">\r\n  <div  #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\">\r\n    <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"row\" *ngIf=\"screenWidth > 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"row-container\" *ngIf=\"screenWidth <= 475\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-medium mb-1\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n        <div class=\" box d-flex justify-content-between mt-5 mb-5\">\r\n          <div *ngFor=\"let tab of content?.listItem?.data; let index = index\">\r\n            <div class=\"tab\" [ngClass]=\"{'active': index === selectedTabIndex}\" (click)=\"changetab(index)\">\r\n              {{ tab.inputText[0].value }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"content d-flex g-15 mt-5\">\r\n        <div class=\"image\">\r\n          <img [src]=\"currentData?.image?.url\" alt=\"\"\r\n          [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"currentData?.image?.position\"\r\n          [simpoCorner]=\"styles?.corners\"\r\n          class=\"d-block mx-lg-auto img-fluid h-100\"\r\n          loading=\"lazy\">\r\n        </div>\r\n        <div class=\"content-heading heading-large\"  [id]=\"data?.id\">\r\n          {{currentData?.inputText?.[1]?.value}}\r\n          <div class=\"content-description body-large mt-5\">\r\n            {{currentData?.inputText?.[2]?.value}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.content{padding:0px 10rem;width:90%;gap:3rem}.image{width:40%;flex:1}.image img{width:100%}.content-heading{width:60%;text-align:start}.content-description{width:100%;text-align:start}.active{font-weight:700;letter-spacing:.8px;border-bottom:2px solid white;padding-bottom:20px}.tab{letter-spacing:.8px;border-bottom:2px solid;padding-bottom:20px;cursor:pointer}@media only screen and (max-width: 768px){.content{flex-direction:column;padding:0 2rem;width:100%;gap:2rem}.image{order:-1;width:100%}.image img,.content-heading{width:100%}.box{overflow-x:scroll;gap:10%;margin:auto!important;padding:10px;width:85%!important}.row-container{width:100%!important}.tab{letter-spacing:.5px;border-bottom:1px solid;padding-bottom:10px;cursor:pointer}.image{width:100%}}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { 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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturesSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturesSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-features-section', standalone: true, imports: [
                         BackgroundDirective,

package/esm2022/lib/sections/footer-section/footer-section.component.mjs CHANGED Viewed

@@ -50,10 +50,10 @@ export class FooterSectionComponent extends BaseSection {
             this._eventService.editSection.emit({ data: this.data });
         }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FooterSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc additional-details\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n                    <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n                    align-items-end\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n                    <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n                    <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}.additional-details{font-size:16px}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i2.SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: i3.SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i5.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i6.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FooterSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc additional-details\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n                <div class=\"d-flex flex-column flex-grow\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n                            [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n                    <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n                    align-items-end\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center\">\r\n                <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n                    <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\"\r\n                            class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\r\n                    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n            <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n                class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center\">\r\n                <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n                    <div class=\"heading-medium\">\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n                            <span>\r\n                                <span></span>\r\n                                <b>{{content?.siteName?.value}}</b>\r\n                            </span>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                                <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n                                    <b\r\n                                        [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n                                *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n                                <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n                                    <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                                    loading=\"lazy\">\r\n                                </div>\r\n                            </div>\r\n                        </ng-container>\r\n                    </div>\r\n                    <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                        {{content?.additionalDetails?.value}}\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n                    <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                        <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n                            <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                    <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                                </div>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n                            [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n                            <div *ngFor=\"let button of data?.action?.buttons\">\r\n                                <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n                        <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo</a></div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </footer>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n        <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}.additional-details{font-size:16px}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i2.SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: i3.SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i5.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i6.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FooterSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FooterSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-footer-section', standalone: true, imports: [
                         SimpoElementsModule,

package/esm2022/lib/sections/header-text/header-text.component.mjs CHANGED Viewed

@@ -43,10 +43,10 @@ export class HeaderTextComponent extends BaseSection {
             return;
         // this.styles.layout.bannerImageDisplay = this.content.image.showImage;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HeaderTextComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: HeaderTextComponent, isStandalone: true, selector: "simpo-header-text", 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=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{ 'align-items-center': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n            <div class=\"col px-5\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                    <div *ngIf=\"item.label === 'Tagline' || item.label === 'Heading'\" [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 class=\"col px-5\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                    <div *ngIf=\"item.label === 'Subtext'\" [innerHTML]=\"item.value\" class=\"body-large\">\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n              ]\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                            [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                            [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.gap-15{gap:15px}.btn-primary{border:none}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.flex-column{flex-direction:column!important}.d-flex{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i2.SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i4.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i5.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderTextComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: HeaderTextComponent, isStandalone: true, selector: "simpo-header-text", 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=\"flex-column row g-2\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n            [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n            [ngClass]=\"{ 'align-items-center': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\r\n            <div class=\"col px-5\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                    <div *ngIf=\"item.label === 'Tagline' || item.label === 'Heading'\" [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 class=\"col px-5\" [id]=\"data?.id\">\r\n                <div *ngFor=\"let item of content?.inputText\">\r\n                    <div *ngIf=\"item.label === 'Subtext'\" [innerHTML]=\"item.value\" class=\"body-large\">\r\n                    </div>\r\n                </div>\r\n\r\n\r\n                <div *ngIf=\"data?.action && data?.action?.display\" class=\"d-flex gap-2 d-md-flex mt-15\" [ngClass]=\"[\r\n                styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n                styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n                styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n              ]\">\r\n                    <div *ngFor=\"let button of data?.action?.buttons\">\r\n                        <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n                            [buttonId]=\"button.id\" [sectionId]=\"data?.id\"\r\n                            [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n            <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n        </div>\r\n        <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n            <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px;margin-top:15px}.gap-15{gap:15px}.btn-primary{border:none}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.flex-column{flex-direction:column!important}.d-flex{justify-content:center}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i2.SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i4.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i5.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { 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: HeaderTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: HeaderTextComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-header-text', standalone: true, imports: [
                         SimpoElementsModule,

package/esm2022/lib/sections/image-carousel-section/image-carousel-section.component.mjs CHANGED Viewed

@@ -61,12 +61,12 @@ export class ImageCarouselSectionComponent extends BaseSection {
             this._eventService.editSection.emit({ data: this.data });
         }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageCarouselSectionComponent, deps: [{ token: i1.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)\"\r\nclass=\"total-container\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\r\n      <div *ngFor=\"let text of data?.content?.inputText\">\r\n        <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\"  [innerHTML]=\"text.value\"></div>\r\n      </div>\r\n\r\n      <div id=\"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\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n                <img [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\"\r\n                loading=\"lazy\">\r\n                <img [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" style=\"width: 60%;\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n                loading=\"lazy\">\r\n                <!-- <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n                <img [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\"\r\n                loading=\"lazy\">\r\n              </div>\r\n              <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n                <img class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n                loading=\"lazy\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n          <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Previous</span>\r\n        </a>\r\n        <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n          <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Next</span>\r\n        </a>\r\n      </div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.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}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "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: i3.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i4.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageCarouselSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", 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\" (click)=\"editSection()\">\r\n  <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n    <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" >\r\n      <div *ngFor=\"let text of data?.content?.inputText\">\r\n        <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\"  [innerHTML]=\"text.value\"></div>\r\n      </div>\r\n\r\n      <div id=\"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\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n                <img [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\"\r\n                loading=\"lazy\">\r\n                <img [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" style=\"width: 60%;\"  [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n                loading=\"lazy\">\r\n                <!-- <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n                <img [simpoImageDirective]=\"style?.image\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\"\r\n                loading=\"lazy\">\r\n              </div>\r\n              <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n                <img class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\r\n                loading=\"lazy\">\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n          <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Previous</span>\r\n        </a>\r\n        <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n          <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n          <span class=\"sr-only\">Next</span>\r\n        </a>\r\n      </div>\r\n\r\n\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.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}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "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: i3.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i4.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageCarouselSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageCarouselSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-image-carousel-section', standalone: true, imports: [
                         SimpoElementsModule,

package/esm2022/lib/sections/image-grid-section/image-grid-section.component.mjs CHANGED Viewed

@@ -46,12 +46,12 @@ export class ImageGridSectionComponent extends BaseSection {
             this._eventService.editSection.emit({ data: this.data });
         }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageGridSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", 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\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\"  [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n\r\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let img of content?.listItem?.data\"\r\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n          <div class=\"image-section\">\r\n            <img [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\"\r\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\"/>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section{width:100%}.image-section img{width:100%;object-fit:cover}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "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: i3.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i4.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageGridSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageGridSectionComponent, isStandalone: true, selector: "simpo-image-grid-section", inputs: { data: "data", index: "index", edit: "edit", 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\" (click)=\"editSection()\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n        [ngStyle]=\"style?.removeGaps && style?.fullWidth ? {'padding': '0px'} : style?.removeGaps ? {'padding': '0px 15px'} : style?.fullWidth ? {'padding': '0px'} : {}\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large\"  [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n        </div>\r\n\r\n\r\n        <div class=\"main-image-section\" [simpoColumnDirective]=\"style?.size\" [id]=\"data?.id\"\r\n          *ngFor=\"let img of content?.listItem?.data\"\r\n          [ngStyle]=\"style?.removeGaps ? {'padding': '0px', 'margin': '0px'} : {}\">\r\n          <div class=\"image-section\">\r\n            <img [simpoImageDirective]=\"style?.image\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [class]=\"data?.id+img.image.id\" [simpoObjectPosition]=\"img.image.position\"\r\n              [src]=\"img.image.url\" [alt]=\"img.image.altText\" loading=\"lazy\"/>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.main-image-section{margin-bottom:1.5rem}.image-section{width:100%}.image-section img{width:100%;object-fit:cover}.mb-1{margin-bottom:1.5rem!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "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: i3.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i4.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageGridSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageGridSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-image-grid-section', standalone: true, imports: [
                         SimpoElementsModule,

package/esm2022/lib/sections/image-section/image-section.component.mjs CHANGED Viewed

@@ -42,12 +42,12 @@ export class ImageSectionComponent extends BaseSection {
             this._eventService.editSection.emit({ data: this.data });
         }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageSectionComponent, deps: [{ token: i1.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)\"\r\n    class=\"total-container\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth === true}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div  [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\">\r\n                    <img [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\"/>\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%}.image-section img{object-fit:cover}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:50vh;border-radius:1rem}.main-section{min-height:auto!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i4.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ImageSectionComponent, isStandalone: true, selector: "simpo-image-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, 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\" (click)=\"editSection()\">\r\n    <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n        <div class=\"main-section\" [ngClass]=\"{'px-0 py-0': style?.fullWidth === true}\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n            [simpoLayout]=\"style?.layout\">\r\n            <div  [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\">\r\n                    <img [ngClass]=\"{'h-80': style?.layout?.fit === 'content', 'image': style?.layout?.fit === 'screen'}\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n                        [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [simpoCorner]=\"style?.corners\" [simpoObjectPosition]=\"content?.image?.position\"\r\n                        [id]=\"data?.id\"\r\n                        loading=\"lazy\"/>\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%}.image-section img{object-fit:cover}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media only screen and (max-width: 475px){.h-80{height:50vh;border-radius:1rem}.main-section{min-height:auto!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i3.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i4.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ImageSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-image-section', standalone: true, imports: [
                         SimpoElementsModule,

package/esm2022/lib/sections/location-section/location-section.component.mjs CHANGED Viewed

@@ -137,12 +137,12 @@ export class LocationSectionComponent extends BaseSection {
             this._eventService.editSection.emit({ data: this.data });
         }, 100);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: LocationSectionComponent, deps: [{ token: i0.NgZone }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: LocationSectionComponent, isStandalone: true, selector: "simpo-location-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6 display-flex justify-center\">\r\n        <div class=\"map\" [simpoCorner]=\"styles?.corners\" id=\"map\"></div>\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          <div class=\"body-large\" [innerHTML]=\"content?.address?.name\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\">\r\n          <div *ngFor=\"let input of item?.inputText;let i = index\">\r\n            <div [innerHTML]=\"input.value\" [ngClass]=\"i == 0  ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".map{width:90%;height:400px}.display-flex{display:flex}.bg-map{width:100%;height:100%}html,body,.map-container{height:100%;margin:0;padding:0}.justify-center{justify-content:center}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.background-map{display:block!important;position:relative;padding-top:0!important;padding-bottom:0!important}.data{position:absolute;top:10%;left:3%;padding:20px}agm-map{height:calc(100vh + -0px)}@media screen and (max-width: 475px){.map{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "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: i3.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i4.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LocationSectionComponent, deps: [{ token: i0.NgZone }, { token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: LocationSectionComponent, isStandalone: true, selector: "simpo-location-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n  <div class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n    <div class=\"row g-5\" [id]=\"data?.id\"\r\n      [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\">\r\n      <div class=\"col-10 col-sm-8 col-lg-6 display-flex justify-center\">\r\n        <div class=\"map\" [simpoCorner]=\"styles?.corners\" id=\"map\"></div>\r\n      </div>\r\n      <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15\">\r\n        <div *ngFor=\"let item of content?.inputText\">\r\n          <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          <div class=\"body-large\" [innerHTML]=\"content?.address?.name\"></div>\r\n        </div>\r\n        <div *ngFor=\"let item of content?.listItem?.data\">\r\n          <div *ngFor=\"let input of item?.inputText;let i = index\">\r\n            <div [innerHTML]=\"input.value\" [ngClass]=\"i == 0  ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".map{width:90%;height:400px}.display-flex{display:flex}.bg-map{width:100%;height:100%}html,body,.map-container{height:100%;margin:0;padding:0}.justify-center{justify-content:center}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.background-map{display:block!important;position:relative;padding-top:0!important;padding-bottom:0!important}.data{position:absolute;top:10%;left:3%;padding:20px}agm-map{height:calc(100vh + -0px)}@media screen and (max-width: 475px){.map{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "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: i3.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: i4.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: LocationSectionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: LocationSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-location-section', standalone: true, imports: [
                         SimpoElementsModule,