@nova-ui/bits/common/directives/dragdrop/droppable.directive.d.ts

SolarWinds Nova Framework

import { ElementRef, EventEmitter, OnDestroy, OnInit } from "@angular/core";
import { DragAndDropService } from "./drag-and-drop.service";
import { IDragEvent, IDropEvent, IDropValidator } from "./public-api";
import * as i0 from "@angular/core";
/**
 * Directive that provides behavior of droppable zone for an element
 *
 *  __Usage:__
 *
 * Bind this directive to an element that will be a zone for dropping elements there.
 *
 *        `<div nuiDroppable>Some content</div>`
 *
 * Make sure that this zone has some content, because droppable directive doesn't set any height
 * to the element. This won't work:
 *
 *        `<div nuiDroppable></div>`
 *
 * To subscribe to an event `dragOver, dragEnter, dragLeave, dropSuccess` just transmit an attribute
 *
 *         `<div nuiDroppable (dropSuccess)="onDropObject($event)"></div>`
 *
 * And `onDropObject` method will look like that:
 *
 *         `public onDropObject(dropEvent: INuiDropEvent) {
 *
 *              const extractedData = dropEvent.payload; //some data that you passed to draggable directive
 *
 *              const actualEvent = dropEvent.event; // an HTML 5 event (native)
 *
 *          };`
 * If you want to validate if data can be dropped you can set validator.
 * By default if you don't specify it all drags will be accepted.
 *
 *          `<div nuiDroppable [validator]="validator"></div>`
 *
 * Validator is an object that should implement IDropValidator interface.
 *
 *          `interface IDropValidator {
 *              isValidDropTarget(payload: any, isExternal?: boolean): boolean;
 *          };`
 * Payload is an dragged payload, and isExternal will be set to true if source of drag is NOT nui-draggable (it can be some other document, excel file etc.)
 *
 * You can also specify css classes that will be set:
 *
 * `dragOverClass` - will set this class when drag is over and validator returns true or there is no validator
 *
 * `invalidDragOverClass` - will set this class when drag is over and validator returns false
 *
 * `dropIndicatorClass` - will set this class when you start dragging something that can be dropped on this nui-droppable
 */
/**
 * <example-url>./../examples/index.html#/dragdrop</example-url>
 */
/** @ignore */
export declare class DroppableDirective implements OnInit, OnDestroy {
    private elRef;
    private dragAndDropService;
    dragOverClass: string;
    invalidDragOverClass: string;
    dropIndicatorClass: string;
    dropValidator: IDropValidator;
    dragOver: EventEmitter<DragEvent>;
    dragEnter: EventEmitter<DragEvent>;
    dragLeave: EventEmitter<DragEvent>;
    dropSuccess: EventEmitter<IDropEvent>;
    private dragElements;
    private onDragStateChangedSubscription;
    private dragThrottle;
    onDragEnter(event: IDragEvent): void;
    onDragOver(event: IDragEvent): void;
    onDragLeave(event: IDragEvent): void;
    onDrop(event: IDragEvent): boolean;
    constructor(elRef: ElementRef, dragAndDropService: DragAndDropService);
    ngOnInit(): void;
    private validateDrop;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DroppableDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<DroppableDirective, "[nuiDroppable]", never, { "dragOverClass": { "alias": "dragOverClass"; "required": false; }; "invalidDragOverClass": { "alias": "invalidDragOverClass"; "required": false; }; "dropIndicatorClass": { "alias": "dropIndicatorClass"; "required": false; }; "dropValidator": { "alias": "dropValidator"; "required": false; }; }, { "dragOver": "dragOver"; "dragEnter": "dragEnter"; "dragLeave": "dragLeave"; "dropSuccess": "dropSuccess"; }, never, never, false, never>;
}