@failed-successfully/ngx-darkbox-gallery

import * as i0 from '@angular/core'; import { OnInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges } from '@angular/core'; import { Observable } from 'rxjs'; declare class NgxDarkboxGalleryService { constructor(); static ɵfac: i0.ɵɵFactoryDeclaration<NgxDarkboxGalleryService, never>; static ɵprov: i0.ɵɵInjectableDeclaration<NgxDarkboxGalleryService>; } interface ColorConfiguration { /** * A string representing a css color definition such as #FF00FF or rgba(0, 0, 0, 0.8) * Used to define the background color of the specific object */ backgroundColor: string; /** * A string representing a css color definition such as #FF00FF or rgba(0, 0, 0, 0.8) * Used to define the foreground color, like text, of the specific object */ foregroundColor: string; } interface DarkboxConfiguration { /** * Sets the direction the darkbox will allow looping through the images * FORWARD: Only after the last image the first one will be displayed again * BACKWARD: Only before the first image the last one will be displayed again * BOTH: The first image will be displayed after the last one and vise versa * NONE: There is a fixed end in both directions */ loopDirection?: LoopDirection; /** * Sets if the caption should be displayed or not * true: Show the caption including the current position in the image set * false: Caption is not shown */ enableCaption?: boolean; /** * Separtor between the image number and the caption * Is only shown when the caption has text in it */ captionSeparator?: string; /** * The template string for the image caption * The following values will be replaced: * ${currentNumber} Number of the currently visible image within the gallery * ${totalNumber} Total number of images in the gallery * ${separator} Sepertor between the image number and the caption. Is only shown when the caption has text in it * ${caption} Caption of the selected image. Is only shown when the caption has text in it */ captionTemplate?: string; /** * Defines the colors to be used on the image caption */ captionColorConfiguration?: ColorConfiguration; /** * Loading animation shown while the full sized image is loading * DOT: A line of jumping dots moving in a wave like form * BAR: Three vertical bars getting wider and smaller * FLEX_RING: A ring flexing in and out * SPINNER: A classical spinner animation turning infinitely * SQUARE: A line of jumping squares moving in a wave like form */ loadingAnimation?: LoadingAnimation; /** * The button style to use for the close button * FAB: A round floating action button placed besides the image. Its position depends on the button it is set for * BAR: A vertical or horizontal bar surrounding the image depending on the button it is set for */ closeButtonStyle?: ButtonStyle; /** * Defines the colors to be used for the close button */ closeButtonColorConfiguration?: ColorConfiguration; /** * The button style to use for the previous and next buttons * FAB: A round floating action button placed besides the image. Its position depends on the button it is set for * BAR: A vertical or horizontal bar surrounding the image depending on the button it is set for */ prevNextButtonStyle?: ButtonStyle; /** * Defines the colors to be used for the prevoius and next buttons */ prevNextButtonColorConfiguration?: ColorConfiguration; } declare enum LoopDirection { FORWARD = "FORWARD", BACKWARD = "BACKWARD", BOTH = "BOTH", NONE = "NONE" } declare enum LoadingAnimation { DOT = "DOT", BAR = "BAR", FLEX_RING = "FLEX_RING", SPINNER = "SPINNER", SQUARE = "SQUARE" } declare enum ButtonStyle { FAB = "FAB", BAR = "BAR" } interface ResolutionConfiguration { /** * The minimum screen width this configuration applies to, up to the next higher resolution configuration */ pxWidth: number; /** * The batch size scaling factor to be applied in the given configuration range */ scalingFactor: number; } interface GridConfiguration { /** * Number of images loaded initially on small and medium sized devices (smartphone / tablet) * This is scaled by a factor according to the resolution of bigger displays */ initialBatchSize?: number; /** * The number of images loaded in each load more images call */ batchSize?: number; /** * A list of scaling factors to be used to scale the initial batch size by screen width */ batchSizeScalingFactors?: ResolutionConfiguration[]; /** * Sets the type of the image grid * STATIC: A grid of images rendered in rows of dynamic length, * preferrebly used for equal sized thumbnails (thumbnail size can be configured seperatly) * FLUID: A grid optimized for thumbnails with different aspect ratios and orientations, * rendered in columns (if selected thumbnailHeight and thumbnailWidth are only used for placeholders while loading) */ gridType?: GridType; /** * Allows for configuration of the flex property justifiy-content * All option of the css property justifiy-cotnent are allowed */ thumbnailAlignment?: string | null; /** * Enables / Disables zooming effect for thumbnail hovering */ zoomImages?: boolean; /** * Size used to define the height of the thumbnails and loading placeholders * For gridType FLUID this applies only to the loading placeholders * This should be defined like you would in css including the unit (e.g. px, em, rem) */ thumbnailHeight?: string | null; /** * Size used to define the width of the thumbnails and loading placeholders * For gridType FLUID this applies only to the loading placeholders * This should be defined like you would in css including the unit (e.g. px, em, rem) */ thumbnailWidth?: string | null; /** * Enables / Disables the shimmer placeholder while loading the thumbnail images */ enableLoadingPlaceholder?: boolean; /** * Configures the behavior of the loading placeholders for thumbnail images. * If true, the thumbnails of a batch are shown, when all thumbnails of the batch are loaded. * If false, the thumbnail for each image is shown as soon as it gets available. * * This only takes effect if loading placeholders are enabled. */ thumbnailsWaitForBatch?: boolean; } declare enum GridType { STATIC = "STATIC", FLUID = "FLUID" } interface Configuration { /** * Sets the look and features of the lighbox component of Darkbox */ darkboxConfiguration?: DarkboxConfiguration; /** * Sets the look and features of the thumbnail grid */ gridConfiguration?: GridConfiguration; } declare class Image { /** * An id to identify the image in events. This is not used by the library itself */ identifier?: string; /** * URL of the full sized image */ url: string; /** * URL of the thumbnail image */ thumbnailUrl: string; /** * A short caption that can be shown under the image in darkbox */ caption?: string; /** * The alternative text shown when the image can not be loaded */ altText?: string; } declare class ConfigurationService { private defaultConfiguration; constructor(); getEffectiveConfiguration(customConfiguration: Configuration): Configuration; static ɵfac: i0.ɵɵFactoryDeclaration<ConfigurationService, never>; static ɵprov: i0.ɵɵInjectableDeclaration<ConfigurationService>; } declare 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: Configuration, currentIndex: number, totalImageCount: number, increase: boolean): number; static ɵfac: i0.ɵɵFactoryDeclaration<ImageIndexService, never>; static ɵprov: i0.ɵɵInjectableDeclaration<ImageIndexService>; } declare class NgxDarkboxGalleryComponent implements OnInit, OnChanges, OnDestroy { private configurationService; private imageIndexService; /** * List of images displayed in Darkbox */ images: Image[]; imageCount: number; currentImageIndex: number; loadedThumbnails: Set<Image>; batchLoadedThumbnails: Set<Image>; configuration: Configuration; effectiveConfiguration: Configuration; private eventsSubscription; /** * Input to handle click events from the outside world */ loadMoreImagesEvents: Observable<void>; /** * Signals that a single image was clicked * The clicked images is being emitted */ imageClicked: EventEmitter<Image>; /** * Signals that a single thumbnail was loaded * The image containing the thumbnail is being emitted */ thumbnailLoaded: EventEmitter<Image>; /** * Signals that all thumbnails currently displayed have bean loaded */ allThumbnailsLoaded: EventEmitter<boolean>; /** * Signals that all images provided from the input are displayed in the DOM * This does not mean that all thumbnails/images are completely loaded */ allImagesInDom: EventEmitter<boolean>; /** * Signals that the lightbox/Darkbox was closed by the user */ darkboxClosed: EventEmitter<boolean>; /** * Signals that the user clicked the next image button */ darkboxNext: EventEmitter<boolean>; /** * Signals that the user clicked the previous image button */ darkboxPrev: EventEmitter<boolean>; /** * Signals that the full sized images was loaded * The loaded images is being emitted */ darkboxImageLoaded: EventEmitter<Image>; constructor(configurationService: ConfigurationService, imageIndexService: ImageIndexService); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; private initializeConfiguration; private subscribeToOutsideClickEvents; onImageClicked(image: Image): void; onDarkboxClose(): void; onDarkboxNextImage(): void; onDarkboxPrevImage(): void; onDarkboxImageLoaded(image: Image): void; /** * Event emitter signaling that one image is loaded * Additionally signals that all images of one batch are loaded */ onThumbnailLoaded(image: Image): void; isNextImageAvailable(): boolean; isPrevImageAvailable(): boolean; /** * 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 */ private calculateValidImageIndex; /** * Increase the imageCount and thereby increase the number of displayed thumbnails/images * @param showAllImages If true all thumbnails/images are displayed */ private showMoreImages; /** * Calculates the correct initial number of images based on the screen resolution */ private scaleInitialBatchSize; /** * 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(): string; /** * Returns the configuration parameter for content justification in the main image grid * @returns a string for the justifiy-content css property */ getContentJustification(): string | null; /** * @param isPlaceholder whether the size is calculated for a placeholder or not * @returns the thumbnail height from the configuration */ getThumbnailHeight(isPlaceholder?: boolean): string | null; /** * @param isPlaceholder whether the size is calculated for a placeholder or not * @returns the thumbnail width from the configuration */ getThumbnailWidth(isPlaceholder?: boolean): string | null; isLoadingPlaceholderEnabled(): boolean; static ɵfac: i0.ɵɵFactoryDeclaration<NgxDarkboxGalleryComponent, never>; static ɵcmp: i0.ɵɵComponentDeclaration<NgxDarkboxGalleryComponent, "darkbox-gallery", never, { "images": { "alias": "images"; "required": false; }; "configuration": { "alias": "configuration"; "required": false; }; "loadMoreImagesEvents": { "alias": "loadMoreImagesEvents"; "required": false; }; }, { "imageClicked": "imageClicked"; "thumbnailLoaded": "thumbnailLoaded"; "allThumbnailsLoaded": "allThumbnailsLoaded"; "allImagesInDom": "allImagesInDom"; "darkboxClosed": "darkboxClosed"; "darkboxNext": "darkboxNext"; "darkboxPrev": "darkboxPrev"; "darkboxImageLoaded": "darkboxImageLoaded"; }, never, never, true, never>; } export { ButtonStyle, GridType, Image, LoadingAnimation, LoopDirection, NgxDarkboxGalleryComponent, NgxDarkboxGalleryService }; export type { ColorConfiguration, Configuration, DarkboxConfiguration, GridConfiguration, ResolutionConfiguration };