@jooler/jooler-websites-shared 0.0.51 → 0.0.52
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/image-gallery-modal/image-gallery-modal.component.mjs +3 -3
- package/fesm2015/jooler-websites-shared.mjs +2 -2
- package/fesm2015/jooler-websites-shared.mjs.map +1 -1
- package/fesm2020/jooler-websites-shared.mjs +2 -2
- 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>\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:
|
|
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 .6s ease;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}.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}.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>\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:
|
|
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 .6s ease;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}.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}.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: [{
|