declare namespace Raw {
    interface EventMap extends HTMLElementEventMap {
        "squares:retract": CustomEvent<{
            amount: number;
        }>;
        "squares:enter": CustomEvent<{
            selectedElement: HTMLElement;
        }>;
        "squares:exit": CustomEvent<{}>;
        "squares:scrolledgecollision": CustomEvent<{
            region: SquaresJS.EdgeCollisionRegion;
        }>;
    }
}
declare namespace SquaresJS {
    type EdgeCollisionRegion = "top" | "bottom" | "top-exit" | "bottom-exit";
    /**
     * Provides a way to dispatch a bubbling CustomEvent
     * object with type-safe .details property, using a custom
     * .details argument. The details argument is returned,
     * possibly after being modified by the event handlers.
     */
    function dispatch<K extends keyof Raw.EventMap>(target: HTMLElement | {
        readonly head: Element;
    }, name: K, detail: Raw.EventMap[K] extends CustomEvent<infer T> ? T : {}): Raw.EventMap[K] extends CustomEvent<infer T> ? T : {};
    /**
     * Provides a way to dispatch a bubbling CustomEvent
     * object with type-safe .details property.
     */
    function dispatch<K extends keyof Raw.EventMap>(target: HTMLElement | {
        readonly head: Element;
    }, name: K): void;
}
declare namespace SquaresJS {
    /**
     *
     */
    class Grid {
        readonly options: IGridOptions;
        /** */
        readonly head: HTMLElement;
        /** */
        private readonly postersElement;
        /** */
        private headerCssHeight;
        /** */
        constructor(options: IGridOptions);
        /**
         * Extends the number of posters that can be displayed in the UI.
         * Used to implement refresh functionality.
         */
        extendPosterCount(newPosterCount: number): void;
        private maxPosterCount;
        /** */
        private get heightRatio();
        /** */
        private get viewportElement();
        /**
         * Gets the pixel width of the head element.
         */
        get width(): number;
        private _width;
        /**
         * Gets the pixel height of the head element.
         */
        get height(): number;
        private _height;
        /**
         * Gets or sets the number of posters to display in the horizontal axis
         */
        get size(): number;
        set size(size: number);
        /** */
        private updateSize;
        /**
         * Sets the height of the posters element using the CSS padding-top trick.
         * The purpose of the posters element is to provide a way to set the top
         * value of the posters to a fixed amount that doesn't need to change for
         * every poster when the screen resizes (this can only be done with a CSS %
         * unit).
         */
        private updatePostersElementSize;
        /**
         * Calculates a comfortable number of posters to display in the
         * horizontal direction, given the dimensions of the container,
         * and the pixel density of the device.
         */
        private calculateAutoSize;
        /**
         * Gets the number of posters that currently exist within the DOM.
         */
        get posterCount(): number;
        /** */
        private maybeFetch;
        /** */
        private selectPoster;
        /** */
        private maybeRedraw;
        private lastY;
        /**
         * Returns the sequential index of the row in which
         * the specified preview element is rendered.
         */
        private rowOf;
    }
}
declare namespace SquaresJS {
    /** */
    interface IHistoryMarker {
        index: number;
    }
    /** */
    namespace IHistoryMarker {
        /** */
        function is(a: any): a is IHistoryMarker;
        /** */
        const gridIndex = -1;
    }
    /** */
    namespace History {
        /** */
        function push(index: number, path: string): void;
    }
}
declare namespace SquaresJS {
    /** */
    class Page {
        private readonly path;
        readonly head: HTMLDivElement;
        readonly swiper: Swiper;
        private readonly scrollable;
        /** */
        constructor(sections: HTMLElement[], path: string);
        /** */
        setVisibleSection(sectionIndex: number): void;
        private deferredVisibleIndex;
        /** */
        private setupRetractionTracker;
        /**
         * Retracts the page off the screen.
         * The "panic" mode is used when the page needs to be
         * moved off the screen as soon as possible, for example,
         * when the user has begun to scroll the underlying grid.
         */
        retract(panic?: "panic"): Promise<void> | undefined;
        /** */
        private disconnect;
    }
}
declare namespace SquaresJS {
    /**
     * Creates an element that has pull-to-refresh capabilities.
     */
    class Puller {
        readonly head: HTMLDivElement;
        /** */
        constructor(...params: Raw.Param[]);
    }
}
declare namespace SquaresJS {
    /** */
    interface IRetractableOptions {
        readonly underLayer: HTMLElement;
        readonly contentElements: HTMLElement | HTMLElement[];
    }
    /**
     *
     */
    class Retractable {
        private readonly options;
        readonly head: HTMLDivElement;
        readonly swiper: Swiper;
        private readonly scrollable;
        /** */
        constructor(options: IRetractableOptions);
        /** */
        private setVisibleSection;
        /** */
        private setupRetractionTracker;
        /**
         * Retracts the page off the screen.
         * The "panic" mode is used when the page needs to be
         * moved off the screen as soon as possible, for example,
         * when the user has begun to scroll the underlying grid.
         */
        retract(panic?: "panic"): Promise<void> | undefined;
        /** */
        private disconnect;
        /** */
        private readonly noOverflowClass;
    }
}
declare namespace SquaresJS {
    /**
     *
     */
    interface IGridOptions {
        /**
         * Specifies the path to display in the address bar when the
         * grid has the focus (as opposed to a page).
         */
        readonly gridPath?: string;
        /**
         * Defines the ratio of the height of the poster to its width.
         * Defaults to a value of 1 (square).
         */
        readonly posterHeightRatio?: number;
        /**
         * Specifies the total number of posters available
         * in the supplied stream. This is used to inform the
         * rendered when to cut off fetching new posters.
         */
        readonly maxPosterCount?: number;
        /**
         *
         */
        readonly anchorPosterIndex?: number;
        /**
         * Specifies the element that displays before all the other squares in the grid.
         */
        readonly headerElement?: HTMLElement;
        /**
         * Stores the element where the viewport is rendered.
         */
        readonly viewportElement?: HTMLElement;
        /**
         * Used to supply the UI that displays in place of a poster
         * if there is a delay between the time that requestPoster()
         * is called, and a poster element is returned.
         */
        requestPlaceholder(): HTMLElement;
        /**
         *
         */
        requestPoster(position: number): Promise<HTMLElement> | HTMLElement | null;
        /**
         * Used to supply the sections that make up a page
         * that gets clicked on in the grid.
         */
        requestPage(selectedElement: HTMLElement, selectedIndex: number): {
            sections: HTMLElement[];
            path: string;
        };
    }
    /** */
    class Squares {
        private readonly options;
        readonly head: HTMLElement;
        readonly grid: Grid;
        /** */
        constructor(options: IGridOptions);
        /**
         * Gets the current page being displayed in the Squares widget,
         * or null in the case when the grid is being displayed instead
         * of a page.
         */
        get page(): Retractable | null;
        private _page;
    }
}
declare namespace SquaresJS {
    /**
     * A class that creates a series of panes that swipe horizontally on mobile.
     */
    class Swiper {
        /** */
        static readonly evPaneChanged: "scroll";
        readonly head: HTMLDivElement;
        /** */
        constructor();
        /** */
        addPane(element: HTMLElement, at?: number): void;
        /** */
        setVisiblePane(index: number): void;
        /** */
        private updateVisiblePane;
        private lastVisiblePane;
        /** Gets the number of panes in the PaneSwiper. */
        get length(): number;
    }
}
//# sourceMappingURL=squares.d.ts.map