tushar-ng-drag-drop/bundles/tushar-ng-drag-drop.umd.js

Simple drag and drop for angular

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('ngx-drag-drop'), require('@angular/platform-browser')) :
    typeof define === 'function' && define.amd ? define('tushar-ng-drag-drop', ['exports', '@angular/core', 'ngx-drag-drop', '@angular/platform-browser'], factory) :
    (global = global || self, factory(global['tushar-ng-drag-drop'] = {}, global.ng.core, global.ngxDragDrop, global.ng.platformBrowser));
}(this, (function (exports, core, ngxDragDrop, platformBrowser) { 'use strict';

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

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var DragDropComponent = /** @class */ (function () {
        function DragDropComponent() {
            this.documentList = [];
            this.documentTypeList = [];
            this.onDraggable = new core.EventEmitter();
            this.onLeftDraggableDrop = new core.EventEmitter();
            this.onRightDraggableDrop = new core.EventEmitter();
        }
        /**
         * @return {?}
         */
        DragDropComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            // 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 {?}
         */
        DragDropComponent.prototype.onDraggableStart = /**
         * @param {?} item
         * @return {?}
         */
        function (item) {
            this.currentDraggableEvent = item;
            this.onDraggable.emit(item);
        };
        /**
         * @param {?} item
         * @return {?}
         */
        DragDropComponent.prototype.onLeftDraggableCopied = /**
         * @param {?} item
         * @return {?}
         */
        function (item) {
            /** @type {?} */
            var index = this.documentList.indexOf(item);
            this.documentList.splice(index, 1);
        };
        /**
         * @param {?} item
         * @return {?}
         */
        DragDropComponent.prototype.onRightDraggableCopied = /**
         * @param {?} item
         * @return {?}
         */
        function (item) {
            /** @type {?} */
            var index = this.documentTypeList.indexOf(item);
            this.documentTypeList[index].content = "";
            //this.documentAssociationObj[this.employee] = JSON.parse(JSON.stringify(this.documentTypeList));
        };
        /**
         * @param {?} event
         * @return {?}
         */
        DragDropComponent.prototype.onLeftDrop = /**
         * @param {?} event
         * @return {?}
         */
        function (event) {
            /** @type {?} */
            var index = JSON.parse(JSON.stringify(event)).index;
            if (typeof index === "undefined") {
                index = this.documentList.length;
            }
            /** @type {?} */
            var 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 {?}
         */
        DragDropComponent.prototype.onRightDrop = /**
         * @param {?} event
         * @param {?} item
         * @return {?}
         */
        function (event, item) {
            /** @type {?} */
            var tempObj = JSON.parse(JSON.stringify(this.currentDraggableEvent));
            /** @type {?} */
            var 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: core.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 = function () { return []; };
        DragDropComponent.propDecorators = {
            documentList: [{ type: core.Input }],
            documentTypeList: [{ type: core.Input }],
            onDraggable: [{ type: core.Output }],
            onLeftDraggableDrop: [{ type: core.Output }],
            onRightDraggableDrop: [{ type: core.Output }]
        };
        return DragDropComponent;
    }());
    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
     */
    var DragDropModule = /** @class */ (function () {
        function DragDropModule() {
        }
        DragDropModule.decorators = [
            { type: core.NgModule, args: [{
                        declarations: [DragDropComponent],
                        imports: [
                            ngxDragDrop.DndModule,
                            platformBrowser.BrowserModule
                        ],
                        exports: [DragDropComponent]
                    },] }
        ];
        return DragDropModule;
    }());

    exports.DragDropComponent = DragDropComponent;
    exports.DragDropModule = DragDropModule;
    exports.DragDropService = DragDropService;

    Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=tushar-ng-drag-drop.umd.js.map