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

package/esm2015/selection/marquee.directive.js

@@ -0,0 +1,164 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, HostBinding } from '@angular/core';
+import { take, delay } from 'rxjs/operators';
+import { merge } from 'rxjs';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-common";
+import * as i2 from "./selection.service";
+import * as i3 from "./cell-selection.service";
+import * as i4 from "./../common/dom-events.service";
+const createElement = () => {
+    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
+ */
+export 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) {
+        if (args.originalEvent.target.classList.contains('k-checkbox')) {
+            this.pressArgs = null;
+            return;
+        }
+        this.pressArgs = args;
+        this.pressTarget = null;
+    }
+    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(Math.pow((args.pageX - press.pageX), 2) + Math.pow((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`;
+    }
+    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();
+    }
+    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;
+    }
+    initMarquee() {
+        if (!this.marqueeElement) {
+            this.marqueeElement = createElement();
+            document.body.appendChild(this.marqueeElement);
+        }
+    }
+    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;
+    }
+}
+GridMarqueeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: GridMarqueeDirective, deps: [{ token: i1.DraggableDirective }, { token: i2.SelectionService }, { token: i3.CellSelectionService }, { token: i4.DomEventsService }], target: i0.ɵɵFactoryTarget.Directive });
+GridMarqueeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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: "12.2.16", ngImport: i0, type: GridMarqueeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridSelectionMarquee]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.DraggableDirective }, { type: i2.SelectionService }, { type: i3.CellSelectionService }, { type: i4.DomEventsService }]; }, propDecorators: { webkitUserSelection: [{
+                type: HostBinding,
+                args: ['style.-webkit-user-select']
+            }], userSelection: [{
+                type: HostBinding,
+                args: ['class.user-select-none']
+            }] } });

package/esm2015/selection/selectall-checkbox.directive.js

@@ -0,0 +1,100 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { detectIE } from './../utils';
+import { Directive, HostBinding, Input, Output, EventEmitter } from '@angular/core';
+import { isPresent } from '../utils';
+import { hasObservers } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "./selection.service";
+/**
+ * Represents the select-all checkbox feature of the Grid ([see example]({% slug selection_grid %}#toc-select-all-feature)).
+ */
+export class SelectAllCheckboxDirective {
+    constructor(selectionService, el, renderer, ngZone) {
+        this.selectionService = selectionService;
+        this.el = el;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        /**
+         * Fires when the user clicks the `kendoGridSelectAllCheckbox` select-all checkbox
+         * ([see example]({% slug selection_grid %}#toc-select-all-feature)).
+         */
+        this.selectAllChange = new EventEmitter();
+        this.type = 'checkbox';
+        this.stateSet = false;
+        this.ngZone.runOutsideAngular(() => {
+            this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
+        });
+    }
+    ngAfterContentChecked() {
+        this.setState();
+    }
+    ngOnChanges() {
+        this.stateSet = true;
+    }
+    ngOnDestroy() {
+        if (this.destroyClick) {
+            this.destroyClick();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onClick() {
+        // yields consistent cross-browser behavior when clicking an indeterminate checkbox
+        const undefinedCheckedStateInIE = detectIE() && this.selectionService.selectAllState === undefined;
+        const isChecked = undefinedCheckedStateInIE ? true : this.el.nativeElement.checked;
+        const options = this.selectionService.options;
+        const enabledAndMultiple = options.enabled && options.mode === 'multiple';
+        const shouldEmitSelectAll = hasObservers(this.selectAllChange);
+        if (enabledAndMultiple || shouldEmitSelectAll) {
+            this.ngZone.run(() => {
+                if (enabledAndMultiple) {
+                    this.selectionService.updateAll(isChecked);
+                }
+                if (shouldEmitSelectAll) {
+                    this.selectAllChange.emit(isChecked ? 'checked' : 'unchecked');
+                }
+            });
+        }
+    }
+    /**
+     * @hidden
+     */
+    setState() {
+        const state = this.stateSet ? this.stateToBool() : this.selectionService.selectAllState;
+        const elem = this.el.nativeElement;
+        this.renderer.setProperty(elem, 'indeterminate', !isPresent(state));
+        this.renderer.setProperty(elem, 'checked', isPresent(state) ? state : false);
+    }
+    /**
+     * @hidden
+     */
+    stateToBool() {
+        switch (this.state) {
+            case 'checked':
+                return true;
+            case 'unchecked':
+                return false;
+            default:
+                return undefined;
+        }
+    }
+}
+SelectAllCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectAllCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SelectAllCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: { state: "state" }, outputs: { selectAllChange: "selectAllChange" }, host: { properties: { "attr.type": "this.type" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectAllCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridSelectAllCheckbox]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { state: [{
+                type: Input
+            }], selectAllChange: [{
+                type: Output
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }] } });

package/esm2015/selection/selection-checkbox.directive.js

@@ -0,0 +1,118 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive, HostBinding, Input } from '@angular/core';
+import { Keys } from '@progress/kendo-angular-common';
+import * as i0 from "@angular/core";
+import * as i1 from "./selection.service";
+/**
+ * Represents the row-selection checkbox of the Grid. The directive expects the
+ * index of the current row as an input parameter. Inside the
+ * [CheckboxColumnComponent]({% slug api_grid_checkboxcolumncomponent %}), apply the
+ * directive to an `input` element. When the user clicks the checkbox that is associated
+ * with the directive, a [selectionChange]({% slug api_grid_gridcomponent %}#toc-selectionChange)
+ * event is triggered.
+ *
+ * @example
+ * ```ts-preview
+ *
+ * _@Component({
+ *    selector: 'my-app',
+ *    template: `
+ *        <kendo-grid [data]="gridData" [selectable]="{enabled: true, checkboxOnly: true}">
+ *          <kendo-grid-checkbox-column title="Custom checkbox">
+ *            <ng-template kendoGridCellTemplate let-idx="rowIndex">
+ *              Select row <input [kendoGridSelectionCheckbox]="idx" />
+ *            </ng-template>
+ *          </kendo-grid-checkbox-column>
+ *          <kendo-grid-column field="ProductID" title="Product ID" [width]="120">
+ *          </kendo-grid-column>
+ *          <kendo-grid-column field="ProductName" title="Product Name">
+ *          </kendo-grid-column>
+ *        </kendo-grid>
+ *    `
+ * })
+ *
+ * class AppComponent {
+ *    public gridData: any[];
+ *
+ *    constructor() {
+ *        this.gridData = products;
+ *    }
+ * }
+ *
+ * const products = [{
+ *    "ProductID": 1,
+ *    "ProductName": "Chai",
+ *    "UnitPrice": 18.0000,
+ *    "Discontinued": true
+ *  }, {
+ *    "ProductID": 2,
+ *    "ProductName": "Chang",
+ *    "UnitPrice": 19.0000,
+ *    "Discontinued": false
+ *  }
+ * ];
+ *
+ * ```
+ */
+export class SelectionCheckboxDirective {
+    constructor(selectionService, el, renderer, ngZone) {
+        this.selectionService = selectionService;
+        this.el = el;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.type = 'checkbox';
+        this.ngZone.runOutsideAngular(() => {
+            this.destroyClick = this.renderer.listen(this.el.nativeElement, 'click', this.onClick.bind(this));
+            this.destroyKeyDown = this.renderer.listen(this.el.nativeElement, 'keydown', this.onKeyDown.bind(this));
+        });
+    }
+    ngAfterContentChecked() {
+        this.setCheckedState();
+    }
+    ngOnDestroy() {
+        if (this.destroyClick) {
+            this.destroyClick();
+        }
+        if (this.destroyKeyDown) {
+            this.destroyKeyDown();
+        }
+    }
+    onClick() {
+        if (this.selectionService.options.enabled) {
+            this.ngZone.run(() => {
+                const ev = this.selectionService.toggleByIndex(this.itemIndex);
+                ev.ctrlKey = true;
+                ev.shiftKey = false;
+                this.selectionService.changes.emit(ev);
+            });
+        }
+    }
+    onKeyDown(e) {
+        if (e.keyCode === Keys.Enter) {
+            this.onClick();
+        }
+    }
+    /*
+     * @hidden
+     */
+    setCheckedState() {
+        this.renderer.setProperty(this.el.nativeElement, 'checked', this.selectionService.isSelected(this.itemIndex));
+    }
+}
+SelectionCheckboxDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionCheckboxDirective, deps: [{ token: i1.SelectionService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SelectionCheckboxDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SelectionCheckboxDirective, selector: "[kendoGridSelectionCheckbox]", inputs: { itemIndex: ["kendoGridSelectionCheckbox", "itemIndex"] }, host: { properties: { "attr.type": "this.type" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridSelectionCheckbox]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.SelectionService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }]; }, propDecorators: { itemIndex: [{
+                type: Input,
+                args: ['kendoGridSelectionCheckbox']
+            }], type: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }] } });

package/esm2015/selection/selection-default.js

@@ -0,0 +1,162 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Input, EventEmitter, Output, Directive } from '@angular/core';
+import { isPresent } from "../utils";
+import { PairSet } from './pair-set';
+import * as i0 from "@angular/core";
+import * as i1 from "../common/provider.service";
+/**
+ * @hidden
+ */
+export class Selection {
+    constructor(ctx, cd) {
+        this.ctx = ctx;
+        this.cd = cd;
+        /**
+         * Defines the collection that will store the selected item keys.
+         */
+        this.selectedKeys = [];
+        /**
+         * Fires when the `selectedKeys` collection has been updated.
+         */
+        this.selectedKeysChange = new EventEmitter();
+        this.rowSelectionState = new Set();
+        this.cellSelectionState = new PairSet();
+        this.init();
+    }
+    get isCellSelectionMode() {
+        return isPresent(this.ctx.grid.selectable) && this.ctx.grid.selectable['cell'];
+    }
+    ngOnChanges(changes) {
+        // skip reinitialization if the user data is the same as the last state change
+        if (isPresent(changes.selectedKeys) && this.lastSelectionState !== this.selectedKeys) {
+            this.setState(this.selectedKeys);
+        }
+    }
+    init() {
+        if (!isPresent(this.ctx.grid.rowSelected)) {
+            this.ctx.grid.rowSelected = (row) => this.rowSelectionState.has(this.getItemKey(row));
+        }
+        if (!isPresent(this.ctx.grid.cellSelected)) {
+            this.ctx.grid.cellSelected = (row, column, colIndex) => {
+                const contender = this.getSelectionItem(row, column, colIndex);
+                return {
+                    selected: this.cellSelectionState.has(contender.itemKey, contender.columnKey),
+                    item: contender
+                };
+            };
+        }
+        this.selectionChangeSubscription = this.ctx.grid
+            .selectionChange
+            .subscribe(this.onSelectionChange.bind(this));
+    }
+    /**
+     * @hidden
+     */
+    destroy() {
+        this.selectionChangeSubscription.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    reset() {
+        this.rowSelectionState.clear();
+        this.cellSelectionState.clear();
+    }
+    getItemKey(row) {
+        if (this.selectionKey) {
+            if (typeof this.selectionKey === "string") {
+                return row.dataItem[this.selectionKey];
+            }
+            if (typeof this.selectionKey === "function") {
+                return this.selectionKey(row);
+            }
+        }
+        return row.index;
+    }
+    getSelectionItem(row, col, colIndex) {
+        const itemIdentifiers = {};
+        itemIdentifiers.itemKey = this.getItemKey(row);
+        if (!isPresent(col) && !isPresent(colIndex)) {
+            return itemIdentifiers;
+        }
+        if (this.columnKey) {
+            if (typeof this.columnKey === "string") {
+                itemIdentifiers.columnKey = row.dataItem[this.columnKey];
+            }
+            if (typeof this.columnKey === "function") {
+                itemIdentifiers.columnKey = this.columnKey(col, colIndex);
+            }
+        }
+        return {
+            itemKey: itemIdentifiers.itemKey,
+            columnKey: itemIdentifiers.columnKey ? itemIdentifiers.columnKey : colIndex
+        };
+    }
+    onSelectionChange(selection) {
+        if (selection.selectedRows) {
+            selection.deselectedRows.forEach((item) => {
+                const itemKey = this.getItemKey(item);
+                this.rowSelectionState.delete(itemKey);
+            });
+            if (this.ctx.grid.selectableSettings.mode === "single" && this.rowSelectionState.size > 0) {
+                this.reset();
+            }
+            selection.selectedRows.forEach((item) => {
+                const itemKey = this.getItemKey(item);
+                this.rowSelectionState.add(itemKey);
+            });
+        }
+        else {
+            selection.deselectedCells.forEach(({ itemKey, columnKey }) => {
+                this.cellSelectionState.delete(itemKey, columnKey);
+            });
+            if (this.ctx.grid.selectableSettings.mode === "single" && this.cellSelectionState.size > 0) {
+                this.reset();
+            }
+            selection.selectedCells.forEach(({ itemKey, columnKey }) => {
+                this.cellSelectionState.add(itemKey, columnKey);
+            });
+        }
+        this.cd.markForCheck();
+        this.notifyChange();
+    }
+    notifyChange() {
+        this.lastSelectionState = this.stateToArray();
+        this.selectedKeysChange.emit(this.lastSelectionState);
+    }
+    setState(selectedKeys) {
+        this.reset();
+        if (this.isCellSelectionMode) {
+            this.cellSelectionState = new PairSet(selectedKeys, 'itemKey', 'columnKey');
+        }
+        else {
+            this.rowSelectionState = new Set(selectedKeys);
+        }
+    }
+    stateToArray() {
+        return this.isCellSelectionMode ?
+            this.cellSelectionState.toArray('itemKey', 'columnKey') :
+            Array.from(this.rowSelectionState);
+    }
+}
+Selection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Selection, deps: [{ token: i1.ProviderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+Selection.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Selection, selector: "kendo-grid-selection-base", inputs: { selectedKeys: "selectedKeys", selectionKey: ["kendoGridSelectBy", "selectionKey"], columnKey: "columnKey" }, outputs: { selectedKeysChange: "selectedKeysChange" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Selection, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendo-grid-selection-base'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ProviderService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectedKeys: [{
+                type: Input
+            }], selectionKey: [{
+                type: Input,
+                args: ["kendoGridSelectBy"]
+            }], columnKey: [{
+                type: Input
+            }], selectedKeysChange: [{
+                type: Output
+            }] } });

package/esm2015/selection/selection.directive.js

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Directive } from '@angular/core';
+import { Selection } from "./selection-default";
+import * as i0 from "@angular/core";
+import * as i1 from "../common/provider.service";
+/**
+ * A directive which stores the row selection state of the Grid in memory
+ * ([see example]({% slug selection_grid %}#toc-during-data-operations)).
+ */
+export class SelectionDirective extends Selection {
+    constructor(ctx, cd) {
+        super(ctx, cd);
+        this.ctx = ctx;
+    }
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        if (this.ctx.grid.selectable === false) {
+            this.ctx.grid.selectable = true;
+        }
+        this.ctx.grid.selectionDirective = this;
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        super.destroy();
+    }
+}
+SelectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionDirective, deps: [{ token: i1.ProviderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+SelectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: SelectionDirective, selector: "[kendoGridSelectBy]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SelectionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoGridSelectBy]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.ProviderService }, { type: i0.ChangeDetectorRef }]; } });