@jooler/jooler-websites-shared 0.0.52 → 0.0.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/call-to-action-section/call-to-action-section.component.mjs +5 -4
- package/esm2020/lib/image-gallery-modal/image-gallery-modal.component.mjs +3 -3
- package/fesm2015/jooler-websites-shared.mjs +4 -4
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +4 -4
- package/fesm2020/jooler-websites-shared.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -198,7 +198,7 @@ class ImageGalleryModal {
|
|
|
198
198
|
}
|
|
199
199
|
}
|
|
200
200
|
ImageGalleryModal.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: ImageGalleryModal, deps: [{ token: i1$2.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component });
|
|
201
|
-
ImageGalleryModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ImageGalleryModal, selector: "image-gallery-modal", inputs: { galleryData: "galleryData", showCount: "showCount" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<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 (click)=\"onPreviewImage(i)\" [src]=\"image.imageSrc\" [alt]=\"image.imageAlt\">\n <div class=\"image-cta\">\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)\"\n class=\"image-gallery-modal-img\">\n <img [src]=\"currentImageGalleryModal.imageSrc\" [alt]=\"currentImageGalleryModal.imageAlt\">\n </div>\n </div>\n</div>\n<p-galleria class=\"gallery-custom\" [value]=\"galleryData\" [responsiveOptions]=\"responsiveOptions\"\n [containerStyle]=\"{ 'max-width': '900px' }\" [numVisible]=\"6\">\n <ng-template pTemplate=\"item\" let-item>\n <div class=\"img\">\n <img class=\"big-img\" [src]=\"item.imageSrc\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"thumbnail\" let-item>\n <div class=\"grid grid-nogutter justify-content-center\">\n <img [src]=\"item.imageSrc\" style=\"width: 10rem; height:12rem\" class=\"small-img\" />\n </div>\n </ng-template>\n</p-galleria>", styles: [".gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;width:90%;margin:auto}@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 .
|
|
201
|
+
ImageGalleryModal.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: ImageGalleryModal, selector: "image-gallery-modal", inputs: { galleryData: "galleryData", showCount: "showCount" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<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 (click)=\"onPreviewImage(i)\" [src]=\"image.imageSrc\" [alt]=\"image.imageAlt\">\n <div class=\"image-cta\">\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)\"\n class=\"image-gallery-modal-img\">\n <img [src]=\"currentImageGalleryModal.imageSrc\" [alt]=\"currentImageGalleryModal.imageAlt\">\n </div>\n </div>\n</div>\n<p-galleria class=\"gallery-custom\" [value]=\"galleryData\" [responsiveOptions]=\"responsiveOptions\"\n [containerStyle]=\"{ 'max-width': '900px' }\" [numVisible]=\"6\">\n <ng-template pTemplate=\"item\" let-item>\n <div class=\"img\">\n <img class=\"big-img\" [src]=\"item.imageSrc\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"thumbnail\" let-item>\n <div class=\"grid grid-nogutter justify-content-center\">\n <img [src]=\"item.imageSrc\" style=\"width: 10rem; height:12rem\" class=\"small-img\" />\n </div>\n </ng-template>\n</p-galleria>", styles: [".gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;width:90%;margin:auto}@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}.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;margin-bottom:1rem;box-shadow:0 .1rem .5rem #00000036;transition:filter .3s}.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 .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 .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 .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 .close-btn fa-icon{font-size:2.5rem}.gallery-image-gallery-modal-container .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 .btn-prev{left:0}.gallery-image-gallery-modal-container .btn-next{right:0}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel{color:#fff;opacity:.5;transition:all .15s ease}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel:hover{opacity:.9}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel:active{opacity:.5}.gallery-image-gallery-modal-container .icon-prev,.gallery-image-gallery-modal-container .icon-next{font-size:3rem}.gallery-image-gallery-modal-container .image-gallery-modal-img img{width:100%;max-height:90vh;border-radius:1rem}.gallery-image-gallery-modal-container .hide-overflow{overflow:hidden}@media only screen and (max-width: 75em){.gallery-image-gallery-modal-container .gallery-custom{display:normal}.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%}}.small-img{width:10rem;height:12rem}@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}.gallery-image-gallery-modal-container{display:none}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: i4.Galleria, selector: "p-galleria", inputs: ["activeIndex", "fullScreen", "id", "value", "numVisible", "responsiveOptions", "showItemNavigators", "showThumbnailNavigators", "showItemNavigatorsOnHover", "changeItemOnIndicatorHover", "circular", "autoPlay", "transitionInterval", "showThumbnails", "thumbnailsPosition", "verticalThumbnailViewPortHeight", "showIndicators", "showIndicatorsOnItem", "indicatorsPosition", "baseZIndex", "maskClass", "containerClass", "containerStyle", "showTransitionOptions", "hideTransitionOptions", "visible"], outputs: ["activeIndexChange", "visibleChange"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }], animations: [
|
|
202
202
|
trigger('animation', [
|
|
203
203
|
transition('void => visible', [
|
|
204
204
|
style({ transform: 'scale(0.5)' }),
|
|
@@ -235,7 +235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImpor
|
|
|
235
235
|
animate('50ms', style({ opacity: 0.8 }))
|
|
236
236
|
])
|
|
237
237
|
])
|
|
238
|
-
], template: "<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 (click)=\"onPreviewImage(i)\" [src]=\"image.imageSrc\" [alt]=\"image.imageAlt\">\n <div class=\"image-cta\">\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)\"\n class=\"image-gallery-modal-img\">\n <img [src]=\"currentImageGalleryModal.imageSrc\" [alt]=\"currentImageGalleryModal.imageAlt\">\n </div>\n </div>\n</div>\n<p-galleria class=\"gallery-custom\" [value]=\"galleryData\" [responsiveOptions]=\"responsiveOptions\"\n [containerStyle]=\"{ 'max-width': '900px' }\" [numVisible]=\"6\">\n <ng-template pTemplate=\"item\" let-item>\n <div class=\"img\">\n <img class=\"big-img\" [src]=\"item.imageSrc\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"thumbnail\" let-item>\n <div class=\"grid grid-nogutter justify-content-center\">\n <img [src]=\"item.imageSrc\" style=\"width: 10rem; height:12rem\" class=\"small-img\" />\n </div>\n </ng-template>\n</p-galleria>", styles: [".gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;width:90%;margin:auto}@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 .
|
|
238
|
+
], template: "<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 (click)=\"onPreviewImage(i)\" [src]=\"image.imageSrc\" [alt]=\"image.imageAlt\">\n <div class=\"image-cta\">\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)\"\n class=\"image-gallery-modal-img\">\n <img [src]=\"currentImageGalleryModal.imageSrc\" [alt]=\"currentImageGalleryModal.imageAlt\">\n </div>\n </div>\n</div>\n<p-galleria class=\"gallery-custom\" [value]=\"galleryData\" [responsiveOptions]=\"responsiveOptions\"\n [containerStyle]=\"{ 'max-width': '900px' }\" [numVisible]=\"6\">\n <ng-template pTemplate=\"item\" let-item>\n <div class=\"img\">\n <img class=\"big-img\" [src]=\"item.imageSrc\" />\n </div>\n </ng-template>\n <ng-template pTemplate=\"thumbnail\" let-item>\n <div class=\"grid grid-nogutter justify-content-center\">\n <img [src]=\"item.imageSrc\" style=\"width: 10rem; height:12rem\" class=\"small-img\" />\n </div>\n </ng-template>\n</p-galleria>", styles: [".gallery-custom{display:none}.gallery-image-gallery-modal-container{position:relative;display:block;padding:2.5rem;width:90%;margin:auto}@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}.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;margin-bottom:1rem;box-shadow:0 .1rem .5rem #00000036;transition:filter .3s}.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 .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 .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 .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 .close-btn fa-icon{font-size:2.5rem}.gallery-image-gallery-modal-container .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 .btn-prev{left:0}.gallery-image-gallery-modal-container .btn-next{right:0}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel{color:#fff;opacity:.5;transition:all .15s ease}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel:hover{opacity:.9}.gallery-image-gallery-modal-container .icon-image-gallery-modal-carousel:active{opacity:.5}.gallery-image-gallery-modal-container .icon-prev,.gallery-image-gallery-modal-container .icon-next{font-size:3rem}.gallery-image-gallery-modal-container .image-gallery-modal-img img{width:100%;max-height:90vh;border-radius:1rem}.gallery-image-gallery-modal-container .hide-overflow{overflow:hidden}@media only screen and (max-width: 75em){.gallery-image-gallery-modal-container .gallery-custom{display:normal}.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%}}.small-img{width:10rem;height:12rem}@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}.gallery-image-gallery-modal-container{display:none}}\n"] }]
|
|
239
239
|
}], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; }, propDecorators: { galleryData: [{
|
|
240
240
|
type: Input
|
|
241
241
|
}], showCount: [{
|
|
@@ -317,10 +317,10 @@ class CallToActionSectionComponent {
|
|
|
317
317
|
}
|
|
318
318
|
}
|
|
319
319
|
CallToActionSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CallToActionSectionComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
320
|
-
CallToActionSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: CallToActionSectionComponent, selector: "call-to-action-section", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"cta-box\">\n <div class=\"left-side\">\n <div class=\"title\">\n {{data.title}}\n </div>\n <div class=\"subtitle\">\n {{data.subtitle}}\n </div>\n </div>\n <div class=\"right-side\">\n <div class=\"box\">\n <img src=\"https://i.ibb.co/PQbR3nL/box-left-side-design.png\" class=\"left-bg\" alt=\"\">\n <img src=\"https://i.ibb.co/PxyyVHS/top-right-corner-design.png\" class=\"right-bg\" alt=\"\">\n <div class=\"description\">\n {{data.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"cta-box-small\">\n <div class=\"title\">\n {{data.title}}\n </div>\n <div class=\"subtitle\">\n {{data.subtitle}}\n </div>\n <div class=\"description\">\n {{data.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\n </div>\n </div>\n</div>", styles: [".page{width:100%;display:grid;margin:7rem 0rem}.page .cta-box{justify-self:center;width:90%;display:grid;grid-template-columns:calc(60% - 2.5rem) calc(40% - 2.5rem);column-gap:5rem;align-items:center;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;background-color:#e2ebf3}@media only screen and (min-width: 1500px){.page .cta-box{max-width:150rem}}.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 .left-side{height:30rem;padding-left:5rem;display:grid}.page .cta-box .left-side .title{font-weight:700;font-size:4rem;align-self:center}.page .cta-box .left-side .subtitle{font-size:1.4rem}.page .cta-box .right-side{display:grid;padding:1rem;height:100%;align-items:center}.page .cta-box .right-side .box{justify-self:center;align-self:center;width:80%;padding:1.5rem;border-radius:1rem;background-color:#043265;color:#fff}@media screen and (max-width: 1000px){.page .cta-box .right-side .box{width:90%}}.page .cta-box .right-side .box .description{font-weight:400;font-size:1.6rem;margin-bottom:1rem}.page .cta-box .right-side .box .button{margin-top:2rem}.page .cta-box .right-side .box .button button{padding:1rem;font-size:1.2rem;font-weight:400;color:#fff;background-color:transparent;border:#fff .1rem solid}.page .cta-box-small{display:none}@media only screen and (max-width: 56.25em){.page .cta-box{display:none}.page .cta-box-small{justify-self:center;width:90%;display:grid;align-items:center;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem;background-color:#054386;color:#fff}.page .cta-box-small .title{font-size:2rem;font-weight:700;padding:1rem 0rem}.page .cta-box-small .subtitle{padding:2rem 0rem;font-size:1.6rem}.page .cta-box-small .description{padding:2rem 0rem;font-size:1.4rem}.page .cta-box-small .button{color:#545454;font-weight:500}}\n"], dependencies: [{ kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
|
|
320
|
+
CallToActionSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.0", type: CallToActionSectionComponent, selector: "call-to-action-section", inputs: { data: "data" }, ngImport: i0, template: "<div class=\"page\">\n <div class=\"cta-box\">\n <div class=\"left-side\">\n <div class=\"title\">\n {{data.title}}\n </div>\n <div class=\"subtitle\" *ngIf=\"data.subtitle\">\n {{data.subtitle}}\n </div>\n </div>\n <div class=\"right-side\">\n <div class=\"box\">\n <img src=\"https://i.ibb.co/PQbR3nL/box-left-side-design.png\" class=\"left-bg\" alt=\"\">\n <img src=\"https://i.ibb.co/PxyyVHS/top-right-corner-design.png\" class=\"right-bg\" alt=\"\">\n <div class=\"description\">\n {{data.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"cta-box-small\">\n <div class=\"title\">\n {{data.title}}\n </div>\n <div class=\"subtitle\">\n {{data.subtitle}}\n </div>\n <div class=\"description\">\n {{data.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\n </div>\n </div>\n</div>", styles: [".page{width:100%;display:grid;margin:7rem 0rem}.page .cta-box{justify-self:center;width:90%;display:grid;grid-template-columns:calc(60% - 2.5rem) calc(40% - 2.5rem);column-gap:5rem;align-items:center;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;background-color:#e2ebf3}@media only screen and (min-width: 1500px){.page .cta-box{max-width:150rem}}.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 .left-side{height:30rem;padding-left:5rem;display:grid}.page .cta-box .left-side .title{font-weight:700;font-size:4rem;align-self:center}.page .cta-box .left-side .subtitle{font-size:1.4rem}.page .cta-box .right-side{display:grid;padding:1rem;height:100%;align-items:center}.page .cta-box .right-side .box{justify-self:center;align-self:center;width:80%;padding:1.5rem;border-radius:1rem;background-color:#043265;color:#fff}@media screen and (max-width: 1000px){.page .cta-box .right-side .box{width:90%}}.page .cta-box .right-side .box .description{font-weight:400;font-size:1.6rem;margin-bottom:1rem}.page .cta-box .right-side .box .button{margin-top:2rem}.page .cta-box .right-side .box .button button{padding:1rem;font-size:1.2rem;font-weight:400;color:#fff;background-color:transparent;border:#fff .1rem solid}.page .cta-box-small{display:none}@media only screen and (max-width: 56.25em){.page .cta-box{display:none}.page .cta-box-small{justify-self:center;width:90%;display:grid;align-items:center;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem;background-color:#054386;color:#fff}.page .cta-box-small .title{font-size:2rem;font-weight:700;padding:1rem 0rem}.page .cta-box-small .subtitle{padding:2rem 0rem;font-size:1.6rem}.page .cta-box-small .description{padding:2rem 0rem;font-size:1.4rem}.page .cta-box-small .button{color:#545454;font-weight:500}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] });
|
|
321
321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.0", ngImport: i0, type: CallToActionSectionComponent, decorators: [{
|
|
322
322
|
type: Component,
|
|
323
|
-
args: [{ selector: 'call-to-action-section', template: "<div class=\"page\">\n <div class=\"cta-box\">\n <div class=\"left-side\">\n <div class=\"title\">\n {{data.title}}\n </div>\n <div class=\"subtitle\">\n {{data.subtitle}}\n </div>\n </div>\n <div class=\"right-side\">\n <div class=\"box\">\n <img src=\"https://i.ibb.co/PQbR3nL/box-left-side-design.png\" class=\"left-bg\" alt=\"\">\n <img src=\"https://i.ibb.co/PxyyVHS/top-right-corner-design.png\" class=\"right-bg\" alt=\"\">\n <div class=\"description\">\n {{data.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"cta-box-small\">\n <div class=\"title\">\n {{data.title}}\n </div>\n <div class=\"subtitle\">\n {{data.subtitle}}\n </div>\n <div class=\"description\">\n {{data.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\n </div>\n </div>\n</div>", styles: [".page{width:100%;display:grid;margin:7rem 0rem}.page .cta-box{justify-self:center;width:90%;display:grid;grid-template-columns:calc(60% - 2.5rem) calc(40% - 2.5rem);column-gap:5rem;align-items:center;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;background-color:#e2ebf3}@media only screen and (min-width: 1500px){.page .cta-box{max-width:150rem}}.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 .left-side{height:30rem;padding-left:5rem;display:grid}.page .cta-box .left-side .title{font-weight:700;font-size:4rem;align-self:center}.page .cta-box .left-side .subtitle{font-size:1.4rem}.page .cta-box .right-side{display:grid;padding:1rem;height:100%;align-items:center}.page .cta-box .right-side .box{justify-self:center;align-self:center;width:80%;padding:1.5rem;border-radius:1rem;background-color:#043265;color:#fff}@media screen and (max-width: 1000px){.page .cta-box .right-side .box{width:90%}}.page .cta-box .right-side .box .description{font-weight:400;font-size:1.6rem;margin-bottom:1rem}.page .cta-box .right-side .box .button{margin-top:2rem}.page .cta-box .right-side .box .button button{padding:1rem;font-size:1.2rem;font-weight:400;color:#fff;background-color:transparent;border:#fff .1rem solid}.page .cta-box-small{display:none}@media only screen and (max-width: 56.25em){.page .cta-box{display:none}.page .cta-box-small{justify-self:center;width:90%;display:grid;align-items:center;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem;background-color:#054386;color:#fff}.page .cta-box-small .title{font-size:2rem;font-weight:700;padding:1rem 0rem}.page .cta-box-small .subtitle{padding:2rem 0rem;font-size:1.6rem}.page .cta-box-small .description{padding:2rem 0rem;font-size:1.4rem}.page .cta-box-small .button{color:#545454;font-weight:500}}\n"] }]
|
|
323
|
+
args: [{ selector: 'call-to-action-section', template: "<div class=\"page\">\n <div class=\"cta-box\">\n <div class=\"left-side\">\n <div class=\"title\">\n {{data.title}}\n </div>\n <div class=\"subtitle\" *ngIf=\"data.subtitle\">\n {{data.subtitle}}\n </div>\n </div>\n <div class=\"right-side\">\n <div class=\"box\">\n <img src=\"https://i.ibb.co/PQbR3nL/box-left-side-design.png\" class=\"left-bg\" alt=\"\">\n <img src=\"https://i.ibb.co/PxyyVHS/top-right-corner-design.png\" class=\"right-bg\" alt=\"\">\n <div class=\"description\">\n {{data.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"cta-box-small\">\n <div class=\"title\">\n {{data.title}}\n </div>\n <div class=\"subtitle\">\n {{data.subtitle}}\n </div>\n <div class=\"description\">\n {{data.description}}\n </div>\n <div class=\"button\">\n <button type=\"button\" mat-raised-button\n (click)=\"onClickGetStarted(data.button.route)\">{{data.button.name}}</button>\n </div>\n </div>\n</div>", styles: [".page{width:100%;display:grid;margin:7rem 0rem}.page .cta-box{justify-self:center;width:90%;display:grid;grid-template-columns:calc(60% - 2.5rem) calc(40% - 2.5rem);column-gap:5rem;align-items:center;border-radius:1.5rem;position:relative;box-shadow:.2rem .2rem .4rem #00000040;background-color:#e2ebf3}@media only screen and (min-width: 1500px){.page .cta-box{max-width:150rem}}.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 .left-side{height:30rem;padding-left:5rem;display:grid}.page .cta-box .left-side .title{font-weight:700;font-size:4rem;align-self:center}.page .cta-box .left-side .subtitle{font-size:1.4rem}.page .cta-box .right-side{display:grid;padding:1rem;height:100%;align-items:center}.page .cta-box .right-side .box{justify-self:center;align-self:center;width:80%;padding:1.5rem;border-radius:1rem;background-color:#043265;color:#fff}@media screen and (max-width: 1000px){.page .cta-box .right-side .box{width:90%}}.page .cta-box .right-side .box .description{font-weight:400;font-size:1.6rem;margin-bottom:1rem}.page .cta-box .right-side .box .button{margin-top:2rem}.page .cta-box .right-side .box .button button{padding:1rem;font-size:1.2rem;font-weight:400;color:#fff;background-color:transparent;border:#fff .1rem solid}.page .cta-box-small{display:none}@media only screen and (max-width: 56.25em){.page .cta-box{display:none}.page .cta-box-small{justify-self:center;width:90%;display:grid;align-items:center;border-radius:1.5rem;box-shadow:.2rem .2rem .4rem #00000040;padding:2rem;background-color:#054386;color:#fff}.page .cta-box-small .title{font-size:2rem;font-weight:700;padding:1rem 0rem}.page .cta-box-small .subtitle{padding:2rem 0rem;font-size:1.6rem}.page .cta-box-small .description{padding:2rem 0rem;font-size:1.4rem}.page .cta-box-small .button{color:#545454;font-weight:500}}\n"] }]
|
|
324
324
|
}], ctorParameters: function () { return [{ type: i1$1.Router }]; }, propDecorators: { data: [{
|
|
325
325
|
type: Input
|
|
326
326
|
}] } });
|