import { CarouselDisplayMode } from '../../../Types/CarouselDisplayMode'; import { CarouselNavigationPosition } from '../../../Types/CarouselNavigationPosition'; import { SelectorElement } from '../Abstracts/Selector/SelectorElement'; import { CarouselItemElement } from './CarouselItemElement'; import type { ICarouselElementProps } from './ICarouselElementProps'; declare const CarouselElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Appearanceable").IAppearanceableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Variantable").IVariantableProps) & (abstract new () => SelectorElement) & import("../../../Behaviors/Themeable").IThemeableCtor; /** * Carousel - A content navigation component that displays items in a horizontally scrolling slideshow format. * * Enables users to browse through multiple content items (images, cards, media) in a space-efficient * carousel layout with navigation controls. Supports automatic cycling, manual navigation, and * touch/swipe interactions for engaging content presentation. Offers two display modes: `slide` * (horizontal track) and `deck` (stacked cards with depth effect). Navigation button placement * can be configured via `navigationPosition` (`split`, `inside`, `outside`). * * @name CarouselElement * @element mosaik-carousel * @category Selectors * * @slot - Default content area for carousel items and navigation elements * * @csspart content - Content area wrapping the item list or deck * @csspart list - Container for carousel items (always present) * @csspart slide - Additional part on list container in slide display mode * @csspart deck - Additional part on list container in deck display mode * @csspart previous - Navigation button to go to the previous item * @csspart next - Navigation button to go to the next item * @csspart indicator - Page indicator showing current position * * @cssprop {String} --carousel-gap - Spacing between carousel items * @cssprop {String} --carousel-transition-duration - Animation duration for slide-mode item transitions * @cssprop {String} --carousel-deck-animation-duration - Transition duration for deck card animations * @cssprop {String} --carousel-deck-rotation - Rotation angle for pile cards (design token) * * @keyhandle LeftArrow - Navigates to the previous item in the carousel * @keyhandle RightArrow - Navigates to the next item in the carousel * @keyhandle Home - Navigates to the first item in the carousel * @keyhandle End - Navigates to the last item in the carousel * * @dependency FloatingActionButtonElement - For navigation controls and action buttons * @dependency CarouselItemElement - For individual content items within the carousel * * @example * ```html * * * * Slide 1 * * * Slide 2 * * * * * * * Card 1 * * * Card 2 * * * Card 3 * * * ``` * * @public */ export declare class CarouselElement extends CarouselElement_base implements ICarouselElementProps { private _listElement; private _position; private _hasPrevious; private _hasNext; private _loop; private _showNavigation; private _showIndicator; private _navigationPosition; private _displayMode; private _deckAnimating; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @override * @readonly */ static get is(): string; /** * Gets or sets the `loop` property. * * @public * @attr */ get loop(): boolean; set loop(value: boolean); /** * Gets or sets the `showNavigation` property. * * @public * @attr */ get showNavigation(): boolean; set showNavigation(value: boolean); /** * Gets or sets the `showIndicator` property. * * @public * @attr */ get showIndicator(): boolean; set showIndicator(value: boolean); /** * Gets or sets the `hasPrevious` property. * * @public * @attr * @readonly */ get hasPrevious(): boolean; private set hasPrevious(value); /** * Gets or sets the `hasNext` property. * * @public * @attr * @readonly */ get hasNext(): boolean; private set hasNext(value); /** * Gets or sets the `navigationPosition` property. * Controls where the navigation buttons are placed relative to the carousel content. * * @public * @attr */ get navigationPosition(): CarouselNavigationPosition; set navigationPosition(value: CarouselNavigationPosition); /** * Gets or sets the `displayMode` property. * Determines how carousel items are arranged and transitioned. * Use `slide` for a traditional horizontal track or `deck` for stacked card presentation. * * @public * @attr */ get displayMode(): CarouselDisplayMode; set displayMode(value: CarouselDisplayMode); /** * Gets the items of the Carousel. * * @remark * It is important to override the base class property to ensure that only * `CarouselItemElement` instances are returned. * * @public * @readonly * @ignore */ get items(): Array; /** * @public * @override */ connectedCallback(): void; /** * @public * @override */ select(item: CarouselItemElement): void; /** * @public * @override */ selectNext(): void; /** * @public * @override */ selectPrevious(): void; /** * @public * @override */ selectFirst(): void; /** * @public * @override */ selectLast(): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected * @override */ protected onItemsChanged(): void; /** * Called when the `displayMode` property changes. * Re-applies the appropriate layout for the new mode. * * @protected */ protected onDisplayModeChanged(): void; /** * Resets all deck item attributes to reflect the current selection. * Only manages state attributes - all visual presentation is handled in SCSS. * * @private */ private updateDeckLayout; /** * Dismisses the current top card in the given direction. * The card slides off-screen (CSS transition), then snaps back behind the * pile and the next card becomes active. * * @param direction - The direction the card leaves ('next' or 'prev'). * @private */ private dismissDeckCard; /** * Brings a card from behind the pile to the top position. * The card is placed off-screen instantly, then transitions in as it * becomes the new active card. * * @param direction - The direction the card arrives from ('next' or 'prev'). * @private */ private arriveDeckCard; /** * Scrolls the slide-mode track so that the active item is in view. * * @private */ private scrollToActiveItem; /** * Checks whether an item at a specific index is outside of the viewport. * * @private */ private isOutOfView; /** * Checks whether an index is out of range. * * @private */ private isOutOfRange; } /** * @public */ export declare namespace CarouselElement { type Props = ICarouselElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-carousel': CarouselElement; } } export {}; //# sourceMappingURL=CarouselElement.d.ts.map