import * as lit_html from 'lit-html';
import * as lit from 'lit';
import { LitElement } from 'lit';
import KemetCarouselLink from './carousel-link.js';
import KemetCarouselSlide from './carousel-slide.js';

/**
 *
 * @since 1.1.0
 * @status stable
 *
 * @tagname kemet-carousel
 * @summary The Carousel allows you to click or swipe through content.
 *
 * @prop {number} index - The current slide index.
 * @prop {number} total - The total amount of slides.
 * @prop {string} sliderWidth - The width of the slider.
 * @prop {string} sliderTranslateX - The X position of the slider.
 * @prop {boolean} inner - Displays the toolbar inside the carousel container.
 * @prop {boolean} arrows - Determines whether to display arrows.
 * @prop {object} options - Default options for the carousel.
 * @prop {object} breakpoints - Options at different breakpoints for the carousel. Is mobile first.
 *
 * @event kemet-change-start - Fires when the slide has begun to change.
 * @event kemet-change-finished - Fires when a slide has changed and finished animating
 *
 * @slot slides - Place the slide elements here.
 * @slot toolbar - Allows you to construct a toolbar within the carousel. Place things like pagination here.
 * @slot prev - A slot for the previous arrow.
 * @slot next - A slot for the next arrow.
 * @slot information - Allows you to enter custom HTML such as a slide description to be used in the toolbar.
 *
 * @cssproperty --kemet-carousel-width - The width of the carousel.
 * @cssproperty --kemet-carousel-height - The height of the carousel.
 * @cssproperty --kemet-carousel-toolbar-gap - The space between items in the toolbar.
 * @cssproperty --kemet-carousel-toolbar-justify-content - The cross axis alignment of the toolbar.
 * @cssproperty --kemet-carousel-toolbar-padding - The padding of the toolbar.
 * @cssproperty --kemet-carousel-toolbar-inner-width - The inner toolbar width.
 * @cssproperty --kemet-carousel-toolbar-inner-bottom - The bottom position of the inner toolbar.
 * @cssproperty --kemet-carousel-toolbar-inner-top - The top position of the inner toolbar.
 * @cssproperty --kemet-carousel-toolbar-inner-color - The inner toolbar text color.
 * @cssproperty --kemet-carousel-toolbar-inner-background-color - The inner toolbar background color.
 * @cssproperty --kemet-carousel-slides-border - The border around the slides.
 * @cssproperty --kemet-carousel-transition-speed - The transition speed of the slides.
 * @cssproperty --kemet-carousel-arrows-opacity - The arrows start opacity.
 * @cssproperty --kemet-carousel-arrows-opacity-hover - The arrows however opacity.
 * @cssproperty --kemet-carousel-arrows-transition-speed - The arrows transition speed.
 *
 * @csspart container - Contains the slides and toolbar.
 * @csspart slides - Wrapper for the slider.
 * @csspart slider - Contains the slides.
 * @csspart toolbar - Contains the toolbar.
 *
 */
declare class KemetCarousel extends LitElement {
    static styles: lit.CSSResult[];
    index: number;
    total: number;
    sliderWidth: string;
    sliderTranslateX: string;
    inner: boolean;
    arrows: boolean;
    options: object;
    breakpoints: object;
    /** @internal */
    slides: KemetCarouselSlide[];
    /** @internal */
    links: KemetCarouselLink[];
    /** @internal */
    toolbarSlotElement: HTMLElement | null;
    /** @internal */
    informationElement: HTMLElement | null;
    /** @internal */
    swipeMove: (event: TouchEvent | MouseEvent) => void;
    /** @internal */
    handleSlideShow: () => void;
    /** @internal */
    slideShowID: number;
    /** @internal */
    startX: number;
    /** @internal */
    slideWidth: number;
    /** @internal */
    informationSlot: HTMLElement;
    /** @internal */
    containerElement: HTMLElement;
    /** @internal */
    slidesElement: HTMLElement;
    /** @internal */
    sliderElement: HTMLElement;
    /** @internal */
    toolbarElement: HTMLElement;
    constructor();
    firstUpdated(): void;
    updated(prevProps: Map<string, never>): void;
    render(): lit_html.TemplateResult<1>;
    swipeStart(event: TouchEvent | MouseEvent): void;
    swipeEnd(event: TouchEvent | MouseEvent): void;
    swipeUpdate(event: TouchEvent | MouseEvent): number;
    swipeLeave(): void;
    setSlideSize(): void;
    setToolbarSize(): void;
    makeToolbar(): lit_html.TemplateResult<1>;
    handleSlotChange(): void;
    handleArrows(): void;
    handleFirst(): void;
    handleLast(): void;
    handleNext(): void;
    handlePrev(): void;
    updateIndex(newIndex: number): void;
    updateInformation(): void;
    goToSlide(index: number): void;
    handleTransitionEnd(): void;
    handleLink(event: CustomEvent): void;
    getOption(option: string): any;
}
declare global {
    interface HTMLElementTagNameMap {
        'kemet-carousel': KemetCarousel;
    }
}

export { KemetCarousel as default };