@progress/kendo-angular-grid 18.0.0-develop.4 → 18.0.0-develop.6

package/fesm2022/progress-kendo-angular-grid.mjs

@@ -3,8 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, Host, Output, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
-import { merge, of, Subject, from, Subscription, interval, fromEvent, Observable, zip as zip$1, BehaviorSubject } from 'rxjs';
+import { EventEmitter, Injectable, SecurityContext, InjectionToken, Optional, Inject, Directive, SkipSelf, Input, isDevMode, QueryList, Component, ContentChildren, ContentChild, forwardRef, Host, Output, HostBinding, Pipe, TemplateRef, ChangeDetectionStrategy, ViewChildren, ViewChild, Self, NgZone, HostListener, ViewEncapsulation, NgModule } from '@angular/core';
+import { merge, of, Subject, zip as zip$1, from, Subscription, interval, fromEvent, Observable, BehaviorSubject } from 'rxjs';
 import * as i1$3 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, Keys, isPresent as isPresent$1, anyChanged, TemplateContextDirective, DraggableDirective, EventsOutsideAngularDirective, isChanged as isChanged$1, KendoInput, guid, hasObservers, ResizeSensorComponent, closest as closest$1, isFocusable as isFocusable$1, shouldShowValidationUI, WatermarkOverlayComponent, ResizeBatchService } from '@progress/kendo-angular-common';
 import * as i1 from '@angular/platform-browser';
@@ -1780,2156 +1780,2316 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             type: Injectable
         }] });
 
-const isInSameGrid = (element, gridElement) => closest(element, matchesNodeName('kendo-grid')) === gridElement;
-const matchHeaderCell = matchesNodeName('th');
-const matchDataCell = matchesNodeName('td');
-const matchFooterCell = matchesNodeName('.k-grid-footer td');
-const matchCell = (element) => matchDataCell(element) || matchHeaderCell(element) || matchFooterCell(element);
-const gridCell = (element, gridElement) => {
-    let target = closest(element, matchCell);
-    while (target && !isInSameGrid(target, gridElement)) {
-        target = closest(target.parentElement, matchCell);
+/**
+ * Represents the column cell template of the Grid.
+ * 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 [see example](slug:templates_columns_grid#toc-cell-template).
+ *
+ * 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
+ * ```html
+ * <kendo-grid [data]="gridData" ...>
+ *   <kendo-grid-column field="ProductName">
+ *     <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">
+ *       Data Row: {{rowIndex}}
+ *     </ng-template>
+ *   </kendo-grid-column>
+ * </kendo-grid>
+ * ```
+ */
+class CellTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    return target;
-};
-const targetCell = (target, gridElement) => {
-    const cell = gridCell(target, gridElement);
-    const row = closest(cell, matchesNodeName('tr'));
-    if (cell && row) {
-        let rowIndex = row.getAttribute('aria-rowindex') || row.getAttribute('data-kendo-grid-row-index');
-        rowIndex = rowIndex ? parseInt(rowIndex, 10) - 1 : null;
-        let colIndex = cell.getAttribute('aria-colindex');
-        colIndex = colIndex ? parseInt(colIndex, 10) - 1 : null;
-        if (rowIndex !== null && colIndex !== null) {
-            return { colIndex, rowIndex, element: cell };
-        }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CellTemplateDirective, isStandalone: true, selector: "[kendoGridCellTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridCellTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the column edit-cell template of the Grid ([see example](slug:custom_reactive_editing_grid#toc-setting-up-custom-inputs)).
+ * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
+ * tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag.
+ *
+ * The template context is set to the current form group and the following additional fields are passed:
+ * - `formGroup`&mdash;The current [FormGroup](link:site.data.urls.angular['formgroupapi']). Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax, for example, `let-formGroup`. If you use the Grid inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
+ * - `rowIndex`&mdash;The current data row index. If inside a new item row, `rowIndex` is `-1`. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
+ * - `dataItem`&mdash;The current data item. Use it as an alias for a template variable by utilizing the `let-dataItem="dataItem"` syntax.
+ * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
+ * - `isNew`&mdash;The state of the current item. Use it as an alias for a template variable by utilizing the `let-isNew="isNew"` syntax.
+ */
+class EditTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-};
-const isArrowKey = keyCode => keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowRight ||
-    keyCode === Keys.ArrowUp || keyCode === Keys.ArrowDown;
-const isNavigationKey = keyCode => isArrowKey(keyCode) ||
-    keyCode === Keys.PageUp || keyCode === Keys.PageDown ||
-    keyCode === Keys.Home || keyCode === Keys.End;
-const isInput = matchesNodeName('input');
-const isTextInput = element => element && isInput(element) && element.type.toLowerCase() === 'text';
-const isPrintableCharacter = (str) => str.length === 1 && str.match(/\S/);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditTemplateDirective, isStandalone: true, selector: "[kendoGridEditTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridEditTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
 /**
- * @hidden
+ * Represents the column header cell template of the Grid
+ * ([more information and example]({% slug templates_columns_grid %}#toc-header-template)).
+ * Helps to customize the table header cell for the column.
+ * To define a header template, nest an `<ng-template>` tag with the
+ * `kendoGridHeaderTemplate` directive inside the `<kendo-grid-column>` tag.
+ *
+ *  The template context is set to the current column and then the following additional fields are passed:
+ * * `column`&mdash;Defines an instance of the [ColumnComponent]({% slug api_grid_columncomponent %}) option.
+ * * `columnIndex`&mdash;Defines the current column index.
+ *
+ * @example
+ * ```html
+ * <kendo-grid [data]="gridData">
+ *    <kendo-grid-column field="ProductName">
+ *       <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
+ *          {{column.field}}({{columnIndex}})
+ *       </ng-template>
+ *    </kendo-grid-column>
+ * </kendo-grid>
+ * ```
  */
-class NavigationViewport {
-    firstItemIndex;
-    lastItemIndex;
-    constructor(firstItemIndex, lastItemIndex) {
-        this.firstItemIndex = firstItemIndex;
-        this.lastItemIndex = lastItemIndex;
+class HeaderTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    containsRow(dataRowIndex) {
-        const headerRow = dataRowIndex < 0;
-        return headerRow || (dataRowIndex >= this.firstItemIndex && dataRowIndex <= this.lastItemIndex);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoGridHeaderTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridHeaderTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the column footer cell template of the Grid
+ * ([more information and example]({% slug templates_columns_grid %}#toc-footer-template)).
+ * Helps to customize the table footer cell for the column.
+ * To define a footer template, nest an `<ng-template>` tag with the
+ * [kendoGridFooterTemplate]({% slug api_grid_footertemplatedirective %}) directive inside the `<kendo-grid-column>` tag.
+ *
+ * The template context is set to the current column and the following additional fields are passed:
+ * * `column`&mdash;Defines an instance of the [ColumnComponent]({% slug api_grid_columncomponent %}) option.
+ * * `columnIndex`&mdash;Defines the current column index.
+ *
+ * For more information on how to display aggregates in the footer of the Grid,
+ * refer to the article on [aggregates]({% slug groupable_grid_with_aggregates %}).
+ *
+ * @example
+ * ```html
+ * <kendo-grid [data]="gridData" scrollable="none">
+ *    <kendo-grid-column field="ProductName">
+ *       <ng-template kendoGridFooterTemplate let-column let-columnIndex="columnIndex">
+ *          {{column.field}}({{columnIndex}})
+ *       </ng-template>
+ *    </kendo-grid-column>
+ * </kendo-grid>
+ * ```
+ */
+class FooterTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    intersects(start, end) {
-        return (start <= this.firstItemIndex && this.lastItemIndex <= end) ||
-            (this.firstItemIndex <= start && start <= this.lastItemIndex) ||
-            (this.firstItemIndex <= end && end <= this.lastItemIndex);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoGridFooterTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridFooterTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the template for the column menu in the Grid. Provides an option for
+ * customizing the content of the column menu for all or for specific columns.
+ * To define the content template, nest an `<ng-template>` tag with the
+ * `kendoGridColumnMenuTemplate` directive inside the `<kendo-grid>` or the `<kendo-grid-column>` component.
+ *
+ * The template context is passes through the following fields:
+ * - `service`&mdash;Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}).
+ * - `column`&mdash;Represents the Grid column.
+ *
+ * @example
+ * ```html
+ * <kendo-grid [kendoGridBinding]="data" [sortable]="true" [columnMenu]="true">
+ *   <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *     <kendo-grid-columnmenu-sort [service]="service"></kendo-grid-columnmenu-sort>
+ *   </ng-template>
+ *   <kendo-grid-column field="Field1">
+ *     <ng-template kendoGridColumnMenuTemplate let-service="service">
+ *       <kendo-grid-columnmenu-lock [service]="service"></kendo-grid-columnmenu-lock>
+ *       <kendo-grid-columnmenu-sort [service]="service"></kendo-grid-columnmenu-sort>
+ *     </ng-template>
+ *   </kendo-grid-column>
+ *   <kendo-grid-column field="Field2"></kendo-grid-column>
+ * </kendo-grid>
+ * ```
+ */
+class ColumnMenuTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuTemplateDirective, isStandalone: true, selector: "[kendoGridColumnMenuTemplate]", ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridColumnMenuTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+// Incremented each time the service is instantiated.
+let sequence = 0;
 /**
  * @hidden
  */
-class NavigationService {
-    zone;
-    domEvents;
-    pagerContextService;
-    scrollRequestService;
-    groupsService;
-    detailsService;
-    focusRoot;
-    editService;
-    cd;
-    ctx;
-    focusableParent;
-    changes;
-    cellKeydown = new EventEmitter();
-    set metadata(value) {
-        this.meta = value;
-        this.cursor.metadata = value;
-    }
-    get metadata() {
-        return this.meta;
-    }
-    get enabled() {
-        return this.alive;
-    }
-    get pagerEnabled() {
-        return this.alive && this.pagerIsNavigable;
+class IdService {
+    prefix;
+    constructor() {
+        this.prefix = `k-grid${sequence++}`;
     }
-    get tableEnabled() {
-        return this.alive && this.tableIsNavigable;
+    gridId() {
+        return this.prefix;
     }
-    get toolbarEnabled() {
-        return this.alive && this.toolbarIsNavigable;
+    cellId(rowIndex, colIndex) {
+        return `${this.prefix}-r${rowIndex}c${colIndex}`;
     }
-    get activeCell() {
-        if (this.mode !== 0 /* NavigationMode.Standby */) {
-            return this.cursor.cell;
-        }
+    selectionCheckboxId(itemIndex) {
+        return `${this.prefix}-checkbox${itemIndex}`;
     }
-    get activeRow() {
-        if (this.mode !== 0 /* NavigationMode.Standby */) {
-            return Object.assign({}, this.cursor.row, {
-                cells: this.cursor.row?.cells.toArray()
-            });
-        }
+    selectAllCheckboxId() {
+        return `${this.prefix}-select-all`;
     }
-    viewport;
-    columnViewport;
-    activeRowIndex = 0;
-    alive = false;
-    active = true;
-    mode = 0 /* NavigationMode.Standby */;
-    model = new NavigationModel();
-    cursor = new NavigationCursor(this.model);
-    meta;
-    subs;
-    pendingRowIndex;
-    virtualCell;
-    pagerIsNavigable = false;
-    tableIsNavigable = false;
-    toolbarIsNavigable = false;
-    get activeDataRow() {
-        return Math.max(0, this.activeRowIndex - this.meta.headerRows);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * @hidden
+ */
+const ColumnMenuErrorMessages = {
+    autoSizeColumn: `The auto size column does not work with enabled virtual columns.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu/#toc-autosize-column-item.`,
+    autoSizeAllColumns: `The auto size all columns does not work with enabled virtual columns.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu/#toc-autosize-all-columns-item.`,
+    serviceInput: `The service input of the predefined column menu components is mandatory.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu/#toc-customizing-the-content.`
+};
+/**
+ * @hidden
+ */
+const ClipboardErrorMessages = {
+    activeCellNavigable: `Grid must be navigable to use "activeCell" as clipboard target type.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/clipboard/#toc-active-cell.`,
+    selectionSelectable: `Grid must be selectable to use "selection" as clipboard target type.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/clipboard/#toc-current-selection.`
+};
+/**
+ * @hidden
+ */
+const ColumnConfigurationErrorMessages = {
+    fieldName: (field) => `Grid column field name '${field}' does not look like a valid JavaScript identifier.
+        Identifiers can contain only alphanumeric characters (including "$" or "_"), and may not start with a digit.
+        Please use only valid identifier names to ensure error-free operation.`,
+    width: (value, parsedValue) => `Expected numeric value for column width, but got a string "${value}". Treating as ${parsedValue}px.`,
+    invalidColumn: (column) => `Invalid column ${column}.`,
+    requiredWidth: (columnType) => `${columnType} columns feature requires all columns to have set width.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/columns/${columnType.toLowerCase()}.`,
+    requiredScroll: (columnType) => `${columnType} columns are only supported when scrolling is enabled.
+    See https://www.telerik.com/kendo-angular-ui/components/grid/columns/${columnType.toLowerCase()}/`,
+    groupColumnContent: 'ColumnGroupComponent should contain ColumnComponent or CommandColumnComponent.',
+    lockedParent: 'Locked child columns require their parent columns to be locked.',
+    columnNested: 'Columns can be nested only inside ColumnGroupComponent',
+    nestedInside: (nestedColumnNameType, parentColumnType) => `${nestedColumnNameType} cannot be nested inside ${parentColumnType}.`
+};
+/**
+ * @hidden
+ */
+const GridConfigurationErrorMessages = {
+    functionType: (propName, fn) => `${propName} must be a function, but received ${JSON.stringify(fn)}.`,
+    incompatibleFeatures: (feat1Name, feat2Name) => `'Having both ${feat1Name} and ${feat2Name} is not supported.'`,
+    nonLockedColumnPresent: 'There should be at least one non-locked column. See https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/#toc-known-limitations',
+    rowHeightVirtual: `The virtual scrolling functionality requires setting the rowHeight (and detailRowHeight when there are detail rows).
+        Row height and detail row height settings should be set only when virtual scrolling mode is enabled.
+        See https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-getting-started.`,
+    focusNavigable: 'The Grid should be configured as navigable to control focus. See https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation/.',
+    expandCollapseMethods: (expandMethodName, collapseMethodName, directiveName, callbackName) => `The ${expandMethodName} and ${collapseMethodName} methods should not be called
+        when using the ${directiveName} directive or the ${callbackName} callback.
+        These methods are provided only for backwards compatibility with legacy versions.`,
+    requiredEditService: `The default edit service of the editing directives works only when binding to plain array.
+        Please provide an editService. See https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-directives/#toc-custom-editing-service.`,
+    requiredModule: (exportedType, moduleName, componentSelector) => `Creating ${exportedType} requires including the ${moduleName} and adding the ${componentSelector} component.`,
+    groupBindingDirectives: `Using the "kendoGridGroupBinding" directive in combination with the "kendoGridExpandGroupBy" directive
+        or the "isGroupExpanded" callback is not supported. To use grouping with the "kendoGridGroupBinding" directive,
+        set the Grid "groupable" property to "true".`,
+    unsupportedMethod: (methodName, suggestedMethodName) => `Using ${methodName} in this context is not supported. Use ${suggestedMethodName} instead.`,
+    unsupportedToolbarConfig: `
+        Defining both a toolbar template and a ToolBarComponent within the Grid is not supported.
+        Please use either the ToolBarComponent or a custom template.`
+};
+
+/**
+ * @hidden
+ */
+const isSpanColumn = column => column.isSpanColumn;
+/**
+ * @hidden
+ */
+const isCheckboxColumn = column => column.isCheckboxColumn;
+/**
+ * @hidden
+ */
+const isRowReorderColumn = column => column.isRowReorderColumn;
+const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
+/**
+ * The base class for the column components of the Grid.
+ */
+class ColumnBase {
+    parent;
+    /**
+     * @hidden
+     */
+    matchesMedia = true;
+    /**
+     * The column index after reordering. The `orderIndex` is a read-only property. Setting this field does not affect column order.
+     *
+     * @default 0
+     */
+    orderIndex = 0;
+    /**
+     * @hidden
+     */
+    set leafIndex(value) {
+        this._leafIndex = value;
     }
-    constructor(zone, domEvents, pagerContextService, scrollRequestService, groupsService, detailsService, focusRoot, editService, cd, ctx, focusableParent) {
-        this.zone = zone;
-        this.domEvents = domEvents;
-        this.pagerContextService = pagerContextService;
-        this.scrollRequestService = scrollRequestService;
-        this.groupsService = groupsService;
-        this.detailsService = detailsService;
-        this.focusRoot = focusRoot;
-        this.editService = editService;
-        this.cd = cd;
-        this.ctx = ctx;
-        this.focusableParent = focusableParent;
-        this.changes = this.cursor.changes;
+    /**
+     * @hidden
+     */
+    get leafIndex() {
+        return this._leafIndex;
     }
-    init(meta, navigableOptions) {
-        this.setActiveSections(navigableOptions);
-        this.alive = true;
-        this.focusRoot.active = true;
-        this.metadata = meta;
-        const onStableSubscriber = (...operators) => (args) => this.zone.isStable ?
-            from([true]).pipe(map(() => args)) :
-            this.zone.onStable.pipe(take(1), map(() => args), ...operators);
-        const onStable = onStableSubscriber();
-        this.subs = new Subscription();
-        this.subs.add(this.cursor.changes.subscribe(args => this.onCursorChanges(args)));
-        this.subs.add(this.domEvents.focus.pipe(switchMap(onStable))
-            .subscribe((args) => this.navigateTo(args.target)));
-        this.subs.add(this.domEvents.focusOut.pipe(filter(() => this.mode !== 0 /* NavigationMode.Standby */), switchMap(onStableSubscriber(takeUntil(this.domEvents.focus))))
-            .subscribe(args => this.onFocusOut(args)));
-        this.subs.add(this.domEvents.windowBlur.pipe(filter(() => this.mode !== 0 /* NavigationMode.Standby */))
-            .subscribe(() => this.onWindowBlur()));
-        this.subs.add(
-        // Closing the editor will not always trigger focusout in Firefox.
-        // To get around this, we ensure that the cell is closed after editing.
-        this.editService.changes.pipe(filter(e => e.action !== 'edit' && this.mode === 2 /* NavigationMode.Content */), filter((e) => e.action === 'cellClose' && !e.prevented), switchMap(onStable))
-            .subscribe(() => this.leaveCell()));
-        this.subs.add(this.pagerContextService.pageChange
-            .subscribe(() => this.cursor.reset(0, 0)));
-        this.subs.add(this.domEvents.keydown
-            .subscribe(args => this.onKeydown(args)));
-        this.subs.add(this.domEvents.keydown.pipe(filter(args => args.keyCode === Keys.Tab && this.mode === 2 /* NavigationMode.Content */), switchMapTo(this.domEvents.focusOut.pipe(takeUntil(
-        // Timeout if focusOut doesn't fire very soon
-        interval(0).pipe(take(1))))))
-            .subscribe(() => this.onTabout()));
-        if (this.focusableParent) {
-            const element = new GridFocusableElement(this);
-            this.focusableParent.registerElement(element);
+    _leafIndex;
+    /**
+     * @hidden
+     */
+    isColumnGroup = false;
+    /**
+     * @hidden
+     */
+    isSpanColumn = false;
+    /**
+     * Indicates whether the column is resizable.
+     * @default true
+     */
+    resizable = true;
+    /**
+     * Indicates whether the column is reorderable.
+     * @default true
+     */
+    reorderable = true;
+    /**
+     * The width (in pixels) below which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
+     * The `autoFitColumn` and `autoFitColumns` methods have higher priority.
+     * @default 10
+     */
+    minResizableWidth = 10;
+    /**
+     * The width (in pixels) above which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
+     * By default, the maximum width is not restricted.
+     * The `autoFitColumn` and `autoFitColumns` methods have higher priority.
+     */
+    maxResizableWidth;
+    /**
+     * The title of the column.
+     */
+    title;
+    /**
+     * The width of the column (in pixels).
+     */
+    set width(value) {
+        if (typeof value === 'string') {
+            const parsedValue = this._width = parseInt(value, 10);
+            if (isDevMode()) {
+                console.warn(ColumnConfigurationErrorMessages.width(value, parsedValue));
+            }
         }
-        this.deactivateElements();
-    }
-    ngOnDestroy() {
-        if (this.subs) {
-            this.subs.unsubscribe();
+        else {
+            this._width = value;
         }
-        this.alive = false;
     }
-    registerCell(cell) {
-        if (cell.logicalRowIndex !== this.pendingRowIndex) {
-            const modelCell = this.model.registerCell(cell);
-            if (this.virtualCell && this.cursor.activateVirtualCell(modelCell)) {
-                this.virtualCell = false;
-            }
-        }
+    get width() { return this._width; }
+    /**
+     * Indicates whether the column will be resized during initialization so that it fits its header and row content.
+     */
+    autoSize;
+    /**
+     * Toggles the locked (frozen) state of the columns ([more information and example]({% slug locked_columns_grid %})).
+     *
+     * @default false
+     *
+     */
+    set locked(value) {
+        this._locked = value;
     }
-    registerCellOnCurrentRow(cell) {
-        if (cell.logicalRowIndex === this.pendingRowIndex) {
-            this.model.registerCell(cell);
+    get locked() {
+        return this._locked;
+    }
+    _locked = false;
+    /**
+     * Determines whether the column will be always visible when scrolling the Grid horizontally.
+     *
+     * @default false
+     */
+    sticky = false;
+    /**
+     * Sets the visibility of the column ([see example](slug:hidden_columns_grid#toc-using-the-built-in-options)).
+     *
+     * @default false
+     */
+    hidden;
+    /**
+     * Sets the condition that needs to be satisfied for a column to remain visible ([see example]({% slug styling_responsive_grid %}#toc-columns)).
+     * If you set the `hidden` property, the behavior of `media` is overridden.
+     *
+     * Accepts the device identifiers that are [available in Bootstrap 4](https://v4-alpha.getbootstrap.com/layout/grid/#grid-options)
+     * ([see example](slug:styling_responsive_grid)):
+     */
+    media;
+    /**
+     * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
+     * @default true
+     */
+    lockable = true;
+    /**
+     * Specifies if the column can be stuck or unstuck from the column menu.
+     * @default true
+     */
+    stickable = true;
+    /**
+     * Specifies if the column menu will be shown for the column.
+     * @default true
+     */
+    columnMenu = true;
+    /**
+     * Specifies if the column will be included in the column-chooser list.
+     * @default true
+     */
+    includeInChooser = true;
+    /**
+     * Allows setting the `role` attribute for the table cells (excluding the footer and header ones) of the column.
+     * @default "gridcell"
+     */
+    tableCellsRole = 'gridcell';
+    /**
+     * Sets the custom styles for the table cells (excluding the footer and header ones) of the column. Under the hood,
+     * to apply the property, the `style` option uses the
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
+     *
+     */
+    style;
+    /**
+     * Sets the custom styles for the header cell of the column. Under the hood, to apply the property,
+     * the `headerStyle` option uses the
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
+     *
+     */
+    headerStyle;
+    /**
+     * Sets the custom styles for the filter row cell. Under the hood, to apply the property,
+     * the `filterStyle` option uses the
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
+     *
+     */
+    filterStyle;
+    /**
+     * Sets the custom styles for the footer cell of the column. Under the hood, to apply the property,
+     * the `footerStyle` option uses the
+     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
+     *
+     */
+    footerStyle;
+    /**
+     * Sets the custom CSS classes to the column cells. Under the hood, to apply the property, the `class` option uses the
+     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
+     * To customize header and footer column cells, use the [headerClass]({% slug api_grid_columncomponent %}#toc-headerclass)
+     * and [footerClass]({% slug api_grid_columncomponent %}#toc-footerclass) inputs.
+     *
+     */
+    cssClass;
+    /**
+     * Sets the custom CSS classes to the column header cell. Under the hood, to apply the property,
+     * the `headerClass` option uses the
+     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
+     *
+     */
+    headerClass;
+    /**
+     * Sets the custom CSS classes to the filter row cell. Under the hood, to apply the property,
+     * the `filterClass` option uses the
+     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
+     *
+     */
+    filterClass;
+    /**
+     * Sets the custom CSS classes to the column footer cell. Under the hood, to apply the property,
+     * the `footerClass` option uses the
+     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
+     *
+     */
+    footerClass;
+    /**
+     * @hidden
+     */
+    headerTemplates = new QueryList();
+    /**
+     * @hidden
+     */
+    footerTemplate;
+    /**
+     * @hidden
+     */
+    columnMenuTemplates = new QueryList();
+    /**
+     * @hidden
+     */
+    resizeStartWidth;
+    /**
+     * @hidden
+     */
+    idService;
+    /**
+     * @hidden
+     */
+    implicitWidth;
+    /**
+     * @hidden
+     */
+    get level() {
+        if (this.parent && isSpanColumn(this.parent)) {
+            return this.parent.level;
         }
+        return this.parent ? this.parent.level + 1 : 0;
     }
-    unregisterCell(index, rowIndex, cell) {
-        this.model.unregisterCell(index, rowIndex, cell);
+    /**
+     * @hidden
+     */
+    get isLocked() {
+        return this.parent ? this.parent.isLocked : this.locked;
     }
-    registerRow(row) {
-        this.model.registerRow(row);
-        this.pendingRowIndex = row.logicalRowIndex;
+    _width;
+    /**
+     * @hidden
+     */
+    get colspan() {
+        return 1;
     }
-    updateRow(row) {
-        this.model.updateRow(row);
+    /**
+     * @hidden
+     */
+    rowspan(totalColumnLevels) {
+        return this.level < totalColumnLevels ? (totalColumnLevels - this.level) + 1 : 1;
     }
-    unregisterRow(index, row) {
-        this.model.unregisterRow(index, row);
-        const lastRow = this.model.lastRow;
-        if (lastRow && this.mode === 0 /* NavigationMode.Standby */) {
-            const maxIndex = (this.needsViewport() && this.viewport) ? this.viewport.lastItemIndex : lastRow.index;
-            if (this.activeRowIndex > maxIndex) {
-                this.cursor.reset(0, 0);
-            }
-        }
+    /**
+     * @hidden
+     */
+    get headerTemplateRef() {
+        const template = this.headerTemplates.first;
+        return template ? template.templateRef : undefined;
     }
-    isCellFocusable(cell) {
-        return this.alive &&
-            this.active &&
-            this.mode !== 2 /* NavigationMode.Content */ &&
-            this.cursor.isActive(cell.logicalRowIndex, cell.logicalColIndex);
+    /**
+     * @hidden
+     */
+    get footerTemplateRef() {
+        return this.footerTemplate ? this.footerTemplate.templateRef : undefined;
     }
-    isCellFocused(cell) {
-        return this.mode === 1 /* NavigationMode.Cursor */ && this.isCellFocusable(cell);
+    /**
+     * @hidden
+     */
+    get columnMenuTemplateRef() {
+        const template = this.columnMenuTemplates.first;
+        return template ? template.templateRef : null;
     }
-    navigateTo(el) {
-        if (!this.alive || !isDocumentAvailable()) {
-            return;
-        }
-        const cell = targetCell(el, this.meta.gridElement.nativeElement);
-        if (!cell) {
-            return;
-        }
-        const oldMode = this.mode;
-        const focusInCell = contains$1(cell.element, document.activeElement);
-        const focusInActiveRowContent = this.mode === 2 /* NavigationMode.Content */ &&
-            this.activeRowIndex === cell.rowIndex &&
-            el !== cell.element;
-        if (focusInCell) {
-            this.mode = 2 /* NavigationMode.Content */;
-            this.cursor.reset(cell.rowIndex, cell.colIndex);
-            this.activateRow();
-        }
-        else if (!focusInActiveRowContent) {
-            this.mode = 1 /* NavigationMode.Cursor */;
-            this.deactivateElements();
-            const alreadyActive = this.cursor.isActive(cell.rowIndex, cell.colIndex);
-            const isCursor = oldMode === 1 /* NavigationMode.Cursor */ && alreadyActive;
-            if (!isCursor) {
-                this.cursor.reset(cell.rowIndex, cell.colIndex);
-            }
-        }
+    /**
+     * @hidden
+     */
+    get displayTitle() {
+        return this.title;
     }
-    tryFocus(el) {
-        this.activateElements();
-        const focusable = findFocusableChild(el);
-        if (focusable) {
-            const cell = targetCell(focusable, this.meta.gridElement.nativeElement);
-            if (cell) {
-                this.cursor.reset(cell.rowIndex, cell.colIndex);
-                this.deactivateElements();
-                this.enterCell();
-            }
-            focusable.focus();
-        }
-        else {
-            this.deactivateElements();
-        }
-        return !!focusable;
-    }
-    needsViewport() {
-        return this.meta && this.meta.isVirtual;
-    }
-    setViewport(firstItemIndex, lastItemIndex) {
-        this.viewport = new NavigationViewport(firstItemIndex, lastItemIndex);
-        if (this.meta && this.meta.isVirtual && this.activeDataRow > -1) {
-            const dataRowIndex = this.activeDataRow;
-            const ahead = firstItemIndex - dataRowIndex;
-            const behind = dataRowIndex - lastItemIndex;
-            if (ahead > 0) {
-                this.cursor.reset(firstItemIndex + this.meta.headerRows);
-            }
-            else if (behind > 0) {
-                this.cursor.reset(lastItemIndex - this.meta.headerRows);
-            }
-        }
-    }
-    setColumnViewport(firstItemIndex, lastItemIndex) {
-        this.columnViewport = new NavigationViewport(firstItemIndex, lastItemIndex);
-        if (this.meta && this.meta.isVirtual && this.activeDataRow > -1) {
-            const activeColumnIndex = this.cursor.cell ? this.cursor.cell.colIndex : 0;
-            const ahead = firstItemIndex - activeColumnIndex;
-            const behind = activeColumnIndex - lastItemIndex;
-            if (ahead > 0) {
-                this.cursor.reset(undefined, firstItemIndex, false);
-            }
-            else if (behind > 0) {
-                this.cursor.reset(undefined, lastItemIndex, false);
-            }
-        }
-    }
-    focusCell(rowIndex = undefined, colIndex = undefined) {
-        this.mode = 1 /* NavigationMode.Cursor */;
-        this.cursor.reset(rowIndex, colIndex);
-        return this.activeCell;
+    /**
+     * @hidden
+     */
+    get isVisible() {
+        return !this.hidden && this.matchesMedia;
     }
-    focusCellByElement(el) {
-        const cell = targetCell(el, this.meta.gridElement.nativeElement);
-        if (cell) {
-            return this.focusCell(cell.rowIndex, cell.colIndex);
+    /**
+     * @hidden
+     */
+    constructor(parent, idService) {
+        this.parent = parent;
+        this.idService = idService;
+        if (parent && idService && parent.idService.gridId() === idService.gridId() && !isColumnContainer(parent)) {
+            throw new Error(ColumnConfigurationErrorMessages.columnNested);
         }
     }
-    focusNextCell(wrap = true) {
-        return this.focusAdjacentCell(true, wrap);
-    }
-    focusPrevCell(wrap = true) {
-        return this.focusAdjacentCell(false, wrap);
-    }
-    toggle(active) {
-        this.active = active;
-        this.cursor.announce();
-    }
-    hasFocus() {
-        return this.mode === 1 /* NavigationMode.Cursor */ || this.mode === 2 /* NavigationMode.Content */;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: IdService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-grid-column-base',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: ColumnBase }, { type: IdService }]; }, propDecorators: { resizable: [{
+                type: Input
+            }], reorderable: [{
+                type: Input
+            }], minResizableWidth: [{
+                type: Input
+            }], maxResizableWidth: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], autoSize: [{
+                type: Input
+            }], locked: [{
+                type: Input
+            }], sticky: [{
+                type: Input
+            }], hidden: [{
+                type: Input
+            }], media: [{
+                type: Input
+            }], lockable: [{
+                type: Input
+            }], stickable: [{
+                type: Input
+            }], columnMenu: [{
+                type: Input
+            }], includeInChooser: [{
+                type: Input
+            }], tableCellsRole: [{
+                type: Input
+            }], style: [{
+                type: Input
+            }], headerStyle: [{
+                type: Input
+            }], filterStyle: [{
+                type: Input
+            }], footerStyle: [{
+                type: Input
+            }], cssClass: [{
+                type: Input,
+                args: ['class']
+            }], headerClass: [{
+                type: Input
+            }], filterClass: [{
+                type: Input
+            }], footerClass: [{
+                type: Input
+            }], headerTemplates: [{
+                type: ContentChildren,
+                args: [HeaderTemplateDirective, { descendants: false }]
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: [FooterTemplateDirective, { static: false }]
+            }], columnMenuTemplates: [{
+                type: ContentChildren,
+                args: [ColumnMenuTemplateDirective]
+            }] } });
+
+/**
+ * Represents the group-header cell template of the Grid which helps to customize the content of the group header item.
+ * To define the group header template, nest an `<ng-template>` tag with the `kendoGridGroupHeaderTemplate`
+ * directive inside `<kendo-grid-column>`. ([See example](slug:grouping_grid_templates#toc-header-template)).
+ *
+ * The template context is set to the current data item and the following additional fields are passed:
+ * - `group`&mdash;The current group item.
+ * - `field`&mdash;The name of the field by which data is grouped.
+ * - `value`&mdash;The current group value.
+ * - `aggregates`&mdash;All aggregate values for the current group.
+ * - `index`&mdash;The index of the current group.
+ * - `expanded`&mdash;A boolean value indicating if the group is currently expanded.
+ *
+ * @example
+ * ```html
+ * <kendo-grid [data]="gridData" [group]="groups">
+ *    <kendo-grid-column field="ProductName">
+ *       <ng-template kendoGridGroupHeaderTemplate let-group let-field="field" let-value="value">
+ *          <strong>{{field}}</strong>: {{value}}
+ *       </ng-template>
+ *    </kendo-grid-column>
+ * </kendo-grid>
+ * ```
+ */
+class GroupHeaderTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    autoFocusCell(start, end) {
-        return !this.meta.virtualColumns || end < this.meta.columns.lockedLeafColumns.length || this.columnViewport.intersects(start, end);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupHeaderTemplateDirective, isStandalone: true, selector: "[kendoGridGroupHeaderTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridGroupHeaderTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the group-header column template of the Grid which helps to customize the content of the group headers.
+ * To define the group header template, nest an `<ng-template>` tag with the `kendoGridGroupHeaderColumnTemplate`
+ * directive inside `<kendo-grid-column>`. ([See example](slug:grouping_grid_templates#toc-header-column-template)).
+ *
+ * The template context is set to the current data item and the following additional fields are passed:
+ * - `group`&mdash;The current group item.
+ * - `field`&mdash;The name of the field by which data is grouped.
+ * - `value`&mdash;The current group value.
+ * - `aggregates`&mdash;All aggregate values for the current group.
+ *
+ * @example
+ * ```html
+ * <kendo-grid-column field="ProductName" title="Product Name">
+ *     <ng-template kendoGridGroupHeaderColumnTemplate let-group="group" let-aggregates="aggregates">
+ *         <span title="Group Header Column Template for ProductName">
+ *             Count: {{ aggregates.Discontinued.count }}
+ *         </span>
+ *     </ng-template>
+ * </kendo-grid-column>
+ * ```
+ */
+class GroupHeaderColumnTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    setActiveSections(navigableOptions) {
-        this.pagerIsNavigable = navigableOptions.includes('pager');
-        this.tableIsNavigable = navigableOptions.includes('table');
-        this.toolbarIsNavigable = navigableOptions.includes('toolbar');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderColumnTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupHeaderColumnTemplateDirective, isStandalone: true, selector: "[kendoGridGroupHeaderColumnTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderColumnTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridGroupHeaderColumnTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the column group footer cell template of the Grid which helps to customize the group footer cell for the column.
+ * To define the group footer template, nest an `<ng-template>` tag with the `kendoGridGroupFooterTemplate` directive
+ * inside `<kendo-grid-column>`.
+ *
+ * The template context is set to the current data item and the following additional fields are passed:
+ * - `column`&mdash;Defines an instance of the `ColumnComponent` option.
+ * - `field`&mdash;The current column field name.
+ * - `group`&mdash;The current group data item.
+ * - `aggregates`&mdash;All aggregate values for the current group.
+ *
+ * @example
+ * ```html
+ * <kendo-grid [data]="gridData" [group]="groups">
+ *    <kendo-grid-column field="ProductName">
+ *       <ng-template kendoGridGroupFooterTemplate let-aggregates let-field="field">
+ *          Count: {{aggregates[field].count}}
+ *       </ng-template>
+ *    </kendo-grid-column>
+ * </kendo-grid>
+ * ```
+ */
+class GroupFooterTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    focusAdjacentCell(fwd, wrap) {
-        this.focusCell();
-        let success = fwd ? this.moveCursorFwd() : this.moveCursorBwd();
-        if (wrap && !success) {
-            success = fwd ? this.cursor.moveDown(1) : this.cursor.moveUp(1);
-            if (success) {
-                const row = this.cursor.row;
-                const colIdx = fwd ? 0 : this.cursor.lastCellIndex(row);
-                this.cursor.reset(row.index, colIdx);
-            }
-        }
-        if (success) {
-            return this.activeCell;
-        }
-        else {
-            this.mode = 0 /* NavigationMode.Standby */;
-            this.cursor.announce();
-        }
-        return null;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupFooterTemplateDirective, isStandalone: true, selector: "[kendoGridGroupFooterTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridGroupFooterTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the filter-cell template.
+ * Helps to customize the content of the filter cell. To define the filter cell template, nest an `<ng-template>` tag with the
+ * `kendoGridFilterCellTemplate` directive inside a `<kendo-grid-column>` tag ([see example]({% slug filter_row %}#toc-custom-filters)).
+ *
+ * The template context is set to the current data item and the following additional fields are passed:
+ * - `column`&mdash;Defines an instance of the [`ColumnComponent`]({% slug api_grid_columncomponent %}) option. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
+ * - `filter`&mdash;The provided filter descriptors. Use it as an alias for a template variable by utilizing the `let-filter="filter"` syntax.
+ *
+ * ```html
+ * <kendo-grid-column field="CategoryID" title="Category">
+ *     <ng-template kendoGridFilterCellTemplate
+ *         let-column="column"
+ *         let-filter="filter"
+ *         >
+ *         ...
+ *    </ng-template>
+ *    ...
+ * </kendo-grid-column>
+ * ```
+ */
+class FilterCellTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    enterCell() {
-        const cell = this.cursor.cell;
-        if (!cell) {
-            return;
-        }
-        const group = cell.focusGroup;
-        const focusable = group && group.canFocus();
-        this.mode = focusable ? 2 /* NavigationMode.Content */ : 1 /* NavigationMode.Cursor */;
-        this.cursor.announce();
-        if (focusable) {
-            this.activateRow();
-            group.focus();
-        }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterCellTemplateDirective, isStandalone: true, selector: "[kendoGridFilterCellTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridFilterCellTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the filter-menu template.
+ * Helps to customize the content of the filter menu. To define the filter menu template, nest an `<ng-template>` tag with the
+ * `kendoGridFilterMenuTemplate` directive inside a `<kendo-grid-column>` tag
+ * ([see example]({% slug filter_menu %}#toc-custom-filters)).
+ *
+ * The template context is set to the current data item and the following additional fields are passed:
+ * - `column`&mdash;Defines an instance of the [`ColumnComponent`]({% slug api_grid_columncomponent %}) option. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
+ * - `filter`&mdash;The provided filter descriptors. Use it as an alias for a template variable by utilizing the `let-filter="filter"` syntax.
+ * - `filterService`&mdash;Represents the [`FilterService`]({% slug api_grid_filterservice %}). Use it as an alias for a template variable by utilizing the `let-filterService="filterService"` syntax.
+ *
+ * ```html
+ * <kendo-grid-column field="CategoryID" title="Category">
+ *     <ng-template kendoGridFilterMenuTemplate
+ *         let-column="column"
+ *         let-filter="filter"
+ *         let-filterService="filterService"
+ *         >
+ *         ...
+ *    </ng-template>
+ * </kendo-grid-column>
+ * ```
+ */
+class FilterMenuTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    leaveCell() {
-        const cell = this.cursor.cell;
-        if (!cell) {
-            return;
-        }
-        const group = cell.focusGroup;
-        const focusable = group && group.canFocus();
-        if (!focusable) {
-            this.deactivateElements();
-        }
-        this.mode = 1 /* NavigationMode.Cursor */;
-        this.cursor.announce();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuTemplateDirective, isStandalone: true, selector: "[kendoGridFilterMenuTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridFilterMenuTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+function isColumnComponent(column) {
+    return isPresent(column.field);
+}
+/**
+ * Represents the column of the Grid. [See example](slug:columns_config#toc-using-the-column-component)
+ *
+ * @example
+ * ```html
+ * <kendo-grid [data]="gridData">
+ *   <kendo-grid-column field="ProductID" title="Product ID"></kendo-grid-column>
+ *   <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
+ *   <kendo-grid-column field="UnitPrice" title="Unit Price"></kendo-grid-column>
+ * </kendo-grid>
+ * ```
+ */
+class ColumnComponent extends ColumnBase {
+    /**
+     * The field to which the column is bound.
+     */
+    field;
+    /**
+     * The format that is applied to the value before it is displayed. For more information on the supported date and number formats,
+     * refer to the [Column Formats](slug:formats_columns_grid) documentation article.
+     */
+    format;
+    /**
+     * Allows the user to click the column headers and emits the `sortChange` event. [See example](slug:sorting_grid).
+     *
+     * @default true
+     */
+    sortable = true;
+    /**
+     * Determines if the column can be dragged to the group panel.
+     * If set to `false`, you can group the columns by the column field by using the API of the Grid.
+     *
+     * @default true
+     */
+    groupable = true;
+    /**
+     * Defines the editor type. [See example](slug:inline_editing_grid#toc-using-reactive-forms).
+     * Used when the column enters the edit mode.
+     *
+     * @default 'text'
+     */
+    editor = 'text';
+    /**
+     * Defines the filter type that is displayed inside the filter row. [See example](slug:filtering_grid#toc-filter-data-types).
+     *
+     * @default 'text'
+     */
+    filter = 'text';
+    /**
+     * Defines if a filter UI will be displayed for this column. [See example](slug:filtering_grid).
+     *
+     * @default true
+     */
+    filterable = true;
+    /**
+     * Defines whether the column is editable. [See example](slug:make_fields_uneditable_grid).
+     *
+     * @default true
+     */
+    editable = true;
+    template;
+    groupHeaderTemplate;
+    groupHeaderColumnTemplate;
+    groupFooterTemplate;
+    editTemplate;
+    filterCellTemplate;
+    filterMenuTemplate;
+    constructor(parent, idService) {
+        super(parent, idService);
     }
-    activateElements() {
-        this.focusRoot.activate();
+    get templateRef() {
+        return this.template ? this.template.templateRef : undefined;
     }
-    deactivateElements() {
-        this.focusRoot.deactivate();
+    get groupHeaderTemplateRef() {
+        return this.groupHeaderTemplate ? this.groupHeaderTemplate.templateRef : undefined;
     }
-    activateRow() {
-        this.cursor.row.cells
-            .forEach(cell => cell.focusGroup && cell.focusGroup.activate());
+    get groupHeaderColumnTemplateRef() {
+        return this.groupHeaderColumnTemplate ? this.groupHeaderColumnTemplate.templateRef : undefined;
     }
-    moveCursorFwd() {
-        return this.ctx.localization.rtl ? this.cursor.moveLeft() : this.cursor.moveRight();
+    get groupFooterTemplateRef() {
+        return this.groupFooterTemplate ? this.groupFooterTemplate.templateRef : undefined;
     }
-    moveCursorBwd() {
-        return this.ctx.localization.rtl ? this.cursor.moveRight() : this.cursor.moveLeft();
+    get editTemplateRef() {
+        return this.editTemplate ? this.editTemplate.templateRef : undefined;
     }
-    onCursorKeydown(args) {
-        let preventDefault = false;
-        const modifier = args.ctrlKey || args.metaKey;
-        const step = modifier ? 5 : 1;
-        if (!this.onCellKeydown(args)) {
-            return;
-        }
-        const row = this.cursor.row;
-        switch (args.keyCode) {
-            case Keys.ArrowDown:
-                if (args.shiftKey) {
-                    if (this.ctx.grid.blockArrowSelection) {
-                        return;
-                    }
-                    preventDefault = this.cursor.moveDown(step);
-                    if (this.activeRow?.dataItem) {
-                        this.handleVerticalArrowSelection(step);
-                    }
-                }
-                else {
-                    preventDefault = this.cursor.moveDown(step);
-                }
-                break;
-            case Keys.ArrowUp:
-                if (args.shiftKey) {
-                    if (this.ctx.grid.blockArrowSelection) {
-                        return;
-                    }
-                    preventDefault = this.cursor.moveUp(step);
-                    if (this.activeRow?.dataItem) {
-                        this.handleVerticalArrowSelection(-step);
-                    }
-                }
-                else {
-                    preventDefault = this.cursor.moveUp(step);
-                }
-                break;
-            case Keys.ArrowRight:
-                if (args.shiftKey) {
-                    if (this.ctx.grid.blockArrowSelection) {
-                        return;
-                    }
-                    preventDefault = this.moveCursorFwd();
-                    this.handleHorizontalArrowSelection(args);
-                }
-                else {
-                    preventDefault = this.moveCursorFwd();
-                }
-                break;
-            case Keys.ArrowLeft:
-                if (args.shiftKey) {
-                    if (this.ctx.grid.blockArrowSelection) {
-                        return;
-                    }
-                    preventDefault = this.moveCursorBwd();
-                    this.handleHorizontalArrowSelection(args);
-                }
-                else {
-                    preventDefault = this.moveCursorBwd();
-                }
-                break;
-            case Keys.PageDown:
-                if (this.metadata.isVirtual && this.viewport) {
-                    let nextItemIndex = this.meta.headerRows + this.viewport.lastItemIndex + 1;
-                    if (this.metadata.hasDetailTemplate) {
-                        nextItemIndex++;
-                    }
-                    nextItemIndex = Math.min(this.meta.maxLogicalRowIndex, nextItemIndex);
-                    this.cursor.reset(nextItemIndex);
-                    preventDefault = true;
-                }
-                else if (this.metadata.hasPager) {
-                    this.zone.run(() => this.pagerContextService.nextPage());
-                    preventDefault = true;
-                }
-                break;
-            case Keys.PageUp:
-                if (this.metadata.isVirtual && this.viewport) {
-                    const viewportSize = this.viewport.lastItemIndex - this.viewport.firstItemIndex;
-                    const firstItemIndex = this.viewport.firstItemIndex;
-                    const nextItemIndex = Math.max(this.meta.headerRows, firstItemIndex - viewportSize - 1);
-                    this.cursor.reset(nextItemIndex);
-                    preventDefault = true;
-                }
-                else if (this.metadata.hasPager) {
-                    this.zone.run(() => this.pagerContextService.prevPage());
-                    preventDefault = true;
-                }
-                break;
-            case Keys.Home:
-                if (modifier) {
-                    if (this.meta.isVirtual) {
-                        this.cursor.reset(this.meta.headerRows, 0, false);
-                    }
-                    else {
-                        this.cursor.reset(this.model.firstRow.index, 0, false);
-                    }
-                }
-                else {
-                    let firstColumnIndex = 0;
-                    if (this.meta.hasDetailTemplate && row.index < this.meta.headerRows) {
-                        firstColumnIndex = 1;
-                    }
-                    this.cursor.reset(row.index, firstColumnIndex, false);
-                }
-                preventDefault = true;
-                break;
-            case Keys.End:
-                if (modifier) {
-                    if (this.meta.isVirtual) {
-                        let lastRowIndex = this.meta.maxLogicalRowIndex;
-                        if (this.meta.hasDetailTemplate) {
-                            lastRowIndex--;
-                        }
-                        this.cursor.reset(lastRowIndex, this.cursor.lastCellIndex(), false);
-                    }
-                    else {
-                        this.cursor.reset(this.model.lastRow.index, this.cursor.lastCellIndex(this.model.lastRow), false);
-                    }
-                }
-                else {
-                    const lastIndex = this.cursor.lastCellIndex(row);
-                    const cell = this.model.findCell(lastIndex, row);
-                    if (cell) {
-                        this.cursor.reset(cell.rowIndex, cell.colIndex);
-                    }
-                    else {
-                        this.cursor.reset(row.index, lastIndex);
-                    }
-                }
-                preventDefault = true;
-                break;
-            case Keys.Enter:
-            case Keys.F2: {
-                const groupItem = row.groupItem;
-                if (groupItem) {
-                    this.zone.run(() => this.groupsService.toggleRow(groupItem));
-                }
-                else if (this.cursor.cell.detailExpandCell) {
-                    this.zone.run(() => this.detailsService.toggleRow(row.dataRowIndex, row.dataItem));
-                }
-                else {
-                    this.enterCell();
-                    if (!this.cursor.cell.focusGroup.isNavigable()) {
-                        preventDefault = true;
-                    }
-                }
-                break;
-            }
-            default:
-                if (!args.ctrlKey && !args.altKey && isPrintableCharacter(args.key)) {
-                    this.enterCell();
-                }
-        }
-        if (preventDefault) {
-            args.preventDefault();
-        }
-    }
-    onContentKeydown(args) {
-        if (!this.onCellKeydown(args)) {
-            return;
-        }
-        const confirm = !args.defaultPrevented && args.keyCode === Keys.Enter && isTextInput(args.srcElement);
-        if (args.keyCode === Keys.Escape || args.keyCode === Keys.F2 || confirm) {
-            this.leaveCell();
-            this.cursor.reset();
-            args.stopPropagation();
-        }
-        else if (isNavigationKey(args.keyCode) && this.cursor.cell.focusGroup.isNavigable()) {
-            this.onCursorKeydown(args);
-            if (args.defaultPrevented) {
-                this.leaveCell();
-            }
-        }
-    }
-    onCellKeydown(args) {
-        if (this.editService.isEditingCell()) {
-            const confirm = args.keyCode === Keys.Enter;
-            const cancel = args.keyCode === Keys.Escape;
-            const navigate = isNavigationKey(args.keyCode);
-            if (confirm) {
-                this.editService.closeCell(args);
-            }
-            else if (cancel) {
-                this.editService.closeCell(args);
-                this.cd.detectChanges();
-            }
-            else if (navigate) {
-                return false;
-            }
-        }
-        this.cellKeydown.emit(args);
-        return true;
-    }
-    onCursorChanges(args) {
-        this.activeRowIndex = args.rowIndex;
-        const dataRowIndex = this.activeDataRow;
-        if (this.meta && (this.meta.isVirtual &&
-            args.rowIndex >= this.meta.headerRows &&
-            this.viewport &&
-            !this.viewport.containsRow(dataRowIndex) && dataRowIndex > -1)) {
-            this.scrollRequestService.scrollTo({ row: dataRowIndex });
-        }
-        if (this.meta.virtualColumns && args.colIndex >= this.meta.columns.lockedLeafColumns.length) {
-            const cell = this.activeCell;
-            const { start, end } = this.model.cellRange(cell);
-            if (!cell) {
-                this.virtualCell = true;
-            }
-            if ((!cell && this.mode !== 0 /* NavigationMode.Standby */) || (cell && !this.columnViewport.intersects(start, end))) {
-                this.scrollRequestService.scrollTo({ column: args.colIndex - (this.metadata.hasDetailTemplate ? 1 : 0) });
-            }
-        }
-    }
-    onFocusOut(args) {
-        if (isVisible(args.target)) {
-            this.mode = 0 /* NavigationMode.Standby */;
-        }
-        else {
-            // Focused target is no longer visible,
-            // reset to cursor mode and recapture focus.
-            this.mode = 1 /* NavigationMode.Cursor */;
-        }
-        this.deactivateElements();
-        this.cursor.announce();
-    }
-    onWindowBlur() {
-        this.mode = 0 /* NavigationMode.Standby */;
-        this.deactivateElements();
-        this.cursor.announce();
+    get filterCellTemplateRef() {
+        return this.filterCellTemplate ? this.filterCellTemplate.templateRef : undefined;
     }
-    onKeydown(args) {
-        if (this.mode === 1 /* NavigationMode.Cursor */) {
-            this.onCursorKeydown(args);
-        }
-        else if (this.mode === 2 /* NavigationMode.Content */) {
-            this.onContentKeydown(args);
-        }
+    get filterMenuTemplateRef() {
+        return this.filterMenuTemplate ? this.filterMenuTemplate.templateRef : undefined;
     }
-    onTabout() {
-        // Tabbed out of the last focusable content element
-        // reset to cursor mode and recapture focus.
-        if (this.cursor.cell.focusGroup.isNavigable()) {
-            // Unless the cell has a single focusable element,
-            // otherwise we'd return to Content mode and enter an endless loop
-            return;
-        }
-        this.leaveCell();
-        this.cursor.reset();
+    get displayTitle() {
+        return this.title === undefined ? this.field : this.title;
     }
-    handleVerticalArrowSelection(args) {
-        const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
-        const rowSelectionEnabled = this.ctx.grid.selectionService.active && !this.ctx.grid.selectableSettings.checkboxOnly;
-        if (cellSelectionEnabled || rowSelectionEnabled) {
-            const selectionService = this.ctx.grid[cellSelectionEnabled ? 'cellSelectionService' : 'selectionService'];
-            const colIdx = this.cursor.cell ? this.cursor.cell.colIndex : 0;
-            const rowIdx = this.activeRow.dataRowIndex - this.ctx.grid.skip;
-            const dataItem = selectionService.settings.view.at(rowIdx);
-            const item = { index: this.activeRow.dataRowIndex, data: dataItem, column: this.ctx.grid.columnsContainer.leafColumnsToRender[colIdx] };
-            if (selectionService.options.mode === 'multiple') {
-                cellSelectionEnabled ? this.handleMultipleArrowCellSelection(item) : this.handleMultipleArrowRowSelection(item);
-            }
-            else {
-                selectionService.handleClick(item, args);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
+            {
+                provide: ColumnBase,
+                useExisting: forwardRef(() => ColumnComponent)
             }
-        }
-    }
-    handleHorizontalArrowSelection(args) {
-        const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
-        if (cellSelectionEnabled) {
-            const selectionService = this.ctx.grid[cellSelectionEnabled ? 'cellSelectionService' : 'selectionService'];
-            const row = this.activeRow;
-            const colIdx = this.cursor.cell ? this.cursor.cell.colIndex : 0;
-            const dataItem = selectionService.settings.view.at(row.dataRowIndex - this.ctx.grid.skip);
-            const item = { index: row.dataRowIndex, data: dataItem, column: this.ctx.grid.columnsContainer.leafColumnsToRender[colIdx] };
-            if (!isPresent$1(dataItem) || !isPresent$1(item.column)) {
-                return;
-            }
-            if (selectionService.options.mode === 'multiple') {
-                this.handleMultipleArrowCellSelection(item);
-            }
-            else {
-                selectionService.handleClick(item, args);
-            }
-        }
-    }
-    handleMultipleArrowCellSelection(item) {
-        const cellSelectionService = this.ctx.grid.cellSelectionService;
-        const startRowIndex = Math.min(cellSelectionService.lastSelectionItemRowIndex, item.index);
-        const startColIndex = Math.min(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
-        const endRowIndex = Math.max(cellSelectionService.lastSelectionItemRowIndex, item.index);
-        const endColIndex = Math.max(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
-        const ev = cellSelectionService.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex);
-        cellSelectionService.changes.emit(ev);
-    }
-    handleMultipleArrowRowSelection(item) {
-        const rowSelectionService = this.ctx.grid.selectionService;
-        const startRowIndex = Math.min(rowSelectionService.lastSelectionStartIndex, item.index);
-        const endRowIndex = Math.max(rowSelectionService.lastSelectionStartIndex, item.index);
-        const ev = rowSelectionService.selectRange(startRowIndex, endRowIndex);
-        rowSelectionService.changes.emit(ev);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: i44.PagerContextService }, { token: ScrollRequestService }, { token: GroupsService }, { token: DetailsService }, { token: FocusRoot }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
+        ], queries: [{ propertyName: "template", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: GroupHeaderTemplateDirective, descendants: true }, { propertyName: "groupHeaderColumnTemplate", first: true, predicate: GroupHeaderColumnTemplateDirective, descendants: true }, { propertyName: "groupFooterTemplate", first: true, predicate: GroupFooterTemplateDirective, descendants: true }, { propertyName: "editTemplate", first: true, predicate: EditTemplateDirective, descendants: true }, { propertyName: "filterCellTemplate", first: true, predicate: FilterCellTemplateDirective, descendants: true }, { propertyName: "filterMenuTemplate", first: true, predicate: FilterMenuTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: DomEventsService }, { type: i44.PagerContextService }, { type: ScrollRequestService }, { type: GroupsService }, { type: DetailsService }, { type: FocusRoot }, { type: EditService }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: FocusableDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ColumnBase,
+                            useExisting: forwardRef(() => ColumnComponent)
+                        }
+                    ],
+                    selector: 'kendo-grid-column',
+                    template: ``,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: ColumnBase, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Host
+                }, {
                     type: Optional
-                }] }]; } });
+                }] }, { type: IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { field: [{
+                type: Input
+            }], format: [{
+                type: Input
+            }], sortable: [{
+                type: Input
+            }], groupable: [{
+                type: Input
+            }], editor: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], filterable: [{
+                type: Input
+            }], editable: [{
+                type: Input
+            }], template: [{
+                type: ContentChild,
+                args: [CellTemplateDirective, { static: false }]
+            }], groupHeaderTemplate: [{
+                type: ContentChild,
+                args: [GroupHeaderTemplateDirective, { static: false }]
+            }], groupHeaderColumnTemplate: [{
+                type: ContentChild,
+                args: [GroupHeaderColumnTemplateDirective, { static: false }]
+            }], groupFooterTemplate: [{
+                type: ContentChild,
+                args: [GroupFooterTemplateDirective, { static: false }]
+            }], editTemplate: [{
+                type: ContentChild,
+                args: [EditTemplateDirective, { static: false }]
+            }], filterCellTemplate: [{
+                type: ContentChild,
+                args: [FilterCellTemplateDirective, { static: false }]
+            }], filterMenuTemplate: [{
+                type: ContentChild,
+                args: [FilterMenuTemplateDirective, { static: false }]
+            }] } });
 
 /**
  * @hidden
  */
-const preventOnDblClick$1 = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
-const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
-const isDeleteButton = or(hasClass('k-i-x'), hasClass('k-svg-i-x'), hasClass('k-icon-button'));
-const isSortIcon = or(hasClass('k-i-sort-asc-small'), hasClass('k-i-sort-desc-small'), hasClass('k-svg-i-sort-asc-small'), hasClass('k-svg-i-sort-desc-small'));
-const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
-const elementUnderCursor = ({ clientX, clientY }) => isDocumentAvailable() && document.elementFromPoint(clientX, clientY);
-const hideThenShow = (element, cont) => {
-    element.style.display = 'none';
-    const result = cont();
-    element.style.display = 'block';
-    return result;
-};
+function isSpanColumnComponent(column) {
+    return column.isSpanColumn;
+}
 /**
- * @hidden
+ * Represents a column which can be spanned over multiple data cells while the individual
+ * header and footer cells are retained ([see example]({% slug spanned_columns_grid %})).
+ * Enables you to achieve more flexible layout while keeping the built-in UI element for
+ * [sorting]({% slug sorting_grid %}), [filtering]({% slug filtering_grid %}), and
+ * [grouping]({% slug grouping_grid %}). Wrap the columns that will be
+ * merged inside the `<kendo-grid-span-column>` tag.
+ *
+ * ```html
+ * <kendo-grid-span-column>
+ *   <kendo-grid-column field="field1"></kendo-grid-column>
+ *   <kendo-grid-column field="field2"></kendo-grid-column>
+ *   <ng-template kendoGridCellTemplate let-dataItem>
+ *     <h5>{{ dataItem.field1 }}</h5>
+ *     <p>{{ dataItem.field2 }}</p>
+ *   </ng-template>
+ * </kendo-grid-span-column>
+ * ```
  */
-class DraggableColumnDirective {
-    draggable;
-    element;
-    zone;
-    service;
-    hint;
-    cue;
-    nav;
-    renderer;
-    context = {};
-    set enableDrag(enabled) {
-        this.enabled = enabled;
-        this.updateTouchAction();
+class SpanColumnComponent extends ColumnBase {
+    /*
+     * @hidden
+     */
+    isSpanColumn = true;
+    template = new QueryList();
+    editTemplate = new QueryList();
+    /**
+     * @hidden
+     */
+    childColumns = new QueryList();
+    /**
+     * @hidden
+     */
+    title;
+    /**
+     * @hidden
+     */
+    headerStyle;
+    /**
+     * @hidden
+     */
+    footerStyle;
+    /**
+     * @hidden
+     */
+    headerClass;
+    /**
+     * @hidden
+     */
+    footerClass;
+    /**
+     * @hidden
+     */
+    includeInChooser = false;
+    /**
+     * Defines whether the edit template of the column will be rendered.
+     * To enable the editing functionality for a spanned column, set an edit template for it ([see example](slug:custom_reactive_editing_grid)).
+     * @default false
+     */
+    set editable(value) {
+        this._editable = value;
     }
-    drag = new EventEmitter();
-    subscriptions = new Subscription();
-    enabled;
-    constructor(draggable, element, zone, service, hint, cue, nav, renderer) {
-        this.draggable = draggable;
-        this.element = element;
-        this.zone = zone;
-        this.service = service;
-        this.hint = hint;
-        this.cue = cue;
-        this.nav = nav;
-        this.renderer = renderer;
+    get editable() {
+        return isPresent(this.editTemplateRef) && this._editable;
     }
-    ngOnInit() {
-        this.subscriptions.add(this.zone.runOutsideAngular(() => this.draggable.kendoPress.pipe(filter(_ => this.enabled), filter(({ originalEvent: { target } }) => target === this.element.nativeElement || skipButtons(target)), tap((e) => {
-            const originalEvent = e.originalEvent;
-            if (!e.isTouch) {
-                originalEvent.preventDefault();
-            }
-            this.nav.navigateTo(originalEvent.target);
-        }), switchMap(preventOnDblClick$1(this.draggable.kendoRelease)), tap((_) => {
-            this.hint.create(this.context.hint);
-            this.cue.create();
-        }), switchMap(down => this.draggable.kendoDrag.pipe(tap((e) => {
-            if (e.isTouch) {
-                e.originalEvent.preventDefault();
-            }
-        }), tap(this.hint.attach()), tap(this.cue.attach()), takeUntil(this.draggable.kendoRelease), map(move => ({ move, down })))), tap(this.performDrag.bind(this)), switchMapTo(this.draggable.kendoRelease)).subscribe(this.drop.bind(this))));
+    /**
+     * @hidden
+     * added for backwards compitability
+     */
+    set width(_value) {
     }
-    ngOnDestroy() {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
+    get width() {
+        return this.childColumns.reduce((total, column) => total + column.width, 0);
     }
-    drop(upEvent) {
-        this.hint.remove();
-        this.cue.remove();
-        this.service.notifyDrop(this, upEvent);
+    /**
+     * @hidden
+     */
+    get leafIndex() {
+        return this.childColumns.first.leafIndex;
     }
-    performDrag({ move }) {
-        this.hint.move(move);
-        const cursorElement = this.elementUnderCursor(move);
-        if (cursorElement) {
-            this.service.notifyDrag(this, cursorElement, move);
+    _editable = true;
+    constructor(parent, idService) {
+        super(parent, idService);
+        if (parent && parent.isSpanColumn) {
+            throw new Error(ColumnConfigurationErrorMessages.nestedInside('SpanColumnComponent', 'SpanColumnComponent'));
         }
-        this.drag.emit({
-            draggable: this,
-            mouseEvent: move
-        });
     }
-    elementUnderCursor(mouseEvent) {
-        this.hint.hide();
-        let target = elementUnderCursor(mouseEvent);
-        if (target && /k-grouping-dropclue/.test(target.className)) {
-            target = hideThenShow(target, elementUnderCursor.bind(this, mouseEvent));
-        }
-        this.hint.show();
-        return target;
+    /**
+     * @hidden
+     */
+    get templateRef() {
+        const template = this.template.first;
+        return template ? template.templateRef : undefined;
     }
-    updateTouchAction() {
-        if (!this.element) {
-            return;
-        }
-        // eslint-disable-next-line no-unused-expressions
-        this.enabled ? this.renderer.addClass(this.element.nativeElement, 'k-touch-action-none') :
-            this.renderer.removeClass(this.element.nativeElement, 'k-touch-action-none');
+    /**
+     * @hidden
+     */
+    get editTemplateRef() {
+        const editTemplate = this.editTemplate.first;
+        return editTemplate ? editTemplate.templateRef : undefined;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, deps: [{ token: i1$3.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DragAndDropService }, { token: DragHintService }, { token: DropCueService }, { token: NavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableColumnDirective, isStandalone: true, selector: "[kendoDraggableColumn]", inputs: { context: "context", enableDrag: "enableDrag" }, outputs: { drag: "drag" }, ngImport: i0 });
+    /**
+     * @hidden
+     */
+    get colspan() {
+        return this.childColumns.filter(c => c.isVisible).length;
+    }
+    /**
+     * Toggles the locked (frozen) state of the columns ([see example](slug:locked_columns_grid)).
+     * @default false
+     */
+    set locked(value) {
+        this._locked = value;
+    }
+    get locked() {
+        return this._locked || this.childColumns.some(c => c.locked);
+    }
+    get childrenArray() {
+        return this.childColumns.toArray();
+    }
+    get hasChildren() {
+        return this.childColumns.length > 0;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpanColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpanColumnComponent, isStandalone: true, selector: "kendo-grid-span-column", inputs: { editable: "editable", locked: "locked" }, providers: [
+            {
+                provide: ColumnBase,
+                useExisting: forwardRef(() => SpanColumnComponent)
+            }
+        ], queries: [{ propertyName: "template", predicate: CellTemplateDirective }, { propertyName: "editTemplate", predicate: EditTemplateDirective }, { propertyName: "childColumns", predicate: ColumnComponent }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpanColumnComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[kendoDraggableColumn]',
+                    providers: [
+                        {
+                            provide: ColumnBase,
+                            useExisting: forwardRef(() => SpanColumnComponent)
+                        }
+                    ],
+                    selector: 'kendo-grid-span-column',
+                    template: ``,
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.DraggableDirective, decorators: [{
+        }], ctorParameters: function () { return [{ type: ColumnBase, decorators: [{
+                    type: SkipSelf
+                }, {
                     type: Host
-                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: DragAndDropService }, { type: DragHintService }, { type: DropCueService }, { type: NavigationService }, { type: i0.Renderer2 }]; }, propDecorators: { context: [{
+                }, {
+                    type: Optional
+                }] }, { type: IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { template: [{
+                type: ContentChildren,
+                args: [CellTemplateDirective, { descendants: false }]
+            }], editTemplate: [{
+                type: ContentChildren,
+                args: [EditTemplateDirective, { descendants: false }]
+            }], childColumns: [{
+                type: ContentChildren,
+                args: [ColumnComponent]
+            }], editable: [{
                 type: Input
-            }], enableDrag: [{
+            }], locked: [{
                 type: Input
-            }], drag: [{
-                type: Output
             }] } });
 
 /**
  * @hidden
  */
-class DropTargetDirective {
-    element;
-    service;
-    context = {};
-    enter = new EventEmitter();
-    leave = new EventEmitter();
-    drop = new EventEmitter();
-    subscriptions = new Subscription();
-    constructor(element, service) {
-        this.element = element;
-        this.service = service;
-    }
-    ngOnInit() {
-        this.service.add(this);
-        const changes = this.service.changes.pipe(filter(({ target }) => target === this));
-        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'leave'))
-            .subscribe(e => {
-            this.leave.next(this.eventArgs(e));
-        }));
-        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'enter'))
-            .subscribe(e => {
-            this.enter.next(this.eventArgs(e));
-        }));
-        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'drop'))
-            .subscribe(e => {
-            this.drop.next(this.eventArgs(e));
-        }));
-    }
-    ngOnDestroy() {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    }
-    eventArgs(e) {
-        return {
-            target: this,
-            mouseEvent: e.mouseEvent,
-            draggable: e.draggable
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropTargetDirective, deps: [{ token: i0.ElementRef }, { token: DragAndDropService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropTargetDirective, isStandalone: true, selector: "[kendoDropTarget]", inputs: { context: "context" }, outputs: { enter: "enter", leave: "leave", drop: "drop" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropTargetDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoDropTarget]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DragAndDropService }]; }, propDecorators: { context: [{
-                type: Input
-            }], enter: [{
-                type: Output
-            }], leave: [{
-                type: Output
-            }], drop: [{
-                type: Output
-            }] } });
-
+const expandColumns = (columns) => (columns.reduce((acc, column) => acc.concat(isSpanColumnComponent(column) ? column.childrenArray : [column]), []));
 /**
- * Represents the column cell template of the Grid.
- * 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 [see example](slug:templates_columns_grid#toc-cell-template).
- *
- * 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
- * ```html
- * <kendo-grid [data]="gridData" ...>
- *   <kendo-grid-column field="ProductName">
- *     <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex" let-column="column">
- *       Data Row: {{rowIndex}}
- *     </ng-template>
- *   </kendo-grid-column>
- * </kendo-grid>
- * ```
+ * @hidden
  */
-class CellTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CellTemplateDirective, isStandalone: true, selector: "[kendoGridCellTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CellTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridCellTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
+const expandColumnsWithSpan = (columns) => (columns.reduce((acc, column) => acc.concat(isSpanColumnComponent(column) ?
+    [column].concat(column.childrenArray) :
+    [column]), []));
 /**
- * Represents the group-header cell template of the Grid which helps to customize the content of the group header item.
- * To define the group header template, nest an `<ng-template>` tag with the `kendoGridGroupHeaderTemplate`
- * directive inside `<kendo-grid-column>`. ([See example](slug:grouping_grid_templates#toc-header-template)).
- *
- * The template context is set to the current data item and the following additional fields are passed:
- * - `group`&mdash;The current group item.
- * - `field`&mdash;The name of the field by which data is grouped.
- * - `value`&mdash;The current group value.
- * - `aggregates`&mdash;All aggregate values for the current group.
- * - `index`&mdash;The index of the current group.
- * - `expanded`&mdash;A boolean value indicating if the group is currently expanded.
- *
- * @example
- * ```html
- * <kendo-grid [data]="gridData" [group]="groups">
- *    <kendo-grid-column field="ProductName">
- *       <ng-template kendoGridGroupHeaderTemplate let-group let-field="field" let-value="value">
- *          <strong>{{field}}</strong>: {{value}}
- *       </ng-template>
- *    </kendo-grid-column>
- * </kendo-grid>
- * ```
+ * @hidden
  */
-class GroupHeaderTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupHeaderTemplateDirective, isStandalone: true, selector: "[kendoGridGroupHeaderTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridGroupHeaderTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
+const columnsToRender = (columns) => (expandColumns(columns).filter(x => x.isVisible));
+const sumProp = (prop) => (array) => (array || []).reduce((prev, curr) => prev + (curr[prop] || 0), 0);
 /**
- * Represents the group-header column template of the Grid which helps to customize the content of the group headers.
- * To define the group header template, nest an `<ng-template>` tag with the `kendoGridGroupHeaderColumnTemplate`
- * directive inside `<kendo-grid-column>`. ([See example](slug:grouping_grid_templates#toc-header-column-template)).
- *
- * The template context is set to the current data item and the following additional fields are passed:
- * - `group`&mdash;The current group item.
- * - `field`&mdash;The name of the field by which data is grouped.
- * - `value`&mdash;The current group value.
- * - `aggregates`&mdash;All aggregate values for the current group.
- *
- * @example
- * ```html
- * <kendo-grid-column field="ProductName" title="Product Name">
- *     <ng-template kendoGridGroupHeaderColumnTemplate let-group="group" let-aggregates="aggregates">
- *         <span title="Group Header Column Template for ProductName">
- *             Count: {{ aggregates.Discontinued.count }}
- *         </span>
- *     </ng-template>
- * </kendo-grid-column>
- * ```
+ * @hidden
  */
-class GroupHeaderColumnTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderColumnTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupHeaderColumnTemplateDirective, isStandalone: true, selector: "[kendoGridGroupHeaderColumnTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupHeaderColumnTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridGroupHeaderColumnTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
+const sumColumnWidths = sumProp('width');
 /**
- * Represents the column edit-cell template of the Grid ([see example](slug:custom_reactive_editing_grid#toc-setting-up-custom-inputs)).
- * Helps to customize the content of the edited cells. To define the cell template, nest an `<ng-template>`
- * tag with the `kendoGridEditTemplate` directive inside a `<kendo-grid-column>` tag.
- *
- * The template context is set to the current form group and the following additional fields are passed:
- * - `formGroup`&mdash;The current [FormGroup](link:site.data.urls.angular['formgroupapi']). Represents the default context that will be assigned to any template variable which utilizes the `let-x` syntax, for example, `let-formGroup`. If you use the Grid inside [Template-Driven Forms](link:site.data.urls.angular['forms']), it will be `undefined`.
- * - `rowIndex`&mdash;The current data row index. If inside a new item row, `rowIndex` is `-1`. Use it as an alias for a template variable by utilizing the `let-rowIndex="rowIndex"` syntax.
- * - `dataItem`&mdash;The current data item. Use it as an alias for a template variable by utilizing the `let-dataItem="dataItem"` syntax.
- * - `column`&mdash;The current column instance. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
- * - `isNew`&mdash;The state of the current item. Use it as an alias for a template variable by utilizing the `let-isNew="isNew"` syntax.
+ * @hidden
  */
-class EditTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: EditTemplateDirective, isStandalone: true, selector: "[kendoGridEditTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridEditTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
+const columnsSpan = sumProp('colspan');
+const validField = new RegExp(`^[$A-Z\_a-z][$A-Z\_a-z0-9\\.]*$`);
 /**
- * Represents the column group footer cell template of the Grid which helps to customize the group footer cell for the column.
- * To define the group footer template, nest an `<ng-template>` tag with the `kendoGridGroupFooterTemplate` directive
- * inside `<kendo-grid-column>`.
- *
- * The template context is set to the current data item and the following additional fields are passed:
- * - `column`&mdash;Defines an instance of the `ColumnComponent` option.
- * - `field`&mdash;The current column field name.
- * - `group`&mdash;The current group data item.
- * - `aggregates`&mdash;All aggregate values for the current group.
- *
- * @example
- * ```html
- * <kendo-grid [data]="gridData" [group]="groups">
- *    <kendo-grid-column field="ProductName">
- *       <ng-template kendoGridGroupFooterTemplate let-aggregates let-field="field">
- *          Count: {{aggregates[field].count}}
- *       </ng-template>
- *    </kendo-grid-column>
- * </kendo-grid>
- * ```
+ * @hidden
  */
-class GroupFooterTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: GroupFooterTemplateDirective, isStandalone: true, selector: "[kendoGridGroupFooterTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GroupFooterTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridGroupFooterTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
+const isValidFieldName = (fieldName) => !isNullOrEmptyString(fieldName) && validField.test(fieldName) &&
+    fieldName[0] !== "." && fieldName[fieldName.length - 1] !== ".";
 /**
- * Represents the column header cell template of the Grid
- * ([more information and example]({% slug templates_columns_grid %}#toc-header-template)).
- * Helps to customize the table header cell for the column.
- * To define a header template, nest an `<ng-template>` tag with the
- * `kendoGridHeaderTemplate` directive inside the `<kendo-grid-column>` tag.
- *
- *  The template context is set to the current column and then the following additional fields are passed:
- * * `column`&mdash;Defines an instance of the [ColumnComponent]({% slug api_grid_columncomponent %}) option.
- * * `columnIndex`&mdash;Defines the current column index.
- *
- * @example
- * ```html
- * <kendo-grid [data]="gridData">
- *    <kendo-grid-column field="ProductName">
- *       <ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
- *          {{column.field}}({{columnIndex}})
- *       </ng-template>
- *    </kendo-grid-column>
- * </kendo-grid>
- * ```
+ * @hidden
  */
-class HeaderTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: HeaderTemplateDirective, isStandalone: true, selector: "[kendoGridHeaderTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridHeaderTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
+const children = column => column.children.filter(child => child !== column);
 /**
- * Represents the column footer cell template of the Grid
- * ([more information and example]({% slug templates_columns_grid %}#toc-footer-template)).
- * Helps to customize the table footer cell for the column.
- * To define a footer template, nest an `<ng-template>` tag with the
- * [kendoGridFooterTemplate]({% slug api_grid_footertemplatedirective %}) directive inside the `<kendo-grid-column>` tag.
- *
- * The template context is set to the current column and the following additional fields are passed:
- * * `column`&mdash;Defines an instance of the [ColumnComponent]({% slug api_grid_columncomponent %}) option.
- * * `columnIndex`&mdash;Defines the current column index.
- *
- * For more information on how to display aggregates in the footer of the Grid,
- * refer to the article on [aggregates]({% slug groupable_grid_with_aggregates %}).
- *
- * @example
- * ```html
- * <kendo-grid [data]="gridData" scrollable="none">
- *    <kendo-grid-column field="ProductName">
- *       <ng-template kendoGridFooterTemplate let-column let-columnIndex="columnIndex">
- *          {{column.field}}({{columnIndex}})
- *       </ng-template>
- *    </kendo-grid-column>
- * </kendo-grid>
- * ```
+ * @hidden
  */
-class FooterTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FooterTemplateDirective, isStandalone: true, selector: "[kendoGridFooterTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FooterTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridFooterTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
+const leafColumns = columns => {
+    return columns.reduce((acc, column) => {
+        if (column.isColumnGroup) {
+            acc = acc.concat(leafColumns(children(column)));
+        }
+        else if (column.isSpanColumn) {
+            acc = acc.concat(column.childrenArray);
+        }
+        else {
+            acc.push(column);
+        }
+        return acc;
+    }, []).filter(x => x.isVisible);
+};
 /**
- * Represents the template for the column menu in the Grid. Provides an option for
- * customizing the content of the column menu for all or for specific columns.
- * To define the content template, nest an `<ng-template>` tag with the
- * `kendoGridColumnMenuTemplate` directive inside the `<kendo-grid>` or the `<kendo-grid-column>` component.
- *
- * The template context is passes through the following fields:
- * - `service`&mdash;Represents the [ColumnMenuService]({% slug api_grid_columnmenuservice %}).
- * - `column`&mdash;Represents the Grid column.
- *
- * @example
- * ```html
- * <kendo-grid [kendoGridBinding]="data" [sortable]="true" [columnMenu]="true">
- *   <ng-template kendoGridColumnMenuTemplate let-service="service">
- *     <kendo-grid-columnmenu-sort [service]="service"></kendo-grid-columnmenu-sort>
- *   </ng-template>
- *   <kendo-grid-column field="Field1">
- *     <ng-template kendoGridColumnMenuTemplate let-service="service">
- *       <kendo-grid-columnmenu-lock [service]="service"></kendo-grid-columnmenu-lock>
- *       <kendo-grid-columnmenu-sort [service]="service"></kendo-grid-columnmenu-sort>
- *     </ng-template>
- *   </kendo-grid-column>
- *   <kendo-grid-column field="Field2"></kendo-grid-column>
- * </kendo-grid>
- * ```
+ * @hidden
  */
-class ColumnMenuTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnMenuTemplateDirective, isStandalone: true, selector: "[kendoGridColumnMenuTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnMenuTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridColumnMenuTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-// Incremented each time the service is instantiated.
-let sequence = 0;
+const someLeafColumn = (callback, ...columns) => leafColumns(columns).some(callback);
 /**
  * @hidden
  */
-class IdService {
-    prefix;
-    constructor() {
-        this.prefix = `k-grid${sequence++}`;
-    }
-    gridId() {
-        return this.prefix;
-    }
-    cellId(rowIndex, colIndex) {
-        return `${this.prefix}-r${rowIndex}c${colIndex}`;
-    }
-    selectionCheckboxId(itemIndex) {
-        return `${this.prefix}-checkbox${itemIndex}`;
-    }
-    selectAllCheckboxId() {
-        return `${this.prefix}-select-all`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IdService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return []; } });
-
+const resizableColumns = columns => columns.filter(column => isTruthy(column.resizable) && column.isVisible);
 /**
  * @hidden
  */
-const ColumnMenuErrorMessages = {
-    autoSizeColumn: `The auto size column does not work with enabled virtual columns.
-    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu/#toc-autosize-column-item.`,
-    autoSizeAllColumns: `The auto size all columns does not work with enabled virtual columns.
-    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu/#toc-autosize-all-columns-item.`,
-    serviceInput: `The service input of the predefined column menu components is mandatory.
-    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/column-menu/#toc-customizing-the-content.`
-};
+const sortColumns = (columns) => orderBy(columns, [{ field: 'orderIndex', dir: 'asc' }]);
 /**
  * @hidden
  */
-const ClipboardErrorMessages = {
-    activeCellNavigable: `Grid must be navigable to use "activeCell" as clipboard target type.
-    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/clipboard/#toc-active-cell.`,
-    selectionSelectable: `Grid must be selectable to use "selection" as clipboard target type.
-    See https://www.telerik.com/kendo-angular-ui/components/grid/accessories/clipboard/#toc-current-selection.`
-};
-/**
- * @hidden
- */
-const ColumnConfigurationErrorMessages = {
-    fieldName: (field) => `Grid column field name '${field}' does not look like a valid JavaScript identifier.
-        Identifiers can contain only alphanumeric characters (including "$" or "_"), and may not start with a digit.
-        Please use only valid identifier names to ensure error-free operation.`,
-    width: (value, parsedValue) => `Expected numeric value for column width, but got a string "${value}". Treating as ${parsedValue}px.`,
-    invalidColumn: (column) => `Invalid column ${column}.`,
-    requiredWidth: (columnType) => `${columnType} columns feature requires all columns to have set width.
-    See https://www.telerik.com/kendo-angular-ui/components/grid/columns/${columnType.toLowerCase()}.`,
-    requiredScroll: (columnType) => `${columnType} columns are only supported when scrolling is enabled.
-    See https://www.telerik.com/kendo-angular-ui/components/grid/columns/${columnType.toLowerCase()}/`,
-    groupColumnContent: 'ColumnGroupComponent should contain ColumnComponent or CommandColumnComponent.',
-    lockedParent: 'Locked child columns require their parent columns to be locked.',
-    columnNested: 'Columns can be nested only inside ColumnGroupComponent',
-    nestedInside: (nestedColumnNameType, parentColumnType) => `${nestedColumnNameType} cannot be nested inside ${parentColumnType}.`
-};
-/**
- * @hidden
- */
-const GridConfigurationErrorMessages = {
-    functionType: (propName, fn) => `${propName} must be a function, but received ${JSON.stringify(fn)}.`,
-    incompatibleFeatures: (feat1Name, feat2Name) => `'Having both ${feat1Name} and ${feat2Name} is not supported.'`,
-    nonLockedColumnPresent: 'There should be at least one non-locked column. See https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/#toc-known-limitations',
-    rowHeightVirtual: `The virtual scrolling functionality requires setting the rowHeight (and detailRowHeight when there are detail rows).
-        Row height and detail row height settings should be set only when virtual scrolling mode is enabled.
-        See https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/#toc-getting-started.`,
-    focusNavigable: 'The Grid should be configured as navigable to control focus. See https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation/.',
-    expandCollapseMethods: (expandMethodName, collapseMethodName, directiveName, callbackName) => `The ${expandMethodName} and ${collapseMethodName} methods should not be called
-        when using the ${directiveName} directive or the ${callbackName} callback.
-        These methods are provided only for backwards compatibility with legacy versions.`,
-    requiredEditService: `The default edit service of the editing directives works only when binding to plain array.
-        Please provide an editService. See https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-directives/#toc-custom-editing-service.`,
-    requiredModule: (exportedType, moduleName, componentSelector) => `Creating ${exportedType} requires including the ${moduleName} and adding the ${componentSelector} component.`,
-    groupBindingDirectives: `Using the "kendoGridGroupBinding" directive in combination with the "kendoGridExpandGroupBy" directive
-        or the "isGroupExpanded" callback is not supported. To use grouping with the "kendoGridGroupBinding" directive,
-        set the Grid "groupable" property to "true".`,
-    unsupportedMethod: (methodName, suggestedMethodName) => `Using ${methodName} in this context is not supported. Use ${suggestedMethodName} instead.`,
-    unsupportedToolbarConfig: `
-        Defining both a toolbar template and a ToolBarComponent within the Grid is not supported.
-        Please use either the ToolBarComponent or a custom template.`
-};
+const isInSpanColumn$1 = (column) => isTruthy(column.parent) && isSpanColumnComponent(column.parent);
 
 /**
  * @hidden
  */
-const isSpanColumn = column => column.isSpanColumn;
+const isLocked = column => column.parent ? isLocked(column.parent) : !!column.locked;
 /**
  * @hidden
  */
-const isCheckboxColumn = column => column.isCheckboxColumn;
+const resizeArgs = (column, extra) => Object.assign({
+    columns: leafColumns([column]),
+    locked: isLocked(column)
+}, extra);
 /**
  * @hidden
  */
-const isRowReorderColumn = column => column.isRowReorderColumn;
-const isColumnContainer = column => column.isColumnGroup || isSpanColumn(column);
-/**
- * The base class for the column components of the Grid.
- */
-class ColumnBase {
-    parent;
-    /**
-     * @hidden
-     */
-    matchesMedia = true;
-    /**
-     * The column index after reordering. The `orderIndex` is a read-only property. Setting this field does not affect column order.
-     *
-     * @default 0
-     */
-    orderIndex = 0;
-    /**
-     * @hidden
-     */
-    set leafIndex(value) {
-        this._leafIndex = value;
+class ColumnResizingService {
+    changes = new EventEmitter();
+    adjacentColumn;
+    areColumnsReordered = false;
+    isShiftPressed = false;
+    originalWidth;
+    column;
+    resizedColumns;
+    tables = [];
+    batch = null;
+    start(column) {
+        this.trackColumns(column);
+        const columns = (this.column.isColumnGroup ? [column] : [])
+            .concat(leafColumns([column]));
+        this.changes.emit({
+            columns: columns,
+            locked: isLocked(this.column),
+            type: 'start'
+        });
     }
-    /**
-     * @hidden
-     */
-    get leafIndex() {
-        return this._leafIndex;
+    resizeColumns(deltaPercent) {
+        const action = resizeArgs(this.column, {
+            deltaPercent,
+            type: 'resizeColumn'
+        });
+        this.changes.emit(action);
     }
-    _leafIndex;
-    /**
-     * @hidden
-     */
-    isColumnGroup = false;
-    /**
-     * @hidden
-     */
-    isSpanColumn = false;
-    /**
-     * Indicates whether the column is resizable.
-     * @default true
-     */
-    resizable = true;
-    /**
-     * Indicates whether the column is reorderable.
-     * @default true
-     */
-    reorderable = true;
-    /**
-     * The width (in pixels) below which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
-     * The `autoFitColumn` and `autoFitColumns` methods have higher priority.
-     * @default 10
-     */
-    minResizableWidth = 10;
-    /**
-     * The width (in pixels) above which the user is not able to resize the column by using the UI ([see example]({% slug resizing_columns_grid %}#toc-limiting-the-resizing)).
-     * By default, the maximum width is not restricted.
-     * The `autoFitColumn` and `autoFitColumns` methods have higher priority.
-     */
-    maxResizableWidth;
-    /**
-     * The title of the column.
-     */
-    title;
-    /**
-     * The width of the column (in pixels).
-     */
-    set width(value) {
-        if (typeof value === 'string') {
-            const parsedValue = this._width = parseInt(value, 10);
-            if (isDevMode()) {
-                console.warn(ColumnConfigurationErrorMessages.width(value, parsedValue));
-            }
+    resizeTable(column, delta) {
+        const action = resizeArgs(column, {
+            delta,
+            type: 'resizeTable'
+        });
+        this.changes.emit(action);
+    }
+    resizedColumn(state) {
+        this.resizedColumns.push(state);
+    }
+    end() {
+        this.changes.emit({
+            columns: [],
+            resizedColumns: this.resizedColumns,
+            type: 'end'
+        });
+        this.adjacentColumn = null;
+    }
+    registerTable(tableMetadata) {
+        this.tables.push(tableMetadata);
+        const unregisterTable = () => {
+            this.tables.splice(this.tables.indexOf(tableMetadata), 1);
+        };
+        return unregisterTable;
+    }
+    measureColumns(info) {
+        if (this.batch !== null) {
+            this.batch.push(...info);
         }
         else {
-            this._width = value;
+            this.autoFitBatch(info, () => this.end());
         }
     }
-    get width() { return this._width; }
-    /**
-     * Indicates whether the column will be resized during initialization so that it fits its header and row content.
-     */
-    autoSize;
-    /**
-     * Toggles the locked (frozen) state of the columns ([more information and example]({% slug locked_columns_grid %})).
-     *
-     * @default false
-     *
-     */
-    set locked(value) {
-        this._locked = value;
+    autoFit(...columns) {
+        const nonLockedColumns = columns.filter(column => !column.isLocked);
+        this.autoFitStart(nonLockedColumns);
+        this.autoFitBatch(this.batch, () => {
+            if (nonLockedColumns.length < columns.length) {
+                const lockedColumns = columns.filter(column => column.isLocked);
+                this.autoFitStart(lockedColumns);
+                this.autoFitBatch(this.batch, () => this.end());
+            }
+            else {
+                this.end();
+            }
+        });
     }
-    get locked() {
-        return this._locked;
+    trackColumns(column) {
+        this.resizedColumns = [];
+        this.column = column;
     }
-    _locked = false;
-    /**
-     * Determines whether the column will be always visible when scrolling the Grid horizontally.
-     *
-     * @default false
-     */
-    sticky = false;
-    /**
-     * Sets the visibility of the column ([see example](slug:hidden_columns_grid#toc-using-the-built-in-options)).
-     *
-     * @default false
-     */
-    hidden;
-    /**
-     * Sets the condition that needs to be satisfied for a column to remain visible ([see example]({% slug styling_responsive_grid %}#toc-columns)).
-     * If you set the `hidden` property, the behavior of `media` is overridden.
-     *
-     * Accepts the device identifiers that are [available in Bootstrap 4](https://v4-alpha.getbootstrap.com/layout/grid/#grid-options)
-     * ([see example](slug:styling_responsive_grid)):
-     */
-    media;
-    /**
-     * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
-     * @default true
-     */
-    lockable = true;
-    /**
-     * Specifies if the column can be stuck or unstuck from the column menu.
-     * @default true
-     */
-    stickable = true;
-    /**
-     * Specifies if the column menu will be shown for the column.
-     * @default true
-     */
-    columnMenu = true;
-    /**
-     * Specifies if the column will be included in the column-chooser list.
-     * @default true
-     */
-    includeInChooser = true;
-    /**
-     * Allows setting the `role` attribute for the table cells (excluding the footer and header ones) of the column.
-     * @default "gridcell"
-     */
-    tableCellsRole = 'gridcell';
-    /**
-     * Sets the custom styles for the table cells (excluding the footer and header ones) of the column. Under the hood,
-     * to apply the property, the `style` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
-     *
-     */
-    style;
-    /**
-     * Sets the custom styles for the header cell of the column. Under the hood, to apply the property,
-     * the `headerStyle` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
-     *
-     */
-    headerStyle;
-    /**
-     * Sets the custom styles for the filter row cell. Under the hood, to apply the property,
-     * the `filterStyle` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
-     *
-     */
-    filterStyle;
-    /**
-     * Sets the custom styles for the footer cell of the column. Under the hood, to apply the property,
-     * the `footerStyle` option uses the
-     * [NgStyle](link:site.data.urls.angular['ngstyleapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
-     *
-     */
-    footerStyle;
-    /**
-     * Sets the custom CSS classes to the column cells. Under the hood, to apply the property, the `class` option uses the
-     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-cells).
-     * To customize header and footer column cells, use the [headerClass]({% slug api_grid_columncomponent %}#toc-headerclass)
-     * and [footerClass]({% slug api_grid_columncomponent %}#toc-footerclass) inputs.
-     *
-     */
-    cssClass;
-    /**
-     * Sets the custom CSS classes to the column header cell. Under the hood, to apply the property,
-     * the `headerClass` option uses the
-     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-header).
-     *
-     */
-    headerClass;
-    /**
-     * Sets the custom CSS classes to the filter row cell. Under the hood, to apply the property,
-     * the `filterClass` option uses the
-     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-filter-row-cells).
-     *
-     */
-    filterClass;
-    /**
-     * Sets the custom CSS classes to the column footer cell. Under the hood, to apply the property,
-     * the `footerClass` option uses the
-     * [NgClass](link:site.data.urls.angular['ngclassapi']) directive. [See example](slug:styling_grid_columns#toc-customizing-column-footer).
-     *
-     */
-    footerClass;
-    /**
-     * @hidden
-     */
-    headerTemplates = new QueryList();
-    /**
-     * @hidden
-     */
-    footerTemplate;
-    /**
-     * @hidden
-     */
-    columnMenuTemplates = new QueryList();
-    /**
-     * @hidden
-     */
-    resizeStartWidth;
-    /**
-     * @hidden
-     */
-    idService;
-    /**
-     * @hidden
-     */
-    implicitWidth;
-    /**
-     * @hidden
-     */
-    get level() {
-        if (this.parent && isSpanColumn(this.parent)) {
-            return this.parent.level;
+    autoFitStart(columns) {
+        this.batch = [];
+        this.resizedColumns = [];
+        if (columns.length === 0) {
+            return;
         }
-        return this.parent ? this.parent.level + 1 : 0;
+        const locked = columns[0].isLocked;
+        this.changes.emit({
+            type: 'start',
+            columns,
+            locked
+        });
+        this.changes.emit({
+            type: 'triggerAutoFit',
+            columns,
+            locked
+        });
     }
-    /**
-     * @hidden
-     */
-    get isLocked() {
-        return this.parent ? this.parent.isLocked : this.locked;
+    autoFitBatch(info, onComplete) {
+        const locked = info.length > 0 ? info[0].column.isLocked : false;
+        const observables = this.tables
+            .filter(table => table.locked === locked)
+            .map(table => table.autoFit(info));
+        zip$1(...observables)
+            .pipe(take(1))
+            .subscribe(widths => {
+            this.changes.emit({
+                columns: info.map(i => i.column),
+                type: 'autoFitComplete',
+                widths,
+                locked
+            });
+            if (onComplete) {
+                onComplete();
+            }
+        });
+        this.batch = null;
     }
-    _width;
-    /**
-     * @hidden
-     */
-    get colspan() {
-        return 1;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService, decorators: [{
+            type: Injectable
+        }] });
+
+const isInSameGrid = (element, gridElement) => closest(element, matchesNodeName('kendo-grid')) === gridElement;
+const matchHeaderCell = matchesNodeName('th');
+const matchDataCell = matchesNodeName('td');
+const matchFooterCell = matchesNodeName('.k-grid-footer td');
+const matchCell = (element) => matchDataCell(element) || matchHeaderCell(element) || matchFooterCell(element);
+const gridCell = (element, gridElement) => {
+    let target = closest(element, matchCell);
+    while (target && !isInSameGrid(target, gridElement)) {
+        target = closest(target.parentElement, matchCell);
     }
-    /**
-     * @hidden
-     */
-    rowspan(totalColumnLevels) {
-        return this.level < totalColumnLevels ? (totalColumnLevels - this.level) + 1 : 1;
+    return target;
+};
+const targetCell = (target, gridElement) => {
+    const cell = gridCell(target, gridElement);
+    const row = closest(cell, matchesNodeName('tr'));
+    if (cell && row) {
+        let rowIndex = row.getAttribute('aria-rowindex') || row.getAttribute('data-kendo-grid-row-index');
+        rowIndex = rowIndex ? parseInt(rowIndex, 10) - 1 : null;
+        let colIndex = cell.getAttribute('aria-colindex');
+        colIndex = colIndex ? parseInt(colIndex, 10) - 1 : null;
+        if (rowIndex !== null && colIndex !== null) {
+            return { colIndex, rowIndex, element: cell };
+        }
     }
-    /**
-     * @hidden
-     */
-    get headerTemplateRef() {
-        const template = this.headerTemplates.first;
-        return template ? template.templateRef : undefined;
+};
+const isArrowKey = keyCode => keyCode === Keys.ArrowLeft || keyCode === Keys.ArrowRight ||
+    keyCode === Keys.ArrowUp || keyCode === Keys.ArrowDown;
+const isNavigationKey = keyCode => isArrowKey(keyCode) ||
+    keyCode === Keys.PageUp || keyCode === Keys.PageDown ||
+    keyCode === Keys.Home || keyCode === Keys.End;
+const isInput = matchesNodeName('input');
+const isTextInput = element => element && isInput(element) && element.type.toLowerCase() === 'text';
+const isPrintableCharacter = (str) => str.length === 1 && str.match(/\S/);
+const resizeStep = 10;
+/**
+ * @hidden
+ */
+class NavigationViewport {
+    firstItemIndex;
+    lastItemIndex;
+    constructor(firstItemIndex, lastItemIndex) {
+        this.firstItemIndex = firstItemIndex;
+        this.lastItemIndex = lastItemIndex;
     }
-    /**
-     * @hidden
-     */
-    get footerTemplateRef() {
-        return this.footerTemplate ? this.footerTemplate.templateRef : undefined;
+    containsRow(dataRowIndex) {
+        const headerRow = dataRowIndex < 0;
+        return headerRow || (dataRowIndex >= this.firstItemIndex && dataRowIndex <= this.lastItemIndex);
     }
-    /**
-     * @hidden
-     */
-    get columnMenuTemplateRef() {
-        const template = this.columnMenuTemplates.first;
-        return template ? template.templateRef : null;
+    intersects(start, end) {
+        return (start <= this.firstItemIndex && this.lastItemIndex <= end) ||
+            (this.firstItemIndex <= start && start <= this.lastItemIndex) ||
+            (this.firstItemIndex <= end && end <= this.lastItemIndex);
     }
-    /**
-     * @hidden
-     */
-    get displayTitle() {
-        return this.title;
+}
+/**
+ * @hidden
+ */
+class NavigationService {
+    zone;
+    domEvents;
+    pagerContextService;
+    scrollRequestService;
+    groupsService;
+    detailsService;
+    focusRoot;
+    editService;
+    cd;
+    ctx;
+    resizeService;
+    focusableParent;
+    changes;
+    cellKeydown = new EventEmitter();
+    set metadata(value) {
+        this.meta = value;
+        this.cursor.metadata = value;
     }
-    /**
-     * @hidden
-     */
-    get isVisible() {
-        return !this.hidden && this.matchesMedia;
+    get metadata() {
+        return this.meta;
     }
-    /**
-     * @hidden
-     */
-    constructor(parent, idService) {
-        this.parent = parent;
-        this.idService = idService;
-        if (parent && idService && parent.idService.gridId() === idService.gridId() && !isColumnContainer(parent)) {
-            throw new Error(ColumnConfigurationErrorMessages.columnNested);
-        }
+    get enabled() {
+        return this.alive;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: IdService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnBase, selector: "kendo-grid-column-base", inputs: { resizable: "resizable", reorderable: "reorderable", minResizableWidth: "minResizableWidth", maxResizableWidth: "maxResizableWidth", title: "title", width: "width", autoSize: "autoSize", locked: "locked", sticky: "sticky", hidden: "hidden", media: "media", lockable: "lockable", stickable: "stickable", columnMenu: "columnMenu", includeInChooser: "includeInChooser", tableCellsRole: "tableCellsRole", style: "style", headerStyle: "headerStyle", filterStyle: "filterStyle", footerStyle: "footerStyle", cssClass: ["class", "cssClass"], headerClass: "headerClass", filterClass: "filterClass", footerClass: "footerClass" }, queries: [{ propertyName: "footerTemplate", first: true, predicate: FooterTemplateDirective, descendants: true }, { propertyName: "headerTemplates", predicate: HeaderTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], ngImport: i0, template: ``, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnBase, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-grid-column-base',
-                    template: ``
-                }]
-        }], ctorParameters: function () { return [{ type: ColumnBase }, { type: IdService }]; }, propDecorators: { resizable: [{
-                type: Input
-            }], reorderable: [{
-                type: Input
-            }], minResizableWidth: [{
-                type: Input
-            }], maxResizableWidth: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], autoSize: [{
-                type: Input
-            }], locked: [{
-                type: Input
-            }], sticky: [{
-                type: Input
-            }], hidden: [{
-                type: Input
-            }], media: [{
-                type: Input
-            }], lockable: [{
-                type: Input
-            }], stickable: [{
-                type: Input
-            }], columnMenu: [{
-                type: Input
-            }], includeInChooser: [{
-                type: Input
-            }], tableCellsRole: [{
-                type: Input
-            }], style: [{
-                type: Input
-            }], headerStyle: [{
-                type: Input
-            }], filterStyle: [{
-                type: Input
-            }], footerStyle: [{
-                type: Input
-            }], cssClass: [{
-                type: Input,
-                args: ['class']
-            }], headerClass: [{
-                type: Input
-            }], filterClass: [{
-                type: Input
-            }], footerClass: [{
-                type: Input
-            }], headerTemplates: [{
-                type: ContentChildren,
-                args: [HeaderTemplateDirective, { descendants: false }]
-            }], footerTemplate: [{
-                type: ContentChild,
-                args: [FooterTemplateDirective, { static: false }]
-            }], columnMenuTemplates: [{
-                type: ContentChildren,
-                args: [ColumnMenuTemplateDirective]
-            }] } });
-
-/**
- * Represents the filter-cell template.
- * Helps to customize the content of the filter cell. To define the filter cell template, nest an `<ng-template>` tag with the
- * `kendoGridFilterCellTemplate` directive inside a `<kendo-grid-column>` tag ([see example]({% slug filter_row %}#toc-custom-filters)).
- *
- * The template context is set to the current data item and the following additional fields are passed:
- * - `column`&mdash;Defines an instance of the [`ColumnComponent`]({% slug api_grid_columncomponent %}) option. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
- * - `filter`&mdash;The provided filter descriptors. Use it as an alias for a template variable by utilizing the `let-filter="filter"` syntax.
- *
- * ```html
- * <kendo-grid-column field="CategoryID" title="Category">
- *     <ng-template kendoGridFilterCellTemplate
- *         let-column="column"
- *         let-filter="filter"
- *         >
- *         ...
- *    </ng-template>
- *    ...
- * </kendo-grid-column>
- * ```
- */
-class FilterCellTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    get pagerEnabled() {
+        return this.alive && this.pagerIsNavigable;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterCellTemplateDirective, isStandalone: true, selector: "[kendoGridFilterCellTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterCellTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridFilterCellTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-/**
- * Represents the filter-menu template.
- * Helps to customize the content of the filter menu. To define the filter menu template, nest an `<ng-template>` tag with the
- * `kendoGridFilterMenuTemplate` directive inside a `<kendo-grid-column>` tag
- * ([see example]({% slug filter_menu %}#toc-custom-filters)).
- *
- * The template context is set to the current data item and the following additional fields are passed:
- * - `column`&mdash;Defines an instance of the [`ColumnComponent`]({% slug api_grid_columncomponent %}) option. Use it as an alias for a template variable by utilizing the `let-column="column"` syntax.
- * - `filter`&mdash;The provided filter descriptors. Use it as an alias for a template variable by utilizing the `let-filter="filter"` syntax.
- * - `filterService`&mdash;Represents the [`FilterService`]({% slug api_grid_filterservice %}). Use it as an alias for a template variable by utilizing the `let-filterService="filterService"` syntax.
- *
- * ```html
- * <kendo-grid-column field="CategoryID" title="Category">
- *     <ng-template kendoGridFilterMenuTemplate
- *         let-column="column"
- *         let-filter="filter"
- *         let-filterService="filterService"
- *         >
- *         ...
- *    </ng-template>
- * </kendo-grid-column>
- * ```
- */
-class FilterMenuTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    get tableEnabled() {
+        return this.alive && this.tableIsNavigable;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FilterMenuTemplateDirective, isStandalone: true, selector: "[kendoGridFilterMenuTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilterMenuTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridFilterMenuTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-/**
- * @hidden
- */
-function isColumnComponent(column) {
-    return isPresent(column.field);
-}
-/**
- * Represents the column of the Grid. [See example](slug:columns_config#toc-using-the-column-component)
- *
- * @example
- * ```html
- * <kendo-grid [data]="gridData">
- *   <kendo-grid-column field="ProductID" title="Product ID"></kendo-grid-column>
- *   <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
- *   <kendo-grid-column field="UnitPrice" title="Unit Price"></kendo-grid-column>
- * </kendo-grid>
- * ```
- */
-class ColumnComponent extends ColumnBase {
-    /**
-     * The field to which the column is bound.
-     */
-    field;
-    /**
-     * The format that is applied to the value before it is displayed. For more information on the supported date and number formats,
-     * refer to the [Column Formats](slug:formats_columns_grid) documentation article.
-     */
-    format;
-    /**
-     * Allows the user to click the column headers and emits the `sortChange` event. [See example](slug:sorting_grid).
-     *
-     * @default true
-     */
-    sortable = true;
-    /**
-     * Determines if the column can be dragged to the group panel.
-     * If set to `false`, you can group the columns by the column field by using the API of the Grid.
-     *
-     * @default true
-     */
-    groupable = true;
-    /**
-     * Defines the editor type. [See example](slug:inline_editing_grid#toc-using-reactive-forms).
-     * Used when the column enters the edit mode.
-     *
-     * @default 'text'
-     */
-    editor = 'text';
-    /**
-     * Defines the filter type that is displayed inside the filter row. [See example](slug:filtering_grid#toc-filter-data-types).
-     *
-     * @default 'text'
-     */
-    filter = 'text';
-    /**
-     * Defines if a filter UI will be displayed for this column. [See example](slug:filtering_grid).
-     *
-     * @default true
-     */
-    filterable = true;
-    /**
-     * Defines whether the column is editable. [See example](slug:make_fields_uneditable_grid).
-     *
-     * @default true
-     */
-    editable = true;
-    template;
-    groupHeaderTemplate;
-    groupHeaderColumnTemplate;
-    groupFooterTemplate;
-    editTemplate;
-    filterCellTemplate;
-    filterMenuTemplate;
-    constructor(parent, idService) {
-        super(parent, idService);
+    get toolbarEnabled() {
+        return this.alive && this.toolbarIsNavigable;
+    }
+    get activeCell() {
+        if (this.mode !== 0 /* NavigationMode.Standby */) {
+            return this.cursor.cell;
+        }
+    }
+    get activeRow() {
+        if (this.mode !== 0 /* NavigationMode.Standby */) {
+            return Object.assign({}, this.cursor.row, {
+                cells: this.cursor.row?.cells.toArray()
+            });
+        }
+    }
+    get isColumnResizable() {
+        return this.activeCell.colIndex !== this.ctx.grid.columnsContainer.leafColumnsToRender.length - 1;
+    }
+    viewport;
+    columnViewport;
+    activeRowIndex = 0;
+    alive = false;
+    active = true;
+    mode = 0 /* NavigationMode.Standby */;
+    model = new NavigationModel();
+    cursor = new NavigationCursor(this.model);
+    meta;
+    subs;
+    pendingRowIndex;
+    virtualCell;
+    pagerIsNavigable = false;
+    tableIsNavigable = false;
+    toolbarIsNavigable = false;
+    get activeDataRow() {
+        return Math.max(0, this.activeRowIndex - this.meta.headerRows);
+    }
+    constructor(zone, domEvents, pagerContextService, scrollRequestService, groupsService, detailsService, focusRoot, editService, cd, ctx, resizeService, focusableParent) {
+        this.zone = zone;
+        this.domEvents = domEvents;
+        this.pagerContextService = pagerContextService;
+        this.scrollRequestService = scrollRequestService;
+        this.groupsService = groupsService;
+        this.detailsService = detailsService;
+        this.focusRoot = focusRoot;
+        this.editService = editService;
+        this.cd = cd;
+        this.ctx = ctx;
+        this.resizeService = resizeService;
+        this.focusableParent = focusableParent;
+        this.changes = this.cursor.changes;
+    }
+    init(meta, navigableOptions) {
+        this.setActiveSections(navigableOptions);
+        this.alive = true;
+        this.focusRoot.active = true;
+        this.metadata = meta;
+        const onStableSubscriber = (...operators) => (args) => this.zone.isStable ?
+            from([true]).pipe(map(() => args)) :
+            this.zone.onStable.pipe(take(1), map(() => args), ...operators);
+        const onStable = onStableSubscriber();
+        this.subs = new Subscription();
+        this.subs.add(this.cursor.changes.subscribe(args => this.onCursorChanges(args)));
+        this.subs.add(this.domEvents.focus.pipe(switchMap(onStable))
+            .subscribe((args) => this.navigateTo(args.target)));
+        this.subs.add(this.domEvents.focusOut.pipe(filter(() => this.mode !== 0 /* NavigationMode.Standby */), switchMap(onStableSubscriber(takeUntil(this.domEvents.focus))))
+            .subscribe(args => this.onFocusOut(args)));
+        this.subs.add(this.domEvents.windowBlur.pipe(filter(() => this.mode !== 0 /* NavigationMode.Standby */))
+            .subscribe(() => this.onWindowBlur()));
+        this.subs.add(
+        // Closing the editor will not always trigger focusout in Firefox.
+        // To get around this, we ensure that the cell is closed after editing.
+        this.editService.changes.pipe(filter(e => e.action !== 'edit' && this.mode === 2 /* NavigationMode.Content */), filter((e) => e.action === 'cellClose' && !e.prevented), switchMap(onStable))
+            .subscribe(() => this.leaveCell()));
+        this.subs.add(this.pagerContextService.pageChange
+            .subscribe(() => this.cursor.reset(0, 0)));
+        this.subs.add(this.domEvents.keydown
+            .subscribe(args => this.onKeydown(args)));
+        this.subs.add(this.domEvents.keydown.pipe(filter(args => args.keyCode === Keys.Tab && this.mode === 2 /* NavigationMode.Content */), switchMapTo(this.domEvents.focusOut.pipe(takeUntil(
+        // Timeout if focusOut doesn't fire very soon
+        interval(0).pipe(take(1))))))
+            .subscribe(() => this.onTabout()));
+        if (this.focusableParent) {
+            const element = new GridFocusableElement(this);
+            this.focusableParent.registerElement(element);
+        }
+        this.deactivateElements();
+    }
+    ngOnDestroy() {
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+        this.alive = false;
+    }
+    registerCell(cell) {
+        if (cell.logicalRowIndex !== this.pendingRowIndex) {
+            const modelCell = this.model.registerCell(cell);
+            if (this.virtualCell && this.cursor.activateVirtualCell(modelCell)) {
+                this.virtualCell = false;
+            }
+        }
+    }
+    registerCellOnCurrentRow(cell) {
+        if (cell.logicalRowIndex === this.pendingRowIndex) {
+            this.model.registerCell(cell);
+        }
+    }
+    unregisterCell(index, rowIndex, cell) {
+        this.model.unregisterCell(index, rowIndex, cell);
+    }
+    registerRow(row) {
+        this.model.registerRow(row);
+        this.pendingRowIndex = row.logicalRowIndex;
+    }
+    updateRow(row) {
+        this.model.updateRow(row);
+    }
+    unregisterRow(index, row) {
+        this.model.unregisterRow(index, row);
+        const lastRow = this.model.lastRow;
+        if (lastRow && this.mode === 0 /* NavigationMode.Standby */) {
+            const maxIndex = (this.needsViewport() && this.viewport) ? this.viewport.lastItemIndex : lastRow.index;
+            if (this.activeRowIndex > maxIndex) {
+                this.cursor.reset(0, 0);
+            }
+        }
+    }
+    isCellFocusable(cell) {
+        return this.alive &&
+            this.active &&
+            this.mode !== 2 /* NavigationMode.Content */ &&
+            this.cursor.isActive(cell.logicalRowIndex, cell.logicalColIndex);
+    }
+    isCellFocused(cell) {
+        return this.mode === 1 /* NavigationMode.Cursor */ && this.isCellFocusable(cell);
+    }
+    navigateTo(el) {
+        if (!this.alive || !isDocumentAvailable()) {
+            return;
+        }
+        const cell = targetCell(el, this.meta.gridElement.nativeElement);
+        if (!cell) {
+            return;
+        }
+        const oldMode = this.mode;
+        const focusInCell = contains$1(cell.element, document.activeElement);
+        const focusInActiveRowContent = this.mode === 2 /* NavigationMode.Content */ &&
+            this.activeRowIndex === cell.rowIndex &&
+            el !== cell.element;
+        if (focusInCell) {
+            this.mode = 2 /* NavigationMode.Content */;
+            this.cursor.reset(cell.rowIndex, cell.colIndex);
+            this.activateRow();
+        }
+        else if (!focusInActiveRowContent) {
+            this.mode = 1 /* NavigationMode.Cursor */;
+            this.deactivateElements();
+            const alreadyActive = this.cursor.isActive(cell.rowIndex, cell.colIndex);
+            const isCursor = oldMode === 1 /* NavigationMode.Cursor */ && alreadyActive;
+            if (!isCursor) {
+                this.cursor.reset(cell.rowIndex, cell.colIndex);
+            }
+        }
+    }
+    tryFocus(el) {
+        this.activateElements();
+        const focusable = findFocusableChild(el);
+        if (focusable) {
+            const cell = targetCell(focusable, this.meta.gridElement.nativeElement);
+            if (cell) {
+                this.cursor.reset(cell.rowIndex, cell.colIndex);
+                this.deactivateElements();
+                this.enterCell();
+            }
+            focusable.focus();
+        }
+        else {
+            this.deactivateElements();
+        }
+        return !!focusable;
+    }
+    needsViewport() {
+        return this.meta && this.meta.isVirtual;
+    }
+    setViewport(firstItemIndex, lastItemIndex) {
+        this.viewport = new NavigationViewport(firstItemIndex, lastItemIndex);
+        if (this.meta && this.meta.isVirtual && this.activeDataRow > -1) {
+            const dataRowIndex = this.activeDataRow;
+            const ahead = firstItemIndex - dataRowIndex;
+            const behind = dataRowIndex - lastItemIndex;
+            if (ahead > 0) {
+                this.cursor.reset(firstItemIndex + this.meta.headerRows);
+            }
+            else if (behind > 0) {
+                this.cursor.reset(lastItemIndex - this.meta.headerRows);
+            }
+        }
+    }
+    setColumnViewport(firstItemIndex, lastItemIndex) {
+        this.columnViewport = new NavigationViewport(firstItemIndex, lastItemIndex);
+        if (this.meta && this.meta.isVirtual && this.activeDataRow > -1) {
+            const activeColumnIndex = this.cursor.cell ? this.cursor.cell.colIndex : 0;
+            const ahead = firstItemIndex - activeColumnIndex;
+            const behind = activeColumnIndex - lastItemIndex;
+            if (ahead > 0) {
+                this.cursor.reset(undefined, firstItemIndex, false);
+            }
+            else if (behind > 0) {
+                this.cursor.reset(undefined, lastItemIndex, false);
+            }
+        }
+    }
+    focusCell(rowIndex = undefined, colIndex = undefined) {
+        this.mode = 1 /* NavigationMode.Cursor */;
+        this.cursor.reset(rowIndex, colIndex);
+        return this.activeCell;
+    }
+    focusCellByElement(el) {
+        const cell = targetCell(el, this.meta.gridElement.nativeElement);
+        if (cell) {
+            return this.focusCell(cell.rowIndex, cell.colIndex);
+        }
+    }
+    focusNextCell(wrap = true) {
+        return this.focusAdjacentCell(true, wrap);
+    }
+    focusPrevCell(wrap = true) {
+        return this.focusAdjacentCell(false, wrap);
+    }
+    toggle(active) {
+        this.active = active;
+        this.cursor.announce();
+    }
+    hasFocus() {
+        return this.mode === 1 /* NavigationMode.Cursor */ || this.mode === 2 /* NavigationMode.Content */;
+    }
+    autoFocusCell(start, end) {
+        return !this.meta.virtualColumns || end < this.meta.columns.lockedLeafColumns.length || this.columnViewport.intersects(start, end);
+    }
+    setActiveSections(navigableOptions) {
+        this.pagerIsNavigable = navigableOptions.includes('pager');
+        this.tableIsNavigable = navigableOptions.includes('table');
+        this.toolbarIsNavigable = navigableOptions.includes('toolbar');
+    }
+    focusAdjacentCell(fwd, wrap) {
+        this.focusCell();
+        let success = fwd ? this.moveCursorFwd() : this.moveCursorBwd();
+        if (wrap && !success) {
+            success = fwd ? this.cursor.moveDown(1) : this.cursor.moveUp(1);
+            if (success) {
+                const row = this.cursor.row;
+                const colIdx = fwd ? 0 : this.cursor.lastCellIndex(row);
+                this.cursor.reset(row.index, colIdx);
+            }
+        }
+        if (success) {
+            return this.activeCell;
+        }
+        else {
+            this.mode = 0 /* NavigationMode.Standby */;
+            this.cursor.announce();
+        }
+        return null;
+    }
+    enterCell() {
+        const cell = this.cursor.cell;
+        if (!cell) {
+            return;
+        }
+        const group = cell.focusGroup;
+        const focusable = group && group.canFocus();
+        this.mode = focusable ? 2 /* NavigationMode.Content */ : 1 /* NavigationMode.Cursor */;
+        this.cursor.announce();
+        if (focusable) {
+            this.activateRow();
+            group.focus();
+        }
+    }
+    leaveCell() {
+        const cell = this.cursor.cell;
+        if (!cell) {
+            return;
+        }
+        const group = cell.focusGroup;
+        const focusable = group && group.canFocus();
+        if (!focusable) {
+            this.deactivateElements();
+        }
+        this.mode = 1 /* NavigationMode.Cursor */;
+        this.cursor.announce();
+    }
+    activateElements() {
+        this.focusRoot.activate();
+    }
+    deactivateElements() {
+        this.focusRoot.deactivate();
+    }
+    activateRow() {
+        this.cursor.row.cells
+            .forEach(cell => cell.focusGroup && cell.focusGroup.activate());
+    }
+    moveCursorFwd() {
+        return this.ctx.localization.rtl ? this.cursor.moveLeft() : this.cursor.moveRight();
+    }
+    moveCursorBwd() {
+        return this.ctx.localization.rtl ? this.cursor.moveRight() : this.cursor.moveLeft();
+    }
+    onCursorKeydown(args) {
+        let preventDefault = false;
+        const modifier = args.ctrlKey || args.metaKey;
+        const step = modifier ? 5 : 1;
+        if (!this.onCellKeydown(args)) {
+            return;
+        }
+        const row = this.cursor.row;
+        switch (args.keyCode) {
+            case Keys.ArrowDown:
+                if (args.shiftKey) {
+                    if (this.ctx.grid.blockArrowSelection) {
+                        return;
+                    }
+                    preventDefault = this.cursor.moveDown(step);
+                    if (this.activeRow?.dataItem) {
+                        this.handleVerticalArrowSelection(step);
+                    }
+                }
+                else {
+                    preventDefault = this.cursor.moveDown(step);
+                }
+                break;
+            case Keys.ArrowUp:
+                if (args.shiftKey) {
+                    if (this.ctx.grid.blockArrowSelection) {
+                        return;
+                    }
+                    preventDefault = this.cursor.moveUp(step);
+                    if (this.activeRow?.dataItem) {
+                        this.handleVerticalArrowSelection(-step);
+                    }
+                }
+                else {
+                    preventDefault = this.cursor.moveUp(step);
+                }
+                break;
+            case Keys.ArrowRight:
+                if (args.altKey && this.ctx.grid.resizable && this.isColumnResizable) {
+                    this.columnResize(true);
+                    break;
+                }
+                if (args.shiftKey) {
+                    if (this.ctx.grid.blockArrowSelection) {
+                        return;
+                    }
+                    preventDefault = this.moveCursorFwd();
+                    this.handleHorizontalArrowSelection(args);
+                }
+                else {
+                    preventDefault = this.moveCursorFwd();
+                }
+                break;
+            case Keys.ArrowLeft:
+                if (args.altKey && this.ctx.grid.resizable && this.isColumnResizable) {
+                    this.columnResize(false);
+                    break;
+                }
+                if (args.shiftKey) {
+                    if (this.ctx.grid.blockArrowSelection) {
+                        return;
+                    }
+                    preventDefault = this.moveCursorBwd();
+                    this.handleHorizontalArrowSelection(args);
+                }
+                else {
+                    preventDefault = this.moveCursorBwd();
+                }
+                break;
+            case Keys.PageDown:
+                if (this.metadata.isVirtual && this.viewport) {
+                    let nextItemIndex = this.meta.headerRows + this.viewport.lastItemIndex + 1;
+                    if (this.metadata.hasDetailTemplate) {
+                        nextItemIndex++;
+                    }
+                    nextItemIndex = Math.min(this.meta.maxLogicalRowIndex, nextItemIndex);
+                    this.cursor.reset(nextItemIndex);
+                    preventDefault = true;
+                }
+                else if (this.metadata.hasPager) {
+                    this.zone.run(() => this.pagerContextService.nextPage());
+                    preventDefault = true;
+                }
+                break;
+            case Keys.PageUp:
+                if (this.metadata.isVirtual && this.viewport) {
+                    const viewportSize = this.viewport.lastItemIndex - this.viewport.firstItemIndex;
+                    const firstItemIndex = this.viewport.firstItemIndex;
+                    const nextItemIndex = Math.max(this.meta.headerRows, firstItemIndex - viewportSize - 1);
+                    this.cursor.reset(nextItemIndex);
+                    preventDefault = true;
+                }
+                else if (this.metadata.hasPager) {
+                    this.zone.run(() => this.pagerContextService.prevPage());
+                    preventDefault = true;
+                }
+                break;
+            case Keys.Home:
+                if (modifier) {
+                    if (this.meta.isVirtual) {
+                        this.cursor.reset(this.meta.headerRows, 0, false);
+                    }
+                    else {
+                        this.cursor.reset(this.model.firstRow.index, 0, false);
+                    }
+                }
+                else {
+                    let firstColumnIndex = 0;
+                    if (this.meta.hasDetailTemplate && row.index < this.meta.headerRows) {
+                        firstColumnIndex = 1;
+                    }
+                    this.cursor.reset(row.index, firstColumnIndex, false);
+                }
+                preventDefault = true;
+                break;
+            case Keys.End:
+                if (modifier) {
+                    if (this.meta.isVirtual) {
+                        let lastRowIndex = this.meta.maxLogicalRowIndex;
+                        if (this.meta.hasDetailTemplate) {
+                            lastRowIndex--;
+                        }
+                        this.cursor.reset(lastRowIndex, this.cursor.lastCellIndex(), false);
+                    }
+                    else {
+                        this.cursor.reset(this.model.lastRow.index, this.cursor.lastCellIndex(this.model.lastRow), false);
+                    }
+                }
+                else {
+                    const lastIndex = this.cursor.lastCellIndex(row);
+                    const cell = this.model.findCell(lastIndex, row);
+                    if (cell) {
+                        this.cursor.reset(cell.rowIndex, cell.colIndex);
+                    }
+                    else {
+                        this.cursor.reset(row.index, lastIndex);
+                    }
+                }
+                preventDefault = true;
+                break;
+            case Keys.Enter:
+            case Keys.F2: {
+                const groupItem = row.groupItem;
+                if (groupItem) {
+                    this.zone.run(() => this.groupsService.toggleRow(groupItem));
+                }
+                else if (this.cursor.cell.detailExpandCell) {
+                    this.zone.run(() => this.detailsService.toggleRow(row.dataRowIndex, row.dataItem));
+                }
+                else {
+                    this.enterCell();
+                    if (!this.cursor.cell.focusGroup.isNavigable()) {
+                        preventDefault = true;
+                    }
+                }
+                break;
+            }
+            default:
+                if (!args.ctrlKey && !args.altKey && isPrintableCharacter(args.key)) {
+                    this.enterCell();
+                }
+        }
+        if (preventDefault) {
+            args.preventDefault();
+        }
     }
-    get templateRef() {
-        return this.template ? this.template.templateRef : undefined;
+    columnResize(onRightArrow) {
+        const column = this.ctx.grid.columnsContainer.leafColumnsToRender[this.activeCell.colIndex];
+        column.resizeStartWidth = Array.from(this.ctx.grid.wrapper.nativeElement.querySelectorAll('.k-grid-header th.k-header'))[this.activeCell.colIndex]['offsetWidth'];
+        this.resizeService.start(column);
+        this.resizeService.resizeColumns(onRightArrow ? resizeStep : -1 * resizeStep);
+        if (this.resizeService.resizeColumns.length > 0) {
+            this.resizeService.end();
+        }
     }
-    get groupHeaderTemplateRef() {
-        return this.groupHeaderTemplate ? this.groupHeaderTemplate.templateRef : undefined;
+    onContentKeydown(args) {
+        if (!this.onCellKeydown(args)) {
+            return;
+        }
+        const confirm = !args.defaultPrevented && args.keyCode === Keys.Enter && isTextInput(args.srcElement);
+        if (args.keyCode === Keys.Escape || args.keyCode === Keys.F2 || confirm) {
+            this.leaveCell();
+            this.cursor.reset();
+            args.stopPropagation();
+        }
+        else if (isNavigationKey(args.keyCode) && this.cursor.cell.focusGroup.isNavigable()) {
+            this.onCursorKeydown(args);
+            if (args.defaultPrevented) {
+                this.leaveCell();
+            }
+        }
     }
-    get groupHeaderColumnTemplateRef() {
-        return this.groupHeaderColumnTemplate ? this.groupHeaderColumnTemplate.templateRef : undefined;
+    onCellKeydown(args) {
+        if (this.editService.isEditingCell()) {
+            const confirm = args.keyCode === Keys.Enter;
+            const cancel = args.keyCode === Keys.Escape;
+            const navigate = isNavigationKey(args.keyCode);
+            if (confirm) {
+                this.editService.closeCell(args);
+            }
+            else if (cancel) {
+                this.editService.closeCell(args);
+                this.cd.detectChanges();
+            }
+            else if (navigate) {
+                return false;
+            }
+        }
+        this.cellKeydown.emit(args);
+        return true;
     }
-    get groupFooterTemplateRef() {
-        return this.groupFooterTemplate ? this.groupFooterTemplate.templateRef : undefined;
+    onCursorChanges(args) {
+        this.activeRowIndex = args.rowIndex;
+        const dataRowIndex = this.activeDataRow;
+        if (this.meta && (this.meta.isVirtual &&
+            args.rowIndex >= this.meta.headerRows &&
+            this.viewport &&
+            !this.viewport.containsRow(dataRowIndex) && dataRowIndex > -1)) {
+            this.scrollRequestService.scrollTo({ row: dataRowIndex });
+        }
+        if (this.meta.virtualColumns && args.colIndex >= this.meta.columns.lockedLeafColumns.length) {
+            const cell = this.activeCell;
+            const { start, end } = this.model.cellRange(cell);
+            if (!cell) {
+                this.virtualCell = true;
+            }
+            if ((!cell && this.mode !== 0 /* NavigationMode.Standby */) || (cell && !this.columnViewport.intersects(start, end))) {
+                this.scrollRequestService.scrollTo({ column: args.colIndex - (this.metadata.hasDetailTemplate ? 1 : 0) });
+            }
+        }
     }
-    get editTemplateRef() {
-        return this.editTemplate ? this.editTemplate.templateRef : undefined;
+    onFocusOut(args) {
+        if (isVisible(args.target)) {
+            this.mode = 0 /* NavigationMode.Standby */;
+        }
+        else {
+            // Focused target is no longer visible,
+            // reset to cursor mode and recapture focus.
+            this.mode = 1 /* NavigationMode.Cursor */;
+        }
+        this.deactivateElements();
+        this.cursor.announce();
     }
-    get filterCellTemplateRef() {
-        return this.filterCellTemplate ? this.filterCellTemplate.templateRef : undefined;
+    onWindowBlur() {
+        this.mode = 0 /* NavigationMode.Standby */;
+        this.deactivateElements();
+        this.cursor.announce();
     }
-    get filterMenuTemplateRef() {
-        return this.filterMenuTemplate ? this.filterMenuTemplate.templateRef : undefined;
+    onKeydown(args) {
+        if (this.mode === 1 /* NavigationMode.Cursor */) {
+            this.onCursorKeydown(args);
+        }
+        else if (this.mode === 2 /* NavigationMode.Content */) {
+            this.onContentKeydown(args);
+        }
     }
-    get displayTitle() {
-        return this.title === undefined ? this.field : this.title;
+    onTabout() {
+        // Tabbed out of the last focusable content element
+        // reset to cursor mode and recapture focus.
+        if (this.cursor.cell.focusGroup.isNavigable()) {
+            // Unless the cell has a single focusable element,
+            // otherwise we'd return to Content mode and enter an endless loop
+            return;
+        }
+        this.leaveCell();
+        this.cursor.reset();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnComponent, isStandalone: true, selector: "kendo-grid-column", inputs: { field: "field", format: "format", sortable: "sortable", groupable: "groupable", editor: "editor", filter: "filter", filterable: "filterable", editable: "editable" }, providers: [
-            {
-                provide: ColumnBase,
-                useExisting: forwardRef(() => ColumnComponent)
+    handleVerticalArrowSelection(args) {
+        const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
+        const rowSelectionEnabled = this.ctx.grid.selectionService.active && !this.ctx.grid.selectableSettings.checkboxOnly;
+        if (cellSelectionEnabled || rowSelectionEnabled) {
+            const selectionService = this.ctx.grid[cellSelectionEnabled ? 'cellSelectionService' : 'selectionService'];
+            const colIdx = this.cursor.cell ? this.cursor.cell.colIndex : 0;
+            const rowIdx = this.activeRow.dataRowIndex - this.ctx.grid.skip;
+            const dataItem = selectionService.settings.view.at(rowIdx);
+            const item = { index: this.activeRow.dataRowIndex, data: dataItem, column: this.ctx.grid.columnsContainer.leafColumnsToRender[colIdx] };
+            if (selectionService.options.mode === 'multiple') {
+                cellSelectionEnabled ? this.handleMultipleArrowCellSelection(item) : this.handleMultipleArrowRowSelection(item);
             }
-        ], queries: [{ propertyName: "template", first: true, predicate: CellTemplateDirective, descendants: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: GroupHeaderTemplateDirective, descendants: true }, { propertyName: "groupHeaderColumnTemplate", first: true, predicate: GroupHeaderColumnTemplateDirective, descendants: true }, { propertyName: "groupFooterTemplate", first: true, predicate: GroupFooterTemplateDirective, descendants: true }, { propertyName: "editTemplate", first: true, predicate: EditTemplateDirective, descendants: true }, { propertyName: "filterCellTemplate", first: true, predicate: FilterCellTemplateDirective, descendants: true }, { propertyName: "filterMenuTemplate", first: true, predicate: FilterMenuTemplateDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        {
-                            provide: ColumnBase,
-                            useExisting: forwardRef(() => ColumnComponent)
-                        }
-                    ],
-                    selector: 'kendo-grid-column',
-                    template: ``,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: ColumnBase, decorators: [{
-                    type: SkipSelf
-                }, {
-                    type: Host
-                }, {
-                    type: Optional
-                }] }, { type: IdService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { field: [{
-                type: Input
-            }], format: [{
-                type: Input
-            }], sortable: [{
-                type: Input
-            }], groupable: [{
-                type: Input
-            }], editor: [{
-                type: Input
-            }], filter: [{
-                type: Input
-            }], filterable: [{
-                type: Input
-            }], editable: [{
-                type: Input
-            }], template: [{
-                type: ContentChild,
-                args: [CellTemplateDirective, { static: false }]
-            }], groupHeaderTemplate: [{
-                type: ContentChild,
-                args: [GroupHeaderTemplateDirective, { static: false }]
-            }], groupHeaderColumnTemplate: [{
-                type: ContentChild,
-                args: [GroupHeaderColumnTemplateDirective, { static: false }]
-            }], groupFooterTemplate: [{
-                type: ContentChild,
-                args: [GroupFooterTemplateDirective, { static: false }]
-            }], editTemplate: [{
-                type: ContentChild,
-                args: [EditTemplateDirective, { static: false }]
-            }], filterCellTemplate: [{
-                type: ContentChild,
-                args: [FilterCellTemplateDirective, { static: false }]
-            }], filterMenuTemplate: [{
-                type: ContentChild,
-                args: [FilterMenuTemplateDirective, { static: false }]
-            }] } });
-
-/**
- * @hidden
- */
-function isSpanColumnComponent(column) {
-    return column.isSpanColumn;
-}
-/**
- * Represents a column which can be spanned over multiple data cells while the individual
- * header and footer cells are retained ([see example]({% slug spanned_columns_grid %})).
- * Enables you to achieve more flexible layout while keeping the built-in UI element for
- * [sorting]({% slug sorting_grid %}), [filtering]({% slug filtering_grid %}), and
- * [grouping]({% slug grouping_grid %}). Wrap the columns that will be
- * merged inside the `<kendo-grid-span-column>` tag.
- *
- * ```html
- * <kendo-grid-span-column>
- *   <kendo-grid-column field="field1"></kendo-grid-column>
- *   <kendo-grid-column field="field2"></kendo-grid-column>
- *   <ng-template kendoGridCellTemplate let-dataItem>
- *     <h5>{{ dataItem.field1 }}</h5>
- *     <p>{{ dataItem.field2 }}</p>
- *   </ng-template>
- * </kendo-grid-span-column>
- * ```
- */
-class SpanColumnComponent extends ColumnBase {
-    /*
-     * @hidden
-     */
-    isSpanColumn = true;
-    template = new QueryList();
-    editTemplate = new QueryList();
-    /**
-     * @hidden
-     */
-    childColumns = new QueryList();
-    /**
-     * @hidden
-     */
-    title;
-    /**
-     * @hidden
-     */
-    headerStyle;
-    /**
-     * @hidden
-     */
-    footerStyle;
-    /**
-     * @hidden
-     */
-    headerClass;
-    /**
-     * @hidden
-     */
-    footerClass;
-    /**
-     * @hidden
-     */
-    includeInChooser = false;
-    /**
-     * Defines whether the edit template of the column will be rendered.
-     * To enable the editing functionality for a spanned column, set an edit template for it ([see example](slug:custom_reactive_editing_grid)).
-     * @default false
-     */
-    set editable(value) {
-        this._editable = value;
-    }
-    get editable() {
-        return isPresent(this.editTemplateRef) && this._editable;
+            else {
+                selectionService.handleClick(item, args);
+            }
+        }
     }
-    /**
-     * @hidden
-     * added for backwards compitability
-     */
-    set width(_value) {
+    handleHorizontalArrowSelection(args) {
+        const cellSelectionEnabled = this.ctx.grid.cellSelectionService.active;
+        if (cellSelectionEnabled) {
+            const selectionService = this.ctx.grid[cellSelectionEnabled ? 'cellSelectionService' : 'selectionService'];
+            const row = this.activeRow;
+            const colIdx = this.cursor.cell ? this.cursor.cell.colIndex : 0;
+            const dataItem = selectionService.settings.view.at(row.dataRowIndex - this.ctx.grid.skip);
+            const item = { index: row.dataRowIndex, data: dataItem, column: this.ctx.grid.columnsContainer.leafColumnsToRender[colIdx] };
+            if (!isPresent$1(dataItem) || !isPresent$1(item.column)) {
+                return;
+            }
+            if (selectionService.options.mode === 'multiple') {
+                this.handleMultipleArrowCellSelection(item);
+            }
+            else {
+                selectionService.handleClick(item, args);
+            }
+        }
     }
-    get width() {
-        return this.childColumns.reduce((total, column) => total + column.width, 0);
+    handleMultipleArrowCellSelection(item) {
+        const cellSelectionService = this.ctx.grid.cellSelectionService;
+        const startRowIndex = Math.min(cellSelectionService.lastSelectionItemRowIndex, item.index);
+        const startColIndex = Math.min(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
+        const endRowIndex = Math.max(cellSelectionService.lastSelectionItemRowIndex, item.index);
+        const endColIndex = Math.max(cellSelectionService.lastSelectionItemColIndex, item.column.leafIndex);
+        const ev = cellSelectionService.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex);
+        cellSelectionService.changes.emit(ev);
     }
-    /**
-     * @hidden
-     */
-    get leafIndex() {
-        return this.childColumns.first.leafIndex;
+    handleMultipleArrowRowSelection(item) {
+        const rowSelectionService = this.ctx.grid.selectionService;
+        const startRowIndex = Math.min(rowSelectionService.lastSelectionStartIndex, item.index);
+        const endRowIndex = Math.max(rowSelectionService.lastSelectionStartIndex, item.index);
+        const ev = rowSelectionService.selectRange(startRowIndex, endRowIndex);
+        rowSelectionService.changes.emit(ev);
     }
-    _editable = true;
-    constructor(parent, idService) {
-        super(parent, idService);
-        if (parent && parent.isSpanColumn) {
-            throw new Error(ColumnConfigurationErrorMessages.nestedInside('SpanColumnComponent', 'SpanColumnComponent'));
-        }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: DomEventsService }, { token: i44.PagerContextService }, { token: ScrollRequestService }, { token: GroupsService }, { token: DetailsService }, { token: FocusRoot }, { token: EditService }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: ColumnResizingService }, { token: FocusableDirective, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: DomEventsService }, { type: i44.PagerContextService }, { type: ScrollRequestService }, { type: GroupsService }, { type: DetailsService }, { type: FocusRoot }, { type: EditService }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: ColumnResizingService }, { type: FocusableDirective, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @hidden
+ */
+const preventOnDblClick$1 = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
+const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
+const isDeleteButton = or(hasClass('k-i-x'), hasClass('k-svg-i-x'), hasClass('k-icon-button'));
+const isSortIcon = or(hasClass('k-i-sort-asc-small'), hasClass('k-i-sort-desc-small'), hasClass('k-svg-i-sort-asc-small'), hasClass('k-svg-i-sort-desc-small'));
+const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
+const elementUnderCursor = ({ clientX, clientY }) => isDocumentAvailable() && document.elementFromPoint(clientX, clientY);
+const hideThenShow = (element, cont) => {
+    element.style.display = 'none';
+    const result = cont();
+    element.style.display = 'block';
+    return result;
+};
+/**
+ * @hidden
+ */
+class DraggableColumnDirective {
+    draggable;
+    element;
+    zone;
+    service;
+    hint;
+    cue;
+    nav;
+    renderer;
+    context = {};
+    set enableDrag(enabled) {
+        this.enabled = enabled;
+        this.updateTouchAction();
     }
-    /**
-     * @hidden
-     */
-    get templateRef() {
-        const template = this.template.first;
-        return template ? template.templateRef : undefined;
+    drag = new EventEmitter();
+    subscriptions = new Subscription();
+    enabled;
+    constructor(draggable, element, zone, service, hint, cue, nav, renderer) {
+        this.draggable = draggable;
+        this.element = element;
+        this.zone = zone;
+        this.service = service;
+        this.hint = hint;
+        this.cue = cue;
+        this.nav = nav;
+        this.renderer = renderer;
     }
-    /**
-     * @hidden
-     */
-    get editTemplateRef() {
-        const editTemplate = this.editTemplate.first;
-        return editTemplate ? editTemplate.templateRef : undefined;
+    ngOnInit() {
+        this.subscriptions.add(this.zone.runOutsideAngular(() => this.draggable.kendoPress.pipe(filter(_ => this.enabled), filter(({ originalEvent: { target } }) => target === this.element.nativeElement || skipButtons(target)), tap((e) => {
+            const originalEvent = e.originalEvent;
+            if (!e.isTouch) {
+                originalEvent.preventDefault();
+            }
+            this.nav.navigateTo(originalEvent.target);
+        }), switchMap(preventOnDblClick$1(this.draggable.kendoRelease)), tap((_) => {
+            this.hint.create(this.context.hint);
+            this.cue.create();
+        }), switchMap(down => this.draggable.kendoDrag.pipe(tap((e) => {
+            if (e.isTouch) {
+                e.originalEvent.preventDefault();
+            }
+        }), tap(this.hint.attach()), tap(this.cue.attach()), takeUntil(this.draggable.kendoRelease), map(move => ({ move, down })))), tap(this.performDrag.bind(this)), switchMapTo(this.draggable.kendoRelease)).subscribe(this.drop.bind(this))));
     }
-    /**
-     * @hidden
-     */
-    get colspan() {
-        return this.childColumns.filter(c => c.isVisible).length;
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
     }
-    /**
-     * Toggles the locked (frozen) state of the columns ([see example](slug:locked_columns_grid)).
-     * @default false
-     */
-    set locked(value) {
-        this._locked = value;
+    drop(upEvent) {
+        this.hint.remove();
+        this.cue.remove();
+        this.service.notifyDrop(this, upEvent);
     }
-    get locked() {
-        return this._locked || this.childColumns.some(c => c.locked);
+    performDrag({ move }) {
+        this.hint.move(move);
+        const cursorElement = this.elementUnderCursor(move);
+        if (cursorElement) {
+            this.service.notifyDrag(this, cursorElement, move);
+        }
+        this.drag.emit({
+            draggable: this,
+            mouseEvent: move
+        });
     }
-    get childrenArray() {
-        return this.childColumns.toArray();
+    elementUnderCursor(mouseEvent) {
+        this.hint.hide();
+        let target = elementUnderCursor(mouseEvent);
+        if (target && /k-grouping-dropclue/.test(target.className)) {
+            target = hideThenShow(target, elementUnderCursor.bind(this, mouseEvent));
+        }
+        this.hint.show();
+        return target;
     }
-    get hasChildren() {
-        return this.childColumns.length > 0;
+    updateTouchAction() {
+        if (!this.element) {
+            return;
+        }
+        // eslint-disable-next-line no-unused-expressions
+        this.enabled ? this.renderer.addClass(this.element.nativeElement, 'k-touch-action-none') :
+            this.renderer.removeClass(this.element.nativeElement, 'k-touch-action-none');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpanColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SpanColumnComponent, isStandalone: true, selector: "kendo-grid-span-column", inputs: { editable: "editable", locked: "locked" }, providers: [
-            {
-                provide: ColumnBase,
-                useExisting: forwardRef(() => SpanColumnComponent)
-            }
-        ], queries: [{ propertyName: "template", predicate: CellTemplateDirective }, { propertyName: "editTemplate", predicate: EditTemplateDirective }, { propertyName: "childColumns", predicate: ColumnComponent }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, deps: [{ token: i1$3.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: DragAndDropService }, { token: DragHintService }, { token: DropCueService }, { token: NavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DraggableColumnDirective, isStandalone: true, selector: "[kendoDraggableColumn]", inputs: { context: "context", enableDrag: "enableDrag" }, outputs: { drag: "drag" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SpanColumnComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DraggableColumnDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providers: [
-                        {
-                            provide: ColumnBase,
-                            useExisting: forwardRef(() => SpanColumnComponent)
-                        }
-                    ],
-                    selector: 'kendo-grid-span-column',
-                    template: ``,
+                    selector: '[kendoDraggableColumn]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: ColumnBase, decorators: [{
-                    type: SkipSelf
-                }, {
-                    type: Host
-                }, {
-                    type: Optional
-                }] }, { type: IdService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { template: [{
-                type: ContentChildren,
-                args: [CellTemplateDirective, { descendants: false }]
-            }], editTemplate: [{
-                type: ContentChildren,
-                args: [EditTemplateDirective, { descendants: false }]
-            }], childColumns: [{
-                type: ContentChildren,
-                args: [ColumnComponent]
-            }], editable: [{
-                type: Input
-            }], locked: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-const expandColumns = (columns) => (columns.reduce((acc, column) => acc.concat(isSpanColumnComponent(column) ? column.childrenArray : [column]), []));
-/**
- * @hidden
- */
-const expandColumnsWithSpan = (columns) => (columns.reduce((acc, column) => acc.concat(isSpanColumnComponent(column) ?
-    [column].concat(column.childrenArray) :
-    [column]), []));
-/**
- * @hidden
- */
-const columnsToRender = (columns) => (expandColumns(columns).filter(x => x.isVisible));
-const sumProp = (prop) => (array) => (array || []).reduce((prev, curr) => prev + (curr[prop] || 0), 0);
-/**
- * @hidden
- */
-const sumColumnWidths = sumProp('width');
-/**
- * @hidden
- */
-const columnsSpan = sumProp('colspan');
-const validField = new RegExp(`^[$A-Z\_a-z][$A-Z\_a-z0-9\\.]*$`);
-/**
- * @hidden
- */
-const isValidFieldName = (fieldName) => !isNullOrEmptyString(fieldName) && validField.test(fieldName) &&
-    fieldName[0] !== "." && fieldName[fieldName.length - 1] !== ".";
-/**
- * @hidden
- */
-const children = column => column.children.filter(child => child !== column);
+        }], ctorParameters: function () { return [{ type: i1$3.DraggableDirective, decorators: [{
+                    type: Host
+                }] }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: DragAndDropService }, { type: DragHintService }, { type: DropCueService }, { type: NavigationService }, { type: i0.Renderer2 }]; }, propDecorators: { context: [{
+                type: Input
+            }], enableDrag: [{
+                type: Input
+            }], drag: [{
+                type: Output
+            }] } });
+
 /**
  * @hidden
  */
-const leafColumns = columns => {
-    return columns.reduce((acc, column) => {
-        if (column.isColumnGroup) {
-            acc = acc.concat(leafColumns(children(column)));
-        }
-        else if (column.isSpanColumn) {
-            acc = acc.concat(column.childrenArray);
-        }
-        else {
-            acc.push(column);
+class DropTargetDirective {
+    element;
+    service;
+    context = {};
+    enter = new EventEmitter();
+    leave = new EventEmitter();
+    drop = new EventEmitter();
+    subscriptions = new Subscription();
+    constructor(element, service) {
+        this.element = element;
+        this.service = service;
+    }
+    ngOnInit() {
+        this.service.add(this);
+        const changes = this.service.changes.pipe(filter(({ target }) => target === this));
+        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'leave'))
+            .subscribe(e => {
+            this.leave.next(this.eventArgs(e));
+        }));
+        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'enter'))
+            .subscribe(e => {
+            this.enter.next(this.eventArgs(e));
+        }));
+        this.subscriptions.add(changes.pipe(filter(({ type }) => type === 'drop'))
+            .subscribe(e => {
+            this.drop.next(this.eventArgs(e));
+        }));
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
         }
-        return acc;
-    }, []).filter(x => x.isVisible);
-};
-/**
- * @hidden
- */
-const someLeafColumn = (callback, ...columns) => leafColumns(columns).some(callback);
-/**
- * @hidden
- */
-const resizableColumns = columns => columns.filter(column => isTruthy(column.resizable) && column.isVisible);
-/**
- * @hidden
- */
-const sortColumns = (columns) => orderBy(columns, [{ field: 'orderIndex', dir: 'asc' }]);
-/**
- * @hidden
- */
-const isInSpanColumn$1 = (column) => isTruthy(column.parent) && isSpanColumnComponent(column.parent);
+    }
+    eventArgs(e) {
+        return {
+            target: this,
+            mouseEvent: e.mouseEvent,
+            draggable: e.draggable
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropTargetDirective, deps: [{ token: i0.ElementRef }, { token: DragAndDropService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: DropTargetDirective, isStandalone: true, selector: "[kendoDropTarget]", inputs: { context: "context" }, outputs: { enter: "enter", leave: "leave", drop: "drop" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropTargetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDropTarget]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: DragAndDropService }]; }, propDecorators: { context: [{
+                type: Input
+            }], enter: [{
+                type: Output
+            }], leave: [{
+                type: Output
+            }], drop: [{
+                type: Output
+            }] } });
 
 /**
  * @hidden
@@ -14423,138 +14583,6 @@ class ColumnReorderEvent extends PreventableEvent {
     }
 }
 
-/**
- * @hidden
- */
-const isLocked = column => column.parent ? isLocked(column.parent) : !!column.locked;
-/**
- * @hidden
- */
-const resizeArgs = (column, extra) => Object.assign({
-    columns: leafColumns([column]),
-    locked: isLocked(column)
-}, extra);
-/**
- * @hidden
- */
-class ColumnResizingService {
-    changes = new EventEmitter();
-    column;
-    resizedColumns;
-    tables = [];
-    batch = null;
-    start(column) {
-        this.trackColumns(column);
-        const columns = (this.column.isColumnGroup ? [column] : [])
-            .concat(leafColumns([column]));
-        this.changes.emit({
-            columns: columns,
-            locked: isLocked(this.column),
-            type: 'start'
-        });
-    }
-    resizeColumns(deltaPercent) {
-        const action = resizeArgs(this.column, {
-            deltaPercent,
-            type: 'resizeColumn'
-        });
-        this.changes.emit(action);
-    }
-    resizeTable(column, delta) {
-        const action = resizeArgs(column, {
-            delta,
-            type: 'resizeTable'
-        });
-        this.changes.emit(action);
-    }
-    resizedColumn(state) {
-        this.resizedColumns.push(state);
-    }
-    end() {
-        this.changes.emit({
-            columns: [],
-            resizedColumns: this.resizedColumns,
-            type: 'end'
-        });
-    }
-    registerTable(tableMetadata) {
-        this.tables.push(tableMetadata);
-        const unregisterTable = () => {
-            this.tables.splice(this.tables.indexOf(tableMetadata), 1);
-        };
-        return unregisterTable;
-    }
-    measureColumns(info) {
-        if (this.batch !== null) {
-            this.batch.push(...info);
-        }
-        else {
-            this.autoFitBatch(info, () => this.end());
-        }
-    }
-    autoFit(...columns) {
-        const nonLockedColumns = columns.filter(column => !column.isLocked);
-        this.autoFitStart(nonLockedColumns);
-        this.autoFitBatch(this.batch, () => {
-            if (nonLockedColumns.length < columns.length) {
-                const lockedColumns = columns.filter(column => column.isLocked);
-                this.autoFitStart(lockedColumns);
-                this.autoFitBatch(this.batch, () => this.end());
-            }
-            else {
-                this.end();
-            }
-        });
-    }
-    trackColumns(column) {
-        this.resizedColumns = [];
-        this.column = column;
-    }
-    autoFitStart(columns) {
-        this.batch = [];
-        this.resizedColumns = [];
-        if (columns.length === 0) {
-            return;
-        }
-        const locked = columns[0].isLocked;
-        this.changes.emit({
-            type: 'start',
-            columns,
-            locked
-        });
-        this.changes.emit({
-            type: 'triggerAutoFit',
-            columns,
-            locked
-        });
-    }
-    autoFitBatch(info, onComplete) {
-        const locked = info.length > 0 ? info[0].column.isLocked : false;
-        const observables = this.tables
-            .filter(table => table.locked === locked)
-            .map(table => table.autoFit(info));
-        zip$1(...observables)
-            .pipe(take(1))
-            .subscribe(widths => {
-            this.changes.emit({
-                columns: info.map(i => i.column),
-                type: 'autoFitComplete',
-                widths,
-                locked
-            });
-            if (onComplete) {
-                onComplete();
-            }
-        });
-        this.batch = null;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnResizingService, decorators: [{
-            type: Injectable
-        }] });
-
 /**
  * @hidden
  */
@@ -14573,15 +14601,12 @@ const headerWidth = (handle) => handle.nativeElement.parentElement.offsetWidth;
 /**
  * @hidden
  */
-const allLeafColumns = columns => expandColumns(columns)
-    .filter(c => !c.isColumnGroup);
+const adjacentColumnWidth = (handle) => handle.nativeElement.parentElement.nextElementSibling?.offsetWidth;
 /**
  * @hidden
  */
-const stopPropagation = ({ originalEvent: event }) => {
-    event.stopPropagation();
-    event.preventDefault();
-};
+const allLeafColumns = columns => expandColumns(columns)
+    .filter(c => !c.isColumnGroup);
 /**
  * @hidden
  */
@@ -14632,9 +14657,13 @@ class ColumnHandleDirective {
     cdr;
     ctx;
     columnInfoService;
+    isLast;
     columns = [];
     column;
     get visible() {
+        if (this.isConstrainedMode && this.isLast) {
+            return 'none';
+        }
         return this.column.resizable ? 'block' : 'none';
     }
     get leftStyle() {
@@ -14643,6 +14672,13 @@ class ColumnHandleDirective {
     get rightStyle() {
         return isTruthy(this.rtl) ? null : 0;
     }
+    get isConstrainedMode() {
+        const isConstrainedMode = this.ctx.grid?.resizable === 'constrained';
+        const isUnconstrainedMode = this.ctx.grid?.resizable === true || this.ctx.grid?.resizable === 'unconstrained';
+        const constrainedNoShift = isConstrainedMode && !this.service.isShiftPressed;
+        const unconstrainedWithShift = isUnconstrainedMode && this.service.isShiftPressed;
+        return constrainedNoShift || unconstrainedWithShift;
+    }
     subscriptions = new Subscription();
     rtl = false;
     autoFit() {
@@ -14684,7 +14720,7 @@ class ColumnHandleDirective {
             .subscribe(this.resize.bind(this)));
         this.subscriptions.add(this.service.changes.pipe(filter(e => e.type === 'start'), filter(this.shouldUpdate.bind(this)), take(1) //on first resize only
         ).subscribe(this.initColumnWidth.bind(this)));
-        this.subscriptions.add(this.zone.runOutsideAngular(() => this.draggable.kendoPress.pipe(tap(stopPropagation), tap(() => this.service.start(this.column)), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.service, this.draggable)))
+        this.subscriptions.add(this.zone.runOutsideAngular(() => this.draggable.kendoPress.pipe(tap(this.stopPropagation), tap(() => this.service.start(this.column)), switchMap(preventOnDblClick(this.draggable.kendoRelease)), switchMap(createMoveStream(this.service, this.draggable)))
             .subscribe(({ pageX, originalX }) => {
             const delta = pageX - originalX;
             const percent = toPercentage(delta, this.column.resizeStartWidth || this.column.width);
@@ -14711,6 +14747,28 @@ class ColumnHandleDirective {
     }
     initState() {
         this.column.resizeStartWidth = headerWidth(this.element);
+        let columns = [];
+        if (this.ctx.grid?.columns) {
+            columns = Array.from(this.ctx.grid?.columns) || [];
+        }
+        if (this.isConstrainedMode) {
+            if (this.service.areColumnsReordered) {
+                this.service.adjacentColumn = columns.find(c => c.orderIndex === this.column.orderIndex + 1);
+                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
+                this.service.resizedColumn({
+                    column: this.service.adjacentColumn,
+                    oldWidth: this.service.adjacentColumn.resizeStartWidth
+                });
+            }
+            else {
+                this.service.adjacentColumn = columns[this.column.leafIndex + 1];
+                this.service.adjacentColumn.resizeStartWidth = adjacentColumnWidth(this.element);
+                this.service.resizedColumn({
+                    column: this.service.adjacentColumn,
+                    oldWidth: this.service.adjacentColumn.resizeStartWidth
+                });
+            }
+        }
         this.service.resizedColumn({
             column: this.column,
             oldWidth: this.column.resizeStartWidth
@@ -14725,6 +14783,14 @@ class ColumnHandleDirective {
         if (isPresent(this.column.maxResizableWidth)) {
             newWidth = Math.min(newWidth, this.column.maxResizableWidth);
         }
+        if (this.isConstrainedMode) {
+            const maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.minResizableWidth;
+            newWidth = Math.min(newWidth, maxAllowedResizableWidth);
+        }
+        if (this.isConstrainedMode && isPresent(this.service.adjacentColumn.maxResizableWidth)) {
+            const maxAllowedResizableWidth = this.column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - this.service.adjacentColumn.maxResizableWidth;
+            newWidth = Math.max(newWidth, maxAllowedResizableWidth);
+        }
         const tableDelta = this.getTableDelta(newWidth, delta);
         this.updateWidth(this.column, newWidth);
         this.service.resizeTable(this.column, tableDelta);
@@ -14737,6 +14803,12 @@ class ColumnHandleDirective {
         this.service.resizeTable(this.column, tableDelta);
     }
     updateWidth(column, width) {
+        if (this.isConstrainedMode && this.service.adjacentColumn) {
+            const adjacentColumnNewWidth = column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth - width;
+            if (adjacentColumnNewWidth < (column.resizeStartWidth + this.service.adjacentColumn.resizeStartWidth)) {
+                this.service.adjacentColumn.width = adjacentColumnNewWidth;
+            }
+        }
         column.width = width;
         this.columnInfoService.hiddenColumns.forEach((col) => {
             if (isBlank(col.width) && isPresent(col.implicitWidth)) {
@@ -14769,8 +14841,13 @@ class ColumnHandleDirective {
             return startWidth - maxWidth;
         }
     }
+    stopPropagation = ({ originalEvent: event }) => {
+        this.service.isShiftPressed = event.shiftKey;
+        event.stopPropagation();
+        event.preventDefault();
+    };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, deps: [{ token: i1$3.DraggableDirective, host: true }, { token: i0.ElementRef }, { token: ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ContextService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHandleDirective, isStandalone: true, selector: "[kendoGridColumnHandle]", inputs: { columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: ColumnHandleDirective, isStandalone: true, selector: "[kendoGridColumnHandle]", inputs: { isLast: "isLast", columns: "columns", column: "column" }, host: { listeners: { "dblclick": "autoFit()" }, properties: { "style.display": "this.visible", "style.left": "this.leftStyle", "style.right": "this.rightStyle" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnHandleDirective, decorators: [{
             type: Directive,
@@ -14780,7 +14857,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$3.DraggableDirective, decorators: [{
                     type: Host
-                }] }, { type: i0.ElementRef }, { type: ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: ColumnInfoService }]; }, propDecorators: { columns: [{
+                }] }, { type: i0.ElementRef }, { type: ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ContextService }, { type: ColumnInfoService }]; }, propDecorators: { isLast: [{
+                type: Input
+            }], columns: [{
                 type: Input
             }], column: [{
                 type: Input
@@ -16453,6 +16532,7 @@ class HeaderComponent {
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -16507,6 +16587,7 @@ class HeaderComponent {
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -16528,7 +16609,7 @@ class HeaderComponent {
                 [totalColumns]="totalColumns"
         ></tr>
     </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem", "totalColumns"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { kind: "directive", type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { kind: "directive", type: DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { kind: "directive", type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { kind: "component", type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { kind: "component", type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "directive", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { kind: "directive", type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["isLast", "columns", "column"] }, { kind: "component", type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }, { kind: "component", type: CheckBoxComponent, selector: "kendo-checkbox", inputs: ["checkedState", "rounded"], outputs: ["checkedStateChange"], exportAs: ["kendoCheckBox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
@@ -16678,6 +16759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -16732,6 +16814,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         kendoDraggable
                         class="k-column-resizer"
                         *ngIf="resizable"
+                        [isLast]="last"
                         [column]="column"
                         [columns]="columns">
                     </span>
@@ -19326,8 +19409,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1736354347,
-    version: '18.0.0-develop.4',
+    publishDate: 1736439823,
+    version: '18.0.0-develop.6',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -21210,7 +21293,7 @@ class ScrollerService {
 /**
  * @hidden
  */
-const columnsToResize = ({ columns }) => Math.max(1, resizableColumns(columns).length);
+const columnsToResize = ({ columns }) => Math.max(1, resizableColumns(columns).filter(c => !c.isColumnGroup).length);
 /**
  * @hidden
  */
@@ -21240,21 +21323,22 @@ class TableDirective {
     service;
     zone;
     cdr;
+    ctx;
     locked = false;
     virtualColumns;
     get minWidth() {
         return this.firstResize ? 0 : null;
     }
-    originalWidth;
     firstResize = false;
     subscription;
     autoFitSubscription;
-    constructor(element, renderer, service, zone, cdr) {
+    constructor(element, renderer, service, zone, cdr, ctx) {
         this.element = element;
         this.renderer = renderer;
         this.service = service;
         this.zone = zone;
         this.cdr = cdr;
+        this.ctx = ctx;
     }
     ngOnInit() {
         const obs = this.service
@@ -21277,15 +21361,24 @@ class TableDirective {
     }
     initState() {
         this.firstResize = true;
-        if (!this.virtualColumns || this.locked) {
-            this.originalWidth = offsetWidth(this.element.nativeElement);
+        const constrainedWithVirtualColumns = this.ctx.grid?.resizable === 'constrained' && this.virtualColumns;
+        if ((!this.virtualColumns || this.locked) || constrainedWithVirtualColumns) {
+            this.service.originalWidth = offsetWidth(this.element.nativeElement);
         }
     }
     resize(deltas) {
-        if (!this.virtualColumns || this.locked) {
-            const delta = deltas.reduce((sum, item) => sum + item, 0);
-            const width = this.originalWidth + delta;
-            this.renderer.setStyle(this.element.nativeElement, 'width', width + 'px');
+        const constrainedModeNoShift = this.ctx.grid?.resizable === 'constrained' && !this.service.isShiftPressed;
+        const unconstrainedModeShift = (this.ctx.grid?.resizable === true || this.ctx.grid?.resizable === 'unconstrained') && this.service.isShiftPressed;
+        const isConstrainedMode = constrainedModeNoShift || unconstrainedModeShift;
+        if (isConstrainedMode) {
+            this.renderer.setStyle(this.element.nativeElement, 'width', this.service.originalWidth + 'px');
+        }
+        else {
+            if (!this.virtualColumns || this.locked) {
+                const delta = deltas.reduce((sum, item) => sum + item, 0);
+                const width = this.service.originalWidth + delta;
+                this.renderer.setStyle(this.element.nativeElement, 'width', width + 'px');
+            }
         }
         this.cdr.detectChanges();
     }
@@ -21310,7 +21403,7 @@ class TableDirective {
         const footer = pipe(row('tfoot>tr'), cell(info.index), offsetWidth)(dom);
         return Math.max(header, data, footer);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ColumnResizingService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TableDirective, isStandalone: true, selector: "[kendoGridResizableTable]", inputs: { locked: "locked", virtualColumns: "virtualColumns" }, host: { properties: { "style.min-width": "this.minWidth" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableDirective, decorators: [{
@@ -21319,7 +21412,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: '[kendoGridResizableTable]',
                     standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { locked: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ColumnResizingService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ContextService }]; }, propDecorators: { locked: [{
                 type: Input
             }], virtualColumns: [{
                 type: Input
@@ -24607,6 +24700,7 @@ class GridComponent {
             expandedColumns[i].orderIndex = nextSourceIndex++;
         }
         this.updateIndicesForLevel(source.level + 1);
+        this.columnResizingService.areColumnsReordered = true;
     }
     updateIndicesForLevel(level) {
         const colsForParentLevel = this.allColumnsForLevel(level - 1);