@jooler/jooler-websites-shared 0.0.144 → 0.0.146
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/README.md +24 -24
- package/esm2020/jooler-websites-shared.mjs +4 -4
- package/esm2020/lib/achievements/achievements.component.mjs +17 -17
- package/esm2020/lib/call-to-action-section/call-to-action-section.component.mjs +24 -32
- package/esm2020/lib/call-to-action-section-two/call-to-action-section-two.component.mjs +22 -22
- package/esm2020/lib/call-to-action-section-two/call-to-action-section-two.model.mjs +3 -3
- package/esm2020/lib/call-to-action-section-two/link-text.model.mjs +3 -3
- package/esm2020/lib/choose-country-with-flag/choose-country-with-flag.component.mjs +55 -55
- package/esm2020/lib/coming-soon/coming-soon.component.mjs +22 -22
- package/esm2020/lib/contact-us-page/contact-us-page.component.mjs +129 -129
- package/esm2020/lib/cta-section-style-four/cta-section-style-four.component.mjs +37 -37
- package/esm2020/lib/cta-section-style-three/cta-section-style-three.component.mjs +25 -25
- package/esm2020/lib/custom-tooltip/custom-tooltip.component.mjs +19 -19
- package/esm2020/lib/faq-category-listing/faq-category-listing.component.mjs +25 -25
- package/esm2020/lib/faq-listing/faq-listing.component.mjs +25 -25
- package/esm2020/lib/get-started-cta/get-started-cta.component.mjs +22 -22
- package/esm2020/lib/header-section-one/header-section-one.component.mjs +23 -23
- package/esm2020/lib/image-gallery-modal/image-gallery-modal.component.mjs +132 -132
- package/esm2020/lib/jooler-websites-shared.module.mjs +201 -226
- package/esm2020/lib/models/about-us-section.model.mjs +2 -2
- package/esm2020/lib/models/account-type.model.mjs +9 -9
- package/esm2020/lib/models/account.model.mjs +3 -3
- package/esm2020/lib/models/achievement.model.mjs +3 -3
- package/esm2020/lib/models/achievements.model.mjs +3 -3
- package/esm2020/lib/models/address.model.mjs +3 -3
- package/esm2020/lib/models/brand-logo.model.mjs +2 -2
- package/esm2020/lib/models/call-to-action-button.model.mjs +3 -3
- package/esm2020/lib/models/call-to-action-data.model.mjs +3 -2
- package/esm2020/lib/models/city.model.mjs +3 -3
- package/esm2020/lib/models/country.model.mjs +3 -3
- package/esm2020/lib/models/cta-one-type.model.mjs +2 -2
- package/esm2020/lib/models/cta-section-style-four.model.mjs +2 -2
- package/esm2020/lib/models/faq-category.model.mjs +3 -3
- package/esm2020/lib/models/faq-subcategory.model.mjs +3 -3
- package/esm2020/lib/models/faq.model.mjs +3 -3
- package/esm2020/lib/models/gallery-items-properties.model.mjs +2 -2
- package/esm2020/lib/models/get-started-cta.model.mjs +3 -3
- package/esm2020/lib/models/header-section-style-one.model.mjs +2 -2
- package/esm2020/lib/models/image-section-action.model.mjs +3 -3
- package/esm2020/lib/models/image-section.model.mjs +3 -3
- package/esm2020/lib/models/page-section-action.model.mjs +3 -3
- package/esm2020/lib/models/page-section-style-thirteen.model.mjs +6 -6
- package/esm2020/lib/models/page-section.model.mjs +3 -3
- package/esm2020/lib/models/page-style-section-five.model.mjs +3 -3
- package/esm2020/lib/models/perks.model.mjs +3 -3
- package/esm2020/lib/models/section-title.model.mjs +2 -2
- package/esm2020/lib/models/service-plan.model.mjs +3 -3
- package/esm2020/lib/models/team-member.model.mjs +3 -3
- package/esm2020/lib/models/team-section.model.mjs +3 -3
- package/esm2020/lib/models/user-type.model.mjs +8 -8
- package/esm2020/lib/models/user.model.mjs +3 -3
- package/esm2020/lib/our-client-listing/our-client-listing.component.mjs +17 -17
- package/esm2020/lib/our-clients/our-clients.component.mjs +54 -54
- package/esm2020/lib/page-section-style-ten/page-section-style-ten.component.mjs +33 -33
- package/esm2020/lib/page-section-style-thirteen/page-section-style-thirteen.component.mjs +43 -43
- package/esm2020/lib/page-section-style-three/page-section-style-three.component.mjs +25 -25
- package/esm2020/lib/page-section-with-multiple-cards/page-section-with-multiple-cards.component.mjs +24 -24
- package/esm2020/lib/pricing-plans/pricing-plans.component.mjs +23 -23
- package/esm2020/lib/section-title/section-title.component.mjs +14 -14
- package/esm2020/lib/social-media-icons/social-media-icons.component.mjs +40 -40
- package/esm2020/lib/social-media-icons/social-media-links.model.mjs +3 -3
- package/esm2020/lib/success-message-dialog/success-message-dialog.component.mjs +22 -22
- package/esm2020/lib/team/team.component.mjs +52 -52
- package/esm2020/lib/value-props-section/value-props-section.component.mjs +33 -33
- package/esm2020/lib/values/values.component.mjs +39 -39
- package/esm2020/public-api.mjs +67 -71
- package/fesm2015/jooler-websites-shared.mjs +1004 -1133
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +1004 -1133
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/index.d.ts +5 -5
- package/lib/achievements/achievements.component.d.ts +10 -10
- package/lib/call-to-action-section/call-to-action-section.component.d.ts +13 -14
- package/lib/call-to-action-section-two/call-to-action-section-two.component.d.ts +13 -13
- package/lib/call-to-action-section-two/call-to-action-section-two.model.d.ts +11 -11
- package/lib/call-to-action-section-two/link-text.model.d.ts +4 -4
- package/lib/choose-country-with-flag/choose-country-with-flag.component.d.ts +19 -19
- package/lib/coming-soon/coming-soon.component.d.ts +8 -8
- package/lib/contact-us-page/contact-us-page.component.d.ts +50 -50
- package/lib/cta-section-style-four/cta-section-style-four.component.d.ts +15 -15
- package/lib/cta-section-style-three/cta-section-style-three.component.d.ts +12 -12
- package/lib/custom-tooltip/custom-tooltip.component.d.ts +8 -8
- package/lib/faq-category-listing/faq-category-listing.component.d.ts +14 -14
- package/lib/faq-listing/faq-listing.component.d.ts +13 -13
- package/lib/get-started-cta/get-started-cta.component.d.ts +13 -13
- package/lib/header-section-one/header-section-one.component.d.ts +11 -11
- package/lib/image-gallery-modal/image-gallery-modal.component.d.ts +27 -27
- package/lib/jooler-websites-shared.module.d.ts +42 -47
- package/lib/models/about-us-section.model.d.ts +6 -6
- package/lib/models/account-type.model.d.ts +7 -7
- package/lib/models/account.model.d.ts +16 -16
- package/lib/models/achievement.model.d.ts +4 -4
- package/lib/models/achievements.model.d.ts +6 -6
- package/lib/models/address.model.d.ts +18 -18
- package/lib/models/brand-logo.model.d.ts +4 -4
- package/lib/models/call-to-action-button.model.d.ts +4 -4
- package/lib/models/call-to-action-data.model.d.ts +7 -17
- package/lib/models/city.model.d.ts +5 -5
- package/lib/models/country.model.d.ts +5 -5
- package/lib/models/cta-one-type.model.d.ts +14 -14
- package/lib/models/cta-section-style-four.model.d.ts +8 -8
- package/lib/models/faq-category.model.d.ts +9 -9
- package/lib/models/faq-subcategory.model.d.ts +8 -8
- package/lib/models/faq.model.d.ts +7 -7
- package/lib/models/gallery-items-properties.model.d.ts +4 -4
- package/lib/models/get-started-cta.model.d.ts +8 -8
- package/lib/models/header-section-style-one.model.d.ts +16 -16
- package/lib/models/image-section-action.model.d.ts +7 -7
- package/lib/models/image-section.model.d.ts +12 -12
- package/lib/models/page-section-action.model.d.ts +5 -5
- package/lib/models/page-section-style-thirteen.model.d.ts +4 -4
- package/lib/models/page-section.model.d.ts +11 -11
- package/lib/models/page-style-section-five.model.d.ts +5 -5
- package/lib/models/perks.model.d.ts +4 -4
- package/lib/models/section-title.model.d.ts +7 -7
- package/lib/models/service-plan.model.d.ts +10 -10
- package/lib/models/team-member.model.d.ts +6 -6
- package/lib/models/team-section.model.d.ts +7 -7
- package/lib/models/user-type.model.d.ts +6 -6
- package/lib/models/user.model.d.ts +11 -11
- package/lib/our-client-listing/our-client-listing.component.d.ts +10 -10
- package/lib/our-clients/our-clients.component.d.ts +15 -15
- package/lib/page-section-style-ten/page-section-style-ten.component.d.ts +15 -15
- package/lib/page-section-style-thirteen/page-section-style-thirteen.component.d.ts +21 -21
- package/lib/page-section-style-three/page-section-style-three.component.d.ts +12 -12
- package/lib/page-section-with-multiple-cards/page-section-with-multiple-cards.component.d.ts +12 -12
- package/lib/pricing-plans/pricing-plans.component.d.ts +12 -12
- package/lib/section-title/section-title.component.d.ts +7 -7
- package/lib/social-media-icons/social-media-icons.component.d.ts +20 -20
- package/lib/social-media-icons/social-media-links.model.d.ts +6 -6
- package/lib/success-message-dialog/success-message-dialog.component.d.ts +11 -11
- package/lib/team/team.component.d.ts +18 -18
- package/lib/value-props-section/value-props-section.component.d.ts +11 -11
- package/lib/values/values.component.d.ts +15 -15
- package/package.json +2 -2
- package/public-api.d.ts +63 -67
- package/esm2020/lib/feature-section-four/feature-section-four.component.mjs +0 -31
- package/esm2020/lib/feature-section-one/feature-section-one.component.mjs +0 -23
- package/esm2020/lib/feature-section-three/feature-section-three.component.mjs +0 -16
- package/esm2020/lib/feature-section-two/feature-section-two.component.mjs +0 -21
- package/esm2020/lib/models/cta-cards.model.mjs +0 -2
- package/esm2020/lib/vertical-side-tabs/vertical-side-tabs.component.mjs +0 -37
- package/lib/feature-section-four/feature-section-four.component.d.ts +0 -10
- package/lib/feature-section-one/feature-section-one.component.d.ts +0 -11
- package/lib/feature-section-three/feature-section-three.component.d.ts +0 -6
- package/lib/feature-section-two/feature-section-two.component.d.ts +0 -9
- package/lib/models/cta-cards.model.d.ts +0 -7
- package/lib/vertical-side-tabs/vertical-side-tabs.component.d.ts +0 -14
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Component, Input, EventEmitter, Output, HostListener, forwardRef, NgModule } from '@angular/core';
|
|
3
|
-
import * as
|
|
3
|
+
import * as i2 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
-
import * as i2 from '@fortawesome/angular-fontawesome';
|
|
5
|
+
import * as i2$1 from '@fortawesome/angular-fontawesome';
|
|
6
6
|
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
|
|
7
|
-
import * as i3
|
|
7
|
+
import * as i3 from '@angular/material/expansion';
|
|
8
8
|
import { AppMaterialModule } from '@jooler/app-material';
|
|
9
9
|
import { FontAwesomeSharedModule } from '@jooler/font-awesome-shared';
|
|
10
10
|
import * as i1 from '@angular/router';
|
|
11
|
-
import * as i3$
|
|
11
|
+
import * as i3$1 from '@angular/material/button';
|
|
12
12
|
import * as i4 from '@angular/material/tooltip';
|
|
13
13
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
14
14
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
@@ -19,1249 +19,1120 @@ import * as i4$2 from 'primeng/api';
|
|
|
19
19
|
import * as i1$2 from '@angular/material/dialog';
|
|
20
20
|
import * as i5 from 'primeng/carousel';
|
|
21
21
|
import { CarouselModule } from 'primeng/carousel';
|
|
22
|
-
import * as i3$
|
|
22
|
+
import * as i3$2 from '@angular/forms';
|
|
23
23
|
import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
24
|
-
import * as i3$
|
|
24
|
+
import * as i3$3 from '@ng-select/ng-select';
|
|
25
25
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
26
|
-
import * as
|
|
27
|
-
import { map } from 'rxjs';
|
|
28
|
-
import * as i3$5 from '@angular/material/card';
|
|
29
|
-
import * as i2$2 from '@angular/material/tabs';
|
|
26
|
+
import * as i1$3 from '@angular/material/icon';
|
|
30
27
|
|
|
31
|
-
class SectionTitleComponent {
|
|
32
|
-
}
|
|
33
|
-
SectionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
-
SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SectionTitleComponent, selector: "section-title", inputs: { sectionTitle: "sectionTitle" }, ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider}\">\n <div class=\"title-container\">\n <div class=\"title\"
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, decorators: [{
|
|
36
|
-
type: Component,
|
|
37
|
-
args: [{ selector: 'section-title', template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider}\">\n <div class=\"title-container\">\n <div class=\"title\"
|
|
38
|
-
}], propDecorators: { sectionTitle: [{
|
|
39
|
-
type: Input
|
|
28
|
+
class SectionTitleComponent {
|
|
29
|
+
}
|
|
30
|
+
SectionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
31
|
+
SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SectionTitleComponent, selector: "section-title", inputs: { sectionTitle: "sectionTitle" }, ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider}\">\r\n <div class=\"title-container\">\r\n <div class=\"title\">{{sectionTitle.title}}</div>\r\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\r\n </div>\r\n </div>\r\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\r\n {{sectionTitle.subtitle}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.2rem auto 3.2rem}.align-center .description{margin:auto;width:70%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:bolder;font-size:4.5rem;width:auto;margin:auto;line-height:normal}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-color:#fff}.dark-background .title,.dark-background .description{color:#fff}.without-divider{display:flex;flex-direction:column;row-gap:3rem}.without-divider .title{font-size:5rem}.without-divider .description{font-size:2rem}@media only screen and (max-width: 37.5em){.without-divider .title{font-size:3rem}.without-divider .description{font-size:1.8rem}}.light-background .divider{background-color:#155ed4}.light-background .title,.light-background .description{color:#32353b}.description{width:85%;font-weight:500;font-size:1.6rem}.align-left .title{margin:0}.align-left .divider{margin:.2rem 0 3.2rem;width:auto}.align-left .description{width:85%;margin:0}.align-left .title-container{margin:0}@media only screen and (max-width: 37.5em){.align-left .title,.align-center .title{font-size:3rem}.align-left .description,.align-center .description{width:85%;font-size:1.8rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
32
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, decorators: [{
|
|
33
|
+
type: Component,
|
|
34
|
+
args: [{ selector: 'section-title', template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider}\">\r\n <div class=\"title-container\">\r\n <div class=\"title\">{{sectionTitle.title}}</div>\r\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\r\n </div>\r\n </div>\r\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\r\n {{sectionTitle.subtitle}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.2rem auto 3.2rem}.align-center .description{margin:auto;width:70%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:bolder;font-size:4.5rem;width:auto;margin:auto;line-height:normal}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-color:#fff}.dark-background .title,.dark-background .description{color:#fff}.without-divider{display:flex;flex-direction:column;row-gap:3rem}.without-divider .title{font-size:5rem}.without-divider .description{font-size:2rem}@media only screen and (max-width: 37.5em){.without-divider .title{font-size:3rem}.without-divider .description{font-size:1.8rem}}.light-background .divider{background-color:#155ed4}.light-background .title,.light-background .description{color:#32353b}.description{width:85%;font-weight:500;font-size:1.6rem}.align-left .title{margin:0}.align-left .divider{margin:.2rem 0 3.2rem;width:auto}.align-left .description{width:85%;margin:0}.align-left .title-container{margin:0}@media only screen and (max-width: 37.5em){.align-left .title,.align-center .title{font-size:3rem}.align-left .description,.align-center .description{width:85%;font-size:1.8rem}}\n"] }]
|
|
35
|
+
}], propDecorators: { sectionTitle: [{
|
|
36
|
+
type: Input
|
|
40
37
|
}] } });
|
|
41
38
|
|
|
42
|
-
class PageSectionStyleTenComponent {
|
|
43
|
-
constructor() {
|
|
44
|
-
this.iconName = "circle";
|
|
45
|
-
this.panelOpenState = false;
|
|
46
|
-
this.panelChanged = new EventEmitter();
|
|
47
|
-
}
|
|
48
|
-
ngOnInit() { }
|
|
49
|
-
onClickPanel(index) {
|
|
50
|
-
this.selectedPanel = index;
|
|
51
|
-
console.log(this.selectedPanel);
|
|
52
|
-
this.panelChanged.emit(this.selectedPanel);
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
PageSectionStyleTenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
56
|
-
PageSectionStyleTenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleTenComponent, selector: "page-section-style-ten", inputs: { data: "data", iconName: "iconName", selectedPanel: "selectedPanel" }, outputs: { panelChanged: "panelChanged" }, ngImport: i0, template: "<mat-accordion class=\"mat-mdc-form-field\">\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\"\n *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n <mat-expansion-panel-header>\n <div class=\"panel-headline\">\n <mat-panel-title>\n <fa-icon [icon]=\"iconName\">\n </fa-icon>\n {{item.question}}\n </mat-panel-title>\n </div>\n </mat-expansion-panel-header>\n\n <div class=\"panel-content\">\n <ul>\n <li>\n {{item.answer}}\n </li>\n </ul>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: ["
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, decorators: [{
|
|
58
|
-
type: Component,
|
|
59
|
-
args: [{ selector: 'page-section-style-ten', template: "<mat-accordion class=\"mat-mdc-form-field\">\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\"\n *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n <mat-expansion-panel-header>\n <div class=\"panel-headline\">\n <mat-panel-title>\n <fa-icon [icon]=\"iconName\">\n </fa-icon>\n {{item.question}}\n </mat-panel-title>\n </div>\n </mat-expansion-panel-header>\n\n <div class=\"panel-content\">\n <ul>\n <li>\n {{item.answer}}\n </li>\n </ul>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: ["
|
|
60
|
-
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
61
|
-
type: Input
|
|
62
|
-
}], iconName: [{
|
|
63
|
-
type: Input
|
|
64
|
-
}], selectedPanel: [{
|
|
65
|
-
type: Input
|
|
66
|
-
}], panelChanged: [{
|
|
67
|
-
type: Output
|
|
39
|
+
class PageSectionStyleTenComponent {
|
|
40
|
+
constructor() {
|
|
41
|
+
this.iconName = "circle";
|
|
42
|
+
this.panelOpenState = false;
|
|
43
|
+
this.panelChanged = new EventEmitter();
|
|
44
|
+
}
|
|
45
|
+
ngOnInit() { }
|
|
46
|
+
onClickPanel(index) {
|
|
47
|
+
this.selectedPanel = index;
|
|
48
|
+
console.log(this.selectedPanel);
|
|
49
|
+
this.panelChanged.emit(this.selectedPanel);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
PageSectionStyleTenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
PageSectionStyleTenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleTenComponent, selector: "page-section-style-ten", inputs: { data: "data", iconName: "iconName", selectedPanel: "selectedPanel" }, outputs: { panelChanged: "panelChanged" }, ngImport: i0, template: "<mat-accordion class=\"mat-mdc-form-field\">\r\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\"\r\n *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\r\n <mat-expansion-panel-header>\r\n <div class=\"panel-headline\">\r\n <mat-panel-title>\r\n <fa-icon [icon]=\"iconName\">\r\n </fa-icon>\r\n {{item.question}}\r\n </mat-panel-title>\r\n </div>\r\n </mat-expansion-panel-header>\r\n\r\n <div class=\"panel-content\">\r\n <ul>\r\n <li>\r\n {{item.answer}}\r\n </li>\r\n </ul>\r\n </div>\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}mat-card{height:10rem;width:40rem;margin:4.5rem 4.5rem 4.5rem 25rem}.mat-mdc-form-field{display:grid;row-gap:1rem}.main-container{width:100%;height:90vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-self:stretch;margin:2rem auto;z-index:1;max-width:130rem;padding:0 5rem}mat-expansion-panel{background:#FAFAFA}mat-expansion-panel fa-icon{font-size:.7rem;margin-right:1rem}mat-expansion-panel-header{height:100%;min-height:7rem;font-size:1.7rem;font-weight:600}.mat-expansion-panel-header.mat-expanded{height:auto}@media only screen and (max-width: 37.5em){mat-expansion-panel{margin:0rem 1rem}}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, decorators: [{
|
|
55
|
+
type: Component,
|
|
56
|
+
args: [{ selector: 'page-section-style-ten', template: "<mat-accordion class=\"mat-mdc-form-field\">\r\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\"\r\n *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\r\n <mat-expansion-panel-header>\r\n <div class=\"panel-headline\">\r\n <mat-panel-title>\r\n <fa-icon [icon]=\"iconName\">\r\n </fa-icon>\r\n {{item.question}}\r\n </mat-panel-title>\r\n </div>\r\n </mat-expansion-panel-header>\r\n\r\n <div class=\"panel-content\">\r\n <ul>\r\n <li>\r\n {{item.answer}}\r\n </li>\r\n </ul>\r\n </div>\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}mat-card{height:10rem;width:40rem;margin:4.5rem 4.5rem 4.5rem 25rem}.mat-mdc-form-field{display:grid;row-gap:1rem}.main-container{width:100%;height:90vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-self:stretch;margin:2rem auto;z-index:1;max-width:130rem;padding:0 5rem}mat-expansion-panel{background:#FAFAFA}mat-expansion-panel fa-icon{font-size:.7rem;margin-right:1rem}mat-expansion-panel-header{height:100%;min-height:7rem;font-size:1.7rem;font-weight:600}.mat-expansion-panel-header.mat-expanded{height:auto}@media only screen and (max-width: 37.5em){mat-expansion-panel{margin:0rem 1rem}}\n"] }]
|
|
57
|
+
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
58
|
+
type: Input
|
|
59
|
+
}], iconName: [{
|
|
60
|
+
type: Input
|
|
61
|
+
}], selectedPanel: [{
|
|
62
|
+
type: Input
|
|
63
|
+
}], panelChanged: [{
|
|
64
|
+
type: Output
|
|
68
65
|
}] } });
|
|
69
66
|
|
|
70
|
-
class GetStartedCTAComponent {
|
|
71
|
-
constructor(_Router) {
|
|
72
|
-
this._Router = _Router;
|
|
73
|
-
}
|
|
74
|
-
ngOnInit() { }
|
|
75
|
-
onClickLink(route) {
|
|
76
|
-
this._Router.navigate([route]);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
GetStartedCTAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GetStartedCTAComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
80
|
-
GetStartedCTAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GetStartedCTAComponent, selector: "get-started-cta", inputs: { ctaCardData: "ctaCardData" }, ngImport: i0, template: "<div class=\"all\">\n <div class=\"get-started\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-1\" viewBox=\"0 0 228 234\" fill=\"none\">\n <path\n d=\"M0.01022 156.807C3.78242 72.5467 -16.7612 -0.000429796 70.322 -0.000429796C157.405 -0.000429796 228 70.7119 228 157.941C228 245.17 180.321 233.889 94.691 233.133C-3.00754 232.271 0.01022 244.036 0.01022 156.807Z\"\n fill=\"#155ED4\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-2\" viewBox=\"0 0 177 117\" fill=\"none\">\n <path\n d=\"M110.357 10.5333C194 -30.3739 182.428 61.2397 159.12 90.0236C135.811 118.808 82.6409 125.844 53.8569 102.535C25.073 79.226 -15.952 52.3174 7.35676 23.5335C30.6655 -5.25045 70 25.1261 110.357 10.5333Z\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 313 229\" fill=\"none\" class=\"svg-3\">\n <path\n d=\"M291.122 186.096C243.951 286.741 231.946 183.061 148.832 145.184C65.7183 107.307 -33.8765 166.916 12.5879 64.9595C59.0523 -36.9973 149.649 15.9897 217.109 4.58455C305.197 -13.6163 337.586 84.1393 291.122 186.096Z\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-4\" viewBox=\"0 0 130 187\" fill=\"none\">\n <path\n d=\"M129.626 63.1228C128.981 112.458 137.333 187 87.7069 187C38.0805 187 0 112.211 0 62.4765C0 12.7416 37.6506 -0.000427246 87.277 -0.000427246C136.903 -0.000427246 129.626 13.3879 129.626 63.1228Z\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-5\" viewBox=\"0 0 173 131\" fill=\"none\">\n <path\n d=\"M98.7021 21.5285C167.508 -41.2032 182.105 49.9773 167.808 84.1448C153.512 118.312 104.451 139.984 70.2838 125.687C36.1163 111.39 -10.8106 97.0728 3.48602 62.9053C17.7827 28.7378 64.06 46.8582 98.7021 21.5285Z\" />\n </svg>\n\n\n <div class=\"content\">\n <h1>{{ctaCardData.title}}</h1>\n <div class=\"description\">\n {{ctaCardData.description}}\n </div>\n <img [src]=\"ctaCardData.logo.path\" alt=\"\" (click)=\"onClickLink(ctaCardData.logo.route)\" class=\"logo-img\">\n <div class=\"create-account\">\n <input type=\"email\" class=\"email-input\" placeholder=\"Email Address\">\n <button mat-raised-button class=\"sign-up-btn\"\n (click)=\"onClickLink(ctaCardData.callToActionButton.route)\">{{ctaCardData.callToActionButton.ctaText}}</button>\n </div>\n </div>\n </div>\n</div>", styles: ["
|
|
81
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GetStartedCTAComponent, decorators: [{
|
|
82
|
-
type: Component,
|
|
83
|
-
args: [{ selector: 'get-started-cta', template: "<div class=\"all\">\n <div class=\"get-started\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-1\" viewBox=\"0 0 228 234\" fill=\"none\">\n <path\n d=\"M0.01022 156.807C3.78242 72.5467 -16.7612 -0.000429796 70.322 -0.000429796C157.405 -0.000429796 228 70.7119 228 157.941C228 245.17 180.321 233.889 94.691 233.133C-3.00754 232.271 0.01022 244.036 0.01022 156.807Z\"\n fill=\"#155ED4\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-2\" viewBox=\"0 0 177 117\" fill=\"none\">\n <path\n d=\"M110.357 10.5333C194 -30.3739 182.428 61.2397 159.12 90.0236C135.811 118.808 82.6409 125.844 53.8569 102.535C25.073 79.226 -15.952 52.3174 7.35676 23.5335C30.6655 -5.25045 70 25.1261 110.357 10.5333Z\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 313 229\" fill=\"none\" class=\"svg-3\">\n <path\n d=\"M291.122 186.096C243.951 286.741 231.946 183.061 148.832 145.184C65.7183 107.307 -33.8765 166.916 12.5879 64.9595C59.0523 -36.9973 149.649 15.9897 217.109 4.58455C305.197 -13.6163 337.586 84.1393 291.122 186.096Z\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-4\" viewBox=\"0 0 130 187\" fill=\"none\">\n <path\n d=\"M129.626 63.1228C128.981 112.458 137.333 187 87.7069 187C38.0805 187 0 112.211 0 62.4765C0 12.7416 37.6506 -0.000427246 87.277 -0.000427246C136.903 -0.000427246 129.626 13.3879 129.626 63.1228Z\" />\n </svg>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-5\" viewBox=\"0 0 173 131\" fill=\"none\">\n <path\n d=\"M98.7021 21.5285C167.508 -41.2032 182.105 49.9773 167.808 84.1448C153.512 118.312 104.451 139.984 70.2838 125.687C36.1163 111.39 -10.8106 97.0728 3.48602 62.9053C17.7827 28.7378 64.06 46.8582 98.7021 21.5285Z\" />\n </svg>\n\n\n <div class=\"content\">\n <h1>{{ctaCardData.title}}</h1>\n <div class=\"description\">\n {{ctaCardData.description}}\n </div>\n <img [src]=\"ctaCardData.logo.path\" alt=\"\" (click)=\"onClickLink(ctaCardData.logo.route)\" class=\"logo-img\">\n <div class=\"create-account\">\n <input type=\"email\" class=\"email-input\" placeholder=\"Email Address\">\n <button mat-raised-button class=\"sign-up-btn\"\n (click)=\"onClickLink(ctaCardData.callToActionButton.route)\">{{ctaCardData.callToActionButton.ctaText}}</button>\n </div>\n </div>\n </div>\n</div>", styles: ["
|
|
84
|
-
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { ctaCardData: [{
|
|
85
|
-
type: Input
|
|
67
|
+
class GetStartedCTAComponent {
|
|
68
|
+
constructor(_Router) {
|
|
69
|
+
this._Router = _Router;
|
|
70
|
+
}
|
|
71
|
+
ngOnInit() { }
|
|
72
|
+
onClickLink(route) {
|
|
73
|
+
this._Router.navigate([route]);
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
GetStartedCTAComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GetStartedCTAComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
77
|
+
GetStartedCTAComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GetStartedCTAComponent, selector: "get-started-cta", inputs: { ctaCardData: "ctaCardData" }, ngImport: i0, template: "<div class=\"all\">\r\n <div class=\"get-started\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-1\" viewBox=\"0 0 228 234\" fill=\"none\">\r\n <path\r\n d=\"M0.01022 156.807C3.78242 72.5467 -16.7612 -0.000429796 70.322 -0.000429796C157.405 -0.000429796 228 70.7119 228 157.941C228 245.17 180.321 233.889 94.691 233.133C-3.00754 232.271 0.01022 244.036 0.01022 156.807Z\"\r\n fill=\"#155ED4\" />\r\n </svg>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-2\" viewBox=\"0 0 177 117\" fill=\"none\">\r\n <path\r\n d=\"M110.357 10.5333C194 -30.3739 182.428 61.2397 159.12 90.0236C135.811 118.808 82.6409 125.844 53.8569 102.535C25.073 79.226 -15.952 52.3174 7.35676 23.5335C30.6655 -5.25045 70 25.1261 110.357 10.5333Z\" />\r\n </svg>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 313 229\" fill=\"none\" class=\"svg-3\">\r\n <path\r\n d=\"M291.122 186.096C243.951 286.741 231.946 183.061 148.832 145.184C65.7183 107.307 -33.8765 166.916 12.5879 64.9595C59.0523 -36.9973 149.649 15.9897 217.109 4.58455C305.197 -13.6163 337.586 84.1393 291.122 186.096Z\" />\r\n </svg>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-4\" viewBox=\"0 0 130 187\" fill=\"none\">\r\n <path\r\n d=\"M129.626 63.1228C128.981 112.458 137.333 187 87.7069 187C38.0805 187 0 112.211 0 62.4765C0 12.7416 37.6506 -0.000427246 87.277 -0.000427246C136.903 -0.000427246 129.626 13.3879 129.626 63.1228Z\" />\r\n </svg>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-5\" viewBox=\"0 0 173 131\" fill=\"none\">\r\n <path\r\n d=\"M98.7021 21.5285C167.508 -41.2032 182.105 49.9773 167.808 84.1448C153.512 118.312 104.451 139.984 70.2838 125.687C36.1163 111.39 -10.8106 97.0728 3.48602 62.9053C17.7827 28.7378 64.06 46.8582 98.7021 21.5285Z\" />\r\n </svg>\r\n\r\n\r\n <div class=\"content\">\r\n <h1>{{ctaCardData.title}}</h1>\r\n <div class=\"description\">\r\n {{ctaCardData.description}}\r\n </div>\r\n <img [src]=\"ctaCardData.logo.path\" alt=\"\" (click)=\"onClickLink(ctaCardData.logo.route)\" class=\"logo-img\">\r\n <div class=\"create-account\">\r\n <input type=\"email\" class=\"email-input\" placeholder=\"Email Address\">\r\n <button mat-raised-button class=\"sign-up-btn\"\r\n (click)=\"onClickLink(ctaCardData.callToActionButton.route)\">{{ctaCardData.callToActionButton.ctaText}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.all{margin-top:3rem;display:flex;align-items:center}.get-started{position:relative;text-align:center;color:#fff;display:grid;padding:3rem 0rem;border-radius:1.5rem;margin:auto;background-color:#32353b;box-shadow:2rem 2rem 3.4rem #00000040;z-index:2;width:90%}@media only screen and (min-width: 1500px){.get-started{width:150rem}}.get-started path{fill:#155ed4}.get-started svg{position:absolute;z-index:-1;width:20%;height:11rem}.get-started .svg-1{flex-shrink:0;fill:#155ed4;bottom:1rem;left:0%}.get-started .svg-2{left:10%;width:9em;height:11rem}.get-started .svg-3{top:4rem;right:30%}.get-started .svg-4{top:2rem;right:0}.get-started .svg-5{bottom:1rem;right:0}.get-started .content{display:grid;row-gap:1rem}.get-started .content .title{font-size:4rem}.get-started .content .description{width:60%;margin:auto}@media only screen and (max-width: 75em){.get-started .content .description{width:80%}}.get-started .sign-up{text-decoration:underline;font-weight:500;cursor:pointer}.get-started .logo-img{cursor:pointer;margin:2vh 0 5vh;width:20rem;margin:auto}.get-started .create-account{display:flex;justify-content:center;align-items:center;height:3.4rem;width:50%;margin:auto;column-gap:2%}.get-started .sign-up-btn{background-color:#155ed4;color:#fff;height:100%;width:40%;max-width:70%;font-family:inherit}.get-started .email-input{width:60%;height:100%;max-width:80%}@media only screen and (max-width: 75em){.get-started .create-account{width:70%}}@media only screen and (max-width: 56.25em){.get-started .create-account{height:auto;row-gap:1rem;flex-wrap:wrap;width:100%;flex-direction:column}.get-started .sign-up-btn{height:4rem;width:20rem}.get-started .email-input{width:29rem;height:3.5rem}}@media only screen and (max-width: 37.5em){.get-started .svg-3{display:none}}\n"], dependencies: [{ kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
|
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GetStartedCTAComponent, decorators: [{
|
|
79
|
+
type: Component,
|
|
80
|
+
args: [{ selector: 'get-started-cta', template: "<div class=\"all\">\r\n <div class=\"get-started\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-1\" viewBox=\"0 0 228 234\" fill=\"none\">\r\n <path\r\n d=\"M0.01022 156.807C3.78242 72.5467 -16.7612 -0.000429796 70.322 -0.000429796C157.405 -0.000429796 228 70.7119 228 157.941C228 245.17 180.321 233.889 94.691 233.133C-3.00754 232.271 0.01022 244.036 0.01022 156.807Z\"\r\n fill=\"#155ED4\" />\r\n </svg>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-2\" viewBox=\"0 0 177 117\" fill=\"none\">\r\n <path\r\n d=\"M110.357 10.5333C194 -30.3739 182.428 61.2397 159.12 90.0236C135.811 118.808 82.6409 125.844 53.8569 102.535C25.073 79.226 -15.952 52.3174 7.35676 23.5335C30.6655 -5.25045 70 25.1261 110.357 10.5333Z\" />\r\n </svg>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 313 229\" fill=\"none\" class=\"svg-3\">\r\n <path\r\n d=\"M291.122 186.096C243.951 286.741 231.946 183.061 148.832 145.184C65.7183 107.307 -33.8765 166.916 12.5879 64.9595C59.0523 -36.9973 149.649 15.9897 217.109 4.58455C305.197 -13.6163 337.586 84.1393 291.122 186.096Z\" />\r\n </svg>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-4\" viewBox=\"0 0 130 187\" fill=\"none\">\r\n <path\r\n d=\"M129.626 63.1228C128.981 112.458 137.333 187 87.7069 187C38.0805 187 0 112.211 0 62.4765C0 12.7416 37.6506 -0.000427246 87.277 -0.000427246C136.903 -0.000427246 129.626 13.3879 129.626 63.1228Z\" />\r\n </svg>\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"svg-5\" viewBox=\"0 0 173 131\" fill=\"none\">\r\n <path\r\n d=\"M98.7021 21.5285C167.508 -41.2032 182.105 49.9773 167.808 84.1448C153.512 118.312 104.451 139.984 70.2838 125.687C36.1163 111.39 -10.8106 97.0728 3.48602 62.9053C17.7827 28.7378 64.06 46.8582 98.7021 21.5285Z\" />\r\n </svg>\r\n\r\n\r\n <div class=\"content\">\r\n <h1>{{ctaCardData.title}}</h1>\r\n <div class=\"description\">\r\n {{ctaCardData.description}}\r\n </div>\r\n <img [src]=\"ctaCardData.logo.path\" alt=\"\" (click)=\"onClickLink(ctaCardData.logo.route)\" class=\"logo-img\">\r\n <div class=\"create-account\">\r\n <input type=\"email\" class=\"email-input\" placeholder=\"Email Address\">\r\n <button mat-raised-button class=\"sign-up-btn\"\r\n (click)=\"onClickLink(ctaCardData.callToActionButton.route)\">{{ctaCardData.callToActionButton.ctaText}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.all{margin-top:3rem;display:flex;align-items:center}.get-started{position:relative;text-align:center;color:#fff;display:grid;padding:3rem 0rem;border-radius:1.5rem;margin:auto;background-color:#32353b;box-shadow:2rem 2rem 3.4rem #00000040;z-index:2;width:90%}@media only screen and (min-width: 1500px){.get-started{width:150rem}}.get-started path{fill:#155ed4}.get-started svg{position:absolute;z-index:-1;width:20%;height:11rem}.get-started .svg-1{flex-shrink:0;fill:#155ed4;bottom:1rem;left:0%}.get-started .svg-2{left:10%;width:9em;height:11rem}.get-started .svg-3{top:4rem;right:30%}.get-started .svg-4{top:2rem;right:0}.get-started .svg-5{bottom:1rem;right:0}.get-started .content{display:grid;row-gap:1rem}.get-started .content .title{font-size:4rem}.get-started .content .description{width:60%;margin:auto}@media only screen and (max-width: 75em){.get-started .content .description{width:80%}}.get-started .sign-up{text-decoration:underline;font-weight:500;cursor:pointer}.get-started .logo-img{cursor:pointer;margin:2vh 0 5vh;width:20rem;margin:auto}.get-started .create-account{display:flex;justify-content:center;align-items:center;height:3.4rem;width:50%;margin:auto;column-gap:2%}.get-started .sign-up-btn{background-color:#155ed4;color:#fff;height:100%;width:40%;max-width:70%;font-family:inherit}.get-started .email-input{width:60%;height:100%;max-width:80%}@media only screen and (max-width: 75em){.get-started .create-account{width:70%}}@media only screen and (max-width: 56.25em){.get-started .create-account{height:auto;row-gap:1rem;flex-wrap:wrap;width:100%;flex-direction:column}.get-started .sign-up-btn{height:4rem;width:20rem}.get-started .email-input{width:29rem;height:3.5rem}}@media only screen and (max-width: 37.5em){.get-started .svg-3{display:none}}\n"] }]
|
|
81
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { ctaCardData: [{
|
|
82
|
+
type: Input
|
|
86
83
|
}] } });
|
|
87
84
|
|
|
88
|
-
class AchievementsComponent {
|
|
89
|
-
constructor() { }
|
|
90
|
-
ngOnInit() { }
|
|
91
|
-
}
|
|
92
|
-
AchievementsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
93
|
-
AchievementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AchievementsComponent, selector: "achievements", inputs: {
|
|
94
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, decorators: [{
|
|
95
|
-
type: Component,
|
|
96
|
-
args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background':
|
|
97
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
98
|
-
type: Input
|
|
85
|
+
class AchievementsComponent {
|
|
86
|
+
constructor() { }
|
|
87
|
+
ngOnInit() { }
|
|
88
|
+
}
|
|
89
|
+
AchievementsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
90
|
+
AchievementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AchievementsComponent, selector: "achievements", inputs: { achievements: "achievements" }, ngImport: i0, template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': achievements.sectionTitle.isDarkBg}\">\r\n <div class=\"content\">\r\n <div>\r\n <section-title [sectionTitle]=\"achievements.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"achievements-cards\">\r\n <div class=\"achievement-card\" *ngFor=\"let achievement of achievements.achievements\">\r\n <div class=\"number\">\r\n {{achievement.number}}\r\n </div>\r\n <div class=\"subtitle\">\r\n {{achievement.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;row-gap:.4rem}@media screen and (max-width: 800px){.achievements .achievements-cards .achievement-card{width:33%}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{width:50%}}.achievements .achievements-cards .achievement-card .number{text-align:center;color:#fff;font-weight:700;font-size:2.8rem;display:grid;align-content:end}.achievements .achievements-cards .achievement-card .subtitle{color:#fff;text-align:center;font-weight:500;font-size:1.8rem}.blue-background{background:linear-gradient(90deg,#155ED4 3.16%,#0F2844 97.43%);padding:2rem 0rem;color:#fff}.blue-background .achievements-cards{width:100%}.blue-background .achievements-cards .achievement-card{background-color:#fff}.blue-background .achievements-cards .achievement-card .number{color:#155ed4}.blue-background .achievements-cards .achievement-card .subtitle{color:#32353b;font-weight:550}@media only screen and (max-width: 75em){.achievements .achievements-cards{width:100%;display:flex;flex-wrap:wrap;justify-content:center;margin:2rem auto}.achievements .achievements-cards .achievement-card{grid-template-rows:auto auto;width:20rem;height:16rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.8rem}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{height:10rem}.achievements .achievements-cards .achievement-card .number{font-size:2rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.4rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, decorators: [{
|
|
92
|
+
type: Component,
|
|
93
|
+
args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': achievements.sectionTitle.isDarkBg}\">\r\n <div class=\"content\">\r\n <div>\r\n <section-title [sectionTitle]=\"achievements.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"achievements-cards\">\r\n <div class=\"achievement-card\" *ngFor=\"let achievement of achievements.achievements\">\r\n <div class=\"number\">\r\n {{achievement.number}}\r\n </div>\r\n <div class=\"subtitle\">\r\n {{achievement.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;row-gap:.4rem}@media screen and (max-width: 800px){.achievements .achievements-cards .achievement-card{width:33%}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{width:50%}}.achievements .achievements-cards .achievement-card .number{text-align:center;color:#fff;font-weight:700;font-size:2.8rem;display:grid;align-content:end}.achievements .achievements-cards .achievement-card .subtitle{color:#fff;text-align:center;font-weight:500;font-size:1.8rem}.blue-background{background:linear-gradient(90deg,#155ED4 3.16%,#0F2844 97.43%);padding:2rem 0rem;color:#fff}.blue-background .achievements-cards{width:100%}.blue-background .achievements-cards .achievement-card{background-color:#fff}.blue-background .achievements-cards .achievement-card .number{color:#155ed4}.blue-background .achievements-cards .achievement-card .subtitle{color:#32353b;font-weight:550}@media only screen and (max-width: 75em){.achievements .achievements-cards{width:100%;display:flex;flex-wrap:wrap;justify-content:center;margin:2rem auto}.achievements .achievements-cards .achievement-card{grid-template-rows:auto auto;width:20rem;height:16rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.8rem}}@media only screen and (max-width: 37.5em){.achievements .achievements-cards .achievement-card{height:10rem}.achievements .achievements-cards .achievement-card .number{font-size:2rem}.achievements .achievements-cards .achievement-card .subtitle{font-size:1.4rem}}\n"] }]
|
|
94
|
+
}], ctorParameters: function () { return []; }, propDecorators: { achievements: [{
|
|
95
|
+
type: Input
|
|
99
96
|
}] } });
|
|
100
97
|
|
|
101
|
-
class PricingPlansComponent {
|
|
102
|
-
constructor() { }
|
|
103
|
-
ngOnInit() {
|
|
104
|
-
}
|
|
105
|
-
showFeatures() {
|
|
106
|
-
this.featuresButtonClicked = true;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
PricingPlansComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
110
|
-
PricingPlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlan: "servicePlan" }, ngImport: i0, template: " <div class=\"plan-content\" >\n <div class=\"title-price-desc\">\n <h1 class=\"plan-title\">\n {{servicePlan.name}}\n </h1>\n <div class=\"price\" *ngIf=\"servicePlan.price\">\n <span class=\"service-price\">$ {{servicePlan.price}}</span>\n <span>/{{servicePlan.frequency}}</span>\n </div>\n <div class=\"description\">\n {{servicePlan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button class=\"button\">\n Choose Plan\n </button>\n </div>\n </div>\n", styles: ["
|
|
111
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, decorators: [{
|
|
112
|
-
type: Component,
|
|
113
|
-
args: [{ selector: 'pricing-plans', template: " <div class=\"plan-content\" >\n <div class=\"title-price-desc\">\n <h1 class=\"plan-title\">\n {{servicePlan.name}}\n </h1>\n <div class=\"price\" *ngIf=\"servicePlan.price\">\n <span class=\"service-price\">$ {{servicePlan.price}}</span>\n <span>/{{servicePlan.frequency}}</span>\n </div>\n <div class=\"description\">\n {{servicePlan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button class=\"button\">\n Choose Plan\n </button>\n </div>\n </div>\n", styles: ["
|
|
114
|
-
}], ctorParameters: function () { return []; }, propDecorators: { servicePlan: [{
|
|
115
|
-
type: Input
|
|
98
|
+
class PricingPlansComponent {
|
|
99
|
+
constructor() { }
|
|
100
|
+
ngOnInit() {
|
|
101
|
+
}
|
|
102
|
+
showFeatures() {
|
|
103
|
+
this.featuresButtonClicked = true;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
PricingPlansComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
+
PricingPlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlan: "servicePlan" }, ngImport: i0, template: " <div class=\"plan-content\" >\r\n <div class=\"title-price-desc\">\r\n <h1 class=\"plan-title\">\r\n {{servicePlan.name}}\r\n </h1>\r\n <div class=\"price\" *ngIf=\"servicePlan.price\">\r\n <span class=\"service-price\">$ {{servicePlan.price}}</span>\r\n <span>/{{servicePlan.frequency}}</span>\r\n </div>\r\n <div class=\"description\">\r\n {{servicePlan.description}}\r\n </div>\r\n <div class=\"divider\"></div>\r\n </div>\r\n <div class=\"perks\">\r\n <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\r\n <span class=\"check-icon\">\r\n <fa-icon icon=\"check\"></fa-icon>\r\n </span>\r\n <div class=\"service-description\">\r\n <div class=\"service-perk\">\r\n {{perk.perk}}\r\n </div>\r\n <span class=\"exclamation-mark\">\r\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\r\n icon=\"circle-exclamation\"></fa-icon>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"registration-button\">\r\n <button mat-raised-button class=\"button\">\r\n Choose Plan\r\n </button>\r\n </div>\r\n </div>\r\n", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.plan-content{display:flex;flex-direction:column;width:20%;background:#FFFFFF;border-radius:1rem;padding:3rem 2rem;min-width:33rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%;margin:auto}@media only screen and (max-width: 552px){.plan-content{min-width:60%}}@media only screen and (max-width: 75em){.plan-content{width:33rem}}@media only screen and (max-width: 620px){.plan-content{width:90%;height:99%}}.plan-content .title-price-desc{height:22rem}.plan-content .title-price-desc .divider{width:90%;border:.1rem solid #155ED4;margin:1rem auto}.plan-content .plan-title{grid-row:1;color:#155ed4;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem;text-align:center}.plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem;text-align:center;height:8rem}.plan-content .perks{display:flex;row-gap:.5rem;height:100%;align-items:flex-start;flex-direction:column}.plan-content .perks .perk{display:flex;align-items:center;width:100%}.plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#36393fe8;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer;color:#32353b}.plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.plan-content .registration-button{display:flex;padding:1rem 0rem;height:100%}.plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;background-color:#155ed4;color:#fff;width:100%}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, decorators: [{
|
|
109
|
+
type: Component,
|
|
110
|
+
args: [{ selector: 'pricing-plans', template: " <div class=\"plan-content\" >\r\n <div class=\"title-price-desc\">\r\n <h1 class=\"plan-title\">\r\n {{servicePlan.name}}\r\n </h1>\r\n <div class=\"price\" *ngIf=\"servicePlan.price\">\r\n <span class=\"service-price\">$ {{servicePlan.price}}</span>\r\n <span>/{{servicePlan.frequency}}</span>\r\n </div>\r\n <div class=\"description\">\r\n {{servicePlan.description}}\r\n </div>\r\n <div class=\"divider\"></div>\r\n </div>\r\n <div class=\"perks\">\r\n <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\r\n <span class=\"check-icon\">\r\n <fa-icon icon=\"check\"></fa-icon>\r\n </span>\r\n <div class=\"service-description\">\r\n <div class=\"service-perk\">\r\n {{perk.perk}}\r\n </div>\r\n <span class=\"exclamation-mark\">\r\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\r\n icon=\"circle-exclamation\"></fa-icon>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"registration-button\">\r\n <button mat-raised-button class=\"button\">\r\n Choose Plan\r\n </button>\r\n </div>\r\n </div>\r\n", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.plan-content{display:flex;flex-direction:column;width:20%;background:#FFFFFF;border-radius:1rem;padding:3rem 2rem;min-width:33rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%;margin:auto}@media only screen and (max-width: 552px){.plan-content{min-width:60%}}@media only screen and (max-width: 75em){.plan-content{width:33rem}}@media only screen and (max-width: 620px){.plan-content{width:90%;height:99%}}.plan-content .title-price-desc{height:22rem}.plan-content .title-price-desc .divider{width:90%;border:.1rem solid #155ED4;margin:1rem auto}.plan-content .plan-title{grid-row:1;color:#155ed4;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem;text-align:center}.plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem;text-align:center;height:8rem}.plan-content .perks{display:flex;row-gap:.5rem;height:100%;align-items:flex-start;flex-direction:column}.plan-content .perks .perk{display:flex;align-items:center;width:100%}.plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#36393fe8;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer;color:#32353b}.plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.plan-content .registration-button{display:flex;padding:1rem 0rem;height:100%}.plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;background-color:#155ed4;color:#fff;width:100%}\n"] }]
|
|
111
|
+
}], ctorParameters: function () { return []; }, propDecorators: { servicePlan: [{
|
|
112
|
+
type: Input
|
|
116
113
|
}] } });
|
|
117
114
|
|
|
118
|
-
class ImageGalleryModal {
|
|
119
|
-
constructor(breakpointObserver) {
|
|
120
|
-
this.breakpointObserver = breakpointObserver;
|
|
121
|
-
this.galleryData = [];
|
|
122
|
-
this.showCount = false;
|
|
123
|
-
this.previewImage = false;
|
|
124
|
-
this.showMask = false;
|
|
125
|
-
this.currentImageGalleryModal = this.galleryData[0];
|
|
126
|
-
this.currentIndex = 0;
|
|
127
|
-
this.controls = true;
|
|
128
|
-
this.totalImageCount = 0;
|
|
129
|
-
}
|
|
130
|
-
ngOnInit() {
|
|
131
|
-
this.breakpointObserver.observe("(max-width: 900px)").subscribe((result) => {
|
|
132
|
-
if (result.matches) {
|
|
133
|
-
this.onClosePreview();
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
this.totalImageCount = this.galleryData.length;
|
|
137
|
-
this.responsiveOptions = [
|
|
138
|
-
{
|
|
139
|
-
breakpoint: '900px',
|
|
140
|
-
numVisible: 5
|
|
141
|
-
},
|
|
142
|
-
{
|
|
143
|
-
breakpoint: '600px',
|
|
144
|
-
numVisible: 4
|
|
145
|
-
},
|
|
146
|
-
{
|
|
147
|
-
breakpoint: '540px',
|
|
148
|
-
numVisible: 3
|
|
149
|
-
},
|
|
150
|
-
{
|
|
151
|
-
breakpoint: '400px',
|
|
152
|
-
numVisible: 2
|
|
153
|
-
},
|
|
154
|
-
{
|
|
155
|
-
breakpoint: '300px',
|
|
156
|
-
numVisible: 1
|
|
157
|
-
}
|
|
158
|
-
];
|
|
159
|
-
}
|
|
160
|
-
onKeydownHandler(event) {
|
|
161
|
-
this.onClosePreview();
|
|
162
|
-
}
|
|
163
|
-
onPreviewImage(index) {
|
|
164
|
-
document.body.style.overflowY = 'hidden';
|
|
165
|
-
this.showMask = true;
|
|
166
|
-
this.previewImage = true;
|
|
167
|
-
this.currentIndex = index;
|
|
168
|
-
this.currentImageGalleryModal = this.galleryData[index];
|
|
169
|
-
}
|
|
170
|
-
onAnimationEnd(event) {
|
|
171
|
-
if (event.toState === 'void') {
|
|
172
|
-
this.showMask = false;
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
onClosePreview() {
|
|
176
|
-
document.body.style.overflowY = 'visible';
|
|
177
|
-
this.previewImage = false;
|
|
178
|
-
}
|
|
179
|
-
onclickPrev() {
|
|
180
|
-
this.currentIndex++;
|
|
181
|
-
if (this.currentIndex > this.galleryData.length - 1) {
|
|
182
|
-
this.currentIndex = 0;
|
|
183
|
-
}
|
|
184
|
-
this.currentImageGalleryModal = this.galleryData[this.currentIndex];
|
|
185
|
-
}
|
|
186
|
-
onclickNext() {
|
|
187
|
-
this.currentIndex--;
|
|
188
|
-
if (this.currentIndex < 0) {
|
|
189
|
-
this.currentIndex = this.galleryData.length - 1;
|
|
190
|
-
}
|
|
191
|
-
this.currentImageGalleryModal = this.galleryData[this.currentIndex];
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
ImageGalleryModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageGalleryModal, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
195
|
-
ImageGalleryModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ImageGalleryModal, selector: "image-gallery-modal", inputs: { galleryData: "galleryData", showCount: "showCount" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"section\">\n\n <div class=\"gallery-image-gallery-modal-container\">\n <div class=\"gallery\">\n <div *ngFor=\"let image of galleryData; let i = index\" class=\"gallery-image\">\n <img (click)=\"onPreviewImage(i)\" [src]=\"image.imageSrc\" [alt]=\"image.imageAlt\">\n <div class=\"image-cta\" (click)=\"onPreviewImage(i)\">\n Click to preview <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\n </div>\n </div>\n </div>\n <div *ngIf=\"showMask\" [ngClass]=\"{'hide-overflow' : showMask}\" class=\"image-gallery-modal\" @animation2>\n <div *ngIf=\"showCount\" class=\"count\">\n {{currentIndex + 1}}/{{totalImageCount}}\n </div>\n <button (click)=\"onClosePreview()\" *ngIf=\"previewImage\" class=\"close-btn\">\n <fa-icon icon=\"times\"></fa-icon>\n </button>\n <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-prev\" (click)=\"onclickPrev()\">\n <fa-icon icon=\"arrow-circle-left\" class=\"icon-image-gallery-modal-carousel icon-prev\"></fa-icon>\n </button>\n <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-next\" (click)=\"onclickNext()\">\n <fa-icon icon=\"arrow-circle-right\" class=\"icon-image-gallery-modal-carousel icon-next\"></fa-icon>\n </button>\n <div *ngIf=\"previewImage\" [@animation]=\"{value : 'visible'}\" (@animation.done)=\"onAnimationEnd($event)\" class=\"image-gallery-modal-img\">\n <img [src]=\"currentImageGalleryModal.imageSrc\" [alt]=\"currentImageGalleryModal.imageAlt\">\n </div>\n </div>\n </div>\n <div>\n <p-galleria [value]=\"galleryData\" class=\"gallery-custom\" [responsiveOptions]=\"responsiveOptions\" [containerStyle]=\"{ 'max-width': '900px' }\">\n <ng-template pTemplate=\"item\" let-item>\n <div class=\"img\">\n <img class=\"big-img\" [src]=\"item.imageSrc\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"thumbnail\" let-item>\n <div class=\"grid grid-nogutter justify-content-center\">\n <img [src]=\"item.imageSrc\" class=\"small-img\" />\n </div>\n </ng-template>\n </p-galleria>\n </div>\n</div>", styles: ["
|
|
196
|
-
trigger('animation', [
|
|
197
|
-
transition('void => visible', [
|
|
198
|
-
style({ transform: 'scale(0.5)' }),
|
|
199
|
-
animate('150ms', style({ transform: 'scale(1)' }))
|
|
200
|
-
]),
|
|
201
|
-
transition('visible => void', [
|
|
202
|
-
style({ transform: 'scale(1)' }),
|
|
203
|
-
animate('150ms', style({ transform: 'scale(0.5)' }))
|
|
204
|
-
]),
|
|
205
|
-
]),
|
|
206
|
-
trigger('animation2', [
|
|
207
|
-
transition(':leave', [
|
|
208
|
-
style({ opacity: 1 }),
|
|
209
|
-
animate('50ms', style({ opacity: 0.8 }))
|
|
210
|
-
])
|
|
211
|
-
])
|
|
212
|
-
] });
|
|
213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageGalleryModal, decorators: [{
|
|
214
|
-
type: Component,
|
|
215
|
-
args: [{ selector: 'image-gallery-modal', animations: [
|
|
216
|
-
trigger('animation', [
|
|
217
|
-
transition('void => visible', [
|
|
218
|
-
style({ transform: 'scale(0.5)' }),
|
|
219
|
-
animate('150ms', style({ transform: 'scale(1)' }))
|
|
220
|
-
]),
|
|
221
|
-
transition('visible => void', [
|
|
222
|
-
style({ transform: 'scale(1)' }),
|
|
223
|
-
animate('150ms', style({ transform: 'scale(0.5)' }))
|
|
224
|
-
]),
|
|
225
|
-
]),
|
|
226
|
-
trigger('animation2', [
|
|
227
|
-
transition(':leave', [
|
|
228
|
-
style({ opacity: 1 }),
|
|
229
|
-
animate('50ms', style({ opacity: 0.8 }))
|
|
230
|
-
])
|
|
231
|
-
])
|
|
232
|
-
], template: "<div class=\"section\">\n\n <div class=\"gallery-image-gallery-modal-container\">\n <div class=\"gallery\">\n <div *ngFor=\"let image of galleryData; let i = index\" class=\"gallery-image\">\n <img (click)=\"onPreviewImage(i)\" [src]=\"image.imageSrc\" [alt]=\"image.imageAlt\">\n <div class=\"image-cta\" (click)=\"onPreviewImage(i)\">\n Click to preview <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\n </div>\n </div>\n </div>\n <div *ngIf=\"showMask\" [ngClass]=\"{'hide-overflow' : showMask}\" class=\"image-gallery-modal\" @animation2>\n <div *ngIf=\"showCount\" class=\"count\">\n {{currentIndex + 1}}/{{totalImageCount}}\n </div>\n <button (click)=\"onClosePreview()\" *ngIf=\"previewImage\" class=\"close-btn\">\n <fa-icon icon=\"times\"></fa-icon>\n </button>\n <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-prev\" (click)=\"onclickPrev()\">\n <fa-icon icon=\"arrow-circle-left\" class=\"icon-image-gallery-modal-carousel icon-prev\"></fa-icon>\n </button>\n <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-next\" (click)=\"onclickNext()\">\n <fa-icon icon=\"arrow-circle-right\" class=\"icon-image-gallery-modal-carousel icon-next\"></fa-icon>\n </button>\n <div *ngIf=\"previewImage\" [@animation]=\"{value : 'visible'}\" (@animation.done)=\"onAnimationEnd($event)\" class=\"image-gallery-modal-img\">\n <img [src]=\"currentImageGalleryModal.imageSrc\" [alt]=\"currentImageGalleryModal.imageAlt\">\n </div>\n </div>\n </div>\n <div>\n <p-galleria [value]=\"galleryData\" class=\"gallery-custom\" [responsiveOptions]=\"responsiveOptions\" [containerStyle]=\"{ 'max-width': '900px' }\">\n <ng-template pTemplate=\"item\" let-item>\n <div class=\"img\">\n <img class=\"big-img\" [src]=\"item.imageSrc\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"thumbnail\" let-item>\n <div class=\"grid grid-nogutter justify-content-center\">\n <img [src]=\"item.imageSrc\" class=\"small-img\" />\n </div>\n </ng-template>\n </p-galleria>\n </div>\n</div>", styles: ["
|
|
233
|
-
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { galleryData: [{
|
|
234
|
-
type: Input
|
|
235
|
-
}], showCount: [{
|
|
236
|
-
type: Input
|
|
237
|
-
}], onKeydownHandler: [{
|
|
238
|
-
type: HostListener,
|
|
239
|
-
args: ['document:keydown.escape', ['$event']]
|
|
115
|
+
class ImageGalleryModal {
|
|
116
|
+
constructor(breakpointObserver) {
|
|
117
|
+
this.breakpointObserver = breakpointObserver;
|
|
118
|
+
this.galleryData = [];
|
|
119
|
+
this.showCount = false;
|
|
120
|
+
this.previewImage = false;
|
|
121
|
+
this.showMask = false;
|
|
122
|
+
this.currentImageGalleryModal = this.galleryData[0];
|
|
123
|
+
this.currentIndex = 0;
|
|
124
|
+
this.controls = true;
|
|
125
|
+
this.totalImageCount = 0;
|
|
126
|
+
}
|
|
127
|
+
ngOnInit() {
|
|
128
|
+
this.breakpointObserver.observe("(max-width: 900px)").subscribe((result) => {
|
|
129
|
+
if (result.matches) {
|
|
130
|
+
this.onClosePreview();
|
|
131
|
+
}
|
|
132
|
+
});
|
|
133
|
+
this.totalImageCount = this.galleryData.length;
|
|
134
|
+
this.responsiveOptions = [
|
|
135
|
+
{
|
|
136
|
+
breakpoint: '900px',
|
|
137
|
+
numVisible: 5
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
breakpoint: '600px',
|
|
141
|
+
numVisible: 4
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
breakpoint: '540px',
|
|
145
|
+
numVisible: 3
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
breakpoint: '400px',
|
|
149
|
+
numVisible: 2
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
breakpoint: '300px',
|
|
153
|
+
numVisible: 1
|
|
154
|
+
}
|
|
155
|
+
];
|
|
156
|
+
}
|
|
157
|
+
onKeydownHandler(event) {
|
|
158
|
+
this.onClosePreview();
|
|
159
|
+
}
|
|
160
|
+
onPreviewImage(index) {
|
|
161
|
+
document.body.style.overflowY = 'hidden';
|
|
162
|
+
this.showMask = true;
|
|
163
|
+
this.previewImage = true;
|
|
164
|
+
this.currentIndex = index;
|
|
165
|
+
this.currentImageGalleryModal = this.galleryData[index];
|
|
166
|
+
}
|
|
167
|
+
onAnimationEnd(event) {
|
|
168
|
+
if (event.toState === 'void') {
|
|
169
|
+
this.showMask = false;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
onClosePreview() {
|
|
173
|
+
document.body.style.overflowY = 'visible';
|
|
174
|
+
this.previewImage = false;
|
|
175
|
+
}
|
|
176
|
+
onclickPrev() {
|
|
177
|
+
this.currentIndex++;
|
|
178
|
+
if (this.currentIndex > this.galleryData.length - 1) {
|
|
179
|
+
this.currentIndex = 0;
|
|
180
|
+
}
|
|
181
|
+
this.currentImageGalleryModal = this.galleryData[this.currentIndex];
|
|
182
|
+
}
|
|
183
|
+
onclickNext() {
|
|
184
|
+
this.currentIndex--;
|
|
185
|
+
if (this.currentIndex < 0) {
|
|
186
|
+
this.currentIndex = this.galleryData.length - 1;
|
|
187
|
+
}
|
|
188
|
+
this.currentImageGalleryModal = this.galleryData[this.currentIndex];
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
ImageGalleryModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageGalleryModal, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
192
|
+
ImageGalleryModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ImageGalleryModal, selector: "image-gallery-modal", inputs: { galleryData: "galleryData", showCount: "showCount" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"section\">\r\n\r\n <div class=\"gallery-image-gallery-modal-container\">\r\n <div class=\"gallery\">\r\n <div *ngFor=\"let image of galleryData; let i = index\" class=\"gallery-image\">\r\n <img (click)=\"onPreviewImage(i)\" [src]=\"image.imageSrc\" [alt]=\"image.imageAlt\">\r\n <div class=\"image-cta\" (click)=\"onPreviewImage(i)\">\r\n Click to preview <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"showMask\" [ngClass]=\"{'hide-overflow' : showMask}\" class=\"image-gallery-modal\" @animation2>\r\n <div *ngIf=\"showCount\" class=\"count\">\r\n {{currentIndex + 1}}/{{totalImageCount}}\r\n </div>\r\n <button (click)=\"onClosePreview()\" *ngIf=\"previewImage\" class=\"close-btn\">\r\n <fa-icon icon=\"times\"></fa-icon>\r\n </button>\r\n <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-prev\" (click)=\"onclickPrev()\">\r\n <fa-icon icon=\"arrow-circle-left\" class=\"icon-image-gallery-modal-carousel icon-prev\"></fa-icon>\r\n </button>\r\n <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-next\" (click)=\"onclickNext()\">\r\n <fa-icon icon=\"arrow-circle-right\" class=\"icon-image-gallery-modal-carousel icon-next\"></fa-icon>\r\n </button>\r\n <div *ngIf=\"previewImage\" [@animation]=\"{value : 'visible'}\" (@animation.done)=\"onAnimationEnd($event)\" class=\"image-gallery-modal-img\">\r\n <img [src]=\"currentImageGalleryModal.imageSrc\" [alt]=\"currentImageGalleryModal.imageAlt\">\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <p-galleria [value]=\"galleryData\" class=\"gallery-custom\" [responsiveOptions]=\"responsiveOptions\" [containerStyle]=\"{ 'max-width': '900px' }\">\r\n <ng-template pTemplate=\"item\" let-item>\r\n <div class=\"img\">\r\n <img class=\"big-img\" [src]=\"item.imageSrc\" />\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"thumbnail\" let-item>\r\n <div class=\"grid grid-nogutter justify-content-center\">\r\n <img [src]=\"item.imageSrc\" class=\"small-img\" />\r\n </div>\r\n </ng-template>\r\n </p-galleria>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:100%}.gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;margin:auto;width:90%}@media only screen and (min-width: 1500px){.gallery-image-gallery-modal-container{max-width:150rem}}.gallery-image-gallery-modal-container .gallery{line-height:0;column-count:4;column-gap:.8rem}.gallery-image-gallery-modal-container .gallery .gallery-image{overflow:hidden;transition:all .3s;position:relative;margin-bottom:1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover{box-shadow:#00000026 0 1.5rem 2.5rem,#0000000d 0 .5rem 1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover img{filter:brightness(.5)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta{opacity:1}.gallery-image-gallery-modal-container .gallery .gallery-image img{width:100%;height:auto;cursor:zoom-in;border-radius:.35rem}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta{opacity:0;position:absolute;width:100%;top:50%;text-align:center;color:#fff;font-size:2rem;cursor:zoom-in;transition:opacity .3s}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta fa-icon{font-size:2rem;margin-left:1rem;color:#fff}.gallery-image-gallery-modal-container .image-gallery-modal{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;background-color:#000000d9;z-index:101;height:100%;overflow-y:auto}.gallery-image-gallery-modal-container .count{position:absolute;top:0;left:0;width:7%;height:10%;color:#fff;opacity:.7;font-size:1.8rem;display:flex;justify-content:center;align-items:center;margin-left:.5rem}.gallery-image-gallery-modal-container .close-btn{position:absolute;top:0;right:0;padding:0;color:#fff;background:0 0;border:0;cursor:pointer;width:7%;height:10%;z-index:10}.gallery-image-gallery-modal-container .close-btn fa-icon{font-size:2.5rem}.gallery-image-gallery-modal-container .btn-image-gallery-modal-carousel{display:flex;justify-content:center;align-items:center;position:absolute;z-index:1;width:8%;height:8%;padding:0;color:#fff;text-align:center;background:0 0;border:0;cursor:pointer}.gallery-image-gallery-modal-container .btn-prev{left:0}.gallery-image-gallery-modal-container .btn-next{right:0}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel{color:#fff;opacity:.5;transition:all .15s ease}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel:hover{opacity:.9}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel:active{opacity:.5}.gallery-image-gallery-modal-container .icon-prev,.gallery-image-gallery-modal-container .icon-next{font-size:3rem}.gallery-image-gallery-modal-container .image-gallery-modal-img img{width:100%;max-height:90vh;border-radius:1rem}.gallery-image-gallery-modal-container .hide-overflow{overflow:hidden}@media only screen and (max-width: 75em){.gallery-image-gallery-modal-container .gallery-image-gallery-modal-container{display:none}.gallery-image-gallery-modal-container .gallery{column-count:3;width:100%}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-image-gallery-modal-container .gallery{column-count:2}.gallery-image-gallery-modal-container .gallery-img img{max-width:100%}}@media only screen and (max-width: 37.5em){.gallery-image-gallery-modal-container .gallery{column-count:1}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-custom{display:block;margin:auto;width:90%}.gallery-custom .img{width:90%}.gallery-custom .big-img{width:100%;height:50rem;object-fit:cover;border-radius:1.5rem;box-shadow:2rem 1rem 1.5rem -.5rem #e0e0e075;margin-bottom:2rem}.gallery-custom .small-img{object-fit:cover;border-radius:.7rem;box-shadow:1rem .4rem .5rem -.5rem #e0e0e075;width:100%;max-width:8rem;height:12rem}.gallery-image-gallery-modal-container{display:none}}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4$1.Galleria, selector: "p-galleria", inputs: ["activeIndex", "fullScreen", "id", "value", "numVisible", "responsiveOptions", "showItemNavigators", "showThumbnailNavigators", "showItemNavigatorsOnHover", "changeItemOnIndicatorHover", "circular", "autoPlay", "transitionInterval", "showThumbnails", "thumbnailsPosition", "verticalThumbnailViewPortHeight", "showIndicators", "showIndicatorsOnItem", "indicatorsPosition", "baseZIndex", "maskClass", "containerClass", "containerStyle", "showTransitionOptions", "hideTransitionOptions", "visible"], outputs: ["activeIndexChange", "visibleChange"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], animations: [
|
|
193
|
+
trigger('animation', [
|
|
194
|
+
transition('void => visible', [
|
|
195
|
+
style({ transform: 'scale(0.5)' }),
|
|
196
|
+
animate('150ms', style({ transform: 'scale(1)' }))
|
|
197
|
+
]),
|
|
198
|
+
transition('visible => void', [
|
|
199
|
+
style({ transform: 'scale(1)' }),
|
|
200
|
+
animate('150ms', style({ transform: 'scale(0.5)' }))
|
|
201
|
+
]),
|
|
202
|
+
]),
|
|
203
|
+
trigger('animation2', [
|
|
204
|
+
transition(':leave', [
|
|
205
|
+
style({ opacity: 1 }),
|
|
206
|
+
animate('50ms', style({ opacity: 0.8 }))
|
|
207
|
+
])
|
|
208
|
+
])
|
|
209
|
+
] });
|
|
210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ImageGalleryModal, decorators: [{
|
|
211
|
+
type: Component,
|
|
212
|
+
args: [{ selector: 'image-gallery-modal', animations: [
|
|
213
|
+
trigger('animation', [
|
|
214
|
+
transition('void => visible', [
|
|
215
|
+
style({ transform: 'scale(0.5)' }),
|
|
216
|
+
animate('150ms', style({ transform: 'scale(1)' }))
|
|
217
|
+
]),
|
|
218
|
+
transition('visible => void', [
|
|
219
|
+
style({ transform: 'scale(1)' }),
|
|
220
|
+
animate('150ms', style({ transform: 'scale(0.5)' }))
|
|
221
|
+
]),
|
|
222
|
+
]),
|
|
223
|
+
trigger('animation2', [
|
|
224
|
+
transition(':leave', [
|
|
225
|
+
style({ opacity: 1 }),
|
|
226
|
+
animate('50ms', style({ opacity: 0.8 }))
|
|
227
|
+
])
|
|
228
|
+
])
|
|
229
|
+
], template: "<div class=\"section\">\r\n\r\n <div class=\"gallery-image-gallery-modal-container\">\r\n <div class=\"gallery\">\r\n <div *ngFor=\"let image of galleryData; let i = index\" class=\"gallery-image\">\r\n <img (click)=\"onPreviewImage(i)\" [src]=\"image.imageSrc\" [alt]=\"image.imageAlt\">\r\n <div class=\"image-cta\" (click)=\"onPreviewImage(i)\">\r\n Click to preview <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"showMask\" [ngClass]=\"{'hide-overflow' : showMask}\" class=\"image-gallery-modal\" @animation2>\r\n <div *ngIf=\"showCount\" class=\"count\">\r\n {{currentIndex + 1}}/{{totalImageCount}}\r\n </div>\r\n <button (click)=\"onClosePreview()\" *ngIf=\"previewImage\" class=\"close-btn\">\r\n <fa-icon icon=\"times\"></fa-icon>\r\n </button>\r\n <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-prev\" (click)=\"onclickPrev()\">\r\n <fa-icon icon=\"arrow-circle-left\" class=\"icon-image-gallery-modal-carousel icon-prev\"></fa-icon>\r\n </button>\r\n <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-next\" (click)=\"onclickNext()\">\r\n <fa-icon icon=\"arrow-circle-right\" class=\"icon-image-gallery-modal-carousel icon-next\"></fa-icon>\r\n </button>\r\n <div *ngIf=\"previewImage\" [@animation]=\"{value : 'visible'}\" (@animation.done)=\"onAnimationEnd($event)\" class=\"image-gallery-modal-img\">\r\n <img [src]=\"currentImageGalleryModal.imageSrc\" [alt]=\"currentImageGalleryModal.imageAlt\">\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <p-galleria [value]=\"galleryData\" class=\"gallery-custom\" [responsiveOptions]=\"responsiveOptions\" [containerStyle]=\"{ 'max-width': '900px' }\">\r\n <ng-template pTemplate=\"item\" let-item>\r\n <div class=\"img\">\r\n <img class=\"big-img\" [src]=\"item.imageSrc\" />\r\n </div>\r\n </ng-template>\r\n <ng-template pTemplate=\"thumbnail\" let-item>\r\n <div class=\"grid grid-nogutter justify-content-center\">\r\n <img [src]=\"item.imageSrc\" class=\"small-img\" />\r\n </div>\r\n </ng-template>\r\n </p-galleria>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:100%}.gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;margin:auto;width:90%}@media only screen and (min-width: 1500px){.gallery-image-gallery-modal-container{max-width:150rem}}.gallery-image-gallery-modal-container .gallery{line-height:0;column-count:4;column-gap:.8rem}.gallery-image-gallery-modal-container .gallery .gallery-image{overflow:hidden;transition:all .3s;position:relative;margin-bottom:1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover{box-shadow:#00000026 0 1.5rem 2.5rem,#0000000d 0 .5rem 1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover img{filter:brightness(.5)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta{opacity:1}.gallery-image-gallery-modal-container .gallery .gallery-image img{width:100%;height:auto;cursor:zoom-in;border-radius:.35rem}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta{opacity:0;position:absolute;width:100%;top:50%;text-align:center;color:#fff;font-size:2rem;cursor:zoom-in;transition:opacity .3s}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta fa-icon{font-size:2rem;margin-left:1rem;color:#fff}.gallery-image-gallery-modal-container .image-gallery-modal{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;background-color:#000000d9;z-index:101;height:100%;overflow-y:auto}.gallery-image-gallery-modal-container .count{position:absolute;top:0;left:0;width:7%;height:10%;color:#fff;opacity:.7;font-size:1.8rem;display:flex;justify-content:center;align-items:center;margin-left:.5rem}.gallery-image-gallery-modal-container .close-btn{position:absolute;top:0;right:0;padding:0;color:#fff;background:0 0;border:0;cursor:pointer;width:7%;height:10%;z-index:10}.gallery-image-gallery-modal-container .close-btn fa-icon{font-size:2.5rem}.gallery-image-gallery-modal-container .btn-image-gallery-modal-carousel{display:flex;justify-content:center;align-items:center;position:absolute;z-index:1;width:8%;height:8%;padding:0;color:#fff;text-align:center;background:0 0;border:0;cursor:pointer}.gallery-image-gallery-modal-container .btn-prev{left:0}.gallery-image-gallery-modal-container .btn-next{right:0}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel{color:#fff;opacity:.5;transition:all .15s ease}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel:hover{opacity:.9}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel:active{opacity:.5}.gallery-image-gallery-modal-container .icon-prev,.gallery-image-gallery-modal-container .icon-next{font-size:3rem}.gallery-image-gallery-modal-container .image-gallery-modal-img img{width:100%;max-height:90vh;border-radius:1rem}.gallery-image-gallery-modal-container .hide-overflow{overflow:hidden}@media only screen and (max-width: 75em){.gallery-image-gallery-modal-container .gallery-image-gallery-modal-container{display:none}.gallery-image-gallery-modal-container .gallery{column-count:3;width:100%}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-image-gallery-modal-container .gallery{column-count:2}.gallery-image-gallery-modal-container .gallery-img img{max-width:100%}}@media only screen and (max-width: 37.5em){.gallery-image-gallery-modal-container .gallery{column-count:1}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-custom{display:block;margin:auto;width:90%}.gallery-custom .img{width:90%}.gallery-custom .big-img{width:100%;height:50rem;object-fit:cover;border-radius:1.5rem;box-shadow:2rem 1rem 1.5rem -.5rem #e0e0e075;margin-bottom:2rem}.gallery-custom .small-img{object-fit:cover;border-radius:.7rem;box-shadow:1rem .4rem .5rem -.5rem #e0e0e075;width:100%;max-width:8rem;height:12rem}.gallery-image-gallery-modal-container{display:none}}\n"] }]
|
|
230
|
+
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { galleryData: [{
|
|
231
|
+
type: Input
|
|
232
|
+
}], showCount: [{
|
|
233
|
+
type: Input
|
|
234
|
+
}], onKeydownHandler: [{
|
|
235
|
+
type: HostListener,
|
|
236
|
+
args: ['document:keydown.escape', ['$event']]
|
|
240
237
|
}] } });
|
|
241
238
|
|
|
242
|
-
class SuccessMessageDialogComponent {
|
|
243
|
-
constructor(dialogRef, _Router) {
|
|
244
|
-
this.dialogRef = dialogRef;
|
|
245
|
-
this._Router = _Router;
|
|
246
|
-
}
|
|
247
|
-
onClickSubmitAnotherForm() {
|
|
248
|
-
this.dialogRef.close();
|
|
249
|
-
this._Router.navigate(['/contact-us/contact-us-page']);
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
SuccessMessageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuccessMessageDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
253
|
-
SuccessMessageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuccessMessageDialogComponent, selector: "success-message-dialog", ngImport: i0, template: "<div class=\"page\">\n <span mat-dialog-title class=\"dialog-header\" mat-button>\n <fa-icon icon=\"xmark\" mat-dialog-close></fa-icon>\n </span>\n\n <mat-dialog-content class=\"mat-typography\">\n <div class=\"success-icon\">\n <fa-icon icon=\"calendar-check\"></fa-icon>\n </div>\n <h2 class=\"title\">Thanks! your request has been submitted</h2>\n <h3 class=\"subtitle\">We have received your message, we'll reach out to you as soon as possible!</h3>\n </mat-dialog-content>\n <div class=\"divider\"></div>\n <mat-dialog-actions class=\"dialog-footer\">\n <h3>Still have any questions? <span class=\"link-text\" (click)=\"onClickSubmitAnotherForm()\">Submit\n another form</span>\n </h3>\n </mat-dialog-actions>\n</div>", styles: ["
|
|
254
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuccessMessageDialogComponent, decorators: [{
|
|
255
|
-
type: Component,
|
|
256
|
-
args: [{ selector: 'success-message-dialog', template: "<div class=\"page\">\n <span mat-dialog-title class=\"dialog-header\" mat-button>\n <fa-icon icon=\"xmark\" mat-dialog-close></fa-icon>\n </span>\n\n <mat-dialog-content class=\"mat-typography\">\n <div class=\"success-icon\">\n <fa-icon icon=\"calendar-check\"></fa-icon>\n </div>\n <h2 class=\"title\">Thanks! your request has been submitted</h2>\n <h3 class=\"subtitle\">We have received your message, we'll reach out to you as soon as possible!</h3>\n </mat-dialog-content>\n <div class=\"divider\"></div>\n <mat-dialog-actions class=\"dialog-footer\">\n <h3>Still have any questions? <span class=\"link-text\" (click)=\"onClickSubmitAnotherForm()\">Submit\n another form</span>\n </h3>\n </mat-dialog-actions>\n</div>", styles: ["
|
|
239
|
+
class SuccessMessageDialogComponent {
|
|
240
|
+
constructor(dialogRef, _Router) {
|
|
241
|
+
this.dialogRef = dialogRef;
|
|
242
|
+
this._Router = _Router;
|
|
243
|
+
}
|
|
244
|
+
onClickSubmitAnotherForm() {
|
|
245
|
+
this.dialogRef.close();
|
|
246
|
+
this._Router.navigate(['/contact-us/contact-us-page']);
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
SuccessMessageDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuccessMessageDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
250
|
+
SuccessMessageDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SuccessMessageDialogComponent, selector: "success-message-dialog", ngImport: i0, template: "<div class=\"page\">\r\n <span mat-dialog-title class=\"dialog-header\" mat-button>\r\n <fa-icon icon=\"xmark\" mat-dialog-close></fa-icon>\r\n </span>\r\n\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"success-icon\">\r\n <fa-icon icon=\"calendar-check\"></fa-icon>\r\n </div>\r\n <h2 class=\"title\">Thanks! your request has been submitted</h2>\r\n <h3 class=\"subtitle\">We have received your message, we'll reach out to you as soon as possible!</h3>\r\n </mat-dialog-content>\r\n <div class=\"divider\"></div>\r\n <mat-dialog-actions class=\"dialog-footer\">\r\n <h3>Still have any questions? <span class=\"link-text\" (click)=\"onClickSubmitAnotherForm()\">Submit\r\n another form</span>\r\n </h3>\r\n </mat-dialog-actions>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{text-align:center}.page .mat-typography{padding:0 6rem 2rem;display:grid}.page .dialog-header{text-align:right;font-size:3rem;color:#686868;font-weight:900;padding:0 2rem}.page .success-icon{font-size:7rem;color:#12957e;margin-bottom:2rem}.page .title{color:#36393f;font-size:2.8rem;font-weight:700}.page .subtitle{justify-self:center;width:85%;font-size:2.2rem;font-weight:500;color:#494949}.page .divider{width:95%;border:.1rem solid #D8D8D8;margin:auto}.page .dialog-footer{padding:3rem 0rem;display:grid;justify-content:center}.page .dialog-footer h3{color:#494949;align-self:center;font-size:2.2rem}.page .link-text{color:#155ed4;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
|
|
251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuccessMessageDialogComponent, decorators: [{
|
|
252
|
+
type: Component,
|
|
253
|
+
args: [{ selector: 'success-message-dialog', template: "<div class=\"page\">\r\n <span mat-dialog-title class=\"dialog-header\" mat-button>\r\n <fa-icon icon=\"xmark\" mat-dialog-close></fa-icon>\r\n </span>\r\n\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"success-icon\">\r\n <fa-icon icon=\"calendar-check\"></fa-icon>\r\n </div>\r\n <h2 class=\"title\">Thanks! your request has been submitted</h2>\r\n <h3 class=\"subtitle\">We have received your message, we'll reach out to you as soon as possible!</h3>\r\n </mat-dialog-content>\r\n <div class=\"divider\"></div>\r\n <mat-dialog-actions class=\"dialog-footer\">\r\n <h3>Still have any questions? <span class=\"link-text\" (click)=\"onClickSubmitAnotherForm()\">Submit\r\n another form</span>\r\n </h3>\r\n </mat-dialog-actions>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{text-align:center}.page .mat-typography{padding:0 6rem 2rem;display:grid}.page .dialog-header{text-align:right;font-size:3rem;color:#686868;font-weight:900;padding:0 2rem}.page .success-icon{font-size:7rem;color:#12957e;margin-bottom:2rem}.page .title{color:#36393f;font-size:2.8rem;font-weight:700}.page .subtitle{justify-self:center;width:85%;font-size:2.2rem;font-weight:500;color:#494949}.page .divider{width:95%;border:.1rem solid #D8D8D8;margin:auto}.page .dialog-footer{padding:3rem 0rem;display:grid;justify-content:center}.page .dialog-footer h3{color:#494949;align-self:center;font-size:2.2rem}.page .link-text{color:#155ed4;cursor:pointer}\n"] }]
|
|
257
254
|
}], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: i1.Router }]; } });
|
|
258
255
|
|
|
259
|
-
var PageSectionStyleThirteen;
|
|
260
|
-
(function (PageSectionStyleThirteen) {
|
|
261
|
-
PageSectionStyleThirteen[PageSectionStyleThirteen["SHAPE_ICON"] = 0] = "SHAPE_ICON";
|
|
262
|
-
PageSectionStyleThirteen[PageSectionStyleThirteen["IMAGE_ICON"] = 1] = "IMAGE_ICON";
|
|
256
|
+
var PageSectionStyleThirteen;
|
|
257
|
+
(function (PageSectionStyleThirteen) {
|
|
258
|
+
PageSectionStyleThirteen[PageSectionStyleThirteen["SHAPE_ICON"] = 0] = "SHAPE_ICON";
|
|
259
|
+
PageSectionStyleThirteen[PageSectionStyleThirteen["IMAGE_ICON"] = 1] = "IMAGE_ICON";
|
|
263
260
|
})(PageSectionStyleThirteen || (PageSectionStyleThirteen = {}));
|
|
264
261
|
|
|
265
|
-
class PageSectionStyleThirteenComponent {
|
|
266
|
-
constructor() {
|
|
267
|
-
this.counter = 0;
|
|
268
|
-
this.isItemHovered = [];
|
|
269
|
-
this.pageSectionStyleThirteen = PageSectionStyleThirteen;
|
|
270
|
-
this.iconType = this.pageSectionStyleThirteen.SHAPE_ICON;
|
|
271
|
-
this.isTwoImages = false;
|
|
272
|
-
}
|
|
273
|
-
ngOnInit() {
|
|
274
|
-
this.onHoveredItem(this.items[0].image, 0);
|
|
275
|
-
}
|
|
276
|
-
onClickChangeImage(image, index) {
|
|
277
|
-
this.onHoveredItem(image, index);
|
|
278
|
-
}
|
|
279
|
-
onHoveredItem(itemImage, index) {
|
|
280
|
-
this.counter = index;
|
|
281
|
-
for (let i = 0; i < this.items.length; i++) {
|
|
282
|
-
this.isItemHovered[i] = false;
|
|
283
|
-
}
|
|
284
|
-
this.isItemHovered[index] = true;
|
|
285
|
-
this.showedImage = itemImage;
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
PageSectionStyleThirteenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
289
|
-
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionTitle: "sectionTitle", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [sectionTitle]=\"sectionTitle\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.iconImage\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\n </div>\n </div>\n</div>", styles: ["
|
|
290
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, decorators: [{
|
|
291
|
-
type: Component,
|
|
292
|
-
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [sectionTitle]=\"sectionTitle\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.iconImage\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\n </div>\n </div>\n</div>", styles: ["
|
|
293
|
-
}], ctorParameters: function () { return []; }, propDecorators: { sectionTitle: [{
|
|
294
|
-
type: Input
|
|
295
|
-
}], items: [{
|
|
296
|
-
type: Input
|
|
297
|
-
}], iconType: [{
|
|
298
|
-
type: Input
|
|
299
|
-
}], isTwoImages: [{
|
|
300
|
-
type: Input
|
|
262
|
+
class PageSectionStyleThirteenComponent {
|
|
263
|
+
constructor() {
|
|
264
|
+
this.counter = 0;
|
|
265
|
+
this.isItemHovered = [];
|
|
266
|
+
this.pageSectionStyleThirteen = PageSectionStyleThirteen;
|
|
267
|
+
this.iconType = this.pageSectionStyleThirteen.SHAPE_ICON;
|
|
268
|
+
this.isTwoImages = false;
|
|
269
|
+
}
|
|
270
|
+
ngOnInit() {
|
|
271
|
+
this.onHoveredItem(this.items[0].image, 0);
|
|
272
|
+
}
|
|
273
|
+
onClickChangeImage(image, index) {
|
|
274
|
+
this.onHoveredItem(image, index);
|
|
275
|
+
}
|
|
276
|
+
onHoveredItem(itemImage, index) {
|
|
277
|
+
this.counter = index;
|
|
278
|
+
for (let i = 0; i < this.items.length; i++) {
|
|
279
|
+
this.isItemHovered[i] = false;
|
|
280
|
+
}
|
|
281
|
+
this.isItemHovered[index] = true;
|
|
282
|
+
this.showedImage = itemImage;
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
PageSectionStyleThirteenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
286
|
+
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionTitle: "sectionTitle", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\r\n <div class=\"left-side\">\r\n <div class=\"headline\">\r\n <section-title [sectionTitle]=\"sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"items\">\r\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\r\n <div class=\"left-column\">\r\n\r\n <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\r\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\r\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\r\n <img [src]=\"item.iconImage\" alt=\"\">\r\n </div>\r\n </div>\r\n <div></div>\r\n </div>\r\n <div class=\"right-column\">\r\n <div class=\"item-title\">{{item.title}}</div>\r\n <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\r\n {{item.description}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\r\n <div class=\"image-container\">\r\n <img [src]=\"showedImage\" alt=\"\">\r\n </div>\r\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\r\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.why-choose-us{display:flex;flex-direction:row;column-gap:4%;margin:auto;width:90%}@media only screen and (min-width: 1500px){.why-choose-us{width:150rem}}.why-choose-us .left-side,.why-choose-us .right-side{width:48%}.why-choose-us .items{display:grid;gap:2.5rem;width:100%}.why-choose-us .hovered-item{background-color:#155ed4;box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#f1f1f1}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}@media only screen and (max-width: 37.5em){.why-choose-us .item{max-width:90vw}}.why-choose-us .item:hover{box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:2.2rem}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;row-gap:2%}.why-choose-us .left-side,.why-choose-us .right-side{width:100%}.why-choose-us .left-side{margin-bottom:3rem}.why-choose-us .left-side .hide-description{max-height:0;opacity:0;overflow:hidden}.why-choose-us .left-side .show-description{max-height:20rem;transition:all .5s;opacity:1;overflow:hidden}.why-choose-us .right-side{width:100%;justify-content:center}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem;height:35rem}.why-choose-us .right-side .image-container img{width:100%}.why-choose-us .right-side .back-image{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, decorators: [{
|
|
288
|
+
type: Component,
|
|
289
|
+
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\r\n <div class=\"left-side\">\r\n <div class=\"headline\">\r\n <section-title [sectionTitle]=\"sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"items\">\r\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\r\n <div class=\"left-column\">\r\n\r\n <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\r\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\r\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\r\n <img [src]=\"item.iconImage\" alt=\"\">\r\n </div>\r\n </div>\r\n <div></div>\r\n </div>\r\n <div class=\"right-column\">\r\n <div class=\"item-title\">{{item.title}}</div>\r\n <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\r\n {{item.description}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\r\n <div class=\"image-container\">\r\n <img [src]=\"showedImage\" alt=\"\">\r\n </div>\r\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\r\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.why-choose-us{display:flex;flex-direction:row;column-gap:4%;margin:auto;width:90%}@media only screen and (min-width: 1500px){.why-choose-us{width:150rem}}.why-choose-us .left-side,.why-choose-us .right-side{width:48%}.why-choose-us .items{display:grid;gap:2.5rem;width:100%}.why-choose-us .hovered-item{background-color:#155ed4;box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#f1f1f1}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}@media only screen and (max-width: 37.5em){.why-choose-us .item{max-width:90vw}}.why-choose-us .item:hover{box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:2.2rem}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;row-gap:2%}.why-choose-us .left-side,.why-choose-us .right-side{width:100%}.why-choose-us .left-side{margin-bottom:3rem}.why-choose-us .left-side .hide-description{max-height:0;opacity:0;overflow:hidden}.why-choose-us .left-side .show-description{max-height:20rem;transition:all .5s;opacity:1;overflow:hidden}.why-choose-us .right-side{width:100%;justify-content:center}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem;height:35rem}.why-choose-us .right-side .image-container img{width:100%}.why-choose-us .right-side .back-image{display:none}}\n"] }]
|
|
290
|
+
}], ctorParameters: function () { return []; }, propDecorators: { sectionTitle: [{
|
|
291
|
+
type: Input
|
|
292
|
+
}], items: [{
|
|
293
|
+
type: Input
|
|
294
|
+
}], iconType: [{
|
|
295
|
+
type: Input
|
|
296
|
+
}], isTwoImages: [{
|
|
297
|
+
type: Input
|
|
301
298
|
}] } });
|
|
302
299
|
|
|
303
|
-
class CallToActionSectionComponent {
|
|
304
|
-
constructor(_Router) {
|
|
305
|
-
this._Router = _Router;
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
}
|
|
314
|
-
CallToActionSectionComponent.ɵ
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
type:
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
type: Input
|
|
321
|
-
}], titleOnRightSide: [{
|
|
322
|
-
type: Input
|
|
323
|
-
}], imageBg: [{
|
|
324
|
-
type: Input
|
|
325
|
-
}], isBoxWithCard: [{
|
|
326
|
-
type: Input
|
|
300
|
+
class CallToActionSectionComponent {
|
|
301
|
+
constructor(_Router) {
|
|
302
|
+
this._Router = _Router;
|
|
303
|
+
}
|
|
304
|
+
ngOnInit() {
|
|
305
|
+
}
|
|
306
|
+
onClickGetStarted(route) {
|
|
307
|
+
this._Router.navigate([route]);
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
CallToActionSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
311
|
+
CallToActionSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CallToActionSectionComponent, selector: "call-to-action-section", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"page\">\r\n <div class=\"cta-box\">\r\n <div class=\"left-side\">\r\n <div class=\"title\">\r\n {{data.title}}\r\n </div>\r\n <div class=\"subtitle\" *ngIf=\"data.subtitle\">\r\n {{data.subtitle}}\r\n </div>\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"box\">\r\n <!-- <img src=\"https://i.ibb.co/PQbR3nL/box-left-side-design.png\" class=\"left-bg\" alt=\"\"> -->\r\n <!-- <img src=\"https://i.ibb.co/PxyyVHS/top-right-corner-design.png\" class=\"right-bg\" alt=\"\"> -->\r\n <div class=\"description\">\r\n {{data.description}}\r\n </div>\r\n <div class=\"button\">\r\n <button type=\"button\" mat-raised-button\r\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cta-box-small\">\r\n <div class=\"title\">\r\n {{data.title}}\r\n </div>\r\n <div class=\"subtitle\">\r\n {{data.subtitle}}\r\n </div>\r\n <div class=\"description\">\r\n {{data.description}}\r\n </div>\r\n <div class=\"button\">\r\n <button type=\"button\" mat-raised-button\r\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;margin:7rem auto;width:90%}@media only screen and (min-width: 1500px){.page{width:150rem}}.page .cta-box{justify-self:center;width:100%;display:grid;grid-template-columns:calc(60% - 2.5rem) calc(40% - 2.5rem);column-gap:5rem;align-items:center;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;background:linear-gradient(90deg,#155ED4 3.16%,#0F2844 97.43%)}.page .cta-box .left-bg{width:2rem;position:absolute;top:10%;left:0}.page .cta-box .right-bg{width:15rem;top:0;right:0;position:absolute}.page .cta-box .left-side{height:30rem;padding-left:5rem;display:grid;color:#fff}.page .cta-box .left-side .title{font-weight:700;font-size:4rem;align-self:center}.page .cta-box .left-side .subtitle{font-size:1.4rem}.page .cta-box .right-side{display:grid;padding:1rem;height:100%;align-items:center}.page .cta-box .right-side .box{justify-self:center;align-self:center;width:80%;padding:1.5rem;border-radius:1rem;border:.1rem solid #ffffff;color:#fff}@media screen and (max-width: 1000px){.page .cta-box .right-side .box{width:90%}}.page .cta-box .right-side .box .description{font-weight:400;font-size:1.6rem;margin-bottom:1rem}.page .cta-box .right-side .box .button{margin-top:2rem}.page .cta-box .right-side .box .button button{padding:1rem;font-size:1.2rem;font-weight:400;color:#fff;background-color:transparent;border:#fff .1rem solid}.page .cta-box-small{display:none}@media only screen and (max-width: 56.25em){.page .cta-box{display:none}.page .cta-box-small{justify-self:center;width:90%;display:grid;align-items:center;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem;background:linear-gradient(90deg,#155ED4 3.16%,#0F2844 97.43%);color:#fff}.page .cta-box-small .title{font-size:2rem;font-weight:700;padding:1rem 0rem}.page .cta-box-small .subtitle{padding:2rem 0rem;font-size:1.6rem}.page .cta-box-small .description{padding:2rem 0rem;font-size:1.4rem}.page .cta-box-small .button{color:#fff;font-weight:500;background-color:transparent}.page .cta-box-small .button button{padding:1rem}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
|
|
312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionComponent, decorators: [{
|
|
313
|
+
type: Component,
|
|
314
|
+
args: [{ selector: 'call-to-action-section', template: "<div class=\"page\">\r\n <div class=\"cta-box\">\r\n <div class=\"left-side\">\r\n <div class=\"title\">\r\n {{data.title}}\r\n </div>\r\n <div class=\"subtitle\" *ngIf=\"data.subtitle\">\r\n {{data.subtitle}}\r\n </div>\r\n </div>\r\n <div class=\"right-side\">\r\n <div class=\"box\">\r\n <!-- <img src=\"https://i.ibb.co/PQbR3nL/box-left-side-design.png\" class=\"left-bg\" alt=\"\"> -->\r\n <!-- <img src=\"https://i.ibb.co/PxyyVHS/top-right-corner-design.png\" class=\"right-bg\" alt=\"\"> -->\r\n <div class=\"description\">\r\n {{data.description}}\r\n </div>\r\n <div class=\"button\">\r\n <button type=\"button\" mat-raised-button\r\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"cta-box-small\">\r\n <div class=\"title\">\r\n {{data.title}}\r\n </div>\r\n <div class=\"subtitle\">\r\n {{data.subtitle}}\r\n </div>\r\n <div class=\"description\">\r\n {{data.description}}\r\n </div>\r\n <div class=\"button\">\r\n <button type=\"button\" mat-raised-button\r\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;margin:7rem auto;width:90%}@media only screen and (min-width: 1500px){.page{width:150rem}}.page .cta-box{justify-self:center;width:100%;display:grid;grid-template-columns:calc(60% - 2.5rem) calc(40% - 2.5rem);column-gap:5rem;align-items:center;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;background:linear-gradient(90deg,#155ED4 3.16%,#0F2844 97.43%)}.page .cta-box .left-bg{width:2rem;position:absolute;top:10%;left:0}.page .cta-box .right-bg{width:15rem;top:0;right:0;position:absolute}.page .cta-box .left-side{height:30rem;padding-left:5rem;display:grid;color:#fff}.page .cta-box .left-side .title{font-weight:700;font-size:4rem;align-self:center}.page .cta-box .left-side .subtitle{font-size:1.4rem}.page .cta-box .right-side{display:grid;padding:1rem;height:100%;align-items:center}.page .cta-box .right-side .box{justify-self:center;align-self:center;width:80%;padding:1.5rem;border-radius:1rem;border:.1rem solid #ffffff;color:#fff}@media screen and (max-width: 1000px){.page .cta-box .right-side .box{width:90%}}.page .cta-box .right-side .box .description{font-weight:400;font-size:1.6rem;margin-bottom:1rem}.page .cta-box .right-side .box .button{margin-top:2rem}.page .cta-box .right-side .box .button button{padding:1rem;font-size:1.2rem;font-weight:400;color:#fff;background-color:transparent;border:#fff .1rem solid}.page .cta-box-small{display:none}@media only screen and (max-width: 56.25em){.page .cta-box{display:none}.page .cta-box-small{justify-self:center;width:90%;display:grid;align-items:center;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem;background:linear-gradient(90deg,#155ED4 3.16%,#0F2844 97.43%);color:#fff}.page .cta-box-small .title{font-size:2rem;font-weight:700;padding:1rem 0rem}.page .cta-box-small .subtitle{padding:2rem 0rem;font-size:1.6rem}.page .cta-box-small .description{padding:2rem 0rem;font-size:1.4rem}.page .cta-box-small .button{color:#fff;font-weight:500;background-color:transparent}.page .cta-box-small .button button{padding:1rem}}\n"] }]
|
|
315
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { data: [{
|
|
316
|
+
type: Input
|
|
327
317
|
}] } });
|
|
328
318
|
|
|
329
|
-
;
|
|
330
|
-
class TeamComponent {
|
|
331
|
-
constructor(_router, breakpointObserver) {
|
|
332
|
-
this._router = _router;
|
|
333
|
-
this.breakpointObserver = breakpointObserver;
|
|
334
|
-
this.scrollMemberNumber = 2;
|
|
335
|
-
}
|
|
336
|
-
ngOnInit() {
|
|
337
|
-
this.breakpointObserver.observe([
|
|
338
|
-
"(max-width: 1200px) and (min-width:851px)", "(max-width: 850px) and (min-width:601px)",
|
|
339
|
-
"(max-width: 600px)"
|
|
340
|
-
]).subscribe((result) => {
|
|
341
|
-
if (result.breakpoints['(max-width: 1200px) and (min-width:851px)']) {
|
|
342
|
-
this.isTabletSize = true;
|
|
343
|
-
this.membersToShow = 3;
|
|
344
|
-
}
|
|
345
|
-
else if (result.breakpoints['(max-width: 850px) and (min-width:601px)']) {
|
|
346
|
-
this.membersToShow = 2;
|
|
347
|
-
this.scrollMemberNumber = 2;
|
|
348
|
-
this.isTabletSize = true;
|
|
349
|
-
}
|
|
350
|
-
else if (result.breakpoints['(max-width: 600px)']) {
|
|
351
|
-
this.membersToShow = 1;
|
|
352
|
-
this.scrollMemberNumber = 1;
|
|
353
|
-
this.isTabletSize = true;
|
|
354
|
-
}
|
|
355
|
-
else {
|
|
356
|
-
this.isTabletSize = false;
|
|
357
|
-
}
|
|
358
|
-
});
|
|
359
|
-
}
|
|
360
|
-
onAddNewMember() {
|
|
361
|
-
this._router.navigate(['/team/new-member']);
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
|
-
TeamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TeamComponent, deps: [{ token: i1.Router }, { token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
365
|
-
TeamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TeamComponent, selector: "team", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\n <div class=\"cards\" *ngIf=\"!isTabletSize\">\n <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\n <div class=\"image-container\">\n <img [src]=\"teamMember.profilePicture\">\n </div>\n <div class=\"member-information\">\n <div class=\"name\">\n {{teamMember.fullName}}\n </div>\n <div class=\"position\">\n {{teamMember.position}}\n </div>\n </div>\n </div>\n </div>\n <div class=\"cards\" *ngIf=\"isTabletSize\">\n <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\n [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\n <ng-template let-member pTemplate=\"item\">\n <div class=\"member-card\">\n <div class=\"image-container\">\n <img [src]=\"member.profilePicture\">\n </div>\n <div class=\"member-information\">\n <div class=\"name\">\n {{member.fullName}}\n </div>\n <div class=\"position\">\n {{member.position}}\n </div>\n </div>\n </div>\n </ng-template>\n </p-carousel>\n </div>\n <div class=\"caption-text\">\n {{sectionContent.caption}}\n </div>\n</div>", styles: ["
|
|
366
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TeamComponent, decorators: [{
|
|
367
|
-
type: Component,
|
|
368
|
-
args: [{ selector: 'team', template: "<div class=\"page\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\n <div class=\"cards\" *ngIf=\"!isTabletSize\">\n <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\n <div class=\"image-container\">\n <img [src]=\"teamMember.profilePicture\">\n </div>\n <div class=\"member-information\">\n <div class=\"name\">\n {{teamMember.fullName}}\n </div>\n <div class=\"position\">\n {{teamMember.position}}\n </div>\n </div>\n </div>\n </div>\n <div class=\"cards\" *ngIf=\"isTabletSize\">\n <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\n [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\n <ng-template let-member pTemplate=\"item\">\n <div class=\"member-card\">\n <div class=\"image-container\">\n <img [src]=\"member.profilePicture\">\n </div>\n <div class=\"member-information\">\n <div class=\"name\">\n {{member.fullName}}\n </div>\n <div class=\"position\">\n {{member.position}}\n </div>\n </div>\n </div>\n </ng-template>\n </p-carousel>\n </div>\n <div class=\"caption-text\">\n {{sectionContent.caption}}\n </div>\n</div>", styles: ["
|
|
369
|
-
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
|
|
370
|
-
type: Input
|
|
319
|
+
;
|
|
320
|
+
class TeamComponent {
|
|
321
|
+
constructor(_router, breakpointObserver) {
|
|
322
|
+
this._router = _router;
|
|
323
|
+
this.breakpointObserver = breakpointObserver;
|
|
324
|
+
this.scrollMemberNumber = 2;
|
|
325
|
+
}
|
|
326
|
+
ngOnInit() {
|
|
327
|
+
this.breakpointObserver.observe([
|
|
328
|
+
"(max-width: 1200px) and (min-width:851px)", "(max-width: 850px) and (min-width:601px)",
|
|
329
|
+
"(max-width: 600px)"
|
|
330
|
+
]).subscribe((result) => {
|
|
331
|
+
if (result.breakpoints['(max-width: 1200px) and (min-width:851px)']) {
|
|
332
|
+
this.isTabletSize = true;
|
|
333
|
+
this.membersToShow = 3;
|
|
334
|
+
}
|
|
335
|
+
else if (result.breakpoints['(max-width: 850px) and (min-width:601px)']) {
|
|
336
|
+
this.membersToShow = 2;
|
|
337
|
+
this.scrollMemberNumber = 2;
|
|
338
|
+
this.isTabletSize = true;
|
|
339
|
+
}
|
|
340
|
+
else if (result.breakpoints['(max-width: 600px)']) {
|
|
341
|
+
this.membersToShow = 1;
|
|
342
|
+
this.scrollMemberNumber = 1;
|
|
343
|
+
this.isTabletSize = true;
|
|
344
|
+
}
|
|
345
|
+
else {
|
|
346
|
+
this.isTabletSize = false;
|
|
347
|
+
}
|
|
348
|
+
});
|
|
349
|
+
}
|
|
350
|
+
onAddNewMember() {
|
|
351
|
+
this._router.navigate(['/team/new-member']);
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
TeamComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TeamComponent, deps: [{ token: i1.Router }, { token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
355
|
+
TeamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TeamComponent, selector: "team", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n <div class=\"cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n <div class=\"image-container\">\r\n <img [src]=\"teamMember.profilePicture\">\r\n </div>\r\n <div class=\"member-information\">\r\n <div class=\"name\">\r\n {{teamMember.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{teamMember.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\r\n [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-member pTemplate=\"item\">\r\n <div class=\"member-card\">\r\n <div class=\"image-container\">\r\n <img [src]=\"member.profilePicture\">\r\n </div>\r\n <div class=\"member-information\">\r\n <div class=\"name\">\r\n {{member.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{member.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n <div class=\"caption-text\">\r\n {{sectionContent.caption}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{margin-top:3rem;padding:5%;display:grid;grid-template-rows:auto auto;row-gap:2rem;width:100%}.page .title{font-weight:700;font-size:3.2rem;width:80%;margin-left:4%}.page .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.page .caption-text{font-weight:600;font-size:2rem;width:85%;text-align:center;margin:2rem auto;color:#155ed4}.page .member-card{place-self:center;height:27rem;width:22rem;padding:1rem;display:grid;transition:all .3s ease-in-out;border-radius:1rem}.page .member-card:hover{transition:all .2s ease-in-out}.page .member-card .image-container{display:grid;place-self:center;place-items:center;border-radius:1.5rem;overflow:hidden;width:100%;height:20rem}.page .member-card .image-container img{width:100%;height:100%;object-fit:cover}.page .member-card .member-information{justify-self:center;text-align:center}.page .member-card .member-information .name{font-weight:600;font-size:1.9rem;margin:auto;text-align:center}.page .member-card .member-information .position{font-weight:500;font-size:1.4rem}@media only screen and (max-width: 75em){.page{width:100%;display:block}.page .title{margin-bottom:1.8rem}.page .cards{display:block;width:100%}.page .member-card{width:22rem;margin:auto}.page .member-card .image-container{width:100%;height:20rem;overflow:hidden}.page .member-card .image-container img{width:100%;height:100%}}@media only screen and (max-width: 37.5em){.page .member-card{width:23rem}}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#155ed4;width:2.7rem;transition:all ease-in-out .1s}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem;transition:all ease-in-out .5s}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TeamComponent, decorators: [{
|
|
357
|
+
type: Component,
|
|
358
|
+
args: [{ selector: 'team', template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n <div class=\"cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n <div class=\"image-container\">\r\n <img [src]=\"teamMember.profilePicture\">\r\n </div>\r\n <div class=\"member-information\">\r\n <div class=\"name\">\r\n {{teamMember.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{teamMember.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\r\n [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-member pTemplate=\"item\">\r\n <div class=\"member-card\">\r\n <div class=\"image-container\">\r\n <img [src]=\"member.profilePicture\">\r\n </div>\r\n <div class=\"member-information\">\r\n <div class=\"name\">\r\n {{member.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{member.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n <div class=\"caption-text\">\r\n {{sectionContent.caption}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{margin-top:3rem;padding:5%;display:grid;grid-template-rows:auto auto;row-gap:2rem;width:100%}.page .title{font-weight:700;font-size:3.2rem;width:80%;margin-left:4%}.page .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.page .caption-text{font-weight:600;font-size:2rem;width:85%;text-align:center;margin:2rem auto;color:#155ed4}.page .member-card{place-self:center;height:27rem;width:22rem;padding:1rem;display:grid;transition:all .3s ease-in-out;border-radius:1rem}.page .member-card:hover{transition:all .2s ease-in-out}.page .member-card .image-container{display:grid;place-self:center;place-items:center;border-radius:1.5rem;overflow:hidden;width:100%;height:20rem}.page .member-card .image-container img{width:100%;height:100%;object-fit:cover}.page .member-card .member-information{justify-self:center;text-align:center}.page .member-card .member-information .name{font-weight:600;font-size:1.9rem;margin:auto;text-align:center}.page .member-card .member-information .position{font-weight:500;font-size:1.4rem}@media only screen and (max-width: 75em){.page{width:100%;display:block}.page .title{margin-bottom:1.8rem}.page .cards{display:block;width:100%}.page .member-card{width:22rem;margin:auto}.page .member-card .image-container{width:100%;height:20rem;overflow:hidden}.page .member-card .image-container img{width:100%;height:100%}}@media only screen and (max-width: 37.5em){.page .member-card{width:23rem}}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#155ed4;width:2.7rem;transition:all ease-in-out .1s}::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem;transition:all ease-in-out .5s}\n"] }]
|
|
359
|
+
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
|
|
360
|
+
type: Input
|
|
371
361
|
}] } });
|
|
372
362
|
|
|
373
|
-
class ValuesComponent {
|
|
374
|
-
constructor(breakpointObserver) {
|
|
375
|
-
this.breakpointObserver = breakpointObserver;
|
|
376
|
-
this.withBgImage = false;
|
|
377
|
-
}
|
|
378
|
-
ngOnInit() {
|
|
379
|
-
this.breakpointObserver.observe([
|
|
380
|
-
"(max-width: 1200px)"
|
|
381
|
-
]).subscribe((result) => {
|
|
382
|
-
if (result.matches) {
|
|
383
|
-
this.isTabletSize = true;
|
|
384
|
-
}
|
|
385
|
-
else {
|
|
386
|
-
this.isTabletSize = false;
|
|
387
|
-
}
|
|
388
|
-
});
|
|
389
|
-
}
|
|
390
|
-
}
|
|
391
|
-
ValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuesComponent, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
392
|
-
ValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuesComponent, selector: "values", inputs: { sectionContent: "sectionContent", withBgImage: "withBgImage", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"page\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\n <div class=\"card\" *ngFor=\"let card of sectionContent.cards\">\n <div class=\"card-headline\">\n <div class=\"icon\">\n <fa-icon [icon]=\"card.image\"></fa-icon>\n </div>\n <div class=\"subtitle\">\n {{card.title}}\n </div>\n </div>\n <div class=\"value-description\">\n {{card.subtitle}}\n </div>\n </div>\n </div>\n <div class=\"value-cards\" *ngIf=\"isTabletSize\">\n <p-carousel class=\"custom\" [value]=\"sectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\n <ng-template let-card pTemplate=\"item\">\n <div class=\"card\">\n <div class=\"card-headline\">\n <div class=\"icon\">\n <fa-icon [icon]=\"card.image\"></fa-icon>\n </div>\n <div class=\"subtitle\">\n {{card.title}}\n </div>\n </div>\n <div class=\"value-description\">\n {{card.subtitle}}\n </div>\n </div>\n </ng-template>\n </p-carousel>\n </div>\n</div>", styles: ["
|
|
393
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuesComponent, decorators: [{
|
|
394
|
-
type: Component,
|
|
395
|
-
args: [{ selector: 'values', template: "<div class=\"page\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\n <div class=\"card\" *ngFor=\"let card of sectionContent.cards\">\n <div class=\"card-headline\">\n <div class=\"icon\">\n <fa-icon [icon]=\"card.image\"></fa-icon>\n </div>\n <div class=\"subtitle\">\n {{card.title}}\n </div>\n </div>\n <div class=\"value-description\">\n {{card.subtitle}}\n </div>\n </div>\n </div>\n <div class=\"value-cards\" *ngIf=\"isTabletSize\">\n <p-carousel class=\"custom\" [value]=\"sectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\n <ng-template let-card pTemplate=\"item\">\n <div class=\"card\">\n <div class=\"card-headline\">\n <div class=\"icon\">\n <fa-icon [icon]=\"card.image\"></fa-icon>\n </div>\n <div class=\"subtitle\">\n {{card.title}}\n </div>\n </div>\n <div class=\"value-description\">\n {{card.subtitle}}\n </div>\n </div>\n </ng-template>\n </p-carousel>\n </div>\n</div>", styles: ["
|
|
396
|
-
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
|
|
397
|
-
type: Input
|
|
398
|
-
}], withBgImage: [{
|
|
399
|
-
type: Input
|
|
400
|
-
}], isDarkBg: [{
|
|
401
|
-
type: Input
|
|
363
|
+
class ValuesComponent {
|
|
364
|
+
constructor(breakpointObserver) {
|
|
365
|
+
this.breakpointObserver = breakpointObserver;
|
|
366
|
+
this.withBgImage = false;
|
|
367
|
+
}
|
|
368
|
+
ngOnInit() {
|
|
369
|
+
this.breakpointObserver.observe([
|
|
370
|
+
"(max-width: 1200px)"
|
|
371
|
+
]).subscribe((result) => {
|
|
372
|
+
if (result.matches) {
|
|
373
|
+
this.isTabletSize = true;
|
|
374
|
+
}
|
|
375
|
+
else {
|
|
376
|
+
this.isTabletSize = false;
|
|
377
|
+
}
|
|
378
|
+
});
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
ValuesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuesComponent, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
382
|
+
ValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuesComponent, selector: "values", inputs: { sectionContent: "sectionContent", withBgImage: "withBgImage", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"card\" *ngFor=\"let card of sectionContent.cards\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\">\r\n <fa-icon [icon]=\"card.image\"></fa-icon>\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"value-cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"sectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-card pTemplate=\"item\">\r\n <div class=\"card\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\">\r\n <fa-icon [icon]=\"card.image\"></fa-icon>\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;grid-template-rows:auto auto auto auto;margin-top:5rem;align-items:center;position:relative;row-gap:2rem}.page .background-image{width:100%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.page .values-cards{grid-row:4;display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;place-content:center;gap:3REM;z-index:2;margin:auto;width:60%}.page .card{background-color:#fff;color:#32353b;padding:1rem 2rem;border-radius:2rem;border:.1rem solid #D8D8D8;box-shadow:.2rem .2rem .4rem #00000040;display:flex;flex-direction:column;row-gap:1rem}.page .card .card-headline{display:flex;flex-direction:row;column-gap:2rem;align-items:center}.page .card .icon{color:#155ed4;font-size:3rem}.page .card .subtitle{font-weight:700;font-size:2.4rem}.page .card .value-description{font-weight:400;font-size:1.4rem}@media only screen and (max-width: 75em){.page{height:auto;display:block}.page .values-cards{margin-top:3rem;display:block;width:100%}.page .card{width:70%;width:90%;margin:2rem auto}}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuesComponent, decorators: [{
|
|
384
|
+
type: Component,
|
|
385
|
+
args: [{ selector: 'values', template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"card\" *ngFor=\"let card of sectionContent.cards\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\">\r\n <fa-icon [icon]=\"card.image\"></fa-icon>\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"value-cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"sectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-card pTemplate=\"item\">\r\n <div class=\"card\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\">\r\n <fa-icon [icon]=\"card.image\"></fa-icon>\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;grid-template-rows:auto auto auto auto;margin-top:5rem;align-items:center;position:relative;row-gap:2rem}.page .background-image{width:100%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.page .values-cards{grid-row:4;display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;place-content:center;gap:3REM;z-index:2;margin:auto;width:60%}.page .card{background-color:#fff;color:#32353b;padding:1rem 2rem;border-radius:2rem;border:.1rem solid #D8D8D8;box-shadow:.2rem .2rem .4rem #00000040;display:flex;flex-direction:column;row-gap:1rem}.page .card .card-headline{display:flex;flex-direction:row;column-gap:2rem;align-items:center}.page .card .icon{color:#155ed4;font-size:3rem}.page .card .subtitle{font-weight:700;font-size:2.4rem}.page .card .value-description{font-weight:400;font-size:1.4rem}@media only screen and (max-width: 75em){.page{height:auto;display:block}.page .values-cards{margin-top:3rem;display:block;width:100%}.page .card{width:70%;width:90%;margin:2rem auto}}\n"] }]
|
|
386
|
+
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
|
|
387
|
+
type: Input
|
|
388
|
+
}], withBgImage: [{
|
|
389
|
+
type: Input
|
|
390
|
+
}], isDarkBg: [{
|
|
391
|
+
type: Input
|
|
402
392
|
}] } });
|
|
403
393
|
|
|
404
|
-
class OurClientListingComponent {
|
|
405
|
-
constructor() { }
|
|
406
|
-
ngOnInit() {
|
|
407
|
-
// console.log(this.account);
|
|
408
|
-
}
|
|
409
|
-
}
|
|
410
|
-
OurClientListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
411
|
-
OurClientListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OurClientListingComponent, selector: "our-client-listing", inputs: { account: "account" }, ngImport: i0, template: "<div class=\"client\">\n <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\n</div>", styles: ["
|
|
412
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientListingComponent, decorators: [{
|
|
413
|
-
type: Component,
|
|
414
|
-
args: [{ selector: "our-client-listing", template: "<div class=\"client\">\n <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\n</div>", styles: ["
|
|
415
|
-
}], ctorParameters: function () { return []; }, propDecorators: { account: [{
|
|
416
|
-
type: Input
|
|
394
|
+
class OurClientListingComponent {
|
|
395
|
+
constructor() { }
|
|
396
|
+
ngOnInit() {
|
|
397
|
+
// console.log(this.account);
|
|
398
|
+
}
|
|
399
|
+
}
|
|
400
|
+
OurClientListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
401
|
+
OurClientListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OurClientListingComponent, selector: "our-client-listing", inputs: { account: "account" }, ngImport: i0, template: "<div class=\"client\">\r\n <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.client{margin:2vh 0}.client .image{filter:grayscale(100%);text-align:center;box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:.5rem}.client .image:hover{filter:none;cursor:pointer}@media only screen and (max-width: 112.5em){.image{width:70%}}@media only screen and (max-width: 75em){.image{width:70%}}@media only screen and (max-width: 56.25em){.image{width:70%}}@media only screen and (max-width: 37.5em){.image{width:85%}}@media only screen and (min-width: 112.5em){.image{width:70%}}\n"] });
|
|
402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientListingComponent, decorators: [{
|
|
403
|
+
type: Component,
|
|
404
|
+
args: [{ selector: "our-client-listing", template: "<div class=\"client\">\r\n <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.client{margin:2vh 0}.client .image{filter:grayscale(100%);text-align:center;box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:.5rem}.client .image:hover{filter:none;cursor:pointer}@media only screen and (max-width: 112.5em){.image{width:70%}}@media only screen and (max-width: 75em){.image{width:70%}}@media only screen and (max-width: 56.25em){.image{width:70%}}@media only screen and (max-width: 37.5em){.image{width:85%}}@media only screen and (min-width: 112.5em){.image{width:70%}}\n"] }]
|
|
405
|
+
}], ctorParameters: function () { return []; }, propDecorators: { account: [{
|
|
406
|
+
type: Input
|
|
417
407
|
}] } });
|
|
418
408
|
|
|
419
|
-
class OurClientsComponent {
|
|
420
|
-
constructor(breakpointObserver) {
|
|
421
|
-
this.breakpointObserver = breakpointObserver;
|
|
422
|
-
this.clientsToShow = 4;
|
|
423
|
-
this.scrollClientNumber = 2;
|
|
424
|
-
}
|
|
425
|
-
ngOnInit() {
|
|
426
|
-
this.breakpointObserver.observe([
|
|
427
|
-
"(min-width: 1201px)",
|
|
428
|
-
"(max-width: 1200px) and (min-width:1076px)",
|
|
429
|
-
"(max-width: 1075px) and (min-width:651px)",
|
|
430
|
-
"(max-width: 650px)"
|
|
431
|
-
]).subscribe((result) => {
|
|
432
|
-
if (result.breakpoints['(max-width: 1200px) and (min-width:1076px)']) {
|
|
433
|
-
this.isUnderTabRange = true;
|
|
434
|
-
this.clientsToShow = 3;
|
|
435
|
-
this.scrollClientNumber = 2;
|
|
436
|
-
}
|
|
437
|
-
else if (result.breakpoints['(min-width: 1201px)']) {
|
|
438
|
-
this.isUnderTabRange = true;
|
|
439
|
-
this.clientsToShow = 4;
|
|
440
|
-
this.scrollClientNumber = 2;
|
|
441
|
-
}
|
|
442
|
-
else if (result.breakpoints['(max-width: 1075px) and (min-width:651px)']) {
|
|
443
|
-
this.isUnderTabRange = true;
|
|
444
|
-
this.clientsToShow = 2;
|
|
445
|
-
this.scrollClientNumber = 1;
|
|
446
|
-
}
|
|
447
|
-
else if (result.breakpoints['(max-width: 650px)']) {
|
|
448
|
-
this.isUnderTabRange = true;
|
|
449
|
-
this.clientsToShow = 1;
|
|
450
|
-
this.scrollClientNumber = 1;
|
|
451
|
-
}
|
|
452
|
-
else {
|
|
453
|
-
this.isUnderTabRange = false;
|
|
454
|
-
}
|
|
455
|
-
});
|
|
456
|
-
}
|
|
457
|
-
}
|
|
458
|
-
OurClientsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientsComponent, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
459
|
-
OurClientsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OurClientsComponent, selector: "our-clients", inputs: { accounts: "accounts" }, ngImport: i0, template: "<p-carousel class=\"custom\" [value]=\"accounts\" [numVisible]=\"clientsToShow\" [numScroll]=\"scrollClientNumber\" [page]=\"0\"\n orientation=\"horizantol\" [circular]=\"true\">\n <ng-template let-client pTemplate=\"item\">\n <div>\n <our-client-listing class=\"client\" [account]=\"client\">\n </our-client-listing>\n </div>\n </ng-template>\n</p-carousel>", styles: ["
|
|
460
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientsComponent, decorators: [{
|
|
461
|
-
type: Component,
|
|
462
|
-
args: [{ selector: "our-clients", template: "<p-carousel class=\"custom\" [value]=\"accounts\" [numVisible]=\"clientsToShow\" [numScroll]=\"scrollClientNumber\" [page]=\"0\"\n orientation=\"horizantol\" [circular]=\"true\">\n <ng-template let-client pTemplate=\"item\">\n <div>\n <our-client-listing class=\"client\" [account]=\"client\">\n </our-client-listing>\n </div>\n </ng-template>\n</p-carousel>", styles: ["
|
|
463
|
-
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { accounts: [{
|
|
464
|
-
type: Input
|
|
409
|
+
class OurClientsComponent {
|
|
410
|
+
constructor(breakpointObserver) {
|
|
411
|
+
this.breakpointObserver = breakpointObserver;
|
|
412
|
+
this.clientsToShow = 4;
|
|
413
|
+
this.scrollClientNumber = 2;
|
|
414
|
+
}
|
|
415
|
+
ngOnInit() {
|
|
416
|
+
this.breakpointObserver.observe([
|
|
417
|
+
"(min-width: 1201px)",
|
|
418
|
+
"(max-width: 1200px) and (min-width:1076px)",
|
|
419
|
+
"(max-width: 1075px) and (min-width:651px)",
|
|
420
|
+
"(max-width: 650px)"
|
|
421
|
+
]).subscribe((result) => {
|
|
422
|
+
if (result.breakpoints['(max-width: 1200px) and (min-width:1076px)']) {
|
|
423
|
+
this.isUnderTabRange = true;
|
|
424
|
+
this.clientsToShow = 3;
|
|
425
|
+
this.scrollClientNumber = 2;
|
|
426
|
+
}
|
|
427
|
+
else if (result.breakpoints['(min-width: 1201px)']) {
|
|
428
|
+
this.isUnderTabRange = true;
|
|
429
|
+
this.clientsToShow = 4;
|
|
430
|
+
this.scrollClientNumber = 2;
|
|
431
|
+
}
|
|
432
|
+
else if (result.breakpoints['(max-width: 1075px) and (min-width:651px)']) {
|
|
433
|
+
this.isUnderTabRange = true;
|
|
434
|
+
this.clientsToShow = 2;
|
|
435
|
+
this.scrollClientNumber = 1;
|
|
436
|
+
}
|
|
437
|
+
else if (result.breakpoints['(max-width: 650px)']) {
|
|
438
|
+
this.isUnderTabRange = true;
|
|
439
|
+
this.clientsToShow = 1;
|
|
440
|
+
this.scrollClientNumber = 1;
|
|
441
|
+
}
|
|
442
|
+
else {
|
|
443
|
+
this.isUnderTabRange = false;
|
|
444
|
+
}
|
|
445
|
+
});
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
OurClientsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientsComponent, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
449
|
+
OurClientsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OurClientsComponent, selector: "our-clients", inputs: { accounts: "accounts" }, ngImport: i0, template: "<p-carousel class=\"custom\" [value]=\"accounts\" [numVisible]=\"clientsToShow\" [numScroll]=\"scrollClientNumber\" [page]=\"0\"\r\n orientation=\"horizantol\" [circular]=\"true\">\r\n <ng-template let-client pTemplate=\"item\">\r\n <div>\r\n <our-client-listing class=\"client\" [account]=\"client\">\r\n </our-client-listing>\r\n </div>\r\n </ng-template>\r\n</p-carousel>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.custom{height:20vh}.client{height:20rem}.custom,.client{margin:auto;width:90%}@media only screen and (min-width: 1500px){.custom,.client{width:150rem}}\n"], dependencies: [{ kind: "directive", type: i4$2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }, { kind: "component", type: OurClientListingComponent, selector: "our-client-listing", inputs: ["account"] }] });
|
|
450
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientsComponent, decorators: [{
|
|
451
|
+
type: Component,
|
|
452
|
+
args: [{ selector: "our-clients", template: "<p-carousel class=\"custom\" [value]=\"accounts\" [numVisible]=\"clientsToShow\" [numScroll]=\"scrollClientNumber\" [page]=\"0\"\r\n orientation=\"horizantol\" [circular]=\"true\">\r\n <ng-template let-client pTemplate=\"item\">\r\n <div>\r\n <our-client-listing class=\"client\" [account]=\"client\">\r\n </our-client-listing>\r\n </div>\r\n </ng-template>\r\n</p-carousel>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.custom{height:20vh}.client{height:20rem}.custom,.client{margin:auto;width:90%}@media only screen and (min-width: 1500px){.custom,.client{width:150rem}}\n"] }]
|
|
453
|
+
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { accounts: [{
|
|
454
|
+
type: Input
|
|
465
455
|
}] } });
|
|
466
456
|
|
|
467
|
-
class PageSectionWithMultipleCardsComponent {
|
|
468
|
-
constructor(_Router) {
|
|
469
|
-
this._Router = _Router;
|
|
470
|
-
}
|
|
471
|
-
ngOnInit() { }
|
|
472
|
-
onClickAllReasons(route) {
|
|
473
|
-
this._Router.navigate([route]);
|
|
474
|
-
}
|
|
475
|
-
}
|
|
476
|
-
PageSectionWithMultipleCardsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
477
|
-
PageSectionWithMultipleCardsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionWithMultipleCardsComponent, selector: "page-section-with-multiple-cards", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"text-part\">\n <h2 class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </h2>\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\n <div class=\"card-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\n <path\n d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\n </svg>\n <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\n </div>\n <div class=\"card-title\">\n {{reason.title}}\n </div>\n <div class=\"card-description\">\n {{reason.description}}\n </div>\n </div>\n <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\n <div class=\"card-title\">\n {{sectionContent.allReasonsBox.ctaText}}\n </div>\n <div class=\"icon-circle\">\n <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\n </div>\n </button>\n\n</div>", styles: ["
|
|
478
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, decorators: [{
|
|
479
|
-
type: Component,
|
|
480
|
-
args: [{ selector: 'page-section-with-multiple-cards', template: "<div class=\"page\">\n <div class=\"text-part\">\n <h2 class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </h2>\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\n <div class=\"card-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\n <path\n d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\n </svg>\n <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\n </div>\n <div class=\"card-title\">\n {{reason.title}}\n </div>\n <div class=\"card-description\">\n {{reason.description}}\n </div>\n </div>\n <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\n <div class=\"card-title\">\n {{sectionContent.allReasonsBox.ctaText}}\n </div>\n <div class=\"icon-circle\">\n <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\n </div>\n </button>\n\n</div>", styles: ["
|
|
481
|
-
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
482
|
-
type: Input
|
|
457
|
+
class PageSectionWithMultipleCardsComponent {
|
|
458
|
+
constructor(_Router) {
|
|
459
|
+
this._Router = _Router;
|
|
460
|
+
}
|
|
461
|
+
ngOnInit() { }
|
|
462
|
+
onClickAllReasons(route) {
|
|
463
|
+
this._Router.navigate([route]);
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
PageSectionWithMultipleCardsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
467
|
+
PageSectionWithMultipleCardsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionWithMultipleCardsComponent, selector: "page-section-with-multiple-cards", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\r\n <div class=\"text-part\">\r\n <h2 class=\"tip-title\">\r\n {{sectionContent.tipTitle}}\r\n </h2>\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\r\n <div class=\"card-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\r\n <path\r\n d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\r\n </svg>\r\n <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\r\n </div>\r\n <div class=\"card-title\">\r\n {{reason.title}}\r\n </div>\r\n <div class=\"card-description\">\r\n {{reason.description}}\r\n </div>\r\n </div>\r\n <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\r\n <div class=\"card-title\">\r\n {{sectionContent.allReasonsBox.ctaText}}\r\n </div>\r\n <div class=\"icon-circle\">\r\n <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\r\n </div>\r\n </button>\r\n\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{gap:1.5rem;display:flex;flex-wrap:wrap;width:90%;margin:2rem auto}@media only screen and (min-width: 1500px){.page{max-width:150rem}}.page .text-part{width:61.5rem;row-gap:.5rem;display:grid;grid-template-rows:2rem 13rem auto;min-width:52rem;margin-bottom:2rem}@media only screen and (max-width: 600px){.page .text-part{min-width:0;width:100%;grid-template-rows:2rem auto auto}.page .text-part .subtitle{font-size:3rem;font-weight:700}}.page .text-part .tip-title{color:#155ed4;font-size:1.6rem;font-weight:700}.page .text-part .subtitle{font-size:4rem;font-weight:800;color:#3d3d3d}.page .text-part .description{font-size:2rem;font-weight:500;color:#7e7e7e}.page .reason-card,.page .all-reason-card{row-gap:1rem;display:grid;border-radius:1.5rem;border:.1rem solid #D8D8D8;background:#FFF;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem 1rem;margin:0rem auto}.page .reason-card{width:30rem;grid-template-rows:auto auto auto;text-align:center}.page .reason-card:nth-child(odd) svg{transform:rotate(90deg)}.page .reason-card .card-icon{place-self:center;position:relative}.page .reason-card .card-icon svg{width:9.5rem;height:9.5rem}.page .reason-card .card-icon fa-icon{position:absolute;font-size:3.8rem;top:calc(50% - 1.9rem);left:calc(50% - 1.9rem)}.page .reason-card .card-description{font-size:1.4rem;font-weight:500;color:#484848}.page .card-title{font-size:2.2rem;font-weight:800;color:#424345}.page .all-reason-card{place-content:center;cursor:pointer;transition:all .2s;width:30rem}@media (hover: hover){.page .all-reason-card:hover{background-color:#155ed4}.page .all-reason-card:hover .card-title{color:#fff}.page .all-reason-card:hover .icon-circle{color:#155ed4;background-color:#fff}.page .all-reason-card:active{background-color:#fff}.page .all-reason-card:active .card-title{color:#424345}.page .all-reason-card:active .icon-circle{color:#fff;background-color:#155ed4}}.page .all-reason-card .icon-circle{border-radius:50%;font-size:1.8rem;width:4rem;height:4rem;display:grid;place-content:center;background-color:#155ed4;color:#fff;justify-self:center}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
468
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, decorators: [{
|
|
469
|
+
type: Component,
|
|
470
|
+
args: [{ selector: 'page-section-with-multiple-cards', template: "<div class=\"page\">\r\n <div class=\"text-part\">\r\n <h2 class=\"tip-title\">\r\n {{sectionContent.tipTitle}}\r\n </h2>\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\r\n <div class=\"card-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\r\n <path\r\n d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\r\n </svg>\r\n <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\r\n </div>\r\n <div class=\"card-title\">\r\n {{reason.title}}\r\n </div>\r\n <div class=\"card-description\">\r\n {{reason.description}}\r\n </div>\r\n </div>\r\n <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\r\n <div class=\"card-title\">\r\n {{sectionContent.allReasonsBox.ctaText}}\r\n </div>\r\n <div class=\"icon-circle\">\r\n <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\r\n </div>\r\n </button>\r\n\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{gap:1.5rem;display:flex;flex-wrap:wrap;width:90%;margin:2rem auto}@media only screen and (min-width: 1500px){.page{max-width:150rem}}.page .text-part{width:61.5rem;row-gap:.5rem;display:grid;grid-template-rows:2rem 13rem auto;min-width:52rem;margin-bottom:2rem}@media only screen and (max-width: 600px){.page .text-part{min-width:0;width:100%;grid-template-rows:2rem auto auto}.page .text-part .subtitle{font-size:3rem;font-weight:700}}.page .text-part .tip-title{color:#155ed4;font-size:1.6rem;font-weight:700}.page .text-part .subtitle{font-size:4rem;font-weight:800;color:#3d3d3d}.page .text-part .description{font-size:2rem;font-weight:500;color:#7e7e7e}.page .reason-card,.page .all-reason-card{row-gap:1rem;display:grid;border-radius:1.5rem;border:.1rem solid #D8D8D8;background:#FFF;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem 1rem;margin:0rem auto}.page .reason-card{width:30rem;grid-template-rows:auto auto auto;text-align:center}.page .reason-card:nth-child(odd) svg{transform:rotate(90deg)}.page .reason-card .card-icon{place-self:center;position:relative}.page .reason-card .card-icon svg{width:9.5rem;height:9.5rem}.page .reason-card .card-icon fa-icon{position:absolute;font-size:3.8rem;top:calc(50% - 1.9rem);left:calc(50% - 1.9rem)}.page .reason-card .card-description{font-size:1.4rem;font-weight:500;color:#484848}.page .card-title{font-size:2.2rem;font-weight:800;color:#424345}.page .all-reason-card{place-content:center;cursor:pointer;transition:all .2s;width:30rem}@media (hover: hover){.page .all-reason-card:hover{background-color:#155ed4}.page .all-reason-card:hover .card-title{color:#fff}.page .all-reason-card:hover .icon-circle{color:#155ed4;background-color:#fff}.page .all-reason-card:active{background-color:#fff}.page .all-reason-card:active .card-title{color:#424345}.page .all-reason-card:active .icon-circle{color:#fff;background-color:#155ed4}}.page .all-reason-card .icon-circle{border-radius:50%;font-size:1.8rem;width:4rem;height:4rem;display:grid;place-content:center;background-color:#155ed4;color:#fff;justify-self:center}\n"] }]
|
|
471
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
472
|
+
type: Input
|
|
483
473
|
}] } });
|
|
484
474
|
|
|
485
|
-
class CallToActionSectionTwoComponent {
|
|
486
|
-
constructor(_router) {
|
|
487
|
-
this._router = _router;
|
|
488
|
-
}
|
|
489
|
-
ngOnInit() {
|
|
490
|
-
}
|
|
491
|
-
onClickLink(link) {
|
|
492
|
-
this._router.navigate([link]);
|
|
493
|
-
}
|
|
494
|
-
}
|
|
495
|
-
CallToActionSectionTwoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionTwoComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
496
|
-
CallToActionSectionTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CallToActionSectionTwoComponent, selector: "call-to-action-section-two", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"cta-section\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 61 48\" fill=\"none\" class=\"svg-top-right\">\n <path\n d=\"M16.8568 30.4924C-18.2522 24.3036 10.5419 3.88207 25.167 1.30326C39.7921 -1.27554 56.828 7.35401 58.4986 18.7386C60.1692 30.1232 64.3083 44.7867 49.6832 47.3655C35.058 49.9443 32.3641 34.7521 16.8568 30.4924Z\"\n fill=\"#155ED4\" />\n </svg>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 53 51\" fill=\"none\" class=\"svg-bottom-left\">\n <path\n d=\"M39.4766 22.6779C69.5603 35.0664 40.8217 50.4221 27.4676 50.4221C14.1135 50.4221 0.41333 38.7801 0.750387 27.0924C1.08744 15.4046 -0.237166 0 13.1169 0C26.471 0 26.4324 15.6787 39.4766 22.6779Z\"\n fill=\"#155ED4\" />\n </svg>\n <h1 class=\"cta-title\">{{sectionContent.title}}</h1>\n <p class=\"cta-description\">\n {{sectionContent.description}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkOne.route)\">\n {{sectionContent.linkOne.text}}\n </span>.\n {{sectionContent.textBetweenLinksOne}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkTwo.route)\">\n {{sectionContent.linkTwo.text}} \n </span>\n {{sectionContent.textBetweenLinksTwo}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkThree.route)\">\n {{sectionContent.linkThree.text}}\n </span>\n {{sectionContent.textAfterLinks}}\n </p>\n\n</div>", styles: ["
|
|
497
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionTwoComponent, decorators: [{
|
|
498
|
-
type: Component,
|
|
499
|
-
args: [{ selector: 'call-to-action-section-two', template: "<div class=\"cta-section\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 61 48\" fill=\"none\" class=\"svg-top-right\">\n <path\n d=\"M16.8568 30.4924C-18.2522 24.3036 10.5419 3.88207 25.167 1.30326C39.7921 -1.27554 56.828 7.35401 58.4986 18.7386C60.1692 30.1232 64.3083 44.7867 49.6832 47.3655C35.058 49.9443 32.3641 34.7521 16.8568 30.4924Z\"\n fill=\"#155ED4\" />\n </svg>\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 53 51\" fill=\"none\" class=\"svg-bottom-left\">\n <path\n d=\"M39.4766 22.6779C69.5603 35.0664 40.8217 50.4221 27.4676 50.4221C14.1135 50.4221 0.41333 38.7801 0.750387 27.0924C1.08744 15.4046 -0.237166 0 13.1169 0C26.471 0 26.4324 15.6787 39.4766 22.6779Z\"\n fill=\"#155ED4\" />\n </svg>\n <h1 class=\"cta-title\">{{sectionContent.title}}</h1>\n <p class=\"cta-description\">\n {{sectionContent.description}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkOne.route)\">\n {{sectionContent.linkOne.text}}\n </span>.\n {{sectionContent.textBetweenLinksOne}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkTwo.route)\">\n {{sectionContent.linkTwo.text}} \n </span>\n {{sectionContent.textBetweenLinksTwo}}\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkThree.route)\">\n {{sectionContent.linkThree.text}}\n </span>\n {{sectionContent.textAfterLinks}}\n </p>\n\n</div>", styles: ["
|
|
500
|
-
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
501
|
-
type: Input
|
|
475
|
+
class CallToActionSectionTwoComponent {
|
|
476
|
+
constructor(_router) {
|
|
477
|
+
this._router = _router;
|
|
478
|
+
}
|
|
479
|
+
ngOnInit() {
|
|
480
|
+
}
|
|
481
|
+
onClickLink(link) {
|
|
482
|
+
this._router.navigate([link]);
|
|
483
|
+
}
|
|
484
|
+
}
|
|
485
|
+
CallToActionSectionTwoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionTwoComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
486
|
+
CallToActionSectionTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CallToActionSectionTwoComponent, selector: "call-to-action-section-two", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"cta-section\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 61 48\" fill=\"none\" class=\"svg-top-right\">\r\n <path\r\n d=\"M16.8568 30.4924C-18.2522 24.3036 10.5419 3.88207 25.167 1.30326C39.7921 -1.27554 56.828 7.35401 58.4986 18.7386C60.1692 30.1232 64.3083 44.7867 49.6832 47.3655C35.058 49.9443 32.3641 34.7521 16.8568 30.4924Z\"\r\n fill=\"#155ED4\" />\r\n </svg>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 53 51\" fill=\"none\" class=\"svg-bottom-left\">\r\n <path\r\n d=\"M39.4766 22.6779C69.5603 35.0664 40.8217 50.4221 27.4676 50.4221C14.1135 50.4221 0.41333 38.7801 0.750387 27.0924C1.08744 15.4046 -0.237166 0 13.1169 0C26.471 0 26.4324 15.6787 39.4766 22.6779Z\"\r\n fill=\"#155ED4\" />\r\n </svg>\r\n <h1 class=\"cta-title\">{{sectionContent.title}}</h1>\r\n <p class=\"cta-description\">\r\n {{sectionContent.description}}\r\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkOne.route)\">\r\n {{sectionContent.linkOne.text}}\r\n </span>.\r\n {{sectionContent.textBetweenLinksOne}}\r\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkTwo.route)\">\r\n {{sectionContent.linkTwo.text}} \r\n </span>\r\n {{sectionContent.textBetweenLinksTwo}}\r\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkThree.route)\">\r\n {{sectionContent.linkThree.text}}\r\n </span>\r\n {{sectionContent.textAfterLinks}}\r\n </p>\r\n\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.cta-section{background-color:#c2d0de;display:grid;position:relative;border-radius:1.5rem;padding:2rem 1.5rem;width:100%;margin:3rem auto}.cta-section .svg-top-right{height:4.8rem;width:6.1rem;position:absolute;top:-1rem;right:-1rem}.cta-section .svg-bottom-left{height:5.1rem;width:5.3rem;position:absolute;bottom:-2rem;left:-1.5rem}.cta-section .cta-title{font-size:3.4rem;font-weight:700;color:#000}.cta-section .cta-description{font-size:2rem;font-weight:500}.cta-section .link-text{text-decoration:underline;font-weight:700;cursor:pointer;transition:color linear .2s}@media (hover: hover){.cta-section .link-text:hover{color:#155ed4}}\n"] });
|
|
487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionTwoComponent, decorators: [{
|
|
488
|
+
type: Component,
|
|
489
|
+
args: [{ selector: 'call-to-action-section-two', template: "<div class=\"cta-section\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 61 48\" fill=\"none\" class=\"svg-top-right\">\r\n <path\r\n d=\"M16.8568 30.4924C-18.2522 24.3036 10.5419 3.88207 25.167 1.30326C39.7921 -1.27554 56.828 7.35401 58.4986 18.7386C60.1692 30.1232 64.3083 44.7867 49.6832 47.3655C35.058 49.9443 32.3641 34.7521 16.8568 30.4924Z\"\r\n fill=\"#155ED4\" />\r\n </svg>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 53 51\" fill=\"none\" class=\"svg-bottom-left\">\r\n <path\r\n d=\"M39.4766 22.6779C69.5603 35.0664 40.8217 50.4221 27.4676 50.4221C14.1135 50.4221 0.41333 38.7801 0.750387 27.0924C1.08744 15.4046 -0.237166 0 13.1169 0C26.471 0 26.4324 15.6787 39.4766 22.6779Z\"\r\n fill=\"#155ED4\" />\r\n </svg>\r\n <h1 class=\"cta-title\">{{sectionContent.title}}</h1>\r\n <p class=\"cta-description\">\r\n {{sectionContent.description}}\r\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkOne.route)\">\r\n {{sectionContent.linkOne.text}}\r\n </span>.\r\n {{sectionContent.textBetweenLinksOne}}\r\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkTwo.route)\">\r\n {{sectionContent.linkTwo.text}} \r\n </span>\r\n {{sectionContent.textBetweenLinksTwo}}\r\n <span class=\"link-text\" (click)=\"onClickLink(sectionContent.linkThree.route)\">\r\n {{sectionContent.linkThree.text}}\r\n </span>\r\n {{sectionContent.textAfterLinks}}\r\n </p>\r\n\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.cta-section{background-color:#c2d0de;display:grid;position:relative;border-radius:1.5rem;padding:2rem 1.5rem;width:100%;margin:3rem auto}.cta-section .svg-top-right{height:4.8rem;width:6.1rem;position:absolute;top:-1rem;right:-1rem}.cta-section .svg-bottom-left{height:5.1rem;width:5.3rem;position:absolute;bottom:-2rem;left:-1.5rem}.cta-section .cta-title{font-size:3.4rem;font-weight:700;color:#000}.cta-section .cta-description{font-size:2rem;font-weight:500}.cta-section .link-text{text-decoration:underline;font-weight:700;cursor:pointer;transition:color linear .2s}@media (hover: hover){.cta-section .link-text:hover{color:#155ed4}}\n"] }]
|
|
490
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
491
|
+
type: Input
|
|
502
492
|
}] } });
|
|
503
493
|
|
|
504
|
-
class ValuePropsSectionComponent {
|
|
505
|
-
constructor() { }
|
|
506
|
-
ngOnInit() {
|
|
507
|
-
let i = 0;
|
|
508
|
-
this.selectedImage = this.sectionContent.paragraphs[0].imagePath;
|
|
509
|
-
i++;
|
|
510
|
-
for (let paragraph of this.sectionContent.paragraphs) {
|
|
511
|
-
paragraph.isClicked = false;
|
|
512
|
-
}
|
|
513
|
-
this.sectionContent.paragraphs[0].isClicked = true;
|
|
514
|
-
}
|
|
515
|
-
onChangeImage(imagePath, paragraphIndex) {
|
|
516
|
-
for (let paragraph of this.sectionContent.paragraphs) {
|
|
517
|
-
paragraph.isClicked = false;
|
|
518
|
-
}
|
|
519
|
-
this.selectedImage = imagePath;
|
|
520
|
-
this.sectionContent.paragraphs[paragraphIndex].isClicked = true;
|
|
521
|
-
}
|
|
522
|
-
}
|
|
523
|
-
ValuePropsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
524
|
-
ValuePropsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropsSectionComponent, selector: "value-props-section", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\n <div class=\"text-side\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\n </section-title>\n <div class=\"value-prop-image\">\n <img [src]=\"selectedImage\" alt=\"\">\n </div>\n <div class=\"paragraph-items\">\n <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\n <span class=\"value-prop-icon\">\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\n <span class=\"paragraph-text\">\n {{paragraph.text}}\n </span>\n </p>\n </div>\n </div>\n <div class=\"image-buttons-side\">\n <img [src]=\"selectedImage\" alt=\"\">\n </div>\n</div>", styles: ["
|
|
525
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, decorators: [{
|
|
526
|
-
type: Component,
|
|
527
|
-
args: [{ selector: 'value-props-section', template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\n <div class=\"text-side\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\n </section-title>\n <div class=\"value-prop-image\">\n <img [src]=\"selectedImage\" alt=\"\">\n </div>\n <div class=\"paragraph-items\">\n <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\n <span class=\"value-prop-icon\">\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\n <span class=\"paragraph-text\">\n {{paragraph.text}}\n </span>\n </p>\n </div>\n </div>\n <div class=\"image-buttons-side\">\n <img [src]=\"selectedImage\" alt=\"\">\n </div>\n</div>", styles: ["
|
|
528
|
-
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
529
|
-
type: Input
|
|
494
|
+
class ValuePropsSectionComponent {
|
|
495
|
+
constructor() { }
|
|
496
|
+
ngOnInit() {
|
|
497
|
+
let i = 0;
|
|
498
|
+
this.selectedImage = this.sectionContent.paragraphs[0].imagePath;
|
|
499
|
+
i++;
|
|
500
|
+
for (let paragraph of this.sectionContent.paragraphs) {
|
|
501
|
+
paragraph.isClicked = false;
|
|
502
|
+
}
|
|
503
|
+
this.sectionContent.paragraphs[0].isClicked = true;
|
|
504
|
+
}
|
|
505
|
+
onChangeImage(imagePath, paragraphIndex) {
|
|
506
|
+
for (let paragraph of this.sectionContent.paragraphs) {
|
|
507
|
+
paragraph.isClicked = false;
|
|
508
|
+
}
|
|
509
|
+
this.selectedImage = imagePath;
|
|
510
|
+
this.sectionContent.paragraphs[paragraphIndex].isClicked = true;
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
ValuePropsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
514
|
+
ValuePropsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropsSectionComponent, selector: "value-props-section", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\r\n </section-title>\r\n <div class=\"value-prop-image\">\r\n <img [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n <div class=\"paragraph-items\">\r\n <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\r\n <span class=\"value-prop-icon\">\r\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\r\n <span class=\"paragraph-text\">\r\n {{paragraph.text}}\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"image-buttons-side\">\r\n <img [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;flex-wrap:nowrap;column-gap:2%;margin:2rem auto;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:60%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{display:flex;flex-wrap:wrap;flex-direction:row;column-gap:1rem}.value-prop .text-side .paragraph{box-sizing:border-box;display:grid;grid-template-columns:5rem auto auto;margin:0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:40rem;height:-moz-fit-content;height:fit-content}@media only screen and (max-width: 725px){.value-prop .text-side .paragraph{width:100%;height:auto;padding:2rem 1rem}}.value-prop .text-side .paragraph:hover .paragraph-text,.value-prop .text-side .paragraph:hover .value-prop-icon{color:#32353b}.value-prop .text-side .paragraph .paragraph-text{color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .one-paragraph{width:100%}.value-prop .text-side .selected-paragraph .paragraph-text{color:#32353b}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.value-prop .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:38%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{width:100%;justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}.image-text-sort{flex-direction:row-reverse}@media only screen and (max-width: 56.25em){.image-text-sort:nth-child(even) .image-buttons-side{justify-self:center}}.text-image-sort{flex-direction:row}.paragraph-with-card .text-side .paragraph{padding:1rem;margin:1rem 0rem;border-radius:.7rem;border:.2rem solid rgba(50,53,59,.1);min-height:max-content;height:15rem}.paragraph-with-card .text-side .paragraph:hover{border:.2rem solid #32353b}.paragraph-with-card .text-side .paragraph .value-prop-icon{text-align:center}.paragraph-with-card .text-side .selected-paragraph{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph .paragraph-text{color:#32353b}.paragraph-with-card .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.paragraph-with-card .text-side .selected-paragraph:hover{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
515
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, decorators: [{
|
|
516
|
+
type: Component,
|
|
517
|
+
args: [{ selector: 'value-props-section', template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\r\n </section-title>\r\n <div class=\"value-prop-image\">\r\n <img [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n <div class=\"paragraph-items\">\r\n <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\r\n <span class=\"value-prop-icon\">\r\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\r\n <span class=\"paragraph-text\">\r\n {{paragraph.text}}\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"image-buttons-side\">\r\n <img [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;flex-wrap:nowrap;column-gap:2%;margin:2rem auto;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:60%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{display:flex;flex-wrap:wrap;flex-direction:row;column-gap:1rem}.value-prop .text-side .paragraph{box-sizing:border-box;display:grid;grid-template-columns:5rem auto auto;margin:0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:40rem;height:-moz-fit-content;height:fit-content}@media only screen and (max-width: 725px){.value-prop .text-side .paragraph{width:100%;height:auto;padding:2rem 1rem}}.value-prop .text-side .paragraph:hover .paragraph-text,.value-prop .text-side .paragraph:hover .value-prop-icon{color:#32353b}.value-prop .text-side .paragraph .paragraph-text{color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .one-paragraph{width:100%}.value-prop .text-side .selected-paragraph .paragraph-text{color:#32353b}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.value-prop .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:38%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{width:100%;justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}.image-text-sort{flex-direction:row-reverse}@media only screen and (max-width: 56.25em){.image-text-sort:nth-child(even) .image-buttons-side{justify-self:center}}.text-image-sort{flex-direction:row}.paragraph-with-card .text-side .paragraph{padding:1rem;margin:1rem 0rem;border-radius:.7rem;border:.2rem solid rgba(50,53,59,.1);min-height:max-content;height:15rem}.paragraph-with-card .text-side .paragraph:hover{border:.2rem solid #32353b}.paragraph-with-card .text-side .paragraph .value-prop-icon{text-align:center}.paragraph-with-card .text-side .selected-paragraph{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph .paragraph-text{color:#32353b}.paragraph-with-card .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.paragraph-with-card .text-side .selected-paragraph:hover{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4}\n"] }]
|
|
518
|
+
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
519
|
+
type: Input
|
|
530
520
|
}] } });
|
|
531
521
|
|
|
532
|
-
class ChooseCountryWithFlagComponent {
|
|
533
|
-
constructor() {
|
|
534
|
-
this.change = new EventEmitter();
|
|
535
|
-
this.propagateChange = (_) => { };
|
|
536
|
-
this.propogateTouch = () => { };
|
|
537
|
-
}
|
|
538
|
-
ngOnInit() {
|
|
539
|
-
}
|
|
540
|
-
writeValue(value) {
|
|
541
|
-
this.selectedItem = value;
|
|
542
|
-
}
|
|
543
|
-
registerOnChange(fn) {
|
|
544
|
-
this.propagateChange = fn;
|
|
545
|
-
}
|
|
546
|
-
registerOnTouched(fn) {
|
|
547
|
-
this.propogateTouch = fn;
|
|
548
|
-
}
|
|
549
|
-
updateBlur() {
|
|
550
|
-
this.propogateTouch();
|
|
551
|
-
}
|
|
552
|
-
onSelectionChanged($event) {
|
|
553
|
-
this.propagateChange(this.selectedItem);
|
|
554
|
-
this.change.emit($event);
|
|
555
|
-
}
|
|
556
|
-
}
|
|
557
|
-
ChooseCountryWithFlagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
558
|
-
ChooseCountryWithFlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChooseCountryWithFlagComponent, selector: "choose-country-with-flag", inputs: { items: "items" }, outputs: { change: "change" }, providers: [
|
|
559
|
-
{
|
|
560
|
-
provide: NG_VALUE_ACCESSOR,
|
|
561
|
-
useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
|
|
562
|
-
multi: true
|
|
563
|
-
}
|
|
564
|
-
], ngImport: i0, template: "<div class=\"home\">\n <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\n bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n <div class=\"ng-value-label label-container\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n {{item.code2}}\n </div>\n <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\n \u00D7\n </span> -->\n </ng-template>\n <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n <span class=\"country-name\">\n {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\n </span>\n </ng-template>\n </ng-select>\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"], dependencies: [{ kind: "component", type:
|
|
565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, decorators: [{
|
|
566
|
-
type: Component,
|
|
567
|
-
args: [{ selector: 'choose-country-with-flag', providers: [
|
|
568
|
-
{
|
|
569
|
-
provide: NG_VALUE_ACCESSOR,
|
|
570
|
-
useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
|
|
571
|
-
multi: true
|
|
572
|
-
}
|
|
573
|
-
], template: "<div class=\"home\">\n <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\n bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n <div class=\"ng-value-label label-container\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n {{item.code2}}\n </div>\n <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\n \u00D7\n </span> -->\n </ng-template>\n <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n <span class=\"country-name\">\n {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\n </span>\n </ng-template>\n </ng-select>\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"] }]
|
|
574
|
-
}], ctorParameters: function () { return []; }, propDecorators: { items: [{
|
|
575
|
-
type: Input
|
|
576
|
-
}], change: [{
|
|
577
|
-
type: Output
|
|
522
|
+
class ChooseCountryWithFlagComponent {
|
|
523
|
+
constructor() {
|
|
524
|
+
this.change = new EventEmitter();
|
|
525
|
+
this.propagateChange = (_) => { };
|
|
526
|
+
this.propogateTouch = () => { };
|
|
527
|
+
}
|
|
528
|
+
ngOnInit() {
|
|
529
|
+
}
|
|
530
|
+
writeValue(value) {
|
|
531
|
+
this.selectedItem = value;
|
|
532
|
+
}
|
|
533
|
+
registerOnChange(fn) {
|
|
534
|
+
this.propagateChange = fn;
|
|
535
|
+
}
|
|
536
|
+
registerOnTouched(fn) {
|
|
537
|
+
this.propogateTouch = fn;
|
|
538
|
+
}
|
|
539
|
+
updateBlur() {
|
|
540
|
+
this.propogateTouch();
|
|
541
|
+
}
|
|
542
|
+
onSelectionChanged($event) {
|
|
543
|
+
this.propagateChange(this.selectedItem);
|
|
544
|
+
this.change.emit($event);
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
ChooseCountryWithFlagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
548
|
+
ChooseCountryWithFlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChooseCountryWithFlagComponent, selector: "choose-country-with-flag", inputs: { items: "items" }, outputs: { change: "change" }, providers: [
|
|
549
|
+
{
|
|
550
|
+
provide: NG_VALUE_ACCESSOR,
|
|
551
|
+
useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
|
|
552
|
+
multi: true
|
|
553
|
+
}
|
|
554
|
+
], ngImport: i0, template: "<div class=\"home\">\r\n <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\r\n bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <div class=\"ng-value-label label-container\">\r\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\r\n {{item.code2}}\r\n </div>\r\n <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n \u00D7\r\n </span> -->\r\n </ng-template>\r\n <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\r\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\r\n <span class=\"country-name\">\r\n {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"], dependencies: [{ kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }] });
|
|
555
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, decorators: [{
|
|
556
|
+
type: Component,
|
|
557
|
+
args: [{ selector: 'choose-country-with-flag', providers: [
|
|
558
|
+
{
|
|
559
|
+
provide: NG_VALUE_ACCESSOR,
|
|
560
|
+
useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
|
|
561
|
+
multi: true
|
|
562
|
+
}
|
|
563
|
+
], template: "<div class=\"home\">\r\n <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\r\n bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\r\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n <div class=\"ng-value-label label-container\">\r\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\r\n {{item.code2}}\r\n </div>\r\n <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n \u00D7\r\n </span> -->\r\n </ng-template>\r\n <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\r\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\r\n <span class=\"country-name\">\r\n {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\r\n </span>\r\n </ng-template>\r\n </ng-select>\r\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"] }]
|
|
564
|
+
}], ctorParameters: function () { return []; }, propDecorators: { items: [{
|
|
565
|
+
type: Input
|
|
566
|
+
}], change: [{
|
|
567
|
+
type: Output
|
|
578
568
|
}] } });
|
|
579
569
|
|
|
580
|
-
class ContactUsPageComponent {
|
|
581
|
-
constructor(dialog, breakpointObserver, fb) {
|
|
582
|
-
this.dialog = dialog;
|
|
583
|
-
this.breakpointObserver = breakpointObserver;
|
|
584
|
-
this.fb = fb;
|
|
585
|
-
this.subjects = [];
|
|
586
|
-
this.scrollMemberNumber = 2;
|
|
587
|
-
this.form = this.fb.group({
|
|
588
|
-
firstName: new FormControl(null),
|
|
589
|
-
lastName: new FormControl(null),
|
|
590
|
-
companyName: new FormControl(null),
|
|
591
|
-
email: new FormControl(null),
|
|
592
|
-
country: new FormControl(null),
|
|
593
|
-
phoneNumber: new FormControl(null),
|
|
594
|
-
subject: new FormControl(null),
|
|
595
|
-
message: new FormControl(null),
|
|
596
|
-
});
|
|
597
|
-
}
|
|
598
|
-
ngOnInit() {
|
|
599
|
-
this.setCurrentLocation();
|
|
600
|
-
this.breakpointObserver.observe([
|
|
601
|
-
"(max-width: 1200px) and (min-width:1076px)", "(max-width: 1075px) and (min-width:651px)",
|
|
602
|
-
"(max-width: 650px)"
|
|
603
|
-
]).subscribe((result) => {
|
|
604
|
-
if (result.breakpoints['(max-width: 1200px) and (min-width:1076px)']) {
|
|
605
|
-
this.isUnderTabRange = true;
|
|
606
|
-
this.isTabletSize = true;
|
|
607
|
-
this.membersToShow = 3;
|
|
608
|
-
this.scrollMemberNumber = 2;
|
|
609
|
-
}
|
|
610
|
-
else if (result.breakpoints['(max-width: 1075px) and (min-width:651px)']) {
|
|
611
|
-
this.isUnderTabRange = true;
|
|
612
|
-
this.membersToShow = 2;
|
|
613
|
-
this.scrollMemberNumber = 1;
|
|
614
|
-
this.isTabletSize = true;
|
|
615
|
-
}
|
|
616
|
-
else if (result.breakpoints['(max-width: 650px)']) {
|
|
617
|
-
this.isUnderTabRange = true;
|
|
618
|
-
this.membersToShow = 1;
|
|
619
|
-
this.scrollMemberNumber = 1;
|
|
620
|
-
this.isTabletSize = true;
|
|
621
|
-
}
|
|
622
|
-
else {
|
|
623
|
-
this.isTabletSize = false;
|
|
624
|
-
this.isUnderTabRange = false;
|
|
625
|
-
}
|
|
626
|
-
});
|
|
627
|
-
}
|
|
628
|
-
get firstName() {
|
|
629
|
-
return this.form.get('firstName');
|
|
630
|
-
}
|
|
631
|
-
get lastName() {
|
|
632
|
-
return this.form.get('lastName');
|
|
633
|
-
}
|
|
634
|
-
get companyName() {
|
|
635
|
-
return this.form.get('companyName');
|
|
636
|
-
}
|
|
637
|
-
get email() {
|
|
638
|
-
return this.form.get('email');
|
|
639
|
-
}
|
|
640
|
-
get country() {
|
|
641
|
-
return this.form.get('country');
|
|
642
|
-
}
|
|
643
|
-
get phoneNumber() {
|
|
644
|
-
return this.form.get('phoneNumber');
|
|
645
|
-
}
|
|
646
|
-
get subject() {
|
|
647
|
-
return this.form.get('subject');
|
|
648
|
-
}
|
|
649
|
-
get message() {
|
|
650
|
-
return this.form.get('message');
|
|
651
|
-
}
|
|
652
|
-
onClickSubmit() {
|
|
653
|
-
// this._ContactUsService.createContactUs(this.form.value).subscribe({
|
|
654
|
-
// next: (response) => {
|
|
655
|
-
// console.log("Contact Us Message Created", this.form.value);
|
|
656
|
-
// this.openDialog();
|
|
657
|
-
// },
|
|
658
|
-
// error: (error) => console.error("error", error)
|
|
659
|
-
// })
|
|
660
|
-
}
|
|
661
|
-
// Get Current Location Coordinates
|
|
662
|
-
setCurrentLocation() {
|
|
663
|
-
if ('geolocation' in navigator) {
|
|
664
|
-
navigator.geolocation.getCurrentPosition((position) => {
|
|
665
|
-
this.latitude = position.coords.latitude;
|
|
666
|
-
this.longitude = position.coords.longitude;
|
|
667
|
-
this.zoom = 15;
|
|
668
|
-
});
|
|
669
|
-
}
|
|
670
|
-
}
|
|
671
|
-
openDialog() {
|
|
672
|
-
const dialogRef = this.dialog.open(SuccessMessageDialogComponent);
|
|
673
|
-
dialogRef.afterClosed().subscribe(() => {
|
|
674
|
-
this.form.reset();
|
|
675
|
-
});
|
|
676
|
-
}
|
|
677
|
-
getSelectedOptionValue($event) {
|
|
678
|
-
this.selectedCode = $event.phone;
|
|
679
|
-
}
|
|
680
|
-
}
|
|
681
|
-
ContactUsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, deps: [{ token: i1$2.MatDialog }, { token: i1$1.BreakpointObserver }, { token: i3$
|
|
682
|
-
ContactUsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContactUsPageComponent, selector: "contact-us-page", inputs: { subjects: "subjects", contactUsPageData: "contactUsPageData", apiPath: "apiPath", items: "items" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"contact-us\">\n <div class=\"left-side\">\n <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\n <div class=\"img-title\">\n {{contactUsPageData.imageTitle}}\n </div>\n <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\n <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\n <div class=\"img-description\">{{contactUsPageData.imageDescription}}\n </div>\n <div class=\"social-media-icons\">\n <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\n </div>\n </div>\n </div>\n <div class=\"right-side\">\n <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\n <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\n <div class=\"content\">\n <div class=\"message-box\">\n <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\n <div class=\"full-name-area\">\n <div class=\"first-name\">\n <span class=\"fields-labels\">First Name*</span>\n <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\n </div>\n <div class=\"last-name\">\n <span class=\"fields-labels\">Last Name*</span>\n <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\n </div>\n </div>\n <span class=\"fields-labels\">Company Name*</span>\n <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\n <span class=\"fields-labels\">Email*</span>\n <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\n <span class=\"fields-labels\">Phone Number</span>\n <div class=\"phone-number-section\">\n\n <div class=\"countries-list\">\n <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\n </div>\n <span class=\"code-section\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\n </span>\n <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\n </div>\n <div class=\"subject\">\n <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\n </ng-select>\n </div>\n <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\n\n\n </textarea>\n <div class=\"actions\">\n <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\n Submit\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n <!-- <div class=\"our-locations-section\">\n <div class=\"locations-content\">\n <div class=\"headline\">\n {{contactUsPageData.locations.headline}}\n </div>\n <div class=\"title\">\n {{contactUsPageData.locations.title}}\n </div>\n <div class=\"lines-img\">\n <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\n </div>\n <div class=\"subtitle\">\n {{contactUsPageData.locations.subtitle}}\n </div>\n <div class=\"addresses\">\n <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\n <div class=\"address-header\">\n <div class=\"icon\">\n <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\n </div>\n <div class=\"location-name\">\n {{address.name}}\n </div>\n </div>\n <div class=\"building\">\n {{address.building}}\n </div>\n <div class=\"location-area\">\n {{address.locationArea}}\n </div>\n <div class=\"hours\">\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n {{address.hours}}\n </div>\n <div class=\"cellular-number\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n {{address.phoneNumber}}\n </div>\n </div>\n <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\n [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\n [circular]=\"true\">\n <ng-template let-address pTemplate=\"item\">\n <div class=\"address\">\n <div class=\"address-header\">\n <div class=\"icon\">\n <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\n </div>\n <div class=\"location-name\">\n {{address.name}}\n </div>\n </div>\n <div class=\"building\">\n {{address.building}}\n </div>\n <div class=\"location-area\">\n {{address.locationArea}}\n </div>\n <div class=\"hours\">\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n {{address.hours}}\n </div>\n <div class=\"cellular-number\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n {{address.phoneNumber}}\n </div>\n </div>\n </ng-template>\n </p-carousel>\n </div>\n </div>\n </div> -->\n</div>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;height:100%;position:relative;padding:2rem}.page .contact-us{box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:1.5rem;margin:auto;width:55%;height:100%;display:grid;grid-template-columns:50% 50%;box-sizing:border-box;margin:5rem auto 15rem}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .right-side{padding:2rem 4rem;display:grid;grid-template-rows:auto auto auto auto;row-gap:1rem}.page .contact-us .right-side .phone-number-section{position:relative;display:flex;gap:.5rem;margin:.5rem 0rem}.page .contact-us .right-side .phone-number-section .countries-list{width:30%}.page .contact-us .right-side .phone-number-section .code-section{width:15%;margin-right:0rem;align-self:center;color:#000;position:relative;display:flex}.page .contact-us .right-side .phone-number-section .code-section *{color:#838b91}.page .contact-us .right-side .phone-number-section .code{text-align:center;height:4rem;width:100%;padding-left:2rem;margin-right:0vh}.page .contact-us .right-side .phone-number-section .code::placeholder{padding-left:1rem}.page .contact-us .right-side .phone-number-section fa-icon{align-self:center;position:absolute;left:.5rem;z-index:2}.page .contact-us .right-side .phone-number-section .phone-num-input{width:55%;margin-right:0rem;height:4rem}.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-outer-spin-button,.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page .contact-us .right-side .title{font-weight:800;color:#3d3d3d}.page .contact-us .right-side .subtitle{font-weight:500;font-size:1.9rem;color:#3d3d3d;padding:1rem 0rem}.page .contact-us .right-side .content{display:grid;grid-template-rows:auto auto auto auto}.page .contact-us .right-side .content .message-box{grid-row:1/span 2}.page .contact-us .right-side .content .message-box .text-area{height:15rem;resize:none;border-radius:.5rem;border:rgb(190,188,188) .1rem solid}.page .contact-us .right-side .content .message-box .text-area::placeholder{font-weight:500;color:#9e9e9e;font-size:1.2rem}.page .contact-us .right-side .content .message-box .text-area:focus-visible{outline:none}.page .contact-us .right-side .content .message-box .actions{margin:1rem 0rem}.page .contact-us .right-side .content .message-box .actions button{background-color:#155ed4;font-weight:500;font-size:1.4rem;border-radius:.3rem}.page .contact-us .right-side .content .message-box .input,.page .contact-us .right-side .content .message-box textarea{margin:1rem 0rem;width:100%;background-color:#fff}.page .contact-us .left-side{height:100%;position:relative;color:#fff}.page .contact-us .left-side .img-title{position:absolute;top:5%;left:calc(2% + 2rem);font-weight:700;font-size:3.6rem}.page .contact-us .left-side .bottom-img-side{position:absolute;top:75%;left:calc(2% + 2rem);margin:2rem 9rem 0rem 0rem}.page .contact-us .left-side .bottom-img-side .logo{width:20rem;height:4rem}.page .contact-us .left-side .bottom-img-side .logo img{width:10rem;height:4rem}.page .contact-us .left-side .bottom-img-side .img-description{margin-top:2rem}.page .contact-us .left-side .bg-image{width:100%;height:100%;border-radius:1.5rem 0rem 0rem 1.5rem}@media only screen and (max-width: 75em){.page .contact-us .left-side .bg-image{border-radius:1.5rem}}.page .carousel{display:none}.page .flexy{display:flex}.page .our-locations-section{width:100%;background-color:#26518b;padding:1.5rem;color:#fff}.page .our-locations-section .locations-content{width:95%;margin:auto}.page .our-locations-section .locations-content .headline{font-weight:500;font-size:2rem}.page .our-locations-section .locations-content .title{font-weight:700;padding:1rem 0rem;font-size:4rem}.page .our-locations-section .locations-content .subtitle{font-weight:500;padding:1rem 0rem}.page .our-locations-section .locations-content .lines-img{padding:1rem 0rem}.page .our-locations-section .locations-content .addresses{width:100%;display:flex;flex-direction:row;column-gap:2%}.page .our-locations-section .locations-content .addresses .address{flex-direction:column;row-gap:.7rem;width:22%;padding:1.5rem 0rem}.page .our-locations-section .locations-content .addresses .address .address-header{display:flex;flex-direction:column;row-gap:.7rem}.page .our-locations-section .locations-content .addresses .address .address-header img{width:3rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:1.9rem;font-weight:500}.page .our-locations-section .locations-content .addresses .address .location-area{width:95%}@media only screen and (min-width: 112.5em){.page .title{font-size:4.5rem}.page .contact-us{width:65%}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100%}}@media only screen and (max-width: 112.5em){.page .contact-us{width:75%;box-sizing:border-box}.page .contact-us .title{font-size:3.4rem}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100rem;border-radius:0rem 1.5rem 1.5rem 0rem}}@media only screen and (max-width: 112.5em) and (max-width: 1350px){.page .contact-us{width:80%}}@media only screen and (max-width: 112.5em) and (max-width: 1280px){.page .contact-us{width:86%}}@media only screen and (max-width: 1401px) and (min-width: 1201px){.page .our-locations-section .locations-content{width:auto}}@media only screen and (max-width: 75em){.page .contact-us{display:flex;flex-direction:column;top:3vh;width:100%;height:107rem;padding:5vh 2rem 10vh 2rem}.page .contact-us .right-side{padding:3rem 2rem;display:flex;flex-direction:column;height:80%}.page .contact-us .right-side .mat-mdc-card-content{display:block;padding:0 .2rem}.page .contact-us .left-side{height:25%}.page .contact-us .left-side .img-title{color:#fff}.page .contact-us .left-side img{height:100%;object-position:0rem -13rem;border-radius:1.5rem}.page .carousel{display:block;width:100%}.page .flexy{display:none}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{font-size:1.8rem;width:31rem;margin:auto;text-align:center;background-color:#fff;color:#26518b;height:27rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2rem;margin-bottom:1rem}.page .mat-mdc-card{box-shadow:none}}@media only screen and (max-width: 37.5em){.page .contact-us{height:auto;padding:5vh 2rem 0vh 2rem}.page .contact-us .full-name-area{display:block}.page .contact-us .first-name,.page .contact-us .last-name{width:100%}.page .contact-us .left-side{height:12rem}.page .contact-us .left-side .img-title{font-weight:600;font-size:3rem}.page .contact-us .left-side img{object-position:0rem -5rem}.page .contact-us .right-side .phone-number-section{flex-wrap:wrap}.page .contact-us .right-side .phone-number-section .countries-list{width:100%}.page .contact-us .right-side .phone-number-section .code-section{width:9rem}.page .contact-us .right-side .phone-number-section .phone-num-input{width:calc(100% - 9.5rem)}.page .our-locations-section .locations-content .addresses .address{width:27rem}}@media only screen and (max-width: 400px){.page .contact-us .left-side{height:10rem}.page .contact-us .left-side .img-title{font-weight:500;font-size:2.6rem}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{width:24.5rem;height:28rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2.2rem;margin-bottom:1rem;padding:0rem .4rem}.page .our-locations-section .locations-content .addresses .address .building,.page .our-locations-section .locations-content .addresses .address .location-area{padding:0rem .4rem}}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus{outline:0 none;box-shadow:0 0 0 .2rem transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next{width:4rem;height:4rem;background-color:transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-icon{color:#fff;width:2rem;height:2rem}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#fff;width:2.7rem;transition:all ease-in-out .1s}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem;transition:all ease-in-out .5s}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }, { kind: "component", type: ChooseCountryWithFlagComponent, selector: "choose-country-with-flag", inputs: ["items"], outputs: ["change"] }] });
|
|
683
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, decorators: [{
|
|
684
|
-
type: Component,
|
|
685
|
-
args: [{ selector: 'contact-us-page', template: "<div class=\"page\">\n <div class=\"contact-us\">\n <div class=\"left-side\">\n <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\n <div class=\"img-title\">\n {{contactUsPageData.imageTitle}}\n </div>\n <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\n <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\n <div class=\"img-description\">{{contactUsPageData.imageDescription}}\n </div>\n <div class=\"social-media-icons\">\n <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\n </div>\n </div>\n </div>\n <div class=\"right-side\">\n <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\n <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\n <div class=\"content\">\n <div class=\"message-box\">\n <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\n <div class=\"full-name-area\">\n <div class=\"first-name\">\n <span class=\"fields-labels\">First Name*</span>\n <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\n </div>\n <div class=\"last-name\">\n <span class=\"fields-labels\">Last Name*</span>\n <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\n </div>\n </div>\n <span class=\"fields-labels\">Company Name*</span>\n <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\n <span class=\"fields-labels\">Email*</span>\n <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\n <span class=\"fields-labels\">Phone Number</span>\n <div class=\"phone-number-section\">\n\n <div class=\"countries-list\">\n <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\n </div>\n <span class=\"code-section\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\n </span>\n <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\n </div>\n <div class=\"subject\">\n <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\n </ng-select>\n </div>\n <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\n\n\n </textarea>\n <div class=\"actions\">\n <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\n Submit\n </button>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n <!-- <div class=\"our-locations-section\">\n <div class=\"locations-content\">\n <div class=\"headline\">\n {{contactUsPageData.locations.headline}}\n </div>\n <div class=\"title\">\n {{contactUsPageData.locations.title}}\n </div>\n <div class=\"lines-img\">\n <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\n </div>\n <div class=\"subtitle\">\n {{contactUsPageData.locations.subtitle}}\n </div>\n <div class=\"addresses\">\n <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\n <div class=\"address-header\">\n <div class=\"icon\">\n <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\n </div>\n <div class=\"location-name\">\n {{address.name}}\n </div>\n </div>\n <div class=\"building\">\n {{address.building}}\n </div>\n <div class=\"location-area\">\n {{address.locationArea}}\n </div>\n <div class=\"hours\">\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n {{address.hours}}\n </div>\n <div class=\"cellular-number\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n {{address.phoneNumber}}\n </div>\n </div>\n <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\n [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\n [circular]=\"true\">\n <ng-template let-address pTemplate=\"item\">\n <div class=\"address\">\n <div class=\"address-header\">\n <div class=\"icon\">\n <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\n </div>\n <div class=\"location-name\">\n {{address.name}}\n </div>\n </div>\n <div class=\"building\">\n {{address.building}}\n </div>\n <div class=\"location-area\">\n {{address.locationArea}}\n </div>\n <div class=\"hours\">\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\n {{address.hours}}\n </div>\n <div class=\"cellular-number\">\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\n {{address.phoneNumber}}\n </div>\n </div>\n </ng-template>\n </p-carousel>\n </div>\n </div>\n </div> -->\n</div>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;height:100%;position:relative;padding:2rem}.page .contact-us{box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:1.5rem;margin:auto;width:55%;height:100%;display:grid;grid-template-columns:50% 50%;box-sizing:border-box;margin:5rem auto 15rem}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .right-side{padding:2rem 4rem;display:grid;grid-template-rows:auto auto auto auto;row-gap:1rem}.page .contact-us .right-side .phone-number-section{position:relative;display:flex;gap:.5rem;margin:.5rem 0rem}.page .contact-us .right-side .phone-number-section .countries-list{width:30%}.page .contact-us .right-side .phone-number-section .code-section{width:15%;margin-right:0rem;align-self:center;color:#000;position:relative;display:flex}.page .contact-us .right-side .phone-number-section .code-section *{color:#838b91}.page .contact-us .right-side .phone-number-section .code{text-align:center;height:4rem;width:100%;padding-left:2rem;margin-right:0vh}.page .contact-us .right-side .phone-number-section .code::placeholder{padding-left:1rem}.page .contact-us .right-side .phone-number-section fa-icon{align-self:center;position:absolute;left:.5rem;z-index:2}.page .contact-us .right-side .phone-number-section .phone-num-input{width:55%;margin-right:0rem;height:4rem}.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-outer-spin-button,.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page .contact-us .right-side .title{font-weight:800;color:#3d3d3d}.page .contact-us .right-side .subtitle{font-weight:500;font-size:1.9rem;color:#3d3d3d;padding:1rem 0rem}.page .contact-us .right-side .content{display:grid;grid-template-rows:auto auto auto auto}.page .contact-us .right-side .content .message-box{grid-row:1/span 2}.page .contact-us .right-side .content .message-box .text-area{height:15rem;resize:none;border-radius:.5rem;border:rgb(190,188,188) .1rem solid}.page .contact-us .right-side .content .message-box .text-area::placeholder{font-weight:500;color:#9e9e9e;font-size:1.2rem}.page .contact-us .right-side .content .message-box .text-area:focus-visible{outline:none}.page .contact-us .right-side .content .message-box .actions{margin:1rem 0rem}.page .contact-us .right-side .content .message-box .actions button{background-color:#155ed4;font-weight:500;font-size:1.4rem;border-radius:.3rem}.page .contact-us .right-side .content .message-box .input,.page .contact-us .right-side .content .message-box textarea{margin:1rem 0rem;width:100%;background-color:#fff}.page .contact-us .left-side{height:100%;position:relative;color:#fff}.page .contact-us .left-side .img-title{position:absolute;top:5%;left:calc(2% + 2rem);font-weight:700;font-size:3.6rem}.page .contact-us .left-side .bottom-img-side{position:absolute;top:75%;left:calc(2% + 2rem);margin:2rem 9rem 0rem 0rem}.page .contact-us .left-side .bottom-img-side .logo{width:20rem;height:4rem}.page .contact-us .left-side .bottom-img-side .logo img{width:10rem;height:4rem}.page .contact-us .left-side .bottom-img-side .img-description{margin-top:2rem}.page .contact-us .left-side .bg-image{width:100%;height:100%;border-radius:1.5rem 0rem 0rem 1.5rem}@media only screen and (max-width: 75em){.page .contact-us .left-side .bg-image{border-radius:1.5rem}}.page .carousel{display:none}.page .flexy{display:flex}.page .our-locations-section{width:100%;background-color:#26518b;padding:1.5rem;color:#fff}.page .our-locations-section .locations-content{width:95%;margin:auto}.page .our-locations-section .locations-content .headline{font-weight:500;font-size:2rem}.page .our-locations-section .locations-content .title{font-weight:700;padding:1rem 0rem;font-size:4rem}.page .our-locations-section .locations-content .subtitle{font-weight:500;padding:1rem 0rem}.page .our-locations-section .locations-content .lines-img{padding:1rem 0rem}.page .our-locations-section .locations-content .addresses{width:100%;display:flex;flex-direction:row;column-gap:2%}.page .our-locations-section .locations-content .addresses .address{flex-direction:column;row-gap:.7rem;width:22%;padding:1.5rem 0rem}.page .our-locations-section .locations-content .addresses .address .address-header{display:flex;flex-direction:column;row-gap:.7rem}.page .our-locations-section .locations-content .addresses .address .address-header img{width:3rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:1.9rem;font-weight:500}.page .our-locations-section .locations-content .addresses .address .location-area{width:95%}@media only screen and (min-width: 112.5em){.page .title{font-size:4.5rem}.page .contact-us{width:65%}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100%}}@media only screen and (max-width: 112.5em){.page .contact-us{width:75%;box-sizing:border-box}.page .contact-us .title{font-size:3.4rem}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100rem;border-radius:0rem 1.5rem 1.5rem 0rem}}@media only screen and (max-width: 112.5em) and (max-width: 1350px){.page .contact-us{width:80%}}@media only screen and (max-width: 112.5em) and (max-width: 1280px){.page .contact-us{width:86%}}@media only screen and (max-width: 1401px) and (min-width: 1201px){.page .our-locations-section .locations-content{width:auto}}@media only screen and (max-width: 75em){.page .contact-us{display:flex;flex-direction:column;top:3vh;width:100%;height:107rem;padding:5vh 2rem 10vh 2rem}.page .contact-us .right-side{padding:3rem 2rem;display:flex;flex-direction:column;height:80%}.page .contact-us .right-side .mat-mdc-card-content{display:block;padding:0 .2rem}.page .contact-us .left-side{height:25%}.page .contact-us .left-side .img-title{color:#fff}.page .contact-us .left-side img{height:100%;object-position:0rem -13rem;border-radius:1.5rem}.page .carousel{display:block;width:100%}.page .flexy{display:none}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{font-size:1.8rem;width:31rem;margin:auto;text-align:center;background-color:#fff;color:#26518b;height:27rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2rem;margin-bottom:1rem}.page .mat-mdc-card{box-shadow:none}}@media only screen and (max-width: 37.5em){.page .contact-us{height:auto;padding:5vh 2rem 0vh 2rem}.page .contact-us .full-name-area{display:block}.page .contact-us .first-name,.page .contact-us .last-name{width:100%}.page .contact-us .left-side{height:12rem}.page .contact-us .left-side .img-title{font-weight:600;font-size:3rem}.page .contact-us .left-side img{object-position:0rem -5rem}.page .contact-us .right-side .phone-number-section{flex-wrap:wrap}.page .contact-us .right-side .phone-number-section .countries-list{width:100%}.page .contact-us .right-side .phone-number-section .code-section{width:9rem}.page .contact-us .right-side .phone-number-section .phone-num-input{width:calc(100% - 9.5rem)}.page .our-locations-section .locations-content .addresses .address{width:27rem}}@media only screen and (max-width: 400px){.page .contact-us .left-side{height:10rem}.page .contact-us .left-side .img-title{font-weight:500;font-size:2.6rem}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{width:24.5rem;height:28rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2.2rem;margin-bottom:1rem;padding:0rem .4rem}.page .our-locations-section .locations-content .addresses .address .building,.page .our-locations-section .locations-content .addresses .address .location-area{padding:0rem .4rem}}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus{outline:0 none;box-shadow:0 0 0 .2rem transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next{width:4rem;height:4rem;background-color:transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-icon{color:#fff;width:2rem;height:2rem}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#fff;width:2.7rem;transition:all ease-in-out .1s}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem;transition:all ease-in-out .5s}\n"] }]
|
|
686
|
-
}], ctorParameters: function () { return [{ type: i1$2.MatDialog }, { type: i1$1.BreakpointObserver }, { type: i3$
|
|
687
|
-
type: Input
|
|
688
|
-
}], contactUsPageData: [{
|
|
689
|
-
type: Input
|
|
690
|
-
}], apiPath: [{
|
|
691
|
-
type: Input
|
|
692
|
-
}], items: [{
|
|
693
|
-
type: Input
|
|
570
|
+
class ContactUsPageComponent {
|
|
571
|
+
constructor(dialog, breakpointObserver, fb) {
|
|
572
|
+
this.dialog = dialog;
|
|
573
|
+
this.breakpointObserver = breakpointObserver;
|
|
574
|
+
this.fb = fb;
|
|
575
|
+
this.subjects = [];
|
|
576
|
+
this.scrollMemberNumber = 2;
|
|
577
|
+
this.form = this.fb.group({
|
|
578
|
+
firstName: new FormControl(null),
|
|
579
|
+
lastName: new FormControl(null),
|
|
580
|
+
companyName: new FormControl(null),
|
|
581
|
+
email: new FormControl(null),
|
|
582
|
+
country: new FormControl(null),
|
|
583
|
+
phoneNumber: new FormControl(null),
|
|
584
|
+
subject: new FormControl(null),
|
|
585
|
+
message: new FormControl(null),
|
|
586
|
+
});
|
|
587
|
+
}
|
|
588
|
+
ngOnInit() {
|
|
589
|
+
this.setCurrentLocation();
|
|
590
|
+
this.breakpointObserver.observe([
|
|
591
|
+
"(max-width: 1200px) and (min-width:1076px)", "(max-width: 1075px) and (min-width:651px)",
|
|
592
|
+
"(max-width: 650px)"
|
|
593
|
+
]).subscribe((result) => {
|
|
594
|
+
if (result.breakpoints['(max-width: 1200px) and (min-width:1076px)']) {
|
|
595
|
+
this.isUnderTabRange = true;
|
|
596
|
+
this.isTabletSize = true;
|
|
597
|
+
this.membersToShow = 3;
|
|
598
|
+
this.scrollMemberNumber = 2;
|
|
599
|
+
}
|
|
600
|
+
else if (result.breakpoints['(max-width: 1075px) and (min-width:651px)']) {
|
|
601
|
+
this.isUnderTabRange = true;
|
|
602
|
+
this.membersToShow = 2;
|
|
603
|
+
this.scrollMemberNumber = 1;
|
|
604
|
+
this.isTabletSize = true;
|
|
605
|
+
}
|
|
606
|
+
else if (result.breakpoints['(max-width: 650px)']) {
|
|
607
|
+
this.isUnderTabRange = true;
|
|
608
|
+
this.membersToShow = 1;
|
|
609
|
+
this.scrollMemberNumber = 1;
|
|
610
|
+
this.isTabletSize = true;
|
|
611
|
+
}
|
|
612
|
+
else {
|
|
613
|
+
this.isTabletSize = false;
|
|
614
|
+
this.isUnderTabRange = false;
|
|
615
|
+
}
|
|
616
|
+
});
|
|
617
|
+
}
|
|
618
|
+
get firstName() {
|
|
619
|
+
return this.form.get('firstName');
|
|
620
|
+
}
|
|
621
|
+
get lastName() {
|
|
622
|
+
return this.form.get('lastName');
|
|
623
|
+
}
|
|
624
|
+
get companyName() {
|
|
625
|
+
return this.form.get('companyName');
|
|
626
|
+
}
|
|
627
|
+
get email() {
|
|
628
|
+
return this.form.get('email');
|
|
629
|
+
}
|
|
630
|
+
get country() {
|
|
631
|
+
return this.form.get('country');
|
|
632
|
+
}
|
|
633
|
+
get phoneNumber() {
|
|
634
|
+
return this.form.get('phoneNumber');
|
|
635
|
+
}
|
|
636
|
+
get subject() {
|
|
637
|
+
return this.form.get('subject');
|
|
638
|
+
}
|
|
639
|
+
get message() {
|
|
640
|
+
return this.form.get('message');
|
|
641
|
+
}
|
|
642
|
+
onClickSubmit() {
|
|
643
|
+
// this._ContactUsService.createContactUs(this.form.value).subscribe({
|
|
644
|
+
// next: (response) => {
|
|
645
|
+
// console.log("Contact Us Message Created", this.form.value);
|
|
646
|
+
// this.openDialog();
|
|
647
|
+
// },
|
|
648
|
+
// error: (error) => console.error("error", error)
|
|
649
|
+
// })
|
|
650
|
+
}
|
|
651
|
+
// Get Current Location Coordinates
|
|
652
|
+
setCurrentLocation() {
|
|
653
|
+
if ('geolocation' in navigator) {
|
|
654
|
+
navigator.geolocation.getCurrentPosition((position) => {
|
|
655
|
+
this.latitude = position.coords.latitude;
|
|
656
|
+
this.longitude = position.coords.longitude;
|
|
657
|
+
this.zoom = 15;
|
|
658
|
+
});
|
|
659
|
+
}
|
|
660
|
+
}
|
|
661
|
+
openDialog() {
|
|
662
|
+
const dialogRef = this.dialog.open(SuccessMessageDialogComponent);
|
|
663
|
+
dialogRef.afterClosed().subscribe(() => {
|
|
664
|
+
this.form.reset();
|
|
665
|
+
});
|
|
666
|
+
}
|
|
667
|
+
getSelectedOptionValue($event) {
|
|
668
|
+
this.selectedCode = $event.phone;
|
|
669
|
+
}
|
|
670
|
+
}
|
|
671
|
+
ContactUsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, deps: [{ token: i1$2.MatDialog }, { token: i1$1.BreakpointObserver }, { token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
672
|
+
ContactUsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContactUsPageComponent, selector: "contact-us-page", inputs: { subjects: "subjects", contactUsPageData: "contactUsPageData", apiPath: "apiPath", items: "items" }, ngImport: i0, template: "<div class=\"page\">\r\n <div class=\"contact-us\">\r\n <div class=\"left-side\">\r\n <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\r\n <div class=\"img-title\">\r\n {{contactUsPageData.imageTitle}}\r\n </div>\r\n <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\r\n <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\r\n <div class=\"img-description\">{{contactUsPageData.imageDescription}}\r\n </div>\r\n <div class=\"social-media-icons\">\r\n <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-side\">\r\n <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\r\n <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\r\n <div class=\"content\">\r\n <div class=\"message-box\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\r\n <div class=\"full-name-area\">\r\n <div class=\"first-name\">\r\n <span class=\"fields-labels\">First Name*</span>\r\n <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\r\n </div>\r\n <div class=\"last-name\">\r\n <span class=\"fields-labels\">Last Name*</span>\r\n <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\r\n </div>\r\n </div>\r\n <span class=\"fields-labels\">Company Name*</span>\r\n <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\r\n <span class=\"fields-labels\">Email*</span>\r\n <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\r\n <span class=\"fields-labels\">Phone Number</span>\r\n <div class=\"phone-number-section\">\r\n\r\n <div class=\"countries-list\">\r\n <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\r\n </div>\r\n <span class=\"code-section\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\r\n </span>\r\n <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\r\n </div>\r\n <div class=\"subject\">\r\n <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\r\n </ng-select>\r\n </div>\r\n <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\r\n\r\n\r\n </textarea>\r\n <div class=\"actions\">\r\n <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\r\n Submit\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"our-locations-section\">\r\n <div class=\"locations-content\">\r\n <div class=\"headline\">\r\n {{contactUsPageData.locations.headline}}\r\n </div>\r\n <div class=\"title\">\r\n {{contactUsPageData.locations.title}}\r\n </div>\r\n <div class=\"lines-img\">\r\n <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{contactUsPageData.locations.subtitle}}\r\n </div>\r\n <div class=\"addresses\">\r\n <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\r\n <div class=\"address-header\">\r\n <div class=\"icon\">\r\n <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\r\n </div>\r\n <div class=\"location-name\">\r\n {{address.name}}\r\n </div>\r\n </div>\r\n <div class=\"building\">\r\n {{address.building}}\r\n </div>\r\n <div class=\"location-area\">\r\n {{address.locationArea}}\r\n </div>\r\n <div class=\"hours\">\r\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n {{address.hours}}\r\n </div>\r\n <div class=\"cellular-number\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n {{address.phoneNumber}}\r\n </div>\r\n </div>\r\n <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\r\n [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\r\n [circular]=\"true\">\r\n <ng-template let-address pTemplate=\"item\">\r\n <div class=\"address\">\r\n <div class=\"address-header\">\r\n <div class=\"icon\">\r\n <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\r\n </div>\r\n <div class=\"location-name\">\r\n {{address.name}}\r\n </div>\r\n </div>\r\n <div class=\"building\">\r\n {{address.building}}\r\n </div>\r\n <div class=\"location-area\">\r\n {{address.locationArea}}\r\n </div>\r\n <div class=\"hours\">\r\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n {{address.hours}}\r\n </div>\r\n <div class=\"cellular-number\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n {{address.phoneNumber}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n </div>\r\n </div> -->\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;height:100%;position:relative;padding:2rem}.page .contact-us{box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:1.5rem;margin:auto;width:55%;height:100%;display:grid;grid-template-columns:50% 50%;box-sizing:border-box;margin:5rem auto 15rem}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .right-side{padding:2rem 4rem;display:grid;grid-template-rows:auto auto auto auto;row-gap:1rem}.page .contact-us .right-side .phone-number-section{position:relative;display:flex;gap:.5rem;margin:.5rem 0rem}.page .contact-us .right-side .phone-number-section .countries-list{width:30%}.page .contact-us .right-side .phone-number-section .code-section{width:15%;margin-right:0rem;align-self:center;color:#000;position:relative;display:flex}.page .contact-us .right-side .phone-number-section .code-section *{color:#838b91}.page .contact-us .right-side .phone-number-section .code{text-align:center;height:4rem;width:100%;padding-left:2rem;margin-right:0vh}.page .contact-us .right-side .phone-number-section .code::placeholder{padding-left:1rem}.page .contact-us .right-side .phone-number-section fa-icon{align-self:center;position:absolute;left:.5rem;z-index:2}.page .contact-us .right-side .phone-number-section .phone-num-input{width:55%;margin-right:0rem;height:4rem}.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-outer-spin-button,.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page .contact-us .right-side .title{font-weight:800;color:#3d3d3d}.page .contact-us .right-side .subtitle{font-weight:500;font-size:1.9rem;color:#3d3d3d;padding:1rem 0rem}.page .contact-us .right-side .content{display:grid;grid-template-rows:auto auto auto auto}.page .contact-us .right-side .content .message-box{grid-row:1/span 2}.page .contact-us .right-side .content .message-box .text-area{height:15rem;resize:none;border-radius:.5rem;border:rgb(190,188,188) .1rem solid}.page .contact-us .right-side .content .message-box .text-area::placeholder{font-weight:500;color:#9e9e9e;font-size:1.2rem}.page .contact-us .right-side .content .message-box .text-area:focus-visible{outline:none}.page .contact-us .right-side .content .message-box .actions{margin:1rem 0rem}.page .contact-us .right-side .content .message-box .actions button{background-color:#155ed4;font-weight:500;font-size:1.4rem;border-radius:.3rem}.page .contact-us .right-side .content .message-box .input,.page .contact-us .right-side .content .message-box textarea{margin:1rem 0rem;width:100%;background-color:#fff}.page .contact-us .left-side{height:100%;position:relative;color:#fff}.page .contact-us .left-side .img-title{position:absolute;top:5%;left:calc(2% + 2rem);font-weight:700;font-size:3.6rem}.page .contact-us .left-side .bottom-img-side{position:absolute;top:75%;left:calc(2% + 2rem);margin:2rem 9rem 0rem 0rem}.page .contact-us .left-side .bottom-img-side .logo{width:20rem;height:4rem}.page .contact-us .left-side .bottom-img-side .logo img{width:10rem;height:4rem}.page .contact-us .left-side .bottom-img-side .img-description{margin-top:2rem}.page .contact-us .left-side .bg-image{width:100%;height:100%;border-radius:1.5rem 0rem 0rem 1.5rem}@media only screen and (max-width: 75em){.page .contact-us .left-side .bg-image{border-radius:1.5rem}}.page .carousel{display:none}.page .flexy{display:flex}.page .our-locations-section{width:100%;background-color:#26518b;padding:1.5rem;color:#fff}.page .our-locations-section .locations-content{width:95%;margin:auto}.page .our-locations-section .locations-content .headline{font-weight:500;font-size:2rem}.page .our-locations-section .locations-content .title{font-weight:700;padding:1rem 0rem;font-size:4rem}.page .our-locations-section .locations-content .subtitle{font-weight:500;padding:1rem 0rem}.page .our-locations-section .locations-content .lines-img{padding:1rem 0rem}.page .our-locations-section .locations-content .addresses{width:100%;display:flex;flex-direction:row;column-gap:2%}.page .our-locations-section .locations-content .addresses .address{flex-direction:column;row-gap:.7rem;width:22%;padding:1.5rem 0rem}.page .our-locations-section .locations-content .addresses .address .address-header{display:flex;flex-direction:column;row-gap:.7rem}.page .our-locations-section .locations-content .addresses .address .address-header img{width:3rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:1.9rem;font-weight:500}.page .our-locations-section .locations-content .addresses .address .location-area{width:95%}@media only screen and (min-width: 112.5em){.page .title{font-size:4.5rem}.page .contact-us{width:65%}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100%}}@media only screen and (max-width: 112.5em){.page .contact-us{width:75%;box-sizing:border-box}.page .contact-us .title{font-size:3.4rem}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100rem;border-radius:0rem 1.5rem 1.5rem 0rem}}@media only screen and (max-width: 112.5em) and (max-width: 1350px){.page .contact-us{width:80%}}@media only screen and (max-width: 112.5em) and (max-width: 1280px){.page .contact-us{width:86%}}@media only screen and (max-width: 1401px) and (min-width: 1201px){.page .our-locations-section .locations-content{width:auto}}@media only screen and (max-width: 75em){.page .contact-us{display:flex;flex-direction:column;top:3vh;width:100%;height:107rem;padding:5vh 2rem 10vh 2rem}.page .contact-us .right-side{padding:3rem 2rem;display:flex;flex-direction:column;height:80%}.page .contact-us .right-side .mat-mdc-card-content{display:block;padding:0 .2rem}.page .contact-us .left-side{height:25%}.page .contact-us .left-side .img-title{color:#fff}.page .contact-us .left-side img{height:100%;object-position:0rem -13rem;border-radius:1.5rem}.page .carousel{display:block;width:100%}.page .flexy{display:none}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{font-size:1.8rem;width:31rem;margin:auto;text-align:center;background-color:#fff;color:#26518b;height:27rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2rem;margin-bottom:1rem}.page .mat-mdc-card{box-shadow:none}}@media only screen and (max-width: 37.5em){.page .contact-us{height:auto;padding:5vh 2rem 0vh 2rem}.page .contact-us .full-name-area{display:block}.page .contact-us .first-name,.page .contact-us .last-name{width:100%}.page .contact-us .left-side{height:12rem}.page .contact-us .left-side .img-title{font-weight:600;font-size:3rem}.page .contact-us .left-side img{object-position:0rem -5rem}.page .contact-us .right-side .phone-number-section{flex-wrap:wrap}.page .contact-us .right-side .phone-number-section .countries-list{width:100%}.page .contact-us .right-side .phone-number-section .code-section{width:9rem}.page .contact-us .right-side .phone-number-section .phone-num-input{width:calc(100% - 9.5rem)}.page .our-locations-section .locations-content .addresses .address{width:27rem}}@media only screen and (max-width: 400px){.page .contact-us .left-side{height:10rem}.page .contact-us .left-side .img-title{font-weight:500;font-size:2.6rem}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{width:24.5rem;height:28rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2.2rem;margin-bottom:1rem;padding:0rem .4rem}.page .our-locations-section .locations-content .addresses .address .building,.page .our-locations-section .locations-content .addresses .address .location-area{padding:0rem .4rem}}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus{outline:0 none;box-shadow:0 0 0 .2rem transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next{width:4rem;height:4rem;background-color:transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-icon{color:#fff;width:2rem;height:2rem}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#fff;width:2.7rem;transition:all ease-in-out .1s}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem;transition:all ease-in-out .5s}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }, { kind: "component", type: ChooseCountryWithFlagComponent, selector: "choose-country-with-flag", inputs: ["items"], outputs: ["change"] }] });
|
|
673
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, decorators: [{
|
|
674
|
+
type: Component,
|
|
675
|
+
args: [{ selector: 'contact-us-page', template: "<div class=\"page\">\r\n <div class=\"contact-us\">\r\n <div class=\"left-side\">\r\n <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\r\n <div class=\"img-title\">\r\n {{contactUsPageData.imageTitle}}\r\n </div>\r\n <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\r\n <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\r\n <div class=\"img-description\">{{contactUsPageData.imageDescription}}\r\n </div>\r\n <div class=\"social-media-icons\">\r\n <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-side\">\r\n <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\r\n <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\r\n <div class=\"content\">\r\n <div class=\"message-box\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\r\n <div class=\"full-name-area\">\r\n <div class=\"first-name\">\r\n <span class=\"fields-labels\">First Name*</span>\r\n <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\r\n </div>\r\n <div class=\"last-name\">\r\n <span class=\"fields-labels\">Last Name*</span>\r\n <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\r\n </div>\r\n </div>\r\n <span class=\"fields-labels\">Company Name*</span>\r\n <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\r\n <span class=\"fields-labels\">Email*</span>\r\n <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\r\n <span class=\"fields-labels\">Phone Number</span>\r\n <div class=\"phone-number-section\">\r\n\r\n <div class=\"countries-list\">\r\n <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\r\n </div>\r\n <span class=\"code-section\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\r\n </span>\r\n <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\r\n </div>\r\n <div class=\"subject\">\r\n <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\r\n </ng-select>\r\n </div>\r\n <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\r\n\r\n\r\n </textarea>\r\n <div class=\"actions\">\r\n <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\r\n Submit\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"our-locations-section\">\r\n <div class=\"locations-content\">\r\n <div class=\"headline\">\r\n {{contactUsPageData.locations.headline}}\r\n </div>\r\n <div class=\"title\">\r\n {{contactUsPageData.locations.title}}\r\n </div>\r\n <div class=\"lines-img\">\r\n <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{contactUsPageData.locations.subtitle}}\r\n </div>\r\n <div class=\"addresses\">\r\n <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\r\n <div class=\"address-header\">\r\n <div class=\"icon\">\r\n <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\r\n </div>\r\n <div class=\"location-name\">\r\n {{address.name}}\r\n </div>\r\n </div>\r\n <div class=\"building\">\r\n {{address.building}}\r\n </div>\r\n <div class=\"location-area\">\r\n {{address.locationArea}}\r\n </div>\r\n <div class=\"hours\">\r\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n {{address.hours}}\r\n </div>\r\n <div class=\"cellular-number\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n {{address.phoneNumber}}\r\n </div>\r\n </div>\r\n <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\r\n [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\r\n [circular]=\"true\">\r\n <ng-template let-address pTemplate=\"item\">\r\n <div class=\"address\">\r\n <div class=\"address-header\">\r\n <div class=\"icon\">\r\n <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\r\n </div>\r\n <div class=\"location-name\">\r\n {{address.name}}\r\n </div>\r\n </div>\r\n <div class=\"building\">\r\n {{address.building}}\r\n </div>\r\n <div class=\"location-area\">\r\n {{address.locationArea}}\r\n </div>\r\n <div class=\"hours\">\r\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n {{address.hours}}\r\n </div>\r\n <div class=\"cellular-number\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n {{address.phoneNumber}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n </div>\r\n </div> -->\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;height:100%;position:relative;padding:2rem}.page .contact-us{box-shadow:#0000001f .1rem .3rem,#0000003d 0 .1rem .2rem;border-radius:1.5rem;margin:auto;width:55%;height:100%;display:grid;grid-template-columns:50% 50%;box-sizing:border-box;margin:5rem auto 15rem}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .right-side{padding:2rem 4rem;display:grid;grid-template-rows:auto auto auto auto;row-gap:1rem}.page .contact-us .right-side .phone-number-section{position:relative;display:flex;gap:.5rem;margin:.5rem 0rem}.page .contact-us .right-side .phone-number-section .countries-list{width:30%}.page .contact-us .right-side .phone-number-section .code-section{width:15%;margin-right:0rem;align-self:center;color:#000;position:relative;display:flex}.page .contact-us .right-side .phone-number-section .code-section *{color:#838b91}.page .contact-us .right-side .phone-number-section .code{text-align:center;height:4rem;width:100%;padding-left:2rem;margin-right:0vh}.page .contact-us .right-side .phone-number-section .code::placeholder{padding-left:1rem}.page .contact-us .right-side .phone-number-section fa-icon{align-self:center;position:absolute;left:.5rem;z-index:2}.page .contact-us .right-side .phone-number-section .phone-num-input{width:55%;margin-right:0rem;height:4rem}.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-outer-spin-button,.page .contact-us .right-side .phone-number-section .phone-num-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.page .contact-us .right-side .title{font-weight:800;color:#3d3d3d}.page .contact-us .right-side .subtitle{font-weight:500;font-size:1.9rem;color:#3d3d3d;padding:1rem 0rem}.page .contact-us .right-side .content{display:grid;grid-template-rows:auto auto auto auto}.page .contact-us .right-side .content .message-box{grid-row:1/span 2}.page .contact-us .right-side .content .message-box .text-area{height:15rem;resize:none;border-radius:.5rem;border:rgb(190,188,188) .1rem solid}.page .contact-us .right-side .content .message-box .text-area::placeholder{font-weight:500;color:#9e9e9e;font-size:1.2rem}.page .contact-us .right-side .content .message-box .text-area:focus-visible{outline:none}.page .contact-us .right-side .content .message-box .actions{margin:1rem 0rem}.page .contact-us .right-side .content .message-box .actions button{background-color:#155ed4;font-weight:500;font-size:1.4rem;border-radius:.3rem}.page .contact-us .right-side .content .message-box .input,.page .contact-us .right-side .content .message-box textarea{margin:1rem 0rem;width:100%;background-color:#fff}.page .contact-us .left-side{height:100%;position:relative;color:#fff}.page .contact-us .left-side .img-title{position:absolute;top:5%;left:calc(2% + 2rem);font-weight:700;font-size:3.6rem}.page .contact-us .left-side .bottom-img-side{position:absolute;top:75%;left:calc(2% + 2rem);margin:2rem 9rem 0rem 0rem}.page .contact-us .left-side .bottom-img-side .logo{width:20rem;height:4rem}.page .contact-us .left-side .bottom-img-side .logo img{width:10rem;height:4rem}.page .contact-us .left-side .bottom-img-side .img-description{margin-top:2rem}.page .contact-us .left-side .bg-image{width:100%;height:100%;border-radius:1.5rem 0rem 0rem 1.5rem}@media only screen and (max-width: 75em){.page .contact-us .left-side .bg-image{border-radius:1.5rem}}.page .carousel{display:none}.page .flexy{display:flex}.page .our-locations-section{width:100%;background-color:#26518b;padding:1.5rem;color:#fff}.page .our-locations-section .locations-content{width:95%;margin:auto}.page .our-locations-section .locations-content .headline{font-weight:500;font-size:2rem}.page .our-locations-section .locations-content .title{font-weight:700;padding:1rem 0rem;font-size:4rem}.page .our-locations-section .locations-content .subtitle{font-weight:500;padding:1rem 0rem}.page .our-locations-section .locations-content .lines-img{padding:1rem 0rem}.page .our-locations-section .locations-content .addresses{width:100%;display:flex;flex-direction:row;column-gap:2%}.page .our-locations-section .locations-content .addresses .address{flex-direction:column;row-gap:.7rem;width:22%;padding:1.5rem 0rem}.page .our-locations-section .locations-content .addresses .address .address-header{display:flex;flex-direction:column;row-gap:.7rem}.page .our-locations-section .locations-content .addresses .address .address-header img{width:3rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:1.9rem;font-weight:500}.page .our-locations-section .locations-content .addresses .address .location-area{width:95%}@media only screen and (min-width: 112.5em){.page .title{font-size:4.5rem}.page .contact-us{width:65%}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100%}}@media only screen and (max-width: 112.5em){.page .contact-us{width:75%;box-sizing:border-box}.page .contact-us .title{font-size:3.4rem}.page .contact-us .full-name-area{display:flex;column-gap:5%}.page .contact-us .first-name,.page .contact-us .last-name{width:47.5%}.page .contact-us .left-side{height:100%}.page .contact-us .left-side img{object-fit:cover;box-sizing:border-box;width:100%;height:100rem;border-radius:0rem 1.5rem 1.5rem 0rem}}@media only screen and (max-width: 112.5em) and (max-width: 1350px){.page .contact-us{width:80%}}@media only screen and (max-width: 112.5em) and (max-width: 1280px){.page .contact-us{width:86%}}@media only screen and (max-width: 1401px) and (min-width: 1201px){.page .our-locations-section .locations-content{width:auto}}@media only screen and (max-width: 75em){.page .contact-us{display:flex;flex-direction:column;top:3vh;width:100%;height:107rem;padding:5vh 2rem 10vh 2rem}.page .contact-us .right-side{padding:3rem 2rem;display:flex;flex-direction:column;height:80%}.page .contact-us .right-side .mat-mdc-card-content{display:block;padding:0 .2rem}.page .contact-us .left-side{height:25%}.page .contact-us .left-side .img-title{color:#fff}.page .contact-us .left-side img{height:100%;object-position:0rem -13rem;border-radius:1.5rem}.page .carousel{display:block;width:100%}.page .flexy{display:none}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{font-size:1.8rem;width:31rem;margin:auto;text-align:center;background-color:#fff;color:#26518b;height:27rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2rem;margin-bottom:1rem}.page .mat-mdc-card{box-shadow:none}}@media only screen and (max-width: 37.5em){.page .contact-us{height:auto;padding:5vh 2rem 0vh 2rem}.page .contact-us .full-name-area{display:block}.page .contact-us .first-name,.page .contact-us .last-name{width:100%}.page .contact-us .left-side{height:12rem}.page .contact-us .left-side .img-title{font-weight:600;font-size:3rem}.page .contact-us .left-side img{object-position:0rem -5rem}.page .contact-us .right-side .phone-number-section{flex-wrap:wrap}.page .contact-us .right-side .phone-number-section .countries-list{width:100%}.page .contact-us .right-side .phone-number-section .code-section{width:9rem}.page .contact-us .right-side .phone-number-section .phone-num-input{width:calc(100% - 9.5rem)}.page .our-locations-section .locations-content .addresses .address{width:27rem}}@media only screen and (max-width: 400px){.page .contact-us .left-side{height:10rem}.page .contact-us .left-side .img-title{font-weight:500;font-size:2.6rem}.page .our-locations-section .locations-content .addresses{width:100%}.page .our-locations-section .locations-content .addresses .address{width:24.5rem;height:28rem;border-radius:1rem}.page .our-locations-section .locations-content .addresses .address .address-header .location-name{font-size:2.2rem;margin-bottom:1rem;padding:0rem .4rem}.page .our-locations-section .locations-content .addresses .address .building,.page .our-locations-section .locations-content .addresses .address .location-area{padding:0rem .4rem}}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev:focus,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next:focus{outline:0 none;box-shadow:0 0 0 .2rem transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-prev,.page ::ng-deep .p-carousel .p-carousel-content .p-carousel-next{width:4rem;height:4rem;background-color:transparent}.page ::ng-deep .p-carousel .p-carousel-content .p-icon{color:#fff;width:2rem;height:2rem}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator.p-highlight button{background-color:#fff;width:2.7rem;transition:all ease-in-out .1s}.page ::ng-deep .p-carousel .p-carousel-indicators .p-carousel-indicator button{border-radius:1rem;width:.8rem;height:.8rem;transition:all ease-in-out .5s}\n"] }]
|
|
676
|
+
}], ctorParameters: function () { return [{ type: i1$2.MatDialog }, { type: i1$1.BreakpointObserver }, { type: i3$2.FormBuilder }]; }, propDecorators: { subjects: [{
|
|
677
|
+
type: Input
|
|
678
|
+
}], contactUsPageData: [{
|
|
679
|
+
type: Input
|
|
680
|
+
}], apiPath: [{
|
|
681
|
+
type: Input
|
|
682
|
+
}], items: [{
|
|
683
|
+
type: Input
|
|
694
684
|
}] } });
|
|
695
685
|
|
|
696
|
-
class PageSectionStyleThreeComponent {
|
|
697
|
-
constructor(_Router) {
|
|
698
|
-
this._Router = _Router;
|
|
699
|
-
}
|
|
700
|
-
ngOnInit() {
|
|
701
|
-
}
|
|
702
|
-
onClickValuePropButton(route) {
|
|
703
|
-
this._Router.navigate([route]);
|
|
704
|
-
}
|
|
705
|
-
}
|
|
706
|
-
PageSectionStyleThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
707
|
-
PageSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThreeComponent, selector: "page-section-style-three", inputs: {
|
|
708
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, decorators: [{
|
|
709
|
-
type: Component,
|
|
710
|
-
args: [{ selector: 'page-section-style-three', template: "<div class=\"page\">\n <div class=\"section\" *ngFor=\"let valueprop of
|
|
711
|
-
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: {
|
|
712
|
-
type: Input
|
|
686
|
+
class PageSectionStyleThreeComponent {
|
|
687
|
+
constructor(_Router) {
|
|
688
|
+
this._Router = _Router;
|
|
689
|
+
}
|
|
690
|
+
ngOnInit() {
|
|
691
|
+
}
|
|
692
|
+
onClickValuePropButton(route) {
|
|
693
|
+
this._Router.navigate([route]);
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
PageSectionStyleThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
697
|
+
PageSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThreeComponent, selector: "page-section-style-three", inputs: { pageSection: "pageSection" }, ngImport: i0, template: "<div class=\"page\">\r\n <div class=\"section\" *ngFor=\"let valueprop of pageSection\">\r\n <div class=\"section-container\">\r\n <div class=\"image-side\">\r\n <img [src]=\"valueprop.image\">\r\n </div>\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"valueprop.sectionTitle\" >\r\n </section-title>\r\n <div class=\"optional-button\">\r\n <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.route\"\r\n (click)=\"onClickValuePropButton(valueprop.route)\">\r\n Click Me\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{row-gap:5rem;display:grid;justify-items:center;padding:0rem}.page .section{margin:0rem;padding:2rem 0;width:100%;display:grid;justify-items:center}.page .section .section-container{display:flex;flex-direction:row;column-gap:4%;width:90%}@media only screen and (min-width: 1500px){.page .section{padding:5rem 0%}.page .section .section-container{max-width:150rem}}.page .section:nth-child(even){background-color:#f3f6f8}.page .section:nth-child(even) .section-container{flex-direction:row-reverse}.page .section .text-side{margin:auto;width:53%;padding:2rem 0rem;text-align:left}.page .section .text-side .title{font-size:3.2rem;font-weight:600;padding:1rem 0rem}.page .section .text-side .optional-button{margin-top:2rem}.page .section .text-side .optional-button button{padding:1rem;background-color:#155ed4;color:#fff}.page .section .image-side{border-radius:1.5rem;width:43%;height:35rem;box-shadow:0 .1rem .5rem #00000040}.page .section .image-side img{border-radius:1.5rem;width:100%;height:100%;object-fit:cover}@media only screen and (max-width: 75em){.page{row-gap:2rem}.page .section .section-container{flex-direction:column}.page .section .section-container .image-side{margin:1rem auto;width:40%}.page .section .section-container .image-side img,.page .section .section-container .text-side{width:100%}.page .section:nth-child(even) .section-container{flex-direction:column}}@media only screen and (max-width: 56.25em){.page{row-gap:2rem}.page .section .section-container .image-side{margin:1rem auto;width:50%}}@media only screen and (max-width: 37.5em){.page .section{margin:0;padding:0}.page .section .section-container{width:100%}.page .section .section-container .text-side{padding:0rem 4%}.page .section .section-container .text-side .title{font-size:2.4rem;font-weight:600;padding:1rem 0rem}.page .section .section-container .image-side{width:100%;height:40rem;border-radius:0;margin:0;box-shadow:none;margin-bottom:2rem}.page .section .section-container .image-side img{border-radius:0;height:100%;object-fit:cover}}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
698
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, decorators: [{
|
|
699
|
+
type: Component,
|
|
700
|
+
args: [{ selector: 'page-section-style-three', template: "<div class=\"page\">\r\n <div class=\"section\" *ngFor=\"let valueprop of pageSection\">\r\n <div class=\"section-container\">\r\n <div class=\"image-side\">\r\n <img [src]=\"valueprop.image\">\r\n </div>\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"valueprop.sectionTitle\" >\r\n </section-title>\r\n <div class=\"optional-button\">\r\n <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.route\"\r\n (click)=\"onClickValuePropButton(valueprop.route)\">\r\n Click Me\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{row-gap:5rem;display:grid;justify-items:center;padding:0rem}.page .section{margin:0rem;padding:2rem 0;width:100%;display:grid;justify-items:center}.page .section .section-container{display:flex;flex-direction:row;column-gap:4%;width:90%}@media only screen and (min-width: 1500px){.page .section{padding:5rem 0%}.page .section .section-container{max-width:150rem}}.page .section:nth-child(even){background-color:#f3f6f8}.page .section:nth-child(even) .section-container{flex-direction:row-reverse}.page .section .text-side{margin:auto;width:53%;padding:2rem 0rem;text-align:left}.page .section .text-side .title{font-size:3.2rem;font-weight:600;padding:1rem 0rem}.page .section .text-side .optional-button{margin-top:2rem}.page .section .text-side .optional-button button{padding:1rem;background-color:#155ed4;color:#fff}.page .section .image-side{border-radius:1.5rem;width:43%;height:35rem;box-shadow:0 .1rem .5rem #00000040}.page .section .image-side img{border-radius:1.5rem;width:100%;height:100%;object-fit:cover}@media only screen and (max-width: 75em){.page{row-gap:2rem}.page .section .section-container{flex-direction:column}.page .section .section-container .image-side{margin:1rem auto;width:40%}.page .section .section-container .image-side img,.page .section .section-container .text-side{width:100%}.page .section:nth-child(even) .section-container{flex-direction:column}}@media only screen and (max-width: 56.25em){.page{row-gap:2rem}.page .section .section-container .image-side{margin:1rem auto;width:50%}}@media only screen and (max-width: 37.5em){.page .section{margin:0;padding:0}.page .section .section-container{width:100%}.page .section .section-container .text-side{padding:0rem 4%}.page .section .section-container .text-side .title{font-size:2.4rem;font-weight:600;padding:1rem 0rem}.page .section .section-container .image-side{width:100%;height:40rem;border-radius:0;margin:0;box-shadow:none;margin-bottom:2rem}.page .section .section-container .image-side img{border-radius:0;height:100%;object-fit:cover}}\n"] }]
|
|
701
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { pageSection: [{
|
|
702
|
+
type: Input
|
|
713
703
|
}] } });
|
|
714
704
|
|
|
715
|
-
class SocialMediaIconsComponent {
|
|
716
|
-
constructor(_router) {
|
|
717
|
-
this._router = _router;
|
|
718
|
-
}
|
|
719
|
-
ngOnInit() {
|
|
720
|
-
}
|
|
721
|
-
onClickLinkedIn() {
|
|
722
|
-
window.location.href = this.socialMediaLinks.linkedIn;
|
|
723
|
-
}
|
|
724
|
-
onClickInstagram() {
|
|
725
|
-
window.location.href = this.socialMediaLinks.instagram;
|
|
726
|
-
}
|
|
727
|
-
onClickYoutube() {
|
|
728
|
-
window.location.href = this.socialMediaLinks.youTube;
|
|
729
|
-
}
|
|
730
|
-
setStyles() {
|
|
731
|
-
let style = {
|
|
732
|
-
color: this.color
|
|
733
|
-
};
|
|
734
|
-
return style;
|
|
735
|
-
}
|
|
736
|
-
}
|
|
737
|
-
SocialMediaIconsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SocialMediaIconsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
738
|
-
SocialMediaIconsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SocialMediaIconsComponent, selector: "social-media-icons", inputs: { color: "color", areIconsInFooter: "areIconsInFooter", socialMediaLinks: "socialMediaLinks" }, ngImport: i0, template: "<div [ngClass]=\"{'icons-white':areIconsInFooter, 'icons':!areIconsInFooter}\">\n <fa-icon [icon]=\"['fab', 'linkedin-in']\" class=\"icon linkedin\" (click)=\"onClickLinkedIn()\"></fa-icon>\n <fa-icon [icon]=\"['fab', 'instagram']\" class=\"icon instagram\" (click)=\"onClickInstagram()\"></fa-icon>\n <fa-icon [icon]=\"['fab', 'youtube']\" class=\"icon youtube\" (click)=\"onClickYoutube()\"></fa-icon>\n</div>", styles: [".icons,.icons-white{display:flex;gap:1.5rem}.icons .icon,.icons-white .icon{cursor:pointer;font-size:2rem}.icons-white{color:#fff}.icons-white .icon:hover{color:#e6e6e6}.icons{font-size:2rem}.icons .icon{color:#4d4d4d;cursor:pointer;transition:ease-in-out .2s}.icons .linkedin:hover{color:#0072b1}.icons .instagram:hover{color:#c92bb7}.icons .youtube:hover{color:red}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type:
|
|
739
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SocialMediaIconsComponent, decorators: [{
|
|
740
|
-
type: Component,
|
|
741
|
-
args: [{ selector: 'social-media-icons', template: "<div [ngClass]=\"{'icons-white':areIconsInFooter, 'icons':!areIconsInFooter}\">\n <fa-icon [icon]=\"['fab', 'linkedin-in']\" class=\"icon linkedin\" (click)=\"onClickLinkedIn()\"></fa-icon>\n <fa-icon [icon]=\"['fab', 'instagram']\" class=\"icon instagram\" (click)=\"onClickInstagram()\"></fa-icon>\n <fa-icon [icon]=\"['fab', 'youtube']\" class=\"icon youtube\" (click)=\"onClickYoutube()\"></fa-icon>\n</div>", styles: [".icons,.icons-white{display:flex;gap:1.5rem}.icons .icon,.icons-white .icon{cursor:pointer;font-size:2rem}.icons-white{color:#fff}.icons-white .icon:hover{color:#e6e6e6}.icons{font-size:2rem}.icons .icon{color:#4d4d4d;cursor:pointer;transition:ease-in-out .2s}.icons .linkedin:hover{color:#0072b1}.icons .instagram:hover{color:#c92bb7}.icons .youtube:hover{color:red}\n"] }]
|
|
742
|
-
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { color: [{
|
|
743
|
-
type: Input
|
|
744
|
-
}], areIconsInFooter: [{
|
|
745
|
-
type: Input
|
|
746
|
-
}], socialMediaLinks: [{
|
|
747
|
-
type: Input
|
|
705
|
+
class SocialMediaIconsComponent {
|
|
706
|
+
constructor(_router) {
|
|
707
|
+
this._router = _router;
|
|
708
|
+
}
|
|
709
|
+
ngOnInit() {
|
|
710
|
+
}
|
|
711
|
+
onClickLinkedIn() {
|
|
712
|
+
window.location.href = this.socialMediaLinks.linkedIn;
|
|
713
|
+
}
|
|
714
|
+
onClickInstagram() {
|
|
715
|
+
window.location.href = this.socialMediaLinks.instagram;
|
|
716
|
+
}
|
|
717
|
+
onClickYoutube() {
|
|
718
|
+
window.location.href = this.socialMediaLinks.youTube;
|
|
719
|
+
}
|
|
720
|
+
setStyles() {
|
|
721
|
+
let style = {
|
|
722
|
+
color: this.color
|
|
723
|
+
};
|
|
724
|
+
return style;
|
|
725
|
+
}
|
|
726
|
+
}
|
|
727
|
+
SocialMediaIconsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SocialMediaIconsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
728
|
+
SocialMediaIconsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SocialMediaIconsComponent, selector: "social-media-icons", inputs: { color: "color", areIconsInFooter: "areIconsInFooter", socialMediaLinks: "socialMediaLinks" }, ngImport: i0, template: "<div [ngClass]=\"{'icons-white':areIconsInFooter, 'icons':!areIconsInFooter}\">\r\n <fa-icon [icon]=\"['fab', 'linkedin-in']\" class=\"icon linkedin\" (click)=\"onClickLinkedIn()\"></fa-icon>\r\n <fa-icon [icon]=\"['fab', 'instagram']\" class=\"icon instagram\" (click)=\"onClickInstagram()\"></fa-icon>\r\n <fa-icon [icon]=\"['fab', 'youtube']\" class=\"icon youtube\" (click)=\"onClickYoutube()\"></fa-icon>\r\n</div>", styles: [".icons,.icons-white{display:flex;gap:1.5rem}.icons .icon,.icons-white .icon{cursor:pointer;font-size:2rem}.icons-white{color:#fff}.icons-white .icon:hover{color:#e6e6e6}.icons{font-size:2rem}.icons .icon{color:#4d4d4d;cursor:pointer;transition:ease-in-out .2s}.icons .linkedin:hover{color:#0072b1}.icons .instagram:hover{color:#c92bb7}.icons .youtube:hover{color:red}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
729
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SocialMediaIconsComponent, decorators: [{
|
|
730
|
+
type: Component,
|
|
731
|
+
args: [{ selector: 'social-media-icons', template: "<div [ngClass]=\"{'icons-white':areIconsInFooter, 'icons':!areIconsInFooter}\">\r\n <fa-icon [icon]=\"['fab', 'linkedin-in']\" class=\"icon linkedin\" (click)=\"onClickLinkedIn()\"></fa-icon>\r\n <fa-icon [icon]=\"['fab', 'instagram']\" class=\"icon instagram\" (click)=\"onClickInstagram()\"></fa-icon>\r\n <fa-icon [icon]=\"['fab', 'youtube']\" class=\"icon youtube\" (click)=\"onClickYoutube()\"></fa-icon>\r\n</div>", styles: [".icons,.icons-white{display:flex;gap:1.5rem}.icons .icon,.icons-white .icon{cursor:pointer;font-size:2rem}.icons-white{color:#fff}.icons-white .icon:hover{color:#e6e6e6}.icons{font-size:2rem}.icons .icon{color:#4d4d4d;cursor:pointer;transition:ease-in-out .2s}.icons .linkedin:hover{color:#0072b1}.icons .instagram:hover{color:#c92bb7}.icons .youtube:hover{color:red}\n"] }]
|
|
732
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { color: [{
|
|
733
|
+
type: Input
|
|
734
|
+
}], areIconsInFooter: [{
|
|
735
|
+
type: Input
|
|
736
|
+
}], socialMediaLinks: [{
|
|
737
|
+
type: Input
|
|
748
738
|
}] } });
|
|
749
739
|
|
|
750
|
-
class ComingSoonComponent {
|
|
751
|
-
constructor() {
|
|
752
|
-
this.ctaText = "Get notified when this feature is available.";
|
|
753
|
-
this.socialMediaLinks = { instagram: "https://www.instagram.com", faceBook: "https://www.facebook.com", youTube: "https://www.youtube.com", linkedIn: "https://www.linkedin.com" };
|
|
754
|
-
}
|
|
755
|
-
}
|
|
756
|
-
ComingSoonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComingSoonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
757
|
-
ComingSoonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ComingSoonComponent, selector: "coming-soon", inputs: { ctaText: "ctaText", socialMediaLinks: "socialMediaLinks" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"coming-soon\">\n <div class=\"title\">\n Coming Soon\n </div>\n <div class=\"subtitle\">\n {{ctaText}}\n </div>\n <form>\n <div class=\"registration-field\">\n <div class=\"email-field\">\n <input type=\"email\" placeholder=\"Email Address\">\n </div>\n <button mat-raised-button class=\"submit\" type=\"submit\">\n Submit\n </button>\n </div>\n </form>\n <div class=\"social-media-icons\">\n <social-media-icons [color]=\"'#4D4D4D'\" [areIconsInFooter]=\"false\"\n [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\n </div>\n </div>\n</div>", styles: ["
|
|
758
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComingSoonComponent, decorators: [{
|
|
759
|
-
type: Component,
|
|
760
|
-
args: [{ selector: 'coming-soon', template: "<div class=\"page\">\n <div class=\"coming-soon\">\n <div class=\"title\">\n Coming Soon\n </div>\n <div class=\"subtitle\">\n {{ctaText}}\n </div>\n <form>\n <div class=\"registration-field\">\n <div class=\"email-field\">\n <input type=\"email\" placeholder=\"Email Address\">\n </div>\n <button mat-raised-button class=\"submit\" type=\"submit\">\n Submit\n </button>\n </div>\n </form>\n <div class=\"social-media-icons\">\n <social-media-icons [color]=\"'#4D4D4D'\" [areIconsInFooter]=\"false\"\n [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\n </div>\n </div>\n</div>", styles: ["
|
|
761
|
-
}], propDecorators: { ctaText: [{
|
|
762
|
-
type: Input
|
|
763
|
-
}], socialMediaLinks: [{
|
|
764
|
-
type: Input
|
|
740
|
+
class ComingSoonComponent {
|
|
741
|
+
constructor() {
|
|
742
|
+
this.ctaText = "Get notified when this feature is available.";
|
|
743
|
+
this.socialMediaLinks = { instagram: "https://www.instagram.com", faceBook: "https://www.facebook.com", youTube: "https://www.youtube.com", linkedIn: "https://www.linkedin.com" };
|
|
744
|
+
}
|
|
745
|
+
}
|
|
746
|
+
ComingSoonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComingSoonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
747
|
+
ComingSoonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ComingSoonComponent, selector: "coming-soon", inputs: { ctaText: "ctaText", socialMediaLinks: "socialMediaLinks" }, ngImport: i0, template: "<div class=\"page\">\r\n <div class=\"coming-soon\">\r\n <div class=\"title\">\r\n Coming Soon\r\n </div>\r\n <div class=\"subtitle\">\r\n {{ctaText}}\r\n </div>\r\n <form>\r\n <div class=\"registration-field\">\r\n <div class=\"email-field\">\r\n <input type=\"email\" placeholder=\"Email Address\">\r\n </div>\r\n <button mat-raised-button class=\"submit\" type=\"submit\">\r\n Submit\r\n </button>\r\n </div>\r\n </form>\r\n <div class=\"social-media-icons\">\r\n <social-media-icons [color]=\"'#4D4D4D'\" [areIconsInFooter]=\"false\"\r\n [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;position:relative;height:100vh}.page .coming-soon{background:url(https://i.ibb.co/crKpSTb/box-left-side-design.png) left center no-repeat,url(https://i.ibb.co/pKTGF8D/coming-soon-right-top-bg.png) right top no-repeat,url(https://i.ibb.co/ckht99W/coming-soon-right-bottom-bg.png) right bottom no-repeat;background-size:2rem,13rem,10rem;position:absolute;top:15%;left:50%;transform:translate(-50%);background-color:#fff;padding:6rem 4rem;width:40%;border-radius:2.5rem;box-shadow:.2rem .2rem 7.4rem #00000060}.page .coming-soon .title{color:#4d4d4d;font-weight:500;font-size:4rem;margin-bottom:.8rem}.page .coming-soon .subtitle{color:#4d4d4d;font-weight:700;font-size:1.3rem;margin-bottom:.3rem}.page .coming-soon .registration-field{display:flex;margin-bottom:.8rem}.page .coming-soon .registration-field .email-field{margin-right:.8rem}.page .coming-soon .registration-field .submit{color:#fff;background-color:#32353b}.page .coming-soon .registration-field .submit:hover{background-color:#494e57}.page .coming-soon .social-media-icons{font-size:2rem}.page .coming-soon .social-media-icons fa-icon{color:#4d4d4d;margin-right:1rem;cursor:pointer;transition:ease-in-out .2s}.page .coming-soon .social-media-icons .linkedin:hover{color:#0072b1}.page .coming-soon .social-media-icons .instagram:hover{color:#c92bb7}.page .coming-soon .social-media-icons .youtube:hover{color:red}\n"], dependencies: [{ kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: SocialMediaIconsComponent, selector: "social-media-icons", inputs: ["color", "areIconsInFooter", "socialMediaLinks"] }] });
|
|
748
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComingSoonComponent, decorators: [{
|
|
749
|
+
type: Component,
|
|
750
|
+
args: [{ selector: 'coming-soon', template: "<div class=\"page\">\r\n <div class=\"coming-soon\">\r\n <div class=\"title\">\r\n Coming Soon\r\n </div>\r\n <div class=\"subtitle\">\r\n {{ctaText}}\r\n </div>\r\n <form>\r\n <div class=\"registration-field\">\r\n <div class=\"email-field\">\r\n <input type=\"email\" placeholder=\"Email Address\">\r\n </div>\r\n <button mat-raised-button class=\"submit\" type=\"submit\">\r\n Submit\r\n </button>\r\n </div>\r\n </form>\r\n <div class=\"social-media-icons\">\r\n <social-media-icons [color]=\"'#4D4D4D'\" [areIconsInFooter]=\"false\"\r\n [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;position:relative;height:100vh}.page .coming-soon{background:url(https://i.ibb.co/crKpSTb/box-left-side-design.png) left center no-repeat,url(https://i.ibb.co/pKTGF8D/coming-soon-right-top-bg.png) right top no-repeat,url(https://i.ibb.co/ckht99W/coming-soon-right-bottom-bg.png) right bottom no-repeat;background-size:2rem,13rem,10rem;position:absolute;top:15%;left:50%;transform:translate(-50%);background-color:#fff;padding:6rem 4rem;width:40%;border-radius:2.5rem;box-shadow:.2rem .2rem 7.4rem #00000060}.page .coming-soon .title{color:#4d4d4d;font-weight:500;font-size:4rem;margin-bottom:.8rem}.page .coming-soon .subtitle{color:#4d4d4d;font-weight:700;font-size:1.3rem;margin-bottom:.3rem}.page .coming-soon .registration-field{display:flex;margin-bottom:.8rem}.page .coming-soon .registration-field .email-field{margin-right:.8rem}.page .coming-soon .registration-field .submit{color:#fff;background-color:#32353b}.page .coming-soon .registration-field .submit:hover{background-color:#494e57}.page .coming-soon .social-media-icons{font-size:2rem}.page .coming-soon .social-media-icons fa-icon{color:#4d4d4d;margin-right:1rem;cursor:pointer;transition:ease-in-out .2s}.page .coming-soon .social-media-icons .linkedin:hover{color:#0072b1}.page .coming-soon .social-media-icons .instagram:hover{color:#c92bb7}.page .coming-soon .social-media-icons .youtube:hover{color:red}\n"] }]
|
|
751
|
+
}], propDecorators: { ctaText: [{
|
|
752
|
+
type: Input
|
|
753
|
+
}], socialMediaLinks: [{
|
|
754
|
+
type: Input
|
|
765
755
|
}] } });
|
|
766
756
|
|
|
767
|
-
class FaqCategoryListingComponent {
|
|
768
|
-
constructor(_Router) {
|
|
769
|
-
this._Router = _Router;
|
|
770
|
-
}
|
|
771
|
-
ngOnInit() { }
|
|
772
|
-
onClick() {
|
|
773
|
-
this._Router.navigate(['/faq/faq-category-page', this.category.id]);
|
|
774
|
-
}
|
|
775
|
-
}
|
|
776
|
-
FaqCategoryListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqCategoryListingComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
777
|
-
FaqCategoryListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqCategoryListingComponent, selector: "faq-category-listing", inputs: { category: "category", isSelected: "isSelected" }, ngImport: i0, template: "<div [ngClass]=\"{'selected':isSelected}\" class=\"listing\">\n <div class=\"icon-container\">\n <fa-icon [icon]=\"category.iconName\"></fa-icon>\n </div>\n <div class=\"title\">\n {{category.title}}\n </div>\n</div>", styles: ["
|
|
778
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqCategoryListingComponent, decorators: [{
|
|
779
|
-
type: Component,
|
|
780
|
-
args: [{ selector: 'faq-category-listing', template: "<div [ngClass]=\"{'selected':isSelected}\" class=\"listing\">\n <div class=\"icon-container\">\n <fa-icon [icon]=\"category.iconName\"></fa-icon>\n </div>\n <div class=\"title\">\n {{category.title}}\n </div>\n</div>", styles: ["
|
|
781
|
-
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { category: [{
|
|
782
|
-
type: Input
|
|
783
|
-
}], isSelected: [{
|
|
784
|
-
type: Input
|
|
757
|
+
class FaqCategoryListingComponent {
|
|
758
|
+
constructor(_Router) {
|
|
759
|
+
this._Router = _Router;
|
|
760
|
+
}
|
|
761
|
+
ngOnInit() { }
|
|
762
|
+
onClick() {
|
|
763
|
+
this._Router.navigate(['/faq/faq-category-page', this.category.id]);
|
|
764
|
+
}
|
|
765
|
+
}
|
|
766
|
+
FaqCategoryListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqCategoryListingComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
767
|
+
FaqCategoryListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqCategoryListingComponent, selector: "faq-category-listing", inputs: { category: "category", isSelected: "isSelected" }, ngImport: i0, template: "<div [ngClass]=\"{'selected':isSelected}\" class=\"listing\">\r\n <div class=\"icon-container\">\r\n <fa-icon [icon]=\"category.iconName\"></fa-icon>\r\n </div>\r\n <div class=\"title\">\r\n {{category.title}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.listing{display:grid;grid-template-rows:auto auto;align-items:center;background:#fff;padding:2rem;border-radius:1.5rem;grid-row-gap:1rem;width:100%;height:20rem;margin:auto;place-items:center;border:.2rem solid #32353b;transition:all ease-in-out .1s;color:#32353b}.listing:hover{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}.icon-container{grid-row:1/span 2;grid-column:1;font-size:5rem}.title{font-size:18px;font-weight:700}.selected{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}@media only screen and (max-width: 75em){.listing{width:30rem;margin:auto 1rem}}@media only screen and (max-width: 37.5em){.listing{width:15rem;height:12rem;padding:0}.listing .title{font-size:1.8rem}.listing .icon-container{font-size:4rem}}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
768
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqCategoryListingComponent, decorators: [{
|
|
769
|
+
type: Component,
|
|
770
|
+
args: [{ selector: 'faq-category-listing', template: "<div [ngClass]=\"{'selected':isSelected}\" class=\"listing\">\r\n <div class=\"icon-container\">\r\n <fa-icon [icon]=\"category.iconName\"></fa-icon>\r\n </div>\r\n <div class=\"title\">\r\n {{category.title}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.listing{display:grid;grid-template-rows:auto auto;align-items:center;background:#fff;padding:2rem;border-radius:1.5rem;grid-row-gap:1rem;width:100%;height:20rem;margin:auto;place-items:center;border:.2rem solid #32353b;transition:all ease-in-out .1s;color:#32353b}.listing:hover{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}.icon-container{grid-row:1/span 2;grid-column:1;font-size:5rem}.title{font-size:18px;font-weight:700}.selected{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}@media only screen and (max-width: 75em){.listing{width:30rem;margin:auto 1rem}}@media only screen and (max-width: 37.5em){.listing{width:15rem;height:12rem;padding:0}.listing .title{font-size:1.8rem}.listing .icon-container{font-size:4rem}}\n"] }]
|
|
771
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { category: [{
|
|
772
|
+
type: Input
|
|
773
|
+
}], isSelected: [{
|
|
774
|
+
type: Input
|
|
785
775
|
}] } });
|
|
786
776
|
|
|
787
|
-
class FaqListingComponent {
|
|
788
|
-
constructor() { }
|
|
789
|
-
ngOnInit() {
|
|
790
|
-
}
|
|
791
|
-
onOpened($event) {
|
|
792
|
-
this.isOpen = true;
|
|
793
|
-
}
|
|
794
|
-
onClosed($event) {
|
|
795
|
-
this.isOpen = false;
|
|
796
|
-
}
|
|
797
|
-
}
|
|
798
|
-
FaqListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
799
|
-
FaqListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqListingComponent, selector: "faq-listing", inputs: { faq: "faq" }, ngImport: i0, template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n (closed)=\"onClosed($event)\">\n <mat-expansion-panel-header class=\"panel-header\">\n <mat-panel-title class=\"title\">\n {{faq.question}}\n </mat-panel-title>\n <div class=\"icon\">\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"content\">\n {{faq.response}}\n </div>\n</mat-expansion-panel>", styles: ["
|
|
800
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, decorators: [{
|
|
801
|
-
type: Component,
|
|
802
|
-
args: [{ selector: 'faq-listing', template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n (closed)=\"onClosed($event)\">\n <mat-expansion-panel-header class=\"panel-header\">\n <mat-panel-title class=\"title\">\n {{faq.question}}\n </mat-panel-title>\n <div class=\"icon\">\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"content\">\n {{faq.response}}\n </div>\n</mat-expansion-panel>", styles: ["
|
|
803
|
-
}], ctorParameters: function () { return []; }, propDecorators: { faq: [{
|
|
804
|
-
type: Input
|
|
777
|
+
class FaqListingComponent {
|
|
778
|
+
constructor() { }
|
|
779
|
+
ngOnInit() {
|
|
780
|
+
}
|
|
781
|
+
onOpened($event) {
|
|
782
|
+
this.isOpen = true;
|
|
783
|
+
}
|
|
784
|
+
onClosed($event) {
|
|
785
|
+
this.isOpen = false;
|
|
786
|
+
}
|
|
787
|
+
}
|
|
788
|
+
FaqListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
789
|
+
FaqListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqListingComponent, selector: "faq-listing", inputs: { faq: "faq" }, ngImport: i0, template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\r\n (closed)=\"onClosed($event)\">\r\n <mat-expansion-panel-header class=\"panel-header\">\r\n <mat-panel-title class=\"title\">\r\n {{faq.question}}\r\n </mat-panel-title>\r\n <div class=\"icon\">\r\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\r\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\r\n </div>\r\n </mat-expansion-panel-header>\r\n <div class=\"content\">\r\n {{faq.response}}\r\n </div>\r\n</mat-expansion-panel>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
790
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, decorators: [{
|
|
791
|
+
type: Component,
|
|
792
|
+
args: [{ selector: 'faq-listing', template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\r\n (closed)=\"onClosed($event)\">\r\n <mat-expansion-panel-header class=\"panel-header\">\r\n <mat-panel-title class=\"title\">\r\n {{faq.question}}\r\n </mat-panel-title>\r\n <div class=\"icon\">\r\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\r\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\r\n </div>\r\n </mat-expansion-panel-header>\r\n <div class=\"content\">\r\n {{faq.response}}\r\n </div>\r\n</mat-expansion-panel>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"] }]
|
|
793
|
+
}], ctorParameters: function () { return []; }, propDecorators: { faq: [{
|
|
794
|
+
type: Input
|
|
805
795
|
}] } });
|
|
806
796
|
|
|
807
|
-
class CtaSectionStyleFourComponent {
|
|
808
|
-
constructor(breakpointObserver, _router) {
|
|
809
|
-
this.breakpointObserver = breakpointObserver;
|
|
810
|
-
this._router = _router;
|
|
811
|
-
}
|
|
812
|
-
ngOnInit() {
|
|
813
|
-
this.breakpointObserver.observe([
|
|
814
|
-
"(max-width: 900px)"
|
|
815
|
-
]).subscribe((result) => {
|
|
816
|
-
if (result.matches) {
|
|
817
|
-
this.sectionContent.sectionTitle.alignLeft = false;
|
|
818
|
-
}
|
|
819
|
-
else {
|
|
820
|
-
this.sectionContent.sectionTitle.alignLeft = true;
|
|
821
|
-
}
|
|
822
|
-
});
|
|
823
|
-
}
|
|
824
|
-
onClickCtaButton(route) {
|
|
825
|
-
this._router.navigate([route]);
|
|
826
|
-
}
|
|
827
|
-
}
|
|
828
|
-
CtaSectionStyleFourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleFourComponent, deps: [{ token: i1$1.BreakpointObserver }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
829
|
-
CtaSectionStyleFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleFourComponent, selector: "cta-section-style-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\n <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\n <div class=\"section-title\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div class=\"buttons-line\">\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\n {{button.label}}\n </button>\n </div>\n </div>\n</div>", styles: ["
|
|
830
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleFourComponent, decorators: [{
|
|
831
|
-
type: Component,
|
|
832
|
-
args: [{ selector: 'cta-section-style-four', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\n <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\n <div class=\"section-title\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div class=\"buttons-line\">\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\n {{button.label}}\n </button>\n </div>\n </div>\n</div>", styles: ["
|
|
833
|
-
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }, { type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
834
|
-
type: Input
|
|
797
|
+
class CtaSectionStyleFourComponent {
|
|
798
|
+
constructor(breakpointObserver, _router) {
|
|
799
|
+
this.breakpointObserver = breakpointObserver;
|
|
800
|
+
this._router = _router;
|
|
801
|
+
}
|
|
802
|
+
ngOnInit() {
|
|
803
|
+
this.breakpointObserver.observe([
|
|
804
|
+
"(max-width: 900px)"
|
|
805
|
+
]).subscribe((result) => {
|
|
806
|
+
if (result.matches) {
|
|
807
|
+
this.sectionContent.sectionTitle.alignLeft = false;
|
|
808
|
+
}
|
|
809
|
+
else {
|
|
810
|
+
this.sectionContent.sectionTitle.alignLeft = true;
|
|
811
|
+
}
|
|
812
|
+
});
|
|
813
|
+
}
|
|
814
|
+
onClickCtaButton(route) {
|
|
815
|
+
this._router.navigate([route]);
|
|
816
|
+
}
|
|
817
|
+
}
|
|
818
|
+
CtaSectionStyleFourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleFourComponent, deps: [{ token: i1$1.BreakpointObserver }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
819
|
+
CtaSectionStyleFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleFourComponent, selector: "cta-section-style-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\r\n <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.main-card{position:relative;width:100%;display:grid;row-gap:2rem;column-gap:2%;justify-content:center;padding:10rem 2rem;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .flex-reverse{flex-direction:row-reverse}.main-card .text-side{display:flex;flex-direction:row;column-gap:2%;width:100%;place-items:center}.main-card .text-side .section-title{width:70%;margin:auto}.main-card .text-side .buttons-line{width:28%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600;color:#fff;background-color:#155ed4}.main-card .text-side .buttons-line button:nth-child(2){background-color:#fff;color:#155ed4}@media only screen and (max-width: 56.25em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .buttons-line{width:50%}}@media only screen and (max-width: 37.5em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .section-title,.main-card .text-side .buttons-line{width:90%}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
820
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleFourComponent, decorators: [{
|
|
821
|
+
type: Component,
|
|
822
|
+
args: [{ selector: 'cta-section-style-four', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\r\n <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.main-card{position:relative;width:100%;display:grid;row-gap:2rem;column-gap:2%;justify-content:center;padding:10rem 2rem;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .flex-reverse{flex-direction:row-reverse}.main-card .text-side{display:flex;flex-direction:row;column-gap:2%;width:100%;place-items:center}.main-card .text-side .section-title{width:70%;margin:auto}.main-card .text-side .buttons-line{width:28%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600;color:#fff;background-color:#155ed4}.main-card .text-side .buttons-line button:nth-child(2){background-color:#fff;color:#155ed4}@media only screen and (max-width: 56.25em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .buttons-line{width:50%}}@media only screen and (max-width: 37.5em){.main-card .text-side{flex-direction:column;row-gap:4rem}.main-card .text-side .section-title,.main-card .text-side .buttons-line{width:90%}}\n"] }]
|
|
823
|
+
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }, { type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
824
|
+
type: Input
|
|
835
825
|
}] } });
|
|
836
826
|
|
|
837
|
-
class CtaSectionStyleThreeComponent {
|
|
838
|
-
constructor(_router) {
|
|
839
|
-
this._router = _router;
|
|
840
|
-
}
|
|
841
|
-
ngOnInit() {
|
|
842
|
-
}
|
|
843
|
-
onClickCtaButton(route) {
|
|
844
|
-
this._router.navigate([route]);
|
|
845
|
-
}
|
|
846
|
-
}
|
|
847
|
-
CtaSectionStyleThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleThreeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
848
|
-
CtaSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleThreeComponent, selector: "cta-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage\">\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\n </div>\n <div class=\"text-side\">\n <div class=\"section-title\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div class=\"buttons-line\">\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton(button.route)\" [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\n {{button.label}}\n </button>\n </div>\n </div>\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:4rem;width:100%;justify-items:center}.main-card .text-side .section-title{width:60%;margin:auto}.main-card .text-side .buttons-line{width:100%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600}.main-card .illustration-side{margin:auto;width:40%;display:grid;justify-items:center}.main-card .illustration-side .side-img{width:30%}\n"], dependencies: [{ kind: "directive", type:
|
|
849
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleThreeComponent, decorators: [{
|
|
850
|
-
type: Component,
|
|
851
|
-
args: [{ selector: 'cta-section-style-three', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage\">\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\n </div>\n <div class=\"text-side\">\n <div class=\"section-title\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div class=\"buttons-line\">\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton(button.route)\" [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\n {{button.label}}\n </button>\n </div>\n </div>\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:4rem;width:100%;justify-items:center}.main-card .text-side .section-title{width:60%;margin:auto}.main-card .text-side .buttons-line{width:100%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600}.main-card .illustration-side{margin:auto;width:40%;display:grid;justify-items:center}.main-card .illustration-side .side-img{width:30%}\n"] }]
|
|
852
|
-
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
853
|
-
type: Input
|
|
827
|
+
class CtaSectionStyleThreeComponent {
|
|
828
|
+
constructor(_router) {
|
|
829
|
+
this._router = _router;
|
|
830
|
+
}
|
|
831
|
+
ngOnInit() {
|
|
832
|
+
}
|
|
833
|
+
onClickCtaButton(route) {
|
|
834
|
+
this._router.navigate([route]);
|
|
835
|
+
}
|
|
836
|
+
}
|
|
837
|
+
CtaSectionStyleThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleThreeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
838
|
+
CtaSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleThreeComponent, selector: "cta-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\r\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage\">\r\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n </div>\r\n <div class=\"text-side\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton(button.route)\" [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:4rem;width:100%;justify-items:center}.main-card .text-side .section-title{width:60%;margin:auto}.main-card .text-side .buttons-line{width:100%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600}.main-card .illustration-side{margin:auto;width:40%;display:grid;justify-items:center}.main-card .illustration-side .side-img{width:30%}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
839
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleThreeComponent, decorators: [{
|
|
840
|
+
type: Component,
|
|
841
|
+
args: [{ selector: 'cta-section-style-three', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\r\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage\">\r\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n </div>\r\n <div class=\"text-side\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton(button.route)\" [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:4rem;width:100%;justify-items:center}.main-card .text-side .section-title{width:60%;margin:auto}.main-card .text-side .buttons-line{width:100%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600}.main-card .illustration-side{margin:auto;width:40%;display:grid;justify-items:center}.main-card .illustration-side .side-img{width:30%}\n"] }]
|
|
842
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
843
|
+
type: Input
|
|
854
844
|
}] } });
|
|
855
845
|
|
|
856
|
-
class HeaderSectionOneComponent {
|
|
857
|
-
constructor(_Router) {
|
|
858
|
-
this._Router = _Router;
|
|
859
|
-
}
|
|
860
|
-
onClickButton(route) {
|
|
861
|
-
this._Router.navigate([route]);
|
|
862
|
-
}
|
|
863
|
-
}
|
|
864
|
-
HeaderSectionOneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
865
|
-
HeaderSectionOneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HeaderSectionOneComponent, selector: "header-section-one", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\n <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\n <div class=\"section-content\">\n <div class=\"header-content-container\">\n <div class=\"title-desc\">\n <div class=\"title-part\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\n <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\n <button mat-raised-button (click)=\"onClickButton(button.route)\">\n {{button.label}}\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\n <img [src]=\"sectionContent.previewImage\">\n </div>\n </div>\n</div>", styles: ["
|
|
866
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, decorators: [{
|
|
867
|
-
type: Component,
|
|
868
|
-
args: [{ selector: 'header-section-one', template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\n <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\n <div class=\"section-content\">\n <div class=\"header-content-container\">\n <div class=\"title-desc\">\n <div class=\"title-part\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\n <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\n <button mat-raised-button (click)=\"onClickButton(button.route)\">\n {{button.label}}\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\n <img [src]=\"sectionContent.previewImage\">\n </div>\n </div>\n</div>", styles: ["
|
|
869
|
-
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
870
|
-
type: Input
|
|
846
|
+
class HeaderSectionOneComponent {
|
|
847
|
+
constructor(_Router) {
|
|
848
|
+
this._Router = _Router;
|
|
849
|
+
}
|
|
850
|
+
onClickButton(route) {
|
|
851
|
+
this._Router.navigate([route]);
|
|
852
|
+
}
|
|
853
|
+
}
|
|
854
|
+
HeaderSectionOneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
855
|
+
HeaderSectionOneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HeaderSectionOneComponent, selector: "header-section-one", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\r\n <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\r\n <div class=\"section-content\">\r\n <div class=\"header-content-container\">\r\n <div class=\"title-desc\">\r\n <div class=\"title-part\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\r\n <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\r\n <button mat-raised-button (click)=\"onClickButton(button.route)\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\r\n <img [src]=\"sectionContent.previewImage\">\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.image-title-sort{flex-direction:row-reverse}.title-image-sort{flex-direction:row}.image-background{position:relative}.image-background .bg-image{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;object-fit:cover;-moz-filter:blur(.2rem);filter:blur(.2rem)}.detail-head-block{box-shadow:#32325d40 0 .6rem 1.2rem -.2rem,#0000004d 0 .3rem .7rem -.3rem;margin-bottom:2rem;padding:10rem 0rem}.detail-head-block .section-content{display:flex;margin:auto;column-gap:2%;color:#fff;width:90%}@media only screen and (min-width: 1500px){.detail-head-block .section-content{width:150rem}}.detail-head-block .header-content-container{width:69%;padding-top:3rem}.detail-head-block .header-content-container .title-desc{width:100%;display:flex;flex-direction:column;row-gap:2rem}.detail-head-block .header-content-container .title-desc .title-part{width:80%;margin:auto}.detail-head-block .header-content-container .title-desc .main-buttons{display:flex;margin-top:4rem;column-gap:2rem;justify-content:center}.detail-head-block .header-content-container .title-desc .main-buttons button{padding:2rem;border-radius:.5rem;color:#fff;border:none;font-weight:400;font-size:2rem;font-weight:600;font-family:inherit;background-color:#155ed4}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn{transition:.15s ease-in-out}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn:hover{box-shadow:#64646f33 0 .7rem 2.9rem;transform:scale(1.05)}.detail-head-block .img-head{display:grid;height:100%;width:29%;padding:3rem 0rem;align-self:center;justify-items:center}.detail-head-block .img-head img{align-self:right;box-sizing:border-box;width:100%;height:35rem;object-fit:cover;border-radius:1rem;box-shadow:#959da533 0 .8rem 2.4rem}@media only screen and (max-width: 75em){.detail-head-block .header-content-container{width:59%}.detail-head-block .img-head{width:39%}.detail-head-block .img-head img{width:80%;height:40rem}}@media only screen and (min-width: 900px){.detail-head-block .header-content-container .title-desc .align-left-items{margin:auto;width:80%;justify-content:start}}@media only screen and (max-width: 56.25em){.detail-head-block{padding:0rem}.detail-head-block .section-content{display:flex;flex-wrap:wrap;flex-direction:column-reverse;width:100%}.detail-head-block .header-content-container{margin:auto;width:100%}.detail-head-block .header-content-container .title-desc{width:100%;display:grid;align-items:center;margin:2rem 0rem}.detail-head-block .img-head{justify-items:center;clip-path:none;border-radius:1.5rem;margin-top:3rem;width:100%}.detail-head-block .img-head img{height:40rem;width:65%;border-radius:1.5rem;object-fit:cover}}@media only screen and (max-width: 37.5em){.detail-head-block .img-head img{height:33rem;width:80%}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
856
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, decorators: [{
|
|
857
|
+
type: Component,
|
|
858
|
+
args: [{ selector: 'header-section-one', template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\r\n <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\r\n <div class=\"section-content\">\r\n <div class=\"header-content-container\">\r\n <div class=\"title-desc\">\r\n <div class=\"title-part\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\r\n <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\r\n <button mat-raised-button (click)=\"onClickButton(button.route)\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\r\n <img [src]=\"sectionContent.previewImage\">\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.image-title-sort{flex-direction:row-reverse}.title-image-sort{flex-direction:row}.image-background{position:relative}.image-background .bg-image{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;object-fit:cover;-moz-filter:blur(.2rem);filter:blur(.2rem)}.detail-head-block{box-shadow:#32325d40 0 .6rem 1.2rem -.2rem,#0000004d 0 .3rem .7rem -.3rem;margin-bottom:2rem;padding:10rem 0rem}.detail-head-block .section-content{display:flex;margin:auto;column-gap:2%;color:#fff;width:90%}@media only screen and (min-width: 1500px){.detail-head-block .section-content{width:150rem}}.detail-head-block .header-content-container{width:69%;padding-top:3rem}.detail-head-block .header-content-container .title-desc{width:100%;display:flex;flex-direction:column;row-gap:2rem}.detail-head-block .header-content-container .title-desc .title-part{width:80%;margin:auto}.detail-head-block .header-content-container .title-desc .main-buttons{display:flex;margin-top:4rem;column-gap:2rem;justify-content:center}.detail-head-block .header-content-container .title-desc .main-buttons button{padding:2rem;border-radius:.5rem;color:#fff;border:none;font-weight:400;font-size:2rem;font-weight:600;font-family:inherit;background-color:#155ed4}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn{transition:.15s ease-in-out}.detail-head-block .header-content-container .title-desc .main-buttons .orange-btn:hover{box-shadow:#64646f33 0 .7rem 2.9rem;transform:scale(1.05)}.detail-head-block .img-head{display:grid;height:100%;width:29%;padding:3rem 0rem;align-self:center;justify-items:center}.detail-head-block .img-head img{align-self:right;box-sizing:border-box;width:100%;height:35rem;object-fit:cover;border-radius:1rem;box-shadow:#959da533 0 .8rem 2.4rem}@media only screen and (max-width: 75em){.detail-head-block .header-content-container{width:59%}.detail-head-block .img-head{width:39%}.detail-head-block .img-head img{width:80%;height:40rem}}@media only screen and (min-width: 900px){.detail-head-block .header-content-container .title-desc .align-left-items{margin:auto;width:80%;justify-content:start}}@media only screen and (max-width: 56.25em){.detail-head-block{padding:0rem}.detail-head-block .section-content{display:flex;flex-wrap:wrap;flex-direction:column-reverse;width:100%}.detail-head-block .header-content-container{margin:auto;width:100%}.detail-head-block .header-content-container .title-desc{width:100%;display:grid;align-items:center;margin:2rem 0rem}.detail-head-block .img-head{justify-items:center;clip-path:none;border-radius:1.5rem;margin-top:3rem;width:100%}.detail-head-block .img-head img{height:40rem;width:65%;border-radius:1.5rem;object-fit:cover}}@media only screen and (max-width: 37.5em){.detail-head-block .img-head img{height:33rem;width:80%}}\n"] }]
|
|
859
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
860
|
+
type: Input
|
|
871
861
|
}] } });
|
|
872
862
|
|
|
873
|
-
class CustomTooltipComponent {
|
|
874
|
-
onMouseEnter() {
|
|
875
|
-
this.showDetails = true;
|
|
876
|
-
}
|
|
877
|
-
onMouseLeave() {
|
|
878
|
-
this.showDetails = false;
|
|
879
|
-
}
|
|
880
|
-
}
|
|
881
|
-
CustomTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
882
|
-
CustomTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomTooltipComponent, selector: "custom-tooltip", ngImport: i0, template: "<div (mouseleave)=\"onMouseLeave()\" class=\"icon\">\n <div (click)=\"onMouseEnter()\" (mouseenter)=\"onMouseEnter()\" class=\"icon-container\">\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n </div>\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n <ng-content></ng-content>\n </div>\n</div>", styles: ["
|
|
883
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, decorators: [{
|
|
884
|
-
type: Component,
|
|
885
|
-
args: [{ selector: 'custom-tooltip', template: "<div (mouseleave)=\"onMouseLeave()\" class=\"icon\">\n <div (click)=\"onMouseEnter()\" (mouseenter)=\"onMouseEnter()\" class=\"icon-container\">\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n </div>\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n <ng-content></ng-content>\n </div>\n</div>", styles: ["
|
|
863
|
+
class CustomTooltipComponent {
|
|
864
|
+
onMouseEnter() {
|
|
865
|
+
this.showDetails = true;
|
|
866
|
+
}
|
|
867
|
+
onMouseLeave() {
|
|
868
|
+
this.showDetails = false;
|
|
869
|
+
}
|
|
870
|
+
}
|
|
871
|
+
CustomTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
872
|
+
CustomTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomTooltipComponent, selector: "custom-tooltip", ngImport: i0, template: "<div (mouseleave)=\"onMouseLeave()\" class=\"icon\">\r\n <div (click)=\"onMouseEnter()\" (mouseenter)=\"onMouseEnter()\" class=\"icon-container\">\r\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\r\n </div>\r\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.icon{color:#32353b;display:inline-block;position:relative}.icon-shape{position:relative;z-index:-2}.tooltip-message-box{display:block;z-index:100;position:absolute;left:100%;top:-100%;transition:all .1s ease-in-out;z-index:1}.no-details{opacity:0;transform:scale(.1)}.details{opacity:1;transform:scale(1)}.icon-container{cursor:pointer;display:inline-block}\n"], dependencies: [{ kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
873
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, decorators: [{
|
|
874
|
+
type: Component,
|
|
875
|
+
args: [{ selector: 'custom-tooltip', template: "<div (mouseleave)=\"onMouseLeave()\" class=\"icon\">\r\n <div (click)=\"onMouseEnter()\" (mouseenter)=\"onMouseEnter()\" class=\"icon-container\">\r\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\r\n </div>\r\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.icon{color:#32353b;display:inline-block;position:relative}.icon-shape{position:relative;z-index:-2}.tooltip-message-box{display:block;z-index:100;position:absolute;left:100%;top:-100%;transition:all .1s ease-in-out;z-index:1}.no-details{opacity:0;transform:scale(.1)}.details{opacity:1;transform:scale(1)}.icon-container{cursor:pointer;display:inline-block}\n"] }]
|
|
886
876
|
}] });
|
|
887
877
|
|
|
888
|
-
class
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
878
|
+
class JoolerWebsitesSharedModule {
|
|
879
|
+
}
|
|
880
|
+
JoolerWebsitesSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
881
|
+
JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, declarations: [SocialMediaIconsComponent,
|
|
882
|
+
ComingSoonComponent,
|
|
883
|
+
AchievementsComponent,
|
|
884
|
+
CallToActionSectionComponent,
|
|
885
|
+
GetStartedCTAComponent,
|
|
886
|
+
ImageGalleryModal,
|
|
887
|
+
PageSectionStyleTenComponent,
|
|
888
|
+
PageSectionStyleThirteenComponent,
|
|
889
|
+
PricingPlansComponent,
|
|
890
|
+
SectionTitleComponent,
|
|
891
|
+
SuccessMessageDialogComponent,
|
|
892
|
+
TeamComponent,
|
|
893
|
+
ValuesComponent,
|
|
894
|
+
OurClientsComponent,
|
|
895
|
+
OurClientListingComponent,
|
|
896
|
+
PageSectionWithMultipleCardsComponent,
|
|
897
|
+
CallToActionSectionTwoComponent,
|
|
898
|
+
CtaSectionStyleFourComponent,
|
|
899
|
+
ContactUsPageComponent,
|
|
900
|
+
ChooseCountryWithFlagComponent,
|
|
901
|
+
PageSectionStyleThreeComponent,
|
|
902
|
+
FaqCategoryListingComponent,
|
|
903
|
+
FaqListingComponent,
|
|
904
|
+
ValuePropsSectionComponent,
|
|
905
|
+
CtaSectionStyleThreeComponent,
|
|
906
|
+
HeaderSectionOneComponent,
|
|
907
|
+
CustomTooltipComponent], imports: [FontAwesomeModule,
|
|
908
|
+
CommonModule,
|
|
909
|
+
AppMaterialModule,
|
|
910
|
+
FontAwesomeSharedModule,
|
|
911
|
+
GalleriaModule,
|
|
912
|
+
CarouselModule,
|
|
913
|
+
ReactiveFormsModule,
|
|
914
|
+
FormsModule,
|
|
915
|
+
NgSelectModule,
|
|
916
|
+
MatTooltipModule], exports: [FontAwesomeModule,
|
|
917
|
+
AppMaterialModule,
|
|
918
|
+
SectionTitleComponent,
|
|
919
|
+
PageSectionStyleTenComponent,
|
|
920
|
+
FontAwesomeSharedModule,
|
|
921
|
+
GetStartedCTAComponent,
|
|
922
|
+
AchievementsComponent,
|
|
923
|
+
PricingPlansComponent,
|
|
924
|
+
PageSectionStyleThirteenComponent,
|
|
925
|
+
ImageGalleryModal,
|
|
926
|
+
SuccessMessageDialogComponent,
|
|
927
|
+
CallToActionSectionComponent,
|
|
928
|
+
TeamComponent,
|
|
929
|
+
ValuesComponent,
|
|
930
|
+
OurClientsComponent,
|
|
931
|
+
OurClientListingComponent,
|
|
932
|
+
PageSectionWithMultipleCardsComponent,
|
|
933
|
+
CallToActionSectionTwoComponent,
|
|
934
|
+
ContactUsPageComponent,
|
|
935
|
+
ChooseCountryWithFlagComponent,
|
|
936
|
+
PageSectionStyleThreeComponent,
|
|
937
|
+
ComingSoonComponent,
|
|
938
|
+
SocialMediaIconsComponent,
|
|
939
|
+
MatTooltipModule,
|
|
940
|
+
FaqCategoryListingComponent,
|
|
941
|
+
FaqListingComponent,
|
|
942
|
+
ValuePropsSectionComponent,
|
|
943
|
+
CtaSectionStyleFourComponent,
|
|
944
|
+
CtaSectionStyleThreeComponent,
|
|
945
|
+
HeaderSectionOneComponent,
|
|
946
|
+
CustomTooltipComponent] });
|
|
947
|
+
JoolerWebsitesSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, imports: [FontAwesomeModule,
|
|
948
|
+
CommonModule,
|
|
949
|
+
AppMaterialModule,
|
|
950
|
+
FontAwesomeSharedModule,
|
|
951
|
+
GalleriaModule,
|
|
952
|
+
CarouselModule,
|
|
953
|
+
ReactiveFormsModule,
|
|
954
|
+
FormsModule,
|
|
955
|
+
NgSelectModule,
|
|
956
|
+
MatTooltipModule, FontAwesomeModule,
|
|
957
|
+
AppMaterialModule,
|
|
958
|
+
FontAwesomeSharedModule,
|
|
959
|
+
MatTooltipModule] });
|
|
960
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, decorators: [{
|
|
961
|
+
type: NgModule,
|
|
962
|
+
args: [{
|
|
963
|
+
declarations: [
|
|
964
|
+
SocialMediaIconsComponent,
|
|
965
|
+
ComingSoonComponent,
|
|
966
|
+
AchievementsComponent,
|
|
967
|
+
CallToActionSectionComponent,
|
|
968
|
+
GetStartedCTAComponent,
|
|
969
|
+
ImageGalleryModal,
|
|
970
|
+
PageSectionStyleTenComponent,
|
|
971
|
+
PageSectionStyleThirteenComponent,
|
|
972
|
+
PricingPlansComponent,
|
|
973
|
+
SectionTitleComponent,
|
|
974
|
+
SuccessMessageDialogComponent,
|
|
975
|
+
TeamComponent,
|
|
976
|
+
ValuesComponent,
|
|
977
|
+
OurClientsComponent,
|
|
978
|
+
OurClientListingComponent,
|
|
979
|
+
PageSectionWithMultipleCardsComponent,
|
|
980
|
+
CallToActionSectionTwoComponent,
|
|
981
|
+
CtaSectionStyleFourComponent,
|
|
982
|
+
ContactUsPageComponent,
|
|
983
|
+
ChooseCountryWithFlagComponent,
|
|
984
|
+
PageSectionStyleThreeComponent,
|
|
985
|
+
FaqCategoryListingComponent,
|
|
986
|
+
FaqListingComponent,
|
|
987
|
+
ValuePropsSectionComponent,
|
|
988
|
+
CtaSectionStyleThreeComponent,
|
|
989
|
+
HeaderSectionOneComponent,
|
|
990
|
+
CustomTooltipComponent
|
|
991
|
+
],
|
|
992
|
+
imports: [
|
|
993
|
+
FontAwesomeModule,
|
|
994
|
+
CommonModule,
|
|
995
|
+
AppMaterialModule,
|
|
996
|
+
FontAwesomeSharedModule,
|
|
997
|
+
GalleriaModule,
|
|
998
|
+
CarouselModule,
|
|
999
|
+
ReactiveFormsModule,
|
|
1000
|
+
FormsModule,
|
|
1001
|
+
NgSelectModule,
|
|
1002
|
+
MatTooltipModule
|
|
1003
|
+
],
|
|
1004
|
+
exports: [
|
|
1005
|
+
FontAwesomeModule,
|
|
1006
|
+
AppMaterialModule,
|
|
1007
|
+
SectionTitleComponent,
|
|
1008
|
+
PageSectionStyleTenComponent,
|
|
1009
|
+
FontAwesomeSharedModule,
|
|
1010
|
+
GetStartedCTAComponent,
|
|
1011
|
+
AchievementsComponent,
|
|
1012
|
+
PricingPlansComponent,
|
|
1013
|
+
PageSectionStyleThirteenComponent,
|
|
1014
|
+
ImageGalleryModal,
|
|
1015
|
+
SuccessMessageDialogComponent,
|
|
1016
|
+
CallToActionSectionComponent,
|
|
1017
|
+
TeamComponent,
|
|
1018
|
+
ValuesComponent,
|
|
1019
|
+
OurClientsComponent,
|
|
1020
|
+
OurClientListingComponent,
|
|
1021
|
+
PageSectionWithMultipleCardsComponent,
|
|
1022
|
+
CallToActionSectionTwoComponent,
|
|
1023
|
+
ContactUsPageComponent,
|
|
1024
|
+
ChooseCountryWithFlagComponent,
|
|
1025
|
+
PageSectionStyleThreeComponent,
|
|
1026
|
+
ComingSoonComponent,
|
|
1027
|
+
SocialMediaIconsComponent,
|
|
1028
|
+
MatTooltipModule,
|
|
1029
|
+
FaqCategoryListingComponent,
|
|
1030
|
+
FaqListingComponent,
|
|
1031
|
+
ValuePropsSectionComponent,
|
|
1032
|
+
CtaSectionStyleFourComponent,
|
|
1033
|
+
CtaSectionStyleThreeComponent,
|
|
1034
|
+
HeaderSectionOneComponent,
|
|
1035
|
+
CustomTooltipComponent
|
|
1036
|
+
]
|
|
1037
|
+
}]
|
|
1038
|
+
}] });
|
|
989
1039
|
|
|
990
|
-
class
|
|
1040
|
+
class PageSection {
|
|
991
1041
|
}
|
|
992
|
-
JoolerWebsitesSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
993
|
-
JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, declarations: [SocialMediaIconsComponent,
|
|
994
|
-
ComingSoonComponent,
|
|
995
|
-
AchievementsComponent,
|
|
996
|
-
CallToActionSectionComponent,
|
|
997
|
-
GetStartedCTAComponent,
|
|
998
|
-
ImageGalleryModal,
|
|
999
|
-
PageSectionStyleTenComponent,
|
|
1000
|
-
PageSectionStyleThirteenComponent,
|
|
1001
|
-
PricingPlansComponent,
|
|
1002
|
-
SectionTitleComponent,
|
|
1003
|
-
SuccessMessageDialogComponent,
|
|
1004
|
-
TeamComponent,
|
|
1005
|
-
ValuesComponent,
|
|
1006
|
-
OurClientsComponent,
|
|
1007
|
-
OurClientListingComponent,
|
|
1008
|
-
PageSectionWithMultipleCardsComponent,
|
|
1009
|
-
CallToActionSectionTwoComponent,
|
|
1010
|
-
CtaSectionStyleFourComponent,
|
|
1011
|
-
ContactUsPageComponent,
|
|
1012
|
-
ChooseCountryWithFlagComponent,
|
|
1013
|
-
PageSectionStyleThreeComponent,
|
|
1014
|
-
FaqCategoryListingComponent,
|
|
1015
|
-
FaqListingComponent,
|
|
1016
|
-
ValuePropsSectionComponent,
|
|
1017
|
-
CtaSectionStyleThreeComponent,
|
|
1018
|
-
HeaderSectionOneComponent,
|
|
1019
|
-
CustomTooltipComponent,
|
|
1020
|
-
FeatureSectionOneComponent,
|
|
1021
|
-
FeatureSectionTwoComponent,
|
|
1022
|
-
FeatureSectionThreeComponent,
|
|
1023
|
-
FeatureSectionFourComponent,
|
|
1024
|
-
VerticalSideTabsComponent], imports: [FontAwesomeModule,
|
|
1025
|
-
CommonModule,
|
|
1026
|
-
AppMaterialModule,
|
|
1027
|
-
FontAwesomeSharedModule,
|
|
1028
|
-
GalleriaModule,
|
|
1029
|
-
CarouselModule,
|
|
1030
|
-
ReactiveFormsModule,
|
|
1031
|
-
FormsModule,
|
|
1032
|
-
NgSelectModule,
|
|
1033
|
-
MatTooltipModule], exports: [FontAwesomeModule,
|
|
1034
|
-
AppMaterialModule,
|
|
1035
|
-
SectionTitleComponent,
|
|
1036
|
-
PageSectionStyleTenComponent,
|
|
1037
|
-
FontAwesomeSharedModule,
|
|
1038
|
-
GetStartedCTAComponent,
|
|
1039
|
-
AchievementsComponent,
|
|
1040
|
-
PricingPlansComponent,
|
|
1041
|
-
PageSectionStyleThirteenComponent,
|
|
1042
|
-
ImageGalleryModal,
|
|
1043
|
-
SuccessMessageDialogComponent,
|
|
1044
|
-
CallToActionSectionComponent,
|
|
1045
|
-
TeamComponent,
|
|
1046
|
-
ValuesComponent,
|
|
1047
|
-
OurClientsComponent,
|
|
1048
|
-
OurClientListingComponent,
|
|
1049
|
-
PageSectionWithMultipleCardsComponent,
|
|
1050
|
-
CallToActionSectionTwoComponent,
|
|
1051
|
-
ContactUsPageComponent,
|
|
1052
|
-
ChooseCountryWithFlagComponent,
|
|
1053
|
-
PageSectionStyleThreeComponent,
|
|
1054
|
-
ComingSoonComponent,
|
|
1055
|
-
SocialMediaIconsComponent,
|
|
1056
|
-
MatTooltipModule,
|
|
1057
|
-
FaqCategoryListingComponent,
|
|
1058
|
-
FaqListingComponent,
|
|
1059
|
-
ValuePropsSectionComponent,
|
|
1060
|
-
CtaSectionStyleFourComponent,
|
|
1061
|
-
CtaSectionStyleThreeComponent,
|
|
1062
|
-
HeaderSectionOneComponent,
|
|
1063
|
-
CustomTooltipComponent,
|
|
1064
|
-
FeatureSectionOneComponent,
|
|
1065
|
-
FeatureSectionTwoComponent,
|
|
1066
|
-
FeatureSectionThreeComponent,
|
|
1067
|
-
FeatureSectionFourComponent,
|
|
1068
|
-
VerticalSideTabsComponent] });
|
|
1069
|
-
JoolerWebsitesSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, imports: [FontAwesomeModule,
|
|
1070
|
-
CommonModule,
|
|
1071
|
-
AppMaterialModule,
|
|
1072
|
-
FontAwesomeSharedModule,
|
|
1073
|
-
GalleriaModule,
|
|
1074
|
-
CarouselModule,
|
|
1075
|
-
ReactiveFormsModule,
|
|
1076
|
-
FormsModule,
|
|
1077
|
-
NgSelectModule,
|
|
1078
|
-
MatTooltipModule, FontAwesomeModule,
|
|
1079
|
-
AppMaterialModule,
|
|
1080
|
-
FontAwesomeSharedModule,
|
|
1081
|
-
MatTooltipModule] });
|
|
1082
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, decorators: [{
|
|
1083
|
-
type: NgModule,
|
|
1084
|
-
args: [{
|
|
1085
|
-
declarations: [
|
|
1086
|
-
SocialMediaIconsComponent,
|
|
1087
|
-
ComingSoonComponent,
|
|
1088
|
-
AchievementsComponent,
|
|
1089
|
-
CallToActionSectionComponent,
|
|
1090
|
-
GetStartedCTAComponent,
|
|
1091
|
-
ImageGalleryModal,
|
|
1092
|
-
PageSectionStyleTenComponent,
|
|
1093
|
-
PageSectionStyleThirteenComponent,
|
|
1094
|
-
PricingPlansComponent,
|
|
1095
|
-
SectionTitleComponent,
|
|
1096
|
-
SuccessMessageDialogComponent,
|
|
1097
|
-
TeamComponent,
|
|
1098
|
-
ValuesComponent,
|
|
1099
|
-
OurClientsComponent,
|
|
1100
|
-
OurClientListingComponent,
|
|
1101
|
-
PageSectionWithMultipleCardsComponent,
|
|
1102
|
-
CallToActionSectionTwoComponent,
|
|
1103
|
-
CtaSectionStyleFourComponent,
|
|
1104
|
-
ContactUsPageComponent,
|
|
1105
|
-
ChooseCountryWithFlagComponent,
|
|
1106
|
-
PageSectionStyleThreeComponent,
|
|
1107
|
-
FaqCategoryListingComponent,
|
|
1108
|
-
FaqListingComponent,
|
|
1109
|
-
ValuePropsSectionComponent,
|
|
1110
|
-
CtaSectionStyleThreeComponent,
|
|
1111
|
-
HeaderSectionOneComponent,
|
|
1112
|
-
CustomTooltipComponent,
|
|
1113
|
-
FeatureSectionOneComponent,
|
|
1114
|
-
FeatureSectionTwoComponent,
|
|
1115
|
-
FeatureSectionThreeComponent,
|
|
1116
|
-
FeatureSectionFourComponent,
|
|
1117
|
-
VerticalSideTabsComponent
|
|
1118
|
-
],
|
|
1119
|
-
imports: [
|
|
1120
|
-
FontAwesomeModule,
|
|
1121
|
-
CommonModule,
|
|
1122
|
-
AppMaterialModule,
|
|
1123
|
-
FontAwesomeSharedModule,
|
|
1124
|
-
GalleriaModule,
|
|
1125
|
-
CarouselModule,
|
|
1126
|
-
ReactiveFormsModule,
|
|
1127
|
-
FormsModule,
|
|
1128
|
-
NgSelectModule,
|
|
1129
|
-
MatTooltipModule
|
|
1130
|
-
],
|
|
1131
|
-
exports: [
|
|
1132
|
-
FontAwesomeModule,
|
|
1133
|
-
AppMaterialModule,
|
|
1134
|
-
SectionTitleComponent,
|
|
1135
|
-
PageSectionStyleTenComponent,
|
|
1136
|
-
FontAwesomeSharedModule,
|
|
1137
|
-
GetStartedCTAComponent,
|
|
1138
|
-
AchievementsComponent,
|
|
1139
|
-
PricingPlansComponent,
|
|
1140
|
-
PageSectionStyleThirteenComponent,
|
|
1141
|
-
ImageGalleryModal,
|
|
1142
|
-
SuccessMessageDialogComponent,
|
|
1143
|
-
CallToActionSectionComponent,
|
|
1144
|
-
TeamComponent,
|
|
1145
|
-
ValuesComponent,
|
|
1146
|
-
OurClientsComponent,
|
|
1147
|
-
OurClientListingComponent,
|
|
1148
|
-
PageSectionWithMultipleCardsComponent,
|
|
1149
|
-
CallToActionSectionTwoComponent,
|
|
1150
|
-
ContactUsPageComponent,
|
|
1151
|
-
ChooseCountryWithFlagComponent,
|
|
1152
|
-
PageSectionStyleThreeComponent,
|
|
1153
|
-
ComingSoonComponent,
|
|
1154
|
-
SocialMediaIconsComponent,
|
|
1155
|
-
MatTooltipModule,
|
|
1156
|
-
FaqCategoryListingComponent,
|
|
1157
|
-
FaqListingComponent,
|
|
1158
|
-
ValuePropsSectionComponent,
|
|
1159
|
-
CtaSectionStyleFourComponent,
|
|
1160
|
-
CtaSectionStyleThreeComponent,
|
|
1161
|
-
HeaderSectionOneComponent,
|
|
1162
|
-
CustomTooltipComponent,
|
|
1163
|
-
FeatureSectionOneComponent,
|
|
1164
|
-
FeatureSectionTwoComponent,
|
|
1165
|
-
FeatureSectionThreeComponent,
|
|
1166
|
-
FeatureSectionFourComponent,
|
|
1167
|
-
VerticalSideTabsComponent
|
|
1168
|
-
]
|
|
1169
|
-
}]
|
|
1170
|
-
}] });
|
|
1171
1042
|
|
|
1172
|
-
class
|
|
1043
|
+
class PageSectionAction {
|
|
1173
1044
|
}
|
|
1174
1045
|
|
|
1175
|
-
class
|
|
1046
|
+
class Achievements {
|
|
1176
1047
|
}
|
|
1177
1048
|
|
|
1178
|
-
class
|
|
1049
|
+
class Achievement {
|
|
1179
1050
|
}
|
|
1180
1051
|
|
|
1181
|
-
class
|
|
1052
|
+
class ServicePlan {
|
|
1182
1053
|
}
|
|
1183
1054
|
|
|
1184
|
-
class
|
|
1055
|
+
class CallToActionSectionData {
|
|
1185
1056
|
}
|
|
1186
1057
|
|
|
1187
|
-
class ImageSectionAction {
|
|
1058
|
+
class ImageSectionAction {
|
|
1188
1059
|
}
|
|
1189
1060
|
|
|
1190
|
-
class ImageSection {
|
|
1061
|
+
class ImageSection {
|
|
1191
1062
|
}
|
|
1192
1063
|
|
|
1193
|
-
class TeamMember {
|
|
1064
|
+
class TeamMember {
|
|
1194
1065
|
}
|
|
1195
1066
|
|
|
1196
|
-
class TeamSection {
|
|
1067
|
+
class TeamSection {
|
|
1197
1068
|
}
|
|
1198
1069
|
|
|
1199
|
-
class PageSectionStyleFive {
|
|
1070
|
+
class PageSectionStyleFive {
|
|
1200
1071
|
}
|
|
1201
1072
|
|
|
1202
|
-
var AccountType;
|
|
1203
|
-
(function (AccountType) {
|
|
1204
|
-
AccountType[AccountType["CONSUMERCLIENT"] = 0] = "CONSUMERCLIENT";
|
|
1205
|
-
AccountType[AccountType["BUSINESSCLIENT"] = 1] = "BUSINESSCLIENT";
|
|
1206
|
-
AccountType[AccountType["SUPPLIER"] = 2] = "SUPPLIER";
|
|
1207
|
-
AccountType[AccountType["COMPANY"] = 3] = "COMPANY";
|
|
1208
|
-
AccountType[AccountType["CERTIFICATIONENTTIY"] = 4] = "CERTIFICATIONENTTIY";
|
|
1073
|
+
var AccountType;
|
|
1074
|
+
(function (AccountType) {
|
|
1075
|
+
AccountType[AccountType["CONSUMERCLIENT"] = 0] = "CONSUMERCLIENT";
|
|
1076
|
+
AccountType[AccountType["BUSINESSCLIENT"] = 1] = "BUSINESSCLIENT";
|
|
1077
|
+
AccountType[AccountType["SUPPLIER"] = 2] = "SUPPLIER";
|
|
1078
|
+
AccountType[AccountType["COMPANY"] = 3] = "COMPANY";
|
|
1079
|
+
AccountType[AccountType["CERTIFICATIONENTTIY"] = 4] = "CERTIFICATIONENTTIY";
|
|
1209
1080
|
})(AccountType || (AccountType = {}));
|
|
1210
1081
|
|
|
1211
|
-
class Account {
|
|
1082
|
+
class Account {
|
|
1212
1083
|
}
|
|
1213
1084
|
|
|
1214
|
-
class Address {
|
|
1085
|
+
class Address {
|
|
1215
1086
|
}
|
|
1216
1087
|
|
|
1217
|
-
class City {
|
|
1088
|
+
class City {
|
|
1218
1089
|
}
|
|
1219
1090
|
|
|
1220
|
-
class Country {
|
|
1091
|
+
class Country {
|
|
1221
1092
|
}
|
|
1222
1093
|
|
|
1223
|
-
var UserType;
|
|
1224
|
-
(function (UserType) {
|
|
1225
|
-
UserType[UserType["CONSUMER"] = 0] = "CONSUMER";
|
|
1226
|
-
UserType[UserType["ERP"] = 1] = "ERP";
|
|
1227
|
-
UserType[UserType["SECOND_LEVEL"] = 2] = "SECOND_LEVEL";
|
|
1228
|
-
UserType[UserType["ADMIN"] = 3] = "ADMIN";
|
|
1094
|
+
var UserType;
|
|
1095
|
+
(function (UserType) {
|
|
1096
|
+
UserType[UserType["CONSUMER"] = 0] = "CONSUMER";
|
|
1097
|
+
UserType[UserType["ERP"] = 1] = "ERP";
|
|
1098
|
+
UserType[UserType["SECOND_LEVEL"] = 2] = "SECOND_LEVEL";
|
|
1099
|
+
UserType[UserType["ADMIN"] = 3] = "ADMIN";
|
|
1229
1100
|
})(UserType || (UserType = {}));
|
|
1230
1101
|
|
|
1231
|
-
class User {
|
|
1102
|
+
class User {
|
|
1232
1103
|
}
|
|
1233
1104
|
|
|
1234
|
-
class CallToActionSectionTwo {
|
|
1105
|
+
class CallToActionSectionTwo {
|
|
1235
1106
|
}
|
|
1236
1107
|
|
|
1237
|
-
class LinkText {
|
|
1108
|
+
class LinkText {
|
|
1238
1109
|
}
|
|
1239
1110
|
|
|
1240
|
-
class socialMediaLinks {
|
|
1111
|
+
class socialMediaLinks {
|
|
1241
1112
|
}
|
|
1242
1113
|
|
|
1243
|
-
class Perks {
|
|
1114
|
+
class Perks {
|
|
1244
1115
|
}
|
|
1245
1116
|
|
|
1246
|
-
class FAQCategory {
|
|
1117
|
+
class FAQCategory {
|
|
1247
1118
|
}
|
|
1248
1119
|
|
|
1249
|
-
class FAQSubcategory {
|
|
1120
|
+
class FAQSubcategory {
|
|
1250
1121
|
}
|
|
1251
1122
|
|
|
1252
|
-
class FAQ {
|
|
1123
|
+
class FAQ {
|
|
1253
1124
|
}
|
|
1254
1125
|
|
|
1255
|
-
class callToActionButton {
|
|
1126
|
+
class callToActionButton {
|
|
1256
1127
|
}
|
|
1257
1128
|
|
|
1258
|
-
/*
|
|
1259
|
-
* Public API Surface of jooler-websites-shared
|
|
1129
|
+
/*
|
|
1130
|
+
* Public API Surface of jooler-websites-shared
|
|
1260
1131
|
*/
|
|
1261
1132
|
|
|
1262
|
-
/**
|
|
1263
|
-
* Generated bundle index. Do not edit.
|
|
1133
|
+
/**
|
|
1134
|
+
* Generated bundle index. Do not edit.
|
|
1264
1135
|
*/
|
|
1265
1136
|
|
|
1266
|
-
export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, CallToActionSectionTwo, CallToActionSectionTwoComponent, ChooseCountryWithFlagComponent, City, ComingSoonComponent, ContactUsPageComponent, Country, CtaSectionStyleFourComponent, CtaSectionStyleThreeComponent, CustomTooltipComponent, FAQ, FAQCategory, FAQSubcategory, FaqCategoryListingComponent, FaqListingComponent,
|
|
1137
|
+
export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, CallToActionSectionData, CallToActionSectionTwo, CallToActionSectionTwoComponent, ChooseCountryWithFlagComponent, City, ComingSoonComponent, ContactUsPageComponent, Country, CtaSectionStyleFourComponent, CtaSectionStyleThreeComponent, CustomTooltipComponent, FAQ, FAQCategory, FAQSubcategory, FaqCategoryListingComponent, FaqListingComponent, GetStartedCTAComponent, HeaderSectionOneComponent, ImageGalleryModal, ImageSection, ImageSectionAction, JoolerWebsitesSharedModule, LinkText, OurClientListingComponent, OurClientsComponent, PageSection, PageSectionAction, PageSectionStyleFive, PageSectionStyleTenComponent, PageSectionStyleThirteen, PageSectionStyleThirteenComponent, PageSectionStyleThreeComponent, PageSectionWithMultipleCardsComponent, Perks, PricingPlansComponent, SectionTitleComponent, ServicePlan, SocialMediaIconsComponent, SuccessMessageDialogComponent, TeamComponent, TeamMember, TeamSection, User, UserType, ValuePropsSectionComponent, ValuesComponent, callToActionButton, socialMediaLinks };
|
|
1267
1138
|
//# sourceMappingURL=jooler-websites-shared.mjs.map
|