@jooler/jooler-websites-shared 0.0.182 → 0.0.184
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 +1 -1
- package/esm2020/lib/contact-us-page/contact-us-page.component.mjs +1 -1
- package/esm2020/lib/cta-section-style-four/cta-section-style-four.component.mjs +1 -1
- package/esm2020/lib/cta-section-style-three/cta-section-style-three.component.mjs +2 -2
- package/esm2020/lib/header-section-one/header-section-one.component.mjs +1 -1
- package/esm2020/lib/page-section-style-thirteen/page-section-style-thirteen.component.mjs +1 -1
- package/esm2020/lib/page-section-style-three/page-section-style-three.component.mjs +3 -3
- package/esm2020/lib/page-section-with-multiple-cards/page-section-with-multiple-cards.component.mjs +1 -1
- package/esm2020/lib/section-title/section-title.component.mjs +5 -3
- package/esm2020/lib/team/team.component.mjs +1 -1
- package/esm2020/lib/value-prop-card/value-prop-card.component.mjs +2 -2
- package/esm2020/lib/value-props-section/value-props-section.component.mjs +1 -1
- package/esm2020/lib/values/values.component.mjs +1 -1
- package/fesm2015/jooler-websites-shared.mjs +19 -17
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +19 -17
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/lib/page-section-style-three/page-section-style-three.component.d.ts +1 -1
- package/lib/section-title/section-title.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -39,14 +39,16 @@ class SectionTitleComponent {
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
SectionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
42
|
-
SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SectionTitleComponent, selector: "section-title", inputs: { sectionTitle: "sectionTitle", withoutTitleCase: "withoutTitleCase" }, ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider,\r\n'small-font': sectionTitle.fontSizeEnum == sectionTitleSizes.SMALL,\r\n'medium-font': sectionTitle.fontSizeEnum == sectionTitleSizes.MEDIUM || (!sectionTitle.fontSizeEnum),\r\n'large-font': (sectionTitle.fontSizeEnum == sectionTitleSizes.LARGE) }\">\r\n <div class=\"title-container\">\r\n <div class=\"title\" *ngIf=\"sectionTitle.title\">\r\n {{withoutTitleCase? sectionTitle.title : (sectionTitle.title | titlecase)}}\r\n </div>\r\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\r\n </div>\r\n </div>\r\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\r\n {{sectionTitle.subtitle}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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:
|
|
42
|
+
SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SectionTitleComponent, selector: "section-title", inputs: { sectionTitle: "sectionTitle", withoutTitleCase: "withoutTitleCase", descriptionWidth: "descriptionWidth" }, ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider,\r\n'small-font': sectionTitle.fontSizeEnum == sectionTitleSizes.SMALL,\r\n'medium-font': sectionTitle.fontSizeEnum == sectionTitleSizes.MEDIUM || (!sectionTitle.fontSizeEnum),\r\n'large-font': (sectionTitle.fontSizeEnum == sectionTitleSizes.LARGE) }\">\r\n <div class=\"title-container\">\r\n <div class=\"title\" *ngIf=\"sectionTitle.title\">\r\n {{withoutTitleCase? sectionTitle.title : (sectionTitle.title | titlecase)}}\r\n </div>\r\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\r\n </div>\r\n </div>\r\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\"\r\n [ngStyle]=\"descriptionWidth ? {width : descriptionWidth} : null\">\r\n {{sectionTitle.subtitle}}<ng-content select=\"subtitleWithLinks\"></ng-content>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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:90%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:700;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}.light-background .divider{background-color:#155ed4}.light-background .title,.light-background .description{color:#32353b}.description{width:85%;font-weight:500}.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}.large-font .title{font-size:5rem}.large-font .description{font-size:1.8rem}.medium-font .title{font-size:4rem}.medium-font .description{font-size:1.8rem}.small-font .title{font-size:3rem}.small-font .description{font-size:1.6rem}@media only screen and (max-width: 37.5em){.large-font .title,.align-left .title,.align-center .title{font-size:3rem}.large-font .description,.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: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }] });
|
|
43
43
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, decorators: [{
|
|
44
44
|
type: Component,
|
|
45
|
-
args: [{ selector: 'section-title', template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider,\r\n'small-font': sectionTitle.fontSizeEnum == sectionTitleSizes.SMALL,\r\n'medium-font': sectionTitle.fontSizeEnum == sectionTitleSizes.MEDIUM || (!sectionTitle.fontSizeEnum),\r\n'large-font': (sectionTitle.fontSizeEnum == sectionTitleSizes.LARGE) }\">\r\n <div class=\"title-container\">\r\n <div class=\"title\" *ngIf=\"sectionTitle.title\">\r\n {{withoutTitleCase? sectionTitle.title : (sectionTitle.title | titlecase)}}\r\n </div>\r\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\r\n </div>\r\n </div>\r\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\">\r\n {{sectionTitle.subtitle}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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:
|
|
45
|
+
args: [{ selector: 'section-title', template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider,\r\n'small-font': sectionTitle.fontSizeEnum == sectionTitleSizes.SMALL,\r\n'medium-font': sectionTitle.fontSizeEnum == sectionTitleSizes.MEDIUM || (!sectionTitle.fontSizeEnum),\r\n'large-font': (sectionTitle.fontSizeEnum == sectionTitleSizes.LARGE) }\">\r\n <div class=\"title-container\">\r\n <div class=\"title\" *ngIf=\"sectionTitle.title\">\r\n {{withoutTitleCase? sectionTitle.title : (sectionTitle.title | titlecase)}}\r\n </div>\r\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\r\n </div>\r\n </div>\r\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\"\r\n [ngStyle]=\"descriptionWidth ? {width : descriptionWidth} : null\">\r\n {{sectionTitle.subtitle}}<ng-content select=\"subtitleWithLinks\"></ng-content>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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:90%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:700;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}.light-background .divider{background-color:#155ed4}.light-background .title,.light-background .description{color:#32353b}.description{width:85%;font-weight:500}.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}.large-font .title{font-size:5rem}.large-font .description{font-size:1.8rem}.medium-font .title{font-size:4rem}.medium-font .description{font-size:1.8rem}.small-font .title{font-size:3rem}.small-font .description{font-size:1.6rem}@media only screen and (max-width: 37.5em){.large-font .title,.align-left .title,.align-center .title{font-size:3rem}.large-font .description,.align-left .description,.align-center .description{width:85%;font-size:1.8rem}}\n"] }]
|
|
46
46
|
}], propDecorators: { sectionTitle: [{
|
|
47
47
|
type: Input
|
|
48
48
|
}], withoutTitleCase: [{
|
|
49
49
|
type: Input
|
|
50
|
+
}], descriptionWidth: [{
|
|
51
|
+
type: Input
|
|
50
52
|
}] } });
|
|
51
53
|
|
|
52
54
|
class PageSectionStyleTenComponent {
|
|
@@ -100,7 +102,7 @@ class AchievementsComponent {
|
|
|
100
102
|
ngOnInit() { }
|
|
101
103
|
}
|
|
102
104
|
AchievementsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
103
|
-
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}\">\r\n <div class=\"content\">\r\n <div>\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"achievements-cards\">\r\n <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\r\n <div class=\"number\">\r\n {{achievement.number}}\r\n </div>\r\n <div class=\"subtitle\">\r\n {{achievement.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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", "withoutTitleCase"] }] });
|
|
105
|
+
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}\">\r\n <div class=\"content\">\r\n <div>\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"achievements-cards\">\r\n <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\r\n <div class=\"number\">\r\n {{achievement.number}}\r\n </div>\r\n <div class=\"subtitle\">\r\n {{achievement.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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", "withoutTitleCase", "descriptionWidth"] }] });
|
|
104
106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, decorators: [{
|
|
105
107
|
type: Component,
|
|
106
108
|
args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': sectionContent.sectionTitle.isDarkBg}\">\r\n <div class=\"content\">\r\n <div>\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"achievements-cards\">\r\n <div class=\"achievement-card\" *ngFor=\"let achievement of sectionContent.achievements\">\r\n <div class=\"number\">\r\n {{achievement.number}}\r\n </div>\r\n <div class=\"subtitle\">\r\n {{achievement.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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"] }]
|
|
@@ -308,7 +310,7 @@ class PageSectionStyleThirteenComponent {
|
|
|
308
310
|
}
|
|
309
311
|
}
|
|
310
312
|
PageSectionStyleThirteenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
311
|
-
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionTitle: "sectionTitle", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\r\n <div class=\"left-side\">\r\n <div class=\"headline\">\r\n <section-title [sectionTitle]=\"sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"items\">\r\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\r\n <div class=\"left-column\">\r\n\r\n <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\r\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\r\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\r\n <img [src]=\"item.iconImage\" alt=\"\">\r\n </div>\r\n </div>\r\n <div></div>\r\n </div>\r\n <div class=\"right-column\">\r\n <div class=\"item-title\">{{item.title}}</div>\r\n <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\r\n {{item.description}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\r\n <div class=\"image-container\">\r\n <img [src]=\"showedImage\" alt=\"\">\r\n </div>\r\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\r\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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,.why-choose-us .hovered-item .right-column .item-description{color:#fff}.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:flex;flex-direction:column;row-gap:1rem}.why-choose-us .right-column .item-title{color:#32353b;font-weight:600;font-size:2.2rem}.why-choose-us .right-column .item-description{color:#32353bcc;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", "withoutTitleCase"] }] });
|
|
313
|
+
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionTitle: "sectionTitle", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\r\n <div class=\"left-side\">\r\n <div class=\"headline\">\r\n <section-title [sectionTitle]=\"sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"items\">\r\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\r\n <div class=\"left-column\">\r\n\r\n <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\r\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\r\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\r\n <img [src]=\"item.iconImage\" alt=\"\">\r\n </div>\r\n </div>\r\n <div></div>\r\n </div>\r\n <div class=\"right-column\">\r\n <div class=\"item-title\">{{item.title}}</div>\r\n <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\r\n {{item.description}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\r\n <div class=\"image-container\">\r\n <img [src]=\"showedImage\" alt=\"\">\r\n </div>\r\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\r\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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,.why-choose-us .hovered-item .right-column .item-description{color:#fff}.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:flex;flex-direction:column;row-gap:1rem}.why-choose-us .right-column .item-title{color:#32353b;font-weight:600;font-size:2.2rem}.why-choose-us .right-column .item-description{color:#32353bcc;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", "withoutTitleCase", "descriptionWidth"] }] });
|
|
312
314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, decorators: [{
|
|
313
315
|
type: Component,
|
|
314
316
|
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\r\n <div class=\"left-side\">\r\n <div class=\"headline\">\r\n <section-title [sectionTitle]=\"sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"items\">\r\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\" (click)=\"onClickChangeImage(item.image, i)\">\r\n <div class=\"left-column\">\r\n\r\n <div class=\"square-row\" [ngSwitch]=\"iconType\" [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\r\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\r\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\r\n <img [src]=\"item.iconImage\" alt=\"\">\r\n </div>\r\n </div>\r\n <div></div>\r\n </div>\r\n <div class=\"right-column\">\r\n <div class=\"item-title\">{{item.title}}</div>\r\n <div class=\"item-description\" [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\r\n {{item.description}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\r\n <div class=\"image-container\">\r\n <img [src]=\"showedImage\" alt=\"\">\r\n </div>\r\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\r\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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,.why-choose-us .hovered-item .right-column .item-description{color:#fff}.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:flex;flex-direction:column;row-gap:1rem}.why-choose-us .right-column .item-title{color:#32353b;font-weight:600;font-size:2.2rem}.why-choose-us .right-column .item-description{color:#32353bcc;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"] }]
|
|
@@ -384,7 +386,7 @@ class TeamComponent {
|
|
|
384
386
|
}
|
|
385
387
|
}
|
|
386
388
|
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 });
|
|
387
|
-
TeamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TeamComponent, selector: "team", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n <div class=\"cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n <div class=\"image-container\">\r\n <img [src]=\"teamMember.profilePicture\">\r\n </div>\r\n <div class=\"member-information\">\r\n <div class=\"name\">\r\n {{teamMember.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{teamMember.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\r\n [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-member pTemplate=\"item\">\r\n <div class=\"member-card\">\r\n <div class=\"image-container\">\r\n <img [src]=\"member.profilePicture\">\r\n </div>\r\n <div class=\"member-information\">\r\n <div class=\"name\">\r\n {{member.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{member.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n <div class=\"caption-text\">\r\n {{sectionContent.caption}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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:100%;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$1.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", "withoutTitleCase"] }] });
|
|
389
|
+
TeamComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TeamComponent, selector: "team", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n <div class=\"cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n <div class=\"image-container\">\r\n <img [src]=\"teamMember.profilePicture\">\r\n </div>\r\n <div class=\"member-information\">\r\n <div class=\"name\">\r\n {{teamMember.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{teamMember.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\r\n [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-member pTemplate=\"item\">\r\n <div class=\"member-card\">\r\n <div class=\"image-container\">\r\n <img [src]=\"member.profilePicture\">\r\n </div>\r\n <div class=\"member-information\">\r\n <div class=\"name\">\r\n {{member.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{member.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n <div class=\"caption-text\">\r\n {{sectionContent.caption}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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:100%;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$1.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", "withoutTitleCase", "descriptionWidth"] }] });
|
|
388
390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TeamComponent, decorators: [{
|
|
389
391
|
type: Component,
|
|
390
392
|
args: [{ selector: 'team', template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n <div class=\"cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n <div class=\"image-container\">\r\n <img [src]=\"teamMember.profilePicture\">\r\n </div>\r\n <div class=\"member-information\">\r\n <div class=\"name\">\r\n {{teamMember.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{teamMember.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"sectionContent.teamMembers\" [numVisible]='membersToShow'\r\n [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-member pTemplate=\"item\">\r\n <div class=\"member-card\">\r\n <div class=\"image-container\">\r\n <img [src]=\"member.profilePicture\">\r\n </div>\r\n <div class=\"member-information\">\r\n <div class=\"name\">\r\n {{member.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{member.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n <div class=\"caption-text\">\r\n {{sectionContent.caption}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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:100%;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"] }]
|
|
@@ -415,7 +417,7 @@ class ValuesComponent {
|
|
|
415
417
|
}
|
|
416
418
|
}
|
|
417
419
|
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 });
|
|
418
|
-
ValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuesComponent, selector: "values", inputs: { sectionContent: "sectionContent", withBgImage: "withBgImage", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"newSectionContent.sectionTitle\"></section-title>\r\n <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"card\" *ngFor=\"let card of newSectionContent.cards\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\" *ngIf=\"card.icon\">\r\n <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n </div>\r\n <div class=\"image\" *ngIf=\"!card.icon\">\r\n <img [src]=\"card.image\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"value-cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"newSectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-card pTemplate=\"item\">\r\n <div class=\"card\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\" *ngIf=\"card.icon\">\r\n <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n </div>\r\n <div class=\"image\" *ngIf=\"!card.icon\">\r\n <img [src]=\"card.image\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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 .image img{width:4rem;height:4rem;aspect-ratio:3/2;object-fit:contain}.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$1.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", "withoutTitleCase"] }] });
|
|
420
|
+
ValuesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuesComponent, selector: "values", inputs: { sectionContent: "sectionContent", withBgImage: "withBgImage", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"newSectionContent.sectionTitle\"></section-title>\r\n <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"card\" *ngFor=\"let card of newSectionContent.cards\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\" *ngIf=\"card.icon\">\r\n <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n </div>\r\n <div class=\"image\" *ngIf=\"!card.icon\">\r\n <img [src]=\"card.image\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"value-cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"newSectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-card pTemplate=\"item\">\r\n <div class=\"card\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\" *ngIf=\"card.icon\">\r\n <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n </div>\r\n <div class=\"image\" *ngIf=\"!card.icon\">\r\n <img [src]=\"card.image\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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 .image img{width:4rem;height:4rem;aspect-ratio:3/2;object-fit:contain}.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$1.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", "withoutTitleCase", "descriptionWidth"] }] });
|
|
419
421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuesComponent, decorators: [{
|
|
420
422
|
type: Component,
|
|
421
423
|
args: [{ selector: 'values', template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"newSectionContent.sectionTitle\"></section-title>\r\n <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"card\" *ngFor=\"let card of newSectionContent.cards\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\" *ngIf=\"card.icon\">\r\n <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n </div>\r\n <div class=\"image\" *ngIf=\"!card.icon\">\r\n <img [src]=\"card.image\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"value-cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"newSectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-card pTemplate=\"item\">\r\n <div class=\"card\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\" *ngIf=\"card.icon\">\r\n <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n </div>\r\n <div class=\"image\" *ngIf=\"!card.icon\">\r\n <img [src]=\"card.image\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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 .image img{width:4rem;height:4rem;aspect-ratio:3/2;object-fit:contain}.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"] }]
|
|
@@ -500,7 +502,7 @@ class PageSectionWithMultipleCardsComponent {
|
|
|
500
502
|
}
|
|
501
503
|
}
|
|
502
504
|
PageSectionWithMultipleCardsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
503
|
-
PageSectionWithMultipleCardsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionWithMultipleCardsComponent, selector: "page-section-with-multiple-cards", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\r\n <div class=\"text-part\">\r\n <h2 class=\"tip-title\">\r\n {{sectionContent.tipTitle}}\r\n </h2>\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\r\n <div class=\"card-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\r\n <path\r\n d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\r\n </svg>\r\n <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\r\n </div>\r\n <div class=\"card-title\">\r\n {{reason.title}}\r\n </div>\r\n <div class=\"card-description\">\r\n {{reason.description}}\r\n </div>\r\n </div>\r\n <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\r\n <div class=\"card-title\">\r\n {{sectionContent.allReasonsBox.ctaText}}\r\n </div>\r\n <div class=\"icon-circle\">\r\n <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\r\n </div>\r\n </button>\r\n\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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", "withoutTitleCase"] }] });
|
|
505
|
+
PageSectionWithMultipleCardsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionWithMultipleCardsComponent, selector: "page-section-with-multiple-cards", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"page\">\r\n <div class=\"text-part\">\r\n <h2 class=\"tip-title\">\r\n {{sectionContent.tipTitle}}\r\n </h2>\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\r\n <div class=\"card-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\r\n <path\r\n d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\r\n </svg>\r\n <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\r\n </div>\r\n <div class=\"card-title\">\r\n {{reason.title}}\r\n </div>\r\n <div class=\"card-description\">\r\n {{reason.description}}\r\n </div>\r\n </div>\r\n <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\r\n <div class=\"card-title\">\r\n {{sectionContent.allReasonsBox.ctaText}}\r\n </div>\r\n <div class=\"icon-circle\">\r\n <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\r\n </div>\r\n </button>\r\n\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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", "withoutTitleCase", "descriptionWidth"] }] });
|
|
504
506
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionWithMultipleCardsComponent, decorators: [{
|
|
505
507
|
type: Component,
|
|
506
508
|
args: [{ selector: 'page-section-with-multiple-cards', template: "<div class=\"page\">\r\n <div class=\"text-part\">\r\n <h2 class=\"tip-title\">\r\n {{sectionContent.tipTitle}}\r\n </h2>\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"reason-card\" *ngFor=\"let reason of sectionContent.reasons\">\r\n <div class=\"card-icon\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 97 97\" [style.fill]=\"reason.shapeColor\">\r\n <path\r\n d=\"M5.0312 58.8331C-9.18797 29.0705 16.1615 9.11602 41.3271 3.99601C66.4928 -1.12401 102.401 -5.60082 96.1642 40.2919C89.9278 86.1847 85.034 90.009 59.8684 95.129C34.7027 100.249 19.2504 88.5958 5.0312 58.8331Z\" />\r\n </svg>\r\n <fa-icon [style.color]=\"reason.iconColor\" [icon]=\"reason.iconName\"></fa-icon>\r\n </div>\r\n <div class=\"card-title\">\r\n {{reason.title}}\r\n </div>\r\n <div class=\"card-description\">\r\n {{reason.description}}\r\n </div>\r\n </div>\r\n <button class=\"all-reason-card\" (click)=\"onClickAllReasons(sectionContent.allReasonsBox.route)\">\r\n <div class=\"card-title\">\r\n {{sectionContent.allReasonsBox.ctaText}}\r\n </div>\r\n <div class=\"icon-circle\">\r\n <fa-icon [icon]=\"sectionContent.allReasonsBox.iconName\"></fa-icon>\r\n </div>\r\n </button>\r\n\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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"] }]
|
|
@@ -547,7 +549,7 @@ class ValuePropsSectionComponent {
|
|
|
547
549
|
}
|
|
548
550
|
}
|
|
549
551
|
ValuePropsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
550
|
-
ValuePropsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropsSectionComponent, selector: "value-props-section", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\r\n </section-title>\r\n <div class=\"value-prop-image\">\r\n <img [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n <div class=\"paragraph-items\">\r\n <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\r\n <span class=\"value-prop-icon\">\r\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\r\n <span class=\"paragraph-text\">\r\n {{paragraph.text}}\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"image-buttons-side\">\r\n <img [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;justify-content:space-between;column-gap:2%;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:58%;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:40%;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{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", "withoutTitleCase"] }] });
|
|
552
|
+
ValuePropsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropsSectionComponent, selector: "value-props-section", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\r\n </section-title>\r\n <div class=\"value-prop-image\">\r\n <img [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n <div class=\"paragraph-items\">\r\n <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\r\n <span class=\"value-prop-icon\">\r\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\r\n <span class=\"paragraph-text\">\r\n {{paragraph.text}}\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"image-buttons-side\">\r\n <img [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;justify-content:space-between;column-gap:2%;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:58%;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:40%;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{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", "withoutTitleCase", "descriptionWidth"] }] });
|
|
551
553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionComponent, decorators: [{
|
|
552
554
|
type: Component,
|
|
553
555
|
args: [{ selector: 'value-props-section', template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\r\n </section-title>\r\n <div class=\"value-prop-image\">\r\n <img [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n <div class=\"paragraph-items\">\r\n <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\r\n <span class=\"value-prop-icon\">\r\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\r\n <span class=\"paragraph-text\">\r\n {{paragraph.text}}\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"image-buttons-side\">\r\n <img [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;justify-content:space-between;column-gap:2%;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:58%;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:40%;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{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"] }]
|
|
@@ -705,7 +707,7 @@ class ContactUsPageComponent {
|
|
|
705
707
|
}
|
|
706
708
|
}
|
|
707
709
|
ContactUsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, deps: [{ token: i1$2.MatDialog }, { token: i1$1.BreakpointObserver }, { token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
708
|
-
ContactUsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContactUsPageComponent, selector: "contact-us-page", inputs: { subjects: "subjects", contactUsPageData: "contactUsPageData", apiPath: "apiPath", items: "items" }, ngImport: i0, template: "<div class=\"page\">\r\n <div class=\"contact-us\">\r\n <div class=\"left-side\">\r\n <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\r\n <div class=\"img-title\">\r\n {{contactUsPageData.imageTitle}}\r\n </div>\r\n <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\r\n <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\r\n <div class=\"img-description\">{{contactUsPageData.imageDescription}}\r\n </div>\r\n <div class=\"social-media-icons\">\r\n <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-side\">\r\n <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\r\n <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\r\n <div class=\"content\">\r\n <div class=\"message-box\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\r\n <div class=\"full-name-area\">\r\n <div class=\"first-name\">\r\n <span class=\"fields-labels\">First Name*</span>\r\n <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\r\n </div>\r\n <div class=\"last-name\">\r\n <span class=\"fields-labels\">Last Name*</span>\r\n <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\r\n </div>\r\n </div>\r\n <span class=\"fields-labels\">Company Name*</span>\r\n <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\r\n <span class=\"fields-labels\">Email*</span>\r\n <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\r\n <span class=\"fields-labels\">Phone Number</span>\r\n <div class=\"phone-number-section\">\r\n\r\n <div class=\"countries-list\">\r\n <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\r\n </div>\r\n <span class=\"code-section\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\r\n </span>\r\n <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\r\n </div>\r\n <div class=\"subject\">\r\n <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\r\n </ng-select>\r\n </div>\r\n <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\r\n\r\n\r\n </textarea>\r\n <div class=\"actions\">\r\n <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\r\n Submit\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"our-locations-section\">\r\n <div class=\"locations-content\">\r\n <div class=\"headline\">\r\n {{contactUsPageData.locations.headline}}\r\n </div>\r\n <div class=\"title\">\r\n {{contactUsPageData.locations.title}}\r\n </div>\r\n <div class=\"lines-img\">\r\n <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{contactUsPageData.locations.subtitle}}\r\n </div>\r\n <div class=\"addresses\">\r\n <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\r\n <div class=\"address-header\">\r\n <div class=\"icon\">\r\n <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\r\n </div>\r\n <div class=\"location-name\">\r\n {{address.name}}\r\n </div>\r\n </div>\r\n <div class=\"building\">\r\n {{address.building}}\r\n </div>\r\n <div class=\"location-area\">\r\n {{address.locationArea}}\r\n </div>\r\n <div class=\"hours\">\r\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n {{address.hours}}\r\n </div>\r\n <div class=\"cellular-number\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n {{address.phoneNumber}}\r\n </div>\r\n </div>\r\n <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\r\n [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\r\n [circular]=\"true\">\r\n <ng-template let-address pTemplate=\"item\">\r\n <div class=\"address\">\r\n <div class=\"address-header\">\r\n <div class=\"icon\">\r\n <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\r\n </div>\r\n <div class=\"location-name\">\r\n {{address.name}}\r\n </div>\r\n </div>\r\n <div class=\"building\">\r\n {{address.building}}\r\n </div>\r\n <div class=\"location-area\">\r\n {{address.locationArea}}\r\n </div>\r\n <div class=\"hours\">\r\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n {{address.hours}}\r\n </div>\r\n <div class=\"cellular-number\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n {{address.phoneNumber}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n </div>\r\n </div> -->\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase"] }, { kind: "component", type: ChooseCountryWithFlagComponent, selector: "choose-country-with-flag", inputs: ["items"], outputs: ["change"] }] });
|
|
710
|
+
ContactUsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ContactUsPageComponent, selector: "contact-us-page", inputs: { subjects: "subjects", contactUsPageData: "contactUsPageData", apiPath: "apiPath", items: "items" }, ngImport: i0, template: "<div class=\"page\">\r\n <div class=\"contact-us\">\r\n <div class=\"left-side\">\r\n <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\r\n <div class=\"img-title\">\r\n {{contactUsPageData.imageTitle}}\r\n </div>\r\n <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\r\n <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\r\n <div class=\"img-description\">{{contactUsPageData.imageDescription}}\r\n </div>\r\n <div class=\"social-media-icons\">\r\n <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-side\">\r\n <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\r\n <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\r\n <div class=\"content\">\r\n <div class=\"message-box\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\r\n <div class=\"full-name-area\">\r\n <div class=\"first-name\">\r\n <span class=\"fields-labels\">First Name*</span>\r\n <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\r\n </div>\r\n <div class=\"last-name\">\r\n <span class=\"fields-labels\">Last Name*</span>\r\n <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\r\n </div>\r\n </div>\r\n <span class=\"fields-labels\">Company Name*</span>\r\n <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\r\n <span class=\"fields-labels\">Email*</span>\r\n <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\r\n <span class=\"fields-labels\">Phone Number</span>\r\n <div class=\"phone-number-section\">\r\n\r\n <div class=\"countries-list\">\r\n <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\r\n </div>\r\n <span class=\"code-section\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\r\n </span>\r\n <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\r\n </div>\r\n <div class=\"subject\">\r\n <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\r\n </ng-select>\r\n </div>\r\n <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\r\n\r\n\r\n </textarea>\r\n <div class=\"actions\">\r\n <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\r\n Submit\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"our-locations-section\">\r\n <div class=\"locations-content\">\r\n <div class=\"headline\">\r\n {{contactUsPageData.locations.headline}}\r\n </div>\r\n <div class=\"title\">\r\n {{contactUsPageData.locations.title}}\r\n </div>\r\n <div class=\"lines-img\">\r\n <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{contactUsPageData.locations.subtitle}}\r\n </div>\r\n <div class=\"addresses\">\r\n <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\r\n <div class=\"address-header\">\r\n <div class=\"icon\">\r\n <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\r\n </div>\r\n <div class=\"location-name\">\r\n {{address.name}}\r\n </div>\r\n </div>\r\n <div class=\"building\">\r\n {{address.building}}\r\n </div>\r\n <div class=\"location-area\">\r\n {{address.locationArea}}\r\n </div>\r\n <div class=\"hours\">\r\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n {{address.hours}}\r\n </div>\r\n <div class=\"cellular-number\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n {{address.phoneNumber}}\r\n </div>\r\n </div>\r\n <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\r\n [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\r\n [circular]=\"true\">\r\n <ng-template let-address pTemplate=\"item\">\r\n <div class=\"address\">\r\n <div class=\"address-header\">\r\n <div class=\"icon\">\r\n <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\r\n </div>\r\n <div class=\"location-name\">\r\n {{address.name}}\r\n </div>\r\n </div>\r\n <div class=\"building\">\r\n {{address.building}}\r\n </div>\r\n <div class=\"location-area\">\r\n {{address.locationArea}}\r\n </div>\r\n <div class=\"hours\">\r\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n {{address.hours}}\r\n </div>\r\n <div class=\"cellular-number\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n {{address.phoneNumber}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n </div>\r\n </div> -->\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase", "descriptionWidth"] }, { kind: "component", type: ChooseCountryWithFlagComponent, selector: "choose-country-with-flag", inputs: ["items"], outputs: ["change"] }] });
|
|
709
711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContactUsPageComponent, decorators: [{
|
|
710
712
|
type: Component,
|
|
711
713
|
args: [{ selector: 'contact-us-page', template: "<div class=\"page\">\r\n <div class=\"contact-us\">\r\n <div class=\"left-side\">\r\n <img [src]=\"contactUsPageData.backgroundImage\" alt=\"\" class=\"bg-image\">\r\n <div class=\"img-title\">\r\n {{contactUsPageData.imageTitle}}\r\n </div>\r\n <div class=\"bottom-img-side\" *ngIf=\"!isUnderTabRange\">\r\n <div class=\"logo\"><img [src]=\"contactUsPageData.ourLogo\" alt=\"JOOLER\"></div>\r\n <div class=\"img-description\">{{contactUsPageData.imageDescription}}\r\n </div>\r\n <div class=\"social-media-icons\">\r\n <!-- <social-media-icons class=\"social-media\" [color]=\"'#fff'\" [areIconsInFooter]=\"false\"></social-media-icons> -->\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-side\">\r\n <section-title [sectionTitle]=\"contactUsPageData.sectionTitle\"></section-title>\r\n <!-- <section-title title=\"Get In Touch\" [alignLeft]=\"true\"></section-title> -->\r\n <div class=\"content\">\r\n <div class=\"message-box\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onClickSubmit()\">\r\n <div class=\"full-name-area\">\r\n <div class=\"first-name\">\r\n <span class=\"fields-labels\">First Name*</span>\r\n <input type=\"text\" formControlName=\"firstName\" class=\"input\" placeholder=\"First Name\" />\r\n </div>\r\n <div class=\"last-name\">\r\n <span class=\"fields-labels\">Last Name*</span>\r\n <input type=\"text\" formControlName=\"lastName\" class=\"input\" placeholder=\"Last Name\" />\r\n </div>\r\n </div>\r\n <span class=\"fields-labels\">Company Name*</span>\r\n <input type=\"text\" formControlName=\"companyName\" class=\"input\" placeholder=\"Your company name\" />\r\n <span class=\"fields-labels\">Email*</span>\r\n <input type=\"text\" formControlName=\"email\" class=\"input\" placeholder=\"name@example.com\" />\r\n <span class=\"fields-labels\">Phone Number</span>\r\n <div class=\"phone-number-section\">\r\n\r\n <div class=\"countries-list\">\r\n <choose-country-with-flag formControlName=\"country\" (change)=\"getSelectedOptionValue($event)\" [items]=\"items\"></choose-country-with-flag>\r\n </div>\r\n <span class=\"code-section\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n <input class=\"code\" [value]=\"selectedCode? selectedCode: null\" placeholder=\"--\" [readOnly]=\"true\" />\r\n </span>\r\n <input formControlName=\"phoneNumber\" type=\"number\" class=\"phone-num-input\" placeholder=\"Phone Number\" />\r\n </div>\r\n <div class=\"subject\">\r\n <ng-select formControlName=\"subject\" [items]=\"subjects\" bindLabel=\"label\" placeholder=\"Subject\" bindValue=\"label\">\r\n </ng-select>\r\n </div>\r\n <textarea type=\"text\" formControlName=\"message\" placeholder=\"Message\" class=\"text-area\">\r\n\r\n\r\n </textarea>\r\n <div class=\"actions\">\r\n <button class=\"submit\" type=\"submit\" mat-raised-button=\"mat-raised-button\" color=\"primary\">\r\n Submit\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"our-locations-section\">\r\n <div class=\"locations-content\">\r\n <div class=\"headline\">\r\n {{contactUsPageData.locations.headline}}\r\n </div>\r\n <div class=\"title\">\r\n {{contactUsPageData.locations.title}}\r\n </div>\r\n <div class=\"lines-img\">\r\n <img src=\"../../../assets/images/lines-contact-us.png\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{contactUsPageData.locations.subtitle}}\r\n </div>\r\n <div class=\"addresses\">\r\n <div class=\"address flexy\" *ngFor=\"let address of contactUsPageData.locations.addresses\">\r\n <div class=\"address-header\">\r\n <div class=\"icon\">\r\n <img [src]=\"contactUsPageData.locations.pinIconWhite\" alt=\"\">\r\n </div>\r\n <div class=\"location-name\">\r\n {{address.name}}\r\n </div>\r\n </div>\r\n <div class=\"building\">\r\n {{address.building}}\r\n </div>\r\n <div class=\"location-area\">\r\n {{address.locationArea}}\r\n </div>\r\n <div class=\"hours\">\r\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n {{address.hours}}\r\n </div>\r\n <div class=\"cellular-number\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n {{address.phoneNumber}}\r\n </div>\r\n </div>\r\n <p-carousel *ngIf=\"isUnderTabRange\" class=\"carousel\" [value]=\"contactUsPageData.locations.addresses\"\r\n [numVisible]='membersToShow' [numScroll]='scrollMemberNumber' [page]=\"0\" orientation=\"horizantol\"\r\n [circular]=\"true\">\r\n <ng-template let-address pTemplate=\"item\">\r\n <div class=\"address\">\r\n <div class=\"address-header\">\r\n <div class=\"icon\">\r\n <img [src]=\"contactUsPageData.locations.pinIconBlue\" alt=\"\">\r\n </div>\r\n <div class=\"location-name\">\r\n {{address.name}}\r\n </div>\r\n </div>\r\n <div class=\"building\">\r\n {{address.building}}\r\n </div>\r\n <div class=\"location-area\">\r\n {{address.locationArea}}\r\n </div>\r\n <div class=\"hours\">\r\n <fa-icon [icon]=\"['fas','clock']\"></fa-icon>\r\n {{address.hours}}\r\n </div>\r\n <div class=\"cellular-number\">\r\n <fa-icon [icon]=\"['fas','phone']\"></fa-icon>\r\n {{address.phoneNumber}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n </div>\r\n </div> -->\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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"] }]
|
|
@@ -730,10 +732,10 @@ class PageSectionStyleThreeComponent {
|
|
|
730
732
|
}
|
|
731
733
|
}
|
|
732
734
|
PageSectionStyleThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
733
|
-
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\">\r\n <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\r\n <div class=\"section-container\">\r\n <div class=\"image-side\">\r\n <img [src]=\"valueprop.image\">\r\n </div>\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"valueprop.sectionTitle\">\r\n </section-title>\r\n <div class=\"optional-button\">\r\n <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.button\" (click)=\"onClickValuePropButton(valueprop.button.route)\">\r\n {{valueprop.button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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: i4.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", "withoutTitleCase"] }] });
|
|
735
|
+
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\">\r\n <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\r\n <div class=\"section-container\">\r\n <div class=\"image-side\">\r\n <img [src]=\"valueprop.image\">\r\n </div>\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"valueprop.sectionTitle\">\r\n <span subtitleWithLinks><ng-content select=\"subtitleWithLinks\"></ng-content></span>\r\n </section-title>\r\n <div class=\"optional-button\">\r\n <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.button\" (click)=\"onClickValuePropButton(valueprop.button.route)\">\r\n {{valueprop.button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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: i4.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", "withoutTitleCase", "descriptionWidth"] }] });
|
|
734
736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThreeComponent, decorators: [{
|
|
735
737
|
type: Component,
|
|
736
|
-
args: [{ selector: 'page-section-style-three', template: "<div class=\"page\">\r\n <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\r\n <div class=\"section-container\">\r\n <div class=\"image-side\">\r\n <img [src]=\"valueprop.image\">\r\n </div>\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"valueprop.sectionTitle\">\r\n </section-title>\r\n <div class=\"optional-button\">\r\n <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.button\" (click)=\"onClickValuePropButton(valueprop.button.route)\">\r\n {{valueprop.button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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"] }]
|
|
738
|
+
args: [{ selector: 'page-section-style-three', template: "<div class=\"page\">\r\n <div class=\"section\" *ngFor=\"let valueprop of sectionContent\">\r\n <div class=\"section-container\">\r\n <div class=\"image-side\">\r\n <img [src]=\"valueprop.image\">\r\n </div>\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"valueprop.sectionTitle\">\r\n <span subtitleWithLinks><ng-content select=\"subtitleWithLinks\"></ng-content></span>\r\n </section-title>\r\n <div class=\"optional-button\">\r\n <button mat-raised-button class=\"value-prop-button\" *ngIf=\"valueprop.button\" (click)=\"onClickValuePropButton(valueprop.button.route)\">\r\n {{valueprop.button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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"] }]
|
|
737
739
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
738
740
|
type: Input
|
|
739
741
|
}] } });
|
|
@@ -852,7 +854,7 @@ class CtaSectionStyleFourComponent {
|
|
|
852
854
|
}
|
|
853
855
|
}
|
|
854
856
|
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 });
|
|
855
|
-
CtaSectionStyleFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleFourComponent, selector: "cta-section-style-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\r\n <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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: i4.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", "withoutTitleCase"] }] });
|
|
857
|
+
CtaSectionStyleFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleFourComponent, selector: "cta-section-style-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\r\n <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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: i4.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", "withoutTitleCase", "descriptionWidth"] }] });
|
|
856
858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleFourComponent, decorators: [{
|
|
857
859
|
type: Component,
|
|
858
860
|
args: [{ selector: 'cta-section-style-four', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\" alt=\"bg-img\">\r\n <div class=\"text-side\" [ngClass]=\"{'flex-reverse':sectionContent.imageTextSort}\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\" (click)=\"onClickCtaButton( button.route)\" class=\"cta-button\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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"] }]
|
|
@@ -871,10 +873,10 @@ class CtaSectionStyleThreeComponent {
|
|
|
871
873
|
}
|
|
872
874
|
}
|
|
873
875
|
CtaSectionStyleThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleThreeComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
874
|
-
CtaSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleThreeComponent, selector: "cta-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\"\r\n alt=\"bg-img\">\r\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && !sectionContent.titleImageOrder\">\r\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n </div>\r\n <div class=\"text-side\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && sectionContent.titleImageOrder\">\r\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\"\r\n (click)=\"onClickCtaButton(button.route)\"\r\n [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:
|
|
876
|
+
CtaSectionStyleThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CtaSectionStyleThreeComponent, selector: "cta-section-style-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\"\r\n alt=\"bg-img\">\r\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && !sectionContent.titleImageOrder\">\r\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n </div>\r\n <div class=\"text-side\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && sectionContent.titleImageOrder\">\r\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\"\r\n (click)=\"onClickCtaButton(button.route)\"\r\n [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:2rem;width:100%;justify-items:center}.main-card .text-side .section-title{width:60%;margin:auto}.main-card .text-side .buttons-line{width:100%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600}@media only screen and (max-width: 75em){.main-card .text-side .section-title{width:85%}}.main-card .illustration-side{margin:auto;width:40%;display:grid;justify-items:center}.main-card .illustration-side .side-img{width:30%}\n"], dependencies: [{ kind: "directive", type: 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: i4.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", "withoutTitleCase", "descriptionWidth"] }] });
|
|
875
877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CtaSectionStyleThreeComponent, decorators: [{
|
|
876
878
|
type: Component,
|
|
877
|
-
args: [{ selector: 'cta-section-style-three', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\"\r\n alt=\"bg-img\">\r\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && !sectionContent.titleImageOrder\">\r\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n </div>\r\n <div class=\"text-side\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && sectionContent.titleImageOrder\">\r\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\"\r\n (click)=\"onClickCtaButton(button.route)\"\r\n [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:
|
|
879
|
+
args: [{ selector: 'cta-section-style-three', template: "<div class=\"main-card\" [ngStyle]=\"{'background' : sectionContent.bgColor}\">\r\n <img *ngIf=\"!sectionContent.bgColor && sectionContent.bgImage \" [src]=\"sectionContent.bgImage\" class=\"bg-img\"\r\n alt=\"bg-img\">\r\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && !sectionContent.titleImageOrder\">\r\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n </div>\r\n <div class=\"text-side\">\r\n <div class=\"section-title\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div class=\"illustration-side\" *ngIf=\"sectionContent.sideImage && sectionContent.titleImageOrder\">\r\n <img [src]=\"sectionContent.sideImage\" class=\"side-img\" alt=\"side-img\">\r\n </div>\r\n <div class=\"buttons-line\">\r\n <button mat-raised-button *ngFor=\"let button of sectionContent.buttons\"\r\n (click)=\"onClickCtaButton(button.route)\"\r\n [ngStyle]=\"{'background':button.bgColor, 'color': button.textColor}\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n</div>", styles: [".main-card{position:relative;width:100%;display:flex;flex-direction:column;row-gap:2rem;column-gap:2%;justify-content:center;padding:2rem 0;border-radius:1.5rem}.main-card .bg-img{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;object-fit:cover;border-radius:1.5rem}.main-card .text-side{display:flex;flex-direction:column;row-gap:2rem;width:100%;justify-items:center}.main-card .text-side .section-title{width:60%;margin:auto}.main-card .text-side .buttons-line{width:100%;display:flex;flex-direction:row;column-gap:2%;justify-content:center}.main-card .text-side .buttons-line button{font-family:inherit;font-weight:600}@media only screen and (max-width: 75em){.main-card .text-side .section-title{width:85%}}.main-card .illustration-side{margin:auto;width:40%;display:grid;justify-items:center}.main-card .illustration-side .side-img{width:30%}\n"] }]
|
|
878
880
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { sectionContent: [{
|
|
879
881
|
type: Input
|
|
880
882
|
}] } });
|
|
@@ -916,7 +918,7 @@ class HeaderSectionOneComponent {
|
|
|
916
918
|
}
|
|
917
919
|
}
|
|
918
920
|
HeaderSectionOneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
919
|
-
HeaderSectionOneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HeaderSectionOneComponent, selector: "header-section-one", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\r\n <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\r\n <div class=\"section-content\">\r\n <div class=\"header-content-container\">\r\n <div class=\"title-desc\">\r\n <div class=\"title-part\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\r\n <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\r\n <button mat-raised-button (click)=\"onClickButton(button.route)\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\r\n <img [src]=\"sectionContent.previewImage\">\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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: i4.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", "withoutTitleCase"] }] });
|
|
921
|
+
HeaderSectionOneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HeaderSectionOneComponent, selector: "header-section-one", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\r\n <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\r\n <div class=\"section-content\">\r\n <div class=\"header-content-container\">\r\n <div class=\"title-desc\">\r\n <div class=\"title-part\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\r\n <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\r\n <button mat-raised-button (click)=\"onClickButton(button.route)\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\r\n <img [src]=\"sectionContent.previewImage\">\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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: i4.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", "withoutTitleCase", "descriptionWidth"] }] });
|
|
920
922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HeaderSectionOneComponent, decorators: [{
|
|
921
923
|
type: Component,
|
|
922
924
|
args: [{ selector: 'header-section-one', template: "<div class=\"detail-head-block\" [ngClass]=\"{'title-image-sort':sectionContent.titleImageSort , 'image-title-sort':!sectionContent.titleImageSort, 'image-background':sectionContent.backgroundImage != null }\" [ngStyle]=\"{'background-color': !sectionContent.backgroundImage ? sectionContent.backgroundColor :null }\">\r\n <img class=\"bg-image\" [src]=\"sectionContent.backgroundImage\" alt=\"\" *ngIf=\"sectionContent.backgroundImage\">\r\n <div class=\"section-content\">\r\n <div class=\"header-content-container\">\r\n <div class=\"title-desc\">\r\n <div class=\"title-part\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\"></section-title>\r\n </div>\r\n <div *ngIf=\"sectionContent.actions\" class=\"main-buttons align-left-items\">\r\n <div class=\"button\" *ngFor=\"let button of sectionContent.actions ,let i = index\">\r\n <button mat-raised-button (click)=\"onClickButton(button.route)\">\r\n {{button.label}}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"img-head\" *ngIf=\"sectionContent.previewImage\">\r\n <img [src]=\"sectionContent.previewImage\">\r\n </div>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}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"] }]
|
|
@@ -950,10 +952,10 @@ class ValuePropCardComponent {
|
|
|
950
952
|
}
|
|
951
953
|
}
|
|
952
954
|
ValuePropCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
953
|
-
ValuePropCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropCardComponent, selector: "value-prop-card", inputs: { ValuePropContent: "ValuePropContent" }, ngImport: i0, template: "<div class=\"reason-block\">\r\n <div class=\"reason-headline\">\r\n <div class=\"reason-icon\" *ngIf=\"icon\">\r\n <fa-icon [icon]=\"icon\"></fa-icon>\r\n </div>\r\n <div class=\"reason-image\" *ngIf=\"!icon\">\r\n <img [src]=\"ValuePropContent.image\" alt=\"\">\r\n </div>\r\n <div class=\"reason-title\">\r\n {{ValuePropContent.title}}\r\n </div>\r\n </div>\r\n <div class=\"reason-desc\">\r\n {{ValuePropContent.description}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.reason-block{border-radius:2rem;padding:.5rem
|
|
955
|
+
ValuePropCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropCardComponent, selector: "value-prop-card", inputs: { ValuePropContent: "ValuePropContent" }, ngImport: i0, template: "<div class=\"reason-block\">\r\n <div class=\"reason-headline\">\r\n <div class=\"reason-icon\" *ngIf=\"icon\">\r\n <fa-icon [icon]=\"icon\"></fa-icon>\r\n </div>\r\n <div class=\"reason-image\" *ngIf=\"!icon\">\r\n <img [src]=\"ValuePropContent.image\" alt=\"\">\r\n </div>\r\n <div class=\"reason-title\">\r\n {{ValuePropContent.title}}\r\n </div>\r\n </div>\r\n <div class=\"reason-desc\">\r\n {{ValuePropContent.description}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.reason-block{border-radius:2rem;padding:.5rem 2rem 2rem;background-color:#fff;color:#32353b;font-weight:400;font-size:1.6rem;margin:1rem 1rem 2rem;display:inline-block;height:95%;box-shadow:.2rem .2rem .4rem #00000040}.reason-block .reason-headline{display:flex;flex-direction:row;column-gap:2rem;padding:1.5rem 0rem;align-items:center}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{width:4rem;aspect-ratio:3/2;object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit}.reason-block .reason-desc{font-weight:300}@media only screen and (max-width: 37.5em){.reason-block{height:93%;width:95%}}\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"] }] });
|
|
954
956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropCardComponent, decorators: [{
|
|
955
957
|
type: Component,
|
|
956
|
-
args: [{ selector: 'value-prop-card', template: "<div class=\"reason-block\">\r\n <div class=\"reason-headline\">\r\n <div class=\"reason-icon\" *ngIf=\"icon\">\r\n <fa-icon [icon]=\"icon\"></fa-icon>\r\n </div>\r\n <div class=\"reason-image\" *ngIf=\"!icon\">\r\n <img [src]=\"ValuePropContent.image\" alt=\"\">\r\n </div>\r\n <div class=\"reason-title\">\r\n {{ValuePropContent.title}}\r\n </div>\r\n </div>\r\n <div class=\"reason-desc\">\r\n {{ValuePropContent.description}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.reason-block{border-radius:2rem;padding:.5rem
|
|
958
|
+
args: [{ selector: 'value-prop-card', template: "<div class=\"reason-block\">\r\n <div class=\"reason-headline\">\r\n <div class=\"reason-icon\" *ngIf=\"icon\">\r\n <fa-icon [icon]=\"icon\"></fa-icon>\r\n </div>\r\n <div class=\"reason-image\" *ngIf=\"!icon\">\r\n <img [src]=\"ValuePropContent.image\" alt=\"\">\r\n </div>\r\n <div class=\"reason-title\">\r\n {{ValuePropContent.title}}\r\n </div>\r\n </div>\r\n <div class=\"reason-desc\">\r\n {{ValuePropContent.description}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.reason-block{border-radius:2rem;padding:.5rem 2rem 2rem;background-color:#fff;color:#32353b;font-weight:400;font-size:1.6rem;margin:1rem 1rem 2rem;display:inline-block;height:95%;box-shadow:.2rem .2rem .4rem #00000040}.reason-block .reason-headline{display:flex;flex-direction:row;column-gap:2rem;padding:1.5rem 0rem;align-items:center}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{width:4rem;aspect-ratio:3/2;object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit}.reason-block .reason-desc{font-weight:300}@media only screen and (max-width: 37.5em){.reason-block{height:93%;width:95%}}\n"] }]
|
|
957
959
|
}], propDecorators: { ValuePropContent: [{
|
|
958
960
|
type: Input
|
|
959
961
|
}] } });
|