@jooler/jooler-websites-shared 0.0.250 → 0.0.252
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/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 -2
- package/fesm2022/jooler-websites-shared.mjs +51 -34
- package/fesm2022/jooler-websites-shared.mjs.map +1 -1
- package/lib/image-gallery-modal/image-gallery-modal.component.d.ts +5 -5
- package/lib/models/gallery-item.interface.d.ts +7 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -1
- package/esm2022/lib/models/gallery-items-properties.model.mjs +0 -2
- 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}:host{font-size:62.5%!important}.section{width:100%;padding:2rem 0}.gallery-custom{display:none!important}.gallery-image-gallery-modal-container{position:relative;max-width:1600px!important;width:100%!important;margin:0 auto!important;box-sizing:border-box!important;padding:0 2rem}@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{cursor:zoom-in;transition:all .5s cubic-bezier(.25,.46,.45,.94);width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover!important}.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}:host{font-size:62.5%!important}.section{width:100%;padding:2rem 0}.gallery-custom{display:none!important}.gallery-image-gallery-modal-container{position:relative;max-width:1600px!important;width:100%!important;margin:0 auto!important;box-sizing:border-box!important;padding:0 2rem}@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{cursor:zoom-in;transition:all .5s cubic-bezier(.25,.46,.45,.94);width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover!important}.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: [{
|