ngx-tree-dnd
Version:
Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.
1,467 lines (1,462 loc) • 135 kB
JavaScript
import { __values } from 'tslib';
import { Injectable, NgModule, Directive, ElementRef, Input, HostListener, HostBinding, Output, EventEmitter, defineInjectable, Component } from '@angular/core';
import { Subject, BehaviorSubject, Observable } from 'rxjs';
import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee, faPlus, faEdit, faMinus, faTimes, faCheck, faArrowDown } from '@fortawesome/free-solid-svg-icons';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxTreeService = /** @class */ (function () {
function NgxTreeService() {
this.treeStorage = [];
this.onDragStart = new Subject();
this.onDragEnter = new Subject();
this.onDragLeave = new Subject();
this.onDrop = new Subject();
this.onDrag = new Subject();
this.onAllowDrop = new Subject();
this.onDragEnd = new Subject();
this.onAddItem = new Subject();
this.onRenameItem = new Subject();
this.onStartRenameItem = new Subject();
this.onFinishRenameItem = new Subject();
this.onStartDeleteItem = new Subject();
this.onFinishDeleteItem = new Subject();
this.onCancelDeleteItem = new Subject();
this.config = new BehaviorSubject(null);
// set default config
this.defaulConfig = {
showActionButtons: true,
showAddButtons: true,
showRenameButtons: true,
showDeleteButtons: true,
showRootActionButtons: true,
enableExpandButtons: true,
enableDragging: true,
rootTitle: 'Root',
validationText: 'Enter valid name',
minCharacterLength: 1,
setItemsAsLinks: false,
setFontSize: 16,
setIconSize: 14
};
}
/*
get data and set it on observable.
if data = null set empty data array
*/
/*
get data and set it on observable.
if data = null set empty data array
*/
/**
* @param {?} item
* @return {?}
*/
NgxTreeService.prototype.getLocalData = /*
get data and set it on observable.
if data = null set empty data array
*/
/**
* @param {?} item
* @return {?}
*/
function (item) {
var _this = this;
/** @type {?} */
var data = new Observable(function (observer) {
_this.treeStorage = item;
if (_this.treeStorage && _this.treeStorage !== null) {
observer.next(_this.treeStorage);
}
else {
_this.treeStorage = JSON.parse('[]');
observer.next(_this.treeStorage);
}
});
return data;
};
/*
Element finder, it`s find element by id in tree.
Returns: finded element, parent array.
Watch out, this is recursive method.
*/
/*
Element finder, it`s find element by id in tree.
Returns: finded element, parent array.
Watch out, this is recursive method.
*/
/**
* @private
* @param {?} list
* @param {?} id
* @param {?=} parent
* @return {?}
*/
NgxTreeService.prototype.elementFinder = /*
Element finder, it`s find element by id in tree.
Returns: finded element, parent array.
Watch out, this is recursive method.
*/
/**
* @private
* @param {?} list
* @param {?} id
* @param {?=} parent
* @return {?}
*/
function (list, id, parent) {
var e_1, _a;
try {
for (var list_1 = __values(list), list_1_1 = list_1.next(); !list_1_1.done; list_1_1 = list_1.next()) {
var item = list_1_1.value;
if (item.id === id) {
this.findingResults = {
foundItem: item,
itemsList: list
};
if (parent) {
this.findingResults.parentItem = parent;
}
break;
}
else {
if (item.childrens.length > 0) {
this.elementFinder(item.childrens, id, item);
}
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (list_1_1 && !list_1_1.done && (_a = list_1.return)) _a.call(list_1);
}
finally { if (e_1) throw e_1.error; }
}
};
/*
Add new item to tree.
Its accepts 'type' for detect add root element or children.
Emit onAddItem Subject.
*/
/*
Add new item to tree.
Its accepts 'type' for detect add root element or children.
Emit onAddItem Subject.
*/
/**
* @param {?} id
* @param {?} name
* @param {?=} parent
* @return {?}
*/
NgxTreeService.prototype.addNewItem = /*
Add new item to tree.
Its accepts 'type' for detect add root element or children.
Emit onAddItem Subject.
*/
/**
* @param {?} id
* @param {?} name
* @param {?=} parent
* @return {?}
*/
function (id, name, parent) {
/** @type {?} */
var pos = 1;
if (parent && parent.childrens.length !== 0) {
/** @type {?} */
var parentPrevChildren = parent.childrens.length - 1;
/** @type {?} */
var newItemPosition = parent.childrens[parentPrevChildren].options.position + 1;
pos = newItemPosition;
}
/** @type {?} */
var createObj = {
id: id,
name: name,
options: {
position: pos,
edit: true
},
childrens: []
};
if (parent != null) {
this.elementFinder(this.treeStorage, parent ? parent.id : null);
this.findingResults && this.findingResults.foundItem.childrens.push(createObj);
}
else {
this.treeStorage.push(createObj);
}
/** @type {?} */
var eventEmit = {
element: createObj,
parent: parent ? this.findingResults.foundItem : 'root'
};
this.onAddItem.next(eventEmit);
this.clearAction();
};
/*
Delete element.
It`s accepts 'id' for find item on tree.
Emit onStartDeleteItem Subject before delete.
Emit onFinishDeleteItem Subject after submit delete.
Emit onCancelDeleteItem Subject after on cancel delete.
*/
/*
Delete element.
It`s accepts 'id' for find item on tree.
Emit onStartDeleteItem Subject before delete.
Emit onFinishDeleteItem Subject after submit delete.
Emit onCancelDeleteItem Subject after on cancel delete.
*/
/**
* @param {?} id
* @return {?}
*/
NgxTreeService.prototype.deleteItem = /*
Delete element.
It`s accepts 'id' for find item on tree.
Emit onStartDeleteItem Subject before delete.
Emit onFinishDeleteItem Subject after submit delete.
Emit onCancelDeleteItem Subject after on cancel delete.
*/
/**
* @param {?} id
* @return {?}
*/
function (id) {
this.elementFinder(this.treeStorage, id);
/** @type {?} */
var eventEmit = {
element: this.findingResults.foundItem,
parent: this.findingResults.parentItem || 'root'
};
this.onStartDeleteItem.next(eventEmit);
/** @type {?} */
var text;
if (this.findingResults.foundItem.name) {
text = "Do you really want to delete '" + this.findingResults.foundItem.name + "'?";
}
else {
text = "Cancel creating a new item?";
}
if (confirm(text)) {
this.onFinishDeleteItem.next(eventEmit);
/** @type {?} */
var i = this.findingResults.itemsList.indexOf(this.findingResults.foundItem);
this.findingResults.itemsList.splice(i, 1);
}
else {
this.onCancelDeleteItem.next(eventEmit);
}
this.clearAction();
};
/*
Trigger start rename element.
It`s accepts 'name' and 'id' for find item on tree and set the name.
Emit onRenameItem Subject.
*/
/*
Trigger start rename element.
It`s accepts 'name' and 'id' for find item on tree and set the name.
Emit onRenameItem Subject.
*/
/**
* @param {?} element
* @return {?}
*/
NgxTreeService.prototype.startRenameItem = /*
Trigger start rename element.
It`s accepts 'name' and 'id' for find item on tree and set the name.
Emit onRenameItem Subject.
*/
/**
* @param {?} element
* @return {?}
*/
function (element) {
this.elementFinder(this.treeStorage, element.id);
// event emit
/** @type {?} */
var eventEmit = {
element: this.findingResults.foundItem,
parent: this.findingResults.parentItem || 'root'
};
this.onStartRenameItem.next(eventEmit);
};
/*
Rename element.
It`s accepts 'name' and 'id' for find item on tree and set the name.
Emit onRenameItem Subject.
*/
/*
Rename element.
It`s accepts 'name' and 'id' for find item on tree and set the name.
Emit onRenameItem Subject.
*/
/**
* @param {?} name
* @param {?} id
* @return {?}
*/
NgxTreeService.prototype.finishRenameItem = /*
Rename element.
It`s accepts 'name' and 'id' for find item on tree and set the name.
Emit onRenameItem Subject.
*/
/**
* @param {?} name
* @param {?} id
* @return {?}
*/
function (name, id) {
this.elementFinder(this.treeStorage, id);
// code
this.findingResults.foundItem.name = name;
this.findingResults.foundItem.options.edit = false;
// event emit
/** @type {?} */
var eventEmit = {
element: this.findingResults.foundItem,
parent: this.findingResults.parentItem || 'root'
};
this.onFinishRenameItem.next(eventEmit);
this.clearAction();
};
/*
Event: ondragstart;
On start dragging find element my id and set option currentlyDragging true.
*/
/*
Event: ondragstart;
On start dragging find element my id and set option currentlyDragging true.
*/
/**
* @param {?} eventObj
* @return {?}
*/
NgxTreeService.prototype.startDragging = /*
Event: ondragstart;
On start dragging find element my id and set option currentlyDragging true.
*/
/**
* @param {?} eventObj
* @return {?}
*/
function (eventObj) {
this.switchDropButton(true, this.treeStorage);
this.onDragStart.next(eventObj);
};
/*
Event: ondrag;
Trigger dragging element
*/
/*
Event: ondrag;
Trigger dragging element
*/
/**
* @param {?} eventObj
* @return {?}
*/
NgxTreeService.prototype.onDragProcess = /*
Event: ondrag;
Trigger dragging element
*/
/**
* @param {?} eventObj
* @return {?}
*/
function (eventObj) {
this.onDrag.next(eventObj);
};
/*
Event: ondragend;
detect end of drag action
*/
/*
Event: ondragend;
detect end of drag action
*/
/**
* @param {?} eventObj
* @return {?}
*/
NgxTreeService.prototype.dragEndAction = /*
Event: ondragend;
detect end of drag action
*/
/**
* @param {?} eventObj
* @return {?}
*/
function (eventObj) {
this.removeDestenationBorders(this.treeStorage);
this.switchDropButton(false, this.treeStorage);
this.onDragEnd.next(eventObj);
};
/*
Event: enterdropzone;
Entering drop zone for styling items.
*/
/*
Event: enterdropzone;
Entering drop zone for styling items.
*/
/**
* @param {?} eventObj
* @return {?}
*/
NgxTreeService.prototype.enterDropZone = /*
Event: enterdropzone;
Entering drop zone for styling items.
*/
/**
* @param {?} eventObj
* @return {?}
*/
function (eventObj) {
this.onDragEnter.next(eventObj);
};
/*
Event: dragover;
Detect hover on dropable elements
*/
/*
Event: dragover;
Detect hover on dropable elements
*/
/**
* @param {?} eventObj
* @return {?}
*/
NgxTreeService.prototype.onDragOver = /*
Event: dragover;
Detect hover on dropable elements
*/
/**
* @param {?} eventObj
* @return {?}
*/
function (eventObj) {
/** @type {?} */
var el = ((/** @type {?} */ (eventObj.target)));
if (el && el.id !== this.isDragging.id) {
/** @type {?} */
var elementHalfHeight = eventObj.event.toElement.offsetHeight / 2;
if (eventObj.event.offsetY < elementHalfHeight) {
el.options.destenationBottom = false;
el.options.destenationTop = true;
}
else {
el.options.destenationBottom = true;
el.options.destenationTop = false;
}
this.onAllowDrop.next(eventObj);
}
};
/*
Event: leavedropzone;
Leave drop zone for restyling items.
*/
/*
Event: leavedropzone;
Leave drop zone for restyling items.
*/
/**
* @param {?} eventObj
* @return {?}
*/
NgxTreeService.prototype.leaveDropZone = /*
Event: leavedropzone;
Leave drop zone for restyling items.
*/
/**
* @param {?} eventObj
* @return {?}
*/
function (eventObj) {
this.removeDestenationBorders(this.treeStorage);
this.onDragLeave.next(eventObj);
};
/*
Event: ondrop;
Its use where draggable item drop not on allowed for drop zone:
set item option currentlyDragging false.
return false.
*/
/*
Event: ondrop;
Its use where draggable item drop not on allowed for drop zone:
set item option currentlyDragging false.
return false.
*/
/**
* @param {?} eventObj
* @return {?}
*/
NgxTreeService.prototype.onDropItem = /*
Event: ondrop;
Its use where draggable item drop not on allowed for drop zone:
set item option currentlyDragging false.
return false.
*/
/**
* @param {?} eventObj
* @return {?}
*/
function (eventObj) {
if (eventObj.target) {
/** @type {?} */
var elementHalfHeight = eventObj.event.toElement.offsetHeight / 2;
if (eventObj.event.offsetY < elementHalfHeight) {
this.changeItemPosition(eventObj.target, 'up');
}
else {
this.changeItemPosition(eventObj.target, 'down');
}
this.onDrop.next(eventObj);
}
else {
/** @type {?} */
var dropZoneId = parseInt(eventObj.event.target.getAttribute('data-id'), null);
this.elementFinder(this.treeStorage, this.isDragging.id);
/** @type {?} */
var i = this.findingResults.itemsList.indexOf(this.findingResults.foundItem);
/** @type {?} */
var copyItem = this.findingResults.itemsList.splice(i, 1)[0];
this.elementFinder(this.treeStorage, dropZoneId);
this.findingResults.foundItem.childrens.push(copyItem);
// this.sortTree();
eventObj.target = this.findingResults.foundItem;
this.onDrop.next(eventObj);
}
this.removeDestenationBorders(this.treeStorage);
this.switchDropButton(false, this.treeStorage);
this.clearAction();
};
/*
change position of items
need set direction before use
*/
/*
change position of items
need set direction before use
*/
/**
* @private
* @param {?} el
* @param {?} direction
* @return {?}
*/
NgxTreeService.prototype.changeItemPosition = /*
change position of items
need set direction before use
*/
/**
* @private
* @param {?} el
* @param {?} direction
* @return {?}
*/
function (el, direction) {
var _this = this;
setTimeout(function () {
var e_2, _a, e_3, _b;
_this.elementFinder(_this.treeStorage, _this.isDragging.id);
/** @type {?} */
var i = _this.findingResults.itemsList.indexOf(_this.findingResults.foundItem);
/** @type {?} */
var copyItem = _this.findingResults.itemsList.splice(i, 1)[0];
// end test
/** @type {?} */
var positionTarget = el.options.position;
_this.elementFinder(_this.treeStorage, el.id);
if (direction === 'up') {
try {
for (var _c = __values(_this.findingResults.itemsList), _d = _c.next(); !_d.done; _d = _c.next()) {
var items = _d.value;
if (items.options.position >= positionTarget) {
items.options.position = items.options.position + 1;
copyItem.options.position = positionTarget;
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
}
finally { if (e_2) throw e_2.error; }
}
}
else {
try {
for (var _e = __values(_this.findingResults.itemsList), _f = _e.next(); !_f.done; _f = _e.next()) {
var items = _f.value;
if (items.options.position <= positionTarget) {
items.options.position = items.options.position - 1;
}
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
}
finally { if (e_3) throw e_3.error; }
}
}
copyItem.options.position = positionTarget;
_this.findingResults.itemsList.push(copyItem);
_this.sortTree();
});
};
// get position of item
// get position of item
/**
* @param {?} item
* @return {?}
*/
NgxTreeService.prototype.getItemPosition =
// get position of item
/**
* @param {?} item
* @return {?}
*/
function (item) {
this.elementFinder(this.treeStorage, item.id);
/** @type {?} */
var position = this.findingResults.itemsList.indexOf(this.findingResults.foundItem);
return ++position;
};
// sort tree byposition
// sort tree byposition
/**
* @return {?}
*/
NgxTreeService.prototype.sortTree =
// sort tree byposition
/**
* @return {?}
*/
function () {
this.sortElements(this.treeStorage);
};
// part of sortTree()
// part of sortTree()
/**
* @private
* @param {?} tree
* @return {?}
*/
NgxTreeService.prototype.sortElements =
// part of sortTree()
/**
* @private
* @param {?} tree
* @return {?}
*/
function (tree) {
var e_4, _a;
tree.sort(this.compate);
try {
for (var tree_1 = __values(tree), tree_1_1 = tree_1.next(); !tree_1_1.done; tree_1_1 = tree_1.next()) {
var item = tree_1_1.value;
if (item.childrens.length > 0) {
this.sortElements(item.childrens);
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (tree_1_1 && !tree_1_1.done && (_a = tree_1.return)) _a.call(tree_1);
}
finally { if (e_4) throw e_4.error; }
}
};
// part of sortTree()
// part of sortTree()
/**
* @private
* @param {?} a
* @param {?} b
* @return {?}
*/
NgxTreeService.prototype.compate =
// part of sortTree()
/**
* @private
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) {
if (a.options.position < b.options.position) {
return -1;
}
if (a.options.position > b.options.position) {
return 1;
}
return 0;
};
// clear selectedElement && isDragging from element finder.
// clear selectedElement && isDragging from element finder.
/**
* @return {?}
*/
NgxTreeService.prototype.clearAction =
// clear selectedElement && isDragging from element finder.
/**
* @return {?}
*/
function () {
this.findingResults = null;
};
/**
* @private
* @param {?} data
* @return {?}
*/
NgxTreeService.prototype.removeDestenationBorders = /**
* @private
* @param {?} data
* @return {?}
*/
function (data) {
var e_5, _a;
try {
for (var data_1 = __values(data), data_1_1 = data_1.next(); !data_1_1.done; data_1_1 = data_1.next()) {
var item = data_1_1.value;
item.options.destenationBottom = false;
item.options.destenationTop = false;
if (item.childrens.length > 0) {
this.removeDestenationBorders(item.childrens);
}
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (data_1_1 && !data_1_1.done && (_a = data_1.return)) _a.call(data_1);
}
finally { if (e_5) throw e_5.error; }
}
};
/**
* @private
* @param {?} bool
* @param {?} data
* @return {?}
*/
NgxTreeService.prototype.switchDropButton = /**
* @private
* @param {?} bool
* @param {?} data
* @return {?}
*/
function (bool, data) {
var e_6, _a;
try {
for (var data_2 = __values(data), data_2_1 = data_2.next(); !data_2_1.done; data_2_1 = data_2.next()) {
var el = data_2_1.value;
el.options.showActionButtons = !bool;
if (el.id !== this.isDragging.id) {
el.options.showDropChildZone = bool;
}
if (el.childrens.length > 0) {
this.switchDropButton(bool, el.childrens);
}
}
}
catch (e_6_1) { e_6 = { error: e_6_1 }; }
finally {
try {
if (data_2_1 && !data_2_1.done && (_a = data_2.return)) _a.call(data_2);
}
finally { if (e_6) throw e_6.error; }
}
};
NgxTreeService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] },
];
/** @nocollapse */
NgxTreeService.ctorParameters = function () { return []; };
/** @nocollapse */ NgxTreeService.ngInjectableDef = defineInjectable({ factory: function NgxTreeService_Factory() { return new NgxTreeService(); }, token: NgxTreeService, providedIn: "root" });
return NgxTreeService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxTreeParentComponent = /** @class */ (function () {
function NgxTreeParentComponent(treeService, fb) {
this.treeService = treeService;
this.fb = fb;
this.userConfig = {
showActionButtons: true,
showAddButtons: true,
showRenameButtons: true,
showDeleteButtons: true,
showRootActionButtons: true,
enableExpandButtons: true,
enableDragging: true,
rootTitle: 'Root',
options: {
edit: false
},
validationText: 'Enter valid name',
minCharacterLength: 1,
setItemsAsLinks: false,
setFontSize: 16,
setIconSize: 14
};
this.ondragstart = new EventEmitter();
this.ondragenter = new EventEmitter();
this.ondragleave = new EventEmitter();
this.ondrop = new EventEmitter();
this.onallowdrop = new EventEmitter();
this.ondragend = new EventEmitter();
this.onadditem = new EventEmitter();
this.onStartRenameItem = new EventEmitter();
this.onFinishRenameItem = new EventEmitter();
this.onStartDeleteItem = new EventEmitter();
this.onFinishDeleteItem = new EventEmitter();
this.onCancelDeleteItem = new EventEmitter();
this.enableSubscribers();
this.createForm();
}
Object.defineProperty(NgxTreeParentComponent.prototype, "config", {
set: /**
* @param {?} config
* @return {?}
*/
function (config) {
// seal config
Object.seal(this.userConfig);
try {
// if config it`s pass
this.setConfig(config);
this.treeService.config.next(this.userConfig);
}
catch (error) {
// if config invalid
console.log('Config is invalid! Default configuragion will be appeared');
this.treeService.config.next(this.treeService.defaulConfig);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxTreeParentComponent.prototype, "treeData", {
set: /**
* @param {?} item
* @return {?}
*/
function (item) {
// get user tree data
this.getTreeData(item);
},
enumerable: true,
configurable: true
});
// set user config
// set user config
/**
* @param {?} config
* @return {?}
*/
NgxTreeParentComponent.prototype.setConfig =
// set user config
/**
* @param {?} config
* @return {?}
*/
function (config) {
var e_1, _a;
try {
for (var _b = __values(Object.keys(config)), _c = _b.next(); !_c.done; _c = _b.next()) {
var key = _c.value;
this.setValue(key, config);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
this.renameForm.patchValue({
name: this.userConfig.rootTitle
});
};
// set value to keys of config
// set value to keys of config
/**
* @param {?} item
* @param {?} config
* @return {?}
*/
NgxTreeParentComponent.prototype.setValue =
// set value to keys of config
/**
* @param {?} item
* @param {?} config
* @return {?}
*/
function (item, config) {
this.userConfig[item] = config[item];
};
// subscribe to all events and emit them to user.
// subscribe to all events and emit them to user.
/**
* @return {?}
*/
NgxTreeParentComponent.prototype.enableSubscribers =
// subscribe to all events and emit them to user.
/**
* @return {?}
*/
function () {
var _this = this;
this.treeService.onDrop.subscribe(function (event) {
_this.ondrop.emit(event);
});
this.treeService.onDragStart.subscribe(function (event) {
_this.ondragstart.emit(event);
});
this.treeService.onAllowDrop.subscribe(function (event) {
_this.onallowdrop.emit(event);
});
this.treeService.onDragEnd.subscribe(function (event) {
_this.ondragend.emit(event);
});
this.treeService.onAddItem.subscribe(function (event) {
_this.onadditem.emit(event);
});
this.treeService.onStartRenameItem.subscribe(function (event) {
_this.onStartRenameItem.emit(event);
});
this.treeService.onFinishRenameItem.subscribe(function (event) {
_this.onFinishRenameItem.emit(event);
});
this.treeService.onStartDeleteItem.subscribe(function (event) {
_this.onStartDeleteItem.emit(event);
});
this.treeService.onFinishDeleteItem.subscribe(function (event) {
_this.onFinishDeleteItem.emit(event);
});
this.treeService.onCancelDeleteItem.subscribe(function (event) {
_this.onCancelDeleteItem.emit(event);
});
this.treeService.onDragEnter.subscribe(function (event) {
_this.ondragenter.emit(event);
});
this.treeService.onDragLeave.subscribe(function (event) {
_this.ondragleave.emit(event);
});
};
// get tree data from treeService.
// get tree data from treeService.
/**
* @param {?} userTree
* @return {?}
*/
NgxTreeParentComponent.prototype.getTreeData =
// get tree data from treeService.
/**
* @param {?} userTree
* @return {?}
*/
function (userTree) {
var _this = this;
this.treeService.getLocalData(userTree).subscribe(function (tree) {
_this.treeView = tree;
setTimeout(function () {
_this.treeService.sortTree();
});
}, function (error) {
console.log(error);
});
};
// create edit form
// create edit form
/**
* @return {?}
*/
NgxTreeParentComponent.prototype.createForm =
// create edit form
/**
* @return {?}
*/
function () {
this.renameForm = this.fb.group({
name: [this.userConfig.rootTitle || '', [
Validators.required,
Validators.minLength(this.userConfig.minCharacterLength)
]],
});
};
/**
* @return {?}
*/
NgxTreeParentComponent.prototype.enableRootRenameMode = /**
* @return {?}
*/
function () {
this.userConfig.options.edit = true;
};
/**
* @param {?} name
* @return {?}
*/
NgxTreeParentComponent.prototype.submitAdd = /**
* @param {?} name
* @return {?}
*/
function (name) {
/** @type {?} */
var d = "" + new Date().getFullYear() + new Date().getDay() + new Date().getTime();
/** @type {?} */
var elemId = parseInt(d, null);
this.treeService.addNewItem(elemId, name, null);
};
/**
* @return {?}
*/
NgxTreeParentComponent.prototype.submitRootRename = /**
* @return {?}
*/
function () {
if (this.renameForm.valid) {
this.showError = false;
this.userConfig.rootTitle = this.renameForm.value.name;
this.userConfig.options.edit = false;
}
else {
this.showError = true;
}
};
/**
* @return {?}
*/
NgxTreeParentComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () { };
NgxTreeParentComponent.decorators = [
{ type: Component, args: [{
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>"
},] },
];
/** @nocollapse */
NgxTreeParentComponent.ctorParameters = function () { return [
{ type: NgxTreeService },
{ type: FormBuilder }
]; };
NgxTreeParentComponent.propDecorators = {
ondragstart: [{ type: Output }],
ondragenter: [{ type: Output }],
ondragleave: [{ type: Output }],
ondrop: [{ type: Output }],
onallowdrop: [{ type: Output }],
ondragend: [{ type: Output }],
onadditem: [{ type: Output }],
onStartRenameItem: [{ type: Output }],
onFinishRenameItem: [{ type: Output }],
onStartDeleteItem: [{ type: Output }],
onFinishDeleteItem: [{ type: Output }],
onCancelDeleteItem: [{ type: Output }],
config: [{ type: Input }],
treeData: [{ type: Input }]
};
return NgxTreeParentComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxTreeChildrenComponent = /** @class */ (function () {
function NgxTreeChildrenComponent(treeService, fb) {
this.treeService = treeService;
this.fb = fb;
}
Object.defineProperty(NgxTreeChildrenComponent.prototype, "setItem", {
// get item from parent component
set:
// get item from parent component
/**
* @param {?} data
* @return {?}
*/
function (data) {
this.element = data;
this.itemOptions = {
href: '#',
hidden: false,
hideChildrens: false,
position: this.treeService.getItemPosition(this.element),
draggable: true,
edit: false,
showActionButtons: true,
currentlyDragging: false,
destenationTop: false,
destenationBottom: false,
disabled: false,
showExpandButton: true,
showDeleteButton: true
};
if (this.element.options) {
this.setOptions(this.element.options);
this.element.options = this.itemOptions;
}
else {
this.element.options = this.itemOptions;
}
// enable subscribers
this.enableSubscribers();
// create form
this.createForm();
},
enumerable: true,
configurable: true
});
// enable subscribe to config
// enable subscribe to config
/**
* @return {?}
*/
NgxTreeChildrenComponent.prototype.enableSubscribers =
// enable subscribe to config
/**
* @return {?}
*/
function () {
var _this = this;
this.treeService.config.subscribe(function (config) {
if (config !== null) {
_this.config = config;
}
else {
_this.config = _this.treeService.defaulConfig;
}
if (_this.element.options.draggable) {
_this.element.options.draggable = _this.config.enableDragging;
}
});
};
// set options to item
// set options to item
/**
* @param {?} options
* @return {?}
*/
NgxTreeChildrenComponent.prototype.setOptions =
// set options to item
/**
* @param {?} options
* @return {?}
*/
function (options) {
var e_1, _a;
try {
for (var _b = __values(Object.keys(options)), _c = _b.next(); !_c.done; _c = _b.next()) {
var key = _c.value;
this.setValue(key, options);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
};
// set value to options keys
// set value to options keys
/**
* @param {?} item
* @param {?} options
* @return {?}
*/
NgxTreeChildrenComponent.prototype.setValue =
// set value to options keys
/**
* @param {?} item
* @param {?} options
* @return {?}
*/
function (item, options) {
this.itemOptions[item] = options[item];
};
// create edit form
// create edit form
/**
* @return {?}
*/
NgxTreeChildrenComponent.prototype.createForm =
// create edit form
/**
* @return {?}
*/
function () {
this.renameForm = this.fb.group({
name: [this.element.name || '', [
Validators.required,
Validators.minLength(this.config.minCharacterLength)
]],
});
};
/*
Event: onStartRenameItem;
Enable rename mode in element
Call onStartRenameItem() from tree service.
*/
/*
Event: onStartRenameItem;
Enable rename mode in element
Call onStartRenameItem() from tree service.
*/
/**
* @param {?} element
* @return {?}
*/
NgxTreeChildrenComponent.prototype.enableRenameMode = /*
Event: onStartRenameItem;
Enable rename mode in element
Call onStartRenameItem() from tree service.
*/
/**
* @param {?} element
* @return {?}
*/
function (element) {
element.options.edit = true;
this.treeService.startRenameItem(element);
};
/*
Event: onadditem;
Generate id by new Date() by 'full year + day + time'.
Call addNewItem() from tree service.
*/
/*
Event: onadditem;
Generate id by new Date() by 'full year + day + time'.
Call addNewItem() from tree service.
*/
/**
* @param {?} name
* @param {?} item
* @return {?}
*/
NgxTreeChildrenComponent.prototype.submitAdd = /*
Event: onadditem;
Generate id by new Date() by 'full year + day + time'.
Call addNewItem() from tree service.
*/
/**
* @param {?} name
* @param {?} item
* @return {?}
*/
function (name, item) {
/** @type {?} */
var d = "" + new Date().getFullYear() + new Date().getDay() + new Date().getTime();
/** @type {?} */
var elemId = parseInt(d, null);
this.treeService.addNewItem(elemId, name, item);
this.element.options.hideChildrens = false;
};
/*
Event: onFinishRenameItem;
Check is form valid.
Call addNewItem() from tree service.
*/
/*
Event: onFinishRenameItem;
Check is form valid.
Call addNewItem() from tree service.
*/
/**
* @param {?} item
* @return {?}
*/
NgxTreeChildrenComponent.prototype.submitRename = /*
Event: onFinishRenameItem;
Check is form valid.
Call addNewItem() from tree service.
*/
/**
* @param {?} item
* @return {?}
*/
function (item) {
if (this.renameForm.valid) {
this.showError = false;
this.treeService.finishRenameItem(this.renameForm.value.name, item.id);
this.element.options.edit = false;
}
else {
this.showError = true;
}
};
/*
Events:
onStartDeleteItem,
onFinishDeleteItem,
onCancelDeleteItem.
Check is item edit, then if name empty delete item.
Call deleteItem() from tree service.
*/
/*
Events:
onStartDeleteItem,
onFinishDeleteItem,
onCancelDeleteItem.
Check is item edit, then if name empty delete item.
Call deleteItem() from tree service.
*/
/**
* @param {?} item
* @return {?}
*/
NgxTreeChildrenComponent.prototype.onSubmitDelete = /*
Events:
onStartDeleteItem,
onFinishDeleteItem,
onCancelDeleteItem.
Check is item edit, then if name empty delete item.
Call deleteItem() from tree service.
*/
/**
* @param {?} item
* @return {?}
*/
function (item) {
if (!this.element.options.edit) {
this.treeService.deleteItem(item.id);
}
else {
if (item.name === null) {
this.treeService.deleteItem(item.id);
}
else {
this.element.options.edit = false;
}
}
};
// after view init
// after view init
/**
* @return {?}
*/
NgxTreeChildrenComponent.prototype.ngAfterViewInit =
// after view init
/**
* @return {?}
*/
function () { };
NgxTreeChildrenComponent.decorators = [
{ type: Component, args: [{
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"
},] },
];
/** @nocollapse */
NgxTreeChildrenComponent.ctorParameters = function () { return [
{ type: NgxTreeService },
{ type: FormBuilder }
]; };
NgxTreeChildrenComponent.propDecorators = {
setItem: [{ type: Input }]
};
return NgxTreeChildrenComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AutoFocusDirective = /** @class */ (function () {
function AutoFocusDirective(el) {
this.el = el;
this.focus = true;
}
/**
* @return {?}
*/
AutoFocusDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.focus) {
window.setTimeout(function () {
_this.el.nativeElement.focus();
});
}
};
Object.defineProperty(AutoFocusDirective.prototype, "autofocus", {
set: /**
* @param {?} condition
* @return {?}
*/
function (condition) {
this.focus = condition !== false;
},
enumerable: true,
configurable: true
});
AutoFocusDirective.decorators = [
{ type: Directive, args: [{
selector: '[libAutoFocus]'
},] },
];
/** @nocollapse */
AutoFocusDirective.ctorParameters = function () { return [
{ type: ElementRef }
]; };
AutoFocusDirective.propDecorators = {
autofocus: [{ type: Input }]
};
return AutoFocusDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var DragElementsDirective = /** @class */ (function () {
function DragElementsDirective(el, treeService) {
this.el = el;
this.treeService = treeService;
}
Object.defineProperty(DragElementsDirective.prototype, "draggable", {
get: /**
* @return {?}
*/
function () {
return this.draggableValue;
},
enumerable: true,
configurable: true
});
/*
Event: ondragstart;
Set item as dragging and call startDragging() from tree service.
Emit OnDragStart on tree service.
*/
/*
Event: ondragstart;
Set item as dragging and call startDragging() from tree service.
Emit OnDragStart on tree serv