index.d.ts 62 KB

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