@angular/cdk 12.1.0-next.0 → 12.1.1

package/fesm2015/cdk.js

@@ -8,7 +8,7 @@ import { Version } from '@angular/core';
  * found in the LICENSE file at https://angular.io/license
  */
 /** Current version of the Angular Component Development Kit. */
-const VERSION = new Version('12.1.0-next.0');
+const VERSION = new Version('12.1.1');
 
 /**
  * @license

package/fesm2015/cdk.js.map

@@ -1 +1 @@
-{"version":3,"file":"cdk.js","sources":["../../../../../../src/cdk/version.ts","../../../../../../src/cdk/public-api.ts","../../../../../../src/cdk/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Angular Component Development Kit. */\nexport const VERSION = new Version('12.1.0-next.0');\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './version';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;;;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;ACXtD;;;;;;;;ACAA;;;;;;;;;;"}
+{"version":3,"file":"cdk.js","sources":["../../../../../../src/cdk/version.ts","../../../../../../src/cdk/public-api.ts","../../../../../../src/cdk/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Version} from '@angular/core';\n\n/** Current version of the Angular Component Development Kit. */\nexport const VERSION = new Version('12.1.1');\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './version';\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;;;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;ACXtD;;;;;;;;ACAA;;;;;;;;;;"}

package/fesm2015/drag-drop.js

@@ -197,7 +197,7 @@ class ParentPositionTracker {
     }
     /** Handles scrolling while a drag is taking place. */
     handleScroll(event) {
-        const target = event.target;
+        const target = getEventTarget(event);
         const cachedPosition = this.positions.get(target);
         if (!cachedPosition) {
             return null;
@@ -232,6 +232,10 @@ class ParentPositionTracker {
         return { top: topDifference, left: leftDifference };
     }
 }
+/** Gets the target of an event while accounting for shadow dom. */
+function getEventTarget(event) {
+    return (event.composedPath ? event.composedPath()[0] : event.target);
+}
 
 /**
  * @license
@@ -335,6 +339,11 @@ class DragRef {
         this._passiveTransform = { x: 0, y: 0 };
         /** CSS `transform` that is applied to the element while it's being dragged. */
         this._activeTransform = { x: 0, y: 0 };
+        /**
+         * Whether the dragging sequence has been started. Doesn't
+         * necessarily mean that the element has been moved.
+         */
+        this._hasStartedDragging = false;
         /** Emits when the item is being moved. */
         this._moveEvents = new Subject();
         /** Subscription to pointer movement events. */
@@ -386,7 +395,7 @@ class DragRef {
             // Delegate the event based on whether it started from a handle or the element itself.
             if (this._handles.length) {
                 const targetHandle = this._handles.find(handle => {
-                    const target = event.target;
+                    const target = getEventTarget(event);
                     return !!target && (target === handle || handle.contains(target));
                 });
                 if (targetHandle && !this._disabledHandles.has(targetHandle) && !this.disabled) {
@@ -825,6 +834,7 @@ class DragRef {
         const isTouchSequence = isTouchEvent(event);
         const isAuxiliaryMouseButton = !isTouchSequence && event.button !== 0;
         const rootElement = this._rootElement;
+        const target = getEventTarget(event);
         const isSyntheticEvent = !isTouchSequence && this._lastTouchEventTime &&
             this._lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now();
         // If the event started from an element with the native HTML drag&drop, it'll interfere
@@ -833,7 +843,7 @@ class DragRef {
         // it's flaky and it fails if the user drags it away quickly. Also note that we only want
         // to do this for `mousedown` since doing the same for `touchstart` will stop any `click`
         // events from firing on touch devices.
-        if (event.target && event.target.draggable && event.type === 'mousedown') {
+        if (target && target.draggable && event.type === 'mousedown') {
             event.preventDefault();
         }
         // Abort if the user is already dragging or is using a mouse button other than the primary one.
@@ -853,9 +863,9 @@ class DragRef {
         this._removeSubscriptions();
         this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);
         this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);
-        this._scrollSubscription = this._dragDropRegistry.scroll.subscribe(scrollEvent => {
-            this._updateOnScroll(scrollEvent);
-        });
+        this._scrollSubscription = this._dragDropRegistry
+            .scrolled(this._getShadowRoot())
+            .subscribe(scrollEvent => this._updateOnScroll(scrollEvent));
         if (this._boundaryElement) {
             this._boundaryRect = getMutableClientRect(this._boundaryElement);
         }
@@ -939,9 +949,12 @@ class DragRef {
                 });
             });
         }
-        this._dropContainer._startScrollingIfNecessary(rawX, rawY);
-        this._dropContainer._sortItem(this, x, y, this._pointerDirectionDelta);
-        this._applyPreviewTransform(x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
+        // Dragging may have been interrupted as a result of the events above.
+        if (this.isDragging()) {
+            this._dropContainer._startScrollingIfNecessary(rawX, rawY);
+            this._dropContainer._sortItem(this, x, y, this._pointerDirectionDelta);
+            this._applyPreviewTransform(x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);
+        }
     }
     /**
      * Creates the element that will be rendered next to the user's pointer
@@ -1025,7 +1038,8 @@ class DragRef {
         return this._ngZone.runOutsideAngular(() => {
             return new Promise(resolve => {
                 const handler = ((event) => {
-                    if (!event || (event.target === this._preview && event.propertyName === 'transform')) {
+                    if (!event || (getEventTarget(event) === this._preview &&
+                        event.propertyName === 'transform')) {
                         this._preview.removeEventListener('transitionend', handler);
                         resolve();
                         clearTimeout(timeout);
@@ -1273,7 +1287,7 @@ class DragRef {
     _updateOnScroll(event) {
         const scrollDifference = this._parentPositions.handleScroll(event);
         if (scrollDifference) {
-            const target = event.target;
+            const target = getEventTarget(event);
             // ClientRect dimensions are based on the scroll position of the page and its parent node so
             // we have to update the cached boundary ClientRect if the user has scrolled. Check for
             // the `document` specifically since IE doesn't support `contains` on it.
@@ -2129,7 +2143,9 @@ class DropListRef {
      * Used for updating the internal state of the list.
      */
     _listenToScrollEvents() {
-        this._viewportScrollSubscription = this._dragDropRegistry.scroll.subscribe(event => {
+        this._viewportScrollSubscription = this._dragDropRegistry
+            .scrolled(this._getShadowRoot())
+            .subscribe(event => {
             if (this.isDragging()) {
                 const scrollDifference = this._parentPositions.handleScroll(event);
                 if (scrollDifference) {
@@ -2337,7 +2353,11 @@ class DragDropRegistry {
          * while the user is dragging a drag item instance.
          */
         this.pointerUp = new Subject();
-        /** Emits when the viewport has been scrolled while the user is dragging an item. */
+        /**
+         * Emits when the viewport has been scrolled while the user is dragging an item.
+         * @deprecated To be turned into a private member. Use the `scrolled` method instead.
+         * @breaking-change 13.0.0
+         */
         this.scroll = new Subject();
         /**
          * Event listener that will prevent the default browser action while the user is dragging.
@@ -2458,6 +2478,36 @@ class DragDropRegistry {
     isDragging(drag) {
         return this._activeDragInstances.indexOf(drag) > -1;
     }
+    /**
+     * Gets a stream that will emit when any element on the page is scrolled while an item is being
+     * dragged.
+     * @param shadowRoot Optional shadow root that the current dragging sequence started from.
+     *   Top-level listeners won't pick up events coming from the shadow DOM so this parameter can
+     *   be used to include an additional top-level listener at the shadow root level.
+     */
+    scrolled(shadowRoot) {
+        const streams = [this.scroll];
+        if (shadowRoot && shadowRoot !== this._document) {
+            // Note that this is basically the same as `fromEvent` from rjxs, but we do it ourselves,
+            // because we want to guarantee that the event is bound outside of the `NgZone`. With
+            // `fromEvent` it'll only happen if the subscription is outside the `NgZone`.
+            streams.push(new Observable((observer) => {
+                return this._ngZone.runOutsideAngular(() => {
+                    const eventOptions = true;
+                    const callback = (event) => {
+                        if (this._activeDragInstances.length) {
+                            observer.next(event);
+                        }
+                    };
+                    shadowRoot.addEventListener('scroll', callback, eventOptions);
+                    return () => {
+                        shadowRoot.removeEventListener('scroll', callback, eventOptions);
+                    };
+                });
+            }));
+        }
+        return merge(...streams);
+    }
     ngOnDestroy() {
         this._dragInstances.forEach(instance => this.removeDragItem(instance));
         this._dropInstances.forEach(instance => this.removeDropContainer(instance));