import * as i0 from '@angular/core'; import { Component, ViewEncapsulation, ChangeDetectionStrategy, inject, NgZone, DOCUMENT, RendererFactory2, signal, Injectable, Renderer2, Injector, InjectionToken, ElementRef, booleanAttribute, Directive, Input, ViewContainerRef, ChangeDetectorRef, EventEmitter, afterNextRender, numberAttribute, Output, TemplateRef, NgModule } from '@angular/core'; import { Subject, Observable, merge, Subscription, interval, animationFrameScheduler, BehaviorSubject } from 'rxjs'; import { _getEventTarget, _getShadowRoot } from './_shadow-dom-chunk.mjs'; import { _CdkPrivateStyleLoader } from './_style-loader-chunk.mjs'; import { isFakeTouchstartFromScreenReader, isFakeMousedownFromScreenReader } from './_fake-event-detection-chunk.mjs'; import { ViewportRuler, ScrollDispatcher, CdkScrollableModule } from './scrolling.mjs'; export { CdkScrollable as ɵɵCdkScrollable } from './scrolling.mjs'; import { coerceElement, coerceNumberProperty } from './_element-chunk.mjs'; import { takeUntil, map, take, tap, switchMap, startWith } from 'rxjs/operators'; import { Directionality } from './_directionality-chunk.mjs'; import { _IdGenerator } from './_id-generator-chunk.mjs'; import { coerceArray } from './_array-chunk.mjs'; import './_platform-chunk.mjs'; import '@angular/common'; import './_scrolling-chunk.mjs'; import './bidi.mjs'; import './_recycle-view-repeater-strategy-chunk.mjs'; import './_data-source-chunk.mjs'; function deepCloneNode(node) { const clone = node.cloneNode(true); const descendantsWithId = clone.querySelectorAll('[id]'); const nodeName = node.nodeName.toLowerCase(); clone.removeAttribute('id'); for (let i = 0; i < descendantsWithId.length; i++) { descendantsWithId[i].removeAttribute('id'); } if (nodeName === 'canvas') { transferCanvasData(node, clone); } else if (nodeName === 'input' || nodeName === 'select' || nodeName === 'textarea') { transferInputData(node, clone); } transferData('canvas', node, clone, transferCanvasData); transferData('input, textarea, select', node, clone, transferInputData); return clone; } function transferData(selector, node, clone, callback) { const descendantElements = node.querySelectorAll(selector); if (descendantElements.length) { const cloneElements = clone.querySelectorAll(selector); for (let i = 0; i < descendantElements.length; i++) { callback(descendantElements[i], cloneElements[i]); } } } let cloneUniqueId = 0; function transferInputData(source, clone) { if (clone.type !== 'file') { clone.value = source.value; } if (clone.type === 'radio' && clone.name) { clone.name = `mat-clone-${clone.name}-${cloneUniqueId++}`; } } function transferCanvasData(source, clone) { const context = clone.getContext('2d'); if (context) { try { context.drawImage(source, 0, 0); } catch {} } } function getMutableClientRect(element) { const rect = element.getBoundingClientRect(); return { top: rect.top, right: rect.right, bottom: rect.bottom, left: rect.left, width: rect.width, height: rect.height, x: rect.x, y: rect.y }; } function isInsideClientRect(clientRect, x, y) { const { top, bottom, left, right } = clientRect; return y >= top && y <= bottom && x >= left && x <= right; } function isOverflowingParent(parentRect, childRect) { const isLeftOverflowing = childRect.left < parentRect.left; const isRightOverflowing = childRect.left + childRect.width > parentRect.right; const isTopOverflowing = childRect.top < parentRect.top; const isBottomOverflowing = childRect.top + childRect.height > parentRect.bottom; return isLeftOverflowing || isRightOverflowing || isTopOverflowing || isBottomOverflowing; } function adjustDomRect(domRect, top, left) { domRect.top += top; domRect.bottom = domRect.top + domRect.height; domRect.left += left; domRect.right = domRect.left + domRect.width; } function isPointerNearDomRect(rect, threshold, pointerX, pointerY) { const { top, right, bottom, left, width, height } = rect; const xThreshold = width * threshold; const yThreshold = height * threshold; return pointerY > top - yThreshold && pointerY < bottom + yThreshold && pointerX > left - xThreshold && pointerX < right + xThreshold; } class ParentPositionTracker { _document; positions = new Map(); constructor(_document) { this._document = _document; } clear() { this.positions.clear(); } cache(elements) { this.clear(); this.positions.set(this._document, { scrollPosition: this.getViewportScrollPosition() }); elements.forEach(element => { this.positions.set(element, { scrollPosition: { top: element.scrollTop, left: element.scrollLeft }, clientRect: getMutableClientRect(element) }); }); } handleScroll(event) { const target = _getEventTarget(event); const cachedPosition = this.positions.get(target); if (!cachedPosition) { return null; } const scrollPosition = cachedPosition.scrollPosition; let newTop; let newLeft; if (target === this._document) { const viewportScrollPosition = this.getViewportScrollPosition(); newTop = viewportScrollPosition.top; newLeft = viewportScrollPosition.left; } else { newTop = target.scrollTop; newLeft = target.scrollLeft; } const topDifference = scrollPosition.top - newTop; const leftDifference = scrollPosition.left - newLeft; this.positions.forEach((position, node) => { if (position.clientRect && target !== node && target.contains(node)) { adjustDomRect(position.clientRect, topDifference, leftDifference); } }); scrollPosition.top = newTop; scrollPosition.left = newLeft; return { top: topDifference, left: leftDifference }; } getViewportScrollPosition() { return { top: window.scrollY, left: window.scrollX }; } } 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; } function extendStyles(dest, source, importantProperties) { for (let key in source) { if (source.hasOwnProperty(key)) { const value = source[key]; if (value) { dest.setProperty(key, value, importantProperties?.has(key) ? 'important' : ''); } else { dest.removeProperty(key); } } } return dest; } function toggleNativeDragInteractions(element, enable) { const userSelect = enable ? '' : 'none'; extendStyles(element.style, { '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 }); } function toggleVisibility(element, enable, importantProperties) { extendStyles(element.style, { position: enable ? '' : 'fixed', top: enable ? '' : '0', opacity: enable ? '' : '0', left: enable ? '' : '-999em' }, importantProperties); } function combineTransforms(transform, initialTransform) { return initialTransform && initialTransform != 'none' ? transform + ' ' + initialTransform : transform; } function matchElementSize(target, sourceRect) { target.style.width = `${sourceRect.width}px`; target.style.height = `${sourceRect.height}px`; target.style.transform = getTransform(sourceRect.left, sourceRect.top); } function getTransform(x, y) { return `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`; } const capturingEventOptions = { capture: true }; const activeCapturingEventOptions$1 = { passive: false, capture: true }; class _ResetsLoader { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: _ResetsLoader, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", 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;inset:auto}}.cdk-drag-placeholder *,.cdk-drag-preview *{pointer-events:none !important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: _ResetsLoader, decorators: [{ type: Component, args: [{ 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;inset:auto}}.cdk-drag-placeholder *,.cdk-drag-preview *{pointer-events:none !important}\n"] }] }] }); class DragDropRegistry { _ngZone = inject(NgZone); _document = inject(DOCUMENT); _styleLoader = inject(_CdkPrivateStyleLoader); _renderer = inject(RendererFactory2).createRenderer(null, null); _cleanupDocumentTouchmove; _scroll = new Subject(); _dropInstances = new Set(); _dragInstances = new Set(); _activeDragInstances = signal([], ...(ngDevMode ? [{ debugName: "_activeDragInstances" }] : [])); _globalListeners; _draggingPredicate = item => item.isDragging(); _domNodesToDirectives = null; pointerMove = new Subject(); pointerUp = new Subject(); constructor() {} registerDropContainer(drop) { if (!this._dropInstances.has(drop)) { this._dropInstances.add(drop); } } registerDragItem(drag) { this._dragInstances.add(drag); if (this._dragInstances.size === 1) { this._ngZone.runOutsideAngular(() => { this._cleanupDocumentTouchmove?.(); this._cleanupDocumentTouchmove = this._renderer.listen(this._document, 'touchmove', this._persistentTouchmoveListener, activeCapturingEventOptions$1); }); } } removeDropContainer(drop) { this._dropInstances.delete(drop); } removeDragItem(drag) { this._dragInstances.delete(drag); this.stopDragging(drag); if (this._dragInstances.size === 0) { this._cleanupDocumentTouchmove?.(); } } startDragging(drag, event) { if (this._activeDragInstances().indexOf(drag) > -1) { return; } this._styleLoader.load(_ResetsLoader); this._activeDragInstances.update(instances => [...instances, drag]); if (this._activeDragInstances().length === 1) { const isTouchEvent = event.type.startsWith('touch'); const endEventHandler = e => this.pointerUp.next(e); const toBind = [['scroll', e => this._scroll.next(e), capturingEventOptions], ['selectstart', this._preventDefaultWhileDragging, activeCapturingEventOptions$1]]; if (isTouchEvent) { toBind.push(['touchend', endEventHandler, capturingEventOptions], ['touchcancel', endEventHandler, capturingEventOptions]); } else { toBind.push(['mouseup', endEventHandler, capturingEventOptions]); } if (!isTouchEvent) { toBind.push(['mousemove', e => this.pointerMove.next(e), activeCapturingEventOptions$1]); } this._ngZone.runOutsideAngular(() => { this._globalListeners = toBind.map(([name, handler, options]) => this._renderer.listen(this._document, name, handler, options)); }); } } stopDragging(drag) { this._activeDragInstances.update(instances => { const index = instances.indexOf(drag); if (index > -1) { instances.splice(index, 1); return [...instances]; } return instances; }); if (this._activeDragInstances().length === 0) { this._clearGlobalListeners(); } } isDragging(drag) { return this._activeDragInstances().indexOf(drag) > -1; } scrolled(shadowRoot) { const streams = [this._scroll]; if (shadowRoot && shadowRoot !== this._document) { streams.push(new Observable(observer => { return this._ngZone.runOutsideAngular(() => { const cleanup = this._renderer.listen(shadowRoot, 'scroll', event => { if (this._activeDragInstances().length) { observer.next(event); } }, capturingEventOptions); return () => { cleanup(); }; }); })); } return merge(...streams); } registerDirectiveNode(node, dragRef) { this._domNodesToDirectives ??= new WeakMap(); this._domNodesToDirectives.set(node, dragRef); } removeDirectiveNode(node) { this._domNodesToDirectives?.delete(node); } getDragDirectiveForNode(node) { return this._domNodesToDirectives?.get(node) || null; } ngOnDestroy() { this._dragInstances.forEach(instance => this.removeDragItem(instance)); this._dropInstances.forEach(instance => this.removeDropContainer(instance)); this._domNodesToDirectives = null; this._clearGlobalListeners(); this.pointerMove.complete(); this.pointerUp.complete(); } _preventDefaultWhileDragging = event => { if (this._activeDragInstances().length > 0) { event.preventDefault(); } }; _persistentTouchmoveListener = event => { if (this._activeDragInstances().length > 0) { if (this._activeDragInstances().some(this._draggingPredicate)) { event.preventDefault(); } this.pointerMove.next(event); } }; _clearGlobalListeners() { this._globalListeners?.forEach(cleanup => cleanup()); this._globalListeners = undefined; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DragDropRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DragDropRegistry, providedIn: 'root' }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DragDropRegistry, decorators: [{ type: Injectable, args: [{ providedIn: 'root' }] }], ctorParameters: () => [] }); function parseCssTimeUnitsToMs(value) { const multiplier = value.toLowerCase().indexOf('ms') > -1 ? 1 : 1000; return parseFloat(value) * multiplier; } function getTransformTransitionDurationInMs(element) { const computedStyle = getComputedStyle(element); const transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property'); const property = transitionedProperties.find(prop => prop === 'transform' || prop === 'all'); if (!property) { return 0; } const propertyIndex = transitionedProperties.indexOf(property); const rawDurations = parseCssPropertyValue(computedStyle, 'transition-duration'); const rawDelays = parseCssPropertyValue(computedStyle, 'transition-delay'); return parseCssTimeUnitsToMs(rawDurations[propertyIndex]) + parseCssTimeUnitsToMs(rawDelays[propertyIndex]); } function parseCssPropertyValue(computedStyle, name) { const value = computedStyle.getPropertyValue(name); return value.split(',').map(part => part.trim()); } const importantProperties = new Set(['position']); class PreviewRef { _document; _rootElement; _direction; _initialDomRect; _previewTemplate; _previewClass; _pickupPositionOnPage; _initialTransform; _zIndex; _renderer; _previewEmbeddedView = null; _preview; get element() { return this._preview; } constructor(_document, _rootElement, _direction, _initialDomRect, _previewTemplate, _previewClass, _pickupPositionOnPage, _initialTransform, _zIndex, _renderer) { 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; this._renderer = _renderer; } attach(parent) { this._preview = this._createPreview(); parent.appendChild(this._preview); if (supportsPopover(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) { return this._renderer.listen(this._preview, name, handler); } _createPreview() { const previewConfig = this._previewTemplate; const previewClass = this._previewClass; const previewTemplate = previewConfig ? previewConfig.template : null; let preview; if (previewTemplate && previewConfig) { 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, { 'pointer-events': 'none', 'margin': supportsPopover(preview) ? '0 auto 0 0' : '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; } } function supportsPopover(element) { return 'showPopover' in element; } const passiveEventListenerOptions = { passive: true }; const activeEventListenerOptions = { passive: false }; const activeCapturingEventOptions = { passive: false, capture: true }; const MOUSE_EVENT_IGNORE_TIME = 800; const PLACEHOLDER_CLASS = 'cdk-drag-placeholder'; const dragImportantProperties = new Set(['position']); function createDragRef(injector, element, config = { dragStartThreshold: 5, pointerDirectionChangeThreshold: 5 }) { const renderer = injector.get(Renderer2, null, { optional: true }) || injector.get(RendererFactory2).createRenderer(null, null); return new DragRef(element, config, injector.get(DOCUMENT), injector.get(NgZone), injector.get(ViewportRuler), injector.get(DragDropRegistry), renderer); } class DragRef { _config; _document; _ngZone; _viewportRuler; _dragDropRegistry; _renderer; _rootElementCleanups; _cleanupShadowRootSelectStart; _preview = null; _previewContainer; _placeholderRef = null; _placeholder; _pickupPositionInElement; _pickupPositionOnPage; _marker; _anchor = null; _passiveTransform = { x: 0, y: 0 }; _activeTransform = { x: 0, y: 0 }; _initialTransform; _hasStartedDragging = signal(false, ...(ngDevMode ? [{ debugName: "_hasStartedDragging" }] : [])); _hasMoved = false; _initialContainer; _initialIndex; _parentPositions; _moveEvents = new Subject(); _pointerDirectionDelta; _pointerPositionAtLastDirectionChange; _lastKnownPointerPosition; _rootElement; _ownerSVGElement = null; _rootElementTapHighlight; _pointerMoveSubscription = Subscription.EMPTY; _pointerUpSubscription = Subscription.EMPTY; _scrollSubscription = Subscription.EMPTY; _resizeSubscription = Subscription.EMPTY; _lastTouchEventTime; _dragStartTime; _boundaryElement = null; _nativeInteractionsEnabled = true; _initialDomRect; _previewRect; _boundaryRect; _previewTemplate; _placeholderTemplate; _handles = []; _disabledHandles = new Set(); _dropContainer; _direction = 'ltr'; _parentDragRef = null; _cachedShadowRoot; lockAxis = null; dragStartDelay = 0; previewClass; scale = 1; get disabled() { return this._disabled || !!(this._dropContainer && this._dropContainer.disabled); } set disabled(value) { if (value !== this._disabled) { this._disabled = value; this._toggleNativeDragInteractions(); this._handles.forEach(handle => toggleNativeDragInteractions(handle, value)); } } _disabled = false; beforeStarted = new Subject(); started = new Subject(); released = new Subject(); ended = new Subject(); entered = new Subject(); exited = new Subject(); dropped = new Subject(); moved = this._moveEvents; data; constrainPosition; constructor(element, _config, _document, _ngZone, _viewportRuler, _dragDropRegistry, _renderer) { this._config = _config; this._document = _document; this._ngZone = _ngZone; this._viewportRuler = _viewportRuler; this._dragDropRegistry = _dragDropRegistry; this._renderer = _renderer; this.withRootElement(element).withParent(_config.parentDragRef || null); this._parentPositions = new ParentPositionTracker(_document); _dragDropRegistry.registerDragItem(this); } getPlaceholderElement() { return this._placeholder; } getRootElement() { return this._rootElement; } getVisibleElement() { return this.isDragging() ? this.getPlaceholderElement() : this.getRootElement(); } withHandles(handles) { this._handles = handles.map(handle => coerceElement(handle)); this._handles.forEach(handle => toggleNativeDragInteractions(handle, this.disabled)); this._toggleNativeDragInteractions(); const disabledHandles = new Set(); this._disabledHandles.forEach(handle => { if (this._handles.indexOf(handle) > -1) { disabledHandles.add(handle); } }); this._disabledHandles = disabledHandles; return this; } withPreviewTemplate(template) { this._previewTemplate = template; return this; } withPlaceholderTemplate(template) { this._placeholderTemplate = template; return this; } withRootElement(rootElement) { const element = coerceElement(rootElement); if (element !== this._rootElement) { this._removeRootElementListeners(); const renderer = this._renderer; this._rootElementCleanups = this._ngZone.runOutsideAngular(() => [renderer.listen(element, 'mousedown', this._pointerDown, activeEventListenerOptions), renderer.listen(element, 'touchstart', this._pointerDown, passiveEventListenerOptions), renderer.listen(element, 'dragstart', this._nativeDragStart, activeEventListenerOptions)]); this._initialTransform = undefined; this._rootElement = element; } if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) { this._ownerSVGElement = this._rootElement.ownerSVGElement; } return this; } withBoundaryElement(boundaryElement) { this._boundaryElement = boundaryElement ? coerceElement(boundaryElement) : null; this._resizeSubscription.unsubscribe(); if (boundaryElement) { this._resizeSubscription = this._viewportRuler.change(10).subscribe(() => this._containInsideBoundaryOnResize()); } return this; } withParent(parent) { this._parentDragRef = parent; return this; } dispose() { this._removeRootElementListeners(); if (this.isDragging()) { this._rootElement?.remove(); } this._marker?.remove(); this._destroyPreview(); this._destroyPlaceholder(); this._dragDropRegistry.removeDragItem(this); this._removeListeners(); this.beforeStarted.complete(); this.started.complete(); this.released.complete(); this.ended.complete(); this.entered.complete(); this.exited.complete(); this.dropped.complete(); this._moveEvents.complete(); this._handles = []; this._disabledHandles.clear(); this._dropContainer = undefined; this._resizeSubscription.unsubscribe(); this._parentPositions.clear(); this._boundaryElement = this._rootElement = this._ownerSVGElement = this._placeholderTemplate = this._previewTemplate = this._marker = this._parentDragRef = null; } isDragging() { return this._hasStartedDragging() && this._dragDropRegistry.isDragging(this); } reset() { this._rootElement.style.transform = this._initialTransform || ''; this._activeTransform = { x: 0, y: 0 }; this._passiveTransform = { x: 0, y: 0 }; } resetToBoundary() { if (this._boundaryElement && this._rootElement && isOverflowingParent(this._boundaryElement.getBoundingClientRect(), this._rootElement.getBoundingClientRect())) { const parentRect = this._boundaryElement.getBoundingClientRect(); const childRect = this._rootElement.getBoundingClientRect(); let offsetX = 0; let offsetY = 0; if (childRect.left < parentRect.left) { offsetX = parentRect.left - childRect.left; } else if (childRect.right > parentRect.right) { offsetX = parentRect.right - childRect.right; } if (childRect.top < parentRect.top) { offsetY = parentRect.top - childRect.top; } else if (childRect.bottom > parentRect.bottom) { offsetY = parentRect.bottom - childRect.bottom; } const currentLeft = this._activeTransform.x; const currentTop = this._activeTransform.y; let x = currentLeft + offsetX, y = currentTop + offsetY; this._rootElement.style.transform = getTransform(x, y); this._activeTransform = { x, y }; this._passiveTransform = { x, y }; } } disableHandle(handle) { if (!this._disabledHandles.has(handle) && this._handles.indexOf(handle) > -1) { this._disabledHandles.add(handle); toggleNativeDragInteractions(handle, true); } } enableHandle(handle) { if (this._disabledHandles.has(handle)) { this._disabledHandles.delete(handle); toggleNativeDragInteractions(handle, this.disabled); } } withDirection(direction) { this._direction = direction; return this; } _withDropContainer(container) { this._dropContainer = container; } getFreeDragPosition() { const position = this.isDragging() ? this._activeTransform : this._passiveTransform; return { x: position.x, y: position.y }; } setFreeDragPosition(value) { this._activeTransform = { x: 0, y: 0 }; this._passiveTransform.x = value.x; this._passiveTransform.y = value.y; if (!this._dropContainer) { this._applyRootElementTransform(value.x, value.y); } return this; } withPreviewContainer(value) { this._previewContainer = value; return this; } _sortFromLastPointerPosition() { const position = this._lastKnownPointerPosition; if (position && this._dropContainer) { this._updateActiveDropContainer(this._getConstrainedPointerPosition(position), position); } } _removeListeners() { this._pointerMoveSubscription.unsubscribe(); this._pointerUpSubscription.unsubscribe(); this._scrollSubscription.unsubscribe(); this._cleanupShadowRootSelectStart?.(); this._cleanupShadowRootSelectStart = undefined; } _destroyPreview() { this._preview?.destroy(); this._preview = null; } _destroyPlaceholder() { this._anchor?.remove(); this._placeholder?.remove(); this._placeholderRef?.destroy(); this._placeholder = this._anchor = this._placeholderRef = null; } _pointerDown = event => { this.beforeStarted.next(); if (this._handles.length) { const targetHandle = this._getTargetHandle(event); if (targetHandle && !this._disabledHandles.has(targetHandle) && !this.disabled) { this._initializeDragSequence(targetHandle, event); } } else if (!this.disabled) { this._initializeDragSequence(this._rootElement, event); } }; _pointerMove = event => { const pointerPosition = this._getPointerPositionOnPage(event); if (!this._hasStartedDragging()) { const distanceX = Math.abs(pointerPosition.x - this._pickupPositionOnPage.x); const distanceY = Math.abs(pointerPosition.y - this._pickupPositionOnPage.y); const isOverThreshold = distanceX + distanceY >= this._config.dragStartThreshold; if (isOverThreshold) { const isDelayElapsed = Date.now() >= this._dragStartTime + this._getDragStartDelay(event); const container = this._dropContainer; if (!isDelayElapsed) { this._endDragSequence(event); return; } if (!container || !container.isDragging() && !container.isReceiving()) { if (event.cancelable) { event.preventDefault(); } this._hasStartedDragging.set(true); this._ngZone.run(() => this._startDragSequence(event)); } } return; } if (event.cancelable) { event.preventDefault(); } const constrainedPointerPosition = this._getConstrainedPointerPosition(pointerPosition); this._hasMoved = true; this._lastKnownPointerPosition = pointerPosition; this._updatePointerDirectionDelta(constrainedPointerPosition); if (this._dropContainer) { this._updateActiveDropContainer(constrainedPointerPosition, pointerPosition); } else { const offset = this.constrainPosition ? this._initialDomRect : this._pickupPositionOnPage; const activeTransform = this._activeTransform; activeTransform.x = constrainedPointerPosition.x - offset.x + this._passiveTransform.x; activeTransform.y = constrainedPointerPosition.y - offset.y + this._passiveTransform.y; this._applyRootElementTransform(activeTransform.x, activeTransform.y); } if (this._moveEvents.observers.length) { this._ngZone.run(() => { this._moveEvents.next({ source: this, pointerPosition: constrainedPointerPosition, event, distance: this._getDragDistance(constrainedPointerPosition), delta: this._pointerDirectionDelta }); }); } }; _pointerUp = event => { this._endDragSequence(event); }; _endDragSequence(event) { if (!this._dragDropRegistry.isDragging(this)) { return; } this._removeListeners(); this._dragDropRegistry.stopDragging(this); this._toggleNativeDragInteractions(); if (this._handles) { this._rootElement.style.webkitTapHighlightColor = this._rootElementTapHighlight; } if (!this._hasStartedDragging()) { return; } this.released.next({ source: this, event }); if (this._dropContainer) { this._dropContainer._stopScrolling(); this._animatePreviewToPlaceholder().then(() => { this._cleanupDragArtifacts(event); this._cleanupCachedDimensions(); this._dragDropRegistry.stopDragging(this); }); } else { this._passiveTransform.x = this._activeTransform.x; const pointerPosition = this._getPointerPositionOnPage(event); this._passiveTransform.y = this._activeTransform.y; this._ngZone.run(() => { this.ended.next({ source: this, distance: this._getDragDistance(pointerPosition), dropPoint: pointerPosition, event }); }); this._cleanupCachedDimensions(); this._dragDropRegistry.stopDragging(this); } } _startDragSequence(event) { if (isTouchEvent(event)) { this._lastTouchEventTime = Date.now(); } this._toggleNativeDragInteractions(); const shadowRoot = this._getShadowRoot(); const dropContainer = this._dropContainer; if (shadowRoot) { this._ngZone.runOutsideAngular(() => { this._cleanupShadowRootSelectStart = this._renderer.listen(shadowRoot, 'selectstart', shadowDomSelectStart, activeCapturingEventOptions); }); } if (dropContainer) { const element = this._rootElement; const parent = element.parentNode; const placeholder = this._placeholder = this._createPlaceholderElement(); const marker = this._marker = this._marker || this._document.createComment(typeof ngDevMode === 'undefined' || ngDevMode ? 'cdk-drag-marker' : ''); parent.insertBefore(marker, element); this._initialTransform = element.style.transform || ''; 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._renderer); this._preview.attach(this._getPreviewInsertionPoint(parent, shadowRoot)); toggleVisibility(element, false, dragImportantProperties); this._document.body.appendChild(parent.replaceChild(placeholder, element)); this.started.next({ source: this, event }); dropContainer.start(); this._initialContainer = dropContainer; this._initialIndex = dropContainer.getItemIndex(this); } else { this.started.next({ source: this, event }); this._initialContainer = this._initialIndex = undefined; } this._parentPositions.cache(dropContainer ? dropContainer.getScrollableParents() : []); } _initializeDragSequence(referenceElement, event) { if (this._parentDragRef) { event.stopPropagation(); } const isDragging = this.isDragging(); 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 (target && target.draggable && event.type === 'mousedown') { event.preventDefault(); } if (isDragging || isAuxiliaryMouseButton || isSyntheticEvent || isFakeEvent) { return; } if (this._handles.length) { const rootStyles = rootElement.style; this._rootElementTapHighlight = rootStyles.webkitTapHighlightColor || ''; rootStyles.webkitTapHighlightColor = 'transparent'; } this._hasMoved = false; this._hasStartedDragging.set(this._hasMoved); this._removeListeners(); this._initialDomRect = this._rootElement.getBoundingClientRect(); this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove); this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp); this._scrollSubscription = this._dragDropRegistry.scrolled(this._getShadowRoot()).subscribe(scrollEvent => this._updateOnScroll(scrollEvent)); if (this._boundaryElement) { this._boundaryRect = getMutableClientRect(this._boundaryElement); } const previewTemplate = this._previewTemplate; this._pickupPositionInElement = previewTemplate && previewTemplate.template && !previewTemplate.matchSize ? { x: 0, y: 0 } : this._getPointerPositionInElement(this._initialDomRect, referenceElement, event); const pointerPosition = this._pickupPositionOnPage = this._lastKnownPointerPosition = this._getPointerPositionOnPage(event); this._pointerDirectionDelta = { x: 0, y: 0 }; this._pointerPositionAtLastDirectionChange = { x: pointerPosition.x, y: pointerPosition.y }; this._dragStartTime = Date.now(); this._dragDropRegistry.startDragging(this, event); } _cleanupDragArtifacts(event) { toggleVisibility(this._rootElement, true, dragImportantProperties); this._marker.parentNode.replaceChild(this._rootElement, this._marker); this._destroyPreview(); this._destroyPlaceholder(); this._initialDomRect = this._boundaryRect = this._previewRect = this._initialTransform = undefined; this._ngZone.run(() => { const container = this._dropContainer; const currentIndex = container.getItemIndex(this); const pointerPosition = this._getPointerPositionOnPage(event); const distance = this._getDragDistance(pointerPosition); const isPointerOverContainer = container._isOverContainer(pointerPosition.x, pointerPosition.y); this.ended.next({ source: this, distance, dropPoint: pointerPosition, event }); this.dropped.next({ item: this, currentIndex, previousIndex: this._initialIndex, container: container, previousContainer: this._initialContainer, isPointerOverContainer, distance, dropPoint: pointerPosition, event }); container.drop(this, currentIndex, this._initialIndex, this._initialContainer, isPointerOverContainer, distance, pointerPosition, event); this._dropContainer = this._initialContainer; }); } _updateActiveDropContainer({ x, y }, { x: rawX, y: rawY }) { let newContainer = this._initialContainer._getSiblingContainerFromPosition(this, x, y); if (!newContainer && this._dropContainer !== this._initialContainer && this._initialContainer._isOverContainer(x, y)) { newContainer = this._initialContainer; } if (newContainer && newContainer !== this._dropContainer) { this._ngZone.run(() => { const exitIndex = this._dropContainer.getItemIndex(this); const nextItemElement = this._dropContainer.getItemAtIndex(exitIndex + 1)?.getVisibleElement() || null; this.exited.next({ item: this, container: this._dropContainer }); this._dropContainer.exit(this); this._conditionallyInsertAnchor(newContainer, this._dropContainer, nextItemElement); this._dropContainer = newContainer; this._dropContainer.enter(this, x, y, newContainer === this._initialContainer && newContainer.sortingDisabled ? this._initialIndex : undefined); this.entered.next({ item: this, container: newContainer, currentIndex: newContainer.getItemIndex(this) }); }); } if (this.isDragging()) { this._dropContainer._startScrollingIfNecessary(rawX, rawY); this._dropContainer._sortItem(this, x, y, this._pointerDirectionDelta); if (this.constrainPosition) { this._applyPreviewTransform(x, y); } else { this._applyPreviewTransform(x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y); } } } _animatePreviewToPlaceholder() { if (!this._hasMoved) { return Promise.resolve(); } const placeholderRect = this._placeholder.getBoundingClientRect(); this._preview.addClass('cdk-drag-animating'); this._applyPreviewTransform(placeholderRect.left, placeholderRect.top); const duration = this._preview.getTransitionDuration(); if (duration === 0) { return Promise.resolve(); } return this._ngZone.runOutsideAngular(() => { return new Promise(resolve => { const handler = event => { if (!event || this._preview && _getEventTarget(event) === this._preview.element && event.propertyName === 'transform') { cleanupListener(); resolve(); clearTimeout(timeout); } }; const timeout = setTimeout(handler, duration * 1.5); const cleanupListener = this._preview.addEventListener('transitionend', handler); }); }); } _createPlaceholderElement() { const placeholderConfig = this._placeholderTemplate; const placeholderTemplate = placeholderConfig ? placeholderConfig.template : null; let placeholder; if (placeholderTemplate) { this._placeholderRef = placeholderConfig.viewContainer.createEmbeddedView(placeholderTemplate, placeholderConfig.context); this._placeholderRef.detectChanges(); placeholder = getRootNode(this._placeholderRef, this._document); } else { placeholder = deepCloneNode(this._rootElement); } placeholder.style.pointerEvents = 'none'; placeholder.classList.add(PLACEHOLDER_CLASS); return placeholder; } _getPointerPositionInElement(elementRect, referenceElement, event) { const handleElement = referenceElement === this._rootElement ? null : referenceElement; const referenceRect = handleElement ? handleElement.getBoundingClientRect() : elementRect; const point = isTouchEvent(event) ? event.targetTouches[0] : event; const scrollPosition = this._getViewportScrollPosition(); const x = point.pageX - referenceRect.left - scrollPosition.left; const y = point.pageY - referenceRect.top - scrollPosition.top; return { x: referenceRect.left - elementRect.left + x, y: referenceRect.top - elementRect.top + y }; } _getPointerPositionOnPage(event) { const scrollPosition = this._getViewportScrollPosition(); const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || { pageX: 0, pageY: 0 } : event; const x = point.pageX - scrollPosition.left; const y = point.pageY - scrollPosition.top; if (this._ownerSVGElement) { const svgMatrix = this._ownerSVGElement.getScreenCTM(); if (svgMatrix) { const svgPoint = this._ownerSVGElement.createSVGPoint(); svgPoint.x = x; svgPoint.y = y; return svgPoint.matrixTransform(svgMatrix.inverse()); } } return { x, y }; } _getConstrainedPointerPosition(point) { const dropContainerLock = this._dropContainer ? this._dropContainer.lockAxis : null; let { x, y } = this.constrainPosition ? this.constrainPosition(point, this, this._initialDomRect, this._pickupPositionInElement) : point; if (this.lockAxis === 'x' || dropContainerLock === 'x') { y = this._pickupPositionOnPage.y - (this.constrainPosition ? this._pickupPositionInElement.y : 0); } else if (this.lockAxis === 'y' || dropContainerLock === 'y') { x = this._pickupPositionOnPage.x - (this.constrainPosition ? this._pickupPositionInElement.x : 0); } if (this._boundaryRect) { const { x: pickupX, y: pickupY } = !this.constrainPosition ? this._pickupPositionInElement : { x: 0, y: 0 }; const boundaryRect = this._boundaryRect; const { width: previewWidth, height: previewHeight } = this._getPreviewRect(); const minY = boundaryRect.top + pickupY; const maxY = boundaryRect.bottom - (previewHeight - pickupY); const minX = boundaryRect.left + pickupX; const maxX = boundaryRect.right - (previewWidth - pickupX); x = clamp$1(x, minX, maxX); y = clamp$1(y, minY, maxY); } return { x, y }; } _updatePointerDirectionDelta(pointerPositionOnPage) { const { x, y } = pointerPositionOnPage; const delta = this._pointerDirectionDelta; const positionSinceLastChange = this._pointerPositionAtLastDirectionChange; const changeX = Math.abs(x - positionSinceLastChange.x); const changeY = Math.abs(y - positionSinceLastChange.y); if (changeX > this._config.pointerDirectionChangeThreshold) { delta.x = x > positionSinceLastChange.x ? 1 : -1; positionSinceLastChange.x = x; } if (changeY > this._config.pointerDirectionChangeThreshold) { delta.y = y > positionSinceLastChange.y ? 1 : -1; positionSinceLastChange.y = y; } return delta; } _toggleNativeDragInteractions() { if (!this._rootElement || !this._handles) { return; } const shouldEnable = this._handles.length > 0 || !this.isDragging(); if (shouldEnable !== this._nativeInteractionsEnabled) { this._nativeInteractionsEnabled = shouldEnable; toggleNativeDragInteractions(this._rootElement, shouldEnable); } } _removeRootElementListeners() { this._rootElementCleanups?.forEach(cleanup => cleanup()); this._rootElementCleanups = undefined; } _applyRootElementTransform(x, y) { const scale = 1 / this.scale; const transform = getTransform(x * scale, y * scale); const styles = this._rootElement.style; if (this._initialTransform == null) { this._initialTransform = styles.transform && styles.transform != 'none' ? styles.transform : ''; } styles.transform = combineTransforms(transform, this._initialTransform); } _applyPreviewTransform(x, y) { const initialTransform = this._previewTemplate?.template ? undefined : this._initialTransform; const transform = getTransform(x, y); this._preview.setTransform(combineTransforms(transform, initialTransform)); } _getDragDistance(currentPosition) { const pickupPosition = this._pickupPositionOnPage; if (pickupPosition) { return { x: currentPosition.x - pickupPosition.x, y: currentPosition.y - pickupPosition.y }; } return { x: 0, y: 0 }; } _cleanupCachedDimensions() { this._boundaryRect = this._previewRect = undefined; this._parentPositions.clear(); } _containInsideBoundaryOnResize() { let { x, y } = this._passiveTransform; if (x === 0 && y === 0 || this.isDragging() || !this._boundaryElement) { return; } const elementRect = this._rootElement.getBoundingClientRect(); const boundaryRect = this._boundaryElement.getBoundingClientRect(); if (boundaryRect.width === 0 && boundaryRect.height === 0 || elementRect.width === 0 && elementRect.height === 0) { return; } const leftOverflow = boundaryRect.left - elementRect.left; const rightOverflow = elementRect.right - boundaryRect.right; const topOverflow = boundaryRect.top - elementRect.top; const bottomOverflow = elementRect.bottom - boundaryRect.bottom; if (boundaryRect.width > elementRect.width) { if (leftOverflow > 0) { x += leftOverflow; } if (rightOverflow > 0) { x -= rightOverflow; } } else { x = 0; } if (boundaryRect.height > elementRect.height) { if (topOverflow > 0) { y += topOverflow; } if (bottomOverflow > 0) { y -= bottomOverflow; } } else { y = 0; } if (x !== this._passiveTransform.x || y !== this._passiveTransform.y) { this.setFreeDragPosition({ y, x }); } } _getDragStartDelay(event) { const value = this.dragStartDelay; if (typeof value === 'number') { return value; } else if (isTouchEvent(event)) { return value.touch; } return value ? value.mouse : 0; } _updateOnScroll(event) { const scrollDifference = this._parentPositions.handleScroll(event); if (scrollDifference) { const target = _getEventTarget(event); if (this._boundaryRect && target !== this._boundaryElement && target.contains(this._boundaryElement)) { adjustDomRect(this._boundaryRect, scrollDifference.top, scrollDifference.left); } this._pickupPositionOnPage.x += scrollDifference.left; this._pickupPositionOnPage.y += scrollDifference.top; if (!this._dropContainer) { this._activeTransform.x -= scrollDifference.left; this._activeTransform.y -= scrollDifference.top; this._applyRootElementTransform(this._activeTransform.x, this._activeTransform.y); } } } _getViewportScrollPosition() { return this._parentPositions.positions.get(this._document)?.scrollPosition || this._parentPositions.getViewportScrollPosition(); } _getShadowRoot() { if (this._cachedShadowRoot === undefined) { this._cachedShadowRoot = _getShadowRoot(this._rootElement); } return this._cachedShadowRoot; } _getPreviewInsertionPoint(initialParent, shadowRoot) { const previewContainer = this._previewContainer || 'global'; if (previewContainer === 'parent') { return initialParent; } if (previewContainer === 'global') { const documentRef = this._document; return shadowRoot || documentRef.fullscreenElement || documentRef.webkitFullscreenElement || documentRef.mozFullScreenElement || documentRef.msFullscreenElement || documentRef.body; } return coerceElement(previewContainer); } _getPreviewRect() { if (!this._previewRect || !this._previewRect.width && !this._previewRect.height) { this._previewRect = this._preview ? this._preview.getBoundingClientRect() : this._initialDomRect; } return this._previewRect; } _nativeDragStart = event => { if (this._handles.length) { const targetHandle = this._getTargetHandle(event); if (targetHandle && !this._disabledHandles.has(targetHandle) && !this.disabled) { event.preventDefault(); } } else if (!this.disabled) { event.preventDefault(); } }; _getTargetHandle(event) { return this._handles.find(handle => { return event.target && (event.target === handle || handle.contains(event.target)); }); } _conditionallyInsertAnchor(newContainer, exitContainer, nextItemElement) { if (newContainer === this._initialContainer) { this._anchor?.remove(); this._anchor = null; } else if (exitContainer === this._initialContainer && exitContainer.hasAnchor) { const anchor = this._anchor ??= deepCloneNode(this._placeholder); anchor.classList.remove(PLACEHOLDER_CLASS); anchor.classList.add('cdk-drag-anchor'); anchor.style.transform = ''; if (nextItemElement) { nextItemElement.before(anchor); } else { coerceElement(exitContainer.element).appendChild(anchor); } } } } function clamp$1(value, min, max) { return Math.max(min, Math.min(max, value)); } function isTouchEvent(event) { return event.type[0] === 't'; } function shadowDomSelectStart(event) { event.preventDefault(); } function moveItemInArray(array, fromIndex, toIndex) { const from = clamp(fromIndex, array.length - 1); const to = clamp(toIndex, array.length - 1); if (from === to) { return; } const target = array[from]; const delta = to < from ? -1 : 1; for (let i = from; i !== to; i += delta) { array[i] = array[i + delta]; } array[to] = target; } function transferArrayItem(currentArray, targetArray, currentIndex, targetIndex) { const from = clamp(currentIndex, currentArray.length - 1); const to = clamp(targetIndex, targetArray.length); if (currentArray.length) { targetArray.splice(to, 0, currentArray.splice(from, 1)[0]); } } function copyArrayItem(currentArray, targetArray, currentIndex, targetIndex) { const to = clamp(targetIndex, targetArray.length); if (currentArray.length) { targetArray.splice(to, 0, currentArray[currentIndex]); } } function clamp(value, max) { return Math.max(0, Math.min(max, value)); } class SingleAxisSortStrategy { _dragDropRegistry; _element; _sortPredicate; _itemPositions = []; _activeDraggables; orientation = 'vertical'; direction = 'ltr'; constructor(_dragDropRegistry) { this._dragDropRegistry = _dragDropRegistry; } _previousSwap = { drag: null, delta: 0, overlaps: false }; start(items) { this.withItems(items); } sort(item, pointerX, pointerY, pointerDelta) { const siblings = this._itemPositions; const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY, pointerDelta); if (newIndex === -1 && siblings.length > 0) { return null; } const isHorizontal = this.orientation === 'horizontal'; const currentIndex = siblings.findIndex(currentItem => currentItem.drag === item); const siblingAtNewPosition = siblings[newIndex]; const currentPosition = siblings[currentIndex].clientRect; const newPosition = siblingAtNewPosition.clientRect; const delta = currentIndex > newIndex ? 1 : -1; const itemOffset = this._getItemOffsetPx(currentPosition, newPosition, delta); const siblingOffset = this._getSiblingOffsetPx(currentIndex, siblings, delta); const oldOrder = siblings.slice(); moveItemInArray(siblings, currentIndex, newIndex); siblings.forEach((sibling, index) => { if (oldOrder[index] === sibling) { return; } const isDraggedItem = sibling.drag === item; const offset = isDraggedItem ? itemOffset : siblingOffset; const elementToOffset = isDraggedItem ? item.getPlaceholderElement() : sibling.drag.getRootElement(); sibling.offset += offset; const transformAmount = Math.round(sibling.offset * (1 / sibling.drag.scale)); if (isHorizontal) { elementToOffset.style.transform = combineTransforms(`translate3d(${transformAmount}px, 0, 0)`, sibling.initialTransform); adjustDomRect(sibling.clientRect, 0, offset); } else { elementToOffset.style.transform = combineTransforms(`translate3d(0, ${transformAmount}px, 0)`, sibling.initialTransform); adjustDomRect(sibling.clientRect, offset, 0); } }); this._previousSwap.overlaps = isInsideClientRect(newPosition, pointerX, pointerY); this._previousSwap.drag = siblingAtNewPosition.drag; this._previousSwap.delta = isHorizontal ? pointerDelta.x : pointerDelta.y; return { previousIndex: currentIndex, currentIndex: newIndex }; } enter(item, pointerX, pointerY, index) { const newIndex = index == null || index < 0 ? this._getItemIndexFromPointerPosition(item, pointerX, pointerY) : index; const activeDraggables = this._activeDraggables; const currentIndex = activeDraggables.indexOf(item); const placeholder = item.getPlaceholderElement(); let newPositionReference = activeDraggables[newIndex]; if (newPositionReference === item) { newPositionReference = activeDraggables[newIndex + 1]; } if (!newPositionReference && (newIndex == null || newIndex === -1 || newIndex < activeDraggables.length - 1) && this._shouldEnterAsFirstChild(pointerX, pointerY)) { newPositionReference = activeDraggables[0]; } if (currentIndex > -1) { activeDraggables.splice(currentIndex, 1); } if (newPositionReference && !this._dragDropRegistry.isDragging(newPositionReference)) { const element = newPositionReference.getRootElement(); element.parentElement.insertBefore(placeholder, element); activeDraggables.splice(newIndex, 0, item); } else { this._element.appendChild(placeholder); activeDraggables.push(item); } placeholder.style.transform = ''; this._cacheItemPositions(); } withItems(items) { this._activeDraggables = items.slice(); this._cacheItemPositions(); } withSortPredicate(predicate) { this._sortPredicate = predicate; } reset() { this._activeDraggables?.forEach(item => { const rootElement = item.getRootElement(); if (rootElement) { const initialTransform = this._itemPositions.find(p => p.drag === item)?.initialTransform; rootElement.style.transform = initialTransform || ''; } }); this._itemPositions = []; this._activeDraggables = []; this._previousSwap.drag = null; this._previousSwap.delta = 0; this._previousSwap.overlaps = false; } getActiveItemsSnapshot() { return this._activeDraggables; } getItemIndex(item) { return this._getVisualItemPositions().findIndex(currentItem => currentItem.drag === item); } getItemAtIndex(index) { return this._getVisualItemPositions()[index]?.drag || null; } updateOnScroll(topDifference, leftDifference) { this._itemPositions.forEach(({ clientRect }) => { adjustDomRect(clientRect, topDifference, leftDifference); }); this._itemPositions.forEach(({ drag }) => { if (this._dragDropRegistry.isDragging(drag)) { drag._sortFromLastPointerPosition(); } }); } withElementContainer(container) { this._element = container; } _cacheItemPositions() { const isHorizontal = this.orientation === 'horizontal'; this._itemPositions = this._activeDraggables.map(drag => { const elementToMeasure = drag.getVisibleElement(); return { drag, offset: 0, initialTransform: elementToMeasure.style.transform || '', clientRect: getMutableClientRect(elementToMeasure) }; }).sort((a, b) => { return isHorizontal ? a.clientRect.left - b.clientRect.left : a.clientRect.top - b.clientRect.top; }); } _getVisualItemPositions() { return this.orientation === 'horizontal' && this.direction === 'rtl' ? this._itemPositions.slice().reverse() : this._itemPositions; } _getItemOffsetPx(currentPosition, newPosition, delta) { const isHorizontal = this.orientation === 'horizontal'; let itemOffset = isHorizontal ? newPosition.left - currentPosition.left : newPosition.top - currentPosition.top; if (delta === -1) { itemOffset += isHorizontal ? newPosition.width - currentPosition.width : newPosition.height - currentPosition.height; } return itemOffset; } _getSiblingOffsetPx(currentIndex, siblings, delta) { const isHorizontal = this.orientation === 'horizontal'; const currentPosition = siblings[currentIndex].clientRect; const immediateSibling = siblings[currentIndex + delta * -1]; let siblingOffset = currentPosition[isHorizontal ? 'width' : 'height'] * delta; if (immediateSibling) { const start = isHorizontal ? 'left' : 'top'; const end = isHorizontal ? 'right' : 'bottom'; if (delta === -1) { siblingOffset -= immediateSibling.clientRect[start] - currentPosition[end]; } else { siblingOffset += currentPosition[start] - immediateSibling.clientRect[end]; } } return siblingOffset; } _shouldEnterAsFirstChild(pointerX, pointerY) { if (!this._activeDraggables.length) { return false; } const itemPositions = this._itemPositions; const isHorizontal = this.orientation === 'horizontal'; const reversed = itemPositions[0].drag !== this._activeDraggables[0]; if (reversed) { const lastItemRect = itemPositions[itemPositions.length - 1].clientRect; return isHorizontal ? pointerX >= lastItemRect.right : pointerY >= lastItemRect.bottom; } else { const firstItemRect = itemPositions[0].clientRect; return isHorizontal ? pointerX <= firstItemRect.left : pointerY <= firstItemRect.top; } } _getItemIndexFromPointerPosition(item, pointerX, pointerY, delta) { const isHorizontal = this.orientation === 'horizontal'; const index = this._itemPositions.findIndex(({ drag, clientRect }) => { if (drag === item) { return false; } if (delta) { const direction = isHorizontal ? delta.x : delta.y; if (drag === this._previousSwap.drag && this._previousSwap.overlaps && direction === this._previousSwap.delta) { return false; } } return isHorizontal ? pointerX >= Math.floor(clientRect.left) && pointerX < Math.floor(clientRect.right) : pointerY >= Math.floor(clientRect.top) && pointerY < Math.floor(clientRect.bottom); }); return index === -1 || !this._sortPredicate(index, item) ? -1 : index; } } class MixedSortStrategy { _document; _dragDropRegistry; _element; _sortPredicate; _rootNode; _activeItems; _previousSwap = { drag: null, deltaX: 0, deltaY: 0, overlaps: false }; _relatedNodes = []; constructor(_document, _dragDropRegistry) { this._document = _document; this._dragDropRegistry = _dragDropRegistry; } start(items) { const childNodes = this._element.childNodes; this._relatedNodes = []; for (let i = 0; i < childNodes.length; i++) { const node = childNodes[i]; this._relatedNodes.push([node, node.nextSibling]); } this.withItems(items); } sort(item, pointerX, pointerY, pointerDelta) { const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY); const previousSwap = this._previousSwap; if (newIndex === -1 || this._activeItems[newIndex] === item) { return null; } const toSwapWith = this._activeItems[newIndex]; if (previousSwap.drag === toSwapWith && previousSwap.overlaps && previousSwap.deltaX === pointerDelta.x && previousSwap.deltaY === pointerDelta.y) { return null; } const previousIndex = this.getItemIndex(item); const current = item.getPlaceholderElement(); const overlapElement = toSwapWith.getRootElement(); if (newIndex > previousIndex) { overlapElement.after(current); } else { overlapElement.before(current); } moveItemInArray(this._activeItems, previousIndex, newIndex); const newOverlapElement = this._getRootNode().elementFromPoint(pointerX, pointerY); previousSwap.deltaX = pointerDelta.x; previousSwap.deltaY = pointerDelta.y; previousSwap.drag = toSwapWith; previousSwap.overlaps = overlapElement === newOverlapElement || overlapElement.contains(newOverlapElement); return { previousIndex, currentIndex: newIndex }; } enter(item, pointerX, pointerY, index) { const currentIndex = this._activeItems.indexOf(item); if (currentIndex > -1) { this._activeItems.splice(currentIndex, 1); } let enterIndex = index == null || index < 0 ? this._getItemIndexFromPointerPosition(item, pointerX, pointerY) : index; if (enterIndex === -1) { enterIndex = this._getClosestItemIndexToPointer(item, pointerX, pointerY); } const targetItem = this._activeItems[enterIndex]; if (targetItem && !this._dragDropRegistry.isDragging(targetItem)) { this._activeItems.splice(enterIndex, 0, item); targetItem.getRootElement().before(item.getPlaceholderElement()); } else { this._activeItems.push(item); this._element.appendChild(item.getPlaceholderElement()); } } withItems(items) { this._activeItems = items.slice(); } withSortPredicate(predicate) { this._sortPredicate = predicate; } reset() { const root = this._element; const previousSwap = this._previousSwap; for (let i = this._relatedNodes.length - 1; i > -1; i--) { const [node, nextSibling] = this._relatedNodes[i]; if (node.parentNode === root && node.nextSibling !== nextSibling) { if (nextSibling === null) { root.appendChild(node); } else if (nextSibling.parentNode === root) { root.insertBefore(node, nextSibling); } } } this._relatedNodes = []; this._activeItems = []; previousSwap.drag = null; previousSwap.deltaX = previousSwap.deltaY = 0; previousSwap.overlaps = false; } getActiveItemsSnapshot() { return this._activeItems; } getItemIndex(item) { return this._activeItems.indexOf(item); } getItemAtIndex(index) { return this._activeItems[index] || null; } updateOnScroll() { this._activeItems.forEach(item => { if (this._dragDropRegistry.isDragging(item)) { item._sortFromLastPointerPosition(); } }); } withElementContainer(container) { if (container !== this._element) { this._element = container; this._rootNode = undefined; } } _getItemIndexFromPointerPosition(item, pointerX, pointerY) { const elementAtPoint = this._getRootNode().elementFromPoint(Math.floor(pointerX), Math.floor(pointerY)); const index = elementAtPoint ? this._activeItems.findIndex(item => { const root = item.getRootElement(); return elementAtPoint === root || root.contains(elementAtPoint); }) : -1; return index === -1 || !this._sortPredicate(index, item) ? -1 : index; } _getRootNode() { if (!this._rootNode) { this._rootNode = _getShadowRoot(this._element) || this._document; } return this._rootNode; } _getClosestItemIndexToPointer(item, pointerX, pointerY) { if (this._activeItems.length === 0) { return -1; } if (this._activeItems.length === 1) { return 0; } let minDistance = Infinity; let minIndex = -1; for (let i = 0; i < this._activeItems.length; i++) { const current = this._activeItems[i]; if (current !== item) { const { x, y } = current.getRootElement().getBoundingClientRect(); const distance = Math.hypot(pointerX - x, pointerY - y); if (distance < minDistance) { minDistance = distance; minIndex = i; } } } return minIndex; } } const DROP_PROXIMITY_THRESHOLD = 0.05; const SCROLL_PROXIMITY_THRESHOLD = 0.05; var AutoScrollVerticalDirection; (function (AutoScrollVerticalDirection) { AutoScrollVerticalDirection[AutoScrollVerticalDirection["NONE"] = 0] = "NONE"; AutoScrollVerticalDirection[AutoScrollVerticalDirection["UP"] = 1] = "UP"; AutoScrollVerticalDirection[AutoScrollVerticalDirection["DOWN"] = 2] = "DOWN"; })(AutoScrollVerticalDirection || (AutoScrollVerticalDirection = {})); var AutoScrollHorizontalDirection; (function (AutoScrollHorizontalDirection) { AutoScrollHorizontalDirection[AutoScrollHorizontalDirection["NONE"] = 0] = "NONE"; AutoScrollHorizontalDirection[AutoScrollHorizontalDirection["LEFT"] = 1] = "LEFT"; AutoScrollHorizontalDirection[AutoScrollHorizontalDirection["RIGHT"] = 2] = "RIGHT"; })(AutoScrollHorizontalDirection || (AutoScrollHorizontalDirection = {})); function createDropListRef(injector, element) { return new DropListRef(element, injector.get(DragDropRegistry), injector.get(DOCUMENT), injector.get(NgZone), injector.get(ViewportRuler)); } class DropListRef { _dragDropRegistry; _ngZone; _viewportRuler; element; disabled = false; sortingDisabled = false; lockAxis = null; autoScrollDisabled = false; autoScrollStep = 2; hasAnchor = false; enterPredicate = () => true; sortPredicate = () => true; beforeStarted = new Subject(); entered = new Subject(); exited = new Subject(); dropped = new Subject(); sorted = new Subject(); receivingStarted = new Subject(); receivingStopped = new Subject(); data; _container; _isDragging = false; _parentPositions; _sortStrategy; _domRect; _draggables = []; _siblings = []; _activeSiblings = new Set(); _viewportScrollSubscription = Subscription.EMPTY; _verticalScrollDirection = AutoScrollVerticalDirection.NONE; _horizontalScrollDirection = AutoScrollHorizontalDirection.NONE; _scrollNode; _stopScrollTimers = new Subject(); _cachedShadowRoot = null; _document; _scrollableElements = []; _initialScrollSnap; _direction = 'ltr'; constructor(element, _dragDropRegistry, _document, _ngZone, _viewportRuler) { this._dragDropRegistry = _dragDropRegistry; this._ngZone = _ngZone; this._viewportRuler = _viewportRuler; const coercedElement = this.element = coerceElement(element); this._document = _document; this.withOrientation('vertical').withElementContainer(coercedElement); _dragDropRegistry.registerDropContainer(this); this._parentPositions = new ParentPositionTracker(_document); } dispose() { this._stopScrolling(); this._stopScrollTimers.complete(); this._viewportScrollSubscription.unsubscribe(); this.beforeStarted.complete(); this.entered.complete(); this.exited.complete(); this.dropped.complete(); this.sorted.complete(); this.receivingStarted.complete(); this.receivingStopped.complete(); this._activeSiblings.clear(); this._scrollNode = null; this._parentPositions.clear(); this._dragDropRegistry.removeDropContainer(this); } isDragging() { return this._isDragging; } start() { this._draggingStarted(); this._notifyReceivingSiblings(); } enter(item, pointerX, pointerY, index) { this._draggingStarted(); if (index == null && this.sortingDisabled) { index = this._draggables.indexOf(item); } this._sortStrategy.enter(item, pointerX, pointerY, index); this._cacheParentPositions(); this._notifyReceivingSiblings(); this.entered.next({ item, container: this, currentIndex: this.getItemIndex(item) }); } exit(item) { this._reset(); this.exited.next({ item, container: this }); } drop(item, currentIndex, previousIndex, previousContainer, isPointerOverContainer, distance, dropPoint, event = {}) { this._reset(); this.dropped.next({ item, currentIndex, previousIndex, container: this, previousContainer, isPointerOverContainer, distance, dropPoint, event }); } withItems(items) { const previousItems = this._draggables; this._draggables = items; items.forEach(item => item._withDropContainer(this)); if (this.isDragging()) { const draggedItems = previousItems.filter(item => item.isDragging()); if (draggedItems.every(item => items.indexOf(item) === -1)) { this._reset(); } else { this._sortStrategy.withItems(this._draggables); } } return this; } withDirection(direction) { this._direction = direction; if (this._sortStrategy instanceof SingleAxisSortStrategy) { this._sortStrategy.direction = direction; } return this; } connectedTo(connectedTo) { this._siblings = connectedTo.slice(); return this; } withOrientation(orientation) { if (orientation === 'mixed') { this._sortStrategy = new MixedSortStrategy(this._document, this._dragDropRegistry); } else { const strategy = new SingleAxisSortStrategy(this._dragDropRegistry); strategy.direction = this._direction; strategy.orientation = orientation; this._sortStrategy = strategy; } this._sortStrategy.withElementContainer(this._container); this._sortStrategy.withSortPredicate((index, item) => this.sortPredicate(index, item, this)); return this; } withScrollableParents(elements) { const element = this._container; this._scrollableElements = elements.indexOf(element) === -1 ? [element, ...elements] : elements.slice(); return this; } withElementContainer(container) { if (container === this._container) { return this; } const element = coerceElement(this.element); if ((typeof ngDevMode === 'undefined' || ngDevMode) && container !== element && !element.contains(container)) { throw new Error('Invalid DOM structure for drop list. Alternate container element must be a descendant of the drop list.'); } const oldContainerIndex = this._scrollableElements.indexOf(this._container); const newContainerIndex = this._scrollableElements.indexOf(container); if (oldContainerIndex > -1) { this._scrollableElements.splice(oldContainerIndex, 1); } if (newContainerIndex > -1) { this._scrollableElements.splice(newContainerIndex, 1); } if (this._sortStrategy) { this._sortStrategy.withElementContainer(container); } this._cachedShadowRoot = null; this._scrollableElements.unshift(container); this._container = container; return this; } getScrollableParents() { return this._scrollableElements; } getItemIndex(item) { return this._isDragging ? this._sortStrategy.getItemIndex(item) : this._draggables.indexOf(item); } getItemAtIndex(index) { return this._isDragging ? this._sortStrategy.getItemAtIndex(index) : this._draggables[index] || null; } isReceiving() { return this._activeSiblings.size > 0; } _sortItem(item, pointerX, pointerY, pointerDelta) { if (this.sortingDisabled || !this._domRect || !isPointerNearDomRect(this._domRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) { return; } const result = this._sortStrategy.sort(item, pointerX, pointerY, pointerDelta); if (result) { this.sorted.next({ previousIndex: result.previousIndex, currentIndex: result.currentIndex, container: this, item }); } } _startScrollingIfNecessary(pointerX, pointerY) { if (this.autoScrollDisabled) { return; } let scrollNode; let verticalScrollDirection = AutoScrollVerticalDirection.NONE; let horizontalScrollDirection = AutoScrollHorizontalDirection.NONE; this._parentPositions.positions.forEach((position, element) => { if (element === this._document || !position.clientRect || scrollNode) { return; } if (isPointerNearDomRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) { [verticalScrollDirection, horizontalScrollDirection] = getElementScrollDirections(element, position.clientRect, this._direction, pointerX, pointerY); if (verticalScrollDirection || horizontalScrollDirection) { scrollNode = element; } } }); if (!verticalScrollDirection && !horizontalScrollDirection) { const { width, height } = this._viewportRuler.getViewportSize(); const domRect = { width, height, top: 0, right: width, bottom: height, left: 0 }; verticalScrollDirection = getVerticalScrollDirection(domRect, pointerY); horizontalScrollDirection = getHorizontalScrollDirection(domRect, pointerX); scrollNode = window; } if (scrollNode && (verticalScrollDirection !== this._verticalScrollDirection || horizontalScrollDirection !== this._horizontalScrollDirection || scrollNode !== this._scrollNode)) { this._verticalScrollDirection = verticalScrollDirection; this._horizontalScrollDirection = horizontalScrollDirection; this._scrollNode = scrollNode; if ((verticalScrollDirection || horizontalScrollDirection) && scrollNode) { this._ngZone.runOutsideAngular(this._startScrollInterval); } else { this._stopScrolling(); } } } _stopScrolling() { this._stopScrollTimers.next(); } _draggingStarted() { const styles = this._container.style; this.beforeStarted.next(); this._isDragging = true; if ((typeof ngDevMode === 'undefined' || ngDevMode) && this._container !== coerceElement(this.element)) { for (const drag of this._draggables) { if (!drag.isDragging() && drag.getVisibleElement().parentNode !== this._container) { throw new Error('Invalid DOM structure for drop list. All items must be placed directly inside of the element container.'); } } } this._initialScrollSnap = styles.msScrollSnapType || styles.scrollSnapType || ''; styles.scrollSnapType = styles.msScrollSnapType = 'none'; this._sortStrategy.start(this._draggables); this._cacheParentPositions(); this._viewportScrollSubscription.unsubscribe(); this._listenToScrollEvents(); } _cacheParentPositions() { this._parentPositions.cache(this._scrollableElements); this._domRect = this._parentPositions.positions.get(this._container).clientRect; } _reset() { this._isDragging = false; const styles = this._container.style; styles.scrollSnapType = styles.msScrollSnapType = this._initialScrollSnap; this._siblings.forEach(sibling => sibling._stopReceiving(this)); this._sortStrategy.reset(); this._stopScrolling(); this._viewportScrollSubscription.unsubscribe(); this._parentPositions.clear(); } _startScrollInterval = () => { this._stopScrolling(); interval(0, animationFrameScheduler).pipe(takeUntil(this._stopScrollTimers)).subscribe(() => { const node = this._scrollNode; const scrollStep = this.autoScrollStep; if (this._verticalScrollDirection === AutoScrollVerticalDirection.UP) { node.scrollBy(0, -scrollStep); } else if (this._verticalScrollDirection === AutoScrollVerticalDirection.DOWN) { node.scrollBy(0, scrollStep); } if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.LEFT) { node.scrollBy(-scrollStep, 0); } else if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.RIGHT) { node.scrollBy(scrollStep, 0); } }); }; _isOverContainer(x, y) { return this._domRect != null && isInsideClientRect(this._domRect, x, y); } _getSiblingContainerFromPosition(item, x, y) { return this._siblings.find(sibling => sibling._canReceive(item, x, y)); } _canReceive(item, x, y) { if (!this._domRect || !isInsideClientRect(this._domRect, x, y) || !this.enterPredicate(item, this)) { return false; } const elementFromPoint = this._getShadowRoot().elementFromPoint(x, y); if (!elementFromPoint) { return false; } return elementFromPoint === this._container || this._container.contains(elementFromPoint); } _startReceiving(sibling, items) { const activeSiblings = this._activeSiblings; if (!activeSiblings.has(sibling) && items.every(item => { return this.enterPredicate(item, this) || this._draggables.indexOf(item) > -1; })) { activeSiblings.add(sibling); this._cacheParentPositions(); this._listenToScrollEvents(); this.receivingStarted.next({ initiator: sibling, receiver: this, items }); } } _stopReceiving(sibling) { this._activeSiblings.delete(sibling); this._viewportScrollSubscription.unsubscribe(); this.receivingStopped.next({ initiator: sibling, receiver: this }); } _listenToScrollEvents() { this._viewportScrollSubscription = this._dragDropRegistry.scrolled(this._getShadowRoot()).subscribe(event => { if (this.isDragging()) { const scrollDifference = this._parentPositions.handleScroll(event); if (scrollDifference) { this._sortStrategy.updateOnScroll(scrollDifference.top, scrollDifference.left); } } else if (this.isReceiving()) { this._cacheParentPositions(); } }); } _getShadowRoot() { if (!this._cachedShadowRoot) { const shadowRoot = _getShadowRoot(this._container); this._cachedShadowRoot = shadowRoot || this._document; } return this._cachedShadowRoot; } _notifyReceivingSiblings() { const draggedItems = this._sortStrategy.getActiveItemsSnapshot().filter(item => item.isDragging()); this._siblings.forEach(sibling => sibling._startReceiving(this, draggedItems)); } } function getVerticalScrollDirection(clientRect, pointerY) { const { top, bottom, height } = clientRect; const yThreshold = height * SCROLL_PROXIMITY_THRESHOLD; if (pointerY >= top - yThreshold && pointerY <= top + yThreshold) { return AutoScrollVerticalDirection.UP; } else if (pointerY >= bottom - yThreshold && pointerY <= bottom + yThreshold) { return AutoScrollVerticalDirection.DOWN; } return AutoScrollVerticalDirection.NONE; } function getHorizontalScrollDirection(clientRect, pointerX) { const { left, right, width } = clientRect; const xThreshold = width * SCROLL_PROXIMITY_THRESHOLD; if (pointerX >= left - xThreshold && pointerX <= left + xThreshold) { return AutoScrollHorizontalDirection.LEFT; } else if (pointerX >= right - xThreshold && pointerX <= right + xThreshold) { return AutoScrollHorizontalDirection.RIGHT; } return AutoScrollHorizontalDirection.NONE; } function getElementScrollDirections(element, clientRect, direction, pointerX, pointerY) { const computedVertical = getVerticalScrollDirection(clientRect, pointerY); const computedHorizontal = getHorizontalScrollDirection(clientRect, pointerX); let verticalScrollDirection = AutoScrollVerticalDirection.NONE; let horizontalScrollDirection = AutoScrollHorizontalDirection.NONE; if (computedVertical) { const scrollTop = element.scrollTop; if (computedVertical === AutoScrollVerticalDirection.UP) { if (scrollTop > 0) { verticalScrollDirection = AutoScrollVerticalDirection.UP; } } else if (element.scrollHeight - scrollTop > element.clientHeight) { verticalScrollDirection = AutoScrollVerticalDirection.DOWN; } } if (computedHorizontal) { const scrollLeft = element.scrollLeft; if (direction === 'rtl') { if (computedHorizontal === AutoScrollHorizontalDirection.RIGHT) { if (scrollLeft < 0) { horizontalScrollDirection = AutoScrollHorizontalDirection.RIGHT; } } else if (element.scrollWidth + scrollLeft > element.clientWidth) { horizontalScrollDirection = AutoScrollHorizontalDirection.LEFT; } } else { if (computedHorizontal === AutoScrollHorizontalDirection.LEFT) { if (scrollLeft > 0) { horizontalScrollDirection = AutoScrollHorizontalDirection.LEFT; } } else if (element.scrollWidth - scrollLeft > element.clientWidth) { horizontalScrollDirection = AutoScrollHorizontalDirection.RIGHT; } } } return [verticalScrollDirection, horizontalScrollDirection]; } class DragDrop { _injector = inject(Injector); constructor() {} createDrag(element, config) { return createDragRef(this._injector, element, config); } createDropList(element) { return createDropListRef(this._injector, element); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DragDrop, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DragDrop, providedIn: 'root' }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DragDrop, decorators: [{ type: Injectable, args: [{ providedIn: 'root' }] }], ctorParameters: () => [] }); const CDK_DRAG_PARENT = new InjectionToken('CDK_DRAG_PARENT'); function assertElementNode(node, name) { if (node.nodeType !== 1) { throw Error(`${name} must be attached to an element node. ` + `Currently attached to "${node.nodeName}".`); } } const CDK_DRAG_HANDLE = new InjectionToken('CdkDragHandle'); class CdkDragHandle { element = inject(ElementRef); _parentDrag = inject(CDK_DRAG_PARENT, { optional: true, skipSelf: true }); _dragDropRegistry = inject(DragDropRegistry); _stateChanges = new Subject(); get disabled() { return this._disabled; } set disabled(value) { this._disabled = value; this._stateChanges.next(this); } _disabled = false; constructor() { if (typeof ngDevMode === 'undefined' || ngDevMode) { assertElementNode(this.element.nativeElement, 'cdkDragHandle'); } this._parentDrag?._addHandle(this); } ngAfterViewInit() { if (!this._parentDrag) { let parent = this.element.nativeElement.parentElement; while (parent) { const ref = this._dragDropRegistry.getDragDirectiveForNode(parent); if (ref) { this._parentDrag = ref; ref._addHandle(this); break; } parent = parent.parentElement; } } } ngOnDestroy() { this._parentDrag?._removeHandle(this); this._stateChanges.complete(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDragHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.3", type: CdkDragHandle, isStandalone: true, selector: "[cdkDragHandle]", inputs: { disabled: ["cdkDragHandleDisabled", "disabled", booleanAttribute] }, host: { classAttribute: "cdk-drag-handle" }, providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }], ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDragHandle, decorators: [{ type: Directive, args: [{ selector: '[cdkDragHandle]', host: { 'class': 'cdk-drag-handle' }, providers: [{ provide: CDK_DRAG_HANDLE, useExisting: CdkDragHandle }] }] }], ctorParameters: () => [], propDecorators: { disabled: [{ type: Input, args: [{ alias: 'cdkDragHandleDisabled', transform: booleanAttribute }] }] } }); const CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFIG'); const CDK_DROP_LIST = new InjectionToken('CdkDropList'); class CdkDrag { element = inject(ElementRef); dropContainer = inject(CDK_DROP_LIST, { optional: true, skipSelf: true }); _ngZone = inject(NgZone); _viewContainerRef = inject(ViewContainerRef); _dir = inject(Directionality, { optional: true }); _changeDetectorRef = inject(ChangeDetectorRef); _selfHandle = inject(CDK_DRAG_HANDLE, { optional: true, self: true }); _parentDrag = inject(CDK_DRAG_PARENT, { optional: true, skipSelf: true }); _dragDropRegistry = inject(DragDropRegistry); _destroyed = new Subject(); _handles = new BehaviorSubject([]); _previewTemplate = null; _placeholderTemplate = null; _dragRef; data; lockAxis = null; rootElementSelector; boundaryElement; dragStartDelay; freeDragPosition; get disabled() { return this._disabled || !!(this.dropContainer && this.dropContainer.disabled); } set disabled(value) { this._disabled = value; this._dragRef.disabled = this._disabled; } _disabled = false; constrainPosition; previewClass; previewContainer; scale = 1; started = new EventEmitter(); released = new EventEmitter(); ended = new EventEmitter(); entered = new EventEmitter(); exited = new EventEmitter(); dropped = new EventEmitter(); moved = new Observable(observer => { const subscription = this._dragRef.moved.pipe(map(movedEvent => ({ source: this, pointerPosition: movedEvent.pointerPosition, event: movedEvent.event, delta: movedEvent.delta, distance: movedEvent.distance }))).subscribe(observer); return () => { subscription.unsubscribe(); }; }); _injector = inject(Injector); constructor() { const dropContainer = this.dropContainer; const config = inject(CDK_DRAG_CONFIG, { optional: true }); this._dragRef = createDragRef(this._injector, this.element, { dragStartThreshold: config && config.dragStartThreshold != null ? config.dragStartThreshold : 5, pointerDirectionChangeThreshold: config && config.pointerDirectionChangeThreshold != null ? config.pointerDirectionChangeThreshold : 5, zIndex: config?.zIndex }); this._dragRef.data = this; this._dragDropRegistry.registerDirectiveNode(this.element.nativeElement, this); if (config) { this._assignDefaults(config); } if (dropContainer) { dropContainer.addItem(this); dropContainer._dropListRef.beforeStarted.pipe(takeUntil(this._destroyed)).subscribe(() => { this._dragRef.scale = this.scale; }); } this._syncInputs(this._dragRef); this._handleEvents(this._dragRef); } getPlaceholderElement() { return this._dragRef.getPlaceholderElement(); } getRootElement() { return this._dragRef.getRootElement(); } reset() { this._dragRef.reset(); } resetToBoundary() { this._dragRef.resetToBoundary(); } getFreeDragPosition() { return this._dragRef.getFreeDragPosition(); } setFreeDragPosition(value) { this._dragRef.setFreeDragPosition(value); } ngAfterViewInit() { afterNextRender(() => { this._updateRootElement(); this._setupHandlesListener(); this._dragRef.scale = this.scale; if (this.freeDragPosition) { this._dragRef.setFreeDragPosition(this.freeDragPosition); } }, { injector: this._injector }); } ngOnChanges(changes) { const rootSelectorChange = changes['rootElementSelector']; const positionChange = changes['freeDragPosition']; if (rootSelectorChange && !rootSelectorChange.firstChange) { this._updateRootElement(); } this._dragRef.scale = this.scale; if (positionChange && !positionChange.firstChange && this.freeDragPosition) { this._dragRef.setFreeDragPosition(this.freeDragPosition); } } ngOnDestroy() { if (this.dropContainer) { this.dropContainer.removeItem(this); } this._dragDropRegistry.removeDirectiveNode(this.element.nativeElement); this._ngZone.runOutsideAngular(() => { this._handles.complete(); this._destroyed.next(); this._destroyed.complete(); this._dragRef.dispose(); }); } _addHandle(handle) { const handles = this._handles.getValue(); handles.push(handle); this._handles.next(handles); } _removeHandle(handle) { const handles = this._handles.getValue(); const index = handles.indexOf(handle); if (index > -1) { handles.splice(index, 1); this._handles.next(handles); } } _setPreviewTemplate(preview) { this._previewTemplate = preview; } _resetPreviewTemplate(preview) { if (preview === this._previewTemplate) { this._previewTemplate = null; } } _setPlaceholderTemplate(placeholder) { this._placeholderTemplate = placeholder; } _resetPlaceholderTemplate(placeholder) { if (placeholder === this._placeholderTemplate) { this._placeholderTemplate = null; } } _updateRootElement() { const element = this.element.nativeElement; let rootElement = element; if (this.rootElementSelector) { rootElement = element.closest !== undefined ? element.closest(this.rootElementSelector) : element.parentElement?.closest(this.rootElementSelector); } if (rootElement && (typeof ngDevMode === 'undefined' || ngDevMode)) { assertElementNode(rootElement, 'cdkDrag'); } this._dragRef.withRootElement(rootElement || element); } _getBoundaryElement() { const boundary = this.boundaryElement; if (!boundary) { return null; } if (typeof boundary === 'string') { return this.element.nativeElement.closest(boundary); } return coerceElement(boundary); } _syncInputs(ref) { ref.beforeStarted.subscribe(() => { if (!ref.isDragging()) { const dir = this._dir; const dragStartDelay = this.dragStartDelay; const placeholder = this._placeholderTemplate ? { template: this._placeholderTemplate.templateRef, context: this._placeholderTemplate.data, viewContainer: this._viewContainerRef } : null; const preview = this._previewTemplate ? { template: this._previewTemplate.templateRef, context: this._previewTemplate.data, matchSize: this._previewTemplate.matchSize, viewContainer: this._viewContainerRef } : null; ref.disabled = this.disabled; ref.lockAxis = this.lockAxis; ref.scale = this.scale; ref.dragStartDelay = typeof dragStartDelay === 'object' && dragStartDelay ? dragStartDelay : coerceNumberProperty(dragStartDelay); ref.constrainPosition = this.constrainPosition; ref.previewClass = this.previewClass; ref.withBoundaryElement(this._getBoundaryElement()).withPlaceholderTemplate(placeholder).withPreviewTemplate(preview).withPreviewContainer(this.previewContainer || 'global'); if (dir) { ref.withDirection(dir.value); } } }); ref.beforeStarted.pipe(take(1)).subscribe(() => { if (this._parentDrag) { ref.withParent(this._parentDrag._dragRef); return; } let parent = this.element.nativeElement.parentElement; while (parent) { const parentDrag = this._dragDropRegistry.getDragDirectiveForNode(parent); if (parentDrag) { ref.withParent(parentDrag._dragRef); break; } parent = parent.parentElement; } }); } _handleEvents(ref) { ref.started.subscribe(startEvent => { this.started.emit({ source: this, event: startEvent.event }); this._changeDetectorRef.markForCheck(); }); ref.released.subscribe(releaseEvent => { this.released.emit({ source: this, event: releaseEvent.event }); }); ref.ended.subscribe(endEvent => { this.ended.emit({ source: this, distance: endEvent.distance, dropPoint: endEvent.dropPoint, event: endEvent.event }); this._changeDetectorRef.markForCheck(); }); ref.entered.subscribe(enterEvent => { this.entered.emit({ container: enterEvent.container.data, item: this, currentIndex: enterEvent.currentIndex }); }); ref.exited.subscribe(exitEvent => { this.exited.emit({ container: exitEvent.container.data, item: this }); }); ref.dropped.subscribe(dropEvent => { this.dropped.emit({ previousIndex: dropEvent.previousIndex, currentIndex: dropEvent.currentIndex, previousContainer: dropEvent.previousContainer.data, container: dropEvent.container.data, isPointerOverContainer: dropEvent.isPointerOverContainer, item: this, distance: dropEvent.distance, dropPoint: dropEvent.dropPoint, event: dropEvent.event }); }); } _assignDefaults(config) { const { lockAxis, dragStartDelay, constrainPosition, previewClass, boundaryElement, draggingDisabled, rootElementSelector, previewContainer } = config; this.disabled = draggingDisabled == null ? false : draggingDisabled; this.dragStartDelay = dragStartDelay || 0; this.lockAxis = lockAxis || null; if (constrainPosition) { this.constrainPosition = constrainPosition; } if (previewClass) { this.previewClass = previewClass; } if (boundaryElement) { this.boundaryElement = boundaryElement; } if (rootElementSelector) { this.rootElementSelector = rootElementSelector; } if (previewContainer) { this.previewContainer = previewContainer; } } _setupHandlesListener() { this._handles.pipe(tap(handles => { const handleElements = handles.map(handle => handle.element); if (this._selfHandle && this.rootElementSelector) { handleElements.push(this.element); } this._dragRef.withHandles(handleElements); }), switchMap(handles => { return merge(...handles.map(item => item._stateChanges.pipe(startWith(item)))); }), takeUntil(this._destroyed)).subscribe(handleInstance => { const dragRef = this._dragRef; const handle = handleInstance.element.nativeElement; handleInstance.disabled ? dragRef.disableHandle(handle) : dragRef.enableHandle(handle); }); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDrag, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.3", type: CdkDrag, isStandalone: true, selector: "[cdkDrag]", inputs: { data: ["cdkDragData", "data"], lockAxis: ["cdkDragLockAxis", "lockAxis"], rootElementSelector: ["cdkDragRootElement", "rootElementSelector"], boundaryElement: ["cdkDragBoundary", "boundaryElement"], dragStartDelay: ["cdkDragStartDelay", "dragStartDelay"], freeDragPosition: ["cdkDragFreeDragPosition", "freeDragPosition"], disabled: ["cdkDragDisabled", "disabled", booleanAttribute], constrainPosition: ["cdkDragConstrainPosition", "constrainPosition"], previewClass: ["cdkDragPreviewClass", "previewClass"], previewContainer: ["cdkDragPreviewContainer", "previewContainer"], scale: ["cdkDragScale", "scale", numberAttribute] }, outputs: { started: "cdkDragStarted", released: "cdkDragReleased", ended: "cdkDragEnded", entered: "cdkDragEntered", exited: "cdkDragExited", dropped: "cdkDragDropped", moved: "cdkDragMoved" }, host: { properties: { "class.cdk-drag-disabled": "disabled", "class.cdk-drag-dragging": "_dragRef.isDragging()" }, classAttribute: "cdk-drag" }, providers: [{ provide: CDK_DRAG_PARENT, useExisting: CdkDrag }], exportAs: ["cdkDrag"], usesOnChanges: true, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDrag, decorators: [{ type: Directive, args: [{ selector: '[cdkDrag]', exportAs: 'cdkDrag', host: { 'class': 'cdk-drag', '[class.cdk-drag-disabled]': 'disabled', '[class.cdk-drag-dragging]': '_dragRef.isDragging()' }, providers: [{ provide: CDK_DRAG_PARENT, useExisting: CdkDrag }] }] }], ctorParameters: () => [], propDecorators: { data: [{ type: Input, args: ['cdkDragData'] }], lockAxis: [{ type: Input, args: ['cdkDragLockAxis'] }], rootElementSelector: [{ type: Input, args: ['cdkDragRootElement'] }], boundaryElement: [{ type: Input, args: ['cdkDragBoundary'] }], dragStartDelay: [{ type: Input, args: ['cdkDragStartDelay'] }], freeDragPosition: [{ type: Input, args: ['cdkDragFreeDragPosition'] }], disabled: [{ type: Input, args: [{ alias: 'cdkDragDisabled', transform: booleanAttribute }] }], constrainPosition: [{ type: Input, args: ['cdkDragConstrainPosition'] }], previewClass: [{ type: Input, args: ['cdkDragPreviewClass'] }], previewContainer: [{ type: Input, args: ['cdkDragPreviewContainer'] }], scale: [{ type: Input, args: [{ alias: 'cdkDragScale', transform: numberAttribute }] }], started: [{ type: Output, args: ['cdkDragStarted'] }], released: [{ type: Output, args: ['cdkDragReleased'] }], ended: [{ type: Output, args: ['cdkDragEnded'] }], entered: [{ type: Output, args: ['cdkDragEntered'] }], exited: [{ type: Output, args: ['cdkDragExited'] }], dropped: [{ type: Output, args: ['cdkDragDropped'] }], moved: [{ type: Output, args: ['cdkDragMoved'] }] } }); const CDK_DROP_LIST_GROUP = new InjectionToken('CdkDropListGroup'); class CdkDropListGroup { _items = new Set(); disabled = false; ngOnDestroy() { this._items.clear(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDropListGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.3", type: CdkDropListGroup, isStandalone: true, selector: "[cdkDropListGroup]", inputs: { disabled: ["cdkDropListGroupDisabled", "disabled", booleanAttribute] }, providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }], exportAs: ["cdkDropListGroup"], ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDropListGroup, decorators: [{ type: Directive, args: [{ selector: '[cdkDropListGroup]', exportAs: 'cdkDropListGroup', providers: [{ provide: CDK_DROP_LIST_GROUP, useExisting: CdkDropListGroup }] }] }], propDecorators: { disabled: [{ type: Input, args: [{ alias: 'cdkDropListGroupDisabled', transform: booleanAttribute }] }] } }); class CdkDropList { element = inject(ElementRef); _changeDetectorRef = inject(ChangeDetectorRef); _scrollDispatcher = inject(ScrollDispatcher); _dir = inject(Directionality, { optional: true }); _group = inject(CDK_DROP_LIST_GROUP, { optional: true, skipSelf: true }); _latestSortedRefs; _destroyed = new Subject(); _scrollableParentsResolved = false; static _dropLists = []; _dropListRef; connectedTo = []; data; orientation = 'vertical'; id = inject(_IdGenerator).getId('cdk-drop-list-'); lockAxis = null; get disabled() { return this._disabled || !!this._group && this._group.disabled; } set disabled(value) { this._dropListRef.disabled = this._disabled = value; } _disabled = false; sortingDisabled = false; enterPredicate = () => true; sortPredicate = () => true; autoScrollDisabled = false; autoScrollStep; elementContainerSelector = null; hasAnchor = false; dropped = new EventEmitter(); entered = new EventEmitter(); exited = new EventEmitter(); sorted = new EventEmitter(); _unsortedItems = new Set(); constructor() { const config = inject(CDK_DRAG_CONFIG, { optional: true }); const injector = inject(Injector); if (typeof ngDevMode === 'undefined' || ngDevMode) { assertElementNode(this.element.nativeElement, 'cdkDropList'); } this._dropListRef = createDropListRef(injector, this.element); this._dropListRef.data = this; if (config) { this._assignDefaults(config); } this._dropListRef.enterPredicate = (drag, drop) => { return this.enterPredicate(drag.data, drop.data); }; this._dropListRef.sortPredicate = (index, drag, drop) => { return this.sortPredicate(index, drag.data, drop.data); }; this._setupInputSyncSubscription(this._dropListRef); this._handleEvents(this._dropListRef); CdkDropList._dropLists.push(this); if (this._group) { this._group._items.add(this); } } addItem(item) { this._unsortedItems.add(item); item._dragRef._withDropContainer(this._dropListRef); if (this._dropListRef.isDragging()) { this._syncItemsWithRef(this.getSortedItems().map(item => item._dragRef)); } } removeItem(item) { this._unsortedItems.delete(item); if (this._latestSortedRefs) { const index = this._latestSortedRefs.indexOf(item._dragRef); if (index > -1) { this._latestSortedRefs.splice(index, 1); this._syncItemsWithRef(this._latestSortedRefs); } } } getSortedItems() { return Array.from(this._unsortedItems).sort((a, b) => { const documentPosition = a._dragRef.getVisibleElement().compareDocumentPosition(b._dragRef.getVisibleElement()); return documentPosition & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1; }); } ngOnDestroy() { const index = CdkDropList._dropLists.indexOf(this); if (index > -1) { CdkDropList._dropLists.splice(index, 1); } if (this._group) { this._group._items.delete(this); } this._latestSortedRefs = undefined; this._unsortedItems.clear(); this._dropListRef.dispose(); this._destroyed.next(); this._destroyed.complete(); } _setupInputSyncSubscription(ref) { if (this._dir) { this._dir.change.pipe(startWith(this._dir.value), takeUntil(this._destroyed)).subscribe(value => ref.withDirection(value)); } ref.beforeStarted.subscribe(() => { const siblings = coerceArray(this.connectedTo).map(drop => { if (typeof drop === 'string') { const correspondingDropList = CdkDropList._dropLists.find(list => list.id === drop); if (!correspondingDropList && (typeof ngDevMode === 'undefined' || ngDevMode)) { console.warn(`CdkDropList could not find connected drop list with id "${drop}"`); } return correspondingDropList; } return drop; }); if (this._group) { this._group._items.forEach(drop => { if (siblings.indexOf(drop) === -1) { siblings.push(drop); } }); } if (!this._scrollableParentsResolved) { const scrollableParents = this._scrollDispatcher.getAncestorScrollContainers(this.element).map(scrollable => scrollable.getElementRef().nativeElement); this._dropListRef.withScrollableParents(scrollableParents); this._scrollableParentsResolved = true; } if (this.elementContainerSelector) { const container = this.element.nativeElement.querySelector(this.elementContainerSelector); if (!container && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw new Error(`CdkDropList could not find an element container matching the selector "${this.elementContainerSelector}"`); } ref.withElementContainer(container); } ref.disabled = this.disabled; ref.lockAxis = this.lockAxis; 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); }); } _handleEvents(ref) { ref.beforeStarted.subscribe(() => { this._syncItemsWithRef(this.getSortedItems().map(item => item._dragRef)); this._changeDetectorRef.markForCheck(); }); ref.entered.subscribe(event => { this.entered.emit({ container: this, item: event.item.data, currentIndex: event.currentIndex }); }); ref.exited.subscribe(event => { this.exited.emit({ container: this, item: event.item.data }); this._changeDetectorRef.markForCheck(); }); ref.sorted.subscribe(event => { this.sorted.emit({ previousIndex: event.previousIndex, currentIndex: event.currentIndex, container: this, item: event.item.data }); }); ref.dropped.subscribe(dropEvent => { this.dropped.emit({ previousIndex: dropEvent.previousIndex, currentIndex: dropEvent.currentIndex, previousContainer: dropEvent.previousContainer.data, container: dropEvent.container.data, item: dropEvent.item.data, isPointerOverContainer: dropEvent.isPointerOverContainer, distance: dropEvent.distance, dropPoint: dropEvent.dropPoint, event: dropEvent.event }); this._changeDetectorRef.markForCheck(); }); merge(ref.receivingStarted, ref.receivingStopped).subscribe(() => this._changeDetectorRef.markForCheck()); } _assignDefaults(config) { const { lockAxis, draggingDisabled, sortingDisabled, listAutoScrollDisabled, listOrientation } = config; this.disabled = draggingDisabled == null ? false : draggingDisabled; this.sortingDisabled = sortingDisabled == null ? false : sortingDisabled; this.autoScrollDisabled = listAutoScrollDisabled == null ? false : listAutoScrollDisabled; this.orientation = listOrientation || 'vertical'; this.lockAxis = lockAxis || null; } _syncItemsWithRef(items) { this._latestSortedRefs = items; this._dropListRef.withItems(items); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDropList, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.3", 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: [{ provide: CDK_DROP_LIST_GROUP, useValue: undefined }, { provide: CDK_DROP_LIST, useExisting: CdkDropList }], exportAs: ["cdkDropList"], ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDropList, decorators: [{ type: Directive, args: [{ selector: '[cdkDropList], cdk-drop-list', exportAs: 'cdkDropList', providers: [{ provide: CDK_DROP_LIST_GROUP, useValue: undefined }, { provide: CDK_DROP_LIST, useExisting: CdkDropList }], host: { 'class': 'cdk-drop-list', '[attr.id]': 'id', '[class.cdk-drop-list-disabled]': 'disabled', '[class.cdk-drop-list-dragging]': '_dropListRef.isDragging()', '[class.cdk-drop-list-receiving]': '_dropListRef.isReceiving()' } }] }], ctorParameters: () => [], propDecorators: { connectedTo: [{ type: Input, args: ['cdkDropListConnectedTo'] }], data: [{ type: Input, args: ['cdkDropListData'] }], orientation: [{ type: Input, args: ['cdkDropListOrientation'] }], id: [{ type: Input }], lockAxis: [{ type: Input, args: ['cdkDropListLockAxis'] }], disabled: [{ type: Input, args: [{ alias: 'cdkDropListDisabled', transform: booleanAttribute }] }], sortingDisabled: [{ type: Input, args: [{ alias: 'cdkDropListSortingDisabled', transform: booleanAttribute }] }], enterPredicate: [{ type: Input, args: ['cdkDropListEnterPredicate'] }], sortPredicate: [{ type: Input, args: ['cdkDropListSortPredicate'] }], autoScrollDisabled: [{ type: Input, args: [{ alias: 'cdkDropListAutoScrollDisabled', transform: booleanAttribute }] }], autoScrollStep: [{ type: Input, args: ['cdkDropListAutoScrollStep'] }], elementContainerSelector: [{ type: Input, args: ['cdkDropListElementContainer'] }], hasAnchor: [{ type: Input, args: [{ alias: 'cdkDropListHasAnchor', transform: booleanAttribute }] }], dropped: [{ type: Output, args: ['cdkDropListDropped'] }], entered: [{ type: Output, args: ['cdkDropListEntered'] }], exited: [{ type: Output, args: ['cdkDropListExited'] }], sorted: [{ type: Output, args: ['cdkDropListSorted'] }] } }); const CDK_DRAG_PREVIEW = new InjectionToken('CdkDragPreview'); class CdkDragPreview { templateRef = inject(TemplateRef); _drag = inject(CDK_DRAG_PARENT, { optional: true }); data; matchSize = false; constructor() { this._drag?._setPreviewTemplate(this); } ngOnDestroy() { this._drag?._resetPreviewTemplate(this); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDragPreview, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.3", type: CdkDragPreview, isStandalone: true, selector: "ng-template[cdkDragPreview]", inputs: { data: "data", matchSize: ["matchSize", "matchSize", booleanAttribute] }, providers: [{ provide: CDK_DRAG_PREVIEW, useExisting: CdkDragPreview }], ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDragPreview, decorators: [{ type: Directive, args: [{ selector: 'ng-template[cdkDragPreview]', providers: [{ provide: CDK_DRAG_PREVIEW, useExisting: CdkDragPreview }] }] }], ctorParameters: () => [], propDecorators: { data: [{ type: Input }], matchSize: [{ type: Input, args: [{ transform: booleanAttribute }] }] } }); const CDK_DRAG_PLACEHOLDER = new InjectionToken('CdkDragPlaceholder'); class CdkDragPlaceholder { templateRef = inject(TemplateRef); _drag = inject(CDK_DRAG_PARENT, { optional: true }); data; constructor() { this._drag?._setPlaceholderTemplate(this); } ngOnDestroy() { this._drag?._resetPlaceholderTemplate(this); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDragPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: CdkDragPlaceholder, isStandalone: true, selector: "ng-template[cdkDragPlaceholder]", inputs: { data: "data" }, providers: [{ provide: CDK_DRAG_PLACEHOLDER, useExisting: CdkDragPlaceholder }], ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: CdkDragPlaceholder, decorators: [{ type: Directive, args: [{ selector: 'ng-template[cdkDragPlaceholder]', providers: [{ provide: CDK_DRAG_PLACEHOLDER, useExisting: CdkDragPlaceholder }] }] }], ctorParameters: () => [], propDecorators: { data: [{ type: Input }] } }); const DRAG_DROP_DIRECTIVES = [CdkDropList, CdkDropListGroup, CdkDrag, CdkDragHandle, CdkDragPreview, CdkDragPlaceholder]; class DragDropModule { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: DragDropModule, imports: [CdkDropList, CdkDropListGroup, CdkDrag, CdkDragHandle, CdkDragPreview, CdkDragPlaceholder], exports: [CdkScrollableModule, CdkDropList, CdkDropListGroup, CdkDrag, CdkDragHandle, CdkDragPreview, CdkDragPlaceholder] }); static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DragDropModule, providers: [DragDrop], imports: [CdkScrollableModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DragDropModule, decorators: [{ type: NgModule, args: [{ imports: DRAG_DROP_DIRECTIVES, exports: [CdkScrollableModule, ...DRAG_DROP_DIRECTIVES], providers: [DragDrop] }] }] }); export { CDK_DRAG_CONFIG, CDK_DRAG_HANDLE, CDK_DRAG_PARENT, CDK_DRAG_PLACEHOLDER, CDK_DRAG_PREVIEW, CDK_DROP_LIST, CDK_DROP_LIST_GROUP, CdkDrag, CdkDragHandle, CdkDragPlaceholder, CdkDragPreview, CdkDropList, CdkDropListGroup, DragDrop, DragDropModule, DragDropRegistry, DragRef, DropListRef, copyArrayItem, createDragRef, createDropListRef, moveItemInArray, transferArrayItem }; //# sourceMappingURL=drag-drop.mjs.map