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
TypeScript
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>;
}