@ks89/ngx-drag-n-drop/fesm2022/ks89-ngx-drag-n-drop.mjs

Drag and drop library for Angular

import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Directive, Input, Output, HostListener, NgModule } from '@angular/core';
import { Subject } from 'rxjs';
import { CommonModule } from '@angular/common';

class DragDropDirectiveService {
    constructor() {
        this.dropItem = new Subject();
    }
    setDropItem(item) {
        this.dropItem.next(item);
    }
    getDropItem() {
        return this.dropItem.asObservable();
    }
    setDragItem(item) {
        this.draggedItem = item;
    }
    getDragItem() {
        return this.draggedItem;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DragDropDirectiveService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DragDropDirectiveService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DragDropDirectiveService, decorators: [{
            type: Injectable
        }] });

class DragDirective {
    constructor(renderer, el, dragDropDirectiveService) {
        this.renderer = renderer;
        this.el = el;
        this.dragDropDirectiveService = dragDropDirectiveService;
        this.releaseDrop = new EventEmitter();
        this.startDrag = new EventEmitter();
        this.highlighted = false;
        this.renderer.setAttribute(this.el.nativeElement, 'draggable', 'true');
    }
    onMouseEnter() {
        this.highlight();
    }
    onMouseOut() {
        this.highlight();
    }
    onDragStart(event) {
        // html draggable will not transfer an object, so we stringify it
        const transferObject = { object: this.draggedItem, id: 'dragDirectiveID-' + new Date().getTime() };
        const transferObjectString = JSON.stringify(transferObject);
        event.dataTransfer.setData('text', transferObjectString);
        this.dragDropDirectiveService.setDragItem(this.draggedItem);
        this.dropSubscription = this.dragDropDirectiveService.getDropItem().subscribe(item => {
            this.emitDraggedItem(this.draggedItem);
        });
        this.startDrag.emit(this.draggedItem);
    }
    onDragEnd() {
        if (typeof this.dropSubscription !== 'undefined') {
            this.dropSubscription.unsubscribe();
        }
    }
    ngOnDestroy() {
        if (typeof this.dropSubscription !== 'undefined') {
            this.dropSubscription.unsubscribe();
        }
    }
    emitDraggedItem(item) {
        this.releaseDrop.emit(item);
        if (this.dropSubscription) {
            this.dropSubscription.unsubscribe();
        }
    }
    highlight() {
        if (this.dragHighlight) {
            if (!this.highlighted) {
                this.renderer.addClass(this.el.nativeElement, this.dragHighlight);
            }
            else {
                this.renderer.removeClass(this.el.nativeElement, this.dragHighlight);
            }
        }
        this.highlighted = !this.highlighted;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DragDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DragDropDirectiveService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: DragDirective, selector: "[ksDragDirective]", inputs: { draggedItem: "draggedItem", dragHighlight: "dragHighlight" }, outputs: { releaseDrop: "releaseDrop", startDrag: "startDrag" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseOut()", "dragstart": "onDragStart($event)", "dragend": "onDragEnd()" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DragDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ksDragDirective]'
                }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DragDropDirectiveService }], propDecorators: { draggedItem: [{
                type: Input
            }], dragHighlight: [{
                type: Input
            }], releaseDrop: [{
                type: Output
            }], startDrag: [{
                type: Output
            }], onMouseEnter: [{
                type: HostListener,
                args: ['mouseenter']
            }], onMouseOut: [{
                type: HostListener,
                args: ['mouseleave']
            }], onDragStart: [{
                type: HostListener,
                args: ['dragstart', ['$event']]
            }], onDragEnd: [{
                type: HostListener,
                args: ['dragend']
            }] } });

class DropDirective {
    constructor(renderer, el, dragDropDirectiveService) {
        this.renderer = renderer;
        this.el = el;
        this.dragDropDirectiveService = dragDropDirectiveService;
        this.dropEvent = new EventEmitter();
        this.dragenterEvent = new EventEmitter();
        this.dragleaveEvent = new EventEmitter();
        this.dropEventMouse = new EventEmitter();
        this.highlighted = false;
    }
    onDragEnter() {
        this.dragItem = this.dragDropDirectiveService.getDragItem();
        this.dragenterEvent.emit(this.dragItem);
        // this.highlighted = true;
        this.highlight();
    }
    onDragLeave() {
        this.dragItem = this.dragDropDirectiveService.getDragItem();
        this.dragleaveEvent.emit(this.dragItem);
        // this.highlighted = false;
        this.highlight();
    }
    onDragOver(event) {
        event.preventDefault();
    }
    onDrop(event) {
        // check to see if we are getting what was sent. text/plain
        const eventData = event.dataTransfer.getData('text');
        if (eventData && event.dataTransfer.files.length === 0) {
            event.preventDefault();
            // since html draggable will not transfer an object, we need to parse are string
            const transferredObjectString = JSON.parse(eventData);
            const transferredObjectID = transferredObjectString.id;
            const transferredObject = transferredObjectString.object;
            this.dropEvent.emit(transferredObject);
            this.dragDropDirectiveService.setDropItem(transferredObjectID);
        }
        this.dropEventMouse.emit(event);
        this.highlight();
    }
    highlight() {
        if (this.dropHighlight) {
            if (!this.highlighted) {
                this.renderer.addClass(this.el.nativeElement, this.dropHighlight);
            }
            else {
                this.renderer.removeClass(this.el.nativeElement, this.dropHighlight);
            }
        }
        this.highlighted = !this.highlighted;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DropDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DragDropDirectiveService }], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: DropDirective, selector: "[ksDropDirective]", inputs: { dropHighlight: "dropHighlight" }, outputs: { dropEvent: "dropEvent", dragenterEvent: "dragenterEvent", dragleaveEvent: "dragleaveEvent", dropEventMouse: "dropEventMouse" }, host: { listeners: { "dragenter": "onDragEnter()", "dragleave": "onDragLeave()", "dragover": "onDragOver($event)", "drop": "onDrop($event)" } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DropDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ksDropDirective]'
                }]
        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: DragDropDirectiveService }], propDecorators: { dropHighlight: [{
                type: Input
            }], dropEvent: [{
                type: Output
            }], dragenterEvent: [{
                type: Output
            }], dragleaveEvent: [{
                type: Output
            }], dropEventMouse: [{
                type: Output
            }], onDragEnter: [{
                type: HostListener,
                args: ['dragenter']
            }], onDragLeave: [{
                type: HostListener,
                args: ['dragleave']
            }], onDragOver: [{
                type: HostListener,
                args: ['dragover', ['$event']]
            }], onDrop: [{
                type: HostListener,
                args: ['drop', ['$event']]
            }] } });

class DragDropDirectiveModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DragDropDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: DragDropDirectiveModule, declarations: [DragDirective,
            DropDirective], imports: [CommonModule], exports: [DragDirective,
            DropDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DragDropDirectiveModule, providers: [
            DragDropDirectiveService
        ], imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: DragDropDirectiveModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule
                    ],
                    declarations: [
                        DragDirective,
                        DropDirective
                    ],
                    providers: [
                        DragDropDirectiveService
                    ],
                    exports: [
                        DragDirective,
                        DropDirective
                    ]
                }]
        }] });

/*
 * Public API Surface of ngx-drag-n-drop
 */

/**
 * Generated bundle index. Do not edit.
 */

export { DragDirective, DragDropDirectiveModule, DragDropDirectiveService, DropDirective };
//# sourceMappingURL=ks89-ngx-drag-n-drop.mjs.map