primeng/fesm2022/primeng-treetable.mjs.map

PrimeNG is a premium UI library for Angular featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock,

{"version":3,"file":"primeng-treetable.mjs","sources":["../../src/treetable/style/treetablestyle.ts","../../src/treetable/treetable-service.ts","../../src/treetable/treetable-body.ts","../../src/treetable/treetable-scrollable-view.ts","../../src/treetable/treetable.ts","../../src/treetable/sortable-column.ts","../../src/treetable/sort-icon.ts","../../src/treetable/resizable-column.ts","../../src/treetable/reorderable-column.ts","../../src/treetable/selectable-row.ts","../../src/treetable/selectable-row-dbl-click.ts","../../src/treetable/context-menu-row.ts","../../src/treetable/treetable-checkbox.ts","../../src/treetable/treetable-header-checkbox.ts","../../src/treetable/editable-column.ts","../../src/treetable/cell-editor.ts","../../src/treetable/treetable-row.ts","../../src/treetable/treetable-toggler.ts","../../src/treetable/treetable.module.ts","../../src/treetable/primeng-treetable.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BaseStyle } from 'primeng/base';\n\nconst style = /*css*/ `\n/* For PrimeNG */\n.p-treetable {\n    position: relative;\n}\n\n.p-treetable table {\n    border-collapse: collapse;\n    width: 100%;\n    table-layout: fixed;\n}\n\n.p-treetable .p-sortable-column {\n    cursor: pointer;\n    user-select: none;\n}\n\n.p-treetable .p-sortable-column .p-column-title,\n.p-treetable .p-sortable-column .p-sortable-column-icon,\n.p-treetable .p-sortable-column .p-sortable-column-badge {\n    vertical-align: middle;\n}\n\n.p-treetable-sort-icon {\n    color: dt('treetable.sort.icon.color');\n    font-size: dt('treetable.sort.icon.size');\n    width: dt('treetable.sort.icon.size');\n    height: dt('treetable.sort.icon.size');\n    transition: color dt('treetable.transition.duration');\n}\n\n.p-treetable .p-sortable-column .p-sortable-column-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-treetable-auto-layout>.p-treetable-wrapper {\n    overflow-x: auto;\n}\n\n.p-treetable-auto-layout>.p-treetable-wrapper>table {\n    table-layout: auto;\n}\n\n.p-treetable-hoverable-rows .p-treetable-tbody>tr {\n    cursor: pointer;\n}\n\n.p-treetable-toggler {\n    cursor: pointer;\n    user-select: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    overflow: hidden;\n    position: relative;\n}\n\n\n/* Scrollable */\n.p-treetable-scrollable-wrapper {\n    position: relative;\n}\n\n.p-treetable-scrollable-header,\n.p-treetable-scrollable-footer {\n    overflow: hidden;\n    flex-shrink: 0;\n}\n\n.p-treetable-scrollable-body {\n    overflow: auto;\n    position: relative;\n}\n\n.p-treetable-virtual-table {\n    position: absolute;\n}\n\n/* Frozen Columns */\n.p-treetable-frozen-view .p-treetable-scrollable-body {\n    overflow: hidden;\n}\n\n.p-treetable-frozen-view>.p-treetable-scrollable-body>table>.p-treetable-tbody>tr>td:last-child {\n    border-right: 0 none;\n}\n\n.p-treetable-unfrozen-view {\n    position: absolute;\n    top: 0;\n}\n\n/* Flex Scrollable */\n.p-treetable-flex-scrollable {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    height: 100%;\n}\n\n.p-treetable-flex-scrollable .p-treetable-scrollable-wrapper,\n.p-treetable-flex-scrollable .p-treetable-scrollable-view {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    height: 100%;\n}\n\n.p-treetable-flex-scrollable .p-treetable-virtual-scrollable-body {\n    flex: 1;\n}\n\n/* Resizable */\n.p-treetable-resizable>.p-treetable-wrapper {\n    overflow-x: auto;\n}\n\n.p-treetable-resizable .p-treetable-thead>tr>th,\n.p-treetable-resizable .p-treetable-tfoot>tr>td,\n.p-treetable-resizable .p-treetable-tbody>tr>td {\n    overflow: hidden;\n}\n\n.p-treetable-resizable .p-resizable-column {\n    background-clip: padding-box;\n    position: relative;\n}\n\n.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n    display: none;\n}\n\n.p-treetable .p-column-resizer {\n    display: block;\n    position: absolute;\n    top: 0;\n    right: 0;\n    margin: 0;\n    width: dt('treetable.column.resizer.width');\n    height: 100%;\n    padding: 0px;\n    cursor: col-resize;\n    border: 1px solid transparent;\n}\n\n.p-treetable .p-column-resizer-helper {\n    width: dt('treetable.resize.indicator.width');\n    position: absolute;\n    z-index: 10;\n    display: none;\n    background: dt('treetable.resize.indicator.color');\n}\n\n.p-treetable .p-row-editor-init,\n.p-treetable .p-row-editor-save,\n.p-treetable .p-row-editor-cancel {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n\n/* Reorder */\n.p-treetable-reorder-indicator-up,\n.p-treetable-reorder-indicator-down {\n    position: absolute;\n    display: none;\n}\n\n[ttReorderableColumn] {\n    cursor: move;\n}\n\n/* Loader */\n.p-treetable-mask {\n    position: absolute !important;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n}\n\n.p-treetable-loading-icon {\n    font-size: dt('treetable.loading.icon.size');\n    width: dt('treetable.loading.icon.size');\n    height: dt('treetable.loading.icon.size');\n}\n\n/* Virtual Scroll */\n.p-treetable .p-scroller-loading {\n    transform: none !important;\n    min-height: 0;\n    position: sticky;\n    top: 0;\n    left: 0;\n}\n\n.p-treetable .p-paginator-top {\n    border-color: dt('treetable.paginator.top.border.color');\n    border-style: solid;\n    border-width: dt('treetable.paginator.top.border.width');\n}\n\n.p-treetable .p-paginator-bottom {\n    border-color: dt('treetable.paginator.bottom.border.color');\n    border-style: solid;\n    border-width: dt('treetable.paginator.bottom.border.width');\n}\n\n.p-treetable .p-treetable-header {\n    background: dt('treetable.header.background');\n    color: dt('treetable.header.color');\n    border-color: dt('treetable.header.border.color');\n    border-style: solid;\n    border-width: dt('treetable.header.border.width');\n    padding: dt('treetable.header.padding');\n    font-weight: dt('treetable.column.title.font.weight');\n}\n\n.p-treetable .p-treetable-footer {\n    background: dt('treetable.footer.background');\n    color: dt('treetable.footer.color');\n    border-color: dt('treetable.footer.border.color');\n    border-style: solid;\n    border-width: dt('treetable.footer.border.width');\n    padding: dt('treetable.footer.padding');\n    font-weight: dt('treetable.column.footer.font.weight');\n}\n\n.p-treetable .p-treetable-thead>tr>th {\n    padding: dt('treetable.header.cell.padding');\n    background: dt('treetable.header.cell.background');\n    border-color: dt('treetable.header.cell.border.color');\n    border-style: solid;\n    border-width: 0 0 1px 0;\n    color: dt('treetable.header.cell.color');\n    font-weight: dt('treetable.column.title.font.weight');\n    text-align: start;\n    transition: background dt('treetable.transition.duration'), color dt('treetable.transition.duration'), border-color dt('treetable.transition.duration'),\n            outline-color dt('treetable.transition.duration'), box-shadow dt('treetable.transition.duration');\n}\n\n.p-treetable .p-treetable-tfoot>tr>td {\n    text-align: start;\n    padding: dt('treetable.footer.cell.padding');\n    border-color: dt('treetable.footer.cell.border.color');\n    border-style: solid;\n    border-width: 0 0 1px 0;\n    color: dt('treetable.footer.cell.color');\n    background: dt('treetable.footer.cell.background');\n    font-weight: dt('treetable.column.footer.font.weight');\n}\n\n.p-treetable .p-sortable-column {\n    cursor: pointer;\n    user-select: none;\n    outline-color: transparent;\n    vertical-align: middle;\n}\n\n.p-treetable .p-sortable-column .p-sortable-column-icon {\n    color: dt('treetable.sort.icon.color');\n    transition: color dt('treetable.transition.duration');\n}\n\n\n.p-treetable .p-sortable-column:not(.p-treetable-column-sorted):hover {\n    background: dt('treetable.header.cell.hover.background');\n    color: dt('treetable.header.cell.hover.color');\n}\n\n.p-treetable .p-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {\n    color: dt('treetable.sort.icon.hover.color');\n}\n\n.p-treetable .p-sortable-column.p-treetable-column-sorted {\n    background: dt('treetable.header.cell.selected.background');\n    color: dt('treetable.header.cell.selected.color');\n}\n\n.p-treetable .p-sortable-column.p-treetable-column-sorted .p-treetable-sort-icon {\n    color: dt('treetable.header.cell.selected.color');\n}\n\n.p-treetable .p-sortable-column:focus-visible {\n    box-shadow: dt('treetable.header.cell.focus.ring.shadow');\n    outline: dt('treetable.header.cell.focus.ring.width') dt('treetable.header.cell.focus.ring.style') dt('treetable.header.cell.focus.ring.color');\n    outline-offset: dt('treetable.header.cell.focus.ring.offset');\n}\n\n.p-treetable-hoverable .p-treetable-selectable-row {\n    cursor: pointer;\n}\n\n.p-treetable .p-treetable-tbody > tr {\n    outline-color: transparent;\n    background: dt('treetable.row.background');\n    color: dt('treetable.row.color');\n}\n\n.p-treetable .p-treetable-tbody>tr>td {\n    text-align: start;\n    border-color: dt('treetable.body.cell.border.color');\n    border-style: solid;\n    border-width: 0 0 1px 0;\n    padding: dt('treetable.body.cell.padding');\n    font-weight: dt('treetable.body.cell.font.weight');\n    font-size: dt('treetable.body.cell.font.size');\n}\n\n.p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n    width: dt('treetable.node.toggle.button.size');\n    height: dt('treetable.node.toggle.button.size');\n    color: dt('treetable.node.toggle.button.color');\n    border: 0 none;\n    background: transparent;\n    cursor: pointer;\n    border-radius: dt('treetable.node.toggle.button.border.radius');\n    transition: background dt('treetable.transition.duration'), color dt('treetable.transition.duration'), border-color dt('treetable.transition.duration'),\n            outline-color dt('treetable.transition.duration'), box-shadow dt('treetable.transition.duration');\n    outline-color: transparent;\n    user-select: none;\n}\n\n.p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:enabled:hover {\n    color: dt('treetable.node.toggle.button.hover.color');\n    background: dt('treetable.node.toggle.button.hover.background');\n}\n\n.p-treetable .p-treetable-tbody>tr>tr.treetable-row-selected .p-treetable-toggler:hover {\n    background: dt('treetable.node.toggle.button.selected.hover.background');\n    color: dt('treetable.node.toggle.button.selected.hover.color');\n}\n\n.p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler:focus-visible {\n    box-shadow: dt('treetable.node.toggle.button.focus.ring.shadow');\n    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');\n    outline-offset: dt('treetable.node.toggle.button.focus.ring.offset');\n}\n\n\n.p-treetable .p-treetable-tbody>tr.p-treetable-row-selected {\n    background: dt('treetable.row.selected.background');\n    color: dt('treetable.row.selected.color');\n}\n\n.p-treetable-tbody > tr:focus-visible,\n.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {\n    box-shadow: dt('treetable.row.focus.ring.shadow');\n    outline: dt('treetable.row.focus.ring.width') dt('treetable.row.focus.ring.style') dt('treetable.row.focus.ring.color');\n    outline-offset: dt('treetable.row.focus.ring.offset');\n}\n\n.p-treetable .p-treetable-tbody>tr.p-treetable-row-selected .p-treetable-toggler {\n    color: inherit;\n}\n\n.p-treetable .p-treetable-tbody>tr.p-treetable-row-selected .p-treetable-toggler:hover {\n    background: dt('treetable.node.toggle.button.selected.hover.background');\n    color: dt('treetable.node.toggle.button.selected.hover.color');\n}\n\n.p-treetable.p-treetable-hoverable-rows .p-treetable-tbody>tr:not(.p-treetable-row-selected):hover {\n    background: dt('treetable.row.hover.background');\n    color: dt('treetable.row.hover.color');\n}\n\n.p-treetable-gridlines .p-treetable-header {\n    border-width: 1px 1px 0 1px;\n}\n\n.p-treetable-gridlines .p-treetable-footer {\n    border-width: 0 1px 1px 1px;\n}\n\n.p-treetable-gridlines .p-treetable-paginator-top {\n    border-width: 1px 1px 0 1px;\n}\n\n.p-treetable-gridlines .p-treetable-paginator-bottom {\n    border-width: 0 1px 1px 1px;\n}\n\n.p-treetable-gridlines .p-treetable-thead > tr > th {\n    border-width: 1px 0 1px 1px;\n}\n\n.p-treetable-gridlines .p-treetable-thead > tr > th:last-child {\n    border-width: 1px;\n}\n\n.p-treetable-gridlines .p-treetable-tbody > tr > td {\n    border-width: 1px 0 0 1px;\n}\n\n.p-treetable-gridlines .p-treetable-tbody > tr > td:last-child {\n    border-width: 1px 1px 0 1px;\n}\n\n.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {\n    border-width: 1px 0 1px 1px;\n}\n\n.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td:last-child {\n    border-width: 1px;\n}\n\n.p-treetable-gridlines .p-treetable-tfoot > tr > td {\n    border-width: 1px 0 1px 1px;\n}\n\n.p-treetable-gridlines .p-treetable-tfoot > tr > td:last-child {\n    border-width: 1px 1px 1px 1px;\n}\n\n.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {\n    border-width: 0 0 1px 1px;\n}\n\n.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td:last-child {\n    border-width: 0 1px 1px 1px;\n}\n\n.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {\n    border-width: 0 0 1px 1px;\n}\n\n.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td:last-child {\n    border-width: 0 1px 1px 1px;\n}\n\n.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot > tr) .p-treetable-tbody > tr:last-child > td {\n    border-width: 0 0 0 1px;\n}\n\n.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot > tr) .p-treetable-tbody > tr:last-child > td:last-child {\n    border-width: 0 1px 0 1px;\n}\n\n.p-treetable.p-treetable-sm .p-treetable-header {\n    padding: 0.65625rem 0.875rem;\n}\n\n.p-treetable.p-treetable-sm .p-treetable-thead>tr>th {\n    padding: 0.375rem 0.5rem;\n}\n\n.p-treetable.p-treetable-sm .p-treetable-tbody>tr>td {\n    padding: 0.375rem 0.5rem;\n}\n\n.p-treetable.p-treetable-sm .p-treetable-tfoot>tr>td {\n    padding: 0.375rem 0.5rem;\n}\n\n.p-treetable.p-treetable-sm .p-treetable-footer {\n    padding: 0.375rem 0.5rem;\n}\n\n.p-treetable.p-treetable-lg .p-treetable-header {\n    padding: 0.9375rem 1.25rem;\n}\n\n.p-treetable.p-treetable-lg .p-treetable-thead>tr>th {\n    padding: 0.9375rem 1.25rem;\n}\n\n.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td {\n    padding: 0.9375rem 1.25rem;\n}\n\n.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td {\n    padding: 0.9375rem 1.25rem;\n}\n\n.p-treetable.p-treetable-lg .p-treetable-footer {\n    padding: 0.9375rem 1.25rem;\n}\n\np-treetable-checkbox {\n    display: inline-flex;\n}\n\np-treetabletoggler + p-treetable-checkbox .p-checkbox,\np-treetable-toggler + p-treetable-checkbox .p-checkbox,\np-treetable-toggler + p-tree-table-checkbox .p-checkbox,\np-treetabletoggler + p-tree-table-checkbox .p-checkbox {\n    vertical-align: middle;\n}\n\np-treetabletoggler + p-treetable-checkbox + span,\np-treetable-toggler + p-treetable-checkbox + span,\np-treetable-toggler + p-tree-table-checkbox + span,\np-treetabletoggler + p-tree-table-checkbox + span {\n    vertical-align: middle;\n}\n\np-treetable-sort-icon {\n    display: inline-flex;\n    align-items: center;\n    gap: dt('treetable.header.cell.gap');\n}\n`;\n\nconst classes = {\n    root: ({ instance }) => {\n        const showGridlines = instance.showGridlines();\n        const rowHover = instance.rowHover();\n        const selectionMode = instance.selectionMode();\n        const autoLayout = instance.autoLayout();\n        const resizableColumns = instance.resizableColumns();\n        const columnResizeMode = instance.columnResizeMode();\n        const scrollable = instance.scrollable();\n        const scrollHeight = instance.scrollHeight();\n        return [\n            'p-treetable p-component',\n            {\n                'p-treetable-gridlines': showGridlines,\n                'p-treetable-hoverable-rows': rowHover || selectionMode === 'single' || selectionMode === 'multiple',\n                'p-treetable-auto-layout': autoLayout,\n                'p-treetable-resizable': resizableColumns,\n                'p-treetable-resizable-fit': resizableColumns && columnResizeMode === 'fit',\n                'p-treetable-flex-scrollable': scrollable && scrollHeight === 'flex'\n            }\n        ];\n    },\n    loading: 'p-treetable-loading',\n    mask: 'p-treetable-mask p-overlay-mask',\n    loadingIcon: 'p-treetable-loading-icon',\n    header: 'p-treetable-header',\n    pcPaginator: ({ instance }) => ['p-treetable-paginator-' + instance.paginatorPosition(), instance.paginatorStyleClass()],\n    tableContainer: 'p-treetable-table-container',\n    table: ({ instance }) => {\n        const scrollable = instance.scrollable();\n        const resizableColumns = instance.resizableColumns();\n        const columnResizeMode = instance.columnResizeMode();\n        return {\n            'p-treetable-table': true,\n            'p-treetable-scrollable-table': scrollable,\n            'p-treetable-resizable-table': resizableColumns,\n            'p-treetable-resizable-table-fit': resizableColumns && columnResizeMode === 'fit'\n        };\n    },\n    thead: 'p-treetable-thead',\n    sortableColumn: ({ instance }) => ({\n        'p-sortable-column': instance.isEnabled(),\n        'p-treetable-column-sorted': instance.sorted()\n    }),\n    sortableColumnIcon: 'p-treetable-sort-icon',\n    sortableColumnBadge: 'p-sortable-column-badge',\n    columnResizer: 'p-treetable-column-resizer',\n    columnHeaderContent: 'p-treetable-column-header-content',\n    columnTitle: 'p-treetable-column-title',\n    sortIcon: 'p-treetable-sort-icon',\n    pcSortBadge: 'p-treetable-sort-badge',\n    tbody: 'p-treetable-tbody',\n    row: ({ instance }) => ({\n        'p-treetable-row-selected': instance.selected()\n    }),\n    contextMenuRow: ({ instance }) => ({\n        'p-treetable-contextmenu-row-selected': instance.selected()\n    }),\n    toggler: 'p-treetable-toggler',\n    nodeToggleButton: 'p-treetable-node-toggle-button',\n    nodeToggleIcon: 'p-treetable-node-toggle-icon',\n    pcNodeCheckbox: 'p-treetable-node-checkbox',\n    tfoot: 'p-treetable-tfoot',\n    footerCell: ({ instance }) => ({\n        'p-treetable-frozen-column': instance.columnProp('frozen')\n    }),\n    footer: 'p-treetable-footer',\n    columnResizeIndicator: 'p-treetable-column-resize-indicator',\n    wrapper: 'p-treetable-wrapper',\n    scrollableWrapper: 'p-treetable-scrollable-wrapper',\n    scrollableView: 'p-treetable-scrollable-view',\n    frozenView: 'p-treetable-frozen-view',\n    columnResizerHelper: 'p-column-resizer-helper',\n    reorderIndicatorUp: 'p-treetable-reorder-indicator-up',\n    reorderIndicatorDown: 'p-treetable-reorder-indicator-down',\n    scrollableHeader: 'p-treetable-scrollable-header',\n    scrollableHeaderBox: 'p-treetable-scrollable-header-box',\n    scrollableHeaderTable: 'p-treetable-scrollable-header-table',\n    scrollableBody: 'p-treetable-scrollable-body',\n    scrollableFooter: 'p-treetable-scrollable-footer',\n    scrollableFooterBox: 'p-treetable-scrollable-footer-box',\n    scrollableFooterTable: 'p-treetable-scrollable-footer-table'\n};\n\nconst inlineStyles = {\n    wrapper: { overflow: 'auto' }\n};\n\n@Injectable()\nexport class TreeTableStyle extends BaseStyle {\n    name = 'treetable';\n\n    style = style;\n\n    classes = classes;\n\n    inlineStyles = inlineStyles;\n}\n\n/**\n *\n * TreeTable is used to display hierarchical data in tabular format.\n *\n * [Live Demo](https://www.primeng.org/treetable/)\n *\n * @module treetablestyle\n *\n */\nexport enum TreeTableClasses {\n    /**\n     * Class name of the root element\n     */\n    root = 'p-treetable',\n    /**\n     * Class name of the loading element\n     */\n    loading = 'p-treetable-loading',\n    /**\n     * Class name of the mask element\n     */\n    mask = 'p-treetable-mask',\n    /**\n     * Class name of the loading icon element\n     */\n    loadingIcon = 'p-treetable-loading-icon',\n    /**\n     * Class name of the header element\n     */\n    header = 'p-treetable-header',\n    /**\n     * Class name of the paginator element\n     */\n    pcPaginator = 'p-treetable-paginator-[position]',\n    /**\n     * Class name of the table container element\n     */\n    tableContainer = 'p-treetable-table-container',\n    /**\n     * Class name of the table element\n     */\n    table = 'p-treetable-table',\n    /**\n     * Class name of the thead element\n     */\n    thead = 'p-treetable-thead',\n    /**\n     * Class name of the column resizer element\n     */\n    columnResizer = 'p-treetable-column-resizer',\n    /**\n     * Class name of the column title element\n     */\n    columnTitle = 'p-treetable-column-title',\n    /**\n     * Class name of the sort icon element\n     */\n    sortIcon = 'p-treetable-sort-icon',\n    /**\n     * Class name of the sort badge element\n     */\n    pcSortBadge = 'p-treetable-sort-badge',\n    /**\n     * Class name of the tbody element\n     */\n    tbody = 'p-treetable-tbody',\n    /**\n     * Class name of the node toggle button element\n     */\n    nodeToggleButton = 'p-treetable-node-toggle-button',\n    /**\n     * Class name of the node toggle icon element\n     */\n    nodeToggleIcon = 'p-treetable-node-toggle-icon',\n    /**\n     * Class name of the node checkbox element\n     */\n    pcNodeCheckbox = 'p-treetable-node-checkbox',\n    /**\n     * Class name of the empty message element\n     */\n    emptyMessage = 'p-treetable-empty-message',\n    /**\n     * Class name of the tfoot element\n     */\n    tfoot = 'p-treetable-tfoot',\n    /**\n     * Class name of the footer element\n     */\n    footer = 'p-treetable-footer',\n    /**\n     * Class name of the column resize indicator element\n     */\n    columnResizeIndicator = 'p-treetable-column-resize-indicator',\n    /**\n     * Class name of the wrapper element\n     */\n    wrapper = 'p-treetable-wrapper',\n    /**\n     * Class name of the scrollable wrapper element\n     */\n    scrollableWrapper = 'p-treetable-scrollable-wrapper',\n    /**\n     * Class name of the scrollable view element\n     */\n    scrollableView = 'p-treetable-scrollable-view',\n    /**\n     * Class name of the frozen view element\n     */\n    frozenView = 'p-treetable-frozen-view',\n    /**\n     * Class name of the column resizer helper element\n     */\n    columnResizerHelper = 'p-treetable-column-resizer-helper',\n    /**\n     * Class name of the reorder indicator up element\n     */\n    reorderIndicatorUp = 'p-treetable-reorder-indicator-up',\n    /**\n     * Class name of the reorder indicator down element\n     */\n    reorderIndicatorDown = 'p-treetable-reorder-indicator-down',\n    /**\n     * Class name of the scrollable header element\n     */\n    scrollableHeader = 'p-treetable-scrollable-header',\n    /**\n     * Class name of the scrollable header box element\n     */\n    scrollableHeaderBox = 'p-treetable-scrollable-header-box',\n    /**\n     * Class name of the scrollable header table element\n     */\n    scrollableHeaderTable = 'p-treetable-scrollable-header-table',\n    /**\n     * Class name of the scrollable body element\n     */\n    scrollableBody = 'p-treetable-scrollable-body',\n    /**\n     * Class name of the scrollable footer element\n     */\n    scrollableFooter = 'p-treetable-scrollable-footer',\n    /**\n     * Class name of the scrollable footer box element\n     */\n    scrollableFooterBox = 'p-treetable-scrollable-footer-box',\n    /**\n     * Class name of the scrollable footer table element\n     */\n    scrollableFooterTable = 'p-treetable-scrollable-footer-table',\n    /**\n     * Class name of the sortable column icon element\n     */\n    sortableColumnIcon = 'p-sortable-column-icon'\n}\n\nexport interface TreeTableStyle extends BaseStyle {}\n","import { Injectable, InjectionToken } from '@angular/core';\nimport { SortMeta } from 'primeng/api';\nimport { Subject } from 'rxjs';\n\nexport const TREETABLE_INSTANCE = new InjectionToken<any>('TREETABLE_INSTANCE');\n\n@Injectable()\nexport class TreeTableService {\n    private sortSource = new Subject<SortMeta | SortMeta[] | null>();\n    private selectionSource = new Subject();\n    private contextMenuSource = new Subject<any>();\n    private uiUpdateSource = new Subject<any>();\n    private totalRecordsSource = new Subject<any>();\n\n    sortSource$ = this.sortSource.asObservable();\n    selectionSource$ = this.selectionSource.asObservable();\n    contextMenuSource$ = this.contextMenuSource.asObservable();\n    uiUpdateSource$ = this.uiUpdateSource.asObservable();\n    totalRecordsSource$ = this.totalRecordsSource.asObservable();\n\n    onSort(sortMeta: SortMeta | SortMeta[] | null) {\n        this.sortSource.next(sortMeta);\n    }\n\n    onSelectionChange() {\n        this.selectionSource.next(null);\n    }\n\n    onContextMenu(node: any) {\n        this.contextMenuSource.next(node);\n    }\n\n    onUIUpdate(value: any) {\n        this.uiUpdateSource.next(value);\n    }\n\n    onTotalRecordsChange(value: number) {\n        this.totalRecordsSource.next(value);\n    }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, Component, computed, inject, input, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { Nullable } from 'primeng/ts-helpers';\nimport { TREETABLE_INSTANCE } from './treetable-service';\nimport type { TreeTable } from './treetable';\n\n@Component({\n    selector: '[pTreeTableBody]',\n    standalone: true,\n    imports: [NgTemplateOutlet],\n    template: `\n        @for (serializedNode of serializedNodes() || tt.serializedValue; track tt.rowTrackBy()($index, serializedNode)) {\n            @if (serializedNode.visible) {\n                <ng-container *ngTemplateOutlet=\"template(); context: getBodyTemplateContext(serializedNode)\"></ng-container>\n            }\n        }\n        @if (tt.isEmpty()) {\n            <ng-container *ngTemplateOutlet=\"tt.emptyMessageTemplate(); context: emptyMessageContext()\"></ng-container>\n        }\n    `,\n    encapsulation: ViewEncapsulation.None,\n    host: {\n        '[attr.data-p]': 'dataP'\n    }\n})\nexport class TTBody extends BaseComponent {\n    columns = input<any[]>(undefined, { alias: 'pTreeTableBody' });\n\n    template = input<Nullable<TemplateRef<any>>>(undefined, { alias: 'pTreeTableBodyTemplate' });\n\n    frozen = input(undefined, { transform: booleanAttribute });\n\n    serializedNodes = input<any>();\n\n    scrollerOptions = input<any>();\n\n    tt = inject<TreeTable>(TREETABLE_INSTANCE);\n\n    emptyMessageContext = computed(() => ({ $implicit: this.columns(), frozen: this.frozen() }));\n\n    constructor() {\n        super();\n        this.tt.tableService.uiUpdateSource$.pipe(takeUntilDestroyed()).subscribe(() => {\n            if (this.tt.virtualScroll()) {\n                this.cd.detectChanges();\n            }\n        });\n    }\n\n    getBodyTemplateContext(serializedNode: any) {\n        return {\n            $implicit: serializedNode,\n            node: serializedNode.node,\n            rowData: serializedNode.node.data,\n            columns: this.columns()\n        };\n    }\n\n    getScrollerOption(option: any, options?: any) {\n        if (this.tt.virtualScroll()) {\n            options = options || this.scrollerOptions();\n            return options ? options[option] : null;\n        }\n\n        return null;\n    }\n\n    getRowIndex(rowIndex: number) {\n        const getItemOptions = this.getScrollerOption('getItemOptions');\n        return getItemOptions ? getItemOptions(rowIndex).index : rowIndex;\n    }\n\n    get dataP() {\n        return this.cn({\n            hoverable: this.tt.rowHover() || this.tt.selectionMode(),\n            frozen: this.frozen()\n        });\n    }\n}\n","import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, Component, computed, effect, ElementRef, inject, input, viewChild, ViewEncapsulation } from '@angular/core';\nimport { addClass, calculateScrollbarHeight, calculateScrollbarWidth, findSingle } from '@primeuix/utils';\nimport { BaseComponent } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { Scroller } from 'primeng/scroller';\nimport { Nullable, VoidListener } from 'primeng/ts-helpers';\nimport { TreeTableStyle } from './style/treetablestyle';\nimport { TTBody } from './treetable-body';\nimport { TREETABLE_INSTANCE } from './treetable-service';\nimport type { TreeTable } from './treetable';\n\n@Component({\n    selector: '[ttScrollableView]',\n    standalone: true,\n    imports: [NgTemplateOutlet, Bind, Scroller, TTBody],\n    template: `\n        <div #scrollHeader [class]=\"cx('scrollableHeader')\" [pBind]=\"ptm('scrollableHeader')\">\n            <div #scrollHeaderBox [class]=\"cx('scrollableHeaderBox')\" [pBind]=\"ptm('scrollableHeaderBox')\">\n                <table [class]=\"cn(cx('scrollableHeaderTable'), tt.tableStyleClass())\" [pBind]=\"ptm('scrollableHeaderTable')\" [style]=\"tt.tableStyle()\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTemplate(); context: { $implicit: columns() }\"></ng-container>\n                    <thead role=\"rowgroup\" [class]=\"cx('thead')\" [pBind]=\"ptm('thead')\">\n                        <ng-container *ngTemplateOutlet=\"$headerTemplate(); context: { $implicit: columns() }\"></ng-container>\n                    </thead>\n                </table>\n            </div>\n        </div>\n\n        @if (tt.virtualScroll()) {\n            <p-scroller\n                #scroller\n                [items]=\"tt.serializedValue\"\n                [styleClass]=\"cx('scrollableBody')\"\n                [style]=\"scrollerStyle()\"\n                [scrollHeight]=\"$scrollerScrollHeight()\"\n                [itemSize]=\"tt.virtualScrollItemSize()\"\n                [lazy]=\"tt.lazy()\"\n                (onLazyLoad)=\"tt.onLazyItemLoad($event)\"\n                [options]=\"tt.virtualScrollOptions()\"\n                [pt]=\"ptm('virtualScroller')\"\n            >\n                <ng-template #content let-items let-scrollerOptions=\"options\">\n                    <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: items, options: scrollerOptions }\"></ng-container>\n                </ng-template>\n                @if (tt.loaderTemplate()) {\n                    <ng-template #loader let-scrollerOptions=\"options\">\n                        <ng-container *ngTemplateOutlet=\"tt.loaderTemplate(); context: { options: scrollerOptions }\"></ng-container>\n                    </ng-template>\n                }\n            </p-scroller>\n        }\n        @if (!tt.virtualScroll()) {\n            <div #scrollBody [class]=\"cx('scrollableBody')\" [pBind]=\"ptm('scrollableBody')\" [style]=\"scrollBodyStyle()\">\n                <ng-container *ngTemplateOutlet=\"buildInItems; context: { $implicit: serializedValue, options: {} }\"></ng-container>\n            </div>\n        }\n\n        <ng-template #buildInItems let-items let-scrollerOptions=\"options\">\n            <table role=\"treegrid\" #scrollTable [pBind]=\"ptm('table')\" [class]=\"cn(tt.tableStyleClass(), scrollerOptions.contentStyleClass)\" [style]=\"getScrollableTableStyle(scrollerOptions.contentStyle)\">\n                <ng-container *ngTemplateOutlet=\"colGroupTemplate(); context: { $implicit: columns() }\"></ng-container>\n                <tbody [pBind]=\"ptm('tbody')\" role=\"rowgroup\" [class]=\"cx('tbody')\" [pTreeTableBody]=\"columns()\" [unstyled]=\"unstyled()\" [pTreeTableBodyTemplate]=\"$bodyTemplate()\" [serializedNodes]=\"items\" [frozen]=\"frozen()\"></tbody>\n            </table>\n            @if (frozen()) {\n                <div #scrollableAligner [style.background-color]=\"'transparent'\"></div>\n            }\n        </ng-template>\n\n        @if (tt.footerTemplate()) {\n            <div #scrollFooter [class]=\"cx('scrollableFooter')\" [pBind]=\"ptm('scrollableFooter')\">\n                <div #scrollFooterBox [class]=\"cx('scrollableFooterBox')\" [pBind]=\"ptm('scrollableFooterBox')\">\n                    <table [class]=\"cn(cx('scrollableFooterTable'), tt.tableStyleClass())\" [style]=\"tt.tableStyle()\" [pBind]=\"ptm('scrollableFooterTable')\">\n                        <ng-container *ngTemplateOutlet=\"colGroupTemplate(); context: { $implicit: columns() }\"></ng-container>\n                        <tfoot role=\"rowgroup\" [class]=\"cx('tfoot')\" [pBind]=\"ptm('tfoot')\">\n                            <ng-container *ngTemplateOutlet=\"$footerTemplate(); context: { $implicit: columns() }\"></ng-container>\n                        </tfoot>\n                    </table>\n                </div>\n            </div>\n        }\n    `,\n    encapsulation: ViewEncapsulation.None,\n    providers: [TreeTableStyle]\n})\nexport class TTScrollableView extends BaseComponent {\n    hostName = 'TreeTable';\n\n    columns = input<any[]>(undefined, { alias: 'ttScrollableView' });\n\n    frozen = input(undefined, { transform: booleanAttribute });\n\n    scrollHeight = input<string | null>();\n\n    scrollHeaderViewChild = viewChild<ElementRef>('scrollHeader');\n\n    scrollHeaderBoxViewChild = viewChild<ElementRef>('scrollHeaderBox');\n\n    scrollBodyViewChild = viewChild<ElementRef>('scrollBody');\n\n    scrollTableViewChild = viewChild<ElementRef>('scrollTable');\n\n    scrollLoadingTableViewChild = viewChild<ElementRef>('loadingTable');\n\n    scrollFooterViewChild = viewChild<ElementRef>('scrollFooter');\n\n    scrollFooterBoxViewChild = viewChild<ElementRef>('scrollFooterBox');\n\n    scrollableAlignerViewChild = viewChild<ElementRef>('scrollableAligner');\n\n    scroller = viewChild<Scroller>('scroller');\n\n    headerScrollListener: VoidListener;\n\n    bodyScrollListener: VoidListener;\n\n    footerScrollListener: VoidListener;\n\n    frozenSiblingBody: Nullable<Element>;\n\n    preventBodyScrollPropagation: boolean | undefined;\n\n    _componentStyle = inject(TreeTableStyle);\n\n    tt = inject<TreeTable>(TREETABLE_INSTANCE);\n\n    colGroupTemplate = computed(() => (this.frozen() ? this.tt.frozenColGroupTemplate() || this.tt.colGroupTemplate() : this.tt.colGroupTemplate()));\n\n    $headerTemplate = computed(() => (this.frozen() ? this.tt.frozenHeaderTemplate() || this.tt.headerTemplate() : this.tt.headerTemplate()));\n\n    $footerTemplate = computed(() => (this.frozen() ? this.tt.frozenFooterTemplate() || this.tt.footerTemplate() : this.tt.footerTemplate()));\n\n    $bodyTemplate = computed(() => (this.frozen() ? this.tt.frozenBodyTemplate() || this.tt.bodyTemplate() : this.tt.bodyTemplate()));\n\n    scrollerStyle = computed(() => ({ height: this.tt.scrollHeight() !== 'flex' ? this.tt.scrollHeight() : undefined }));\n\n    $scrollerScrollHeight = computed(() => (this.scrollHeight() !== 'flex' ? undefined : '100%'));\n\n    scrollBodyStyle = computed(() => ({\n        'max-height': this.tt.scrollHeight() !== 'flex' ? this.scrollHeight() : undefined,\n        'overflow-y': !this.frozen() && this.tt.scrollHeight() ? 'scroll' : undefined\n    }));\n\n    constructor() {\n        super();\n        effect(() => {\n            const val = this.scrollHeight();\n            if (val != null && (val.includes('%') || val.includes('calc'))) {\n                console.log('Percentage scroll height calculation is removed in favor of the more performant CSS based flex mode, use scrollHeight=\"flex\" instead.');\n            }\n        });\n    }\n\n    get serializedValue() {\n        return this.tt.serializedValue;\n    }\n\n    onAfterViewInit() {\n        if (isPlatformBrowser(this.platformId)) {\n            if (!this.frozen()) {\n                if (this.tt.frozenColumns() || this.tt.frozenBodyTemplate()) {\n                    addClass(this.el.nativeElement, 'p-treetable-unfrozen-view');\n                }\n\n                let frozenView = this.el.nativeElement.previousElementSibling;\n                if (frozenView) {\n                    if (this.tt.virtualScroll()) this.frozenSiblingBody = findSingle(frozenView, '[data-pc-name=\"virtualscroller\"]');\n                    else this.frozenSiblingBody = findSingle(frozenView, '[data-pc-section=\"scrollablebody\"]');\n                }\n\n                if (this.scrollHeight()) {\n                    let scrollBarWidth = calculateScrollbarWidth();\n                    if (this.scrollHeaderBoxViewChild()?.nativeElement) {\n                        this.scrollHeaderBoxViewChild()!.nativeElement.style.paddingRight = scrollBarWidth + 'px';\n                    }\n\n                    if (this.scrollFooterBoxViewChild()?.nativeElement) {\n                        this.scrollFooterBoxViewChild()!.nativeElement.style.paddingRight = scrollBarWidth + 'px';\n                    }\n                }\n            } else {\n                if (this.scrollableAlignerViewChild()?.nativeElement) {\n                    this.scrollableAlignerViewChild()!.nativeElement.style.height = calculateScrollbarHeight() + 'px';\n                }\n            }\n\n            this.bindEvents();\n        }\n    }\n\n    bindEvents() {\n        if (isPlatformBrowser(this.platformId)) {\n            if (this.scrollHeaderViewChild()?.nativeElement) {\n                this.headerScrollListener = this.renderer.listen(this.scrollHeaderBoxViewChild()?.nativeElement, 'scroll', this.onHeaderScroll.bind(this));\n            }\n\n            if (this.scrollFooterViewChild()?.nativeElement) {\n                this.footerScrollListener = this.renderer.listen(this.scrollFooterViewChild()!.nativeElement, 'scroll', this.onFooterScroll.bind(this));\n            }\n\n            if (!this.frozen()) {\n                if (this.tt.virtualScroll()) {\n                    this.bodyScrollListener = this.renderer.listen((this.scroller()?.getElementRef() as ElementRef).nativeElement, 'scroll', this.onBodyScroll.bind(this));\n                } else {\n                    this.bodyScrollListener = this.renderer.listen(this.scrollBodyViewChild()?.nativeElement, 'scroll', this.onBodyScroll.bind(this));\n                }\n            }\n        }\n    }\n\n    unbindEvents() {\n        if (isPlatformBrowser(this.platformId)) {\n            if (this.scrollHeaderViewChild()?.nativeElement) {\n                if (this.headerScrollListener) {\n                    this.headerScrollListener();\n                    this.headerScrollListener = null;\n                }\n            }\n\n            if (this.scrollFooterViewChild()?.nativeElement) {\n                if (this.footerScrollListener) {\n                    this.footerScrollListener();\n                    this.footerScrollListener = null;\n                }\n            }\n\n            if (this.scrollBodyViewChild()?.nativeElement) {\n                if (this.bodyScrollListener) {\n                    this.bodyScrollListener();\n                    this.bodyScrollListener = null;\n                }\n            }\n\n            if (this.scroller()?.getElementRef()) {\n                if (this.bodyScrollListener) {\n                    this.bodyScrollListener();\n                    this.bodyScrollListener = null;\n                }\n            }\n        }\n    }\n\n    onHeaderScroll() {\n        const scrollLeft = this.scrollHeaderViewChild()?.nativeElement.scrollLeft;\n\n        this.scrollBodyViewChild()!.nativeElement.scrollLeft = scrollLeft;\n\n        if (this.scrollFooterViewChild()?.nativeElement) {\n            this.scrollFooterViewChild()!.nativeElement.scrollLeft = scrollLeft;\n        }\n\n        this.preventBodyScrollPropagation = true;\n    }\n\n    onFooterScroll() {\n        const scrollLeft = this.scrollFooterViewChild()?.nativeElement.scrollLeft;\n        this.scrollBodyViewChild()!.nativeElement.scrollLeft = scrollLeft;\n\n        if (this.scrollHeaderViewChild()?.nativeElement) {\n            this.scrollHeaderViewChild()!.nativeElement.scrollLeft = scrollLeft;\n        }\n\n        this.preventBodyScrollPropagation = true;\n    }\n\n    onBodyScroll(event: any) {\n        if (this.preventBodyScrollPropagation) {\n            this.preventBodyScrollPropagation = false;\n            return;\n        }\n\n        if (this.scrollHeaderViewChild()?.nativeElement) {\n            this.scrollHeaderBoxViewChild()!.nativeElement.style.marginLeft = -1 * event.target.scrollLeft + 'px';\n        }\n\n        if (this.scrollFooterViewChild()?.nativeElement) {\n            this.scrollFooterBoxViewChild()!.nativeElement.style.marginLeft = -1 * event.target.scrollLeft + 'px';\n        }\n\n        if (this.frozenSiblingBody) {\n            this.frozenSiblingBody.scrollTop = event.target.scrollTop;\n        }\n    }\n\n    scrollToVirtualIndex(index: number) {\n        this.scroller()?.scrollToIndex(index);\n    }\n\n    scrollTo(options: ScrollToOptions) {\n        if (this.scroller()) {\n            this.scroller()!.scrollTo(options);\n        } else {\n            if (this.scrollBodyViewChild()?.nativeElement.scrollTo) {\n                this.scrollBodyViewChild()!.nativeElement.scrollTo(options);\n            } else {\n                this.scrollBodyViewChild()!.nativeElement.scrollLeft = options.left;\n                this.scrollBodyViewChild()!.nativeElement.scrollTop = options.top;\n            }\n        }\n    }\n\n    getScrollableTableStyle(contentStyle: any) {\n        return { ...this.tt.tableStyle(), ...contentStyle };\n    }\n\n    onDestroy() {\n        this.unbindEvents();\n\n        this.frozenSiblingBody = null;\n    }\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, Component, computed, contentChild, effect, ElementRef, inject, input, model, numberAttribute, output, TemplateRef, untracked, viewChild, ViewEncapsulation, signal } from '@angular/core';\nimport { addStyle, calculateScrollbarWidth, equals, find, findSingle, getHiddenElementOuterHeight, getHiddenElementOuterWidth, getIndex, getOffset, isClickable, isEmpty, removeClass, reorderArray, resolveFieldData } from '@primeuix/utils';\nimport { BlockableUI, FilterMetadata, FilterService, ScrollerOptions, SortMeta, TreeNode, TreeTableNode } from 'primeng/api';\nimport { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';\nimport { Bind } from 'primeng/bind';\nimport { DomHandler } from 'primeng/dom';\nimport { ArrowDown as ArrowDownIcon } from '@primeicons/angular/arrow-down';\nimport { ArrowUp as ArrowUpIcon } from '@primeicons/angular/arrow-up';\nimport { Spinner as SpinnerIcon } from '@primeicons/angular/spinner';\nimport { PaginatorModule } from 'primeng/paginator';\nimport { Nullable, VoidListener } from 'primeng/ts-helpers';\nimport type { CSSProperties } from 'primeng/types/shared';\nimport {\n    TreeTableBodyTemplateContext,\n    TreeTableCheckboxIconTemplateContext,\n    TreeTableColResizeEvent,\n    TreeTableColumnReorderEvent,\n    TreeTableColumnsTemplateContext,\n    TreeTableContextMenuSelectEvent,\n    TreeTableEditEvent,\n    TreeTableEmptyMessageTemplateContext,\n    TreeTableFilterEvent,\n    TreeTableFilterOptions,\n    TreeTableHeaderCheckboxIconTemplateContext,\n    TreeTableHeaderCheckboxToggleEvent,\n    TreeTableLazyLoadEvent,\n    TreeTableNodeCollapseEvent,\n    TreeTableNodeExpandEvent,\n    TreeTableColumnResizeMode,\n    TreeTableCompareSelectionBy,\n    TreeTableFilterMode,\n    TreeTableNodeUnSelectEvent,\n    TreeTablePaginatorPosition,\n    TreeTablePaginatorState,\n    TreeTablePassThrough,\n    TreeTableSelectionMode,\n    TreeTableSortEvent,\n    TreeTableSortMode,\n    TreeTableSortIconTemplateContext,\n    TreeTableTogglerIconTemplateContext\n} from 'primeng/types/treetable';\nimport { TreeTableStyle } from './style/treetablestyle';\nimport { TTBody } from './treetable-body';\nimport { TTScrollableView } from './treetable-scrollable-view';\nimport { TREETABLE_INSTANCE, TreeTableService } from './treetable-service';\n\n/**\n * TreeTable is used to display hierarchical data in tabular format.\n * @group Components\n */\n@Component({\n    selector: 'p-treetable, p-tree-table',\n    standalone: true,\n    imports: [NgTemplateOutlet, Bind, PaginatorModule, SpinnerIcon, ArrowDownIcon, ArrowUpIcon, TTScrollableView, TTBody],\n    template: `\n        @if (showLoadingMask()) {\n            <div [pBind]=\"ptm('mask')\" [class]=\"cx('mask')\" animate.enter=\"p-overlay-mask-enter-active\" animate.leave=\"p-overlay-mask-leave-active\">\n                @if (loadingIcon()) {\n                    <i [class]=\"cn(cx('loadingIcon'), 'pi-spin' + loadingIcon())\"></i>\n                }\n                @if (!loadingIcon()) {\n                    @if (!loadingIconTemplate()) {\n                        <svg data-p-icon=\"spinner\" [class]=\"cx('loadingIcon')\" [spin]=\"true\" />\n                    }\n                    @if (loadingIconTemplate()) {\n                        <span [class]=\"cx('loadingIcon')\">\n                            <ng-template *ngTemplateOutlet=\"loadingIconTemplate()\"></ng-template>\n                        </span>\n                    }\n                }\n            </div>\n        }\n        @if (captionTemplate()) {\n            <div [pBind]=\"ptm('header')\" [class]=\"cx('header')\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate()\"></ng-container>\n            </div>\n        }\n        @if (showTopPaginator()) {\n            <p-paginator\n                [pt]=\"ptm('pcPaginator')\"\n                [rows]=\"rows()\"\n                [first]=\"first\"\n                [totalRecords]=\"totalRecords\"\n                [pageLinkSize]=\"pageLinks()\"\n                [class]=\"cx('pcPaginator')\"\n                [alwaysShow]=\"alwaysShowPaginator()\"\n                (onPageChange)=\"onPageChange($event)\"\n                [rowsPerPageOptions]=\"rowsPerPageOptions()\"\n                [templateLeft]=\"paginatorLeftTemplate()\"\n                [templateRight]=\"paginatorRightTemplate()\"\n                [appendTo]=\"paginatorDropdownAppendTo()\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate()\"\n                [showFirstLastIcon]=\"showFirstLastIcon()\"\n                [dropdownItemTemplate]=\"paginatorDropdownItemTemplate()\"\n                [showCurrentPageReport]=\"showCurrentPageReport()\"\n                [showJumpToPageDropdown]=\"showJumpToPageDropdown()\"\n                [showPageLinks]=\"showPageLinks()\"\n                [locale]=\"paginatorLocale()\"\n                [unstyled]=\"unstyled()\"\n            >\n                @if (paginatorFirstPageLinkIconTemplate()) {\n                    <ng-template #firstpagelinkicon>\n                        <ng-container *ngTemplateOutlet=\"paginatorFirstPageLinkIconTemplate()\"></ng-container>\n                    </ng-template>\n                }\n\n                @if (paginatorPreviousPageLinkIconTemplate()) {\n                    <ng-template #previouspagelinkicon>\n                        <ng-container *ngTemplateOutlet=\"paginatorPreviousPageLinkIconTemplate()\"></ng-container>\n                    </ng-template>\n                }\n\n                @if (paginatorLastPageLinkIconTemplate()) {\n                    <ng-template #lastpagelinkicon>\n                        <ng-container *ngTemplateOutlet=\"paginatorLastPageLinkIconTemplate()\"></ng-container>\n                    </ng-template>\n                }\n\n                @if (paginatorNextPageLinkIconTemplate()) {\n                    <ng-template #nextpagelinkicon>\n                        <ng-container *ngTemplateOutlet=\"paginatorNextPageLinkIconTemplate()\"></ng-container>\n                    </ng-template>\n                }\n            </p-paginator>\n        }\n\n        @if (!scrollable()) {\n            <div [pBind]=\"ptm('wrapper')\" [class]=\"cx('wrapper')\" [style]=\"sx('wrapper')\">\n                <table role=\"treegrid\" [pBind]=\"ptm('table')\" #table [class]=\"tableStyleClass()\" [style]=\"tableStyle()\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTemplate(); context: { $implicit: columns() }\"></ng-container>\n                    <thead role=\"rowgroup\" [class]=\"cx('thead')\" [pBind]=\"ptm('thead')\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate(); context: { $implicit: columns() }\"></ng-container>\n                    </thead>\n                    <tbody [class]=\"cx('tbody')\" [pBind]=\"ptm('tbody')\" role=\"rowgroup\" [unstyled]=\"unstyled()\" [pTreeTableBody]=\"columns()\" [pTreeTableBodyTemplate]=\"bodyTemplate()\"></tbody>\n                    <tfoot [class]=\"cx('tfoot')\" [pBind]=\"ptm('tfoot')\" role=\"rowgroup\">\n                        <ng-container *ngTemplateOutlet=\"footerTemplate(); context: { $implicit: columns() }\"></ng-container>\n                    </tfoot>\n                </table>\n            </div>\n        }\n\n        @if (scrollable()) {\n            <div [pBind]=\"ptm('scrollable