@progress/kendo-angular-grid 13.0.2 → 13.0.3-develop.2

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

@@ -10,12 +10,12 @@ import { merge, of, Subject, from, Subscription, interval, fromEvent, zip as zip
 import { switchMap, take, map, filter, takeUntil, switchMapTo, delay, auditTime, distinctUntilChanged, tap, throttleTime, debounceTime, bufferCount } from 'rxjs/operators';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
+import { orderBy, isCompositeFilterDescriptor, process, filterBy } from '@progress/kendo-data-query';
 import * as i4 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4$2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { validatePackage } from '@progress/kendo-licensing';
-import { orderBy, isCompositeFilterDescriptor, process, filterBy } from '@progress/kendo-data-query';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import * as i1$3 from '@angular/platform-browser';
@@ -2065,1994 +2065,2343 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     type: Optional
                 }] }]; } });
 
+// Incremented each time the service is instantiated.
+let sequence = 0;
 /**
  * @hidden
  */
-class SelectionService {
-    constructor(domEvents, localDataChangesService, navigationService, ctxService) {
-        this.domEvents = domEvents;
-        this.localDataChangesService = localDataChangesService;
-        this.navigationService = navigationService;
-        this.ctxService = ctxService;
-        this.changes = new EventEmitter();
-        this.aggregateChanges = new EventEmitter();
-        this.currentSelection = [];
-        this.selectAllChecked = false;
-        this.active = false;
-        this.dragging = false;
-        this.lastSelectionData = {};
-        this.addSubscriptions();
-    }
-    get enableMarquee() {
-        const checkboxOnly = this.settings && typeof this.settings === 'object' && this.settings.checkboxOnly;
-        if (!this.settings || checkboxOnly) {
-            return false;
-        }
-        const selectableSettings = this.settings.selectable;
-        const dragAndMultiple = typeof (selectableSettings) === 'object' &&
-            isPresent(selectableSettings) &&
-            selectableSettings.mode === 'multiple' &&
-            selectableSettings.enabled !== false &&
-            !selectableSettings.checkboxOnly &&
-            selectableSettings.drag;
-        return this.active && dragAndMultiple;
+class IdService {
+    constructor() {
+        this.prefix = `k-grid${sequence++}`;
     }
-    init(settings) {
-        this.settings = settings;
-        if (!isPresent(this.lastSelectionStartIndex)) {
-            this.lastSelectionStartIndex = this.ctxService?.grid.selectionDirective?.rangeSelectionStartRow?.index || 0;
-            this.lastSelectionData = this.ctxService?.grid.selectionDirective?.rangeSelectionStartRow?.dataItem || {};
-        }
-        this.currentSelection = [];
-        if (settings.selectable && settings.selectable.enabled !== false) {
-            const iterator = this.getIterator();
-            this._selectAllState = true;
-            let item = iterator.next();
-            while (!item.done) {
-                if (item.value && item.value.type === "data") {
-                    const rowArgs = {
-                        dataItem: item.value.data,
-                        index: item.value.index
-                    };
-                    if (settings.rowSelected(rowArgs)) {
-                        this.currentSelection[item.value.index] = rowArgs;
-                    }
-                    else {
-                        this._selectAllState = undefined;
-                    }
-                }
-                item = iterator.next();
-            }
-            if (this.currentSelection.length === 0) {
-                this._selectAllState = false;
-            }
-        }
+    gridId() {
+        return this.prefix;
     }
-    isSelected(index) {
-        if (this.settings && this.active) {
-            return this.options.enabled && isPresent(this.currentSelection[index]);
-        }
+    cellId(rowIndex, colIndex) {
+        return `${this.prefix}-r${rowIndex}c${colIndex}`;
     }
-    handleClick(item, event) {
-        if (this.dragging) {
-            this.dragging = false;
-            return;
-        }
-        let ev;
-        const ctrlKey = event.ctrlKey || event.metaKey;
-        if (this.options.mode === "single" && ctrlKey && this.isSelected(item.index)) {
-            ev = this.toggle(item);
-        }
-        else if (this.options.mode === "multiple") {
-            if (ctrlKey && !event.shiftKey) {
-                ev = this.toggle(item);
-            }
-            else if (event.shiftKey) {
-                ev = this.addAllTo(item, ctrlKey);
-            }
-        }
-        if (!isPresent(ev)) {
-            ev = this.select(item);
-            this.currentSelection[item.index] = {
-                dataItem: item.data,
-                index: item.index
-            };
-        }
-        if (!ev.selectedRows.length && !ev.deselectedRows.length) {
-            return;
-        }
-        ev.ctrlKey = ctrlKey;
-        ev.shiftKey = event.shiftKey;
-        if (this.options.cellAggregates) {
-            this.aggregateChanges.emit(ev);
-            ev.cellAggregates = this.aggregates;
-        }
-        if (ev.shiftKey) {
-            ev.rangeStartRow = { dataItem: this.lastSelectionData, index: this.lastSelectionStartIndex };
-            ev.rangeEndRow = { dataItem: item.data, index: item.index };
-        }
-        this.changes.emit(ev);
+    selectionCheckboxId(itemIndex) {
+        return `${this.prefix}-checkbox${itemIndex}`;
     }
-    toggle(item) {
-        const selectedRows = [];
-        const deselectedRows = [];
-        this.lastSelectionStartIndex = item.index;
-        this.lastSelectionData = item.data;
-        const rowArgs = { dataItem: item.data, index: item.index };
-        if (this.isSelected(item.index)) {
-            deselectedRows.push(rowArgs);
-        }
-        else {
-            selectedRows.push(rowArgs);
-        }
-        return {
-            deselectedRows: deselectedRows,
-            selectedRows: selectedRows
-        };
+    selectAllCheckboxId() {
+        return `${this.prefix}-select-all`;
     }
-    toggleByIndex(index) {
-        const iterator = this.getIterator();
-        if (this.selectAllChecked && this.isSelected(index)) {
-            this.selectAllChecked = false;
-        }
-        let item = iterator.next();
-        while (!item.done) {
-            if (item.value && item.value.type === "data" && item.value.index === index) {
-                const itemToToggle = {
-                    data: item.value.data,
-                    index: item.value.index
-                };
-                if (this.isSelected(index) || this.options.mode === "multiple") {
-                    return this.toggle(itemToToggle);
-                }
-                else {
-                    return this.select(itemToToggle);
-                }
-            }
-            item = iterator.next();
-        }
+}
+IdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+IdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IdService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IdService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return []; } });
+
+/**
+ * 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 HeaderTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    select(item) {
-        const deselectedRows = [];
-        const selectedRows = [];
-        this.lastSelectionStartIndex = item.index;
-        this.lastSelectionData = item.data;
-        if (!this.isSelected(item.index)) {
-            selectedRows.push({ dataItem: item.data, index: item.index });
-        }
-        this.currentSelection.forEach((row) => {
-            if (row.index !== item.index) {
-                deselectedRows.push(row);
-            }
-        });
-        return {
-            deselectedRows: deselectedRows,
-            selectedRows: selectedRows
-        };
+}
+HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridHeaderTemplate]'
+                }]
+        }], 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 {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    //Used to manually deselect removed items
-    deselect(removedItem) {
-        const iterator = this.getIterator();
-        let item = iterator.next();
-        while (!item.done) {
-            if (item.value && item.value.type === "data" && item.value.data === removedItem) {
-                const rowArgs = {
-                    dataItem: item.value.data,
-                    index: item.value.index
-                };
-                if (this.isSelected(rowArgs.index)) {
-                    const ev = {
-                        ctrlKey: false,
-                        deselectedRows: [rowArgs],
-                        selectedRows: []
-                    };
-                    this.changes.emit(ev);
-                }
-            }
-            item = iterator.next();
-        }
+}
+FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FooterTemplateDirective, selector: "[kendoGridFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridFooterTemplate]'
+                }]
+        }], 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 {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    addAllTo(item, ctrlKey) {
-        const selectedRows = [];
-        const deselectedRows = [];
-        const start = Math.min(this.lastSelectionStartIndex, item.index);
-        const end = Math.max(this.lastSelectionStartIndex, item.index);
-        const iterator = this.getIterator();
-        let next = iterator.next();
-        while (!next.done) {
-            if (next.value && next.value.type === "data") {
-                const idx = next.value.index;
-                const rowArgs = { dataItem: next.value.data, index: idx };
-                if ((idx < start || idx > end) && this.isSelected(idx) && !ctrlKey) {
-                    deselectedRows.push(rowArgs);
-                }
-                if ((idx >= start && idx <= end) && !this.isSelected(idx)) {
-                    selectedRows.push(rowArgs);
-                }
-            }
-            next = iterator.next();
+}
+ColumnMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ColumnMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuTemplateDirective, selector: "[kendoGridColumnMenuTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridColumnMenuTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * @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 {
+    /**
+     * @hidden
+     */
+    constructor(parent, idService) {
+        this.parent = parent;
+        /**
+         * @hidden
+         */
+        this.matchesMedia = true;
+        /**
+         * The column index after reordering. The `orderIndex` is a read-only property. Setting this field does not affect column order.
+         *
+         * @default 0
+         */
+        this.orderIndex = 0;
+        /**
+         * @hidden
+         */
+        this.isColumnGroup = false;
+        /**
+         * @hidden
+         */
+        this.isSpanColumn = false;
+        /**
+         * Indicates whether the column is resizable.
+         * @default true
+         */
+        this.resizable = true;
+        /**
+         * Indicates whether the column is reorderable.
+         * @default true
+         */
+        this.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
+         */
+        this.minResizableWidth = 10;
+        this._locked = false;
+        /**
+         * Determines whether the column will be always visible when scrolling the Grid horizontally.
+         *
+         * @default false
+         */
+        this.sticky = false;
+        /**
+         * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
+         * @default true
+         */
+        this.lockable = true;
+        /**
+         * Specifies if the column can be stuck or unstuck from the column menu.
+         * @default true
+         */
+        this.stickable = true;
+        /**
+         * Specifies if the column menu will be shown for the column.
+         * @default true
+         */
+        this.columnMenu = true;
+        /**
+         * Specifies if the column will be included in the column-chooser list.
+         * @default true
+         */
+        this.includeInChooser = true;
+        /**
+         * @hidden
+         */
+        this.headerTemplates = new QueryList();
+        /**
+         * @hidden
+         */
+        this.columnMenuTemplates = new QueryList();
+        this.idService = idService;
+        if (parent && idService && parent.idService.gridId() === idService.gridId() && !isColumnContainer(parent)) {
+            throw new Error('Columns can be nested only inside ColumnGroupComponent');
         }
-        return {
-            deselectedRows: deselectedRows,
-            selectedRows: selectedRows
-        };
     }
-    updateAll(selectAllChecked) {
-        this.selectAllChecked = selectAllChecked;
-        const selectedRows = [];
-        const deselectedRows = [];
-        const iterator = this.getIterator();
-        let next = iterator.next();
-        while (!next.done) {
-            if (next.value && next.value.type === "data") {
-                const idx = next.value.index;
-                const rowArgs = { dataItem: next.value.data, index: idx };
-                if (this.isSelected(idx) && !selectAllChecked) {
-                    deselectedRows.push(rowArgs);
-                }
-                if (!this.isSelected(idx) && selectAllChecked) {
-                    selectedRows.push(rowArgs);
-                }
-            }
-            next = iterator.next();
-        }
-        if (!selectedRows.length && !deselectedRows.length) {
-            return;
-        }
-        const ev = {
-            ctrlKey: true,
-            deselectedRows: deselectedRows,
-            selectedRows: selectedRows,
-            shiftKey: true
-        };
-        this.changes.emit(ev);
+    /**
+     * @hidden
+     */
+    set leafIndex(value) {
+        this._leafIndex = value;
     }
-    selectRange(startIndex, endIndex) {
-        const selectedRows = [];
-        const deselectedRows = [];
-        const start = Math.min(startIndex, endIndex);
-        const end = Math.max(startIndex, endIndex);
-        const iterator = this.getIterator();
-        let next = iterator.next();
-        while (!next.done) {
-            if (next.value && next.value.type === "data") {
-                const idx = next.value.index;
-                const rowArgs = { dataItem: next.value.data, index: idx };
-                if ((idx < start || idx > end) && this.isSelected(idx)) {
-                    deselectedRows.push(rowArgs);
-                }
-                if ((idx >= start && idx <= end) && !this.isSelected(idx)) {
-                    selectedRows.push(rowArgs);
-                }
+    /**
+     * @hidden
+     */
+    get leafIndex() {
+        return this._leafIndex;
+    }
+    /**
+     * 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(`Expected numeric value for column width, but got a string "${value}". Treating as ${parsedValue}px.`);
             }
-            next = iterator.next();
         }
-        let cellAggregates;
-        if (this.options.cellAggregates) {
-            this.aggregateChanges.emit({ selectedRows, deselectedRows });
-            cellAggregates = this.aggregates;
+        else {
+            this._width = value;
         }
-        return {
-            deselectedRows: deselectedRows,
-            selectedRows: selectedRows,
-            cellAggregates
-        };
-    }
-    get selectAllState() {
-        return this._selectAllState;
-    }
-    get selected() {
-        return this.currentSelection.map((item) => {
-            return item.index;
-        }).filter((n) => typeof n === "number");
     }
-    get options() {
-        const defaultOptions = {
-            cellAggregates: false,
-            checkboxOnly: false,
-            enabled: true,
-            mode: "multiple"
-        };
-        if (!isPresent(this.settings)) {
-            return defaultOptions;
-        }
-        if (typeof this.settings.selectable === 'boolean') {
-            return {
-                cellAggregates: false,
-                checkboxOnly: false,
-                enabled: this.settings.selectable,
-                mode: "multiple"
-            };
-        }
-        else {
-            return Object.assign(defaultOptions, this.settings.selectable);
+    get width() { return this._width; }
+    /**
+     * Toggles the locked (frozen) state of the columns ([more information and example]({% slug locked_columns_grid %})).
+     *
+     * @default false
+     *
+     */
+    set locked(value) {
+        this._locked = value;
+    }
+    get locked() {
+        return this._locked;
+    }
+    /**
+     * @hidden
+     */
+    get level() {
+        if (this.parent && isSpanColumn(this.parent)) {
+            return this.parent.level;
         }
+        return this.parent ? this.parent.level + 1 : 0;
     }
-    ngOnDestroy() {
-        this.removeSubscriptions();
+    /**
+     * @hidden
+     */
+    get isLocked() {
+        return this.parent ? this.parent.isLocked : this.locked;
     }
-    targetArgs() {
-        return {
-            index: this.mouseDownEventArgs.rowIndex,
-            dataItem: this.mouseDownEventArgs.dataItem
-        };
+    /**
+     * @hidden
+     */
+    get colspan() {
+        return 1;
     }
-    addSubscriptions() {
-        if (!this.cellClickSubscription) {
-            this.cellClickSubscription = this.domEvents.cellClick.subscribe((args) => {
-                if (this.options.enabled && !this.options.checkboxOnly && args.type !== 'contextmenu') {
-                    if (this.active) {
-                        this.handleClick({ index: args.rowIndex, data: args.dataItem }, args.originalEvent);
-                    }
-                }
-            });
-        }
-        if (!this.mousedownSubscription) {
-            this.mousedownSubscription = this.domEvents.cellMousedown.subscribe((args) => {
-                this.mouseDownEventArgs = args;
-                if ((this.options.enabled && (!this.options.mode || this.options.mode === "multiple") &&
-                    !this.options.checkboxOnly && args.originalEvent.shiftKey)) {
-                    if (this.active) {
-                        args.originalEvent.preventDefault();
-                        this.navigationService.focusCellByElement(args.originalEvent.target);
-                    }
-                }
-            });
-        }
-        if (this.localDataChangesService && !this.dataChangedSubscription) {
-            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe((args) => {
-                if (this.active) {
-                    if (isPresent(args.action) && args.action === 'remove') {
-                        this.deselect(args.item);
-                    }
-                }
-            });
-        }
+    /**
+     * @hidden
+     */
+    rowspan(totalColumnLevels) {
+        return this.level < totalColumnLevels ? (totalColumnLevels - this.level) + 1 : 1;
     }
-    getIterator() {
-        const accessor = this.settings.view.accessor();
-        if (!accessor) {
-            return;
-        }
-        return accessor[iterator]();
+    /**
+     * @hidden
+     */
+    get headerTemplateRef() {
+        const template = this.headerTemplates.first;
+        return template ? template.templateRef : undefined;
     }
-    removeSubscriptions() {
-        if (this.cellClickSubscription) {
-            this.cellClickSubscription.unsubscribe();
-            this.cellClickSubscription = null;
-        }
-        if (this.mousedownSubscription) {
-            this.mousedownSubscription.unsubscribe();
-            this.mousedownSubscription = null;
-        }
-        if (this.dataChangedSubscription) {
-            this.dataChangedSubscription.unsubscribe();
-            this.dataChangedSubscription = null;
-        }
+    /**
+     * @hidden
+     */
+    get footerTemplateRef() {
+        return this.footerTemplate ? this.footerTemplate.templateRef : undefined;
+    }
+    /**
+     * @hidden
+     */
+    get columnMenuTemplateRef() {
+        const template = this.columnMenuTemplates.first;
+        return template ? template.templateRef : null;
+    }
+    /**
+     * @hidden
+     */
+    get displayTitle() {
+        return this.title;
+    }
+    /**
+     * @hidden
+     */
+    get isVisible() {
+        return !this.hidden && this.matchesMedia;
     }
 }
-SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionService, deps: [{ token: DomEventsService }, { token: LocalDataChangesService }, { token: NavigationService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
-SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: DomEventsService }, { type: LocalDataChangesService }, { type: NavigationService }, { type: ContextService }]; } });
+ColumnBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: IdService }], target: i0.ɵɵFactoryTarget.Component });
+ColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.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", 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: "13.3.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
+            }], 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]
+            }] } });
 
 /**
- * @hidden
+ * 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 CellSelectionService {
-    constructor(domEvents, localDataChangesService, navigationService) {
-        this.domEvents = domEvents;
-        this.localDataChangesService = localDataChangesService;
-        this.navigationService = navigationService;
-        this.changes = new EventEmitter();
-        this.aggregateChanges = new EventEmitter();
-        this.mouseUpEvent = new EventEmitter();
-        this.currentSelection = [];
-        this.active = false;
-        this.dragging = false;
-        this.dragSelectDeselect = false;
-        this.lastSelectionItem = { itemKey: 0, columnKey: 0 };
-        this.lastSelectionItemRowIndex = 0;
-        this.lastSelectionItemColIndex = 0;
-        this.addSubscriptions();
+class CellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    get enableMarquee() {
-        const checkboxOnly = this.settings && typeof this.settings === 'object' && this.settings.checkboxOnly;
-        if (!this.settings || checkboxOnly) {
-            return false;
-        }
-        const selectableSettings = this.settings.selectable;
-        const dragAndMultiple = typeof (selectableSettings) === 'object' &&
-            isPresent(selectableSettings) &&
-            selectableSettings.mode === 'multiple' &&
-            selectableSettings.cell &&
-            selectableSettings.enabled !== false &&
-            selectableSettings.drag;
-        return this.active && dragAndMultiple;
+}
+CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridCellTemplate]'
+                }]
+        }], 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 {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    init(settings) {
-        this.settings = settings;
-        this.currentSelection = [];
-        if (settings.selectable && settings.selectable.enabled !== false) {
-            const iterator = this.getIterator();
-            let item = iterator.next();
-            while (!item.done) {
-                if (item.value && item.value.type === "data") {
-                    const rowArgs = {
-                        dataItem: item.value.data,
-                        index: item.value.index
-                    };
-                    settings.columns.forEach(col => {
-                        const selectedCellArgs = settings.cellSelected(rowArgs, col, col.leafIndex);
-                        if (selectedCellArgs.selected) {
-                            this.currentSelection.push(selectedCellArgs.item);
-                        }
-                    });
-                }
-                item = iterator.next();
-            }
-        }
+}
+EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+EditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: EditTemplateDirective, selector: "[kendoGridEditTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridEditTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * 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 {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    isCellSelected(item, col) {
-        if (this.settings && this.active) {
-            const selectedCellArgs = this.settings.cellSelected({ dataItem: item.data, index: item.index }, col, col.leafIndex);
-            return this.options.enabled && selectedCellArgs.selected;
-        }
-        return false;
+}
+GroupHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GroupHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GroupHeaderTemplateDirective, selector: "[kendoGridGroupHeaderTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridGroupHeaderTemplate]'
+                }]
+        }], 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 {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    handleClick(item, event) {
-        if (this.dragging) {
-            this.dragging = false;
-            return;
-        }
-        let ev;
-        const ctrlKey = event.ctrlKey || event.metaKey;
-        if (this.options.mode === "single" && ctrlKey && this.isCellSelected(item, item.column)) {
-            ev = this.toggle(item);
-        }
-        else if (this.options.mode === "multiple") {
-            if (ctrlKey && !event.shiftKey) {
-                ev = this.toggle(item);
-            }
-            else if (event.shiftKey) {
-                const startRowIndex = Math.min(this.lastSelectionItemRowIndex, item.index);
-                const startColIndex = Math.min(this.lastSelectionItemColIndex, item.column.leafIndex);
-                const endRowIndex = Math.max(this.lastSelectionItemRowIndex, item.index);
-                const endColIndex = Math.max(this.lastSelectionItemColIndex, item.column.leafIndex);
-                ev = this.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex);
-            }
-        }
-        if (!isPresent(ev)) {
-            ev = this.select(item);
-            this.currentSelection = [this.lastSelectionItem];
-        }
-        if (!ev.selectedCells.length && !ev.deselectedCells.length) {
-            return;
-        }
-        ev.ctrlKey = ctrlKey;
-        ev.shiftKey = event.shiftKey;
-        if (this.options.cellAggregates) {
-            this.aggregateChanges.emit(ev);
-            ev.cellAggregates = this.aggregates;
-        }
-        if (ev.shiftKey) {
-            ev.rangeStartCell = this.lastSelectionItem;
-            ev.rangeEndCell = {
-                ...this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item
-            };
-        }
-        this.changes.emit(ev);
+}
+GroupHeaderColumnTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderColumnTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GroupHeaderColumnTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GroupHeaderColumnTemplateDirective, selector: "[kendoGridGroupHeaderColumnTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderColumnTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridGroupHeaderColumnTemplate]'
+                }]
+        }], 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 {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    toggle(item) {
-        const selectedCells = [];
-        const deselectedCells = [];
-        this.lastSelectionItem =
-            this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item;
-        this.lastSelectionItemRowIndex = item.index;
-        this.lastSelectionItemColIndex = item.column.leafIndex;
-        if (this.isCellSelected(item, item.column)) {
-            deselectedCells.push(this.lastSelectionItem);
-        }
-        else {
-            selectedCells.push(this.lastSelectionItem);
-        }
-        return {
-            deselectedCells,
-            selectedCells
-        };
+}
+GroupFooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+GroupFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GroupFooterTemplateDirective, selector: "[kendoGridGroupFooterTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupFooterTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridGroupFooterTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the filter-cell template ([see example]({% slug filter_row %}#toc-custom-filters)).
+ */
+class FilterCellTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    select(item) {
-        const selectedCells = [];
-        const deselectedCells = [];
-        this.lastSelectionItem =
-            this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item;
-        this.lastSelectionItemRowIndex = item.index;
-        this.lastSelectionItemColIndex = item.column.leafIndex;
-        if (!this.isCellSelected(item, item.column)) {
-            selectedCells.push(this.lastSelectionItem);
-        }
-        this.currentSelection.forEach((selectedItem) => {
-            if (selectedItem.itemKey !== this.lastSelectionItem.itemKey || selectedItem.columnKey !== this.lastSelectionItem.columnKey) {
-                deselectedCells.push(selectedItem);
-            }
-        });
-        return {
-            deselectedCells,
-            selectedCells
-        };
+}
+FilterCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FilterCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridFilterCellTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the filter-menu template
+ * ([see example]({% slug filter_menu %}#toc-custom-filters)).
+ */
+class FilterMenuTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    //Used to manually deselect removed items
-    deselect(removedItem) {
-        const iterator = this.getIterator();
-        let item = iterator.next();
-        let rowArgs;
-        while (!item.done) {
-            if (item.value && item.value.type === "data" && item.value.data === removedItem) {
-                rowArgs = {
-                    dataItem: item.value.data,
-                    index: item.value.index
-                };
-                break;
-            }
-            item = iterator.next();
-        }
-        if (rowArgs) {
-            const cellsToRemove = this.currentSelection.filter(selectedItem => {
-                const contender = this.settings.cellSelected(rowArgs, null, null).item;
-                return selectedItem.itemKey === contender.itemKey;
-            });
-            if (cellsToRemove.length) {
-                const ev = {
-                    ctrlKey: false,
-                    deselectedCells: cellsToRemove,
-                    selectedCells: []
-                };
-                this.changes.emit(ev);
-            }
-        }
+}
+FilterMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FilterMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FilterMenuTemplateDirective, selector: "[kendoGridFilterMenuTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridFilterMenuTemplate]'
+                }]
+        }], 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 {
+    constructor(parent, idService) {
+        super(parent, idService);
+        /**
+         * Allows the user to click the column headers and emits the `sortChange` event. [See example](slug:sorting_grid).
+         *
+         * @default true
+         */
+        this.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
+         */
+        this.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'
+         */
+        this.editor = 'text';
+        /**
+         * Defines the filter type that is displayed inside the filter row. [See example](slug:filtering_grid#toc-filter-data-types).
+         *
+         * @default 'text'
+         */
+        this.filter = 'text';
+        /**
+         * Defines if a filter UI will be displayed for this column. [See example](slug:filtering_grid).
+         *
+         * @default true
+         */
+        this.filterable = true;
+        /**
+         * Defines whether the column is editable. [See example](slug:make_fields_uneditable_grid).
+         *
+         * @default true
+         */
+        this.editable = true;
     }
-    selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex) {
-        const selectedCells = [];
-        const deselectedCells = [];
-        const selectionStartRow = Math.min(startRowIndex, endRowIndex);
-        const selectionStartCol = Math.min(startColIndex, endColIndex);
-        const selectionEndRow = Math.max(startRowIndex, endRowIndex);
-        const selectionEndCol = Math.max(startColIndex, endColIndex);
-        const iterator = this.getIterator();
-        let next = iterator.next();
-        while (!next.done) {
-            if (next.value && next.value.type === "data") {
-                const idx = next.value.index;
-                const data = next.value.data;
-                const rowArgs = {
-                    dataItem: data,
-                    index: idx
-                };
-                this.settings.columns.forEach(col => {
-                    const { item } = this.settings.cellSelected(rowArgs, col, col.leafIndex);
-                    const selected = this.isCellSelected(next.value, col);
-                    const isInRowRange = selectionStartRow <= idx && idx <= selectionEndRow;
-                    const isInColRange = selectionStartCol <= col.leafIndex && col.leafIndex <= selectionEndCol;
-                    const isInSelectionRect = isInRowRange && isInColRange;
-                    if (!isInSelectionRect && selected) {
-                        deselectedCells.push(item);
-                    }
-                    if (isInSelectionRect && !selected) {
-                        selectedCells.push(item);
-                    }
-                });
-            }
-            next = iterator.next();
-        }
-        let cellAggregates;
-        if (this.options.cellAggregates) {
-            this.aggregateChanges.emit({ selectedCells, deselectedCells });
-            cellAggregates = this.aggregates;
-        }
-        return {
-            deselectedCells,
-            selectedCells,
-            cellAggregates
-        };
+    get templateRef() {
+        return this.template ? this.template.templateRef : undefined;
     }
-    get options() {
-        const defaultOptions = {
-            cellAggregates: false,
-            checkboxOnly: false,
-            enabled: true,
-            mode: "multiple"
-        };
-        if (!isPresent(this.settings)) {
-            return defaultOptions;
-        }
-        if (typeof this.settings.selectable === 'boolean') {
-            return {
-                cellAggregates: false,
-                checkboxOnly: false,
-                enabled: this.settings.selectable,
-                mode: "multiple"
-            };
-        }
-        else {
-            return Object.assign(defaultOptions, this.settings.selectable);
-        }
+    get groupHeaderTemplateRef() {
+        return this.groupHeaderTemplate ? this.groupHeaderTemplate.templateRef : undefined;
     }
-    ngOnDestroy() {
-        this.removeSubscriptions();
+    get groupHeaderColumnTemplateRef() {
+        return this.groupHeaderColumnTemplate ? this.groupHeaderColumnTemplate.templateRef : undefined;
     }
-    addSubscriptions() {
-        if (!this.cellClickSubscription) {
-            this.cellClickSubscription = this.domEvents.cellClick.subscribe((args) => {
-                if (this.options.enabled && !this.options.checkboxOnly && args.type !== 'contextmenu') {
-                    if (this.active) {
-                        this.handleClick({ index: args.rowIndex, data: args.dataItem, column: args.column }, args.originalEvent);
-                    }
-                }
-            });
-        }
-        if (!this.mousedownSubscription) {
-            this.mousedownSubscription = this.domEvents.cellMousedown.subscribe((args) => {
-                this.mouseDownEventArgs = args;
-                if (this.options.enabled && (!this.options.mode || this.options.mode === "multiple") &&
-                    !this.options.checkboxOnly && args.originalEvent.shiftKey) {
-                    if (this.active) {
-                        args.originalEvent.preventDefault();
-                        this.navigationService.focusCellByElement(args.originalEvent.target);
-                    }
-                }
-            });
-        }
-        if (this.localDataChangesService && !this.dataChangedSubscription) {
-            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe((args) => {
-                if (this.active) {
-                    if (isPresent(args.action) && args.action === 'remove') {
-                        this.deselect(args.item);
-                    }
-                }
-            });
-        }
+    get groupFooterTemplateRef() {
+        return this.groupFooterTemplate ? this.groupFooterTemplate.templateRef : undefined;
     }
-    getIterator() {
-        const accessor = this.settings.view.accessor();
-        if (!accessor) {
-            return;
-        }
-        return accessor[iterator]();
+    get editTemplateRef() {
+        return this.editTemplate ? this.editTemplate.templateRef : undefined;
     }
-    removeSubscriptions() {
-        if (this.cellClickSubscription) {
-            this.cellClickSubscription.unsubscribe();
-            this.cellClickSubscription = null;
-        }
-        if (this.mousedownSubscription) {
-            this.mousedownSubscription.unsubscribe();
-            this.mousedownSubscription = null;
-        }
-        if (this.dataChangedSubscription) {
-            this.dataChangedSubscription.unsubscribe();
-            this.dataChangedSubscription = null;
-        }
+    get filterCellTemplateRef() {
+        return this.filterCellTemplate ? this.filterCellTemplate.templateRef : undefined;
+    }
+    get filterMenuTemplateRef() {
+        return this.filterMenuTemplate ? this.filterMenuTemplate.templateRef : undefined;
+    }
+    get displayTitle() {
+        return this.title === undefined ? this.field : this.title;
     }
 }
-CellSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellSelectionService, deps: [{ token: DomEventsService }, { token: LocalDataChangesService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Injectable });
-CellSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellSelectionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellSelectionService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: DomEventsService }, { type: LocalDataChangesService }, { type: NavigationService }]; } });
+ColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnComponent, 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)
+        }
+    ], 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: "13.3.12", ngImport: i0, type: ColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: ColumnBase,
+                            useExisting: forwardRef(() => ColumnComponent)
+                        }
+                    ],
+                    selector: 'kendo-grid-column',
+                    template: ``
+                }]
+        }], 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 }]
+            }] } });
 
-const createElement$1 = () => {
-    if (!isDocumentAvailable()) {
-        return;
-    }
-    const marquee = document.createElement("div");
-    marquee.className = "k-marquee";
-    const marqueeColor = document.createElement("div");
-    marqueeColor.className = "k-marquee-color";
-    marquee.appendChild(marqueeColor);
-    return marquee;
-};
-const POINTER_OFFSET = 2;
-const MINIMAL_DRAG_DISTANCE = 5;
-const offsets = {
-    topLeft: { x: POINTER_OFFSET, y: POINTER_OFFSET },
-    topRight: { x: -POINTER_OFFSET, y: POINTER_OFFSET },
-    bottomLeft: { x: POINTER_OFFSET, y: -POINTER_OFFSET },
-    bottomRight: { x: -POINTER_OFFSET, y: -POINTER_OFFSET }
-};
 /**
  * @hidden
  */
-class GridMarqueeDirective {
-    constructor(draggable, selection, cellSelection, domEvents) {
-        this.draggable = draggable;
-        this.selection = selection;
-        this.cellSelection = cellSelection;
-        this.domEvents = domEvents;
-        this.selectionStarted = false;
-    }
-    get webkitUserSelection() {
-        return (this.cellSelection.enableMarquee || this.selection.enableMarquee) ? 'none' : null;
+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 {
+    constructor(parent, idService) {
+        super(parent, idService);
+        /*
+         * @hidden
+         */
+        this.isSpanColumn = true;
+        this.template = new QueryList();
+        this.editTemplate = new QueryList();
+        /**
+         * @hidden
+         */
+        this.childColumns = new QueryList();
+        /**
+         * @hidden
+         */
+        this.includeInChooser = false;
+        this._editable = true;
+        if (parent && parent.isSpanColumn) {
+            throw new Error('SpanColumn cannot be nested inside another SpanColumn');
+        }
     }
-    get userSelection() {
-        return (this.cellSelection.enableMarquee || this.selection.enableMarquee);
+    /**
+     * 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;
     }
-    ngOnInit() {
-        this.subscriptions = (this.draggable.kendoPress.subscribe(this.start.bind(this)));
-        this.subscriptions.add(this.draggable.kendoDrag.subscribe(this.moveMarquee.bind(this)));
+    get editable() {
+        return isPresent(this.editTemplateRef) && this._editable;
     }
-    ngOnDestroy() {
-        this.subscriptions.unsubscribe();
-        this.clean();
+    /**
+     * @hidden
+     * added for backwards compitability
+     */
+    set width(_value) {
     }
-    start(args) {
-        const isInvalidTarget = args.originalEvent.target.matches('.k-grid-content, .k-grid-content-locked, .k-grid-aria-root, .k-checkbox');
-        if (isInvalidTarget) {
-            this.pressArgs = null;
-            return;
-        }
-        this.pressArgs = args;
-        this.pressTarget = null;
+    get width() {
+        return this.childColumns.reduce((total, column) => total + column.width, 0);
     }
-    moveMarquee(args) {
-        if (!this.pressTarget) {
-            this.pressTarget = this.cellSelection.active ? this.cellSelection.mouseDownEventArgs : this.selection.mouseDownEventArgs;
-        }
-        const press = this.pressArgs;
-        if (!press) {
-            return;
-        }
-        if (!this.selectionStarted) {
-            const distance = Math.sqrt((args.pageX - press.pageX) ** 2 + (args.pageY - press.pageY) ** 2);
-            if (distance > MINIMAL_DRAG_DISTANCE) {
-                this.selectionStarted = true;
-                this.dragEndSubscription = merge(this.domEvents.cellMouseup.pipe(take(1)), this.draggable.kendoRelease.pipe(delay(1), take(1)))
-                    .subscribe(this.endSelection.bind(this));
-            }
-            else {
-                return;
-            }
-        }
-        this.initMarquee();
-        const element = this.marqueeElement;
-        const marqueeQuadrant = this.getMarqueeQuadrant(args.pageX, args.pageY, press.pageX, press.pageY);
-        let left = Math.min(args.pageX, press.pageX);
-        let top = Math.min(args.pageY, press.pageY);
-        const width = Math.abs(args.pageX - press.pageX);
-        const height = Math.abs(args.pageY - press.pageY);
-        if (marqueeQuadrant) {
-            left += offsets[marqueeQuadrant].x;
-            top += offsets[marqueeQuadrant].y;
-        }
-        element.style.left = `${left}px`;
-        element.style.top = `${top}px`;
-        element.style.width = `${width}px`;
-        element.style.height = `${height}px`;
+    /**
+     * @hidden
+     */
+    get leafIndex() {
+        return this.childColumns.first.leafIndex;
     }
-    endSelection(args) {
-        if (args.type === 'mouseup' || args.type === 'touchend') {
-            if (this.cellSelection.active) {
-                this.cellSelection.dragging = true;
-                this.cellSelection.changes.emit(this.cellSelection.selectRange(this.pressTarget.rowIndex, this.pressTarget.column.leafIndex, args.rowIndex, args.column.leafIndex));
-            }
-            else if (this.selection.active) {
-                this.selection.dragging = true;
-                this.selection.changes.emit(this.selection.selectRange(this.pressTarget.rowIndex, args.rowIndex));
-            }
-        }
-        this.clean();
+    /**
+     * @hidden
+     */
+    get templateRef() {
+        const template = this.template.first;
+        return template ? template.templateRef : undefined;
     }
-    clean() {
-        if (this.marqueeElement) {
-            document.body.removeChild(this.marqueeElement);
-            this.marqueeElement = null;
-        }
-        if (this.dragEndSubscription) {
-            this.dragEndSubscription.unsubscribe();
-        }
-        this.dragEndSubscription = null;
-        this.pressTarget = null;
-        this.pressArgs = null;
-        this.selectionStarted = false;
-        // eslint-disable-next-line no-unused-expressions
-        this.cellSelection.active ? this.cellSelection.dragging = false : this.selection.dragging = false;
+    /**
+     * @hidden
+     */
+    get editTemplateRef() {
+        const editTemplate = this.editTemplate.first;
+        return editTemplate ? editTemplate.templateRef : undefined;
     }
-    initMarquee() {
-        if (!isDocumentAvailable()) {
-            return;
-        }
-        if (!this.marqueeElement) {
-            this.marqueeElement = createElement$1();
-            document.body.appendChild(this.marqueeElement);
-        }
+    /**
+     * @hidden
+     */
+    get colspan() {
+        return this.childColumns.filter(c => c.isVisible).length;
     }
-    getMarqueeQuadrant(pointerX, pointerY, startX, startY) {
-        const leftHalf = pointerX < startX;
-        const rightHalf = pointerX > startX;
-        const topHalf = pointerY < startY;
-        const bottomHalf = pointerY > startY;
-        if (leftHalf && topHalf) {
-            return 'topLeft';
-        }
-        if (leftHalf && bottomHalf) {
-            return 'bottomLeft';
-        }
-        if (rightHalf && topHalf) {
-            return 'topRight';
-        }
-        if (rightHalf && bottomHalf) {
-            return 'bottomRight';
-        }
-        return null;
+    /**
+     * 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;
     }
 }
-GridMarqueeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMarqueeDirective, deps: [{ token: i1$1.DraggableDirective }, { token: SelectionService }, { token: CellSelectionService }, { token: DomEventsService }], target: i0.ɵɵFactoryTarget.Directive });
-GridMarqueeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]", host: { properties: { "style.-webkit-user-select": "this.webkitUserSelection", "class.user-select-none": "this.userSelection" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMarqueeDirective, decorators: [{
-            type: Directive,
+SpanColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpanColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SpanColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpanColumnComponent, 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: "13.3.12", ngImport: i0, type: SpanColumnComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[kendoGridSelectionMarquee]'
+                    providers: [
+                        {
+                            provide: ColumnBase,
+                            useExisting: forwardRef(() => SpanColumnComponent)
+                        }
+                    ],
+                    selector: 'kendo-grid-span-column',
+                    template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.DraggableDirective }, { type: SelectionService }, { type: CellSelectionService }, { type: DomEventsService }]; }, propDecorators: { webkitUserSelection: [{
-                type: HostBinding,
-                args: ['style.-webkit-user-select']
-            }], userSelection: [{
-                type: HostBinding,
-                args: ['class.user-select-none']
+        }], 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
  */
-class ZoneAwareEventEmitter extends EventEmitter {
-    constructor(ngZone, isAsync = false) {
-        super(isAsync);
-        this.ngZone = ngZone;
-    }
-    subscribe(generatorOrNext, error, complete) {
-        let schedulerFn;
-        let errorFn = (_) => null;
-        let completeFn = () => null;
-        if (generatorOrNext && typeof generatorOrNext === 'object') {
-            schedulerFn = (value) => { this.ngZone.run(() => generatorOrNext.next(value)); };
-            if (generatorOrNext.error) {
-                errorFn = (err) => { this.ngZone.run(() => generatorOrNext.error(err)); };
-            }
-            if (generatorOrNext.complete) {
-                completeFn = () => { this.ngZone.run(() => generatorOrNext.complete()); };
-            }
+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);
+/**
+ * @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 {
-            schedulerFn = (value) => { this.ngZone.run(() => generatorOrNext(value)); };
-            if (error) {
-                errorFn = (err) => { this.ngZone.run(() => error(err)); };
-            }
-            if (complete) {
-                completeFn = () => { this.ngZone.run(() => complete()); };
-            }
+            acc.push(column);
         }
-        return super.subscribe(schedulerFn, errorFn, completeFn);
-    }
-}
-
+        return acc;
+    }, []).filter(x => x.isVisible);
+};
 /**
  * @hidden
  */
-const packageMetadata = {
-    name: '@progress/kendo-angular-grid',
-    productName: 'Kendo UI for Angular',
-    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1686117789,
-    version: '13.0.2',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
-};
+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);
 
 /**
- * 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 {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
+function isColumnGroupComponent(column) {
+    return column.isColumnGroup;
 }
-CellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-CellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: CellTemplateDirective, selector: "[kendoGridCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridCellTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
 /**
- * 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.
+ * Represents the column group header of the Grid
+ * ([more information and examples](slug:multicolumnheaders_columns_grid)).
  *
  * @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 [data]="gridData">
+ *   <kendo-grid-column-group title="Product Info">
+ *     <kendo-grid-column field="ProductID"></kendo-grid-column>
+ *     <kendo-grid-column field="ProductName"></kendo-grid-column>
+ *   </kendo-grid-column-group>
+ *   <kendo-grid-column field="UnitPrice"></kendo-grid-column>
  * </kendo-grid>
  * ```
  */
-class GroupHeaderTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-GroupHeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GroupHeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GroupHeaderTemplateDirective, selector: "[kendoGridGroupHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridGroupHeaderTemplate]'
-                }]
-        }], 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 {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+class ColumnGroupComponent extends ColumnBase {
+    constructor(parent, idService) {
+        super(parent, idService);
+        this.parent = parent;
+        /**
+         * @hidden
+         */
+        this.includeInChooser = false;
+        /**
+         * @hidden
+         */
+        this.isColumnGroup = true;
+        /**
+         * @hidden
+         */
+        this.minResizableWidth = 10;
+        if (parent && parent.isSpanColumn) {
+            throw new Error('ColumnGroupComponent cannot be nested inside SpanColumnComponent');
+        }
+    }
+    /**
+     * @hidden
+     */
+    rowspan() {
+        return 1;
+    }
+    /**
+     * @hidden
+     */
+    get colspan() {
+        if (!this.children) {
+            return 1;
+        }
+        return columnsSpan(this.children
+            .filter(child => child !== this && child.isVisible));
+    }
+    /**
+     * @hidden
+     */
+    get leafIndex() {
+        return this.children ? (this.firstChild || {}).leafIndex : -1;
+    }
+    get childrenArray() {
+        return this.children.filter(c => c !== this);
+    }
+    get hasChildren() {
+        return Boolean(this.firstChild);
+    }
+    get firstChild() {
+        return this.children.find(column => column !== this);
     }
 }
-GroupHeaderColumnTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderColumnTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GroupHeaderColumnTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GroupHeaderColumnTemplateDirective, selector: "[kendoGridGroupHeaderColumnTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupHeaderColumnTemplateDirective, decorators: [{
-            type: Directive,
+ColumnGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnGroupComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ColumnGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnGroupComponent, selector: "kendo-grid-column-group", providers: [
+        {
+            provide: ColumnBase,
+            useExisting: forwardRef(() => ColumnGroupComponent)
+        }
+    ], queries: [{ propertyName: "children", predicate: ColumnBase }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnGroupComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[kendoGridGroupHeaderColumnTemplate]'
+                    providers: [
+                        {
+                            provide: ColumnBase,
+                            useExisting: forwardRef(() => ColumnGroupComponent)
+                        }
+                    ],
+                    selector: 'kendo-grid-column-group',
+                    template: ``
                 }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+        }], ctorParameters: function () { return [{ type: ColumnBase, decorators: [{
+                    type: SkipSelf
+                }, {
+                    type: Host
+                }, {
                     type: Optional
-                }] }]; } });
+                }] }, { type: IdService, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { children: [{
+                type: ContentChildren,
+                args: [ColumnBase]
+            }] } });
 
+const reset = (...lists) => {
+    let diff = false;
+    for (let idx = 0; idx < lists.length; idx++) {
+        const [list, columns] = lists[idx];
+        diff = diff || list.length !== columns.length;
+        list.reset(columns);
+    }
+    return diff;
+};
 /**
- * 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 {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+class ColumnsContainer {
+    constructor(columns) {
+        this.columns = columns;
+        this.allColumns = new QueryList();
+        this.leafColumns = new QueryList();
+        this.lockedColumns = new QueryList();
+        this.nonLockedColumns = new QueryList();
+        this.lockedLeafColumns = new QueryList();
+        this.nonLockedLeafColumns = new QueryList();
+        this.totalLevels = 0;
+        this.changes = new EventEmitter();
+        this.leafColumnsToRender = [];
+        this.lockedColumnsToRender = [];
+        this.nonLockedColumnsToRender = [];
+        this.hasGroupHeaderColumn = false;
+        this.hasGroupFooter = false;
+        this.hasFooter = false;
+        this.unlockedWidth = 0;
+    }
+    refresh() {
+        const currentLevels = this.totalLevels;
+        const leafColumns = new Array();
+        const lockedLeafColumns = new Array();
+        const nonLockedLeafColumns = new Array();
+        const lockedColumns = new Array();
+        const nonLockedColumns = new Array();
+        const allColumns = new Array();
+        const leafColumnsToRender = new Array();
+        const lockedColumnsToRender = new Array();
+        const nonLockedColumnsToRender = new Array();
+        let hasGroupHeaderColumn = false;
+        let hasGroupFooter = false;
+        let hasFooter = false;
+        let unlockedWidth = 0;
+        let leafIndex = 0;
+        this.totalLevels = 0;
+        this.columns().forEach(column => {
+            const containerLeafColumns = column.isLocked === true ? lockedLeafColumns : nonLockedLeafColumns;
+            const containerColumns = column.isLocked === true ? lockedColumns : nonLockedColumns;
+            const toRenderContainer = column.isLocked === true ? lockedColumnsToRender : nonLockedColumnsToRender;
+            if (!isColumnGroupComponent(column)) {
+                containerLeafColumns.push(column);
+                leafColumns.push(column);
+                leafColumnsToRender.push(...columnsToRender([column]));
+                toRenderContainer.push(...columnsToRender([column]));
+                hasGroupHeaderColumn = hasGroupHeaderColumn || someLeafColumn(leaf => Boolean(leaf.groupHeaderColumnTemplateRef), column);
+                hasGroupFooter = hasGroupFooter || someLeafColumn(leaf => Boolean(leaf.groupFooterTemplateRef), column);
+                hasFooter = hasFooter || someLeafColumn(leaf => Boolean(leaf.footerTemplateRef), column);
+                if (!column.isLocked) {
+                    unlockedWidth += column.width || 0;
+                }
+                if (column.isSpanColumn) {
+                    column.childColumns.forEach(c => {
+                        c.leafIndex = leafIndex++;
+                    });
+                }
+                else {
+                    column.leafIndex = leafIndex++;
+                }
+            }
+            containerColumns.push(column);
+            allColumns.push(column);
+            this.totalLevels = column.level > this.totalLevels ? column.level : this.totalLevels;
+        });
+        this.hasGroupHeaderColumn = hasGroupHeaderColumn;
+        this.hasGroupFooter = hasGroupFooter;
+        this.hasFooter = hasFooter;
+        this.leafColumnsToRender = leafColumnsToRender;
+        this.lockedColumnsToRender = lockedColumnsToRender;
+        this.nonLockedColumnsToRender = nonLockedColumnsToRender;
+        this.unlockedWidth = unlockedWidth;
+        const changes = reset([this.leafColumns, leafColumns], [this.lockedLeafColumns, lockedLeafColumns], [this.nonLockedLeafColumns, nonLockedLeafColumns], [this.lockedColumns, lockedColumns], [this.allColumns, allColumns], [this.nonLockedColumns, nonLockedColumns]) || currentLevels !== this.totalLevels;
+        if (changes) {
+            this.changes.emit();
+        }
+        return changes;
     }
 }
-EditTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-EditTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: EditTemplateDirective, selector: "[kendoGridEditTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridEditTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
 
+const NO_STICKY = { left: '0px', right: '0px' };
 /**
- * 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 {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-GroupFooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupFooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-GroupFooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GroupFooterTemplateDirective, selector: "[kendoGridGroupFooterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GroupFooterTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridGroupFooterTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-/**
- * 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 HeaderTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+class ColumnInfoService {
+    constructor() {
+        this.visibilityChange = new EventEmitter();
+        this.lockedChange = new EventEmitter();
+        this.stickyChange = new EventEmitter();
+        this.columnRangeChange = new EventEmitter();
+        this.columnsContainer = new ColumnsContainer(() => []);
     }
-}
-HeaderTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-HeaderTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: HeaderTemplateDirective, selector: "[kendoGridHeaderTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridHeaderTemplate]'
-                }]
-        }], 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 {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    get lockedLeafColumns() {
+        return this.columnsContainer.lockedLeafColumns;
     }
-}
-FooterTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FooterTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FooterTemplateDirective, selector: "[kendoGridFooterTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FooterTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridFooterTemplate]'
-                }]
-        }], 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 {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    get nonLockedLeafColumns() {
+        return this.columnsContainer.nonLockedLeafColumns;
     }
-}
-ColumnMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ColumnMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ColumnMenuTemplateDirective, selector: "[kendoGridColumnMenuTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnMenuTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridColumnMenuTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-// Incremented each time the service is instantiated.
-let sequence = 0;
-/**
- * @hidden
- */
-class IdService {
-    constructor() {
-        this.prefix = `k-grid${sequence++}`;
+    get isLocked() {
+        return this.lockedLeafColumns.length > 0;
     }
-    gridId() {
-        return this.prefix;
+    get totalLevels() {
+        return this.columnsContainer.totalLevels;
     }
-    cellId(rowIndex, colIndex) {
-        return `${this.prefix}-r${rowIndex}c${colIndex}`;
+    get hiddenColumns() {
+        if (!this.list) {
+            return [];
+        }
+        return this.list().filter(column => !column.isVisible);
     }
-    selectionCheckboxId(itemIndex) {
-        return `${this.prefix}-checkbox${itemIndex}`;
+    get leafNamedColumns() {
+        const columns = expandColumns(this.list().filterSort(column => !column.isColumnGroup))
+            .filter(column => column.matchesMedia && column.displayTitle);
+        return orderBy(columns, [{ field: 'locked', dir: 'desc' }]);
     }
-    selectAllCheckboxId() {
-        return `${this.prefix}-select-all`;
+    get unlockedRootCount() {
+        return this.list().rootColumns().filter(column => !column.locked && column.isVisible).length;
+    }
+    stickyColumnsStyles(column) {
+        if (!this.stickyColumns) {
+            this.stickyColumns = this.list().rootColumns().filter(column => column.sticky && !column.locked && column.isVisible);
+        }
+        if (this.stickyColumns.length === 0) {
+            return NO_STICKY;
+        }
+        const result = this.stickyColumns.reduce((acc, curr) => {
+            if (curr.leafIndex < column.leafIndex) {
+                acc.left += curr.width;
+            }
+            else if (curr.leafIndex > column.leafIndex) {
+                acc.right += curr.width;
+            }
+            return acc;
+        }, { left: 0, right: 0 });
+        return {
+            left: `${result.left}px`,
+            right: `${result.right}px`
+        };
+    }
+    init(columns, list) {
+        this.columnsContainer = columns;
+        this.list = list;
+        this.stickyColumns = null;
+    }
+    changeVisibility(columns) {
+        this.stickyColumns = null;
+        this.visibilityChange.emit(columns);
+    }
+    changeLocked(columns) {
+        this.stickyColumns = null;
+        this.lockedChange.emit(columns);
+    }
+    changeStuck(columns) {
+        this.stickyColumns = null;
+        this.stickyChange.emit(columns);
     }
 }
-IdService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-IdService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IdService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IdService, decorators: [{
+ColumnInfoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnInfoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ColumnInfoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnInfoService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnInfoService, decorators: [{
             type: Injectable
-        }], ctorParameters: function () { return []; } });
+        }] });
 
+;
 /**
  * @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 {
-    /**
-     * @hidden
-     */
-    constructor(parent, idService) {
-        this.parent = parent;
-        /**
-         * @hidden
-         */
-        this.matchesMedia = true;
-        /**
-         * The column index after reordering. The `orderIndex` is a read-only property. Setting this field does not affect column order.
-         *
-         * @default 0
-         */
-        this.orderIndex = 0;
-        /**
-         * @hidden
-         */
-        this.isColumnGroup = false;
-        /**
-         * @hidden
-         */
-        this.isSpanColumn = false;
-        /**
-         * Indicates whether the column is resizable.
-         * @default true
-         */
-        this.resizable = true;
-        /**
-         * Indicates whether the column is reorderable.
-         * @default true
-         */
-        this.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
-         */
-        this.minResizableWidth = 10;
-        this._locked = false;
-        /**
-         * Determines whether the column will be always visible when scrolling the Grid horizontally.
-         *
-         * @default false
-         */
-        this.sticky = false;
-        /**
-         * Specifies if the column can be locked or unlocked from the column menu or by reordering the columns.
-         * @default true
-         */
-        this.lockable = true;
-        /**
-         * Specifies if the column can be stuck or unstuck from the column menu.
-         * @default true
-         */
-        this.stickable = true;
-        /**
-         * Specifies if the column menu will be shown for the column.
-         * @default true
-         */
-        this.columnMenu = true;
-        /**
-         * Specifies if the column will be included in the column-chooser list.
-         * @default true
-         */
-        this.includeInChooser = true;
-        /**
-         * @hidden
-         */
-        this.headerTemplates = new QueryList();
-        /**
-         * @hidden
-         */
-        this.columnMenuTemplates = new QueryList();
-        this.idService = idService;
-        if (parent && idService && parent.idService.gridId() === idService.gridId() && !isColumnContainer(parent)) {
-            throw new Error('Columns can be nested only inside ColumnGroupComponent');
-        }
-    }
-    /**
-     * @hidden
-     */
-    set leafIndex(value) {
-        this._leafIndex = value;
+class CellSelectionAggregateService {
+    constructor(ctx, dataChanges, columnInfoService) {
+        this.ctx = ctx;
+        this.dataChanges = dataChanges;
+        this.columnInfoService = columnInfoService;
+        this.selectedItems = [];
+        this.groupedAggregates = { dates: [], numbers: [], booleans: [] };
+        this.aggregates = {
+            sum: null,
+            average: null,
+            min: null,
+            max: null,
+            count: null,
+            isTrue: null,
+            isFalse: null,
+            earliest: null,
+            latest: null
+        };
     }
-    /**
-     * @hidden
-     */
-    get leafIndex() {
-        return this._leafIndex;
+    isAggregateIncluded(aggregate) {
+        const { cellAggregates } = this.ctx.grid.selectable;
+        if (typeof cellAggregates !== 'boolean') {
+            return cellAggregates?.includes(aggregate);
+        }
+        return true;
     }
-    /**
-     * 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(`Expected numeric value for column width, but got a string "${value}". Treating as ${parsedValue}px.`);
+    init() {
+        if (this.ctx.grid.selectable.cellAggregates) {
+            this.data = this.dataChanges.data ? this.dataChanges.data : this.ctx.grid.data;
+            if (this.isAggregateIncluded('count')) {
+                this.aggregates['count'] = 0;
+            }
+            const selectionDirective = this.ctx.grid.selectionDirective;
+            if (selectionDirective && !this.isRowSelection) {
+                this.selectedItems = selectionDirective.selectedKeys;
             }
-        }
-        else {
-            this._width = value;
         }
     }
-    get width() { return this._width; }
-    /**
-     * Toggles the locked (frozen) state of the columns ([more information and example]({% slug locked_columns_grid %})).
-     *
-     * @default false
-     *
-     */
-    set locked(value) {
-        this._locked = value;
+    onSelectionChange(selectionArgs) {
+        this.handleSelectedItems(selectionArgs);
+        this.nullifyAggregates();
+        this.handleAggregateChanges();
+        return this.aggregates;
     }
-    get locked() {
-        return this._locked;
+    get isRowSelection() {
+        return typeof this.ctx.grid.selectable === 'boolean' || !this.ctx.grid.selectable.cell;
     }
-    /**
-     * @hidden
-     */
-    get level() {
-        if (this.parent && isSpanColumn(this.parent)) {
-            return this.parent.level;
+    handleAggregateChanges() {
+        const lockedColumns = this.columnInfoService.lockedLeafColumns.toArray();
+        const nonLockedColumns = this.columnInfoService.nonLockedLeafColumns.toArray();
+        const selectedItemsLength = this.selectedItems.length;
+        const columns = [...lockedColumns, ...nonLockedColumns];
+        const fields = columns.map(col => col.field);
+        if (this.isAggregateIncluded('count')) {
+            this.aggregates['count'] = this.isRowSelection ? (selectedItemsLength * columns.length) : selectedItemsLength;
         }
-        return this.parent ? this.parent.level + 1 : 0;
-    }
-    /**
-     * @hidden
-     */
-    get isLocked() {
-        return this.parent ? this.parent.isLocked : this.locked;
+        this.selectedItems.forEach((item) => {
+            if (this.isRowSelection) {
+                fields.forEach((field) => {
+                    const cellValue = item.dataItem;
+                    if (cellValue && cellValue.hasOwnProperty(field)) {
+                        const cellValue = item.dataItem[field];
+                        this.groupAggregates(cellValue);
+                    }
+                });
+            }
+            else if (!this.isRowSelection) {
+                const itemKey = this.data[item.itemKey];
+                const field = fields[item.columnKey];
+                if (itemKey && itemKey.hasOwnProperty(field)) {
+                    const cellValue = itemKey[fields[item.columnKey]];
+                    this.groupAggregates(cellValue);
+                }
+            }
+        });
+        this.calculateAggregates();
     }
-    /**
-     * @hidden
-     */
-    get colspan() {
-        return 1;
+    groupAggregates(aggregate) {
+        if (typeof aggregate === 'number') {
+            this.groupedAggregates.numbers.push(aggregate);
+        }
+        else if (typeof aggregate === 'boolean') {
+            this.groupedAggregates.booleans.push(aggregate);
+        }
+        else if (aggregate instanceof Date) {
+            this.groupedAggregates.dates.push(aggregate);
+        }
     }
-    /**
-     * @hidden
-     */
-    rowspan(totalColumnLevels) {
-        return this.level < totalColumnLevels ? (totalColumnLevels - this.level) + 1 : 1;
+    calculateAggregates() {
+        if (this.groupedAggregates.numbers.length > 0) {
+            if (this.isAggregateIncluded('min')) {
+                this.aggregates['min'] = Math.min(...this.groupedAggregates.numbers);
+            }
+            if (this.isAggregateIncluded('max')) {
+                this.aggregates['max'] = Math.max(...this.groupedAggregates.numbers);
+            }
+            if (this.isAggregateIncluded('sum')) {
+                this.aggregates['sum'] = this.groupedAggregates.numbers.reduce((acc, curr) => acc += curr, 0);
+            }
+            if (this.isAggregateIncluded('average')) {
+                this.aggregates['average'] = this.aggregates['sum'] / this.groupedAggregates.numbers.length;
+            }
+        }
+        if (this.groupedAggregates.booleans.length > 0) {
+            if (this.isAggregateIncluded('isTrue')) {
+                const isTrueCount = this.groupedAggregates.booleans.filter(bool => bool).length;
+                this.aggregates['isTrue'] = isTrueCount > 0 ? isTrueCount : null;
+            }
+            if (this.isAggregateIncluded('isFalse')) {
+                const isFalseCount = this.groupedAggregates.booleans.length - this.aggregates['isTrue'];
+                this.aggregates['isFalse'] = isFalseCount > 0 ? isFalseCount : null;
+            }
+        }
+        if (this.groupedAggregates.dates.length > 0) {
+            if (this.isAggregateIncluded('earliest')) {
+                this.aggregates['earliest'] = new Date(Math.min(...this.groupedAggregates.dates));
+            }
+            if (this.isAggregateIncluded('latest')) {
+                this.aggregates['latest'] = new Date(Math.max(...this.groupedAggregates.dates));
+            }
+        }
     }
-    /**
-     * @hidden
-     */
-    get headerTemplateRef() {
-        const template = this.headerTemplates.first;
-        return template ? template.templateRef : undefined;
+    handleSelectedItems(selectionArgs) {
+        const rowOrCellSelect = `${this.isRowSelection ? 'selectedRows' : 'selectedCells'}`;
+        const rowOrCellDeselect = `${this.isRowSelection ? 'deselectedRows' : 'deselectedCells'}`;
+        const selectedItems = selectionArgs[rowOrCellSelect];
+        const deselectedItems = selectionArgs[rowOrCellDeselect];
+        if (!this.isRowSelection) {
+            // Needed when we have column groups with cell selection, the deselected items are duplicated
+            deselectedItems.forEach((item, index) => {
+                if (index + 1 < deselectedItems.length) {
+                    if (item.itemKey === deselectedItems[index + 1].itemKey
+                        && item.columnKey === deselectedItems[index + 1].columnKey) {
+                        deselectedItems.splice(index, 1);
+                    }
+                }
+            });
+        }
+        if (selectedItems.length > 0) {
+            selectedItems.forEach((item) => {
+                this.selectedItems = [...this.selectedItems, item];
+            });
+        }
+        if (deselectedItems.length > 0) {
+            if (this.isRowSelection) {
+                deselectedItems.forEach((row) => {
+                    this.selectedItems = this.selectedItems.filter((elem) => elem.dataItem !== row.dataItem);
+                });
+            }
+            else {
+                deselectedItems.forEach((cell) => {
+                    const index = this.selectedItems.findIndex((elem) => elem.itemKey === cell.itemKey && elem.columnKey === cell.columnKey);
+                    this.selectedItems.splice(index, 1);
+                });
+            }
+        }
     }
-    /**
-     * @hidden
-     */
-    get footerTemplateRef() {
-        return this.footerTemplate ? this.footerTemplate.templateRef : undefined;
-    }
-    /**
-     * @hidden
-     */
-    get columnMenuTemplateRef() {
-        const template = this.columnMenuTemplates.first;
-        return template ? template.templateRef : null;
-    }
-    /**
-     * @hidden
-     */
-    get displayTitle() {
-        return this.title;
-    }
-    /**
-     * @hidden
-     */
-    get isVisible() {
-        return !this.hidden && this.matchesMedia;
+    nullifyAggregates() {
+        this.groupedAggregates = { dates: [], numbers: [], booleans: [] };
+        this.aggregates['count'] = null;
+        this.aggregates['sum'] = this.aggregates['average'] = null;
+        this.aggregates['max'] = this.aggregates['min'] = null;
+        this.aggregates['isFalse'] = this.aggregates['isTrue'] = null;
+        this.aggregates['earliest'] = this.aggregates['latest'] = null;
     }
 }
-ColumnBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnBase, deps: [{ token: ColumnBase }, { token: IdService }], target: i0.ɵɵFactoryTarget.Component });
-ColumnBase.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.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", 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: "13.3.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
-            }], 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]
-            }] } });
+CellSelectionAggregateService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellSelectionAggregateService, deps: [{ token: ContextService }, { token: LocalDataChangesService }, { token: ColumnInfoService }], target: i0.ɵɵFactoryTarget.Injectable });
+CellSelectionAggregateService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellSelectionAggregateService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellSelectionAggregateService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: ContextService }, { type: LocalDataChangesService }, { type: ColumnInfoService }]; } });
 
 /**
- * Represents the filter-cell template ([see example]({% slug filter_row %}#toc-custom-filters)).
+ * @hidden
  */
-class FilterCellTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+class SelectionService {
+    constructor(domEvents, aggregateService, localDataChangesService, navigationService, ctxService) {
+        this.domEvents = domEvents;
+        this.aggregateService = aggregateService;
+        this.localDataChangesService = localDataChangesService;
+        this.navigationService = navigationService;
+        this.ctxService = ctxService;
+        this.changes = new EventEmitter();
+        this.currentSelection = [];
+        this.selectAllChecked = false;
+        this.active = false;
+        this.dragging = false;
+        this.lastSelectionData = {};
+        this.addSubscriptions();
     }
-}
-FilterCellTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FilterCellTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FilterCellTemplateDirective, selector: "[kendoGridFilterCellTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterCellTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridFilterCellTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }]; } });
-
-/**
- * Represents the filter-menu template
- * ([see example]({% slug filter_menu %}#toc-custom-filters)).
- */
-class FilterMenuTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
+    get enableMarquee() {
+        const checkboxOnly = this.settings && typeof this.settings === 'object' && this.settings.checkboxOnly;
+        if (!this.settings || checkboxOnly) {
+            return false;
+        }
+        const selectableSettings = this.settings.selectable;
+        const dragAndMultiple = typeof (selectableSettings) === 'object' &&
+            isPresent(selectableSettings) &&
+            selectableSettings.mode === 'multiple' &&
+            selectableSettings.enabled !== false &&
+            !selectableSettings.checkboxOnly &&
+            selectableSettings.drag;
+        return this.active && dragAndMultiple;
     }
-}
-FilterMenuTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FilterMenuTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: FilterMenuTemplateDirective, selector: "[kendoGridFilterMenuTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterMenuTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoGridFilterMenuTemplate]'
-                }]
-        }], 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 {
-    constructor(parent, idService) {
-        super(parent, idService);
-        /**
-         * Allows the user to click the column headers and emits the `sortChange` event. [See example](slug:sorting_grid).
-         *
-         * @default true
-         */
-        this.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
-         */
-        this.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'
-         */
-        this.editor = 'text';
-        /**
-         * Defines the filter type that is displayed inside the filter row. [See example](slug:filtering_grid#toc-filter-data-types).
-         *
-         * @default 'text'
-         */
-        this.filter = 'text';
-        /**
-         * Defines if a filter UI will be displayed for this column. [See example](slug:filtering_grid).
-         *
-         * @default true
-         */
-        this.filterable = true;
-        /**
-         * Defines whether the column is editable. [See example](slug:make_fields_uneditable_grid).
-         *
-         * @default true
-         */
-        this.editable = true;
+    init(settings) {
+        this.settings = settings;
+        if (!isPresent(this.lastSelectionStartIndex)) {
+            this.lastSelectionStartIndex = this.ctxService?.grid.selectionDirective?.rangeSelectionStartRow?.index || 0;
+            this.lastSelectionData = this.ctxService?.grid.selectionDirective?.rangeSelectionStartRow?.dataItem || {};
+        }
+        this.currentSelection = [];
+        if (settings.selectable && settings.selectable.enabled !== false) {
+            const iterator = this.getIterator();
+            this._selectAllState = true;
+            let item = iterator.next();
+            while (!item.done) {
+                if (item.value && item.value.type === "data") {
+                    const rowArgs = {
+                        dataItem: item.value.data,
+                        index: item.value.index
+                    };
+                    if (settings.rowSelected(rowArgs)) {
+                        this.currentSelection[item.value.index] = rowArgs;
+                    }
+                    else {
+                        this._selectAllState = undefined;
+                    }
+                }
+                item = iterator.next();
+            }
+            if (this.currentSelection.length === 0) {
+                this._selectAllState = false;
+            }
+        }
+    }
+    isSelected(index) {
+        if (this.settings && this.active) {
+            return this.options.enabled && isPresent(this.currentSelection[index]);
+        }
+    }
+    handleClick(item, event) {
+        if (this.dragging) {
+            this.dragging = false;
+            return;
+        }
+        let ev;
+        const ctrlKey = event.ctrlKey || event.metaKey;
+        if (this.options.mode === "single" && ctrlKey && this.isSelected(item.index)) {
+            ev = this.toggle(item);
+        }
+        else if (this.options.mode === "multiple") {
+            if (ctrlKey && !event.shiftKey) {
+                ev = this.toggle(item);
+            }
+            else if (event.shiftKey) {
+                ev = this.addAllTo(item, ctrlKey);
+            }
+        }
+        if (!isPresent(ev)) {
+            ev = this.select(item);
+            this.currentSelection[item.index] = {
+                dataItem: item.data,
+                index: item.index
+            };
+        }
+        if (!ev.selectedRows.length && !ev.deselectedRows.length) {
+            return;
+        }
+        ev.ctrlKey = ctrlKey;
+        ev.shiftKey = event.shiftKey;
+        if (this.options.cellAggregates) {
+            ev.cellAggregates = this.aggregateService.onSelectionChange(ev);
+        }
+        if (ev.shiftKey) {
+            ev.rangeStartRow = { dataItem: this.lastSelectionData, index: this.lastSelectionStartIndex };
+            ev.rangeEndRow = { dataItem: item.data, index: item.index };
+        }
+        this.changes.emit(ev);
+    }
+    toggle(item) {
+        const selectedRows = [];
+        const deselectedRows = [];
+        this.lastSelectionStartIndex = item.index;
+        this.lastSelectionData = item.data;
+        const rowArgs = { dataItem: item.data, index: item.index };
+        if (this.isSelected(item.index)) {
+            deselectedRows.push(rowArgs);
+        }
+        else {
+            selectedRows.push(rowArgs);
+        }
+        return {
+            deselectedRows: deselectedRows,
+            selectedRows: selectedRows
+        };
+    }
+    toggleByIndex(index) {
+        const iterator = this.getIterator();
+        if (this.selectAllChecked && this.isSelected(index)) {
+            this.selectAllChecked = false;
+        }
+        let item = iterator.next();
+        while (!item.done) {
+            if (item.value && item.value.type === "data" && item.value.index === index) {
+                const itemToToggle = {
+                    data: item.value.data,
+                    index: item.value.index
+                };
+                if (this.isSelected(index) || this.options.mode === "multiple") {
+                    return this.toggle(itemToToggle);
+                }
+                else {
+                    return this.select(itemToToggle);
+                }
+            }
+            item = iterator.next();
+        }
+    }
+    select(item) {
+        const deselectedRows = [];
+        const selectedRows = [];
+        this.lastSelectionStartIndex = item.index;
+        this.lastSelectionData = item.data;
+        if (!this.isSelected(item.index)) {
+            selectedRows.push({ dataItem: item.data, index: item.index });
+        }
+        this.currentSelection.forEach((row) => {
+            if (row.index !== item.index) {
+                deselectedRows.push(row);
+            }
+        });
+        return {
+            deselectedRows: deselectedRows,
+            selectedRows: selectedRows
+        };
+    }
+    //Used to manually deselect removed items
+    deselect(removedItem) {
+        const iterator = this.getIterator();
+        let item = iterator.next();
+        while (!item.done) {
+            if (item.value && item.value.type === "data" && item.value.data === removedItem) {
+                const rowArgs = {
+                    dataItem: item.value.data,
+                    index: item.value.index
+                };
+                if (this.isSelected(rowArgs.index)) {
+                    const ev = {
+                        ctrlKey: false,
+                        deselectedRows: [rowArgs],
+                        selectedRows: []
+                    };
+                    this.changes.emit(ev);
+                }
+            }
+            item = iterator.next();
+        }
+    }
+    addAllTo(item, ctrlKey) {
+        const selectedRows = [];
+        const deselectedRows = [];
+        const start = Math.min(this.lastSelectionStartIndex, item.index);
+        const end = Math.max(this.lastSelectionStartIndex, item.index);
+        const iterator = this.getIterator();
+        let next = iterator.next();
+        while (!next.done) {
+            if (next.value && next.value.type === "data") {
+                const idx = next.value.index;
+                const rowArgs = { dataItem: next.value.data, index: idx };
+                if ((idx < start || idx > end) && this.isSelected(idx) && !ctrlKey) {
+                    deselectedRows.push(rowArgs);
+                }
+                if ((idx >= start && idx <= end) && !this.isSelected(idx)) {
+                    selectedRows.push(rowArgs);
+                }
+            }
+            next = iterator.next();
+        }
+        return {
+            deselectedRows: deselectedRows,
+            selectedRows: selectedRows
+        };
+    }
+    updateAll(selectAllChecked) {
+        this.selectAllChecked = selectAllChecked;
+        const selectedRows = [];
+        const deselectedRows = [];
+        const iterator = this.getIterator();
+        let next = iterator.next();
+        while (!next.done) {
+            if (next.value && next.value.type === "data") {
+                const idx = next.value.index;
+                const rowArgs = { dataItem: next.value.data, index: idx };
+                if (this.isSelected(idx) && !selectAllChecked) {
+                    deselectedRows.push(rowArgs);
+                }
+                if (!this.isSelected(idx) && selectAllChecked) {
+                    selectedRows.push(rowArgs);
+                }
+            }
+            next = iterator.next();
+        }
+        if (!selectedRows.length && !deselectedRows.length) {
+            return;
+        }
+        const ev = {
+            ctrlKey: true,
+            deselectedRows: deselectedRows,
+            selectedRows: selectedRows,
+            shiftKey: true
+        };
+        if (this.options.cellAggregates) {
+            ev.cellAggregates = this.aggregateService.onSelectionChange(ev);
+        }
+        this.changes.emit(ev);
+    }
+    selectRange(startIndex, endIndex) {
+        const selectedRows = [];
+        const deselectedRows = [];
+        const start = Math.min(startIndex, endIndex);
+        const end = Math.max(startIndex, endIndex);
+        const iterator = this.getIterator();
+        let next = iterator.next();
+        while (!next.done) {
+            if (next.value && next.value.type === "data") {
+                const idx = next.value.index;
+                const rowArgs = { dataItem: next.value.data, index: idx };
+                if ((idx < start || idx > end) && this.isSelected(idx)) {
+                    deselectedRows.push(rowArgs);
+                }
+                if ((idx >= start && idx <= end) && !this.isSelected(idx)) {
+                    selectedRows.push(rowArgs);
+                }
+            }
+            next = iterator.next();
+        }
+        let cellAggregates;
+        if (this.options.cellAggregates) {
+            cellAggregates = this.aggregateService.onSelectionChange({ selectedRows, deselectedRows });
+        }
+        return {
+            deselectedRows: deselectedRows,
+            selectedRows: selectedRows,
+            cellAggregates
+        };
     }
-    get templateRef() {
-        return this.template ? this.template.templateRef : undefined;
+    get selectAllState() {
+        return this._selectAllState;
     }
-    get groupHeaderTemplateRef() {
-        return this.groupHeaderTemplate ? this.groupHeaderTemplate.templateRef : undefined;
+    get selected() {
+        return this.currentSelection.map((item) => {
+            return item.index;
+        }).filter((n) => typeof n === "number");
     }
-    get groupHeaderColumnTemplateRef() {
-        return this.groupHeaderColumnTemplate ? this.groupHeaderColumnTemplate.templateRef : undefined;
+    get options() {
+        const defaultOptions = {
+            cellAggregates: false,
+            checkboxOnly: false,
+            enabled: true,
+            mode: "multiple"
+        };
+        if (!isPresent(this.settings)) {
+            return defaultOptions;
+        }
+        if (typeof this.settings.selectable === 'boolean') {
+            return {
+                cellAggregates: false,
+                checkboxOnly: false,
+                enabled: this.settings.selectable,
+                mode: "multiple"
+            };
+        }
+        else {
+            return Object.assign(defaultOptions, this.settings.selectable);
+        }
     }
-    get groupFooterTemplateRef() {
-        return this.groupFooterTemplate ? this.groupFooterTemplate.templateRef : undefined;
+    ngOnDestroy() {
+        this.removeSubscriptions();
     }
-    get editTemplateRef() {
-        return this.editTemplate ? this.editTemplate.templateRef : undefined;
+    targetArgs() {
+        return {
+            index: this.mouseDownEventArgs.rowIndex,
+            dataItem: this.mouseDownEventArgs.dataItem
+        };
     }
-    get filterCellTemplateRef() {
-        return this.filterCellTemplate ? this.filterCellTemplate.templateRef : undefined;
+    addSubscriptions() {
+        if (!this.cellClickSubscription) {
+            this.cellClickSubscription = this.domEvents.cellClick.subscribe((args) => {
+                if (this.options.enabled && !this.options.checkboxOnly && args.type !== 'contextmenu') {
+                    if (this.active) {
+                        this.handleClick({ index: args.rowIndex, data: args.dataItem }, args.originalEvent);
+                    }
+                }
+            });
+        }
+        if (!this.mousedownSubscription) {
+            this.mousedownSubscription = this.domEvents.cellMousedown.subscribe((args) => {
+                this.mouseDownEventArgs = args;
+                if ((this.options.enabled && (!this.options.mode || this.options.mode === "multiple") &&
+                    !this.options.checkboxOnly && args.originalEvent.shiftKey)) {
+                    if (this.active) {
+                        args.originalEvent.preventDefault();
+                        this.navigationService.focusCellByElement(args.originalEvent.target);
+                    }
+                }
+            });
+        }
+        if (this.localDataChangesService && !this.dataChangedSubscription) {
+            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe((args) => {
+                if (this.active) {
+                    if (isPresent(args.action) && args.action === 'remove') {
+                        this.deselect(args.item);
+                    }
+                }
+            });
+        }
     }
-    get filterMenuTemplateRef() {
-        return this.filterMenuTemplate ? this.filterMenuTemplate.templateRef : undefined;
+    getIterator() {
+        const accessor = this.settings.view.accessor();
+        if (!accessor) {
+            return;
+        }
+        return accessor[iterator]();
     }
-    get displayTitle() {
-        return this.title === undefined ? this.field : this.title;
+    removeSubscriptions() {
+        if (this.cellClickSubscription) {
+            this.cellClickSubscription.unsubscribe();
+            this.cellClickSubscription = null;
+        }
+        if (this.mousedownSubscription) {
+            this.mousedownSubscription.unsubscribe();
+            this.mousedownSubscription = null;
+        }
+        if (this.dataChangedSubscription) {
+            this.dataChangedSubscription.unsubscribe();
+            this.dataChangedSubscription = null;
+        }
     }
 }
-ColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnComponent, 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)
-        }
-    ], 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: "13.3.12", ngImport: i0, type: ColumnComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        {
-                            provide: ColumnBase,
-                            useExisting: forwardRef(() => ColumnComponent)
-                        }
-                    ],
-                    selector: 'kendo-grid-column',
-                    template: ``
-                }]
-        }], 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 }]
-            }] } });
+SelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionService, deps: [{ token: DomEventsService }, { token: CellSelectionAggregateService }, { token: LocalDataChangesService }, { token: NavigationService }, { token: ContextService }], target: i0.ɵɵFactoryTarget.Injectable });
+SelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: DomEventsService }, { type: CellSelectionAggregateService }, { type: LocalDataChangesService }, { type: NavigationService }, { type: ContextService }]; } });
 
 /**
  * @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 {
-    constructor(parent, idService) {
-        super(parent, idService);
-        /*
-         * @hidden
-         */
-        this.isSpanColumn = true;
-        this.template = new QueryList();
-        this.editTemplate = new QueryList();
-        /**
-         * @hidden
-         */
-        this.childColumns = new QueryList();
-        /**
-         * @hidden
-         */
-        this.includeInChooser = false;
-        this._editable = true;
-        if (parent && parent.isSpanColumn) {
-            throw new Error('SpanColumn cannot be nested inside another SpanColumn');
+class CellSelectionService {
+    constructor(domEvents, aggregateService, localDataChangesService, navigationService) {
+        this.domEvents = domEvents;
+        this.aggregateService = aggregateService;
+        this.localDataChangesService = localDataChangesService;
+        this.navigationService = navigationService;
+        this.changes = new EventEmitter();
+        this.mouseUpEvent = new EventEmitter();
+        this.currentSelection = [];
+        this.active = false;
+        this.dragging = false;
+        this.dragSelectDeselect = false;
+        this.lastSelectionItem = { itemKey: 0, columnKey: 0 };
+        this.lastSelectionItemRowIndex = 0;
+        this.lastSelectionItemColIndex = 0;
+        this.addSubscriptions();
+    }
+    get enableMarquee() {
+        const checkboxOnly = this.settings && typeof this.settings === 'object' && this.settings.checkboxOnly;
+        if (!this.settings || checkboxOnly) {
+            return false;
+        }
+        const selectableSettings = this.settings.selectable;
+        const dragAndMultiple = typeof (selectableSettings) === 'object' &&
+            isPresent(selectableSettings) &&
+            selectableSettings.mode === 'multiple' &&
+            selectableSettings.cell &&
+            selectableSettings.enabled !== false &&
+            selectableSettings.drag;
+        return this.active && dragAndMultiple;
+    }
+    init(settings) {
+        this.settings = settings;
+        this.currentSelection = [];
+        if (settings.selectable && settings.selectable.enabled !== false) {
+            const iterator = this.getIterator();
+            let item = iterator.next();
+            while (!item.done) {
+                if (item.value && item.value.type === "data") {
+                    const rowArgs = {
+                        dataItem: item.value.data,
+                        index: item.value.index
+                    };
+                    settings.columns.forEach(col => {
+                        const selectedCellArgs = settings.cellSelected(rowArgs, col, col.leafIndex);
+                        if (selectedCellArgs.selected) {
+                            this.currentSelection.push(selectedCellArgs.item);
+                        }
+                    });
+                }
+                item = iterator.next();
+            }
         }
     }
-    /**
-     * 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;
+    isCellSelected(item, col) {
+        if (this.settings && this.active) {
+            const selectedCellArgs = this.settings.cellSelected({ dataItem: item.data, index: item.index }, col, col.leafIndex);
+            return this.options.enabled && selectedCellArgs.selected;
+        }
+        return false;
     }
-    /**
-     * @hidden
-     * added for backwards compitability
-     */
-    set width(_value) {
+    handleClick(item, event) {
+        if (this.dragging) {
+            this.dragging = false;
+            return;
+        }
+        let ev;
+        const ctrlKey = event.ctrlKey || event.metaKey;
+        if (this.options.mode === "single" && ctrlKey && this.isCellSelected(item, item.column)) {
+            ev = this.toggle(item);
+        }
+        else if (this.options.mode === "multiple") {
+            if (ctrlKey && !event.shiftKey) {
+                ev = this.toggle(item);
+            }
+            else if (event.shiftKey) {
+                const startRowIndex = Math.min(this.lastSelectionItemRowIndex, item.index);
+                const startColIndex = Math.min(this.lastSelectionItemColIndex, item.column.leafIndex);
+                const endRowIndex = Math.max(this.lastSelectionItemRowIndex, item.index);
+                const endColIndex = Math.max(this.lastSelectionItemColIndex, item.column.leafIndex);
+                ev = this.selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex);
+            }
+        }
+        if (!isPresent(ev)) {
+            ev = this.select(item);
+            this.currentSelection = [this.lastSelectionItem];
+        }
+        if (!ev.selectedCells.length && !ev.deselectedCells.length) {
+            return;
+        }
+        ev.ctrlKey = ctrlKey;
+        ev.shiftKey = event.shiftKey;
+        if (this.options.cellAggregates && !event.shiftKey) {
+            ev.cellAggregates = this.aggregateService.onSelectionChange(ev);
+        }
+        if (ev.shiftKey) {
+            ev.rangeStartCell = this.lastSelectionItem;
+            ev.rangeEndCell = {
+                ...this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item
+            };
+        }
+        this.changes.emit(ev);
     }
-    get width() {
-        return this.childColumns.reduce((total, column) => total + column.width, 0);
+    toggle(item) {
+        const selectedCells = [];
+        const deselectedCells = [];
+        this.lastSelectionItem =
+            this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item;
+        this.lastSelectionItemRowIndex = item.index;
+        this.lastSelectionItemColIndex = item.column.leafIndex;
+        if (this.isCellSelected(item, item.column)) {
+            deselectedCells.push(this.lastSelectionItem);
+        }
+        else {
+            selectedCells.push(this.lastSelectionItem);
+        }
+        return {
+            deselectedCells,
+            selectedCells
+        };
     }
-    /**
-     * @hidden
-     */
-    get leafIndex() {
-        return this.childColumns.first.leafIndex;
+    select(item) {
+        const selectedCells = [];
+        const deselectedCells = [];
+        this.lastSelectionItem =
+            this.settings.cellSelected({ dataItem: item.data, index: item.index }, item.column, item.column.leafIndex).item;
+        this.lastSelectionItemRowIndex = item.index;
+        this.lastSelectionItemColIndex = item.column.leafIndex;
+        if (!this.isCellSelected(item, item.column)) {
+            selectedCells.push(this.lastSelectionItem);
+        }
+        this.currentSelection.forEach((selectedItem) => {
+            if (selectedItem.itemKey !== this.lastSelectionItem.itemKey || selectedItem.columnKey !== this.lastSelectionItem.columnKey) {
+                deselectedCells.push(selectedItem);
+            }
+        });
+        return {
+            deselectedCells,
+            selectedCells
+        };
     }
-    /**
-     * @hidden
-     */
-    get templateRef() {
-        const template = this.template.first;
-        return template ? template.templateRef : undefined;
+    //Used to manually deselect removed items
+    deselect(removedItem) {
+        const iterator = this.getIterator();
+        let item = iterator.next();
+        let rowArgs;
+        while (!item.done) {
+            if (item.value && item.value.type === "data" && item.value.data === removedItem) {
+                rowArgs = {
+                    dataItem: item.value.data,
+                    index: item.value.index
+                };
+                break;
+            }
+            item = iterator.next();
+        }
+        if (rowArgs) {
+            const cellsToRemove = this.currentSelection.filter(selectedItem => {
+                const contender = this.settings.cellSelected(rowArgs, null, null).item;
+                return selectedItem.itemKey === contender.itemKey;
+            });
+            if (cellsToRemove.length) {
+                const ev = {
+                    ctrlKey: false,
+                    deselectedCells: cellsToRemove,
+                    selectedCells: []
+                };
+                this.changes.emit(ev);
+            }
+        }
     }
-    /**
-     * @hidden
-     */
-    get editTemplateRef() {
-        const editTemplate = this.editTemplate.first;
-        return editTemplate ? editTemplate.templateRef : undefined;
+    selectRange(startRowIndex, startColIndex, endRowIndex, endColIndex) {
+        const selectedCells = [];
+        const deselectedCells = [];
+        const selectionStartRow = Math.min(startRowIndex, endRowIndex);
+        const selectionStartCol = Math.min(startColIndex, endColIndex);
+        const selectionEndRow = Math.max(startRowIndex, endRowIndex);
+        const selectionEndCol = Math.max(startColIndex, endColIndex);
+        const iterator = this.getIterator();
+        let next = iterator.next();
+        while (!next.done) {
+            if (next.value && next.value.type === "data") {
+                const idx = next.value.index;
+                const data = next.value.data;
+                const rowArgs = {
+                    dataItem: data,
+                    index: idx
+                };
+                this.settings.columns.forEach(col => {
+                    const { item } = this.settings.cellSelected(rowArgs, col, col.leafIndex);
+                    const selected = this.isCellSelected(next.value, col);
+                    const isInRowRange = selectionStartRow <= idx && idx <= selectionEndRow;
+                    const isInColRange = selectionStartCol <= col.leafIndex && col.leafIndex <= selectionEndCol;
+                    const isInSelectionRect = isInRowRange && isInColRange;
+                    if (!isInSelectionRect && selected) {
+                        deselectedCells.push(item);
+                    }
+                    if (isInSelectionRect && !selected) {
+                        selectedCells.push(item);
+                    }
+                });
+            }
+            next = iterator.next();
+        }
+        let cellAggregates;
+        if (this.options.cellAggregates) {
+            cellAggregates = this.aggregateService.onSelectionChange({ selectedCells, deselectedCells });
+        }
+        return {
+            deselectedCells,
+            selectedCells,
+            cellAggregates
+        };
     }
-    /**
-     * @hidden
-     */
-    get colspan() {
-        return this.childColumns.filter(c => c.isVisible).length;
+    get options() {
+        const defaultOptions = {
+            cellAggregates: false,
+            checkboxOnly: false,
+            enabled: true,
+            mode: "multiple"
+        };
+        if (!isPresent(this.settings)) {
+            return defaultOptions;
+        }
+        if (typeof this.settings.selectable === 'boolean') {
+            return {
+                cellAggregates: false,
+                checkboxOnly: false,
+                enabled: this.settings.selectable,
+                mode: "multiple"
+            };
+        }
+        else {
+            return Object.assign(defaultOptions, this.settings.selectable);
+        }
     }
-    /**
-     * Toggles the locked (frozen) state of the columns ([see example](slug:locked_columns_grid)).
-     * @default false
-     */
-    set locked(value) {
-        this._locked = value;
+    ngOnDestroy() {
+        this.removeSubscriptions();
     }
-    get locked() {
-        return this._locked || this.childColumns.some(c => c.locked);
+    addSubscriptions() {
+        if (!this.cellClickSubscription) {
+            this.cellClickSubscription = this.domEvents.cellClick.subscribe((args) => {
+                if (this.options.enabled && !this.options.checkboxOnly && args.type !== 'contextmenu') {
+                    if (this.active) {
+                        this.handleClick({ index: args.rowIndex, data: args.dataItem, column: args.column }, args.originalEvent);
+                    }
+                }
+            });
+        }
+        if (!this.mousedownSubscription) {
+            this.mousedownSubscription = this.domEvents.cellMousedown.subscribe((args) => {
+                this.mouseDownEventArgs = args;
+                if (this.options.enabled && (!this.options.mode || this.options.mode === "multiple") &&
+                    !this.options.checkboxOnly && args.originalEvent.shiftKey) {
+                    if (this.active) {
+                        args.originalEvent.preventDefault();
+                        this.navigationService.focusCellByElement(args.originalEvent.target);
+                    }
+                }
+            });
+        }
+        if (this.localDataChangesService && !this.dataChangedSubscription) {
+            this.dataChangedSubscription = this.localDataChangesService.changes.subscribe((args) => {
+                if (this.active) {
+                    if (isPresent(args.action) && args.action === 'remove') {
+                        this.deselect(args.item);
+                    }
+                }
+            });
+        }
     }
-    get childrenArray() {
-        return this.childColumns.toArray();
+    getIterator() {
+        const accessor = this.settings.view.accessor();
+        if (!accessor) {
+            return;
+        }
+        return accessor[iterator]();
     }
-    get hasChildren() {
-        return this.childColumns.length > 0;
+    removeSubscriptions() {
+        if (this.cellClickSubscription) {
+            this.cellClickSubscription.unsubscribe();
+            this.cellClickSubscription = null;
+        }
+        if (this.mousedownSubscription) {
+            this.mousedownSubscription.unsubscribe();
+            this.mousedownSubscription = null;
+        }
+        if (this.dataChangedSubscription) {
+            this.dataChangedSubscription.unsubscribe();
+            this.dataChangedSubscription = null;
+        }
     }
 }
-SpanColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SpanColumnComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SpanColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SpanColumnComponent, 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: "13.3.12", ngImport: i0, type: SpanColumnComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        {
-                            provide: ColumnBase,
-                            useExisting: forwardRef(() => SpanColumnComponent)
-                        }
-                    ],
-                    selector: 'kendo-grid-span-column',
-                    template: ``
-                }]
-        }], 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
-            }] } });
+CellSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellSelectionService, deps: [{ token: DomEventsService }, { token: CellSelectionAggregateService }, { token: LocalDataChangesService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Injectable });
+CellSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellSelectionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CellSelectionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: DomEventsService }, { type: CellSelectionAggregateService }, { type: LocalDataChangesService }, { type: NavigationService }]; } });
 
+const createElement$1 = () => {
+    if (!isDocumentAvailable()) {
+        return;
+    }
+    const marquee = document.createElement("div");
+    marquee.className = "k-marquee";
+    const marqueeColor = document.createElement("div");
+    marqueeColor.className = "k-marquee-color";
+    marquee.appendChild(marqueeColor);
+    return marquee;
+};
+const POINTER_OFFSET = 2;
+const MINIMAL_DRAG_DISTANCE = 5;
+const offsets = {
+    topLeft: { x: POINTER_OFFSET, y: POINTER_OFFSET },
+    topRight: { x: -POINTER_OFFSET, y: POINTER_OFFSET },
+    bottomLeft: { x: POINTER_OFFSET, y: -POINTER_OFFSET },
+    bottomRight: { x: -POINTER_OFFSET, y: -POINTER_OFFSET }
+};
 /**
  * @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);
-/**
- * @hidden
- */
-const leafColumns = columns => {
-    return columns.reduce((acc, column) => {
-        if (column.isColumnGroup) {
-            acc = acc.concat(leafColumns(children(column)));
+class GridMarqueeDirective {
+    constructor(draggable, selection, cellSelection, domEvents) {
+        this.draggable = draggable;
+        this.selection = selection;
+        this.cellSelection = cellSelection;
+        this.domEvents = domEvents;
+        this.selectionStarted = false;
+    }
+    get webkitUserSelection() {
+        return (this.cellSelection.enableMarquee || this.selection.enableMarquee) ? 'none' : null;
+    }
+    get userSelection() {
+        return (this.cellSelection.enableMarquee || this.selection.enableMarquee);
+    }
+    ngOnInit() {
+        this.subscriptions = (this.draggable.kendoPress.subscribe(this.start.bind(this)));
+        this.subscriptions.add(this.draggable.kendoDrag.subscribe(this.moveMarquee.bind(this)));
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        this.clean();
+    }
+    start(args) {
+        const isInvalidTarget = args.originalEvent.target.matches('.k-grid-content, .k-grid-content-locked, .k-grid-aria-root, .k-checkbox');
+        if (isInvalidTarget) {
+            this.pressArgs = null;
+            return;
         }
-        else if (column.isSpanColumn) {
-            acc = acc.concat(column.childrenArray);
+        this.pressArgs = args;
+        this.pressTarget = null;
+    }
+    moveMarquee(args) {
+        if (!this.pressTarget) {
+            this.pressTarget = this.cellSelection.active ? this.cellSelection.mouseDownEventArgs : this.selection.mouseDownEventArgs;
         }
-        else {
-            acc.push(column);
+        const press = this.pressArgs;
+        if (!press) {
+            return;
         }
-        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);
-
-/**
- * @hidden
- */
-function isColumnGroupComponent(column) {
-    return column.isColumnGroup;
-}
-/**
- * Represents the column group header of the Grid
- * ([more information and examples](slug:multicolumnheaders_columns_grid)).
- *
- * @example
- * ```html
- * <kendo-grid [data]="gridData">
- *   <kendo-grid-column-group title="Product Info">
- *     <kendo-grid-column field="ProductID"></kendo-grid-column>
- *     <kendo-grid-column field="ProductName"></kendo-grid-column>
- *   </kendo-grid-column-group>
- *   <kendo-grid-column field="UnitPrice"></kendo-grid-column>
- * </kendo-grid>
- * ```
- */
-class ColumnGroupComponent extends ColumnBase {
-    constructor(parent, idService) {
-        super(parent, idService);
-        this.parent = parent;
-        /**
-         * @hidden
-         */
-        this.includeInChooser = false;
-        /**
-         * @hidden
-         */
-        this.isColumnGroup = true;
-        /**
-         * @hidden
-         */
-        this.minResizableWidth = 10;
-        if (parent && parent.isSpanColumn) {
-            throw new Error('ColumnGroupComponent cannot be nested inside SpanColumnComponent');
+        if (!this.selectionStarted) {
+            const distance = Math.sqrt((args.pageX - press.pageX) ** 2 + (args.pageY - press.pageY) ** 2);
+            if (distance > MINIMAL_DRAG_DISTANCE) {
+                this.selectionStarted = true;
+                this.dragEndSubscription = merge(this.domEvents.cellMouseup.pipe(take(1)), this.draggable.kendoRelease.pipe(delay(1), take(1)))
+                    .subscribe(this.endSelection.bind(this));
+            }
+            else {
+                return;
+            }
         }
-    }
-    /**
-     * @hidden
-     */
-    rowspan() {
-        return 1;
-    }
-    /**
-     * @hidden
-     */
-    get colspan() {
-        if (!this.children) {
-            return 1;
+        this.initMarquee();
+        const element = this.marqueeElement;
+        const marqueeQuadrant = this.getMarqueeQuadrant(args.pageX, args.pageY, press.pageX, press.pageY);
+        let left = Math.min(args.pageX, press.pageX);
+        let top = Math.min(args.pageY, press.pageY);
+        const width = Math.abs(args.pageX - press.pageX);
+        const height = Math.abs(args.pageY - press.pageY);
+        if (marqueeQuadrant) {
+            left += offsets[marqueeQuadrant].x;
+            top += offsets[marqueeQuadrant].y;
         }
-        return columnsSpan(this.children
-            .filter(child => child !== this && child.isVisible));
+        element.style.left = `${left}px`;
+        element.style.top = `${top}px`;
+        element.style.width = `${width}px`;
+        element.style.height = `${height}px`;
     }
-    /**
-     * @hidden
-     */
-    get leafIndex() {
-        return this.children ? (this.firstChild || {}).leafIndex : -1;
+    endSelection(args) {
+        if (args.type === 'mouseup' || args.type === 'touchend') {
+            if (this.cellSelection.active) {
+                this.cellSelection.dragging = true;
+                this.cellSelection.changes.emit(this.cellSelection.selectRange(this.pressTarget.rowIndex, this.pressTarget.column.leafIndex, args.rowIndex, args.column.leafIndex));
+            }
+            else if (this.selection.active) {
+                this.selection.dragging = true;
+                this.selection.changes.emit(this.selection.selectRange(this.pressTarget.rowIndex, args.rowIndex));
+            }
+        }
+        this.clean();
     }
-    get childrenArray() {
-        return this.children.filter(c => c !== this);
+    clean() {
+        if (this.marqueeElement) {
+            document.body.removeChild(this.marqueeElement);
+            this.marqueeElement = null;
+        }
+        if (this.dragEndSubscription) {
+            this.dragEndSubscription.unsubscribe();
+        }
+        this.dragEndSubscription = null;
+        this.pressTarget = null;
+        this.pressArgs = null;
+        this.selectionStarted = false;
+        // eslint-disable-next-line no-unused-expressions
+        this.cellSelection.active ? this.cellSelection.dragging = false : this.selection.dragging = false;
     }
-    get hasChildren() {
-        return Boolean(this.firstChild);
+    initMarquee() {
+        if (!isDocumentAvailable()) {
+            return;
+        }
+        if (!this.marqueeElement) {
+            this.marqueeElement = createElement$1();
+            document.body.appendChild(this.marqueeElement);
+        }
     }
-    get firstChild() {
-        return this.children.find(column => column !== this);
+    getMarqueeQuadrant(pointerX, pointerY, startX, startY) {
+        const leftHalf = pointerX < startX;
+        const rightHalf = pointerX > startX;
+        const topHalf = pointerY < startY;
+        const bottomHalf = pointerY > startY;
+        if (leftHalf && topHalf) {
+            return 'topLeft';
+        }
+        if (leftHalf && bottomHalf) {
+            return 'bottomLeft';
+        }
+        if (rightHalf && topHalf) {
+            return 'topRight';
+        }
+        if (rightHalf && bottomHalf) {
+            return 'bottomRight';
+        }
+        return null;
     }
 }
-ColumnGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnGroupComponent, deps: [{ token: ColumnBase, host: true, optional: true, skipSelf: true }, { token: IdService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ColumnGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ColumnGroupComponent, selector: "kendo-grid-column-group", providers: [
-        {
-            provide: ColumnBase,
-            useExisting: forwardRef(() => ColumnGroupComponent)
-        }
-    ], queries: [{ propertyName: "children", predicate: ColumnBase }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnGroupComponent, decorators: [{
-            type: Component,
+GridMarqueeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMarqueeDirective, deps: [{ token: i1$1.DraggableDirective }, { token: SelectionService }, { token: CellSelectionService }, { token: DomEventsService }], target: i0.ɵɵFactoryTarget.Directive });
+GridMarqueeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]", host: { properties: { "style.-webkit-user-select": "this.webkitUserSelection", "class.user-select-none": "this.userSelection" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridMarqueeDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providers: [
-                        {
-                            provide: ColumnBase,
-                            useExisting: forwardRef(() => ColumnGroupComponent)
-                        }
-                    ],
-                    selector: 'kendo-grid-column-group',
-                    template: ``
+                    selector: '[kendoGridSelectionMarquee]'
                 }]
-        }], ctorParameters: function () { return [{ type: ColumnBase, decorators: [{
-                    type: SkipSelf
-                }, {
-                    type: Host
-                }, {
-                    type: Optional
-                }] }, { type: IdService, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { children: [{
-                type: ContentChildren,
-                args: [ColumnBase]
+        }], ctorParameters: function () { return [{ type: i1$1.DraggableDirective }, { type: SelectionService }, { type: CellSelectionService }, { type: DomEventsService }]; }, propDecorators: { webkitUserSelection: [{
+                type: HostBinding,
+                args: ['style.-webkit-user-select']
+            }], userSelection: [{
+                type: HostBinding,
+                args: ['class.user-select-none']
             }] } });
 
+/**
+ * @hidden
+ */
+class ZoneAwareEventEmitter extends EventEmitter {
+    constructor(ngZone, isAsync = false) {
+        super(isAsync);
+        this.ngZone = ngZone;
+    }
+    subscribe(generatorOrNext, error, complete) {
+        let schedulerFn;
+        let errorFn = (_) => null;
+        let completeFn = () => null;
+        if (generatorOrNext && typeof generatorOrNext === 'object') {
+            schedulerFn = (value) => { this.ngZone.run(() => generatorOrNext.next(value)); };
+            if (generatorOrNext.error) {
+                errorFn = (err) => { this.ngZone.run(() => generatorOrNext.error(err)); };
+            }
+            if (generatorOrNext.complete) {
+                completeFn = () => { this.ngZone.run(() => generatorOrNext.complete()); };
+            }
+        }
+        else {
+            schedulerFn = (value) => { this.ngZone.run(() => generatorOrNext(value)); };
+            if (error) {
+                errorFn = (err) => { this.ngZone.run(() => error(err)); };
+            }
+            if (complete) {
+                completeFn = () => { this.ngZone.run(() => complete()); };
+            }
+        }
+        return super.subscribe(schedulerFn, errorFn, completeFn);
+    }
+}
+
+/**
+ * @hidden
+ */
+const packageMetadata = {
+    name: '@progress/kendo-angular-grid',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1686318734,
+    version: '13.0.3-develop.2',
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
+};
+
 /**
  * Represents the detail template of the Grid ([more information and examples]({% slug detailrowtemplate_grid %})).
  * To define the detail template, nest an `<ng-template>` tag with the `kendoGridDetailTemplate` directive inside a `<kendo-grid>` tag.
@@ -4705,108 +5054,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: ContextService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedKeys: [{
                 type: Input
             }], rangeSelectionStartRow: [{
-                type: Input
-            }], rangeSelectionStartColumnIndex: [{
-                type: Input
-            }], selectionKey: [{
-                type: Input,
-                args: ["kendoGridSelectBy"]
-            }], columnKey: [{
-                type: Input
-            }], selectedKeysChange: [{
-                type: Output
-            }] } });
-
-const reset = (...lists) => {
-    let diff = false;
-    for (let idx = 0; idx < lists.length; idx++) {
-        const [list, columns] = lists[idx];
-        diff = diff || list.length !== columns.length;
-        list.reset(columns);
-    }
-    return diff;
-};
-/**
- * @hidden
- */
-class ColumnsContainer {
-    constructor(columns) {
-        this.columns = columns;
-        this.allColumns = new QueryList();
-        this.leafColumns = new QueryList();
-        this.lockedColumns = new QueryList();
-        this.nonLockedColumns = new QueryList();
-        this.lockedLeafColumns = new QueryList();
-        this.nonLockedLeafColumns = new QueryList();
-        this.totalLevels = 0;
-        this.changes = new EventEmitter();
-        this.leafColumnsToRender = [];
-        this.lockedColumnsToRender = [];
-        this.nonLockedColumnsToRender = [];
-        this.hasGroupHeaderColumn = false;
-        this.hasGroupFooter = false;
-        this.hasFooter = false;
-        this.unlockedWidth = 0;
-    }
-    refresh() {
-        const currentLevels = this.totalLevels;
-        const leafColumns = new Array();
-        const lockedLeafColumns = new Array();
-        const nonLockedLeafColumns = new Array();
-        const lockedColumns = new Array();
-        const nonLockedColumns = new Array();
-        const allColumns = new Array();
-        const leafColumnsToRender = new Array();
-        const lockedColumnsToRender = new Array();
-        const nonLockedColumnsToRender = new Array();
-        let hasGroupHeaderColumn = false;
-        let hasGroupFooter = false;
-        let hasFooter = false;
-        let unlockedWidth = 0;
-        let leafIndex = 0;
-        this.totalLevels = 0;
-        this.columns().forEach(column => {
-            const containerLeafColumns = column.isLocked === true ? lockedLeafColumns : nonLockedLeafColumns;
-            const containerColumns = column.isLocked === true ? lockedColumns : nonLockedColumns;
-            const toRenderContainer = column.isLocked === true ? lockedColumnsToRender : nonLockedColumnsToRender;
-            if (!isColumnGroupComponent(column)) {
-                containerLeafColumns.push(column);
-                leafColumns.push(column);
-                leafColumnsToRender.push(...columnsToRender([column]));
-                toRenderContainer.push(...columnsToRender([column]));
-                hasGroupHeaderColumn = hasGroupHeaderColumn || someLeafColumn(leaf => Boolean(leaf.groupHeaderColumnTemplateRef), column);
-                hasGroupFooter = hasGroupFooter || someLeafColumn(leaf => Boolean(leaf.groupFooterTemplateRef), column);
-                hasFooter = hasFooter || someLeafColumn(leaf => Boolean(leaf.footerTemplateRef), column);
-                if (!column.isLocked) {
-                    unlockedWidth += column.width || 0;
-                }
-                if (column.isSpanColumn) {
-                    column.childColumns.forEach(c => {
-                        c.leafIndex = leafIndex++;
-                    });
-                }
-                else {
-                    column.leafIndex = leafIndex++;
-                }
-            }
-            containerColumns.push(column);
-            allColumns.push(column);
-            this.totalLevels = column.level > this.totalLevels ? column.level : this.totalLevels;
-        });
-        this.hasGroupHeaderColumn = hasGroupHeaderColumn;
-        this.hasGroupFooter = hasGroupFooter;
-        this.hasFooter = hasFooter;
-        this.leafColumnsToRender = leafColumnsToRender;
-        this.lockedColumnsToRender = lockedColumnsToRender;
-        this.nonLockedColumnsToRender = nonLockedColumnsToRender;
-        this.unlockedWidth = unlockedWidth;
-        const changes = reset([this.leafColumns, leafColumns], [this.lockedLeafColumns, lockedLeafColumns], [this.nonLockedLeafColumns, nonLockedLeafColumns], [this.lockedColumns, lockedColumns], [this.allColumns, allColumns], [this.nonLockedColumns, nonLockedColumns]) || currentLevels !== this.totalLevels;
-        if (changes) {
-            this.changes.emit();
-        }
-        return changes;
-    }
-}
+                type: Input
+            }], rangeSelectionStartColumnIndex: [{
+                type: Input
+            }], selectionKey: [{
+                type: Input,
+                args: ["kendoGridSelectBy"]
+            }], columnKey: [{
+                type: Input
+            }], selectedKeysChange: [{
+                type: Output
+            }] } });
 
 const forEachColumn = (list, callback) => {
     list.forEach((column) => {
@@ -5975,89 +6233,6 @@ class NavigationMetadata {
     }
 }
 
-const NO_STICKY = { left: '0px', right: '0px' };
-/**
- * @hidden
- */
-class ColumnInfoService {
-    constructor() {
-        this.visibilityChange = new EventEmitter();
-        this.lockedChange = new EventEmitter();
-        this.stickyChange = new EventEmitter();
-        this.columnRangeChange = new EventEmitter();
-        this.columnsContainer = new ColumnsContainer(() => []);
-    }
-    get lockedLeafColumns() {
-        return this.columnsContainer.lockedLeafColumns;
-    }
-    get nonLockedLeafColumns() {
-        return this.columnsContainer.nonLockedLeafColumns;
-    }
-    get isLocked() {
-        return this.lockedLeafColumns.length > 0;
-    }
-    get totalLevels() {
-        return this.columnsContainer.totalLevels;
-    }
-    get hiddenColumns() {
-        if (!this.list) {
-            return [];
-        }
-        return this.list().filter(column => !column.isVisible);
-    }
-    get leafNamedColumns() {
-        const columns = expandColumns(this.list().filterSort(column => !column.isColumnGroup))
-            .filter(column => column.matchesMedia && column.displayTitle);
-        return orderBy(columns, [{ field: 'locked', dir: 'desc' }]);
-    }
-    get unlockedRootCount() {
-        return this.list().rootColumns().filter(column => !column.locked && column.isVisible).length;
-    }
-    stickyColumnsStyles(column) {
-        if (!this.stickyColumns) {
-            this.stickyColumns = this.list().rootColumns().filter(column => column.sticky && !column.locked && column.isVisible);
-        }
-        if (this.stickyColumns.length === 0) {
-            return NO_STICKY;
-        }
-        const result = this.stickyColumns.reduce((acc, curr) => {
-            if (curr.leafIndex < column.leafIndex) {
-                acc.left += curr.width;
-            }
-            else if (curr.leafIndex > column.leafIndex) {
-                acc.right += curr.width;
-            }
-            return acc;
-        }, { left: 0, right: 0 });
-        return {
-            left: `${result.left}px`,
-            right: `${result.right}px`
-        };
-    }
-    init(columns, list) {
-        this.columnsContainer = columns;
-        this.list = list;
-        this.stickyColumns = null;
-    }
-    changeVisibility(columns) {
-        this.stickyColumns = null;
-        this.visibilityChange.emit(columns);
-    }
-    changeLocked(columns) {
-        this.stickyColumns = null;
-        this.lockedChange.emit(columns);
-    }
-    changeStuck(columns) {
-        this.stickyColumns = null;
-        this.stickyChange.emit(columns);
-    }
-}
-ColumnInfoService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnInfoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ColumnInfoService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnInfoService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ColumnInfoService, decorators: [{
-            type: Injectable
-        }] });
-
 /**
  * @hidden
  */
@@ -15865,8 +16040,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * ```
  */
 class SelectionCheckboxDirective {
-    constructor(selectionService, el, renderer, ngZone) {
+    constructor(selectionService, aggregateService, el, renderer, ngZone) {
         this.selectionService = selectionService;
+        this.aggregateService = aggregateService;
         this.el = el;
         this.renderer = renderer;
         this.ngZone = ngZone;
@@ -15893,8 +16069,9 @@ class SelectionCheckboxDirective {
                 const ev = this.selectionService.toggleByIndex(this.itemIndex);
                 ev.ctrlKey = true;
                 ev.shiftKey = false;
-                this.selectionService.aggregateChanges.emit(ev);
-                ev.cellAggregates = this.selectionService.aggregates;
+                if (this.selectionService.options.cellAggregates) {
+                    ev.cellAggregates = this.aggregateService.onSelectionChange(ev);
+                }
                 this.selectionService.changes.emit(ev);
             });
         }
@@ -15911,14 +16088,14 @@ class SelectionCheckboxDirective {
         this.renderer.setProperty(this.el.nativeElement, 'checked', this.selectionService.isSelected(this.itemIndex));
     }
 }
-SelectionCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SelectionCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: SelectionService }, { token: CellSelectionAggregateService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 SelectionCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, host: { properties: { "attr.type": "this.type" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGridSelectionCheckbox]'
                 }]
-        }], ctorParameters: function () { return [{ type: SelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { itemIndex: [{
+        }], ctorParameters: function () { return [{ type: SelectionService }, { type: CellSelectionAggregateService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { itemIndex: [{
                 type: Input,
                 args: ['kendoGridSelectionCheckbox']
             }], type: [{
@@ -18648,191 +18825,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Input
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-;
 /**
  * @hidden
  */
 class StatusBarComponent {
-    constructor(ctx, selectionService, dataChanges, columnInfoService, cellSelectionService) {
-        this.ctx = ctx;
-        this.selectionService = selectionService;
-        this.dataChanges = dataChanges;
-        this.columnInfoService = columnInfoService;
-        this.cellSelectionService = cellSelectionService;
+    constructor(aggregateService) {
+        this.aggregateService = aggregateService;
         this.hostClasses = true;
-        this.groupedAggregates = { dates: [], numbers: [], booleans: [] };
-        this.aggregates = {
-            sum: null,
-            average: null,
-            min: null,
-            max: null,
-            count: null,
-            isTrue: null,
-            isFalse: null,
-            earliest: null,
-            latest: null
-        };
-        this.subs = new Subscription();
-        this.selectedItems = [];
     }
     get isStatusBarTemplate() {
         return this.statusBarTemplate ? '' : 'none';
     }
     ngOnInit() {
-        if (this.selectableSettings.cellAggregates) {
-            this.data = this.dataChanges.data ? this.dataChanges.data : this.ctx.grid.data;
-            this.selectService = this.isRowSelection ? this.selectionService : this.cellSelectionService;
-            if (this.isAggregateIncluded('count')) {
-                this.aggregates['count'] = 0;
-            }
-            const selectionDirective = this.ctx.grid.selectionDirective;
-            if (selectionDirective && !this.isRowSelection) {
-                this.selectedItems = selectionDirective.selectedKeys;
-            }
-            this.subs.add(this.selectService.aggregateChanges.subscribe((selectionArgs) => this.onSelectionChange(selectionArgs)));
-        }
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    onSelectionChange(selectionArgs) {
-        this.handleSelectedItems(selectionArgs);
-        this.nullifyAggregates();
-        this.handleAggregateChanges();
-        this.selectService.aggregates = this.aggregates;
-    }
-    handleAggregateChanges() {
-        const lockedColumns = this.columnInfoService.lockedLeafColumns.toArray();
-        const nonLockedColumns = this.columnInfoService.nonLockedLeafColumns.toArray();
-        const selectedItemsLength = this.selectedItems.length;
-        const columns = [...lockedColumns, ...nonLockedColumns];
-        const fields = columns.map(col => col.field);
-        if (this.isAggregateIncluded('count')) {
-            this.aggregates['count'] = this.isRowSelection ? (selectedItemsLength * columns.length) : selectedItemsLength;
-        }
-        this.selectedItems.forEach((item) => {
-            if (this.isRowSelection) {
-                fields.forEach((field) => {
-                    const cellValue = item.dataItem;
-                    if (cellValue && cellValue.hasOwnProperty(field)) {
-                        const cellValue = item.dataItem[field];
-                        this.groupAggregates(cellValue);
-                    }
-                });
-            }
-            else if (this.selectService.options.cell) {
-                const itemKey = this.data[item.itemKey];
-                const field = fields[item.columnKey];
-                if (itemKey && itemKey.hasOwnProperty(field)) {
-                    const cellValue = itemKey[fields[item.columnKey]];
-                    this.groupAggregates(cellValue);
-                }
-            }
-        });
-        this.calculateAggregates();
-    }
-    groupAggregates(aggregate) {
-        if (typeof aggregate === 'number') {
-            this.groupedAggregates.numbers.push(aggregate);
-        }
-        else if (typeof aggregate === 'boolean') {
-            this.groupedAggregates.booleans.push(aggregate);
-        }
-        else if (aggregate instanceof Date) {
-            this.groupedAggregates.dates.push(aggregate);
-        }
-    }
-    calculateAggregates() {
-        if (this.groupedAggregates.numbers.length > 0) {
-            if (this.isAggregateIncluded('min')) {
-                this.aggregates['min'] = Math.min(...this.groupedAggregates.numbers);
-            }
-            if (this.isAggregateIncluded('max')) {
-                this.aggregates['max'] = Math.max(...this.groupedAggregates.numbers);
-            }
-            if (this.isAggregateIncluded('sum')) {
-                this.aggregates['sum'] = this.groupedAggregates.numbers.reduce((acc, curr) => acc += curr, 0);
-            }
-            if (this.isAggregateIncluded('average')) {
-                this.aggregates['average'] = this.aggregates['sum'] / this.groupedAggregates.numbers.length;
-            }
-        }
-        if (this.groupedAggregates.booleans.length > 0) {
-            if (this.isAggregateIncluded('isTrue')) {
-                const isTrueCount = this.groupedAggregates.booleans.filter(bool => bool).length;
-                this.aggregates['isTrue'] = isTrueCount > 0 ? isTrueCount : null;
-            }
-            if (this.isAggregateIncluded('isFalse')) {
-                const isFalseCount = this.groupedAggregates.booleans.length - this.aggregates['isTrue'];
-                this.aggregates['isFalse'] = isFalseCount > 0 ? isFalseCount : null;
-            }
-        }
-        if (this.groupedAggregates.dates.length > 0) {
-            if (this.isAggregateIncluded('earliest')) {
-                this.aggregates['earliest'] = new Date(Math.min(...this.groupedAggregates.dates));
-            }
-            if (this.isAggregateIncluded('latest')) {
-                this.aggregates['latest'] = new Date(Math.max(...this.groupedAggregates.dates));
-            }
-        }
-    }
-    handleSelectedItems(selectionArgs) {
-        const rowOrCellSelect = `${this.isRowSelection ? 'selectedRows' : 'selectedCells'}`;
-        const rowOrCellDeselect = `${this.isRowSelection ? 'deselectedRows' : 'deselectedCells'}`;
-        const selectedItems = selectionArgs[rowOrCellSelect];
-        const deselectedItems = selectionArgs[rowOrCellDeselect];
-        if (!this.isRowSelection) {
-            // Needed when we have column groups with cell selection, the deselected items are duplicated
-            deselectedItems.forEach((item, index) => {
-                if (index + 1 < deselectedItems.length) {
-                    if (item.itemKey === deselectedItems[index + 1].itemKey
-                        && item.columnKey === deselectedItems[index + 1].columnKey) {
-                        deselectedItems.splice(index, 1);
-                    }
-                }
-            });
-        }
-        if (selectedItems.length > 0) {
-            selectedItems.forEach((item) => {
-                this.selectedItems = [...this.selectedItems, item];
-            });
-        }
-        if (deselectedItems.length > 0) {
-            if (this.isRowSelection) {
-                deselectedItems.forEach((row) => {
-                    this.selectedItems = this.selectedItems.filter((elem) => elem.dataItem !== row.dataItem);
-                });
-            }
-            else {
-                deselectedItems.forEach((cell) => {
-                    const index = this.selectedItems.findIndex((elem) => elem.itemKey === cell.itemKey && elem.columnKey === cell.columnKey);
-                    this.selectedItems.splice(index, 1);
-                });
-            }
-        }
-    }
-    isAggregateIncluded(aggregate) {
-        const { cellAggregates } = this.selectService.options;
-        if (typeof cellAggregates !== 'boolean') {
-            return cellAggregates.includes(aggregate);
-        }
-        return true;
-    }
-    nullifyAggregates() {
-        this.groupedAggregates = { dates: [], numbers: [], booleans: [] };
-        this.aggregates['count'] = null;
-        this.aggregates['sum'] = this.aggregates['average'] = null;
-        this.aggregates['max'] = this.aggregates['min'] = null;
-        this.aggregates['isFalse'] = this.aggregates['isTrue'] = null;
-        this.aggregates['earliest'] = this.aggregates['latest'] = null;
+        this.aggregateService.init();
     }
-    get isRowSelection() {
-        return typeof this.selectableSettings === 'boolean' || !this.selectableSettings.cell;
+    get aggregates() {
+        return this.aggregateService.aggregates;
     }
 }
-StatusBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StatusBarComponent, deps: [{ token: ContextService }, { token: SelectionService }, { token: LocalDataChangesService }, { token: ColumnInfoService }, { token: CellSelectionService }], target: i0.ɵɵFactoryTarget.Component });
-StatusBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: { selectableSettings: "selectableSettings", statusBarTemplate: "statusBarTemplate" }, host: { properties: { "class.k-selection-aggregates": "this.hostClasses", "class.k-grid-selection-aggregates": "this.hostClasses", "style.display": "this.isStatusBarTemplate" } }, ngImport: i0, template: `
+StatusBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StatusBarComponent, deps: [{ token: CellSelectionAggregateService }], target: i0.ɵɵFactoryTarget.Component });
+StatusBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: { statusBarTemplate: "statusBarTemplate" }, host: { properties: { "class.k-selection-aggregates": "this.hostClasses", "class.k-grid-selection-aggregates": "this.hostClasses", "style.display": "this.isStatusBarTemplate" } }, ngImport: i0, template: `
         <ng-template
             *ngIf="statusBarTemplate"
             [ngTemplateOutlet]="statusBarTemplate?.templateRef"
@@ -18851,7 +18863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: ContextService }, { type: SelectionService }, { type: LocalDataChangesService }, { type: ColumnInfoService }, { type: CellSelectionService }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: CellSelectionAggregateService }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-selection-aggregates']
             }, {
@@ -18860,8 +18872,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], isStatusBarTemplate: [{
                 type: HostBinding,
                 args: ['style.display']
-            }], selectableSettings: [{
-                type: Input
             }], statusBarTemplate: [{
                 type: Input
             }] } });
@@ -20967,6 +20977,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         NavigationService,
         FocusRoot,
         IdService,
+        CellSelectionAggregateService,
         ScrollRequestService,
         SortService,
         ContextService,
@@ -21503,7 +21514,6 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </div>
         <kendo-grid-status-bar
             *ngIf="showStatusBar"
-            [selectableSettings]="selectable"
             [statusBarTemplate]="statusBarTemplate">
         </kendo-grid-status-bar>
         <kendo-pager
@@ -21537,7 +21547,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
-    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["selectableSettings", "statusBarTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i41.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i41.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["statusBarTemplate"] }, { type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i41.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i41.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -21581,6 +21591,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         NavigationService,
                         FocusRoot,
                         IdService,
+                        CellSelectionAggregateService,
                         ScrollRequestService,
                         SortService,
                         ContextService,
@@ -22119,7 +22130,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         </div>
         <kendo-grid-status-bar
             *ngIf="showStatusBar"
-            [selectableSettings]="selectable"
             [statusBarTemplate]="statusBarTemplate">
         </kendo-grid-status-bar>
         <kendo-pager