af-connect-components 18.0.38 → 18.0.39
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 +3 -5
- 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 +4 -6
- package/esm2022/lib/af-connect-solutions-product-v2/af-connect-solutions-product-v2.data.mjs +40 -1
- package/esm2022/lib/faq/faq/faq.component.mjs +3 -4
- package/fesm2022/af-connect-components.mjs +50 -16
- package/fesm2022/af-connect-components.mjs.map +1 -1
- package/lib/af-connect-solutions-product/af-connect-solutions-product.component.d.ts +1 -2
- package/lib/af-connect-solutions-product/af-connect-solutions-product.data.d.ts +2 -0
- package/lib/af-connect-solutions-product-v2/af-connect-solutions-product-v2.component.d.ts +1 -2
- 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 +37 -0
- package/src/assets/icons/checkmark-teal.svg +11 -0
- package/src/assets/icons/chevron-right-rounded.svg +1 -0
- package/src/assets/icons/devices-blue.svg +17 -0
- package/src/assets/icons/document-clock-blue.svg +68 -0
- package/src/assets/icons/hourglass-blue.svg +42 -0
- package/src/assets/icons/phone-text-bubbles-blue.svg +677 -0
- package/src/assets/icons/price-tag-blue.svg +61 -0
- package/src/assets/icons/shield-blue.svg +35 -0
- package/src/assets/icons/travel-blue.svg +415 -0
- 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
|
@@ -1122,9 +1122,10 @@ 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';
|
|
1125
1126
|
}
|
|
1126
1127
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FaqComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1127
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FaqComponent, selector: "lib-faq", inputs: { faqItems: "faqItems", fallBackImageSrc: "fallBackImageSrc"
|
|
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"] }] }); }
|
|
1128
1129
|
}
|
|
1129
1130
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FaqComponent, decorators: [{
|
|
1130
1131
|
type: Component,
|
|
@@ -1133,8 +1134,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1133
1134
|
type: Input
|
|
1134
1135
|
}], fallBackImageSrc: [{
|
|
1135
1136
|
type: Input
|
|
1136
|
-
}], imageSrc: [{
|
|
1137
|
-
type: Input
|
|
1138
1137
|
}] } });
|
|
1139
1138
|
|
|
1140
1139
|
class ImageWithFallbackDirective {
|
|
@@ -1208,25 +1207,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1208
1207
|
|
|
1209
1208
|
const defaultConfig = [
|
|
1210
1209
|
{
|
|
1211
|
-
imageSrc: '
|
|
1210
|
+
imageSrc: '/assets/images/mmm-carousel.jpg',
|
|
1212
1211
|
title: 'My Money Matters',
|
|
1213
1212
|
content: 'Get the most out of your money. Explore ways to make your money and savings work for you with our tools.',
|
|
1214
1213
|
readMore: 'https://mymoneymatters.alexforbes.com/'
|
|
1215
1214
|
},
|
|
1216
1215
|
{
|
|
1217
|
-
imageSrc: '
|
|
1216
|
+
imageSrc: '/assets/images/AF-Rewards-carousel.jpg',
|
|
1218
1217
|
title: 'My Rewards',
|
|
1219
1218
|
content: 'Exclusive savings from big brands.',
|
|
1220
1219
|
readMore: 'https://plus.alexforbes.com/Identity/Account/Login?ReturnUrl=%2fProducts%2fReferral%2fRedirect?typeId=11&utm_medium=web&utm_source=afconnect&utm_campaign=AF%20Connect'
|
|
1221
1220
|
},
|
|
1222
1221
|
{
|
|
1223
|
-
imageSrc: '
|
|
1222
|
+
imageSrc: '/assets/images/Unit-trusts-carousel.jpg',
|
|
1224
1223
|
title: 'Unit Trusts',
|
|
1225
1224
|
content: 'Invest from as little as R500.00 a month to up to R30 000.00 up front toward a personal goal.',
|
|
1226
1225
|
readMore: 'https://www.alexforbes.com/za/en/individual/investing-for-a-goal.html'
|
|
1227
1226
|
},
|
|
1228
1227
|
{
|
|
1229
|
-
imageSrc: '
|
|
1228
|
+
imageSrc: '/assets/images/AF-Plus-carousel.jpg',
|
|
1230
1229
|
title: 'AF+',
|
|
1231
1230
|
content: 'Guided by expert advisers and fulfilled by trusted partners, making it easy to solve life’s financial challenges with confidence.',
|
|
1232
1231
|
readMore: 'https://plus.alexforbes.com/'
|
|
@@ -2409,15 +2408,13 @@ class AfConnectSolutionsProductComponent {
|
|
|
2409
2408
|
window.open(this.content.ctaLink, '_blank');
|
|
2410
2409
|
}
|
|
2411
2410
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectSolutionsProductComponent, deps: [{ token: BreakpointLibService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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",
|
|
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]=\"'/assets/images/' + 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]=\"'/assets/images/' + 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]=\"'/assets/icons/' + 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" }] }); }
|
|
2413
2412
|
}
|
|
2414
2413
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectSolutionsProductComponent, decorators: [{
|
|
2415
2414
|
type: Component,
|
|
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]=\"
|
|
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]=\"'/assets/images/' + 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]=\"'/assets/images/' + 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]=\"'/assets/icons/' + 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"] }]
|
|
2417
2416
|
}], ctorParameters: () => [{ type: BreakpointLibService }], propDecorators: { direction: [{
|
|
2418
2417
|
type: Input
|
|
2419
|
-
}], imgBaseUrl: [{
|
|
2420
|
-
type: Input
|
|
2421
2418
|
}], variant: [{
|
|
2422
2419
|
type: Input
|
|
2423
2420
|
}] } });
|
|
@@ -2615,6 +2612,45 @@ const data = {
|
|
|
2615
2612
|
}
|
|
2616
2613
|
]
|
|
2617
2614
|
},
|
|
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
|
+
}
|
|
2618
2654
|
};
|
|
2619
2655
|
|
|
2620
2656
|
class SafeHtmlPipe {
|
|
@@ -2661,14 +2697,12 @@ class AfConnectSolutionsProductV2Component {
|
|
|
2661
2697
|
this.linkClick.emit(this._variant);
|
|
2662
2698
|
}
|
|
2663
2699
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectSolutionsProductV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2664
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AfConnectSolutionsProductV2Component, selector: "lib-af-connect-solutions-product-v2", inputs: {
|
|
2700
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AfConnectSolutionsProductV2Component, selector: "lib-af-connect-solutions-product-v2", inputs: { 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]=\"'/assets/images/' + 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]=\"'/assets/icons/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]=\"'/assets/icons/' + label.img\" width=\"40px\">\r\n }\r\n @else {\r\n <img [src]=\"'/assets/icons/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]=\"'/assets/icons/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 @if (content.bottomCtaTitle && content.bottomCtaLink) {\r\n <div class=\"product__bottom-cta\">\r\n <span >\r\n {{ content.bottomCtaTitle }}\r\n </span>\r\n <a class=\"product__link\" (click)=\"onLinkClick()\" [href]=\"content.bottomCtaLink\" target=\"_blank\">\r\n <img [src]=\"'/assets/icons/chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n </div>\r\n }\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]=\"'/assets/icons/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:-1.8rem}@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}.product.rewards .product__floating-header{background-color:#f69521}.product.invest .product__floating-header{background-color:#f15a22}.product__bottom-cta{display:flex;align-items:center;margin-top:1.75rem;gap:1rem}@media (max-width: 1024px){.product__bottom-cta{margin-top:18px}}.product__bottom-cta span{color:#ff531d;font-weight:600}.product__bottom-cta a{display:block-inline;height:auto;width:1.5rem;background:var(--primary-orange-mobile-color);border-radius:50%;overflow:hidden}.product__bottom-cta a>img{display:block;width:1.5rem;height:1.5rem;transform:scale(1.5)}\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" }] }); }
|
|
2665
2701
|
}
|
|
2666
2702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AfConnectSolutionsProductV2Component, decorators: [{
|
|
2667
2703
|
type: Component,
|
|
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]=\"
|
|
2669
|
-
}], propDecorators: {
|
|
2670
|
-
type: Input
|
|
2671
|
-
}], variant: [{
|
|
2704
|
+
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]=\"'/assets/images/' + 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]=\"'/assets/icons/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]=\"'/assets/icons/' + label.img\" width=\"40px\">\r\n }\r\n @else {\r\n <img [src]=\"'/assets/icons/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]=\"'/assets/icons/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 @if (content.bottomCtaTitle && content.bottomCtaLink) {\r\n <div class=\"product__bottom-cta\">\r\n <span >\r\n {{ content.bottomCtaTitle }}\r\n </span>\r\n <a class=\"product__link\" (click)=\"onLinkClick()\" [href]=\"content.bottomCtaLink\" target=\"_blank\">\r\n <img [src]=\"'/assets/icons/chevron-right-rounded.svg'\" alt=\"chevron\">\r\n </a>\r\n </div>\r\n }\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]=\"'/assets/icons/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:-1.8rem}@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}.product.rewards .product__floating-header{background-color:#f69521}.product.invest .product__floating-header{background-color:#f15a22}.product__bottom-cta{display:flex;align-items:center;margin-top:1.75rem;gap:1rem}@media (max-width: 1024px){.product__bottom-cta{margin-top:18px}}.product__bottom-cta span{color:#ff531d;font-weight:600}.product__bottom-cta a{display:block-inline;height:auto;width:1.5rem;background:var(--primary-orange-mobile-color);border-radius:50%;overflow:hidden}.product__bottom-cta a>img{display:block;width:1.5rem;height:1.5rem;transform:scale(1.5)}\n"] }]
|
|
2705
|
+
}], propDecorators: { variant: [{
|
|
2672
2706
|
type: Input
|
|
2673
2707
|
}], navigateToProduct: [{
|
|
2674
2708
|
type: Output
|