import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
/**
 * An accessible and flexible sort and re-order utility.
 *
 * @version 4.0
 * @status stable
 *
 * @part announcements - the a11y, live region. Visually hidden by default
 *
 * @slot - The default slot containing any items you might want to sort
 */
export declare class Sortable implements ComponentInterface {
    /** A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>` */
    itemSelector: string;
    handleItemSelectorChange(): void;
    /** A css query selector which matches an element *within* the `itemSelector` element
     * which will act like a drag handle. **Note** For keyboard a11y it's recommended
     * to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used */
    handleSelector?: string;
    handleHandleSelectorChange(): void;
    /** When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another.
     * At that point, you will not be able to drag items back to the original group.
     * A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.
     */
    dropzoneSelector?: string;
    /** Accessibility helper text applied to handle controls */
    helperText: string;
    /**
     * As a sortable element is interacted with, announcements are made to screen readers
     * - informing the user what is changing.
     * By default, the text from the element is extracted to describe the interacted with element.
     * Use this function to provide a more meaningful, concise item descriptor
     * @param el the element being interacted with
     * @returns a string, describing the element being interacted with
     */
    itemDescriptor: (el: Element) => string;
    /**
     * Used to generate a screen reader live update, informing the user of the current element being grabbed.
     * @param el the element that has been grabbed by the user
     * @returns a string, describing the element being grabbed
     */
    grabbedHelperText: (el: Element) => string;
    /**
     * Used to generate a screen reader live update, informing the user of the current element being dropped.
     * @param el the element that has been dropped by the user
     * @returns a string, describing the element that has been dropped
     */
    droppedHelperText: (el: Element) => string;
    /**
     *  Used to generate a screen reader live update, informing the user when items have been reordered.
     * @param el the element that has been reordered by the user
     * @param elements the elements in the sortable list
     * @param position the new position of the dropped element
     * @returns a string, describing the element being dropped
     */
    reorderHelperText: (el: Element, elements: Element[], position: number) => string;
    /**
     * A function that should attach a keyboard accessible control.
     * When a `handleSelector` is not used - to allow keyboard accessibility -
     * `createKeyboardHandle` should render a focusable element.
     *
     * If your sortable item is itself focusable,
     * you must use this function to render a control *outside* of the focusable element.
     * @param _number
     * @param _element
     * @default () => <nano-icon-button></nano-icon-button>;
     * @returns a function that attaches a keyboard accessible handle control element.
     * The function itself *must* return the handle element.
     */
    createKeyboardHandle: (_number: number, _element: Element) => HTMLElement;
    handleCreateKeyboardHandleChange(): void;
    /** use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`.
     * Note that the `sortableHostElement` element css `position` will be set to `relative` */
    sortableHostElement?: HTMLElement;
    handleSortableHostElement(_newVal?: any, oldVal?: HTMLElement): void;
    /** Items being sorted will animate into place */
    animationEnabled: boolean;
    /** Use this class to change how the element looks whilst being sorted */
    draggedClass: string;
    /** Use this class to change how the handle looks whilst being sorted */
    handleDraggedClass: string;
    /** Use this class to change how the element looks when acting as a placeholder */
    placeholderClass: string;
    /** Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over */
    dropzoneActiveClass?: string;
    /** The css animation timing applied when `animationEnabled` is `true` */
    animationTiming: any;
    /** The axis to lock dragging elements to. `undefined` means any axis */
    orientation?: 'horizontal' | 'vertical';
    /** Dragged items by default, will take whatever default css is applied in situ.
     * When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'.
     * Apply `dragResize` to read & recreate the dragged items current dimensions when dragged.  */
    dragResize: boolean;
    /** Fired when an the order changes. Use this to update any underlying data model.
     * `event.preventDefault()` to prevent the element being moved; will revert to original position. */
    nanoOrderChange: EventEmitter<{
        element: HTMLElement;
        originalIndex: number;
        targetIndex: number;
    }>;
    /** Fired when a sortable element is picked-up; via keyboard, mouse or touch.
     * `event.preventDefault()` to prevent the element being picked-up. */
    nanoGrabbed: EventEmitter<{
        element: HTMLElement;
        index: number;
    }>;
    /** Fired when a sortable element is dropped after having been picked up. */
    nanoDropped: EventEmitter<{
        element: HTMLElement;
    }>;
    /** If sortable elements change dynamically, use this method to add handle controls to new elements */
    refreshKeyboardHandles(): Promise<void>;
    host: HTMLNanoSortableElement;
    private dragRequestPending;
    private draggedElement?;
    private draggedElementClone?;
    private draggedElementOrigin?;
    private sortableNodes;
    private dropzoneNodes;
    private animatedElements;
    private animationPromise?;
    private keyboardHandleMap;
    private sortableId;
    private mouseDownTimer;
    private mutationObserver;
    keyboardSortActive: boolean;
    ariaTextList: string[];
    /**
     * Get instance of sortable host.
     * By default it is `nano-sortable` which can be overridden by property `sortableHostElement`
     */
    get sortableHost(): HTMLElement;
    /**
     * Queues aria messages which are then displayed in a 'live' region.
     * Messages are cleared after 10s
     * @param msg aria message to announce
     */
    private addAriaMsg;
    /**
     * Try to stop text highlight whilst dragging
     * @param userSelect
     */
    private updateUserSelectStyle;
    /**
     * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the
     * given targets. Returns an array of matches.
     * @param node
     * @param targets
     * @returns all the items that currently intersect with the target node
     */
    private hitTest;
    /**
     * Returns a boolean indicating whether the node is currently in an animation.
     * @param node
     * @returns whether a node is currently animating or not
     */
    private isAnimating;
    /**
     * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as
     * if nodes animate from their old to their new position in the dom. */
    private animateNode;
    /**
     * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;
     * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very
     * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because
     * of this dom update */
    private insertAtTarget;
    private reset;
    /**
     * Clones a given node to visually drag around. The original node is left in the same flow as its siblings.
     * Clone styles are added onto the style object directly, since the ::slotted()
     * selector can't universally target nodes that may be nested an unknown amount of shadow dom levels deep
     * @param node html node to clone
     * @returns the cloned html node
     */
    private createClone;
    private removeEventHandlers;
    private addEventHandlers;
    /**
     * Watch for any changes in grab-able handle elements.
     */
    private attachMutationObserver;
    private handleKeydown;
    /** Tracks a pointer from touchstart/mousedown to touchend/mouseup. */
    private handleTrack;
    /**
     * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property.
     * OR If a handleSelector is defined, a node matching this selector must be clicked instead
     * @returns boolean - whether tracking for this event should continue or not
     */
    private trackStart;
    /** Ends re-ordering */
    private finishOrder;
    /**
     * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is
     * the insert point for updated sorting */
    private trackMove;
    constructor();
    connectedCallback(): void;
    disconnectedCallback(): void;
    render(): any;
}
