@angular/cdk 17.3.5 → 17.3.7

package/fesm2022/cdk.mjs

@@ -1,7 +1,7 @@
 import { Version } from '@angular/core';
 
 /** Current version of the Angular Component Development Kit. */
-const VERSION = new Version('17.3.5');
+const VERSION = new Version('17.3.7');
 
 export { VERSION };
 //# sourceMappingURL=cdk.mjs.map

package/fesm2022/cdk.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cdk.mjs","sources":["../../../../../../src/cdk/version.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('17.3.5');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}
+{"version":3,"file":"cdk.mjs","sources":["../../../../../../src/cdk/version.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('17.3.7');\n"],"names":[],"mappings":";;AAUA;MACa,OAAO,GAAG,IAAI,OAAO,CAAC,mBAAmB;;;;"}

package/fesm2022/drag-drop.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Inject, InjectionToken, booleanAttribute, Directive, Optional, SkipSelf, Input, EventEmitter, Self, Output, inject, NgModule } from '@angular/core';
+import { Injectable, Inject, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, booleanAttribute, Directive, Optional, SkipSelf, Input, EventEmitter, Self, Output, NgModule } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import * as i1 from '@angular/cdk/scrolling';
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
@@ -71,34 +71,25 @@ function combineTransforms(transform, initialTransform) {
         ? transform + ' ' + initialTransform
         : transform;
 }
-
-/** Parses a CSS time value to milliseconds. */
-function parseCssTimeUnitsToMs(value) {
-    // Some browsers will return it in seconds, whereas others will return milliseconds.
-    const multiplier = value.toLowerCase().indexOf('ms') > -1 ? 1 : 1000;
-    return parseFloat(value) * multiplier;
-}
-/** Gets the transform transition duration, including the delay, of an element in milliseconds. */
-function getTransformTransitionDurationInMs(element) {
-    const computedStyle = getComputedStyle(element);
-    const transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property');
-    const property = transitionedProperties.find(prop => prop === 'transform' || prop === 'all');
-    // If there's no transition for `all` or `transform`, we shouldn't do anything.
-    if (!property) {
-        return 0;
-    }
-    // Get the index of the property that we're interested in and match
-    // it up to the same index in `transition-delay` and `transition-duration`.
-    const propertyIndex = transitionedProperties.indexOf(property);
-    const rawDurations = parseCssPropertyValue(computedStyle, 'transition-duration');
-    const rawDelays = parseCssPropertyValue(computedStyle, 'transition-delay');
-    return (parseCssTimeUnitsToMs(rawDurations[propertyIndex]) +
-        parseCssTimeUnitsToMs(rawDelays[propertyIndex]));
+/**
+ * Matches the target element's size to the source's size.
+ * @param target Element that needs to be resized.
+ * @param sourceRect Dimensions of the source element.
+ */
+function matchElementSize(target, sourceRect) {
+    target.style.width = `${sourceRect.width}px`;
+    target.style.height = `${sourceRect.height}px`;
+    target.style.transform = getTransform(sourceRect.left, sourceRect.top);
 }
-/** Parses out multiple values from a computed style into an array. */
-function parseCssPropertyValue(computedStyle, name) {
-    const value = computedStyle.getPropertyValue(name);
-    return value.split(',').map(part => part.trim());
+/**
+ * Gets a 3d `transform` that can be applied to an element.
+ * @param x Desired position of the element along the X axis.
+ * @param y Desired position of the element along the Y axis.
+ */
+function getTransform(x, y) {
+    // Round the transforms since some browsers will
+    // blur the elements for sub-pixel transforms.
+    return `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
 }
 
 /** Gets a mutable version of an element's bounding `DOMRect`. */
@@ -283,6 +274,152 @@ function transferCanvasData(source, clone) {
     }
 }
 
+/**
+ * Gets the root HTML element of an embedded view.
+ * If the root is not an HTML element it gets wrapped in one.
+ */
+function getRootNode(viewRef, _document) {
+    const rootNodes = viewRef.rootNodes;
+    if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
+        return rootNodes[0];
+    }
+    const wrapper = _document.createElement('div');
+    rootNodes.forEach(node => wrapper.appendChild(node));
+    return wrapper;
+}
+
+/** Parses a CSS time value to milliseconds. */
+function parseCssTimeUnitsToMs(value) {
+    // Some browsers will return it in seconds, whereas others will return milliseconds.
+    const multiplier = value.toLowerCase().indexOf('ms') > -1 ? 1 : 1000;
+    return parseFloat(value) * multiplier;
+}
+/** Gets the transform transition duration, including the delay, of an element in milliseconds. */
+function getTransformTransitionDurationInMs(element) {
+    const computedStyle = getComputedStyle(element);
+    const transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property');
+    const property = transitionedProperties.find(prop => prop === 'transform' || prop === 'all');
+    // If there's no transition for `all` or `transform`, we shouldn't do anything.
+    if (!property) {
+        return 0;
+    }
+    // Get the index of the property that we're interested in and match
+    // it up to the same index in `transition-delay` and `transition-duration`.
+    const propertyIndex = transitionedProperties.indexOf(property);
+    const rawDurations = parseCssPropertyValue(computedStyle, 'transition-duration');
+    const rawDelays = parseCssPropertyValue(computedStyle, 'transition-delay');
+    return (parseCssTimeUnitsToMs(rawDurations[propertyIndex]) +
+        parseCssTimeUnitsToMs(rawDelays[propertyIndex]));
+}
+/** Parses out multiple values from a computed style into an array. */
+function parseCssPropertyValue(computedStyle, name) {
+    const value = computedStyle.getPropertyValue(name);
+    return value.split(',').map(part => part.trim());
+}
+
+/** Inline styles to be set as `!important` while dragging. */
+const importantProperties = new Set([
+    // Needs to be important, because some `mat-table` sets `position: sticky !important`. See #22781.
+    'position',
+]);
+class PreviewRef {
+    constructor(_document, _rootElement, _direction, _initialDomRect, _previewTemplate, _previewClass, _pickupPositionOnPage, _initialTransform, _zIndex) {
+        this._document = _document;
+        this._rootElement = _rootElement;
+        this._direction = _direction;
+        this._initialDomRect = _initialDomRect;
+        this._previewTemplate = _previewTemplate;
+        this._previewClass = _previewClass;
+        this._pickupPositionOnPage = _pickupPositionOnPage;
+        this._initialTransform = _initialTransform;
+        this._zIndex = _zIndex;
+    }
+    attach(parent) {
+        this._preview = this._createPreview();
+        parent.appendChild(this._preview);
+        // The null check is necessary for browsers that don't support the popover API.
+        // Note that we use a string access for compatibility with Closure.
+        if ('showPopover' in this._preview) {
+            this._preview['showPopover']();
+        }
+    }
+    destroy() {
+        this._preview.remove();
+        this._previewEmbeddedView?.destroy();
+        this._preview = this._previewEmbeddedView = null;
+    }
+    setTransform(value) {
+        this._preview.style.transform = value;
+    }
+    getBoundingClientRect() {
+        return this._preview.getBoundingClientRect();
+    }
+    addClass(className) {
+        this._preview.classList.add(className);
+    }
+    getTransitionDuration() {
+        return getTransformTransitionDurationInMs(this._preview);
+    }
+    addEventListener(name, handler) {
+        this._preview.addEventListener(name, handler);
+    }
+    removeEventListener(name, handler) {
+        this._preview.removeEventListener(name, handler);
+    }
+    _createPreview() {
+        const previewConfig = this._previewTemplate;
+        const previewClass = this._previewClass;
+        const previewTemplate = previewConfig ? previewConfig.template : null;
+        let preview;
+        if (previewTemplate && previewConfig) {
+            // Measure the element before we've inserted the preview
+            // since the insertion could throw off the measurement.
+            const rootRect = previewConfig.matchSize ? this._initialDomRect : null;
+            const viewRef = previewConfig.viewContainer.createEmbeddedView(previewTemplate, previewConfig.context);
+            viewRef.detectChanges();
+            preview = getRootNode(viewRef, this._document);
+            this._previewEmbeddedView = viewRef;
+            if (previewConfig.matchSize) {
+                matchElementSize(preview, rootRect);
+            }
+            else {
+                preview.style.transform = getTransform(this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);
+            }
+        }
+        else {
+            preview = deepCloneNode(this._rootElement);
+            matchElementSize(preview, this._initialDomRect);
+            if (this._initialTransform) {
+                preview.style.transform = this._initialTransform;
+            }
+        }
+        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`.
+            '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',
+            'z-index': this._zIndex + '',
+        }, importantProperties);
+        toggleNativeDragInteractions(preview, false);
+        preview.classList.add('cdk-drag-preview');
+        preview.setAttribute('popover', 'manual');
+        preview.setAttribute('dir', this._direction);
+        if (previewClass) {
+            if (Array.isArray(previewClass)) {
+                previewClass.forEach(className => preview.classList.add(className));
+            }
+            else {
+                preview.classList.add(previewClass);
+            }
+        }
+        return preview;
+    }
+}
+
 /** Options that can be used to bind a passive event listener. */
 const passiveEventListenerOptions = normalizePassiveListenerOptions({ passive: true });
 /** Options that can be used to bind an active event listener. */
@@ -704,9 +841,8 @@ class DragRef {
     }
     /** Destroys the preview element and its ViewRef. */
     _destroyPreview() {
-        this._preview?.remove();
-        this._previewRef?.destroy();
-        this._preview = this._previewRef = null;
+        this._preview?.destroy();
+        this._preview = null;
     }
     /** Destroys the placeholder element and its ViewRef. */
     _destroyPlaceholder() {
@@ -793,13 +929,13 @@ class DragRef {
             this._initialTransform = element.style.transform || '';
             // Create the preview after the initial transform has
             // been cached, because it can be affected by the transform.
-            this._preview = this._createPreviewElement();
+            this._preview = new PreviewRef(this._document, this._rootElement, this._direction, this._initialDomRect, this._previewTemplate || null, this.previewClass || null, this._pickupPositionOnPage, this._initialTransform, this._config.zIndex || 1000);
+            this._preview.attach(this._getPreviewInsertionPoint(parent, shadowRoot));
             // 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, dragImportantProperties);
             this._document.body.appendChild(parent.replaceChild(placeholder, element));
-            this._getPreviewInsertionPoint(parent, shadowRoot).appendChild(this._preview);
             this.started.next({ source: this, event }); // Emit before notifying the container.
             dropContainer.start();
             this._initialContainer = dropContainer;
@@ -972,61 +1108,6 @@ class DragRef {
             }
         }
     }
-    /**
-     * Creates the element that will be rendered next to the user's pointer
-     * and will be used as a preview of the element that is being dragged.
-     */
-    _createPreviewElement() {
-        const previewConfig = this._previewTemplate;
-        const previewClass = this.previewClass;
-        const previewTemplate = previewConfig ? previewConfig.template : null;
-        let preview;
-        if (previewTemplate && previewConfig) {
-            // Measure the element before we've inserted the preview
-            // since the insertion could throw off the measurement.
-            const rootRect = previewConfig.matchSize ? this._initialDomRect : null;
-            const viewRef = previewConfig.viewContainer.createEmbeddedView(previewTemplate, previewConfig.context);
-            viewRef.detectChanges();
-            preview = getRootNode(viewRef, this._document);
-            this._previewRef = viewRef;
-            if (previewConfig.matchSize) {
-                matchElementSize(preview, rootRect);
-            }
-            else {
-                preview.style.transform = getTransform(this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);
-            }
-        }
-        else {
-            preview = deepCloneNode(this._rootElement);
-            matchElementSize(preview, this._initialDomRect);
-            if (this._initialTransform) {
-                preview.style.transform = this._initialTransform;
-            }
-        }
-        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`.
-            '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',
-            'z-index': `${this._config.zIndex || 1000}`,
-        }, dragImportantProperties);
-        toggleNativeDragInteractions(preview, false);
-        preview.classList.add('cdk-drag-preview');
-        preview.setAttribute('dir', this._direction);
-        if (previewClass) {
-            if (Array.isArray(previewClass)) {
-                previewClass.forEach(className => preview.classList.add(className));
-            }
-            else {
-                preview.classList.add(previewClass);
-            }
-        }
-        return preview;
-    }
     /**
      * Animates the preview element from its current position to the location of the drop placeholder.
      * @returns Promise that resolves when the animation completes.
@@ -1038,14 +1119,14 @@ class DragRef {
         }
         const placeholderRect = this._placeholder.getBoundingClientRect();
         // Apply the class that adds a transition to the preview.
-        this._preview.classList.add('cdk-drag-animating');
+        this._preview.addClass('cdk-drag-animating');
         // Move the preview to the placeholder position.
         this._applyPreviewTransform(placeholderRect.left, placeholderRect.top);
         // If the element doesn't have a `transition`, the `transitionend` event won't fire. Since
         // we need to trigger a style recalculation in order for the `cdk-drag-animating` class to
         // apply its style, we take advantage of the available info to figure out whether we need to
         // bind the event in the first place.
-        const duration = getTransformTransitionDurationInMs(this._preview);
+        const duration = this._preview.getTransitionDuration();
         if (duration === 0) {
             return Promise.resolve();
         }
@@ -1233,7 +1314,7 @@ class DragRef {
         // it could be completely different and the transform might not make sense anymore.
         const initialTransform = this._previewTemplate?.template ? undefined : this._initialTransform;
         const transform = getTransform(x, y);
-        this._preview.style.transform = combineTransforms(transform, initialTransform);
+        this._preview.setTransform(combineTransforms(transform, initialTransform));
     }
     /**
      * Gets the distance that the user has dragged during the current drag sequence.
@@ -1392,16 +1473,6 @@ class DragRef {
         });
     }
 }
-/**
- * Gets a 3d `transform` that can be applied to an element.
- * @param x Desired position of the element along the X axis.
- * @param y Desired position of the element along the Y axis.
- */
-function getTransform(x, y) {
-    // Round the transforms since some browsers will
-    // blur the elements for sub-pixel transforms.
-    return `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;
-}
 /** Clamps a value between a minimum and a maximum. */
 function clamp$1(value, min, max) {
     return Math.max(min, Math.min(max, value));
@@ -1413,29 +1484,6 @@ function isTouchEvent(event) {
     // that if the event's name starts with `t`, it's a touch event.
     return event.type[0] === 't';
 }
-/**
- * Gets the root HTML element of an embedded view.
- * If the root is not an HTML element it gets wrapped in one.
- */
-function getRootNode(viewRef, _document) {
-    const rootNodes = viewRef.rootNodes;
-    if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {
-        return rootNodes[0];
-    }
-    const wrapper = _document.createElement('div');
-    rootNodes.forEach(node => wrapper.appendChild(node));
-    return wrapper;
-}
-/**
- * Matches the target element's size to the source's size.
- * @param target Element that needs to be resized.
- * @param sourceRect Dimensions of the source element.
- */
-function matchElementSize(target, sourceRect) {
-    target.style.width = `${sourceRect.width}px`;
-    target.style.height = `${sourceRect.height}px`;
-    target.style.transform = getTransform(sourceRect.left, sourceRect.top);
-}
 /** Callback invoked for `selectstart` events inside the shadow DOM. */
 function shadowDomSelectStart(event) {
     event.preventDefault();
@@ -2651,6 +2699,20 @@ const DEFAULT_CONFIG = {
     dragStartThreshold: 5,
     pointerDirectionChangeThreshold: 5,
 };
+/** Keeps track of the apps currently containing badges. */
+const activeApps = new Set();
+/**
+ * Component used to load the drag&drop reset styles.
+ * @docs-private
+ */
+class _ResetsLoader {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: _ResetsLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: _ResetsLoader, isStandalone: true, selector: "ng-component", host: { attributes: { "cdk-drag-resets-container": "" } }, ngImport: i0, template: '', isInline: true, styles: ["@layer cdk-resets{.cdk-drag-preview{background:none;border:none;padding:0;color:inherit}}"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: _ResetsLoader, decorators: [{
+            type: Component,
+            args: [{ standalone: true, encapsulation: ViewEncapsulation.None, template: '', changeDetection: ChangeDetectionStrategy.OnPush, host: { 'cdk-drag-resets-container': '' }, styles: ["@layer cdk-resets{.cdk-drag-preview{background:none;border:none;padding:0;color:inherit}}"] }]
+        }] });
 /**
  * Service that allows for drag-and-drop functionality to be attached to DOM elements.
  */
@@ -2660,6 +2722,8 @@ class DragDrop {
         this._ngZone = _ngZone;
         this._viewportRuler = _viewportRuler;
         this._dragDropRegistry = _dragDropRegistry;
+        this._appRef = inject(ApplicationRef);
+        this._environmentInjector = inject(EnvironmentInjector);
     }
     /**
      * Turns an element into a draggable item.
@@ -2667,6 +2731,7 @@ class DragDrop {
      * @param config Object used to configure the dragging behavior.
      */
     createDrag(element, config = DEFAULT_CONFIG) {
+        this._loadResets();
         return new DragRef(element, config, this._document, this._ngZone, this._viewportRuler, this._dragDropRegistry);
     }
     /**
@@ -2676,6 +2741,22 @@ class DragDrop {
     createDropList(element) {
         return new DropListRef(element, this._dragDropRegistry, this._document, this._ngZone, this._viewportRuler);
     }
+    // TODO(crisbeto): abstract this away into something reusable.
+    /** Loads the CSS resets needed for the module to work correctly. */
+    _loadResets() {
+        if (!activeApps.has(this._appRef)) {
+            activeApps.add(this._appRef);
+            const componentRef = createComponent(_ResetsLoader, {
+                environmentInjector: this._environmentInjector,
+            });
+            this._appRef.onDestroy(() => {
+                activeApps.delete(this._appRef);
+                if (activeApps.size === 0) {
+                    componentRef.destroy();
+                }
+            });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: DragDrop, deps: [{ token: DOCUMENT }, { token: i0.NgZone }, { token: i1.ViewportRuler }, { token: DragDropRegistry }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: DragDrop, providedIn: 'root' }); }
 }