@kolkov/ngx-gallery
Version:
A simple responsive native gallery component for Angular 8+ and 13+.
875 lines (868 loc) • 119 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ViewChild, HostListener, ViewEncapsulation, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/platform-browser';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as i6 from '@angular/common';
import { CommonModule } from '@angular/common';
import { trigger, state, style, transition, animate } from '@angular/animations';
class NgxGalleryService {
constructor(renderer) {
this.renderer = renderer;
this.swipeHandlers = new Map();
}
manageSwipe(status, element, id, nextHandler, prevHandler) {
const handlers = this.getSwipeHandlers(id);
// swipeleft and swiperight are available only if hammerjs is included
try {
if (status && !handlers) {
this.swipeHandlers.set(id, [
this.renderer.listen(element.nativeElement, 'swipeleft', () => nextHandler()),
this.renderer.listen(element.nativeElement, 'swiperight', () => prevHandler())
]);
}
else if (!status && handlers) {
handlers.map((handler) => handler());
this.removeSwipeHandlers(id);
}
}
catch (e) {
}
}
validateUrl(url) {
if (url.replace) {
return url.replace(new RegExp(' ', 'g'), '%20')
.replace(new RegExp('\'', 'g'), '%27');
}
else {
return url;
}
}
getBackgroundUrl(image) {
return 'url(\'' + this.validateUrl(image) + '\')';
}
getFileType(fileSource) {
const fileExtension = fileSource.split('.').pop().toLowerCase();
if (fileExtension === 'avi' || fileExtension === 'flv'
|| fileExtension === 'wmv' || fileExtension === 'mov'
|| fileExtension === 'mp4') {
return 'video';
}
return 'image';
}
getSwipeHandlers(id) {
return this.swipeHandlers.get(id);
}
removeSwipeHandlers(id) {
this.swipeHandlers.delete(id);
}
}
NgxGalleryService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
NgxGalleryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
class NgxGalleryArrowsComponent {
constructor() {
this.prevClick = new EventEmitter();
this.nextClick = new EventEmitter();
}
handlePrevClick() {
this.prevClick.emit();
}
handleNextClick() {
this.nextClick.emit();
}
}
NgxGalleryArrowsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxGalleryArrowsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: { prevDisabled: "prevDisabled", nextDisabled: "nextDisabled", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon" }, outputs: { prevClick: "prevClick", nextClick: "nextClick" }, ngImport: i0, template: "<div class=\"ngx-gallery-arrows-wrapper ngx-gallery-arrow-left\">\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handlePrevClick()\" [class.ngx-gallery-disabled]=\"prevDisabled\">\n <i class=\"ngx-gallery-icon-content {{arrowPrevIcon}}\"></i>\n </div>\n</div>\n<div class=\"ngx-gallery-arrows-wrapper ngx-gallery-arrow-right\">\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handleNextClick()\" [class.ngx-gallery-disabled]=\"nextDisabled\">\n <i class=\"ngx-gallery-icon-content {{arrowNextIcon}}\"></i>\n </div>\n</div>\n", styles: [".ngx-gallery-arrow-wrapper{position:absolute;height:100%;width:1px;display:table;table-layout:fixed}.ngx-gallery-preview-img-wrapper .ngx-gallery-arrow-wrapper{z-index:10001}.ngx-gallery-arrow-left{left:0}.ngx-gallery-arrow-right{right:0}.ngx-gallery-arrow{top:50%;transform:translateY(-50%);cursor:pointer}.ngx-gallery-arrow.ngx-gallery-disabled{opacity:.6;cursor:default}.ngx-gallery-arrow-left .ngx-gallery-arrow{left:10px}.ngx-gallery-arrow-right .ngx-gallery-arrow{right:10px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryArrowsComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery-arrows', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-gallery-arrows-wrapper ngx-gallery-arrow-left\">\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handlePrevClick()\" [class.ngx-gallery-disabled]=\"prevDisabled\">\n <i class=\"ngx-gallery-icon-content {{arrowPrevIcon}}\"></i>\n </div>\n</div>\n<div class=\"ngx-gallery-arrows-wrapper ngx-gallery-arrow-right\">\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handleNextClick()\" [class.ngx-gallery-disabled]=\"nextDisabled\">\n <i class=\"ngx-gallery-icon-content {{arrowNextIcon}}\"></i>\n </div>\n</div>\n", styles: [".ngx-gallery-arrow-wrapper{position:absolute;height:100%;width:1px;display:table;table-layout:fixed}.ngx-gallery-preview-img-wrapper .ngx-gallery-arrow-wrapper{z-index:10001}.ngx-gallery-arrow-left{left:0}.ngx-gallery-arrow-right{right:0}.ngx-gallery-arrow{top:50%;transform:translateY(-50%);cursor:pointer}.ngx-gallery-arrow.ngx-gallery-disabled{opacity:.6;cursor:default}.ngx-gallery-arrow-left .ngx-gallery-arrow{left:10px}.ngx-gallery-arrow-right .ngx-gallery-arrow{right:10px}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { prevDisabled: [{
type: Input
}], nextDisabled: [{
type: Input
}], arrowPrevIcon: [{
type: Input
}], arrowNextIcon: [{
type: Input
}], prevClick: [{
type: Output
}], nextClick: [{
type: Output
}] } });
class NgxGalleryActionComponent {
constructor() {
this.disabled = false;
this.titleText = '';
this.closeClick = new EventEmitter();
}
handleClick(event) {
if (!this.disabled) {
this.closeClick.emit(event);
}
event.stopPropagation();
event.preventDefault();
}
}
NgxGalleryActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxGalleryActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: { icon: "icon", disabled: "disabled", titleText: "titleText" }, outputs: { closeClick: "closeClick" }, ngImport: i0, template: "<div class=\"ngx-gallery-icon\" [class.ngx-gallery-icon-disabled]=\"disabled\"\n aria-hidden=\"true\"\n title=\"{{ titleText }}\"\n (click)=\"handleClick($event)\">\n <i class=\"ngx-gallery-icon-content {{ icon }}\"></i>\n</div>\n", styles: [".ngx-gallery-icon{color:#fff;font-size:25px;position:absolute;z-index:2000;display:inline-block}.ngx-gallery-icon{position:relative;margin-right:10px;margin-top:10px;font-size:25px;cursor:pointer;text-decoration:none}.ngx-gallery-icon .ngx-gallery-icon-content{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryActionComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-gallery-icon\" [class.ngx-gallery-icon-disabled]=\"disabled\"\n aria-hidden=\"true\"\n title=\"{{ titleText }}\"\n (click)=\"handleClick($event)\">\n <i class=\"ngx-gallery-icon-content {{ icon }}\"></i>\n</div>\n", styles: [".ngx-gallery-icon{color:#fff;font-size:25px;position:absolute;z-index:2000;display:inline-block}.ngx-gallery-icon{position:relative;margin-right:10px;margin-top:10px;font-size:25px;cursor:pointer;text-decoration:none}.ngx-gallery-icon .ngx-gallery-icon-content{display:block}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { icon: [{
type: Input
}], disabled: [{
type: Input
}], titleText: [{
type: Input
}], closeClick: [{
type: Output
}] } });
class NgxGalleryBulletsComponent {
constructor() {
this.active = 0;
this.bulletChange = new EventEmitter();
}
getBullets() {
return Array(this.count);
}
handleChange(event, index) {
this.bulletChange.emit(index);
}
}
NgxGalleryBulletsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryBulletsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxGalleryBulletsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: NgxGalleryBulletsComponent, selector: "ngx-gallery-bullets", inputs: { count: "count", active: "active" }, outputs: { bulletChange: "bulletChange" }, ngImport: i0, template: "<div class=\"ngx-gallery-bullet\" *ngFor=\"let bullet of getBullets(); let i = index;\" (click)=\"handleChange($event, i)\"\n [ngClass]=\"{ 'ngx-gallery-active': i === active }\"></div>\n", styles: [":host{position:absolute;z-index:2000;display:inline-flex;left:50%;transform:translate(-50%);bottom:0;padding:10px}.ngx-gallery-bullet{width:10px;height:10px;border-radius:50%;cursor:pointer;background:white}.ngx-gallery-bullet:not(:first-child){margin-left:5px}.ngx-gallery-bullet:hover,.ngx-gallery-bullet.ngx-gallery-active{background:black}\n"], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryBulletsComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery-bullets', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-gallery-bullet\" *ngFor=\"let bullet of getBullets(); let i = index;\" (click)=\"handleChange($event, i)\"\n [ngClass]=\"{ 'ngx-gallery-active': i === active }\"></div>\n", styles: [":host{position:absolute;z-index:2000;display:inline-flex;left:50%;transform:translate(-50%);bottom:0;padding:10px}.ngx-gallery-bullet{width:10px;height:10px;border-radius:50%;cursor:pointer;background:white}.ngx-gallery-bullet:not(:first-child){margin-left:5px}.ngx-gallery-bullet:hover,.ngx-gallery-bullet.ngx-gallery-active{background:black}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { count: [{
type: Input
}], active: [{
type: Input
}], bulletChange: [{
type: Output
}] } });
class NgxGalleryPreviewComponent {
constructor(sanitization, elementRef, helperService, renderer, changeDetectorRef) {
this.sanitization = sanitization;
this.elementRef = elementRef;
this.helperService = helperService;
this.renderer = renderer;
this.changeDetectorRef = changeDetectorRef;
this.showSpinner = false;
this.positionLeft = 0;
this.positionTop = 0;
this.zoomValue = 1;
this.loading = false;
this.rotateValue = 0;
this.index = 0;
this.previewOpen = new EventEmitter();
this.previewClose = new EventEmitter();
this.activeChange = new EventEmitter();
this.isOpen = false;
this.initialX = 0;
this.initialY = 0;
this.initialLeft = 0;
this.initialTop = 0;
this.isMove = false;
}
ngOnInit() {
if (this.arrows && this.arrowsAutoHide) {
this.arrows = false;
}
}
ngOnChanges(changes) {
if (changes['swipe']) {
this.helperService.manageSwipe(this.swipe, this.elementRef, 'preview', () => this.showNext(), () => this.showPrev());
}
}
ngOnDestroy() {
if (this.keyDownListener) {
this.keyDownListener();
}
}
onMouseEnter() {
if (this.arrowsAutoHide && !this.arrows) {
this.arrows = true;
}
}
onMouseLeave() {
if (this.arrowsAutoHide && this.arrows) {
this.arrows = false;
}
}
onKeyDown(e) {
if (this.isOpen) {
if (this.keyboardNavigation) {
if (this.isKeyboardPrev(e)) {
this.showPrev();
}
else if (this.isKeyboardNext(e)) {
this.showNext();
}
}
if (this.closeOnEsc && this.isKeyboardEsc(e)) {
this.close();
}
}
}
open(index) {
this.previewOpen.emit();
this.index = index;
this.isOpen = true;
this.show(true);
if (this.forceFullscreen) {
this.manageFullscreen();
}
this.keyDownListener = this.renderer.listen('window', 'keydown', (e) => this.onKeyDown(e));
}
close() {
this.isOpen = false;
const video = this.previewImage.nativeElement;
if (video.currentTime > 0 &&
!video.paused &&
!video.ended &&
video.readyState > 2) {
video.pause();
}
this.closeFullscreen();
this.previewClose.emit();
this.stopAutoPlay();
if (this.keyDownListener) {
this.keyDownListener();
}
}
imageMouseEnter() {
if (this.autoPlay && this.autoPlayPauseOnHover) {
this.stopAutoPlay();
}
}
imageMouseLeave() {
if (this.autoPlay && this.autoPlayPauseOnHover) {
this.startAutoPlay();
}
}
startAutoPlay() {
if (this.autoPlay) {
this.stopAutoPlay();
this.timer = setTimeout(() => {
if (!this.showNext()) {
this.index = -1;
this.showNext();
}
}, this.autoPlayInterval);
}
}
stopAutoPlay() {
if (this.timer) {
clearTimeout(this.timer);
}
}
showAtIndex(index) {
this.index = index;
this.show();
}
showNext() {
if (this.canShowNext()) {
this.index++;
if (this.index === this.images.length) {
this.index = 0;
}
this.show();
return true;
}
else {
return false;
}
}
showPrev() {
if (this.canShowPrev()) {
this.index--;
if (this.index < 0) {
this.index = this.images.length - 1;
}
this.show();
}
}
canShowNext() {
if (this.loading) {
return false;
}
else if (this.images) {
return this.infinityMove || this.index < this.images.length - 1;
}
else {
return false;
}
}
canShowPrev() {
if (this.loading) {
return false;
}
else if (this.images) {
return this.infinityMove || this.index > 0;
}
else {
return false;
}
}
manageFullscreen() {
if (this.fullscreen || this.forceFullscreen) {
const doc = document;
if (!doc.fullscreenElement && !doc.mozFullScreenElement
&& !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
this.openFullscreen();
}
else {
this.closeFullscreen();
}
}
}
getSafeUrl(image) {
return this.sanitization.bypassSecurityTrustUrl(image);
}
getFileType(fileSource) {
return this.helperService.getFileType(fileSource);
}
zoomIn() {
if (this.canZoomIn()) {
this.zoomValue += this.zoomStep;
if (this.zoomValue > this.zoomMax) {
this.zoomValue = this.zoomMax;
}
}
}
zoomOut() {
if (this.canZoomOut()) {
this.zoomValue -= this.zoomStep;
if (this.zoomValue < this.zoomMin) {
this.zoomValue = this.zoomMin;
}
if (this.zoomValue <= 1) {
this.resetPosition();
}
}
}
rotateLeft() {
this.rotateValue -= 90;
}
rotateRight() {
this.rotateValue += 90;
}
getTransform() {
return this.sanitization.bypassSecurityTrustStyle('scale(' + this.zoomValue + ') rotate(' + this.rotateValue + 'deg)');
}
canZoomIn() {
return this.zoomValue < this.zoomMax;
}
canZoomOut() {
return this.zoomValue > this.zoomMin;
}
canDragOnZoom() {
return this.zoom && this.zoomValue > 1;
}
mouseDownHandler(e) {
if (this.canDragOnZoom()) {
this.initialX = this.getClientX(e);
this.initialY = this.getClientY(e);
this.initialLeft = this.positionLeft;
this.initialTop = this.positionTop;
this.isMove = true;
e.preventDefault();
}
}
mouseUpHandler(e) {
this.isMove = false;
}
mouseMoveHandler(e) {
if (this.isMove) {
this.positionLeft = this.initialLeft + (this.getClientX(e) - this.initialX);
this.positionTop = this.initialTop + (this.getClientY(e) - this.initialY);
}
}
getClientX(e) {
return e.touches && e.touches.length ? e.touches[0].clientX : e.clientX;
}
getClientY(e) {
return e.touches && e.touches.length ? e.touches[0].clientY : e.clientY;
}
resetPosition() {
if (this.zoom) {
this.positionLeft = 0;
this.positionTop = 0;
}
}
isKeyboardNext(e) {
return e.keyCode === 39;
}
isKeyboardPrev(e) {
return e.keyCode === 37;
}
isKeyboardEsc(e) {
return e.keyCode === 27;
}
openFullscreen() {
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
}
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
closeFullscreen() {
if (this.isFullscreen()) {
const doc = document;
if (doc.exitFullscreen) {
doc.exitFullscreen();
}
else if (doc.msExitFullscreen) {
doc.msExitFullscreen();
}
else if (doc.mozCancelFullScreen) {
doc.mozCancelFullScreen();
}
else if (doc.webkitExitFullscreen) {
doc.webkitExitFullscreen();
}
}
}
isFullscreen() {
const doc = document;
return doc.fullscreenElement || doc.webkitFullscreenElement
|| doc.mozFullScreenElement || doc.msFullscreenElement;
}
show(first = false) {
this.loading = true;
this.stopAutoPlay();
this.activeChange.emit(this.index);
if (first || !this.animation) {
this._show();
}
else {
setTimeout(() => this._show(), 600);
}
}
_show() {
this.zoomValue = 1;
this.rotateValue = 0;
this.resetPosition();
this.src = this.getSafeUrl(this.images[this.index]);
this.type = this.getFileType(this.images[this.index]);
this.srcIndex = this.index;
this.description = this.descriptions[this.index];
this.changeDetectorRef.markForCheck();
setTimeout(() => {
if (this.isLoaded(this.previewImage.nativeElement) || this.type === 'video') {
this.loading = false;
this.startAutoPlay();
this.changeDetectorRef.markForCheck();
}
else if (this.type === 'video') {
}
else {
setTimeout(() => {
if (this.loading) {
this.showSpinner = true;
this.changeDetectorRef.markForCheck();
}
});
this.previewImage.nativeElement.onload = () => {
this.loading = false;
this.showSpinner = false;
this.previewImage.nativeElement.onload = null;
this.startAutoPlay();
this.changeDetectorRef.markForCheck();
};
}
});
}
isLoaded(img) {
if (!img.complete) {
return false;
}
return !(typeof img.naturalWidth !== 'undefined' && img.naturalWidth === 0);
}
}
NgxGalleryPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryPreviewComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: NgxGalleryService }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NgxGalleryPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: NgxGalleryPreviewComponent, selector: "ngx-gallery-preview", inputs: { images: "images", descriptions: "descriptions", showDescription: "showDescription", arrows: "arrows", arrowsAutoHide: "arrowsAutoHide", swipe: "swipe", fullscreen: "fullscreen", forceFullscreen: "forceFullscreen", closeOnClick: "closeOnClick", closeOnEsc: "closeOnEsc", keyboardNavigation: "keyboardNavigation", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon", closeIcon: "closeIcon", fullscreenIcon: "fullscreenIcon", spinnerIcon: "spinnerIcon", autoPlay: "autoPlay", autoPlayInterval: "autoPlayInterval", autoPlayPauseOnHover: "autoPlayPauseOnHover", infinityMove: "infinityMove", zoom: "zoom", zoomStep: "zoomStep", zoomMax: "zoomMax", zoomMin: "zoomMin", zoomInIcon: "zoomInIcon", zoomOutIcon: "zoomOutIcon", animation: "animation", actions: "actions", rotate: "rotate", rotateLeftIcon: "rotateLeftIcon", rotateRightIcon: "rotateRightIcon", download: "download", downloadIcon: "downloadIcon", bullets: "bullets" }, outputs: { previewOpen: "previewOpen", previewClose: "previewClose", activeChange: "activeChange" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "previewImage", first: true, predicate: ["previewImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ngx-gallery-arrows *ngIf=\"arrows\" (prevClick)=\"showPrev()\" (nextClick)=\"showNext()\" [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\" [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\n<div class=\"ngx-gallery-preview-top\">\n <div class=\"ngx-gallery-preview-icons\">\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\" (closeClick)=\"action.onClick($event, index)\"></ngx-gallery-action>\n <a *ngIf=\"download && src\" [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\n </a>\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomOutIcon\" [disabled]=\"!canZoomOut()\"\n (closeClick)=\"zoomOut()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomInIcon\" [disabled]=\"!canZoomIn()\"\n (closeClick)=\"zoomIn()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateLeftIcon\" (closeClick)=\"rotateLeft()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateRightIcon\" (closeClick)=\"rotateRight()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"fullscreen\" [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\"\n (closeClick)=\"manageFullscreen()\"></ngx-gallery-action>\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon\" (closeClick)=\"close()\"></ngx-gallery-action>\n </div>\n</div>\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}\" aria-hidden=\"true\"></i>\n</div>\n<div class=\"ngx-gallery-preview-wrapper\" (click)=\"closeOnClick && close()\" (mouseup)=\"mouseUpHandler($event)\"\n (mousemove)=\"mouseMoveHandler($event)\" (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\">\n <div class=\"ngx-gallery-preview-img-wrapper\">\n <img *ngIf=\"src && type === 'image'\" #previewImage class=\"ngx-gallery-preview-img ngx-gallery-center\" [src]=\"src\"\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\"\n (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\n [class.ngx-gallery-active]=\"!loading\" [class.animation]=\"animation\" [class.ngx-gallery-grab]=\"canDragOnZoom()\"\n [style.transform]=\"getTransform()\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\"/>\n <video *ngIf=\"src && type === 'video'\" #previewImage controls style=\"width: 100%; height: 100%;\"\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\" (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\n [class.ngx-gallery-active]=\"!loading\" [class.animation]=\"animation\" [class.ngx-gallery-grab]=\"canDragOnZoom()\" [style.transform]=\"getTransform()\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\">\n <source [src]=\"src\">\n Your browser does not support the video tag.\n </video>\n <ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"index\"\n (bulletChange)=\"showAtIndex($event)\"></ngx-gallery-bullets>\n </div>\n <div class=\"ngx-gallery-preview-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description\"\n (click)=\"$event.stopPropagation()\"></div>\n</div>\n", styles: [":host.ngx-gallery-active{width:100%;height:100%;position:fixed;left:0;top:0;background:rgba(0,0,0,.7);z-index:10000;display:inline-block;font-size:50px!important}:host{display:none;font-size:50px!important}:host .ngx-gallery-arrow{font-size:50px!important}ngx-gallery-bullets{height:5%;align-items:center;padding:0}.ngx-gallery-preview-img{opacity:0;max-width:90%;max-height:90%;-webkit-user-select:none;user-select:none;transition:transform .5s}.ngx-gallery-preview-img.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-img.ngx-gallery-active{opacity:1}.ngx-gallery-preview-img.ngx-gallery-grab{cursor:grab}.ngx-gallery-icon.ngx-gallery-spinner{font-size:50px;left:0;display:inline-block}:host .ngx-gallery-preview-top{position:absolute;width:100%;-webkit-user-select:none;user-select:none;font-size:25px}.ngx-gallery-preview-icons{float:right}.ngx-gallery-preview-icons .ngx-gallery-icon{position:relative;margin-right:10px;margin-top:10px;font-size:25px;cursor:pointer;text-decoration:none}.ngx-gallery-preview-icons .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}.ngx-spinner-wrapper{width:50px;height:50px;display:none}.ngx-spinner-wrapper.ngx-gallery-active{display:inline-block}.ngx-gallery-center{position:absolute;left:0;right:0;bottom:0;margin:auto;top:0}.ngx-gallery-preview-text{width:100%;background:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;flex:0 1 auto;z-index:10}.ngx-gallery-preview-wrapper{width:100%;height:100%;display:flex;flex-flow:column}.ngx-gallery-preview-img-wrapper{flex:1 1 auto;position:relative}\n"], components: [{ type: NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["prevClick", "nextClick"] }, { type: NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["closeClick"] }, { type: NgxGalleryBulletsComponent, selector: "ngx-gallery-bullets", inputs: ["count", "active"], outputs: ["bulletChange"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryPreviewComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery-preview', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngx-gallery-arrows *ngIf=\"arrows\" (prevClick)=\"showPrev()\" (nextClick)=\"showNext()\" [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\" [arrowPrevIcon]=\"arrowPrevIcon\"\n [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\n<div class=\"ngx-gallery-preview-top\">\n <div class=\"ngx-gallery-preview-icons\">\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\" (closeClick)=\"action.onClick($event, index)\"></ngx-gallery-action>\n <a *ngIf=\"download && src\" [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\n </a>\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomOutIcon\" [disabled]=\"!canZoomOut()\"\n (closeClick)=\"zoomOut()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomInIcon\" [disabled]=\"!canZoomIn()\"\n (closeClick)=\"zoomIn()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateLeftIcon\" (closeClick)=\"rotateLeft()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateRightIcon\" (closeClick)=\"rotateRight()\"></ngx-gallery-action>\n <ngx-gallery-action *ngIf=\"fullscreen\" [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\"\n (closeClick)=\"manageFullscreen()\"></ngx-gallery-action>\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon\" (closeClick)=\"close()\"></ngx-gallery-action>\n </div>\n</div>\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}\" aria-hidden=\"true\"></i>\n</div>\n<div class=\"ngx-gallery-preview-wrapper\" (click)=\"closeOnClick && close()\" (mouseup)=\"mouseUpHandler($event)\"\n (mousemove)=\"mouseMoveHandler($event)\" (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\">\n <div class=\"ngx-gallery-preview-img-wrapper\">\n <img *ngIf=\"src && type === 'image'\" #previewImage class=\"ngx-gallery-preview-img ngx-gallery-center\" [src]=\"src\"\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\"\n (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\n [class.ngx-gallery-active]=\"!loading\" [class.animation]=\"animation\" [class.ngx-gallery-grab]=\"canDragOnZoom()\"\n [style.transform]=\"getTransform()\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\"/>\n <video *ngIf=\"src && type === 'video'\" #previewImage controls style=\"width: 100%; height: 100%;\"\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\" (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\n [class.ngx-gallery-active]=\"!loading\" [class.animation]=\"animation\" [class.ngx-gallery-grab]=\"canDragOnZoom()\" [style.transform]=\"getTransform()\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\">\n <source [src]=\"src\">\n Your browser does not support the video tag.\n </video>\n <ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"index\"\n (bulletChange)=\"showAtIndex($event)\"></ngx-gallery-bullets>\n </div>\n <div class=\"ngx-gallery-preview-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description\"\n (click)=\"$event.stopPropagation()\"></div>\n</div>\n", styles: [":host.ngx-gallery-active{width:100%;height:100%;position:fixed;left:0;top:0;background:rgba(0,0,0,.7);z-index:10000;display:inline-block;font-size:50px!important}:host{display:none;font-size:50px!important}:host .ngx-gallery-arrow{font-size:50px!important}ngx-gallery-bullets{height:5%;align-items:center;padding:0}.ngx-gallery-preview-img{opacity:0;max-width:90%;max-height:90%;-webkit-user-select:none;user-select:none;transition:transform .5s}.ngx-gallery-preview-img.animation{transition:opacity .5s linear,transform .5s}.ngx-gallery-preview-img.ngx-gallery-active{opacity:1}.ngx-gallery-preview-img.ngx-gallery-grab{cursor:grab}.ngx-gallery-icon.ngx-gallery-spinner{font-size:50px;left:0;display:inline-block}:host .ngx-gallery-preview-top{position:absolute;width:100%;-webkit-user-select:none;user-select:none;font-size:25px}.ngx-gallery-preview-icons{float:right}.ngx-gallery-preview-icons .ngx-gallery-icon{position:relative;margin-right:10px;margin-top:10px;font-size:25px;cursor:pointer;text-decoration:none}.ngx-gallery-preview-icons .ngx-gallery-icon.ngx-gallery-icon-disabled{cursor:default;opacity:.4}.ngx-spinner-wrapper{width:50px;height:50px;display:none}.ngx-spinner-wrapper.ngx-gallery-active{display:inline-block}.ngx-gallery-center{position:absolute;left:0;right:0;bottom:0;margin:auto;top:0}.ngx-gallery-preview-text{width:100%;background:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;flex:0 1 auto;z-index:10}.ngx-gallery-preview-wrapper{width:100%;height:100%;display:flex;flex-flow:column}.ngx-gallery-preview-img-wrapper{flex:1 1 auto;position:relative}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: NgxGalleryService }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { images: [{
type: Input
}], descriptions: [{
type: Input
}], showDescription: [{
type: Input
}], arrows: [{
type: Input
}], arrowsAutoHide: [{
type: Input
}], swipe: [{
type: Input
}], fullscreen: [{
type: Input
}], forceFullscreen: [{
type: Input
}], closeOnClick: [{
type: Input
}], closeOnEsc: [{
type: Input
}], keyboardNavigation: [{
type: Input
}], arrowPrevIcon: [{
type: Input
}], arrowNextIcon: [{
type: Input
}], closeIcon: [{
type: Input
}], fullscreenIcon: [{
type: Input
}], spinnerIcon: [{
type: Input
}], autoPlay: [{
type: Input
}], autoPlayInterval: [{
type: Input
}], autoPlayPauseOnHover: [{
type: Input
}], infinityMove: [{
type: Input
}], zoom: [{
type: Input
}], zoomStep: [{
type: Input
}], zoomMax: [{
type: Input
}], zoomMin: [{
type: Input
}], zoomInIcon: [{
type: Input
}], zoomOutIcon: [{
type: Input
}], animation: [{
type: Input
}], actions: [{
type: Input
}], rotate: [{
type: Input
}], rotateLeftIcon: [{
type: Input
}], rotateRightIcon: [{
type: Input
}], download: [{
type: Input
}], downloadIcon: [{
type: Input
}], bullets: [{
type: Input
}], previewOpen: [{
type: Output
}], previewClose: [{
type: Output
}], activeChange: [{
type: Output
}], previewImage: [{
type: ViewChild,
args: ['previewImage']
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
class NgxGalleryAnimation {
}
NgxGalleryAnimation.Fade = 'fade';
NgxGalleryAnimation.Slide = 'slide';
NgxGalleryAnimation.Rotate = 'rotate';
NgxGalleryAnimation.Zoom = 'zoom';
class NgxGalleryImageComponent {
constructor(sanitization, changeDetectorRef, elementRef, helperService) {
this.sanitization = sanitization;
this.changeDetectorRef = changeDetectorRef;
this.elementRef = elementRef;
this.helperService = helperService;
this.imageClick = new EventEmitter();
this.activeChange = new EventEmitter();
this.animating = new EventEmitter();
this.canChangeImage = true;
this.isAnimating = false;
this.changeDetectorRef = changeDetectorRef;
this.action = 'none';
}
set selectedIndex(index) {
if (index > this._selectedIndex) {
let action;
if (this.animation === NgxGalleryAnimation.Slide) {
action = 'slideRight';
}
else if (this.animation === NgxGalleryAnimation.Fade) {
action = 'fade';
}
else if (this.animation === NgxGalleryAnimation.Rotate) {
action = 'rotateRight';
}
else if (this.animation === NgxGalleryAnimation.Zoom) {
action = 'zoom';
}
this.setAction(action);
}
else if (index < this._selectedIndex) {
let action;
if (this.animation === NgxGalleryAnimation.Slide) {
action = 'slideLeft';
}
else if (this.animation === NgxGalleryAnimation.Fade) {
action = 'fade';
}
else if (this.animation === NgxGalleryAnimation.Rotate) {
action = 'rotateLeft';
}
else if (this.animation === NgxGalleryAnimation.Zoom) {
action = 'zoom';
}
this.setAction(action);
}
this._selectedIndex = index;
}
// @HostBinding('style.display') public display = 'inline-block';
// @HostBinding('style.background-color') public color = 'lime';
ngOnInit() {
if (this.arrows && this.arrowsAutoHide) {
this.arrows = false;
}
if (this.autoPlay) {
this.startAutoPlay();
}
}
ngOnChanges(changes) {
if (changes['swipe']) {
this.helperService.manageSwipe(this.swipe, this.elementRef, 'image', () => this.showNext(), () => this.showPrev());
}
}
onMouseEnter() {
if (this.arrowsAutoHide && !this.arrows) {
this.arrows = true;
}
if (this.autoPlay && this.autoPlayPauseOnHover) {
this.stopAutoPlay();
}
}
onMouseLeave() {
if (this.arrowsAutoHide && this.arrows) {
this.arrows = false;
}
if (this.autoPlay && this.autoPlayPauseOnHover) {
this.startAutoPlay();
}
}
reset(index) {
this._selectedIndex = index;
this.action = 'none';
}
getImages() {
if (!this.images) {
return [];
}
if (this.lazyLoading) {
const indexes = [this._selectedIndex];
const prevIndex = this._selectedIndex - 1;
if (prevIndex === -1 && this.infinityMove) {
indexes.push(this.images.length - 1);
}
else if (prevIndex >= 0) {
indexes.push(prevIndex);
}
const nextIndex = this._selectedIndex + 1;
if (nextIndex === this.images.length && this.infinityMove) {
indexes.push(0);
}
else if (nextIndex < this.images.length) {
indexes.push(nextIndex);
}
return this.images.filter((img, i) => indexes.indexOf(i) !== -1);
}
else {
return this.images;
}
}
startAutoPlay() {
this.stopAutoPlay();
this.timer = setInterval(() => {
if (!this.showNext()) {
this._selectedIndex = -1;
this.showNext();
}
}, this.autoPlayInterval);
}
stopAutoPlay() {
if (this.timer) {
clearInterval(this.timer);
}
}
handleClick(event, index) {
if (this.clickable) {
this.imageClick.emit(index);
event.stopPropagation();
event.preventDefault();
}
}
show(index) {
if (this.isAnimating) {
return;
}
if (index > this._selectedIndex) {
let action;
if (this.animation === NgxGalleryAnimation.Slide) {
action = 'slideRight';
}
else if (this.animation === NgxGalleryAnimation.Fade) {
action = 'fade';
}
else if (this.animation === NgxGalleryAnimation.Rotate) {
action = 'rotateRight';
}
else if (this.animation === NgxGalleryAnimation.Zoom) {
action = 'zoom';
}
this.setAction(action);
}
else {
let action;
if (this.animation === NgxGalleryAnimation.Slide) {
action = 'slideLeft';
}
else if (this.animation === NgxGalleryAnimation.Fade) {
action = 'fade';
}
else if (this.animation === NgxGalleryAnimation.Rotate) {
action = 'rotateLeft';
}
else if (this.animation === NgxGalleryAnimation.Zoom) {
action = 'zoom';
}
this.setAction(action);
}
this._selectedIndex = index;
this.activeChange.emit(this._selectedIndex);
this.setChangeTimeout();
}
setAction(action) {
this.action = action;
this.changeDetectorRef.detectChanges();
}
showNext() {
if (this.isAnimating) {
return false;
}
if (this.canShowNext() && this.canChangeImage) {
let action;
if (this.animation === NgxGalleryAnimation.Slide) {
action = 'slideRight';
}
else if (this.animation === NgxGalleryAnimation.Fade) {
action = 'fade';
}
else if (this.animation === NgxGalleryAnimation.Rotate) {
action = 'rotateRight';
}
else if (this.animation === NgxGalleryAnimation.Zoom) {
action = 'zoom';
}
this.setAction(action);
this._selectedIndex++;
if (this._selectedIndex === this.images.length) {
this._selectedIndex = 0;
}
this.activeChange.emit(this._selectedIndex);
this.setChangeTimeout();
return true;
}
else {
return false;
}
}
showPrev() {
if (this.isAnimating) {
return;
}
if (this.canShowPrev() && this.canChangeImage) {
let action;
if (this.animation === NgxGalleryAnimation.Slide) {
action = 'slideLeft';
}
else if (this.animation === NgxGalleryAnimation.Fade) {
action = 'fade';
}
else if (this.animation === NgxGalleryAnimation.Rotate) {
action = 'rotateLeft';
}
else if (this.animation === NgxGalleryAnimation.Zoom) {
action = 'zoom';
}
this.setAction(action);
this._selectedIndex--;
if (this._selectedIndex < 0) {
this._selectedIndex = this.images.length - 1;
}
this.activeChange.emit(this._selectedIndex);
this.setChangeTimeout();
}
}
setChangeTimeout() {
this.canChangeImage = false;
let timeout = 1000;
if (this.animation === NgxGalleryAnimation.Slide
|| this.animation === NgxGalleryAnimation.Fade) {
timeout = 500;
}
setTimeout(() => {
this.canChangeImage = true;
}, timeout);
}
canShowNext() {
if (this.images) {
return this.infinityMove || this._selectedIndex < this.images.length - 1;
}
else {
return false;
}
}
canShowPrev() {
if (this.images) {
return this.infinityMove || this._selectedIndex > 0;
}
else {
return false;
}
}
getSafeUrl(image) {
return this.sanitization.bypassSecurityTrustStyle(this.helperService.getBackgroundUrl(image.toString()));
}
getFileType(fileSource) {
return this.helperService.getFileType(fileSource);
}
onStart(event) {
this.isAnimating = true;
this.animating.emit(true);
}
onDone(event) {
this.isAnimating = false;
this.animating.emit(false);
}
}
NgxGalleryImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: NgxGalleryImageComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: NgxGalleryService }], target: i0.ɵɵFactoryTarget.Component });
NgxGalleryImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: NgxGalleryImageComponent, selector: "ngx-gallery-image", inputs: { images: "images", clickable: "clickable", selectedIndex: "selectedIndex", arrows: "arrows", arrowsAutoHide: "arrowsAutoHide", swipe: "swipe", animation: "animation", size: "size", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon", autoPlay: "autoPlay", autoPlayInterval: "autoPlayInterval", autoPlayPauseOnHover: "autoPlayPauseOnHover", infinityMove: "infinityMove", lazyLoading: "lazyLoading", actions: "actions", descriptions: "descriptions", showDescription: "showDescription", bullets: "bullets" }, outputs: { imageClick: "imageClick", activeChange: "activeChange", animating: "animating" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}\">\n <ng-container *ngFor=\"let image of getImages(); let i = index;\">\n\n <div *ngIf=\"image.type === 'image' && image.index === _selectedIndex\" class=\"ngx-gallery-image\"\n [ngClass]=\"{'ngx-gallery-clickable': clickable }\"\n [style.background-image]=\"getSafeUrl(image.src)\"\n (click)=\"handleClick($event, image.index)\"\n [@animation]=\"action\"\n (@animation.start)=\"onStart($event)\"\n (@animation.done)=\"onDone($event)\">\n <div class=\"ngx-gallery-icons-wrapper\">\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\"\n (closeClick)=\"action.onClick($event, image.index)\"></ngx-gallery-action>\n </div>\n <div class=\"ngx-gallery-image-text\" *ngIf=\"showDescription && descriptions[image.index]\"\n [innerHTML]=\"descriptions[image.index]\" (click)=\"$event.stopPropagation()\"></div>\n </div>\n\n