npm - simpo-component-library - Versions diffs - 3.6.660 → 3.6.662 - Mend

simpo-component-library 3.6.660 → 3.6.662

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 (230) hide show

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

@@ -68,7 +68,7 @@ export class FooterSectionComponent extends BaseSection {
         return showHeading;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterSectionComponent, deps: [{ token: i1.EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\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-start\">\r\n                <div class=\"d-flex flex-column flex-grow info_icon\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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=\"mt-2\">\r\n                        <div class=\"body-desc additional-details\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                            <!-- {{content?.additionalDetails?.value}} -->\r\n                             <div [innerHtml]=\"content?.additionalDetails?.value\"></div>\r\n                        </div>\r\n                        <div class=\"mt-2 d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                            <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                                <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                    <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                        <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [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>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column get-in-touch-center\" *ngIf=\"content?.getInTouch?.display\">\r\n                    <ng-container *ngFor=\"let item of content?.getInTouch?.inputText\">\r\n                        <div [ngClass]=\"item.label.includes('Title') ? 'sectionTitle' : ''\" class=\"center_group mb-3\" [simpoColor]=\"style?.background?.color\">\r\n                            {{item?.value}}\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"d-flex split-details-right\">\r\n                  <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n                  <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5 justify-space\" *ngIf=\"data?.action && data?.action?.display\">\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 *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\" [edit]=\"edit\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></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\">Powered by <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo.ai</a></div>\r\n                    </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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\" [color]=\"style?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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    \r\n    <!-- <ng-container *ngIf=\"style?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container> -->\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\r\n<ng-template #navbarLinksTemplate>\r\n  <div style=\"margin-top: 10px;\">\r\n    <p class=\"page-heading\" [simpoColor]=\"style?.background?.color\" *ngIf=\"checkFooter\" [innerHTML]=\"content?.linksTitle?.value || 'Pages'\"></p>\r\n    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <p class=\"page-data\" [simpoColor]=\"style?.background?.color\" (click)=\"changePage(item)\"\r\n        style=\"cursor: pointer;\">{{item?.label}}</p>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\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}.split-details-right{display:block!important;margin-top:15px}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.page-heading{font-size:18px!important;font-weight:600}.page-data{line-height:normal;font-size:16px!important;font-weight:500}.split-details-right{gap:55px}.justify-space{justify-content:space-between}.sectionTitle{font-size:20px;font-weight:600}.get-in-touch-center{width:20%}.touch_text{font-size:16px;font-weight:400}.center_group{line-height:25px}@media only screen and (min-width: 320px) and (max-width: 1000px){.get-in-touch-center{width:100%;margin-top:10px}.info_icon{order:1}.get-in-touch-center{order:3}.split-details-right{order:2}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i2.SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { kind: "component", type: i3.SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "isEcommerce"], 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"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n    <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n    #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\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-start\">\r\n                <div class=\"d-flex flex-column flex-grow info_icon\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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=\"mt-2\">\r\n                        <div class=\"body-desc additional-details\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n                            <!-- {{content?.additionalDetails?.value}} -->\r\n                             <div [innerHtml]=\"content?.additionalDetails?.value\"></div>\r\n                        </div>\r\n                        <div class=\"mt-2 d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                        [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                            <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                                <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                                    <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n                                        <simpo-socia-icons [iconColor]=\"data?.styles?.background?.accentColor\" [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>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d-flex flex-column get-in-touch-center\" *ngIf=\"content?.getInTouch?.display\">\r\n                    <ng-container *ngFor=\"let item of content?.getInTouch?.inputText\">\r\n                        <div [ngClass]=\"item.label.includes('Title') ? 'sectionTitle' : ''\" class=\"center_group mb-3\" [simpoColor]=\"style?.background?.color\">\r\n                            {{item?.value}}\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n                <div class=\"d-flex split-details-right\">\r\n                  <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n                  <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5 justify-space\" *ngIf=\"data?.action && data?.action?.display\">\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 *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\" [edit]=\"edit\"\r\n                                    [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></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\">Powered by <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n                                style=\"text-decoration: underline;\">Simpo.ai</a></div>\r\n                    </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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [socialIconData]=\"item\" [color]=\"style?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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\" [spacingHorizontal]=\"stylesLayout\">\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 loading=\"lazy\"  [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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 loading=\"lazy\"  [src]=\"content?.logo?.image?.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 [iconColor]=\"data?.styles?.background?.accentColor\" [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\" [backgroundInfo]=\"data?.styles?.background\"></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    \r\n    <!-- <ng-container *ngIf=\"style?.devider?.display\">\r\n      <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n    </ng-container> -->\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\r\n<ng-template #navbarLinksTemplate>\r\n  <div style=\"margin-top: 10px;\">\r\n    <p class=\"page-heading\" [simpoColor]=\"style?.background?.color\" *ngIf=\"checkFooter\" [innerHTML]=\"content?.linksTitle?.value || 'Pages'\"></p>\r\n    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <p class=\"page-data\" [simpoColor]=\"style?.background?.color\" (click)=\"changePage(item)\"\r\n        style=\"cursor: pointer;\">{{item?.label}}</p>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\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}.split-details-right{display:block!important;margin-top:15px}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.page-heading{font-size:18px!important;font-weight:600}.page-data{line-height:normal;font-size:16px!important;font-weight:500}.split-details-right{gap:55px}.justify-space{justify-content:space-between}.sectionTitle{font-size:20px;font-weight:600}.get-in-touch-center{width:20%}.touch_text{font-size:16px;font-weight:400}.center_group{line-height:25px}@media only screen and (min-width: 320px) and (max-width: 1000px){.get-in-touch-center{width:100%;margin-top:10px}.info_icon{order:1}.get-in-touch-center{order:3}.split-details-right{order:2}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: i2.SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "isFullWidth", "disabled", "loading"] }, { kind: "component", type: i3.SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "isEcommerce"], 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"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FooterSectionComponent, decorators: [{
             type: Component,