@jooler/jooler-websites-shared 0.0.236 → 0.0.238
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 → esm2022}/jooler-websites-shared.mjs +4 -4
- package/esm2022/lib/achievements/achievements.component.mjs +18 -0
- package/esm2022/lib/auth-route-directive.mjs +42 -0
- package/esm2022/lib/call-to-action-section/call-to-action-section.component.mjs +29 -0
- package/esm2022/lib/call-to-action-section-two/call-to-action-section-two.component.mjs +25 -0
- package/esm2022/lib/choose-country-with-flag/choose-country-with-flag.component.mjs +56 -0
- package/esm2022/lib/coming-soon/coming-soon.component.mjs +20 -0
- package/esm2022/lib/contact-us-page/contact-us-page.component.mjs +144 -0
- package/esm2022/lib/cta-section-style-four/cta-section-style-four.component.mjs +35 -0
- package/esm2022/lib/cta-section-style-three/cta-section-style-three.component.mjs +23 -0
- package/esm2022/lib/custom-tooltip/custom-tooltip.component.mjs +23 -0
- package/esm2022/lib/get-started-cta/get-started-cta.component.mjs +24 -0
- package/esm2022/lib/header-section-one/header-section-one.component.mjs +25 -0
- package/esm2022/lib/image-gallery-modal/image-gallery-modal.component.mjs +134 -0
- package/esm2022/lib/jooler-websites-shared.module.mjs +208 -0
- package/{esm2020 → esm2022}/lib/models/about-us-section.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/models/account-type.model.mjs +8 -8
- package/esm2022/lib/models/account.model.mjs +14 -0
- package/{esm2020 → esm2022}/lib/models/achievement.model.mjs +5 -3
- package/esm2022/lib/models/achievements.model.mjs +5 -0
- package/esm2022/lib/models/address.model.mjs +16 -0
- package/{esm2020 → esm2022}/lib/models/brand-logo.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/models/call-to-action-data.model.mjs +1 -1
- package/esm2022/lib/models/call-to-action-section-two.model.mjs +7 -0
- package/{esm2020 → esm2022}/lib/models/call-to-action-style.model.mjs +1 -1
- package/esm2022/lib/models/city.model.mjs +6 -0
- package/esm2022/lib/models/country.model.mjs +10 -0
- package/{esm2020 → esm2022}/lib/models/cta-cards.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/models/cta-one-type.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/models/cta-section-style-four.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/models/feature-section-nine.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/models/gallery-items-properties.model.mjs +1 -1
- package/esm2022/lib/models/get-started-cta.model.mjs +7 -0
- package/{esm2020 → esm2022}/lib/models/header-section-style-one.model.mjs +1 -1
- package/esm2022/lib/models/image-section-action.model.mjs +8 -0
- package/esm2022/lib/models/image-section.model.mjs +11 -0
- package/{esm2020 → esm2022}/lib/models/image-with-content.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/models/library-product-type.model.mjs +6 -6
- package/esm2022/lib/models/page-section-action.model.mjs +8 -0
- package/{esm2020 → esm2022}/lib/models/page-section-style-thirteen.model.mjs +5 -5
- package/{esm2020 → esm2022}/lib/models/page-section-style-three.model.mjs +1 -1
- package/esm2022/lib/models/page-section.model.mjs +11 -0
- package/{esm2020 → esm2022}/lib/models/page-style-section-five.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/models/perks.model.mjs +5 -3
- package/{esm2020 → esm2022}/lib/models/section-title-sizes.model.mjs +6 -6
- package/esm2022/lib/models/section-title.model.mjs +17 -0
- package/esm2022/lib/models/service-plan.model.mjs +11 -0
- package/esm2022/lib/models/team-member.model.mjs +7 -0
- package/esm2022/lib/models/team-section.model.mjs +6 -0
- package/{esm2020 → esm2022}/lib/models/user-type.model.mjs +7 -7
- package/esm2022/lib/models/user.model.mjs +11 -0
- package/{esm2020 → esm2022}/lib/models/value-prop-properties.model.mjs +1 -1
- package/{esm2020 → esm2022}/lib/models/vertical-side-tab.model.mjs +1 -1
- package/esm2022/lib/our-client-listing/our-client-listing.component.mjs +18 -0
- package/esm2022/lib/our-clients/our-clients.component.mjs +57 -0
- package/esm2022/lib/page-section-style-ten/page-section-style-ten.component.mjs +35 -0
- package/esm2022/lib/page-section-style-thirteen/page-section-style-thirteen.component.mjs +46 -0
- package/esm2022/lib/page-section-style-three/page-section-style-three.component.mjs +26 -0
- package/esm2022/lib/page-section-with-multiple-cards/page-section-with-multiple-cards.component.mjs +26 -0
- package/esm2022/lib/pricing-plans/pricing-plans.component.mjs +22 -0
- package/esm2022/lib/section-title/section-title.component.mjs +23 -0
- package/esm2022/lib/services/user.service.mjs +36 -0
- package/esm2022/lib/social-media-icons/social-media-icons.component.mjs +44 -0
- package/esm2022/lib/social-media-icons/social-media-links.model.mjs +7 -0
- package/esm2022/lib/success-message-dialog/success-message-dialog.component.mjs +24 -0
- package/esm2022/lib/team/team.component.mjs +55 -0
- package/esm2022/lib/value-prop-card/value-prop-card.component.mjs +44 -0
- package/esm2022/lib/value-props-section/value-props-section.component.mjs +35 -0
- package/esm2022/lib/values/values.component.mjs +48 -0
- package/esm2022/lib/vertical-side-tabs/vertical-side-tabs.component.mjs +33 -0
- package/{esm2020 → esm2022}/public-api.mjs +64 -64
- package/fesm2022/jooler-websites-shared.mjs +1417 -0
- package/fesm2022/jooler-websites-shared.mjs.map +1 -0
- package/index.d.ts +5 -5
- package/lib/achievements/achievements.component.d.ts +10 -10
- package/lib/auth-route-directive.d.ts +14 -14
- package/lib/call-to-action-section/call-to-action-section.component.d.ts +11 -11
- package/lib/call-to-action-section-two/call-to-action-section-two.component.d.ts +13 -13
- package/lib/choose-country-with-flag/choose-country-with-flag.component.d.ts +19 -19
- package/lib/coming-soon/coming-soon.component.d.ts +8 -8
- package/lib/contact-us-page/contact-us-page.component.d.ts +50 -50
- package/lib/cta-section-style-four/cta-section-style-four.component.d.ts +12 -12
- package/lib/cta-section-style-three/cta-section-style-three.component.d.ts +12 -13
- package/lib/custom-tooltip/custom-tooltip.component.d.ts +9 -9
- package/lib/get-started-cta/get-started-cta.component.d.ts +13 -13
- package/lib/header-section-one/header-section-one.component.d.ts +11 -11
- package/lib/image-gallery-modal/image-gallery-modal.component.d.ts +27 -27
- package/lib/jooler-websites-shared.module.d.ts +44 -43
- package/lib/models/about-us-section.model.d.ts +6 -6
- package/lib/models/account-type.model.d.ts +7 -7
- package/lib/models/account.model.d.ts +16 -16
- package/lib/models/achievement.model.d.ts +4 -4
- package/lib/models/achievements.model.d.ts +6 -6
- package/lib/models/address.model.d.ts +18 -18
- package/lib/models/brand-logo.model.d.ts +4 -4
- package/lib/models/call-to-action-data.model.d.ts +17 -17
- package/lib/models/call-to-action-section-two.model.d.ts +6 -6
- package/lib/models/call-to-action-style.model.d.ts +16 -16
- package/lib/models/city.model.d.ts +5 -5
- package/lib/models/country.model.d.ts +9 -9
- package/lib/models/cta-cards.model.d.ts +7 -7
- package/lib/models/cta-one-type.model.d.ts +15 -15
- package/lib/models/cta-section-style-four.model.d.ts +8 -8
- package/lib/models/feature-section-nine.model.d.ts +6 -6
- package/lib/models/gallery-items-properties.model.d.ts +6 -6
- package/lib/models/get-started-cta.model.d.ts +8 -8
- package/lib/models/header-section-style-one.model.d.ts +16 -16
- package/lib/models/image-section-action.model.d.ts +8 -8
- package/lib/models/image-section.model.d.ts +12 -12
- package/lib/models/image-with-content.model.d.ts +5 -5
- package/lib/models/library-product-type.model.d.ts +5 -5
- package/lib/models/page-section-action.model.d.ts +8 -8
- package/lib/models/page-section-style-thirteen.model.d.ts +4 -4
- package/lib/models/page-section-style-three.model.d.ts +8 -8
- package/lib/models/page-section.model.d.ts +11 -11
- package/lib/models/page-style-section-five.model.d.ts +11 -11
- package/lib/models/perks.model.d.ts +4 -4
- package/lib/models/section-title-sizes.model.d.ts +5 -5
- package/lib/models/section-title.model.d.ts +10 -10
- package/lib/models/service-plan.model.d.ts +12 -12
- package/lib/models/team-member.model.d.ts +6 -6
- package/lib/models/team-section.model.d.ts +7 -7
- package/lib/models/user-type.model.d.ts +6 -6
- package/lib/models/user.model.d.ts +11 -11
- package/lib/models/value-prop-properties.model.d.ts +11 -11
- package/lib/models/vertical-side-tab.model.d.ts +6 -6
- package/lib/our-client-listing/our-client-listing.component.d.ts +10 -10
- package/lib/our-clients/our-clients.component.d.ts +15 -15
- package/lib/page-section-style-ten/page-section-style-ten.component.d.ts +15 -15
- package/lib/page-section-style-thirteen/page-section-style-thirteen.component.d.ts +21 -21
- package/lib/page-section-style-three/page-section-style-three.component.d.ts +13 -13
- package/lib/page-section-with-multiple-cards/page-section-with-multiple-cards.component.d.ts +12 -12
- package/lib/pricing-plans/pricing-plans.component.d.ts +10 -10
- package/lib/section-title/section-title.component.d.ts +11 -11
- package/lib/services/user.service.d.ts +15 -15
- package/lib/social-media-icons/social-media-icons.component.d.ts +20 -20
- package/lib/social-media-icons/social-media-links.model.d.ts +6 -6
- package/lib/success-message-dialog/success-message-dialog.component.d.ts +11 -11
- package/lib/team/team.component.d.ts +18 -18
- package/lib/value-prop-card/value-prop-card.component.d.ts +15 -15
- package/lib/value-props-section/value-props-section.component.d.ts +11 -11
- package/lib/values/values.component.d.ts +16 -16
- package/lib/vertical-side-tabs/vertical-side-tabs.component.d.ts +14 -14
- package/package.json +5 -11
- package/public-api.d.ts +61 -61
- package/esm2020/lib/achievements/achievements.component.mjs +0 -17
- package/esm2020/lib/auth-route-directive.mjs +0 -37
- package/esm2020/lib/call-to-action-section/call-to-action-section.component.mjs +0 -28
- package/esm2020/lib/call-to-action-section-two/call-to-action-section-two.component.mjs +0 -23
- package/esm2020/lib/choose-country-with-flag/choose-country-with-flag.component.mjs +0 -55
- package/esm2020/lib/coming-soon/coming-soon.component.mjs +0 -22
- package/esm2020/lib/contact-us-page/contact-us-page.component.mjs +0 -129
- package/esm2020/lib/cta-section-style-four/cta-section-style-four.component.mjs +0 -32
- package/esm2020/lib/cta-section-style-three/cta-section-style-three.component.mjs +0 -25
- package/esm2020/lib/custom-tooltip/custom-tooltip.component.mjs +0 -22
- package/esm2020/lib/get-started-cta/get-started-cta.component.mjs +0 -22
- package/esm2020/lib/header-section-one/header-section-one.component.mjs +0 -23
- package/esm2020/lib/image-gallery-modal/image-gallery-modal.component.mjs +0 -132
- package/esm2020/lib/jooler-websites-shared.module.mjs +0 -204
- package/esm2020/lib/models/account.model.mjs +0 -3
- package/esm2020/lib/models/achievements.model.mjs +0 -3
- package/esm2020/lib/models/address.model.mjs +0 -3
- package/esm2020/lib/models/call-to-action-section-two.model.mjs +0 -3
- package/esm2020/lib/models/city.model.mjs +0 -3
- package/esm2020/lib/models/country.model.mjs +0 -3
- package/esm2020/lib/models/get-started-cta.model.mjs +0 -3
- package/esm2020/lib/models/image-section-action.model.mjs +0 -3
- package/esm2020/lib/models/image-section.model.mjs +0 -3
- package/esm2020/lib/models/page-section-action.model.mjs +0 -3
- package/esm2020/lib/models/page-section.model.mjs +0 -3
- package/esm2020/lib/models/section-title.model.mjs +0 -11
- package/esm2020/lib/models/service-plan.model.mjs +0 -3
- package/esm2020/lib/models/team-member.model.mjs +0 -3
- package/esm2020/lib/models/team-section.model.mjs +0 -3
- package/esm2020/lib/models/user.model.mjs +0 -3
- package/esm2020/lib/our-client-listing/our-client-listing.component.mjs +0 -17
- package/esm2020/lib/our-clients/our-clients.component.mjs +0 -54
- package/esm2020/lib/page-section-style-ten/page-section-style-ten.component.mjs +0 -33
- package/esm2020/lib/page-section-style-thirteen/page-section-style-thirteen.component.mjs +0 -43
- package/esm2020/lib/page-section-style-three/page-section-style-three.component.mjs +0 -24
- package/esm2020/lib/page-section-with-multiple-cards/page-section-with-multiple-cards.component.mjs +0 -24
- package/esm2020/lib/pricing-plans/pricing-plans.component.mjs +0 -21
- package/esm2020/lib/section-title/section-title.component.mjs +0 -22
- package/esm2020/lib/services/user.service.mjs +0 -35
- package/esm2020/lib/social-media-icons/social-media-icons.component.mjs +0 -40
- package/esm2020/lib/social-media-icons/social-media-links.model.mjs +0 -3
- package/esm2020/lib/success-message-dialog/success-message-dialog.component.mjs +0 -22
- package/esm2020/lib/team/team.component.mjs +0 -52
- package/esm2020/lib/value-prop-card/value-prop-card.component.mjs +0 -39
- package/esm2020/lib/value-props-section/value-props-section.component.mjs +0 -33
- package/esm2020/lib/values/values.component.mjs +0 -43
- package/esm2020/lib/vertical-side-tabs/vertical-side-tabs.component.mjs +0 -33
- package/fesm2015/jooler-websites-shared.mjs +0 -1242
- package/fesm2015/jooler-websites-shared.mjs.map +0 -1
- package/fesm2020/jooler-websites-shared.mjs +0 -1242
- package/fesm2020/jooler-websites-shared.mjs.map +0 -1
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "@fortawesome/angular-fontawesome";
|
|
4
|
+
import * as i2 from "@angular/common";
|
|
5
|
+
import * as i3 from "@angular/material/button";
|
|
6
|
+
import * as i4 from "@angular/material/tooltip";
|
|
7
|
+
import * as i5 from "../auth-route-directive";
|
|
8
|
+
export class PricingPlansComponent {
|
|
9
|
+
servicePlan;
|
|
10
|
+
constructor() { }
|
|
11
|
+
ngOnInit() {
|
|
12
|
+
}
|
|
13
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PricingPlansComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlan: "servicePlan" }, ngImport: i0, template: "<div class=\"plan-content\">\r\n <div class=\"title-price-desc\">\r\n <h1 class=\"plan-title\">\r\n {{servicePlan.name}}\r\n </h1>\r\n <div class=\"price\" *ngIf=\"servicePlan.price\">\r\n <span class=\"service-price\">{{servicePlan.price|currency}}</span>\r\n <span>/{{servicePlan.frequency}}</span>\r\n </div>\r\n <div class=\"description\">\r\n {{servicePlan.description}}\r\n </div>\r\n <div class=\"divider\"></div>\r\n </div>\r\n <div class=\"perks\">\r\n <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\r\n <span class=\"check-icon\">\r\n <fa-icon icon=\"check\"></fa-icon>\r\n </span>\r\n <div class=\"service-description\">\r\n <div class=\"service-perk\">\r\n {{perk.perk}}\r\n </div>\r\n <span class=\"exclamation-mark\">\r\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\r\n icon=\"circle-exclamation\"></fa-icon>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"registration-button\">\r\n <button mat-raised-button [requireAuth]=\"servicePlan.button.requiresAuth\"\r\n [targetRoute]=\"servicePlan.button.route\" authRoute [navigationExtras]=\"servicePlan.button.navigationExtras\"\r\n class=\"button\">\r\n {{servicePlan.button.label}}\r\n </button>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.plan-content{display:flex;flex-direction:column;width:20%;background:#fff;border-radius:1rem;padding:3rem 2rem;min-width:33rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%;margin:auto}@media only screen and (max-width: 552px){.plan-content{min-width:60%}}@media only screen and (max-width: 75em){.plan-content{width:33rem}}@media only screen and (max-width: 620px){.plan-content{width:90%;height:99%}}.plan-content .title-price-desc{height:22rem}.plan-content .title-price-desc .divider{width:90%;border:.1rem solid #155ED4;margin:1rem auto}.plan-content .plan-title{grid-row:1;color:#155ed4;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem;text-align:center}.plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem;text-align:center;height:8rem}.plan-content .perks{display:flex;row-gap:.5rem;height:100%;align-items:flex-start;flex-direction:column}.plan-content .perks .perk{display:flex;align-items:center;width:100%}.plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#32353b;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer;color:#32353b}.plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.plan-content .registration-button{display:flex;padding:1rem 0rem;height:100%}.plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;background-color:#155ed4;color:#fff;width:100%}\n"], dependencies: [{ kind: "component", type: 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-flat-button], button[mat-stroked-button] ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5.AuthRouteDirective, selector: "[authRoute]", inputs: ["targetRoute", "requireAuth", "navigationExtras"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }] });
|
|
15
|
+
}
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PricingPlansComponent, decorators: [{
|
|
17
|
+
type: Component,
|
|
18
|
+
args: [{ selector: 'pricing-plans', template: "<div class=\"plan-content\">\r\n <div class=\"title-price-desc\">\r\n <h1 class=\"plan-title\">\r\n {{servicePlan.name}}\r\n </h1>\r\n <div class=\"price\" *ngIf=\"servicePlan.price\">\r\n <span class=\"service-price\">{{servicePlan.price|currency}}</span>\r\n <span>/{{servicePlan.frequency}}</span>\r\n </div>\r\n <div class=\"description\">\r\n {{servicePlan.description}}\r\n </div>\r\n <div class=\"divider\"></div>\r\n </div>\r\n <div class=\"perks\">\r\n <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\r\n <span class=\"check-icon\">\r\n <fa-icon icon=\"check\"></fa-icon>\r\n </span>\r\n <div class=\"service-description\">\r\n <div class=\"service-perk\">\r\n {{perk.perk}}\r\n </div>\r\n <span class=\"exclamation-mark\">\r\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\r\n icon=\"circle-exclamation\"></fa-icon>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"registration-button\">\r\n <button mat-raised-button [requireAuth]=\"servicePlan.button.requiresAuth\"\r\n [targetRoute]=\"servicePlan.button.route\" authRoute [navigationExtras]=\"servicePlan.button.navigationExtras\"\r\n class=\"button\">\r\n {{servicePlan.button.label}}\r\n </button>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.service-suggestion{display:flex;justify-content:center;align-items:top;font-weight:650;font-size:2.4rem;height:2rem;color:#32353b;margin-bottom:2.5rem}.plan-content{display:flex;flex-direction:column;width:20%;background:#fff;border-radius:1rem;padding:3rem 2rem;min-width:33rem;row-gap:.5rem;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%;margin:auto}@media only screen and (max-width: 552px){.plan-content{min-width:60%}}@media only screen and (max-width: 75em){.plan-content{width:33rem}}@media only screen and (max-width: 620px){.plan-content{width:90%;height:99%}}.plan-content .title-price-desc{height:22rem}.plan-content .title-price-desc .divider{width:90%;border:.1rem solid #155ED4;margin:1rem auto}.plan-content .plan-title{grid-row:1;color:#155ed4;text-transform:uppercase;font-weight:700;font-size:2.5rem;padding:1rem 0rem;text-align:center}.plan-content .description{color:#32353b;font-size:1.2rem;padding:1rem 0rem;text-align:center;height:8rem}.plan-content .perks{display:flex;row-gap:.5rem;height:100%;align-items:flex-start;flex-direction:column}.plan-content .perks .perk{display:flex;align-items:center;width:100%}.plan-content .perks .perk .service-description{align-items:center;font-weight:600;font-size:1.3rem;margin-left:1rem;color:#32353b;overflow:hidden;text-overflow:ellipsis;display:flex;flex-direction:row;justify-content:space-between;width:100%}.plan-content .perks .perk .service-description .exclamation-mark{cursor:pointer;color:#32353b}.plan-content .service-price{font-weight:800;font-size:4.2rem;text-align:center}.plan-content .registration-button{display:flex;padding:1rem 0rem;height:100%}.plan-content .registration-button .button{align-self:flex-end;font-weight:600;width:85%;background-color:#155ed4;color:#fff;width:100%}\n"] }]
|
|
19
|
+
}], ctorParameters: function () { return []; }, propDecorators: { servicePlan: [{
|
|
20
|
+
type: Input
|
|
21
|
+
}] } });
|
|
22
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJpY2luZy1wbGFucy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9qb29sZXItd2Vic2l0ZXMtc2hhcmVkL3NyYy9saWIvcHJpY2luZy1wbGFucy9wcmljaW5nLXBsYW5zLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9wcmljaW5nLXBsYW5zL3ByaWNpbmctcGxhbnMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7QUFRekQsTUFBTSxPQUFPLHFCQUFxQjtJQUN2QixXQUFXLENBQWM7SUFDbEMsZ0JBQWdCLENBQUM7SUFFakIsUUFBUTtJQUNSLENBQUM7d0dBTFUscUJBQXFCOzRGQUFyQixxQkFBcUIsNkZDUmxDLDhtREFxQ007OzRGRDdCTyxxQkFBcUI7a0JBTGpDLFNBQVM7K0JBQ0UsZUFBZTswRUFLaEIsV0FBVztzQkFBbkIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBTZXJ2aWNlUGxhbiB9IGZyb20gJy4uL21vZGVscy9zZXJ2aWNlLXBsYW4ubW9kZWwnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdwcmljaW5nLXBsYW5zJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vcHJpY2luZy1wbGFucy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vcHJpY2luZy1wbGFucy5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBQcmljaW5nUGxhbnNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgpIHNlcnZpY2VQbGFuOiBTZXJ2aWNlUGxhbjtcclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuICB9XHJcblxyXG5cclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwicGxhbi1jb250ZW50XCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGl0bGUtcHJpY2UtZGVzY1wiPlxyXG4gICAgICAgIDxoMSBjbGFzcz1cInBsYW4tdGl0bGVcIj5cclxuICAgICAgICAgICAge3tzZXJ2aWNlUGxhbi5uYW1lfX1cclxuICAgICAgICA8L2gxPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwcmljZVwiICpuZ0lmPVwic2VydmljZVBsYW4ucHJpY2VcIj5cclxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJzZXJ2aWNlLXByaWNlXCI+e3tzZXJ2aWNlUGxhbi5wcmljZXxjdXJyZW5jeX19PC9zcGFuPlxyXG4gICAgICAgICAgICA8c3Bhbj4ve3tzZXJ2aWNlUGxhbi5mcmVxdWVuY3l9fTwvc3Bhbj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwiZGVzY3JpcHRpb25cIj5cclxuICAgICAgICAgICAge3tzZXJ2aWNlUGxhbi5kZXNjcmlwdGlvbn19XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cImRpdmlkZXJcIj48L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cInBlcmtzXCI+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInBlcmtcIiAqbmdGb3I9XCJsZXQgcGVyayBvZiBzZXJ2aWNlUGxhbi5wZXJrczsgbGV0IHN3aXRjaFN0eWxlID0gaW5kZXhcIj5cclxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJjaGVjay1pY29uXCI+XHJcbiAgICAgICAgICAgICAgICA8ZmEtaWNvbiBpY29uPVwiY2hlY2tcIj48L2ZhLWljb24+XHJcbiAgICAgICAgICAgIDwvc3Bhbj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNlcnZpY2UtZGVzY3JpcHRpb25cIj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzZXJ2aWNlLXBlcmtcIj5cclxuICAgICAgICAgICAgICAgICAgICB7e3BlcmsucGVya319XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZXhjbGFtYXRpb24tbWFya1wiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxmYS1pY29uICN0b29sdGlwPVwibWF0VG9vbHRpcFwiIFttYXRUb29sdGlwXT1cInBlcmsudG9vbHRpcE1lc3NhZ2VcIiBbbWF0VG9vbHRpcFBvc2l0aW9uXT1cIidyaWdodCdcIlxyXG4gICAgICAgICAgICAgICAgICAgICAgICBpY29uPVwiY2lyY2xlLWV4Y2xhbWF0aW9uXCI+PC9mYS1pY29uPlxyXG4gICAgICAgICAgICAgICAgPC9zcGFuPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cInJlZ2lzdHJhdGlvbi1idXR0b25cIj5cclxuICAgICAgICA8YnV0dG9uIG1hdC1yYWlzZWQtYnV0dG9uIFtyZXF1aXJlQXV0aF09XCJzZXJ2aWNlUGxhbi5idXR0b24ucmVxdWlyZXNBdXRoXCJcclxuICAgICAgICAgICAgW3RhcmdldFJvdXRlXT1cInNlcnZpY2VQbGFuLmJ1dHRvbi5yb3V0ZVwiIGF1dGhSb3V0ZSBbbmF2aWdhdGlvbkV4dHJhc109XCJzZXJ2aWNlUGxhbi5idXR0b24ubmF2aWdhdGlvbkV4dHJhc1wiXHJcbiAgICAgICAgICAgIGNsYXNzPVwiYnV0dG9uXCI+XHJcbiAgICAgICAgICAgIHt7c2VydmljZVBsYW4uYnV0dG9uLmxhYmVsfX1cclxuICAgICAgICA8L2J1dHRvbj5cclxuICAgIDwvZGl2PlxyXG48L2Rpdj4iXX0=
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import { SectionTitleSizes } from '../models/section-title-sizes.model';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@angular/common";
|
|
5
|
+
export class SectionTitleComponent {
|
|
6
|
+
sectionTitle;
|
|
7
|
+
sectionTitleSizes = SectionTitleSizes;
|
|
8
|
+
withoutTitleCase;
|
|
9
|
+
descriptionWidth;
|
|
10
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SectionTitleComponent, selector: "section-title", inputs: { sectionTitle: "sectionTitle", withoutTitleCase: "withoutTitleCase", descriptionWidth: "descriptionWidth" }, ngImport: i0, template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider,\r\n'small-font': sectionTitle.fontSizeEnum == sectionTitleSizes.SMALL,\r\n'medium-font': sectionTitle.fontSizeEnum == sectionTitleSizes.MEDIUM || (!sectionTitle.fontSizeEnum),\r\n'large-font': (sectionTitle.fontSizeEnum == sectionTitleSizes.LARGE) }\">\r\n <div class=\"title-container\">\r\n <div class=\"title\" *ngIf=\"sectionTitle.title\">\r\n {{withoutTitleCase? sectionTitle.title : (sectionTitle.title | titlecase)}}\r\n </div>\r\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\r\n </div>\r\n </div>\r\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\"\r\n [ngStyle]=\"descriptionWidth ? {width : descriptionWidth} : null\">\r\n {{sectionTitle.subtitle}}<ng-content></ng-content>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.2rem auto 1rem}.align-center .description{margin:auto;width:90%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:700;width:auto;margin:auto;line-height:normal}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-color:#fff}.dark-background .title,.dark-background .description{color:#fff}.without-divider{display:flex;flex-direction:column;row-gap:3rem}.light-background .divider{background-color:#155ed4}.light-background .title,.light-background .description{color:#32353b}.description{width:85%;font-weight:500}.align-left .title{margin:0}.align-left .divider{margin:.2rem 0 1rem;width:auto}.align-left .description{width:85%;margin:0}.align-left .title-container{margin:0}.large-font .title{font-size:5rem}.large-font .description{font-size:1.8rem}.medium-font .title{font-size:4rem}.medium-font .description{font-size:1.8rem}.small-font .title{font-size:3rem}.small-font .description{font-size:1.6rem}@media only screen and (max-width: 37.5em){.large-font .title,.align-left .title,.align-center .title{font-size:3rem}.large-font .description,.align-left .description,.align-center .description{width:85%;font-size:1.8rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }] });
|
|
12
|
+
}
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SectionTitleComponent, decorators: [{
|
|
14
|
+
type: Component,
|
|
15
|
+
args: [{ selector: 'section-title', template: "<div class=\"section-container\" [ngClass]=\"{'align-left':sectionTitle.alignLeft,'align-center':!sectionTitle.alignLeft,'dark-background':sectionTitle.isDarkBg ,'light-background':!sectionTitle.isDarkBg, 'without-divider':sectionTitle.isWithoutDivider,\r\n'small-font': sectionTitle.fontSizeEnum == sectionTitleSizes.SMALL,\r\n'medium-font': sectionTitle.fontSizeEnum == sectionTitleSizes.MEDIUM || (!sectionTitle.fontSizeEnum),\r\n'large-font': (sectionTitle.fontSizeEnum == sectionTitleSizes.LARGE) }\">\r\n <div class=\"title-container\">\r\n <div class=\"title\" *ngIf=\"sectionTitle.title\">\r\n {{withoutTitleCase? sectionTitle.title : (sectionTitle.title | titlecase)}}\r\n </div>\r\n <div class=\"divider\" *ngIf=\"!sectionTitle.isWithoutDivider\">\r\n </div>\r\n </div>\r\n <div class=\"description\" *ngIf=\"sectionTitle.subtitle\"\r\n [ngStyle]=\"descriptionWidth ? {width : descriptionWidth} : null\">\r\n {{sectionTitle.subtitle}}<ng-content></ng-content>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.section-container{width:100%}.align-center{text-align:center}.align-center .title-container{margin:auto}.align-center .divider{margin:.2rem auto 1rem}.align-center .description{margin:auto;width:90%}.title-container{margin:auto;width:-moz-fit-content;width:fit-content}.title{font-weight:700;width:auto;margin:auto;line-height:normal}.divider{height:.4rem;width:auto;border-radius:4rem}.dark-background .divider{background-color:#fff}.dark-background .title,.dark-background .description{color:#fff}.without-divider{display:flex;flex-direction:column;row-gap:3rem}.light-background .divider{background-color:#155ed4}.light-background .title,.light-background .description{color:#32353b}.description{width:85%;font-weight:500}.align-left .title{margin:0}.align-left .divider{margin:.2rem 0 1rem;width:auto}.align-left .description{width:85%;margin:0}.align-left .title-container{margin:0}.large-font .title{font-size:5rem}.large-font .description{font-size:1.8rem}.medium-font .title{font-size:4rem}.medium-font .description{font-size:1.8rem}.small-font .title{font-size:3rem}.small-font .description{font-size:1.6rem}@media only screen and (max-width: 37.5em){.large-font .title,.align-left .title,.align-center .title{font-size:3rem}.large-font .description,.align-left .description,.align-center .description{width:85%;font-size:1.8rem}}\n"] }]
|
|
16
|
+
}], propDecorators: { sectionTitle: [{
|
|
17
|
+
type: Input
|
|
18
|
+
}], withoutTitleCase: [{
|
|
19
|
+
type: Input
|
|
20
|
+
}], descriptionWidth: [{
|
|
21
|
+
type: Input
|
|
22
|
+
}] } });
|
|
23
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VjdGlvbi10aXRsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9qb29sZXItd2Vic2l0ZXMtc2hhcmVkL3NyYy9saWIvc2VjdGlvbi10aXRsZS9zZWN0aW9uLXRpdGxlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9zZWN0aW9uLXRpdGxlL3NlY3Rpb24tdGl0bGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0scUNBQXFDLENBQUM7OztBQU14RSxNQUFNLE9BQU8scUJBQXFCO0lBQ3ZCLFlBQVksQ0FBZTtJQUNwQyxpQkFBaUIsR0FBRyxpQkFBaUIsQ0FBQztJQUM3QixnQkFBZ0IsQ0FBVTtJQUMxQixnQkFBZ0IsQ0FBVTt3R0FKeEIscUJBQXFCOzRGQUFyQixxQkFBcUIsMktDUmxDLGlpQ0FlTTs7NEZEUE8scUJBQXFCO2tCQUxqQyxTQUFTOytCQUNFLGVBQWU7OEJBS2hCLFlBQVk7c0JBQXBCLEtBQUs7Z0JBRUcsZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgU2VjdGlvblRpdGxlIH0gZnJvbSAnLi4vbW9kZWxzL3NlY3Rpb24tdGl0bGUubW9kZWwnXHJcbmltcG9ydCB7IFNlY3Rpb25UaXRsZVNpemVzIH0gZnJvbSAnLi4vbW9kZWxzL3NlY3Rpb24tdGl0bGUtc2l6ZXMubW9kZWwnO1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NlY3Rpb24tdGl0bGUnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9zZWN0aW9uLXRpdGxlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9zZWN0aW9uLXRpdGxlLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFNlY3Rpb25UaXRsZUNvbXBvbmVudCB7XHJcbiAgQElucHV0KCkgc2VjdGlvblRpdGxlOiBTZWN0aW9uVGl0bGU7XHJcbiAgc2VjdGlvblRpdGxlU2l6ZXMgPSBTZWN0aW9uVGl0bGVTaXplcztcclxuICBASW5wdXQoKSB3aXRob3V0VGl0bGVDYXNlOiBib29sZWFuO1xyXG4gIEBJbnB1dCgpIGRlc2NyaXB0aW9uV2lkdGg6IHN0cmluZyA7XHJcbn0iLCI8ZGl2IGNsYXNzPVwic2VjdGlvbi1jb250YWluZXJcIiBbbmdDbGFzc109XCJ7J2FsaWduLWxlZnQnOnNlY3Rpb25UaXRsZS5hbGlnbkxlZnQsJ2FsaWduLWNlbnRlcic6IXNlY3Rpb25UaXRsZS5hbGlnbkxlZnQsJ2RhcmstYmFja2dyb3VuZCc6c2VjdGlvblRpdGxlLmlzRGFya0JnICwnbGlnaHQtYmFja2dyb3VuZCc6IXNlY3Rpb25UaXRsZS5pc0RhcmtCZywgJ3dpdGhvdXQtZGl2aWRlcic6c2VjdGlvblRpdGxlLmlzV2l0aG91dERpdmlkZXIsXHJcbidzbWFsbC1mb250Jzogc2VjdGlvblRpdGxlLmZvbnRTaXplRW51bSA9PSBzZWN0aW9uVGl0bGVTaXplcy5TTUFMTCxcclxuJ21lZGl1bS1mb250Jzogc2VjdGlvblRpdGxlLmZvbnRTaXplRW51bSA9PSBzZWN0aW9uVGl0bGVTaXplcy5NRURJVU0gfHwgKCFzZWN0aW9uVGl0bGUuZm9udFNpemVFbnVtKSxcclxuJ2xhcmdlLWZvbnQnOiAoc2VjdGlvblRpdGxlLmZvbnRTaXplRW51bSA9PSBzZWN0aW9uVGl0bGVTaXplcy5MQVJHRSkgfVwiPlxyXG4gICAgPGRpdiBjbGFzcz1cInRpdGxlLWNvbnRhaW5lclwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJ0aXRsZVwiICpuZ0lmPVwic2VjdGlvblRpdGxlLnRpdGxlXCI+XHJcbiAgICAgICAgICAgIHt7d2l0aG91dFRpdGxlQ2FzZT8gc2VjdGlvblRpdGxlLnRpdGxlIDogKHNlY3Rpb25UaXRsZS50aXRsZSB8IHRpdGxlY2FzZSl9fVxyXG4gICAgICAgIDwvZGl2PlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJkaXZpZGVyXCIgKm5nSWY9XCIhc2VjdGlvblRpdGxlLmlzV2l0aG91dERpdmlkZXJcIj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cImRlc2NyaXB0aW9uXCIgKm5nSWY9XCJzZWN0aW9uVGl0bGUuc3VidGl0bGVcIlxyXG4gICAgICAgIFtuZ1N0eWxlXT1cImRlc2NyaXB0aW9uV2lkdGggPyB7d2lkdGggOiBkZXNjcmlwdGlvbldpZHRofSA6IG51bGxcIj5cclxuICAgICAgICB7e3NlY3Rpb25UaXRsZS5zdWJ0aXRsZX19PG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { HttpHeaders } from '@angular/common/http';
|
|
2
|
+
import { Injectable } from '@angular/core';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
import * as i1 from "@angular/common/http";
|
|
5
|
+
export class UserService {
|
|
6
|
+
http;
|
|
7
|
+
constructor(http) {
|
|
8
|
+
this.http = http;
|
|
9
|
+
}
|
|
10
|
+
getAuthenticationHeaders() {
|
|
11
|
+
const token = localStorage.getItem("token");
|
|
12
|
+
const httpHeaders = new HttpHeaders({
|
|
13
|
+
"Content-Type": "application/json; charset-utf-8",
|
|
14
|
+
Authorization: "Token " + token,
|
|
15
|
+
});
|
|
16
|
+
return { headers: httpHeaders };
|
|
17
|
+
}
|
|
18
|
+
getTokenlessHeaders() {
|
|
19
|
+
const httpHeaders = new HttpHeaders({
|
|
20
|
+
"Content-Type": "application/json; charset-utf-8",
|
|
21
|
+
});
|
|
22
|
+
return { headers: httpHeaders };
|
|
23
|
+
}
|
|
24
|
+
isAuthenticated() {
|
|
25
|
+
return !!localStorage.getItem('token');
|
|
26
|
+
}
|
|
27
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
28
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserService, providedIn: 'root' });
|
|
29
|
+
}
|
|
30
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UserService, decorators: [{
|
|
31
|
+
type: Injectable,
|
|
32
|
+
args: [{
|
|
33
|
+
providedIn: 'root'
|
|
34
|
+
}]
|
|
35
|
+
}], ctorParameters: function () { return [{ type: i1.HttpClient }]; } });
|
|
36
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlci5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvam9vbGVyLXdlYnNpdGVzLXNoYXJlZC9zcmMvbGliL3NlcnZpY2VzL3VzZXIuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWMsV0FBVyxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDL0QsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBTzNDLE1BQU0sT0FBTyxXQUFXO0lBRUY7SUFBcEIsWUFBb0IsSUFBZ0I7UUFBaEIsU0FBSSxHQUFKLElBQUksQ0FBWTtJQUFJLENBQUM7SUFFekMsd0JBQXdCO1FBQ3RCLE1BQU0sS0FBSyxHQUFHLFlBQVksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDNUMsTUFBTSxXQUFXLEdBQUcsSUFBSSxXQUFXLENBQUM7WUFDbEMsY0FBYyxFQUFFLGlDQUFpQztZQUNqRCxhQUFhLEVBQUUsUUFBUSxHQUFHLEtBQUs7U0FDaEMsQ0FBQyxDQUFDO1FBQ0gsT0FBTyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBRUQsbUJBQW1CO1FBQ2pCLE1BQU0sV0FBVyxHQUFHLElBQUksV0FBVyxDQUFDO1lBQ2xDLGNBQWMsRUFBRSxpQ0FBaUM7U0FDbEQsQ0FBQyxDQUFDO1FBQ0gsT0FBTyxFQUFFLE9BQU8sRUFBRSxXQUFXLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBRUQsZUFBZTtRQUNiLE9BQU8sQ0FBQyxDQUFDLFlBQVksQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDekMsQ0FBQzt3R0F0QlUsV0FBVzs0R0FBWCxXQUFXLGNBSFYsTUFBTTs7NEZBR1AsV0FBVztrQkFKdkIsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBIdHRwQ2xpZW50LCBIdHRwSGVhZGVycyB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcclxuaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuXHJcbkBJbmplY3RhYmxlKHtcclxuICBwcm92aWRlZEluOiAncm9vdCdcclxufSlcclxuXHJcbmV4cG9ydCBjbGFzcyBVc2VyU2VydmljZSB7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgaHR0cDogSHR0cENsaWVudCkgeyB9XHJcblxyXG4gIGdldEF1dGhlbnRpY2F0aW9uSGVhZGVycygpIHtcclxuICAgIGNvbnN0IHRva2VuID0gbG9jYWxTdG9yYWdlLmdldEl0ZW0oXCJ0b2tlblwiKTtcclxuICAgIGNvbnN0IGh0dHBIZWFkZXJzID0gbmV3IEh0dHBIZWFkZXJzKHtcclxuICAgICAgXCJDb250ZW50LVR5cGVcIjogXCJhcHBsaWNhdGlvbi9qc29uOyBjaGFyc2V0LXV0Zi04XCIsXHJcbiAgICAgIEF1dGhvcml6YXRpb246IFwiVG9rZW4gXCIgKyB0b2tlbixcclxuICAgIH0pO1xyXG4gICAgcmV0dXJuIHsgaGVhZGVyczogaHR0cEhlYWRlcnMgfTtcclxuICB9XHJcblxyXG4gIGdldFRva2VubGVzc0hlYWRlcnMoKSB7XHJcbiAgICBjb25zdCBodHRwSGVhZGVycyA9IG5ldyBIdHRwSGVhZGVycyh7XHJcbiAgICAgIFwiQ29udGVudC1UeXBlXCI6IFwiYXBwbGljYXRpb24vanNvbjsgY2hhcnNldC11dGYtOFwiLFxyXG4gICAgfSk7XHJcbiAgICByZXR1cm4geyBoZWFkZXJzOiBodHRwSGVhZGVycyB9O1xyXG4gIH1cclxuXHJcbiAgaXNBdXRoZW50aWNhdGVkKCk6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuICEhbG9jYWxTdG9yYWdlLmdldEl0ZW0oJ3Rva2VuJyk7XHJcbiAgfVxyXG59XHJcbiJdfQ==
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "@angular/router";
|
|
4
|
+
import * as i2 from "@fortawesome/angular-fontawesome";
|
|
5
|
+
import * as i3 from "@angular/common";
|
|
6
|
+
export class SocialMediaIconsComponent {
|
|
7
|
+
_router;
|
|
8
|
+
color;
|
|
9
|
+
areIconsInFooter;
|
|
10
|
+
socialMediaLinks;
|
|
11
|
+
constructor(_router) {
|
|
12
|
+
this._router = _router;
|
|
13
|
+
}
|
|
14
|
+
ngOnInit() {
|
|
15
|
+
}
|
|
16
|
+
onClickLinkedIn() {
|
|
17
|
+
window.location.href = this.socialMediaLinks.linkedIn;
|
|
18
|
+
}
|
|
19
|
+
onClickInstagram() {
|
|
20
|
+
window.location.href = this.socialMediaLinks.instagram;
|
|
21
|
+
}
|
|
22
|
+
onClickYoutube() {
|
|
23
|
+
window.location.href = this.socialMediaLinks.youTube;
|
|
24
|
+
}
|
|
25
|
+
setStyles() {
|
|
26
|
+
let style = {
|
|
27
|
+
color: this.color
|
|
28
|
+
};
|
|
29
|
+
return style;
|
|
30
|
+
}
|
|
31
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SocialMediaIconsComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SocialMediaIconsComponent, selector: "social-media-icons", inputs: { color: "color", areIconsInFooter: "areIconsInFooter", socialMediaLinks: "socialMediaLinks" }, ngImport: i0, template: "<div [ngClass]=\"{'icons-white':areIconsInFooter, 'icons':!areIconsInFooter}\">\r\n <fa-icon [icon]=\"['fab', 'linkedin-in']\" class=\"icon linkedin\" (click)=\"onClickLinkedIn()\"></fa-icon>\r\n <fa-icon [icon]=\"['fab', 'instagram']\" class=\"icon instagram\" (click)=\"onClickInstagram()\"></fa-icon>\r\n <fa-icon [icon]=\"['fab', 'youtube']\" class=\"icon youtube\" (click)=\"onClickYoutube()\"></fa-icon>\r\n</div>", styles: [".icons,.icons-white{display:flex;gap:1.5rem}.icons .icon,.icons-white .icon{cursor:pointer;font-size:2rem}.icons-white{color:#fff}.icons-white .icon:hover{color:#e6e6e6}.icons{font-size:2rem}.icons .icon{color:#4d4d4d;cursor:pointer;transition:ease-in-out .2s}.icons .linkedin:hover{color:#0072b1}.icons .instagram:hover{color:#c92bb7}.icons .youtube:hover{color:red}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
33
|
+
}
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SocialMediaIconsComponent, decorators: [{
|
|
35
|
+
type: Component,
|
|
36
|
+
args: [{ selector: 'social-media-icons', template: "<div [ngClass]=\"{'icons-white':areIconsInFooter, 'icons':!areIconsInFooter}\">\r\n <fa-icon [icon]=\"['fab', 'linkedin-in']\" class=\"icon linkedin\" (click)=\"onClickLinkedIn()\"></fa-icon>\r\n <fa-icon [icon]=\"['fab', 'instagram']\" class=\"icon instagram\" (click)=\"onClickInstagram()\"></fa-icon>\r\n <fa-icon [icon]=\"['fab', 'youtube']\" class=\"icon youtube\" (click)=\"onClickYoutube()\"></fa-icon>\r\n</div>", styles: [".icons,.icons-white{display:flex;gap:1.5rem}.icons .icon,.icons-white .icon{cursor:pointer;font-size:2rem}.icons-white{color:#fff}.icons-white .icon:hover{color:#e6e6e6}.icons{font-size:2rem}.icons .icon{color:#4d4d4d;cursor:pointer;transition:ease-in-out .2s}.icons .linkedin:hover{color:#0072b1}.icons .instagram:hover{color:#c92bb7}.icons .youtube:hover{color:red}\n"] }]
|
|
37
|
+
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { color: [{
|
|
38
|
+
type: Input
|
|
39
|
+
}], areIconsInFooter: [{
|
|
40
|
+
type: Input
|
|
41
|
+
}], socialMediaLinks: [{
|
|
42
|
+
type: Input
|
|
43
|
+
}] } });
|
|
44
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29jaWFsLW1lZGlhLWljb25zLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9zb2NpYWwtbWVkaWEtaWNvbnMvc29jaWFsLW1lZGlhLWljb25zLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9zb2NpYWwtbWVkaWEtaWNvbnMvc29jaWFsLW1lZGlhLWljb25zLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7OztBQU96RCxNQUFNLE9BQU8seUJBQXlCO0lBSWhCO0lBSFgsS0FBSyxDQUFTO0lBQ2QsZ0JBQWdCLENBQVU7SUFDMUIsZ0JBQWdCLENBQW1CO0lBQzVDLFlBQW9CLE9BQWU7UUFBZixZQUFPLEdBQVAsT0FBTyxDQUFRO0lBQUksQ0FBQztJQUV4QyxRQUFRO0lBQ1IsQ0FBQztJQUVELGVBQWU7UUFDYixNQUFNLENBQUMsUUFBUSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxDQUFDO0lBQ3hELENBQUM7SUFFRCxnQkFBZ0I7UUFDZCxNQUFNLENBQUMsUUFBUSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxDQUFDO0lBQ3pELENBQUM7SUFFRCxjQUFjO1FBQ1osTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLE9BQU8sQ0FBQztJQUN2RCxDQUFDO0lBRUQsU0FBUztRQUNQLElBQUksS0FBSyxHQUFHO1lBQ1YsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLO1NBQ2xCLENBQUE7UUFDRCxPQUFPLEtBQUssQ0FBQztJQUNmLENBQUM7d0dBMUJVLHlCQUF5Qjs0RkFBekIseUJBQXlCLGtLQ1J0Qyx3YUFJTTs7NEZESU8seUJBQXlCO2tCQUxyQyxTQUFTOytCQUNFLG9CQUFvQjs2RkFLckIsS0FBSztzQkFBYixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxnQkFBZ0I7c0JBQXhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBSb3V0ZXIgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgc29jaWFsTWVkaWFMaW5rcyB9IGZyb20gJy4vc29jaWFsLW1lZGlhLWxpbmtzLm1vZGVsJztcclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzb2NpYWwtbWVkaWEtaWNvbnMnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9zb2NpYWwtbWVkaWEtaWNvbnMuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3NvY2lhbC1tZWRpYS1pY29ucy5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTb2NpYWxNZWRpYUljb25zQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKSBjb2xvcjogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGFyZUljb25zSW5Gb290ZXI6IGJvb2xlYW47XHJcbiAgQElucHV0KCkgc29jaWFsTWVkaWFMaW5rczogc29jaWFsTWVkaWFMaW5rcztcclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9yb3V0ZXI6IFJvdXRlcikgeyB9XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gIH1cclxuXHJcbiAgb25DbGlja0xpbmtlZEluKCkge1xyXG4gICAgd2luZG93LmxvY2F0aW9uLmhyZWYgPSB0aGlzLnNvY2lhbE1lZGlhTGlua3MubGlua2VkSW47XHJcbiAgfVxyXG5cclxuICBvbkNsaWNrSW5zdGFncmFtKCkge1xyXG4gICAgd2luZG93LmxvY2F0aW9uLmhyZWYgPSB0aGlzLnNvY2lhbE1lZGlhTGlua3MuaW5zdGFncmFtO1xyXG4gIH1cclxuXHJcbiAgb25DbGlja1lvdXR1YmUoKSB7XHJcbiAgICB3aW5kb3cubG9jYXRpb24uaHJlZiA9IHRoaXMuc29jaWFsTWVkaWFMaW5rcy55b3VUdWJlO1xyXG4gIH1cclxuXHJcbiAgc2V0U3R5bGVzKCkge1xyXG4gICAgbGV0IHN0eWxlID0ge1xyXG4gICAgICBjb2xvcjogdGhpcy5jb2xvclxyXG4gICAgfVxyXG4gICAgcmV0dXJuIHN0eWxlO1xyXG4gIH1cclxufVxyXG4iLCI8ZGl2IFtuZ0NsYXNzXT1cInsnaWNvbnMtd2hpdGUnOmFyZUljb25zSW5Gb290ZXIsICdpY29ucyc6IWFyZUljb25zSW5Gb290ZXJ9XCI+XHJcbiAgPGZhLWljb24gW2ljb25dPVwiWydmYWInLCAnbGlua2VkaW4taW4nXVwiIGNsYXNzPVwiaWNvbiBsaW5rZWRpblwiIChjbGljayk9XCJvbkNsaWNrTGlua2VkSW4oKVwiPjwvZmEtaWNvbj5cclxuICA8ZmEtaWNvbiBbaWNvbl09XCJbJ2ZhYicsICdpbnN0YWdyYW0nXVwiIGNsYXNzPVwiaWNvbiBpbnN0YWdyYW1cIiAoY2xpY2spPVwib25DbGlja0luc3RhZ3JhbSgpXCI+PC9mYS1pY29uPlxyXG4gIDxmYS1pY29uIFtpY29uXT1cIlsnZmFiJywgJ3lvdXR1YmUnXVwiIGNsYXNzPVwiaWNvbiB5b3V0dWJlXCIgKGNsaWNrKT1cIm9uQ2xpY2tZb3V0dWJlKClcIj48L2ZhLWljb24+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export class socialMediaLinks {
|
|
2
|
+
linkedIn;
|
|
3
|
+
instagram;
|
|
4
|
+
youTube;
|
|
5
|
+
faceBook;
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29jaWFsLW1lZGlhLWxpbmtzLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvam9vbGVyLXdlYnNpdGVzLXNoYXJlZC9zcmMvbGliL3NvY2lhbC1tZWRpYS1pY29ucy9zb2NpYWwtbWVkaWEtbGlua3MubW9kZWwudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxPQUFPLGdCQUFnQjtJQUN6QixRQUFRLENBQVM7SUFDakIsU0FBUyxDQUFTO0lBQ2xCLE9BQU8sQ0FBUztJQUNoQixRQUFRLENBQVM7Q0FDcEIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY2xhc3Mgc29jaWFsTWVkaWFMaW5rcyB7XHJcbiAgICBsaW5rZWRJbjogc3RyaW5nO1xyXG4gICAgaW5zdGFncmFtOiBzdHJpbmc7XHJcbiAgICB5b3VUdWJlOiBzdHJpbmc7XHJcbiAgICBmYWNlQm9vazogc3RyaW5nO1xyXG59Il19
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { Component } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "@angular/material/dialog";
|
|
4
|
+
import * as i2 from "@angular/router";
|
|
5
|
+
import * as i3 from "@fortawesome/angular-fontawesome";
|
|
6
|
+
export class SuccessMessageDialogComponent {
|
|
7
|
+
dialogRef;
|
|
8
|
+
_Router;
|
|
9
|
+
constructor(dialogRef, _Router) {
|
|
10
|
+
this.dialogRef = dialogRef;
|
|
11
|
+
this._Router = _Router;
|
|
12
|
+
}
|
|
13
|
+
onClickSubmitAnotherForm() {
|
|
14
|
+
this.dialogRef.close();
|
|
15
|
+
this._Router.navigate(['/contact-us/contact-us-page']);
|
|
16
|
+
}
|
|
17
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuccessMessageDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
18
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SuccessMessageDialogComponent, selector: "success-message-dialog", ngImport: i0, template: "<div class=\"page\">\r\n <span mat-dialog-title class=\"dialog-header\" mat-button>\r\n <fa-icon icon=\"xmark\" mat-dialog-close></fa-icon>\r\n </span>\r\n\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"success-icon\">\r\n <fa-icon icon=\"calendar-check\"></fa-icon>\r\n </div>\r\n <h2 class=\"title\">Thanks! your request has been submitted</h2>\r\n <h3 class=\"subtitle\">We have received your message, we'll reach out to you as soon as possible!</h3>\r\n </mat-dialog-content>\r\n <div class=\"divider\"></div>\r\n <mat-dialog-actions class=\"dialog-footer\">\r\n <h3>Still have any questions? <span class=\"link-text\" (click)=\"onClickSubmitAnotherForm()\">Submit\r\n another form</span>\r\n </h3>\r\n </mat-dialog-actions>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{text-align:center}.page .mat-typography{padding:0 6rem 2rem;display:grid}.page .dialog-header{text-align:right;font-size:3rem;color:#686868;font-weight:900;padding:0 2rem}.page .success-icon{font-size:7rem;color:#12957e;margin-bottom:2rem}.page .title{color:#36393f;font-size:2.8rem;font-weight:700}.page .subtitle{justify-self:center;width:85%;font-size:2.2rem;font-weight:500;color:#494949}.page .divider{width:95%;border:.1rem solid #D8D8D8;margin:auto}.page .dialog-footer{padding:3rem 0rem;display:grid;justify-content:center}.page .dialog-footer h3{color:#494949;align-self:center;font-size:2.2rem}.page .link-text{color:#155ed4;cursor:pointer}\n"], dependencies: [{ kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }] });
|
|
19
|
+
}
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SuccessMessageDialogComponent, decorators: [{
|
|
21
|
+
type: Component,
|
|
22
|
+
args: [{ selector: 'success-message-dialog', template: "<div class=\"page\">\r\n <span mat-dialog-title class=\"dialog-header\" mat-button>\r\n <fa-icon icon=\"xmark\" mat-dialog-close></fa-icon>\r\n </span>\r\n\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"success-icon\">\r\n <fa-icon icon=\"calendar-check\"></fa-icon>\r\n </div>\r\n <h2 class=\"title\">Thanks! your request has been submitted</h2>\r\n <h3 class=\"subtitle\">We have received your message, we'll reach out to you as soon as possible!</h3>\r\n </mat-dialog-content>\r\n <div class=\"divider\"></div>\r\n <mat-dialog-actions class=\"dialog-footer\">\r\n <h3>Still have any questions? <span class=\"link-text\" (click)=\"onClickSubmitAnotherForm()\">Submit\r\n another form</span>\r\n </h3>\r\n </mat-dialog-actions>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{text-align:center}.page .mat-typography{padding:0 6rem 2rem;display:grid}.page .dialog-header{text-align:right;font-size:3rem;color:#686868;font-weight:900;padding:0 2rem}.page .success-icon{font-size:7rem;color:#12957e;margin-bottom:2rem}.page .title{color:#36393f;font-size:2.8rem;font-weight:700}.page .subtitle{justify-self:center;width:85%;font-size:2.2rem;font-weight:500;color:#494949}.page .divider{width:95%;border:.1rem solid #D8D8D8;margin:auto}.page .dialog-footer{padding:3rem 0rem;display:grid;justify-content:center}.page .dialog-footer h3{color:#494949;align-self:center;font-size:2.2rem}.page .link-text{color:#155ed4;cursor:pointer}\n"] }]
|
|
23
|
+
}], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: i2.Router }]; } });
|
|
24
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3VjY2Vzcy1tZXNzYWdlLWRpYWxvZy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9qb29sZXItd2Vic2l0ZXMtc2hhcmVkL3NyYy9saWIvc3VjY2Vzcy1tZXNzYWdlLWRpYWxvZy9zdWNjZXNzLW1lc3NhZ2UtZGlhbG9nLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi9zdWNjZXNzLW1lc3NhZ2UtZGlhbG9nL3N1Y2Nlc3MtbWVzc2FnZS1kaWFsb2cuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFTMUMsTUFBTSxPQUFPLDZCQUE2QjtJQUcvQjtJQUNDO0lBRlYsWUFDUyxTQUFzRCxFQUNyRCxPQUFlO1FBRGhCLGNBQVMsR0FBVCxTQUFTLENBQTZDO1FBQ3JELFlBQU8sR0FBUCxPQUFPLENBQVE7SUFDckIsQ0FBQztJQUVMLHdCQUF3QjtRQUN0QixJQUFJLENBQUMsU0FBUyxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3ZCLElBQUksQ0FBQyxPQUFPLENBQUMsUUFBUSxDQUFDLENBQUMsNkJBQTZCLENBQUMsQ0FBQyxDQUFDO0lBQ3pELENBQUM7d0dBVlUsNkJBQTZCOzRGQUE3Qiw2QkFBNkIsOERDVDFDLGd5QkFrQk07OzRGRFRPLDZCQUE2QjtrQkFMekMsU0FBUzsrQkFDRSx3QkFBd0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWF0RGlhbG9nUmVmIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcclxuaW1wb3J0IHsgUm91dGVyIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc3VjY2Vzcy1tZXNzYWdlLWRpYWxvZycsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3N1Y2Nlc3MtbWVzc2FnZS1kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3N1Y2Nlc3MtbWVzc2FnZS1kaWFsb2cuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU3VjY2Vzc01lc3NhZ2VEaWFsb2dDb21wb25lbnQge1xyXG5cclxuICBjb25zdHJ1Y3RvcihcclxuICAgIHB1YmxpYyBkaWFsb2dSZWY6IE1hdERpYWxvZ1JlZjxTdWNjZXNzTWVzc2FnZURpYWxvZ0NvbXBvbmVudD4sXHJcbiAgICBwcml2YXRlIF9Sb3V0ZXI6IFJvdXRlclxyXG4gICkgeyB9XHJcblxyXG4gIG9uQ2xpY2tTdWJtaXRBbm90aGVyRm9ybSgpIHtcclxuICAgIHRoaXMuZGlhbG9nUmVmLmNsb3NlKCk7XHJcbiAgICB0aGlzLl9Sb3V0ZXIubmF2aWdhdGUoWycvY29udGFjdC11cy9jb250YWN0LXVzLXBhZ2UnXSk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJwYWdlXCI+XHJcbiAgPHNwYW4gbWF0LWRpYWxvZy10aXRsZSBjbGFzcz1cImRpYWxvZy1oZWFkZXJcIiBtYXQtYnV0dG9uPlxyXG4gICAgPGZhLWljb24gaWNvbj1cInhtYXJrXCIgbWF0LWRpYWxvZy1jbG9zZT48L2ZhLWljb24+XHJcbiAgPC9zcGFuPlxyXG5cclxuICA8bWF0LWRpYWxvZy1jb250ZW50IGNsYXNzPVwibWF0LXR5cG9ncmFwaHlcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJzdWNjZXNzLWljb25cIj5cclxuICAgICAgPGZhLWljb24gaWNvbj1cImNhbGVuZGFyLWNoZWNrXCI+PC9mYS1pY29uPlxyXG4gICAgPC9kaXY+XHJcbiAgICA8aDIgY2xhc3M9XCJ0aXRsZVwiPlRoYW5rcyEgeW91ciByZXF1ZXN0IGhhcyBiZWVuIHN1Ym1pdHRlZDwvaDI+XHJcbiAgICA8aDMgY2xhc3M9XCJzdWJ0aXRsZVwiPldlIGhhdmUgcmVjZWl2ZWQgeW91ciBtZXNzYWdlLCB3ZSdsbCByZWFjaCBvdXQgdG8geW91IGFzIHNvb24gYXMgcG9zc2libGUhPC9oMz5cclxuICA8L21hdC1kaWFsb2ctY29udGVudD5cclxuICA8ZGl2IGNsYXNzPVwiZGl2aWRlclwiPjwvZGl2PlxyXG4gIDxtYXQtZGlhbG9nLWFjdGlvbnMgY2xhc3M9XCJkaWFsb2ctZm9vdGVyXCI+XHJcbiAgICA8aDM+U3RpbGwgaGF2ZSBhbnkgcXVlc3Rpb25zPyA8c3BhbiBjbGFzcz1cImxpbmstdGV4dFwiIChjbGljayk9XCJvbkNsaWNrU3VibWl0QW5vdGhlckZvcm0oKVwiPlN1Ym1pdFxyXG4gICAgICAgIGFub3RoZXIgZm9ybTwvc3Bhbj5cclxuICAgIDwvaDM+XHJcbiAgPC9tYXQtZGlhbG9nLWFjdGlvbnM+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "@angular/router";
|
|
4
|
+
import * as i2 from "@angular/cdk/layout";
|
|
5
|
+
import * as i3 from "@angular/common";
|
|
6
|
+
import * as i4 from "../section-title/section-title.component";
|
|
7
|
+
;
|
|
8
|
+
export class TeamComponent {
|
|
9
|
+
_router;
|
|
10
|
+
breakpointObserver;
|
|
11
|
+
sectionContent;
|
|
12
|
+
isTabletSize;
|
|
13
|
+
membersToShow;
|
|
14
|
+
scrollMemberNumber = 2;
|
|
15
|
+
constructor(_router, breakpointObserver) {
|
|
16
|
+
this._router = _router;
|
|
17
|
+
this.breakpointObserver = breakpointObserver;
|
|
18
|
+
}
|
|
19
|
+
ngOnInit() {
|
|
20
|
+
this.breakpointObserver.observe([
|
|
21
|
+
"(max-width: 1200px) and (min-width:851px)", "(max-width: 850px) and (min-width:601px)",
|
|
22
|
+
"(max-width: 600px)"
|
|
23
|
+
]).subscribe((result) => {
|
|
24
|
+
if (result.breakpoints['(max-width: 1200px) and (min-width:851px)']) {
|
|
25
|
+
this.isTabletSize = true;
|
|
26
|
+
this.membersToShow = 3;
|
|
27
|
+
}
|
|
28
|
+
else if (result.breakpoints['(max-width: 850px) and (min-width:601px)']) {
|
|
29
|
+
this.membersToShow = 2;
|
|
30
|
+
this.scrollMemberNumber = 2;
|
|
31
|
+
this.isTabletSize = true;
|
|
32
|
+
}
|
|
33
|
+
else if (result.breakpoints['(max-width: 600px)']) {
|
|
34
|
+
this.membersToShow = 1;
|
|
35
|
+
this.scrollMemberNumber = 1;
|
|
36
|
+
this.isTabletSize = true;
|
|
37
|
+
}
|
|
38
|
+
else {
|
|
39
|
+
this.isTabletSize = false;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
onAddNewMember() {
|
|
44
|
+
this._router.navigate(['/team/new-member']);
|
|
45
|
+
}
|
|
46
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TeamComponent, deps: [{ token: i1.Router }, { token: i2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TeamComponent, selector: "team", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"container\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n <div class=\"cards\">\r\n <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n <div class=\"image-container\">\r\n <img loading=\"lazy\" [src]=\"teamMember.profilePicture\">\r\n </div>\r\n <div>\r\n <div class=\"name\">\r\n {{teamMember.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{teamMember.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"caption-text\">\r\n {{sectionContent.caption}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.container{display:grid;padding:0 2%;row-gap:2rem;width:100%;text-align:center}.container .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.container .member-card{height:27rem;width:22rem;padding:1rem;display:grid}.container .member-card .image-container{display:grid;border-radius:1.5rem;overflow:hidden;height:20rem}.container .member-card .image-container img{width:100%;height:100%;object-fit:cover}.container .member-card .name{font-weight:600;font-size:1.9rem}.container .member-card .position{font-weight:500;font-size:1.4rem}.container .caption-text{font-weight:600;font-size:2rem;width:85%;margin:2rem auto;color:#155ed4}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i4.SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase", "descriptionWidth"] }] });
|
|
48
|
+
}
|
|
49
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TeamComponent, decorators: [{
|
|
50
|
+
type: Component,
|
|
51
|
+
args: [{ selector: 'team', template: "<div class=\"container\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\" ></section-title>\r\n <div class=\"cards\">\r\n <div class=\"member-card\" *ngFor=\"let teamMember of sectionContent.teamMembers\">\r\n <div class=\"image-container\">\r\n <img loading=\"lazy\" [src]=\"teamMember.profilePicture\">\r\n </div>\r\n <div>\r\n <div class=\"name\">\r\n {{teamMember.fullName}}\r\n </div>\r\n <div class=\"position\">\r\n {{teamMember.position}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"caption-text\">\r\n {{sectionContent.caption}}\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.container{display:grid;padding:0 2%;row-gap:2rem;width:100%;text-align:center}.container .cards{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.container .member-card{height:27rem;width:22rem;padding:1rem;display:grid}.container .member-card .image-container{display:grid;border-radius:1.5rem;overflow:hidden;height:20rem}.container .member-card .image-container img{width:100%;height:100%;object-fit:cover}.container .member-card .name{font-weight:600;font-size:1.9rem}.container .member-card .position{font-weight:500;font-size:1.4rem}.container .caption-text{font-weight:600;font-size:2rem;width:85%;margin:2rem auto;color:#155ed4}\n"] }]
|
|
52
|
+
}], ctorParameters: function () { return [{ type: i1.Router }, { type: i2.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
|
|
53
|
+
type: Input
|
|
54
|
+
}] } });
|
|
55
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVhbS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9qb29sZXItd2Vic2l0ZXMtc2hhcmVkL3NyYy9saWIvdGVhbS90ZWFtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi90ZWFtL3RlYW0uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7OztBQUVoQixDQUFDO0FBUTFDLE1BQU0sT0FBTyxhQUFhO0lBT2Q7SUFDQTtJQVBELGNBQWMsQ0FBYztJQUNyQyxZQUFZLENBQVU7SUFDdEIsYUFBYSxDQUFTO0lBQ3RCLGtCQUFrQixHQUFXLENBQUMsQ0FBQztJQUUvQixZQUNVLE9BQWUsRUFDZixrQkFBc0M7UUFEdEMsWUFBTyxHQUFQLE9BQU8sQ0FBUTtRQUNmLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBb0I7SUFDNUMsQ0FBQztJQUVMLFFBQVE7UUFDTixJQUFJLENBQUMsa0JBQWtCLENBQUMsT0FBTyxDQUFDO1lBQzlCLDJDQUEyQyxFQUFFLDBDQUEwQztZQUN2RixvQkFBb0I7U0FDckIsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLE1BQXVCLEVBQUUsRUFBRTtZQUN2QyxJQUFJLE1BQU0sQ0FBQyxXQUFXLENBQUMsMkNBQTJDLENBQUMsRUFBRTtnQkFDbkUsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7Z0JBQ3pCLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxDQUFDO2FBQ3hCO2lCQUNJLElBQUksTUFBTSxDQUFDLFdBQVcsQ0FBQywwQ0FBMEMsQ0FBQyxFQUFFO2dCQUN2RSxJQUFJLENBQUMsYUFBYSxHQUFHLENBQUMsQ0FBQztnQkFDdkIsSUFBSSxDQUFDLGtCQUFrQixHQUFHLENBQUMsQ0FBQztnQkFDNUIsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7YUFDMUI7aUJBQ0ksSUFBSSxNQUFNLENBQUMsV0FBVyxDQUFDLG9CQUFvQixDQUFDLEVBQUU7Z0JBQ2pELElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxDQUFDO2dCQUN2QixJQUFJLENBQUMsa0JBQWtCLEdBQUcsQ0FBQyxDQUFDO2dCQUM1QixJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQzthQUMxQjtpQkFDSTtnQkFDSCxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQzthQUMzQjtRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELGNBQWM7UUFDWixJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLGtCQUFrQixDQUFDLENBQUMsQ0FBQztJQUM5QyxDQUFDO3dHQXRDVSxhQUFhOzRGQUFiLGFBQWEsMEZDVjFCLG94QkFvQk07OzRGRFZPLGFBQWE7a0JBTHpCLFNBQVM7K0JBQ0UsTUFBTTs4SEFLUCxjQUFjO3NCQUF0QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEJyZWFrcG9pbnRPYnNlcnZlciwgQnJlYWtwb2ludFN0YXRlIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2xheW91dCc7XHJcbmltcG9ydCB7IFJvdXRlciB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7O1xyXG5pbXBvcnQgeyBUZWFtU2VjdGlvbiB9IGZyb20gJy4uL21vZGVscy90ZWFtLXNlY3Rpb24ubW9kZWwnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICd0ZWFtJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdGVhbS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdGVhbS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUZWFtQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKSBzZWN0aW9uQ29udGVudDogVGVhbVNlY3Rpb247XHJcbiAgaXNUYWJsZXRTaXplOiBib29sZWFuO1xyXG4gIG1lbWJlcnNUb1Nob3c6IG51bWJlcjtcclxuICBzY3JvbGxNZW1iZXJOdW1iZXI6IG51bWJlciA9IDI7XHJcblxyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICAgcHJpdmF0ZSBfcm91dGVyOiBSb3V0ZXIsXHJcbiAgICBwcml2YXRlIGJyZWFrcG9pbnRPYnNlcnZlcjogQnJlYWtwb2ludE9ic2VydmVyLFxyXG4gICkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgdGhpcy5icmVha3BvaW50T2JzZXJ2ZXIub2JzZXJ2ZShbXHJcbiAgICAgIFwiKG1heC13aWR0aDogMTIwMHB4KSBhbmQgKG1pbi13aWR0aDo4NTFweClcIiwgXCIobWF4LXdpZHRoOiA4NTBweCkgYW5kIChtaW4td2lkdGg6NjAxcHgpXCIsXHJcbiAgICAgIFwiKG1heC13aWR0aDogNjAwcHgpXCJcclxuICAgIF0pLnN1YnNjcmliZSgocmVzdWx0OiBCcmVha3BvaW50U3RhdGUpID0+IHtcclxuICAgICAgaWYgKHJlc3VsdC5icmVha3BvaW50c1snKG1heC13aWR0aDogMTIwMHB4KSBhbmQgKG1pbi13aWR0aDo4NTFweCknXSkge1xyXG4gICAgICAgIHRoaXMuaXNUYWJsZXRTaXplID0gdHJ1ZTtcclxuICAgICAgICB0aGlzLm1lbWJlcnNUb1Nob3cgPSAzO1xyXG4gICAgICB9XHJcbiAgICAgIGVsc2UgaWYgKHJlc3VsdC5icmVha3BvaW50c1snKG1heC13aWR0aDogODUwcHgpIGFuZCAobWluLXdpZHRoOjYwMXB4KSddKSB7XHJcbiAgICAgICAgdGhpcy5tZW1iZXJzVG9TaG93ID0gMjtcclxuICAgICAgICB0aGlzLnNjcm9sbE1lbWJlck51bWJlciA9IDI7XHJcbiAgICAgICAgdGhpcy5pc1RhYmxldFNpemUgPSB0cnVlO1xyXG4gICAgICB9XHJcbiAgICAgIGVsc2UgaWYgKHJlc3VsdC5icmVha3BvaW50c1snKG1heC13aWR0aDogNjAwcHgpJ10pIHtcclxuICAgICAgICB0aGlzLm1lbWJlcnNUb1Nob3cgPSAxO1xyXG4gICAgICAgIHRoaXMuc2Nyb2xsTWVtYmVyTnVtYmVyID0gMTtcclxuICAgICAgICB0aGlzLmlzVGFibGV0U2l6ZSA9IHRydWU7XHJcbiAgICAgIH1cclxuICAgICAgZWxzZSB7XHJcbiAgICAgICAgdGhpcy5pc1RhYmxldFNpemUgPSBmYWxzZTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxuICBvbkFkZE5ld01lbWJlcigpIHtcclxuICAgIHRoaXMuX3JvdXRlci5uYXZpZ2F0ZShbJy90ZWFtL25ldy1tZW1iZXInXSk7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJjb250YWluZXJcIj5cclxuICAgIDxzZWN0aW9uLXRpdGxlIFtzZWN0aW9uVGl0bGVdPVwic2VjdGlvbkNvbnRlbnQuc2VjdGlvblRpdGxlXCIgPjwvc2VjdGlvbi10aXRsZT5cclxuICAgIDxkaXYgY2xhc3M9XCJjYXJkc1wiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJtZW1iZXItY2FyZFwiICpuZ0Zvcj1cImxldCB0ZWFtTWVtYmVyIG9mIHNlY3Rpb25Db250ZW50LnRlYW1NZW1iZXJzXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJpbWFnZS1jb250YWluZXJcIj5cclxuICAgICAgICAgICAgICAgIDxpbWcgbG9hZGluZz1cImxhenlcIiBbc3JjXT1cInRlYW1NZW1iZXIucHJvZmlsZVBpY3R1cmVcIj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXY+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwibmFtZVwiPlxyXG4gICAgICAgICAgICAgICAgICAgIHt7dGVhbU1lbWJlci5mdWxsTmFtZX19XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJwb3NpdGlvblwiPlxyXG4gICAgICAgICAgICAgICAgICAgIHt7dGVhbU1lbWJlci5wb3NpdGlvbn19XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJjYXB0aW9uLXRleHRcIj5cclxuICAgICAgICB7e3NlY3Rpb25Db250ZW50LmNhcHRpb259fVxyXG4gICAgPC9kaXY+XHJcbjwvZGl2PiJdfQ==
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "@fortawesome/angular-fontawesome";
|
|
4
|
+
import * as i2 from "@angular/common";
|
|
5
|
+
import * as i3 from "@angular/material/card";
|
|
6
|
+
export class ValuePropCardComponent {
|
|
7
|
+
valuePropContent;
|
|
8
|
+
cardOnHover;
|
|
9
|
+
imageSize;
|
|
10
|
+
icon;
|
|
11
|
+
imageStyle;
|
|
12
|
+
ngOnInit() {
|
|
13
|
+
if (this.valuePropContent.iconName) {
|
|
14
|
+
this.icon = this.valuePropContent.iconName;
|
|
15
|
+
}
|
|
16
|
+
if (this.valuePropContent.image) {
|
|
17
|
+
this.setImageStyle();
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
setImageStyle() {
|
|
21
|
+
let imageSize = '4.5rem';
|
|
22
|
+
if (this.imageSize) {
|
|
23
|
+
imageSize = this.imageSize;
|
|
24
|
+
}
|
|
25
|
+
let style = {
|
|
26
|
+
height: imageSize,
|
|
27
|
+
width: imageSize
|
|
28
|
+
};
|
|
29
|
+
this.imageStyle = style;
|
|
30
|
+
}
|
|
31
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValuePropCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
32
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValuePropCardComponent, selector: "value-prop-card", inputs: { valuePropContent: "valuePropContent", cardOnHover: "cardOnHover", imageSize: "imageSize" }, ngImport: i0, template: "<mat-card class=\"reason-block\"\r\n [ngClass]=\"{'card-on-hover':cardOnHover , 'constant-card': !cardOnHover}\">\r\n <mat-card-content class=\"content\">\r\n <div class=\"reason-headline\">\r\n <div class=\"reason-icon\" *ngIf=\"icon\">\r\n <fa-icon [icon]=\"icon\"></fa-icon>\r\n </div>\r\n <div class=\"reason-image\" *ngIf=\"!icon\">\r\n <img [ngStyle]=\"imageStyle\" loading=\"lazy\" [src]=\"valuePropContent.image\">\r\n </div>\r\n <div class=\"reason-title\">\r\n {{valuePropContent.title}}\r\n </div>\r\n </div>\r\n <div class=\"reason-desc\">\r\n {{valuePropContent.description}}\r\n </div>\r\n </mat-card-content>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{display:grid;row-gap:1rem;grid-template-rows:max-content auto}.card-on-hover:hover{background-color:#f7f8f9}.constant-card{background-color:#fff}.reason-block{transition:all ease-in-out .2s;height:21rem;max-width:36rem}.reason-block .reason-headline{display:grid;column-gap:1rem;grid-template-columns:max-content auto;grid-template-rows:max-content;align-items:center}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit;font-size:1.6rem;line-height:1.6rem}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3.MatCardContent, selector: "mat-card-content" }] });
|
|
33
|
+
}
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValuePropCardComponent, decorators: [{
|
|
35
|
+
type: Component,
|
|
36
|
+
args: [{ selector: 'value-prop-card', template: "<mat-card class=\"reason-block\"\r\n [ngClass]=\"{'card-on-hover':cardOnHover , 'constant-card': !cardOnHover}\">\r\n <mat-card-content class=\"content\">\r\n <div class=\"reason-headline\">\r\n <div class=\"reason-icon\" *ngIf=\"icon\">\r\n <fa-icon [icon]=\"icon\"></fa-icon>\r\n </div>\r\n <div class=\"reason-image\" *ngIf=\"!icon\">\r\n <img [ngStyle]=\"imageStyle\" loading=\"lazy\" [src]=\"valuePropContent.image\">\r\n </div>\r\n <div class=\"reason-title\">\r\n {{valuePropContent.title}}\r\n </div>\r\n </div>\r\n <div class=\"reason-desc\">\r\n {{valuePropContent.description}}\r\n </div>\r\n </mat-card-content>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.content{display:grid;row-gap:1rem;grid-template-rows:max-content auto}.card-on-hover:hover{background-color:#f7f8f9}.constant-card{background-color:#fff}.reason-block{transition:all ease-in-out .2s;height:21rem;max-width:36rem}.reason-block .reason-headline{display:grid;column-gap:1rem;grid-template-columns:max-content auto;grid-template-rows:max-content;align-items:center}.reason-block .reason-headline .reason-icon{color:#155ed4;font-size:3rem}.reason-block .reason-headline .reason-image img{object-fit:contain}.reason-block .reason-headline .reason-title{color:#32353b;font-weight:600;font-size:2rem}.reason-block .reason-title,.reason-block .reason-desc{font-family:inherit;font-size:1.6rem;line-height:1.6rem}\n"] }]
|
|
37
|
+
}], propDecorators: { valuePropContent: [{
|
|
38
|
+
type: Input
|
|
39
|
+
}], cardOnHover: [{
|
|
40
|
+
type: Input
|
|
41
|
+
}], imageSize: [{
|
|
42
|
+
type: Input
|
|
43
|
+
}] } });
|
|
44
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92YWx1ZS1wcm9wLWNhcmQvdmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92YWx1ZS1wcm9wLWNhcmQvdmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7OztBQVN6RCxNQUFNLE9BQU8sc0JBQXNCO0lBQ3hCLGdCQUFnQixDQUFzQjtJQUN0QyxXQUFXLENBQVU7SUFDckIsU0FBUyxDQUFTO0lBQzNCLElBQUksQ0FBVztJQUNmLFVBQVUsQ0FBTTtJQUVoQixRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxFQUFFO1lBQ2xDLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLFFBQW9CLENBQUM7U0FDeEQ7UUFFRCxJQUFJLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxLQUFLLEVBQUU7WUFDL0IsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQztJQUdELGFBQWE7UUFDWCxJQUFJLFNBQVMsR0FBVyxRQUFRLENBQUM7UUFDakMsSUFBSSxJQUFJLENBQUMsU0FBUyxFQUFFO1lBQ2xCLFNBQVMsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDO1NBQzVCO1FBQ0QsSUFBSSxLQUFLLEdBQUc7WUFDVixNQUFNLEVBQUUsU0FBUztZQUNqQixLQUFLLEVBQUUsU0FBUztTQUNqQixDQUFDO1FBRUYsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7SUFDMUIsQ0FBQzt3R0E3QlUsc0JBQXNCOzRGQUF0QixzQkFBc0IsNkpDVG5DLCt4QkFrQlc7OzRGRFRFLHNCQUFzQjtrQkFMbEMsU0FBUzsrQkFDRSxpQkFBaUI7OEJBS2xCLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFNBQVM7c0JBQWpCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgSWNvbk5hbWUgfSBmcm9tICdAZm9ydGF3ZXNvbWUvZm9udGF3ZXNvbWUtc3ZnLWNvcmUnO1xyXG5pbXBvcnQgeyBWYWx1ZVByb3BQcm9wZXJ0aWVzIH0gZnJvbSAnQGpvb2xlci9qb29sZXItd2Vic2l0ZXMtc2hhcmVkJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAndmFsdWUtcHJvcC1jYXJkJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdmFsdWUtcHJvcC1jYXJkLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi92YWx1ZS1wcm9wLWNhcmQuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVmFsdWVQcm9wQ2FyZENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgQElucHV0KCkgdmFsdWVQcm9wQ29udGVudDogVmFsdWVQcm9wUHJvcGVydGllcztcclxuICBASW5wdXQoKSBjYXJkT25Ib3ZlcjogYm9vbGVhbjtcclxuICBASW5wdXQoKSBpbWFnZVNpemU6IHN0cmluZztcclxuICBpY29uOiBJY29uTmFtZTtcclxuICBpbWFnZVN0eWxlOiBhbnk7XHJcblxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMudmFsdWVQcm9wQ29udGVudC5pY29uTmFtZSkge1xyXG4gICAgICB0aGlzLmljb24gPSB0aGlzLnZhbHVlUHJvcENvbnRlbnQuaWNvbk5hbWUgYXMgSWNvbk5hbWU7XHJcbiAgICB9XHJcblxyXG4gICAgaWYgKHRoaXMudmFsdWVQcm9wQ29udGVudC5pbWFnZSkge1xyXG4gICAgICB0aGlzLnNldEltYWdlU3R5bGUoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG5cclxuICBzZXRJbWFnZVN0eWxlKCkge1xyXG4gICAgbGV0IGltYWdlU2l6ZTogc3RyaW5nID0gJzQuNXJlbSc7XHJcbiAgICBpZiAodGhpcy5pbWFnZVNpemUpIHtcclxuICAgICAgaW1hZ2VTaXplID0gdGhpcy5pbWFnZVNpemU7XHJcbiAgICB9XHJcbiAgICBsZXQgc3R5bGUgPSB7XHJcbiAgICAgIGhlaWdodDogaW1hZ2VTaXplLFxyXG4gICAgICB3aWR0aDogaW1hZ2VTaXplXHJcbiAgICB9O1xyXG5cclxuICAgIHRoaXMuaW1hZ2VTdHlsZSA9IHN0eWxlO1xyXG4gIH1cclxufSIsIjxtYXQtY2FyZCBjbGFzcz1cInJlYXNvbi1ibG9ja1wiXHJcbiAgICBbbmdDbGFzc109XCJ7J2NhcmQtb24taG92ZXInOmNhcmRPbkhvdmVyICwgJ2NvbnN0YW50LWNhcmQnOiAhY2FyZE9uSG92ZXJ9XCI+XHJcbiAgICA8bWF0LWNhcmQtY29udGVudCBjbGFzcz1cImNvbnRlbnRcIj5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwicmVhc29uLWhlYWRsaW5lXCI+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJyZWFzb24taWNvblwiICpuZ0lmPVwiaWNvblwiPlxyXG4gICAgICAgICAgICAgICAgPGZhLWljb24gW2ljb25dPVwiaWNvblwiPjwvZmEtaWNvbj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJyZWFzb24taW1hZ2VcIiAqbmdJZj1cIiFpY29uXCI+XHJcbiAgICAgICAgICAgICAgICA8aW1nIFtuZ1N0eWxlXT1cImltYWdlU3R5bGVcIiBsb2FkaW5nPVwibGF6eVwiIFtzcmNdPVwidmFsdWVQcm9wQ29udGVudC5pbWFnZVwiPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInJlYXNvbi10aXRsZVwiPlxyXG4gICAgICAgICAgICAgICAge3t2YWx1ZVByb3BDb250ZW50LnRpdGxlfX1cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInJlYXNvbi1kZXNjXCI+XHJcbiAgICAgICAgICAgIHt7dmFsdWVQcm9wQ29udGVudC5kZXNjcmlwdGlvbn19XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L21hdC1jYXJkLWNvbnRlbnQ+XHJcbjwvbWF0LWNhcmQ+Il19
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "@fortawesome/angular-fontawesome";
|
|
4
|
+
import * as i2 from "@angular/common";
|
|
5
|
+
import * as i3 from "../section-title/section-title.component";
|
|
6
|
+
export class ValuePropsSectionComponent {
|
|
7
|
+
sectionContent;
|
|
8
|
+
selectedImage;
|
|
9
|
+
constructor() { }
|
|
10
|
+
ngOnInit() {
|
|
11
|
+
let i = 0;
|
|
12
|
+
this.selectedImage = this.sectionContent.paragraphs[0].imagePath;
|
|
13
|
+
i++;
|
|
14
|
+
for (let paragraph of this.sectionContent.paragraphs) {
|
|
15
|
+
paragraph.isClicked = false;
|
|
16
|
+
}
|
|
17
|
+
this.sectionContent.paragraphs[0].isClicked = true;
|
|
18
|
+
}
|
|
19
|
+
onChangeImage(imagePath, paragraphIndex) {
|
|
20
|
+
for (let paragraph of this.sectionContent.paragraphs) {
|
|
21
|
+
paragraph.isClicked = false;
|
|
22
|
+
}
|
|
23
|
+
this.selectedImage = imagePath;
|
|
24
|
+
this.sectionContent.paragraphs[paragraphIndex].isClicked = true;
|
|
25
|
+
}
|
|
26
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValuePropsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValuePropsSectionComponent, selector: "value-props-section", inputs: { sectionContent: "sectionContent" }, ngImport: i0, template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\r\n </section-title>\r\n <div class=\"value-prop-image\">\r\n <img loading=\"lazy\" [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n <div class=\"paragraph-items\">\r\n <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\r\n <span class=\"value-prop-icon\">\r\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\r\n <span class=\"paragraph-text\">\r\n {{paragraph.text}}\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"image-buttons-side\">\r\n <img loading=\"lazy\" [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;justify-content:space-between;column-gap:2%;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:58%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{display:flex;flex-wrap:wrap;flex-direction:row;column-gap:1rem}.value-prop .text-side .paragraph{box-sizing:border-box;display:grid;grid-template-columns:5rem auto auto;margin:0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:40rem;height:-moz-fit-content;height:fit-content}@media only screen and (max-width: 725px){.value-prop .text-side .paragraph{width:100%;height:auto;padding:2rem 1rem}}.value-prop .text-side .paragraph:hover .paragraph-text,.value-prop .text-side .paragraph:hover .value-prop-icon{color:#32353b}.value-prop .text-side .paragraph .paragraph-text{color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .one-paragraph{width:100%}.value-prop .text-side .selected-paragraph .paragraph-text{color:#32353b}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.value-prop .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:40%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(2n){flex-direction:row}.value-prop:nth-child(2n) .image-buttons-side{justify-self:center}.value-prop .text-side{justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}.image-text-sort{flex-direction:row-reverse}@media only screen and (max-width: 56.25em){.image-text-sort:nth-child(2n) .image-buttons-side{justify-self:center}}.text-image-sort{flex-direction:row}.paragraph-with-card .text-side .paragraph{padding:1rem;margin:1rem 0rem;border-radius:.7rem;border:.2rem solid rgba(50,53,59,.1);min-height:max-content;height:15rem}.paragraph-with-card .text-side .paragraph:hover{border:.2rem solid #32353b}.paragraph-with-card .text-side .paragraph .value-prop-icon{text-align:center}.paragraph-with-card .text-side .selected-paragraph{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph .paragraph-text{color:#32353b}.paragraph-with-card .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.paragraph-with-card .text-side .selected-paragraph:hover{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase", "descriptionWidth"] }] });
|
|
28
|
+
}
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValuePropsSectionComponent, decorators: [{
|
|
30
|
+
type: Component,
|
|
31
|
+
args: [{ selector: 'value-props-section', template: "<div class=\"value-prop\" [ngClass]=\"{'image-text-sort': sectionContent.paragraphProperties.onRightSide , 'text-image-sort': !sectionContent.paragraphProperties.onRightSide ,'paragraph-with-card':sectionContent.paragraphProperties.withCard }\">\r\n <div class=\"text-side\">\r\n <section-title [sectionTitle]=\"sectionContent.sectionTitle\">\r\n </section-title>\r\n <div class=\"value-prop-image\">\r\n <img loading=\"lazy\" [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n <div class=\"paragraph-items\">\r\n <p *ngFor=\"let paragraph of sectionContent.paragraphs; let j = index\" class=\"paragraph\" (click)=\"onChangeImage(paragraph.imagePath ,j)\" [ngClass]=\"{'selected-paragraph':paragraph.isClicked, 'one-paragraph':sectionContent.paragraphs.length == 1}\">\r\n <span class=\"value-prop-icon\">\r\n <fa-icon [icon]=\"paragraph.iconName\"></fa-icon></span>\r\n <span class=\"paragraph-text\">\r\n {{paragraph.text}}\r\n </span>\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"image-buttons-side\">\r\n <img loading=\"lazy\" [src]=\"selectedImage\" alt=\"\">\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.value-prop{display:flex;justify-content:space-between;column-gap:2%;width:100%}.value-prop .text-side{display:grid;row-gap:1rem;width:58%;padding:2rem 0rem}.value-prop .text-side .value-prop-image{display:none}.value-prop .text-side .paragraph-items{display:flex;flex-wrap:wrap;flex-direction:row;column-gap:1rem}.value-prop .text-side .paragraph{box-sizing:border-box;display:grid;grid-template-columns:5rem auto auto;margin:0rem;align-content:center;align-self:start;cursor:pointer;transition:all ease-in-out .2s;border-radius:1.5rem;column-gap:.5rem;width:40rem;height:-moz-fit-content;height:fit-content}@media only screen and (max-width: 725px){.value-prop .text-side .paragraph{width:100%;height:auto;padding:2rem 1rem}}.value-prop .text-side .paragraph:hover .paragraph-text,.value-prop .text-side .paragraph:hover .value-prop-icon{color:#32353b}.value-prop .text-side .paragraph .paragraph-text{color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon{display:grid;align-content:center;color:#32353b99;transition:all ease-in-out .2s}.value-prop .text-side .paragraph .value-prop-icon fa-icon{font-size:3rem}.value-prop .text-side .one-paragraph{width:100%}.value-prop .text-side .selected-paragraph .paragraph-text{color:#32353b}.value-prop .text-side .selected-paragraph .cta-icon{transform:rotate(0)}.value-prop .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.value-prop .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4;background-color:#fff}.value-prop .image-buttons-side{width:40%;display:grid;align-content:center}.value-prop .image-buttons-side img{width:100%;height:42rem;object-fit:cover;border-radius:1rem}@media only screen and (max-width: 56.25em){.value-prop{flex-wrap:wrap}.value-prop:nth-child(2n){flex-direction:row}.value-prop:nth-child(2n) .image-buttons-side{justify-self:center}.value-prop .text-side{justify-self:left}.value-prop .text-side .value-prop-image{display:grid;width:100%}.value-prop .text-side .value-prop-image img{width:100%;height:35rem;object-fit:cover;border-radius:1rem}.value-prop .image-buttons-side{display:none}}@media only screen and (max-width: 37.5em){.value-prop .text-side .paragraph-items{column-count:1}}.image-text-sort{flex-direction:row-reverse}@media only screen and (max-width: 56.25em){.image-text-sort:nth-child(2n) .image-buttons-side{justify-self:center}}.text-image-sort{flex-direction:row}.paragraph-with-card .text-side .paragraph{padding:1rem;margin:1rem 0rem;border-radius:.7rem;border:.2rem solid rgba(50,53,59,.1);min-height:max-content;height:15rem}.paragraph-with-card .text-side .paragraph:hover{border:.2rem solid #32353b}.paragraph-with-card .text-side .paragraph .value-prop-icon{text-align:center}.paragraph-with-card .text-side .selected-paragraph{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph .paragraph-text{color:#32353b}.paragraph-with-card .text-side .selected-paragraph .value-prop-icon{color:#155ed4}.paragraph-with-card .text-side .selected-paragraph:hover{border:.2rem solid #155ed4}.paragraph-with-card .text-side .selected-paragraph:hover .value-prop-icon{color:#155ed4}\n"] }]
|
|
32
|
+
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
33
|
+
type: Input
|
|
34
|
+
}] } });
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWUtcHJvcHMtc2VjdGlvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9qb29sZXItd2Vic2l0ZXMtc2hhcmVkL3NyYy9saWIvdmFsdWUtcHJvcHMtc2VjdGlvbi92YWx1ZS1wcm9wcy1zZWN0aW9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92YWx1ZS1wcm9wcy1zZWN0aW9uL3ZhbHVlLXByb3BzLXNlY3Rpb24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQVUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBT3pELE1BQU0sT0FBTywwQkFBMEI7SUFDNUIsY0FBYyxDQUFNO0lBQzdCLGFBQWEsQ0FBTTtJQUNuQixnQkFBZ0IsQ0FBQztJQUVqQixRQUFRO1FBQ04sSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQ1YsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLFVBQVUsQ0FBRSxDQUFDLENBQUUsQ0FBQyxTQUFTLENBQUM7UUFDbkUsQ0FBQyxFQUFFLENBQUM7UUFDSixLQUFLLElBQUksU0FBUyxJQUFJLElBQUksQ0FBQyxjQUFjLENBQUMsVUFBVSxFQUFFO1lBQ3BELFNBQVMsQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1NBQzdCO1FBQ0QsSUFBSSxDQUFDLGNBQWMsQ0FBQyxVQUFVLENBQUUsQ0FBQyxDQUFFLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztJQUV2RCxDQUFDO0lBRUQsYUFBYSxDQUFDLFNBQVMsRUFBRSxjQUFjO1FBQ3JDLEtBQUssSUFBSSxTQUFTLElBQUksSUFBSSxDQUFDLGNBQWMsQ0FBQyxVQUFVLEVBQUU7WUFDcEQsU0FBUyxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7U0FDN0I7UUFDRCxJQUFJLENBQUMsYUFBYSxHQUFHLFNBQVMsQ0FBQztRQUMvQixJQUFJLENBQUMsY0FBYyxDQUFDLFVBQVUsQ0FBRSxjQUFjLENBQUUsQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDO0lBQ3BFLENBQUM7d0dBdEJVLDBCQUEwQjs0RkFBMUIsMEJBQTBCLHlHQ1B2QyxpdkNBb0JNOzs0RkRiTywwQkFBMEI7a0JBTHRDLFNBQVM7K0JBQ0UscUJBQXFCOzBFQUt0QixjQUFjO3NCQUF0QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3ZhbHVlLXByb3BzLXNlY3Rpb24nLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi92YWx1ZS1wcm9wcy1zZWN0aW9uLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsgJy4vdmFsdWUtcHJvcHMtc2VjdGlvbi5jb21wb25lbnQuc2NzcycgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVmFsdWVQcm9wc1NlY3Rpb25Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgpIHNlY3Rpb25Db250ZW50OiBhbnk7XHJcbiAgc2VsZWN0ZWRJbWFnZTogYW55O1xyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgbGV0IGkgPSAwO1xyXG4gICAgdGhpcy5zZWxlY3RlZEltYWdlID0gdGhpcy5zZWN0aW9uQ29udGVudC5wYXJhZ3JhcGhzWyAwIF0uaW1hZ2VQYXRoO1xyXG4gICAgaSsrO1xyXG4gICAgZm9yIChsZXQgcGFyYWdyYXBoIG9mIHRoaXMuc2VjdGlvbkNvbnRlbnQucGFyYWdyYXBocykge1xyXG4gICAgICBwYXJhZ3JhcGguaXNDbGlja2VkID0gZmFsc2U7XHJcbiAgICB9XHJcbiAgICB0aGlzLnNlY3Rpb25Db250ZW50LnBhcmFncmFwaHNbIDAgXS5pc0NsaWNrZWQgPSB0cnVlO1xyXG5cclxuICB9XHJcblxyXG4gIG9uQ2hhbmdlSW1hZ2UoaW1hZ2VQYXRoLCBwYXJhZ3JhcGhJbmRleCkge1xyXG4gICAgZm9yIChsZXQgcGFyYWdyYXBoIG9mIHRoaXMuc2VjdGlvbkNvbnRlbnQucGFyYWdyYXBocykge1xyXG4gICAgICBwYXJhZ3JhcGguaXNDbGlja2VkID0gZmFsc2U7XHJcbiAgICB9XHJcbiAgICB0aGlzLnNlbGVjdGVkSW1hZ2UgPSBpbWFnZVBhdGg7XHJcbiAgICB0aGlzLnNlY3Rpb25Db250ZW50LnBhcmFncmFwaHNbIHBhcmFncmFwaEluZGV4IF0uaXNDbGlja2VkID0gdHJ1ZTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInZhbHVlLXByb3BcIiBbbmdDbGFzc109XCJ7J2ltYWdlLXRleHQtc29ydCc6IHNlY3Rpb25Db250ZW50LnBhcmFncmFwaFByb3BlcnRpZXMub25SaWdodFNpZGUgLCAndGV4dC1pbWFnZS1zb3J0JzogIXNlY3Rpb25Db250ZW50LnBhcmFncmFwaFByb3BlcnRpZXMub25SaWdodFNpZGUgLCdwYXJhZ3JhcGgtd2l0aC1jYXJkJzpzZWN0aW9uQ29udGVudC5wYXJhZ3JhcGhQcm9wZXJ0aWVzLndpdGhDYXJkIH1cIj5cclxuICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LXNpZGVcIj5cclxuICAgICAgICA8c2VjdGlvbi10aXRsZSBbc2VjdGlvblRpdGxlXT1cInNlY3Rpb25Db250ZW50LnNlY3Rpb25UaXRsZVwiPlxyXG4gICAgICAgIDwvc2VjdGlvbi10aXRsZT5cclxuICAgICAgICA8ZGl2IGNsYXNzPVwidmFsdWUtcHJvcC1pbWFnZVwiPlxyXG4gICAgICAgICAgICA8aW1nIGxvYWRpbmc9XCJsYXp5XCIgW3NyY109XCJzZWxlY3RlZEltYWdlXCIgYWx0PVwiXCI+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cInBhcmFncmFwaC1pdGVtc1wiPlxyXG4gICAgICAgICAgICA8cCAqbmdGb3I9XCJsZXQgcGFyYWdyYXBoIG9mIHNlY3Rpb25Db250ZW50LnBhcmFncmFwaHM7IGxldCBqID0gaW5kZXhcIiBjbGFzcz1cInBhcmFncmFwaFwiIChjbGljayk9XCJvbkNoYW5nZUltYWdlKHBhcmFncmFwaC5pbWFnZVBhdGggLGopXCIgW25nQ2xhc3NdPVwieydzZWxlY3RlZC1wYXJhZ3JhcGgnOnBhcmFncmFwaC5pc0NsaWNrZWQsICdvbmUtcGFyYWdyYXBoJzpzZWN0aW9uQ29udGVudC5wYXJhZ3JhcGhzLmxlbmd0aCA9PSAxfVwiPlxyXG4gICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ2YWx1ZS1wcm9wLWljb25cIj5cclxuICAgICAgICAgICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJwYXJhZ3JhcGguaWNvbk5hbWVcIj48L2ZhLWljb24+PC9zcGFuPlxyXG4gICAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJwYXJhZ3JhcGgtdGV4dFwiPlxyXG4gICAgICAgICAgICAgICAgICAgIHt7cGFyYWdyYXBoLnRleHR9fVxyXG4gICAgICAgICAgICAgICAgPC9zcGFuPlxyXG4gICAgICAgICAgICA8L3A+XHJcbiAgICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJpbWFnZS1idXR0b25zLXNpZGVcIj5cclxuICAgICAgICA8aW1nIGxvYWRpbmc9XCJsYXp5XCIgW3NyY109XCJzZWxlY3RlZEltYWdlXCIgYWx0PVwiXCI+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+Il19
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { Component, Input } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "@angular/cdk/layout";
|
|
4
|
+
import * as i2 from "@fortawesome/angular-fontawesome";
|
|
5
|
+
import * as i3 from "@angular/common";
|
|
6
|
+
import * as i4 from "primeng/api";
|
|
7
|
+
import * as i5 from "primeng/carousel";
|
|
8
|
+
import * as i6 from "../section-title/section-title.component";
|
|
9
|
+
export class ValuesComponent {
|
|
10
|
+
breakpointObserver;
|
|
11
|
+
sectionContent;
|
|
12
|
+
withBgImage = false;
|
|
13
|
+
isDarkBg;
|
|
14
|
+
isTabletSize;
|
|
15
|
+
newSectionContent;
|
|
16
|
+
constructor(breakpointObserver) {
|
|
17
|
+
this.breakpointObserver = breakpointObserver;
|
|
18
|
+
}
|
|
19
|
+
ngOnInit() {
|
|
20
|
+
this.breakpointObserver.observe([
|
|
21
|
+
"(max-width: 1200px)"
|
|
22
|
+
]).subscribe((result) => {
|
|
23
|
+
if (result.matches) {
|
|
24
|
+
this.isTabletSize = true;
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
this.isTabletSize = false;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
this.newSectionContent = this.sectionContent;
|
|
31
|
+
for (let card of this.newSectionContent.cards) {
|
|
32
|
+
this.newSectionContent.newIcon = card.icon;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValuesComponent, deps: [{ token: i1.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
36
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ValuesComponent, selector: "values", inputs: { sectionContent: "sectionContent", withBgImage: "withBgImage", isDarkBg: "isDarkBg" }, ngImport: i0, template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"newSectionContent.sectionTitle\"></section-title>\r\n <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"card\" *ngFor=\"let card of newSectionContent.cards\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\" *ngIf=\"card.icon\">\r\n <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n </div>\r\n <div class=\"image\" *ngIf=\"!card.icon\">\r\n <img loading=\"lazy\" [src]=\"card.image\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"value-cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"newSectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-card pTemplate=\"item\">\r\n <div class=\"card\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\" *ngIf=\"card.icon\">\r\n <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n </div>\r\n <div class=\"image\" *ngIf=\"!card.icon\">\r\n <img loading=\"lazy\" [src]=\"card.image\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;grid-template-rows:auto auto auto auto;margin-top:5rem;align-items:center;position:relative;row-gap:2rem}.page .background-image{width:100%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.page .values-cards{grid-row:4;display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;place-content:center;gap:3REM;z-index:2;margin:auto;width:60%}.page .card{background-color:#fff;color:#32353b;padding:1rem 2rem;border-radius:2rem;border:.1rem solid #D8D8D8;box-shadow:.2rem .2rem .4rem #00000040;display:flex;flex-direction:column;row-gap:1rem}.page .card .card-headline{display:flex;flex-direction:row;column-gap:2rem;align-items:center}.page .card .icon{color:#155ed4;font-size:3rem}.page .card .image img{width:4rem;height:4rem;aspect-ratio:3/2;object-fit:contain}.page .card .subtitle{font-weight:700;font-size:2.4rem}.page .card .value-description{font-weight:400;font-size:1.4rem}@media only screen and (max-width: 75em){.page{height:auto;display:block}.page .values-cards{margin-top:3rem;display:block;width:100%}.page .card{width:70%;width:90%;margin:2rem auto}}\n"], dependencies: [{ kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i5.Carousel, selector: "p-carousel", inputs: ["page", "numVisible", "numScroll", "responsiveOptions", "orientation", "verticalViewPortHeight", "contentClass", "indicatorsContentClass", "indicatorsContentStyle", "indicatorStyleClass", "indicatorStyle", "value", "circular", "showIndicators", "showNavigators", "autoplayInterval", "style", "styleClass"], outputs: ["onPage"] }, { kind: "component", type: i6.SectionTitleComponent, selector: "section-title", inputs: ["sectionTitle", "withoutTitleCase", "descriptionWidth"] }] });
|
|
37
|
+
}
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValuesComponent, decorators: [{
|
|
39
|
+
type: Component,
|
|
40
|
+
args: [{ selector: 'values', template: "<div class=\"page\">\r\n <section-title [sectionTitle]=\"newSectionContent.sectionTitle\"></section-title>\r\n <div class=\"values-cards\" *ngIf=\"!isTabletSize\">\r\n <div class=\"card\" *ngFor=\"let card of newSectionContent.cards\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\" *ngIf=\"card.icon\">\r\n <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n </div>\r\n <div class=\"image\" *ngIf=\"!card.icon\">\r\n <img loading=\"lazy\" [src]=\"card.image\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"value-cards\" *ngIf=\"isTabletSize\">\r\n <p-carousel class=\"custom\" [value]=\"newSectionContent.cards\" [numVisible]='1' [numScroll]='1' [page]=\"0\" orientation=\"horizontal\" [circular]=\"true\">\r\n <ng-template let-card pTemplate=\"item\">\r\n <div class=\"card\">\r\n <div class=\"card-headline\">\r\n <div class=\"icon\" *ngIf=\"card.icon\">\r\n <fa-icon [icon]=\"card.icon\"></fa-icon>\r\n </div>\r\n <div class=\"image\" *ngIf=\"!card.icon\">\r\n <img loading=\"lazy\" [src]=\"card.image\" alt=\"\">\r\n </div>\r\n <div class=\"subtitle\">\r\n {{card.title}}\r\n </div>\r\n </div>\r\n <div class=\"value-description\">\r\n {{card.subtitle}}\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-carousel>\r\n </div>\r\n</div>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.page{display:grid;grid-template-rows:auto auto auto auto;margin-top:5rem;align-items:center;position:relative;row-gap:2rem}.page .background-image{width:100%;height:40%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1}.page .values-cards{grid-row:4;display:grid;grid-template-columns:49% 49%;grid-template-rows:auto auto;place-content:center;gap:3REM;z-index:2;margin:auto;width:60%}.page .card{background-color:#fff;color:#32353b;padding:1rem 2rem;border-radius:2rem;border:.1rem solid #D8D8D8;box-shadow:.2rem .2rem .4rem #00000040;display:flex;flex-direction:column;row-gap:1rem}.page .card .card-headline{display:flex;flex-direction:row;column-gap:2rem;align-items:center}.page .card .icon{color:#155ed4;font-size:3rem}.page .card .image img{width:4rem;height:4rem;aspect-ratio:3/2;object-fit:contain}.page .card .subtitle{font-weight:700;font-size:2.4rem}.page .card .value-description{font-weight:400;font-size:1.4rem}@media only screen and (max-width: 75em){.page{height:auto;display:block}.page .values-cards{margin-top:3rem;display:block;width:100%}.page .card{width:70%;width:90%;margin:2rem auto}}\n"] }]
|
|
41
|
+
}], ctorParameters: function () { return [{ type: i1.BreakpointObserver }]; }, propDecorators: { sectionContent: [{
|
|
42
|
+
type: Input
|
|
43
|
+
}], withBgImage: [{
|
|
44
|
+
type: Input
|
|
45
|
+
}], isDarkBg: [{
|
|
46
|
+
type: Input
|
|
47
|
+
}] } });
|
|
48
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmFsdWVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92YWx1ZXMvdmFsdWVzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92YWx1ZXMvdmFsdWVzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOzs7Ozs7OztBQVV6RCxNQUFNLE9BQU8sZUFBZTtJQU9OO0lBTlgsY0FBYyxDQUFnQjtJQUM5QixXQUFXLEdBQVksS0FBSyxDQUFDO0lBQzdCLFFBQVEsQ0FBVTtJQUMzQixZQUFZLENBQVU7SUFDdEIsaUJBQWlCLENBQU07SUFFdkIsWUFBb0Isa0JBQXNDO1FBQXRDLHVCQUFrQixHQUFsQixrQkFBa0IsQ0FBb0I7SUFHMUQsQ0FBQztJQUNELFFBQVE7UUFFTixJQUFJLENBQUMsa0JBQWtCLENBQUMsT0FBTyxDQUFDO1lBQzlCLHFCQUFxQjtTQUN0QixDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsTUFBdUIsRUFBRSxFQUFFO1lBQ3ZDLElBQUksTUFBTSxDQUFDLE9BQU8sRUFBRTtnQkFDbEIsSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUM7YUFDMUI7aUJBQU07Z0JBQ0wsSUFBSSxDQUFDLFlBQVksR0FBRyxLQUFLLENBQUM7YUFDM0I7UUFDSCxDQUFDLENBQUMsQ0FBQztRQUVILElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDO1FBRTdDLEtBQUssSUFBSSxJQUFJLElBQUksSUFBSSxDQUFDLGlCQUFpQixDQUFDLEtBQUssRUFBRTtZQUM3QyxJQUFJLENBQUMsaUJBQWlCLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxJQUFnQixDQUFDO1NBQ3hEO0lBQ0gsQ0FBQzt3R0E1QlUsZUFBZTs0RkFBZixlQUFlLDhJQ1Y1QixrK0RBMENNOzs0RkRoQ08sZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxRQUFRO3lHQUtULGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IENvbXBhbnlWYWx1ZXMgfSBmcm9tICcuLi9tb2RlbHMvYWJvdXQtdXMtc2VjdGlvbi5tb2RlbCc7XHJcbmltcG9ydCB7IEJyZWFrcG9pbnRPYnNlcnZlciwgQnJlYWtwb2ludFN0YXRlIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2xheW91dCc7XHJcbmltcG9ydCB7IEljb25OYW1lIH0gZnJvbSAnQGZvcnRhd2Vzb21lL2ZvbnRhd2Vzb21lLXN2Zy1jb3JlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAndmFsdWVzJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdmFsdWVzLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsgJy4vdmFsdWVzLmNvbXBvbmVudC5zY3NzJyBdXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBWYWx1ZXNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgpIHNlY3Rpb25Db250ZW50OiBDb21wYW55VmFsdWVzO1xyXG4gIEBJbnB1dCgpIHdpdGhCZ0ltYWdlOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgaXNEYXJrQmc6IGJvb2xlYW47XHJcbiAgaXNUYWJsZXRTaXplOiBib29sZWFuO1xyXG4gIG5ld1NlY3Rpb25Db250ZW50OiBhbnk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgYnJlYWtwb2ludE9ic2VydmVyOiBCcmVha3BvaW50T2JzZXJ2ZXJcclxuICApIHtcclxuXHJcbiAgfVxyXG4gIG5nT25Jbml0KCk6IHZvaWQge1xyXG5cclxuICAgIHRoaXMuYnJlYWtwb2ludE9ic2VydmVyLm9ic2VydmUoW1xyXG4gICAgICBcIihtYXgtd2lkdGg6IDEyMDBweClcIlxyXG4gICAgXSkuc3Vic2NyaWJlKChyZXN1bHQ6IEJyZWFrcG9pbnRTdGF0ZSkgPT4ge1xyXG4gICAgICBpZiAocmVzdWx0Lm1hdGNoZXMpIHtcclxuICAgICAgICB0aGlzLmlzVGFibGV0U2l6ZSA9IHRydWU7XHJcbiAgICAgIH0gZWxzZSB7XHJcbiAgICAgICAgdGhpcy5pc1RhYmxldFNpemUgPSBmYWxzZTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcblxyXG4gICAgdGhpcy5uZXdTZWN0aW9uQ29udGVudCA9IHRoaXMuc2VjdGlvbkNvbnRlbnQ7XHJcblxyXG4gICAgZm9yIChsZXQgY2FyZCBvZiB0aGlzLm5ld1NlY3Rpb25Db250ZW50LmNhcmRzKSB7XHJcbiAgICAgIHRoaXMubmV3U2VjdGlvbkNvbnRlbnQubmV3SWNvbiA9IGNhcmQuaWNvbiBhcyBJY29uTmFtZTtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInBhZ2VcIj5cclxuICAgIDxzZWN0aW9uLXRpdGxlIFtzZWN0aW9uVGl0bGVdPVwibmV3U2VjdGlvbkNvbnRlbnQuc2VjdGlvblRpdGxlXCI+PC9zZWN0aW9uLXRpdGxlPlxyXG4gICAgPGRpdiBjbGFzcz1cInZhbHVlcy1jYXJkc1wiICpuZ0lmPVwiIWlzVGFibGV0U2l6ZVwiPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjYXJkXCIgKm5nRm9yPVwibGV0IGNhcmQgb2YgbmV3U2VjdGlvbkNvbnRlbnQuY2FyZHNcIj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmQtaGVhZGxpbmVcIj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJpY29uXCIgKm5nSWY9XCJjYXJkLmljb25cIj5cclxuICAgICAgICAgICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJjYXJkLmljb25cIj48L2ZhLWljb24+XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJpbWFnZVwiICpuZ0lmPVwiIWNhcmQuaWNvblwiPlxyXG4gICAgICAgICAgICAgICAgICAgIDxpbWcgbG9hZGluZz1cImxhenlcIiBbc3JjXT1cImNhcmQuaW1hZ2VcIiBhbHQ9XCJcIj5cclxuICAgICAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInN1YnRpdGxlXCI+XHJcbiAgICAgICAgICAgICAgICAgICAge3tjYXJkLnRpdGxlfX1cclxuICAgICAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInZhbHVlLWRlc2NyaXB0aW9uXCI+XHJcbiAgICAgICAgICAgICAgICB7e2NhcmQuc3VidGl0bGV9fVxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cInZhbHVlLWNhcmRzXCIgKm5nSWY9XCJpc1RhYmxldFNpemVcIj5cclxuICAgICAgICA8cC1jYXJvdXNlbCBjbGFzcz1cImN1c3RvbVwiIFt2YWx1ZV09XCJuZXdTZWN0aW9uQ29udGVudC5jYXJkc1wiIFtudW1WaXNpYmxlXT0nMScgW251bVNjcm9sbF09JzEnIFtwYWdlXT1cIjBcIiBvcmllbnRhdGlvbj1cImhvcml6b250YWxcIiBbY2lyY3VsYXJdPVwidHJ1ZVwiPlxyXG4gICAgICAgICAgICA8bmctdGVtcGxhdGUgbGV0LWNhcmQgcFRlbXBsYXRlPVwiaXRlbVwiPlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImNhcmRcIj5cclxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiY2FyZC1oZWFkbGluZVwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaWNvblwiICpuZ0lmPVwiY2FyZC5pY29uXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZmEtaWNvbiBbaWNvbl09XCJjYXJkLmljb25cIj48L2ZhLWljb24+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIDwvZGl2PlxyXG4gICAgICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaW1hZ2VcIiAqbmdJZj1cIiFjYXJkLmljb25cIj5cclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxpbWcgbG9hZGluZz1cImxhenlcIiBbc3JjXT1cImNhcmQuaW1hZ2VcIiBhbHQ9XCJcIj5cclxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzdWJ0aXRsZVwiPlxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAge3tjYXJkLnRpdGxlfX1cclxuICAgICAgICAgICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInZhbHVlLWRlc2NyaXB0aW9uXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHt7Y2FyZC5zdWJ0aXRsZX19XHJcbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgICAgICA8L3AtY2Fyb3VzZWw+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+Il19
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
import * as i1 from "@fortawesome/angular-fontawesome";
|
|
4
|
+
import * as i2 from "@angular/common";
|
|
5
|
+
import * as i3 from "@angular/material/card";
|
|
6
|
+
export class VerticalSideTabsComponent {
|
|
7
|
+
panelOpenState = false;
|
|
8
|
+
tabs;
|
|
9
|
+
selectedOption = [];
|
|
10
|
+
tabChanged = new EventEmitter();
|
|
11
|
+
constructor() { }
|
|
12
|
+
ngOnInit() {
|
|
13
|
+
this.changeTab(0);
|
|
14
|
+
}
|
|
15
|
+
changeTab(index) {
|
|
16
|
+
for (let i = 0; i < this.tabs.length; i++) {
|
|
17
|
+
this.selectedOption[i] = false;
|
|
18
|
+
}
|
|
19
|
+
this.selectedOption[index] = true;
|
|
20
|
+
this.tabChanged.emit(this.tabs[index].tabContent);
|
|
21
|
+
}
|
|
22
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VerticalSideTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: VerticalSideTabsComponent, selector: "vertical-side-tabs", inputs: { tabs: "tabs" }, outputs: { tabChanged: "tabChanged" }, ngImport: i0, template: "<mat-card class=\"as-items\">\r\n <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\r\n <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \r\n 'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\r\n <div class=\"icon-text\">\r\n <div class=\"icon\"><fa-icon [icon]=\"tab.iconName\" class=\"tab-icon\"></fa-icon></div>\r\n <h3 class=\"text\">\r\n {{tab.title}}\r\n </h3>\r\n </div>\r\n </button>\r\n </div>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.as-items{padding:2rem 1rem;border:.1rem solid #f7f8f9;border-radius:1rem;display:flex;flex-direction:column;height:100%}.as-items .as-btn{border:none;border-left:.3rem solid rgba(50,53,59,.6);margin:auto;width:100%;text-align:left;display:inline;padding:2rem 4%;transition:all ease-in-out .1s;cursor:pointer}.as-items .as-btn:hover{border-left:.3rem solid #32353B;color:#32353b}.as-items .icon-text{display:flex;align-items:center;padding:0 .5rem;font-family:inherit}.as-items .icon-text .icon{display:inline-block;vertical-align:middle;margin-right:2rem}.as-items .icon-text .icon fa-icon.tab-icon{width:.2rem;height:.2rem}.as-items .item-not-clicked{color:#32353b99;background-color:#fff}.as-items .item-clicked{background-color:#fff;border-left:.3rem solid #155ED4;color:#155ed4}.as-items .item-clicked:hover{border-left:.3rem solid #155ED4;color:#155ed4}@media only screen and (max-width: 56.25em){.as-items{flex-direction:row;width:100%}.as-items .as-btn{border:none;border-bottom:.3rem solid rgba(50,53,59,.6)}.as-items .as-btn:hover{border-left:none;border-bottom:.3rem solid #32353B;color:#32353b}.as-items .item-clicked{border-bottom:.3rem solid #155ED4}.as-items .item-clicked:hover{border-left:none;border-bottom:.3rem solid #155ED4;color:#155ed4}.as-items .as-item{flex-grow:1;width:auto}.as-items .icon-text{flex-direction:column;text-align:center}}\n"], dependencies: [{ kind: "component", type: i1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }] });
|
|
24
|
+
}
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VerticalSideTabsComponent, decorators: [{
|
|
26
|
+
type: Component,
|
|
27
|
+
args: [{ selector: 'vertical-side-tabs', template: "<mat-card class=\"as-items\">\r\n <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\r\n <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \r\n 'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\r\n <div class=\"icon-text\">\r\n <div class=\"icon\"><fa-icon [icon]=\"tab.iconName\" class=\"tab-icon\"></fa-icon></div>\r\n <h3 class=\"text\">\r\n {{tab.title}}\r\n </h3>\r\n </div>\r\n </button>\r\n </div>\r\n</mat-card>", styles: ["html{font-size:62.5%;scroll-behavior:smooth}@media only screen and (max-width: 112.5em){html{font-size:56.25%}}@media only screen and (max-width: 75em){html{font-size:56.25%}}@media only screen and (max-width: 56.25em){html{font-size:50%}}@media only screen and (min-width: 112.5em){html{font-size:75%}}app-root{font-size:1.6rem;font-family:inherit}input{font-size:1.2rem;padding:.5rem}input:focus{outline:none}.as-items{padding:2rem 1rem;border:.1rem solid #f7f8f9;border-radius:1rem;display:flex;flex-direction:column;height:100%}.as-items .as-btn{border:none;border-left:.3rem solid rgba(50,53,59,.6);margin:auto;width:100%;text-align:left;display:inline;padding:2rem 4%;transition:all ease-in-out .1s;cursor:pointer}.as-items .as-btn:hover{border-left:.3rem solid #32353B;color:#32353b}.as-items .icon-text{display:flex;align-items:center;padding:0 .5rem;font-family:inherit}.as-items .icon-text .icon{display:inline-block;vertical-align:middle;margin-right:2rem}.as-items .icon-text .icon fa-icon.tab-icon{width:.2rem;height:.2rem}.as-items .item-not-clicked{color:#32353b99;background-color:#fff}.as-items .item-clicked{background-color:#fff;border-left:.3rem solid #155ED4;color:#155ed4}.as-items .item-clicked:hover{border-left:.3rem solid #155ED4;color:#155ed4}@media only screen and (max-width: 56.25em){.as-items{flex-direction:row;width:100%}.as-items .as-btn{border:none;border-bottom:.3rem solid rgba(50,53,59,.6)}.as-items .as-btn:hover{border-left:none;border-bottom:.3rem solid #32353B;color:#32353b}.as-items .item-clicked{border-bottom:.3rem solid #155ED4}.as-items .item-clicked:hover{border-left:none;border-bottom:.3rem solid #155ED4;color:#155ed4}.as-items .as-item{flex-grow:1;width:auto}.as-items .icon-text{flex-direction:column;text-align:center}}\n"] }]
|
|
28
|
+
}], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
|
|
29
|
+
type: Input
|
|
30
|
+
}], tabChanged: [{
|
|
31
|
+
type: Output
|
|
32
|
+
}] } });
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVydGljYWwtc2lkZS10YWJzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92ZXJ0aWNhbC1zaWRlLXRhYnMvdmVydGljYWwtc2lkZS10YWJzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2pvb2xlci13ZWJzaXRlcy1zaGFyZWQvc3JjL2xpYi92ZXJ0aWNhbC1zaWRlLXRhYnMvdmVydGljYWwtc2lkZS10YWJzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBTy9FLE1BQU0sT0FBTyx5QkFBeUI7SUFDN0IsY0FBYyxHQUFZLEtBQUssQ0FBQztJQUM5QixJQUFJLENBQW9CO0lBQ2pDLGNBQWMsR0FBYyxFQUFFLENBQUM7SUFDckIsVUFBVSxHQUFzQixJQUFJLFlBQVksRUFBRSxDQUFDO0lBRTdELGdCQUFnQixDQUFDO0lBRWpCLFFBQVE7UUFDTixJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBQ3BCLENBQUM7SUFFRCxTQUFTLENBQUMsS0FBYTtRQUNyQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDekMsSUFBSSxDQUFDLGNBQWMsQ0FBRSxDQUFDLENBQUUsR0FBRyxLQUFLLENBQUM7U0FDbEM7UUFFRCxJQUFJLENBQUMsY0FBYyxDQUFFLEtBQUssQ0FBRSxHQUFHLElBQUksQ0FBQztRQUNwQyxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFFLEtBQUssQ0FBRSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ3RELENBQUM7d0dBbkJVLHlCQUF5Qjs0RkFBekIseUJBQXlCLDJIQ1B0Qyw2a0JBWVc7OzRGRExFLHlCQUF5QjtrQkFMckMsU0FBUzsrQkFDRSxvQkFBb0I7MEVBTXJCLElBQUk7c0JBQVosS0FBSztnQkFFSSxVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBWZXJ0aWNhbFNpZGVUYWIgfSBmcm9tICcuLi9tb2RlbHMvdmVydGljYWwtc2lkZS10YWIubW9kZWwnO1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3ZlcnRpY2FsLXNpZGUtdGFicycsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3ZlcnRpY2FsLXNpZGUtdGFicy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbICcuL3ZlcnRpY2FsLXNpZGUtdGFicy5jb21wb25lbnQuc2NzcycgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVmVydGljYWxTaWRlVGFic0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgcHVibGljIHBhbmVsT3BlblN0YXRlOiBib29sZWFuID0gZmFsc2U7XHJcbiAgQElucHV0KCkgdGFiczogVmVydGljYWxTaWRlVGFiW107XHJcbiAgc2VsZWN0ZWRPcHRpb246IGJvb2xlYW5bXSA9IFtdO1xyXG4gIEBPdXRwdXQoKSB0YWJDaGFuZ2VkOiBFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7IH1cclxuXHJcbiAgbmdPbkluaXQoKTogdm9pZCB7XHJcbiAgICB0aGlzLmNoYW5nZVRhYigwKTtcclxuICB9XHJcblxyXG4gIGNoYW5nZVRhYihpbmRleDogbnVtYmVyKSB7XHJcbiAgICBmb3IgKGxldCBpID0gMDsgaSA8IHRoaXMudGFicy5sZW5ndGg7IGkrKykge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkT3B0aW9uWyBpIF0gPSBmYWxzZTtcclxuICAgIH1cclxuXHJcbiAgICB0aGlzLnNlbGVjdGVkT3B0aW9uWyBpbmRleCBdID0gdHJ1ZTtcclxuICAgIHRoaXMudGFiQ2hhbmdlZC5lbWl0KHRoaXMudGFic1sgaW5kZXggXS50YWJDb250ZW50KTtcclxuICB9XHJcbn1cclxuIiwiPG1hdC1jYXJkIGNsYXNzPVwiYXMtaXRlbXNcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJhcy1pdGVtXCIgKm5nRm9yPVwibGV0IHRhYiBvZiB0YWJzIDsgbGV0IGkgPSBpbmRleFwiPlxyXG4gICAgICAgIDxidXR0b24gY2xhc3M9XCJhcy1idG5cIiBbbmdDbGFzc109XCJ7J2l0ZW0tY2xpY2tlZCc6c2VsZWN0ZWRPcHRpb25baV0sIFxyXG4gICAgICAgICdpdGVtLW5vdC1jbGlja2VkJzohc2VsZWN0ZWRPcHRpb25baV19XCIgKGNsaWNrKT1cImNoYW5nZVRhYihpKVwiPlxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaWNvbi10ZXh0XCI+XHJcbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiaWNvblwiPjxmYS1pY29uIFtpY29uXT1cInRhYi5pY29uTmFtZVwiIGNsYXNzPVwidGFiLWljb25cIj48L2ZhLWljb24+PC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0XCI+XHJcbiAgICAgICAgICAgICAgICAgICAge3t0YWIudGl0bGV9fVxyXG4gICAgICAgICAgICAgICAgPC9oMz5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuPC9tYXQtY2FyZD4iXX0=
|