af-connect-components 18.0.37 → 18.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/af-connect-products-carousel/defaultConfig.mjs +5 -5
- package/esm2022/lib/af-connect-solutions-product/af-connect-solutions-product.component.mjs +5 -3
- package/esm2022/lib/af-connect-solutions-product/af-connect-solutions-product.data.mjs +1 -1
- package/esm2022/lib/af-connect-solutions-product-v2/af-connect-solutions-product-v2.component.mjs +14 -5
- package/esm2022/lib/af-connect-solutions-product-v2/af-connect-solutions-product-v2.data.mjs +4 -43
- package/esm2022/lib/faq/faq/faq.component.mjs +4 -3
- package/fesm2022/af-connect-components.mjs +27 -54
- package/fesm2022/af-connect-components.mjs.map +1 -1
- package/lib/af-connect-solutions-product/af-connect-solutions-product.component.d.ts +2 -1
- package/lib/af-connect-solutions-product/af-connect-solutions-product.data.d.ts +0 -2
- package/lib/af-connect-solutions-product-v2/af-connect-solutions-product-v2.component.d.ts +4 -1
- package/lib/af-connect-solutions-product-v2/af-connect-solutions-product-v2.data.d.ts +1 -1
- package/lib/faq/faq/faq.component.d.ts +1 -1
- package/package.json +1 -1
- package/src/assets/icons/basket-blue.svg +0 -37
- package/src/assets/icons/checkmark-teal.svg +0 -11
- package/src/assets/icons/chevron-right-rounded.svg +0 -1
- package/src/assets/icons/devices-blue.svg +0 -17
- package/src/assets/icons/document-clock-blue.svg +0 -68
- package/src/assets/icons/hourglass-blue.svg +0 -42
- package/src/assets/icons/phone-text-bubbles-blue.svg +0 -677
- package/src/assets/icons/price-tag-blue.svg +0 -61
- package/src/assets/icons/shield-blue.svg +0 -35
- package/src/assets/icons/travel-blue.svg +0 -415
- package/src/assets/images/AF-Plus-carousel.jpg +0 -0
- package/src/assets/images/AF-Rewards-carousel.jpg +0 -0
- package/src/assets/images/FAQ_image.png +0 -0
- package/src/assets/images/Unit-trusts-carousel.jpg +0 -0
- package/src/assets/images/mmm-carousel.jpg +0 -0
- package/src/assets/images/nam_s4u_broadwalk.png +0 -0
- package/src/assets/images/nam_s4u_pier.png +0 -0
- package/src/assets/images/nam_s4u_sunset_tree.png +0 -0
- package/src/assets/images/solutions-advice.jpg +0 -0
- package/src/assets/images/solutions-afplus-mobile.jpg +0 -0
- package/src/assets/images/solutions-afplus-v2.jpg +0 -0
- package/src/assets/images/solutions-afplus.jpg +0 -0
- package/src/assets/images/solutions-invest-mobile.jpg +0 -0
- package/src/assets/images/solutions-invest.jpg +0 -0
- package/src/assets/images/solutions-mmm-mobile.jpg +0 -0
- package/src/assets/images/solutions-mmm-v2.jpg +0 -0
- package/src/assets/images/solutions-mmm.jpg +0 -0
- package/src/assets/images/solutions-rewards.png +0 -0
- package/src/assets/images/solutions-taxtim.jpg +0 -0
- package/src/assets/images/solutions-welltec.jpg +0 -0
- package/src/assets/images/solutions-will.jpg +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, Component, ChangeDetectionStrategy, Host, Optional, Input, EventEmitter, forwardRef, Output, ContentChildren, ViewChild, HostBinding, HostListener, Pipe, Directive, ContentChild, ElementRef, ViewChildren, NgModule } from '@angular/core';
|
|
2
|
+
import { Injectable, Component, ChangeDetectionStrategy, Host, Optional, Input, EventEmitter, forwardRef, Output, ContentChildren, ViewChild, HostBinding, HostListener, Pipe, Directive, ContentChild, ElementRef, ViewChildren, input, computed, NgModule } from '@angular/core';
|
|
3
3
|
import { map, BehaviorSubject, take, filter, fromEvent, Subscription, interval, debounceTime } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/cdk/layout';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -1122,10 +1122,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1122
1122
|
class FaqComponent {
|
|
1123
1123
|
constructor() {
|
|
1124
1124
|
this.faqItems = [];
|
|
1125
|
-
this.imageSrc = '/assets/images/FAQ_image.png';
|
|
1126
1125
|
}
|
|
1127
1126
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FaqComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1128
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FaqComponent, selector: "lib-faq", inputs: { faqItems: "faqItems", fallBackImageSrc: "fallBackImageSrc" }, 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>\r\n", styles: [".item-container{display:flex;flex-direction:column;gap:15px}@media (max-width: 1024px){.item-container{gap:10px}}.faq-container{gap:2rem;display:flex;flex-wrap:wrap;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FaqItemComponent, selector: "lib-faq-item", inputs: ["faqItem"] }] }); }
|
|
1127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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>\r\n", styles: [".item-container{display:flex;flex-direction:column;gap:15px}@media (max-width: 1024px){.item-container{gap:10px}}.faq-container{gap:2rem;display:flex;flex-wrap:wrap;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FaqItemComponent, selector: "lib-faq-item", inputs: ["faqItem"] }] }); }
|
|
1129
1128
|
}
|
|
1130
1129
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FaqComponent, decorators: [{
|
|
1131
1130
|
type: Component,
|
|
@@ -1134,6 +1133,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1134
1133
|
type: Input
|
|
1135
1134
|
}], fallBackImageSrc: [{
|
|
1136
1135
|
type: Input
|
|
1136
|
+
}], imageSrc: [{
|
|
1137
|
+
type: Input
|
|
1137
1138
|
}] } });
|
|
1138
1139
|
|
|
1139
1140
|
class ImageWithFallbackDirective {
|
|
@@ -1207,25 +1208,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1207
1208
|
|
|
1208
1209
|
const defaultConfig = [
|
|
1209
1210
|
{
|
|
1210
|
-
imageSrc: '/
|
|
1211
|
+
imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/mmm-carousel.jpg',
|
|
1211
1212
|
title: 'My Money Matters',
|
|
1212
1213
|
content: 'Get the most out of your money. Explore ways to make your money and savings work for you with our tools.',
|
|
1213
1214
|
readMore: 'https://mymoneymatters.alexforbes.com/'
|
|
1214
1215
|
},
|
|
1215
1216
|
{
|
|
1216
|
-
imageSrc: '/
|
|
1217
|
+
imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/AF-Rewards-carousel.jpg',
|
|
1217
1218
|
title: 'My Rewards',
|
|
1218
1219
|
content: 'Exclusive savings from big brands.',
|
|
1219
1220
|
readMore: 'https://plus.alexforbes.com/Identity/Account/Login?ReturnUrl=%2fProducts%2fReferral%2fRedirect?typeId=11&utm_medium=web&utm_source=afconnect&utm_campaign=AF%20Connect'
|
|
1220
1221
|
},
|
|
1221
1222
|
{
|
|
1222
|
-
imageSrc: '/
|
|
1223
|
+
imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/Unit-trusts-carousel.jpg',
|
|
1223
1224
|
title: 'Unit Trusts',
|
|
1224
1225
|
content: 'Invest from as little as R500.00 a month to up to R30 000.00 up front toward a personal goal.',
|
|
1225
1226
|
readMore: 'https://www.alexforbes.com/za/en/individual/investing-for-a-goal.html'
|
|
1226
1227
|
},
|
|
1227
1228
|
{
|
|
1228
|
-
imageSrc: '/
|
|
1229
|
+
imageSrc: 'https://stg.alexforbes.com/content/dam/afbr/common/images-website/products/af-connect/AF-Plus-carousel.jpg',
|
|
1229
1230
|
title: 'AF+',
|
|
1230
1231
|
content: 'Guided by expert advisers and fulfilled by trusted partners, making it easy to solve life’s financial challenges with confidence.',
|
|
1231
1232
|
readMore: 'https://plus.alexforbes.com/'
|
|
@@ -2408,13 +2409,15 @@ class AfConnectSolutionsProductComponent {
|
|
|
2408
2409
|
window.open(this.content.ctaLink, '_blank');
|
|
2409
2410
|
}
|
|
2410
2411
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectSolutionsProductComponent, deps: [{ token: BreakpointLibService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2411
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AfConnectSolutionsProductComponent, selector: "lib-af-connect-solutions-product", inputs: { direction: "direction", variant: "variant" }, ngImport: i0, template: "<section [ngClass]=\"['wrapper', direction, variant]\">\r\n @if (!(breakpointService.isMobile$ | async)) {\r\n <div class=\"image-container\">\r\n <img [src]=\"
|
|
2412
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AfConnectSolutionsProductComponent, selector: "lib-af-connect-solutions-product", inputs: { direction: "direction", imgBaseUrl: "imgBaseUrl", variant: "variant" }, ngImport: i0, template: "<section [ngClass]=\"['wrapper', direction, variant]\">\r\n @if (!(breakpointService.isMobile$ | async)) {\r\n <div class=\"image-container\">\r\n <img [src]=\"imgBaseUrl + content.imgWeb\">\r\n </div>\r\n }\r\n <div class=\"content\">\r\n <header>\r\n <span class=\"line\"></span>\r\n <h3>{{ content.heading }}</h3>\r\n <h4>{{ content.subheading }}</h4>\r\n </header>\r\n @if (!(breakpointService.isMobile$ | async)) {\r\n <p>{{ content.description }}</p>\r\n }\r\n @else {\r\n <div class=\"image-container\">\r\n <img [src]=\"imgBaseUrl + content.imgMobile\">\r\n <p>{{ content.description }}</p>\r\n </div>\r\n }\r\n <lib-af-connect-button \r\n class=\"regular\"\r\n [title]=\"content.ctaTitle\"\r\n variant=\"filled\"\r\n (clickBtn)=\"navigateExternal()\"\r\n ></lib-af-connect-button>\r\n <div class=\"labels\">\r\n @for (label of content.labels; track $index) {\r\n <div class=\"label\">\r\n <img [src]=\"imgBaseUrl + label.img\">\r\n <span>{{ label.text }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".wrapper{position:relative;display:flex;flex-direction:row;gap:2.5rem}.wrapper.reverse{flex-direction:row-reverse;justify-content:flex-end}.wrapper.reverse .content .labels{align-self:flex-start;margin-inline:0 -1000px}.content{padding-block:2.375rem 3.25rem;flex-grow:1;display:flex;flex-direction:column}.content header{font-family:var(--standard-font-family-hero-new-bold);margin-bottom:1.5rem}.content header .line{display:block;width:332px;height:3px;background-color:#f69521;border-radius:50px}.content header h3{font-size:36px;line-height:50px;margin-block:1.625rem .25rem}.content header h4{font-size:16px;letter-spacing:.5px;color:#f69521;margin:0}.content p{margin-block:0 2.375rem;line-height:24px;max-width:638px}.content lib-af-connect-button{margin-bottom:2.625rem}.content .labels{align-self:flex-end;box-sizing:border-box;box-shadow:0 5px 50px #abafc74d;padding:min(2.5rem,3vw) min(2.125rem,2.5vw);display:flex;gap:1.375rem;min-height:min(158px,12vw);width:min(180%,908px);margin-inline:-1000px 0;margin-top:auto;background-color:#fff;border-radius:20px;position:relative;z-index:1}.content .labels .label{flex-grow:1;display:flex;align-items:center;gap:min(1.75rem,10%)}.content .labels .label:not(:first-child){padding-left:min(2rem,2.5vw);border-left:1px solid #ABAFC7}.content .labels .label svg,.content .labels .label img{flex:0 0 min(80px,8vw)}.content .labels .label span{color:#124e57;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 1024px){.content .labels .label span{font-size:14px}}.afplus .content .line{width:166px}.image-container{flex-basis:500px;border-radius:20px;overflow:hidden}.image-container img{vertical-align:top;object-fit:cover;width:100%;height:100%}@media (max-width: 768px){.wrapper,.wrapper.reverse{flex-direction:column-reverse}.wrapper .image-container,.wrapper.reverse .image-container{display:flex;flex-direction:column;box-shadow:0 5px 10px #00000029;background-color:#fff;border-radius:30px 30px 10px 10px}.wrapper .image-container p,.wrapper.reverse .image-container p{font-size:14px;line-height:20px;margin:0;padding:1rem}.wrapper .content,.wrapper.reverse .content{padding:0;display:grid;row-gap:1.25rem}.wrapper .content header,.wrapper.reverse .content header{margin:0}.wrapper .content header .line,.wrapper.reverse .content header .line{width:100%}.wrapper .content header h3,.wrapper.reverse .content header h3{font-size:18px;line-height:25px;margin-block:1.25rem .375rem}.wrapper .content header h4,.wrapper.reverse .content header h4{font-size:14px;line-height:20px;letter-spacing:normal}.wrapper .content .labels,.wrapper.reverse .content .labels{box-shadow:0 5px 20px #00000029;padding:1rem;margin-inline:0;width:auto;gap:.875rem;flex-direction:column;align-self:stretch;border-left:none;border-radius:10px}.wrapper .content .labels .label,.wrapper.reverse .content .labels .label{gap:1rem}.wrapper .content .labels .label:not(:first-child),.wrapper.reverse .content .labels .label:not(:first-child){padding:0;border-left:0;border-top:1px solid #ABAFC7;padding-top:.875rem}.wrapper .content .labels .label span,.wrapper.reverse .content .labels .label span{font-size:14px}.wrapper .content .labels .label svg,.wrapper .content .labels .label img,.wrapper.reverse .content .labels .label svg,.wrapper.reverse .content .labels .label img{flex:none;width:max(40px,8vw)}.wrapper .content lib-af-connect-button,.wrapper.reverse .content lib-af-connect-button{margin:0;grid-row:4;justify-self:center}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AfConnectButtonComponent, selector: "lib-af-connect-button", inputs: ["isActive", "emitValue", "title", "disabled", "hybrid", "fullWidth", "size", "variant", "iconSrc", "iconSize", "iconPosition", "activeItem"], outputs: ["clickBtn"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }] }); }
|
|
2412
2413
|
}
|
|
2413
2414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectSolutionsProductComponent, decorators: [{
|
|
2414
2415
|
type: Component,
|
|
2415
|
-
args: [{ selector: 'lib-af-connect-solutions-product', template: "<section [ngClass]=\"['wrapper', direction, variant]\">\r\n @if (!(breakpointService.isMobile$ | async)) {\r\n <div class=\"image-container\">\r\n <img [src]=\"
|
|
2416
|
+
args: [{ selector: 'lib-af-connect-solutions-product', template: "<section [ngClass]=\"['wrapper', direction, variant]\">\r\n @if (!(breakpointService.isMobile$ | async)) {\r\n <div class=\"image-container\">\r\n <img [src]=\"imgBaseUrl + content.imgWeb\">\r\n </div>\r\n }\r\n <div class=\"content\">\r\n <header>\r\n <span class=\"line\"></span>\r\n <h3>{{ content.heading }}</h3>\r\n <h4>{{ content.subheading }}</h4>\r\n </header>\r\n @if (!(breakpointService.isMobile$ | async)) {\r\n <p>{{ content.description }}</p>\r\n }\r\n @else {\r\n <div class=\"image-container\">\r\n <img [src]=\"imgBaseUrl + content.imgMobile\">\r\n <p>{{ content.description }}</p>\r\n </div>\r\n }\r\n <lib-af-connect-button \r\n class=\"regular\"\r\n [title]=\"content.ctaTitle\"\r\n variant=\"filled\"\r\n (clickBtn)=\"navigateExternal()\"\r\n ></lib-af-connect-button>\r\n <div class=\"labels\">\r\n @for (label of content.labels; track $index) {\r\n <div class=\"label\">\r\n <img [src]=\"imgBaseUrl + label.img\">\r\n <span>{{ label.text }}</span>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".wrapper{position:relative;display:flex;flex-direction:row;gap:2.5rem}.wrapper.reverse{flex-direction:row-reverse;justify-content:flex-end}.wrapper.reverse .content .labels{align-self:flex-start;margin-inline:0 -1000px}.content{padding-block:2.375rem 3.25rem;flex-grow:1;display:flex;flex-direction:column}.content header{font-family:var(--standard-font-family-hero-new-bold);margin-bottom:1.5rem}.content header .line{display:block;width:332px;height:3px;background-color:#f69521;border-radius:50px}.content header h3{font-size:36px;line-height:50px;margin-block:1.625rem .25rem}.content header h4{font-size:16px;letter-spacing:.5px;color:#f69521;margin:0}.content p{margin-block:0 2.375rem;line-height:24px;max-width:638px}.content lib-af-connect-button{margin-bottom:2.625rem}.content .labels{align-self:flex-end;box-sizing:border-box;box-shadow:0 5px 50px #abafc74d;padding:min(2.5rem,3vw) min(2.125rem,2.5vw);display:flex;gap:1.375rem;min-height:min(158px,12vw);width:min(180%,908px);margin-inline:-1000px 0;margin-top:auto;background-color:#fff;border-radius:20px;position:relative;z-index:1}.content .labels .label{flex-grow:1;display:flex;align-items:center;gap:min(1.75rem,10%)}.content .labels .label:not(:first-child){padding-left:min(2rem,2.5vw);border-left:1px solid #ABAFC7}.content .labels .label svg,.content .labels .label img{flex:0 0 min(80px,8vw)}.content .labels .label span{color:#124e57;font-family:var(--standard-font-family-hero-new-semibold)}@media (max-width: 1024px){.content .labels .label span{font-size:14px}}.afplus .content .line{width:166px}.image-container{flex-basis:500px;border-radius:20px;overflow:hidden}.image-container img{vertical-align:top;object-fit:cover;width:100%;height:100%}@media (max-width: 768px){.wrapper,.wrapper.reverse{flex-direction:column-reverse}.wrapper .image-container,.wrapper.reverse .image-container{display:flex;flex-direction:column;box-shadow:0 5px 10px #00000029;background-color:#fff;border-radius:30px 30px 10px 10px}.wrapper .image-container p,.wrapper.reverse .image-container p{font-size:14px;line-height:20px;margin:0;padding:1rem}.wrapper .content,.wrapper.reverse .content{padding:0;display:grid;row-gap:1.25rem}.wrapper .content header,.wrapper.reverse .content header{margin:0}.wrapper .content header .line,.wrapper.reverse .content header .line{width:100%}.wrapper .content header h3,.wrapper.reverse .content header h3{font-size:18px;line-height:25px;margin-block:1.25rem .375rem}.wrapper .content header h4,.wrapper.reverse .content header h4{font-size:14px;line-height:20px;letter-spacing:normal}.wrapper .content .labels,.wrapper.reverse .content .labels{box-shadow:0 5px 20px #00000029;padding:1rem;margin-inline:0;width:auto;gap:.875rem;flex-direction:column;align-self:stretch;border-left:none;border-radius:10px}.wrapper .content .labels .label,.wrapper.reverse .content .labels .label{gap:1rem}.wrapper .content .labels .label:not(:first-child),.wrapper.reverse .content .labels .label:not(:first-child){padding:0;border-left:0;border-top:1px solid #ABAFC7;padding-top:.875rem}.wrapper .content .labels .label span,.wrapper.reverse .content .labels .label span{font-size:14px}.wrapper .content .labels .label svg,.wrapper .content .labels .label img,.wrapper.reverse .content .labels .label svg,.wrapper.reverse .content .labels .label img{flex:none;width:max(40px,8vw)}.wrapper .content lib-af-connect-button,.wrapper.reverse .content lib-af-connect-button{margin:0;grid-row:4;justify-self:center}}\n"] }]
|
|
2416
2417
|
}], ctorParameters: () => [{ type: BreakpointLibService }], propDecorators: { direction: [{
|
|
2417
2418
|
type: Input
|
|
2419
|
+
}], imgBaseUrl: [{
|
|
2420
|
+
type: Input
|
|
2418
2421
|
}], variant: [{
|
|
2419
2422
|
type: Input
|
|
2420
2423
|
}] } });
|
|
@@ -2553,9 +2556,9 @@ const data = {
|
|
|
2553
2556
|
{
|
|
2554
2557
|
text: 'Seamless integration with SARS eFilling for direct submission'
|
|
2555
2558
|
},
|
|
2556
|
-
{
|
|
2557
|
-
|
|
2558
|
-
}
|
|
2559
|
+
// {
|
|
2560
|
+
// text: 'Use code <strong style="color:#15808D;">ALEXFORBES25</strong> and save 25% today'
|
|
2561
|
+
// }
|
|
2559
2562
|
]
|
|
2560
2563
|
},
|
|
2561
2564
|
'wellTec': {
|
|
@@ -2612,45 +2615,6 @@ const data = {
|
|
|
2612
2615
|
}
|
|
2613
2616
|
]
|
|
2614
2617
|
},
|
|
2615
|
-
'rewards': {
|
|
2616
|
-
heading: 'AF Rewards – save on loved brands',
|
|
2617
|
-
imgWeb: 'solutions-rewards.png',
|
|
2618
|
-
description: 'Exclusive discounts and lifestyle benefits from leading brands, all in one place.',
|
|
2619
|
-
ctaLink: 'https://rewards.alexforbes.com/landingpage',
|
|
2620
|
-
labels: [
|
|
2621
|
-
{
|
|
2622
|
-
text: 'Airtime & data deals – stay connected on discounted airtime/data deals'
|
|
2623
|
-
},
|
|
2624
|
-
{
|
|
2625
|
-
text: 'Supermarket savings on groceries and household essentials'
|
|
2626
|
-
},
|
|
2627
|
-
{
|
|
2628
|
-
text: 'Travel deals – discounted rates on holiday deals'
|
|
2629
|
-
},
|
|
2630
|
-
{
|
|
2631
|
-
text: 'Wellness benefits – wellbeing vouchers at discounted rates'
|
|
2632
|
-
}
|
|
2633
|
-
]
|
|
2634
|
-
},
|
|
2635
|
-
'invest': {
|
|
2636
|
-
heading: 'Start investing today',
|
|
2637
|
-
description: 'A smarter, simpler way to invest and grow your wealth over time.',
|
|
2638
|
-
imgWeb: 'solutions-invest.jpg',
|
|
2639
|
-
ctaLink: 'https://invest.alexforbes.com/za/en/invest/',
|
|
2640
|
-
labels: [
|
|
2641
|
-
{
|
|
2642
|
-
text: 'Consolidate your existing investment with our award winning digital platform'
|
|
2643
|
-
},
|
|
2644
|
-
{
|
|
2645
|
-
text: 'Apply without paperwork'
|
|
2646
|
-
},
|
|
2647
|
-
{
|
|
2648
|
-
text: 'Get online Digital-advice'
|
|
2649
|
-
}
|
|
2650
|
-
],
|
|
2651
|
-
bottomCtaTitle: 'Get a free quote now',
|
|
2652
|
-
bottomCtaLink: 'https://invest.alexforbes.com/za/en/invest/'
|
|
2653
|
-
}
|
|
2654
2618
|
};
|
|
2655
2619
|
|
|
2656
2620
|
class SafeHtmlPipe {
|
|
@@ -2673,6 +2637,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2673
2637
|
class AfConnectSolutionsProductV2Component {
|
|
2674
2638
|
constructor() {
|
|
2675
2639
|
this._variant = 'afplus';
|
|
2640
|
+
this.taxTimPromoCodeEffectiveFrom = input(new Date('2027-06-30T22:00:00Z')); // accounting for timezone offset
|
|
2641
|
+
this.taxTimPromoCodeListItem = computed(() => {
|
|
2642
|
+
const currentDate = new Date();
|
|
2643
|
+
return currentDate < this.taxTimPromoCodeEffectiveFrom()
|
|
2644
|
+
? 'Save 30% with your exclusive early bird code - <strong style="color:#15808D;">ALEXFORBES30</strong>'
|
|
2645
|
+
: 'Use code <strong style="color:#15808D;">ALEXFORBES25</strong> and save 25% today';
|
|
2646
|
+
});
|
|
2676
2647
|
this.navigateToProduct = new EventEmitter();
|
|
2677
2648
|
this.linkClick = new EventEmitter();
|
|
2678
2649
|
}
|
|
@@ -2690,12 +2661,14 @@ class AfConnectSolutionsProductV2Component {
|
|
|
2690
2661
|
this.linkClick.emit(this._variant);
|
|
2691
2662
|
}
|
|
2692
2663
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectSolutionsProductV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2693
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AfConnectSolutionsProductV2Component, selector: "lib-af-connect-solutions-product-v2", inputs: { variant: "variant" }, outputs: { navigateToProduct: "navigateToProduct", linkClick: "linkClick" }, ngImport: i0, template: "<section [ngClass]=\"['product', variant]\">\r\n <div class=\"product__img-wrapper\">\r\n <img class=\"product__img\" [src]=\"
|
|
2664
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AfConnectSolutionsProductV2Component, selector: "lib-af-connect-solutions-product-v2", inputs: { imgBaseUrl: { classPropertyName: "imgBaseUrl", publicName: "imgBaseUrl", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, taxTimPromoCodeEffectiveFrom: { classPropertyName: "taxTimPromoCodeEffectiveFrom", publicName: "taxTimPromoCodeEffectiveFrom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigateToProduct: "navigateToProduct", linkClick: "linkClick" }, ngImport: i0, template: "<section [ngClass]=\"['product', variant]\">\r\n <div class=\"product__img-wrapper\">\r\n <img class=\"product__img\" [src]=\"imgBaseUrl + content.imgWeb\">\r\n </div>\r\n <div class=\"product__content\">\r\n <div class=\"product__floating-header\">\r\n <h3 class=\"product__heading\">{{ content.heading }}</h3>\r\n <div class=\"product__floating-header-inner\" [class.no-text]=\"!content.subheading\">\r\n @if (variant !== 'taxTim') {\r\n <span class=\"product__description\">{{ content.subheading }}</span>\r\n }\r\n @else {\r\n <img src=\"https://media.taxtim.com/images/taxtim_logo_footer.svg\" alt=\"TaxTim\" width=\"104px\">\r\n }\r\n <a *ngIf=\"content.ctaLink; else anchorTemplate \" class=\"product__link\" (click)=\"onLinkClick()\" [href]=\"content.ctaLink\" target=\"_blank\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n </div>\r\n </div>\r\n <ul class=\"product__list\">\r\n @if (content.description) {\r\n <p class=\"product__free-text\">\r\n {{ content.description }}\r\n </p>\r\n }\r\n @for (label of content.labels; track $index) {\r\n <li class=\"product__list-item\">\r\n @if (label.img) {\r\n <img [src]=\"imgBaseUrl + label.img\" width=\"40px\">\r\n }\r\n @else {\r\n <img [src]=\"imgBaseUrl + 'checkmark-teal.svg'\" alt=\"checkmark\" width=\"32\" height=\"32\">\r\n }\r\n <span [innerHTML]=\"label.text | safeHtml\"></span>\r\n </li>\r\n }\r\n @if (variant === 'taxTim') {\r\n <li class=\"product__list-item\">\r\n <img [src]=\"imgBaseUrl + 'checkmark-teal.svg'\" alt=\"checkmark\" width=\"32\" height=\"32\"> \r\n <span [innerHTML]=\"taxTimPromoCodeListItem() | safeHtml\"></span>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</section>\r\n\r\n<ng-template #anchorTemplate>\r\n <a class=\"product__link\" href=\"javascript:void(0)\" (click)=\"onClick()\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n</ng-template>", styles: [":host{display:block}.product{height:100%;background-color:#ddebee;color:#061426;min-width:332px;max-width:388px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}@media (max-width: 1024px){.product{min-width:auto;width:312px}}.product__img-wrapper{aspect-ratio:194/137}.product__img-wrapper .product__img{display:block;width:100%;height:100%;object-fit:cover}.product__content{margin-top:-128px;padding:36px;position:relative;z-index:1}.product__content .product__floating-header{border-radius:10px;color:#fff;padding:18px 24px;margin-bottom:24px;container:floating-header/inline-size}@media (max-width: 1024px){.product__content .product__floating-header{margin-bottom:18px;padding:16px}}.product__content .product__floating-header .product__floating-header-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-2.2rem}@media (max-width: 1024px){.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-1rem}}.product__content .product__floating-header .product__heading{margin-block:0 6px;font-size:28px;font-family:var(--standard-font-family-hero-new-semibold)}@container floating-header (width < 264px){.product__content .product__floating-header .product__heading{font-size:26px}}@container floating-header (width < 248px){.product__content .product__floating-header .product__heading{font-size:24px}}@container floating-header (width < 232px){.product__content .product__floating-header .product__heading{font-size:22px}}.product__content .product__floating-header .product__description{font-family:var(--standard-font-family-hero-new-semibold);max-width:180px}.product__content .product__floating-header .product__link{text-decoration:none;color:#fff}.product__content .product__floating-header .product__link img{display:block;width:42px;height:42px}@media (max-width: 1024px){.product__content .product__floating-header .product__link img{width:32px;height:32px}}.product__content .product__list{padding:0;margin:0;list-style:none}.product__content .product__list .product__list-item{display:flex;align-items:center;gap:16px}.product__content .product__list .product__list-item img{width:32px;height:32px}.product__content .product__list .product__list-item:not(:last-child){margin-bottom:28px}@media (max-width: 1024px){.product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}@media (max-width: 1024px){.product__content{padding:26px}}.product.afplus .product__floating-header,.product.namEducation .product__floating-header{background-color:#124e57}.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:40px;height:40px}@media (max-width: 1024px){.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:32px;height:32px}}.product.myMoneyMatters .product__floating-header,.product.namDebt .product__floating-header{background-color:#ff531d}.product.myMoneyMatters .product__content,.product.namDebt .product__content{padding-bottom:25px}.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:16px}@media (max-width: 1024px){.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-block:0 17px}@media (max-width: 1024px){.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-bottom:10px}}.product.advice .product__floating-header,.product.namJobs .product__floating-header,.product.will .product__floating-header,.product.education .product__floating-header{background-color:#f69521}.product.taxTim .product__floating-header{background-color:#124e57}.product.taxTim .product__floating-header h3.product__heading{min-height:78.25px}@container floating-header (width < 264px){.product.taxTim .product__floating-header h3.product__heading{min-height:72.75px}}@container floating-header (width < 248px){.product.taxTim .product__floating-header h3.product__heading{min-height:67.25px}}@container floating-header (width < 232px){.product.taxTim .product__floating-header h3.product__heading{min-height:60px}}.product.taxTim .product__content .product__list .product__list-item:not(:last-child){margin-bottom:16px}@media (max-width: 1024px){.product.taxTim .product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}.product.wellTec .product__floating-header{background-color:#ff531d}.product.will h3.product__heading{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
|
|
2694
2665
|
}
|
|
2695
2666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectSolutionsProductV2Component, decorators: [{
|
|
2696
2667
|
type: Component,
|
|
2697
|
-
args: [{ selector: 'lib-af-connect-solutions-product-v2', template: "<section [ngClass]=\"['product', variant]\">\r\n <div class=\"product__img-wrapper\">\r\n <img class=\"product__img\" [src]=\"
|
|
2698
|
-
}], propDecorators: {
|
|
2668
|
+
args: [{ selector: 'lib-af-connect-solutions-product-v2', template: "<section [ngClass]=\"['product', variant]\">\r\n <div class=\"product__img-wrapper\">\r\n <img class=\"product__img\" [src]=\"imgBaseUrl + content.imgWeb\">\r\n </div>\r\n <div class=\"product__content\">\r\n <div class=\"product__floating-header\">\r\n <h3 class=\"product__heading\">{{ content.heading }}</h3>\r\n <div class=\"product__floating-header-inner\" [class.no-text]=\"!content.subheading\">\r\n @if (variant !== 'taxTim') {\r\n <span class=\"product__description\">{{ content.subheading }}</span>\r\n }\r\n @else {\r\n <img src=\"https://media.taxtim.com/images/taxtim_logo_footer.svg\" alt=\"TaxTim\" width=\"104px\">\r\n }\r\n <a *ngIf=\"content.ctaLink; else anchorTemplate \" class=\"product__link\" (click)=\"onLinkClick()\" [href]=\"content.ctaLink\" target=\"_blank\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n </div>\r\n </div>\r\n <ul class=\"product__list\">\r\n @if (content.description) {\r\n <p class=\"product__free-text\">\r\n {{ content.description }}\r\n </p>\r\n }\r\n @for (label of content.labels; track $index) {\r\n <li class=\"product__list-item\">\r\n @if (label.img) {\r\n <img [src]=\"imgBaseUrl + label.img\" width=\"40px\">\r\n }\r\n @else {\r\n <img [src]=\"imgBaseUrl + 'checkmark-teal.svg'\" alt=\"checkmark\" width=\"32\" height=\"32\">\r\n }\r\n <span [innerHTML]=\"label.text | safeHtml\"></span>\r\n </li>\r\n }\r\n @if (variant === 'taxTim') {\r\n <li class=\"product__list-item\">\r\n <img [src]=\"imgBaseUrl + 'checkmark-teal.svg'\" alt=\"checkmark\" width=\"32\" height=\"32\"> \r\n <span [innerHTML]=\"taxTimPromoCodeListItem() | safeHtml\"></span>\r\n </li>\r\n }\r\n </ul>\r\n </div>\r\n</section>\r\n\r\n<ng-template #anchorTemplate>\r\n <a class=\"product__link\" href=\"javascript:void(0)\" (click)=\"onClick()\">\r\n <img [src]=\"imgBaseUrl + 'chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n</ng-template>", styles: [":host{display:block}.product{height:100%;background-color:#ddebee;color:#061426;min-width:332px;max-width:388px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}@media (max-width: 1024px){.product{min-width:auto;width:312px}}.product__img-wrapper{aspect-ratio:194/137}.product__img-wrapper .product__img{display:block;width:100%;height:100%;object-fit:cover}.product__content{margin-top:-128px;padding:36px;position:relative;z-index:1}.product__content .product__floating-header{border-radius:10px;color:#fff;padding:18px 24px;margin-bottom:24px;container:floating-header/inline-size}@media (max-width: 1024px){.product__content .product__floating-header{margin-bottom:18px;padding:16px}}.product__content .product__floating-header .product__floating-header-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-2.2rem}@media (max-width: 1024px){.product__content .product__floating-header .product__floating-header-inner.no-text{margin-top:-1rem}}.product__content .product__floating-header .product__heading{margin-block:0 6px;font-size:28px;font-family:var(--standard-font-family-hero-new-semibold)}@container floating-header (width < 264px){.product__content .product__floating-header .product__heading{font-size:26px}}@container floating-header (width < 248px){.product__content .product__floating-header .product__heading{font-size:24px}}@container floating-header (width < 232px){.product__content .product__floating-header .product__heading{font-size:22px}}.product__content .product__floating-header .product__description{font-family:var(--standard-font-family-hero-new-semibold);max-width:180px}.product__content .product__floating-header .product__link{text-decoration:none;color:#fff}.product__content .product__floating-header .product__link img{display:block;width:42px;height:42px}@media (max-width: 1024px){.product__content .product__floating-header .product__link img{width:32px;height:32px}}.product__content .product__list{padding:0;margin:0;list-style:none}.product__content .product__list .product__list-item{display:flex;align-items:center;gap:16px}.product__content .product__list .product__list-item img{width:32px;height:32px}.product__content .product__list .product__list-item:not(:last-child){margin-bottom:28px}@media (max-width: 1024px){.product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}@media (max-width: 1024px){.product__content{padding:26px}}.product.afplus .product__floating-header,.product.namEducation .product__floating-header{background-color:#124e57}.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:40px;height:40px}@media (max-width: 1024px){.product.afplus .product__content .product__list .product__list-item img,.product.namEducation .product__content .product__list .product__list-item img{width:32px;height:32px}}.product.myMoneyMatters .product__floating-header,.product.namDebt .product__floating-header{background-color:#ff531d}.product.myMoneyMatters .product__content,.product.namDebt .product__content{padding-bottom:25px}.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:16px}@media (max-width: 1024px){.product.myMoneyMatters .product__content .product__list .product__list-item:not(:last-child),.product.namDebt .product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-block:0 17px}@media (max-width: 1024px){.product.myMoneyMatters .product__free-text,.product.namDebt .product__free-text{margin-bottom:10px}}.product.advice .product__floating-header,.product.namJobs .product__floating-header,.product.will .product__floating-header,.product.education .product__floating-header{background-color:#f69521}.product.taxTim .product__floating-header{background-color:#124e57}.product.taxTim .product__floating-header h3.product__heading{min-height:78.25px}@container floating-header (width < 264px){.product.taxTim .product__floating-header h3.product__heading{min-height:72.75px}}@container floating-header (width < 248px){.product.taxTim .product__floating-header h3.product__heading{min-height:67.25px}}@container floating-header (width < 232px){.product.taxTim .product__floating-header h3.product__heading{min-height:60px}}.product.taxTim .product__content .product__list .product__list-item:not(:last-child){margin-bottom:16px}@media (max-width: 1024px){.product.taxTim .product__content .product__list .product__list-item:not(:last-child){margin-bottom:14px}}.product.wellTec .product__floating-header{background-color:#ff531d}.product.will h3.product__heading{white-space:nowrap}\n"] }]
|
|
2669
|
+
}], propDecorators: { imgBaseUrl: [{
|
|
2670
|
+
type: Input
|
|
2671
|
+
}], variant: [{
|
|
2699
2672
|
type: Input
|
|
2700
2673
|
}], navigateToProduct: [{
|
|
2701
2674
|
type: Output
|