primeng 22.1.2 → 22.1.3

package/fesm2022/primeng-table.mjs

@@ -14,12 +14,12 @@ import { FilterMatchMode, FilterOperator, FilterService, OverlayService, SharedM
 import { BaseComponent, PARENT_INSTANCE } from "primeng/basecomponent";
 import * as i1$3 from "primeng/bind";
 import { Bind, BindModule } from "primeng/bind";
-import { ConnectedOverlayScrollHandler, DomHandler } from "primeng/dom";
+import { ConnectedOverlayScrollHandler, DomHandler, getEventTarget, getShadowRoot } from "primeng/dom";
 import * as i2$1 from "primeng/paginator";
 import { PaginatorModule } from "primeng/paginator";
 import * as i3$2 from "primeng/scroller";
 import { ScrollerModule } from "primeng/scroller";
-import { ObjectUtils, UniqueComponentId, ZIndexUtils } from "primeng/utils";
+import { ObjectUtils, ZIndexUtils } from "primeng/utils";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import * as i1$2 from "primeng/badge";
 import { BadgeModule } from "primeng/badge";
@@ -281,7 +281,7 @@ var TableStyle = class TableStyle extends BaseStyle {
 	inlineStyles = inlineStyles;
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableStyle,
 		deps: null,
@@ -289,14 +289,14 @@ var TableStyle = class TableStyle extends BaseStyle {
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableStyle
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: TableStyle,
 	decorators: [{ type: Injectable }]
@@ -390,7 +390,7 @@ var TableService = class TableService {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableService,
 		deps: [],
@@ -398,14 +398,14 @@ var TableService = class TableService {
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: TableService,
 	decorators: [{ type: Injectable }]
@@ -505,7 +505,7 @@ var TableBody = class TableBody extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableBody,
 		deps: [],
@@ -513,7 +513,7 @@ var TableBody = class TableBody extends BaseComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: TableBody,
 		isStandalone: true,
 		selector: "[pTableBody]",
@@ -565,13 +565,18 @@ var TableBody = class TableBody extends BaseComponent {
 		usesInheritance: true,
 		ngImport: i0,
 		template: `
-        @if (!dataTable.expandedRowTemplate()) {
+        @let groupHeaderTemplate = dataTable.groupHeaderTemplate();
+        @let groupFooterTemplate = dataTable.groupFooterTemplate();
+        @let loadingBodyTemplate = dataTable.loadingBodyTemplate();
+        @let expandedRowTemplate = dataTable.expandedRowTemplate();
+        @let frozenExpandedRowTemplate = dataTable.frozenExpandedRowTemplate();
+        @if (!expandedRowTemplate) {
             @for (rowData of value(); track dataTable.rowTrackBy()($index, rowData); let rowIndex = $index) {
-                @if (dataTable.groupHeaderTemplate() && !dataTable.virtualScroll() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupHeader(value(), rowData, getRowIndex(rowIndex))) {
+                @if (groupHeaderTemplate && !dataTable.virtualScroll() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupHeader(value(), rowData, getRowIndex(rowIndex))) {
                     <ng-container role="row">
                         <ng-container
                             *ngTemplateOutlet="
-                                dataTable.groupHeaderTemplate();
+                                groupHeaderTemplate;
                                 context: {
                                     $implicit: rowData,
                                     rowIndex: getRowIndex(rowIndex),
@@ -586,7 +591,7 @@ var TableBody = class TableBody extends BaseComponent {
                 @if (dataTable.rowGroupMode() !== 'rowspan') {
                     <ng-container
                         *ngTemplateOutlet="
-                            rowData ? template() : dataTable.loadingBodyTemplate();
+                            rowData ? template() : loadingBodyTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -600,7 +605,7 @@ var TableBody = class TableBody extends BaseComponent {
                 @if (dataTable.rowGroupMode() === 'rowspan') {
                     <ng-container
                         *ngTemplateOutlet="
-                            rowData ? template() : dataTable.loadingBodyTemplate();
+                            rowData ? template() : loadingBodyTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -613,11 +618,11 @@ var TableBody = class TableBody extends BaseComponent {
                         "
                     ></ng-container>
                 }
-                @if (dataTable.groupFooterTemplate() && !dataTable.virtualScroll() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupFooter(value(), rowData, getRowIndex(rowIndex))) {
+                @if (groupFooterTemplate && !dataTable.virtualScroll() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupFooter(value(), rowData, getRowIndex(rowIndex))) {
                     <ng-container role="row">
                         <ng-container
                             *ngTemplateOutlet="
-                                dataTable.groupFooterTemplate();
+                                groupFooterTemplate;
                                 context: {
                                     $implicit: rowData,
                                     rowIndex: getRowIndex(rowIndex),
@@ -631,9 +636,9 @@ var TableBody = class TableBody extends BaseComponent {
                 }
             }
         }
-        @if (dataTable.expandedRowTemplate() && !(frozen() && dataTable.frozenExpandedRowTemplate())) {
+        @if (expandedRowTemplate && !(frozen() && frozenExpandedRowTemplate)) {
             @for (rowData of value(); track dataTable.rowTrackBy()($index, rowData); let rowIndex = $index) {
-                @if (!dataTable.groupHeaderTemplate()) {
+                @if (!groupHeaderTemplate) {
                     <ng-container
                         *ngTemplateOutlet="
                             template();
@@ -648,11 +653,11 @@ var TableBody = class TableBody extends BaseComponent {
                         "
                     ></ng-container>
                 }
-                @if (dataTable.groupHeaderTemplate() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupHeader(value(), rowData, getRowIndex(rowIndex))) {
+                @if (groupHeaderTemplate && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupHeader(value(), rowData, getRowIndex(rowIndex))) {
                     <ng-container role="row">
                         <ng-container
                             *ngTemplateOutlet="
-                                dataTable.groupHeaderTemplate();
+                                groupHeaderTemplate;
                                 context: {
                                     $implicit: rowData,
                                     rowIndex: getRowIndex(rowIndex),
@@ -668,7 +673,7 @@ var TableBody = class TableBody extends BaseComponent {
                 @if (dataTable.isRowExpanded(rowData)) {
                     <ng-container
                         *ngTemplateOutlet="
-                            dataTable.expandedRowTemplate();
+                            expandedRowTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -677,11 +682,11 @@ var TableBody = class TableBody extends BaseComponent {
                             }
                         "
                     ></ng-container>
-                    @if (dataTable.groupFooterTemplate() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupFooter(value(), rowData, getRowIndex(rowIndex))) {
+                    @if (groupFooterTemplate && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupFooter(value(), rowData, getRowIndex(rowIndex))) {
                         <ng-container role="row">
                             <ng-container
                                 *ngTemplateOutlet="
-                                    dataTable.groupFooterTemplate();
+                                    groupFooterTemplate;
                                     context: {
                                         $implicit: rowData,
                                         rowIndex: getRowIndex(rowIndex),
@@ -697,7 +702,7 @@ var TableBody = class TableBody extends BaseComponent {
                 }
             }
         }
-        @if (dataTable.frozenExpandedRowTemplate() && frozen()) {
+        @if (frozenExpandedRowTemplate && frozen()) {
             @for (rowData of value(); track dataTable.rowTrackBy()($index, rowData); let rowIndex = $index) {
                 <ng-container
                     *ngTemplateOutlet="
@@ -715,7 +720,7 @@ var TableBody = class TableBody extends BaseComponent {
                 @if (dataTable.isRowExpanded(rowData)) {
                     <ng-container
                         *ngTemplateOutlet="
-                            dataTable.frozenExpandedRowTemplate();
+                            frozenExpandedRowTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -728,7 +733,7 @@ var TableBody = class TableBody extends BaseComponent {
             }
         }
         @if (dataTable.loading()) {
-            <ng-container *ngTemplateOutlet="dataTable.loadingBodyTemplate(); context: bodyContext()"></ng-container>
+            <ng-container *ngTemplateOutlet="loadingBodyTemplate; context: bodyContext()"></ng-container>
         }
         @if (dataTable.isEmpty() && !dataTable.loading()) {
             <ng-container *ngTemplateOutlet="dataTable.emptyMessageTemplate(); context: bodyContext()"></ng-container>
@@ -751,7 +756,7 @@ var TableBody = class TableBody extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: TableBody,
 	decorators: [{
@@ -761,13 +766,18 @@ i0.ɵɵngDeclareClassMetadata({
 			standalone: true,
 			imports: [NgTemplateOutlet],
 			template: `
-        @if (!dataTable.expandedRowTemplate()) {
+        @let groupHeaderTemplate = dataTable.groupHeaderTemplate();
+        @let groupFooterTemplate = dataTable.groupFooterTemplate();
+        @let loadingBodyTemplate = dataTable.loadingBodyTemplate();
+        @let expandedRowTemplate = dataTable.expandedRowTemplate();
+        @let frozenExpandedRowTemplate = dataTable.frozenExpandedRowTemplate();
+        @if (!expandedRowTemplate) {
             @for (rowData of value(); track dataTable.rowTrackBy()($index, rowData); let rowIndex = $index) {
-                @if (dataTable.groupHeaderTemplate() && !dataTable.virtualScroll() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupHeader(value(), rowData, getRowIndex(rowIndex))) {
+                @if (groupHeaderTemplate && !dataTable.virtualScroll() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupHeader(value(), rowData, getRowIndex(rowIndex))) {
                     <ng-container role="row">
                         <ng-container
                             *ngTemplateOutlet="
-                                dataTable.groupHeaderTemplate();
+                                groupHeaderTemplate;
                                 context: {
                                     $implicit: rowData,
                                     rowIndex: getRowIndex(rowIndex),
@@ -782,7 +792,7 @@ i0.ɵɵngDeclareClassMetadata({
                 @if (dataTable.rowGroupMode() !== 'rowspan') {
                     <ng-container
                         *ngTemplateOutlet="
-                            rowData ? template() : dataTable.loadingBodyTemplate();
+                            rowData ? template() : loadingBodyTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -796,7 +806,7 @@ i0.ɵɵngDeclareClassMetadata({
                 @if (dataTable.rowGroupMode() === 'rowspan') {
                     <ng-container
                         *ngTemplateOutlet="
-                            rowData ? template() : dataTable.loadingBodyTemplate();
+                            rowData ? template() : loadingBodyTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -809,11 +819,11 @@ i0.ɵɵngDeclareClassMetadata({
                         "
                     ></ng-container>
                 }
-                @if (dataTable.groupFooterTemplate() && !dataTable.virtualScroll() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupFooter(value(), rowData, getRowIndex(rowIndex))) {
+                @if (groupFooterTemplate && !dataTable.virtualScroll() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupFooter(value(), rowData, getRowIndex(rowIndex))) {
                     <ng-container role="row">
                         <ng-container
                             *ngTemplateOutlet="
-                                dataTable.groupFooterTemplate();
+                                groupFooterTemplate;
                                 context: {
                                     $implicit: rowData,
                                     rowIndex: getRowIndex(rowIndex),
@@ -827,9 +837,9 @@ i0.ɵɵngDeclareClassMetadata({
                 }
             }
         }
-        @if (dataTable.expandedRowTemplate() && !(frozen() && dataTable.frozenExpandedRowTemplate())) {
+        @if (expandedRowTemplate && !(frozen() && frozenExpandedRowTemplate)) {
             @for (rowData of value(); track dataTable.rowTrackBy()($index, rowData); let rowIndex = $index) {
-                @if (!dataTable.groupHeaderTemplate()) {
+                @if (!groupHeaderTemplate) {
                     <ng-container
                         *ngTemplateOutlet="
                             template();
@@ -844,11 +854,11 @@ i0.ɵɵngDeclareClassMetadata({
                         "
                     ></ng-container>
                 }
-                @if (dataTable.groupHeaderTemplate() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupHeader(value(), rowData, getRowIndex(rowIndex))) {
+                @if (groupHeaderTemplate && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupHeader(value(), rowData, getRowIndex(rowIndex))) {
                     <ng-container role="row">
                         <ng-container
                             *ngTemplateOutlet="
-                                dataTable.groupHeaderTemplate();
+                                groupHeaderTemplate;
                                 context: {
                                     $implicit: rowData,
                                     rowIndex: getRowIndex(rowIndex),
@@ -864,7 +874,7 @@ i0.ɵɵngDeclareClassMetadata({
                 @if (dataTable.isRowExpanded(rowData)) {
                     <ng-container
                         *ngTemplateOutlet="
-                            dataTable.expandedRowTemplate();
+                            expandedRowTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -873,11 +883,11 @@ i0.ɵɵngDeclareClassMetadata({
                             }
                         "
                     ></ng-container>
-                    @if (dataTable.groupFooterTemplate() && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupFooter(value(), rowData, getRowIndex(rowIndex))) {
+                    @if (groupFooterTemplate && dataTable.rowGroupMode() === 'subheader' && shouldRenderRowGroupFooter(value(), rowData, getRowIndex(rowIndex))) {
                         <ng-container role="row">
                             <ng-container
                                 *ngTemplateOutlet="
-                                    dataTable.groupFooterTemplate();
+                                    groupFooterTemplate;
                                     context: {
                                         $implicit: rowData,
                                         rowIndex: getRowIndex(rowIndex),
@@ -893,7 +903,7 @@ i0.ɵɵngDeclareClassMetadata({
                 }
             }
         }
-        @if (dataTable.frozenExpandedRowTemplate() && frozen()) {
+        @if (frozenExpandedRowTemplate && frozen()) {
             @for (rowData of value(); track dataTable.rowTrackBy()($index, rowData); let rowIndex = $index) {
                 <ng-container
                     *ngTemplateOutlet="
@@ -911,7 +921,7 @@ i0.ɵɵngDeclareClassMetadata({
                 @if (dataTable.isRowExpanded(rowData)) {
                     <ng-container
                         *ngTemplateOutlet="
-                            dataTable.frozenExpandedRowTemplate();
+                            frozenExpandedRowTemplate;
                             context: {
                                 $implicit: rowData,
                                 rowIndex: getRowIndex(rowIndex),
@@ -924,7 +934,7 @@ i0.ɵɵngDeclareClassMetadata({
             }
         }
         @if (dataTable.loading()) {
-            <ng-container *ngTemplateOutlet="dataTable.loadingBodyTemplate(); context: bodyContext()"></ng-container>
+            <ng-container *ngTemplateOutlet="loadingBodyTemplate; context: bodyContext()"></ng-container>
         }
         @if (dataTable.isEmpty() && !dataTable.loading()) {
             <ng-container *ngTemplateOutlet="dataTable.emptyMessageTemplate(); context: bodyContext()"></ng-container>
@@ -1331,6 +1341,7 @@ var Table = class Table extends BaseComponent {
 		...ngDevMode ? { debugName: "checkboxIconTemplate" } : /* istanbul ignore next */ {},
 		descendants: false
 	});
+	$checkboxIconTemplate = signal(void 0, ...ngDevMode ? [{ debugName: "$checkboxIconTemplate" }] : /* istanbul ignore next */ []);
 	headerCheckboxIconTemplate = contentChild("headercheckboxicon", {
 		...ngDevMode ? { debugName: "headerCheckboxIconTemplate" } : /* istanbul ignore next */ {},
 		descendants: false
@@ -1405,7 +1416,7 @@ var Table = class Table extends BaseComponent {
 	resizeColumnElement;
 	columnResizing = false;
 	rowGroupHeaderStyleObject = {};
-	id = UniqueComponentId();
+	id = this.$useId.next("pn_id_");
 	styleElement;
 	overlayService = inject(OverlayService);
 	filterService = inject(FilterService);
@@ -1536,6 +1547,9 @@ var Table = class Table extends BaseComponent {
 	}
 	_initialColWidths;
 	_defaultRows;
+	onAfterContentChecked() {
+		this.$checkboxIconTemplate.set(this.checkboxIconTemplate());
+	}
 	onAfterViewChecked() {
 		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
 	}
@@ -2260,7 +2274,7 @@ var Table = class Table extends BaseComponent {
 	bindDocumentEditListener() {
 		if (!this.documentEditListener) this.documentEditListener = this.renderer.listen(this.document, "click", (event) => {
 			if (this.editingCell && !this.selfClick && this.isEditingCellValid()) {
-				if (!this.$unstyled()) DomHandler.removeClass(this.editingCell, "p-cell-editing");
+				if (!this.$unstyled()) DomHandler.removeClass(this.editingCell, this.pcn("p-cell-editing"));
 				setAttribute(this.editingCell, "data-p-cell-editing", "false");
 				this.editingCell = null;
 				this.onEditComplete.emit({
@@ -2349,7 +2363,7 @@ var Table = class Table extends BaseComponent {
 	}
 	onColumnResize(event) {
 		let containerLeft = DomHandler.getOffset(this.el?.nativeElement).left;
-		if (!this.$unstyled()) DomHandler.addClass(this.el?.nativeElement, "p-unselectable-text");
+		if (!this.$unstyled()) DomHandler.addClass(this.el?.nativeElement, this.pcn("p-unselectable-text"));
 		this.resizeHelperViewChild().nativeElement.style.height = this.el?.nativeElement.offsetHeight + "px";
 		this.resizeHelperViewChild().nativeElement.style.top = "0px";
 		if (event.type == "touchmove") this.resizeHelperViewChild().nativeElement.style.left = event.changedTouches[0].clientX - containerLeft + this.el?.nativeElement.scrollLeft + "px";
@@ -2379,7 +2393,7 @@ var Table = class Table extends BaseComponent {
 			if (this.isStateful()) this.saveState();
 		}
 		this.resizeHelperViewChild().nativeElement.style.display = "none";
-		DomHandler.removeClass(this.el?.nativeElement, "p-unselectable-text");
+		DomHandler.removeClass(this.el?.nativeElement, this.pcn("p-unselectable-text"));
 	}
 	_totalTableWidth() {
 		let widths = [];
@@ -2474,8 +2488,10 @@ var Table = class Table extends BaseComponent {
 		this.updateStyleElement(width, colIndex, newColumnWidth, nextColumnWidth);
 	}
 	updateStyleElement(width, colIndex, newColumnWidth, nextColumnWidth) {
-		this.destroyStyleElement();
-		this.createStyleElement();
+		if (!this.$styleScope.isolated) {
+			this.destroyStyleElement();
+			this.createStyleElement();
+		}
 		let innerHTML = "";
 		width.forEach((width, index) => {
 			let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
@@ -2488,7 +2504,8 @@ var Table = class Table extends BaseComponent {
                 }
             `;
 		});
-		this.renderer.setProperty(this.styleElement, "innerHTML", innerHTML);
+		if (this.$styleScope.isolated) this.$isolatedStyle("columns", this.psel(innerHTML));
+		else this.renderer.setProperty(this.styleElement, "innerHTML", this.psel(innerHTML));
 	}
 	onRowDragStart(event, index) {
 		this.rowDragging = true;
@@ -2502,25 +2519,25 @@ var Table = class Table extends BaseComponent {
 			let rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
 			let prevRowElement = rowElement.previousElementSibling;
 			if (pageY < rowMidY) {
-				DomHandler.removeClass(rowElement, "p-datatable-dragpoint-bottom");
+				DomHandler.removeClass(rowElement, this.pcn("p-datatable-dragpoint-bottom"));
 				this.droppedRowIndex = index;
-				if (prevRowElement && !this.$unstyled()) DomHandler.addClass(prevRowElement, "p-datatable-dragpoint-bottom");
-				else if (!this.$unstyled()) DomHandler.addClass(rowElement, "p-datatable-dragpoint-top");
+				if (prevRowElement && !this.$unstyled()) DomHandler.addClass(prevRowElement, this.pcn("p-datatable-dragpoint-bottom"));
+				else if (!this.$unstyled()) DomHandler.addClass(rowElement, this.pcn("p-datatable-dragpoint-top"));
 			} else {
-				if (prevRowElement && !this.$unstyled()) DomHandler.removeClass(prevRowElement, "p-datatable-dragpoint-bottom");
-				else if (!this.$unstyled()) DomHandler.addClass(rowElement, "p-datatable-dragpoint-top");
+				if (prevRowElement && !this.$unstyled()) DomHandler.removeClass(prevRowElement, this.pcn("p-datatable-dragpoint-bottom"));
+				else if (!this.$unstyled()) DomHandler.addClass(rowElement, this.pcn("p-datatable-dragpoint-top"));
 				this.droppedRowIndex = index + 1;
-				if (!this.$unstyled()) DomHandler.addClass(rowElement, "p-datatable-dragpoint-bottom");
+				if (!this.$unstyled()) DomHandler.addClass(rowElement, this.pcn("p-datatable-dragpoint-bottom"));
 			}
 		}
 	}
 	onRowDragLeave(event, rowElement) {
 		let prevRowElement = rowElement.previousElementSibling;
 		if (prevRowElement) {
-			if (!this.$unstyled()) DomHandler.removeClass(prevRowElement, "p-datatable-dragpoint-bottom");
+			if (!this.$unstyled()) DomHandler.removeClass(prevRowElement, this.pcn("p-datatable-dragpoint-bottom"));
 		}
-		if (!this.$unstyled()) DomHandler.removeClass(rowElement, "p-datatable-dragpoint-bottom");
-		if (!this.$unstyled()) DomHandler.removeClass(rowElement, "p-datatable-dragpoint-top");
+		if (!this.$unstyled()) DomHandler.removeClass(rowElement, this.pcn("p-datatable-dragpoint-bottom"));
+		if (!this.$unstyled()) DomHandler.removeClass(rowElement, this.pcn("p-datatable-dragpoint-top"));
 	}
 	onRowDragEnd(event) {
 		this.rowDragging = false;
@@ -2643,7 +2660,7 @@ var Table = class Table extends BaseComponent {
 			let widths = this.columnWidthsState.split(",");
 			if (this.columnResizeMode() === "expand" && this.tableWidthState) this.setResizeTableWidth(this.tableWidthState + "px");
 			if (ObjectUtils.isNotEmpty(widths)) {
-				this.createStyleElement();
+				if (!this.$styleScope.isolated) this.createStyleElement();
 				let innerHTML = "";
 				widths.forEach((width, index) => {
 					let style = `width: ${width}px !important; max-width: ${width}px !important`;
@@ -2655,7 +2672,8 @@ var Table = class Table extends BaseComponent {
                         }
                     `;
 				});
-				this.styleElement.innerHTML = innerHTML;
+				if (this.$styleScope.isolated) this.$isolatedStyle("columns", this.psel(innerHTML));
+				else this.styleElement.innerHTML = this.psel(innerHTML);
 			}
 		}
 	}
@@ -2692,7 +2710,7 @@ var Table = class Table extends BaseComponent {
 		this.styleElement = this.renderer.createElement("style");
 		this.styleElement.type = "text/css";
 		DomHandler.setAttribute(this.styleElement, "nonce", this.config?.csp()?.nonce);
-		this.renderer.appendChild(this.document.head, this.styleElement);
+		this.renderer.appendChild(getShadowRoot(this.el.nativeElement) ?? this.document.head, this.styleElement);
 		DomHandler.setAttribute(this.styleElement, "nonce", this.config?.csp()?.nonce);
 	}
 	getGroupRowsMeta() {
@@ -2727,7 +2745,7 @@ var Table = class Table extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: Table,
 		deps: [],
@@ -2735,7 +2753,7 @@ var Table = class Table extends BaseComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: Table,
 		isStandalone: true,
 		selector: "p-table",
@@ -3594,7 +3612,7 @@ var Table = class Table extends BaseComponent {
 		ngImport: i0,
 		template: `
         @if (showLoadingMask()) {
-            <div [class]="cx('mask')" [pBind]="ptm('mask')" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active">
+            <div [class]="cx('mask')" [pBind]="ptm('mask')" [animate.enter]="pcn('p-overlay-mask-enter-active')" [animate.leave]="pcn('p-overlay-mask-leave-active')">
                 @if (loadingIcon()) {
                     <i [class]="cn(cx('loadingIcon'), loadingIcon())" [pBind]="ptm('loadingIcon')"></i>
                 }
@@ -3995,7 +4013,7 @@ var Table = class Table extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: Table,
 	decorators: [{
@@ -4016,7 +4034,7 @@ i0.ɵɵngDeclareClassMetadata({
 			],
 			template: `
         @if (showLoadingMask()) {
-            <div [class]="cx('mask')" [pBind]="ptm('mask')" animate.enter="p-overlay-mask-enter-active" animate.leave="p-overlay-mask-leave-active">
+            <div [class]="cx('mask')" [pBind]="ptm('mask')" [animate.enter]="pcn('p-overlay-mask-enter-active')" [animate.leave]="pcn('p-overlay-mask-leave-active')">
                 @if (loadingIcon()) {
                     <i [class]="cn(cx('loadingIcon'), loadingIcon())" [pBind]="ptm('loadingIcon')"></i>
                 }
@@ -5361,7 +5379,7 @@ var FrozenColumn = class FrozenColumn extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: FrozenColumn,
 		deps: [],
@@ -5369,7 +5387,7 @@ var FrozenColumn = class FrozenColumn extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: FrozenColumn,
 		isStandalone: true,
 		selector: "[pFrozenColumn]",
@@ -5397,7 +5415,7 @@ var FrozenColumn = class FrozenColumn extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: FrozenColumn,
 	decorators: [{
@@ -5443,7 +5461,7 @@ var EditableRow = class EditableRow extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: EditableRow,
 		deps: null,
@@ -5451,7 +5469,7 @@ var EditableRow = class EditableRow extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: EditableRow,
 		isStandalone: true,
 		selector: "[pEditableRow]",
@@ -5477,7 +5495,7 @@ var EditableRow = class EditableRow extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: EditableRow,
 	decorators: [{
@@ -5517,7 +5535,7 @@ var ReorderableRowHandle = class ReorderableRowHandle extends BaseComponent {
 	onAfterViewInit() {}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ReorderableRowHandle,
 		deps: null,
@@ -5525,7 +5543,7 @@ var ReorderableRowHandle = class ReorderableRowHandle extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: ReorderableRowHandle,
 		isStandalone: true,
 		selector: "[pReorderableRowHandle]",
@@ -5538,7 +5556,7 @@ var ReorderableRowHandle = class ReorderableRowHandle extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ReorderableRowHandle,
 	decorators: [{
@@ -5560,7 +5578,7 @@ var RowGroupHeader = class RowGroupHeader extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: RowGroupHeader,
 		deps: null,
@@ -5568,7 +5586,7 @@ var RowGroupHeader = class RowGroupHeader extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: RowGroupHeader,
 		isStandalone: true,
 		selector: "[pRowGroupHeader]",
@@ -5583,7 +5601,7 @@ var RowGroupHeader = class RowGroupHeader extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: RowGroupHeader,
 	decorators: [{
@@ -5620,7 +5638,7 @@ var RowToggler = class RowToggler extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: RowToggler,
 		deps: null,
@@ -5628,7 +5646,7 @@ var RowToggler = class RowToggler extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: RowToggler,
 		isStandalone: true,
 		selector: "[pRowToggler]",
@@ -5655,7 +5673,7 @@ var RowToggler = class RowToggler extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: RowToggler,
 	decorators: [{
@@ -5757,7 +5775,7 @@ var SortableColumn = class SortableColumn extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: SortableColumn,
 		deps: [],
@@ -5765,7 +5783,7 @@ var SortableColumn = class SortableColumn extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: SortableColumn,
 		isStandalone: true,
 		selector: "[pSortableColumn]",
@@ -5805,7 +5823,7 @@ var SortableColumn = class SortableColumn extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SortableColumn,
 	decorators: [{
@@ -6021,7 +6039,7 @@ var SelectableRow = class SelectableRow extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: SelectableRow,
 		deps: [],
@@ -6029,7 +6047,7 @@ var SelectableRow = class SelectableRow extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: SelectableRow,
 		isStandalone: true,
 		selector: "[pSelectableRow]",
@@ -6075,7 +6093,7 @@ var SelectableRow = class SelectableRow extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SelectableRow,
 	decorators: [{
@@ -6169,7 +6187,7 @@ var SelectableRowDblClick = class SelectableRowDblClick extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: SelectableRowDblClick,
 		deps: [],
@@ -6177,7 +6195,7 @@ var SelectableRowDblClick = class SelectableRowDblClick extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: SelectableRowDblClick,
 		isStandalone: true,
 		selector: "[pSelectableRowDblClick]",
@@ -6215,7 +6233,7 @@ var SelectableRowDblClick = class SelectableRowDblClick extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SelectableRowDblClick,
 	decorators: [{
@@ -6298,7 +6316,7 @@ var ContextMenuRow = class ContextMenuRow extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ContextMenuRow,
 		deps: [],
@@ -6306,7 +6324,7 @@ var ContextMenuRow = class ContextMenuRow extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: ContextMenuRow,
 		isStandalone: true,
 		selector: "[pContextMenuRow]",
@@ -6347,7 +6365,7 @@ var ContextMenuRow = class ContextMenuRow extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ContextMenuRow,
 	decorators: [{
@@ -6413,7 +6431,7 @@ var ResizableColumn = class ResizableColumn extends BaseComponent {
 			if (this.isEnabled()) {
 				this.resizer = this.renderer.createElement("span");
 				setAttribute(this.resizer, "data-pc-column-resizer", "true");
-				if (!this.$unstyled()) this.renderer.addClass(this.resizer, "p-datatable-column-resizer");
+				if (!this.$unstyled()) this.renderer.addClass(this.resizer, this.pcn("p-datatable-column-resizer"));
 				this.renderer.appendChild(this.el.nativeElement, this.resizer);
 				this.resizerMouseDownListener = this.renderer.listen(this.resizer, "mousedown", this.onMouseDown.bind(this));
 				this.resizerTouchStartListener = this.renderer.listen(this.resizer, "touchstart", this.onTouchStart.bind(this));
@@ -6478,7 +6496,7 @@ var ResizableColumn = class ResizableColumn extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ResizableColumn,
 		deps: null,
@@ -6486,7 +6504,7 @@ var ResizableColumn = class ResizableColumn extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: ResizableColumn,
 		isStandalone: true,
 		selector: "[pResizableColumn]",
@@ -6505,7 +6523,7 @@ var ResizableColumn = class ResizableColumn extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ResizableColumn,
 	decorators: [{
@@ -6608,7 +6626,7 @@ var ReorderableColumn = class ReorderableColumn extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ReorderableColumn,
 		deps: null,
@@ -6616,7 +6634,7 @@ var ReorderableColumn = class ReorderableColumn extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: ReorderableColumn,
 		isStandalone: true,
 		selector: "[pReorderableColumn]",
@@ -6638,7 +6656,7 @@ var ReorderableColumn = class ReorderableColumn extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ReorderableColumn,
 	decorators: [{
@@ -6699,7 +6717,7 @@ var EditableColumn = class EditableColumn extends BaseComponent {
 	}
 	onAfterViewInit() {
 		if (this.isEnabled()) {
-			if (!this.$unstyled()) DomHandler.addClass(this.el.nativeElement, "p-editable-column");
+			if (!this.$unstyled()) DomHandler.addClass(this.el.nativeElement, this.pcn("p-editable-column"));
 		}
 	}
 	onClick(event) {
@@ -6719,7 +6737,7 @@ var EditableColumn = class EditableColumn extends BaseComponent {
 		const field = this.field();
 		this.originalCellValue = editingRow && field != null ? editingRow[field] : this.data();
 		this.dataTable.updateEditingCell(this.el.nativeElement, this.data(), this.field(), this.rowIndex());
-		if (!this.$unstyled()) DomHandler.addClass(this.el.nativeElement, "p-cell-editing");
+		if (!this.$unstyled()) DomHandler.addClass(this.el.nativeElement, this.pcn("p-cell-editing"));
 		setAttribute(this.el.nativeElement, "data-p-cell-editing", "true");
 		this.dataTable.onEditInit.emit({
 			field: this.field(),
@@ -6751,7 +6769,7 @@ var EditableColumn = class EditableColumn extends BaseComponent {
 			if (editingRow && editingField != null) editingRow[editingField] = this.originalCellValue;
 		}
 		this.originalCellValue = void 0;
-		if (!this.$unstyled()) DomHandler.removeClass(this.dataTable.editingCell, "p-cell-editing");
+		if (!this.$unstyled()) DomHandler.removeClass(this.dataTable.editingCell, this.pcn("p-cell-editing"));
 		setAttribute(this.el.nativeElement, "data-p-cell-editing", "false");
 		this.dataTable.editingCell = null;
 		this.dataTable.editingCellData = null;
@@ -6906,7 +6924,7 @@ var EditableColumn = class EditableColumn extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: EditableColumn,
 		deps: [],
@@ -6914,7 +6932,7 @@ var EditableColumn = class EditableColumn extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: EditableColumn,
 		isStandalone: true,
 		selector: "[pEditableColumn]",
@@ -6976,7 +6994,7 @@ var EditableColumn = class EditableColumn extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: EditableColumn,
 	decorators: [{
@@ -7139,7 +7157,7 @@ var ReorderableRow = class ReorderableRow extends BaseComponent {
 		this.el.nativeElement.draggable = isHandleClicked;
 	}
 	isHandleElement(element) {
-		if (element?.classList.contains("p-datatable-reorderable-row-handle")) return true;
+		if (element?.classList.contains(this.pcn("p-datatable-reorderable-row-handle"))) return true;
 		if (element?.parentElement && !["TD", "TR"].includes(element?.parentElement?.tagName)) return this.isHandleElement(element?.parentElement);
 		return false;
 	}
@@ -7169,7 +7187,7 @@ var ReorderableRow = class ReorderableRow extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ReorderableRow,
 		deps: null,
@@ -7177,7 +7195,7 @@ var ReorderableRow = class ReorderableRow extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: ReorderableRow,
 		isStandalone: true,
 		selector: "[pReorderableRow]",
@@ -7205,7 +7223,7 @@ var ReorderableRow = class ReorderableRow extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ReorderableRow,
 	decorators: [{
@@ -7248,7 +7266,7 @@ var InitEditableRow = class InitEditableRow extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: InitEditableRow,
 		deps: null,
@@ -7256,13 +7274,13 @@ var InitEditableRow = class InitEditableRow extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: InitEditableRow,
 		isStandalone: true,
 		selector: "[pInitEditableRow]",
 		host: {
 			listeners: { "click": "onClick($event)" },
-			classAttribute: "p-datatable-row-editor-init"
+			properties: { "class": "pcn('p-datatable-row-editor-init')" }
 		},
 		usesInheritance: true,
 		ngImport: i0
@@ -7270,7 +7288,7 @@ var InitEditableRow = class InitEditableRow extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: InitEditableRow,
 	decorators: [{
@@ -7278,7 +7296,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "[pInitEditableRow]",
 			standalone: true,
-			host: { class: "p-datatable-row-editor-init" }
+			host: { "[class]": "pcn('p-datatable-row-editor-init')" }
 		}]
 	}],
 	propDecorators: { onClick: [{
@@ -7297,7 +7315,7 @@ var SaveEditableRow = class SaveEditableRow extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: SaveEditableRow,
 		deps: null,
@@ -7305,7 +7323,7 @@ var SaveEditableRow = class SaveEditableRow extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: SaveEditableRow,
 		isStandalone: true,
 		selector: "[pSaveEditableRow]",
@@ -7320,7 +7338,7 @@ var SaveEditableRow = class SaveEditableRow extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SaveEditableRow,
 	decorators: [{
@@ -7347,7 +7365,7 @@ var CancelEditableRow = class CancelEditableRow extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: CancelEditableRow,
 		deps: null,
@@ -7355,7 +7373,7 @@ var CancelEditableRow = class CancelEditableRow extends BaseComponent {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: CancelEditableRow,
 		isStandalone: true,
 		selector: "[pCancelEditableRow]",
@@ -7370,7 +7388,7 @@ var CancelEditableRow = class CancelEditableRow extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: CancelEditableRow,
 	decorators: [{
@@ -7396,6 +7414,7 @@ var SortIcon = class SortIcon extends BaseComponent {
 		super();
 		this.dataTable.tableService.sortSource$.pipe(takeUntilDestroyed()).subscribe(() => {
 			this.updateSortState();
+			this.cd.markForCheck();
 		});
 	}
 	onInit() {
@@ -7432,7 +7451,7 @@ var SortIcon = class SortIcon extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: SortIcon,
 		deps: [],
@@ -7440,7 +7459,7 @@ var SortIcon = class SortIcon extends BaseComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: SortIcon,
 		isStandalone: true,
 		selector: "p-sort-icon, p-sorticon",
@@ -7525,7 +7544,7 @@ var SortIcon = class SortIcon extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: SortIcon,
 	decorators: [{
@@ -7593,7 +7612,7 @@ var CellEditor = class CellEditor extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: CellEditor,
 		deps: null,
@@ -7601,7 +7620,7 @@ var CellEditor = class CellEditor extends BaseComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: CellEditor,
 		isStandalone: true,
 		selector: "p-cell-editor, p-celleditor",
@@ -7642,7 +7661,7 @@ var CellEditor = class CellEditor extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: CellEditor,
 	decorators: [{
@@ -7723,7 +7742,7 @@ var TableRadioButton = class TableRadioButton extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableRadioButton,
 		deps: [],
@@ -7731,7 +7750,7 @@ var TableRadioButton = class TableRadioButton extends BaseComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.2.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: TableRadioButton,
 		isStandalone: true,
 		selector: "p-table-radio-button, p-tableradiobutton",
@@ -7857,7 +7876,7 @@ var TableRadioButton = class TableRadioButton extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: TableRadioButton,
 	decorators: [{
@@ -7989,7 +8008,7 @@ var TableCheckbox = class TableCheckbox extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableCheckbox,
 		deps: [],
@@ -7997,7 +8016,7 @@ var TableCheckbox = class TableCheckbox extends BaseComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: TableCheckbox,
 		isStandalone: true,
 		selector: "p-table-checkbox, p-tablecheckbox",
@@ -8067,7 +8086,7 @@ var TableCheckbox = class TableCheckbox extends BaseComponent {
             [ariaLabel]="resolvedAriaLabel()"
             [unstyled]="unstyled()"
         >
-            @if (dataTable.checkboxIconTemplate(); as template) {
+            @if (dataTable.$checkboxIconTemplate(); as template) {
                 <ng-template #icon>
                     <ng-template *ngTemplateOutlet="template; context: { $implicit: checked() }" />
                 </ng-template>
@@ -8154,7 +8173,7 @@ var TableCheckbox = class TableCheckbox extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: TableCheckbox,
 	decorators: [{
@@ -8180,7 +8199,7 @@ i0.ɵɵngDeclareClassMetadata({
             [ariaLabel]="resolvedAriaLabel()"
             [unstyled]="unstyled()"
         >
-            @if (dataTable.checkboxIconTemplate(); as template) {
+            @if (dataTable.$checkboxIconTemplate(); as template) {
                 <ng-template #icon>
                     <ng-template *ngTemplateOutlet="template; context: { $implicit: checked() }" />
                 </ng-template>
@@ -8308,7 +8327,7 @@ var TableHeaderCheckbox = class TableHeaderCheckbox extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableHeaderCheckbox,
 		deps: [],
@@ -8316,7 +8335,7 @@ var TableHeaderCheckbox = class TableHeaderCheckbox extends BaseComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: TableHeaderCheckbox,
 		isStandalone: true,
 		selector: "p-table-header-checkbox, p-tableheadercheckbox",
@@ -8436,7 +8455,7 @@ var TableHeaderCheckbox = class TableHeaderCheckbox extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: TableHeaderCheckbox,
 	decorators: [{
@@ -8586,7 +8605,7 @@ var ColumnFilterFormElement = class ColumnFilterFormElement extends BaseComponen
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ColumnFilterFormElement,
 		deps: [],
@@ -8594,7 +8613,7 @@ var ColumnFilterFormElement = class ColumnFilterFormElement extends BaseComponen
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: ColumnFilterFormElement,
 		isStandalone: true,
 		selector: "p-column-filter-form-element, p-columnfilterformelement",
@@ -8992,7 +9011,7 @@ var ColumnFilterFormElement = class ColumnFilterFormElement extends BaseComponen
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ColumnFilterFormElement,
 	decorators: [{
@@ -9420,7 +9439,7 @@ var ColumnFilter = class ColumnFilter extends BaseComponent {
 		return { context: { highlighted: matchMode && this.isRowMatchModeSelected(matchMode.value) } };
 	}
 	onInit() {
-		this.overlayId = UniqueComponentId();
+		this.overlayId = this.$useId.next("pn_id_");
 		if (!this.dataTable.filters[this.field()]) this.initFieldFilterConstraint();
 		this.generateMatchModeOptions();
 		this.generateOperatorOptions();
@@ -9560,7 +9579,7 @@ var ColumnFilter = class ColumnFilter extends BaseComponent {
 		this.overlay = event.element;
 		if (this.overlay && this.overlay.parentElement !== this.document.body) {
 			const buttonEl = findSingle(this.el.nativeElement, "[data-pc-name=\"pccolumnfilterbutton\"]");
-			appendChild(this.document.body, this.overlay);
+			appendChild(this.$overlayParent(this.document.body, this.overlay), this.overlay);
 			addStyle(this.overlay, {
 				position: "absolute",
 				top: "0"
@@ -9626,14 +9645,16 @@ var ColumnFilter = class ColumnFilter extends BaseComponent {
 		return this.filterApplied;
 	}
 	isOutsideClicked(event) {
-		return !(findSingle(this.overlay.nextElementSibling, "[data-pc-section=\"filteroverlay\"]") || findSingle(this.overlay.nextElementSibling, "[data-pc-name=\"popover\"]") || this.overlay?.isSameNode(event.target) || this.overlay?.contains(event.target) || this.icon()?.nativeElement.isSameNode(event.target) || this.icon()?.nativeElement.contains(event.target) || findSingle(event.target, "[data-pc-name=\"pcaddrulebuttonlabel\"]") || findSingle(event.target.parentElement, "[data-pc-name=\"pcaddrulebuttonlabel\"]") || findSingle(event.target, "[data-pc-name=\"pcfilterremoverulebutton\"]") || findSingle(event.target.parentElement, "[data-pc-name=\"pcfilterremoverulebutton\"]"));
+		const node = getEventTarget(event, this.el?.nativeElement);
+		const overlayNode = getEventTarget(event, this.overlay);
+		return !(findSingle(this.overlay.nextElementSibling, "[data-pc-section=\"filteroverlay\"]") || findSingle(this.overlay.nextElementSibling, "[data-pc-name=\"popover\"]") || this.overlay?.isSameNode(overlayNode) || this.overlay?.contains(overlayNode) || this.icon()?.nativeElement.isSameNode(node) || this.icon()?.nativeElement.contains(node) || findSingle(overlayNode, "[data-pc-name=\"pcaddrulebuttonlabel\"]") || findSingle(overlayNode.parentElement, "[data-pc-name=\"pcaddrulebuttonlabel\"]") || findSingle(overlayNode, "[data-pc-name=\"pcfilterremoverulebutton\"]") || findSingle(overlayNode.parentElement, "[data-pc-name=\"pcfilterremoverulebutton\"]"));
 	}
 	bindDocumentClickListener() {
 		if (!this.documentClickListener) {
 			const documentTarget = this.el ? this.el.nativeElement.ownerDocument : "document";
 			this.documentClickListener = this.renderer.listen(documentTarget, "mousedown", (event) => {
 				const dialogElements = document.querySelectorAll("[role=\"dialog\"]");
-				const targetIsColumnFilterMenuButton = event.target.closest("[data-pc-name=\"pccolumnfilterbutton\"]");
+				const targetIsColumnFilterMenuButton = getEventTarget(event, this.el?.nativeElement).closest("[data-pc-name=\"pccolumnfilterbutton\"]");
 				if (this.overlayVisible && this.isOutsideClicked(event) && (targetIsColumnFilterMenuButton || dialogElements?.length <= 1)) this.hide();
 				this.selfClick = false;
 			});
@@ -9698,7 +9719,7 @@ var ColumnFilter = class ColumnFilter extends BaseComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ColumnFilter,
 		deps: [],
@@ -9706,7 +9727,7 @@ var ColumnFilter = class ColumnFilter extends BaseComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: ColumnFilter,
 		isStandalone: true,
 		selector: "p-column-filter, p-columnfilter",
@@ -10035,7 +10056,7 @@ var ColumnFilter = class ColumnFilter extends BaseComponent {
                 <div
                     [pMotion]="showMenu() && overlayVisible"
                     [pMotionAppear]="true"
-                    pMotionName="p-anchored-overlay"
+                    [pMotionName]="pcn('p-anchored-overlay')"
                     (pMotionOnBeforeEnter)="onOverlayBeforeEnter($event)"
                     (pMotionOnAfterLeave)="onOverlayAnimationAfterLeave($event)"
                     [pMotionOptions]="computedMotionOptions()"
@@ -10055,9 +10076,8 @@ var ColumnFilter = class ColumnFilter extends BaseComponent {
                                     (click)="onRowMatchModeChange(matchMode.value)"
                                     (keydown)="onRowMatchModeKeyDown($event)"
                                     (keydown.enter)="onRowMatchModeChange(matchMode.value)"
-                                    [class]="cx('filterConstraint')"
+                                    [class]="cn(cx('filterConstraint'), isRowMatchModeSelected(matchMode.value) ? pcn('p-datatable-filter-constraint-selected') : undefined)"
                                     [pBind]="ptm('filterConstraint', ptmFilterConstraintOptions(matchMode))"
-                                    [class.p-datatable-filter-constraint-selected]="isRowMatchModeSelected(matchMode.value)"
                                     [attr.tabindex]="i === 0 ? '0' : null"
                                 >
                                     {{ matchMode.label }}
@@ -10284,6 +10304,9 @@ var ColumnFilter = class ColumnFilter extends BaseComponent {
 					"showClear",
 					"emptyFilterMessage",
 					"emptyMessage",
+					"filterMessage",
+					"selectionMessage",
+					"emptySelectionMessage",
 					"lazy",
 					"virtualScroll",
 					"virtualScrollItemSize",
@@ -10432,7 +10455,7 @@ var ColumnFilter = class ColumnFilter extends BaseComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ColumnFilter,
 	decorators: [{
@@ -10513,7 +10536,7 @@ i0.ɵɵngDeclareClassMetadata({
                 <div
                     [pMotion]="showMenu() && overlayVisible"
                     [pMotionAppear]="true"
-                    pMotionName="p-anchored-overlay"
+                    [pMotionName]="pcn('p-anchored-overlay')"
                     (pMotionOnBeforeEnter)="onOverlayBeforeEnter($event)"
                     (pMotionOnAfterLeave)="onOverlayAnimationAfterLeave($event)"
                     [pMotionOptions]="computedMotionOptions()"
@@ -10533,9 +10556,8 @@ i0.ɵɵngDeclareClassMetadata({
                                     (click)="onRowMatchModeChange(matchMode.value)"
                                     (keydown)="onRowMatchModeKeyDown($event)"
                                     (keydown.enter)="onRowMatchModeChange(matchMode.value)"
-                                    [class]="cx('filterConstraint')"
+                                    [class]="cn(cx('filterConstraint'), isRowMatchModeSelected(matchMode.value) ? pcn('p-datatable-filter-constraint-selected') : undefined)"
                                     [pBind]="ptm('filterConstraint', ptmFilterConstraintOptions(matchMode))"
-                                    [class.p-datatable-filter-constraint-selected]="isRowMatchModeSelected(matchMode.value)"
                                     [attr.tabindex]="i === 0 ? '0' : null"
                                 >
                                     {{ matchMode.label }}
@@ -10973,7 +10995,7 @@ i0.ɵɵngDeclareClassMetadata({
 var TableModule = class TableModule {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableModule,
 		deps: [],
@@ -10981,7 +11003,7 @@ var TableModule = class TableModule {
 	});
 	static ɵmod = i0.ɵɵngDeclareNgModule({
 		minVersion: "14.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableModule,
 		imports: [
@@ -11042,7 +11064,7 @@ var TableModule = class TableModule {
 	});
 	static ɵinj = i0.ɵɵngDeclareInjector({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: TableModule,
 		imports: [
@@ -11060,7 +11082,7 @@ var TableModule = class TableModule {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: TableModule,
 	decorators: [{
@@ -11127,4 +11149,3 @@ i0.ɵɵngDeclareClassMetadata({
 });
 export { COLUMN_FILTER_INSTANCE, CancelEditableRow, CellEditor, ColumnFilter, ColumnFilterFormElement, ContextMenuRow, EditableColumn, EditableRow, FrozenColumn, InitEditableRow, ReorderableColumn, ReorderableRow, ReorderableRowHandle, ResizableColumn, RowGroupHeader, RowToggler, SaveEditableRow, SelectableRow, SelectableRowDblClick, SortIcon, SortableColumn, TABLE_INSTANCE, Table, TableBody, TableCheckbox, TableClasses, TableHeaderCheckbox, TableModule, TableRadioButton, TableService, TableStyle };
 
-//# sourceMappingURL=primeng-table.mjs.map