{"version":3,"sources":["node_modules/@angular/cdk/fesm2022/drag-drop.mjs","src/app/components/base/dialog-container.component.ts"],"sourcesContent":["import * as i0 from '@angular/core';\nimport { signal, Component, ViewEncapsulation, ChangeDetectionStrategy, inject, NgZone, Injectable, RendererFactory2, InjectionToken, ElementRef, booleanAttribute, Directive, Input, ViewContainerRef, ChangeDetectorRef, EventEmitter, Injector, afterNextRender, numberAttribute, Output, TemplateRef, NgModule } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\nimport { ViewportRuler, ScrollDispatcher, CdkScrollableModule } from '@angular/cdk/scrolling';\nimport { isFakeTouchstartFromScreenReader, isFakeMousedownFromScreenReader, _IdGenerator } from '@angular/cdk/a11y';\nimport { coerceElement, coerceNumberProperty, coerceArray } from '@angular/cdk/coercion';\nimport { _getEventTarget, normalizePassiveListenerOptions, _getShadowRoot } from '@angular/cdk/platform';\nimport { Subject, Subscription, interval, animationFrameScheduler, Observable, merge, BehaviorSubject } from 'rxjs';\nimport { takeUntil, map, take, tap, switchMap, startWith } from 'rxjs/operators';\nimport { _CdkPrivateStyleLoader } from '@angular/cdk/private';\nimport { Directionality } from '@angular/cdk/bidi';\n\n/** Creates a deep clone of an element. */\nfunction deepCloneNode(node) {\n const clone = node.cloneNode(true);\n const descendantsWithId = clone.querySelectorAll('[id]');\n const nodeName = node.nodeName.toLowerCase();\n // Remove the `id` to avoid having multiple elements with the same id on the page.\n clone.removeAttribute('id');\n for (let i = 0; i < descendantsWithId.length; i++) {\n descendantsWithId[i].removeAttribute('id');\n }\n if (nodeName === 'canvas') {\n transferCanvasData(node, clone);\n } else if (nodeName === 'input' || nodeName === 'select' || nodeName === 'textarea') {\n transferInputData(node, clone);\n }\n transferData('canvas', node, clone, transferCanvasData);\n transferData('input, textarea, select', node, clone, transferInputData);\n return clone;\n}\n/** Matches elements between an element and its clone and allows for their data to be cloned. */\nfunction transferData(selector, node, clone, callback) {\n const descendantElements = node.querySelectorAll(selector);\n if (descendantElements.length) {\n const cloneElements = clone.querySelectorAll(selector);\n for (let i = 0; i < descendantElements.length; i++) {\n callback(descendantElements[i], cloneElements[i]);\n }\n }\n}\n// Counter for unique cloned radio button names.\nlet cloneUniqueId = 0;\n/** Transfers the data of one input element to another. */\nfunction transferInputData(source, clone) {\n // Browsers throw an error when assigning the value of a file input programmatically.\n if (clone.type !== 'file') {\n clone.value = source.value;\n }\n // Radio button `name` attributes must be unique for radio button groups\n // otherwise original radio buttons can lose their checked state\n // once the clone is inserted in the DOM.\n if (clone.type === 'radio' && clone.name) {\n clone.name = `mat-clone-${clone.name}-${cloneUniqueId++}`;\n }\n}\n/** Transfers the data of one canvas element to another. */\nfunction transferCanvasData(source, clone) {\n const context = clone.getContext('2d');\n if (context) {\n // In some cases `drawImage` can throw (e.g. if the canvas size is 0x0).\n // We can't do much about it so just ignore the error.\n try {\n context.drawImage(source, 0, 0);\n } catch {}\n }\n}\n\n/** Gets a mutable version of an element's bounding `DOMRect`. */\nfunction getMutableClientRect(element) {\n const rect = element.getBoundingClientRect();\n // We need to clone the `clientRect` here, because all the values on it are readonly\n // and we need to be able to update them. Also we can't use a spread here, because\n // the values on a `DOMRect` aren't own properties. See:\n // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes\n return {\n top: rect.top,\n right: rect.right,\n bottom: rect.bottom,\n left: rect.left,\n width: rect.width,\n height: rect.height,\n x: rect.x,\n y: rect.y\n };\n}\n/**\n * Checks whether some coordinates are within a `DOMRect`.\n * @param clientRect DOMRect that is being checked.\n * @param x Coordinates along the X axis.\n * @param y Coordinates along the Y axis.\n */\nfunction isInsideClientRect(clientRect, x, y) {\n const {\n top,\n bottom,\n left,\n right\n } = clientRect;\n return y >= top && y <= bottom && x >= left && x <= right;\n}\n/**\n * Updates the top/left positions of a `DOMRect`, as well as their bottom/right counterparts.\n * @param domRect `DOMRect` that should be updated.\n * @param top Amount to add to the `top` position.\n * @param left Amount to add to the `left` position.\n */\nfunction adjustDomRect(domRect, top, left) {\n domRect.top += top;\n domRect.bottom = domRect.top + domRect.height;\n domRect.left += left;\n domRect.right = domRect.left + domRect.width;\n}\n/**\n * Checks whether the pointer coordinates are close to a DOMRect.\n * @param rect DOMRect to check against.\n * @param threshold Threshold around the DOMRect.\n * @param pointerX Coordinates along the X axis.\n * @param pointerY Coordinates along the Y axis.\n */\nfunction isPointerNearDomRect(rect, threshold, pointerX, pointerY) {\n const {\n top,\n right,\n bottom,\n left,\n width,\n height\n } = rect;\n const xThreshold = width * threshold;\n const yThreshold = height * threshold;\n return pointerY > top - yThreshold && pointerY < bottom + yThreshold && pointerX > left - xThreshold && pointerX < right + xThreshold;\n}\n\n/** Keeps track of the scroll position and dimensions of the parents of an element. */\nclass ParentPositionTracker {\n _document;\n /** Cached positions of the scrollable parent elements. */\n positions = new Map();\n constructor(_document) {\n this._document = _document;\n }\n /** Clears the cached positions. */\n clear() {\n this.positions.clear();\n }\n /** Caches the positions. Should be called at the beginning of a drag sequence. */\n cache(elements) {\n this.clear();\n this.positions.set(this._document, {\n scrollPosition: this.getViewportScrollPosition()\n });\n elements.forEach(element => {\n this.positions.set(element, {\n scrollPosition: {\n top: element.scrollTop,\n left: element.scrollLeft\n },\n clientRect: getMutableClientRect(element)\n });\n });\n }\n /** Handles scrolling while a drag is taking place. */\n handleScroll(event) {\n const target = _getEventTarget(event);\n const cachedPosition = this.positions.get(target);\n if (!cachedPosition) {\n return null;\n }\n const scrollPosition = cachedPosition.scrollPosition;\n let newTop;\n let newLeft;\n if (target === this._document) {\n const viewportScrollPosition = this.getViewportScrollPosition();\n newTop = viewportScrollPosition.top;\n newLeft = viewportScrollPosition.left;\n } else {\n newTop = target.scrollTop;\n newLeft = target.scrollLeft;\n }\n const topDifference = scrollPosition.top - newTop;\n const leftDifference = scrollPosition.left - newLeft;\n // Go through and update the cached positions of the scroll\n // parents that are inside the element that was scrolled.\n this.positions.forEach((position, node) => {\n if (position.clientRect && target !== node && target.contains(node)) {\n adjustDomRect(position.clientRect, topDifference, leftDifference);\n }\n });\n scrollPosition.top = newTop;\n scrollPosition.left = newLeft;\n return {\n top: topDifference,\n left: leftDifference\n };\n }\n /**\n * Gets the scroll position of the viewport. Note that we use the scrollX and scrollY directly,\n * instead of going through the `ViewportRuler`, because the first value the ruler looks at is\n * the top/left offset of the `document.documentElement` which works for most cases, but breaks\n * if the element is offset by something like the `BlockScrollStrategy`.\n */\n getViewportScrollPosition() {\n return {\n top: window.scrollY,\n left: window.scrollX\n };\n }\n}\n\n/**\n * Gets the root HTML element of an embedded view.\n * If the root is not an HTML element it gets wrapped in one.\n */\nfunction getRootNode(viewRef, _document) {\n const rootNodes = viewRef.rootNodes;\n if (rootNodes.length === 1 && rootNodes[0].nodeType === _document.ELEMENT_NODE) {\n return rootNodes[0];\n }\n const wrapper = _document.createElement('div');\n rootNodes.forEach(node => wrapper.appendChild(node));\n return wrapper;\n}\n\n/**\n * Shallow-extends a stylesheet object with another stylesheet-like object.\n * Note that the keys in `source` have to be dash-cased.\n * @docs-private\n */\nfunction extendStyles(dest, source, importantProperties) {\n for (let key in source) {\n if (source.hasOwnProperty(key)) {\n const value = source[key];\n if (value) {\n dest.setProperty(key, value, importantProperties?.has(key) ? 'important' : '');\n } else {\n dest.removeProperty(key);\n }\n }\n }\n return dest;\n}\n/**\n * Toggles whether the native drag interactions should be enabled for an element.\n * @param element Element on which to toggle the drag interactions.\n * @param enable Whether the drag interactions should be enabled.\n * @docs-private\n */\nfunction toggleNativeDragInteractions(element, enable) {\n const userSelect = enable ? '' : 'none';\n extendStyles(element.style, {\n 'touch-action': enable ? '' : 'none',\n '-webkit-user-drag': enable ? '' : 'none',\n '-webkit-tap-highlight-color': enable ? '' : 'transparent',\n 'user-select': userSelect,\n '-ms-user-select': userSelect,\n '-webkit-user-select': userSelect,\n '-moz-user-select': userSelect\n });\n}\n/**\n * Toggles whether an element is visible while preserving its dimensions.\n * @param element Element whose visibility to toggle\n * @param enable Whether the element should be visible.\n * @param importantProperties Properties to be set as `!important`.\n * @docs-private\n */\nfunction toggleVisibility(element, enable, importantProperties) {\n extendStyles(element.style, {\n position: enable ? '' : 'fixed',\n top: enable ? '' : '0',\n opacity: enable ? '' : '0',\n left: enable ? '' : '-999em'\n }, importantProperties);\n}\n/**\n * Combines a transform string with an optional other transform\n * that exited before the base transform was applied.\n */\nfunction combineTransforms(transform, initialTransform) {\n return initialTransform && initialTransform != 'none' ? transform + ' ' + initialTransform : transform;\n}\n/**\n * Matches the target element's size to the source's size.\n * @param target Element that needs to be resized.\n * @param sourceRect Dimensions of the source element.\n */\nfunction matchElementSize(target, sourceRect) {\n target.style.width = `${sourceRect.width}px`;\n target.style.height = `${sourceRect.height}px`;\n target.style.transform = getTransform(sourceRect.left, sourceRect.top);\n}\n/**\n * Gets a 3d `transform` that can be applied to an element.\n * @param x Desired position of the element along the X axis.\n * @param y Desired position of the element along the Y axis.\n */\nfunction getTransform(x, y) {\n // Round the transforms since some browsers will\n // blur the elements for sub-pixel transforms.\n return `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`;\n}\n\n/** Parses a CSS time value to milliseconds. */\nfunction parseCssTimeUnitsToMs(value) {\n // Some browsers will return it in seconds, whereas others will return milliseconds.\n const multiplier = value.toLowerCase().indexOf('ms') > -1 ? 1 : 1000;\n return parseFloat(value) * multiplier;\n}\n/** Gets the transform transition duration, including the delay, of an element in milliseconds. */\nfunction getTransformTransitionDurationInMs(element) {\n const computedStyle = getComputedStyle(element);\n const transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property');\n const property = transitionedProperties.find(prop => prop === 'transform' || prop === 'all');\n // If there's no transition for `all` or `transform`, we shouldn't do anything.\n if (!property) {\n return 0;\n }\n // Get the index of the property that we're interested in and match\n // it up to the same index in `transition-delay` and `transition-duration`.\n const propertyIndex = transitionedProperties.indexOf(property);\n const rawDurations = parseCssPropertyValue(computedStyle, 'transition-duration');\n const rawDelays = parseCssPropertyValue(computedStyle, 'transition-delay');\n return parseCssTimeUnitsToMs(rawDurations[propertyIndex]) + parseCssTimeUnitsToMs(rawDelays[propertyIndex]);\n}\n/** Parses out multiple values from a computed style into an array. */\nfunction parseCssPropertyValue(computedStyle, name) {\n const value = computedStyle.getPropertyValue(name);\n return value.split(',').map(part => part.trim());\n}\n\n/** Inline styles to be set as `!important` while dragging. */\nconst importantProperties = new Set([\n// Needs to be important, because some `mat-table` sets `position: sticky !important`. See #22781.\n'position']);\nclass PreviewRef {\n _document;\n _rootElement;\n _direction;\n _initialDomRect;\n _previewTemplate;\n _previewClass;\n _pickupPositionOnPage;\n _initialTransform;\n _zIndex;\n _renderer;\n /** Reference to the view of the preview element. */\n _previewEmbeddedView;\n /** Reference to the preview element. */\n _preview;\n get element() {\n return this._preview;\n }\n constructor(_document, _rootElement, _direction, _initialDomRect, _previewTemplate, _previewClass, _pickupPositionOnPage, _initialTransform, _zIndex, _renderer) {\n this._document = _document;\n this._rootElement = _rootElement;\n this._direction = _direction;\n this._initialDomRect = _initialDomRect;\n this._previewTemplate = _previewTemplate;\n this._previewClass = _previewClass;\n this._pickupPositionOnPage = _pickupPositionOnPage;\n this._initialTransform = _initialTransform;\n this._zIndex = _zIndex;\n this._renderer = _renderer;\n }\n attach(parent) {\n this._preview = this._createPreview();\n parent.appendChild(this._preview);\n // The null check is necessary for browsers that don't support the popover API.\n // Note that we use a string access for compatibility with Closure.\n if (supportsPopover(this._preview)) {\n this._preview['showPopover']();\n }\n }\n destroy() {\n this._preview.remove();\n this._previewEmbeddedView?.destroy();\n this._preview = this._previewEmbeddedView = null;\n }\n setTransform(value) {\n this._preview.style.transform = value;\n }\n getBoundingClientRect() {\n return this._preview.getBoundingClientRect();\n }\n addClass(className) {\n this._preview.classList.add(className);\n }\n getTransitionDuration() {\n return getTransformTransitionDurationInMs(this._preview);\n }\n addEventListener(name, handler) {\n return this._renderer.listen(this._preview, name, handler);\n }\n _createPreview() {\n const previewConfig = this._previewTemplate;\n const previewClass = this._previewClass;\n const previewTemplate = previewConfig ? previewConfig.template : null;\n let preview;\n if (previewTemplate && previewConfig) {\n // Measure the element before we've inserted the preview\n // since the insertion could throw off the measurement.\n const rootRect = previewConfig.matchSize ? this._initialDomRect : null;\n const viewRef = previewConfig.viewContainer.createEmbeddedView(previewTemplate, previewConfig.context);\n viewRef.detectChanges();\n preview = getRootNode(viewRef, this._document);\n this._previewEmbeddedView = viewRef;\n if (previewConfig.matchSize) {\n matchElementSize(preview, rootRect);\n } else {\n preview.style.transform = getTransform(this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);\n }\n } else {\n preview = deepCloneNode(this._rootElement);\n matchElementSize(preview, this._initialDomRect);\n if (this._initialTransform) {\n preview.style.transform = this._initialTransform;\n }\n }\n extendStyles(preview.style, {\n // It's important that we disable the pointer events on the preview, because\n // it can throw off the `document.elementFromPoint` calls in the `CdkDropList`.\n 'pointer-events': 'none',\n // If the preview has a margin, it can throw off our positioning so we reset it. The reset\n // value for `margin-right` needs to be `auto` when opened as a popover, because our\n // positioning is always top/left based, but native popover seems to position itself\n // to the top/right if `` or `
` have `dir=\"rtl\"` (see #29604). Setting it\n // to `auto` pushed it to the top/left corner in RTL and is a noop in LTR.\n 'margin': supportsPopover(preview) ? '0 auto 0 0' : '0',\n 'position': 'fixed',\n 'top': '0',\n 'left': '0',\n 'z-index': this._zIndex + ''\n }, importantProperties);\n toggleNativeDragInteractions(preview, false);\n preview.classList.add('cdk-drag-preview');\n preview.setAttribute('popover', 'manual');\n preview.setAttribute('dir', this._direction);\n if (previewClass) {\n if (Array.isArray(previewClass)) {\n previewClass.forEach(className => preview.classList.add(className));\n } else {\n preview.classList.add(previewClass);\n }\n }\n return preview;\n }\n}\n/** Checks whether a specific element supports the popover API. */\nfunction supportsPopover(element) {\n return 'showPopover' in element;\n}\n\n/** Options that can be used to bind a passive event listener. */\nconst passiveEventListenerOptions = normalizePassiveListenerOptions({\n passive: true\n});\n/** Options that can be used to bind an active event listener. */\nconst activeEventListenerOptions = normalizePassiveListenerOptions({\n passive: false\n});\n/** Event options that can be used to bind an active, capturing event. */\nconst activeCapturingEventOptions$1 = normalizePassiveListenerOptions({\n passive: false,\n capture: true\n});\n/**\n * Time in milliseconds for which to ignore mouse events, after\n * receiving a touch event. Used to avoid doing double work for\n * touch devices where the browser fires fake mouse events, in\n * addition to touch events.\n */\nconst MOUSE_EVENT_IGNORE_TIME = 800;\n/** Inline styles to be set as `!important` while dragging. */\nconst dragImportantProperties = new Set([\n// Needs to be important, because some `mat-table` sets `position: sticky !important`. See #22781.\n'position']);\n/**\n * Reference to a draggable item. Used to manipulate or dispose of the item.\n */\nclass DragRef {\n _config;\n _document;\n _ngZone;\n _viewportRuler;\n _dragDropRegistry;\n _renderer;\n /** Element displayed next to the user's pointer while the element is dragged. */\n _preview;\n /** Container into which to insert the preview. */\n _previewContainer;\n /** Reference to the view of the placeholder element. */\n _placeholderRef;\n /** Element that is rendered instead of the draggable item while it is being sorted. */\n _placeholder;\n /** Coordinates within the element at which the user picked up the element. */\n _pickupPositionInElement;\n /** Coordinates on the page at which the user picked up the element. */\n _pickupPositionOnPage;\n /**\n * Anchor node used to save the place in the DOM where the element was\n * picked up so that it can be restored at the end of the drag sequence.\n */\n _anchor;\n /**\n * CSS `transform` applied to the element when it isn't being dragged. We need a\n * passive transform in order for the dragged element to retain its new position\n * after the user has stopped dragging and because we need to know the relative\n * position in case they start dragging again. This corresponds to `element.style.transform`.\n */\n _passiveTransform = {\n x: 0,\n y: 0\n };\n /** CSS `transform` that is applied to the element while it's being dragged. */\n _activeTransform = {\n x: 0,\n y: 0\n };\n /** Inline `transform` value that the element had before the first dragging sequence. */\n _initialTransform;\n /**\n * Whether the dragging sequence has been started. Doesn't\n * necessarily mean that the element has been moved.\n */\n _hasStartedDragging = signal(false);\n /** Whether the element has moved since the user started dragging it. */\n _hasMoved;\n /** Drop container in which the DragRef resided when dragging began. */\n _initialContainer;\n /** Index at which the item started in its initial container. */\n _initialIndex;\n /** Cached positions of scrollable parent elements. */\n _parentPositions;\n /** Emits when the item is being moved. */\n _moveEvents = new Subject();\n /** Keeps track of the direction in which the user is dragging along each axis. */\n _pointerDirectionDelta;\n /** Pointer position at which the last change in the delta occurred. */\n _pointerPositionAtLastDirectionChange;\n /** Position of the pointer at the last pointer event. */\n _lastKnownPointerPosition;\n /**\n * Root DOM node of the drag instance. This is the element that will\n * be moved around as the user is dragging.\n */\n _rootElement;\n /**\n * Nearest ancestor SVG, relative to which coordinates are calculated if dragging SVGElement\n */\n _ownerSVGElement;\n /**\n * Inline style value of `-webkit-tap-highlight-color` at the time the\n * dragging was started. Used to restore the value once we're done dragging.\n */\n _rootElementTapHighlight;\n /** Subscription to pointer movement events. */\n _pointerMoveSubscription = Subscription.EMPTY;\n /** Subscription to the event that is dispatched when the user lifts their pointer. */\n _pointerUpSubscription = Subscription.EMPTY;\n /** Subscription to the viewport being scrolled. */\n _scrollSubscription = Subscription.EMPTY;\n /** Subscription to the viewport being resized. */\n _resizeSubscription = Subscription.EMPTY;\n /**\n * Time at which the last touch event occurred. Used to avoid firing the same\n * events multiple times on touch devices where the browser will fire a fake\n * mouse event for each touch event, after a certain time.\n */\n _lastTouchEventTime;\n /** Time at which the last dragging sequence was started. */\n _dragStartTime;\n /** Cached reference to the boundary element. */\n _boundaryElement = null;\n /** Whether the native dragging interactions have been enabled on the root element. */\n _nativeInteractionsEnabled = true;\n /** Client rect of the root element when the dragging sequence has started. */\n _initialDomRect;\n /** Cached dimensions of the preview element. Should be read via `_getPreviewRect`. */\n _previewRect;\n /** Cached dimensions of the boundary element. */\n _boundaryRect;\n /** Element that will be used as a template to create the draggable item's preview. */\n _previewTemplate;\n /** Template for placeholder element rendered to show where a draggable would be dropped. */\n _placeholderTemplate;\n /** Elements that can be used to drag the draggable item. */\n _handles = [];\n /** Registered handles that are currently disabled. */\n _disabledHandles = new Set();\n /** Droppable container that the draggable is a part of. */\n _dropContainer;\n /** Layout direction of the item. */\n _direction = 'ltr';\n /** Ref that the current drag item is nested in. */\n _parentDragRef;\n /**\n * Cached shadow root that the element is placed in. `null` means that the element isn't in\n * the shadow DOM and `undefined` means that it hasn't been resolved yet. Should be read via\n * `_getShadowRoot`, not directly.\n */\n _cachedShadowRoot;\n /** Axis along which dragging is locked. */\n lockAxis;\n /**\n * Amount of milliseconds to wait after the user has put their\n * pointer down before starting to drag the element.\n */\n dragStartDelay = 0;\n /** Class to be added to the preview element. */\n previewClass;\n /**\n * If the parent of the dragged element has a `scale` transform, it can throw off the\n * positioning when the user starts dragging. Use this input to notify the CDK of the scale.\n */\n scale = 1;\n /** Whether starting to drag this element is disabled. */\n get disabled() {\n return this._disabled || !!(this._dropContainer && this._dropContainer.disabled);\n }\n set disabled(value) {\n if (value !== this._disabled) {\n this._disabled = value;\n this._toggleNativeDragInteractions();\n this._handles.forEach(handle => toggleNativeDragInteractions(handle, value));\n }\n }\n _disabled = false;\n /** Emits as the drag sequence is being prepared. */\n beforeStarted = new Subject();\n /** Emits when the user starts dragging the item. */\n started = new Subject();\n /** Emits when the user has released a drag item, before any animations have started. */\n released = new Subject();\n /** Emits when the user stops dragging an item in the container. */\n ended = new Subject();\n /** Emits when the user has moved the item into a new container. */\n entered = new Subject();\n /** Emits when the user removes the item its container by dragging it into another container. */\n exited = new Subject();\n /** Emits when the user drops the item inside a container. */\n dropped = new Subject();\n /**\n * Emits as the user is dragging the item. Use with caution,\n * because this event will fire for every pixel that the user has dragged.\n */\n moved = this._moveEvents;\n /** Arbitrary data that can be attached to the drag item. */\n data;\n /**\n * Function that can be used to customize the logic of how the position of the drag item\n * is limited while it's being dragged. Gets called with a point containing the current position\n * of the user's pointer on the page, a reference to the item being dragged and its dimensions.\n * Should return a point describing where the item should be rendered.\n */\n constrainPosition;\n constructor(element, _config, _document, _ngZone, _viewportRuler, _dragDropRegistry, _renderer) {\n this._config = _config;\n this._document = _document;\n this._ngZone = _ngZone;\n this._viewportRuler = _viewportRuler;\n this._dragDropRegistry = _dragDropRegistry;\n this._renderer = _renderer;\n this.withRootElement(element).withParent(_config.parentDragRef || null);\n this._parentPositions = new ParentPositionTracker(_document);\n _dragDropRegistry.registerDragItem(this);\n }\n /**\n * Returns the element that is being used as a placeholder\n * while the current element is being dragged.\n */\n getPlaceholderElement() {\n return this._placeholder;\n }\n /** Returns the root draggable element. */\n getRootElement() {\n return this._rootElement;\n }\n /**\n * Gets the currently-visible element that represents the drag item.\n * While dragging this is the placeholder, otherwise it's the root element.\n */\n getVisibleElement() {\n return this.isDragging() ? this.getPlaceholderElement() : this.getRootElement();\n }\n /** Registers the handles that can be used to drag the element. */\n withHandles(handles) {\n this._handles = handles.map(handle => coerceElement(handle));\n this._handles.forEach(handle => toggleNativeDragInteractions(handle, this.disabled));\n this._toggleNativeDragInteractions();\n // Delete any lingering disabled handles that may have been destroyed. Note that we re-create\n // the set, rather than iterate over it and filter out the destroyed handles, because while\n // the ES spec allows for sets to be modified while they're being iterated over, some polyfills\n // use an array internally which may throw an error.\n const disabledHandles = new Set();\n this._disabledHandles.forEach(handle => {\n if (this._handles.indexOf(handle) > -1) {\n disabledHandles.add(handle);\n }\n });\n this._disabledHandles = disabledHandles;\n return this;\n }\n /**\n * Registers the template that should be used for the drag preview.\n * @param template Template that from which to stamp out the preview.\n */\n withPreviewTemplate(template) {\n this._previewTemplate = template;\n return this;\n }\n /**\n * Registers the template that should be used for the drag placeholder.\n * @param template Template that from which to stamp out the placeholder.\n */\n withPlaceholderTemplate(template) {\n this._placeholderTemplate = template;\n return this;\n }\n /**\n * Sets an alternate drag root element. The root element is the element that will be moved as\n * the user is dragging. Passing an alternate root element is useful when trying to enable\n * dragging on an element that you might not have access to.\n */\n withRootElement(rootElement) {\n const element = coerceElement(rootElement);\n if (element !== this._rootElement) {\n if (this._rootElement) {\n this._removeRootElementListeners(this._rootElement);\n }\n this._ngZone.runOutsideAngular(() => {\n element.addEventListener('mousedown', this._pointerDown, activeEventListenerOptions);\n element.addEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);\n element.addEventListener('dragstart', this._nativeDragStart, activeEventListenerOptions);\n });\n this._initialTransform = undefined;\n this._rootElement = element;\n }\n if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) {\n this._ownerSVGElement = this._rootElement.ownerSVGElement;\n }\n return this;\n }\n /**\n * Element to which the draggable's position will be constrained.\n */\n withBoundaryElement(boundaryElement) {\n this._boundaryElement = boundaryElement ? coerceElement(boundaryElement) : null;\n this._resizeSubscription.unsubscribe();\n if (boundaryElement) {\n this._resizeSubscription = this._viewportRuler.change(10).subscribe(() => this._containInsideBoundaryOnResize());\n }\n return this;\n }\n /** Sets the parent ref that the ref is nested in. */\n withParent(parent) {\n this._parentDragRef = parent;\n return this;\n }\n /** Removes the dragging functionality from the DOM element. */\n dispose() {\n this._removeRootElementListeners(this._rootElement);\n // Do this check before removing from the registry since it'll\n // stop being considered as dragged once it is removed.\n if (this.isDragging()) {\n // Since we move out the element to the end of the body while it's being\n // dragged, we have to make sure that it's removed if it gets destroyed.\n this._rootElement?.remove();\n }\n this._anchor?.remove();\n this._destroyPreview();\n this._destroyPlaceholder();\n this._dragDropRegistry.removeDragItem(this);\n this._removeListeners();\n this.beforeStarted.complete();\n this.started.complete();\n this.released.complete();\n this.ended.complete();\n this.entered.complete();\n this.exited.complete();\n this.dropped.complete();\n this._moveEvents.complete();\n this._handles = [];\n this._disabledHandles.clear();\n this._dropContainer = undefined;\n this._resizeSubscription.unsubscribe();\n this._parentPositions.clear();\n this._boundaryElement = this._rootElement = this._ownerSVGElement = this._placeholderTemplate = this._previewTemplate = this._anchor = this._parentDragRef = null;\n }\n /** Checks whether the element is currently being dragged. */\n isDragging() {\n return this._hasStartedDragging() && this._dragDropRegistry.isDragging(this);\n }\n /** Resets a standalone drag item to its initial position. */\n reset() {\n this._rootElement.style.transform = this._initialTransform || '';\n this._activeTransform = {\n x: 0,\n y: 0\n };\n this._passiveTransform = {\n x: 0,\n y: 0\n };\n }\n /**\n * Sets a handle as disabled. While a handle is disabled, it'll capture and interrupt dragging.\n * @param handle Handle element that should be disabled.\n */\n disableHandle(handle) {\n if (!this._disabledHandles.has(handle) && this._handles.indexOf(handle) > -1) {\n this._disabledHandles.add(handle);\n toggleNativeDragInteractions(handle, true);\n }\n }\n /**\n * Enables a handle, if it has been disabled.\n * @param handle Handle element to be enabled.\n */\n enableHandle(handle) {\n if (this._disabledHandles.has(handle)) {\n this._disabledHandles.delete(handle);\n toggleNativeDragInteractions(handle, this.disabled);\n }\n }\n /** Sets the layout direction of the draggable item. */\n withDirection(direction) {\n this._direction = direction;\n return this;\n }\n /** Sets the container that the item is part of. */\n _withDropContainer(container) {\n this._dropContainer = container;\n }\n /**\n * Gets the current position in pixels the draggable outside of a drop container.\n */\n getFreeDragPosition() {\n const position = this.isDragging() ? this._activeTransform : this._passiveTransform;\n return {\n x: position.x,\n y: position.y\n };\n }\n /**\n * Sets the current position in pixels the draggable outside of a drop container.\n * @param value New position to be set.\n */\n setFreeDragPosition(value) {\n this._activeTransform = {\n x: 0,\n y: 0\n };\n this._passiveTransform.x = value.x;\n this._passiveTransform.y = value.y;\n if (!this._dropContainer) {\n this._applyRootElementTransform(value.x, value.y);\n }\n return this;\n }\n /**\n * Sets the container into which to insert the preview element.\n * @param value Container into which to insert the preview.\n */\n withPreviewContainer(value) {\n this._previewContainer = value;\n return this;\n }\n /** Updates the item's sort order based on the last-known pointer position. */\n _sortFromLastPointerPosition() {\n const position = this._lastKnownPointerPosition;\n if (position && this._dropContainer) {\n this._updateActiveDropContainer(this._getConstrainedPointerPosition(position), position);\n }\n }\n /** Unsubscribes from the global subscriptions. */\n _removeListeners() {\n this._pointerMoveSubscription.unsubscribe();\n this._pointerUpSubscription.unsubscribe();\n this._scrollSubscription.unsubscribe();\n this._getShadowRoot()?.removeEventListener('selectstart', shadowDomSelectStart, activeCapturingEventOptions$1);\n }\n /** Destroys the preview element and its ViewRef. */\n _destroyPreview() {\n this._preview?.destroy();\n this._preview = null;\n }\n /** Destroys the placeholder element and its ViewRef. */\n _destroyPlaceholder() {\n this._placeholder?.remove();\n this._placeholderRef?.destroy();\n this._placeholder = this._placeholderRef = null;\n }\n /** Handler for the `mousedown`/`touchstart` events. */\n _pointerDown = event => {\n this.beforeStarted.next();\n // Delegate the event based on whether it started from a handle or the element itself.\n if (this._handles.length) {\n const targetHandle = this._getTargetHandle(event);\n if (targetHandle && !this._disabledHandles.has(targetHandle) && !this.disabled) {\n this._initializeDragSequence(targetHandle, event);\n }\n } else if (!this.disabled) {\n this._initializeDragSequence(this._rootElement, event);\n }\n };\n /** Handler that is invoked when the user moves their pointer after they've initiated a drag. */\n _pointerMove = event => {\n const pointerPosition = this._getPointerPositionOnPage(event);\n if (!this._hasStartedDragging()) {\n const distanceX = Math.abs(pointerPosition.x - this._pickupPositionOnPage.x);\n const distanceY = Math.abs(pointerPosition.y - this._pickupPositionOnPage.y);\n const isOverThreshold = distanceX + distanceY >= this._config.dragStartThreshold;\n // Only start dragging after the user has moved more than the minimum distance in either\n // direction. Note that this is preferable over doing something like `skip(minimumDistance)`\n // in the `pointerMove` subscription, because we're not guaranteed to have one move event\n // per pixel of movement (e.g. if the user moves their pointer quickly).\n if (isOverThreshold) {\n const isDelayElapsed = Date.now() >= this._dragStartTime + this._getDragStartDelay(event);\n const container = this._dropContainer;\n if (!isDelayElapsed) {\n this._endDragSequence(event);\n return;\n }\n // Prevent other drag sequences from starting while something in the container is still\n // being dragged. This can happen while we're waiting for the drop animation to finish\n // and can cause errors, because some elements might still be moving around.\n if (!container || !container.isDragging() && !container.isReceiving()) {\n // Prevent the default action as soon as the dragging sequence is considered as\n // \"started\" since waiting for the next event can allow the device to begin scrolling.\n if (event.cancelable) {\n event.preventDefault();\n }\n this._hasStartedDragging.set(true);\n this._ngZone.run(() => this._startDragSequence(event));\n }\n }\n return;\n }\n // We prevent the default action down here so that we know that dragging has started. This is\n // important for touch devices where doing this too early can unnecessarily block scrolling,\n // if there's a dragging delay.\n if (event.cancelable) {\n event.preventDefault();\n }\n const constrainedPointerPosition = this._getConstrainedPointerPosition(pointerPosition);\n this._hasMoved = true;\n this._lastKnownPointerPosition = pointerPosition;\n this._updatePointerDirectionDelta(constrainedPointerPosition);\n if (this._dropContainer) {\n this._updateActiveDropContainer(constrainedPointerPosition, pointerPosition);\n } else {\n // If there's a position constraint function, we want the element's top/left to be at the\n // specific position on the page. Use the initial position as a reference if that's the case.\n const offset = this.constrainPosition ? this._initialDomRect : this._pickupPositionOnPage;\n const activeTransform = this._activeTransform;\n activeTransform.x = constrainedPointerPosition.x - offset.x + this._passiveTransform.x;\n activeTransform.y = constrainedPointerPosition.y - offset.y + this._passiveTransform.y;\n this._applyRootElementTransform(activeTransform.x, activeTransform.y);\n }\n // Since this event gets fired for every pixel while dragging, we only\n // want to fire it if the consumer opted into it. Also we have to\n // re-enter the zone because we run all of the events on the outside.\n if (this._moveEvents.observers.length) {\n this._ngZone.run(() => {\n this._moveEvents.next({\n source: this,\n pointerPosition: constrainedPointerPosition,\n event,\n distance: this._getDragDistance(constrainedPointerPosition),\n delta: this._pointerDirectionDelta\n });\n });\n }\n };\n /** Handler that is invoked when the user lifts their pointer up, after initiating a drag. */\n _pointerUp = event => {\n this._endDragSequence(event);\n };\n /**\n * Clears subscriptions and stops the dragging sequence.\n * @param event Browser event object that ended the sequence.\n */\n _endDragSequence(event) {\n // Note that here we use `isDragging` from the service, rather than from `this`.\n // The difference is that the one from the service reflects whether a dragging sequence\n // has been initiated, whereas the one on `this` includes whether the user has passed\n // the minimum dragging threshold.\n if (!this._dragDropRegistry.isDragging(this)) {\n return;\n }\n this._removeListeners();\n this._dragDropRegistry.stopDragging(this);\n this._toggleNativeDragInteractions();\n if (this._handles) {\n this._rootElement.style.webkitTapHighlightColor = this._rootElementTapHighlight;\n }\n if (!this._hasStartedDragging()) {\n return;\n }\n this.released.next({\n source: this,\n event\n });\n if (this._dropContainer) {\n // Stop scrolling immediately, instead of waiting for the animation to finish.\n this._dropContainer._stopScrolling();\n this._animatePreviewToPlaceholder().then(() => {\n this._cleanupDragArtifacts(event);\n this._cleanupCachedDimensions();\n this._dragDropRegistry.stopDragging(this);\n });\n } else {\n // Convert the active transform into a passive one. This means that next time\n // the user starts dragging the item, its position will be calculated relatively\n // to the new passive transform.\n this._passiveTransform.x = this._activeTransform.x;\n const pointerPosition = this._getPointerPositionOnPage(event);\n this._passiveTransform.y = this._activeTransform.y;\n this._ngZone.run(() => {\n this.ended.next({\n source: this,\n distance: this._getDragDistance(pointerPosition),\n dropPoint: pointerPosition,\n event\n });\n });\n this._cleanupCachedDimensions();\n this._dragDropRegistry.stopDragging(this);\n }\n }\n /** Starts the dragging sequence. */\n _startDragSequence(event) {\n if (isTouchEvent(event)) {\n this._lastTouchEventTime = Date.now();\n }\n this._toggleNativeDragInteractions();\n // Needs to happen before the root element is moved.\n const shadowRoot = this._getShadowRoot();\n const dropContainer = this._dropContainer;\n if (shadowRoot) {\n // In some browsers the global `selectstart` that we maintain in the `DragDropRegistry`\n // doesn't cross the shadow boundary so we have to prevent it at the shadow root (see #28792).\n this._ngZone.runOutsideAngular(() => {\n shadowRoot.addEventListener('selectstart', shadowDomSelectStart, activeCapturingEventOptions$1);\n });\n }\n if (dropContainer) {\n const element = this._rootElement;\n const parent = element.parentNode;\n const placeholder = this._placeholder = this._createPlaceholderElement();\n const anchor = this._anchor = this._anchor || this._document.createComment(typeof ngDevMode === 'undefined' || ngDevMode ? 'cdk-drag-anchor' : '');\n // Insert an anchor node so that we can restore the element's position in the DOM.\n parent.insertBefore(anchor, element);\n // There's no risk of transforms stacking when inside a drop container so\n // we can keep the initial transform up to date any time dragging starts.\n this._initialTransform = element.style.transform || '';\n // Create the preview after the initial transform has\n // been cached, because it can be affected by the transform.\n 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);\n this._preview.attach(this._getPreviewInsertionPoint(parent, shadowRoot));\n // We move the element out at the end of the body and we make it hidden, because keeping it in\n // place will throw off the consumer's `:last-child` selectors. We can't remove the element\n // from the DOM completely, because iOS will stop firing all subsequent events in the chain.\n toggleVisibility(element, false, dragImportantProperties);\n this._document.body.appendChild(parent.replaceChild(placeholder, element));\n this.started.next({\n source: this,\n event\n }); // Emit before notifying the container.\n dropContainer.start();\n this._initialContainer = dropContainer;\n this._initialIndex = dropContainer.getItemIndex(this);\n } else {\n this.started.next({\n source: this,\n event\n });\n this._initialContainer = this._initialIndex = undefined;\n }\n // Important to run after we've called `start` on the parent container\n // so that it has had time to resolve its scrollable parents.\n this._parentPositions.cache(dropContainer ? dropContainer.getScrollableParents() : []);\n }\n /**\n * Sets up the different variables and subscriptions\n * that will be necessary for the dragging sequence.\n * @param referenceElement Element that started the drag sequence.\n * @param event Browser event object that started the sequence.\n */\n _initializeDragSequence(referenceElement, event) {\n // Stop propagation if the item is inside another\n // draggable so we don't start multiple drag sequences.\n if (this._parentDragRef) {\n event.stopPropagation();\n }\n const isDragging = this.isDragging();\n const isTouchSequence = isTouchEvent(event);\n const isAuxiliaryMouseButton = !isTouchSequence && event.button !== 0;\n const rootElement = this._rootElement;\n const target = _getEventTarget(event);\n const isSyntheticEvent = !isTouchSequence && this._lastTouchEventTime && this._lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now();\n const isFakeEvent = isTouchSequence ? isFakeTouchstartFromScreenReader(event) : isFakeMousedownFromScreenReader(event);\n // If the event started from an element with the native HTML drag&drop, it'll interfere\n // with our own dragging (e.g. `img` tags do it by default). Prevent the default action\n // to stop it from happening. Note that preventing on `dragstart` also seems to work, but\n // it's flaky and it fails if the user drags it away quickly. Also note that we only want\n // to do this for `mousedown` since doing the same for `touchstart` will stop any `click`\n // events from firing on touch devices.\n if (target && target.draggable && event.type === 'mousedown') {\n event.preventDefault();\n }\n // Abort if the user is already dragging or is using a mouse button other than the primary one.\n if (isDragging || isAuxiliaryMouseButton || isSyntheticEvent || isFakeEvent) {\n return;\n }\n // If we've got handles, we need to disable the tap highlight on the entire root element,\n // otherwise iOS will still add it, even though all the drag interactions on the handle\n // are disabled.\n if (this._handles.length) {\n const rootStyles = rootElement.style;\n this._rootElementTapHighlight = rootStyles.webkitTapHighlightColor || '';\n rootStyles.webkitTapHighlightColor = 'transparent';\n }\n this._hasMoved = false;\n this._hasStartedDragging.set(this._hasMoved);\n // Avoid multiple subscriptions and memory leaks when multi touch\n // (isDragging check above isn't enough because of possible temporal and/or dimensional delays)\n this._removeListeners();\n this._initialDomRect = this._rootElement.getBoundingClientRect();\n this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);\n this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);\n this._scrollSubscription = this._dragDropRegistry.scrolled(this._getShadowRoot()).subscribe(scrollEvent => this._updateOnScroll(scrollEvent));\n if (this._boundaryElement) {\n this._boundaryRect = getMutableClientRect(this._boundaryElement);\n }\n // If we have a custom preview we can't know ahead of time how large it'll be so we position\n // it next to the cursor. The exception is when the consumer has opted into making the preview\n // the same size as the root element, in which case we do know the size.\n const previewTemplate = this._previewTemplate;\n this._pickupPositionInElement = previewTemplate && previewTemplate.template && !previewTemplate.matchSize ? {\n x: 0,\n y: 0\n } : this._getPointerPositionInElement(this._initialDomRect, referenceElement, event);\n const pointerPosition = this._pickupPositionOnPage = this._lastKnownPointerPosition = this._getPointerPositionOnPage(event);\n this._pointerDirectionDelta = {\n x: 0,\n y: 0\n };\n this._pointerPositionAtLastDirectionChange = {\n x: pointerPosition.x,\n y: pointerPosition.y\n };\n this._dragStartTime = Date.now();\n this._dragDropRegistry.startDragging(this, event);\n }\n /** Cleans up the DOM artifacts that were added to facilitate the element being dragged. */\n _cleanupDragArtifacts(event) {\n // Restore the element's visibility and insert it at its old position in the DOM.\n // It's important that we maintain the position, because moving the element around in the DOM\n // can throw off `NgFor` which does smart diffing and re-creates elements only when necessary,\n // while moving the existing elements in all other cases.\n toggleVisibility(this._rootElement, true, dragImportantProperties);\n this._anchor.parentNode.replaceChild(this._rootElement, this._anchor);\n this._destroyPreview();\n this._destroyPlaceholder();\n this._initialDomRect = this._boundaryRect = this._previewRect = this._initialTransform = undefined;\n // Re-enter the NgZone since we bound `document` events on the outside.\n this._ngZone.run(() => {\n const container = this._dropContainer;\n const currentIndex = container.getItemIndex(this);\n const pointerPosition = this._getPointerPositionOnPage(event);\n const distance = this._getDragDistance(pointerPosition);\n const isPointerOverContainer = container._isOverContainer(pointerPosition.x, pointerPosition.y);\n this.ended.next({\n source: this,\n distance,\n dropPoint: pointerPosition,\n event\n });\n this.dropped.next({\n item: this,\n currentIndex,\n previousIndex: this._initialIndex,\n container: container,\n previousContainer: this._initialContainer,\n isPointerOverContainer,\n distance,\n dropPoint: pointerPosition,\n event\n });\n container.drop(this, currentIndex, this._initialIndex, this._initialContainer, isPointerOverContainer, distance, pointerPosition, event);\n this._dropContainer = this._initialContainer;\n });\n }\n /**\n * Updates the item's position in its drop container, or moves it\n * into a new one, depending on its current drag position.\n */\n _updateActiveDropContainer({\n x,\n y\n }, {\n x: rawX,\n y: rawY\n }) {\n // Drop container that draggable has been moved into.\n let newContainer = this._initialContainer._getSiblingContainerFromPosition(this, x, y);\n // If we couldn't find a new container to move the item into, and the item has left its\n // initial container, check whether the it's over the initial container. This handles the\n // case where two containers are connected one way and the user tries to undo dragging an\n // item into a new container.\n if (!newContainer && this._dropContainer !== this._initialContainer && this._initialContainer._isOverContainer(x, y)) {\n newContainer = this._initialContainer;\n }\n if (newContainer && newContainer !== this._dropContainer) {\n this._ngZone.run(() => {\n // Notify the old container that the item has left.\n this.exited.next({\n item: this,\n container: this._dropContainer\n });\n this._dropContainer.exit(this);\n // Notify the new container that the item has entered.\n this._dropContainer = newContainer;\n this._dropContainer.enter(this, x, y, newContainer === this._initialContainer &&\n // If we're re-entering the initial container and sorting is disabled,\n // put item the into its starting index to begin with.\n newContainer.sortingDisabled ? this._initialIndex : undefined);\n this.entered.next({\n item: this,\n container: newContainer,\n currentIndex: newContainer.getItemIndex(this)\n });\n });\n }\n // Dragging may have been interrupted as a result of the events above.\n if (this.isDragging()) {\n this._dropContainer._startScrollingIfNecessary(rawX, rawY);\n this._dropContainer._sortItem(this, x, y, this._pointerDirectionDelta);\n if (this.constrainPosition) {\n this._applyPreviewTransform(x, y);\n } else {\n this._applyPreviewTransform(x - this._pickupPositionInElement.x, y - this._pickupPositionInElement.y);\n }\n }\n }\n /**\n * Animates the preview element from its current position to the location of the drop placeholder.\n * @returns Promise that resolves when the animation completes.\n */\n _animatePreviewToPlaceholder() {\n // If the user hasn't moved yet, the transitionend event won't fire.\n if (!this._hasMoved) {\n return Promise.resolve();\n }\n const placeholderRect = this._placeholder.getBoundingClientRect();\n // Apply the class that adds a transition to the preview.\n this._preview.addClass('cdk-drag-animating');\n // Move the preview to the placeholder position.\n this._applyPreviewTransform(placeholderRect.left, placeholderRect.top);\n // If the element doesn't have a `transition`, the `transitionend` event won't fire. Since\n // we need to trigger a style recalculation in order for the `cdk-drag-animating` class to\n // apply its style, we take advantage of the available info to figure out whether we need to\n // bind the event in the first place.\n const duration = this._preview.getTransitionDuration();\n if (duration === 0) {\n return Promise.resolve();\n }\n return this._ngZone.runOutsideAngular(() => {\n return new Promise(resolve => {\n const handler = event => {\n if (!event || this._preview && _getEventTarget(event) === this._preview.element && event.propertyName === 'transform') {\n cleanupListener();\n resolve();\n clearTimeout(timeout);\n }\n };\n // If a transition is short enough, the browser might not fire the `transitionend` event.\n // Since we know how long it's supposed to take, add a timeout with a 50% buffer that'll\n // fire if the transition hasn't completed when it was supposed to.\n const timeout = setTimeout(handler, duration * 1.5);\n const cleanupListener = this._preview.addEventListener('transitionend', handler);\n });\n });\n }\n /** Creates an element that will be shown instead of the current element while dragging. */\n _createPlaceholderElement() {\n const placeholderConfig = this._placeholderTemplate;\n const placeholderTemplate = placeholderConfig ? placeholderConfig.template : null;\n let placeholder;\n if (placeholderTemplate) {\n this._placeholderRef = placeholderConfig.viewContainer.createEmbeddedView(placeholderTemplate, placeholderConfig.context);\n this._placeholderRef.detectChanges();\n placeholder = getRootNode(this._placeholderRef, this._document);\n } else {\n placeholder = deepCloneNode(this._rootElement);\n }\n // Stop pointer events on the preview so the user can't\n // interact with it while the preview is animating.\n placeholder.style.pointerEvents = 'none';\n placeholder.classList.add('cdk-drag-placeholder');\n return placeholder;\n }\n /**\n * Figures out the coordinates at which an element was picked up.\n * @param referenceElement Element that initiated the dragging.\n * @param event Event that initiated the dragging.\n */\n _getPointerPositionInElement(elementRect, referenceElement, event) {\n const handleElement = referenceElement === this._rootElement ? null : referenceElement;\n const referenceRect = handleElement ? handleElement.getBoundingClientRect() : elementRect;\n const point = isTouchEvent(event) ? event.targetTouches[0] : event;\n const scrollPosition = this._getViewportScrollPosition();\n const x = point.pageX - referenceRect.left - scrollPosition.left;\n const y = point.pageY - referenceRect.top - scrollPosition.top;\n return {\n x: referenceRect.left - elementRect.left + x,\n y: referenceRect.top - elementRect.top + y\n };\n }\n /** Determines the point of the page that was touched by the user. */\n _getPointerPositionOnPage(event) {\n const scrollPosition = this._getViewportScrollPosition();\n const point = isTouchEvent(event) ?\n // `touches` will be empty for start/end events so we have to fall back to `changedTouches`.\n // Also note that on real devices we're guaranteed for either `touches` or `changedTouches`\n // to have a value, but Firefox in device emulation mode has a bug where both can be empty\n // for `touchstart` and `touchend` so we fall back to a dummy object in order to avoid\n // throwing an error. The value returned here will be incorrect, but since this only\n // breaks inside a developer tool and the value is only used for secondary information,\n // we can get away with it. See https://bugzilla.mozilla.org/show_bug.cgi?id=1615824.\n event.touches[0] || event.changedTouches[0] || {\n pageX: 0,\n pageY: 0\n } : event;\n const x = point.pageX - scrollPosition.left;\n const y = point.pageY - scrollPosition.top;\n // if dragging SVG element, try to convert from the screen coordinate system to the SVG\n // coordinate system\n if (this._ownerSVGElement) {\n const svgMatrix = this._ownerSVGElement.getScreenCTM();\n if (svgMatrix) {\n const svgPoint = this._ownerSVGElement.createSVGPoint();\n svgPoint.x = x;\n svgPoint.y = y;\n return svgPoint.matrixTransform(svgMatrix.inverse());\n }\n }\n return {\n x,\n y\n };\n }\n /** Gets the pointer position on the page, accounting for any position constraints. */\n _getConstrainedPointerPosition(point) {\n const dropContainerLock = this._dropContainer ? this._dropContainer.lockAxis : null;\n let {\n x,\n y\n } = this.constrainPosition ? this.constrainPosition(point, this, this._initialDomRect, this._pickupPositionInElement) : point;\n if (this.lockAxis === 'x' || dropContainerLock === 'x') {\n y = this._pickupPositionOnPage.y - (this.constrainPosition ? this._pickupPositionInElement.y : 0);\n } else if (this.lockAxis === 'y' || dropContainerLock === 'y') {\n x = this._pickupPositionOnPage.x - (this.constrainPosition ? this._pickupPositionInElement.x : 0);\n }\n if (this._boundaryRect) {\n // If not using a custom constrain we need to account for the pickup position in the element\n // otherwise we do not need to do this, as it has already been accounted for\n const {\n x: pickupX,\n y: pickupY\n } = !this.constrainPosition ? this._pickupPositionInElement : {\n x: 0,\n y: 0\n };\n const boundaryRect = this._boundaryRect;\n const {\n width: previewWidth,\n height: previewHeight\n } = this._getPreviewRect();\n const minY = boundaryRect.top + pickupY;\n const maxY = boundaryRect.bottom - (previewHeight - pickupY);\n const minX = boundaryRect.left + pickupX;\n const maxX = boundaryRect.right - (previewWidth - pickupX);\n x = clamp$1(x, minX, maxX);\n y = clamp$1(y, minY, maxY);\n }\n return {\n x,\n y\n };\n }\n /** Updates the current drag delta, based on the user's current pointer position on the page. */\n _updatePointerDirectionDelta(pointerPositionOnPage) {\n const {\n x,\n y\n } = pointerPositionOnPage;\n const delta = this._pointerDirectionDelta;\n const positionSinceLastChange = this._pointerPositionAtLastDirectionChange;\n // Amount of pixels the user has dragged since the last time the direction changed.\n const changeX = Math.abs(x - positionSinceLastChange.x);\n const changeY = Math.abs(y - positionSinceLastChange.y);\n // Because we handle pointer events on a per-pixel basis, we don't want the delta\n // to change for every pixel, otherwise anything that depends on it can look erratic.\n // To make the delta more consistent, we track how much the user has moved since the last\n // delta change and we only update it after it has reached a certain threshold.\n if (changeX > this._config.pointerDirectionChangeThreshold) {\n delta.x = x > positionSinceLastChange.x ? 1 : -1;\n positionSinceLastChange.x = x;\n }\n if (changeY > this._config.pointerDirectionChangeThreshold) {\n delta.y = y > positionSinceLastChange.y ? 1 : -1;\n positionSinceLastChange.y = y;\n }\n return delta;\n }\n /** Toggles the native drag interactions, based on how many handles are registered. */\n _toggleNativeDragInteractions() {\n if (!this._rootElement || !this._handles) {\n return;\n }\n const shouldEnable = this._handles.length > 0 || !this.isDragging();\n if (shouldEnable !== this._nativeInteractionsEnabled) {\n this._nativeInteractionsEnabled = shouldEnable;\n toggleNativeDragInteractions(this._rootElement, shouldEnable);\n }\n }\n /** Removes the manually-added event listeners from the root element. */\n _removeRootElementListeners(element) {\n element.removeEventListener('mousedown', this._pointerDown, activeEventListenerOptions);\n element.removeEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);\n element.removeEventListener('dragstart', this._nativeDragStart, activeEventListenerOptions);\n }\n /**\n * Applies a `transform` to the root element, taking into account any existing transforms on it.\n * @param x New transform value along the X axis.\n * @param y New transform value along the Y axis.\n */\n _applyRootElementTransform(x, y) {\n const scale = 1 / this.scale;\n const transform = getTransform(x * scale, y * scale);\n const styles = this._rootElement.style;\n // Cache the previous transform amount only after the first drag sequence, because\n // we don't want our own transforms to stack on top of each other.\n // Should be excluded none because none + translate3d(x, y, x) is invalid css\n if (this._initialTransform == null) {\n this._initialTransform = styles.transform && styles.transform != 'none' ? styles.transform : '';\n }\n // Preserve the previous `transform` value, if there was one. Note that we apply our own\n // transform before the user's, because things like rotation can affect which direction\n // the element will be translated towards.\n styles.transform = combineTransforms(transform, this._initialTransform);\n }\n /**\n * Applies a `transform` to the preview, taking into account any existing transforms on it.\n * @param x New transform value along the X axis.\n * @param y New transform value along the Y axis.\n */\n _applyPreviewTransform(x, y) {\n // Only apply the initial transform if the preview is a clone of the original element, otherwise\n // it could be completely different and the transform might not make sense anymore.\n const initialTransform = this._previewTemplate?.template ? undefined : this._initialTransform;\n const transform = getTransform(x, y);\n this._preview.setTransform(combineTransforms(transform, initialTransform));\n }\n /**\n * Gets the distance that the user has dragged during the current drag sequence.\n * @param currentPosition Current position of the user's pointer.\n */\n _getDragDistance(currentPosition) {\n const pickupPosition = this._pickupPositionOnPage;\n if (pickupPosition) {\n return {\n x: currentPosition.x - pickupPosition.x,\n y: currentPosition.y - pickupPosition.y\n };\n }\n return {\n x: 0,\n y: 0\n };\n }\n /** Cleans up any cached element dimensions that we don't need after dragging has stopped. */\n _cleanupCachedDimensions() {\n this._boundaryRect = this._previewRect = undefined;\n this._parentPositions.clear();\n }\n /**\n * Checks whether the element is still inside its boundary after the viewport has been resized.\n * If not, the position is adjusted so that the element fits again.\n */\n _containInsideBoundaryOnResize() {\n let {\n x,\n y\n } = this._passiveTransform;\n if (x === 0 && y === 0 || this.isDragging() || !this._boundaryElement) {\n return;\n }\n // Note: don't use `_clientRectAtStart` here, because we want the latest position.\n const elementRect = this._rootElement.getBoundingClientRect();\n const boundaryRect = this._boundaryElement.getBoundingClientRect();\n // It's possible that the element got hidden away after dragging (e.g. by switching to a\n // different tab). Don't do anything in this case so we don't clear the user's position.\n if (boundaryRect.width === 0 && boundaryRect.height === 0 || elementRect.width === 0 && elementRect.height === 0) {\n return;\n }\n const leftOverflow = boundaryRect.left - elementRect.left;\n const rightOverflow = elementRect.right - boundaryRect.right;\n const topOverflow = boundaryRect.top - elementRect.top;\n const bottomOverflow = elementRect.bottom - boundaryRect.bottom;\n // If the element has become wider than the boundary, we can't\n // do much to make it fit so we just anchor it to the left.\n if (boundaryRect.width > elementRect.width) {\n if (leftOverflow > 0) {\n x += leftOverflow;\n }\n if (rightOverflow > 0) {\n x -= rightOverflow;\n }\n } else {\n x = 0;\n }\n // If the element has become taller than the boundary, we can't\n // do much to make it fit so we just anchor it to the top.\n if (boundaryRect.height > elementRect.height) {\n if (topOverflow > 0) {\n y += topOverflow;\n }\n if (bottomOverflow > 0) {\n y -= bottomOverflow;\n }\n } else {\n y = 0;\n }\n if (x !== this._passiveTransform.x || y !== this._passiveTransform.y) {\n this.setFreeDragPosition({\n y,\n x\n });\n }\n }\n /** Gets the drag start delay, based on the event type. */\n _getDragStartDelay(event) {\n const value = this.dragStartDelay;\n if (typeof value === 'number') {\n return value;\n } else if (isTouchEvent(event)) {\n return value.touch;\n }\n return value ? value.mouse : 0;\n }\n /** Updates the internal state of the draggable element when scrolling has occurred. */\n _updateOnScroll(event) {\n const scrollDifference = this._parentPositions.handleScroll(event);\n if (scrollDifference) {\n const target = _getEventTarget(event);\n // DOMRect dimensions are based on the scroll position of the page and its parent\n // node so we have to update the cached boundary DOMRect if the user has scrolled.\n if (this._boundaryRect && target !== this._boundaryElement && target.contains(this._boundaryElement)) {\n adjustDomRect(this._boundaryRect, scrollDifference.top, scrollDifference.left);\n }\n this._pickupPositionOnPage.x += scrollDifference.left;\n this._pickupPositionOnPage.y += scrollDifference.top;\n // If we're in free drag mode, we have to update the active transform, because\n // it isn't relative to the viewport like the preview inside a drop list.\n if (!this._dropContainer) {\n this._activeTransform.x -= scrollDifference.left;\n this._activeTransform.y -= scrollDifference.top;\n this._applyRootElementTransform(this._activeTransform.x, this._activeTransform.y);\n }\n }\n }\n /** Gets the scroll position of the viewport. */\n _getViewportScrollPosition() {\n return this._parentPositions.positions.get(this._document)?.scrollPosition || this._parentPositions.getViewportScrollPosition();\n }\n /**\n * Lazily resolves and returns the shadow root of the element. We do this in a function, rather\n * than saving it in property directly on init, because we want to resolve it as late as possible\n * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the\n * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.\n */\n _getShadowRoot() {\n if (this._cachedShadowRoot === undefined) {\n this._cachedShadowRoot = _getShadowRoot(this._rootElement);\n }\n return this._cachedShadowRoot;\n }\n /** Gets the element into which the drag preview should be inserted. */\n _getPreviewInsertionPoint(initialParent, shadowRoot) {\n const previewContainer = this._previewContainer || 'global';\n if (previewContainer === 'parent') {\n return initialParent;\n }\n if (previewContainer === 'global') {\n const documentRef = this._document;\n // We can't use the body if the user is in fullscreen mode,\n // because the preview will render under the fullscreen element.\n // TODO(crisbeto): dedupe this with the `FullscreenOverlayContainer` eventually.\n return shadowRoot || documentRef.fullscreenElement || documentRef.webkitFullscreenElement || documentRef.mozFullScreenElement || documentRef.msFullscreenElement || documentRef.body;\n }\n return coerceElement(previewContainer);\n }\n /** Lazily resolves and returns the dimensions of the preview. */\n _getPreviewRect() {\n // Cache the preview element rect if we haven't cached it already or if\n // we cached it too early before the element dimensions were computed.\n if (!this._previewRect || !this._previewRect.width && !this._previewRect.height) {\n this._previewRect = this._preview ? this._preview.getBoundingClientRect() : this._initialDomRect;\n }\n return this._previewRect;\n }\n /** Handles a native `dragstart` event. */\n _nativeDragStart = event => {\n if (this._handles.length) {\n const targetHandle = this._getTargetHandle(event);\n if (targetHandle && !this._disabledHandles.has(targetHandle) && !this.disabled) {\n event.preventDefault();\n }\n } else if (!this.disabled) {\n // Usually this isn't necessary since the we prevent the default action in `pointerDown`,\n // but some cases like dragging of links can slip through (see #24403).\n event.preventDefault();\n }\n };\n /** Gets a handle that is the target of an event. */\n _getTargetHandle(event) {\n return this._handles.find(handle => {\n return event.target && (event.target === handle || handle.contains(event.target));\n });\n }\n}\n/** Clamps a value between a minimum and a maximum. */\nfunction clamp$1(value, min, max) {\n return Math.max(min, Math.min(max, value));\n}\n/** Determines whether an event is a touch event. */\nfunction isTouchEvent(event) {\n // This function is called for every pixel that the user has dragged so we need it to be\n // as fast as possible. Since we only bind mouse events and touch events, we can assume\n // that if the event's name starts with `t`, it's a touch event.\n return event.type[0] === 't';\n}\n/** Callback invoked for `selectstart` events inside the shadow DOM. */\nfunction shadowDomSelectStart(event) {\n event.preventDefault();\n}\n\n/**\n * Moves an item one index in an array to another.\n * @param array Array in which to move the item.\n * @param fromIndex Starting index of the item.\n * @param toIndex Index to which the item should be moved.\n */\nfunction moveItemInArray(array, fromIndex, toIndex) {\n const from = clamp(fromIndex, array.length - 1);\n const to = clamp(toIndex, array.length - 1);\n if (from === to) {\n return;\n }\n const target = array[from];\n const delta = to < from ? -1 : 1;\n for (let i = from; i !== to; i += delta) {\n array[i] = array[i + delta];\n }\n array[to] = target;\n}\n/**\n * Moves an item from one array to another.\n * @param currentArray Array from which to transfer the item.\n * @param targetArray Array into which to put the item.\n * @param currentIndex Index of the item in its current array.\n * @param targetIndex Index at which to insert the item.\n */\nfunction transferArrayItem(currentArray, targetArray, currentIndex, targetIndex) {\n const from = clamp(currentIndex, currentArray.length - 1);\n const to = clamp(targetIndex, targetArray.length);\n if (currentArray.length) {\n targetArray.splice(to, 0, currentArray.splice(from, 1)[0]);\n }\n}\n/**\n * Copies an item from one array to another, leaving it in its\n * original position in current array.\n * @param currentArray Array from which to copy the item.\n * @param targetArray Array into which is copy the item.\n * @param currentIndex Index of the item in its current array.\n * @param targetIndex Index at which to insert the item.\n *\n */\nfunction copyArrayItem(currentArray, targetArray, currentIndex, targetIndex) {\n const to = clamp(targetIndex, targetArray.length);\n if (currentArray.length) {\n targetArray.splice(to, 0, currentArray[currentIndex]);\n }\n}\n/** Clamps a number between zero and a maximum. */\nfunction clamp(value, max) {\n return Math.max(0, Math.min(max, value));\n}\n\n/**\n * Strategy that only supports sorting along a single axis.\n * Items are reordered using CSS transforms which allows for sorting to be animated.\n * @docs-private\n */\nclass SingleAxisSortStrategy {\n _dragDropRegistry;\n /** Root element container of the drop list. */\n _element;\n /** Function used to determine if an item can be sorted into a specific index. */\n _sortPredicate;\n /** Cache of the dimensions of all the items inside the container. */\n _itemPositions = [];\n /**\n * Draggable items that are currently active inside the container. Includes the items\n * that were there at the start of the sequence, as well as any items that have been dragged\n * in, but haven't been dropped yet.\n */\n _activeDraggables;\n /** Direction in which the list is oriented. */\n orientation = 'vertical';\n /** Layout direction of the drop list. */\n direction;\n constructor(_dragDropRegistry) {\n this._dragDropRegistry = _dragDropRegistry;\n }\n /**\n * Keeps track of the item that was last swapped with the dragged item, as well as what direction\n * the pointer was moving in when the swap occurred and whether the user's pointer continued to\n * overlap with the swapped item after the swapping occurred.\n */\n _previousSwap = {\n drag: null,\n delta: 0,\n overlaps: false\n };\n /**\n * To be called when the drag sequence starts.\n * @param items Items that are currently in the list.\n */\n start(items) {\n this.withItems(items);\n }\n /**\n * To be called when an item is being sorted.\n * @param item Item to be sorted.\n * @param pointerX Position of the item along the X axis.\n * @param pointerY Position of the item along the Y axis.\n * @param pointerDelta Direction in which the pointer is moving along each axis.\n */\n sort(item, pointerX, pointerY, pointerDelta) {\n const siblings = this._itemPositions;\n const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY, pointerDelta);\n if (newIndex === -1 && siblings.length > 0) {\n return null;\n }\n const isHorizontal = this.orientation === 'horizontal';\n const currentIndex = siblings.findIndex(currentItem => currentItem.drag === item);\n const siblingAtNewPosition = siblings[newIndex];\n const currentPosition = siblings[currentIndex].clientRect;\n const newPosition = siblingAtNewPosition.clientRect;\n const delta = currentIndex > newIndex ? 1 : -1;\n // How many pixels the item's placeholder should be offset.\n const itemOffset = this._getItemOffsetPx(currentPosition, newPosition, delta);\n // How many pixels all the other items should be offset.\n const siblingOffset = this._getSiblingOffsetPx(currentIndex, siblings, delta);\n // Save the previous order of the items before moving the item to its new index.\n // We use this to check whether an item has been moved as a result of the sorting.\n const oldOrder = siblings.slice();\n // Shuffle the array in place.\n moveItemInArray(siblings, currentIndex, newIndex);\n siblings.forEach((sibling, index) => {\n // Don't do anything if the position hasn't changed.\n if (oldOrder[index] === sibling) {\n return;\n }\n const isDraggedItem = sibling.drag === item;\n const offset = isDraggedItem ? itemOffset : siblingOffset;\n const elementToOffset = isDraggedItem ? item.getPlaceholderElement() : sibling.drag.getRootElement();\n // Update the offset to reflect the new position.\n sibling.offset += offset;\n const transformAmount = Math.round(sibling.offset * (1 / sibling.drag.scale));\n // Since we're moving the items with a `transform`, we need to adjust their cached\n // client rects to reflect their new position, as well as swap their positions in the cache.\n // Note that we shouldn't use `getBoundingClientRect` here to update the cache, because the\n // elements may be mid-animation which will give us a wrong result.\n if (isHorizontal) {\n // Round the transforms since some browsers will\n // blur the elements, for sub-pixel transforms.\n elementToOffset.style.transform = combineTransforms(`translate3d(${transformAmount}px, 0, 0)`, sibling.initialTransform);\n adjustDomRect(sibling.clientRect, 0, offset);\n } else {\n elementToOffset.style.transform = combineTransforms(`translate3d(0, ${transformAmount}px, 0)`, sibling.initialTransform);\n adjustDomRect(sibling.clientRect, offset, 0);\n }\n });\n // Note that it's important that we do this after the client rects have been adjusted.\n this._previousSwap.overlaps = isInsideClientRect(newPosition, pointerX, pointerY);\n this._previousSwap.drag = siblingAtNewPosition.drag;\n this._previousSwap.delta = isHorizontal ? pointerDelta.x : pointerDelta.y;\n return {\n previousIndex: currentIndex,\n currentIndex: newIndex\n };\n }\n /**\n * Called when an item is being moved into the container.\n * @param item Item that was moved into the container.\n * @param pointerX Position of the item along the X axis.\n * @param pointerY Position of the item along the Y axis.\n * @param index Index at which the item entered. If omitted, the container will try to figure it\n * out automatically.\n */\n enter(item, pointerX, pointerY, index) {\n const newIndex = index == null || index < 0 ?\n // We use the coordinates of where the item entered the drop\n // zone to figure out at which index it should be inserted.\n this._getItemIndexFromPointerPosition(item, pointerX, pointerY) : index;\n const activeDraggables = this._activeDraggables;\n const currentIndex = activeDraggables.indexOf(item);\n const placeholder = item.getPlaceholderElement();\n let newPositionReference = activeDraggables[newIndex];\n // If the item at the new position is the same as the item that is being dragged,\n // it means that we're trying to restore the item to its initial position. In this\n // case we should use the next item from the list as the reference.\n if (newPositionReference === item) {\n newPositionReference = activeDraggables[newIndex + 1];\n }\n // If we didn't find a new position reference, it means that either the item didn't start off\n // in this container, or that the item requested to be inserted at the end of the list.\n if (!newPositionReference && (newIndex == null || newIndex === -1 || newIndex < activeDraggables.length - 1) && this._shouldEnterAsFirstChild(pointerX, pointerY)) {\n newPositionReference = activeDraggables[0];\n }\n // Since the item may be in the `activeDraggables` already (e.g. if the user dragged it\n // into another container and back again), we have to ensure that it isn't duplicated.\n if (currentIndex > -1) {\n activeDraggables.splice(currentIndex, 1);\n }\n // Don't use items that are being dragged as a reference, because\n // their element has been moved down to the bottom of the body.\n if (newPositionReference && !this._dragDropRegistry.isDragging(newPositionReference)) {\n const element = newPositionReference.getRootElement();\n element.parentElement.insertBefore(placeholder, element);\n activeDraggables.splice(newIndex, 0, item);\n } else {\n this._element.appendChild(placeholder);\n activeDraggables.push(item);\n }\n // The transform needs to be cleared so it doesn't throw off the measurements.\n placeholder.style.transform = '';\n // Note that usually `start` is called together with `enter` when an item goes into a new\n // container. This will cache item positions, but we need to refresh them since the amount\n // of items has changed.\n this._cacheItemPositions();\n }\n /** Sets the items that are currently part of the list. */\n withItems(items) {\n this._activeDraggables = items.slice();\n this._cacheItemPositions();\n }\n /** Assigns a sort predicate to the strategy. */\n withSortPredicate(predicate) {\n this._sortPredicate = predicate;\n }\n /** Resets the strategy to its initial state before dragging was started. */\n reset() {\n // TODO(crisbeto): may have to wait for the animations to finish.\n this._activeDraggables?.forEach(item => {\n const rootElement = item.getRootElement();\n if (rootElement) {\n const initialTransform = this._itemPositions.find(p => p.drag === item)?.initialTransform;\n rootElement.style.transform = initialTransform || '';\n }\n });\n this._itemPositions = [];\n this._activeDraggables = [];\n this._previousSwap.drag = null;\n this._previousSwap.delta = 0;\n this._previousSwap.overlaps = false;\n }\n /**\n * Gets a snapshot of items currently in the list.\n * Can include items that we dragged in from another list.\n */\n getActiveItemsSnapshot() {\n return this._activeDraggables;\n }\n /** Gets the index of a specific item. */\n getItemIndex(item) {\n // Items are sorted always by top/left in the cache, however they flow differently in RTL.\n // The rest of the logic still stands no matter what orientation we're in, however\n // we need to invert the array when determining the index.\n const items = this.orientation === 'horizontal' && this.direction === 'rtl' ? this._itemPositions.slice().reverse() : this._itemPositions;\n return items.findIndex(currentItem => currentItem.drag === item);\n }\n /** Used to notify the strategy that the scroll position has changed. */\n updateOnScroll(topDifference, leftDifference) {\n // Since we know the amount that the user has scrolled we can shift all of the\n // client rectangles ourselves. This is cheaper than re-measuring everything and\n // we can avoid inconsistent behavior where we might be measuring the element before\n // its position has changed.\n this._itemPositions.forEach(({\n clientRect\n }) => {\n adjustDomRect(clientRect, topDifference, leftDifference);\n });\n // We need two loops for this, because we want all of the cached\n // positions to be up-to-date before we re-sort the item.\n this._itemPositions.forEach(({\n drag\n }) => {\n if (this._dragDropRegistry.isDragging(drag)) {\n // We need to re-sort the item manually, because the pointer move\n // events won't be dispatched while the user is scrolling.\n drag._sortFromLastPointerPosition();\n }\n });\n }\n withElementContainer(container) {\n this._element = container;\n }\n /** Refreshes the position cache of the items and sibling containers. */\n _cacheItemPositions() {\n const isHorizontal = this.orientation === 'horizontal';\n this._itemPositions = this._activeDraggables.map(drag => {\n const elementToMeasure = drag.getVisibleElement();\n return {\n drag,\n offset: 0,\n initialTransform: elementToMeasure.style.transform || '',\n clientRect: getMutableClientRect(elementToMeasure)\n };\n }).sort((a, b) => {\n return isHorizontal ? a.clientRect.left - b.clientRect.left : a.clientRect.top - b.clientRect.top;\n });\n }\n /**\n * Gets the offset in pixels by which the item that is being dragged should be moved.\n * @param currentPosition Current position of the item.\n * @param newPosition Position of the item where the current item should be moved.\n * @param delta Direction in which the user is moving.\n */\n _getItemOffsetPx(currentPosition, newPosition, delta) {\n const isHorizontal = this.orientation === 'horizontal';\n let itemOffset = isHorizontal ? newPosition.left - currentPosition.left : newPosition.top - currentPosition.top;\n // Account for differences in the item width/height.\n if (delta === -1) {\n itemOffset += isHorizontal ? newPosition.width - currentPosition.width : newPosition.height - currentPosition.height;\n }\n return itemOffset;\n }\n /**\n * Gets the offset in pixels by which the items that aren't being dragged should be moved.\n * @param currentIndex Index of the item currently being dragged.\n * @param siblings All of the items in the list.\n * @param delta Direction in which the user is moving.\n */\n _getSiblingOffsetPx(currentIndex, siblings, delta) {\n const isHorizontal = this.orientation === 'horizontal';\n const currentPosition = siblings[currentIndex].clientRect;\n const immediateSibling = siblings[currentIndex + delta * -1];\n let siblingOffset = currentPosition[isHorizontal ? 'width' : 'height'] * delta;\n if (immediateSibling) {\n const start = isHorizontal ? 'left' : 'top';\n const end = isHorizontal ? 'right' : 'bottom';\n // Get the spacing between the start of the current item and the end of the one immediately\n // after it in the direction in which the user is dragging, or vice versa. We add it to the\n // offset in order to push the element to where it will be when it's inline and is influenced\n // by the `margin` of its siblings.\n if (delta === -1) {\n siblingOffset -= immediateSibling.clientRect[start] - currentPosition[end];\n } else {\n siblingOffset += currentPosition[start] - immediateSibling.clientRect[end];\n }\n }\n return siblingOffset;\n }\n /**\n * Checks if pointer is entering in the first position\n * @param pointerX Position of the user's pointer along the X axis.\n * @param pointerY Position of the user's pointer along the Y axis.\n */\n _shouldEnterAsFirstChild(pointerX, pointerY) {\n if (!this._activeDraggables.length) {\n return false;\n }\n const itemPositions = this._itemPositions;\n const isHorizontal = this.orientation === 'horizontal';\n // `itemPositions` are sorted by position while `activeDraggables` are sorted by child index\n // check if container is using some sort of \"reverse\" ordering (eg: flex-direction: row-reverse)\n const reversed = itemPositions[0].drag !== this._activeDraggables[0];\n if (reversed) {\n const lastItemRect = itemPositions[itemPositions.length - 1].clientRect;\n return isHorizontal ? pointerX >= lastItemRect.right : pointerY >= lastItemRect.bottom;\n } else {\n const firstItemRect = itemPositions[0].clientRect;\n return isHorizontal ? pointerX <= firstItemRect.left : pointerY <= firstItemRect.top;\n }\n }\n /**\n * Gets the index of an item in the drop container, based on the position of the user's pointer.\n * @param item Item that is being sorted.\n * @param pointerX Position of the user's pointer along the X axis.\n * @param pointerY Position of the user's pointer along the Y axis.\n * @param delta Direction in which the user is moving their pointer.\n */\n _getItemIndexFromPointerPosition(item, pointerX, pointerY, delta) {\n const isHorizontal = this.orientation === 'horizontal';\n const index = this._itemPositions.findIndex(({\n drag,\n clientRect\n }) => {\n // Skip the item itself.\n if (drag === item) {\n return false;\n }\n if (delta) {\n const direction = isHorizontal ? delta.x : delta.y;\n // If the user is still hovering over the same item as last time, their cursor hasn't left\n // the item after we made the swap, and they didn't change the direction in which they're\n // dragging, we don't consider it a direction swap.\n if (drag === this._previousSwap.drag && this._previousSwap.overlaps && direction === this._previousSwap.delta) {\n return false;\n }\n }\n return isHorizontal ?\n // Round these down since most browsers report client rects with\n // sub-pixel precision, whereas the pointer coordinates are rounded to pixels.\n pointerX >= Math.floor(clientRect.left) && pointerX < Math.floor(clientRect.right) : pointerY >= Math.floor(clientRect.top) && pointerY < Math.floor(clientRect.bottom);\n });\n return index === -1 || !this._sortPredicate(index, item) ? -1 : index;\n }\n}\n\n/**\n * Strategy that only supports sorting on a list that might wrap.\n * Items are reordered by moving their DOM nodes around.\n * @docs-private\n */\nclass MixedSortStrategy {\n _document;\n _dragDropRegistry;\n /** Root element container of the drop list. */\n _element;\n /** Function used to determine if an item can be sorted into a specific index. */\n _sortPredicate;\n /** Lazily-resolved root node containing the list. Use `_getRootNode` to read this. */\n _rootNode;\n /**\n * Draggable items that are currently active inside the container. Includes the items\n * that were there at the start of the sequence, as well as any items that have been dragged\n * in, but haven't been dropped yet.\n */\n _activeItems;\n /**\n * Keeps track of the item that was last swapped with the dragged item, as well as what direction\n * the pointer was moving in when the swap occurred and whether the user's pointer continued to\n * overlap with the swapped item after the swapping occurred.\n */\n _previousSwap = {\n drag: null,\n deltaX: 0,\n deltaY: 0,\n overlaps: false\n };\n /**\n * Keeps track of the relationship between a node and its next sibling. This information\n * is used to restore the DOM to the order it was in before dragging started.\n */\n _relatedNodes = [];\n constructor(_document, _dragDropRegistry) {\n this._document = _document;\n this._dragDropRegistry = _dragDropRegistry;\n }\n /**\n * To be called when the drag sequence starts.\n * @param items Items that are currently in the list.\n */\n start(items) {\n const childNodes = this._element.childNodes;\n this._relatedNodes = [];\n for (let i = 0; i < childNodes.length; i++) {\n const node = childNodes[i];\n this._relatedNodes.push([node, node.nextSibling]);\n }\n this.withItems(items);\n }\n /**\n * To be called when an item is being sorted.\n * @param item Item to be sorted.\n * @param pointerX Position of the item along the X axis.\n * @param pointerY Position of the item along the Y axis.\n * @param pointerDelta Direction in which the pointer is moving along each axis.\n */\n sort(item, pointerX, pointerY, pointerDelta) {\n const newIndex = this._getItemIndexFromPointerPosition(item, pointerX, pointerY);\n const previousSwap = this._previousSwap;\n if (newIndex === -1 || this._activeItems[newIndex] === item) {\n return null;\n }\n const toSwapWith = this._activeItems[newIndex];\n // Prevent too many swaps over the same item.\n if (previousSwap.drag === toSwapWith && previousSwap.overlaps && previousSwap.deltaX === pointerDelta.x && previousSwap.deltaY === pointerDelta.y) {\n return null;\n }\n const previousIndex = this.getItemIndex(item);\n const current = item.getPlaceholderElement();\n const overlapElement = toSwapWith.getRootElement();\n if (newIndex > previousIndex) {\n overlapElement.after(current);\n } else {\n overlapElement.before(current);\n }\n moveItemInArray(this._activeItems, previousIndex, newIndex);\n const newOverlapElement = this._getRootNode().elementFromPoint(pointerX, pointerY);\n // Note: it's tempting to save the entire `pointerDelta` object here, however that'll\n // break this functionality, because the same object is passed for all `sort` calls.\n previousSwap.deltaX = pointerDelta.x;\n previousSwap.deltaY = pointerDelta.y;\n previousSwap.drag = toSwapWith;\n previousSwap.overlaps = overlapElement === newOverlapElement || overlapElement.contains(newOverlapElement);\n return {\n previousIndex,\n currentIndex: newIndex\n };\n }\n /**\n * Called when an item is being moved into the container.\n * @param item Item that was moved into the container.\n * @param pointerX Position of the item along the X axis.\n * @param pointerY Position of the item along the Y axis.\n * @param index Index at which the item entered. If omitted, the container will try to figure it\n * out automatically.\n */\n enter(item, pointerX, pointerY, index) {\n let enterIndex = index == null || index < 0 ? this._getItemIndexFromPointerPosition(item, pointerX, pointerY) : index;\n // In some cases (e.g. when the container has padding) we might not be able to figure\n // out which item to insert the dragged item next to, because the pointer didn't overlap\n // with anything. In that case we find the item that's closest to the pointer.\n if (enterIndex === -1) {\n enterIndex = this._getClosestItemIndexToPointer(item, pointerX, pointerY);\n }\n const targetItem = this._activeItems[enterIndex];\n const currentIndex = this._activeItems.indexOf(item);\n if (currentIndex > -1) {\n this._activeItems.splice(currentIndex, 1);\n }\n if (targetItem && !this._dragDropRegistry.isDragging(targetItem)) {\n this._activeItems.splice(enterIndex, 0, item);\n targetItem.getRootElement().before(item.getPlaceholderElement());\n } else {\n this._activeItems.push(item);\n this._element.appendChild(item.getPlaceholderElement());\n }\n }\n /** Sets the items that are currently part of the list. */\n withItems(items) {\n this._activeItems = items.slice();\n }\n /** Assigns a sort predicate to the strategy. */\n withSortPredicate(predicate) {\n this._sortPredicate = predicate;\n }\n /** Resets the strategy to its initial state before dragging was started. */\n reset() {\n const root = this._element;\n const previousSwap = this._previousSwap;\n // Moving elements around in the DOM can break things like the `@for` loop, because it\n // uses comment nodes to know where to insert elements. To avoid such issues, we restore\n // the DOM nodes in the list to their original order when the list is reset.\n // Note that this could be simpler if we just saved all the nodes, cleared the root\n // and then appended them in the original order. We don't do it, because it can break\n // down depending on when the snapshot was taken. E.g. we may end up snapshotting the\n // placeholder element which is removed after dragging.\n for (let i = this._relatedNodes.length - 1; i > -1; i--) {\n const [node, nextSibling] = this._relatedNodes[i];\n if (node.parentNode === root && node.nextSibling !== nextSibling) {\n if (nextSibling === null) {\n root.appendChild(node);\n } else if (nextSibling.parentNode === root) {\n root.insertBefore(node, nextSibling);\n }\n }\n }\n this._relatedNodes = [];\n this._activeItems = [];\n previousSwap.drag = null;\n previousSwap.deltaX = previousSwap.deltaY = 0;\n previousSwap.overlaps = false;\n }\n /**\n * Gets a snapshot of items currently in the list.\n * Can include items that we dragged in from another list.\n */\n getActiveItemsSnapshot() {\n return this._activeItems;\n }\n /** Gets the index of a specific item. */\n getItemIndex(item) {\n return this._activeItems.indexOf(item);\n }\n /** Used to notify the strategy that the scroll position has changed. */\n updateOnScroll() {\n this._activeItems.forEach(item => {\n if (this._dragDropRegistry.isDragging(item)) {\n // We need to re-sort the item manually, because the pointer move\n // events won't be dispatched while the user is scrolling.\n item._sortFromLastPointerPosition();\n }\n });\n }\n withElementContainer(container) {\n if (container !== this._element) {\n this._element = container;\n this._rootNode = undefined;\n }\n }\n /**\n * Gets the index of an item in the drop container, based on the position of the user's pointer.\n * @param item Item that is being sorted.\n * @param pointerX Position of the user's pointer along the X axis.\n * @param pointerY Position of the user's pointer along the Y axis.\n * @param delta Direction in which the user is moving their pointer.\n */\n _getItemIndexFromPointerPosition(item, pointerX, pointerY) {\n const elementAtPoint = this._getRootNode().elementFromPoint(Math.floor(pointerX), Math.floor(pointerY));\n const index = elementAtPoint ? this._activeItems.findIndex(item => {\n const root = item.getRootElement();\n return elementAtPoint === root || root.contains(elementAtPoint);\n }) : -1;\n return index === -1 || !this._sortPredicate(index, item) ? -1 : index;\n }\n /** Lazily resolves the list's root node. */\n _getRootNode() {\n // Resolve the root node lazily to ensure that the drop list is in its final place in the DOM.\n if (!this._rootNode) {\n this._rootNode = _getShadowRoot(this._element) || this._document;\n }\n return this._rootNode;\n }\n /**\n * Finds the index of the item that's closest to the item being dragged.\n * @param item Item being dragged.\n * @param pointerX Position of the user's pointer along the X axis.\n * @param pointerY Position of the user's pointer along the Y axis.\n */\n _getClosestItemIndexToPointer(item, pointerX, pointerY) {\n if (this._activeItems.length === 0) {\n return -1;\n }\n if (this._activeItems.length === 1) {\n return 0;\n }\n let minDistance = Infinity;\n let minIndex = -1;\n // Find the Euclidean distance (https://en.wikipedia.org/wiki/Euclidean_distance) between each\n // item and the pointer, and return the smallest one. Note that this is a bit flawed in that DOM\n // nodes are rectangles, not points, so we use the top/left coordinates. It should be enough\n // for our purposes.\n for (let i = 0; i < this._activeItems.length; i++) {\n const current = this._activeItems[i];\n if (current !== item) {\n const {\n x,\n y\n } = current.getRootElement().getBoundingClientRect();\n const distance = Math.hypot(pointerX - x, pointerY - y);\n if (distance < minDistance) {\n minDistance = distance;\n minIndex = i;\n }\n }\n }\n return minIndex;\n }\n}\n\n/**\n * Proximity, as a ratio to width/height, at which a\n * dragged item will affect the drop container.\n */\nconst DROP_PROXIMITY_THRESHOLD = 0.05;\n/**\n * Proximity, as a ratio to width/height at which to start auto-scrolling the drop list or the\n * viewport. The value comes from trying it out manually until it feels right.\n */\nconst SCROLL_PROXIMITY_THRESHOLD = 0.05;\n/** Vertical direction in which we can auto-scroll. */\nvar AutoScrollVerticalDirection;\n(function (AutoScrollVerticalDirection) {\n AutoScrollVerticalDirection[AutoScrollVerticalDirection[\"NONE\"] = 0] = \"NONE\";\n AutoScrollVerticalDirection[AutoScrollVerticalDirection[\"UP\"] = 1] = \"UP\";\n AutoScrollVerticalDirection[AutoScrollVerticalDirection[\"DOWN\"] = 2] = \"DOWN\";\n})(AutoScrollVerticalDirection || (AutoScrollVerticalDirection = {}));\n/** Horizontal direction in which we can auto-scroll. */\nvar AutoScrollHorizontalDirection;\n(function (AutoScrollHorizontalDirection) {\n AutoScrollHorizontalDirection[AutoScrollHorizontalDirection[\"NONE\"] = 0] = \"NONE\";\n AutoScrollHorizontalDirection[AutoScrollHorizontalDirection[\"LEFT\"] = 1] = \"LEFT\";\n AutoScrollHorizontalDirection[AutoScrollHorizontalDirection[\"RIGHT\"] = 2] = \"RIGHT\";\n})(AutoScrollHorizontalDirection || (AutoScrollHorizontalDirection = {}));\n/**\n * Reference to a drop list. Used to manipulate or dispose of the container.\n */\nclass DropListRef {\n _dragDropRegistry;\n _ngZone;\n _viewportRuler;\n /** Element that the drop list is attached to. */\n element;\n /** Whether starting a dragging sequence from this container is disabled. */\n disabled = false;\n /** Whether sorting items within the list is disabled. */\n sortingDisabled = false;\n /** Locks the position of the draggable elements inside the container along the specified axis. */\n lockAxis;\n /**\n * Whether auto-scrolling the view when the user\n * moves their pointer close to the edges is disabled.\n */\n autoScrollDisabled = false;\n /** Number of pixels to scroll for each frame when auto-scrolling an element. */\n autoScrollStep = 2;\n /**\n * Function that is used to determine whether an item\n * is allowed to be moved into a drop container.\n */\n enterPredicate = () => true;\n /** Function that is used to determine whether an item can be sorted into a particular index. */\n sortPredicate = () => true;\n /** Emits right before dragging has started. */\n beforeStarted = new Subject();\n /**\n * Emits when the user has moved a new drag item into this container.\n */\n entered = new Subject();\n /**\n * Emits when the user removes an item from the container\n * by dragging it into another container.\n */\n exited = new Subject();\n /** Emits when the user drops an item inside the container. */\n dropped = new Subject();\n /** Emits as the user is swapping items while actively dragging. */\n sorted = new Subject();\n /** Emits when a dragging sequence is started in a list connected to the current one. */\n receivingStarted = new Subject();\n /** Emits when a dragging sequence is stopped from a list connected to the current one. */\n receivingStopped = new Subject();\n /** Arbitrary data that can be attached to the drop list. */\n data;\n /** Element that is the direct parent of the drag items. */\n _container;\n /** Whether an item in the list is being dragged. */\n _isDragging = false;\n /** Keeps track of the positions of any parent scrollable elements. */\n _parentPositions;\n /** Strategy being used to sort items within the list. */\n _sortStrategy;\n /** Cached `DOMRect` of the drop list. */\n _domRect;\n /** Draggable items in the container. */\n _draggables = [];\n /** Drop lists that are connected to the current one. */\n _siblings = [];\n /** Connected siblings that currently have a dragged item. */\n _activeSiblings = new Set();\n /** Subscription to the window being scrolled. */\n _viewportScrollSubscription = Subscription.EMPTY;\n /** Vertical direction in which the list is currently scrolling. */\n _verticalScrollDirection = AutoScrollVerticalDirection.NONE;\n /** Horizontal direction in which the list is currently scrolling. */\n _horizontalScrollDirection = AutoScrollHorizontalDirection.NONE;\n /** Node that is being auto-scrolled. */\n _scrollNode;\n /** Used to signal to the current auto-scroll sequence when to stop. */\n _stopScrollTimers = new Subject();\n /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */\n _cachedShadowRoot = null;\n /** Reference to the document. */\n _document;\n /** Elements that can be scrolled while the user is dragging. */\n _scrollableElements = [];\n /** Initial value for the element's `scroll-snap-type` style. */\n _initialScrollSnap;\n /** Direction of the list's layout. */\n _direction = 'ltr';\n constructor(element, _dragDropRegistry, _document, _ngZone, _viewportRuler) {\n this._dragDropRegistry = _dragDropRegistry;\n this._ngZone = _ngZone;\n this._viewportRuler = _viewportRuler;\n const coercedElement = this.element = coerceElement(element);\n this._document = _document;\n this.withOrientation('vertical').withElementContainer(coercedElement);\n _dragDropRegistry.registerDropContainer(this);\n this._parentPositions = new ParentPositionTracker(_document);\n }\n /** Removes the drop list functionality from the DOM element. */\n dispose() {\n this._stopScrolling();\n this._stopScrollTimers.complete();\n this._viewportScrollSubscription.unsubscribe();\n this.beforeStarted.complete();\n this.entered.complete();\n this.exited.complete();\n this.dropped.complete();\n this.sorted.complete();\n this.receivingStarted.complete();\n this.receivingStopped.complete();\n this._activeSiblings.clear();\n this._scrollNode = null;\n this._parentPositions.clear();\n this._dragDropRegistry.removeDropContainer(this);\n }\n /** Whether an item from this list is currently being dragged. */\n isDragging() {\n return this._isDragging;\n }\n /** Starts dragging an item. */\n start() {\n this._draggingStarted();\n this._notifyReceivingSiblings();\n }\n /**\n * Attempts to move an item into the container.\n * @param item Item that was moved into the container.\n * @param pointerX Position of the item along the X axis.\n * @param pointerY Position of the item along the Y axis.\n * @param index Index at which the item entered. If omitted, the container will try to figure it\n * out automatically.\n */\n enter(item, pointerX, pointerY, index) {\n this._draggingStarted();\n // If sorting is disabled, we want the item to return to its starting\n // position if the user is returning it to its initial container.\n if (index == null && this.sortingDisabled) {\n index = this._draggables.indexOf(item);\n }\n this._sortStrategy.enter(item, pointerX, pointerY, index);\n // Note that this usually happens inside `_draggingStarted` as well, but the dimensions\n // can change when the sort strategy moves the item around inside `enter`.\n this._cacheParentPositions();\n // Notify siblings at the end so that the item has been inserted into the `activeDraggables`.\n this._notifyReceivingSiblings();\n this.entered.next({\n item,\n container: this,\n currentIndex: this.getItemIndex(item)\n });\n }\n /**\n * Removes an item from the container after it was dragged into another container by the user.\n * @param item Item that was dragged out.\n */\n exit(item) {\n this._reset();\n this.exited.next({\n item,\n container: this\n });\n }\n /**\n * Drops an item into this container.\n * @param item Item being dropped into the container.\n * @param currentIndex Index at which the item should be inserted.\n * @param previousIndex Index of the item when dragging started.\n * @param previousContainer Container from which the item got dragged in.\n * @param isPointerOverContainer Whether the user's pointer was over the\n * container when the item was dropped.\n * @param distance Distance the user has dragged since the start of the dragging sequence.\n * @param event Event that triggered the dropping sequence.\n *\n * @breaking-change 15.0.0 `previousIndex` and `event` parameters to become required.\n */\n drop(item, currentIndex, previousIndex, previousContainer, isPointerOverContainer, distance, dropPoint, event = {}) {\n this._reset();\n this.dropped.next({\n item,\n currentIndex,\n previousIndex,\n container: this,\n previousContainer,\n isPointerOverContainer,\n distance,\n dropPoint,\n event\n });\n }\n /**\n * Sets the draggable items that are a part of this list.\n * @param items Items that are a part of this list.\n */\n withItems(items) {\n const previousItems = this._draggables;\n this._draggables = items;\n items.forEach(item => item._withDropContainer(this));\n if (this.isDragging()) {\n const draggedItems = previousItems.filter(item => item.isDragging());\n // If all of the items being dragged were removed\n // from the list, abort the current drag sequence.\n if (draggedItems.every(item => items.indexOf(item) === -1)) {\n this._reset();\n } else {\n this._sortStrategy.withItems(this._draggables);\n }\n }\n return this;\n }\n /** Sets the layout direction of the drop list. */\n withDirection(direction) {\n this._direction = direction;\n if (this._sortStrategy instanceof SingleAxisSortStrategy) {\n this._sortStrategy.direction = direction;\n }\n return this;\n }\n /**\n * Sets the containers that are connected to this one. When two or more containers are\n * connected, the user will be allowed to transfer items between them.\n * @param connectedTo Other containers that the current containers should be connected to.\n */\n connectedTo(connectedTo) {\n this._siblings = connectedTo.slice();\n return this;\n }\n /**\n * Sets the orientation of the container.\n * @param orientation New orientation for the container.\n */\n withOrientation(orientation) {\n if (orientation === 'mixed') {\n this._sortStrategy = new MixedSortStrategy(this._document, this._dragDropRegistry);\n } else {\n const strategy = new SingleAxisSortStrategy(this._dragDropRegistry);\n strategy.direction = this._direction;\n strategy.orientation = orientation;\n this._sortStrategy = strategy;\n }\n this._sortStrategy.withElementContainer(this._container);\n this._sortStrategy.withSortPredicate((index, item) => this.sortPredicate(index, item, this));\n return this;\n }\n /**\n * Sets which parent elements are can be scrolled while the user is dragging.\n * @param elements Elements that can be scrolled.\n */\n withScrollableParents(elements) {\n const element = this._container;\n // We always allow the current element to be scrollable\n // so we need to ensure that it's in the array.\n this._scrollableElements = elements.indexOf(element) === -1 ? [element, ...elements] : elements.slice();\n return this;\n }\n /**\n * Configures the drop list so that a different element is used as the container for the\n * dragged items. This is useful for the cases when one might not have control over the\n * full DOM that sets up the dragging.\n * Note that the alternate container needs to be a descendant of the drop list.\n * @param container New element container to be assigned.\n */\n withElementContainer(container) {\n if (container === this._container) {\n return this;\n }\n const element = coerceElement(this.element);\n if ((typeof ngDevMode === 'undefined' || ngDevMode) && container !== element && !element.contains(container)) {\n throw new Error('Invalid DOM structure for drop list. Alternate container element must be a descendant of the drop list.');\n }\n const oldContainerIndex = this._scrollableElements.indexOf(this._container);\n const newContainerIndex = this._scrollableElements.indexOf(container);\n if (oldContainerIndex > -1) {\n this._scrollableElements.splice(oldContainerIndex, 1);\n }\n if (newContainerIndex > -1) {\n this._scrollableElements.splice(newContainerIndex, 1);\n }\n if (this._sortStrategy) {\n this._sortStrategy.withElementContainer(container);\n }\n this._cachedShadowRoot = null;\n this._scrollableElements.unshift(container);\n this._container = container;\n return this;\n }\n /** Gets the scrollable parents that are registered with this drop container. */\n getScrollableParents() {\n return this._scrollableElements;\n }\n /**\n * Figures out the index of an item in the container.\n * @param item Item whose index should be determined.\n */\n getItemIndex(item) {\n return this._isDragging ? this._sortStrategy.getItemIndex(item) : this._draggables.indexOf(item);\n }\n /**\n * Whether the list is able to receive the item that\n * is currently being dragged inside a connected drop list.\n */\n isReceiving() {\n return this._activeSiblings.size > 0;\n }\n /**\n * Sorts an item inside the container based on its position.\n * @param item Item to be sorted.\n * @param pointerX Position of the item along the X axis.\n * @param pointerY Position of the item along the Y axis.\n * @param pointerDelta Direction in which the pointer is moving along each axis.\n */\n _sortItem(item, pointerX, pointerY, pointerDelta) {\n // Don't sort the item if sorting is disabled or it's out of range.\n if (this.sortingDisabled || !this._domRect || !isPointerNearDomRect(this._domRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {\n return;\n }\n const result = this._sortStrategy.sort(item, pointerX, pointerY, pointerDelta);\n if (result) {\n this.sorted.next({\n previousIndex: result.previousIndex,\n currentIndex: result.currentIndex,\n container: this,\n item\n });\n }\n }\n /**\n * Checks whether the user's pointer is close to the edges of either the\n * viewport or the drop list and starts the auto-scroll sequence.\n * @param pointerX User's pointer position along the x axis.\n * @param pointerY User's pointer position along the y axis.\n */\n _startScrollingIfNecessary(pointerX, pointerY) {\n if (this.autoScrollDisabled) {\n return;\n }\n let scrollNode;\n let verticalScrollDirection = AutoScrollVerticalDirection.NONE;\n let horizontalScrollDirection = AutoScrollHorizontalDirection.NONE;\n // Check whether we should start scrolling any of the parent containers.\n this._parentPositions.positions.forEach((position, element) => {\n // We have special handling for the `document` below. Also this would be\n // nicer with a for...of loop, but it requires changing a compiler flag.\n if (element === this._document || !position.clientRect || scrollNode) {\n return;\n }\n if (isPointerNearDomRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) {\n [verticalScrollDirection, horizontalScrollDirection] = getElementScrollDirections(element, position.clientRect, this._direction, pointerX, pointerY);\n if (verticalScrollDirection || horizontalScrollDirection) {\n scrollNode = element;\n }\n }\n });\n // Otherwise check if we can start scrolling the viewport.\n if (!verticalScrollDirection && !horizontalScrollDirection) {\n const {\n width,\n height\n } = this._viewportRuler.getViewportSize();\n const domRect = {\n width,\n height,\n top: 0,\n right: width,\n bottom: height,\n left: 0\n };\n verticalScrollDirection = getVerticalScrollDirection(domRect, pointerY);\n horizontalScrollDirection = getHorizontalScrollDirection(domRect, pointerX);\n scrollNode = window;\n }\n if (scrollNode && (verticalScrollDirection !== this._verticalScrollDirection || horizontalScrollDirection !== this._horizontalScrollDirection || scrollNode !== this._scrollNode)) {\n this._verticalScrollDirection = verticalScrollDirection;\n this._horizontalScrollDirection = horizontalScrollDirection;\n this._scrollNode = scrollNode;\n if ((verticalScrollDirection || horizontalScrollDirection) && scrollNode) {\n this._ngZone.runOutsideAngular(this._startScrollInterval);\n } else {\n this._stopScrolling();\n }\n }\n }\n /** Stops any currently-running auto-scroll sequences. */\n _stopScrolling() {\n this._stopScrollTimers.next();\n }\n /** Starts the dragging sequence within the list. */\n _draggingStarted() {\n const styles = this._container.style;\n this.beforeStarted.next();\n this._isDragging = true;\n if ((typeof ngDevMode === 'undefined' || ngDevMode) &&\n // Prevent the check from running on apps not using an alternate container. Ideally we\n // would always run it, but introducing it at this stage would be a breaking change.\n this._container !== coerceElement(this.element)) {\n for (const drag of this._draggables) {\n if (!drag.isDragging() && drag.getVisibleElement().parentNode !== this._container) {\n throw new Error('Invalid DOM structure for drop list. All items must be placed directly inside of the element container.');\n }\n }\n }\n // We need to disable scroll snapping while the user is dragging, because it breaks automatic\n // scrolling. The browser seems to round the value based on the snapping points which means\n // that we can't increment/decrement the scroll position.\n this._initialScrollSnap = styles.msScrollSnapType || styles.scrollSnapType || '';\n styles.scrollSnapType = styles.msScrollSnapType = 'none';\n this._sortStrategy.start(this._draggables);\n this._cacheParentPositions();\n this._viewportScrollSubscription.unsubscribe();\n this._listenToScrollEvents();\n }\n /** Caches the positions of the configured scrollable parents. */\n _cacheParentPositions() {\n this._parentPositions.cache(this._scrollableElements);\n // The list element is always in the `scrollableElements`\n // so we can take advantage of the cached `DOMRect`.\n this._domRect = this._parentPositions.positions.get(this._container).clientRect;\n }\n /** Resets the container to its initial state. */\n _reset() {\n this._isDragging = false;\n const styles = this._container.style;\n styles.scrollSnapType = styles.msScrollSnapType = this._initialScrollSnap;\n this._siblings.forEach(sibling => sibling._stopReceiving(this));\n this._sortStrategy.reset();\n this._stopScrolling();\n this._viewportScrollSubscription.unsubscribe();\n this._parentPositions.clear();\n }\n /** Starts the interval that'll auto-scroll the element. */\n _startScrollInterval = () => {\n this._stopScrolling();\n interval(0, animationFrameScheduler).pipe(takeUntil(this._stopScrollTimers)).subscribe(() => {\n const node = this._scrollNode;\n const scrollStep = this.autoScrollStep;\n if (this._verticalScrollDirection === AutoScrollVerticalDirection.UP) {\n node.scrollBy(0, -scrollStep);\n } else if (this._verticalScrollDirection === AutoScrollVerticalDirection.DOWN) {\n node.scrollBy(0, scrollStep);\n }\n if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.LEFT) {\n node.scrollBy(-scrollStep, 0);\n } else if (this._horizontalScrollDirection === AutoScrollHorizontalDirection.RIGHT) {\n node.scrollBy(scrollStep, 0);\n }\n });\n };\n /**\n * Checks whether the user's pointer is positioned over the container.\n * @param x Pointer position along the X axis.\n * @param y Pointer position along the Y axis.\n */\n _isOverContainer(x, y) {\n return this._domRect != null && isInsideClientRect(this._domRect, x, y);\n }\n /**\n * Figures out whether an item should be moved into a sibling\n * drop container, based on its current position.\n * @param item Drag item that is being moved.\n * @param x Position of the item along the X axis.\n * @param y Position of the item along the Y axis.\n */\n _getSiblingContainerFromPosition(item, x, y) {\n return this._siblings.find(sibling => sibling._canReceive(item, x, y));\n }\n /**\n * Checks whether the drop list can receive the passed-in item.\n * @param item Item that is being dragged into the list.\n * @param x Position of the item along the X axis.\n * @param y Position of the item along the Y axis.\n */\n _canReceive(item, x, y) {\n if (!this._domRect || !isInsideClientRect(this._domRect, x, y) || !this.enterPredicate(item, this)) {\n return false;\n }\n const elementFromPoint = this._getShadowRoot().elementFromPoint(x, y);\n // If there's no element at the pointer position, then\n // the client rect is probably scrolled out of the view.\n if (!elementFromPoint) {\n return false;\n }\n // The `DOMRect`, that we're using to find the container over which the user is\n // hovering, doesn't give us any information on whether the element has been scrolled\n // out of the view or whether it's overlapping with other containers. This means that\n // we could end up transferring the item into a container that's invisible or is positioned\n // below another one. We use the result from `elementFromPoint` to get the top-most element\n // at the pointer position and to find whether it's one of the intersecting drop containers.\n return elementFromPoint === this._container || this._container.contains(elementFromPoint);\n }\n /**\n * Called by one of the connected drop lists when a dragging sequence has started.\n * @param sibling Sibling in which dragging has started.\n */\n _startReceiving(sibling, items) {\n const activeSiblings = this._activeSiblings;\n if (!activeSiblings.has(sibling) && items.every(item => {\n // Note that we have to add an exception to the `enterPredicate` for items that started off\n // in this drop list. The drag ref has logic that allows an item to return to its initial\n // container, if it has left the initial container and none of the connected containers\n // allow it to enter. See `DragRef._updateActiveDropContainer` for more context.\n return this.enterPredicate(item, this) || this._draggables.indexOf(item) > -1;\n })) {\n activeSiblings.add(sibling);\n this._cacheParentPositions();\n this._listenToScrollEvents();\n this.receivingStarted.next({\n initiator: sibling,\n receiver: this,\n items\n });\n }\n }\n /**\n * Called by a connected drop list when dragging has stopped.\n * @param sibling Sibling whose dragging has stopped.\n */\n _stopReceiving(sibling) {\n this._activeSiblings.delete(sibling);\n this._viewportScrollSubscription.unsubscribe();\n this.receivingStopped.next({\n initiator: sibling,\n receiver: this\n });\n }\n /**\n * Starts listening to scroll events on the viewport.\n * Used for updating the internal state of the list.\n */\n _listenToScrollEvents() {\n this._viewportScrollSubscription = this._dragDropRegistry.scrolled(this._getShadowRoot()).subscribe(event => {\n if (this.isDragging()) {\n const scrollDifference = this._parentPositions.handleScroll(event);\n if (scrollDifference) {\n this._sortStrategy.updateOnScroll(scrollDifference.top, scrollDifference.left);\n }\n } else if (this.isReceiving()) {\n this._cacheParentPositions();\n }\n });\n }\n /**\n * Lazily resolves and returns the shadow root of the element. We do this in a function, rather\n * than saving it in property directly on init, because we want to resolve it as late as possible\n * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the\n * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`.\n */\n _getShadowRoot() {\n if (!this._cachedShadowRoot) {\n const shadowRoot = _getShadowRoot(this._container);\n this._cachedShadowRoot = shadowRoot || this._document;\n }\n return this._cachedShadowRoot;\n }\n /** Notifies any siblings that may potentially receive the item. */\n _notifyReceivingSiblings() {\n const draggedItems = this._sortStrategy.getActiveItemsSnapshot().filter(item => item.isDragging());\n this._siblings.forEach(sibling => sibling._startReceiving(this, draggedItems));\n }\n}\n/**\n * Gets whether the vertical auto-scroll direction of a node.\n * @param clientRect Dimensions of the node.\n * @param pointerY Position of the user's pointer along the y axis.\n */\nfunction getVerticalScrollDirection(clientRect, pointerY) {\n const {\n top,\n bottom,\n height\n } = clientRect;\n const yThreshold = height * SCROLL_PROXIMITY_THRESHOLD;\n if (pointerY >= top - yThreshold && pointerY <= top + yThreshold) {\n return AutoScrollVerticalDirection.UP;\n } else if (pointerY >= bottom - yThreshold && pointerY <= bottom + yThreshold) {\n return AutoScrollVerticalDirection.DOWN;\n }\n return AutoScrollVerticalDirection.NONE;\n}\n/**\n * Gets whether the horizontal auto-scroll direction of a node.\n * @param clientRect Dimensions of the node.\n * @param pointerX Position of the user's pointer along the x axis.\n */\nfunction getHorizontalScrollDirection(clientRect, pointerX) {\n const {\n left,\n right,\n width\n } = clientRect;\n const xThreshold = width * SCROLL_PROXIMITY_THRESHOLD;\n if (pointerX >= left - xThreshold && pointerX <= left + xThreshold) {\n return AutoScrollHorizontalDirection.LEFT;\n } else if (pointerX >= right - xThreshold && pointerX <= right + xThreshold) {\n return AutoScrollHorizontalDirection.RIGHT;\n }\n return AutoScrollHorizontalDirection.NONE;\n}\n/**\n * Gets the directions in which an element node should be scrolled,\n * assuming that the user's pointer is already within it scrollable region.\n * @param element Element for which we should calculate the scroll direction.\n * @param clientRect Bounding client rectangle of the element.\n * @param direction Layout direction of the drop list.\n * @param pointerX Position of the user's pointer along the x axis.\n * @param pointerY Position of the user's pointer along the y axis.\n */\nfunction getElementScrollDirections(element, clientRect, direction, pointerX, pointerY) {\n const computedVertical = getVerticalScrollDirection(clientRect, pointerY);\n const computedHorizontal = getHorizontalScrollDirection(clientRect, pointerX);\n let verticalScrollDirection = AutoScrollVerticalDirection.NONE;\n let horizontalScrollDirection = AutoScrollHorizontalDirection.NONE;\n // Note that we here we do some extra checks for whether the element is actually scrollable in\n // a certain direction and we only assign the scroll direction if it is. We do this so that we\n // can allow other elements to be scrolled, if the current element can't be scrolled anymore.\n // This allows us to handle cases where the scroll regions of two scrollable elements overlap.\n if (computedVertical) {\n const scrollTop = element.scrollTop;\n if (computedVertical === AutoScrollVerticalDirection.UP) {\n if (scrollTop > 0) {\n verticalScrollDirection = AutoScrollVerticalDirection.UP;\n }\n } else if (element.scrollHeight - scrollTop > element.clientHeight) {\n verticalScrollDirection = AutoScrollVerticalDirection.DOWN;\n }\n }\n if (computedHorizontal) {\n const scrollLeft = element.scrollLeft;\n if (direction === 'rtl') {\n if (computedHorizontal === AutoScrollHorizontalDirection.RIGHT) {\n // In RTL `scrollLeft` will be negative when scrolled.\n if (scrollLeft < 0) {\n horizontalScrollDirection = AutoScrollHorizontalDirection.RIGHT;\n }\n } else if (element.scrollWidth + scrollLeft > element.clientWidth) {\n horizontalScrollDirection = AutoScrollHorizontalDirection.LEFT;\n }\n } else {\n if (computedHorizontal === AutoScrollHorizontalDirection.LEFT) {\n if (scrollLeft > 0) {\n horizontalScrollDirection = AutoScrollHorizontalDirection.LEFT;\n }\n } else if (element.scrollWidth - scrollLeft > element.clientWidth) {\n horizontalScrollDirection = AutoScrollHorizontalDirection.RIGHT;\n }\n }\n }\n return [verticalScrollDirection, horizontalScrollDirection];\n}\n\n/** Event options that can be used to bind an active, capturing event. */\nconst activeCapturingEventOptions = normalizePassiveListenerOptions({\n passive: false,\n capture: true\n});\n/**\n * Component used to load the drag&drop reset styles.\n * @docs-private\n */\nclass _ResetsLoader {\n static ɵfac = function _ResetsLoader_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || _ResetsLoader)();\n };\n static ɵcmp = /* @__PURE__ */i0.ɵɵdefineComponent({\n type: _ResetsLoader,\n selectors: [[\"ng-component\"]],\n hostAttrs: [\"cdk-drag-resets-container\", \"\"],\n decls: 0,\n vars: 0,\n template: function _ResetsLoader_Template(rf, ctx) {},\n 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 encapsulation: 2,\n changeDetection: 0\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(_ResetsLoader, [{\n type: Component,\n args: [{\n encapsulation: ViewEncapsulation.None,\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'cdk-drag-resets-container': ''\n },\n 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 }]\n }], null, null);\n})();\n// TODO(crisbeto): remove generics when making breaking changes.\n/**\n * Service that keeps track of all the drag item and drop container\n * instances, and manages global event listeners on the `document`.\n * @docs-private\n */\nclass DragDropRegistry {\n _ngZone = inject(NgZone);\n _document = inject(DOCUMENT);\n _styleLoader = inject(_CdkPrivateStyleLoader);\n /** Registered drop container instances. */\n _dropInstances = new Set();\n /** Registered drag item instances. */\n _dragInstances = new Set();\n /** Drag item instances that are currently being dragged. */\n _activeDragInstances = signal([]);\n /** Keeps track of the event listeners that we've bound to the `document`. */\n _globalListeners = new Map();\n /**\n * Predicate function to check if an item is being dragged. Moved out into a property,\n * because it'll be called a lot and we don't want to create a new function every time.\n */\n _draggingPredicate = item => item.isDragging();\n /**\n * Map tracking DOM nodes and their corresponding drag directives. Note that this is different\n * from looking through the `_dragInstances` and getting their root node, because the root node\n * isn't necessarily the node that the directive is set on.\n */\n _domNodesToDirectives = null;\n /**\n * Emits the `touchmove` or `mousemove` events that are dispatched\n * while the user is dragging a drag item instance.\n */\n pointerMove = new Subject();\n /**\n * Emits the `touchend` or `mouseup` events that are dispatched\n * while the user is dragging a drag item instance.\n */\n pointerUp = new Subject();\n /**\n * Emits when the viewport has been scrolled while the user is dragging an item.\n * @deprecated To be turned into a private member. Use the `scrolled` method instead.\n * @breaking-change 13.0.0\n */\n scroll = new Subject();\n constructor() {}\n /** Adds a drop container to the registry. */\n registerDropContainer(drop) {\n if (!this._dropInstances.has(drop)) {\n this._dropInstances.add(drop);\n }\n }\n /** Adds a drag item instance to the registry. */\n registerDragItem(drag) {\n this._dragInstances.add(drag);\n // The `touchmove` event gets bound once, ahead of time, because WebKit\n // won't preventDefault on a dynamically-added `touchmove` listener.\n // See https://bugs.webkit.org/show_bug.cgi?id=184250.\n if (this._dragInstances.size === 1) {\n this._ngZone.runOutsideAngular(() => {\n // The event handler has to be explicitly active,\n // because newer browsers make it passive by default.\n this._document.addEventListener('touchmove', this._persistentTouchmoveListener, activeCapturingEventOptions);\n });\n }\n }\n /** Removes a drop container from the registry. */\n removeDropContainer(drop) {\n this._dropInstances.delete(drop);\n }\n /** Removes a drag item instance from the registry. */\n removeDragItem(drag) {\n this._dragInstances.delete(drag);\n this.stopDragging(drag);\n if (this._dragInstances.size === 0) {\n this._document.removeEventListener('touchmove', this._persistentTouchmoveListener, activeCapturingEventOptions);\n }\n }\n /**\n * Starts the dragging sequence for a drag instance.\n * @param drag Drag instance which is being dragged.\n * @param event Event that initiated the dragging.\n */\n startDragging(drag, event) {\n // Do not process the same drag twice to avoid memory leaks and redundant listeners\n if (this._activeDragInstances().indexOf(drag) > -1) {\n return;\n }\n this._styleLoader.load(_ResetsLoader);\n this._activeDragInstances.update(instances => [...instances, drag]);\n if (this._activeDragInstances().length === 1) {\n // We explicitly bind __active__ listeners here, because newer browsers will default to\n // passive ones for `mousemove` and `touchmove`. The events need to be active, because we\n // use `preventDefault` to prevent the page from scrolling while the user is dragging.\n const isTouchEvent = event.type.startsWith('touch');\n const endEventHandler = {\n handler: e => this.pointerUp.next(e),\n options: true\n };\n if (isTouchEvent) {\n this._globalListeners.set('touchend', endEventHandler);\n this._globalListeners.set('touchcancel', endEventHandler);\n } else {\n this._globalListeners.set('mouseup', endEventHandler);\n }\n this._globalListeners.set('scroll', {\n handler: e => this.scroll.next(e),\n // Use capturing so that we pick up scroll changes in any scrollable nodes that aren't\n // the document. See https://github.com/angular/components/issues/17144.\n options: true\n })\n // Preventing the default action on `mousemove` isn't enough to disable text selection\n // on Safari so we need to prevent the selection event as well. Alternatively this can\n // be done by setting `user-select: none` on the `body`, however it has causes a style\n // recalculation which can be expensive on pages with a lot of elements.\n .set('selectstart', {\n handler: this._preventDefaultWhileDragging,\n options: activeCapturingEventOptions\n });\n // We don't have to bind a move event for touch drag sequences, because\n // we already have a persistent global one bound from `registerDragItem`.\n if (!isTouchEvent) {\n this._globalListeners.set('mousemove', {\n handler: e => this.pointerMove.next(e),\n options: activeCapturingEventOptions\n });\n }\n this._ngZone.runOutsideAngular(() => {\n this._globalListeners.forEach((config, name) => {\n this._document.addEventListener(name, config.handler, config.options);\n });\n });\n }\n }\n /** Stops dragging a drag item instance. */\n stopDragging(drag) {\n this._activeDragInstances.update(instances => {\n const index = instances.indexOf(drag);\n if (index > -1) {\n instances.splice(index, 1);\n return [...instances];\n }\n return instances;\n });\n if (this._activeDragInstances().length === 0) {\n this._clearGlobalListeners();\n }\n }\n /** Gets whether a drag item instance is currently being dragged. */\n isDragging(drag) {\n return this._activeDragInstances().indexOf(drag) > -1;\n }\n /**\n * Gets a stream that will emit when any element on the page is scrolled while an item is being\n * dragged.\n * @param shadowRoot Optional shadow root that the current dragging sequence started from.\n * Top-level listeners won't pick up events coming from the shadow DOM so this parameter can\n * be used to include an additional top-level listener at the shadow root level.\n */\n scrolled(shadowRoot) {\n const streams = [this.scroll];\n if (shadowRoot && shadowRoot !== this._document) {\n // Note that this is basically the same as `fromEvent` from rxjs, but we do it ourselves,\n // because we want to guarantee that the event is bound outside of the `NgZone`. With\n // `fromEvent` it'll only happen if the subscription is outside the `NgZone`.\n streams.push(new Observable(observer => {\n return this._ngZone.runOutsideAngular(() => {\n const eventOptions = true;\n const callback = event => {\n if (this._activeDragInstances().length) {\n observer.next(event);\n }\n };\n shadowRoot.addEventListener('scroll', callback, eventOptions);\n return () => {\n shadowRoot.removeEventListener('scroll', callback, eventOptions);\n };\n });\n }));\n }\n return merge(...streams);\n }\n /**\n * Tracks the DOM node which has a draggable directive.\n * @param node Node to track.\n * @param dragRef Drag directive set on the node.\n */\n registerDirectiveNode(node, dragRef) {\n this._domNodesToDirectives ??= new WeakMap();\n this._domNodesToDirectives.set(node, dragRef);\n }\n /**\n * Stops tracking a draggable directive node.\n * @param node Node to stop tracking.\n */\n removeDirectiveNode(node) {\n this._domNodesToDirectives?.delete(node);\n }\n /**\n * Gets the drag directive corresponding to a specific DOM node, if any.\n * @param node Node for which to do the lookup.\n */\n getDragDirectiveForNode(node) {\n return this._domNodesToDirectives?.get(node) || null;\n }\n ngOnDestroy() {\n this._dragInstances.forEach(instance => this.removeDragItem(instance));\n this._dropInstances.forEach(instance => this.removeDropContainer(instance));\n this._domNodesToDirectives = null;\n this._clearGlobalListeners();\n this.pointerMove.complete();\n this.pointerUp.complete();\n }\n /**\n * Event listener that will prevent the default browser action while the user is dragging.\n * @param event Event whose default action should be prevented.\n */\n _preventDefaultWhileDragging = event => {\n if (this._activeDragInstances().length > 0) {\n event.preventDefault();\n }\n };\n /** Event listener for `touchmove` that is bound even if no dragging is happening. */\n _persistentTouchmoveListener = event => {\n if (this._activeDragInstances().length > 0) {\n // Note that we only want to prevent the default action after dragging has actually started.\n // Usually this is the same time at which the item is added to the `_activeDragInstances`,\n // but it could be pushed back if the user has set up a drag delay or threshold.\n if (this._activeDragInstances().some(this._draggingPredicate)) {\n event.preventDefault();\n }\n this.pointerMove.next(event);\n }\n };\n /** Clears out the global event listeners from the `document`. */\n _clearGlobalListeners() {\n this._globalListeners.forEach((config, name) => {\n this._document.removeEventListener(name, config.handler, config.options);\n });\n this._globalListeners.clear();\n }\n static ɵfac = function DragDropRegistry_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || DragDropRegistry)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: DragDropRegistry,\n factory: DragDropRegistry.ɵfac,\n providedIn: 'root'\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(DragDropRegistry, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\n\n/** Default configuration to be used when creating a `DragRef`. */\nconst DEFAULT_CONFIG = {\n dragStartThreshold: 5,\n pointerDirectionChangeThreshold: 5\n};\n/**\n * Service that allows for drag-and-drop functionality to be attached to DOM elements.\n */\nclass DragDrop {\n _document = inject(DOCUMENT);\n _ngZone = inject(NgZone);\n _viewportRuler = inject(ViewportRuler);\n _dragDropRegistry = inject(DragDropRegistry);\n _renderer = inject(RendererFactory2).createRenderer(null, null);\n constructor() {}\n /**\n * Turns an element into a draggable item.\n * @param element Element to which to attach the dragging functionality.\n * @param config Object used to configure the dragging behavior.\n */\n createDrag(element, config = DEFAULT_CONFIG) {\n return new DragRef(element, config, this._document, this._ngZone, this._viewportRuler, this._dragDropRegistry, this._renderer);\n }\n /**\n * Turns an element into a drop list.\n * @param element Element to which to attach the drop list functionality.\n */\n createDropList(element) {\n return new DropListRef(element, this._dragDropRegistry, this._document, this._ngZone, this._viewportRuler);\n }\n static ɵfac = function DragDrop_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || DragDrop)();\n };\n static ɵprov = /* @__PURE__ */i0.ɵɵdefineInjectable({\n token: DragDrop,\n factory: DragDrop.ɵfac,\n providedIn: 'root'\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(DragDrop, [{\n type: Injectable,\n args: [{\n providedIn: 'root'\n }]\n }], () => [], null);\n})();\n\n/**\n * Injection token that can be used for a `CdkDrag` to provide itself as a parent to the\n * drag-specific child directive (`CdkDragHandle`, `CdkDragPreview` etc.). Used primarily\n * to avoid circular imports.\n * @docs-private\n */\nconst CDK_DRAG_PARENT = new InjectionToken('CDK_DRAG_PARENT');\n\n/**\n * Asserts that a particular node is an element.\n * @param node Node to be checked.\n * @param name Name to attach to the error message.\n */\nfunction assertElementNode(node, name) {\n if (node.nodeType !== 1) {\n throw Error(`${name} must be attached to an element node. ` + `Currently attached to \"${node.nodeName}\".`);\n }\n}\n\n/**\n * Injection token that can be used to reference instances of `CdkDragHandle`. It serves as\n * alternative token to the actual `CdkDragHandle` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nconst CDK_DRAG_HANDLE = new InjectionToken('CdkDragHandle');\n/** Handle that can be used to drag a CdkDrag instance. */\nclass CdkDragHandle {\n element = inject(ElementRef);\n _parentDrag = inject(CDK_DRAG_PARENT, {\n optional: true,\n skipSelf: true\n });\n _dragDropRegistry = inject(DragDropRegistry);\n /** Emits when the state of the handle has changed. */\n _stateChanges = new Subject();\n /** Whether starting to drag through this handle is disabled. */\n get disabled() {\n return this._disabled;\n }\n set disabled(value) {\n this._disabled = value;\n this._stateChanges.next(this);\n }\n _disabled = false;\n constructor() {\n if (typeof ngDevMode === 'undefined' || ngDevMode) {\n assertElementNode(this.element.nativeElement, 'cdkDragHandle');\n }\n this._parentDrag?._addHandle(this);\n }\n ngAfterViewInit() {\n if (!this._parentDrag) {\n let parent = this.element.nativeElement.parentElement;\n while (parent) {\n const ref = this._dragDropRegistry.getDragDirectiveForNode(parent);\n if (ref) {\n this._parentDrag = ref;\n ref._addHandle(this);\n break;\n }\n parent = parent.parentElement;\n }\n }\n }\n ngOnDestroy() {\n this._parentDrag?._removeHandle(this);\n this._stateChanges.complete();\n }\n static ɵfac = function CdkDragHandle_Factory(__ngFactoryType__) {\n return new (__ngFactoryType__ || CdkDragHandle)();\n };\n static ɵdir = /* @__PURE__ */i0.ɵɵdefineDirective({\n type: CdkDragHandle,\n selectors: [[\"\", \"cdkDragHandle\", \"\"]],\n hostAttrs: [1, \"cdk-drag-handle\"],\n inputs: {\n disabled: [2, \"cdkDragHandleDisabled\", \"disabled\", booleanAttribute]\n },\n features: [i0.ɵɵProvidersFeature([{\n provide: CDK_DRAG_HANDLE,\n useExisting: CdkDragHandle\n }]), i0.ɵɵInputTransformsFeature]\n });\n}\n(() => {\n (typeof ngDevMode === \"undefined\" || ngDevMode) && i0.ɵsetClassMetadata(CdkDragHandle, [{\n type: Directive,\n args: [{\n selector: '[cdkDragHandle]',\n host: {\n 'class': 'cdk-drag-handle'\n },\n providers: [{\n provide: CDK_DRAG_HANDLE,\n useExisting: CdkDragHandle\n }]\n }]\n }], () => [], {\n disabled: [{\n type: Input,\n args: [{\n alias: 'cdkDragHandleDisabled',\n transform: booleanAttribute\n }]\n }]\n });\n})();\n\n/**\n * Injection token that can be used to configure the\n * behavior of the drag&drop-related components.\n */\nconst CDK_DRAG_CONFIG = new InjectionToken('CDK_DRAG_CONFIG');\n\n/**\n * Injection token that can be used to reference instances of `CdkDropList`. It serves as\n * alternative token to the actual `CdkDropList` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nconst CDK_DROP_LIST = new InjectionToken('CdkDropList');\n/** Element that can be moved inside a CdkDropList container. */\nclass CdkDrag {\n element = inject(ElementRef);\n dropContainer = inject(CDK_DROP_LIST, {\n optional: true,\n skipSelf: true\n });\n _ngZone = inject(NgZone);\n _viewContainerRef = inject(ViewContainerRef);\n _dir = inject(Directionality, {\n optional: true\n });\n _changeDetectorRef = inject(ChangeDetectorRef);\n _selfHandle = inject(CDK_DRAG_HANDLE, {\n optional: true,\n self: true\n });\n _parentDrag = inject(CDK_DRAG_PARENT, {\n optional: true,\n skipSelf: true\n });\n _dragDropRegistry = inject(DragDropRegistry);\n _destroyed = new Subject();\n _handles = new BehaviorSubject([]);\n _previewTemplate;\n _placeholderTemplate;\n /** Reference to the underlying drag instance. */\n _dragRef;\n /** Arbitrary data to attach to this drag instance. */\n data;\n /** Locks the position of the dragged element along the specified axis. */\n lockAxis;\n /**\n * Selector that will be used to determine the root draggable element, starting from\n * the `cdkDrag` element and going up the DOM. Passing an alternate root element is useful\n * when trying to enable dragging on an element that you might not have access to.\n */\n rootElementSelector;\n /**\n * Node or selector that will be used to determine the element to which the draggable's\n * position will be constrained. If a string is passed in, it'll be used as a selector that\n * will be matched starting from the element's parent and going up the DOM until a match\n * has been found.\n */\n boundaryElement;\n /**\n * Amount of milliseconds to wait after the user has put their\n * pointer down before starting to drag the element.\n */\n dragStartDelay;\n /**\n * Sets the position of a `CdkDrag` that is outside of a drop container.\n * Can be used to restore the element's position for a returning user.\n */\n freeDragPosition;\n /** Whether starting to drag this element is disabled. */\n get disabled() {\n return this._disabled || !!(this.dropContainer && this.dropContainer.disabled);\n }\n set disabled(value) {\n this._disabled = value;\n this._dragRef.disabled = this._disabled;\n }\n _disabled;\n /**\n * Function that can be used to customize the logic of how the position of the drag item\n * is limited while it's being dragged. Gets called with a point containing the current position\n * of the user's pointer on the page, a reference to the item being dragged and its dimensions.\n * Should return a point describing where the item should be rendered.\n */\n constrainPosition;\n /** Class to be added to the preview element. */\n previewClass;\n /**\n * Configures the place into which the preview of the item will be inserted. Can be configured\n * globally through `CDK_DROP_LIST`. Possible values:\n * - `global` - Preview will be inserted at the bottom of the ``. The advantage is that\n * you don't have to worry about `overflow: hidden` or `z-index`, but the item won't retain\n * its inherited styles.\n * - `parent` - Preview will be inserted into the parent of the drag item. The advantage is that\n * inherited styles will be preserved, but it may be clipped by `overflow: hidden` or not be\n * visible due to `z-index`. Furthermore, the preview is going to have an effect over selectors\n * like `:nth-child` and some flexbox configurations.\n * - `ElementRef