@jooler/jooler-websites-shared 0.0.74 → 0.0.76
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/page-section-style-ten/page-section-style-ten.component.mjs +2 -2
- package/esm2020/lib/section-title/section-title.component.mjs +3 -3
- package/esm2020/lib/value-props-sections/value-props-sections.component.mjs +3 -3
- package/fesm2015/jooler-websites-shared.mjs +6 -6
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +6 -6
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -17,10 +17,10 @@ export class PageSectionStyleTenComponent {
|
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
19
|
PageSectionStyleTenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
20
|
-
PageSectionStyleTenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleTenComponent, selector: "page-section-style-ten", inputs: { data: "data", iconName: "iconName", selectedPanel: "selectedPanel" }, outputs: { panelChanged: "panelChanged" }, ngImport: i0, template: "<mat-accordion class=\"mat-mdc-form-field\">\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\" *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n <mat-expansion-panel-header>\n <div class=\"panel-headline\">\n <mat-panel-title>\n <fa-icon [icon]=\"iconName\">\n </fa-icon>\n {{item.question}}\n </mat-panel-title>\n </div>\n </mat-expansion-panel-header>\n \n <div class=\"panel-content\">\n <ul>\n <li>\n {{item.answer}}\n </li>\n </ul>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: ["
|
|
20
|
+
PageSectionStyleTenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleTenComponent, selector: "page-section-style-ten", inputs: { data: "data", iconName: "iconName", selectedPanel: "selectedPanel" }, outputs: { panelChanged: "panelChanged" }, ngImport: i0, template: "<mat-accordion class=\"mat-mdc-form-field\">\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\" *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n <mat-expansion-panel-header>\n <div class=\"panel-headline\">\n <mat-panel-title>\n <fa-icon [icon]=\"iconName\">\n </fa-icon>\n {{item.question}}\n </mat-panel-title>\n </div>\n </mat-expansion-panel-header>\n \n <div class=\"panel-content\">\n <ul>\n <li>\n {{item.answer}}\n </li>\n </ul>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".mat-mdc-form-field{display:grid;row-gap:1rem}.mat-mdc-form-field mat-expansion-panel{background:#FAFAFA}@media only screen and (max-width: 37.5em){.mat-mdc-form-field mat-expansion-panel{margin:0rem 1rem}}.mat-mdc-form-field mat-expansion-panel fa-icon{font-size:.7rem;margin-right:1rem}.mat-mdc-form-field mat-expansion-panel mat-expansion-panel-header{height:100%;min-height:7rem;font-size:1.7rem;font-weight:600}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
21
21
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, decorators: [{
|
|
22
22
|
type: Component,
|
|
23
|
-
args: [{ selector: 'page-section-style-ten', template: "<mat-accordion class=\"mat-mdc-form-field\">\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\" *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n <mat-expansion-panel-header>\n <div class=\"panel-headline\">\n <mat-panel-title>\n <fa-icon [icon]=\"iconName\">\n </fa-icon>\n {{item.question}}\n </mat-panel-title>\n </div>\n </mat-expansion-panel-header>\n \n <div class=\"panel-content\">\n <ul>\n <li>\n {{item.answer}}\n </li>\n </ul>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: ["
|
|
23
|
+
args: [{ selector: 'page-section-style-ten', template: "<mat-accordion class=\"mat-mdc-form-field\">\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\" *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n <mat-expansion-panel-header>\n <div class=\"panel-headline\">\n <mat-panel-title>\n <fa-icon [icon]=\"iconName\">\n </fa-icon>\n {{item.question}}\n </mat-panel-title>\n </div>\n </mat-expansion-panel-header>\n \n <div class=\"panel-content\">\n <ul>\n <li>\n {{item.answer}}\n </li>\n </ul>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".mat-mdc-form-field{display:grid;row-gap:1rem}.mat-mdc-form-field mat-expansion-panel{background:#FAFAFA}@media only screen and (max-width: 37.5em){.mat-mdc-form-field mat-expansion-panel{margin:0rem 1rem}}.mat-mdc-form-field mat-expansion-panel fa-icon{font-size:.7rem;margin-right:1rem}.mat-mdc-form-field mat-expansion-panel mat-expansion-panel-header{height:100%;min-height:7rem;font-size:1.7rem;font-weight:600}\n"] }]
|
|
24
24
|
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
25
25
|
type: Input
|
|
26
26
|
}], iconName: [{
|
|
@@ -7,10 +7,10 @@ export class SectionTitleComponent {
|
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
SectionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10
|
-
SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SectionTitleComponent, selector: "section-title", inputs: { title: "title", subtitle: "subtitle", alignLeft: "alignLeft", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"section-container\"\n [ngClass]=\"{'align-left':alignLeft,'align-center':!alignLeft,'dark-background':isDarkBg ,'light-background':!isDarkBg}\">\n <div class=\"title\">{{title}}</div>\n
|
|
10
|
+
SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SectionTitleComponent, selector: "section-title", inputs: { title: "title", subtitle: "subtitle", alignLeft: "alignLeft", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"section-container\"\n [ngClass]=\"{'align-left':alignLeft,'align-center':!alignLeft,'dark-background':isDarkBg ,'light-background':!isDarkBg}\">\n <div class=\"title-container\">\n <div class=\"title\">{{title}}</div>\n <div class=\"divider\">\n </div>\n </div>\n <div class=\"description\">\n {{subtitle}}\n </div>\n</div>", styles: [".section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.5rem auto}.align-center .description{margin:auto;width:70%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:650;font-size:3.2rem;width:auto;margin:auto}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-image:linear-gradient(to right,#fff 0%,#155ED4 70%)}.dark-background .title,.dark-background .description{color:#fff}.light-background .divider{background-image:linear-gradient(to right,#155ED4 0%,#313338 70%)}.description{width:80%;font-weight:500;font-size:1.6rem}.align-left .title{margin:0}.align-left .divider{margin:.5rem 0;width:auto}.align-left .description{width:90%;margin:0}.align-left .title-container{margin:0}@media only screen and (max-width: 37.5em){.align-left .title,.align-center .title{font-size:2.6rem}.align-left .description,.align-center .description{width:85%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
11
11
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, decorators: [{
|
|
12
12
|
type: Component,
|
|
13
|
-
args: [{ selector: 'section-title', template: "<div class=\"section-container\"\n [ngClass]=\"{'align-left':alignLeft,'align-center':!alignLeft,'dark-background':isDarkBg ,'light-background':!isDarkBg}\">\n <div class=\"title\">{{title}}</div>\n
|
|
13
|
+
args: [{ selector: 'section-title', template: "<div class=\"section-container\"\n [ngClass]=\"{'align-left':alignLeft,'align-center':!alignLeft,'dark-background':isDarkBg ,'light-background':!isDarkBg}\">\n <div class=\"title-container\">\n <div class=\"title\">{{title}}</div>\n <div class=\"divider\">\n </div>\n </div>\n <div class=\"description\">\n {{subtitle}}\n </div>\n</div>", styles: [".section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.5rem auto}.align-center .description{margin:auto;width:70%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:650;font-size:3.2rem;width:auto;margin:auto}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-image:linear-gradient(to right,#fff 0%,#155ED4 70%)}.dark-background .title,.dark-background .description{color:#fff}.light-background .divider{background-image:linear-gradient(to right,#155ED4 0%,#313338 70%)}.description{width:80%;font-weight:500;font-size:1.6rem}.align-left .title{margin:0}.align-left .divider{margin:.5rem 0;width:auto}.align-left .description{width:90%;margin:0}.align-left .title-container{margin:0}@media only screen and (max-width: 37.5em){.align-left .title,.align-center .title{font-size:2.6rem}.align-left .description,.align-center .description{width:85%}}\n"] }]
|
|
14
14
|
}], propDecorators: { title: [{
|
|
15
15
|
type: Input
|
|
16
16
|
}], subtitle: [{
|
|
@@ -20,4 +20,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
20
20
|
}], isDarkBg: [{
|
|
21
21
|
type: Input
|
|
22
22
|
}] } });
|
|
23
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
23
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VjdGlvbi10aXRsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9qb29sZXItd2Vic2l0ZXMtc2hhcmVkL3NyYy9saWIvc2VjdGlvbi10aXRsZS9zZWN0aW9uLXRpdGxlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9zZWN0aW9uLXRpdGxlL3NlY3Rpb24tdGl0bGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQU9qRCxNQUFNLE9BQU8scUJBQXFCO0lBTGxDO1FBU1csYUFBUSxHQUFZLEtBQUssQ0FBQztLQUNwQzs7a0hBTFkscUJBQXFCO3NHQUFyQixxQkFBcUIscUpDUGxDLDZYQVVNOzJGREhPLHFCQUFxQjtrQkFMakMsU0FBUzsrQkFDRSxlQUFlOzhCQUtoQixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NlY3Rpb24tdGl0bGUnLFxuICB0ZW1wbGF0ZVVybDogJy4vc2VjdGlvbi10aXRsZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NlY3Rpb24tdGl0bGUuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBTZWN0aW9uVGl0bGVDb21wb25lbnQge1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBzdWJ0aXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBhbGlnbkxlZnQ6IGJvb2xlYW47XG4gIEBJbnB1dCgpIGlzRGFya0JnOiBib29sZWFuID0gZmFsc2U7XG59XG4iLCI8ZGl2IGNsYXNzPVwic2VjdGlvbi1jb250YWluZXJcIlxuICAgIFtuZ0NsYXNzXT1cInsnYWxpZ24tbGVmdCc6YWxpZ25MZWZ0LCdhbGlnbi1jZW50ZXInOiFhbGlnbkxlZnQsJ2RhcmstYmFja2dyb3VuZCc6aXNEYXJrQmcgLCdsaWdodC1iYWNrZ3JvdW5kJzohaXNEYXJrQmd9XCI+XG4gICAgPGRpdiBjbGFzcz1cInRpdGxlLWNvbnRhaW5lclwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwidGl0bGVcIj57e3RpdGxlfX08L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImRpdmlkZXJcIj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImRlc2NyaXB0aW9uXCI+XG4gICAgICAgIHt7c3VidGl0bGV9fVxuICAgIDwvZGl2PlxuPC9kaXY+Il19
|
|
@@ -27,11 +27,11 @@ export class ValuePropsSectionsComponent {
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
ValuePropsSectionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
-
ValuePropsSectionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropsSectionsComponent, selector: "value-props-sections", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" *ngFor=\"let valueprop of sectionContent; let i = index\">\n <div class=\"text-side\">\n <section-title [title]=\"valueprop.title\" [subtitle]=\"valueprop.subtitle\" [alignLeft]=\"true\">\n </section-title>\n <div class=\"value-prop-image\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n <p *ngFor=\"let paragraph of valueprop.paragraphs; let j = index\" class=\"paragraph\"\n
|
|
30
|
+
ValuePropsSectionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropsSectionsComponent, selector: "value-props-sections", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" *ngFor=\"let valueprop of sectionContent; let i = index\">\n <div class=\"text-side\">\n <section-title [title]=\"valueprop.title\" [subtitle]=\"valueprop.subtitle\" [alignLeft]=\"true\">\n </section-title>\n <div class=\"value-prop-image\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n <div class=\"paragraph-items\">\n\n <p *ngFor=\"let paragraph of valueprop.paragraphs; let j = index\" class=\"paragraph\"\n (click)=\"onChangeImage(paragraph.imagePath , i ,j)\"\n [ngClass]=\"{'selected-paragraph':paragraph.isClicked}\">\n <span class=\"value-prop-icon\">\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\n <span>\n {{paragraph.text}}\n </span>\n </p>\n </div>\n </div>\n <div class=\"image-buttons-side\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n</div>", styles: [".value-prop{display:flex;flex-direction:row-reverse;flex-wrap:nowrap;column-gap:2%;margin:2rem auto;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:60%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{column-count:2}.value-prop .text-side .paragraph{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:5rem auto auto;margin:1rem 0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:100%}.value-prop .text-side .paragraph:hover .cta-icon{color:#fff;background-color:#155ed4}.value-prop .text-side .paragraph .cta-icon-container{display:grid;align-items:center}.value-prop .text-side .paragraph .cta-icon{align-self:center;justify-content:center;display:grid;font-size:3rem;transform:rotate(-45deg);color:#155ed4;background-color:#fff;border-radius:.7rem;padding:1rem;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#155ed4}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph:hover .cta-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:38%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .text-side .paragraph{padding:1rem;border-radius:.7rem;border:.1rem solid #E3E3E3}.value-prop:nth-child(even) .text-side .paragraph .value-prop-icon{text-align:center}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{width:100%;justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.SectionTitleComponent, selector: "section-title", inputs: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
|
|
31
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionsComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
|
-
args: [{ selector: 'value-props-sections', template: "<div class=\"value-prop\" *ngFor=\"let valueprop of sectionContent; let i = index\">\n <div class=\"text-side\">\n <section-title [title]=\"valueprop.title\" [subtitle]=\"valueprop.subtitle\" [alignLeft]=\"true\">\n </section-title>\n <div class=\"value-prop-image\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n <p *ngFor=\"let paragraph of valueprop.paragraphs; let j = index\" class=\"paragraph\"\n
|
|
33
|
+
args: [{ selector: 'value-props-sections', template: "<div class=\"value-prop\" *ngFor=\"let valueprop of sectionContent; let i = index\">\n <div class=\"text-side\">\n <section-title [title]=\"valueprop.title\" [subtitle]=\"valueprop.subtitle\" [alignLeft]=\"true\">\n </section-title>\n <div class=\"value-prop-image\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n <div class=\"paragraph-items\">\n\n <p *ngFor=\"let paragraph of valueprop.paragraphs; let j = index\" class=\"paragraph\"\n (click)=\"onChangeImage(paragraph.imagePath , i ,j)\"\n [ngClass]=\"{'selected-paragraph':paragraph.isClicked}\">\n <span class=\"value-prop-icon\">\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\n <span>\n {{paragraph.text}}\n </span>\n </p>\n </div>\n </div>\n <div class=\"image-buttons-side\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n</div>", styles: [".value-prop{display:flex;flex-direction:row-reverse;flex-wrap:nowrap;column-gap:2%;margin:2rem auto;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:60%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{column-count:2}.value-prop .text-side .paragraph{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:5rem auto auto;margin:1rem 0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:100%}.value-prop .text-side .paragraph:hover .cta-icon{color:#fff;background-color:#155ed4}.value-prop .text-side .paragraph .cta-icon-container{display:grid;align-items:center}.value-prop .text-side .paragraph .cta-icon{align-self:center;justify-content:center;display:grid;font-size:3rem;transform:rotate(-45deg);color:#155ed4;background-color:#fff;border-radius:.7rem;padding:1rem;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#155ed4}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph:hover .cta-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:38%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .text-side .paragraph{padding:1rem;border-radius:.7rem;border:.1rem solid #E3E3E3}.value-prop:nth-child(even) .text-side .paragraph .value-prop-icon{text-align:center}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{width:100%;justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}\n"] }]
|
|
34
34
|
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
35
35
|
type: Input
|
|
36
36
|
}] } });
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUtcHJvcHMtc2VjdGlvbnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvam9vbGVyLXdlYnNpdGVzLXNoYXJlZC9zcmMvbGliL3ZhbHVlLXByb3BzLXNlY3Rpb25zL3ZhbHVlLXByb3BzLXNlY3Rpb25zLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92YWx1ZS1wcm9wcy1zZWN0aW9ucy92YWx1ZS1wcm9wcy1zZWN0aW9ucy5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFPekQsTUFBTSxPQUFPLDJCQUEyQjtJQUl0QztRQUZBLGtCQUFhLEdBQVUsRUFBRSxDQUFDO0lBRVYsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsS0FBSyxJQUFJLElBQUksSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3BDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7WUFDckQsQ0FBQyxFQUFFLENBQUM7WUFDSixLQUFLLElBQUksU0FBUyxJQUFJLElBQUksQ0FBQyxVQUFVLEVBQUU7Z0JBQ3JDLFNBQVMsQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO2FBQzdCO1lBQ0QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO1NBQ3JDO0lBQ0gsQ0FBQztJQUVELGFBQWEsQ0FBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLGNBQWM7UUFDbkQsS0FBSyxJQUFJLFNBQVMsSUFBSSxJQUFJLENBQUMsY0FBYyxDQUFDLFlBQVksQ0FBQyxDQUFDLFVBQVUsRUFBRTtZQUNsRSxTQUFTLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztTQUM3QjtRQUNELElBQUksQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLEdBQUcsU0FBUyxDQUFDO1FBQzdDLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxDQUFDLENBQUMsVUFBVSxDQUFDLGNBQWMsQ0FBQyxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7SUFDaEYsQ0FBQzs7d0hBeEJVLDJCQUEyQjs0R0FBM0IsMkJBQTJCLDBHQ1B4QyxtZ0NBdUJNOzJGRGhCTywyQkFBMkI7a0JBTHZDLFNBQVM7K0JBQ0Usc0JBQXNCOzBFQUt2QixjQUFjO3NCQUF0QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3ZhbHVlLXByb3BzLXNlY3Rpb25zJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3ZhbHVlLXByb3BzLXNlY3Rpb25zLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdmFsdWUtcHJvcHMtc2VjdGlvbnMuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBWYWx1ZVByb3BzU2VjdGlvbnNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBzZWN0aW9uQ29udGVudDogYW55O1xuICBzZWxlY3RlZEltYWdlOiBhbnlbXSA9IFtdO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgbGV0IGkgPSAwO1xuICAgIGZvciAobGV0IGl0ZW0gb2YgdGhpcy5zZWN0aW9uQ29udGVudCkge1xuICAgICAgdGhpcy5zZWxlY3RlZEltYWdlW2ldID0gaXRlbS5wYXJhZ3JhcGhzWzBdLmltYWdlUGF0aDtcbiAgICAgIGkrKztcbiAgICAgIGZvciAobGV0IHBhcmFncmFwaCBvZiBpdGVtLnBhcmFncmFwaHMpIHtcbiAgICAgICAgcGFyYWdyYXBoLmlzQ2xpY2tlZCA9IGZhbHNlO1xuICAgICAgfVxuICAgICAgaXRlbS5wYXJhZ3JhcGhzWzBdLmlzQ2xpY2tlZCA9IHRydWU7XG4gICAgfVxuICB9XG5cbiAgb25DaGFuZ2VJbWFnZShpbWFnZVBhdGgsIHNlY3Rpb25JbmRleCwgcGFyYWdyYXBoSW5kZXgpIHtcbiAgICBmb3IgKGxldCBwYXJhZ3JhcGggb2YgdGhpcy5zZWN0aW9uQ29udGVudFtzZWN0aW9uSW5kZXhdLnBhcmFncmFwaHMpIHtcbiAgICAgIHBhcmFncmFwaC5pc0NsaWNrZWQgPSBmYWxzZTtcbiAgICB9XG4gICAgdGhpcy5zZWxlY3RlZEltYWdlW3NlY3Rpb25JbmRleF0gPSBpbWFnZVBhdGg7XG4gICAgdGhpcy5zZWN0aW9uQ29udGVudFtzZWN0aW9uSW5kZXhdLnBhcmFncmFwaHNbcGFyYWdyYXBoSW5kZXhdLmlzQ2xpY2tlZCA9IHRydWU7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJ2YWx1ZS1wcm9wXCIgKm5nRm9yPVwibGV0IHZhbHVlcHJvcCBvZiBzZWN0aW9uQ29udGVudDsgbGV0IGkgPSBpbmRleFwiPlxuICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LXNpZGVcIj5cbiAgICAgICAgPHNlY3Rpb24tdGl0bGUgW3RpdGxlXT1cInZhbHVlcHJvcC50aXRsZVwiIFtzdWJ0aXRsZV09XCJ2YWx1ZXByb3Auc3VidGl0bGVcIiBbYWxpZ25MZWZ0XT1cInRydWVcIj5cbiAgICAgICAgPC9zZWN0aW9uLXRpdGxlPlxuICAgICAgICA8ZGl2IGNsYXNzPVwidmFsdWUtcHJvcC1pbWFnZVwiPlxuICAgICAgICAgICAgPGltZyBbc3JjXT1cInNlbGVjdGVkSW1hZ2VbaV1cIiBhbHQ9XCJcIj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJwYXJhZ3JhcGgtaXRlbXNcIj5cblxuICAgICAgICAgICAgPHAgKm5nRm9yPVwibGV0IHBhcmFncmFwaCBvZiB2YWx1ZXByb3AucGFyYWdyYXBoczsgbGV0IGogPSBpbmRleFwiIGNsYXNzPVwicGFyYWdyYXBoXCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DaGFuZ2VJbWFnZShwYXJhZ3JhcGguaW1hZ2VQYXRoICwgaSAsailcIlxuICAgICAgICAgICAgICAgIFtuZ0NsYXNzXT1cInsnc2VsZWN0ZWQtcGFyYWdyYXBoJzpwYXJhZ3JhcGguaXNDbGlja2VkfVwiPlxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidmFsdWUtcHJvcC1pY29uXCI+XG4gICAgICAgICAgICAgICAgICAgIDxmYS1pY29uIFtpY29uXT1cInBhcmFncmFwaC5pY29uTmFtZVwiPjwvZmEtaWNvbj48L3NwYW4+XG4gICAgICAgICAgICAgICAgPHNwYW4+XG4gICAgICAgICAgICAgICAgICAgIHt7cGFyYWdyYXBoLnRleHR9fVxuICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIDwvcD5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImltYWdlLWJ1dHRvbnMtc2lkZVwiPlxuICAgICAgICA8aW1nIFtzcmNdPVwic2VsZWN0ZWRJbWFnZVtpXVwiIGFsdD1cIlwiPlxuICAgIDwvZGl2PlxuPC9kaXY+Il19
|
|
@@ -31,10 +31,10 @@ class SectionTitleComponent {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
SectionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
-
SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SectionTitleComponent, selector: "section-title", inputs: { title: "title", subtitle: "subtitle", alignLeft: "alignLeft", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"section-container\"\n [ngClass]=\"{'align-left':alignLeft,'align-center':!alignLeft,'dark-background':isDarkBg ,'light-background':!isDarkBg}\">\n <div class=\"title\">{{title}}</div>\n
|
|
34
|
+
SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SectionTitleComponent, selector: "section-title", inputs: { title: "title", subtitle: "subtitle", alignLeft: "alignLeft", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"section-container\"\n [ngClass]=\"{'align-left':alignLeft,'align-center':!alignLeft,'dark-background':isDarkBg ,'light-background':!isDarkBg}\">\n <div class=\"title-container\">\n <div class=\"title\">{{title}}</div>\n <div class=\"divider\">\n </div>\n </div>\n <div class=\"description\">\n {{subtitle}}\n </div>\n</div>", styles: [".section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.5rem auto}.align-center .description{margin:auto;width:70%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:650;font-size:3.2rem;width:auto;margin:auto}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-image:linear-gradient(to right,#fff 0%,#155ED4 70%)}.dark-background .title,.dark-background .description{color:#fff}.light-background .divider{background-image:linear-gradient(to right,#155ED4 0%,#313338 70%)}.description{width:80%;font-weight:500;font-size:1.6rem}.align-left .title{margin:0}.align-left .divider{margin:.5rem 0;width:auto}.align-left .description{width:90%;margin:0}.align-left .title-container{margin:0}@media only screen and (max-width: 37.5em){.align-left .title,.align-center .title{font-size:2.6rem}.align-left .description,.align-center .description{width:85%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
35
35
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SectionTitleComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
|
-
args: [{ selector: 'section-title', template: "<div class=\"section-container\"\n [ngClass]=\"{'align-left':alignLeft,'align-center':!alignLeft,'dark-background':isDarkBg ,'light-background':!isDarkBg}\">\n <div class=\"title\">{{title}}</div>\n
|
|
37
|
+
args: [{ selector: 'section-title', template: "<div class=\"section-container\"\n [ngClass]=\"{'align-left':alignLeft,'align-center':!alignLeft,'dark-background':isDarkBg ,'light-background':!isDarkBg}\">\n <div class=\"title-container\">\n <div class=\"title\">{{title}}</div>\n <div class=\"divider\">\n </div>\n </div>\n <div class=\"description\">\n {{subtitle}}\n </div>\n</div>", styles: [".section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.5rem auto}.align-center .description{margin:auto;width:70%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:650;font-size:3.2rem;width:auto;margin:auto}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-image:linear-gradient(to right,#fff 0%,#155ED4 70%)}.dark-background .title,.dark-background .description{color:#fff}.light-background .divider{background-image:linear-gradient(to right,#155ED4 0%,#313338 70%)}.description{width:80%;font-weight:500;font-size:1.6rem}.align-left .title{margin:0}.align-left .divider{margin:.5rem 0;width:auto}.align-left .description{width:90%;margin:0}.align-left .title-container{margin:0}@media only screen and (max-width: 37.5em){.align-left .title,.align-center .title{font-size:2.6rem}.align-left .description,.align-center .description{width:85%}}\n"] }]
|
|
38
38
|
}], propDecorators: { title: [{
|
|
39
39
|
type: Input
|
|
40
40
|
}], subtitle: [{
|
|
@@ -59,10 +59,10 @@ class PageSectionStyleTenComponent {
|
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
PageSectionStyleTenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
-
PageSectionStyleTenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleTenComponent, selector: "page-section-style-ten", inputs: { data: "data", iconName: "iconName", selectedPanel: "selectedPanel" }, outputs: { panelChanged: "panelChanged" }, ngImport: i0, template: "<mat-accordion class=\"mat-mdc-form-field\">\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\" *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n <mat-expansion-panel-header>\n <div class=\"panel-headline\">\n <mat-panel-title>\n <fa-icon [icon]=\"iconName\">\n </fa-icon>\n {{item.question}}\n </mat-panel-title>\n </div>\n </mat-expansion-panel-header>\n \n <div class=\"panel-content\">\n <ul>\n <li>\n {{item.answer}}\n </li>\n </ul>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: ["
|
|
62
|
+
PageSectionStyleTenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleTenComponent, selector: "page-section-style-ten", inputs: { data: "data", iconName: "iconName", selectedPanel: "selectedPanel" }, outputs: { panelChanged: "panelChanged" }, ngImport: i0, template: "<mat-accordion class=\"mat-mdc-form-field\">\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\" *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n <mat-expansion-panel-header>\n <div class=\"panel-headline\">\n <mat-panel-title>\n <fa-icon [icon]=\"iconName\">\n </fa-icon>\n {{item.question}}\n </mat-panel-title>\n </div>\n </mat-expansion-panel-header>\n \n <div class=\"panel-content\">\n <ul>\n <li>\n {{item.answer}}\n </li>\n </ul>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".mat-mdc-form-field{display:grid;row-gap:1rem}.mat-mdc-form-field mat-expansion-panel{background:#FAFAFA}@media only screen and (max-width: 37.5em){.mat-mdc-form-field mat-expansion-panel{margin:0rem 1rem}}.mat-mdc-form-field mat-expansion-panel fa-icon{font-size:.7rem;margin-right:1rem}.mat-mdc-form-field mat-expansion-panel mat-expansion-panel-header{height:100%;min-height:7rem;font-size:1.7rem;font-weight:600}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
63
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleTenComponent, decorators: [{
|
|
64
64
|
type: Component,
|
|
65
|
-
args: [{ selector: 'page-section-style-ten', template: "<mat-accordion class=\"mat-mdc-form-field\">\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\" *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n <mat-expansion-panel-header>\n <div class=\"panel-headline\">\n <mat-panel-title>\n <fa-icon [icon]=\"iconName\">\n </fa-icon>\n {{item.question}}\n </mat-panel-title>\n </div>\n </mat-expansion-panel-header>\n \n <div class=\"panel-content\">\n <ul>\n <li>\n {{item.answer}}\n </li>\n </ul>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: ["
|
|
65
|
+
args: [{ selector: 'page-section-style-ten', template: "<mat-accordion class=\"mat-mdc-form-field\">\n <mat-expansion-panel (opened)=\"panelOpenState = true\" (closed)=\"panelOpenState = false\" *ngFor=\"let item of data; let i = index\" (click)=\"onClickPanel(i)\">\n <mat-expansion-panel-header>\n <div class=\"panel-headline\">\n <mat-panel-title>\n <fa-icon [icon]=\"iconName\">\n </fa-icon>\n {{item.question}}\n </mat-panel-title>\n </div>\n </mat-expansion-panel-header>\n \n <div class=\"panel-content\">\n <ul>\n <li>\n {{item.answer}}\n </li>\n </ul>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".mat-mdc-form-field{display:grid;row-gap:1rem}.mat-mdc-form-field mat-expansion-panel{background:#FAFAFA}@media only screen and (max-width: 37.5em){.mat-mdc-form-field mat-expansion-panel{margin:0rem 1rem}}.mat-mdc-form-field mat-expansion-panel fa-icon{font-size:.7rem;margin-right:1rem}.mat-mdc-form-field mat-expansion-panel mat-expansion-panel-header{height:100%;min-height:7rem;font-size:1.7rem;font-weight:600}\n"] }]
|
|
66
66
|
}], ctorParameters: function () { return []; }, propDecorators: { data: [{
|
|
67
67
|
type: Input
|
|
68
68
|
}], iconName: [{
|
|
@@ -529,10 +529,10 @@ class ValuePropsSectionsComponent {
|
|
|
529
529
|
}
|
|
530
530
|
}
|
|
531
531
|
ValuePropsSectionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
532
|
-
ValuePropsSectionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropsSectionsComponent, selector: "value-props-sections", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" *ngFor=\"let valueprop of sectionContent; let i = index\">\n <div class=\"text-side\">\n <section-title [title]=\"valueprop.title\" [subtitle]=\"valueprop.subtitle\" [alignLeft]=\"true\">\n </section-title>\n <div class=\"value-prop-image\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n <p *ngFor=\"let paragraph of valueprop.paragraphs; let j = index\" class=\"paragraph\"\n
|
|
532
|
+
ValuePropsSectionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValuePropsSectionsComponent, selector: "value-props-sections", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" *ngFor=\"let valueprop of sectionContent; let i = index\">\n <div class=\"text-side\">\n <section-title [title]=\"valueprop.title\" [subtitle]=\"valueprop.subtitle\" [alignLeft]=\"true\">\n </section-title>\n <div class=\"value-prop-image\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n <div class=\"paragraph-items\">\n\n <p *ngFor=\"let paragraph of valueprop.paragraphs; let j = index\" class=\"paragraph\"\n (click)=\"onChangeImage(paragraph.imagePath , i ,j)\"\n [ngClass]=\"{'selected-paragraph':paragraph.isClicked}\">\n <span class=\"value-prop-icon\">\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\n <span>\n {{paragraph.text}}\n </span>\n </p>\n </div>\n </div>\n <div class=\"image-buttons-side\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n</div>", styles: [".value-prop{display:flex;flex-direction:row-reverse;flex-wrap:nowrap;column-gap:2%;margin:2rem auto;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:60%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{column-count:2}.value-prop .text-side .paragraph{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:5rem auto auto;margin:1rem 0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:100%}.value-prop .text-side .paragraph:hover .cta-icon{color:#fff;background-color:#155ed4}.value-prop .text-side .paragraph .cta-icon-container{display:grid;align-items:center}.value-prop .text-side .paragraph .cta-icon{align-self:center;justify-content:center;display:grid;font-size:3rem;transform:rotate(-45deg);color:#155ed4;background-color:#fff;border-radius:.7rem;padding:1rem;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#155ed4}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph:hover .cta-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:38%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .text-side .paragraph{padding:1rem;border-radius:.7rem;border:.1rem solid #E3E3E3}.value-prop:nth-child(even) .text-side .paragraph .value-prop-icon{text-align:center}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{width:100%;justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SectionTitleComponent, selector: "section-title", inputs: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
|
|
533
533
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValuePropsSectionsComponent, decorators: [{
|
|
534
534
|
type: Component,
|
|
535
|
-
args: [{ selector: 'value-props-sections', template: "<div class=\"value-prop\" *ngFor=\"let valueprop of sectionContent; let i = index\">\n <div class=\"text-side\">\n <section-title [title]=\"valueprop.title\" [subtitle]=\"valueprop.subtitle\" [alignLeft]=\"true\">\n </section-title>\n <div class=\"value-prop-image\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n <p *ngFor=\"let paragraph of valueprop.paragraphs; let j = index\" class=\"paragraph\"\n
|
|
535
|
+
args: [{ selector: 'value-props-sections', template: "<div class=\"value-prop\" *ngFor=\"let valueprop of sectionContent; let i = index\">\n <div class=\"text-side\">\n <section-title [title]=\"valueprop.title\" [subtitle]=\"valueprop.subtitle\" [alignLeft]=\"true\">\n </section-title>\n <div class=\"value-prop-image\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n <div class=\"paragraph-items\">\n\n <p *ngFor=\"let paragraph of valueprop.paragraphs; let j = index\" class=\"paragraph\"\n (click)=\"onChangeImage(paragraph.imagePath , i ,j)\"\n [ngClass]=\"{'selected-paragraph':paragraph.isClicked}\">\n <span class=\"value-prop-icon\">\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\n <span>\n {{paragraph.text}}\n </span>\n </p>\n </div>\n </div>\n <div class=\"image-buttons-side\">\n <img [src]=\"selectedImage[i]\" alt=\"\">\n </div>\n</div>", styles: [".value-prop{display:flex;flex-direction:row-reverse;flex-wrap:nowrap;column-gap:2%;margin:2rem auto;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:60%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{column-count:2}.value-prop .text-side .paragraph{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:5rem auto auto;margin:1rem 0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:100%}.value-prop .text-side .paragraph:hover .cta-icon{color:#fff;background-color:#155ed4}.value-prop .text-side .paragraph .cta-icon-container{display:grid;align-items:center}.value-prop .text-side .paragraph .cta-icon{align-self:center;justify-content:center;display:grid;font-size:3rem;transform:rotate(-45deg);color:#155ed4;background-color:#fff;border-radius:.7rem;padding:1rem;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#155ed4}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph:hover .cta-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:38%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .text-side .paragraph{padding:1rem;border-radius:.7rem;border:.1rem solid #E3E3E3}.value-prop:nth-child(even) .text-side .paragraph .value-prop-icon{text-align:center}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(even){flex-direction:row}.value-prop:nth-child(even) .image-buttons-side{justify-self:center}.value-prop .text-side{width:100%;justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}\n"] }]
|
|
536
536
|
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
537
537
|
type: Input
|
|
538
538
|
}] } });
|