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

package/esm2020/rendering/table-body.component.mjs

@@ -24,6 +24,7 @@ import { NON_DATA_CELL_CLASSES, NON_DATA_ROW_CLASSES, IGNORE_TARGET_CLASSSES, IG
 import { CellSelectionService } from '../selection/cell-selection.service';
 import { minusIcon, plusIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../common/provider.service';
+import { ColumnsContainer } from '../columns/columns-container';
 import * as i0 from "@angular/core";
 import * as i1 from "./details/details.service";
 import * as i2 from "../grouping/groups.service";
@@ -94,8 +95,17 @@ export 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) ||
@@ -389,14 +399,15 @@ export class TableBodyComponent {
     }
 }
 TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, deps: [{ token: i1.DetailsService }, { token: i2.GroupsService }, { token: i3.ChangeNotificationService }, { token: i4.EditService }, { token: i5.ContextService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i6.DomEventsService }, { token: i7.SelectionService }, { token: i8.CellSelectionService }, { token: i9.ColumnInfoService }, { token: i10.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>
@@ -458,6 +469,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>
@@ -468,14 +480,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">
@@ -520,7 +533,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)"
@@ -577,8 +590,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>
@@ -610,7 +624,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: i11.CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: i12.GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i13.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i14.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i17.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i15.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i11.CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: i12.GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i13.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { type: i14.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i17.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i15.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
             args: [{
@@ -622,7 +636,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>
@@ -684,6 +699,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>
@@ -694,14 +710,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">
@@ -746,7 +763,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)"
@@ -803,8 +820,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>
@@ -880,6 +898,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']