af-connect-components 0.0.4 → 0.0.6

package/fesm2020/af-connect-components.mjs

@@ -1,12 +1,13 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, Host, Optional, Input, Pipe, EventEmitter, Output, HostListener, NgModule } from '@angular/core';
-import { map, BehaviorSubject, take } from 'rxjs';
+import { Injectable, Component, ChangeDetectionStrategy, Host, Optional, Input, Pipe, EventEmitter, Output, HostListener, Directive, ContentChild, NgModule } from '@angular/core';
+import { map, BehaviorSubject, take, fromEvent } from 'rxjs';
 import * as i1 from '@angular/cdk/layout';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i2$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
+import { first } from 'rxjs/operators';
 
 class AfConnectComponentsService {
     constructor() { }
@@ -100,7 +101,7 @@ class ExpandableArrowComponent {
     ngOnInit() { }
 }
 ExpandableArrowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ExpandableArrowComponent, deps: [{ token: ExpandableWrapperComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ExpandableArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ExpandableArrowComponent, selector: "afc-expandable-arrow", ngImport: i0, template: "<span class=\"expandable-arrow\" #arrow>\r\n  <mat-icon [@expandableArrow]=\"(wrapper && wrapper.isExpanded$ | async) === true ? 'expanded' : 'collapsed'\">\r\n    arrow_forward_ios\r\n  </mat-icon>\r\n</span>\r\n", styles: [".mat-icon{width:18px;height:18px}.material-icons{font-size:18px}.expandable-arrow{color:#fff;opacity:70%}\n"], dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [trigger('expandableArrow', [
+ExpandableArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ExpandableArrowComponent, selector: "afc-expandable-arrow", ngImport: i0, template: "<span class=\"expandable-arrow\" #arrow>\r\n  <mat-icon [@expandableArrow]=\"(wrapper && wrapper.isExpanded$ | async) === true ? 'expanded' : 'collapsed'\">\r\n    arrow_forward_ios\r\n  </mat-icon>\r\n</span>\r\n", styles: [".mat-icon{width:18px;height:18px}.material-icons{font-size:18px}.expandable-arrow{color:#fff;opacity:70%}:host(.faq-arrow) .expandable-arrow{color:#124e57;opacity:100%}:host(.faq-arrow) .mat-icon{width:19px;height:19px}:host(.faq-arrow) .material-icons{font-size:19px}@media (max-width: 1024px){:host(.faq-arrow) .mat-icon{width:16px;height:16px}:host(.faq-arrow) .material-icons{font-size:16px}}\n"], dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], animations: [trigger('expandableArrow', [
             state('collapsed', style({ transform: 'rotate(0)' })),
             state('expanded', style({ transform: 'rotate(90deg)' })),
             transition('expanded <=> collapsed', animate('265ms ease-out')),
@@ -113,7 +114,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                             state('expanded', style({ transform: 'rotate(90deg)' })),
                             transition('expanded <=> collapsed', animate('265ms ease-out')),
                             transition('collapsed <=> expanded', animate('265ms ease-in'))
-                        ])], template: "<span class=\"expandable-arrow\" #arrow>\r\n  <mat-icon [@expandableArrow]=\"(wrapper && wrapper.isExpanded$ | async) === true ? 'expanded' : 'collapsed'\">\r\n    arrow_forward_ios\r\n  </mat-icon>\r\n</span>\r\n", styles: [".mat-icon{width:18px;height:18px}.material-icons{font-size:18px}.expandable-arrow{color:#fff;opacity:70%}\n"] }]
+                        ])], template: "<span class=\"expandable-arrow\" #arrow>\r\n  <mat-icon [@expandableArrow]=\"(wrapper && wrapper.isExpanded$ | async) === true ? 'expanded' : 'collapsed'\">\r\n    arrow_forward_ios\r\n  </mat-icon>\r\n</span>\r\n", styles: [".mat-icon{width:18px;height:18px}.material-icons{font-size:18px}.expandable-arrow{color:#fff;opacity:70%}:host(.faq-arrow) .expandable-arrow{color:#124e57;opacity:100%}:host(.faq-arrow) .mat-icon{width:19px;height:19px}:host(.faq-arrow) .material-icons{font-size:19px}@media (max-width: 1024px){:host(.faq-arrow) .mat-icon{width:16px;height:16px}:host(.faq-arrow) .material-icons{font-size:16px}}\n"] }]
         }], ctorParameters: function () { return [{ type: ExpandableWrapperComponent, decorators: [{
                     type: Host
                 }, {
@@ -132,6 +133,136 @@ class AfConnectFooterComponent {
            }
       
            Passing the exampleTestConfig will replace only the banner. Everything else will be loaded from the default config.
+      
+      
+           defaultConfig: FooterConfig = {
+          sections: [
+            {
+              title: 'COMPANY',
+              sectionItems: [
+                {
+                  title: 'Investor relations',
+                  link: 'https://investors.alexforbes.com/'
+                },
+                {
+                  title: 'Careers',
+                  link: 'https://www.alexforbes.com/za/en/about/careers.html'
+                },
+                {
+                  title: 'Procurement',
+                  link: 'https://www.alexforbes.com/za/en/about/procurement.html'
+                },
+                {
+                  title: 'Risk & Compliance',
+                  link: 'https://www.alexanderforbesinvestments.co.za/about-us/risk-and-compliance'
+                },
+              ]
+            },
+            {
+              title: 'PREVIOUS SITES',
+              sectionItems: [
+                {
+                  title: 'Group Website',
+                  link: 'https://za.alexforbes.com/home#Grow'
+                },
+                {
+                  title: 'Investments',
+                  link: 'https://investments.alexforbes.com/home#Risk-Led'
+                },
+                {
+                  title: 'Botswana',
+                  link: 'https://botswana.alexforbes.com/home'
+                },
+                {
+                  title: 'Namibia',
+                  link: 'https://namibia.alexforbes.com/home'
+                },
+                {
+                  title: 'Jersey',
+                  link: 'https://offshore.alexforbes.com/home'
+                },
+              ]
+            },
+            {
+              title: 'RESOURCES',
+              sectionItems: [
+                {
+                  title: 'Business directory',
+                  link: 'https://www.alexforbes.com/za/en/contact/business-directory.html'
+                },
+                {
+                  title: 'Compliments',
+                  link: 'https://www.alexforbes.com/za/en/contact/compliments.html'
+                },
+                {
+                  title: 'Complaints',
+                  link: 'https://www.alexforbes.com/za/en/contact/Complaints.html'
+                },
+                {
+                  title: 'Report fraud',
+                  link: 'https://www.alexforbes.com/za/en/contact/Report-fraud.html'
+                },
+                {
+                  title: 'Unclaimed benefits',
+                  link: 'https://www.alexforbes.com/za/en/corporate/products-corporate/unclaimed-benefits-fund.html'
+                },
+              ]
+            },
+          ],
+          address: [
+            {
+              title: 'Head Office',
+              sectionItems: [
+                {
+                  title: 'Contact information',
+                },
+                {
+                  title: 'Email : info@alexforbes.com',
+                },
+                {
+                  title: 'Telephone : +27 11 269 0000',
+                },
+                {
+                  title: 'Fax : +27 11 263 0149',
+                },
+              ]
+            },
+            {
+              title: '',
+              sectionItems: [
+                {
+                  title: 'Address',
+                },
+                {
+                  title: 'Alexforbes',
+                },
+                {
+                  title: '115 West Street',
+                },
+                {
+                  title: 'Sandton, 2196',
+                },
+              ]
+            },
+          ],
+          bannerTitle: 'Copyright 2022 Alexander Forbes Group Holdings Limited. Legal terms | Privacy policy | PAIA manual',
+          instagram: {
+            link: 'https://www.instagram.com/alexforbesofficial',
+            isHidden: false,
+          },
+          linkedIn: {
+            link: 'https://www.linkedin.com/company/alexforbesofficial',
+            isHidden: false,
+          },
+          facebook: {
+            link: 'https://www.facebook.com/alexforbesofficial/',
+            isHidden: false,
+          },
+          twitter: {
+            link: 'https://twitter.com/alexforbes',
+            isHidden: false,
+          }
+        }
            */
         this.defaultConfig = {
             sections: [
@@ -140,19 +271,19 @@ class AfConnectFooterComponent {
                     sectionItems: [
                         {
                             title: 'Investor relations',
-                            link: ''
+                            link: 'https://investors.alexforbes.com/'
                         },
                         {
                             title: 'Careers',
-                            link: ''
+                            link: 'https://www.alexforbes.com/za/en/about/careers.html'
                         },
                         {
                             title: 'Procurement',
-                            link: ''
+                            link: 'https://www.alexforbes.com/za/en/about/procurement.html'
                         },
                         {
                             title: 'Risk & Compliance',
-                            link: ''
+                            link: 'https://www.alexanderforbesinvestments.co.za/about-us/risk-and-compliance'
                         },
                     ]
                 },
@@ -161,23 +292,23 @@ class AfConnectFooterComponent {
                     sectionItems: [
                         {
                             title: 'Group Website',
-                            link: ''
+                            link: 'https://za.alexforbes.com/home#Grow'
                         },
                         {
                             title: 'Investments',
-                            link: ''
+                            link: 'https://investments.alexforbes.com/home#Risk-Led'
                         },
                         {
                             title: 'Botswana',
-                            link: ''
+                            link: 'https://botswana.alexforbes.com/home'
                         },
                         {
                             title: 'Namibia',
-                            link: ''
+                            link: 'https://namibia.alexforbes.com/home'
                         },
                         {
                             title: 'Jersey',
-                            link: ''
+                            link: 'https://offshore.alexforbes.com/home'
                         },
                     ]
                 },
@@ -186,23 +317,23 @@ class AfConnectFooterComponent {
                     sectionItems: [
                         {
                             title: 'Business directory',
-                            link: ''
+                            link: 'https://www.alexforbes.com/za/en/contact/business-directory.html'
                         },
                         {
                             title: 'Compliments',
-                            link: ''
+                            link: 'https://www.alexforbes.com/za/en/contact/compliments.html'
                         },
                         {
                             title: 'Complaints',
-                            link: ''
+                            link: 'https://www.alexforbes.com/za/en/contact/Complaints.html'
                         },
                         {
                             title: 'Report fraud',
-                            link: ''
+                            link: 'https://www.alexforbes.com/za/en/contact/Report-fraud.html'
                         },
                         {
                             title: 'Unclaimed benefits',
-                            link: ''
+                            link: 'https://www.alexforbes.com/za/en/corporate/products-corporate/unclaimed-benefits-fund.html'
                         },
                     ]
                 },
@@ -272,10 +403,10 @@ class AfConnectFooterComponent {
     }
 }
 AfConnectFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectFooterComponent, deps: [{ token: BreakpointLibService }], target: i0.ɵɵFactoryTarget.Component });
-AfConnectFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectFooterComponent, selector: "lib-af-connect-footer", inputs: { config: "config" }, ngImport: i0, template: "\r\n<div *ngIf=\"breakpointService.isMobile$ | async\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <h2 class=\"section-title\">\r\n            {{section.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                <a class=\"section-link\" [href]=\"link.link\">{{link.title}}</a>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" class=\"sections-container address-container\">\r\n        <h2 class=\"section-title address-title\">\r\n            {{address.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                <a class=\"section-link\" [href]=\"link.link\">{{link.title}}</a>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!(breakpointService.isMobile$ | async)\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <afc-expandable-wrapper>\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title\">\r\n                    {{section.title}}\r\n                </h2>\r\n                <afc-expandable-arrow></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                            <a class=\"section-link\" [href]=\"link.link\">{{link.title}}</a>\r\n                    </ng-container>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" [ngClass]=\"[\r\n    address.title ? 'sections-container address-container' : '']\">\r\n        <afc-expandable-wrapper *ngIf=\"address.title\">\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title address-title\">\r\n                    {{address.title}}\r\n                </h2>\r\n                <afc-expandable-arrow></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                        <a class=\"section-link\" [href]=\"link.link\">{{link.title}}</a>\r\n                    </ng-container>\r\n                    <a class=\"section-link\">{{getMobileAddress}}</a>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"bottom-banner\">\r\n    {{config?.bannerTitle ? config?.bannerTitle : defaultConfig.bannerTitle}}\r\n        \r\n    <div class=\"social-container\">\r\n        <a *ngIf=\"!config?.instagram?.isHidden\" class=\"image-container\" [href]=\"config?.instagram?.link ? config?.instagram?.link : defaultConfig.instagram?.link\">  \r\n            <svg id=\"Group_888\" data-name=\"Group 888\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"15.676\" viewBox=\"0 0 15.618 15.676\">\r\n                <path id=\"Path_8\" data-name=\"Path 8\" d=\"M21.327,13.4c1.039.037,2.115.037,3.154.074a5.31,5.31,0,0,1,2.6.668,3.937,3.937,0,0,1,1.892,2.746,21.051,21.051,0,0,1,.186,2.152c.037,1.558,0,3.117,0,4.675a7.553,7.553,0,0,1-.3,2.412,3.931,3.931,0,0,1-3.154,2.746,14.046,14.046,0,0,1-2.152.186c-1.559.037-3.08,0-4.638,0a7.553,7.553,0,0,1-2.412-.3,3.931,3.931,0,0,1-2.746-3.154,14.046,14.046,0,0,1-.186-2.152c-.037-1.558,0-3.117,0-4.675a7.553,7.553,0,0,1,.3-2.412,3.931,3.931,0,0,1,3.154-2.746,14.047,14.047,0,0,1,2.152-.186c.705-.037,1.41-.037,2.152-.037Zm6.42,7.681h0c-.037-.631-.037-1.225-.037-1.855a14.347,14.347,0,0,0-.111-1.781,2.653,2.653,0,0,0-2.226-2.486,9.8,9.8,0,0,0-2.078-.148c-1.336-.037-2.635-.037-3.97,0a11.414,11.414,0,0,0-1.967.148,2.616,2.616,0,0,0-2.226,1.93A5.813,5.813,0,0,0,14.945,18c-.037,1.41-.037,2.82-.037,4.23,0,.891.037,1.818.111,2.709a2.587,2.587,0,0,0,2.264,2.486,12.746,12.746,0,0,0,2.078.148c1.3.037,2.6,0,3.933,0a14.348,14.348,0,0,0,1.781-.111A2.594,2.594,0,0,0,26.6,26.87a2.848,2.848,0,0,0,1.039-2.264C27.71,23.493,27.71,22.306,27.747,21.081Z\" transform=\"translate(-13.556 -13.4)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_9\" data-name=\"Path 9\" d=\"M31.715,27.708a4.008,4.008,0,1,1-3.97-4.008A3.991,3.991,0,0,1,31.715,27.708Zm-4.008,2.6a2.6,2.6,0,1,0-2.6-2.6A2.581,2.581,0,0,0,27.708,30.3Z\" transform=\"translate(-19.936 -19.878)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_10\" data-name=\"Path 10\" d=\"M45.052,21.628a.951.951,0,0,1-.928.965.946.946,0,1,1,.928-.965Z\" transform=\"translate(-32.196 -17.991)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n            </a>\r\n        <a *ngIf=\"!config?.linkedIn?.isHidden\" class=\"image-container\" [href]=\"config?.linkedIn?.link ? config?.linkedIn?.link : defaultConfig.linkedIn?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"14.902\" viewBox=\"0 0 15.618 14.902\">\r\n                <path id=\"Path_7\" data-name=\"Path 7\" d=\"M32.818,24.635V30.4H29.45V25.014c0-1.347-.463-2.273-1.684-2.273a1.868,1.868,0,0,0-1.726,1.221,2.278,2.278,0,0,0-.126.8V30.4H22.546s.042-9.135,0-10.061h3.368v1.431a.041.041,0,0,1-.042.042h.042v-.042a3.363,3.363,0,0,1,3.031-1.684c2.189,0,3.873,1.473,3.873,4.546ZM19.094,15.5A1.753,1.753,0,0,0,17.2,17.226a1.716,1.716,0,0,0,1.852,1.726h.042a1.729,1.729,0,0,0,1.894-1.726A1.777,1.777,0,0,0,19.094,15.5ZM17.368,30.4h3.326V20.341H17.368Zm0,0\" transform=\"translate(-17.2 -15.5)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.facebook?.isHidden\" class=\"image-container\" [href]=\"config?.facebook?.link ? config?.facebook?.link : defaultConfig.facebook?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 7.235 15.618\">\r\n                <path id=\"Path_13\" data-name=\"Path 13\" d=\"M31.967,21.909H29.785v7.809H26.531V21.909H25V19.153h1.531v-1.8A3.032,3.032,0,0,1,29.785,14.1H32.2v2.68H30.474a.679.679,0,0,0-.689.766v1.608h2.45Zm0,0\" transform=\"translate(-25 -14.1)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.twitter?.isHidden\" class=\"image-container\" [href]=\"config?.twitter?.link ? config?.twitter?.link : defaultConfig.twitter?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"12.715\" viewBox=\"0 0 15.618 12.715\">\r\n                <path id=\"Path_6\" data-name=\"Path 6\" d=\"M28.818,18.707a6.2,6.2,0,0,1-1.837.514,3.165,3.165,0,0,0,1.4-1.764,6.762,6.762,0,0,1-2.021.772A3.248,3.248,0,0,0,24,17.2a3.2,3.2,0,0,0-3.2,3.2,4.524,4.524,0,0,0,.073.735,9.094,9.094,0,0,1-6.615-3.344,3.053,3.053,0,0,0-.441,1.617,3.213,3.213,0,0,0,1.433,2.683,2.946,2.946,0,0,1-1.47-.4v.037a3.231,3.231,0,0,0,2.572,3.16,3.132,3.132,0,0,1-.845.11,2.857,2.857,0,0,1-.588-.073,3.211,3.211,0,0,0,3.013,2.242,6.477,6.477,0,0,1-3.969,1.36,5.427,5.427,0,0,1-.772-.037A9.128,9.128,0,0,0,27.238,20.8v-.4a6.874,6.874,0,0,0,1.58-1.69Zm0,0\" transform=\"translate(-13.2 -17.2)\" fill=\"#f1f2f5\"/>\r\n              </svg>              \r\n        </a>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [":host{z-index:1000}.footer-container{font-family:Hero New SemiBold;background:#15808D;min-height:200px;position:relative;padding:3% 5% 2% 5.3%;z-index:1000;display:grid;grid-column-gap:4rem;grid-row-gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(190px,auto))}@media (min-width: 769px) and (max-width: 1023px){.footer-container{grid-column-gap:2rem}}@media (min-width: 1024px) and (max-width: 1200px){.footer-container{grid-column-gap:2rem}}@media (max-width: 768px){.footer-container{grid-column-gap:0px;grid-row-gap:0px;display:flex;flex-wrap:wrap;flex-direction:column;padding:0rem 1rem}}.sections-container,.sections-container__mobile{display:flex;flex-wrap:wrap;justify-content:flex-start;flex-direction:column;gap:.5rem}@media (max-width: 768px){.sections-container,.sections-container__mobile{gap:20px;border-bottom:1px solid white}}@media (max-width: 768px){.sections-container__mobile{padding-bottom:20px}}.sections-container .section-title,.sections-container__mobile .section-title{font-size:1.25rem;font-family:Hero New Bold;margin:0 0 12px;color:#f1f2f5}@media (max-width: 768px){.sections-container .section-title,.sections-container__mobile .section-title{margin:0;font-size:1.125rem}}.sections-container:last-of-type,.sections-container__mobile:last-of-type{border-bottom:none}.sections-container:nth-last-of-type(2),.sections-container__mobile:nth-last-of-type(2){border-bottom:none}.section-link{font-family:Hero New;color:#fff;text-decoration:none;opacity:70%}@media (max-width: 768px){.section-link{font-size:.875rem}}.bottom-banner{color:#f1f2f5;background:#124E57;border:1px solid #707070;padding:2% 5%;display:flex;justify-content:space-between;align-items:center;max-height:120px;position:relative;z-index:1001}@media (max-width: 768px){.bottom-banner{flex-direction:column;justify-content:center;text-align:center;gap:11px;align-items:center;font-size:.6875rem;padding:16px 8px;line-height:22px}}.social-container{display:flex;gap:40px;margin-left:4%}@media (max-width: 768px){.social-container{gap:35px;margin-left:0%}}.image-container{cursor:pointer;display:flex;justify-content:center;align-items:center;width:18px;height:18px}img{height:16px;width:16px}.section-link{cursor:pointer}.address-title{min-height:28px}.address-container a:first-of-type{opacity:100%}.title-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}@media (max-width: 768px){.title-container{padding-top:16px;padding-bottom:16px;width:100%}}.margin-div{width:100%;height:20px}\n"], dependencies: [{ 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: "component", type: ExpandableContainerComponent, selector: "afc-expandable-container" }, { kind: "component", type: ExpandableArrowComponent, selector: "afc-expandable-arrow" }, { kind: "component", type: ExpandableWrapperComponent, selector: "afc-expandable-wrapper" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
+AfConnectFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectFooterComponent, selector: "lib-af-connect-footer", inputs: { config: "config" }, ngImport: i0, template: "\r\n<div *ngIf=\"breakpointService.isMobile$ | async\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <h2 class=\"section-title\">\r\n            {{section.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                <a class=\"section-link\" [href]=\"link.link\">{{link.title}}</a>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" class=\"sections-container address-container\">\r\n        <h2 class=\"section-title address-title\">\r\n            {{address.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                <span class=\"section-link address-link\">{{link.title}}</span>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!(breakpointService.isMobile$ | async)\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <afc-expandable-wrapper>\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title\">\r\n                    {{section.title}}\r\n                </h2>\r\n                <afc-expandable-arrow></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                            <a class=\"section-link address-link\" [href]=\"link.link\">{{link.title}}</a>\r\n                    </ng-container>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" [ngClass]=\"[\r\n    address.title ? 'sections-container address-container' : '']\">\r\n        <afc-expandable-wrapper *ngIf=\"address.title\">\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title address-title\">\r\n                    {{address.title}}\r\n                </h2>\r\n                <afc-expandable-arrow></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                        <span class=\"section-link\">{{link.title}}</span>\r\n                    </ng-container>\r\n                    <span class=\"section-link address-link\">{{getMobileAddress}}</span>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"bottom-banner\">\r\n    {{config?.bannerTitle ? config?.bannerTitle : defaultConfig.bannerTitle}}\r\n        \r\n    <div class=\"social-container\">\r\n        <a *ngIf=\"!config?.instagram?.isHidden\" class=\"image-container\" [href]=\"config?.instagram?.link ? config?.instagram?.link : defaultConfig.instagram?.link\">  \r\n            <svg id=\"Group_888\" data-name=\"Group 888\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"15.676\" viewBox=\"0 0 15.618 15.676\">\r\n                <path id=\"Path_8\" data-name=\"Path 8\" d=\"M21.327,13.4c1.039.037,2.115.037,3.154.074a5.31,5.31,0,0,1,2.6.668,3.937,3.937,0,0,1,1.892,2.746,21.051,21.051,0,0,1,.186,2.152c.037,1.558,0,3.117,0,4.675a7.553,7.553,0,0,1-.3,2.412,3.931,3.931,0,0,1-3.154,2.746,14.046,14.046,0,0,1-2.152.186c-1.559.037-3.08,0-4.638,0a7.553,7.553,0,0,1-2.412-.3,3.931,3.931,0,0,1-2.746-3.154,14.046,14.046,0,0,1-.186-2.152c-.037-1.558,0-3.117,0-4.675a7.553,7.553,0,0,1,.3-2.412,3.931,3.931,0,0,1,3.154-2.746,14.047,14.047,0,0,1,2.152-.186c.705-.037,1.41-.037,2.152-.037Zm6.42,7.681h0c-.037-.631-.037-1.225-.037-1.855a14.347,14.347,0,0,0-.111-1.781,2.653,2.653,0,0,0-2.226-2.486,9.8,9.8,0,0,0-2.078-.148c-1.336-.037-2.635-.037-3.97,0a11.414,11.414,0,0,0-1.967.148,2.616,2.616,0,0,0-2.226,1.93A5.813,5.813,0,0,0,14.945,18c-.037,1.41-.037,2.82-.037,4.23,0,.891.037,1.818.111,2.709a2.587,2.587,0,0,0,2.264,2.486,12.746,12.746,0,0,0,2.078.148c1.3.037,2.6,0,3.933,0a14.348,14.348,0,0,0,1.781-.111A2.594,2.594,0,0,0,26.6,26.87a2.848,2.848,0,0,0,1.039-2.264C27.71,23.493,27.71,22.306,27.747,21.081Z\" transform=\"translate(-13.556 -13.4)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_9\" data-name=\"Path 9\" d=\"M31.715,27.708a4.008,4.008,0,1,1-3.97-4.008A3.991,3.991,0,0,1,31.715,27.708Zm-4.008,2.6a2.6,2.6,0,1,0-2.6-2.6A2.581,2.581,0,0,0,27.708,30.3Z\" transform=\"translate(-19.936 -19.878)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_10\" data-name=\"Path 10\" d=\"M45.052,21.628a.951.951,0,0,1-.928.965.946.946,0,1,1,.928-.965Z\" transform=\"translate(-32.196 -17.991)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n            </a>\r\n        <a *ngIf=\"!config?.linkedIn?.isHidden\" class=\"image-container\" [href]=\"config?.linkedIn?.link ? config?.linkedIn?.link : defaultConfig.linkedIn?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"14.902\" viewBox=\"0 0 15.618 14.902\">\r\n                <path id=\"Path_7\" data-name=\"Path 7\" d=\"M32.818,24.635V30.4H29.45V25.014c0-1.347-.463-2.273-1.684-2.273a1.868,1.868,0,0,0-1.726,1.221,2.278,2.278,0,0,0-.126.8V30.4H22.546s.042-9.135,0-10.061h3.368v1.431a.041.041,0,0,1-.042.042h.042v-.042a3.363,3.363,0,0,1,3.031-1.684c2.189,0,3.873,1.473,3.873,4.546ZM19.094,15.5A1.753,1.753,0,0,0,17.2,17.226a1.716,1.716,0,0,0,1.852,1.726h.042a1.729,1.729,0,0,0,1.894-1.726A1.777,1.777,0,0,0,19.094,15.5ZM17.368,30.4h3.326V20.341H17.368Zm0,0\" transform=\"translate(-17.2 -15.5)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.facebook?.isHidden\" class=\"image-container\" [href]=\"config?.facebook?.link ? config?.facebook?.link : defaultConfig.facebook?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 7.235 15.618\">\r\n                <path id=\"Path_13\" data-name=\"Path 13\" d=\"M31.967,21.909H29.785v7.809H26.531V21.909H25V19.153h1.531v-1.8A3.032,3.032,0,0,1,29.785,14.1H32.2v2.68H30.474a.679.679,0,0,0-.689.766v1.608h2.45Zm0,0\" transform=\"translate(-25 -14.1)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.twitter?.isHidden\" class=\"image-container\" [href]=\"config?.twitter?.link ? config?.twitter?.link : defaultConfig.twitter?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"12.715\" viewBox=\"0 0 15.618 12.715\">\r\n                <path id=\"Path_6\" data-name=\"Path 6\" d=\"M28.818,18.707a6.2,6.2,0,0,1-1.837.514,3.165,3.165,0,0,0,1.4-1.764,6.762,6.762,0,0,1-2.021.772A3.248,3.248,0,0,0,24,17.2a3.2,3.2,0,0,0-3.2,3.2,4.524,4.524,0,0,0,.073.735,9.094,9.094,0,0,1-6.615-3.344,3.053,3.053,0,0,0-.441,1.617,3.213,3.213,0,0,0,1.433,2.683,2.946,2.946,0,0,1-1.47-.4v.037a3.231,3.231,0,0,0,2.572,3.16,3.132,3.132,0,0,1-.845.11,2.857,2.857,0,0,1-.588-.073,3.211,3.211,0,0,0,3.013,2.242,6.477,6.477,0,0,1-3.969,1.36,5.427,5.427,0,0,1-.772-.037A9.128,9.128,0,0,0,27.238,20.8v-.4a6.874,6.874,0,0,0,1.58-1.69Zm0,0\" transform=\"translate(-13.2 -17.2)\" fill=\"#f1f2f5\"/>\r\n              </svg>              \r\n        </a>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [":host{z-index:1000}.footer-container{font-family:Hero New SemiBold;background:#15808D;min-height:200px;position:relative;padding:3% 5% 2% 5.3%;z-index:1000;display:grid;grid-column-gap:4rem;grid-row-gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(190px,auto))}@media (min-width: 769px) and (max-width: 1023px){.footer-container{grid-column-gap:2rem}}@media (min-width: 1024px) and (max-width: 1200px){.footer-container{grid-column-gap:2rem}}@media (max-width: 768px){.footer-container{grid-column-gap:0px;grid-row-gap:0px;display:flex;flex-wrap:wrap;flex-direction:column;padding:0rem 1rem}}.sections-container,.sections-container__mobile{display:flex;flex-wrap:wrap;justify-content:flex-start;flex-direction:column;gap:.5rem}@media (max-width: 768px){.sections-container,.sections-container__mobile{gap:20px;border-bottom:1px solid white}}@media (max-width: 768px){.sections-container__mobile{padding-bottom:20px}}.sections-container .section-title,.sections-container__mobile .section-title{font-size:1.25rem;font-family:Hero New Bold;margin:0 0 12px;color:#f1f2f5}@media (max-width: 768px){.sections-container .section-title,.sections-container__mobile .section-title{margin:0;font-size:1.125rem}}.sections-container:last-of-type,.sections-container__mobile:last-of-type{border-bottom:none}.sections-container:nth-last-of-type(2),.sections-container__mobile:nth-last-of-type(2){border-bottom:none}.section-link{font-family:Hero New;color:#fff;text-decoration:none;opacity:70%}.section-link.address-link{cursor:initial}@media (max-width: 768px){.section-link{font-size:.875rem}}@media (hover: hover){.section-link:hover{opacity:100%}}.bottom-banner{color:#f1f2f5;background:#124E57;border:1px solid #707070;padding:2% 5%;display:flex;justify-content:space-between;align-items:center;max-height:120px;position:relative;z-index:1001}@media (max-width: 768px){.bottom-banner{flex-direction:column;justify-content:center;text-align:center;gap:11px;align-items:center;font-size:.6875rem;padding:16px 8px;line-height:22px}}.social-container{display:flex;gap:40px;margin-left:4%}@media (max-width: 768px){.social-container{gap:35px;margin-left:0%}}.image-container{cursor:pointer;display:flex;justify-content:center;align-items:center;width:18px;height:18px}img{height:16px;width:16px}.section-link{cursor:pointer}.address-title{min-height:28px}.address-container a:first-of-type{opacity:100%}.title-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}@media (max-width: 768px){.title-container{padding-top:16px;padding-bottom:16px;width:100%}}.margin-div{width:100%;height:20px}\n"], dependencies: [{ 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: "component", type: ExpandableContainerComponent, selector: "afc-expandable-container" }, { kind: "component", type: ExpandableArrowComponent, selector: "afc-expandable-arrow" }, { kind: "component", type: ExpandableWrapperComponent, selector: "afc-expandable-wrapper" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectFooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-af-connect-footer', template: "\r\n<div *ngIf=\"breakpointService.isMobile$ | async\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <h2 class=\"section-title\">\r\n            {{section.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                <a class=\"section-link\" [href]=\"link.link\">{{link.title}}</a>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" class=\"sections-container address-container\">\r\n        <h2 class=\"section-title address-title\">\r\n            {{address.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                <a class=\"section-link\" [href]=\"link.link\">{{link.title}}</a>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!(breakpointService.isMobile$ | async)\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <afc-expandable-wrapper>\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title\">\r\n                    {{section.title}}\r\n                </h2>\r\n                <afc-expandable-arrow></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                            <a class=\"section-link\" [href]=\"link.link\">{{link.title}}</a>\r\n                    </ng-container>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" [ngClass]=\"[\r\n    address.title ? 'sections-container address-container' : '']\">\r\n        <afc-expandable-wrapper *ngIf=\"address.title\">\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title address-title\">\r\n                    {{address.title}}\r\n                </h2>\r\n                <afc-expandable-arrow></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                        <a class=\"section-link\" [href]=\"link.link\">{{link.title}}</a>\r\n                    </ng-container>\r\n                    <a class=\"section-link\">{{getMobileAddress}}</a>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"bottom-banner\">\r\n    {{config?.bannerTitle ? config?.bannerTitle : defaultConfig.bannerTitle}}\r\n        \r\n    <div class=\"social-container\">\r\n        <a *ngIf=\"!config?.instagram?.isHidden\" class=\"image-container\" [href]=\"config?.instagram?.link ? config?.instagram?.link : defaultConfig.instagram?.link\">  \r\n            <svg id=\"Group_888\" data-name=\"Group 888\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"15.676\" viewBox=\"0 0 15.618 15.676\">\r\n                <path id=\"Path_8\" data-name=\"Path 8\" d=\"M21.327,13.4c1.039.037,2.115.037,3.154.074a5.31,5.31,0,0,1,2.6.668,3.937,3.937,0,0,1,1.892,2.746,21.051,21.051,0,0,1,.186,2.152c.037,1.558,0,3.117,0,4.675a7.553,7.553,0,0,1-.3,2.412,3.931,3.931,0,0,1-3.154,2.746,14.046,14.046,0,0,1-2.152.186c-1.559.037-3.08,0-4.638,0a7.553,7.553,0,0,1-2.412-.3,3.931,3.931,0,0,1-2.746-3.154,14.046,14.046,0,0,1-.186-2.152c-.037-1.558,0-3.117,0-4.675a7.553,7.553,0,0,1,.3-2.412,3.931,3.931,0,0,1,3.154-2.746,14.047,14.047,0,0,1,2.152-.186c.705-.037,1.41-.037,2.152-.037Zm6.42,7.681h0c-.037-.631-.037-1.225-.037-1.855a14.347,14.347,0,0,0-.111-1.781,2.653,2.653,0,0,0-2.226-2.486,9.8,9.8,0,0,0-2.078-.148c-1.336-.037-2.635-.037-3.97,0a11.414,11.414,0,0,0-1.967.148,2.616,2.616,0,0,0-2.226,1.93A5.813,5.813,0,0,0,14.945,18c-.037,1.41-.037,2.82-.037,4.23,0,.891.037,1.818.111,2.709a2.587,2.587,0,0,0,2.264,2.486,12.746,12.746,0,0,0,2.078.148c1.3.037,2.6,0,3.933,0a14.348,14.348,0,0,0,1.781-.111A2.594,2.594,0,0,0,26.6,26.87a2.848,2.848,0,0,0,1.039-2.264C27.71,23.493,27.71,22.306,27.747,21.081Z\" transform=\"translate(-13.556 -13.4)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_9\" data-name=\"Path 9\" d=\"M31.715,27.708a4.008,4.008,0,1,1-3.97-4.008A3.991,3.991,0,0,1,31.715,27.708Zm-4.008,2.6a2.6,2.6,0,1,0-2.6-2.6A2.581,2.581,0,0,0,27.708,30.3Z\" transform=\"translate(-19.936 -19.878)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_10\" data-name=\"Path 10\" d=\"M45.052,21.628a.951.951,0,0,1-.928.965.946.946,0,1,1,.928-.965Z\" transform=\"translate(-32.196 -17.991)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n            </a>\r\n        <a *ngIf=\"!config?.linkedIn?.isHidden\" class=\"image-container\" [href]=\"config?.linkedIn?.link ? config?.linkedIn?.link : defaultConfig.linkedIn?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"14.902\" viewBox=\"0 0 15.618 14.902\">\r\n                <path id=\"Path_7\" data-name=\"Path 7\" d=\"M32.818,24.635V30.4H29.45V25.014c0-1.347-.463-2.273-1.684-2.273a1.868,1.868,0,0,0-1.726,1.221,2.278,2.278,0,0,0-.126.8V30.4H22.546s.042-9.135,0-10.061h3.368v1.431a.041.041,0,0,1-.042.042h.042v-.042a3.363,3.363,0,0,1,3.031-1.684c2.189,0,3.873,1.473,3.873,4.546ZM19.094,15.5A1.753,1.753,0,0,0,17.2,17.226a1.716,1.716,0,0,0,1.852,1.726h.042a1.729,1.729,0,0,0,1.894-1.726A1.777,1.777,0,0,0,19.094,15.5ZM17.368,30.4h3.326V20.341H17.368Zm0,0\" transform=\"translate(-17.2 -15.5)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.facebook?.isHidden\" class=\"image-container\" [href]=\"config?.facebook?.link ? config?.facebook?.link : defaultConfig.facebook?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 7.235 15.618\">\r\n                <path id=\"Path_13\" data-name=\"Path 13\" d=\"M31.967,21.909H29.785v7.809H26.531V21.909H25V19.153h1.531v-1.8A3.032,3.032,0,0,1,29.785,14.1H32.2v2.68H30.474a.679.679,0,0,0-.689.766v1.608h2.45Zm0,0\" transform=\"translate(-25 -14.1)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.twitter?.isHidden\" class=\"image-container\" [href]=\"config?.twitter?.link ? config?.twitter?.link : defaultConfig.twitter?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"12.715\" viewBox=\"0 0 15.618 12.715\">\r\n                <path id=\"Path_6\" data-name=\"Path 6\" d=\"M28.818,18.707a6.2,6.2,0,0,1-1.837.514,3.165,3.165,0,0,0,1.4-1.764,6.762,6.762,0,0,1-2.021.772A3.248,3.248,0,0,0,24,17.2a3.2,3.2,0,0,0-3.2,3.2,4.524,4.524,0,0,0,.073.735,9.094,9.094,0,0,1-6.615-3.344,3.053,3.053,0,0,0-.441,1.617,3.213,3.213,0,0,0,1.433,2.683,2.946,2.946,0,0,1-1.47-.4v.037a3.231,3.231,0,0,0,2.572,3.16,3.132,3.132,0,0,1-.845.11,2.857,2.857,0,0,1-.588-.073,3.211,3.211,0,0,0,3.013,2.242,6.477,6.477,0,0,1-3.969,1.36,5.427,5.427,0,0,1-.772-.037A9.128,9.128,0,0,0,27.238,20.8v-.4a6.874,6.874,0,0,0,1.58-1.69Zm0,0\" transform=\"translate(-13.2 -17.2)\" fill=\"#f1f2f5\"/>\r\n              </svg>              \r\n        </a>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [":host{z-index:1000}.footer-container{font-family:Hero New SemiBold;background:#15808D;min-height:200px;position:relative;padding:3% 5% 2% 5.3%;z-index:1000;display:grid;grid-column-gap:4rem;grid-row-gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(190px,auto))}@media (min-width: 769px) and (max-width: 1023px){.footer-container{grid-column-gap:2rem}}@media (min-width: 1024px) and (max-width: 1200px){.footer-container{grid-column-gap:2rem}}@media (max-width: 768px){.footer-container{grid-column-gap:0px;grid-row-gap:0px;display:flex;flex-wrap:wrap;flex-direction:column;padding:0rem 1rem}}.sections-container,.sections-container__mobile{display:flex;flex-wrap:wrap;justify-content:flex-start;flex-direction:column;gap:.5rem}@media (max-width: 768px){.sections-container,.sections-container__mobile{gap:20px;border-bottom:1px solid white}}@media (max-width: 768px){.sections-container__mobile{padding-bottom:20px}}.sections-container .section-title,.sections-container__mobile .section-title{font-size:1.25rem;font-family:Hero New Bold;margin:0 0 12px;color:#f1f2f5}@media (max-width: 768px){.sections-container .section-title,.sections-container__mobile .section-title{margin:0;font-size:1.125rem}}.sections-container:last-of-type,.sections-container__mobile:last-of-type{border-bottom:none}.sections-container:nth-last-of-type(2),.sections-container__mobile:nth-last-of-type(2){border-bottom:none}.section-link{font-family:Hero New;color:#fff;text-decoration:none;opacity:70%}@media (max-width: 768px){.section-link{font-size:.875rem}}.bottom-banner{color:#f1f2f5;background:#124E57;border:1px solid #707070;padding:2% 5%;display:flex;justify-content:space-between;align-items:center;max-height:120px;position:relative;z-index:1001}@media (max-width: 768px){.bottom-banner{flex-direction:column;justify-content:center;text-align:center;gap:11px;align-items:center;font-size:.6875rem;padding:16px 8px;line-height:22px}}.social-container{display:flex;gap:40px;margin-left:4%}@media (max-width: 768px){.social-container{gap:35px;margin-left:0%}}.image-container{cursor:pointer;display:flex;justify-content:center;align-items:center;width:18px;height:18px}img{height:16px;width:16px}.section-link{cursor:pointer}.address-title{min-height:28px}.address-container a:first-of-type{opacity:100%}.title-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}@media (max-width: 768px){.title-container{padding-top:16px;padding-bottom:16px;width:100%}}.margin-div{width:100%;height:20px}\n"] }]
+            args: [{ selector: 'lib-af-connect-footer', template: "\r\n<div *ngIf=\"breakpointService.isMobile$ | async\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <h2 class=\"section-title\">\r\n            {{section.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                <a class=\"section-link\" [href]=\"link.link\">{{link.title}}</a>\r\n        </ng-container>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" class=\"sections-container address-container\">\r\n        <h2 class=\"section-title address-title\">\r\n            {{address.title}}\r\n        </h2>\r\n        <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                <span class=\"section-link address-link\">{{link.title}}</span>\r\n        </ng-container>\r\n    </div>\r\n</div>\r\n\r\n<div *ngIf=\"!(breakpointService.isMobile$ | async)\"  class=\"footer-container\">\r\n    <div *ngFor=\"let section of config?.sections?.length ? config?.sections : defaultConfig.sections\" class=\"sections-container\">\r\n        <afc-expandable-wrapper>\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title\">\r\n                    {{section.title}}\r\n                </h2>\r\n                <afc-expandable-arrow></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of section.sectionItems\">\r\n                            <a class=\"section-link address-link\" [href]=\"link.link\">{{link.title}}</a>\r\n                    </ng-container>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n    <div *ngFor=\"let address of config?.address?.length ? config?.address : defaultConfig.address\" [ngClass]=\"[\r\n    address.title ? 'sections-container address-container' : '']\">\r\n        <afc-expandable-wrapper *ngIf=\"address.title\">\r\n            <div triggerable class=\"title-container\">\r\n                <h2 class=\"section-title address-title\">\r\n                    {{address.title}}\r\n                </h2>\r\n                <afc-expandable-arrow></afc-expandable-arrow>\r\n            </div>\r\n            <afc-expandable-container>\r\n                <div class=\"sections-container__mobile\">\r\n                    <ng-container *ngFor=\"let link of address.sectionItems\">\r\n                        <span class=\"section-link\">{{link.title}}</span>\r\n                    </ng-container>\r\n                    <span class=\"section-link address-link\">{{getMobileAddress}}</span>\r\n                </div>\r\n            </afc-expandable-container>\r\n        </afc-expandable-wrapper>\r\n    </div>\r\n</div>\r\n\r\n<div class=\"bottom-banner\">\r\n    {{config?.bannerTitle ? config?.bannerTitle : defaultConfig.bannerTitle}}\r\n        \r\n    <div class=\"social-container\">\r\n        <a *ngIf=\"!config?.instagram?.isHidden\" class=\"image-container\" [href]=\"config?.instagram?.link ? config?.instagram?.link : defaultConfig.instagram?.link\">  \r\n            <svg id=\"Group_888\" data-name=\"Group 888\" xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"15.676\" viewBox=\"0 0 15.618 15.676\">\r\n                <path id=\"Path_8\" data-name=\"Path 8\" d=\"M21.327,13.4c1.039.037,2.115.037,3.154.074a5.31,5.31,0,0,1,2.6.668,3.937,3.937,0,0,1,1.892,2.746,21.051,21.051,0,0,1,.186,2.152c.037,1.558,0,3.117,0,4.675a7.553,7.553,0,0,1-.3,2.412,3.931,3.931,0,0,1-3.154,2.746,14.046,14.046,0,0,1-2.152.186c-1.559.037-3.08,0-4.638,0a7.553,7.553,0,0,1-2.412-.3,3.931,3.931,0,0,1-2.746-3.154,14.046,14.046,0,0,1-.186-2.152c-.037-1.558,0-3.117,0-4.675a7.553,7.553,0,0,1,.3-2.412,3.931,3.931,0,0,1,3.154-2.746,14.047,14.047,0,0,1,2.152-.186c.705-.037,1.41-.037,2.152-.037Zm6.42,7.681h0c-.037-.631-.037-1.225-.037-1.855a14.347,14.347,0,0,0-.111-1.781,2.653,2.653,0,0,0-2.226-2.486,9.8,9.8,0,0,0-2.078-.148c-1.336-.037-2.635-.037-3.97,0a11.414,11.414,0,0,0-1.967.148,2.616,2.616,0,0,0-2.226,1.93A5.813,5.813,0,0,0,14.945,18c-.037,1.41-.037,2.82-.037,4.23,0,.891.037,1.818.111,2.709a2.587,2.587,0,0,0,2.264,2.486,12.746,12.746,0,0,0,2.078.148c1.3.037,2.6,0,3.933,0a14.348,14.348,0,0,0,1.781-.111A2.594,2.594,0,0,0,26.6,26.87a2.848,2.848,0,0,0,1.039-2.264C27.71,23.493,27.71,22.306,27.747,21.081Z\" transform=\"translate(-13.556 -13.4)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_9\" data-name=\"Path 9\" d=\"M31.715,27.708a4.008,4.008,0,1,1-3.97-4.008A3.991,3.991,0,0,1,31.715,27.708Zm-4.008,2.6a2.6,2.6,0,1,0-2.6-2.6A2.581,2.581,0,0,0,27.708,30.3Z\" transform=\"translate(-19.936 -19.878)\" fill=\"#f1f2f5\"/>\r\n                <path id=\"Path_10\" data-name=\"Path 10\" d=\"M45.052,21.628a.951.951,0,0,1-.928.965.946.946,0,1,1,.928-.965Z\" transform=\"translate(-32.196 -17.991)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n            </a>\r\n        <a *ngIf=\"!config?.linkedIn?.isHidden\" class=\"image-container\" [href]=\"config?.linkedIn?.link ? config?.linkedIn?.link : defaultConfig.linkedIn?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"14.902\" viewBox=\"0 0 15.618 14.902\">\r\n                <path id=\"Path_7\" data-name=\"Path 7\" d=\"M32.818,24.635V30.4H29.45V25.014c0-1.347-.463-2.273-1.684-2.273a1.868,1.868,0,0,0-1.726,1.221,2.278,2.278,0,0,0-.126.8V30.4H22.546s.042-9.135,0-10.061h3.368v1.431a.041.041,0,0,1-.042.042h.042v-.042a3.363,3.363,0,0,1,3.031-1.684c2.189,0,3.873,1.473,3.873,4.546ZM19.094,15.5A1.753,1.753,0,0,0,17.2,17.226a1.716,1.716,0,0,0,1.852,1.726h.042a1.729,1.729,0,0,0,1.894-1.726A1.777,1.777,0,0,0,19.094,15.5ZM17.368,30.4h3.326V20.341H17.368Zm0,0\" transform=\"translate(-17.2 -15.5)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.facebook?.isHidden\" class=\"image-container\" [href]=\"config?.facebook?.link ? config?.facebook?.link : defaultConfig.facebook?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"15\" viewBox=\"0 0 7.235 15.618\">\r\n                <path id=\"Path_13\" data-name=\"Path 13\" d=\"M31.967,21.909H29.785v7.809H26.531V21.909H25V19.153h1.531v-1.8A3.032,3.032,0,0,1,29.785,14.1H32.2v2.68H30.474a.679.679,0,0,0-.689.766v1.608h2.45Zm0,0\" transform=\"translate(-25 -14.1)\" fill=\"#f1f2f5\"/>\r\n              </svg>\r\n        </a>\r\n        <a *ngIf=\"!config?.twitter?.isHidden\" class=\"image-container\" [href]=\"config?.twitter?.link ? config?.twitter?.link : defaultConfig.twitter?.link\">  \r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"15.618\" height=\"12.715\" viewBox=\"0 0 15.618 12.715\">\r\n                <path id=\"Path_6\" data-name=\"Path 6\" d=\"M28.818,18.707a6.2,6.2,0,0,1-1.837.514,3.165,3.165,0,0,0,1.4-1.764,6.762,6.762,0,0,1-2.021.772A3.248,3.248,0,0,0,24,17.2a3.2,3.2,0,0,0-3.2,3.2,4.524,4.524,0,0,0,.073.735,9.094,9.094,0,0,1-6.615-3.344,3.053,3.053,0,0,0-.441,1.617,3.213,3.213,0,0,0,1.433,2.683,2.946,2.946,0,0,1-1.47-.4v.037a3.231,3.231,0,0,0,2.572,3.16,3.132,3.132,0,0,1-.845.11,2.857,2.857,0,0,1-.588-.073,3.211,3.211,0,0,0,3.013,2.242,6.477,6.477,0,0,1-3.969,1.36,5.427,5.427,0,0,1-.772-.037A9.128,9.128,0,0,0,27.238,20.8v-.4a6.874,6.874,0,0,0,1.58-1.69Zm0,0\" transform=\"translate(-13.2 -17.2)\" fill=\"#f1f2f5\"/>\r\n              </svg>              \r\n        </a>\r\n    </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n", styles: [":host{z-index:1000}.footer-container{font-family:Hero New SemiBold;background:#15808D;min-height:200px;position:relative;padding:3% 5% 2% 5.3%;z-index:1000;display:grid;grid-column-gap:4rem;grid-row-gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(190px,auto))}@media (min-width: 769px) and (max-width: 1023px){.footer-container{grid-column-gap:2rem}}@media (min-width: 1024px) and (max-width: 1200px){.footer-container{grid-column-gap:2rem}}@media (max-width: 768px){.footer-container{grid-column-gap:0px;grid-row-gap:0px;display:flex;flex-wrap:wrap;flex-direction:column;padding:0rem 1rem}}.sections-container,.sections-container__mobile{display:flex;flex-wrap:wrap;justify-content:flex-start;flex-direction:column;gap:.5rem}@media (max-width: 768px){.sections-container,.sections-container__mobile{gap:20px;border-bottom:1px solid white}}@media (max-width: 768px){.sections-container__mobile{padding-bottom:20px}}.sections-container .section-title,.sections-container__mobile .section-title{font-size:1.25rem;font-family:Hero New Bold;margin:0 0 12px;color:#f1f2f5}@media (max-width: 768px){.sections-container .section-title,.sections-container__mobile .section-title{margin:0;font-size:1.125rem}}.sections-container:last-of-type,.sections-container__mobile:last-of-type{border-bottom:none}.sections-container:nth-last-of-type(2),.sections-container__mobile:nth-last-of-type(2){border-bottom:none}.section-link{font-family:Hero New;color:#fff;text-decoration:none;opacity:70%}.section-link.address-link{cursor:initial}@media (max-width: 768px){.section-link{font-size:.875rem}}@media (hover: hover){.section-link:hover{opacity:100%}}.bottom-banner{color:#f1f2f5;background:#124E57;border:1px solid #707070;padding:2% 5%;display:flex;justify-content:space-between;align-items:center;max-height:120px;position:relative;z-index:1001}@media (max-width: 768px){.bottom-banner{flex-direction:column;justify-content:center;text-align:center;gap:11px;align-items:center;font-size:.6875rem;padding:16px 8px;line-height:22px}}.social-container{display:flex;gap:40px;margin-left:4%}@media (max-width: 768px){.social-container{gap:35px;margin-left:0%}}.image-container{cursor:pointer;display:flex;justify-content:center;align-items:center;width:18px;height:18px}img{height:16px;width:16px}.section-link{cursor:pointer}.address-title{min-height:28px}.address-container a:first-of-type{opacity:100%}.title-container{display:flex;justify-content:space-between;align-items:center;cursor:pointer}@media (max-width: 768px){.title-container{padding-top:16px;padding-bottom:16px;width:100%}}.margin-div{width:100%;height:20px}\n"] }]
         }], ctorParameters: function () { return [{ type: BreakpointLibService }]; }, propDecorators: { config: [{
                 type: Input
             }] } });
@@ -285,6 +416,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
  */
 class GetinItialsPipe {
     transform(value) {
+        if (!value) {
+            return '';
+        }
         return value.split(' ').map(word => word.charAt(0)).join('').slice(0, 2);
     }
 }
@@ -362,6 +496,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                 type: Output
             }] } });
 
+class FaqItemComponent {
+}
+FaqItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FaqItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FaqItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: FaqItemComponent, selector: "lib-faq-item", inputs: { faqItem: "faqItem" }, ngImport: i0, template: "<div class=\"item-container\">\r\n    <afc-expandable-wrapper>\r\n        <div triggerable class=\"title-container\">\r\n            <h2 class=\"section-title\">\r\n                {{faqItem.title}}\r\n            </h2>\r\n            <afc-expandable-arrow ngClass=\"faq-arrow\"></afc-expandable-arrow>\r\n        </div>\r\n        <afc-expandable-container>\r\n            <div class=\"expanded-info\">\r\n                {{faqItem.description}}\r\n            </div>\r\n        </afc-expandable-container>\r\n    </afc-expandable-wrapper>\r\n</div>", styles: [".item-container{border:1px solid #124E57;border-radius:5px}.title-container{padding:clamp(1rem,4%,27px);display:flex;justify-content:space-between;align-items:center;cursor:pointer;background:none}@media (max-width: 1024px){.title-container{padding:clamp(1rem,2.2%,27px)}}.expanded-info{padding:0rem clamp(1rem,4%,27px) clamp(1rem,4%,27px) clamp(1rem,4%,27px);color:#707070;font-family:Hero New;font-size:1rem}@media (max-width: 1024px){.expanded-info{padding:0rem clamp(1rem,2.2%,27px) clamp(1rem,2.2%,27px) clamp(1rem,2.2%,27px);font-size:.875rem}}@media (max-width: 768px){.expanded-info{margin:0;font-size:.75rem}}.section-title{margin:0;font-size:1.25rem;font-family:Hero New SemiBold;color:#124e57}@media (max-width: 1024px){.section-title{font-size:1rem}}@media (max-width: 768px){.section-title{margin:0;font-size:.875rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ExpandableContainerComponent, selector: "afc-expandable-container" }, { kind: "component", type: ExpandableArrowComponent, selector: "afc-expandable-arrow" }, { kind: "component", type: ExpandableWrapperComponent, selector: "afc-expandable-wrapper" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FaqItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-faq-item', template: "<div class=\"item-container\">\r\n    <afc-expandable-wrapper>\r\n        <div triggerable class=\"title-container\">\r\n            <h2 class=\"section-title\">\r\n                {{faqItem.title}}\r\n            </h2>\r\n            <afc-expandable-arrow ngClass=\"faq-arrow\"></afc-expandable-arrow>\r\n        </div>\r\n        <afc-expandable-container>\r\n            <div class=\"expanded-info\">\r\n                {{faqItem.description}}\r\n            </div>\r\n        </afc-expandable-container>\r\n    </afc-expandable-wrapper>\r\n</div>", styles: [".item-container{border:1px solid #124E57;border-radius:5px}.title-container{padding:clamp(1rem,4%,27px);display:flex;justify-content:space-between;align-items:center;cursor:pointer;background:none}@media (max-width: 1024px){.title-container{padding:clamp(1rem,2.2%,27px)}}.expanded-info{padding:0rem clamp(1rem,4%,27px) clamp(1rem,4%,27px) clamp(1rem,4%,27px);color:#707070;font-family:Hero New;font-size:1rem}@media (max-width: 1024px){.expanded-info{padding:0rem clamp(1rem,2.2%,27px) clamp(1rem,2.2%,27px) clamp(1rem,2.2%,27px);font-size:.875rem}}@media (max-width: 768px){.expanded-info{margin:0;font-size:.75rem}}.section-title{margin:0;font-size:1.25rem;font-family:Hero New SemiBold;color:#124e57}@media (max-width: 1024px){.section-title{font-size:1rem}}@media (max-width: 768px){.section-title{margin:0;font-size:.875rem}}\n"] }]
+        }], propDecorators: { faqItem: [{
+                type: Input
+            }] } });
+
+class ImageWithFallbackDirective {
+    constructor(el) {
+        this.el = el;
+    }
+}
+ImageWithFallbackDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ImageWithFallbackDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ImageWithFallbackDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.0", type: ImageWithFallbackDirective, selector: "[imgWithFallback]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ImageWithFallbackDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[imgWithFallback]' }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+var ImageState;
+(function (ImageState) {
+    ImageState["loading"] = "loading";
+    ImageState["error"] = "error";
+    ImageState["loaded"] = "loaded";
+})(ImageState || (ImageState = {}));
+class ImageWithFallbackComponent {
+    constructor() {
+        this.state = ImageState.loading;
+    }
+    get loaded() {
+        return this.state === ImageState.loaded;
+    }
+    get loading() {
+        return this.state === ImageState.loading;
+    }
+    get error() {
+        return this.state === ImageState.error;
+    }
+    ngAfterContentInit() {
+        fromEvent(this.image.el.nativeElement, 'load')
+            .pipe(first())
+            .subscribe(() => this.state = ImageState.loaded);
+        fromEvent(this.image.el.nativeElement, 'error')
+            .pipe(first())
+            .subscribe(() => this.state = ImageState.error);
+    }
+}
+ImageWithFallbackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ImageWithFallbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ImageWithFallbackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ImageWithFallbackComponent, selector: "img-with-fallback", queries: [{ propertyName: "image", first: true, predicate: ImageWithFallbackDirective, descendants: true }], ngImport: i0, template: `
+  <ng-container *ngIf="loaded">
+  <ng-content select="[imgWithFallback]" [style.visibility]="loaded"></ng-content>
+  </ng-container>
+  <div *ngIf="loading">
+    <ng-content select=".loading"></ng-content>
+  </div>
+  <div *ngIf="error">
+    <ng-content select=".error"></ng-content>
+  </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ImageWithFallbackComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'img-with-fallback', template: `
+  <ng-container *ngIf="loaded">
+  <ng-content select="[imgWithFallback]" [style.visibility]="loaded"></ng-content>
+  </ng-container>
+  <div *ngIf="loading">
+    <ng-content select=".loading"></ng-content>
+  </div>
+  <div *ngIf="error">
+    <ng-content select=".error"></ng-content>
+  </div>
+  ` }]
+        }], propDecorators: { image: [{
+                type: ContentChild,
+                args: [ImageWithFallbackDirective]
+            }] } });
+
+class FaqComponent {
+    constructor() {
+        this.faqItems = [];
+    }
+}
+FaqComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FaqComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FaqComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: FaqComponent, selector: "lib-faq", inputs: { faqItems: "faqItems", fallBackImageSrc: "fallBackImageSrc", imageSrc: "imageSrc" }, ngImport: i0, template: "<div class=\"faq-container\">\r\n    <div class=\"item-container\">\r\n        <ng-container *ngFor=\"let item of faqItems\">\r\n            <lib-faq-item [faqItem]=\"item\"></lib-faq-item>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"image-container\">\r\n    <img-with-fallback>\r\n        <img imgWithFallback class=\"faq-image\" [src]=\"imageSrc\">\r\n        <img class=\"error faq-image\" [src]=\"fallBackImageSrc\">\r\n    </img-with-fallback>\r\n    </div>\r\n</div>\r\n", styles: [".item-container{display:flex;flex-direction:column;gap:15px;max-width:55%;min-width:40%}@media (max-width: 1351px){.item-container{min-width:100%}}@media (max-width: 1024px){.item-container{gap:10px}}.image-container{max-width:45%;margin-right:5%}@media (max-width: 1351px){.image-container{display:none}}.faq-image{width:370px;height:370px}.faq-container{gap:2rem;display:flex;flex-wrap:wrap;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FaqItemComponent, selector: "lib-faq-item", inputs: ["faqItem"] }, { kind: "directive", type: ImageWithFallbackDirective, selector: "[imgWithFallback]" }, { kind: "component", type: ImageWithFallbackComponent, selector: "img-with-fallback" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: FaqComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-faq', template: "<div class=\"faq-container\">\r\n    <div class=\"item-container\">\r\n        <ng-container *ngFor=\"let item of faqItems\">\r\n            <lib-faq-item [faqItem]=\"item\"></lib-faq-item>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"image-container\">\r\n    <img-with-fallback>\r\n        <img imgWithFallback class=\"faq-image\" [src]=\"imageSrc\">\r\n        <img class=\"error faq-image\" [src]=\"fallBackImageSrc\">\r\n    </img-with-fallback>\r\n    </div>\r\n</div>\r\n", styles: [".item-container{display:flex;flex-direction:column;gap:15px;max-width:55%;min-width:40%}@media (max-width: 1351px){.item-container{min-width:100%}}@media (max-width: 1024px){.item-container{gap:10px}}.image-container{max-width:45%;margin-right:5%}@media (max-width: 1351px){.image-container{display:none}}.faq-image{width:370px;height:370px}.faq-container{gap:2rem;display:flex;flex-wrap:wrap;justify-content:space-between}\n"] }]
+        }], propDecorators: { faqItems: [{
+                type: Input
+            }], fallBackImageSrc: [{
+                type: Input
+            }], imageSrc: [{
+                type: Input
+            }] } });
+
+const defaultConfig = [
+    {
+        imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/mmm-carousel.jpg',
+        title: 'My Money Matters',
+        content: 'Get the most out of your money. Explore ways to make your money and savings work for you with our tools.',
+        readMore: 'https://mymoneymatters.alexforbes.com/'
+    },
+    {
+        imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/AF-Rewards-carousel.jpg',
+        title: 'My Rewards',
+        content: 'Exclusive savings from big brands.',
+        readMore: 'https://rewards.alexforbes.com/landingpage'
+    },
+    {
+        imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/Unit-trusts-carousel.jpg',
+        title: 'Unit Trusts',
+        content: 'Invest from as little as R500.00 a month to up to R30 000.00 up front toward a personal goal.',
+        readMore: 'https://www.alexforbes.com/za/en/individual/investing-for-a-goal.html'
+    },
+    {
+        imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/AF-Plus-carousel.jpg',
+        title: 'AF+',
+        content: 'Guided by expert advisers and fulfilled by trusted partners, making it easy to solve life’s financial challenges with confidence.',
+        readMore: 'https://plus.alexforbes.com/'
+    },
+];
+
+class ImageCardComponent {
+    constructor() {
+        this.title = '';
+        this.content = '';
+    }
+    ngOnInit() { }
+    openReadMore() {
+        window.open(this.readMoreLink, '_blank');
+    }
+}
+ImageCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ImageCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ImageCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: ImageCardComponent, selector: "af-connect-image-card", inputs: { src: "src", title: "title", content: "content", readMoreLink: "readMoreLink" }, ngImport: i0, template: "<img [src]=\"src\" />\r\n<div class=\"info-container\">\r\n  <span class=\"info-container__title\">{{ title }}</span>\r\n  <span class=\"info-container__content\">{{ content }}</span>\r\n</div>\r\n<button class=\"button-read-more\" (click)=\"openReadMore()\">Read more</button>\r\n", styles: [":host{width:325px;border-radius:5px;box-shadow:5px 5px 10px #00000029;background:#FAFBFC}@media (max-width: 768px){:host{width:295px;display:flex;position:relative;align-items:center;border:1px solid #124E57;box-shadow:0 -5px 10px #455b6314}}.info-container{display:flex;flex-direction:column;align-items:flex-start;padding:1rem;gap:1rem;height:8rem;border-radius:5px}.info-container__title{font-size:16px;font-family:Hero New Bold;color:#124e57}@media (max-width: 768px){.info-container__title{font-size:14px;padding-top:1rem}}.info-container__content{font-size:12px;line-height:20px;color:#78849e}@media (max-width: 768px){.info-container__content{font-size:11px;line-height:1rem}}@media (max-width: 768px){.info-container{gap:5px;padding:0 0 0 6rem;width:20rem;height:9rem;place-content:start}}img{width:325px;border-radius:5px 5px 0 0}@media (max-width: 768px){img{width:120px;height:120px;position:absolute;left:-2rem;border-radius:5px}}.button-read-more{background:none;color:inherit;border:none;margin:0;padding:0;cursor:pointer;outline:inherit;font-size:12px;color:#ff521c;font-size:14px;font-family:Hero New Bold;position:relative;bottom:1rem;left:1rem}@media (max-width: 768px){.button-read-more{position:absolute;bottom:1rem;left:6rem;font-size:11px}}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: ImageCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'af-connect-image-card', template: "<img [src]=\"src\" />\r\n<div class=\"info-container\">\r\n  <span class=\"info-container__title\">{{ title }}</span>\r\n  <span class=\"info-container__content\">{{ content }}</span>\r\n</div>\r\n<button class=\"button-read-more\" (click)=\"openReadMore()\">Read more</button>\r\n", styles: [":host{width:325px;border-radius:5px;box-shadow:5px 5px 10px #00000029;background:#FAFBFC}@media (max-width: 768px){:host{width:295px;display:flex;position:relative;align-items:center;border:1px solid #124E57;box-shadow:0 -5px 10px #455b6314}}.info-container{display:flex;flex-direction:column;align-items:flex-start;padding:1rem;gap:1rem;height:8rem;border-radius:5px}.info-container__title{font-size:16px;font-family:Hero New Bold;color:#124e57}@media (max-width: 768px){.info-container__title{font-size:14px;padding-top:1rem}}.info-container__content{font-size:12px;line-height:20px;color:#78849e}@media (max-width: 768px){.info-container__content{font-size:11px;line-height:1rem}}@media (max-width: 768px){.info-container{gap:5px;padding:0 0 0 6rem;width:20rem;height:9rem;place-content:start}}img{width:325px;border-radius:5px 5px 0 0}@media (max-width: 768px){img{width:120px;height:120px;position:absolute;left:-2rem;border-radius:5px}}.button-read-more{background:none;color:inherit;border:none;margin:0;padding:0;cursor:pointer;outline:inherit;font-size:12px;color:#ff521c;font-size:14px;font-family:Hero New Bold;position:relative;bottom:1rem;left:1rem}@media (max-width: 768px){.button-read-more{position:absolute;bottom:1rem;left:6rem;font-size:11px}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { src: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], content: [{
+                type: Input
+            }], readMoreLink: [{
+                type: Input
+            }] } });
+
+class AfConnectProductsCarouselComponent {
+    constructor(elementRef) {
+        this.elementRef = elementRef;
+        this.defaultConfig = defaultConfig;
+        this.isDown = false;
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        this.slider = this.elementRef.nativeElement.querySelector('.holder');
+    }
+    mousedown(e) {
+        this.isDown = true;
+        this.slider.classList.add('active');
+        this.startX = e.pageX - this.slider.offsetLeft;
+        this.scrollLeft = this.slider.scrollLeft;
+    }
+    mouseleave() {
+        this.isDown = false;
+        this.slider.classList.remove('active');
+    }
+    mouseup() {
+        this.isDown = false;
+        this.slider.classList.remove('active');
+    }
+    mousemove(e) {
+        if (!this.isDown)
+            return;
+        e.preventDefault();
+        const offset = e.pageX - this.slider.offsetLeft;
+        const walk = (offset - this.startX) * 2;
+        this.slider.scrollLeft = this.scrollLeft - walk;
+    }
+}
+AfConnectProductsCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectProductsCarouselComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+AfConnectProductsCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: AfConnectProductsCarouselComponent, selector: "lib-af-connect-products-carousel", inputs: { config: "config" }, ngImport: i0, template: "<div\r\n    class=\"holder\"\r\n    (mousedown)=\"mousedown($event)\"\r\n    (mouseleave)=\"mouseleave()\"\r\n    (mouseup)=\"mouseup()\"\r\n    (mousemove)=\"mousemove($event)\"\r\n>\r\n    <ng-container *ngFor=\"let card of config || defaultConfig\">\r\n        <af-connect-image-card\r\n            [src]=\"card.imageSrc\"\r\n            [title]=\"card.title\"\r\n            [content]=\"card.content\"\r\n            [readMoreLink]=\"card.readMore\"\r\n        ></af-connect-image-card>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex}@media (max-width: 768px){:host{padding:0}}.holder{display:flex;padding:0 1rem 1rem 0;flex-direction:row;gap:1.5rem;flex-wrap:nowrap;overflow-x:scroll}.holder.active{cursor:grabbing;cursor:-webkit-grabbing}@media (max-width: 768px){.holder{gap:3rem;padding:0 1.25rem 0 2.5rem}}.holder::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ImageCardComponent, selector: "af-connect-image-card", inputs: ["src", "title", "content", "readMoreLink"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectProductsCarouselComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-af-connect-products-carousel', template: "<div\r\n    class=\"holder\"\r\n    (mousedown)=\"mousedown($event)\"\r\n    (mouseleave)=\"mouseleave()\"\r\n    (mouseup)=\"mouseup()\"\r\n    (mousemove)=\"mousemove($event)\"\r\n>\r\n    <ng-container *ngFor=\"let card of config || defaultConfig\">\r\n        <af-connect-image-card\r\n            [src]=\"card.imageSrc\"\r\n            [title]=\"card.title\"\r\n            [content]=\"card.content\"\r\n            [readMoreLink]=\"card.readMore\"\r\n        ></af-connect-image-card>\r\n    </ng-container>\r\n</div>\r\n", styles: [":host{display:flex}@media (max-width: 768px){:host{padding:0}}.holder{display:flex;padding:0 1rem 1rem 0;flex-direction:row;gap:1.5rem;flex-wrap:nowrap;overflow-x:scroll}.holder.active{cursor:grabbing;cursor:-webkit-grabbing}@media (max-width: 768px){.holder{gap:3rem;padding:0 1.25rem 0 2.5rem}}.holder::-webkit-scrollbar{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { config: [{
+                type: Input
+            }] } });
+
 class AfConnectComponentsModule {
 }
 AfConnectComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -372,10 +698,21 @@ AfConnectComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0
         GetinItialsPipe,
         ExpandableContainerComponent,
         ExpandableArrowComponent,
-        ExpandableWrapperComponent], imports: [MatIconModule,
+        ExpandableWrapperComponent,
+        FaqComponent,
+        FaqItemComponent,
+        ImageWithFallbackDirective,
+        ImageWithFallbackComponent,
+        AfConnectProductsCarouselComponent,
+        ImageCardComponent], imports: [MatIconModule,
         CommonModule], exports: [AfConnectComponentsComponent,
         AfConnectHeaderComponent,
-        AfConnectFooterComponent] });
+        AfConnectFooterComponent,
+        FaqComponent,
+        FaqItemComponent,
+        ImageWithFallbackDirective,
+        ImageWithFallbackComponent,
+        AfConnectProductsCarouselComponent] });
 AfConnectComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectComponentsModule, providers: [BreakpointLibService], imports: [MatIconModule,
         CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: AfConnectComponentsModule, decorators: [{
@@ -389,7 +726,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                         GetinItialsPipe,
                         ExpandableContainerComponent,
                         ExpandableArrowComponent,
-                        ExpandableWrapperComponent
+                        ExpandableWrapperComponent,
+                        FaqComponent,
+                        FaqItemComponent,
+                        ImageWithFallbackDirective,
+                        ImageWithFallbackComponent,
+                        AfConnectProductsCarouselComponent,
+                        ImageCardComponent
                     ],
                     imports: [
                         MatIconModule,
@@ -399,7 +742,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
                     exports: [
                         AfConnectComponentsComponent,
                         AfConnectHeaderComponent,
-                        AfConnectFooterComponent
+                        AfConnectFooterComponent,
+                        FaqComponent,
+                        FaqItemComponent,
+                        ImageWithFallbackDirective,
+                        ImageWithFallbackComponent,
+                        AfConnectProductsCarouselComponent
                     ]
                 }]
         }] });
@@ -412,5 +760,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AfConnectComponentsComponent, AfConnectComponentsModule, AfConnectComponentsService, AfConnectFooterComponent, AfConnectHeaderComponent };
+export { AfConnectComponentsComponent, AfConnectComponentsModule, AfConnectComponentsService, AfConnectFooterComponent, AfConnectHeaderComponent, AfConnectProductsCarouselComponent, FaqComponent, FaqItemComponent, ImageWithFallbackComponent, ImageWithFallbackDirective };
 //# sourceMappingURL=af-connect-components.mjs.map