@ks89/angular-modal-gallery
Version:
Image gallery for Angular
196 lines (195 loc) • 8.63 kB
TypeScript
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>;
}