af-connect-components 0.0.25 → 0.0.26

package/projects/af-connect-components/src/lib/af-connect-footer/af-connect-footer.component.html

@@ -0,0 +1,106 @@
+
+<ng-container *ngIf="!isFooterContentHidden">  
+    <div *ngIf="breakpointService.isMobile$ | async"  class="footer-container" [ngStyle]="{backgroundColor}">
+        <div *ngFor="let section of config?.sections?.length ? config?.sections : defaultConfig.sections" class="sections-container">
+            <h2 class="section-title">
+                {{section.title}}
+            </h2>
+            <ng-container *ngFor="let link of section.sectionItems">
+                    <a class="section-link" [href]="link.link" target="_blank">{{link.title}}</a>
+            </ng-container>
+        </div>
+        <div *ngFor="let address of config?.address?.length ? config?.address : defaultConfig.address" class="sections-container address-container">
+            <h2 class="section-title address-title">
+                {{address.title}}
+            </h2>
+            <ng-container *ngFor="let link of address.sectionItems">
+                    <span class="section-link address-link">{{link.title}}</span>
+            </ng-container>
+        </div>
+    </div>
+
+    <div *ngIf="!(breakpointService.isMobile$ | async)"  class="footer-container" [ngStyle]="{backgroundColor}">
+        <div *ngFor="let section of config?.sections?.length ? config?.sections : defaultConfig.sections" class="sections-container">
+            <afc-expandable-wrapper>
+                <div triggerable class="title-container">
+                    <h2 class="section-title">
+                        {{section.title}}
+                    </h2>
+                    <afc-expandable-arrow color="rgba(255,255,255, 0.7)"></afc-expandable-arrow>
+                </div>
+                <afc-expandable-container>
+                    <div class="sections-container__mobile">
+                        <ng-container *ngFor="let link of section.sectionItems">
+                                <a class="section-link address-link" [href]="link.link" target="_blank">{{link.title}}</a>
+                        </ng-container>
+                    </div>
+                </afc-expandable-container>
+            </afc-expandable-wrapper>
+        </div>
+        <div *ngFor="let address of config?.address?.length ? config?.address : defaultConfig.address" [ngClass]="[address.title ? 'sections-container address-container' : '']">
+            <afc-expandable-wrapper *ngIf="address.title">
+                <div triggerable class="title-container">
+                    <h2 class="section-title address-title">
+                        {{address.title}}
+                    </h2>
+                    <afc-expandable-arrow color="rgba(255,255,255, 0.7)"></afc-expandable-arrow>
+                </div>
+                <afc-expandable-container>
+                    <div class="sections-container__mobile">
+                        <ng-container *ngFor="let link of address.sectionItems">
+                            <span class="section-link">{{link.title}}</span>
+                        </ng-container>
+                        <span class="section-link address-link">{{getMobileAddress}}</span>
+                    </div>
+                </afc-expandable-container>
+            </afc-expandable-wrapper>
+        </div>
+    </div>
+</ng-container> 
+
+<div *ngIf="!isBottomBannerHidden" class="bottom-banner">
+    <div class="banner-title">
+        {{config?.bannerTitle ? config?.bannerTitle : defaultConfig.bannerTitle}}
+        <span class="title-links" (click)="openLegalTerms()">Legal terms | </span>
+        <span class="title-links" (click)="openPrivacyPolicy()">Privacy policy | </span>
+        <span class="title-links" (click)="openPaiaManual()">PAIA manual</span>
+    </div>
+    
+    <div class="social-container">
+        <a *ngIf="!config?.instagram?.isHidden" class="image-container" [href]="config?.instagram?.link ? config?.instagram?.link : defaultConfig.instagram?.link" target="_blank">  
+            <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">
+                <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"/>
+                <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"/>
+                <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"/>
+            </svg>
+            </a>
+        <a *ngIf="!config?.linkedIn?.isHidden" class="image-container" [href]="config?.linkedIn?.link ? config?.linkedIn?.link : defaultConfig.linkedIn?.link" target="_blank">  
+            <svg xmlns="http://www.w3.org/2000/svg" width="15.618" height="14.902" viewBox="0 0 15.618 14.902">
+                <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"/>
+            </svg>
+        </a>
+        <a *ngIf="!config?.facebook?.isHidden" class="image-container" [href]="config?.facebook?.link ? config?.facebook?.link : defaultConfig.facebook?.link" target="_blank">  
+            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 7.235 15.618">
+                <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"/>
+            </svg>
+        </a>
+        <a *ngIf="!config?.twitter?.isHidden" class="image-container" [href]="config?.twitter?.link ? config?.twitter?.link : defaultConfig.twitter?.link" target="_blank">  
+            <svg xmlns="http://www.w3.org/2000/svg" width="15.966" height="15.618" viewBox="0 0 15.966 15.618">
+                <path id="icons8-twitterx" d="M19.846,19.618l-6.244-9.1.011.009L19.243,4H17.361L12.775,9.31,9.133,4H4.2l5.829,8.5h0L3.88,19.618H5.761l5.1-5.908,4.052,5.908ZM8.388,5.42,17.148,18.2H15.658L6.89,5.42Z" transform="translate(-3.88 -4)" fill="#f1f2f5"/>
+            </svg>
+        </a>
+        <a *ngIf="!config?.whatsapp?.isHidden" class="image-container" [href]="config?.whatsapp?.link ? config?.whatsapp?.link : defaultConfig.whatsapp?.link" target="_blank">  
+            <svg xmlns="http://www.w3.org/2000/svg" width="15.666" height="15.676" viewBox="0 0 15.666 15.676">
+                <path id="whatsapp-svgrepo-com" d="M17.324,6.273A7.691,7.691,0,0,0,11.838,4,7.779,7.779,0,0,0,5.1,15.649L4,19.676,8.115,18.6a7.762,7.762,0,0,0,9.21-12.325ZM11.838,18.236a6.446,6.446,0,0,1-3.292-.9l-.235-.147-2.44.647.647-2.381-.157-.245a6.492,6.492,0,1,1,5.477,3.027Zm3.537-4.84c-.2-.1-1.146-.568-1.323-.627s-.314-.1-.441.1a8.822,8.822,0,0,1-.617.754c-.108.137-.225.147-.421,0a5.222,5.222,0,0,1-2.635-2.3c-.206-.343.2-.323.568-1.058a.372.372,0,0,0,0-.343c0-.1-.441-1.058-.6-1.44s-.314-.323-.441-.333H9.085a.7.7,0,0,0-.519.245,2.146,2.146,0,0,0-.647,1.656,3.742,3.742,0,0,0,.794,2.008,8.71,8.71,0,0,0,3.321,2.939,3.773,3.773,0,0,0,2.332.49,1.96,1.96,0,0,0,1.3-.921,1.587,1.587,0,0,0,.118-.921A1.368,1.368,0,0,0,15.375,13.4Z" transform="translate(-4 -4)" fill="#fff"/>
+            </svg>
+        </a>
+    </div>
+</div>
+
+
+
+
+
+
+
+

package/projects/af-connect-components/src/lib/af-connect-footer/af-connect-footer.component.scss

@@ -0,0 +1,186 @@
+@import '../../styles/breakpoints.scss';
+
+$baseWhite: #F1F2F5;
+
+:host {
+    z-index: 1000;
+}
+
+.footer-container {
+    font-family: Hero New SemiBold;
+    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));
+
+    @include media(smallDesktopScreen, desktopScreen) {
+        grid-column-gap: 2rem;
+      }
+      
+    @include media(mobileBreakPointTreshold) {
+        grid-column-gap: 0px;
+        grid-row-gap: 0px;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        padding: 0rem 1rem;
+      }
+}
+
+.sections-container {
+    $base-gap: 1rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    @include media(mobileBreakPointTreshold) {
+        gap: 20px;
+        border-bottom: 1px solid white;
+      }
+
+      &__mobile {
+        @extend .sections-container;
+        @include media(mobileBreakPointTreshold) {
+            padding-bottom: 20px;
+          }
+      }
+
+    .section-title {
+        font-size: 1.25rem;
+        font-family: Hero New Bold;
+        margin: 0px;
+        margin-bottom: 12px;
+        color: $baseWhite;
+
+        @include media(mobileBreakPointTreshold) {
+            margin: 0px;
+            font-size: 1.125rem;
+          }
+    }
+}
+
+.sections-container:last-of-type {
+    border-bottom: none;
+}
+
+.sections-container:nth-last-of-type(2) {
+    border-bottom: none;
+}
+
+.section-link {
+    font-family: Hero New;
+    color: #FFFFFF;
+    text-decoration: none;
+    opacity: 70%;
+
+    &.address-link {
+        cursor: initial;
+    }
+
+    @include media(mobileBreakPointTreshold) {
+        font-size: 0.875rem;
+      }
+
+}
+
+@media (hover: hover) {
+    .section-link:hover {
+        opacity: 100%;
+    }
+}
+
+.bottom-banner {
+    color: $baseWhite;
+    background: #124E57;
+    padding: 2% 5%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-height: 120px;
+    position: relative;
+    z-index: 1001;
+
+    @include media(mobileBreakPointTreshold) {
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+        gap: 11px;
+        align-items: center;
+        font-size: 0.6875rem;
+        padding: 16px 8px;
+        line-height: 22px;
+      }
+}
+
+.social-container {
+    display: flex;
+    gap: 40px;
+    margin-left: 4%;
+
+    @include media(mobileBreakPointTreshold) {
+        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;
+
+    @include media(mobileBreakPointTreshold) {
+        padding-top: 16px;
+        padding-bottom: 16px;
+        width: 100%;
+        
+    }
+}
+
+.margin-div {
+    width: 100%;
+    height: 20px;
+}
+
+.title-links {
+    cursor: pointer;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}

package/projects/af-connect-components/src/lib/af-connect-footer/af-connect-footer.component.ts

@@ -0,0 +1,292 @@
+import { Component, Input } from '@angular/core';
+import { BreakpointLibService } from '../services/breakpoint.service';
+
+export interface SocialLink {
+  link: string,
+  isHidden?: boolean;
+}
+
+export interface SectionItem {
+  title: string,
+  link?: string;
+}
+
+export interface Section {
+  title?: string,
+  sectionItems: SectionItem[];
+}
+
+
+export interface FooterConfig {
+  bannerTitle?: string | undefined,
+  instagram?: SocialLink,
+  linkedIn?: SocialLink,
+  facebook?: SocialLink,
+  twitter?: SocialLink,
+  whatsapp?: SocialLink,
+  sections?: Section[],
+  address?: Section[],
+}
+
+const DEFAULT_COLOR = '#15808D'
+
+@Component({
+  selector: 'lib-af-connect-footer',
+  templateUrl: './af-connect-footer.component.html',
+  styleUrls: ['./af-connect-footer.component.scss']
+})
+export class AfConnectFooterComponent {
+
+  constructor(public breakpointService: BreakpointLibService) { }
+
+  @Input()
+  config: FooterConfig | undefined = undefined;
+  @Input() isBottomBannerHidden = false;
+  @Input() isFooterContentHidden = false;
+  @Input() backgroundColor = DEFAULT_COLOR;
+
+  public get getMobileAddress(): string {
+    const config = this.config ? this.config : this.defaultConfig;
+    const addressData: SectionItem[] | undefined = config?.address?.find(address => !address.title)?.sectionItems
+    const titleString = addressData?.reduce((prev: string, curr: SectionItem, i) => {
+      return `${prev}${i === 0 ? '' : ''}${i === 1 ? ' : ' : ''}${i > 1 ? ',' : ''} ${curr.title}`;
+    }, '');
+    return titleString || '';
+  }
+
+  /**
+     Footer component for AF Angular Websites. A config object can be passed to change data partially or fully.
+
+     public exampleTestConfig: FooterConfig = {
+      bannerTitle: 'test'
+     }
+
+     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: '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.',
+    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,
+    }
+  }
+     */
+
+
+  public 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://investors.alexforbes.com/governance/#1649142494218-25325-08da'
+          },
+        ]
+      },
+      {
+        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.',
+    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,
+    },
+    whatsapp: {
+      link:'https://api.whatsapp.com/send/?phone=27600439601&text=help&type=phone_number&app_absent=0',
+      isHidden: false,
+    }
+  }
+
+  openLegalTerms() {
+    window.open('https://myapi.alexanderforbes.co.za/content/download/afinvestments/investmentsolutionspdffiles?path=Legal_Terms.pdf')
+  }
+
+  openPrivacyPolicy() {
+    window.open('https://myapi.alexanderforbes.co.za/content/download/afinvestments/investmentsolutionspdffiles?path=Privacy_Policy.pdf')
+  }
+
+  openPaiaManual() {
+    window.open('https://myapi.alexanderforbes.co.za/content/download/afinvestments/investmentsolutionspdffiles?path=PAIA_Manual.pdf')
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-form-group/af-connect-form-group.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/projects/af-connect-components/src/lib/af-connect-form-group/af-connect-form-group.component.scss

@@ -0,0 +1,18 @@
+@import '../../styles/breakpoints.scss';
+
+:host {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  column-gap: 2rem;
+  align-items: end;
+
+  @include media(tabletTreshold) {
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 1.5rem;
+    row-gap: 1.5rem;
+  }
+
+  @include media(mobileScreen) {
+    grid-template-columns: auto;
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-form-group/af-connect-form-group.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AfConnectFormGroupComponent } from './af-connect-form-group.component';
+
+describe('AfConnectFormGroupComponent', () => {
+  let component: AfConnectFormGroupComponent;
+  let fixture: ComponentFixture<AfConnectFormGroupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AfConnectFormGroupComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AfConnectFormGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/af-connect-components/src/lib/af-connect-form-group/af-connect-form-group.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-form-group',
+  templateUrl: './af-connect-form-group.component.html',
+  styleUrls: ['./af-connect-form-group.component.scss']
+})
+export class AfConnectFormGroupComponent {
+
+}

package/projects/af-connect-components/src/lib/af-connect-form-validation-errors/af-connect-form-validation-errors.component.html

@@ -0,0 +1,40 @@
+<div class="container" *ngIf="control && control.errors && control.dirty && control.touched">
+    <div class="container__error" *ngIf="control.errors['required']">{{ fieldText }} is required</div>
+    <div class="container__error" *ngIf="control.errors['emptyValue']">Please enter a {{ fieldText }}</div>
+    <div class="container__error" *ngIf="control.errors['minlength']">
+      {{ fieldText }} must have be least {{ control.errors['minlength'].requiredLength }} symbols long
+    </div>
+    <div class="container__error" *ngIf="control.errors['maxlength']">
+      {{ fieldText }} must be no more than {{ control.errors['maxlength'].requiredLength }} symbols
+    </div>
+    <div class="container__error" *ngIf="control.errors['existingProductName']">
+      Please enter a unique Product Name. Example: Alexforbes Life Cover
+    </div>
+    <div class="container__error" *ngIf="control.errors['email']">Invalid Email address</div>
+    <div class="container__error" *ngIf="control.errors['NAN']">Please enter a valid number</div>
+    <div class="container__error" *ngIf="control.errors['positiveNumber']">
+      Please enter a positive number. Example: R100 000
+    </div>
+    <div class="container__error" *ngIf="control.errors['integerNumber']">
+      Please enter a number without any digits after the decimal point
+    </div>
+    <div class="container__error" *ngIf="control.errors['max']">
+      Please enter a number less than or equal to {{ convertToNumberWithCommas(control.errors['max'].max) }}
+    </div>
+    <div class="container__error" *ngIf="control.errors['length']">
+      {{ fieldText }} must be {{ control.errors['length'] }} digits long
+    </div>
+    <div class="container__error" *ngIf="control.errors['alphabetic']">
+      {{ fieldText }} cannot contain numbers or special characters
+    </div>
+    <div class="container__error" *ngIf="control.errors['selectOptions']">
+      Please select a valid {{ fieldText }} from the dropdown list
+    </div>
+  </div>
+  
+  <div class="container" *ngIf="control && control.errors && control.dirty">
+    <div class="container__error" *ngIf="control.errors['startDateBeforeEndDate']">
+      You have selected an incorrect date
+    </div>
+  </div>
+  

package/projects/af-connect-components/src/lib/af-connect-form-validation-errors/af-connect-form-validation-errors.component.scss

@@ -0,0 +1,5 @@
+.container__error {
+    color: var(--primary-orange-mobile-color);
+    font-size: 12px;
+  }
+