@progress/kendo-angular-grid 19.3.0-develop.22 → 19.3.0-develop.24

package/esm2022/rendering/cell.component.mjs

@@ -12,20 +12,27 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { isPresent, isNullOrEmptyString, extractFormat } from '../utils';
 import { CELL_CONTEXT } from './common/cell-context';
 import { IdService } from '../common/id.service';
-import { reorderIcon } from '@progress/kendo-svg-icons';
+import { minusIcon, plusIcon, reorderIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../common/provider.service';
 import { FieldAccessorPipe } from './common/field-accessor.pipe';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { SelectionCheckboxDirective } from '../selection/selection-checkbox.directive';
 import { FocusableDirective } from '../navigation/focusable.directive';
-import { NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, NgSwitchDefault } from '@angular/common';
+import { NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, NgSwitchDefault, NgClass, NgStyle } from '@angular/common';
 import { CheckBoxComponent, NumericTextBoxComponent, TextBoxComponent } from '@progress/kendo-angular-inputs';
 import { DatePickerComponent } from '@progress/kendo-angular-dateinputs';
+import { TemplateContextDirective } from '@progress/kendo-angular-common';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
+import { DetailTemplateDirective } from './details/detail-template.directive';
+import { DetailsService } from './details/details.service';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
 import * as i0 from "@angular/core";
 import * as i1 from "../editing/edit.service";
 import * as i2 from "../common/id.service";
 import * as i3 from "../common/provider.service";
-import * as i4 from "@angular/forms";
+import * as i4 from "./details/details.service";
+import * as i5 from "@progress/kendo-angular-l10n";
+import * as i6 from "@angular/forms";
 /**
  * @hidden
  */
@@ -33,6 +40,8 @@ export class CellComponent {
     editService;
     idService;
     ctx;
+    detailsService;
+    localization;
     cellContext;
     get commandCellClass() {
         return this.isCommand(this.column);
@@ -44,11 +53,14 @@ export class CellComponent {
         return isRowReorderColumn(this.column) ? this.ctx.localization.get('dragRowHandleLabel') : undefined;
     }
     column;
+    columns;
     columnIndex;
     isNew = false;
     isLoading = false;
     isVirtual = false;
     loadingTemplate;
+    detailTemplate;
+    item;
     set rowIndex(index) {
         this._rowIndex = index;
         this.updateCellContext();
@@ -58,12 +70,42 @@ export class CellComponent {
     }
     dataItem;
     reorderIcon = reorderIcon;
-    get isEdited() {
-        if (!(this.editService.isEditing() || this.isNew) || !this.isColumnEditable) {
+    minusIcon = minusIcon;
+    plusIcon = plusIcon;
+    detailButtonIconName(viewItem) {
+        return viewItem.isExpanded ? 'minus' : 'plus';
+    }
+    detailButtonSvgIcon(viewItem) {
+        return viewItem.isExpanded ? this.minusIcon : this.plusIcon;
+    }
+    detailButtonText(viewItem) {
+        return viewItem.isExpanded ? this.localization.get('detailCollapse') : this.localization.get('detailExpand');
+    }
+    toggleRow(index, dataItem) {
+        this.detailsService.toggleRow(index, dataItem);
+        return false;
+    }
+    get stackedRowClass() {
+        const columnsLength = this.ctx.grid.stackedColumns?.columns.length;
+        if (this.ctx.grid.stackedColumns.areDefault && columnsLength > 1) {
+            return `k-grid-cols-${columnsLength}`;
+        }
+    }
+    get stackedRowStyle() {
+        const columnsWidths = this.ctx.grid.stackedColumns.columns.map(c => c.width).join(' ');
+        if (!this.ctx.grid.stackedColumns.areDefault && columnsWidths) {
+            return {
+                'grid-template-columns': `${columnsWidths}`
+            };
+        }
+    }
+    isEdited(column) {
+        const currentColumn = column || this.column;
+        if (!(this.editService.isEditing() || this.isNew) || !this.isColumnEditable(column)) {
             return false;
         }
-        const editContext = this.editService.columnContext(this.rowIndex, this.column);
-        return this.isFieldEditable(editContext, this.column);
+        const editContext = this.editService.columnContext(this.rowIndex, currentColumn);
+        return this.isFieldEditable(editContext, currentColumn);
     }
     get showLoading() {
         return this.isVirtual && this.isLoading;
@@ -71,13 +113,22 @@ export class CellComponent {
     get formGroup() {
         return this.editService.context(this.rowIndex).group;
     }
-    get templateContext() {
+    getTemplateContext(column) {
+        this._templateContext.isNew = this.isNew;
+        this._templateContext.column = column || this.column;
+        this._templateContext.dataItem = this.dataItem;
+        this._templateContext.rowIndex = this.rowIndex;
+        this._templateContext.columnIndex = this.columnIndex;
+        this._templateContext.$implicit = this.dataItem;
         return this._templateContext;
     }
-    get editTemplateContext() {
+    get isStackedLayoutMode() {
+        return this.ctx.grid?.isStacked;
+    }
+    getEditTemplateContext(column) {
         this._editTemplateContext.$implicit = this.formGroup;
         this._editTemplateContext.isNew = this.isNew;
-        this._editTemplateContext.column = this.column;
+        this._editTemplateContext.column = column || this.column;
         this._editTemplateContext.dataItem = this.dataItem;
         this._editTemplateContext.formGroup = this.formGroup;
         this._editTemplateContext.rowIndex = this.rowIndex;
@@ -95,11 +146,13 @@ export class CellComponent {
         }
         return undefined;
     }
-    get isBoundColumn() {
-        return this.column.field && !this.column.templateRef;
+    isBoundColumn(column) {
+        const currentColumn = column || this.column;
+        return currentColumn.field && !currentColumn.templateRef;
     }
-    get isCheckboxColumn() {
-        return isCheckboxColumn(this.column) && !this.column.templateRef;
+    isCheckboxColumn(column) {
+        const currentColumn = column || this.column;
+        return isCheckboxColumn(currentColumn) && !currentColumn.templateRef;
     }
     get selectionCheckboxId() {
         return this.idService.selectionCheckboxId(this.rowIndex);
@@ -113,37 +166,36 @@ export class CellComponent {
     get children() {
         return columnsToRender([this.column]);
     }
-    get isRowReorderColumn() {
-        return isRowReorderColumn(this.column) && !this.column.templateRef;
+    isRowReorderColumn(column) {
+        const currentColumn = column || this.column;
+        return isRowReorderColumn(currentColumn) && !currentColumn.templateRef;
     }
-    get isRowSelectable() {
-        return this.column.rowSelectable(this._rowIndex);
+    isRowSelectable(column) {
+        const currentColumn = column || this.column;
+        return currentColumn.rowSelectable(this._rowIndex);
     }
     _rowIndex;
-    get isColumnEditable() {
-        if (!this.column || this.isCommand(this.column)) {
+    isColumnEditable(column) {
+        const currentColumn = column || this.column;
+        if (!currentColumn || this.isCommand(currentColumn)) {
             return false;
         }
-        return this.column.editable !== false;
+        return currentColumn.editable !== false;
     }
     _templateContext = {};
     _editTemplateContext = {};
     _rowReorderTemplateContext = {};
-    constructor(editService, idService, ctx, cellContext) {
+    constructor(editService, idService, ctx, detailsService, localization, cellContext) {
         this.editService = editService;
         this.idService = idService;
         this.ctx = ctx;
+        this.detailsService = detailsService;
+        this.localization = localization;
         this.cellContext = cellContext;
     }
     ngDoCheck() {
         this.updateCellContext();
     }
-    ngOnChanges() {
-        this.updateTemplateContext();
-    }
-    ngAfterContentChecked() {
-        this.updateTemplateContext();
-    }
     isCommand(column) {
         return column instanceof CommandColumnComponent;
     }
@@ -161,203 +213,423 @@ export class CellComponent {
             this.cellContext.rowIndex = this._rowIndex;
         }
     }
-    updateTemplateContext() {
-        if (!this.column.templateRef) {
-            return;
-        }
-        const context = this._templateContext;
-        context.isNew = this.isNew;
-        context.column = this.column;
-        context.dataItem = this.dataItem;
-        context.rowIndex = this.rowIndex;
-        context.columnIndex = this.columnIndex;
-        context.$implicit = this.dataItem;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, deps: [{ token: i1.EditService }, { token: i2.IdService }, { token: i3.ContextService }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CellComponent, isStandalone: true, selector: "[kendoGridCell]", inputs: { column: "column", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, usesOnChanges: true, ngImport: i0, template: `
-        <ng-container [ngSwitch]="isEdited">
-            <ng-container *ngSwitchCase="false">
-                <ng-container *ngIf="!showLoading; else loading">
-                    <ng-template *ngIf="column.templateRef"
-                        [ngTemplateOutlet]="column.templateRef"
-                        [ngTemplateOutletContext]="templateContext">
-                    </ng-template>
-                    <ng-container *ngIf="isSpanColumn">
-                        <ng-container *ngFor="let childColumn of children">
-                            {{ dataItem | valueOf: childColumn.field: childColumn.format}}
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, deps: [{ token: i1.EditService }, { token: i2.IdService }, { token: i3.ContextService }, { token: i4.DetailsService }, { token: i5.LocalizationService }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CellComponent, isStandalone: true, selector: "[kendoGridCell]", inputs: { column: "column", columns: "columns", columnIndex: "columnIndex", isNew: "isNew", isLoading: "isLoading", isVirtual: "isVirtual", loadingTemplate: "loadingTemplate", detailTemplate: "detailTemplate", item: "item", rowIndex: "rowIndex", dataItem: "dataItem" }, host: { properties: { "class.k-command-cell": "this.commandCellClass", "class.k-drag-cell": "this.dragHandleCellClass", "class.k-touch-action-none": "this.dragHandleCellClass", "attr.aria-label": "this.dragRowHandleLabel" } }, ngImport: i0, template: `
+        <ng-container *ngIf="isStackedLayoutMode">
+            <div class="k-grid-stack-row"
+                [ngClass]="stackedRowClass"
+                [ngStyle]="stackedRowStyle">
+                <div class="k-grid-stack-cell" *ngFor="let col of columns"
+                    [class.k-grid-stack-edit-cell]="isEdited(col)"
+                    [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
+                    [class.k-command-cell]="isCommand(col)"
+                    kendoGridFocusable>
+                    <div class="k-grid-stack-header">
+                        <ng-container *ngIf="!col.headerTemplateRef; else headerTemplate">
+                            {{col.displayTitle}}
                         </ng-container>
-                    </ng-container>
-                    <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
-                    <ng-container *ngIf="isCheckboxColumn && !isNew">
-                        <ng-container *ngIf="isRowSelectable; else nonSelectableRow">
-                            <kendo-checkbox
-                                [kendoGridSelectionCheckbox]="rowIndex"
-                                [attr.id]="selectionCheckboxId"
-                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}">
-                            </kendo-checkbox>
+
+                        <ng-template #headerTemplate
+                            [templateContext]="{
+                                templateRef: col.headerTemplateRef,
+                                columnIndex: col.leafIndex,
+                                column: col,
+                                $implicit: col
+                            }">
+                        </ng-template>
+                    </div>
+                    <div class="k-grid-stack-content">
+                        <ng-container *ngIf="!isEdited(col)">
+                            <ng-container *ngIf="!col.templateRef; else template">
+                                <ng-container *ngIf="isBoundColumn(col)">{{ dataItem | valueOf: col.field: col.format}}</ng-container>
+                                <ng-container *ngIf="isCheckboxColumn(col) && !isNew">
+                                    <ng-container *ngIf="isRowSelectable(col); else nonSelectableRow">
+                                        <kendo-checkbox
+                                            [kendoGridSelectionCheckbox]="rowIndex"
+                                            [attr.id]="selectionCheckboxId"
+                                            [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                            [title]="selectionCheckboxLabel">
+                                        </kendo-checkbox>
+                                    </ng-container>
+                                    <ng-template #nonSelectableRow>
+                                        <kendo-checkbox *ngIf="col.showDisabledCheckbox"
+                                            [kendoGridSelectionCheckbox]="rowIndex"
+                                            [attr.id]="selectionCheckboxId"
+                                            [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                            [title]="selectionCheckboxLabel"
+                                            [disabled]="true"
+                                        ></kendo-checkbox>
+                                    </ng-template>
+                                </ng-container>
+                                <ng-container *ngIf="isRowReorderColumn(col) && !isNew">
+                                    <kendo-icon-wrapper *ngIf="!col.dragHandleTemplate?.first"
+                                        name="reorder"
+                                        [svgIcon]="reorderIcon">
+                                    </kendo-icon-wrapper>
+                                    <ng-template *ngIf="col.dragHandleTemplate?.first"
+                                        [ngTemplateOutlet]="col.rowDragHandleTemplateRef"
+                                        [ngTemplateOutletContext]="rowReorderTemplateContext">
+                                    </ng-template>
+                                </ng-container>
+                            </ng-container>
+                            <ng-template #template
+                                [ngTemplateOutlet]="col.templateRef"
+                                [ngTemplateOutletContext]="getTemplateContext(col)">
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="isEdited(col)">
+                            <ng-container [ngSwitch]="col.editor" *ngIf="!col.editTemplateRef">
+                                <kendo-numerictextbox
+                                    *ngSwitchCase="'numeric'"
+                                    [format]="format"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-numerictextbox>
+
+                                <kendo-datepicker
+                                    *ngSwitchCase="'date'"
+                                    [format]="format"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-datepicker>
+
+                                <kendo-checkbox
+                                    *ngSwitchCase="'boolean'"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-checkbox>
+
+                                <kendo-textbox
+                                    *ngSwitchDefault
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-textbox>
+                            </ng-container>
+                            <ng-template *ngIf="col.editTemplateRef"
+                                [ngTemplateOutlet]="col.editTemplateRef"
+                                [ngTemplateOutletContext]="getEditTemplateContext(col)">
+                            </ng-template>
                         </ng-container>
-                        <ng-template #nonSelectableRow>
-                            <kendo-checkbox *ngIf="column.showDisabledCheckbox"
-                                [kendoGridSelectionCheckbox]="rowIndex"
-                                [attr.id]="selectionCheckboxId"
-                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                [disabled]="true"
-                            ></kendo-checkbox>
+                    </div>
+                </div>
+                <div class="k-grid-stack-cell" *ngIf="detailTemplate?.showIf(item.data, $any(item).index)">
+                    <div class="k-grid-stack-content">
+                        <button kendoButton
+                            fillMode="flat"
+                            themeColor="primary"
+                            [icon]="detailButtonIconName(item)"
+                            [svgIcon]="detailButtonSvgIcon(item)"
+                            (click)="toggleRow($any(item).index, item.data)">
+                            {{ detailButtonText(item) }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+
+        <ng-container *ngIf="!isStackedLayoutMode">
+            <ng-container [ngSwitch]="isEdited()">
+                <ng-container *ngSwitchCase="false">
+                    <ng-container *ngIf="!showLoading; else loading">
+                        <ng-template *ngIf="column.templateRef"
+                            [ngTemplateOutlet]="column.templateRef"
+                            [ngTemplateOutletContext]="getTemplateContext()">
                         </ng-template>
+                        <ng-container *ngIf="isSpanColumn">
+                            <ng-container *ngFor="let childColumn of children">
+                                {{ dataItem | valueOf: childColumn.field: childColumn.format}}
+                            </ng-container>
+                        </ng-container>
+                        <ng-container *ngIf="isBoundColumn()">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
+                        <ng-container *ngIf="isCheckboxColumn() && !isNew">
+                            <ng-container *ngIf="isRowSelectable(); else nonSelectableRow">
+                                <kendo-checkbox
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                    [title]="selectionCheckboxLabel">
+                                </kendo-checkbox>
+                            </ng-container>
+                            <ng-template #nonSelectableRow>
+                                <kendo-checkbox *ngIf="column.showDisabledCheckbox"
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                    [title]="selectionCheckboxLabel"
+                                    [disabled]="true"
+                                ></kendo-checkbox>
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="isRowReorderColumn() && !isNew">
+                            <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
+                                name="reorder"
+                                [svgIcon]="reorderIcon">
+                            </kendo-icon-wrapper>
+                            <ng-template *ngIf="column.dragHandleTemplate?.first"
+                                [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
+                                [ngTemplateOutletContext]="rowReorderTemplateContext">
+                            </ng-template>
+                        </ng-container>
                     </ng-container>
-                    <ng-container *ngIf="isRowReorderColumn && !isNew">
-                        <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
-                            name="reorder"
-                            [svgIcon]="reorderIcon">
-                        </kendo-icon-wrapper>
-                        <ng-template *ngIf="column.dragHandleTemplate?.first"
-                            [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
-                            [ngTemplateOutletContext]="rowReorderTemplateContext">
+                    <ng-template #loading>
+                        <ng-template
+                            *ngIf="loadingTemplate"
+                            [ngTemplateOutlet]="loadingTemplate"
+                            [ngTemplateOutletContext]="{$implicit: column}">
                         </ng-template>
-                    </ng-container>
+                        <div *ngIf="!loadingTemplate" class="k-skeleton-text k-skeleton"></div>
+                    </ng-template>
                 </ng-container>
-                <ng-template #loading>
+                <ng-container *ngSwitchCase="true">
                     <ng-template
-                        *ngIf="loadingTemplate"
-                        [ngTemplateOutlet]="loadingTemplate"
-                        [ngTemplateOutletContext]="{$implicit: column}">
+                        *ngIf="column.editTemplateRef"
+                        [ngTemplateOutlet]="column.editTemplateRef"
+                        [ngTemplateOutletContext]="getEditTemplateContext()">
                     </ng-template>
-                    <div *ngIf="!loadingTemplate" class="k-skeleton-text k-skeleton"></div>
-                </ng-template>
-            </ng-container>
-            <ng-container *ngSwitchCase="true">
-                <ng-template
-                    *ngIf="column.editTemplateRef"
-                    [ngTemplateOutlet]="column.editTemplateRef"
-                    [ngTemplateOutletContext]="editTemplateContext">
-                </ng-template>
-                <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
-                    <kendo-numerictextbox
-                        *ngSwitchCase="'numeric'"
-                        [format]="format"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-numerictextbox>
+                    <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
+                        <kendo-numerictextbox
+                            *ngSwitchCase="'numeric'"
+                            [format]="format"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-numerictextbox>
 
-                    <kendo-datepicker
-                        *ngSwitchCase="'date'"
-                        [format]="format"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-datepicker>
+                        <kendo-datepicker
+                            *ngSwitchCase="'date'"
+                            [format]="format"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-datepicker>
 
-                    <kendo-checkbox
-                        *ngSwitchCase="'boolean'"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-checkbox>
+                        <kendo-checkbox
+                            *ngSwitchCase="'boolean'"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-checkbox>
 
-                    <kendo-textbox
-                        *ngSwitchDefault
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-textbox>
+                        <kendo-textbox
+                            *ngSwitchDefault
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-textbox>
+                    </ng-container>
                 </ng-container>
             </ng-container>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "component", type: DatePickerComponent, selector: "kendo-datepicker", inputs: ["focusableId", "cellTemplate", "clearButton", "inputAttributes", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "headerTemplate", "footerTemplate", "footer", "navigationItemTemplate", "weekDaysFormat", "showOtherMonthDays", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "autoCorrectParts", "autoSwitchParts", "autoSwitchKeys", "enableMouseWheel", "allowCaretMode", "autoFill", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "adaptiveTitle", "adaptiveSubtitle", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode", "adaptiveMode"], outputs: ["valueChange", "focus", "blur", "open", "close", "escape"], exportAs: ["kendo-datepicker"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: FieldAccessorPipe, name: "valueOf" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[kendoGridCell]',
                     template: `
-        <ng-container [ngSwitch]="isEdited">
-            <ng-container *ngSwitchCase="false">
-                <ng-container *ngIf="!showLoading; else loading">
-                    <ng-template *ngIf="column.templateRef"
-                        [ngTemplateOutlet]="column.templateRef"
-                        [ngTemplateOutletContext]="templateContext">
-                    </ng-template>
-                    <ng-container *ngIf="isSpanColumn">
-                        <ng-container *ngFor="let childColumn of children">
-                            {{ dataItem | valueOf: childColumn.field: childColumn.format}}
+        <ng-container *ngIf="isStackedLayoutMode">
+            <div class="k-grid-stack-row"
+                [ngClass]="stackedRowClass"
+                [ngStyle]="stackedRowStyle">
+                <div class="k-grid-stack-cell" *ngFor="let col of columns"
+                    [class.k-grid-stack-edit-cell]="isEdited(col)"
+                    [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
+                    [class.k-command-cell]="isCommand(col)"
+                    kendoGridFocusable>
+                    <div class="k-grid-stack-header">
+                        <ng-container *ngIf="!col.headerTemplateRef; else headerTemplate">
+                            {{col.displayTitle}}
                         </ng-container>
-                    </ng-container>
-                    <ng-container *ngIf="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
-                    <ng-container *ngIf="isCheckboxColumn && !isNew">
-                        <ng-container *ngIf="isRowSelectable; else nonSelectableRow">
-                            <kendo-checkbox
-                                [kendoGridSelectionCheckbox]="rowIndex"
-                                [attr.id]="selectionCheckboxId"
-                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}">
-                            </kendo-checkbox>
+
+                        <ng-template #headerTemplate
+                            [templateContext]="{
+                                templateRef: col.headerTemplateRef,
+                                columnIndex: col.leafIndex,
+                                column: col,
+                                $implicit: col
+                            }">
+                        </ng-template>
+                    </div>
+                    <div class="k-grid-stack-content">
+                        <ng-container *ngIf="!isEdited(col)">
+                            <ng-container *ngIf="!col.templateRef; else template">
+                                <ng-container *ngIf="isBoundColumn(col)">{{ dataItem | valueOf: col.field: col.format}}</ng-container>
+                                <ng-container *ngIf="isCheckboxColumn(col) && !isNew">
+                                    <ng-container *ngIf="isRowSelectable(col); else nonSelectableRow">
+                                        <kendo-checkbox
+                                            [kendoGridSelectionCheckbox]="rowIndex"
+                                            [attr.id]="selectionCheckboxId"
+                                            [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                            [title]="selectionCheckboxLabel">
+                                        </kendo-checkbox>
+                                    </ng-container>
+                                    <ng-template #nonSelectableRow>
+                                        <kendo-checkbox *ngIf="col.showDisabledCheckbox"
+                                            [kendoGridSelectionCheckbox]="rowIndex"
+                                            [attr.id]="selectionCheckboxId"
+                                            [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                            [title]="selectionCheckboxLabel"
+                                            [disabled]="true"
+                                        ></kendo-checkbox>
+                                    </ng-template>
+                                </ng-container>
+                                <ng-container *ngIf="isRowReorderColumn(col) && !isNew">
+                                    <kendo-icon-wrapper *ngIf="!col.dragHandleTemplate?.first"
+                                        name="reorder"
+                                        [svgIcon]="reorderIcon">
+                                    </kendo-icon-wrapper>
+                                    <ng-template *ngIf="col.dragHandleTemplate?.first"
+                                        [ngTemplateOutlet]="col.rowDragHandleTemplateRef"
+                                        [ngTemplateOutletContext]="rowReorderTemplateContext">
+                                    </ng-template>
+                                </ng-container>
+                            </ng-container>
+                            <ng-template #template
+                                [ngTemplateOutlet]="col.templateRef"
+                                [ngTemplateOutletContext]="getTemplateContext(col)">
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="isEdited(col)">
+                            <ng-container [ngSwitch]="col.editor" *ngIf="!col.editTemplateRef">
+                                <kendo-numerictextbox
+                                    *ngSwitchCase="'numeric'"
+                                    [format]="format"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-numerictextbox>
+
+                                <kendo-datepicker
+                                    *ngSwitchCase="'date'"
+                                    [format]="format"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-datepicker>
+
+                                <kendo-checkbox
+                                    *ngSwitchCase="'boolean'"
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-checkbox>
+
+                                <kendo-textbox
+                                    *ngSwitchDefault
+                                    [formControl]="$any(formGroup.get(col.field))"
+                                    kendoGridFocusable
+                                ></kendo-textbox>
+                            </ng-container>
+                            <ng-template *ngIf="col.editTemplateRef"
+                                [ngTemplateOutlet]="col.editTemplateRef"
+                                [ngTemplateOutletContext]="getEditTemplateContext(col)">
+                            </ng-template>
                         </ng-container>
-                        <ng-template #nonSelectableRow>
-                            <kendo-checkbox *ngIf="column.showDisabledCheckbox"
-                                [kendoGridSelectionCheckbox]="rowIndex"
-                                [attr.id]="selectionCheckboxId"
-                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                [disabled]="true"
-                            ></kendo-checkbox>
+                    </div>
+                </div>
+                <div class="k-grid-stack-cell" *ngIf="detailTemplate?.showIf(item.data, $any(item).index)">
+                    <div class="k-grid-stack-content">
+                        <button kendoButton
+                            fillMode="flat"
+                            themeColor="primary"
+                            [icon]="detailButtonIconName(item)"
+                            [svgIcon]="detailButtonSvgIcon(item)"
+                            (click)="toggleRow($any(item).index, item.data)">
+                            {{ detailButtonText(item) }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+
+        <ng-container *ngIf="!isStackedLayoutMode">
+            <ng-container [ngSwitch]="isEdited()">
+                <ng-container *ngSwitchCase="false">
+                    <ng-container *ngIf="!showLoading; else loading">
+                        <ng-template *ngIf="column.templateRef"
+                            [ngTemplateOutlet]="column.templateRef"
+                            [ngTemplateOutletContext]="getTemplateContext()">
                         </ng-template>
+                        <ng-container *ngIf="isSpanColumn">
+                            <ng-container *ngFor="let childColumn of children">
+                                {{ dataItem | valueOf: childColumn.field: childColumn.format}}
+                            </ng-container>
+                        </ng-container>
+                        <ng-container *ngIf="isBoundColumn()">{{ dataItem | valueOf: column.field: column.format}}</ng-container>
+                        <ng-container *ngIf="isCheckboxColumn() && !isNew">
+                            <ng-container *ngIf="isRowSelectable(); else nonSelectableRow">
+                                <kendo-checkbox
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                    [title]="selectionCheckboxLabel">
+                                </kendo-checkbox>
+                            </ng-container>
+                            <ng-template #nonSelectableRow>
+                                <kendo-checkbox *ngIf="column.showDisabledCheckbox"
+                                    [kendoGridSelectionCheckbox]="rowIndex"
+                                    [attr.id]="selectionCheckboxId"
+                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
+                                    [title]="selectionCheckboxLabel"
+                                    [disabled]="true"
+                                ></kendo-checkbox>
+                            </ng-template>
+                        </ng-container>
+                        <ng-container *ngIf="isRowReorderColumn() && !isNew">
+                            <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
+                                name="reorder"
+                                [svgIcon]="reorderIcon">
+                            </kendo-icon-wrapper>
+                            <ng-template *ngIf="column.dragHandleTemplate?.first"
+                                [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
+                                [ngTemplateOutletContext]="rowReorderTemplateContext">
+                            </ng-template>
+                        </ng-container>
                     </ng-container>
-                    <ng-container *ngIf="isRowReorderColumn && !isNew">
-                        <kendo-icon-wrapper *ngIf="!column.dragHandleTemplate?.first"
-                            name="reorder"
-                            [svgIcon]="reorderIcon">
-                        </kendo-icon-wrapper>
-                        <ng-template *ngIf="column.dragHandleTemplate?.first"
-                            [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
-                            [ngTemplateOutletContext]="rowReorderTemplateContext">
+                    <ng-template #loading>
+                        <ng-template
+                            *ngIf="loadingTemplate"
+                            [ngTemplateOutlet]="loadingTemplate"
+                            [ngTemplateOutletContext]="{$implicit: column}">
                         </ng-template>
-                    </ng-container>
+                        <div *ngIf="!loadingTemplate" class="k-skeleton-text k-skeleton"></div>
+                    </ng-template>
                 </ng-container>
-                <ng-template #loading>
+                <ng-container *ngSwitchCase="true">
                     <ng-template
-                        *ngIf="loadingTemplate"
-                        [ngTemplateOutlet]="loadingTemplate"
-                        [ngTemplateOutletContext]="{$implicit: column}">
+                        *ngIf="column.editTemplateRef"
+                        [ngTemplateOutlet]="column.editTemplateRef"
+                        [ngTemplateOutletContext]="getEditTemplateContext()">
                     </ng-template>
-                    <div *ngIf="!loadingTemplate" class="k-skeleton-text k-skeleton"></div>
-                </ng-template>
-            </ng-container>
-            <ng-container *ngSwitchCase="true">
-                <ng-template
-                    *ngIf="column.editTemplateRef"
-                    [ngTemplateOutlet]="column.editTemplateRef"
-                    [ngTemplateOutletContext]="editTemplateContext">
-                </ng-template>
-                <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
-                    <kendo-numerictextbox
-                        *ngSwitchCase="'numeric'"
-                        [format]="format"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-numerictextbox>
+                    <ng-container [ngSwitch]="column.editor" *ngIf="!column.editTemplateRef">
+                        <kendo-numerictextbox
+                            *ngSwitchCase="'numeric'"
+                            [format]="format"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-numerictextbox>
 
-                    <kendo-datepicker
-                        *ngSwitchCase="'date'"
-                        [format]="format"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-datepicker>
+                        <kendo-datepicker
+                            *ngSwitchCase="'date'"
+                            [format]="format"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-datepicker>
 
-                    <kendo-checkbox
-                        *ngSwitchCase="'boolean'"
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-checkbox>
+                        <kendo-checkbox
+                            *ngSwitchCase="'boolean'"
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-checkbox>
 
-                    <kendo-textbox
-                        *ngSwitchDefault
-                        [formControl]="$any(formGroup.get(column.field))"
-                        kendoGridFocusable
-                    ></kendo-textbox>
+                        <kendo-textbox
+                            *ngSwitchDefault
+                            [formControl]="$any(formGroup.get(column.field))"
+                            kendoGridFocusable
+                        ></kendo-textbox>
+                    </ng-container>
                 </ng-container>
             </ng-container>
         </ng-container>
     `,
                     standalone: true,
-                    imports: [NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, FocusableDirective, SelectionCheckboxDirective,
-                        IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent]
+                    imports: [NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, NgFor, FocusableDirective, SelectionCheckboxDirective, TemplateContextDirective,
+                        IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, NgSwitchDefault, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent, NgClass, NgStyle, ButtonComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.IdService }, { type: i3.ContextService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.IdService }, { type: i3.ContextService }, { type: i4.DetailsService }, { type: i5.LocalizationService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -376,6 +648,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['attr.aria-label']
             }], column: [{
                 type: Input
+            }], columns: [{
+                type: Input
             }], columnIndex: [{
                 type: Input
             }], isNew: [{
@@ -386,6 +660,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], loadingTemplate: [{
                 type: Input
+            }], detailTemplate: [{
+                type: Input
+            }], item: [{
+                type: Input
             }], rowIndex: [{
                 type: Input
             }], dataItem: [{