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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ks89/angular-modal-gallery",
-  "version": "13.0.0",
+  "version": "15.0.0-alpha.1",
   "description": "Image gallery for Angular",
   "license": "MIT",
   "author": "Stefano Cappa",
@@ -8,17 +8,18 @@
     "node": ">=20.0.0",
     "npm": ">=10.0.0"
   },
-  "homepage": "https://ks89.github.io/angular-modal-gallery-2024-v13.github.io/",
+  "homepage": "https://ks89.github.io/angular-modal-gallery-2025-v14.github.io/",
   "dependencies": {
     "tslib": ">=2.3.0"
   },
   "peerDependencies": {
-    "@angular/platform-browser": ">=19.0.0",
-    "@angular/common": ">=19.0.0",
-    "@angular/core": ">=19.0.0",
-    "@angular/cdk": ">=19.0.0",
+    "@angular/platform-browser": ">=20.0.0",
+    "@angular/common": ">=20.0.0",
+    "@angular/core": ">=20.0.0",
+    "@angular/cdk": ">=20.0.0",
     "rxjs": ">=7.8.0"
   },
+  "sideEffects": false,
   "keywords": [
     "angular-modal-gallery",
     "ngx-gallery",
@@ -47,7 +48,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/Ks89/angular-modal-gallery.git"
+    "url": "git+https://github.com/Ks89/angular-modal-gallery.git"
   },
   "bugs": {
     "url": "https://github.com/Ks89/angular-modal-gallery/issues"
@@ -62,6 +63,5 @@
       "types": "./index.d.ts",
       "default": "./fesm2022/ks89-angular-modal-gallery.mjs"
     }
-  },
-  "sideEffects": false
+  }
 }

package/lib/components/accessibility-default.d.ts

@@ -1,5 +0,0 @@
-import { AccessibilityConfig } from '../model/accessibility.interface';
-/**
- * Default accessibility configuration.
- */
-export declare const KS_DEFAULT_ACCESSIBILITY_CONFIG: AccessibilityConfig;

package/lib/components/accessible.component.d.ts

@@ -1,50 +0,0 @@
-import * as i0 from "@angular/core";
-/**
- * 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).
- */
-export declare class AccessibleComponent {
-    constructor();
-    /**
-     * Method to handle navigation events with both Keyboard and Mouse.
-     * @param string direction of the navigation that can be either 'next' or 'prev'
-     * @param KeyboardEvent | MouseEvent event 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 MouseEvent event 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 string direction of the navigation that can be either 'next' or 'prev'
-     * @param KeyboardEvent event 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 string direction of the navigation that can be either 'next' or 'prev'
-     * @param MouseEvent event 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, false, never>;
-}

package/lib/components/carousel/carousel-previews/carousel-previews.component.d.ts

@@ -1,195 +0,0 @@
-import { ChangeDetectorRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { DomSanitizer, SafeResourceUrl, SafeStyle } from '@angular/platform-browser';
-import { BreakpointObserver } from '@angular/cdk/layout';
-import { AccessibleComponent } from '../../accessible.component';
-import { AccessibilityConfig } from '../../../model/accessibility.interface';
-import { Image, ImageEvent } from '../../../model/image.class';
-import { InternalLibImage } from '../../../model/image-internal.class';
-import { CarouselPreviewConfig } from '../../../model/carousel-preview-config.interface';
-import { CarouselConfig } from '../../../model/carousel-config.interface';
-import { Action } from '../../../model/action.enum';
-import { ConfigService } from '../../../services/config.service';
-import * as i0 from "@angular/core";
-/**
- * Component with image previews for carousel
- */
-export 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
-     */
-    hostMaxWidth: string;
-    /**
-     * Variable to set aria-label of the host component
-     */
-    ariaLabel: string;
-    /**
-     * TODO write doc
-     */
-    id: number;
-    /**
-     * Object of type `InternalLibImage` that represent the visible image.
-     */
-    currentImage: InternalLibImage;
-    /**
-     * Array of `InternalLibImage` that represent the model of this library with all images,
-     * thumbs and so on.
-     */
-    images: InternalLibImage[];
-    /**
-     * Output to emit the clicked preview. The payload contains the `InternalLibImage` associated to the clicked preview.
-     */
-    clickPreview: EventEmitter<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 `InternalLibImage` exposed to the template. This field is initialized
-     * applying transformations, default values and so on to the input of the same type.
-     */
-    previews: InternalLibImage[];
-    /**
-     * 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;
-    constructor(ref: ChangeDetectorRef, breakpointObserver: BreakpointObserver, sanitizer: DomSanitizer, configService: ConfigService);
-    /**
-     * 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 InternalLibImage preview is an image to check if it's active or not
-     * @returns boolean true if is active, false otherwise
-     */
-    isActive(preview: InternalLibImage): 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 InternalLibImage preview that triggered this method
-     * @param KeyboardEvent | MouseEvent event payload
-     * @param Action that triggered this event (Action.NORMAL by default)
-     */
-    onImageEvent(preview: InternalLibImage, event: KeyboardEvent | MouseEvent, action?: Action): void;
-    /**
-     * Method called by events from both keyboard and mouse on a navigation arrow.
-     * @param string direction of the navigation that can be either 'next' or 'prev'
-     * @param KeyboardEvent | MouseEvent event payload
-     */
-    onNavigationEvent(direction: string, event: KeyboardEvent | MouseEvent): void;
-    /**
-     * Method to get aria-label text for a preview image.
-     * @param Image is the preview
-     */
-    getAriaLabel(preview: Image): string;
-    /**
-     * Method to get title text for a preview image.
-     * @param Image is the preview
-     */
-    getTitle(preview: Image): string;
-    /**
-     * Method to get alt text for a preview image.
-     * @param Image is the preview
-     */
-    getAlt(preview: Image): string;
-    /**
-     * Method used in the template to track ids in ngFor.
-     * @param number index of the array
-     * @param Image item of the array
-     * @returns number the id of the item
-     */
-    trackById(index: number, item: Image): number;
-    /**
-     * 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 InternalLibImage currentImage to decide how to show previews, because I always want to see the current image as highlighted
-     * @param InternalLibImage[] images 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 number boundaryIndex is the first or the last index of `images` input array
-     * @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, false, never>;
-}

package/lib/components/carousel/carousel.component.d.ts

@@ -1,276 +0,0 @@
-import { AfterContentInit, ChangeDetectorRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
-import { AccessibleComponent } from '../accessible.component';
-import { AccessibilityConfig } from '../../model/accessibility.interface';
-import { Image, ImageEvent } from '../../model/image.class';
-import { Action } from '../../model/action.enum';
-import { DotsConfig } from '../../model/dots-config.interface';
-import { CarouselConfig } from '../../model/carousel-config.interface';
-import { CarouselImageConfig } from '../../model/carousel-image-config.interface';
-import { ConfigService } from '../../services/config.service';
-import { ModalGalleryService } from '../modal-gallery/modal-gallery.service';
-import { CarouselLibConfig } from '../../model/lib-config.interface';
-import { InternalLibImage } from '../../model/image-internal.class';
-import * as i0 from "@angular/core";
-/**
- * Component with configurable inline/plain carousel.
- */
-export declare class CarouselComponent extends AccessibleComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges {
-    private platformId;
-    private ngZone;
-    private modalGalleryService;
-    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.
-     */
-    id: number | undefined;
-    /**
-     * Array of `InternalLibImage` that represent the model of this library with all images,
-     * thumbs and so on.
-     */
-    images: Image[];
-    /**
-     * CarouselLibConfig object to configure carousel.
-     */
-    config: CarouselLibConfig | undefined;
-    /**
-     * Output to emit an event when an image is clicked.
-     */
-    clickImage: EventEmitter<number>;
-    /**
-     * Output to emit an event when current image is changed.
-     */
-    changeImage: EventEmitter<ImageEvent>;
-    /**
-     * Output to emit an event when the current image is the first one.
-     */
-    firstImage: EventEmitter<ImageEvent>;
-    /**
-     * Output to emit an event when the current image is the last one.
-     */
-    lastImage: EventEmitter<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$;
-    /**
-     * 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(platformId: any, ngZone: NgZone, modalGalleryService: ModalGalleryService, 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 number index of the clicked dot
-     */
-    onClickDot(index: number): void;
-    /**
-     * Method called by events from both keyboard and mouse on a navigation arrow.
-     * @param string direction of the navigation that can be either 'next' or 'prev'
-     * @param KeyboardEvent | MouseEvent event 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 used in the template to track ids in ngFor.
-     * @param number index of the array
-     * @param Image item of the array
-     * @returns number the id of the item
-     */
-    trackById(index: number, item: Image): number;
-    /**
-     * 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 cleanup 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 boolean imageWithoutDescription 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 number currentIndex 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'.
-     * @param number index of the visible image
-     */
-    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 number boundaryIndex 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: 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, ["*"], false, never>;
-}

package/lib/components/components.d.ts

@@ -1,15 +0,0 @@
-import { CarouselComponent } from './carousel/carousel.component';
-import { CarouselPreviewsComponent } from './carousel/carousel-previews/carousel-previews.component';
-import { UpperButtonsComponent } from './upper-buttons/upper-buttons.component';
-import { DotsComponent } from './dots/dots.component';
-import { PreviewsComponent } from './previews/previews.component';
-import { CurrentImageComponent } from './current-image/current-image.component';
-import { LoadingSpinnerComponent } from './current-image/loading-spinner/loading-spinner.component';
-import { AccessibleComponent } from './accessible.component';
-import { PlainGalleryComponent } from './plain-gallery/plain-gallery.component';
-export { CarouselComponent } from './carousel/carousel.component';
-import { ModalGalleryComponent } from './modal-gallery/modal-gallery.component';
-/**
- * Array of all components.
- */
-export declare const COMPONENTS: (typeof AccessibleComponent | typeof CarouselComponent | typeof CarouselPreviewsComponent | typeof UpperButtonsComponent | typeof DotsComponent | typeof PreviewsComponent | typeof CurrentImageComponent | typeof LoadingSpinnerComponent | typeof PlainGalleryComponent | typeof ModalGalleryComponent)[];