@ks89/angular-modal-gallery/lib/components/previews/previews.component.d.ts

Image gallery for Angular

import { EventEmitter, OnChanges, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
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 { PreviewConfig } from '../../model/preview-config.interface';
import { SlideConfig } from '../../model/slide-config.interface';
import { Action } from '../../model/action.enum';
import { ConfigService } from '../../services/config.service';
import { Size } from '../../model/size.interface';
import * as i0 from "@angular/core";
/**
 * Component with image previews
 */
export 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;
    /**
     * 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[];
    /**
     * Optional template reference for the rendering of previews.
     * Template may access 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>;
    /**
     * Output to emit the clicked preview. The payload contains the `ImageEvent` associated to the clicked preview.
     */
    clickPreview: EventEmitter<ImageEvent>;
    /**
     * Object of type `AccessibilityConfig` to init custom accessibility features.
     * For instance, it contains titles, alt texts, aria-labels and so on.
     */
    accessibilityConfig: AccessibilityConfig | undefined;
    /**
     * Object of type `SlideConfig` to get `infinite sliding`.
     */
    slideConfig: SlideConfig | undefined;
    /**
     * Object of type `PreviewConfig` to init PreviewsComponent's features.
     * For instance, it contains a param to show/hide this component, sizes.
     */
    previewConfig: PreviewConfig | undefined;
    /**
     * Enum of type `Action` that represents a mouse click on a button.
     * Declared here to be used inside the template.
     */
    clickAction: Action;
    /**
     * Enum of type `Action` that represents a keyboard action.
     * Declared here to be used inside the template.
     */
    keyboardAction: Action;
    /**
     * Array of `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[];
    /**
     * Start index (included) of the input images used to display previews.
     */
    start: number;
    /**
     * End index (excluded) of the input images used to display previews.
     */
    end: number;
    defaultPreviewSize: Size;
    constructor(configService: ConfigService);
    /**
     * Method ´ngOnInit´ to build `configPreview` applying a default value and also to
     * init the `previews` array.
     * This is an angular lifecycle hook, so its called automatically by Angular itself.
     * In particular, it's called only one time!!!
     */
    ngOnInit(): void;
    /**
     * Method to check if an image is active (i.e. a preview image).
     * @param 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 action that triggered the source event or `Action.NORMAL` if not specified
     */
    onImageEvent(preview: InternalLibImage, event: KeyboardEvent | MouseEvent, action?: Action): void;
    /**
     * Method called by events from both keyboard and mouse on a navigation arrow.
     * It also emits an event to specify which arrow.
     * @param string direction of the navigation that can be either 'next' or 'prev'
     * @param KeyboardEvent | MouseEvent event payload
     * @param Action action that triggered the source event or `Action.NORMAL` if not specified
     */
    onNavigationEvent(direction: string, event: KeyboardEvent | MouseEvent, 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;
    /**
     * Indicates if the previews 'left arrow' should be displayed or not.
     * @returns
     */
    displayLeftPreviewsArrow(): boolean;
    /**
     * Indicates if the previews 'right arrow' should be displayed or not.
     * @returns
     */
    displayRightPreviewsArrow(): boolean;
    /**
     * Private method to init previews based on the currentImage and the full array of images.
     * The current image in mandatory to show always the current preview (as highlighted).
     * @param 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 update both `start` and `end` based on the currentImage.
     */
    private setIndexesPreviews;
    /**
     * Private method to update the visible previews navigating to the right (next).
     */
    private next;
    /**
     * Private method to update the visible previews navigating to the left (previous).
     */
    private previous;
    static ɵfac: 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, false, never>;
}