@angular/cdk 12.0.2 → 12.0.6

package/a11y/_index.scss

@@ -1,4 +1,6 @@
-@mixin a11y-visually-hidden {
+/// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element
+/// to make that element visually hidden while remaining available to assitive technology.
+@mixin a11y-visually-hidden() {
   .cdk-visually-hidden {
     border: 0;
     clip: rect(0 0 0 0);
@@ -22,14 +24,14 @@
   }
 }
 
-// @deprecated Use `a11y-visually-hidden`.
-@mixin a11y {
+/// @deprecated Use `a11y-visually-hidden`.
+@mixin a11y() {
   @include a11y-visually-hidden;
 }
 
 /// Emits the mixin's content nested under `$selector-context` if `$selector-context`
 /// is non-empty.
-/// @param selector-context The selector under which to nest the mixin's content.
+/// @param {String} selector-context The selector under which to nest the mixin's content.
 @mixin _optionally-nest-content($selector-context) {
   @if ($selector-context == '') {
     @content;
@@ -45,9 +47,9 @@
 /// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
 /// attribute, however Chrome handles high contrast differently.
 ///
-/// @param target Which kind of high contrast setting to target. Defaults to `active`, can be
-///    `white-on-black` or `black-on-white`.
-/// @param encapsulation Whether to emit styles for view encapsulation. Values are:
+/// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be
+///     `white-on-black` or `black-on-white`.
+/// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are:
 ///     * `on` - works for `Emulated`, `Native`, and `ShadowDom`
 ///     * `off` - works for `None`
 ///     * `any` - works for all encapsulation modes by emitting the CSS twice (default).

package/bundles/cdk-drag-drop.umd.js

@@ -216,7 +216,7 @@
         };
         /** Handles scrolling while a drag is taking place. */
         ParentPositionTracker.prototype.handleScroll = function (event) {
-            var target = event.target;
+            var target = getEventTarget(event);
             var cachedPosition = this.positions.get(target);
             if (!cachedPosition) {
                 return null;
@@ -252,6 +252,10 @@
         };
         return ParentPositionTracker;
     }());
+    /** Gets the target of an event while accounting for shadow dom. */
+    function getEventTarget(event) {
+        return (event.composedPath ? event.composedPath()[0] : event.target);
+    }
 
     /**
      * @license
@@ -356,6 +360,11 @@
             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 rxjs.Subject();
             /** Subscription to pointer movement events. */
@@ -407,7 +416,7 @@
                 // Delegate the event based on whether it started from a handle or the element itself.
                 if (_this._handles.length) {
                     var targetHandle = _this._handles.find(function (handle) {
-                        var target = event.target;
+                        var target = getEventTarget(event);
                         return !!target && (target === handle || handle.contains(target));
                     });
                     if (targetHandle && !_this._disabledHandles.has(targetHandle) && !_this.disabled) {
@@ -855,6 +864,7 @@
             var isTouchSequence = isTouchEvent(event);
             var isAuxiliaryMouseButton = !isTouchSequence && event.button !== 0;
             var rootElement = this._rootElement;
+            var target = getEventTarget(event);
             var 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
@@ -863,7 +873,7 @@
             // 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.
@@ -883,9 +893,9 @@
             this._removeSubscriptions();
             this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);
             this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);
-            this._scrollSubscription = this._dragDropRegistry.scroll.subscribe(function (scrollEvent) {
-                _this._updateOnScroll(scrollEvent);
-            });
+            this._scrollSubscription = this._dragDropRegistry
+                .scrolled(this._getShadowRoot())
+                .subscribe(function (scrollEvent) { return _this._updateOnScroll(scrollEvent); });
             if (this._boundaryElement) {
                 this._boundaryRect = getMutableClientRect(this._boundaryElement);
             }
@@ -973,9 +983,12 @@
                     });
                 });
             }
-            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
@@ -1060,7 +1073,8 @@
             return this._ngZone.runOutsideAngular(function () {
                 return new Promise(function (resolve) {
                     var handler = (function (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);
@@ -1308,7 +1322,7 @@
         DragRef.prototype._updateOnScroll = function (event) {
             var scrollDifference = this._parentPositions.handleScroll(event);
             if (scrollDifference) {
-                var target = event.target;
+                var 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.
@@ -2476,7 +2490,9 @@
          */
         DropListRef.prototype._listenToScrollEvents = function () {
             var _this = this;
-            this._viewportScrollSubscription = this._dragDropRegistry.scroll.subscribe(function (event) {
+            this._viewportScrollSubscription = this._dragDropRegistry
+                .scrolled(this._getShadowRoot())
+                .subscribe(function (event) {
                 if (_this.isDragging()) {
                     var scrollDifference_1 = _this._parentPositions.handleScroll(event);
                     if (scrollDifference_1) {
@@ -2642,13 +2658,6 @@
         return [verticalScrollDirection, horizontalScrollDirection];
     }
 
-    /**
-     * @license
-     * Copyright Google LLC All Rights Reserved.
-     *
-     * Use of this source code is governed by an MIT-style license that can be
-     * found in the LICENSE file at https://angular.io/license
-     */
     /** Event options that can be used to bind an active, capturing event. */
     var activeCapturingEventOptions = platform.normalizePassiveListenerOptions({
         passive: false,
@@ -2689,7 +2698,11 @@
              * while the user is dragging a drag item instance.
              */
             this.pointerUp = new rxjs.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 rxjs.Subject();
             /**
              * Event listener that will prevent the default browser action while the user is dragging.
@@ -2812,6 +2825,37 @@
         DragDropRegistry.prototype.isDragging = function (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.
+         */
+        DragDropRegistry.prototype.scrolled = function (shadowRoot) {
+            var _this = this;
+            var 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 rxjs.Observable(function (observer) {
+                    return _this._ngZone.runOutsideAngular(function () {
+                        var eventOptions = true;
+                        var callback = function (event) {
+                            if (_this._activeDragInstances.length) {
+                                observer.next(event);
+                            }
+                        };
+                        shadowRoot.addEventListener('scroll', callback, eventOptions);
+                        return function () {
+                            shadowRoot.removeEventListener('scroll', callback, eventOptions);
+                        };
+                    });
+                }));
+            }
+            return rxjs.merge.apply(void 0, __spreadArray([], __read(streams)));
+        };
         DragDropRegistry.prototype.ngOnDestroy = function () {
             var _this = this;
             this._dragInstances.forEach(function (instance) { return _this.removeDragItem(instance); });