| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984 |
- "use strict";
- var __assign = (this && this.__assign) || function () {
- __assign = Object.assign || function(t) {
- for (var s, i = 1, n = arguments.length; i < n; i++) {
- s = arguments[i];
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
- t[p] = s[p];
- }
- return t;
- };
- return __assign.apply(this, arguments);
- };
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
- return c > 3 && r && Object.defineProperty(target, key, r), r;
- };
- var __metadata = (this && this.__metadata) || function (k, v) {
- if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
- };
- var __param = (this && this.__param) || function (paramIndex, decorator) {
- return function (target, key) { decorator(target, key, paramIndex); }
- };
- Object.defineProperty(exports, "__esModule", { value: true });
- var core_1 = require("@angular/core");
- var core_2 = require("@angular/core");
- var common_1 = require("@angular/common");
- var shared_1 = require("../common/shared");
- var shared_2 = require("../common/shared");
- var treedragdropservice_1 = require("../common/treedragdropservice");
- var objectutils_1 = require("../utils/objectutils");
- var api_1 = require("../common/api");
- var UITreeNode = /** @class */ (function () {
- function UITreeNode(tree) {
- this.tree = tree;
- }
- UITreeNode_1 = UITreeNode;
- UITreeNode.prototype.ngOnInit = function () {
- this.node.parent = this.parentNode;
- if (this.parentNode) {
- this.tree.syncNodeOption(this.node, this.tree.value, 'parent', this.tree.getNodeWithKey(this.parentNode.key, this.tree.value));
- }
- };
- UITreeNode.prototype.getIcon = function () {
- var icon;
- if (this.node.icon)
- icon = this.node.icon;
- else
- icon = this.node.expanded && this.node.children && this.node.children.length ? this.node.expandedIcon : this.node.collapsedIcon;
- return UITreeNode_1.ICON_CLASS + ' ' + icon;
- };
- UITreeNode.prototype.isLeaf = function () {
- return this.tree.isNodeLeaf(this.node);
- };
- UITreeNode.prototype.toggle = function (event) {
- if (this.node.expanded)
- this.collapse(event);
- else
- this.expand(event);
- };
- UITreeNode.prototype.expand = function (event) {
- this.node.expanded = true;
- this.tree.onNodeExpand.emit({ originalEvent: event, node: this.node });
- };
- UITreeNode.prototype.collapse = function (event) {
- this.node.expanded = false;
- this.tree.onNodeCollapse.emit({ originalEvent: event, node: this.node });
- };
- UITreeNode.prototype.onNodeClick = function (event) {
- this.tree.onNodeClick(event, this.node);
- };
- UITreeNode.prototype.onNodeTouchEnd = function () {
- this.tree.onNodeTouchEnd();
- };
- UITreeNode.prototype.onNodeRightClick = function (event) {
- this.tree.onNodeRightClick(event, this.node);
- };
- UITreeNode.prototype.isSelected = function () {
- return this.tree.isSelected(this.node);
- };
- UITreeNode.prototype.onDropPoint = function (event, position) {
- var _this = this;
- event.preventDefault();
- var dragNode = this.tree.dragNode;
- var dragNodeIndex = this.tree.dragNodeIndex;
- var dragNodeScope = this.tree.dragNodeScope;
- var isValidDropPointIndex = this.tree.dragNodeTree === this.tree ? (position === 1 || dragNodeIndex !== this.index - 1) : true;
- if (this.tree.allowDrop(dragNode, this.node, dragNodeScope) && isValidDropPointIndex) {
- if (this.tree.validateDrop) {
- this.tree.onNodeDrop.emit({
- originalEvent: event,
- dragNode: dragNode,
- dropNode: this.node,
- dropIndex: this.index,
- accept: function () {
- _this.processPointDrop(dragNode, dragNodeIndex, position);
- }
- });
- }
- else {
- this.processPointDrop(dragNode, dragNodeIndex, position);
- this.tree.onNodeDrop.emit({
- originalEvent: event,
- dragNode: dragNode,
- dropNode: this.node,
- dropIndex: this.index
- });
- }
- }
- this.draghoverPrev = false;
- this.draghoverNext = false;
- };
- UITreeNode.prototype.processPointDrop = function (dragNode, dragNodeIndex, position) {
- var newNodeList = this.node.parent ? this.node.parent.children : this.tree.value;
- this.tree.dragNodeSubNodes.splice(dragNodeIndex, 1);
- var dropIndex = this.index;
- if (position < 0) {
- dropIndex = (this.tree.dragNodeSubNodes === newNodeList) ? ((this.tree.dragNodeIndex > this.index) ? this.index : this.index - 1) : this.index;
- newNodeList.splice(dropIndex, 0, dragNode);
- }
- else {
- dropIndex = newNodeList.length;
- newNodeList.push(dragNode);
- }
- this.tree.dragDropService.stopDrag({
- node: dragNode,
- subNodes: this.node.parent ? this.node.parent.children : this.tree.value,
- index: dragNodeIndex
- });
- };
- UITreeNode.prototype.onDropPointDragOver = function (event) {
- event.dataTransfer.dropEffect = 'move';
- event.preventDefault();
- };
- UITreeNode.prototype.onDropPointDragEnter = function (event, position) {
- if (this.tree.allowDrop(this.tree.dragNode, this.node, this.tree.dragNodeScope)) {
- if (position < 0)
- this.draghoverPrev = true;
- else
- this.draghoverNext = true;
- }
- };
- UITreeNode.prototype.onDropPointDragLeave = function (event) {
- this.draghoverPrev = false;
- this.draghoverNext = false;
- };
- UITreeNode.prototype.onDragStart = function (event) {
- if (this.tree.draggableNodes && this.node.draggable !== false) {
- event.dataTransfer.setData("text", "data");
- this.tree.dragDropService.startDrag({
- tree: this,
- node: this.node,
- subNodes: this.node.parent ? this.node.parent.children : this.tree.value,
- index: this.index,
- scope: this.tree.draggableScope
- });
- }
- else {
- event.preventDefault();
- }
- };
- UITreeNode.prototype.onDragStop = function (event) {
- this.tree.dragDropService.stopDrag({
- node: this.node,
- subNodes: this.node.parent ? this.node.parent.children : this.tree.value,
- index: this.index
- });
- };
- UITreeNode.prototype.onDropNodeDragOver = function (event) {
- event.dataTransfer.dropEffect = 'move';
- if (this.tree.droppableNodes) {
- event.preventDefault();
- event.stopPropagation();
- }
- };
- UITreeNode.prototype.onDropNode = function (event) {
- var _this = this;
- if (this.tree.droppableNodes && this.node.droppable !== false) {
- event.preventDefault();
- event.stopPropagation();
- var dragNode_1 = this.tree.dragNode;
- if (this.tree.allowDrop(dragNode_1, this.node, this.tree.dragNodeScope)) {
- if (this.tree.validateDrop) {
- this.tree.onNodeDrop.emit({
- originalEvent: event,
- dragNode: dragNode_1,
- dropNode: this.node,
- index: this.index,
- accept: function () {
- _this.processNodeDrop(dragNode_1);
- }
- });
- }
- else {
- this.processNodeDrop(dragNode_1);
- this.tree.onNodeDrop.emit({
- originalEvent: event,
- dragNode: dragNode_1,
- dropNode: this.node,
- index: this.index
- });
- }
- }
- }
- this.draghoverNode = false;
- };
- UITreeNode.prototype.processNodeDrop = function (dragNode) {
- var dragNodeIndex = this.tree.dragNodeIndex;
- this.tree.dragNodeSubNodes.splice(dragNodeIndex, 1);
- if (this.node.children)
- this.node.children.push(dragNode);
- else
- this.node.children = [dragNode];
- this.tree.dragDropService.stopDrag({
- node: dragNode,
- subNodes: this.node.parent ? this.node.parent.children : this.tree.value,
- index: this.tree.dragNodeIndex
- });
- };
- UITreeNode.prototype.onDropNodeDragEnter = function (event) {
- if (this.tree.droppableNodes && this.node.droppable !== false && this.tree.allowDrop(this.tree.dragNode, this.node, this.tree.dragNodeScope)) {
- this.draghoverNode = true;
- }
- };
- UITreeNode.prototype.onDropNodeDragLeave = function (event) {
- if (this.tree.droppableNodes) {
- var rect = event.currentTarget.getBoundingClientRect();
- if (event.x > rect.left + rect.width || event.x < rect.left || event.y >= Math.floor(rect.top + rect.height) || event.y < rect.top) {
- this.draghoverNode = false;
- }
- }
- };
- UITreeNode.prototype.onKeyDown = function (event) {
- var nodeElement = event.target.parentElement.parentElement;
- if (nodeElement.nodeName !== 'P-TREENODE') {
- return;
- }
- switch (event.which) {
- //down arrow
- case 40:
- var listElement = (this.tree.droppableNodes) ? nodeElement.children[1].children[1] : nodeElement.children[0].children[1];
- if (listElement && listElement.children.length > 0) {
- this.focusNode(listElement.children[0]);
- }
- else {
- var nextNodeElement = nodeElement.nextElementSibling;
- if (nextNodeElement) {
- this.focusNode(nextNodeElement);
- }
- else {
- var nextSiblingAncestor = this.findNextSiblingOfAncestor(nodeElement);
- if (nextSiblingAncestor) {
- this.focusNode(nextSiblingAncestor);
- }
- }
- }
- event.preventDefault();
- break;
- //up arrow
- case 38:
- if (nodeElement.previousElementSibling) {
- this.focusNode(this.findLastVisibleDescendant(nodeElement.previousElementSibling));
- }
- else {
- var parentNodeElement = this.getParentNodeElement(nodeElement);
- if (parentNodeElement) {
- this.focusNode(parentNodeElement);
- }
- }
- event.preventDefault();
- break;
- //right arrow
- case 39:
- if (!this.node.expanded) {
- this.expand(event);
- }
- event.preventDefault();
- break;
- //left arrow
- case 37:
- if (this.node.expanded) {
- this.collapse(event);
- }
- else {
- var parentNodeElement = this.getParentNodeElement(nodeElement);
- if (parentNodeElement) {
- this.focusNode(parentNodeElement);
- }
- }
- event.preventDefault();
- break;
- //enter
- case 13:
- this.tree.onNodeClick(event, this.node);
- event.preventDefault();
- break;
- default:
- //no op
- break;
- }
- };
- UITreeNode.prototype.findNextSiblingOfAncestor = function (nodeElement) {
- var parentNodeElement = this.getParentNodeElement(nodeElement);
- if (parentNodeElement) {
- if (parentNodeElement.nextElementSibling)
- return parentNodeElement.nextElementSibling;
- else
- return this.findNextSiblingOfAncestor(parentNodeElement);
- }
- else {
- return null;
- }
- };
- UITreeNode.prototype.findLastVisibleDescendant = function (nodeElement) {
- var childrenListElement = nodeElement.children[0].children[1];
- if (childrenListElement && childrenListElement.children.length > 0) {
- var lastChildElement = childrenListElement.children[childrenListElement.children.length - 1];
- return this.findLastVisibleDescendant(lastChildElement);
- }
- else {
- return nodeElement;
- }
- };
- UITreeNode.prototype.getParentNodeElement = function (nodeElement) {
- var parentNodeElement = nodeElement.parentElement.parentElement.parentElement;
- return parentNodeElement.tagName === 'P-TREENODE' ? parentNodeElement : null;
- };
- UITreeNode.prototype.focusNode = function (element) {
- if (this.tree.droppableNodes)
- element.children[1].children[0].focus();
- else
- element.children[0].children[0].focus();
- };
- var UITreeNode_1;
- UITreeNode.ICON_CLASS = 'ui-treenode-icon ';
- __decorate([
- core_1.Input(),
- __metadata("design:type", Object)
- ], UITreeNode.prototype, "node", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Object)
- ], UITreeNode.prototype, "parentNode", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], UITreeNode.prototype, "root", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Number)
- ], UITreeNode.prototype, "index", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], UITreeNode.prototype, "firstChild", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], UITreeNode.prototype, "lastChild", void 0);
- UITreeNode = UITreeNode_1 = __decorate([
- core_1.Component({
- selector: 'p-treeNode',
- template: "\n <ng-template [ngIf]=\"node\">\n <li *ngIf=\"tree.droppableNodes\" class=\"ui-treenode-droppoint\" [ngClass]=\"{'ui-treenode-droppoint-active ui-state-highlight':draghoverPrev}\"\n (drop)=\"onDropPoint($event,-1)\" (dragover)=\"onDropPointDragOver($event)\" (dragenter)=\"onDropPointDragEnter($event,-1)\" (dragleave)=\"onDropPointDragLeave($event)\"></li>\n <li *ngIf=\"!tree.horizontal\" role=\"treeitem\" [ngClass]=\"['ui-treenode',node.styleClass||'', isLeaf() ? 'ui-treenode-leaf': '']\">\n <div class=\"ui-treenode-content\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeRightClick($event)\" (touchend)=\"onNodeTouchEnd()\"\n (drop)=\"onDropNode($event)\" (dragover)=\"onDropNodeDragOver($event)\" (dragenter)=\"onDropNodeDragEnter($event)\" (dragleave)=\"onDropNodeDragLeave($event)\"\n [draggable]=\"tree.draggableNodes\" (dragstart)=\"onDragStart($event)\" (dragend)=\"onDragStop($event)\" tabIndex=\"0\"\n [ngClass]=\"{'ui-treenode-selectable':tree.selectionMode && node.selectable !== false,'ui-treenode-dragover':draghoverNode, 'ui-treenode-content-selected':isSelected()}\" \n (keydown)=\"onKeyDown($event)\" [attr.aria-posinset]=\"this.index + 1\" [attr.aria-expanded]=\"this.node.expanded\" [attr.aria-selected]=\"isSelected()\">\n <span class=\"ui-tree-toggler pi pi-fw ui-unselectable-text\" [ngClass]=\"{'pi-caret-right':!node.expanded,'pi-caret-down':node.expanded}\"\n (click)=\"toggle($event)\"></span\n ><div class=\"ui-chkbox\" *ngIf=\"tree.selectionMode == 'checkbox'\"><div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" [ngClass]=\"{'ui-state-disabled': node.selectable === false}\">\n <span class=\"ui-chkbox-icon ui-clickable pi\"\n [ngClass]=\"{'pi-check':isSelected(),'pi-minus':node.partialSelected}\"></span></div></div\n ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n ><span class=\"ui-treenode-label ui-corner-all\"\n [ngClass]=\"{'ui-state-highlight':isSelected()}\">\n <span *ngIf=\"!tree.getTemplateForNode(node)\">{{node.label}}</span>\n <span *ngIf=\"tree.getTemplateForNode(node)\">\n <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n </span>\n </span>\n </div>\n <ul class=\"ui-treenode-children\" style=\"display: none;\" *ngIf=\"node.children && node.expanded\" [style.display]=\"node.expanded ? 'block' : 'none'\" role=\"group\">\n <p-treeNode *ngFor=\"let childNode of node.children;let firstChild=first;let lastChild=last; let index=index; trackBy: tree.nodeTrackBy\" [node]=\"childNode\" [parentNode]=\"node\"\n [firstChild]=\"firstChild\" [lastChild]=\"lastChild\" [index]=\"index\"></p-treeNode>\n </ul>\n </li>\n <li *ngIf=\"tree.droppableNodes&&lastChild\" class=\"ui-treenode-droppoint\" [ngClass]=\"{'ui-treenode-droppoint-active ui-state-highlight':draghoverNext}\"\n (drop)=\"onDropPoint($event,1)\" (dragover)=\"onDropPointDragOver($event)\" (dragenter)=\"onDropPointDragEnter($event,1)\" (dragleave)=\"onDropPointDragLeave($event)\"></li>\n <table *ngIf=\"tree.horizontal\" [class]=\"node.styleClass\">\n <tbody>\n <tr>\n <td class=\"ui-treenode-connector\" *ngIf=\"!root\">\n <table class=\"ui-treenode-connector-table\">\n <tbody>\n <tr>\n <td [ngClass]=\"{'ui-treenode-connector-line':!firstChild}\"></td>\n </tr>\n <tr>\n <td [ngClass]=\"{'ui-treenode-connector-line':!lastChild}\"></td>\n </tr>\n </tbody>\n </table>\n </td>\n <td class=\"ui-treenode\" [ngClass]=\"{'ui-treenode-collapsed':!node.expanded}\">\n <div class=\"ui-treenode-content ui-state-default ui-corner-all\"\n [ngClass]=\"{'ui-treenode-selectable':tree.selectionMode,'ui-state-highlight':isSelected()}\" (click)=\"onNodeClick($event)\" (contextmenu)=\"onNodeRightClick($event)\"\n (touchend)=\"onNodeTouchEnd()\">\n <span class=\"ui-tree-toggler pi pi-fw ui-unselectable-text\" [ngClass]=\"{'pi-plus':!node.expanded,'pi-minus':node.expanded}\" *ngIf=\"!isLeaf()\"\n (click)=\"toggle($event)\"></span\n ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n ><span class=\"ui-treenode-label ui-corner-all\">\n <span *ngIf=\"!tree.getTemplateForNode(node)\">{{node.label}}</span>\n <span *ngIf=\"tree.getTemplateForNode(node)\">\n <ng-container *ngTemplateOutlet=\"tree.getTemplateForNode(node); context: {$implicit: node}\"></ng-container>\n </span>\n </span>\n </div>\n </td>\n <td class=\"ui-treenode-children-container\" *ngIf=\"node.children && node.expanded\" [style.display]=\"node.expanded ? 'table-cell' : 'none'\">\n <div class=\"ui-treenode-children\">\n <p-treeNode *ngFor=\"let childNode of node.children;let firstChild=first;let lastChild=last; trackBy: tree.nodeTrackBy\" [node]=\"childNode\"\n [firstChild]=\"firstChild\" [lastChild]=\"lastChild\"></p-treeNode>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </ng-template>\n "
- }),
- __param(0, core_1.Inject(core_1.forwardRef(function () { return Tree; }))),
- __metadata("design:paramtypes", [Object])
- ], UITreeNode);
- return UITreeNode;
- }());
- exports.UITreeNode = UITreeNode;
- var Tree = /** @class */ (function () {
- function Tree(el, dragDropService) {
- this.el = el;
- this.dragDropService = dragDropService;
- this.selectionChange = new core_1.EventEmitter();
- this.onNodeSelect = new core_1.EventEmitter();
- this.onNodeUnselect = new core_1.EventEmitter();
- this.onNodeExpand = new core_1.EventEmitter();
- this.onNodeCollapse = new core_1.EventEmitter();
- this.onNodeContextMenuSelect = new core_1.EventEmitter();
- this.onNodeDrop = new core_1.EventEmitter();
- this.layout = 'vertical';
- this.metaKeySelection = true;
- this.propagateSelectionUp = true;
- this.propagateSelectionDown = true;
- this.loadingIcon = 'pi pi-spinner';
- this.emptyMessage = 'No records found';
- this.filterBy = 'label';
- this.filterMode = 'lenient';
- this.nodeTrackBy = function (index, item) { return item; };
- }
- Tree.prototype.ngOnInit = function () {
- var _this = this;
- if (this.droppableNodes) {
- this.dragStartSubscription = this.dragDropService.dragStart$.subscribe(function (event) {
- _this.dragNodeTree = event.tree;
- _this.dragNode = event.node;
- _this.dragNodeSubNodes = event.subNodes;
- _this.dragNodeIndex = event.index;
- _this.dragNodeScope = event.scope;
- });
- this.dragStopSubscription = this.dragDropService.dragStop$.subscribe(function (event) {
- _this.dragNodeTree = null;
- _this.dragNode = null;
- _this.dragNodeSubNodes = null;
- _this.dragNodeIndex = null;
- _this.dragNodeScope = null;
- _this.dragHover = false;
- });
- }
- };
- Object.defineProperty(Tree.prototype, "horizontal", {
- get: function () {
- return this.layout == 'horizontal';
- },
- enumerable: true,
- configurable: true
- });
- Tree.prototype.ngAfterContentInit = function () {
- var _this = this;
- if (this.templates.length) {
- this.templateMap = {};
- }
- this.templates.forEach(function (item) {
- _this.templateMap[item.name] = item.template;
- });
- };
- Tree.prototype.onNodeClick = function (event, node) {
- var eventTarget = event.target;
- if (api_1.DomHandler.hasClass(eventTarget, 'ui-tree-toggler')) {
- return;
- }
- else if (this.selectionMode) {
- if (node.selectable === false) {
- return;
- }
- if (this.hasFilteredNodes()) {
- node = this.getNodeWithKey(node.key, this.value);
- if (!node) {
- return;
- }
- }
- var index_1 = this.findIndexInSelection(node);
- var selected = (index_1 >= 0);
- if (this.isCheckboxSelectionMode()) {
- if (selected) {
- if (this.propagateSelectionDown)
- this.propagateDown(node, false);
- else
- this.selection = this.selection.filter(function (val, i) { return i != index_1; });
- if (this.propagateSelectionUp && node.parent) {
- this.propagateUp(node.parent, false);
- }
- this.selectionChange.emit(this.selection);
- this.onNodeUnselect.emit({ originalEvent: event, node: node });
- }
- else {
- if (this.propagateSelectionDown)
- this.propagateDown(node, true);
- else
- this.selection = (this.selection || []).concat([node]);
- if (this.propagateSelectionUp && node.parent) {
- this.propagateUp(node.parent, true);
- }
- this.selectionChange.emit(this.selection);
- this.onNodeSelect.emit({ originalEvent: event, node: node });
- }
- }
- else {
- var metaSelection = this.nodeTouched ? false : this.metaKeySelection;
- if (metaSelection) {
- var metaKey = (event.metaKey || event.ctrlKey);
- if (selected && metaKey) {
- if (this.isSingleSelectionMode()) {
- this.selectionChange.emit(null);
- }
- else {
- this.selection = this.selection.filter(function (val, i) { return i != index_1; });
- this.selectionChange.emit(this.selection);
- }
- this.onNodeUnselect.emit({ originalEvent: event, node: node });
- }
- else {
- if (this.isSingleSelectionMode()) {
- this.selectionChange.emit(node);
- }
- else if (this.isMultipleSelectionMode()) {
- this.selection = (!metaKey) ? [] : this.selection || [];
- this.selection = this.selection.concat([node]);
- this.selectionChange.emit(this.selection);
- }
- this.onNodeSelect.emit({ originalEvent: event, node: node });
- }
- }
- else {
- if (this.isSingleSelectionMode()) {
- if (selected) {
- this.selection = null;
- this.onNodeUnselect.emit({ originalEvent: event, node: node });
- }
- else {
- this.selection = node;
- this.onNodeSelect.emit({ originalEvent: event, node: node });
- }
- }
- else {
- if (selected) {
- this.selection = this.selection.filter(function (val, i) { return i != index_1; });
- this.onNodeUnselect.emit({ originalEvent: event, node: node });
- }
- else {
- this.selection = (this.selection || []).concat([node]);
- this.onNodeSelect.emit({ originalEvent: event, node: node });
- }
- }
- this.selectionChange.emit(this.selection);
- }
- }
- }
- this.nodeTouched = false;
- };
- Tree.prototype.onNodeTouchEnd = function () {
- this.nodeTouched = true;
- };
- Tree.prototype.onNodeRightClick = function (event, node) {
- if (this.contextMenu) {
- var eventTarget = event.target;
- if (eventTarget.className && eventTarget.className.indexOf('ui-tree-toggler') === 0) {
- return;
- }
- else {
- var index = this.findIndexInSelection(node);
- var selected = (index >= 0);
- if (!selected) {
- if (this.isSingleSelectionMode())
- this.selectionChange.emit(node);
- else
- this.selectionChange.emit([node]);
- }
- this.contextMenu.show(event);
- this.onNodeContextMenuSelect.emit({ originalEvent: event, node: node });
- }
- }
- };
- Tree.prototype.findIndexInSelection = function (node) {
- var index = -1;
- if (this.selectionMode && this.selection) {
- if (this.isSingleSelectionMode()) {
- var areNodesEqual = (this.selection.key && this.selection.key === node.key) || this.selection == node;
- index = areNodesEqual ? 0 : -1;
- }
- else {
- for (var i = 0; i < this.selection.length; i++) {
- var selectedNode = this.selection[i];
- var areNodesEqual = (selectedNode.key && selectedNode.key === node.key) || selectedNode == node;
- if (areNodesEqual) {
- index = i;
- break;
- }
- }
- }
- }
- return index;
- };
- Tree.prototype.syncNodeOption = function (node, parentNodes, option, value) {
- // to synchronize the node option between the filtered nodes and the original nodes(this.value)
- var _node = this.hasFilteredNodes() ? this.getNodeWithKey(node.key, parentNodes) : null;
- if (_node) {
- _node[option] = value || node[option];
- }
- };
- Tree.prototype.hasFilteredNodes = function () {
- return this.filter && this.filteredNodes && this.filteredNodes.length;
- };
- Tree.prototype.getNodeWithKey = function (key, nodes) {
- for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
- var node = nodes_1[_i];
- if (node.key === key) {
- return node;
- }
- if (node.children) {
- var matchedNode = this.getNodeWithKey(key, node.children);
- if (matchedNode) {
- return matchedNode;
- }
- }
- }
- };
- Tree.prototype.propagateUp = function (node, select) {
- if (node.children && node.children.length) {
- var selectedCount = 0;
- var childPartialSelected = false;
- for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
- var child = _a[_i];
- if (this.isSelected(child)) {
- selectedCount++;
- }
- else if (child.partialSelected) {
- childPartialSelected = true;
- }
- }
- if (select && selectedCount == node.children.length) {
- this.selection = (this.selection || []).concat([node]);
- node.partialSelected = false;
- }
- else {
- if (!select) {
- var index_2 = this.findIndexInSelection(node);
- if (index_2 >= 0) {
- this.selection = this.selection.filter(function (val, i) { return i != index_2; });
- }
- }
- if (childPartialSelected || selectedCount > 0 && selectedCount != node.children.length)
- node.partialSelected = true;
- else
- node.partialSelected = false;
- }
- this.syncNodeOption(node, this.filteredNodes, 'partialSelected');
- }
- var parent = node.parent;
- if (parent) {
- this.propagateUp(parent, select);
- }
- };
- Tree.prototype.propagateDown = function (node, select) {
- var index = this.findIndexInSelection(node);
- if (select && index == -1) {
- this.selection = (this.selection || []).concat([node]);
- }
- else if (!select && index > -1) {
- this.selection = this.selection.filter(function (val, i) { return i != index; });
- }
- node.partialSelected = false;
- this.syncNodeOption(node, this.filteredNodes, 'partialSelected');
- if (node.children && node.children.length) {
- for (var _i = 0, _a = node.children; _i < _a.length; _i++) {
- var child = _a[_i];
- this.propagateDown(child, select);
- }
- }
- };
- Tree.prototype.isSelected = function (node) {
- return this.findIndexInSelection(node) != -1;
- };
- Tree.prototype.isSingleSelectionMode = function () {
- return this.selectionMode && this.selectionMode == 'single';
- };
- Tree.prototype.isMultipleSelectionMode = function () {
- return this.selectionMode && this.selectionMode == 'multiple';
- };
- Tree.prototype.isCheckboxSelectionMode = function () {
- return this.selectionMode && this.selectionMode == 'checkbox';
- };
- Tree.prototype.isNodeLeaf = function (node) {
- return node.leaf == false ? false : !(node.children && node.children.length);
- };
- Tree.prototype.getRootNode = function () {
- return this.filteredNodes ? this.filteredNodes : this.value;
- };
- Tree.prototype.getTemplateForNode = function (node) {
- if (this.templateMap)
- return node.type ? this.templateMap[node.type] : this.templateMap['default'];
- else
- return null;
- };
- Tree.prototype.onDragOver = function (event) {
- if (this.droppableNodes && (!this.value || this.value.length === 0)) {
- event.dataTransfer.dropEffect = 'move';
- event.preventDefault();
- }
- };
- Tree.prototype.onDrop = function (event) {
- if (this.droppableNodes && (!this.value || this.value.length === 0)) {
- event.preventDefault();
- var dragNode = this.dragNode;
- if (this.allowDrop(dragNode, null, this.dragNodeScope)) {
- var dragNodeIndex = this.dragNodeIndex;
- this.dragNodeSubNodes.splice(dragNodeIndex, 1);
- this.value = this.value || [];
- this.value.push(dragNode);
- this.dragDropService.stopDrag({
- node: dragNode
- });
- }
- }
- };
- Tree.prototype.onDragEnter = function (event) {
- if (this.droppableNodes && this.allowDrop(this.dragNode, null, this.dragNodeScope)) {
- this.dragHover = true;
- }
- };
- Tree.prototype.onDragLeave = function (event) {
- if (this.droppableNodes) {
- var rect = event.currentTarget.getBoundingClientRect();
- if (event.x > rect.left + rect.width || event.x < rect.left || event.y > rect.top + rect.height || event.y < rect.top) {
- this.dragHover = false;
- }
- }
- };
- Tree.prototype.allowDrop = function (dragNode, dropNode, dragNodeScope) {
- if (!dragNode) {
- //prevent random html elements to be dragged
- return false;
- }
- else if (this.isValidDragScope(dragNodeScope)) {
- var allow = true;
- if (dropNode) {
- if (dragNode === dropNode) {
- allow = false;
- }
- else {
- var parent_1 = dropNode.parent;
- while (parent_1 != null) {
- if (parent_1 === dragNode) {
- allow = false;
- break;
- }
- parent_1 = parent_1.parent;
- }
- }
- }
- return allow;
- }
- else {
- return false;
- }
- };
- Tree.prototype.isValidDragScope = function (dragScope) {
- var dropScope = this.droppableScope;
- if (dropScope) {
- if (typeof dropScope === 'string') {
- if (typeof dragScope === 'string')
- return dropScope === dragScope;
- else if (dragScope instanceof Array)
- return dragScope.indexOf(dropScope) != -1;
- }
- else if (dropScope instanceof Array) {
- if (typeof dragScope === 'string') {
- return dropScope.indexOf(dragScope) != -1;
- }
- else if (dragScope instanceof Array) {
- for (var _i = 0, dropScope_1 = dropScope; _i < dropScope_1.length; _i++) {
- var s = dropScope_1[_i];
- for (var _a = 0, dragScope_1 = dragScope; _a < dragScope_1.length; _a++) {
- var ds = dragScope_1[_a];
- if (s === ds) {
- return true;
- }
- }
- }
- }
- }
- return false;
- }
- else {
- return true;
- }
- };
- Tree.prototype.onFilter = function (event) {
- var filterValue = event.target.value;
- if (filterValue === '') {
- this.filteredNodes = null;
- }
- else {
- this.filteredNodes = [];
- var searchFields = this.filterBy.split(',');
- var filterText = objectutils_1.ObjectUtils.removeAccents(filterValue).toLowerCase();
- var isStrictMode = this.filterMode === 'strict';
- for (var _i = 0, _a = this.value; _i < _a.length; _i++) {
- var node = _a[_i];
- var copyNode = __assign({}, node);
- var paramsWithoutNode = { searchFields: searchFields, filterText: filterText, isStrictMode: isStrictMode };
- if ((isStrictMode && (this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
- (!isStrictMode && (this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))) {
- this.filteredNodes.push(copyNode);
- }
- }
- }
- };
- Tree.prototype.findFilteredNodes = function (node, paramsWithoutNode) {
- if (node) {
- var matched = false;
- if (node.children) {
- var childNodes = node.children.slice();
- node.children = [];
- for (var _i = 0, childNodes_1 = childNodes; _i < childNodes_1.length; _i++) {
- var childNode = childNodes_1[_i];
- var copyChildNode = __assign({}, childNode);
- if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
- matched = true;
- node.children.push(copyChildNode);
- }
- }
- }
- if (matched) {
- node.expanded = true;
- return true;
- }
- }
- };
- Tree.prototype.isFilterMatched = function (node, _a) {
- var searchFields = _a.searchFields, filterText = _a.filterText, isStrictMode = _a.isStrictMode;
- var matched = false;
- for (var _i = 0, searchFields_1 = searchFields; _i < searchFields_1.length; _i++) {
- var field = searchFields_1[_i];
- var fieldValue = objectutils_1.ObjectUtils.removeAccents(String(objectutils_1.ObjectUtils.resolveFieldData(node, field))).toLowerCase();
- if (fieldValue.indexOf(filterText) > -1) {
- matched = true;
- }
- }
- if (!matched || (isStrictMode && !this.isNodeLeaf(node))) {
- matched = this.findFilteredNodes(node, { searchFields: searchFields, filterText: filterText, isStrictMode: isStrictMode }) || matched;
- }
- return matched;
- };
- Tree.prototype.getBlockableElement = function () {
- return this.el.nativeElement.children[0];
- };
- Tree.prototype.ngOnDestroy = function () {
- if (this.dragStartSubscription) {
- this.dragStartSubscription.unsubscribe();
- }
- if (this.dragStopSubscription) {
- this.dragStopSubscription.unsubscribe();
- }
- };
- __decorate([
- core_1.Input(),
- __metadata("design:type", Array)
- ], Tree.prototype, "value", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", String)
- ], Tree.prototype, "selectionMode", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Object)
- ], Tree.prototype, "selection", void 0);
- __decorate([
- core_1.Output(),
- __metadata("design:type", core_1.EventEmitter)
- ], Tree.prototype, "selectionChange", void 0);
- __decorate([
- core_1.Output(),
- __metadata("design:type", core_1.EventEmitter)
- ], Tree.prototype, "onNodeSelect", void 0);
- __decorate([
- core_1.Output(),
- __metadata("design:type", core_1.EventEmitter)
- ], Tree.prototype, "onNodeUnselect", void 0);
- __decorate([
- core_1.Output(),
- __metadata("design:type", core_1.EventEmitter)
- ], Tree.prototype, "onNodeExpand", void 0);
- __decorate([
- core_1.Output(),
- __metadata("design:type", core_1.EventEmitter)
- ], Tree.prototype, "onNodeCollapse", void 0);
- __decorate([
- core_1.Output(),
- __metadata("design:type", core_1.EventEmitter)
- ], Tree.prototype, "onNodeContextMenuSelect", void 0);
- __decorate([
- core_1.Output(),
- __metadata("design:type", core_1.EventEmitter)
- ], Tree.prototype, "onNodeDrop", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Object)
- ], Tree.prototype, "style", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", String)
- ], Tree.prototype, "styleClass", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Object)
- ], Tree.prototype, "contextMenu", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", String)
- ], Tree.prototype, "layout", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Object)
- ], Tree.prototype, "draggableScope", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Object)
- ], Tree.prototype, "droppableScope", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], Tree.prototype, "draggableNodes", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], Tree.prototype, "droppableNodes", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], Tree.prototype, "metaKeySelection", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], Tree.prototype, "propagateSelectionUp", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], Tree.prototype, "propagateSelectionDown", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], Tree.prototype, "loading", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", String)
- ], Tree.prototype, "loadingIcon", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", String)
- ], Tree.prototype, "emptyMessage", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", String)
- ], Tree.prototype, "ariaLabel", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", String)
- ], Tree.prototype, "ariaLabelledBy", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], Tree.prototype, "validateDrop", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Boolean)
- ], Tree.prototype, "filter", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", String)
- ], Tree.prototype, "filterBy", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", String)
- ], Tree.prototype, "filterMode", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", String)
- ], Tree.prototype, "filterPlaceholder", void 0);
- __decorate([
- core_1.Input(),
- __metadata("design:type", Function)
- ], Tree.prototype, "nodeTrackBy", void 0);
- __decorate([
- core_1.ContentChildren(shared_2.PrimeTemplate),
- __metadata("design:type", core_1.QueryList)
- ], Tree.prototype, "templates", void 0);
- Tree = __decorate([
- core_1.Component({
- selector: 'p-tree',
- template: "\n <div [ngClass]=\"{'ui-tree ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode,'ui-treenode-dragover':dragHover,'ui-tree-loading': loading}\" [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"!horizontal\"\n (drop)=\"onDrop($event)\" (dragover)=\"onDragOver($event)\" (dragenter)=\"onDragEnter($event)\" (dragleave)=\"onDragLeave($event)\">\n <div class=\"ui-tree-loading-mask ui-widget-overlay\" *ngIf=\"loading\"></div>\n <div class=\"ui-tree-loading-content\" *ngIf=\"loading\">\n <i [class]=\"'ui-tree-loading-icon pi-spin ' + loadingIcon\"></i>\n </div>\n <div *ngIf=\"filter\" class=\"ui-tree-filter-container\">\n <input #filter type=\"text\" autocomplete=\"off\" class=\"ui-tree-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.placeholder]=\"filterPlaceholder\"\n (keydown.enter)=\"$event.preventDefault()\" (input)=\"onFilter($event)\">\n <span class=\"ui-tree-filter-icon pi pi-search\"></span>\n </div>\n <ul class=\"ui-tree-container\" *ngIf=\"getRootNode()\" role=\"tree\" [attr.aria-label]=\"ariaLabel\" [attr.aria-labelledby]=\"ariaLabelledBy\">\n <p-treeNode *ngFor=\"let node of getRootNode(); let firstChild=first;let lastChild=last; let index=index; trackBy: nodeTrackBy\" [node]=\"node\"\n [firstChild]=\"firstChild\" [lastChild]=\"lastChild\" [index]=\"index\"></p-treeNode>\n </ul>\n <div class=\"ui-tree-empty-message\" *ngIf=\"!loading && (value == null || value.length === 0)\">{{emptyMessage}}</div>\n </div>\n <div [ngClass]=\"{'ui-tree ui-tree-horizontal ui-widget ui-widget-content ui-corner-all':true,'ui-tree-selectable':selectionMode}\" [ngStyle]=\"style\" [class]=\"styleClass\" *ngIf=\"horizontal\">\n <div class=\"ui-tree-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n <div class=\"ui-tree-loading-content\" *ngIf=\"loading\">\n <i [class]=\"'ui-tree-loading-icon pi-spin ' + loadingIcon\"></i>\n </div>\n <table *ngIf=\"value&&value[0]\">\n <p-treeNode [node]=\"value[0]\" [root]=\"true\"></p-treeNode>\n </table>\n <div class=\"ui-tree-empty-message\" *ngIf=\"!loading && (value == null || value.length === 0)\">{{emptyMessage}}</div>\n </div>\n "
- }),
- __param(1, core_2.Optional()),
- __metadata("design:paramtypes", [core_1.ElementRef, treedragdropservice_1.TreeDragDropService])
- ], Tree);
- return Tree;
- }());
- exports.Tree = Tree;
- var TreeModule = /** @class */ (function () {
- function TreeModule() {
- }
- TreeModule = __decorate([
- core_1.NgModule({
- imports: [common_1.CommonModule],
- exports: [Tree, shared_1.SharedModule],
- declarations: [Tree, UITreeNode]
- })
- ], TreeModule);
- return TreeModule;
- }());
- exports.TreeModule = TreeModule;
- //# sourceMappingURL=tree.js.map
|