primeng
Version:
PrimeNG is an open source UI library for Angular featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeB
5,164 lines • 233 kB
JavaScript
export * from 'primeng/types/treetable';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, inject, EventEmitter, NgZone, booleanAttribute, numberAttribute, ContentChildren, ContentChild, ViewChild, Output, Input, ViewEncapsulation, Component, HostListener, Directive, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { BaseStyle } from 'primeng/base';
import * as i2 from '@angular/common';
import { isPlatformBrowser, CommonModule } from '@angular/common';
import * as i6 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { resolveFieldData, isEmpty, getOffset, addStyle, findSingle, getIndex, calculateScrollbarWidth, getHiddenElementOuterWidth, getHiddenElementOuterHeight, reorderArray, isClickable, equals, find, removeClass, addClass, calculateScrollbarHeight, clearSelection, invokeElementMethod, focus, isNotEmpty, getAttribute } from '@primeuix/utils';
import * as i4 from 'primeng/api';
import { FilterService, PrimeTemplate, SharedModule } from 'primeng/api';
import * as i5 from 'primeng/badge';
import { BadgeModule } from 'primeng/badge';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind, BindModule } from 'primeng/bind';
import { Checkbox } from 'primeng/checkbox';
import { DomHandler } from 'primeng/dom';
import { SpinnerIcon, ArrowDownIcon, ArrowUpIcon, SortAltIcon, SortAmountUpAltIcon, SortAmountDownIcon, ChevronDownIcon, ChevronRightIcon, CheckIcon } from 'primeng/icons';
import * as i3 from 'primeng/paginator';
import { PaginatorModule } from 'primeng/paginator';
import { Ripple } from 'primeng/ripple';
import { Scroller } from 'primeng/scroller';
import { Subject } from 'rxjs';
const style = /*css*/ `
/* For PrimeNG */
.p-treetable {
position: relative;
}
.p-treetable table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
.p-treetable .p-sortable-column {
cursor: pointer;
user-select: none;
}
.p-treetable .p-sortable-column .p-column-title,
.p-treetable .p-sortable-column .p-sortable-column-icon,
.p-treetable .p-sortable-column .p-sortable-column-badge {
vertical-align: middle;
}
.p-treetable-sort-icon {
color: dt('treetable.sort.icon.color');
font-size: dt('treetable.sort.icon.size');
width: dt('treetable.sort.icon.size');
height: dt('treetable.sort.icon.size');
transition: color dt('treetable.transition.duration');
}
.p-treetable .p-sortable-column .p-sortable-column-badge {
display: inline-flex;
align-items: center;
justify-content: center;
}
.p-treetable-auto-layout>.p-treetable-wrapper {
overflow-x: auto;
}
.p-treetable-auto-layout>.p-treetable-wrapper>table {
table-layout: auto;
}
.p-treetable-hoverable-rows .p-treetable-tbody>tr {
cursor: pointer;
}
.p-treetable-toggler {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
overflow: hidden;
position: relative;
}
/* Scrollable */
.p-treetable-scrollable-wrapper {
position: relative;
}
.p-treetable-scrollable-header,
.p-treetable-scrollable-footer {
overflow: hidden;
flex-shrink: 0;
}
.p-treetable-scrollable-body {
overflow: auto;
position: relative;
}
.p-treetable-virtual-table {
position: absolute;
}
/* Frozen Columns */
.p-treetable-frozen-view .p-treetable-scrollable-body {
overflow: hidden;
}
.p-treetable-frozen-view>.p-treetable-scrollable-body>table>.p-treetable-tbody>tr>td:last-child {
border-right: 0 none;
}
.p-treetable-unfrozen-view {
position: absolute;
top: 0;
}
/* Flex Scrollable */
.p-treetable-flex-scrollable {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.p-treetable-flex-scrollable .p-treetable-scrollable-wrapper,
.p-treetable-flex-scrollable .p-treetable-scrollable-view {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
.p-treetable-flex-scrollable .p-treetable-virtual-scrollable-body {
flex: 1;
}
/* Resizable */
.p-treetable-resizable>.p-treetable-wrapper {
overflow-x: auto;
}
.p-treetable-resizable .p-treetable-thead>tr>th,
.p-treetable-resizable .p-treetable-tfoot>tr>td,
.p-treetable-resizable .p-treetable-tbody>tr>td {
overflow: hidden;
}
.p-treetable-resizable .p-resizable-column {
background-clip: padding-box;
position: relative;
}
.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
display: none;
}
.p-treetable .p-column-resizer {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0;
width: dt('treetable.column.resizer.width');
height: 100%;
padding: 0px;
cursor: col-resize;
border: 1px solid transparent;
}
.p-treetable .p-column-resizer-helper {
width: dt('treetable.resize.indicator.width');
position: absolute;
z-index: 10;
display: none;
background: dt('treetable.resize.indicator.color');
}
.p-treetable .p-row-editor-init,
.p-treetable .p-row-editor-save,
.p-treetable .p-row-editor-cancel {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Reorder */
.p-treetable-reorder-indicator-up,
.p-treetable-reorder-indicator-down {
position: absolute;
display: none;
}
[ttReorderableColumn] {
cursor: move;
}
/* Loader */
.p-treetable-mask {
position: absolute !important;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.p-treetable-loading-icon {
font-size: dt('treetable.loading.icon.size');
width: dt('treetable.loading.icon.size');
height: dt('treetable.loading.icon.size');
}
/* Virtual Scroll */
.p-treetable .p-scroller-loading {
transform: none !important;
min-height: 0;
position: sticky;
top: 0;
left: 0;
}
.p-treetable .p-paginator-top {
border-color: dt('treetable.paginator.top.border.color');
border-style: solid;
border-width: dt('treetable.paginator.top.border.width');
}
.p-treetable .p-paginator-bottom {
border-color: dt('treetable.paginator.bottom.border.color');
border-style: solid;
border-width: dt('treetable.paginator.bottom.border.width');
}
.p-treetable .p-treetable-header {
background: dt('treetable.header.background');
color: dt('treetable.header.color');
border-color: dt('treetable.header.border.color');
border-style: solid;
border-width: dt('treetable.header.border.width');
padding: dt('treetable.header.padding');
font-weight: dt('treetable.column.title.font.weight');
}
.p-treetable .p-treetable-footer {
background: dt('treetable.footer.background');
color: dt('treetable.footer.color');
border-color: dt('treetable.footer.border.color');
border-style: solid;
border-width: dt('treetable.footer.border.width');
padding: dt('treetable.footer.padding');
font-weight: dt('treetable.column.footer.font.weight');
}
.p-treetable .p-treetable-thead>tr>th {
padding: dt('treetable.header.cell.padding');
background: dt('treetable.header.cell.background');
border-color: dt('treetable.header.cell.border.color');
border-style: solid;
border-width: 0 0 1px 0;
color: dt('treetable.header.cell.color');
font-weight: dt('treetable.column.title.font.weight');
text-align: start;
transition: background dt('treetable.transition.duration'), color dt('treetable.transition.duration'), border-color dt('treetable.transition.duration'),
outline-color dt('treetable.transition.duration'), box-shadow dt('treetable.transition.duration');
}
.p-treetable .p-treetable-tfoot>tr>td {
text-align: start;
padding: dt('treetable.footer.cell.padding');
border-color: dt('treetable.footer.cell.border.color');
border-style: solid;
border-width: 0 0 1px 0;
color: dt('treetable.footer.cell.color');
background: dt('treetable.footer.cell.background');
font-weight: dt('treetable.column.footer.font.weight');
}
.p-treetable .p-sortable-column {
cursor: pointer;
user-select: none;
outline-color: transparent;
vertical-align: middle;
}
.p-treetable .p-sortable-column .p-sortable-column-icon {
color: dt('treetable.sort.icon.color');
transition: color dt('treetable.transition.duration');
}
.p-treetable .p-sortable-column:not(.p-treetable-column-sorted):hover {
background: dt('treetable.header.cell.hover.background');
color: dt('treetable.header.cell.hover.color');
}
.p-treetable .p-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
color: dt('treetable.sort.icon.hover.color');
}
.p-treetable .p-sortable-column.p-treetable-column-sorted {
background: dt('treetable.header.cell.selected.background');
color: dt('treetable.header.cell.selected.color');
}
.p-treetable .p-sortable-column.p-treetable-column-sorted .p-treetable-sort-icon {
color: dt('treetable.header.cell.selected.color');
}
.p-treetable .p-sortable-column:focus-visible {
box-shadow: dt('treetable.header.cell.focus.ring.shadow');
outline: dt('treetable.header.cell.focus.ring.width') dt('treetable.header.cell.focus.ring.style') dt('treetable.header.cell.focus.ring.color');
outline-offset: dt('treetable.header.cell.focus.ring.offset');
}
.p-treetable-hoverable .p-treetable-selectable-row {
cursor: pointer;
}
.p-treetable .p-treetable-tbody > tr {
outline-color: transparent;
background: dt('treetable.row.background');
color: dt('treetable.row.color');
}
.p-treetable .p-treetable-tbody>tr>td {
text-align: start;
border-color: dt('treetable.body.cell.border.color');
border-style: solid;
border-width: 0 0 1px 0;
padding: dt('treetable.body.cell.padding');
}
.p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
width: dt('treetable.node.toggle.button.size');
height: dt('treetable.node.toggle.button.size');
color: dt('treetable.node.toggle.button.color');
border: 0 none;
background: transparent;
cursor: pointer;
border-radius: dt('treetable.node.toggle.button.border.radius');
transition: background dt('treetable.transition.duration'), color dt('treetable.transition.duration'), border-color dt('treetable.transition.duration'),
outline-color dt('treetable.transition.duration'), box-shadow dt('treetable.transition.duration');
outline-color: transparent;
user-select: none;
}
.p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover {
color: dt('treetable.node.toggle.button.hover.color');
background: dt('treetable.node.toggle.button.hover.background');
}
.p-treetable .p-treetable-tbody>tr>tr.treetable-row-selected .p-treetable-toggler:hover {
background: dt('treetable.node.toggle.button.selected.hover.background');
color: dt('treetable.node.toggle.button.selected.hover.color');
}
.p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus-visible {
box-shadow: dt('treetable.node.toggle.button.focus.ring.shadow');
outline: dt('treetable.node.toggle.button.focus.ring.width') dt('treetable.node.toggle.button.focus.ring.style') dt('treetable.node.toggle.button.focus.ring.color');
outline-offset: dt('treetable.node.toggle.button.focus.ring.offset');
}
.p-treetable .p-treetable-tbody>tr.p-treetable-row-selected {
background: dt('treetable.row.selected.background');
color: dt('treetable.row.selected.color');
}
.p-treetable-tbody > tr:focus-visible,
.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {
box-shadow: dt('treetable.row.focus.ring.shadow');
outline: dt('treetable.row.focus.ring.width') dt('treetable.row.focus.ring.style') dt('treetable.row.focus.ring.color');
outline-offset: dt('treetable.row.focus.ring.offset');
}
.p-treetable .p-treetable-tbody>tr.p-treetable-row-selected .p-treetable-toggler {
color: inherit;
}
.p-treetable .p-treetable-tbody>tr.p-treetable-row-selected .p-treetable-toggler:hover {
background: dt('treetable.node.toggle.button.selected.hover.background');
color: dt('treetable.node.toggle.button.selected.hover.color');
}
.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-treetable-row-selected):hover {
background: dt('treetable.row.hover.background');
color: dt('treetable.row.hover.color');
}
.p-treetable-gridlines .p-treetable-header {
border-width: 1px 1px 0 1px;
}
.p-treetable-gridlines .p-treetable-footer {
border-width: 0 1px 1px 1px;
}
.p-treetable-gridlines .p-treetable-paginator-top {
border-width: 1px 1px 0 1px;
}
.p-treetable-gridlines .p-treetable-paginator-bottom {
border-width: 0 1px 1px 1px;
}
.p-treetable-gridlines .p-treetable-thead > tr > th {
border-width: 1px 0 1px 1px;
}
.p-treetable-gridlines .p-treetable-thead > tr > th:last-child {
border-width: 1px;
}
.p-treetable-gridlines .p-treetable-tbody > tr > td {
border-width: 1px 0 0 1px;
}
.p-treetable-gridlines .p-treetable-tbody > tr > td:last-child {
border-width: 1px 1px 0 1px;
}
.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {
border-width: 1px 0 1px 1px;
}
.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td:last-child {
border-width: 1px;
}
.p-treetable-gridlines .p-treetable-tfoot > tr > td {
border-width: 1px 0 1px 1px;
}
.p-treetable-gridlines .p-treetable-tfoot > tr > td:last-child {
border-width: 1px 1px 1px 1px;
}
.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {
border-width: 0 0 1px 1px;
}
.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td:last-child {
border-width: 0 1px 1px 1px;
}
.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {
border-width: 0 0 1px 1px;
}
.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td:last-child {
border-width: 0 1px 1px 1px;
}
.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td {
border-width: 0 0 0 1px;
}
.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td:last-child {
border-width: 0 1px 0 1px;
}
.p-treetable.p-treetable-sm .p-treetable-header {
padding: 0.65625rem 0.875rem;
}
.p-treetable.p-treetable-sm .p-treetable-thead>tr>th {
padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-sm .p-treetable-tbody>tr>td {
padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td {
padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-sm .p-treetable-footer {
padding: 0.375rem 0.5rem;
}
.p-treetable.p-treetable-lg .p-treetable-header {
padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-thead>tr>th {
padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td {
padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td {
padding: 0.9375rem 1.25rem;
}
.p-treetable.p-treetable-lg .p-treetable-footer {
padding: 0.9375rem 1.25rem;
}
p-treetabletoggler + p-treetablecheckbox .p-checkbox,
p-treetable-toggler + p-treetable-checkbox .p-checkbox,
p-tree-table-toggler + p-tree-table-checkbox .p-checkbox {
vertical-align: middle;
}
p-treetabletoggler + p-treetablecheckbox + span,
p-treetable-toggler + p-treetable-checkbox + span,
p-tree-table-toggler + p-tree-table-checkbox + span {
vertical-align: middle;
}
p-treetable-sort-icon {
display: inline-flex;
align-items: center;
gap: dt('treetable.header.cell.gap');
}
`;
const classes = {
root: ({ instance }) => [
'p-treetable p-component',
{
'p-treetable-gridlines': instance.showGridlines,
'p-treetable-hoverable-rows': instance.rowHover || instance.selectionMode === 'single' || instance.selectionMode === 'multiple',
'p-treetable-auto-layout': instance.autoLayout,
'p-treetable-resizable': instance.resizableColumns,
'p-treetable-resizable-fit': instance.resizableColumns && instance.columnResizeMode === 'fit',
'p-treetable-flex-scrollable': instance.scrollable && instance.scrollHeight === 'flex'
}
],
loading: 'p-treetable-loading',
mask: 'p-treetable-mask p-overlay-mask',
loadingIcon: 'p-treetable-loading-icon',
header: 'p-treetable-header',
pcPaginator: ({ instance }) => ['p-treetable-paginator-' + instance.paginatorPosition, instance.paginatorStyleClass],
tableContainer: 'p-treetable-table-container',
table: ({ instance }) => ({
'p-treetable-table': true,
'p-treetable-scrollable-table': instance.scrollable,
'p-treetable-resizable-table': instance.resizableColumns,
'p-treetable-resizable-table-fit': instance.resizableColumns && instance.columnResizeMode === 'fit'
}),
thead: 'p-treetable-thead',
sortableColumn: ({ instance }) => ({
'p-sortable-column': instance.isEnabled(),
'p-treetable-column-sorted': instance.sorted
}),
sortableColumnIcon: 'p-treetable-sort-icon',
sortableColumnBadge: 'p-sortable-column-badge',
columnResizer: 'p-treetable-column-resizer',
columnHeaderContent: 'p-treetable-column-header-content',
columnTitle: 'p-treetable-column-title',
sortIcon: 'p-treetable-sort-icon',
pcSortBadge: 'p-treetable-sort-badge',
tbody: 'p-treetable-tbody',
row: ({ instance }) => ({
'p-treetable-row-selected': instance.selected
}),
contextMenuRow: ({ instance }) => ({
'p-treetable-contextmenu-row-selected': instance.selected
}),
toggler: 'p-treetable-toggler',
nodeToggleButton: 'p-treetable-node-toggle-button',
nodeToggleIcon: 'p-treetable-node-toggle-icon',
pcNodeCheckbox: 'p-treetable-node-checkbox',
tfoot: 'p-treetable-tfoot',
footerCell: ({ instance }) => ({
'p-treetable-frozen-column': instance.columnProp('frozen')
}),
footer: 'p-treetable-footer',
columnResizeIndicator: 'p-treetable-column-resize-indicator',
wrapper: 'p-treetable-wrapper',
scrollableWrapper: 'p-treetable-scrollable-wrapper',
scrollableView: 'p-treetable-scrollable-view',
frozenView: 'p-treetable-frozen-view',
columnResizerHelper: 'p-column-resizer-helper',
reorderIndicatorUp: 'p-treetable-reorder-indicator-up',
reorderIndicatorDown: 'p-treetable-reorder-indicator-down',
scrollableHeader: 'p-treetable-scrollable-header',
scrollableHeaderBox: 'p-treetable-scrollable-header-box',
scrollableHeaderTable: 'p-treetable-scrollable-header-table',
scrollableBody: 'p-treetable-scrollable-body',
scrollableFooter: 'p-treetable-scrollable-footer',
scrollableFooterBox: 'p-treetable-scrollable-footer-box',
scrollableFooterTable: 'p-treetable-scrollable-footer-table'
};
class TreeTableStyle extends BaseStyle {
name = 'treetable';
style = style;
classes = classes;
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableStyle, decorators: [{
type: Injectable
}] });
/**
*
* TreeTable is used to display hierarchical data in tabular format.
*
* [Live Demo](https://www.primeng.org/treetable/)
*
* @module treetablestyle
*
*/
var TreeTableClasses;
(function (TreeTableClasses) {
/**
* Class name of the root element
*/
TreeTableClasses["root"] = "p-treetable";
/**
* Class name of the loading element
*/
TreeTableClasses["loading"] = "p-treetable-loading";
/**
* Class name of the mask element
*/
TreeTableClasses["mask"] = "p-treetable-mask";
/**
* Class name of the loading icon element
*/
TreeTableClasses["loadingIcon"] = "p-treetable-loading-icon";
/**
* Class name of the header element
*/
TreeTableClasses["header"] = "p-treetable-header";
/**
* Class name of the paginator element
*/
TreeTableClasses["pcPaginator"] = "p-treetable-paginator-[position]";
/**
* Class name of the table container element
*/
TreeTableClasses["tableContainer"] = "p-treetable-table-container";
/**
* Class name of the table element
*/
TreeTableClasses["table"] = "p-treetable-table";
/**
* Class name of the thead element
*/
TreeTableClasses["thead"] = "p-treetable-thead";
/**
* Class name of the column resizer element
*/
TreeTableClasses["columnResizer"] = "p-treetable-column-resizer";
/**
* Class name of the column title element
*/
TreeTableClasses["columnTitle"] = "p-treetable-column-title";
/**
* Class name of the sort icon element
*/
TreeTableClasses["sortIcon"] = "p-treetable-sort-icon";
/**
* Class name of the sort badge element
*/
TreeTableClasses["pcSortBadge"] = "p-treetable-sort-badge";
/**
* Class name of the tbody element
*/
TreeTableClasses["tbody"] = "p-treetable-tbody";
/**
* Class name of the node toggle button element
*/
TreeTableClasses["nodeToggleButton"] = "p-treetable-node-toggle-button";
/**
* Class name of the node toggle icon element
*/
TreeTableClasses["nodeToggleIcon"] = "p-treetable-node-toggle-icon";
/**
* Class name of the node checkbox element
*/
TreeTableClasses["pcNodeCheckbox"] = "p-treetable-node-checkbox";
/**
* Class name of the empty message element
*/
TreeTableClasses["emptyMessage"] = "p-treetable-empty-message";
/**
* Class name of the tfoot element
*/
TreeTableClasses["tfoot"] = "p-treetable-tfoot";
/**
* Class name of the footer element
*/
TreeTableClasses["footer"] = "p-treetable-footer";
/**
* Class name of the column resize indicator element
*/
TreeTableClasses["columnResizeIndicator"] = "p-treetable-column-resize-indicator";
/**
* Class name of the wrapper element
*/
TreeTableClasses["wrapper"] = "p-treetable-wrapper";
/**
* Class name of the scrollable wrapper element
*/
TreeTableClasses["scrollableWrapper"] = "p-treetable-scrollable-wrapper";
/**
* Class name of the scrollable view element
*/
TreeTableClasses["scrollableView"] = "p-treetable-scrollable-view";
/**
* Class name of the frozen view element
*/
TreeTableClasses["frozenView"] = "p-treetable-frozen-view";
/**
* Class name of the column resizer helper element
*/
TreeTableClasses["columnResizerHelper"] = "p-treetable-column-resizer-helper";
/**
* Class name of the reorder indicator up element
*/
TreeTableClasses["reorderIndicatorUp"] = "p-treetable-reorder-indicator-up";
/**
* Class name of the reorder indicator down element
*/
TreeTableClasses["reorderIndicatorDown"] = "p-treetable-reorder-indicator-down";
/**
* Class name of the scrollable header element
*/
TreeTableClasses["scrollableHeader"] = "p-treetable-scrollable-header";
/**
* Class name of the scrollable header box element
*/
TreeTableClasses["scrollableHeaderBox"] = "p-treetable-scrollable-header-box";
/**
* Class name of the scrollable header table element
*/
TreeTableClasses["scrollableHeaderTable"] = "p-treetable-scrollable-header-table";
/**
* Class name of the scrollable body element
*/
TreeTableClasses["scrollableBody"] = "p-treetable-scrollable-body";
/**
* Class name of the scrollable footer element
*/
TreeTableClasses["scrollableFooter"] = "p-treetable-scrollable-footer";
/**
* Class name of the scrollable footer box element
*/
TreeTableClasses["scrollableFooterBox"] = "p-treetable-scrollable-footer-box";
/**
* Class name of the scrollable footer table element
*/
TreeTableClasses["scrollableFooterTable"] = "p-treetable-scrollable-footer-table";
/**
* Class name of the sortable column icon element
*/
TreeTableClasses["sortableColumnIcon"] = "p-sortable-column-icon";
})(TreeTableClasses || (TreeTableClasses = {}));
const TREETABLE_INSTANCE = new InjectionToken('TREETABLE_INSTANCE');
class TreeTableService {
sortSource = new Subject();
selectionSource = new Subject();
contextMenuSource = new Subject();
uiUpdateSource = new Subject();
totalRecordsSource = new Subject();
sortSource$ = this.sortSource.asObservable();
selectionSource$ = this.selectionSource.asObservable();
contextMenuSource$ = this.contextMenuSource.asObservable();
uiUpdateSource$ = this.uiUpdateSource.asObservable();
totalRecordsSource$ = this.totalRecordsSource.asObservable();
onSort(sortMeta) {
this.sortSource.next(sortMeta);
}
onSelectionChange() {
this.selectionSource.next(null);
}
onContextMenu(node) {
this.contextMenuSource.next(node);
}
onUIUpdate(value) {
this.uiUpdateSource.next(value);
}
onTotalRecordsChange(value) {
this.totalRecordsSource.next(value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableService, decorators: [{
type: Injectable
}] });
/**
* TreeTable is used to display hierarchical data in tabular format.
* @group Components
*/
class TreeTable extends BaseComponent {
_componentStyle = inject(TreeTableStyle);
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
}
/**
* An array of objects to represent dynamic columns.
* @group Props
*/
columns;
/**
* Style class of the component.
* @deprecated since v20.0.0, use `class` instead.
* @group Props
*/
styleClass;
/**
* Inline style of the table.
* @group Props
*/
tableStyle;
/**
* Style class of the table.
* @group Props
*/
tableStyleClass;
/**
* Whether the cell widths scale according to their content or not.
* @group Props
*/
autoLayout;
/**
* Defines if data is loaded and interacted with in lazy manner.
* @group Props
*/
lazy = false;
/**
* Whether to call lazy loading on initialization.
* @group Props
*/
lazyLoadOnInit = true;
/**
* When specified as true, enables the pagination.
* @group Props
*/
paginator;
/**
* Number of rows to display per page.
* @group Props
*/
rows;
/**
* Index of the first row to be displayed.
* @group Props
*/
first = 0;
/**
* Number of page links to display in paginator.
* @group Props
*/
pageLinks = 5;
/**
* Array of integer/object values to display inside rows per page dropdown of paginator
* @group Props
*/
rowsPerPageOptions;
/**
* Whether to show it even there is only one page.
* @group Props
*/
alwaysShowPaginator = true;
/**
* Position of the paginator.
* @group Props
*/
paginatorPosition = 'bottom';
/**
* Custom style class for paginator
* @group Props
*/
paginatorStyleClass;
/**
* Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
* @group Props
*/
paginatorDropdownAppendTo;
/**
* Template of the current page report element. Available placeholders are {currentPage},{totalPages},{rows},{first},{last} and {totalRecords}
* @group Props
*/
currentPageReportTemplate = '{currentPage} of {totalPages}';
/**
* Whether to display current page report.
* @group Props
*/
showCurrentPageReport;
/**
* Whether to display a dropdown to navigate to any page.
* @group Props
*/
showJumpToPageDropdown;
/**
* When enabled, icons are displayed on paginator to go first and last page.
* @group Props
*/
showFirstLastIcon = true;
/**
* Whether to show page links.
* @group Props
*/
showPageLinks = true;
/**
* Sort order to use when an unsorted column gets sorted by user interaction.
* @group Props
*/
defaultSortOrder = 1;
/**
* Defines whether sorting works on single column or on multiple columns.
* @group Props
*/
sortMode = 'single';
/**
* When true, resets paginator to first page after sorting.
* @group Props
*/
resetPageOnSort = true;
/**
* Whether to use the default sorting or a custom one using sortFunction.
* @group Props
*/
customSort;
/**
* Specifies the selection mode, valid values are "single" and "multiple".
* @group Props
*/
selectionMode;
/**
* Selected row with a context menu.
* @group Props
*/
contextMenuSelection;
/**
* Mode of the contet menu selection.
* @group Props
*/
contextMenuSelectionMode = 'separate';
/**
* A property to uniquely identify a record in data.
* @group Props
*/
dataKey;
/**
* Defines whether metaKey is should be considered for the selection. On touch enabled devices, metaKeySelection is turned off automatically.
* @group Props
*/
metaKeySelection = false;
/**
* Algorithm to define if a row is selected, valid values are "equals" that compares by reference and "deepEquals" that compares all fields.
* @group Props
*/
compareSelectionBy = 'deepEquals';
/**
* Adds hover effect to rows without the need for selectionMode.
* @group Props
*/
rowHover;
/**
* Displays a loader to indicate data load is in progress.
* @group Props
*/
loading;
/**
* The icon to show while indicating data load is in progress.
* @group Props
*/
loadingIcon;
/**
* Whether to show the loading mask when loading property is true.
* @group Props
*/
showLoader = true;
/**
* When specified, enables horizontal and/or vertical scrolling.
* @group Props
*/
scrollable;
/**
* Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
* @group Props
*/
scrollHeight;
/**
* Whether the data should be loaded on demand during scroll.
* @group Props
*/
virtualScroll;
/**
* Height of a row to use in calculations of virtual scrolling.
* @group Props
*/
virtualScrollItemSize;
/**
* Whether to use the scroller feature. The properties of scroller component can be used like an object in it.
* @group Props
*/
virtualScrollOptions;
/**
* The delay (in milliseconds) before triggering the virtual scroll. This determines the time gap between the user's scroll action and the actual rendering of the next set of items in the virtual scroll.
* @group Props
*/
virtualScrollDelay = 150;
/**
* Width of the frozen columns container.
* @group Props
*/
frozenWidth;
/**
* An array of objects to represent dynamic columns that are frozen.
* @group Props
*/
frozenColumns;
/**
* When enabled, columns can be resized using drag and drop.
* @group Props
*/
resizableColumns;
/**
* Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
* @group Props
*/
columnResizeMode = 'fit';
/**
* When enabled, columns can be reordered using drag and drop.
* @group Props
*/
reorderableColumns;
/**
* Local ng-template varilable of a ContextMenu.
* @group Props
*/
contextMenu;
/**
* Function to optimize the dom operations by delegating to ngForTrackBy, default algorithm checks for object identity.
* @group Props
*/
rowTrackBy = (index, item) => item;
/**
* An array of FilterMetadata objects to provide external filters.
* @group Props
*/
filters = {};
/**
* An array of fields as string to use in global filtering.
* @group Props
*/
globalFilterFields;
/**
* Delay in milliseconds before filtering the data.
* @group Props
*/
filterDelay = 300;
/**
* Mode for filtering valid values are "lenient" and "strict". Default is lenient.
* @group Props
*/
filterMode = 'lenient';
/**
* Locale to use in filtering. The default locale is the host environment's current locale.
* @group Props
*/
filterLocale;
/**
* Locale to be used in paginator formatting.
* @group Props
*/
paginatorLocale;
/**
* Number of total records, defaults to length of value when not defined.
* @group Props
*/
get totalRecords() {
return this._totalRecords;
}
set totalRecords(val) {
this._totalRecords = val;
this.tableService.onTotalRecordsChange(this._totalRecords);
}
/**
* Name of the field to sort data by default.
* @group Props
*/
get sortField() {
return this._sortField;
}
set sortField(val) {
this._sortField = val;
}
/**
* Order to sort when default sorting is enabled.
* @defaultValue 1
* @group Props
*/
get sortOrder() {
return this._sortOrder;
}
set sortOrder(val) {
this._sortOrder = val;
}
/**
* An array of SortMeta objects to sort the data by default in multiple sort mode.
* @defaultValue null
* @group Props
*/
get multiSortMeta() {
return this._multiSortMeta;
}
set multiSortMeta(val) {
this._multiSortMeta = val;
}
/**
* Selected row in single mode or an array of values in multiple mode.
* @defaultValue null
* @group Props
*/
get selection() {
return this._selection;
}
set selection(val) {
this._selection = val;
}
/**
* An array of objects to display.
* @defaultValue null
* @group Props
*/
get value() {
return this._value;
}
set value(val) {
this._value = val;
}
/**
* Indicates the height of rows to be scrolled.
* @defaultValue 28
* @group Props
* @deprecated use virtualScrollItemSize property instead.
*/
get virtualRowHeight() {
return this._virtualRowHeight;
}
set virtualRowHeight(val) {
this._virtualRowHeight = val;
console.log('The virtualRowHeight property is deprecated, use virtualScrollItemSize property instead.');
}
/**
* 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);
}
/**
* Whether to show grid lines between cells.
* @defaultValue false
* @group Props
*/
showGridlines = false;
/**
* Callback to invoke on selected node change.
* @param {TreeTableNode} object - Node instance.
* @group Emits
*/
selectionChange = new EventEmitter();
/**
* Callback to invoke on context menu selection change.
* @param {TreeTableNode} object - Node instance.
* @group Emits
*/
contextMenuSelectionChange = new EventEmitter();
/**
* Callback to invoke when data is filtered.
* @param {TreeTableFilterEvent} event - Custom filter event.
* @group Emits
*/
onFilter = new EventEmitter();
/**
* Callback to invoke when a node is expanded.
* @param {TreeTableNodeExpandEvent} event - Node expand event.
* @group Emits
*/
onNodeExpand = new EventEmitter();
/**
* Callback to invoke when a node is collapsed.
* @param {TreeTableNodeCollapseEvent} event - Node collapse event.
* @group Emits
*/
onNodeCollapse = new EventEmitter();
/**
* Callback to invoke when pagination occurs.
* @param {TreeTablePaginatorState} object - Paginator state.
* @group Emits
*/
onPage = new EventEmitter();
/**
* Callback to invoke when a column gets sorted.
* @param {Object} Object - Sort data.
* @group Emits
*/
onSort = new EventEmitter();
/**
* Callback to invoke when paging, sorting or filtering happens in lazy mode.
* @param {TreeTableLazyLoadEvent} event - Custom lazy load event.
* @group Emits
*/
onLazyLoad = new EventEmitter();
/**
* An event emitter to invoke on custom sorting, refer to sorting section for details.
* @param {TreeTableSortEvent} event - Custom sort event.
* @group Emits
*/
sortFunction = new EventEmitter();
/**
* Callback to invoke when a column is resized.
* @param {TreeTableColResizeEvent} event - Custom column resize event.
* @group Emits
*/
onColResize = new EventEmitter();
/**
* Callback to invoke when a column is reordered.
* @param {TreeTableColumnReorderEvent} event - Custom column reorder.
* @group Emits
*/
onColReorder = new EventEmitter();
/**
* Callback to invoke when a node is selected.
* @param {TreeTableNode} object - Node instance.
* @group Emits
*/
onNodeSelect = new EventEmitter();
/**
* Callback to invoke when a node is unselected.
* @param {TreeTableNodeUnSelectEvent} event - Custom node unselect event.
* @group Emits
*/
onNodeUnselect = new EventEmitter();
/**
* Callback to invoke when a node is selected with right click.
* @param {TreeTableContextMenuSelectEvent} event - Custom context menu select event.
* @group Emits
*/
onContextMenuSelect = new EventEmitter();
/**
* Callback to invoke when state of header checkbox changes.
* @param {TreeTableHeaderCheckboxToggleEvent} event - Custom checkbox toggle event.
* @group Emits
*/
onHeaderCheckboxToggle = new EventEmitter();
/**
* Callback to invoke when a cell switches to edit mode.
* @param {TreeTableEditEvent} event - Custom edit event.
* @group Emits
*/
onEditInit = new EventEmitter();
/**
* Callback to invoke when cell edit is completed.
* @param {TreeTableEditEvent} event - Custom edit event.
* @group Emits
*/
onEditComplete = new EventEmitter();
/**
* Callback to invoke when cell edit is cancelled with escape key.
* @param {TreeTableEditEvent} event - Custom edit event.
* @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();
resizeHelperViewChild;
reorderIndicatorUpViewChild;
reorderIndicatorDownViewChild;
tableViewChild;
scrollableViewChild;
scrollableFrozenViewChild;
_value = [];
_virtualRowHeight = 28;
_selectionKeys;
serializedValue;
_totalRecords = 0;
_multiSortMeta;
_sortField;
_sortOrder = 1;
filteredNodes;
filterTimeout;
_colGroupTemplate;
colGroupTemplate;
_captionTemplate;
captionTemplate;
_headerTemplate;
headerTemplate;
_bodyTemplate;
bodyTemplate;
_footerTemplate;
footerTemplate;
_summaryTemplate;
summaryTemplate;
_emptyMessageTemplate;
emptyMessageTemplate;
_paginatorLeftTemplate;
paginatorLeftTemplate;
_paginatorRightTemplate;
paginatorRightTemplate;
_paginatorDropdownItemTemplate;
paginatorDropdownItemTemplate;
_frozenHeaderTemplate;
frozenHeaderTemplate;
_frozenBodyTemplate;
frozenBodyTemplate;
_frozenFooterTemplate;
frozenFooterTemplate;
_frozenColGroupTemplate;
frozenColGroupTemplate;
_loadingIconTemplate;
loadingIconTemplate;
_reorderIndicatorUpIconTemplate;
reorderIndicatorUpIconTemplate;
_reorderIndicatorDownIconTemplate;
reorderIndicatorDownIconTemplate;
_sortIconTemplate;
sortIconTemplate;
_checkboxIconTemplate;
checkboxIconTemplate;
_headerCheckboxIconTemplate;
headerCheckboxIconTemplate;
_togglerIconTemplate;
togglerIconTemplate;
_paginatorFirstPageLinkIconTemplate;
paginatorFirstPageLinkIconTemplate;
_paginatorLastPageLinkIconTemplate;
paginatorLastPageLinkIconTemplate;
_paginatorPreviousPageLinkIconTemplate;
paginatorPreviousPageLinkIconTemplate;
_paginatorNextPageLinkIconTemplate;
paginatorNextPageLinkIconTemplate;
_loaderTemplate;
loaderTemplate;
lastResizerHelperX;
reorderIconWidth;
reorderIconHeight;
draggedColumn;
dropPosition;
preventSelectionSetterPropagation;
_selection;
selectedKeys = {};
rowTouched;
editingCell;
editingCellData;
editingCellField;
editingCellClick;
documentEditListener;
initialized;
toggleRowIndex;
onInit() {
if (this.lazy && this.lazyLoadOnInit && !this.virtualScroll) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
this.initialized = true;
}
templates;
onAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'caption':
this.captionTemplate = item.template;
break;
case 'header':
this.headerTemplate = item.template;
break;
case 'body':
this.bodyTemplate = item.template;
break;
case 'footer':
this.footerTemplate = item.template;
break;
case 'summary':
this.summaryTemplate = item.template;
break;
case 'colgroup':
this.colGroupTemplate = item.template;
break;
case 'emptymessage':
this.emptyMessageTemplate = item.template;
break;
case 'paginatorleft':
this.paginatorLeftTemplate = item.template;
break;
case 'paginatorright':
this.paginatorRightTemplate = item.template;
break;
case 'paginatordropdownitem':
this.paginatorDropdownItemTemplate = item.template;
break;
case 'frozenheader':
this.frozenHeaderTemplate = item.template;
break;
case 'frozenbody':
this.frozenBodyTemplate = item.template;
break;
case 'frozenfooter':
this.frozenFooterTemplate = item.template;
break;
case 'frozencolgroup':
this.frozenColGroupTemplate = item.template;
break;
case 'loadingicon':
this.loadingIconTemplate = item.template;
break;
case 'reorderindicatorupicon':
this.reorderIndicatorUpIconTemplate = item.template;
break;
case 'reorderindicatordownicon':
this.reorderIndicatorDownIconTemplate = item.template;
break;
case 'sorticon':
this.sortIconTemplate = item.template;
break;
case 'checkboxicon':
this.checkboxIconTemplate = item.template;
break;
case 'headercheckboxicon':
this.headerCheckboxIconTemplate = item.template;
break;
case 'togglericon':
this.togglerIconTemplate = item.template;
break;
case 'paginatorfirstpagelinkicon':
this.paginatorFirstPageLinkIconTemplate = item.template;
break;
case 'paginatorlastpagelinkicon':
this.paginatorLastPageLinkIconTemplate = item.template;
break;
case 'paginatorpreviouspagelinkicon':
this.paginatorPreviousPageLinkIconTemplate = item.template;
break;
case 'paginatornextpagelinkicon':
this.paginatorNextPageLinkIconTemplate = item.template;
break;
case 'loader':
this.loaderTemplate = item.template;
break;
}
});
}
filterService = inject(FilterService);
tableService = inject(TreeTableService);
zone = inject(NgZone);
onChanges(simpleChange) {
if (simpleChange.value) {
this._value = simpleChange.value.currentValue;
if (!this.lazy) {
this.totalRecords = this._value ? this._value.length : 0;
if (this.sortMode == 'single' && this.sortField)
this.sortSingle();
else if (this.sortMode == 'multiple' && this.multiSortMeta)
this.sortMultiple();
else if (this.hasFilter())
//sort already filters
this._filter();
}
this.updateSerializedValue();
this.tableService.onUIUpdate(this.value);
}
if (simpleChange.sortField) {
this._sortField = simpleChange.sortField.currentValue;
//avoid triggering lazy load prior to lazy initialization at onInit
if (!this.lazy || this.initialized) {
if (this.sortMode === 'single') {
this.sortSingle();
}
}
}
if (simpleChange.sortOrder) {
this._sortOrder = simpleChange.sortOrder.currentValue;
//avoid triggering lazy load prior to lazy initialization at onInit
if (!this.lazy || this.initialized) {
if (this.sortMode === 'single') {
this.sortSingle();
}
}
}
if (simpleChange.multiSortMeta) {
this._multiSortMeta = simpleChange.multiSortMeta.currentValue;
if (this.sortMode === 'multiple') {
this.sortMultiple();
}
}
if (simpleChange.selection) {
this._selection = simpleChange.selection.currentValue;
if (!this.preventSelectionSetterPropagation) {
this.updateselectedKeys();
this.tableService.onSelectionChange();
}
this.preventSelectionSetterPropagation = false;
}
}
updateSerializedValue() {
this.serializedValue = [];
if (this.paginator)
this.serializePageNodes();
else
this.serializeNodes(null, this.filteredNodes || this.value, 0, true);
}
serializeNodes(parent, nodes, level, visible) {
if (nodes && nodes.length) {
for (let node of nodes) {
node.parent = parent;
const rowNode = {
node: node,
parent: parent,
level: level,
visible: visible && (parent ? parent.expanded : true)
};
this.serializedValue.push(rowNode);
if (rowNode.visible && node.expanded) {
this.serializeNodes(node, node.children, level + 1, rowNode.visible);
}
}
}
}
serializePageNodes() {
let data = this.filteredNodes || this.value;
this.serializedValue = [];
if (data && data.length) {
const first = this.lazy ? 0 : this.first;
for (let i = first; i < first + this.rows; i++) {
let node = data[i];
if (node) {
this.serializedValue.push({
node: node,
parent: null,
level: 0,
visible: true
});
this.serializeNodes(node, node.children, 1, true);
}
}
}
}
updateselectedKeys() {
if (this.dataKey && this._selection) {
this.selectedKeys = {};
if (Array.isArray(this._selection)) {
for (let node of this._selection) {
this.selectedKeys[String(resolveFieldData(node.data, this.dataKey))] = 1;
}
}
else {
this.selectedKeys[String(resolveFieldData(this._selection.data, this.dataKey))] = 1;
}
}
}
onPageChange(event) {
this.first = event.first;
this.rows = event.rows;
if (this.lazy)
this.onLazyLoad.emit(this.createLazyLoadMetadata());
else
this.serializePageNodes();
this.onPage.emit({
first: this.first,
rows: this.rows
});
this.tableService.onUIUpdate(this.value);
if (this.scrollable) {
this.resetScrollTop();
}
}
sort(event) {
let originalEvent = event.originalEvent;
if (this.sortMode === 'single') {
this._sortOrder = this.sortField === event.field ? this.sortOrder * -1 : this.defaultSortOrder;
this._sortField = event.field;
this.sortSingle();
if (this.resetPageOnSort && this.scrollable) {
this.resetScrollTop();
}
}
if (this.sortMode === 'multiple') {
let metaKey = originalEvent.metaKey || originalEvent.ctrlKey;
let sortMeta = this.getSortMeta(event.field);
if (sortMeta) {
if (!metaKey) {
this._multiSortMeta = [{ field: event.field, order: sortMeta.order * -1 }];
if (this.resetPageOnSort && this.scrollable) {
this.resetScrollTop();
}
}
else {
sortMeta.order = sortMeta.order * -1;
}
}
else {
if (!metaKey || !this.multiSortMeta) {
this._multiSortMeta = [];
if (this.resetPageOnSort && this.scrollable) {
this.resetScrollTop();
}
}
this.multiSortMeta.push({ field: event.field, order: this.defaultSortOrder });
}
this.sortMultiple();
}
}
sortSingle() {
if (this.sortField && this.sortOrder) {
if (this.lazy) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
else if (this.value) {
this.sortNodes(this.value);
if (this.hasFilter()) {
this._filter();
}
}
let sortMeta = {
field: this.sortField,
order: this.sortOrder
};
this.onSort.emit(sortMeta);
this.tableService.onSort(sortMeta);
this.updateSerializedValue();
}
}
sortNodes(nodes) {
if (!nodes || nodes.length === 0) {
return;
}
if (this.customSort) {
this.sortFunction.emit({
data: nodes,
mode: this.sortMode,
field: this.sortField,
order: this.sortOrder
});
}
else {
nodes.sort((node1, node2) => {
let value1 = resolveFieldData(node1.data, this.sortField);
let value2 = resolveFieldData(node2.data, this.sortField);
let result = 0;
if (value1 == null && value2 != null)
result = -1;
else if (value1 != null && value2 == null)
result = 1;
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
result = value1.localeCompare(value2, undefined, { numeric: true });
else
result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
return this.sortOrder * result;
});
}
for (let node of nodes) {
this.sortNodes(node.children);
}
}
sortMultiple() {
if (this.multiSortMeta) {
if (this.lazy) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
else if (this.value) {
this.sortMultipleNodes(this.value);
if (this.hasFilter()) {
this._filter();
}
}
this.onSort.emit({
multisortmeta: this.multiSortMeta
});
this.updateSerializedValue();
this.tableService.onSort(this.multiSortMeta);
}
}
sortMultipleNodes(nodes) {
if (!nodes || nodes.length === 0) {
return;
}
if (this.customSort) {
this.sortFunction.emit({
data: this.value,
mode: this.sortMode,
multiSortMeta: this.multiSortMeta
});
}
else {
nodes.sort((node1, node2) => {
return this.multisortField(node1, node2, this.multiSortMeta, 0);
});
}
for (let node of nodes) {
this.sortMultipleNodes(node.children);
}
}
multisortField(node1, node2, multiSortMeta, index) {
if (isEmpty(this.multiSortMeta) || isEmpty(multiSortMeta[index])) {
return 0;
}
let value1 = resolveFieldData(node1.data, multiSortMeta[index].field);
let value2 = resolveFieldData(node2.data, multiSortMeta[index].field);
let result = 0;
if (value1 == null && value2 != null)
result = -1;
else if (value1 != null && value2 == null)
result = 1;
else if (value1 == null && value2 == null)
result = 0;
if (typeof value1 == 'string' || value1 instanceof String) {
if (value1.localeCompare && value1 != value2) {
return multiSortMeta[index].order * value1.localeCompare(value2, undefined, { numeric: true });
}
}
else {
result = value1 < value2 ? -1 : 1;
}
if (value1 == value2) {
return multiSortMeta.length - 1 > index ? this.multisortField(node1, node2, multiSortMeta, index + 1) : 0;
}
return multiSortMeta[index].order * result;
}
getSortMeta(field) {
if (this.multiSortMeta && this.multiSortMeta.length) {
for (let i = 0; i < this.multiSortMeta.length; i++) {
if (this.multiSortMeta[i].field === field) {
return this.multiSortMeta[i];
}
}
}
return null;
}
isSorted(field) {
if (this.sortMode === 'single') {
return this.sortField && this.sortField === field;
}
else if (this.sortMode === 'multiple') {
let sorted = false;
if (this.multiSortMeta) {
for (let i = 0; i < this.multiSortMeta.length; i++) {
if (this.multiSortMeta[i].field == field) {
sorted = true;
break;
}
}
}
return sorted;
}
}
createLazyLoadMetadata() {
return {
first: this.first,
rows: this.rows,
sortField: this.sortField,
sortOrder: this.sortOrder,
filters: this.filters,
globalFilter: this.filters && this.filters['global'] ? this.filters['global'].value : null,
multiSortMeta: this.multiSortMeta,
forceUpdate: () => this.cd.detectChanges()
};
}
onLazyItemLoad(event) {
this.onLazyLoad.emit({
...this.createLazyLoadMetadata(),
...event,
rows: event.last - event.first
});
}
/**
* Resets scroll to top.
* @group Method
*/
resetScrollTop() {
if (this.virtualScroll)
this.scrollToVirtualIndex(0);
else
this.scrollTo({ top: 0 });
}
/**
* Scrolls to given index when using virtual scroll.
* @param {number} index - index of the element.
* @group Method
*/
scrollToVirtualIndex(index) {
if (this.scrollableViewChild) {
this.scrollableViewChild.scrollToVirtualIndex(index);
}
if (this.scrollableFrozenViewChild) {
this.scrollableViewChild.scrollToVirtualIndex(index);
}
}
/**
* Scrolls to given index.
* @param {ScrollToOptions} options - Scroll options.
* @group Method
*/
scrollTo(options) {
if (this.scrollableViewChild) {
this.scrollableViewChild.scrollTo(options);
}
if (this.scrollableFrozenViewChild) {
this.scrollableViewChild.scrollTo(options);
}
}
isEmpty() {
let data = this.filteredNodes || this.value;
return data == null || data.length == 0;
}
getBlockableElement() {
return this.el.nativeElement.children[0];
}
onColumnResizeBegin(event) {
let containerLeft = getOffset(this.el?.nativeElement).left;
this.lastResizerHelperX = event.pageX - containerLeft + this.el?.nativeElement.scrollLeft;
event.preventDefault();
}
onColumnResize(event) {
let containerLeft = getOffset(this.el?.nativeElement).left;
this.el?.nativeElement.setAttribute('data-p-unselectable-text', 'true');
!this.$unstyled() && addStyle(this.el.nativeElement, { 'user-select': 'none' });
this.resizeHelperViewChild.nativeElement.style.height = this.el?.nativeElement.offsetHeight + 'px';
this.resizeHelperViewChild.nativeElement.style.top = 0 + 'px';
this.resizeHelperViewChild.nativeElement.style.left = event.pageX - containerLeft + this.el?.nativeElement.scrollLeft + 'px';
this.resizeHelperViewChild.nativeElement.style.display = 'block';
}
onColumnResizeEnd(event, column) {
let delta = this.resizeHelperViewChild.nativeElement.offsetLeft - this.lastResizerHelperX;
let columnWidth = column.offsetWidth;
let newColumnWidth = columnWidth + delta;
let minWidth = column.style.minWidth || 15;
if (columnWidth + delta > parseInt(minWidth)) {
if (this.columnResizeMode === 'fit') {
let nextColumn = column.nextElementSibling;
while (!nextColumn.offsetParent) {
nextColumn = nextColumn.nextElementSibling;
}
if (nextColumn) {
let nextColumnWidth = nextColumn.offsetWidth - delta;
let nextColumnMinWidth = nextColumn.style.minWidth || 15;
if (newColumnWidth > 15 && nextColumnWidth > parseInt(nextColumnMinWidth)) {
if (this.scrollable) {
let scrollableView = this.findParentScrollableView(column);
let scrollableBodyTable = findSingle(scrollableView, '[data-pc-section="scrollablebody"] table') || findSingle(scrollableView, '[data-pc-name="virtualscroller"] table');
let scrollableHeaderTable = findSingle(scrollableView, '[data-pc-section="scrollableheadertable"]');
let scrollableFooterTable = findSingle(scrollableView, '[data-pc-section="scrollablefootertable"]');
let resizeColumnIndex = getIndex(column);
this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, nextColumnWidth);
}
else {
column.style.width = newColumnWidth + 'px';
if (nextColumn) {
nextColumn.style.width = nextColumnWidth + 'px';
}
}
}
}
}
else if (this.columnResizeMode === 'expand') {
if (this.scrollable) {
let scrollableView = this.findParentScrollableView(column);
let scrollableBody = findSingle(scrollableView, '[data-pc-section="scrollablebody"]') || findSingle(scrollableView, '[data-pc-name="virtualscroller"]');
let scrollableHeader = findSingle(scrollableView, '[data-pc-section="scrollableheader"]');
let scrollableFooter = findSingle(scrollableView, '[data-pc-section="scrollablefooter"]');
let scrollableBodyTable = findSingle(scrollableView, '[data-pc-section="scrollablebody"] table') || findSingle(scrollableView, '[data-pc-name="virtualscroller"] table');
let scrollableHeaderTable = findSingle(scrollableView, '[data-pc-section="scrollableheadertable"]');
let scrollableFooterTable = findSingle(scrollableView, '[data-pc-section="scrollablefootertable"]');
scrollableBodyTable.style.width = scrollableBodyTable.offsetWidth + delta + 'px';
scrollableHeaderTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px';
if (scrollableFooterTable) {
scrollableFooterTable.style.width = scrollableFooterTable.offsetWidth + delta + 'px';
}
let resizeColumnIndex = getIndex(column);
const scrollableBodyTableWidth = column ? scrollableBodyTable.offsetWidth + delta : newColumnWidth;
const scrollableHeaderTableWidth = column ? scrollableHeaderTable.offsetWidth + delta : newColumnWidth;
const isContainerInViewport = this.el?.nativeElement.offsetWidth >= scrollableBodyTableWidth;
let setWidth = (container, table, width, isContainerInViewport) => {
if (container && table) {
container.style.width = isContainerInViewport ? width + calculateScrollbarWidth(scrollableBody) + 'px' : 'auto';
table.style.width = width + 'px';
}
};
setWidth(scrollableBody, scrollableBodyTable, scrollableBodyTableWidth, isContainerInViewport);
setWidth(scrollableHeader, scrollableHeaderTable, scrollableHeaderTableWidth, isContainerInViewport);
setWidth(scrollableFooter, scrollableFooterTable, scrollableHeaderTableWidth, isContainerInViewport);
this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, null);
this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, null);
this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, null);
}
else {
this.tableViewChild.nativeElement.style.width = this.tableViewChild?.nativeElement.offsetWidth + delta + 'px';
column.style.width = newColumnWidth + 'px';
let containerWidth = this.tableViewChild?.nativeElement.style.width;
this.el.nativeElement.style.width = containerWidth + 'px';
}
}
this.onColResize.emit({
element: column,
delta: delta
});
}
this.resizeHelperViewChild.nativeElement.style.display = 'none';
this.el.nativeElement.removeAttribute('data-p-unselectable-text');
!this.$unstyled() && (this.el.nativeElement.style['user-select'] = '');
}
findParentScrollableView(column) {
if (column) {
let parent = column.parentElement;
while (parent && !findSingle(parent, '[data-pc-section="scrollableview"]')) {
parent = parent.parentElement;
}
return parent;
}
else {
return null;
}
}
resizeColGroup(table, resizeColumnIndex, newColumnWidth, nextColumnWidth) {
if (table) {
let colGroup = table.children[0].nodeName === 'COLGROUP' ? table.children[0] : null;
if (colGroup) {
let col = colGroup.children[resizeColumnIndex];
let nextCol = col.nextElementSibling;
col.style.width = newColumnWidth + 'px';
if (nextCol && nextColumnWidth) {
nextCol.style.width = nextColumnWidth + 'px';
}
}
else {
throw 'Scrollable tables require a colgroup to support resizable columns';
}
}
}
onColumnDragStart(event, columnElement) {
this.reorderIconWidth = getHiddenElementOuterWidth(this.reorderIndicatorUpViewChild?.nativeElement);
this.reorderIconHeight = getHiddenElementOuterHeight(this.reorderIndicatorDownViewChild?.nativeElement);
this.draggedColumn = columnElement;
event.dataTransfer.setData('text', 'b'); // For firefox
}
onColumnDragEnter(event, dropHeader) {
if (this.reorderableColumns && this.draggedColumn && dropHeader) {
event.preventDefault();
let containerOffset = getOffset(this.el?.nativeElement);
let dropHeaderOffset = getOffset(dropHeader);
if (this.draggedColumn != dropHeader) {
let targetLeft = dropHeaderOffset.left - containerOffset.left;
let targetTop = containerOffset.top - dropHeaderOffset.top;
let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
this.reorderIndicatorUpViewChild.nativeElement.style.top = dropHeaderOffset.top - containerOffset.top - (this.reorderIconHeight - 1) + 'px';
this.reorderIndicatorDownViewChild.nativeElement.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
if (event.pageX > columnCenter) {
this.reorderIndicatorUpViewChild.nativeElement.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.reorderIconWidth / 2) + 'px';
this.reorderIndicatorDownViewChild.nativeElement.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(this.reorderIconWidth / 2) + 'px';
this.dropPosition = 1;
}
else {
this.reorderIndicatorUpViewChild.nativeElement.style.left = targetLeft - Math.ceil(this.reorderIconWidth / 2) + 'px';
this.reorderIndicatorDownViewChild.nativeElement.style.left = targetLeft - Math.ceil(this.reorderIconWidth / 2) + 'px';
this.dropPosition = -1;
}
this.reorderIndicatorUpViewChild.nativeElement.style.display = 'block';
this.reorderIndicatorDownViewChild.nativeElement.style.display = 'block';
}
else {
event.dataTransfer.dropEffect = 'none';
}
}
}
onColumnDragLeave(event) {
if (this.reorderableColumns && this.draggedColumn) {
event.preventDefault();
this.reorderIndicatorUpViewChild.nativeElement.style.display = 'none';
this.reorderIndicatorDownViewChild.nativeElement.style.display = 'none';
}
}
onColumnDrop(event, dropColumn) {
event.preventDefault();
if (this.draggedColumn) {
let dragIndex = DomHandler.indexWithinGroup(this.draggedColumn, 'ttreorderablecolumn');
let dropIndex = DomHandler.indexWithinGroup(dropColumn, 'ttreorderablecolumn');
let allowDrop = dragIndex != dropIndex;
if (allowDrop && ((dropIndex - dragIndex == 1 && this.dropPosition === -1) || (dragIndex - dropIndex == 1 && this.dropPosition === 1))) {
allowDrop = false;
}
if (allowDrop && dropIndex < dragIndex && this.dropPosition === 1) {
dropIndex = dropIndex + 1;
}
if (allowDrop && dropIndex > dragIndex && this.dropPosition === -1) {
dropIndex = dropIndex - 1;
}
if (allowDrop) {
reorderArray(this.columns, dragIndex, dropIndex);
this.onColReorder.emit({
dragIndex: dragIndex,
dropIndex: dropIndex,
columns: this.columns
});
}
this.reorderIndicatorUpViewChild.nativeElement.style.display = 'none';
this.reorderIndicatorDownViewChild.nativeElement.style.display = 'none';
this.draggedColumn.draggable = false;
this.draggedColumn = null;
this.dropPosition = null;
}
}
handleRowClick(event) {
let targetNode = event.originalEvent.target.nodeName;
if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' || isClickable(event.originalEvent.target)) {
return;
}
if (this.selectionMode) {
this.preventSelectionSetterPropagation = true;
let rowNode = event.rowNode;
let selected = this.isSelected(rowNode.node);
let metaSelection = this.rowTouched ? false : this.metaKeySelection;
let dataKeyValue = this.dataKey ? String(resolveFieldData(rowNode.node.data, this.dataKey)) : null;
if (metaSelection) {
let keyboardEvent = event.originalEvent;
let metaKey = keyboardEvent.metaKey || keyboardEvent.ctrlKey;
if (selected && metaKey) {
if (this.isSingleSelectionMode()) {
this._selection = null;
this.selectedKeys = {};
this.selectionChange.emit(null);
}
else {
let selectionIndex = this.findIndexInSelection(rowNode.node);
this._selection = this.selection.filter((val, i) => i != selectionIndex);
this.selectionChange.emit(this.selection);
if (dataKeyValue) {
delete this.selectedKeys[dataKeyValue];
}
}
this.onNodeUnselect.emit({
originalEvent: event.originalEvent,
node: rowNode.node,
type: 'row'
});
}
else {
if (this.isSingleSelectionMode()) {
this._selection = rowNode.node;
this.selectionChange.emit(rowNode.node);
if (dataKeyValue) {
this.selectedKeys = {};
this.selectedKeys[dataKeyValue] = 1;
}
}
else if (this.isMultipleSelectionMode()) {
if (metaKey) {
this._selection = this.selection || [];
}
else {
this._selection = [];
this.selectedKeys = {};
}
this._selection = [...this.selection, rowNode.node];
this.selectionChange.emit(this.selection);
if (dataKeyValue) {
this.selectedKeys[dataKeyValue] = 1;
}
}
this.onNodeSelect.emit({
originalEvent: event.originalEvent,
node: rowNode.node,
type: 'row',
index: event.rowIndex
});
}
}
else {
if (this.selectionMode === 'single') {
if (selected) {
this._selection = null;
this.selectedKeys = {};
this.selectionChange.emit(this.selection);
this.onNodeUnselect.emit({
originalEvent: event.originalEvent,
node: rowNode.node,
type: 'row'
});
}
else {
this._selection = rowNode.node;
this.selectionChange.emit(this.selection);
this.onNodeSelect.emit({
originalEvent: event.originalEvent,
node: rowNode.node,
type: 'row',
index: event.rowIndex
});
if (dataKeyValue) {
this.selectedKeys = {};
this.selectedKeys[dataKeyValue] = 1;
}
}
}
else if (this.selectionMode === 'multiple') {
if (selected) {
let selectionIndex = this.findIndexInSelection(rowNode.node);
this._selection = this.selection.filter((val, i) => i != selectionIndex);
this.selectionChange.emit(this.selection);
this.onNodeUnselect.emit({
originalEvent: event.originalEvent,
node: rowNode.node,
type: 'row'
});
if (dataKeyValue) {
delete this.selectedKeys[dataKeyValue];
}
}
else {
this._selection = this.selection ? [...this.selection, rowNode.node] : [rowNode.node];
this.selectionChange.emit(this.selection);
this.onNodeSelect.emit({
originalEvent: event.originalEvent,
node: rowNode.node,
type: 'row',
index: event.rowIndex
});
if (dataKeyValue) {
this.selectedKeys[dataKeyValue] = 1;
}
}
}
}
this.tableService.onSelectionChange();
}
this.rowTouched = false;
}
handleRowTouchEnd(event) {
this.rowTouched = true;
}
handleRowRightClick(event) {
if (this.contextMenu) {
const node = event.rowNode.node;
const showContextMenu = () => {
this.contextMenu.show(event.originalEvent);
this.contextMenu.hideCallback = () => {
this.contextMenuSelection = null;
this.contextMenuSelectionChange.emit();
this.tableService.onContextMenu(null);
};
};
if (this.contextMenuSelectionMode === 'separate') {
this.contextMenuSelection = node;
this.contextMenuSelectionChange.emit(node);
this.tableService.onContextMenu(node);
showContextMenu();
this.onContextMenuSelect.emit({ originalEvent: event.originalEvent, node: node });
}
else if (this.contextMenuSelectionMode === 'joint') {
this.preventSelectionSetterPropagation = true;
let selected = this.isSelected(node);
let dataKeyValue = this.dataKey ? String(resolveFieldData(node.data, this.dataKey)) : null;
if (!selected) {
if (this.isSingleSelectionMode()) {
this.selection = node;
this.selectionChange.emit(node);
}
else if (this.isMultipleSelectionMode()) {
this.selection = [node];
this.selectionChange.emit(this.selection);
}
if (dataKeyValue) {
this.selectedKeys[dataKeyValue] = 1;
}
}
this.contextMenuSelection = node;
this.contextMenuSelectionChange.emit(node);
this.tableService.onContextMenu(node);
showContextMenu();
this.onContextMenuSelect.emit({ originalEvent: event.originalEvent, node: node });
}
}
}
toggleNodeWithCheckbox(event) {
// legacy selection support, will be removed in v18
this.selection = this.selection || [];
this.preventSelectionSetterPropagation = true;
let node = event.rowNode.node;
let selected = this.isSelected(node);
if (selected) {
this.propagateSelectionDown(node, false);
if (event.rowNode.parent) {
this.propagateSelectionUp(node.parent, false);
}
this.selectionChange.emit(this.selection);
this.onNodeUnselect.emit({ originalEvent: event, node: node });
}
else {
this.propagateSelectionDown(node, true);
if (event.rowNode.parent) {
this.propagateSelectionUp(node.parent, true);
}
this.selectionChange.emit(this.selection);
this.onNodeSelect.emit({ originalEvent: event, node: node });
}
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() : [];
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, checked);
}
}
}
else {
// 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);
}
}
}
propagateSelectionUp(node, select) {
// legacy selection support, will be removed in v18
if (node.children && node.children.length) {
let selectedChildCount = 0;
let childPartialSelected = false;
let dataKeyValue = this.dataKey ? String(resolveFieldData(node.data, this.dataKey)) : null;
for (let child of node.children) {
if (this.isSelected(child))
selectedChildCount++;
else if (child.partialSelected)
childPartialSelected = true;
}
if (select && selectedChildCount == node.children.length) {
this._selection = [...(this.selection || []), node];
node.partialSelected = false;
if (dataKeyValue) {
this.selectedKeys[dataKeyValue] = 1;
}
}
else {
if (!select) {
let index = this.findIndexInSelection(node);
if (index >= 0) {
this._selection = this.selection.filter((val, i) => i != index);
if (dataKeyValue) {
delete this.selectedKeys[dataKeyValue];
}
}
}
if (childPartialSelected || (selectedChildCount > 0 && selectedChildCount != node.children.length))
node.partialSelected = true;
else
node.partialSelected = false;
}
}
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(resolveFieldData(node.data, this.dataKey)) : null;
if (select && index == -1) {
this._selection = [...(this.selection || []), node];
if (dataKeyValue) {
this.selectedKeys[dataKeyValue] = 1;
}
}
else if (!select && index > -1) {
this._selection = this.selection.filter((val, i) => i != index);
if (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);
}
}
}
isSelected(node) {
// legacy selection support, will be removed in v18
if (node && this.selection) {
if (this.dataKey) {
if (node.hasOwnProperty('checked')) {
return node['checked'];
}
else {
return this.selectedKeys[resolveFieldData(node.data, this.dataKey)] !== undefined;
}
}
else {
if (Array.isArray(this.selection))
return this.findIndexInSelection(node) > -1;
else
return this.equals(node, this.selection);
}
}
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 resolveFieldData(node, this.dataKey) || 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) {
for (let i = 0; i < this.selection.length; i++) {
if (this.equals(node, this.selection[i])) {
index = i;
break;
}
}
}
return index;
}
isSingleSelectionMode() {
return this.selectionMode === 'single';
}
isMultipleSelectionMode() {
return this.selectionMode === 'multiple';
}
equals(node1, node2) {
return this.compareSelectionBy === 'equals' ? equals(node1, node2) : equals(node1.data, node2.data, this.dataKey);
}
filter(value, field, matchMode) {
if (this.filterTimeout) {
clearTimeout(this.filterTimeout);
}
if (!this.isFilterBlank(value)) {
this.filters[field] = { value: value, matchMode: matchMode };
}
else if (this.filters[field]) {
delete this.filters[field];
}
this.filterTimeout = setTimeout(() => {
this._filter();
this.filterTimeout = null;
}, this.filterDelay);
}
filterGlobal(value, matchMode) {
this.filter(value, 'global', matchMode);
}
isFilterBlank(filter) {
if (filter !== null && filter !== undefined) {
if ((typeof filter === 'string' && filter.trim().length == 0) || (Array.isArray(filter) && filter.length == 0))
return true;
else
return false;
}
return true;
}
_filter() {
if (this.lazy) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
else {
if (!this.value) {
return;
}
if (!this.hasFilter()) {
this.filteredNodes = null;
if (this.paginator) {
this.totalRecords = this.value ? this.value.length : 0;
}
}
else {
let globalFilterFieldsArray;
if (this.filters['global']) {
if (!this.columns && !this.globalFilterFields)
throw new Error('Global filtering requires dynamic columns or globalFilterFields to be defined.');
else
globalFilterFieldsArray = this.globalFilterFields || this.columns;
}
this.filteredNodes = [];
const isStrictMode = this.filterMode === 'strict';
let isValueChanged = false;
for (let node of this.value) {
let copyNode = { ...node };
let localMatch = true;
let globalMatch = false;
let paramsWithoutNode;
for (let prop in this.filters) {
if (this.filters.hasOwnProperty(prop) && prop !== 'global') {
let filterMeta = this.filters[prop];
let filterField = prop;
let filterValue = filterMeta.value;
let filterMatchMode = filterMeta.matchMode || 'startsWith';
let filterConstraint = this.filterService.filters[filterMatchMode];
paramsWithoutNode = { filterField, filterValue, filterConstraint, isStrictMode };
if ((isStrictMode && !(this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
(!isStrictMode && !(this.isFilterMatched(copyNode, paramsWithoutNode) || this.findFilteredNodes(copyNode, paramsWithoutNode)))) {
localMatch = false;
}
if (!localMatch) {
break;
}
}
}
if (this.filters['global'] && !globalMatch && globalFilterFieldsArray) {
let copyNodeForGlobal = { ...copyNode };
let filterField = undefined;
let filterValue = this.filters['global'].value;
let filterConstraint = this.filterService.filters[this.filters['global'].matchMode];
paramsWithoutNode = {
filterField,
filterValue,
filterConstraint,
isStrictMode,
globalFilterFieldsArray
};
if ((isStrictMode && (this.findFilteredNodes(copyNodeForGlobal, paramsWithoutNode) || this.isFilterMatched(copyNodeForGlobal, paramsWithoutNode))) ||
(!isStrictMode && (this.isFilterMatched(copyNodeForGlobal, paramsWithoutNode) || this.findFilteredNodes(copyNodeForGlobal, paramsWithoutNode)))) {
globalMatch = true;
copyNode = copyNodeForGlobal;
}
}
let matches = localMatch;
if (this.filters['global']) {
matches = localMatch && globalMatch;
}
if (matches) {
this.filteredNodes.push(copyNode);
}
isValueChanged = isValueChanged || !localMatch || globalMatch || (localMatch && this.filteredNodes.length > 0) || (!globalMatch && this.filteredNodes.length === 0);
}
if (!isValueChanged) {
this.filteredNodes = null;
}
if (this.paginator) {
this.totalRecords = this.filteredNodes ? this.filteredNodes.length : this.value ? this.value.length : 0;
}
}
this.cd.markForCheck();
}
this.first = 0;
const filteredValue = this.filteredNodes || this.value;
this.onFilter.emit({
filters: this.filters,
filteredValue: filteredValue
});
this.tableService.onUIUpdate(filteredValue);
this.updateSerializedValue();
if (this.scrollable) {
this.resetScrollTop();
}
}
findFilteredNodes(node, paramsWithoutNode) {
if (node) {
let matched = false;
if (node.children) {
let childNodes = [...node.children];
node.children = [];
for (let childNode of childNodes) {
let copyChildNode = { ...childNode };
if (this.isFilterMatched(copyChildNode, paramsWithoutNode)) {
matched = true;
node.children.push(copyChildNode);
}
}
}
if (matched) {
return true;
}
}
}
isFilterMatched(node, filterOptions) {
let { filterField, filterValue, filterConstraint, isStrictMode, globalFilterFieldsArray } = filterOptions;
let matched = false;
const isMatched = (field) => filterConstraint(resolveFieldData(node.data, field), filterValue, this.filterLocale);
matched = globalFilterFieldsArray?.length ? globalFilterFieldsArray.some((globalFilterField) => isMatched(globalFilterField.field || globalFilterField)) : isMatched(filterField);
if (!matched || (isStrictMode && !this.isNodeLeaf(node))) {
matched =
this.findFilteredNodes(node, {
filterField,
filterValue,
filterConstraint,
isStrictMode,
globalFilterFieldsArray
}) || matched;
}
return matched;
}
isNodeLeaf(node) {
return node.leaf === false ? false : !(node.children && node.children.length);
}
hasFilter() {
let empty = true;
for (let prop in this.filters) {
if (this.filters.hasOwnProperty(prop)) {
empty = false;
break;
}
}
return !empty;
}
/**
* Clears the sort and paginator state.
* @group Method
*/
reset() {
this._sortField = null;
this._sortOrder = 1;
this._multiSortMeta = null;
this.tableService.onSort(null);
this.filteredNodes = null;
this.filters = {};
this.first = 0;
if (this.lazy) {
this.onLazyLoad.emit(this.createLazyLoadMetadata());
}
else {
this.totalRecords = this._value ? this._value.length : 0;
}
}
updateEditingCell(cell, data, field) {
this.editingCell = cell;
this.editingCellData = data;
this.editingCellField = field;
this.bindDocumentEditListener();
}
isEditingCellValid() {
return this.editingCell && find(this.editingCell, '.ng-invalid.ng-dirty').length === 0;
}
bindDocumentEditListener() {
if (!this.documentEditListener) {
this.documentEditListener = this.renderer.listen(this.document, 'click', (event) => {
if (this.editingCell && !this.editingCellClick && this.isEditingCellValid()) {
!this.$unstyled() && removeClass(this.editingCell, 'p-cell-editing');
this.editingCell = null;
this.onEditComplete.emit({ field: this.editingCellField, data: this.editingCellData });
this.editingCellField = null;
this.editingCellData = null;
this.unbindDocumentEditListener();
}
this.editingCellClick = false;
});
}
}
unbindDocumentEditListener() {
if (this.documentEditListener) {
this.documentEditListener();
this.documentEditListener = null;
}
}
onDestroy() {
this.unbindDocumentEditListener();
this.editingCell = null;
this.editingCellField = null;
this.editingCellData = null;
this.initialized = null;
}
get dataP() {
return this.cn({
scrollable: this.scrollable,
'flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
loading: this.loading,
empty: this.isEmpty()
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTable, deps: null, target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.5", type: TreeTable, isStandalone: false, selector: "p-treeTable, p-treetable, p-tree-table", inputs: { columns: "columns", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", autoLayout: ["autoLayout", "autoLayout", booleanAttribute], lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], paginator: ["paginator", "paginator", booleanAttribute], rows: ["rows", "rows", numberAttribute], first: ["first", "first", numberAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], selectionMode: "selectionMode", contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], compareSelectionBy: "compareSelectionBy", rowHover: ["rowHover", "rowHover", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], scrollable: ["scrollable", "scrollable", booleanAttribute], scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", frozenColumns: "frozenColumns", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], contextMenu: "contextMenu", rowTrackBy: "rowTrackBy", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterMode: "filterMode", filterLocale: "filterLocale", paginatorLocale: "paginatorLocale", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", value: "value", virtualRowHeight: "virtualRowHeight", selectionKeys: "selectionKeys", showGridlines: ["showGridlines", "showGridlines", booleanAttribute] }, 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: { properties: { "class": "cn(cx('root'), styleClass)", "attr.data-p": "dataP", "attr.data-scrollselectors": "'.p-treetable-scrollable-body'" } }, providers: [TreeTableService, TreeTableStyle, { provide: TREETABLE_INSTANCE, useExisting: TreeTable }, { provide: PARENT_INSTANCE, useExisting: TreeTable }], queries: [{ propertyName: "_colGroupTemplate", first: true, predicate: ["colgroup"] }, { propertyName: "_captionTemplate", first: true, predicate: ["caption"] }, { propertyName: "_headerTemplate", first: true, predicate: ["header"] }, { propertyName: "_bodyTemplate", first: true, predicate: ["body"] }, { propertyName: "_footerTemplate", first: true, predicate: ["footer"] }, { propertyName: "_summaryTemplate", first: true, predicate: ["summary"] }, { propertyName: "_emptyMessageTemplate", first: true, predicate: ["emptymessage"] }, { propertyName: "_paginatorLeftTemplate", first: true, predicate: ["paginatorleft"] }, { propertyName: "_paginatorRightTemplate", first: true, predicate: ["paginatorright"] }, { propertyName: "_paginatorDropdownItemTemplate", first: true, predicate: ["paginatordropdownitem"] }, { propertyName: "_frozenHeaderTemplate", first: true, predicate: ["frozenheader"] }, { propertyName: "_frozenBodyTemplate", first: true, predicate: ["frozenbody"] }, { propertyName: "_frozenFooterTemplate", first: true, predicate: ["frozenfooter"] }, { propertyName: "_frozenColGroupTemplate", first: true, predicate: ["frozencolgroup"] }, { propertyName: "_loadingIconTemplate", first: true, predicate: ["loadingicon"] }, { propertyName: "_reorderIndicatorUpIconTemplate", first: true, predicate: ["reorderindicatorupicon"] }, { propertyName: "_reorderIndicatorDownIconTemplate", first: true, predicate: ["reorderindicatordownicon"] }, { propertyName: "_sortIconTemplate", first: true, predicate: ["sorticon"] }, { propertyName: "_checkboxIconTemplate", first: true, predicate: ["checkboxicon"] }, { propertyName: "_headerCheckboxIconTemplate", first: true, predicate: ["headercheckboxicon"] }, { propertyName: "_togglerIconTemplate", first: true, predicate: ["togglericon"] }, { propertyName: "_paginatorFirstPageLinkIconTemplate", first: true, predicate: ["paginatorfirstpagelinkicon"] }, { propertyName: "_paginatorLastPageLinkIconTemplate", first: true, predicate: ["paginatorlastpagelinkicon"] }, { propertyName: "_paginatorPreviousPageLinkIconTemplate", first: true, predicate: ["paginatorpreviouspagelinkicon"] }, { propertyName: "_paginatorNextPageLinkIconTemplate", first: true, predicate: ["paginatornextpagelinkicon"] }, { propertyName: "_loaderTemplate", first: true, predicate: ["loader"] }, { propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ 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 }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
<div [pBind]="ptm('mask')" [class]="cx('mask')" *ngIf="loading && showLoader" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active">
<i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
<ng-container *ngIf="!loadingIcon">
<svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [class]="cx('loadingIcon')" />
<span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
<ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
</span>
</ng-container>
</div>
<div [pBind]="ptm('header')" *ngIf="captionTemplate || _captionTemplate" [class]="cx('header')">
<ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
</div>
<p-paginator
[pt]="ptm('pcPaginator')"
[rows]="rows"
[first]="first"
[totalRecords]="totalRecords"
[pageLinkSize]="pageLinks"
[styleClass]="cx('pcPaginator')"
[alwaysShow]="alwaysShowPaginator"
(onPageChange)="onPageChange($event)"
[rowsPerPageOptions]="rowsPerPageOptions"
*ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
[templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
[templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
[appendTo]="paginatorDropdownAppendTo"
[currentPageReportTemplate]="currentPageReportTemplate"
[showFirstLastIcon]="showFirstLastIcon"
[dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
[showCurrentPageReport]="showCurrentPageReport"
[showJumpToPageDropdown]="showJumpToPageDropdown"
[showPageLinks]="showPageLinks"
[locale]="paginatorLocale"
[unstyled]="unstyled()"
>
<ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
</ng-template>
</p-paginator>
<div [pBind]="ptm('wrapper')" [class]="cx('wrapper')" *ngIf="!scrollable">
<table role="treegrid" [pBind]="ptm('table')" #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
<ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: columns }"></ng-container>
<thead role="rowgroup" [class]="cx('thead')" [pBind]="ptm('thead')">
<ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: columns }"></ng-container>
</thead>
<tbody [class]="cx('tbody')" [pBind]="ptm('tbody')" role="rowgroup" [unstyled]="unstyled()" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="bodyTemplate ?? _bodyTemplate"></tbody>
<tfoot [class]="cx('tfoot')" [pBind]="ptm('tfoot')" role="rowgroup">
<ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: columns }"></ng-container>
</tfoot>
</table>
</div>
<div [pBind]="ptm('scrollableWrapper')" [class]="cx('scrollableWrapper')" *ngIf="scrollable">
<div
[ngClass]="[cx('scrollableView'), cx('frozenView')]"
*ngIf="frozenColumns || frozenBodyTemplate || _frozenBodyTemplate"
#scrollableFrozenView
[ttScrollableView]="frozenColumns"
[unstyled]="unstyled()"
[frozen]="true"
[ngStyle]="{ width: frozenWidth }"
[scrollHeight]="scrollHeight"
[pBind]="ptm('scrollableView')"
></div>
<div
[class]="cx('scrollableView')"
[pBind]="ptm('scrollableView')"
#scrollableView
[ttScrollableView]="columns"
[unstyled]="unstyled()"
[frozen]="false"
[scrollHeight]="scrollHeight"
[ngStyle]="{ left: frozenWidth, width: 'calc(100% - ' + frozenWidth + ')' }"
></div>
</div>
<p-paginator
[pt]="ptm('pcPaginator')"
[rows]="rows"
[first]="first"
[totalRecords]="totalRecords"
[pageLinkSize]="pageLinks"
[styleClass]="cx('pcPaginator')"
[alwaysShow]="alwaysShowPaginator"
(onPageChange)="onPageChange($event)"
[rowsPerPageOptions]="rowsPerPageOptions"
*ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
[templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
[templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
[appendTo]="paginatorDropdownAppendTo"
[currentPageReportTemplate]="currentPageReportTemplate"
[showFirstLastIcon]="showFirstLastIcon"
[dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
[showCurrentPageReport]="showCurrentPageReport"
[showJumpToPageDropdown]="showJumpToPageDropdown"
[showPageLinks]="showPageLinks"
[locale]="paginatorLocale"
[unstyled]="unstyled()"
>
<ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
</ng-template>
</p-paginator>
<div [pBind]="ptm('footer')" *ngIf="summaryTemplate || _summaryTemplate" [class]="cx('footer')">
<ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
</div>
<div [pBind]="ptm('columnResizerHelper')" #resizeHelper [class]="cx('columnResizerHelper')" [style.display]="'none'" *ngIf="resizableColumns"></div>
<span [pBind]="ptm('reorderIndicatorUp')" #reorderIndicatorUp [class]="cx('reorderIndicatorUp')" [style.display]="'none'" *ngIf="reorderableColumns">
<svg data-p-icon="arrow-down" *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
<ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
</span>
<span [pBind]="ptm('reorderIndicatorDown')" #reorderIndicatorDown [class]="cx('reorderIndicatorDown')" [style.display]="'none'" *ngIf="reorderableColumns">
<svg data-p-icon="arrow-up" *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
<ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
</span>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i3.Paginator), selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "directive", type: i0.forwardRef(() => i4.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => SpinnerIcon), selector: "[data-p-icon=\"spinner\"]" }, { kind: "component", type: i0.forwardRef(() => ArrowDownIcon), selector: "[data-p-icon=\"arrow-down\"]" }, { kind: "component", type: i0.forwardRef(() => ArrowUpIcon), selector: "[data-p-icon=\"arrow-up\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: i0.forwardRef(() => TTScrollableView), selector: "[ttScrollableView]", inputs: ["ttScrollableView", "frozen", "scrollHeight"] }, { kind: "component", type: i0.forwardRef(() => TTBody), selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTable, decorators: [{
type: Component,
args: [{
selector: 'p-treeTable, p-treetable, p-tree-table',
standalone: false,
template: `
<div [pBind]="ptm('mask')" [class]="cx('mask')" *ngIf="loading && showLoader" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active">
<i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
<ng-container *ngIf="!loadingIcon">
<svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [class]="cx('loadingIcon')" />
<span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
<ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
</span>
</ng-container>
</div>
<div [pBind]="ptm('header')" *ngIf="captionTemplate || _captionTemplate" [class]="cx('header')">
<ng-container *ngTemplateOutlet="captionTemplate || _captionTemplate"></ng-container>
</div>
<p-paginator
[pt]="ptm('pcPaginator')"
[rows]="rows"
[first]="first"
[totalRecords]="totalRecords"
[pageLinkSize]="pageLinks"
[styleClass]="cx('pcPaginator')"
[alwaysShow]="alwaysShowPaginator"
(onPageChange)="onPageChange($event)"
[rowsPerPageOptions]="rowsPerPageOptions"
*ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition == 'both')"
[templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
[templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
[appendTo]="paginatorDropdownAppendTo"
[currentPageReportTemplate]="currentPageReportTemplate"
[showFirstLastIcon]="showFirstLastIcon"
[dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
[showCurrentPageReport]="showCurrentPageReport"
[showJumpToPageDropdown]="showJumpToPageDropdown"
[showPageLinks]="showPageLinks"
[locale]="paginatorLocale"
[unstyled]="unstyled()"
>
<ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
</ng-template>
</p-paginator>
<div [pBind]="ptm('wrapper')" [class]="cx('wrapper')" *ngIf="!scrollable">
<table role="treegrid" [pBind]="ptm('table')" #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
<ng-container *ngTemplateOutlet="colGroupTemplate || _colGroupTemplate; context: { $implicit: columns }"></ng-container>
<thead role="rowgroup" [class]="cx('thead')" [pBind]="ptm('thead')">
<ng-container *ngTemplateOutlet="headerTemplate || _headerTemplate; context: { $implicit: columns }"></ng-container>
</thead>
<tbody [class]="cx('tbody')" [pBind]="ptm('tbody')" role="rowgroup" [unstyled]="unstyled()" [pTreeTableBody]="columns" [pTreeTableBodyTemplate]="bodyTemplate ?? _bodyTemplate"></tbody>
<tfoot [class]="cx('tfoot')" [pBind]="ptm('tfoot')" role="rowgroup">
<ng-container *ngTemplateOutlet="footerTemplate || _footerTemplate; context: { $implicit: columns }"></ng-container>
</tfoot>
</table>
</div>
<div [pBind]="ptm('scrollableWrapper')" [class]="cx('scrollableWrapper')" *ngIf="scrollable">
<div
[ngClass]="[cx('scrollableView'), cx('frozenView')]"
*ngIf="frozenColumns || frozenBodyTemplate || _frozenBodyTemplate"
#scrollableFrozenView
[ttScrollableView]="frozenColumns"
[unstyled]="unstyled()"
[frozen]="true"
[ngStyle]="{ width: frozenWidth }"
[scrollHeight]="scrollHeight"
[pBind]="ptm('scrollableView')"
></div>
<div
[class]="cx('scrollableView')"
[pBind]="ptm('scrollableView')"
#scrollableView
[ttScrollableView]="columns"
[unstyled]="unstyled()"
[frozen]="false"
[scrollHeight]="scrollHeight"
[ngStyle]="{ left: frozenWidth, width: 'calc(100% - ' + frozenWidth + ')' }"
></div>
</div>
<p-paginator
[pt]="ptm('pcPaginator')"
[rows]="rows"
[first]="first"
[totalRecords]="totalRecords"
[pageLinkSize]="pageLinks"
[styleClass]="cx('pcPaginator')"
[alwaysShow]="alwaysShowPaginator"
(onPageChange)="onPageChange($event)"
[rowsPerPageOptions]="rowsPerPageOptions"
*ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition == 'both')"
[templateLeft]="paginatorLeftTemplate ?? _paginatorLeftTemplate"
[templateRight]="paginatorRightTemplate ?? _paginatorRightTemplate"
[appendTo]="paginatorDropdownAppendTo"
[currentPageReportTemplate]="currentPageReportTemplate"
[showFirstLastIcon]="showFirstLastIcon"
[dropdownItemTemplate]="paginatorDropdownItemTemplate ?? _paginatorDropdownItemTemplate"
[showCurrentPageReport]="showCurrentPageReport"
[showJumpToPageDropdown]="showJumpToPageDropdown"
[showPageLinks]="showPageLinks"
[locale]="paginatorLocale"
[unstyled]="unstyled()"
>
<ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorFirstPageLinkIconTemplate || _paginatorFirstPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="previouspagelinkicon" *ngIf="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorPreviousPageLinkIconTemplate || _paginatorPreviousPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="lastpagelinkicon" *ngIf="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorLastPageLinkIconTemplate || _paginatorLastPageLinkIconTemplate"></ng-container>
</ng-template>
<ng-template pTemplate="nextpagelinkicon" *ngIf="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate">
<ng-container *ngTemplateOutlet="paginatorNextPageLinkIconTemplate || _paginatorNextPageLinkIconTemplate"></ng-container>
</ng-template>
</p-paginator>
<div [pBind]="ptm('footer')" *ngIf="summaryTemplate || _summaryTemplate" [class]="cx('footer')">
<ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
</div>
<div [pBind]="ptm('columnResizerHelper')" #resizeHelper [class]="cx('columnResizerHelper')" [style.display]="'none'" *ngIf="resizableColumns"></div>
<span [pBind]="ptm('reorderIndicatorUp')" #reorderIndicatorUp [class]="cx('reorderIndicatorUp')" [style.display]="'none'" *ngIf="reorderableColumns">
<svg data-p-icon="arrow-down" *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
<ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
</span>
<span [pBind]="ptm('reorderIndicatorDown')" #reorderIndicatorDown [class]="cx('reorderIndicatorDown')" [style.display]="'none'" *ngIf="reorderableColumns">
<svg data-p-icon="arrow-up" *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
<ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
</span>
`,
providers: [TreeTableService, TreeTableStyle, { provide: TREETABLE_INSTANCE, useExisting: TreeTable }, { provide: PARENT_INSTANCE, useExisting: TreeTable }],
encapsulation: ViewEncapsulation.None,
host: {
'[class]': "cn(cx('root'), styleClass)",
'[attr.data-p]': 'dataP',
'[attr.data-scrollselectors]': "'.p-treetable-scrollable-body'"
},
hostDirectives: [Bind]
}]
}], propDecorators: { columns: [{
type: Input
}], styleClass: [{
type: Input
}], tableStyle: [{
type: Input
}], tableStyleClass: [{
type: Input
}], autoLayout: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], lazy: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], lazyLoadOnInit: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], paginator: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], rows: [{
type: Input,
args: [{ transform: numberAttribute }]
}], first: [{
type: Input,
args: [{ transform: numberAttribute }]
}], pageLinks: [{
type: Input,
args: [{ transform: numberAttribute }]
}], rowsPerPageOptions: [{
type: Input
}], alwaysShowPaginator: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], paginatorPosition: [{
type: Input
}], paginatorStyleClass: [{
type: Input
}], paginatorDropdownAppendTo: [{
type: Input
}], currentPageReportTemplate: [{
type: Input
}], showCurrentPageReport: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showJumpToPageDropdown: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showFirstLastIcon: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], showPageLinks: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], defaultSortOrder: [{
type: Input,
args: [{ transform: numberAttribute }]
}], sortMode: [{
type: Input
}], resetPageOnSort: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], customSort: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], selectionMode: [{
type: Input
}], contextMenuSelection: [{
type: Input
}], contextMenuSelectionMode: [{
type: Input
}], dataKey: [{
type: Input
}], metaKeySelection: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], compareSelectionBy: [{
type: Input
}], rowHover: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], loading: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], loadingIcon: [{
type: Input
}], showLoader: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], scrollable: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], scrollHeight: [{
type: Input
}], virtualScroll: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], virtualScrollItemSize: [{
type: Input,
args: [{ transform: numberAttribute }]
}], virtualScrollOptions: [{
type: Input
}], virtualScrollDelay: [{
type: Input,
args: [{ transform: numberAttribute }]
}], frozenWidth: [{
type: Input
}], frozenColumns: [{
type: Input
}], resizableColumns: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], columnResizeMode: [{
type: Input
}], reorderableColumns: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], contextMenu: [{
type: Input
}], rowTrackBy: [{
type: Input
}], filters: [{
type: Input
}], globalFilterFields: [{
type: Input
}], filterDelay: [{
type: Input,
args: [{ transform: numberAttribute }]
}], filterMode: [{
type: Input
}], filterLocale: [{
type: Input
}], paginatorLocale: [{
type: Input
}], totalRecords: [{
type: Input
}], sortField: [{
type: Input
}], sortOrder: [{
type: Input
}], multiSortMeta: [{
type: Input
}], selection: [{
type: Input
}], value: [{
type: Input
}], virtualRowHeight: [{
type: Input
}], selectionKeys: [{
type: Input
}], showGridlines: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], selectionChange: [{
type: Output
}], contextMenuSelectionChange: [{
type: Output
}], onFilter: [{
type: Output
}], onNodeExpand: [{
type: Output
}], onNodeCollapse: [{
type: Output
}], onPage: [{
type: Output
}], onSort: [{
type: Output
}], onLazyLoad: [{
type: Output
}], sortFunction: [{
type: Output
}], onColResize: [{
type: Output
}], onColReorder: [{
type: Output
}], onNodeSelect: [{
type: Output
}], onNodeUnselect: [{
type: Output
}], onContextMenuSelect: [{
type: Output
}], onHeaderCheckboxToggle: [{
type: Output
}], onEditInit: [{
type: Output
}], onEditComplete: [{
type: Output
}], onEditCancel: [{
type: Output
}], selectionKeysChange: [{
type: Output
}], resizeHelperViewChild: [{
type: ViewChild,
args: ['resizeHelper']
}], reorderIndicatorUpViewChild: [{
type: ViewChild,
args: ['reorderIndicatorUp']
}], reorderIndicatorDownViewChild: [{
type: ViewChild,
args: ['reorderIndicatorDown']
}], tableViewChild: [{
type: ViewChild,
args: ['table']
}], scrollableViewChild: [{
type: ViewChild,
args: ['scrollableView']
}], scrollableFrozenViewChild: [{
type: ViewChild,
args: ['scrollableFrozenView']
}], _colGroupTemplate: [{
type: ContentChild,
args: ['colgroup', { descendants: false }]
}], _captionTemplate: [{
type: ContentChild,
args: ['caption', { descendants: false }]
}], _headerTemplate: [{
type: ContentChild,
args: ['header', { descendants: false }]
}], _bodyTemplate: [{
type: ContentChild,
args: ['body', { descendants: false }]
}], _footerTemplate: [{
type: ContentChild,
args: ['footer', { descendants: false }]
}], _summaryTemplate: [{
type: ContentChild,
args: ['summary', { descendants: false }]
}], _emptyMessageTemplate: [{
type: ContentChild,
args: ['emptymessage', { descendants: false }]
}], _paginatorLeftTemplate: [{
type: ContentChild,
args: ['paginatorleft', { descendants: false }]
}], _paginatorRightTemplate: [{
type: ContentChild,
args: ['paginatorright', { descendants: false }]
}], _paginatorDropdownItemTemplate: [{
type: ContentChild,
args: ['paginatordropdownitem', { descendants: false }]
}], _frozenHeaderTemplate: [{
type: ContentChild,
args: ['frozenheader', { descendants: false }]
}], _frozenBodyTemplate: [{
type: ContentChild,
args: ['frozenbody', { descendants: false }]
}], _frozenFooterTemplate: [{
type: ContentChild,
args: ['frozenfooter', { descendants: false }]
}], _frozenColGroupTemplate: [{
type: ContentChild,
args: ['frozencolgroup', { descendants: false }]
}], _loadingIconTemplate: [{
type: ContentChild,
args: ['loadingicon', { descendants: false }]
}], _reorderIndicatorUpIconTemplate: [{
type: ContentChild,
args: ['reorderindicatorupicon', { descendants: false }]
}], _reorderIndicatorDownIconTemplate: [{
type: ContentChild,
args: ['reorderindicatordownicon', { descendants: false }]
}], _sortIconTemplate: [{
type: ContentChild,
args: ['sorticon', { descendants: false }]
}], _checkboxIconTemplate: [{
type: ContentChild,
args: ['checkboxicon', { descendants: false }]
}], _headerCheckboxIconTemplate: [{
type: ContentChild,
args: ['headercheckboxicon', { descendants: false }]
}], _togglerIconTemplate: [{
type: ContentChild,
args: ['togglericon', { descendants: false }]
}], _paginatorFirstPageLinkIconTemplate: [{
type: ContentChild,
args: ['paginatorfirstpagelinkicon', { descendants: false }]
}], _paginatorLastPageLinkIconTemplate: [{
type: ContentChild,
args: ['paginatorlastpagelinkicon', { descendants: false }]
}], _paginatorPreviousPageLinkIconTemplate: [{
type: ContentChild,
args: ['paginatorpreviouspagelinkicon', { descendants: false }]
}], _paginatorNextPageLinkIconTemplate: [{
type: ContentChild,
args: ['paginatornextpagelinkicon', { descendants: false }]
}], _loaderTemplate: [{
type: ContentChild,
args: ['loader', { descendants: false }]
}], templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class TTBody extends BaseComponent {
tt;
treeTableService;
columns;
template;
frozen;
serializedNodes;
scrollerOptions;
subscription;
constructor(tt, treeTableService) {
super();
this.tt = tt;
this.treeTableService = treeTableService;
this.subscription = this.tt.tableService.uiUpdateSource$.subscribe(() => {
if (this.tt.virtualScroll) {
this.cd.detectChanges();
}
});
}
getScrollerOption(option, options) {
if (this.tt.virtualScroll) {
options = options || this.scrollerOptions;
return options ? options[option] : null;
}
return null;
}
getRowIndex(rowIndex) {
const getItemOptions = this.getScrollerOption('getItemOptions');
return getItemOptions ? getItemOptions(rowIndex).index : rowIndex;
}
onDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
get dataP() {
return this.cn({
hoverable: this.tt.rowHover || this.tt.selectionMode,
frozen: this.frozen
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTBody, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.5", type: TTBody, isStandalone: false, selector: "[pTreeTableBody]", inputs: { columns: ["pTreeTableBody", "columns"], template: ["pTreeTableBodyTemplate", "template"], frozen: ["frozen", "frozen", booleanAttribute], serializedNodes: "serializedNodes", scrollerOptions: "scrollerOptions" }, host: { properties: { "attr.data-p": "dataP" } }, usesInheritance: true, ngImport: i0, template: `
<ng-template ngFor let-serializedNode let-rowIndex="index" [ngForOf]="serializedNodes || tt.serializedValue" [ngForTrackBy]="tt.rowTrackBy">
<ng-container *ngIf="serializedNode.visible">
<ng-container
*ngTemplateOutlet="
template;
context: {
$implicit: serializedNode,
node: serializedNode.node,
rowData: serializedNode.node.data,
columns: columns
}
"
></ng-container>
</ng-container>
</ng-template>
<ng-container *ngIf="tt.isEmpty()">
<ng-container *ngTemplateOutlet="tt.emptyMessageTemplate || tt._emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTBody, decorators: [{
type: Component,
args: [{
selector: '[pTreeTableBody]',
standalone: false,
template: `
<ng-template ngFor let-serializedNode let-rowIndex="index" [ngForOf]="serializedNodes || tt.serializedValue" [ngForTrackBy]="tt.rowTrackBy">
<ng-container *ngIf="serializedNode.visible">
<ng-container
*ngTemplateOutlet="
template;
context: {
$implicit: serializedNode,
node: serializedNode.node,
rowData: serializedNode.node.data,
columns: columns
}
"
></ng-container>
</ng-container>
</ng-template>
<ng-container *ngIf="tt.isEmpty()">
<ng-container *ngTemplateOutlet="tt.emptyMessageTemplate || tt._emptyMessageTemplate; context: { $implicit: columns, frozen: frozen }"></ng-container>
</ng-container>
`,
encapsulation: ViewEncapsulation.None,
host: {
'[attr.data-p]': 'dataP'
}
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }], propDecorators: { columns: [{
type: Input,
args: ['pTreeTableBody']
}], template: [{
type: Input,
args: ['pTreeTableBodyTemplate']
}], frozen: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], serializedNodes: [{
type: Input
}], scrollerOptions: [{
type: Input
}] } });
class TTScrollableView extends BaseComponent {
tt;
zone;
hostName = 'TreeTable';
columns;
frozen;
scrollHeaderViewChild;
scrollHeaderBoxViewChild;
scrollBodyViewChild;
scrollTableViewChild;
scrollLoadingTableViewChild;
scrollFooterViewChild;
scrollFooterBoxViewChild;
scrollableAlignerViewChild;
scroller;
headerScrollListener;
bodyScrollListener;
footerScrollListener;
frozenSiblingBody;
totalRecordsSubscription;
_scrollHeight;
preventBodyScrollPropagation;
_componentStyle = inject(TreeTableStyle);
get scrollHeight() {
return this._scrollHeight;
}
set scrollHeight(val) {
this._scrollHeight = val;
if (val != null && (val.includes('%') || val.includes('calc'))) {
console.log('Percentage scroll height calculation is removed in favor of the more performant CSS based flex mode, use scrollHeight="flex" instead.');
}
}
constructor(tt, zone) {
super();
this.tt = tt;
this.zone = zone;
}
onAfterViewInit() {
if (isPlatformBrowser(this.platformId)) {
if (!this.frozen) {
if (this.tt.frozenColumns || this.tt.frozenBodyTemplate || this.tt._frozenBodyTemplate) {
addClass(this.el.nativeElement, 'p-treetable-unfrozen-view');
}
let frozenView = this.el.nativeElement.previousElementSibling;
if (frozenView) {
if (this.tt.virtualScroll)
this.frozenSiblingBody = findSingle(frozenView, '[data-pc-name="virtualscroller"]');
else
this.frozenSiblingBody = findSingle(frozenView, '[data-pc-section="scrollablebody"]');
}
if (this.scrollHeight) {
let scrollBarWidth = calculateScrollbarWidth();
if (this.scrollHeaderBoxViewChild?.nativeElement) {
this.scrollHeaderBoxViewChild.nativeElement.style.paddingRight = scrollBarWidth + 'px';
}
if (this.scrollFooterBoxViewChild && this.scrollFooterBoxViewChild.nativeElement) {
this.scrollFooterBoxViewChild.nativeElement.style.paddingRight = scrollBarWidth + 'px';
}
}
}
else {
if (this.scrollableAlignerViewChild && this.scrollableAlignerViewChild.nativeElement) {
this.scrollableAlignerViewChild.nativeElement.style.height = calculateScrollbarHeight() + 'px';
}
}
this.bindEvents();
}
}
bindEvents() {
if (isPlatformBrowser(this.platformId)) {
this.zone.runOutsideAngular(() => {
if (this.scrollHeaderViewChild && this.scrollHeaderViewChild.nativeElement) {
this.headerScrollListener = this.renderer.listen(this.scrollHeaderBoxViewChild?.nativeElement, 'scroll', this.onHeaderScroll.bind(this));
}
if (this.scrollFooterViewChild && this.scrollFooterViewChild.nativeElement) {
this.footerScrollListener = this.renderer.listen(this.scrollFooterViewChild.nativeElement, 'scroll', this.onFooterScroll.bind(this));
}
if (!this.frozen) {
if (this.tt.virtualScroll) {
this.bodyScrollListener = this.renderer.listen((this.scroller?.getElementRef()).nativeElement, 'scroll', this.onBodyScroll.bind(this));
}
else {
this.bodyScrollListener = this.renderer.listen(this.scrollBodyViewChild?.nativeElement, 'scroll', this.onBodyScroll.bind(this));
}
}
});
}
}
unbindEvents() {
if (isPlatformBrowser(this.platformId)) {
if (this.scrollHeaderViewChild && this.scrollHeaderViewChild.nativeElement) {
if (this.headerScrollListener) {
this.headerScrollListener();
this.headerScrollListener = null;
}
}
if (this.scrollFooterViewChild && this.scrollFooterViewChild.nativeElement) {
if (this.footerScrollListener) {
this.footerScrollListener();
this.footerScrollListener = null;
}
}
if (this.scrollBodyViewChild && this.scrollBodyViewChild.nativeElement) {
if (this.bodyScrollListener) {
this.bodyScrollListener();
this.bodyScrollListener = null;
}
}
if (this.scroller && this.scroller.getElementRef()) {
if (this.bodyScrollListener) {
this.bodyScrollListener();
this.bodyScrollListener = null;
}
}
}
}
onHeaderScroll() {
const scrollLeft = this.scrollHeaderViewChild?.nativeElement.scrollLeft;
this.scrollBodyViewChild.nativeElement.scrollLeft = scrollLeft;
if (this.scrollFooterViewChild && this.scrollFooterViewChild.nativeElement) {
this.scrollFooterViewChild.nativeElement.scrollLeft = scrollLeft;
}
this.preventBodyScrollPropagation = true;
}
onFooterScroll() {
const scrollLeft = this.scrollFooterViewChild?.nativeElement.scrollLeft;
this.scrollBodyViewChild.nativeElement.scrollLeft = scrollLeft;
if (this.scrollHeaderViewChild && this.scrollHeaderViewChild.nativeElement) {
this.scrollHeaderViewChild.nativeElement.scrollLeft = scrollLeft;
}
this.preventBodyScrollPropagation = true;
}
onBodyScroll(event) {
if (this.preventBodyScrollPropagation) {
this.preventBodyScrollPropagation = false;
return;
}
if (this.scrollHeaderViewChild && this.scrollHeaderViewChild.nativeElement) {
this.scrollHeaderBoxViewChild.nativeElement.style.marginLeft = -1 * event.target.scrollLeft + 'px';
}
if (this.scrollFooterViewChild && this.scrollFooterViewChild.nativeElement) {
this.scrollFooterBoxViewChild.nativeElement.style.marginLeft = -1 * event.target.scrollLeft + 'px';
}
if (this.frozenSiblingBody) {
this.frozenSiblingBody.scrollTop = event.target.scrollTop;
}
}
scrollToVirtualIndex(index) {
if (this.scroller) {
this.scroller.scrollToIndex(index);
}
}
scrollTo(options) {
if (this.scroller) {
this.scroller.scrollTo(options);
}
else {
if (this.scrollBodyViewChild?.nativeElement.scrollTo) {
this.scrollBodyViewChild.nativeElement.scrollTo(options);
}
else {
this.scrollBodyViewChild.nativeElement.scrollLeft = options.left;
this.scrollBodyViewChild.nativeElement.scrollTop = options.top;
}
}
}
onDestroy() {
this.unbindEvents();
this.frozenSiblingBody = null;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTScrollableView, deps: [{ token: TreeTable }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.5", type: TTScrollableView, isStandalone: false, selector: "[ttScrollableView]", inputs: { columns: ["ttScrollableView", "columns"], frozen: ["frozen", "frozen", booleanAttribute], scrollHeight: "scrollHeight" }, providers: [TreeTableStyle], viewQueries: [{ propertyName: "scrollHeaderViewChild", first: true, predicate: ["scrollHeader"], descendants: true }, { propertyName: "scrollHeaderBoxViewChild", first: true, predicate: ["scrollHeaderBox"], descendants: true }, { propertyName: "scrollBodyViewChild", first: true, predicate: ["scrollBody"], descendants: true }, { propertyName: "scrollTableViewChild", first: true, predicate: ["scrollTable"], descendants: true }, { propertyName: "scrollLoadingTableViewChild", first: true, predicate: ["loadingTable"], descendants: true }, { propertyName: "scrollFooterViewChild", first: true, predicate: ["scrollFooter"], descendants: true }, { propertyName: "scrollFooterBoxViewChild", first: true, predicate: ["scrollFooterBox"], descendants: true }, { propertyName: "scrollableAlignerViewChild", first: true, predicate: ["scrollableAligner"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
<div #scrollHeader [class]="cx('scrollableHeader')" [pBind]="ptm('scrollableHeader')">
<div #scrollHeaderBox [class]="cx('scrollableHeaderBox')" [pBind]="ptm('scrollableHeaderBox')">
<table [class]="cn(cx('scrollableHeaderTable'), tt.tableStyleClass)" [pBind]="ptm('scrollableHeaderTable')" [ngStyle]="tt.tableStyle">
<ng-container
*ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt._frozenColGroupTemplate || tt.colGroupTemplate || tt._colGroupTemplate : tt.colGroupTemplate || tt._colGroupTemplate; context: { $implicit: columns }"
></ng-container>
<thead role="rowgroup" [class]="cx('thead')" [pBind]="ptm('thead')">
<ng-container
*ngTemplateOutlet="frozen ? tt.frozenHeaderTemplate || tt._frozenHeaderTemplate || tt.headerTemplate || tt._headerTemplate : tt.headerTemplate || tt._headerTemplate; context: { $implicit: columns }"
></ng-container>
</thead>
</table>
</div>
</div>
<p-scroller
*ngIf="tt.virtualScroll"
#scroller
[items]="tt.serializedValue"
[styleClass]="cx('scrollableBody')"
[style]="{ height: tt.scrollHeight !== 'flex' ? tt.scrollHeight : undefined }"
[scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
[itemSize]="tt.virtualScrollItemSize || tt._virtualRowHeight"
[lazy]="tt.lazy"
(onLazyLoad)="tt.onLazyItemLoad($event)"
[options]="tt.virtualScrollOptions"
[pt]="ptm('virtualScroller')"
>
<ng-template #content let-items let-scrollerOptions="options">
<ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
</ng-template>
<ng-container *ngIf="tt.loaderTemplate || tt._loaderTemplate">
<ng-template #loader let-scrollerOptions="options">
<ng-container *ngTemplateOutlet="tt.loaderTemplate || tt._loaderTemplate; context: { options: scrollerOptions }"></ng-container>
</ng-template>
</ng-container>
</p-scroller>
<ng-container *ngIf="!tt.virtualScroll">
<div
#scrollBody
[class]="cx('scrollableBody')"
[pBind]="ptm('scrollableBody')"
[ngStyle]="{
'max-height': tt.scrollHeight !== 'flex' ? scrollHeight : undefined,
'overflow-y': !frozen && tt.scrollHeight ? 'scroll' : undefined
}"
>
<ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: serializedValue, options: {} }"></ng-container>
</div>
</ng-container>
<ng-template #buildInItems let-items let-scrollerOptions="options">
<table role="treegrid" #scrollTable [pBind]="ptm('table')" [class]="tt.tableStyleClass" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="tt.tableStyle" [style]="scrollerOptions.contentStyle">
<ng-container
*ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt._frozenColGroupTemplate || tt.colGroupTemplate || tt._colGroupTemplate : tt.colGroupTemplate || tt._colGroupTemplate; context: { $implicit: columns }"
></ng-container>
<tbody
[pBind]="ptm('tbody')"
role="rowgroup"
[class]="cx('tbody')"
[pBind]="ptm('tbody')"
[pTreeTableBody]="columns"
[unstyled]="unstyled()"
[pTreeTableBodyTemplate]="frozen ? tt.frozenBodyTemplate || tt._frozenBodyTemplate || tt.bodyTemplate || tt._bodyTemplate : tt.bodyTemplate || tt._bodyTemplate"
[serializedNodes]="items"
[frozen]="frozen"
></tbody>
</table>
<div #scrollableAligner [style.background-color]="'transparent'" *ngIf="frozen"></div>
</ng-template>
<div #scrollFooter *ngIf="tt.footerTemplate || tt._footerTemplate" [class]="cx('scrollableFooter')" [pBind]="ptm('scrollableFooter')">
<div #scrollFooterBox [class]="cx('scrollableFooterBox')" [pBind]="ptm('scrollableFooterBox')">
<table [class]="cx('scrollableFooterTable')" [ngClass]="tt.tableStyleClass" [ngStyle]="tt.tableStyle" [pBind]="ptm('scrollableFooterTable')">
<ng-container
*ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt._frozenColGroupTemplate || tt.colGroupTemplate || tt._colGroupTemplate : tt.colGroupTemplate || tt._colGroupTemplate; context: { $implicit: columns }"
></ng-container>
<tfoot role="rowgroup" [class]="cx('tfoot')" [pBind]="ptm('tfoot')">
<ng-container
*ngTemplateOutlet="frozen ? tt.frozenFooterTemplate || tt._frozenFooterTemplate || tt.footerTemplate || tt._footerTemplate : tt.footerTemplate || tt._footerTemplate; context: { $implicit: columns }"
></ng-container>
</tfoot>
</table>
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => Scroller), selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: i0.forwardRef(() => TTBody), selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTScrollableView, decorators: [{
type: Component,
args: [{
selector: '[ttScrollableView]',
standalone: false,
template: `
<div #scrollHeader [class]="cx('scrollableHeader')" [pBind]="ptm('scrollableHeader')">
<div #scrollHeaderBox [class]="cx('scrollableHeaderBox')" [pBind]="ptm('scrollableHeaderBox')">
<table [class]="cn(cx('scrollableHeaderTable'), tt.tableStyleClass)" [pBind]="ptm('scrollableHeaderTable')" [ngStyle]="tt.tableStyle">
<ng-container
*ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt._frozenColGroupTemplate || tt.colGroupTemplate || tt._colGroupTemplate : tt.colGroupTemplate || tt._colGroupTemplate; context: { $implicit: columns }"
></ng-container>
<thead role="rowgroup" [class]="cx('thead')" [pBind]="ptm('thead')">
<ng-container
*ngTemplateOutlet="frozen ? tt.frozenHeaderTemplate || tt._frozenHeaderTemplate || tt.headerTemplate || tt._headerTemplate : tt.headerTemplate || tt._headerTemplate; context: { $implicit: columns }"
></ng-container>
</thead>
</table>
</div>
</div>
<p-scroller
*ngIf="tt.virtualScroll"
#scroller
[items]="tt.serializedValue"
[styleClass]="cx('scrollableBody')"
[style]="{ height: tt.scrollHeight !== 'flex' ? tt.scrollHeight : undefined }"
[scrollHeight]="scrollHeight !== 'flex' ? undefined : '100%'"
[itemSize]="tt.virtualScrollItemSize || tt._virtualRowHeight"
[lazy]="tt.lazy"
(onLazyLoad)="tt.onLazyItemLoad($event)"
[options]="tt.virtualScrollOptions"
[pt]="ptm('virtualScroller')"
>
<ng-template #content let-items let-scrollerOptions="options">
<ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: items, options: scrollerOptions }"></ng-container>
</ng-template>
<ng-container *ngIf="tt.loaderTemplate || tt._loaderTemplate">
<ng-template #loader let-scrollerOptions="options">
<ng-container *ngTemplateOutlet="tt.loaderTemplate || tt._loaderTemplate; context: { options: scrollerOptions }"></ng-container>
</ng-template>
</ng-container>
</p-scroller>
<ng-container *ngIf="!tt.virtualScroll">
<div
#scrollBody
[class]="cx('scrollableBody')"
[pBind]="ptm('scrollableBody')"
[ngStyle]="{
'max-height': tt.scrollHeight !== 'flex' ? scrollHeight : undefined,
'overflow-y': !frozen && tt.scrollHeight ? 'scroll' : undefined
}"
>
<ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: serializedValue, options: {} }"></ng-container>
</div>
</ng-container>
<ng-template #buildInItems let-items let-scrollerOptions="options">
<table role="treegrid" #scrollTable [pBind]="ptm('table')" [class]="tt.tableStyleClass" [ngClass]="scrollerOptions.contentStyleClass" [ngStyle]="tt.tableStyle" [style]="scrollerOptions.contentStyle">
<ng-container
*ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt._frozenColGroupTemplate || tt.colGroupTemplate || tt._colGroupTemplate : tt.colGroupTemplate || tt._colGroupTemplate; context: { $implicit: columns }"
></ng-container>
<tbody
[pBind]="ptm('tbody')"
role="rowgroup"
[class]="cx('tbody')"
[pBind]="ptm('tbody')"
[pTreeTableBody]="columns"
[unstyled]="unstyled()"
[pTreeTableBodyTemplate]="frozen ? tt.frozenBodyTemplate || tt._frozenBodyTemplate || tt.bodyTemplate || tt._bodyTemplate : tt.bodyTemplate || tt._bodyTemplate"
[serializedNodes]="items"
[frozen]="frozen"
></tbody>
</table>
<div #scrollableAligner [style.background-color]="'transparent'" *ngIf="frozen"></div>
</ng-template>
<div #scrollFooter *ngIf="tt.footerTemplate || tt._footerTemplate" [class]="cx('scrollableFooter')" [pBind]="ptm('scrollableFooter')">
<div #scrollFooterBox [class]="cx('scrollableFooterBox')" [pBind]="ptm('scrollableFooterBox')">
<table [class]="cx('scrollableFooterTable')" [ngClass]="tt.tableStyleClass" [ngStyle]="tt.tableStyle" [pBind]="ptm('scrollableFooterTable')">
<ng-container
*ngTemplateOutlet="frozen ? tt.frozenColGroupTemplate || tt._frozenColGroupTemplate || tt.colGroupTemplate || tt._colGroupTemplate : tt.colGroupTemplate || tt._colGroupTemplate; context: { $implicit: columns }"
></ng-container>
<tfoot role="rowgroup" [class]="cx('tfoot')" [pBind]="ptm('tfoot')">
<ng-container
*ngTemplateOutlet="frozen ? tt.frozenFooterTemplate || tt._frozenFooterTemplate || tt.footerTemplate || tt._footerTemplate : tt.footerTemplate || tt._footerTemplate; context: { $implicit: columns }"
></ng-container>
</tfoot>
</table>
</div>
</div>
`,
encapsulation: ViewEncapsulation.None,
providers: [TreeTableStyle]
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: i0.NgZone }], propDecorators: { columns: [{
type: Input,
args: ['ttScrollableView']
}], frozen: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], scrollHeaderViewChild: [{
type: ViewChild,
args: ['scrollHeader']
}], scrollHeaderBoxViewChild: [{
type: ViewChild,
args: ['scrollHeaderBox']
}], scrollBodyViewChild: [{
type: ViewChild,
args: ['scrollBody']
}], scrollTableViewChild: [{
type: ViewChild,
args: ['scrollTable']
}], scrollLoadingTableViewChild: [{
type: ViewChild,
args: ['loadingTable']
}], scrollFooterViewChild: [{
type: ViewChild,
args: ['scrollFooter']
}], scrollFooterBoxViewChild: [{
type: ViewChild,
args: ['scrollFooterBox']
}], scrollableAlignerViewChild: [{
type: ViewChild,
args: ['scrollableAligner']
}], scroller: [{
type: ViewChild,
args: ['scroller']
}], scrollHeight: [{
type: Input
}] } });
class TTSortableColumn extends BaseComponent {
tt;
hostName = 'TreeTable ';
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('sortableColumn', { context: { sorted: this.sorted } }));
}
field;
ttSortableColumnDisabled;
sorted;
subscription;
_componentStyle = inject(TreeTableStyle);
get ariaSorted() {
if (this.sorted && this.tt.sortOrder < 0)
return 'descending';
else if (this.sorted && this.tt.sortOrder > 0)
return 'ascending';
else
return 'none';
}
constructor(tt) {
super();
this.tt = tt;
if (this.isEnabled()) {
this.subscription = this.tt.tableService.sortSource$.subscribe((sortMeta) => {
this.updateSortState();
});
}
}
onInit() {
if (this.isEnabled()) {
this.updateSortState();
}
}
updateSortState() {
this.sorted = this.tt.isSorted(this.field);
}
onClick(event) {
if (this.isEnabled()) {
this.updateSortState();
this.tt.sort({
originalEvent: event,
field: this.field
});
clearSelection();
}
}
onEnterKey(event) {
this.onClick(event);
}
isEnabled() {
return this.ttSortableColumnDisabled !== true;
}
onDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTSortableColumn, deps: [{ token: TreeTable }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.5", type: TTSortableColumn, isStandalone: false, selector: "[ttSortableColumn]", inputs: { field: ["ttSortableColumn", "field"], ttSortableColumnDisabled: ["ttSortableColumnDisabled", "ttSortableColumnDisabled", booleanAttribute] }, host: { attributes: { "role": "columnheader" }, listeners: { "click": "onClick($event)", "keydown.enter": "onEnterKey($event)" }, properties: { "class": "cx(\"sortableColumn\")", "tabindex": "isEnabled() ? \"0\" : null", "attr.aria-sort": "ariaSorted" } }, providers: [TreeTableStyle], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTSortableColumn, decorators: [{
type: Directive,
args: [{
selector: '[ttSortableColumn]',
standalone: false,
host: {
'[class]': 'cx("sortableColumn")',
'[tabindex]': 'isEnabled() ? "0" : null',
role: 'columnheader',
'[attr.aria-sort]': 'ariaSorted'
},
providers: [TreeTableStyle],
hostDirectives: [Bind]
}]
}], ctorParameters: () => [{ type: TreeTable }], propDecorators: { field: [{
type: Input,
args: ['ttSortableColumn']
}], ttSortableColumnDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], onEnterKey: [{
type: HostListener,
args: ['keydown.enter', ['$event']]
}] } });
class TTSortIcon extends BaseComponent {
tt;
cd;
hostName = 'TreeTable';
field;
ariaLabelDesc;
ariaLabelAsc;
subscription;
sortOrder;
_componentStyle = inject(TreeTableStyle);
constructor(tt, cd) {
super();
this.tt = tt;
this.cd = cd;
this.subscription = this.tt.tableService.sortSource$.subscribe((sortMeta) => {
this.updateSortState();
this.cd.markForCheck();
});
}
onInit() {
this.updateSortState();
}
onClick(event) {
event.preventDefault();
}
getMultiSortMetaIndex() {
let multiSortMeta = this.tt._multiSortMeta;
let index = -1;
if (multiSortMeta && this.tt.sortMode === 'multiple' && multiSortMeta.length > 1) {
for (let i = 0; i < multiSortMeta.length; i++) {
let meta = multiSortMeta[i];
if (meta.field === this.field || meta.field === this.field) {
index = i;
break;
}
}
}
return index;
}
updateSortState() {
if (this.tt.sortMode === 'single') {
this.sortOrder = this.tt.isSorted(this.field) ? this.tt.sortOrder : 0;
}
else if (this.tt.sortMode === 'multiple') {
let sortMeta = this.tt.getSortMeta(this.field);
this.sortOrder = sortMeta ? sortMeta.order : 0;
}
}
getBadgeValue() {
return this.getMultiSortMetaIndex() + 1;
}
isMultiSorted() {
return this.tt.sortMode === 'multiple' && this.getMultiSortMetaIndex() > -1;
}
onDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTSortIcon, deps: [{ token: TreeTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: TTSortIcon, isStandalone: false, selector: "p-treeTableSortIcon, p-treetable-sort-icon, p-tree-table-sort-icon", inputs: { field: "field", ariaLabelDesc: "ariaLabelDesc", ariaLabelAsc: "ariaLabelAsc" }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0, template: `
<ng-container *ngIf="!tt.sortIconTemplate && !tt._sortIconTemplate">
<svg data-p-icon="sort-alt" [class]="cx('sortableColumnIcon')" [pBind]="ptm('sortableColumnIcon')" *ngIf="sortOrder === 0" />
<svg data-p-icon="sort-amount-up-alt" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" [pBind]="ptm('sortableColumnIcon')" />
<svg data-p-icon="sort-amount-down" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" [pBind]="ptm('sortableColumnIcon')" />
</ng-container>
<span *ngIf="tt.sortIconTemplate || tt._sortIconTemplate" [class]="cx('sortableColumnIcon')" [pBind]="ptm('sortableColumnIcon')">
<ng-template *ngTemplateOutlet="tt.sortIconTemplate || tt._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
</span>
<p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small" [pt]="ptm('pcSortableColumnBadge')" [unstyled]="unstyled()"></p-badge>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => SortAltIcon), selector: "[data-p-icon=\"sort-alt\"]" }, { kind: "component", type: i0.forwardRef(() => SortAmountUpAltIcon), selector: "[data-p-icon=\"sort-amount-up-alt\"]" }, { kind: "component", type: i0.forwardRef(() => SortAmountDownIcon), selector: "[data-p-icon=\"sort-amount-down\"]" }, { kind: "component", type: i0.forwardRef(() => i5.Badge), selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTSortIcon, decorators: [{
type: Component,
args: [{
selector: 'p-treeTableSortIcon, p-treetable-sort-icon, p-tree-table-sort-icon',
standalone: false,
template: `
<ng-container *ngIf="!tt.sortIconTemplate && !tt._sortIconTemplate">
<svg data-p-icon="sort-alt" [class]="cx('sortableColumnIcon')" [pBind]="ptm('sortableColumnIcon')" *ngIf="sortOrder === 0" />
<svg data-p-icon="sort-amount-up-alt" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" [pBind]="ptm('sortableColumnIcon')" />
<svg data-p-icon="sort-amount-down" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" [pBind]="ptm('sortableColumnIcon')" />
</ng-container>
<span *ngIf="tt.sortIconTemplate || tt._sortIconTemplate" [class]="cx('sortableColumnIcon')" [pBind]="ptm('sortableColumnIcon')">
<ng-template *ngTemplateOutlet="tt.sortIconTemplate || tt._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
</span>
<p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small" [pt]="ptm('pcSortableColumnBadge')" [unstyled]="unstyled()"></p-badge>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [TreeTableStyle]
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: i0.ChangeDetectorRef }], propDecorators: { field: [{
type: Input
}], ariaLabelDesc: [{
type: Input
}], ariaLabelAsc: [{
type: Input
}] } });
class TTResizableColumn extends BaseComponent {
tt;
zone;
hostName = 'TreeTable';
ttResizableColumnDisabled;
resizer;
resizerMouseDownListener;
documentMouseMoveListener;
documentMouseUpListener;
constructor(tt, zone) {
super();
this.tt = tt;
this.zone = zone;
}
onAfterViewInit() {
if (isPlatformBrowser(this.platformId)) {
if (this.isEnabled()) {
addClass(this.el.nativeElement, 'p-resizable-column');
this.resizer = this.renderer.createElement('span');
!this.$unstyled() && this.renderer.addClass(this.resizer, 'p-column-resizer');
this.resizer.setAttribute('data-pc-section', 'columnresizer');
this.renderer.appendChild(this.el.nativeElement, this.resizer);
this.zone.runOutsideAngular(() => {
this.resizerMouseDownListener = this.renderer.listen(this.resizer, 'mousedown', this.onMouseDown.bind(this));
});
}
}
}
bindDocumentEvents() {
this.zone.runOutsideAngular(() => {
this.documentMouseMoveListener = this.renderer.listen(this.document, 'mousemove', this.onDocumentMouseMove.bind(this));
this.documentMouseUpListener = this.renderer.listen(this.document, 'mouseup', this.onDocumentMouseUp.bind(this));
});
}
unbindDocumentEvents() {
if (this.documentMouseMoveListener) {
this.documentMouseMoveListener();
this.documentMouseMoveListener = null;
}
if (this.documentMouseUpListener) {
this.documentMouseUpListener();
this.documentMouseUpListener = null;
}
}
onMouseDown(event) {
this.tt.onColumnResizeBegin(event);
this.bindDocumentEvents();
}
onDocumentMouseMove(event) {
this.tt.onColumnResize(event);
}
onDocumentMouseUp(event) {
this.tt.onColumnResizeEnd(event, this.el.nativeElement);
this.unbindDocumentEvents();
}
isEnabled() {
return this.ttResizableColumnDisabled !== true;
}
onDestroy() {
if (this.resizerMouseDownListener) {
this.resizerMouseDownListener();
this.resizerMouseDownListener = null;
}
this.unbindDocumentEvents();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTResizableColumn, deps: [{ token: TreeTable }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.5", type: TTResizableColumn, isStandalone: false, selector: "[ttResizableColumn]", inputs: { ttResizableColumnDisabled: ["ttResizableColumnDisabled", "ttResizableColumnDisabled", booleanAttribute] }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTResizableColumn, decorators: [{
type: Directive,
args: [{
selector: '[ttResizableColumn]',
standalone: false
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: i0.NgZone }], propDecorators: { ttResizableColumnDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}] } });
class TTReorderableColumn extends BaseComponent {
tt;
zone;
hostName = 'TreeTable';
ttReorderableColumnDisabled;
dragStartListener;
dragOverListener;
dragEnterListener;
dragLeaveListener;
mouseDownListener;
constructor(tt, zone) {
super();
this.tt = tt;
this.zone = zone;
}
onAfterViewInit() {
if (this.isEnabled()) {
this.bindEvents();
}
}
bindEvents() {
if (isPlatformBrowser(this.platformId)) {
this.zone.runOutsideAngular(() => {
this.mouseDownListener = this.renderer.listen(this.el.nativeElement, 'mousedown', this.onMouseDown.bind(this));
this.dragStartListener = this.renderer.listen(this.el.nativeElement, 'dragstart', this.onDragStart.bind(this));
this.dragOverListener = this.renderer.listen(this.el.nativeElement, 'dragover', this.onDragEnter.bind(this));
this.dragEnterListener = this.renderer.listen(this.el.nativeElement, 'dragenter', this.onDragEnter.bind(this));
this.dragLeaveListener = this.renderer.listen(this.el.nativeElement, 'dragleave', this.onDragLeave.bind(this));
});
}
}
unbindEvents() {
if (isPlatformBrowser(this.platformId)) {
if (this.mouseDownListener) {
this.mouseDownListener();
this.mouseDownListener = null;
}
if (this.dragOverListener) {
this.dragOverListener();
this.dragOverListener = null;
}
if (this.dragEnterListener) {
this.dragEnterListener();
this.dragEnterListener = null;
}
if (this.dragLeaveListener) {
this.dragLeaveListener();
this.dragLeaveListener = null;
}
}
}
onMouseDown(event) {
if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || findSingle(event.target, '[data-pc-section="columnresizer"]'))
this.el.nativeElement.draggable = false;
else
this.el.nativeElement.draggable = true;
}
onDragStart(event) {
this.tt.onColumnDragStart(event, this.el.nativeElement);
}
onDragOver(event) {
event.preventDefault();
}
onDragEnter(event) {
this.tt.onColumnDragEnter(event, this.el.nativeElement);
}
onDragLeave(event) {
this.tt.onColumnDragLeave(event);
}
onDrop(event) {
if (this.isEnabled()) {
this.tt.onColumnDrop(event, this.el.nativeElement);
}
}
isEnabled() {
return this.ttReorderableColumnDisabled !== true;
}
onDestroy() {
this.unbindEvents();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTReorderableColumn, deps: [{ token: TreeTable }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.5", type: TTReorderableColumn, isStandalone: false, selector: "[ttReorderableColumn]", inputs: { ttReorderableColumnDisabled: ["ttReorderableColumnDisabled", "ttReorderableColumnDisabled", booleanAttribute] }, host: { listeners: { "drop": "onDrop($event)" } }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTReorderableColumn, decorators: [{
type: Directive,
args: [{
selector: '[ttReorderableColumn]',
standalone: false
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: i0.NgZone }], propDecorators: { ttReorderableColumnDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onDrop: [{
type: HostListener,
args: ['drop', ['$event']]
}] } });
class TTSelectableRow extends BaseComponent {
tt;
tableService;
rowNode;
ttSelectableRowDisabled;
selected;
subscription;
_componentStyle = inject(TreeTableStyle);
constructor(tt, tableService) {
super();
this.tt = tt;
this.tableService = tableService;
if (this.isEnabled()) {
this.subscription = this.tt.tableService.selectionSource$.subscribe(() => {
this.selected = this.tt.isSelected(this.rowNode.node);
});
}
}
onInit() {
if (this.isEnabled()) {
this.selected = this.tt.isSelected(this.rowNode.node);
}
}
onClick(event) {
if (this.isEnabled()) {
this.tt.handleRowClick({
originalEvent: event,
rowNode: this.rowNode
});
}
}
onKeyDown(event) {
switch (event.code) {
case 'Enter':
case 'Space':
this.onEnterKey(event);
break;
default:
break;
}
}
onTouchEnd(event) {
if (this.isEnabled()) {
this.tt.handleRowTouchEnd(event);
}
}
onEnterKey(event) {
if (this.tt.selectionMode === 'checkbox') {
this.tt.toggleNodeWithCheckbox({
originalEvent: event,
rowNode: this.rowNode
});
}
else {
this.onClick(event);
}
event.preventDefault();
}
isEnabled() {
return this.ttSelectableRowDisabled !== true;
}
onDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTSelectableRow, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.5", type: TTSelectableRow, isStandalone: false, selector: "[ttSelectableRow]", inputs: { rowNode: ["ttSelectableRow", "rowNode"], ttSelectableRowDisabled: ["ttSelectableRowDisabled", "ttSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)", "touchend": "onTouchEnd($event)" }, properties: { "class": "cx(\"row\")", "attr.aria-selected": "selected" } }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTSelectableRow, decorators: [{
type: Directive,
args: [{
selector: '[ttSelectableRow]',
standalone: false,
host: {
'[class]': 'cx("row")',
'[attr.aria-selected]': 'selected'
},
providers: [TreeTableStyle]
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }], propDecorators: { rowNode: [{
type: Input,
args: ['ttSelectableRow']
}], ttSelectableRowDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], onKeyDown: [{
type: HostListener,
args: ['keydown', ['$event']]
}], onTouchEnd: [{
type: HostListener,
args: ['touchend', ['$event']]
}] } });
class TTSelectableRowDblClick extends BaseComponent {
tt;
tableService;
rowNode;
ttSelectableRowDisabled;
selected;
subscription;
_componentStyle = inject(TreeTableStyle);
constructor(tt, tableService) {
super();
this.tt = tt;
this.tableService = tableService;
if (this.isEnabled()) {
this.subscription = this.tt.tableService.selectionSource$.subscribe(() => {
this.selected = this.tt.isSelected(this.rowNode.node);
});
}
}
onInit() {
if (this.isEnabled()) {
this.selected = this.tt.isSelected(this.rowNode.node);
}
}
onClick(event) {
if (this.isEnabled()) {
this.tt.handleRowClick({
originalEvent: event,
rowNode: this.rowNode
});
}
}
isEnabled() {
return this.ttSelectableRowDisabled !== true;
}
onDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTSelectableRowDblClick, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.5", type: TTSelectableRowDblClick, isStandalone: false, selector: "[ttSelectableRowDblClick]", inputs: { rowNode: ["ttSelectableRowDblClick", "rowNode"], ttSelectableRowDisabled: ["ttSelectableRowDisabled", "ttSelectableRowDisabled", booleanAttribute] }, host: { listeners: { "dblclick": "onClick($event)" }, properties: { "class": "cx(\"row\")" } }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTSelectableRowDblClick, decorators: [{
type: Directive,
args: [{
selector: '[ttSelectableRowDblClick]',
standalone: false,
host: {
'[class]': 'cx("row")'
},
providers: [TreeTableStyle]
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }], propDecorators: { rowNode: [{
type: Input,
args: ['ttSelectableRowDblClick']
}], ttSelectableRowDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onClick: [{
type: HostListener,
args: ['dblclick', ['$event']]
}] } });
class TTContextMenuRow extends BaseComponent {
tt;
tableService;
rowNode;
ttContextMenuRowDisabled;
selected;
subscription;
_componentStyle = inject(TreeTableStyle);
constructor(tt, tableService) {
super();
this.tt = tt;
this.tableService = tableService;
if (this.isEnabled()) {
this.subscription = this.tt.tableService.contextMenuSource$.subscribe((node) => {
this.selected = node ? this.tt.equals(this.rowNode.node, node) : false;
});
}
}
onContextMenu(event) {
if (this.isEnabled()) {
this.tt.handleRowRightClick({
originalEvent: event,
rowNode: this.rowNode
});
this.el.nativeElement.focus();
event.preventDefault();
}
}
isEnabled() {
return this.ttContextMenuRowDisabled !== true;
}
onDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTContextMenuRow, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.5", type: TTContextMenuRow, isStandalone: false, selector: "[ttContextMenuRow]", inputs: { rowNode: ["ttContextMenuRow", "rowNode"], ttContextMenuRowDisabled: ["ttContextMenuRowDisabled", "ttContextMenuRowDisabled", booleanAttribute] }, host: { listeners: { "contextmenu": "onContextMenu($event)" }, properties: { "class": "cx(\"contextMenuRow\")", "tabindex": "isEnabled() ? 0 : undefined" } }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTContextMenuRow, decorators: [{
type: Directive,
args: [{
selector: '[ttContextMenuRow]',
standalone: false,
host: {
'[class]': 'cx("contextMenuRow")',
'[tabindex]': 'isEnabled() ? 0 : undefined'
},
providers: [TreeTableStyle]
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }], propDecorators: { rowNode: [{
type: Input,
args: ['ttContextMenuRow']
}], ttContextMenuRowDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onContextMenu: [{
type: HostListener,
args: ['contextmenu', ['$event']]
}] } });
class TTCheckbox extends BaseComponent {
tt;
tableService;
cd;
hostName = 'TreeTable';
disabled;
rowNode;
checked;
partialChecked;
focused;
subscription;
_componentStyle = inject(TreeTableStyle);
constructor(tt, tableService, cd) {
super();
this.tt = tt;
this.tableService = tableService;
this.cd = cd;
this.subscription = this.tt.tableService.selectionSource$.subscribe(() => {
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();
});
}
onInit() {
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) {
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
});
}
}
clearSelection();
}
onFocus() {
this.focused = true;
}
onBlur() {
this.focused = false;
}
onDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTCheckbox, deps: [{ token: TreeTable }, { token: TreeTableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.5", type: TTCheckbox, isStandalone: false, selector: "p-treeTableCheckbox, p-treetable-checkbox, p-tree-table-checkbox", inputs: { disabled: ["disabled", "disabled", booleanAttribute], rowNode: ["value", "rowNode"] }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0, template: `
<p-checkbox [ngModel]="checked" [pt]="ptm('pcRowCheckbox')" (onChange)="onClick($event)" [binary]="true" [disabled]="disabled" [indeterminate]="partialChecked" [styleClass]="cx('pcNodeCheckbox')" [tabIndex]="-1" [unstyled]="unstyled()">
<ng-container *ngIf="tt.checkboxIconTemplate || tt._checkboxIconTemplate">
<ng-template pTemplate="icon">
<ng-template *ngTemplateOutlet="tt.checkboxIconTemplate || tt._checkboxIconTemplate; context: { $implicit: checked, partialSelected: partialChecked }"></ng-template>
</ng-template>
</ng-container>
</p-checkbox>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i4.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => Checkbox), selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i0.forwardRef(() => i6.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i6.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTCheckbox, decorators: [{
type: Component,
args: [{
selector: 'p-treeTableCheckbox, p-treetable-checkbox, p-tree-table-checkbox',
standalone: false,
template: `
<p-checkbox [ngModel]="checked" [pt]="ptm('pcRowCheckbox')" (onChange)="onClick($event)" [binary]="true" [disabled]="disabled" [indeterminate]="partialChecked" [styleClass]="cx('pcNodeCheckbox')" [tabIndex]="-1" [unstyled]="unstyled()">
<ng-container *ngIf="tt.checkboxIconTemplate || tt._checkboxIconTemplate">
<ng-template pTemplate="icon">
<ng-template *ngTemplateOutlet="tt.checkboxIconTemplate || tt._checkboxIconTemplate; context: { $implicit: checked, partialSelected: partialChecked }"></ng-template>
</ng-template>
</ng-container>
</p-checkbox>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [TreeTableStyle]
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }, { type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], rowNode: [{
type: Input,
args: ['value']
}] } });
class TTHeaderCheckbox extends BaseComponent {
tt;
tableService;
checked;
disabled;
selectionChangeSubscription;
valueChangeSubscription;
constructor(tt, tableService) {
super();
this.tt = tt;
this.tableService = tableService;
this.valueChangeSubscription = this.tt.tableService.uiUpdateSource$.subscribe(() => {
this.checked = this.updateCheckedState();
});
this.selectionChangeSubscription = this.tt.tableService.selectionSource$.subscribe(() => {
this.checked = this.updateCheckedState();
});
}
onInit() {
this.checked = this.updateCheckedState();
}
onClick(event) {
if ((this.tt?.value || this.tt?.filteredNodes) && ((this.tt?.value && this.tt.value.length > 0) || (this.tt?.filteredNodes && this.tt.filteredNodes.length > 0))) {
this.tt?.toggleNodesWithCheckbox(event, !this.checked);
}
clearSelection();
}
onDestroy() {
if (this.selectionChangeSubscription) {
this.selectionChangeSubscription.unsubscribe();
}
if (this.valueChangeSubscription) {
this.valueChangeSubscription.unsubscribe();
}
}
updateCheckedState() {
this.cd.markForCheck();
let checked;
const data = this.tt.filteredNodes || this.tt.value;
if (data) {
if (this.tt.selectionKeys) {
for (let node of data) {
if (this.tt.isNodeSelected(node)) {
checked = true;
}
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;
}
}
}
}
else {
checked = false;
}
return checked;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTHeaderCheckbox, deps: [{ token: TreeTable }, { token: TreeTableService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: TTHeaderCheckbox, isStandalone: false, selector: "p-treeTableHeaderCheckbox", usesInheritance: true, ngImport: i0, template: `
<p-checkbox [ngModel]="checked" [pt]="ptm('pcHeaderCheckbox')" (onChange)="onClick($event)" [binary]="true" [disabled]="!tt.value || tt.value.length === 0" [unstyled]="unstyled()">
<ng-container *ngIf="tt.headerCheckboxIconTemplate || tt._headerCheckboxIconTemplate">
<ng-template pTemplate="icon">
<ng-template *ngTemplateOutlet="tt.headerCheckboxIconTemplate || tt._headerCheckboxIconTemplate; context: { $implicit: checked }"></ng-template>
</ng-template>
</ng-container>
</p-checkbox>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i4.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => Checkbox), selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i0.forwardRef(() => i6.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i6.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTHeaderCheckbox, decorators: [{
type: Component,
args: [{
selector: 'p-treeTableHeaderCheckbox',
standalone: false,
template: `
<p-checkbox [ngModel]="checked" [pt]="ptm('pcHeaderCheckbox')" (onChange)="onClick($event)" [binary]="true" [disabled]="!tt.value || tt.value.length === 0" [unstyled]="unstyled()">
<ng-container *ngIf="tt.headerCheckboxIconTemplate || tt._headerCheckboxIconTemplate">
<ng-template pTemplate="icon">
<ng-template *ngTemplateOutlet="tt.headerCheckboxIconTemplate || tt._headerCheckboxIconTemplate; context: { $implicit: checked }"></ng-template>
</ng-template>
</ng-container>
</p-checkbox>
`,
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: TreeTableService }] });
class TTEditableColumn extends BaseComponent {
tt;
zone;
data;
field;
ttEditableColumnDisabled;
constructor(tt, zone) {
super();
this.tt = tt;
this.zone = zone;
}
onAfterViewInit() {
if (this.isEnabled()) {
!this.$unstyled() && addClass(this.el.nativeElement, 'p-editable-column');
this.el?.nativeElement.setAttribute('data-p-editable-column', 'true');
}
}
onClick(event) {
if (this.isEnabled()) {
this.tt.editingCellClick = true;
if (this.tt.editingCell) {
if (this.tt.editingCell !== this.el.nativeElement) {
if (!this.tt.isEditingCellValid()) {
return;
}
if (this.tt.editingCell)
!this.$unstyled() && removeClass(this.tt.editingCell, 'p-cell-editing');
this.openCell();
}
}
else {
this.openCell();
}
}
}
openCell() {
this.tt.updateEditingCell(this.el.nativeElement, this.data, this.field);
!this.$unstyled() && addClass(this.el.nativeElement, 'p-cell-editing');
this.el?.nativeElement.setAttribute('data-p-cell-editing', 'true');
this.tt.onEditInit.emit({ field: this.field, data: this.data });
this.tt.editingCellClick = true;
this.zone.runOutsideAngular(() => {
setTimeout(() => {
let focusable = findSingle(this.el.nativeElement, 'input, textarea');
if (focusable) {
focusable.focus();
}
}, 50);
});
}
closeEditingCell() {
if (this.tt.editingCell)
!this.$unstyled() && removeClass(this.tt.editingCell, 'p-checkbox-icon');
this.tt.editingCell = null;
this.tt.unbindDocumentEditListener();
}
onKeyDown(event) {
if (this.isEnabled()) {
//enter
if (event.keyCode == 13 && !event.shiftKey) {
if (this.tt.isEditingCellValid()) {
if (this.tt.editingCell) {
!this.$unstyled() && removeClass(this.tt.editingCell, 'p-cell-editing');
this.el?.nativeElement.setAttribute('data-p-cell-editing', 'false');
}
this.closeEditingCell();
this.tt.onEditComplete.emit({ field: this.field, data: this.data });
}
event.preventDefault();
}
//escape
else if (event.keyCode == 27) {
if (this.tt.isEditingCellValid()) {
if (this.tt.editingCell) {
!this.$unstyled() && removeClass(this.tt.editingCell, 'p-cell-editing');
this.el?.nativeElement.setAttribute('data-p-cell-editing', 'false');
}
this.closeEditingCell();
this.tt.onEditCancel.emit({ field: this.field, data: this.data });
}
event.preventDefault();
}
//tab
else if (event.keyCode == 9) {
this.tt.onEditComplete.emit({ field: this.field, data: this.data });
if (event.shiftKey)
this.moveToPreviousCell(event);
else
this.moveToNextCell(event);
}
}
}
findCell(element) {
if (element) {
let cell = element;
while (cell && !findSingle(cell, '[data-p-cell-editing="true"]')) {
cell = cell.parentElement;
}
return cell;
}
else {
return null;
}
}
moveToPreviousCell(event) {
let currentCell = this.findCell(event.target);
let row = currentCell.parentElement;
let targetCell = this.findPreviousEditableColumn(currentCell);
if (targetCell) {
// @ts-ignore
invokeElementMethod(targetCell, 'click', undefined);
event.preventDefault();
}
}
moveToNextCell(event) {
let currentCell = this.findCell(event.target);
let row = currentCell.parentElement;
let targetCell = this.findNextEditableColumn(currentCell);
if (targetCell) {
// @ts-ignore
invokeElementMethod(targetCell, 'click', undefined);
event.preventDefault();
}
}
findPreviousEditableColumn(cell) {
let prevCell = cell.previousElementSibling;
if (!prevCell) {
let previousRow = cell.parentElement ? cell.parentElement.previousElementSibling : null;
if (previousRow) {
prevCell = previousRow.lastElementChild;
}
}
if (prevCell) {
if (findSingle(prevCell, '[data-p-editable-column="true"]'))
return prevCell;
else
return this.findPreviousEditableColumn(prevCell);
}
else {
return null;
}
}
findNextEditableColumn(cell) {
let nextCell = cell.nextElementSibling;
if (!nextCell) {
let nextRow = cell.parentElement ? cell.parentElement.nextElementSibling : null;
if (nextRow) {
nextCell = nextRow.firstElementChild;
}
}
if (nextCell) {
if (findSingle(nextCell, '[data-p-editable-column="true"]'))
return nextCell;
else
return this.findNextEditableColumn(nextCell);
}
else {
return null;
}
}
isEnabled() {
return this.ttEditableColumnDisabled !== true;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTEditableColumn, deps: [{ token: TreeTable }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.5", type: TTEditableColumn, isStandalone: false, selector: "[ttEditableColumn]", inputs: { data: ["ttEditableColumn", "data"], field: ["ttEditableColumnField", "field"], ttEditableColumnDisabled: ["ttEditableColumnDisabled", "ttEditableColumnDisabled", booleanAttribute] }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeyDown($event)" } }, usesInheritance: true, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTEditableColumn, decorators: [{
type: Directive,
args: [{
selector: '[ttEditableColumn]',
standalone: false
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: i0.NgZone }], propDecorators: { data: [{
type: Input,
args: ['ttEditableColumn']
}], field: [{
type: Input,
args: ['ttEditableColumnField']
}], ttEditableColumnDisabled: [{
type: Input,
args: [{ transform: booleanAttribute }]
}], onClick: [{
type: HostListener,
args: ['click', ['$event']]
}], onKeyDown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
class TreeTableCellEditor extends BaseComponent {
tt;
editableColumn;
hostName = 'TreeTable';
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('cellEditor'));
}
templates;
inputTemplate;
outputTemplate;
constructor(tt, editableColumn) {
super();
this.tt = tt;
this.editableColumn = editableColumn;
}
onAfterContentInit() {
this.templates.forEach((item) => {
switch (item.getType()) {
case 'input':
this.inputTemplate = item.template;
break;
case 'output':
this.outputTemplate = item.template;
break;
}
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableCellEditor, deps: [{ token: TreeTable }, { token: TTEditableColumn }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: TreeTableCellEditor, isStandalone: false, selector: "p-treeTableCellEditor, p-treetablecelleditor, p-treetable-cell-editor", queries: [{ propertyName: "templates", predicate: PrimeTemplate }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
<ng-container *ngIf="tt.editingCell === editableColumn.el.nativeElement">
<ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
</ng-container>
<ng-container *ngIf="!tt.editingCell || tt.editingCell !== editableColumn.el.nativeElement">
<ng-container *ngTemplateOutlet="outputTemplate"></ng-container>
</ng-container>
`, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableCellEditor, decorators: [{
type: Component,
args: [{
selector: 'p-treeTableCellEditor, p-treetablecelleditor, p-treetable-cell-editor',
standalone: false,
template: `
<ng-container *ngIf="tt.editingCell === editableColumn.el.nativeElement">
<ng-container *ngTemplateOutlet="inputTemplate"></ng-container>
</ng-container>
<ng-container *ngIf="!tt.editingCell || tt.editingCell !== editableColumn.el.nativeElement">
<ng-container *ngTemplateOutlet="outputTemplate"></ng-container>
</ng-container>
`,
encapsulation: ViewEncapsulation.None,
hostDirectives: [Bind]
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: TTEditableColumn }], propDecorators: { templates: [{
type: ContentChildren,
args: [PrimeTemplate]
}] } });
class TTRow extends BaseComponent {
tt;
el;
zone;
hostName = 'TreeTable';
bindDirectiveInstance = inject(Bind, { self: true });
treeTable = inject(TreeTable);
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('row', this.ptmOptions()));
}
get level() {
return this.rowNode?.['level'] + 1;
}
get styleClass() {
return this.rowNode?.node['styleClass'] || '';
}
get expanded() {
return this.rowNode?.node['expanded'];
}
rowNode;
_componentStyle = inject(TreeTableStyle);
constructor(tt, el, zone) {
super();
this.tt = tt;
this.el = el;
this.zone = zone;
}
onKeyDown(event) {
switch (event.code) {
case 'ArrowDown':
this.onArrowDownKey(event);
break;
case 'ArrowUp':
this.onArrowUpKey(event);
break;
case 'ArrowRight':
this.onArrowRightKey(event);
break;
case 'ArrowLeft':
this.onArrowLeftKey(event);
break;
case 'Tab':
this.onTabKey(event);
break;
case 'Home':
this.onHomeKey(event);
break;
case 'End':
this.onEndKey(event);
break;
default:
break;
}
}
onArrowDownKey(event) {
let nextRow = this.el?.nativeElement?.nextElementSibling;
if (nextRow) {
this.focusRowChange(event.currentTarget, nextRow);
}
event.preventDefault();
}
onArrowUpKey(event) {
let prevRow = this.el?.nativeElement?.previousElementSibling;
if (prevRow) {
this.focusRowChange(event.currentTarget, prevRow);
}
event.preventDefault();
}
onArrowRightKey(event) {
const currentTarget = event.currentTarget;
const isHiddenIcon = findSingle(currentTarget, 'button').style.visibility === 'hidden';
if (!isHiddenIcon && !this.expanded && this.rowNode.node['children']) {
this.expand(event);
currentTarget.tabIndex = -1;
}
event.preventDefault();
}
onArrowLeftKey(event) {
const container = this.tt.el?.nativeElement;
const expandedRows = find(container, '[aria-expanded="true"]');
const lastExpandedRow = expandedRows[expandedRows.length - 1];
if (this.expanded) {
this.collapse(event);
}
if (lastExpandedRow) {
this.tt.toggleRowIndex = getIndex(lastExpandedRow);
}
this.restoreFocus();
event.preventDefault();
}
onHomeKey(event) {
const firstElement = findSingle(this.tt.el?.nativeElement, `tr[aria-level="${this.level}"]`);
firstElement && focus(firstElement);
event.preventDefault();
}
onEndKey(event) {
const nodes = find(this.tt.el?.nativeElement, `tr[aria-level="${this.level}"]`);
const lastElement = nodes[nodes.length - 1];
focus(lastElement);
event.preventDefault();
}
onTabKey(event) {
const rows = this.el.nativeElement ? [...find(this.el.nativeElement.parentNode, 'tr')] : undefined;
if (rows && isNotEmpty(rows)) {
const hasSelectedRow = rows.some((row) => getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-selected') === 'true');
rows.forEach((row) => {
row.tabIndex = -1;
});
if (hasSelectedRow) {
const selectedNodes = rows.filter((node) => getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-selected') === 'true');
selectedNodes[0].tabIndex = 0;
return;
}
rows[0].tabIndex = 0;
}
}
expand(event) {
this.tt.toggleRowIndex = getIndex(this.el.nativeElement);
this.rowNode.node['expanded'] = true;
this.tt.updateSerializedValue();
this.tt.tableService.onUIUpdate(this.tt.value);
this.rowNode.node['children'] ? this.restoreFocus(this.tt.toggleRowIndex + 1) : this.restoreFocus();
this.tt.onNodeExpand.emit({
originalEvent: event,
node: this.rowNode.node
});
}
collapse(event) {
this.rowNode.node['expanded'] = false;
this.tt.updateSerializedValue();
this.tt.tableService.onUIUpdate(this.tt.value);
this.tt.onNodeCollapse.emit({ originalEvent: event, node: this.rowNode.node });
}
focusRowChange(firstFocusableRow, currentFocusedRow, lastVisibleDescendant) {
firstFocusableRow.tabIndex = '-1';
currentFocusedRow.tabIndex = '0';
focus(currentFocusedRow);
}
restoreFocus(index) {
this.zone.runOutsideAngular(() => {
setTimeout(() => {
const container = this.tt.el?.nativeElement;
const tbody = findSingle(container, '[data-pc-section="tbody"]');
const row = tbody?.children?.[index || this.tt.toggleRowIndex || 0];
const rows = [...find(container, 'tr')];
rows &&
rows.forEach((r) => {
if (row && !row.isSameNode(r)) {
r.tabIndex = -1;
}
});
if (row) {
row.tabIndex = 0;
row.focus();
}
}, 25);
});
}
ptmOptions() {
return {
context: {
selectable: this.treeTable?.rowHover || this.treeTable.selectionMode === 'row',
selected: this.treeTable.isSelected(this.rowNode?.node),
scrollable: this.treeTable?.scrollable,
rowNode: this.rowNode
}
};
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTRow, deps: [{ token: TreeTable }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.5", type: TTRow, isStandalone: false, selector: "[ttRow]", inputs: { rowNode: ["ttRow", "rowNode"] }, host: { attributes: { "role": "row" }, listeners: { "keydown": "onKeyDown($event)" }, properties: { "class": "'p-element ' + styleClass", "tabindex": "'0'", "attr.aria-expanded": "expanded", "attr.aria-level": "level" } }, providers: [TreeTableStyle], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TTRow, decorators: [{
type: Directive,
args: [{
selector: '[ttRow]',
standalone: false,
host: {
'[class]': `'p-element ' + styleClass`,
'[tabindex]': "'0'",
'[attr.aria-expanded]': 'expanded',
'[attr.aria-level]': 'level',
role: 'row'
},
providers: [TreeTableStyle],
hostDirectives: [Bind]
}]
}], ctorParameters: () => [{ type: TreeTable }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { rowNode: [{
type: Input,
args: ['ttRow']
}], onKeyDown: [{
type: HostListener,
args: ['keydown', ['$event']]
}] } });
class TreeTableToggler extends BaseComponent {
tt;
hostName = 'TreeTable';
bindDirectiveInstance = inject(Bind, { self: true });
onAfterViewChecked() {
this.bindDirectiveInstance.setAttrs(this.ptm('toggler'));
}
rowNode;
_componentStyle = inject(TreeTableStyle);
constructor(tt) {
super();
this.tt = tt;
}
get toggleButtonAriaLabel() {
return this.config.translation ? (this.rowNode.expanded ? this.config.translation?.aria?.collapseRow : this.config.translation?.aria?.expandRow) : undefined;
}
onClick(event) {
this.rowNode.node.expanded = !this.rowNode.node.expanded;
if (this.rowNode.node.expanded) {
this.tt.onNodeExpand.emit({
originalEvent: event,
node: this.rowNode.node
});
}
else {
this.tt.onNodeCollapse.emit({
originalEvent: event,
node: this.rowNode.node
});
}
this.tt.updateSerializedValue();
this.tt.tableService.onUIUpdate(this.tt.value);
event.preventDefault();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableToggler, deps: [{ token: TreeTable }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: TreeTableToggler, isStandalone: false, selector: "p-treeTableToggler, p-treetabletoggler, p-treetable-toggler", inputs: { rowNode: "rowNode" }, providers: [TreeTableStyle], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: `
<button
type="button"
[class]="cx('toggler')"
[pBind]="ptm('rowToggleButton')"
(click)="onClick($event)"
tabindex="-1"
pRipple
[style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'"
[style.marginInlineStart]="rowNode.level * 16 + 'px'"
[attr.data-pc-group-section]="'rowactionbutton'"
[attr.aria-label]="toggleButtonAriaLabel"
>
<ng-container *ngIf="!tt.togglerIconTemplate && !tt._togglerIconTemplate">
<svg data-p-icon="chevron-down" *ngIf="rowNode.node.expanded" [pBind]="ptm('nodetoggleicon')" [attr.aria-hidden]="true" />
<svg data-p-icon="chevron-right" *ngIf="!rowNode.node.expanded" [pBind]="ptm('nodetoggleicon')" [attr.aria-hidden]="true" />
</ng-container>
<ng-template *ngTemplateOutlet="tt.togglerIconTemplate || tt._togglerIconTemplate; context: { $implicit: rowNode.node.expanded }"></ng-template>
</button>
`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i2.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i2.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "[data-p-icon=\"chevron-right\"]" }, { kind: "directive", type: i0.forwardRef(() => i1.Bind), selector: "[pBind]", inputs: ["pBind"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableToggler, decorators: [{
type: Component,
args: [{
selector: 'p-treeTableToggler, p-treetabletoggler, p-treetable-toggler',
standalone: false,
template: `
<button
type="button"
[class]="cx('toggler')"
[pBind]="ptm('rowToggleButton')"
(click)="onClick($event)"
tabindex="-1"
pRipple
[style.visibility]="rowNode.node.leaf === false || (rowNode.node.children && rowNode.node.children.length) ? 'visible' : 'hidden'"
[style.marginInlineStart]="rowNode.level * 16 + 'px'"
[attr.data-pc-group-section]="'rowactionbutton'"
[attr.aria-label]="toggleButtonAriaLabel"
>
<ng-container *ngIf="!tt.togglerIconTemplate && !tt._togglerIconTemplate">
<svg data-p-icon="chevron-down" *ngIf="rowNode.node.expanded" [pBind]="ptm('nodetoggleicon')" [attr.aria-hidden]="true" />
<svg data-p-icon="chevron-right" *ngIf="!rowNode.node.expanded" [pBind]="ptm('nodetoggleicon')" [attr.aria-hidden]="true" />
</ng-container>
<ng-template *ngTemplateOutlet="tt.togglerIconTemplate || tt._togglerIconTemplate; context: { $implicit: rowNode.node.expanded }"></ng-template>
</button>
`,
encapsulation: ViewEncapsulation.None,
providers: [TreeTableStyle],
hostDirectives: [Bind]
}]
}], ctorParameters: () => [{ type: TreeTable }], propDecorators: { rowNode: [{
type: Input
}] } });
class TreeTableModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.5", ngImport: i0, type: TreeTableModule, declarations: [TreeTable, TreeTableToggler, TTScrollableView, TTBody, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor], imports: [CommonModule,
PaginatorModule,
Ripple,
Scroller,
SpinnerIcon,
ArrowDownIcon,
ArrowUpIcon,
SortAltIcon,
SortAmountUpAltIcon,
SortAmountDownIcon,
BadgeModule,
CheckIcon,
ChevronDownIcon,
ChevronRightIcon,
Checkbox,
SharedModule,
FormsModule,
BindModule], exports: [TreeTable, SharedModule, TreeTableToggler, TTSortableColumn, TTSortIcon, TTResizableColumn, TTRow, TTReorderableColumn, TTSelectableRow, TTSelectableRowDblClick, TTContextMenuRow, TTCheckbox, TTHeaderCheckbox, TTEditableColumn, TreeTableCellEditor, Scroller] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableModule, imports: [CommonModule,
PaginatorModule,
Scroller,
SpinnerIcon,
ArrowDownIcon,
ArrowUpIcon,
SortAltIcon,
SortAmountUpAltIcon,
SortAmountDownIcon,
BadgeModule,
CheckIcon,
ChevronDownIcon,
ChevronRightIcon,
Checkbox,
SharedModule,
FormsModule,
BindModule, SharedModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: TreeTableModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
PaginatorModule,
Ripple,
Scroller,
SpinnerIcon,
ArrowDownIcon,
ArrowUpIcon,
SortAltIcon,
SortAmountUpAltIcon,
SortAmountDownIcon,
BadgeModule,
CheckIcon,
ChevronDownIcon,
ChevronRightIcon,
Checkbox,
SharedModule,
FormsModule,
BindModule
],
exports: [
TreeTable,
SharedModule,
TreeTableToggler,
TTSortableColumn,
TTSortIcon,
TTResizableColumn,
TTRow,
TTReorderableColumn,
TTSelectableRow,
TTSelectableRowDblClick,
TTContextMenuRow,
TTCheckbox,
TTHeaderCheckbox,
TTEditableColumn,
TreeTableCellEditor,
Scroller
],
declarations: [
TreeTable,
TreeTableToggler,
TTScrollableView,
TTBody,
TTSortableColumn,
TTSortIcon,
TTResizableColumn,
TTRow,
TTReorderableColumn,
TTSelectableRow,
TTSelectableRowDblClick,
TTContextMenuRow,
TTCheckbox,
TTHeaderCheckbox,
TTEditableColumn,
TreeTableCellEditor
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { TTBody, TTCheckbox, TTContextMenuRow, TTEditableColumn, TTHeaderCheckbox, TTReorderableColumn, TTResizableColumn, TTRow, TTScrollableView, TTSelectableRow, TTSelectableRowDblClick, TTSortIcon, TTSortableColumn, TreeTable, TreeTableCellEditor, TreeTableClasses, TreeTableModule, TreeTableService, TreeTableStyle, TreeTableToggler };
//# sourceMappingURL=primeng-treetable.mjs.map