angular-resizable-element/index.d.ts

An angular 20.0+ directive that allows an element to be dragged and resized

import * as i0 from '@angular/core';
import { OnInit, OnDestroy, EventEmitter } from '@angular/core';
import { Subject } from 'rxjs';

/**
 * The edges that the resize event were triggered on
 */
interface Edges {
    top?: boolean | number;
    bottom?: boolean | number;
    left?: boolean | number;
    right?: boolean | number;
    [key: string]: boolean | number | undefined;
}

/**
 * The bounding rectangle of the resized element
 */
interface BoundingRectangle {
    top: number;
    bottom: number;
    left: number;
    right: number;
    height?: number;
    width?: number;
    scrollTop?: number;
    scrollLeft?: number;
    [key: string]: number | undefined;
}

/**
 * The `$event` object that is passed to the resize events
 */
interface ResizeEvent {
    rectangle: BoundingRectangle;
    edges: Edges;
}

interface ResizeCursors {
    topLeft: string;
    topRight: string;
    bottomLeft: string;
    bottomRight: string;
    leftOrRight: string;
    topOrBottom: string;
}
/**
 * Place this on an element to make it resizable. For example:
 *
 * ```html
 * <div
 *   mwlResizable
 *   [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
 *   [enableGhostResize]="true">
 * </div>
 * ```
 * Or in case they are sibling elements:
 * ```html
 * <div mwlResizable #resizableElement="mwlResizable"></div>
 * <div mwlResizeHandle [resizableContainer]="resizableElement" [resizeEdges]="{bottom: true, right: true}"></div>
 * ```
 */
declare class ResizableDirective implements OnInit, OnDestroy {
    /**
     * A function that will be called before each resize event. Return `true` to allow the resize event to propagate or `false` to cancel it
     */
    validateResize: (resizeEvent: ResizeEvent) => boolean;
    /**
     * Set to `true` to enable a temporary resizing effect of the element in between the `resizeStart` and `resizeEnd` events.
     */
    enableGhostResize: boolean;
    /**
     * A snap grid that resize events will be locked to.
     *
     * e.g. to only allow the element to be resized every 10px set it to `{left: 10, right: 10}`
     */
    resizeSnapGrid: Edges;
    /**
     * The mouse cursors that will be set on the resize edges
     */
    resizeCursors: Partial<ResizeCursors>;
    /**
     * Define the positioning of the ghost element (can be fixed or absolute)
     */
    ghostElementPositioning: 'fixed' | 'absolute';
    /**
     * Allow elements to be resized to negative dimensions
     */
    allowNegativeResizes: boolean;
    /**
     * The mouse move throttle in milliseconds, default: 50 ms
     */
    mouseMoveThrottleMS: number;
    /**
     * Called when the mouse is pressed and a resize event is about to begin. `$event` is a `ResizeEvent` object.
     */
    resizeStart: EventEmitter<ResizeEvent>;
    /**
     * Called as the mouse is dragged after a resize event has begun. `$event` is a `ResizeEvent` object.
     */
    resizing: EventEmitter<ResizeEvent>;
    /**
     * Called after the mouse is released after a resize event. `$event` is a `ResizeEvent` object.
     */
    resizeEnd: EventEmitter<ResizeEvent>;
    /**
     * @hidden
     */
    mouseup: Subject<{
        clientX: number;
        clientY: number;
        edges?: Edges;
    }>;
    /**
     * @hidden
     */
    mousedown: Subject<{
        clientX: number;
        clientY: number;
        edges?: Edges;
    }>;
    /**
     * @hidden
     */
    mousemove: Subject<{
        clientX: number;
        clientY: number;
        edges?: Edges;
        event: MouseEvent | TouchEvent;
    }>;
    private pointerEventListeners;
    private destroy$;
    private platformId;
    private renderer;
    private elm;
    private zone;
    /**
     * @hidden
     */
    constructor();
    /**
     * @hidden
     */
    ngOnInit(): void;
    /**
     * @hidden
     */
    ngOnDestroy(): void;
    private setElementClass;
    static ɵfac: i0.ɵɵFactoryDeclaration<ResizableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ResizableDirective, "[mwlResizable]", ["mwlResizable"], { "validateResize": { "alias": "validateResize"; "required": false; }; "enableGhostResize": { "alias": "enableGhostResize"; "required": false; }; "resizeSnapGrid": { "alias": "resizeSnapGrid"; "required": false; }; "resizeCursors": { "alias": "resizeCursors"; "required": false; }; "ghostElementPositioning": { "alias": "ghostElementPositioning"; "required": false; }; "allowNegativeResizes": { "alias": "allowNegativeResizes"; "required": false; }; "mouseMoveThrottleMS": { "alias": "mouseMoveThrottleMS"; "required": false; }; }, { "resizeStart": "resizeStart"; "resizing": "resizing"; "resizeEnd": "resizeEnd"; }, never, never, true, never>;
}

/**
 * An element placed inside a `mwlResizable` directive to be used as a drag and resize handle
 *
 * For example
 *
 * ```html
 * <div mwlResizable>
 *   <div mwlResizeHandle [resizeEdges]="{bottom: true, right: true}"></div>
 * </div>
 * ```
 * Or in case they are sibling elements:
 * ```html
 * <div mwlResizable #resizableElement="mwlResizable"></div>
 * <div mwlResizeHandle [resizableContainer]="resizableElement" [resizeEdges]="{bottom: true, right: true}"></div>
 * ```
 */
declare class ResizeHandleDirective implements OnInit, OnDestroy {
    private renderer;
    private element;
    private zone;
    private resizableDirective;
    /**
     * The `Edges` object that contains the edges of the parent element that dragging the handle will trigger a resize on
     */
    resizeEdges: Edges;
    /**
     * Reference to ResizableDirective in case if handle is not located inside of element with ResizableDirective
     */
    resizableContainer: ResizableDirective;
    private eventListeners;
    private destroy$;
    ngOnInit(): void;
    ngOnDestroy(): void;
    /**
     * @hidden
     */
    onMousedown(event: MouseEvent | TouchEvent, clientX: number, clientY: number): void;
    /**
     * @hidden
     */
    onMouseup(clientX: number, clientY: number): void;
    private get resizable();
    private onMousemove;
    private unsubscribeEventListeners;
    private listenOnTheHost;
    static ɵfac: i0.ɵɵFactoryDeclaration<ResizeHandleDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ResizeHandleDirective, "[mwlResizeHandle]", never, { "resizeEdges": { "alias": "resizeEdges"; "required": false; }; "resizableContainer": { "alias": "resizableContainer"; "required": false; }; }, {}, never, never, true, never>;
}

/**
 * @deprecated import standalone `ResizableDirective` / `ResizeHandleDirective` directives instead
 */
declare class ResizableModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<ResizableModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<ResizableModule, never, [typeof ResizableDirective, typeof ResizeHandleDirective], [typeof ResizableDirective, typeof ResizeHandleDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<ResizableModule>;
}

export { ResizableDirective, ResizableModule, ResizeHandleDirective };
export type { BoundingRectangle, Edges, ResizeCursors, ResizeEvent };