@angular/cdk 20.0.4 → 20.1.0-next.1

package/fesm2022/drag-drop.mjs

@@ -482,6 +482,8 @@ const activeCapturingEventOptions$1 = {
  * addition to touch events.
  */
 const MOUSE_EVENT_IGNORE_TIME = 800;
+/** Class applied to the drag placeholder. */
+const PLACEHOLDER_CLASS = 'cdk-drag-placeholder';
 /** 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.
@@ -512,10 +514,14 @@ class DragRef {
     /** Coordinates on the page at which the user picked up the element. */
     _pickupPositionOnPage;
     /**
-     * Anchor node used to save the place in the DOM where the element was
+     * Marker node used to save the place in the DOM where the element was
      * picked up so that it can be restored at the end of the drag sequence.
      */
-    _anchor;
+    _marker;
+    /**
+     * Element indicating the position from which the item was picked up initially.
+     */
+    _anchor = null;
     /**
      * CSS `transform` applied to the element when it isn't being dragged. We need a
      * passive transform in order for the dragged element to retain its new position
@@ -776,7 +782,7 @@ class DragRef {
             // dragged, we have to make sure that it's removed if it gets destroyed.
             this._rootElement?.remove();
         }
-        this._anchor?.remove();
+        this._marker?.remove();
         this._destroyPreview();
         this._destroyPlaceholder();
         this._dragDropRegistry.removeDragItem(this);
@@ -799,7 +805,7 @@ class DragRef {
                 this._ownerSVGElement =
                     this._placeholderTemplate =
                         this._previewTemplate =
-                            this._anchor =
+                            this._marker =
                                 this._parentDragRef =
                                     null;
     }
@@ -926,9 +932,10 @@ class DragRef {
     }
     /** Destroys the placeholder element and its ViewRef. */
     _destroyPlaceholder() {
+        this._anchor?.remove();
         this._placeholder?.remove();
         this._placeholderRef?.destroy();
-        this._placeholder = this._placeholderRef = null;
+        this._placeholder = this._anchor = this._placeholderRef = null;
     }
     /** Handler for the `mousedown`/`touchstart` events. */
     _pointerDown = (event) => {
@@ -1089,11 +1096,11 @@ class DragRef {
             const element = this._rootElement;
             const parent = element.parentNode;
             const placeholder = (this._placeholder = this._createPlaceholderElement());
-            const anchor = (this._anchor =
-                this._anchor ||
-                    this._document.createComment(typeof ngDevMode === 'undefined' || ngDevMode ? 'cdk-drag-anchor' : ''));
-            // Insert an anchor node so that we can restore the element's position in the DOM.
-            parent.insertBefore(anchor, element);
+            const marker = (this._marker =
+                this._marker ||
+                    this._document.createComment(typeof ngDevMode === 'undefined' || ngDevMode ? 'cdk-drag-marker' : ''));
+            // Insert a marker node so that we can restore the element's position in the DOM.
+            parent.insertBefore(marker, element);
             // There's no risk of transforms stacking when inside a drop container so
             // we can keep the initial transform up to date any time dragging starts.
             this._initialTransform = element.style.transform || '';
@@ -1200,7 +1207,7 @@ class DragRef {
         // 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, dragImportantProperties);
-        this._anchor.parentNode.replaceChild(this._rootElement, this._anchor);
+        this._marker.parentNode.replaceChild(this._rootElement, this._marker);
         this._destroyPreview();
         this._destroyPlaceholder();
         this._initialDomRect =
@@ -1249,15 +1256,18 @@ class DragRef {
         }
         if (newContainer && newContainer !== this._dropContainer) {
             this._ngZone.run(() => {
+                const exitIndex = this._dropContainer.getItemIndex(this);
+                const nextItemElement = this._dropContainer.getItemAtIndex(exitIndex + 1)?.getVisibleElement() || null;
                 // Notify the old container that the item has left.
                 this.exited.next({ item: this, container: this._dropContainer });
                 this._dropContainer.exit(this);
+                this._conditionallyInsertAnchor(newContainer, this._dropContainer, nextItemElement);
                 // Notify the new container that the item has entered.
                 this._dropContainer = newContainer;
-                this._dropContainer.enter(this, x, y, newContainer === this._initialContainer &&
-                    // If we're re-entering the initial container and sorting is disabled,
-                    // put item the into its starting index to begin with.
-                    newContainer.sortingDisabled
+                this._dropContainer.enter(this, x, y, 
+                // If we're re-entering the initial container and sorting is disabled,
+                // put item the into its starting index to begin with.
+                newContainer === this._initialContainer && newContainer.sortingDisabled
                     ? this._initialIndex
                     : undefined);
                 this.entered.next({
@@ -1337,7 +1347,7 @@ class DragRef {
         // Stop pointer events on the preview so the user can't
         // interact with it while the preview is animating.
         placeholder.style.pointerEvents = 'none';
-        placeholder.classList.add('cdk-drag-placeholder');
+        placeholder.classList.add(PLACEHOLDER_CLASS);
         return placeholder;
     }
     /**
@@ -1659,6 +1669,31 @@ class DragRef {
             return event.target && (event.target === handle || handle.contains(event.target));
         });
     }
+    /** Inserts the anchor element, if it's valid. */
+    _conditionallyInsertAnchor(newContainer, exitContainer, nextItemElement) {
+        // Remove the anchor when returning to the initial container.
+        if (newContainer === this._initialContainer) {
+            this._anchor?.remove();
+            this._anchor = null;
+        }
+        else if (exitContainer === this._initialContainer && exitContainer.hasAnchor) {
+            // Insert the anchor when leaving the initial container.
+            const anchor = (this._anchor ??= deepCloneNode(this._placeholder));
+            anchor.classList.remove(PLACEHOLDER_CLASS);
+            anchor.classList.add('cdk-drag-anchor');
+            // Clear the transform since the single-axis strategy uses transforms to sort the items.
+            anchor.style.transform = '';
+            // When the item leaves the initial container, the container's DOM will be restored to
+            // its original state, except for the dragged item which is removed. Insert the anchor in
+            // the position from which the item left so that the list looks consistent.
+            if (nextItemElement) {
+                nextItemElement.before(anchor);
+            }
+            else {
+                coerceElement(exitContainer.element).appendChild(anchor);
+            }
+        }
+    }
 }
 /** Clamps a value between a minimum and a maximum. */
 function clamp$1(value, min, max) {
@@ -1922,13 +1957,11 @@ class SingleAxisSortStrategy {
     }
     /** Gets the index of a specific item. */
     getItemIndex(item) {
-        // Items are sorted always by top/left in the cache, however they flow differently in RTL.
-        // The rest of the logic still stands no matter what orientation we're in, however
-        // we need to invert the array when determining the index.
-        const items = this.orientation === 'horizontal' && this.direction === 'rtl'
-            ? this._itemPositions.slice().reverse()
-            : this._itemPositions;
-        return items.findIndex(currentItem => currentItem.drag === item);
+        return this._getVisualItemPositions().findIndex(currentItem => currentItem.drag === item);
+    }
+    /** Gets the item at a specific index. */
+    getItemAtIndex(index) {
+        return this._getVisualItemPositions()[index]?.drag || null;
     }
     /** Used to notify the strategy that the scroll position has changed. */
     updateOnScroll(topDifference, leftDifference) {
@@ -1971,6 +2004,14 @@ class SingleAxisSortStrategy {
                 : a.clientRect.top - b.clientRect.top;
         });
     }
+    _getVisualItemPositions() {
+        // Items are sorted always by top/left in the cache, however they flow differently in RTL.
+        // The rest of the logic still stands no matter what orientation we're in, however
+        // we need to invert the array when determining the index.
+        return this.orientation === 'horizontal' && this.direction === 'rtl'
+            ? this._itemPositions.slice().reverse()
+            : this._itemPositions;
+    }
     /**
      * Gets the offset in pixels by which the item that is being dragged should be moved.
      * @param currentPosition Current position of the item.
@@ -2251,6 +2292,10 @@ class MixedSortStrategy {
     getItemIndex(item) {
         return this._activeItems.indexOf(item);
     }
+    /** Gets the item at a specific index. */
+    getItemAtIndex(index) {
+        return this._activeItems[index] || null;
+    }
     /** Used to notify the strategy that the scroll position has changed. */
     updateOnScroll() {
         this._activeItems.forEach(item => {
@@ -2372,6 +2417,10 @@ class DropListRef {
     autoScrollDisabled = false;
     /** Number of pixels to scroll for each frame when auto-scrolling an element. */
     autoScrollStep = 2;
+    /**
+     * Whether the items in the list should leave an anchor node when leaving the initial container.
+     */
+    hasAnchor = false;
     /**
      * Function that is used to determine whether an item
      * is allowed to be moved into a drop container.
@@ -2644,6 +2693,15 @@ class DropListRef {
             ? this._sortStrategy.getItemIndex(item)
             : this._draggables.indexOf(item);
     }
+    /**
+     * Gets the item at a specific index.
+     * @param index Index at which to retrieve the item.
+     */
+    getItemAtIndex(index) {
+        return this._isDragging
+            ? this._sortStrategy.getItemAtIndex(index)
+            : this._draggables[index] || null;
+    }
     /**
      * Whether the list is able to receive the item that
      * is currently being dragged inside a connected drop list.
@@ -4013,6 +4071,18 @@ class CdkDropList {
      * ```
      */
     elementContainerSelector;
+    /**
+     * By default when an item leaves its initial container, its placeholder will be transferred
+     * to the new container. If that's not desirable for your use case, you can enable this option
+     * which will clone the placeholder and leave it inside the original container. If the item is
+     * returned to the initial container, the anchor element will be removed automatically.
+     *
+     * The cloned placeholder can be styled by targeting the `cdk-drag-anchor` class.
+     *
+     * This option is useful in combination with `cdkDropListSortingDisabled` to implement copying
+     * behavior in a drop list.
+     */
+    hasAnchor;
     /** Emits when the user drops an item inside the container. */
     dropped = new EventEmitter();
     /**
@@ -4155,6 +4225,7 @@ class CdkDropList {
             ref.sortingDisabled = this.sortingDisabled;
             ref.autoScrollDisabled = this.autoScrollDisabled;
             ref.autoScrollStep = coerceNumberProperty(this.autoScrollStep, 2);
+            ref.hasAnchor = this.hasAnchor;
             ref
                 .connectedTo(siblings.filter(drop => drop && drop !== this).map(list => list._dropListRef))
                 .withOrientation(this.orientation);
@@ -4223,7 +4294,7 @@ class CdkDropList {
         this._dropListRef.withItems(items);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: CdkDropList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.0", type: CdkDropList, isStandalone: true, selector: "[cdkDropList], cdk-drop-list", inputs: { connectedTo: ["cdkDropListConnectedTo", "connectedTo"], data: ["cdkDropListData", "data"], orientation: ["cdkDropListOrientation", "orientation"], id: "id", lockAxis: ["cdkDropListLockAxis", "lockAxis"], disabled: ["cdkDropListDisabled", "disabled", booleanAttribute], sortingDisabled: ["cdkDropListSortingDisabled", "sortingDisabled", booleanAttribute], enterPredicate: ["cdkDropListEnterPredicate", "enterPredicate"], sortPredicate: ["cdkDropListSortPredicate", "sortPredicate"], autoScrollDisabled: ["cdkDropListAutoScrollDisabled", "autoScrollDisabled", booleanAttribute], autoScrollStep: ["cdkDropListAutoScrollStep", "autoScrollStep"], elementContainerSelector: ["cdkDropListElementContainer", "elementContainerSelector"] }, outputs: { dropped: "cdkDropListDropped", entered: "cdkDropListEntered", exited: "cdkDropListExited", sorted: "cdkDropListSorted" }, host: { properties: { "attr.id": "id", "class.cdk-drop-list-disabled": "disabled", "class.cdk-drop-list-dragging": "_dropListRef.isDragging()", "class.cdk-drop-list-receiving": "_dropListRef.isReceiving()" }, classAttribute: "cdk-drop-list" }, providers: [
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.0.0", type: CdkDropList, isStandalone: true, selector: "[cdkDropList], cdk-drop-list", inputs: { connectedTo: ["cdkDropListConnectedTo", "connectedTo"], data: ["cdkDropListData", "data"], orientation: ["cdkDropListOrientation", "orientation"], id: "id", lockAxis: ["cdkDropListLockAxis", "lockAxis"], disabled: ["cdkDropListDisabled", "disabled", booleanAttribute], sortingDisabled: ["cdkDropListSortingDisabled", "sortingDisabled", booleanAttribute], enterPredicate: ["cdkDropListEnterPredicate", "enterPredicate"], sortPredicate: ["cdkDropListSortPredicate", "sortPredicate"], autoScrollDisabled: ["cdkDropListAutoScrollDisabled", "autoScrollDisabled", booleanAttribute], autoScrollStep: ["cdkDropListAutoScrollStep", "autoScrollStep"], elementContainerSelector: ["cdkDropListElementContainer", "elementContainerSelector"], hasAnchor: ["cdkDropListHasAnchor", "hasAnchor", booleanAttribute] }, outputs: { dropped: "cdkDropListDropped", entered: "cdkDropListEntered", exited: "cdkDropListExited", sorted: "cdkDropListSorted" }, host: { properties: { "attr.id": "id", "class.cdk-drop-list-disabled": "disabled", "class.cdk-drop-list-dragging": "_dropListRef.isDragging()", "class.cdk-drop-list-receiving": "_dropListRef.isReceiving()" }, classAttribute: "cdk-drop-list" }, providers: [
             // Prevent child drop lists from picking up the same group as their parent.
             { provide: CDK_DROP_LIST_GROUP, useValue: undefined },
             { provide: CDK_DROP_LIST, useExisting: CdkDropList },
@@ -4282,6 +4353,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
             }], elementContainerSelector: [{
                 type: Input,
                 args: ['cdkDropListElementContainer']
+            }], hasAnchor: [{
+                type: Input,
+                args: [{ alias: 'cdkDropListHasAnchor', transform: booleanAttribute }]
             }], dropped: [{
                 type: Output,
                 args: ['cdkDropListDropped']