primeng/fesm2022/primeng-treetable.mjs

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,

export * from 'primeng/types/treetable';
import * as i0 from '@angular/core';
import { Injectable, InjectionToken, input, booleanAttribute, inject, computed, ViewEncapsulation, Component, viewChild, effect, model, numberAttribute, output, contentChild, signal, untracked, HostListener, Directive, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { BaseStyle } from 'primeng/base';
import { Subject } from 'rxjs';
import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
import { addClass, findSingle, calculateScrollbarWidth, calculateScrollbarHeight, resolveFieldData, isEmpty, getOffset, addStyle, getIndex, getHiddenElementOuterWidth, getHiddenElementOuterHeight, reorderArray, isClickable, equals, find, removeClass, clearSelection } from '@primeuix/utils';
import { FilterService, SharedModule } from 'primeng/api';
import { BaseComponent, PARENT_INSTANCE } from 'primeng/basecomponent';
import * as i1 from 'primeng/bind';
import { Bind } from 'primeng/bind';
import { DomHandler } from 'primeng/dom';
import { ArrowDown } from '@primeicons/angular/arrow-down';
import { ArrowUp } from '@primeicons/angular/arrow-up';
import { Spinner } from '@primeicons/angular/spinner';
import * as i2 from 'primeng/paginator';
import { PaginatorModule } from 'primeng/paginator';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Scroller } from 'primeng/scroller';
import * as i1$1 from 'primeng/badge';
import { BadgeModule } from 'primeng/badge';
import { SortAlt } from '@primeicons/angular/sort-alt';
import { SortAmountDown } from '@primeicons/angular/sort-amount-down';
import { SortAmountUpAlt } from '@primeicons/angular/sort-amount-up-alt';
import * as i1$2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { Checkbox } from 'primeng/checkbox';
import { ChevronDown } from '@primeicons/angular/chevron-down';
import { ChevronRight } from '@primeicons/angular/chevron-right';
import { Ripple } from 'primeng/ripple';

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');
    font-weight: dt('treetable.body.cell.font.weight');
    font-size: dt('treetable.body.cell.font.size');
}

.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 > tr) .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 > tr) .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-treetable-checkbox {
    display: inline-flex;
}

p-treetabletoggler + p-treetable-checkbox .p-checkbox,
p-treetable-toggler + p-treetable-checkbox .p-checkbox,
p-treetable-toggler + p-tree-table-checkbox .p-checkbox,
p-treetabletoggler + p-tree-table-checkbox .p-checkbox {
    vertical-align: middle;
}

p-treetabletoggler + p-treetable-checkbox + span,
p-treetable-toggler + p-treetable-checkbox + span,
p-treetable-toggler + p-tree-table-checkbox + span,
p-treetabletoggler + 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 }) => {
        const showGridlines = instance.showGridlines();
        const rowHover = instance.rowHover();
        const selectionMode = instance.selectionMode();
        const autoLayout = instance.autoLayout();
        const resizableColumns = instance.resizableColumns();
        const columnResizeMode = instance.columnResizeMode();
        const scrollable = instance.scrollable();
        const scrollHeight = instance.scrollHeight();
        return [
            'p-treetable p-component',
            {
                'p-treetable-gridlines': showGridlines,
                'p-treetable-hoverable-rows': rowHover || selectionMode === 'single' || selectionMode === 'multiple',
                'p-treetable-auto-layout': autoLayout,
                'p-treetable-resizable': resizableColumns,
                'p-treetable-resizable-fit': resizableColumns && columnResizeMode === 'fit',
                'p-treetable-flex-scrollable': scrollable && 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 }) => {
        const scrollable = instance.scrollable();
        const resizableColumns = instance.resizableColumns();
        const columnResizeMode = instance.columnResizeMode();
        return {
            'p-treetable-table': true,
            'p-treetable-scrollable-table': scrollable,
            'p-treetable-resizable-table': resizableColumns,
            'p-treetable-resizable-table-fit': resizableColumns && 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'
};
const inlineStyles = {
    wrapper: { overflow: 'auto' }
};
class TreeTableStyle extends BaseStyle {
    name = 'treetable';
    style = style;
    classes = classes;
    inlineStyles = inlineStyles;
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeTableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeTableStyle });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", 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: "22.0.6", ngImport: i0, type: TreeTableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeTableService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TreeTableService, decorators: [{
            type: Injectable
        }] });

class TTBody extends BaseComponent {
    columns = input(undefined, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), alias: 'pTreeTableBody' });
    template = input(undefined, { ...(ngDevMode ? { debugName: "template" } : /* istanbul ignore next */ {}), alias: 'pTreeTableBodyTemplate' });
    frozen = input(undefined, { ...(ngDevMode ? { debugName: "frozen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    serializedNodes = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "serializedNodes" }] : /* istanbul ignore next */ []));
    scrollerOptions = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "scrollerOptions" }] : /* istanbul ignore next */ []));
    tt = inject(TREETABLE_INSTANCE);
    emptyMessageContext = computed(() => ({ $implicit: this.columns(), frozen: this.frozen() }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "emptyMessageContext" }] : /* istanbul ignore next */ []));
    constructor() {
        super();
        this.tt.tableService.uiUpdateSource$.pipe(takeUntilDestroyed()).subscribe(() => {
            if (this.tt.virtualScroll()) {
                this.cd.detectChanges();
            }
        });
    }
    getBodyTemplateContext(serializedNode) {
        return {
            $implicit: serializedNode,
            node: serializedNode.node,
            rowData: serializedNode.node.data,
            columns: this.columns()
        };
    }
    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;
    }
    get dataP() {
        return this.cn({
            hoverable: this.tt.rowHover() || this.tt.selectionMode(),
            frozen: this.frozen()
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TTBody, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TTBody, isStandalone: true, selector: "[pTreeTableBody]", inputs: { columns: { classPropertyName: "columns", publicName: "pTreeTableBody", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "pTreeTableBodyTemplate", isSignal: true, isRequired: false, transformFunction: null }, frozen: { classPropertyName: "frozen", publicName: "frozen", isSignal: true, isRequired: false, transformFunction: null }, serializedNodes: { classPropertyName: "serializedNodes", publicName: "serializedNodes", isSignal: true, isRequired: false, transformFunction: null }, scrollerOptions: { classPropertyName: "scrollerOptions", publicName: "scrollerOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-p": "dataP" } }, usesInheritance: true, ngImport: i0, template: `
        @for (serializedNode of serializedNodes() || tt.serializedValue; track tt.rowTrackBy()($index, serializedNode)) {
            @if (serializedNode.visible) {
                <ng-container *ngTemplateOutlet="template(); context: getBodyTemplateContext(serializedNode)"></ng-container>
            }
        }
        @if (tt.isEmpty()) {
            <ng-container *ngTemplateOutlet="tt.emptyMessageTemplate(); context: emptyMessageContext()"></ng-container>
        }
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TTBody, decorators: [{
            type: Component,
            args: [{
                    selector: '[pTreeTableBody]',
                    standalone: true,
                    imports: [NgTemplateOutlet],
                    template: `
        @for (serializedNode of serializedNodes() || tt.serializedValue; track tt.rowTrackBy()($index, serializedNode)) {
            @if (serializedNode.visible) {
                <ng-container *ngTemplateOutlet="template(); context: getBodyTemplateContext(serializedNode)"></ng-container>
            }
        }
        @if (tt.isEmpty()) {
            <ng-container *ngTemplateOutlet="tt.emptyMessageTemplate(); context: emptyMessageContext()"></ng-container>
        }
    `,
                    encapsulation: ViewEncapsulation.None,
                    host: {
                        '[attr.data-p]': 'dataP'
                    }
                }]
        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTreeTableBody", required: false }] }], template: [{ type: i0.Input, args: [{ isSignal: true, alias: "pTreeTableBodyTemplate", required: false }] }], frozen: [{ type: i0.Input, args: [{ isSignal: true, alias: "frozen", required: false }] }], serializedNodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "serializedNodes", required: false }] }], scrollerOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollerOptions", required: false }] }] } });

class TTScrollableView extends BaseComponent {
    hostName = 'TreeTable';
    columns = input(undefined, { ...(ngDevMode ? { debugName: "columns" } : /* istanbul ignore next */ {}), alias: 'ttScrollableView' });
    frozen = input(undefined, { ...(ngDevMode ? { debugName: "frozen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    scrollHeight = input(/* @ts-ignore */
    ...(ngDevMode ? [undefined, { debugName: "scrollHeight" }] : /* istanbul ignore next */ []));
    scrollHeaderViewChild = viewChild('scrollHeader', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollHeaderViewChild" }] : /* istanbul ignore next */ []));
    scrollHeaderBoxViewChild = viewChild('scrollHeaderBox', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollHeaderBoxViewChild" }] : /* istanbul ignore next */ []));
    scrollBodyViewChild = viewChild('scrollBody', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollBodyViewChild" }] : /* istanbul ignore next */ []));
    scrollTableViewChild = viewChild('scrollTable', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollTableViewChild" }] : /* istanbul ignore next */ []));
    scrollLoadingTableViewChild = viewChild('loadingTable', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollLoadingTableViewChild" }] : /* istanbul ignore next */ []));
    scrollFooterViewChild = viewChild('scrollFooter', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollFooterViewChild" }] : /* istanbul ignore next */ []));
    scrollFooterBoxViewChild = viewChild('scrollFooterBox', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollFooterBoxViewChild" }] : /* istanbul ignore next */ []));
    scrollableAlignerViewChild = viewChild('scrollableAligner', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollableAlignerViewChild" }] : /* istanbul ignore next */ []));
    scroller = viewChild('scroller', /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scroller" }] : /* istanbul ignore next */ []));
    headerScrollListener;
    bodyScrollListener;
    footerScrollListener;
    frozenSiblingBody;
    preventBodyScrollPropagation;
    _componentStyle = inject(TreeTableStyle);
    tt = inject(TREETABLE_INSTANCE);
    colGroupTemplate = computed(() => (this.frozen() ? this.tt.frozenColGroupTemplate() || this.tt.colGroupTemplate() : this.tt.colGroupTemplate()), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "colGroupTemplate" }] : /* istanbul ignore next */ []));
    $headerTemplate = computed(() => (this.frozen() ? this.tt.frozenHeaderTemplate() || this.tt.headerTemplate() : this.tt.headerTemplate()), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "$headerTemplate" }] : /* istanbul ignore next */ []));
    $footerTemplate = computed(() => (this.frozen() ? this.tt.frozenFooterTemplate() || this.tt.footerTemplate() : this.tt.footerTemplate()), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "$footerTemplate" }] : /* istanbul ignore next */ []));
    $bodyTemplate = computed(() => (this.frozen() ? this.tt.frozenBodyTemplate() || this.tt.bodyTemplate() : this.tt.bodyTemplate()), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "$bodyTemplate" }] : /* istanbul ignore next */ []));
    scrollerStyle = computed(() => ({ height: this.tt.scrollHeight() !== 'flex' ? this.tt.scrollHeight() : undefined }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollerStyle" }] : /* istanbul ignore next */ []));
    $scrollerScrollHeight = computed(() => (this.scrollHeight() !== 'flex' ? undefined : '100%'), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "$scrollerScrollHeight" }] : /* istanbul ignore next */ []));
    scrollBodyStyle = computed(() => ({
        'max-height': this.tt.scrollHeight() !== 'flex' ? this.scrollHeight() : undefined,
        'overflow-y': !this.frozen() && this.tt.scrollHeight() ? 'scroll' : undefined
    }), /* @ts-ignore */
    ...(ngDevMode ? [{ debugName: "scrollBodyStyle" }] : /* istanbul ignore next */ []));
    constructor() {
        super();
        effect(() => {
            const val = this.scrollHeight();
            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.');
            }
        });
    }
    get serializedValue() {
        return this.tt.serializedValue;
    }
    onAfterViewInit() {
        if (isPlatformBrowser(this.platformId)) {
            if (!this.frozen()) {
                if (this.tt.frozenColumns() || 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()?.nativeElement) {
                        this.scrollFooterBoxViewChild().nativeElement.style.paddingRight = scrollBarWidth + 'px';
                    }
                }
            }
            else {
                if (this.scrollableAlignerViewChild()?.nativeElement) {
                    this.scrollableAlignerViewChild().nativeElement.style.height = calculateScrollbarHeight() + 'px';
                }
            }
            this.bindEvents();
        }
    }
    bindEvents() {
        if (isPlatformBrowser(this.platformId)) {
            if (this.scrollHeaderViewChild()?.nativeElement) {
                this.headerScrollListener = this.renderer.listen(this.scrollHeaderBoxViewChild()?.nativeElement, 'scroll', this.onHeaderScroll.bind(this));
            }
            if (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()?.nativeElement) {
                if (this.headerScrollListener) {
                    this.headerScrollListener();
                    this.headerScrollListener = null;
                }
            }
            if (this.scrollFooterViewChild()?.nativeElement) {
                if (this.footerScrollListener) {
                    this.footerScrollListener();
                    this.footerScrollListener = null;
                }
            }
            if (this.scrollBodyViewChild()?.nativeElement) {
                if (this.bodyScrollListener) {
                    this.bodyScrollListener();
                    this.bodyScrollListener = null;
                }
            }
            if (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()?.nativeElement) {
            this.scrollFooterViewChild().nativeElement.scrollLeft = scrollLeft;
        }
        this.preventBodyScrollPropagation = true;
    }
    onFooterScroll() {
        const scrollLeft = this.scrollFooterViewChild()?.nativeElement.scrollLeft;
        this.scrollBodyViewChild().nativeElement.scrollLeft = scrollLeft;
        if (this.scrollHeaderViewChild()?.nativeElement) {
            this.scrollHeaderViewChild().nativeElement.scrollLeft = scrollLeft;
        }
        this.preventBodyScrollPropagation = true;
    }
    onBodyScroll(event) {
        if (this.preventBodyScrollPropagation) {
            this.preventBodyScrollPropagation = false;
            return;
        }
        if (this.scrollHeaderViewChild()?.nativeElement) {
            this.scrollHeaderBoxViewChild().nativeElement.style.marginLeft = -1 * event.target.scrollLeft + 'px';
        }
        if (this.scrollFooterViewChild()?.nativeElement) {
            this.scrollFooterBoxViewChild().nativeElement.style.marginLeft = -1 * event.target.scrollLeft + 'px';
        }
        if (this.frozenSiblingBody) {
            this.frozenSiblingBody.scrollTop = event.target.scrollTop;
        }
    }
    scrollToVirtualIndex(index) {
        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;
            }
        }
    }
    getScrollableTableStyle(contentStyle) {
        return { ...this.tt.tableStyle(), ...contentStyle };
    }
    onDestroy() {
        this.unbindEvents();
        this.frozenSiblingBody = null;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TTScrollableView, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TTScrollableView, isStandalone: true, selector: "[ttScrollableView]", inputs: { columns: { classPropertyName: "columns", publicName: "ttScrollableView", isSignal: true, isRequired: false, transformFunction: null }, frozen: { classPropertyName: "frozen", publicName: "frozen", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null } }, providers: [TreeTableStyle], viewQueries: [{ propertyName: "scrollHeaderViewChild", first: true, predicate: ["scrollHeader"], descendants: true, isSignal: true }, { propertyName: "scrollHeaderBoxViewChild", first: true, predicate: ["scrollHeaderBox"], descendants: true, isSignal: true }, { propertyName: "scrollBodyViewChild", first: true, predicate: ["scrollBody"], descendants: true, isSignal: true }, { propertyName: "scrollTableViewChild", first: true, predicate: ["scrollTable"], descendants: true, isSignal: true }, { propertyName: "scrollLoadingTableViewChild", first: true, predicate: ["loadingTable"], descendants: true, isSignal: true }, { propertyName: "scrollFooterViewChild", first: true, predicate: ["scrollFooter"], descendants: true, isSignal: true }, { propertyName: "scrollFooterBoxViewChild", first: true, predicate: ["scrollFooterBox"], descendants: true, isSignal: true }, { propertyName: "scrollableAlignerViewChild", first: true, predicate: ["scrollableAligner"], descendants: true, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, isSignal: 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')" [style]="tt.tableStyle()">
                    <ng-container *ngTemplateOutlet="colGroupTemplate(); context: { $implicit: columns() }"></ng-container>
                    <thead role="rowgroup" [class]="cx('thead')" [pBind]="ptm('thead')">
                        <ng-container *ngTemplateOutlet="$headerTemplate(); context: { $implicit: columns() }"></ng-container>
                    </thead>
                </table>
            </div>
        </div>

        @if (tt.virtualScroll()) {
            <p-scroller
                #scroller
                [items]="tt.serializedValue"
                [styleClass]="cx('scrollableBody')"
                [style]="scrollerStyle()"
                [scrollHeight]="$scrollerScrollHeight()"
                [itemSize]="tt.virtualScrollItemSize()"
                [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>
                @if (tt.loaderTemplate()) {
                    <ng-template #loader let-scrollerOptions="options">
                        <ng-container *ngTemplateOutlet="tt.loaderTemplate(); context: { options: scrollerOptions }"></ng-container>
                    </ng-template>
                }
            </p-scroller>
        }
        @if (!tt.virtualScroll()) {
            <div #scrollBody [class]="cx('scrollableBody')" [pBind]="ptm('scrollableBody')" [style]="scrollBodyStyle()">
                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: serializedValue, options: {} }"></ng-container>
            </div>
        }

        <ng-template #buildInItems let-items let-scrollerOptions="options">
            <table role="treegrid" #scrollTable [pBind]="ptm('table')" [class]="cn(tt.tableStyleClass(), scrollerOptions.contentStyleClass)" [style]="getScrollableTableStyle(scrollerOptions.contentStyle)">
                <ng-container *ngTemplateOutlet="colGroupTemplate(); context: { $implicit: columns() }"></ng-container>
                <tbody [pBind]="ptm('tbody')" role="rowgroup" [class]="cx('tbody')" [pTreeTableBody]="columns()" [unstyled]="unstyled()" [pTreeTableBodyTemplate]="$bodyTemplate()" [serializedNodes]="items" [frozen]="frozen()"></tbody>
            </table>
            @if (frozen()) {
                <div #scrollableAligner [style.background-color]="'transparent'"></div>
            }
        </ng-template>

        @if (tt.footerTemplate()) {
            <div #scrollFooter [class]="cx('scrollableFooter')" [pBind]="ptm('scrollableFooter')">
                <div #scrollFooterBox [class]="cx('scrollableFooterBox')" [pBind]="ptm('scrollableFooterBox')">
                    <table [class]="cn(cx('scrollableFooterTable'), tt.tableStyleClass())" [style]="tt.tableStyle()" [pBind]="ptm('scrollableFooterTable')">
                        <ng-container *ngTemplateOutlet="colGroupTemplate(); context: { $implicit: columns() }"></ng-container>
                        <tfoot role="rowgroup" [class]="cx('tfoot')" [pBind]="ptm('tfoot')">
                            <ng-container *ngTemplateOutlet="$footerTemplate(); context: { $implicit: columns() }"></ng-container>
                        </tfoot>
                    </table>
                </div>
            </div>
        }
    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: Bind, selector: "[pBind]", inputs: ["pBind"] }, { kind: "component", type: Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller", 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: "component", type: TTBody, selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], en