@progress/kendo-angular-grid 5.5.2-dev.202201041402 → 6.0.0

package/dist/es/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,20 +21,33 @@ var Selection = /** @class */ (function () {
          * Fires when the `selectedKeys` collection has been updated.
          */
         this.selectedKeysChange = new EventEmitter();
+        this.rowSelectionState = new Set();
+        this.cellSelectionState = new PairSet();
         this.init();
     }
+    Object.defineProperty(Selection.prototype, "isCellSelectionMode", {
+        get: function () {
+            return isPresent(this.grid.selectable) && this.grid.selectable['cell'];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Selection.prototype.ngOnChanges = function (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);
+        }
+    };
     Selection.prototype.init = function () {
         var _this = this;
         if (!isPresent(this.grid.rowSelected)) {
-            this.grid.rowSelected = function (row) {
-                return _this.selectedKeys.indexOf(_this.getItemKey(row)) >= 0;
-            };
+            this.grid.rowSelected = function (row) { return _this.rowSelectionState.has(_this.getItemKey(row)); };
         }
         if (!isPresent(this.grid.cellSelected)) {
             this.grid.cellSelected = function (row, column, colIndex) {
                 var contender = _this.getSelectionItem(row, column, colIndex);
                 return {
-                    selected: _this.selectedKeys.some(function (item) { return item.columnKey === contender.columnKey && item.itemKey === contender.itemKey; }),
+                    selected: _this.cellSelectionState.has(contender.itemKey, contender.columnKey),
                     item: contender
                 };
             };
@@ -53,7 +66,8 @@ var Selection = /** @class */ (function () {
      * @hidden
      */
     Selection.prototype.reset = function () {
-        this.selectedKeys = [];
+        this.rowSelectionState.clear();
+        this.cellSelectionState.clear();
     };
     Selection.prototype.getItemKey = function (row) {
         if (this.selectionKey) {
@@ -90,45 +104,49 @@ var Selection = /** @class */ (function () {
         if (selection.selectedRows) {
             selection.deselectedRows.forEach(function (item) {
                 var itemKey = _this.getItemKey(item);
-                var 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(function (item) {
                 var itemKey = _this.getItemKey(item);
-                if (_this.selectedKeys.indexOf(itemKey) < 0) {
-                    _this.selectedKeys.push(itemKey);
-                }
+                _this.rowSelectionState.add(itemKey);
             });
         }
         else {
-            selection.deselectedCells.forEach(function (item) {
-                var itemIndex = _this.getCellSelectionItemIndex(item);
-                if (itemIndex >= 0) {
-                    _this.selectedKeys.splice(itemIndex, 1);
-                }
+            selection.deselectedCells.forEach(function (_a) {
+                var itemKey = _a.itemKey, columnKey = _a.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(function (item) {
-                var itemIndex = _this.getCellSelectionItemIndex(item);
-                if (itemIndex < 0) {
-                    _this.selectedKeys.push(item);
-                }
+            selection.selectedCells.forEach(function (_a) {
+                var itemKey = _a.itemKey, columnKey = _a.columnKey;
+                _this.cellSelectionState.add(itemKey, columnKey);
             });
         }
         this.cd.markForCheck();
-        this.selectedKeysChange.emit(this.selectedKeys);
+        this.notifyChange();
+    };
+    Selection.prototype.notifyChange = function () {
+        this.lastSelectionState = this.stateToArray();
+        this.selectedKeysChange.emit(this.lastSelectionState);
+    };
+    Selection.prototype.setState = function (selectedKeys) {
+        this.reset();
+        if (this.isCellSelectionMode) {
+            this.cellSelectionState = new PairSet(selectedKeys, 'itemKey', 'columnKey');
+        }
+        else {
+            this.rowSelectionState = new Set(selectedKeys);
+        }
     };
-    Selection.prototype.getCellSelectionItemIndex = function (item) {
-        return this.selectedKeys.findIndex(function (selectedItem) {
-            return selectedItem.itemKey === item.itemKey && selectedItem.columnKey === item.columnKey;
-        });
+    Selection.prototype.stateToArray = function () {
+        return this.isCellSelectionMode ?
+            this.cellSelectionState.toArray('itemKey', 'columnKey') :
+            Array.from(this.rowSelectionState);
     };
     tslib_1.__decorate([
         Input(),

package/dist/es/utils.js

@@ -40,9 +40,7 @@ export var isUniversal = function () { return typeof document === 'undefined'; }
 /**
  * @hidden
  */
-export var isString = function (value) {
-    return typeof value === 'string';
-};
+export var isString = function (value) { return typeof value === 'string'; };
 /**
  * @hidden
  */

package/dist/es2015/column-menu/column-chooser.component.js

@@ -129,9 +129,9 @@ ColumnChooserComponent = tslib_1.__decorate([
         <button #anchor
             type="button"
             (click)="toggle(anchor, template)"
-            class="k-button k-bare k-button-icon"
+            class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button"
             [attr.title]="localization.get('columns')">
-            <span class="k-icon k-i-columns"></span>
+            <span class="k-button-icon k-icon k-i-columns"></span>
         </button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>

package/dist/es2015/column-menu/column-list.component.js

@@ -214,12 +214,12 @@ ColumnListComponent = tslib_1.__decorate([
         template: `
         <div class="k-column-list">
             <label *ngFor="let column of columns; let index = index;" class='k-column-list-item'>
-                <input class="k-checkbox" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
+                <input class="k-checkbox k-checkbox-md k-rounded-md" type="checkbox" [attr.data-index]="index" [checked]="!column.hidden" [disabled]="isDisabled(column)" /><span class="k-checkbox-label">{{ column.displayTitle }}</span>
             </label>
         </div>
         <div [ngClass]="actionsClass" *ngIf="!autoSync">
-            <button type="button" class="k-button" (click)="cancelChanges()">{{ resetText }}</button>
-            <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-primary" (click)="applyChanges()">{{ applyText }}</button>
+            <button type="button" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="cancelChanges()">{{ resetText }}</button>
+            <button #applyButton type="button" (keydown.tab)="onTab($event)" class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle" (click)="applyChanges()">{{ applyText }}</button>
         </div>
     `
     }),

package/dist/es2015/dragdrop/draggable-column.directive.js

@@ -22,9 +22,9 @@ const preventOnDblClick = release => mouseDown => of(mouseDown).pipe(delay(150),
 const ɵ0 = preventOnDblClick;
 const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
 const ɵ1 = hasClass;
-const isDeleteButton = or(hasClass("k-i-group-delete"), hasClass("k-button-icon"));
-const isSortIcon = or(hasClass("k-i-sort-asc-sm"), hasClass("k-i-sort-desc-sm"));
-const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName("label")));
+const isDeleteButton = or(hasClass('k-i-group-delete'), hasClass('k-icon-button'));
+const isSortIcon = or(hasClass('k-i-sort-asc-sm'), hasClass('k-i-sort-desc-sm'));
+const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
 const elementUnderCursor = ({ clientX, clientY }) => document.elementFromPoint(clientX, clientY);
 const ɵ2 = elementUnderCursor;
 const hideThenShow = (element, cont) => {

package/dist/es2015/filtering/cell/filter-cell-operators.component.js

@@ -131,12 +131,12 @@ FilterCellOperatorsComponent = tslib_1.__decorate([
         </kendo-dropdownlist>
         <button type="button"
             kendoGridFocusable
-            [ngClass]="{'k-clear-button-visible': showButton}"
-            class="k-button k-button-icon"
+            *ngIf="showButton"
+            class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle k-icon-button"
             [title]="clearText"
             (click)="clearClick()"
             (keydown)="clearKeydown($event)">
-                <span class="k-icon k-i-filter-clear"></span>
+                <span class="k-icon k-button-icon k-i-filter-clear"></span>
         </button>
     `
     }),

package/dist/es2015/filtering/cell/string-filter-cell.component.js

@@ -70,7 +70,7 @@ StringFilterCellComponent = tslib_1.__decorate([
             [defaultOperator]="operator"
             [showOperators]="showOperators">
             <input
-                class="k-textbox"
+                kendoTextBox
                 kendoGridFocusable
                 kendoFilterInput
                 [columnLabel]="columnLabel"

package/dist/es2015/filtering/filter-input.directive.js

@@ -66,7 +66,8 @@ let FilterInputDirective = class FilterInputDirective {
     addAriaAttributes() {
         const ariaValue = this.columnLabel;
         if (this.kendoInput && this.kendoInput.focusableId && isDocumentAvailable()) {
-            const focusableElement = this.element.nativeElement.querySelector(`#${this.kendoInput.focusableId}`);
+            const focusableElement = this.element.nativeElement.querySelector(`#${this.kendoInput.focusableId}`) ||
+                this.element.nativeElement;
             this.renderer.setAttribute(focusableElement, 'aria-label', ariaValue);
         }
         else {

package/dist/es2015/filtering/menu/boolean-filter-menu.component.js

@@ -121,7 +121,7 @@ BooleanFilterMenuComponent = tslib_1.__decorate([
                     [columnLabel]="columnLabel"
                     #input
                     [name]="idPrefix"
-                    class="k-radio"
+                    kendoRadioButton
                     [checked]="isSelected(item.value)"
                     [attr.id]="radioId(item.value)"
                     (change)="onChange(item.value, input)"

package/dist/es2015/filtering/menu/filter-menu-container.component.js

@@ -221,11 +221,11 @@ FilterMenuContainerComponent = tslib_1.__decorate([
                     <button
                         #resetButton
                         type="reset"
-                        class="k-button"
+                        class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         (keydown.tab)="onTab($event, 'reset')">{{clearText}}</button>
                     <button #filterButton
                         type="submit"
-                        class="k-button k-primary"
+                        class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md k-button-rectangle"
                         [disabled]="disabled"
                         (keydown.tab)="onTab($event, 'filter')">{{filterText}}</button>
                 </div>

package/dist/es2015/filtering/menu/string-filter-menu-input.component.js

@@ -70,7 +70,7 @@ StringFilterMenuInputComponent = tslib_1.__decorate([
             [menuTabbingService]="menuTabbingService"
             >
             <input
-                class="k-textbox"
+                kendoTextBox
                 kendoFilterInput
                 [columnLabel]="columnLabel"
                 [filterDelay]="0"

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

@@ -808,7 +808,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      *            [resizable]="true"
      *            style="height: 300px">
      *            <ng-template kendoGridToolbarTemplate>
-     *                 <button class="k-button" (click)="grid.autoFitColumn(groupColumn)">
+     *                 <button kendoButton (click)="grid.autoFitColumn(groupColumn)">
      *                     Auto-fit the group column
      *                 </button>
      *            </ng-template>
@@ -872,10 +872,10 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      *          [resizable]="true"
      *          style="height: 300px">
      *          <ng-template kendoGridToolbarTemplate>
-     *              <button class="k-button" (click)="grid.autoFitColumns([firstColumn, lastColumn])">
+     *              <button kendoButton (click)="grid.autoFitColumns([firstColumn, lastColumn])">
      *                  Auto-fit the first and last column
      *              </button>
-     *              <button class="k-button" (click)="grid.autoFitColumns()">
+     *              <button kendoButton (click)="grid.autoFitColumns()">
      *                  Auto-fit all columns
      *              </button>
      *          </ng-template>
@@ -1000,7 +1000,7 @@ export declare class GridComponent implements AfterContentInit, AfterViewInit, O
      *            [reorderable]="true"
      *            style="height: 300px">
      *            <ng-template kendoGridToolbarTemplate>
-     *                 <button class="k-button"
+     *                 <button kendoButton
      *                     (click)="grid.reorderColumn(groupColumn, 2, { before: true })">
      *                     Move the group column before the last one.
      *                 </button>

package/dist/es2015/grid.component.js

@@ -1212,7 +1212,7 @@ let GridComponent = class GridComponent {
      *            [resizable]="true"
      *            style="height: 300px">
      *            <ng-template kendoGridToolbarTemplate>
-     *                 <button class="k-button" (click)="grid.autoFitColumn(groupColumn)">
+     *                 <button kendoButton (click)="grid.autoFitColumn(groupColumn)">
      *                     Auto-fit the group column
      *                 </button>
      *            </ng-template>
@@ -1278,10 +1278,10 @@ let GridComponent = class GridComponent {
      *          [resizable]="true"
      *          style="height: 300px">
      *          <ng-template kendoGridToolbarTemplate>
-     *              <button class="k-button" (click)="grid.autoFitColumns([firstColumn, lastColumn])">
+     *              <button kendoButton (click)="grid.autoFitColumns([firstColumn, lastColumn])">
      *                  Auto-fit the first and last column
      *              </button>
-     *              <button class="k-button" (click)="grid.autoFitColumns()">
+     *              <button kendoButton (click)="grid.autoFitColumns()">
      *                  Auto-fit all columns
      *              </button>
      *          </ng-template>
@@ -1454,7 +1454,7 @@ let GridComponent = class GridComponent {
      *            [reorderable]="true"
      *            style="height: 300px">
      *            <ng-template kendoGridToolbarTemplate>
-     *                 <button class="k-button"
+     *                 <button kendoButton
      *                     (click)="grid.reorderColumn(groupColumn, 2, { before: true })">
      *                     Move the group column before the last one.
      *                 </button>
@@ -2291,7 +2291,6 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:paramtypes", [])
 ], GridComponent.prototype, "dir", null);
 tslib_1.__decorate([
-    HostBinding('class.k-widget'),
     HostBinding('class.k-grid'),
     tslib_1.__metadata("design:type", Boolean),
     tslib_1.__metadata("design:paramtypes", [])

package/dist/es2015/grouping/group-indicator.component.js

@@ -67,8 +67,8 @@ GroupIndicatorComponent = tslib_1.__decorate([
                 [class.k-i-sort-asc-sm]="dir === 'asc'"
                 [class.k-i-sort-desc-sm]="dir === 'desc'"></span>
             {{groupTitle}}</a>
-        <a class="k-button k-button-icon k-bare" tabindex="-1" (click)="removeDescriptor()">
-            <span class="k-icon k-i-group-delete"></span>
+        <a class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button" tabindex="-1" (click)="removeDescriptor()">
+            <span class="k-button-icon k-icon k-i-group-delete"></span>
         </a>
     `
     })