@progress/kendo-angular-grid 21.4.1 → 22.0.0-develop.1

package/esm2022/rendering/cell.component.mjs

@@ -1,717 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding, Input, Inject, Optional, TemplateRef } from '@angular/core';
-import { EditService } from '../editing/edit.service';
-import { isSpanColumn, isCheckboxColumn, isRowReorderColumn } from '../columns/column-base';
-import { CommandColumnComponent } from '../columns/command-column.component';
-import { isColumnComponent } from '../columns/column.component';
-import { columnsToRender } from "../columns/column-common";
-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 { 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 { NgTemplateOutlet, 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 "./details/details.service";
-import * as i5 from "@progress/kendo-angular-l10n";
-import * as i6 from "@angular/forms";
-/**
- * @hidden
- */
-export class CellComponent {
-    editService;
-    idService;
-    ctx;
-    detailsService;
-    localization;
-    cellContext;
-    get commandCellClass() {
-        return this.isCommand(this.column);
-    }
-    get dragHandleCellClass() {
-        return isRowReorderColumn(this.column);
-    }
-    get dragRowHandleLabel() {
-        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();
-    }
-    get rowIndex() {
-        return this._rowIndex;
-    }
-    dataItem;
-    reorderIcon = reorderIcon;
-    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, currentColumn);
-        return this.isFieldEditable(editContext, currentColumn);
-    }
-    get showLoading() {
-        return this.isVirtual && this.isLoading;
-    }
-    get formGroup() {
-        return this.editService.context(this.rowIndex).group;
-    }
-    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 isStackedLayoutMode() {
-        return this.ctx.grid?.isStacked;
-    }
-    getEditTemplateContext(column) {
-        this._editTemplateContext.$implicit = this.formGroup;
-        this._editTemplateContext.isNew = this.isNew;
-        this._editTemplateContext.column = column || this.column;
-        this._editTemplateContext.dataItem = this.dataItem;
-        this._editTemplateContext.formGroup = this.formGroup;
-        this._editTemplateContext.rowIndex = this.rowIndex;
-        return this._editTemplateContext;
-    }
-    get rowReorderTemplateContext() {
-        this._rowReorderTemplateContext.$implicit = this.dataItem;
-        this._rowReorderTemplateContext.columnIndex = this.columnIndex;
-        this._rowReorderTemplateContext.rowIndex = this.rowIndex;
-        return this._rowReorderTemplateContext;
-    }
-    get format() {
-        if (isColumnComponent(this.column) && !isNullOrEmptyString(this.column.format)) {
-            return extractFormat(this.column.format);
-        }
-        return undefined;
-    }
-    isBoundColumn(column) {
-        const currentColumn = column || this.column;
-        return currentColumn.field && !currentColumn.templateRef;
-    }
-    isCheckboxColumn(column) {
-        const currentColumn = column || this.column;
-        return isCheckboxColumn(currentColumn) && !currentColumn.templateRef;
-    }
-    get selectionCheckboxId() {
-        return this.idService.selectionCheckboxId(this.rowIndex);
-    }
-    get selectionCheckboxLabel() {
-        return this.ctx.localization.get('selectionCheckboxLabel');
-    }
-    get isSpanColumn() {
-        return isSpanColumn(this.column) && !this.column.templateRef;
-    }
-    get children() {
-        return columnsToRender([this.column]);
-    }
-    isRowReorderColumn(column) {
-        const currentColumn = column || this.column;
-        return isRowReorderColumn(currentColumn) && !currentColumn.templateRef;
-    }
-    isRowSelectable(column) {
-        const currentColumn = column || this.column;
-        return currentColumn.rowSelectable(this._rowIndex);
-    }
-    _rowIndex;
-    isColumnEditable(column) {
-        const currentColumn = column || this.column;
-        if (!currentColumn || this.isCommand(currentColumn)) {
-            return false;
-        }
-        return currentColumn.editable !== false;
-    }
-    _templateContext = {};
-    _editTemplateContext = {};
-    _rowReorderTemplateContext = {};
-    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();
-    }
-    isCommand(column) {
-        return column instanceof CommandColumnComponent;
-    }
-    isFieldEditable(editContext, column) {
-        if (!isPresent(editContext)) {
-            return false;
-        }
-        if (isPresent(column.editTemplate)) {
-            return true;
-        }
-        return isPresent(editContext.group) && isPresent(editContext.group.get(column.field));
-    }
-    updateCellContext() {
-        if (this.cellContext) {
-            this.cellContext.rowIndex = this._rowIndex;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "17.0.0", version: "18.2.14", 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: `
-        @if (isStackedLayoutMode) {
-            <div class="k-grid-stack-row"
-                [ngClass]="stackedRowClass"
-                [ngStyle]="stackedRowStyle">
-                @for (col of columns; track $index) {
-                    <div class="k-grid-stack-cell"
-                        [class.k-grid-stack-edit-cell]="isEdited(col)"
-                        [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
-                        [class.k-command-cell]="isCommand(col)"
-                        [kendoGridFocusable]="!isCommand(col)">
-                        <div class="k-grid-stack-header">
-                            @if (!col.headerTemplateRef) {
-                                {{col.displayTitle}}
-                            } @else {
-                                <ng-template #headerTemplate
-                                    [templateContext]="{
-                                        templateRef: col.headerTemplateRef,
-                                        columnIndex: col.leafIndex,
-                                        column: col,
-                                        $implicit: col
-                                    }">
-                                </ng-template>
-                            }
-                        </div>
-                        <div class="k-grid-stack-content">
-                            @if (!isEdited(col)) {
-                                @if (!col.templateRef) {
-                                    @if (isBoundColumn(col)) {{{ dataItem | valueOf: col.field: col.format}}}
-                                    @if (isCheckboxColumn(col) && !isNew) {
-                                        @if (isRowSelectable(col)) {
-                                            <kendo-checkbox
-                                                [kendoGridSelectionCheckbox]="rowIndex"
-                                                [attr.id]="selectionCheckboxId"
-                                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                                [title]="selectionCheckboxLabel">
-                                            </kendo-checkbox>
-                                        } @else {
-                                            @if (col.showDisabledCheckbox) {
-                                                <kendo-checkbox
-                                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                                    [attr.id]="selectionCheckboxId"
-                                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                                    [title]="selectionCheckboxLabel"
-                                                    [disabled]="true"
-                                                ></kendo-checkbox>
-                                            }
-                                        }
-                                    }
-                                    @if (isRowReorderColumn(col) && !isNew) {
-                                        @if (!col.dragHandleTemplate?.first) {
-                                            <kendo-icon-wrapper
-                                                name="reorder"
-                                                [svgIcon]="reorderIcon">
-                                            </kendo-icon-wrapper>
-                                        } @else {
-                                            <ng-template
-                                                [ngTemplateOutlet]="col.rowDragHandleTemplateRef"
-                                                [ngTemplateOutletContext]="rowReorderTemplateContext">
-                                            </ng-template>
-                                        }
-                                    }
-                                } @else {
-                                    <ng-template #template
-                                        [ngTemplateOutlet]="col.templateRef"
-                                        [ngTemplateOutletContext]="getTemplateContext(col)">
-                                    </ng-template>
-                                }
-                            }
-                            @if (isEdited(col)) {
-                                @if (!col.editTemplateRef) {
-                                    @switch (col.editor) {
-                                        @case ('numeric') {
-                                            <kendo-numerictextbox
-                                                [format]="format"
-                                                [formControl]="$any(formGroup.get(col.field))"
-                                                kendoGridFocusable
-                                            ></kendo-numerictextbox>
-                                        }
-                                        @case ('date') {
-                                            <kendo-datepicker
-                                                [format]="format"
-                                                [formControl]="$any(formGroup.get(col.field))"
-                                                kendoGridFocusable
-                                            ></kendo-datepicker>
-                                        }
-                                        @case ('boolean') {
-                                            <kendo-checkbox
-                                                [formControl]="$any(formGroup.get(col.field))"
-                                                kendoGridFocusable
-                                            ></kendo-checkbox>
-                                        }
-                                        @default {
-                                            <kendo-textbox
-                                                [formControl]="$any(formGroup.get(col.field))"
-                                                kendoGridFocusable
-                                            ></kendo-textbox>
-                                        }
-                                    }
-                                } @else {
-                                    <ng-template
-                                        [ngTemplateOutlet]="col.editTemplateRef"
-                                        [ngTemplateOutletContext]="getEditTemplateContext(col)">
-                                    </ng-template>
-                                }
-                            }
-                        </div>
-                    </div>
-                }
-                @if (detailTemplate?.showIf(item.data, $any(item).index)) {
-                    <div class="k-grid-stack-cell" [attr.aria-expanded]="item.isExpanded">
-                        <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>
-        }
-
-        @if (!isStackedLayoutMode) {
-            @switch (isEdited()) {
-                @case (false) {
-                    @if (!showLoading) {
-                        @if (column.templateRef) {
-                            <ng-template
-                                [ngTemplateOutlet]="column.templateRef"
-                                [ngTemplateOutletContext]="getTemplateContext()">
-                            </ng-template>
-                        }
-                        @if (isSpanColumn) {
-                            @for (childColumn of children; track $index) {
-                                {{ dataItem | valueOf: childColumn.field: childColumn.format}}
-                            }
-                        }
-                        @if (isBoundColumn()) {{{ dataItem | valueOf: column.field: column.format}}}
-                        @if (isCheckboxColumn() && !isNew) {
-                            @if (isRowSelectable()) {
-                                <kendo-checkbox
-                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                    [attr.id]="selectionCheckboxId"
-                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                    [title]="selectionCheckboxLabel">
-                                </kendo-checkbox>
-                            } @else {
-                                @if (column.showDisabledCheckbox) {
-                                    <kendo-checkbox
-                                        [kendoGridSelectionCheckbox]="rowIndex"
-                                        [attr.id]="selectionCheckboxId"
-                                        [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                        [title]="selectionCheckboxLabel"
-                                        [disabled]="true"
-                                    ></kendo-checkbox>
-                                }
-                            }
-                        }
-                        @if (isRowReorderColumn() && !isNew) {
-                            @if (!column.dragHandleTemplate?.first) {
-                                <kendo-icon-wrapper
-                                    name="reorder"
-                                    [svgIcon]="reorderIcon">
-                                </kendo-icon-wrapper>
-                            } @else {
-                                <ng-template
-                                    [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
-                                    [ngTemplateOutletContext]="rowReorderTemplateContext">
-                                </ng-template>
-                            }
-                        }
-                    } @else {
-                        @if (loadingTemplate) {
-                            <ng-template
-                                [ngTemplateOutlet]="loadingTemplate"
-                                [ngTemplateOutletContext]="{$implicit: column}">
-                            </ng-template>
-                        } @else {
-                            <div class="k-skeleton-text k-skeleton"></div>
-                        }
-                    }
-                }
-                @case (true) {
-                    @if (column.editTemplateRef) {
-                        <ng-template
-                            [ngTemplateOutlet]="column.editTemplateRef"
-                            [ngTemplateOutletContext]="getEditTemplateContext()">
-                        </ng-template>
-                    } @else {
-                        @switch (column.editor) {
-                            @case ('numeric') {
-                                <kendo-numerictextbox
-                                    [format]="format"
-                                    [formControl]="$any(formGroup.get(column.field))"
-                                    kendoGridFocusable
-                                ></kendo-numerictextbox>
-                            }
-                            @case ('date') {
-                                <kendo-datepicker
-                                    [format]="format"
-                                    [formControl]="$any(formGroup.get(column.field))"
-                                    kendoGridFocusable
-                                ></kendo-datepicker>
-                            }
-                            @case ('boolean') {
-                                <kendo-checkbox
-                                    [formControl]="$any(formGroup.get(column.field))"
-                                    kendoGridFocusable
-                                ></kendo-checkbox>
-                            }
-                            @default {
-                                <kendo-textbox
-                                    [formControl]="$any(formGroup.get(column.field))"
-                                    kendoGridFocusable
-                                ></kendo-textbox>
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "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: "18.2.14", ngImport: i0, type: CellComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[kendoGridCell]',
-                    template: `
-        @if (isStackedLayoutMode) {
-            <div class="k-grid-stack-row"
-                [ngClass]="stackedRowClass"
-                [ngStyle]="stackedRowStyle">
-                @for (col of columns; track $index) {
-                    <div class="k-grid-stack-cell"
-                        [class.k-grid-stack-edit-cell]="isEdited(col)"
-                        [class.k-drag-cell]="isRowReorderColumn(col) && !isNew"
-                        [class.k-command-cell]="isCommand(col)"
-                        [kendoGridFocusable]="!isCommand(col)">
-                        <div class="k-grid-stack-header">
-                            @if (!col.headerTemplateRef) {
-                                {{col.displayTitle}}
-                            } @else {
-                                <ng-template #headerTemplate
-                                    [templateContext]="{
-                                        templateRef: col.headerTemplateRef,
-                                        columnIndex: col.leafIndex,
-                                        column: col,
-                                        $implicit: col
-                                    }">
-                                </ng-template>
-                            }
-                        </div>
-                        <div class="k-grid-stack-content">
-                            @if (!isEdited(col)) {
-                                @if (!col.templateRef) {
-                                    @if (isBoundColumn(col)) {{{ dataItem | valueOf: col.field: col.format}}}
-                                    @if (isCheckboxColumn(col) && !isNew) {
-                                        @if (isRowSelectable(col)) {
-                                            <kendo-checkbox
-                                                [kendoGridSelectionCheckbox]="rowIndex"
-                                                [attr.id]="selectionCheckboxId"
-                                                [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                                [title]="selectionCheckboxLabel">
-                                            </kendo-checkbox>
-                                        } @else {
-                                            @if (col.showDisabledCheckbox) {
-                                                <kendo-checkbox
-                                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                                    [attr.id]="selectionCheckboxId"
-                                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                                    [title]="selectionCheckboxLabel"
-                                                    [disabled]="true"
-                                                ></kendo-checkbox>
-                                            }
-                                        }
-                                    }
-                                    @if (isRowReorderColumn(col) && !isNew) {
-                                        @if (!col.dragHandleTemplate?.first) {
-                                            <kendo-icon-wrapper
-                                                name="reorder"
-                                                [svgIcon]="reorderIcon">
-                                            </kendo-icon-wrapper>
-                                        } @else {
-                                            <ng-template
-                                                [ngTemplateOutlet]="col.rowDragHandleTemplateRef"
-                                                [ngTemplateOutletContext]="rowReorderTemplateContext">
-                                            </ng-template>
-                                        }
-                                    }
-                                } @else {
-                                    <ng-template #template
-                                        [ngTemplateOutlet]="col.templateRef"
-                                        [ngTemplateOutletContext]="getTemplateContext(col)">
-                                    </ng-template>
-                                }
-                            }
-                            @if (isEdited(col)) {
-                                @if (!col.editTemplateRef) {
-                                    @switch (col.editor) {
-                                        @case ('numeric') {
-                                            <kendo-numerictextbox
-                                                [format]="format"
-                                                [formControl]="$any(formGroup.get(col.field))"
-                                                kendoGridFocusable
-                                            ></kendo-numerictextbox>
-                                        }
-                                        @case ('date') {
-                                            <kendo-datepicker
-                                                [format]="format"
-                                                [formControl]="$any(formGroup.get(col.field))"
-                                                kendoGridFocusable
-                                            ></kendo-datepicker>
-                                        }
-                                        @case ('boolean') {
-                                            <kendo-checkbox
-                                                [formControl]="$any(formGroup.get(col.field))"
-                                                kendoGridFocusable
-                                            ></kendo-checkbox>
-                                        }
-                                        @default {
-                                            <kendo-textbox
-                                                [formControl]="$any(formGroup.get(col.field))"
-                                                kendoGridFocusable
-                                            ></kendo-textbox>
-                                        }
-                                    }
-                                } @else {
-                                    <ng-template
-                                        [ngTemplateOutlet]="col.editTemplateRef"
-                                        [ngTemplateOutletContext]="getEditTemplateContext(col)">
-                                    </ng-template>
-                                }
-                            }
-                        </div>
-                    </div>
-                }
-                @if (detailTemplate?.showIf(item.data, $any(item).index)) {
-                    <div class="k-grid-stack-cell" [attr.aria-expanded]="item.isExpanded">
-                        <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>
-        }
-
-        @if (!isStackedLayoutMode) {
-            @switch (isEdited()) {
-                @case (false) {
-                    @if (!showLoading) {
-                        @if (column.templateRef) {
-                            <ng-template
-                                [ngTemplateOutlet]="column.templateRef"
-                                [ngTemplateOutletContext]="getTemplateContext()">
-                            </ng-template>
-                        }
-                        @if (isSpanColumn) {
-                            @for (childColumn of children; track $index) {
-                                {{ dataItem | valueOf: childColumn.field: childColumn.format}}
-                            }
-                        }
-                        @if (isBoundColumn()) {{{ dataItem | valueOf: column.field: column.format}}}
-                        @if (isCheckboxColumn() && !isNew) {
-                            @if (isRowSelectable()) {
-                                <kendo-checkbox
-                                    [kendoGridSelectionCheckbox]="rowIndex"
-                                    [attr.id]="selectionCheckboxId"
-                                    [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                    [title]="selectionCheckboxLabel">
-                                </kendo-checkbox>
-                            } @else {
-                                @if (column.showDisabledCheckbox) {
-                                    <kendo-checkbox
-                                        [kendoGridSelectionCheckbox]="rowIndex"
-                                        [attr.id]="selectionCheckboxId"
-                                        [inputAttributes]="{'aria-label': selectionCheckboxLabel}"
-                                        [title]="selectionCheckboxLabel"
-                                        [disabled]="true"
-                                    ></kendo-checkbox>
-                                }
-                            }
-                        }
-                        @if (isRowReorderColumn() && !isNew) {
-                            @if (!column.dragHandleTemplate?.first) {
-                                <kendo-icon-wrapper
-                                    name="reorder"
-                                    [svgIcon]="reorderIcon">
-                                </kendo-icon-wrapper>
-                            } @else {
-                                <ng-template
-                                    [ngTemplateOutlet]="column.rowDragHandleTemplateRef"
-                                    [ngTemplateOutletContext]="rowReorderTemplateContext">
-                                </ng-template>
-                            }
-                        }
-                    } @else {
-                        @if (loadingTemplate) {
-                            <ng-template
-                                [ngTemplateOutlet]="loadingTemplate"
-                                [ngTemplateOutletContext]="{$implicit: column}">
-                            </ng-template>
-                        } @else {
-                            <div class="k-skeleton-text k-skeleton"></div>
-                        }
-                    }
-                }
-                @case (true) {
-                    @if (column.editTemplateRef) {
-                        <ng-template
-                            [ngTemplateOutlet]="column.editTemplateRef"
-                            [ngTemplateOutletContext]="getEditTemplateContext()">
-                        </ng-template>
-                    } @else {
-                        @switch (column.editor) {
-                            @case ('numeric') {
-                                <kendo-numerictextbox
-                                    [format]="format"
-                                    [formControl]="$any(formGroup.get(column.field))"
-                                    kendoGridFocusable
-                                ></kendo-numerictextbox>
-                            }
-                            @case ('date') {
-                                <kendo-datepicker
-                                    [format]="format"
-                                    [formControl]="$any(formGroup.get(column.field))"
-                                    kendoGridFocusable
-                                ></kendo-datepicker>
-                            }
-                            @case ('boolean') {
-                                <kendo-checkbox
-                                    [formControl]="$any(formGroup.get(column.field))"
-                                    kendoGridFocusable
-                                ></kendo-checkbox>
-                            }
-                            @default {
-                                <kendo-textbox
-                                    [formControl]="$any(formGroup.get(column.field))"
-                                    kendoGridFocusable
-                                ></kendo-textbox>
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    `,
-                    standalone: true,
-                    imports: [NgTemplateOutlet, FocusableDirective, SelectionCheckboxDirective, TemplateContextDirective,
-                        IconWrapperComponent, NumericTextBoxComponent, DatePickerComponent, FieldAccessorPipe, ReactiveFormsModule, CheckBoxComponent, TextBoxComponent, NgClass, NgStyle, ButtonComponent]
-                }]
-        }], ctorParameters: () => [{ type: i1.EditService }, { type: i2.IdService }, { type: i3.ContextService }, { type: i4.DetailsService }, { type: i5.LocalizationService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [CELL_CONTEXT]
-                }] }], propDecorators: { commandCellClass: [{
-                type: HostBinding,
-                args: ['class.k-command-cell']
-            }], dragHandleCellClass: [{
-                type: HostBinding,
-                args: ['class.k-drag-cell']
-            }, {
-                type: HostBinding,
-                args: ['class.k-touch-action-none']
-            }], dragRowHandleLabel: [{
-                type: HostBinding,
-                args: ['attr.aria-label']
-            }], column: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], columnIndex: [{
-                type: Input
-            }], isNew: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], isVirtual: [{
-                type: Input
-            }], loadingTemplate: [{
-                type: Input
-            }], detailTemplate: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], rowIndex: [{
-                type: Input
-            }], dataItem: [{
-                type: Input
-            }] } });