primeng 18.0.0-beta.1 → 18.0.0-beta.3

package/fesm2022/primeng-table.mjs

@@ -9,8 +9,6 @@ import * as i3 from 'primeng/api';
 import { OverlayService, FilterService, FilterOperator, FilterMatchMode, PrimeTemplate, TranslationKeys, SharedModule } from 'primeng/api';
 import * as i9 from 'primeng/button';
 import { Button, ButtonModule } from 'primeng/button';
-import * as i11 from 'primeng/calendar';
-import { CalendarModule } from 'primeng/calendar';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
 import { ArrowDownIcon } from 'primeng/icons/arrowdown';
 import { ArrowUpIcon } from 'primeng/icons/arrowup';
@@ -42,6 +40,8 @@ import * as i6 from 'primeng/radiobutton';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import * as i8 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
+import * as i11 from 'primeng/datepicker';
+import { DatePickerModule } from 'primeng/datepicker';
 
 const theme = ({ dt }) => `
 .p-datatable {
@@ -630,36 +630,6 @@ p-datatable-gridlines .p-datatable-tbody > tr:last-child > td {
     outline: ${dt('datatable.row.toggle.button.focus.ring.width')} ${dt('datatable.row.toggle.button.focus.ring.style')} ${dt('datatable.row.toggle.button.focus.ring.color')};
     outline-offset: ${dt('datatable.row.toggle.button.focus.ring.offset')};
 }
-
-  .p-overlay-mask {
-    background-color: rgba(0, 0, 0, 0.4);
-    transition-duration: 0.2s;
-  }
-    
- .p-overlay-mask-enter {
-    animation: p-overlay-mask-enter-animation 150ms forwards;
-  }
-
-  .p-overlay-mask-leave {
-    animation: p-overlay-mask-leave-animation 150ms forwards;
-  }
-
-  @keyframes p-overlay-mask-enter-animation {
-    from {
-      background-color: transparent;
-    }
-    to {
-      background-color: var(--maskbg);
-    }
-  }
-  @keyframes p-overlay-mask-leave-animation {
-    from {
-      background-color: var(--maskbg);
-    }
-    to {
-      background-color: transparent;
-    }
-  }
 `;
 const classes = {
     root: ({ instance }) => ({
@@ -753,17 +723,221 @@ const inlineStyles = {
     thead: { position: 'sticky' },
     tfoot: { position: 'sticky' },
 };
-class DataTableStyle extends BaseStyle {
+class TableStyle extends BaseStyle {
     name = 'datatable';
     theme = theme;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DataTableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DataTableStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: DataTableStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableStyle, decorators: [{
             type: Injectable
         }] });
+/**
+ *
+ * DataTable displays data in tabular format.
+ *
+ * [Live Demo](https://www.primeng.org/table/)
+ *
+ * @module tablestyle
+ *
+ */
+var TableClasses;
+(function (TableClasses) {
+    /**
+     * Class name of the root element
+     */
+    TableClasses["root"] = "p-datatable";
+    /**
+     * Class name of the mask element
+     */
+    TableClasses["mask"] = "p-datatable-mask";
+    /**
+     * Class name of the loading icon element
+     */
+    TableClasses["loadingIcon"] = "p-datatable-loading-icon";
+    /**
+     * Class name of the header element
+     */
+    TableClasses["header"] = "p-datatable-header";
+    /**
+     * Class name of the paginator element
+     */
+    TableClasses["pcPaginator"] = "p-datatable-paginator-[position]";
+    /**
+     * Class name of the table container element
+     */
+    TableClasses["tableContainer"] = "p-datatable-table-container";
+    /**
+     * Class name of the table element
+     */
+    TableClasses["table"] = "p-datatable-table";
+    /**
+     * Class name of the thead element
+     */
+    TableClasses["thead"] = "p-datatable-thead";
+    /**
+     * Class name of the column resizer element
+     */
+    TableClasses["columnResizer"] = "p-datatable-column-resizer";
+    /**
+     * Class name of the column header content element
+     */
+    TableClasses["columnHeaderContent"] = "p-datatable-column-header-content";
+    /**
+     * Class name of the column title element
+     */
+    TableClasses["columnTitle"] = "p-datatable-column-title";
+    /**
+     * Class name of the sort icon element
+     */
+    TableClasses["sortIcon"] = "p-datatable-sort-icon";
+    /**
+     * Class name of the sort badge element
+     */
+    TableClasses["pcSortBadge"] = "p-datatable-sort-badge";
+    /**
+     * Class name of the filter element
+     */
+    TableClasses["filter"] = "p-datatable-filter";
+    /**
+     * Class name of the filter element container element
+     */
+    TableClasses["filterElementContainer"] = "p-datatable-filter-element-container";
+    /**
+     * Class name of the column filter button element
+     */
+    TableClasses["pcColumnFilterButton"] = "p-datatable-column-filter-button";
+    /**
+     * Class name of the column filter clear button element
+     */
+    TableClasses["pcColumnFilterClearButton"] = "p-datatable-column-filter-clear-button";
+    /**
+     * Class name of the filter overlay element
+     */
+    TableClasses["filterOverlay"] = "p-datatable-filter-overlay";
+    /**
+     * Class name of the filter constraint list element
+     */
+    TableClasses["filterConstraintList"] = "p-datatable-filter-constraint-list";
+    /**
+     * Class name of the filter constraint element
+     */
+    TableClasses["filterConstraint"] = "p-datatable-filter-constraint";
+    /**
+     * Class name of the filter constraint separator element
+     */
+    TableClasses["filterConstraintSeparator"] = "p-datatable-filter-constraint-separator";
+    /**
+     * Class name of the filter operator element
+     */
+    TableClasses["filterOperator"] = "p-datatable-filter-operator";
+    /**
+     * Class name of the filter operator dropdown element
+     */
+    TableClasses["pcFilterOperatorDropdown"] = "p-datatable-filter-operator-dropdown";
+    /**
+     * Class name of the filter rule list element
+     */
+    TableClasses["filterRuleList"] = "p-datatable-filter-rule-list";
+    /**
+     * Class name of the filter rule element
+     */
+    TableClasses["filterRule"] = "p-datatable-filter-rule";
+    /**
+     * Class name of the filter constraint dropdown element
+     */
+    TableClasses["pcFilterConstraintDropdown"] = "p-datatable-filter-constraint-dropdown";
+    /**
+     * Class name of the filter remove rule button element
+     */
+    TableClasses["pcFilterRemoveRuleButton"] = "p-datatable-filter-remove-rule-button";
+    /**
+     * Class name of the filter add rule button element
+     */
+    TableClasses["pcFilterAddRuleButton"] = "p-datatable-filter-add-rule-button";
+    /**
+     * Class name of the filter buttonbar element
+     */
+    TableClasses["filterButtonbar"] = "p-datatable-filter-buttonbar";
+    /**
+     * Class name of the filter clear button element
+     */
+    TableClasses["pcFilterClearButton"] = "p-datatable-filter-clear-button";
+    /**
+     * Class name of the filter apply button element
+     */
+    TableClasses["pcFilterApplyButton"] = "p-datatable-filter-apply-button";
+    /**
+     * Class name of the tbody element
+     */
+    TableClasses["tbody"] = "p-datatable-tbody";
+    /**
+     * Class name of the row group header element
+     */
+    TableClasses["rowGroupHeader"] = "p-datatable-row-group-header";
+    /**
+     * Class name of the row toggle button element
+     */
+    TableClasses["rowToggleButton"] = "p-datatable-row-toggle-button";
+    /**
+     * Class name of the row toggle icon element
+     */
+    TableClasses["rowToggleIcon"] = "p-datatable-row-toggle-icon";
+    /**
+     * Class name of the row expansion element
+     */
+    TableClasses["rowExpansion"] = "p-datatable-row-expansion";
+    /**
+     * Class name of the row group footer element
+     */
+    TableClasses["rowGroupFooter"] = "p-datatable-row-group-footer";
+    /**
+     * Class name of the empty message element
+     */
+    TableClasses["emptyMessage"] = "p-datatable-empty-message";
+    /**
+     * Class name of the reorderable row handle element
+     */
+    TableClasses["reorderableRowHandle"] = "p-datatable-reorderable-row-handle";
+    /**
+     * Class name of the row editor init element
+     */
+    TableClasses["pcRowEditorInit"] = "p-datatable-row-editor-init";
+    /**
+     * Class name of the row editor save element
+     */
+    TableClasses["pcRowEditorSave"] = "p-datatable-row-editor-save";
+    /**
+     * Class name of the row editor cancel element
+     */
+    TableClasses["pcRowEditorCancel"] = "p-datatable-row-editor-cancel";
+    /**
+     * Class name of the tfoot element
+     */
+    TableClasses["tfoot"] = "p-datatable-tfoot";
+    /**
+     * Class name of the virtual scroller spacer element
+     */
+    TableClasses["virtualScrollerSpacer"] = "p-datatable-virtualscroller-spacer";
+    /**
+     * Class name of the footer element
+     */
+    TableClasses["footer"] = "p-datatable-footer";
+    /**
+     * Class name of the column resize indicator element
+     */
+    TableClasses["columnResizeIndicator"] = "p-datatable-column-resize-indicator";
+    /**
+     * Class name of the row reorder indicator up element
+     */
+    TableClasses["rowReorderIndicatorUp"] = "p-datatable-row-reorder-indicator-up";
+    /**
+     * Class name of the row reorder indicator down element
+     */
+    TableClasses["rowReorderIndicatorDown"] = "p-datatable-row-reorder-indicator-down";
+})(TableClasses || (TableClasses = {}));
 
 class TableService {
     sortSource = new Subject();
@@ -1550,7 +1724,7 @@ class Table extends BaseComponent {
     filterService = inject(FilterService);
     tableService = inject(TableService);
     zone = inject(NgZone);
-    _componentStyle = inject(DataTableStyle);
+    _componentStyle = inject(TableStyle);
     ngOnInit() {
         super.ngOnInit();
         if (this.lazy && this.lazyLoadOnInit) {
@@ -3310,7 +3484,7 @@ class Table extends BaseComponent {
         super.ngOnDestroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: Table, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: Table, selector: "p-table", inputs: { frozenColumns: "frozenColumns", frozenValue: "frozenValue", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: ["paginator", "paginator", booleanAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: ["showJumpToPageInput", "showJumpToPageInput", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], selectionMode: "selectionMode", selectionPageOnly: ["selectionPageOnly", "selectionPageOnly", booleanAttribute], contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], rowSelectable: "rowSelectable", rowTrackBy: "rowTrackBy", lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: ["scrollable", "scrollable", booleanAttribute], scrollDirection: "scrollDirection", rowGroupMode: "rowGroupMode", scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", responsive: "responsive", contextMenu: "contextMenu", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], rowHover: ["rowHover", "rowHover", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], showInitialSortBadge: ["showInitialSortBadge", "showInitialSortBadge", booleanAttribute], autoLayout: ["autoLayout", "autoLayout", booleanAttribute], exportFunction: "exportFunction", exportHeader: "exportHeader", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", groupRowsBy: "groupRowsBy", size: "size", showGridlines: ["showGridlines", "showGridlines", booleanAttribute], stripedRows: ["stripedRows", "stripedRows", booleanAttribute], groupRowsByOrder: ["groupRowsByOrder", "groupRowsByOrder", numberAttribute], responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", paginatorLocale: "paginatorLocale", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", virtualRowHeight: "virtualRowHeight", selectAll: "selectAll" }, outputs: { contextMenuSelectionChange: "contextMenuSelectionChange", selectAllChange: "selectAllChange", selectionChange: "selectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onPage: "onPage", onSort: "onSort", onFilter: "onFilter", onLazyLoad: "onLazyLoad", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onContextMenuSelect: "onContextMenuSelect", onColResize: "onColResize", onColReorder: "onColReorder", onRowReorder: "onRowReorder", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", sortFunction: "sortFunction", firstChange: "firstChange", rowsChange: "rowsChange", onStateSave: "onStateSave", onStateRestore: "onStateRestore" }, providers: [TableService, DataTableStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableHeaderViewChild", first: true, predicate: ["thead"], descendants: true }, { propertyName: "tableFooterViewChild", first: true, predicate: ["tfoot"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: Table, selector: "p-table", inputs: { frozenColumns: "frozenColumns", frozenValue: "frozenValue", style: "style", styleClass: "styleClass", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", paginator: ["paginator", "paginator", booleanAttribute], pageLinks: ["pageLinks", "pageLinks", numberAttribute], rowsPerPageOptions: "rowsPerPageOptions", alwaysShowPaginator: ["alwaysShowPaginator", "alwaysShowPaginator", booleanAttribute], paginatorPosition: "paginatorPosition", paginatorStyleClass: "paginatorStyleClass", paginatorDropdownAppendTo: "paginatorDropdownAppendTo", paginatorDropdownScrollHeight: "paginatorDropdownScrollHeight", currentPageReportTemplate: "currentPageReportTemplate", showCurrentPageReport: ["showCurrentPageReport", "showCurrentPageReport", booleanAttribute], showJumpToPageDropdown: ["showJumpToPageDropdown", "showJumpToPageDropdown", booleanAttribute], showJumpToPageInput: ["showJumpToPageInput", "showJumpToPageInput", booleanAttribute], showFirstLastIcon: ["showFirstLastIcon", "showFirstLastIcon", booleanAttribute], showPageLinks: ["showPageLinks", "showPageLinks", booleanAttribute], defaultSortOrder: ["defaultSortOrder", "defaultSortOrder", numberAttribute], sortMode: "sortMode", resetPageOnSort: ["resetPageOnSort", "resetPageOnSort", booleanAttribute], selectionMode: "selectionMode", selectionPageOnly: ["selectionPageOnly", "selectionPageOnly", booleanAttribute], contextMenuSelection: "contextMenuSelection", contextMenuSelectionMode: "contextMenuSelectionMode", dataKey: "dataKey", metaKeySelection: ["metaKeySelection", "metaKeySelection", booleanAttribute], rowSelectable: "rowSelectable", rowTrackBy: "rowTrackBy", lazy: ["lazy", "lazy", booleanAttribute], lazyLoadOnInit: ["lazyLoadOnInit", "lazyLoadOnInit", booleanAttribute], compareSelectionBy: "compareSelectionBy", csvSeparator: "csvSeparator", exportFilename: "exportFilename", filters: "filters", globalFilterFields: "globalFilterFields", filterDelay: ["filterDelay", "filterDelay", numberAttribute], filterLocale: "filterLocale", expandedRowKeys: "expandedRowKeys", editingRowKeys: "editingRowKeys", rowExpandMode: "rowExpandMode", scrollable: ["scrollable", "scrollable", booleanAttribute], scrollDirection: "scrollDirection", rowGroupMode: "rowGroupMode", scrollHeight: "scrollHeight", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], virtualScrollItemSize: ["virtualScrollItemSize", "virtualScrollItemSize", numberAttribute], virtualScrollOptions: "virtualScrollOptions", virtualScrollDelay: ["virtualScrollDelay", "virtualScrollDelay", numberAttribute], frozenWidth: "frozenWidth", responsive: "responsive", contextMenu: "contextMenu", resizableColumns: ["resizableColumns", "resizableColumns", booleanAttribute], columnResizeMode: "columnResizeMode", reorderableColumns: ["reorderableColumns", "reorderableColumns", booleanAttribute], loading: ["loading", "loading", booleanAttribute], loadingIcon: "loadingIcon", showLoader: ["showLoader", "showLoader", booleanAttribute], rowHover: ["rowHover", "rowHover", booleanAttribute], customSort: ["customSort", "customSort", booleanAttribute], showInitialSortBadge: ["showInitialSortBadge", "showInitialSortBadge", booleanAttribute], autoLayout: ["autoLayout", "autoLayout", booleanAttribute], exportFunction: "exportFunction", exportHeader: "exportHeader", stateKey: "stateKey", stateStorage: "stateStorage", editMode: "editMode", groupRowsBy: "groupRowsBy", size: "size", showGridlines: ["showGridlines", "showGridlines", booleanAttribute], stripedRows: ["stripedRows", "stripedRows", booleanAttribute], groupRowsByOrder: ["groupRowsByOrder", "groupRowsByOrder", numberAttribute], responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", paginatorLocale: "paginatorLocale", value: "value", columns: "columns", first: "first", rows: "rows", totalRecords: "totalRecords", sortField: "sortField", sortOrder: "sortOrder", multiSortMeta: "multiSortMeta", selection: "selection", virtualRowHeight: "virtualRowHeight", selectAll: "selectAll" }, outputs: { contextMenuSelectionChange: "contextMenuSelectionChange", selectAllChange: "selectAllChange", selectionChange: "selectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect", onPage: "onPage", onSort: "onSort", onFilter: "onFilter", onLazyLoad: "onLazyLoad", onRowExpand: "onRowExpand", onRowCollapse: "onRowCollapse", onContextMenuSelect: "onContextMenuSelect", onColResize: "onColResize", onColReorder: "onColReorder", onRowReorder: "onRowReorder", onEditInit: "onEditInit", onEditComplete: "onEditComplete", onEditCancel: "onEditCancel", onHeaderCheckboxToggle: "onHeaderCheckboxToggle", sortFunction: "sortFunction", firstChange: "firstChange", rowsChange: "rowsChange", onStateSave: "onStateSave", onStateRestore: "onStateRestore" }, providers: [TableService, TableStyle], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "resizeHelperViewChild", first: true, predicate: ["resizeHelper"], descendants: true }, { propertyName: "reorderIndicatorUpViewChild", first: true, predicate: ["reorderIndicatorUp"], descendants: true }, { propertyName: "reorderIndicatorDownViewChild", first: true, predicate: ["reorderIndicatorDown"], descendants: true }, { propertyName: "wrapperViewChild", first: true, predicate: ["wrapper"], descendants: true }, { propertyName: "tableViewChild", first: true, predicate: ["table"], descendants: true }, { propertyName: "tableHeaderViewChild", first: true, predicate: ["thead"], descendants: true }, { propertyName: "tableFooterViewChild", first: true, predicate: ["tfoot"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <div #container [ngStyle]="style" [class]="styleClass" [ngClass]="cx('root')" [attr.id]="id">
             <div [ngClass]="cx('mask')" *ngIf="loading && showLoader">
                 <i *ngIf="loadingIcon" [class]="'p-datatable-loading-icon ' + loadingIcon"></i>
@@ -3465,15 +3639,17 @@ class Table extends BaseComponent {
                             "
                             [ngClass]="cx('virtualScrollerSpacer')"
                         ></tbody>
-                        <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate" #tfoot [ngClass]="cx('footer')">
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    footerGroupedTemplate || footerTemplate;
-                                    context: {
-                                        $implicit: scrollerOptions.columns,
-                                    }
-                                "
-                            ></ng-container>
+                        <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate" #tfoot>
+                            <div class="p-datatable-footer">
+                                <ng-container
+                                    *ngTemplateOutlet="
+                                        footerGroupedTemplate || footerTemplate;
+                                        context: {
+                                            $implicit: scrollerOptions.columns,
+                                        }
+                                    "
+                                ></ng-container>
+                            </div>
                         </tfoot>
                     </table>
                 </ng-template>
@@ -3698,15 +3874,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                             "
                             [ngClass]="cx('virtualScrollerSpacer')"
                         ></tbody>
-                        <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate" #tfoot [ngClass]="cx('footer')">
-                            <ng-container
-                                *ngTemplateOutlet="
-                                    footerGroupedTemplate || footerTemplate;
-                                    context: {
-                                        $implicit: scrollerOptions.columns,
-                                    }
-                                "
-                            ></ng-container>
+                        <tfoot role="rowgroup" *ngIf="footerGroupedTemplate || footerTemplate" #tfoot>
+                            <div class="p-datatable-footer">
+                                <ng-container
+                                    *ngTemplateOutlet="
+                                        footerGroupedTemplate || footerTemplate;
+                                        context: {
+                                            $implicit: scrollerOptions.columns,
+                                        }
+                                    "
+                                ></ng-container>
+                            </div>
                         </tfoot>
                     </table>
                 </ng-template>
@@ -3771,7 +3949,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
             </span>
         </div>
     `,
-                    providers: [TableService, DataTableStyle],
+                    providers: [TableService, TableStyle],
                     changeDetection: ChangeDetectionStrategy.Default,
                     encapsulation: ViewEncapsulation.None,
                 }]
@@ -6033,7 +6211,7 @@ class TableRadioButton {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableRadioButton, deps: [{ token: Table }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.2", type: TableRadioButton, selector: "p-tableRadioButton", inputs: { disabled: ["disabled", "disabled", booleanAttribute], value: "value", index: ["index", "index", numberAttribute], inputId: "inputId", name: "name", ariaLabel: "ariaLabel" }, viewQueries: [{ propertyName: "inputViewChild", first: true, predicate: ["rb"], descendants: true }], ngImport: i0, template: `
-        <p-radioButton
+        <p-radiobutton
             #rb
             [(ngModel)]="checked"
             [disabled]="disabled"
@@ -6044,14 +6222,14 @@ class TableRadioButton {
             [value]="value"
             (onClick)="onClick($event)"
         />
-    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.RadioButton, selector: "p-radioButton, p-radiobutton", inputs: ["value", "formControlName", "name", "disabled", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "autofocus", "binary"], outputs: ["onClick", "onFocus", "onBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableRadioButton, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-tableRadioButton',
                     template: `
-        <p-radioButton
+        <p-radiobutton
             #rb
             [(ngModel)]="checked"
             [disabled]="disabled"
@@ -7587,7 +7765,7 @@ class ColumnFilterFormElement {
                     (keydown.enter)="onTextInputEnterKeyDown($event)"
                     [attr.placeholder]="placeholder"
                 />
-                <p-inputNumber
+                <p-inputnumber
                     *ngSwitchCase="'numeric'"
                     [ngModel]="filterConstraint?.value"
                     (ngModelChange)="onModelChange($event)"
@@ -7605,7 +7783,7 @@ class ColumnFilterFormElement {
                     [currency]="currency"
                     [currencyDisplay]="currencyDisplay"
                     [useGrouping]="useGrouping"
-                ></p-inputNumber>
+                ></p-inputnumber>
                 <p-checkbox
                     [indeterminate]="true"
                     [binary]="true"
@@ -7614,17 +7792,17 @@ class ColumnFilterFormElement {
                     (ngModelChange)="onModelChange($event)"
                 />
 
-                <p-calendar
+                <p-datepicker
                     [ariaLabel]="ariaLabel"
                     *ngSwitchCase="'date'"
                     [placeholder]="placeholder"
                     [ngModel]="filterConstraint?.value"
                     (ngModelChange)="onModelChange($event)"
                     appendTo="body"
-                ></p-calendar>
+                ></p-datepicker>
             </ng-container>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]", inputs: ["variant", "fluid"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i12.InputNumber, selector: "p-inputNumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i7.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i10.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "size"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i11.DatePicker, selector: "p-datePicker, p-datepicker", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "fluid", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i12.InputNumber, selector: "p-inputNumber, p-inputnumber", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "style", "placeholder", "size", "maxlength", "tabindex", "title", "ariaLabelledBy", "ariaLabel", "ariaRequired", "name", "required", "autocomplete", "min", "max", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "step", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "variant", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus", "disabled", "fluid"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "component", type: i7.Checkbox, selector: "p-checkbox", inputs: ["value", "name", "disabled", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "style", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "required", "autofocus", "trueValue", "falseValue", "variant"], outputs: ["onChange", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: ColumnFilterFormElement, decorators: [{
             type: Component,
@@ -7668,7 +7846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     (keydown.enter)="onTextInputEnterKeyDown($event)"
                     [attr.placeholder]="placeholder"
                 />
-                <p-inputNumber
+                <p-inputnumber
                     *ngSwitchCase="'numeric'"
                     [ngModel]="filterConstraint?.value"
                     (ngModelChange)="onModelChange($event)"
@@ -7686,7 +7864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     [currency]="currency"
                     [currencyDisplay]="currencyDisplay"
                     [useGrouping]="useGrouping"
-                ></p-inputNumber>
+                ></p-inputnumber>
                 <p-checkbox
                     [indeterminate]="true"
                     [binary]="true"
@@ -7695,14 +7873,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                     (ngModelChange)="onModelChange($event)"
                 />
 
-                <p-calendar
+                <p-datepicker
                     [ariaLabel]="ariaLabel"
                     *ngSwitchCase="'date'"
                     [placeholder]="placeholder"
                     [ngModel]="filterConstraint?.value"
                     (ngModelChange)="onModelChange($event)"
                     appendTo="body"
-                ></p-calendar>
+                ></p-datepicker>
             </ng-container>
         </ng-template>
     `,
@@ -7751,7 +7929,7 @@ class TableModule {
             FormsModule,
             ButtonModule,
             SelectButtonModule,
-            CalendarModule,
+            DatePickerModule,
             InputNumberModule,
             CheckboxModule,
             ScrollerModule,
@@ -7767,14 +7945,14 @@ class TableModule {
             PlusIcon,
             TrashIcon,
             RadioButtonModule], exports: [Table, SharedModule, SortableColumn, FrozenColumn, RowGroupHeader, SelectableRow, RowToggler, ContextMenuRow, ResizableColumn, ReorderableColumn, EditableColumn, CellEditor, SortIcon, TableRadioButton, TableCheckbox, TableHeaderCheckbox, ReorderableRowHandle, ReorderableRow, SelectableRowDblClick, EditableRow, InitEditableRow, SaveEditableRow, CancelEditableRow, ColumnFilter, ColumnFilterFormElement, ScrollerModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableModule, providers: [DataTableStyle], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.2", ngImport: i0, type: TableModule, providers: [TableStyle], imports: [CommonModule,
             PaginatorModule,
             InputTextModule,
             SelectModule,
             FormsModule,
             ButtonModule,
             SelectButtonModule,
-            CalendarModule,
+            DatePickerModule,
             InputNumberModule,
             CheckboxModule,
             ScrollerModule,
@@ -7803,7 +7981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         FormsModule,
                         ButtonModule,
                         SelectButtonModule,
-                        CalendarModule,
+                        DatePickerModule,
                         InputNumberModule,
                         CheckboxModule,
                         ScrollerModule,
@@ -7875,7 +8053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
                         ColumnFilter,
                         ColumnFilterFormElement,
                     ],
-                    providers: [DataTableStyle],
+                    providers: [TableStyle],
                 }]
         }] });
 
@@ -7883,5 +8061,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.2", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CancelEditableRow, CellEditor, ColumnFilter, ColumnFilterFormElement, ContextMenuRow, EditableColumn, EditableRow, FrozenColumn, InitEditableRow, ReorderableColumn, ReorderableRow, ReorderableRowHandle, ResizableColumn, RowGroupHeader, RowToggler, SaveEditableRow, SelectableRow, SelectableRowDblClick, SortIcon, SortableColumn, Table, TableBody, TableCheckbox, TableHeaderCheckbox, TableModule, TableRadioButton, TableService };
+export { CancelEditableRow, CellEditor, ColumnFilter, ColumnFilterFormElement, ContextMenuRow, EditableColumn, EditableRow, FrozenColumn, InitEditableRow, ReorderableColumn, ReorderableRow, ReorderableRowHandle, ResizableColumn, RowGroupHeader, RowToggler, SaveEditableRow, SelectableRow, SelectableRowDblClick, SortIcon, SortableColumn, Table, TableBody, TableCheckbox, TableClasses, TableHeaderCheckbox, TableModule, TableRadioButton, TableService, TableStyle };
 //# sourceMappingURL=primeng-table.mjs.map