primeng 16.9.7-lts → 16.9.9-lts
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/api/treenode.d.ts +1 -0
- package/autofocus/autofocus.d.ts +8 -4
- package/calendar/calendar.d.ts +5 -2
- package/confirmdialog/confirmdialog.d.ts +1 -0
- package/dom/domhandler.d.ts +5 -1
- package/dropdown/dropdown.d.ts +1 -0
- package/dynamicdialog/dynamicdialog.d.ts +1 -0
- package/esm2022/api/treenode.mjs +1 -1
- package/esm2022/autofocus/autofocus.mjs +35 -18
- package/esm2022/calendar/calendar.mjs +84 -15
- package/esm2022/confirmdialog/confirmdialog.mjs +6 -5
- package/esm2022/dom/domhandler.mjs +65 -2
- package/esm2022/dropdown/dropdown.mjs +24 -13
- package/esm2022/dynamicdialog/dynamicdialog.mjs +5 -2
- package/esm2022/focustrap/focustrap.mjs +49 -25
- package/esm2022/inputnumber/inputnumber.interface.mjs +1 -1
- package/esm2022/inputnumber/inputnumber.mjs +15 -6
- package/esm2022/listbox/listbox.mjs +9 -2
- package/esm2022/multiselect/multiselect.mjs +7 -9
- package/esm2022/panelmenu/panelmenu.mjs +9 -2
- package/esm2022/picklist/picklist.mjs +9 -5
- package/esm2022/table/table.mjs +9 -4
- package/esm2022/tag/tag.mjs +15 -4
- package/esm2022/tooltip/tooltip.mjs +18 -8
- package/esm2022/treetable/treetable.mjs +204 -54
- package/fesm2022/primeng-autofocus.mjs +34 -17
- package/fesm2022/primeng-autofocus.mjs.map +1 -1
- package/fesm2022/primeng-calendar.mjs +83 -14
- package/fesm2022/primeng-calendar.mjs.map +1 -1
- package/fesm2022/primeng-confirmdialog.mjs +5 -4
- package/fesm2022/primeng-confirmdialog.mjs.map +1 -1
- package/fesm2022/primeng-dom.mjs +64 -1
- package/fesm2022/primeng-dom.mjs.map +1 -1
- package/fesm2022/primeng-dropdown.mjs +23 -12
- package/fesm2022/primeng-dropdown.mjs.map +1 -1
- package/fesm2022/primeng-dynamicdialog.mjs +4 -1
- package/fesm2022/primeng-dynamicdialog.mjs.map +1 -1
- package/fesm2022/primeng-focustrap.mjs +48 -24
- package/fesm2022/primeng-focustrap.mjs.map +1 -1
- package/fesm2022/primeng-inputnumber.mjs +14 -5
- package/fesm2022/primeng-inputnumber.mjs.map +1 -1
- package/fesm2022/primeng-listbox.mjs +8 -1
- package/fesm2022/primeng-listbox.mjs.map +1 -1
- package/fesm2022/primeng-multiselect.mjs +6 -8
- package/fesm2022/primeng-multiselect.mjs.map +1 -1
- package/fesm2022/primeng-panelmenu.mjs +8 -1
- package/fesm2022/primeng-panelmenu.mjs.map +1 -1
- package/fesm2022/primeng-picklist.mjs +8 -4
- package/fesm2022/primeng-picklist.mjs.map +1 -1
- package/fesm2022/primeng-table.mjs +8 -3
- package/fesm2022/primeng-table.mjs.map +1 -1
- package/fesm2022/primeng-tag.mjs +14 -3
- package/fesm2022/primeng-tag.mjs.map +1 -1
- package/fesm2022/primeng-tooltip.mjs +17 -7
- package/fesm2022/primeng-tooltip.mjs.map +1 -1
- package/fesm2022/primeng-treetable.mjs +203 -53
- package/fesm2022/primeng-treetable.mjs.map +1 -1
- package/focustrap/focustrap.d.ts +11 -3
- package/inputnumber/inputnumber.interface.d.ts +1 -1
- package/listbox/listbox.d.ts +6 -1
- package/package.json +66 -66
- package/panelmenu/panelmenu.d.ts +1 -0
- package/resources/components/dropdown/dropdown.css +4 -0
- package/tag/tag.d.ts +10 -2
- package/treetable/treetable.d.ts +25 -4
@@ -421,7 +421,17 @@ class TreeTable {
|
|
421
421
|
this._virtualRowHeight = val;
|
422
422
|
console.warn('The virtualRowHeight property is deprecated, use virtualScrollItemSize property instead.');
|
423
423
|
}
|
424
|
-
|
424
|
+
/**
|
425
|
+
* A map of keys to control the selection state.
|
426
|
+
* @group Props
|
427
|
+
*/
|
428
|
+
get selectionKeys() {
|
429
|
+
return this._selectionKeys;
|
430
|
+
}
|
431
|
+
set selectionKeys(value) {
|
432
|
+
this._selectionKeys = value;
|
433
|
+
this.selectionKeysChange.emit(this._selectionKeys);
|
434
|
+
}
|
425
435
|
/**
|
426
436
|
* Callback to invoke on selected node change.
|
427
437
|
* @param {TreeTableNode} object - Node instance.
|
@@ -530,6 +540,12 @@ class TreeTable {
|
|
530
540
|
* @group Emits
|
531
541
|
*/
|
532
542
|
onEditCancel = new EventEmitter();
|
543
|
+
/**
|
544
|
+
* Callback to invoke when selectionKeys are changed.
|
545
|
+
* @param {Object} object - updated value of the selectionKeys.
|
546
|
+
* @group Emits
|
547
|
+
*/
|
548
|
+
selectionKeysChange = new EventEmitter();
|
533
549
|
containerViewChild;
|
534
550
|
resizeHelperViewChild;
|
535
551
|
reorderIndicatorUpViewChild;
|
@@ -539,6 +555,8 @@ class TreeTable {
|
|
539
555
|
scrollableFrozenViewChild;
|
540
556
|
templates;
|
541
557
|
_value = [];
|
558
|
+
_virtualRowHeight = 28;
|
559
|
+
_selectionKeys;
|
542
560
|
serializedValue;
|
543
561
|
_totalRecords = 0;
|
544
562
|
_multiSortMeta;
|
@@ -578,7 +596,7 @@ class TreeTable {
|
|
578
596
|
dropPosition;
|
579
597
|
preventSelectionSetterPropagation;
|
580
598
|
_selection;
|
581
|
-
|
599
|
+
selectedKeys = {};
|
582
600
|
rowTouched;
|
583
601
|
editingCell;
|
584
602
|
editingCellData;
|
@@ -726,7 +744,7 @@ class TreeTable {
|
|
726
744
|
if (simpleChange.selection) {
|
727
745
|
this._selection = simpleChange.selection.currentValue;
|
728
746
|
if (!this.preventSelectionSetterPropagation) {
|
729
|
-
this.
|
747
|
+
this.updateselectedKeys();
|
730
748
|
this.tableService.onSelectionChange();
|
731
749
|
}
|
732
750
|
this.preventSelectionSetterPropagation = false;
|
@@ -778,16 +796,16 @@ class TreeTable {
|
|
778
796
|
}
|
779
797
|
}
|
780
798
|
}
|
781
|
-
|
799
|
+
updateselectedKeys() {
|
782
800
|
if (this.dataKey && this._selection) {
|
783
|
-
this.
|
801
|
+
this.selectedKeys = {};
|
784
802
|
if (Array.isArray(this._selection)) {
|
785
803
|
for (let node of this._selection) {
|
786
|
-
this.
|
804
|
+
this.selectedKeys[String(ObjectUtils.resolveFieldData(node.data, this.dataKey))] = 1;
|
787
805
|
}
|
788
806
|
}
|
789
807
|
else {
|
790
|
-
this.
|
808
|
+
this.selectedKeys[String(ObjectUtils.resolveFieldData(this._selection.data, this.dataKey))] = 1;
|
791
809
|
}
|
792
810
|
}
|
793
811
|
}
|
@@ -1260,7 +1278,7 @@ class TreeTable {
|
|
1260
1278
|
if (selected && metaKey) {
|
1261
1279
|
if (this.isSingleSelectionMode()) {
|
1262
1280
|
this._selection = null;
|
1263
|
-
this.
|
1281
|
+
this.selectedKeys = {};
|
1264
1282
|
this.selectionChange.emit(null);
|
1265
1283
|
}
|
1266
1284
|
else {
|
@@ -1268,7 +1286,7 @@ class TreeTable {
|
|
1268
1286
|
this._selection = this.selection.filter((val, i) => i != selectionIndex);
|
1269
1287
|
this.selectionChange.emit(this.selection);
|
1270
1288
|
if (dataKeyValue) {
|
1271
|
-
delete this.
|
1289
|
+
delete this.selectedKeys[dataKeyValue];
|
1272
1290
|
}
|
1273
1291
|
}
|
1274
1292
|
this.onNodeUnselect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row' });
|
@@ -1278,8 +1296,8 @@ class TreeTable {
|
|
1278
1296
|
this._selection = rowNode.node;
|
1279
1297
|
this.selectionChange.emit(rowNode.node);
|
1280
1298
|
if (dataKeyValue) {
|
1281
|
-
this.
|
1282
|
-
this.
|
1299
|
+
this.selectedKeys = {};
|
1300
|
+
this.selectedKeys[dataKeyValue] = 1;
|
1283
1301
|
}
|
1284
1302
|
}
|
1285
1303
|
else if (this.isMultipleSelectionMode()) {
|
@@ -1288,12 +1306,12 @@ class TreeTable {
|
|
1288
1306
|
}
|
1289
1307
|
else {
|
1290
1308
|
this._selection = [];
|
1291
|
-
this.
|
1309
|
+
this.selectedKeys = {};
|
1292
1310
|
}
|
1293
1311
|
this._selection = [...this.selection, rowNode.node];
|
1294
1312
|
this.selectionChange.emit(this.selection);
|
1295
1313
|
if (dataKeyValue) {
|
1296
|
-
this.
|
1314
|
+
this.selectedKeys[dataKeyValue] = 1;
|
1297
1315
|
}
|
1298
1316
|
}
|
1299
1317
|
this.onNodeSelect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row', index: event.rowIndex });
|
@@ -1303,7 +1321,7 @@ class TreeTable {
|
|
1303
1321
|
if (this.selectionMode === 'single') {
|
1304
1322
|
if (selected) {
|
1305
1323
|
this._selection = null;
|
1306
|
-
this.
|
1324
|
+
this.selectedKeys = {};
|
1307
1325
|
this.selectionChange.emit(this.selection);
|
1308
1326
|
this.onNodeUnselect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row' });
|
1309
1327
|
}
|
@@ -1312,8 +1330,8 @@ class TreeTable {
|
|
1312
1330
|
this.selectionChange.emit(this.selection);
|
1313
1331
|
this.onNodeSelect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row', index: event.rowIndex });
|
1314
1332
|
if (dataKeyValue) {
|
1315
|
-
this.
|
1316
|
-
this.
|
1333
|
+
this.selectedKeys = {};
|
1334
|
+
this.selectedKeys[dataKeyValue] = 1;
|
1317
1335
|
}
|
1318
1336
|
}
|
1319
1337
|
}
|
@@ -1324,7 +1342,7 @@ class TreeTable {
|
|
1324
1342
|
this.selectionChange.emit(this.selection);
|
1325
1343
|
this.onNodeUnselect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row' });
|
1326
1344
|
if (dataKeyValue) {
|
1327
|
-
delete this.
|
1345
|
+
delete this.selectedKeys[dataKeyValue];
|
1328
1346
|
}
|
1329
1347
|
}
|
1330
1348
|
else {
|
@@ -1332,7 +1350,7 @@ class TreeTable {
|
|
1332
1350
|
this.selectionChange.emit(this.selection);
|
1333
1351
|
this.onNodeSelect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row', index: event.rowIndex });
|
1334
1352
|
if (dataKeyValue) {
|
1335
|
-
this.
|
1353
|
+
this.selectedKeys[dataKeyValue] = 1;
|
1336
1354
|
}
|
1337
1355
|
}
|
1338
1356
|
}
|
@@ -1368,7 +1386,7 @@ class TreeTable {
|
|
1368
1386
|
this.selectionChange.emit(this.selection);
|
1369
1387
|
}
|
1370
1388
|
if (dataKeyValue) {
|
1371
|
-
this.
|
1389
|
+
this.selectedKeys[dataKeyValue] = 1;
|
1372
1390
|
}
|
1373
1391
|
}
|
1374
1392
|
this.contextMenu.show(event.originalEvent);
|
@@ -1377,6 +1395,7 @@ class TreeTable {
|
|
1377
1395
|
}
|
1378
1396
|
}
|
1379
1397
|
toggleNodeWithCheckbox(event) {
|
1398
|
+
// legacy selection support, will be removed in v18
|
1380
1399
|
this.selection = this.selection || [];
|
1381
1400
|
this.preventSelectionSetterPropagation = true;
|
1382
1401
|
let node = event.rowNode.node;
|
@@ -1400,25 +1419,40 @@ class TreeTable {
|
|
1400
1419
|
this.tableService.onSelectionChange();
|
1401
1420
|
}
|
1402
1421
|
toggleNodesWithCheckbox(event, check) {
|
1422
|
+
// legacy selection support, will be removed in v18
|
1403
1423
|
let data = this.filteredNodes || this.value;
|
1404
1424
|
this._selection = check && data ? data.slice() : [];
|
1405
|
-
|
1425
|
+
this.toggleAll(check);
|
1426
|
+
if (!check) {
|
1427
|
+
this._selection = [];
|
1428
|
+
this.selectedKeys = {};
|
1429
|
+
}
|
1430
|
+
this.preventSelectionSetterPropagation = true;
|
1431
|
+
this.selectionChange.emit(this._selection);
|
1432
|
+
this.tableService.onSelectionChange();
|
1433
|
+
this.onHeaderCheckboxToggle.emit({ originalEvent: event, checked: check });
|
1434
|
+
}
|
1435
|
+
toggleAll(checked) {
|
1436
|
+
let data = this.filteredNodes || this.value;
|
1437
|
+
if (!this.selectionKeys) {
|
1406
1438
|
if (data && data.length) {
|
1407
1439
|
for (let node of data) {
|
1408
|
-
this.propagateSelectionDown(node,
|
1440
|
+
this.propagateSelectionDown(node, checked);
|
1409
1441
|
}
|
1410
1442
|
}
|
1411
1443
|
}
|
1412
1444
|
else {
|
1413
|
-
|
1414
|
-
|
1445
|
+
// legacy selection support, will be removed in v18
|
1446
|
+
if (data && data.length) {
|
1447
|
+
for (let node of data) {
|
1448
|
+
this.propagateDown(node, checked);
|
1449
|
+
}
|
1450
|
+
this.selectionKeysChange.emit(this.selectionKeys);
|
1451
|
+
}
|
1415
1452
|
}
|
1416
|
-
this.preventSelectionSetterPropagation = true;
|
1417
|
-
this.selectionChange.emit(this._selection);
|
1418
|
-
this.tableService.onSelectionChange();
|
1419
|
-
this.onHeaderCheckboxToggle.emit({ originalEvent: event, checked: check });
|
1420
1453
|
}
|
1421
1454
|
propagateSelectionUp(node, select) {
|
1455
|
+
// legacy selection support, will be removed in v18
|
1422
1456
|
if (node.children && node.children.length) {
|
1423
1457
|
let selectedChildCount = 0;
|
1424
1458
|
let childPartialSelected = false;
|
@@ -1433,7 +1467,7 @@ class TreeTable {
|
|
1433
1467
|
this._selection = [...(this.selection || []), node];
|
1434
1468
|
node.partialSelected = false;
|
1435
1469
|
if (dataKeyValue) {
|
1436
|
-
this.
|
1470
|
+
this.selectedKeys[dataKeyValue] = 1;
|
1437
1471
|
}
|
1438
1472
|
}
|
1439
1473
|
else {
|
@@ -1442,7 +1476,7 @@ class TreeTable {
|
|
1442
1476
|
if (index >= 0) {
|
1443
1477
|
this._selection = this.selection.filter((val, i) => i != index);
|
1444
1478
|
if (dataKeyValue) {
|
1445
|
-
delete this.
|
1479
|
+
delete this.selectedKeys[dataKeyValue];
|
1446
1480
|
}
|
1447
1481
|
}
|
1448
1482
|
}
|
@@ -1453,26 +1487,29 @@ class TreeTable {
|
|
1453
1487
|
}
|
1454
1488
|
}
|
1455
1489
|
let parent = node.parent;
|
1490
|
+
node.checked = select;
|
1456
1491
|
if (parent) {
|
1457
1492
|
this.propagateSelectionUp(parent, select);
|
1458
1493
|
}
|
1459
1494
|
}
|
1460
1495
|
propagateSelectionDown(node, select) {
|
1496
|
+
// legacy selection support, will be removed in v18
|
1461
1497
|
let index = this.findIndexInSelection(node);
|
1462
1498
|
let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(node.data, this.dataKey)) : null;
|
1463
1499
|
if (select && index == -1) {
|
1464
1500
|
this._selection = [...(this.selection || []), node];
|
1465
1501
|
if (dataKeyValue) {
|
1466
|
-
this.
|
1502
|
+
this.selectedKeys[dataKeyValue] = 1;
|
1467
1503
|
}
|
1468
1504
|
}
|
1469
1505
|
else if (!select && index > -1) {
|
1470
1506
|
this._selection = this.selection.filter((val, i) => i != index);
|
1471
1507
|
if (dataKeyValue) {
|
1472
|
-
delete this.
|
1508
|
+
delete this.selectedKeys[dataKeyValue];
|
1473
1509
|
}
|
1474
1510
|
}
|
1475
1511
|
node.partialSelected = false;
|
1512
|
+
node.checked = select;
|
1476
1513
|
if (node.children && node.children.length) {
|
1477
1514
|
for (let child of node.children) {
|
1478
1515
|
this.propagateSelectionDown(child, select);
|
@@ -1480,9 +1517,15 @@ class TreeTable {
|
|
1480
1517
|
}
|
1481
1518
|
}
|
1482
1519
|
isSelected(node) {
|
1520
|
+
// legacy selection support, will be removed in v18
|
1483
1521
|
if (node && this.selection) {
|
1484
1522
|
if (this.dataKey) {
|
1485
|
-
|
1523
|
+
if (node.hasOwnProperty('checked')) {
|
1524
|
+
return node['checked'];
|
1525
|
+
}
|
1526
|
+
else {
|
1527
|
+
return this.selectedKeys[ObjectUtils.resolveFieldData(node.data, this.dataKey)] !== undefined;
|
1528
|
+
}
|
1486
1529
|
}
|
1487
1530
|
else {
|
1488
1531
|
if (Array.isArray(this.selection))
|
@@ -1493,6 +1536,69 @@ class TreeTable {
|
|
1493
1536
|
}
|
1494
1537
|
return false;
|
1495
1538
|
}
|
1539
|
+
isNodeSelected(node) {
|
1540
|
+
return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(node)]?.checked === true : false;
|
1541
|
+
}
|
1542
|
+
isNodePartialSelected(node) {
|
1543
|
+
return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(node)]?.partialChecked === true : false;
|
1544
|
+
}
|
1545
|
+
nodeKey(node) {
|
1546
|
+
return ObjectUtils.resolveFieldData(node, this.dataKey) || ObjectUtils.resolveFieldData(node?.data, this.dataKey);
|
1547
|
+
}
|
1548
|
+
toggleCheckbox(event) {
|
1549
|
+
let { rowNode, check, originalEvent } = event;
|
1550
|
+
let node = rowNode.node;
|
1551
|
+
if (this.selectionKeys) {
|
1552
|
+
this.propagateDown(node, check);
|
1553
|
+
if (node.parent) {
|
1554
|
+
this.propagateUp(node.parent, check);
|
1555
|
+
}
|
1556
|
+
this.selectionKeysChange.emit(this.selectionKeys);
|
1557
|
+
}
|
1558
|
+
else {
|
1559
|
+
this.toggleNodeWithCheckbox({ originalEvent, rowNode });
|
1560
|
+
}
|
1561
|
+
this.tableService.onSelectionChange();
|
1562
|
+
}
|
1563
|
+
propagateDown(node, check) {
|
1564
|
+
if (check) {
|
1565
|
+
this.selectionKeys[this.nodeKey(node)] = { checked: true, partialChecked: false };
|
1566
|
+
}
|
1567
|
+
else {
|
1568
|
+
delete this.selectionKeys[this.nodeKey(node)];
|
1569
|
+
}
|
1570
|
+
if (node.children && node.children.length) {
|
1571
|
+
for (let child of node.children) {
|
1572
|
+
this.propagateDown(child, check);
|
1573
|
+
}
|
1574
|
+
}
|
1575
|
+
}
|
1576
|
+
propagateUp(node, check) {
|
1577
|
+
let checkedChildCount = 0;
|
1578
|
+
let childPartialSelected = false;
|
1579
|
+
for (let child of node.children) {
|
1580
|
+
if (this.selectionKeys[this.nodeKey(child)] && this.selectionKeys[this.nodeKey(child)].checked)
|
1581
|
+
checkedChildCount++;
|
1582
|
+
else if (this.selectionKeys[this.nodeKey(child)] && this.selectionKeys[this.nodeKey(child)].partialChecked)
|
1583
|
+
childPartialSelected = true;
|
1584
|
+
}
|
1585
|
+
if (check && checkedChildCount === node.children.length) {
|
1586
|
+
this.selectionKeys[this.nodeKey(node)] = { checked: true, partialChecked: false };
|
1587
|
+
}
|
1588
|
+
else {
|
1589
|
+
if (!check) {
|
1590
|
+
delete this.selectionKeys[this.nodeKey(node)];
|
1591
|
+
}
|
1592
|
+
if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== node.children.length))
|
1593
|
+
this.selectionKeys[this.nodeKey(node)] = { checked: false, partialChecked: true };
|
1594
|
+
else
|
1595
|
+
this.selectionKeys[this.nodeKey(node)] = { checked: false, partialChecked: false };
|
1596
|
+
}
|
1597
|
+
let parent = node.parent;
|
1598
|
+
if (parent) {
|
1599
|
+
this.propagateUp(parent, check);
|
1600
|
+
}
|
1601
|
+
}
|
1496
1602
|
findIndexInSelection(node) {
|
1497
1603
|
let index = -1;
|
1498
1604
|
if (this.selection && this.selection.length) {
|
@@ -1512,7 +1618,7 @@ class TreeTable {
|
|
1512
1618
|
return this.selectionMode === 'multiple';
|
1513
1619
|
}
|
1514
1620
|
equals(node1, node2) {
|
1515
|
-
return this.compareSelectionBy === 'equals' ? node1
|
1621
|
+
return this.compareSelectionBy === 'equals' ? ObjectUtils.equals(node1, node2) : ObjectUtils.equals(node1.data, node2.data, this.dataKey);
|
1516
1622
|
}
|
1517
1623
|
filter(value, field, matchMode) {
|
1518
1624
|
if (this.filterTimeout) {
|
@@ -1728,7 +1834,7 @@ class TreeTable {
|
|
1728
1834
|
this.initialized = null;
|
1729
1835
|
}
|
1730
1836
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: TreeTable, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: TreeTableService }, { token: i1.FilterService }], target: i0.ɵɵFactoryTarget.Component });
|
1731
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TreeTable, selector: "p-treeTable", inputs: { columns: "columns", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", autoLayout: "autoLayout", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", paginator: "paginator", rows: "rows", first: "first", pageLinks: "pageLinks", rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: "alwaysShowPaginator", paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: "showCurrentPageReport", showJumpToPageDropdown: "showJumpToPageDropdown", showFirstLastIcon: "showFirstLastIcon", showPageLinks: "showPageLinks", defaultSortOrder: "defaultSortOrder", sortMode: "sortMode", resetPageOnSort: "resetPageOnSort", customSort: "customSort", selectionMode: "selectionMode", contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: "metaKeySelection", compareSelectionBy: "compareSelectionBy", rowHover: "rowHover", loading: "loading", loadingIcon: "loadingIcon", showLoader: "showLoader", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: "virtualScrollDelay", frozenWidth: "frozenWidth", frozenColumns: "frozenColumns", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode", reorderableColumns: "reorderableColumns", contextMenu: "contextMenu", rowTrackBy: "rowTrackBy", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: "filterDelay", filterMode: "filterMode", filterLocale: "filterLocale", paginatorLocale: "paginatorLocale", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", value: "value", virtualRowHeight: "virtualRowHeight" }, outputs: { selectionChange: "selectionChange", contextMenuSelectionChange: "contextMenuSelectionChange", onFilter: "onFilter", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onPage: "onPage", onSort: "onSort", onLazyLoad: "onLazyLoad", sortFunction: "sortFunction", onColResize: "onColResize", onColReorder: "onColReorder", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onContextMenuSelect: "onContextMenuSelect", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel" }, host: { classAttribute: "p-element" }, providers: [TreeTableService], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "scrollableViewChild", first: true, predicate: ["scrollableView"], descendants: true }, { propertyName: "scrollableFrozenViewChild", first: true, predicate: ["scrollableFrozenView"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
1837
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: TreeTable, selector: "p-treeTable", inputs: { columns: "columns", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", autoLayout: "autoLayout", lazy: "lazy", lazyLoadOnInit: "lazyLoadOnInit", paginator: "paginator", rows: "rows", first: "first", pageLinks: "pageLinks", rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: "alwaysShowPaginator", paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: "showCurrentPageReport", showJumpToPageDropdown: "showJumpToPageDropdown", showFirstLastIcon: "showFirstLastIcon", showPageLinks: "showPageLinks", defaultSortOrder: "defaultSortOrder", sortMode: "sortMode", resetPageOnSort: "resetPageOnSort", customSort: "customSort", selectionMode: "selectionMode", contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: "metaKeySelection", compareSelectionBy: "compareSelectionBy", rowHover: "rowHover", loading: "loading", loadingIcon: "loadingIcon", showLoader: "showLoader", scrollable: "scrollable", scrollHeight: "scrollHeight", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: "virtualScrollDelay", frozenWidth: "frozenWidth", frozenColumns: "frozenColumns", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode", reorderableColumns: "reorderableColumns", contextMenu: "contextMenu", rowTrackBy: "rowTrackBy", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: "filterDelay", filterMode: "filterMode", filterLocale: "filterLocale", paginatorLocale: "paginatorLocale", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", value: "value", virtualRowHeight: "virtualRowHeight", selectionKeys: "selectionKeys" }, outputs: { selectionChange: "selectionChange", contextMenuSelectionChange: "contextMenuSelectionChange", onFilter: "onFilter", onNodeExpand: "onNodeExpand", onNodeCollapse: "onNodeCollapse", onPage: "onPage", onSort: "onSort", onLazyLoad: "onLazyLoad", sortFunction: "sortFunction", onColResize: "onColResize", onColReorder: "onColReorder", onNodeSelect: "onNodeSelect", onNodeUnselect: "onNodeUnselect", onContextMenuSelect: "onContextMenuSelect", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", selectionKeysChange: "selectionKeysChange" }, host: { classAttribute: "p-element" }, providers: [TreeTableService], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "scrollableViewChild", first: true, predicate: ["scrollableView"], descendants: true }, { propertyName: "scrollableFrozenViewChild", first: true, predicate: ["scrollableFrozenView"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
1732
1838
|
<div
|
1733
1839
|
#container
|
1734
1840
|
[ngStyle]="style"
|
@@ -2154,6 +2260,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
|
|
2154
2260
|
type: Input
|
2155
2261
|
}], virtualRowHeight: [{
|
2156
2262
|
type: Input
|
2263
|
+
}], selectionKeys: [{
|
2264
|
+
type: Input
|
2157
2265
|
}], selectionChange: [{
|
2158
2266
|
type: Output
|
2159
2267
|
}], contextMenuSelectionChange: [{
|
@@ -2190,6 +2298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
|
|
2190
2298
|
type: Output
|
2191
2299
|
}], onEditCancel: [{
|
2192
2300
|
type: Output
|
2301
|
+
}], selectionKeysChange: [{
|
2302
|
+
type: Output
|
2193
2303
|
}], containerViewChild: [{
|
2194
2304
|
type: ViewChild,
|
2195
2305
|
args: ['container']
|
@@ -3192,6 +3302,7 @@ class TTCheckbox {
|
|
3192
3302
|
disabled;
|
3193
3303
|
rowNode;
|
3194
3304
|
checked;
|
3305
|
+
partialChecked;
|
3195
3306
|
focused;
|
3196
3307
|
subscription;
|
3197
3308
|
constructor(tt, tableService, cd) {
|
@@ -3199,19 +3310,44 @@ class TTCheckbox {
|
|
3199
3310
|
this.tableService = tableService;
|
3200
3311
|
this.cd = cd;
|
3201
3312
|
this.subscription = this.tt.tableService.selectionSource$.subscribe(() => {
|
3202
|
-
|
3313
|
+
if (this.tt.selectionKeys) {
|
3314
|
+
this.checked = this.tt.isNodeSelected(this.rowNode.node);
|
3315
|
+
this.partialChecked = this.tt.isNodePartialSelected(this.rowNode.node);
|
3316
|
+
}
|
3317
|
+
else {
|
3318
|
+
this.checked = this.tt.isSelected(this.rowNode.node);
|
3319
|
+
this.partialChecked = this.rowNode.node.partialSelected;
|
3320
|
+
}
|
3203
3321
|
this.cd.markForCheck();
|
3204
3322
|
});
|
3205
3323
|
}
|
3206
3324
|
ngOnInit() {
|
3207
|
-
|
3325
|
+
if (this.tt.selectionKeys) {
|
3326
|
+
this.checked = this.tt.isNodeSelected(this.rowNode.node);
|
3327
|
+
this.partialChecked = this.tt.isNodePartialSelected(this.rowNode.node);
|
3328
|
+
}
|
3329
|
+
else {
|
3330
|
+
// for backward compatibility
|
3331
|
+
this.checked = this.tt.isSelected(this.rowNode.node);
|
3332
|
+
this.partialChecked = this.rowNode.node.partialSelected;
|
3333
|
+
}
|
3208
3334
|
}
|
3209
3335
|
onClick(event) {
|
3210
3336
|
if (!this.disabled) {
|
3211
|
-
this.tt.
|
3212
|
-
|
3213
|
-
|
3214
|
-
|
3337
|
+
if (this.tt.selectionKeys) {
|
3338
|
+
const _check = !this.checked;
|
3339
|
+
this.tt.toggleCheckbox({
|
3340
|
+
originalEvent: event,
|
3341
|
+
check: _check,
|
3342
|
+
rowNode: this.rowNode
|
3343
|
+
});
|
3344
|
+
}
|
3345
|
+
else {
|
3346
|
+
this.tt.toggleNodeWithCheckbox({
|
3347
|
+
originalEvent: event,
|
3348
|
+
rowNode: this.rowNode
|
3349
|
+
});
|
3350
|
+
}
|
3215
3351
|
}
|
3216
3352
|
DomHandler.clearSelection();
|
3217
3353
|
}
|
@@ -3232,13 +3368,13 @@ class TTCheckbox {
|
|
3232
3368
|
<div class="p-hidden-accessible">
|
3233
3369
|
<input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" tabindex="-1" />
|
3234
3370
|
</div>
|
3235
|
-
<div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-indeterminate':
|
3371
|
+
<div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-indeterminate': partialChecked, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
|
3236
3372
|
<ng-container *ngIf="!tt.checkboxIconTemplate">
|
3237
3373
|
<CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="checked" />
|
3238
|
-
<MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="
|
3374
|
+
<MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="partialChecked" />
|
3239
3375
|
</ng-container>
|
3240
3376
|
<span *ngIf="tt.checkboxIconTemplate">
|
3241
|
-
<ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected:
|
3377
|
+
<ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected: partialChecked }"></ng-template>
|
3242
3378
|
</span>
|
3243
3379
|
</div>
|
3244
3380
|
</div>
|
@@ -3253,13 +3389,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
|
|
3253
3389
|
<div class="p-hidden-accessible">
|
3254
3390
|
<input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" tabindex="-1" />
|
3255
3391
|
</div>
|
3256
|
-
<div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-indeterminate':
|
3392
|
+
<div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-indeterminate': partialChecked, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
|
3257
3393
|
<ng-container *ngIf="!tt.checkboxIconTemplate">
|
3258
3394
|
<CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="checked" />
|
3259
|
-
<MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="
|
3395
|
+
<MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="partialChecked" />
|
3260
3396
|
</ng-container>
|
3261
3397
|
<span *ngIf="tt.checkboxIconTemplate">
|
3262
|
-
<ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected:
|
3398
|
+
<ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected: partialChecked }"></ng-template>
|
3263
3399
|
</span>
|
3264
3400
|
</div>
|
3265
3401
|
</div>
|
@@ -3301,7 +3437,7 @@ class TTHeaderCheckbox {
|
|
3301
3437
|
this.checked = this.updateCheckedState();
|
3302
3438
|
}
|
3303
3439
|
onClick(event, checked) {
|
3304
|
-
if (this.tt.value && this.tt.value.length > 0) {
|
3440
|
+
if ((this.tt.value || this.tt.filteredNodes) && (this.tt.value.length > 0 || this.tt.filteredNodes.length > 0)) {
|
3305
3441
|
this.tt.toggleNodesWithCheckbox(event, !checked);
|
3306
3442
|
}
|
3307
3443
|
DomHandler.clearSelection();
|
@@ -3325,13 +3461,27 @@ class TTHeaderCheckbox {
|
|
3325
3461
|
let checked;
|
3326
3462
|
const data = this.tt.filteredNodes || this.tt.value;
|
3327
3463
|
if (data) {
|
3328
|
-
|
3329
|
-
|
3330
|
-
|
3464
|
+
if (this.tt.selectionKeys) {
|
3465
|
+
for (let node of data) {
|
3466
|
+
if (this.tt.isNodeSelected(node)) {
|
3467
|
+
checked = true;
|
3468
|
+
}
|
3469
|
+
else {
|
3470
|
+
checked = false;
|
3471
|
+
break;
|
3472
|
+
}
|
3331
3473
|
}
|
3332
|
-
|
3333
|
-
|
3334
|
-
|
3474
|
+
}
|
3475
|
+
if (!this.tt.selectionKeys) {
|
3476
|
+
// legacy selection support, will be removed in v18
|
3477
|
+
for (let node of data) {
|
3478
|
+
if (this.tt.isSelected(node)) {
|
3479
|
+
checked = true;
|
3480
|
+
}
|
3481
|
+
else {
|
3482
|
+
checked = false;
|
3483
|
+
break;
|
3484
|
+
}
|
3335
3485
|
}
|
3336
3486
|
}
|
3337
3487
|
}
|