@angular/cdk 12.1.0 → 12.1.4

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');
+const VERSION = new Version('12.1.4');
 
 /**
  * @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');\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.4');\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,33 +46,38 @@ 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
  * that exited before the base transform was applied.
  */
 function combineTransforms(transform, initialTransform) {
-    return initialTransform ? (transform + ' ' + initialTransform) : transform;
+    return initialTransform && initialTransform != 'none' ?
+        (transform + ' ' + initialTransform) :
+        transform;
 }
 
 /**
@@ -197,7 +210,7 @@ class ParentPositionTracker {
     }
     /** Handles scrolling while a drag is taking place. */
     handleScroll(event) {
-        const target = getEventTarget(event);
+        const target = _getEventTarget(event);
         const cachedPosition = this.positions.get(target);
         if (!cachedPosition) {
             return null;
@@ -232,10 +245,6 @@ class ParentPositionTracker {
         return { top: topDifference, left: leftDifference };
     }
 }
-/** Gets the target of an event while accounting for shadow dom. */
-function getEventTarget(event) {
-    return (event.composedPath ? event.composedPath()[0] : event.target);
-}
 
 /**
  * @license
@@ -320,6 +329,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.
  */
@@ -395,7 +409,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 = getEventTarget(event);
+                    const target = _getEventTarget(event);
                     return !!target && (target === handle || handle.contains(target));
                 });
                 if (targetHandle && !this._disabledHandles.has(targetHandle) && !this.disabled) {
@@ -802,7 +816,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.
@@ -834,9 +848,11 @@ class DragRef {
         const isTouchSequence = isTouchEvent(event);
         const isAuxiliaryMouseButton = !isTouchSequence && event.button !== 0;
         const rootElement = this._rootElement;
-        const target = getEventTarget(event);
+        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
@@ -847,7 +863,7 @@ class DragRef {
             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,
@@ -889,7 +905,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();
@@ -992,14 +1008,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);
@@ -1038,7 +1054,7 @@ class DragRef {
         return this._ngZone.runOutsideAngular(() => {
             return new Promise(resolve => {
                 const handler = ((event) => {
-                    if (!event || (getEventTarget(event) === this._preview &&
+                    if (!event || (_getEventTarget(event) === this._preview &&
                         event.propertyName === 'transform')) {
                         this._preview.removeEventListener('transitionend', handler);
                         resolve();
@@ -1184,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
@@ -1287,7 +1307,7 @@ class DragRef {
     _updateOnScroll(event) {
         const scrollDifference = this._parentPositions.handleScroll(event);
         if (scrollDifference) {
-            const target = getEventTarget(event);
+            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.