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, ImageModalEvent } from '../../model/image.class'; import { Action } from '../../model/action.enum'; import { DotsConfig } from '../../model/dots-config.interface'; import { GalleryService } from '../../services/gallery.service'; import { PlainGalleryConfig } from '../../model/plain-gallery-config.interface'; import { PlayConfig } from '../../model/play-config.interface'; import { CarouselConfig } from '../../model/carousel-config.interface'; import { CarouselImageConfig } from '../../model/carousel-image-config.interface'; import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; import { CarouselPreviewConfig } from '../../model/carousel-preview-config.interface'; /** * Component with configurable inline/plain carousel. */ export declare class CarouselComponent extends AccessibleComponent implements OnInit, AfterContentInit, OnDestroy, OnChanges { private _platformId; private _ngZone; private galleryService; private ref; private sanitizer; /** * 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; /** * Array of `InternalLibImage` that represent the model of this library with all images, * thumbs and so on. */ images: Image[]; /** * 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; /** * Object of type `PlayConfig` to init CarouselComponent's features about auto-play. * For instance, it contains parameters to enable/disable autoPlay, interval and so on. */ playConfig: PlayConfig; /** * Interface to configure current image in carousel. * For instance you can change the description. */ carouselImageConfig: CarouselImageConfig; /** * Object of type `DotsConfig` to init DotsComponent's features. * For instance, it contains a param to show/hide this component. */ dotsConfig: DotsConfig; /** * Object of type `CarouselPreviewConfig` to init PreviewsComponent's features. * For instance, it contains a param to show/hide previews, change sizes and so on. */ previewConfig: CarouselPreviewConfig; /** * boolean to enable/disable infinite sliding. Enabled by default. */ infinite: boolean; /** * Object of type `AccessibilityConfig` to init custom accessibility features. * For instance, it contains titles, alt texts, aria-labels and so on. */ accessibilityConfig: AccessibilityConfig; /** * Output to emit an event when an image is changed. */ show: EventEmitter; /** * Output to emit an event when the current image is the first one. */ firstImage: EventEmitter; /** * Output to emit an event when the current image is the last one. */ lastImage: EventEmitter; /** * 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: Image; /** * Object of type `CarouselConfig` exposed to the template. This field is initialized * applying transformations, default values and so on to the input of the same type. */ configCarousel: CarouselConfig; /** * Object of type `PlayConfig` exposed to the template. This field is initialized * applying transformations, default values and so on to the input of the same type. */ configPlay: PlayConfig; /** * Object of type `CarouselImageConfig` exposed to the template. This field is initialized * applying transformations, default values and so on to the input of the same type. */ configCurrentImageCarousel: CarouselImageConfig; /** * Object of type `DotsConfig` exposed to the template. This field is initialized * applying transformations, default values and so on to the input of the same type. */ configDots: DotsConfig; /** * 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; /** * Object of type `PlainGalleryConfig` to force ks-modal-gallery to hide plain-gallery */ plainGalleryHidden: PlainGalleryConfig; /** * Subject to play the carousel. */ private start$; /** * Subject to stop the carousel. */ private stop$; /** * Private object without type to define all swipe actions used by hammerjs. */ private SWIPE_ACTION; /** * 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, galleryService: GalleryService, ref: ChangeDetectorRef, sanitizer: DomSanitizer); ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void; ngAfterContentInit(): void; /** * 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 and represents the url to sanitize. * @returns a SafeStyle object that can be used in template without problems. */ sanitizeUrlBgStyle(unsafeStyle: string): SafeStyle; /** * 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, 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): string; /** * Method used by Hammerjs 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): 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): 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's 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 slideConfig.infinite === 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 slideConfig.infinite === false and the current index is * either the first or the last one. */ private isPreventSliding; }