@angular/cdk 12.1.0 → 12.1.4

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,33 +63,38 @@
     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
      * that exited before the base transform was applied.
      */
     function combineTransforms(transform, initialTransform) {
-        return initialTransform ? (transform + ' ' + initialTransform) : transform;
+        return initialTransform && initialTransform != 'none' ?
+            (transform + ' ' + initialTransform) :
+            transform;
     }
 
     /**
@@ -216,7 +228,7 @@
         };
         /** Handles scrolling while a drag is taking place. */
         ParentPositionTracker.prototype.handleScroll = function (event) {
-            var target = getEventTarget(event);
+            var target = platform._getEventTarget(event);
             var cachedPosition = this.positions.get(target);
             if (!cachedPosition) {
                 return null;
@@ -252,10 +264,6 @@
         };
         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
@@ -340,6 +348,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.
      */
@@ -416,7 +429,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 = getEventTarget(event);
+                        var target = platform._getEventTarget(event);
                         return !!target && (target === handle || handle.contains(target));
                     });
                     if (targetHandle && !_this._disabledHandles.has(targetHandle) && !_this.disabled) {
@@ -831,7 +844,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.
@@ -864,9 +877,11 @@
             var isTouchSequence = isTouchEvent(event);
             var isAuxiliaryMouseButton = !isTouchSequence && event.button !== 0;
             var rootElement = this._rootElement;
-            var target = getEventTarget(event);
+            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
@@ -877,7 +892,7 @@
                 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,
@@ -920,7 +935,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();
@@ -1026,14 +1041,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);
@@ -1073,7 +1088,7 @@
             return this._ngZone.runOutsideAngular(function () {
                 return new Promise(function (resolve) {
                     var handler = (function (event) {
-                        if (!event || (getEventTarget(event) === _this._preview &&
+                        if (!event || (platform._getEventTarget(event) === _this._preview &&
                             event.propertyName === 'transform')) {
                             _this._preview.removeEventListener('transitionend', handler);
                             resolve();
@@ -1219,8 +1234,12 @@
             var transform = getTransform(x, y);
             // 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.
+            // Should be excluded none because none + translate3d(x, y, x) is invalid css
             if (this._initialTransform == null) {
-                this._initialTransform = this._rootElement.style.transform || '';
+                this._initialTransform = this._rootElement.style.transform
+                    && this._rootElement.style.transform != 'none'
+                    ? this._rootElement.style.transform
+                    : '';
             }
             // Preserve the previous `transform` value, if there was one. Note that we apply our own
             // transform before the user's, because things like rotation can affect which direction
@@ -1322,7 +1341,7 @@
         DragRef.prototype._updateOnScroll = function (event) {
             var scrollDifference = this._parentPositions.handleScroll(event);
             if (scrollDifference) {
-                var target = getEventTarget(event);
+                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.