@vinlos/ngx-gallery
Version:
A simple responsive native gallery component for Angular 18.
577 lines (570 loc) • 137 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, Renderer2, Injectable, input, output, ChangeDetectionStrategy, Component, ElementRef, ChangeDetectorRef, viewChild, HostListener, Input, HostBinding, ViewEncapsulation, NgModule } from '@angular/core';
import { DomSanitizer, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { NgClass, CommonModule } from '@angular/common';
import { trigger, state, transition, style, animate } from '@angular/animations';
class NgxGalleryService {
constructor() {
this.renderer = inject(Renderer2);
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);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxGalleryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxGalleryService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxGalleryService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class NgxGalleryArrowsComponent {
constructor() {
this.prevDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "prevDisabled" }] : []));
this.nextDisabled = input(undefined, ...(ngDevMode ? [{ debugName: "nextDisabled" }] : []));
this.arrowPrevIcon = input(undefined, ...(ngDevMode ? [{ debugName: "arrowPrevIcon" }] : []));
this.arrowNextIcon = input(undefined, ...(ngDevMode ? [{ debugName: "arrowNextIcon" }] : []));
this.prevClick = output();
this.nextClick = output();
}
handlePrevClick() {
this.prevClick.emit();
}
handleNextClick() {
this.nextClick.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxGalleryArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: NgxGalleryArrowsComponent, isStandalone: true, selector: "ngx-gallery-arrows", inputs: { prevDisabled: { classPropertyName: "prevDisabled", publicName: "prevDisabled", isSignal: true, isRequired: false, transformFunction: null }, nextDisabled: { classPropertyName: "nextDisabled", publicName: "nextDisabled", isSignal: true, isRequired: false, transformFunction: null }, arrowPrevIcon: { classPropertyName: "arrowPrevIcon", publicName: "arrowPrevIcon", isSignal: true, isRequired: false, transformFunction: null }, arrowNextIcon: { classPropertyName: "arrowNextIcon", publicName: "arrowNextIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { prevClick: "prevClick", nextClick: "nextClick" }, ngImport: i0, template: "<div class=\"ngx-gallery-arrows-wrapper ngx-gallery-arrow-left\">\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handlePrevClick()\" [class.ngx-gallery-disabled]=\"prevDisabled()\">\n <i class=\"ngx-gallery-icon-content {{arrowPrevIcon()}}\"></i>\n </div>\n</div>\n<div class=\"ngx-gallery-arrows-wrapper ngx-gallery-arrow-right\">\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handleNextClick()\" [class.ngx-gallery-disabled]=\"nextDisabled()\">\n <i class=\"ngx-gallery-icon-content {{arrowNextIcon()}}\"></i>\n </div>\n</div>\n", styles: [".ngx-gallery-arrow-wrapper{position:absolute;height:100%;width:1px;display:table;table-layout:fixed}.ngx-gallery-preview-img-wrapper .ngx-gallery-arrow-wrapper{z-index:10001}.ngx-gallery-arrow-left{left:0}.ngx-gallery-arrow-right{right:0}.ngx-gallery-arrow{top:50%;transform:translateY(-50%);cursor:pointer}.ngx-gallery-arrow.ngx-gallery-disabled{opacity:.6;cursor:default}.ngx-gallery-arrow-left .ngx-gallery-arrow{left:10px}.ngx-gallery-arrow-right .ngx-gallery-arrow{right:10px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxGalleryArrowsComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery-arrows', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-gallery-arrows-wrapper ngx-gallery-arrow-left\">\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handlePrevClick()\" [class.ngx-gallery-disabled]=\"prevDisabled()\">\n <i class=\"ngx-gallery-icon-content {{arrowPrevIcon()}}\"></i>\n </div>\n</div>\n<div class=\"ngx-gallery-arrows-wrapper ngx-gallery-arrow-right\">\n <div class=\"ngx-gallery-icon ngx-gallery-arrow\" aria-hidden=\"true\" (click)=\"handleNextClick()\" [class.ngx-gallery-disabled]=\"nextDisabled()\">\n <i class=\"ngx-gallery-icon-content {{arrowNextIcon()}}\"></i>\n </div>\n</div>\n", styles: [".ngx-gallery-arrow-wrapper{position:absolute;height:100%;width:1px;display:table;table-layout:fixed}.ngx-gallery-preview-img-wrapper .ngx-gallery-arrow-wrapper{z-index:10001}.ngx-gallery-arrow-left{left:0}.ngx-gallery-arrow-right{right:0}.ngx-gallery-arrow{top:50%;transform:translateY(-50%);cursor:pointer}.ngx-gallery-arrow.ngx-gallery-disabled{opacity:.6;cursor:default}.ngx-gallery-arrow-left .ngx-gallery-arrow{left:10px}.ngx-gallery-arrow-right .ngx-gallery-arrow{right:10px}\n"] }]
}], ctorParameters: () => [], propDecorators: { prevDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevDisabled", required: false }] }], nextDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextDisabled", required: false }] }], arrowPrevIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPrevIcon", required: false }] }], arrowNextIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowNextIcon", required: false }] }], prevClick: [{ type: i0.Output, args: ["prevClick"] }], nextClick: [{ type: i0.Output, args: ["nextClick"] }] } });
class NgxGalleryActionComponent {
constructor() {
this.icon = input(undefined, ...(ngDevMode ? [{ debugName: "icon" }] : []));
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
this.titleText = input('', ...(ngDevMode ? [{ debugName: "titleText" }] : []));
this.closeClick = output();
}
handleClick(event) {
if (!this.disabled()) {
this.closeClick.emit(event);
}
event.stopPropagation();
event.preventDefault();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxGalleryActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: NgxGalleryActionComponent, isStandalone: true, selector: "ngx-gallery-action", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, titleText: { classPropertyName: "titleText", publicName: "titleText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeClick: "closeClick" }, ngImport: i0, template: "<div class=\"ngx-gallery-icon\" [class.ngx-gallery-icon-disabled]=\"disabled()\"\n aria-hidden=\"true\"\n title=\"{{ titleText() }}\"\n (click)=\"handleClick($event)\">\n <i class=\"ngx-gallery-icon-content {{ icon() }}\"></i>\n</div>\n", styles: [".ngx-gallery-icon{color:#fff;font-size:25px;position:absolute;z-index:2000;display:inline-block}.ngx-gallery-icon{position:relative;margin-right:10px;margin-top:10px;font-size:25px;cursor:pointer;text-decoration:none}.ngx-gallery-icon .ngx-gallery-icon-content{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxGalleryActionComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ngx-gallery-icon\" [class.ngx-gallery-icon-disabled]=\"disabled()\"\n aria-hidden=\"true\"\n title=\"{{ titleText() }}\"\n (click)=\"handleClick($event)\">\n <i class=\"ngx-gallery-icon-content {{ icon() }}\"></i>\n</div>\n", styles: [".ngx-gallery-icon{color:#fff;font-size:25px;position:absolute;z-index:2000;display:inline-block}.ngx-gallery-icon{position:relative;margin-right:10px;margin-top:10px;font-size:25px;cursor:pointer;text-decoration:none}.ngx-gallery-icon .ngx-gallery-icon-content{display:block}\n"] }]
}], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], titleText: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleText", required: false }] }], closeClick: [{ type: i0.Output, args: ["closeClick"] }] } });
class NgxGalleryBulletsComponent {
constructor() {
this.count = input(undefined, ...(ngDevMode ? [{ debugName: "count" }] : []));
this.active = input(0, ...(ngDevMode ? [{ debugName: "active" }] : []));
this.bulletChange = output();
}
getBullets() {
return Array(this.count());
}
handleChange(event, index) {
this.bulletChange.emit(index);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxGalleryBulletsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: NgxGalleryBulletsComponent, isStandalone: true, selector: "ngx-gallery-bullets", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { bulletChange: "bulletChange" }, ngImport: i0, template: "@for (bullet of getBullets(); track bullet; let i = $index) {\n <div class=\"ngx-gallery-bullet\" (click)=\"handleChange($event, i)\"\n [ngClass]=\"{ 'ngx-gallery-active': i === active() }\"></div>\n}\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:#fff}.ngx-gallery-bullet:not(:first-child){margin-left:5px}.ngx-gallery-bullet:hover,.ngx-gallery-bullet.ngx-gallery-active{background:#000}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxGalleryBulletsComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery-bullets', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "@for (bullet of getBullets(); track bullet; let i = $index) {\n <div class=\"ngx-gallery-bullet\" (click)=\"handleChange($event, i)\"\n [ngClass]=\"{ 'ngx-gallery-active': i === active() }\"></div>\n}\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:#fff}.ngx-gallery-bullet:not(:first-child){margin-left:5px}.ngx-gallery-bullet:hover,.ngx-gallery-bullet.ngx-gallery-active{background:#000}\n"] }]
}], ctorParameters: () => [], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], bulletChange: [{ type: i0.Output, args: ["bulletChange"] }] } });
class NgxGalleryPreviewComponent {
constructor() {
this.sanitization = inject(DomSanitizer);
this.elementRef = inject(ElementRef);
this.helperService = inject(NgxGalleryService);
this.renderer = inject(Renderer2);
this.changeDetectorRef = inject(ChangeDetectorRef);
this.showSpinner = false;
this.positionLeft = 0;
this.positionTop = 0;
this.zoomValue = 1;
this.loading = false;
this.rotateValue = 0;
this.index = 0;
this.images = input(undefined, ...(ngDevMode ? [{ debugName: "images" }] : []));
this.descriptions = input(undefined, ...(ngDevMode ? [{ debugName: "descriptions" }] : []));
this.showDescription = input(undefined, ...(ngDevMode ? [{ debugName: "showDescription" }] : []));
this.arrowsAutoHide = input(undefined, ...(ngDevMode ? [{ debugName: "arrowsAutoHide" }] : []));
this.swipe = input(undefined, ...(ngDevMode ? [{ debugName: "swipe" }] : []));
this.fullscreen = input(undefined, ...(ngDevMode ? [{ debugName: "fullscreen" }] : []));
this.forceFullscreen = input(undefined, ...(ngDevMode ? [{ debugName: "forceFullscreen" }] : []));
this.closeOnClick = input(undefined, ...(ngDevMode ? [{ debugName: "closeOnClick" }] : []));
this.closeOnEsc = input(undefined, ...(ngDevMode ? [{ debugName: "closeOnEsc" }] : []));
this.keyboardNavigation = input(undefined, ...(ngDevMode ? [{ debugName: "keyboardNavigation" }] : []));
this.arrowPrevIcon = input(undefined, ...(ngDevMode ? [{ debugName: "arrowPrevIcon" }] : []));
this.arrowNextIcon = input(undefined, ...(ngDevMode ? [{ debugName: "arrowNextIcon" }] : []));
this.closeIcon = input(undefined, ...(ngDevMode ? [{ debugName: "closeIcon" }] : []));
this.fullscreenIcon = input(undefined, ...(ngDevMode ? [{ debugName: "fullscreenIcon" }] : []));
this.spinnerIcon = input(undefined, ...(ngDevMode ? [{ debugName: "spinnerIcon" }] : []));
this.autoPlay = input(undefined, ...(ngDevMode ? [{ debugName: "autoPlay" }] : []));
this.autoPlayInterval = input(undefined, ...(ngDevMode ? [{ debugName: "autoPlayInterval" }] : []));
this.autoPlayPauseOnHover = input(undefined, ...(ngDevMode ? [{ debugName: "autoPlayPauseOnHover" }] : []));
this.infinityMove = input(undefined, ...(ngDevMode ? [{ debugName: "infinityMove" }] : []));
this.zoom = input(undefined, ...(ngDevMode ? [{ debugName: "zoom" }] : []));
this.zoomStep = input(undefined, ...(ngDevMode ? [{ debugName: "zoomStep" }] : []));
this.zoomMax = input(undefined, ...(ngDevMode ? [{ debugName: "zoomMax" }] : []));
this.zoomMin = input(undefined, ...(ngDevMode ? [{ debugName: "zoomMin" }] : []));
this.zoomInIcon = input(undefined, ...(ngDevMode ? [{ debugName: "zoomInIcon" }] : []));
this.zoomOutIcon = input(undefined, ...(ngDevMode ? [{ debugName: "zoomOutIcon" }] : []));
this.animation = input(undefined, ...(ngDevMode ? [{ debugName: "animation" }] : []));
this.actions = input(undefined, ...(ngDevMode ? [{ debugName: "actions" }] : []));
this.rotate = input(undefined, ...(ngDevMode ? [{ debugName: "rotate" }] : []));
this.rotateLeftIcon = input(undefined, ...(ngDevMode ? [{ debugName: "rotateLeftIcon" }] : []));
this.rotateRightIcon = input(undefined, ...(ngDevMode ? [{ debugName: "rotateRightIcon" }] : []));
this.download = input(undefined, ...(ngDevMode ? [{ debugName: "download" }] : []));
this.downloadIcon = input(undefined, ...(ngDevMode ? [{ debugName: "downloadIcon" }] : []));
this.bullets = input(undefined, ...(ngDevMode ? [{ debugName: "bullets" }] : []));
this.previewOpen = output();
this.previewClose = output();
this.activeChange = output();
this.previewImage = viewChild('previewImage', ...(ngDevMode ? [{ debugName: "previewImage" }] : []));
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() {
const images = this.images();
if (this.loading) {
return false;
}
else if (images) {
return this.infinityMove() || this.index < 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(() => {
const previewImage = this.previewImage();
if (this.isLoaded(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();
}
});
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);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NgxGalleryPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: NgxGalleryPreviewComponent, isStandalone: true, selector: "ngx-gallery-preview", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: false, transformFunction: null }, descriptions: { classPropertyName: "descriptions", publicName: "descriptions", isSignal: true, isRequired: false, transformFunction: null }, showDescription: { classPropertyName: "showDescription", publicName: "showDescription", isSignal: true, isRequired: false, transformFunction: null }, arrows: { classPropertyName: "arrows", publicName: "arrows", isSignal: false, isRequired: false, transformFunction: null }, arrowsAutoHide: { classPropertyName: "arrowsAutoHide", publicName: "arrowsAutoHide", isSignal: true, isRequired: false, transformFunction: null }, swipe: { classPropertyName: "swipe", publicName: "swipe", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, forceFullscreen: { classPropertyName: "forceFullscreen", publicName: "forceFullscreen", isSignal: true, isRequired: false, transformFunction: null }, closeOnClick: { classPropertyName: "closeOnClick", publicName: "closeOnClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, keyboardNavigation: { classPropertyName: "keyboardNavigation", publicName: "keyboardNavigation", isSignal: true, isRequired: false, transformFunction: null }, arrowPrevIcon: { classPropertyName: "arrowPrevIcon", publicName: "arrowPrevIcon", isSignal: true, isRequired: false, transformFunction: null }, arrowNextIcon: { classPropertyName: "arrowNextIcon", publicName: "arrowNextIcon", isSignal: true, isRequired: false, transformFunction: null }, closeIcon: { classPropertyName: "closeIcon", publicName: "closeIcon", isSignal: true, isRequired: false, transformFunction: null }, fullscreenIcon: { classPropertyName: "fullscreenIcon", publicName: "fullscreenIcon", isSignal: true, isRequired: false, transformFunction: null }, spinnerIcon: { classPropertyName: "spinnerIcon", publicName: "spinnerIcon", isSignal: true, isRequired: false, transformFunction: null }, autoPlay: { classPropertyName: "autoPlay", publicName: "autoPlay", isSignal: true, isRequired: false, transformFunction: null }, autoPlayInterval: { classPropertyName: "autoPlayInterval", publicName: "autoPlayInterval", isSignal: true, isRequired: false, transformFunction: null }, autoPlayPauseOnHover: { classPropertyName: "autoPlayPauseOnHover", publicName: "autoPlayPauseOnHover", isSignal: true, isRequired: false, transformFunction: null }, infinityMove: { classPropertyName: "infinityMove", publicName: "infinityMove", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, zoomStep: { classPropertyName: "zoomStep", publicName: "zoomStep", isSignal: true, isRequired: false, transformFunction: null }, zoomMax: { classPropertyName: "zoomMax", publicName: "zoomMax", isSignal: true, isRequired: false, transformFunction: null }, zoomMin: { classPropertyName: "zoomMin", publicName: "zoomMin", isSignal: true, isRequired: false, transformFunction: null }, zoomInIcon: { classPropertyName: "zoomInIcon", publicName: "zoomInIcon", isSignal: true, isRequired: false, transformFunction: null }, zoomOutIcon: { classPropertyName: "zoomOutIcon", publicName: "zoomOutIcon", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null }, rotateLeftIcon: { classPropertyName: "rotateLeftIcon", publicName: "rotateLeftIcon", isSignal: true, isRequired: false, transformFunction: null }, rotateRightIcon: { classPropertyName: "rotateRightIcon", publicName: "rotateRightIcon", isSignal: true, isRequired: false, transformFunction: null }, download: { classPropertyName: "download", publicName: "download", isSignal: true, isRequired: false, transformFunction: null }, downloadIcon: { classPropertyName: "downloadIcon", publicName: "downloadIcon", isSignal: true, isRequired: false, transformFunction: null }, bullets: { classPropertyName: "bullets", publicName: "bullets", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewOpen: "previewOpen", previewClose: "previewClose", activeChange: "activeChange" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "previewImage", first: true, predicate: ["previewImage"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "@if (arrows) {\n <ngx-gallery-arrows (prevClick)=\"showPrev()\" (nextClick)=\"showNext()\" [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\" [arrowPrevIcon]=\"arrowPrevIcon()\"\n [arrowNextIcon]=\"arrowNextIcon()\" />\n}\n<div class=\"ngx-gallery-preview-top\">\n <div class=\"ngx-gallery-preview-icons\">\n @for (action of actions(); track action) {\n <ngx-gallery-action [icon]=\"action.icon\" [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\" (closeClick)=\"action.onClick($event, index)\" />\n }\n @if (download() && src) {\n <a [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n <i class=\"ngx-gallery-icon-content {{ downloadIcon() }}\"></i>\n </a>\n }\n @if (zoom()) {\n <ngx-gallery-action [icon]=\"zoomOutIcon()\" [disabled]=\"!canZoomOut()\"\n (closeClick)=\"zoomOut()\" />\n }\n @if (zoom()) {\n <ngx-gallery-action [icon]=\"zoomInIcon()\" [disabled]=\"!canZoomIn()\"\n (closeClick)=\"zoomIn()\" />\n }\n @if (rotate()) {\n <ngx-gallery-action [icon]=\"rotateLeftIcon()\" (closeClick)=\"rotateLeft()\" />\n }\n @if (rotate()) {\n <ngx-gallery-action [icon]=\"rotateRightIcon()\" (closeClick)=\"rotateRight()\" />\n }\n @if (fullscreen()) {\n <ngx-gallery-action [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon()\"\n (closeClick)=\"manageFullscreen()\" />\n }\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon()\" (closeClick)=\"close()\" /> \n </div>\n</div>\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon()}}\" aria-hidden=\"true\"></i>\n</div>\n<div class=\"ngx-gallery-preview-wrapper\" (click)=\"closeOnClick() && close()\" (mouseup)=\"mouseUpHandler($event)\"\n (mousemove)=\"mouseMoveHandler($event)\" (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\">\n <div class=\"ngx-gallery-preview-img-wrapper\">\n @if (src && type === 'image') {\n <img #previewImage class=\"ngx-gallery-preview-img ngx-gallery-center\" [src]=\"src\"\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\"\n (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\n [class.ngx-gallery-active]=\"!loading\" [class.animation]=\"animation()\" [class.ngx-gallery-grab]=\"canDragOnZoom()\"\n [style.transform]=\"getTransform()\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\"/>\n }\n @if (src && type === 'video') {\n <video #previewImage controls style=\"width: 100%; height: 100%;\"\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\" (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\n [class.ngx-gallery-active]=\"!loading\" [class.animation]=\"animation()\" [class.ngx-gallery-grab]=\"canDragOnZoom()\" [style.transform]=\"getTransform()\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\">\n <source [src]=\"src\">\n Your browser does not support the video tag.\n </video>\n }\n @if (bullets()) {\n <ngx-gallery-bullets [count]=\"images().length\" [active]=\"index\"\n (bulletChange)=\"showAtIndex($event)\" />\n }\n </div>\n @if (showDescription() && description) {\n <div class=\"ngx-gallery-preview-text\" [innerHTML]=\"description\"\n (click)=\"$event.stopPropagation()\"></div>\n }\n</div>\n", styles: [":host.ngx-gallery-active{width:100%;height:100%;position:fixed;left:0;top:0;background:#000000b3;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:#000000b3;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: "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: "20.3.13", ngImport: i0, type: NgxGalleryPreviewComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-gallery-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgxGalleryArrowsComponent, NgxGalleryActionComponent, NgxGalleryBulletsComponent], template: "@if (arrows) {\n <ngx-gallery-arrows (prevClick)=\"showPrev()\" (nextClick)=\"showNext()\" [prevDisabled]=\"!canShowPrev()\"\n [nextDisabled]=\"!canShowNext()\" [arrowPrevIcon]=\"arrowPrevIcon()\"\n [arrowNextIcon]=\"arrowNextIcon()\" />\n}\n<div class=\"ngx-gallery-preview-top\">\n <div class=\"ngx-gallery-preview-icons\">\n @for (action of actions(); track action) {\n <ngx-gallery-action [icon]=\"action.icon\" [disabled]=\"action.disabled\"\n [titleText]=\"action.titleText\" (closeClick)=\"action.onClick($event, index)\" />\n }\n @if (download() && src) {\n <a [href]=\"src\" class=\"ngx-gallery-icon\" aria-hidden=\"true\" download>\n <i class=\"ngx-gallery-icon-content {{ downloadIcon() }}\"></i>\n </a>\n }\n @if (zoom()) {\n <ngx-gallery-action [icon]=\"zoomOutIcon()\" [disabled]=\"!canZoomOut()\"\n (closeClick)=\"zoomOut()\" />\n }\n @if (zoom()) {\n <ngx-gallery-action [icon]=\"zoomInIcon()\" [disabled]=\"!canZoomIn()\"\n (closeClick)=\"zoomIn()\" />\n }\n @if (rotate()) {\n <ngx-gallery-action [icon]=\"rotateLeftIcon()\" (closeClick)=\"rotateLeft()\" />\n }\n @if (rotate()) {\n <ngx-gallery-action [icon]=\"rotateRightIcon()\" (closeClick)=\"rotateRight()\" />\n }\n @if (fullscreen()) {\n <ngx-gallery-action [icon]=\"'ngx-gallery-fullscreen ' + fullscreenIcon()\"\n (closeClick)=\"manageFullscreen()\" />\n }\n <ngx-gallery-action [icon]=\"'ngx-gallery-close ' + closeIcon()\" (closeClick)=\"close()\" /> \n </div>\n</div>\n<div class=\"ngx-spinner-wrapper ngx-gallery-center\" [class.ngx-gallery-active]=\"showSpinner\">\n <i class=\"ngx-gallery-icon ngx-gallery-spinner {{spinnerIcon()}}\" aria-hidden=\"true\"></i>\n</div>\n<div class=\"ngx-gallery-preview-wrapper\" (click)=\"closeOnClick() && close()\" (mouseup)=\"mouseUpHandler($event)\"\n (mousemove)=\"mouseMoveHandler($event)\" (touchend)=\"mouseUpHandler($event)\" (touchmove)=\"mouseMoveHandler($event)\">\n <div class=\"ngx-gallery-preview-img-wrapper\">\n @if (src && type === 'image') {\n <img #previewImage class=\"ngx-gallery-preview-img ngx-gallery-center\" [src]=\"src\"\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\"\n (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\n [class.ngx-gallery-active]=\"!loading\" [class.animation]=\"animation()\" [class.ngx-gallery-grab]=\"canDragOnZoom()\"\n [style.transform]=\"getTransform()\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\"/>\n }\n @if (src && type === 'video') {\n <video #previewImage controls style=\"width: 100%; height: 100%;\"\n class=\"ngx-gallery-preview-img ngx-gallery-center\"\n (click)=\"$event.stopPropagation()\" (mouseenter)=\"imageMouseEnter()\" (mouseleave)=\"imageMouseLeave()\" (mousedown)=\"mouseDownHandler($event)\" (touchstart)=\"mouseDownHandler($event)\"\n [class.ngx-gallery-active]=\"!loading\" [class.animation]=\"animation()\" [class.ngx-gallery-grab]=\"canDragOnZoom()\" [style.transform]=\"getTransform()\" [style.left]=\"positionLeft + 'px'\" [style.top]=\"positionTop + 'px'\">\n <source [src]=\"src\">\n Your browser does not support the video tag.\n </video>\n }\n @if (bullets()) {\n <ngx-gallery-bullets [count]=\"images().length\" [active]=\"index\"\n (bulletChange)=\"showAtIndex($event)\" />\n }\n </div>\n @if (showDescription() && description) {\n <div class=\"ngx-gallery-preview-text\" [innerHTML]=\"description\"\n (click)=\"$event.stopPropagation()\"></div>\n }\n</div>\n", styles: [":host.ngx-gallery-active{width:100%;height:100%;position:fixed;left:0;top:0;background:#000000b3;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:#000000b3;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"] }]
}], propDecorators: { images: [{ type: i0.Input, args: [{ isSignal: true, alias: "images", required: false }] }], descriptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptions", required: false }] }], showDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDescription", required: false }] }], arrows: [{
type: Input
}], arrowsAutoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowsAutoHide", required: false }] }], swipe: [{ type: i0.Input, args: [{ isSignal: true, alias: "swipe", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], forceFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceFullscreen", required: false }] }], closeOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClick", required: false }] }], closeOnEsc: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEsc", required: false }] }], keyboardNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardNavigation", required: false }] }], arrowPrevIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowPrevIcon", required: false }] }], arrowNextIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowNextIcon", required: false }] }], closeIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeIcon", required: false }] }], fullscreenIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreenIcon", required: false }] }], spinnerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerIcon", required: false }] }], autoPlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlay", required: false }] }], autoPlayInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlayInterval", required: false }] }], autoPlayPauseOnHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPlayPauseOnHover", required: false }] }], infinityMove: [{ type: i0.Input, args: [{ isSignal: true, alias: "infinityMove", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], zoomStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomStep", required: false }] }], zoomMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomMax", required: false }] }], zoomMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomMin", required: false }] }], zoomInIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomInIcon", required: false }] }], zoomOutIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomOutIcon", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }], rotateLeftIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateLeftIcon", required: false }] }], rotateRightIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateRightIcon", required: false }] }], download: [{ type: i0.Input, args: [{ isSignal: true, alias: "download", required: false }] }], downloadIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "downloadIcon", required: false }] }], bullets: [{ type: i0.Input, args: [{ isSignal: true, alias: "bullets", required: false }] }], previewOpen: [{ type: i0.Output, args: ["previewOpen"] }], previewClose: [{ type: i0.Output, args: ["previewClose"] }], activeChange: [{ type: i0.Output, args: ["activeChange"] }], previewImage: [{ type: i0.ViewChild, args: ['previewImage', { isSignal: true }] }], onMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
class NgxGalleryAnimation {
static { this.Fade = 'fade'; }
static { this.Slide = 'slide'; }
static { this.Rotate = 'rotate'; }
static { this.Zoom = 'zoom'; }
}
class NgxGalleryImageComponent {
set selectedIndex(index) {
if (index > this._selectedIndex) {
let action;
const animation = this.animation();
if (animation === NgxGalleryAnimation.Slide) {
action = 'slideRight';
}
else if (animation === NgxGalleryAnimation.Fade) {
action = 'fade';
}
else if (animation === NgxGalleryAnimation.Rotate) {
action = 'rotateRight';
}
else if (animation === NgxGalleryAnimation.Zoom) {
action = 'zoom';
}
this.setAction(action);
}
else if (index < this._selectedIndex) {
let action;
const animation = this.animation();
if (animation === NgxGalleryAnimation.Slide) {
action = 'slideLeft';
}
else if (animation === NgxGalleryAnimation.Fade) {
action = 'fade';
}
else if (animation === NgxGalleryAnimation.Rotate) {
action = 'rotateLeft';
}
else if (animation === NgxGalleryAnimation.Zoom) {
action = 'zoom';
}
this.setAction(action);
}
this._selectedIndex = index;
}
constructor() {
this.sanitization = inject(DomSanitizer)