@angular/cdk 12.1.0-next.1 → 12.1.2

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.1');
+const VERSION = new Version('12.1.2');
 
 /**
  * @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.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;;;;;;;;;;"}
+{"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.2');\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

@@ -4,8 +4,9 @@ import * as i1 from '@angular/common';
 import { DOCUMENT } from '@angular/common';
 import * as i2 from '@angular/cdk/scrolling';
 import { ViewportRuler, ScrollDispatcher, CdkScrollableModule } from '@angular/cdk/scrolling';
-import { normalizePassiveListenerOptions, _getShadowRoot } from '@angular/cdk/platform';
+import { _getEventTarget, normalizePassiveListenerOptions, _getShadowRoot } from '@angular/cdk/platform';
 import { coerceBooleanProperty, coerceElement, coerceArray, coerceNumberProperty } from '@angular/cdk/coercion';
+import { isFakeTouchstartFromScreenReader, isFakeMousedownFromScreenReader } from '@angular/cdk/a11y';
 import { Subject, Subscription, interval, animationFrameScheduler, Observable, merge } from 'rxjs';
 import { takeUntil, startWith, map, take, tap, switchMap } from 'rxjs/operators';
 import { Directionality } from '@angular/cdk/bidi';
@@ -18,13 +19,20 @@ import { Directionality } from '@angular/cdk/bidi';
  * 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 (let key in source) {
         if (source.hasOwnProperty(key)) {
-            dest[key] = source[key];
+            const 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;
@@ -38,26 +46,29 @@ function extendStyles(dest, source) {
 function toggleNativeDragInteractions(element, enable) {
     const 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) {
-    const 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
@@ -197,7 +208,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;
@@ -316,6 +327,11 @@ const activeEventListenerOptions = normalizePassiveListenerOptions({ passive: fa
  * addition to touch events.
  */
 const MOUSE_EVENT_IGNORE_TIME = 800;
+/** Inline styles to be set as `!important` while dragging. */
+const 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.
  */
@@ -391,7 +407,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) {
@@ -798,7 +814,7 @@ class DragRef {
             // 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.
@@ -830,19 +846,22 @@ 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();
+        const isFakeEvent = isTouchSequence ? isFakeTouchstartFromScreenReader(event) :
+            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,
@@ -858,9 +877,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);
         }
@@ -884,7 +903,7 @@ class DragRef {
         // 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();
@@ -987,14 +1006,14 @@ class DragRef {
         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);
@@ -1033,7 +1052,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);
@@ -1281,7 +1301,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.
@@ -2137,7 +2157,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) {
@@ -2345,7 +2367,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.
@@ -2466,6 +2492,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));