simpo-component-library 0.6.7 → 0.6.9

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 (15) hide show
  1. package/esm2022/lib/elements/socia-icons/socia-icons.component.mjs +17 -3
  2. package/esm2022/lib/sections/footer-section/footer-section.component.mjs +3 -3
  3. package/esm2022/lib/sections/image-carousel-section/image-carousel-section.component.mjs +12 -3
  4. package/esm2022/lib/sections/navbar-section/navbar-section.component.mjs +3 -3
  5. package/esm2022/lib/sections/testimonial-section/testimonial-section.component.mjs +3 -3
  6. package/fesm2022/simpo-component-library.mjs +33 -10
  7. package/fesm2022/simpo-component-library.mjs.map +1 -1
  8. package/lib/directive/background-directive.d.ts +1 -1
  9. package/lib/directive/button-directive.directive.d.ts +1 -1
  10. package/lib/directive/color.directive.d.ts +1 -1
  11. package/lib/elements/socia-icons/socia-icons.component.d.ts +4 -0
  12. package/lib/sections/image-carousel-section/image-carousel-section.component.d.ts +2 -0
  13. package/package.json +1 -1
  14. package/simpo-component-library-0.6.9.tgz +0 -0
  15. package/simpo-component-library-0.6.7.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -787,6 +787,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
787
787
  class SociaIconsComponent {
788
788
  constructor() {
789
789
  this.ChannelType = ChannelType;
790
+ this.socialMediaLinks = {
791
+ FACEBOOK: 'https://www.facebook.com/profile.php?id=61555029350349',
792
+ INSTAGRAM: 'https://www.instagram.com/simpo.ai?igsh=MThlODJpcWJ6ZGxkdg==',
793
+ LINKEDIN: 'https://www.linkedin.com/company/simpo-ai/',
794
+ };
790
795
  this.screenWidth = 475;
791
796
  this.getScreenSize();
792
797
  }
@@ -797,15 +802,24 @@ class SociaIconsComponent {
797
802
  this.screenWidth = window.innerWidth;
798
803
  }
799
804
  }
805
+ openLink(type) {
806
+ const link = this.socialMediaLinks[type];
807
+ if (this.socialIconData?.link) {
808
+ window.open(this.socialIconData.link, '_blank');
809
+ }
810
+ else {
811
+ window.open(link, '_blank');
812
+ }
813
+ }
800
814
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SociaIconsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
801
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SociaIconsComponent, isStandalone: true, selector: "simpo-socia-icons", inputs: { socialIconData: "socialIconData", color: "color", sectionId: "sectionId" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div *ngIf=\"socialIconData?.type == ChannelType.FACEBOOK\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M10.4375 21.8784C5.65941 21.1274 2 16.9877 2 12 2 6.48086 6.48086 2 12 2c5.5191 0 10 4.48086 10 10 0 4.9877-3.6594 9.1274-8.4375 9.8784v-6.9878h2.3301L16.3359 12h-2.7734v-1.8758c0-.79084.3874-1.5617 1.6296-1.5617h1.261V6.10156s-1.1443-.19531-2.2385-.19531c-2.2842 0-3.7771 1.38438-3.7771 3.89063V12H7.89844v2.8906h2.53906v6.9878Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.TWITTER\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path\r\n d=\"M13.6756 10.6218 20.2324 3h-1.5537l-5.6933 6.61788L8.43817 3H3.1935l6.8763 10.0074L3.1935 21h1.55384l6.01226-6.9887L15.5618 21h5.2447l-7.1313-10.3782h.0004Zm-2.1282 2.4738-.6967-.9965-5.54349-7.92939h2.38662l4.47367 6.39919.6967.9966 5.8152 8.318h-2.3866l-4.7454-6.7875v-.0004Z\">\r\n </path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.LINKEDIN\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M19.5565 2C20.9051 2 22 3.09492 22 4.44352V19.5565C22 20.9051 20.9051 22 19.5565 22H4.44352C3.09492 22 2 20.9051 2 19.5565V4.44352C2 3.09492 3.09488 2 4.44352 2H19.5565ZM8.26801 18.5343V9.71723H5.33676v8.81707h2.93125Zm10.56789 0v-5.0562c0-2.7083-1.446-3.96822-3.3742-3.96822-1.5549 0-2.2513.85512-2.6413 1.45572V9.71723H9.88988c.03887.82737 0 8.81707 0 8.81707h2.93052v-4.9241c0-.2636.0189-.527.0966-.7154.2115-.5264.694-1.0716 1.5037-1.0716 1.0599 0 1.4846.8088 1.4846 1.9936v4.7175h2.9306ZM6.82219 5.4657c-1.00289 0-1.65813.65934-1.65813 1.52352 0 .84601.63532 1.52351 1.61934 1.52351 1.02207 0 1.67719-.6775 1.67719-1.52351-.01895-.86297-.63442-1.52164-1.6384-1.52352Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.YOUTUBE\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M21.0053 5.6191c.5996.6477.7946 2.11879.7946 2.11879S22 9.46405 22 11.1908v1.618c0 1.7268-.2001 3.453-.2001 3.453s-.1956 1.4705-.7946 2.1169c-.6859.7654-1.4461.8449-1.8754.8897-.0469.0049-.0899.0094-.1283.0143-2.799.2145-7.0016.222-7.0016.222s-5.20038-.0507-6.80025-.2145c-.07572-.0151-.16746-.0268-.27131-.0402-.50666-.0651-1.3018-.1673-1.93375-.8719-.59957-.6465-.79463-2.1169-.79463-2.1169S2 14.5356 2 12.8082v-1.618c0-1.72615.20006-3.45231.20006-3.45231s.19569-1.47109.79463-2.11879c.68895-.76815 1.4516-.84541 1.88002-.88881.04511-.00457.08651-.00876.12373-.01335C7.79681 4.5 11.995 4.5 11.995 4.5h.0094s4.1982 0 6.9972.21694c.0372.00459.0786.00879.1238.01336.4285.0434 1.1916.12069 1.8799.8888Zm-5.251 6.3832-6.25196 3.7512V8.25117l6.25196 3.75113Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.INSTAGRAM\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M12 2c5.5191 0 10 4.48086 10 10 0 5.5191-4.4809 10-10 10-5.51914 0-10-4.4809-10-10C2 6.48086 6.48086 2 12 2Zm0 3.75c-1.6974 0-1.9102.00719-2.57688.03762-.66523.03035-1.11957.13601-1.51714.29051-.41098.15972-.75953.37343-1.107.72089-.34746.34746-.56117.69602-.72089 1.107-.1545.39753-.26012.85187-.29051 1.5171C5.75719 10.0898 5.75 10.3026 5.75 12s.00719 1.9102.03758 2.5769c.03039.6652.13601 1.1195.29051 1.5171.15972.411.37343.7595.72089 1.107.34747.3475.69602.5612 1.107.7209.39757.1545.85191.2601 1.51714.2905.66668.0304.87948.0376 2.57688.0376s1.9102-.0072 2.5769-.0376c.6652-.0304 1.1195-.136 1.5171-.2905.411-.1597.7595-.3734 1.107-.7209.3475-.3475.5612-.696.7209-1.107.1545-.3976.2601-.8519.2905-1.5171.0304-.6667.0376-.8795.0376-2.5769 0-1.6974-.0072-1.9102-.0376-2.57688-.0304-.66523-.136-1.11957-.2905-1.5171-.1597-.41098-.3734-.75954-.7209-1.107s-.696-.56117-1.107-.72089c-.3976-.1545-.8519-.26016-1.5171-.29051C13.9102 5.75719 13.6974 5.75 12 5.75Zm0 1.12613c1.6688 0 1.8665.00637 2.5255.03645.6094.02781.9403.12961 1.1606.21519.2917.11336.4999.24883.7186.46754.2187.21867.3542.42692.4675.71864.0856.22023.1874.55113.2152 1.1605.0301.65905.0365.85675.0365 2.52555s-.0064 1.8665-.0365 2.5255c-.0278.6094-.1296.9403-.2152 1.1606-.1133.2917-.2488.4999-.4675.7186-.2187.2187-.4269.3542-.7186.4675-.2203.0856-.5512.1874-1.1606.2152-.6589.0301-.8566.0365-2.5255.0365s-1.8666-.0064-2.52555-.0365c-.60937-.0278-.94027-.1296-1.1605-.2152-.29176-.1133-.49997-.2488-.71868-.4675-.21871-.2187-.35414-.4269-.4675-.7186-.08558-.2203-.18742-.5512-.21523-1.1606-.03008-.659-.03641-.8567-.03641-2.5255s.00633-1.8665.03641-2.52555c.02781-.60937.12965-.94027.21523-1.1605.11336-.29172.24879-.49997.4675-.71864.21871-.21871.42692-.35418.71868-.46754.22023-.08558.55113-.18738 1.1605-.21519.65905-.03008.85675-.03645 2.52555-.03645Zm0 1.91442c-1.7725 0-3.20945 1.43695-3.20945 3.20945S10.2275 15.2095 12 15.2095s3.2095-1.437 3.2095-3.2095c0-1.7725-1.437-3.20945-3.2095-3.20945Zm0 5.29275c-1.1506 0-2.08332-.9327-2.08332-2.0833 0-1.1506.93272-2.08332 2.08332-2.08332S14.0833 10.8494 14.0833 12 13.1506 14.0833 12 14.0833Zm4.0863-5.41955c0 .41422-.3358.74996-.7501.74996-.4141 0-.7499-.33574-.7499-.74996s.3358-.75.7499-.75c.4143 0 .7501.33578.7501.75Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.TELEGRAM\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M22 12c0 5.5229-4.4771 10-10 10-5.52285 0-10-4.4771-10-10C2 6.47715 6.47715 2 12 2c5.5229 0 10 4.47715 10 10Zm-9.6417-2.61755c-.9726.40455-2.91653 1.24185-5.83173 2.51195-.47339.1883-.72136.3725-.74394.5525-.03815.3044.34296.4242.86192.5874.0706.0222.14374.0452.21872.0695.51059.166 1.19741.3602 1.55446.3679.32388.007.68537-.1265 1.08446-.4006 2.72381-1.8386 4.12981-2.7679 4.21801-2.788.0623-.0141.1486-.0319.2071.0201.0585.052.0527.1504.0465.1768-.0377.1609-1.5335 1.5516-2.3077 2.2714-.2415.2244-.4127.3836-.4477.42-.0784.0814-.1583.1584-.2351.2325-.4743.4572-.83.8001.0197 1.3601.4084.2691.7352.4917 1.0612.7137.356.2424.7111.4842 1.1705.7854.117.0767.2288.1564.3377.234.4143.2954.7865.5608 1.2464.5184.2672-.0245.5432-.2758.6834-1.0252.3313-1.771.9825-5.6083 1.133-7.18949.0132-.13853-.0034-.31583-.0167-.39367-.0134-.07782-.0412-.18872-.1424-.2708-.1198-.09722-.3048-.11772-.3875-.11627-.3761.00663-.9531.20728-3.7303 1.36238Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.THREADS\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path\r\n d=\"M12.1482 21.6888h-.0058c-2.89118-.0194-5.1138-.9727-6.60781-2.833-1.32737-1.6568-2.01334-3.9608-2.03659-6.848v-.0136c.02325-2.88921.70922-5.19128 2.03853-6.84806C7.0286 3.28395 9.25316 2.33057 12.1424 2.31119h.0116c2.2168.0155 4.0712.5852 5.511 1.6936 1.3545 1.04252 2.3079 2.52685 2.833 4.41423l-1.6471.45925c-.8914-3.19731-3.1469-4.83085-6.7047-4.85604-2.34853.01744-4.12546.75573-5.28037 2.19355C5.7865 7.56253 5.22842 9.50804 5.20711 12c.02131 2.492.57939 4.4375 1.66066 5.7842 1.15491 1.4398 2.93184 2.1781 5.28043 2.1936 2.118-.0155 3.519-.5097 4.6836-1.651 1.3293-1.3022 1.306-2.9008.8797-3.8736-.25-.5736-.7054-1.0503-1.3196-1.4126-.155 1.0909-.5019 1.9746-1.0367 2.6412-.7151.8894-1.7285 1.3758-3.0113 1.4455-.9708.0523-1.9068-.1763-2.63149-.6472-.85843-.5561-1.36031-1.4049-1.41457-2.3931-.05232-.9612.32942-1.8448 1.07352-2.4881.71114-.6143 1.71104-.9747 2.89304-1.0425.8701-.0485 1.6859-.0097 2.4377.1143-.1007-.5988-.3022-1.07546-.6045-1.41844-.4147-.47282-1.0561-.7131-1.9049-.71891h-.0232c-.6821 0-1.6084.18796-2.19743 1.06577l-1.41844-.95145c.7906-1.17428 2.07337-1.82149 3.61587-1.82149h.0349c2.5791.0155 4.1158 1.59478 4.2689 4.35032.0872.0368.1744.0755.2596.1143 1.2034.5658 2.0831 1.4223 2.5462 2.4784.6434 1.4707.7035 3.8678-1.2498 5.7803-1.494 1.4611-3.3058 2.1219-5.8753 2.1393h-.0058Zm.81-9.4388c-.1958 0-.3934.0058-.5969.0174-1.4824.0833-2.40667.7635-2.3544 1.7304.0543 1.0135 1.1724 1.4844 2.2479 1.4262.9882-.0523 2.2749-.4379 2.4919-2.9957-.5464-.1183-1.1452-.1783-1.7885-.1783Z\">\r\n </path>\r\n </svg>\r\n </a>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
815
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SociaIconsComponent, isStandalone: true, selector: "simpo-socia-icons", inputs: { socialIconData: "socialIconData", color: "color", sectionId: "sectionId" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div *ngIf=\"socialIconData?.type == ChannelType.FACEBOOK\">\r\n <div (click)=\"openLink('FACEBOOK')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M10.4375 21.8784C5.65941 21.1274 2 16.9877 2 12 2 6.48086 6.48086 2 12 2c5.5191 0 10 4.48086 10 10 0 4.9877-3.6594 9.1274-8.4375 9.8784v-6.9878h2.3301L16.3359 12h-2.7734v-1.8758c0-.79084.3874-1.5617 1.6296-1.5617h1.261V6.10156s-1.1443-.19531-2.2385-.19531c-2.2842 0-3.7771 1.38438-3.7771 3.89063V12H7.89844v2.8906h2.53906v6.9878Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </div>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.TWITTER\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path\r\n d=\"M13.6756 10.6218 20.2324 3h-1.5537l-5.6933 6.61788L8.43817 3H3.1935l6.8763 10.0074L3.1935 21h1.55384l6.01226-6.9887L15.5618 21h5.2447l-7.1313-10.3782h.0004Zm-2.1282 2.4738-.6967-.9965-5.54349-7.92939h2.38662l4.47367 6.39919.6967.9966 5.8152 8.318h-2.3866l-4.7454-6.7875v-.0004Z\">\r\n </path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.LINKEDIN\">\r\n <div (click)=\"openLink('LINKEDIN')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M19.5565 2C20.9051 2 22 3.09492 22 4.44352V19.5565C22 20.9051 20.9051 22 19.5565 22H4.44352C3.09492 22 2 20.9051 2 19.5565V4.44352C2 3.09492 3.09488 2 4.44352 2H19.5565ZM8.26801 18.5343V9.71723H5.33676v8.81707h2.93125Zm10.56789 0v-5.0562c0-2.7083-1.446-3.96822-3.3742-3.96822-1.5549 0-2.2513.85512-2.6413 1.45572V9.71723H9.88988c.03887.82737 0 8.81707 0 8.81707h2.93052v-4.9241c0-.2636.0189-.527.0966-.7154.2115-.5264.694-1.0716 1.5037-1.0716 1.0599 0 1.4846.8088 1.4846 1.9936v4.7175h2.9306ZM6.82219 5.4657c-1.00289 0-1.65813.65934-1.65813 1.52352 0 .84601.63532 1.52351 1.61934 1.52351 1.02207 0 1.67719-.6775 1.67719-1.52351-.01895-.86297-.63442-1.52164-1.6384-1.52352Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </div>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.YOUTUBE\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M21.0053 5.6191c.5996.6477.7946 2.11879.7946 2.11879S22 9.46405 22 11.1908v1.618c0 1.7268-.2001 3.453-.2001 3.453s-.1956 1.4705-.7946 2.1169c-.6859.7654-1.4461.8449-1.8754.8897-.0469.0049-.0899.0094-.1283.0143-2.799.2145-7.0016.222-7.0016.222s-5.20038-.0507-6.80025-.2145c-.07572-.0151-.16746-.0268-.27131-.0402-.50666-.0651-1.3018-.1673-1.93375-.8719-.59957-.6465-.79463-2.1169-.79463-2.1169S2 14.5356 2 12.8082v-1.618c0-1.72615.20006-3.45231.20006-3.45231s.19569-1.47109.79463-2.11879c.68895-.76815 1.4516-.84541 1.88002-.88881.04511-.00457.08651-.00876.12373-.01335C7.79681 4.5 11.995 4.5 11.995 4.5h.0094s4.1982 0 6.9972.21694c.0372.00459.0786.00879.1238.01336.4285.0434 1.1916.12069 1.8799.8888Zm-5.251 6.3832-6.25196 3.7512V8.25117l6.25196 3.75113Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.INSTAGRAM\">\r\n <div (click)=\"openLink('INSTAGRAM')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M12 2c5.5191 0 10 4.48086 10 10 0 5.5191-4.4809 10-10 10-5.51914 0-10-4.4809-10-10C2 6.48086 6.48086 2 12 2Zm0 3.75c-1.6974 0-1.9102.00719-2.57688.03762-.66523.03035-1.11957.13601-1.51714.29051-.41098.15972-.75953.37343-1.107.72089-.34746.34746-.56117.69602-.72089 1.107-.1545.39753-.26012.85187-.29051 1.5171C5.75719 10.0898 5.75 10.3026 5.75 12s.00719 1.9102.03758 2.5769c.03039.6652.13601 1.1195.29051 1.5171.15972.411.37343.7595.72089 1.107.34747.3475.69602.5612 1.107.7209.39757.1545.85191.2601 1.51714.2905.66668.0304.87948.0376 2.57688.0376s1.9102-.0072 2.5769-.0376c.6652-.0304 1.1195-.136 1.5171-.2905.411-.1597.7595-.3734 1.107-.7209.3475-.3475.5612-.696.7209-1.107.1545-.3976.2601-.8519.2905-1.5171.0304-.6667.0376-.8795.0376-2.5769 0-1.6974-.0072-1.9102-.0376-2.57688-.0304-.66523-.136-1.11957-.2905-1.5171-.1597-.41098-.3734-.75954-.7209-1.107s-.696-.56117-1.107-.72089c-.3976-.1545-.8519-.26016-1.5171-.29051C13.9102 5.75719 13.6974 5.75 12 5.75Zm0 1.12613c1.6688 0 1.8665.00637 2.5255.03645.6094.02781.9403.12961 1.1606.21519.2917.11336.4999.24883.7186.46754.2187.21867.3542.42692.4675.71864.0856.22023.1874.55113.2152 1.1605.0301.65905.0365.85675.0365 2.52555s-.0064 1.8665-.0365 2.5255c-.0278.6094-.1296.9403-.2152 1.1606-.1133.2917-.2488.4999-.4675.7186-.2187.2187-.4269.3542-.7186.4675-.2203.0856-.5512.1874-1.1606.2152-.6589.0301-.8566.0365-2.5255.0365s-1.8666-.0064-2.52555-.0365c-.60937-.0278-.94027-.1296-1.1605-.2152-.29176-.1133-.49997-.2488-.71868-.4675-.21871-.2187-.35414-.4269-.4675-.7186-.08558-.2203-.18742-.5512-.21523-1.1606-.03008-.659-.03641-.8567-.03641-2.5255s.00633-1.8665.03641-2.52555c.02781-.60937.12965-.94027.21523-1.1605.11336-.29172.24879-.49997.4675-.71864.21871-.21871.42692-.35418.71868-.46754.22023-.08558.55113-.18738 1.1605-.21519.65905-.03008.85675-.03645 2.52555-.03645Zm0 1.91442c-1.7725 0-3.20945 1.43695-3.20945 3.20945S10.2275 15.2095 12 15.2095s3.2095-1.437 3.2095-3.2095c0-1.7725-1.437-3.20945-3.2095-3.20945Zm0 5.29275c-1.1506 0-2.08332-.9327-2.08332-2.0833 0-1.1506.93272-2.08332 2.08332-2.08332S14.0833 10.8494 14.0833 12 13.1506 14.0833 12 14.0833Zm4.0863-5.41955c0 .41422-.3358.74996-.7501.74996-.4141 0-.7499-.33574-.7499-.74996s.3358-.75.7499-.75c.4143 0 .7501.33578.7501.75Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </div>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.TELEGRAM\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M22 12c0 5.5229-4.4771 10-10 10-5.52285 0-10-4.4771-10-10C2 6.47715 6.47715 2 12 2c5.5229 0 10 4.47715 10 10Zm-9.6417-2.61755c-.9726.40455-2.91653 1.24185-5.83173 2.51195-.47339.1883-.72136.3725-.74394.5525-.03815.3044.34296.4242.86192.5874.0706.0222.14374.0452.21872.0695.51059.166 1.19741.3602 1.55446.3679.32388.007.68537-.1265 1.08446-.4006 2.72381-1.8386 4.12981-2.7679 4.21801-2.788.0623-.0141.1486-.0319.2071.0201.0585.052.0527.1504.0465.1768-.0377.1609-1.5335 1.5516-2.3077 2.2714-.2415.2244-.4127.3836-.4477.42-.0784.0814-.1583.1584-.2351.2325-.4743.4572-.83.8001.0197 1.3601.4084.2691.7352.4917 1.0612.7137.356.2424.7111.4842 1.1705.7854.117.0767.2288.1564.3377.234.4143.2954.7865.5608 1.2464.5184.2672-.0245.5432-.2758.6834-1.0252.3313-1.771.9825-5.6083 1.133-7.18949.0132-.13853-.0034-.31583-.0167-.39367-.0134-.07782-.0412-.18872-.1424-.2708-.1198-.09722-.3048-.11772-.3875-.11627-.3761.00663-.9531.20728-3.7303 1.36238Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.THREADS\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path\r\n d=\"M12.1482 21.6888h-.0058c-2.89118-.0194-5.1138-.9727-6.60781-2.833-1.32737-1.6568-2.01334-3.9608-2.03659-6.848v-.0136c.02325-2.88921.70922-5.19128 2.03853-6.84806C7.0286 3.28395 9.25316 2.33057 12.1424 2.31119h.0116c2.2168.0155 4.0712.5852 5.511 1.6936 1.3545 1.04252 2.3079 2.52685 2.833 4.41423l-1.6471.45925c-.8914-3.19731-3.1469-4.83085-6.7047-4.85604-2.34853.01744-4.12546.75573-5.28037 2.19355C5.7865 7.56253 5.22842 9.50804 5.20711 12c.02131 2.492.57939 4.4375 1.66066 5.7842 1.15491 1.4398 2.93184 2.1781 5.28043 2.1936 2.118-.0155 3.519-.5097 4.6836-1.651 1.3293-1.3022 1.306-2.9008.8797-3.8736-.25-.5736-.7054-1.0503-1.3196-1.4126-.155 1.0909-.5019 1.9746-1.0367 2.6412-.7151.8894-1.7285 1.3758-3.0113 1.4455-.9708.0523-1.9068-.1763-2.63149-.6472-.85843-.5561-1.36031-1.4049-1.41457-2.3931-.05232-.9612.32942-1.8448 1.07352-2.4881.71114-.6143 1.71104-.9747 2.89304-1.0425.8701-.0485 1.6859-.0097 2.4377.1143-.1007-.5988-.3022-1.07546-.6045-1.41844-.4147-.47282-1.0561-.7131-1.9049-.71891h-.0232c-.6821 0-1.6084.18796-2.19743 1.06577l-1.41844-.95145c.7906-1.17428 2.07337-1.82149 3.61587-1.82149h.0349c2.5791.0155 4.1158 1.59478 4.2689 4.35032.0872.0368.1744.0755.2596.1143 1.2034.5658 2.0831 1.4223 2.5462 2.4784.6434 1.4707.7035 3.8678-1.2498 5.7803-1.494 1.4611-3.3058 2.1219-5.8753 2.1393h-.0058Zm.81-9.4388c-.1958 0-.3934.0058-.5969.0174-1.4824.0833-2.40667.7635-2.3544 1.7304.0543 1.0135 1.1724 1.4844 2.2479 1.4262.9882-.0523 2.2749-.4379 2.4919-2.9957-.5464-.1183-1.1452-.1783-1.7885-.1783Z\">\r\n </path>\r\n </svg>\r\n </a>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
802
816
  }
803
817
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SociaIconsComponent, decorators: [{
804
818
  type: Component,
805
819
  args: [{ selector: 'simpo-socia-icons', standalone: true, imports: [
806
820
  CommonModule,
807
821
  ColorDirective
808
- ], template: "<div *ngIf=\"socialIconData?.type == ChannelType.FACEBOOK\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M10.4375 21.8784C5.65941 21.1274 2 16.9877 2 12 2 6.48086 6.48086 2 12 2c5.5191 0 10 4.48086 10 10 0 4.9877-3.6594 9.1274-8.4375 9.8784v-6.9878h2.3301L16.3359 12h-2.7734v-1.8758c0-.79084.3874-1.5617 1.6296-1.5617h1.261V6.10156s-1.1443-.19531-2.2385-.19531c-2.2842 0-3.7771 1.38438-3.7771 3.89063V12H7.89844v2.8906h2.53906v6.9878Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.TWITTER\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path\r\n d=\"M13.6756 10.6218 20.2324 3h-1.5537l-5.6933 6.61788L8.43817 3H3.1935l6.8763 10.0074L3.1935 21h1.55384l6.01226-6.9887L15.5618 21h5.2447l-7.1313-10.3782h.0004Zm-2.1282 2.4738-.6967-.9965-5.54349-7.92939h2.38662l4.47367 6.39919.6967.9966 5.8152 8.318h-2.3866l-4.7454-6.7875v-.0004Z\">\r\n </path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.LINKEDIN\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M19.5565 2C20.9051 2 22 3.09492 22 4.44352V19.5565C22 20.9051 20.9051 22 19.5565 22H4.44352C3.09492 22 2 20.9051 2 19.5565V4.44352C2 3.09492 3.09488 2 4.44352 2H19.5565ZM8.26801 18.5343V9.71723H5.33676v8.81707h2.93125Zm10.56789 0v-5.0562c0-2.7083-1.446-3.96822-3.3742-3.96822-1.5549 0-2.2513.85512-2.6413 1.45572V9.71723H9.88988c.03887.82737 0 8.81707 0 8.81707h2.93052v-4.9241c0-.2636.0189-.527.0966-.7154.2115-.5264.694-1.0716 1.5037-1.0716 1.0599 0 1.4846.8088 1.4846 1.9936v4.7175h2.9306ZM6.82219 5.4657c-1.00289 0-1.65813.65934-1.65813 1.52352 0 .84601.63532 1.52351 1.61934 1.52351 1.02207 0 1.67719-.6775 1.67719-1.52351-.01895-.86297-.63442-1.52164-1.6384-1.52352Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.YOUTUBE\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M21.0053 5.6191c.5996.6477.7946 2.11879.7946 2.11879S22 9.46405 22 11.1908v1.618c0 1.7268-.2001 3.453-.2001 3.453s-.1956 1.4705-.7946 2.1169c-.6859.7654-1.4461.8449-1.8754.8897-.0469.0049-.0899.0094-.1283.0143-2.799.2145-7.0016.222-7.0016.222s-5.20038-.0507-6.80025-.2145c-.07572-.0151-.16746-.0268-.27131-.0402-.50666-.0651-1.3018-.1673-1.93375-.8719-.59957-.6465-.79463-2.1169-.79463-2.1169S2 14.5356 2 12.8082v-1.618c0-1.72615.20006-3.45231.20006-3.45231s.19569-1.47109.79463-2.11879c.68895-.76815 1.4516-.84541 1.88002-.88881.04511-.00457.08651-.00876.12373-.01335C7.79681 4.5 11.995 4.5 11.995 4.5h.0094s4.1982 0 6.9972.21694c.0372.00459.0786.00879.1238.01336.4285.0434 1.1916.12069 1.8799.8888Zm-5.251 6.3832-6.25196 3.7512V8.25117l6.25196 3.75113Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.INSTAGRAM\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M12 2c5.5191 0 10 4.48086 10 10 0 5.5191-4.4809 10-10 10-5.51914 0-10-4.4809-10-10C2 6.48086 6.48086 2 12 2Zm0 3.75c-1.6974 0-1.9102.00719-2.57688.03762-.66523.03035-1.11957.13601-1.51714.29051-.41098.15972-.75953.37343-1.107.72089-.34746.34746-.56117.69602-.72089 1.107-.1545.39753-.26012.85187-.29051 1.5171C5.75719 10.0898 5.75 10.3026 5.75 12s.00719 1.9102.03758 2.5769c.03039.6652.13601 1.1195.29051 1.5171.15972.411.37343.7595.72089 1.107.34747.3475.69602.5612 1.107.7209.39757.1545.85191.2601 1.51714.2905.66668.0304.87948.0376 2.57688.0376s1.9102-.0072 2.5769-.0376c.6652-.0304 1.1195-.136 1.5171-.2905.411-.1597.7595-.3734 1.107-.7209.3475-.3475.5612-.696.7209-1.107.1545-.3976.2601-.8519.2905-1.5171.0304-.6667.0376-.8795.0376-2.5769 0-1.6974-.0072-1.9102-.0376-2.57688-.0304-.66523-.136-1.11957-.2905-1.5171-.1597-.41098-.3734-.75954-.7209-1.107s-.696-.56117-1.107-.72089c-.3976-.1545-.8519-.26016-1.5171-.29051C13.9102 5.75719 13.6974 5.75 12 5.75Zm0 1.12613c1.6688 0 1.8665.00637 2.5255.03645.6094.02781.9403.12961 1.1606.21519.2917.11336.4999.24883.7186.46754.2187.21867.3542.42692.4675.71864.0856.22023.1874.55113.2152 1.1605.0301.65905.0365.85675.0365 2.52555s-.0064 1.8665-.0365 2.5255c-.0278.6094-.1296.9403-.2152 1.1606-.1133.2917-.2488.4999-.4675.7186-.2187.2187-.4269.3542-.7186.4675-.2203.0856-.5512.1874-1.1606.2152-.6589.0301-.8566.0365-2.5255.0365s-1.8666-.0064-2.52555-.0365c-.60937-.0278-.94027-.1296-1.1605-.2152-.29176-.1133-.49997-.2488-.71868-.4675-.21871-.2187-.35414-.4269-.4675-.7186-.08558-.2203-.18742-.5512-.21523-1.1606-.03008-.659-.03641-.8567-.03641-2.5255s.00633-1.8665.03641-2.52555c.02781-.60937.12965-.94027.21523-1.1605.11336-.29172.24879-.49997.4675-.71864.21871-.21871.42692-.35418.71868-.46754.22023-.08558.55113-.18738 1.1605-.21519.65905-.03008.85675-.03645 2.52555-.03645Zm0 1.91442c-1.7725 0-3.20945 1.43695-3.20945 3.20945S10.2275 15.2095 12 15.2095s3.2095-1.437 3.2095-3.2095c0-1.7725-1.437-3.20945-3.2095-3.20945Zm0 5.29275c-1.1506 0-2.08332-.9327-2.08332-2.0833 0-1.1506.93272-2.08332 2.08332-2.08332S14.0833 10.8494 14.0833 12 13.1506 14.0833 12 14.0833Zm4.0863-5.41955c0 .41422-.3358.74996-.7501.74996-.4141 0-.7499-.33574-.7499-.74996s.3358-.75.7499-.75c.4143 0 .7501.33578.7501.75Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.TELEGRAM\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M22 12c0 5.5229-4.4771 10-10 10-5.52285 0-10-4.4771-10-10C2 6.47715 6.47715 2 12 2c5.5229 0 10 4.47715 10 10Zm-9.6417-2.61755c-.9726.40455-2.91653 1.24185-5.83173 2.51195-.47339.1883-.72136.3725-.74394.5525-.03815.3044.34296.4242.86192.5874.0706.0222.14374.0452.21872.0695.51059.166 1.19741.3602 1.55446.3679.32388.007.68537-.1265 1.08446-.4006 2.72381-1.8386 4.12981-2.7679 4.21801-2.788.0623-.0141.1486-.0319.2071.0201.0585.052.0527.1504.0465.1768-.0377.1609-1.5335 1.5516-2.3077 2.2714-.2415.2244-.4127.3836-.4477.42-.0784.0814-.1583.1584-.2351.2325-.4743.4572-.83.8001.0197 1.3601.4084.2691.7352.4917 1.0612.7137.356.2424.7111.4842 1.1705.7854.117.0767.2288.1564.3377.234.4143.2954.7865.5608 1.2464.5184.2672-.0245.5432-.2758.6834-1.0252.3313-1.771.9825-5.6083 1.133-7.18949.0132-.13853-.0034-.31583-.0167-.39367-.0134-.07782-.0412-.18872-.1424-.2708-.1198-.09722-.3048-.11772-.3875-.11627-.3761.00663-.9531.20728-3.7303 1.36238Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.THREADS\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path\r\n d=\"M12.1482 21.6888h-.0058c-2.89118-.0194-5.1138-.9727-6.60781-2.833-1.32737-1.6568-2.01334-3.9608-2.03659-6.848v-.0136c.02325-2.88921.70922-5.19128 2.03853-6.84806C7.0286 3.28395 9.25316 2.33057 12.1424 2.31119h.0116c2.2168.0155 4.0712.5852 5.511 1.6936 1.3545 1.04252 2.3079 2.52685 2.833 4.41423l-1.6471.45925c-.8914-3.19731-3.1469-4.83085-6.7047-4.85604-2.34853.01744-4.12546.75573-5.28037 2.19355C5.7865 7.56253 5.22842 9.50804 5.20711 12c.02131 2.492.57939 4.4375 1.66066 5.7842 1.15491 1.4398 2.93184 2.1781 5.28043 2.1936 2.118-.0155 3.519-.5097 4.6836-1.651 1.3293-1.3022 1.306-2.9008.8797-3.8736-.25-.5736-.7054-1.0503-1.3196-1.4126-.155 1.0909-.5019 1.9746-1.0367 2.6412-.7151.8894-1.7285 1.3758-3.0113 1.4455-.9708.0523-1.9068-.1763-2.63149-.6472-.85843-.5561-1.36031-1.4049-1.41457-2.3931-.05232-.9612.32942-1.8448 1.07352-2.4881.71114-.6143 1.71104-.9747 2.89304-1.0425.8701-.0485 1.6859-.0097 2.4377.1143-.1007-.5988-.3022-1.07546-.6045-1.41844-.4147-.47282-1.0561-.7131-1.9049-.71891h-.0232c-.6821 0-1.6084.18796-2.19743 1.06577l-1.41844-.95145c.7906-1.17428 2.07337-1.82149 3.61587-1.82149h.0349c2.5791.0155 4.1158 1.59478 4.2689 4.35032.0872.0368.1744.0755.2596.1143 1.2034.5658 2.0831 1.4223 2.5462 2.4784.6434 1.4707.7035 3.8678-1.2498 5.7803-1.494 1.4611-3.3058 2.1219-5.8753 2.1393h-.0058Zm.81-9.4388c-.1958 0-.3934.0058-.5969.0174-1.4824.0833-2.40667.7635-2.3544 1.7304.0543 1.0135 1.1724 1.4844 2.2479 1.4262.9882-.0523 2.2749-.4379 2.4919-2.9957-.5464-.1183-1.1452-.1783-1.7885-.1783Z\">\r\n </path>\r\n </svg>\r\n </a>\r\n</div>\r\n" }]
822
+ ], template: "<div *ngIf=\"socialIconData?.type == ChannelType.FACEBOOK\">\r\n <div (click)=\"openLink('FACEBOOK')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M10.4375 21.8784C5.65941 21.1274 2 16.9877 2 12 2 6.48086 6.48086 2 12 2c5.5191 0 10 4.48086 10 10 0 4.9877-3.6594 9.1274-8.4375 9.8784v-6.9878h2.3301L16.3359 12h-2.7734v-1.8758c0-.79084.3874-1.5617 1.6296-1.5617h1.261V6.10156s-1.1443-.19531-2.2385-.19531c-2.2842 0-3.7771 1.38438-3.7771 3.89063V12H7.89844v2.8906h2.53906v6.9878Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </div>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.TWITTER\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path\r\n d=\"M13.6756 10.6218 20.2324 3h-1.5537l-5.6933 6.61788L8.43817 3H3.1935l6.8763 10.0074L3.1935 21h1.55384l6.01226-6.9887L15.5618 21h5.2447l-7.1313-10.3782h.0004Zm-2.1282 2.4738-.6967-.9965-5.54349-7.92939h2.38662l4.47367 6.39919.6967.9966 5.8152 8.318h-2.3866l-4.7454-6.7875v-.0004Z\">\r\n </path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.LINKEDIN\">\r\n <div (click)=\"openLink('LINKEDIN')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M19.5565 2C20.9051 2 22 3.09492 22 4.44352V19.5565C22 20.9051 20.9051 22 19.5565 22H4.44352C3.09492 22 2 20.9051 2 19.5565V4.44352C2 3.09492 3.09488 2 4.44352 2H19.5565ZM8.26801 18.5343V9.71723H5.33676v8.81707h2.93125Zm10.56789 0v-5.0562c0-2.7083-1.446-3.96822-3.3742-3.96822-1.5549 0-2.2513.85512-2.6413 1.45572V9.71723H9.88988c.03887.82737 0 8.81707 0 8.81707h2.93052v-4.9241c0-.2636.0189-.527.0966-.7154.2115-.5264.694-1.0716 1.5037-1.0716 1.0599 0 1.4846.8088 1.4846 1.9936v4.7175h2.9306ZM6.82219 5.4657c-1.00289 0-1.65813.65934-1.65813 1.52352 0 .84601.63532 1.52351 1.61934 1.52351 1.02207 0 1.67719-.6775 1.67719-1.52351-.01895-.86297-.63442-1.52164-1.6384-1.52352Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </div>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.YOUTUBE\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M21.0053 5.6191c.5996.6477.7946 2.11879.7946 2.11879S22 9.46405 22 11.1908v1.618c0 1.7268-.2001 3.453-.2001 3.453s-.1956 1.4705-.7946 2.1169c-.6859.7654-1.4461.8449-1.8754.8897-.0469.0049-.0899.0094-.1283.0143-2.799.2145-7.0016.222-7.0016.222s-5.20038-.0507-6.80025-.2145c-.07572-.0151-.16746-.0268-.27131-.0402-.50666-.0651-1.3018-.1673-1.93375-.8719-.59957-.6465-.79463-2.1169-.79463-2.1169S2 14.5356 2 12.8082v-1.618c0-1.72615.20006-3.45231.20006-3.45231s.19569-1.47109.79463-2.11879c.68895-.76815 1.4516-.84541 1.88002-.88881.04511-.00457.08651-.00876.12373-.01335C7.79681 4.5 11.995 4.5 11.995 4.5h.0094s4.1982 0 6.9972.21694c.0372.00459.0786.00879.1238.01336.4285.0434 1.1916.12069 1.8799.8888Zm-5.251 6.3832-6.25196 3.7512V8.25117l6.25196 3.75113Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.INSTAGRAM\">\r\n <div (click)=\"openLink('INSTAGRAM')\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M12 2c5.5191 0 10 4.48086 10 10 0 5.5191-4.4809 10-10 10-5.51914 0-10-4.4809-10-10C2 6.48086 6.48086 2 12 2Zm0 3.75c-1.6974 0-1.9102.00719-2.57688.03762-.66523.03035-1.11957.13601-1.51714.29051-.41098.15972-.75953.37343-1.107.72089-.34746.34746-.56117.69602-.72089 1.107-.1545.39753-.26012.85187-.29051 1.5171C5.75719 10.0898 5.75 10.3026 5.75 12s.00719 1.9102.03758 2.5769c.03039.6652.13601 1.1195.29051 1.5171.15972.411.37343.7595.72089 1.107.34747.3475.69602.5612 1.107.7209.39757.1545.85191.2601 1.51714.2905.66668.0304.87948.0376 2.57688.0376s1.9102-.0072 2.5769-.0376c.6652-.0304 1.1195-.136 1.5171-.2905.411-.1597.7595-.3734 1.107-.7209.3475-.3475.5612-.696.7209-1.107.1545-.3976.2601-.8519.2905-1.5171.0304-.6667.0376-.8795.0376-2.5769 0-1.6974-.0072-1.9102-.0376-2.57688-.0304-.66523-.136-1.11957-.2905-1.5171-.1597-.41098-.3734-.75954-.7209-1.107s-.696-.56117-1.107-.72089c-.3976-.1545-.8519-.26016-1.5171-.29051C13.9102 5.75719 13.6974 5.75 12 5.75Zm0 1.12613c1.6688 0 1.8665.00637 2.5255.03645.6094.02781.9403.12961 1.1606.21519.2917.11336.4999.24883.7186.46754.2187.21867.3542.42692.4675.71864.0856.22023.1874.55113.2152 1.1605.0301.65905.0365.85675.0365 2.52555s-.0064 1.8665-.0365 2.5255c-.0278.6094-.1296.9403-.2152 1.1606-.1133.2917-.2488.4999-.4675.7186-.2187.2187-.4269.3542-.7186.4675-.2203.0856-.5512.1874-1.1606.2152-.6589.0301-.8566.0365-2.5255.0365s-1.8666-.0064-2.52555-.0365c-.60937-.0278-.94027-.1296-1.1605-.2152-.29176-.1133-.49997-.2488-.71868-.4675-.21871-.2187-.35414-.4269-.4675-.7186-.08558-.2203-.18742-.5512-.21523-1.1606-.03008-.659-.03641-.8567-.03641-2.5255s.00633-1.8665.03641-2.52555c.02781-.60937.12965-.94027.21523-1.1605.11336-.29172.24879-.49997.4675-.71864.21871-.21871.42692-.35418.71868-.46754.22023-.08558.55113-.18738 1.1605-.21519.65905-.03008.85675-.03645 2.52555-.03645Zm0 1.91442c-1.7725 0-3.20945 1.43695-3.20945 3.20945S10.2275 15.2095 12 15.2095s3.2095-1.437 3.2095-3.2095c0-1.7725-1.437-3.20945-3.2095-3.20945Zm0 5.29275c-1.1506 0-2.08332-.9327-2.08332-2.0833 0-1.1506.93272-2.08332 2.08332-2.08332S14.0833 10.8494 14.0833 12 13.1506 14.0833 12 14.0833Zm4.0863-5.41955c0 .41422-.3358.74996-.7501.74996-.4141 0-.7499-.33574-.7499-.74996s.3358-.75.7499-.75c.4143 0 .7501.33578.7501.75Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </div>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.TELEGRAM\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M22 12c0 5.5229-4.4771 10-10 10-5.52285 0-10-4.4771-10-10C2 6.47715 6.47715 2 12 2c5.5229 0 10 4.47715 10 10Zm-9.6417-2.61755c-.9726.40455-2.91653 1.24185-5.83173 2.51195-.47339.1883-.72136.3725-.74394.5525-.03815.3044.34296.4242.86192.5874.0706.0222.14374.0452.21872.0695.51059.166 1.19741.3602 1.55446.3679.32388.007.68537-.1265 1.08446-.4006 2.72381-1.8386 4.12981-2.7679 4.21801-2.788.0623-.0141.1486-.0319.2071.0201.0585.052.0527.1504.0465.1768-.0377.1609-1.5335 1.5516-2.3077 2.2714-.2415.2244-.4127.3836-.4477.42-.0784.0814-.1583.1584-.2351.2325-.4743.4572-.83.8001.0197 1.3601.4084.2691.7352.4917 1.0612.7137.356.2424.7111.4842 1.1705.7854.117.0767.2288.1564.3377.234.4143.2954.7865.5608 1.2464.5184.2672-.0245.5432-.2758.6834-1.0252.3313-1.771.9825-5.6083 1.133-7.18949.0132-.13853-.0034-.31583-.0167-.39367-.0134-.07782-.0412-.18872-.1424-.2708-.1198-.09722-.3048-.11772-.3875-.11627-.3761.00663-.9531.20728-3.7303 1.36238Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </a>\r\n</div>\r\n<div *ngIf=\"socialIconData?.type === ChannelType.THREADS\">\r\n <a [href]=\"socialIconData?.link\" target=\"_blank\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 24 24\" width=\"34\" height=\"34\"\r\n class=\"icon w-8 h-8\" aria-hidden=\"true\" [simpoColor]=\"color\" [id]=\"sectionId\">\r\n <path\r\n d=\"M12.1482 21.6888h-.0058c-2.89118-.0194-5.1138-.9727-6.60781-2.833-1.32737-1.6568-2.01334-3.9608-2.03659-6.848v-.0136c.02325-2.88921.70922-5.19128 2.03853-6.84806C7.0286 3.28395 9.25316 2.33057 12.1424 2.31119h.0116c2.2168.0155 4.0712.5852 5.511 1.6936 1.3545 1.04252 2.3079 2.52685 2.833 4.41423l-1.6471.45925c-.8914-3.19731-3.1469-4.83085-6.7047-4.85604-2.34853.01744-4.12546.75573-5.28037 2.19355C5.7865 7.56253 5.22842 9.50804 5.20711 12c.02131 2.492.57939 4.4375 1.66066 5.7842 1.15491 1.4398 2.93184 2.1781 5.28043 2.1936 2.118-.0155 3.519-.5097 4.6836-1.651 1.3293-1.3022 1.306-2.9008.8797-3.8736-.25-.5736-.7054-1.0503-1.3196-1.4126-.155 1.0909-.5019 1.9746-1.0367 2.6412-.7151.8894-1.7285 1.3758-3.0113 1.4455-.9708.0523-1.9068-.1763-2.63149-.6472-.85843-.5561-1.36031-1.4049-1.41457-2.3931-.05232-.9612.32942-1.8448 1.07352-2.4881.71114-.6143 1.71104-.9747 2.89304-1.0425.8701-.0485 1.6859-.0097 2.4377.1143-.1007-.5988-.3022-1.07546-.6045-1.41844-.4147-.47282-1.0561-.7131-1.9049-.71891h-.0232c-.6821 0-1.6084.18796-2.19743 1.06577l-1.41844-.95145c.7906-1.17428 2.07337-1.82149 3.61587-1.82149h.0349c2.5791.0155 4.1158 1.59478 4.2689 4.35032.0872.0368.1744.0755.2596.1143 1.2034.5658 2.0831 1.4223 2.5462 2.4784.6434 1.4707.7035 3.8678-1.2498 5.7803-1.494 1.4611-3.3058 2.1219-5.8753 2.1393h-.0058Zm.81-9.4388c-.1958 0-.3934.0058-.5969.0174-1.4824.0833-2.40667.7635-2.3544 1.7304.0543 1.0135 1.1724 1.4844 2.2479 1.4262.9882-.0523 2.2749-.4379 2.4919-2.9957-.5464-.1183-1.1452-.1783-1.7885-.1783Z\">\r\n </path>\r\n </svg>\r\n </a>\r\n</div>\r\n" }]
809
823
  }], ctorParameters: () => [], propDecorators: { socialIconData: [{
810
824
  type: Input
811
825
  }], color: [{
@@ -1804,7 +1818,7 @@ class FooterSectionComponent extends BaseSection {
1804
1818
  this.content = this.data?.content;
1805
1819
  }
1806
1820
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FooterSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
1807
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n align-items-end\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
1821
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FooterSectionComponent, isStandalone: true, selector: "simpo-footer-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end\">\r\n <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n align-items-end\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start\">\r\n <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
1808
1822
  }
1809
1823
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FooterSectionComponent, decorators: [{
1810
1824
  type: Component,
@@ -1833,7 +1847,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
1833
1847
  PositionLayoutDirectiveDirective,
1834
1848
  TextBackgroundDirectiveDirective,
1835
1849
  ColorDirective
1836
- ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n align-items-end\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center pt-5 pb-5\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
1850
+ ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-5\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-0\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SPLIT_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-start align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3 mt-4 mt-lg-0\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-4 mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-4 mt-4\"\r\n [ngStyle]=\"{'margin-left': content?.socialLinks?.display ? '20px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-2\">\r\n <div class=\"body-desc mt-lg-5 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-end align-items-lg-end\">\r\n <div class=\"d-flex flex-column flex-grow align-items-end\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-end\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4\">\r\n <div class=\"d-flex align-items-start align-items-lg-end flex-column flex-lg-colum gap-lg-0 gap-3\r\n align-items-end\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_LEFT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-start align-items-lg-start\">\r\n <div class=\"d-flex flex-column flex-grow align-items-start\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-start\">\r\n <div class=\"d-flex align-items-start align-items-lg-start flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.STACKED_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-colum flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-grow align-items-center\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-5 mt-5 text-start\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-grow mt-lg-0 mt-lg-3 mt-4 align-items-center\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-colum gap-lg-0 gap-3 align-items-start justify-content-between\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-5 mt-2\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\"\r\n class=\"button-display mt-lg-5 mt-0 d-flex align-items-end\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small text-end\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_RIGHT\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-row flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3 col-lg-6\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5 col-lg-6\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-0 mt-5 col-lg-6 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <footer *ngIf=\"style?.footerType === footerTypes.SIMPLE_DETAILS_CENTER\"\r\n #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div style=\"padding-left: 1.5rem;padding-right:1.5rem\" [simpoFooterLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoColor]=\"style?.background?.color\"\r\n class=\"d-flex flex-lg-column flex-column justify-content-between align-items-center align-items-lg-center\">\r\n <div class=\"d-flex flex-column flex-lg-row flex-grow align-items-center gap-lg-3\">\r\n <div class=\"heading-medium\">\r\n <ng-container *ngIf=\"content?.siteNameAndLogo != 'custom'\">\r\n <span>\r\n <span></span>\r\n <b>{{content?.siteName?.value}}</b>\r\n </span>\r\n </ng-container>\r\n <ng-container *ngIf=\"content?.siteNameAndLogo === 'custom'\">\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source === 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-medium\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b\r\n [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.source != 'BRANDING'\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"body-desc mt-lg-0 mt-5\" *ngIf=\"content?.additionalDetails?.value != ''\">\r\n {{content?.additionalDetails?.value}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column flex-lg-row align-items-center gap-lg-3 flex-grow mt-lg-5 mt-5 justify-content-lg-end\">\r\n <div class=\"d-flex align-items-center align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-lg-0 mt-4\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;top: 4px;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display mt-lg-0 mt-4\"\r\n [ngStyle]=\"{'margin': content?.socialLinks?.display ? '10px' : ''}\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"made-with mt-4 mt-lg-0\" *ngIf=\"content?.displayBranding\">\r\n <div class=\"heading-small\">Made with <a class=\"heading-small\" href=\"https://simpo.ai\" target=\"_blank\"\r\n style=\"text-decoration: underline;\">Simpo</a></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </footer>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".container-fluid{margin-top:101px;color:#000!important}.card{background-color:#f8f9fb!important}p{font-size:calc(12px + (14 - 12) * ((100vw - 360px) / (1600 - 360)))!important;display:fkex}h3{font-size:calc(24px + (30 - 24) * ((100vw - 360px) / (1600 - 360)))!important}.social{font-size:21px!important}.color-text{color:#757575!important}footer{color:#caced1!important}li{margin-top:20px;margin-bottom:20px}.Careers{cursor:pointer;color:#1e88e5}.row-1{background-color:#1e242a!important}.row-2{background-color:#28323c!important}.made-with{text-align:end}@media only screen and (max-width : 475px){.made-with{text-align:start}.button-display{margin-left:0!important}}.button-display{display:flex;gap:10px}.total-container{height:auto;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
1837
1851
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
1838
1852
  type: Input
1839
1853
  }], index: [{
@@ -1845,6 +1859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
1845
1859
  }] } });
1846
1860
 
1847
1861
  class ImageCarouselSectionComponent extends BaseSection {
1862
+ // content: any;
1848
1863
  constructor(_eventService) {
1849
1864
  super();
1850
1865
  this._eventService = _eventService;
@@ -1860,8 +1875,16 @@ class ImageCarouselSectionComponent extends BaseSection {
1860
1875
  this.screenWidth = window.innerWidth;
1861
1876
  }
1862
1877
  }
1878
+ getPrevImage(index) {
1879
+ const prevIndex = (index - 1 + (this.content?.listItem?.data.length || 0)) % (this.content?.listItem.data.length || 0);
1880
+ return this.content?.listItem.data[prevIndex].image;
1881
+ }
1882
+ getNextImage(index) {
1883
+ const nextIndex = (index + 1) % (this.content?.listItem.data.length || 0);
1884
+ return this.content?.listItem.data[nextIndex].image;
1885
+ }
1863
1886
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ImageCarouselSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
1864
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <div class=\"row\">\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n <img class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n <img class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" style=\"width: 60%;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n </div>\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n <img class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
1887
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"5000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <div class=\"row\">\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n <!-- <img class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\">\r\n <img class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" style=\"width: 60%;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n <!-- <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\">\r\n </div>\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n <img class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
1865
1888
  //directive
1866
1889
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
1867
1890
  }
@@ -1890,7 +1913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
1890
1913
  PositionLayoutDirectiveDirective,
1891
1914
  TextBackgroundDirectiveDirective,
1892
1915
  ObjectPositionDirective
1893
- ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <div class=\"row\">\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n <img class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n <img class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" style=\"width: 60%;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n </div>\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n <img class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}\n"] }]
1916
+ ], template: "<section class=\"container-fluid\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\nclass=\"total-container\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row mlr-0\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"carouselExampleCaptions\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"5000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#carouselExampleCaptions\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\">\r\n <div class=\"row\">\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth >= 475\">\r\n <!-- <img class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\">\r\n <img class=\"d-block image-height-80vh\" [class]=\"data?.id+img.image.id\" style=\"width: 60%;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n <!-- <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\r\n <img class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\">\r\n </div>\r\n <div class=\"col d-flex\" *ngIf=\"screenWidth < 475\">\r\n <img class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-80vh{height:80vh;object-fit:cover}.image-height-40vh{height:40vh}.btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}@media only screen and (max-width: 475px){.previous-icon{width:44%}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}\n"] }]
1894
1917
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
1895
1918
  type: Input
1896
1919
  }], index: [{
@@ -2137,7 +2160,7 @@ class TestimonialSectionComponent extends BaseSection {
2137
2160
  this.deleteSelected = this.delete;
2138
2161
  }
2139
2162
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
2140
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\">\r\n <div style=\"width: 90%; margin: auto;\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img [src]=\"testimonial.image.url\" class=\"mb-1\">\r\n <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
2163
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"10000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\">\r\n <div style=\"width: 90%; margin: auto;\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img [src]=\"testimonial.image.url\" class=\"mb-1\">\r\n <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
2141
2164
  //directive
2142
2165
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
2143
2166
  }
@@ -2167,7 +2190,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
2167
2190
  PositionLayoutDirectiveDirective,
2168
2191
  TextBackgroundDirectiveDirective,
2169
2192
  ColorDirective
2170
- ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\">\r\n <div style=\"width: 90%; margin: auto;\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img [src]=\"testimonial.image.url\" class=\"mb-1\">\r\n <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
2193
+ ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large mb-1\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n\r\n <div id=\"testimonialCarousel\" class=\"carousel slide mb-1\" data-ride=\"carousel\" data-interval=\"10000\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\">\r\n <div style=\"width: 90%; margin: auto;\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <img [src]=\"testimonial.image.url\" class=\"mb-1\">\r\n <p class=\"heading-medium\">{{ testimonial.inputText[0].value }}</p>\r\n <span href=\"#\" class=\"py-2 px-4 mb-1\">- {{ testimonial.inputText[1].value }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialCarousel\" role=\"button\" data-bs-slide=\"next\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".total-container{height:auto;position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:1%;margin-right:1%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.previous-icon{position:absolute;height:45px}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}\n"] }]
2171
2194
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
2172
2195
  type: Input
2173
2196
  }], index: [{
@@ -2356,7 +2379,7 @@ class NavbarSectionComponent {
2356
2379
  this.showEditors = isShow;
2357
2380
  }
2358
2381
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
2359
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <nav class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\">\r\n <div class=\"w-50 left-logo-text\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"style?.background?.color\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0 mb-4\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
2382
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <nav class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'pt-0' : style?.layout?.spacing?.top === 'none', 'pb-0' : style?.layout?.spacing?.bottom === 'none'}\">\r\n <div class=\"container-fluid\">\r\n <div class=\"w-50 left-logo-text\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"style?.background?.color\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0 mb-4\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
2360
2383
  }
2361
2384
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, decorators: [{
2362
2385
  type: Component,
@@ -2378,7 +2401,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
2378
2401
  OverlayDirective,
2379
2402
  PositionLayoutDirectiveDirective,
2380
2403
  TextBackgroundDirectiveDirective,
2381
- ColorDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <nav class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\">\r\n <div class=\"w-50 left-logo-text\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"style?.background?.color\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0 mb-4\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}\n"] }]
2404
+ ColorDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <nav class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'pt-0' : style?.layout?.spacing?.top === 'none', 'pb-0' : style?.layout?.spacing?.bottom === 'none'}\">\r\n <div class=\"container-fluid\">\r\n <div class=\"w-50 left-logo-text\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"style?.background?.color\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"style?.background?.color\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0 mb-4\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth < 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"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 class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </nav>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;color:#fff;height:calc(100vh + -0px);z-index:101}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}\n"] }]
2382
2405
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
2383
2406
  type: Input
2384
2407
  }], index: [{