@failed-successfully/ngx-darkbox-gallery
Version:
Darkbox Gallery is a highly configurable lightbox themed gallery library for Angular applications using the ivy engine (Angular 18+).
731 lines • 53.2 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Input, Component, EventEmitter, HostListener, Output, Directive } from '@angular/core';
import { NgStyle, NgClass, SlicePipe } from '@angular/common';
class NgxDarkboxGalleryService {
constructor() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxDarkboxGalleryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxDarkboxGalleryService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxDarkboxGalleryService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
var LoopDirection;
(function (LoopDirection) {
LoopDirection["FORWARD"] = "FORWARD";
LoopDirection["BACKWARD"] = "BACKWARD";
LoopDirection["BOTH"] = "BOTH";
LoopDirection["NONE"] = "NONE";
})(LoopDirection || (LoopDirection = {}));
var LoadingAnimation;
(function (LoadingAnimation) {
LoadingAnimation["DOT"] = "DOT";
LoadingAnimation["BAR"] = "BAR";
LoadingAnimation["FLEX_RING"] = "FLEX_RING";
LoadingAnimation["SPINNER"] = "SPINNER";
LoadingAnimation["SQUARE"] = "SQUARE";
})(LoadingAnimation || (LoadingAnimation = {}));
var ButtonStyle;
(function (ButtonStyle) {
ButtonStyle["FAB"] = "FAB";
ButtonStyle["BAR"] = "BAR";
})(ButtonStyle || (ButtonStyle = {}));
var GridType;
(function (GridType) {
GridType["STATIC"] = "STATIC";
GridType["FLUID"] = "FLUID";
})(GridType || (GridType = {}));
class LoadingPlaceholderComponent {
constructor() { }
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LoadingPlaceholderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: LoadingPlaceholderComponent, isStandalone: true, selector: "loading-placeholder", inputs: { placeholderHeight: "placeholderHeight", placeholderWidth: "placeholderWidth" }, ngImport: i0, template: "<div class=\"placeholder\" [ngStyle]=\"{'height': placeholderHeight, 'width': placeholderWidth}\"></div>\n", styles: [".placeholder{display:inline-block;width:100%;background-color:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0,#edeef1 20%,#f6f7f8 40% 100%);background-position:0 0;background-repeat:no-repeat;background-size:1000px 1000px;animation:shimmerEffect 1s linear infinite forwards}@keyframes shimmerEffect{0%{background-position:-1000px 0}to{background-position:1000px 0}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LoadingPlaceholderComponent, decorators: [{
type: Component,
args: [{ selector: 'loading-placeholder', imports: [NgStyle], template: "<div class=\"placeholder\" [ngStyle]=\"{'height': placeholderHeight, 'width': placeholderWidth}\"></div>\n", styles: [".placeholder{display:inline-block;width:100%;background-color:#f6f7f8;background-image:linear-gradient(to right,#f6f7f8 0,#edeef1 20%,#f6f7f8 40% 100%);background-position:0 0;background-repeat:no-repeat;background-size:1000px 1000px;animation:shimmerEffect 1s linear infinite forwards}@keyframes shimmerEffect{0%{background-position:-1000px 0}to{background-position:1000px 0}}\n"] }]
}], ctorParameters: () => [], propDecorators: { placeholderHeight: [{
type: Input
}], placeholderWidth: [{
type: Input
}] } });
var SwipeDirection;
(function (SwipeDirection) {
SwipeDirection[SwipeDirection["UP"] = 0] = "UP";
SwipeDirection[SwipeDirection["DOWN"] = 1] = "DOWN";
SwipeDirection[SwipeDirection["LEFT"] = 2] = "LEFT";
SwipeDirection[SwipeDirection["RIGHT"] = 3] = "RIGHT";
})(SwipeDirection || (SwipeDirection = {}));
class DotComponent {
constructor() {
this.loadingAnimation = LoadingAnimation;
}
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: DotComponent, isStandalone: true, selector: "lib-dot", inputs: { animationType: "animationType" }, ngImport: i0, template: "<div class=\"loader\">\n @for (i of [0,1,2,3,4,5,6]; track i) {\n <span [ngClass]=\"animationType === loadingAnimation.DOT ? 'dot' : ''\"></span>\n }\n</div>\n", styles: [".loader{height:2rem;position:absolute;top:50%;left:50%;margin:-20px 0 0 -50px}.loader span{transition:all .5s ease;background:#fff;height:1rem;width:1rem;margin:.25rem;display:inline-block;animation:wave 2s ease infinite}.loader span:nth-child(1){animation-delay:0}.loader span:nth-child(2){animation-delay:.1s}.loader span:nth-child(3){animation-delay:.2s}.loader span:nth-child(4){animation-delay:.3s}.loader span:nth-child(5){animation-delay:.4s}.loader span:nth-child(6){animation-delay:.5s}.loader span:nth-child(7){animation-delay:.6s}.dot{border-radius:100%}@keyframes wave{0%,40%,to{transform:translate(0)}10%{transform:translateY(-15px)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DotComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-dot', imports: [NgClass], template: "<div class=\"loader\">\n @for (i of [0,1,2,3,4,5,6]; track i) {\n <span [ngClass]=\"animationType === loadingAnimation.DOT ? 'dot' : ''\"></span>\n }\n</div>\n", styles: [".loader{height:2rem;position:absolute;top:50%;left:50%;margin:-20px 0 0 -50px}.loader span{transition:all .5s ease;background:#fff;height:1rem;width:1rem;margin:.25rem;display:inline-block;animation:wave 2s ease infinite}.loader span:nth-child(1){animation-delay:0}.loader span:nth-child(2){animation-delay:.1s}.loader span:nth-child(3){animation-delay:.2s}.loader span:nth-child(4){animation-delay:.3s}.loader span:nth-child(5){animation-delay:.4s}.loader span:nth-child(6){animation-delay:.5s}.loader span:nth-child(7){animation-delay:.6s}.dot{border-radius:100%}@keyframes wave{0%,40%,to{transform:translate(0)}10%{transform:translateY(-15px)}}\n"] }]
}], ctorParameters: () => [], propDecorators: { animationType: [{
type: Input
}] } });
class FlexRingComponent {
constructor() { }
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: FlexRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.2", type: FlexRingComponent, isStandalone: true, selector: "lib-flex-ring", ngImport: i0, template: "<div class=\"loader-container\">\n <div class=\"flex\">\n <div class=\"loader\"></div>\n </div>\n</div>\n", styles: [".loader-container{width:100vw;height:100vh;position:fixed;top:0;left:0;display:flex;flex-direction:column;justify-content:center}.flex{min-height:6rem}.loader{width:5rem;height:5rem;border-radius:100%;margin-left:auto;margin-right:auto;border:#fff .4rem solid;animation:loading 1s infinite}@keyframes loading{0%,to{width:5rem;height:5rem;margin-top:0}25%{height:.4rem;margin-top:2.3rem}50%{width:.4rem}75%{width:5rem}}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: FlexRingComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-flex-ring', template: "<div class=\"loader-container\">\n <div class=\"flex\">\n <div class=\"loader\"></div>\n </div>\n</div>\n", styles: [".loader-container{width:100vw;height:100vh;position:fixed;top:0;left:0;display:flex;flex-direction:column;justify-content:center}.flex{min-height:6rem}.loader{width:5rem;height:5rem;border-radius:100%;margin-left:auto;margin-right:auto;border:#fff .4rem solid;animation:loading 1s infinite}@keyframes loading{0%,to{width:5rem;height:5rem;margin-top:0}25%{height:.4rem;margin-top:2.3rem}50%{width:.4rem}75%{width:5rem}}\n"] }]
}], ctorParameters: () => [] });
class SvgLoaderComponent {
constructor() {
this.loadingAnimation = LoadingAnimation;
}
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SvgLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: SvgLoaderComponent, isStandalone: true, selector: "lib-svg-loader", inputs: { animationType: "animationType" }, ngImport: i0, template: "<div class=\"loader-container\">\n <div class=\"loader\">\n @if (animationType === loadingAnimation.SPINNER) {\n <svg version=\" 1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 0 50 50\" xml:space=\"preserve\">\n <path d=\"M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z\">\n <animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n dur=\"0.75s\" repeatCount=\"indefinite\" />\n </path>\n </svg>\n }\n\n @if (animationType === loadingAnimation.BAR) {\n <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 0 24 30\" style=\"enable-background:new 0 0 50 50;\" xml:space=\"preserve\">\n <rect x=\"0\" y=\"13\" width=\"4\" height=\"5\">\n <animate attributeName=\"height\" attributeType=\"XML\" values=\"5;21;5\" begin=\"0s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n <animate attributeName=\"y\" attributeType=\"XML\" values=\"13; 5; 13\" begin=\"0s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n </rect>\n <rect x=\"10\" y=\"13\" width=\"4\" height=\"5\">\n <animate attributeName=\"height\" attributeType=\"XML\" values=\"5;21;5\" begin=\"0.15s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n <animate attributeName=\"y\" attributeType=\"XML\" values=\"13; 5; 13\" begin=\"0.15s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n </rect>\n <rect x=\"20\" y=\"13\" width=\"4\" height=\"5\">\n <animate attributeName=\"height\" attributeType=\"XML\" values=\"5;21;5\" begin=\"0.3s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n <animate attributeName=\"y\" attributeType=\"XML\" values=\"13; 5; 13\" begin=\"0.3s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n </rect>\n </svg>\n }\n </div>\n </div>\n", styles: [".loader-container{width:100vw;height:100vh;position:fixed;top:0;left:0;display:flex;flex-direction:column;justify-content:center}.loader{width:5%;margin-left:auto;margin-right:auto}svg path,svg rect{fill:#fff}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: SvgLoaderComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-svg-loader', imports: [], template: "<div class=\"loader-container\">\n <div class=\"loader\">\n @if (animationType === loadingAnimation.SPINNER) {\n <svg version=\" 1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 0 50 50\" xml:space=\"preserve\">\n <path d=\"M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z\">\n <animateTransform attributeType=\"xml\" attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\"\n dur=\"0.75s\" repeatCount=\"indefinite\" />\n </path>\n </svg>\n }\n\n @if (animationType === loadingAnimation.BAR) {\n <svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n viewBox=\"0 0 24 30\" style=\"enable-background:new 0 0 50 50;\" xml:space=\"preserve\">\n <rect x=\"0\" y=\"13\" width=\"4\" height=\"5\">\n <animate attributeName=\"height\" attributeType=\"XML\" values=\"5;21;5\" begin=\"0s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n <animate attributeName=\"y\" attributeType=\"XML\" values=\"13; 5; 13\" begin=\"0s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n </rect>\n <rect x=\"10\" y=\"13\" width=\"4\" height=\"5\">\n <animate attributeName=\"height\" attributeType=\"XML\" values=\"5;21;5\" begin=\"0.15s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n <animate attributeName=\"y\" attributeType=\"XML\" values=\"13; 5; 13\" begin=\"0.15s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n </rect>\n <rect x=\"20\" y=\"13\" width=\"4\" height=\"5\">\n <animate attributeName=\"height\" attributeType=\"XML\" values=\"5;21;5\" begin=\"0.3s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n <animate attributeName=\"y\" attributeType=\"XML\" values=\"13; 5; 13\" begin=\"0.3s\" dur=\"0.6s\"\n repeatCount=\"indefinite\" />\n </rect>\n </svg>\n }\n </div>\n </div>\n", styles: [".loader-container{width:100vw;height:100vh;position:fixed;top:0;left:0;display:flex;flex-direction:column;justify-content:center}.loader{width:5%;margin-left:auto;margin-right:auto}svg path,svg rect{fill:#fff}\n"] }]
}], ctorParameters: () => [], propDecorators: { animationType: [{
type: Input
}] } });
class LoadingAnimationComponent {
constructor() {
this.loadingAnimation = LoadingAnimation;
}
ngOnInit() {
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LoadingAnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: LoadingAnimationComponent, isStandalone: true, selector: "lib-loading-animation", inputs: { animationType: "animationType" }, ngImport: i0, template: "@if (animationType === loadingAnimation.DOT || animationType === loadingAnimation.SQUARE) {\n <lib-dot [animationType]=\"animationType\" />\n}\n@if (animationType === loadingAnimation.FLEX_RING) {\n <lib-flex-ring />\n}\n@if (animationType === loadingAnimation.BAR || animationType === loadingAnimation.SPINNER) {\n <lib-svg-loader\n [animationType]=\"animationType\" />\n}\n", styles: [""], dependencies: [{ kind: "component", type: DotComponent, selector: "lib-dot", inputs: ["animationType"] }, { kind: "component", type: FlexRingComponent, selector: "lib-flex-ring" }, { kind: "component", type: SvgLoaderComponent, selector: "lib-svg-loader", inputs: ["animationType"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: LoadingAnimationComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-loading-animation', imports: [DotComponent, FlexRingComponent, SvgLoaderComponent], template: "@if (animationType === loadingAnimation.DOT || animationType === loadingAnimation.SQUARE) {\n <lib-dot [animationType]=\"animationType\" />\n}\n@if (animationType === loadingAnimation.FLEX_RING) {\n <lib-flex-ring />\n}\n@if (animationType === loadingAnimation.BAR || animationType === loadingAnimation.SPINNER) {\n <lib-svg-loader\n [animationType]=\"animationType\" />\n}\n" }]
}], ctorParameters: () => [], propDecorators: { animationType: [{
type: Input
}] } });
class TouchableDirective {
constructor() {
this.swipe = new EventEmitter();
}
/**
* Event listener for touchstart events
* @param event Touch event
*/
onTouchStart(event) {
this.touchStartX = event.changedTouches[0].screenX;
this.touchStartY = event.changedTouches[0].screenY;
}
/**
* Event listener for touchend events
* @param event Touch event
*/
onTouchEnd(event) {
this.touchEndX = event.changedTouches[0].screenX;
this.touchEndY = event.changedTouches[0].screenY;
this.handleGesture();
}
/**
* Handler for all gestures
*/
handleGesture() {
// Swipe to the left
if (this.touchEndX < this.touchStartX) {
this.swipe.emit(SwipeDirection.LEFT);
}
// Swipe to the right
if (this.touchEndX > this.touchStartX) {
this.swipe.emit(SwipeDirection.RIGHT);
}
// Swipe up
if (this.touchEndY < this.touchStartY) {
this.swipe.emit(SwipeDirection.UP);
}
// Swipe down
if (this.touchEndY > this.touchStartY) {
this.swipe.emit(SwipeDirection.DOWN);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TouchableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.2", type: TouchableDirective, isStandalone: true, selector: "[touchable]", outputs: { swipe: "swipe" }, host: { listeners: { "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: TouchableDirective, decorators: [{
type: Directive,
args: [{ selector: '[touchable]' }]
}], ctorParameters: () => [], propDecorators: { swipe: [{
type: Output
}], onTouchStart: [{
type: HostListener,
args: ['touchstart', ['$event']]
}], onTouchEnd: [{
type: HostListener,
args: ['touchend', ['$event']]
}] } });
class ImageCaptionService {
constructor() { }
/**
* Replace the image caption template string with the actual values
* @param darkboxConfiguration current darkbox configuration
* @param currentNumer number of the currently selected image within the gallery
* @param totalNumber total number of images in the gallery
* @param imageCaption caption of the selected image
* @returns the formatted image caption
*/
getImageCaption(darkboxConfiguration, currentNumer, totalNumber, imageCaption) {
let caption = darkboxConfiguration.captionTemplate;
if (!imageCaption) {
caption = caption.replace('${caption}', '');
caption = caption.replace('${separator}', '');
}
else {
caption = caption.replace('${caption}', imageCaption);
caption = caption.replace('${separator}', darkboxConfiguration.captionSeparator);
}
caption = caption.replace('${currentNumber}', currentNumer.toString());
caption = caption.replace('${totalNumber}', totalNumber.toString());
return caption;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ImageCaptionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ImageCaptionService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ImageCaptionService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
var KEY_CODE;
(function (KEY_CODE) {
KEY_CODE[KEY_CODE["RIGHT_ARROW"] = 39] = "RIGHT_ARROW";
KEY_CODE[KEY_CODE["LEFT_ARROW"] = 37] = "LEFT_ARROW";
KEY_CODE[KEY_CODE["ESCAPE"] = 27] = "ESCAPE";
})(KEY_CODE || (KEY_CODE = {}));
class DarkboxComponent {
constructor(imageCaptionService) {
this.imageCaptionService = imageCaptionService;
this.close = new EventEmitter();
this.next = new EventEmitter();
this.prev = new EventEmitter();
this.imageLoaded = new EventEmitter();
/**
* Loading state holder for the full sized image
*/
this.fullSizedImageLoaded = false;
}
ngOnInit() {
}
ngOnChanges(changes) {
if (changes.currentNumber) {
this.imageCaption = this.imageCaptionService.getImageCaption(this.darkboxConfiguration, this.currentNumber, this.totalNumber, this.image.caption);
}
}
onClose() {
this.close.emit(true);
}
/**
* Handle swipe interactions
* @param event
*/
onSwipe(event) {
if (event === SwipeDirection.LEFT) {
this.onNext();
}
if (event === SwipeDirection.RIGHT) {
this.onPrev();
}
}
onNext() {
this.fullSizedImageLoaded = false;
this.next.emit(true);
}
onPrev() {
this.fullSizedImageLoaded = false;
this.prev.emit(true);
}
onImageLoaded() {
this.fullSizedImageLoaded = true;
this.imageLoaded.emit(this.image);
}
getCloseButtonStyle() {
if (this.darkboxConfiguration.closeButtonStyle === ButtonStyle.FAB) {
return 'fab';
}
if (this.darkboxConfiguration.closeButtonStyle === ButtonStyle.BAR) {
return 'bar';
}
}
getPrevNextButtonStyle() {
if (this.darkboxConfiguration.prevNextButtonStyle === ButtonStyle.FAB) {
return 'fab';
}
if (this.darkboxConfiguration.prevNextButtonStyle === ButtonStyle.BAR) {
return 'bar';
}
}
getCloseButtonBackgroundColor() {
return this.darkboxConfiguration.closeButtonColorConfiguration.backgroundColor;
}
getCloseButtonForegroundColor() {
return this.darkboxConfiguration.closeButtonColorConfiguration.foregroundColor;
}
getPrevNextButtonBackgroundColor() {
return this.darkboxConfiguration.prevNextButtonColorConfiguration.backgroundColor;
}
getPrevNextButtonForegroundColor() {
return this.darkboxConfiguration.prevNextButtonColorConfiguration.foregroundColor;
}
getCaptionBackgroundColor() {
return this.darkboxConfiguration.captionColorConfiguration.backgroundColor;
}
getCaptionForegroundColor() {
return this.darkboxConfiguration.captionColorConfiguration.foregroundColor;
}
onKeyUp(event) {
let code;
if (event.key !== undefined) {
code = event.key;
}
else if (event.keyCode !== undefined) {
code = event.keyCode;
}
if (this.hasNext && (code === 'ArrowRight' || code === KEY_CODE.RIGHT_ARROW)) {
this.onNext();
}
if (this.hasPrev && (code === 'ArrowLeft' || code === KEY_CODE.LEFT_ARROW)) {
this.onPrev();
}
if (code === 'Escape' || code === KEY_CODE.ESCAPE) {
this.onClose();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DarkboxComponent, deps: [{ token: ImageCaptionService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: DarkboxComponent, isStandalone: true, selector: "darkbox", inputs: { image: "image", darkboxConfiguration: "darkboxConfiguration", currentNumber: "currentNumber", totalNumber: "totalNumber", hasNext: "hasNext", hasPrev: "hasPrev" }, outputs: { close: "close", next: "next", prev: "prev", imageLoaded: "imageLoaded" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"overlay\">\n <button [ngClass]=\"getCloseButtonStyle()\" class=\"close\"\n [ngStyle]=\"{'background-color': getCloseButtonBackgroundColor(), 'color': getCloseButtonForegroundColor()}\"\n (click)=\"onClose()\">x</button>\n <!-- The loading animation -->\n @if (!fullSizedImageLoaded) {\n <lib-loading-animation [animationType]=\"darkboxConfiguration.loadingAnimation\" />\n }\n <!-- The actual full sized image -->\n <div class=\"image\" [ngStyle]=\"{'display': fullSizedImageLoaded ? '' : 'none'}\">\n <img touchable src=\"{{image.url}}\" alt=\"{{image.altText}}\" (load)=\"onImageLoaded()\" (swipe)=\"onSwipe($event)\">\n @if (darkboxConfiguration.enableCaption) {\n <div class=\"caption\"\n [ngStyle]=\"{'background-color': getCaptionBackgroundColor(), 'color': getCaptionForegroundColor()}\">\n {{imageCaption}}\n </div>\n }\n </div>\n @if (hasPrev) {\n <button [ngClass]=\"getPrevNextButtonStyle()\" class=\"prev\"\n [ngStyle]=\"{'background-color': getPrevNextButtonBackgroundColor(), 'color': getPrevNextButtonForegroundColor()}\"\n (click)=\"onPrev()\"><</button>\n }\n @if (hasNext) {\n <button [ngClass]=\"getPrevNextButtonStyle()\" class=\"next\"\n [ngStyle]=\"{'background-color': getPrevNextButtonBackgroundColor(), 'color': getPrevNextButtonForegroundColor()}\"\n (click)=\"onNext()\">></button>\n }\n</div>\n", styles: ["button{cursor:pointer}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000c;z-index:1000}.overlay .image{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.overlay .image img{max-width:90vw;max-height:90vh}.overlay .image .caption{width:fit-content;margin:auto;margin-block-start:.5rem;background-color:#fff;border-radius:25px;padding:.5rem}.overlay .fab{position:fixed;background-color:#fff;border:none;width:3rem;height:3rem;border-radius:2rem;font-size:large}.overlay .fab.close{top:2rem;right:3rem}.overlay .fab.prev{top:calc(50vh - 1.5rem);left:3rem}.overlay .fab.next{top:calc(50vh - 1.5rem);right:3rem}.overlay .bar{position:fixed;background-color:#000c;border:none;font-size:large}.overlay .bar.close{width:calc(100vw - 6rem);height:2.5rem;top:0;left:3rem}.overlay .bar.prev{width:3rem;height:100vh;left:0}.overlay .bar.next{width:3rem;height:100vh;right:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingAnimationComponent, selector: "lib-loading-animation", inputs: ["animationType"] }, { kind: "directive", type: TouchableDirective, selector: "[touchable]", outputs: ["swipe"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: DarkboxComponent, decorators: [{
type: Component,
args: [{ selector: 'darkbox', imports: [NgClass, NgStyle, LoadingAnimationComponent, TouchableDirective], template: "<div class=\"overlay\">\n <button [ngClass]=\"getCloseButtonStyle()\" class=\"close\"\n [ngStyle]=\"{'background-color': getCloseButtonBackgroundColor(), 'color': getCloseButtonForegroundColor()}\"\n (click)=\"onClose()\">x</button>\n <!-- The loading animation -->\n @if (!fullSizedImageLoaded) {\n <lib-loading-animation [animationType]=\"darkboxConfiguration.loadingAnimation\" />\n }\n <!-- The actual full sized image -->\n <div class=\"image\" [ngStyle]=\"{'display': fullSizedImageLoaded ? '' : 'none'}\">\n <img touchable src=\"{{image.url}}\" alt=\"{{image.altText}}\" (load)=\"onImageLoaded()\" (swipe)=\"onSwipe($event)\">\n @if (darkboxConfiguration.enableCaption) {\n <div class=\"caption\"\n [ngStyle]=\"{'background-color': getCaptionBackgroundColor(), 'color': getCaptionForegroundColor()}\">\n {{imageCaption}}\n </div>\n }\n </div>\n @if (hasPrev) {\n <button [ngClass]=\"getPrevNextButtonStyle()\" class=\"prev\"\n [ngStyle]=\"{'background-color': getPrevNextButtonBackgroundColor(), 'color': getPrevNextButtonForegroundColor()}\"\n (click)=\"onPrev()\"><</button>\n }\n @if (hasNext) {\n <button [ngClass]=\"getPrevNextButtonStyle()\" class=\"next\"\n [ngStyle]=\"{'background-color': getPrevNextButtonBackgroundColor(), 'color': getPrevNextButtonForegroundColor()}\"\n (click)=\"onNext()\">></button>\n }\n</div>\n", styles: ["button{cursor:pointer}.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000c;z-index:1000}.overlay .image{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.overlay .image img{max-width:90vw;max-height:90vh}.overlay .image .caption{width:fit-content;margin:auto;margin-block-start:.5rem;background-color:#fff;border-radius:25px;padding:.5rem}.overlay .fab{position:fixed;background-color:#fff;border:none;width:3rem;height:3rem;border-radius:2rem;font-size:large}.overlay .fab.close{top:2rem;right:3rem}.overlay .fab.prev{top:calc(50vh - 1.5rem);left:3rem}.overlay .fab.next{top:calc(50vh - 1.5rem);right:3rem}.overlay .bar{position:fixed;background-color:#000c;border:none;font-size:large}.overlay .bar.close{width:calc(100vw - 6rem);height:2.5rem;top:0;left:3rem}.overlay .bar.prev{width:3rem;height:100vh;left:0}.overlay .bar.next{width:3rem;height:100vh;right:0}\n"] }]
}], ctorParameters: () => [{ type: ImageCaptionService }], propDecorators: { image: [{
type: Input
}], darkboxConfiguration: [{
type: Input
}], currentNumber: [{
type: Input
}], totalNumber: [{
type: Input
}], hasNext: [{
type: Input
}], hasPrev: [{
type: Input
}], close: [{
type: Output
}], next: [{
type: Output
}], prev: [{
type: Output
}], imageLoaded: [{
type: Output
}], onKeyUp: [{
type: HostListener,
args: ['window:keyup', ['$event']]
}] } });
class DefaultDarkboxConfiguration {
constructor() {
this.loopDirection = LoopDirection.BOTH;
this.enableCaption = true;
this.captionColorConfiguration = {
backgroundColor: '#FFFFFF',
foregroundColor: '#000000'
};
this.loadingAnimation = LoadingAnimation.SPINNER;
this.closeButtonStyle = ButtonStyle.FAB;
this.closeButtonColorConfiguration = {
backgroundColor: '#FFFFFF',
foregroundColor: '#000000'
};
this.prevNextButtonStyle = ButtonStyle.FAB;
this.prevNextButtonColorConfiguration = {
backgroundColor: '#FFFFFF',
foregroundColor: '#000000'
};
this.captionSeparator = ' - ';
this.captionTemplate = '${currentNumber}/${totalNumber}${separator}${caption}';
}
}
class DefaultGridConfiguration {
constructor() {
this.initialBatchSize = 10;
this.batchSize = 15;
this.batchSizeScalingFactors = [
{
pxWidth: 1400,
scalingFactor: 5
},
{
pxWidth: 992,
scalingFactor: 2
}
];
this.gridType = GridType.STATIC;
this.thumbnailAlignment = 'flex-start';
this.zoomImages = true;
this.thumbnailHeight = '175px';
this.thumbnailWidth = '175px';
this.enableLoadingPlaceholder = true;
this.thumbnailsWaitForBatch = true;
}
}
class DefaultConfiguration {
constructor() {
this.darkboxConfiguration = new DefaultDarkboxConfiguration();
this.gridConfiguration = new DefaultGridConfiguration();
}
}
class ConfigurationService {
constructor() {
this.defaultConfiguration = new DefaultConfiguration();
}
getEffectiveConfiguration(customConfiguration) {
if (!this.defaultConfiguration) {
this.defaultConfiguration = new DefaultConfiguration();
}
const effectiveGridConfig = { ...this.defaultConfiguration.gridConfiguration, ...customConfiguration?.gridConfiguration };
const effectiveDarkboxConfig = { ...this.defaultConfiguration.darkboxConfiguration, ...customConfiguration?.darkboxConfiguration };
return {
gridConfiguration: effectiveGridConfig,
darkboxConfiguration: effectiveDarkboxConfig
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ConfigurationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ConfigurationService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ConfigurationService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class ImageIndexService {
constructor() { }
/**
* Calculates the next valid image index based on the currentImageIndex and the images array
* @param configuration currently used for the Darkbox instance
* @param currentIndex of the image being displayed
* @param totalImageCount number of total images provided to Darkbox
* @param increase true if the index should be increased, false otherwise
* @return the new index
*/
calculateValidImageIndex(configuration, currentIndex, totalImageCount, increase) {
const loopDirection = configuration.darkboxConfiguration.loopDirection;
const addend = increase ? 1 : -1;
const targetIndex = currentIndex + addend;
const maxImageIndex = totalImageCount - 1;
if (targetIndex >= 0 && targetIndex <= maxImageIndex) {
return targetIndex;
}
if (loopDirection !== LoopDirection.NONE) {
if (targetIndex > maxImageIndex && (loopDirection === LoopDirection.FORWARD || loopDirection === LoopDirection.BOTH)) {
return 0;
}
if (targetIndex < 0 && (loopDirection === LoopDirection.BACKWARD || loopDirection === LoopDirection.BOTH)) {
// If we rollover to the back, make sure all images are displayed in the grid
return maxImageIndex;
}
}
return currentIndex;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ImageIndexService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ImageIndexService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: ImageIndexService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class NgxDarkboxGalleryComponent {
constructor(configurationService, imageIndexService) {
this.configurationService = configurationService;
this.imageIndexService = imageIndexService;
/**
* List of images displayed in Darkbox
*/
this.images = [];
this.loadedThumbnails = new Set();
this.batchLoadedThumbnails = new Set();
/**
* Signals that a single image was clicked
* The clicked images is being emitted
*/
this.imageClicked = new EventEmitter();
/**
* Signals that a single thumbnail was loaded
* The image containing the thumbnail is being emitted
*/
this.thumbnailLoaded = new EventEmitter();
/**
* Signals that all thumbnails currently displayed have bean loaded
*/
this.allThumbnailsLoaded = new EventEmitter();
/**
* Signals that all images provided from the input are displayed in the DOM
* This does not mean that all thumbnails/images are completely loaded
*/
this.allImagesInDom = new EventEmitter();
/**
* Signals that the lightbox/Darkbox was closed by the user
*/
this.darkboxClosed = new EventEmitter();
/**
* Signals that the user clicked the next image button
*/
this.darkboxNext = new EventEmitter();
/**
* Signals that the user clicked the previous image button
*/
this.darkboxPrev = new EventEmitter();
/**
* Signals that the full sized images was loaded
* The loaded images is being emitted
*/
this.darkboxImageLoaded = new EventEmitter();
}
ngOnInit() {
this.initializeConfiguration(this.configuration);
this.subscribeToOutsideClickEvents();
}
ngOnChanges(changes) {
if (changes.configuration) {
this.initializeConfiguration(this.configuration);
}
if (changes.loadMoreImagesEvents) {
this.subscribeToOutsideClickEvents();
}
}
ngOnDestroy() {
if (this.eventsSubscription) {
this.eventsSubscription.unsubscribe();
}
}
initializeConfiguration(customConfiguration) {
this.effectiveConfiguration = this.configurationService.getEffectiveConfiguration(customConfiguration);
this.scaleInitialBatchSize();
this.imageCount = this.effectiveConfiguration.gridConfiguration.initialBatchSize;
}
subscribeToOutsideClickEvents() {
if (this.eventsSubscription) {
this.eventsSubscription.unsubscribe();
}
if (this.loadMoreImagesEvents) {
this.eventsSubscription = this.loadMoreImagesEvents.subscribe(() => this.showMoreImages());
}
}
onImageClicked(image) {
this.currentImageIndex = this.images.indexOf(image);
this.imageClicked.emit(image);
}
onDarkboxClose() {
this.currentImageIndex = null;
this.darkboxClosed.emit(true);
}
onDarkboxNextImage() {
this.currentImageIndex = this.calculateValidImageIndex(true);
this.darkboxNext.emit(true);
}
onDarkboxPrevImage() {
this.currentImageIndex = this.calculateValidImageIndex(false);
this.darkboxPrev.emit(true);
}
onDarkboxImageLoaded(image) {
this.darkboxImageLoaded.emit(image);
}
/**
* Event emitter signaling that one image is loaded
* Additionally signals that all images of one batch are loaded
*/
onThumbnailLoaded(image) {
if (this.effectiveConfiguration.gridConfiguration.thumbnailsWaitForBatch) {
this.batchLoadedThumbnails.add(image);
}
else {
this.loadedThumbnails.add(image);
}
this.thumbnailLoaded.emit(image);
if (this.loadedThumbnails.size + this.batchLoadedThumbnails.size >= this.imageCount) {
if (this.effectiveConfiguration.gridConfiguration.thumbnailsWaitForBatch) {
this.batchLoadedThumbnails.forEach(i => this.loadedThumbnails.add(i));
this.batchLoadedThumbnails.clear();
}
this.allThumbnailsLoaded.emit(true);
}
}
isNextImageAvailable() {
const loopDirection = this.effectiveConfiguration.darkboxConfiguration.loopDirection;
return this.currentImageIndex + 1 < this.images.length || loopDirection === LoopDirection.FORWARD || loopDirection === LoopDirection.BOTH;
}
isPrevImageAvailable() {
const loopDirection = this.effectiveConfiguration.darkboxConfiguration.loopDirection;
return this.currentImageIndex - 1 >= 0 || loopDirection === LoopDirection.BACKWARD || loopDirection === LoopDirection.BOTH;
}
/**
* Calculates the next valid image index based on the currentImageIndex and the images array
* @param increase true if the index should be increased, false otherwise
* @return the new index
*/
calculateValidImageIndex(increase) {
const newImageIndex = this.imageIndexService.calculateValidImageIndex(this.effectiveConfiguration, this.currentImageIndex, this.images.length, increase);
const rollOverRequired = newImageIndex === this.images.length - 1 && this.imageCount < this.images.length;
// Roll over to the last image when the image before the first one is requested
if (rollOverRequired) {
this.showMoreImages(true);
}
if (newImageIndex >= this.imageCount && !rollOverRequired) {
this.showMoreImages();
}
return newImageIndex;
}
/**
* Increase the imageCount and thereby increase the number of displayed thumbnails/images
* @param showAllImages If true all thumbnails/images are displayed
*/
showMoreImages(showAllImages = false) {
this.imageCount += this.effectiveConfiguration.gridConfiguration.batchSize;
if (showAllImages) {
this.imageCount = this.images.length;
}
if (this.imageCount >= this.images.length) {
this.allImagesInDom.emit(true);
this.imageCount = this.images.length;
}
}
/**
* Calculates the correct initial number of images based on the screen resolution
*/
scaleInitialBatchSize() {
const windowWidth = window.screen.width;
const scalingFactors = this.effectiveConfiguration.gridConfiguration.batchSizeScalingFactors;
scalingFactors.sort((a, b) => b.pxWidth - a.pxWidth);
const factor = scalingFactors.find(currentFactor => windowWidth >= currentFactor.pxWidth);
this.effectiveConfiguration.gridConfiguration.initialBatchSize *= factor ? factor.scalingFactor : 1;
}
/**
* Compiles the css classes needed to reflect the configuration of the image-grid
* @returns a string of css class names for the main image grid
*/
getImageGridClasses() {
const classConfig = [];
if (this.effectiveConfiguration.gridConfiguration.gridType === GridType.STATIC) {
classConfig.push('static-image-grid');
}
if (this.effectiveConfiguration.gridConfiguration.gridType === GridType.FLUID) {
classConfig.push('fluid-image-grid');
}
if (this.effectiveConfiguration.gridConfiguration.zoomImages) {
classConfig.push('zooming-images');
}
return classConfig.join(' ');
}
/**
* Returns the configuration parameter for content justification in the main image grid
* @returns a string for the justifiy-content css property
*/
getContentJustification() {
return this.effectiveConfiguration.gridConfiguration.thumbnailAlignment;
}
/**
* @param isPlaceholder whether the size is calculated for a placeholder or not
* @returns the thumbnail height from the configuration
*/
getThumbnailHeight(isPlaceholder = false) {
// Check for the fluid style
if (this.effectiveConfiguration.gridConfiguration.gridType === GridType.FLUID && !isPlaceholder) {
return null;
}
return this.effectiveConfiguration.gridConfiguration.thumbnailHeight;
}
/**
* @param isPlaceholder whether the size is calculated for a placeholder or not
* @returns the thumbnail width from the configuration
*/
getThumbnailWidth(isPlaceholder = false) {
// Check for the fluid style
if (this.effectiveConfiguration.gridConfiguration.gridType === GridType.FLUID && !isPlaceholder) {
return null;
}
return this.effectiveConfiguration.gridConfiguration.thumbnailWidth;
}
isLoadingPlaceholderEnabled() {
return this.effectiveConfiguration.gridConfiguration?.enableLoadingPlaceholder;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxDarkboxGalleryComponent, deps: [{ token: ConfigurationService }, { token: ImageIndexService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.2", type: NgxDarkboxGalleryComponent, isStandalone: true, selector: "darkbox-gallery", inputs: { images: "images", configuration: "configuration", loadMoreImagesEvents: "loadMoreImagesEvents" }, outputs: { imageClicked: "imageClicked", thumbnailLoaded: "thumbnailLoaded", allThumbnailsLoaded: "allThumbnailsLoaded", allImagesInDom: "allImagesInDom", darkboxClosed: "darkboxClosed", darkboxNext: "darkboxNext", darkboxPrev: "darkboxPrev", darkboxImageLoaded: "darkboxImageLoaded" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"getImageGridClasses()\" [ngStyle]=\"{'justify-content': getContentJustification()}\">\n @for (image of images | slice:0:imageCount; track image) {\n <div class=\"image-container\" [ngStyle]=\"{'height': getThumbnailHeight(), 'width': getThumbnailWidth()}\"\n (click)=\"onImageClicked(image)\">\n <!-- The actual thumbnail image -->\n <img [ngStyle]=\"{'display': isLoadingPlaceholderEnabled() && !loadedThumbnails.has(image) ? 'none' : ''}\"\n src=\"{{image.thumbnailUrl}}\" alt=\"{{image.altText}}\" (load)=\"onThumbnailLoaded(image)\">\n <!-- Loading placeholder in the configured size -->\n @if (isLoadingPlaceholderEnabled() && !loadedThumbnails.has(image)) {\n <loading-placeholder\n [placeholderHeight]=\"getThumbnailHeight(true)\" [placeholderWidth]=\"getThumbnailWidth(true)\">\n </loading-placeholder>\n }\n </div>\n }\n </div>\n\n @if (currentImageIndex != null) {\n <darkbox [image]=\"images[currentImageIndex]\"\n [darkboxConfiguration]=\"effectiveConfiguration.darkboxConfiguration\" [currentNumber]=\"currentImageIndex + 1\"\n [totalNumber]=\"images.length\" [hasNext]=\"isNextImageAvailable()\" [hasPrev]=\"isPrevImageAvailable()\"\n (close)=\"onDarkboxClose()\" (next)=\"onDarkboxNextImage()\" (prev)=\"onDarkboxPrevImage()\"\n (imageLoaded)=\"onDarkboxImageLoaded($event)\"/>\n }\n", styles: ["button{cursor:pointer}.static-image-grid{display:flex;flex-direction:row;flex-wrap:wrap}.static-image-grid .image-container{max-width:100%;margin:2.5px;cursor:pointer}.static-image-grid .image-container img{width:100%;height:100%;object-fit:cover}.fluid-image-grid{column-count:1;column-width:100%}.fluid-image-grid .image-container{cursor:pointer}.fluid-image-grid img{max-width:100%;height:auto;margin-block-end:.5rem}.zooming-images .image-container,.zooming-images img{transition:transform .5s ease-out,border-radius .5s ease-out}.zooming-images img:hover{border-radius:5%;transition:transform .5s ease-out,border-radius .5s ease-out}.zooming-images .image-container:hover{transform:scale(1.05);border-radius:5%;transition:transform .5s ease-out,border-radius .5s ease-out}@media (min-width: 600px) and (max-width: 960px){.fluid-image-grid{column-count:2}}@media (min-width: 960px) and (max-width: 1280px){.fluid-image-grid{column-count:3}}@media (min-width: 1280px) and (max-width: 1920px){.fluid-image-grid{column-count:4}}@media (min-width: 1920px) and (max-width: 2160px){.fluid-image-grid{column-count:5}}@media (min-width: 2160px){.fluid-image-grid{column-count:9}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingPlaceholderComponent, selector: "loading-placeholder", inputs: ["placeholderHeight", "placeholderWidth"] }, { kind: "component", type: DarkboxComponent, selector: "darkbox", inputs: ["image", "darkboxConfiguration", "currentNumber", "totalNumber", "hasNext", "hasPrev"], outputs: ["close", "next", "prev", "imageLoaded"] }, { kind: "pipe", type: SlicePipe, name: "slice" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.2", ngImport: i0, type: NgxDarkboxGalleryComponent, decorators: [{
type: Component,
args: [{ selector: 'darkbox-gallery', imports: [NgClass, NgStyle, LoadingPlaceholderComponent, DarkboxComponent, SlicePipe], template: "<div [ngClass]=\"getImageGridClasses()\" [ngStyle]=\"{'justify-content': getContentJustification()}\">\n @for (image of images | slice:0:imageCount; track image) {\n <div class=\"image-container\" [ngStyle]=\"{'height': getThumbnailHeight(), 'width': getThumbnailWidth()}\"\n (click)=\"onImageClicked(image)\">\n <!-- The actual thumbnail image -->\n <img [ngStyle]=\"{'display': isLoadingPlaceholderEnabled() && !loadedThumbnails.has(image) ? 'none' : ''}\"\n src=\"{{image.thumbnailUrl}}\" alt=\"{{image.altText}}\" (load)=\"onThumbnailLoaded(image)\">\n <!-- Loading placeholder in the configured size -->\n @if (isLoadingPlaceholderEnabled() && !loadedThumbnails.has(image)) {\n <loading-placeholder\n [placeholderHeight]=\"getThumbnailHeight(true)\" [placeholderWidth]=\"getThumbnailWidth(true)\">\n </loading-placeholder>\n }\n </div>\n }\n </div>\n\n @if (currentImageIndex != null) {\n <darkbox [image]=\"images[currentImageIndex]\"\n [darkboxConfiguration]=\"effectiveConfiguration.darkboxConfiguration\" [currentNumber]=\"currentImageIndex + 1\"\n [totalNumber]=\"images.length\" [hasNext]=\"isNextImageAvailable()\" [hasPrev]=\"isPrevImageAvailable()\"\n (close)=\"onDarkboxClose()\" (next)=\"onDarkboxNextImage()\" (prev)=\"onDarkboxPrevImage()\"\n (imageLoaded)=\"onDarkboxImageLoaded($event)\"/>\n }\n", styles: ["button{cursor:pointer}.static-image-grid{display:flex;flex-direction:row;flex-wrap:wrap}.static-image-grid .image-container{max-width:100%;margin:2.5px;cursor:pointer}.static-image-grid .image-container img{width:100%;height:100%;object-fit:cover}.fluid-image-grid{column-count:1;column-width:100%}.fluid-image-grid .image-container{cursor:pointer}.fluid-image-grid img{max-width:100%;height:auto;margin-block-end:.5rem}.zooming-images .image-container,.zooming-images img{transition:transform .5s ease-out,border-radius .5s ease-out}.zooming-images img:hover{border-radius:5%;transition:transform .5s ease-out,border-radius .5s ease-out}.zooming-images .image-container:hover{transform:scale(1.05);border-radius:5%;transition:transform .5s ease-out,border-radius .5s ease-out}@media (min-width: 600px) and (max-width: 960px){.fluid-image-grid{column-count:2}}@media (min-width: 960px) and (max-width: 1280px){.fluid-image-grid{column-count:3}}@media (min-width: 1280px) and (max-width: 1920px){.fluid-image-grid{column-count:4}}@media (min-width: 1920px) and (max-width: 2160px){.fluid-image-grid{column-count:5}}@media (min-width: 2160px){.fluid-image-grid{column-count:9}}\n"] }]
}], ctorParameters: () => [{ type: ConfigurationService }, { type: ImageIndexService }], propDecorators: { images: [{
type: Input
}], configuration: [{
type: Input
}], loadMoreImagesEvents: [{
type: Input
}], imageClicked: [{
type: Output
}], thumbnailLoaded: [{
type: Output
}], allThumbnailsLoaded: [{
type: Output
}], allImagesInDom: [{
type: Output
}], darkboxClosed: [{
type: Output
}], darkboxNext: [{
type: Output
}], darkboxPrev: [{
type: Output
}], darkboxImageLoaded: [{
type: Output
}] } });
class Image {
}
/*
* Public API Surface of ngx-darkbox-gallery
*/
/**
* Generated bundle index. Do not edit.
*/
export { ButtonStyle, GridType, Image, LoadingAnimation, LoopDirection, NgxDarkboxGalleryComponent, NgxDarkboxGalleryService };
//# sourceMappingURL=failed-successfully-ngx-darkbox-gallery.mjs.map