ngx-tree-dnd
Version:
Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.
1 lines • 17.7 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgxTreeService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":9,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"getLocalData":[{"__symbolic":"method"}],"elementFinder":[{"__symbolic":"method"}],"addNewItem":[{"__symbolic":"method"}],"deleteItem":[{"__symbolic":"method"}],"startRenameItem":[{"__symbolic":"method"}],"finishRenameItem":[{"__symbolic":"method"}],"startDragging":[{"__symbolic":"method"}],"onDragProcess":[{"__symbolic":"method"}],"dragEndAction":[{"__symbolic":"method"}],"enterDropZone":[{"__symbolic":"method"}],"onDragOver":[{"__symbolic":"method"}],"leaveDropZone":[{"__symbolic":"method"}],"onDropItem":[{"__symbolic":"method"}],"changeItemPosition":[{"__symbolic":"method"}],"getItemPosition":[{"__symbolic":"method"}],"sortTree":[{"__symbolic":"method"}],"sortElements":[{"__symbolic":"method"}],"compate":[{"__symbolic":"method"}],"clearAction":[{"__symbolic":"method"}],"removeDestenationBorders":[{"__symbolic":"method"}],"switchDropButton":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"NgxTreeParentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"lib-ngx-tree-component","template":"<div id='threeWrapper' *ngIf=\"treeView\" [style.font-size.px]='userConfig.setFontSize'>\n <div class='root-title d-inline-flex pos-relative' *ngIf=\"!userConfig.options.edit;else onEdit\">\n <div class='root-text'>\n {{userConfig.rootTitle}}\n </div>\n \n <div class='d-flex buttons-bar' *ngIf=\"userConfig.showActionButtons && userConfig.showRootActionButtons\">\n <div class='d-flex'>\n <button class=\"tree-btn add-btn\" *ngIf=\"userConfig.showAddButtons\" (click)=\"submitAdd(null)\">\n <fa-icon icon=\"plus\" [style.font-size.px]='userConfig.setIconSize'></fa-icon>\n </button>\n </div>\n <div class='d-flex'>\n <button class=\"tree-btn edit-btn\" *ngIf=\"userConfig.showRenameButtons\" (click)=\"enableRootRenameMode()\">\n <fa-icon icon=\"edit\" [style.font-size.px]='userConfig.setIconSize'></fa-icon>\n </button>\n </div>\n </div>\n </div>\n <ng-template #onEdit>\n <div class='d-inline-flex'>\n <form [formGroup]=\"renameForm\" class='d-flex' (submit)='submitRootRename()'>\n <input type=\"text\" class='input-rename' formControlName=\"name\" libAutoFocus=\"true\" [style.font-size.px]='userConfig.setFontSize'>\n </form>\n <div class='d-flex'>\n <button class='tree-btn submit-btn' (click)='submitRootRename()'>\n <fa-icon icon=\"check\" [style.font-size.px]='userConfig.setIconSize'></fa-icon>\n </button>\n <div class='error-edit-wrap' *ngIf=\"showError\">\n {{userConfig.validationText}}\n </div>\n </div>\n </div>\n </ng-template>\n <div class='tree-child'>\n <div class=\"tree-content-main\">\n <lib-ngx-tree-children [setItem]=\"clild\" *ngFor='let clild of treeView'></lib-ngx-tree-children>\n </div>\n </div>\n </div>"}]}],"members":{"ondragstart":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":76,"character":3}}]}],"ondragenter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":77,"character":3}}]}],"ondragleave":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":78,"character":3}}]}],"ondrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":79,"character":3}}]}],"onallowdrop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":80,"character":3}}]}],"ondragend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":81,"character":3}}]}],"onadditem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":82,"character":3}}]}],"onStartRenameItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":83,"character":3}}]}],"onFinishRenameItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":84,"character":3}}]}],"onStartDeleteItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":85,"character":3}}]}],"onFinishDeleteItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":86,"character":3}}]}],"onCancelDeleteItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":87,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":89,"character":3}}]}],"treeData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":104,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgxTreeService"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":110,"character":62}]}],"setConfig":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"enableSubscribers":[{"__symbolic":"method"}],"getTreeData":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"enableRootRenameMode":[{"__symbolic":"method"}],"submitAdd":[{"__symbolic":"method"}],"submitRootRename":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"NgxTreeChildrenComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"lib-ngx-tree-children","template":"<div class='tree-child' id={{element.id}} libDragElement [draggableValue]='element.options.draggable' [item]='element' [ngClass]=\"{disabled : element.options.disabled}\">\n <div *ngIf=\"element && element.options\" class='d-flex'>\n <div *ngIf='config' [ngClass]=\"{hidden : element.options.hidden}\">\n <div class='tree-title d-inline-flex pos-relative' [ngClass]=\"{destenationTop : element.options.destenationTop, destenationBottom: element.options.destenationBottom}\" *ngIf=\"!element.options.edit;else onEdit\">\n <div *ngIf=\"!config.setItemsAsLinks; else link\" [ngClass]=\"{addOpacity : element.options.currentlyDragging}\" libDropElement\n [item]='element' class='draggable-item'>\n {{element.name}}\n </div>\n <ng-template #link>\n <div [ngClass]=\"{addOpacity : element.options.currentlyDragging}\" libDropElement\n [item]='element' class='draggable-item'>\n <a [href]=\"element.options.href\" class='tree-link'>{{element.name}}</a>\n </div>\n </ng-template>\n <div class='d-flex buttons-bar' *ngIf=\"config.showActionButtons && element.options.showActionButtons && !element.options.disabled\">\n <div class='d-flex'>\n <button class=\"tree-btn add-btn\" *ngIf=\"config.showAddButtons\" (click)=\"submitAdd(null, element)\">\n <fa-icon icon=\"plus\" [style.font-size.px]='config.setIconSize'></fa-icon>\n </button>\n </div>\n <div class='d-flex'>\n <button class=\"tree-btn edit-btn\" *ngIf=\"config.showRenameButtons\" (click)=\"enableRenameMode(element)\">\n <fa-icon icon=\"edit\" [style.font-size.px]='config.setIconSize'></fa-icon>\n </button>\n </div>\n <div class='d-flex'>\n <button class=\"tree-btn delete-btn\" *ngIf=\"config.showDeleteButtons && element.options.showDeleteButton\" (click)=\"onSubmitDelete( element )\">\n <fa-icon icon=\"times\" [style.font-size.px]='config.setIconSize'></fa-icon>\n </button>\n </div>\n </div>\n <div class='child-drop-place' [attr.data-id]='element.id' libDropElement *ngIf='element.options.showDropChildZone && !element.options.disabled'>\n <fa-icon icon=\"arrow-down\" [style.font-size.px]='config.setIconSize'></fa-icon>\n </div>\n <div class='show-hide-switch' *ngIf=\"config.enableExpandButtons && element.options.showExpandButton && element.childrens.length > 0 && !element.options.disabled\">\n <div *ngIf=\"element.options.hideChildrens; else visible\">\n <button class='tree-btn show-btn' (click)='element.options.hideChildrens = false'>\n <fa-icon icon=\"plus\" [style.font-size.px]='config.setIconSize'></fa-icon>\n </button>\n </div>\n <ng-template #visible>\n <button class='tree-btn hide-btn' (click)='element.options.hideChildrens = true'>\n <fa-icon icon=\"minus\" [style.font-size.px]='config.setIconSize'></fa-icon>\n </button>\n </ng-template>\n </div>\n </div>\n <ng-template #onEdit>\n <div class='tree-title d-inline-flex'>\n <form [formGroup]=\"renameForm\" class='d-flex' (submit)='submitRename(element)'>\n <input type=\"text\" class='input-rename' formControlName=\"name\" libAutoFocus=\"true\" [style.font-size.px]='config.setFontSize'>\n </form>\n <div class='d-flex'>\n <button class='tree-btn submit-btn' (click)='submitRename(element)'>\n <fa-icon icon=\"check\" [style.font-size.px]='config.setIconSize'></fa-icon>\n </button>\n <button class='tree-btn delete-btn' (click)='onSubmitDelete(element)'>\n <fa-icon icon=\"times\" [style.font-size.px]='config.setIconSize'></fa-icon>\n </button>\n <div class='error-edit-wrap' *ngIf=\"showError\">\n {{config.validationText}}\n </div>\n </div>\n </div>\n </ng-template>\n <div class=\"tree-content\" *ngIf=\"element.childrens && !element.options.hideChildrens\">\n <lib-ngx-tree-children [setItem]=\"child\" *ngFor='let child of element.childrens'></lib-ngx-tree-children>\n </div>\n </div>\n </div>\n</div>\n"}]}],"members":{"setItem":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"NgxTreeService"},{"__symbolic":"reference","module":"@angular/forms","name":"FormBuilder","line":128,"character":63}]}],"enableSubscribers":[{"__symbolic":"method"}],"setOptions":[{"__symbolic":"method"}],"setValue":[{"__symbolic":"method"}],"createForm":[{"__symbolic":"method"}],"enableRenameMode":[{"__symbolic":"method"}],"submitAdd":[{"__symbolic":"method"}],"submitRename":[{"__symbolic":"method"}],"onSubmitDelete":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}]}},"AutoFocusDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"[libAutoFocus]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":12,"character":28}]}],"ngOnInit":[{"__symbolic":"method"}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":5}}]}]}},"DragElementsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":9,"character":1},"arguments":[{"selector":"[libDragElement]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":13,"character":28},{"__symbolic":"reference","name":"NgxTreeService"}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":5}}]}],"draggableValue":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"draggable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":17,"character":5},"arguments":["draggable"]}]}],"onDragStart":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":27,"character":5},"arguments":["dragstart",["$event"]]}]}],"onDrag":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":47,"character":5},"arguments":["drag",["$event"]]}]}],"onDragEnd":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":61,"character":5},"arguments":["dragend",["$event"]]}]}]}},"DropElementsDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":8,"character":1},"arguments":[{"selector":"[libDropElement]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":12,"character":28},{"__symbolic":"reference","name":"NgxTreeService"}]}],"item":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":5}}]}],"drop":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":14,"character":5}}]}],"onDragOver":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":21,"character":5},"arguments":["dragover",["$event"]]}]}],"onDrop":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":35,"character":5},"arguments":["drop",["$event"]]}]}],"onDragEnter":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":56,"character":5},"arguments":["dragenter",["$event"]]}]}],"onDragLeave":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":71,"character":5},"arguments":["dragleave",["$event"]]}]}]}},"NgxTreeDndModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":14,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":17,"character":4},{"__symbolic":"reference","module":"@fortawesome/angular-fontawesome","name":"FontAwesomeModule","line":18,"character":4}],"declarations":[{"__symbolic":"reference","name":"AutoFocusDirective"},{"__symbolic":"reference","name":"DragElementsDirective"},{"__symbolic":"reference","name":"DropElementsDirective"},{"__symbolic":"reference","name":"NgxTreeParentComponent"},{"__symbolic":"reference","name":"NgxTreeChildrenComponent"}],"exports":[{"__symbolic":"reference","name":"AutoFocusDirective"},{"__symbolic":"reference","name":"DragElementsDirective"},{"__symbolic":"reference","name":"DropElementsDirective"},{"__symbolic":"reference","name":"NgxTreeParentComponent"},{"__symbolic":"reference","name":"NgxTreeChildrenComponent"}]}]}],"members":{}}},"origins":{"NgxTreeService":"./lib/ngx-tree-dnd.service","NgxTreeParentComponent":"./lib/ngx-tree-dnd-parent/ngx-tree-dnd-parent.component","NgxTreeChildrenComponent":"./lib/ngx-tree-dnd-children/ngx-tree-dnd-children.component","AutoFocusDirective":"./lib/directives/ngx-tree-dnd-autofocus.directive","DragElementsDirective":"./lib/directives/ngx-tree-dnd-drag.directive","DropElementsDirective":"./lib/directives/ngx-tree-dnd-drop.directive","NgxTreeDndModule":"./lib/ngx-tree-dnd.module"},"importAs":"ngx-tree-dnd"}