UNPKG

angular-mixed-cdk-drag-drop

Version:

angular-mixed-cdk-drag-drop is an Angular `Directive` to support mixed orientation drag drop using angular cdk.

65 lines (64 loc) 3.91 kB
import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core'; import { CdkDropList, CdkDragEnter, CdkDragSortEvent, DropListOrientation, CdkDropListGroup, CdkDrag } from '@angular/cdk/drag-drop'; import { MixedDragDropConfig } from './mixed-drag-drop'; import * as i0 from "@angular/core"; export interface MixedCdkDragContainerSize { drag: CdkDrag; containerSize: DOMRectReadOnly; } export declare class MixedCdkDragDropDirective<T = any> implements OnChanges, AfterViewInit, OnDestroy { element: ElementRef<HTMLElement>; private cdkDropListGroup; /** @param {EventEmitter} dropped: emit previousIndex and currentIndex when dropList dropped. Valid when itemList is not being provided. **/ readonly dropped: EventEmitter<{ previousIndex: number; currentIndex: number; }>; itemList: T[] | undefined; orientation: DropListOrientation; containerSelector: string; private readonly _resizeDragItem; private targetIndex; private sourceIndex; private source; private observer; private currentContentRect; private animationFrame; constructor(element: ElementRef<HTMLElement>, cdkDropListGroup: CdkDropListGroup<CdkDropList<T>>); ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; addResizeDragItem(item: MixedCdkDragSizeHelperDirective): void; deleteResizeDragItem(item: MixedCdkDragSizeHelperDirective): void; onDropListDropped(): void; onDropListEntered({ item, container, currentIndex }: CdkDragEnter | CdkDragSortEvent): void; private observeAll; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<MixedCdkDragDropDirective<any>, [null, { self: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<MixedCdkDragDropDirective<any>, "[cdkDropListGroup][mixedCdkDragDrop]", never, { "itemList": { "alias": "itemList"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "containerSelector": { "alias": "containerSelector"; "required": false; }; }, { "dropped": "dropped"; }, never, never, true, never>; } export declare class MixedCdkDropListDirective implements OnInit, OnDestroy { private cdkDropList; private mixedDragDrop; private config; private lifecycleEmitter; constructor(cdkDropList: CdkDropList, mixedDragDrop: MixedCdkDragDropDirective, config: MixedDragDropConfig); ngOnInit(): void; ngOnDestroy(): void; static ɵfac: i0.ɵɵFactoryDeclaration<MixedCdkDropListDirective, [{ self: true; }, { skipSelf: true; }, null]>; static ɵdir: i0.ɵɵDirectiveDeclaration<MixedCdkDropListDirective, "[cdkDropList][mixedCdkDropList]", never, {}, {}, never, never, true, never>; } export declare class MixedCdkDragSizeHelperDirective implements AfterViewInit, OnDestroy { private cdkDrag; private mixedContainer; contentBoxSize: EventEmitter<MixedCdkDragContainerSize>; constructor(cdkDrag: CdkDrag, mixedContainer: MixedCdkDragDropDirective); ngAfterViewInit(): void; ngOnDestroy(): void; onSizeChangeEmit(rect: DOMRectReadOnly): void; /** @param event :{MixedCdkDragContainerSize} contentSize observer event. * @param percentWidth :{number} set width to the percentage based on the dropListGroup Container width, valid from 0 to 100. * @param percentHeight :{number} set width to the percentage based on the dropListGroup Container width, valid from 0 to 100. **/ static defaultEmitter(event: MixedCdkDragContainerSize, percentWidth: number, percentHeight: number): void; static ɵfac: i0.ɵɵFactoryDeclaration<MixedCdkDragSizeHelperDirective, [{ self: true; }, { skipSelf: true; }]>; static ɵdir: i0.ɵɵDirectiveDeclaration<MixedCdkDragSizeHelperDirective, "[cdkDrag][mixedCdkDragSizeHelper]", never, {}, { "contentBoxSize": "contentBoxSize"; }, never, never, true, never>; }