@jooler/jooler-websites-shared 0.0.155 → 0.0.157
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/esm2020/lib/achievements/achievements.component.mjs +2 -2
- package/esm2020/lib/call-to-action-section/call-to-action-section.component.mjs +2 -2
- package/esm2020/lib/call-to-action-section-two/call-to-action-section-two.component.mjs +2 -2
- package/esm2020/lib/coming-soon/coming-soon.component.mjs +2 -2
- package/esm2020/lib/contact-us-page/contact-us-page.component.mjs +2 -2
- package/esm2020/lib/cta-section-style-four/cta-section-style-four.component.mjs +2 -2
- package/esm2020/lib/custom-tooltip/custom-tooltip.component.mjs +2 -2
- package/esm2020/lib/faq-category-listing/faq-category-listing.component.mjs +2 -2
- package/esm2020/lib/faq-listing/faq-listing.component.mjs +2 -2
- package/esm2020/lib/get-started-cta/get-started-cta.component.mjs +2 -2
- package/esm2020/lib/header-section-one/header-section-one.component.mjs +2 -2
- package/esm2020/lib/image-gallery-modal/image-gallery-modal.component.mjs +3 -3
- package/esm2020/lib/jooler-websites-shared.module.mjs +2 -62
- package/esm2020/lib/our-client-listing/our-client-listing.component.mjs +2 -2
- package/esm2020/lib/our-clients/our-clients.component.mjs +2 -2
- package/esm2020/lib/page-section-style-ten/page-section-style-ten.component.mjs +2 -2
- package/esm2020/lib/page-section-style-thirteen/page-section-style-thirteen.component.mjs +2 -2
- package/esm2020/lib/page-section-style-three/page-section-style-three.component.mjs +2 -2
- package/esm2020/lib/page-section-with-multiple-cards/page-section-with-multiple-cards.component.mjs +2 -2
- package/esm2020/lib/pricing-plans/pricing-plans.component.mjs +2 -2
- package/esm2020/lib/section-title/section-title.component.mjs +2 -2
- package/esm2020/lib/success-message-dialog/success-message-dialog.component.mjs +2 -2
- package/esm2020/lib/team/team.component.mjs +2 -2
- package/esm2020/lib/value-props-section/value-props-section.component.mjs +2 -2
- package/esm2020/lib/values/values.component.mjs +2 -2
- package/esm2020/lib/vertical-side-tabs/vertical-side-tabs.component.mjs +2 -2
- package/esm2020/public-api.mjs +1 -13
- package/fesm2015/jooler-websites-shared.mjs +70 -382
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +70 -382
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/lib/jooler-websites-shared.module.d.ts +11 -23
- package/package.json +1 -1
- package/public-api.d.ts +0 -12
- package/esm2020/lib/feature-detail-item-one/feature-detail-item-one.component.mjs +0 -14
- package/esm2020/lib/feature-detail-item-three/feature-detail-item-three.component.mjs +0 -28
- package/esm2020/lib/feature-detail-item-two/feature-detail-item-two.component.mjs +0 -13
- package/esm2020/lib/feature-section-eight/feature-section-eight.component.mjs +0 -17
- package/esm2020/lib/feature-section-five/feature-section-five.component.mjs +0 -24
- package/esm2020/lib/feature-section-four/feature-section-four.component.mjs +0 -31
- package/esm2020/lib/feature-section-nine/feature-section-nine.component.mjs +0 -22
- package/esm2020/lib/feature-section-one/feature-section-one.component.mjs +0 -23
- package/esm2020/lib/feature-section-seven/feature-section-seven.component.mjs +0 -32
- package/esm2020/lib/feature-section-six/feature-section-six.component.mjs +0 -77
- 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/lib/feature-detail-item-one/feature-detail-item-one.component.d.ts +0 -6
- package/lib/feature-detail-item-three/feature-detail-item-three.component.d.ts +0 -11
- package/lib/feature-detail-item-two/feature-detail-item-two.component.d.ts +0 -6
- package/lib/feature-section-eight/feature-section-eight.component.d.ts +0 -6
- package/lib/feature-section-five/feature-section-five.component.d.ts +0 -10
- package/lib/feature-section-four/feature-section-four.component.d.ts +0 -10
- package/lib/feature-section-nine/feature-section-nine.component.d.ts +0 -9
- package/lib/feature-section-one/feature-section-one.component.d.ts +0 -8
- package/lib/feature-section-seven/feature-section-seven.component.d.ts +0 -11
- package/lib/feature-section-six/feature-section-six.component.d.ts +0 -19
- 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
|
@@ -23,18 +23,16 @@ import * as i3$3 from '@angular/forms';
|
|
|
23
23
|
import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
24
24
|
import * as i3$4 from '@ng-select/ng-select';
|
|
25
25
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i1$3 from '@angular/material/icon';
|
|
27
27
|
import * as i3$5 from '@angular/material/card';
|
|
28
|
-
import * as i2$2 from '@angular/material/tabs';
|
|
29
|
-
import * as i2$3 from '@angular/material/stepper';
|
|
30
28
|
|
|
31
29
|
class SectionTitleComponent {
|
|
32
30
|
}
|
|
33
31
|
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\" *ngIf=\"sectionTitle.title\">{{sectionTitle.title | titlecase}}</div>\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\n </div>\n </div>\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\n {{sectionTitle.subtitle}}\n </div>\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%}}
|
|
32
|
+
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\" *ngIf=\"sectionTitle.title\">{{sectionTitle.title | titlecase}}</div>\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\n </div>\n </div>\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\n {{sectionTitle.subtitle}}\n </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
|
|
35
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, decorators: [{
|
|
36
34
|
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\" *ngIf=\"sectionTitle.title\">{{sectionTitle.title | titlecase}}</div>\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\n </div>\n </div>\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\n {{sectionTitle.subtitle}}\n </div>\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%}}
|
|
35
|
+
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\" *ngIf=\"sectionTitle.title\">{{sectionTitle.title | titlecase}}</div>\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\n </div>\n </div>\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\n {{sectionTitle.subtitle}}\n </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
38
36
|
}], propDecorators: { sectionTitle: [{
|
|
39
37
|
type: Input
|
|
40
38
|
}] } });
|
|
@@ -53,10 +51,10 @@ class PageSectionStyleTenComponent {
|
|
|
53
51
|
}
|
|
54
52
|
}
|
|
55
53
|
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: ["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%}}
|
|
54
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
57
55
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, decorators: [{
|
|
58
56
|
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: ["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%}}
|
|
57
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
60
58
|
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
61
59
|
type: Input
|
|
62
60
|
}], iconName: [{
|
|
@@ -77,10 +75,10 @@ class GetStartedCTAComponent {
|
|
|
77
75
|
}
|
|
78
76
|
}
|
|
79
77
|
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: ["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%}}
|
|
78
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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$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"] }] });
|
|
81
79
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GetStartedCTAComponent, decorators: [{
|
|
82
80
|
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: ["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%}}
|
|
81
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
84
82
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { ctaCardData: [{
|
|
85
83
|
type: Input
|
|
86
84
|
}] } });
|
|
@@ -90,10 +88,10 @@ class AchievementsComponent {
|
|
|
90
88
|
ngOnInit() { }
|
|
91
89
|
}
|
|
92
90
|
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: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': sectionContent.sectionTitle.isDarkBg}\">\n <div class=\"content\">\n <div>\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\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%}}
|
|
91
|
+
AchievementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AchievementsComponent, selector: "achievements", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': sectionContent.sectionTitle.isDarkBg}\">\n <div class=\"content\">\n <div>\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
94
92
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, decorators: [{
|
|
95
93
|
type: Component,
|
|
96
|
-
args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': sectionContent.sectionTitle.isDarkBg}\">\n <div class=\"content\">\n <div>\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\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%}}
|
|
94
|
+
args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': sectionContent.sectionTitle.isDarkBg}\">\n <div class=\"content\">\n <div>\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
97
95
|
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
98
96
|
type: Input
|
|
99
97
|
}] } });
|
|
@@ -107,10 +105,10 @@ class PricingPlansComponent {
|
|
|
107
105
|
}
|
|
108
106
|
}
|
|
109
107
|
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: ["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%}}
|
|
108
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
111
109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, decorators: [{
|
|
112
110
|
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: ["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%}}
|
|
111
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
114
112
|
}], ctorParameters: function () { return []; }, propDecorators: { servicePlan: [{
|
|
115
113
|
type: Input
|
|
116
114
|
}] } });
|
|
@@ -192,7 +190,7 @@ class ImageGalleryModal {
|
|
|
192
190
|
}
|
|
193
191
|
}
|
|
194
192
|
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: ["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%}}
|
|
193
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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: [
|
|
196
194
|
trigger('animation', [
|
|
197
195
|
transition('void => visible', [
|
|
198
196
|
style({ transform: 'scale(0.5)' }),
|
|
@@ -229,7 +227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
229
227
|
animate('50ms', style({ opacity: 0.8 }))
|
|
230
228
|
])
|
|
231
229
|
])
|
|
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: ["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%}}
|
|
230
|
+
], 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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
233
231
|
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { galleryData: [{
|
|
234
232
|
type: Input
|
|
235
233
|
}], showCount: [{
|
|
@@ -250,10 +248,10 @@ class SuccessMessageDialogComponent {
|
|
|
250
248
|
}
|
|
251
249
|
}
|
|
252
250
|
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: ["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%}}
|
|
251
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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.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"] }] });
|
|
254
252
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SuccessMessageDialogComponent, decorators: [{
|
|
255
253
|
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: ["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%}}
|
|
254
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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
255
|
}], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: i1.Router }]; } });
|
|
258
256
|
|
|
259
257
|
var PageSectionStyleThirteen;
|
|
@@ -286,10 +284,10 @@ class PageSectionStyleThirteenComponent {
|
|
|
286
284
|
}
|
|
287
285
|
}
|
|
288
286
|
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: ["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%}}
|
|
287
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
290
288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, decorators: [{
|
|
291
289
|
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: ["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%}}
|
|
290
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
293
291
|
}], ctorParameters: function () { return []; }, propDecorators: { sectionTitle: [{
|
|
294
292
|
type: Input
|
|
295
293
|
}], items: [{
|
|
@@ -312,10 +310,10 @@ class CallToActionSectionComponent {
|
|
|
312
310
|
}
|
|
313
311
|
}
|
|
314
312
|
CallToActionSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
315
|
-
CallToActionSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CallToActionSectionComponent, selector: "call-to-action-section", inputs: { sectionContent: "sectionContent", titleOnRightSide: "titleOnRightSide", imageBg: "imageBg", isBoxWithCard: "isBoxWithCard" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\n 'colored-bg':!imageBg,\n 'image-bg':imageBg\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\n <div class=\"heading-side\">\n <div class=\"title\">{{sectionContent.title}}</div>\n <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\n <div class=\"buttons\">\n <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\">\n {{button.name}}\n <fa-icon icon=\"chevron-right\"></fa-icon>\n </span>\n </div>\n </div>\n <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\n <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\" [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\n <img [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\n <div class=\"box-title\">\n {{card.title}}\n </div>\n <div class=\"box-description\" *ngIf=\"card.description \">\n {{card.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button (click)=\"onClickGetStarted(card.button.route)\">\n {{card.button.name}}\n </button>\n </div>\n <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\n </div>\n </div>\n </div>\n </div>\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%}}
|
|
313
|
+
CallToActionSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CallToActionSectionComponent, selector: "call-to-action-section", inputs: { sectionContent: "sectionContent", titleOnRightSide: "titleOnRightSide", imageBg: "imageBg", isBoxWithCard: "isBoxWithCard" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\n 'colored-bg':!imageBg,\n 'image-bg':imageBg\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\n <div class=\"heading-side\">\n <div class=\"title\">{{sectionContent.title}}</div>\n <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\n <div class=\"buttons\">\n <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\">\n {{button.name}}\n <fa-icon icon=\"chevron-right\"></fa-icon>\n </span>\n </div>\n </div>\n <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\n <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\" [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\n <img [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\n <div class=\"box-title\">\n {{card.title}}\n </div>\n <div class=\"box-description\" *ngIf=\"card.description \">\n {{card.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button (click)=\"onClickGetStarted(card.button.route)\">\n {{card.button.name}}\n </button>\n </div>\n <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\n </div>\n </div>\n </div>\n </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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 .title-right-side{flex-direction:row-reverse}.page .title-left-side{flex-direction:row}.page .image-bg{background-position:center;background-size:cover}.page .colored-bg{background-color:#f7f8f9}.page .colored-bg .bg-image{display:none}.page .cta-box{width:100%;display:flex;column-gap:2%;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;padding:3rem}.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 .heading-side{display:flex;flex-direction:column;row-gap:1.5rem;width:40%}.page .cta-box .heading-side .title{color:#155ed4;font-size:3rem;font-weight:700}.page .cta-box .heading-side .subtitle{font-size:2rem;color:#32353b}.page .cta-box .heading-side .buttons{display:flex;flex-direction:row;column-gap:2rem}.page .cta-box .heading-side .buttons .cta-link{padding:.5 rem;color:#155ed4;font-size:1.6rem;cursor:pointer;transition:all ease-in-out .2s;border-bottom:.2rem solid transparent;display:flex;flex-direction:row;column-gap:1.5rem}.page .cta-box .heading-side .buttons .cta-link:hover{border-bottom:.2rem solid #155ED4}.page .cta-box .heading-side .buttons .cta-link:nth-child(even){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(even):hover{border-bottom:.2rem solid #32353B}.page .cta-box .only-an-item{justify-content:right}.page .cta-box .cta-side{display:flex;flex-direction:row;column-gap:2%;padding:1rem;height:100%;width:58%;align-items:center;padding:2rem 0}.page .cta-box .cta-side .box-card{background:#32353B;border-radius:1rem;color:#fff;box-shadow:#32325d40 0 1.3rem 2.7rem -.5rem,#0000004d 0 .8rem 1.6rem -.8rem;border:.2rem solid #ffffff;padding:1.5rem}.page .cta-box .cta-side .box-card .button button{color:#155ed4;background-color:#f7f8f9}.page .cta-box .cta-side .box-non-card{color:#32353b;height:100%}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button{padding-left:1rem;border-left:.3rem transparent solid}.page .cta-box .cta-side .box-non-card .image{margin-left:1.3rem}.page .cta-box .cta-side .box-non-card .box-title{border-left:.3rem #155ED4 solid}.page .cta-box .cta-side .box-non-card .button button{color:#fff;background-color:#32353b}.page .cta-box .cta-side .box{align-self:center;width:49%;display:flex;flex-direction:column;row-gap:1.5rem}.page .cta-box .cta-side .box .image{width:5rem;height:5rem;object-fit:cover;border-radius:.7rem;box-shadow:#0000003d 0 .3rem .8rem}.page .cta-box .cta-side .box .box-title{font-size:2.2rem;font-weight:700}.page .cta-box .cta-side .box .box-description{font-weight:400;font-size:1.8rem;margin-bottom:1rem;width:80%}.page .cta-box .cta-side .box .button button{padding:1rem;font-size:1.4rem;font-weight:600;font-family:inherit}.page .cta-box .divider{display:none}@media only screen and (max-width: 75em){.page .cta-box{flex-direction:column;row-gap:2rem}.page .cta-box .only-an-item{justify-content:center;width:50%;text-align:center}.page .cta-box .only-an-item .box{margin:auto;text-align:center}.page .cta-box .only-an-item .box .box-title,.page .cta-box .only-an-item .box .box-description,.page .cta-box .only-an-item .box .button,.page .cta-box .only-an-item .box .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .only-an-item .box .box-title{border-left:none}.page .cta-box .cta-side,.page .cta-box .heading-side{width:100%}}@media only screen and (max-width: 37.5em){.page .cta-box .cta-side{flex-direction:column;row-gap:4rem}.page .cta-box .cta-side .box-non-card{margin:auto;text-align:center}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button,.page .cta-box .cta-side .box-non-card .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .cta-side .box-non-card .box-title{border-left:none}.page .cta-box .cta-side .box-non-card:first-child .divider{display:grid;width:40%;border:.2rem solid #155ED4;margin:2.5rem auto 0}.page .cta-box .cta-side .box{width:100%}.page .cta-box .cta-side .box .box-title{font-size:2rem}.page .cta-box .cta-side .box .box-description{font-size:1.6rem}.page .cta-box .heading-side{text-align:center}.page .cta-box .heading-side .buttons{justify-content:center}}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] });
|
|
316
314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionComponent, decorators: [{
|
|
317
315
|
type: Component,
|
|
318
|
-
args: [{ selector: 'call-to-action-section', template: "<div class=\"page\">\n <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\n 'colored-bg':!imageBg,\n 'image-bg':imageBg\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\n <div class=\"heading-side\">\n <div class=\"title\">{{sectionContent.title}}</div>\n <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\n <div class=\"buttons\">\n <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\">\n {{button.name}}\n <fa-icon icon=\"chevron-right\"></fa-icon>\n </span>\n </div>\n </div>\n <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\n <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\" [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\n <img [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\n <div class=\"box-title\">\n {{card.title}}\n </div>\n <div class=\"box-description\" *ngIf=\"card.description \">\n {{card.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button (click)=\"onClickGetStarted(card.button.route)\">\n {{card.button.name}}\n </button>\n </div>\n <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\n </div>\n </div>\n </div>\n </div>\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%}}
|
|
316
|
+
args: [{ selector: 'call-to-action-section', template: "<div class=\"page\">\n <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\n 'colored-bg':!imageBg,\n 'image-bg':imageBg\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\n <div class=\"heading-side\">\n <div class=\"title\">{{sectionContent.title}}</div>\n <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\n <div class=\"buttons\">\n <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\">\n {{button.name}}\n <fa-icon icon=\"chevron-right\"></fa-icon>\n </span>\n </div>\n </div>\n <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\n <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\" [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\n <img [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\n <div class=\"box-title\">\n {{card.title}}\n </div>\n <div class=\"box-description\" *ngIf=\"card.description \">\n {{card.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button (click)=\"onClickGetStarted(card.button.route)\">\n {{card.button.name}}\n </button>\n </div>\n <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\n </div>\n </div>\n </div>\n </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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 .title-right-side{flex-direction:row-reverse}.page .title-left-side{flex-direction:row}.page .image-bg{background-position:center;background-size:cover}.page .colored-bg{background-color:#f7f8f9}.page .colored-bg .bg-image{display:none}.page .cta-box{width:100%;display:flex;column-gap:2%;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;padding:3rem}.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 .heading-side{display:flex;flex-direction:column;row-gap:1.5rem;width:40%}.page .cta-box .heading-side .title{color:#155ed4;font-size:3rem;font-weight:700}.page .cta-box .heading-side .subtitle{font-size:2rem;color:#32353b}.page .cta-box .heading-side .buttons{display:flex;flex-direction:row;column-gap:2rem}.page .cta-box .heading-side .buttons .cta-link{padding:.5 rem;color:#155ed4;font-size:1.6rem;cursor:pointer;transition:all ease-in-out .2s;border-bottom:.2rem solid transparent;display:flex;flex-direction:row;column-gap:1.5rem}.page .cta-box .heading-side .buttons .cta-link:hover{border-bottom:.2rem solid #155ED4}.page .cta-box .heading-side .buttons .cta-link:nth-child(even){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(even):hover{border-bottom:.2rem solid #32353B}.page .cta-box .only-an-item{justify-content:right}.page .cta-box .cta-side{display:flex;flex-direction:row;column-gap:2%;padding:1rem;height:100%;width:58%;align-items:center;padding:2rem 0}.page .cta-box .cta-side .box-card{background:#32353B;border-radius:1rem;color:#fff;box-shadow:#32325d40 0 1.3rem 2.7rem -.5rem,#0000004d 0 .8rem 1.6rem -.8rem;border:.2rem solid #ffffff;padding:1.5rem}.page .cta-box .cta-side .box-card .button button{color:#155ed4;background-color:#f7f8f9}.page .cta-box .cta-side .box-non-card{color:#32353b;height:100%}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button{padding-left:1rem;border-left:.3rem transparent solid}.page .cta-box .cta-side .box-non-card .image{margin-left:1.3rem}.page .cta-box .cta-side .box-non-card .box-title{border-left:.3rem #155ED4 solid}.page .cta-box .cta-side .box-non-card .button button{color:#fff;background-color:#32353b}.page .cta-box .cta-side .box{align-self:center;width:49%;display:flex;flex-direction:column;row-gap:1.5rem}.page .cta-box .cta-side .box .image{width:5rem;height:5rem;object-fit:cover;border-radius:.7rem;box-shadow:#0000003d 0 .3rem .8rem}.page .cta-box .cta-side .box .box-title{font-size:2.2rem;font-weight:700}.page .cta-box .cta-side .box .box-description{font-weight:400;font-size:1.8rem;margin-bottom:1rem;width:80%}.page .cta-box .cta-side .box .button button{padding:1rem;font-size:1.4rem;font-weight:600;font-family:inherit}.page .cta-box .divider{display:none}@media only screen and (max-width: 75em){.page .cta-box{flex-direction:column;row-gap:2rem}.page .cta-box .only-an-item{justify-content:center;width:50%;text-align:center}.page .cta-box .only-an-item .box{margin:auto;text-align:center}.page .cta-box .only-an-item .box .box-title,.page .cta-box .only-an-item .box .box-description,.page .cta-box .only-an-item .box .button,.page .cta-box .only-an-item .box .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .only-an-item .box .box-title{border-left:none}.page .cta-box .cta-side,.page .cta-box .heading-side{width:100%}}@media only screen and (max-width: 37.5em){.page .cta-box .cta-side{flex-direction:column;row-gap:4rem}.page .cta-box .cta-side .box-non-card{margin:auto;text-align:center}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button,.page .cta-box .cta-side .box-non-card .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .cta-side .box-non-card .box-title{border-left:none}.page .cta-box .cta-side .box-non-card:first-child .divider{display:grid;width:40%;border:.2rem solid #155ED4;margin:2.5rem auto 0}.page .cta-box .cta-side .box{width:100%}.page .cta-box .cta-side .box .box-title{font-size:2rem}.page .cta-box .cta-side .box .box-description{font-size:1.6rem}.page .cta-box .heading-side{text-align:center}.page .cta-box .heading-side .buttons{justify-content:center}}\n"] }]
|
|
319
317
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
320
318
|
type: Input
|
|
321
319
|
}], titleOnRightSide: [{
|
|
@@ -362,10 +360,10 @@ class TeamComponent {
|
|
|
362
360
|
}
|
|
363
361
|
}
|
|
364
362
|
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: ["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%}}
|
|
363
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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"] }] });
|
|
366
364
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TeamComponent, decorators: [{
|
|
367
365
|
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: ["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%}}
|
|
366
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
369
367
|
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
|
|
370
368
|
type: Input
|
|
371
369
|
}] } });
|
|
@@ -389,10 +387,10 @@ class ValuesComponent {
|
|
|
389
387
|
}
|
|
390
388
|
}
|
|
391
389
|
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: ["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%}}
|
|
390
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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"] }] });
|
|
393
391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuesComponent, decorators: [{
|
|
394
392
|
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: ["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%}}
|
|
393
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
396
394
|
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
|
|
397
395
|
type: Input
|
|
398
396
|
}], withBgImage: [{
|
|
@@ -408,10 +406,10 @@ class OurClientListingComponent {
|
|
|
408
406
|
}
|
|
409
407
|
}
|
|
410
408
|
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: ["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%}}
|
|
409
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] });
|
|
412
410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientListingComponent, decorators: [{
|
|
413
411
|
type: Component,
|
|
414
|
-
args: [{ selector: "our-client-listing", template: "<div class=\"client\">\n <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\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%}}
|
|
412
|
+
args: [{ selector: "our-client-listing", template: "<div class=\"client\">\n <img class=\"image\" [src]=\"account.profilePicture\" alt=\"\" />\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
415
413
|
}], ctorParameters: function () { return []; }, propDecorators: { account: [{
|
|
416
414
|
type: Input
|
|
417
415
|
}] } });
|
|
@@ -456,10 +454,10 @@ class OurClientsComponent {
|
|
|
456
454
|
}
|
|
457
455
|
}
|
|
458
456
|
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: ["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%}}
|
|
457
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }] });
|
|
460
458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OurClientsComponent, decorators: [{
|
|
461
459
|
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: ["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%}}
|
|
460
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
463
461
|
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { accounts: [{
|
|
464
462
|
type: Input
|
|
465
463
|
}] } });
|
|
@@ -474,10 +472,10 @@ class PageSectionWithMultipleCardsComponent {
|
|
|
474
472
|
}
|
|
475
473
|
}
|
|
476
474
|
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: ["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%}}
|
|
475
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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.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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
478
476
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, decorators: [{
|
|
479
477
|
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: ["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%}}
|
|
478
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
481
479
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
482
480
|
type: Input
|
|
483
481
|
}] } });
|
|
@@ -493,10 +491,10 @@ class CallToActionSectionTwoComponent {
|
|
|
493
491
|
}
|
|
494
492
|
}
|
|
495
493
|
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: ["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%}}
|
|
494
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] });
|
|
497
495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CallToActionSectionTwoComponent, decorators: [{
|
|
498
496
|
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: ["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%}}
|
|
497
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
500
498
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
501
499
|
type: Input
|
|
502
500
|
}] } });
|
|
@@ -521,10 +519,10 @@ class ValuePropsSectionComponent {
|
|
|
521
519
|
}
|
|
522
520
|
}
|
|
523
521
|
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: ["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%}}
|
|
522
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
525
523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, decorators: [{
|
|
526
524
|
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: ["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%}}
|
|
525
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
528
526
|
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
529
527
|
type: Input
|
|
530
528
|
}] } });
|
|
@@ -561,7 +559,7 @@ ChooseCountryWithFlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
561
559
|
useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
|
|
562
560
|
multi: true
|
|
563
561
|
}
|
|
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:
|
|
562
|
+
], 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: i1$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "directive", type: i3$4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] });
|
|
565
563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, decorators: [{
|
|
566
564
|
type: Component,
|
|
567
565
|
args: [{ selector: 'choose-country-with-flag', providers: [
|
|
@@ -679,10 +677,10 @@ class ContactUsPageComponent {
|
|
|
679
677
|
}
|
|
680
678
|
}
|
|
681
679
|
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$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
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: ["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"] }] });
|
|
680
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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
681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, decorators: [{
|
|
684
682
|
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: ["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"] }]
|
|
683
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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
684
|
}], ctorParameters: function () { return [{ type: i1$2.MatDialog }, { type: i1$1.BreakpointObserver }, { type: i3$3.FormBuilder }]; }, propDecorators: { subjects: [{
|
|
687
685
|
type: Input
|
|
688
686
|
}], contactUsPageData: [{
|
|
@@ -704,10 +702,10 @@ class PageSectionStyleThreeComponent {
|
|
|
704
702
|
}
|
|
705
703
|
}
|
|
706
704
|
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: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\n <div class=\"section-container\">\n <div class=\"image-side\">\n <img [src]=\"valueprop.image\">\n </div>\n <div class=\"text-side\">\n <section-title [sectionTitle]=\"valueprop.sectionTitle\" >\n </section-title>\n <div class=\"optional-button\">\n <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.route\"\n (click)=\"onClickValuePropButton(valueprop.route)\">\n Click Me\n </button>\n </div>\n </div>\n </div>\n </div>\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%}}
|
|
705
|
+
PageSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThreeComponent, selector: "page-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\n <div class=\"section-container\">\n <div class=\"image-side\">\n <img [src]=\"valueprop.image\">\n </div>\n <div class=\"text-side\">\n <section-title [sectionTitle]=\"valueprop.sectionTitle\" >\n </section-title>\n <div class=\"optional-button\">\n <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.route\"\n (click)=\"onClickValuePropButton(valueprop.route)\">\n Click Me\n </button>\n </div>\n </div>\n </div>\n </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
708
706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, decorators: [{
|
|
709
707
|
type: Component,
|
|
710
|
-
args: [{ selector: 'page-section-style-three', template: "<div class=\"page\">\n <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\n <div class=\"section-container\">\n <div class=\"image-side\">\n <img [src]=\"valueprop.image\">\n </div>\n <div class=\"text-side\">\n <section-title [sectionTitle]=\"valueprop.sectionTitle\" >\n </section-title>\n <div class=\"optional-button\">\n <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.route\"\n (click)=\"onClickValuePropButton(valueprop.route)\">\n Click Me\n </button>\n </div>\n </div>\n </div>\n </div>\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%}}
|
|
708
|
+
args: [{ selector: 'page-section-style-three', template: "<div class=\"page\">\n <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\n <div class=\"section-container\">\n <div class=\"image-side\">\n <img [src]=\"valueprop.image\">\n </div>\n <div class=\"text-side\">\n <section-title [sectionTitle]=\"valueprop.sectionTitle\" >\n </section-title>\n <div class=\"optional-button\">\n <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.route\"\n (click)=\"onClickValuePropButton(valueprop.route)\">\n Click Me\n </button>\n </div>\n </div>\n </div>\n </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
711
709
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
712
710
|
type: Input
|
|
713
711
|
}] } });
|
|
@@ -754,10 +752,10 @@ class ComingSoonComponent {
|
|
|
754
752
|
}
|
|
755
753
|
}
|
|
756
754
|
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: "<section 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\" [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\n </div>\n </div>\n</section>", 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%}}
|
|
755
|
+
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: "<section 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\" [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\n </div>\n </div>\n</section>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;position:relative;padding:20vh 0}.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;margin:auto;background-color:#fff;padding:6rem 4rem;width:60rem;border-radius:2.5rem;box-shadow:.2rem .2rem 7.4rem #00000060;display:flex;flex-direction:column;row-gap:1rem}.page .coming-soon .title{color:#155ed4;font-weight:500;font-size:4rem}.page .coming-soon .subtitle{color:#4d4d4d;font-weight:700;font-size:1.3rem}.page .coming-soon .registration-field{display:flex;flex-direction:row;column-gap:1rem}.page .coming-soon .registration-field .email-field{width:60%}.page .coming-soon .registration-field .email-field input{width:100%}.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}@media only screen and (max-width: 37.5em){.page .coming-soon{width:90%;text-align:center;background-size:2rem,7rem,7rem}.page .coming-soon .registration-field{flex-direction:column;row-gap:1rem}.page .coming-soon .registration-field .email-field,.page .coming-soon .registration-field .email-field input{width:100%}.page .coming-soon .social-media-icons{margin:auto}}\n"], dependencies: [{ 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$3.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"] }] });
|
|
758
756
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ComingSoonComponent, decorators: [{
|
|
759
757
|
type: Component,
|
|
760
|
-
args: [{ selector: 'coming-soon', template: "<section 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\" [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\n </div>\n </div>\n</section>", 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%}}
|
|
758
|
+
args: [{ selector: 'coming-soon', template: "<section 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\" [socialMediaLinks]=\"socialMediaLinks\"></social-media-icons>\n </div>\n </div>\n</section>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{width:100%;position:relative;padding:20vh 0}.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;margin:auto;background-color:#fff;padding:6rem 4rem;width:60rem;border-radius:2.5rem;box-shadow:.2rem .2rem 7.4rem #00000060;display:flex;flex-direction:column;row-gap:1rem}.page .coming-soon .title{color:#155ed4;font-weight:500;font-size:4rem}.page .coming-soon .subtitle{color:#4d4d4d;font-weight:700;font-size:1.3rem}.page .coming-soon .registration-field{display:flex;flex-direction:row;column-gap:1rem}.page .coming-soon .registration-field .email-field{width:60%}.page .coming-soon .registration-field .email-field input{width:100%}.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}@media only screen and (max-width: 37.5em){.page .coming-soon{width:90%;text-align:center;background-size:2rem,7rem,7rem}.page .coming-soon .registration-field{flex-direction:column;row-gap:1rem}.page .coming-soon .registration-field .email-field,.page .coming-soon .registration-field .email-field input{width:100%}.page .coming-soon .social-media-icons{margin:auto}}\n"] }]
|
|
761
759
|
}], propDecorators: { ctaText: [{
|
|
762
760
|
type: Input
|
|
763
761
|
}], socialMediaLinks: [{
|
|
@@ -774,10 +772,10 @@ class FaqCategoryListingComponent {
|
|
|
774
772
|
}
|
|
775
773
|
}
|
|
776
774
|
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: ["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%}}
|
|
775
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
778
776
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqCategoryListingComponent, decorators: [{
|
|
779
777
|
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: ["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%}}
|
|
778
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
781
779
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { category: [{
|
|
782
780
|
type: Input
|
|
783
781
|
}], isSelected: [{
|
|
@@ -796,10 +794,10 @@ class FaqListingComponent {
|
|
|
796
794
|
}
|
|
797
795
|
}
|
|
798
796
|
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: ["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%}}
|
|
797
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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: i3.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$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
800
798
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, decorators: [{
|
|
801
799
|
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: ["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%}}
|
|
800
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
803
801
|
}], ctorParameters: function () { return []; }, propDecorators: { faq: [{
|
|
804
802
|
type: Input
|
|
805
803
|
}] } });
|
|
@@ -826,10 +824,10 @@ class CtaSectionStyleFourComponent {
|
|
|
826
824
|
}
|
|
827
825
|
}
|
|
828
826
|
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: ["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%}}
|
|
827
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
830
828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleFourComponent, decorators: [{
|
|
831
829
|
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: ["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%}}
|
|
830
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
833
831
|
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }, { type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
834
832
|
type: Input
|
|
835
833
|
}] } });
|
|
@@ -853,69 +851,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
853
851
|
type: Input
|
|
854
852
|
}] } });
|
|
855
853
|
|
|
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: ["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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
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: ["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"] }]
|
|
869
|
-
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
870
|
-
type: Input
|
|
871
|
-
}] } });
|
|
872
|
-
|
|
873
|
-
class CustomTooltipComponent {
|
|
874
|
-
onMouseEnter() {
|
|
875
|
-
this.showDetails = true;
|
|
876
|
-
}
|
|
877
|
-
onMouseClick() {
|
|
878
|
-
this.showDetails = !this.showDetails;
|
|
879
|
-
}
|
|
880
|
-
onMouseLeave() {
|
|
881
|
-
this.showDetails = false;
|
|
882
|
-
}
|
|
883
|
-
}
|
|
884
|
-
CustomTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
885
|
-
CustomTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomTooltipComponent, selector: "custom-tooltip", ngImport: i0, template: "<div class=\"icon\">\n <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\n <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\n <div>\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n </div>\n </div>\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n <fa-icon icon=\"caret-left\"></fa-icon>\n <ng-content></ng-content>\n </div>\n </div>\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;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, decorators: [{
|
|
887
|
-
type: Component,
|
|
888
|
-
args: [{ selector: 'custom-tooltip', template: "<div class=\"icon\">\n <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\n <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\n <div>\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n </div>\n </div>\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n <fa-icon icon=\"caret-left\"></fa-icon>\n <ng-content></ng-content>\n </div>\n </div>\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;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\n"] }]
|
|
889
|
-
}] });
|
|
890
|
-
|
|
891
|
-
class FeatureDetailItemOneComponent {
|
|
892
|
-
}
|
|
893
|
-
FeatureDetailItemOneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureDetailItemOneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
894
|
-
FeatureDetailItemOneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureDetailItemOneComponent, selector: "feature-detail-item-one", inputs: { itemContent: "itemContent" }, ngImport: i0, template: "<div class=\"item\">\n <fa-icon [icon]=\"itemContent.iconName\"></fa-icon>\n <h3>{{itemContent.title}}</h3>\n <p>{{itemContent.description}}</p>\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}.item{padding:2rem;display:flex;flex-direction:column;row-gap:1rem;border-bottom:.2rem solid #155ED4}.item fa-icon{font-size:3rem;color:#155ed4}.item p,.item h3{color:#32353b}.item h3{font-size:2rem}.item p{font-size:1.6rem}\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"] }] });
|
|
895
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureDetailItemOneComponent, decorators: [{
|
|
896
|
-
type: Component,
|
|
897
|
-
args: [{ selector: 'feature-detail-item-one', template: "<div class=\"item\">\n <fa-icon [icon]=\"itemContent.iconName\"></fa-icon>\n <h3>{{itemContent.title}}</h3>\n <p>{{itemContent.description}}</p>\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}.item{padding:2rem;display:flex;flex-direction:column;row-gap:1rem;border-bottom:.2rem solid #155ED4}.item fa-icon{font-size:3rem;color:#155ed4}.item p,.item h3{color:#32353b}.item h3{font-size:2rem}.item p{font-size:1.6rem}\n"] }]
|
|
898
|
-
}], propDecorators: { itemContent: [{
|
|
899
|
-
type: Input
|
|
900
|
-
}] } });
|
|
901
|
-
|
|
902
|
-
class FeatureSectionOneComponent {
|
|
903
|
-
// stepperOrientation: Observable<StepperOrientation>;
|
|
904
|
-
constructor(breakpointObserver) {
|
|
905
|
-
// this.stepperOrientation = breakpointObserver
|
|
906
|
-
// .observe('(min-width: 751px)')
|
|
907
|
-
// .pipe(map(({ matches }) => (matches ? 'horizontal' : 'vertical')));
|
|
908
|
-
}
|
|
909
|
-
}
|
|
910
|
-
FeatureSectionOneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionOneComponent, deps: [{ token: i1$1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
911
|
-
FeatureSectionOneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionOneComponent, selector: "feature-section-one", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <div class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </div>\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n <div class=\"images-stepper\">\n <div class=\"step-content\">\n <img class=\"image\" [src]=\"sectionContent.steps[0].image\" alt=\"\">\n </div>\n </div>\n <div class=\"features-cards\">\n <feature-detail-item-one [itemContent]=\"card\" class=\"feature-card\" *ngFor=\"let card of sectionContent.featuresCards\">\n </feature-detail-item-one>\n </div>\n</section>", 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{padding:4rem 0;margin:auto;width:90%;display:flex;flex-direction:column;row-gap:2rem}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .tip-title{text-align:center;color:#155ed4;font-weight:800;font-size:1.8rem}.section .step-content{display:flex;flex-direction:column;place-items:center;width:100%;row-gap:2rem;padding:2rem 0}.section .image{width:70%;border-radius:1.5rem;max-height:50rem;object-fit:cover;margin:auto}.section .mat-mdc-form-field{margin-top:16px}.section .features-cards{display:flex;flex-direction:row;column-gap:2%}.section .features-cards .feature-card{min-width:32%}@media only screen and (max-width: 750px){.section .features-cards{flex-direction:column;row-gap:3rem}}@media only screen and (max-width: 37.5em){.section .image{width:100%}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }, { kind: "component", type: FeatureDetailItemOneComponent, selector: "feature-detail-item-one", inputs: ["itemContent"] }] });
|
|
912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionOneComponent, decorators: [{
|
|
913
|
-
type: Component,
|
|
914
|
-
args: [{ selector: 'feature-section-one', template: "<section class=\"section\">\n <div class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </div>\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n <div class=\"images-stepper\">\n <div class=\"step-content\">\n <img class=\"image\" [src]=\"sectionContent.steps[0].image\" alt=\"\">\n </div>\n </div>\n <div class=\"features-cards\">\n <feature-detail-item-one [itemContent]=\"card\" class=\"feature-card\" *ngFor=\"let card of sectionContent.featuresCards\">\n </feature-detail-item-one>\n </div>\n</section>", 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{padding:4rem 0;margin:auto;width:90%;display:flex;flex-direction:column;row-gap:2rem}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .tip-title{text-align:center;color:#155ed4;font-weight:800;font-size:1.8rem}.section .step-content{display:flex;flex-direction:column;place-items:center;width:100%;row-gap:2rem;padding:2rem 0}.section .image{width:70%;border-radius:1.5rem;max-height:50rem;object-fit:cover;margin:auto}.section .mat-mdc-form-field{margin-top:16px}.section .features-cards{display:flex;flex-direction:row;column-gap:2%}.section .features-cards .feature-card{min-width:32%}@media only screen and (max-width: 750px){.section .features-cards{flex-direction:column;row-gap:3rem}}@media only screen and (max-width: 37.5em){.section .image{width:100%}}\n"] }]
|
|
915
|
-
}], ctorParameters: function () { return [{ type: i1$1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
|
|
916
|
-
type: Input
|
|
917
|
-
}] } });
|
|
918
|
-
|
|
919
854
|
class VerticalSideTabsComponent {
|
|
920
855
|
constructor() {
|
|
921
856
|
this.panelOpenState = false;
|
|
@@ -934,10 +869,10 @@ class VerticalSideTabsComponent {
|
|
|
934
869
|
}
|
|
935
870
|
}
|
|
936
871
|
VerticalSideTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VerticalSideTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
937
|
-
VerticalSideTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: VerticalSideTabsComponent, selector: "vertical-side-tabs", inputs: { tabs: "tabs", selectedOption: "selectedOption", items: "items" }, outputs: { tabChanged: "tabChanged" }, ngImport: i0, template: "<mat-card class=\"as-items\">\n <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\n <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \n 'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\n <div class=\"icon-text\">\n <div class=\"icon\"><fa-icon [icon]=\"tab.iconName\" class=\"tab-icon\"></fa-icon></div>\n <h3 class=\"text\">\n {{tab.title}}\n </h3>\n </div>\n </button>\n </div>\n</mat-card>", 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%}}
|
|
872
|
+
VerticalSideTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: VerticalSideTabsComponent, selector: "vertical-side-tabs", inputs: { tabs: "tabs", selectedOption: "selectedOption", items: "items" }, outputs: { tabChanged: "tabChanged" }, ngImport: i0, template: "<mat-card class=\"as-items\">\n <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\n <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \n 'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\n <div class=\"icon-text\">\n <div class=\"icon\"><fa-icon [icon]=\"tab.iconName\" class=\"tab-icon\"></fa-icon></div>\n <h3 class=\"text\">\n {{tab.title}}\n </h3>\n </div>\n </button>\n </div>\n</mat-card>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.as-items{padding:2rem 1rem;border:.1rem solid #f7f8f9;border-radius:1rem;display:flex;flex-direction:column;height:100%}.as-items .as-btn{border:none;border-left:.3rem solid rgba(50,53,59,.6);margin:auto;width:100%;text-align:left;display:inline;padding:2rem 4%;transition:all ease-in-out .1s}.as-items .as-btn:hover{border-left:.3rem solid #32353B;color:#32353b}.as-items .icon-text{display:flex;align-items:center;padding:0 .5rem}.as-items .icon-text .icon{display:inline-block;vertical-align:middle;margin-right:2rem}.as-items .icon-text .icon fa-icon.tab-icon{width:.2rem;height:.2rem}.as-items .item-not-clicked{color:#32353b99;background-color:#fff}.as-items .item-clicked{background-color:#fff;border-left:.3rem solid #155ED4;color:#155ed4}.as-items .item-clicked:hover{border-left:.3rem solid #155ED4;color:#155ed4}@media only screen and (max-width: 56.25em){.as-items{flex-direction:row;width:100%}.as-items .as-btn{border:none;border-bottom:.3rem solid rgba(50,53,59,.6)}.as-items .as-btn:hover{border-left:none;border-bottom:.3rem solid #32353B;color:#32353b}.as-items .item-clicked{border-bottom:.3rem solid #155ED4}.as-items .item-clicked:hover{border-left:none;border-bottom:.3rem solid #155ED4;color:#155ed4}.as-items .as-item{flex-grow:1;width:auto}.as-items .icon-text{flex-direction:column;text-align:center}}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3$5.MatCard, selector: "mat-card", exportAs: ["matCard"] }] });
|
|
938
873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VerticalSideTabsComponent, decorators: [{
|
|
939
874
|
type: Component,
|
|
940
|
-
args: [{ selector: 'vertical-side-tabs', template: "<mat-card class=\"as-items\">\n <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\n <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \n 'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\n <div class=\"icon-text\">\n <div class=\"icon\"><fa-icon [icon]=\"tab.iconName\" class=\"tab-icon\"></fa-icon></div>\n <h3 class=\"text\">\n {{tab.title}}\n </h3>\n </div>\n </button>\n </div>\n</mat-card>", 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%}}
|
|
875
|
+
args: [{ selector: 'vertical-side-tabs', template: "<mat-card class=\"as-items\">\n <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\n <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \n 'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\n <div class=\"icon-text\">\n <div class=\"icon\"><fa-icon [icon]=\"tab.iconName\" class=\"tab-icon\"></fa-icon></div>\n <h3 class=\"text\">\n {{tab.title}}\n </h3>\n </div>\n </button>\n </div>\n</mat-card>", 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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.as-items{padding:2rem 1rem;border:.1rem solid #f7f8f9;border-radius:1rem;display:flex;flex-direction:column;height:100%}.as-items .as-btn{border:none;border-left:.3rem solid rgba(50,53,59,.6);margin:auto;width:100%;text-align:left;display:inline;padding:2rem 4%;transition:all ease-in-out .1s}.as-items .as-btn:hover{border-left:.3rem solid #32353B;color:#32353b}.as-items .icon-text{display:flex;align-items:center;padding:0 .5rem}.as-items .icon-text .icon{display:inline-block;vertical-align:middle;margin-right:2rem}.as-items .icon-text .icon fa-icon.tab-icon{width:.2rem;height:.2rem}.as-items .item-not-clicked{color:#32353b99;background-color:#fff}.as-items .item-clicked{background-color:#fff;border-left:.3rem solid #155ED4;color:#155ed4}.as-items .item-clicked:hover{border-left:.3rem solid #155ED4;color:#155ed4}@media only screen and (max-width: 56.25em){.as-items{flex-direction:row;width:100%}.as-items .as-btn{border:none;border-bottom:.3rem solid rgba(50,53,59,.6)}.as-items .as-btn:hover{border-left:none;border-bottom:.3rem solid #32353B;color:#32353b}.as-items .item-clicked{border-bottom:.3rem solid #155ED4}.as-items .item-clicked:hover{border-left:none;border-bottom:.3rem solid #155ED4;color:#155ed4}.as-items .as-item{flex-grow:1;width:auto}.as-items .icon-text{flex-direction:column;text-align:center}}\n"] }]
|
|
941
876
|
}], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
|
|
942
877
|
type: Input
|
|
943
878
|
}], selectedOption: [{
|
|
@@ -948,239 +883,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
948
883
|
type: Input
|
|
949
884
|
}] } });
|
|
950
885
|
|
|
951
|
-
class
|
|
952
|
-
constructor() {
|
|
953
|
-
|
|
954
|
-
tabChanged(tabContent) {
|
|
955
|
-
this.tabContent = tabContent;
|
|
956
|
-
}
|
|
957
|
-
}
|
|
958
|
-
FeatureSectionTwoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionTwoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
959
|
-
FeatureSectionTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionTwoComponent, selector: "feature-section-two", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n <div class=\"section-content\">\n <div class=\"tabs-side\">\n <vertical-side-tabs [tabs]=\"sectionContent.tabs\" (tabChanged)=\"tabChanged($event)\"></vertical-side-tabs>\n </div>\n <div class=\"content-side\">\n <img [src]=\"tabContent.image\" *ngIf=\"tabContent.image\">\n <section-title [sectionTitle]=\"tabContent.sectionTitle\"></section-title>\n </div>\n </div>\n</section>", 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{padding:4rem 0;margin:auto;width:90%;display:flex;flex-direction:column;row-gap:2rem}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .tip-title{text-align:center;color:#155ed4;font-weight:800;font-size:1.8rem}.section .section-content{display:flex;flex-direction:row;column-gap:3%}.section .section-content .tabs-side{width:25%}.section .section-content .content-side{width:72%;display:flex;flex-direction:column;row-gap:3rem}.section .section-content .content-side img{width:100%;max-height:40rem;border-radius:1.5rem;object-fit:cover;box-shadow:1rem 1.8rem 4.8rem -1.9rem #000000bf}@media only screen and (max-width: 56.25em){.section .section-content{flex-direction:column;row-gap:3rem}.section .section-content .content-side{width:100%}.section .section-content .tabs-side{width:100%;margin:auto}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }, { kind: "component", type: VerticalSideTabsComponent, selector: "vertical-side-tabs", inputs: ["tabs", "selectedOption", "items"], outputs: ["tabChanged"] }] });
|
|
960
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionTwoComponent, decorators: [{
|
|
961
|
-
type: Component,
|
|
962
|
-
args: [{ selector: 'feature-section-two', template: "<section class=\"section\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n <div class=\"section-content\">\n <div class=\"tabs-side\">\n <vertical-side-tabs [tabs]=\"sectionContent.tabs\" (tabChanged)=\"tabChanged($event)\"></vertical-side-tabs>\n </div>\n <div class=\"content-side\">\n <img [src]=\"tabContent.image\" *ngIf=\"tabContent.image\">\n <section-title [sectionTitle]=\"tabContent.sectionTitle\"></section-title>\n </div>\n </div>\n</section>", 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{padding:4rem 0;margin:auto;width:90%;display:flex;flex-direction:column;row-gap:2rem}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .tip-title{text-align:center;color:#155ed4;font-weight:800;font-size:1.8rem}.section .section-content{display:flex;flex-direction:row;column-gap:3%}.section .section-content .tabs-side{width:25%}.section .section-content .content-side{width:72%;display:flex;flex-direction:column;row-gap:3rem}.section .section-content .content-side img{width:100%;max-height:40rem;border-radius:1.5rem;object-fit:cover;box-shadow:1rem 1.8rem 4.8rem -1.9rem #000000bf}@media only screen and (max-width: 56.25em){.section .section-content{flex-direction:column;row-gap:3rem}.section .section-content .content-side{width:100%}.section .section-content .tabs-side{width:100%;margin:auto}}\n"] }]
|
|
963
|
-
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
964
|
-
type: Input
|
|
965
|
-
}] } });
|
|
966
|
-
|
|
967
|
-
class FeatureSectionThreeComponent {
|
|
968
|
-
}
|
|
969
|
-
FeatureSectionThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionThreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
970
|
-
FeatureSectionThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionThreeComponent, selector: "feature-section-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <mat-tab-group>\n <mat-tab [label]=\"tab.tabLabel\" *ngFor=\"let tab of sectionContent\">\n <div class=\"section-content\">\n <page-section-style-three [sectionContent]=\"tab.tabContent\" *ngFor=\"let part of tab.tabContent\"></page-section-style-three>\n </div>\n </mat-tab>\n </mat-tab-group>\n</section>", 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:90%;margin:auto}@media only screen and (min-width: 1500px){.section{width:150rem}}.section mat-tab-group{padding:3rem 0}.section .section-content{padding:3rem 0rem}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: PageSectionStyleThreeComponent, selector: "page-section-style-three", inputs: ["sectionContent"] }] });
|
|
971
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionThreeComponent, decorators: [{
|
|
972
|
-
type: Component,
|
|
973
|
-
args: [{ selector: 'feature-section-three', template: "<section class=\"section\">\n <mat-tab-group>\n <mat-tab [label]=\"tab.tabLabel\" *ngFor=\"let tab of sectionContent\">\n <div class=\"section-content\">\n <page-section-style-three [sectionContent]=\"tab.tabContent\" *ngFor=\"let part of tab.tabContent\"></page-section-style-three>\n </div>\n </mat-tab>\n </mat-tab-group>\n</section>", 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:90%;margin:auto}@media only screen and (min-width: 1500px){.section{width:150rem}}.section mat-tab-group{padding:3rem 0}.section .section-content{padding:3rem 0rem}\n"] }]
|
|
974
|
-
}], propDecorators: { sectionContent: [{
|
|
975
|
-
type: Input
|
|
976
|
-
}] } });
|
|
977
|
-
|
|
978
|
-
class FeatureSectionFourComponent {
|
|
979
|
-
ngOnInit() {
|
|
980
|
-
this.title = this.sectionContent.defaultTitle;
|
|
981
|
-
}
|
|
982
|
-
showDescription(index) {
|
|
983
|
-
if (this.sectionContent.panels[index].isOpened) {
|
|
984
|
-
this.sectionContent.panels[index].isOpened = false;
|
|
985
|
-
this.title = this.sectionContent.defaultTitle;
|
|
986
|
-
}
|
|
987
|
-
else {
|
|
988
|
-
for (let panel of this.sectionContent.panels) {
|
|
989
|
-
panel.isOpened = false;
|
|
990
|
-
}
|
|
991
|
-
this.sectionContent.panels[index].isOpened = true;
|
|
992
|
-
this.title = this.sectionContent.panels[index].title;
|
|
993
|
-
}
|
|
994
|
-
}
|
|
995
|
-
}
|
|
996
|
-
FeatureSectionFourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionFourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
997
|
-
FeatureSectionFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionFourComponent, selector: "feature-section-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <aside class=\"preview-side\">\n <h3 class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </h3>\n <h1 class=\"title\">\n {{title}}\n </h1>\n <img [src]=\"sectionContent.image\" alt=\"\" class=\"image\" *ngIf=\"sectionContent.image\">\n </aside>\n <aside class=\"panels-side\">\n <div class=\"panel\" *ngFor=\"let panel of sectionContent.panels; let i = index\" [ngClass]=\"{'show-description': panel.isOpened, 'hide-description':!panel.isOpened}\">\n <div class=\"headline\" (click)=\"showDescription(i)\">\n <h3 class=\"label\">\n {{panel.label}}\n </h3>\n <span class=\"arrow\" [ngClass]=\"{'arrow-up': panel.isOpened, 'arrow-down':!panel.isOpened}\">\n <mat-icon>expand_more</mat-icon>\n </span>\n </div>\n <p class=\"description\">\n {{panel.description}}\n </p>\n <div class=\"divider\"></div>\n </div>\n </aside>\n</section>", 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:90%;margin:auto;display:flex;flex-direction:row;column-gap:5%;padding:3rem 0;align-items:center}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .preview-side{width:60%;display:flex;flex-direction:column;row-gap:1rem}.section .preview-side .tip-title{color:#155ed4}.section .preview-side .title{font-size:3rem;color:#32353b}.section .preview-side .image{width:100%;height:40rem;object-fit:cover;border-radius:1.5rem;box-shadow:#ffffff1a 0 .1rem .1rem inset,#32325d40 0 5rem 10rem -2rem,#0000004d 0 3rem 6rem -3rem}.section .panels-side{width:35%;display:flex;flex-direction:column;row-gap:1.5rem}.section .panels-side .panel{display:flex;flex-direction:column;row-gap:.1rem;transition:all ease-in-out .2s}.section .panels-side .panel .headline{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;color:#32353bcc}.section .panels-side .panel .headline:hover{color:#32353b}.section .panels-side .panel .headline:hover .label{padding-left:.5rem}.section .panels-side .panel .headline .label{transition:.2s padding-left ease-in-out}.section .panels-side .panel .headline .arrow{transition:all ease-in-out .2s}.section .panels-side .panel .description{transition:all cubic-bezier(.175,.885,.32,1.275) .4s;color:#32353bcc}.section .panels-side .panel .divider{width:100%;border:.1rem solid #f7f8f9}.section .panels-side .show-description .headline{color:#155ed4}.section .panels-side .show-description .headline .label{padding-left:.5rem}.section .panels-side .show-description .headline:hover{color:#155ed4}.section .panels-side .show-description .headline:hover .label{padding-left:.5rem}.section .panels-side .show-description .description{opacity:1;transform:scaleY(1);height:auto}.section .panels-side .show-description .arrow{transform:rotate(180deg)}.section .panels-side .hide-description{row-gap:0rem}.section .panels-side .hide-description .description{transform:scaleY(0);opacity:0;height:0rem}.section .panels-side .hide-description .arrow{transform:rotate(0)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
998
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionFourComponent, decorators: [{
|
|
999
|
-
type: Component,
|
|
1000
|
-
args: [{ selector: 'feature-section-four', template: "<section class=\"section\">\n <aside class=\"preview-side\">\n <h3 class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </h3>\n <h1 class=\"title\">\n {{title}}\n </h1>\n <img [src]=\"sectionContent.image\" alt=\"\" class=\"image\" *ngIf=\"sectionContent.image\">\n </aside>\n <aside class=\"panels-side\">\n <div class=\"panel\" *ngFor=\"let panel of sectionContent.panels; let i = index\" [ngClass]=\"{'show-description': panel.isOpened, 'hide-description':!panel.isOpened}\">\n <div class=\"headline\" (click)=\"showDescription(i)\">\n <h3 class=\"label\">\n {{panel.label}}\n </h3>\n <span class=\"arrow\" [ngClass]=\"{'arrow-up': panel.isOpened, 'arrow-down':!panel.isOpened}\">\n <mat-icon>expand_more</mat-icon>\n </span>\n </div>\n <p class=\"description\">\n {{panel.description}}\n </p>\n <div class=\"divider\"></div>\n </div>\n </aside>\n</section>", 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:90%;margin:auto;display:flex;flex-direction:row;column-gap:5%;padding:3rem 0;align-items:center}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .preview-side{width:60%;display:flex;flex-direction:column;row-gap:1rem}.section .preview-side .tip-title{color:#155ed4}.section .preview-side .title{font-size:3rem;color:#32353b}.section .preview-side .image{width:100%;height:40rem;object-fit:cover;border-radius:1.5rem;box-shadow:#ffffff1a 0 .1rem .1rem inset,#32325d40 0 5rem 10rem -2rem,#0000004d 0 3rem 6rem -3rem}.section .panels-side{width:35%;display:flex;flex-direction:column;row-gap:1.5rem}.section .panels-side .panel{display:flex;flex-direction:column;row-gap:.1rem;transition:all ease-in-out .2s}.section .panels-side .panel .headline{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;color:#32353bcc}.section .panels-side .panel .headline:hover{color:#32353b}.section .panels-side .panel .headline:hover .label{padding-left:.5rem}.section .panels-side .panel .headline .label{transition:.2s padding-left ease-in-out}.section .panels-side .panel .headline .arrow{transition:all ease-in-out .2s}.section .panels-side .panel .description{transition:all cubic-bezier(.175,.885,.32,1.275) .4s;color:#32353bcc}.section .panels-side .panel .divider{width:100%;border:.1rem solid #f7f8f9}.section .panels-side .show-description .headline{color:#155ed4}.section .panels-side .show-description .headline .label{padding-left:.5rem}.section .panels-side .show-description .headline:hover{color:#155ed4}.section .panels-side .show-description .headline:hover .label{padding-left:.5rem}.section .panels-side .show-description .description{opacity:1;transform:scaleY(1);height:auto}.section .panels-side .show-description .arrow{transform:rotate(180deg)}.section .panels-side .hide-description{row-gap:0rem}.section .panels-side .hide-description .description{transform:scaleY(0);opacity:0;height:0rem}.section .panels-side .hide-description .arrow{transform:rotate(0)}\n"] }]
|
|
1001
|
-
}], propDecorators: { sectionContent: [{
|
|
1002
|
-
type: Input
|
|
1003
|
-
}] } });
|
|
1004
|
-
|
|
1005
|
-
class FeatureDetailItemTwoComponent {
|
|
1006
|
-
}
|
|
1007
|
-
FeatureDetailItemTwoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureDetailItemTwoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1008
|
-
FeatureDetailItemTwoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureDetailItemTwoComponent, selector: "feature-detail-item-two", inputs: { itemContent: "itemContent" }, ngImport: i0, template: "<div class=\"feature-card\">\n <img [src]=\"itemContent.image\" alt=\"\">\n <h2 class=\"feature-name\">\n {{itemContent.name}}\n </h2>\n</div>", styles: [".feature-card{border-radius:1.5rem;min-width:13%;max-width:20rem;padding:3.5rem 1rem;display:flex;flex-direction:column;row-gap:1rem;background-color:#fff;box-shadow:#110c2e26 0 4.8rem 10rem}.feature-card img{width:34%;margin:auto}.feature-card .feature-name{font-size:2rem}\n"] });
|
|
1009
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureDetailItemTwoComponent, decorators: [{
|
|
1010
|
-
type: Component,
|
|
1011
|
-
args: [{ selector: 'feature-detail-item-two', template: "<div class=\"feature-card\">\n <img [src]=\"itemContent.image\" alt=\"\">\n <h2 class=\"feature-name\">\n {{itemContent.name}}\n </h2>\n</div>", styles: [".feature-card{border-radius:1.5rem;min-width:13%;max-width:20rem;padding:3.5rem 1rem;display:flex;flex-direction:column;row-gap:1rem;background-color:#fff;box-shadow:#110c2e26 0 4.8rem 10rem}.feature-card img{width:34%;margin:auto}.feature-card .feature-name{font-size:2rem}\n"] }]
|
|
1012
|
-
}], propDecorators: { itemContent: [{
|
|
1013
|
-
type: Input
|
|
1014
|
-
}] } });
|
|
1015
|
-
|
|
1016
|
-
class FeatureSectionFiveComponent {
|
|
1017
|
-
constructor(_router) {
|
|
1018
|
-
this._router = _router;
|
|
886
|
+
class HeaderSectionOneComponent {
|
|
887
|
+
constructor(_Router) {
|
|
888
|
+
this._Router = _Router;
|
|
1019
889
|
}
|
|
1020
|
-
|
|
1021
|
-
this.
|
|
890
|
+
onClickButton(route) {
|
|
891
|
+
this._Router.navigate([route]);
|
|
1022
892
|
}
|
|
1023
893
|
}
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type:
|
|
894
|
+
HeaderSectionOneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
895
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }] });
|
|
896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, decorators: [{
|
|
1027
897
|
type: Component,
|
|
1028
|
-
args: [{ selector: '
|
|
898
|
+
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: ["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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}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"] }]
|
|
1029
899
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
1030
900
|
type: Input
|
|
1031
901
|
}] } });
|
|
1032
902
|
|
|
1033
|
-
class
|
|
1034
|
-
|
|
1035
|
-
this.
|
|
1036
|
-
}
|
|
1037
|
-
onChangeImage() {
|
|
1038
|
-
this.selectedImage.emit(this.itemContent.imagePath);
|
|
1039
|
-
this.itemContent.isClicked = true;
|
|
1040
|
-
}
|
|
1041
|
-
}
|
|
1042
|
-
FeatureDetailItemThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureDetailItemThreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1043
|
-
FeatureDetailItemThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureDetailItemThreeComponent, selector: "feature-detail-item-three", inputs: { itemContent: "itemContent", oneParagraph: "oneParagraph", paragraphWithCard: "paragraphWithCard" }, outputs: { selectedImage: "selectedImage" }, ngImport: i0, template: "<span class=\"paragraph-container\" [ngClass]=\"{'paragraph-with-card':paragraphWithCard}\">\n <p class=\"paragraph\" (click)=\"onChangeImage()\" [ngClass]=\"{'selected-paragraph':itemContent.isClicked, 'one-paragraph':oneParagraph}\">\n <span class=\"paragraph-icon\">\n <fa-icon [icon]=\"itemContent.iconName\"></fa-icon>\n </span>\n <span class=\"paragraph-headline\">\n <h2 class=\"paragraph-title\">\n {{itemContent.title}}\n </h2>\n <span class=\"paragraph-description\">\n {{itemContent.description}}\n </span>\n </span>\n </p>\n</span>", 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}.paragraph-container .paragraph{box-sizing:border-box;display:flex;flex-direction:row;margin:0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1rem;column-gap:1.5rem;width:100%;height:100%;padding:1.5rem}@media only screen and (max-width: 725px){.paragraph-container .paragraph{width:100%;height:auto;padding:2rem 1rem}}.paragraph-container .paragraph:hover .paragraph-description{color:#32353b}.paragraph-container .paragraph:hover .paragraph-icon{color:#e3b1eb}.paragraph-container .paragraph .paragraph-title{font-size:2.2rem}.paragraph-container .paragraph .paragraph-description{color:#32353b99;transition:all ease-in-out .2s}.paragraph-container .paragraph .paragraph-icon{align-items:center;color:#e3b1eb99;transition:all ease-in-out .2s}.paragraph-container .paragraph .paragraph-icon fa-icon{font-size:2rem}.paragraph-container .one-paragraph{width:100%}.paragraph-container .selected-paragraph{background-color:#f7f8f9}.paragraph-container .selected-paragraph .paragraph-description{color:#32353b}.paragraph-container .selected-paragraph .cta-icon{transform:rotate(0)}.paragraph-container .selected-paragraph .paragraph-icon,.paragraph-container .selected-paragraph:hover .paragraph-icon{color:#f0509c}.paragraph-with-card .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 .paragraph:hover{border:.2rem solid #32353b}.paragraph-with-card .paragraph .paragraph-icon{text-align:center}.paragraph-with-card .selected-paragraph{border:.2rem solid #f0509c}.paragraph-with-card .selected-paragraph .paragraph-description{color:#32353b}.paragraph-with-card .selected-paragraph .paragraph-icon{color:#f0509c}.paragraph-with-card .selected-paragraph:hover{border:.2rem solid #f0509c}.paragraph-with-card .selected-paragraph:hover .paragraph-icon{color:#f0509c}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
1044
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureDetailItemThreeComponent, decorators: [{
|
|
1045
|
-
type: Component,
|
|
1046
|
-
args: [{ selector: 'feature-detail-item-three', template: "<span class=\"paragraph-container\" [ngClass]=\"{'paragraph-with-card':paragraphWithCard}\">\n <p class=\"paragraph\" (click)=\"onChangeImage()\" [ngClass]=\"{'selected-paragraph':itemContent.isClicked, 'one-paragraph':oneParagraph}\">\n <span class=\"paragraph-icon\">\n <fa-icon [icon]=\"itemContent.iconName\"></fa-icon>\n </span>\n <span class=\"paragraph-headline\">\n <h2 class=\"paragraph-title\">\n {{itemContent.title}}\n </h2>\n <span class=\"paragraph-description\">\n {{itemContent.description}}\n </span>\n </span>\n </p>\n</span>", 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}.paragraph-container .paragraph{box-sizing:border-box;display:flex;flex-direction:row;margin:0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1rem;column-gap:1.5rem;width:100%;height:100%;padding:1.5rem}@media only screen and (max-width: 725px){.paragraph-container .paragraph{width:100%;height:auto;padding:2rem 1rem}}.paragraph-container .paragraph:hover .paragraph-description{color:#32353b}.paragraph-container .paragraph:hover .paragraph-icon{color:#e3b1eb}.paragraph-container .paragraph .paragraph-title{font-size:2.2rem}.paragraph-container .paragraph .paragraph-description{color:#32353b99;transition:all ease-in-out .2s}.paragraph-container .paragraph .paragraph-icon{align-items:center;color:#e3b1eb99;transition:all ease-in-out .2s}.paragraph-container .paragraph .paragraph-icon fa-icon{font-size:2rem}.paragraph-container .one-paragraph{width:100%}.paragraph-container .selected-paragraph{background-color:#f7f8f9}.paragraph-container .selected-paragraph .paragraph-description{color:#32353b}.paragraph-container .selected-paragraph .cta-icon{transform:rotate(0)}.paragraph-container .selected-paragraph .paragraph-icon,.paragraph-container .selected-paragraph:hover .paragraph-icon{color:#f0509c}.paragraph-with-card .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 .paragraph:hover{border:.2rem solid #32353b}.paragraph-with-card .paragraph .paragraph-icon{text-align:center}.paragraph-with-card .selected-paragraph{border:.2rem solid #f0509c}.paragraph-with-card .selected-paragraph .paragraph-description{color:#32353b}.paragraph-with-card .selected-paragraph .paragraph-icon{color:#f0509c}.paragraph-with-card .selected-paragraph:hover{border:.2rem solid #f0509c}.paragraph-with-card .selected-paragraph:hover .paragraph-icon{color:#f0509c}\n"] }]
|
|
1047
|
-
}], propDecorators: { itemContent: [{
|
|
1048
|
-
type: Input
|
|
1049
|
-
}], oneParagraph: [{
|
|
1050
|
-
type: Input
|
|
1051
|
-
}], paragraphWithCard: [{
|
|
1052
|
-
type: Input
|
|
1053
|
-
}], selectedImage: [{
|
|
1054
|
-
type: Output
|
|
1055
|
-
}] } });
|
|
1056
|
-
|
|
1057
|
-
class FeatureSectionSevenComponent {
|
|
1058
|
-
constructor() { }
|
|
1059
|
-
ngOnInit() {
|
|
1060
|
-
let i = 0;
|
|
1061
|
-
this.selectedImage = this.sectionContent.paragraphs[0].imagePath;
|
|
1062
|
-
i++;
|
|
1063
|
-
for (let paragraph of this.sectionContent.paragraphs) {
|
|
1064
|
-
paragraph.isClicked = false;
|
|
1065
|
-
}
|
|
1066
|
-
this.sectionContent.paragraphs[0].isClicked = true;
|
|
1067
|
-
}
|
|
1068
|
-
onChangeImage($event) {
|
|
1069
|
-
for (let paragraph of this.sectionContent.paragraphs) {
|
|
1070
|
-
paragraph.isClicked = false;
|
|
1071
|
-
}
|
|
1072
|
-
this.selectedImage = $event;
|
|
1073
|
-
}
|
|
1074
|
-
}
|
|
1075
|
-
FeatureSectionSevenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionSevenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1076
|
-
FeatureSectionSevenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionSevenComponent, selector: "feature-section-seven", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"section\">\n <div class=\"section-title\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\n </section-title>\n </div>\n <div class=\"section-content\" [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 <div class=\"preview-image\">\n <img [src]=\"selectedImage\" alt=\"\">\n </div>\n <div class=\"paragraph-items\">\n <feature-detail-item-three *ngFor=\"let paragraph of sectionContent.paragraphs\" [itemContent]=\"paragraph\" (selectedImage)=\"onChangeImage($event)\" [oneParagraph]=\"sectionContent.paragraphs.length == 1\" [paragraphWithCard]=\"sectionContent.paragraphProperties.withCard\">\n </feature-detail-item-three>\n </div>\n </div>\n <div class=\"image-buttons-side\">\n <img [src]=\"selectedImage\" alt=\"\">\n </div>\n </div>\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{padding:2rem}.section .section-content{display:flex;flex-direction:row;column-gap:8%;margin:2rem auto;width:100%}.section .section-content .text-side{display:grid;row-gap:1rem;width:45%;padding:2rem 0rem}.section .section-content .text-side .preview-image{display:none}.section .section-content .text-side .paragraph-items{display:flex;flex-direction:column;row-gap:1rem}.section .section-content .image-buttons-side{width:57%;display:grid;align-content:center}.section .section-content .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}@media only screen and (max-width: 56.25em){.section .section-content{flex-wrap:wrap}.section .section-content:nth-child(even){flex-direction:row}.section .section-content:nth-child(even) .image-buttons-side{justify-self:center}.section .section-content .text-side{width:100%;justify-self:left}.section .section-content .text-side .preview-image{display:grid;width:100%}.section .section-content .text-side .preview-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.section .section-content .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.section .section-content .text-side .paragraph-items{column-count:1}}.section .image-text-sort{flex-direction:row-reverse}@media only screen and (max-width: 56.25em){.section .image-text-sort:nth-child(even) .image-buttons-side{justify-self:center}}.section .text-image-sort{flex-direction:row}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }, { kind: "component", type: FeatureDetailItemThreeComponent, selector: "feature-detail-item-three", inputs: ["itemContent", "oneParagraph", "paragraphWithCard"], outputs: ["selectedImage"] }] });
|
|
1077
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionSevenComponent, decorators: [{
|
|
1078
|
-
type: Component,
|
|
1079
|
-
args: [{ selector: 'feature-section-seven', template: "<div class=\"section\">\n <div class=\"section-title\">\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\n </section-title>\n </div>\n <div class=\"section-content\" [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 <div class=\"preview-image\">\n <img [src]=\"selectedImage\" alt=\"\">\n </div>\n <div class=\"paragraph-items\">\n <feature-detail-item-three *ngFor=\"let paragraph of sectionContent.paragraphs\" [itemContent]=\"paragraph\" (selectedImage)=\"onChangeImage($event)\" [oneParagraph]=\"sectionContent.paragraphs.length == 1\" [paragraphWithCard]=\"sectionContent.paragraphProperties.withCard\">\n </feature-detail-item-three>\n </div>\n </div>\n <div class=\"image-buttons-side\">\n <img [src]=\"selectedImage\" alt=\"\">\n </div>\n </div>\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{padding:2rem}.section .section-content{display:flex;flex-direction:row;column-gap:8%;margin:2rem auto;width:100%}.section .section-content .text-side{display:grid;row-gap:1rem;width:45%;padding:2rem 0rem}.section .section-content .text-side .preview-image{display:none}.section .section-content .text-side .paragraph-items{display:flex;flex-direction:column;row-gap:1rem}.section .section-content .image-buttons-side{width:57%;display:grid;align-content:center}.section .section-content .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}@media only screen and (max-width: 56.25em){.section .section-content{flex-wrap:wrap}.section .section-content:nth-child(even){flex-direction:row}.section .section-content:nth-child(even) .image-buttons-side{justify-self:center}.section .section-content .text-side{width:100%;justify-self:left}.section .section-content .text-side .preview-image{display:grid;width:100%}.section .section-content .text-side .preview-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.section .section-content .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.section .section-content .text-side .paragraph-items{column-count:1}}.section .image-text-sort{flex-direction:row-reverse}@media only screen and (max-width: 56.25em){.section .image-text-sort:nth-child(even) .image-buttons-side{justify-self:center}}.section .text-image-sort{flex-direction:row}\n"] }]
|
|
1080
|
-
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
1081
|
-
type: Input
|
|
1082
|
-
}] } });
|
|
1083
|
-
|
|
1084
|
-
class FeatureSectionEightComponent {
|
|
1085
|
-
}
|
|
1086
|
-
FeatureSectionEightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionEightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1087
|
-
FeatureSectionEightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionEightComponent, selector: "feature-section-eight", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <div class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </div>\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n <div>\n <mat-tab-group>\n <mat-tab [label]=\"step.label\" *ngFor=\"let step of sectionContent.steps\">\n <div class=\"tab-content\">\n {{step.title}}\n <img class=\"image\" [src]=\"step.image\" alt=\"\">\n </div>\n </mat-tab>\n </mat-tab-group>\n </div>\n <div class=\"features-cards\">\n <feature-detail-item-one [itemContent]=\"card\" class=\"feature-card\" *ngFor=\"let card of sectionContent.featuresCards\">\n </feature-detail-item-one>\n </div>\n</section>", 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{padding:4rem 0;margin:auto;width:90%;display:flex;flex-direction:column;row-gap:2rem}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .tip-title{text-align:center;color:#155ed4;font-weight:800;font-size:1.8rem}.section .tab-content{display:flex;flex-direction:column;place-items:center;width:100%;row-gap:2rem;padding:2rem 0}.section .image{width:70%;border-radius:1.5rem;max-height:50rem;object-fit:cover;margin:auto}.section .mat-mdc-form-field{margin-top:16px}.section .features-cards{display:flex;flex-direction:row;column-gap:2%}.section .features-cards .feature-card{min-width:32%}@media only screen and (max-width: 750px){.section .features-cards{flex-direction:column;row-gap:3rem}}@media only screen and (max-width: 37.5em){.section .image{width:100%}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle"] }, { kind: "component", type: FeatureDetailItemOneComponent, selector: "feature-detail-item-one", inputs: ["itemContent"] }] });
|
|
1088
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionEightComponent, decorators: [{
|
|
1089
|
-
type: Component,
|
|
1090
|
-
args: [{ selector: 'feature-section-eight', template: "<section class=\"section\">\n <div class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </div>\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\n <div>\n <mat-tab-group>\n <mat-tab [label]=\"step.label\" *ngFor=\"let step of sectionContent.steps\">\n <div class=\"tab-content\">\n {{step.title}}\n <img class=\"image\" [src]=\"step.image\" alt=\"\">\n </div>\n </mat-tab>\n </mat-tab-group>\n </div>\n <div class=\"features-cards\">\n <feature-detail-item-one [itemContent]=\"card\" class=\"feature-card\" *ngFor=\"let card of sectionContent.featuresCards\">\n </feature-detail-item-one>\n </div>\n</section>", 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{padding:4rem 0;margin:auto;width:90%;display:flex;flex-direction:column;row-gap:2rem}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .tip-title{text-align:center;color:#155ed4;font-weight:800;font-size:1.8rem}.section .tab-content{display:flex;flex-direction:column;place-items:center;width:100%;row-gap:2rem;padding:2rem 0}.section .image{width:70%;border-radius:1.5rem;max-height:50rem;object-fit:cover;margin:auto}.section .mat-mdc-form-field{margin-top:16px}.section .features-cards{display:flex;flex-direction:row;column-gap:2%}.section .features-cards .feature-card{min-width:32%}@media only screen and (max-width: 750px){.section .features-cards{flex-direction:column;row-gap:3rem}}@media only screen and (max-width: 37.5em){.section .image{width:100%}}\n"] }]
|
|
1091
|
-
}], propDecorators: { sectionContent: [{
|
|
1092
|
-
type: Input
|
|
1093
|
-
}] } });
|
|
1094
|
-
|
|
1095
|
-
class FeatureSectionNineComponent {
|
|
1096
|
-
constructor() {
|
|
1097
|
-
this.selectedIndex = 0;
|
|
1098
|
-
}
|
|
1099
|
-
onIndexChanged($event) {
|
|
1100
|
-
let index = $event.selectedIndex;
|
|
1101
|
-
this.selectedIndex = index;
|
|
1102
|
-
}
|
|
1103
|
-
}
|
|
1104
|
-
FeatureSectionNineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionNineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1105
|
-
FeatureSectionNineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionNineComponent, selector: "feature-section-nine", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n\n <div class=\"side-one\" *ngIf=\"sectionContent\">\n <div class=\"subtitle\">\n {{sectionContent[selectedIndex].subtitle}}\n </div>\n <div class=\"title\">\n {{sectionContent[selectedIndex].title}}\n </div>\n <div class=\"description\">\n {{sectionContent[selectedIndex].description}}\n </div>\n </div>\n <div class=\"vertical-divider\"></div>\n <div class=\"side-two\">\n <mat-vertical-stepper (selectionChange)=\"onIndexChanged($event)\" [selectedIndex]=\"selectedIndex\" [linear]=\"false\" #stepper>\n <mat-step *ngFor=\"let step of sectionContent\">\n <ng-template matStepLabel>\n {{step.stepLabel}}\n </ng-template>\n </mat-step>\n </mat-vertical-stepper>\n </div>\n</section>", 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{display:flex;flex-direction:row;column-gap:1.5%;margin:auto;width:90%}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .side-one{width:55%;margin:10% auto}.section .side-one .title{font-size:2.8rem;color:#155ed4;margin-top:1.4rem;margin-bottom:2rem;font-weight:700}.section .side-one .subtitle{font-size:1.8rem;color:#32353b;font-weight:700}.section .side-one .description{color:#32353b;font-size:1.4rem}.section .vertical-divider{border-left:1px solid #155ED4;height:40rem;align-self:center;width:2%}.section .side-two{width:40%}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$3.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i2$3.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i2$3.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }] });
|
|
1106
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionNineComponent, decorators: [{
|
|
1107
|
-
type: Component,
|
|
1108
|
-
args: [{ selector: 'feature-section-nine', template: "<section class=\"section\">\n\n <div class=\"side-one\" *ngIf=\"sectionContent\">\n <div class=\"subtitle\">\n {{sectionContent[selectedIndex].subtitle}}\n </div>\n <div class=\"title\">\n {{sectionContent[selectedIndex].title}}\n </div>\n <div class=\"description\">\n {{sectionContent[selectedIndex].description}}\n </div>\n </div>\n <div class=\"vertical-divider\"></div>\n <div class=\"side-two\">\n <mat-vertical-stepper (selectionChange)=\"onIndexChanged($event)\" [selectedIndex]=\"selectedIndex\" [linear]=\"false\" #stepper>\n <mat-step *ngFor=\"let step of sectionContent\">\n <ng-template matStepLabel>\n {{step.stepLabel}}\n </ng-template>\n </mat-step>\n </mat-vertical-stepper>\n </div>\n</section>", 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{display:flex;flex-direction:row;column-gap:1.5%;margin:auto;width:90%}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .side-one{width:55%;margin:10% auto}.section .side-one .title{font-size:2.8rem;color:#155ed4;margin-top:1.4rem;margin-bottom:2rem;font-weight:700}.section .side-one .subtitle{font-size:1.8rem;color:#32353b;font-weight:700}.section .side-one .description{color:#32353b;font-size:1.4rem}.section .vertical-divider{border-left:1px solid #155ED4;height:40rem;align-self:center;width:2%}.section .side-two{width:40%}\n"] }]
|
|
1109
|
-
}], propDecorators: { sectionContent: [{
|
|
1110
|
-
type: Input
|
|
1111
|
-
}] } });
|
|
1112
|
-
|
|
1113
|
-
class FeatureSectionSixComponent {
|
|
1114
|
-
constructor(breakpointObserver) {
|
|
1115
|
-
this.breakpointObserver = breakpointObserver;
|
|
1116
|
-
this.translateX = 0;
|
|
1117
|
-
}
|
|
1118
|
-
ngOnInit() {
|
|
1119
|
-
this.breakpointObserver.observe([
|
|
1120
|
-
"(max-width: 900px)"
|
|
1121
|
-
]).subscribe((result) => {
|
|
1122
|
-
if (result.matches) {
|
|
1123
|
-
this.isTabPortrait = true;
|
|
1124
|
-
}
|
|
1125
|
-
else {
|
|
1126
|
-
this.isTabPortrait = false;
|
|
1127
|
-
}
|
|
1128
|
-
});
|
|
1129
|
-
for (let part of this.sectionContent.parts) {
|
|
1130
|
-
part.isClicked = false;
|
|
1131
|
-
}
|
|
1132
|
-
this.onClickImage(0);
|
|
1133
|
-
}
|
|
1134
|
-
onClickNext() {
|
|
1135
|
-
if (this.currentIndex < (this.sectionContent.parts.length - 1)) {
|
|
1136
|
-
this.currentIndex++;
|
|
1137
|
-
this.onClickImage(this.currentIndex);
|
|
1138
|
-
}
|
|
903
|
+
class CustomTooltipComponent {
|
|
904
|
+
onMouseEnter() {
|
|
905
|
+
this.showDetails = true;
|
|
1139
906
|
}
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
this.currentIndex--;
|
|
1143
|
-
this.onClickImage(this.currentIndex);
|
|
1144
|
-
}
|
|
907
|
+
onMouseClick() {
|
|
908
|
+
this.showDetails = !this.showDetails;
|
|
1145
909
|
}
|
|
1146
|
-
|
|
1147
|
-
this.
|
|
1148
|
-
if (this.isTabPortrait) {
|
|
1149
|
-
this.translateX = (index) * -85;
|
|
1150
|
-
}
|
|
1151
|
-
else {
|
|
1152
|
-
this.translateX = (index) * -45;
|
|
1153
|
-
}
|
|
1154
|
-
for (let part of this.sectionContent.parts) {
|
|
1155
|
-
part.isClicked = false;
|
|
1156
|
-
}
|
|
1157
|
-
this.sectionContent.parts[index].isClicked = true;
|
|
1158
|
-
if (this.sectionContent.parts.length == 0 || this.sectionContent.parts.length == 1) {
|
|
1159
|
-
this.isFirstPart = true;
|
|
1160
|
-
this.isLastPart = true;
|
|
1161
|
-
}
|
|
1162
|
-
else if (index == 0) {
|
|
1163
|
-
this.isFirstPart = true;
|
|
1164
|
-
this.isLastPart = false;
|
|
1165
|
-
}
|
|
1166
|
-
else if (index == (this.sectionContent.parts.length - 1)) {
|
|
1167
|
-
this.isLastPart = true;
|
|
1168
|
-
this.isFirstPart = false;
|
|
1169
|
-
}
|
|
1170
|
-
else {
|
|
1171
|
-
this.isLastPart = false;
|
|
1172
|
-
this.isFirstPart = false;
|
|
1173
|
-
}
|
|
910
|
+
onMouseLeave() {
|
|
911
|
+
this.showDetails = false;
|
|
1174
912
|
}
|
|
1175
913
|
}
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type:
|
|
914
|
+
CustomTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
915
|
+
CustomTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CustomTooltipComponent, selector: "custom-tooltip", ngImport: i0, template: "<div class=\"icon\">\n <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\n <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\n <div>\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n </div>\n </div>\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n <fa-icon icon=\"caret-left\"></fa-icon>\n <ng-content></ng-content>\n </div>\n </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.icon{color:#32353b;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
916
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomTooltipComponent, decorators: [{
|
|
1179
917
|
type: Component,
|
|
1180
|
-
args: [{ selector: '
|
|
1181
|
-
}]
|
|
1182
|
-
type: Input
|
|
1183
|
-
}] } });
|
|
918
|
+
args: [{ selector: 'custom-tooltip', template: "<div class=\"icon\">\n <div class=\"content\" (mouseleave)=\"onMouseLeave()\">\n <div (click)=\"onMouseClick()\" class=\"icon-container\" (mouseenter)=\"onMouseEnter()\">\n <div>\n <fa-icon icon=\"info-circle\" class=\"icon-shape\"></fa-icon>\n </div>\n </div>\n <div class=\"tooltip-message-box\" [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">\n <fa-icon icon=\"caret-left\"></fa-icon>\n <ng-content></ng-content>\n </div>\n </div>\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%}}@font-face{font-family:maiandra;src:url(./assets/Maiandra.ttf)}app-root{font-size:1.6rem;font-family:maiandra}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.icon{color:#32353b;position:relative;width:3rem}.icon .content{position:absolute;display:flex;flex-direction:row;top:0}.icon .icon-container{display:inline-block;height:-moz-fit-content;height:fit-content;cursor:pointer}.icon .icon-container .icon-shape{position:relative;z-index:-2}.icon .tooltip-message-box{align-self:center;display:flex;column-gap:0rem;z-index:100;transition:all .1s ease-in-out;z-index:1}.icon .tooltip-message-box fa-icon{font-size:2rem;margin-left:.5rem}.icon .no-details{opacity:0;transform:scale(0)}.icon .details{opacity:1;transform:scale(1)}\n"] }]
|
|
919
|
+
}] });
|
|
1184
920
|
|
|
1185
921
|
class JoolerWebsitesSharedModule {
|
|
1186
922
|
}
|
|
@@ -1212,18 +948,6 @@ JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
1212
948
|
CtaSectionStyleThreeComponent,
|
|
1213
949
|
HeaderSectionOneComponent,
|
|
1214
950
|
CustomTooltipComponent,
|
|
1215
|
-
FeatureSectionOneComponent,
|
|
1216
|
-
FeatureSectionTwoComponent,
|
|
1217
|
-
FeatureSectionThreeComponent,
|
|
1218
|
-
FeatureDetailItemOneComponent,
|
|
1219
|
-
FeatureDetailItemTwoComponent,
|
|
1220
|
-
FeatureDetailItemThreeComponent,
|
|
1221
|
-
FeatureSectionFourComponent,
|
|
1222
|
-
FeatureSectionFiveComponent,
|
|
1223
|
-
FeatureSectionSixComponent,
|
|
1224
|
-
FeatureSectionSevenComponent,
|
|
1225
|
-
FeatureSectionEightComponent,
|
|
1226
|
-
FeatureSectionNineComponent,
|
|
1227
951
|
VerticalSideTabsComponent], imports: [FontAwesomeModule,
|
|
1228
952
|
CommonModule,
|
|
1229
953
|
AppMaterialModule,
|
|
@@ -1264,18 +988,6 @@ JoolerWebsitesSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
|
|
|
1264
988
|
CtaSectionStyleThreeComponent,
|
|
1265
989
|
HeaderSectionOneComponent,
|
|
1266
990
|
CustomTooltipComponent,
|
|
1267
|
-
FeatureSectionOneComponent,
|
|
1268
|
-
FeatureSectionTwoComponent,
|
|
1269
|
-
FeatureSectionThreeComponent,
|
|
1270
|
-
FeatureSectionFourComponent,
|
|
1271
|
-
FeatureSectionFiveComponent,
|
|
1272
|
-
FeatureSectionSixComponent,
|
|
1273
|
-
FeatureSectionSevenComponent,
|
|
1274
|
-
FeatureSectionEightComponent,
|
|
1275
|
-
FeatureSectionNineComponent,
|
|
1276
|
-
FeatureDetailItemOneComponent,
|
|
1277
|
-
FeatureDetailItemTwoComponent,
|
|
1278
|
-
FeatureDetailItemThreeComponent,
|
|
1279
991
|
VerticalSideTabsComponent] });
|
|
1280
992
|
JoolerWebsitesSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: JoolerWebsitesSharedModule, imports: [FontAwesomeModule,
|
|
1281
993
|
CommonModule,
|
|
@@ -1321,18 +1033,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1321
1033
|
CtaSectionStyleThreeComponent,
|
|
1322
1034
|
HeaderSectionOneComponent,
|
|
1323
1035
|
CustomTooltipComponent,
|
|
1324
|
-
FeatureSectionOneComponent,
|
|
1325
|
-
FeatureSectionTwoComponent,
|
|
1326
|
-
FeatureSectionThreeComponent,
|
|
1327
|
-
FeatureDetailItemOneComponent,
|
|
1328
|
-
FeatureDetailItemTwoComponent,
|
|
1329
|
-
FeatureDetailItemThreeComponent,
|
|
1330
|
-
FeatureSectionFourComponent,
|
|
1331
|
-
FeatureSectionFiveComponent,
|
|
1332
|
-
FeatureSectionSixComponent,
|
|
1333
|
-
FeatureSectionSevenComponent,
|
|
1334
|
-
FeatureSectionEightComponent,
|
|
1335
|
-
FeatureSectionNineComponent,
|
|
1336
1036
|
VerticalSideTabsComponent,
|
|
1337
1037
|
],
|
|
1338
1038
|
imports: [
|
|
@@ -1379,18 +1079,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1379
1079
|
CtaSectionStyleThreeComponent,
|
|
1380
1080
|
HeaderSectionOneComponent,
|
|
1381
1081
|
CustomTooltipComponent,
|
|
1382
|
-
FeatureSectionOneComponent,
|
|
1383
|
-
FeatureSectionTwoComponent,
|
|
1384
|
-
FeatureSectionThreeComponent,
|
|
1385
|
-
FeatureSectionFourComponent,
|
|
1386
|
-
FeatureSectionFiveComponent,
|
|
1387
|
-
FeatureSectionSixComponent,
|
|
1388
|
-
FeatureSectionSevenComponent,
|
|
1389
|
-
FeatureSectionEightComponent,
|
|
1390
|
-
FeatureSectionNineComponent,
|
|
1391
|
-
FeatureDetailItemOneComponent,
|
|
1392
|
-
FeatureDetailItemTwoComponent,
|
|
1393
|
-
FeatureDetailItemThreeComponent,
|
|
1394
1082
|
VerticalSideTabsComponent,
|
|
1395
1083
|
]
|
|
1396
1084
|
}]
|
|
@@ -1490,5 +1178,5 @@ class callToActionButton {
|
|
|
1490
1178
|
* Generated bundle index. Do not edit.
|
|
1491
1179
|
*/
|
|
1492
1180
|
|
|
1493
|
-
export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, CallToActionSectionTwo, CallToActionSectionTwoComponent, ChooseCountryWithFlagComponent, City, ComingSoonComponent, ContactUsPageComponent, Country, CtaSectionStyleFourComponent, CtaSectionStyleThreeComponent, CustomTooltipComponent, FAQ, FAQCategory, FAQSubcategory, FaqCategoryListingComponent, FaqListingComponent,
|
|
1181
|
+
export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, 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, VerticalSideTabsComponent, callToActionButton, socialMediaLinks };
|
|
1494
1182
|
//# sourceMappingURL=jooler-websites-shared.mjs.map
|