@ks89/angular-modal-gallery 13.0.0 → 15.0.0-alpha.1

package/index.d.ts

@@ -1,5 +1,2477 @@
+import * as _angular_core from '@angular/core';
+import { OnInit, OnChanges, SimpleChanges, AfterContentInit, OnDestroy, NgZone, ChangeDetectorRef, OutputEmitterRef, TemplateRef, EventEmitter } from '@angular/core';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/cdk/overlay';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { SafeResourceUrl, SafeStyle } from '@angular/platform-browser';
+import * as rxjs from 'rxjs';
+
 /**
- * Generated bundle index. Do not edit.
+ * Interface `Accessibility` to config titles, alt texts, aria labels and so on
  */
-/// <amd-module name="@ks89/angular-modal-gallery" />
-export * from './public-api';
+interface AccessibilityConfig {
+    backgroundAriaLabel: string;
+    backgroundTitle: string;
+    plainGalleryContentAriaLabel: string;
+    plainGalleryContentTitle: string;
+    modalGalleryContentAriaLabel: string;
+    modalGalleryContentTitle: string;
+    loadingSpinnerAriaLabel: string;
+    loadingSpinnerTitle: string;
+    mainContainerAriaLabel: string;
+    mainContainerTitle: string;
+    mainPrevImageAriaLabel: string;
+    mainPrevImageTitle: string;
+    mainNextImageAriaLabel: string;
+    mainNextImageTitle: string;
+    dotsContainerAriaLabel: string;
+    dotsContainerTitle: string;
+    dotAriaLabel: string;
+    previewsContainerAriaLabel: string;
+    previewsContainerTitle: string;
+    previewScrollPrevAriaLabel: string;
+    previewScrollPrevTitle: string;
+    previewScrollNextAriaLabel: string;
+    previewScrollNextTitle: string;
+    carouselContainerAriaLabel: string;
+    carouselContainerTitle: string;
+    carouselPrevImageAriaLabel: string;
+    carouselPrevImageTitle: string;
+    carouselNextImageAriaLabel: string;
+    carouselNextImageTitle: string;
+    carouselPreviewsContainerAriaLabel: string;
+    carouselPreviewsContainerTitle: string;
+    carouselPreviewScrollPrevAriaLabel: string;
+    carouselPreviewScrollPrevTitle: string;
+    carouselPreviewScrollNextAriaLabel: string;
+    carouselPreviewScrollNextTitle: string;
+}
+
+/**
+ * Enum `Action` with a list of possible actions, based on the source of the action.
+ */
+declare enum Action {
+    NORMAL = 0,// default value
+    CLICK = 1,// mouse click
+    KEYBOARD = 2,
+    SWIPE = 3,
+    LOAD = 4,
+    AUTOPLAY = 5
+}
+
+/**
+ * Interface `Size` to configure the size based on width and height.
+ * They can be pixels, percentages or also 'auto'.
+ */
+interface Size {
+    width?: string;
+    height?: string;
+}
+
+/**
+ * Class `Image` that represents an image with both `modal` and `plain` configurations.
+ * Both image `id` and `modal` are mandatory, instead `plain` is optional.
+ */
+declare class Image {
+    id: number;
+    loading: 'eager' | 'lazy';
+    fetchpriority: 'high' | 'low' | 'auto';
+    modal: ModalImage;
+    plain?: PlainImage;
+    constructor(id: number, modal: ModalImage, plain?: PlainImage, loading?: 'eager' | 'lazy', fetchpriority?: 'high' | 'low' | 'auto');
+}
+/**
+ * Interface `ImageData` to configure an image, but it isn't used directly.
+ * Please, refers to `PlainImage` or `ModalImage`.
+ */
+interface ImageData {
+    img: string | SafeResourceUrl;
+    description?: string;
+    title?: string;
+    alt?: string;
+    ariaLabel?: string;
+    fallbackImg?: string | SafeResourceUrl;
+}
+/**
+ * Interface `ModalImage` to configure the modal image.
+ */
+interface ModalImage extends ImageData {
+    extUrl?: string;
+    downloadFileName?: string;
+    sources?: Source[];
+}
+/**
+ * Interface `PlainImage` to configure the plain image.
+ */
+interface PlainImage extends ImageData {
+    size?: Size;
+}
+/**
+ * Class `ImageEvent` that represents the event payload with the result and the triggered action.
+ * It also contains the source id of the gallery that emitted this event
+ */
+declare class ImageEvent {
+    galleryId: number;
+    action: Action;
+    result: number | boolean;
+    constructor(galleryId: number, action: Action, result: number | boolean);
+}
+/**
+ * Class `ImageModalEvent` that represents the event payload with galleryId, result and the triggered action.
+ */
+declare class ImageModalEvent extends ImageEvent {
+    constructor(galleryId: number, action: Action, result: number | boolean);
+}
+/**
+ * Interface `Source` to configure sources of picture element.
+ */
+interface Source {
+    srcset: string;
+    media: string;
+}
+
+/**
+ * Interface `PlainGalleryConfig` to configure plain-gallery features.
+ */
+interface PlainGalleryConfig {
+    strategy: PlainGalleryStrategy;
+    layout: PlainGalleryLayout;
+    advanced?: AdvancedConfig;
+}
+/**
+ * Interface `PlainGalleryLayout` to configure the layout. This interface isn't used directly, instead
+ * refers to either `LineLayout`, `GridLayout`.
+ */
+interface PlainGalleryLayout {
+}
+/**
+ * Class `LineLayout` to configure a linear plain gallery.
+ */
+declare class LineLayout implements PlainGalleryLayout {
+    breakConfig: BreakConfig;
+    justify: string;
+    size: Size;
+    constructor(size: Size, breakConfig: BreakConfig, justify: string);
+}
+/**
+ * Class `GridLayout` to configure a grid plain gallery.
+ */
+declare class GridLayout implements PlainGalleryLayout {
+    breakConfig: BreakConfig;
+    size: Size;
+    constructor(size: Size, breakConfig: BreakConfig);
+}
+/**
+ * Enum `PlainGalleryStrategy` to choose the behaviour of the plain gallery.
+ */
+declare enum PlainGalleryStrategy {
+    ROW = 1,
+    COLUMN = 2,
+    GRID = 3,
+    CUSTOM = 4
+}
+/**
+ * Interface `BreakConfig` to limit the number of items of the plain gallery or to force it to fill other lines.
+ */
+interface BreakConfig {
+    length: number;
+    wrap: boolean;
+}
+/**
+ * Interface `AdvancedConfig` to use `<a>` tags instead of `<img>`.
+ * It also contains a string property to customize the css background property.
+ * For more info check here https://www.w3schools.com/cssref/css3_pr_background.asp
+ */
+interface AdvancedConfig {
+    aTags: boolean;
+    additionalBackground: string;
+}
+
+/**
+ * Provides some useful methods to add accessibility features to subclasses.
+ * In particular, it exposes a method to handle navigation event with both Keyboard and Mouse
+ * and another with also the direction (right or left).
+ */
+declare class AccessibleComponent {
+    /**
+     * Method to handle navigation events with both Keyboard and Mouse.
+     * @param direction string of the navigation that can be either 'next' or 'prev'
+     * @param event KeyboardEvent | MouseEvent payload
+     * @returns number -1 for PREV, 1 for NEXT and 0 for NOTHING
+     */
+    handleNavigationEvent(direction: string, event: KeyboardEvent | MouseEvent): number;
+    /**
+     * Method to handle events over an image, for instance a keypress with the Keyboard or a Mouse click.
+     * @param event KeyboardEvent | MouseEvent payload
+     * @returns number 1 for NEXT and 0 for NOTHING
+     */
+    handleImageEvent(event: KeyboardEvent | MouseEvent): number;
+    /**
+     * Private method to handle keyboard events over an image.
+     * @param event KeyboardEvent payload
+     * @returns number 1 for NEXT and 0 for NOTHING
+     */
+    private handleImageKeyboardEvent;
+    /**
+     * Private method to handle mouse events over an image.
+     * @param event MouseEvent payload
+     * @returns number 1 for NEXT and 0 for NOTHING
+     */
+    private handleImageMouseEvent;
+    /**
+     * Method to handle events over an image, for instance a keypress with the Keyboard or a Mouse click.
+     * @param direction string of the navigation that can be either 'next' or 'prev'
+     * @param event KeyboardEvent payload
+     * @returns number -1 for PREV, 1 for NEXT and 0 for NOTHING
+     */
+    private handleKeyboardNavigationEvent;
+    /**
+     * Method to handle events over an image, for instance a keypress with the Keyboard or a Mouse click.
+     * @param direction string of the navigation that can be either 'next' or 'prev'
+     * @param event MouseEvent payload
+     * @returns number -1 for PREV, 1 for NEXT and 0 for NOTHING
+     */
+    private handleMouseNavigationEvent;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccessibleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccessibleComponent, "ks-accessible", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Interface `PlayConfig` to change the behaviour about auto-navigation for both modal gallery and carousel.
+ */
+interface PlayConfig {
+    autoPlay: boolean;
+    interval: number;
+    pauseOnHover: boolean;
+}
+
+/**
+ * Interface `SlideConfig` to configure sliding features of modal gallery.
+ */
+interface SlideConfig {
+    infinite?: boolean;
+    playConfig?: PlayConfig;
+    sidePreviews?: SidePreviewsConfig;
+}
+/**
+ * Interface `SidePreviewsConfig` to configure sliding features of previews in modal gallery.
+ */
+interface SidePreviewsConfig {
+    show: boolean;
+    size: Size;
+}
+
+/**
+ * Interface `PreviewConfig` to configure previews in modal gallery.
+ */
+interface PreviewConfig {
+    visible: boolean;
+    mobileVisible?: boolean;
+    number?: number;
+    arrows?: boolean;
+    clickable?: boolean;
+    size?: Size;
+}
+
+/**
+ * Internal representation of an image adding other fields
+ * to the public `Image` class.
+ */
+declare class InternalLibImage extends Image {
+    previouslyLoaded: boolean;
+    constructor(id: number, modal: ModalImage, plain?: PlainImage, previouslyLoaded?: boolean);
+}
+
+/**
+ * Interface `ButtonsConfig` to add buttons, show/hide their, and to add the strategy.
+ */
+interface ButtonsConfig {
+    visible: boolean;
+    strategy: ButtonsStrategy;
+    buttons?: ButtonConfig[];
+}
+/**
+ * Interface `ButtonConfig` to configure a single button.
+ */
+interface ButtonConfig {
+    className?: string;
+    size?: Size;
+    fontSize?: string;
+    type: ButtonType;
+    title?: string;
+    ariaLabel?: string;
+    extUrlInNewTab?: boolean;
+}
+/**
+ * Interface `ButtonEvent` to represent the event payload when a button is clicked.
+ */
+interface ButtonEvent {
+    button: ButtonConfig;
+    image: InternalLibImage | null;
+    action: Action;
+    galleryId: number;
+}
+/**
+ * Enum `ButtonsStrategy` to configure the logic of a button.
+ */
+declare enum ButtonsStrategy {
+    DEFAULT = 1,
+    SIMPLE = 2,
+    ADVANCED = 3,
+    FULL = 4,
+    CUSTOM = 5
+}
+/**
+ * Enum `ButtonType` is the type of a button.
+ */
+declare enum ButtonType {
+    DELETE = 1,
+    EXTURL = 2,
+    DOWNLOAD = 3,
+    CLOSE = 4,
+    CUSTOM = 5,
+    FULLSCREEN = 6
+}
+
+/**
+ * Interface `DotsConfig` to show/hide dots.
+ */
+interface DotsConfig {
+    visible: boolean;
+}
+
+/**
+ * Interface `LoadingConfig` to configure loading icon.
+ */
+interface LoadingConfig {
+    enable: boolean;
+    type: LoadingType;
+}
+/**
+ * Enum `LoadingType` with a list of possible types.
+ */
+declare enum LoadingType {
+    STANDARD = 1,
+    CIRCULAR = 2,
+    BARS = 3,
+    DOTS = 4,
+    CUBE_FLIPPING = 5,
+    CIRCLES = 6,
+    EXPLOSING_SQUARES = 7
+}
+
+/**
+ * Interface `Description` to change the description, either with a full custom
+ * description or with a small and simple customization.
+ * Also, you could change margins, background style and so on.
+ */
+interface Description {
+    strategy: DescriptionStrategy;
+    customFullDescription?: string;
+    imageText?: string;
+    numberSeparator?: string;
+    beforeTextDescription?: string;
+    style?: DescriptionStyle;
+}
+/**
+ * Enum `DescriptionStrategy` with keys and their relative key codes.
+ */
+declare enum DescriptionStrategy {
+    ALWAYS_HIDDEN = 1,
+    ALWAYS_VISIBLE = 2,
+    HIDE_IF_EMPTY = 3
+}
+/**
+ * Interface to change css properties.
+ */
+interface DescriptionStyle {
+    bgColor?: string;
+    textColor?: string;
+    width?: string;
+    height?: string;
+    position?: string;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    marginTop?: string;
+    marginBottom?: string;
+    marginRight?: string;
+    marginLeft?: string;
+}
+
+/**
+ * Interface `CurrentImageConfig` to change current image behaviour in modal-gallery.
+ */
+interface CurrentImageConfig {
+    navigateOnClick?: boolean;
+    downloadable?: boolean;
+    loadingConfig?: LoadingConfig;
+    description?: Description;
+    invertSwipe?: boolean;
+}
+
+/**
+ * Interface `KeyboardConfig` to assign custom codes to ESC, RIGHT and LEFT keyboard's actions.
+ */
+interface KeyboardConfig {
+    esc?: string;
+    right?: string;
+    left?: string;
+}
+
+/**
+ * Interface `CarouselConfig` to change the style of the carousel and some additional features.
+ */
+interface CarouselConfig {
+    maxWidth: string;
+    maxHeight: string;
+    showArrows: boolean;
+    objectFit: string;
+    keyboardEnable: boolean;
+    modalGalleryEnable: boolean;
+}
+
+/**
+ * Interface `CarouselImageConfig` to change current image behaviour in carousel.
+ */
+interface CarouselImageConfig {
+    description?: Description;
+    invertSwipe?: boolean;
+}
+
+/**
+ * Interface `BreakpointsConfig` to configure responsive breakpoints as numbers to express pixels
+ */
+interface BreakpointsConfig {
+    xSmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xLarge: number;
+}
+/**
+ * Interface `CarouselPreviewConfig` to configure carousel's previews
+ */
+interface CarouselPreviewConfig {
+    visible: boolean;
+    number?: number;
+    arrows?: boolean;
+    clickable?: boolean;
+    width?: string;
+    maxHeight?: string;
+    breakpoints?: BreakpointsConfig;
+}
+
+interface AccessibleLibConfig {
+    accessibilityConfig?: AccessibilityConfig;
+}
+interface CommonLibConfig {
+    previewConfig?: PreviewConfig;
+    dotsConfig?: DotsConfig;
+    slideConfig?: SlideConfig;
+}
+interface CarouselLibConfig extends CommonLibConfig, AccessibleLibConfig {
+    carouselConfig?: CarouselConfig;
+    carouselImageConfig?: CarouselImageConfig;
+    carouselPreviewsConfig?: CarouselPreviewConfig;
+    carouselPlayConfig?: PlayConfig;
+    carouselDotsConfig?: DotsConfig;
+    carouselSlideInfinite?: boolean;
+}
+interface ModalLibConfig extends CommonLibConfig, AccessibleLibConfig {
+    enableCloseOutside?: boolean;
+    keyboardConfig?: KeyboardConfig;
+    currentImageConfig?: CurrentImageConfig;
+    buttonsConfig?: ButtonsConfig;
+}
+interface PlainLibConfig extends AccessibleLibConfig {
+    plainGalleryConfig?: PlainGalleryConfig;
+}
+interface LibConfig extends ModalLibConfig, PlainLibConfig, CarouselLibConfig {
+}
+type DeepRequired<T> = {
+    [K in keyof T]: DeepRequired<T[K]>;
+} & Required<T>;
+interface LibConfigInternal extends DeepRequired<ModalLibConfig>, DeepRequired<PlainLibConfig>, DeepRequired<CarouselLibConfig> {
+}
+
+/**
+ * Component with the gallery of thumbs.
+ * In receives an array of Images, a boolean to show/hide
+ * the gallery (feature used by imagePointer) and a config
+ * object to customize the behaviour of this component.
+ * Also, it emits click events as outputs.
+ */
+declare class PlainGalleryComponent extends AccessibleComponent implements OnInit, OnChanges {
+    /**
+     * Unique id (>=0) of the current instance of this library. This is required when you are using
+     * the service to call modal gallery.
+     */
+    readonly id: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Array of `Image` that represent the model of this library with all images, thumbs and so on.
+     */
+    readonly images: _angular_core.InputSignal<Image[]>;
+    /**
+     * PlainLibConfig object to configure plain-gallery.
+     */
+    readonly config: _angular_core.InputSignal<PlainLibConfig | undefined>;
+    /**
+     * Output to emit an event when an image is clicked.
+     */
+    readonly clickImage: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Object of type `PlainGalleryConfig` to configure the plain gallery.
+     */
+    plainGalleryConfig: PlainGalleryConfig | undefined;
+    /**
+     * Object of type `AccessibilityConfig` to init custom accessibility features.
+     * For instance, it contains titles, alt texts, aria-labels and so on.
+     */
+    accessibilityConfig: AccessibilityConfig | undefined;
+    /**
+     * Bi-dimensional array of `Image` object to store images to display as plain gallery.
+     * [] by default.
+     */
+    imageGrid: Image[][];
+    /**
+     * Size object used in the template to resize images.
+     */
+    size: Size | undefined;
+    /**
+     * Boolean passed as input to `ks-wrap` directive to configure flex-wrap css property.
+     * However, it's not enough, because you need to limit the width using `widthStyle` public variable.
+     * For more info check https://developer.mozilla.org/it/docs/Web/CSS/flex-wrap
+     */
+    wrapStyle: boolean;
+    /**
+     * String passed as input to `ks-wrap` directive to set width to be able to force overflow.
+     * In this way, `wrapStyle` (flex-wrap css property) will be used as requested.
+     */
+    widthStyle: string;
+    /**
+     * String passed as input to `ks-direction` directive to set the flex-direction css property.
+     * For more info check https://developer.mozilla.org/it/docs/Web/CSS/flex-direction
+     */
+    directionStyle: string | undefined;
+    /**
+     * String passed as input to `ks-direction` directive to set the justify-content css property.
+     * For more info check https://developer.mozilla.org/it/docs/Web/CSS/justify-content
+     */
+    justifyStyle: string | undefined;
+    private configService;
+    /**
+     * Method ´ngOnInit´ to init both `configPlainGallery` calling `initPlainGalleryConfig()`
+     * and `imageGrid invoking `initImageGrid()`.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method ´ngOnChanges´ to update both `imageGrid` and`plainGalleryConfig`.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Method called when you click on an image of the plain (or inline) gallery.
+     * This will emit the show event with the image as payload.
+     * @param img is the Image to show
+     */
+    showModalGalleryByImage(img: Image): void;
+    /**
+     * Method called when you navigate between images.
+     * This will emit the show event with the image as payload.
+     * @param event KeyboardEvent that triggered the navigation
+     * @param img is the Image to show
+     */
+    onNavigationEvent(event: KeyboardEvent, img: Image): void;
+    /**
+     * Method to get `alt attribute`.
+     * `alt` specifies an alternate text for an image, if the image cannot be displayed.
+     * @param image to get its alt description.
+     * @returns string alt description of the image
+     */
+    getAltPlainDescriptionByImage(image: Image): string;
+    /**
+     * Method to get the title for an image.
+     * @param image to get its title
+     * @returns string the title of the input image
+     */
+    getTitleDisplay(image: Image): string;
+    /**
+     * Method called when you click on an image of the plain (or inline) gallery.
+     * This will emit the show event with the index number as payload.
+     * @param index number of the clicked image
+     */
+    private showModalGallery;
+    /**
+     * Private method to init both `imageGrid` and other style variables,
+     * based on the layout type.
+     */
+    private initImageGrid;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PlainGalleryComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PlainGalleryComponent, "ks-plain-gallery", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "images": { "alias": "images"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, { "clickImage": "clickImage"; }, never, never, true, never>;
+}
+
+/**
+ * Service to handle library configuration in a unique place
+ */
+declare class ConfigService {
+    configMap: Map<number, LibConfigInternal>;
+    getConfig(id: number): LibConfig | undefined;
+    setConfig(id: number, obj: LibConfig | undefined): void;
+    private initIfNotExists;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfigService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ConfigService>;
+}
+
+/**
+ * Component with configurable inline/plain carousel.
+ */
+declare class CarouselComponent extends AccessibleComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
+    private ngZone;
+    private configService;
+    private ref;
+    /**
+     * Attribute to set ariaLabel of the host component
+     */
+    ariaLabel: string;
+    /**
+     * Unique id (>=0) of the current instance of the carousel. This is useful when you are using
+     * the carousel's feature to open modal gallery.
+     */
+    readonly id: _angular_core.InputSignal<number>;
+    /**
+     * Array of `InternalLibImage` that represent the model of this library with all images,
+     * thumbs and so on.
+     */
+    readonly images: _angular_core.InputSignal<Image[]>;
+    /**
+     * CarouselLibConfig object to configure carousel.
+     */
+    readonly config: _angular_core.InputSignal<CarouselLibConfig | undefined>;
+    /**
+     * Output to emit an event when an image is clicked.
+     */
+    readonly clickImage: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Output to emit an event when current image is changed.
+     */
+    readonly changeImage: _angular_core.OutputEmitterRef<ImageEvent>;
+    /**
+     * Output to emit an event when the current image is the first one.
+     */
+    readonly firstImage: _angular_core.OutputEmitterRef<ImageEvent>;
+    /**
+     * Output to emit an event when the current image is the last one.
+     */
+    readonly lastImage: _angular_core.OutputEmitterRef<ImageEvent>;
+    /**
+     * Object of type `CarouselConfig` to init CarouselComponent's features.
+     * For instance, it contains parameters to change the style, how it navigates and so on.
+     */
+    carouselConfig: CarouselConfig | undefined;
+    /**
+     * Object of type `DotsConfig` to init DotsComponent's features.
+     * For instance, it contains a param to show/hide this component.
+     */
+    carouselDotsConfig: DotsConfig | undefined;
+    /**
+     * Object of type `AccessibilityConfig` to init custom accessibility features.
+     * For instance, it contains titles, alt texts, aria-labels and so on.
+     */
+    accessibilityConfig: AccessibilityConfig | undefined;
+    /**
+     * Object of type `CarouselImageConfig` to configure the current image of the carousel.
+     */
+    carouselImageConfig: CarouselImageConfig | undefined;
+    /**
+     * Enable/disable infinite sliding.
+     */
+    carouselSlideInfinite: boolean | undefined;
+    /**
+     * Enum of type `Action` that represents a mouse click on a button.
+     * Declared here to be used inside the template.
+     */
+    clickAction: Action;
+    /**
+     * Enum of type `Action` that represents a keyboard action.
+     * Declared here to be used inside the template.
+     */
+    keyboardAction: Action;
+    /**
+     * `Image` that is visible right now.
+     */
+    currentImage: InternalLibImage | undefined;
+    /**
+     * Boolean that it's true when you are watching the first image (currently visible).
+     * False by default
+     */
+    isFirstImage: boolean;
+    /**
+     * Boolean that it's true when you are watching the last image (currently visible).
+     * False by default
+     */
+    isLastImage: boolean;
+    /**
+     * Subject to play the carousel.
+     */
+    private start$;
+    /**
+     * Subject to stop the carousel.
+     */
+    private stop$;
+    private readonly platformId;
+    /**
+     * Listener to stop the gallery when the mouse pointer is over the current image.
+     */
+    onMouseEnter(): void;
+    /**
+     * Listener to play the gallery when the mouse pointer leave the current image.
+     */
+    onMouseLeave(): void;
+    /**
+     * Listener to navigate carousel images with keyboard (left).
+     */
+    onKeyDownLeft(): void;
+    /**
+     * Listener to navigate carousel images with keyboard (right).
+     */
+    onKeyDownLRight(): void;
+    constructor(ngZone: NgZone, configService: ConfigService, ref: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterContentInit(): void;
+    /**
+     * Method called when a dot is clicked and used to update the current image.
+     * @param index number of the clicked dot
+     */
+    onClickDot(index: number): void;
+    /**
+     * Method called by events from both keyboard and mouse on a navigation arrow.
+     * @param direction string of the navigation that can be either 'next' or 'prev'
+     * @param event KeyboardEvent | MouseEvent payload
+     * @param action Action that triggered the event or `Action.NORMAL` if not provided
+     */
+    onNavigationEvent(direction: string, event: KeyboardEvent | MouseEvent, action?: Action): void;
+    /**
+     * Method triggered when you click on the current image.
+     * Also, if modalGalleryEnable is true, you can open the modal-gallery.
+     */
+    onClickCurrentImage(): void;
+    /**
+     * Method to get the image description based on input params.
+     * If you provide a full description this will be the visible description, otherwise,
+     * it will be built using the `Description` object, concatenating its fields.
+     * @param image Image to get its description. If not provided it will be the current image
+     * @returns String description of the image (or the current image if not provided)
+     * @throws an Error if description isn't available
+     */
+    getDescriptionToDisplay(image?: Image | undefined): string;
+    /**
+     * Method used by SwipeDirective to support touch gestures (you can also invert the swipe direction with configCurrentImage.invertSwipe).
+     * @param action String that represent the direction of the swipe action. 'swiperight' by default.
+     */
+    swipe(action?: string): void;
+    /**
+     * Method to go back to the previous image.
+     * @param action Enum of type `Action` that represents the source
+     *  action that moved back to the previous image. `Action.NORMAL` by default.
+     */
+    prevImage(action?: Action): void;
+    /**
+     * Method to go back to the previous image.
+     * @param action Enum of type `Action` that represents the source
+     *  action that moved to the next image. `Action.NORMAL` by default.
+     */
+    nextImage(action?: Action): void;
+    /**
+     * Method called when an image preview is clicked and used to update the current image.
+     * @param event an ImageEvent object with the relative action and the index of the clicked preview.
+     */
+    onClickPreview(event: ImageEvent): void;
+    /**
+     * Method to play carousel.
+     */
+    playCarousel(): void;
+    /**
+     * Stops the carousel from cycling through items.
+     */
+    stopCarousel(): void;
+    /**
+     * Method to get `alt attribute`.
+     * `alt` specifies an alternate text for an image, if the image cannot be displayed.
+     * @param image Image to get its alt description. If not provided it will be the current image
+     * @returns String alt description of the image (or the current image if not provided)
+     */
+    getAltDescriptionByImage(image?: Image | undefined): string;
+    /**
+     * Method to get the title attributes based on descriptions.
+     * This is useful to prevent accessibility issues, because if DescriptionStrategy is ALWAYS_HIDDEN,
+     * it prevents an empty string as title.
+     * @param image Image to get its description. If not provided it will be the current image
+     * @returns String title of the image based on descriptions
+     * @throws an Error if description isn't available
+     */
+    getTitleToDisplay(image?: Image | undefined): string;
+    /**
+     * Method to reset carousel (force image with index 0 to be the current image and re-init also previews)
+     */
+    /**
+     * Method to clean up resources. In fact, this will stop the carousel.
+     * This is an angular lifecycle hook that is called when this component is destroyed.
+     */
+    ngOnDestroy(): void;
+    /**
+     * Method to change the current image, receiving the new image as input the relative action.
+     * @param image an Image object that represents the new image to set as current.
+     * @param action Enum of type `Action` that represents the source action that triggered the change.
+     */
+    private changeCurrentImage;
+    /**
+     * Private method to get the next index.
+     * This is necessary because at the end, when you call next again, you'll go to the first image.
+     * That happens because all modal images are shown like in a circle.
+     */
+    private getNextImage;
+    /**
+     * Private method to get the previous index.
+     * This is necessary because at index 0, when you call prev again, you'll go to the last image.
+     * That happens because all modal images are shown like in a circle.
+     */
+    private getPrevImage;
+    /**
+     * Private method to build a text description.
+     * This is used also to create titles.
+     * @param image Image to get its description. If not provided it will be the current image.
+     * @param imageWithoutDescription boolean is a boolean that it's true if the image hasn't a 'modal' description.
+     * @returns String description built concatenating image fields with a specific logic.
+     */
+    private buildTextDescription;
+    /**
+     * Private method to update both `isFirstImage` and `isLastImage` based on
+     * the index of the current image.
+     * @param currentIndex number is the index of the current image
+     */
+    private handleBoundaries;
+    /**
+     * Private method to manage boundary arrows and sliding.
+     * This is based on the slideConfig input to enable/disable 'infinite sliding'.
+     */
+    private manageSlideConfig;
+    /**
+     * Private method to emit events when either the last or the first image are visible.
+     * @param action Enum of type Action that represents the source of the event that changed the
+     *  current image to the first one or the last one.
+     * @param indexToCheck is the index number of the image (the first or the last one).
+     */
+    private emitBoundaryEvent;
+    /**
+     * Private method to check if next/prev actions should be blocked.
+     * It checks if carouselSlideInfinite === false and if the image index is equals to the input parameter.
+     * If yes, it returns true to say that sliding should be blocked, otherwise not.
+     * @param boundaryIndex number that could be either the beginning index (0) or the last index
+     *  of images (this.images.length - 1).
+     * @returns boolean true if carouselSlideInfinite === false and the current index is
+     *  either the first or the last one.
+     */
+    private isPreventSliding;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselComponent, "ks-carousel", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "images": { "alias": "images"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, { "clickImage": "clickImage"; "changeImage": "changeImage"; "firstImage": "firstImage"; "lastImage": "lastImage"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Component with image previews for carousel
+ */
+declare class CarouselPreviewsComponent extends AccessibleComponent implements OnInit, OnChanges, OnDestroy {
+    /**
+     * Variable to change the max-width of the host component
+     */
+    hostMaxWidth: string;
+    /**
+     * Variable to set aria-label of the host component
+     */
+    ariaLabel: string;
+    /**
+     * Unique id (>=0) of the current instance of the carousel. This is useful when you are using
+     * the carousel's feature to open modal gallery.
+     */
+    readonly id: _angular_core.InputSignal<number>;
+    /**
+     * Object of type `Image` that represent the visible image.
+     */
+    readonly currentImage: _angular_core.InputSignal<InternalLibImage>;
+    /**
+     * Array of `Image` that represent the model of this library with all images,
+     * thumbs and so on.
+     */
+    readonly images: _angular_core.InputSignal<Image[]>;
+    /**
+     * Output to emit the clicked preview. The payload contains the `Image` associated to the clicked preview.
+     */
+    readonly clickPreview: _angular_core.OutputEmitterRef<ImageEvent>;
+    /**
+     * Object of type `CarouselConfig` to init CarouselComponent's features.
+     * For instance, it contains parameters to change the style, how it navigates and so on.
+     */
+    carouselConfig: CarouselConfig | undefined;
+    /**
+     * Object of type `CarouselPreviewConfig` to init PreviewsComponent's features.
+     * For instance, it contains a param to show/hide this component, sizes.
+     */
+    previewConfig: CarouselPreviewConfig | undefined;
+    /**
+     * Object of type `AccessibilityConfig` to init custom accessibility features.
+     * For instance, it contains titles, alt texts, aria-labels and so on.
+     */
+    accessibilityConfig: AccessibilityConfig | undefined;
+    /**
+     * Enum of type `Action` that represents a mouse click on a button.
+     * Declared here to be used inside the template.
+     */
+    clickAction: Action;
+    /**
+     * Enum of type `Action` that represents a keyboard action.
+     * Declared here to be used inside the template.
+     */
+    keyboardAction: Action;
+    /**
+     * Array of `Image` exposed to the template. This field is initialized
+     * applying transformations, default values and so on to the input of the same type.
+     */
+    previews: Image[];
+    /**
+     * Variable with the preview's maxHeight
+     */
+    previewMaxHeight: string;
+    /**
+     * Start index (inclusive) of the input images used to display previews.
+     */
+    start: number;
+    /**
+     * End index (non-inclusive) of the input images used to display previews.
+     */
+    end: number;
+    private readonly breakpointSubscription;
+    private ref;
+    private breakpointObserver;
+    private sanitizer;
+    private configService;
+    constructor();
+    /**
+     * Method to update the height of previews, passing the desired height as input.
+     * @param configBreakpointHeight is a number that represent the desired height to set.
+     */
+    private updateHeight;
+    /**
+     * Method ´ngOnInit´ to build `configPreview` applying a default value and also to
+     * init the `previews` array.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method to check if an image is active (i.e. a preview image).
+     * @param preview Image is an image to check if it's active or not
+     * @returns boolean true if is active, false otherwise
+     */
+    isActive(preview: Image): boolean;
+    /**
+     * Method ´ngOnChanges´ to update `previews` array.
+     * Also, both `start` and `end` local variables will be updated accordingly.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Method called by events from both keyboard and mouse on a preview.
+     * This will trigger the `clickpreview` output with the input preview as its payload.
+     * @param preview Image that triggered this method
+     * @param event KeyboardEvent | MouseEvent payload
+     * @param action Action that triggered this event (Action.NORMAL by default)
+     */
+    onImageEvent(preview: Image, event: KeyboardEvent | MouseEvent, action?: Action): void;
+    /**
+     * Method called by events from both keyboard and mouse on a navigation arrow.
+     * @param direction string of the navigation that can be either 'next' or 'prev'
+     * @param event KeyboardEvent | MouseEvent payload
+     */
+    onNavigationEvent(direction: string, event: KeyboardEvent | MouseEvent): void;
+    /**
+     * Method to get aria-label text for a preview image.
+     * @param preview Image is the preview
+     */
+    getAriaLabel(preview: Image): string;
+    /**
+     * Method to get title text for a preview image.
+     * @param preview Image is the preview
+     */
+    getTitle(preview: Image): string;
+    /**
+     * Method to get alt text for a preview image.
+     * @param preview Image is the preview
+     */
+    getAlt(preview: Image): string;
+    /**
+     * Method used in template to sanitize an url when you need legacyIE11Mode.
+     * In this way you can set an url as background of a div.
+     * @param unsafeStyle is a string or a SafeResourceUrl that represents the url to sanitize.
+     * @param unsafeStyleFallback is a string or a SafeResourceUrl that represents the fallback url to sanitize.
+     * @returns a SafeStyle object that can be used in template without problems.
+     */
+    sanitizeUrlBgStyle(unsafeStyle: string | SafeResourceUrl, unsafeStyleFallback: string | SafeResourceUrl): SafeStyle;
+    /**
+     * Method to cleanup resources. In fact, it cleans breakpointSubscription.
+     * This is an angular lifecycle hook that is called when this component is destroyed.
+     */
+    ngOnDestroy(): void;
+    /**
+     * Private method to init previews based on the currentImage and the full array of images.
+     * The current image in mandatory to show always the current preview (as highlighted).
+     * @param currentImage Image to decide how to show previews, because I always want to see the current image as highlighted
+     * @param images Image[] is the array of all images.
+     */
+    private initPreviews;
+    /**
+     * Private method to init both `start` and `end` to the beginning.
+     */
+    private setBeginningIndexesPreviews;
+    /**
+     * Private method to init both `start` and `end` to the end.
+     */
+    private setEndIndexesPreviews;
+    /**
+     * Private method to update the visible previews navigating to the right (next).
+     */
+    private next;
+    /**
+     * Private method to update the visible previews navigating to the left (previous).
+     */
+    private previous;
+    /**
+     * Private method to block/permit sliding between previews.
+     * @param boundaryIndex number is the first or the last index of `images` input array
+     * @returns boolean if true block sliding, otherwise not
+     */
+    private isPreventSliding;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselPreviewsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselPreviewsComponent, "ks-carousel-previews", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "currentImage": { "alias": "currentImage"; "required": true; "isSignal": true; }; "images": { "alias": "images"; "required": false; "isSignal": true; }; }, { "clickPreview": "clickPreview"; }, never, never, true, never>;
+}
+
+/**
+ * Internal representation of `ButtonConfig` with an optional `id` field, used by trackId to improve performances.
+ */
+interface InternalButtonConfig extends ButtonConfig {
+    id?: number;
+}
+/**
+ * Component with all upper buttons.
+ * Also it emits click events as outputs.
+ */
+declare class UpperButtonsComponent extends AccessibleComponent implements OnInit {
+    /**
+     * Unique id (>=0) of the current instance of this library. This is required when you are using
+     * the service to call modal gallery.
+     */
+    readonly id: _angular_core.InputSignal<number>;
+    /**
+     * Object of type `Image` that represent the visible image.
+     */
+    readonly currentImage: _angular_core.InputSignal<Image>;
+    /**
+     * Object of type `ButtonsConfig` to init UpperButtonsComponent's features.
+     * For instance, it contains an array of buttons.
+     */
+    readonly buttonsConfig: _angular_core.InputSignal<ButtonsConfig>;
+    /**
+     * Output to emit clicks on refresh button. The payload contains a `ButtonEvent`.
+     */
+    readonly refresh: OutputEmitterRef<ButtonEvent>;
+    /**
+     * Output to emit clicks on delete button. The payload contains a `ButtonEvent`.
+     */
+    readonly delete: OutputEmitterRef<ButtonEvent>;
+    /**
+     * Output to emit clicks on navigate button. The payload contains a `ButtonEvent`.
+     */
+    readonly navigate: OutputEmitterRef<ButtonEvent>;
+    /**
+     * Output to emit clicks on download button. The payload contains a `ButtonEvent`.
+     */
+    readonly download: OutputEmitterRef<ButtonEvent>;
+    /**
+     * Output to emit clicks on close button. The payload contains a `ButtonEvent`.
+     */
+    readonly closeButton: OutputEmitterRef<ButtonEvent>;
+    /**
+     * Output to emit clicks on full-screen button. The payload contains a `ButtonEvent`.
+     */
+    readonly fullscreen: OutputEmitterRef<ButtonEvent>;
+    /**
+     * Output to emit clicks on all custom buttons. The payload contains a `ButtonEvent`.
+     */
+    readonly customEmit: OutputEmitterRef<ButtonEvent>;
+    /**
+     * Array of `InternalButtonConfig` exposed to the template. This field is initialized
+     * applying transformations, default values and so on to the input of the same type.
+     */
+    buttons: InternalButtonConfig[] | undefined;
+    /**
+     * Default buttons array for standard configuration
+     */
+    private defaultButtonsDefault;
+    /**
+     * Default buttons array for simple configuration
+     */
+    private simpleButtonsDefault;
+    /**
+     * Default buttons array for advanced configuration
+     */
+    private advancedButtonsDefault;
+    /**
+     * Default buttons array for full configuration
+     */
+    private fullButtonsDefault;
+    /**
+     * Method ´ngOnInit´ to build `configButtons` applying a default value and also to
+     * init the `buttons` array.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method called by events from both keyboard and mouse on a button.
+     * This will call a private method to trigger an output with the right payload.
+     * @param button InternalButtonConfig that called this method
+     * @param event KeyboardEvent | MouseEvent payload
+     * @param action Action that triggered the source event or `Action.CLICK` if not specified
+     * @throws an error if the button type is unknown
+     */
+    onEvent(button: InternalButtonConfig, event: KeyboardEvent | MouseEvent, action?: Action): void;
+    /**
+     * Method used in the template to track ids in @for.
+     * @param index number of the array
+     * @param item Image of the array
+     * @returns number the id of the item or undefined if the item is not valid
+     */
+    trackById(index: number, item: InternalButtonConfig): number | undefined;
+    /**
+     * Private method to emit an event using the specified output as an `EventEmitter`.
+     * @param emitter EventEmitter<ButtonEvent> is the output to emit the `ButtonEvent`
+     * @param event KeyboardEvent | MouseEvent is the source that triggered this method
+     * @param dataToEmit ButtonEvent payload to emit
+     */
+    private triggerOnMouseAndKeyboard;
+    /**
+     * Private method to add ids to the array of buttons.
+     * It adds ids in a reverse way, to be sure that the last button will always have id = 0.
+     * This is really useful in unit testing to be sure that close button always have id = 0, download 1 and so on...
+     * It's totally transparent to the user.
+     * @param buttons ButtonConfig[] config array
+     * @returns ButtonConfig[] the input array with incremental numeric ids
+     */
+    private addButtonIds;
+    /**
+     * Private method to validate custom buttons received as input.
+     * @param buttons ButtonConfig[] config array. [] by default.
+     * @returns ButtonConfig[] the same input buttons config array
+     * @throws an error if exists a button with an unknown type
+     */
+    private validateCustomButtons;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UpperButtonsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UpperButtonsComponent, "ks-upper-buttons", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "currentImage": { "alias": "currentImage"; "required": true; "isSignal": true; }; "buttonsConfig": { "alias": "buttonsConfig"; "required": true; "isSignal": true; }; }, { "refresh": "refresh"; "delete": "delete"; "navigate": "navigate"; "download": "download"; "closeButton": "closeButton"; "fullscreen": "fullscreen"; "customEmit": "customEmit"; }, never, never, true, never>;
+}
+
+/**
+ * Component with clickable dots (small circles) to navigate between images inside the modal gallery.
+ */
+declare class DotsComponent extends AccessibleComponent {
+    /**
+     * Unique id (>=0) of the current instance of this library. This is required when you are using
+     * the service to call modal gallery.
+     */
+    readonly id: _angular_core.InputSignal<number>;
+    /**
+     * Object of type `InternalLibImage` that represent the visible image.
+     */
+    readonly currentImage: _angular_core.InputSignal<Image>;
+    /**
+     * Array of `InternalLibImage` that represent the model of this library with all images,
+     * thumbs and so on.
+     */
+    readonly images: _angular_core.InputSignal<Image[]>;
+    /**
+     * Object of type `DotsConfig` to init DotsComponent's features.
+     * For instance, it contains a param to show/hide this component.
+     */
+    readonly dotsConfig: _angular_core.InputSignal<DotsConfig>;
+    /**
+     * Object of type `AccessibilityConfig` to init custom accessibility features.
+     * For instance, it contains titles, alt texts, aria-labels and so on.
+     */
+    readonly accessibilityConfig: _angular_core.InputSignal<AccessibilityConfig>;
+    /**
+     * Output to emit clicks on dots. The payload contains a number that represent
+     * the index of the clicked dot.
+     */
+    readonly clickDot: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Method to check if an image is active (i.e. the current image).
+     * It checks currentImage and images to prevent errors.
+     * @param index number of the image to check if it's active or not
+     * @returns boolean true if is active (and input params are valid), false otherwise
+     */
+    isActive(index: number): boolean;
+    /**
+     * Method called by events from keyboard and mouse.
+     * @param index number of the dot
+     * @param event KeyboardEvent | MouseEvent payload
+     */
+    onDotEvent(index: number, event: KeyboardEvent | MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DotsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DotsComponent, "ks-dots", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "currentImage": { "alias": "currentImage"; "required": true; "isSignal": true; }; "images": { "alias": "images"; "required": true; "isSignal": true; }; "dotsConfig": { "alias": "dotsConfig"; "required": true; "isSignal": true; }; "accessibilityConfig": { "alias": "accessibilityConfig"; "required": true; "isSignal": true; }; }, { "clickDot": "clickDot"; }, never, never, true, never>;
+}
+
+/**
+ * Component with image previews
+ */
+declare class PreviewsComponent extends AccessibleComponent implements OnInit, OnChanges {
+    /**
+     * Unique id (>=0) of the current instance of this library. This is required when you are using
+     * the service to call modal-gallery.
+     */
+    readonly id: _angular_core.InputSignal<number>;
+    /**
+     * Object of type `Image` that represent the visible image.
+     */
+    readonly currentImage: _angular_core.InputSignal<Image>;
+    /**
+     * Array of `Image` that represent the model of this library with all images,
+     * thumbs and so on.
+     */
+    readonly images: _angular_core.InputSignal<Image[]>;
+    /**
+     * Optional template reference for the rendering of previews.
+     * Template may access the following context variables:
+     * - preview: the `Image` object
+     * - defaultTemplate: the template used by default to render the preview (in case the need is to wrap it)
+     */
+    readonly customTemplate: _angular_core.InputSignal<TemplateRef<HTMLElement> | undefined>;
+    /**
+     * Output to emit the clicked preview. The payload contains the `ImageEvent` associated to the clicked preview.
+     */
+    readonly clickPreview: _angular_core.OutputEmitterRef<ImageEvent>;
+    /**
+     * Object of type `AccessibilityConfig` to init custom accessibility features.
+     * For instance, it contains titles, alt texts, aria-labels and so on.
+     */
+    accessibilityConfig: AccessibilityConfig | undefined;
+    /**
+     * Object of type `SlideConfig` to get `infinite sliding`.
+     */
+    slideConfig: SlideConfig | undefined;
+    /**
+     * Object of type `PreviewConfig` to init PreviewsComponent's features.
+     * For instance, it contains a param to show/hide this component, sizes.
+     */
+    previewConfig: PreviewConfig | undefined;
+    /**
+     * Enum of type `Action` that represents a mouse click on a button.
+     * Declared here to be used inside the template.
+     */
+    clickAction: Action;
+    /**
+     * Enum of type `Action` that represents a keyboard action.
+     * Declared here to be used inside the template.
+     */
+    keyboardAction: Action;
+    /**
+     * Array of `Image` exposed to the template. This field is initialized
+     * applying transformations, default values and so on to the input of the same type.
+     */
+    previews: Image[];
+    /**
+     * Start index (included) of the input images used to display previews.
+     */
+    start: number;
+    /**
+     * End index (excluded) of the input images used to display previews.
+     */
+    end: number;
+    defaultPreviewSize: Size;
+    private configService;
+    /**
+     * Method ´ngOnInit´ to build `configPreview` applying a default value and also to
+     * init the `previews` array.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method to check if an image is active (i.e. a preview image).
+     * @param preview Image is an image to check if it's active or not
+     * @returns boolean true if is active, false otherwise
+     */
+    isActive(preview: Image): boolean;
+    /**
+     * Method ´ngOnChanges´ to update `previews` array.
+     * Also, both `start` and `end` local variables will be updated accordingly.
+     * This is an angular lifecycle hook, so it's called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Method called by events from both keyboard and mouse on a preview.
+     * This will trigger the `clickpreview` output with the input preview as its payload.
+     * @param preview Image that triggered this method
+     * @param event KeyboardEvent | MouseEvent payload
+     * @param action Action that triggered the source event or `Action.NORMAL` if not specified
+     */
+    onImageEvent(preview: Image, event: KeyboardEvent | MouseEvent, action?: Action): void;
+    /**
+     * Method called by events from both keyboard and mouse on a navigation arrow.
+     * It also emits an event to specify which arrow.
+     * @param direction string of the navigation that can be either 'next' or 'prev'
+     * @param event KeyboardEvent | MouseEvent payload
+     * @param action Action that triggered the source event or `Action.NORMAL` if not specified
+     */
+    onNavigationEvent(direction: string, event: KeyboardEvent | MouseEvent, action?: Action): void;
+    /**
+     * Indicates if the previews 'left arrow' should be displayed or not.
+     * @returns
+     */
+    isDisplayLeftPreviewsArrow(): boolean;
+    /**
+     * Indicates if the previews 'right arrow' should be displayed or not.
+     * @returns
+     */
+    isDisplayRightPreviewsArrow(): boolean;
+    /**
+     * Private method to init previews based on the currentImage and the full array of images.
+     * The current image in mandatory to show always the current preview (as highlighted).
+     * @param currentImage Image to decide how to show previews, because I always want to see the current image as highlighted
+     * @param images Image[] is the array of all images.
+     */
+    private initPreviews;
+    /**
+     * Private method to update both `start` and `end` based on the currentImage.
+     */
+    private setIndexesPreviews;
+    /**
+     * Private method to update the visible previews navigating to the right (next).
+     */
+    private next;
+    /**
+     * Private method to update the visible previews navigating to the left (previous).
+     */
+    private previous;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PreviewsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PreviewsComponent, "ks-previews", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "currentImage": { "alias": "currentImage"; "required": true; "isSignal": true; }; "images": { "alias": "images"; "required": true; "isSignal": true; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; }, { "clickPreview": "clickPreview"; }, never, never, true, never>;
+}
+
+/**
+ * Interface to describe the Load Event, used to
+ * emit an event when the image is finally loaded and the spinner has gone.
+ */
+interface ImageLoadEvent {
+    status: boolean;
+    index: number;
+    id: number;
+}
+/**
+ * Component with the current image with some additional elements like arrows and side previews.
+ */
+declare class CurrentImageComponent extends AccessibleComponent implements OnInit, OnChanges, AfterContentInit, OnDestroy {
+    /**
+     * Unique id (>=0) of the current instance of this library. This is useful when you are using
+     * the service to call modal gallery without open it manually.
+     */
+    id: _angular_core.InputSignal<number>;
+    /**
+     * Object of type `InternalLibImage` that represent the visible image.
+     */
+    currentImage: _angular_core.InputSignal<InternalLibImage>;
+    /**
+     * Array of `InternalLibImage` that represent the model of this library with all images,
+     * thumbs and so on.
+     */
+    images: _angular_core.InputSignal<InternalLibImage[]>;
+    /**
+     * Boolean that it is true if the modal gallery is visible.
+     * If yes, also this component should be visible.
+     */
+    isOpen: _angular_core.InputSignal<boolean>;
+    /**
+     * Output to emit an event when images are loaded. The payload contains an `ImageLoadEvent`.
+     */
+    readonly loadImage: _angular_core.OutputEmitterRef<ImageLoadEvent>;
+    /**
+     * Output to emit any changes of the current image. The payload contains an `ImageModalEvent`.
+     */
+    readonly changeImage: _angular_core.OutputEmitterRef<ImageModalEvent>;
+    /**
+     * Output to emit an event when the modal gallery is closed. The payload contains an `ImageModalEvent`.
+     */
+    readonly closeGallery: _angular_core.OutputEmitterRef<ImageModalEvent>;
+    /**
+     * Subject to play modal-gallery.
+     */
+    private start$;
+    /**
+     * Subject to stop modal-gallery.
+     */
+    private stop$;
+    /**
+     * Enum of type `Action` that represents a normal action.
+     * Declared here to be used inside the template.
+     */
+    normalAction: Action;
+    /**
+     * Object of type `AccessibilityConfig` to init custom accessibility features.
+     * For instance, it contains titles, alt texts, aria-labels and so on.
+     */
+    accessibilityConfig: AccessibilityConfig | undefined;
+    /**
+     * Object of type `SlideConfig` to get `infinite sliding`.
+     */
+    slideConfig: SlideConfig | undefined;
+    /**
+     * Object to configure current image in modal-gallery.
+     * For instance you can disable navigation on click on current image (enabled by default).
+     */
+    currentImageConfig: CurrentImageConfig | undefined;
+    /**
+     * Object of type `KeyboardConfig` to assign custom keys to both ESC, RIGHT and LEFT keyboard's actions.
+     */
+    keyboardConfig: KeyboardConfig | undefined;
+    /**
+     * Enum of type `Action` that represents a mouse click on a button.
+     * Declared here to be used inside the template.
+     */
+    clickAction: Action;
+    /**
+     * Enum of type `Action` that represents a keyboard action.
+     * Declared here to be used inside the template.
+     */
+    keyboardAction: Action;
+    /**
+     * Boolean that it's true when you are watching the first image (currently visible).
+     * False by default
+     */
+    isFirstImage: boolean;
+    /**
+     * Boolean that it's true when you are watching the last image (currently visible).
+     * False by default
+     */
+    isLastImage: boolean;
+    /**
+     * Boolean that it's true if an image of the modal gallery is still loading.
+     * True by default
+     */
+    loading: boolean;
+    private readonly platformId;
+    private ngZone;
+    private configService;
+    ref: ChangeDetectorRef;
+    /**
+     * Listener to stop the gallery when the mouse pointer is over the current image.
+     */
+    onMouseEnter(): void;
+    /**
+     * Listener to play the gallery when the mouse pointer leave the current image.
+     */
+    onMouseLeave(): void;
+    /**
+     * Method ´ngOnInit´ to init configuration.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method ´ngOnChanges´ to update `loading` status and emit events.
+     * If the gallery is open, then it will also manage boundary arrows and sliding.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     */
+    ngAfterContentInit(): void;
+    /**
+     * Method to handle keypress based on the `keyboardConfig` input. It gets the code of
+     * the key that triggered the keypress event to navigate between images or to close the modal gallery.
+     * @param code string of the key that triggered the keypress event
+     */
+    onKeyPress(code: string): void;
+    /**
+     * Method to get the image description based on input params.
+     * If you provide a full description this will be the visible description, otherwise,
+     * it will be built using the `Description` object, concatenating its fields.
+     * @param image image to get its description. If not provided it will be the current image
+     * @returns String description of the image (or the current image if not provided)
+     * @throws an Error if description isn't available
+     */
+    getDescriptionToDisplay(image?: Image): string;
+    /**
+     * Method to get `alt attribute`.
+     * `alt` specifies an alternate text for an image, if the image cannot be displayed.
+     * @param image Image to get its alt description. If not provided it will be the current image
+     * @returns String alt description of the image (or the current image if not provided)
+     */
+    getAltDescriptionByImage(image?: Image): string;
+    /**
+     * Method to get the title attributes based on descriptions.
+     * This is useful to prevent accessibility issues, because if DescriptionStrategy is ALWAYS_HIDDEN,
+     * it prevents an empty string as title.
+     * @param image Image to get its description. If not provided it will be the current image
+     * @returns String title of the image based on descriptions
+     * @throws an Error if description isn't available
+     */
+    getTitleToDisplay(image?: Image): string;
+    /**
+     * Method to get the left side preview image.
+     * @returns Image the image to show as size preview on the left
+     */
+    getLeftPreviewImage(): Image;
+    /**
+     * Method to get the right side preview image.
+     * @returns Image the image to show as size preview on the right
+     */
+    getRightPreviewImage(): Image;
+    /**
+     * Method called by events from both keyboard and mouse on an image.
+     * This will invoke the nextImage method.
+     * @param event keyboardEvent | MouseEvent payload
+     * @param action action that triggered the event or `Action.NORMAL` if not provided
+     */
+    onImageEvent(event: KeyboardEvent | MouseEvent, action?: Action): void;
+    /**
+     * Method called by events from both keyboard and mouse on a navigation arrow.
+     * @param direction string of the navigation that can be either 'next' or 'prev'
+     * @param event KeyboardEvent | MouseEvent payload
+     * @param action Action that triggered the event or `Action.NORMAL` if not provided
+     * @param disable boolean to disable navigation
+     */
+    onNavigationEvent(direction: string, event: KeyboardEvent | MouseEvent, action?: Action, disable?: boolean): void;
+    /**
+     * Method to go back to the previous image.
+     * @param action Enum of type `Action` that represents the source
+     *  action that moved back to the previous image. `Action.NORMAL` by default.
+     */
+    prevImage(action?: Action): void;
+    /**
+     * Method to go back to the previous image.
+     * @param action Enum of type `Action` that represents the source
+     *  action that moved to the next image. `Action.NORMAL` by default.
+     */
+    nextImage(action?: Action): void;
+    /**
+     * Method to emit an event as loadImage output to say that the requested image if loaded.
+     * This method is invoked by the javascript's 'load' event on an img tag.
+     * @param event event that triggered the load
+     */
+    onImageLoad(event: Event): void;
+    /**
+     * Method used by SwipeDirective to support touch gestures (you can also invert the swipe direction with configCurrentImage.invertSwipe).
+     * @param action String that represent the direction of the swipe action. 'swiperight' by default.
+     */
+    swipe(action?: string): void;
+    /**
+     * Method used in `modal-gallery.component` to get the index of an image to delete.
+     * @param image image to get the index, or the visible image, if not passed
+     * @returns number the index of the image
+     */
+    getIndexToDelete(image?: Image): number;
+    /**
+     * Method to play modal gallery.
+     */
+    playCarousel(): void;
+    /**
+     * Stops modal gallery from cycling through items.
+     */
+    stopCarousel(): void;
+    /**
+     * Method to cleanup resources. In fact, this will stop the modal gallery.
+     * This is an angular lifecycle hook that is called when this component is destroyed.
+     */
+    ngOnDestroy(): void;
+    /**
+     * Private method to update both `isFirstImage` and `isLastImage` based on
+     * the index of the current image.
+     * @param currentIndex number is the index of the current image
+     */
+    private handleBoundaries;
+    /**
+     * Private method to check if next/prev actions should be blocked.
+     * It checks if slideConfig.infinite === false and if the image index is equals to the input parameter.
+     * If yes, it returns true to say that sliding should be blocked, otherwise not.
+     * @param boundaryIndex number that could be either the beginning index (0) or the last index
+     *  of images (this.images.length - 1).
+     * @returns boolean true if slideConfig.infinite === false and the current index is
+     *  either the first or the last one.
+     */
+    private isPreventSliding;
+    /**
+     * Private method to get the next index.
+     * This is necessary because at the end, when you call next again, you'll go to the first image.
+     * That happens because all modal images are shown like in a circle.
+     */
+    private getNextImage;
+    /**
+     * Private method to get the previous index.
+     * This is necessary because at index 0, when you call prev again, you'll go to the last image.
+     * That happens because all modal images are shown like in a circle.
+     */
+    private getPrevImage;
+    /**
+     * Private method to build a text description.
+     * This is used also to create titles.
+     * @param image Image to get its description. If not provided it will be the current image.
+     * @param imageWithoutDescription boolean is a boolean that it's true if the image hasn't a 'modal' description.
+     * @returns String description built concatenating image fields with a specific logic.
+     */
+    private buildTextDescription;
+    /**
+     * Private method to call handleBoundaries when ngOnChanges is called.
+     */
+    private updateIndexes;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CurrentImageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CurrentImageComponent, "ks-current-image", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "currentImage": { "alias": "currentImage"; "required": true; "isSignal": true; }; "images": { "alias": "images"; "required": true; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; }, { "loadImage": "loadImage"; "changeImage": "changeImage"; "closeGallery": "closeGallery"; }, never, never, true, never>;
+}
+
+/**
+ * Component with the loading spinner
+ */
+declare class LoadingSpinnerComponent {
+    /**
+     * Object of type `LoadingConfig` exposed to the template.
+     * It contains a field to choose a loading spinner.
+     */
+    readonly loadingConfig: _angular_core.InputSignal<LoadingConfig | undefined>;
+    /**
+     * Object of type `AccessibilityConfig` to init custom accessibility features.
+     * For instance, it contains titles, alt texts, aria-labels and so on.
+     */
+    readonly accessibilityConfig: _angular_core.InputSignal<AccessibilityConfig | undefined>;
+    /**
+     * Enum of type `LoadingType` to choose the standard loading spinner.
+     * Declared here to be used inside the template.
+     */
+    loadingStandard: LoadingType;
+    /**
+     * Enum of type `LoadingType` to choose the bars loading spinner.
+     * Declared here to be used inside the template.
+     */
+    loadingBars: LoadingType;
+    /**
+     * Enum of type `LoadingType` to choose the circular loading spinner.
+     * Declared here to be used inside the template.
+     */
+    loadingCircular: LoadingType;
+    /**
+     * Enum of type `LoadingType` to choose the dots loading spinner.
+     * Declared here to be used inside the template.
+     */
+    loadingDots: LoadingType;
+    /**
+     * Enum of type `LoadingType` to choose the cube flipping loading spinner.
+     * Declared here to be used inside the template.
+     */
+    loadingCubeFlipping: LoadingType;
+    /**
+     * Enum of type `LoadingType` to choose the circles loading spinner.
+     * Declared here to be used inside the template.
+     */
+    loadingCircles: LoadingType;
+    /**
+     * Enum of type `LoadingType` to choose the explosing squares loading spinner.
+     * Declared here to be used inside the template.
+     */
+    loadingExplosingSquares: LoadingType;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoadingSpinnerComponent, "ks-loading-spinner", never, { "loadingConfig": { "alias": "loadingConfig"; "required": false; "isSignal": true; }; "accessibilityConfig": { "alias": "accessibilityConfig"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class ModalGalleryComponent implements OnInit, OnDestroy {
+    /**
+     * Reference to the CurrentImageComponent to invoke methods on it.
+     */
+    readonly currentImageComponent: _angular_core.Signal<CurrentImageComponent | undefined>;
+    /**
+     * Unique id (>=0) of the current instance of this library. This is useful when you are using
+     * the service to call modal gallery without open it manually.
+     */
+    id: number;
+    /**
+     * Object of type `ButtonsConfig` to show/hide buttons.
+     */
+    buttonsConfig: ButtonsConfig;
+    /**
+     * Boolean to enable modal-gallery close behaviour when clicking
+     * on the semi-transparent background. Enabled by default.
+     */
+    enableCloseOutside: boolean;
+    /**
+     * Object of type `DotsConfig` to init DotsComponent's features.
+     * For instance, it contains a param to show/hide dots.
+     */
+    dotsConfig: DotsConfig;
+    /**
+     * Object of type `PreviewConfig` to init PreviewsComponent's features.
+     * For instance, it contains a param to show/hide previews.
+     */
+    previewConfig: PreviewConfig | undefined;
+    /**
+     * Object of type `SlideConfig` to init side previews and `infinite sliding`.
+     */
+    slideConfig: SlideConfig | undefined;
+    /**
+     * Object of type `AccessibilityConfig` to init custom accessibility features.
+     * For instance, it contains titles, alt texts, aria-labels and so on.
+     */
+    accessibilityConfig: AccessibilityConfig;
+    /**
+     * Object of type `KeyboardConfig` to assign custom keys to ESC, RIGHT and LEFT keyboard's actions.
+     */
+    keyboardConfig: KeyboardConfig | undefined;
+    /**
+     * Object of type `PlainGalleryConfig` to configure the plain gallery.
+     */
+    plainGalleryConfig: PlainGalleryConfig | undefined;
+    /**
+     * Array of `InternalLibImage` representing the model of this library with all images, thumbs and so on.
+     */
+    images: InternalLibImage[];
+    /**
+     * Optional template reference to use to render previews.
+     */
+    customPreviewsTemplate?: TemplateRef<HTMLElement>;
+    /**
+     * `Image` that is visible right now.
+     */
+    currentImage: InternalLibImage;
+    /**
+     * Boolean to open the modal gallery. False by default.
+     */
+    showGallery: boolean;
+    /**
+     * Object to configure this component.
+     */
+    libConfig: LibConfig | undefined;
+    private readonly updateImagesSubscription;
+    private readonly dialogContent;
+    private readonly platformId;
+    /**
+     * HostListener to catch the browser back button and destroy the gallery.
+     * This prevents unexpected behavior about scrolling.
+     * Added to fix this issue: https://github.com/Ks89/angular-modal-gallery/issues/159
+     */
+    onPopState(): void;
+    /**
+     * HostListener to catch ctrl+s/meta+s and download the current image.
+     * Inspired by https://netbasal.com/add-keyboard-shortcuts-to-your-angular-app-9bf2e89862b3
+     */
+    onSaveListener(event: Event): void;
+    private modalGalleryService;
+    private changeDetectorRef;
+    private idValidatorService;
+    private sanitizer;
+    private configService;
+    constructor();
+    /**
+     * Method ´ngOnInit´ to init images calling `initImages()`.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method called by custom upper buttons.
+     * @param event ButtonEvent event payload
+     */
+    onCustomEmit(event: ButtonEvent): void;
+    /**
+     * Method called by the full-screen upper button.
+     * @param event ButtonEvent event payload
+     */
+    onFullScreen(event: ButtonEvent): void;
+    /**
+     * Method called by the delete upper button.
+     * @param event ButtonEvent event payload
+     */
+    onDelete(event: ButtonEvent): void;
+    /**
+     * Method called by the navigate upper button.
+     * @param event ButtonEvent event payload
+     */
+    onNavigate(event: ButtonEvent): void;
+    /**
+     * This method is defined to be spied and replaced in unit testing with a fake method call.
+     * It must be public to be able to use jasmine spyOn method.
+     * @param newHref string new url
+     */
+    updateLocationHref(newHref: string): void;
+    /**
+     * Method called by the download upper button.
+     * @param event ButtonEvent event payload
+     */
+    onDownload(event: ButtonEvent): void;
+    /**
+     * Method called by the close upper button.
+     * @param event ButtonEvent event payload
+     * @param action Action that triggered the close method. `Action.NORMAL` by default
+     */
+    onCloseGalleryButton(event: ButtonEvent, action?: Action): void;
+    /**
+     * Method called by CurrentImageComponent.
+     * @param event ImageModalEvent event payload
+     * @param action Action that triggered the close method. `Action.NORMAL` by default
+     */
+    onCloseGallery(event: ImageModalEvent, action?: Action): void;
+    /**
+     * Method to close the modal gallery specifying the action.
+     * @param action Action action type. `Action.NORMAL` by default
+     * @param clickOutside boolean that is true if called clicking on the modal background. False by default.
+     */
+    closeGallery(action?: Action, clickOutside?: boolean): void;
+    /**
+     * Method called when the image changes and used to update the `currentImage` object.
+     * @param event ImageModalEvent event payload
+     */
+    onChangeCurrentImage(event: ImageModalEvent): void;
+    /**
+     * Method called when you click 'outside' (i.e. on the semi-transparent background)
+     * to close the modal gallery if `enableCloseOutside` is true.
+     * @param event boolean that is true to close the modal gallery, false otherwise
+     */
+    onClickOutside(event: boolean): void;
+    /**
+     * Method called when an image is loaded and the loading spinner has gone.
+     * It sets the previouslyLoaded flag inside the Image to hide loading spinner when displayed again.
+     * @param event ImageLoadEvent event payload
+     */
+    onImageLoad(event: ImageLoadEvent): void;
+    /**
+     * Method called when a dot is clicked and used to update the current image.
+     * @param index number index of the clicked dot
+     */
+    onClickDot(index: number): void;
+    /**
+     * Method called when an image preview is clicked and used to update the current image.
+     * @param event ImageModalEvent preview image
+     */
+    onClickPreview(event: ImageModalEvent): void;
+    /**
+     * Method to cleanup resources.
+     * This is an angular lifecycle hook that is called when this component is destroyed.
+     */
+    ngOnDestroy(): void;
+    /**
+     * Method to download the current image, only if `downloadable` is true.
+     * @private
+     */
+    private downloadImage;
+    /**
+     * Method to convert a base64 to a Blob
+     * @param base64Data string with base64 data
+     * @param contentType string with the MIME type
+     * @return Blob converted from the input base64Data
+     * @private
+     */
+    private base64toBlob;
+    /**
+     * Private method to download the current image for all browsers.
+     * @private
+     */
+    private downloadImageAllBrowsers;
+    /**
+     * Private method to get the `ButtonEvent` to emit, merging the input `ButtonEvent`
+     * with the current image.
+     * @param event ButtonEvent event payload to return
+     * @returns ButtonEvent event payload with the current image included
+     * @private
+     */
+    private getButtonEventToEmit;
+    /**
+     * Private method to get the file name from an input path.
+     * This is used either to get the image's name from its path or from the Image itself,
+     * if specified as 'downloadFileName' by the user.
+     * @param image Image image to extract its file name
+     * @param isBase64 boolean to set if the image is a base64 file or not. False by default.
+     * @param base64Extension string to force the extension of the base64 image. Empty string by default.
+     * @returns string string file name of the input image.
+     * @private
+     */
+    private getFileName;
+    /**
+     * Private method to initialize `images` as array of `Image`s.
+     * Also, it will emit ImageModalEvent to say that images are loaded.
+     * @private
+     */
+    private initImages;
+    /**
+     * Private method to emit events when either the last or the first image are visible.
+     * @param action Action Enum of type Action that represents the source of the event that changed the
+     *  current image to the first one or the last one.
+     * @param indexToCheck number is the index number of the image (the first or the last one).
+     * @private
+     */
+    private emitBoundaryEvent;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalGalleryComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalGalleryComponent, "ks-modal-gallery", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to close the modal gallery clicking on the semi-transparent background.
+ * In fact, it listens for a click on all elements that aren't 'inside' and it emits
+ * an event using `@Output clickOutside`.
+ */
+declare class ClickOutsideDirective {
+    /**
+     * Boolean to enable this directive.
+     */
+    clickOutsideEnable: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Output to emit an event if the clicked element class doesn't contain 'inside' or it is 'hidden'. The payload is a boolean.
+     */
+    readonly clickOutside: _angular_core.OutputEmitterRef<boolean>;
+    /**
+     * Method called by Angular itself every click thanks to `@HostListener`.
+     * @param event MouseEvent
+     */
+    onClick(event: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ClickOutsideDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ClickOutsideDirective, "[ksClickOutside]", never, { "clickOutsideEnable": { "alias": "clickOutsideEnable"; "required": false; "isSignal": true; }; }, { "clickOutside": "clickOutside"; }, never, never, true, never>;
+}
+
+/**
+ * Directive to change the size of an element.
+ */
+declare class SizeDirective implements OnInit, OnChanges {
+    /**
+     * Object of type `Size` to resize the element.
+     */
+    readonly sizeConfig: _angular_core.InputSignal<Size | undefined>;
+    private renderer;
+    private el;
+    /**
+     * Method ´ngOnInit´ to apply the style of this directive.
+     * This is an Angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method ´ngOnChanges´ to apply the style of this directive.
+     * This is an Angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(): void;
+    /**
+     * Private method to change both width and height of an element.
+     */
+    private applyStyle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SizeDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SizeDirective, "[ksSize]", never, { "sizeConfig": { "alias": "sizeConfig"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to manage keyboard navigation.
+ */
+declare class KeyboardNavigationDirective {
+    /**
+     * Boolean input to skip keyboard navigation.
+     */
+    isOpen: _angular_core.InputSignal<boolean>;
+    /**
+     * Output to emit keyboard `code` of the pressed key (keydown).
+     */
+    readonly keyboardNavigation: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Listener to catch keyboard's events and call the right method based on the key.
+     * For instance, pressing esc, this will call `closeGallery(Action.KEYBOARD)` and so on.
+     * If you passed a valid `keyboardConfig` esc, right and left buttons will be customized based on your data.
+     * @param e KeyboardEvent caught by the listener.
+     */
+    onKeyDown(e: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KeyboardNavigationDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KeyboardNavigationDirective, "[ksKeyboardNavigation]", never, { "isOpen": { "alias": "isOpen"; "required": true; "isSignal": true; }; }, { "keyboardNavigation": "keyboardNavigation"; }, never, never, true, never>;
+}
+
+/**
+ * Directive to change the flex-wrap css property of an element.
+ */
+declare class WrapDirective implements OnInit, OnChanges {
+    /**
+     * Boolean input that it's true to add 'flex-wrap: wrap', 'flex-wrap: nowrap' otherwise.
+     */
+    readonly wrap: _angular_core.InputSignal<boolean>;
+    /**
+     * String input to force the width of the element to be able to see wrapping.
+     */
+    readonly width: _angular_core.InputSignal<string>;
+    private renderer;
+    private el;
+    /**
+     * Method ´ngOnInit´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method ´ngOnChanges´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(): void;
+    /**
+     * Private method to change both width and flex-wrap css properties.
+     */
+    private applyStyle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrapDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrapDirective, "[ksWrap]", never, { "wrap": { "alias": "wrap"; "required": true; "isSignal": true; }; "width": { "alias": "width"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to change the flex-direction of an element, based on two inputs (`direction` and `justify`).
+ */
+declare class DirectionDirective implements OnInit, OnChanges {
+    /**
+     * String input to set the css flex-direction of an element.
+     */
+    readonly direction: _angular_core.InputSignal<string | undefined>;
+    /**
+     * String input to set the css justify-content of an element.
+     */
+    readonly justify: _angular_core.InputSignal<string | undefined>;
+    private renderer;
+    private el;
+    /**
+     * Method ´ngOnInit´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method ´ngOnChanges´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(): void;
+    /**
+     * Private method to change both direction and justify of an element.
+     */
+    private applyStyle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DirectionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DirectionDirective, "[ksDirection]", never, { "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to add an image to an `<a>` tag with some additional custom properties.
+ */
+declare class ATagBgImageDirective implements OnInit, OnChanges {
+    /**
+     * Object of type `Image` that represents the image to add to the `<a>` tag.
+     */
+    readonly image: _angular_core.InputSignal<Image>;
+    /**
+     * Additional style to customize the background attribute.
+     * Empty string by default.
+     */
+    readonly style: _angular_core.InputSignal<string | undefined>;
+    private renderer;
+    private el;
+    /**
+     * Method ´ngOnInit´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method ´ngOnChanges´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(): void;
+    /**
+     * Private method to add an image as background of an `<a>` tag.
+     */
+    private applyStyle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ATagBgImageDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ATagBgImageDirective, "[ksATagBgImage]", never, { "image": { "alias": "image"; "required": true; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to customize the description.
+ */
+declare class DescriptionDirective implements OnInit, OnChanges {
+    /**
+     * Object of type `Description` to resize the element.
+     */
+    readonly description: _angular_core.InputSignal<Description | undefined>;
+    private renderer;
+    private el;
+    /**
+     * Method ´ngOnInit´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method ´ngOnChanges´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(): void;
+    /**
+     * Private method to change description's style.
+     */
+    private applyStyle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DescriptionDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DescriptionDirective, "[ksDescription]", never, { "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to change margins of an element.
+ */
+declare class MarginDirective implements OnInit, OnChanges {
+    /**
+     * String to set the margin of an element.
+     */
+    readonly marginLeft: _angular_core.InputSignal<string | undefined>;
+    /**
+     * String to set the margin of an element.
+     */
+    readonly marginRight: _angular_core.InputSignal<string | undefined>;
+    /**
+     * String to set the margin of an element.
+     */
+    readonly marginTop: _angular_core.InputSignal<string | undefined>;
+    /**
+     * String to set the margin of an element.
+     */
+    readonly marginBottom: _angular_core.InputSignal<string | undefined>;
+    private renderer;
+    private el;
+    /**
+     * Method ´ngOnInit´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method ´ngOnChanges´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(): void;
+    /**
+     * Private method to change both width and height of an element.
+     */
+    private applyStyle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MarginDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MarginDirective, "[ksMargin]", never, { "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Interface `MaxSize` to configure the size based on max-width and max-height.
+ * They can be pixels, percentages.
+ */
+interface MaxSize {
+    maxWidth?: string;
+    maxHeight?: string;
+}
+
+/**
+ * Directive to change the max size of an element.
+ */
+declare class MaxSizeDirective implements OnInit, OnChanges {
+    /**
+     * Object of type `MaxSize` to resize the element.
+     */
+    readonly maxSizeConfig: _angular_core.InputSignal<MaxSize | undefined>;
+    private renderer;
+    private el;
+    /**
+     * Method ´ngOnInit´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called only one time!!!
+     */
+    ngOnInit(): void;
+    /**
+     * Method ´ngOnChanges´ to apply the style of this directive.
+     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * In particular, it's called when any data-bound property of a directive changes!!!
+     */
+    ngOnChanges(): void;
+    /**
+     * Private method to change both max-width and max-height of an element.
+     */
+    private applyStyle;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MaxSizeDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MaxSizeDirective, "[ksMaxSize]", never, { "maxSizeConfig": { "alias": "maxSizeConfig"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to add fallback image if the original one is not reachable.
+ */
+declare class FallbackImageDirective {
+    readonly fallbackImg: _angular_core.InputSignal<string | SafeResourceUrl | undefined>;
+    readonly fallbackApplied: _angular_core.OutputEmitterRef<boolean>;
+    private renderer;
+    private el;
+    onError(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FallbackImageDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FallbackImageDirective, "[ksFallbackImage]", never, { "fallbackImg": { "alias": "fallbackImg"; "required": false; "isSignal": true; }; }, { "fallbackApplied": "fallbackApplied"; }, never, never, true, never>;
+}
+
+/**
+ * Directive to manage swipe events on touch devices.
+ */
+declare class SwipeDirective {
+    defaultTouch: {
+        x: number;
+        y: number;
+        time: number;
+    };
+    /**
+     * Output to emit swipe left event. Payload is empty.
+     */
+    readonly swipeLeft: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Output to emit swipe right event. Payload is empty.
+     */
+    readonly swipeRight: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Output to emit swipe up event. Payload is empty.
+     */
+    readonly swipeUp: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Output to emit swipe down event. Payload is empty.
+     */
+    readonly swipeDown: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Method called by Angular itself every click thanks to `@HostListener`.
+     * @param event TouchEvent payload received on touch
+     */
+    handleTouch(event: TouchEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SwipeDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SwipeDirective, "[ksSwipe]", never, {}, { "swipeLeft": "swipeLeft"; "swipeRight": "swipeRight"; "swipeUp": "swipeUp"; "swipeDown": "swipeDown"; }, never, never, true, never>;
+}
+
+/**
+ * Module to import it in the root module of your application.
+ */
+declare class GalleryModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<GalleryModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<GalleryModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof PlainGalleryComponent, typeof CarouselComponent, typeof CarouselPreviewsComponent, typeof UpperButtonsComponent, typeof DotsComponent, typeof PreviewsComponent, typeof CurrentImageComponent, typeof LoadingSpinnerComponent, typeof AccessibleComponent, typeof ModalGalleryComponent, typeof ClickOutsideDirective, typeof SizeDirective, typeof KeyboardNavigationDirective, typeof WrapDirective, typeof DirectionDirective, typeof ATagBgImageDirective, typeof DescriptionDirective, typeof MarginDirective, typeof MaxSizeDirective, typeof FallbackImageDirective, typeof SwipeDirective], [typeof PlainGalleryComponent, typeof CarouselComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<GalleryModule>;
+}
+
+interface ModalGalleryConfig {
+    id: number;
+    images: Image[];
+    currentImage: Image;
+    libConfig?: ModalLibConfig;
+    /**
+     * Optional template reference for the rendering of previews.
+     * Template may access following context variables:
+     * - "preview": the `Image` object of the preview
+     * - "defaultTemplate": the template used by default to render the preview (in case the need is to augment it)
+     */
+    previewsTemplate?: TemplateRef<HTMLElement>;
+}
+
+interface InteractionEvent {
+    source: string;
+    action: Action;
+    payload: any;
+}
+
+/**
+ * Default accessibility configuration.
+ */
+declare const KS_DEFAULT_ACCESSIBILITY_CONFIG: AccessibilityConfig;
+
+/**
+ * Default button size object
+ */
+declare const KS_DEFAULT_SIZE: Size;
+/**
+ * Default close button object
+ */
+declare const KS_DEFAULT_BTN_CLOSE: ButtonConfig;
+/**
+ * Default download button object
+ */
+declare const KS_DEFAULT_BTN_DOWNLOAD: ButtonConfig;
+/**
+ * Default exturl button object
+ */
+declare const KS_DEFAULT_BTN_EXTURL: ButtonConfig;
+/**
+ * Default delete button object
+ */
+declare const KS_DEFAULT_BTN_DELETE: ButtonConfig;
+/**
+ * Default full-screen button object
+ */
+declare const KS_DEFAULT_BTN_FULL_SCREEN: ButtonConfig;
+
+/**
+ * Class that represents the modal dialog instance.
+ * It is returned by the open method.
+ */
+declare class ModalGalleryRef {
+    private close;
+    close$: rxjs.Observable<ImageModalEvent>;
+    private show;
+    show$: rxjs.Observable<ImageModalEvent>;
+    private firstImage;
+    firstImage$: rxjs.Observable<ImageModalEvent>;
+    private lastImage;
+    lastImage$: rxjs.Observable<ImageModalEvent>;
+    private hasData;
+    hasData$: rxjs.Observable<ImageModalEvent>;
+    private buttonBeforeHook;
+    buttonBeforeHook$: rxjs.Observable<ButtonEvent>;
+    private buttonAfterHook;
+    buttonAfterHook$: rxjs.Observable<ButtonEvent>;
+    private overlayRef;
+    constructor(overlayRef: OverlayRef);
+    /**
+     * Close modal dialog, disposing the Overlay.
+     */
+    closeModal(): void;
+    /**
+     * Method to emit close event.
+     * @param event ImageModalEvent event payload
+     */
+    emitClose(event: ImageModalEvent): void;
+    /**
+     * Method to emit show event.
+     * @param event ImageModalEvent event payload
+     */
+    emitShow(event: ImageModalEvent): void;
+    /**
+     * Method to emit firstImage event.
+     * @param event ImageModalEvent event payload
+     */
+    emitFirstImage(event: ImageModalEvent): void;
+    /**
+     * Method to emit lastImage event.
+     * @param event ImageModalEvent event payload
+     */
+    emitLastImage(event: ImageModalEvent): void;
+    /**
+     * Method to emit hasData event.
+     * @param event ImageModalEvent event payload
+     */
+    emitHasData(event: ImageModalEvent): void;
+    /**
+     * Method to emit buttonBeforeHook event.
+     * @param event ImageModalEvent event payload
+     */
+    emitButtonBeforeHook(event: ButtonEvent): void;
+    /**
+     * Method to emit buttonAfterHook event.
+     * @param event ImageModalEvent event payload
+     */
+    emitButtonAfterHook(event: ButtonEvent): void;
+}
+
+/**
+ * Payload to be emitted via {@link triggerAttachToOverlay} to enable {@link AttachToOverlayService}
+ * to attach the {@link ModalGalleryComponent} to the overlay
+ */
+interface AttachToOverlayPayload {
+    /**
+     * Overlay object created using Angular CDK APIs
+     */
+    overlayRef: OverlayRef;
+    /**
+     * Dialog data to be injected into the {@link ModalGalleryComponent}
+     * contains: id, array of images, current image and optionally the configuration object
+     */
+    config: ModalGalleryConfig;
+    /**
+     * Object to control the dialog instance
+     */
+    dialogRef: ModalGalleryRef;
+}
+declare class ModalGalleryService {
+    private updateImages;
+    updateImages$: rxjs.Observable<Image[]>;
+    private dialogRef;
+    triggerAttachToOverlay: EventEmitter<AttachToOverlayPayload>;
+    private overlay;
+    private configService;
+    /**
+     * Method to open modal gallery passing the configuration
+     * @param config ModalGalleryConfig that contains: id, array of images, current image and optionally the configuration object
+     * @return ModalGalleryRef | undefined is the object used to listen for events.
+     */
+    open(config: ModalGalleryConfig): ModalGalleryRef | undefined;
+    /**
+     * Method to close a modal gallery previously opened.
+     * @param id Unique identifier of the modal gallery
+     * @param clickOutside boolean is true if closed clicking on the modal backdrop, false otherwise.
+     */
+    close(id: number, clickOutside: boolean): void;
+    /**
+     * Method to update images array.
+     * @param images Image[] updated array of images
+     */
+    updateModalImages(images: Image[]): void;
+    /**
+     * Method to emit close event.
+     * @param event ImageModalEvent is the event payload
+     */
+    emitClose(event: ImageModalEvent): void;
+    /**
+     * Method to emit show event.
+     * @param event ImageModalEvent is the event payload
+     */
+    emitShow(event: ImageModalEvent): void;
+    /**
+     * Method to emit firstImage event.
+     * @param event ImageModalEvent is the event payload
+     */
+    emitFirstImage(event: ImageModalEvent): void;
+    /**
+     * Method to emit lastImage event.
+     * @param event ImageModalEvent is the event payload
+     */
+    emitLastImage(event: ImageModalEvent): void;
+    /**
+     * Method to emit hasData event.
+     * @param event ImageModalEvent is the event payload
+     */
+    emitHasData(event: ImageModalEvent): void;
+    /**
+     * Method to emit buttonBeforeHook event.
+     * @param event ButtonEvent is the event payload
+     */
+    emitButtonBeforeHook(event: ButtonEvent): void;
+    /**
+     * Method to emit buttonAfterHook event.
+     * @param event ButtonEvent is the event payload
+     */
+    emitButtonAfterHook(event: ButtonEvent): void;
+    /**
+     * Private method to create an Overlay using Angular CDK APIs
+     * @private
+     */
+    private createOverlay;
+    /**
+     * Private method to create an OverlayConfig instance
+     * @private
+     */
+    private getOverlayConfig;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalGalleryService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ModalGalleryService>;
+}
+
+export { Action, ButtonType, ButtonsStrategy, CarouselComponent, DescriptionStrategy, GalleryModule, GridLayout, Image, ImageEvent, ImageModalEvent, KS_DEFAULT_ACCESSIBILITY_CONFIG, KS_DEFAULT_BTN_CLOSE, KS_DEFAULT_BTN_DELETE, KS_DEFAULT_BTN_DOWNLOAD, KS_DEFAULT_BTN_EXTURL, KS_DEFAULT_BTN_FULL_SCREEN, KS_DEFAULT_SIZE, LineLayout, LoadingType, ModalGalleryComponent, ModalGalleryRef, ModalGalleryService, PlainGalleryComponent, PlainGalleryStrategy };
+export type { AccessibilityConfig, BreakConfig, BreakpointsConfig, ButtonConfig, ButtonEvent, ButtonsConfig, CarouselConfig, CarouselImageConfig, CarouselLibConfig, CarouselPreviewConfig, CurrentImageConfig, Description, DotsConfig, InteractionEvent, KeyboardConfig, LoadingConfig, ModalGalleryConfig, ModalImage, ModalLibConfig, PlainGalleryConfig, PlainGalleryLayout, PlainImage, PlainLibConfig, PlayConfig, PreviewConfig, SidePreviewsConfig, Size, SlideConfig };