@progress/kendo-angular-grid 7.0.0-dev.202201261657 → 7.0.0-next.202203311511

package/esm2015/rendering/body.module.js

@@ -0,0 +1,123 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { CommandColumnComponent } from '../columns/command-column.component';
+import { CheckboxColumnComponent } from '../columns/checkbox-column.component';
+import { SelectionCheckboxDirective } from '../selection/selection-checkbox.directive';
+import { CellTemplateDirective } from './cell-template.directive';
+import { NoRecordsTemplateDirective } from './no-records-template.directive';
+import { EditTemplateDirective } from '../editing/edit-template.directive';
+import { TableBodyComponent } from './table-body.component';
+import { CellComponent } from './cell.component';
+import { EditCommandDirective } from '../editing/edit-command.directive';
+import { CancelCommandDirective } from '../editing/cancel-command.directive';
+import { SaveCommandDirective } from '../editing/save-command.directive';
+import { RemoveCommandDirective } from '../editing/remove-command.directive';
+import { AddCommandDirective } from '../editing/add-command.directive';
+import { SharedModule } from "../shared.module";
+import { ResizeSensorModule } from '@progress/kendo-angular-common';
+import { GroupModule } from "../grouping/group.module";
+import { NumericTextBoxModule } from "@progress/kendo-angular-inputs";
+import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
+import { CellLoadingTemplateDirective } from './cell-loading.template.directive';
+import { LoadingTemplateDirective } from './loading-template.directive';
+import * as i0 from "@angular/core";
+const exported = [
+    CommandColumnComponent,
+    CheckboxColumnComponent,
+    SelectionCheckboxDirective,
+    CellTemplateDirective,
+    EditTemplateDirective,
+    TableBodyComponent,
+    NoRecordsTemplateDirective,
+    CellComponent,
+    EditCommandDirective,
+    CancelCommandDirective,
+    SaveCommandDirective,
+    RemoveCommandDirective,
+    AddCommandDirective,
+    CellLoadingTemplateDirective,
+    LoadingTemplateDirective
+];
+const importedModules = [
+    CommonModule,
+    ReactiveFormsModule,
+    FormsModule,
+    SharedModule,
+    GroupModule,
+    NumericTextBoxModule,
+    DatePickerModule,
+    ResizeSensorModule
+];
+/**
+ * @hidden
+ */
+export class BodyModule {
+    static exports() {
+        return [
+            CommandColumnComponent,
+            CheckboxColumnComponent,
+            SelectionCheckboxDirective,
+            CellTemplateDirective,
+            NoRecordsTemplateDirective,
+            EditTemplateDirective,
+            EditCommandDirective,
+            CancelCommandDirective,
+            SaveCommandDirective,
+            RemoveCommandDirective,
+            AddCommandDirective,
+            CellLoadingTemplateDirective,
+            LoadingTemplateDirective
+        ];
+    }
+}
+BodyModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BodyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BodyModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BodyModule, declarations: [CommandColumnComponent,
+        CheckboxColumnComponent,
+        SelectionCheckboxDirective,
+        CellTemplateDirective,
+        EditTemplateDirective,
+        TableBodyComponent,
+        NoRecordsTemplateDirective,
+        CellComponent,
+        EditCommandDirective,
+        CancelCommandDirective,
+        SaveCommandDirective,
+        RemoveCommandDirective,
+        AddCommandDirective,
+        CellLoadingTemplateDirective,
+        LoadingTemplateDirective], imports: [CommonModule,
+        ReactiveFormsModule,
+        FormsModule,
+        SharedModule,
+        GroupModule,
+        NumericTextBoxModule,
+        DatePickerModule,
+        ResizeSensorModule], exports: [CommandColumnComponent,
+        CheckboxColumnComponent,
+        SelectionCheckboxDirective,
+        CellTemplateDirective,
+        EditTemplateDirective,
+        TableBodyComponent,
+        NoRecordsTemplateDirective,
+        CellComponent,
+        EditCommandDirective,
+        CancelCommandDirective,
+        SaveCommandDirective,
+        RemoveCommandDirective,
+        AddCommandDirective,
+        CellLoadingTemplateDirective,
+        LoadingTemplateDirective] });
+BodyModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BodyModule, imports: [[...importedModules]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: BodyModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [exported],
+                    exports: [exported],
+                    imports: [...importedModules]
+                }]
+        }] });

package/esm2015/rendering/cell-loading.template.directive.js

@@ -0,0 +1,37 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the virtual scrolling cell template of the Grid while loading new data. Provides an option to customize the
+ * appearance of the indicator that is displayed while new data is loading. To define the loading cell template,
+ * nest an `<ng-template>` tag with the `kendoGridCellLoadingTemplate` directive inside `<kendo-grid>` ([see example]({% slug virtualscrolling_grid %}#toc-custom-loading-skeleton)).
+ *
+ * The template context is set to the current column, and utilizes the `let-x` syntax&mdash;for example, `let-column`.
+ *
+ * @example
+ * ```ts-no-run
+ *       <kendo-grid [data]="data" scrollable="virtual" [rowHeight]="36">
+ *         <ng-template kendoGridCellLoadingTemplate let-column>
+ *             ...
+ *         </ng-template>
+ *       </kendo-grid>
+ * ```
+ */
+export class CellLoadingTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+CellLoadingTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellLoadingTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CellLoadingTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CellLoadingTemplateDirective, selector: "[kendoGridCellLoadingTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellLoadingTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridCellLoadingTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2015/rendering/cell-template.directive.js

@@ -0,0 +1,67 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, Optional } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Represents the column cell template of the Grid ([more information and example]({% slug templates_columns_grid %}#toc-cell-template)).
+ * Helps to customize the content of the cells. To define the cell template, nest an `<ng-template>` tag
+ * with the `kendoGridCellTemplate` directive inside a `<kendo-grid-column>` tag.
+ *
+ * The template context is set to the current data item and the following additional fields are passed:
+ * - `columnIndex`&mdash;The current column index. Use it as an alias for a template variable by utilizing the `let-columnIndex="columnIndex"` syntax.
+ * - `rowIndex`&mdash;The current data row index. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `dataItem`&mdash;The current data item. Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax&mdash;for example, `let-dataItem`.
+ * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *     selector: 'my-app',
+ *     template: `
+ *         <kendo-grid [data]="gridData">
+ *             <kendo-grid-column field="ProductName">
+ *                 <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
+ *                     Data Row #: {{rowIndex}} /
+ *                     <strong>{{dataItem.ProductName}}</strong>
+ *                     ({{dataItem.Discontinued ? "discontinued" : "active"}})
+ *                 </ng-template>
+ *             </kendo-grid-column>
+ *         </kendo-grid>
+ *     `
+ * })
+ *
+ * class AppComponent {
+ *     public gridData = [{
+ *         "ProductID": 1,
+ *         "ProductName": "Chai",
+ *         "UnitPrice": 18.0000,
+ *         "Discontinued": false
+ *       }, {
+ *         "ProductID": 2,
+ *         "ProductName": "Chang",
+ *         "UnitPrice": 19.0000,
+ *         "Discontinued": true
+ *       }
+ *     ];
+ * }
+ *
+ * ```
+ */
+export class CellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });

package/esm2015/rendering/cell.component.js

@@ -0,0 +1,314 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 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 } from '@angular/core';
+import { isSpanColumn, isCheckboxColumn } from '../columns/column-base';
+import { CommandColumnComponent } from '../columns/command-column.component';
+import { isColumnComponent } from '../columns/column.component';
+import { columnsToRender } from "../columns/column-common";
+import { isPresent, isNullOrEmptyString, extractFormat } from '../utils';
+import { CELL_CONTEXT } from './common/cell-context';
+import * as i0 from "@angular/core";
+import * as i1 from "../editing/edit.service";
+import * as i2 from "../common/id.service";
+import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-dateinputs";
+import * as i6 from "@angular/common";
+import * as i7 from "../navigation/focusable.directive";
+import * as i8 from "../selection/selection-checkbox.directive";
+import * as i9 from "@angular/forms";
+import * as i10 from "./common/field-accessor.pipe";
+/**
+ * @hidden
+ */
+export class CellComponent {
+    constructor(editService, idService, localizationService, cellContext) {
+        this.editService = editService;
+        this.idService = idService;
+        this.localizationService = localizationService;
+        this.cellContext = cellContext;
+        this.isNew = false;
+        this.isLoading = false;
+        this.isVirtual = false;
+        this._templateContext = {};
+        this._editTemplateContext = {};
+    }
+    get commandCellClass() {
+        return this.isCommand(this.column);
+    }
+    set rowIndex(index) {
+        this._rowIndex = index;
+        this.updateCellContext();
+    }
+    get rowIndex() {
+        return this._rowIndex;
+    }
+    get isEdited() {
+        if (!(this.editService.isEditing() || this.isNew) || !this.isColumnEditable) {
+            return false;
+        }
+        const editContext = this.editService.columnContext(this.rowIndex, this.column);
+        return this.isFieldEditable(editContext, this.column);
+    }
+    get showLoading() {
+        return this.isVirtual && this.isLoading;
+    }
+    get formGroup() {
+        return this.editService.context(this.rowIndex).group;
+    }
+    get templateContext() {
+        return this._templateContext;
+    }
+    get editTemplateContext() {
+        this._editTemplateContext.$implicit = this.formGroup;
+        this._editTemplateContext.isNew = this.isNew;
+        this._editTemplateContext.column = this.column;
+        this._editTemplateContext.dataItem = this.dataItem;
+        this._editTemplateContext.formGroup = this.formGroup;
+        this._editTemplateContext.rowIndex = this.rowIndex;
+        return this._editTemplateContext;
+    }
+    get format() {
+        if (isColumnComponent(this.column) && !isNullOrEmptyString(this.column.format)) {
+            return extractFormat(this.column.format);
+        }
+        return undefined;
+    }
+    get isBoundColumn() {
+        return this.column.field && !this.column.templateRef;
+    }
+    get isCheckboxColumn() {
+        return isCheckboxColumn(this.column) && !this.column.templateRef;
+    }
+    get selectionCheckboxId() {
+        return this.idService.selectionCheckboxId(this.rowIndex);
+    }
+    get selectionCheckboxLabel() {
+        return this.localizationService.get('selectionCheckboxLabel');
+    }
+    get isSpanColumn() {
+        return isSpanColumn(this.column) && !this.column.templateRef;
+    }
+    get childColumns() {
+        return columnsToRender([this.column]);
+    }
+    get isColumnEditable() {
+        if (!this.column || this.isCommand(this.column)) {
+            return false;
+        }
+        return this.column.editable !== false;
+    }
+    ngDoCheck() {
+        this.updateCellContext();
+    }
+    ngOnChanges(_changes) {
+        this.updateTemplateContext();
+    }
+    ngAfterContentChecked() {
+        this.updateTemplateContext();
+    }
+    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;
+        }
+    }
+    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;
+    }
+}
+CellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: CellComponent, deps: [{ token: i1.EditService }, { token: i2.IdService }, { token: i3.LocalizationService }, { token: CELL_CONTEXT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+CellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: CellComponent, 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" } }, 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 childColumns">
+                            {{ 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">
+                        <input
+                            class="k-checkbox k-checkbox-md k-rounded-md"
+                            [kendoGridSelectionCheckbox]="rowIndex"
+                            [attr.id]="selectionCheckboxId"
+                            [attr.aria-label]="selectionCheckboxLabel" />
+                    </ng-container>
+                </ng-container>
+                <ng-template #loading>
+                    <ng-template
+                        *ngIf="loadingTemplate"
+                        [ngTemplateOutlet]="loadingTemplate"
+                        [ngTemplateOutletContext]="{$implicit: column}">
+                    </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>
+
+                    <kendo-datepicker
+                        *ngSwitchCase="'date'"
+                        [format]="format"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoGridFocusable
+                    ></kendo-datepicker>
+
+                    <input
+                        *ngSwitchCase="'boolean'"
+                        type="checkbox"
+                        class="k-checkbox k-checkbox-md k-rounded-md"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoGridFocusable
+                    />
+
+                    <input
+                        *ngSwitchDefault
+                        type="text"
+                        class="k-textbox k-input k-rounded-md"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoGridFocusable
+                    />
+                </ng-container>
+            </ng-container>
+        </ng-container>
+    `, isInline: true, components: [{ type: i4.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"], outputs: ["valueChange", "focus", "blur"], exportAs: ["kendoNumericTextBox"] }, { type: i5.DatePickerComponent, selector: "kendo-datepicker", inputs: ["cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate", "focusableId", "activeView", "bottomView", "topView", "calendarType", "animateCalendarNavigation", "disabled", "readonly", "readOnlyInput", "popupSettings", "navigation", "min", "max", "incompleteDateValidation", "focusedDate", "value", "format", "twoDigitYearMax", "formatPlaceholder", "placeholder", "tabindex", "tabIndex", "disabledDates", "title", "rangeValidation", "disabledDatesValidation", "weekNumber", "size", "rounded", "fillMode"], outputs: ["valueChange", "focus", "blur", "open", "close"], exportAs: ["kendo-datepicker"] }], directives: [{ type: i6.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i6.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i8.SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: ["kendoGridSelectionCheckbox"] }, { type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i9.FormControlDirective, selector: "[formControl]", inputs: ["disabled", "formControl", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i6.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }], pipes: { "valueOf": i10.FieldAccessorPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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 childColumns">
+                            {{ 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">
+                        <input
+                            class="k-checkbox k-checkbox-md k-rounded-md"
+                            [kendoGridSelectionCheckbox]="rowIndex"
+                            [attr.id]="selectionCheckboxId"
+                            [attr.aria-label]="selectionCheckboxLabel" />
+                    </ng-container>
+                </ng-container>
+                <ng-template #loading>
+                    <ng-template
+                        *ngIf="loadingTemplate"
+                        [ngTemplateOutlet]="loadingTemplate"
+                        [ngTemplateOutletContext]="{$implicit: column}">
+                    </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>
+
+                    <kendo-datepicker
+                        *ngSwitchCase="'date'"
+                        [format]="format"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoGridFocusable
+                    ></kendo-datepicker>
+
+                    <input
+                        *ngSwitchCase="'boolean'"
+                        type="checkbox"
+                        class="k-checkbox k-checkbox-md k-rounded-md"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoGridFocusable
+                    />
+
+                    <input
+                        *ngSwitchDefault
+                        type="text"
+                        class="k-textbox k-input k-rounded-md"
+                        [formControl]="$any(formGroup.get(column.field))"
+                        kendoGridFocusable
+                    />
+                </ng-container>
+            </ng-container>
+        </ng-container>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.EditService }, { type: i2.IdService }, { type: i3.LocalizationService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CELL_CONTEXT]
+                }] }]; }, propDecorators: { commandCellClass: [{
+                type: HostBinding,
+                args: ['class.k-command-cell']
+            }], column: [{
+                type: Input
+            }], columnIndex: [{
+                type: Input
+            }], isNew: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], isVirtual: [{
+                type: Input
+            }], loadingTemplate: [{
+                type: Input
+            }], rowIndex: [{
+                type: Input
+            }], dataItem: [{
+                type: Input
+            }] } });

package/esm2015/rendering/common/col-group.component.js

@@ -0,0 +1,50 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, Input } from '@angular/core';
+import { columnsToRender } from '../../columns/column-common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+/**
+ * @hidden
+ */
+export class ColGroupComponent {
+    constructor() {
+        this.columns = [];
+        this.groups = [];
+    }
+    get columnsToRender() {
+        return columnsToRender(this.columns);
+    }
+    trackBy(index, _item) {
+        return index;
+    }
+}
+ColGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: { columns: "columns", groups: "groups", detailTemplate: "detailTemplate" }, ngImport: i0, template: `
+    <ng-container>
+        <col [class.k-group-col]="true" *ngFor="let g of groups" />
+        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef"/>
+        <col *ngFor="let column of columnsToRender; trackBy: trackBy;" [style.width.px]="column.width"/>
+    </ng-container>
+    `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ColGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[kendoGridColGroup]',
+                    template: `
+    <ng-container>
+        <col [class.k-group-col]="true" *ngFor="let g of groups" />
+        <col [class.k-hierarchy-col]="true" *ngIf="detailTemplate?.templateRef"/>
+        <col *ngFor="let column of columnsToRender; trackBy: trackBy;" [style.width.px]="column.width"/>
+    </ng-container>
+    `
+                }]
+        }], propDecorators: { columns: [{
+                type: Input
+            }], groups: [{
+                type: Input
+            }], detailTemplate: [{
+                type: Input
+            }] } });