@progress/kendo-angular-grid 5.5.1 → 6.0.0-dev.202201191529

package/dist/es2015/navigation/focusable.directive.d.ts

@@ -14,7 +14,7 @@ import { CellContext } from '../rendering/common/cell-context';
  * _@Component({
  *    selector: 'my-app',
  *    template: `
- *      <input type="text" class="k-textbox" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
+ *      <input type="text" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
  *      <kendo-grid [data]="data" [navigable]="true">
  *          <kendo-grid-column field="ProductID" title="Product ID" width="100">
  *          </kendo-grid-column>
@@ -23,18 +23,18 @@ import { CellContext } from '../rendering/common/cell-context';
  *          <kendo-grid-column>
  *              <ng-template kendoGridCellTemplate let-dataItem>
  *                  <!-- The first focusable element will be focused when pressing Enter on the cell -->
- *                  <input type="text" class="k-textbox" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
- *                  <button class="k-button" kendoGridFocusable>Update</button>
+ *                  <input type="text" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
+ *                  <button kendoGridFocusable>Update</button>
  *              </ng-template>
  *          </kendo-grid-column>
  *          <kendo-grid-column width="100">
  *              <ng-template kendoGridCellTemplate>
  *                  <!-- A single focusable element will be focused during navigation -->
- *                  <button class="k-button" kendoGridFocusable>Delete</button>
+ *                  <button kendoGridFocusable>Delete</button>
  *              </ng-template>
  *          </kendo-grid-column>
  *      </kendo-grid>
- *      <input type="text" class="k-textbox" placeholder="Tab stop #2" style="margin-top: 8px;" />
+ *      <input type="text" placeholder="Tab stop #2" style="margin-top: 8px;" />
  *    `
  * })
  *

package/dist/es2015/navigation/focusable.directive.js

@@ -15,7 +15,7 @@ import { CELL_CONTEXT } from '../rendering/common/cell-context';
  * _@Component({
  *    selector: 'my-app',
  *    template: `
- *      <input type="text" class="k-textbox" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
+ *      <input type="text" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
  *      <kendo-grid [data]="data" [navigable]="true">
  *          <kendo-grid-column field="ProductID" title="Product ID" width="100">
  *          </kendo-grid-column>
@@ -24,18 +24,18 @@ import { CELL_CONTEXT } from '../rendering/common/cell-context';
  *          <kendo-grid-column>
  *              <ng-template kendoGridCellTemplate let-dataItem>
  *                  <!-- The first focusable element will be focused when pressing Enter on the cell -->
- *                  <input type="text" class="k-textbox" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
- *                  <button class="k-button" kendoGridFocusable>Update</button>
+ *                  <input type="text" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
+ *                  <button kendoGridFocusable>Update</button>
  *              </ng-template>
  *          </kendo-grid-column>
  *          <kendo-grid-column width="100">
  *              <ng-template kendoGridCellTemplate>
  *                  <!-- A single focusable element will be focused during navigation -->
- *                  <button class="k-button" kendoGridFocusable>Delete</button>
+ *                  <button kendoGridFocusable>Delete</button>
  *              </ng-template>
  *          </kendo-grid-column>
  *      </kendo-grid>
- *      <input type="text" class="k-textbox" placeholder="Tab stop #2" style="margin-top: 8px;" />
+ *      <input type="text" placeholder="Tab stop #2" style="margin-top: 8px;" />
  *    `
  * })
  *

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1639039762,
+    publishDate: 1642605543,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/dist/es2015/pager/pager-numeric-buttons.component.js

@@ -97,7 +97,7 @@ PagerNumericButtonsComponent = tslib_1.__decorate([
         selector: 'kendo-pager-numeric-buttons',
         template: `
         <select
-            class="k-dropdown k-pager-nav"
+            class="k-dropdownlist k-pager-nav"
             kendoGridFocusable
             tabindex="0"
             [value]="(currentPage).toString()"

package/dist/es2015/pager/pager.component.d.ts

@@ -33,7 +33,6 @@ export declare class PagerComponent implements OnChanges, OnInit, OnDestroy {
     pageChange: EventEmitter<PageChangeEvent>;
     pagerWrapClass: boolean;
     gridPagerClass: boolean;
-    widgetClass: boolean;
     settings: PagerSettings;
     private subscriptions;
     private _templateContext;

package/dist/es2015/pager/pager.component.js

@@ -36,7 +36,6 @@ let PagerComponent = class PagerComponent {
         this.pageChange = new EventEmitter();
         this.pagerWrapClass = true;
         this.gridPagerClass = true;
-        this.widgetClass = true;
         this.settings = normalize({});
         this.subscriptions = new Subscription();
         this._templateContext = {};
@@ -251,10 +250,6 @@ tslib_1.__decorate([
     HostBinding('class.k-grid-pager'),
     tslib_1.__metadata("design:type", Boolean)
 ], PagerComponent.prototype, "gridPagerClass", void 0);
-tslib_1.__decorate([
-    HostBinding('class.k-widget'),
-    tslib_1.__metadata("design:type", Boolean)
-], PagerComponent.prototype, "widgetClass", void 0);
 tslib_1.__decorate([
     HostBinding('class.k-state-focused'),
     tslib_1.__metadata("design:type", Boolean),

package/dist/es2015/pdf/export-element.js

@@ -34,7 +34,7 @@ const appendNodes = (element, nodes) => {
 const ɵ0 = appendNodes;
 const wrapTable = (table) => {
     const wrapper = document.createElement('div');
-    wrapper.className = 'k-widget k-grid';
+    wrapper.className = 'k-grid';
     wrapper.appendChild(table);
     return wrapper;
 };

package/dist/es2015/rendering/cell.component.js

@@ -189,7 +189,7 @@ CellComponent = tslib_1.__decorate([
                     <ng-template [ngIf]="isBoundColumn">{{ dataItem | valueOf: column.field: column.format}}</ng-template>
                     <ng-template [ngIf]="isCheckboxColumn && !isNew">
                         <input
-                            class="k-checkbox"
+                            class="k-checkbox k-checkbox-md k-rounded-md"
                             [kendoGridSelectionCheckbox]="rowIndex"
                             [attr.id]="selectionCheckboxId"
                             [attr.aria-label]="selectionCheckboxLabel" />
@@ -228,7 +228,7 @@ CellComponent = tslib_1.__decorate([
                     <input
                         *ngSwitchCase="'boolean'"
                         type="checkbox"
-                        class="k-checkbox"
+                        class="k-checkbox k-checkbox-md k-rounded-md"
                         [formControl]="formGroup.get(column.field)"
                         kendoGridFocusable
                     />
@@ -236,7 +236,7 @@ CellComponent = tslib_1.__decorate([
                     <input
                         *ngSwitchDefault
                         type="text"
-                        class="k-textbox"
+                        class="k-textbox k-input k-rounded-md"
                         [formControl]="formGroup.get(column.field)"
                         kendoGridFocusable
                     />

package/dist/es2015/rendering/constants.d.ts

@@ -17,4 +17,4 @@ export declare const IGNORE_TARGET_CLASSSES = "k-icon";
 /**
  * @hidden
  */
-export declare const IGNORE_CONTAINER_CLASSES = "k-widget k-grid-ignore-click";
+export declare const IGNORE_CONTAINER_CLASSES = "k-grid k-grid-ignore-click";

package/dist/es2015/rendering/constants.js

@@ -17,4 +17,4 @@ export const IGNORE_TARGET_CLASSSES = 'k-icon';
 /**
  * @hidden
  */
-export const IGNORE_CONTAINER_CLASSES = 'k-widget k-grid-ignore-click';
+export const IGNORE_CONTAINER_CLASSES = 'k-grid k-grid-ignore-click';

package/dist/es2015/rendering/details-expand.directive.d.ts

@@ -2,14 +2,14 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, OnDestroy } from '@angular/core';
+import { EventEmitter, OnDestroy, OnChanges, SimpleChanges } from '@angular/core';
 import { GridComponent } from '../grid.component';
 import { Subscription } from 'rxjs';
 import { RowArgs } from './common/row-args';
 /**
  * A directive which controls the expanded state of the master detail rows.
  */
-export declare class ExpandDetailsDirective implements OnDestroy {
+export declare class ExpandDetailsDirective implements OnChanges, OnDestroy {
     protected grid: GridComponent;
     /**
      * Fires when the expandedDetailKeys are changed.
@@ -31,12 +31,17 @@ export declare class ExpandDetailsDirective implements OnDestroy {
     expandedDetailKeys: any[];
     /**
      * Specifies if the items should be initially expanded.
+     * When set to `true` items added to the `expandedDetailKeys` collection will be collapsed, and items that are not present in it will be expanded.
+     *
      * @default false
      */
     initiallyExpanded: boolean;
+    protected expandedState: Set<any>;
+    protected lastExpandedState: any[];
     protected _expandBy: any;
     protected subscriptions: Subscription;
     constructor(grid: GridComponent);
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     protected readonly keyGetter: any;
     /**
@@ -44,4 +49,5 @@ export declare class ExpandDetailsDirective implements OnDestroy {
      */
     isExpanded(args: RowArgs): boolean;
     private toggleState;
+    private notifyChange;
 }

package/dist/es2015/rendering/details-expand.directive.js

@@ -8,7 +8,7 @@ import { GridComponent } from '../grid.component';
 import { Subscription, merge } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { getter } from '@progress/kendo-common';
-import { isString } from '../utils';
+import { isPresent, isString } from '../utils';
 /**
  * A directive which controls the expanded state of the master detail rows.
  */
@@ -25,9 +25,12 @@ let ExpandDetailsDirective = class ExpandDetailsDirective {
         this.expandedDetailKeys = [];
         /**
          * Specifies if the items should be initially expanded.
+         * When set to `true` items added to the `expandedDetailKeys` collection will be collapsed, and items that are not present in it will be expanded.
+         *
          * @default false
          */
         this.initiallyExpanded = false;
+        this.expandedState = new Set();
         this.subscriptions = new Subscription();
         this.grid.isDetailExpanded = this.isExpanded.bind(this);
         this.subscriptions.add(merge(this.grid.detailExpand.pipe(map(e => (Object.assign({ expand: true }, e)))), this.grid.detailCollapse.pipe(map(e => (Object.assign({ expand: false }, e))))).subscribe(this.toggleState.bind(this)));
@@ -57,6 +60,12 @@ let ExpandDetailsDirective = class ExpandDetailsDirective {
     set expandDetailBy(key) {
         this.expandDetailsKey = key;
     }
+    ngOnChanges(changes) {
+        // skip reinitialization if the user data is the same as the last state change
+        if (isPresent(changes.expandedDetailKeys) && this.lastExpandedState !== this.expandedDetailKeys) {
+            this.expandedState = new Set(this.expandedDetailKeys);
+        }
+    }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
@@ -68,18 +77,23 @@ let ExpandDetailsDirective = class ExpandDetailsDirective {
      */
     isExpanded(args) {
         const key = this.keyGetter(args.dataItem);
-        return this.expandedDetailKeys.indexOf(key) > -1 ? !this.initiallyExpanded : this.initiallyExpanded;
+        const hasKey = this.expandedState.has(key);
+        // when [initiallyExpanded]="true" a present key means the corresponding detail row is collapsed
+        return this.initiallyExpanded ? !hasKey : hasKey;
     }
     toggleState(args) {
         const key = this.keyGetter(args.dataItem);
         if (Boolean(this.initiallyExpanded) !== args.expand) {
-            this.expandedDetailKeys.push(key);
+            this.expandedState.add(key);
         }
         else {
-            const index = this.expandedDetailKeys.indexOf(key);
-            this.expandedDetailKeys.splice(index, 1);
+            this.expandedState.delete(key);
         }
-        this.expandedDetailKeysChange.emit(this.expandedDetailKeys);
+        this.notifyChange();
+    }
+    notifyChange() {
+        this.lastExpandedState = Array.from(this.expandedState);
+        this.expandedDetailKeysChange.emit(this.lastExpandedState);
     }
 };
 tslib_1.__decorate([

package/dist/es2015/rendering/header/header.component.js

@@ -603,7 +603,7 @@ HeaderComponent = tslib_1.__decorate([
 
                     <ng-template [ngIf]="isCheckboxColumn(column) && !column.headerTemplateRef && column.showSelectAll">
                         <input
-                            class="k-checkbox"
+                            class="k-checkbox k-checkbox-md k-rounded-md"
                             [attr.id]="selectAllCheckboxId()"
                             [attr.aria-label]="selectAllCheckboxLabel"
                             kendoGridSelectAllCheckbox

package/dist/es2015/rendering/toolbar/toolbar-template.directive.d.ts

@@ -16,16 +16,16 @@ import { TemplateRef } from '@angular/core';
  *     selector: 'my-app',
  *     template: `
  *       <div class="example-config">
- *         <input type="radio" id="top" name="position" class="k-radio" value="top" checked (click)="positionChange($event)"/>
+ *         <input type="radio" id="top" name="position" value="top" checked (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="top">Top</label><br/>
- *         <input type="radio" id="bottom" name="position" class="k-radio" value="bottom" (click)="positionChange($event)"/>
+ *         <input type="radio" id="bottom" name="position" value="bottom" (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="bottom">Bottom</label><br/>
- *         <input type="radio" id="both" name="position" value="both" class="k-radio" (click)="positionChange($event)"/>
+ *         <input type="radio" id="both" name="position" value="both" (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="both">Both</label><br/>
  *       </div>
  *       <kendo-grid [data]="gridData" style="height: 200px">
  *            <ng-template kendoGridToolbarTemplate [position]="position" let-position="position">
- *                <button (click)="onClick()" class="k-button">Custom action</button>
+ *                <button (click)="onClick()">Custom action</button>
  *            </ng-template>
  *            <kendo-grid-column field="ProductName">
  *            </kendo-grid-column>

package/dist/es2015/rendering/toolbar/toolbar-template.directive.js

@@ -17,16 +17,16 @@ import { Directive, TemplateRef, Optional, Input } from '@angular/core';
  *     selector: 'my-app',
  *     template: `
  *       <div class="example-config">
- *         <input type="radio" id="top" name="position" class="k-radio" value="top" checked (click)="positionChange($event)"/>
+ *         <input type="radio" id="top" name="position" value="top" checked (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="top">Top</label><br/>
- *         <input type="radio" id="bottom" name="position" class="k-radio" value="bottom" (click)="positionChange($event)"/>
+ *         <input type="radio" id="bottom" name="position" value="bottom" (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="bottom">Bottom</label><br/>
- *         <input type="radio" id="both" name="position" value="both" class="k-radio" (click)="positionChange($event)"/>
+ *         <input type="radio" id="both" name="position" value="both" (click)="positionChange($event)"/>
  *         <label class="k-radio-label" for="both">Both</label><br/>
  *       </div>
  *       <kendo-grid [data]="gridData" style="height: 200px">
  *            <ng-template kendoGridToolbarTemplate [position]="position" let-position="position">
- *                <button (click)="onClick()" class="k-button">Custom action</button>
+ *                <button (click)="onClick()">Custom action</button>
  *            </ng-template>
  *            <kendo-grid-column field="ProductName">
  *            </kendo-grid-column>

package/dist/es2015/selection/pair-set.d.ts

@@ -0,0 +1,50 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ *
+ * Quick look-up structure for combinations of keys.
+ * Similar to the native JS Set, however, working with a couple of keys instead of with a single key.
+ * Supports both primitive keys and object keys (compared by reference).
+ */
+export declare class PairSet {
+    /**
+     * Gets the total number of X/Y key pairs.
+     */
+    readonly size: number;
+    /**
+     * Holds a set of Y keys for each defined X key.
+     * Each X key creates a map which holds a set of Y keys.
+     *
+     * Map { 1 => Set { 1, 2, 3 } } // pairs: [1, 1], [1, 2], [1, 3]
+     */
+    private keysX;
+    /**
+     * Count the each added or deleted key manually to avoid iterating over all items when calling `this.size`.
+     */
+    private totalKeysCount;
+    constructor(items?: any[], keyXField?: string, keyYField?: string);
+    /**
+     * Adds a couple of items identified as a combination.
+     */
+    add(keyX: any, keyY: any): void;
+    /**
+     * Adds a combination of a couple of items identified together.
+     */
+    delete(keyX: any, keyY: any): void;
+    /**
+     * Checks whether the defined combination is stored.
+     */
+    has(keyX: any, keyY: any): boolean;
+    /**
+     * Clears all key combinations.
+     */
+    clear(): void;
+    /**
+     * Converts the persisted data structure to an array of objects,
+     * using the provided field names for the object props.
+     */
+    toArray(keyXField: string, keyYField: string): any[];
+}

package/dist/es2015/selection/pair-set.js

@@ -0,0 +1,81 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ *
+ * Quick look-up structure for combinations of keys.
+ * Similar to the native JS Set, however, working with a couple of keys instead of with a single key.
+ * Supports both primitive keys and object keys (compared by reference).
+ */
+export class PairSet {
+    constructor(items, keyXField, keyYField) {
+        /**
+         * Holds a set of Y keys for each defined X key.
+         * Each X key creates a map which holds a set of Y keys.
+         *
+         * Map { 1 => Set { 1, 2, 3 } } // pairs: [1, 1], [1, 2], [1, 3]
+         */
+        this.keysX = new Map();
+        /**
+         * Count the each added or deleted key manually to avoid iterating over all items when calling `this.size`.
+         */
+        this.totalKeysCount = 0;
+        if (items && keyXField && keyYField) {
+            items.forEach(item => this.add(item[keyXField], item[keyYField]));
+        }
+    }
+    /**
+     * Gets the total number of X/Y key pairs.
+     */
+    get size() {
+        return this.totalKeysCount;
+    }
+    /**
+     * Adds a couple of items identified as a combination.
+     */
+    add(keyX, keyY) {
+        if (!this.keysX.has(keyX)) {
+            this.keysX.set(keyX, new Set());
+        }
+        if (!this.has(keyX, keyY)) {
+            this.keysX.get(keyX).add(keyY);
+            this.totalKeysCount += 1;
+        }
+    }
+    /**
+     * Adds a combination of a couple of items identified together.
+     */
+    delete(keyX, keyY) {
+        if (this.has(keyX, keyY)) {
+            this.keysX.get(keyX).delete(keyY);
+            this.totalKeysCount -= 1;
+        }
+    }
+    /**
+     * Checks whether the defined combination is stored.
+     */
+    has(keyX, keyY) {
+        return this.keysX.has(keyX) && this.keysX.get(keyX).has(keyY);
+    }
+    /**
+     * Clears all key combinations.
+     */
+    clear() {
+        this.keysX.clear();
+        this.totalKeysCount = 0;
+    }
+    /**
+     * Converts the persisted data structure to an array of objects,
+     * using the provided field names for the object props.
+     */
+    toArray(keyXField, keyYField) {
+        return Array.from(this.keysX).reduce((pairs, pair) => {
+            // Array.from(mapInstance) returns an array of arrays [[itemKey1, columnKeysSet1], [itemKey2, columnKeysSet2]]
+            const [keyX, keysY] = pair;
+            Array.from(keysY).forEach(keyY => pairs.push({ [keyXField]: keyX, [keyYField]: keyY }));
+            return pairs;
+        }, []);
+    }
+}

package/dist/es2015/selection/selection-default.d.ts

@@ -2,12 +2,13 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { EventEmitter, ChangeDetectorRef, SimpleChanges } from '@angular/core';
 import { GridComponent } from "../grid.component";
 import { Subscription } from "rxjs";
 import { RowArgs } from "../rendering/common/row-args";
 import { SelectionEvent, CellSelectionItem } from "./types";
 import { ColumnComponent } from '../columns/column.component';
+import { PairSet } from './pair-set';
 /**
  * @hidden
  */
@@ -33,8 +34,13 @@ export declare class Selection {
      * Fires when the `selectedKeys` collection has been updated.
      */
     selectedKeysChange: EventEmitter<any[]>;
+    protected rowSelectionState: Set<any>;
+    protected cellSelectionState: PairSet;
+    protected lastSelectionState: any[];
     protected selectionChangeSubscription: Subscription;
+    private readonly isCellSelectionMode;
     constructor(grid: GridComponent, cd: ChangeDetectorRef);
+    ngOnChanges(changes: SimpleChanges): void;
     protected init(): void;
     /**
      * @hidden
@@ -47,5 +53,7 @@ export declare class Selection {
     protected getItemKey(row: RowArgs): any;
     protected getSelectionItem(row: RowArgs, col: ColumnComponent, colIndex: number): CellSelectionItem;
     protected onSelectionChange(selection: SelectionEvent): void;
-    private getCellSelectionItemIndex;
+    private notifyChange;
+    private setState;
+    private stateToArray;
 }

package/dist/es2015/selection/selection-default.js

@@ -3,9 +3,9 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as tslib_1 from "tslib";
-/* tslint:disable:no-input-rename */
 import { Input, EventEmitter, Output } from '@angular/core';
 import { isPresent } from "../utils";
+import { PairSet } from './pair-set';
 /**
  * @hidden
  */
@@ -21,19 +21,28 @@ export class Selection {
          * 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.grid.selectable) && this.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.grid.rowSelected)) {
-            this.grid.rowSelected = (row) => {
-                return this.selectedKeys.indexOf(this.getItemKey(row)) >= 0;
-            };
+            this.grid.rowSelected = (row) => this.rowSelectionState.has(this.getItemKey(row));
         }
         if (!isPresent(this.grid.cellSelected)) {
             this.grid.cellSelected = (row, column, colIndex) => {
                 const contender = this.getSelectionItem(row, column, colIndex);
                 return {
-                    selected: this.selectedKeys.some(item => item.columnKey === contender.columnKey && item.itemKey === contender.itemKey),
+                    selected: this.cellSelectionState.has(contender.itemKey, contender.columnKey),
                     item: contender
                 };
             };
@@ -52,7 +61,8 @@ export class Selection {
      * @hidden
      */
     reset() {
-        this.selectedKeys = [];
+        this.rowSelectionState.clear();
+        this.cellSelectionState.clear();
     }
     getItemKey(row) {
         if (this.selectionKey) {
@@ -88,43 +98,47 @@ export class Selection {
         if (selection.selectedRows) {
             selection.deselectedRows.forEach((item) => {
                 const itemKey = this.getItemKey(item);
-                const itemIndex = this.selectedKeys.indexOf(itemKey);
-                if (itemIndex >= 0) {
-                    this.selectedKeys.splice(itemIndex, 1);
-                }
+                this.rowSelectionState.delete(itemKey);
             });
-            if (this.grid.selectableSettings.mode === "single" && this.selectedKeys.length > 0) {
+            if (this.grid.selectableSettings.mode === "single" && this.rowSelectionState.size > 0) {
                 this.reset();
             }
             selection.selectedRows.forEach((item) => {
                 const itemKey = this.getItemKey(item);
-                if (this.selectedKeys.indexOf(itemKey) < 0) {
-                    this.selectedKeys.push(itemKey);
-                }
+                this.rowSelectionState.add(itemKey);
             });
         }
         else {
-            selection.deselectedCells.forEach((item) => {
-                const itemIndex = this.getCellSelectionItemIndex(item);
-                if (itemIndex >= 0) {
-                    this.selectedKeys.splice(itemIndex, 1);
-                }
+            selection.deselectedCells.forEach(({ itemKey, columnKey }) => {
+                this.cellSelectionState.delete(itemKey, columnKey);
             });
-            if (this.grid.selectableSettings.mode === "single" && this.selectedKeys.length > 0) {
+            if (this.grid.selectableSettings.mode === "single" && this.cellSelectionState.size > 0) {
                 this.reset();
             }
-            selection.selectedCells.forEach((item) => {
-                const itemIndex = this.getCellSelectionItemIndex(item);
-                if (itemIndex < 0) {
-                    this.selectedKeys.push(item);
-                }
+            selection.selectedCells.forEach(({ itemKey, columnKey }) => {
+                this.cellSelectionState.add(itemKey, columnKey);
             });
         }
         this.cd.markForCheck();
-        this.selectedKeysChange.emit(this.selectedKeys);
+        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);
+        }
     }
-    getCellSelectionItemIndex(item) {
-        return this.selectedKeys.findIndex(selectedItem => selectedItem.itemKey === item.itemKey && selectedItem.columnKey === item.columnKey);
+    stateToArray() {
+        return this.isCellSelectionMode ?
+            this.cellSelectionState.toArray('itemKey', 'columnKey') :
+            Array.from(this.rowSelectionState);
     }
 }
 tslib_1.__decorate([

package/dist/es2015/utils.d.ts

@@ -36,11 +36,11 @@ export declare const isUniversal: () => boolean;
 /**
  * @hidden
  */
-export declare const isString: (value: any) => boolean;
+export declare const isString: (value: any) => value is string;
 /**
  * @hidden
  */
-export declare const isNumber: (value: any) => boolean;
+export declare const isNumber: (value: any) => value is number;
 /**
  * @hidden
  */