@jooler/jooler-websites-shared 0.0.143 → 0.0.145
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/feature-section-four/feature-section-four.component.mjs +20 -4
- package/fesm2015/jooler-websites-shared.mjs +23 -7
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +23 -7
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/lib/feature-section-four/feature-section-four.component.d.ts +6 -2
- package/package.json +1 -4
|
@@ -1,15 +1,31 @@
|
|
|
1
1
|
import { Component, Input } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
|
-
import * as i2 from "@angular/material/
|
|
4
|
+
import * as i2 from "@angular/material/icon";
|
|
5
5
|
export class FeatureSectionFourComponent {
|
|
6
|
+
ngOnInit() {
|
|
7
|
+
this.title = this.sectionContent.defaultTitle;
|
|
8
|
+
}
|
|
9
|
+
showDescription(index) {
|
|
10
|
+
if (this.sectionContent.panels[index].isOpened) {
|
|
11
|
+
this.sectionContent.panels[index].isOpened = false;
|
|
12
|
+
this.title = this.sectionContent.defaultTitle;
|
|
13
|
+
}
|
|
14
|
+
else {
|
|
15
|
+
for (let panel of this.sectionContent.panels) {
|
|
16
|
+
panel.isOpened = false;
|
|
17
|
+
}
|
|
18
|
+
this.sectionContent.panels[index].isOpened = true;
|
|
19
|
+
this.title = this.sectionContent.panels[index].title;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
6
22
|
}
|
|
7
23
|
FeatureSectionFourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionFourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8
|
-
FeatureSectionFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionFourComponent, selector: "feature-section-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <
|
|
24
|
+
FeatureSectionFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionFourComponent, selector: "feature-section-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <aside class=\"preview-side\">\n <h3 class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </h3>\n <h1 class=\"title\">\n {{title}}\n </h1>\n <img [src]=\"sectionContent.image\" alt=\"\" class=\"image\" *ngIf=\"sectionContent.image\">\n </aside>\n <aside class=\"panels-side\">\n <div class=\"panel\" *ngFor=\"let panel of sectionContent.panels; let i = index\" [ngClass]=\"{'show-description': panel.isOpened, 'hide-description':!panel.isOpened}\">\n <div class=\"headline\" (click)=\"showDescription(i)\">\n <h3 class=\"label\">\n {{panel.label}}\n </h3>\n <span class=\"arrow\" [ngClass]=\"{'arrow-up': panel.isOpened, 'arrow-down':!panel.isOpened}\">\n <mat-icon>expand_more</mat-icon>\n </span>\n </div>\n <p class=\"description\">\n {{panel.description}}\n </p>\n <div class=\"divider\"></div>\n </div>\n </aside>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto;display:flex;flex-direction:row;column-gap:5%;padding:3rem 0;align-items:center}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .preview-side{width:60%;display:flex;flex-direction:column;row-gap:1rem}.section .preview-side .tip-title{color:#155ed4}.section .preview-side .title{font-size:3rem;color:#32353b}.section .preview-side .image{width:100%;height:40rem;object-fit:cover;border-radius:1.5rem;box-shadow:#ffffff1a 0 .1rem .1rem inset,#32325d40 0 5rem 10rem -2rem,#0000004d 0 3rem 6rem -3rem}.section .panels-side{width:35%;display:flex;flex-direction:column;row-gap:1.5rem}.section .panels-side .panel{display:flex;flex-direction:column;row-gap:.1rem;transition:all ease-in-out .2s}.section .panels-side .panel .headline{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;color:#32353bcc}.section .panels-side .panel .headline:hover{color:#32353b}.section .panels-side .panel .headline:hover .label{padding-left:.5rem}.section .panels-side .panel .headline .label{transition:.2s padding-left ease-in-out}.section .panels-side .panel .headline .arrow{transition:all ease-in-out .2s}.section .panels-side .panel .description{transition:all cubic-bezier(.175,.885,.32,1.275) .4s;color:#32353bcc}.section .panels-side .panel .divider{width:100%;border:.1rem solid #f7f8f9}.section .panels-side .show-description .headline{color:#155ed4}.section .panels-side .show-description .headline .label{padding-left:.5rem}.section .panels-side .show-description .headline:hover{color:#155ed4}.section .panels-side .show-description .headline:hover .label{padding-left:.5rem}.section .panels-side .show-description .description{opacity:1;transform:scaleY(1);height:auto}.section .panels-side .show-description .arrow{transform:rotate(180deg)}.section .panels-side .hide-description{row-gap:0rem}.section .panels-side .hide-description .description{transform:scaleY(0);opacity:0;height:0rem}.section .panels-side .hide-description .arrow{transform:rotate(0)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
9
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionFourComponent, decorators: [{
|
|
10
26
|
type: Component,
|
|
11
|
-
args: [{ selector: 'feature-section-four', template: "<section class=\"section\">\n <
|
|
27
|
+
args: [{ selector: 'feature-section-four', template: "<section class=\"section\">\n <aside class=\"preview-side\">\n <h3 class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </h3>\n <h1 class=\"title\">\n {{title}}\n </h1>\n <img [src]=\"sectionContent.image\" alt=\"\" class=\"image\" *ngIf=\"sectionContent.image\">\n </aside>\n <aside class=\"panels-side\">\n <div class=\"panel\" *ngFor=\"let panel of sectionContent.panels; let i = index\" [ngClass]=\"{'show-description': panel.isOpened, 'hide-description':!panel.isOpened}\">\n <div class=\"headline\" (click)=\"showDescription(i)\">\n <h3 class=\"label\">\n {{panel.label}}\n </h3>\n <span class=\"arrow\" [ngClass]=\"{'arrow-up': panel.isOpened, 'arrow-down':!panel.isOpened}\">\n <mat-icon>expand_more</mat-icon>\n </span>\n </div>\n <p class=\"description\">\n {{panel.description}}\n </p>\n <div class=\"divider\"></div>\n </div>\n </aside>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto;display:flex;flex-direction:row;column-gap:5%;padding:3rem 0;align-items:center}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .preview-side{width:60%;display:flex;flex-direction:column;row-gap:1rem}.section .preview-side .tip-title{color:#155ed4}.section .preview-side .title{font-size:3rem;color:#32353b}.section .preview-side .image{width:100%;height:40rem;object-fit:cover;border-radius:1.5rem;box-shadow:#ffffff1a 0 .1rem .1rem inset,#32325d40 0 5rem 10rem -2rem,#0000004d 0 3rem 6rem -3rem}.section .panels-side{width:35%;display:flex;flex-direction:column;row-gap:1.5rem}.section .panels-side .panel{display:flex;flex-direction:column;row-gap:.1rem;transition:all ease-in-out .2s}.section .panels-side .panel .headline{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;color:#32353bcc}.section .panels-side .panel .headline:hover{color:#32353b}.section .panels-side .panel .headline:hover .label{padding-left:.5rem}.section .panels-side .panel .headline .label{transition:.2s padding-left ease-in-out}.section .panels-side .panel .headline .arrow{transition:all ease-in-out .2s}.section .panels-side .panel .description{transition:all cubic-bezier(.175,.885,.32,1.275) .4s;color:#32353bcc}.section .panels-side .panel .divider{width:100%;border:.1rem solid #f7f8f9}.section .panels-side .show-description .headline{color:#155ed4}.section .panels-side .show-description .headline .label{padding-left:.5rem}.section .panels-side .show-description .headline:hover{color:#155ed4}.section .panels-side .show-description .headline:hover .label{padding-left:.5rem}.section .panels-side .show-description .description{opacity:1;transform:scaleY(1);height:auto}.section .panels-side .show-description .arrow{transform:rotate(180deg)}.section .panels-side .hide-description{row-gap:0rem}.section .panels-side .hide-description .description{transform:scaleY(0);opacity:0;height:0rem}.section .panels-side .hide-description .arrow{transform:rotate(0)}\n"] }]
|
|
12
28
|
}], propDecorators: { sectionContent: [{
|
|
13
29
|
type: Input
|
|
14
30
|
}] } });
|
|
15
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
31
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmVhdHVyZS1zZWN0aW9uLWZvdXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvam9vbGVyLXdlYnNpdGVzLXNoYXJlZC9zcmMvbGliL2ZlYXR1cmUtc2VjdGlvbi1mb3VyL2ZlYXR1cmUtc2VjdGlvbi1mb3VyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9mZWF0dXJlLXNlY3Rpb24tZm91ci9mZWF0dXJlLXNlY3Rpb24tZm91ci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSxNQUFNLGVBQWUsQ0FBQzs7OztBQU96RCxNQUFNLE9BQU8sMkJBQTJCO0lBSXRDLFFBQVE7UUFDTixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsWUFBWSxDQUFDO0lBRWhELENBQUM7SUFFRCxlQUFlLENBQUMsS0FBSztRQUNuQixJQUFJLElBQUksQ0FBQyxjQUFjLENBQUMsTUFBTSxDQUFFLEtBQUssQ0FBRSxDQUFDLFFBQVEsRUFBRTtZQUNoRCxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU0sQ0FBRSxLQUFLLENBQUUsQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1lBQ3JELElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxZQUFZLENBQUM7U0FDL0M7YUFBTTtZQUVMLEtBQUssSUFBSSxLQUFLLElBQUksSUFBSSxDQUFDLGNBQWMsQ0FBQyxNQUFNLEVBQUU7Z0JBQzVDLEtBQUssQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO2FBQ3hCO1lBQ0QsSUFBSSxDQUFDLGNBQWMsQ0FBQyxNQUFNLENBQUUsS0FBSyxDQUFFLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztZQUNwRCxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsTUFBTSxDQUFFLEtBQUssQ0FBRSxDQUFDLEtBQUssQ0FBQztTQUN4RDtJQUNILENBQUM7O3dIQXJCVSwyQkFBMkI7NEdBQTNCLDJCQUEyQiwwR0NQeEMseWxDQTBCVTsyRkRuQkcsMkJBQTJCO2tCQUx2QyxTQUFTOytCQUNFLHNCQUFzQjs4QkFLdkIsY0FBYztzQkFBdEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmZWF0dXJlLXNlY3Rpb24tZm91cicsXG4gIHRlbXBsYXRlVXJsOiAnLi9mZWF0dXJlLXNlY3Rpb24tZm91ci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWyAnLi9mZWF0dXJlLXNlY3Rpb24tZm91ci5jb21wb25lbnQuc2NzcycgXVxufSlcbmV4cG9ydCBjbGFzcyBGZWF0dXJlU2VjdGlvbkZvdXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBzZWN0aW9uQ29udGVudDogYW55O1xuICB0aXRsZTogc3RyaW5nO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMudGl0bGUgPSB0aGlzLnNlY3Rpb25Db250ZW50LmRlZmF1bHRUaXRsZTtcblxuICB9XG5cbiAgc2hvd0Rlc2NyaXB0aW9uKGluZGV4KSB7XG4gICAgaWYgKHRoaXMuc2VjdGlvbkNvbnRlbnQucGFuZWxzWyBpbmRleCBdLmlzT3BlbmVkKSB7XG4gICAgICB0aGlzLnNlY3Rpb25Db250ZW50LnBhbmVsc1sgaW5kZXggXS5pc09wZW5lZCA9IGZhbHNlO1xuICAgICAgdGhpcy50aXRsZSA9IHRoaXMuc2VjdGlvbkNvbnRlbnQuZGVmYXVsdFRpdGxlO1xuICAgIH0gZWxzZSB7XG5cbiAgICAgIGZvciAobGV0IHBhbmVsIG9mIHRoaXMuc2VjdGlvbkNvbnRlbnQucGFuZWxzKSB7XG4gICAgICAgIHBhbmVsLmlzT3BlbmVkID0gZmFsc2U7XG4gICAgICB9XG4gICAgICB0aGlzLnNlY3Rpb25Db250ZW50LnBhbmVsc1sgaW5kZXggXS5pc09wZW5lZCA9IHRydWU7XG4gICAgICB0aGlzLnRpdGxlID0gdGhpcy5zZWN0aW9uQ29udGVudC5wYW5lbHNbIGluZGV4IF0udGl0bGU7XG4gICAgfVxuICB9XG59XG4iLCI8c2VjdGlvbiBjbGFzcz1cInNlY3Rpb25cIj5cbiAgICA8YXNpZGUgY2xhc3M9XCJwcmV2aWV3LXNpZGVcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGlwLXRpdGxlXCI+XG4gICAgICAgICAgICB7e3NlY3Rpb25Db250ZW50LnRpcFRpdGxlfX1cbiAgICAgICAgPC9oMz5cbiAgICAgICAgPGgxIGNsYXNzPVwidGl0bGVcIj5cbiAgICAgICAgICAgIHt7dGl0bGV9fVxuICAgICAgICA8L2gxPlxuICAgICAgICA8aW1nIFtzcmNdPVwic2VjdGlvbkNvbnRlbnQuaW1hZ2VcIiBhbHQ9XCJcIiBjbGFzcz1cImltYWdlXCIgKm5nSWY9XCJzZWN0aW9uQ29udGVudC5pbWFnZVwiPlxuICAgIDwvYXNpZGU+XG4gICAgPGFzaWRlIGNsYXNzPVwicGFuZWxzLXNpZGVcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInBhbmVsXCIgKm5nRm9yPVwibGV0IHBhbmVsIG9mIHNlY3Rpb25Db250ZW50LnBhbmVsczsgbGV0IGkgPSBpbmRleFwiIFtuZ0NsYXNzXT1cInsnc2hvdy1kZXNjcmlwdGlvbic6IHBhbmVsLmlzT3BlbmVkLCAnaGlkZS1kZXNjcmlwdGlvbic6IXBhbmVsLmlzT3BlbmVkfVwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRsaW5lXCIgKGNsaWNrKT1cInNob3dEZXNjcmlwdGlvbihpKVwiPlxuICAgICAgICAgICAgICAgIDxoMyBjbGFzcz1cImxhYmVsXCI+XG4gICAgICAgICAgICAgICAgICAgIHt7cGFuZWwubGFiZWx9fVxuICAgICAgICAgICAgICAgIDwvaDM+XG4gICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJhcnJvd1wiIFtuZ0NsYXNzXT1cInsnYXJyb3ctdXAnOiBwYW5lbC5pc09wZW5lZCwgJ2Fycm93LWRvd24nOiFwYW5lbC5pc09wZW5lZH1cIj5cbiAgICAgICAgICAgICAgICAgICAgPG1hdC1pY29uPmV4cGFuZF9tb3JlPC9tYXQtaWNvbj5cbiAgICAgICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxwIGNsYXNzPVwiZGVzY3JpcHRpb25cIj5cbiAgICAgICAgICAgICAgICB7e3BhbmVsLmRlc2NyaXB0aW9ufX1cbiAgICAgICAgICAgIDwvcD5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJkaXZpZGVyXCI+PC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvYXNpZGU+XG48L3NlY3Rpb24+Il19
|
|
@@ -23,10 +23,10 @@ import * as i3$3 from '@angular/forms';
|
|
|
23
23
|
import { NG_VALUE_ACCESSOR, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
24
24
|
import * as i3$4 from '@ng-select/ng-select';
|
|
25
25
|
import { NgSelectModule } from '@ng-select/ng-select';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i2$1 from '@angular/material/icon';
|
|
27
27
|
import { map } from 'rxjs';
|
|
28
28
|
import * as i3$5 from '@angular/material/card';
|
|
29
|
-
import * as i2$
|
|
29
|
+
import * as i2$2 from '@angular/material/tabs';
|
|
30
30
|
|
|
31
31
|
class SectionTitleComponent {
|
|
32
32
|
}
|
|
@@ -561,7 +561,7 @@ ChooseCountryWithFlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
|
561
561
|
useExisting: forwardRef(() => ChooseCountryWithFlagComponent),
|
|
562
562
|
multi: true
|
|
563
563
|
}
|
|
564
|
-
], ngImport: i0, template: "<div class=\"home\">\n <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\n bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n <div class=\"ng-value-label label-container\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n {{item.code2}}\n </div>\n <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\n \u00D7\n </span> -->\n </ng-template>\n <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n <span class=\"country-name\">\n {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\n </span>\n </ng-template>\n </ng-select>\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"], dependencies: [{ kind: "component", type:
|
|
564
|
+
], ngImport: i0, template: "<div class=\"home\">\n <ng-select (blur)=\"updateBlur()\" class=\"custom\" [items]=\"items\" (change)=\"onSelectionChanged($event)\"\n bindLabel=\"name\" bindValue=\"id\" [(ngModel)]=\"selectedItem\" placeholder=\"Choose Country\">\n <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\n <div class=\"ng-value-label label-container\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n {{item.code2}}\n </div>\n <!-- <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\n \u00D7\n </span> -->\n </ng-template>\n <ng-template ng-option-tmp let-item=\"item\" class=\"options-list\">\n <mat-icon [svgIcon]=\"item?.code2?.toLowerCase()\"></mat-icon>\n <span class=\"country-name\">\n {{(item.name.length>15) ? (item.name | slice:0:15) + '...': item.name}}\n </span>\n </ng-template>\n </ng-select>\n</div>", styles: [".home{width:100%}.home input{margin-right:0vh}.home ng-select{min-width:auto}.home ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{caret-color:transparent}.home ::ng-deep .ng-dropdown-panel.ng-select-bottom{width:25rem}.home ::ng-deep .ng-clear-wrapper .ng-star-inserted{display:none}.home ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{display:flex;column-gap:1rem;align-items:center!important}.home ::ng-deep .ng-select-container,.home ::ng-deep .ng-has-value{min-height:auto;height:4rem}.home ::ng-deep .ng-select-container .ng-value-container,.home ::ng-deep .ng-has-value .ng-value-container{padding-left:.4rem}.home ::ng-deep .ng-select-container .ng-value-container .ng-value,.home ::ng-deep .ng-select-container .ng-value-container .ng-star-inserted,.home ::ng-deep .ng-has-value .ng-value-container .ng-value,.home ::ng-deep .ng-has-value .ng-value-container .ng-star-inserted{display:inherit;column-gap:1rem;margin-left:.1rem;align-items:center}\n"], dependencies: [{ kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$4.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$4.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$4.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }] });
|
|
565
565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseCountryWithFlagComponent, decorators: [{
|
|
566
566
|
type: Component,
|
|
567
567
|
args: [{ selector: 'choose-country-with-flag', providers: [
|
|
@@ -796,7 +796,7 @@ class FaqListingComponent {
|
|
|
796
796
|
}
|
|
797
797
|
}
|
|
798
798
|
FaqListingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
799
|
-
FaqListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqListingComponent, selector: "faq-listing", inputs: { faq: "faq" }, ngImport: i0, template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n (closed)=\"onClosed($event)\">\n <mat-expansion-panel-header class=\"panel-header\">\n <mat-panel-title class=\"title\">\n {{faq.question}}\n </mat-panel-title>\n <div class=\"icon\">\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"content\">\n {{faq.response}}\n </div>\n</mat-expansion-panel>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type:
|
|
799
|
+
FaqListingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FaqListingComponent, selector: "faq-listing", inputs: { faq: "faq" }, ngImport: i0, template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n (closed)=\"onClosed($event)\">\n <mat-expansion-panel-header class=\"panel-header\">\n <mat-panel-title class=\"title\">\n {{faq.question}}\n </mat-panel-title>\n <div class=\"icon\">\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"content\">\n {{faq.response}}\n </div>\n</mat-expansion-panel>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3$1.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
800
800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FaqListingComponent, decorators: [{
|
|
801
801
|
type: Component,
|
|
802
802
|
args: [{ selector: 'faq-listing', template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n (closed)=\"onClosed($event)\">\n <mat-expansion-panel-header class=\"panel-header\">\n <mat-panel-title class=\"title\">\n {{faq.question}}\n </mat-panel-title>\n <div class=\"icon\">\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"content\">\n {{faq.response}}\n </div>\n</mat-expansion-panel>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"] }]
|
|
@@ -952,7 +952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
952
952
|
class FeatureSectionThreeComponent {
|
|
953
953
|
}
|
|
954
954
|
FeatureSectionThreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionThreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
955
|
-
FeatureSectionThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionThreeComponent, selector: "feature-section-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <mat-tab-group>\n <mat-tab [label]=\"tab.tabLabel\" *ngFor=\"let tab of sectionContent\">\n <div class=\"section-content\">\n <page-section-style-three [sectionContent]=\"tab.tabContent\" *ngFor=\"let part of tab.tabContent\"></page-section-style-three>\n </div>\n </mat-tab>\n </mat-tab-group>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto}@media only screen and (min-width: 1500px){.section{width:150rem}}.section mat-tab-group{padding:3rem 0}.section .section-content{padding:3rem 0rem}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$
|
|
955
|
+
FeatureSectionThreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionThreeComponent, selector: "feature-section-three", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <mat-tab-group>\n <mat-tab [label]=\"tab.tabLabel\" *ngFor=\"let tab of sectionContent\">\n <div class=\"section-content\">\n <page-section-style-three [sectionContent]=\"tab.tabContent\" *ngFor=\"let part of tab.tabContent\"></page-section-style-three>\n </div>\n </mat-tab>\n </mat-tab-group>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto}@media only screen and (min-width: 1500px){.section{width:150rem}}.section mat-tab-group{padding:3rem 0}.section .section-content{padding:3rem 0rem}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: PageSectionStyleThreeComponent, selector: "page-section-style-three", inputs: ["sectionContent"] }] });
|
|
956
956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionThreeComponent, decorators: [{
|
|
957
957
|
type: Component,
|
|
958
958
|
args: [{ selector: 'feature-section-three', template: "<section class=\"section\">\n <mat-tab-group>\n <mat-tab [label]=\"tab.tabLabel\" *ngFor=\"let tab of sectionContent\">\n <div class=\"section-content\">\n <page-section-style-three [sectionContent]=\"tab.tabContent\" *ngFor=\"let part of tab.tabContent\"></page-section-style-three>\n </div>\n </mat-tab>\n </mat-tab-group>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto}@media only screen and (min-width: 1500px){.section{width:150rem}}.section mat-tab-group{padding:3rem 0}.section .section-content{padding:3rem 0rem}\n"] }]
|
|
@@ -961,12 +961,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
961
961
|
}] } });
|
|
962
962
|
|
|
963
963
|
class FeatureSectionFourComponent {
|
|
964
|
+
ngOnInit() {
|
|
965
|
+
this.title = this.sectionContent.defaultTitle;
|
|
966
|
+
}
|
|
967
|
+
showDescription(index) {
|
|
968
|
+
if (this.sectionContent.panels[index].isOpened) {
|
|
969
|
+
this.sectionContent.panels[index].isOpened = false;
|
|
970
|
+
this.title = this.sectionContent.defaultTitle;
|
|
971
|
+
}
|
|
972
|
+
else {
|
|
973
|
+
for (let panel of this.sectionContent.panels) {
|
|
974
|
+
panel.isOpened = false;
|
|
975
|
+
}
|
|
976
|
+
this.sectionContent.panels[index].isOpened = true;
|
|
977
|
+
this.title = this.sectionContent.panels[index].title;
|
|
978
|
+
}
|
|
979
|
+
}
|
|
964
980
|
}
|
|
965
981
|
FeatureSectionFourComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionFourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
966
|
-
FeatureSectionFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionFourComponent, selector: "feature-section-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <
|
|
982
|
+
FeatureSectionFourComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FeatureSectionFourComponent, selector: "feature-section-four", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<section class=\"section\">\n <aside class=\"preview-side\">\n <h3 class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </h3>\n <h1 class=\"title\">\n {{title}}\n </h1>\n <img [src]=\"sectionContent.image\" alt=\"\" class=\"image\" *ngIf=\"sectionContent.image\">\n </aside>\n <aside class=\"panels-side\">\n <div class=\"panel\" *ngFor=\"let panel of sectionContent.panels; let i = index\" [ngClass]=\"{'show-description': panel.isOpened, 'hide-description':!panel.isOpened}\">\n <div class=\"headline\" (click)=\"showDescription(i)\">\n <h3 class=\"label\">\n {{panel.label}}\n </h3>\n <span class=\"arrow\" [ngClass]=\"{'arrow-up': panel.isOpened, 'arrow-down':!panel.isOpened}\">\n <mat-icon>expand_more</mat-icon>\n </span>\n </div>\n <p class=\"description\">\n {{panel.description}}\n </p>\n <div class=\"divider\"></div>\n </div>\n </aside>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto;display:flex;flex-direction:row;column-gap:5%;padding:3rem 0;align-items:center}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .preview-side{width:60%;display:flex;flex-direction:column;row-gap:1rem}.section .preview-side .tip-title{color:#155ed4}.section .preview-side .title{font-size:3rem;color:#32353b}.section .preview-side .image{width:100%;height:40rem;object-fit:cover;border-radius:1.5rem;box-shadow:#ffffff1a 0 .1rem .1rem inset,#32325d40 0 5rem 10rem -2rem,#0000004d 0 3rem 6rem -3rem}.section .panels-side{width:35%;display:flex;flex-direction:column;row-gap:1.5rem}.section .panels-side .panel{display:flex;flex-direction:column;row-gap:.1rem;transition:all ease-in-out .2s}.section .panels-side .panel .headline{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;color:#32353bcc}.section .panels-side .panel .headline:hover{color:#32353b}.section .panels-side .panel .headline:hover .label{padding-left:.5rem}.section .panels-side .panel .headline .label{transition:.2s padding-left ease-in-out}.section .panels-side .panel .headline .arrow{transition:all ease-in-out .2s}.section .panels-side .panel .description{transition:all cubic-bezier(.175,.885,.32,1.275) .4s;color:#32353bcc}.section .panels-side .panel .divider{width:100%;border:.1rem solid #f7f8f9}.section .panels-side .show-description .headline{color:#155ed4}.section .panels-side .show-description .headline .label{padding-left:.5rem}.section .panels-side .show-description .headline:hover{color:#155ed4}.section .panels-side .show-description .headline:hover .label{padding-left:.5rem}.section .panels-side .show-description .description{opacity:1;transform:scaleY(1);height:auto}.section .panels-side .show-description .arrow{transform:rotate(180deg)}.section .panels-side .hide-description{row-gap:0rem}.section .panels-side .hide-description .description{transform:scaleY(0);opacity:0;height:0rem}.section .panels-side .hide-description .arrow{transform:rotate(0)}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
967
983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FeatureSectionFourComponent, decorators: [{
|
|
968
984
|
type: Component,
|
|
969
|
-
args: [{ selector: 'feature-section-four', template: "<section class=\"section\">\n <
|
|
985
|
+
args: [{ selector: 'feature-section-four', template: "<section class=\"section\">\n <aside class=\"preview-side\">\n <h3 class=\"tip-title\">\n {{sectionContent.tipTitle}}\n </h3>\n <h1 class=\"title\">\n {{title}}\n </h1>\n <img [src]=\"sectionContent.image\" alt=\"\" class=\"image\" *ngIf=\"sectionContent.image\">\n </aside>\n <aside class=\"panels-side\">\n <div class=\"panel\" *ngFor=\"let panel of sectionContent.panels; let i = index\" [ngClass]=\"{'show-description': panel.isOpened, 'hide-description':!panel.isOpened}\">\n <div class=\"headline\" (click)=\"showDescription(i)\">\n <h3 class=\"label\">\n {{panel.label}}\n </h3>\n <span class=\"arrow\" [ngClass]=\"{'arrow-up': panel.isOpened, 'arrow-down':!panel.isOpened}\">\n <mat-icon>expand_more</mat-icon>\n </span>\n </div>\n <p class=\"description\">\n {{panel.description}}\n </p>\n <div class=\"divider\"></div>\n </div>\n </aside>\n</section>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section{width:90%;margin:auto;display:flex;flex-direction:row;column-gap:5%;padding:3rem 0;align-items:center}@media only screen and (min-width: 1500px){.section{width:150rem}}.section .preview-side{width:60%;display:flex;flex-direction:column;row-gap:1rem}.section .preview-side .tip-title{color:#155ed4}.section .preview-side .title{font-size:3rem;color:#32353b}.section .preview-side .image{width:100%;height:40rem;object-fit:cover;border-radius:1.5rem;box-shadow:#ffffff1a 0 .1rem .1rem inset,#32325d40 0 5rem 10rem -2rem,#0000004d 0 3rem 6rem -3rem}.section .panels-side{width:35%;display:flex;flex-direction:column;row-gap:1.5rem}.section .panels-side .panel{display:flex;flex-direction:column;row-gap:.1rem;transition:all ease-in-out .2s}.section .panels-side .panel .headline{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;color:#32353bcc}.section .panels-side .panel .headline:hover{color:#32353b}.section .panels-side .panel .headline:hover .label{padding-left:.5rem}.section .panels-side .panel .headline .label{transition:.2s padding-left ease-in-out}.section .panels-side .panel .headline .arrow{transition:all ease-in-out .2s}.section .panels-side .panel .description{transition:all cubic-bezier(.175,.885,.32,1.275) .4s;color:#32353bcc}.section .panels-side .panel .divider{width:100%;border:.1rem solid #f7f8f9}.section .panels-side .show-description .headline{color:#155ed4}.section .panels-side .show-description .headline .label{padding-left:.5rem}.section .panels-side .show-description .headline:hover{color:#155ed4}.section .panels-side .show-description .headline:hover .label{padding-left:.5rem}.section .panels-side .show-description .description{opacity:1;transform:scaleY(1);height:auto}.section .panels-side .show-description .arrow{transform:rotate(180deg)}.section .panels-side .hide-description{row-gap:0rem}.section .panels-side .hide-description .description{transform:scaleY(0);opacity:0;height:0rem}.section .panels-side .hide-description .arrow{transform:rotate(0)}\n"] }]
|
|
970
986
|
}], propDecorators: { sectionContent: [{
|
|
971
987
|
type: Input
|
|
972
988
|
}] } });
|