igniteui-webcomponents/components/resize-container/types.d.ts

Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.

import type { Ref } from 'lit/directives/ref.js';
export type ResizeMode = 'immediate' | 'deferred';
export type ResizeCallback = (params: ResizeCallbackParams) => unknown;
export type ResizeCancelCallback = (state: ResizeState) => unknown;
export type ResizeGhostFactory = () => HTMLElement;
export type ResizeState = {
    initial: DOMRect;
    current: DOMRect;
    deltaX: number;
    deltaY: number;
    ghost: HTMLElement | null;
    trigger: HTMLElement | null;
    commit?: () => unknown;
};
export type ResizeCallbackParams = {
    event: PointerEvent;
    state: ResizeState;
};
export type ResizeControllerConfiguration = {
    enabled?: boolean;
    ref?: Ref<HTMLElement>[];
    mode?: ResizeMode;
    deferredFactory?: ResizeGhostFactory;
    layer?: () => HTMLElement;
    /** Callback invoked at the start of a resize operation. */
    start?: ResizeCallback;
    /** Callback invoked on each pointer move during a resize operation. */
    resize?: ResizeCallback;
    /** Callback invoked when a resize operation completes. */
    end?: ResizeCallback;
    /** Callback invoked when a resize operation is cancelled. */
    cancel?: ResizeCancelCallback;
    /**
     * Optional callback that returns the DOM element which will be resized/resizing depending on the
     * configured mode of the controller.
     *
     * Defaults to the controller host.
     */
    resizeTarget?: () => HTMLElement;
};