@jooler/jooler-websites-shared 0.0.249 → 0.0.251
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/esm2022/lib/call-to-action-section/call-to-action-section.component.mjs +2 -2
- package/esm2022/lib/image-gallery-modal/image-gallery-modal.component.mjs +46 -29
- package/esm2022/lib/jooler-websites-shared.module.mjs +3 -13
- package/esm2022/lib/models/gallery-item.interface.mjs +2 -0
- package/esm2022/lib/pricing-plans/pricing-plans.component.mjs +2 -2
- package/esm2022/lib/vertical-side-tabs/vertical-side-tabs.component.mjs +2 -2
- package/esm2022/public-api.mjs +2 -4
- package/fesm2022/jooler-websites-shared.mjs +54 -90
- package/fesm2022/jooler-websites-shared.mjs.map +1 -1
- package/lib/image-gallery-modal/image-gallery-modal.component.d.ts +5 -5
- package/lib/jooler-websites-shared.module.d.ts +11 -13
- package/lib/models/gallery-item.interface.d.ts +7 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -3
- package/esm2022/lib/faq-category-listing/faq-category-listing.component.mjs +0 -28
- package/esm2022/lib/faq-listing/faq-listing.component.mjs +0 -27
- package/esm2022/lib/models/faq-category.model.mjs +0 -9
- package/esm2022/lib/models/faq.model.mjs +0 -7
- package/esm2022/lib/models/gallery-items-properties.model.mjs +0 -2
- package/lib/faq-category-listing/faq-category-listing.component.d.ts +0 -14
- package/lib/faq-listing/faq-listing.component.d.ts +0 -13
- package/lib/models/faq-category.model.d.ts +0 -9
- package/lib/models/faq.model.d.ts +0 -7
- package/lib/models/gallery-items-properties.model.d.ts +0 -6
|
@@ -214,11 +214,11 @@ class PricingPlansComponent {
|
|
|
214
214
|
return val.split('|');
|
|
215
215
|
}
|
|
216
216
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PricingPlansComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
217
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlan: "servicePlan" }, outputs: { onClickCTA: "onClickCTA" }, ngImport: i0, template: "<div class=\"plan-content\">\n <div class=\"title-price-desc\">\n <div class=\"plan-title\">\n {{servicePlan.name}}\n </div>\n\n <div class=\"service-price\">\n <span *ngIf=\"isNumber(servicePlan.price)\" class=\"big-price\">\n {{ servicePlan.price | currency : 'USD' : 'symbol' : '1.0-0' }}\n </span>\n \n <div *ngIf=\"isFormula(servicePlan.price)\" class=\"formula-container\">\n <span class=\"big-price\">\n ${{ getFormulaParts($any(servicePlan.price))[0] }}\n </span>\n <span class=\"sub-price\">\n {{ getFormulaParts($any(servicePlan.price))[1] }}\n </span>\n </div>\n \n <span *ngIf=\"!isNumber(servicePlan.price) && !isFormula(servicePlan.price)\" class=\"text-price\">\n {{ servicePlan.price }}\n </span>\n </div>\n\n <span>/{{servicePlan.frequency}}</span>\n\n <div class=\"description\">\n {{servicePlan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\" *ngIf=\"perk.tooltipMessage\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button [requireAuth]=\"servicePlan.button.requiresAuth\"\n [targetRoute]=\"servicePlan.button.route\" authRoute [navigationExtras]=\"servicePlan.button.navigationExtras\"\n class=\"button\">\n {{servicePlan.button.label}}\n </button>\n </div>\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}.plan-content{display:flex;flex-direction:column;background:#fff;border-radius:1rem;padding:2rem;justify-content:space-between;max-width:420px;margin:0 auto;width:100%;box-sizing:border-box;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%}.plan-content .title-price-desc{display:flex;flex-direction:column;align-items:center;text-align:center}.plan-content .title-price-desc .description{min-height:5rem;font-size:1.4rem;color:#32353b;margin:1rem auto}.plan-content .divider{width:92%;border:.1rem solid #
|
|
217
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PricingPlansComponent, selector: "pricing-plans", inputs: { servicePlan: "servicePlan" }, outputs: { onClickCTA: "onClickCTA" }, ngImport: i0, template: "<div class=\"plan-content\">\n <div class=\"title-price-desc\">\n <div class=\"plan-title\">\n {{servicePlan.name}}\n </div>\n\n <div class=\"service-price\">\n <span *ngIf=\"isNumber(servicePlan.price)\" class=\"big-price\">\n {{ servicePlan.price | currency : 'USD' : 'symbol' : '1.0-0' }}\n </span>\n \n <div *ngIf=\"isFormula(servicePlan.price)\" class=\"formula-container\">\n <span class=\"big-price\">\n ${{ getFormulaParts($any(servicePlan.price))[0] }}\n </span>\n <span class=\"sub-price\">\n {{ getFormulaParts($any(servicePlan.price))[1] }}\n </span>\n </div>\n \n <span *ngIf=\"!isNumber(servicePlan.price) && !isFormula(servicePlan.price)\" class=\"text-price\">\n {{ servicePlan.price }}\n </span>\n </div>\n\n <span>/{{servicePlan.frequency}}</span>\n\n <div class=\"description\">\n {{servicePlan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\" *ngIf=\"perk.tooltipMessage\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button [requireAuth]=\"servicePlan.button.requiresAuth\"\n [targetRoute]=\"servicePlan.button.route\" authRoute [navigationExtras]=\"servicePlan.button.navigationExtras\"\n class=\"button\">\n {{servicePlan.button.label}}\n </button>\n </div>\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}.plan-content{display:flex;flex-direction:column;background:#fff;border-radius:1rem;padding:2rem;justify-content:space-between;max-width:420px;margin:0 auto;width:100%;box-sizing:border-box;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%}.plan-content .title-price-desc{display:flex;flex-direction:column;align-items:center;text-align:center}.plan-content .title-price-desc .description{min-height:5rem;font-size:1.4rem;color:#32353b;margin:1rem auto}.plan-content .divider{width:92%;border:.1rem solid #155ed4;margin:1rem auto}.plan-content .plan-title{grid-row:1;color:#155ed4;text-transform:uppercase;font-weight:700;font-size:2rem;padding:1rem 0rem;text-align:center}.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.4rem;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{text-align:center;display:flex;justify-content:center;align-items:center;margin:.5rem}.plan-content .service-price .big-price{font-size:4.2rem;font-weight:800;color:#12957e;line-height:1}.plan-content .service-price .formula-container{display:flex;flex-direction:column;align-items:center}.plan-content .service-price .formula-container .sub-price{font-size:2.4rem;font-weight:600;color:#f0509c;margin-top:.5rem}.plan-content .service-price .text-price{font-size:2.4rem;font-weight:700;color:#12957e}.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%}.plan-content .check-icon{color:#32353b}\n"], dependencies: [{ kind: "component", type: i2$1.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$1.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: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: AuthRouteDirective, selector: "[authRoute]", inputs: ["targetRoute", "requireAuth", "navigationExtras"] }, { kind: "pipe", type: i2.CurrencyPipe, name: "currency" }] });
|
|
218
218
|
}
|
|
219
219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PricingPlansComponent, decorators: [{
|
|
220
220
|
type: Component,
|
|
221
|
-
args: [{ selector: 'pricing-plans', template: "<div class=\"plan-content\">\n <div class=\"title-price-desc\">\n <div class=\"plan-title\">\n {{servicePlan.name}}\n </div>\n\n <div class=\"service-price\">\n <span *ngIf=\"isNumber(servicePlan.price)\" class=\"big-price\">\n {{ servicePlan.price | currency : 'USD' : 'symbol' : '1.0-0' }}\n </span>\n \n <div *ngIf=\"isFormula(servicePlan.price)\" class=\"formula-container\">\n <span class=\"big-price\">\n ${{ getFormulaParts($any(servicePlan.price))[0] }}\n </span>\n <span class=\"sub-price\">\n {{ getFormulaParts($any(servicePlan.price))[1] }}\n </span>\n </div>\n \n <span *ngIf=\"!isNumber(servicePlan.price) && !isFormula(servicePlan.price)\" class=\"text-price\">\n {{ servicePlan.price }}\n </span>\n </div>\n\n <span>/{{servicePlan.frequency}}</span>\n\n <div class=\"description\">\n {{servicePlan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\" *ngIf=\"perk.tooltipMessage\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button [requireAuth]=\"servicePlan.button.requiresAuth\"\n [targetRoute]=\"servicePlan.button.route\" authRoute [navigationExtras]=\"servicePlan.button.navigationExtras\"\n class=\"button\">\n {{servicePlan.button.label}}\n </button>\n </div>\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}.plan-content{display:flex;flex-direction:column;background:#fff;border-radius:1rem;padding:2rem;justify-content:space-between;max-width:420px;margin:0 auto;width:100%;box-sizing:border-box;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%}.plan-content .title-price-desc{display:flex;flex-direction:column;align-items:center;text-align:center}.plan-content .title-price-desc .description{min-height:5rem;font-size:1.4rem;color:#32353b;margin:1rem auto}.plan-content .divider{width:92%;border:.1rem solid #
|
|
221
|
+
args: [{ selector: 'pricing-plans', template: "<div class=\"plan-content\">\n <div class=\"title-price-desc\">\n <div class=\"plan-title\">\n {{servicePlan.name}}\n </div>\n\n <div class=\"service-price\">\n <span *ngIf=\"isNumber(servicePlan.price)\" class=\"big-price\">\n {{ servicePlan.price | currency : 'USD' : 'symbol' : '1.0-0' }}\n </span>\n \n <div *ngIf=\"isFormula(servicePlan.price)\" class=\"formula-container\">\n <span class=\"big-price\">\n ${{ getFormulaParts($any(servicePlan.price))[0] }}\n </span>\n <span class=\"sub-price\">\n {{ getFormulaParts($any(servicePlan.price))[1] }}\n </span>\n </div>\n \n <span *ngIf=\"!isNumber(servicePlan.price) && !isFormula(servicePlan.price)\" class=\"text-price\">\n {{ servicePlan.price }}\n </span>\n </div>\n\n <span>/{{servicePlan.frequency}}</span>\n\n <div class=\"description\">\n {{servicePlan.description}}\n </div>\n <div class=\"divider\"></div>\n </div>\n <div class=\"perks\">\n <div class=\"perk\" *ngFor=\"let perk of servicePlan.perks; let switchStyle = index\">\n <span class=\"check-icon\">\n <fa-icon icon=\"check\"></fa-icon>\n </span>\n <div class=\"service-description\">\n <div class=\"service-perk\">\n {{perk.perk}}\n </div>\n <span class=\"exclamation-mark\" *ngIf=\"perk.tooltipMessage\">\n <fa-icon #tooltip=\"matTooltip\" [matTooltip]=\"perk.tooltipMessage\" [matTooltipPosition]=\"'right'\"\n icon=\"circle-exclamation\"></fa-icon>\n </span>\n </div>\n </div>\n </div>\n <div class=\"registration-button\">\n <button mat-raised-button [requireAuth]=\"servicePlan.button.requiresAuth\"\n [targetRoute]=\"servicePlan.button.route\" authRoute [navigationExtras]=\"servicePlan.button.navigationExtras\"\n class=\"button\">\n {{servicePlan.button.label}}\n </button>\n </div>\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}.plan-content{display:flex;flex-direction:column;background:#fff;border-radius:1rem;padding:2rem;justify-content:space-between;max-width:420px;margin:0 auto;width:100%;box-sizing:border-box;transition:all .2s ease-in-out;box-shadow:#0000001f 0 .1rem .3rem,#0000003d 0 .1rem .2rem;height:100%}.plan-content .title-price-desc{display:flex;flex-direction:column;align-items:center;text-align:center}.plan-content .title-price-desc .description{min-height:5rem;font-size:1.4rem;color:#32353b;margin:1rem auto}.plan-content .divider{width:92%;border:.1rem solid #155ed4;margin:1rem auto}.plan-content .plan-title{grid-row:1;color:#155ed4;text-transform:uppercase;font-weight:700;font-size:2rem;padding:1rem 0rem;text-align:center}.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.4rem;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{text-align:center;display:flex;justify-content:center;align-items:center;margin:.5rem}.plan-content .service-price .big-price{font-size:4.2rem;font-weight:800;color:#12957e;line-height:1}.plan-content .service-price .formula-container{display:flex;flex-direction:column;align-items:center}.plan-content .service-price .formula-container .sub-price{font-size:2.4rem;font-weight:600;color:#f0509c;margin-top:.5rem}.plan-content .service-price .text-price{font-size:2.4rem;font-weight:700;color:#12957e}.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%}.plan-content .check-icon{color:#32353b}\n"] }]
|
|
222
222
|
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { servicePlan: [{
|
|
223
223
|
type: Input
|
|
224
224
|
}], onClickCTA: [{
|
|
@@ -279,45 +279,59 @@ class ImageGalleryModal {
|
|
|
279
279
|
this.currentIndex = index;
|
|
280
280
|
this.currentImageGalleryModal = this.galleryData[index];
|
|
281
281
|
}
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
282
|
+
onclickPrev() {
|
|
283
|
+
this.currentIndex--; // Decrement for Previous
|
|
284
|
+
if (this.currentIndex < 0) {
|
|
285
|
+
this.currentIndex = this.galleryData.length - 1;
|
|
285
286
|
}
|
|
287
|
+
this.currentImageGalleryModal = this.galleryData[this.currentIndex];
|
|
286
288
|
}
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
this.previewImage = false;
|
|
290
|
-
}
|
|
291
|
-
onclickPrev() {
|
|
292
|
-
this.currentIndex++;
|
|
289
|
+
onclickNext() {
|
|
290
|
+
this.currentIndex++; // Increment for Next
|
|
293
291
|
if (this.currentIndex > this.galleryData.length - 1) {
|
|
294
292
|
this.currentIndex = 0;
|
|
295
293
|
}
|
|
296
294
|
this.currentImageGalleryModal = this.galleryData[this.currentIndex];
|
|
297
295
|
}
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
296
|
+
onClosePreview() {
|
|
297
|
+
// 1. Immediately re-enable scrolling
|
|
298
|
+
document.body.style.overflowY = 'visible';
|
|
299
|
+
// 2. This triggers the (@animation.done) or [@animation] 'void' state
|
|
300
|
+
this.previewImage = false;
|
|
301
|
+
// 3. SAFETY FALLBACK:
|
|
302
|
+
// If the animation doesn't fire for some reason,
|
|
303
|
+
// we force the mask closed after a short delay.
|
|
304
|
+
setTimeout(() => {
|
|
305
|
+
if (!this.previewImage) {
|
|
306
|
+
this.showMask = false;
|
|
307
|
+
}
|
|
308
|
+
}, 200);
|
|
309
|
+
}
|
|
310
|
+
onAnimationEnd(event) {
|
|
311
|
+
// When the 'scale' animation reaches 'void' (disappears), hide the dark mask
|
|
312
|
+
if (event.toState === 'void' || event.fromState === 'visible') {
|
|
313
|
+
this.showMask = false;
|
|
302
314
|
}
|
|
303
|
-
this.currentImageGalleryModal = this.galleryData[this.currentIndex];
|
|
304
315
|
}
|
|
305
316
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageGalleryModal, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
306
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageGalleryModal, selector: "image-gallery-modal", inputs: { galleryData: "galleryData", showCount: "showCount" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"section\">\n\n <div class=\"gallery-image-gallery-modal-container\">\n <div class=\"gallery\">\n <div *ngFor=\"let image of galleryData; let i = index\" class=\"gallery-image\">\n <img loading=\"lazy\" (click)=\"onPreviewImage(i)\" [src]=\"image.file\" [alt]=\"image.name\">\n <div class=\"image-cta\" (click)=\"onPreviewImage(i)\">\n Click to preview <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\n </div>\n </div>\n </div>\n <div *ngIf=\"showMask\" [ngClass]=\"{'hide-overflow' : showMask}\" class=\"image-gallery-modal\" @animation2>\n <div *ngIf=\"showCount\" class=\"count\">\n {{currentIndex + 1}}/{{totalImageCount}}\n </div>\n <button (click)=\"onClosePreview()\" *ngIf=\"previewImage\" class=\"close-btn\">\n <fa-icon icon=\"times\"></fa-icon>\n </button>\n <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-prev\" (click)=\"onclickPrev()\">\n <fa-icon icon=\"arrow-circle-left\" class=\"icon-image-gallery-modal-carousel icon-prev\"></fa-icon>\n </button>\n <button *ngIf=\"controls\" class=\"btn-image-gallery-modal-carousel btn-next\" (click)=\"onclickNext()\">\n <fa-icon icon=\"arrow-circle-right\" class=\"icon-image-gallery-modal-carousel icon-next\"></fa-icon>\n </button>\n <div *ngIf=\"previewImage\" [@animation]=\"{value : 'visible'}\" (@animation.done)=\"onAnimationEnd($event)\" class=\"image-gallery-modal-img\">\n <img loading=\"lazy\" [src]=\"currentImageGalleryModal.file\" [alt]=\"currentImageGalleryModal.name\">\n </div>\n </div>\n </div>\n <div>\n <p-galleria [value]=\"galleryData\" class=\"gallery-custom\" [responsiveOptions]=\"responsiveOptions\" [containerStyle]=\"{ 'max-width': '900px' }\">\n <ng-template pTemplate=\"item\" let-item>\n <div class=\"img\">\n <img loading=\"lazy\" class=\"big-img\" [src]=\"item.file\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"thumbnail\" let-item>\n <div class=\"grid grid-nogutter justify-content-center\">\n <img loading=\"lazy\" [src]=\"item.file\" class=\"small-img\" />\n </div>\n </ng-template>\n </p-galleria>\n </div>\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{width:100%}.gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;margin:auto;width:90%}@media only screen and (min-width: 1500px){.gallery-image-gallery-modal-container{max-width:150rem}}.gallery-image-gallery-modal-container .gallery{line-height:0;column-count:4;column-gap:.8rem}.gallery-image-gallery-modal-container .gallery .gallery-image{overflow:hidden;transition:all .3s;position:relative;margin-bottom:1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover{box-shadow:#00000026 0 1.5rem 2.5rem,#0000000d 0 .5rem 1rem}.gallery-image-gallery-modal-container .gallery .gallery-image:hover img{filter:brightness(.5)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta{opacity:1}.gallery-image-gallery-modal-container .gallery .gallery-image img{width:100%;height:auto;cursor:zoom-in;border-radius:.35rem}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta{opacity:0;position:absolute;width:100%;top:50%;text-align:center;color:#fff;font-size:2rem;cursor:zoom-in;transition:opacity .3s}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta fa-icon{font-size:2rem;margin-left:1rem;color:#fff}.gallery-image-gallery-modal-container .hide-overflow{overflow:hidden}.gallery-image-gallery-modal-container .image-gallery-modal{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;background-color:#000000d9;z-index:101;height:100%;overflow-y:auto}.gallery-image-gallery-modal-container .image-gallery-modal .count{position:absolute;top:0;left:0;width:7%;height:10%;color:#fff;opacity:.7;font-size:1.8rem;display:flex;justify-content:center;align-items:center;margin-left:.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn{position:absolute;top:0;right:0;padding:0;color:#fff;background:0 0;border:0;cursor:pointer;width:7%;height:10%;z-index:10}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn fa-icon{font-size:2.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{display:flex;justify-content:center;align-items:center;position:absolute;z-index:1;width:8%;height:8%;padding:0;color:#fff;text-align:center;background:0 0;border:0;cursor:pointer}.gallery-image-gallery-modal-container .image-gallery-modal .btn-prev{left:0}.gallery-image-gallery-modal-container .image-gallery-modal .btn-next{right:0}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel{color:#fff;opacity:.5;transition:all .15s ease}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel:hover{opacity:.9}.gallery-image-gallery-modal-container .image-gallery-modal .icon-image-gallery-modal-carousel:active{opacity:.5}.gallery-image-gallery-modal-container .image-gallery-modal .icon-prev,.gallery-image-gallery-modal-container .image-gallery-modal .icon-next{font-size:3rem}.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img img{width:100%;max-height:90vh;border-radius:1rem}@media only screen and (max-width: 75em){.gallery-image-gallery-modal-container .gallery-image-gallery-modal-container{display:none}.gallery-image-gallery-modal-container .gallery{column-count:3;width:100%}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-image-gallery-modal-container .gallery{column-count:2}.gallery-image-gallery-modal-container .gallery-img img{max-width:100%}}@media only screen and (max-width: 37.5em){.gallery-image-gallery-modal-container .gallery{column-count:1}.gallery-image-gallery-modal-container .gallery-img img{width:100%}}@media only screen and (max-width: 56.25em){.gallery-custom{display:block;margin:auto;width:90%}.gallery-custom .img{width:90%}.gallery-custom .big-img{width:100%;height:50rem;object-fit:cover;border-radius:1.5rem;box-shadow:2rem 1rem 1.5rem -.5rem #e0e0e075;margin-bottom:2rem}.gallery-custom .small-img{object-fit:cover;border-radius:.7rem;box-shadow:1rem .4rem .5rem -.5rem #e0e0e075;width:100%;max-width:8rem;height:12rem}.gallery-image-gallery-modal-container{display:none}}\n"], dependencies: [{ kind: "component", type: i2$1.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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.Galleria, selector: "p-galleria", inputs: ["activeIndex", "fullScreen", "id", "value", "numVisible", "responsiveOptions", "showItemNavigators", "showThumbnailNavigators", "showItemNavigatorsOnHover", "changeItemOnIndicatorHover", "circular", "autoPlay", "shouldStopAutoplayByClick", "transitionInterval", "showThumbnails", "thumbnailsPosition", "verticalThumbnailViewPortHeight", "showIndicators", "showIndicatorsOnItem", "indicatorsPosition", "baseZIndex", "maskClass", "containerClass", "containerStyle", "showTransitionOptions", "hideTransitionOptions", "visible"], outputs: ["activeIndexChange", "visibleChange"] }, { kind: "directive", type: i5$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], animations: [
|
|
317
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageGalleryModal, selector: "image-gallery-modal", inputs: { galleryData: "galleryData", showCount: "showCount" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"section\">\n <div class=\"gallery-image-gallery-modal-container\">\n <div class=\"gallery\">\n <div *ngFor=\"let item of galleryData; let i = index\" \n class=\"gallery-image\"\n (click)=\"onPreviewImage(i)\">\n \n <img loading=\"lazy\" \n [src]=\"item.image_url\" \n [alt]=\"item.display_name\">\n \n <div class=\"image-cta\">\n <span>View</span>\n <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"showMask\" \n class=\"image-gallery-modal\" \n @animation2>\n \n <div *ngIf=\"showCount\" class=\"count\">\n {{currentIndex + 1}} / {{totalImageCount}}\n </div>\n\n <button (click)=\"onClosePreview()\" class=\"close-btn\" aria-label=\"Close preview\">\n <fa-icon icon=\"times\"></fa-icon>\n </button>\n\n <ng-container *ngIf=\"controls\">\n <button class=\"btn-image-gallery-modal-carousel btn-prev\" \n (click)=\"onclickPrev()\" \n aria-label=\"Previous image\">\n <fa-icon icon=\"chevron-left\"></fa-icon>\n </button>\n \n <button class=\"btn-image-gallery-modal-carousel btn-next\" \n (click)=\"onclickNext()\" \n aria-label=\"Next image\">\n <fa-icon icon=\"chevron-right\"></fa-icon>\n </button>\n </ng-container>\n\n <div *ngIf=\"previewImage\" \n [@animation]=\"'visible'\"\n (@animation.done)=\"onAnimationEnd($event)\"\n class=\"image-gallery-modal-img\">\n \n <img [src]=\"currentImageGalleryModal?.image_url\" \n [alt]=\"currentImageGalleryModal?.display_name\">\n </div>\n </div>\n </div>\n\n <div class=\"gallery-mobile-wrapper\">\n <p-galleria [value]=\"galleryData\" \n class=\"gallery-custom\" \n [responsiveOptions]=\"responsiveOptions\" \n [containerStyle]=\"{ 'max-width': '100%' }\"\n [circular]=\"true\" \n [showItemNavigators]=\"true\"\n [showThumbnails]=\"true\">\n \n <ng-template pTemplate=\"item\" let-item>\n <div class=\"img-container\">\n <img [src]=\"item.image_url\" class=\"big-img\" [alt]=\"item.display_name\" />\n </div>\n </ng-template>\n \n <ng-template pTemplate=\"thumbnail\" let-item>\n <div class=\"thumbnail-container\">\n <img [src]=\"item.image_url\" class=\"small-img\" [alt]=\"item.display_name\" />\n </div>\n </ng-template>\n </p-galleria>\n </div>\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{width:100%;padding:2rem 0}.gallery-custom{display:none!important}.gallery-image-gallery-modal-container{position:relative;padding:2.5rem;margin:auto;width:95%;max-width:160rem}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container{padding:1rem}}.gallery-image-gallery-modal-container .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;line-height:normal}@media only screen and (max-width: 1200px){.gallery-image-gallery-modal-container .gallery{grid-template-columns:repeat(3,1fr)}}@media only screen and (max-width: 900px){.gallery-image-gallery-modal-container .gallery{grid-template-columns:repeat(2,1fr)}}@media only screen and (max-width: 500px){.gallery-image-gallery-modal-container .gallery{grid-template-columns:1fr}}.gallery-image-gallery-modal-container .gallery .gallery-image{position:relative;overflow:hidden;border-radius:.6rem;background-color:#f9f9f9;aspect-ratio:1/1;transition:all .5s cubic-bezier(.25,.46,.45,.94);box-shadow:0 4px 10px #0000000d}.gallery-image-gallery-modal-container .gallery .gallery-image:hover{transform:translateY(-4px);box-shadow:0 1.5rem 3rem #00000026}.gallery-image-gallery-modal-container .gallery .gallery-image:hover img{transform:scale(1.25);filter:brightness(.5)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta{opacity:1;transform:translate(-50%,-50%)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta fa-icon{color:#32353b;font-size:1.3rem}.gallery-image-gallery-modal-container .gallery .gallery-image img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:all .5s cubic-bezier(.25,.46,.45,.94)}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta{position:absolute;top:50%;left:50%;transform:translate(-50%,-40%);opacity:0;width:100%;text-align:center;color:#fff;font-size:1.8rem;letter-spacing:1px;pointer-events:none;transition:all .5s cubic-bezier(.25,.46,.45,.94)}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta fa-icon{font-size:2.4rem;margin-top:1rem;display:block;color:#32353b}.gallery-image-gallery-modal-container .image-gallery-modal{position:fixed;inset:0;background-color:#000000e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center}.gallery-image-gallery-modal-container .image-gallery-modal .count{position:absolute;top:2rem;left:2rem;color:#fff;font-size:1.6rem;opacity:.8;font-weight:300}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container .image-gallery-modal .count{top:1.5rem;left:1.5rem;font-size:1.4rem}}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn{position:absolute;top:2.5rem;right:2.5rem;color:#fff;background:none;border:none;cursor:pointer;transition:all .5s cubic-bezier(.25,.46,.45,.94);z-index:1010;padding:.8rem}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn fa-icon{font-size:3rem}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container .image-gallery-modal .close-btn fa-icon{font-size:2.2rem}}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn:hover{transform:rotate(90deg);color:#f0509c}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container .image-gallery-modal .close-btn{top:1rem;right:1rem}}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{position:absolute;top:50%;transform:translateY(-50%);background:#32353b;border:none;color:#fff;width:4rem;height:4rem;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;z-index:1005}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel fa-icon{font-size:1.8rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel:hover{background:#32353b;color:#155ed4;transform:translateY(-50%) scale(1.1)}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-prev{left:3rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-next{right:3rem}@media only screen and (max-width: 900px){.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{width:3.4rem;height:3.4rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-prev{left:1.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-next{right:1.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel fa-icon{font-size:1.5rem}}@media only screen and (max-width: 500px){.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{width:2.4rem;height:2.4rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-prev{left:.8rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-next{right:.8rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel fa-icon{font-size:1.2rem}}.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img{width:85%;max-height:80vh;display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img{width:95%}}.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img img{max-width:100%;max-height:85vh;object-fit:contain;border-radius:.8rem;box-shadow:0 2rem 6rem #0009}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img img{max-height:70vh}}\n"], dependencies: [{ kind: "component", type: i2$1.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: i4.Galleria, selector: "p-galleria", inputs: ["activeIndex", "fullScreen", "id", "value", "numVisible", "responsiveOptions", "showItemNavigators", "showThumbnailNavigators", "showItemNavigatorsOnHover", "changeItemOnIndicatorHover", "circular", "autoPlay", "shouldStopAutoplayByClick", "transitionInterval", "showThumbnails", "thumbnailsPosition", "verticalThumbnailViewPortHeight", "showIndicators", "showIndicatorsOnItem", "indicatorsPosition", "baseZIndex", "maskClass", "containerClass", "containerStyle", "showTransitionOptions", "hideTransitionOptions", "visible"], outputs: ["activeIndexChange", "visibleChange"] }, { kind: "directive", type: i5$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], animations: [
|
|
307
318
|
trigger('animation', [
|
|
308
319
|
transition('void => visible', [
|
|
309
|
-
style({ transform: 'scale(0.5)' }),
|
|
310
|
-
animate('150ms', style({ transform: 'scale(1)' }))
|
|
320
|
+
style({ transform: 'scale(0.5)', opacity: 0 }),
|
|
321
|
+
animate('150ms ease-out', style({ transform: 'scale(1)', opacity: 1 }))
|
|
311
322
|
]),
|
|
312
323
|
transition('visible => void', [
|
|
313
|
-
style({ transform: 'scale(
|
|
314
|
-
animate('150ms', style({ transform: 'scale(0.5)' }))
|
|
324
|
+
animate('150ms ease-in', style({ transform: 'scale(0.5)', opacity: 0 }))
|
|
315
325
|
]),
|
|
316
326
|
]),
|
|
317
327
|
trigger('animation2', [
|
|
328
|
+
// Add :enter so Angular knows how to start the animation
|
|
329
|
+
transition(':enter', [
|
|
330
|
+
style({ opacity: 0 }),
|
|
331
|
+
animate('200ms', style({ opacity: 1 }))
|
|
332
|
+
]),
|
|
318
333
|
transition(':leave', [
|
|
319
|
-
style({ opacity:
|
|
320
|
-
animate('50ms', style({ opacity: 0.8 }))
|
|
334
|
+
animate('200ms', style({ opacity: 0 }))
|
|
321
335
|
])
|
|
322
336
|
])
|
|
323
337
|
] });
|
|
@@ -327,21 +341,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
327
341
|
args: [{ selector: 'image-gallery-modal', animations: [
|
|
328
342
|
trigger('animation', [
|
|
329
343
|
transition('void => visible', [
|
|
330
|
-
style({ transform: 'scale(0.5)' }),
|
|
331
|
-
animate('150ms', style({ transform: 'scale(1)' }))
|
|
344
|
+
style({ transform: 'scale(0.5)', opacity: 0 }),
|
|
345
|
+
animate('150ms ease-out', style({ transform: 'scale(1)', opacity: 1 }))
|
|
332
346
|
]),
|
|
333
347
|
transition('visible => void', [
|
|
334
|
-
style({ transform: 'scale(
|
|
335
|
-
animate('150ms', style({ transform: 'scale(0.5)' }))
|
|
348
|
+
animate('150ms ease-in', style({ transform: 'scale(0.5)', opacity: 0 }))
|
|
336
349
|
]),
|
|
337
350
|
]),
|
|
338
351
|
trigger('animation2', [
|
|
352
|
+
// Add :enter so Angular knows how to start the animation
|
|
353
|
+
transition(':enter', [
|
|
354
|
+
style({ opacity: 0 }),
|
|
355
|
+
animate('200ms', style({ opacity: 1 }))
|
|
356
|
+
]),
|
|
339
357
|
transition(':leave', [
|
|
340
|
-
style({ opacity:
|
|
341
|
-
animate('50ms', style({ opacity: 0.8 }))
|
|
358
|
+
animate('200ms', style({ opacity: 0 }))
|
|
342
359
|
])
|
|
343
360
|
])
|
|
344
|
-
], template: "<div class=\"section\">\n
|
|
361
|
+
], template: "<div class=\"section\">\n <div class=\"gallery-image-gallery-modal-container\">\n <div class=\"gallery\">\n <div *ngFor=\"let item of galleryData; let i = index\" \n class=\"gallery-image\"\n (click)=\"onPreviewImage(i)\">\n \n <img loading=\"lazy\" \n [src]=\"item.image_url\" \n [alt]=\"item.display_name\">\n \n <div class=\"image-cta\">\n <span>View</span>\n <fa-icon icon=\"magnifying-glass-plus\"></fa-icon>\n </div>\n </div>\n </div>\n\n <div *ngIf=\"showMask\" \n class=\"image-gallery-modal\" \n @animation2>\n \n <div *ngIf=\"showCount\" class=\"count\">\n {{currentIndex + 1}} / {{totalImageCount}}\n </div>\n\n <button (click)=\"onClosePreview()\" class=\"close-btn\" aria-label=\"Close preview\">\n <fa-icon icon=\"times\"></fa-icon>\n </button>\n\n <ng-container *ngIf=\"controls\">\n <button class=\"btn-image-gallery-modal-carousel btn-prev\" \n (click)=\"onclickPrev()\" \n aria-label=\"Previous image\">\n <fa-icon icon=\"chevron-left\"></fa-icon>\n </button>\n \n <button class=\"btn-image-gallery-modal-carousel btn-next\" \n (click)=\"onclickNext()\" \n aria-label=\"Next image\">\n <fa-icon icon=\"chevron-right\"></fa-icon>\n </button>\n </ng-container>\n\n <div *ngIf=\"previewImage\" \n [@animation]=\"'visible'\"\n (@animation.done)=\"onAnimationEnd($event)\"\n class=\"image-gallery-modal-img\">\n \n <img [src]=\"currentImageGalleryModal?.image_url\" \n [alt]=\"currentImageGalleryModal?.display_name\">\n </div>\n </div>\n </div>\n\n <div class=\"gallery-mobile-wrapper\">\n <p-galleria [value]=\"galleryData\" \n class=\"gallery-custom\" \n [responsiveOptions]=\"responsiveOptions\" \n [containerStyle]=\"{ 'max-width': '100%' }\"\n [circular]=\"true\" \n [showItemNavigators]=\"true\"\n [showThumbnails]=\"true\">\n \n <ng-template pTemplate=\"item\" let-item>\n <div class=\"img-container\">\n <img [src]=\"item.image_url\" class=\"big-img\" [alt]=\"item.display_name\" />\n </div>\n </ng-template>\n \n <ng-template pTemplate=\"thumbnail\" let-item>\n <div class=\"thumbnail-container\">\n <img [src]=\"item.image_url\" class=\"small-img\" [alt]=\"item.display_name\" />\n </div>\n </ng-template>\n </p-galleria>\n </div>\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{width:100%;padding:2rem 0}.gallery-custom{display:none!important}.gallery-image-gallery-modal-container{position:relative;padding:2.5rem;margin:auto;width:95%;max-width:160rem}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container{padding:1rem}}.gallery-image-gallery-modal-container .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;line-height:normal}@media only screen and (max-width: 1200px){.gallery-image-gallery-modal-container .gallery{grid-template-columns:repeat(3,1fr)}}@media only screen and (max-width: 900px){.gallery-image-gallery-modal-container .gallery{grid-template-columns:repeat(2,1fr)}}@media only screen and (max-width: 500px){.gallery-image-gallery-modal-container .gallery{grid-template-columns:1fr}}.gallery-image-gallery-modal-container .gallery .gallery-image{position:relative;overflow:hidden;border-radius:.6rem;background-color:#f9f9f9;aspect-ratio:1/1;transition:all .5s cubic-bezier(.25,.46,.45,.94);box-shadow:0 4px 10px #0000000d}.gallery-image-gallery-modal-container .gallery .gallery-image:hover{transform:translateY(-4px);box-shadow:0 1.5rem 3rem #00000026}.gallery-image-gallery-modal-container .gallery .gallery-image:hover img{transform:scale(1.25);filter:brightness(.5)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta{opacity:1;transform:translate(-50%,-50%)}.gallery-image-gallery-modal-container .gallery .gallery-image:hover .image-cta fa-icon{color:#32353b;font-size:1.3rem}.gallery-image-gallery-modal-container .gallery .gallery-image img{width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:all .5s cubic-bezier(.25,.46,.45,.94)}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta{position:absolute;top:50%;left:50%;transform:translate(-50%,-40%);opacity:0;width:100%;text-align:center;color:#fff;font-size:1.8rem;letter-spacing:1px;pointer-events:none;transition:all .5s cubic-bezier(.25,.46,.45,.94)}.gallery-image-gallery-modal-container .gallery .gallery-image .image-cta fa-icon{font-size:2.4rem;margin-top:1rem;display:block;color:#32353b}.gallery-image-gallery-modal-container .image-gallery-modal{position:fixed;inset:0;background-color:#000000e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center}.gallery-image-gallery-modal-container .image-gallery-modal .count{position:absolute;top:2rem;left:2rem;color:#fff;font-size:1.6rem;opacity:.8;font-weight:300}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container .image-gallery-modal .count{top:1.5rem;left:1.5rem;font-size:1.4rem}}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn{position:absolute;top:2.5rem;right:2.5rem;color:#fff;background:none;border:none;cursor:pointer;transition:all .5s cubic-bezier(.25,.46,.45,.94);z-index:1010;padding:.8rem}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn fa-icon{font-size:3rem}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container .image-gallery-modal .close-btn fa-icon{font-size:2.2rem}}.gallery-image-gallery-modal-container .image-gallery-modal .close-btn:hover{transform:rotate(90deg);color:#f0509c}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container .image-gallery-modal .close-btn{top:1rem;right:1rem}}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{position:absolute;top:50%;transform:translateY(-50%);background:#32353b;border:none;color:#fff;width:4rem;height:4rem;border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;z-index:1005}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel fa-icon{font-size:1.8rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel:hover{background:#32353b;color:#155ed4;transform:translateY(-50%) scale(1.1)}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-prev{left:3rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-next{right:3rem}@media only screen and (max-width: 900px){.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{width:3.4rem;height:3.4rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-prev{left:1.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-next{right:1.5rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel fa-icon{font-size:1.5rem}}@media only screen and (max-width: 500px){.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel{width:2.4rem;height:2.4rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-prev{left:.8rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel.btn-next{right:.8rem}.gallery-image-gallery-modal-container .image-gallery-modal .btn-image-gallery-modal-carousel fa-icon{font-size:1.2rem}}.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img{width:85%;max-height:80vh;display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img{width:95%}}.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img img{max-width:100%;max-height:85vh;object-fit:contain;border-radius:.8rem;box-shadow:0 2rem 6rem #0009}@media only screen and (max-width: 600px){.gallery-image-gallery-modal-container .image-gallery-modal .image-gallery-modal-img img{max-height:70vh}}\n"] }]
|
|
345
362
|
}], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { galleryData: [{
|
|
346
363
|
type: Input
|
|
347
364
|
}], showCount: [{
|
|
@@ -424,11 +441,11 @@ class CallToActionSectionComponent {
|
|
|
424
441
|
isBoxWithCard = false;
|
|
425
442
|
constructor() { }
|
|
426
443
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CallToActionSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
427
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CallToActionSectionComponent, selector: "call-to-action-section", inputs: { sectionContent: "sectionContent", titleOnRightSide: "titleOnRightSide", imageBg: "imageBg", isBoxWithCard: "isBoxWithCard" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\n 'colored-bg':!imageBg,\n 'image-bg':imageBg\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\n <div class=\"heading-side\">\n <div class=\"title\">{{sectionContent.title}}</div>\n <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\n <div class=\"buttons\">\n <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\" authRoute\n [requireAuth]=\"button.requiresAuth\" [targetRoute]=\"button.route\">\n {{button.name}}\n <fa-icon icon=\"chevron-right\"></fa-icon>\n </span>\n </div>\n </div>\n <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\n <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\"\n [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\n <img loading=\"lazy\" [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\n <div class=\"box-title\">\n {{card.title}}\n </div>\n <div class=\"box-description\" *ngIf=\"card.description \">\n {{card.description}}\n </div>\n <div class=\"button\">\n <a [routerLink]=\"card.button.route\" class=\"custom-anchor\">\n <button type=\"button\" mat-raised-button authRoute [requireAuth]=\"card.button.requiresAuth\">\n {{card.button.name}}\n </button>\n </a>\n </div>\n <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\n </div>\n </div>\n </div>\n </div>\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;margin:7rem auto;width:90%}@media only screen and (min-width: 1500px){.page{width:150rem}}.page .title-right-side{flex-direction:row-reverse}.page .title-left-side{flex-direction:row}.page .image-bg{background-position:center;background-size:cover}.page .colored-bg{background-color:#f7f8f9}.page .colored-bg .bg-image{display:none}.page .cta-box{width:100%;display:flex;column-gap:2%;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;padding:3rem}.page .cta-box .left-bg{width:2rem;position:absolute;top:10%;left:0}.page .cta-box .right-bg{width:15rem;top:0;right:0;position:absolute}.page .cta-box .heading-side{display:flex;flex-direction:column;row-gap:1.5rem;width:40%}.page .cta-box .heading-side .title{color:#155ed4;font-size:3rem;font-weight:700}.page .cta-box .heading-side .subtitle{font-size:2rem;color:#32353b}.page .cta-box .heading-side .buttons{display:flex;flex-direction:row;column-gap:2rem}.page .cta-box .heading-side .buttons .cta-link{padding:.5 rem;color:#155ed4;font-size:1.6rem;cursor:pointer;transition:all ease-in-out .2s;border-bottom:.2rem solid transparent;display:flex;flex-direction:row;column-gap:1.5rem}.page .cta-box .heading-side .buttons .cta-link:hover{border-bottom:.2rem solid #
|
|
444
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CallToActionSectionComponent, selector: "call-to-action-section", inputs: { sectionContent: "sectionContent", titleOnRightSide: "titleOnRightSide", imageBg: "imageBg", isBoxWithCard: "isBoxWithCard" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\n 'colored-bg':!imageBg,\n 'image-bg':imageBg\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\n <div class=\"heading-side\">\n <div class=\"title\">{{sectionContent.title}}</div>\n <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\n <div class=\"buttons\">\n <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\" authRoute\n [requireAuth]=\"button.requiresAuth\" [targetRoute]=\"button.route\">\n {{button.name}}\n <fa-icon icon=\"chevron-right\"></fa-icon>\n </span>\n </div>\n </div>\n <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\n <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\"\n [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\n <img loading=\"lazy\" [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\n <div class=\"box-title\">\n {{card.title}}\n </div>\n <div class=\"box-description\" *ngIf=\"card.description \">\n {{card.description}}\n </div>\n <div class=\"button\">\n <a [routerLink]=\"card.button.route\" class=\"custom-anchor\">\n <button type=\"button\" mat-raised-button authRoute [requireAuth]=\"card.button.requiresAuth\">\n {{card.button.name}}\n </button>\n </a>\n </div>\n <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\n </div>\n </div>\n </div>\n </div>\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;margin:7rem auto;width:90%}@media only screen and (min-width: 1500px){.page{width:150rem}}.page .title-right-side{flex-direction:row-reverse}.page .title-left-side{flex-direction:row}.page .image-bg{background-position:center;background-size:cover}.page .colored-bg{background-color:#f7f8f9}.page .colored-bg .bg-image{display:none}.page .cta-box{width:100%;display:flex;column-gap:2%;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;padding:3rem}.page .cta-box .left-bg{width:2rem;position:absolute;top:10%;left:0}.page .cta-box .right-bg{width:15rem;top:0;right:0;position:absolute}.page .cta-box .heading-side{display:flex;flex-direction:column;row-gap:1.5rem;width:40%}.page .cta-box .heading-side .title{color:#155ed4;font-size:3rem;font-weight:700}.page .cta-box .heading-side .subtitle{font-size:2rem;color:#32353b}.page .cta-box .heading-side .buttons{display:flex;flex-direction:row;column-gap:2rem}.page .cta-box .heading-side .buttons .cta-link{padding:.5 rem;color:#155ed4;font-size:1.6rem;cursor:pointer;transition:all ease-in-out .2s;border-bottom:.2rem solid transparent;display:flex;flex-direction:row;column-gap:1.5rem}.page .cta-box .heading-side .buttons .cta-link:hover{border-bottom:.2rem solid #155ed4}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n):hover{border-bottom:.2rem solid #32353b}.page .cta-box .only-an-item{justify-content:right}.page .cta-box .cta-side{display:flex;flex-direction:row;column-gap:2%;padding:1rem;height:100%;width:58%;align-items:center;padding:2rem 0}.page .cta-box .cta-side .box-card{background:#32353b;border-radius:1rem;color:#fff;box-shadow:#32325d40 0 1.3rem 2.7rem -.5rem,#0000004d 0 .8rem 1.6rem -.8rem;border:.2rem solid #ffffff;padding:1.5rem}.page .cta-box .cta-side .box-card .button button{color:#155ed4;background-color:#f7f8f9}.page .cta-box .cta-side .box-non-card{color:#32353b;height:100%}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button{padding-left:1rem;border-left:.3rem transparent solid}.page .cta-box .cta-side .box-non-card .image{margin-left:1.3rem}.page .cta-box .cta-side .box-non-card .box-title{border-left:.3rem #155ed4 solid}.page .cta-box .cta-side .box-non-card .button button{color:#fff;background-color:#32353b}.page .cta-box .cta-side .box{align-self:center;width:49%;display:flex;flex-direction:column;row-gap:1.5rem}.page .cta-box .cta-side .box .image{width:5rem;height:5rem;object-fit:cover;border-radius:.7rem;box-shadow:#0000003d 0 .3rem .8rem}.page .cta-box .cta-side .box .box-title{font-size:2.2rem;font-weight:700}.page .cta-box .cta-side .box .box-description{font-weight:400;font-size:1.8rem;margin-bottom:1rem;width:80%}.page .cta-box .cta-side .box .button button{padding:1rem;font-size:1.4rem;font-weight:600;font-family:inherit}.page .cta-box .divider{display:none}@media only screen and (max-width: 75em){.page .cta-box{flex-direction:column;row-gap:2rem}.page .cta-box .only-an-item{justify-content:center;width:50%;text-align:center}.page .cta-box .only-an-item .box{margin:auto;text-align:center}.page .cta-box .only-an-item .box .box-title,.page .cta-box .only-an-item .box .box-description,.page .cta-box .only-an-item .box .button,.page .cta-box .only-an-item .box .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .only-an-item .box .box-title{border-left:none}.page .cta-box .cta-side,.page .cta-box .heading-side{width:100%}}@media only screen and (max-width: 37.5em){.page .cta-box .cta-side{flex-direction:column;row-gap:4rem}.page .cta-box .cta-side .box-non-card{margin:auto;text-align:center}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button,.page .cta-box .cta-side .box-non-card .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .cta-side .box-non-card .box-title{border-left:none}.page .cta-box .cta-side .box-non-card:first-child .divider{display:grid;width:40%;border:.2rem solid #155ed4;margin:2.5rem auto 0}.page .cta-box .cta-side .box{width:100%}.page .cta-box .cta-side .box .box-title{font-size:2rem}.page .cta-box .cta-side .box .box-description{font-size:1.6rem}.page .cta-box .heading-side{text-align:center}.page .cta-box .heading-side .buttons{justify-content:center}}\n"], dependencies: [{ kind: "component", type: i2$1.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: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3$1.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: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: AuthRouteDirective, selector: "[authRoute]", inputs: ["targetRoute", "requireAuth", "navigationExtras"] }] });
|
|
428
445
|
}
|
|
429
446
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CallToActionSectionComponent, decorators: [{
|
|
430
447
|
type: Component,
|
|
431
|
-
args: [{ selector: 'call-to-action-section', template: "<div class=\"page\">\n <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\n 'colored-bg':!imageBg,\n 'image-bg':imageBg\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\n <div class=\"heading-side\">\n <div class=\"title\">{{sectionContent.title}}</div>\n <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\n <div class=\"buttons\">\n <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\" authRoute\n [requireAuth]=\"button.requiresAuth\" [targetRoute]=\"button.route\">\n {{button.name}}\n <fa-icon icon=\"chevron-right\"></fa-icon>\n </span>\n </div>\n </div>\n <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\n <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\"\n [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\n <img loading=\"lazy\" [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\n <div class=\"box-title\">\n {{card.title}}\n </div>\n <div class=\"box-description\" *ngIf=\"card.description \">\n {{card.description}}\n </div>\n <div class=\"button\">\n <a [routerLink]=\"card.button.route\" class=\"custom-anchor\">\n <button type=\"button\" mat-raised-button authRoute [requireAuth]=\"card.button.requiresAuth\">\n {{card.button.name}}\n </button>\n </a>\n </div>\n <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\n </div>\n </div>\n </div>\n </div>\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;margin:7rem auto;width:90%}@media only screen and (min-width: 1500px){.page{width:150rem}}.page .title-right-side{flex-direction:row-reverse}.page .title-left-side{flex-direction:row}.page .image-bg{background-position:center;background-size:cover}.page .colored-bg{background-color:#f7f8f9}.page .colored-bg .bg-image{display:none}.page .cta-box{width:100%;display:flex;column-gap:2%;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;padding:3rem}.page .cta-box .left-bg{width:2rem;position:absolute;top:10%;left:0}.page .cta-box .right-bg{width:15rem;top:0;right:0;position:absolute}.page .cta-box .heading-side{display:flex;flex-direction:column;row-gap:1.5rem;width:40%}.page .cta-box .heading-side .title{color:#155ed4;font-size:3rem;font-weight:700}.page .cta-box .heading-side .subtitle{font-size:2rem;color:#32353b}.page .cta-box .heading-side .buttons{display:flex;flex-direction:row;column-gap:2rem}.page .cta-box .heading-side .buttons .cta-link{padding:.5 rem;color:#155ed4;font-size:1.6rem;cursor:pointer;transition:all ease-in-out .2s;border-bottom:.2rem solid transparent;display:flex;flex-direction:row;column-gap:1.5rem}.page .cta-box .heading-side .buttons .cta-link:hover{border-bottom:.2rem solid #
|
|
448
|
+
args: [{ selector: 'call-to-action-section', template: "<div class=\"page\">\n <div class=\"cta-box\" [ngClass]=\"{'title-right-side':titleOnRightSide,'title-left-side':!titleOnRightSide,\n 'colored-bg':!imageBg,\n 'image-bg':imageBg\n}\" [ngStyle]=\"{'background-image': 'url(' + sectionContent.bgImage + ')', 'background-color': sectionContent.bgColor}\">\n <div class=\"heading-side\">\n <div class=\"title\">{{sectionContent.title}}</div>\n <div class=\"subtitle\">{{sectionContent.subtitle}}</div>\n <div class=\"buttons\">\n <span class=\"cta-link\" *ngFor=\"let button of sectionContent.buttons\" authRoute\n [requireAuth]=\"button.requiresAuth\" [targetRoute]=\"button.route\">\n {{button.name}}\n <fa-icon icon=\"chevron-right\"></fa-icon>\n </span>\n </div>\n </div>\n <div class=\"cta-side\" [ngClass]=\"{'only-an-item':sectionContent.ctaCards.length == 1 }\">\n <div class=\"box\" *ngFor=\"let card of sectionContent.ctaCards\"\n [ngClass]=\"{'box-card':isBoxWithCard, 'box-non-card':!isBoxWithCard}\">\n <img loading=\"lazy\" [src]=\"card.image\" alt=\"\" class=\"image\" *ngIf=\"card.image\">\n <div class=\"box-title\">\n {{card.title}}\n </div>\n <div class=\"box-description\" *ngIf=\"card.description \">\n {{card.description}}\n </div>\n <div class=\"button\">\n <a [routerLink]=\"card.button.route\" class=\"custom-anchor\">\n <button type=\"button\" mat-raised-button authRoute [requireAuth]=\"card.button.requiresAuth\">\n {{card.button.name}}\n </button>\n </a>\n </div>\n <div class=\"divider\" *ngIf=\"!isBoxWithCard && sectionContent.ctaCards.length > 1 \">\n </div>\n </div>\n </div>\n </div>\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;margin:7rem auto;width:90%}@media only screen and (min-width: 1500px){.page{width:150rem}}.page .title-right-side{flex-direction:row-reverse}.page .title-left-side{flex-direction:row}.page .image-bg{background-position:center;background-size:cover}.page .colored-bg{background-color:#f7f8f9}.page .colored-bg .bg-image{display:none}.page .cta-box{width:100%;display:flex;column-gap:2%;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;padding:3rem}.page .cta-box .left-bg{width:2rem;position:absolute;top:10%;left:0}.page .cta-box .right-bg{width:15rem;top:0;right:0;position:absolute}.page .cta-box .heading-side{display:flex;flex-direction:column;row-gap:1.5rem;width:40%}.page .cta-box .heading-side .title{color:#155ed4;font-size:3rem;font-weight:700}.page .cta-box .heading-side .subtitle{font-size:2rem;color:#32353b}.page .cta-box .heading-side .buttons{display:flex;flex-direction:row;column-gap:2rem}.page .cta-box .heading-side .buttons .cta-link{padding:.5 rem;color:#155ed4;font-size:1.6rem;cursor:pointer;transition:all ease-in-out .2s;border-bottom:.2rem solid transparent;display:flex;flex-direction:row;column-gap:1.5rem}.page .cta-box .heading-side .buttons .cta-link:hover{border-bottom:.2rem solid #155ed4}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n){color:#32353b}.page .cta-box .heading-side .buttons .cta-link:nth-child(2n):hover{border-bottom:.2rem solid #32353b}.page .cta-box .only-an-item{justify-content:right}.page .cta-box .cta-side{display:flex;flex-direction:row;column-gap:2%;padding:1rem;height:100%;width:58%;align-items:center;padding:2rem 0}.page .cta-box .cta-side .box-card{background:#32353b;border-radius:1rem;color:#fff;box-shadow:#32325d40 0 1.3rem 2.7rem -.5rem,#0000004d 0 .8rem 1.6rem -.8rem;border:.2rem solid #ffffff;padding:1.5rem}.page .cta-box .cta-side .box-card .button button{color:#155ed4;background-color:#f7f8f9}.page .cta-box .cta-side .box-non-card{color:#32353b;height:100%}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button{padding-left:1rem;border-left:.3rem transparent solid}.page .cta-box .cta-side .box-non-card .image{margin-left:1.3rem}.page .cta-box .cta-side .box-non-card .box-title{border-left:.3rem #155ed4 solid}.page .cta-box .cta-side .box-non-card .button button{color:#fff;background-color:#32353b}.page .cta-box .cta-side .box{align-self:center;width:49%;display:flex;flex-direction:column;row-gap:1.5rem}.page .cta-box .cta-side .box .image{width:5rem;height:5rem;object-fit:cover;border-radius:.7rem;box-shadow:#0000003d 0 .3rem .8rem}.page .cta-box .cta-side .box .box-title{font-size:2.2rem;font-weight:700}.page .cta-box .cta-side .box .box-description{font-weight:400;font-size:1.8rem;margin-bottom:1rem;width:80%}.page .cta-box .cta-side .box .button button{padding:1rem;font-size:1.4rem;font-weight:600;font-family:inherit}.page .cta-box .divider{display:none}@media only screen and (max-width: 75em){.page .cta-box{flex-direction:column;row-gap:2rem}.page .cta-box .only-an-item{justify-content:center;width:50%;text-align:center}.page .cta-box .only-an-item .box{margin:auto;text-align:center}.page .cta-box .only-an-item .box .box-title,.page .cta-box .only-an-item .box .box-description,.page .cta-box .only-an-item .box .button,.page .cta-box .only-an-item .box .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .only-an-item .box .box-title{border-left:none}.page .cta-box .cta-side,.page .cta-box .heading-side{width:100%}}@media only screen and (max-width: 37.5em){.page .cta-box .cta-side{flex-direction:column;row-gap:4rem}.page .cta-box .cta-side .box-non-card{margin:auto;text-align:center}.page .cta-box .cta-side .box-non-card .box-title,.page .cta-box .cta-side .box-non-card .box-description,.page .cta-box .cta-side .box-non-card .button,.page .cta-box .cta-side .box-non-card .image{padding-left:0;border-left:none;margin:auto}.page .cta-box .cta-side .box-non-card .box-title{border-left:none}.page .cta-box .cta-side .box-non-card:first-child .divider{display:grid;width:40%;border:.2rem solid #155ed4;margin:2.5rem auto 0}.page .cta-box .cta-side .box{width:100%}.page .cta-box .cta-side .box .box-title{font-size:2rem}.page .cta-box .cta-side .box .box-description{font-size:1.6rem}.page .cta-box .heading-side{text-align:center}.page .cta-box .heading-side .buttons{justify-content:center}}\n"] }]
|
|
432
449
|
}], ctorParameters: function () { return []; }, propDecorators: { sectionContent: [{
|
|
433
450
|
type: Input
|
|
434
451
|
}], titleOnRightSide: [{
|
|
@@ -980,11 +997,11 @@ class VerticalSideTabsComponent {
|
|
|
980
997
|
this.tabChanged.emit(this.tabs[index].tabContent);
|
|
981
998
|
}
|
|
982
999
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VerticalSideTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
983
|
-
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\">\n <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\n <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \n 'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\n <div class=\"icon-text\">\n <div class=\"icon\"><mat-icon>{{tab.iconName}}</mat-icon></div>\n <h3 class=\"text\">\n {{tab.title}}\n </h3>\n </div>\n </button>\n </div>\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 #
|
|
1000
|
+
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\">\n <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\n <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \n 'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\n <div class=\"icon-text\">\n <div class=\"icon\"><mat-icon>{{tab.iconName}}</mat-icon></div>\n <h3 class=\"text\">\n {{tab.title}}\n </h3>\n </div>\n </button>\n </div>\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 mat-icon{width:3rem;height:3rem;font-size:3rem}.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: "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$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
984
1001
|
}
|
|
985
1002
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: VerticalSideTabsComponent, decorators: [{
|
|
986
1003
|
type: Component,
|
|
987
|
-
args: [{ selector: 'vertical-side-tabs', template: "<mat-card class=\"as-items\">\n <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\n <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \n 'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\n <div class=\"icon-text\">\n <div class=\"icon\"><mat-icon>{{tab.iconName}}</mat-icon></div>\n <h3 class=\"text\">\n {{tab.title}}\n </h3>\n </div>\n </button>\n </div>\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 #
|
|
1004
|
+
args: [{ selector: 'vertical-side-tabs', template: "<mat-card class=\"as-items\">\n <div class=\"as-item\" *ngFor=\"let tab of tabs ; let i = index\">\n <button class=\"as-btn\" [ngClass]=\"{'item-clicked':selectedOption[i], \n 'item-not-clicked':!selectedOption[i]}\" (click)=\"changeTab(i)\">\n <div class=\"icon-text\">\n <div class=\"icon\"><mat-icon>{{tab.iconName}}</mat-icon></div>\n <h3 class=\"text\">\n {{tab.title}}\n </h3>\n </div>\n </button>\n </div>\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 mat-icon{width:3rem;height:3rem;font-size:3rem}.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"] }]
|
|
988
1005
|
}], ctorParameters: function () { return []; }, propDecorators: { tabs: [{
|
|
989
1006
|
type: Input
|
|
990
1007
|
}], tabChanged: [{
|
|
@@ -1068,51 +1085,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1068
1085
|
type: Input
|
|
1069
1086
|
}] } });
|
|
1070
1087
|
|
|
1071
|
-
class FaqCategoryListingComponent {
|
|
1072
|
-
_Router;
|
|
1073
|
-
category;
|
|
1074
|
-
isSelected;
|
|
1075
|
-
constructor(_Router) {
|
|
1076
|
-
this._Router = _Router;
|
|
1077
|
-
}
|
|
1078
|
-
ngOnInit() { }
|
|
1079
|
-
onClick() {
|
|
1080
|
-
this._Router.navigate(['/faq/faq-category-page', this.category.id]);
|
|
1081
|
-
}
|
|
1082
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FaqCategoryListingComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
1083
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FaqCategoryListingComponent, selector: "faq-category-listing", inputs: { category: "category", isSelected: "isSelected" }, ngImport: i0, template: "<div [ngClass]=\"{'selected':isSelected}\" class=\"listing\">\n <div class=\"icon-container\">\n <fa-icon [icon]=\"category.iconName\"></fa-icon>\n </div>\n <div class=\"title\">\n {{category.title}}\n </div>\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}.listing{display:grid;grid-template-rows:auto auto;align-items:center;background:#fff;padding:2rem;border-radius:1.5rem;grid-row-gap:1rem;width:100%;height:20rem;margin:auto;place-items:center;border:.2rem solid #32353b;transition:all ease-in-out .1s;color:#32353b}.listing:hover{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}.icon-container{grid-row:1/span 2;grid-column:1;font-size:5rem}.title{font-size:18px;font-weight:700}.selected{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}@media only screen and (max-width: 75em){.listing{width:30rem;margin:auto 1rem}}@media only screen and (max-width: 37.5em){.listing{width:15rem;height:12rem;padding:0}.listing .title{font-size:1.8rem}.listing .icon-container{font-size:4rem}}\n"], dependencies: [{ kind: "component", type: i2$1.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"] }] });
|
|
1084
|
-
}
|
|
1085
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FaqCategoryListingComponent, decorators: [{
|
|
1086
|
-
type: Component,
|
|
1087
|
-
args: [{ selector: 'faq-category-listing', template: "<div [ngClass]=\"{'selected':isSelected}\" class=\"listing\">\n <div class=\"icon-container\">\n <fa-icon [icon]=\"category.iconName\"></fa-icon>\n </div>\n <div class=\"title\">\n {{category.title}}\n </div>\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}.listing{display:grid;grid-template-rows:auto auto;align-items:center;background:#fff;padding:2rem;border-radius:1.5rem;grid-row-gap:1rem;width:100%;height:20rem;margin:auto;place-items:center;border:.2rem solid #32353b;transition:all ease-in-out .1s;color:#32353b}.listing:hover{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}.icon-container{grid-row:1/span 2;grid-column:1;font-size:5rem}.title{font-size:18px;font-weight:700}.selected{cursor:pointer;color:#155ed4;box-sizing:border-box;border:.2rem solid #155ED4}@media only screen and (max-width: 75em){.listing{width:30rem;margin:auto 1rem}}@media only screen and (max-width: 37.5em){.listing{width:15rem;height:12rem;padding:0}.listing .title{font-size:1.8rem}.listing .icon-container{font-size:4rem}}\n"] }]
|
|
1088
|
-
}], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { category: [{
|
|
1089
|
-
type: Input
|
|
1090
|
-
}], isSelected: [{
|
|
1091
|
-
type: Input
|
|
1092
|
-
}] } });
|
|
1093
|
-
|
|
1094
|
-
class FaqListingComponent {
|
|
1095
|
-
faq;
|
|
1096
|
-
isOpen;
|
|
1097
|
-
constructor() { }
|
|
1098
|
-
ngOnInit() {
|
|
1099
|
-
}
|
|
1100
|
-
onOpened($event) {
|
|
1101
|
-
this.isOpen = true;
|
|
1102
|
-
}
|
|
1103
|
-
onClosed($event) {
|
|
1104
|
-
this.isOpen = false;
|
|
1105
|
-
}
|
|
1106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FaqListingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FaqListingComponent, selector: "faq-listing", inputs: { faq: "faq" }, ngImport: i0, template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n (closed)=\"onClosed($event)\">\n <mat-expansion-panel-header class=\"panel-header\">\n <mat-panel-title class=\"title\">\n {{faq.question}}\n </mat-panel-title>\n <div class=\"icon\">\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"content\">\n {{faq.response}}\n </div>\n</mat-expansion-panel>", styles: ["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{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
|
|
1108
|
-
}
|
|
1109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FaqListingComponent, decorators: [{
|
|
1110
|
-
type: Component,
|
|
1111
|
-
args: [{ selector: 'faq-listing', template: "<mat-expansion-panel class=\"listing\" hideToggle [expanded]=\"isOpen\" (opened)=\"onOpened($event)\"\n (closed)=\"onClosed($event)\">\n <mat-expansion-panel-header class=\"panel-header\">\n <mat-panel-title class=\"title\">\n {{faq.question}}\n </mat-panel-title>\n <div class=\"icon\">\n <mat-icon *ngIf=\"!isOpen\">add_circle_outline</mat-icon>\n <mat-icon *ngIf=\"isOpen\">remove_circle_outline</mat-icon>\n </div>\n </mat-expansion-panel-header>\n <div class=\"content\">\n {{faq.response}}\n </div>\n</mat-expansion-panel>", styles: ["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{padding-left:1.5rem;border-left:.2rem solid #155ED4;margin-bottom:2rem}.panel-header{display:flex;flex-direction:row;column-gap:2%;align-items:center;padding:1rem}.title{font-size:1.6rem;font-weight:700}mat-icon{color:#155ed4;transition:ease .1s}mat-expansion-panel-header:hover:active mat-icon{transform:rotate(180deg)}.mat-expansion-panel-header{height:auto}.mat-expansion-panel-body{padding:1rem 1.5rem}\n"] }]
|
|
1112
|
-
}], ctorParameters: function () { return []; }, propDecorators: { faq: [{
|
|
1113
|
-
type: Input
|
|
1114
|
-
}] } });
|
|
1115
|
-
|
|
1116
1088
|
class JoolerWebsitesSharedModule {
|
|
1117
1089
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JoolerWebsitesSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1118
1090
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: JoolerWebsitesSharedModule, declarations: [SocialMediaIconsComponent,
|
|
@@ -1142,9 +1114,7 @@ class JoolerWebsitesSharedModule {
|
|
|
1142
1114
|
HeaderSectionOneComponent,
|
|
1143
1115
|
CustomTooltipComponent,
|
|
1144
1116
|
VerticalSideTabsComponent,
|
|
1145
|
-
ValuePropCardComponent,
|
|
1146
|
-
FaqCategoryListingComponent,
|
|
1147
|
-
FaqListingComponent], imports: [FontAwesomeModule,
|
|
1117
|
+
ValuePropCardComponent], imports: [FontAwesomeModule,
|
|
1148
1118
|
CommonModule,
|
|
1149
1119
|
AppMaterialModule,
|
|
1150
1120
|
FontAwesomeSharedModule,
|
|
@@ -1184,9 +1154,7 @@ class JoolerWebsitesSharedModule {
|
|
|
1184
1154
|
HeaderSectionOneComponent,
|
|
1185
1155
|
CustomTooltipComponent,
|
|
1186
1156
|
VerticalSideTabsComponent,
|
|
1187
|
-
ValuePropCardComponent
|
|
1188
|
-
FaqCategoryListingComponent,
|
|
1189
|
-
FaqListingComponent] });
|
|
1157
|
+
ValuePropCardComponent] });
|
|
1190
1158
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: JoolerWebsitesSharedModule, imports: [FontAwesomeModule,
|
|
1191
1159
|
CommonModule,
|
|
1192
1160
|
AppMaterialModule,
|
|
@@ -1234,8 +1202,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1234
1202
|
CustomTooltipComponent,
|
|
1235
1203
|
VerticalSideTabsComponent,
|
|
1236
1204
|
ValuePropCardComponent,
|
|
1237
|
-
FaqCategoryListingComponent,
|
|
1238
|
-
FaqListingComponent
|
|
1239
1205
|
],
|
|
1240
1206
|
imports: [
|
|
1241
1207
|
FontAwesomeModule,
|
|
@@ -1282,8 +1248,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
1282
1248
|
CustomTooltipComponent,
|
|
1283
1249
|
VerticalSideTabsComponent,
|
|
1284
1250
|
ValuePropCardComponent,
|
|
1285
|
-
FaqCategoryListingComponent,
|
|
1286
|
-
FaqListingComponent
|
|
1287
1251
|
]
|
|
1288
1252
|
}]
|
|
1289
1253
|
}] });
|
|
@@ -1478,5 +1442,5 @@ class SectionTitle {
|
|
|
1478
1442
|
* Generated bundle index. Do not edit.
|
|
1479
1443
|
*/
|
|
1480
1444
|
|
|
1481
|
-
export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, CallToActionSectionTwo, CallToActionSectionTwoComponent, ChooseCountryWithFlagComponent, City, ComingSoonComponent, ContactUsPageComponent, Country, CtaSectionStyleFourComponent, CtaSectionStyleThreeComponent, CustomTooltipComponent,
|
|
1445
|
+
export { Account, AccountType, Achievement, Achievements, AchievementsComponent, Address, CallToActionSectionComponent, CallToActionSectionTwo, CallToActionSectionTwoComponent, ChooseCountryWithFlagComponent, City, ComingSoonComponent, ContactUsPageComponent, Country, CtaSectionStyleFourComponent, CtaSectionStyleThreeComponent, CustomTooltipComponent, GetStartedCTAComponent, HeaderSectionOneComponent, ImageGalleryModal, ImageSection, ImageSectionAction, JoolerWebsitesSharedModule, OurClientListingComponent, OurClientsComponent, PageSection, PageSectionAction, PageSectionStyleTenComponent, PageSectionStyleThirteen, PageSectionStyleThirteenComponent, PageSectionStyleThreeComponent, PageSectionWithMultipleCardsComponent, Perks, PricingPlansComponent, SectionTitle, SectionTitleComponent, SectionTitleSizes, ServicePlan, SocialMediaIconsComponent, SuccessMessageDialogComponent, TeamComponent, TeamMember, TeamSection, User, UserType, ValuePropCardComponent, ValuePropsSectionComponent, ValuesComponent, VerticalSideTabsComponent, socialMediaLinks };
|
|
1482
1446
|
//# sourceMappingURL=jooler-websites-shared.mjs.map
|