tushar-ng-drag-drop/fesm2015/tushar-ng-drag-drop.js

Simple drag and drop for angular

import { Injectable, ɵɵdefineInjectable, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import { DndModule } from 'ngx-drag-drop';
import { BrowserModule } from '@angular/platform-browser';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DragDropService {
    constructor() { }
}
DragDropService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
/** @nocollapse */
DragDropService.ctorParameters = () => [];
/** @nocollapse */ DragDropService.ngInjectableDef = ɵɵdefineInjectable({ factory: function DragDropService_Factory() { return new DragDropService(); }, token: DragDropService, providedIn: "root" });

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DragDropComponent {
    constructor() {
        this.documentList = [];
        this.documentTypeList = [];
        this.onDraggable = new EventEmitter();
        this.onLeftDraggableDrop = new EventEmitter();
        this.onRightDraggableDrop = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        // for(let i=1; i<=5; i++){
        //     this.documentList.push({ "id": i, "content": 'file_name_'+i+'.pdf', effectAllowed: "copyMove", disable: false, handle: false, show: true });
        //     this.documentTypeListBK.push({ "id": "doctype_" + i, "content": "", "type": "Label "+i,  max: 1, effectAllowed: "move", disable: false, handle: false, empty: true });
        //     this.documentTypeList.push({ "id": "doctype_" + i, "content": "", "type": "Label "+i,  max: 1, effectAllowed: "move", disable: false, handle: false, empty: true });
        // }
    }
    /**
     * @param {?} item
     * @return {?}
     */
    onDraggableStart(item) {
        this.currentDraggableEvent = item;
        this.onDraggable.emit(item);
    }
    /**
     * @param {?} item
     * @return {?}
     */
    onLeftDraggableCopied(item) {
        /** @type {?} */
        const index = this.documentList.indexOf(item);
        this.documentList.splice(index, 1);
    }
    /**
     * @param {?} item
     * @return {?}
     */
    onRightDraggableCopied(item) {
        /** @type {?} */
        const index = this.documentTypeList.indexOf(item);
        this.documentTypeList[index].content = "";
        //this.documentAssociationObj[this.employee] = JSON.parse(JSON.stringify(this.documentTypeList));
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onLeftDrop(event) {
        /** @type {?} */
        let index = JSON.parse(JSON.stringify(event)).index;
        if (typeof index === "undefined") {
            index = this.documentList.length;
        }
        /** @type {?} */
        let tempObj = JSON.parse(JSON.stringify(this.currentDraggableEvent));
        tempObj["content"] = tempObj.content;
        tempObj["effectAllowed"] = "move";
        tempObj["disable"] = false;
        tempObj["handle"] = true;
        tempObj["show"] = true;
        this.documentList.splice(index, 0, tempObj);
        this.onLeftDraggableDrop.emit(this.documentList);
    }
    /**
     * @param {?} event
     * @param {?} item
     * @return {?}
     */
    onRightDrop(event, item) {
        /** @type {?} */
        let tempObj = JSON.parse(JSON.stringify(this.currentDraggableEvent));
        /** @type {?} */
        let index = this.documentTypeList.indexOf(item);
        this.documentTypeList[index].content = tempObj.content;
        this.onRightDraggableDrop.emit(this.documentTypeList);
        //this.documentAssociationObj[this.employee] = JSON.parse(JSON.stringify(this.documentTypeList));
    }
}
DragDropComponent.decorators = [
    { type: Component, args: [{
                selector: 'tushar-ng-drag-drop',
                template: "\r\n\r\n\r\n<div class=\"row\">\r\n    <div class=\"col col-sm-5 ol-xs-12 documentList \">\r\n        <ol class=\"list-group scrolling \"\r\n            dndDropzone dndEffectAllowed=\"copyMove\"\r\n            (dndDrop)=\"onLeftDrop($event)\">\r\n            <span *ngFor=\"let draggable of documentList\">\r\n                <li [dndEffectAllowed]=\"draggable.effectAllowed\"\r\n                    [dndDraggable]=\"draggable.data\"\r\n                    (dndStart)=\"onDraggableStart(draggable)\"\r\n                    (dndMoved)=\"onLeftDraggableCopied(draggable)\"\r\n                    class=\"list-group-item\" *ngIf=\"draggable.show\">\r\n                    <div  >{{draggable.content}}</div>\r\n                </li>\r\n            </span>\r\n            <li class=\"dd-placeholder\" style=\"height: 36px;\"\r\n                dndPlaceholderRef>\r\n            </li>\r\n        </ol>\r\n    </div>\r\n    \r\n    <div class=\"col-sm-1 scrolling-without-border text-allign-middle hidden-xs\" >\r\n        <i class='fa fa-arrows-h' style='font-size:48px;color:gray; vertical-align: middle;'></i>\r\n    </div>\r\n    <div class=\"col-sm-1r text-allign-middle visible-xs\" >\r\n        <i class='fa fa-arrows-v' style='font-size:48px;color:gray; vertical-align: middle;'></i>\r\n    </div>\r\n\r\n    <div class=\"col-sm-6\">\r\n        <section class=\" col col-sm-12  scrolling documentTypeList\">\r\n            <div class=\"form-horizontal\" *ngFor=\"let draggable of documentTypeList\">\r\n                <div class=\"form-group\" *ngIf=\"draggable.show\" >\r\n                    <label *ngIf=\"draggable.type != undefined\" class=\"control-label col-sm-3\" style=\"text-align: left; margin-top: 10px;;\">\r\n                            {{draggable.type}} : \r\n                    </label>\r\n                    <div class=\"col col-sm-{{draggable.type == undefined?12:9}} \">\r\n                        <ol class=\"\"\r\n                            dndDropzone class=\"dd-empty dndDragover\"\r\n                            dndEffectAllowed=\"copyMove\"\r\n                            [dndDisableIf]=\"draggable.content != ''\"\r\n                            (dndDrop)=\"onRightDrop($event,draggable)\">\r\n                            <li [dndEffectAllowed]=\"draggable.effectAllowed\"\r\n                                [dndDraggable]=\"draggable.data\"\r\n                                (dndStart)=\"onDraggableStart(draggable)\"\r\n                                (dndMoved)=\"onRightDraggableCopied(draggable)\"\r\n                                class=\"dd-item {{draggable.class}}\" *ngIf=\"draggable.content != ''\">\r\n                                <div class=\"dd-handle\">{{draggable.content}}</div>\r\n                            </li>\r\n                            <li class=\"dd-placeholder\"\r\n                                dndPlaceholderRef></li>\r\n                        </ol>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </section>\r\n    </div>\r\n</div>\r\n\r\n\r\n",
                styles: [".dd-handle{display:block;font-size:15px;padding:9px 15px;color:#333;text-decoration:none;border:1px solid #cfcfcf;background:#fbfbfb;border-radius:4px}.dd-empty,.dd-placeholder{margin:5px 0;padding:0;min-height:30px;background:#f2fbff;border:1px dashed #b6bcbf;box-sizing:border-box;-moz-box-sizing:border-box}.dd-empty{min-height:41px!important;background-image:none!important;background-color:#fff!important;border:1px solid #d1d1d1!important;border-radius:4px}.scrolling{height:300px!important;overflow-y:scroll;border:1px solid #d1d1d1!important;margin-top:5px}.scrolling-without-border{height:300px!important;overflow-y:scroll;margin-top:5px}ol li{list-style-type:none}.documentList li{margin:5px}.dd-placeholder{margin:0;padding:0;border-radius:4px;min-height:40px;background:#f2fbff;border:1px dashed #b6bcbf;box-sizing:border-box;-moz-box-sizing:border-box}.documentTypeList .form-group{margin-bottom:0}::-webkit-scrollbar{width:5px}.text-allign-middle{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;text-align:center}"]
            }] }
];
/** @nocollapse */
DragDropComponent.ctorParameters = () => [];
DragDropComponent.propDecorators = {
    documentList: [{ type: Input }],
    documentTypeList: [{ type: Input }],
    onDraggable: [{ type: Output }],
    onLeftDraggableDrop: [{ type: Output }],
    onRightDraggableDrop: [{ type: Output }]
};
if (false) {
    /** @type {?} */
    DragDropComponent.prototype.documentList;
    /** @type {?} */
    DragDropComponent.prototype.documentTypeList;
    /** @type {?} */
    DragDropComponent.prototype.currentDraggableEvent;
    /** @type {?} */
    DragDropComponent.prototype.onDraggable;
    /** @type {?} */
    DragDropComponent.prototype.onLeftDraggableDrop;
    /** @type {?} */
    DragDropComponent.prototype.onRightDraggableDrop;
}

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class DragDropModule {
}
DragDropModule.decorators = [
    { type: NgModule, args: [{
                declarations: [DragDropComponent],
                imports: [
                    DndModule,
                    BrowserModule
                ],
                exports: [DragDropComponent]
            },] }
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { DragDropComponent, DragDropModule, DragDropService };
//# sourceMappingURL=tushar-ng-drag-drop.js.map