import { default as CxDotPagination } from '../../../atoms/src/components/dot-pagination/dot-pagination.ts';
import { default as CxIcon } from '../../../atoms/src/components/icon/icon.ts';
import { default as CxPopup } from '../../../atoms/src/components/popup/popup.ts';
import { default as CxResizeObserver } from '../../../atoms/src/components/resize-observer/resize-observer.ts';
import { default as CxTooltip } from '../../../atoms/src/components/tooltip/tooltip.ts';
import { default as CortexElement } from '../../../base/src/cortex-element.ts';
import { default as CxGalleryItem } from '../../../molecules/src/gallery-item/gallery-item.ts';
import { Easing, Orientation, TransitionType } from '../../../types/src/index.ts';
import { ScrollBehavior } from '../../../types/src/carousel';
import { GalleryItem, GalleryItemContentPosition, GalleryItemContentVariant, GalleryItemEffect, GalleryItemShowContentType, GalleryItemTextRevealStyle, GalleryItemZoomStyle } from '../../../types/src/gallery-item';
import { CSSResultGroup, PropertyValueMap } from 'lit';
import { StaticValue } from 'lit/static-html.js';
import { AutoplayController } from './autoplay-controller';

/**
 * @summary The <cx-carousel> is used to display an arbitrary number of content slides along a horizontal or vertical axis.
 *
 * @since 2.2
 * @status experimental
 *
 * @event {{ index: number, slide: CxGalleryItem }} cx-slide-change - Emitted when the active slide changes.
 *
 * @slot next-icon - Optional next icon to use instead of the default. Works best with `<cx-icon>`.
 * @slot previous-icon - Optional previous icon to use instead of the default. Works best with `<cx-icon>`.
 *
 * @csspart base - The carousel's internal wrapper.
 * @csspart scroll-container - The scroll container that wraps the slides.
 * @csspart pagination - The pagination indicators wrapper.
 * @csspart navigation - The navigation wrapper.
 * @csspart navigation-button - The navigation button.
 * @csspart navigation-button--previous - Applied to the previous button.
 * @csspart navigation-button--next - Applied to the next button.
 * @csspart item - The gallery item.
 * @csspart item-placeholder - The placeholder whose position and size is used to display the actual gallery item.
 *
 * @cssproperty --slide-gap - The space between each slide.
 * @cssproperty [--aspect-ratio=16/9] - The aspect ratio of each slide.
 * @cssproperty --scroll-hint - The amount of padding to apply to the scroll area, allowing adjacent slides to become partially visible as a scroll hint.
 * @cssproperty --border - The border of entire carousel.
 * @cssproperty --scroll-container-border - The border of the scroll container.
 * @cssproperty --border-radius - The border radius of the carousel.
 */
declare class CxCarouselDotPagination extends CxDotPagination {
    createRenderRoot(): this;
}
export default class CxCarousel extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-carousel-dot-pagination': typeof CxCarouselDotPagination;
        'cx-gallery-item': typeof CxGalleryItem;
        'cx-icon': typeof CxIcon;
        'cx-popup': typeof CxPopup;
        'cx-resize-observer': typeof CxResizeObserver;
        'cx-tooltip': typeof CxTooltip;
    };
    protected galleryItemTag: string;
    slotElement: HTMLSlotElement;
    carouselElement: HTMLElement;
    scrollContainer: HTMLElement;
    popupContainer: HTMLElement;
    scrollContainerTooltip: CxTooltip;
    paginationContainer: HTMLElement;
    dotPagination: CxCarouselDotPagination;
    containerElement: HTMLElement;
    carouselContainerElement: HTMLElement;
    data: GalleryItem[];
    /**
     * Current loaded chunk data of the carousel.
     */
    chunk: [number, number];
    /**
     * The real total number of data in the carousel. Not affected by chunking.
     */
    totalData: number;
    /**
     * When set, allows the user to navigate the carousel in the same direction indefinitely.
     */
    loop: boolean;
    /**
     * When set, show the carousel's navigation.
     */
    navigation: 'arrows' | 'pagination' | 'both' | undefined;
    /**
     * When set, the slides will scroll automatically when the user is not interacting with them.
     */
    autoplay: boolean;
    /**
     * Specifies the amount of time, in milliseconds, between each automatic scroll.
     */
    autoplayInterval: string;
    /**
     * Specifies how many slides should be shown at a given time.
     */
    slidesPerPage: number;
    /**
     * Specifies the number of slides the carousel will advance when scrolling, useful when specifying a `slides-per-page`
     * greater than one. It can't be higher than `slides-per-page`.
     */
    slidesPerMove: number;
    /**
     * Specifies the orientation in which the carousel will lay out.
     */
    orientation: Orientation;
    /**
     * When set, it is possible to scroll through the slides by dragging them with the mouse.
     */
    mouseDragging: boolean;
    /**
     * When set, the carousel will show a preview of the next and previous slides.
     */
    peekSlides: boolean;
    /**
     * Specifies the type of transition to use when changing slides.
     */
    transitionType: TransitionType;
    /**
     * Specifies the easing function to use when changing slides.
     */
    easing: Easing;
    /**
     * Specifies the easing function to use when changing slides.
     */
    slideEasing: Easing;
    /**
     * Specifies the label to display when the carousel is empty.
     */
    emptyLabel: string;
    /**
     * The content variant for the gallery item.
     */
    contentVariant: GalleryItemContentVariant;
    /**
     * The content position for the small card. Column = 1
     */
    contentPosition: GalleryItemContentPosition;
    /**
     * The show content type.
     */
    showContentType: GalleryItemShowContentType;
    /**
     * Whether the gallery item highlights its border on hover.
     */
    highlightBorder: boolean;
    /**
     * Whether the gallery item highlights its color overlay on hover.
     */
    highlightColorOverlay: boolean;
    /**
     * Whether the gallery item highlights its drop shadow on hover.
     */
    highlightDropShadow: boolean;
    /**
     * Whether the gallery item highlights its background on hover.
     */
    highlightBackground: boolean;
    /**
     * Whether the gallery item fades out its siblings on hover.
     */
    highlightSiblingsFadeOut: boolean;
    /**
     * The effect to apply to the gallery item.
     */
    effect: GalleryItemEffect;
    /**
     * The style of the text reveal effect.
     */
    textRevealStyle: GalleryItemTextRevealStyle;
    /**
     * The style of the zoom effect.
     */
    zoomStyle: GalleryItemZoomStyle;
    /**
     * The accessibility tooltip for the gallery.
     */
    accessibilityTooltip: string | undefined;
    /**
     * The card type for the carousel.
     */
    itemAriaRoleDescription: string;
    /**
     * The index of the active slide
     */
    activeSlide: number;
    /**
     * Whether the carousel is scrolling. (Both manual and programmatic by gsap)
     */
    scrolling: boolean;
    /**
     * Whether the carousel is dragging by user. (User can drag the carousel to scroll)
     */
    dragging: boolean;
    /**
     * Whether the carousel is transitioning. (Only for programmatically scroll by gsap)
     */
    transitioning: boolean;
    /**
     * Whether the carousel is loading. (No current used)
     */
    loading: boolean;
    /**
     * Whether the carousel is pending for a slide change. (Only for programmatically scroll by gsap)
     */
    pendingSlideChange: boolean;
    /**
     * The timeout for the fade transition. (Only for programmatically scroll by gsap)
     */
    fadeTimeout: ReturnType<typeof setTimeout> | null;
    private fadeTransitionToken;
    /**
     * The range of the carousel. Presenting current visible slides index range.
     */
    range: [number, number];
    /**
     * Whether the carousel is chunked.
     */
    isChunked: boolean;
    /**
     * The chunk offset. Presenting +/- offset from the active slide index to define when refreshing the chunk.
     */
    chunkOffset: number;
    /**
     * The position of the drag start.
     */
    dragStartPosition: [number, number];
    /**
     * Tracks the currently hovered item.
     */
    private hoveredItemId;
    private dotPaginationFocusCount;
    /**
     * Whether the slide order is changed by user interaction.
     */
    private slideOrderChanged;
    /**
     * Timeout for the hovered item.
     */
    private hoverLeaveTimeout?;
    protected readonly autoplayController: AutoplayController;
    private readonly localize;
    private readonly instantScrollGap;
    private isTooltipShown;
    /** Stores the requested index when goToSlide returns early due to an out-of-chunk request, so it can be retried after the chunk loads. */
    private pendingNavigationIndex;
    protected isProgrammaticFocus: boolean;
    private mutationObserver;
    get easeCSSVariable(): string;
    get slideEaseCSSVariable(): string;
    get slideEaseGSap(): string;
    get galleryItemLiteral(): StaticValue;
    get renderIdKey(): keyof GalleryItem;
    get isCarouselInEditMode(): boolean;
    get canZoom(): boolean;
    get hasEvent(): boolean;
    get itemTabIndex(): string;
    get canSelectCarousel(): boolean;
    get isCarouselSelected(): boolean;
    get selectedCarouselItem(): string;
    get canMoveCarouselItem(): boolean;
    get canDeleteCarouselItem(): boolean;
    constructor();
    connectedUpdatedCallback(): void;
    runConnectedCallback(): void;
    disconnectedCallback(): void;
    protected willUpdate(changedProperties: PropertyValueMap<CxCarousel> | Map<PropertyKey, unknown>): void;
    get isFadeTransition(): boolean;
    get isSlideTransition(): boolean;
    get hasRealClone(): boolean;
    private getPageCount;
    private getCurrentPage;
    private canScrollPrev;
    private canScrollNext;
    private isAtFirstSlide;
    private isAtLastSlide;
    /**
     * @internal Gets all carousel items.
     */
    private getSlides;
    /**
     * @internal Gets all carousel popups
     */
    private getPopups;
    private showTooltip;
    private hideTooltip;
    protected togglePopupAttribute(slide: Element, attribute: string, value: string): void;
    private toggleSlideAttribute;
    private setSlideAttribute;
    private toggleSlideClass;
    private getFirstActiveSlide;
    private handleFocus;
    protected handleBlur(event: FocusEvent): void;
    private handleClick;
    protected handleGalleryItemClick(event: MouseEvent): void;
    protected handleGalleryItemFocus(): void;
    private handleScrollContainerKeyDown;
    private handleItemListKeyDown;
    private handleMouseDragStart;
    private readonly handleMouseDrag;
    private readonly handleMouseDragEnd;
    private handleScroll;
    /**
     * Synchronizes the slides with the IntersectionObserver API.
     */
    private synchronizeSlides;
    private handleScrollEnd;
    private handleSlideContainerResize;
    private isCarouselItem;
    private handleSlotChange;
    /**
     * Clone the assigned light DOM nodes for a given slot name.
     * This allows duplicated slide clones to keep their content.
     */
    private cloneSlotContent;
    initializeSlides(): Promise<void>;
    private createClones;
    private removeClones;
    private calculateSlidesRange;
    handleSlideChange(): void;
    handlePendingSlideChange(): Promise<void>;
    updateSlidesSnap(): void;
    handleOrientationChange(): void;
    handleAutoplayChange(): void;
    handleDataChanges(): Promise<void>;
    handleChunkChange(): Promise<void>;
    handleChunkLoopChange(): Promise<void>;
    /**
     * Move the carousel backward by `slides-per-move` slides.
     *
     * @param behavior - The behavior used for scrolling.
     */
    previous(behavior?: ScrollBehavior): void;
    /**
     * Move the carousel forward by `slides-per-move` slides.
     *
     * @param behavior - The behavior used for scrolling.
     */
    next(behavior?: ScrollBehavior): void;
    /**
     * Scrolls the carousel to the slide specified by `index`.
     *
     * @param index - The slide index.
     * @param behavior - The behavior used for scrolling.
     */
    goToSlide(index: number, behavior?: ScrollBehavior): void;
    private removeCloneContainer;
    private finishFadeTransition;
    /**
     * Scrolls to the given slide, allowing an optional duration (in ms) for the scroll animation.
     * If duration is provided and behavior is 'smooth', a custom smooth scroll is performed.
     *
     * @param slide - The target slide HTMLElement.
     * @param behavior - The scroll behavior ('auto' | 'smooth').
     * @param duration - Optional duration in milliseconds for the scroll animation.
     */
    private scrollToSlide;
    private handleNextButtonClick;
    private handlePreviousButtonClick;
    private handleDotButtonClick;
    private handleDotPaginationFocus;
    private handleMouseEnter;
    private handleMouseLeave;
    private handleGalleryItemMoved;
    private computeCarouselItemEffectStyles;
    renderGalleryItem(galleryItem: {
        id: string;
        index: number;
        item: GalleryItem;
    }): import('lit').TemplateResult;
    render(): import('lit').TemplateResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-carousel': CxCarousel;
        'cx-carousel-dot-pagination': CxCarouselDotPagination;
    }
}
export {};
