\n \n \n @if (!fullSizedImageLoaded) {\n
\n","import { ColorConfiguration } from '../model/color-configuration';\nimport { ButtonStyle, DarkboxConfiguration, LoadingAnimation, LoopDirection } from '../model/darkbox-configuration';\n\nexport class DefaultDarkboxConfiguration implements DarkboxConfiguration {\n loopDirection = LoopDirection.BOTH;\n enableCaption = true;\n captionColorConfiguration = {\n backgroundColor: '#FFFFFF',\n foregroundColor: '#000000'\n } as ColorConfiguration;\n loadingAnimation = LoadingAnimation.SPINNER;\n closeButtonStyle = ButtonStyle.FAB;\n closeButtonColorConfiguration = {\n backgroundColor: '#FFFFFF',\n foregroundColor: '#000000'\n } as ColorConfiguration;\n prevNextButtonStyle = ButtonStyle.FAB;\n prevNextButtonColorConfiguration = {\n backgroundColor: '#FFFFFF',\n foregroundColor: '#000000'\n } as ColorConfiguration;\n captionSeparator = ' - ';\n captionTemplate = '${currentNumber}/${totalNumber}${separator}${caption}';\n}\n","import { GridConfiguration, GridType } from '../model/grid-configuration';\n\nexport class DefaultGridConfiguration implements GridConfiguration {\n initialBatchSize = 10;\n batchSize = 15;\n batchSizeScalingFactors = [\n {\n pxWidth: 1400,\n scalingFactor: 5\n },\n {\n pxWidth: 992,\n scalingFactor: 2\n }\n ];\n gridType = GridType.STATIC;\n thumbnailAlignment = 'flex-start';\n zoomImages = true;\n thumbnailHeight = '175px';\n thumbnailWidth = '175px';\n enableLoadingPlaceholder = true;\n thumbnailsWaitForBatch = true;\n}\n","import { Configuration } from '../model/configuration';\nimport { DefaultDarkboxConfiguration } from './darkbox-configuration.default';\nimport { DefaultGridConfiguration } from './grid-configuration.default';\n\nexport class DefaultConfiguration implements Configuration {\n darkboxConfiguration = new DefaultDarkboxConfiguration();\n gridConfiguration = new DefaultGridConfiguration();\n}\n","import { Injectable } from '@angular/core';\nimport { DefaultConfiguration } from '../config/configuration.default';\nimport { Configuration } from '../model/configuration';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class ConfigurationService {\n\n private defaultConfiguration = new DefaultConfiguration();\n\n constructor() { }\n\n public getEffectiveConfiguration(customConfiguration: Configuration): Configuration {\n if (!this.defaultConfiguration) {\n this.defaultConfiguration = new DefaultConfiguration();\n }\n\n const effectiveGridConfig = { ...this.defaultConfiguration.gridConfiguration, ...customConfiguration?.gridConfiguration };\n const effectiveDarkboxConfig = { ...this.defaultConfiguration.darkboxConfiguration, ...customConfiguration?.darkboxConfiguration };\n return {\n gridConfiguration: effectiveGridConfig,\n darkboxConfiguration: effectiveDarkboxConfig\n } as Configuration;\n }\n}\n","import { Injectable } from '@angular/core';\nimport { Configuration } from '../model/configuration';\nimport { LoopDirection } from '../model/darkbox-configuration';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class ImageIndexService {\n\n constructor() { }\n\n /**\n * Calculates the next valid image index based on the currentImageIndex and the images array\n * @param configuration currently used for the Darkbox instance\n * @param currentIndex of the image being displayed\n * @param totalImageCount number of total images provided to Darkbox\n * @param increase true if the index should be increased, false otherwise\n * @return the new index\n */\n public calculateValidImageIndex(configuration: Configuration, currentIndex: number, totalImageCount: number, increase: boolean): number {\n const loopDirection = configuration.darkboxConfiguration.loopDirection;\n const addend = increase ? 1 : -1;\n const targetIndex = currentIndex + addend;\n const maxImageIndex = totalImageCount - 1;\n\n if (targetIndex >= 0 && targetIndex <= maxImageIndex) {\n return targetIndex;\n }\n\n if (loopDirection !== LoopDirection.NONE) {\n if (targetIndex > maxImageIndex && (loopDirection === LoopDirection.FORWARD || loopDirection === LoopDirection.BOTH)) {\n return 0;\n }\n\n if (targetIndex < 0 && (loopDirection === LoopDirection.BACKWARD || loopDirection === LoopDirection.BOTH)) {\n // If we rollover to the back, make sure all images are displayed in the grid\n return maxImageIndex;\n }\n }\n return currentIndex;\n }\n}\n","import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';\nimport { Observable, Subscription } from 'rxjs';\nimport { Configuration } from './model/configuration';\nimport { LoopDirection } from './model/darkbox-configuration';\nimport { GridType } from './model/grid-configuration';\nimport { Image } from './model/image';\nimport { ConfigurationService } from './services/configuration.service';\nimport { ImageIndexService } from './services/image-index.service';\nimport { NgClass, NgStyle, SlicePipe } from '@angular/common';\nimport { LoadingPlaceholderComponent } from './components/loading/loading-placeholder/loading-placeholder.component';\nimport { DarkboxComponent } from './components/darkbox/darkbox.component';\n\n@Component({\n selector: 'darkbox-gallery',\n templateUrl: './ngx-darkbox-gallery.component.html',\n styleUrls: ['./ngx-darkbox-gallery.component.scss'],\n imports: [NgClass, NgStyle, LoadingPlaceholderComponent, DarkboxComponent, SlicePipe]\n})\nexport class NgxDarkboxGalleryComponent implements OnInit, OnChanges, OnDestroy {\n\n /**\n * List of images displayed in Darkbox\n */\n @Input()\n images: Image[] = [];\n imageCount: number;\n currentImageIndex: number;\n loadedThumbnails: Set\n ![\"{{image.altText}}\"](\"{{image.url}}\")
\n @if (darkboxConfiguration.enableCaption) {\n
\n @if (hasPrev) {\n \n }\n @if (hasNext) {\n \n }\n\n {{imageCaption}}\n
\n }\n \n @for (image of images | slice:0:imageCount; track image) {\n
\n\n @if (currentImageIndex != null) {\n \n \n ![\"{{image.altText}}\"](\"{{image.thumbnailUrl}}\")
\n \n @if (isLoadingPlaceholderEnabled() && !loadedThumbnails.has(image)) {\n \n \n }\n
\n }\n