@seniorsistemas/angular-components 17.27.2 → 17.28.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/seniorsistemas-angular-components.umd.js +457 -0
- package/bundles/seniorsistemas-angular-components.umd.js.map +1 -1
- package/bundles/seniorsistemas-angular-components.umd.min.js +2 -2
- package/bundles/seniorsistemas-angular-components.umd.min.js.map +1 -1
- package/components/index.d.ts +1 -0
- package/components/tree/Models/tree.models.d.ts +28 -0
- package/components/tree/components/tree-node-item/tree-node-item.component.d.ts +35 -0
- package/components/tree/index.d.ts +3 -0
- package/components/tree/tree.component.d.ts +33 -0
- package/components/tree/tree.module.d.ts +2 -0
- package/esm2015/components/index.js +2 -1
- package/esm2015/components/tree/Models/tree.models.js +1 -0
- package/esm2015/components/tree/components/tree-node-item/tree-node-item.component.js +154 -0
- package/esm2015/components/tree/index.js +3 -0
- package/esm2015/components/tree/tree.component.js +254 -0
- package/esm2015/components/tree/tree.module.js +20 -0
- package/esm2015/seniorsistemas-angular-components.js +3 -1
- package/esm5/components/index.js +2 -1
- package/esm5/components/tree/Models/tree.models.js +1 -0
- package/esm5/components/tree/components/tree-node-item/tree-node-item.component.js +169 -0
- package/esm5/components/tree/index.js +3 -0
- package/esm5/components/tree/tree.component.js +280 -0
- package/esm5/components/tree/tree.module.js +23 -0
- package/esm5/seniorsistemas-angular-components.js +3 -1
- package/fesm2015/seniorsistemas-angular-components.js +411 -2
- package/fesm2015/seniorsistemas-angular-components.js.map +1 -1
- package/fesm5/seniorsistemas-angular-components.js +455 -2
- package/fesm5/seniorsistemas-angular-components.js.map +1 -1
- package/package.json +1 -1
- package/seniorsistemas-angular-components.d.ts +2 -0
- package/seniorsistemas-angular-components.metadata.json +1 -1
|
@@ -23215,6 +23215,459 @@
|
|
|
23215
23215
|
return ToastModule;
|
|
23216
23216
|
}());
|
|
23217
23217
|
|
|
23218
|
+
var TreeComponent = /** @class */ (function () {
|
|
23219
|
+
function TreeComponent() {
|
|
23220
|
+
this.treeData = [];
|
|
23221
|
+
this._selected = [];
|
|
23222
|
+
this.loading = false;
|
|
23223
|
+
this.selectionMode = "single";
|
|
23224
|
+
this.showCheckbox = false;
|
|
23225
|
+
this.allExpanded = false;
|
|
23226
|
+
this.selectedChange = new core.EventEmitter();
|
|
23227
|
+
this.treeNodeItemClicked = new core.EventEmitter();
|
|
23228
|
+
this.treeNodeEdit = new core.EventEmitter();
|
|
23229
|
+
this.nodeExpanded = new core.EventEmitter();
|
|
23230
|
+
this.nodeCollapsed = new core.EventEmitter();
|
|
23231
|
+
}
|
|
23232
|
+
Object.defineProperty(TreeComponent.prototype, "selected", {
|
|
23233
|
+
get: function () {
|
|
23234
|
+
return this._selected;
|
|
23235
|
+
},
|
|
23236
|
+
set: function (value) {
|
|
23237
|
+
if (!value) {
|
|
23238
|
+
value = [];
|
|
23239
|
+
}
|
|
23240
|
+
if (!Array.isArray(value)) {
|
|
23241
|
+
value = [value];
|
|
23242
|
+
}
|
|
23243
|
+
this._selected = value;
|
|
23244
|
+
},
|
|
23245
|
+
enumerable: true,
|
|
23246
|
+
configurable: true
|
|
23247
|
+
});
|
|
23248
|
+
TreeComponent.prototype.ngOnChanges = function (changes) {
|
|
23249
|
+
this.onChanges(changes);
|
|
23250
|
+
};
|
|
23251
|
+
TreeComponent.prototype.onTreeNodeItemClicked = function (_a) {
|
|
23252
|
+
var item = _a.item;
|
|
23253
|
+
this.treeNodeItemClicked.emit(parseInternalTreeNodeItem(item));
|
|
23254
|
+
this.toggleChecked(item);
|
|
23255
|
+
};
|
|
23256
|
+
TreeComponent.prototype.onTreeNodeEdit = function (payload) {
|
|
23257
|
+
var revertAction = payload.revertAction, item = payload.item, newValue = payload.newValue, previousValue = payload.previousValue;
|
|
23258
|
+
this.treeNodeEdit.emit({
|
|
23259
|
+
revertAction: revertAction,
|
|
23260
|
+
item: parseInternalTreeNodeItem(item),
|
|
23261
|
+
newValue: newValue,
|
|
23262
|
+
previousValue: previousValue,
|
|
23263
|
+
});
|
|
23264
|
+
};
|
|
23265
|
+
TreeComponent.prototype.onNodeExpanded = function (item) {
|
|
23266
|
+
this.nodeExpanded.emit(parseInternalTreeNodeItem(item));
|
|
23267
|
+
};
|
|
23268
|
+
TreeComponent.prototype.onNodeCollapsed = function (item) {
|
|
23269
|
+
this.nodeCollapsed.emit(parseInternalTreeNodeItem(item));
|
|
23270
|
+
};
|
|
23271
|
+
TreeComponent.prototype.toggleChecked = function (treeNodeItem) {
|
|
23272
|
+
var elementCheckState = !treeNodeItem.checked;
|
|
23273
|
+
if (!this.multiple) {
|
|
23274
|
+
flattenTree(this.treeData).forEach(function (x) { return (x.checked = false); });
|
|
23275
|
+
this.selected = [treeNodeItem];
|
|
23276
|
+
}
|
|
23277
|
+
treeNodeItem.checked = elementCheckState;
|
|
23278
|
+
if (this.multiple) {
|
|
23279
|
+
this.checkTreeDataChildren(treeNodeItem);
|
|
23280
|
+
}
|
|
23281
|
+
this.setSelected();
|
|
23282
|
+
};
|
|
23283
|
+
TreeComponent.prototype.checkTreeDataChildren = function (selectedTreeNode) {
|
|
23284
|
+
var parentChecked = selectedTreeNode.checked;
|
|
23285
|
+
if (selectedTreeNode.children) {
|
|
23286
|
+
selectedTreeNode.children.forEach(function (item) {
|
|
23287
|
+
var childrens = flattenTree(item.children || []);
|
|
23288
|
+
item.checked = parentChecked;
|
|
23289
|
+
childrens.forEach(function (child) { return (child.checked = parentChecked); });
|
|
23290
|
+
});
|
|
23291
|
+
}
|
|
23292
|
+
var getNodeChildrenSummary = function (node) {
|
|
23293
|
+
var allChildrenChecked = node.children.every(function (y) { return y.checked === true; });
|
|
23294
|
+
var someChildrenChecked = node.children.some(function (y) { return y.checked === true || y.checked === null; });
|
|
23295
|
+
var allChildrenUnchecked = node.children.every(function (y) { return y.checked === false || y.checked === undefined; });
|
|
23296
|
+
return { allChildrenChecked: allChildrenChecked, someChildrenChecked: someChildrenChecked, allChildrenUnchecked: allChildrenUnchecked };
|
|
23297
|
+
};
|
|
23298
|
+
var updateCheckedStateRecursively = function (node) {
|
|
23299
|
+
var _a;
|
|
23300
|
+
if (!((_a = node.children) === null || _a === void 0 ? void 0 : _a.length))
|
|
23301
|
+
return;
|
|
23302
|
+
node.children.forEach(updateCheckedStateRecursively);
|
|
23303
|
+
var _b = getNodeChildrenSummary(node), allChildrenChecked = _b.allChildrenChecked, someChildrenChecked = _b.someChildrenChecked, allChildrenUnchecked = _b.allChildrenUnchecked;
|
|
23304
|
+
if (allChildrenChecked) {
|
|
23305
|
+
node.checked = true;
|
|
23306
|
+
}
|
|
23307
|
+
else if (someChildrenChecked) {
|
|
23308
|
+
node.checked = null;
|
|
23309
|
+
}
|
|
23310
|
+
else if (allChildrenUnchecked) {
|
|
23311
|
+
node.checked = false;
|
|
23312
|
+
}
|
|
23313
|
+
};
|
|
23314
|
+
this.treeData.forEach(updateCheckedStateRecursively);
|
|
23315
|
+
};
|
|
23316
|
+
TreeComponent.prototype.setSelected = function () {
|
|
23317
|
+
var selected = this.selectedElements;
|
|
23318
|
+
this.selected = __spread(selected);
|
|
23319
|
+
this.selectedChange.emit(selected);
|
|
23320
|
+
};
|
|
23321
|
+
TreeComponent.prototype.onChanges = function (changes) {
|
|
23322
|
+
var allExpandedChanges = changes.allExpanded;
|
|
23323
|
+
var _checkIsFirstChangeWithValue = function (value) {
|
|
23324
|
+
var _a;
|
|
23325
|
+
if (!changes[value]) {
|
|
23326
|
+
return;
|
|
23327
|
+
}
|
|
23328
|
+
return (!changes[value].previousValue || changes[value].previousValue.length === 0) && ((_a = changes[value].currentValue) === null || _a === void 0 ? void 0 : _a.length) > 0;
|
|
23329
|
+
};
|
|
23330
|
+
if (_checkIsFirstChangeWithValue('selected')) {
|
|
23331
|
+
this.syncSelectedChanges();
|
|
23332
|
+
}
|
|
23333
|
+
if (_checkIsFirstChangeWithValue('treeData')) {
|
|
23334
|
+
var isAllExpanded = this.allExpanded;
|
|
23335
|
+
if (isAllExpanded) {
|
|
23336
|
+
this.expandAll();
|
|
23337
|
+
}
|
|
23338
|
+
}
|
|
23339
|
+
if (allExpandedChanges) {
|
|
23340
|
+
if (this.allExpanded) {
|
|
23341
|
+
this.expandAll();
|
|
23342
|
+
}
|
|
23343
|
+
else {
|
|
23344
|
+
this.collapseAll();
|
|
23345
|
+
}
|
|
23346
|
+
}
|
|
23347
|
+
};
|
|
23348
|
+
TreeComponent.prototype.syncSelectedChanges = function () {
|
|
23349
|
+
var _this = this;
|
|
23350
|
+
var treeFlatten = flattenTree(this.treeData);
|
|
23351
|
+
this.selected.forEach(function (selectedItem) {
|
|
23352
|
+
var item = treeFlatten.find(function (item) { return item.id === selectedItem.id; });
|
|
23353
|
+
if (item) {
|
|
23354
|
+
item.checked = true;
|
|
23355
|
+
}
|
|
23356
|
+
if (item.children && _this.multiple) {
|
|
23357
|
+
item.children.forEach(function (child) {
|
|
23358
|
+
child.checked = true;
|
|
23359
|
+
var existChildInSelectedList = _this.selected.some(function (item) { return item.id === child.id; });
|
|
23360
|
+
if (!existChildInSelectedList) {
|
|
23361
|
+
_this.selected.push(child);
|
|
23362
|
+
}
|
|
23363
|
+
});
|
|
23364
|
+
}
|
|
23365
|
+
});
|
|
23366
|
+
var selectedElements = this.selectedElements;
|
|
23367
|
+
var selectedElementsNotInSelectedList = selectedElements.filter(function (x) { return !_this.selected.some(function (y) { return y.id === x.id; }); });
|
|
23368
|
+
selectedElementsNotInSelectedList.forEach(function (item) {
|
|
23369
|
+
_this.checkTreeDataChildren(item);
|
|
23370
|
+
});
|
|
23371
|
+
this.setSelected();
|
|
23372
|
+
};
|
|
23373
|
+
TreeComponent.prototype.collapseAll = function () {
|
|
23374
|
+
var flatten = flattenTree(this.treeData);
|
|
23375
|
+
flatten.forEach(function (item) {
|
|
23376
|
+
item.isExpanded = false;
|
|
23377
|
+
});
|
|
23378
|
+
};
|
|
23379
|
+
TreeComponent.prototype.expandAll = function () {
|
|
23380
|
+
var flatten = flattenTree(this.treeData);
|
|
23381
|
+
flatten.forEach(function (item) {
|
|
23382
|
+
item.isExpanded = true;
|
|
23383
|
+
});
|
|
23384
|
+
};
|
|
23385
|
+
Object.defineProperty(TreeComponent.prototype, "selectedElements", {
|
|
23386
|
+
get: function () {
|
|
23387
|
+
return flattenTree(this.treeData)
|
|
23388
|
+
.filter(function (x) { return x.checked; })
|
|
23389
|
+
.filter(function (x) { var _a; return x.leaf !== true && !((_a = x.children) === null || _a === void 0 ? void 0 : _a.length); });
|
|
23390
|
+
},
|
|
23391
|
+
enumerable: true,
|
|
23392
|
+
configurable: true
|
|
23393
|
+
});
|
|
23394
|
+
Object.defineProperty(TreeComponent.prototype, "multiple", {
|
|
23395
|
+
get: function () {
|
|
23396
|
+
return this.selectionMode === "multiple";
|
|
23397
|
+
},
|
|
23398
|
+
enumerable: true,
|
|
23399
|
+
configurable: true
|
|
23400
|
+
});
|
|
23401
|
+
__decorate([
|
|
23402
|
+
core.Input()
|
|
23403
|
+
], TreeComponent.prototype, "treeData", void 0);
|
|
23404
|
+
__decorate([
|
|
23405
|
+
core.Input()
|
|
23406
|
+
], TreeComponent.prototype, "selected", null);
|
|
23407
|
+
__decorate([
|
|
23408
|
+
core.Input()
|
|
23409
|
+
], TreeComponent.prototype, "loading", void 0);
|
|
23410
|
+
__decorate([
|
|
23411
|
+
core.Input()
|
|
23412
|
+
], TreeComponent.prototype, "selectionMode", void 0);
|
|
23413
|
+
__decorate([
|
|
23414
|
+
core.Input()
|
|
23415
|
+
], TreeComponent.prototype, "showCheckbox", void 0);
|
|
23416
|
+
__decorate([
|
|
23417
|
+
core.Input()
|
|
23418
|
+
], TreeComponent.prototype, "allExpanded", void 0);
|
|
23419
|
+
__decorate([
|
|
23420
|
+
core.Output()
|
|
23421
|
+
], TreeComponent.prototype, "selectedChange", void 0);
|
|
23422
|
+
__decorate([
|
|
23423
|
+
core.Output()
|
|
23424
|
+
], TreeComponent.prototype, "treeNodeItemClicked", void 0);
|
|
23425
|
+
__decorate([
|
|
23426
|
+
core.Output()
|
|
23427
|
+
], TreeComponent.prototype, "treeNodeEdit", void 0);
|
|
23428
|
+
__decorate([
|
|
23429
|
+
core.Output()
|
|
23430
|
+
], TreeComponent.prototype, "nodeExpanded", void 0);
|
|
23431
|
+
__decorate([
|
|
23432
|
+
core.Output()
|
|
23433
|
+
], TreeComponent.prototype, "nodeCollapsed", void 0);
|
|
23434
|
+
TreeComponent = __decorate([
|
|
23435
|
+
core.Component({
|
|
23436
|
+
selector: "s-tree",
|
|
23437
|
+
template: "<div class=\"tree\" *sLoadingState=\"loading\">\n <s-tree-node-item\n *ngFor=\"let item of treeData\"\n [showCheckbox]=\"showCheckbox\"\n [treeNodeItem]=\"item\"\n (nodeExpanded)=\"onNodeExpanded($event)\"\n (nodeCollapsed)=\"onNodeCollapsed($event)\"\n (treeNodeEdit)=\"onTreeNodeEdit($event)\"\n (treeNodeItemClicked)=\"onTreeNodeItemClicked($event)\">\n </s-tree-node-item>\n</div>\n",
|
|
23438
|
+
styles: [".tree{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:5px;border:1px solid #ddd;border-radius:4px;padding:15px;margin:15px}"]
|
|
23439
|
+
})
|
|
23440
|
+
], TreeComponent);
|
|
23441
|
+
return TreeComponent;
|
|
23442
|
+
}());
|
|
23443
|
+
var flattenTree = function (tree) {
|
|
23444
|
+
var result = [];
|
|
23445
|
+
function traverse(nodes) {
|
|
23446
|
+
var e_1, _a;
|
|
23447
|
+
try {
|
|
23448
|
+
for (var nodes_1 = __values(nodes), nodes_1_1 = nodes_1.next(); !nodes_1_1.done; nodes_1_1 = nodes_1.next()) {
|
|
23449
|
+
var node = nodes_1_1.value;
|
|
23450
|
+
result.push(node);
|
|
23451
|
+
if (node.children && node.children.length) {
|
|
23452
|
+
traverse(node.children);
|
|
23453
|
+
}
|
|
23454
|
+
}
|
|
23455
|
+
}
|
|
23456
|
+
catch (e_1_1) { e_1 = { error: e_1_1 }; }
|
|
23457
|
+
finally {
|
|
23458
|
+
try {
|
|
23459
|
+
if (nodes_1_1 && !nodes_1_1.done && (_a = nodes_1.return)) _a.call(nodes_1);
|
|
23460
|
+
}
|
|
23461
|
+
finally { if (e_1) throw e_1.error; }
|
|
23462
|
+
}
|
|
23463
|
+
}
|
|
23464
|
+
traverse(tree);
|
|
23465
|
+
return result;
|
|
23466
|
+
};
|
|
23467
|
+
var ɵ0$4 = flattenTree;
|
|
23468
|
+
var parseInternalTreeNodeItem = function (internalTreeNodeItem) {
|
|
23469
|
+
var id = internalTreeNodeItem.id, label = internalTreeNodeItem.label, icon = internalTreeNodeItem.icon, checked = internalTreeNodeItem.checked, isExpanded = internalTreeNodeItem.isExpanded, payload = internalTreeNodeItem.payload, editable = internalTreeNodeItem.editable, children = internalTreeNodeItem.children;
|
|
23470
|
+
var object = {
|
|
23471
|
+
id: id,
|
|
23472
|
+
label: label,
|
|
23473
|
+
icon: icon,
|
|
23474
|
+
checked: checked,
|
|
23475
|
+
isExpanded: isExpanded,
|
|
23476
|
+
payload: payload,
|
|
23477
|
+
editable: editable,
|
|
23478
|
+
_children: children === null || children === void 0 ? void 0 : children.map(parseInternalTreeNodeItem),
|
|
23479
|
+
get children() {
|
|
23480
|
+
return this._children;
|
|
23481
|
+
},
|
|
23482
|
+
set children(value) {
|
|
23483
|
+
this._children = value;
|
|
23484
|
+
internalTreeNodeItem.children = value;
|
|
23485
|
+
},
|
|
23486
|
+
};
|
|
23487
|
+
Object.defineProperty(object, "_children", {
|
|
23488
|
+
enumerable: false,
|
|
23489
|
+
});
|
|
23490
|
+
return object;
|
|
23491
|
+
};
|
|
23492
|
+
var ɵ1$3 = parseInternalTreeNodeItem;
|
|
23493
|
+
|
|
23494
|
+
var TreeNodeItemComponent = /** @class */ (function () {
|
|
23495
|
+
function TreeNodeItemComponent(cdr, translateService) {
|
|
23496
|
+
this.cdr = cdr;
|
|
23497
|
+
this.translateService = translateService;
|
|
23498
|
+
this.ariaLevel = 0;
|
|
23499
|
+
this.showCheckbox = false;
|
|
23500
|
+
this.treeNodeItemClicked = new core.EventEmitter();
|
|
23501
|
+
this.treeNodeEdit = new core.EventEmitter();
|
|
23502
|
+
this.nodeExpanded = new core.EventEmitter();
|
|
23503
|
+
this.nodeCollapsed = new core.EventEmitter();
|
|
23504
|
+
}
|
|
23505
|
+
Object.defineProperty(TreeNodeItemComponent.prototype, "hasChildren", {
|
|
23506
|
+
get: function () {
|
|
23507
|
+
return this.treeNodeItem.children && this.treeNodeItem.children.length > 0;
|
|
23508
|
+
},
|
|
23509
|
+
enumerable: true,
|
|
23510
|
+
configurable: true
|
|
23511
|
+
});
|
|
23512
|
+
Object.defineProperty(TreeNodeItemComponent.prototype, "editable", {
|
|
23513
|
+
get: function () {
|
|
23514
|
+
var _a;
|
|
23515
|
+
return ((_a = this.treeNodeItem) === null || _a === void 0 ? void 0 : _a.editable) || false;
|
|
23516
|
+
},
|
|
23517
|
+
enumerable: true,
|
|
23518
|
+
configurable: true
|
|
23519
|
+
});
|
|
23520
|
+
Object.defineProperty(TreeNodeItemComponent.prototype, "ariaLabel", {
|
|
23521
|
+
get: function () {
|
|
23522
|
+
return this.translateService.instant('platform.angular_components.select') + " " + this.treeNodeItem.label;
|
|
23523
|
+
},
|
|
23524
|
+
enumerable: true,
|
|
23525
|
+
configurable: true
|
|
23526
|
+
});
|
|
23527
|
+
TreeNodeItemComponent.prototype.expandNode = function () {
|
|
23528
|
+
if (this.hasChildren && !this.treeNodeItem.isExpanded) {
|
|
23529
|
+
this.toggleExpanded(this.treeNodeItem);
|
|
23530
|
+
}
|
|
23531
|
+
};
|
|
23532
|
+
TreeNodeItemComponent.prototype.collapseNode = function () {
|
|
23533
|
+
if (this.hasChildren && this.treeNodeItem.isExpanded) {
|
|
23534
|
+
this.toggleExpanded(this.treeNodeItem);
|
|
23535
|
+
}
|
|
23536
|
+
};
|
|
23537
|
+
TreeNodeItemComponent.prototype.onCheckboxEnter = function (node) {
|
|
23538
|
+
var newState = node.checked === true ? false : true;
|
|
23539
|
+
node.checked = newState;
|
|
23540
|
+
this.treeNodeItemClicked.emit({ item: node, event: new KeyboardEvent('keydown', { key: 'Enter' }) });
|
|
23541
|
+
};
|
|
23542
|
+
TreeNodeItemComponent.prototype.handleTreeNodeItemClick = function (event, treeNodeItem) {
|
|
23543
|
+
var item = treeNodeItem || this.treeNodeItem;
|
|
23544
|
+
this.treeNodeItemClicked.emit({ item: item, event: event });
|
|
23545
|
+
};
|
|
23546
|
+
TreeNodeItemComponent.prototype.handleTreeNodeItemClicked = function (_a) {
|
|
23547
|
+
var event = _a.event, item = _a.item;
|
|
23548
|
+
if (item.isEditing) {
|
|
23549
|
+
return;
|
|
23550
|
+
}
|
|
23551
|
+
this.handleTreeNodeItemClick(event, item);
|
|
23552
|
+
};
|
|
23553
|
+
TreeNodeItemComponent.prototype.toggleExpanded = function (treeNodeItem) {
|
|
23554
|
+
treeNodeItem.isExpanded = !treeNodeItem.isExpanded;
|
|
23555
|
+
if (treeNodeItem.isExpanded) {
|
|
23556
|
+
this.nodeExpanded.emit(treeNodeItem);
|
|
23557
|
+
}
|
|
23558
|
+
else {
|
|
23559
|
+
this.nodeCollapsed.emit(treeNodeItem);
|
|
23560
|
+
}
|
|
23561
|
+
};
|
|
23562
|
+
TreeNodeItemComponent.prototype.toggleEditing = function ($event) {
|
|
23563
|
+
var _a;
|
|
23564
|
+
$event.stopPropagation();
|
|
23565
|
+
this.treeNodeItem.isEditing = !this.treeNodeItem.isEditing;
|
|
23566
|
+
this.cdr.detectChanges();
|
|
23567
|
+
if (this.treeNodeItem.isEditing) {
|
|
23568
|
+
this.treeNodeItem.editNewValue = this.treeNodeItem.label;
|
|
23569
|
+
var input = (_a = this.input) === null || _a === void 0 ? void 0 : _a.nativeElement;
|
|
23570
|
+
input === null || input === void 0 ? void 0 : input.focus();
|
|
23571
|
+
}
|
|
23572
|
+
};
|
|
23573
|
+
TreeNodeItemComponent.prototype.cancelEdit = function ($event) {
|
|
23574
|
+
$event.stopPropagation();
|
|
23575
|
+
this.treeNodeItem.isEditing = false;
|
|
23576
|
+
this.treeNodeItem.editNewValue = '';
|
|
23577
|
+
this.treeNodeItem.editPreviousValue = '';
|
|
23578
|
+
this.cdr.detectChanges();
|
|
23579
|
+
};
|
|
23580
|
+
TreeNodeItemComponent.prototype.saveEdit = function ($event) {
|
|
23581
|
+
var _this = this;
|
|
23582
|
+
$event.stopPropagation();
|
|
23583
|
+
this.treeNodeItem.isEditing = false;
|
|
23584
|
+
if (!this.treeNodeItem.editNewValue) {
|
|
23585
|
+
return;
|
|
23586
|
+
}
|
|
23587
|
+
this.treeNodeItem.editPreviousValue = this.treeNodeItem.label;
|
|
23588
|
+
this.treeNodeItem.label = this.treeNodeItem.editNewValue;
|
|
23589
|
+
var revertAction = function () {
|
|
23590
|
+
_this.treeNodeItem.label = _this.treeNodeItem.editPreviousValue;
|
|
23591
|
+
_this.treeNodeItem.isEditing = false;
|
|
23592
|
+
_this.cdr.detectChanges();
|
|
23593
|
+
};
|
|
23594
|
+
this.treeNodeEdit.emit({ revertAction: revertAction, item: this.treeNodeItem, newValue: this.treeNodeItem.editNewValue, previousValue: this.treeNodeItem.editPreviousValue });
|
|
23595
|
+
};
|
|
23596
|
+
TreeNodeItemComponent.prototype.treeNodeEditChildEvent = function (payload) {
|
|
23597
|
+
this.treeNodeEdit.emit(payload);
|
|
23598
|
+
};
|
|
23599
|
+
TreeNodeItemComponent.ctorParameters = function () { return [
|
|
23600
|
+
{ type: core.ChangeDetectorRef },
|
|
23601
|
+
{ type: core$1.TranslateService }
|
|
23602
|
+
]; };
|
|
23603
|
+
__decorate([
|
|
23604
|
+
core.Input()
|
|
23605
|
+
], TreeNodeItemComponent.prototype, "ariaLevel", void 0);
|
|
23606
|
+
__decorate([
|
|
23607
|
+
core.Input()
|
|
23608
|
+
], TreeNodeItemComponent.prototype, "showCheckbox", void 0);
|
|
23609
|
+
__decorate([
|
|
23610
|
+
core.Input()
|
|
23611
|
+
], TreeNodeItemComponent.prototype, "treeNodeItem", void 0);
|
|
23612
|
+
__decorate([
|
|
23613
|
+
core.Output()
|
|
23614
|
+
], TreeNodeItemComponent.prototype, "treeNodeItemClicked", void 0);
|
|
23615
|
+
__decorate([
|
|
23616
|
+
core.Output()
|
|
23617
|
+
], TreeNodeItemComponent.prototype, "treeNodeEdit", void 0);
|
|
23618
|
+
__decorate([
|
|
23619
|
+
core.Output()
|
|
23620
|
+
], TreeNodeItemComponent.prototype, "nodeExpanded", void 0);
|
|
23621
|
+
__decorate([
|
|
23622
|
+
core.Output()
|
|
23623
|
+
], TreeNodeItemComponent.prototype, "nodeCollapsed", void 0);
|
|
23624
|
+
__decorate([
|
|
23625
|
+
core.ViewChild('input', { read: core.ElementRef })
|
|
23626
|
+
], TreeNodeItemComponent.prototype, "input", void 0);
|
|
23627
|
+
TreeNodeItemComponent = __decorate([
|
|
23628
|
+
core.Component({
|
|
23629
|
+
selector: 's-tree-node-item',
|
|
23630
|
+
template: "<div\n *ngIf=\"treeNodeItem\"\n class=\"tree-node-item\"\n role=\"treeitem\"\n [class.tree-node-item-selected]=\"treeNodeItem.checked\"\n [class.selectable]=\"hasChildren\"\n [attr.aria-expanded]=\"hasChildren ? treeNodeItem.isExpanded : null\"\n [attr.aria-selected]=\"treeNodeItem.checked === true\"\n [attr.aria-label]=\"treeNodeItem.label\"\n [attr.aria-level]=\"ariaLevel\"\n tabindex=\"0\"\n (keydown.enter)=\"handleTreeNodeItemClick($event)\"\n (keydown.arrowRight)=\"expandNode()\"\n (keydown.arrowLeft)=\"collapseNode()\"\n>\n <div class=\"arrow\" *ngIf=\"hasChildren || treeNodeItem.leaf === true\" (click)=\"toggleExpanded(treeNodeItem)\">\n <i [class]=\"treeNodeItem.collapsedIcon || 'fas fa-chevron-right'\" *ngIf=\"!treeNodeItem.isExpanded\"></i>\n <i [class]=\"treeNodeItem.expandedIcon || 'fas fa-chevron-down'\" *ngIf=\"treeNodeItem.isExpanded\"></i>\n </div>\n\n <div class=\"tree-node-item-text\" (click)=\"handleTreeNodeItemClick($event)\">\n <span class=\"tree-node-item-text-icon\" *ngIf=\"treeNodeItem.icon || treeNodeItem.isEditing\">\n <i [class]=\"treeNodeItem.icon\" *ngIf=\"treeNodeItem.icon && !treeNodeItem.isEditing\"></i>\n <i class=\"fas fa-edit edit\" *ngIf=\"treeNodeItem.isEditing\" (click)=\"saveEdit($event)\"></i>\n </span>\n\n <span class=\"tree-node-item-text-checkbox\" *ngIf=\"showCheckbox && !treeNodeItem.isEditing\">\n <input\n type=\"checkbox\"\n [checked]=\"treeNodeItem.checked === true\"\n [indeterminate]=\"treeNodeItem.checked === null\"\n [attr.aria-checked]=\"treeNodeItem.checked === null ? 'mixed' : treeNodeItem.checked\"\n [attr.aria-label]=\"ariaLabel\"\n role=\"checkbox\"\n tabindex=\"0\"\n (keydown.enter)=\"onCheckboxEnter(treeNodeItem)\"\n />\n </span>\n\n <span class=\"tree-node-item-text-label\">\n <ng-container *ngIf=\"treeNodeItem.isEditing\">\n <input\n #input\n type=\"text\"\n pInputText\n class=\"tree-node-item-text-input\"\n [(ngModel)]=\"treeNodeItem.editNewValue\"\n (keydown.enter)=\"saveEdit($event)\"\n (keydown.escape)=\"cancelEdit($event)\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Editar nome do item\"\n aria-live=\"polite\"\n />\n </ng-container>\n <ng-container *ngIf=\"!treeNodeItem.isEditing\">\n {{ treeNodeItem.label }}\n </ng-container>\n </span>\n\n <span class=\"tree-node-item-text-editable\" *ngIf=\"editable\">\n <i class=\"fas fa-pencil-alt\" (click)=\"toggleEditing($event)\" aria-label=\"Editar item\" tabindex=\"0\"></i>\n </span>\n </div>\n</div>\n\n<div\n *ngIf=\"hasChildren && treeNodeItem.isExpanded\"\n @fadeExpand\n class=\"child\"\n role=\"group\"\n @childrenAnimation\n>\n <s-tree-node-item\n *ngFor=\"let child of treeNodeItem.children\"\n [showCheckbox]=\"showCheckbox\"\n [treeNodeItem]=\"child\"\n [ariaLevel]=\"ariaLevel + 1\"\n (treeNodeItemClicked)=\"handleTreeNodeItemClicked($event)\"\n (treeNodeEdit)=\"treeNodeEditChildEvent($event)\"\n (nodeExpanded)=\"nodeExpanded.emit($event)\"\n (nodeCollapsed)=\"nodeCollapsed.emit($event)\"\n class=\"child-item\"\n >\n </s-tree-node-item>\n</div>\n",
|
|
23631
|
+
animations: [
|
|
23632
|
+
animations.trigger('fadeExpand', [
|
|
23633
|
+
animations.transition(':enter', [
|
|
23634
|
+
animations.style({ height: '0px', opacity: 0, overflow: 'hidden' }),
|
|
23635
|
+
animations.animate('200ms ease-out', animations.style({ height: '*', opacity: 1 }))
|
|
23636
|
+
]),
|
|
23637
|
+
animations.transition(':leave', [
|
|
23638
|
+
animations.animate('150ms ease-in', animations.style({ height: '0px', opacity: 0 }))
|
|
23639
|
+
])
|
|
23640
|
+
]),
|
|
23641
|
+
animations.trigger('childrenAnimation', [
|
|
23642
|
+
animations.transition(':enter', [
|
|
23643
|
+
animations.query(':enter', [
|
|
23644
|
+
animations.style({ opacity: 0, transform: 'translateY(-10px)' }),
|
|
23645
|
+
animations.stagger(60, [
|
|
23646
|
+
animations.animate('200ms ease-out', animations.style({ opacity: 1, transform: 'translateY(0)' }))
|
|
23647
|
+
])
|
|
23648
|
+
], { optional: true })
|
|
23649
|
+
])
|
|
23650
|
+
])
|
|
23651
|
+
],
|
|
23652
|
+
styles: [".tree-node-item{width:100%;display:-ms-flexbox;display:flex;cursor:pointer}.tree-node-item .arrow{padding:3px 9px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.tree-node-item-text{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;padding:3px 0;-ms-flex-align:center;align-items:center}.tree-node-item-text:hover{background:#f1f7f8}.tree-node-item-text-icon{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-right:9px}.tree-node-item-text-icon .edit{color:#428bca}.tree-node-item-text-label{color:#212533;font-family:\"Open Sans\";font-size:14px;font-style:normal;font-weight:400;line-height:150%;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.tree-node-item-text-checkbox{padding-right:9px;display:-ms-flexbox;display:flex}.tree-node-item-text-checkbox input[type=checkbox]{accent-color:#428bca;width:14px;height:14px}.tree-node-item-text-editable{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.tree-node-item-text-editable i{padding:9px}.tree-node-item-text-input{-ms-flex:1;flex:1}.tree-node-item.selectable .tree-node-item-text-label{font-family:\"Open Sans\";font-size:14px;font-style:normal;font-weight:700}.tree-node-item.selectable *{cursor:pointer}.tree-node-item-selected .tree-node-item-text{background:#d5e8ec}.child{overflow:hidden;padding-left:2.2em;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:5px}.child-item:first-child{padding-top:5px}"]
|
|
23653
|
+
})
|
|
23654
|
+
], TreeNodeItemComponent);
|
|
23655
|
+
return TreeNodeItemComponent;
|
|
23656
|
+
}());
|
|
23657
|
+
|
|
23658
|
+
var TreeModule = /** @class */ (function () {
|
|
23659
|
+
function TreeModule() {
|
|
23660
|
+
}
|
|
23661
|
+
TreeModule = __decorate([
|
|
23662
|
+
core.NgModule({
|
|
23663
|
+
declarations: [TreeNodeItemComponent, TreeComponent],
|
|
23664
|
+
imports: [common.CommonModule, forms.FormsModule, inputtext.InputTextModule, LoadingStateModule, core$1.TranslateModule],
|
|
23665
|
+
exports: [TreeComponent],
|
|
23666
|
+
})
|
|
23667
|
+
], TreeModule);
|
|
23668
|
+
return TreeModule;
|
|
23669
|
+
}());
|
|
23670
|
+
|
|
23218
23671
|
var fallback = {
|
|
23219
23672
|
"platform.angular_components.attachment": "anexo",
|
|
23220
23673
|
"platform.angular_components.watch": "assistir",
|
|
@@ -23758,6 +24211,8 @@
|
|
|
23758
24211
|
exports.TokenListComponent = TokenListComponent;
|
|
23759
24212
|
exports.TokenListModule = TokenListModule;
|
|
23760
24213
|
exports.TooltipModule = TooltipModule;
|
|
24214
|
+
exports.TreeComponent = TreeComponent;
|
|
24215
|
+
exports.TreeModule = TreeModule;
|
|
23761
24216
|
exports.WorkspaceSwitchComponent = WorkspaceSwitchComponent;
|
|
23762
24217
|
exports.WorkspaceSwitchModule = WorkspaceSwitchModule;
|
|
23763
24218
|
exports.convertToMomentDateFormat = convertToMomentDateFormat;
|
|
@@ -23863,6 +24318,8 @@
|
|
|
23863
24318
|
exports.ɵef = CollapsedItemsComponent;
|
|
23864
24319
|
exports.ɵeg = VerticalItemsComponent;
|
|
23865
24320
|
exports.ɵeh = ChipItemComponent;
|
|
24321
|
+
exports.ɵei = TreeNodeItemComponent;
|
|
24322
|
+
exports.ɵej = LoadingStateModule;
|
|
23866
24323
|
exports.ɵf = TieredMenuGlobalService;
|
|
23867
24324
|
exports.ɵg = TieredMenuComponent;
|
|
23868
24325
|
exports.ɵh = TieredMenuNestedComponent;
|