primeng 20.0.0-rc.1 → 20.0.0-rc.2

package/fesm2022/primeng-treetable.mjs

@@ -12,7 +12,7 @@ import { BadgeModule } from 'primeng/badge';
 import { BaseComponent } from 'primeng/basecomponent';
 import { Checkbox } from 'primeng/checkbox';
 import { DomHandler } from 'primeng/dom';
-import { SpinnerIcon, ArrowDownIcon, ArrowUpIcon, SortAltIcon, SortAmountUpAltIcon, SortAmountDownIcon, ChevronDownIcon, ChevronRightIcon, CheckIcon, MinusIcon } from 'primeng/icons';
+import { SpinnerIcon, ArrowDownIcon, ArrowUpIcon, SortAltIcon, SortAmountUpAltIcon, SortAmountDownIcon, ChevronDownIcon, ChevronRightIcon, CheckIcon } from 'primeng/icons';
 import * as i2 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
 import { Ripple } from 'primeng/ripple';
@@ -20,7 +20,7 @@ import { Scroller } from 'primeng/scroller';
 import { Subject } from 'rxjs';
 import { BaseStyle } from 'primeng/base';
 
-const theme = ({ dt }) => `
+const theme = /*css*/ `
 /* For PrimeNG */
 .p-treetable {
     position: relative;
@@ -161,7 +161,7 @@ const theme = ({ dt }) => `
     top: 0;
     right: 0;
     margin: 0;
-    width: ${dt('treetable.column.resizer.width')};
+    width: dt('treetable.column.resizer.width');
     height: 100%;
     padding: 0px;
     cursor: col-resize;
@@ -169,11 +169,11 @@ const theme = ({ dt }) => `
 }
 
 .p-treetable .p-column-resizer-helper {
-    width: ${dt('treetable.resize.indicator.width')};
+    width: dt('treetable.resize.indicator.width');
     position: absolute;
     z-index: 10;
     display: none;
-    background: ${dt('treetable.resize.indicator.color')};
+    background: dt('treetable.resize.indicator.color');
 }
 
 .p-treetable .p-row-editor-init,
@@ -208,9 +208,9 @@ const theme = ({ dt }) => `
 }
 
 .p-treetable-loading-icon {
-    font-size: ${dt('treetable.loading.icon.size')};
-    width: ${dt('treetable.loading.icon.size')};
-    height: ${dt('treetable.loading.icon.size')};
+    font-size: dt('treetable.loading.icon.size');
+    width: dt('treetable.loading.icon.size');
+    height: dt('treetable.loading.icon.size');
 }
 
 /* Virtual Scroll */
@@ -223,59 +223,59 @@ const theme = ({ dt }) => `
 }
 
 .p-treetable .p-paginator-top {
-    border-color: ${dt('treetable.paginator.top.border.color')};
+    border-color: dt('treetable.paginator.top.border.color');
     border-style: solid;
-    border-width: ${dt('treetable.paginator.top.border.width')};
+    border-width: dt('treetable.paginator.top.border.width');
 }
 
 .p-treetable .p-paginator-bottom {
-    border-color: ${dt('treetable.paginator.bottom.border.color')};
+    border-color: dt('treetable.paginator.bottom.border.color');
     border-style: solid;
-    border-width: ${dt('treetable.paginator.bottom.border.width')};
+    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')};
+    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')};
+    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')};
+    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')};
+    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')};
+    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')};
+    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')};
+    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')};
+    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')};
+    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 {
@@ -286,33 +286,33 @@ const theme = ({ dt }) => `
 }
 
 .p-treetable .p-sortable-column .p-sortable-column-icon {
-    color: ${dt('treetable.sort.icon.color')};
-    transition: color ${dt('treetable.transition.duration')};
+    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')};
+    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-sortable-column-icon {
-    color: ${dt('treetable.sort.icon.hover.color')};
+    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')};
+    background: dt('treetable.header.cell.selected.background');
+    color: dt('treetable.header.cell.selected.color');
 }
 
 .p-treetable .p-sortable-column.p-treetable-column-sorted .p-sortable-column-icon {
-    color: ${dt('treetable.header.cell.selected.color')};
+    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')};
+    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 {
@@ -321,18 +321,18 @@ const theme = ({ dt }) => `
 
 .p-treetable .p-treetable-tbody > tr {
     outline-color: transparent;
-    background: ${dt('treetable.row.background')};
-    color: ${dt('treetable.row.color')};
-    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')};
+    background: dt('treetable.row.background');
+    color: dt('treetable.row.color');
+    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-tbody>tr>td {
     text-align: start;
-    border-color: ${dt('treetable.body.cell.border.color')};
+    border-color: dt('treetable.body.cell.border.color');
     border-style: solid;
     border-width: 0 0 1px 0;
-    padding: ${dt('treetable.body.cell.padding')};
+    padding: dt('treetable.body.cell.padding');
 }
 
 .p-treetable .p-treetable-tbody>tr>td .p-treetable-toggler {
@@ -341,46 +341,46 @@ const theme = ({ dt }) => `
     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')};
+    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')};
+    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')};
+    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')};
+    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')};
+    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')};
+    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')};
+    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 {
@@ -388,13 +388,13 @@ const theme = ({ dt }) => `
 }
 
 .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')};
+    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')};
+    background: dt('treetable.row.hover.background');
+    color: dt('treetable.row.hover.color');
 }
 
 .p-treetable-gridlines .p-treetable-header {
@@ -524,7 +524,7 @@ p-tree-table-toggler + p-tree-table-checkbox + span {
 p-treetable-sort-icon {
     display: inline-flex;
     align-items: center;
-    gap: ${dt('treetable.header.cell.gap')};
+    gap: dt('treetable.header.cell.gap');
 }
 `;
 const classes = {
@@ -2637,7 +2637,7 @@ class TreeTable extends BaseComponent {
             <div [class]="cx('mask')">
                 <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
                 <ng-container *ngIf="!loadingIcon">
-                    <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="cx('loadingIcon')" />
+                    <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [class]="cx('loadingIcon')" />
                     <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
                         <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
                     </span>
@@ -2752,16 +2752,16 @@ class TreeTable extends BaseComponent {
             <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
         </div>
 
-        <div #resizeHelper [class]="cx('columnResizerHelper')" style="display:none" *ngIf="resizableColumns"></div>
-        <span #reorderIndicatorUp [class]="cx('reorderIndicatorUp')" style="display: none;" *ngIf="reorderableColumns">
-            <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
+        <div #resizeHelper [class]="cx('columnResizerHelper')" [style.display]="'none'" *ngIf="resizableColumns"></div>
+        <span #reorderIndicatorUp [class]="cx('reorderIndicatorUp')" [style.display]="'none'" *ngIf="reorderableColumns">
+            <svg data-p-icon="arrow-down" *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
             <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
         </span>
-        <span #reorderIndicatorDown [class]="cx('reorderIndicatorDown')" style="display: none;" *ngIf="reorderableColumns">
-            <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
+        <span #reorderIndicatorDown [class]="cx('reorderIndicatorDown')" [style.display]="'none'" *ngIf="reorderableColumns">
+            <svg data-p-icon="arrow-up" *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
             <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
         </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i2.Paginator), selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "directive", type: i0.forwardRef(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => SpinnerIcon), selector: "SpinnerIcon" }, { kind: "component", type: i0.forwardRef(() => ArrowDownIcon), selector: "ArrowDownIcon" }, { kind: "component", type: i0.forwardRef(() => ArrowUpIcon), selector: "ArrowUpIcon" }, { kind: "component", type: i0.forwardRef(() => TTScrollableView), selector: "[ttScrollableView]", inputs: ["ttScrollableView", "frozen", "scrollHeight"] }, { kind: "component", type: i0.forwardRef(() => TTBody), selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => i2.Paginator), selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "directive", type: i0.forwardRef(() => i3.PrimeTemplate), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i0.forwardRef(() => SpinnerIcon), selector: "[data-p-icon=\"spinner\"]" }, { kind: "component", type: i0.forwardRef(() => ArrowDownIcon), selector: "[data-p-icon=\"arrow-down\"]" }, { kind: "component", type: i0.forwardRef(() => ArrowUpIcon), selector: "[data-p-icon=\"arrow-up\"]" }, { kind: "component", type: i0.forwardRef(() => TTScrollableView), selector: "[ttScrollableView]", inputs: ["ttScrollableView", "frozen", "scrollHeight"] }, { kind: "component", type: i0.forwardRef(() => TTBody), selector: "[pTreeTableBody]", inputs: ["pTreeTableBody", "pTreeTableBodyTemplate", "frozen", "serializedNodes", "scrollerOptions"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTable, decorators: [{
             type: Component,
@@ -2773,7 +2773,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             <div [class]="cx('mask')">
                 <i *ngIf="loadingIcon" [class]="cn(cx('loadingIcon'), 'pi-spin' + loadingIcon)"></i>
                 <ng-container *ngIf="!loadingIcon">
-                    <SpinnerIcon *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [styleClass]="cx('loadingIcon')" />
+                    <svg data-p-icon="spinner" *ngIf="!loadingIconTemplate && !_loadingIconTemplate" [spin]="true" [class]="cx('loadingIcon')" />
                     <span *ngIf="loadingIconTemplate || _loadingIconTemplate" [class]="cx('loadingIcon')">
                         <ng-template *ngTemplateOutlet="loadingIconTemplate || _loadingIconTemplate"></ng-template>
                     </span>
@@ -2888,13 +2888,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             <ng-container *ngTemplateOutlet="summaryTemplate || _summaryTemplate"></ng-container>
         </div>
 
-        <div #resizeHelper [class]="cx('columnResizerHelper')" style="display:none" *ngIf="resizableColumns"></div>
-        <span #reorderIndicatorUp [class]="cx('reorderIndicatorUp')" style="display: none;" *ngIf="reorderableColumns">
-            <ArrowDownIcon *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
+        <div #resizeHelper [class]="cx('columnResizerHelper')" [style.display]="'none'" *ngIf="resizableColumns"></div>
+        <span #reorderIndicatorUp [class]="cx('reorderIndicatorUp')" [style.display]="'none'" *ngIf="reorderableColumns">
+            <svg data-p-icon="arrow-down" *ngIf="!reorderIndicatorUpIconTemplate && !_reorderIndicatorUpIconTemplate" />
             <ng-template *ngTemplateOutlet="reorderIndicatorUpIconTemplate || _reorderIndicatorUpIconTemplate"></ng-template>
         </span>
-        <span #reorderIndicatorDown [class]="cx('reorderIndicatorDown')" style="display: none;" *ngIf="reorderableColumns">
-            <ArrowUpIcon *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
+        <span #reorderIndicatorDown [class]="cx('reorderIndicatorDown')" [style.display]="'none'" *ngIf="reorderableColumns">
+            <svg data-p-icon="arrow-up" *ngIf="!reorderIndicatorDownIconTemplate && !_reorderIndicatorDownIconTemplate" />
             <ng-template *ngTemplateOutlet="reorderIndicatorDownIconTemplate || _reorderIndicatorDownIconTemplate"></ng-template>
         </span>
     `,
@@ -3531,7 +3531,7 @@ class TTScrollableView extends BaseComponent {
                     [frozen]="frozen"
                 ></tbody>
             </table>
-            <div #scrollableAligner style="background-color:transparent" *ngIf="frozen"></div>
+            <div #scrollableAligner [style.background-color]="'transparent'" *ngIf="frozen"></div>
         </ng-template>
 
         <div #scrollFooter *ngIf="tt.footerTemplate || tt._footerTemplate" [class]="cx('scrollableFooter')">
@@ -3619,7 +3619,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     [frozen]="frozen"
                 ></tbody>
             </table>
-            <div #scrollableAligner style="background-color:transparent" *ngIf="frozen"></div>
+            <div #scrollableAligner [style.background-color]="'transparent'" *ngIf="frozen"></div>
         </ng-template>
 
         <div #scrollFooter *ngIf="tt.footerTemplate || tt._footerTemplate" [class]="cx('scrollableFooter')">
@@ -3821,30 +3821,34 @@ class TTSortIcon extends BaseComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTSortIcon, deps: [{ token: TreeTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TTSortIcon, isStandalone: false, selector: "p-treeTableSortIcon, p-treetable-sort-icon, p-tree-table-sort-icon", inputs: { field: "field", ariaLabelDesc: "ariaLabelDesc", ariaLabelAsc: "ariaLabelAsc" }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0, template: ` <ng-container *ngIf="!tt.sortIconTemplate && !tt._sortIconTemplate">
-            <SortAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 0" />
-            <SortAmountUpAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" />
-            <SortAmountDownIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TTSortIcon, isStandalone: false, selector: "p-treeTableSortIcon, p-treetable-sort-icon, p-tree-table-sort-icon", inputs: { field: "field", ariaLabelDesc: "ariaLabelDesc", ariaLabelAsc: "ariaLabelAsc" }, providers: [TreeTableStyle], usesInheritance: true, ngImport: i0, template: `
+        <ng-container *ngIf="!tt.sortIconTemplate && !tt._sortIconTemplate">
+            <svg data-p-icon="sort-alt" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === 0" />
+            <svg data-p-icon="sort-amount-up-alt" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" />
+            <svg data-p-icon="sort-amount-down" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" />
         </ng-container>
         <span *ngIf="tt.sortIconTemplate || tt._sortIconTemplate" [class]="cx('sortableColumnIcon')">
             <ng-template *ngTemplateOutlet="tt.sortIconTemplate || tt._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
         </span>
-        <p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small"></p-badge>`, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => SortAltIcon), selector: "SortAltIcon" }, { kind: "component", type: i0.forwardRef(() => SortAmountUpAltIcon), selector: "SortAmountUpAltIcon" }, { kind: "component", type: i0.forwardRef(() => SortAmountDownIcon), selector: "SortAmountDownIcon" }, { kind: "component", type: i0.forwardRef(() => i4.Badge), selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        <p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small"></p-badge>
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i0.forwardRef(() => SortAltIcon), selector: "[data-p-icon=\"sort-alt\"]" }, { kind: "component", type: i0.forwardRef(() => SortAmountUpAltIcon), selector: "[data-p-icon=\"sort-amount-up-alt\"]" }, { kind: "component", type: i0.forwardRef(() => SortAmountDownIcon), selector: "[data-p-icon=\"sort-amount-down\"]" }, { kind: "component", type: i0.forwardRef(() => i4.Badge), selector: "p-badge", inputs: ["styleClass", "badgeSize", "size", "severity", "value", "badgeDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TTSortIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-treeTableSortIcon, p-treetable-sort-icon, p-tree-table-sort-icon',
                     standalone: false,
-                    template: ` <ng-container *ngIf="!tt.sortIconTemplate && !tt._sortIconTemplate">
-            <SortAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 0" />
-            <SortAmountUpAltIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" />
-            <SortAmountDownIcon [styleClass]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" />
+                    template: `
+        <ng-container *ngIf="!tt.sortIconTemplate && !tt._sortIconTemplate">
+            <svg data-p-icon="sort-alt" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === 0" />
+            <svg data-p-icon="sort-amount-up-alt" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === 1" />
+            <svg data-p-icon="sort-amount-down" [class]="cx('sortableColumnIcon')" *ngIf="sortOrder === -1" />
         </ng-container>
         <span *ngIf="tt.sortIconTemplate || tt._sortIconTemplate" [class]="cx('sortableColumnIcon')">
             <ng-template *ngTemplateOutlet="tt.sortIconTemplate || tt._sortIconTemplate; context: { $implicit: sortOrder }"></ng-template>
         </span>
-        <p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small"></p-badge>`,
+        <p-badge *ngIf="isMultiSorted()" [class]="cx('sortableColumnBadge')" [value]="getBadgeValue()" size="small"></p-badge>
+    `,
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [TreeTableStyle]
@@ -4933,12 +4937,12 @@ class TreeTableToggler extends BaseComponent {
             [attr.aria-label]="toggleButtonAriaLabel"
         >
             <ng-container *ngIf="!tt.togglerIconTemplate && !tt._togglerIconTemplate">
-                <ChevronDownIcon *ngIf="rowNode.node.expanded" [attr.aria-hidden]="true" />
-                <ChevronRightIcon *ngIf="!rowNode.node.expanded" [attr.aria-hidden]="true" />
+                <svg data-p-icon="chevron-down" *ngIf="rowNode.node.expanded" [attr.aria-hidden]="true" />
+                <svg data-p-icon="chevron-right" *ngIf="!rowNode.node.expanded" [attr.aria-hidden]="true" />
             </ng-container>
             <ng-template *ngTemplateOutlet="tt.togglerIconTemplate || tt._togglerIconTemplate; context: { $implicit: rowNode.node.expanded }"></ng-template>
         </button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "ChevronRightIcon" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(() => i1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1.NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(() => Ripple), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(() => ChevronDownIcon), selector: "[data-p-icon=\"chevron-down\"]" }, { kind: "component", type: i0.forwardRef(() => ChevronRightIcon), selector: "[data-p-icon=\"chevron-right\"]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TreeTableToggler, decorators: [{
             type: Component,
@@ -4959,8 +4963,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             [attr.aria-label]="toggleButtonAriaLabel"
         >
             <ng-container *ngIf="!tt.togglerIconTemplate && !tt._togglerIconTemplate">
-                <ChevronDownIcon *ngIf="rowNode.node.expanded" [attr.aria-hidden]="true" />
-                <ChevronRightIcon *ngIf="!rowNode.node.expanded" [attr.aria-hidden]="true" />
+                <svg data-p-icon="chevron-down" *ngIf="rowNode.node.expanded" [attr.aria-hidden]="true" />
+                <svg data-p-icon="chevron-right" *ngIf="!rowNode.node.expanded" [attr.aria-hidden]="true" />
             </ng-container>
             <ng-template *ngTemplateOutlet="tt.togglerIconTemplate || tt._togglerIconTemplate; context: { $implicit: rowNode.node.expanded }"></ng-template>
         </button>
@@ -4985,7 +4989,6 @@ class TreeTableModule {
             SortAmountDownIcon,
             BadgeModule,
             CheckIcon,
-            MinusIcon,
             ChevronDownIcon,
             ChevronRightIcon,
             Checkbox,
@@ -5002,7 +5005,6 @@ class TreeTableModule {
             SortAmountDownIcon,
             BadgeModule,
             CheckIcon,
-            MinusIcon,
             ChevronDownIcon,
             ChevronRightIcon,
             Checkbox,
@@ -5025,7 +5027,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                         SortAmountDownIcon,
                         BadgeModule,
                         CheckIcon,
-                        MinusIcon,
                         ChevronDownIcon,
                         ChevronRightIcon,
                         Checkbox,