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

package/dist/fesm2015/index.js

@@ -2831,7 +2831,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641921939,
+    publishDate: 1642155100,
     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'
 };
@@ -4760,6 +4760,84 @@ class DataCollection {
     toString() { return this.accessor().toString(); }
 }
 
+/**
+ * @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).
+ */
+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;
+        }, []);
+    }
+}
+
 /**
  * @hidden
  */
@@ -4775,19 +4853,28 @@ 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
                 };
             };
@@ -4806,7 +4893,8 @@ class Selection {
      * @hidden
      */
     reset() {
-        this.selectedKeys = [];
+        this.rowSelectionState.clear();
+        this.cellSelectionState.clear();
     }
     getItemKey(row) {
         if (this.selectionKey) {
@@ -4842,43 +4930,47 @@ 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();
     }
-    getCellSelectionItemIndex(item) {
-        return this.selectedKeys.findIndex(selectedItem => selectedItem.itemKey === item.itemKey && selectedItem.columnKey === item.columnKey);
+    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);
     }
 }
 __decorate([
@@ -10375,9 +10467,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)));
@@ -10407,6 +10502,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();
     }
@@ -10418,18 +10519,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);
     }
 };
 __decorate([

package/dist/fesm5/index.js

@@ -60,9 +60,7 @@ var isUniversal = function () { return typeof document === 'undefined'; };
 /**
  * @hidden
  */
-var isString = function (value) {
-    return typeof value === 'string';
-};
+var isString = function (value) { return typeof value === 'string'; };
 /**
  * @hidden
  */
@@ -3046,7 +3044,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641921939,
+    publishDate: 1642155100,
     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'
 };
@@ -5206,6 +5204,93 @@ var DataCollection = /** @class */ (function () {
     return DataCollection;
 }());
 
+/**
+ * @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).
+ */
+var PairSet = /** @class */ (function () {
+    function PairSet(items, keyXField, keyYField) {
+        var _this = this;
+        /**
+         * 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(function (item) { return _this.add(item[keyXField], item[keyYField]); });
+        }
+    }
+    Object.defineProperty(PairSet.prototype, "size", {
+        /**
+         * Gets the total number of X/Y key pairs.
+         */
+        get: function () {
+            return this.totalKeysCount;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * Adds a couple of items identified as a combination.
+     */
+    PairSet.prototype.add = function (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.
+     */
+    PairSet.prototype.delete = function (keyX, keyY) {
+        if (this.has(keyX, keyY)) {
+            this.keysX.get(keyX).delete(keyY);
+            this.totalKeysCount -= 1;
+        }
+    };
+    /**
+     * Checks whether the defined combination is stored.
+     */
+    PairSet.prototype.has = function (keyX, keyY) {
+        return this.keysX.has(keyX) && this.keysX.get(keyX).has(keyY);
+    };
+    /**
+     * Clears all key combinations.
+     */
+    PairSet.prototype.clear = function () {
+        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.
+     */
+    PairSet.prototype.toArray = function (keyXField, keyYField) {
+        return Array.from(this.keysX).reduce(function (pairs, pair) {
+            // Array.from(mapInstance) returns an array of arrays [[itemKey1, columnKeysSet1], [itemKey2, columnKeysSet2]]
+            var keyX = pair[0], keysY = pair[1];
+            Array.from(keysY).forEach(function (keyY) {
+                var _a;
+                return pairs.push((_a = {}, _a[keyXField] = keyX, _a[keyYField] = keyY, _a));
+            });
+            return pairs;
+        }, []);
+    };
+    return PairSet;
+}());
+
 /**
  * @hidden
  */
@@ -5221,20 +5306,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
                 };
             };
@@ -5253,7 +5351,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) {
@@ -5290,45 +5389,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.getCellSelectionItemIndex = function (item) {
-        return this.selectedKeys.findIndex(function (selectedItem) {
-            return selectedItem.itemKey === item.itemKey && selectedItem.columnKey === item.columnKey;
-        });
+    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.stateToArray = function () {
+        return this.isCellSelectionMode ?
+            this.cellSelectionState.toArray('itemKey', 'columnKey') :
+            Array.from(this.rowSelectionState);
     };
     __decorate([
         Input(),
@@ -10741,9 +10844,12 @@ var ExpandDetailsDirective = /** @class */ (function () {
         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(function (e) { return (__assign({ expand: true }, e)); })), this.grid.detailCollapse.pipe(map(function (e) { return (__assign({ expand: false }, e)); }))).subscribe(this.toggleState.bind(this)));
@@ -10781,6 +10887,12 @@ var ExpandDetailsDirective = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    ExpandDetailsDirective.prototype.ngOnChanges = function (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);
+        }
+    };
     ExpandDetailsDirective.prototype.ngOnDestroy = function () {
         this.subscriptions.unsubscribe();
     };
@@ -10796,18 +10908,23 @@ var ExpandDetailsDirective = /** @class */ (function () {
      */
     ExpandDetailsDirective.prototype.isExpanded = function (args) {
         var key = this.keyGetter(args.dataItem);
-        return this.expandedDetailKeys.indexOf(key) > -1 ? !this.initiallyExpanded : this.initiallyExpanded;
+        var hasKey = this.expandedState.has(key);
+        // when [initiallyExpanded]="true" a present key means the corresponding detail row is collapsed
+        return this.initiallyExpanded ? !hasKey : hasKey;
     };
     ExpandDetailsDirective.prototype.toggleState = function (args) {
         var key = this.keyGetter(args.dataItem);
         if (Boolean(this.initiallyExpanded) !== args.expand) {
-            this.expandedDetailKeys.push(key);
+            this.expandedState.add(key);
         }
         else {
-            var index = this.expandedDetailKeys.indexOf(key);
-            this.expandedDetailKeys.splice(index, 1);
+            this.expandedState.delete(key);
         }
-        this.expandedDetailKeysChange.emit(this.expandedDetailKeys);
+        this.notifyChange();
+    };
+    ExpandDetailsDirective.prototype.notifyChange = function () {
+        this.lastExpandedState = Array.from(this.expandedState);
+        this.expandedDetailKeysChange.emit(this.lastExpandedState);
     };
     __decorate([
         Output(),

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1641921939,
+    publishDate: 1642155100,
     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/npm/rendering/details-expand.directive.js

@@ -27,9 +27,12 @@ var ExpandDetailsDirective = /** @class */ (function () {
         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 rxjs_1.Subscription();
         this.grid.isDetailExpanded = this.isExpanded.bind(this);
         this.subscriptions.add(rxjs_1.merge(this.grid.detailExpand.pipe(operators_1.map(function (e) { return (tslib_1.__assign({ expand: true }, e)); })), this.grid.detailCollapse.pipe(operators_1.map(function (e) { return (tslib_1.__assign({ expand: false }, e)); }))).subscribe(this.toggleState.bind(this)));
@@ -67,6 +70,12 @@ var ExpandDetailsDirective = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    ExpandDetailsDirective.prototype.ngOnChanges = function (changes) {
+        // skip reinitialization if the user data is the same as the last state change
+        if (utils_1.isPresent(changes.expandedDetailKeys) && this.lastExpandedState !== this.expandedDetailKeys) {
+            this.expandedState = new Set(this.expandedDetailKeys);
+        }
+    };
     ExpandDetailsDirective.prototype.ngOnDestroy = function () {
         this.subscriptions.unsubscribe();
     };
@@ -82,18 +91,23 @@ var ExpandDetailsDirective = /** @class */ (function () {
      */
     ExpandDetailsDirective.prototype.isExpanded = function (args) {
         var key = this.keyGetter(args.dataItem);
-        return this.expandedDetailKeys.indexOf(key) > -1 ? !this.initiallyExpanded : this.initiallyExpanded;
+        var hasKey = this.expandedState.has(key);
+        // when [initiallyExpanded]="true" a present key means the corresponding detail row is collapsed
+        return this.initiallyExpanded ? !hasKey : hasKey;
     };
     ExpandDetailsDirective.prototype.toggleState = function (args) {
         var key = this.keyGetter(args.dataItem);
         if (Boolean(this.initiallyExpanded) !== args.expand) {
-            this.expandedDetailKeys.push(key);
+            this.expandedState.add(key);
         }
         else {
-            var index = this.expandedDetailKeys.indexOf(key);
-            this.expandedDetailKeys.splice(index, 1);
+            this.expandedState.delete(key);
         }
-        this.expandedDetailKeysChange.emit(this.expandedDetailKeys);
+        this.notifyChange();
+    };
+    ExpandDetailsDirective.prototype.notifyChange = function () {
+        this.lastExpandedState = Array.from(this.expandedState);
+        this.expandedDetailKeysChange.emit(this.lastExpandedState);
     };
     tslib_1.__decorate([
         core_1.Output(),