@ks89/angular-modal-gallery
Version:
Image gallery for Angular
82 lines (81 loc) • 3.72 kB
TypeScript
import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { AccessibleComponent } from '../accessible.component';
import { AccessibilityConfig } from '../../model/accessibility.interface';
import { Image } from '../../model/image.class';
import { InternalLibImage } from '../../model/image-internal.class';
import { DotsConfig } from '../../model/dots-config.interface';
import { ConfigService } from '../../services/config.service';
import * as i0 from "@angular/core";
/**
* Component with clickable dots (small circles) to navigate between images inside the modal gallery.
*/
export declare class DotsComponent 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 | undefined;
/**
* Array of `InternalLibImage` that represent the model of this library with all images,
* thumbs and so on.
*/
images: InternalLibImage[] | undefined;
/**
* 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;
/**
* 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;
/**
* Method ´ngOnChanges´ to change `configDots` if the input dotsConfig is changed.
* This is an angular lifecycle hook, so its called automatically by Angular itself.
*/
ngOnChanges(changes: SimpleChanges): void;
/**
* Method to check if an image is active (i.e. the current image).
* It checks currentImage and images to prevent errors.
* @param number index of the image to check if it's active or not
* @returns boolean true if is active (and input params are valid), false otherwise
*/
isActive(index: number): boolean;
/**
* Method called by events from keyboard and mouse.
* @param number index of the dot
* @param KeyboardEvent | MouseEvent event payload
*/
onDotEvent(index: number, event: KeyboardEvent | MouseEvent): 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;
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, false, never>;
}