@progress/kendo-angular-grid 13.2.0 → 13.2.1-develop.10

package/fesm2020/progress-kendo-angular-grid.mjs

@@ -659,6 +659,20 @@ class NavigationCursor {
         this.virtualCol = 0;
         this.virtualRow = 0;
     }
+    set metadata(value) {
+        this._metadata = value;
+        if (isPresent(value)) {
+            const newActiveCol = value.hasDetailTemplate ? 1 : 0;
+            const shouldChange = this.activeRow < value.headerRows && this.activeCol === 0;
+            if (shouldChange && newActiveCol !== this.activeCol) {
+                this.activeCol = newActiveCol;
+                this.reset();
+            }
+        }
+    }
+    get metadata() {
+        return this._metadata;
+    }
     get row() {
         return this.model.findRow(this.activeRow);
     }
@@ -770,6 +784,10 @@ class NavigationCursor {
         if (!cell && this.metadata.virtualColumns) {
             return this.activate(nextRowIndex, nextColIndex);
         }
+        if (!cell && this.metadata.hasDetailTemplate) {
+            this.virtualCol += 1;
+            return false;
+        }
         if (cell.colSpan > 1 && cell.colIndex <= virtualCol && virtualCol < cell.colIndex + cell.colSpan) {
             nextColIndex = offset > 0 ? Math.min(cell.colIndex + cell.colSpan, lastIndex) : Math.max(0, cell.colIndex + offset);
             const nextCell = this.model.findCell(nextColIndex, prevRow);
@@ -802,6 +820,9 @@ class NavigationCursor {
             if (nextRow) {
                 // remove duplication
                 let cell = this.model.findCell(this.virtualCol, nextRow);
+                if (!cell) {
+                    return;
+                }
                 if (cell.rowIndex <= this.virtualRow && offset > 0 && cell.rowSpan > 1) {
                     cell = this.model.findCell(this.virtualCol, this.model.findRow(cell.rowIndex + cell.rowSpan - 1 + offset));
                 }
@@ -820,7 +841,7 @@ class NavigationCursor {
             const nextPos = cell.rowIndex + cell.rowSpan - 1 + offset;
             cell = this.model.findCell(this.virtualCol, this.model.findRow(nextPos));
         }
-        if (!cell && this.metadata.virtualColumns) {
+        if (!cell && (this.metadata.virtualColumns || this.metadata.hasDetailTemplate)) {
             return this.activate(this.virtualRow + offset, this.virtualCol);
         }
         this.virtualRow = cell.rowIndex;
@@ -1508,7 +1529,7 @@ const targetCell = (target, gridElement) => {
     const cell = gridCell(target, gridElement);
     const row = closest(cell, matchesNodeName('tr'));
     if (cell && row) {
-        let rowIndex = row.getAttribute('aria-rowindex');
+        let rowIndex = row.getAttribute('aria-rowindex') || row.getAttribute('data-kendo-grid-row-index');
         rowIndex = rowIndex ? parseInt(rowIndex, 10) - 1 : null;
         let colIndex = cell.getAttribute('aria-colindex');
         colIndex = colIndex ? parseInt(colIndex, 10) - 1 : null;
@@ -1909,7 +1930,11 @@ class NavigationService {
                     }
                 }
                 else {
-                    this.cursor.reset(row.index, 0, false);
+                    let firstColumnIndex = 0;
+                    if (this.meta.hasDetailTemplate && row.index < this.meta.headerRows) {
+                        firstColumnIndex = 1;
+                    }
+                    this.cursor.reset(row.index, firstColumnIndex, false);
                 }
                 preventDefault = true;
                 break;
@@ -4397,8 +4422,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1689688777,
-    version: '13.2.0',
+    publishDate: 1690460595,
+    version: '13.2.1-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -5099,7 +5124,7 @@ const filterHierarchy = (list, predicate) => {
             }
         }
     });
-    return result;
+    return result.sort((a, b) => Number(b.locked) - Number(a.locked));
 };
 /**
  * @hidden
@@ -6037,17 +6062,17 @@ const updateClass = (element, valid, svg) => {
         const path = valid ? plusIcon.content : cancelIcon.content;
         icon.firstElementChild.innerHTML = path + icon.firstElementChild.innerHTML;
     }
-    icon.className = icon.className.replace(/(plus|cancel)/, valid ? 'plus' : 'cancel');
+    icon.setAttribute('class', icon.getAttribute('class').replace(/(plus|cancel)/, valid ? 'plus' : 'cancel'));
 };
 const updateLock = (element, locked = null, svg) => {
     const icon = element.querySelectorAll('.k-icon, .k-svg-icon')[1];
     const value = locked === null ? '' : (locked ? `k${svg ? '-svg' : ''}-i-lock` : `k${svg ? '-svg' : ''}-i-unlock`);
     if (svg) {
-        icon.className = icon.className.replace(/(k-svg-i-unlock|k-svg-i-lock)/, '').trim() + ` ${value}`;
+        icon.setAttribute('class', icon.getAttribute('class').replace(/(k-svg-i-unlock|k-svg-i-lock)/, '').trim() + ` ${value}`);
         icon.firstElementChild.innerHTML = locked ? lockIcon.content : unlockIcon.content;
     }
     else {
-        icon.className = icon.className.replace(/(k-i-unlock|k-i-lock)/, '').trim() + ` ${value}`;
+        icon.setAttribute('class', icon.getAttribute('class').replace(/(k-i-unlock|k-i-lock)/, '').trim() + ` ${value}`);
     }
 };
 const decorate = (element) => {
@@ -6063,15 +6088,15 @@ const svgIconsMarkup = (viewBox, content, safeTitle) => `
             viewBox="${viewBox}"
             aria-hidden="true">
             ${content}
-            <span class="k-svg-icon k-icon-modifier">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    viewBox="${viewBox}"
-                    aria-hidden="true">
-                </svg>
-            </span>
         </svg>
+        <span class="k-svg-icon k-icon-modifier">
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                viewBox="${viewBox}"
+                aria-hidden="true">
+            </svg>
+        </span>
     </span>
     ${safeTitle}`;
 const fontIconsMarkup = (safeTitle) => `
@@ -14320,6 +14345,10 @@ class FilterRowComponent {
         const columnName = column.title || column.field;
         return replaceMessagePlaceholder(localizationMsg, 'columnName', columnName);
     }
+    getLogicalColIndex(columnIndex) {
+        const colIndex = this.lockedColumnsCount + columnIndex;
+        return this.detailTemplate?.templateRef ? colIndex + 1 : colIndex;
+    }
 }
 FilterRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterRowComponent, deps: [{ token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
 FilterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: { columns: "columns", filter: "filter", groups: "groups", detailTemplate: "detailTemplate", logicalRowIndex: "logicalRowIndex", lockedColumnsCount: "lockedColumnsCount" }, host: { properties: { "class.k-filter-row": "this.filterRowClass" } }, ngImport: i0, template: `
@@ -14346,7 +14375,7 @@ FilterRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [filter]="filter"
             kendoGridLogicalCell
                 [logicalRowIndex]="logicalRowIndex"
-                [logicalColIndex]="lockedColumnsCount + columnIndex"
+                [logicalColIndex]="getLogicalColIndex(columnIndex)"
       ></td>
     `, isInline: true, components: [{ type: FilterCellComponent, selector: "[kendoGridFilterCell]", inputs: ["column", "filter", "size"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterRowComponent, decorators: [{
@@ -14377,7 +14406,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [filter]="filter"
             kendoGridLogicalCell
                 [logicalRowIndex]="logicalRowIndex"
-                [logicalColIndex]="lockedColumnsCount + columnIndex"
+                [logicalColIndex]="getLogicalColIndex(columnIndex)"
       ></td>
     `
                 }]
@@ -14419,16 +14448,35 @@ class LogicalRowDirective {
         return this.logicalSlaveRow ? 'presentation' : 'row';
     }
     get ariaRowIndex() {
-        return this.logicalRowIndex + 1;
+        return this.logicalSlaveRow ? null : this.logicalRowIndex + 1;
+    }
+    get rowIndex() {
+        return this.logicalSlaveRow ? this.logicalRowIndex + 1 : null;
     }
     get ariaOwns() {
-        if (!this.navigation.enabled || this.logicalSlaveRow || this.logicalSlaveCellsCount === 0) {
+        if (this.logicalSlaveRow || this.logicalSlaveCellsCount === 0) {
             return undefined;
         }
         const ids = [];
-        const total = this.logicalCellsCount + this.logicalSlaveCellsCount;
-        for (let cellIndex = this.logicalCellsCount; cellIndex < total; cellIndex++) {
-            ids.push(this.idService.cellId(this.logicalRowIndex, cellIndex));
+        if (this.dataRowIndex < 0) {
+            let total = this.logicalCellsCount + this.logicalSlaveCellsCount;
+            this.columnsArray.forEach(column => {
+                if (column.isSpanColumn) {
+                    total += column.colspan - 1;
+                }
+            });
+            for (let cellIndex = this.logicalCellsCount; cellIndex < total; cellIndex++) {
+                ids.push(this.idService.cellId(this.logicalRowIndex, cellIndex));
+            }
+        }
+        else {
+            let columnIndex = 0;
+            this.columnsArray.forEach(column => {
+                if (!column.isLocked) {
+                    ids.push(this.idService.cellId(this.logicalRowIndex, columnIndex));
+                }
+                columnIndex += column.isSpanColumn ? column.colspan : 1;
+            });
         }
         return ids.join(' ');
     }
@@ -14450,9 +14498,12 @@ class LogicalRowDirective {
     ngOnDestroy() {
         this.navigation.unregisterRow(this.logicalRowIndex, this);
     }
+    get columnsArray() {
+        return this.totalColumns?.allColumns.toArray() || [];
+    }
 }
 LogicalRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogicalRowDirective, deps: [{ token: IdService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Directive });
-LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "class.k-table-row": "this.tableRowClass", "attr.aria-owns": "this.ariaOwns" } }, usesOnChanges: true, ngImport: i0 });
+LogicalRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: { logicalRowIndex: "logicalRowIndex", logicalSlaveRow: "logicalSlaveRow", logicalCellsCount: "logicalCellsCount", logicalSlaveCellsCount: "logicalSlaveCellsCount", dataRowIndex: "dataRowIndex", dataItem: "dataItem", totalColumns: "totalColumns" }, host: { properties: { "attr.role": "this.hostRole", "attr.aria-rowindex": "this.ariaRowIndex", "attr.data-kendo-grid-row-index": "this.rowIndex", "class.k-table-row": "this.tableRowClass", "attr.aria-owns": "this.ariaOwns" } }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogicalRowDirective, decorators: [{
             type: Directive,
             args: [{
@@ -14470,12 +14521,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], dataItem: [{
                 type: Input
+            }], totalColumns: [{
+                type: Input
             }], hostRole: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], ariaRowIndex: [{
                 type: HostBinding,
                 args: ['attr.aria-rowindex']
+            }], rowIndex: [{
+                type: HostBinding,
+                args: ['attr.data-kendo-grid-row-index']
             }], tableRowClass: [{
                 type: HostBinding,
                 args: ['class.k-table-row']
@@ -15266,26 +15322,23 @@ class HeaderComponent {
     }
 }
 HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: SinglePopupService }, { token: DragHintService }, { token: DropCueService }, { token: ColumnReorderService }, { token: IdService }, { token: SortService }, { token: ColumnInfoService }, { token: i0.ChangeDetectorRef }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Component });
-HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeaderComponent, selector: "[kendoGridHeader]", inputs: { totalColumnLevels: "totalColumnLevels", columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", filterable: "filterable", sort: "sort", filter: "filter", sortable: "sortable", groupable: "groupable", lockedColumnsCount: "lockedColumnsCount", resizable: "resizable", reorderable: "reorderable", columnMenu: "columnMenu", columnMenuTemplate: "columnMenuTemplate", totalColumnsCount: "totalColumnsCount", totalColumns: "totalColumns", tabIndex: "tabIndex", size: "size" }, host: { properties: { "class.k-grid-header": "this.headerClass", "class.k-table-thead": "this.hostClass" } }, viewQueries: [{ propertyName: "dropTargets", predicate: DropTargetDirective, descendants: true }, { propertyName: "filterMenus", predicate: FilterMenuComponent, descendants: true }, { propertyName: "columnMenus", predicate: ColumnMenuComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <ng-container>
         <tr *ngFor="let i of columnLevels; let levelIndex = index"
             kendoGridLogicalRow
                 [logicalRowIndex]="levelIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [totalColumns]="totalColumns">
             <th
                 class="k-group-cell k-header k-table-th"
                 role="presentation"
                 *ngFor="let g of groups">
             </th>
             <th class="k-hierarchy-cell k-header k-table-th"
-                role="gridcell"
+                role="presentation"
                 *ngIf="detailTemplate?.templateRef"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="0"
-                    aria-selected="false"
             >
             </th>
             <ng-container *ngFor="let column of columnsForLevel(levelIndex); trackBy: trackByIndex; let columnIndex = index; let last = last;">
@@ -15489,9 +15542,10 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [totalColumns]="totalColumns"
         ></tr>
     </ng-container>
-    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -15503,19 +15557,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [logicalRowIndex]="levelIndex"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
+                [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [totalColumns]="totalColumns">
             <th
                 class="k-group-cell k-header k-table-th"
                 role="presentation"
                 *ngFor="let g of groups">
             </th>
             <th class="k-hierarchy-cell k-header k-table-th"
-                role="gridcell"
+                role="presentation"
                 *ngIf="detailTemplate?.templateRef"
-                kendoGridLogicalCell
-                    [logicalRowIndex]="levelIndex"
-                    [logicalColIndex]="0"
-                    aria-selected="false"
             >
             </th>
             <ng-container *ngFor="let column of columnsForLevel(levelIndex); trackBy: trackByIndex; let columnIndex = index; let last = last;">
@@ -15719,6 +15770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [totalColumns]="totalColumns"
         ></tr>
     </ng-container>
     `
@@ -15755,6 +15807,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], totalColumnsCount: [{
                 type: Input
+            }], totalColumns: [{
+                type: Input
             }], tabIndex: [{
                 type: Input
             }], size: [{
@@ -16774,8 +16828,17 @@ class TableBodyComponent {
         return this.editService.newDataItem;
     }
     // Number of unlocked columns in the next table, if any
-    get unlockedColumnsCount() {
-        return this.totalColumnsCount - this.lockedColumnsCount - (this.allColumns || this.columns).length;
+    unlockedColumnsCount(item) {
+        const allColumns = this.allColumns || this.columns;
+        let allColumnsCount = allColumns.length;
+        allColumns.forEach(column => {
+            if (column.isSpanColumn) {
+                allColumnsCount += column.colspan - 1;
+            }
+        });
+        const contentColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - allColumnsCount;
+        const headerFooterColumnsCount = this.totalColumnsCount - this.lockedColumnsCount - (this.allColumns || this.columns).length;
+        return item && this.isDataItem(item) ? contentColumnsCount : headerFooterColumnsCount;
     }
     isAriaSelected(item, column) {
         return this.cellSelectionService.isCellSelected(item, column) ||
@@ -17069,14 +17132,15 @@ class TableBodyComponent {
     }
 }
 TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: DetailsService }, { token: GroupsService }, { token: ChangeNotificationService }, { token: EditService }, { token: ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: DomEventsService }, { token: SelectionService }, { token: CellSelectionService }, { token: ColumnInfoService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
-TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", data: "data", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", showGroupFooters: "showGroupFooters", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
+TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: { columns: "columns", allColumns: "allColumns", groups: "groups", detailTemplate: "detailTemplate", noRecordsTemplate: "noRecordsTemplate", data: "data", skip: "skip", selectable: "selectable", filterable: "filterable", noRecordsText: "noRecordsText", isLocked: "isLocked", isLoading: "isLoading", isVirtual: "isVirtual", cellLoadingTemplate: "cellLoadingTemplate", skipGroupDecoration: "skipGroupDecoration", showGroupFooters: "showGroupFooters", lockedColumnsCount: "lockedColumnsCount", totalColumnsCount: "totalColumnsCount", virtualColumns: "virtualColumns", trackBy: "trackBy", rowSticky: "rowSticky", totalColumns: "totalColumns", rowClass: "rowClass" }, host: { properties: { "class.k-table-tbody": "this.hostClass" } }, usesOnChanges: true, ngImport: i0, template: `
     <ng-container *ngIf="editService.hasNewItem">
         <tr class="k-grid-add-row k-grid-edit-row k-master-row"
             kendoGridLogicalRow
                 [logicalRowIndex]="addRowLogicalIndex()"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
+                [logicalSlaveCellsCount]="unlockedColumnsCount()"
+                [totalColumns]="totalColumns">
             <ng-container *ngIf="!skipGroupDecoration">
                 <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
@@ -17138,6 +17202,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
+                [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
         </tr>
@@ -17148,14 +17213,15 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                 [dataItem]="item.data"
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
+                [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
             class="{{ isOdd(item) ?  'k-alt k-table-alt-row' : ''}}"
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
-            [attr.aria-selected]="isSelectable() && isRowSelected(item)"
+            [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable() && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable() && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
@@ -17200,7 +17266,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                     [colSpan]="column.colspan"
                     role="gridcell"
                     class="k-table-td"
-                    [attr.aria-selected]="isSelectable() ? isAriaSelected(item, column) : undefined"
+                    [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable() ? isAriaSelected(item, column) : undefined"
                     [class.k-grid-content-sticky]="column.sticky"
                     [class.k-touch-action-none]="isSelectable() && $any(selectable).drag"
                     [class.k-touch-action-auto]="!(isSelectable() && $any(selectable).drag)"
@@ -17257,8 +17323,9 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
+                [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
+                [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
             <ng-container *ngIf="!skipGroupDecoration">
                 <td class="k-group-cell" *ngFor="let g of groups"></td>
             </ng-container>
@@ -17290,7 +17357,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         </tr>
     </ng-container>
     <kendo-resize-sensor *ngIf="rowSticky" (resize)="resizeHandler()"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
             args: [{
@@ -17302,7 +17369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [logicalRowIndex]="addRowLogicalIndex()"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
+                [logicalSlaveCellsCount]="unlockedColumnsCount()"
+                [totalColumns]="totalColumns">
             <ng-container *ngIf="!skipGroupDecoration">
                 <td class="k-group-cell k-table-td" *ngFor="let g of groups" role="presentation"></td>
             </ng-container>
@@ -17364,6 +17432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
+                [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="groupHeaderSlaveCellsCount">
         </tr>
@@ -17374,14 +17443,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [dataItem]="item.data"
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
+                [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount"
+                [logicalSlaveCellsCount]="unlockedColumnsCount(item)"
             class="{{ isOdd(item) ?  'k-alt k-table-alt-row' : ''}}"
             [class.k-grid-row-sticky]="rowSticky ? rowSticky({ dataItem: item.data, index: $any(item).index }) : false"
             [ngClass]="rowClass({ dataItem: item.data, index: $any(item).index })"
             [class.k-master-row]="true"
             [class.k-grid-edit-row]="isEditingRow($any(item).index)"
-            [attr.aria-selected]="isSelectable() && isRowSelected(item)"
+            [attr.aria-selected]="lockedColumnsCount < 1 ? isSelectable() && isRowSelected(item) : undefined"
             [attr.data-kendo-grid-item-index]="$any(item).index"
             [class.k-selected]="isSelectable() && isRowSelected(item)">
             <ng-container *ngIf="!skipGroupDecoration">
@@ -17426,7 +17496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [colSpan]="column.colspan"
                     role="gridcell"
                     class="k-table-td"
-                    [attr.aria-selected]="isSelectable() ? isAriaSelected(item, column) : undefined"
+                    [attr.aria-selected]="lockedColumnsCount < 1 && isSelectable() ? isAriaSelected(item, column) : undefined"
                     [class.k-grid-content-sticky]="column.sticky"
                     [class.k-touch-action-none]="isSelectable() && $any(selectable).drag"
                     [class.k-touch-action-auto]="!(isSelectable() && $any(selectable).drag)"
@@ -17483,8 +17553,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex(rowIndex)"
                 [logicalSlaveRow]="lockedColumnsCount > 0"
+                [totalColumns]="totalColumns"
                 [logicalCellsCount]="columns.length"
-                [logicalSlaveCellsCount]="unlockedColumnsCount">
+                [logicalSlaveCellsCount]="unlockedColumnsCount(item)">
             <ng-container *ngIf="!skipGroupDecoration">
                 <td class="k-group-cell" *ngFor="let g of groups"></td>
             </ng-container>
@@ -17560,6 +17631,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], rowSticky: [{
                 type: Input
+            }], totalColumns: [{
+                type: Input
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-table-tbody']
@@ -18363,6 +18436,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [detailTemplate]="detailTemplate"
                     [showGroupFooters]="showFooter"
                     [skip]="skip"
@@ -18414,6 +18488,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                     [noRecordsTemplate]="noRecordsTemplate"
                     [lockedColumnsCount]="lockedLeafColumns.length"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [skip]="skip"
                     [selectable]="selectable"
                     [trackBy]="trackBy"
@@ -18436,7 +18511,7 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
-    `, isInline: true, components: [{ type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
+    `, isInline: true, components: [{ type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
@@ -18481,6 +18556,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [noRecordsText]="''"
                     [columns]="$any(lockedLeafColumns)"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [detailTemplate]="detailTemplate"
                     [showGroupFooters]="showFooter"
                     [skip]="skip"
@@ -18532,6 +18608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     [noRecordsTemplate]="noRecordsTemplate"
                     [lockedColumnsCount]="lockedLeafColumns.length"
                     [totalColumnsCount]="leafColumns.length"
+                    [totalColumns]="columns"
                     [skip]="skip"
                     [selectable]="selectable"
                     [trackBy]="trackBy"
@@ -18668,7 +18745,7 @@ class FooterComponent {
     }
 }
 FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterComponent, deps: [{ token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
+FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FooterComponent, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns" }, host: { properties: { "class.k-grid-footer": "this.footerClass", "class.k-table-tfoot": "this.hostClass", "attr.role": "this.hostRole" } }, ngImport: i0, template: `
     <ng-container>
         <tr
             [class.k-footer-template]="true"
@@ -18677,6 +18754,7 @@ FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="columns.length - lockedColumnsCount"
+                [totalColumns]="totalColumns"
             >
             <td
                 class="k-table-td k-group-cell"
@@ -18710,7 +18788,7 @@ FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             </td>
         </tr>
     </ng-container>
-    `, isInline: true, directives: [{ type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+    `, isInline: true, directives: [{ type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterComponent, decorators: [{
             type: Component,
             args: [{
@@ -18724,6 +18802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [logicalSlaveRow]="lockedColumnsCount > 0"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="columns.length - lockedColumnsCount"
+                [totalColumns]="totalColumns"
             >
             <td
                 class="k-table-td k-group-cell"
@@ -18771,6 +18850,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }], logicalRowIndex: [{
                 type: Input
+            }], totalColumns: [{
+                type: Input
             }], footerClass: [{
                 type: HostBinding,
                 args: ['class.k-grid-footer']
@@ -21313,6 +21394,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                                 [columnMenu]="columnMenuOptions"
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
                                 [detailTemplate]="detailTemplate"
                                 [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                             </thead>
@@ -21350,6 +21432,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
                                 [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
                                 [detailTemplate]="detailTemplate"
                                 [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                             </thead>
@@ -21432,7 +21515,8 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                                 [groups]="group"
                                 [columns]="$any(lockedLeafColumns)"
                                 [detailTemplate]="detailTemplate"
-                                [logicalRowIndex]="ariaRowCount">
+                                [logicalRowIndex]="ariaRowCount"
+                                [totalColumns]="columnsContainer">
                             </tfoot>
                         </table>
                     </div>
@@ -21457,7 +21541,8 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                                 [groups]="isLocked ? [] : group"
                                 [columns]="$any(nonLockedLeafColumns)"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
-                                [detailTemplate]="detailTemplate">
+                                [detailTemplate]="detailTemplate"
+                                [totalColumns]="columnsContainer">
                             </tfoot>
                         </table>
                     </div>
@@ -21479,6 +21564,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                         [scrollable]="false"
                         [columns]="$any(visibleColumns)"
                         [totalColumnLevels]="totalColumnLevels"
+                        [totalColumns]="columnsContainer"
                         [groups]="group"
                         [groupable]="showGroupPanel"
                         [reorderable]="reorderable"
@@ -21514,7 +21600,8 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                         [logicalRowIndex]="ariaRowCount"
                         [groups]="group"
                         [columns]="$any(leafColumns)"
-                        [detailTemplate]="detailTemplate">
+                        [detailTemplate]="detailTemplate"
+                        [totalColumns]="columnsContainer">
                     </tfoot>
                 </table>
             </ng-container>
@@ -21555,7 +21642,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i41.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i41.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "totalColumns", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex", "totalColumns"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "totalColumns", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i41.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i41.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -21929,6 +22016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [columnMenu]="columnMenuOptions"
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
                                 [detailTemplate]="detailTemplate"
                                 [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                             </thead>
@@ -21966,6 +22054,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [columnMenuTemplate]="columnMenuTemplate"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
                                 [totalColumnsCount]="leafColumns.length"
+                                [totalColumns]="columnsContainer"
                                 [detailTemplate]="detailTemplate"
                                 [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
                             </thead>
@@ -22048,7 +22137,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [groups]="group"
                                 [columns]="$any(lockedLeafColumns)"
                                 [detailTemplate]="detailTemplate"
-                                [logicalRowIndex]="ariaRowCount">
+                                [logicalRowIndex]="ariaRowCount"
+                                [totalColumns]="columnsContainer">
                             </tfoot>
                         </table>
                     </div>
@@ -22073,7 +22163,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 [groups]="isLocked ? [] : group"
                                 [columns]="$any(nonLockedLeafColumns)"
                                 [lockedColumnsCount]="lockedLeafColumns.length"
-                                [detailTemplate]="detailTemplate">
+                                [detailTemplate]="detailTemplate"
+                                [totalColumns]="columnsContainer">
                             </tfoot>
                         </table>
                     </div>
@@ -22095,6 +22186,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [scrollable]="false"
                         [columns]="$any(visibleColumns)"
                         [totalColumnLevels]="totalColumnLevels"
+                        [totalColumns]="columnsContainer"
                         [groups]="group"
                         [groupable]="showGroupPanel"
                         [reorderable]="reorderable"
@@ -22130,7 +22222,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         [logicalRowIndex]="ariaRowCount"
                         [groups]="group"
                         [columns]="$any(leafColumns)"
-                        [detailTemplate]="detailTemplate">
+                        [detailTemplate]="detailTemplate"
+                        [totalColumns]="columnsContainer">
                     </tfoot>
                 </table>
             </ng-container>