source: trip-planner-front/node_modules/@angular/cdk/bundles/cdk-drag-drop.umd.js@ eed0bf8

Last change on this file since eed0bf8 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 199.6 KB
Line 
1(function (global, factory) {
2 typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/cdk/scrolling'), require('@angular/cdk/platform'), require('@angular/cdk/coercion'), require('@angular/cdk/a11y'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/bidi')) :
3 typeof define === 'function' && define.amd ? define('@angular/cdk/drag-drop', ['exports', '@angular/core', '@angular/common', '@angular/cdk/scrolling', '@angular/cdk/platform', '@angular/cdk/coercion', '@angular/cdk/a11y', 'rxjs', 'rxjs/operators', '@angular/cdk/bidi'], factory) :
4 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.ng = global.ng || {}, global.ng.cdk = global.ng.cdk || {}, global.ng.cdk.dragDrop = {}), global.ng.core, global.ng.common, global.ng.cdk.scrolling, global.ng.cdk.platform, global.ng.cdk.coercion, global.ng.cdk.a11y, global.rxjs, global.rxjs.operators, global.ng.cdk.bidi));
5}(this, (function (exports, i0, i1, i2, platform, coercion, a11y, rxjs, operators, bidi) { 'use strict';
6
7 function _interopNamespace(e) {
8 if (e && e.__esModule) return e;
9 var n = Object.create(null);
10 if (e) {
11 Object.keys(e).forEach(function (k) {
12 if (k !== 'default') {
13 var d = Object.getOwnPropertyDescriptor(e, k);
14 Object.defineProperty(n, k, d.get ? d : {
15 enumerable: true,
16 get: function () {
17 return e[k];
18 }
19 });
20 }
21 });
22 }
23 n['default'] = e;
24 return Object.freeze(n);
25 }
26
27 var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
28 var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
29 var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
30
31 /**
32 * @license
33 * Copyright Google LLC All Rights Reserved.
34 *
35 * Use of this source code is governed by an MIT-style license that can be
36 * found in the LICENSE file at https://angular.io/license
37 */
38 /**
39 * Shallow-extends a stylesheet object with another stylesheet-like object.
40 * Note that the keys in `source` have to be dash-cased.
41 * @docs-private
42 */
43 function extendStyles(dest, source, importantProperties) {
44 for (var key in source) {
45 if (source.hasOwnProperty(key)) {
46 var value = source[key];
47 if (value) {
48 dest.setProperty(key, value, (importantProperties === null || importantProperties === void 0 ? void 0 : importantProperties.has(key)) ? 'important' : '');
49 }
50 else {
51 dest.removeProperty(key);
52 }
53 }
54 }
55 return dest;
56 }
57 /**
58 * Toggles whether the native drag interactions should be enabled for an element.
59 * @param element Element on which to toggle the drag interactions.
60 * @param enable Whether the drag interactions should be enabled.
61 * @docs-private
62 */
63 function toggleNativeDragInteractions(element, enable) {
64 var userSelect = enable ? '' : 'none';
65 extendStyles(element.style, {
66 'touch-action': enable ? '' : 'none',
67 '-webkit-user-drag': enable ? '' : 'none',
68 '-webkit-tap-highlight-color': enable ? '' : 'transparent',
69 'user-select': userSelect,
70 '-ms-user-select': userSelect,
71 '-webkit-user-select': userSelect,
72 '-moz-user-select': userSelect
73 });
74 }
75 /**
76 * Toggles whether an element is visible while preserving its dimensions.
77 * @param element Element whose visibility to toggle
78 * @param enable Whether the element should be visible.
79 * @param importantProperties Properties to be set as `!important`.
80 * @docs-private
81 */
82 function toggleVisibility(element, enable, importantProperties) {
83 extendStyles(element.style, {
84 position: enable ? '' : 'fixed',
85 top: enable ? '' : '0',
86 opacity: enable ? '' : '0',
87 left: enable ? '' : '-999em'
88 }, importantProperties);
89 }
90 /**
91 * Combines a transform string with an optional other transform
92 * that exited before the base transform was applied.
93 */
94 function combineTransforms(transform, initialTransform) {
95 return initialTransform && initialTransform != 'none' ?
96 (transform + ' ' + initialTransform) :
97 transform;
98 }
99
100 /**
101 * @license
102 * Copyright Google LLC All Rights Reserved.
103 *
104 * Use of this source code is governed by an MIT-style license that can be
105 * found in the LICENSE file at https://angular.io/license
106 */
107 /** Parses a CSS time value to milliseconds. */
108 function parseCssTimeUnitsToMs(value) {
109 // Some browsers will return it in seconds, whereas others will return milliseconds.
110 var multiplier = value.toLowerCase().indexOf('ms') > -1 ? 1 : 1000;
111 return parseFloat(value) * multiplier;
112 }
113 /** Gets the transform transition duration, including the delay, of an element in milliseconds. */
114 function getTransformTransitionDurationInMs(element) {
115 var computedStyle = getComputedStyle(element);
116 var transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property');
117 var property = transitionedProperties.find(function (prop) { return prop === 'transform' || prop === 'all'; });
118 // If there's no transition for `all` or `transform`, we shouldn't do anything.
119 if (!property) {
120 return 0;
121 }
122 // Get the index of the property that we're interested in and match
123 // it up to the same index in `transition-delay` and `transition-duration`.
124 var propertyIndex = transitionedProperties.indexOf(property);
125 var rawDurations = parseCssPropertyValue(computedStyle, 'transition-duration');
126 var rawDelays = parseCssPropertyValue(computedStyle, 'transition-delay');
127 return parseCssTimeUnitsToMs(rawDurations[propertyIndex]) +
128 parseCssTimeUnitsToMs(rawDelays[propertyIndex]);
129 }
130 /** Parses out multiple values from a computed style into an array. */
131 function parseCssPropertyValue(computedStyle, name) {
132 var value = computedStyle.getPropertyValue(name);
133 return value.split(',').map(function (part) { return part.trim(); });
134 }
135
136 /**
137 * @license
138 * Copyright Google LLC All Rights Reserved.
139 *
140 * Use of this source code is governed by an MIT-style license that can be
141 * found in the LICENSE file at https://angular.io/license
142 */
143 /** Gets a mutable version of an element's bounding `ClientRect`. */
144 function getMutableClientRect(element) {
145 var clientRect = element.getBoundingClientRect();
146 // We need to clone the `clientRect` here, because all the values on it are readonly
147 // and we need to be able to update them. Also we can't use a spread here, because
148 // the values on a `ClientRect` aren't own properties. See:
149 // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
150 return {
151 top: clientRect.top,
152 right: clientRect.right,
153 bottom: clientRect.bottom,
154 left: clientRect.left,
155 width: clientRect.width,
156 height: clientRect.height
157 };
158 }
159 /**
160 * Checks whether some coordinates are within a `ClientRect`.
161 * @param clientRect ClientRect that is being checked.
162 * @param x Coordinates along the X axis.
163 * @param y Coordinates along the Y axis.
164 */
165 function isInsideClientRect(clientRect, x, y) {
166 var top = clientRect.top, bottom = clientRect.bottom, left = clientRect.left, right = clientRect.right;
167 return y >= top && y <= bottom && x >= left && x <= right;
168 }
169 /**
170 * Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
171 * @param clientRect `ClientRect` that should be updated.
172 * @param top Amount to add to the `top` position.
173 * @param left Amount to add to the `left` position.
174 */
175 function adjustClientRect(clientRect, top, left) {
176 clientRect.top += top;
177 clientRect.bottom = clientRect.top + clientRect.height;
178 clientRect.left += left;
179 clientRect.right = clientRect.left + clientRect.width;
180 }
181 /**
182 * Checks whether the pointer coordinates are close to a ClientRect.
183 * @param rect ClientRect to check against.
184 * @param threshold Threshold around the ClientRect.
185 * @param pointerX Coordinates along the X axis.
186 * @param pointerY Coordinates along the Y axis.
187 */
188 function isPointerNearClientRect(rect, threshold, pointerX, pointerY) {
189 var top = rect.top, right = rect.right, bottom = rect.bottom, left = rect.left, width = rect.width, height = rect.height;
190 var xThreshold = width * threshold;
191 var yThreshold = height * threshold;
192 return pointerY > top - yThreshold && pointerY < bottom + yThreshold &&
193 pointerX > left - xThreshold && pointerX < right + xThreshold;
194 }
195
196 /**
197 * @license
198 * Copyright Google LLC All Rights Reserved.
199 *
200 * Use of this source code is governed by an MIT-style license that can be
201 * found in the LICENSE file at https://angular.io/license
202 */
203 /** Keeps track of the scroll position and dimensions of the parents of an element. */
204 var ParentPositionTracker = /** @class */ (function () {
205 function ParentPositionTracker(_document, _viewportRuler) {
206 this._document = _document;
207 this._viewportRuler = _viewportRuler;
208 /** Cached positions of the scrollable parent elements. */
209 this.positions = new Map();
210 }
211 /** Clears the cached positions. */
212 ParentPositionTracker.prototype.clear = function () {
213 this.positions.clear();
214 };
215 /** Caches the positions. Should be called at the beginning of a drag sequence. */
216 ParentPositionTracker.prototype.cache = function (elements) {
217 var _this = this;
218 this.clear();
219 this.positions.set(this._document, {
220 scrollPosition: this._viewportRuler.getViewportScrollPosition(),
221 });
222 elements.forEach(function (element) {
223 _this.positions.set(element, {
224 scrollPosition: { top: element.scrollTop, left: element.scrollLeft },
225 clientRect: getMutableClientRect(element)
226 });
227 });
228 };
229 /** Handles scrolling while a drag is taking place. */
230 ParentPositionTracker.prototype.handleScroll = function (event) {
231 var target = platform._getEventTarget(event);
232 var cachedPosition = this.positions.get(target);
233 if (!cachedPosition) {
234 return null;
235 }
236 // Used when figuring out whether an element is inside the scroll parent. If the scrolled
237 // parent is the `document`, we use the `documentElement`, because IE doesn't support
238 // `contains` on the `document`.
239 var scrolledParentNode = target === this._document ? target.documentElement : target;
240 var scrollPosition = cachedPosition.scrollPosition;
241 var newTop;
242 var newLeft;
243 if (target === this._document) {
244 var viewportScrollPosition = this._viewportRuler.getViewportScrollPosition();
245 newTop = viewportScrollPosition.top;
246 newLeft = viewportScrollPosition.left;
247 }
248 else {
249 newTop = target.scrollTop;
250 newLeft = target.scrollLeft;
251 }
252 var topDifference = scrollPosition.top - newTop;
253 var leftDifference = scrollPosition.left - newLeft;
254 // Go through and update the cached positions of the scroll
255 // parents that are inside the element that was scrolled.
256 this.positions.forEach(function (position, node) {
257 if (position.clientRect && target !== node && scrolledParentNode.contains(node)) {
258 adjustClientRect(position.clientRect, topDifference, leftDifference);
259 }
260 });
261 scrollPosition.top = newTop;
262 scrollPosition.left = newLeft;
263 return { top: topDifference, left: leftDifference };
264 };
265 return ParentPositionTracker;
266 }());
267
268 /**
269 * @license
270 * Copyright Google LLC All Rights Reserved.
271 *
272 * Use of this source code is governed by an MIT-style license that can be
273 * found in the LICENSE file at https://angular.io/license
274 */
275 /** Creates a deep clone of an element. */
276 function deepCloneNode(node) {
277 var clone = node.cloneNode(true);
278 var descendantsWithId = clone.querySelectorAll('[id]');
279 var nodeName = node.nodeName.toLowerCase();
280 // Remove the `id` to avoid having multiple elements with the same id on the page.
281 clone.removeAttribute('id');
282 for (var i = 0; i < descendantsWithId.length; i++) {
283 descendantsWithId[i].removeAttribute('id');
284 }
285 if (nodeName === 'canvas') {
286 transferCanvasData(node, clone);
287 }
288 else if (nodeName === 'input' || nodeName === 'select' || nodeName === 'textarea') {
289 transferInputData(node, clone);
290 }
291 transferData('canvas', node, clone, transferCanvasData);
292 transferData('input, textarea, select', node, clone, transferInputData);
293 return clone;
294 }
295 /** Matches elements between an element and its clone and allows for their data to be cloned. */
296 function transferData(selector, node, clone, callback) {
297 var descendantElements = node.querySelectorAll(selector);
298 if (descendantElements.length) {
299 var cloneElements = clone.querySelectorAll(selector);
300 for (var i = 0; i < descendantElements.length; i++) {
301 callback(descendantElements[i], cloneElements[i]);
302 }
303 }
304 }
305 // Counter for unique cloned radio button names.
306 var cloneUniqueId = 0;
307 /** Transfers the data of one input element to another. */
308 function transferInputData(source, clone) {
309 // Browsers throw an error when assigning the value of a file input programmatically.
310 if (clone.type !== 'file') {
311 clone.value = source.value;
312 }
313 // Radio button `name` attributes must be unique for radio button groups
314 // otherwise original radio buttons can lose their checked state
315 // once the clone is inserted in the DOM.
316 if (clone.type === 'radio' && clone.name) {
317 clone.name = "mat-clone-" + clone.name + "-" + cloneUniqueId++;
318 }
319 }
320 /** Transfers the data of one canvas element to another. */
321 function transferCanvasData(source, clone) {
322 var context = clone.getContext('2d');
323 if (context) {
324 // In some cases `drawImage` can throw (e.g. if the canvas size is 0x0).
325 // We can't do much about it so just ignore the error.
326 try {
327 context.drawImage(source, 0, 0);
328 }
329 catch (_a) { }
330 }
331 }
332
333 /**
334 * @license
335 * Copyright Google LLC All Rights Reserved.
336 *
337 * Use of this source code is governed by an MIT-style license that can be
338 * found in the LICENSE file at https://angular.io/license
339 */
340 /** Options that can be used to bind a passive event listener. */
341 var passiveEventListenerOptions = platform.normalizePassiveListenerOptions({ passive: true });
342 /** Options that can be used to bind an active event listener. */
343 var activeEventListenerOptions = platform.normalizePassiveListenerOptions({ passive: false });
344 /**
345 * Time in milliseconds for which to ignore mouse events, after
346 * receiving a touch event. Used to avoid doing double work for
347 * touch devices where the browser fires fake mouse events, in
348 * addition to touch events.
349 */
350 var MOUSE_EVENT_IGNORE_TIME = 800;
351 /** Inline styles to be set as `!important` while dragging. */
352 var dragImportantProperties = new Set([
353 // Needs to be important, because some `mat-table` sets `position: sticky !important`. See #22781.
354 'position'
355 ]);
356 /**
357 * Reference to a draggable item. Used to manipulate or dispose of the item.
358 */
359 var DragRef = /** @class */ (function () {
360 function DragRef(element, _config, _document, _ngZone, _viewportRuler, _dragDropRegistry) {
361 var _this = this;
362 this._config = _config;
363 this._document = _document;
364 this._ngZone = _ngZone;
365 this._viewportRuler = _viewportRuler;
366 this._dragDropRegistry = _dragDropRegistry;
367 /**
368 * CSS `transform` applied to the element when it isn't being dragged. We need a
369 * passive transform in order for the dragged element to retain its new position
370 * after the user has stopped dragging and because we need to know the relative
371 * position in case they start dragging again. This corresponds to `element.style.transform`.
372 */
373 this._passiveTransform = { x: 0, y: 0 };
374 /** CSS `transform` that is applied to the element while it's being dragged. */
375 this._activeTransform = { x: 0, y: 0 };
376 /**
377 * Whether the dragging sequence has been started. Doesn't
378 * necessarily mean that the element has been moved.
379 */
380 this._hasStartedDragging = false;
381 /** Emits when the item is being moved. */
382 this._moveEvents = new rxjs.Subject();
383 /** Subscription to pointer movement events. */
384 this._pointerMoveSubscription = rxjs.Subscription.EMPTY;
385 /** Subscription to the event that is dispatched when the user lifts their pointer. */
386 this._pointerUpSubscription = rxjs.Subscription.EMPTY;
387 /** Subscription to the viewport being scrolled. */
388 this._scrollSubscription = rxjs.Subscription.EMPTY;
389 /** Subscription to the viewport being resized. */
390 this._resizeSubscription = rxjs.Subscription.EMPTY;
391 /** Cached reference to the boundary element. */
392 this._boundaryElement = null;
393 /** Whether the native dragging interactions have been enabled on the root element. */
394 this._nativeInteractionsEnabled = true;
395 /** Elements that can be used to drag the draggable item. */
396 this._handles = [];
397 /** Registered handles that are currently disabled. */
398 this._disabledHandles = new Set();
399 /** Layout direction of the item. */
400 this._direction = 'ltr';
401 /**
402 * Amount of milliseconds to wait after the user has put their
403 * pointer down before starting to drag the element.
404 */
405 this.dragStartDelay = 0;
406 this._disabled = false;
407 /** Emits as the drag sequence is being prepared. */
408 this.beforeStarted = new rxjs.Subject();
409 /** Emits when the user starts dragging the item. */
410 this.started = new rxjs.Subject();
411 /** Emits when the user has released a drag item, before any animations have started. */
412 this.released = new rxjs.Subject();
413 /** Emits when the user stops dragging an item in the container. */
414 this.ended = new rxjs.Subject();
415 /** Emits when the user has moved the item into a new container. */
416 this.entered = new rxjs.Subject();
417 /** Emits when the user removes the item its container by dragging it into another container. */
418 this.exited = new rxjs.Subject();
419 /** Emits when the user drops the item inside a container. */
420 this.dropped = new rxjs.Subject();
421 /**
422 * Emits as the user is dragging the item. Use with caution,
423 * because this event will fire for every pixel that the user has dragged.
424 */
425 this.moved = this._moveEvents;
426 /** Handler for the `mousedown`/`touchstart` events. */
427 this._pointerDown = function (event) {
428 _this.beforeStarted.next();
429 // Delegate the event based on whether it started from a handle or the element itself.
430 if (_this._handles.length) {
431 var targetHandle = _this._handles.find(function (handle) {
432 var target = platform._getEventTarget(event);
433 return !!target && (target === handle || handle.contains(target));
434 });
435 if (targetHandle && !_this._disabledHandles.has(targetHandle) && !_this.disabled) {
436 _this._initializeDragSequence(targetHandle, event);
437 }
438 }
439 else if (!_this.disabled) {
440 _this._initializeDragSequence(_this._rootElement, event);
441 }
442 };
443 /** Handler that is invoked when the user moves their pointer after they've initiated a drag. */
444 this._pointerMove = function (event) {
445 var pointerPosition = _this._getPointerPositionOnPage(event);
446 if (!_this._hasStartedDragging) {
447 var distanceX = Math.abs(pointerPosition.x - _this._pickupPositionOnPage.x);
448 var distanceY = Math.abs(pointerPosition.y - _this._pickupPositionOnPage.y);
449 var isOverThreshold = distanceX + distanceY >= _this._config.dragStartThreshold;
450 // Only start dragging after the user has moved more than the minimum distance in either
451 // direction. Note that this is preferrable over doing something like `skip(minimumDistance)`
452 // in the `pointerMove` subscription, because we're not guaranteed to have one move event
453 // per pixel of movement (e.g. if the user moves their pointer quickly).
454 if (isOverThreshold) {
455 var isDelayElapsed = Date.now() >= _this._dragStartTime + _this._getDragStartDelay(event);
456 var container = _this._dropContainer;
457 if (!isDelayElapsed) {
458 _this._endDragSequence(event);
459 return;
460 }
461 // Prevent other drag sequences from starting while something in the container is still
462 // being dragged. This can happen while we're waiting for the drop animation to finish
463 // and can cause errors, because some elements might still be moving around.
464 if (!container || (!container.isDragging() && !container.isReceiving())) {
465 // Prevent the default action as soon as the dragging sequence is considered as
466 // "started" since waiting for the next event can allow the device to begin scrolling.
467 event.preventDefault();
468 _this._hasStartedDragging = true;
469 _this._ngZone.run(function () { return _this._startDragSequence(event); });
470 }
471 }
472 return;
473 }
474 // We only need the preview dimensions if we have a boundary element.
475 if (_this._boundaryElement) {
476 // Cache the preview element rect if we haven't cached it already or if
477 // we cached it too early before the element dimensions were computed.
478 if (!_this._previewRect || (!_this._previewRect.width && !_this._previewRect.height)) {
479 _this._previewRect = (_this._preview || _this._rootElement).getBoundingClientRect();
480 }
481 }
482 // We prevent the default action down here so that we know that dragging has started. This is
483 // important for touch devices where doing this too early can unnecessarily block scrolling,
484 // if there's a dragging delay.
485 event.preventDefault();
486 var constrainedPointerPosition = _this._getConstrainedPointerPosition(pointerPosition);
487 _this._hasMoved = true;
488 _this._lastKnownPointerPosition = pointerPosition;
489 _this._updatePointerDirectionDelta(constrainedPointerPosition);
490 if (_this._dropContainer) {
491 _this._updateActiveDropContainer(constrainedPointerPosition, pointerPosition);
492 }
493 else {
494 var activeTransform = _this._activeTransform;
495 activeTransform.x =
496 constrainedPointerPosition.x - _this._pickupPositionOnPage.x + _this._passiveTransform.x;
497 activeTransform.y =
498 constrainedPointerPosition.y - _this._pickupPositionOnPage.y + _this._passiveTransform.y;
499 _this._applyRootElementTransform(activeTransform.x, activeTransform.y);
500 // Apply transform as attribute if dragging and svg element to work for IE
501 if (typeof SVGElement !== 'undefined' && _this._rootElement instanceof SVGElement) {
502 var appliedTransform = "translate(" + activeTransform.x + " " + activeTransform.y + ")";
503 _this._rootElement.setAttribute('transform', appliedTransform);
504 }
505 }
506 // Since this event gets fired for every pixel while dragging, we only
507 // want to fire it if the consumer opted into it. Also we have to
508 // re-enter the zone because we run all of the events on the outside.
509 if (_this._moveEvents.observers.length) {
510 _this._ngZone.run(function () {
511 _this._moveEvents.next({
512 source: _this,
513 pointerPosition: constrainedPointerPosition,
514 event: event,
515 distance: _this._getDragDistance(constrainedPointerPosition),
516 delta: _this._pointerDirectionDelta
517 });
518 });
519 }
520 };
521 /** Handler that is invoked when the user lifts their pointer up, after initiating a drag. */
522 this._pointerUp = function (event) {
523 _this._endDragSequence(event);
524 };
525 this.withRootElement(element).withParent(_config.parentDragRef || null);
526 this._parentPositions = new ParentPositionTracker(_document, _viewportRuler);
527 _dragDropRegistry.registerDragItem(this);
528 }
529 Object.defineProperty(DragRef.prototype, "disabled", {
530 /** Whether starting to drag this element is disabled. */
531 get: function () {
532 return this._disabled || !!(this._dropContainer && this._dropContainer.disabled);
533 },
534 set: function (value) {
535 var newValue = coercion.coerceBooleanProperty(value);
536 if (newValue !== this._disabled) {
537 this._disabled = newValue;
538 this._toggleNativeDragInteractions();
539 this._handles.forEach(function (handle) { return toggleNativeDragInteractions(handle, newValue); });
540 }
541 },
542 enumerable: false,
543 configurable: true
544 });
545 /**
546 * Returns the element that is being used as a placeholder
547 * while the current element is being dragged.
548 */
549 DragRef.prototype.getPlaceholderElement = function () {
550 return this._placeholder;
551 };
552 /** Returns the root draggable element. */
553 DragRef.prototype.getRootElement = function () {
554 return this._rootElement;
555 };
556 /**
557 * Gets the currently-visible element that represents the drag item.
558 * While dragging this is the placeholder, otherwise it's the root element.
559 */
560 DragRef.prototype.getVisibleElement = function () {
561 return this.isDragging() ? this.getPlaceholderElement() : this.getRootElement();
562 };
563 /** Registers the handles that can be used to drag the element. */
564 DragRef.prototype.withHandles = function (handles) {
565 var _this = this;
566 this._handles = handles.map(function (handle) { return coercion.coerceElement(handle); });
567 this._handles.forEach(function (handle) { return toggleNativeDragInteractions(handle, _this.disabled); });
568 this._toggleNativeDragInteractions();
569 // Delete any lingering disabled handles that may have been destroyed. Note that we re-create
570 // the set, rather than iterate over it and filter out the destroyed handles, because while
571 // the ES spec allows for sets to be modified while they're being iterated over, some polyfills
572 // use an array internally which may throw an error.
573 var disabledHandles = new Set();
574 this._disabledHandles.forEach(function (handle) {
575 if (_this._handles.indexOf(handle) > -1) {
576 disabledHandles.add(handle);
577 }
578 });
579 this._disabledHandles = disabledHandles;
580 return this;
581 };
582 /**
583 * Registers the template that should be used for the drag preview.
584 * @param template Template that from which to stamp out the preview.
585 */
586 DragRef.prototype.withPreviewTemplate = function (template) {
587 this._previewTemplate = template;
588 return this;
589 };
590 /**
591 * Registers the template that should be used for the drag placeholder.
592 * @param template Template that from which to stamp out the placeholder.
593 */
594 DragRef.prototype.withPlaceholderTemplate = function (template) {
595 this._placeholderTemplate = template;
596 return this;
597 };
598 /**
599 * Sets an alternate drag root element. The root element is the element that will be moved as
600 * the user is dragging. Passing an alternate root element is useful when trying to enable
601 * dragging on an element that you might not have access to.
602 */
603 DragRef.prototype.withRootElement = function (rootElement) {
604 var _this = this;
605 var element = coercion.coerceElement(rootElement);
606 if (element !== this._rootElement) {
607 if (this._rootElement) {
608 this._removeRootElementListeners(this._rootElement);
609 }
610 this._ngZone.runOutsideAngular(function () {
611 element.addEventListener('mousedown', _this._pointerDown, activeEventListenerOptions);
612 element.addEventListener('touchstart', _this._pointerDown, passiveEventListenerOptions);
613 });
614 this._initialTransform = undefined;
615 this._rootElement = element;
616 }
617 if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) {
618 this._ownerSVGElement = this._rootElement.ownerSVGElement;
619 }
620 return this;
621 };
622 /**
623 * Element to which the draggable's position will be constrained.
624 */
625 DragRef.prototype.withBoundaryElement = function (boundaryElement) {
626 var _this = this;
627 this._boundaryElement = boundaryElement ? coercion.coerceElement(boundaryElement) : null;
628 this._resizeSubscription.unsubscribe();
629 if (boundaryElement) {
630 this._resizeSubscription = this._viewportRuler
631 .change(10)
632 .subscribe(function () { return _this._containInsideBoundaryOnResize(); });
633 }
634 return this;
635 };
636 /** Sets the parent ref that the ref is nested in. */
637 DragRef.prototype.withParent = function (parent) {
638 this._parentDragRef = parent;
639 return this;
640 };
641 /** Removes the dragging functionality from the DOM element. */
642 DragRef.prototype.dispose = function () {
643 this._removeRootElementListeners(this._rootElement);
644 // Do this check before removing from the registry since it'll
645 // stop being considered as dragged once it is removed.
646 if (this.isDragging()) {
647 // Since we move out the element to the end of the body while it's being
648 // dragged, we have to make sure that it's removed if it gets destroyed.
649 removeNode(this._rootElement);
650 }
651 removeNode(this._anchor);
652 this._destroyPreview();
653 this._destroyPlaceholder();
654 this._dragDropRegistry.removeDragItem(this);
655 this._removeSubscriptions();
656 this.beforeStarted.complete();
657 this.started.complete();
658 this.released.complete();
659 this.ended.complete();
660 this.entered.complete();
661 this.exited.complete();
662 this.dropped.complete();
663 this._moveEvents.complete();
664 this._handles = [];
665 this._disabledHandles.clear();
666 this._dropContainer = undefined;
667 this._resizeSubscription.unsubscribe();
668 this._parentPositions.clear();
669 this._boundaryElement = this._rootElement = this._ownerSVGElement = this._placeholderTemplate =
670 this._previewTemplate = this._anchor = this._parentDragRef = null;
671 };
672 /** Checks whether the element is currently being dragged. */
673 DragRef.prototype.isDragging = function () {
674 return this._hasStartedDragging && this._dragDropRegistry.isDragging(this);
675 };
676 /** Resets a standalone drag item to its initial position. */
677 DragRef.prototype.reset = function () {
678 this._rootElement.style.transform = this._initialTransform || '';
679 this._activeTransform = { x: 0, y: 0 };
680 this._passiveTransform = { x: 0, y: 0 };
681 };
682 /**
683 * Sets a handle as disabled. While a handle is disabled, it'll capture and interrupt dragging.
684 * @param handle Handle element that should be disabled.
685 */
686 DragRef.prototype.disableHandle = function (handle) {
687 if (!this._disabledHandles.has(handle) && this._handles.indexOf(handle) > -1) {
688 this._disabledHandles.add(handle);
689 toggleNativeDragInteractions(handle, true);
690 }
691 };
692 /**
693 * Enables a handle, if it has been disabled.
694 * @param handle Handle element to be enabled.
695 */
696 DragRef.prototype.enableHandle = function (handle) {
697 if (this._disabledHandles.has(handle)) {
698 this._disabledHandles.delete(handle);
699 toggleNativeDragInteractions(handle, this.disabled);
700 }
701 };
702 /** Sets the layout direction of the draggable item. */
703 DragRef.prototype.withDirection = function (direction) {
704 this._direction = direction;
705 return this;
706 };
707 /** Sets the container that the item is part of. */
708 DragRef.prototype._withDropContainer = function (container) {
709 this._dropContainer = container;
710 };
711 /**
712 * Gets the current position in pixels the draggable outside of a drop container.
713 */
714 DragRef.prototype.getFreeDragPosition = function () {
715 var position = this.isDragging() ? this._activeTransform : this._passiveTransform;
716 return { x: position.x, y: position.y };
717 };
718 /**
719 * Sets the current position in pixels the draggable outside of a drop container.
720 * @param value New position to be set.
721 */
722 DragRef.prototype.setFreeDragPosition = function (value) {
723 this._activeTransform = { x: 0, y: 0 };
724 this._passiveTransform.x = value.x;
725 this._passiveTransform.y = value.y;
726 if (!this._dropContainer) {
727 this._applyRootElementTransform(value.x, value.y);
728 }
729 return this;
730 };
731 /**
732 * Sets the container into which to insert the preview element.
733 * @param value Container into which to insert the preview.
734 */
735 DragRef.prototype.withPreviewContainer = function (value) {
736 this._previewContainer = value;
737 return this;
738 };
739 /** Updates the item's sort order based on the last-known pointer position. */
740 DragRef.prototype._sortFromLastPointerPosition = function () {
741 var position = this._lastKnownPointerPosition;
742 if (position && this._dropContainer) {
743 this._updateActiveDropContainer(this._getConstrainedPointerPosition(position), position);
744 }
745 };
746 /** Unsubscribes from the global subscriptions. */
747 DragRef.prototype._removeSubscriptions = function () {
748 this._pointerMoveSubscription.unsubscribe();
749 this._pointerUpSubscription.unsubscribe();
750 this._scrollSubscription.unsubscribe();
751 };
752 /** Destroys the preview element and its ViewRef. */
753 DragRef.prototype._destroyPreview = function () {
754 if (this._preview) {
755 removeNode(this._preview);
756 }
757 if (this._previewRef) {
758 this._previewRef.destroy();
759 }
760 this._preview = this._previewRef = null;
761 };
762 /** Destroys the placeholder element and its ViewRef. */
763 DragRef.prototype._destroyPlaceholder = function () {
764 if (this._placeholder) {
765 removeNode(this._placeholder);
766 }
767 if (this._placeholderRef) {
768 this._placeholderRef.destroy();
769 }
770 this._placeholder = this._placeholderRef = null;
771 };
772 /**
773 * Clears subscriptions and stops the dragging sequence.
774 * @param event Browser event object that ended the sequence.
775 */
776 DragRef.prototype._endDragSequence = function (event) {
777 var _this = this;
778 // Note that here we use `isDragging` from the service, rather than from `this`.
779 // The difference is that the one from the service reflects whether a dragging sequence
780 // has been initiated, whereas the one on `this` includes whether the user has passed
781 // the minimum dragging threshold.
782 if (!this._dragDropRegistry.isDragging(this)) {
783 return;
784 }
785 this._removeSubscriptions();
786 this._dragDropRegistry.stopDragging(this);
787 this._toggleNativeDragInteractions();
788 if (this._handles) {
789 this._rootElement.style.webkitTapHighlightColor = this._rootElementTapHighlight;
790 }
791 if (!this._hasStartedDragging) {
792 return;
793 }
794 this.released.next({ source: this });
795 if (this._dropContainer) {
796 // Stop scrolling immediately, instead of waiting for the animation to finish.
797 this._dropContainer._stopScrolling();
798 this._animatePreviewToPlaceholder().then(function () {
799 _this._cleanupDragArtifacts(event);
800 _this._cleanupCachedDimensions();
801 _this._dragDropRegistry.stopDragging(_this);
802 });
803 }
804 else {
805 // Convert the active transform into a passive one. This means that next time
806 // the user starts dragging the item, its position will be calculated relatively
807 // to the new passive transform.
808 this._passiveTransform.x = this._activeTransform.x;
809 var pointerPosition_1 = this._getPointerPositionOnPage(event);
810 this._passiveTransform.y = this._activeTransform.y;
811 this._ngZone.run(function () {
812 _this.ended.next({
813 source: _this,
814 distance: _this._getDragDistance(pointerPosition_1),
815 dropPoint: pointerPosition_1
816 });
817 });
818 this._cleanupCachedDimensions();
819 this._dragDropRegistry.stopDragging(this);
820 }
821 };
822 /** Starts the dragging sequence. */
823 DragRef.prototype._startDragSequence = function (event) {
824 if (isTouchEvent(event)) {
825 this._lastTouchEventTime = Date.now();
826 }
827 this._toggleNativeDragInteractions();
828 var dropContainer = this._dropContainer;
829 if (dropContainer) {
830 var element = this._rootElement;
831 var parent = element.parentNode;
832 var placeholder = this._placeholder = this._createPlaceholderElement();
833 var anchor = this._anchor = this._anchor || this._document.createComment('');
834 // Needs to happen before the root element is moved.
835 var shadowRoot = this._getShadowRoot();
836 // Insert an anchor node so that we can restore the element's position in the DOM.
837 parent.insertBefore(anchor, element);
838 // There's no risk of transforms stacking when inside a drop container so
839 // we can keep the initial transform up to date any time dragging starts.
840 this._initialTransform = element.style.transform || '';
841 // Create the preview after the initial transform has
842 // been cached, because it can be affected by the transform.
843 this._preview = this._createPreviewElement();
844 // We move the element out at the end of the body and we make it hidden, because keeping it in
845 // place will throw off the consumer's `:last-child` selectors. We can't remove the element
846 // from the DOM completely, because iOS will stop firing all subsequent events in the chain.
847 toggleVisibility(element, false, dragImportantProperties);
848 this._document.body.appendChild(parent.replaceChild(placeholder, element));
849 this._getPreviewInsertionPoint(parent, shadowRoot).appendChild(this._preview);
850 this.started.next({ source: this }); // Emit before notifying the container.
851 dropContainer.start();
852 this._initialContainer = dropContainer;
853 this._initialIndex = dropContainer.getItemIndex(this);
854 }
855 else {
856 this.started.next({ source: this });
857 this._initialContainer = this._initialIndex = undefined;
858 }
859 // Important to run after we've called `start` on the parent container
860 // so that it has had time to resolve its scrollable parents.
861 this._parentPositions.cache(dropContainer ? dropContainer.getScrollableParents() : []);
862 };
863 /**
864 * Sets up the different variables and subscriptions
865 * that will be necessary for the dragging sequence.
866 * @param referenceElement Element that started the drag sequence.
867 * @param event Browser event object that started the sequence.
868 */
869 DragRef.prototype._initializeDragSequence = function (referenceElement, event) {
870 var _this = this;
871 // Stop propagation if the item is inside another
872 // draggable so we don't start multiple drag sequences.
873 if (this._parentDragRef) {
874 event.stopPropagation();
875 }
876 var isDragging = this.isDragging();
877 var isTouchSequence = isTouchEvent(event);
878 var isAuxiliaryMouseButton = !isTouchSequence && event.button !== 0;
879 var rootElement = this._rootElement;
880 var target = platform._getEventTarget(event);
881 var isSyntheticEvent = !isTouchSequence && this._lastTouchEventTime &&
882 this._lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now();
883 var isFakeEvent = isTouchSequence ? a11y.isFakeTouchstartFromScreenReader(event) :
884 a11y.isFakeMousedownFromScreenReader(event);
885 // If the event started from an element with the native HTML drag&drop, it'll interfere
886 // with our own dragging (e.g. `img` tags do it by default). Prevent the default action
887 // to stop it from happening. Note that preventing on `dragstart` also seems to work, but
888 // it's flaky and it fails if the user drags it away quickly. Also note that we only want
889 // to do this for `mousedown` since doing the same for `touchstart` will stop any `click`
890 // events from firing on touch devices.
891 if (target && target.draggable && event.type === 'mousedown') {
892 event.preventDefault();
893 }
894 // Abort if the user is already dragging or is using a mouse button other than the primary one.
895 if (isDragging || isAuxiliaryMouseButton || isSyntheticEvent || isFakeEvent) {
896 return;
897 }
898 // If we've got handles, we need to disable the tap highlight on the entire root element,
899 // otherwise iOS will still add it, even though all the drag interactions on the handle
900 // are disabled.
901 if (this._handles.length) {
902 this._rootElementTapHighlight = rootElement.style.webkitTapHighlightColor || '';
903 rootElement.style.webkitTapHighlightColor = 'transparent';
904 }
905 this._hasStartedDragging = this._hasMoved = false;
906 // Avoid multiple subscriptions and memory leaks when multi touch
907 // (isDragging check above isn't enough because of possible temporal and/or dimensional delays)
908 this._removeSubscriptions();
909 this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);
910 this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);
911 this._scrollSubscription = this._dragDropRegistry
912 .scrolled(this._getShadowRoot())
913 .subscribe(function (scrollEvent) { return _this._updateOnScroll(scrollEvent); });
914 if (this._boundaryElement) {
915 this._boundaryRect = getMutableClientRect(this._boundaryElement);
916 }
917 // If we have a custom preview we can't know ahead of time how large it'll be so we position
918 // it next to the cursor. The exception is when the consumer has opted into making the preview
919 // the same size as the root element, in which case we do know the size.
920 var previewTemplate = this._previewTemplate;
921 this._pickupPositionInElement = previewTemplate && previewTemplate.template &&
922 !previewTemplate.matchSize ? { x: 0, y: 0 } :
923 this._getPointerPositionInElement(referenceElement, event);
924 var pointerPosition = this._pickupPositionOnPage = this._lastKnownPointerPosition =
925 this._getPointerPositionOnPage(event);
926 this._pointerDirectionDelta = { x: 0, y: 0 };
927 this._pointerPositionAtLastDirectionChange = { x: pointerPosition.x, y: pointerPosition.y };
928 this._dragStartTime = Date.now();
929 this._dragDropRegistry.startDragging(this, event);
930 };
931 /** Cleans up the DOM artifacts that were added to facilitate the element being dragged. */
932 DragRef.prototype._cleanupDragArtifacts = function (event) {
933 var _this = this;
934 // Restore the element's visibility and insert it at its old position in the DOM.
935 // It's important that we maintain the position, because moving the element around in the DOM
936 // can throw off `NgFor` which does smart diffing and re-creates elements only when necessary,
937 // while moving the existing elements in all other cases.
938 toggleVisibility(this._rootElement, true, dragImportantProperties);
939 this._anchor.parentNode.replaceChild(this._rootElement, this._anchor);
940 this._destroyPreview();
941 this._destroyPlaceholder();
942 this._boundaryRect = this._previewRect = this._initialTransform = undefined;
943 // Re-enter the NgZone since we bound `document` events on the outside.
944 this._ngZone.run(function () {
945 var container = _this._dropContainer;
946 var currentIndex = container.getItemIndex(_this);
947 var pointerPosition = _this._getPointerPositionOnPage(event);
948 var distance = _this._getDragDistance(pointerPosition);
949 var isPointerOverContainer = container._isOverContainer(pointerPosition.x, pointerPosition.y);
950 _this.ended.next({ source: _this, distance: distance, dropPoint: pointerPosition });
951 _this.dropped.next({
952 item: _this,
953 currentIndex: currentIndex,
954 previousIndex: _this._initialIndex,
955 container: container,
956 previousContainer: _this._initialContainer,
957 isPointerOverContainer: isPointerOverContainer,
958 distance: distance,
959 dropPoint: pointerPosition
960 });
961 container.drop(_this, currentIndex, _this._initialIndex, _this._initialContainer, isPointerOverContainer, distance, pointerPosition);
962 _this._dropContainer = _this._initialContainer;
963 });
964 };
965 /**
966 * Updates the item's position in its drop container, or moves it
967 * into a new one, depending on its current drag position.
968 */
969 DragRef.prototype._updateActiveDropContainer = function (_b, _c) {
970 var _this = this;
971 var x = _b.x, y = _b.y;
972 var rawX = _c.x, rawY = _c.y;
973 // Drop container that draggable has been moved into.
974 var newContainer = this._initialContainer._getSiblingContainerFromPosition(this, x, y);
975 // If we couldn't find a new container to move the item into, and the item has left its
976 // initial container, check whether the it's over the initial container. This handles the
977 // case where two containers are connected one way and the user tries to undo dragging an
978 // item into a new container.
979 if (!newContainer && this._dropContainer !== this._initialContainer &&
980 this._initialContainer._isOverContainer(x, y)) {
981 newContainer = this._initialContainer;
982 }
983 if (newContainer && newContainer !== this._dropContainer) {
984 this._ngZone.run(function () {
985 // Notify the old container that the item has left.
986 _this.exited.next({ item: _this, container: _this._dropContainer });
987 _this._dropContainer.exit(_this);
988 // Notify the new container that the item has entered.
989 _this._dropContainer = newContainer;
990 _this._dropContainer.enter(_this, x, y, newContainer === _this._initialContainer &&
991 // If we're re-entering the initial container and sorting is disabled,
992 // put item the into its starting index to begin with.
993 newContainer.sortingDisabled ? _this._initialIndex : undefined);
994 _this.entered.next({
995 item: _this,
996 container: newContainer,
997 currentIndex: newContainer.getItemIndex(_this)
998 });
999 });
1000 }
1001 // Dragging may have been interrupted as a result of the events above.
1002 if (this.isDragging()) {
1003 this._dropContainer._startScrollingIfNecessary(rawX, rawY);
1004 this._dropContainer._sortItem(this, x, y, this._pointerDirectionDelta);
1005 this._applyPreviewTransform(x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
1006 }
1007 };
1008 /**
1009 * Creates the element that will be rendered next to the user's pointer
1010 * and will be used as a preview of the element that is being dragged.
1011 */
1012 DragRef.prototype._createPreviewElement = function () {
1013 var previewConfig = this._previewTemplate;
1014 var previewClass = this.previewClass;
1015 var previewTemplate = previewConfig ? previewConfig.template : null;
1016 var preview;
1017 if (previewTemplate && previewConfig) {
1018 // Measure the element before we've inserted the preview
1019 // since the insertion could throw off the measurement.
1020 var rootRect = previewConfig.matchSize ? this._rootElement.getBoundingClientRect() : null;
1021 var viewRef = previewConfig.viewContainer.createEmbeddedView(previewTemplate, previewConfig.context);
1022 viewRef.detectChanges();
1023 preview = getRootNode(viewRef, this._document);
1024 this._previewRef = viewRef;
1025 if (previewConfig.matchSize) {
1026 matchElementSize(preview, rootRect);
1027 }
1028 else {
1029 preview.style.transform =
1030 getTransform(this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);
1031 }
1032 }
1033 else {
1034 var element = this._rootElement;
1035 preview = deepCloneNode(element);
1036 matchElementSize(preview, element.getBoundingClientRect());
1037 if (this._initialTransform) {
1038 preview.style.transform = this._initialTransform;
1039 }
1040 }
1041 extendStyles(preview.style, {
1042 // It's important that we disable the pointer events on the preview, because
1043 // it can throw off the `document.elementFromPoint` calls in the `CdkDropList`.
1044 'pointer-events': 'none',
1045 // We have to reset the margin, because it can throw off positioning relative to the viewport.
1046 'margin': '0',
1047 'position': 'fixed',
1048 'top': '0',
1049 'left': '0',
1050 'z-index': "" + (this._config.zIndex || 1000)
1051 }, dragImportantProperties);
1052 toggleNativeDragInteractions(preview, false);
1053 preview.classList.add('cdk-drag-preview');
1054 preview.setAttribute('dir', this._direction);
1055 if (previewClass) {
1056 if (Array.isArray(previewClass)) {
1057 previewClass.forEach(function (className) { return preview.classList.add(className); });
1058 }
1059 else {
1060 preview.classList.add(previewClass);
1061 }
1062 }
1063 return preview;
1064 };
1065 /**
1066 * Animates the preview element from its current position to the location of the drop placeholder.
1067 * @returns Promise that resolves when the animation completes.
1068 */
1069 DragRef.prototype._animatePreviewToPlaceholder = function () {
1070 var _this = this;
1071 // If the user hasn't moved yet, the transitionend event won't fire.
1072 if (!this._hasMoved) {
1073 return Promise.resolve();
1074 }
1075 var placeholderRect = this._placeholder.getBoundingClientRect();
1076 // Apply the class that adds a transition to the preview.
1077 this._preview.classList.add('cdk-drag-animating');
1078 // Move the preview to the placeholder position.
1079 this._applyPreviewTransform(placeholderRect.left, placeholderRect.top);
1080 // If the element doesn't have a `transition`, the `transitionend` event won't fire. Since
1081 // we need to trigger a style recalculation in order for the `cdk-drag-animating` class to
1082 // apply its style, we take advantage of the available info to figure out whether we need to
1083 // bind the event in the first place.
1084 var duration = getTransformTransitionDurationInMs(this._preview);
1085 if (duration === 0) {
1086 return Promise.resolve();
1087 }
1088 return this._ngZone.runOutsideAngular(function () {
1089 return new Promise(function (resolve) {
1090 var handler = (function (event) {
1091 var _a;
1092 if (!event || (platform._getEventTarget(event) === _this._preview &&
1093 event.propertyName === 'transform')) {
1094 (_a = _this._preview) === null || _a === void 0 ? void 0 : _a.removeEventListener('transitionend', handler);
1095 resolve();
1096 clearTimeout(timeout);
1097 }
1098 });
1099 // If a transition is short enough, the browser might not fire the `transitionend` event.
1100 // Since we know how long it's supposed to take, add a timeout with a 50% buffer that'll
1101 // fire if the transition hasn't completed when it was supposed to.
1102 var timeout = setTimeout(handler, duration * 1.5);
1103 _this._preview.addEventListener('transitionend', handler);
1104 });
1105 });
1106 };
1107 /** Creates an element that will be shown instead of the current element while dragging. */
1108 DragRef.prototype._createPlaceholderElement = function () {
1109 var placeholderConfig = this._placeholderTemplate;
1110 var placeholderTemplate = placeholderConfig ? placeholderConfig.template : null;
1111 var placeholder;
1112 if (placeholderTemplate) {
1113 this._placeholderRef = placeholderConfig.viewContainer.createEmbeddedView(placeholderTemplate, placeholderConfig.context);
1114 this._placeholderRef.detectChanges();
1115 placeholder = getRootNode(this._placeholderRef, this._document);
1116 }
1117 else {
1118 placeholder = deepCloneNode(this._rootElement);
1119 }
1120 placeholder.classList.add('cdk-drag-placeholder');
1121 return placeholder;
1122 };
1123 /**
1124 * Figures out the coordinates at which an element was picked up.
1125 * @param referenceElement Element that initiated the dragging.
1126 * @param event Event that initiated the dragging.
1127 */
1128 DragRef.prototype._getPointerPositionInElement = function (referenceElement, event) {
1129 var elementRect = this._rootElement.getBoundingClientRect();
1130 var handleElement = referenceElement === this._rootElement ? null : referenceElement;
1131 var referenceRect = handleElement ? handleElement.getBoundingClientRect() : elementRect;
1132 var point = isTouchEvent(event) ? event.targetTouches[0] : event;
1133 var scrollPosition = this._getViewportScrollPosition();
1134 var x = point.pageX - referenceRect.left - scrollPosition.left;
1135 var y = point.pageY - referenceRect.top - scrollPosition.top;
1136 return {
1137 x: referenceRect.left - elementRect.left + x,
1138 y: referenceRect.top - elementRect.top + y
1139 };
1140 };
1141 /** Determines the point of the page that was touched by the user. */
1142 DragRef.prototype._getPointerPositionOnPage = function (event) {
1143 var scrollPosition = this._getViewportScrollPosition();
1144 var point = isTouchEvent(event) ?
1145 // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.
1146 // Also note that on real devices we're guaranteed for either `touches` or `changedTouches`
1147 // to have a value, but Firefox in device emulation mode has a bug where both can be empty
1148 // for `touchstart` and `touchend` so we fall back to a dummy object in order to avoid
1149 // throwing an error. The value returned here will be incorrect, but since this only
1150 // breaks inside a developer tool and the value is only used for secondary information,
1151 // we can get away with it. See https://bugzilla.mozilla.org/show_bug.cgi?id=1615824.
1152 (event.touches[0] || event.changedTouches[0] || { pageX: 0, pageY: 0 }) : event;
1153 var x = point.pageX - scrollPosition.left;
1154 var y = point.pageY - scrollPosition.top;
1155 // if dragging SVG element, try to convert from the screen coordinate system to the SVG
1156 // coordinate system
1157 if (this._ownerSVGElement) {
1158 var svgMatrix = this._ownerSVGElement.getScreenCTM();
1159 if (svgMatrix) {
1160 var svgPoint = this._ownerSVGElement.createSVGPoint();
1161 svgPoint.x = x;
1162 svgPoint.y = y;
1163 return svgPoint.matrixTransform(svgMatrix.inverse());
1164 }
1165 }
1166 return { x: x, y: y };
1167 };
1168 /** Gets the pointer position on the page, accounting for any position constraints. */
1169 DragRef.prototype._getConstrainedPointerPosition = function (point) {
1170 var dropContainerLock = this._dropContainer ? this._dropContainer.lockAxis : null;
1171 var _b = this.constrainPosition ? this.constrainPosition(point, this) : point, x = _b.x, y = _b.y;
1172 if (this.lockAxis === 'x' || dropContainerLock === 'x') {
1173 y = this._pickupPositionOnPage.y;
1174 }
1175 else if (this.lockAxis === 'y' || dropContainerLock === 'y') {
1176 x = this._pickupPositionOnPage.x;
1177 }
1178 if (this._boundaryRect) {
1179 var _c = this._pickupPositionInElement, pickupX = _c.x, pickupY = _c.y;
1180 var boundaryRect = this._boundaryRect;
1181 var previewRect = this._previewRect;
1182 var minY = boundaryRect.top + pickupY;
1183 var maxY = boundaryRect.bottom - (previewRect.height - pickupY);
1184 var minX = boundaryRect.left + pickupX;
1185 var maxX = boundaryRect.right - (previewRect.width - pickupX);
1186 x = clamp$1(x, minX, maxX);
1187 y = clamp$1(y, minY, maxY);
1188 }
1189 return { x: x, y: y };
1190 };
1191 /** Updates the current drag delta, based on the user's current pointer position on the page. */
1192 DragRef.prototype._updatePointerDirectionDelta = function (pointerPositionOnPage) {
1193 var x = pointerPositionOnPage.x, y = pointerPositionOnPage.y;
1194 var delta = this._pointerDirectionDelta;
1195 var positionSinceLastChange = this._pointerPositionAtLastDirectionChange;
1196 // Amount of pixels the user has dragged since the last time the direction changed.
1197 var changeX = Math.abs(x - positionSinceLastChange.x);
1198 var changeY = Math.abs(y - positionSinceLastChange.y);
1199 // Because we handle pointer events on a per-pixel basis, we don't want the delta
1200 // to change for every pixel, otherwise anything that depends on it can look erratic.
1201 // To make the delta more consistent, we track how much the user has moved since the last
1202 // delta change and we only update it after it has reached a certain threshold.
1203 if (changeX > this._config.pointerDirectionChangeThreshold) {
1204 delta.x = x > positionSinceLastChange.x ? 1 : -1;
1205 positionSinceLastChange.x = x;
1206 }
1207 if (changeY > this._config.pointerDirectionChangeThreshold) {
1208 delta.y = y > positionSinceLastChange.y ? 1 : -1;
1209 positionSinceLastChange.y = y;
1210 }
1211 return delta;
1212 };
1213 /** Toggles the native drag interactions, based on how many handles are registered. */
1214 DragRef.prototype._toggleNativeDragInteractions = function () {
1215 if (!this._rootElement || !this._handles) {
1216 return;
1217 }
1218 var shouldEnable = this._handles.length > 0 || !this.isDragging();
1219 if (shouldEnable !== this._nativeInteractionsEnabled) {
1220 this._nativeInteractionsEnabled = shouldEnable;
1221 toggleNativeDragInteractions(this._rootElement, shouldEnable);
1222 }
1223 };
1224 /** Removes the manually-added event listeners from the root element. */
1225 DragRef.prototype._removeRootElementListeners = function (element) {
1226 element.removeEventListener('mousedown', this._pointerDown, activeEventListenerOptions);
1227 element.removeEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
1228 };
1229 /**
1230 * Applies a `transform` to the root element, taking into account any existing transforms on it.
1231 * @param x New transform value along the X axis.
1232 * @param y New transform value along the Y axis.
1233 */
1234 DragRef.prototype._applyRootElementTransform = function (x, y) {
1235 var transform = getTransform(x, y);
1236 // Cache the previous transform amount only after the first drag sequence, because
1237 // we don't want our own transforms to stack on top of each other.
1238 // Should be excluded none because none + translate3d(x, y, x) is invalid css
1239 if (this._initialTransform == null) {
1240 this._initialTransform = this._rootElement.style.transform
1241 && this._rootElement.style.transform != 'none'
1242 ? this._rootElement.style.transform
1243 : '';
1244 }
1245 // Preserve the previous `transform` value, if there was one. Note that we apply our own
1246 // transform before the user's, because things like rotation can affect which direction
1247 // the element will be translated towards.
1248 this._rootElement.style.transform = combineTransforms(transform, this._initialTransform);
1249 };
1250 /**
1251 * Applies a `transform` to the preview, taking into account any existing transforms on it.
1252 * @param x New transform value along the X axis.
1253 * @param y New transform value along the Y axis.
1254 */
1255 DragRef.prototype._applyPreviewTransform = function (x, y) {
1256 var _a;
1257 // Only apply the initial transform if the preview is a clone of the original element, otherwise
1258 // it could be completely different and the transform might not make sense anymore.
1259 var initialTransform = ((_a = this._previewTemplate) === null || _a === void 0 ? void 0 : _a.template) ? undefined : this._initialTransform;
1260 var transform = getTransform(x, y);
1261 this._preview.style.transform = combineTransforms(transform, initialTransform);
1262 };
1263 /**
1264 * Gets the distance that the user has dragged during the current drag sequence.
1265 * @param currentPosition Current position of the user's pointer.
1266 */
1267 DragRef.prototype._getDragDistance = function (currentPosition) {
1268 var pickupPosition = this._pickupPositionOnPage;
1269 if (pickupPosition) {
1270 return { x: currentPosition.x - pickupPosition.x, y: currentPosition.y - pickupPosition.y };
1271 }
1272 return { x: 0, y: 0 };
1273 };
1274 /** Cleans up any cached element dimensions that we don't need after dragging has stopped. */
1275 DragRef.prototype._cleanupCachedDimensions = function () {
1276 this._boundaryRect = this._previewRect = undefined;
1277 this._parentPositions.clear();
1278 };
1279 /**
1280 * Checks whether the element is still inside its boundary after the viewport has been resized.
1281 * If not, the position is adjusted so that the element fits again.
1282 */
1283 DragRef.prototype._containInsideBoundaryOnResize = function () {
1284 var _b = this._passiveTransform, x = _b.x, y = _b.y;
1285 if ((x === 0 && y === 0) || this.isDragging() || !this._boundaryElement) {
1286 return;
1287 }
1288 var boundaryRect = this._boundaryElement.getBoundingClientRect();
1289 var elementRect = this._rootElement.getBoundingClientRect();
1290 // It's possible that the element got hidden away after dragging (e.g. by switching to a
1291 // different tab). Don't do anything in this case so we don't clear the user's position.
1292 if ((boundaryRect.width === 0 && boundaryRect.height === 0) ||
1293 (elementRect.width === 0 && elementRect.height === 0)) {
1294 return;
1295 }
1296 var leftOverflow = boundaryRect.left - elementRect.left;
1297 var rightOverflow = elementRect.right - boundaryRect.right;
1298 var topOverflow = boundaryRect.top - elementRect.top;
1299 var bottomOverflow = elementRect.bottom - boundaryRect.bottom;
1300 // If the element has become wider than the boundary, we can't
1301 // do much to make it fit so we just anchor it to the left.
1302 if (boundaryRect.width > elementRect.width) {
1303 if (leftOverflow > 0) {
1304 x += leftOverflow;
1305 }
1306 if (rightOverflow > 0) {
1307 x -= rightOverflow;
1308 }
1309 }
1310 else {
1311 x = 0;
1312 }
1313 // If the element has become taller than the boundary, we can't
1314 // do much to make it fit so we just anchor it to the top.
1315 if (boundaryRect.height > elementRect.height) {
1316 if (topOverflow > 0) {
1317 y += topOverflow;
1318 }
1319 if (bottomOverflow > 0) {
1320 y -= bottomOverflow;
1321 }
1322 }
1323 else {
1324 y = 0;
1325 }
1326 if (x !== this._passiveTransform.x || y !== this._passiveTransform.y) {
1327 this.setFreeDragPosition({ y: y, x: x });
1328 }
1329 };
1330 /** Gets the drag start delay, based on the event type. */
1331 DragRef.prototype._getDragStartDelay = function (event) {
1332 var value = this.dragStartDelay;
1333 if (typeof value === 'number') {
1334 return value;
1335 }
1336 else if (isTouchEvent(event)) {
1337 return value.touch;
1338 }
1339 return value ? value.mouse : 0;
1340 };
1341 /** Updates the internal state of the draggable element when scrolling has occurred. */
1342 DragRef.prototype._updateOnScroll = function (event) {
1343 var scrollDifference = this._parentPositions.handleScroll(event);
1344 if (scrollDifference) {
1345 var target = platform._getEventTarget(event);
1346 // ClientRect dimensions are based on the scroll position of the page and its parent node so
1347 // we have to update the cached boundary ClientRect if the user has scrolled. Check for
1348 // the `document` specifically since IE doesn't support `contains` on it.
1349 if (this._boundaryRect && (target === this._document ||
1350 (target !== this._boundaryElement && target.contains(this._boundaryElement)))) {
1351 adjustClientRect(this._boundaryRect, scrollDifference.top, scrollDifference.left);
1352 }
1353 this._pickupPositionOnPage.x += scrollDifference.left;
1354 this._pickupPositionOnPage.y += scrollDifference.top;
1355 // If we're in free drag mode, we have to update the active transform, because
1356 // it isn't relative to the viewport like the preview inside a drop list.
1357 if (!this._dropContainer) {
1358 this._activeTransform.x -= scrollDifference.left;
1359 this._activeTransform.y -= scrollDifference.top;
1360 this._applyRootElementTransform(this._activeTransform.x, this._activeTransform.y);
1361 }
1362 }
1363 };
1364 /** Gets the scroll position of the viewport. */
1365 DragRef.prototype._getViewportScrollPosition = function () {
1366 var cachedPosition = this._parentPositions.positions.get(this._document);
1367 return cachedPosition ? cachedPosition.scrollPosition :
1368 this._viewportRuler.getViewportScrollPosition();
1369 };
1370 /**
1371 * Lazily resolves and returns the shadow root of the element. We do this in a function, rather
1372 * than saving it in property directly on init, because we want to resolve it as late as possible
1373 * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
1374 * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
1375 */
1376 DragRef.prototype._getShadowRoot = function () {
1377 if (this._cachedShadowRoot === undefined) {
1378 this._cachedShadowRoot = platform._getShadowRoot(this._rootElement);
1379 }
1380 return this._cachedShadowRoot;
1381 };
1382 /** Gets the element into which the drag preview should be inserted. */
1383 DragRef.prototype._getPreviewInsertionPoint = function (initialParent, shadowRoot) {
1384 var previewContainer = this._previewContainer || 'global';
1385 if (previewContainer === 'parent') {
1386 return initialParent;
1387 }
1388 if (previewContainer === 'global') {
1389 var documentRef = this._document;
1390 // We can't use the body if the user is in fullscreen mode,
1391 // because the preview will render under the fullscreen element.
1392 // TODO(crisbeto): dedupe this with the `FullscreenOverlayContainer` eventually.
1393 return shadowRoot ||
1394 documentRef.fullscreenElement ||
1395 documentRef.webkitFullscreenElement ||
1396 documentRef.mozFullScreenElement ||
1397 documentRef.msFullscreenElement ||
1398 documentRef.body;
1399 }
1400 return coercion.coerceElement(previewContainer);
1401 };
1402 return DragRef;
1403 }());
1404 /**
1405 * Gets a 3d `transform` that can be applied to an element.
1406 * @param x Desired position of the element along the X axis.
1407 * @param y Desired position of the element along the Y axis.
1408 */
1409 function getTransform(x, y) {
1410 // Round the transforms since some browsers will
1411 // blur the elements for sub-pixel transforms.
1412 return "translate3d(" + Math.round(x) + "px, " + Math.round(y) + "px, 0)";
1413 }
1414 /** Clamps a value between a minimum and a maximum. */
1415 function clamp$1(value, min, max) {
1416 return Math.max(min, Math.min(max, value));
1417 }
1418 /**
1419 * Helper to remove a node from the DOM and to do all the necessary null checks.
1420 * @param node Node to be removed.
1421 */
1422 function removeNode(node) {
1423 if (node && node.parentNode) {
1424 node.parentNode.removeChild(node);
1425 }
1426 }
1427 /** Determines whether an event is a touch event. */
1428 function isTouchEvent(event) {
1429 // This function is called for every pixel that the user has dragged so we need it to be
1430 // as fast as possible. Since we only bind mouse events and touch events, we can assume
1431 // that if the event's name starts with `t`, it's a touch event.
1432 return event.type[0] === 't';
1433 }
1434 /**
1435 * Gets the root HTML element of an embedded view.
1436 * If the root is not an HTML element it gets wrapped in one.
1437 */
1438 function getRootNode(viewRef, _document) {
1439 var rootNodes = viewRef.rootNodes;
1440 if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
1441 return rootNodes[0];
1442 }
1443 var wrapper = _document.createElement('div');
1444 rootNodes.forEach(function (node) { return wrapper.appendChild(node); });
1445 return wrapper;
1446 }
1447 /**
1448 * Matches the target element's size to the source's size.
1449 * @param target Element that needs to be resized.
1450 * @param sourceRect Dimensions of the source element.
1451 */
1452 function matchElementSize(target, sourceRect) {
1453 target.style.width = sourceRect.width + "px";
1454 target.style.height = sourceRect.height + "px";
1455 target.style.transform = getTransform(sourceRect.left, sourceRect.top);
1456 }
1457
1458 /*! *****************************************************************************
1459 Copyright (c) Microsoft Corporation.
1460
1461 Permission to use, copy, modify, and/or distribute this software for any
1462 purpose with or without fee is hereby granted.
1463
1464 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
1465 REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
1466 AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
1467 INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
1468 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
1469 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
1470 PERFORMANCE OF THIS SOFTWARE.
1471 ***************************************************************************** */
1472 /* global Reflect, Promise */
1473 var extendStatics = function (d, b) {
1474 extendStatics = Object.setPrototypeOf ||
1475 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
1476 function (d, b) { for (var p in b)
1477 if (Object.prototype.hasOwnProperty.call(b, p))
1478 d[p] = b[p]; };
1479 return extendStatics(d, b);
1480 };
1481 function __extends(d, b) {
1482 if (typeof b !== "function" && b !== null)
1483 throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
1484 extendStatics(d, b);
1485 function __() { this.constructor = d; }
1486 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
1487 }
1488 var __assign = function () {
1489 __assign = Object.assign || function __assign(t) {
1490 for (var s, i = 1, n = arguments.length; i < n; i++) {
1491 s = arguments[i];
1492 for (var p in s)
1493 if (Object.prototype.hasOwnProperty.call(s, p))
1494 t[p] = s[p];
1495 }
1496 return t;
1497 };
1498 return __assign.apply(this, arguments);
1499 };
1500 function __rest(s, e) {
1501 var t = {};
1502 for (var p in s)
1503 if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
1504 t[p] = s[p];
1505 if (s != null && typeof Object.getOwnPropertySymbols === "function")
1506 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
1507 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
1508 t[p[i]] = s[p[i]];
1509 }
1510 return t;
1511 }
1512 function __decorate(decorators, target, key, desc) {
1513 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
1514 if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
1515 r = Reflect.decorate(decorators, target, key, desc);
1516 else
1517 for (var i = decorators.length - 1; i >= 0; i--)
1518 if (d = decorators[i])
1519 r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
1520 return c > 3 && r && Object.defineProperty(target, key, r), r;
1521 }
1522 function __param(paramIndex, decorator) {
1523 return function (target, key) { decorator(target, key, paramIndex); };
1524 }
1525 function __metadata(metadataKey, metadataValue) {
1526 if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
1527 return Reflect.metadata(metadataKey, metadataValue);
1528 }
1529 function __awaiter(thisArg, _arguments, P, generator) {
1530 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
1531 return new (P || (P = Promise))(function (resolve, reject) {
1532 function fulfilled(value) { try {
1533 step(generator.next(value));
1534 }
1535 catch (e) {
1536 reject(e);
1537 } }
1538 function rejected(value) { try {
1539 step(generator["throw"](value));
1540 }
1541 catch (e) {
1542 reject(e);
1543 } }
1544 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
1545 step((generator = generator.apply(thisArg, _arguments || [])).next());
1546 });
1547 }
1548 function __generator(thisArg, body) {
1549 var _ = { label: 0, sent: function () { if (t[0] & 1)
1550 throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
1551 return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
1552 function verb(n) { return function (v) { return step([n, v]); }; }
1553 function step(op) {
1554 if (f)
1555 throw new TypeError("Generator is already executing.");
1556 while (_)
1557 try {
1558 if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
1559 return t;
1560 if (y = 0, t)
1561 op = [op[0] & 2, t.value];
1562 switch (op[0]) {
1563 case 0:
1564 case 1:
1565 t = op;
1566 break;
1567 case 4:
1568 _.label++;
1569 return { value: op[1], done: false };
1570 case 5:
1571 _.label++;
1572 y = op[1];
1573 op = [0];
1574 continue;
1575 case 7:
1576 op = _.ops.pop();
1577 _.trys.pop();
1578 continue;
1579 default:
1580 if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
1581 _ = 0;
1582 continue;
1583 }
1584 if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
1585 _.label = op[1];
1586 break;
1587 }
1588 if (op[0] === 6 && _.label < t[1]) {
1589 _.label = t[1];
1590 t = op;
1591 break;
1592 }
1593 if (t && _.label < t[2]) {
1594 _.label = t[2];
1595 _.ops.push(op);
1596 break;
1597 }
1598 if (t[2])
1599 _.ops.pop();
1600 _.trys.pop();
1601 continue;
1602 }
1603 op = body.call(thisArg, _);
1604 }
1605 catch (e) {
1606 op = [6, e];
1607 y = 0;
1608 }
1609 finally {
1610 f = t = 0;
1611 }
1612 if (op[0] & 5)
1613 throw op[1];
1614 return { value: op[0] ? op[1] : void 0, done: true };
1615 }
1616 }
1617 var __createBinding = Object.create ? (function (o, m, k, k2) {
1618 if (k2 === undefined)
1619 k2 = k;
1620 Object.defineProperty(o, k2, { enumerable: true, get: function () { return m[k]; } });
1621 }) : (function (o, m, k, k2) {
1622 if (k2 === undefined)
1623 k2 = k;
1624 o[k2] = m[k];
1625 });
1626 function __exportStar(m, o) {
1627 for (var p in m)
1628 if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p))
1629 __createBinding(o, m, p);
1630 }
1631 function __values(o) {
1632 var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
1633 if (m)
1634 return m.call(o);
1635 if (o && typeof o.length === "number")
1636 return {
1637 next: function () {
1638 if (o && i >= o.length)
1639 o = void 0;
1640 return { value: o && o[i++], done: !o };
1641 }
1642 };
1643 throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
1644 }
1645 function __read(o, n) {
1646 var m = typeof Symbol === "function" && o[Symbol.iterator];
1647 if (!m)
1648 return o;
1649 var i = m.call(o), r, ar = [], e;
1650 try {
1651 while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
1652 ar.push(r.value);
1653 }
1654 catch (error) {
1655 e = { error: error };
1656 }
1657 finally {
1658 try {
1659 if (r && !r.done && (m = i["return"]))
1660 m.call(i);
1661 }
1662 finally {
1663 if (e)
1664 throw e.error;
1665 }
1666 }
1667 return ar;
1668 }
1669 /** @deprecated */
1670 function __spread() {
1671 for (var ar = [], i = 0; i < arguments.length; i++)
1672 ar = ar.concat(__read(arguments[i]));
1673 return ar;
1674 }
1675 /** @deprecated */
1676 function __spreadArrays() {
1677 for (var s = 0, i = 0, il = arguments.length; i < il; i++)
1678 s += arguments[i].length;
1679 for (var r = Array(s), k = 0, i = 0; i < il; i++)
1680 for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
1681 r[k] = a[j];
1682 return r;
1683 }
1684 function __spreadArray(to, from, pack) {
1685 if (pack || arguments.length === 2)
1686 for (var i = 0, l = from.length, ar; i < l; i++) {
1687 if (ar || !(i in from)) {
1688 if (!ar)
1689 ar = Array.prototype.slice.call(from, 0, i);
1690 ar[i] = from[i];
1691 }
1692 }
1693 return to.concat(ar || from);
1694 }
1695 function __await(v) {
1696 return this instanceof __await ? (this.v = v, this) : new __await(v);
1697 }
1698 function __asyncGenerator(thisArg, _arguments, generator) {
1699 if (!Symbol.asyncIterator)
1700 throw new TypeError("Symbol.asyncIterator is not defined.");
1701 var g = generator.apply(thisArg, _arguments || []), i, q = [];
1702 return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
1703 function verb(n) { if (g[n])
1704 i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
1705 function resume(n, v) { try {
1706 step(g[n](v));
1707 }
1708 catch (e) {
1709 settle(q[0][3], e);
1710 } }
1711 function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
1712 function fulfill(value) { resume("next", value); }
1713 function reject(value) { resume("throw", value); }
1714 function settle(f, v) { if (f(v), q.shift(), q.length)
1715 resume(q[0][0], q[0][1]); }
1716 }
1717 function __asyncDelegator(o) {
1718 var i, p;
1719 return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
1720 function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
1721 }
1722 function __asyncValues(o) {
1723 if (!Symbol.asyncIterator)
1724 throw new TypeError("Symbol.asyncIterator is not defined.");
1725 var m = o[Symbol.asyncIterator], i;
1726 return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
1727 function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
1728 function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
1729 }
1730 function __makeTemplateObject(cooked, raw) {
1731 if (Object.defineProperty) {
1732 Object.defineProperty(cooked, "raw", { value: raw });
1733 }
1734 else {
1735 cooked.raw = raw;
1736 }
1737 return cooked;
1738 }
1739 ;
1740 var __setModuleDefault = Object.create ? (function (o, v) {
1741 Object.defineProperty(o, "default", { enumerable: true, value: v });
1742 }) : function (o, v) {
1743 o["default"] = v;
1744 };
1745 function __importStar(mod) {
1746 if (mod && mod.__esModule)
1747 return mod;
1748 var result = {};
1749 if (mod != null)
1750 for (var k in mod)
1751 if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k))
1752 __createBinding(result, mod, k);
1753 __setModuleDefault(result, mod);
1754 return result;
1755 }
1756 function __importDefault(mod) {
1757 return (mod && mod.__esModule) ? mod : { default: mod };
1758 }
1759 function __classPrivateFieldGet(receiver, state, kind, f) {
1760 if (kind === "a" && !f)
1761 throw new TypeError("Private accessor was defined without a getter");
1762 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
1763 throw new TypeError("Cannot read private member from an object whose class did not declare it");
1764 return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
1765 }
1766 function __classPrivateFieldSet(receiver, state, value, kind, f) {
1767 if (kind === "m")
1768 throw new TypeError("Private method is not writable");
1769 if (kind === "a" && !f)
1770 throw new TypeError("Private accessor was defined without a setter");
1771 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
1772 throw new TypeError("Cannot write private member to an object whose class did not declare it");
1773 return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
1774 }
1775
1776 /**
1777 * @license
1778 * Copyright Google LLC All Rights Reserved.
1779 *
1780 * Use of this source code is governed by an MIT-style license that can be
1781 * found in the LICENSE file at https://angular.io/license
1782 */
1783 /**
1784 * Moves an item one index in an array to another.
1785 * @param array Array in which to move the item.
1786 * @param fromIndex Starting index of the item.
1787 * @param toIndex Index to which the item should be moved.
1788 */
1789 function moveItemInArray(array, fromIndex, toIndex) {
1790 var from = clamp(fromIndex, array.length - 1);
1791 var to = clamp(toIndex, array.length - 1);
1792 if (from === to) {
1793 return;
1794 }
1795 var target = array[from];
1796 var delta = to < from ? -1 : 1;
1797 for (var i = from; i !== to; i += delta) {
1798 array[i] = array[i + delta];
1799 }
1800 array[to] = target;
1801 }
1802 /**
1803 * Moves an item from one array to another.
1804 * @param currentArray Array from which to transfer the item.
1805 * @param targetArray Array into which to put the item.
1806 * @param currentIndex Index of the item in its current array.
1807 * @param targetIndex Index at which to insert the item.
1808 */
1809 function transferArrayItem(currentArray, targetArray, currentIndex, targetIndex) {
1810 var from = clamp(currentIndex, currentArray.length - 1);
1811 var to = clamp(targetIndex, targetArray.length);
1812 if (currentArray.length) {
1813 targetArray.splice(to, 0, currentArray.splice(from, 1)[0]);
1814 }
1815 }
1816 /**
1817 * Copies an item from one array to another, leaving it in its
1818 * original position in current array.
1819 * @param currentArray Array from which to copy the item.
1820 * @param targetArray Array into which is copy the item.
1821 * @param currentIndex Index of the item in its current array.
1822 * @param targetIndex Index at which to insert the item.
1823 *
1824 */
1825 function copyArrayItem(currentArray, targetArray, currentIndex, targetIndex) {
1826 var to = clamp(targetIndex, targetArray.length);
1827 if (currentArray.length) {
1828 targetArray.splice(to, 0, currentArray[currentIndex]);
1829 }
1830 }
1831 /** Clamps a number between zero and a maximum. */
1832 function clamp(value, max) {
1833 return Math.max(0, Math.min(max, value));
1834 }
1835
1836 /**
1837 * Proximity, as a ratio to width/height, at which a
1838 * dragged item will affect the drop container.
1839 */
1840 var DROP_PROXIMITY_THRESHOLD = 0.05;
1841 /**
1842 * Proximity, as a ratio to width/height at which to start auto-scrolling the drop list or the
1843 * viewport. The value comes from trying it out manually until it feels right.
1844 */
1845 var SCROLL_PROXIMITY_THRESHOLD = 0.05;
1846 /**
1847 * Reference to a drop list. Used to manipulate or dispose of the container.
1848 */
1849 var DropListRef = /** @class */ (function () {
1850 function DropListRef(element, _dragDropRegistry, _document, _ngZone, _viewportRuler) {
1851 var _this = this;
1852 this._dragDropRegistry = _dragDropRegistry;
1853 this._ngZone = _ngZone;
1854 this._viewportRuler = _viewportRuler;
1855 /** Whether starting a dragging sequence from this container is disabled. */
1856 this.disabled = false;
1857 /** Whether sorting items within the list is disabled. */
1858 this.sortingDisabled = false;
1859 /**
1860 * Whether auto-scrolling the view when the user
1861 * moves their pointer close to the edges is disabled.
1862 */
1863 this.autoScrollDisabled = false;
1864 /** Number of pixels to scroll for each frame when auto-scrolling an element. */
1865 this.autoScrollStep = 2;
1866 /**
1867 * Function that is used to determine whether an item
1868 * is allowed to be moved into a drop container.
1869 */
1870 this.enterPredicate = function () { return true; };
1871 /** Functions that is used to determine whether an item can be sorted into a particular index. */
1872 this.sortPredicate = function () { return true; };
1873 /** Emits right before dragging has started. */
1874 this.beforeStarted = new rxjs.Subject();
1875 /**
1876 * Emits when the user has moved a new drag item into this container.
1877 */
1878 this.entered = new rxjs.Subject();
1879 /**
1880 * Emits when the user removes an item from the container
1881 * by dragging it into another container.
1882 */
1883 this.exited = new rxjs.Subject();
1884 /** Emits when the user drops an item inside the container. */
1885 this.dropped = new rxjs.Subject();
1886 /** Emits as the user is swapping items while actively dragging. */
1887 this.sorted = new rxjs.Subject();
1888 /** Whether an item in the list is being dragged. */
1889 this._isDragging = false;
1890 /** Cache of the dimensions of all the items inside the container. */
1891 this._itemPositions = [];
1892 /**
1893 * Keeps track of the item that was last swapped with the dragged item, as well as what direction
1894 * the pointer was moving in when the swap occured and whether the user's pointer continued to
1895 * overlap with the swapped item after the swapping occurred.
1896 */
1897 this._previousSwap = { drag: null, delta: 0, overlaps: false };
1898 /** Draggable items in the container. */
1899 this._draggables = [];
1900 /** Drop lists that are connected to the current one. */
1901 this._siblings = [];
1902 /** Direction in which the list is oriented. */
1903 this._orientation = 'vertical';
1904 /** Connected siblings that currently have a dragged item. */
1905 this._activeSiblings = new Set();
1906 /** Layout direction of the drop list. */
1907 this._direction = 'ltr';
1908 /** Subscription to the window being scrolled. */
1909 this._viewportScrollSubscription = rxjs.Subscription.EMPTY;
1910 /** Vertical direction in which the list is currently scrolling. */
1911 this._verticalScrollDirection = 0 /* NONE */;
1912 /** Horizontal direction in which the list is currently scrolling. */
1913 this._horizontalScrollDirection = 0 /* NONE */;
1914 /** Used to signal to the current auto-scroll sequence when to stop. */
1915 this._stopScrollTimers = new rxjs.Subject();
1916 /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */
1917 this._cachedShadowRoot = null;
1918 /** Starts the interval that'll auto-scroll the element. */
1919 this._startScrollInterval = function () {
1920 _this._stopScrolling();
1921 rxjs.interval(0, rxjs.animationFrameScheduler)
1922 .pipe(operators.takeUntil(_this._stopScrollTimers))
1923 .subscribe(function () {
1924 var node = _this._scrollNode;
1925 var scrollStep = _this.autoScrollStep;
1926 if (_this._verticalScrollDirection === 1 /* UP */) {
1927 incrementVerticalScroll(node, -scrollStep);
1928 }
1929 else if (_this._verticalScrollDirection === 2 /* DOWN */) {
1930 incrementVerticalScroll(node, scrollStep);
1931 }
1932 if (_this._horizontalScrollDirection === 1 /* LEFT */) {
1933 incrementHorizontalScroll(node, -scrollStep);
1934 }
1935 else if (_this._horizontalScrollDirection === 2 /* RIGHT */) {
1936 incrementHorizontalScroll(node, scrollStep);
1937 }
1938 });
1939 };
1940 this.element = coercion.coerceElement(element);
1941 this._document = _document;
1942 this.withScrollableParents([this.element]);
1943 _dragDropRegistry.registerDropContainer(this);
1944 this._parentPositions = new ParentPositionTracker(_document, _viewportRuler);
1945 }
1946 /** Removes the drop list functionality from the DOM element. */
1947 DropListRef.prototype.dispose = function () {
1948 this._stopScrolling();
1949 this._stopScrollTimers.complete();
1950 this._viewportScrollSubscription.unsubscribe();
1951 this.beforeStarted.complete();
1952 this.entered.complete();
1953 this.exited.complete();
1954 this.dropped.complete();
1955 this.sorted.complete();
1956 this._activeSiblings.clear();
1957 this._scrollNode = null;
1958 this._parentPositions.clear();
1959 this._dragDropRegistry.removeDropContainer(this);
1960 };
1961 /** Whether an item from this list is currently being dragged. */
1962 DropListRef.prototype.isDragging = function () {
1963 return this._isDragging;
1964 };
1965 /** Starts dragging an item. */
1966 DropListRef.prototype.start = function () {
1967 this._draggingStarted();
1968 this._notifyReceivingSiblings();
1969 };
1970 /**
1971 * Emits an event to indicate that the user moved an item into the container.
1972 * @param item Item that was moved into the container.
1973 * @param pointerX Position of the item along the X axis.
1974 * @param pointerY Position of the item along the Y axis.
1975 * @param index Index at which the item entered. If omitted, the container will try to figure it
1976 * out automatically.
1977 */
1978 DropListRef.prototype.enter = function (item, pointerX, pointerY, index) {
1979 this._draggingStarted();
1980 // If sorting is disabled, we want the item to return to its starting
1981 // position if the user is returning it to its initial container.
1982 var newIndex;
1983 if (index == null) {
1984 newIndex = this.sortingDisabled ? this._draggables.indexOf(item) : -1;
1985 if (newIndex === -1) {
1986 // We use the coordinates of where the item entered the drop
1987 // zone to figure out at which index it should be inserted.
1988 newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY);
1989 }
1990 }
1991 else {
1992 newIndex = index;
1993 }
1994 var activeDraggables = this._activeDraggables;
1995 var currentIndex = activeDraggables.indexOf(item);
1996 var placeholder = item.getPlaceholderElement();
1997 var newPositionReference = activeDraggables[newIndex];
1998 // If the item at the new position is the same as the item that is being dragged,
1999 // it means that we're trying to restore the item to its initial position. In this
2000 // case we should use the next item from the list as the reference.
2001 if (newPositionReference === item) {
2002 newPositionReference = activeDraggables[newIndex + 1];
2003 }
2004 // Since the item may be in the `activeDraggables` already (e.g. if the user dragged it
2005 // into another container and back again), we have to ensure that it isn't duplicated.
2006 if (currentIndex > -1) {
2007 activeDraggables.splice(currentIndex, 1);
2008 }
2009 // Don't use items that are being dragged as a reference, because
2010 // their element has been moved down to the bottom of the body.
2011 if (newPositionReference && !this._dragDropRegistry.isDragging(newPositionReference)) {
2012 var element = newPositionReference.getRootElement();
2013 element.parentElement.insertBefore(placeholder, element);
2014 activeDraggables.splice(newIndex, 0, item);
2015 }
2016 else if (this._shouldEnterAsFirstChild(pointerX, pointerY)) {
2017 var reference = activeDraggables[0].getRootElement();
2018 reference.parentNode.insertBefore(placeholder, reference);
2019 activeDraggables.unshift(item);
2020 }
2021 else {
2022 coercion.coerceElement(this.element).appendChild(placeholder);
2023 activeDraggables.push(item);
2024 }
2025 // The transform needs to be cleared so it doesn't throw off the measurements.
2026 placeholder.style.transform = '';
2027 // Note that the positions were already cached when we called `start` above,
2028 // but we need to refresh them since the amount of items has changed and also parent rects.
2029 this._cacheItemPositions();
2030 this._cacheParentPositions();
2031 // Notify siblings at the end so that the item has been inserted into the `activeDraggables`.
2032 this._notifyReceivingSiblings();
2033 this.entered.next({ item: item, container: this, currentIndex: this.getItemIndex(item) });
2034 };
2035 /**
2036 * Removes an item from the container after it was dragged into another container by the user.
2037 * @param item Item that was dragged out.
2038 */
2039 DropListRef.prototype.exit = function (item) {
2040 this._reset();
2041 this.exited.next({ item: item, container: this });
2042 };
2043 /**
2044 * Drops an item into this container.
2045 * @param item Item being dropped into the container.
2046 * @param currentIndex Index at which the item should be inserted.
2047 * @param previousIndex Index of the item when dragging started.
2048 * @param previousContainer Container from which the item got dragged in.
2049 * @param isPointerOverContainer Whether the user's pointer was over the
2050 * container when the item was dropped.
2051 * @param distance Distance the user has dragged since the start of the dragging sequence.
2052 */
2053 DropListRef.prototype.drop = function (item, currentIndex, previousIndex, previousContainer, isPointerOverContainer, distance, dropPoint) {
2054 this._reset();
2055 this.dropped.next({
2056 item: item,
2057 currentIndex: currentIndex,
2058 previousIndex: previousIndex,
2059 container: this,
2060 previousContainer: previousContainer,
2061 isPointerOverContainer: isPointerOverContainer,
2062 distance: distance,
2063 dropPoint: dropPoint
2064 });
2065 };
2066 /**
2067 * Sets the draggable items that are a part of this list.
2068 * @param items Items that are a part of this list.
2069 */
2070 DropListRef.prototype.withItems = function (items) {
2071 var _this = this;
2072 var previousItems = this._draggables;
2073 this._draggables = items;
2074 items.forEach(function (item) { return item._withDropContainer(_this); });
2075 if (this.isDragging()) {
2076 var draggedItems = previousItems.filter(function (item) { return item.isDragging(); });
2077 // If all of the items being dragged were removed
2078 // from the list, abort the current drag sequence.
2079 if (draggedItems.every(function (item) { return items.indexOf(item) === -1; })) {
2080 this._reset();
2081 }
2082 else {
2083 this._cacheItems();
2084 }
2085 }
2086 return this;
2087 };
2088 /** Sets the layout direction of the drop list. */
2089 DropListRef.prototype.withDirection = function (direction) {
2090 this._direction = direction;
2091 return this;
2092 };
2093 /**
2094 * Sets the containers that are connected to this one. When two or more containers are
2095 * connected, the user will be allowed to transfer items between them.
2096 * @param connectedTo Other containers that the current containers should be connected to.
2097 */
2098 DropListRef.prototype.connectedTo = function (connectedTo) {
2099 this._siblings = connectedTo.slice();
2100 return this;
2101 };
2102 /**
2103 * Sets the orientation of the container.
2104 * @param orientation New orientation for the container.
2105 */
2106 DropListRef.prototype.withOrientation = function (orientation) {
2107 this._orientation = orientation;
2108 return this;
2109 };
2110 /**
2111 * Sets which parent elements are can be scrolled while the user is dragging.
2112 * @param elements Elements that can be scrolled.
2113 */
2114 DropListRef.prototype.withScrollableParents = function (elements) {
2115 var element = coercion.coerceElement(this.element);
2116 // We always allow the current element to be scrollable
2117 // so we need to ensure that it's in the array.
2118 this._scrollableElements =
2119 elements.indexOf(element) === -1 ? __spreadArray([element], __read(elements)) : elements.slice();
2120 return this;
2121 };
2122 /** Gets the scrollable parents that are registered with this drop container. */
2123 DropListRef.prototype.getScrollableParents = function () {
2124 return this._scrollableElements;
2125 };
2126 /**
2127 * Figures out the index of an item in the container.
2128 * @param item Item whose index should be determined.
2129 */
2130 DropListRef.prototype.getItemIndex = function (item) {
2131 if (!this._isDragging) {
2132 return this._draggables.indexOf(item);
2133 }
2134 // Items are sorted always by top/left in the cache, however they flow differently in RTL.
2135 // The rest of the logic still stands no matter what orientation we're in, however
2136 // we need to invert the array when determining the index.
2137 var items = this._orientation === 'horizontal' && this._direction === 'rtl' ?
2138 this._itemPositions.slice().reverse() : this._itemPositions;
2139 return findIndex(items, function (currentItem) { return currentItem.drag === item; });
2140 };
2141 /**
2142 * Whether the list is able to receive the item that
2143 * is currently being dragged inside a connected drop list.
2144 */
2145 DropListRef.prototype.isReceiving = function () {
2146 return this._activeSiblings.size > 0;
2147 };
2148 /**
2149 * Sorts an item inside the container based on its position.
2150 * @param item Item to be sorted.
2151 * @param pointerX Position of the item along the X axis.
2152 * @param pointerY Position of the item along the Y axis.
2153 * @param pointerDelta Direction in which the pointer is moving along each axis.
2154 */
2155 DropListRef.prototype._sortItem = function (item, pointerX, pointerY, pointerDelta) {
2156 // Don't sort the item if sorting is disabled or it's out of range.
2157 if (this.sortingDisabled || !this._clientRect ||
2158 !isPointerNearClientRect(this._clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
2159 return;
2160 }
2161 var siblings = this._itemPositions;
2162 var newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY, pointerDelta);
2163 if (newIndex === -1 && siblings.length > 0) {
2164 return;
2165 }
2166 var isHorizontal = this._orientation === 'horizontal';
2167 var currentIndex = findIndex(siblings, function (currentItem) { return currentItem.drag === item; });
2168 var siblingAtNewPosition = siblings[newIndex];
2169 var currentPosition = siblings[currentIndex].clientRect;
2170 var newPosition = siblingAtNewPosition.clientRect;
2171 var delta = currentIndex > newIndex ? 1 : -1;
2172 // How many pixels the item's placeholder should be offset.
2173 var itemOffset = this._getItemOffsetPx(currentPosition, newPosition, delta);
2174 // How many pixels all the other items should be offset.
2175 var siblingOffset = this._getSiblingOffsetPx(currentIndex, siblings, delta);
2176 // Save the previous order of the items before moving the item to its new index.
2177 // We use this to check whether an item has been moved as a result of the sorting.
2178 var oldOrder = siblings.slice();
2179 // Shuffle the array in place.
2180 moveItemInArray(siblings, currentIndex, newIndex);
2181 this.sorted.next({
2182 previousIndex: currentIndex,
2183 currentIndex: newIndex,
2184 container: this,
2185 item: item
2186 });
2187 siblings.forEach(function (sibling, index) {
2188 // Don't do anything if the position hasn't changed.
2189 if (oldOrder[index] === sibling) {
2190 return;
2191 }
2192 var isDraggedItem = sibling.drag === item;
2193 var offset = isDraggedItem ? itemOffset : siblingOffset;
2194 var elementToOffset = isDraggedItem ? item.getPlaceholderElement() :
2195 sibling.drag.getRootElement();
2196 // Update the offset to reflect the new position.
2197 sibling.offset += offset;
2198 // Since we're moving the items with a `transform`, we need to adjust their cached
2199 // client rects to reflect their new position, as well as swap their positions in the cache.
2200 // Note that we shouldn't use `getBoundingClientRect` here to update the cache, because the
2201 // elements may be mid-animation which will give us a wrong result.
2202 if (isHorizontal) {
2203 // Round the transforms since some browsers will
2204 // blur the elements, for sub-pixel transforms.
2205 elementToOffset.style.transform = combineTransforms("translate3d(" + Math.round(sibling.offset) + "px, 0, 0)", sibling.initialTransform);
2206 adjustClientRect(sibling.clientRect, 0, offset);
2207 }
2208 else {
2209 elementToOffset.style.transform = combineTransforms("translate3d(0, " + Math.round(sibling.offset) + "px, 0)", sibling.initialTransform);
2210 adjustClientRect(sibling.clientRect, offset, 0);
2211 }
2212 });
2213 // Note that it's important that we do this after the client rects have been adjusted.
2214 this._previousSwap.overlaps = isInsideClientRect(newPosition, pointerX, pointerY);
2215 this._previousSwap.drag = siblingAtNewPosition.drag;
2216 this._previousSwap.delta = isHorizontal ? pointerDelta.x : pointerDelta.y;
2217 };
2218 /**
2219 * Checks whether the user's pointer is close to the edges of either the
2220 * viewport or the drop list and starts the auto-scroll sequence.
2221 * @param pointerX User's pointer position along the x axis.
2222 * @param pointerY User's pointer position along the y axis.
2223 */
2224 DropListRef.prototype._startScrollingIfNecessary = function (pointerX, pointerY) {
2225 var _this = this;
2226 if (this.autoScrollDisabled) {
2227 return;
2228 }
2229 var scrollNode;
2230 var verticalScrollDirection = 0 /* NONE */;
2231 var horizontalScrollDirection = 0 /* NONE */;
2232 // Check whether we should start scrolling any of the parent containers.
2233 this._parentPositions.positions.forEach(function (position, element) {
2234 var _b;
2235 // We have special handling for the `document` below. Also this would be
2236 // nicer with a for...of loop, but it requires changing a compiler flag.
2237 if (element === _this._document || !position.clientRect || scrollNode) {
2238 return;
2239 }
2240 if (isPointerNearClientRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {
2241 _b = __read(getElementScrollDirections(element, position.clientRect, pointerX, pointerY), 2), verticalScrollDirection = _b[0], horizontalScrollDirection = _b[1];
2242 if (verticalScrollDirection || horizontalScrollDirection) {
2243 scrollNode = element;
2244 }
2245 }
2246 });
2247 // Otherwise check if we can start scrolling the viewport.
2248 if (!verticalScrollDirection && !horizontalScrollDirection) {
2249 var _b = this._viewportRuler.getViewportSize(), width = _b.width, height = _b.height;
2250 var clientRect = { width: width, height: height, top: 0, right: width, bottom: height, left: 0 };
2251 verticalScrollDirection = getVerticalScrollDirection(clientRect, pointerY);
2252 horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX);
2253 scrollNode = window;
2254 }
2255 if (scrollNode && (verticalScrollDirection !== this._verticalScrollDirection ||
2256 horizontalScrollDirection !== this._horizontalScrollDirection ||
2257 scrollNode !== this._scrollNode)) {
2258 this._verticalScrollDirection = verticalScrollDirection;
2259 this._horizontalScrollDirection = horizontalScrollDirection;
2260 this._scrollNode = scrollNode;
2261 if ((verticalScrollDirection || horizontalScrollDirection) && scrollNode) {
2262 this._ngZone.runOutsideAngular(this._startScrollInterval);
2263 }
2264 else {
2265 this._stopScrolling();
2266 }
2267 }
2268 };
2269 /** Stops any currently-running auto-scroll sequences. */
2270 DropListRef.prototype._stopScrolling = function () {
2271 this._stopScrollTimers.next();
2272 };
2273 /** Starts the dragging sequence within the list. */
2274 DropListRef.prototype._draggingStarted = function () {
2275 var styles = coercion.coerceElement(this.element).style;
2276 this.beforeStarted.next();
2277 this._isDragging = true;
2278 // We need to disable scroll snapping while the user is dragging, because it breaks automatic
2279 // scrolling. The browser seems to round the value based on the snapping points which means
2280 // that we can't increment/decrement the scroll position.
2281 this._initialScrollSnap = styles.msScrollSnapType || styles.scrollSnapType || '';
2282 styles.scrollSnapType = styles.msScrollSnapType = 'none';
2283 this._cacheItems();
2284 this._viewportScrollSubscription.unsubscribe();
2285 this._listenToScrollEvents();
2286 };
2287 /** Caches the positions of the configured scrollable parents. */
2288 DropListRef.prototype._cacheParentPositions = function () {
2289 var element = coercion.coerceElement(this.element);
2290 this._parentPositions.cache(this._scrollableElements);
2291 // The list element is always in the `scrollableElements`
2292 // so we can take advantage of the cached `ClientRect`.
2293 this._clientRect = this._parentPositions.positions.get(element).clientRect;
2294 };
2295 /** Refreshes the position cache of the items and sibling containers. */
2296 DropListRef.prototype._cacheItemPositions = function () {
2297 var isHorizontal = this._orientation === 'horizontal';
2298 this._itemPositions = this._activeDraggables.map(function (drag) {
2299 var elementToMeasure = drag.getVisibleElement();
2300 return {
2301 drag: drag,
2302 offset: 0,
2303 initialTransform: elementToMeasure.style.transform || '',
2304 clientRect: getMutableClientRect(elementToMeasure),
2305 };
2306 }).sort(function (a, b) {
2307 return isHorizontal ? a.clientRect.left - b.clientRect.left :
2308 a.clientRect.top - b.clientRect.top;
2309 });
2310 };
2311 /** Resets the container to its initial state. */
2312 DropListRef.prototype._reset = function () {
2313 var _this = this;
2314 this._isDragging = false;
2315 var styles = coercion.coerceElement(this.element).style;
2316 styles.scrollSnapType = styles.msScrollSnapType = this._initialScrollSnap;
2317 // TODO(crisbeto): may have to wait for the animations to finish.
2318 this._activeDraggables.forEach(function (item) {
2319 var _a;
2320 var rootElement = item.getRootElement();
2321 if (rootElement) {
2322 var initialTransform = (_a = _this._itemPositions
2323 .find(function (current) { return current.drag === item; })) === null || _a === void 0 ? void 0 : _a.initialTransform;
2324 rootElement.style.transform = initialTransform || '';
2325 }
2326 });
2327 this._siblings.forEach(function (sibling) { return sibling._stopReceiving(_this); });
2328 this._activeDraggables = [];
2329 this._itemPositions = [];
2330 this._previousSwap.drag = null;
2331 this._previousSwap.delta = 0;
2332 this._previousSwap.overlaps = false;
2333 this._stopScrolling();
2334 this._viewportScrollSubscription.unsubscribe();
2335 this._parentPositions.clear();
2336 };
2337 /**
2338 * Gets the offset in pixels by which the items that aren't being dragged should be moved.
2339 * @param currentIndex Index of the item currently being dragged.
2340 * @param siblings All of the items in the list.
2341 * @param delta Direction in which the user is moving.
2342 */
2343 DropListRef.prototype._getSiblingOffsetPx = function (currentIndex, siblings, delta) {
2344 var isHorizontal = this._orientation === 'horizontal';
2345 var currentPosition = siblings[currentIndex].clientRect;
2346 var immediateSibling = siblings[currentIndex + delta * -1];
2347 var siblingOffset = currentPosition[isHorizontal ? 'width' : 'height'] * delta;
2348 if (immediateSibling) {
2349 var start = isHorizontal ? 'left' : 'top';
2350 var end = isHorizontal ? 'right' : 'bottom';
2351 // Get the spacing between the start of the current item and the end of the one immediately
2352 // after it in the direction in which the user is dragging, or vice versa. We add it to the
2353 // offset in order to push the element to where it will be when it's inline and is influenced
2354 // by the `margin` of its siblings.
2355 if (delta === -1) {
2356 siblingOffset -= immediateSibling.clientRect[start] - currentPosition[end];
2357 }
2358 else {
2359 siblingOffset += currentPosition[start] - immediateSibling.clientRect[end];
2360 }
2361 }
2362 return siblingOffset;
2363 };
2364 /**
2365 * Gets the offset in pixels by which the item that is being dragged should be moved.
2366 * @param currentPosition Current position of the item.
2367 * @param newPosition Position of the item where the current item should be moved.
2368 * @param delta Direction in which the user is moving.
2369 */
2370 DropListRef.prototype._getItemOffsetPx = function (currentPosition, newPosition, delta) {
2371 var isHorizontal = this._orientation === 'horizontal';
2372 var itemOffset = isHorizontal ? newPosition.left - currentPosition.left :
2373 newPosition.top - currentPosition.top;
2374 // Account for differences in the item width/height.
2375 if (delta === -1) {
2376 itemOffset += isHorizontal ? newPosition.width - currentPosition.width :
2377 newPosition.height - currentPosition.height;
2378 }
2379 return itemOffset;
2380 };
2381 /**
2382 * Checks if pointer is entering in the first position
2383 * @param pointerX Position of the user's pointer along the X axis.
2384 * @param pointerY Position of the user's pointer along the Y axis.
2385 */
2386 DropListRef.prototype._shouldEnterAsFirstChild = function (pointerX, pointerY) {
2387 if (!this._activeDraggables.length) {
2388 return false;
2389 }
2390 var itemPositions = this._itemPositions;
2391 var isHorizontal = this._orientation === 'horizontal';
2392 // `itemPositions` are sorted by position while `activeDraggables` are sorted by child index
2393 // check if container is using some sort of "reverse" ordering (eg: flex-direction: row-reverse)
2394 var reversed = itemPositions[0].drag !== this._activeDraggables[0];
2395 if (reversed) {
2396 var lastItemRect = itemPositions[itemPositions.length - 1].clientRect;
2397 return isHorizontal ? pointerX >= lastItemRect.right : pointerY >= lastItemRect.bottom;
2398 }
2399 else {
2400 var firstItemRect = itemPositions[0].clientRect;
2401 return isHorizontal ? pointerX <= firstItemRect.left : pointerY <= firstItemRect.top;
2402 }
2403 };
2404 /**
2405 * Gets the index of an item in the drop container, based on the position of the user's pointer.
2406 * @param item Item that is being sorted.
2407 * @param pointerX Position of the user's pointer along the X axis.
2408 * @param pointerY Position of the user's pointer along the Y axis.
2409 * @param delta Direction in which the user is moving their pointer.
2410 */
2411 DropListRef.prototype._getItemIndexFromPointerPosition = function (item, pointerX, pointerY, delta) {
2412 var _this = this;
2413 var isHorizontal = this._orientation === 'horizontal';
2414 var index = findIndex(this._itemPositions, function (_b, _, array) {
2415 var drag = _b.drag, clientRect = _b.clientRect;
2416 if (drag === item) {
2417 // If there's only one item left in the container, it must be
2418 // the dragged item itself so we use it as a reference.
2419 return array.length < 2;
2420 }
2421 if (delta) {
2422 var direction = isHorizontal ? delta.x : delta.y;
2423 // If the user is still hovering over the same item as last time, their cursor hasn't left
2424 // the item after we made the swap, and they didn't change the direction in which they're
2425 // dragging, we don't consider it a direction swap.
2426 if (drag === _this._previousSwap.drag && _this._previousSwap.overlaps &&
2427 direction === _this._previousSwap.delta) {
2428 return false;
2429 }
2430 }
2431 return isHorizontal ?
2432 // Round these down since most browsers report client rects with
2433 // sub-pixel precision, whereas the pointer coordinates are rounded to pixels.
2434 pointerX >= Math.floor(clientRect.left) && pointerX < Math.floor(clientRect.right) :
2435 pointerY >= Math.floor(clientRect.top) && pointerY < Math.floor(clientRect.bottom);
2436 });
2437 return (index === -1 || !this.sortPredicate(index, item, this)) ? -1 : index;
2438 };
2439 /** Caches the current items in the list and their positions. */
2440 DropListRef.prototype._cacheItems = function () {
2441 this._activeDraggables = this._draggables.slice();
2442 this._cacheItemPositions();
2443 this._cacheParentPositions();
2444 };
2445 /**
2446 * Checks whether the user's pointer is positioned over the container.
2447 * @param x Pointer position along the X axis.
2448 * @param y Pointer position along the Y axis.
2449 */
2450 DropListRef.prototype._isOverContainer = function (x, y) {
2451 return this._clientRect != null && isInsideClientRect(this._clientRect, x, y);
2452 };
2453 /**
2454 * Figures out whether an item should be moved into a sibling
2455 * drop container, based on its current position.
2456 * @param item Drag item that is being moved.
2457 * @param x Position of the item along the X axis.
2458 * @param y Position of the item along the Y axis.
2459 */
2460 DropListRef.prototype._getSiblingContainerFromPosition = function (item, x, y) {
2461 return this._siblings.find(function (sibling) { return sibling._canReceive(item, x, y); });
2462 };
2463 /**
2464 * Checks whether the drop list can receive the passed-in item.
2465 * @param item Item that is being dragged into the list.
2466 * @param x Position of the item along the X axis.
2467 * @param y Position of the item along the Y axis.
2468 */
2469 DropListRef.prototype._canReceive = function (item, x, y) {
2470 if (!this._clientRect || !isInsideClientRect(this._clientRect, x, y) ||
2471 !this.enterPredicate(item, this)) {
2472 return false;
2473 }
2474 var elementFromPoint = this._getShadowRoot().elementFromPoint(x, y);
2475 // If there's no element at the pointer position, then
2476 // the client rect is probably scrolled out of the view.
2477 if (!elementFromPoint) {
2478 return false;
2479 }
2480 var nativeElement = coercion.coerceElement(this.element);
2481 // The `ClientRect`, that we're using to find the container over which the user is
2482 // hovering, doesn't give us any information on whether the element has been scrolled
2483 // out of the view or whether it's overlapping with other containers. This means that
2484 // we could end up transferring the item into a container that's invisible or is positioned
2485 // below another one. We use the result from `elementFromPoint` to get the top-most element
2486 // at the pointer position and to find whether it's one of the intersecting drop containers.
2487 return elementFromPoint === nativeElement || nativeElement.contains(elementFromPoint);
2488 };
2489 /**
2490 * Called by one of the connected drop lists when a dragging sequence has started.
2491 * @param sibling Sibling in which dragging has started.
2492 */
2493 DropListRef.prototype._startReceiving = function (sibling, items) {
2494 var _this = this;
2495 var activeSiblings = this._activeSiblings;
2496 if (!activeSiblings.has(sibling) && items.every(function (item) {
2497 // Note that we have to add an exception to the `enterPredicate` for items that started off
2498 // in this drop list. The drag ref has logic that allows an item to return to its initial
2499 // container, if it has left the initial container and none of the connected containers
2500 // allow it to enter. See `DragRef._updateActiveDropContainer` for more context.
2501 return _this.enterPredicate(item, _this) || _this._draggables.indexOf(item) > -1;
2502 })) {
2503 activeSiblings.add(sibling);
2504 this._cacheParentPositions();
2505 this._listenToScrollEvents();
2506 }
2507 };
2508 /**
2509 * Called by a connected drop list when dragging has stopped.
2510 * @param sibling Sibling whose dragging has stopped.
2511 */
2512 DropListRef.prototype._stopReceiving = function (sibling) {
2513 this._activeSiblings.delete(sibling);
2514 this._viewportScrollSubscription.unsubscribe();
2515 };
2516 /**
2517 * Starts listening to scroll events on the viewport.
2518 * Used for updating the internal state of the list.
2519 */
2520 DropListRef.prototype._listenToScrollEvents = function () {
2521 var _this = this;
2522 this._viewportScrollSubscription = this._dragDropRegistry
2523 .scrolled(this._getShadowRoot())
2524 .subscribe(function (event) {
2525 if (_this.isDragging()) {
2526 var scrollDifference_1 = _this._parentPositions.handleScroll(event);
2527 if (scrollDifference_1) {
2528 // Since we know the amount that the user has scrolled we can shift all of the
2529 // client rectangles ourselves. This is cheaper than re-measuring everything and
2530 // we can avoid inconsistent behavior where we might be measuring the element before
2531 // its position has changed.
2532 _this._itemPositions.forEach(function (_b) {
2533 var clientRect = _b.clientRect;
2534 adjustClientRect(clientRect, scrollDifference_1.top, scrollDifference_1.left);
2535 });
2536 // We need two loops for this, because we want all of the cached
2537 // positions to be up-to-date before we re-sort the item.
2538 _this._itemPositions.forEach(function (_b) {
2539 var drag = _b.drag;
2540 if (_this._dragDropRegistry.isDragging(drag)) {
2541 // We need to re-sort the item manually, because the pointer move
2542 // events won't be dispatched while the user is scrolling.
2543 drag._sortFromLastPointerPosition();
2544 }
2545 });
2546 }
2547 }
2548 else if (_this.isReceiving()) {
2549 _this._cacheParentPositions();
2550 }
2551 });
2552 };
2553 /**
2554 * Lazily resolves and returns the shadow root of the element. We do this in a function, rather
2555 * than saving it in property directly on init, because we want to resolve it as late as possible
2556 * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the
2557 * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.
2558 */
2559 DropListRef.prototype._getShadowRoot = function () {
2560 if (!this._cachedShadowRoot) {
2561 var shadowRoot = platform._getShadowRoot(coercion.coerceElement(this.element));
2562 this._cachedShadowRoot = shadowRoot || this._document;
2563 }
2564 return this._cachedShadowRoot;
2565 };
2566 /** Notifies any siblings that may potentially receive the item. */
2567 DropListRef.prototype._notifyReceivingSiblings = function () {
2568 var _this = this;
2569 var draggedItems = this._activeDraggables.filter(function (item) { return item.isDragging(); });
2570 this._siblings.forEach(function (sibling) { return sibling._startReceiving(_this, draggedItems); });
2571 };
2572 return DropListRef;
2573 }());
2574 /**
2575 * Finds the index of an item that matches a predicate function. Used as an equivalent
2576 * of `Array.prototype.findIndex` which isn't part of the standard Google typings.
2577 * @param array Array in which to look for matches.
2578 * @param predicate Function used to determine whether an item is a match.
2579 */
2580 function findIndex(array, predicate) {
2581 for (var i = 0; i < array.length; i++) {
2582 if (predicate(array[i], i, array)) {
2583 return i;
2584 }
2585 }
2586 return -1;
2587 }
2588 /**
2589 * Increments the vertical scroll position of a node.
2590 * @param node Node whose scroll position should change.
2591 * @param amount Amount of pixels that the `node` should be scrolled.
2592 */
2593 function incrementVerticalScroll(node, amount) {
2594 if (node === window) {
2595 node.scrollBy(0, amount);
2596 }
2597 else {
2598 // Ideally we could use `Element.scrollBy` here as well, but IE and Edge don't support it.
2599 node.scrollTop += amount;
2600 }
2601 }
2602 /**
2603 * Increments the horizontal scroll position of a node.
2604 * @param node Node whose scroll position should change.
2605 * @param amount Amount of pixels that the `node` should be scrolled.
2606 */
2607 function incrementHorizontalScroll(node, amount) {
2608 if (node === window) {
2609 node.scrollBy(amount, 0);
2610 }
2611 else {
2612 // Ideally we could use `Element.scrollBy` here as well, but IE and Edge don't support it.
2613 node.scrollLeft += amount;
2614 }
2615 }
2616 /**
2617 * Gets whether the vertical auto-scroll direction of a node.
2618 * @param clientRect Dimensions of the node.
2619 * @param pointerY Position of the user's pointer along the y axis.
2620 */
2621 function getVerticalScrollDirection(clientRect, pointerY) {
2622 var top = clientRect.top, bottom = clientRect.bottom, height = clientRect.height;
2623 var yThreshold = height * SCROLL_PROXIMITY_THRESHOLD;
2624 if (pointerY >= top - yThreshold && pointerY <= top + yThreshold) {
2625 return 1 /* UP */;
2626 }
2627 else if (pointerY >= bottom - yThreshold && pointerY <= bottom + yThreshold) {
2628 return 2 /* DOWN */;
2629 }
2630 return 0 /* NONE */;
2631 }
2632 /**
2633 * Gets whether the horizontal auto-scroll direction of a node.
2634 * @param clientRect Dimensions of the node.
2635 * @param pointerX Position of the user's pointer along the x axis.
2636 */
2637 function getHorizontalScrollDirection(clientRect, pointerX) {
2638 var left = clientRect.left, right = clientRect.right, width = clientRect.width;
2639 var xThreshold = width * SCROLL_PROXIMITY_THRESHOLD;
2640 if (pointerX >= left - xThreshold && pointerX <= left + xThreshold) {
2641 return 1 /* LEFT */;
2642 }
2643 else if (pointerX >= right - xThreshold && pointerX <= right + xThreshold) {
2644 return 2 /* RIGHT */;
2645 }
2646 return 0 /* NONE */;
2647 }
2648 /**
2649 * Gets the directions in which an element node should be scrolled,
2650 * assuming that the user's pointer is already within it scrollable region.
2651 * @param element Element for which we should calculate the scroll direction.
2652 * @param clientRect Bounding client rectangle of the element.
2653 * @param pointerX Position of the user's pointer along the x axis.
2654 * @param pointerY Position of the user's pointer along the y axis.
2655 */
2656 function getElementScrollDirections(element, clientRect, pointerX, pointerY) {
2657 var computedVertical = getVerticalScrollDirection(clientRect, pointerY);
2658 var computedHorizontal = getHorizontalScrollDirection(clientRect, pointerX);
2659 var verticalScrollDirection = 0 /* NONE */;
2660 var horizontalScrollDirection = 0 /* NONE */;
2661 // Note that we here we do some extra checks for whether the element is actually scrollable in
2662 // a certain direction and we only assign the scroll direction if it is. We do this so that we
2663 // can allow other elements to be scrolled, if the current element can't be scrolled anymore.
2664 // This allows us to handle cases where the scroll regions of two scrollable elements overlap.
2665 if (computedVertical) {
2666 var scrollTop = element.scrollTop;
2667 if (computedVertical === 1 /* UP */) {
2668 if (scrollTop > 0) {
2669 verticalScrollDirection = 1 /* UP */;
2670 }
2671 }
2672 else if (element.scrollHeight - scrollTop > element.clientHeight) {
2673 verticalScrollDirection = 2 /* DOWN */;
2674 }
2675 }
2676 if (computedHorizontal) {
2677 var scrollLeft = element.scrollLeft;
2678 if (computedHorizontal === 1 /* LEFT */) {
2679 if (scrollLeft > 0) {
2680 horizontalScrollDirection = 1 /* LEFT */;
2681 }
2682 }
2683 else if (element.scrollWidth - scrollLeft > element.clientWidth) {
2684 horizontalScrollDirection = 2 /* RIGHT */;
2685 }
2686 }
2687 return [verticalScrollDirection, horizontalScrollDirection];
2688 }
2689
2690 /** Event options that can be used to bind an active, capturing event. */
2691 var activeCapturingEventOptions = platform.normalizePassiveListenerOptions({
2692 passive: false,
2693 capture: true
2694 });
2695 /**
2696 * Service that keeps track of all the drag item and drop container
2697 * instances, and manages global event listeners on the `document`.
2698 * @docs-private
2699 */
2700 // Note: this class is generic, rather than referencing CdkDrag and CdkDropList directly, in order
2701 // to avoid circular imports. If we were to reference them here, importing the registry into the
2702 // classes that are registering themselves will introduce a circular import.
2703 var DragDropRegistry = /** @class */ (function () {
2704 function DragDropRegistry(_ngZone, _document) {
2705 var _this = this;
2706 this._ngZone = _ngZone;
2707 /** Registered drop container instances. */
2708 this._dropInstances = new Set();
2709 /** Registered drag item instances. */
2710 this._dragInstances = new Set();
2711 /** Drag item instances that are currently being dragged. */
2712 this._activeDragInstances = [];
2713 /** Keeps track of the event listeners that we've bound to the `document`. */
2714 this._globalListeners = new Map();
2715 /**
2716 * Predicate function to check if an item is being dragged. Moved out into a property,
2717 * because it'll be called a lot and we don't want to create a new function every time.
2718 */
2719 this._draggingPredicate = function (item) { return item.isDragging(); };
2720 /**
2721 * Emits the `touchmove` or `mousemove` events that are dispatched
2722 * while the user is dragging a drag item instance.
2723 */
2724 this.pointerMove = new rxjs.Subject();
2725 /**
2726 * Emits the `touchend` or `mouseup` events that are dispatched
2727 * while the user is dragging a drag item instance.
2728 */
2729 this.pointerUp = new rxjs.Subject();
2730 /**
2731 * Emits when the viewport has been scrolled while the user is dragging an item.
2732 * @deprecated To be turned into a private member. Use the `scrolled` method instead.
2733 * @breaking-change 13.0.0
2734 */
2735 this.scroll = new rxjs.Subject();
2736 /**
2737 * Event listener that will prevent the default browser action while the user is dragging.
2738 * @param event Event whose default action should be prevented.
2739 */
2740 this._preventDefaultWhileDragging = function (event) {
2741 if (_this._activeDragInstances.length > 0) {
2742 event.preventDefault();
2743 }
2744 };
2745 /** Event listener for `touchmove` that is bound even if no dragging is happening. */
2746 this._persistentTouchmoveListener = function (event) {
2747 if (_this._activeDragInstances.length > 0) {
2748 // Note that we only want to prevent the default action after dragging has actually started.
2749 // Usually this is the same time at which the item is added to the `_activeDragInstances`,
2750 // but it could be pushed back if the user has set up a drag delay or threshold.
2751 if (_this._activeDragInstances.some(_this._draggingPredicate)) {
2752 event.preventDefault();
2753 }
2754 _this.pointerMove.next(event);
2755 }
2756 };
2757 this._document = _document;
2758 }
2759 /** Adds a drop container to the registry. */
2760 DragDropRegistry.prototype.registerDropContainer = function (drop) {
2761 if (!this._dropInstances.has(drop)) {
2762 this._dropInstances.add(drop);
2763 }
2764 };
2765 /** Adds a drag item instance to the registry. */
2766 DragDropRegistry.prototype.registerDragItem = function (drag) {
2767 var _this = this;
2768 this._dragInstances.add(drag);
2769 // The `touchmove` event gets bound once, ahead of time, because WebKit
2770 // won't preventDefault on a dynamically-added `touchmove` listener.
2771 // See https://bugs.webkit.org/show_bug.cgi?id=184250.
2772 if (this._dragInstances.size === 1) {
2773 this._ngZone.runOutsideAngular(function () {
2774 // The event handler has to be explicitly active,
2775 // because newer browsers make it passive by default.
2776 _this._document.addEventListener('touchmove', _this._persistentTouchmoveListener, activeCapturingEventOptions);
2777 });
2778 }
2779 };
2780 /** Removes a drop container from the registry. */
2781 DragDropRegistry.prototype.removeDropContainer = function (drop) {
2782 this._dropInstances.delete(drop);
2783 };
2784 /** Removes a drag item instance from the registry. */
2785 DragDropRegistry.prototype.removeDragItem = function (drag) {
2786 this._dragInstances.delete(drag);
2787 this.stopDragging(drag);
2788 if (this._dragInstances.size === 0) {
2789 this._document.removeEventListener('touchmove', this._persistentTouchmoveListener, activeCapturingEventOptions);
2790 }
2791 };
2792 /**
2793 * Starts the dragging sequence for a drag instance.
2794 * @param drag Drag instance which is being dragged.
2795 * @param event Event that initiated the dragging.
2796 */
2797 DragDropRegistry.prototype.startDragging = function (drag, event) {
2798 var _this = this;
2799 // Do not process the same drag twice to avoid memory leaks and redundant listeners
2800 if (this._activeDragInstances.indexOf(drag) > -1) {
2801 return;
2802 }
2803 this._activeDragInstances.push(drag);
2804 if (this._activeDragInstances.length === 1) {
2805 var isTouchEvent = event.type.startsWith('touch');
2806 // We explicitly bind __active__ listeners here, because newer browsers will default to
2807 // passive ones for `mousemove` and `touchmove`. The events need to be active, because we
2808 // use `preventDefault` to prevent the page from scrolling while the user is dragging.
2809 this._globalListeners
2810 .set(isTouchEvent ? 'touchend' : 'mouseup', {
2811 handler: function (e) { return _this.pointerUp.next(e); },
2812 options: true
2813 })
2814 .set('scroll', {
2815 handler: function (e) { return _this.scroll.next(e); },
2816 // Use capturing so that we pick up scroll changes in any scrollable nodes that aren't
2817 // the document. See https://github.com/angular/components/issues/17144.
2818 options: true
2819 })
2820 // Preventing the default action on `mousemove` isn't enough to disable text selection
2821 // on Safari so we need to prevent the selection event as well. Alternatively this can
2822 // be done by setting `user-select: none` on the `body`, however it has causes a style
2823 // recalculation which can be expensive on pages with a lot of elements.
2824 .set('selectstart', {
2825 handler: this._preventDefaultWhileDragging,
2826 options: activeCapturingEventOptions
2827 });
2828 // We don't have to bind a move event for touch drag sequences, because
2829 // we already have a persistent global one bound from `registerDragItem`.
2830 if (!isTouchEvent) {
2831 this._globalListeners.set('mousemove', {
2832 handler: function (e) { return _this.pointerMove.next(e); },
2833 options: activeCapturingEventOptions
2834 });
2835 }
2836 this._ngZone.runOutsideAngular(function () {
2837 _this._globalListeners.forEach(function (config, name) {
2838 _this._document.addEventListener(name, config.handler, config.options);
2839 });
2840 });
2841 }
2842 };
2843 /** Stops dragging a drag item instance. */
2844 DragDropRegistry.prototype.stopDragging = function (drag) {
2845 var index = this._activeDragInstances.indexOf(drag);
2846 if (index > -1) {
2847 this._activeDragInstances.splice(index, 1);
2848 if (this._activeDragInstances.length === 0) {
2849 this._clearGlobalListeners();
2850 }
2851 }
2852 };
2853 /** Gets whether a drag item instance is currently being dragged. */
2854 DragDropRegistry.prototype.isDragging = function (drag) {
2855 return this._activeDragInstances.indexOf(drag) > -1;
2856 };
2857 /**
2858 * Gets a stream that will emit when any element on the page is scrolled while an item is being
2859 * dragged.
2860 * @param shadowRoot Optional shadow root that the current dragging sequence started from.
2861 * Top-level listeners won't pick up events coming from the shadow DOM so this parameter can
2862 * be used to include an additional top-level listener at the shadow root level.
2863 */
2864 DragDropRegistry.prototype.scrolled = function (shadowRoot) {
2865 var _this = this;
2866 var streams = [this.scroll];
2867 if (shadowRoot && shadowRoot !== this._document) {
2868 // Note that this is basically the same as `fromEvent` from rjxs, but we do it ourselves,
2869 // because we want to guarantee that the event is bound outside of the `NgZone`. With
2870 // `fromEvent` it'll only happen if the subscription is outside the `NgZone`.
2871 streams.push(new rxjs.Observable(function (observer) {
2872 return _this._ngZone.runOutsideAngular(function () {
2873 var eventOptions = true;
2874 var callback = function (event) {
2875 if (_this._activeDragInstances.length) {
2876 observer.next(event);
2877 }
2878 };
2879 shadowRoot.addEventListener('scroll', callback, eventOptions);
2880 return function () {
2881 shadowRoot.removeEventListener('scroll', callback, eventOptions);
2882 };
2883 });
2884 }));
2885 }
2886 return rxjs.merge.apply(void 0, __spreadArray([], __read(streams)));
2887 };
2888 DragDropRegistry.prototype.ngOnDestroy = function () {
2889 var _this = this;
2890 this._dragInstances.forEach(function (instance) { return _this.removeDragItem(instance); });
2891 this._dropInstances.forEach(function (instance) { return _this.removeDropContainer(instance); });
2892 this._clearGlobalListeners();
2893 this.pointerMove.complete();
2894 this.pointerUp.complete();
2895 };
2896 /** Clears out the global event listeners from the `document`. */
2897 DragDropRegistry.prototype._clearGlobalListeners = function () {
2898 var _this = this;
2899 this._globalListeners.forEach(function (config, name) {
2900 _this._document.removeEventListener(name, config.handler, config.options);
2901 });
2902 this._globalListeners.clear();
2903 };
2904 return DragDropRegistry;
2905 }());
2906 DragDropRegistry.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DragDropRegistry_Factory() { return new DragDropRegistry(i0__namespace.ɵɵinject(i0__namespace.NgZone), i0__namespace.ɵɵinject(i1__namespace.DOCUMENT)); }, token: DragDropRegistry, providedIn: "root" });
2907 DragDropRegistry.decorators = [
2908 { type: i0.Injectable, args: [{ providedIn: 'root' },] }
2909 ];
2910 DragDropRegistry.ctorParameters = function () { return [
2911 { type: i0.NgZone },
2912 { type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] }
2913 ]; };
2914
2915 /**
2916 * @license
2917 * Copyright Google LLC All Rights Reserved.
2918 *
2919 * Use of this source code is governed by an MIT-style license that can be
2920 * found in the LICENSE file at https://angular.io/license
2921 */
2922 /** Default configuration to be used when creating a `DragRef`. */
2923 var DEFAULT_CONFIG = {
2924 dragStartThreshold: 5,
2925 pointerDirectionChangeThreshold: 5
2926 };
2927 /**
2928 * Service that allows for drag-and-drop functionality to be attached to DOM elements.
2929 */
2930 var DragDrop = /** @class */ (function () {
2931 function DragDrop(_document, _ngZone, _viewportRuler, _dragDropRegistry) {
2932 this._document = _document;
2933 this._ngZone = _ngZone;
2934 this._viewportRuler = _viewportRuler;
2935 this._dragDropRegistry = _dragDropRegistry;
2936 }
2937 /**
2938 * Turns an element into a draggable item.
2939 * @param element Element to which to attach the dragging functionality.
2940 * @param config Object used to configure the dragging behavior.
2941 */
2942 DragDrop.prototype.createDrag = function (element, config) {
2943 if (config === void 0) { config = DEFAULT_CONFIG; }
2944 return new DragRef(element, config, this._document, this._ngZone, this._viewportRuler, this._dragDropRegistry);
2945 };
2946 /**
2947 * Turns an element into a drop list.
2948 * @param element Element to which to attach the drop list functionality.
2949 */
2950 DragDrop.prototype.createDropList = function (element) {
2951 return new DropListRef(element, this._dragDropRegistry, this._document, this._ngZone, this._viewportRuler);
2952 };
2953 return DragDrop;
2954 }());
2955 DragDrop.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DragDrop_Factory() { return new DragDrop(i0__namespace.ɵɵinject(i1__namespace.DOCUMENT), i0__namespace.ɵɵinject(i0__namespace.NgZone), i0__namespace.ɵɵinject(i2__namespace.ViewportRuler), i0__namespace.ɵɵinject(DragDropRegistry)); }, token: DragDrop, providedIn: "root" });
2956 DragDrop.decorators = [
2957 { type: i0.Injectable, args: [{ providedIn: 'root' },] }
2958 ];
2959 DragDrop.ctorParameters = function () { return [
2960 { type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] },
2961 { type: i0.NgZone },
2962 { type: i2.ViewportRuler },
2963 { type: DragDropRegistry }
2964 ]; };
2965
2966 /**
2967 * @license
2968 * Copyright Google LLC All Rights Reserved.
2969 *
2970 * Use of this source code is governed by an MIT-style license that can be
2971 * found in the LICENSE file at https://angular.io/license
2972 */
2973 /**
2974 * Injection token that can be used for a `CdkDrag` to provide itself as a parent to the
2975 * drag-specific child directive (`CdkDragHandle`, `CdkDragPreview` etc.). Used primarily
2976 * to avoid circular imports.
2977 * @docs-private
2978 */
2979 var CDK_DRAG_PARENT = new i0.InjectionToken('CDK_DRAG_PARENT');
2980
2981 /**
2982 * @license
2983 * Copyright Google LLC All Rights Reserved.
2984 *
2985 * Use of this source code is governed by an MIT-style license that can be
2986 * found in the LICENSE file at https://angular.io/license
2987 */
2988 /**
2989 * Injection token that can be used to reference instances of `CdkDropListGroup`. It serves as
2990 * alternative token to the actual `CdkDropListGroup` class which could cause unnecessary
2991 * retention of the class and its directive metadata.
2992 */
2993 var CDK_DROP_LIST_GROUP = new i0.InjectionToken('CdkDropListGroup');
2994 /**
2995 * Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList`
2996 * elements that are placed inside a `cdkDropListGroup` will be connected to each other
2997 * automatically. Can be used as an alternative to the `cdkDropListConnectedTo` input
2998 * from `cdkDropList`.
2999 */
3000 var CdkDropListGroup = /** @class */ (function () {
3001 function CdkDropListGroup() {
3002 /** Drop lists registered inside the group. */
3003 this._items = new Set();
3004 this._disabled = false;
3005 }
3006 Object.defineProperty(CdkDropListGroup.prototype, "disabled", {
3007 /** Whether starting a dragging sequence from inside this group is disabled. */
3008 get: function () { return this._disabled; },
3009 set: function (value) {
3010 this._disabled = coercion.coerceBooleanProperty(value);
3011 },
3012 enumerable: false,
3013 configurable: true
3014 });
3015 CdkDropListGroup.prototype.ngOnDestroy = function () {
3016 this._items.clear();
3017 };
3018 return CdkDropListGroup;
3019 }());
3020 CdkDropListGroup.decorators = [
3021 { type: i0.Directive, args: [{
3022 selector: '[cdkDropListGroup]',
3023 exportAs: 'cdkDropListGroup',
3024 providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }],
3025 },] }
3026 ];
3027 CdkDropListGroup.propDecorators = {
3028 disabled: [{ type: i0.Input, args: ['cdkDropListGroupDisabled',] }]
3029 };
3030
3031 /**
3032 * @license
3033 * Copyright Google LLC All Rights Reserved.
3034 *
3035 * Use of this source code is governed by an MIT-style license that can be
3036 * found in the LICENSE file at https://angular.io/license
3037 */
3038 /**
3039 * Injection token that can be used to configure the
3040 * behavior of the drag&drop-related components.
3041 */
3042 var CDK_DRAG_CONFIG = new i0.InjectionToken('CDK_DRAG_CONFIG');
3043
3044 /**
3045 * @license
3046 * Copyright Google LLC All Rights Reserved.
3047 *
3048 * Use of this source code is governed by an MIT-style license that can be
3049 * found in the LICENSE file at https://angular.io/license
3050 */
3051 /**
3052 * Asserts that a particular node is an element.
3053 * @param node Node to be checked.
3054 * @param name Name to attach to the error message.
3055 */
3056 function assertElementNode(node, name) {
3057 if (node.nodeType !== 1) {
3058 throw Error(name + " must be attached to an element node. " +
3059 ("Currently attached to \"" + node.nodeName + "\"."));
3060 }
3061 }
3062
3063 /**
3064 * @license
3065 * Copyright Google LLC All Rights Reserved.
3066 *
3067 * Use of this source code is governed by an MIT-style license that can be
3068 * found in the LICENSE file at https://angular.io/license
3069 */
3070 /** Counter used to generate unique ids for drop zones. */
3071 var _uniqueIdCounter = 0;
3072 /**
3073 * Injection token that can be used to reference instances of `CdkDropList`. It serves as
3074 * alternative token to the actual `CdkDropList` class which could cause unnecessary
3075 * retention of the class and its directive metadata.
3076 */
3077 var CDK_DROP_LIST = new i0.InjectionToken('CdkDropList');
3078 var ɵ0 = undefined;
3079 /** Container that wraps a set of draggable items. */
3080 var CdkDropList = /** @class */ (function () {
3081 function CdkDropList(
3082 /** Element that the drop list is attached to. */
3083 element, dragDrop, _changeDetectorRef, _scrollDispatcher, _dir, _group, config) {
3084 var _this = this;
3085 this.element = element;
3086 this._changeDetectorRef = _changeDetectorRef;
3087 this._scrollDispatcher = _scrollDispatcher;
3088 this._dir = _dir;
3089 this._group = _group;
3090 /** Emits when the list has been destroyed. */
3091 this._destroyed = new rxjs.Subject();
3092 /**
3093 * Other draggable containers that this container is connected to and into which the
3094 * container's items can be transferred. Can either be references to other drop containers,
3095 * or their unique IDs.
3096 */
3097 this.connectedTo = [];
3098 /**
3099 * Unique ID for the drop zone. Can be used as a reference
3100 * in the `connectedTo` of another `CdkDropList`.
3101 */
3102 this.id = "cdk-drop-list-" + _uniqueIdCounter++;
3103 /**
3104 * Function that is used to determine whether an item
3105 * is allowed to be moved into a drop container.
3106 */
3107 this.enterPredicate = function () { return true; };
3108 /** Functions that is used to determine whether an item can be sorted into a particular index. */
3109 this.sortPredicate = function () { return true; };
3110 /** Emits when the user drops an item inside the container. */
3111 this.dropped = new i0.EventEmitter();
3112 /**
3113 * Emits when the user has moved a new drag item into this container.
3114 */
3115 this.entered = new i0.EventEmitter();
3116 /**
3117 * Emits when the user removes an item from the container
3118 * by dragging it into another container.
3119 */
3120 this.exited = new i0.EventEmitter();
3121 /** Emits as the user is swapping items while actively dragging. */
3122 this.sorted = new i0.EventEmitter();
3123 /**
3124 * Keeps track of the items that are registered with this container. Historically we used to
3125 * do this with a `ContentChildren` query, however queries don't handle transplanted views very
3126 * well which means that we can't handle cases like dragging the headers of a `mat-table`
3127 * correctly. What we do instead is to have the items register themselves with the container
3128 * and then we sort them based on their position in the DOM.
3129 */
3130 this._unsortedItems = new Set();
3131 if (typeof ngDevMode === 'undefined' || ngDevMode) {
3132 assertElementNode(element.nativeElement, 'cdkDropList');
3133 }
3134 this._dropListRef = dragDrop.createDropList(element);
3135 this._dropListRef.data = this;
3136 if (config) {
3137 this._assignDefaults(config);
3138 }
3139 this._dropListRef.enterPredicate = function (drag, drop) {
3140 return _this.enterPredicate(drag.data, drop.data);
3141 };
3142 this._dropListRef.sortPredicate =
3143 function (index, drag, drop) {
3144 return _this.sortPredicate(index, drag.data, drop.data);
3145 };
3146 this._setupInputSyncSubscription(this._dropListRef);
3147 this._handleEvents(this._dropListRef);
3148 CdkDropList._dropLists.push(this);
3149 if (_group) {
3150 _group._items.add(this);
3151 }
3152 }
3153 Object.defineProperty(CdkDropList.prototype, "disabled", {
3154 /** Whether starting a dragging sequence from this container is disabled. */
3155 get: function () {
3156 return this._disabled || (!!this._group && this._group.disabled);
3157 },
3158 set: function (value) {
3159 // Usually we sync the directive and ref state right before dragging starts, in order to have
3160 // a single point of failure and to avoid having to use setters for everything. `disabled` is
3161 // a special case, because it can prevent the `beforeStarted` event from firing, which can lock
3162 // the user in a disabled state, so we also need to sync it as it's being set.
3163 this._dropListRef.disabled = this._disabled = coercion.coerceBooleanProperty(value);
3164 },
3165 enumerable: false,
3166 configurable: true
3167 });
3168 /** Registers an items with the drop list. */
3169 CdkDropList.prototype.addItem = function (item) {
3170 this._unsortedItems.add(item);
3171 if (this._dropListRef.isDragging()) {
3172 this._syncItemsWithRef();
3173 }
3174 };
3175 /** Removes an item from the drop list. */
3176 CdkDropList.prototype.removeItem = function (item) {
3177 this._unsortedItems.delete(item);
3178 if (this._dropListRef.isDragging()) {
3179 this._syncItemsWithRef();
3180 }
3181 };
3182 /** Gets the registered items in the list, sorted by their position in the DOM. */
3183 CdkDropList.prototype.getSortedItems = function () {
3184 return Array.from(this._unsortedItems).sort(function (a, b) {
3185 var documentPosition = a._dragRef.getVisibleElement().compareDocumentPosition(b._dragRef.getVisibleElement());
3186 // `compareDocumentPosition` returns a bitmask so we have to use a bitwise operator.
3187 // https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
3188 // tslint:disable-next-line:no-bitwise
3189 return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
3190 });
3191 };
3192 CdkDropList.prototype.ngOnDestroy = function () {
3193 var index = CdkDropList._dropLists.indexOf(this);
3194 if (index > -1) {
3195 CdkDropList._dropLists.splice(index, 1);
3196 }
3197 if (this._group) {
3198 this._group._items.delete(this);
3199 }
3200 this._unsortedItems.clear();
3201 this._dropListRef.dispose();
3202 this._destroyed.next();
3203 this._destroyed.complete();
3204 };
3205 /** Syncs the inputs of the CdkDropList with the options of the underlying DropListRef. */
3206 CdkDropList.prototype._setupInputSyncSubscription = function (ref) {
3207 var _this = this;
3208 if (this._dir) {
3209 this._dir.change
3210 .pipe(operators.startWith(this._dir.value), operators.takeUntil(this._destroyed))
3211 .subscribe(function (value) { return ref.withDirection(value); });
3212 }
3213 ref.beforeStarted.subscribe(function () {
3214 var siblings = coercion.coerceArray(_this.connectedTo).map(function (drop) {
3215 if (typeof drop === 'string') {
3216 var correspondingDropList = CdkDropList._dropLists.find(function (list) { return list.id === drop; });
3217 if (!correspondingDropList && (typeof ngDevMode === 'undefined' || ngDevMode)) {
3218 console.warn("CdkDropList could not find connected drop list with id \"" + drop + "\"");
3219 }
3220 return correspondingDropList;
3221 }
3222 return drop;
3223 });
3224 if (_this._group) {
3225 _this._group._items.forEach(function (drop) {
3226 if (siblings.indexOf(drop) === -1) {
3227 siblings.push(drop);
3228 }
3229 });
3230 }
3231 // Note that we resolve the scrollable parents here so that we delay the resolution
3232 // as long as possible, ensuring that the element is in its final place in the DOM.
3233 if (!_this._scrollableParentsResolved) {
3234 var scrollableParents = _this._scrollDispatcher
3235 .getAncestorScrollContainers(_this.element)
3236 .map(function (scrollable) { return scrollable.getElementRef().nativeElement; });
3237 _this._dropListRef.withScrollableParents(scrollableParents);
3238 // Only do this once since it involves traversing the DOM and the parents
3239 // shouldn't be able to change without the drop list being destroyed.
3240 _this._scrollableParentsResolved = true;
3241 }
3242 ref.disabled = _this.disabled;
3243 ref.lockAxis = _this.lockAxis;
3244 ref.sortingDisabled = coercion.coerceBooleanProperty(_this.sortingDisabled);
3245 ref.autoScrollDisabled = coercion.coerceBooleanProperty(_this.autoScrollDisabled);
3246 ref.autoScrollStep = coercion.coerceNumberProperty(_this.autoScrollStep, 2);
3247 ref
3248 .connectedTo(siblings.filter(function (drop) { return drop && drop !== _this; }).map(function (list) { return list._dropListRef; }))
3249 .withOrientation(_this.orientation);
3250 });
3251 };
3252 /** Handles events from the underlying DropListRef. */
3253 CdkDropList.prototype._handleEvents = function (ref) {
3254 var _this = this;
3255 ref.beforeStarted.subscribe(function () {
3256 _this._syncItemsWithRef();
3257 _this._changeDetectorRef.markForCheck();
3258 });
3259 ref.entered.subscribe(function (event) {
3260 _this.entered.emit({
3261 container: _this,
3262 item: event.item.data,
3263 currentIndex: event.currentIndex
3264 });
3265 });
3266 ref.exited.subscribe(function (event) {
3267 _this.exited.emit({
3268 container: _this,
3269 item: event.item.data
3270 });
3271 _this._changeDetectorRef.markForCheck();
3272 });
3273 ref.sorted.subscribe(function (event) {
3274 _this.sorted.emit({
3275 previousIndex: event.previousIndex,
3276 currentIndex: event.currentIndex,
3277 container: _this,
3278 item: event.item.data
3279 });
3280 });
3281 ref.dropped.subscribe(function (event) {
3282 _this.dropped.emit({
3283 previousIndex: event.previousIndex,
3284 currentIndex: event.currentIndex,
3285 previousContainer: event.previousContainer.data,
3286 container: event.container.data,
3287 item: event.item.data,
3288 isPointerOverContainer: event.isPointerOverContainer,
3289 distance: event.distance,
3290 dropPoint: event.dropPoint
3291 });
3292 // Mark for check since all of these events run outside of change
3293 // detection and we're not guaranteed for something else to have triggered it.
3294 _this._changeDetectorRef.markForCheck();
3295 });
3296 };
3297 /** Assigns the default input values based on a provided config object. */
3298 CdkDropList.prototype._assignDefaults = function (config) {
3299 var lockAxis = config.lockAxis, draggingDisabled = config.draggingDisabled, sortingDisabled = config.sortingDisabled, listAutoScrollDisabled = config.listAutoScrollDisabled, listOrientation = config.listOrientation;
3300 this.disabled = draggingDisabled == null ? false : draggingDisabled;
3301 this.sortingDisabled = sortingDisabled == null ? false : sortingDisabled;
3302 this.autoScrollDisabled = listAutoScrollDisabled == null ? false : listAutoScrollDisabled;
3303 this.orientation = listOrientation || 'vertical';
3304 if (lockAxis) {
3305 this.lockAxis = lockAxis;
3306 }
3307 };
3308 /** Syncs up the registered drag items with underlying drop list ref. */
3309 CdkDropList.prototype._syncItemsWithRef = function () {
3310 this._dropListRef.withItems(this.getSortedItems().map(function (item) { return item._dragRef; }));
3311 };
3312 return CdkDropList;
3313 }());
3314 /** Keeps track of the drop lists that are currently on the page. */
3315 CdkDropList._dropLists = [];
3316 CdkDropList.decorators = [
3317 { type: i0.Directive, args: [{
3318 selector: '[cdkDropList], cdk-drop-list',
3319 exportAs: 'cdkDropList',
3320 providers: [
3321 // Prevent child drop lists from picking up the same group as their parent.
3322 { provide: CDK_DROP_LIST_GROUP, useValue: ɵ0 },
3323 { provide: CDK_DROP_LIST, useExisting: CdkDropList },
3324 ],
3325 host: {
3326 'class': 'cdk-drop-list',
3327 '[attr.id]': 'id',
3328 '[class.cdk-drop-list-disabled]': 'disabled',
3329 '[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()',
3330 '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()',
3331 }
3332 },] }
3333 ];
3334 CdkDropList.ctorParameters = function () { return [
3335 { type: i0.ElementRef },
3336 { type: DragDrop },
3337 { type: i0.ChangeDetectorRef },
3338 { type: i2.ScrollDispatcher },
3339 { type: bidi.Directionality, decorators: [{ type: i0.Optional }] },
3340 { type: CdkDropListGroup, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [CDK_DROP_LIST_GROUP,] }, { type: i0.SkipSelf }] },
3341 { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [CDK_DRAG_CONFIG,] }] }
3342 ]; };
3343 CdkDropList.propDecorators = {
3344 connectedTo: [{ type: i0.Input, args: ['cdkDropListConnectedTo',] }],
3345 data: [{ type: i0.Input, args: ['cdkDropListData',] }],
3346 orientation: [{ type: i0.Input, args: ['cdkDropListOrientation',] }],
3347 id: [{ type: i0.Input }],
3348 lockAxis: [{ type: i0.Input, args: ['cdkDropListLockAxis',] }],
3349 disabled: [{ type: i0.Input, args: ['cdkDropListDisabled',] }],
3350 sortingDisabled: [{ type: i0.Input, args: ['cdkDropListSortingDisabled',] }],
3351 enterPredicate: [{ type: i0.Input, args: ['cdkDropListEnterPredicate',] }],
3352 sortPredicate: [{ type: i0.Input, args: ['cdkDropListSortPredicate',] }],
3353 autoScrollDisabled: [{ type: i0.Input, args: ['cdkDropListAutoScrollDisabled',] }],
3354 autoScrollStep: [{ type: i0.Input, args: ['cdkDropListAutoScrollStep',] }],
3355 dropped: [{ type: i0.Output, args: ['cdkDropListDropped',] }],
3356 entered: [{ type: i0.Output, args: ['cdkDropListEntered',] }],
3357 exited: [{ type: i0.Output, args: ['cdkDropListExited',] }],
3358 sorted: [{ type: i0.Output, args: ['cdkDropListSorted',] }]
3359 };
3360
3361 /**
3362 * @license
3363 * Copyright Google LLC All Rights Reserved.
3364 *
3365 * Use of this source code is governed by an MIT-style license that can be
3366 * found in the LICENSE file at https://angular.io/license
3367 */
3368 /**
3369 * Injection token that can be used to reference instances of `CdkDragHandle`. It serves as
3370 * alternative token to the actual `CdkDragHandle` class which could cause unnecessary
3371 * retention of the class and its directive metadata.
3372 */
3373 var CDK_DRAG_HANDLE = new i0.InjectionToken('CdkDragHandle');
3374 /** Handle that can be used to drag a CdkDrag instance. */
3375 var CdkDragHandle = /** @class */ (function () {
3376 function CdkDragHandle(element, parentDrag) {
3377 this.element = element;
3378 /** Emits when the state of the handle has changed. */
3379 this._stateChanges = new rxjs.Subject();
3380 this._disabled = false;
3381 if (typeof ngDevMode === 'undefined' || ngDevMode) {
3382 assertElementNode(element.nativeElement, 'cdkDragHandle');
3383 }
3384 this._parentDrag = parentDrag;
3385 }
3386 Object.defineProperty(CdkDragHandle.prototype, "disabled", {
3387 /** Whether starting to drag through this handle is disabled. */
3388 get: function () { return this._disabled; },
3389 set: function (value) {
3390 this._disabled = coercion.coerceBooleanProperty(value);
3391 this._stateChanges.next(this);
3392 },
3393 enumerable: false,
3394 configurable: true
3395 });
3396 CdkDragHandle.prototype.ngOnDestroy = function () {
3397 this._stateChanges.complete();
3398 };
3399 return CdkDragHandle;
3400 }());
3401 CdkDragHandle.decorators = [
3402 { type: i0.Directive, args: [{
3403 selector: '[cdkDragHandle]',
3404 host: {
3405 'class': 'cdk-drag-handle'
3406 },
3407 providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }],
3408 },] }
3409 ];
3410 CdkDragHandle.ctorParameters = function () { return [
3411 { type: i0.ElementRef },
3412 { type: undefined, decorators: [{ type: i0.Inject, args: [CDK_DRAG_PARENT,] }, { type: i0.Optional }, { type: i0.SkipSelf }] }
3413 ]; };
3414 CdkDragHandle.propDecorators = {
3415 disabled: [{ type: i0.Input, args: ['cdkDragHandleDisabled',] }]
3416 };
3417
3418 /**
3419 * @license
3420 * Copyright Google LLC All Rights Reserved.
3421 *
3422 * Use of this source code is governed by an MIT-style license that can be
3423 * found in the LICENSE file at https://angular.io/license
3424 */
3425 /**
3426 * Injection token that can be used to reference instances of `CdkDragPlaceholder`. It serves as
3427 * alternative token to the actual `CdkDragPlaceholder` class which could cause unnecessary
3428 * retention of the class and its directive metadata.
3429 */
3430 var CDK_DRAG_PLACEHOLDER = new i0.InjectionToken('CdkDragPlaceholder');
3431 /**
3432 * Element that will be used as a template for the placeholder of a CdkDrag when
3433 * it is being dragged. The placeholder is displayed in place of the element being dragged.
3434 */
3435 var CdkDragPlaceholder = /** @class */ (function () {
3436 function CdkDragPlaceholder(templateRef) {
3437 this.templateRef = templateRef;
3438 }
3439 return CdkDragPlaceholder;
3440 }());
3441 CdkDragPlaceholder.decorators = [
3442 { type: i0.Directive, args: [{
3443 selector: 'ng-template[cdkDragPlaceholder]',
3444 providers: [{ provide: CDK_DRAG_PLACEHOLDER, useExisting: CdkDragPlaceholder }],
3445 },] }
3446 ];
3447 CdkDragPlaceholder.ctorParameters = function () { return [
3448 { type: i0.TemplateRef }
3449 ]; };
3450 CdkDragPlaceholder.propDecorators = {
3451 data: [{ type: i0.Input }]
3452 };
3453
3454 /**
3455 * @license
3456 * Copyright Google LLC All Rights Reserved.
3457 *
3458 * Use of this source code is governed by an MIT-style license that can be
3459 * found in the LICENSE file at https://angular.io/license
3460 */
3461 /**
3462 * Injection token that can be used to reference instances of `CdkDragPreview`. It serves as
3463 * alternative token to the actual `CdkDragPreview` class which could cause unnecessary
3464 * retention of the class and its directive metadata.
3465 */
3466 var CDK_DRAG_PREVIEW = new i0.InjectionToken('CdkDragPreview');
3467 /**
3468 * Element that will be used as a template for the preview
3469 * of a CdkDrag when it is being dragged.
3470 */
3471 var CdkDragPreview = /** @class */ (function () {
3472 function CdkDragPreview(templateRef) {
3473 this.templateRef = templateRef;
3474 this._matchSize = false;
3475 }
3476 Object.defineProperty(CdkDragPreview.prototype, "matchSize", {
3477 /** Whether the preview should preserve the same size as the item that is being dragged. */
3478 get: function () { return this._matchSize; },
3479 set: function (value) { this._matchSize = coercion.coerceBooleanProperty(value); },
3480 enumerable: false,
3481 configurable: true
3482 });
3483 return CdkDragPreview;
3484 }());
3485 CdkDragPreview.decorators = [
3486 { type: i0.Directive, args: [{
3487 selector: 'ng-template[cdkDragPreview]',
3488 providers: [{ provide: CDK_DRAG_PREVIEW, useExisting: CdkDragPreview }],
3489 },] }
3490 ];
3491 CdkDragPreview.ctorParameters = function () { return [
3492 { type: i0.TemplateRef }
3493 ]; };
3494 CdkDragPreview.propDecorators = {
3495 data: [{ type: i0.Input }],
3496 matchSize: [{ type: i0.Input }]
3497 };
3498
3499 var DRAG_HOST_CLASS = 'cdk-drag';
3500 /** Element that can be moved inside a CdkDropList container. */
3501 var CdkDrag = /** @class */ (function () {
3502 function CdkDrag(
3503 /** Element that the draggable is attached to. */
3504 element,
3505 /** Droppable container that the draggable is a part of. */
3506 dropContainer,
3507 /**
3508 * @deprecated `_document` parameter no longer being used and will be removed.
3509 * @breaking-change 12.0.0
3510 */
3511 _document, _ngZone, _viewContainerRef, config, _dir, dragDrop, _changeDetectorRef, _selfHandle, _parentDrag) {
3512 var _this = this;
3513 this.element = element;
3514 this.dropContainer = dropContainer;
3515 this._ngZone = _ngZone;
3516 this._viewContainerRef = _viewContainerRef;
3517 this._dir = _dir;
3518 this._changeDetectorRef = _changeDetectorRef;
3519 this._selfHandle = _selfHandle;
3520 this._parentDrag = _parentDrag;
3521 this._destroyed = new rxjs.Subject();
3522 /** Emits when the user starts dragging the item. */
3523 this.started = new i0.EventEmitter();
3524 /** Emits when the user has released a drag item, before any animations have started. */
3525 this.released = new i0.EventEmitter();
3526 /** Emits when the user stops dragging an item in the container. */
3527 this.ended = new i0.EventEmitter();
3528 /** Emits when the user has moved the item into a new container. */
3529 this.entered = new i0.EventEmitter();
3530 /** Emits when the user removes the item its container by dragging it into another container. */
3531 this.exited = new i0.EventEmitter();
3532 /** Emits when the user drops the item inside a container. */
3533 this.dropped = new i0.EventEmitter();
3534 /**
3535 * Emits as the user is dragging the item. Use with caution,
3536 * because this event will fire for every pixel that the user has dragged.
3537 */
3538 this.moved = new rxjs.Observable(function (observer) {
3539 var subscription = _this._dragRef.moved.pipe(operators.map(function (movedEvent) { return ({
3540 source: _this,
3541 pointerPosition: movedEvent.pointerPosition,
3542 event: movedEvent.event,
3543 delta: movedEvent.delta,
3544 distance: movedEvent.distance
3545 }); })).subscribe(observer);
3546 return function () {
3547 subscription.unsubscribe();
3548 };
3549 });
3550 this._dragRef = dragDrop.createDrag(element, {
3551 dragStartThreshold: config && config.dragStartThreshold != null ?
3552 config.dragStartThreshold : 5,
3553 pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null ?
3554 config.pointerDirectionChangeThreshold : 5,
3555 zIndex: config === null || config === void 0 ? void 0 : config.zIndex,
3556 });
3557 this._dragRef.data = this;
3558 // We have to keep track of the drag instances in order to be able to match an element to
3559 // a drag instance. We can't go through the global registry of `DragRef`, because the root
3560 // element could be different.
3561 CdkDrag._dragInstances.push(this);
3562 if (config) {
3563 this._assignDefaults(config);
3564 }
3565 // Note that usually the container is assigned when the drop list is picks up the item, but in
3566 // some cases (mainly transplanted views with OnPush, see #18341) we may end up in a situation
3567 // where there are no items on the first change detection pass, but the items get picked up as
3568 // soon as the user triggers another pass by dragging. This is a problem, because the item would
3569 // have to switch from standalone mode to drag mode in the middle of the dragging sequence which
3570 // is too late since the two modes save different kinds of information. We work around it by
3571 // assigning the drop container both from here and the list.
3572 if (dropContainer) {
3573 this._dragRef._withDropContainer(dropContainer._dropListRef);
3574 dropContainer.addItem(this);
3575 }
3576 this._syncInputs(this._dragRef);
3577 this._handleEvents(this._dragRef);
3578 }
3579 Object.defineProperty(CdkDrag.prototype, "disabled", {
3580 /** Whether starting to drag this element is disabled. */
3581 get: function () {
3582 return this._disabled || (this.dropContainer && this.dropContainer.disabled);
3583 },
3584 set: function (value) {
3585 this._disabled = coercion.coerceBooleanProperty(value);
3586 this._dragRef.disabled = this._disabled;
3587 },
3588 enumerable: false,
3589 configurable: true
3590 });
3591 /**
3592 * Returns the element that is being used as a placeholder
3593 * while the current element is being dragged.
3594 */
3595 CdkDrag.prototype.getPlaceholderElement = function () {
3596 return this._dragRef.getPlaceholderElement();
3597 };
3598 /** Returns the root draggable element. */
3599 CdkDrag.prototype.getRootElement = function () {
3600 return this._dragRef.getRootElement();
3601 };
3602 /** Resets a standalone drag item to its initial position. */
3603 CdkDrag.prototype.reset = function () {
3604 this._dragRef.reset();
3605 };
3606 /**
3607 * Gets the pixel coordinates of the draggable outside of a drop container.
3608 */
3609 CdkDrag.prototype.getFreeDragPosition = function () {
3610 return this._dragRef.getFreeDragPosition();
3611 };
3612 CdkDrag.prototype.ngAfterViewInit = function () {
3613 var _this = this;
3614 // Normally this isn't in the zone, but it can cause major performance regressions for apps
3615 // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
3616 this._ngZone.runOutsideAngular(function () {
3617 // We need to wait for the zone to stabilize, in order for the reference
3618 // element to be in the proper place in the DOM. This is mostly relevant
3619 // for draggable elements inside portals since they get stamped out in
3620 // their original DOM position and then they get transferred to the portal.
3621 _this._ngZone.onStable
3622 .pipe(operators.take(1), operators.takeUntil(_this._destroyed))
3623 .subscribe(function () {
3624 _this._updateRootElement();
3625 _this._setupHandlesListener();
3626 if (_this.freeDragPosition) {
3627 _this._dragRef.setFreeDragPosition(_this.freeDragPosition);
3628 }
3629 });
3630 });
3631 };
3632 CdkDrag.prototype.ngOnChanges = function (changes) {
3633 var rootSelectorChange = changes['rootElementSelector'];
3634 var positionChange = changes['freeDragPosition'];
3635 // We don't have to react to the first change since it's being
3636 // handled in `ngAfterViewInit` where it needs to be deferred.
3637 if (rootSelectorChange && !rootSelectorChange.firstChange) {
3638 this._updateRootElement();
3639 }
3640 // Skip the first change since it's being handled in `ngAfterViewInit`.
3641 if (positionChange && !positionChange.firstChange && this.freeDragPosition) {
3642 this._dragRef.setFreeDragPosition(this.freeDragPosition);
3643 }
3644 };
3645 CdkDrag.prototype.ngOnDestroy = function () {
3646 var _this = this;
3647 if (this.dropContainer) {
3648 this.dropContainer.removeItem(this);
3649 }
3650 var index = CdkDrag._dragInstances.indexOf(this);
3651 if (index > -1) {
3652 CdkDrag._dragInstances.splice(index, 1);
3653 }
3654 // Unnecessary in most cases, but used to avoid extra change detections with `zone-paths-rxjs`.
3655 this._ngZone.runOutsideAngular(function () {
3656 _this._destroyed.next();
3657 _this._destroyed.complete();
3658 _this._dragRef.dispose();
3659 });
3660 };
3661 /** Syncs the root element with the `DragRef`. */
3662 CdkDrag.prototype._updateRootElement = function () {
3663 var element = this.element.nativeElement;
3664 var rootElement = this.rootElementSelector ?
3665 getClosestMatchingAncestor(element, this.rootElementSelector) : element;
3666 if (rootElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {
3667 assertElementNode(rootElement, 'cdkDrag');
3668 }
3669 this._dragRef.withRootElement(rootElement || element);
3670 };
3671 /** Gets the boundary element, based on the `boundaryElement` value. */
3672 CdkDrag.prototype._getBoundaryElement = function () {
3673 var boundary = this.boundaryElement;
3674 if (!boundary) {
3675 return null;
3676 }
3677 if (typeof boundary === 'string') {
3678 return getClosestMatchingAncestor(this.element.nativeElement, boundary);
3679 }
3680 var element = coercion.coerceElement(boundary);
3681 if ((typeof ngDevMode === 'undefined' || ngDevMode) &&
3682 !element.contains(this.element.nativeElement)) {
3683 throw Error('Draggable element is not inside of the node passed into cdkDragBoundary.');
3684 }
3685 return element;
3686 };
3687 /** Syncs the inputs of the CdkDrag with the options of the underlying DragRef. */
3688 CdkDrag.prototype._syncInputs = function (ref) {
3689 var _this = this;
3690 ref.beforeStarted.subscribe(function () {
3691 if (!ref.isDragging()) {
3692 var dir = _this._dir;
3693 var dragStartDelay = _this.dragStartDelay;
3694 var placeholder = _this._placeholderTemplate ? {
3695 template: _this._placeholderTemplate.templateRef,
3696 context: _this._placeholderTemplate.data,
3697 viewContainer: _this._viewContainerRef
3698 } : null;
3699 var preview = _this._previewTemplate ? {
3700 template: _this._previewTemplate.templateRef,
3701 context: _this._previewTemplate.data,
3702 matchSize: _this._previewTemplate.matchSize,
3703 viewContainer: _this._viewContainerRef
3704 } : null;
3705 ref.disabled = _this.disabled;
3706 ref.lockAxis = _this.lockAxis;
3707 ref.dragStartDelay = (typeof dragStartDelay === 'object' && dragStartDelay) ?
3708 dragStartDelay : coercion.coerceNumberProperty(dragStartDelay);
3709 ref.constrainPosition = _this.constrainPosition;
3710 ref.previewClass = _this.previewClass;
3711 ref
3712 .withBoundaryElement(_this._getBoundaryElement())
3713 .withPlaceholderTemplate(placeholder)
3714 .withPreviewTemplate(preview)
3715 .withPreviewContainer(_this.previewContainer || 'global');
3716 if (dir) {
3717 ref.withDirection(dir.value);
3718 }
3719 }
3720 });
3721 // This only needs to be resolved once.
3722 ref.beforeStarted.pipe(operators.take(1)).subscribe(function () {
3723 var _a, _b;
3724 // If we managed to resolve a parent through DI, use it.
3725 if (_this._parentDrag) {
3726 ref.withParent(_this._parentDrag._dragRef);
3727 return;
3728 }
3729 // Otherwise fall back to resolving the parent by looking up the DOM. This can happen if
3730 // the item was projected into another item by something like `ngTemplateOutlet`.
3731 var parent = _this.element.nativeElement.parentElement;
3732 while (parent) {
3733 // `classList` needs to be null checked, because IE doesn't have it on some elements.
3734 if ((_a = parent.classList) === null || _a === void 0 ? void 0 : _a.contains(DRAG_HOST_CLASS)) {
3735 ref.withParent(((_b = CdkDrag._dragInstances.find(function (drag) {
3736 return drag.element.nativeElement === parent;
3737 })) === null || _b === void 0 ? void 0 : _b._dragRef) || null);
3738 break;
3739 }
3740 parent = parent.parentElement;
3741 }
3742 });
3743 };
3744 /** Handles the events from the underlying `DragRef`. */
3745 CdkDrag.prototype._handleEvents = function (ref) {
3746 var _this = this;
3747 ref.started.subscribe(function () {
3748 _this.started.emit({ source: _this });
3749 // Since all of these events run outside of change detection,
3750 // we need to ensure that everything is marked correctly.
3751 _this._changeDetectorRef.markForCheck();
3752 });
3753 ref.released.subscribe(function () {
3754 _this.released.emit({ source: _this });
3755 });
3756 ref.ended.subscribe(function (event) {
3757 _this.ended.emit({
3758 source: _this,
3759 distance: event.distance,
3760 dropPoint: event.dropPoint
3761 });
3762 // Since all of these events run outside of change detection,
3763 // we need to ensure that everything is marked correctly.
3764 _this._changeDetectorRef.markForCheck();
3765 });
3766 ref.entered.subscribe(function (event) {
3767 _this.entered.emit({
3768 container: event.container.data,
3769 item: _this,
3770 currentIndex: event.currentIndex
3771 });
3772 });
3773 ref.exited.subscribe(function (event) {
3774 _this.exited.emit({
3775 container: event.container.data,
3776 item: _this
3777 });
3778 });
3779 ref.dropped.subscribe(function (event) {
3780 _this.dropped.emit({
3781 previousIndex: event.previousIndex,
3782 currentIndex: event.currentIndex,
3783 previousContainer: event.previousContainer.data,
3784 container: event.container.data,
3785 isPointerOverContainer: event.isPointerOverContainer,
3786 item: _this,
3787 distance: event.distance,
3788 dropPoint: event.dropPoint
3789 });
3790 });
3791 };
3792 /** Assigns the default input values based on a provided config object. */
3793 CdkDrag.prototype._assignDefaults = function (config) {
3794 var lockAxis = config.lockAxis, dragStartDelay = config.dragStartDelay, constrainPosition = config.constrainPosition, previewClass = config.previewClass, boundaryElement = config.boundaryElement, draggingDisabled = config.draggingDisabled, rootElementSelector = config.rootElementSelector, previewContainer = config.previewContainer;
3795 this.disabled = draggingDisabled == null ? false : draggingDisabled;
3796 this.dragStartDelay = dragStartDelay || 0;
3797 if (lockAxis) {
3798 this.lockAxis = lockAxis;
3799 }
3800 if (constrainPosition) {
3801 this.constrainPosition = constrainPosition;
3802 }
3803 if (previewClass) {
3804 this.previewClass = previewClass;
3805 }
3806 if (boundaryElement) {
3807 this.boundaryElement = boundaryElement;
3808 }
3809 if (rootElementSelector) {
3810 this.rootElementSelector = rootElementSelector;
3811 }
3812 if (previewContainer) {
3813 this.previewContainer = previewContainer;
3814 }
3815 };
3816 /** Sets up the listener that syncs the handles with the drag ref. */
3817 CdkDrag.prototype._setupHandlesListener = function () {
3818 var _this = this;
3819 // Listen for any newly-added handles.
3820 this._handles.changes.pipe(operators.startWith(this._handles),
3821 // Sync the new handles with the DragRef.
3822 operators.tap(function (handles) {
3823 var childHandleElements = handles
3824 .filter(function (handle) { return handle._parentDrag === _this; })
3825 .map(function (handle) { return handle.element; });
3826 // Usually handles are only allowed to be a descendant of the drag element, but if
3827 // the consumer defined a different drag root, we should allow the drag element
3828 // itself to be a handle too.
3829 if (_this._selfHandle && _this.rootElementSelector) {
3830 childHandleElements.push(_this.element);
3831 }
3832 _this._dragRef.withHandles(childHandleElements);
3833 }),
3834 // Listen if the state of any of the handles changes.
3835 operators.switchMap(function (handles) {
3836 return rxjs.merge.apply(void 0, __spreadArray([], __read(handles.map(function (item) {
3837 return item._stateChanges.pipe(operators.startWith(item));
3838 }))));
3839 }), operators.takeUntil(this._destroyed)).subscribe(function (handleInstance) {
3840 // Enabled/disable the handle that changed in the DragRef.
3841 var dragRef = _this._dragRef;
3842 var handle = handleInstance.element.nativeElement;
3843 handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
3844 });
3845 };
3846 return CdkDrag;
3847 }());
3848 CdkDrag._dragInstances = [];
3849 CdkDrag.decorators = [
3850 { type: i0.Directive, args: [{
3851 selector: '[cdkDrag]',
3852 exportAs: 'cdkDrag',
3853 host: {
3854 'class': DRAG_HOST_CLASS,
3855 '[class.cdk-drag-disabled]': 'disabled',
3856 '[class.cdk-drag-dragging]': '_dragRef.isDragging()',
3857 },
3858 providers: [{ provide: CDK_DRAG_PARENT, useExisting: CdkDrag }]
3859 },] }
3860 ];
3861 CdkDrag.ctorParameters = function () { return [
3862 { type: i0.ElementRef },
3863 { type: undefined, decorators: [{ type: i0.Inject, args: [CDK_DROP_LIST,] }, { type: i0.Optional }, { type: i0.SkipSelf }] },
3864 { type: undefined, decorators: [{ type: i0.Inject, args: [i1.DOCUMENT,] }] },
3865 { type: i0.NgZone },
3866 { type: i0.ViewContainerRef },
3867 { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [CDK_DRAG_CONFIG,] }] },
3868 { type: bidi.Directionality, decorators: [{ type: i0.Optional }] },
3869 { type: DragDrop },
3870 { type: i0.ChangeDetectorRef },
3871 { type: CdkDragHandle, decorators: [{ type: i0.Optional }, { type: i0.Self }, { type: i0.Inject, args: [CDK_DRAG_HANDLE,] }] },
3872 { type: CdkDrag, decorators: [{ type: i0.Optional }, { type: i0.SkipSelf }, { type: i0.Inject, args: [CDK_DRAG_PARENT,] }] }
3873 ]; };
3874 CdkDrag.propDecorators = {
3875 _handles: [{ type: i0.ContentChildren, args: [CDK_DRAG_HANDLE, { descendants: true },] }],
3876 _previewTemplate: [{ type: i0.ContentChild, args: [CDK_DRAG_PREVIEW,] }],
3877 _placeholderTemplate: [{ type: i0.ContentChild, args: [CDK_DRAG_PLACEHOLDER,] }],
3878 data: [{ type: i0.Input, args: ['cdkDragData',] }],
3879 lockAxis: [{ type: i0.Input, args: ['cdkDragLockAxis',] }],
3880 rootElementSelector: [{ type: i0.Input, args: ['cdkDragRootElement',] }],
3881 boundaryElement: [{ type: i0.Input, args: ['cdkDragBoundary',] }],
3882 dragStartDelay: [{ type: i0.Input, args: ['cdkDragStartDelay',] }],
3883 freeDragPosition: [{ type: i0.Input, args: ['cdkDragFreeDragPosition',] }],
3884 disabled: [{ type: i0.Input, args: ['cdkDragDisabled',] }],
3885 constrainPosition: [{ type: i0.Input, args: ['cdkDragConstrainPosition',] }],
3886 previewClass: [{ type: i0.Input, args: ['cdkDragPreviewClass',] }],
3887 previewContainer: [{ type: i0.Input, args: ['cdkDragPreviewContainer',] }],
3888 started: [{ type: i0.Output, args: ['cdkDragStarted',] }],
3889 released: [{ type: i0.Output, args: ['cdkDragReleased',] }],
3890 ended: [{ type: i0.Output, args: ['cdkDragEnded',] }],
3891 entered: [{ type: i0.Output, args: ['cdkDragEntered',] }],
3892 exited: [{ type: i0.Output, args: ['cdkDragExited',] }],
3893 dropped: [{ type: i0.Output, args: ['cdkDragDropped',] }],
3894 moved: [{ type: i0.Output, args: ['cdkDragMoved',] }]
3895 };
3896 /** Gets the closest ancestor of an element that matches a selector. */
3897 function getClosestMatchingAncestor(element, selector) {
3898 var currentElement = element.parentElement;
3899 while (currentElement) {
3900 // IE doesn't support `matches` so we have to fall back to `msMatchesSelector`.
3901 if (currentElement.matches ? currentElement.matches(selector) :
3902 currentElement.msMatchesSelector(selector)) {
3903 return currentElement;
3904 }
3905 currentElement = currentElement.parentElement;
3906 }
3907 return null;
3908 }
3909
3910 /**
3911 * @license
3912 * Copyright Google LLC All Rights Reserved.
3913 *
3914 * Use of this source code is governed by an MIT-style license that can be
3915 * found in the LICENSE file at https://angular.io/license
3916 */
3917 var DragDropModule = /** @class */ (function () {
3918 function DragDropModule() {
3919 }
3920 return DragDropModule;
3921 }());
3922 DragDropModule.decorators = [
3923 { type: i0.NgModule, args: [{
3924 declarations: [
3925 CdkDropList,
3926 CdkDropListGroup,
3927 CdkDrag,
3928 CdkDragHandle,
3929 CdkDragPreview,
3930 CdkDragPlaceholder,
3931 ],
3932 exports: [
3933 i2.CdkScrollableModule,
3934 CdkDropList,
3935 CdkDropListGroup,
3936 CdkDrag,
3937 CdkDragHandle,
3938 CdkDragPreview,
3939 CdkDragPlaceholder,
3940 ],
3941 providers: [
3942 DragDrop,
3943 ]
3944 },] }
3945 ];
3946
3947 /**
3948 * @license
3949 * Copyright Google LLC All Rights Reserved.
3950 *
3951 * Use of this source code is governed by an MIT-style license that can be
3952 * found in the LICENSE file at https://angular.io/license
3953 */
3954
3955 /**
3956 * Generated bundle index. Do not edit.
3957 */
3958
3959 exports.CDK_DRAG_CONFIG = CDK_DRAG_CONFIG;
3960 exports.CDK_DRAG_HANDLE = CDK_DRAG_HANDLE;
3961 exports.CDK_DRAG_PARENT = CDK_DRAG_PARENT;
3962 exports.CDK_DRAG_PLACEHOLDER = CDK_DRAG_PLACEHOLDER;
3963 exports.CDK_DRAG_PREVIEW = CDK_DRAG_PREVIEW;
3964 exports.CDK_DROP_LIST = CDK_DROP_LIST;
3965 exports.CDK_DROP_LIST_GROUP = CDK_DROP_LIST_GROUP;
3966 exports.CdkDrag = CdkDrag;
3967 exports.CdkDragHandle = CdkDragHandle;
3968 exports.CdkDragPlaceholder = CdkDragPlaceholder;
3969 exports.CdkDragPreview = CdkDragPreview;
3970 exports.CdkDropList = CdkDropList;
3971 exports.CdkDropListGroup = CdkDropListGroup;
3972 exports.DragDrop = DragDrop;
3973 exports.DragDropModule = DragDropModule;
3974 exports.DragDropRegistry = DragDropRegistry;
3975 exports.DragRef = DragRef;
3976 exports.DropListRef = DropListRef;
3977 exports.copyArrayItem = copyArrayItem;
3978 exports.moveItemInArray = moveItemInArray;
3979 exports.transferArrayItem = transferArrayItem;
3980
3981 Object.defineProperty(exports, '__esModule', { value: true });
3982
3983})));
3984//# sourceMappingURL=cdk-drag-drop.umd.js.map
Note: See TracBrowser for help on using the repository browser.