ngx-tree-dnd
Version:
Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.
1,324 lines (1,317 loc) • 164 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('@angular/forms'), require('@angular/common'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/fontawesome-svg-core'), require('@fortawesome/free-solid-svg-icons')) :
typeof define === 'function' && define.amd ? define('ngx-tree-dnd', ['exports', '@angular/core', 'rxjs', '@angular/forms', '@angular/common', '@fortawesome/angular-fontawesome', '@fortawesome/fontawesome-svg-core', '@fortawesome/free-solid-svg-icons'], factory) :
(factory((global['ngx-tree-dnd'] = {}),global.ng.core,global.rxjs,global.ng.forms,global.ng.common,null,null,null));
}(this, (function (exports,i0,rxjs,forms,common,angularFontawesome,fontawesomeSvgCore,freeSolidSvgIcons) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __values(o) {
var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
if (m)
return m.call(o);
return {
next: function () {
if (o && i >= o.length)
o = void 0;
return { value: o && o[i++], done: !o };
}
};
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxTreeService = /** @class */ (function () {
function NgxTreeService() {
this.treeStorage = [];
this.onDragStart = new rxjs.Subject();
this.onDragEnter = new rxjs.Subject();
this.onDragLeave = new rxjs.Subject();
this.onDrop = new rxjs.Subject();
this.onDrag = new rxjs.Subject();
this.onAllowDrop = new rxjs.Subject();
this.onDragEnd = new rxjs.Subject();
this.onAddItem = new rxjs.Subject();
this.onRenameItem = new rxjs.Subject();
this.onStartRenameItem = new rxjs.Subject();
this.onFinishRenameItem = new rxjs.Subject();
this.onStartDeleteItem = new rxjs.Subject();
this.onFinishDeleteItem = new rxjs.Subject();
this.onCancelDeleteItem = new rxjs.Subject();
this.config = new rxjs.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 rxjs.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: i0.Injectable, args: [{
providedIn: 'root'
},] },
];
/** @nocollapse */
NgxTreeService.ctorParameters = function () { return []; };
/** @nocollapse */ NgxTreeService.ngInjectableDef = i0.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 i0.EventEmitter();
this.ondragenter = new i0.EventEmitter();
this.ondragleave = new i0.EventEmitter();
this.ondrop = new i0.EventEmitter();
this.onallowdrop = new i0.EventEmitter();
this.ondragend = new i0.EventEmitter();
this.onadditem = new i0.EventEmitter();
this.onStartRenameItem = new i0.EventEmitter();
this.onFinishRenameItem = new i0.EventEmitter();
this.onStartDeleteItem = new i0.EventEmitter();
this.onFinishDeleteItem = new i0.EventEmitter();
this.onCancelDeleteItem = new i0.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 || '', [
forms.Validators.required,
forms.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: i0.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: forms.FormBuilder }
];
};
NgxTreeParentComponent.propDecorators = {
ondragstart: [{ type: i0.Output }],
ondragenter: [{ type: i0.Output }],
ondragleave: [{ type: i0.Output }],
ondrop: [{ type: i0.Output }],
onallowdrop: [{ type: i0.Output }],
ondragend: [{ type: i0.Output }],
onadditem: [{ type: i0.Output }],
onStartRenameItem: [{ type: i0.Output }],
onFinishRenameItem: [{ type: i0.Output }],
onStartDeleteItem: [{ type: i0.Output }],
onFinishDeleteItem: [{ type: i0.Output }],
onCancelDeleteItem: [{ type: i0.Output }],
config: [{ type: i0.Input }],
treeData: [{ type: i0.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 || '', [
forms.Validators.required,
forms.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);
};