import Modifier from 'ember-modifier';
import { ColumnMeta } from "./plugin.js";
import { Column } from "../../-private/column.js";
/**
 * - why are mouse events used instead of drag events?
 * - why not use the "draggable" attribute?
 *
 * It seems drag events are more for files and/or moving images around on a page
 * dragging an image, for example, has a ghost of that image until it is dropped.
 * The same thing happens with text.
 * This prevents us from having total control of the styling of how dragging works.
 *
 *
 *
 */
declare class ResizeHandle extends Modifier<{
    Args: {
        Positional: [Column];
    };
}> {
    dragHandle: HTMLElement;
    column: Column;
    meta: ColumnMeta;
    pointerStartX: number;
    pointerStartY: number;
    pointerX: number;
    pointerY: number;
    dragFrame: number;
    keyDistance: number;
    keyFrame: number;
    lastKey: number;
    token?: unknown;
    isSetup: boolean;
    modify(element: Element, [column]: [Column]): void;
    setup: () => void;
    setPosition: (event: Event) => void;
    setStartPosition: (event: Event) => void;
    /**
     * queueUpdate takes an optional function argument that is called
     * in the requestAnimationFrame callback _after_ the resize function.
     *
     * We can use this to ensure that preferences are only ever saved after
     * we have completed column resizing.
     *
     * Because the requestAnimationFrame 'hides' these function calls from the
     * the ember test waiter, we also ensure that we track them by also cancelling
     * the waiter in the requestAnimationFrame callback.
     */
    queueUpdate: (callback?: () => void) => void;
    dragEndHandler: () => void;
    dragMove: (event: Event) => void;
    dragStartHandler: (event: Event) => void;
    keyHandler: (event: KeyboardEvent) => void;
}
/**
 * Modifier to attach to the column resize handles.
 * This provides both keyboard and mouse support for resizing columns.
 * (provided the resize handle element is focusable -- so consider using
 * a button for the resize element)
 *
 * @example
 * ```js
 * import Component from '@glimmer/component';
 * import { meta } from 'ember-headless-table/plugins';
 * import { resizeHandle, ColumnResizing } from 'ember-headless-table/plugins/column-resizing';
 *
 * export default class TableHead extends Component {
 *   /* ✂️  *\/
 *
 *   <template>
 *     <thead>
 *       <tr>
 *         {{#each this.columns as |column|}}
 *           <th>
 *             <span>{{column.name}}</span>
 *             <button {{resizeHandle column}}></button>
 *           </th>
 *         {{/each}}
 *       </tr>
 *     </thead>
 *   </template>
 * }
 * ```
 *
 * Width and isResizing state is maintained on the "meta"
 * class so that the users may choose per-column stylings for
 * isResizing and dragging behaviors.
 *
 * For example, while dragging, the user may add a class based on the
 * isDragging property.
 *
 * @example
 * ```js
 * import Component from '@glimmer/component';
 * import { meta } from 'ember-headless-table/plugins';
 * import { resizeHandle, ColumnResizing } from 'ember-headless-table/plugins/column-resizing';
 *
 * export default class TableHead extends Component {
 *   /* ✂️  *\/
 *
 *   isDragging = (column) => {
 *     return meta.forColumn(column, ColumnResizing).isDragging;
 *   }
 *
 *   <template>
 *     <thead>
 *       <tr>
 *         {{#each this.columns as |column|}}
 *           <th class="header {{if (this.isDragging column) 'blue'}}">
 *             <span>{{column.name}}</span>
 *             <button {{resizeHandle column}}></button>
 *           </th>
 *         {{/each}}
 *       </tr>
 *     </thead>
 *   </template>
 * }
 * ```
 *
 *
 * @note
 * The logic here is copied from the drag slider in
 * https://limber.glimdown.com/
 * See: "resize-handle" on Limber's GitHub
 */
declare const resizeHandle: typeof ResizeHandle;
export { resizeHandle };