@angular/cdk 12.1.0-next.1 → 12.1.2

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    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('rxjs'), require('rxjs/operators'), require('@angular/cdk/bidi')) :
-    typeof define === 'function' && define.amd ? define('@angular/cdk/drag-drop', ['exports', '@angular/core', '@angular/common', '@angular/cdk/scrolling', '@angular/cdk/platform', '@angular/cdk/coercion', 'rxjs', 'rxjs/operators', '@angular/cdk/bidi'], factory) :
-    (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.rxjs, global.rxjs.operators, global.ng.cdk.bidi));
-}(this, (function (exports, i0, i1, i2, platform, coercion, rxjs, operators, bidi) { 'use strict';
+    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')) :
+    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) :
+    (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));
+}(this, (function (exports, i0, i1, i2, platform, coercion, a11y, rxjs, operators, bidi) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -36,13 +36,20 @@
      * found in the LICENSE file at https://angular.io/license
      */
     /**
-     * Shallow-extends a stylesheet object with another stylesheet object.
+     * Shallow-extends a stylesheet object with another stylesheet-like object.
+     * Note that the keys in `source` have to be dash-cased.
      * @docs-private
      */
-    function extendStyles(dest, source) {
+    function extendStyles(dest, source, importantProperties) {
         for (var key in source) {
             if (source.hasOwnProperty(key)) {
-                dest[key] = source[key];
+                var value = source[key];
+                if (value) {
+                    dest.setProperty(key, value, (importantProperties === null || importantProperties === void 0 ? void 0 : importantProperties.has(key)) ? 'important' : '');
+                }
+                else {
+                    dest.removeProperty(key);
+                }
             }
         }
         return dest;
@@ -56,26 +63,29 @@
     function toggleNativeDragInteractions(element, enable) {
         var userSelect = enable ? '' : 'none';
         extendStyles(element.style, {
-            touchAction: enable ? '' : 'none',
-            webkitUserDrag: enable ? '' : 'none',
-            webkitTapHighlightColor: enable ? '' : 'transparent',
-            userSelect: userSelect,
-            msUserSelect: userSelect,
-            webkitUserSelect: userSelect,
-            MozUserSelect: userSelect
+            'touch-action': enable ? '' : 'none',
+            '-webkit-user-drag': enable ? '' : 'none',
+            '-webkit-tap-highlight-color': enable ? '' : 'transparent',
+            'user-select': userSelect,
+            '-ms-user-select': userSelect,
+            '-webkit-user-select': userSelect,
+            '-moz-user-select': userSelect
         });
     }
     /**
      * Toggles whether an element is visible while preserving its dimensions.
      * @param element Element whose visibility to toggle
      * @param enable Whether the element should be visible.
+     * @param importantProperties Properties to be set as `!important`.
      * @docs-private
      */
-    function toggleVisibility(element, enable) {
-        var styles = element.style;
-        styles.position = enable ? '' : 'fixed';
-        styles.top = styles.opacity = enable ? '' : '0';
-        styles.left = enable ? '' : '-999em';
+    function toggleVisibility(element, enable, importantProperties) {
+        extendStyles(element.style, {
+            position: enable ? '' : 'fixed',
+            top: enable ? '' : '0',
+            opacity: enable ? '' : '0',
+            left: enable ? '' : '-999em'
+        }, importantProperties);
     }
     /**
      * Combines a transform string with an optional other transform
@@ -216,7 +226,7 @@
         };
         /** Handles scrolling while a drag is taking place. */
         ParentPositionTracker.prototype.handleScroll = function (event) {
-            var target = event.target;
+            var target = platform._getEventTarget(event);
             var cachedPosition = this.positions.get(target);
             if (!cachedPosition) {
                 return null;
@@ -336,6 +346,11 @@
      * addition to touch events.
      */
     var MOUSE_EVENT_IGNORE_TIME = 800;
+    /** Inline styles to be set as `!important` while dragging. */
+    var dragImportantProperties = new Set([
+        // Needs to be important, because some `mat-table` sets `position: sticky !important`. See #22781.
+        'position'
+    ]);
     /**
      * Reference to a draggable item. Used to manipulate or dispose of the item.
      */
@@ -412,7 +427,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 = platform._getEventTarget(event);
                         return !!target && (target === handle || handle.contains(target));
                     });
                     if (targetHandle && !_this._disabledHandles.has(targetHandle) && !_this.disabled) {
@@ -827,7 +842,7 @@
                 // We move the element out at the end of the body and we make it hidden, because keeping it in
                 // place will throw off the consumer's `:last-child` selectors. We can't remove the element
                 // from the DOM completely, because iOS will stop firing all subsequent events in the chain.
-                toggleVisibility(element, false);
+                toggleVisibility(element, false, dragImportantProperties);
                 this._document.body.appendChild(parent.replaceChild(placeholder, element));
                 this._getPreviewInsertionPoint(parent, shadowRoot).appendChild(this._preview);
                 this.started.next({ source: this }); // Emit before notifying the container.
@@ -860,19 +875,22 @@
             var isTouchSequence = isTouchEvent(event);
             var isAuxiliaryMouseButton = !isTouchSequence && event.button !== 0;
             var rootElement = this._rootElement;
+            var target = platform._getEventTarget(event);
             var isSyntheticEvent = !isTouchSequence && this._lastTouchEventTime &&
                 this._lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now();
+            var isFakeEvent = isTouchSequence ? a11y.isFakeTouchstartFromScreenReader(event) :
+                a11y.isFakeMousedownFromScreenReader(event);
             // If the event started from an element with the native HTML drag&drop, it'll interfere
             // with our own dragging (e.g. `img` tags do it by default). Prevent the default action
             // to stop it from happening. Note that preventing on `dragstart` also seems to work, but
             // 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.
-            if (isDragging || isAuxiliaryMouseButton || isSyntheticEvent) {
+            if (isDragging || isAuxiliaryMouseButton || isSyntheticEvent || isFakeEvent) {
                 return;
             }
             // If we've got handles, we need to disable the tap highlight on the entire root element,
@@ -888,9 +906,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);
             }
@@ -915,7 +933,7 @@
             // It's important that we maintain the position, because moving the element around in the DOM
             // can throw off `NgFor` which does smart diffing and re-creates elements only when necessary,
             // while moving the existing elements in all other cases.
-            toggleVisibility(this._rootElement, true);
+            toggleVisibility(this._rootElement, true, dragImportantProperties);
             this._anchor.parentNode.replaceChild(this._rootElement, this._anchor);
             this._destroyPreview();
             this._destroyPlaceholder();
@@ -1021,14 +1039,14 @@
             extendStyles(preview.style, {
                 // It's important that we disable the pointer events on the preview, because
                 // it can throw off the `document.elementFromPoint` calls in the `CdkDropList`.
-                pointerEvents: 'none',
+                'pointer-events': 'none',
                 // We have to reset the margin, because it can throw off positioning relative to the viewport.
-                margin: '0',
-                position: 'fixed',
-                top: '0',
-                left: '0',
-                zIndex: "" + (this._config.zIndex || 1000)
-            });
+                'margin': '0',
+                'position': 'fixed',
+                'top': '0',
+                'left': '0',
+                'z-index': "" + (this._config.zIndex || 1000)
+            }, dragImportantProperties);
             toggleNativeDragInteractions(preview, false);
             preview.classList.add('cdk-drag-preview');
             preview.setAttribute('dir', this._direction);
@@ -1068,7 +1086,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 || (platform._getEventTarget(event) === _this._preview &&
+                            event.propertyName === 'transform')) {
                             _this._preview.removeEventListener('transitionend', handler);
                             resolve();
                             clearTimeout(timeout);
@@ -1316,7 +1335,7 @@
         DragRef.prototype._updateOnScroll = function (event) {
             var scrollDifference = this._parentPositions.handleScroll(event);
             if (scrollDifference) {
-                var target = event.target;
+                var target = platform._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.
@@ -2487,7 +2506,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) {
@@ -2653,13 +2674,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,
@@ -2700,7 +2714,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.
@@ -2823,6 +2841,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); });