@rybos/ngx-gallery
Version:
A simple responsive native gallery component for Angular 15.
1,773 lines • 122 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 i3 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: "15.1.0", ngImport: i0, type: NgxGalleryService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
NgxGalleryService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: NgxGalleryService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", 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: "15.1.0", ngImport: i0, type: NgxGalleryArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxGalleryArrowsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", 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\">\r\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handlePrevClick()\" [class.ngx-gallery-disabled]=\"prevDisabled\">\r\n <i class=\"ngx-gallery-icon-content {{arrowPrevIcon}}\"></i>\r\n </div>\r\n</div>\r\n<div class=\"ngx-gallery-arrows-wrapper ngx-gallery-arrow-right\">\r\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handleNextClick()\" [class.ngx-gallery-disabled]=\"nextDisabled\">\r\n <i class=\"ngx-gallery-icon-content {{arrowNextIcon}}\"></i>\r\n </div>\r\n</div>\r\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: "15.1.0", 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\">\r\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handlePrevClick()\" [class.ngx-gallery-disabled]=\"prevDisabled\">\r\n <i class=\"ngx-gallery-icon-content {{arrowPrevIcon}}\"></i>\r\n </div>\r\n</div>\r\n<div class=\"ngx-gallery-arrows-wrapper ngx-gallery-arrow-right\">\r\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handleNextClick()\" [class.ngx-gallery-disabled]=\"nextDisabled\">\r\n <i class=\"ngx-gallery-icon-content {{arrowNextIcon}}\"></i>\r\n </div>\r\n</div>\r\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: "15.1.0", ngImport: i0, type: NgxGalleryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxGalleryActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", 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\"\r\n aria-hidden=\"true\"\r\n title=\"{{ titleText }}\"\r\n (click)=\"handleClick($event)\">\r\n <i class=\"ngx-gallery-icon-content {{ icon }}\"></i>\r\n</div>\r\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: "15.1.0", 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\"\r\n aria-hidden=\"true\"\r\n title=\"{{ titleText }}\"\r\n (click)=\"handleClick($event)\">\r\n <i class=\"ngx-gallery-icon-content {{ icon }}\"></i>\r\n</div>\r\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: "15.1.0", ngImport: i0, type: NgxGalleryBulletsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxGalleryBulletsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", 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)\"\r\n [ngClass]=\"{ 'ngx-gallery-active': i === active }\"></div>\r\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"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", 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)\"\r\n [ngClass]=\"{ 'ngx-gallery-active': i === active }\"></div>\r\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: "15.1.0", 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: "14.0.0", version: "15.1.0", 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()\"\r\n [nextDisabled]=\"!canShowNext()\" [arrowPrevIcon]=\"arrowPrevIcon\"\r\n [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\r\n<div class=\"ngx-gallery-preview-top\">\r\n <div class=\"ngx-gallery-preview-icons\">\r\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\r\n [titleText]=\"action.titleText\" (closeClick)=\"action.onClick($event, index)\"></ngx-gallery-action>\r\n <a *ngIf=\"download && src\" [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\r\n <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\r\n </a>\r\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomOutIcon\" [disabled]=\"!canZoomOut()\"\r\n (closeClick)=\"zoomOut()\"></ngx-gallery-action>\r\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomInIcon\" [disabled]=\"!canZoomIn()\"\r\n (closeClick)=\"zoomIn()\"></ngx-gallery-action>\r\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateLeftIcon\" (closeClick)=\"rotateLeft()\"></ngx-gallery-action>\r\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateRightIcon\" (closeClick)=\"rotateRight()\"></ngx-gallery-action>\r\n <ngx-gallery-action *ngIf=\"fullscreen\" [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\"\r\n (closeClick)=\"manageFullscreen()\"></ngx-gallery-action>\r\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon\" (closeClick)=\"close()\"></ngx-gallery-action>\r\n </div>\r\n</div>\r\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\r\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}\" aria-hidden=\"true\"></i>\r\n</div>\r\n<div class=\"ngx-gallery-preview-wrapper\" (click)=\"closeOnClick && close()\" (mouseup)=\"mouseUpHandler($event)\"\r\n (mousemove)=\"mouseMoveHandler($event)\" (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\">\r\n <div class=\"ngx-gallery-preview-img-wrapper\">\r\n <img *ngIf=\"src && type === 'image'\" #previewImage class=\"ngx-gallery-preview-img ngx-gallery-center\" [src]=\"src\"\r\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\"\r\n (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\r\n [class.ngx-gallery-active]=\"!loading\" [class.animation]=\"animation\" [class.ngx-gallery-grab]=\"canDragOnZoom()\"\r\n [style.transform]=\"getTransform()\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\"/>\r\n <video *ngIf=\"src && type === 'video'\" #previewImage controls style=\"width: 100%; height: 100%;\"\r\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\r\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\" (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\r\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'\">\r\n <source [src]=\"src\">\r\n Your browser does not support the video tag.\r\n </video>\r\n <ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"index\"\r\n (bulletChange)=\"showAtIndex($event)\"></ngx-gallery-bullets>\r\n </div>\r\n <div class=\"ngx-gallery-preview-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description\"\r\n (click)=\"$event.stopPropagation()\"></div>\r\n</div>\r\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;inset:0;margin:auto}.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"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["prevClick", "nextClick"] }, { kind: "component", type: NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["closeClick"] }, { kind: "component", type: NgxGalleryBulletsComponent, selector: "ngx-gallery-bullets", inputs: ["count", "active"], outputs: ["bulletChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", 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()\"\r\n [nextDisabled]=\"!canShowNext()\" [arrowPrevIcon]=\"arrowPrevIcon\"\r\n [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\r\n<div class=\"ngx-gallery-preview-top\">\r\n <div class=\"ngx-gallery-preview-icons\">\r\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\r\n [titleText]=\"action.titleText\" (closeClick)=\"action.onClick($event, index)\"></ngx-gallery-action>\r\n <a *ngIf=\"download && src\" [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\r\n <i class=\"ngx-gallery-icon-content {{ downloadIcon }}\"></i>\r\n </a>\r\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomOutIcon\" [disabled]=\"!canZoomOut()\"\r\n (closeClick)=\"zoomOut()\"></ngx-gallery-action>\r\n <ngx-gallery-action *ngIf=\"zoom\" [icon]=\"zoomInIcon\" [disabled]=\"!canZoomIn()\"\r\n (closeClick)=\"zoomIn()\"></ngx-gallery-action>\r\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateLeftIcon\" (closeClick)=\"rotateLeft()\"></ngx-gallery-action>\r\n <ngx-gallery-action *ngIf=\"rotate\" [icon]=\"rotateRightIcon\" (closeClick)=\"rotateRight()\"></ngx-gallery-action>\r\n <ngx-gallery-action *ngIf=\"fullscreen\" [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon\"\r\n (closeClick)=\"manageFullscreen()\"></ngx-gallery-action>\r\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon\" (closeClick)=\"close()\"></ngx-gallery-action>\r\n </div>\r\n</div>\r\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\r\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon}}\" aria-hidden=\"true\"></i>\r\n</div>\r\n<div class=\"ngx-gallery-preview-wrapper\" (click)=\"closeOnClick && close()\" (mouseup)=\"mouseUpHandler($event)\"\r\n (mousemove)=\"mouseMoveHandler($event)\" (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\">\r\n <div class=\"ngx-gallery-preview-img-wrapper\">\r\n <img *ngIf=\"src && type === 'image'\" #previewImage class=\"ngx-gallery-preview-img ngx-gallery-center\" [src]=\"src\"\r\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\"\r\n (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\r\n [class.ngx-gallery-active]=\"!loading\" [class.animation]=\"animation\" [class.ngx-gallery-grab]=\"canDragOnZoom()\"\r\n [style.transform]=\"getTransform()\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\"/>\r\n <video *ngIf=\"src && type === 'video'\" #previewImage controls style=\"width: 100%; height: 100%;\"\r\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\r\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\" (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\r\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'\">\r\n <source [src]=\"src\">\r\n Your browser does not support the video tag.\r\n </video>\r\n <ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"index\"\r\n (bulletChange)=\"showAtIndex($event)\"></ngx-gallery-bullets>\r\n </div>\r\n <div class=\"ngx-gallery-preview-text\" *ngIf=\"showDescription && description\" [innerHTML]=\"description\"\r\n (click)=\"$event.stopPropagation()\"></div>\r\n</div>\r\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;inset:0;margin:auto}.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: "15.1.0", 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: "14.0.0", version: "15.1.0", 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}}\">\r\n <ng-container *ngFor=\"let image of getImages(); let i = index;\">\r\n\r\n <div *ngIf=\"image.type === 'image' && image.index === _selectedIndex\" class=\"ngx-gallery-image\"\r\n [ngClass]=\"{'ngx-gallery-clickable': clickable }\"\r\n [style.background-image]=\"getSafeUrl(image.src)\"\r\n (click)=\"handleClick($event, image.index)\"\r\n [@animation]=\"action\"\r\n (@animation.start)=\"onStart($event)\"\r\n (@animation.done)=\"onDone($event)\">\r\n <div class=\"ngx-gallery-icons-wrapper\">\r\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\r\n [titleText]=\"action.titleText\"\r\n (closeClick)=\"action.onClick($event, image.index)\"></ngx-gallery-action>\r\n </div>\r\n <div class=\"ngx-gallery-image-text\" *ngIf=\"showDescription && descriptions[image.index]\"\r\n [innerHTML]=\"descriptions[image.index]\" (click)=\"$event.stopPropagation()\"></div>\r\n </div>\r\n\r\n <div *ngIf=\"image.type === 'video' && image.index === _selectedIndex\" class=\"ngx-gallery-image\"\r\n [ngClass]=\"{'ngx-gallery-clickable': clickable }\"\r\n [style.background-image]=\"getSafeUrl(image.src)\"\r\n (click)=\"handleClick($event, image.index)\"\r\n [@animation]=\"action\"\r\n (@animation.start)=\"onStart($event)\"\r\n (@animation.done)=\"onDone($event)\">\r\n <video controls style=\"width:100%; height:100%; background: #000;\">\r\n <source [src]=\"image.src\">\r\n Your browser does not support the video tag.\r\n </video>\r\n <div class=\"ngx-gallery-icons-wrapper\">\r\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\r\n [titleText]=\"action.titleText\"\r\n (closeClick)=\"action.onClick($event, image.index)\"></ngx-gallery-action>\r\n </div>\r\n <div class=\"ngx-gallery-image-text\" *ngIf=\"showDescription && descriptions[image.index]\"\r\n [innerHTML]=\"descriptions[image.index]\" (click)=\"$event.stopPropagation()\"></div>\r\n </div>\r\n\r\n\r\n </ng-container>\r\n <ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"_selectedIndex\"\r\n (bulletChange)=\"show($event)\"></ngx-gallery-bullets>\r\n <ngx-gallery-arrows class=\"ngx-gallery-image-size-{{size}}\" *ngIf=\"arrows\" (prevClick)=\"showPrev()\"\r\n (nextClick)=\"showNext()\" [prevDisabled]=\"!canShowPrev()\" [nextDisabled]=\"!canShowNext()\"\r\n [arrowPrevIcon]=\"arrowPrevIcon\" [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\r\n</div>\r\n", styles: [":host{width:100%;display:inline-block;position:relative;font-size:25px}.ngx-gallery-image-wrapper{width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden}.ngx-gallery-image{background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0}.ngx-gallery-image-size-cover .ngx-gallery-image{background-size:cover}.ngx-gallery-image-size-contain .ngx-gallery-image{background-size:contain}.ngx-gallery-animation-fade .ngx-gallery-image{left:0;opacity:1;transition:.5s ease-in-out}.ngx-gallery-animation-fade .ngx-gallery-image.ngx-gallery-active{opacity:1}.ngx-gallery-animation-rotate .ngx-gallery-image{transition:1s ease;transform:scale(1) rotate(0);left:0;opacity:1}.ngx-gallery-animation-zoom .ngx-gallery-image{transition:1s ease;transform:scale(1);left:0;opacity:1}.ngx-gallery-image-text{width:100%;background:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0;z-index:10}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["prevClick", "nextClick"] }, { kind: "component", type: NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["closeClick"] }, { kind: "component", type: NgxGalleryBulletsComponent, selector: "ngx-gallery-bullets", inputs: ["count", "active"], outputs: ["bulletChange"] }], animations: [
trigger('animation', [
// ...
state('slideRight', style({})),
state('slideLeft', style({})),
state('fade', style({})),
state('rotateLeft', style({})),
state('rotateRight', style({})),
state('zoom', style({})),
transition('slideRight => void', [
animate('500ms ease-in-out', style({ transform: 'translateX(-100%)' }))
]),
transition('void => slideRight', [
style({ transform: 'translateX(100%)' }),
animate('500ms ease-in-out', style({ transform: 'translateX(0)' }))
]),
transition('slideLeft => void', [
animate('500ms ease-in-out', style({ transform: 'translateX(100%)' }))
]),
transition('void => slideLeft', [
style({ transform: 'translateX(-100%)' }),
animate('500ms ease-in-out', style({ transform: 'translateX(0)' }))
]),
transition('fade => void', [
animate('500ms ease-in-out', style({ opacity: '0' }))
]),
transition('void => fade', [
style({ opacity: '0' }),
animate('500ms ease-in-out', style({ opacity: '1' }))
]),
transition('rotateLeft => void', [
animate('500ms ease-in-out', style({ transform: 'scale(1, 1) rotate(-90deg)', opacity: '0' }))
]),
transition('void => rotateLeft', [
style({ transform: 'scale(1, 1) rotate(-90deg)', opacity: '0' }),
animate('500ms ease-in-out', style({ transform: 'scale(1, 1) rotate(0deg)', opacity: '1' }))
]),
transition('rotateRight => void', [
animate('500ms ease-in-out', style({ transform: 'scale(1, 1) rotate(90deg)', opacity: '0' }))
]),
transition('void => rotateRight', [
style({ transform: 'scale(1, 1) rotate(90deg)', opacity: '0' }),
animate('500ms ease-in-out', style({ transform: 'scale(1, 1) rotate(0deg)', opacity: '1' }))
]),
transition('zoom => void', [
animate('500ms ease-in-out', style({ transform: 'scale(2.5,2.5)', opacity: '0' }))
]),
transition('void => zoom', [
style({ transform: 'scale(2.5,2.5)', opacity: '0' }),
animate('500ms ease-in-out', style({ transform: 'scale(1, 1)', opacity: '1' }))
]),
]),
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: NgxGalleryImageComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery-image', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
trigger('animation', [
// ...
state('slideRight', style({})),
state('slideLeft', style({})),
state('fade', style({})),
state('rotateLeft', style({})),
state('rotateRight', style({})),
state('zoom', style({})),
transition('slideRight => void', [
animate('500ms ease-in-out', style({ transform: 'translateX(-100%)' }))
]),
transition('void => slideRight', [
style({ transform: 'translateX(100%)' }),
animate('500ms ease-in-out', style({ transform: 'translateX(0)' }))
]),
transition('slideLeft => void', [
animate('500ms ease-in-out', style({ transform: 'translateX(100%)' }))
]),
transition('void => slideLeft', [
style({ transform: 'translateX(-100%)' }),
animate('500ms ease-in-out', style({ transform: 'translateX(0)' }))
]),
transition('fade => void', [
animate('500ms ease-in-out', style({ opacity: '0' }))
]),
transition('void => fade', [
style({ opacity: '0' }),
animate('500ms ease-in-out', style({ opacity: '1' }))
]),
transition('rotateLeft => void', [
animate('500ms ease-in-out', style({ transform: 'scale(1, 1) rotate(-90deg)', opacity: '0' }))
]),
transition('void => rotateLeft', [
style({ transform: 'scale(1, 1) rotate(-90deg)', opacity: '0' }),
animate('500ms ease-in-out', style({ transform: 'scale(1, 1) rotate(0deg)', opacity: '1' }))
]),
transition('rotateRight => void', [
animate('500ms ease-in-out', style({ transform: 'scale(1, 1) rotate(90deg)', opacity: '0' }))
]),
transition('void => rotateRight', [
style({ transform: 'scale(1, 1) rotate(90deg)', opacity: '0' }),
animate('500ms ease-in-out', style({ transform: 'scale(1, 1) rotate(0deg)', opacity: '1' }))
]),
transition('zoom => void', [
animate('500ms ease-in-out', style({ transform: 'scale(2.5,2.5)', opacity: '0' }))
]),
transition('void => zoom', [
style({ transform: 'scale(2.5,2.5)', opacity: '0' }),
animate('500ms ease-in-out', style({ transform: 'scale(1, 1)', opacity: '1' }))
]),
]),
], template: "<div class=\"ngx-gallery-image-wrapper ngx-gallery-animation-{{animation}} ngx-gallery-image-size-{{size}}\">\r\n <ng-container *ngFor=\"let image of getImages(); let i = index;\">\r\n\r\n <div *ngIf=\"image.type === 'image' && image.index === _selectedIndex\" class=\"ngx-gallery-image\"\r\n [ngClass]=\"{'ngx-gallery-clickable': clickable }\"\r\n [style.background-image]=\"getSafeUrl(image.src)\"\r\n (click)=\"handleClick($event, image.index)\"\r\n [@animation]=\"action\"\r\n (@animation.start)=\"onStart($event)\"\r\n (@animation.done)=\"onDone($event)\">\r\n <div class=\"ngx-gallery-icons-wrapper\">\r\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\r\n [titleText]=\"action.titleText\"\r\n (closeClick)=\"action.onClick($event, image.index)\"></ngx-gallery-action>\r\n </div>\r\n <div class=\"ngx-gallery-image-text\" *ngIf=\"showDescription && descriptions[image.index]\"\r\n [innerHTML]=\"descriptions[image.index]\" (click)=\"$event.stopPropagation()\"></div>\r\n </div>\r\n\r\n <div *ngIf=\"image.type === 'video' && image.index === _selectedIndex\" class=\"ngx-gallery-image\"\r\n [ngClass]=\"{'ngx-gallery-clickable': clickable }\"\r\n [style.background-image]=\"getSafeUrl(image.src)\"\r\n (click)=\"handleClick($event, image.index)\"\r\n [@animation]=\"action\"\r\n (@animation.start)=\"onStart($event)\"\r\n (@animation.done)=\"onDone($event)\">\r\n <video controls style=\"width:100%; height:100%; background: #000;\">\r\n <source [src]=\"image.src\">\r\n Your browser does not support the video tag.\r\n </video>\r\n <div class=\"ngx-gallery-icons-wrapper\">\r\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\r\n [titleText]=\"action.titleText\"\r\n (closeClick)=\"action.onClick($event, image.index)\"></ngx-gallery-action>\r\n </div>\r\n <div class=\"ngx-gallery-image-text\" *ngIf=\"showDescription && descriptions[image.index]\"\r\n [innerHTML]=\"descriptions[image.index]\" (click)=\"$event.stopPropagation()\"></div>\r\n </div>\r\n\r\n\r\n </ng-container>\r\n <ngx-gallery-bullets *ngIf=\"bullets\" [count]=\"images.length\" [active]=\"_selectedIndex\"\r\n (bulletChange)=\"show($event)\"></ngx-gallery-bullets>\r\n <ngx-gallery-arrows class=\"ngx-gallery-image-size-{{size}}\" *ngIf=\"arrows\" (prevClick)=\"showPrev()\"\r\n (nextClick)=\"showNext()\" [prevDisabled]=\"!canShowPrev()\" [nextDisabled]=\"!canShowNext()\"\r\n [arrowPrevIcon]=\"arrowPrevIcon\" [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\r\n</div>\r\n", styles: [":host{width:100%;display:inline-block;position:relative;font-size:25px}.ngx-gallery-image-wrapper{width:100%;height:100%;position:absolute;left:0;top:0;overflow:hidden}.ngx-gallery-image{background-position:center;background-repeat:no-repeat;height:100%;width:100%;position:absolute;top:0}.ngx-gallery-image-size-cover .ngx-gallery-image{background-size:cover}.ngx-gallery-image-size-contain .ngx-gallery-image{background-size:contain}.ngx-gallery-animation-fade .ngx-gallery-image{left:0;opacity:1;transition:.5s ease-in-out}.ngx-gallery-animation-fade .ngx-gallery-image.ngx-gallery-active{opacity:1}.ngx-gallery-animation-rotate .ngx-gallery-image{transition:1s ease;transform:scale(1) rotate(0);left:0;opacity:1}.ngx-gallery-animation-zoom .ngx-gallery-image{transition:1s ease;transform:scale(1);left:0;opacity:1}.ngx-gallery-image-text{width:100%;background:rgba(0,0,0,.7);padding:10px;text-align:center;color:#fff;font-size:16px;position:absolute;bottom:0;z-index:10}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: NgxGalleryService }]; }, propDecorators: { images: [{
type: Input
}], clickable: [{
type: Input
}], selectedIndex: [{
type: Input
}], arrows: [{
type: Input
}], arrowsAutoHide: [{
type: Input
}], swipe: [{
type: Input
}], animation: [{
type: Input
}], size: [{
type: Input
}], arrowPrevIcon: [{
type: Input
}], arrowNextIcon: [{
type: Input
}], autoPlay: [{
type: Input
}], autoPlayInterval: [{
type: Input
}], autoPlayPauseOnHover: [{
type: Input
}], infinityMove: [{
type: Input
}], lazyLoading: [{
type: Input
}], actions: [{
type: Input
}], descriptions: [{
type: Input
}], showDescription: [{
type: Input
}], bullets: [{
type: Input
}], imageClick: [{
type: Output
}], activeChange: [{
type: Output
}], animating: [{
type: Output
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
class NgxGalleryOrder {
}
NgxGalleryOrder.Column = 1;
NgxGalleryOrder.Row = 2;
NgxGalleryOrder.Page = 3;
class NgxGalleryThumbnailsComponent {
constructor(sanitization, elementRef, helperService) {
this.sanitization = sanitization;
this.elementRef = elementRef;
this.helperService = helperService;
this.minStopIndex = 0;
this.activeChange = new EventEmitter();
this.index = 0;
}
ngOnChanges(changes) {
if (changes['selectedIndex']) {
this.validateIndex();
}
if (changes['swipe']) {
this.helperService.manageSwipe(this.swipe, this.elementRef, 'thumbnails', () => this.moveRight(), () => this.moveLeft());
}
if (this.images) {
this.remainingCountValue = this.images.length - (this.rows * this.columns);
}
}
onMouseEnter() {
this.mouseenter = true;
}
onMouseLeave() {
this.mouseenter = false;
}
reset(index) {
this.selectedIndex = index;
this.setDefaultPosition();
this.index = 0;
this.validateIndex();
}
getImages() {
if (!this.images) {
return [];
}
if (this.remainingCount) {
return this.images.slice(0, this.rows * this.columns);
}
else if (this.lazyLoading && this.order !== NgxGalleryOrder.Row) {
let stopIndex = 0;
if (this.order === NgxGalleryOrder.Column) {
stopIndex = (this.index + this.columns + this.moveSize) * this.rows;
}
else if (this.order === NgxGalleryOrder.Page) {
stopIndex = this.index + ((this.columns * this.rows) * 2);
}
if (stopIndex <= this.minStopIndex) {
stopIndex = this.minStopIndex;
}
else {
this.minStopIndex = stopIndex;
}
return this.images.slice(0, stopIndex);
}
else {
return this.images;
}
}
handleClick(event, index) {
if (!this.hasLink(index) && !this.isAnimating) {
this.selectedIndex = index;
this.activeChange.emit(index);
}
event.stopPropagation();
event.preventDefault();
}
hasLink(index) {
return !!(this.links && this.links.length && this.links[index]);
}
moveRight() {
if (this.canMoveRight()) {
this.index += this.moveSize;
const maxIndex = this.getMaxIndex() - this.columns;
if (this.index > maxIndex) {
this.index = maxIndex;
}
this.setThumbnailsPosition();
}
}
moveLeft() {
if (this.canMoveLeft()) {
this.index -= this.moveSize;
if (this.index < 0) {
this.index = 0;
}
this.setThumbnailsPosition();
}
}
canMoveRight() {
return this.index + this.columns < this.getMaxIndex();
}
canMoveLeft() {
return this.index !== 0;
}
getThumbnailLeft(index) {
let calculatedIndex;
if (this.order === NgxGalleryOrder.Column) {
calculatedIndex = Math.floor(index / this.rows);
}
else if (this.order === NgxGalleryOrder.Page) {
calculatedIndex = (index % this.columns) + (Math.floor(index / (this.rows * this.columns)) * this.columns);
}
else if (this.order === NgxGalleryOrder.Row && this.remainingCount) {
calculatedIndex = index % this.columns;
}
else {
calculatedIndex = index % Math.ceil(this.images.length / this.rows);
}
return this.getThumbnailPosition(calculatedIndex, this.columns);
}
getThumbnailTop(index) {
let calculatedIndex;
if (this.order === NgxGalleryOrder.Column) {
calculatedIndex = index % this.rows;
}
else if (this.order === NgxGalleryOrder.Page) {
calculatedIndex = Math.floor(index / this.columns) - (Math.floor(index / (this.rows * this.columns)) * this.rows);
}
else if (this.order === NgxGalleryOrder.Row && this.remainingCount) {
calculatedIndex = Math.floor(index / this.columns);
}
else {
calculatedIndex = Math.floor(index / Math.ceil(this.images.length / this.rows));
}
return this.getThumbnailPosition(calculatedIndex, this.rows);
}
getThumbnailWidth() {
return this.getThumbnailDimension(this.columns);
}
getThumbnailHeight() {
return this.getThumbnailDimension(this.rows);
}
setThumbnailsPosition() {
this.thumbnailsLeft = -((100 / this.columns) * this.index) + '%';
this.thumbnailsMarginLeft = -((this.margin - (((this.columns - 1)
* this.margin) / this.columns)) * this.index) + 'px';
}
setDefaultPosition() {
this.thumbnailsLeft = '0px';
this.thumbnailsMarginLeft = '0px';
}
canShowArrows() {
if (this.remainingCount) {
return false;
}
else {
return this.arrows && this.images && this.images.length > this.getVisibleCount()
&& (!this.arrowsAutoHide || this.mouseenter);
}
}
validateIndex() {
if (this.images) {
let newIndex;
if (this.order === NgxGalleryOrder.Column) {
newIndex = Math.floor(this.selectedIndex / this.rows);
}
else {
newIndex = this.selectedIndex % Math.ceil(this.images.length / this.rows);
}
if (this.remainingCount) {
newIndex = 0;
}
if (newIndex < this.index || newIndex >= this.index + this.columns) {
const maxIndex = this.getMaxIndex() - this.columns;
this.index = newIndex > maxIndex ? maxIndex : newIndex;
this.setThumbnailsPosition();
}
}
}
getSafeUrl(image) {
return this.sanitization.bypassSecurityTrustStyle(this.helperService.getBackgroundUrl(image.toString()));
}
getFileType(fileSource) {
return this.helperService.getFileType(fileSource.toString());
}
getThumbnailPosition(index, count) {
return this.getSafeStyle('calc(' + ((100 / count) * index) + '% + '
+ ((this.margin - (((count - 1) * this.margin) / count)) * index) + 'px)');
}
getThumbnailDimension(count) {
if (this.margin !== 0) {
return this.getSafeStyle('calc(' + (100 / count) + '% - '
+ (((count - 1) * this.margin) / count) + 'px)');
}
else {
return this.getSafeStyle('calc(' + (100 / count) + '% + 1px)');
}
}
getMaxIndex() {
if (this.order === NgxGalleryOrder.Page) {
let maxIndex = (Math.floor(this.images.length / this.getVisibleCount()) * this.columns);
if (this.images.length % this.getVisibleCount() > this.columns) {
maxIndex += this.columns;
}
else {
maxIndex += this.images.length % this.getVisibleCount();
}
return maxIndex;
}
else {
return Math.ceil(this.images.length / this.rows);
}
}
getVisibleCount() {
return this.columns * this.rows;
}
getSafeStyle(value) {
return this.sanitization.bypassSecurityTrustStyle(value);
}
}
NgxGalleryThumbnailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: NgxGalleryThumbnailsComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: NgxGalleryService }], target: i0.ɵɵFactoryTarget.Component });
NgxGalleryThumbnailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: NgxGalleryThumbnailsComponent, selector: "ngx-gallery-thumbnails", inputs: { images: "images", isAnimating: "isAnimating", links: "links", labels: "labels", linkTarget: "linkTarget", columns: "columns", rows: "rows", arrows: "arrows", arrowsAutoHide: "arrowsAutoHide", margin: "margin", selectedIndex: "selectedIndex", clickable: "clickable", swipe: "swipe", size: "size", arrowPrevIcon: "arrowPrevIcon", arrowNextIcon: "arrowNextIcon", moveSize: "moveSize", order: "order", remainingCount: "remainingCount", lazyLoading: "lazyLoading", actions: "actions" }, outputs: { activeChange: "activeChange" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"ngx-gallery-thumbnails-wrapper ngx-gallery-thumbnail-size-{{size}}\">\r\n <div class=\"ngx-gallery-thumbnails\" [style.transform]=\"'translateX(' + thumbnailsLeft + ')'\"\r\n [style.marginLeft]=\"thumbnailsMarginLeft\">\r\n <a [href]=\"hasLink(i) ? links[i] : '#'\" [target]=\"linkTarget\" class=\"ngx-gallery-thumbnail\"\r\n *ngFor=\"let image of getImages(); let i = index;\"\r\n (click)=\"handleClick($event, i)\" [style.width]=\"getThumbnailWidth()\" [style.height]=\"getThumbnailHeight()\"\r\n [style.left]=\"getThumbnailLeft(i)\" [style.top]=\"getThumbnailTop(i)\"\r\n [ngClass]=\"{ 'ngx-gallery-active': i === selectedIndex, 'ngx-gallery-clickable': clickable }\"\r\n [attr.aria-label]=\"labels[i]\">\r\n <div *ngIf=\"getFileType(image) === 'image'\" [style.background-image]=\"getSafeUrl(image)\" class=\"ngx-gallery-thumbnail\"\r\n [ngClass]=\"{ 'ngx-gallery-active': i === selectedIndex, 'ngx-gallery-clickable': clickable }\"\r\n style=\"width: 100%; height: 100%; position:absolute;\"></div>\r\n <div *ngIf=\"getFileType(image) === 'video'\" class=\"ngx-gallery-thumbnail-video\">\r\n <video class=\"ngx-gallery-thumbnail\" [ngClass]=\"{ 'ngx-gallery-active': i === selectedIndex, 'ngx-gallery-clickable': clickable }\"\r\n style=\"width: 100%; height: 100%; position:absolute; left:0; background:#000;\">\r\n <source [src]=\"image\">\r\n Your browser does not support the video tag.\r\n </video>\r\n </div>\r\n <div class=\"ngx-gallery-icons-wrapper\">\r\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\r\n [titleText]=\"action.titleText\" (closeClick)=\"action.onClick($event, i)\"></ngx-gallery-action>\r\n </div>\r\n <div class=\"ngx-gallery-remaining-count-overlay\"\r\n *ngIf=\"remainingCount && remainingCountValue && (i === (rows * columns) - 1)\">\r\n <span class=\"ngx-gallery-remaining-count\">+{{remainingCountValue}}</span>\r\n </div>\r\n </a>\r\n </div>\r\n</div>\r\n<ngx-gallery-arrows *ngIf=\"canShowArrows()\" (prevClick)=\"moveLeft()\" (nextClick)=\"moveRight()\"\r\n [prevDisabled]=\"!canMoveLeft()\" [nextDisabled]=\"!canMoveRight()\" [arrowPrevIcon]=\"arrowPrevIcon\"\r\n [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\r\n", styles: ["@charset \"UTF-8\";:host{width:100%;display:inline-block;position:relative;font-size:25px}.ngx-gallery-thumbnails-wrapper{width:100%;height:100%;position:absolute;overflow:hidden}.ngx-gallery-thumbnails{height:100%;width:100%;position:absolute;left:0;transform:translate(0);transition:transform .5s ease-in-out;will-change:transform}.ngx-gallery-thumbnails .ngx-gallery-thumbnail{position:absolute;height:100%;background-position:center;background-repeat:no-repeat;text-decoration:none;border:1px double black}.ngx-gallery-thumbnails .ngx-gallery-thumbnail .ngx-gallery-thumbnail-video:after{content:\"\\f144\";display:block;position:absolute;background:rgba(0,0,0,0);height:100%;width:100%;left:0;top:calc(50% - 20px);font-size:40px;color:#fff;margin:0;padding:0;font-family:fontawesome;text-shadow:0px 4px 3px rgba(0,0,0,.4),0px 8px 13px rgba(0,0,0,.1),0px 18px 23px rgba(0,0,0,.1)}.ngx-gallery-thumbnails .ngx-gallery-thumbnail .img{background-size:cover;height:100%}.ngx-gallery-thumbnails .ngx-gallery-thumbnail.ngx-gallery-active{border:1px double #cc4548}.ngx-gallery-thumbnail-size-cover .ngx-gallery-thumbnails .ngx-gallery-thumbnail{background-size:cover}.ngx-gallery-thumbnail-size-contain .ngx-gallery-thumbnails .ngx-gallery-thumbnail{background-size:contain}.ngx-gallery-remaining-count-overlay{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#0006}.ngx-gallery-remaining-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:30px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxGalleryArrowsComponent, selector: "ngx-gallery-arrows", inputs: ["prevDisabled", "nextDisabled", "arrowPrevIcon", "arrowNextIcon"], outputs: ["prevClick", "nextClick"] }, { kind: "component", type: NgxGalleryActionComponent, selector: "ngx-gallery-action", inputs: ["icon", "disabled", "titleText"], outputs: ["closeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: NgxGalleryThumbnailsComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery-thumbnails', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-gallery-thumbnails-wrapper ngx-gallery-thumbnail-size-{{size}}\">\r\n <div class=\"ngx-gallery-thumbnails\" [style.transform]=\"'translateX(' + thumbnailsLeft + ')'\"\r\n [style.marginLeft]=\"thumbnailsMarginLeft\">\r\n <a [href]=\"hasLink(i) ? links[i] : '#'\" [target]=\"linkTarget\" class=\"ngx-gallery-thumbnail\"\r\n *ngFor=\"let image of getImages(); let i = index;\"\r\n (click)=\"handleClick($event, i)\" [style.width]=\"getThumbnailWidth()\" [style.height]=\"getThumbnailHeight()\"\r\n [style.left]=\"getThumbnailLeft(i)\" [style.top]=\"getThumbnailTop(i)\"\r\n [ngClass]=\"{ 'ngx-gallery-active': i === selectedIndex, 'ngx-gallery-clickable': clickable }\"\r\n [attr.aria-label]=\"labels[i]\">\r\n <div *ngIf=\"getFileType(image) === 'image'\" [style.background-image]=\"getSafeUrl(image)\" class=\"ngx-gallery-thumbnail\"\r\n [ngClass]=\"{ 'ngx-gallery-active': i === selectedIndex, 'ngx-gallery-clickable': clickable }\"\r\n style=\"width: 100%; height: 100%; position:absolute;\"></div>\r\n <div *ngIf=\"getFileType(image) === 'video'\" class=\"ngx-gallery-thumbnail-video\">\r\n <video class=\"ngx-gallery-thumbnail\" [ngClass]=\"{ 'ngx-gallery-active': i === selectedIndex, 'ngx-gallery-clickable': clickable }\"\r\n style=\"width: 100%; height: 100%; position:absolute; left:0; background:#000;\">\r\n <source [src]=\"image\">\r\n Your browser does not support the video tag.\r\n </video>\r\n </div>\r\n <div class=\"ngx-gallery-icons-wrapper\">\r\n <ngx-gallery-action *ngFor=\"let action of actions\" [icon]=\"action.icon\" [disabled]=\"action.disabled\"\r\n [titleText]=\"action.titleText\" (closeClick)=\"action.onClick($event, i)\"></ngx-gallery-action>\r\n </div>\r\n <div class=\"ngx-gallery-remaining-count-overlay\"\r\n *ngIf=\"remainingCount && remainingCountValue && (i === (rows * columns) - 1)\">\r\n <span class=\"ngx-gallery-remaining-count\">+{{remainingCountValue}}</span>\r\n </div>\r\n </a>\r\n </div>\r\n</div>\r\n<ngx-gallery-arrows *ngIf=\"canShowArrows()\" (prevClick)=\"moveLeft()\" (nextClick)=\"moveRight()\"\r\n [prevDisabled]=\"!canMoveLeft()\" [nextDisabled]=\"!canMoveRight()\" [arrowPrevIcon]=\"arrowPrevIcon\"\r\n [arrowNextIcon]=\"arrowNextIcon\"></ngx-gallery-arrows>\r\n", styles: ["@charset \"UTF-8\";:host{width:100%;display:inline-block;position:relative;font-size:25px}.ngx-gallery-thumbnails-wrapper{width:100%;height:100%;position:absolute;overflow:hidden}.ngx-gallery-thumbnails{height:100%;width:100%;position:absolute;left:0;transform:translate(0);transition:transform .5s ease-in-out;will-change:transform}.ngx-gallery-thumbnails .ngx-gallery-thumbnail{position:absolute;height:100%;background-position:center;background-repeat:no-repeat;text-decoration:none;border:1px double black}.ngx-gallery-thumbnails .ngx-gallery-thumbnail .ngx-gallery-thumbnail-video:after{content:\"\\f144\";display:block;position:absolute;background:rgba(0,0,0,0);height:100%;width:100%;left:0;top:calc(50% - 20px);font-size:40px;color:#fff;margin:0;padding:0;font-family:fontawesome;text-shadow:0px 4px 3px rgba(0,0,0,.4),0px 8px 13px rgba(0,0,0,.1),0px 18px 23px rgba(0,0,0,.1)}.ngx-gallery-thumbnails .ngx-gallery-thumbnail .img{background-size:cover;height:100%}.ngx-gallery-thumbnails .ngx-gallery-thumbnail.ngx-gallery-active{border:1px double #cc4548}.ngx-gallery-thumbnail-size-cover .ngx-gallery-thumbnails .ngx-gallery-thumbnail{background-size:cover}.ngx-gallery-thumbnail-size-contain .ngx-gallery-thumbnails .ngx-gallery-thumbnail{background-size:contain}.ngx-gallery-remaining-count-overlay{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#0006}.ngx-gallery-remaining-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:30px}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: NgxGalleryService }]; }, propDecorators: { images: [{
type: Input
}], isAnimating: [{
type: Input
}], links: [{
type: Input
}], labels: [{
type: Input
}], linkTarget: [{
type: Input
}], columns: [{
type: Input
}], rows: [{
type: Input
}], arrows: [{
type: Input
}], arrowsAutoHide: [{
type: Input
}], margin: [{
type: Input
}], selectedIndex: [{
type: Input
}], clickable: [{
type: Input
}], swipe: [{
type: Input
}], size: [{
type: Input
}], arrowPrevIcon: [{
type: Input
}], arrowNextIcon: [{
type: Input
}], moveSize: [{
type: Input
}], order: [{
type: Input
}], remainingCount: [{
type: Input
}], lazyLoading: [{
type: Input
}], actions: [{
type: Input
}], activeChange: [{
type: Output
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
class NgxGalleryAction {
constructor(action) {
this.icon = action.icon;
this.disabled = action.disabled ? action.disabled : false;
this.titleText = action.titleText ? action.titleText : '';
this.onClick = action.onClick;
}
}
class NgxGalleryLayout {
}
NgxGalleryLayout.ThumbnailsTop = 'thumbnails-top';
NgxGalleryLayout.ThumbnailsBottom = 'thumbnails-bottom';
class NgxGalleryImageSize {
}
NgxGalleryImageSize.Cover = 'cover';
NgxGalleryImageSize.Contain = 'contain';
class NgxGalleryOptions {
constructor(obj) {
const preventDefaults = obj.breakpoint === undefined ? false : true;
function use(source, defaultValue) {
return obj && (source !== undefined || preventDefaults) ? source : defaultValue;
}
this.breakpoint = use(obj.breakpoint, undefined);
this.width = use(obj.width, '500px');
this.height = use(obj.height, '400px');
this.fullWidth = use(obj.fullWidth, false);
this.layout = use(obj.layout, NgxGalleryLayout.ThumbnailsBottom);
this.startIndex = use(obj.startIndex, 0);
this.linkTarget = use(obj.linkTarget, '_blank');
this.lazyLoading = use(obj.lazyLoading, true);
this.image = use(obj.image, true);
this.imagePercent = use(obj.imagePercent, 75);
this.imageArrows = use(obj.imageArrows, true);
this.imageArrowsAutoHide = use(obj.imageArrowsAutoHide, false);
this.imageSwipe = use(obj.imageSwipe, false);
this.imageAnimation = use(obj.imageAnimation, NgxGalleryAnimation.Fade);
this.imageSize = use(obj.imageSize, NgxGalleryImageSize.Cover);
this.imageAutoPlay = use(obj.imageAutoPlay, false);
this.imageAutoPlayInterval = use(obj.imageAutoPlayInterval, 2000);
this.imageAutoPlayPauseOnHover = use(obj.imageAutoPlayPauseOnHover, false);
this.imageInfinityMove = use(obj.imageInfinityMove, false);
if (obj && obj.imageActions && obj.imageActions.length) {
obj.imageActions = obj.imageActions.map(action => new NgxGalleryAction(action));
}
this.imageActions = use(obj.imageActions, []);
this.imageDescription = use(obj.imageDescription, false);
this.imageBullets = use(obj.imageBullets, false);
this.thumbnails = use(obj.thumbnails, true);
this.thumbnailsColumns = use(obj.thumbnailsColumns, 4);
this.thumbnailsRows = use(obj.thumbnailsRows, 1);
this.thumbnailsPercent = use(obj.thumbnailsPercent, 25);
this.thumbnailsMargin = use(obj.thumbnailsMargin, 10);
this.thumbnailsArrows = use(obj.thumbnailsArrows, true);
this.thumbnailsArrowsAutoHide = use(obj.thumbnailsArrowsAutoHide, false);
this.thumbnailsSwipe = use(obj.thumbnailsSwipe, false);
this.thumbnailsMoveSize = use(obj.thumbnailsMoveSize, 1);
this.thumbnailsOrder = use(obj.thumbnailsOrder, NgxGalleryOrder.Column);
this.thumbnailsRemainingCount = use(obj.thumbnailsRemainingCount, false);
this.thumbnailsAsLinks = use(obj.thumbnailsAsLinks, false);
this.thumbnailsAutoHide = use(obj.thumbnailsAutoHide, false);
this.thumbnailMargin = use(obj.thumbnailMargin, 10);
this.thumbnailSize = use(obj.thumbnailSize, NgxGalleryImageSize.Cover);
if (obj && obj.thumbnailActions && obj.thumbnailActions.length) {
obj.thumbnailActions = obj.thumbnailActions.map(action => new NgxGalleryAction(action));
}
this.thumbnailActions = use(obj.thumbnailActions, []);
this.thumbnailClasses = use(obj.thumbnailClasses, []);
this.preview = use(obj.preview, true);
this.previewDescription = use(obj.previewDescription, true);
this.previewArrows = use(obj.previewArrows, true);
this.previewArrowsAutoHide = use(obj.previewArrowsAutoHide, false);
this.previewSwipe = use(obj.previewSwipe, false);
this.previewFullscreen = use(obj.previewFullscreen, false);
this.previewForceFullscreen = use(obj.previewForceFullscreen, false);
this.previewCloseOnClick = use(obj.previewCloseOnClick, false);
this.previewCloseOnEsc = use(obj.previewCloseOnEsc, false);
this.previewKeyboardNavigation = use(obj.previewKeyboardNavigation, false);
this.previewAnimation = use(obj.previewAnimation, true);
this.previewAutoPlay = use(obj.previewAutoPlay, false);
this.previewAutoPlayInterval = use(obj.previewAutoPlayInterval, 2000);
this.previewAutoPlayPauseOnHover = use(obj.previewAutoPlayPauseOnHover, false);
this.previewInfinityMove = use(obj.previewInfinityMove, false);
this.previewZoom = use(obj.previewZoom, false);
this.previewZoomStep = use(obj.previewZoomStep, 0.1);
this.previewZoomMax = use(obj.previewZoomMax, 2);
this.previewZoomMin = use(obj.previewZoomMin, 0.5);
this.previewRotate = use(obj.previewRotate, false);
this.previewDownload = use(obj.previewDownload, false);
this.previewCustom = use(obj.previewCustom, undefined);
this.previewBullets = use(obj.previewBullets, false);
this.arrowPrevIcon = use(obj.arrowPrevIcon, 'fa fa-arrow-circle-left');
this.arrowNextIcon = use(obj.arrowNextIcon, 'fa fa-arrow-circle-right');
this.closeIcon = use(obj.closeIcon, 'fa fa-times-circle');
this.fullscreenIcon = use(obj.fullscreenIcon, 'fa fa-arrows-alt');
this.spinnerIcon = use(obj.spinnerIcon, 'fa fa-spinner fa-pulse fa-3x fa-fw');
this.zoomInIcon = use(obj.zoomInIcon, 'fa fa-search-plus');
this.zoomOutIcon = use(obj.zoomOutIcon, 'fa fa-search-minus');
this.rotateLeftIcon = use(obj.rotateLeftIcon, 'fa fa-undo');
this.rotateRightIcon = use(obj.rotateRightIcon, 'fa fa-repeat');
this.downloadIcon = use(obj.downloadIcon, 'fa fa-arrow-circle-down');
if (obj && obj.actions && obj.actions.length) {
obj.actions = obj.actions.map(action => new NgxGalleryAction(action));
}
this.actions = use(obj.actions, []);
}
}
class NgxGalleryOrderedImage {
constructor(obj) {
this.src = obj.src;
this.type = obj.type;
this.index = obj.index;
}
}
class NgxGalleryComponent {
constructor(myElement, helperService) {
this.myElement = myElement;
this.helperService = helperService;
this.options = [{}];
this.imagesReady = new EventEmitter();
// eslint-disable-next-line @angular-eslint/no-output-native
this.change = new EventEmitter();
this.previewOpen = new EventEmitter();
this.previewClose = new EventEmitter();
this.previewChange = new EventEmitter();
this.oldImagesLength = 0;
this.selectedIndex = 0;
this.breakpoint = undefined;
this.prevBreakpoint = undefined;
}
ngOnInit() {
this.options = this.options.map((opt) => new NgxGalleryOptions(opt));
this.sortOptions();
this.setBreakpoint();
this.setOptions();
this.checkFullWidth();
if (this.currentOptions) {
this.selectedIndex = this.currentOptions.startIndex;
}
}
ngDoCheck() {
if (this.images !== undefined && (this.images.length !== this.oldImagesLength)
|| (this.images !== this.oldImages)) {
this.oldImagesLength = this.images.length;
this.oldImages = this.images;
this.setOptions();
this.setImages();
if (this.images && this.images.length) {
this.imagesReady.emit();
}
if (this.image) {
this.image.reset(this.currentOptions.startIndex);
}
if (this.currentOptions.thumbnailsAutoHide && this.currentOptions.thumbnails
&& this.images.length <= 1) {
this.currentOptions.thumbnails = false;
this.currentOptions.imageArrows = false;
}
this.resetThumbnails();
}
}
ngAfterViewInit() {
this.checkFullWidth();
}
onResize() {
this.setBreakpoint();
if (this.prevBreakpoint !== this.breakpoint) {
this.setOptions();
this.resetThumbnails();
}
if (this.currentOptions && this.currentOptions.fullWidth) {
if (this.fullWidthTimeout) {
clearTimeout(this.fullWidthTimeout);
}
this.fullWidthTimeout = setTimeout(() => {
this.checkFullWidth();
}, 200);
}
}
getImageHeight() {
return (this.currentOptions && this.currentOptions.thumbnails) ?
this.currentOptions.imagePercent + '%' : '100%';
}
getThumbnailsHeight() {
if (this.currentOptions && this.currentOptions.image) {
return 'calc(' + this.currentOptions.thumbnailsPercent + '% - '
+ this.currentOptions.thumbnailsMargin + 'px)';
}
else {
return '100%';
}
}
getThumbnailsMarginTop() {
if (this.currentOptions && this.currentOptions.layout === NgxGalleryLayout.ThumbnailsBottom) {
return this.currentOptions.thumbnailsMargin + 'px';
}
else {
return '0px';
}
}
getThumbnailsMarginBottom() {
if (this.currentOptions && this.currentOptions.layout === NgxGalleryLayout.ThumbnailsTop) {
return this.currentOptions.thumbnailsMargin + 'px';
}
else {
return '0px';
}
}
openPreview(index) {
if (this.currentOptions.previewCustom) {
this.currentOptions.previewCustom(index);
}
else {
this.previewEnabled = true;
this.preview.open(index);
}
}
onPreviewOpen() {
this.previewOpen.emit();
if (this.image && this.image.autoPlay) {
this.image.stopAutoPlay();
}
}
onPreviewClose() {
this.previewEnabled = false;
this.previewClose.emit();
if (this.image && this.image.autoPlay) {
this.image.startAutoPlay();
}
}
selectFromImage(index) {
this.select(index);
}
selectFromThumbnails(index) {
this.select(index);
if (this.currentOptions && this.currentOptions.thumbnails && this.currentOptions.preview
&& (!this.currentOptions.image || this.currentOptions.thumbnailsRemainingCount)) {
this.openPreview(this.selectedIndex);
}
}
show(index) {
this.select(index);
}
showNext() {
this.image.showNext();
}
showPrev() {
this.image.showPrev();
}
canShowNext() {
if (this.images && this.currentOptions) {
return !!(this.currentOptions.imageInfinityMove || this.selectedIndex < this.images.length - 1);
}
else {
return false;
}
}
canShowPrev() {
if (this.images && this.currentOptions) {
return !!(this.currentOptions.imageInfinityMove || this.selectedIndex > 0);
}
else {
return false;
}
}
previewSelect(index) {
this.previewChange.emit({ index, image: this.images[index] });
}
moveThumbnailsRight() {
this.thumbnails.moveRight();
}
moveThumbnailsLeft() {
this.thumbnails.moveLeft();
}
canMoveThumbnailsRight() {
return this.thumbnails.canMoveRight();
}
canMoveThumbnailsLeft() {
return this.thumbnails.canMoveLeft();
}
resetThumbnails() {
if (this.thumbnails) {
this.thumbnails.reset(this.currentOptions.startIndex);
}
}
select(index) {
this.selectedIndex = index;
this.change.emit({
index,
image: this.images[index]
});
}
checkFullWidth() {
if (this.currentOptions && this.currentOptions.fullWidth) {
this.width = document.body.clientWidth + 'px';
this.left = 'translateX(' + (-(document.body.clientWidth -
this.myElement.nativeElement.parentNode.innerWidth) / 2) + 'px)';
}
}
setImages() {
this.images.forEach((img) => img.type = this.helperService.getFileType(img.url || img.big || img.medium || img.small || ''));
this.smallImages = this.images.map((img) => img.small);
this.mediumImages = this.images.map((img, i) => new NgxGalleryOrderedImage({
src: img.medium,
type: img.type,
index: i
}));
this.bigImages = this.images.map((img) => img.big);
this.descriptions = this.images.map((img) => img.description);
this.links = this.images.map((img) => img.url);
this.labels = this.images.map((img) => img.label);
}
setBreakpoint() {
this.prevBreakpoint = this.breakpoint;
let breakpoints;
if (typeof window !== 'undefined') {
breakpoints = this.options.filter((opt) => opt.breakpoint >= window.innerWidth)
.map((opt) => opt.breakpoint);
}
if (breakpoints && breakpoints.length) {
this.breakpoint = breakpoints.pop();
}
else {
this.breakpoint = undefined;
}
}
sortOptions() {
this.options = [
...this.options.filter((a) => a.breakpoint === undefined),
...this.options
.filter((a) => a.breakpoint !== undefined)
.sort((a, b) => b.breakpoint - a.breakpoint)
];
}
setOptions() {
this.currentOptions = new NgxGalleryOptions({});
this.options
.filter((opt) => opt.breakpoint === undefined || opt.breakpoint >= this.breakpoint)
.map((opt) => this.combineOptions(this.currentOptions, opt));
this.width = this.currentOptions.width;
this.height = this.currentOptions.height;
}
combineOptions(first, second) {
Object.keys(second).map((val) => first[val] = second[val] !== undefined ? second[val] : first[val]);
}
setAnimating(event) {
this.isAnimating = event;
}
}
NgxGalleryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: NgxGalleryComponent, deps: [{ token: i0.ElementRef }, { token: NgxGalleryService }], target: i0.ɵɵFactoryTarget.Component });
NgxGalleryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.0", type: NgxGalleryComponent, selector: "ngx-gallery", inputs: { options: "options", images: "images" }, outputs: { imagesReady: "imagesReady", change: "change", previewOpen: "previewOpen", previewClose: "previewClose", previewChange: "previewChange" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "style.width": "this.width", "style.height": "this.height", "style.transform": "this.left" } }, providers: [NgxGalleryService], viewQueries: [{ propertyName: "preview", first: true, predicate: NgxGalleryPreviewComponent, descendants: true }, { propertyName: "image", first: true, predicate: NgxGalleryImageComponent, descendants: true }, { propertyName: "thumbnails", first: true, predicate: NgxGalleryThumbnailsComponent, descendants: true }], ngImport: i0, template: "<div class=\"ngx-gallery-layout {{currentOptions?.layout}}\">\r\n <ngx-gallery-image *ngIf=\"currentOptions?.image\" [style.height]=\"getImageHeight()\" [images]=\"mediumImages\"\r\n [clickable]=\"currentOptions?.preview\" [selectedIndex]=\"selectedIndex\"\r\n [arrows]=\"currentOptions?.imageArrows\" [arrowsAutoHide]=\"currentOptions?.imageArrowsAutoHide\"\r\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\" [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\r\n [swipe]=\"currentOptions?.imageSwipe\" [animation]=\"currentOptions?.imageAnimation\"\r\n [size]=\"currentOptions?.imageSize\" [autoPlay]=\"currentOptions?.imageAutoPlay\"\r\n [autoPlayInterval]=\"currentOptions?.imageAutoPlayInterval\"\r\n [autoPlayPauseOnHover]=\"currentOptions?.imageAutoPlayPauseOnHover\"\r\n [infinityMove]=\"currentOptions?.imageInfinityMove\" [lazyLoading]=\"currentOptions?.lazyLoading\"\r\n [actions]=\"currentOptions?.imageActions\" [descriptions]=\"descriptions\"\r\n [showDescription]=\"currentOptions?.imageDescription\" [bullets]=\"currentOptions?.imageBullets\"\r\n (imageClick)=\"openPreview($event)\" (activeChange)=\"selectFromImage($event)\" (animating)=\"setAnimating($event)\"></ngx-gallery-image>\r\n\r\n <ngx-gallery-thumbnails *ngIf=\"currentOptions?.thumbnails\" [style.marginTop]=\"getThumbnailsMarginTop()\"\r\n [style.marginBottom]=\"getThumbnailsMarginBottom()\" [style.height]=\"getThumbnailsHeight()\"\r\n [images]=\"smallImages\" [isAnimating]=\"isAnimating\" [links]=\"currentOptions?.thumbnailsAsLinks ? links : []\"\r\n [labels]=\"labels\" [linkTarget]=\"currentOptions?.linkTarget\" [selectedIndex]=\"selectedIndex\"\r\n [columns]=\"currentOptions?.thumbnailsColumns\" [rows]=\"currentOptions?.thumbnailsRows\"\r\n [margin]=\"currentOptions?.thumbnailMargin\" [arrows]=\"currentOptions?.thumbnailsArrows\"\r\n [arrowsAutoHide]=\"currentOptions?.thumbnailsArrowsAutoHide\"\r\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\r\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\r\n [clickable]=\"currentOptions?.image || currentOptions?.preview\"\r\n [swipe]=\"currentOptions?.thumbnailsSwipe\" [size]=\"currentOptions?.thumbnailSize\"\r\n [moveSize]=\"currentOptions?.thumbnailsMoveSize\" [order]=\"currentOptions?.thumbnailsOrder\"\r\n [remainingCount]=\"currentOptions?.thumbnailsRemainingCount\"\r\n [lazyLoading]=\"currentOptions?.lazyLoading\" [actions]=\"currentOptions?.thumbnailActions\"\r\n (activeChange)=\"selectFromThumbnails($event)\" [ngClass]=\"currentOptions?.thumbnailClasses\"></ngx-gallery-thumbnails>\r\n\r\n <ngx-gallery-preview [images]=\"bigImages\" [descriptions]=\"descriptions\"\r\n [showDescription]=\"currentOptions?.previewDescription\"\r\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\" [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\r\n [closeIcon]=\"currentOptions?.closeIcon\" [fullscreenIcon]=\"currentOptions?.fullscreenIcon\"\r\n [spinnerIcon]=\"currentOptions?.spinnerIcon\" [arrows]=\"currentOptions?.previewArrows\"\r\n [arrowsAutoHide]=\"currentOptions?.previewArrowsAutoHide\" [swipe]=\"currentOptions?.previewSwipe\"\r\n [fullscreen]=\"currentOptions?.previewFullscreen\"\r\n [forceFullscreen]=\"currentOptions?.previewForceFullscreen\"\r\n [closeOnClick]=\"currentOptions?.previewCloseOnClick\"\r\n [closeOnEsc]=\"currentOptions?.previewCloseOnEsc\"\r\n [keyboardNavigation]=\"currentOptions?.previewKeyboardNavigation\"\r\n [animation]=\"currentOptions?.previewAnimation\" [autoPlay]=\"currentOptions?.previewAutoPlay\"\r\n [autoPlayInterval]=\"currentOptions?.previewAutoPlayInterval\"\r\n [autoPlayPauseOnHover]=\"currentOptions?.previewAutoPlayPauseOnHover\"\r\n [infinityMove]=\"currentOptions?.previewInfinityMove\" [zoom]=\"currentOptions?.previewZoom\"\r\n [zoomStep]=\"currentOptions?.previewZoomStep\" [zoomMax]=\"currentOptions?.previewZoomMax\"\r\n [zoomMin]=\"currentOptions?.previewZoomMin\" [zoomInIcon]=\"currentOptions?.zoomInIcon\"\r\n [zoomOutIcon]=\"currentOptions?.zoomOutIcon\" [actions]=\"currentOptions?.actions\"\r\n [rotate]=\"currentOptions?.previewRotate\" [rotateLeftIcon]=\"currentOptions?.rotateLeftIcon\"\r\n [rotateRightIcon]=\"currentOptions?.rotateRightIcon\" [download]=\"currentOptions?.previewDownload\"\r\n [downloadIcon]=\"currentOptions?.downloadIcon\" [bullets]=\"currentOptions?.previewBullets\"\r\n (previewClose)=\"onPreviewClose()\" (previewOpen)=\"onPreviewOpen()\"\r\n (activeChange)=\"previewSelect($event)\"\r\n [class.ngx-gallery-active]=\"previewEnabled\"></ngx-gallery-preview>\r\n</div>\r\n", styles: [":host{display:inline-block}:host>*{float:left}.ngx-gallery-layout{width:100%;height:100%;display:flex;flex-direction:column}.ngx-gallery-layout.thumbnails-top ngx-gallery-image{order:2}.ngx-gallery-layout.thumbnails-top ngx-gallery-thumbnails{order:1}.ngx-gallery-layout.thumbnails-bottom ngx-gallery-image{order:1}.ngx-gallery-layout.thumbnails-bottom ngx-gallery-thumbnails{order:2}*{box-sizing:border-box}.ngx-gallery-icon{color:#fff;position:absolute;display:inline-block}.ngx-gallery-icon .ngx-gallery-icon-content{display:block}ngx-gallery-preview{font-size:25px}ngx-gallery-preview .ngx-gallery-icon{z-index:2000}.ngx-gallery-clickable{cursor:pointer}.ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:5px;margin-top:5px;font-size:20px;cursor:pointer}.ngx-gallery-icons-wrapper{float:right}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: NgxGalleryImageComponent, selector: "ngx-gallery-image", inputs: ["images", "clickable", "selectedIndex", "arrows", "arrowsAutoHide", "swipe", "animation", "size", "arrowPrevIcon", "arrowNextIcon", "autoPlay", "autoPlayInterval", "autoPlayPauseOnHover", "infinityMove", "lazyLoading", "actions", "descriptions", "showDescription", "bullets"], outputs: ["imageClick", "activeChange", "animating"] }, { kind: "component", type: NgxGalleryThumbnailsComponent, selector: "ngx-gallery-thumbnails", inputs: ["images", "isAnimating", "links", "labels", "linkTarget", "columns", "rows", "arrows", "arrowsAutoHide", "margin", "selectedIndex", "clickable", "swipe", "size", "arrowPrevIcon", "arrowNextIcon", "moveSize", "order", "remainingCount", "lazyLoading", "actions"], outputs: ["activeChange"] }, { kind: "component", type: NgxGalleryPreviewComponent, selector: "ngx-gallery-preview", inputs: ["images", "descriptions", "showDescription", "arrows", "arrowsAutoHide", "swipe", "fullscreen", "forceFullscreen", "closeOnClick", "closeOnEsc", "keyboardNavigation", "arrowPrevIcon", "arrowNextIcon", "closeIcon", "fullscreenIcon", "spinnerIcon", "autoPlay", "autoPlayInterval", "autoPlayPauseOnHover", "infinityMove", "zoom", "zoomStep", "zoomMax", "zoomMin", "zoomInIcon", "zoomOutIcon", "animation", "actions", "rotate", "rotateLeftIcon", "rotateRightIcon", "download", "downloadIcon", "bullets"], outputs: ["previewOpen", "previewClose", "activeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: NgxGalleryComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery', encapsulation: ViewEncapsulation.None, providers: [NgxGalleryService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-gallery-layout {{currentOptions?.layout}}\">\r\n <ngx-gallery-image *ngIf=\"currentOptions?.image\" [style.height]=\"getImageHeight()\" [images]=\"mediumImages\"\r\n [clickable]=\"currentOptions?.preview\" [selectedIndex]=\"selectedIndex\"\r\n [arrows]=\"currentOptions?.imageArrows\" [arrowsAutoHide]=\"currentOptions?.imageArrowsAutoHide\"\r\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\" [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\r\n [swipe]=\"currentOptions?.imageSwipe\" [animation]=\"currentOptions?.imageAnimation\"\r\n [size]=\"currentOptions?.imageSize\" [autoPlay]=\"currentOptions?.imageAutoPlay\"\r\n [autoPlayInterval]=\"currentOptions?.imageAutoPlayInterval\"\r\n [autoPlayPauseOnHover]=\"currentOptions?.imageAutoPlayPauseOnHover\"\r\n [infinityMove]=\"currentOptions?.imageInfinityMove\" [lazyLoading]=\"currentOptions?.lazyLoading\"\r\n [actions]=\"currentOptions?.imageActions\" [descriptions]=\"descriptions\"\r\n [showDescription]=\"currentOptions?.imageDescription\" [bullets]=\"currentOptions?.imageBullets\"\r\n (imageClick)=\"openPreview($event)\" (activeChange)=\"selectFromImage($event)\" (animating)=\"setAnimating($event)\"></ngx-gallery-image>\r\n\r\n <ngx-gallery-thumbnails *ngIf=\"currentOptions?.thumbnails\" [style.marginTop]=\"getThumbnailsMarginTop()\"\r\n [style.marginBottom]=\"getThumbnailsMarginBottom()\" [style.height]=\"getThumbnailsHeight()\"\r\n [images]=\"smallImages\" [isAnimating]=\"isAnimating\" [links]=\"currentOptions?.thumbnailsAsLinks ? links : []\"\r\n [labels]=\"labels\" [linkTarget]=\"currentOptions?.linkTarget\" [selectedIndex]=\"selectedIndex\"\r\n [columns]=\"currentOptions?.thumbnailsColumns\" [rows]=\"currentOptions?.thumbnailsRows\"\r\n [margin]=\"currentOptions?.thumbnailMargin\" [arrows]=\"currentOptions?.thumbnailsArrows\"\r\n [arrowsAutoHide]=\"currentOptions?.thumbnailsArrowsAutoHide\"\r\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\"\r\n [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\r\n [clickable]=\"currentOptions?.image || currentOptions?.preview\"\r\n [swipe]=\"currentOptions?.thumbnailsSwipe\" [size]=\"currentOptions?.thumbnailSize\"\r\n [moveSize]=\"currentOptions?.thumbnailsMoveSize\" [order]=\"currentOptions?.thumbnailsOrder\"\r\n [remainingCount]=\"currentOptions?.thumbnailsRemainingCount\"\r\n [lazyLoading]=\"currentOptions?.lazyLoading\" [actions]=\"currentOptions?.thumbnailActions\"\r\n (activeChange)=\"selectFromThumbnails($event)\" [ngClass]=\"currentOptions?.thumbnailClasses\"></ngx-gallery-thumbnails>\r\n\r\n <ngx-gallery-preview [images]=\"bigImages\" [descriptions]=\"descriptions\"\r\n [showDescription]=\"currentOptions?.previewDescription\"\r\n [arrowPrevIcon]=\"currentOptions?.arrowPrevIcon\" [arrowNextIcon]=\"currentOptions?.arrowNextIcon\"\r\n [closeIcon]=\"currentOptions?.closeIcon\" [fullscreenIcon]=\"currentOptions?.fullscreenIcon\"\r\n [spinnerIcon]=\"currentOptions?.spinnerIcon\" [arrows]=\"currentOptions?.previewArrows\"\r\n [arrowsAutoHide]=\"currentOptions?.previewArrowsAutoHide\" [swipe]=\"currentOptions?.previewSwipe\"\r\n [fullscreen]=\"currentOptions?.previewFullscreen\"\r\n [forceFullscreen]=\"currentOptions?.previewForceFullscreen\"\r\n [closeOnClick]=\"currentOptions?.previewCloseOnClick\"\r\n [closeOnEsc]=\"currentOptions?.previewCloseOnEsc\"\r\n [keyboardNavigation]=\"currentOptions?.previewKeyboardNavigation\"\r\n [animation]=\"currentOptions?.previewAnimation\" [autoPlay]=\"currentOptions?.previewAutoPlay\"\r\n [autoPlayInterval]=\"currentOptions?.previewAutoPlayInterval\"\r\n [autoPlayPauseOnHover]=\"currentOptions?.previewAutoPlayPauseOnHover\"\r\n [infinityMove]=\"currentOptions?.previewInfinityMove\" [zoom]=\"currentOptions?.previewZoom\"\r\n [zoomStep]=\"currentOptions?.previewZoomStep\" [zoomMax]=\"currentOptions?.previewZoomMax\"\r\n [zoomMin]=\"currentOptions?.previewZoomMin\" [zoomInIcon]=\"currentOptions?.zoomInIcon\"\r\n [zoomOutIcon]=\"currentOptions?.zoomOutIcon\" [actions]=\"currentOptions?.actions\"\r\n [rotate]=\"currentOptions?.previewRotate\" [rotateLeftIcon]=\"currentOptions?.rotateLeftIcon\"\r\n [rotateRightIcon]=\"currentOptions?.rotateRightIcon\" [download]=\"currentOptions?.previewDownload\"\r\n [downloadIcon]=\"currentOptions?.downloadIcon\" [bullets]=\"currentOptions?.previewBullets\"\r\n (previewClose)=\"onPreviewClose()\" (previewOpen)=\"onPreviewOpen()\"\r\n (activeChange)=\"previewSelect($event)\"\r\n [class.ngx-gallery-active]=\"previewEnabled\"></ngx-gallery-preview>\r\n</div>\r\n", styles: [":host{display:inline-block}:host>*{float:left}.ngx-gallery-layout{width:100%;height:100%;display:flex;flex-direction:column}.ngx-gallery-layout.thumbnails-top ngx-gallery-image{order:2}.ngx-gallery-layout.thumbnails-top ngx-gallery-thumbnails{order:1}.ngx-gallery-layout.thumbnails-bottom ngx-gallery-image{order:1}.ngx-gallery-layout.thumbnails-bottom ngx-gallery-thumbnails{order:2}*{box-sizing:border-box}.ngx-gallery-icon{color:#fff;position:absolute;display:inline-block}.ngx-gallery-icon .ngx-gallery-icon-content{display:block}ngx-gallery-preview{font-size:25px}ngx-gallery-preview .ngx-gallery-icon{z-index:2000}.ngx-gallery-clickable{cursor:pointer}.ngx-gallery-icons-wrapper .ngx-gallery-icon{position:relative;margin-right:5px;margin-top:5px;font-size:20px;cursor:pointer}.ngx-gallery-icons-wrapper{float:right}\n"] }]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: NgxGalleryService }]; }, propDecorators: { options: [{
type: Input
}], images: [{
type: Input
}], imagesReady: [{
type: Output
}], change: [{
type: Output
}], previewOpen: [{
type: Output
}], previewClose: [{
type: Output
}], previewChange: [{
type: Output
}], preview: [{
type: ViewChild,
args: [NgxGalleryPreviewComponent]
}], image: [{
type: ViewChild,
args: [NgxGalleryImageComponent]
}], thumbnails: [{
type: ViewChild,
args: [NgxGalleryThumbnailsComponent]
}], width: [{
type: HostBinding,
args: ['style.width']
}], height: [{
type: HostBinding,
args: ['style.height']
}], left: [{
type: HostBinding,
args: ['style.transform']
}], onResize: [{
type: HostListener,
args: ['window:resize']
}] } });
class CustomHammerConfig extends HammerGestureConfig {
constructor() {
super(...arguments);
this.overrides = {
pinch: { enable: false },
rotate: { enable: false }
};
}
}
CustomHammerConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: CustomHammerConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
CustomHammerConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: CustomHammerConfig });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: CustomHammerConfig, decorators: [{
type: Injectable
}] });
class NgxGalleryModule {
}
NgxGalleryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: NgxGalleryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxGalleryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.0", ngImport: i0, type: NgxGalleryModule, declarations: [NgxGalleryComponent,
NgxGalleryImageComponent,
NgxGalleryArrowsComponent,
NgxGalleryThumbnailsComponent,
NgxGalleryPreviewComponent,
NgxGalleryActionComponent,
NgxGalleryBulletsComponent], imports: [CommonModule], exports: [NgxGalleryComponent] });
NgxGalleryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: NgxGalleryModule, providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
], imports: [CommonModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.0", ngImport: i0, type: NgxGalleryModule, decorators: [{
type: NgModule,
args: [{
declarations: [
NgxGalleryComponent,
NgxGalleryImageComponent,
NgxGalleryArrowsComponent,
NgxGalleryThumbnailsComponent,
NgxGalleryPreviewComponent,
NgxGalleryActionComponent,
NgxGalleryBulletsComponent
],
imports: [CommonModule],
exports: [NgxGalleryComponent],
providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
]
}]
}] });
class NgxGalleryImage {
constructor(obj) {
this.small = obj.small;
this.medium = obj.medium;
this.big = obj.big;
this.description = obj.description;
this.url = obj.url;
this.type = obj.type;
this.label = obj.label;
}
}
/*
* Public API Surface of ngx-gallery
*/
/**
* Generated bundle index. Do not edit.
*/
export { CustomHammerConfig, NgxGalleryAction, NgxGalleryAnimation, NgxGalleryArrowsComponent, NgxGalleryBulletsComponent, NgxGalleryComponent, NgxGalleryImage, NgxGalleryImageSize, NgxGalleryLayout, NgxGalleryModule, NgxGalleryOptions, NgxGalleryOrder, NgxGalleryOrderedImage, NgxGalleryPreviewComponent, NgxGalleryService, NgxGalleryThumbnailsComponent };
//# sourceMappingURL=rybos-ngx-gallery.mjs.map