1 | import { Renderer2, ElementRef, OnInit, EventEmitter, OnDestroy, NgZone } from '@angular/core';
|
2 | import { Subject } from 'rxjs';
|
3 | import { Edges } from './interfaces/edges.interface';
|
4 | import { ResizeEvent } from './interfaces/resize-event.interface';
|
5 | export interface ResizeCursors {
|
6 | topLeft: string;
|
7 | topRight: string;
|
8 | bottomLeft: string;
|
9 | bottomRight: string;
|
10 | leftOrRight: string;
|
11 | topOrBottom: string;
|
12 | }
|
13 | export declare const MOUSE_MOVE_THROTTLE_MS: number;
|
14 | /**
|
15 | * Place this on an element to make it resizable. For example:
|
16 | *
|
17 | * ```html
|
18 | * <div
|
19 | * mwlResizable
|
20 | * [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
|
21 | * [enableGhostResize]="true">
|
22 | * </div>
|
23 | * ```
|
24 | * Or in case they are sibling elements:
|
25 | * ```html
|
26 | * <div mwlResizable #resizableElement="mwlResizable"></div>
|
27 | * <div mwlResizeHandle [resizableContainer]="resizableElement" [resizeEdges]="{bottom: true, right: true}"></div>
|
28 | * ```
|
29 | */
|
30 | export declare class ResizableDirective implements OnInit, OnDestroy {
|
31 | private platformId;
|
32 | private renderer;
|
33 | elm: ElementRef;
|
34 | private zone;
|
35 | /**
|
36 | * A function that will be called before each resize event. Return `true` to allow the resize event to propagate or `false` to cancel it
|
37 | */
|
38 | validateResize: (resizeEvent: ResizeEvent) => boolean;
|
39 | /**
|
40 | * Set to `true` to enable a temporary resizing effect of the element in between the `resizeStart` and `resizeEnd` events.
|
41 | */
|
42 | enableGhostResize: boolean;
|
43 | /**
|
44 | * A snap grid that resize events will be locked to.
|
45 | *
|
46 | * e.g. to only allow the element to be resized every 10px set it to `{left: 10, right: 10}`
|
47 | */
|
48 | resizeSnapGrid: Edges;
|
49 | /**
|
50 | * The mouse cursors that will be set on the resize edges
|
51 | */
|
52 | resizeCursors: ResizeCursors;
|
53 | /**
|
54 | * Define the positioning of the ghost element (can be fixed or absolute)
|
55 | */
|
56 | ghostElementPositioning: 'fixed' | 'absolute';
|
57 | /**
|
58 | * Allow elements to be resized to negative dimensions
|
59 | */
|
60 | allowNegativeResizes: boolean;
|
61 | /**
|
62 | * The mouse move throttle in milliseconds, default: 50 ms
|
63 | */
|
64 | mouseMoveThrottleMS: number;
|
65 | /**
|
66 | * Called when the mouse is pressed and a resize event is about to begin. `$event` is a `ResizeEvent` object.
|
67 | */
|
68 | resizeStart: EventEmitter<ResizeEvent>;
|
69 | /**
|
70 | * Called as the mouse is dragged after a resize event has begun. `$event` is a `ResizeEvent` object.
|
71 | */
|
72 | resizing: EventEmitter<ResizeEvent>;
|
73 | /**
|
74 | * Called after the mouse is released after a resize event. `$event` is a `ResizeEvent` object.
|
75 | */
|
76 | resizeEnd: EventEmitter<ResizeEvent>;
|
77 | /**
|
78 | * @hidden
|
79 | */
|
80 | mouseup: Subject<{
|
81 | clientX: number;
|
82 | clientY: number;
|
83 | edges?: Edges | undefined;
|
84 | }>;
|
85 | /**
|
86 | * @hidden
|
87 | */
|
88 | mousedown: Subject<{
|
89 | clientX: number;
|
90 | clientY: number;
|
91 | edges?: Edges | undefined;
|
92 | }>;
|
93 | /**
|
94 | * @hidden
|
95 | */
|
96 | mousemove: Subject<{
|
97 | clientX: number;
|
98 | clientY: number;
|
99 | edges?: Edges | undefined;
|
100 | event: MouseEvent | TouchEvent;
|
101 | }>;
|
102 | private pointerEventListeners;
|
103 | private destroy$;
|
104 | /**
|
105 | * @hidden
|
106 | */
|
107 | constructor(platformId: any, renderer: Renderer2, elm: ElementRef, zone: NgZone);
|
108 | /**
|
109 | * @hidden
|
110 | */
|
111 | ngOnInit(): void;
|
112 | /**
|
113 | * @hidden
|
114 | */
|
115 | ngOnDestroy(): void;
|
116 | private setElementClass;
|
117 | }
|