tushar-ng-drag-drop/tushar-ng-drag-drop.metadata.json

Simple drag and drop for angular

{"__symbolic":"module","version":4,"metadata":{"DragDropService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"DragDropComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"documentList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":5}}]}],"documentTypeList":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":5}}]}],"onDraggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":5}}]}],"onLeftDraggableDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":15,"character":5}}]}],"onRightDraggableDrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"onDraggableStart":[{"__symbolic":"method"}],"onLeftDraggableCopied":[{"__symbolic":"method"}],"onRightDraggableCopied":[{"__symbolic":"method"}],"onLeftDrop":[{"__symbolic":"method"}],"onRightDrop":[{"__symbolic":"method"}]}},"DragDropModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DragDropComponent"}],"imports":[{"__symbolic":"reference","module":"ngx-drag-drop","name":"DndModule","line":8,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":9,"character":4}],"exports":[{"__symbolic":"reference","name":"DragDropComponent"}]}]}],"members":{}}},"origins":{"DragDropService":"./lib/drag-drop.service","DragDropComponent":"./lib/drag-drop.component","DragDropModule":"./lib/drag-drop.module"},"importAs":"tushar-ng-drag-drop"}