index.d.ts 63 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383
  1. import * as i0 from '@angular/core';
  2. import { InjectionToken, ElementRef, NgZone, OnDestroy, EventEmitter, AfterViewInit, TemplateRef, OnChanges, SimpleChanges, ViewContainerRef, Renderer2 } from '@angular/core';
  3. import { a as Direction } from '../bidi-module.d-D-fEBKdS.js';
  4. import { Subject, Observable } from 'rxjs';
  5. import { ViewportRuler } from '../scrolling/index.js';
  6. import { N as NumberInput } from '../number-property.d-CJVxXUcb.js';
  7. import { a as CdkScrollableModule } from '../scrolling-module.d-ud2XrbF8.js';
  8. export { C as ɵɵCdkScrollable } from '../scrolling-module.d-ud2XrbF8.js';
  9. import '../data-source.d-Bblv7Zvh.js';
  10. /** Possible values that can be used to configure the drag start delay. */
  11. type DragStartDelay = number | {
  12. touch: number;
  13. mouse: number;
  14. };
  15. /** Possible axis along which dragging can be locked. */
  16. type DragAxis = 'x' | 'y';
  17. /** Function that can be used to constrain the position of a dragged element. */
  18. type DragConstrainPosition = (point: Point, dragRef: DragRef) => Point;
  19. /** Possible orientations for a drop list. */
  20. type DropListOrientation = 'horizontal' | 'vertical' | 'mixed';
  21. /**
  22. * Injection token that can be used to configure the
  23. * behavior of the drag&drop-related components.
  24. */
  25. declare const CDK_DRAG_CONFIG: InjectionToken<DragDropConfig>;
  26. /**
  27. * Object that can be used to configure the drag
  28. * items and drop lists within a module or a component.
  29. */
  30. interface DragDropConfig extends Partial<DragRefConfig> {
  31. lockAxis?: DragAxis;
  32. dragStartDelay?: DragStartDelay;
  33. constrainPosition?: DragConstrainPosition;
  34. previewClass?: string | string[];
  35. boundaryElement?: string;
  36. rootElementSelector?: string;
  37. draggingDisabled?: boolean;
  38. sortingDisabled?: boolean;
  39. listAutoScrollDisabled?: boolean;
  40. listOrientation?: DropListOrientation;
  41. zIndex?: number;
  42. previewContainer?: 'global' | 'parent';
  43. }
  44. /**
  45. * Reference to a drop list. Used to manipulate or dispose of the container.
  46. */
  47. declare class DropListRef<T = any> {
  48. private _dragDropRegistry;
  49. private _ngZone;
  50. private _viewportRuler;
  51. /** Element that the drop list is attached to. */
  52. element: HTMLElement | ElementRef<HTMLElement>;
  53. /** Whether starting a dragging sequence from this container is disabled. */
  54. disabled: boolean;
  55. /** Whether sorting items within the list is disabled. */
  56. sortingDisabled: boolean;
  57. /** Locks the position of the draggable elements inside the container along the specified axis. */
  58. lockAxis: 'x' | 'y';
  59. /**
  60. * Whether auto-scrolling the view when the user
  61. * moves their pointer close to the edges is disabled.
  62. */
  63. autoScrollDisabled: boolean;
  64. /** Number of pixels to scroll for each frame when auto-scrolling an element. */
  65. autoScrollStep: number;
  66. /**
  67. * Function that is used to determine whether an item
  68. * is allowed to be moved into a drop container.
  69. */
  70. enterPredicate: (drag: DragRef, drop: DropListRef) => boolean;
  71. /** Function that is used to determine whether an item can be sorted into a particular index. */
  72. sortPredicate: (index: number, drag: DragRef, drop: DropListRef) => boolean;
  73. /** Emits right before dragging has started. */
  74. readonly beforeStarted: Subject<void>;
  75. /**
  76. * Emits when the user has moved a new drag item into this container.
  77. */
  78. readonly entered: Subject<{
  79. item: DragRef;
  80. container: DropListRef;
  81. currentIndex: number;
  82. }>;
  83. /**
  84. * Emits when the user removes an item from the container
  85. * by dragging it into another container.
  86. */
  87. readonly exited: Subject<{
  88. item: DragRef;
  89. container: DropListRef;
  90. }>;
  91. /** Emits when the user drops an item inside the container. */
  92. readonly dropped: Subject<{
  93. item: DragRef;
  94. currentIndex: number;
  95. previousIndex: number;
  96. container: DropListRef;
  97. previousContainer: DropListRef;
  98. isPointerOverContainer: boolean;
  99. distance: Point;
  100. dropPoint: Point;
  101. event: MouseEvent | TouchEvent;
  102. }>;
  103. /** Emits as the user is swapping items while actively dragging. */
  104. readonly sorted: Subject<{
  105. previousIndex: number;
  106. currentIndex: number;
  107. container: DropListRef;
  108. item: DragRef;
  109. }>;
  110. /** Emits when a dragging sequence is started in a list connected to the current one. */
  111. readonly receivingStarted: Subject<{
  112. receiver: DropListRef;
  113. initiator: DropListRef;
  114. items: DragRef[];
  115. }>;
  116. /** Emits when a dragging sequence is stopped from a list connected to the current one. */
  117. readonly receivingStopped: Subject<{
  118. receiver: DropListRef;
  119. initiator: DropListRef;
  120. }>;
  121. /** Arbitrary data that can be attached to the drop list. */
  122. data: T;
  123. /** Element that is the direct parent of the drag items. */
  124. private _container;
  125. /** Whether an item in the list is being dragged. */
  126. private _isDragging;
  127. /** Keeps track of the positions of any parent scrollable elements. */
  128. private _parentPositions;
  129. /** Strategy being used to sort items within the list. */
  130. private _sortStrategy;
  131. /** Cached `DOMRect` of the drop list. */
  132. private _domRect;
  133. /** Draggable items in the container. */
  134. private _draggables;
  135. /** Drop lists that are connected to the current one. */
  136. private _siblings;
  137. /** Connected siblings that currently have a dragged item. */
  138. private _activeSiblings;
  139. /** Subscription to the window being scrolled. */
  140. private _viewportScrollSubscription;
  141. /** Vertical direction in which the list is currently scrolling. */
  142. private _verticalScrollDirection;
  143. /** Horizontal direction in which the list is currently scrolling. */
  144. private _horizontalScrollDirection;
  145. /** Node that is being auto-scrolled. */
  146. private _scrollNode;
  147. /** Used to signal to the current auto-scroll sequence when to stop. */
  148. private readonly _stopScrollTimers;
  149. /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */
  150. private _cachedShadowRoot;
  151. /** Reference to the document. */
  152. private _document;
  153. /** Elements that can be scrolled while the user is dragging. */
  154. private _scrollableElements;
  155. /** Initial value for the element's `scroll-snap-type` style. */
  156. private _initialScrollSnap;
  157. /** Direction of the list's layout. */
  158. private _direction;
  159. constructor(element: ElementRef<HTMLElement> | HTMLElement, _dragDropRegistry: DragDropRegistry, _document: any, _ngZone: NgZone, _viewportRuler: ViewportRuler);
  160. /** Removes the drop list functionality from the DOM element. */
  161. dispose(): void;
  162. /** Whether an item from this list is currently being dragged. */
  163. isDragging(): boolean;
  164. /** Starts dragging an item. */
  165. start(): void;
  166. /**
  167. * Attempts to move an item into the container.
  168. * @param item Item that was moved into the container.
  169. * @param pointerX Position of the item along the X axis.
  170. * @param pointerY Position of the item along the Y axis.
  171. * @param index Index at which the item entered. If omitted, the container will try to figure it
  172. * out automatically.
  173. */
  174. enter(item: DragRef, pointerX: number, pointerY: number, index?: number): void;
  175. /**
  176. * Removes an item from the container after it was dragged into another container by the user.
  177. * @param item Item that was dragged out.
  178. */
  179. exit(item: DragRef): void;
  180. /**
  181. * Drops an item into this container.
  182. * @param item Item being dropped into the container.
  183. * @param currentIndex Index at which the item should be inserted.
  184. * @param previousIndex Index of the item when dragging started.
  185. * @param previousContainer Container from which the item got dragged in.
  186. * @param isPointerOverContainer Whether the user's pointer was over the
  187. * container when the item was dropped.
  188. * @param distance Distance the user has dragged since the start of the dragging sequence.
  189. * @param event Event that triggered the dropping sequence.
  190. *
  191. * @breaking-change 15.0.0 `previousIndex` and `event` parameters to become required.
  192. */
  193. drop(item: DragRef, currentIndex: number, previousIndex: number, previousContainer: DropListRef, isPointerOverContainer: boolean, distance: Point, dropPoint: Point, event?: MouseEvent | TouchEvent): void;
  194. /**
  195. * Sets the draggable items that are a part of this list.
  196. * @param items Items that are a part of this list.
  197. */
  198. withItems(items: DragRef[]): this;
  199. /** Sets the layout direction of the drop list. */
  200. withDirection(direction: Direction): this;
  201. /**
  202. * Sets the containers that are connected to this one. When two or more containers are
  203. * connected, the user will be allowed to transfer items between them.
  204. * @param connectedTo Other containers that the current containers should be connected to.
  205. */
  206. connectedTo(connectedTo: DropListRef[]): this;
  207. /**
  208. * Sets the orientation of the container.
  209. * @param orientation New orientation for the container.
  210. */
  211. withOrientation(orientation: DropListOrientation): this;
  212. /**
  213. * Sets which parent elements are can be scrolled while the user is dragging.
  214. * @param elements Elements that can be scrolled.
  215. */
  216. withScrollableParents(elements: HTMLElement[]): this;
  217. /**
  218. * Configures the drop list so that a different element is used as the container for the
  219. * dragged items. This is useful for the cases when one might not have control over the
  220. * full DOM that sets up the dragging.
  221. * Note that the alternate container needs to be a descendant of the drop list.
  222. * @param container New element container to be assigned.
  223. */
  224. withElementContainer(container: HTMLElement): this;
  225. /** Gets the scrollable parents that are registered with this drop container. */
  226. getScrollableParents(): readonly HTMLElement[];
  227. /**
  228. * Figures out the index of an item in the container.
  229. * @param item Item whose index should be determined.
  230. */
  231. getItemIndex(item: DragRef): number;
  232. /**
  233. * Whether the list is able to receive the item that
  234. * is currently being dragged inside a connected drop list.
  235. */
  236. isReceiving(): boolean;
  237. /**
  238. * Sorts an item inside the container based on its position.
  239. * @param item Item to be sorted.
  240. * @param pointerX Position of the item along the X axis.
  241. * @param pointerY Position of the item along the Y axis.
  242. * @param pointerDelta Direction in which the pointer is moving along each axis.
  243. */
  244. _sortItem(item: DragRef, pointerX: number, pointerY: number, pointerDelta: {
  245. x: number;
  246. y: number;
  247. }): void;
  248. /**
  249. * Checks whether the user's pointer is close to the edges of either the
  250. * viewport or the drop list and starts the auto-scroll sequence.
  251. * @param pointerX User's pointer position along the x axis.
  252. * @param pointerY User's pointer position along the y axis.
  253. */
  254. _startScrollingIfNecessary(pointerX: number, pointerY: number): void;
  255. /** Stops any currently-running auto-scroll sequences. */
  256. _stopScrolling(): void;
  257. /** Starts the dragging sequence within the list. */
  258. private _draggingStarted;
  259. /** Caches the positions of the configured scrollable parents. */
  260. private _cacheParentPositions;
  261. /** Resets the container to its initial state. */
  262. private _reset;
  263. /** Starts the interval that'll auto-scroll the element. */
  264. private _startScrollInterval;
  265. /**
  266. * Checks whether the user's pointer is positioned over the container.
  267. * @param x Pointer position along the X axis.
  268. * @param y Pointer position along the Y axis.
  269. */
  270. _isOverContainer(x: number, y: number): boolean;
  271. /**
  272. * Figures out whether an item should be moved into a sibling
  273. * drop container, based on its current position.
  274. * @param item Drag item that is being moved.
  275. * @param x Position of the item along the X axis.
  276. * @param y Position of the item along the Y axis.
  277. */
  278. _getSiblingContainerFromPosition(item: DragRef, x: number, y: number): DropListRef | undefined;
  279. /**
  280. * Checks whether the drop list can receive the passed-in item.
  281. * @param item Item that is being dragged into the list.
  282. * @param x Position of the item along the X axis.
  283. * @param y Position of the item along the Y axis.
  284. */
  285. _canReceive(item: DragRef, x: number, y: number): boolean;
  286. /**
  287. * Called by one of the connected drop lists when a dragging sequence has started.
  288. * @param sibling Sibling in which dragging has started.
  289. */
  290. _startReceiving(sibling: DropListRef, items: DragRef[]): void;
  291. /**
  292. * Called by a connected drop list when dragging has stopped.
  293. * @param sibling Sibling whose dragging has stopped.
  294. */
  295. _stopReceiving(sibling: DropListRef): void;
  296. /**
  297. * Starts listening to scroll events on the viewport.
  298. * Used for updating the internal state of the list.
  299. */
  300. private _listenToScrollEvents;
  301. /**
  302. * Lazily resolves and returns the shadow root of the element. We do this in a function, rather
  303. * than saving it in property directly on init, because we want to resolve it as late as possible
  304. * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
  305. * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
  306. */
  307. private _getShadowRoot;
  308. /** Notifies any siblings that may potentially receive the item. */
  309. private _notifyReceivingSiblings;
  310. }
  311. /** Container that wraps a set of draggable items. */
  312. declare class CdkDropList<T = any> implements OnDestroy {
  313. element: ElementRef<HTMLElement>;
  314. private _changeDetectorRef;
  315. private _scrollDispatcher;
  316. private _dir;
  317. private _group;
  318. /** Refs that have been synced with the drop ref most recently. */
  319. private _latestSortedRefs;
  320. /** Emits when the list has been destroyed. */
  321. private readonly _destroyed;
  322. /** Whether the element's scrollable parents have been resolved. */
  323. private _scrollableParentsResolved;
  324. /** Keeps track of the drop lists that are currently on the page. */
  325. private static _dropLists;
  326. /** Reference to the underlying drop list instance. */
  327. _dropListRef: DropListRef<CdkDropList<T>>;
  328. /**
  329. * Other draggable containers that this container is connected to and into which the
  330. * container's items can be transferred. Can either be references to other drop containers,
  331. * or their unique IDs.
  332. */
  333. connectedTo: (CdkDropList | string)[] | CdkDropList | string;
  334. /** Arbitrary data to attach to this container. */
  335. data: T;
  336. /** Direction in which the list is oriented. */
  337. orientation: DropListOrientation;
  338. /**
  339. * Unique ID for the drop zone. Can be used as a reference
  340. * in the `connectedTo` of another `CdkDropList`.
  341. */
  342. id: string;
  343. /** Locks the position of the draggable elements inside the container along the specified axis. */
  344. lockAxis: DragAxis;
  345. /** Whether starting a dragging sequence from this container is disabled. */
  346. get disabled(): boolean;
  347. set disabled(value: boolean);
  348. private _disabled;
  349. /** Whether sorting within this drop list is disabled. */
  350. sortingDisabled: boolean;
  351. /**
  352. * Function that is used to determine whether an item
  353. * is allowed to be moved into a drop container.
  354. */
  355. enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean;
  356. /** Functions that is used to determine whether an item can be sorted into a particular index. */
  357. sortPredicate: (index: number, drag: CdkDrag, drop: CdkDropList) => boolean;
  358. /** Whether to auto-scroll the view when the user moves their pointer close to the edges. */
  359. autoScrollDisabled: boolean;
  360. /** Number of pixels to scroll for each frame when auto-scrolling an element. */
  361. autoScrollStep: NumberInput;
  362. /**
  363. * Selector that will be used to resolve an alternate element container for the drop list.
  364. * Passing an alternate container is useful for the cases where one might not have control
  365. * over the parent node of the draggable items within the list (e.g. due to content projection).
  366. * This allows for usages like:
  367. *
  368. * ```
  369. * <div cdkDropList cdkDropListElementContainer=".inner">
  370. * <div class="inner">
  371. * <div cdkDrag></div>
  372. * </div>
  373. * </div>
  374. * ```
  375. */
  376. elementContainerSelector: string | null;
  377. /** Emits when the user drops an item inside the container. */
  378. readonly dropped: EventEmitter<CdkDragDrop<T, any>>;
  379. /**
  380. * Emits when the user has moved a new drag item into this container.
  381. */
  382. readonly entered: EventEmitter<CdkDragEnter<T>>;
  383. /**
  384. * Emits when the user removes an item from the container
  385. * by dragging it into another container.
  386. */
  387. readonly exited: EventEmitter<CdkDragExit<T>>;
  388. /** Emits as the user is swapping items while actively dragging. */
  389. readonly sorted: EventEmitter<CdkDragSortEvent<T>>;
  390. /**
  391. * Keeps track of the items that are registered with this container. Historically we used to
  392. * do this with a `ContentChildren` query, however queries don't handle transplanted views very
  393. * well which means that we can't handle cases like dragging the headers of a `mat-table`
  394. * correctly. What we do instead is to have the items register themselves with the container
  395. * and then we sort them based on their position in the DOM.
  396. */
  397. private _unsortedItems;
  398. constructor(...args: unknown[]);
  399. /** Registers an items with the drop list. */
  400. addItem(item: CdkDrag): void;
  401. /** Removes an item from the drop list. */
  402. removeItem(item: CdkDrag): void;
  403. /** Gets the registered items in the list, sorted by their position in the DOM. */
  404. getSortedItems(): CdkDrag[];
  405. ngOnDestroy(): void;
  406. /** Syncs the inputs of the CdkDropList with the options of the underlying DropListRef. */
  407. private _setupInputSyncSubscription;
  408. /** Handles events from the underlying DropListRef. */
  409. private _handleEvents;
  410. /** Assigns the default input values based on a provided config object. */
  411. private _assignDefaults;
  412. /** Syncs up the registered drag items with underlying drop list ref. */
  413. private _syncItemsWithRef;
  414. static ɵfac: i0.ɵɵFactoryDeclaration<CdkDropList<any>, never>;
  415. static ɵdir: i0.ɵɵDirectiveDeclaration<CdkDropList<any>, "[cdkDropList], cdk-drop-list", ["cdkDropList"], { "connectedTo": { "alias": "cdkDropListConnectedTo"; "required": false; }; "data": { "alias": "cdkDropListData"; "required": false; }; "orientation": { "alias": "cdkDropListOrientation"; "required": false; }; "id": { "alias": "id"; "required": false; }; "lockAxis": { "alias": "cdkDropListLockAxis"; "required": false; }; "disabled": { "alias": "cdkDropListDisabled"; "required": false; }; "sortingDisabled": { "alias": "cdkDropListSortingDisabled"; "required": false; }; "enterPredicate": { "alias": "cdkDropListEnterPredicate"; "required": false; }; "sortPredicate": { "alias": "cdkDropListSortPredicate"; "required": false; }; "autoScrollDisabled": { "alias": "cdkDropListAutoScrollDisabled"; "required": false; }; "autoScrollStep": { "alias": "cdkDropListAutoScrollStep"; "required": false; }; "elementContainerSelector": { "alias": "cdkDropListElementContainer"; "required": false; }; }, { "dropped": "cdkDropListDropped"; "entered": "cdkDropListEntered"; "exited": "cdkDropListExited"; "sorted": "cdkDropListSorted"; }, never, never, true, never>;
  416. static ngAcceptInputType_disabled: unknown;
  417. static ngAcceptInputType_sortingDisabled: unknown;
  418. static ngAcceptInputType_autoScrollDisabled: unknown;
  419. }
  420. /** Event emitted when the user starts dragging a draggable. */
  421. interface CdkDragStart<T = any> {
  422. /** Draggable that emitted the event. */
  423. source: CdkDrag<T>;
  424. /** Native event that started the drag sequence. */
  425. event: MouseEvent | TouchEvent;
  426. }
  427. /** Event emitted when the user releases an item, before any animations have started. */
  428. interface CdkDragRelease<T = any> {
  429. /** Draggable that emitted the event. */
  430. source: CdkDrag<T>;
  431. /** Native event that caused the release event. */
  432. event: MouseEvent | TouchEvent;
  433. }
  434. /** Event emitted when the user stops dragging a draggable. */
  435. interface CdkDragEnd<T = any> {
  436. /** Draggable that emitted the event. */
  437. source: CdkDrag<T>;
  438. /** Distance in pixels that the user has dragged since the drag sequence started. */
  439. distance: {
  440. x: number;
  441. y: number;
  442. };
  443. /** Position where the pointer was when the item was dropped */
  444. dropPoint: {
  445. x: number;
  446. y: number;
  447. };
  448. /** Native event that caused the dragging to stop. */
  449. event: MouseEvent | TouchEvent;
  450. }
  451. /** Event emitted when the user moves an item into a new drop container. */
  452. interface CdkDragEnter<T = any, I = T> {
  453. /** Container into which the user has moved the item. */
  454. container: CdkDropList<T>;
  455. /** Item that was moved into the container. */
  456. item: CdkDrag<I>;
  457. /** Index at which the item has entered the container. */
  458. currentIndex: number;
  459. }
  460. /**
  461. * Event emitted when the user removes an item from a
  462. * drop container by moving it into another one.
  463. */
  464. interface CdkDragExit<T = any, I = T> {
  465. /** Container from which the user has a removed an item. */
  466. container: CdkDropList<T>;
  467. /** Item that was removed from the container. */
  468. item: CdkDrag<I>;
  469. }
  470. /** Event emitted when the user drops a draggable item inside a drop container. */
  471. interface CdkDragDrop<T, O = T, I = any> {
  472. /** Index of the item when it was picked up. */
  473. previousIndex: number;
  474. /** Current index of the item. */
  475. currentIndex: number;
  476. /** Item that is being dropped. */
  477. item: CdkDrag<I>;
  478. /** Container in which the item was dropped. */
  479. container: CdkDropList<T>;
  480. /** Container from which the item was picked up. Can be the same as the `container`. */
  481. previousContainer: CdkDropList<O>;
  482. /** Whether the user's pointer was over the container when the item was dropped. */
  483. isPointerOverContainer: boolean;
  484. /** Distance in pixels that the user has dragged since the drag sequence started. */
  485. distance: {
  486. x: number;
  487. y: number;
  488. };
  489. /** Position where the pointer was when the item was dropped */
  490. dropPoint: {
  491. x: number;
  492. y: number;
  493. };
  494. /** Native event that caused the drop event. */
  495. event: MouseEvent | TouchEvent;
  496. }
  497. /** Event emitted as the user is dragging a draggable item. */
  498. interface CdkDragMove<T = any> {
  499. /** Item that is being dragged. */
  500. source: CdkDrag<T>;
  501. /** Position of the user's pointer on the page. */
  502. pointerPosition: {
  503. x: number;
  504. y: number;
  505. };
  506. /** Native event that is causing the dragging. */
  507. event: MouseEvent | TouchEvent;
  508. /** Distance in pixels that the user has dragged since the drag sequence started. */
  509. distance: {
  510. x: number;
  511. y: number;
  512. };
  513. /**
  514. * Indicates the direction in which the user is dragging the element along each axis.
  515. * `1` means that the position is increasing (e.g. the user is moving to the right or downwards),
  516. * whereas `-1` means that it's decreasing (they're moving to the left or upwards). `0` means
  517. * that the position hasn't changed.
  518. */
  519. delta: {
  520. x: -1 | 0 | 1;
  521. y: -1 | 0 | 1;
  522. };
  523. }
  524. /** Event emitted when the user swaps the position of two drag items. */
  525. interface CdkDragSortEvent<T = any, I = T> {
  526. /** Index from which the item was sorted previously. */
  527. previousIndex: number;
  528. /** Index that the item is currently in. */
  529. currentIndex: number;
  530. /** Container that the item belongs to. */
  531. container: CdkDropList<T>;
  532. /** Item that is being sorted. */
  533. item: CdkDrag<I>;
  534. }
  535. /**
  536. * Injection token that can be used to reference instances of `CdkDragHandle`. It serves as
  537. * alternative token to the actual `CdkDragHandle` class which could cause unnecessary
  538. * retention of the class and its directive metadata.
  539. */
  540. declare const CDK_DRAG_HANDLE: InjectionToken<CdkDragHandle>;
  541. /** Handle that can be used to drag a CdkDrag instance. */
  542. declare class CdkDragHandle implements AfterViewInit, OnDestroy {
  543. element: ElementRef<HTMLElement>;
  544. private _parentDrag;
  545. private _dragDropRegistry;
  546. /** Emits when the state of the handle has changed. */
  547. readonly _stateChanges: Subject<CdkDragHandle>;
  548. /** Whether starting to drag through this handle is disabled. */
  549. get disabled(): boolean;
  550. set disabled(value: boolean);
  551. private _disabled;
  552. constructor(...args: unknown[]);
  553. ngAfterViewInit(): void;
  554. ngOnDestroy(): void;
  555. static ɵfac: i0.ɵɵFactoryDeclaration<CdkDragHandle, never>;
  556. static ɵdir: i0.ɵɵDirectiveDeclaration<CdkDragHandle, "[cdkDragHandle]", never, { "disabled": { "alias": "cdkDragHandleDisabled"; "required": false; }; }, {}, never, never, true, never>;
  557. static ngAcceptInputType_disabled: unknown;
  558. }
  559. /**
  560. * Injection token that can be used to reference instances of `CdkDragPlaceholder`. It serves as
  561. * alternative token to the actual `CdkDragPlaceholder` class which could cause unnecessary
  562. * retention of the class and its directive metadata.
  563. */
  564. declare const CDK_DRAG_PLACEHOLDER: InjectionToken<CdkDragPlaceholder<any>>;
  565. /**
  566. * Element that will be used as a template for the placeholder of a CdkDrag when
  567. * it is being dragged. The placeholder is displayed in place of the element being dragged.
  568. */
  569. declare class CdkDragPlaceholder<T = any> implements OnDestroy {
  570. templateRef: TemplateRef<T>;
  571. private _drag;
  572. /** Context data to be added to the placeholder template instance. */
  573. data: T;
  574. constructor(...args: unknown[]);
  575. ngOnDestroy(): void;
  576. static ɵfac: i0.ɵɵFactoryDeclaration<CdkDragPlaceholder<any>, never>;
  577. static ɵdir: i0.ɵɵDirectiveDeclaration<CdkDragPlaceholder<any>, "ng-template[cdkDragPlaceholder]", never, { "data": { "alias": "data"; "required": false; }; }, {}, never, never, true, never>;
  578. }
  579. /**
  580. * Injection token that can be used to reference instances of `CdkDragPreview`. It serves as
  581. * alternative token to the actual `CdkDragPreview` class which could cause unnecessary
  582. * retention of the class and its directive metadata.
  583. */
  584. declare const CDK_DRAG_PREVIEW: InjectionToken<CdkDragPreview<any>>;
  585. /**
  586. * Element that will be used as a template for the preview
  587. * of a CdkDrag when it is being dragged.
  588. */
  589. declare class CdkDragPreview<T = any> implements OnDestroy {
  590. templateRef: TemplateRef<T>;
  591. private _drag;
  592. /** Context data to be added to the preview template instance. */
  593. data: T;
  594. /** Whether the preview should preserve the same size as the item that is being dragged. */
  595. matchSize: boolean;
  596. constructor(...args: unknown[]);
  597. ngOnDestroy(): void;
  598. static ɵfac: i0.ɵɵFactoryDeclaration<CdkDragPreview<any>, never>;
  599. static ɵdir: i0.ɵɵDirectiveDeclaration<CdkDragPreview<any>, "ng-template[cdkDragPreview]", never, { "data": { "alias": "data"; "required": false; }; "matchSize": { "alias": "matchSize"; "required": false; }; }, {}, never, never, true, never>;
  600. static ngAcceptInputType_matchSize: unknown;
  601. }
  602. /**
  603. * Injection token that can be used to reference instances of `CdkDropList`. It serves as
  604. * alternative token to the actual `CdkDropList` class which could cause unnecessary
  605. * retention of the class and its directive metadata.
  606. */
  607. declare const CDK_DROP_LIST: InjectionToken<CdkDropList<any>>;
  608. /** Element that can be moved inside a CdkDropList container. */
  609. declare class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
  610. element: ElementRef<HTMLElement>;
  611. dropContainer: CdkDropList<any>;
  612. private _ngZone;
  613. private _viewContainerRef;
  614. private _dir;
  615. private _changeDetectorRef;
  616. private _selfHandle;
  617. private _parentDrag;
  618. private _dragDropRegistry;
  619. private readonly _destroyed;
  620. private _handles;
  621. private _previewTemplate;
  622. private _placeholderTemplate;
  623. /** Reference to the underlying drag instance. */
  624. _dragRef: DragRef<CdkDrag<T>>;
  625. /** Arbitrary data to attach to this drag instance. */
  626. data: T;
  627. /** Locks the position of the dragged element along the specified axis. */
  628. lockAxis: DragAxis;
  629. /**
  630. * Selector that will be used to determine the root draggable element, starting from
  631. * the `cdkDrag` element and going up the DOM. Passing an alternate root element is useful
  632. * when trying to enable dragging on an element that you might not have access to.
  633. */
  634. rootElementSelector: string;
  635. /**
  636. * Node or selector that will be used to determine the element to which the draggable's
  637. * position will be constrained. If a string is passed in, it'll be used as a selector that
  638. * will be matched starting from the element's parent and going up the DOM until a match
  639. * has been found.
  640. */
  641. boundaryElement: string | ElementRef<HTMLElement> | HTMLElement;
  642. /**
  643. * Amount of milliseconds to wait after the user has put their
  644. * pointer down before starting to drag the element.
  645. */
  646. dragStartDelay: DragStartDelay;
  647. /**
  648. * Sets the position of a `CdkDrag` that is outside of a drop container.
  649. * Can be used to restore the element's position for a returning user.
  650. */
  651. freeDragPosition: Point;
  652. /** Whether starting to drag this element is disabled. */
  653. get disabled(): boolean;
  654. set disabled(value: boolean);
  655. private _disabled;
  656. /**
  657. * Function that can be used to customize the logic of how the position of the drag item
  658. * is limited while it's being dragged. Gets called with a point containing the current position
  659. * of the user's pointer on the page, a reference to the item being dragged and its dimensions.
  660. * Should return a point describing where the item should be rendered.
  661. */
  662. constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point;
  663. /** Class to be added to the preview element. */
  664. previewClass: string | string[];
  665. /**
  666. * Configures the place into which the preview of the item will be inserted. Can be configured
  667. * globally through `CDK_DROP_LIST`. Possible values:
  668. * - `global` - Preview will be inserted at the bottom of the `<body>`. The advantage is that
  669. * you don't have to worry about `overflow: hidden` or `z-index`, but the item won't retain
  670. * its inherited styles.
  671. * - `parent` - Preview will be inserted into the parent of the drag item. The advantage is that
  672. * inherited styles will be preserved, but it may be clipped by `overflow: hidden` or not be
  673. * visible due to `z-index`. Furthermore, the preview is going to have an effect over selectors
  674. * like `:nth-child` and some flexbox configurations.
  675. * - `ElementRef<HTMLElement> | HTMLElement` - Preview will be inserted into a specific element.
  676. * Same advantages and disadvantages as `parent`.
  677. */
  678. previewContainer: PreviewContainer;
  679. /**
  680. * If the parent of the dragged element has a `scale` transform, it can throw off the
  681. * positioning when the user starts dragging. Use this input to notify the CDK of the scale.
  682. */
  683. scale: number;
  684. /** Emits when the user starts dragging the item. */
  685. readonly started: EventEmitter<CdkDragStart>;
  686. /** Emits when the user has released a drag item, before any animations have started. */
  687. readonly released: EventEmitter<CdkDragRelease>;
  688. /** Emits when the user stops dragging an item in the container. */
  689. readonly ended: EventEmitter<CdkDragEnd>;
  690. /** Emits when the user has moved the item into a new container. */
  691. readonly entered: EventEmitter<CdkDragEnter<any>>;
  692. /** Emits when the user removes the item its container by dragging it into another container. */
  693. readonly exited: EventEmitter<CdkDragExit<any>>;
  694. /** Emits when the user drops the item inside a container. */
  695. readonly dropped: EventEmitter<CdkDragDrop<any>>;
  696. /**
  697. * Emits as the user is dragging the item. Use with caution,
  698. * because this event will fire for every pixel that the user has dragged.
  699. */
  700. readonly moved: Observable<CdkDragMove<T>>;
  701. private _injector;
  702. constructor(...args: unknown[]);
  703. /**
  704. * Returns the element that is being used as a placeholder
  705. * while the current element is being dragged.
  706. */
  707. getPlaceholderElement(): HTMLElement;
  708. /** Returns the root draggable element. */
  709. getRootElement(): HTMLElement;
  710. /** Resets a standalone drag item to its initial position. */
  711. reset(): void;
  712. /**
  713. * Gets the pixel coordinates of the draggable outside of a drop container.
  714. */
  715. getFreeDragPosition(): Readonly<Point>;
  716. /**
  717. * Sets the current position in pixels the draggable outside of a drop container.
  718. * @param value New position to be set.
  719. */
  720. setFreeDragPosition(value: Point): void;
  721. ngAfterViewInit(): void;
  722. ngOnChanges(changes: SimpleChanges): void;
  723. ngOnDestroy(): void;
  724. _addHandle(handle: CdkDragHandle): void;
  725. _removeHandle(handle: CdkDragHandle): void;
  726. _setPreviewTemplate(preview: CdkDragPreview): void;
  727. _resetPreviewTemplate(preview: CdkDragPreview): void;
  728. _setPlaceholderTemplate(placeholder: CdkDragPlaceholder): void;
  729. _resetPlaceholderTemplate(placeholder: CdkDragPlaceholder): void;
  730. /** Syncs the root element with the `DragRef`. */
  731. private _updateRootElement;
  732. /** Gets the boundary element, based on the `boundaryElement` value. */
  733. private _getBoundaryElement;
  734. /** Syncs the inputs of the CdkDrag with the options of the underlying DragRef. */
  735. private _syncInputs;
  736. /** Handles the events from the underlying `DragRef`. */
  737. private _handleEvents;
  738. /** Assigns the default input values based on a provided config object. */
  739. private _assignDefaults;
  740. /** Sets up the listener that syncs the handles with the drag ref. */
  741. private _setupHandlesListener;
  742. static ɵfac: i0.ɵɵFactoryDeclaration<CdkDrag<any>, never>;
  743. static ɵdir: i0.ɵɵDirectiveDeclaration<CdkDrag<any>, "[cdkDrag]", ["cdkDrag"], { "data": { "alias": "cdkDragData"; "required": false; }; "lockAxis": { "alias": "cdkDragLockAxis"; "required": false; }; "rootElementSelector": { "alias": "cdkDragRootElement"; "required": false; }; "boundaryElement": { "alias": "cdkDragBoundary"; "required": false; }; "dragStartDelay": { "alias": "cdkDragStartDelay"; "required": false; }; "freeDragPosition": { "alias": "cdkDragFreeDragPosition"; "required": false; }; "disabled": { "alias": "cdkDragDisabled"; "required": false; }; "constrainPosition": { "alias": "cdkDragConstrainPosition"; "required": false; }; "previewClass": { "alias": "cdkDragPreviewClass"; "required": false; }; "previewContainer": { "alias": "cdkDragPreviewContainer"; "required": false; }; "scale": { "alias": "cdkDragScale"; "required": false; }; }, { "started": "cdkDragStarted"; "released": "cdkDragReleased"; "ended": "cdkDragEnded"; "entered": "cdkDragEntered"; "exited": "cdkDragExited"; "dropped": "cdkDragDropped"; "moved": "cdkDragMoved"; }, never, never, true, never>;
  744. static ngAcceptInputType_disabled: unknown;
  745. static ngAcceptInputType_scale: unknown;
  746. }
  747. /**
  748. * Service that keeps track of all the drag item and drop container
  749. * instances, and manages global event listeners on the `document`.
  750. * @docs-private
  751. */
  752. declare class DragDropRegistry<_ = unknown, __ = unknown> implements OnDestroy {
  753. private _ngZone;
  754. private _document;
  755. private _styleLoader;
  756. private _renderer;
  757. private _cleanupDocumentTouchmove;
  758. /** Registered drop container instances. */
  759. private _dropInstances;
  760. /** Registered drag item instances. */
  761. private _dragInstances;
  762. /** Drag item instances that are currently being dragged. */
  763. private _activeDragInstances;
  764. /** Keeps track of the event listeners that we've bound to the `document`. */
  765. private _globalListeners;
  766. /**
  767. * Predicate function to check if an item is being dragged. Moved out into a property,
  768. * because it'll be called a lot and we don't want to create a new function every time.
  769. */
  770. private _draggingPredicate;
  771. /**
  772. * Map tracking DOM nodes and their corresponding drag directives. Note that this is different
  773. * from looking through the `_dragInstances` and getting their root node, because the root node
  774. * isn't necessarily the node that the directive is set on.
  775. */
  776. private _domNodesToDirectives;
  777. /**
  778. * Emits the `touchmove` or `mousemove` events that are dispatched
  779. * while the user is dragging a drag item instance.
  780. */
  781. readonly pointerMove: Subject<TouchEvent | MouseEvent>;
  782. /**
  783. * Emits the `touchend` or `mouseup` events that are dispatched
  784. * while the user is dragging a drag item instance.
  785. */
  786. readonly pointerUp: Subject<TouchEvent | MouseEvent>;
  787. /**
  788. * Emits when the viewport has been scrolled while the user is dragging an item.
  789. * @deprecated To be turned into a private member. Use the `scrolled` method instead.
  790. * @breaking-change 13.0.0
  791. */
  792. readonly scroll: Subject<Event>;
  793. constructor(...args: unknown[]);
  794. /** Adds a drop container to the registry. */
  795. registerDropContainer(drop: DropListRef): void;
  796. /** Adds a drag item instance to the registry. */
  797. registerDragItem(drag: DragRef): void;
  798. /** Removes a drop container from the registry. */
  799. removeDropContainer(drop: DropListRef): void;
  800. /** Removes a drag item instance from the registry. */
  801. removeDragItem(drag: DragRef): void;
  802. /**
  803. * Starts the dragging sequence for a drag instance.
  804. * @param drag Drag instance which is being dragged.
  805. * @param event Event that initiated the dragging.
  806. */
  807. startDragging(drag: DragRef, event: TouchEvent | MouseEvent): void;
  808. /** Stops dragging a drag item instance. */
  809. stopDragging(drag: DragRef): void;
  810. /** Gets whether a drag item instance is currently being dragged. */
  811. isDragging(drag: DragRef): boolean;
  812. /**
  813. * Gets a stream that will emit when any element on the page is scrolled while an item is being
  814. * dragged.
  815. * @param shadowRoot Optional shadow root that the current dragging sequence started from.
  816. * Top-level listeners won't pick up events coming from the shadow DOM so this parameter can
  817. * be used to include an additional top-level listener at the shadow root level.
  818. */
  819. scrolled(shadowRoot?: DocumentOrShadowRoot | null): Observable<Event>;
  820. /**
  821. * Tracks the DOM node which has a draggable directive.
  822. * @param node Node to track.
  823. * @param dragRef Drag directive set on the node.
  824. */
  825. registerDirectiveNode(node: Node, dragRef: CdkDrag): void;
  826. /**
  827. * Stops tracking a draggable directive node.
  828. * @param node Node to stop tracking.
  829. */
  830. removeDirectiveNode(node: Node): void;
  831. /**
  832. * Gets the drag directive corresponding to a specific DOM node, if any.
  833. * @param node Node for which to do the lookup.
  834. */
  835. getDragDirectiveForNode(node: Node): CdkDrag | null;
  836. ngOnDestroy(): void;
  837. /**
  838. * Event listener that will prevent the default browser action while the user is dragging.
  839. * @param event Event whose default action should be prevented.
  840. */
  841. private _preventDefaultWhileDragging;
  842. /** Event listener for `touchmove` that is bound even if no dragging is happening. */
  843. private _persistentTouchmoveListener;
  844. /** Clears out the global event listeners from the `document`. */
  845. private _clearGlobalListeners;
  846. static ɵfac: i0.ɵɵFactoryDeclaration<DragDropRegistry<any, any>, never>;
  847. static ɵprov: i0.ɵɵInjectableDeclaration<DragDropRegistry<any, any>>;
  848. }
  849. /** Template that can be used to create a drag preview element. */
  850. interface DragPreviewTemplate<T = any> {
  851. matchSize?: boolean;
  852. template: TemplateRef<T> | null;
  853. viewContainer: ViewContainerRef;
  854. context: T;
  855. }
  856. /** Object that can be used to configure the behavior of DragRef. */
  857. interface DragRefConfig {
  858. /**
  859. * Minimum amount of pixels that the user should
  860. * drag, before the CDK initiates a drag sequence.
  861. */
  862. dragStartThreshold: number;
  863. /**
  864. * Amount the pixels the user should drag before the CDK
  865. * considers them to have changed the drag direction.
  866. */
  867. pointerDirectionChangeThreshold: number;
  868. /** `z-index` for the absolutely-positioned elements that are created by the drag item. */
  869. zIndex?: number;
  870. /** Ref that the current drag item is nested in. */
  871. parentDragRef?: DragRef;
  872. }
  873. /** Template that can be used to create a drag helper element (e.g. a preview or a placeholder). */
  874. interface DragHelperTemplate<T = any> {
  875. template: TemplateRef<T> | null;
  876. viewContainer: ViewContainerRef;
  877. context: T;
  878. }
  879. /** Point on the page or within an element. */
  880. interface Point {
  881. x: number;
  882. y: number;
  883. }
  884. /**
  885. * Possible places into which the preview of a drag item can be inserted.
  886. * - `global` - Preview will be inserted at the bottom of the `<body>`. The advantage is that
  887. * you don't have to worry about `overflow: hidden` or `z-index`, but the item won't retain
  888. * its inherited styles.
  889. * - `parent` - Preview will be inserted into the parent of the drag item. The advantage is that
  890. * inherited styles will be preserved, but it may be clipped by `overflow: hidden` or not be
  891. * visible due to `z-index`. Furthermore, the preview is going to have an effect over selectors
  892. * like `:nth-child` and some flexbox configurations.
  893. * - `ElementRef<HTMLElement> | HTMLElement` - Preview will be inserted into a specific element.
  894. * Same advantages and disadvantages as `parent`.
  895. */
  896. type PreviewContainer = 'global' | 'parent' | ElementRef<HTMLElement> | HTMLElement;
  897. /**
  898. * Reference to a draggable item. Used to manipulate or dispose of the item.
  899. */
  900. declare class DragRef<T = any> {
  901. private _config;
  902. private _document;
  903. private _ngZone;
  904. private _viewportRuler;
  905. private _dragDropRegistry;
  906. private _renderer;
  907. private _rootElementCleanups;
  908. private _cleanupShadowRootSelectStart;
  909. /** Element displayed next to the user's pointer while the element is dragged. */
  910. private _preview;
  911. /** Container into which to insert the preview. */
  912. private _previewContainer;
  913. /** Reference to the view of the placeholder element. */
  914. private _placeholderRef;
  915. /** Element that is rendered instead of the draggable item while it is being sorted. */
  916. private _placeholder;
  917. /** Coordinates within the element at which the user picked up the element. */
  918. private _pickupPositionInElement;
  919. /** Coordinates on the page at which the user picked up the element. */
  920. private _pickupPositionOnPage;
  921. /**
  922. * Anchor node used to save the place in the DOM where the element was
  923. * picked up so that it can be restored at the end of the drag sequence.
  924. */
  925. private _anchor;
  926. /**
  927. * CSS `transform` applied to the element when it isn't being dragged. We need a
  928. * passive transform in order for the dragged element to retain its new position
  929. * after the user has stopped dragging and because we need to know the relative
  930. * position in case they start dragging again. This corresponds to `element.style.transform`.
  931. */
  932. private _passiveTransform;
  933. /** CSS `transform` that is applied to the element while it's being dragged. */
  934. private _activeTransform;
  935. /** Inline `transform` value that the element had before the first dragging sequence. */
  936. private _initialTransform?;
  937. /**
  938. * Whether the dragging sequence has been started. Doesn't
  939. * necessarily mean that the element has been moved.
  940. */
  941. private _hasStartedDragging;
  942. /** Whether the element has moved since the user started dragging it. */
  943. private _hasMoved;
  944. /** Drop container in which the DragRef resided when dragging began. */
  945. private _initialContainer;
  946. /** Index at which the item started in its initial container. */
  947. private _initialIndex;
  948. /** Cached positions of scrollable parent elements. */
  949. private _parentPositions;
  950. /** Emits when the item is being moved. */
  951. private readonly _moveEvents;
  952. /** Keeps track of the direction in which the user is dragging along each axis. */
  953. private _pointerDirectionDelta;
  954. /** Pointer position at which the last change in the delta occurred. */
  955. private _pointerPositionAtLastDirectionChange;
  956. /** Position of the pointer at the last pointer event. */
  957. private _lastKnownPointerPosition;
  958. /**
  959. * Root DOM node of the drag instance. This is the element that will
  960. * be moved around as the user is dragging.
  961. */
  962. private _rootElement;
  963. /**
  964. * Nearest ancestor SVG, relative to which coordinates are calculated if dragging SVGElement
  965. */
  966. private _ownerSVGElement;
  967. /**
  968. * Inline style value of `-webkit-tap-highlight-color` at the time the
  969. * dragging was started. Used to restore the value once we're done dragging.
  970. */
  971. private _rootElementTapHighlight;
  972. /** Subscription to pointer movement events. */
  973. private _pointerMoveSubscription;
  974. /** Subscription to the event that is dispatched when the user lifts their pointer. */
  975. private _pointerUpSubscription;
  976. /** Subscription to the viewport being scrolled. */
  977. private _scrollSubscription;
  978. /** Subscription to the viewport being resized. */
  979. private _resizeSubscription;
  980. /**
  981. * Time at which the last touch event occurred. Used to avoid firing the same
  982. * events multiple times on touch devices where the browser will fire a fake
  983. * mouse event for each touch event, after a certain time.
  984. */
  985. private _lastTouchEventTime;
  986. /** Time at which the last dragging sequence was started. */
  987. private _dragStartTime;
  988. /** Cached reference to the boundary element. */
  989. private _boundaryElement;
  990. /** Whether the native dragging interactions have been enabled on the root element. */
  991. private _nativeInteractionsEnabled;
  992. /** Client rect of the root element when the dragging sequence has started. */
  993. private _initialDomRect?;
  994. /** Cached dimensions of the preview element. Should be read via `_getPreviewRect`. */
  995. private _previewRect?;
  996. /** Cached dimensions of the boundary element. */
  997. private _boundaryRect?;
  998. /** Element that will be used as a template to create the draggable item's preview. */
  999. private _previewTemplate?;
  1000. /** Template for placeholder element rendered to show where a draggable would be dropped. */
  1001. private _placeholderTemplate?;
  1002. /** Elements that can be used to drag the draggable item. */
  1003. private _handles;
  1004. /** Registered handles that are currently disabled. */
  1005. private _disabledHandles;
  1006. /** Droppable container that the draggable is a part of. */
  1007. private _dropContainer?;
  1008. /** Layout direction of the item. */
  1009. private _direction;
  1010. /** Ref that the current drag item is nested in. */
  1011. private _parentDragRef;
  1012. /**
  1013. * Cached shadow root that the element is placed in. `null` means that the element isn't in
  1014. * the shadow DOM and `undefined` means that it hasn't been resolved yet. Should be read via
  1015. * `_getShadowRoot`, not directly.
  1016. */
  1017. private _cachedShadowRoot;
  1018. /** Axis along which dragging is locked. */
  1019. lockAxis: 'x' | 'y';
  1020. /**
  1021. * Amount of milliseconds to wait after the user has put their
  1022. * pointer down before starting to drag the element.
  1023. */
  1024. dragStartDelay: number | {
  1025. touch: number;
  1026. mouse: number;
  1027. };
  1028. /** Class to be added to the preview element. */
  1029. previewClass: string | string[] | undefined;
  1030. /**
  1031. * If the parent of the dragged element has a `scale` transform, it can throw off the
  1032. * positioning when the user starts dragging. Use this input to notify the CDK of the scale.
  1033. */
  1034. scale: number;
  1035. /** Whether starting to drag this element is disabled. */
  1036. get disabled(): boolean;
  1037. set disabled(value: boolean);
  1038. private _disabled;
  1039. /** Emits as the drag sequence is being prepared. */
  1040. readonly beforeStarted: Subject<void>;
  1041. /** Emits when the user starts dragging the item. */
  1042. readonly started: Subject<{
  1043. source: DragRef;
  1044. event: MouseEvent | TouchEvent;
  1045. }>;
  1046. /** Emits when the user has released a drag item, before any animations have started. */
  1047. readonly released: Subject<{
  1048. source: DragRef;
  1049. event: MouseEvent | TouchEvent;
  1050. }>;
  1051. /** Emits when the user stops dragging an item in the container. */
  1052. readonly ended: Subject<{
  1053. source: DragRef;
  1054. distance: Point;
  1055. dropPoint: Point;
  1056. event: MouseEvent | TouchEvent;
  1057. }>;
  1058. /** Emits when the user has moved the item into a new container. */
  1059. readonly entered: Subject<{
  1060. container: DropListRef;
  1061. item: DragRef;
  1062. currentIndex: number;
  1063. }>;
  1064. /** Emits when the user removes the item its container by dragging it into another container. */
  1065. readonly exited: Subject<{
  1066. container: DropListRef;
  1067. item: DragRef;
  1068. }>;
  1069. /** Emits when the user drops the item inside a container. */
  1070. readonly dropped: Subject<{
  1071. previousIndex: number;
  1072. currentIndex: number;
  1073. item: DragRef;
  1074. container: DropListRef;
  1075. previousContainer: DropListRef;
  1076. distance: Point;
  1077. dropPoint: Point;
  1078. isPointerOverContainer: boolean;
  1079. event: MouseEvent | TouchEvent;
  1080. }>;
  1081. /**
  1082. * Emits as the user is dragging the item. Use with caution,
  1083. * because this event will fire for every pixel that the user has dragged.
  1084. */
  1085. readonly moved: Observable<{
  1086. source: DragRef;
  1087. pointerPosition: {
  1088. x: number;
  1089. y: number;
  1090. };
  1091. event: MouseEvent | TouchEvent;
  1092. distance: Point;
  1093. delta: {
  1094. x: -1 | 0 | 1;
  1095. y: -1 | 0 | 1;
  1096. };
  1097. }>;
  1098. /** Arbitrary data that can be attached to the drag item. */
  1099. data: T;
  1100. /**
  1101. * Function that can be used to customize the logic of how the position of the drag item
  1102. * is limited while it's being dragged. Gets called with a point containing the current position
  1103. * of the user's pointer on the page, a reference to the item being dragged and its dimensions.
  1104. * Should return a point describing where the item should be rendered.
  1105. */
  1106. constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point;
  1107. constructor(element: ElementRef<HTMLElement> | HTMLElement, _config: DragRefConfig, _document: Document, _ngZone: NgZone, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry, _renderer: Renderer2);
  1108. /**
  1109. * Returns the element that is being used as a placeholder
  1110. * while the current element is being dragged.
  1111. */
  1112. getPlaceholderElement(): HTMLElement;
  1113. /** Returns the root draggable element. */
  1114. getRootElement(): HTMLElement;
  1115. /**
  1116. * Gets the currently-visible element that represents the drag item.
  1117. * While dragging this is the placeholder, otherwise it's the root element.
  1118. */
  1119. getVisibleElement(): HTMLElement;
  1120. /** Registers the handles that can be used to drag the element. */
  1121. withHandles(handles: (HTMLElement | ElementRef<HTMLElement>)[]): this;
  1122. /**
  1123. * Registers the template that should be used for the drag preview.
  1124. * @param template Template that from which to stamp out the preview.
  1125. */
  1126. withPreviewTemplate(template: DragPreviewTemplate | null): this;
  1127. /**
  1128. * Registers the template that should be used for the drag placeholder.
  1129. * @param template Template that from which to stamp out the placeholder.
  1130. */
  1131. withPlaceholderTemplate(template: DragHelperTemplate | null): this;
  1132. /**
  1133. * Sets an alternate drag root element. The root element is the element that will be moved as
  1134. * the user is dragging. Passing an alternate root element is useful when trying to enable
  1135. * dragging on an element that you might not have access to.
  1136. */
  1137. withRootElement(rootElement: ElementRef<HTMLElement> | HTMLElement): this;
  1138. /**
  1139. * Element to which the draggable's position will be constrained.
  1140. */
  1141. withBoundaryElement(boundaryElement: ElementRef<HTMLElement> | HTMLElement | null): this;
  1142. /** Sets the parent ref that the ref is nested in. */
  1143. withParent(parent: DragRef<unknown> | null): this;
  1144. /** Removes the dragging functionality from the DOM element. */
  1145. dispose(): void;
  1146. /** Checks whether the element is currently being dragged. */
  1147. isDragging(): boolean;
  1148. /** Resets a standalone drag item to its initial position. */
  1149. reset(): void;
  1150. /**
  1151. * Sets a handle as disabled. While a handle is disabled, it'll capture and interrupt dragging.
  1152. * @param handle Handle element that should be disabled.
  1153. */
  1154. disableHandle(handle: HTMLElement): void;
  1155. /**
  1156. * Enables a handle, if it has been disabled.
  1157. * @param handle Handle element to be enabled.
  1158. */
  1159. enableHandle(handle: HTMLElement): void;
  1160. /** Sets the layout direction of the draggable item. */
  1161. withDirection(direction: Direction): this;
  1162. /** Sets the container that the item is part of. */
  1163. _withDropContainer(container: DropListRef): void;
  1164. /**
  1165. * Gets the current position in pixels the draggable outside of a drop container.
  1166. */
  1167. getFreeDragPosition(): Readonly<Point>;
  1168. /**
  1169. * Sets the current position in pixels the draggable outside of a drop container.
  1170. * @param value New position to be set.
  1171. */
  1172. setFreeDragPosition(value: Point): this;
  1173. /**
  1174. * Sets the container into which to insert the preview element.
  1175. * @param value Container into which to insert the preview.
  1176. */
  1177. withPreviewContainer(value: PreviewContainer): this;
  1178. /** Updates the item's sort order based on the last-known pointer position. */
  1179. _sortFromLastPointerPosition(): void;
  1180. /** Unsubscribes from the global subscriptions. */
  1181. private _removeListeners;
  1182. /** Destroys the preview element and its ViewRef. */
  1183. private _destroyPreview;
  1184. /** Destroys the placeholder element and its ViewRef. */
  1185. private _destroyPlaceholder;
  1186. /** Handler for the `mousedown`/`touchstart` events. */
  1187. private _pointerDown;
  1188. /** Handler that is invoked when the user moves their pointer after they've initiated a drag. */
  1189. private _pointerMove;
  1190. /** Handler that is invoked when the user lifts their pointer up, after initiating a drag. */
  1191. private _pointerUp;
  1192. /**
  1193. * Clears subscriptions and stops the dragging sequence.
  1194. * @param event Browser event object that ended the sequence.
  1195. */
  1196. private _endDragSequence;
  1197. /** Starts the dragging sequence. */
  1198. private _startDragSequence;
  1199. /**
  1200. * Sets up the different variables and subscriptions
  1201. * that will be necessary for the dragging sequence.
  1202. * @param referenceElement Element that started the drag sequence.
  1203. * @param event Browser event object that started the sequence.
  1204. */
  1205. private _initializeDragSequence;
  1206. /** Cleans up the DOM artifacts that were added to facilitate the element being dragged. */
  1207. private _cleanupDragArtifacts;
  1208. /**
  1209. * Updates the item's position in its drop container, or moves it
  1210. * into a new one, depending on its current drag position.
  1211. */
  1212. private _updateActiveDropContainer;
  1213. /**
  1214. * Animates the preview element from its current position to the location of the drop placeholder.
  1215. * @returns Promise that resolves when the animation completes.
  1216. */
  1217. private _animatePreviewToPlaceholder;
  1218. /** Creates an element that will be shown instead of the current element while dragging. */
  1219. private _createPlaceholderElement;
  1220. /**
  1221. * Figures out the coordinates at which an element was picked up.
  1222. * @param referenceElement Element that initiated the dragging.
  1223. * @param event Event that initiated the dragging.
  1224. */
  1225. private _getPointerPositionInElement;
  1226. /** Determines the point of the page that was touched by the user. */
  1227. private _getPointerPositionOnPage;
  1228. /** Gets the pointer position on the page, accounting for any position constraints. */
  1229. private _getConstrainedPointerPosition;
  1230. /** Updates the current drag delta, based on the user's current pointer position on the page. */
  1231. private _updatePointerDirectionDelta;
  1232. /** Toggles the native drag interactions, based on how many handles are registered. */
  1233. private _toggleNativeDragInteractions;
  1234. /** Removes the manually-added event listeners from the root element. */
  1235. private _removeRootElementListeners;
  1236. /**
  1237. * Applies a `transform` to the root element, taking into account any existing transforms on it.
  1238. * @param x New transform value along the X axis.
  1239. * @param y New transform value along the Y axis.
  1240. */
  1241. private _applyRootElementTransform;
  1242. /**
  1243. * Applies a `transform` to the preview, taking into account any existing transforms on it.
  1244. * @param x New transform value along the X axis.
  1245. * @param y New transform value along the Y axis.
  1246. */
  1247. private _applyPreviewTransform;
  1248. /**
  1249. * Gets the distance that the user has dragged during the current drag sequence.
  1250. * @param currentPosition Current position of the user's pointer.
  1251. */
  1252. private _getDragDistance;
  1253. /** Cleans up any cached element dimensions that we don't need after dragging has stopped. */
  1254. private _cleanupCachedDimensions;
  1255. /**
  1256. * Checks whether the element is still inside its boundary after the viewport has been resized.
  1257. * If not, the position is adjusted so that the element fits again.
  1258. */
  1259. private _containInsideBoundaryOnResize;
  1260. /** Gets the drag start delay, based on the event type. */
  1261. private _getDragStartDelay;
  1262. /** Updates the internal state of the draggable element when scrolling has occurred. */
  1263. private _updateOnScroll;
  1264. /** Gets the scroll position of the viewport. */
  1265. private _getViewportScrollPosition;
  1266. /**
  1267. * Lazily resolves and returns the shadow root of the element. We do this in a function, rather
  1268. * than saving it in property directly on init, because we want to resolve it as late as possible
  1269. * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
  1270. * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
  1271. */
  1272. private _getShadowRoot;
  1273. /** Gets the element into which the drag preview should be inserted. */
  1274. private _getPreviewInsertionPoint;
  1275. /** Lazily resolves and returns the dimensions of the preview. */
  1276. private _getPreviewRect;
  1277. /** Handles a native `dragstart` event. */
  1278. private _nativeDragStart;
  1279. /** Gets a handle that is the target of an event. */
  1280. private _getTargetHandle;
  1281. }
  1282. /**
  1283. * Service that allows for drag-and-drop functionality to be attached to DOM elements.
  1284. */
  1285. declare class DragDrop {
  1286. private _document;
  1287. private _ngZone;
  1288. private _viewportRuler;
  1289. private _dragDropRegistry;
  1290. private _renderer;
  1291. constructor(...args: unknown[]);
  1292. /**
  1293. * Turns an element into a draggable item.
  1294. * @param element Element to which to attach the dragging functionality.
  1295. * @param config Object used to configure the dragging behavior.
  1296. */
  1297. createDrag<T = any>(element: ElementRef<HTMLElement> | HTMLElement, config?: DragRefConfig): DragRef<T>;
  1298. /**
  1299. * Turns an element into a drop list.
  1300. * @param element Element to which to attach the drop list functionality.
  1301. */
  1302. createDropList<T = any>(element: ElementRef<HTMLElement> | HTMLElement): DropListRef<T>;
  1303. static ɵfac: i0.ɵɵFactoryDeclaration<DragDrop, never>;
  1304. static ɵprov: i0.ɵɵInjectableDeclaration<DragDrop>;
  1305. }
  1306. /**
  1307. * Injection token that can be used for a `CdkDrag` to provide itself as a parent to the
  1308. * drag-specific child directive (`CdkDragHandle`, `CdkDragPreview` etc.). Used primarily
  1309. * to avoid circular imports.
  1310. * @docs-private
  1311. */
  1312. declare const CDK_DRAG_PARENT: InjectionToken<CdkDrag<any>>;
  1313. /**
  1314. * Moves an item one index in an array to another.
  1315. * @param array Array in which to move the item.
  1316. * @param fromIndex Starting index of the item.
  1317. * @param toIndex Index to which the item should be moved.
  1318. */
  1319. declare function moveItemInArray<T = any>(array: T[], fromIndex: number, toIndex: number): void;
  1320. /**
  1321. * Moves an item from one array to another.
  1322. * @param currentArray Array from which to transfer the item.
  1323. * @param targetArray Array into which to put the item.
  1324. * @param currentIndex Index of the item in its current array.
  1325. * @param targetIndex Index at which to insert the item.
  1326. */
  1327. declare function transferArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
  1328. /**
  1329. * Copies an item from one array to another, leaving it in its
  1330. * original position in current array.
  1331. * @param currentArray Array from which to copy the item.
  1332. * @param targetArray Array into which is copy the item.
  1333. * @param currentIndex Index of the item in its current array.
  1334. * @param targetIndex Index at which to insert the item.
  1335. *
  1336. */
  1337. declare function copyArrayItem<T = any>(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void;
  1338. /**
  1339. * Injection token that can be used to reference instances of `CdkDropListGroup`. It serves as
  1340. * alternative token to the actual `CdkDropListGroup` class which could cause unnecessary
  1341. * retention of the class and its directive metadata.
  1342. */
  1343. declare const CDK_DROP_LIST_GROUP: InjectionToken<CdkDropListGroup<unknown>>;
  1344. /**
  1345. * Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList`
  1346. * elements that are placed inside a `cdkDropListGroup` will be connected to each other
  1347. * automatically. Can be used as an alternative to the `cdkDropListConnectedTo` input
  1348. * from `cdkDropList`.
  1349. */
  1350. declare class CdkDropListGroup<T> implements OnDestroy {
  1351. /** Drop lists registered inside the group. */
  1352. readonly _items: Set<T>;
  1353. /** Whether starting a dragging sequence from inside this group is disabled. */
  1354. disabled: boolean;
  1355. ngOnDestroy(): void;
  1356. static ɵfac: i0.ɵɵFactoryDeclaration<CdkDropListGroup<any>, never>;
  1357. static ɵdir: i0.ɵɵDirectiveDeclaration<CdkDropListGroup<any>, "[cdkDropListGroup]", ["cdkDropListGroup"], { "disabled": { "alias": "cdkDropListGroupDisabled"; "required": false; }; }, {}, never, never, true, never>;
  1358. static ngAcceptInputType_disabled: unknown;
  1359. }
  1360. declare class DragDropModule {
  1361. static ɵfac: i0.ɵɵFactoryDeclaration<DragDropModule, never>;
  1362. static ɵmod: i0.ɵɵNgModuleDeclaration<DragDropModule, never, [typeof CdkDropList, typeof CdkDropListGroup, typeof CdkDrag, typeof CdkDragHandle, typeof CdkDragPreview, typeof CdkDragPlaceholder], [typeof CdkScrollableModule, typeof CdkDropList, typeof CdkDropListGroup, typeof CdkDrag, typeof CdkDragHandle, typeof CdkDragPreview, typeof CdkDragPlaceholder]>;
  1363. static ɵinj: i0.ɵɵInjectorDeclaration<DragDropModule>;
  1364. }
  1365. export { CDK_DRAG_CONFIG, CDK_DRAG_HANDLE, CDK_DRAG_PARENT, CDK_DRAG_PLACEHOLDER, CDK_DRAG_PREVIEW, CDK_DROP_LIST, CDK_DROP_LIST_GROUP, CdkDrag, CdkDragHandle, CdkDragPlaceholder, CdkDragPreview, CdkDropList, CdkDropListGroup, DragDrop, DragDropModule, DragDropRegistry, DragRef, DropListRef, copyArrayItem, moveItemInArray, transferArrayItem };
  1366. export type { CdkDragDrop, CdkDragEnd, CdkDragEnter, CdkDragExit, CdkDragMove, CdkDragRelease, CdkDragSortEvent, CdkDragStart, DragAxis, DragConstrainPosition, DragDropConfig, DragRefConfig, DragStartDelay, DropListOrientation, Point, PreviewContainer };