igniteui-webcomponents
Version:
Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
200 lines (199 loc) • 7.28 kB
TypeScript
import { LitElement } from 'lit';
import type { Constructor } from '../common/mixins/constructor.js';
import IgcCarouselSlideComponent from './carousel-slide.js';
export interface IgcCarouselComponentEventMap {
igcSlideChanged: CustomEvent<number>;
igcPlaying: CustomEvent<void>;
igcPaused: CustomEvent<void>;
}
declare const IgcCarouselComponent_base: Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcCarouselComponentEventMap>> & Constructor<LitElement>;
/**
* The `igc-carousel` presents a set of `igc-carousel-slide`s by sequentially displaying a subset of one or more slides.
*
* @element igc-carousel
*
* @slot Default slot for the carousel. Any projected `igc-carousel-slide` components should be projected here.
* @slot previous-button - Renders content inside the previous button.
* @slot next-button - Renders content inside the next button.
*
* @fires igcSlideChanged - Emitted when the current active slide is changed either by user interaction or by the interval callback.
* @fires igcPlaying - Emitted when the carousel enters playing state by a user interaction.
* @fires igcPaused - Emitted when the carousel enters paused state by a user interaction.
*
* @csspart navigation - The wrapper container of each carousel navigation button.
* @csspart previous - The wrapper container of the carousel previous navigation button.
* @csspart next - The wrapper container of the carousel next navigation button.
* @csspart dot - The carousel dot indicator container.
* @csspart active - The carousel active dot indicator container.
* @csspart label - The label container of the carousel indicators.
* @csspart start - The wrapping container of all carousel indicators when indicators-orientation is set to start.
*/
export default class IgcCarouselComponent extends IgcCarouselComponent_base {
static styles: import("lit").CSSResult[];
static readonly tagName = "igc-carousel";
static register(): void;
private static readonly increment;
private _carouselId;
private _carouselKeyboardInteractionFocus;
private _internals;
private _lastInterval;
private _hasKeyboardInteractionOnIndicators;
private _hasMouseStop;
private _context;
private _carouselSlidesContainerRef;
private _indicatorsContainerRef;
private _prevButtonRef;
private _nextButtonRef;
private get hasProjectedIndicators();
private get showIndicatorsLabel();
private get nextIndex();
private get prevIndex();
private _defaultIndicators;
private _projectedIndicators;
private _activeSlide;
private _playing;
private _paused;
private _observerCallback;
/**
* Whether the carousel should skip rotating to the first slide after it reaches the last.
* @attr disable-loop
*/
disableLoop: boolean;
/**
* Whether the carousel should ignore use interactions and not pause on them.
* @attr disable-pause-on-interaction
*/
disablePauseOnInteraction: boolean;
/**
* Whether the carousel should skip rendering of the default navigation buttons.
* @attr hide-navigation
*/
hideNavigation: boolean;
/**
* Whether the carousel should render the indicator controls (dots).
* @attr hide-indicators
*/
hideIndicators: boolean;
/**
* Whether the carousel has vertical alignment.
* @attr vertical
*/
vertical: boolean;
/**
* Sets the orientation of the indicator controls (dots).
* @attr indicators-orientation
*/
indicatorsOrientation: 'start' | 'end';
/**
* The format used to set the aria-label on the carousel indicators.
* Instances of '{0}' will be replaced with the index of the corresponding slide.
*
* @attr indicators-label-format
*/
indicatorsLabelFormat: string;
/**
* The format used to set the aria-label on the carousel slides and the text displayed
* when the number of indicators is greater than tha maximum indicator count.
* Instances of '{0}' will be replaced with the index of the corresponding slide.
* Instances of '{1}' will be replaced with the total amount of slides.
*
* @attr slides-label-format
*/
slidesLabelFormat: string;
/**
* The duration in milliseconds between changing the active slide.
* @attr interval
*/
interval: number | undefined;
/**
* Controls the maximum indicator controls (dots) that can be shown. Default value is `10`.
* @attr maximum-indicators-count
*/
maximumIndicatorsCount: number;
/**
* The animation type.
* @attr animation-type
*/
animationType: 'slide' | 'fade' | 'none';
/**
* The slides of the carousel.
*/
slides: Array<IgcCarouselSlideComponent>;
/**
* The total number of slides.
*/
get total(): number;
/**
* The index of the current active slide.
*/
get current(): number;
/**
* Whether the carousel is in playing state.
*/
get isPlaying(): boolean;
/**
* Whether the carousel in in paused state.
*/
get isPaused(): boolean;
protected contextChanged(): void;
protected intervalChange(): void;
constructor();
private handleSlotChange;
private handleIndicatorSlotChange;
private handlePointerDown;
private handlePointerEnter;
private handlePointerLeave;
private handleFocusIn;
private handleFocusOut;
private handlePauseOnInteraction;
private handleArrowLeft;
private handleArrowRight;
private handleHomeKey;
private handleEndKey;
private handleVerticalSwipe;
private handleHorizontalSwipe;
private handleIndicatorClick;
private handleNavigationInteractionNext;
private handleNavigationInteractionPrevious;
private handleInteraction;
private activateSlide;
private updateProjectedIndicators;
private resetInterval;
private restartInterval;
private animateSlides;
/**
* Resumes playing of the carousel slides.
*/
play(): void;
/**
* Pauses the carousel rotation of slides.
*/
pause(): void;
/**
* Switches to the next slide, runs any animations, and returns if the operation was successful.
*/
next(): Promise<boolean>;
/**
* Switches to the previous slide, runs any animations, and returns if the operation was successful.
*/
prev(): Promise<boolean>;
/**
* Switches to the passed-in slide, runs any animations, and returns if the operation was successful.
*/
select(slide: IgcCarouselSlideComponent, animationDirection?: 'next' | 'prev'): Promise<boolean>;
/**
* Switches to slide by index, runs any animations, and returns if the operation was successful.
*/
select(index: number, animationDirection?: 'next' | 'prev'): Promise<boolean>;
private navigationTemplate;
protected renderIndicators(): Generator<import("lit-html").TemplateResult<1>, void, unknown>;
private indicatorTemplate;
private labelTemplate;
protected render(): import("lit-html").TemplateResult<1>;
}
declare global {
interface HTMLElementTagNameMap {
'igc-carousel': IgcCarouselComponent;
}
}
export {};