@ks89/angular-modal-gallery 14.0.0 → 15.0.0

package/{index.d.ts → types/ks89-angular-modal-gallery.d.ts}

@@ -1,11 +1,10 @@
-import * as i0 from '@angular/core';
-import { OnInit, OnChanges, EventEmitter, SimpleChanges, TemplateRef, AfterContentInit, OnDestroy, NgZone, ChangeDetectorRef, Renderer2, ElementRef } from '@angular/core';
+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, Overlay } from '@angular/cdk/overlay';
-import { SafeResourceUrl, DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import { OverlayRef } from '@angular/cdk/overlay';
+import { SafeResourceUrl, SafeStyle } from '@angular/platform-browser';
 import * as rxjs from 'rxjs';
-import { BreakpointObserver } from '@angular/cdk/layout';
 
 /**
  * Interface `Accessibility` to config titles, alt texts, aria labels and so on
@@ -65,8 +64,8 @@ declare enum Action {
  * They can be pixels, percentages or also 'auto'.
  */
 interface Size {
-    width: string;
-    height: string;
+    width?: string;
+    height?: string;
 }
 
 /**
@@ -188,6 +187,55 @@ interface AdvancedConfig {
     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.
  */
@@ -225,6 +273,73 @@ interface PreviewConfig {
     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.
  */
@@ -296,6 +411,15 @@ interface CurrentImageConfig {
     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.
  */
@@ -339,82 +463,6 @@ interface CarouselPreviewConfig {
     breakpoints?: BreakpointsConfig;
 }
 
-/**
- * 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 `KeyboardConfig` to assign custom codes to ESC, RIGHT and LEFT keyboard's actions.
- */
-interface KeyboardConfig {
-    esc?: string;
-    right?: string;
-    left?: string;
-}
-
 interface AccessibleLibConfig {
     accessibilityConfig?: AccessibilityConfig;
 }
@@ -442,67 +490,10 @@ interface PlainLibConfig extends AccessibleLibConfig {
 }
 interface LibConfig extends ModalLibConfig, PlainLibConfig, CarouselLibConfig {
 }
-
-/**
- * Service to handle library configuration in a unique place
- */
-declare class ConfigService {
-    configMap: Map<number, LibConfig>;
-    getConfig(id: number): LibConfig | undefined;
-    setConfig(id: number, obj: LibConfig | undefined): void;
-    private initIfNotExists;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ConfigService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ConfigService>;
-}
-
-/**
- * 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 {
-    constructor();
-    /**
-     * 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: i0.ɵɵFactoryDeclaration<AccessibleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AccessibleComponent, "ks-accessible", never, {}, {}, never, never, true, never>;
+type DeepRequired<T> = {
+    [K in keyof T]: DeepRequired<T[K]>;
+} & Required<T>;
+interface LibConfigInternal extends DeepRequired<ModalLibConfig>, DeepRequired<PlainLibConfig>, DeepRequired<CarouselLibConfig> {
 }
 
 /**
@@ -513,24 +504,23 @@ declare class AccessibleComponent {
  * Also, it emits click events as outputs.
  */
 declare class PlainGalleryComponent extends AccessibleComponent implements OnInit, OnChanges {
-    private configService;
     /**
      * Unique id (>=0) of the current instance of this library. This is required when you are using
      * the service to call modal gallery.
      */
-    id: number | undefined;
+    readonly id: _angular_core.InputSignal<number | undefined>;
     /**
      * Array of `Image` that represent the model of this library with all images, thumbs and so on.
      */
-    images: Image[];
+    readonly images: _angular_core.InputSignal<Image[]>;
     /**
      * PlainLibConfig object to configure plain-gallery.
      */
-    config: PlainLibConfig | undefined;
+    readonly config: _angular_core.InputSignal<PlainLibConfig | undefined>;
     /**
      * Output to emit an event when an image is clicked.
      */
-    clickImage: EventEmitter<number>;
+    readonly clickImage: _angular_core.OutputEmitterRef<number>;
     /**
      * Object of type `PlainGalleryConfig` to configure the plain gallery.
      */
@@ -570,7 +560,7 @@ declare class PlainGalleryComponent extends AccessibleComponent implements OnIni
      * For more info check https://developer.mozilla.org/it/docs/Web/CSS/justify-content
      */
     justifyStyle: string | undefined;
-    constructor(configService: ConfigService);
+    private configService;
     /**
      * Method ´ngOnInit´ to init both `configPlainGallery` calling `initPlainGalleryConfig()`
      * and `imageGrid invoking `initImageGrid()`.
@@ -621,186 +611,27 @@ declare class PlainGalleryComponent extends AccessibleComponent implements OnIni
      * based on the layout type.
      */
     private initImageGrid;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PlainGalleryComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PlainGalleryComponent, "ks-plain-gallery", never, { "id": { "alias": "id"; "required": false; }; "images": { "alias": "images"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "clickImage": "clickImage"; }, never, never, true, never>;
+    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>;
 }
 
 /**
- * Class that represents the modal dialog instance.
- * It is returned by the open method.
- */
-declare class ModalGalleryRef {
-    private overlayRef;
-    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>;
-    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;
-}
-
-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>;
-}
-
-/**
- * Payload to be emitted via {@link triggerAttachToOverlay} to enable {@link AttachToOverlayService}
- * to attach the {@link ModalGalleryComponent} to the overlay
+ * Service to handle library configuration in a unique place
  */
-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 overlay;
-    private configService;
-    private updateImages;
-    updateImages$: rxjs.Observable<Image[]>;
-    private dialogRef;
-    triggerAttachToOverlay: EventEmitter<AttachToOverlayPayload>;
-    constructor(overlay: Overlay, configService: 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: i0.ɵɵFactoryDeclaration<ModalGalleryService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ModalGalleryService>;
+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 platformId;
     private ngZone;
-    private modalGalleryService;
     private configService;
     private ref;
     /**
@@ -811,32 +642,32 @@ declare class CarouselComponent extends AccessibleComponent implements OnInit, A
      * 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.
      */
-    id: number | undefined;
+    readonly id: _angular_core.InputSignal<number>;
     /**
      * Array of `InternalLibImage` that represent the model of this library with all images,
      * thumbs and so on.
      */
-    images: Image[];
+    readonly images: _angular_core.InputSignal<Image[]>;
     /**
      * CarouselLibConfig object to configure carousel.
      */
-    config: CarouselLibConfig | undefined;
+    readonly config: _angular_core.InputSignal<CarouselLibConfig | undefined>;
     /**
      * Output to emit an event when an image is clicked.
      */
-    clickImage: EventEmitter<number>;
+    readonly clickImage: _angular_core.OutputEmitterRef<number>;
     /**
      * Output to emit an event when current image is changed.
      */
-    changeImage: EventEmitter<ImageEvent>;
+    readonly changeImage: _angular_core.OutputEmitterRef<ImageEvent>;
     /**
      * Output to emit an event when the current image is the first one.
      */
-    firstImage: EventEmitter<ImageEvent>;
+    readonly firstImage: _angular_core.OutputEmitterRef<ImageEvent>;
     /**
      * Output to emit an event when the current image is the last one.
      */
-    lastImage: EventEmitter<ImageEvent>;
+    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.
@@ -892,6 +723,7 @@ declare class CarouselComponent extends AccessibleComponent implements OnInit, A
      * Subject to stop the carousel.
      */
     private stop$;
+    private readonly platformId;
     /**
      * Listener to stop the gallery when the mouse pointer is over the current image.
      */
@@ -908,7 +740,7 @@ declare class CarouselComponent extends AccessibleComponent implements OnInit, A
      * Listener to navigate carousel images with keyboard (right).
      */
     onKeyDownLRight(): void;
-    constructor(platformId: any, ngZone: NgZone, modalGalleryService: ModalGalleryService, configService: ConfigService, ref: ChangeDetectorRef);
+    constructor(ngZone: NgZone, configService: ConfigService, ref: ChangeDetectorRef);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterContentInit(): void;
@@ -1046,18 +878,14 @@ declare class CarouselComponent extends AccessibleComponent implements OnInit, A
      *  either the first or the last one.
      */
     private isPreventSliding;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CarouselComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CarouselComponent, "ks-carousel", never, { "id": { "alias": "id"; "required": false; }; "images": { "alias": "images"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "clickImage": "clickImage"; "changeImage": "changeImage"; "firstImage": "firstImage"; "lastImage": "lastImage"; }, never, ["*"], true, never>;
+    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 {
-    private ref;
-    private breakpointObserver;
-    private sanitizer;
-    private configService;
     /**
      * Variable to change the max-width of the host component
      */
@@ -1067,22 +895,23 @@ declare class CarouselPreviewsComponent extends AccessibleComponent implements O
      */
     ariaLabel: string;
     /**
-     * TODO write doc
+     * 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.
      */
-    id: number;
+    readonly id: _angular_core.InputSignal<number>;
     /**
-     * Object of type `InternalLibImage` that represent the visible image.
+     * Object of type `Image` that represent the visible image.
      */
-    currentImage: InternalLibImage;
+    readonly currentImage: _angular_core.InputSignal<InternalLibImage>;
     /**
-     * Array of `InternalLibImage` that represent the model of this library with all images,
+     * Array of `Image` that represent the model of this library with all images,
      * thumbs and so on.
      */
-    images: InternalLibImage[];
+    readonly images: _angular_core.InputSignal<Image[]>;
     /**
-     * Output to emit the clicked preview. The payload contains the `InternalLibImage` associated to the clicked preview.
+     * Output to emit the clicked preview. The payload contains the `Image` associated to the clicked preview.
      */
-    clickPreview: EventEmitter<ImageEvent>;
+    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.
@@ -1109,10 +938,10 @@ declare class CarouselPreviewsComponent extends AccessibleComponent implements O
      */
     keyboardAction: Action;
     /**
-     * Array of `InternalLibImage` exposed to the template. This field is initialized
+     * 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: InternalLibImage[];
+    previews: Image[];
     /**
      * Variable with the preview's maxHeight
      */
@@ -1122,11 +951,15 @@ declare class CarouselPreviewsComponent extends AccessibleComponent implements O
      */
     start: number;
     /**
-     * End index (non inclusive) of the input images used to display previews.
+     * End index (non-inclusive) of the input images used to display previews.
      */
     end: number;
     private readonly breakpointSubscription;
-    constructor(ref: ChangeDetectorRef, breakpointObserver: BreakpointObserver, sanitizer: DomSanitizer, configService: ConfigService);
+    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.
@@ -1141,10 +974,10 @@ declare class CarouselPreviewsComponent extends AccessibleComponent implements O
     ngOnInit(): void;
     /**
      * Method to check if an image is active (i.e. a preview image).
-     * @param preview InternalLibImage is an image to check if it's active or not
+     * @param preview Image is an image to check if it's active or not
      * @returns boolean true if is active, false otherwise
      */
-    isActive(preview: InternalLibImage): boolean;
+    isActive(preview: Image): boolean;
     /**
      * Method ´ngOnChanges´ to update `previews` array.
      * Also, both `start` and `end` local variables will be updated accordingly.
@@ -1155,11 +988,11 @@ declare class CarouselPreviewsComponent extends AccessibleComponent implements O
     /**
      * 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 InternalLibImage that triggered this method
+     * @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: InternalLibImage, event: KeyboardEvent | MouseEvent, action?: Action): void;
+    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'
@@ -1197,8 +1030,8 @@ declare class CarouselPreviewsComponent extends AccessibleComponent implements O
     /**
      * 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 InternalLibImage to decide how to show previews, because I always want to see the current image as highlighted
-     * @param images InternalLibImage[] is the array of all images.
+     * @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;
     /**
@@ -1223,8 +1056,8 @@ declare class CarouselPreviewsComponent extends AccessibleComponent implements O
      * @returns boolean if true block sliding, otherwise not
      */
     private isPreventSliding;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CarouselPreviewsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CarouselPreviewsComponent, "ks-carousel-previews", never, { "id": { "alias": "id"; "required": false; }; "currentImage": { "alias": "currentImage"; "required": false; }; "images": { "alias": "images"; "required": false; }; }, { "clickPreview": "clickPreview"; }, never, never, true, never>;
+    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>;
 }
 
 /**
@@ -1238,49 +1071,48 @@ interface InternalButtonConfig extends ButtonConfig {
  * Also it emits click events as outputs.
  */
 declare class UpperButtonsComponent extends AccessibleComponent implements OnInit {
-    private configService;
     /**
      * Unique id (>=0) of the current instance of this library. This is required when you are using
      * the service to call modal gallery.
      */
-    id: number;
+    readonly id: _angular_core.InputSignal<number>;
     /**
      * Object of type `Image` that represent the visible image.
      */
-    currentImage: 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`.
      */
-    refresh: EventEmitter<ButtonEvent>;
+    readonly refresh: OutputEmitterRef<ButtonEvent>;
     /**
      * Output to emit clicks on delete button. The payload contains a `ButtonEvent`.
      */
-    delete: EventEmitter<ButtonEvent>;
+    readonly delete: OutputEmitterRef<ButtonEvent>;
     /**
      * Output to emit clicks on navigate button. The payload contains a `ButtonEvent`.
      */
-    navigate: EventEmitter<ButtonEvent>;
+    readonly navigate: OutputEmitterRef<ButtonEvent>;
     /**
      * Output to emit clicks on download button. The payload contains a `ButtonEvent`.
      */
-    download: EventEmitter<ButtonEvent>;
+    readonly download: OutputEmitterRef<ButtonEvent>;
     /**
      * Output to emit clicks on close button. The payload contains a `ButtonEvent`.
      */
-    closeButton: EventEmitter<ButtonEvent>;
+    readonly closeButton: OutputEmitterRef<ButtonEvent>;
     /**
      * Output to emit clicks on full-screen button. The payload contains a `ButtonEvent`.
      */
-    fullscreen: EventEmitter<ButtonEvent>;
+    readonly fullscreen: OutputEmitterRef<ButtonEvent>;
     /**
      * Output to emit clicks on all custom buttons. The payload contains a `ButtonEvent`.
      */
-    customEmit: EventEmitter<ButtonEvent>;
-    /**
-     * Object of type `ButtonsConfig` to init UpperButtonsComponent's features.
-     * For instance, it contains an array of buttons.
-     */
-    buttonsConfig: ButtonsConfig | undefined;
+    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.
@@ -1302,7 +1134,6 @@ declare class UpperButtonsComponent extends AccessibleComponent implements OnIni
      * Default buttons array for full configuration
      */
     private fullButtonsDefault;
-    constructor(configService: ConfigService);
     /**
      * Method ´ngOnInit´ to build `configButtons` applying a default value and also to
      * init the `buttons` array.
@@ -1346,63 +1177,46 @@ declare class UpperButtonsComponent extends AccessibleComponent implements OnIni
      * 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 is exists a button with an unknown type
+     * @throws an error if exists a button with an unknown type
      */
     private validateCustomButtons;
-    static ɵfac: i0.ɵɵFactoryDeclaration<UpperButtonsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<UpperButtonsComponent, "ks-upper-buttons", never, { "id": { "alias": "id"; "required": false; }; "currentImage": { "alias": "currentImage"; "required": false; }; }, { "refresh": "refresh"; "delete": "delete"; "navigate": "navigate"; "download": "download"; "closeButton": "closeButton"; "fullscreen": "fullscreen"; "customEmit": "customEmit"; }, never, never, true, never>;
+    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 implements OnInit, OnChanges {
-    private configService;
+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.
      */
-    id: number;
+    readonly id: _angular_core.InputSignal<number>;
     /**
      * Object of type `InternalLibImage` that represent the visible image.
      */
-    currentImage: InternalLibImage | undefined;
+    readonly currentImage: _angular_core.InputSignal<Image>;
     /**
      * Array of `InternalLibImage` that represent the model of this library with all images,
      * thumbs and so on.
      */
-    images: InternalLibImage[] | undefined;
+    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.
      */
-    dotsConfig: DotsConfig;
-    /**
-     * Output to emit clicks on dots. The payload contains a number that represent
-     * the index of the clicked dot.
-     */
-    clickDot: EventEmitter<number>;
-    /**
-     * Object of type `DotsConfig` used in template.
-     */
-    configDots: DotsConfig | undefined;
+    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.
      */
-    accessibilityConfig: AccessibilityConfig | undefined;
-    constructor(configService: ConfigService);
-    /**
-     * Method ´ngOnInit´ to build `configDots` applying a default value.
-     * This is an angular lifecycle hook, so its called automatically by Angular itself.
-     * In particular, it's called only one time!!!
-     */
-    ngOnInit(): void;
+    readonly accessibilityConfig: _angular_core.InputSignal<AccessibilityConfig>;
     /**
-     * Method ´ngOnChanges´ to change `configDots` if the input dotsConfig is changed.
-     * This is an angular lifecycle hook, so its called automatically by Angular itself.
+     * Output to emit clicks on dots. The payload contains a number that represent
+     * the index of the clicked dot.
      */
-    ngOnChanges(changes: SimpleChanges): void;
+    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.
@@ -1416,40 +1230,39 @@ declare class DotsComponent extends AccessibleComponent implements OnInit, OnCha
      * @param event KeyboardEvent | MouseEvent payload
      */
     onDotEvent(index: number, event: KeyboardEvent | MouseEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DotsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DotsComponent, "ks-dots", never, { "id": { "alias": "id"; "required": false; }; "currentImage": { "alias": "currentImage"; "required": false; }; "images": { "alias": "images"; "required": false; }; "dotsConfig": { "alias": "dotsConfig"; "required": false; }; }, { "clickDot": "clickDot"; }, never, never, true, never>;
+    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 {
-    private configService;
     /**
      * Unique id (>=0) of the current instance of this library. This is required when you are using
      * the service to call modal-gallery.
      */
-    id: number;
+    readonly id: _angular_core.InputSignal<number>;
     /**
-     * Object of type `InternalLibImage` that represent the visible image.
+     * Object of type `Image` that represent the visible image.
      */
-    currentImage: InternalLibImage;
+    readonly currentImage: _angular_core.InputSignal<Image>;
     /**
-     * Array of `InternalLibImage` that represent the model of this library with all images,
+     * Array of `Image` that represent the model of this library with all images,
      * thumbs and so on.
      */
-    images: InternalLibImage[];
+    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)
      */
-    customTemplate?: TemplateRef<HTMLElement>;
+    readonly customTemplate: _angular_core.InputSignal<TemplateRef<HTMLElement> | undefined>;
     /**
      * Output to emit the clicked preview. The payload contains the `ImageEvent` associated to the clicked preview.
      */
-    clickPreview: EventEmitter<ImageEvent>;
+    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.
@@ -1475,10 +1288,10 @@ declare class PreviewsComponent extends AccessibleComponent implements OnInit, O
      */
     keyboardAction: Action;
     /**
-     * Array of `InternalLibImage` exposed to the template. This field is initialized
+     * 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: InternalLibImage[];
+    previews: Image[];
     /**
      * Start index (included) of the input images used to display previews.
      */
@@ -1488,7 +1301,7 @@ declare class PreviewsComponent extends AccessibleComponent implements OnInit, O
      */
     end: number;
     defaultPreviewSize: Size;
-    constructor(configService: ConfigService);
+    private configService;
     /**
      * Method ´ngOnInit´ to build `configPreview` applying a default value and also to
      * init the `previews` array.
@@ -1498,10 +1311,10 @@ declare class PreviewsComponent extends AccessibleComponent implements OnInit, O
     ngOnInit(): void;
     /**
      * Method to check if an image is active (i.e. a preview image).
-     * @param preview InternalLibImage is an image to check if it's active or not
+     * @param preview Image is an image to check if it's active or not
      * @returns boolean true if is active, false otherwise
      */
-    isActive(preview: InternalLibImage): boolean;
+    isActive(preview: Image): boolean;
     /**
      * Method ´ngOnChanges´ to update `previews` array.
      * Also, both `start` and `end` local variables will be updated accordingly.
@@ -1512,11 +1325,11 @@ declare class PreviewsComponent extends AccessibleComponent implements OnInit, O
     /**
      * 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 InternalLibImage that triggered this method
+     * @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: InternalLibImage, event: KeyboardEvent | MouseEvent, action?: Action): void;
+    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.
@@ -1538,8 +1351,8 @@ declare class PreviewsComponent extends AccessibleComponent implements OnInit, O
     /**
      * 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 InternalLibImage to decide how to show previews, because I always want to see the current image as highlighted
-     * @param images InternalLibImage[] is the array of all images.
+     * @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;
     /**
@@ -1554,8 +1367,8 @@ declare class PreviewsComponent extends AccessibleComponent implements OnInit, O
      * Private method to update the visible previews navigating to the left (previous).
      */
     private previous;
-    static ɵfac: i0.ɵɵFactoryDeclaration<PreviewsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PreviewsComponent, "ks-previews", never, { "id": { "alias": "id"; "required": false; }; "currentImage": { "alias": "currentImage"; "required": false; }; "images": { "alias": "images"; "required": false; }; "customTemplate": { "alias": "customTemplate"; "required": false; }; }, { "clickPreview": "clickPreview"; }, never, never, true, never>;
+    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>;
 }
 
 /**
@@ -1571,41 +1384,37 @@ interface ImageLoadEvent {
  * Component with the current image with some additional elements like arrows and side previews.
  */
 declare class CurrentImageComponent extends AccessibleComponent implements OnInit, OnChanges, AfterContentInit, OnDestroy {
-    private platformId;
-    private ngZone;
-    ref: ChangeDetectorRef;
-    private configService;
     /**
      * 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;
+    id: _angular_core.InputSignal<number>;
     /**
      * Object of type `InternalLibImage` that represent the visible image.
      */
-    currentImage: InternalLibImage;
+    currentImage: _angular_core.InputSignal<InternalLibImage>;
     /**
      * Array of `InternalLibImage` that represent the model of this library with all images,
      * thumbs and so on.
      */
-    images: InternalLibImage[];
+    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: boolean;
+    isOpen: _angular_core.InputSignal<boolean>;
     /**
      * Output to emit an event when images are loaded. The payload contains an `ImageLoadEvent`.
      */
-    loadImage: EventEmitter<ImageLoadEvent>;
+    readonly loadImage: _angular_core.OutputEmitterRef<ImageLoadEvent>;
     /**
      * Output to emit any changes of the current image. The payload contains an `ImageModalEvent`.
      */
-    changeImage: EventEmitter<ImageModalEvent>;
+    readonly changeImage: _angular_core.OutputEmitterRef<ImageModalEvent>;
     /**
      * Output to emit an event when the modal gallery is closed. The payload contains an `ImageModalEvent`.
      */
-    closeGallery: EventEmitter<ImageModalEvent>;
+    readonly closeGallery: _angular_core.OutputEmitterRef<ImageModalEvent>;
     /**
      * Subject to play modal-gallery.
      */
@@ -1662,7 +1471,10 @@ declare class CurrentImageComponent extends AccessibleComponent implements OnIni
      * True by default
      */
     loading: boolean;
-    constructor(platformId: any, ngZone: NgZone, ref: ChangeDetectorRef, configService: ConfigService);
+    private readonly platformId;
+    private ngZone;
+    private configService;
+    ref: ChangeDetectorRef;
     /**
      * Listener to stop the gallery when the mouse pointer is over the current image.
      */
@@ -1826,8 +1638,8 @@ declare class CurrentImageComponent extends AccessibleComponent implements OnIni
      * Private method to call handleBoundaries when ngOnChanges is called.
      */
     private updateIndexes;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CurrentImageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CurrentImageComponent, "ks-current-image", never, { "id": { "alias": "id"; "required": false; }; "currentImage": { "alias": "currentImage"; "required": false; }; "images": { "alias": "images"; "required": false; }; "isOpen": { "alias": "isOpen"; "required": false; }; }, { "loadImage": "loadImage"; "changeImage": "changeImage"; "closeGallery": "closeGallery"; }, never, never, true, never>;
+    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>;
 }
 
 /**
@@ -1838,12 +1650,12 @@ declare class LoadingSpinnerComponent {
      * Object of type `LoadingConfig` exposed to the template.
      * It contains a field to choose a loading spinner.
      */
-    loadingConfig: LoadingConfig;
+    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.
      */
-    accessibilityConfig: AccessibilityConfig;
+    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.
@@ -1879,47 +1691,15 @@ declare class LoadingSpinnerComponent {
      * Declared here to be used inside the template.
      */
     loadingExplosingSquares: LoadingType;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LoadingSpinnerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LoadingSpinnerComponent, "ks-loading-spinner", never, { "loadingConfig": { "alias": "loadingConfig"; "required": false; }; "accessibilityConfig": { "alias": "accessibilityConfig"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-/**
- * Service to check if the provided id is unique
- */
-declare class IdValidatorService {
-    ids: Map<any, any>;
-    /**
-     * Method to check and reserve an id for the current instance of the library.
-     * In this way, no other instances can use the same id.
-     * @param galleryId number or undefined that represents the unique id of the gallery.
-     * @return boolean true if success. false is never returned, instead an exception is thrown
-     * @throws a error with a message if galleryId is neither unique, < 0 or an integer
-     */
-    checkAndAdd(galleryId: number | undefined): boolean;
-    /**
-     * Method to remove a reserved id. In this way you are able to use the id again for another instance of the library.
-     * @param galleryId number or undefined that represents the unique id of the gallery.
-     * @return boolean true if success. false is never returned, instead an exception is thrown*
-     * @throws a error with a message if galleryId is neither integer or < 0
-     * * this should be improved without return true, because it doesn't make sense! :(
-     */
-    remove(galleryId: number | undefined): boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<IdValidatorService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<IdValidatorService>;
+    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 {
-    private dialogContent;
-    private modalGalleryService;
-    private platformId;
-    private changeDetectorRef;
-    private idValidatorService;
-    private configService;
-    private sanitizer;
     /**
      * Reference to the CurrentImageComponent to invoke methods on it.
      */
-    currentImageComponent: CurrentImageComponent | undefined;
+    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.
@@ -1928,7 +1708,7 @@ declare class ModalGalleryComponent implements OnInit, OnDestroy {
     /**
      * Object of type `ButtonsConfig` to show/hide buttons.
      */
-    buttonsConfig: ButtonsConfig | undefined;
+    buttonsConfig: ButtonsConfig;
     /**
      * Boolean to enable modal-gallery close behaviour when clicking
      * on the semi-transparent background. Enabled by default.
@@ -1981,7 +1761,9 @@ declare class ModalGalleryComponent implements OnInit, OnDestroy {
      * Object to configure this component.
      */
     libConfig: LibConfig | undefined;
-    private updateImagesSubscription;
+    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.
@@ -1992,8 +1774,13 @@ declare class ModalGalleryComponent implements OnInit, OnDestroy {
      * 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: KeyboardEvent): void;
-    constructor(dialogContent: ModalGalleryConfig, modalGalleryService: ModalGalleryService, platformId: Object, changeDetectorRef: ChangeDetectorRef, idValidatorService: IdValidatorService, configService: ConfigService, sanitizer: DomSanitizer);
+    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.
@@ -2087,7 +1874,9 @@ declare class ModalGalleryComponent implements OnInit, OnDestroy {
      */
     private downloadImage;
     /**
-     * Method to convert a base64 to a Blob
+     * Method to convert a base64 to a Blob.
+     * This should be upgraded with Uint8Array.fromBase64() from ES2025,
+     * but first we need to upgrade `tsconfig` config.
      * @param base64Data string with base64 data
      * @param contentType string with the MIME type
      * @return Blob converted from the input base64Data
@@ -2132,8 +1921,8 @@ declare class ModalGalleryComponent implements OnInit, OnDestroy {
      * @private
      */
     private emitBoundaryEvent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ModalGalleryComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModalGalleryComponent, "ks-modal-gallery", never, {}, {}, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ModalGalleryComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ModalGalleryComponent, "ks-modal-gallery", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -2145,31 +1934,30 @@ declare class ClickOutsideDirective {
     /**
      * Boolean to enable this directive.
      */
-    clickOutsideEnable: boolean | undefined;
+    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.
      */
-    clickOutside: EventEmitter<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: i0.ɵɵFactoryDeclaration<ClickOutsideDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClickOutsideDirective, "[ksClickOutside]", never, { "clickOutsideEnable": { "alias": "clickOutsideEnable"; "required": false; }; }, { "clickOutside": "clickOutside"; }, never, never, true, never>;
+    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 {
-    private renderer;
-    private el;
     /**
      * Object of type `Size` to resize the element.
      */
-    sizeConfig: Size | undefined;
-    constructor(renderer: Renderer2, el: ElementRef);
+    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.
@@ -2186,8 +1974,8 @@ declare class SizeDirective implements OnInit, OnChanges {
      * Private method to change both width and height of an element.
      */
     private applyStyle;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SizeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SizeDirective, "[ksSize]", never, { "sizeConfig": { "alias": "sizeConfig"; "required": false; }; }, {}, never, never, true, never>;
+    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>;
 }
 
 /**
@@ -2197,11 +1985,11 @@ declare class KeyboardNavigationDirective {
     /**
      * Boolean input to skip keyboard navigation.
      */
-    isOpen: boolean | undefined;
+    isOpen: _angular_core.InputSignal<boolean>;
     /**
      * Output to emit keyboard `code` of the pressed key (keydown).
      */
-    keyboardNavigation: EventEmitter<string>;
+    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.
@@ -2209,25 +1997,24 @@ declare class KeyboardNavigationDirective {
      * @param e KeyboardEvent caught by the listener.
      */
     onKeyDown(e: KeyboardEvent): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KeyboardNavigationDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KeyboardNavigationDirective, "[ksKeyboardNavigation]", never, { "isOpen": { "alias": "isOpen"; "required": false; }; }, { "keyboardNavigation": "keyboardNavigation"; }, never, never, true, never>;
+    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 {
-    private renderer;
-    private el;
     /**
      * Boolean input that it's true to add 'flex-wrap: wrap', 'flex-wrap: nowrap' otherwise.
      */
-    wrap: boolean | undefined;
+    readonly wrap: _angular_core.InputSignal<boolean>;
     /**
      * String input to force the width of the element to be able to see wrapping.
      */
-    width: string | undefined;
-    constructor(renderer: Renderer2, el: ElementRef);
+    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.
@@ -2244,25 +2031,24 @@ declare class WrapDirective implements OnInit, OnChanges {
      * Private method to change both width and flex-wrap css properties.
      */
     private applyStyle;
-    static ɵfac: i0.ɵɵFactoryDeclaration<WrapDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<WrapDirective, "[ksWrap]", never, { "wrap": { "alias": "wrap"; "required": false; }; "width": { "alias": "width"; "required": false; }; }, {}, never, never, true, never>;
+    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 {
-    private renderer;
-    private el;
     /**
      * String input to set the css flex-direction of an element.
      */
-    direction: string | undefined;
+    readonly direction: _angular_core.InputSignal<string | undefined>;
     /**
      * String input to set the css justify-content of an element.
      */
-    justify: string | undefined;
-    constructor(renderer: Renderer2, el: ElementRef);
+    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.
@@ -2279,26 +2065,25 @@ declare class DirectionDirective implements OnInit, OnChanges {
      * Private method to change both direction and justify of an element.
      */
     private applyStyle;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DirectionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DirectionDirective, "[ksDirection]", never, { "direction": { "alias": "direction"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; }, {}, never, never, true, never>;
+    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 {
-    private renderer;
-    private el;
     /**
      * Object of type `Image` that represents the image to add to the `<a>` tag.
      */
-    image: Image | undefined;
+    readonly image: _angular_core.InputSignal<Image>;
     /**
      * Additional style to customize the background attribute.
      * Empty string by default.
      */
-    style: string | undefined;
-    constructor(renderer: Renderer2, el: ElementRef);
+    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.
@@ -2315,21 +2100,20 @@ declare class ATagBgImageDirective implements OnInit, OnChanges {
      * Private method to add an image as background of an `<a>` tag.
      */
     private applyStyle;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ATagBgImageDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ATagBgImageDirective, "[ksATagBgImage]", never, { "image": { "alias": "image"; "required": false; }; "style": { "alias": "style"; "required": false; }; }, {}, never, never, true, never>;
+    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 {
-    private renderer;
-    private el;
     /**
      * Object of type `Description` to resize the element.
      */
-    description: Description | undefined;
-    constructor(renderer: Renderer2, el: ElementRef);
+    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.
@@ -2346,33 +2130,32 @@ declare class DescriptionDirective implements OnInit, OnChanges {
      * Private method to change description's style.
      */
     private applyStyle;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DescriptionDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DescriptionDirective, "[ksDescription]", never, { "description": { "alias": "description"; "required": false; }; }, {}, never, never, true, never>;
+    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 {
-    private renderer;
-    private el;
     /**
      * String to set the margin of an element.
      */
-    marginLeft: string | undefined;
+    readonly marginLeft: _angular_core.InputSignal<string | undefined>;
     /**
      * String to set the margin of an element.
      */
-    marginRight: string | undefined;
+    readonly marginRight: _angular_core.InputSignal<string | undefined>;
     /**
      * String to set the margin of an element.
      */
-    marginTop: string | undefined;
+    readonly marginTop: _angular_core.InputSignal<string | undefined>;
     /**
      * String to set the margin of an element.
      */
-    marginBottom: string | undefined;
-    constructor(renderer: Renderer2, el: ElementRef);
+    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.
@@ -2389,8 +2172,8 @@ declare class MarginDirective implements OnInit, OnChanges {
      * Private method to change both width and height of an element.
      */
     private applyStyle;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MarginDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MarginDirective, "[ksMargin]", never, { "marginLeft": { "alias": "marginLeft"; "required": false; }; "marginRight": { "alias": "marginRight"; "required": false; }; "marginTop": { "alias": "marginTop"; "required": false; }; "marginBottom": { "alias": "marginBottom"; "required": false; }; }, {}, never, never, true, never>;
+    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>;
 }
 
 /**
@@ -2406,13 +2189,12 @@ interface MaxSize {
  * Directive to change the max size of an element.
  */
 declare class MaxSizeDirective implements OnInit, OnChanges {
-    private renderer;
-    private el;
     /**
      * Object of type `MaxSize` to resize the element.
      */
-    maxSizeConfig: MaxSize | undefined;
-    constructor(renderer: Renderer2, el: ElementRef);
+    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.
@@ -2429,22 +2211,21 @@ declare class MaxSizeDirective implements OnInit, OnChanges {
      * Private method to change both max-width and max-height of an element.
      */
     private applyStyle;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MaxSizeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MaxSizeDirective, "[ksMaxSize]", never, { "maxSizeConfig": { "alias": "maxSizeConfig"; "required": false; }; }, {}, never, never, true, never>;
+    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;
-    fallbackImg: string | SafeResourceUrl | undefined;
-    fallbackApplied: EventEmitter<boolean>;
-    constructor(renderer: Renderer2, el: ElementRef);
     onError(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<FallbackImageDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<FallbackImageDirective, "[ksFallbackImage]", never, { "fallbackImg": { "alias": "fallbackImg"; "required": false; }; }, { "fallbackApplied": "fallbackApplied"; }, never, never, true, never>;
+    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>;
 }
 
 /**
@@ -2459,35 +2240,49 @@ declare class SwipeDirective {
     /**
      * Output to emit swipe left event. Payload is empty.
      */
-    swipeLeft: EventEmitter<void>;
+    readonly swipeLeft: _angular_core.OutputEmitterRef<void>;
     /**
      * Output to emit swipe right event. Payload is empty.
      */
-    swipeRight: EventEmitter<void>;
+    readonly swipeRight: _angular_core.OutputEmitterRef<void>;
     /**
      * Output to emit swipe up event. Payload is empty.
      */
-    swipeUp: EventEmitter<void>;
+    readonly swipeUp: _angular_core.OutputEmitterRef<void>;
     /**
      * Output to emit swipe down event. Payload is empty.
      */
-    swipeDown: EventEmitter<void>;
+    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: i0.ɵɵFactoryDeclaration<SwipeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SwipeDirective, "[ksSwipe]", never, {}, { "swipeLeft": "swipeLeft"; "swipeRight": "swipeRight"; "swipeUp": "swipeUp"; "swipeDown": "swipeDown"; }, never, never, true, never>;
+    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: i0.ɵɵFactoryDeclaration<GalleryModule, never>;
-    static ɵmod: i0.ɵɵ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: i0.ɵɵInjectorDeclaration<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 {
@@ -2526,5 +2321,159 @@ declare const KS_DEFAULT_BTN_DELETE: ButtonConfig;
  */
 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 };