import { AfterViewInit } from '@angular/core'; import { BooleanInput } from '@angular/cdk/coercion'; import { ChangeDetectorRef } from '@angular/core'; import { Direction } from '@angular/cdk/bidi'; import { Directionality } from '@angular/cdk/bidi'; import { ElementRef } from '@angular/core'; import { EventEmitter } from '@angular/core'; import * as i0 from '@angular/core'; import * as i7 from '@angular/cdk/scrolling'; import { InjectionToken } from '@angular/core'; import { NgZone } from '@angular/core'; import { NumberInput } from '@angular/cdk/coercion'; import { Observable } from 'rxjs'; import { OnChanges } from '@angular/core'; import { OnDestroy } from '@angular/core'; import { QueryList } from '@angular/core'; import { ScrollDispatcher } from '@angular/cdk/scrolling'; import { SimpleChanges } from '@angular/core'; import { Subject } from 'rxjs'; import { TemplateRef } from '@angular/core'; import { ViewContainerRef } from '@angular/core'; import { ViewportRuler } from '@angular/cdk/scrolling'; /** * Injection token that can be used to configure the * behavior of the drag&drop-related components. */ export declare const CDK_DRAG_CONFIG: InjectionToken; /** * Injection token that can be used to reference instances of `CdkDragHandle`. It serves as * alternative token to the actual `CdkDragHandle` class which could cause unnecessary * retention of the class and its directive metadata. */ export declare const CDK_DRAG_HANDLE: InjectionToken; /** * Injection token that can be used for a `CdkDrag` to provide itself as a parent to the * drag-specific child directive (`CdkDragHandle`, `CdkDragPreview` etc.). Used primarily * to avoid circular imports. * @docs-private */ export declare const CDK_DRAG_PARENT: InjectionToken<{}>; /** * Injection token that can be used to reference instances of `CdkDragPlaceholder`. It serves as * alternative token to the actual `CdkDragPlaceholder` class which could cause unnecessary * retention of the class and its directive metadata. */ export declare const CDK_DRAG_PLACEHOLDER: InjectionToken>; /** * Injection token that can be used to reference instances of `CdkDragPreview`. It serves as * alternative token to the actual `CdkDragPreview` class which could cause unnecessary * retention of the class and its directive metadata. */ export declare const CDK_DRAG_PREVIEW: InjectionToken>; /** * Injection token that can be used to reference instances of `CdkDropList`. It serves as * alternative token to the actual `CdkDropList` class which could cause unnecessary * retention of the class and its directive metadata. */ export declare const CDK_DROP_LIST: InjectionToken>; /** * Injection token that can be used to reference instances of `CdkDropListGroup`. It serves as * alternative token to the actual `CdkDropListGroup` class which could cause unnecessary * retention of the class and its directive metadata. */ export declare const CDK_DROP_LIST_GROUP: InjectionToken>; /** Element that can be moved inside a CdkDropList container. */ export declare class CdkDrag implements AfterViewInit, OnChanges, OnDestroy { /** Element that the draggable is attached to. */ element: ElementRef; /** Droppable container that the draggable is a part of. */ dropContainer: CdkDropList; private _ngZone; private _viewContainerRef; private _dir; private _changeDetectorRef; private _selfHandle?; private _parentDrag?; private readonly _destroyed; private static _dragInstances; /** Reference to the underlying drag instance. */ _dragRef: DragRef>; /** Elements that can be used to drag the draggable item. */ _handles: QueryList; /** Element that will be used as a template to create the draggable item's preview. */ _previewTemplate: CdkDragPreview; /** Template for placeholder element rendered to show where a draggable would be dropped. */ _placeholderTemplate: CdkDragPlaceholder; /** Arbitrary data to attach to this drag instance. */ data: T; /** Locks the position of the dragged element along the specified axis. */ lockAxis: DragAxis; /** * Selector that will be used to determine the root draggable element, starting from * the `cdkDrag` element and going up the DOM. Passing an alternate root element is useful * when trying to enable dragging on an element that you might not have access to. */ rootElementSelector: string; /** * Node or selector that will be used to determine the element to which the draggable's * position will be constrained. If a string is passed in, it'll be used as a selector that * will be matched starting from the element's parent and going up the DOM until a match * has been found. */ boundaryElement: string | ElementRef | HTMLElement; /** * Amount of milliseconds to wait after the user has put their * pointer down before starting to drag the element. */ dragStartDelay: DragStartDelay; /** * Sets the position of a `CdkDrag` that is outside of a drop container. * Can be used to restore the element's position for a returning user. */ freeDragPosition: Point; /** Whether starting to drag this element is disabled. */ get disabled(): boolean; set disabled(value: BooleanInput); private _disabled; /** * Function that can be used to customize the logic of how the position of the drag item * is limited while it's being dragged. Gets called with a point containing the current position * of the user's pointer on the page, a reference to the item being dragged and its dimensions. * Should return a point describing where the item should be rendered. */ constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: ClientRect, pickupPositionInElement: Point) => Point; /** Class to be added to the preview element. */ previewClass: string | string[]; /** * Configures the place into which the preview of the item will be inserted. Can be configured * globally through `CDK_DROP_LIST`. Possible values: * - `global` - Preview will be inserted at the bottom of the ``. The advantage is that * you don't have to worry about `overflow: hidden` or `z-index`, but the item won't retain * its inherited styles. * - `parent` - Preview will be inserted into the parent of the drag item. The advantage is that * inherited styles will be preserved, but it may be clipped by `overflow: hidden` or not be * visible due to `z-index`. Furthermore, the preview is going to have an effect over selectors * like `:nth-child` and some flexbox configurations. * - `ElementRef | HTMLElement` - Preview will be inserted into a specific element. * Same advantages and disadvantages as `parent`. */ previewContainer: PreviewContainer; /** Emits when the user starts dragging the item. */ readonly started: EventEmitter; /** Emits when the user has released a drag item, before any animations have started. */ readonly released: EventEmitter; /** Emits when the user stops dragging an item in the container. */ readonly ended: EventEmitter; /** Emits when the user has moved the item into a new container. */ readonly entered: EventEmitter>; /** Emits when the user removes the item its container by dragging it into another container. */ readonly exited: EventEmitter>; /** Emits when the user drops the item inside a container. */ readonly dropped: EventEmitter>; /** * Emits as the user is dragging the item. Use with caution, * because this event will fire for every pixel that the user has dragged. */ readonly moved: Observable>; constructor( /** Element that the draggable is attached to. */ element: ElementRef, /** Droppable container that the draggable is a part of. */ dropContainer: CdkDropList, /** * @deprecated `_document` parameter no longer being used and will be removed. * @breaking-change 12.0.0 */ _document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, config: DragDropConfig, _dir: Directionality, dragDrop: DragDrop, _changeDetectorRef: ChangeDetectorRef, _selfHandle?: CdkDragHandle | undefined, _parentDrag?: CdkDrag | undefined); /** * Returns the element that is being used as a placeholder * while the current element is being dragged. */ getPlaceholderElement(): HTMLElement; /** Returns the root draggable element. */ getRootElement(): HTMLElement; /** Resets a standalone drag item to its initial position. */ reset(): void; /** * Gets the pixel coordinates of the draggable outside of a drop container. */ getFreeDragPosition(): Readonly; /** * Sets the current position in pixels the draggable outside of a drop container. * @param value New position to be set. */ setFreeDragPosition(value: Point): void; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** Syncs the root element with the `DragRef`. */ private _updateRootElement; /** Gets the boundary element, based on the `boundaryElement` value. */ private _getBoundaryElement; /** Syncs the inputs of the CdkDrag with the options of the underlying DragRef. */ private _syncInputs; /** Handles the events from the underlying `DragRef`. */ private _handleEvents; /** Assigns the default input values based on a provided config object. */ private _assignDefaults; /** Sets up the listener that syncs the handles with the drag ref. */ private _setupHandlesListener; static ɵfac: i0.ɵɵFactoryDeclaration, [null, { optional: true; skipSelf: true; }, null, null, null, { optional: true; }, { optional: true; }, null, null, { optional: true; self: true; }, { optional: true; skipSelf: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration, "[cdkDrag]", ["cdkDrag"], { "data": { "alias": "cdkDragData"; "required": false; }; "lockAxis": { "alias": "cdkDragLockAxis"; "required": false; }; "rootElementSelector": { "alias": "cdkDragRootElement"; "required": false; }; "boundaryElement": { "alias": "cdkDragBoundary"; "required": false; }; "dragStartDelay": { "alias": "cdkDragStartDelay"; "required": false; }; "freeDragPosition": { "alias": "cdkDragFreeDragPosition"; "required": false; }; "disabled": { "alias": "cdkDragDisabled"; "required": false; }; "constrainPosition": { "alias": "cdkDragConstrainPosition"; "required": false; }; "previewClass": { "alias": "cdkDragPreviewClass"; "required": false; }; "previewContainer": { "alias": "cdkDragPreviewContainer"; "required": false; }; }, { "started": "cdkDragStarted"; "released": "cdkDragReleased"; "ended": "cdkDragEnded"; "entered": "cdkDragEntered"; "exited": "cdkDragExited"; "dropped": "cdkDragDropped"; "moved": "cdkDragMoved"; }, ["_previewTemplate", "_placeholderTemplate", "_handles"], never, true, never>; } /** Event emitted when the user drops a draggable item inside a drop container. */ export declare interface CdkDragDrop { /** Index of the item when it was picked up. */ previousIndex: number; /** Current index of the item. */ currentIndex: number; /** Item that is being dropped. */ item: CdkDrag; /** Container in which the item was dropped. */ container: CdkDropList; /** Container from which the item was picked up. Can be the same as the `container`. */ previousContainer: CdkDropList; /** Whether the user's pointer was over the container when the item was dropped. */ isPointerOverContainer: boolean; /** Distance in pixels that the user has dragged since the drag sequence started. */ distance: { x: number; y: number; }; /** Position where the pointer was when the item was dropped */ dropPoint: { x: number; y: number; }; /** Native event that caused the drop event. */ event: MouseEvent | TouchEvent; } /** Event emitted when the user stops dragging a draggable. */ export declare interface CdkDragEnd { /** Draggable that emitted the event. */ source: CdkDrag; /** Distance in pixels that the user has dragged since the drag sequence started. */ distance: { x: number; y: number; }; /** Position where the pointer was when the item was dropped */ dropPoint: { x: number; y: number; }; /** Native event that caused the dragging to stop. */ event: MouseEvent | TouchEvent; } /** Event emitted when the user moves an item into a new drop container. */ export declare interface CdkDragEnter { /** Container into which the user has moved the item. */ container: CdkDropList; /** Item that was moved into the container. */ item: CdkDrag; /** Index at which the item has entered the container. */ currentIndex: number; } /** * Event emitted when the user removes an item from a * drop container by moving it into another one. */ export declare interface CdkDragExit { /** Container from which the user has a removed an item. */ container: CdkDropList; /** Item that was removed from the container. */ item: CdkDrag; } /** Handle that can be used to drag a CdkDrag instance. */ export declare class CdkDragHandle implements OnDestroy { element: ElementRef; /** Closest parent draggable instance. */ _parentDrag: {} | undefined; /** Emits when the state of the handle has changed. */ readonly _stateChanges: Subject; /** Whether starting to drag through this handle is disabled. */ get disabled(): boolean; set disabled(value: BooleanInput); private _disabled; constructor(element: ElementRef, parentDrag?: any); ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** Event emitted as the user is dragging a draggable item. */ export declare interface CdkDragMove { /** Item that is being dragged. */ source: CdkDrag; /** Position of the user's pointer on the page. */ pointerPosition: { x: number; y: number; }; /** Native event that is causing the dragging. */ event: MouseEvent | TouchEvent; /** Distance in pixels that the user has dragged since the drag sequence started. */ distance: { x: number; y: number; }; /** * Indicates the direction in which the user is dragging the element along each axis. * `1` means that the position is increasing (e.g. the user is moving to the right or downwards), * whereas `-1` means that it's decreasing (they're moving to the left or upwards). `0` means * that the position hasn't changed. */ delta: { x: -1 | 0 | 1; y: -1 | 0 | 1; }; } /** * Element that will be used as a template for the placeholder of a CdkDrag when * it is being dragged. The placeholder is displayed in place of the element being dragged. */ export declare class CdkDragPlaceholder { templateRef: TemplateRef; /** Context data to be added to the placeholder template instance. */ data: T; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "ng-template[cdkDragPlaceholder]", never, { "data": { "alias": "data"; "required": false; }; }, {}, never, never, true, never>; } /** * Element that will be used as a template for the preview * of a CdkDrag when it is being dragged. */ export declare class CdkDragPreview { templateRef: TemplateRef; /** Context data to be added to the preview template instance. */ data: T; /** Whether the preview should preserve the same size as the item that is being dragged. */ get matchSize(): boolean; set matchSize(value: BooleanInput); private _matchSize; constructor(templateRef: TemplateRef); static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "ng-template[cdkDragPreview]", never, { "data": { "alias": "data"; "required": false; }; "matchSize": { "alias": "matchSize"; "required": false; }; }, {}, never, never, true, never>; } /** Event emitted when the user releases an item, before any animations have started. */ export declare interface CdkDragRelease { /** Draggable that emitted the event. */ source: CdkDrag; /** Native event that caused the release event. */ event: MouseEvent | TouchEvent; } /** Event emitted when the user swaps the position of two drag items. */ export declare interface CdkDragSortEvent { /** Index from which the item was sorted previously. */ previousIndex: number; /** Index that the item is currently in. */ currentIndex: number; /** Container that the item belongs to. */ container: CdkDropList; /** Item that is being sorted. */ item: CdkDrag; } /** Event emitted when the user starts dragging a draggable. */ export declare interface CdkDragStart { /** Draggable that emitted the event. */ source: CdkDrag; /** Native event that started the drag sequence. */ event: MouseEvent | TouchEvent; } /** Container that wraps a set of draggable items. */ export declare class CdkDropList implements OnDestroy { /** Element that the drop list is attached to. */ element: ElementRef; private _changeDetectorRef; private _scrollDispatcher; private _dir?; private _group?; /** Emits when the list has been destroyed. */ private readonly _destroyed; /** Whether the element's scrollable parents have been resolved. */ private _scrollableParentsResolved; /** Keeps track of the drop lists that are currently on the page. */ private static _dropLists; /** Reference to the underlying drop list instance. */ _dropListRef: DropListRef>; /** * Other draggable containers that this container is connected to and into which the * container's items can be transferred. Can either be references to other drop containers, * or their unique IDs. */ connectedTo: (CdkDropList | string)[] | CdkDropList | string; /** Arbitrary data to attach to this container. */ data: T; /** Direction in which the list is oriented. */ orientation: DropListOrientation; /** * Unique ID for the drop zone. Can be used as a reference * in the `connectedTo` of another `CdkDropList`. */ id: string; /** Locks the position of the draggable elements inside the container along the specified axis. */ lockAxis: DragAxis; /** Whether starting a dragging sequence from this container is disabled. */ get disabled(): boolean; set disabled(value: BooleanInput); private _disabled; /** Whether sorting within this drop list is disabled. */ sortingDisabled: BooleanInput; /** * Function that is used to determine whether an item * is allowed to be moved into a drop container. */ enterPredicate: (drag: CdkDrag, drop: CdkDropList) => boolean; /** Functions that is used to determine whether an item can be sorted into a particular index. */ sortPredicate: (index: number, drag: CdkDrag, drop: CdkDropList) => boolean; /** Whether to auto-scroll the view when the user moves their pointer close to the edges. */ autoScrollDisabled: BooleanInput; /** Number of pixels to scroll for each frame when auto-scrolling an element. */ autoScrollStep: NumberInput; /** Emits when the user drops an item inside the container. */ readonly dropped: EventEmitter>; /** * Emits when the user has moved a new drag item into this container. */ readonly entered: EventEmitter>; /** * Emits when the user removes an item from the container * by dragging it into another container. */ readonly exited: EventEmitter>; /** Emits as the user is swapping items while actively dragging. */ readonly sorted: EventEmitter>; /** * Keeps track of the items that are registered with this container. Historically we used to * do this with a `ContentChildren` query, however queries don't handle transplanted views very * well which means that we can't handle cases like dragging the headers of a `mat-table` * correctly. What we do instead is to have the items register themselves with the container * and then we sort them based on their position in the DOM. */ private _unsortedItems; constructor( /** Element that the drop list is attached to. */ element: ElementRef, dragDrop: DragDrop, _changeDetectorRef: ChangeDetectorRef, _scrollDispatcher: ScrollDispatcher, _dir?: Directionality | undefined, _group?: CdkDropListGroup> | undefined, config?: DragDropConfig); /** Registers an items with the drop list. */ addItem(item: CdkDrag): void; /** Removes an item from the drop list. */ removeItem(item: CdkDrag): void; /** Gets the registered items in the list, sorted by their position in the DOM. */ getSortedItems(): CdkDrag[]; ngOnDestroy(): void; /** Syncs the inputs of the CdkDropList with the options of the underlying DropListRef. */ private _setupInputSyncSubscription; /** Handles events from the underlying DropListRef. */ private _handleEvents; /** Assigns the default input values based on a provided config object. */ private _assignDefaults; /** Syncs up the registered drag items with underlying drop list ref. */ private _syncItemsWithRef; static ɵfac: i0.ɵɵFactoryDeclaration, [null, null, null, null, { optional: true; }, { optional: true; skipSelf: true; }, { optional: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration, "[cdkDropList], cdk-drop-list", ["cdkDropList"], { "connectedTo": { "alias": "cdkDropListConnectedTo"; "required": false; }; "data": { "alias": "cdkDropListData"; "required": false; }; "orientation": { "alias": "cdkDropListOrientation"; "required": false; }; "id": { "alias": "id"; "required": false; }; "lockAxis": { "alias": "cdkDropListLockAxis"; "required": false; }; "disabled": { "alias": "cdkDropListDisabled"; "required": false; }; "sortingDisabled": { "alias": "cdkDropListSortingDisabled"; "required": false; }; "enterPredicate": { "alias": "cdkDropListEnterPredicate"; "required": false; }; "sortPredicate": { "alias": "cdkDropListSortPredicate"; "required": false; }; "autoScrollDisabled": { "alias": "cdkDropListAutoScrollDisabled"; "required": false; }; "autoScrollStep": { "alias": "cdkDropListAutoScrollStep"; "required": false; }; }, { "dropped": "cdkDropListDropped"; "entered": "cdkDropListEntered"; "exited": "cdkDropListExited"; "sorted": "cdkDropListSorted"; }, never, never, true, never>; } /** * Declaratively connects sibling `cdkDropList` instances together. All of the `cdkDropList` * elements that are placed inside a `cdkDropListGroup` will be connected to each other * automatically. Can be used as an alternative to the `cdkDropListConnectedTo` input * from `cdkDropList`. */ export declare class CdkDropListGroup implements OnDestroy { /** Drop lists registered inside the group. */ readonly _items: Set; /** Whether starting a dragging sequence from inside this group is disabled. */ get disabled(): boolean; set disabled(value: BooleanInput); private _disabled; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵdir: i0.ɵɵDirectiveDeclaration, "[cdkDropListGroup]", ["cdkDropListGroup"], { "disabled": { "alias": "cdkDropListGroupDisabled"; "required": false; }; }, {}, never, never, true, never>; } /** * Copies an item from one array to another, leaving it in its * original position in current array. * @param currentArray Array from which to copy the item. * @param targetArray Array into which is copy the item. * @param currentIndex Index of the item in its current array. * @param targetIndex Index at which to insert the item. * */ export declare function copyArrayItem(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void; /** Possible axis along which dragging can be locked. */ export declare type DragAxis = 'x' | 'y'; /** Function that can be used to constrain the position of a dragged element. */ export declare type DragConstrainPosition = (point: Point, dragRef: DragRef) => Point; /** * Service that allows for drag-and-drop functionality to be attached to DOM elements. */ export declare class DragDrop { private _document; private _ngZone; private _viewportRuler; private _dragDropRegistry; constructor(_document: any, _ngZone: NgZone, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry); /** * Turns an element into a draggable item. * @param element Element to which to attach the dragging functionality. * @param config Object used to configure the dragging behavior. */ createDrag(element: ElementRef | HTMLElement, config?: DragRefConfig): DragRef; /** * Turns an element into a drop list. * @param element Element to which to attach the drop list functionality. */ createDropList(element: ElementRef | HTMLElement): DropListRef; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵprov: i0.ɵɵInjectableDeclaration; } /** * Object that can be used to configure the drag * items and drop lists within a module or a component. */ export declare interface DragDropConfig extends Partial { lockAxis?: DragAxis; dragStartDelay?: DragStartDelay; constrainPosition?: DragConstrainPosition; previewClass?: string | string[]; boundaryElement?: string; rootElementSelector?: string; draggingDisabled?: boolean; sortingDisabled?: boolean; listAutoScrollDisabled?: boolean; listOrientation?: DropListOrientation; zIndex?: number; previewContainer?: 'global' | 'parent'; } export declare class DragDropModule { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵmod: i0.ɵɵNgModuleDeclaration; static ɵinj: i0.ɵɵInjectorDeclaration; } /** * Service that keeps track of all the drag item and drop container * instances, and manages global event listeners on the `document`. * @docs-private */ export declare class DragDropRegistry implements OnDestroy { private _ngZone; private _document; /** Registered drop container instances. */ private _dropInstances; /** Registered drag item instances. */ private _dragInstances; /** Drag item instances that are currently being dragged. */ private _activeDragInstances; /** Keeps track of the event listeners that we've bound to the `document`. */ private _globalListeners; /** * Predicate function to check if an item is being dragged. Moved out into a property, * because it'll be called a lot and we don't want to create a new function every time. */ private _draggingPredicate; /** * Emits the `touchmove` or `mousemove` events that are dispatched * while the user is dragging a drag item instance. */ readonly pointerMove: Subject; /** * Emits the `touchend` or `mouseup` events that are dispatched * while the user is dragging a drag item instance. */ readonly pointerUp: Subject; /** * Emits when the viewport has been scrolled while the user is dragging an item. * @deprecated To be turned into a private member. Use the `scrolled` method instead. * @breaking-change 13.0.0 */ readonly scroll: Subject; constructor(_ngZone: NgZone, _document: any); /** Adds a drop container to the registry. */ registerDropContainer(drop: C): void; /** Adds a drag item instance to the registry. */ registerDragItem(drag: I): void; /** Removes a drop container from the registry. */ removeDropContainer(drop: C): void; /** Removes a drag item instance from the registry. */ removeDragItem(drag: I): void; /** * Starts the dragging sequence for a drag instance. * @param drag Drag instance which is being dragged. * @param event Event that initiated the dragging. */ startDragging(drag: I, event: TouchEvent | MouseEvent): void; /** Stops dragging a drag item instance. */ stopDragging(drag: I): void; /** Gets whether a drag item instance is currently being dragged. */ isDragging(drag: I): boolean; /** * Gets a stream that will emit when any element on the page is scrolled while an item is being * dragged. * @param shadowRoot Optional shadow root that the current dragging sequence started from. * Top-level listeners won't pick up events coming from the shadow DOM so this parameter can * be used to include an additional top-level listener at the shadow root level. */ scrolled(shadowRoot?: DocumentOrShadowRoot | null): Observable; ngOnDestroy(): void; /** * Event listener that will prevent the default browser action while the user is dragging. * @param event Event whose default action should be prevented. */ private _preventDefaultWhileDragging; /** Event listener for `touchmove` that is bound even if no dragging is happening. */ private _persistentTouchmoveListener; /** Clears out the global event listeners from the `document`. */ private _clearGlobalListeners; static ɵfac: i0.ɵɵFactoryDeclaration, never>; static ɵprov: i0.ɵɵInjectableDeclaration>; } /** Template that can be used to create a drag helper element (e.g. a preview or a placeholder). */ declare interface DragHelperTemplate { template: TemplateRef | null; viewContainer: ViewContainerRef; context: T; } /** Template that can be used to create a drag preview element. */ declare interface DragPreviewTemplate extends DragHelperTemplate { matchSize?: boolean; } /** * Reference to a draggable item. Used to manipulate or dispose of the item. */ export declare class DragRef { private _config; private _document; private _ngZone; private _viewportRuler; private _dragDropRegistry; /** Element displayed next to the user's pointer while the element is dragged. */ private _preview; /** Reference to the view of the preview element. */ private _previewRef; /** Container into which to insert the preview. */ private _previewContainer; /** Reference to the view of the placeholder element. */ private _placeholderRef; /** Element that is rendered instead of the draggable item while it is being sorted. */ private _placeholder; /** Coordinates within the element at which the user picked up the element. */ private _pickupPositionInElement; /** Coordinates on the page at which the user picked up the element. */ private _pickupPositionOnPage; /** * Anchor node used to save the place in the DOM where the element was * picked up so that it can be restored at the end of the drag sequence. */ private _anchor; /** * CSS `transform` applied to the element when it isn't being dragged. We need a * passive transform in order for the dragged element to retain its new position * after the user has stopped dragging and because we need to know the relative * position in case they start dragging again. This corresponds to `element.style.transform`. */ private _passiveTransform; /** CSS `transform` that is applied to the element while it's being dragged. */ private _activeTransform; /** Inline `transform` value that the element had before the first dragging sequence. */ private _initialTransform?; /** * Whether the dragging sequence has been started. Doesn't * necessarily mean that the element has been moved. */ private _hasStartedDragging; /** Whether the element has moved since the user started dragging it. */ private _hasMoved; /** Drop container in which the DragRef resided when dragging began. */ private _initialContainer; /** Index at which the item started in its initial container. */ private _initialIndex; /** Cached positions of scrollable parent elements. */ private _parentPositions; /** Emits when the item is being moved. */ private readonly _moveEvents; /** Keeps track of the direction in which the user is dragging along each axis. */ private _pointerDirectionDelta; /** Pointer position at which the last change in the delta occurred. */ private _pointerPositionAtLastDirectionChange; /** Position of the pointer at the last pointer event. */ private _lastKnownPointerPosition; /** * Root DOM node of the drag instance. This is the element that will * be moved around as the user is dragging. */ private _rootElement; /** * Nearest ancestor SVG, relative to which coordinates are calculated if dragging SVGElement */ private _ownerSVGElement; /** * Inline style value of `-webkit-tap-highlight-color` at the time the * dragging was started. Used to restore the value once we're done dragging. */ private _rootElementTapHighlight; /** Subscription to pointer movement events. */ private _pointerMoveSubscription; /** Subscription to the event that is dispatched when the user lifts their pointer. */ private _pointerUpSubscription; /** Subscription to the viewport being scrolled. */ private _scrollSubscription; /** Subscription to the viewport being resized. */ private _resizeSubscription; /** * Time at which the last touch event occurred. Used to avoid firing the same * events multiple times on touch devices where the browser will fire a fake * mouse event for each touch event, after a certain time. */ private _lastTouchEventTime; /** Time at which the last dragging sequence was started. */ private _dragStartTime; /** Cached reference to the boundary element. */ private _boundaryElement; /** Whether the native dragging interactions have been enabled on the root element. */ private _nativeInteractionsEnabled; /** Client rect of the root element when the dragging sequence has started. */ private _initialClientRect?; /** Cached dimensions of the preview element. Should be read via `_getPreviewRect`. */ private _previewRect?; /** Cached dimensions of the boundary element. */ private _boundaryRect?; /** Element that will be used as a template to create the draggable item's preview. */ private _previewTemplate?; /** Template for placeholder element rendered to show where a draggable would be dropped. */ private _placeholderTemplate?; /** Elements that can be used to drag the draggable item. */ private _handles; /** Registered handles that are currently disabled. */ private _disabledHandles; /** Droppable container that the draggable is a part of. */ private _dropContainer?; /** Layout direction of the item. */ private _direction; /** Ref that the current drag item is nested in. */ private _parentDragRef; /** * Cached shadow root that the element is placed in. `null` means that the element isn't in * the shadow DOM and `undefined` means that it hasn't been resolved yet. Should be read via * `_getShadowRoot`, not directly. */ private _cachedShadowRoot; /** Axis along which dragging is locked. */ lockAxis: 'x' | 'y'; /** * Amount of milliseconds to wait after the user has put their * pointer down before starting to drag the element. */ dragStartDelay: number | { touch: number; mouse: number; }; /** Class to be added to the preview element. */ previewClass: string | string[] | undefined; /** Whether starting to drag this element is disabled. */ get disabled(): boolean; set disabled(value: boolean); private _disabled; /** Emits as the drag sequence is being prepared. */ readonly beforeStarted: Subject; /** Emits when the user starts dragging the item. */ readonly started: Subject<{ source: DragRef; event: MouseEvent | TouchEvent; }>; /** Emits when the user has released a drag item, before any animations have started. */ readonly released: Subject<{ source: DragRef; event: MouseEvent | TouchEvent; }>; /** Emits when the user stops dragging an item in the container. */ readonly ended: Subject<{ source: DragRef; distance: Point; dropPoint: Point; event: MouseEvent | TouchEvent; }>; /** Emits when the user has moved the item into a new container. */ readonly entered: Subject<{ container: DropListRef; item: DragRef; currentIndex: number; }>; /** Emits when the user removes the item its container by dragging it into another container. */ readonly exited: Subject<{ container: DropListRef; item: DragRef; }>; /** Emits when the user drops the item inside a container. */ readonly dropped: Subject<{ previousIndex: number; currentIndex: number; item: DragRef; container: DropListRef; previousContainer: DropListRef; distance: Point; dropPoint: Point; isPointerOverContainer: boolean; event: MouseEvent | TouchEvent; }>; /** * Emits as the user is dragging the item. Use with caution, * because this event will fire for every pixel that the user has dragged. */ readonly moved: Observable<{ source: DragRef; pointerPosition: { x: number; y: number; }; event: MouseEvent | TouchEvent; distance: Point; delta: { x: -1 | 0 | 1; y: -1 | 0 | 1; }; }>; /** Arbitrary data that can be attached to the drag item. */ data: T; /** * Function that can be used to customize the logic of how the position of the drag item * is limited while it's being dragged. Gets called with a point containing the current position * of the user's pointer on the page, a reference to the item being dragged and its dimensions. * Should return a point describing where the item should be rendered. */ constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: ClientRect, pickupPositionInElement: Point) => Point; constructor(element: ElementRef | HTMLElement, _config: DragRefConfig, _document: Document, _ngZone: NgZone, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry); /** * Returns the element that is being used as a placeholder * while the current element is being dragged. */ getPlaceholderElement(): HTMLElement; /** Returns the root draggable element. */ getRootElement(): HTMLElement; /** * Gets the currently-visible element that represents the drag item. * While dragging this is the placeholder, otherwise it's the root element. */ getVisibleElement(): HTMLElement; /** Registers the handles that can be used to drag the element. */ withHandles(handles: (HTMLElement | ElementRef)[]): this; /** * Registers the template that should be used for the drag preview. * @param template Template that from which to stamp out the preview. */ withPreviewTemplate(template: DragPreviewTemplate | null): this; /** * Registers the template that should be used for the drag placeholder. * @param template Template that from which to stamp out the placeholder. */ withPlaceholderTemplate(template: DragHelperTemplate | null): this; /** * Sets an alternate drag root element. The root element is the element that will be moved as * the user is dragging. Passing an alternate root element is useful when trying to enable * dragging on an element that you might not have access to. */ withRootElement(rootElement: ElementRef | HTMLElement): this; /** * Element to which the draggable's position will be constrained. */ withBoundaryElement(boundaryElement: ElementRef | HTMLElement | null): this; /** Sets the parent ref that the ref is nested in. */ withParent(parent: DragRef | null): this; /** Removes the dragging functionality from the DOM element. */ dispose(): void; /** Checks whether the element is currently being dragged. */ isDragging(): boolean; /** Resets a standalone drag item to its initial position. */ reset(): void; /** * Sets a handle as disabled. While a handle is disabled, it'll capture and interrupt dragging. * @param handle Handle element that should be disabled. */ disableHandle(handle: HTMLElement): void; /** * Enables a handle, if it has been disabled. * @param handle Handle element to be enabled. */ enableHandle(handle: HTMLElement): void; /** Sets the layout direction of the draggable item. */ withDirection(direction: Direction): this; /** Sets the container that the item is part of. */ _withDropContainer(container: DropListRef): void; /** * Gets the current position in pixels the draggable outside of a drop container. */ getFreeDragPosition(): Readonly; /** * Sets the current position in pixels the draggable outside of a drop container. * @param value New position to be set. */ setFreeDragPosition(value: Point): this; /** * Sets the container into which to insert the preview element. * @param value Container into which to insert the preview. */ withPreviewContainer(value: PreviewContainer): this; /** Updates the item's sort order based on the last-known pointer position. */ _sortFromLastPointerPosition(): void; /** Unsubscribes from the global subscriptions. */ private _removeSubscriptions; /** Destroys the preview element and its ViewRef. */ private _destroyPreview; /** Destroys the placeholder element and its ViewRef. */ private _destroyPlaceholder; /** Handler for the `mousedown`/`touchstart` events. */ private _pointerDown; /** Handler that is invoked when the user moves their pointer after they've initiated a drag. */ private _pointerMove; /** Handler that is invoked when the user lifts their pointer up, after initiating a drag. */ private _pointerUp; /** * Clears subscriptions and stops the dragging sequence. * @param event Browser event object that ended the sequence. */ private _endDragSequence; /** Starts the dragging sequence. */ private _startDragSequence; /** * Sets up the different variables and subscriptions * that will be necessary for the dragging sequence. * @param referenceElement Element that started the drag sequence. * @param event Browser event object that started the sequence. */ private _initializeDragSequence; /** Cleans up the DOM artifacts that were added to facilitate the element being dragged. */ private _cleanupDragArtifacts; /** * Updates the item's position in its drop container, or moves it * into a new one, depending on its current drag position. */ private _updateActiveDropContainer; /** * Creates the element that will be rendered next to the user's pointer * and will be used as a preview of the element that is being dragged. */ private _createPreviewElement; /** * Animates the preview element from its current position to the location of the drop placeholder. * @returns Promise that resolves when the animation completes. */ private _animatePreviewToPlaceholder; /** Creates an element that will be shown instead of the current element while dragging. */ private _createPlaceholderElement; /** * Figures out the coordinates at which an element was picked up. * @param referenceElement Element that initiated the dragging. * @param event Event that initiated the dragging. */ private _getPointerPositionInElement; /** Determines the point of the page that was touched by the user. */ private _getPointerPositionOnPage; /** Gets the pointer position on the page, accounting for any position constraints. */ private _getConstrainedPointerPosition; /** Updates the current drag delta, based on the user's current pointer position on the page. */ private _updatePointerDirectionDelta; /** Toggles the native drag interactions, based on how many handles are registered. */ private _toggleNativeDragInteractions; /** Removes the manually-added event listeners from the root element. */ private _removeRootElementListeners; /** * Applies a `transform` to the root element, taking into account any existing transforms on it. * @param x New transform value along the X axis. * @param y New transform value along the Y axis. */ private _applyRootElementTransform; /** * Applies a `transform` to the preview, taking into account any existing transforms on it. * @param x New transform value along the X axis. * @param y New transform value along the Y axis. */ private _applyPreviewTransform; /** * Gets the distance that the user has dragged during the current drag sequence. * @param currentPosition Current position of the user's pointer. */ private _getDragDistance; /** Cleans up any cached element dimensions that we don't need after dragging has stopped. */ private _cleanupCachedDimensions; /** * Checks whether the element is still inside its boundary after the viewport has been resized. * If not, the position is adjusted so that the element fits again. */ private _containInsideBoundaryOnResize; /** Gets the drag start delay, based on the event type. */ private _getDragStartDelay; /** Updates the internal state of the draggable element when scrolling has occurred. */ private _updateOnScroll; /** Gets the scroll position of the viewport. */ private _getViewportScrollPosition; /** * Lazily resolves and returns the shadow root of the element. We do this in a function, rather * than saving it in property directly on init, because we want to resolve it as late as possible * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`. */ private _getShadowRoot; /** Gets the element into which the drag preview should be inserted. */ private _getPreviewInsertionPoint; /** Lazily resolves and returns the dimensions of the preview. */ private _getPreviewRect; /** Handles a native `dragstart` event. */ private _nativeDragStart; /** Gets a handle that is the target of an event. */ private _getTargetHandle; } /** Object that can be used to configure the behavior of DragRef. */ export declare interface DragRefConfig { /** * Minimum amount of pixels that the user should * drag, before the CDK initiates a drag sequence. */ dragStartThreshold: number; /** * Amount the pixels the user should drag before the CDK * considers them to have changed the drag direction. */ pointerDirectionChangeThreshold: number; /** `z-index` for the absolutely-positioned elements that are created by the drag item. */ zIndex?: number; /** Ref that the current drag item is nested in. */ parentDragRef?: DragRef; } /** Possible values that can be used to configure the drag start delay. */ export declare type DragStartDelay = number | { touch: number; mouse: number; }; /** Possible orientations for a drop list. */ export declare type DropListOrientation = 'horizontal' | 'vertical'; /** * Reference to a drop list. Used to manipulate or dispose of the container. */ export declare class DropListRef { private _dragDropRegistry; private _ngZone; private _viewportRuler; /** Element that the drop list is attached to. */ element: HTMLElement | ElementRef; /** Whether starting a dragging sequence from this container is disabled. */ disabled: boolean; /** Whether sorting items within the list is disabled. */ sortingDisabled: boolean; /** Locks the position of the draggable elements inside the container along the specified axis. */ lockAxis: 'x' | 'y'; /** * Whether auto-scrolling the view when the user * moves their pointer close to the edges is disabled. */ autoScrollDisabled: boolean; /** Number of pixels to scroll for each frame when auto-scrolling an element. */ autoScrollStep: number; /** * Function that is used to determine whether an item * is allowed to be moved into a drop container. */ enterPredicate: (drag: DragRef, drop: DropListRef) => boolean; /** Function that is used to determine whether an item can be sorted into a particular index. */ sortPredicate: (index: number, drag: DragRef, drop: DropListRef) => boolean; /** Emits right before dragging has started. */ readonly beforeStarted: Subject; /** * Emits when the user has moved a new drag item into this container. */ readonly entered: Subject<{ item: DragRef; container: DropListRef; currentIndex: number; }>; /** * Emits when the user removes an item from the container * by dragging it into another container. */ readonly exited: Subject<{ item: DragRef; container: DropListRef; }>; /** Emits when the user drops an item inside the container. */ readonly dropped: Subject<{ item: DragRef; currentIndex: number; previousIndex: number; container: DropListRef; previousContainer: DropListRef; isPointerOverContainer: boolean; distance: Point; dropPoint: Point; event: MouseEvent | TouchEvent; }>; /** Emits as the user is swapping items while actively dragging. */ readonly sorted: Subject<{ previousIndex: number; currentIndex: number; container: DropListRef; item: DragRef; }>; /** Emits when a dragging sequence is started in a list connected to the current one. */ readonly receivingStarted: Subject<{ receiver: DropListRef; initiator: DropListRef; items: DragRef[]; }>; /** Emits when a dragging sequence is stopped from a list connected to the current one. */ readonly receivingStopped: Subject<{ receiver: DropListRef; initiator: DropListRef; }>; /** Arbitrary data that can be attached to the drop list. */ data: T; /** Whether an item in the list is being dragged. */ private _isDragging; /** Keeps track of the positions of any parent scrollable elements. */ private _parentPositions; /** Strategy being used to sort items within the list. */ private _sortStrategy; /** Cached `ClientRect` of the drop list. */ private _clientRect; /** Draggable items in the container. */ private _draggables; /** Drop lists that are connected to the current one. */ private _siblings; /** Connected siblings that currently have a dragged item. */ private _activeSiblings; /** Subscription to the window being scrolled. */ private _viewportScrollSubscription; /** Vertical direction in which the list is currently scrolling. */ private _verticalScrollDirection; /** Horizontal direction in which the list is currently scrolling. */ private _horizontalScrollDirection; /** Node that is being auto-scrolled. */ private _scrollNode; /** Used to signal to the current auto-scroll sequence when to stop. */ private readonly _stopScrollTimers; /** Shadow root of the current element. Necessary for `elementFromPoint` to resolve correctly. */ private _cachedShadowRoot; /** Reference to the document. */ private _document; /** Elements that can be scrolled while the user is dragging. */ private _scrollableElements; /** Initial value for the element's `scroll-snap-type` style. */ private _initialScrollSnap; constructor(element: ElementRef | HTMLElement, _dragDropRegistry: DragDropRegistry, _document: any, _ngZone: NgZone, _viewportRuler: ViewportRuler); /** Removes the drop list functionality from the DOM element. */ dispose(): void; /** Whether an item from this list is currently being dragged. */ isDragging(): boolean; /** Starts dragging an item. */ start(): void; /** * Attempts to move an item into the container. * @param item Item that was moved into the container. * @param pointerX Position of the item along the X axis. * @param pointerY Position of the item along the Y axis. * @param index Index at which the item entered. If omitted, the container will try to figure it * out automatically. */ enter(item: DragRef, pointerX: number, pointerY: number, index?: number): void; /** * Removes an item from the container after it was dragged into another container by the user. * @param item Item that was dragged out. */ exit(item: DragRef): void; /** * Drops an item into this container. * @param item Item being dropped into the container. * @param currentIndex Index at which the item should be inserted. * @param previousIndex Index of the item when dragging started. * @param previousContainer Container from which the item got dragged in. * @param isPointerOverContainer Whether the user's pointer was over the * container when the item was dropped. * @param distance Distance the user has dragged since the start of the dragging sequence. * @param event Event that triggered the dropping sequence. * * @breaking-change 15.0.0 `previousIndex` and `event` parameters to become required. */ drop(item: DragRef, currentIndex: number, previousIndex: number, previousContainer: DropListRef, isPointerOverContainer: boolean, distance: Point, dropPoint: Point, event?: MouseEvent | TouchEvent): void; /** * Sets the draggable items that are a part of this list. * @param items Items that are a part of this list. */ withItems(items: DragRef[]): this; /** Sets the layout direction of the drop list. */ withDirection(direction: Direction): this; /** * Sets the containers that are connected to this one. When two or more containers are * connected, the user will be allowed to transfer items between them. * @param connectedTo Other containers that the current containers should be connected to. */ connectedTo(connectedTo: DropListRef[]): this; /** * Sets the orientation of the container. * @param orientation New orientation for the container. */ withOrientation(orientation: 'vertical' | 'horizontal'): this; /** * Sets which parent elements are can be scrolled while the user is dragging. * @param elements Elements that can be scrolled. */ withScrollableParents(elements: HTMLElement[]): this; /** Gets the scrollable parents that are registered with this drop container. */ getScrollableParents(): readonly HTMLElement[]; /** * Figures out the index of an item in the container. * @param item Item whose index should be determined. */ getItemIndex(item: DragRef): number; /** * Whether the list is able to receive the item that * is currently being dragged inside a connected drop list. */ isReceiving(): boolean; /** * Sorts an item inside the container based on its position. * @param item Item to be sorted. * @param pointerX Position of the item along the X axis. * @param pointerY Position of the item along the Y axis. * @param pointerDelta Direction in which the pointer is moving along each axis. */ _sortItem(item: DragRef, pointerX: number, pointerY: number, pointerDelta: { x: number; y: number; }): void; /** * Checks whether the user's pointer is close to the edges of either the * viewport or the drop list and starts the auto-scroll sequence. * @param pointerX User's pointer position along the x axis. * @param pointerY User's pointer position along the y axis. */ _startScrollingIfNecessary(pointerX: number, pointerY: number): void; /** Stops any currently-running auto-scroll sequences. */ _stopScrolling(): void; /** Starts the dragging sequence within the list. */ private _draggingStarted; /** Caches the positions of the configured scrollable parents. */ private _cacheParentPositions; /** Resets the container to its initial state. */ private _reset; /** Starts the interval that'll auto-scroll the element. */ private _startScrollInterval; /** * Checks whether the user's pointer is positioned over the container. * @param x Pointer position along the X axis. * @param y Pointer position along the Y axis. */ _isOverContainer(x: number, y: number): boolean; /** * Figures out whether an item should be moved into a sibling * drop container, based on its current position. * @param item Drag item that is being moved. * @param x Position of the item along the X axis. * @param y Position of the item along the Y axis. */ _getSiblingContainerFromPosition(item: DragRef, x: number, y: number): DropListRef | undefined; /** * Checks whether the drop list can receive the passed-in item. * @param item Item that is being dragged into the list. * @param x Position of the item along the X axis. * @param y Position of the item along the Y axis. */ _canReceive(item: DragRef, x: number, y: number): boolean; /** * Called by one of the connected drop lists when a dragging sequence has started. * @param sibling Sibling in which dragging has started. */ _startReceiving(sibling: DropListRef, items: DragRef[]): void; /** * Called by a connected drop list when dragging has stopped. * @param sibling Sibling whose dragging has stopped. */ _stopReceiving(sibling: DropListRef): void; /** * Starts listening to scroll events on the viewport. * Used for updating the internal state of the list. */ private _listenToScrollEvents; /** * Lazily resolves and returns the shadow root of the element. We do this in a function, rather * than saving it in property directly on init, because we want to resolve it as late as possible * in order to ensure that the element has been moved into the shadow DOM. Doing it inside the * constructor might be too early if the element is inside of something like `ngFor` or `ngIf`. */ private _getShadowRoot; /** Notifies any siblings that may potentially receive the item. */ private _notifyReceivingSiblings; } declare namespace i1 { export { CdkDropList } } declare namespace i2 { export { CDK_DROP_LIST_GROUP, CdkDropListGroup } } declare namespace i3 { export { CDK_DROP_LIST, CdkDrag } } declare namespace i4 { export { CDK_DRAG_HANDLE, CdkDragHandle } } declare namespace i5 { export { CDK_DRAG_PREVIEW, CdkDragPreview } } declare namespace i6 { export { CDK_DRAG_PLACEHOLDER, CdkDragPlaceholder } } /** * Moves an item one index in an array to another. * @param array Array in which to move the item. * @param fromIndex Starting index of the item. * @param toIndex Index to which the item should be moved. */ export declare function moveItemInArray(array: T[], fromIndex: number, toIndex: number): void; /** Point on the page or within an element. */ export declare interface Point { x: number; y: number; } /** * Possible places into which the preview of a drag item can be inserted. * - `global` - Preview will be inserted at the bottom of the ``. The advantage is that * you don't have to worry about `overflow: hidden` or `z-index`, but the item won't retain * its inherited styles. * - `parent` - Preview will be inserted into the parent of the drag item. The advantage is that * inherited styles will be preserved, but it may be clipped by `overflow: hidden` or not be * visible due to `z-index`. Furthermore, the preview is going to have an effect over selectors * like `:nth-child` and some flexbox configurations. * - `ElementRef | HTMLElement` - Preview will be inserted into a specific element. * Same advantages and disadvantages as `parent`. */ export declare type PreviewContainer = 'global' | 'parent' | ElementRef | HTMLElement; /** * Moves an item from one array to another. * @param currentArray Array from which to transfer the item. * @param targetArray Array into which to put the item. * @param currentIndex Index of the item in its current array. * @param targetIndex Index at which to insert the item. */ export declare function transferArrayItem(currentArray: T[], targetArray: T[], currentIndex: number, targetIndex: number): void; export { }