@angular/cdk 7.0.0-rc.1 → 7.0.2

package/esm2015/drag-drop.js

@@ -7,7 +7,7 @@
  */
 import { Injectable, NgZone, Inject, ContentChildren, ElementRef, EventEmitter, forwardRef, Input, Output, Optional, Directive, ContentChild, InjectionToken, SkipSelf, ViewContainerRef, TemplateRef, NgModule, defineInjectable, inject } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-import { supportsPassiveEventListeners } from '@angular/cdk/platform';
+import { normalizePassiveListenerOptions, supportsPassiveEventListeners } from '@angular/cdk/platform';
 import { Subject, Observable, Subscription } from 'rxjs';
 import { Directionality } from '@angular/cdk/bidi';
 import { ViewportRuler } from '@angular/cdk/scrolling';
@@ -61,7 +61,7 @@ function toggleNativeDragInteractions(element, enable) {
 /** *
  * Event options that can be used to bind an active event.
   @type {?} */
-const activeEventOptions = supportsPassiveEventListeners() ? { passive: false } : false;
+const activeEventOptions = normalizePassiveListenerOptions({ passive: false });
 // unsupported: template constraints.
 /**
  * Service that keeps track of all the drag item and drop container
@@ -252,6 +252,18 @@ DragDropRegistry.ctorParameters = () => [
 ];
 /** @nocollapse */ DragDropRegistry.ngInjectableDef = defineInjectable({ factory: function DragDropRegistry_Factory() { return new DragDropRegistry(inject(NgZone), inject(DOCUMENT)); }, token: DragDropRegistry, providedIn: "root" });
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
+ */
+/** *
+ * Injection token that can be used for a `CdkDrag` to provide itself as a parent to the
+ * drag-specific child directive (`CdkDragHandle`, `CdkDragPreview` etc.). Used primarily
+ * to avoid circular imports.
+ * \@docs-private
+  @type {?} */
+const CDK_DRAG_PARENT = new InjectionToken('CDK_DRAG_PARENT');
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
@@ -262,9 +274,11 @@ DragDropRegistry.ctorParameters = () => [
 class CdkDragHandle {
     /**
      * @param {?} element
+     * @param {?=} parentDrag
      */
-    constructor(element) {
+    constructor(element, parentDrag) {
         this.element = element;
+        this._parentDrag = parentDrag;
         toggleNativeDragInteractions(element.nativeElement, false);
     }
 }
@@ -278,7 +292,8 @@ CdkDragHandle.decorators = [
 ];
 /** @nocollapse */
 CdkDragHandle.ctorParameters = () => [
-    { type: ElementRef }
+    { type: ElementRef },
+    { type: undefined, decorators: [{ type: Inject, args: [CDK_DRAG_PARENT,] }, { type: Optional }] }
 ];
 
 /**
@@ -346,10 +361,10 @@ CdkDragPreview.propDecorators = {
  * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
  */
 /** *
- * Injection token that is used to provide a CdkDrop instance to CdkDrag.
+ * Injection token that is used to provide a CdkDropList instance to CdkDrag.
  * Used for avoiding circular imports.
   @type {?} */
-const CDK_DROP_CONTAINER = new InjectionToken('CDK_DROP_CONTAINER');
+const CDK_DROP_LIST_CONTAINER = new InjectionToken('CDK_DROP_LIST_CONTAINER');
 
 /**
  * @fileoverview added by tsickle
@@ -421,8 +436,12 @@ const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFIG', {
 function CDK_DRAG_CONFIG_FACTORY() {
     return { dragStartThreshold: 5, pointerDirectionChangeThreshold: 5 };
 }
+/** *
+ * Options that can be used to bind a passive event listener.
+  @type {?} */
+const passiveEventListenerOptions = supportsPassiveEventListeners() ? /** @type {?} */ ({ passive: true }) : false;
 /**
- * Element that can be moved inside a CdkDrop container.
+ * Element that can be moved inside a CdkDropList container.
  * @template T
  */
 class CdkDrag {
@@ -512,10 +531,12 @@ class CdkDrag {
          * Handler for the `mousedown`/`touchstart` events.
          */
         this._pointerDown = (event) => {
+            /** @type {?} */
+            const handles = this._handles.filter(handle => handle._parentDrag === this);
             // Delegate the event based on whether it started from a handle or the element itself.
-            if (this._handles.length) {
+            if (handles.length) {
                 /** @type {?} */
-                const targetHandle = this._handles.find(handle => {
+                const targetHandle = handles.find(handle => {
                     /** @type {?} */
                     const element = handle.element.nativeElement;
                     /** @type {?} */
@@ -541,13 +562,11 @@ class CdkDrag {
                 const distanceX = Math.abs(pointerPosition.x - this._pickupPositionOnPage.x);
                 /** @type {?} */
                 const distanceY = Math.abs(pointerPosition.y - this._pickupPositionOnPage.y);
-                /** @type {?} */
-                const minimumDistance = this._config.dragStartThreshold;
                 // Only start dragging after the user has moved more than the minimum distance in either
                 // direction. Note that this is preferrable over doing something like `skip(minimumDistance)`
                 // in the `pointerMove` subscription, because we're not guaranteed to have one move event
                 // per pixel of movement (e.g. if the user moves their pointer quickly).
-                if (distanceX + distanceY >= minimumDistance) {
+                if (distanceX + distanceY >= this._config.dragStartThreshold) {
                     this._hasStartedDragging = true;
                     this._ngZone.run(() => this._startDragSequence());
                 }
@@ -566,7 +585,11 @@ class CdkDrag {
                     pointerPosition.x - this._pickupPositionOnPage.x + this._passiveTransform.x;
                 activeTransform.y =
                     pointerPosition.y - this._pickupPositionOnPage.y + this._passiveTransform.y;
-                this._setTransform(this._rootElement, activeTransform.x, activeTransform.y);
+                /** @type {?} */
+                const transform = getTransform(activeTransform.x, activeTransform.y);
+                // Preserve the previous `transform` value, if there was one.
+                this._rootElement.style.transform = this._initialTransform ?
+                    this._initialTransform + ' ' + transform : transform;
             }
             // Since this event gets fired for every pixel while dragging, we only
             // want to fire it if the consumer opted into it. Also we have to
@@ -634,8 +657,8 @@ class CdkDrag {
         this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
             /** @type {?} */
             const rootElement = this._rootElement = this._getRootElement();
-            rootElement.addEventListener('mousedown', this._pointerDown);
-            rootElement.addEventListener('touchstart', this._pointerDown);
+            rootElement.addEventListener('mousedown', this._pointerDown, passiveEventListenerOptions);
+            rootElement.addEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
             toggleNativeDragInteractions(rootElement, false);
         });
     }
@@ -643,8 +666,8 @@ class CdkDrag {
      * @return {?}
      */
     ngOnDestroy() {
-        this._rootElement.removeEventListener('mousedown', this._pointerDown);
-        this._rootElement.removeEventListener('touchstart', this._pointerDown);
+        this._rootElement.removeEventListener('mousedown', this._pointerDown, passiveEventListenerOptions);
+        this._rootElement.removeEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
         this._destroyPreview();
         this._destroyPlaceholder();
         // Do this check before removing from the registry since it'll
@@ -680,6 +703,11 @@ class CdkDrag {
         if (isDragging || (!this._isTouchEvent(event) && event.button !== 0)) {
             return;
         }
+        // Cache the previous transform amount only after the first drag sequence, because
+        // we don't want our own transforms to stack on top of each other.
+        if (this._initialTransform == null) {
+            this._initialTransform = this._rootElement.style.transform || '';
+        }
         this._hasStartedDragging = this._hasMoved = false;
         this._initialContainer = this.dropContainer;
         this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);
@@ -784,7 +812,8 @@ class CdkDrag {
             });
         }
         this.dropContainer._sortItem(this, x, y, this._pointerDirectionDelta);
-        this._setTransform(this._preview, x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
+        this._preview.style.transform =
+            getTransform(x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
     }
     /**
      * Creates the element that will be rendered next to the user's pointer
@@ -799,7 +828,8 @@ class CdkDrag {
             const viewRef = this._viewContainerRef.createEmbeddedView(this._previewTemplate.templateRef, this._previewTemplate.data);
             preview = viewRef.rootNodes[0];
             this._previewRef = viewRef;
-            this._setTransform(preview, this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);
+            preview.style.transform =
+                getTransform(this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);
         }
         else {
             /** @type {?} */
@@ -809,7 +839,7 @@ class CdkDrag {
             preview = /** @type {?} */ (element.cloneNode(true));
             preview.style.width = `${elementRect.width}px`;
             preview.style.height = `${elementRect.height}px`;
-            this._setTransform(preview, elementRect.left, elementRect.top);
+            preview.style.transform = getTransform(elementRect.left, elementRect.top);
         }
         extendStyles(preview.style, {
             position: 'fixed',
@@ -876,7 +906,7 @@ class CdkDrag {
         // Apply the class that adds a transition to the preview.
         this._preview.classList.add('cdk-drag-animating');
         // Move the preview to the placeholder position.
-        this._setTransform(this._preview, placeholderRect.left, placeholderRect.top);
+        this._preview.style.transform = getTransform(placeholderRect.left, placeholderRect.top);
         /** @type {?} */
         const duration = getTransformTransitionDurationInMs(this._preview);
         if (duration === 0) {
@@ -898,16 +928,6 @@ class CdkDrag {
             });
         });
     }
-    /**
-     * Sets the `transform` style on an element.
-     * @param {?} element Element on which to set the transform.
-     * @param {?} x Desired position of the element along the X axis.
-     * @param {?} y Desired position of the element along the Y axis.
-     * @return {?}
-     */
-    _setTransform(element, x, y) {
-        element.style.transform = `translate3d(${x}px, ${y}px, 0)`;
-    }
     /**
      * Helper to remove an element from the DOM and to do all the necessary null checks.
      * @param {?} element Element to be removed.
@@ -1049,13 +1069,17 @@ CdkDrag.decorators = [
                 host: {
                     'class': 'cdk-drag',
                     '[class.cdk-drag-dragging]': '_hasStartedDragging && _isDragging()',
-                }
+                },
+                providers: [{
+                        provide: CDK_DRAG_PARENT,
+                        useExisting: CdkDrag
+                    }]
             },] },
 ];
 /** @nocollapse */
 CdkDrag.ctorParameters = () => [
     { type: ElementRef },
-    { type: undefined, decorators: [{ type: Inject, args: [CDK_DROP_CONTAINER,] }, { type: Optional }, { type: SkipSelf }] },
+    { type: undefined, decorators: [{ type: Inject, args: [CDK_DROP_LIST_CONTAINER,] }, { type: Optional }, { type: SkipSelf }] },
     { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
     { type: NgZone },
     { type: ViewContainerRef },
@@ -1065,7 +1089,7 @@ CdkDrag.ctorParameters = () => [
     { type: Directionality, decorators: [{ type: Optional }] }
 ];
 CdkDrag.propDecorators = {
-    _handles: [{ type: ContentChildren, args: [CdkDragHandle,] }],
+    _handles: [{ type: ContentChildren, args: [CdkDragHandle, { descendants: true },] }],
     _previewTemplate: [{ type: ContentChild, args: [CdkDragPreview,] }],
     _placeholderTemplate: [{ type: ContentChild, args: [CdkDragPlaceholder,] }],
     data: [{ type: Input, args: ['cdkDragData',] }],
@@ -1078,6 +1102,15 @@ CdkDrag.propDecorators = {
     dropped: [{ type: Output, args: ['cdkDragDropped',] }],
     moved: [{ type: Output, args: ['cdkDragMoved',] }]
 };
+/**
+ * Gets a 3d `transform` that can be applied to an element.
+ * @param {?} x Desired position of the element along the X axis.
+ * @param {?} y Desired position of the element along the Y axis.
+ * @return {?}
+ */
+function getTransform(x, y) {
+    return `translate3d(${x}px, ${y}px, 0)`;
+}
 
 /**
  * @fileoverview added by tsickle
@@ -1127,6 +1160,24 @@ function transferArrayItem(currentArray, targetArray, currentIndex, targetIndex)
         targetArray.splice(to, 0, currentArray.splice(from, 1)[0]);
     }
 }
+/**
+ * Copies an item from one array to another, leaving it in its
+ * original position in current array.
+ * @template T
+ * @param {?} currentArray Array from which to copy the item.
+ * @param {?} targetArray Array into which is copy the item.
+ * @param {?} currentIndex Index of the item in its current array.
+ * @param {?} targetIndex Index at which to insert the item.
+ *
+ * @return {?}
+ */
+function copyArrayItem(currentArray, targetArray, currentIndex, targetIndex) {
+    /** @type {?} */
+    const to = clamp(targetIndex, targetArray.length);
+    if (currentArray.length) {
+        targetArray.splice(to, 0, currentArray[currentIndex]);
+    }
+}
 /**
  * Clamps a number between zero and a maximum.
  * @param {?} value
@@ -1154,7 +1205,7 @@ const DROP_PROXIMITY_THRESHOLD = 0.05;
  * Container that wraps a set of draggable items.
  * @template T
  */
-class CdkDrop {
+class CdkDropList {
     /**
      * @param {?} element
      * @param {?} _dragDropRegistry
@@ -1176,9 +1227,9 @@ class CdkDrop {
         this.orientation = 'vertical';
         /**
          * Unique ID for the drop zone. Can be used as a reference
-         * in the `connectedTo` of another `CdkDrop`.
+         * in the `connectedTo` of another `CdkDropList`.
          */
-        this.id = `cdk-drop-${_uniqueIdCounter++}`;
+        this.id = `cdk-drop-list-${_uniqueIdCounter++}`;
         /**
          * Function that is used to determine whether an item
          * is allowed to be moved into a drop container.
@@ -1402,7 +1453,7 @@ class CdkDrop {
         /** @type {?} */
         const result = this._positionCache.siblings
             .find(sibling => isInsideClientRect(sibling.clientRect, x, y));
-        return result && result.drop.enterPredicate(item, this) ? result.drop : null;
+        return result && result.drop.enterPredicate(item, result.drop) ? result.drop : null;
     }
     /**
      * Checks whether an item that started in this container can be returned to it,
@@ -1535,37 +1586,37 @@ class CdkDrop {
             pointerX > left - xThreshold && pointerX < right + xThreshold;
     }
 }
-CdkDrop.decorators = [
+CdkDropList.decorators = [
     { type: Directive, args: [{
-                selector: '[cdkDrop], cdk-drop',
-                exportAs: 'cdkDrop',
+                selector: '[cdkDropList], cdk-drop-list',
+                exportAs: 'cdkDropList',
                 providers: [
-                    { provide: CDK_DROP_CONTAINER, useExisting: CdkDrop },
+                    { provide: CDK_DROP_LIST_CONTAINER, useExisting: CdkDropList },
                 ],
                 host: {
-                    'class': 'cdk-drop',
+                    'class': 'cdk-drop-list',
                     '[id]': 'id',
-                    '[class.cdk-drop-dragging]': '_dragging'
+                    '[class.cdk-drop-list-dragging]': '_dragging'
                 }
             },] },
 ];
 /** @nocollapse */
-CdkDrop.ctorParameters = () => [
+CdkDropList.ctorParameters = () => [
     { type: ElementRef },
     { type: DragDropRegistry },
     { type: Directionality, decorators: [{ type: Optional }] }
 ];
-CdkDrop.propDecorators = {
+CdkDropList.propDecorators = {
     _draggables: [{ type: ContentChildren, args: [forwardRef(() => CdkDrag),] }],
-    connectedTo: [{ type: Input, args: ['cdkDropConnectedTo',] }],
-    data: [{ type: Input, args: ['cdkDropData',] }],
-    orientation: [{ type: Input, args: ['cdkDropOrientation',] }],
+    connectedTo: [{ type: Input, args: ['cdkDropListConnectedTo',] }],
+    data: [{ type: Input, args: ['cdkDropListData',] }],
+    orientation: [{ type: Input, args: ['cdkDropListOrientation',] }],
     id: [{ type: Input }],
-    lockAxis: [{ type: Input, args: ['cdkDropLockAxis',] }],
-    enterPredicate: [{ type: Input, args: ['cdkDropEnterPredication',] }],
-    dropped: [{ type: Output, args: ['cdkDropDropped',] }],
-    entered: [{ type: Output, args: ['cdkDropEntered',] }],
-    exited: [{ type: Output, args: ['cdkDropExited',] }]
+    lockAxis: [{ type: Input, args: ['cdkDropListLockAxis',] }],
+    enterPredicate: [{ type: Input, args: ['cdkDropListEnterPredicate',] }],
+    dropped: [{ type: Output, args: ['cdkDropListDropped',] }],
+    entered: [{ type: Output, args: ['cdkDropListEntered',] }],
+    exited: [{ type: Output, args: ['cdkDropListExited',] }]
 };
 /**
  * Finds the index of an item that matches a predicate function. Used as an equivalent
@@ -1604,14 +1655,14 @@ class DragDropModule {
 DragDropModule.decorators = [
     { type: NgModule, args: [{
                 declarations: [
-                    CdkDrop,
+                    CdkDropList,
                     CdkDrag,
                     CdkDragHandle,
                     CdkDragPreview,
                     CdkDragPlaceholder,
                 ],
                 exports: [
-                    CdkDrop,
+                    CdkDropList,
                     CdkDrag,
                     CdkDragHandle,
                     CdkDragPreview,
@@ -1630,5 +1681,5 @@ DragDropModule.decorators = [
  * @suppress {checkTypes,extraRequire,uselessCode} checked by tsc
  */
 
-export { CdkDrop, CDK_DROP_CONTAINER, CDK_DRAG_CONFIG_FACTORY, CDK_DRAG_CONFIG, CdkDrag, CdkDragHandle, moveItemInArray, transferArrayItem, CdkDragPreview, CdkDragPlaceholder, DragDropModule, DragDropRegistry };
+export { CdkDropList, CDK_DROP_LIST_CONTAINER, CDK_DRAG_CONFIG_FACTORY, CDK_DRAG_CONFIG, CdkDrag, CdkDragHandle, moveItemInArray, transferArrayItem, copyArrayItem, CdkDragPreview, CdkDragPlaceholder, DragDropModule, DragDropRegistry, CDK_DRAG_PARENT as ɵa };
 //# sourceMappingURL=drag-drop.js.map