@angular/cdk/fesm2015/drag-drop.mjs.map

Angular Material Component Development Kit

{"version":3,"file":"drag-drop.mjs","sources":["../../../../../../src/cdk/drag-drop/drag-styling.ts","../../../../../../src/cdk/drag-drop/transition-duration.ts","../../../../../../src/cdk/drag-drop/client-rect.ts","../../../../../../src/cdk/drag-drop/parent-position-tracker.ts","../../../../../../src/cdk/drag-drop/clone-node.ts","../../../../../../src/cdk/drag-drop/drag-ref.ts","../../../../../../src/cdk/drag-drop/drag-utils.ts","../../../../../../src/cdk/drag-drop/drop-list-ref.ts","../../../../../../src/cdk/drag-drop/drag-drop-registry.ts","../../../../../../src/cdk/drag-drop/drag-drop.ts","../../../../../../src/cdk/drag-drop/drag-parent.ts","../../../../../../src/cdk/drag-drop/directives/drop-list-group.ts","../../../../../../src/cdk/drag-drop/directives/config.ts","../../../../../../src/cdk/drag-drop/directives/assertions.ts","../../../../../../src/cdk/drag-drop/directives/drop-list.ts","../../../../../../src/cdk/drag-drop/directives/drag-handle.ts","../../../../../../src/cdk/drag-drop/directives/drag-placeholder.ts","../../../../../../src/cdk/drag-drop/directives/drag-preview.ts","../../../../../../src/cdk/drag-drop/directives/drag.ts","../../../../../../src/cdk/drag-drop/drag-drop-module.ts","../../../../../../src/cdk/drag-drop/public-api.ts","../../../../../../src/cdk/drag-drop/index.ts","../../../../../../src/cdk/drag-drop/drag-drop_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/**\n * Extended CSSStyleDeclaration that includes a couple of drag-related\n * properties that aren't in the built-in TS typings.\n */\nexport interface DragCSSStyleDeclaration extends CSSStyleDeclaration {\n  msScrollSnapType: string;\n  scrollSnapType: string;\n  webkitTapHighlightColor: string;\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 */\nexport function extendStyles(\n  dest: CSSStyleDeclaration,\n  source: Record<string, string>,\n  importantProperties?: Set<string>,\n) {\n  for (let key in source) {\n    if (source.hasOwnProperty(key)) {\n      const value = source[key];\n\n      if (value) {\n        dest.setProperty(key, value, importantProperties?.has(key) ? 'important' : '');\n      } else {\n        dest.removeProperty(key);\n      }\n    }\n  }\n\n  return dest;\n}\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 */\nexport function toggleNativeDragInteractions(element: HTMLElement, enable: boolean) {\n  const userSelect = enable ? '' : 'none';\n\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/**\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 */\nexport function toggleVisibility(\n  element: HTMLElement,\n  enable: boolean,\n  importantProperties?: Set<string>,\n) {\n  extendStyles(\n    element.style,\n    {\n      position: enable ? '' : 'fixed',\n      top: enable ? '' : '0',\n      opacity: enable ? '' : '0',\n      left: enable ? '' : '-999em',\n    },\n    importantProperties,\n  );\n}\n\n/**\n * Combines a transform string with an optional other transform\n * that exited before the base transform was applied.\n */\nexport function combineTransforms(transform: string, initialTransform?: string): string {\n  return initialTransform && initialTransform != 'none'\n    ? transform + ' ' + initialTransform\n    : transform;\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Parses a CSS time value to milliseconds. */\nfunction parseCssTimeUnitsToMs(value: string): number {\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\n/** Gets the transform transition duration, including the delay, of an element in milliseconds. */\nexport function getTransformTransitionDurationInMs(element: HTMLElement): number {\n  const computedStyle = getComputedStyle(element);\n  const transitionedProperties = parseCssPropertyValue(computedStyle, 'transition-property');\n  const property = transitionedProperties.find(prop => prop === 'transform' || prop === 'all');\n\n  // If there's no transition for `all` or `transform`, we shouldn't do anything.\n  if (!property) {\n    return 0;\n  }\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\n  return (\n    parseCssTimeUnitsToMs(rawDurations[propertyIndex]) +\n    parseCssTimeUnitsToMs(rawDelays[propertyIndex])\n  );\n}\n\n/** Parses out multiple values from a computed style into an array. */\nfunction parseCssPropertyValue(computedStyle: CSSStyleDeclaration, name: string): string[] {\n  const value = computedStyle.getPropertyValue(name);\n  return value.split(',').map(part => part.trim());\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Gets a mutable version of an element's bounding `ClientRect`. */\nexport function getMutableClientRect(element: Element): ClientRect {\n  const clientRect = element.getBoundingClientRect();\n\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 `ClientRect` aren't own properties. See:\n  // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes\n  return {\n    top: clientRect.top,\n    right: clientRect.right,\n    bottom: clientRect.bottom,\n    left: clientRect.left,\n    width: clientRect.width,\n    height: clientRect.height,\n    x: clientRect.x,\n    y: clientRect.y,\n  } as ClientRect;\n}\n\n/**\n * Checks whether some coordinates are within a `ClientRect`.\n * @param clientRect ClientRect that is being checked.\n * @param x Coordinates along the X axis.\n * @param y Coordinates along the Y axis.\n */\nexport function isInsideClientRect(clientRect: ClientRect, x: number, y: number) {\n  const {top, bottom, left, right} = clientRect;\n  return y >= top && y <= bottom && x >= left && x <= right;\n}\n\n/**\n * Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.\n * @param clientRect `ClientRect` 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 */\nexport function adjustClientRect(\n  clientRect: {\n    top: number;\n    bottom: number;\n    left: number;\n    right: number;\n    width: number;\n    height: number;\n  },\n  top: number,\n  left: number,\n) {\n  clientRect.top += top;\n  clientRect.bottom = clientRect.top + clientRect.height;\n\n  clientRect.left += left;\n  clientRect.right = clientRect.left + clientRect.width;\n}\n\n/**\n * Checks whether the pointer coordinates are close to a ClientRect.\n * @param rect ClientRect to check against.\n * @param threshold Threshold around the ClientRect.\n * @param pointerX Coordinates along the X axis.\n * @param pointerY Coordinates along the Y axis.\n */\nexport function isPointerNearClientRect(\n  rect: ClientRect,\n  threshold: number,\n  pointerX: number,\n  pointerY: number,\n): boolean {\n  const {top, right, bottom, left, width, height} = rect;\n  const xThreshold = width * threshold;\n  const yThreshold = height * threshold;\n\n  return (\n    pointerY > top - yThreshold &&\n    pointerY < bottom + yThreshold &&\n    pointerX > left - xThreshold &&\n    pointerX < right + xThreshold\n  );\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {ViewportRuler} from '@angular/cdk/scrolling';\nimport {_getEventTarget} from '@angular/cdk/platform';\nimport {getMutableClientRect, adjustClientRect} from './client-rect';\n\n/** Object holding the scroll position of something. */\ninterface ScrollPosition {\n  top: number;\n  left: number;\n}\n\n/** Keeps track of the scroll position and dimensions of the parents of an element. */\nexport class ParentPositionTracker {\n  /** Cached positions of the scrollable parent elements. */\n  readonly positions = new Map<\n    Document | HTMLElement,\n    {\n      scrollPosition: ScrollPosition;\n      clientRect?: ClientRect;\n    }\n  >();\n\n  constructor(private _document: Document, private _viewportRuler: ViewportRuler) {}\n\n  /** Clears the cached positions. */\n  clear() {\n    this.positions.clear();\n  }\n\n  /** Caches the positions. Should be called at the beginning of a drag sequence. */\n  cache(elements: readonly HTMLElement[]) {\n    this.clear();\n    this.positions.set(this._document, {\n      scrollPosition: this._viewportRuler.getViewportScrollPosition(),\n    });\n\n    elements.forEach(element => {\n      this.positions.set(element, {\n        scrollPosition: {top: element.scrollTop, left: element.scrollLeft},\n        clientRect: getMutableClientRect(element),\n      });\n    });\n  }\n\n  /** Handles scrolling while a drag is taking place. */\n  handleScroll(event: Event): ScrollPosition | null {\n    const target = _getEventTarget<HTMLElement | Document>(event)!;\n    const cachedPosition = this.positions.get(target);\n\n    if (!cachedPosition) {\n      return null;\n    }\n\n    const scrollPosition = cachedPosition.scrollPosition;\n    let newTop: number;\n    let newLeft: number;\n\n    if (target === this._document) {\n      const viewportScrollPosition = this._viewportRuler!.getViewportScrollPosition();\n      newTop = viewportScrollPosition.top;\n      newLeft = viewportScrollPosition.left;\n    } else {\n      newTop = (target as HTMLElement).scrollTop;\n      newLeft = (target as HTMLElement).scrollLeft;\n    }\n\n    const topDifference = scrollPosition.top - newTop;\n    const leftDifference = scrollPosition.left - newLeft;\n\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        adjustClientRect(position.clientRect, topDifference, leftDifference);\n      }\n    });\n\n    scrollPosition.top = newTop;\n    scrollPosition.left = newLeft;\n\n    return {top: topDifference, left: leftDifference};\n  }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\n/** Creates a deep clone of an element. */\nexport function deepCloneNode(node: HTMLElement): HTMLElement {\n  const clone = node.cloneNode(true) as HTMLElement;\n  const descendantsWithId = clone.querySelectorAll('[id]');\n  const nodeName = node.nodeName.toLowerCase();\n\n  // Remove the `id` to avoid having multiple elements with the same id on the page.\n  clone.removeAttribute('id');\n\n  for (let i = 0; i < descendantsWithId.length; i++) {\n    descendantsWithId[i].removeAttribute('id');\n  }\n\n  if (nodeName === 'canvas') {\n    transferCanvasData(node as HTMLCanvasElement, clone as HTMLCanvasElement);\n  } else if (nodeName === 'input' || nodeName === 'select' || nodeName === 'textarea') {\n    transferInputData(node as HTMLInputElement, clone as HTMLInputElement);\n  }\n\n  transferData('canvas', node, clone, transferCanvasData);\n  transferData('input, textarea, select', node, clone, transferInputData);\n  return clone;\n}\n\n/** Matches elements between an element and its clone and allows for their data to be cloned. */\nfunction transferData<T extends Element>(\n  selector: string,\n  node: HTMLElement,\n  clone: HTMLElement,\n  callback: (source: T, clone: T) => void,\n) {\n  const descendantElements = node.querySelectorAll<T>(selector);\n\n  if (descendantElements.length) {\n    const cloneElements = clone.querySelectorAll<T>(selector);\n\n    for (let i = 0; i < descendantElements.length; i++) {\n      callback(descendantElements[i], cloneElements[i]);\n    }\n  }\n}\n\n// Counter for unique cloned radio button names.\nlet cloneUniqueId = 0;\n\n/** Transfers the data of one input element to another. */\nfunction transferInputData(\n  source: Element & {value: string},\n  clone: Element & {value: string; name: string; type: string},\n) {\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\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\n/** Transfers the data of one canvas element to another. */\nfunction transferCanvasData(source: HTMLCanvasElement, clone: HTMLCanvasElement) {\n  const context = clone.getContext('2d');\n\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 * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {EmbeddedViewRef, ElementRef, NgZone, ViewContainerRef, TemplateRef} from '@angular/core';\nimport {ViewportRuler} from '@angular/cdk/scrolling';\nimport {Direction} from '@angular/cdk/bidi';\nimport {\n  normalizePassiveListenerOptions,\n  _getEventTarget,\n  _getShadowRoot,\n} from '@angular/cdk/platform';\nimport {coerceBooleanProperty, coerceElement} from '@angular/cdk/coercion';\nimport {isFakeMousedownFromScreenReader, isFakeTouchstartFromScreenReader} from '@angular/cdk/a11y';\nimport {Subscription, Subject, Observable} from 'rxjs';\nimport {DropListRefInternal as DropListRef} from './drop-list-ref';\nimport {DragDropRegistry} from './drag-drop-registry';\nimport {\n  combineTransforms,\n  DragCSSStyleDeclaration,\n  extendStyles,\n  toggleNativeDragInteractions,\n  toggleVisibility,\n} from './drag-styling';\nimport {getTransformTransitionDurationInMs} from './transition-duration';\nimport {getMutableClientRect, adjustClientRect} from './client-rect';\nimport {ParentPositionTracker} from './parent-position-tracker';\nimport {deepCloneNode} from './clone-node';\n\n/** Object that can be used to configure the behavior of DragRef. */\nexport interface DragRefConfig {\n  /**\n   * Minimum amount of pixels that the user should\n   * drag, before the CDK initiates a drag sequence.\n   */\n  dragStartThreshold: number;\n\n  /**\n   * Amount the pixels the user should drag before the CDK\n   * considers them to have changed the drag direction.\n   */\n  pointerDirectionChangeThreshold: number;\n\n  /** `z-index` for the absolutely-positioned elements that are created by the drag item. */\n  zIndex?: number;\n\n  /** Ref that the current drag item is nested in. */\n  parentDragRef?: DragRef;\n}\n\n/** Options that can be used to bind a passive event listener. */\nconst passiveEventListenerOptions = normalizePassiveListenerOptions({passive: true});\n\n/** Options that can be used to bind an active event listener. */\nconst activeEventListenerOptions = normalizePassiveListenerOptions({passive: false});\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\n// TODO(crisbeto): add an API for moving a draggable up/down the\n// list programmatically. Useful for keyboard controls.\n\n/**\n * Internal compile-time-only representation of a `DragRef`.\n * Used to avoid circular import issues between the `DragRef` and the `DropListRef`.\n * @docs-private\n */\nexport interface DragRefInternal extends DragRef {}\n\n/** Template that can be used to create a drag helper element (e.g. a preview or a placeholder). */\ninterface DragHelperTemplate<T = any> {\n  template: TemplateRef<T> | null;\n  viewContainer: ViewContainerRef;\n  context: T;\n}\n\n/** Template that can be used to create a drag preview element. */\ninterface DragPreviewTemplate<T = any> extends DragHelperTemplate<T> {\n  matchSize?: boolean;\n}\n\n/** Point on the page or within an element. */\nexport interface Point {\n  x: number;\n  y: number;\n}\n\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\n/**\n * Possible places into which the preview of a drag item can be inserted.\n * - `global` - Preview will be inserted at the bottom of the `<body>`. 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<HTMLElement> | HTMLElement` - Preview will be inserted into a specific element.\n * Same advantages and disadvantages as `parent`.\n */\nexport type PreviewContainer = 'global' | 'parent' | ElementRef<HTMLElement> | HTMLElement;\n\n/**\n * Reference to a draggable item. Used to manipulate or dispose of the item.\n */\nexport class DragRef<T = any> {\n  /** Element displayed next to the user's pointer while the element is dragged. */\n  private _preview: HTMLElement;\n\n  /** Reference to the view of the preview element. */\n  private _previewRef: EmbeddedViewRef<any> | null;\n\n  /** Container into which to insert the preview. */\n  private _previewContainer: PreviewContainer | undefined;\n\n  /** Reference to the view of the placeholder element. */\n  private _placeholderRef: EmbeddedViewRef<any> | null;\n\n  /** Element that is rendered instead of the draggable item while it is being sorted. */\n  private _placeholder: HTMLElement;\n\n  /** Coordinates within the element at which the user picked up the element. */\n  private _pickupPositionInElement: Point;\n\n  /** Coordinates on the page at which the user picked up the element. */\n  private _pickupPositionOnPage: Point;\n\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  private _anchor: Comment;\n\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  private _passiveTransform: Point = {x: 0, y: 0};\n\n  /** CSS `transform` that is applied to the element while it's being dragged. */\n  private _activeTransform: Point = {x: 0, y: 0};\n\n  /** Inline `transform` value that the element had before the first dragging sequence. */\n  private _initialTransform?: string;\n\n  /**\n   * Whether the dragging sequence has been started. Doesn't\n   * necessarily mean that the element has been moved.\n   */\n  private _hasStartedDragging = false;\n\n  /** Whether the element has moved since the user started dragging it. */\n  private _hasMoved: boolean;\n\n  /** Drop container in which the DragRef resided when dragging began. */\n  private _initialContainer: DropListRef;\n\n  /** Index at which the item started in its initial container. */\n  private _initialIndex: number;\n\n  /** Cached positions of scrollable parent elements. */\n  private _parentPositions: ParentPositionTracker;\n\n  /** Emits when the item is being moved. */\n  private readonly _moveEvents = new Subject<{\n    source: DragRef;\n    pointerPosition: {x: number; y: number};\n    event: MouseEvent | TouchEvent;\n    distance: Point;\n    delta: {x: -1 | 0 | 1; y: -1 | 0 | 1};\n  }>();\n\n  /** Keeps track of the direction in which the user is dragging along each axis. */\n  private _pointerDirectionDelta: {x: -1 | 0 | 1; y: -1 | 0 | 1};\n\n  /** Pointer position at which the last change in the delta occurred. */\n  private _pointerPositionAtLastDirectionChange: Point;\n\n  /** Position of the pointer at the last pointer event. */\n  private _lastKnownPointerPosition: Point;\n\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  private _rootElement: HTMLElement;\n\n  /**\n   * Nearest ancestor SVG, relative to which coordinates are calculated if dragging SVGElement\n   */\n  private _ownerSVGElement: SVGSVGElement | null;\n\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  private _rootElementTapHighlight: string;\n\n  /** Subscription to pointer movement events. */\n  private _pointerMoveSubscription = Subscription.EMPTY;\n\n  /** Subscription to the event that is dispatched when the user lifts their pointer. */\n  private _pointerUpSubscription = Subscription.EMPTY;\n\n  /** Subscription to the viewport being scrolled. */\n  private _scrollSubscription = Subscription.EMPTY;\n\n  /** Subscription to the viewport being resized. */\n  private _resizeSubscription = Subscription.EMPTY;\n\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  private _lastTouchEventTime: number;\n\n  /** Time at which the last dragging sequence was started. */\n  private _dragStartTime: number;\n\n  /** Cached reference to the boundary element. */\n  private _boundaryElement: HTMLElement | null = null;\n\n  /** Whether the native dragging interactions have been enabled on the root element. */\n  private _nativeInteractionsEnabled = true;\n\n  /** Cached dimensions of the preview element. */\n  private _previewRect?: ClientRect;\n\n  /** Cached dimensions of the boundary element. */\n  private _boundaryRect?: ClientRect;\n\n  /** Element that will be used as a template to create the draggable item's preview. */\n  private _previewTemplate?: DragPreviewTemplate | null;\n\n  /** Template for placeholder element rendered to show where a draggable would be dropped. */\n  private _placeholderTemplate?: DragHelperTemplate | null;\n\n  /** Elements that can be used to drag the draggable item. */\n  private _handles: HTMLElement[] = [];\n\n  /** Registered handles that are currently disabled. */\n  private _disabledHandles = new Set<HTMLElement>();\n\n  /** Droppable container that the draggable is a part of. */\n  private _dropContainer?: DropListRef;\n\n  /** Layout direction of the item. */\n  private _direction: Direction = 'ltr';\n\n  /** Ref that the current drag item is nested in. */\n  private _parentDragRef: DragRef<unknown> | null;\n\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  private _cachedShadowRoot: ShadowRoot | null | undefined;\n\n  /** Axis along which dragging is locked. */\n  lockAxis: 'x' | 'y';\n\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: number | {touch: number; mouse: number} = 0;\n\n  /** Class to be added to the preview element. */\n  previewClass: string | string[] | undefined;\n\n  /** Whether starting to drag this element is disabled. */\n  get disabled(): boolean {\n    return this._disabled || !!(this._dropContainer && this._dropContainer.disabled);\n  }\n  set disabled(value: boolean) {\n    const newValue = coerceBooleanProperty(value);\n\n    if (newValue !== this._disabled) {\n      this._disabled = newValue;\n      this._toggleNativeDragInteractions();\n      this._handles.forEach(handle => toggleNativeDragInteractions(handle, newValue));\n    }\n  }\n  private _disabled = false;\n\n  /** Emits as the drag sequence is being prepared. */\n  readonly beforeStarted = new Subject<void>();\n\n  /** Emits when the user starts dragging the item. */\n  readonly started = new Subject<{source: DragRef}>();\n\n  /** Emits when the user has released a drag item, before any animations have started. */\n  readonly released = new Subject<{source: DragRef}>();\n\n  /** Emits when the user stops dragging an item in the container. */\n  readonly ended = new Subject<{source: DragRef; distance: Point; dropPoint: Point}>();\n\n  /** Emits when the user has moved the item into a new container. */\n  readonly entered = new Subject<{container: DropListRef; item: DragRef; currentIndex: number}>();\n\n  /** Emits when the user removes the item its container by dragging it into another container. */\n  readonly exited = new Subject<{container: DropListRef; item: DragRef}>();\n\n  /** Emits when the user drops the item inside a container. */\n  readonly dropped = new Subject<{\n    previousIndex: number;\n    currentIndex: number;\n    item: DragRef;\n    container: DropListRef;\n    previousContainer: DropListRef;\n    distance: Point;\n    dropPoint: Point;\n    isPointerOverContainer: boolean;\n  }>();\n\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  readonly moved: Observable<{\n    source: DragRef;\n    pointerPosition: {x: number; y: number};\n    event: MouseEvent | TouchEvent;\n    distance: Point;\n    delta: {x: -1 | 0 | 1; y: -1 | 0 | 1};\n  }> = this._moveEvents;\n\n  /** Arbitrary data that can be attached to the drag item. */\n  data: T;\n\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 and should return a point describing where the item should\n   * be rendered.\n   */\n  constrainPosition?: (point: Point, dragRef: DragRef) => Point;\n\n  constructor(\n    element: ElementRef<HTMLElement> | HTMLElement,\n    private _config: DragRefConfig,\n    private _document: Document,\n    private _ngZone: NgZone,\n    private _viewportRuler: ViewportRuler,\n    private _dragDropRegistry: DragDropRegistry<DragRef, DropListRef>,\n  ) {\n    this.withRootElement(element).withParent(_config.parentDragRef || null);\n    this._parentPositions = new ParentPositionTracker(_document, _viewportRuler);\n    _dragDropRegistry.registerDragItem(this);\n  }\n\n  /**\n   * Returns the element that is being used as a placeholder\n   * while the current element is being dragged.\n   */\n  getPlaceholderElement(): HTMLElement {\n    return this._placeholder;\n  }\n\n  /** Returns the root draggable element. */\n  getRootElement(): HTMLElement {\n    return this._rootElement;\n  }\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(): HTMLElement {\n    return this.isDragging() ? this.getPlaceholderElement() : this.getRootElement();\n  }\n\n  /** Registers the handles that can be used to drag the element. */\n  withHandles(handles: (HTMLElement | ElementRef<HTMLElement>)[]): this {\n    this._handles = handles.map(handle => coerceElement(handle));\n    this._handles.forEach(handle => toggleNativeDragInteractions(handle, this.disabled));\n    this._toggleNativeDragInteractions();\n\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<HTMLElement>();\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  /**\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: DragPreviewTemplate | null): this {\n    this._previewTemplate = template;\n    return this;\n  }\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: DragHelperTemplate | null): this {\n    this._placeholderTemplate = template;\n    return this;\n  }\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: ElementRef<HTMLElement> | HTMLElement): this {\n    const element = coerceElement(rootElement);\n\n    if (element !== this._rootElement) {\n      if (this._rootElement) {\n        this._removeRootElementListeners(this._rootElement);\n      }\n\n      this._ngZone.runOutsideAngular(() => {\n        element.addEventListener('mousedown', this._pointerDown, activeEventListenerOptions);\n        element.addEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);\n      });\n      this._initialTransform = undefined;\n      this._rootElement = element;\n    }\n\n    if (typeof SVGElement !== 'undefined' && this._rootElement instanceof SVGElement) {\n      this._ownerSVGElement = this._rootElement.ownerSVGElement;\n    }\n\n    return this;\n  }\n\n  /**\n   * Element to which the draggable's position will be constrained.\n   */\n  withBoundaryElement(boundaryElement: ElementRef<HTMLElement> | HTMLElement | null): this {\n    this._boundaryElement = boundaryElement ? coerceElement(boundaryElement) : null;\n    this._resizeSubscription.unsubscribe();\n    if (boundaryElement) {\n      this._resizeSubscription = this._viewportRuler\n        .change(10)\n        .subscribe(() => this._containInsideBoundaryOnResize());\n    }\n    return this;\n  }\n\n  /** Sets the parent ref that the ref is nested in.  */\n  withParent(parent: DragRef<unknown> | null): this {\n    this._parentDragRef = parent;\n    return this;\n  }\n\n  /** Removes the dragging functionality from the DOM element. */\n  dispose() {\n    this._removeRootElementListeners(this._rootElement);\n\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\n    this._anchor?.remove();\n    this._destroyPreview();\n    this._destroyPlaceholder();\n    this._dragDropRegistry.removeDragItem(this);\n    this._removeSubscriptions();\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 =\n      this._rootElement =\n      this._ownerSVGElement =\n      this._placeholderTemplate =\n      this._previewTemplate =\n      this._anchor =\n      this._parentDragRef =\n        null!;\n  }\n\n  /** Checks whether the element is currently being dragged. */\n  isDragging(): boolean {\n    return this._hasStartedDragging && this._dragDropRegistry.isDragging(this);\n  }\n\n  /** Resets a standalone drag item to its initial position. */\n  reset(): void {\n    this._rootElement.style.transform = this._initialTransform || '';\n    this._activeTransform = {x: 0, y: 0};\n    this._passiveTransform = {x: 0, 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: HTMLElement) {\n    if (!this._disabledHandles.has(handle) && this._handles.indexOf(handle) > -1) {\n      this._disabledHandles.add(handle);\n      toggleNativeDragInteractions(handle, true);\n    }\n  }\n\n  /**\n   * Enables a handle, if it has been disabled.\n   * @param handle Handle element to be enabled.\n   */\n  enableHandle(handle: HTMLElement) {\n    if (this._disabledHandles.has(handle)) {\n      this._disabledHandles.delete(handle);\n      toggleNativeDragInteractions(handle, this.disabled);\n    }\n  }\n\n  /** Sets the layout direction of the draggable item. */\n  withDirection(direction: Direction): this {\n    this._direction = direction;\n    return this;\n  }\n\n  /** Sets the container that the item is part of. */\n  _withDropContainer(container: DropListRef) {\n    this._dropContainer = container;\n  }\n\n  /**\n   * Gets the current position in pixels the draggable outside of a drop container.\n   */\n  getFreeDragPosition(): Readonly<Point> {\n    const position = this.isDragging() ? this._activeTransform : this._passiveTransform;\n    return {x: position.x, 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: Point): this {\n    this._activeTransform = {x: 0, y: 0};\n    this._passiveTransform.x = value.x;\n    this._passiveTransform.y = value.y;\n\n    if (!this._dropContainer) {\n      this._applyRootElementTransform(value.x, value.y);\n    }\n\n    return this;\n  }\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: PreviewContainer): this {\n    this._previewContainer = value;\n    return this;\n  }\n\n  /** Updates the item's sort order based on the last-known pointer position. */\n  _sortFromLastPointerPosition() {\n    const position = this._lastKnownPointerPosition;\n\n    if (position && this._dropContainer) {\n      this._updateActiveDropContainer(this._getConstrainedPointerPosition(position), position);\n    }\n  }\n\n  /** Unsubscribes from the global subscriptions. */\n  private _removeSubscriptions() {\n    this._pointerMoveSubscription.unsubscribe();\n    this._pointerUpSubscription.unsubscribe();\n    this._scrollSubscription.unsubscribe();\n  }\n\n  /** Destroys the preview element and its ViewRef. */\n  private _destroyPreview() {\n    this._preview?.remove();\n    this._previewRef?.destroy();\n    this._preview = this._previewRef = null!;\n  }\n\n  /** Destroys the placeholder element and its ViewRef. */\n  private _destroyPlaceholder() {\n    this._placeholder?.remove();\n    this._placeholderRef?.destroy();\n    this._placeholder = this._placeholderRef = null!;\n  }\n\n  /** Handler for the `mousedown`/`touchstart` events. */\n  private _pointerDown = (event: MouseEvent | TouchEvent) => {\n    this.beforeStarted.next();\n\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._handles.find(handle => {\n        return event.target && (event.target === handle || handle.contains(event.target as Node));\n      });\n\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\n  /** Handler that is invoked when the user moves their pointer after they've initiated a drag. */\n  private _pointerMove = (event: MouseEvent | TouchEvent) => {\n    const pointerPosition = this._getPointerPositionOnPage(event);\n\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\n      // Only start dragging after the user has moved more than the minimum distance in either\n      // direction. Note that this is preferrable 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\n        if (!isDelayElapsed) {\n          this._endDragSequence(event);\n          return;\n        }\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          event.preventDefault();\n          this._hasStartedDragging = true;\n          this._ngZone.run(() => this._startDragSequence(event));\n        }\n      }\n\n      return;\n    }\n\n    // We only need the preview dimensions if we have a boundary element.\n    if (this._boundaryElement) {\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._rootElement).getBoundingClientRect();\n      }\n    }\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    event.preventDefault();\n\n    const constrainedPointerPosition = this._getConstrainedPointerPosition(pointerPosition);\n    this._hasMoved = true;\n    this._lastKnownPointerPosition = pointerPosition;\n    this._updatePointerDirectionDelta(constrainedPointerPosition);\n\n    if (this._dropContainer) {\n      this._updateActiveDropContainer(constrainedPointerPosition, pointerPosition);\n    } else {\n      const activeTransform = this._activeTransform;\n      activeTransform.x =\n        constrainedPointerPosition.x - this._pickupPositionOnPage.x + this._passiveTransform.x;\n      activeTransform.y =\n        constrainedPointerPosition.y - this._pickupPositionOnPage.y + this._passiveTransform.y;\n\n      this._applyRootElementTransform(activeTransform.x, activeTransform.y);\n    }\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\n  /** Handler that is invoked when the user lifts their pointer up, after initiating a drag. */\n  private _pointerUp = (event: MouseEvent | TouchEvent) => {\n    this._endDragSequence(event);\n  };\n\n  /**\n   * Clears subscriptions and stops the dragging sequence.\n   * @param event Browser event object that ended the sequence.\n   */\n  private _endDragSequence(event: MouseEvent | TouchEvent) {\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\n    this._removeSubscriptions();\n    this._dragDropRegistry.stopDragging(this);\n    this._toggleNativeDragInteractions();\n\n    if (this._handles) {\n      (this._rootElement.style as DragCSSStyleDeclaration).webkitTapHighlightColor =\n        this._rootElementTapHighlight;\n    }\n\n    if (!this._hasStartedDragging) {\n      return;\n    }\n\n    this.released.next({source: this});\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        });\n      });\n      this._cleanupCachedDimensions();\n      this._dragDropRegistry.stopDragging(this);\n    }\n  }\n\n  /** Starts the dragging sequence. */\n  private _startDragSequence(event: MouseEvent | TouchEvent) {\n    if (isTouchEvent(event)) {\n      this._lastTouchEventTime = Date.now();\n    }\n\n    this._toggleNativeDragInteractions();\n\n    const dropContainer = this._dropContainer;\n\n    if (dropContainer) {\n      const element = this._rootElement;\n      const parent = element.parentNode as HTMLElement;\n      const placeholder = (this._placeholder = this._createPlaceholderElement());\n      const anchor = (this._anchor = this._anchor || this._document.createComment(''));\n\n      // Needs to happen before the root element is moved.\n      const shadowRoot = this._getShadowRoot();\n\n      // Insert an anchor node so that we can restore the element's position in the DOM.\n      parent.insertBefore(anchor, element);\n\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\n      // Create the preview after the initial transform has\n      // been cached, because it can be affected by the transform.\n      this._preview = this._createPreviewElement();\n\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._getPreviewInsertionPoint(parent, shadowRoot).appendChild(this._preview);\n      this.started.next({source: this}); // Emit before notifying the container.\n      dropContainer.start();\n      this._initialContainer = dropContainer;\n      this._initialIndex = dropContainer.getItemIndex(this);\n    } else {\n      this.started.next({source: this});\n      this._initialContainer = this._initialIndex = undefined!;\n    }\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  /**\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  private _initializeDragSequence(referenceElement: HTMLElement, event: MouseEvent | TouchEvent) {\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\n    const isDragging = this.isDragging();\n    const isTouchSequence = isTouchEvent(event);\n    const isAuxiliaryMouseButton = !isTouchSequence && (event as MouseEvent).button !== 0;\n    const rootElement = this._rootElement;\n    const target = _getEventTarget(event);\n    const isSyntheticEvent =\n      !isTouchSequence &&\n      this._lastTouchEventTime &&\n      this._lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now();\n    const isFakeEvent = isTouchSequence\n      ? isFakeTouchstartFromScreenReader(event as TouchEvent)\n      : isFakeMousedownFromScreenReader(event as MouseEvent);\n\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 as HTMLElement).draggable && event.type === 'mousedown') {\n      event.preventDefault();\n    }\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\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 as DragCSSStyleDeclaration;\n      this._rootElementTapHighlight = rootStyles.webkitTapHighlightColor || '';\n      rootStyles.webkitTapHighlightColor = 'transparent';\n    }\n\n    this._hasStartedDragging = this._hasMoved = false;\n\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._removeSubscriptions();\n    this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);\n    this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);\n    this._scrollSubscription = this._dragDropRegistry\n      .scrolled(this._getShadow