@jooler/jooler-websites-shared 0.0.96 → 0.0.97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/achievements/achievements.component.mjs +2 -2
- package/esm2020/lib/page-section-style-thirteen/page-section-style-thirteen.component.mjs +3 -3
- package/esm2020/lib/pricing-plans/pricing-plans.component.mjs +2 -2
- 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
|
@@ -9,10 +9,10 @@ export class AchievementsComponent {
|
|
|
9
9
|
ngOnInit() { }
|
|
10
10
|
}
|
|
11
11
|
AchievementsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12
|
-
AchievementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AchievementsComponent, selector: "achievements", inputs: { achievements: "achievements", blueBg: "blueBg" }, ngImport: i0, template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': blueBg}\">\n <div class=\"content\">\n <div>\n <section-title [title]=\"achievements.title\" [subtitle]=\"achievements.subtitle\"\n [isDarkBg]=\"blueBg\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of achievements.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;background-
|
|
12
|
+
AchievementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AchievementsComponent, selector: "achievements", inputs: { achievements: "achievements", blueBg: "blueBg" }, ngImport: i0, template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': blueBg}\">\n <div class=\"content\">\n <div>\n <section-title [title]=\"achievements.title\" [subtitle]=\"achievements.subtitle\"\n [isDarkBg]=\"blueBg\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of achievements.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;background-image:linear-gradient(88.83deg,#155ED4 3.16%,#0F2844 97.43%);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-color:linear-gradient(88.83deg,#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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.SectionTitleComponent, selector: "section-title", inputs: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
|
|
13
13
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, decorators: [{
|
|
14
14
|
type: Component,
|
|
15
|
-
args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': blueBg}\">\n <div class=\"content\">\n <div>\n <section-title [title]=\"achievements.title\" [subtitle]=\"achievements.subtitle\"\n [isDarkBg]=\"blueBg\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of achievements.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;background-
|
|
15
|
+
args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': blueBg}\">\n <div class=\"content\">\n <div>\n <section-title [title]=\"achievements.title\" [subtitle]=\"achievements.subtitle\"\n [isDarkBg]=\"blueBg\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of achievements.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;background-image:linear-gradient(88.83deg,#155ED4 3.16%,#0F2844 97.43%);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-color:linear-gradient(88.83deg,#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"] }]
|
|
16
16
|
}], ctorParameters: function () { return []; }, propDecorators: { achievements: [{
|
|
17
17
|
type: Input
|
|
18
18
|
}], blueBg: [{
|
|
@@ -27,10 +27,10 @@ export class PageSectionStyleThirteenComponent {
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
PageSectionStyleThirteenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
-
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionContent: "sectionContent", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\"\n [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/
|
|
30
|
+
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionContent: "sectionContent", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\"\n [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.why-choose-us{display:grid;grid-template-columns:48% 48%;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:100%}.why-choose-us .items{display:grid;gap:2.5rem}.why-choose-us .hovered-item{background-color:#155ed4;box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#f1f1f1}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}.why-choose-us .item:hover{box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:1.8rem;align-self:top}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap;row-gap:2%}.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 1s;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: 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: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2.SectionTitleComponent, selector: "section-title", inputs: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
|
|
31
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
|
-
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\"\n [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/
|
|
33
|
+
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\"\n [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.why-choose-us{display:grid;grid-template-columns:48% 48%;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:100%}.why-choose-us .items{display:grid;gap:2.5rem}.why-choose-us .hovered-item{background-color:#155ed4;box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#f1f1f1}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}.why-choose-us .item:hover{box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:1.8rem;align-self:top}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap;row-gap:2%}.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 1s;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"] }]
|
|
34
34
|
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
35
35
|
type: Input
|
|
36
36
|
}], items: [{
|
|
@@ -40,4 +40,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
40
40
|
}], isTwoImages: [{
|
|
41
41
|
type: Input
|
|
42
42
|
}] } });
|
|
43
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9wYWdlLXNlY3Rpb24tc3R5bGUtdGhpcnRlZW4vcGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9wYWdlLXNlY3Rpb24tc3R5bGUtdGhpcnRlZW4vcGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDZDQUE2QyxDQUFDOzs7O0FBT3ZGLE1BQU0sT0FBTyxpQ0FBaUM7SUFjNUM7UUFaQSxZQUFPLEdBQVcsQ0FBQyxDQUFDO1FBRXBCLGtCQUFhLEdBQWMsRUFBRSxDQUFDO1FBQzlCLDZCQUF3QixHQUFHLHdCQUF3QixDQUFDO1FBRzNDLGFBQVEsR0FBNkIsSUFBSSxDQUFDLHdCQUF3QixDQUFDLFVBQVUsQ0FBQztRQUM5RSxnQkFBVyxHQUFZLEtBQUssQ0FBQztJQUt0QixDQUFDO0lBSGpCLFFBQVE7UUFDTixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFHRCxrQkFBa0IsQ0FBQyxLQUFLLEVBQUUsS0FBSztRQUM3QixJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQsYUFBYSxDQUFDLFNBQVMsRUFBRSxLQUFLO1FBQzVCLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUMxQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQztTQUMvQjtRQUNELElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLEdBQUcsSUFBSSxDQUFDO1FBQ2pDLElBQUksQ0FBQyxXQUFXLEdBQUcsU0FBUyxDQUFDO0lBQy9CLENBQUM7OzhIQTNCVSxpQ0FBaUM7a0hBQWpDLGlDQUFpQyxtTENSOUMsZzVEQXFDTTsyRkQ3Qk8saUNBQWlDO2tCQUw3QyxTQUFTOytCQUNFLDZCQUE2QjswRUFVOUIsY0FBYztzQkFBdEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4gfSBmcm9tICcuLi9tb2RlbHMvcGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BhZ2Utc2VjdGlvbi1zdHlsZS10aGlydGVlbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3BhZ2Utc2VjdGlvbi1zdHlsZS10aGlydGVlbi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHNob3dlZEltYWdlOiBzdHJpbmc7XG4gIGNvdW50ZXI6IG51bWJlciA9IDA7XG4gIGludGVydmFsSWQ6IGFueTtcbiAgaXNJdGVtSG92ZXJlZDogYm9vbGVhbltdID0gW107XG4gIHBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbiA9IFBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbjtcbiAgQElucHV0KCkgc2VjdGlvbkNvbnRlbnQ6IGFueTtcbiAgQElucHV0KCkgaXRlbXM6IGFueTtcbiAgQElucHV0KCkgaWNvblR5cGU6IFBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbiA9IHRoaXMucGFnZVNlY3Rpb25TdHlsZVRoaXJ0ZWVuLlNIQVBFX0lDT047XG4gIEBJbnB1dCgpIGlzVHdvSW1hZ2VzOiBib29sZWFuID0gZmFsc2U7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5vbkhvdmVyZWRJdGVtKHRoaXMuaXRlbXNbMF0uaW1hZ2UsIDApO1xuICB9XG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgb25DbGlja0NoYW5nZUltYWdlKGltYWdlLCBpbmRleCkge1xuICAgIHRoaXMub25Ib3ZlcmVkSXRlbShpbWFnZSwgaW5kZXgpO1xuICB9XG5cbiAgb25Ib3ZlcmVkSXRlbShpdGVtSW1hZ2UsIGluZGV4KSB7XG4gICAgdGhpcy5jb3VudGVyID0gaW5kZXg7XG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLml0ZW1zLmxlbmd0aDsgaSsrKSB7XG4gICAgICB0aGlzLmlzSXRlbUhvdmVyZWRbaV0gPSBmYWxzZTtcbiAgICB9XG4gICAgdGhpcy5pc0l0ZW1Ib3ZlcmVkW2luZGV4XSA9IHRydWU7XG4gICAgdGhpcy5zaG93ZWRJbWFnZSA9IGl0ZW1JbWFnZTtcbiAgfVxufVxuXG4iLCI8ZGl2IGNsYXNzPVwid2h5LWNob29zZS11c1wiPlxuICAgIDxkaXYgY2xhc3M9XCJsZWZ0LXNpZGVcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRsaW5lXCI+XG4gICAgICAgICAgICA8c2VjdGlvbi10aXRsZSBbdGl0bGVdPVwic2VjdGlvbkNvbnRlbnQudGl0bGVcIiBbc3VidGl0bGVdPVwic2VjdGlvbkNvbnRlbnQuc3VidGl0bGVcIlxuICAgICAgICAgICAgICAgIFthbGlnbkxlZnRdPVwidHJ1ZVwiPjwvc2VjdGlvbi10aXRsZT5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpdGVtc1wiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cIml0ZW1cIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtczsgbGV0IGk9aW5kZXhcIiBbbmdDbGFzc109XCJ7J2hvdmVyZWQtaXRlbSc6IGlzSXRlbUhvdmVyZWRbaV19XCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DbGlja0NoYW5nZUltYWdlKGl0ZW0uaW1hZ2UsIGkpXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImxlZnQtY29sdW1uXCI+XG5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNxdWFyZS1yb3dcIiBbbmdTd2l0Y2hdPVwiaWNvblR5cGVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwieydzcXVhcmUtcm93JzppY29uVHlwZSA9PSBwYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4uU0hBUEVfSUNPTiwnc2hhcGUtY29sdW1uJzppY29uVHlwZSA9PSBwYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4uSU1BR0VfSUNPTn1cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzcXVhcmVcIiAqbmdTd2l0Y2hDYXNlPVwicGFnZVNlY3Rpb25TdHlsZVRoaXJ0ZWVuLlNIQVBFX0lDT05cIj48L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzaGFwZVwiICpuZ1N3aXRjaENhc2U9XCJwYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4uSU1BR0VfSUNPTlwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxpbWcgW3NyY109XCJpdGVtLmljb25cIiBhbHQ9XCJcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdj48L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicmlnaHQtY29sdW1uXCI+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJpdGVtLXRpdGxlXCI+e3tpdGVtLnRpdGxlfX08L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIml0ZW0tZGVzY3JpcHRpb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwieydoaWRlLWRlc2NyaXB0aW9uJzohaXNJdGVtSG92ZXJlZFtpXSAsICdzaG93LWRlc2NyaXB0aW9uJzppc0l0ZW1Ib3ZlcmVkW2ldIH1cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt7aXRlbS5kZXNjcmlwdGlvbn19PC9kaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInJpZ2h0LXNpZGVcIiBbbmdDbGFzc109XCJ7J3R3by1pbWFnZXMtcHJldmlldyc6aXNUd29JbWFnZXN9XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpbWFnZS1jb250YWluZXJcIj5cbiAgICAgICAgICAgIDxpbWcgW3NyY109XCJzaG93ZWRJbWFnZVwiIGFsdD1cIlwiPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImJhY2staW1hZ2VcIiAqbmdJZj1cImlzVHdvSW1hZ2VzXCI+
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9wYWdlLXNlY3Rpb24tc3R5bGUtdGhpcnRlZW4vcGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9wYWdlLXNlY3Rpb24tc3R5bGUtdGhpcnRlZW4vcGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3pELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDZDQUE2QyxDQUFDOzs7O0FBT3ZGLE1BQU0sT0FBTyxpQ0FBaUM7SUFjNUM7UUFaQSxZQUFPLEdBQVcsQ0FBQyxDQUFDO1FBRXBCLGtCQUFhLEdBQWMsRUFBRSxDQUFDO1FBQzlCLDZCQUF3QixHQUFHLHdCQUF3QixDQUFDO1FBRzNDLGFBQVEsR0FBNkIsSUFBSSxDQUFDLHdCQUF3QixDQUFDLFVBQVUsQ0FBQztRQUM5RSxnQkFBVyxHQUFZLEtBQUssQ0FBQztJQUt0QixDQUFDO0lBSGpCLFFBQVE7UUFDTixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFHRCxrQkFBa0IsQ0FBQyxLQUFLLEVBQUUsS0FBSztRQUM3QixJQUFJLENBQUMsYUFBYSxDQUFDLEtBQUssRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDO0lBRUQsYUFBYSxDQUFDLFNBQVMsRUFBRSxLQUFLO1FBQzVCLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ3JCLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDLEVBQUUsRUFBRTtZQUMxQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQztTQUMvQjtRQUNELElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLEdBQUcsSUFBSSxDQUFDO1FBQ2pDLElBQUksQ0FBQyxXQUFXLEdBQUcsU0FBUyxDQUFDO0lBQy9CLENBQUM7OzhIQTNCVSxpQ0FBaUM7a0hBQWpDLGlDQUFpQyxtTENSOUMsZzVEQXFDTTsyRkQ3Qk8saUNBQWlDO2tCQUw3QyxTQUFTOytCQUNFLDZCQUE2QjswRUFVOUIsY0FBYztzQkFBdEIsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4gfSBmcm9tICcuLi9tb2RlbHMvcGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuLm1vZGVsJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncGFnZS1zZWN0aW9uLXN0eWxlLXRoaXJ0ZWVuJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BhZ2Utc2VjdGlvbi1zdHlsZS10aGlydGVlbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3BhZ2Utc2VjdGlvbi1zdHlsZS10aGlydGVlbi5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIFBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbkNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHNob3dlZEltYWdlOiBzdHJpbmc7XG4gIGNvdW50ZXI6IG51bWJlciA9IDA7XG4gIGludGVydmFsSWQ6IGFueTtcbiAgaXNJdGVtSG92ZXJlZDogYm9vbGVhbltdID0gW107XG4gIHBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbiA9IFBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbjtcbiAgQElucHV0KCkgc2VjdGlvbkNvbnRlbnQ6IGFueTtcbiAgQElucHV0KCkgaXRlbXM6IGFueTtcbiAgQElucHV0KCkgaWNvblR5cGU6IFBhZ2VTZWN0aW9uU3R5bGVUaGlydGVlbiA9IHRoaXMucGFnZVNlY3Rpb25TdHlsZVRoaXJ0ZWVuLlNIQVBFX0lDT047XG4gIEBJbnB1dCgpIGlzVHdvSW1hZ2VzOiBib29sZWFuID0gZmFsc2U7XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5vbkhvdmVyZWRJdGVtKHRoaXMuaXRlbXNbMF0uaW1hZ2UsIDApO1xuICB9XG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgb25DbGlja0NoYW5nZUltYWdlKGltYWdlLCBpbmRleCkge1xuICAgIHRoaXMub25Ib3ZlcmVkSXRlbShpbWFnZSwgaW5kZXgpO1xuICB9XG5cbiAgb25Ib3ZlcmVkSXRlbShpdGVtSW1hZ2UsIGluZGV4KSB7XG4gICAgdGhpcy5jb3VudGVyID0gaW5kZXg7XG4gICAgZm9yIChsZXQgaSA9IDA7IGkgPCB0aGlzLml0ZW1zLmxlbmd0aDsgaSsrKSB7XG4gICAgICB0aGlzLmlzSXRlbUhvdmVyZWRbaV0gPSBmYWxzZTtcbiAgICB9XG4gICAgdGhpcy5pc0l0ZW1Ib3ZlcmVkW2luZGV4XSA9IHRydWU7XG4gICAgdGhpcy5zaG93ZWRJbWFnZSA9IGl0ZW1JbWFnZTtcbiAgfVxufVxuXG4iLCI8ZGl2IGNsYXNzPVwid2h5LWNob29zZS11c1wiPlxuICAgIDxkaXYgY2xhc3M9XCJsZWZ0LXNpZGVcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRsaW5lXCI+XG4gICAgICAgICAgICA8c2VjdGlvbi10aXRsZSBbdGl0bGVdPVwic2VjdGlvbkNvbnRlbnQudGl0bGVcIiBbc3VidGl0bGVdPVwic2VjdGlvbkNvbnRlbnQuc3VidGl0bGVcIlxuICAgICAgICAgICAgICAgIFthbGlnbkxlZnRdPVwidHJ1ZVwiPjwvc2VjdGlvbi10aXRsZT5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpdGVtc1wiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cIml0ZW1cIiAqbmdGb3I9XCJsZXQgaXRlbSBvZiBpdGVtczsgbGV0IGk9aW5kZXhcIiBbbmdDbGFzc109XCJ7J2hvdmVyZWQtaXRlbSc6IGlzSXRlbUhvdmVyZWRbaV19XCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DbGlja0NoYW5nZUltYWdlKGl0ZW0uaW1hZ2UsIGkpXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImxlZnQtY29sdW1uXCI+XG5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNxdWFyZS1yb3dcIiBbbmdTd2l0Y2hdPVwiaWNvblR5cGVcIlxuICAgICAgICAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwieydzcXVhcmUtcm93JzppY29uVHlwZSA9PSBwYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4uU0hBUEVfSUNPTiwnc2hhcGUtY29sdW1uJzppY29uVHlwZSA9PSBwYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4uSU1BR0VfSUNPTn1cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzcXVhcmVcIiAqbmdTd2l0Y2hDYXNlPVwicGFnZVNlY3Rpb25TdHlsZVRoaXJ0ZWVuLlNIQVBFX0lDT05cIj48L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzaGFwZVwiICpuZ1N3aXRjaENhc2U9XCJwYWdlU2VjdGlvblN0eWxlVGhpcnRlZW4uSU1BR0VfSUNPTlwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxpbWcgW3NyY109XCJpdGVtLmljb25cIiBhbHQ9XCJcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdj48L2Rpdj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwicmlnaHQtY29sdW1uXCI+XG4gICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJpdGVtLXRpdGxlXCI+e3tpdGVtLnRpdGxlfX08L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIml0ZW0tZGVzY3JpcHRpb25cIlxuICAgICAgICAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwieydoaWRlLWRlc2NyaXB0aW9uJzohaXNJdGVtSG92ZXJlZFtpXSAsICdzaG93LWRlc2NyaXB0aW9uJzppc0l0ZW1Ib3ZlcmVkW2ldIH1cIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIHt7aXRlbS5kZXNjcmlwdGlvbn19PC9kaXY+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInJpZ2h0LXNpZGVcIiBbbmdDbGFzc109XCJ7J3R3by1pbWFnZXMtcHJldmlldyc6aXNUd29JbWFnZXN9XCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJpbWFnZS1jb250YWluZXJcIj5cbiAgICAgICAgICAgIDxpbWcgW3NyY109XCJzaG93ZWRJbWFnZVwiIGFsdD1cIlwiPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImJhY2staW1hZ2VcIiAqbmdJZj1cImlzVHdvSW1hZ2VzXCI+XG4gICAgICAgICAgICA8aW1nIHNyYz1cImh0dHBzOi8vaS5pYmIuY28vbXF0cEQ1MC9ibHVlLXBvaW50cy1zZWN0aW9uLnBuZ1wiIGFsdD1cIlwiPlxuICAgICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbjwvZGl2PiJdfQ==
|
|
@@ -13,10 +13,10 @@ export class PricingPlansComponent {
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
PricingPlansComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
-
PricingPlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlans: "servicePlans" }, ngImport: i0, template: "<div class=\"service-plans\">\n <div class=\"plan-content\" *ngFor=\"let plan of servicePlans\">\n <div class=\"title-price-desc\">\n <h1 class=\"plan-title\">\n {{plan.name}}\n </h1>\n <div class=\"price\" *ngIf=\"plan.price\">\n <span class=\"service-price\">$ {{plan.price}}</span>\n <span>/{{plan.frequency}}</span>\n </div>\n <div class=\"description\">\n {{plan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of plan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button class=\"button\">\n Choose Plan\n </button>\n </div>\n </div>\n</div>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-plans{display:flex;flex-wrap:wrap;justify-content:center;margin-top:4rem;width:90%;margin:1rem 5%;gap:1.5rem}.service-plans .service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.service-plans .plan-content{display:grid;grid-template-rows:auto auto auto;width:
|
|
16
|
+
PricingPlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlans: "servicePlans" }, ngImport: i0, template: "<div class=\"service-plans\">\n <div class=\"plan-content\" *ngFor=\"let plan of servicePlans\">\n <div class=\"title-price-desc\">\n <h1 class=\"plan-title\">\n {{plan.name}}\n </h1>\n <div class=\"price\" *ngIf=\"plan.price\">\n <span class=\"service-price\">$ {{plan.price}}</span>\n <span>/{{plan.frequency}}</span>\n </div>\n <div class=\"description\">\n {{plan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of plan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button class=\"button\">\n Choose Plan\n </button>\n </div>\n </div>\n</div>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-plans{display:flex;flex-wrap:wrap;justify-content:center;margin-top:4rem;width:90%;margin:1rem 5%;gap:1.5rem}.service-plans .service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.service-plans .plan-content{display:grid;grid-template-rows:auto auto auto;width:20%;background:#FFFFFF;border-radius:1rem;padding:3rem 2rem;min-height:30rem;max-height:60rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem}@media only screen and (max-width: 75em){.service-plans .plan-content{width:30rem}}.service-plans .plan-content .title-price-desc .divider{width:95%;border:.1rem solid #32353B;margin:1rem auto}.service-plans .plan-content .plan-title{grid-row:1;color:#1049a6;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem}.service-plans .plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem}.service-plans .plan-content .perks{display:grid;row-gap:.5rem}.service-plans .plan-content .perks .perk{display:flex}.service-plans .plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#36393fe8;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.service-plans .plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer}.service-plans .plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.service-plans .plan-content .registration-button{display:flex;padding:1rem 0rem}.service-plans .plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;border:#1049a6 solid .1rem;color:#1049a6;width:100%}.service-plans .plan-content:hover{background-color:#155ed4;color:#fff}.service-plans .plan-content:hover .plan-title,.service-plans .plan-content:hover .description,.service-plans .plan-content:hover .service .service-description{color:#fff}.service-plans .plan-content:hover .title-price-desc .divider{border:.1rem solid #ffffff}.service-plans .plan-content:hover .perks .perk .service-description,.service-plans .plan-content:hover .perks .perk .check-icon{color:#fff}\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
17
17
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
|
-
args: [{ selector: 'pricing-plans', template: "<div class=\"service-plans\">\n <div class=\"plan-content\" *ngFor=\"let plan of servicePlans\">\n <div class=\"title-price-desc\">\n <h1 class=\"plan-title\">\n {{plan.name}}\n </h1>\n <div class=\"price\" *ngIf=\"plan.price\">\n <span class=\"service-price\">$ {{plan.price}}</span>\n <span>/{{plan.frequency}}</span>\n </div>\n <div class=\"description\">\n {{plan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of plan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button class=\"button\">\n Choose Plan\n </button>\n </div>\n </div>\n</div>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-plans{display:flex;flex-wrap:wrap;justify-content:center;margin-top:4rem;width:90%;margin:1rem 5%;gap:1.5rem}.service-plans .service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.service-plans .plan-content{display:grid;grid-template-rows:auto auto auto;width:
|
|
19
|
+
args: [{ selector: 'pricing-plans', template: "<div class=\"service-plans\">\n <div class=\"plan-content\" *ngFor=\"let plan of servicePlans\">\n <div class=\"title-price-desc\">\n <h1 class=\"plan-title\">\n {{plan.name}}\n </h1>\n <div class=\"price\" *ngIf=\"plan.price\">\n <span class=\"service-price\">$ {{plan.price}}</span>\n <span>/{{plan.frequency}}</span>\n </div>\n <div class=\"description\">\n {{plan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of plan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button class=\"button\">\n Choose Plan\n </button>\n </div>\n </div>\n</div>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-plans{display:flex;flex-wrap:wrap;justify-content:center;margin-top:4rem;width:90%;margin:1rem 5%;gap:1.5rem}.service-plans .service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.service-plans .plan-content{display:grid;grid-template-rows:auto auto auto;width:20%;background:#FFFFFF;border-radius:1rem;padding:3rem 2rem;min-height:30rem;max-height:60rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem}@media only screen and (max-width: 75em){.service-plans .plan-content{width:30rem}}.service-plans .plan-content .title-price-desc .divider{width:95%;border:.1rem solid #32353B;margin:1rem auto}.service-plans .plan-content .plan-title{grid-row:1;color:#1049a6;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem}.service-plans .plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem}.service-plans .plan-content .perks{display:grid;row-gap:.5rem}.service-plans .plan-content .perks .perk{display:flex}.service-plans .plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#36393fe8;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.service-plans .plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer}.service-plans .plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.service-plans .plan-content .registration-button{display:flex;padding:1rem 0rem}.service-plans .plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;border:#1049a6 solid .1rem;color:#1049a6;width:100%}.service-plans .plan-content:hover{background-color:#155ed4;color:#fff}.service-plans .plan-content:hover .plan-title,.service-plans .plan-content:hover .description,.service-plans .plan-content:hover .service .service-description{color:#fff}.service-plans .plan-content:hover .title-price-desc .divider{border:.1rem solid #ffffff}.service-plans .plan-content:hover .perks .perk .service-description,.service-plans .plan-content:hover .perks .perk .check-icon{color:#fff}\n"] }]
|
|
20
20
|
}], ctorParameters: function () { return []; }, propDecorators: { servicePlans: [{
|
|
21
21
|
type: Input
|
|
22
22
|
}] } });
|
|
@@ -101,10 +101,10 @@ class AchievementsComponent {
|
|
|
101
101
|
ngOnInit() { }
|
|
102
102
|
}
|
|
103
103
|
AchievementsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
104
|
-
AchievementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AchievementsComponent, selector: "achievements", inputs: { achievements: "achievements", blueBg: "blueBg" }, ngImport: i0, template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': blueBg}\">\n <div class=\"content\">\n <div>\n <section-title [title]=\"achievements.title\" [subtitle]=\"achievements.subtitle\"\n [isDarkBg]=\"blueBg\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of achievements.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;background-
|
|
104
|
+
AchievementsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AchievementsComponent, selector: "achievements", inputs: { achievements: "achievements", blueBg: "blueBg" }, ngImport: i0, template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': blueBg}\">\n <div class=\"content\">\n <div>\n <section-title [title]=\"achievements.title\" [subtitle]=\"achievements.subtitle\"\n [isDarkBg]=\"blueBg\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of achievements.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;background-image:linear-gradient(88.83deg,#155ED4 3.16%,#0F2844 97.43%);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-color:linear-gradient(88.83deg,#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: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
|
|
105
105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AchievementsComponent, decorators: [{
|
|
106
106
|
type: Component,
|
|
107
|
-
args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': blueBg}\">\n <div class=\"content\">\n <div>\n <section-title [title]=\"achievements.title\" [subtitle]=\"achievements.subtitle\"\n [isDarkBg]=\"blueBg\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of achievements.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;background-
|
|
107
|
+
args: [{ selector: 'achievements', template: "<div class=\"achievements\" [ngClass]=\"{'blue-background': blueBg}\">\n <div class=\"content\">\n <div>\n <section-title [title]=\"achievements.title\" [subtitle]=\"achievements.subtitle\"\n [isDarkBg]=\"blueBg\"></section-title>\n </div>\n <div class=\"achievements-cards\">\n <div class=\"achievement-card\" *ngFor=\"let achievement of achievements.achievements\">\n <div class=\"number\">\n {{achievement.number}}\n </div>\n <div class=\"subtitle\">\n {{achievement.subtitle}}\n </div>\n </div>\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.achievements{display:grid;row-gap:2rem;margin:auto;width:100%}.achievements .content{margin:auto;width:90%}@media only screen and (min-width: 1500px){.achievements .content{width:150rem}}.achievements .achievements-cards{display:flex;flex-wrap:wrap;justify-content:center;width:100%;margin:2rem 0rem;row-gap:4rem;column-gap:1rem}.achievements .achievements-cards .achievement-card{display:grid;grid-template-rows:6rem auto;margin:auto;padding:1rem;width:30rem;min-width:23%;height:12rem;background-image:linear-gradient(88.83deg,#155ED4 3.16%,#0F2844 97.43%);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-color:linear-gradient(88.83deg,#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"] }]
|
|
108
108
|
}], ctorParameters: function () { return []; }, propDecorators: { achievements: [{
|
|
109
109
|
type: Input
|
|
110
110
|
}], blueBg: [{
|
|
@@ -120,10 +120,10 @@ class PricingPlansComponent {
|
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
122
|
PricingPlansComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
123
|
-
PricingPlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlans: "servicePlans" }, ngImport: i0, template: "<div class=\"service-plans\">\n <div class=\"plan-content\" *ngFor=\"let plan of servicePlans\">\n <div class=\"title-price-desc\">\n <h1 class=\"plan-title\">\n {{plan.name}}\n </h1>\n <div class=\"price\" *ngIf=\"plan.price\">\n <span class=\"service-price\">$ {{plan.price}}</span>\n <span>/{{plan.frequency}}</span>\n </div>\n <div class=\"description\">\n {{plan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of plan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button class=\"button\">\n Choose Plan\n </button>\n </div>\n </div>\n</div>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-plans{display:flex;flex-wrap:wrap;justify-content:center;margin-top:4rem;width:90%;margin:1rem 5%;gap:1.5rem}.service-plans .service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.service-plans .plan-content{display:grid;grid-template-rows:auto auto auto;width:
|
|
123
|
+
PricingPlansComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlans: "servicePlans" }, ngImport: i0, template: "<div class=\"service-plans\">\n <div class=\"plan-content\" *ngFor=\"let plan of servicePlans\">\n <div class=\"title-price-desc\">\n <h1 class=\"plan-title\">\n {{plan.name}}\n </h1>\n <div class=\"price\" *ngIf=\"plan.price\">\n <span class=\"service-price\">$ {{plan.price}}</span>\n <span>/{{plan.frequency}}</span>\n </div>\n <div class=\"description\">\n {{plan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of plan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button class=\"button\">\n Choose Plan\n </button>\n </div>\n </div>\n</div>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-plans{display:flex;flex-wrap:wrap;justify-content:center;margin-top:4rem;width:90%;margin:1rem 5%;gap:1.5rem}.service-plans .service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.service-plans .plan-content{display:grid;grid-template-rows:auto auto auto;width:20%;background:#FFFFFF;border-radius:1rem;padding:3rem 2rem;min-height:30rem;max-height:60rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem}@media only screen and (max-width: 75em){.service-plans .plan-content{width:30rem}}.service-plans .plan-content .title-price-desc .divider{width:95%;border:.1rem solid #32353B;margin:1rem auto}.service-plans .plan-content .plan-title{grid-row:1;color:#1049a6;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem}.service-plans .plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem}.service-plans .plan-content .perks{display:grid;row-gap:.5rem}.service-plans .plan-content .perks .perk{display:flex}.service-plans .plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#36393fe8;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.service-plans .plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer}.service-plans .plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.service-plans .plan-content .registration-button{display:flex;padding:1rem 0rem}.service-plans .plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;border:#1049a6 solid .1rem;color:#1049a6;width:100%}.service-plans .plan-content:hover{background-color:#155ed4;color:#fff}.service-plans .plan-content:hover .plan-title,.service-plans .plan-content:hover .description,.service-plans .plan-content:hover .service .service-description{color:#fff}.service-plans .plan-content:hover .title-price-desc .divider{border:.1rem solid #ffffff}.service-plans .plan-content:hover .perks .perk .service-description,.service-plans .plan-content:hover .perks .perk .check-icon{color:#fff}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
|
|
124
124
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PricingPlansComponent, decorators: [{
|
|
125
125
|
type: Component,
|
|
126
|
-
args: [{ selector: 'pricing-plans', template: "<div class=\"service-plans\">\n <div class=\"plan-content\" *ngFor=\"let plan of servicePlans\">\n <div class=\"title-price-desc\">\n <h1 class=\"plan-title\">\n {{plan.name}}\n </h1>\n <div class=\"price\" *ngIf=\"plan.price\">\n <span class=\"service-price\">$ {{plan.price}}</span>\n <span>/{{plan.frequency}}</span>\n </div>\n <div class=\"description\">\n {{plan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of plan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button class=\"button\">\n Choose Plan\n </button>\n </div>\n </div>\n</div>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-plans{display:flex;flex-wrap:wrap;justify-content:center;margin-top:4rem;width:90%;margin:1rem 5%;gap:1.5rem}.service-plans .service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.service-plans .plan-content{display:grid;grid-template-rows:auto auto auto;width:
|
|
126
|
+
args: [{ selector: 'pricing-plans', template: "<div class=\"service-plans\">\n <div class=\"plan-content\" *ngFor=\"let plan of servicePlans\">\n <div class=\"title-price-desc\">\n <h1 class=\"plan-title\">\n {{plan.name}}\n </h1>\n <div class=\"price\" *ngIf=\"plan.price\">\n <span class=\"service-price\">$ {{plan.price}}</span>\n <span>/{{plan.frequency}}</span>\n </div>\n <div class=\"description\">\n {{plan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of plan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button class=\"button\">\n Choose Plan\n </button>\n </div>\n </div>\n</div>", styles: ["@import\"~@angular/material/prebuilt-themes/indigo-pink.css\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";@import\"~@ng-select/ng-select/themes/material.theme.css\";@import\"~primeng/resources/themes/saga-blue/theme.css\";@import\"~primeng/resources/primeng.min.css\";@import\"~primeicons/primeicons.css\";@import\"~ag-grid-community/styles/ag-grid.css\";@import\"~ag-grid-community/styles/ag-theme-material.css\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-plans{display:flex;flex-wrap:wrap;justify-content:center;margin-top:4rem;width:90%;margin:1rem 5%;gap:1.5rem}.service-plans .service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.service-plans .plan-content{display:grid;grid-template-rows:auto auto auto;width:20%;background:#FFFFFF;border-radius:1rem;padding:3rem 2rem;min-height:30rem;max-height:60rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem}@media only screen and (max-width: 75em){.service-plans .plan-content{width:30rem}}.service-plans .plan-content .title-price-desc .divider{width:95%;border:.1rem solid #32353B;margin:1rem auto}.service-plans .plan-content .plan-title{grid-row:1;color:#1049a6;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem}.service-plans .plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem}.service-plans .plan-content .perks{display:grid;row-gap:.5rem}.service-plans .plan-content .perks .perk{display:flex}.service-plans .plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#36393fe8;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.service-plans .plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer}.service-plans .plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.service-plans .plan-content .registration-button{display:flex;padding:1rem 0rem}.service-plans .plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;border:#1049a6 solid .1rem;color:#1049a6;width:100%}.service-plans .plan-content:hover{background-color:#155ed4;color:#fff}.service-plans .plan-content:hover .plan-title,.service-plans .plan-content:hover .description,.service-plans .plan-content:hover .service .service-description{color:#fff}.service-plans .plan-content:hover .title-price-desc .divider{border:.1rem solid #ffffff}.service-plans .plan-content:hover .perks .perk .service-description,.service-plans .plan-content:hover .perks .perk .check-icon{color:#fff}\n"] }]
|
|
127
127
|
}], ctorParameters: function () { return []; }, propDecorators: { servicePlans: [{
|
|
128
128
|
type: Input
|
|
129
129
|
}] } });
|
|
@@ -295,10 +295,10 @@ class PageSectionStyleThirteenComponent {
|
|
|
295
295
|
}
|
|
296
296
|
}
|
|
297
297
|
PageSectionStyleThirteenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
298
|
-
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionContent: "sectionContent", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\"\n [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/
|
|
298
|
+
PageSectionStyleThirteenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageSectionStyleThirteenComponent, selector: "page-section-style-thirteen", inputs: { sectionContent: "sectionContent", items: "items", iconType: "iconType", isTwoImages: "isTwoImages" }, ngImport: i0, template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\"\n [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.why-choose-us{display:grid;grid-template-columns:48% 48%;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:100%}.why-choose-us .items{display:grid;gap:2.5rem}.why-choose-us .hovered-item{background-color:#155ed4;box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#f1f1f1}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}.why-choose-us .item:hover{box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:1.8rem;align-self:top}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap;row-gap:2%}.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 1s;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: ["title", "subtitle", "alignLeft", "isDarkBg"] }] });
|
|
299
299
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageSectionStyleThirteenComponent, decorators: [{
|
|
300
300
|
type: Component,
|
|
301
|
-
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\"\n [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/
|
|
301
|
+
args: [{ selector: 'page-section-style-thirteen', template: "<div class=\"why-choose-us\">\n <div class=\"left-side\">\n <div class=\"headline\">\n <section-title [title]=\"sectionContent.title\" [subtitle]=\"sectionContent.subtitle\"\n [alignLeft]=\"true\"></section-title>\n </div>\n <div class=\"items\">\n <div class=\"item\" *ngFor=\"let item of items; let i=index\" [ngClass]=\"{'hovered-item': isItemHovered[i]}\"\n (click)=\"onClickChangeImage(item.image, i)\">\n <div class=\"left-column\">\n\n <div class=\"square-row\" [ngSwitch]=\"iconType\"\n [ngClass]=\"{'square-row':iconType == pageSectionStyleThirteen.SHAPE_ICON,'shape-column':iconType == pageSectionStyleThirteen.IMAGE_ICON}\">\n <div class=\"square\" *ngSwitchCase=\"pageSectionStyleThirteen.SHAPE_ICON\"></div>\n <div class=\"shape\" *ngSwitchCase=\"pageSectionStyleThirteen.IMAGE_ICON\">\n <img [src]=\"item.icon\" alt=\"\">\n </div>\n </div>\n <div></div>\n </div>\n <div class=\"right-column\">\n <div class=\"item-title\">{{item.title}}</div>\n <div class=\"item-description\"\n [ngClass]=\"{'hide-description':!isItemHovered[i] , 'show-description':isItemHovered[i] }\">\n {{item.description}}</div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"right-side\" [ngClass]=\"{'two-images-preview':isTwoImages}\">\n <div class=\"image-container\">\n <img [src]=\"showedImage\" alt=\"\">\n </div>\n <div class=\"back-image\" *ngIf=\"isTwoImages\">\n <img src=\"https://i.ibb.co/mqtpD50/blue-points-section.png\" alt=\"\">\n </div>\n </div>\n</div>", styles: ["@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\";*{padding:0;margin:0}html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-family:sans-serif;font-size:1.6rem}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.why-choose-us{display:grid;grid-template-columns:48% 48%;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:100%}.why-choose-us .items{display:grid;gap:2.5rem}.why-choose-us .hovered-item{background-color:#155ed4;box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .hovered-item .left-column .square-row{background-color:#fff}.why-choose-us .hovered-item .left-column .square-row .square{background-color:#155ed4;border-radius:50%}.why-choose-us .hovered-item .shape-column{background-color:#32353b}.why-choose-us .hovered-item .right-column .item-title{color:#fff}.why-choose-us .hovered-item .right-column .item-description{color:#f1f1f1}.why-choose-us .item{gap:1.5rem;display:grid;grid-template-columns:auto calc(100% - 5.5rem);cursor:pointer;border-radius:1.5rem;padding:2rem;transition:all ease-in-out .2s}.why-choose-us .item:hover{box-shadow:.1rem .2rem .5rem .1rem #0000003d}.why-choose-us .left-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .left-column .square-row{align-self:center;width:4rem;height:4rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .left-column .square-row .square{width:3rem;height:3rem;background-color:#155ed4;border-radius:.5rem;transition:border-radius ease-in-out .2s}.why-choose-us .shape-column{width:5rem;height:5rem;background-color:#155ed4;display:grid;place-content:center;border-radius:.5rem;font-size:3.4rem}.why-choose-us .shape-column .shape{padding:1rem;display:grid}.why-choose-us .shape-column .shape img{width:100%}.why-choose-us .right-column{display:grid;grid-template-rows:5rem auto}.why-choose-us .right-column .item-title{color:#2f3136;font-weight:600;font-size:1.8rem;align-self:top}.why-choose-us .right-column .item-description{color:#848484;font-size:1.6rem;font-weight:500}.why-choose-us .left-side .headline{padding-bottom:3rem}.why-choose-us .right-side{display:grid;justify-content:right}.why-choose-us .right-side .image-container{width:100%;border-radius:1.5rem 0 0 1.5rem;object-fit:cover;overflow:hidden;height:80rem}.why-choose-us .right-side .image-container img{height:100%;transition:all ease-in-out .2s;object-fit:cover}.why-choose-us .two-images-preview{place-content:center;position:relative}.why-choose-us .two-images-preview .image-container{width:90%;height:65rem;border-radius:1.5rem}.why-choose-us .two-images-preview .image-container img{width:100%}.why-choose-us .two-images-preview .back-image{width:50%;height:20rem;position:absolute;display:grid;align-content:end;justify-content:right;top:0;right:0;z-index:-1}@media only screen and (max-width: 75em){.why-choose-us{width:90%;margin:auto;display:flex;flex-direction:column;flex-wrap:wrap;row-gap:2%}.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 1s;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"] }]
|
|
302
302
|
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
303
303
|
type: Input
|
|
304
304
|
}], items: [{
|