@angular/cdk 12.1.3 → 12.2.1

package/fesm2015/drag-drop.js

@@ -75,7 +75,9 @@ function toggleVisibility(element, enable, importantProperties) {
  * that exited before the base transform was applied.
  */
 function combineTransforms(transform, initialTransform) {
-    return initialTransform ? (transform + ' ' + initialTransform) : transform;
+    return initialTransform && initialTransform != 'none' ?
+        (transform + ' ' + initialTransform) :
+        transform;
 }
 
 /**
@@ -1198,8 +1200,12 @@ class DragRef {
         const 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
@@ -3228,43 +3234,22 @@ class CdkDrag {
         return this._dragRef.getFreeDragPosition();
     }
     ngAfterViewInit() {
-        // We need to wait for the zone to stabilize, in order for the reference
-        // element to be in the proper place in the DOM. This is mostly relevant
-        // for draggable elements inside portals since they get stamped out in
-        // their original DOM position and then they get transferred to the portal.
-        this._ngZone.onStable
-            .pipe(take(1), takeUntil(this._destroyed))
-            .subscribe(() => {
-            this._updateRootElement();
-            // Listen for any newly-added handles.
-            this._handles.changes.pipe(startWith(this._handles), 
-            // Sync the new handles with the DragRef.
-            tap((handles) => {
-                const childHandleElements = handles
-                    .filter(handle => handle._parentDrag === this)
-                    .map(handle => handle.element);
-                // Usually handles are only allowed to be a descendant of the drag element, but if
-                // the consumer defined a different drag root, we should allow the drag element
-                // itself to be a handle too.
-                if (this._selfHandle && this.rootElementSelector) {
-                    childHandleElements.push(this.element);
+        // Normally this isn't in the zone, but it can cause major performance regressions for apps
+        // using `zone-patch-rxjs` because it'll trigger a change detection when it unsubscribes.
+        this._ngZone.runOutsideAngular(() => {
+            // We need to wait for the zone to stabilize, in order for the reference
+            // element to be in the proper place in the DOM. This is mostly relevant
+            // for draggable elements inside portals since they get stamped out in
+            // their original DOM position and then they get transferred to the portal.
+            this._ngZone.onStable
+                .pipe(take(1), takeUntil(this._destroyed))
+                .subscribe(() => {
+                this._updateRootElement();
+                this._setupHandlesListener();
+                if (this.freeDragPosition) {
+                    this._dragRef.setFreeDragPosition(this.freeDragPosition);
                 }
-                this._dragRef.withHandles(childHandleElements);
-            }), 
-            // Listen if the state of any of the handles changes.
-            switchMap((handles) => {
-                return merge(...handles.map(item => {
-                    return item._stateChanges.pipe(startWith(item));
-                }));
-            }), takeUntil(this._destroyed)).subscribe(handleInstance => {
-                // Enabled/disable the handle that changed in the DragRef.
-                const dragRef = this._dragRef;
-                const handle = handleInstance.element.nativeElement;
-                handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
             });
-            if (this.freeDragPosition) {
-                this._dragRef.setFreeDragPosition(this.freeDragPosition);
-            }
         });
     }
     ngOnChanges(changes) {
@@ -3288,9 +3273,12 @@ class CdkDrag {
         if (index > -1) {
             CdkDrag._dragInstances.splice(index, 1);
         }
-        this._destroyed.next();
-        this._destroyed.complete();
-        this._dragRef.dispose();
+        // Unnecessary in most cases, but used to avoid extra change detections with `zone-paths-rxjs`.
+        this._ngZone.runOutsideAngular(() => {
+            this._destroyed.next();
+            this._destroyed.complete();
+            this._dragRef.dispose();
+        });
     }
     /** Syncs the root element with the `DragRef`. */
     _updateRootElement() {
@@ -3445,6 +3433,35 @@ class CdkDrag {
             this.previewContainer = previewContainer;
         }
     }
+    /** Sets up the listener that syncs the handles with the drag ref. */
+    _setupHandlesListener() {
+        // Listen for any newly-added handles.
+        this._handles.changes.pipe(startWith(this._handles), 
+        // Sync the new handles with the DragRef.
+        tap((handles) => {
+            const childHandleElements = handles
+                .filter(handle => handle._parentDrag === this)
+                .map(handle => handle.element);
+            // Usually handles are only allowed to be a descendant of the drag element, but if
+            // the consumer defined a different drag root, we should allow the drag element
+            // itself to be a handle too.
+            if (this._selfHandle && this.rootElementSelector) {
+                childHandleElements.push(this.element);
+            }
+            this._dragRef.withHandles(childHandleElements);
+        }), 
+        // Listen if the state of any of the handles changes.
+        switchMap((handles) => {
+            return merge(...handles.map(item => {
+                return item._stateChanges.pipe(startWith(item));
+            }));
+        }), takeUntil(this._destroyed)).subscribe(handleInstance => {
+            // Enabled/disable the handle that changed in the DragRef.
+            const dragRef = this._dragRef;
+            const handle = handleInstance.element.nativeElement;
+            handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle);
+        });
+    }
 }
 CdkDrag._dragInstances = [];
 CdkDrag.decorators = [