@progress/kendo-angular-grid 19.3.0-develop.3 → 19.3.0-develop.30

package/esm2022/rendering/common/col-group.component.mjs

@@ -4,20 +4,33 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input } from '@angular/core';
 import { DetailTemplateDirective } from '../details/detail-template.directive';
+import { ColumnBase } from "../../columns/column-base";
 import { columnsToRender } from '../../columns/column-common';
 import { isNullOrEmptyString, isTruthy } from '../../utils';
 import { NgFor, NgIf } from '@angular/common';
+import { ContextService } from '../../common/provider.service';
 import * as i0 from "@angular/core";
+import * as i1 from "../../common/provider.service";
 /**
  * @hidden
  */
 export class ColGroupComponent {
+    ctx;
     columns = [];
     groups = [];
     detailTemplate;
     sort = new Array();
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    getColumnWidth(column) {
+        return this.isStacked ? '100%' : `${column.width}px`;
+    }
     get columnsToRender() {
-        return columnsToRender(this.columns);
+        return this.isStacked ? [new ColumnBase()] : columnsToRender(this.columns);
+    }
+    get isStacked() {
+        return this.ctx.grid?.isStacked;
     }
     trackBy(index) {
         return index;
@@ -35,13 +48,13 @@ export class ColGroupComponent {
     sortDescriptor(field) {
         return this.sort.find(item => item.field === field) || { field };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColGroupComponent, deps: [{ token: i1.ContextService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColGroupComponent, isStandalone: true, selector: "[kendoGridColGroup]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", sort: "sort" }, ngImport: i0, template: `
     <ng-container>
         <col [class.k-group-col]="true" *ngFor="let g of groups" />
-        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef"/>
+        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef && !isStacked"/>
         <col *ngFor="let column of columnsToRender; trackBy: trackBy;"
-            [style.width.px]="column.width"
+            [style.width]="getColumnWidth(column)"
             [class.k-sorted]="isSorted(getColumnComponent(column))"/>
     </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
@@ -53,16 +66,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
     <ng-container>
         <col [class.k-group-col]="true" *ngFor="let g of groups" />
-        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef"/>
+        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef && !isStacked"/>
         <col *ngFor="let column of columnsToRender; trackBy: trackBy;"
-            [style.width.px]="column.width"
+            [style.width]="getColumnWidth(column)"
             [class.k-sorted]="isSorted(getColumnComponent(column))"/>
     </ng-container>
     `,
                     standalone: true,
                     imports: [NgFor, NgIf]
                 }]
-        }], propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: i1.ContextService }]; }, propDecorators: { columns: [{
                 type: Input
             }], groups: [{
                 type: Input

package/esm2022/rendering/footer/footer.component.mjs

@@ -13,13 +13,16 @@ import { LogicalCellDirective } from '../../navigation/logical-cell.directive';
 import { NgFor, NgIf, NgClass, NgStyle } from '@angular/common';
 import { LogicalRowDirective } from '../../navigation/logical-row.directive';
 import { TemplateContextDirective } from '@progress/kendo-angular-common';
+import { ContextService } from '../../common/provider.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./../../common/column-info.service";
+import * as i2 from "../../common/provider.service";
 /**
  * @hidden
  */
 export class FooterComponent {
     columnInfoService;
+    ctx;
     columns = [];
     groups = [];
     detailTemplate;
@@ -33,15 +36,16 @@ export class FooterComponent {
     }
     hostClass = true;
     hostRole = 'rowgroup';
-    constructor(columnInfoService) {
+    constructor(columnInfoService, ctx) {
         this.columnInfoService = columnInfoService;
+        this.ctx = ctx;
     }
     get columnsToRender() {
         return columnsToRender(this.columns || []);
     }
     // Number of unlocked columns in the next table, if any
     get unlockedColumnsCount() {
-        return this.totalColumnsCount - this.lockedColumnsCount - this.columns.length;
+        return this.totalColumnsCount - (this.isStacked ? 0 : this.lockedColumnsCount) - this.columns.length;
     }
     trackByIndex(index) {
         return index;
@@ -60,47 +64,78 @@ export class FooterComponent {
     isColumnGroupComponent(column) {
         return isColumnGroupComponent(column);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: [{ token: i1.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
+    get isStacked() {
+        return this.ctx.grid?.isStacked;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterComponent, deps: [{ token: i1.ColumnInfoService }, { token: i2.ContextService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FooterComponent, isStandalone: true, selector: "[kendoGridFooter]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate", scrollable: "scrollable", lockedColumnsCount: "lockedColumnsCount", logicalRowIndex: "logicalRowIndex", totalColumns: "totalColumns", totalColumnsCount: "totalColumnsCount" }, 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"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStacked"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
                 [totalColumns]="totalColumns"
             >
-            <td
-                class="k-table-td k-group-cell k-table-group-td"
-                role="presentation"
-                *ngFor="let g of groups">
-            </td>
+            <ng-container *ngIf="!isStacked">
+                <td
+                    class="k-table-td k-group-cell k-table-group-td"
+                    role="presentation"
+                    *ngFor="let g of groups">
+                </td>
+            </ng-container>
             <td
                 role="presentation"
                 class="k-table-td k-hierarchy-cell"
-                *ngIf="detailTemplate?.templateRef">
+                *ngIf="detailTemplate?.templateRef && !isStacked">
             </td>
-            <ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
-                <td *ngIf="!isColumnGroupComponent(column)"
-                    kendoGridLogicalCell
+            <ng-container *ngIf="!isStacked">
+                <ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
+                    <td *ngIf="!isColumnGroupComponent(column)"
+                        kendoGridLogicalCell
+                        class="k-table-td"
+                            [logicalRowIndex]="logicalRowIndex"
+                            [logicalColIndex]="logicalColumnIndex(column)"
+                            role="gridcell"
+                            aria-selected="false"
+                        [class.k-grid-footer-sticky]="column.sticky"
+                        [ngClass]="column.footerClass"
+                        [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
+                        <ng-template
+                            [templateContext]="{
+                                templateRef: column.footerTemplateRef,
+                                columnIndex: column.leafIndex,
+                                column: column,
+                                $implicit: column
+                            }">
+                        </ng-template>
+                    </td>
+                </ng-container>
+            </ng-container>
+
+            <ng-container *ngIf="isStacked">
+                <td kendoGridLogicalCell
                     class="k-table-td"
-                        [logicalRowIndex]="logicalRowIndex"
-                        [logicalColIndex]="logicalColumnIndex(column)"
-                        role="gridcell"
-                        aria-selected="false"
-                    [class.k-grid-footer-sticky]="column.sticky"
-                    [ngClass]="column.footerClass"
-                    [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
-                    <ng-template
-                        [templateContext]="{
-                            templateRef: column.footerTemplateRef,
-                            columnIndex: column.leafIndex,
-                            column: column,
-                            $implicit: column
-                        }">
-                    </ng-template>
+                    [logicalRowIndex]="logicalRowIndex"
+                    [logicalColIndex]="detailTemplate ? 1 : 0"
+                    role="gridcell"
+                    aria-selected="false">
+                    <div class="k-grid-column-template">
+                        <ng-container *ngFor="let column of columnsToRender; trackBy: trackByIndex;">
+                            <div class="k-column-template-item" *ngIf="column.footerTemplateRef">
+                                <ng-template
+                                    [templateContext]="{
+                                        templateRef: column.footerTemplateRef,
+                                        columnIndex: column.leafIndex,
+                                        column: column,
+                                        $implicit: column
+                                    }">
+                                </ng-template>
+                            </div>
+                        </ng-container>
+                    </div>
                 </td>
             </ng-container>
         </tr>
@@ -117,40 +152,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             class="k-footer-template"
             kendoGridLogicalRow
                 [logicalRowIndex]="logicalRowIndex"
-                [logicalSlaveRow]="lockedColumnsCount > 0"
+                [logicalSlaveRow]="lockedColumnsCount > 0 && !isStacked"
                 [logicalCellsCount]="columns.length"
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
                 [totalColumns]="totalColumns"
             >
-            <td
-                class="k-table-td k-group-cell k-table-group-td"
-                role="presentation"
-                *ngFor="let g of groups">
-            </td>
+            <ng-container *ngIf="!isStacked">
+                <td
+                    class="k-table-td k-group-cell k-table-group-td"
+                    role="presentation"
+                    *ngFor="let g of groups">
+                </td>
+            </ng-container>
             <td
                 role="presentation"
                 class="k-table-td k-hierarchy-cell"
-                *ngIf="detailTemplate?.templateRef">
+                *ngIf="detailTemplate?.templateRef && !isStacked">
             </td>
-            <ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
-                <td *ngIf="!isColumnGroupComponent(column)"
-                    kendoGridLogicalCell
+            <ng-container *ngIf="!isStacked">
+                <ng-container *ngFor="let column of columnsToRender; let columnIndex = index; trackBy: trackByIndex;">
+                    <td *ngIf="!isColumnGroupComponent(column)"
+                        kendoGridLogicalCell
+                        class="k-table-td"
+                            [logicalRowIndex]="logicalRowIndex"
+                            [logicalColIndex]="logicalColumnIndex(column)"
+                            role="gridcell"
+                            aria-selected="false"
+                        [class.k-grid-footer-sticky]="column.sticky"
+                        [ngClass]="column.footerClass"
+                        [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
+                        <ng-template
+                            [templateContext]="{
+                                templateRef: column.footerTemplateRef,
+                                columnIndex: column.leafIndex,
+                                column: column,
+                                $implicit: column
+                            }">
+                        </ng-template>
+                    </td>
+                </ng-container>
+            </ng-container>
+
+            <ng-container *ngIf="isStacked">
+                <td kendoGridLogicalCell
                     class="k-table-td"
-                        [logicalRowIndex]="logicalRowIndex"
-                        [logicalColIndex]="logicalColumnIndex(column)"
-                        role="gridcell"
-                        aria-selected="false"
-                    [class.k-grid-footer-sticky]="column.sticky"
-                    [ngClass]="column.footerClass"
-                    [ngStyle]="column.sticky ? addStickyStyles(column) : column.footerStyle">
-                    <ng-template
-                        [templateContext]="{
-                            templateRef: column.footerTemplateRef,
-                            columnIndex: column.leafIndex,
-                            column: column,
-                            $implicit: column
-                        }">
-                    </ng-template>
+                    [logicalRowIndex]="logicalRowIndex"
+                    [logicalColIndex]="detailTemplate ? 1 : 0"
+                    role="gridcell"
+                    aria-selected="false">
+                    <div class="k-grid-column-template">
+                        <ng-container *ngFor="let column of columnsToRender; trackBy: trackByIndex;">
+                            <div class="k-column-template-item" *ngIf="column.footerTemplateRef">
+                                <ng-template
+                                    [templateContext]="{
+                                        templateRef: column.footerTemplateRef,
+                                        columnIndex: column.leafIndex,
+                                        column: column,
+                                        $implicit: column
+                                    }">
+                                </ng-template>
+                            </div>
+                        </ng-container>
+                    </div>
                 </td>
             </ng-container>
         </tr>
@@ -159,7 +222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [LogicalRowDirective, NgFor, NgIf, LogicalCellDirective, NgClass, NgStyle, TemplateContextDirective]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ColumnInfoService }]; }, propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: i1.ColumnInfoService }, { type: i2.ContextService }]; }, propDecorators: { columns: [{
                 type: Input
             }], groups: [{
                 type: Input

package/esm2022/rendering/header/header.component.mjs

@@ -400,6 +400,9 @@ export class HeaderComponent {
     get leafColumns() {
         return this._leafColumns;
     }
+    get isStacked() {
+        return this.contextService.grid?.isStacked;
+    }
     isReorderable(column) {
         return this.reorderable && column.reorderable;
     }
@@ -502,7 +505,7 @@ export class HeaderComponent {
             </th>
             <th class="k-hierarchy-cell k-header k-table-th"
                 role="presentation"
-                *ngIf="detailTemplate?.templateRef"
+                *ngIf="detailTemplate?.templateRef && !isStacked"
             >
             </th>
             <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">
@@ -726,7 +729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </th>
             <th class="k-hierarchy-cell k-header k-table-th"
                 role="presentation"
-                *ngIf="detailTemplate?.templateRef"
+                *ngIf="detailTemplate?.templateRef && !isStacked"
             >
             </th>
             <ng-container *ngFor="let column of columnsForLevel(levelIndex); let columnIndex = index; let last = last;">

package/esm2022/rendering/list.component.mjs

@@ -178,7 +178,6 @@ export class ListComponent {
     columnsEndIdx;
     viewportColumnsWidth;
     scrollLeft = 0;
-    recalculateRowspan = true;
     observer;
     get lockedLeafColumns() {
         return this.columns.lockedLeafColumns;
@@ -187,7 +186,7 @@ export class ListComponent {
         return this.columns.nonLockedLeafColumns;
     }
     get nonLockedColumnsToRender() {
-        if (this.virtualColumns && !this.pdfService.exporting) {
+        if (this.virtualColumns && !this.pdfService.exporting && !this.isStacked) {
             return this.viewportColumns;
         }
         return this.nonLockedLeafColumns;
@@ -200,13 +199,13 @@ export class ListComponent {
         return expandColumns(this.lockedLeafColumns.toArray()).reduce((prev, curr) => prev + (curr.width || 0), groupCellsWidth);
     }
     get nonLockedWidth() {
-        if ((!this.rtl && this.lockedLeafColumns.length) || this.virtualColumns) {
+        if (((!this.rtl && this.lockedLeafColumns.length) || this.virtualColumns) && !this.isStacked) {
             return sumColumnWidths(expandColumns(this.nonLockedColumnsToRender.toArray()));
         }
         return undefined;
     }
     get isLocked() {
-        return this.lockedLeafColumns.length > 0;
+        return this.lockedLeafColumns.length > 0 && !this.isStacked;
     }
     rtl = false;
     columnUpdateFrame;
@@ -270,7 +269,7 @@ export class ListComponent {
         if (this.virtualColumns && (!this.viewportColumns || this.viewportWidthChange())) {
             this.updateViewportColumns();
         }
-        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && this.ctx.grid && !this.ctx.grid.pageSize;
+        const shouldCalculatePageSize = isDocumentAvailable() && this.isVirtual && this.ctx.grid && !isPresent(this.ctx.grid.pageSize);
         if (shouldCalculatePageSize) {
             const calculatedPageSize = this.calcVirtualPageSize();
             if (calculatedPageSize > 0) {
@@ -383,6 +382,12 @@ export class ListComponent {
             this.updateColumnViewport(startIdx, endIdx);
         }
     }
+    /**
+     * @hidden
+     */
+    get isStacked() {
+        return this.ctx.grid?.isStacked;
+    }
     detailExpand({ index, expand }) {
         if (expand) {
             this.rowHeightService.expandDetail(index);
@@ -694,7 +699,7 @@ export class ListComponent {
             }
         ], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "lockedContainer", first: true, predicate: ["lockedContainer"], descendants: true }, { propertyName: "lockedTable", first: true, predicate: ["lockedTable"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true, static: true }, { propertyName: "resizeSensors", predicate: ResizeSensorComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth" tabindex="-1"
+        *ngIf="isLocked && !isStacked" [style.width.px]="lockedWidth" tabindex="-1"
         [kendoEventsOutsideAngular]="{
             keydown: lockedKeydown,
             scroll: lockedScroll,
@@ -797,7 +802,7 @@ export class ListComponent {
         <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
-        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+        <div *ngIf="virtualColumns && !isStacked" class="k-width-container" role="presentation">
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>
@@ -815,7 +820,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-grid-list',
                     template: `
     <div #lockedContainer class="k-grid-content-locked" role="presentation"
-        *ngIf="isLocked" [style.width.px]="lockedWidth" tabindex="-1"
+        *ngIf="isLocked && !isStacked" [style.width.px]="lockedWidth" tabindex="-1"
         [kendoEventsOutsideAngular]="{
             keydown: lockedKeydown,
             scroll: lockedScroll,
@@ -918,7 +923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <div *ngIf="isVirtual" class="k-height-container" role="presentation">
             <div [style.height.px]="totalHeight"></div>
         </div>
-        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+        <div *ngIf="virtualColumns && !isStacked" class="k-width-container" role="presentation">
             <div [style.width.px]="totalWidth"></div>
         </div>
     </div>