import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
import { Orientation } from '../../../../types/src/index.ts';
import { DotsData } from '../../../../types/src/dot-pagination';
import { CSSResultGroup } from 'lit';
import { default as CxTooltip } from '../tooltip/tooltip';

/**
 * @summary CxDotPagination - A pagination component with dots and ellipsis support for large counts
 *
 * @event {{ active: number }} cx-dot-pagination-change - Emitted when the active dot changes.
 * @event cx-dot-pagination-focus - Emitted when the dot is focused.
 */
export default class CxDotPagination extends CortexElement {
    static readonly styles: CSSResultGroup;
    static readonly dependencies: {
        'cx-tooltip': typeof CxTooltip;
    };
    private readonly localize;
    activeDot: HTMLButtonElement;
    private allDots;
    /**
     * The active dot index.
     */
    activeIndex: number;
    /**
     * The total number of items.
     */
    totalItemsCount: number;
    /**
     * Total show items at a time.
     */
    visibleItemsCount: number;
    /**
     * The step number of dots.
     */
    step: number;
    /**
     * The number of center dots.
     */
    centerDots: number;
    /**
     * The number of front dots.
     */
    frontDots: number;
    /**
     * The number of back dots.
     */
    backDots: number;
    /**
     * Whether the dot pagination is looped.
     */
    loop: boolean;
    /**
     * Specifies the orientation in which the dot pagination will lay out.
     */
    orientation: Orientation;
    /**
     * Whether the carousel is transition or scrolling, dot pagination is show loading and disabled.
     */
    transitioning: boolean;
    /**
     * The tooltip placement.
     */
    tooltipPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | undefined;
    /**
     * Tooltip description. Will overwrite the default page number description.
     */
    tooltipDescription: string | undefined;
    description: string | undefined;
    controlIds: string[];
    /**
     * The visible dots and ellipsis.
     */
    dots: DotsData;
    /**
     * Calculate visible dots and ellipsis.
     */
    calculateDots(): void;
    /**
     * Carousel focus active item when key is pressed from pagination
     */
    focus(): void;
    private handleDotClick;
    private handleKeyDown;
    private handleFocus;
    private renderEllipsis;
    private renderDot;
    render(): import('lit').TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cx-dot-pagination': CxDotPagination;
    }
}
