primeng 16.9.7-lts → 16.9.8-lts

package/fesm2022/primeng-tag.mjs

@@ -9,11 +9,18 @@ import { LicenseManager, PrimeTemplate, SharedModule } from 'primeng/api';
  * @group Components
  */
 class Tag {
+    cd;
     /**
      * Inline style of the component.
      * @group Props
      */
-    style;
+    get style() {
+        return this._style;
+    }
+    set style(value) {
+        this._style = value;
+        this.cd.markForCheck();
+    }
     /**
      * Style class of the component.
      * @group Props
@@ -42,6 +49,7 @@ class Tag {
     rounded;
     templates;
     iconTemplate;
+    _style;
     ngAfterContentInit() {
         this.templates?.forEach((item) => {
             switch (item.getType()) {
@@ -51,6 +59,9 @@ class Tag {
             }
         });
     }
+    constructor(cd) {
+        this.cd = cd;
+    }
     containerClass() {
         return {
             'p-tag p-component': true,
@@ -64,7 +75,7 @@ class Tag {
     ngAfterViewInit() {
         LicenseManager.check();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: Tag, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.0", ngImport: i0, type: Tag, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.0", type: Tag, selector: "p-tag", inputs: { style: "style", styleClass: "styleClass", severity: "severity", value: "value", icon: "icon", rounded: "rounded" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], ngImport: i0, template: `
         <span [ngClass]="containerClass()" [class]="styleClass" [ngStyle]="style">
             <ng-content></ng-content>
@@ -94,7 +105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
     `, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'p-element'
                     }, styles: ["@layer primeng{.p-tag{display:inline-flex;align-items:center;justify-content:center}.p-tag-icon,.p-tag-value,.p-tag-icon.pi{line-height:1.5}.p-tag.p-tag-rounded{border-radius:10rem}}\n"] }]
-        }], propDecorators: { style: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { style: [{
                 type: Input
             }], styleClass: [{
                 type: Input

package/fesm2022/primeng-tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-tag.mjs","sources":["../../src/app/components/tag/tag.ts","../../src/app/components/tag/primeng-tag.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ContentChildren, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { PrimeTemplate, SharedModule, LicenseManager } from 'primeng/api';\n/**\n * Tag component is used to categorize content.\n * @group Components\n */\n@Component({\n    selector: 'p-tag',\n    template: `\n        <span [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\">\n            <ng-content></ng-content>\n            <ng-container *ngIf=\"!iconTemplate\">\n                <span class=\"p-tag-icon\" [ngClass]=\"icon\" *ngIf=\"icon\"></span>\n            </ng-container>\n            <span class=\"p-tag-icon\" *ngIf=\"iconTemplate\">\n                <ng-template *ngTemplateOutlet=\"iconTemplate\"></ng-template>\n            </span>\n            <span class=\"p-tag-value\">{{ value }}</span>\n        </span>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./tag.css'],\n    host: {\n        class: 'p-element'\n    }\n})\nexport class Tag {\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Severity type of the tag.\n     * @group Props\n     */\n    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | string | undefined;\n    /**\n     * Value to display inside the tag.\n     * @group Props\n     */\n    @Input() value: string | undefined;\n    /**\n     * Icon of the tag to display next to the value.\n     * @group Props\n     * @deprecated since 15.4.2. Use 'icon' template.\n     */\n    @Input() icon: string | undefined;\n    /**\n     * Whether the corners of the tag are rounded.\n     * @group Props\n     */\n    @Input() rounded: boolean | undefined;\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    iconTemplate: TemplateRef<any> | undefined;\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'icon':\n                    this.iconTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    containerClass() {\n        return {\n            'p-tag p-component': true,\n            'p-tag-info': this.severity === 'info',\n            'p-tag-success': this.severity === 'success',\n            'p-tag-warning': this.severity === 'warning',\n            'p-tag-danger': this.severity === 'danger',\n            'p-tag-rounded': this.rounded\n        };\n    }\n\n    ngAfterViewInit() {\n        LicenseManager.check();\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, SharedModule],\n    exports: [Tag, SharedModule],\n    declarations: [Tag]\n})\nexport class TagModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"primeng-tag.mjs","sources":["../../src/app/components/tag/tag.ts","../../src/app/components/tag/primeng-tag.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { PrimeTemplate, SharedModule, LicenseManager } from 'primeng/api';\n/**\n * Tag component is used to categorize content.\n * @group Components\n */\n@Component({\n    selector: 'p-tag',\n    template: `\n        <span [ngClass]=\"containerClass()\" [class]=\"styleClass\" [ngStyle]=\"style\">\n            <ng-content></ng-content>\n            <ng-container *ngIf=\"!iconTemplate\">\n                <span class=\"p-tag-icon\" [ngClass]=\"icon\" *ngIf=\"icon\"></span>\n            </ng-container>\n            <span class=\"p-tag-icon\" *ngIf=\"iconTemplate\">\n                <ng-template *ngTemplateOutlet=\"iconTemplate\"></ng-template>\n            </span>\n            <span class=\"p-tag-value\">{{ value }}</span>\n        </span>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./tag.css'],\n    host: {\n        class: 'p-element'\n    }\n})\nexport class Tag {\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() get style(): { [klass: string]: any } | null | undefined {\n        return this._style;\n    }\n    set style(value: { [klass: string]: any } | null | undefined) {\n        this._style = value;\n        this.cd.markForCheck();\n    }\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Severity type of the tag.\n     * @group Props\n     */\n    @Input() severity: 'success' | 'info' | 'warning' | 'danger' | string | undefined;\n    /**\n     * Value to display inside the tag.\n     * @group Props\n     */\n    @Input() value: string | undefined;\n    /**\n     * Icon of the tag to display next to the value.\n     * @group Props\n     * @deprecated since 15.4.2. Use 'icon' template.\n     */\n    @Input() icon: string | undefined;\n    /**\n     * Whether the corners of the tag are rounded.\n     * @group Props\n     */\n    @Input() rounded: boolean | undefined;\n\n    @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | undefined;\n\n    iconTemplate: TemplateRef<any> | undefined;\n\n    _style: { [klass: string]: any } | null | undefined;\n\n    ngAfterContentInit() {\n        this.templates?.forEach((item) => {\n            switch (item.getType()) {\n                case 'icon':\n                    this.iconTemplate = item.template;\n                    break;\n            }\n        });\n    }\n\n    constructor(private cd: ChangeDetectorRef) {}\n\n    containerClass() {\n        return {\n            'p-tag p-component': true,\n            'p-tag-info': this.severity === 'info',\n            'p-tag-success': this.severity === 'success',\n            'p-tag-warning': this.severity === 'warning',\n            'p-tag-danger': this.severity === 'danger',\n            'p-tag-rounded': this.rounded\n        };\n    }\n\n    ngAfterViewInit() {\n        LicenseManager.check();\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, SharedModule],\n    exports: [Tag, SharedModule],\n    declarations: [Tag]\n})\nexport class TagModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/primeng-treetable.mjs

@@ -421,7 +421,17 @@ class TreeTable {
         this._virtualRowHeight = val;
         console.warn('The virtualRowHeight property is deprecated, use virtualScrollItemSize property instead.');
     }
-    _virtualRowHeight = 28;
+    /**
+     * A map of keys to control the selection state.
+     * @group Props
+     */
+    get selectionKeys() {
+        return this._selectionKeys;
+    }
+    set selectionKeys(value) {
+        this._selectionKeys = value;
+        this.selectionKeysChange.emit(this._selectionKeys);
+    }
     /**
      * Callback to invoke on selected node change.
      * @param {TreeTableNode} object - Node instance.
@@ -530,6 +540,12 @@ class TreeTable {
      * @group Emits
      */
     onEditCancel = new EventEmitter();
+    /**
+     * Callback to invoke when selectionKeys are changed.
+     * @param {Object} object - updated value of the selectionKeys.
+     * @group Emits
+     */
+    selectionKeysChange = new EventEmitter();
     containerViewChild;
     resizeHelperViewChild;
     reorderIndicatorUpViewChild;
@@ -539,6 +555,8 @@ class TreeTable {
     scrollableFrozenViewChild;
     templates;
     _value = [];
+    _virtualRowHeight = 28;
+    _selectionKeys;
     serializedValue;
     _totalRecords = 0;
     _multiSortMeta;
@@ -578,7 +596,7 @@ class TreeTable {
     dropPosition;
     preventSelectionSetterPropagation;
     _selection;
-    selectionKeys = {};
+    selectedKeys = {};
     rowTouched;
     editingCell;
     editingCellData;
@@ -726,7 +744,7 @@ class TreeTable {
         if (simpleChange.selection) {
             this._selection = simpleChange.selection.currentValue;
             if (!this.preventSelectionSetterPropagation) {
-                this.updateSelectionKeys();
+                this.updateselectedKeys();
                 this.tableService.onSelectionChange();
             }
             this.preventSelectionSetterPropagation = false;
@@ -778,16 +796,16 @@ class TreeTable {
             }
         }
     }
-    updateSelectionKeys() {
+    updateselectedKeys() {
         if (this.dataKey && this._selection) {
-            this.selectionKeys = {};
+            this.selectedKeys = {};
             if (Array.isArray(this._selection)) {
                 for (let node of this._selection) {
-                    this.selectionKeys[String(ObjectUtils.resolveFieldData(node.data, this.dataKey))] = 1;
+                    this.selectedKeys[String(ObjectUtils.resolveFieldData(node.data, this.dataKey))] = 1;
                 }
             }
             else {
-                this.selectionKeys[String(ObjectUtils.resolveFieldData(this._selection.data, this.dataKey))] = 1;
+                this.selectedKeys[String(ObjectUtils.resolveFieldData(this._selection.data, this.dataKey))] = 1;
             }
         }
     }
@@ -1260,7 +1278,7 @@ class TreeTable {
                 if (selected && metaKey) {
                     if (this.isSingleSelectionMode()) {
                         this._selection = null;
-                        this.selectionKeys = {};
+                        this.selectedKeys = {};
                         this.selectionChange.emit(null);
                     }
                     else {
@@ -1268,7 +1286,7 @@ class TreeTable {
                         this._selection = this.selection.filter((val, i) => i != selectionIndex);
                         this.selectionChange.emit(this.selection);
                         if (dataKeyValue) {
-                            delete this.selectionKeys[dataKeyValue];
+                            delete this.selectedKeys[dataKeyValue];
                         }
                     }
                     this.onNodeUnselect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row' });
@@ -1278,8 +1296,8 @@ class TreeTable {
                         this._selection = rowNode.node;
                         this.selectionChange.emit(rowNode.node);
                         if (dataKeyValue) {
-                            this.selectionKeys = {};
-                            this.selectionKeys[dataKeyValue] = 1;
+                            this.selectedKeys = {};
+                            this.selectedKeys[dataKeyValue] = 1;
                         }
                     }
                     else if (this.isMultipleSelectionMode()) {
@@ -1288,12 +1306,12 @@ class TreeTable {
                         }
                         else {
                             this._selection = [];
-                            this.selectionKeys = {};
+                            this.selectedKeys = {};
                         }
                         this._selection = [...this.selection, rowNode.node];
                         this.selectionChange.emit(this.selection);
                         if (dataKeyValue) {
-                            this.selectionKeys[dataKeyValue] = 1;
+                            this.selectedKeys[dataKeyValue] = 1;
                         }
                     }
                     this.onNodeSelect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row', index: event.rowIndex });
@@ -1303,7 +1321,7 @@ class TreeTable {
                 if (this.selectionMode === 'single') {
                     if (selected) {
                         this._selection = null;
-                        this.selectionKeys = {};
+                        this.selectedKeys = {};
                         this.selectionChange.emit(this.selection);
                         this.onNodeUnselect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row' });
                     }
@@ -1312,8 +1330,8 @@ class TreeTable {
                         this.selectionChange.emit(this.selection);
                         this.onNodeSelect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row', index: event.rowIndex });
                         if (dataKeyValue) {
-                            this.selectionKeys = {};
-                            this.selectionKeys[dataKeyValue] = 1;
+                            this.selectedKeys = {};
+                            this.selectedKeys[dataKeyValue] = 1;
                         }
                     }
                 }
@@ -1324,7 +1342,7 @@ class TreeTable {
                         this.selectionChange.emit(this.selection);
                         this.onNodeUnselect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row' });
                         if (dataKeyValue) {
-                            delete this.selectionKeys[dataKeyValue];
+                            delete this.selectedKeys[dataKeyValue];
                         }
                     }
                     else {
@@ -1332,7 +1350,7 @@ class TreeTable {
                         this.selectionChange.emit(this.selection);
                         this.onNodeSelect.emit({ originalEvent: event.originalEvent, node: rowNode.node, type: 'row', index: event.rowIndex });
                         if (dataKeyValue) {
-                            this.selectionKeys[dataKeyValue] = 1;
+                            this.selectedKeys[dataKeyValue] = 1;
                         }
                     }
                 }
@@ -1368,7 +1386,7 @@ class TreeTable {
                         this.selectionChange.emit(this.selection);
                     }
                     if (dataKeyValue) {
-                        this.selectionKeys[dataKeyValue] = 1;
+                        this.selectedKeys[dataKeyValue] = 1;
                     }
                 }
                 this.contextMenu.show(event.originalEvent);
@@ -1377,6 +1395,7 @@ class TreeTable {
         }
     }
     toggleNodeWithCheckbox(event) {
+        // legacy selection support, will be removed in v18
         this.selection = this.selection || [];
         this.preventSelectionSetterPropagation = true;
         let node = event.rowNode.node;
@@ -1400,25 +1419,40 @@ class TreeTable {
         this.tableService.onSelectionChange();
     }
     toggleNodesWithCheckbox(event, check) {
+        // legacy selection support, will be removed in v18
         let data = this.filteredNodes || this.value;
         this._selection = check && data ? data.slice() : [];
-        if (check) {
+        this.toggleAll(check);
+        if (!check) {
+            this._selection = [];
+            this.selectedKeys = {};
+        }
+        this.preventSelectionSetterPropagation = true;
+        this.selectionChange.emit(this._selection);
+        this.tableService.onSelectionChange();
+        this.onHeaderCheckboxToggle.emit({ originalEvent: event, checked: check });
+    }
+    toggleAll(checked) {
+        let data = this.filteredNodes || this.value;
+        if (!this.selectionKeys) {
             if (data && data.length) {
                 for (let node of data) {
-                    this.propagateSelectionDown(node, true);
+                    this.propagateSelectionDown(node, checked);
                 }
             }
         }
         else {
-            this._selection = [];
-            this.selectionKeys = {};
+            // legacy selection support, will be removed in v18
+            if (data && data.length) {
+                for (let node of data) {
+                    this.propagateDown(node, checked);
+                }
+                this.selectionKeysChange.emit(this.selectionKeys);
+            }
         }
-        this.preventSelectionSetterPropagation = true;
-        this.selectionChange.emit(this._selection);
-        this.tableService.onSelectionChange();
-        this.onHeaderCheckboxToggle.emit({ originalEvent: event, checked: check });
     }
     propagateSelectionUp(node, select) {
+        // legacy selection support, will be removed in v18
         if (node.children && node.children.length) {
             let selectedChildCount = 0;
             let childPartialSelected = false;
@@ -1433,7 +1467,7 @@ class TreeTable {
                 this._selection = [...(this.selection || []), node];
                 node.partialSelected = false;
                 if (dataKeyValue) {
-                    this.selectionKeys[dataKeyValue] = 1;
+                    this.selectedKeys[dataKeyValue] = 1;
                 }
             }
             else {
@@ -1442,7 +1476,7 @@ class TreeTable {
                     if (index >= 0) {
                         this._selection = this.selection.filter((val, i) => i != index);
                         if (dataKeyValue) {
-                            delete this.selectionKeys[dataKeyValue];
+                            delete this.selectedKeys[dataKeyValue];
                         }
                     }
                 }
@@ -1453,26 +1487,29 @@ class TreeTable {
             }
         }
         let parent = node.parent;
+        node.checked = select;
         if (parent) {
             this.propagateSelectionUp(parent, select);
         }
     }
     propagateSelectionDown(node, select) {
+        // legacy selection support, will be removed in v18
         let index = this.findIndexInSelection(node);
         let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(node.data, this.dataKey)) : null;
         if (select && index == -1) {
             this._selection = [...(this.selection || []), node];
             if (dataKeyValue) {
-                this.selectionKeys[dataKeyValue] = 1;
+                this.selectedKeys[dataKeyValue] = 1;
             }
         }
         else if (!select && index > -1) {
             this._selection = this.selection.filter((val, i) => i != index);
             if (dataKeyValue) {
-                delete this.selectionKeys[dataKeyValue];
+                delete this.selectedKeys[dataKeyValue];
             }
         }
         node.partialSelected = false;
+        node.checked = select;
         if (node.children && node.children.length) {
             for (let child of node.children) {
                 this.propagateSelectionDown(child, select);
@@ -1480,9 +1517,15 @@ class TreeTable {
         }
     }
     isSelected(node) {
+        // legacy selection support, will be removed in v18
         if (node && this.selection) {
             if (this.dataKey) {
-                return this.selectionKeys[ObjectUtils.resolveFieldData(node.data, this.dataKey)] !== undefined;
+                if (node.hasOwnProperty('checked')) {
+                    return node['checked'];
+                }
+                else {
+                    return this.selectedKeys[ObjectUtils.resolveFieldData(node.data, this.dataKey)] !== undefined;
+                }
             }
             else {
                 if (Array.isArray(this.selection))
@@ -1493,6 +1536,69 @@ class TreeTable {
         }
         return false;
     }
+    isNodeSelected(node) {
+        return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(node)]?.checked === true : false;
+    }
+    isNodePartialSelected(node) {
+        return this.selectionMode && this.selectionKeys ? this.selectionKeys[this.nodeKey(node)]?.partialChecked === true : false;
+    }
+    nodeKey(node) {
+        return ObjectUtils.resolveFieldData(node, this.dataKey) || ObjectUtils.resolveFieldData(node?.data, this.dataKey);
+    }
+    toggleCheckbox(event) {
+        let { rowNode, check, originalEvent } = event;
+        let node = rowNode.node;
+        if (this.selectionKeys) {
+            this.propagateDown(node, check);
+            if (node.parent) {
+                this.propagateUp(node.parent, check);
+            }
+            this.selectionKeysChange.emit(this.selectionKeys);
+        }
+        else {
+            this.toggleNodeWithCheckbox({ originalEvent, rowNode });
+        }
+        this.tableService.onSelectionChange();
+    }
+    propagateDown(node, check) {
+        if (check) {
+            this.selectionKeys[this.nodeKey(node)] = { checked: true, partialChecked: false };
+        }
+        else {
+            delete this.selectionKeys[this.nodeKey(node)];
+        }
+        if (node.children && node.children.length) {
+            for (let child of node.children) {
+                this.propagateDown(child, check);
+            }
+        }
+    }
+    propagateUp(node, check) {
+        let checkedChildCount = 0;
+        let childPartialSelected = false;
+        for (let child of node.children) {
+            if (this.selectionKeys[this.nodeKey(child)] && this.selectionKeys[this.nodeKey(child)].checked)
+                checkedChildCount++;
+            else if (this.selectionKeys[this.nodeKey(child)] && this.selectionKeys[this.nodeKey(child)].partialChecked)
+                childPartialSelected = true;
+        }
+        if (check && checkedChildCount === node.children.length) {
+            this.selectionKeys[this.nodeKey(node)] = { checked: true, partialChecked: false };
+        }
+        else {
+            if (!check) {
+                delete this.selectionKeys[this.nodeKey(node)];
+            }
+            if (childPartialSelected || (checkedChildCount > 0 && checkedChildCount !== node.children.length))
+                this.selectionKeys[this.nodeKey(node)] = { checked: false, partialChecked: true };
+            else
+                this.selectionKeys[this.nodeKey(node)] = { checked: false, partialChecked: false };
+        }
+        let parent = node.parent;
+        if (parent) {
+            this.propagateUp(parent, check);
+        }
+    }
     findIndexInSelection(node) {
         let index = -1;
         if (this.selection && this.selection.length) {
@@ -1512,7 +1618,7 @@ class TreeTable {
         return this.selectionMode === 'multiple';
     }
     equals(node1, node2) {
-        return this.compareSelectionBy === 'equals' ? node1 === node2 : ObjectUtils.equals(node1.data, node2.data, this.dataKey);
+        return this.compareSelectionBy === 'equals' ? ObjectUtils.equals(node1, node2) : ObjectUtils.equals(node1.data, node2.data, this.dataKey);
     }
     filter(value, field, matchMode) {
         if (this.filterTimeout) {
@@ -1728,7 +1834,7 @@ class TreeTable {
         this.initialized = null;
     }
     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 });
-    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: `
+    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: `
         <div
             #container
             [ngStyle]="style"
@@ -2154,6 +2260,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                 type: Input
             }], virtualRowHeight: [{
                 type: Input
+            }], selectionKeys: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], contextMenuSelectionChange: [{
@@ -2190,6 +2298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
                 type: Output
             }], onEditCancel: [{
                 type: Output
+            }], selectionKeysChange: [{
+                type: Output
             }], containerViewChild: [{
                 type: ViewChild,
                 args: ['container']
@@ -3192,6 +3302,7 @@ class TTCheckbox {
     disabled;
     rowNode;
     checked;
+    partialChecked;
     focused;
     subscription;
     constructor(tt, tableService, cd) {
@@ -3199,19 +3310,44 @@ class TTCheckbox {
         this.tableService = tableService;
         this.cd = cd;
         this.subscription = this.tt.tableService.selectionSource$.subscribe(() => {
-            this.checked = this.tt.isSelected(this.rowNode.node);
+            if (this.tt.selectionKeys) {
+                this.checked = this.tt.isNodeSelected(this.rowNode.node);
+                this.partialChecked = this.tt.isNodePartialSelected(this.rowNode.node);
+            }
+            else {
+                this.checked = this.tt.isSelected(this.rowNode.node);
+                this.partialChecked = this.rowNode.node.partialSelected;
+            }
             this.cd.markForCheck();
         });
     }
     ngOnInit() {
-        this.checked = this.tt.isSelected(this.rowNode.node);
+        if (this.tt.selectionKeys) {
+            this.checked = this.tt.isNodeSelected(this.rowNode.node);
+            this.partialChecked = this.tt.isNodePartialSelected(this.rowNode.node);
+        }
+        else {
+            // for backward compatibility
+            this.checked = this.tt.isSelected(this.rowNode.node);
+            this.partialChecked = this.rowNode.node.partialSelected;
+        }
     }
     onClick(event) {
         if (!this.disabled) {
-            this.tt.toggleNodeWithCheckbox({
-                originalEvent: event,
-                rowNode: this.rowNode
-            });
+            if (this.tt.selectionKeys) {
+                const _check = !this.checked;
+                this.tt.toggleCheckbox({
+                    originalEvent: event,
+                    check: _check,
+                    rowNode: this.rowNode
+                });
+            }
+            else {
+                this.tt.toggleNodeWithCheckbox({
+                    originalEvent: event,
+                    rowNode: this.rowNode
+                });
+            }
         }
         DomHandler.clearSelection();
     }
@@ -3232,13 +3368,13 @@ class TTCheckbox {
             <div class="p-hidden-accessible">
                 <input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" tabindex="-1" />
             </div>
-            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-indeterminate': rowNode.node.partialSelected, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
+            <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">
                 <ng-container *ngIf="!tt.checkboxIconTemplate">
                     <CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="checked" />
-                    <MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="rowNode.node.partialSelected" />
+                    <MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="partialChecked" />
                 </ng-container>
                 <span *ngIf="tt.checkboxIconTemplate">
-                    <ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected: rowNode.node.partialSelected }"></ng-template>
+                    <ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected: partialChecked }"></ng-template>
                 </span>
             </div>
         </div>
@@ -3253,13 +3389,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.0", ngImpor
             <div class="p-hidden-accessible">
                 <input type="checkbox" [checked]="checked" (focus)="onFocus()" (blur)="onBlur()" tabindex="-1" />
             </div>
-            <div #box [ngClass]="{ 'p-checkbox-box': true, 'p-highlight': checked, 'p-focus': focused, 'p-indeterminate': rowNode.node.partialSelected, 'p-disabled': disabled }" role="checkbox" [attr.aria-checked]="checked">
+            <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">
                 <ng-container *ngIf="!tt.checkboxIconTemplate">
                     <CheckIcon [styleClass]="'p-checkbox-icon'" *ngIf="checked" />
-                    <MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="rowNode.node.partialSelected" />
+                    <MinusIcon [styleClass]="'p-checkbox-icon'" *ngIf="partialChecked" />
                 </ng-container>
                 <span *ngIf="tt.checkboxIconTemplate">
-                    <ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected: rowNode.node.partialSelected }"></ng-template>
+                    <ng-template *ngTemplateOutlet="tt.checkboxIconTemplate; context: { $implicit: checked, partialSelected: partialChecked }"></ng-template>
                 </span>
             </div>
         </div>
@@ -3301,7 +3437,7 @@ class TTHeaderCheckbox {
         this.checked = this.updateCheckedState();
     }
     onClick(event, checked) {
-        if (this.tt.value && this.tt.value.length > 0) {
+        if ((this.tt.value || this.tt.filteredNodes) && (this.tt.value.length > 0 || this.tt.filteredNodes.length > 0)) {
             this.tt.toggleNodesWithCheckbox(event, !checked);
         }
         DomHandler.clearSelection();
@@ -3325,13 +3461,27 @@ class TTHeaderCheckbox {
         let checked;
         const data = this.tt.filteredNodes || this.tt.value;
         if (data) {
-            for (let node of data) {
-                if (this.tt.isSelected(node)) {
-                    checked = true;
+            if (this.tt.selectionKeys) {
+                for (let node of data) {
+                    if (this.tt.isNodeSelected(node)) {
+                        checked = true;
+                    }
+                    else {
+                        checked = false;
+                        break;
+                    }
                 }
-                else {
-                    checked = false;
-                    break;
+            }
+            if (!this.tt.selectionKeys) {
+                // legacy selection support, will be removed in v18
+                for (let node of data) {
+                    if (this.tt.isSelected(node)) {
+                        checked = true;
+                    }
+                    else {
+                        checked = false;
+                        break;
+                    }
                 }
             }
         }