igniteui-angular 12.3.27 → 12.3.30

package/bundles/igniteui-angular.umd.js

@@ -7464,8 +7464,8 @@
             if (isAddRow) {
                 this.endAddRow();
                 if (commit) {
-                    this.grid.rowAddedNotifier.next({ data: args.newValue });
-                    this.grid.rowAdded.emit({ data: args.newValue });
+                    this.grid.rowAddedNotifier.next({ data: args.newValue, owner: this.grid });
+                    this.grid.rowAdded.emit({ data: args.newValue, owner: this.grid });
                 }
             }
             return args;
@@ -7658,7 +7658,7 @@
             this.destroyMap = new Map();
         }
         GridBaseAPIService.prototype.get_column_by_name = function (name) {
-            return this.grid.columnList.find(function (col) { return col.field === name; });
+            return this.grid.columns.find(function (col) { return col.field === name; });
         };
         GridBaseAPIService.prototype.get_summary_data = function () {
             var grid = this.grid;
@@ -7930,8 +7930,7 @@
                 return;
             }
             var record = data[index];
-            // //  TODO: should we emit this when cascadeOnDelete is true for each row?!?!
-            grid.rowDeletedNotifier.next({ data: data[index] });
+            grid.rowDeletedNotifier.next({ data: data[index], owner: grid });
             this.deleteRowFromData(rowId, index);
             if (grid.selectionService.isRowSelected(rowId)) {
                 grid.selectionService.deselectRow(rowId);
@@ -11855,8 +11854,7 @@
         IgxColumnComponent.prototype.move = function (index) {
             var _this = this;
             var target;
-            var grid = this.grid;
-            var columns = grid.columnList.filter(function (c) { return c.visibleIndex > -1; });
+            var columns = this.grid.columns.filter(function (c) { return c.visibleIndex > -1; });
             // grid last visible index
             var li = columns.map(function (c) { return c.visibleIndex; }).reduce(function (a, b) { return Math.max(a, b); });
             var parent = this.parent;
@@ -11874,7 +11872,8 @@
             /* eslint-enable max-len */
             if (isPreceding) {
                 columns = columns.filter(function (c) { return c.visibleIndex > _this.visibleIndex; });
-                target = columns.find(function (c) { return c.level === _this.level && c.visibleIndex + c.calcChildren() - _this.calcChildren() === index; });
+                target = columns.find(function (c) { return c.level === _this.level &&
+                    c.visibleIndex + c.calcChildren() - _this.calcChildren() === index; });
             }
             else {
                 columns = columns.filter(function (c) { return c.visibleIndex < _this.visibleIndex; });
@@ -11884,7 +11883,7 @@
                 return;
             }
             var pos = isPreceding ? DropPosition.AfterDropTarget : DropPosition.BeforeDropTarget;
-            grid.moveColumn(this, target, pos);
+            this.grid.moveColumn(this, target, pos);
         };
         /**
          * No children for the column, so will returns 1 or 0, if the column is hidden.
@@ -12900,7 +12899,7 @@
                 throw Error('No options provided!');
             }
             this.options = options;
-            var columns = grid.columnList.toArray();
+            var columns = grid.columns;
             if (this.options.ignoreMultiColumnHeaders) {
                 columns = columns.filter(function (col) { return col.children === undefined; });
             }
@@ -13658,7 +13657,7 @@
                 columnList = this.getAutoGeneratedColumns(islandData);
             }
             else {
-                var islandColumnList = island.childColumns.toArray();
+                var islandColumnList = island.columns;
                 columnList = this.getColumns(islandColumnList);
             }
             this._ownersMap.set(island, columnList);
@@ -41503,7 +41502,7 @@
         };
         /** @hidden @internal */
         IgxSimpleComboComponent.prototype.onBlur = function () {
-            if (this.collapsed) {
+            if (this.collapsed && !this.selectedItem) {
                 this.clearOnBlur();
             }
             _super.prototype.onBlur.call(this);
@@ -49494,7 +49493,7 @@
                 this.removeSummaries(rowID);
             }
             if (args.rowID !== undefined && args.rowID !== null) {
-                var columnName = args.cellID ? this.grid.columnList.find(function (col) { return col.index === args.cellID.columnID; }).field : undefined;
+                var columnName = args.cellID ? this.grid.columns.find(function (col) { return col.index === args.cellID.columnID; }).field : undefined;
                 if (columnName && this.grid.rowEditable) {
                     return;
                 }
@@ -49552,7 +49551,7 @@
                 return this.summaryHeight = 0;
             }
             var maxSummaryLength = 0;
-            this.grid.columnList.filter(function (col) { return col.hasSummary && !col.hidden; }).forEach(function (column) {
+            this.grid.columns.filter(function (col) { return col.hasSummary && !col.hidden; }).forEach(function (column) {
                 var getCurrentSummaryColumn = column.summaries.operate([], [], column.field).length;
                 if (getCurrentSummaryColumn) {
                     if (maxSummaryLength < getCurrentSummaryColumn) {
@@ -49574,7 +49573,7 @@
             if (!this.hasSummarizedColumns || !data) {
                 return rowSummaries;
             }
-            this.grid.columnList.filter(function (col) { return col.hasSummary; }).forEach(function (column) {
+            this.grid.columns.filter(function (col) { return col.hasSummary; }).forEach(function (column) {
                 if (!rowSummaries.get(column.field)) {
                     var summaryResult = column.summaries.operate(data.map(function (r) { return resolveNestedPath(r, column.field); }), data, column.field, _this.grid.locale, column.pipeArgs);
                     rowSummaries.set(column.field, summaryResult);
@@ -49610,7 +49609,7 @@
         };
         Object.defineProperty(IgxGridSummaryService.prototype, "hasSummarizedColumns", {
             get: function () {
-                var summarizedColumns = this.grid.columnList.filter(function (col) { return col.hasSummary && !col.hidden; });
+                var summarizedColumns = this.grid.columns.filter(function (col) { return col.hasSummary && !col.hidden; });
                 return summarizedColumns.length > 0;
             },
             enumerable: false,
@@ -57140,8 +57139,8 @@
             get: function () {
                 if (this._maxLevelHeaderDepth === null) {
                     this._maxLevelHeaderDepth = this.hasColumnLayouts ?
-                        this.columnList.reduce(function (acc, col) { return Math.max(acc, col.rowStart); }, 0) :
-                        this.columnList.reduce(function (acc, col) { return Math.max(acc, col.level); }, 0);
+                        this._columns.reduce(function (acc, col) { return Math.max(acc, col.rowStart); }, 0) :
+                        this._columns.reduce(function (acc, col) { return Math.max(acc, col.level); }, 0);
                 }
                 return this._maxLevelHeaderDepth;
             },
@@ -57158,7 +57157,7 @@
              * ``
              */
             get: function () {
-                return this.columnList.filter(function (col) { return col.columnGroup === false && col.hidden === true; }).length;
+                return this._columns.filter(function (col) { return col.columnGroup === false && col.hidden === true; }).length;
             },
             enumerable: false,
             configurable: true
@@ -57978,8 +57977,8 @@
                 _this.notifyChanges(true);
                 _this.cdr.detectChanges();
             });
-            this.verticalScrollContainer.contentSizeChange.pipe(operators.filter(function () { return !_this._init; }), destructor).subscribe(function () {
-                _this.notifyChanges();
+            this.verticalScrollContainer.contentSizeChange.pipe(operators.filter(function () { return !_this._init; }), operators.throttleTime(30), destructor).subscribe(function () {
+                _this.notifyChanges(true);
             });
             this.onDensityChanged.pipe(destructor).subscribe(function () {
                 _this.crudService.endEdit(false);
@@ -58005,14 +58004,14 @@
          * @internal
          */
         IgxGridBaseDirective.prototype.resetColumnsCaches = function () {
-            this.columnList.forEach(function (column) { return column.resetCaches(); });
+            this._columns.forEach(function (column) { return column.resetCaches(); });
         };
         /**
          * @hidden @internal
          */
         IgxGridBaseDirective.prototype.generateRowID = function () {
             var _this = this;
-            var primaryColumn = this.columnList.find(function (col) { return col.field === _this.primaryKey; });
+            var primaryColumn = this._columns.find(function (col) { return col.field === _this.primaryKey; });
             var idType = this.data.length ?
                 this.resolveDataTypes(this.data[0][this.primaryKey]) : primaryColumn ? primaryColumn.dataType : 'string';
             return idType === 'string' ? uuid.v4() : FAKE_ROW_ID--;
@@ -58080,7 +58079,7 @@
             this.resetColumnCollections();
             this.resetCachedWidths();
             this.hasVisibleColumns = undefined;
-            this._columnGroups = this.columnList.some(function (col) { return col.columnGroup; });
+            this._columnGroups = this._columns.some(function (col) { return col.columnGroup; });
         };
         /**
          * @hidden
@@ -58315,7 +58314,7 @@
          * ```
          */
         IgxGridBaseDirective.prototype.toggleColumnVisibility = function (args) {
-            var col = args.column ? this.columnList.find(function (c) { return c === args.column; }) : undefined;
+            var col = args.column ? this._columns.find(function (c) { return c === args.column; }) : undefined;
             if (!col) {
                 return;
             }
@@ -58593,17 +58592,6 @@
             configurable: true
         });
         Object.defineProperty(IgxGridBaseDirective.prototype, "columns", {
-            /**
-             * @hidden
-             * @internal
-             */
-            get: function () {
-                return this._columns;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(IgxGridBaseDirective.prototype, "columnsCollection", {
             /**
              * Gets an array of `IgxColumnComponent`s.
              *
@@ -58613,7 +58601,7 @@
              * ```
              */
             get: function () {
-                return this._rendered ? this._columns : [];
+                return this._columns || [];
             },
             enumerable: false,
             configurable: true
@@ -58695,7 +58683,7 @@
          * @param name
          */
         IgxGridBaseDirective.prototype.getColumnByName = function (name) {
-            return this.columnList.find(function (col) { return col.field === name; });
+            return this._columns.find(function (col) { return col.field === name; });
         };
         IgxGridBaseDirective.prototype.getColumnByVisibleIndex = function (index) {
             return this.visibleColumns.find(function (col) { return !col.columnGroup && !col.columnLayout &&
@@ -58714,7 +58702,7 @@
                 if (this._visibleColumns.length) {
                     return this._visibleColumns;
                 }
-                this._visibleColumns = this.columnList.filter(function (c) { return !c.hidden; });
+                this._visibleColumns = this._columns.filter(function (c) { return !c.hidden; });
                 return this._visibleColumns;
             },
             enumerable: false,
@@ -58873,7 +58861,7 @@
              * @internal
              */
             get: function () {
-                return this.rowEditable && this.dataView.length === 0 && this.columns.length > 0;
+                return this.rowEditable && this.dataView.length === 0 && this._columns.length > 0;
             },
             enumerable: false,
             configurable: true
@@ -58884,7 +58872,7 @@
              * @internal
              */
             get: function () {
-                return this.rowDraggable && this.columns.length > this.hiddenColumnsCount;
+                return this.rowDraggable && this._columns.length > this.hiddenColumnsCount;
             },
             enumerable: false,
             configurable: true
@@ -58925,12 +58913,12 @@
                 var index = pos === DropPosition.AfterDropTarget ? unpinnedIndex + 1 : unpinnedIndex;
                 columnPinStateChanged = column.unpin(index);
             }
-            if (target.pinned && column.pinned && !columnPinStateChanged) {
-                this._reorderColumns(column, target, pos, this._pinnedColumns);
-            }
-            if (!target.pinned && !column.pinned && !columnPinStateChanged) {
-                this._reorderColumns(column, target, pos, this._unpinnedColumns);
-            }
+            // if (target.pinned && column.pinned && !columnPinStateChanged) {
+            //     this._reorderColumns(column, target, pos, this._pinnedColumns);
+            // }
+            // if (!target.pinned && !column.pinned && !columnPinStateChanged) {
+            //     this._reorderColumns(column, target, pos, this._unpinnedColumns);
+            // }
             this._moveColumns(column, target, pos);
             this._columnsReordered(column);
         };
@@ -58993,7 +58981,7 @@
             // commit pending states prior to adding a row
             this.crudService.endEdit(true);
             this.gridAPI.addRowToData(data);
-            this.rowAddedNotifier.next({ data: data });
+            this.rowAddedNotifier.next({ data: data, owner: this });
             this.pipeTrigger++;
             this.notifyChanges();
         };
@@ -59020,7 +59008,8 @@
                 rowID: rowId,
                 cancel: false,
                 rowData: this.getRowData(rowId),
-                oldValue: null
+                oldValue: null,
+                owner: this
             };
             this.rowDelete.emit(args);
             if (args.cancel) {
@@ -59028,8 +59017,7 @@
             }
             var record = this.gridAPI.deleteRowById(rowId);
             if (record !== null && record !== undefined) {
-                //  TODO: should we emit this when cascadeOnDelete is true for each row?!?!
-                this.rowDeleted.emit({ data: record });
+                this.rowDeleted.emit({ data: record, owner: this });
             }
             return record;
         };
@@ -59048,7 +59036,7 @@
          */
         IgxGridBaseDirective.prototype.updateCell = function (value, rowSelector, column) {
             if (this.isDefined(this.primaryKey)) {
-                var col = this.columnList.toArray().find(function (c) { return c.field === column; });
+                var col = this._columns.find(function (c) { return c.field === column; });
                 if (col) {
                     // Simplify
                     var rowData = this.gridAPI.getRowData(rowSelector);
@@ -59531,7 +59519,7 @@
              * ```
              */
             get: function () {
-                return this.columnList.some(function (col) { return col.sortable; });
+                return this._columns.some(function (col) { return col.sortable; });
             },
             enumerable: false,
             configurable: true
@@ -59546,7 +59534,7 @@
              * ```
              */
             get: function () {
-                return this.columnList.some(function (col) { return col.editable; });
+                return this._columns.some(function (col) { return col.editable; });
             },
             enumerable: false,
             configurable: true
@@ -59561,7 +59549,7 @@
              * ```
              */
             get: function () {
-                return this.columnList.some(function (col) { return col.filterable; });
+                return this._columns.some(function (col) { return col.filterable; });
             },
             enumerable: false,
             configurable: true
@@ -59576,7 +59564,7 @@
              * ```
              */
             get: function () {
-                var summarizedColumns = this.columnList.filter(function (col) { return col.hasSummary && !col.hidden; });
+                var summarizedColumns = this._columns.filter(function (col) { return col.hasSummary && !col.hidden; });
                 return summarizedColumns.length > 0;
             },
             enumerable: false,
@@ -59598,7 +59586,7 @@
              */
             get: function () {
                 if (this._hasVisibleColumns === undefined) {
-                    return this.columnList ? this.columnList.some(function (c) { return !c.hidden; }) : false;
+                    return this._columns ? this._columns.some(function (c) { return !c.hidden; }) : false;
                 }
                 return this._hasVisibleColumns;
             },
@@ -59618,7 +59606,7 @@
              * ```
              */
             get: function () {
-                return this.columnList && this.columnList.some(function (col) { return col.movable; });
+                return this.columns && this.columns.some(function (col) { return col.movable; });
             },
             enumerable: false,
             configurable: true
@@ -59648,7 +59636,7 @@
              * ```
              */
             get: function () {
-                return !!this.columnList.some(function (col) { return col.columnLayout; });
+                return !!this._columns.some(function (col) { return col.columnLayout; });
             },
             enumerable: false,
             configurable: true
@@ -60178,7 +60166,7 @@
          * ```
          */
         IgxGridBaseDirective.prototype.selectAllColumns = function () {
-            this.selectColumns(this.columnList.filter(function (c) { return !c.columnGroup; }));
+            this.selectColumns(this._columns.filter(function (c) { return !c.columnGroup; }));
         };
         /**
          *
@@ -60303,7 +60291,7 @@
             var _a;
             var totalItems = (_a = this.totalItemCount) !== null && _a !== void 0 ? _a : this.dataView.length - 1;
             if (rowIndex < 0 || rowIndex > totalItems || (visibleColIndex !== -1
-                && this.columnList.map(function (col) { return col.visibleIndex; }).indexOf(visibleColIndex) === -1)) {
+                && this._columns.map(function (col) { return col.visibleIndex; }).indexOf(visibleColIndex) === -1)) {
                 return;
             }
             if (this.dataView.slice(rowIndex, rowIndex + 1).find(function (rec) { return rec.expression || rec.childGridsData; })) {
@@ -60350,7 +60338,7 @@
          */
         IgxGridBaseDirective.prototype.getNextCell = function (currRowIndex, curVisibleColIndex, callback) {
             if (callback === void 0) { callback = null; }
-            var columns = this.columnList.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0; });
+            var columns = this._columns.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0; });
             var dataViewIndex = this._getDataViewIndex(currRowIndex);
             if (!this.isValidPosition(dataViewIndex, curVisibleColIndex)) {
                 return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
@@ -60386,7 +60374,7 @@
          */
         IgxGridBaseDirective.prototype.getPreviousCell = function (currRowIndex, curVisibleColIndex, callback) {
             if (callback === void 0) { callback = null; }
-            var columns = this.columnList.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0; });
+            var columns = this._columns.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0; });
             var dataViewIndex = this._getDataViewIndex(currRowIndex);
             if (!this.isValidPosition(dataViewIndex, curVisibleColIndex)) {
                 return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
@@ -60657,21 +60645,6 @@
                 console.warn('The row with the specified PK or index is outside of the current data view.');
             }
         };
-        /**
-         * Update internal column's collection.
-         *
-         * @hidden
-         */
-        IgxGridBaseDirective.prototype.updateColumns = function (newColumns) {
-            var _this = this;
-            // update internal collections to retain order.
-            this._pinnedColumns = newColumns
-                .filter(function (c) { return c.pinned; }).sort(function (a, b) { return _this._pinnedColumns.indexOf(a) - _this._pinnedColumns.indexOf(b); });
-            this._unpinnedColumns = newColumns.filter(function (c) { return !c.pinned; });
-            this.columnList.reset(newColumns);
-            this.columnList.notifyOnChanges();
-            this._columns = this.columnList.toArray();
-        };
         /**
          * Enters add mode by spawning the UI at the specified index.
          *
@@ -60689,6 +60662,19 @@
             }
             return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index - 1, this.dataView));
         };
+        /**
+         * Update internal column's collection.
+         *
+         * @hidden
+         */
+        IgxGridBaseDirective.prototype.updateColumns = function (newColumns) {
+            // update internal collections to retain order.
+            this._pinnedColumns = newColumns
+                .filter(function (c) { return c.pinned; });
+            this._unpinnedColumns = newColumns.filter(function (c) { return !c.pinned; });
+            this._columns = newColumns;
+            this.resetCaches();
+        };
         IgxGridBaseDirective.prototype.beginAddRowForIndex = function (index, asChild) {
             if (asChild === void 0) { asChild = false; }
             var row = index == null ?
@@ -60841,7 +60827,7 @@
             if (!this.columnWidthSetByUser) {
                 this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH + 'px';
             }
-            this.columnList.forEach(function (column) {
+            this._columns.forEach(function (column) {
                 if (_this.hasColumnLayouts && parseInt(_this._columnWidth, 10)) {
                     var columnWidthCombined = parseInt(_this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
                     column.defaultWidth = columnWidthCombined + 'px';
@@ -60893,7 +60879,8 @@
          * @hidden
          */
         IgxGridBaseDirective.prototype._moveColumns = function (from, to, pos) {
-            var list = this.columnList.toArray();
+            var orderedList = this._pinnedColumns.concat(this._unpinnedColumns);
+            var list = orderedList;
             this._reorderColumns(from, to, pos, list);
             var newList = this._resetColumnList(list);
             this.updateColumns(newList);
@@ -60903,7 +60890,7 @@
          */
         IgxGridBaseDirective.prototype._resetColumnList = function (list) {
             if (!list) {
-                list = this.columnList.toArray();
+                list = this._columns;
             }
             var newList = [];
             list.filter(function (c) { return c.level === 0; }).forEach(function (p) {
@@ -60950,7 +60937,10 @@
             if (this.autoGenerate) {
                 this.autogenerateColumns();
             }
-            this.initColumns(this.columnList, function (col) { return _this.columnInit.emit(col); });
+            else {
+                this._columns = this.getColumnList();
+            }
+            this.initColumns(this._columns, function (col) { return _this.columnInit.emit(col); });
             this.columnListDiffer.diff(this.columnList);
             this.columnList.changes
                 .pipe(operators.takeUntil(this.destroy$))
@@ -60958,6 +60948,9 @@
                 _this.onColumnsChanged(change);
             });
         };
+        IgxGridBaseDirective.prototype.getColumnList = function () {
+            return this.columnList.toArray();
+        };
         /**
          * @hidden
          */
@@ -61000,10 +60993,10 @@
         IgxGridBaseDirective.prototype.onColumnsChanged = function (change) {
             var _this = this;
             var diff = this.columnListDiffer.diff(change);
-            if (this.autoGenerate && this.columnList.length === 0 && this._autoGeneratedCols.length > 0) {
+            if (this.autoGenerate && this._columns.length === 0 && this._autoGeneratedCols.length > 0) {
                 // In Ivy if there are nested conditional templates the content children are re-evaluated
                 // hence autogenerated columns are cleared and need to be reset.
-                this.columnList.reset(this._autoGeneratedCols);
+                this.updateColumns(this._autoGeneratedCols);
                 return;
             }
             if (diff) {
@@ -61018,7 +61011,7 @@
                         _this._unpinnedColumns.push(record.item);
                     }
                 });
-                this.initColumns(this.columnList, function (col) { return _this.columnInit.emit(col); });
+                this.initColumns(this.columnList.toArray(), function (col) { return _this.columnInit.emit(col); });
                 diff.forEachRemovedItem(function (record) {
                     var isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                     if (!isColumnGroup) {
@@ -61233,10 +61226,12 @@
             this.tbody.nativeElement.style.display = 'none';
             var res = !this.nativeElement.parentElement ||
                 this.nativeElement.parentElement.clientHeight === 0 ||
-                this.nativeElement.parentElement.clientHeight === renderedHeight ||
+                this.nativeElement.parentElement.clientHeight === renderedHeight;
+            if (!this.platform.isChromium && !this.platform.isFirefox) {
                 // If grid causes the parent container to extend (for example when container is flex)
                 // we should always auto-size since the actual size of the container will continuously change as the grid renders elements.
-                this.checkContainerSizeChange();
+                res = this.checkContainerSizeChange();
+            }
             this.tbody.nativeElement.style.display = '';
             return res;
         };
@@ -61324,7 +61319,7 @@
                 columns.push(ref.instance);
             });
             this._autoGeneratedCols = columns;
-            this.columnList.reset(columns);
+            this.updateColumns(columns);
             if (data && data.length > 0) {
                 this.shouldGenerate = false;
             }
@@ -61352,10 +61347,10 @@
         IgxGridBaseDirective.prototype.initColumns = function (collection, cb) {
             var _this = this;
             if (cb === void 0) { cb = null; }
-            this._columnGroups = this.columnList.some(function (col) { return col.columnGroup; });
+            this._columnGroups = collection.some(function (col) { return col.columnGroup; });
             if (this.hasColumnLayouts) {
                 // Set overall row layout size
-                this.columnList.forEach(function (col) {
+                collection.forEach(function (col) {
                     if (col.columnLayout) {
                         var layoutSize = col.children ?
                             col.children.reduce(function (acc, val) { return Math.max(val.rowStart + val.gridRowSpan - 1, acc); }, 1) :
@@ -61367,18 +61362,17 @@
             if (this.hasColumnLayouts && this.hasColumnGroups) {
                 // invalid configuration - multi-row and column groups
                 // remove column groups
-                var columnLayoutColumns = this.columnList.filter(function (col) { return col.columnLayout || col.columnLayoutChild; });
-                this.columnList.reset(columnLayoutColumns);
+                var columnLayoutColumns = collection.filter(function (col) { return col.columnLayout || col.columnLayoutChild; });
+                collection = columnLayoutColumns;
             }
             this._maxLevelHeaderDepth = null;
-            this._columns = this.columnList.toArray();
             collection.forEach(function (column) {
                 column.defaultWidth = _this.columnWidthSetByUser ? _this._columnWidth : column.defaultWidth ? column.defaultWidth : '';
                 if (cb) {
                     cb(column);
                 }
             });
-            this.reinitPinStates();
+            this.updateColumns(collection);
             if (this.hasColumnLayouts) {
                 collection.forEach(function (column) {
                     column.populateVisibleIndexes();
@@ -61390,13 +61384,11 @@
          */
         IgxGridBaseDirective.prototype.reinitPinStates = function () {
             var _this = this;
-            this._pinnedColumns = this.columnList
-                .filter(function (c) { return c.pinned; })
-                .sort(function (a, b) { return _this._pinnedColumns.indexOf(a) - _this._pinnedColumns.indexOf(b); });
-            this._unpinnedColumns = this.hasColumnGroups ? this.columnList.filter(function (c) { return !c.pinned; }) :
-                this.columnList.filter(function (c) { return !c.pinned; })
-                    .sort(function (a, b) { return _this._unpinnedColumns.findIndex(function (x) { return x.field === a.field; }) -
-                    _this._unpinnedColumns.findIndex(function (x) { return x.field === b.field; }); });
+            this._pinnedColumns = this._columns
+                .filter(function (c) { return c.pinned; }).sort(function (a, b) { return _this._pinnedColumns.indexOf(a) - _this._pinnedColumns.indexOf(b); });
+            this._unpinnedColumns = this.hasColumnGroups ? this._columns.filter(function (c) { return !c.pinned; }) :
+                this._columns.filter(function (c) { return !c.pinned; })
+                    .sort(function (a, b) { return _this._unpinnedColumns.indexOf(a) - _this._unpinnedColumns.indexOf(b); });
         };
         IgxGridBaseDirective.prototype.extractDataFromSelection = function (source, formatters, headers, columnData) {
             var e_4, _h, e_5, _j, e_6, _k;
@@ -61785,7 +61777,7 @@
         IgxGridBaseDirective.prototype._columnsReordered = function (column) {
             this.notifyChanges();
             if (this.hasColumnLayouts) {
-                this.columns.filter(function (x) { return x.columnLayout; }).forEach(function (x) { return x.populateVisibleIndexes(); });
+                this._columns.filter(function (x) { return x.columnLayout; }).forEach(function (x) { return x.populateVisibleIndexes(); });
             }
             // after reordering is done reset cached column collections.
             this.resetColumnCollections();
@@ -61953,7 +61945,7 @@
         };
         IgxGridBaseDirective.prototype.isValidPosition = function (rowIndex, colIndex) {
             var rows = this.summariesRowList.filter(function (s) { return s.index !== 0; }).concat(this.rowList.toArray()).length;
-            var cols = this.columnList.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0 && !col.hidden; }).length;
+            var cols = this._columns.filter(function (col) { return !col.columnGroup && col.visibleIndex >= 0 && !col.hidden; }).length;
             if (rows < 1 || cols < 1) {
                 return false;
             }
@@ -62573,7 +62565,7 @@
             get: function () {
                 var _this = this;
                 var res = [];
-                this.grid.columnList.forEach(function (col) {
+                this.grid.columns.forEach(function (col) {
                     var cell = new IgxGridCell(_this.grid, _this.index, col.field);
                     res.push(cell);
                 });
@@ -62953,7 +62945,7 @@
             get: function () {
                 var _this = this;
                 var res = [];
-                this.grid.columnList.forEach(function (col) {
+                this.grid.columns.forEach(function (col) {
                     var cell = new IgxGridCell(_this.grid, _this.index, col.field);
                     res.push(cell);
                 });
@@ -69155,7 +69147,7 @@
                 col.visibleIndex > _this.activeNode.column && col.colStart > _this.activeNode.layout.colStart; });
             if (!column || (previous && this.activeNode.layout.colStart === 1)) {
                 var index_1 = previous ? parent.visibleIndex - 1 : parent.visibleIndex + 1;
-                var children = this.grid.columnList.find(function (cols) { return cols.columnLayout && cols.visibleIndex === index_1; }).children;
+                var children = this.grid.columns.find(function (cols) { return cols.columnLayout && cols.visibleIndex === index_1; }).children;
                 column = previous ? children.toArray().reverse().find(function (child) { return child.rowStart <= _this.activeNode.layout.rowStart; }) :
                     children.find(function (child) { return _this.rowEnd(child) > _this.activeNode.layout.rowStart && child.colStart === 1; });
             }
@@ -69637,7 +69629,7 @@
                     // setter called before grid is registered in grid API service
                     this.sortingExpressions.unshift.apply(this.sortingExpressions, this._groupingExpressions);
                 }
-                if (!this._init && JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this.columnList) {
+                if (!this._init && JSON.stringify(oldExpressions) !== JSON.stringify(newExpressions) && this._columns) {
                     var groupedCols_1 = [];
                     var ungroupedCols_1 = [];
                     var groupedColsArr = newExpressions.filter(function (obj) { return !oldExpressions.some(function (obj2) { return obj.fieldName === obj2.fieldName; }); });
@@ -69709,7 +69701,7 @@
                 else {
                     this.groupingDiffer = null;
                 }
-                if (this.columnList && this.groupingExpressions) {
+                if (this._columns && this.groupingExpressions) {
                     this._setGroupColsVisibility(value);
                 }
                 this._hideGroupedColumns = value;
@@ -69775,7 +69767,7 @@
         IgxGridComponent.prototype.getCellByColumnVisibleIndex = function (rowIndex, index) {
             var _a;
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.visibleIndex === index; });
+            var column = this._columns.find(function (col) { return col.visibleIndex === index; });
             if (row && row instanceof IgxGridRow && !((_a = row.data) === null || _a === void 0 ? void 0 : _a.detailsData) && column) {
                 return new IgxGridCell(this, rowIndex, column.field);
             }
@@ -70066,7 +70058,7 @@
              * ```
              */
             get: function () {
-                return this.columnList.some(function (col) { return col.groupable && !col.columnGroup; });
+                return this._columns.some(function (col) { return col.groupable && !col.columnGroup; });
             },
             enumerable: false,
             configurable: true
@@ -70207,7 +70199,7 @@
                 this._groupRowTemplate = this.groupTemplate.template;
             }
             this.detailTemplate.changes.subscribe(function () { return _this.trackChanges = function (_, rec) { return ((rec === null || rec === void 0 ? void 0 : rec.detailsData) !== undefined ? rec.detailsData : rec); }; });
-            if (this.hideGroupedColumns && this.columnList && this.groupingExpressions) {
+            if (this.hideGroupedColumns && this._columns && this.groupingExpressions) {
                 this._setGroupColsVisibility(this.hideGroupedColumns);
             }
             this._setupNavigationService();
@@ -70258,9 +70250,9 @@
          */
         IgxGridComponent.prototype.ngDoCheck = function () {
             var _this = this;
-            if (this.groupingDiffer && this.columnList && !this.hasColumnLayouts) {
+            if (this.groupingDiffer && this._columns && !this.hasColumnLayouts) {
                 var changes = this.groupingDiffer.diff(this.groupingExpressions);
-                if (changes && this.columnList.length > 0) {
+                if (changes && this._columns.length > 0) {
                     changes.forEachAddedItem(function (rec) {
                         var col = _this.getColumnByName(rec.item.fieldName);
                         if (col) {
@@ -70403,7 +70395,7 @@
         IgxGridComponent.prototype.getCellByColumn = function (rowIndex, columnField) {
             var _a;
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this._columns.find(function (col) { return col.field === columnField; });
             if (row && row instanceof IgxGridRow && !((_a = row.data) === null || _a === void 0 ? void 0 : _a.detailsData) && column) {
                 if (this.pagingMode === 1 && this.gridAPI.grid.page !== 0) {
                     row.index = rowIndex + this.paginator.perPage * this.paginator.page;
@@ -70425,7 +70417,7 @@
          */
         IgxGridComponent.prototype.getCellByKey = function (rowSelector, columnField) {
             var row = this.getRowByKey(rowSelector);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this._columns.find(function (col) { return col.field === columnField; });
             if (row && column) {
                 return new IgxGridCell(this, row.index, columnField);
             }
@@ -70542,7 +70534,7 @@
         };
         IgxGridComponent.prototype._setGroupColsVisibility = function (value) {
             var _this = this;
-            if (this.columnList.length > 0 && !this.hasColumnLayouts) {
+            if (this._columns.length > 0 && !this.hasColumnLayouts) {
                 this.groupingExpressions.forEach(function (expr) {
                     var col = _this.getColumnByName(expr.fieldName);
                     col.hidden = value;
@@ -70756,6 +70748,9 @@
                             }
                         });
                         context.grid.updateColumns(newColumns);
+                        newColumns.forEach(function (col) {
+                            context.grid.columnInit.emit(col);
+                        });
                     }
                 },
                 groupBy: {
@@ -71002,17 +70997,14 @@
          * The method that calls corresponding methods to restore features from the passed IGridState object.
          */
         IgxGridStateDirective.prototype.restoreGridState = function (state, features) {
-            var _this = this;
             // TODO Notify the grid that columnList.changes is triggered by the state directive
             // instead of piping it like below
             var columns = 'columns';
-            this.grid.columnList.changes.pipe(operators.delay(0), operators.take(1)).subscribe(function () {
-                _this.featureKeys = _this.featureKeys.filter(function (f) { return f !== columns; });
-                _this.restoreFeatures(state);
-            });
             this.applyFeatures(features);
             if (this.featureKeys.includes(columns) && this.options[columns] && state[columns]) {
                 this.getFeature(columns).restoreFeatureState(this, state[columns]);
+                this.featureKeys = this.featureKeys.filter(function (f) { return f !== columns; });
+                this.restoreFeatures(state);
             }
             else {
                 this.restoreFeatures(state);
@@ -71076,8 +71068,8 @@
                 else {
                     var expr_1 = item;
                     var dataType = void 0;
-                    if (this_1.currGrid.columnList.length > 0) {
-                        dataType = this_1.currGrid.columnList.find(function (c) { return c.field === expr_1.fieldName; }).dataType;
+                    if (this_1.currGrid.columns.length > 0) {
+                        dataType = this_1.currGrid.columns.find(function (c) { return c.field === expr_1.fieldName; }).dataType;
                     }
                     else if (this_1.state.columns) {
                         dataType = this_1.state.columns.find(function (c) { return c.field === expr_1.fieldName; }).dataType;
@@ -71132,6 +71124,9 @@
                 case GridColumnDataType.Date:
                     filters = IgxDateFilteringOperand.instance();
                     break;
+                case GridColumnDataType.DateTime:
+                    filters = IgxDateTimeFilteringOperand.instance();
+                    break;
                 case GridColumnDataType.String:
                 default:
                     filters = IgxStringFilteringOperand.instance();
@@ -73439,7 +73434,7 @@
                 return this._hideGroupedColumns;
             },
             set: function (value) {
-                if (this.grid.columnList && this.expressions) {
+                if (this.grid.columns && this.expressions) {
                     this.setColumnsVisibility(value);
                 }
                 this._hideGroupedColumns = value;
@@ -73449,7 +73444,7 @@
         });
         IgxTreeGridGroupByAreaComponent.prototype.ngAfterContentInit = function () {
             var _this = this;
-            if (this.grid.columnList && this.expressions) {
+            if (this.grid.columns && this.expressions) {
                 this.groupingDiffer = this.differs.find(this.expressions).create();
                 this.updateColumnsVisibility();
             }
@@ -73529,9 +73524,9 @@
         };
         IgxTreeGridGroupByAreaComponent.prototype.updateColumnsVisibility = function () {
             var _this = this;
-            if (this.groupingDiffer && this.grid.columnList && !this.grid.hasColumnLayouts) {
+            if (this.groupingDiffer && this.grid.columns && !this.grid.hasColumnLayouts) {
                 var changes = this.groupingDiffer.diff(this.expressions);
-                if (changes && this.grid.columnList.length > 0) {
+                if (changes && this.grid.columns.length > 0) {
                     changes.forEachAddedItem(function (rec) {
                         var col = _this.grid.getColumnByName(rec.item.fieldName);
                         col.hidden = _this.hideGroupedColumns;
@@ -73545,7 +73540,7 @@
         };
         IgxTreeGridGroupByAreaComponent.prototype.setColumnsVisibility = function (value) {
             var _this = this;
-            if (this.grid.columnList.length > 0 && !this.grid.hasColumnLayouts) {
+            if (this.grid.columns.length > 0 && !this.grid.hasColumnLayouts) {
                 this.expressions.forEach(function (expr) {
                     var col = _this.grid.getColumnByName(expr.fieldName);
                     col.hidden = value;
@@ -73796,7 +73791,7 @@
          */
         IgxTreeGridComponent.prototype.getCellByColumnVisibleIndex = function (rowIndex, index) {
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.visibleIndex === index; });
+            var column = this.columns.find(function (col) { return col.visibleIndex === index; });
             if (row && row instanceof IgxTreeGridRow && column) {
                 return new IgxGridCell(this, rowIndex, column.field);
             }
@@ -73952,7 +73947,7 @@
         IgxTreeGridComponent.prototype.addRow = function (data, parentRowID) {
             this.crudService.endEdit(true);
             this.gridAPI.addRowToData(data, parentRowID);
-            this.rowAddedNotifier.next({ data: data });
+            this.rowAddedNotifier.next({ data: data, owner: this });
             this.pipeTrigger++;
             this.notifyChanges();
         };
@@ -74062,7 +74057,22 @@
             //  if this is flat self-referencing data, and CascadeOnDelete is set to true
             //  and if we have transactions we should start pending transaction. This allows
             //  us in case of delete action to delete all child rows as single undo action
-            return this._gridAPI.deleteRowById(rowId);
+            var args = {
+                rowID: rowId,
+                cancel: false,
+                rowData: this.getRowData(rowId),
+                oldValue: null,
+                owner: this
+            };
+            this.rowDelete.emit(args);
+            if (args.cancel) {
+                return;
+            }
+            var record = this.gridAPI.deleteRowById(rowId);
+            if (record !== null && record !== undefined) {
+                this.rowDeleted.emit({ data: record, owner: this });
+            }
+            return record;
         };
         /**
          * Returns the `IgxTreeGridRow` by index.
@@ -74143,7 +74153,7 @@
          */
         IgxTreeGridComponent.prototype.getCellByColumn = function (rowIndex, columnField) {
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this.columns.find(function (col) { return col.field === columnField; });
             if (row && row instanceof IgxTreeGridRow && column) {
                 return new IgxGridCell(this, rowIndex, columnField);
             }
@@ -74162,7 +74172,7 @@
          */
         IgxTreeGridComponent.prototype.getCellByKey = function (rowSelector, columnField) {
             var row = this.getRowByKey(rowSelector);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this.columns.find(function (col) { return col.field === columnField; });
             if (row && column) {
                 return new IgxGridCell(this, row.index, columnField);
             }
@@ -74222,7 +74232,7 @@
              * ```
              */
             get: function () {
-                return this.columnList.some(function (col) { return col.groupable && !col.columnGroup; });
+                return this.columns.some(function (col) { return col.groupable && !col.columnGroup; });
             },
             enumerable: false,
             configurable: true
@@ -74319,8 +74329,8 @@
             if (this.hasColumnLayouts) {
                 // invalid configuration - tree grid should not allow column layouts
                 // remove column layouts
-                var nonColumnLayoutColumns = this.columnList.filter(function (col) { return !col.columnLayout && !col.columnLayoutChild; });
-                this.columnList.reset(nonColumnLayoutColumns);
+                var nonColumnLayoutColumns = this.columns.filter(function (col) { return !col.columnLayout && !col.columnLayoutChild; });
+                this.updateColumns(nonColumnLayoutColumns);
             }
             _super.prototype.initColumns.call(this, collection, cb);
         };
@@ -74454,6 +74464,7 @@
                         { provide: GridBaseAPIService, useClass: IgxTreeGridAPIService },
                         { provide: IgxGridBaseDirective, useExisting: i0.forwardRef(function () { return IgxTreeGridComponent; }) },
                         IgxFilteringService,
+                        IgxColumnResizingService,
                         IgxForOfSyncService,
                         IgxForOfScrollSyncService
                     ]
@@ -76103,7 +76114,7 @@
              */
             get: function () {
                 if (this._maxLevelHeaderDepth === null) {
-                    this._maxLevelHeaderDepth = this.columnList.reduce(function (acc, col) { return Math.max(acc, col.level); }, 0);
+                    this._maxLevelHeaderDepth = this.columns.reduce(function (acc, col) { return Math.max(acc, col.level); }, 0);
                 }
                 return this._maxLevelHeaderDepth;
             },
@@ -76158,13 +76169,12 @@
                 columns.push(ref.instance);
             });
             var result = flatten(columns);
-            this.columnList.reset(result);
-            this.columnList.notifyOnChanges();
+            this.updateColumns(result);
             this.initPinning();
             var factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
             var outputs = factoryColumn.outputs.filter(function (o) { return o.propName !== 'columnChange'; });
             outputs.forEach(function (output) {
-                _this.columnList.forEach(function (column) {
+                _this.columns.forEach(function (column) {
                     if (column[output.propName]) {
                         column[output.propName].pipe(operators.takeUntil(column.destroy$)).subscribe(function (args) {
                             var rowIslandColumn = _this.parentIsland.childColumns.find(function (col) { return col.field === column.field; });
@@ -76522,6 +76532,7 @@
              * @hidden
              */
             _this.rootGrid = null;
+            _this._childColumns = [];
             _this.layout_id = "igx-row-island-";
             _this.isInit = false;
             _this.hgridAPI = gridAPI;
@@ -76632,7 +76643,8 @@
             var nestedColumns = this.children.map(function (layout) { return layout.columnList.toArray(); });
             var colsArray = [].concat.apply([], nestedColumns);
             var topCols = this.columnList.filter(function (item) { return colsArray.indexOf(item) === -1; });
-            this.childColumns.reset(topCols);
+            this._childColumns = topCols;
+            this.updateColumns(this._childColumns);
             this.columnList.changes.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
                 Promise.resolve().then(function () {
                     _this.updateColumnList();
@@ -76640,7 +76652,7 @@
             });
             // handle column changes so that they are passed to child grid instances when columnChange is emitted.
             this.ri_columnListDiffer.diff(this.childColumns);
-            this.childColumns.toArray().forEach(function (x) { return x.columnChange.pipe(operators.takeUntil(x.destroy$)).subscribe(function () { return _this.updateColumnList(); }); });
+            this._childColumns.forEach(function (x) { return x.columnChange.pipe(operators.takeUntil(x.destroy$)).subscribe(function () { return _this.updateColumnList(); }); });
             this.childColumns.changes.pipe(operators.takeUntil(this.destroy$)).subscribe(function (change) {
                 var diff = _this.ri_columnListDiffer.diff(change);
                 if (diff) {
@@ -76735,15 +76747,9 @@
                 }
                 return false;
             });
-            this.childColumns.reset(topCols);
-            if (this.parentIsland) {
-                this.parentIsland.columnList.notifyOnChanges();
-            }
-            else {
-                this.rootGrid.columnList.notifyOnChanges();
-            }
+            this._childColumns = topCols;
             this.rowIslandAPI.getChildGrids().forEach(function (grid) {
-                grid.createColumnsList(_this.childColumns.toArray());
+                grid.createColumnsList(_this._childColumns);
                 if (!document.body.contains(grid.nativeElement)) {
                     grid.updateOnRender = true;
                 }
@@ -77011,7 +77017,7 @@
          */
         IgxHierarchicalGridComponent.prototype.getCellByColumnVisibleIndex = function (rowIndex, index) {
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.visibleIndex === index; });
+            var column = this.columns.find(function (col) { return col.visibleIndex === index; });
             if (row && row instanceof IgxHierarchicalGridRow && column) {
                 return new IgxGridCell(this, rowIndex, column.field);
             }
@@ -77270,7 +77276,7 @@
          */
         IgxHierarchicalGridComponent.prototype.getCellByColumn = function (rowIndex, columnField) {
             var row = this.getRowByIndex(rowIndex);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this.columns.find(function (col) { return col.field === columnField; });
             if (row && row instanceof IgxHierarchicalGridRow && column) {
                 return new IgxGridCell(this, rowIndex, columnField);
             }
@@ -77289,7 +77295,7 @@
          */
         IgxHierarchicalGridComponent.prototype.getCellByKey = function (rowSelector, columnField) {
             var row = this.getRowByKey(rowSelector);
-            var column = this.columnList.find(function (col) { return col.field === columnField; });
+            var column = this.columns.find(function (col) { return col.field === columnField; });
             if (row && column) {
                 return new IgxGridCell(this, row.index, columnField);
             }
@@ -77575,8 +77581,8 @@
             if (this.hasColumnLayouts) {
                 // invalid configuration - hierarchical grid should not allow column layouts
                 // remove column layouts
-                var nonColumnLayoutColumns = this.columnList.filter(function (col) { return !col.columnLayout && !col.columnLayoutChild; });
-                this.columnList.reset(nonColumnLayoutColumns);
+                var nonColumnLayoutColumns = this.columns.filter(function (col) { return !col.columnLayout && !col.columnLayoutChild; });
+                this.updateColumns(nonColumnLayoutColumns);
             }
             _super.prototype.initColumns.call(this, collection, cb);
         };
@@ -77584,17 +77590,26 @@
             if (this.parentIsland && this.parentIsland.childColumns.length > 0 && !this.autoGenerate) {
                 this.createColumnsList(this.parentIsland.childColumns.toArray());
             }
-            _super.prototype.setupColumns.call(this);
+            else {
+                _super.prototype.setupColumns.call(this);
+            }
+        };
+        IgxHierarchicalGridComponent.prototype.getColumnList = function () {
+            var childLayouts = this.parent ? this.childLayoutList : this.allLayoutList;
+            var nestedColumns = childLayouts.map(function (layout) { return layout.columnList.toArray(); });
+            var colsArray = [].concat.apply([], nestedColumns);
+            if (colsArray.length > 0) {
+                var topCols = this.columnList.filter(function (item) { return colsArray.indexOf(item) === -1; });
+                return topCols;
+            }
+            else {
+                return this.columnList.toArray();
+            }
         };
         IgxHierarchicalGridComponent.prototype.onColumnsChanged = function (change) {
             var _this = this;
             Promise.resolve().then(function () {
                 _this.updateColumnList();
-                var cols = change.filter(function (c) { return c.gridAPI.grid === _this; });
-                if (cols.length > 0 || _this.autoGenerate) {
-                    _this.columnList.reset(cols);
-                    _super.prototype.onColumnsChanged.call(_this, _this.columnList);
-                }
             });
         };
         IgxHierarchicalGridComponent.prototype._shouldAutoSize = function (renderedHeight) {
@@ -77611,8 +77626,8 @@
             var colLength = this.columnList.length;
             if (colsArray.length > 0) {
                 var topCols = this.columnList.filter(function (item) { return colsArray.indexOf(item) === -1; });
-                this.columnList.reset(topCols);
-                if (recalcColSizes && this.columnList.length !== colLength) {
+                this.updateColumns(topCols);
+                if (recalcColSizes && this.columns.length !== colLength) {
                     this.calculateGridSizes(false);
                 }
             }
@@ -77646,6 +77661,7 @@
                         { provide: GridBaseAPIService, useClass: IgxHierarchicalGridAPIService },
                         { provide: IgxGridBaseDirective, useExisting: i0.forwardRef(function () { return IgxHierarchicalGridComponent; }) },
                         IgxGridSummaryService,
+                        IgxColumnResizingService,
                         IgxFilteringService,
                         IgxHierarchicalGridNavigationService,
                         IgxForOfSyncService,
@@ -82889,17 +82905,75 @@
             this.overflow = 'auto';
             /**
              * @hidden @internal
-             * Gets/Sets the `minHeight` and `minWidth` properties of the current pane.
+             * Get/Sets the `minWidth` properties of the current pane.
+             */
+            this.minWidth = '0';
+            /**
+             * @hidden @internal
+             * Get/Sets the `maxWidth` properties of the current pane.
              */
-            this.minHeight = 0;
+            this.maxWidth = '100%';
             /**
              * @hidden @internal
-             * Gets/Sets the `maxHeight` and `maxWidth` properties of the current `IgxSplitterPaneComponent`.
+             * Gets/Sets the `minHeight` properties of the current pane.
+             */
+            this.minHeight = '0';
+            /**
+             * @hidden @internal
+             * Gets/Sets the `maxHeight` properties of the current `IgxSplitterPaneComponent`.
              */
             this.maxHeight = '100%';
             this._size = 'auto';
             this._collapsed = false;
         }
+        Object.defineProperty(IgxSplitterPaneComponent.prototype, "minSize", {
+            /**
+             * Gets/Sets the minimum allowed size of the current pane.
+             *
+             * @example
+             * ```html
+             * <igx-splitter>
+             *  <igx-splitter-pane [minSize]='minSize'>...</igx-splitter-pane>
+             * </igx-splitter>
+             * ```
+             */
+            get: function () {
+                return this._minSize;
+            },
+            set: function (value) {
+                this._minSize = value;
+                if (this.owner) {
+                    this.owner.panes.notifyOnChanges();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
+        Object.defineProperty(IgxSplitterPaneComponent.prototype, "maxSize", {
+            /**
+             * Gets/Set the maximum allowed size of the current pane.
+             *
+             * @example
+             * ```html
+             * <igx-splitter>
+             *  <igx-splitter-pane [maxSize]='maxSize'>...</igx-splitter-pane>
+             * </igx-splitter>
+             * ```
+             */
+            get: function () {
+                return this._maxSize;
+            },
+            set: function (value) {
+                this._maxSize = value;
+                if (this.owner) {
+                    this.owner.panes.notifyOnChanges();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
         Object.defineProperty(IgxSplitterPaneComponent.prototype, "size", {
             /**
              * Gets/Sets the size of the current pane.
@@ -83036,8 +83110,10 @@
         collapsedChange: [{ type: i0.Output }],
         order: [{ type: i0.HostBinding, args: ['style.order',] }],
         overflow: [{ type: i0.HostBinding, args: ['style.overflow',] }],
-        minHeight: [{ type: i0.HostBinding, args: ['style.min-height',] }, { type: i0.HostBinding, args: ['style.min-width',] }],
-        maxHeight: [{ type: i0.HostBinding, args: ['style.max-height',] }, { type: i0.HostBinding, args: ['style.max-width',] }],
+        minWidth: [{ type: i0.HostBinding, args: ['style.min-width',] }],
+        maxWidth: [{ type: i0.HostBinding, args: ['style.max-width',] }],
+        minHeight: [{ type: i0.HostBinding, args: ['style.min-height',] }],
+        maxHeight: [{ type: i0.HostBinding, args: ['style.max-height',] }],
         size: [{ type: i0.Input }],
         flex: [{ type: i0.HostBinding, args: ['style.flex',] }],
         collapsed: [{ type: i0.Input }]
@@ -83139,8 +83215,10 @@
                 return this._type;
             },
             set: function (value) {
+                var _a;
                 this._type = value;
                 this.resetPaneSizes();
+                (_a = this.panes) === null || _a === void 0 ? void 0 : _a.notifyOnChanges();
             },
             enumerable: false,
             configurable: true
@@ -83254,7 +83332,18 @@
          */
         IgxSplitterComponent.prototype.initPanes = function () {
             var _this = this;
-            this.panes.forEach(function (pane) { return pane.owner = _this; });
+            this.panes.forEach(function (pane) {
+                var _a, _b, _c, _d;
+                pane.owner = _this;
+                if (_this.type === exports.SplitterType.Horizontal) {
+                    pane.minWidth = (_a = pane.minSize) !== null && _a !== void 0 ? _a : '0';
+                    pane.maxWidth = (_b = pane.maxSize) !== null && _b !== void 0 ? _b : '100%';
+                }
+                else {
+                    pane.minHeight = (_c = pane.minSize) !== null && _c !== void 0 ? _c : '0';
+                    pane.maxHeight = (_d = pane.maxSize) !== null && _d !== void 0 ? _d : '100%';
+                }
+            });
             this.assignFlexOrder();
             if (this.panes.filter(function (x) { return x.collapsed; }).length > 0) {
                 // if any panes are collapsed, reset sizes.
@@ -83268,7 +83357,13 @@
         IgxSplitterComponent.prototype.resetPaneSizes = function () {
             if (this.panes) {
                 // if type is changed runtime, should reset sizes.
-                this.panes.forEach(function (x) { return x.size = 'auto'; });
+                this.panes.forEach(function (x) {
+                    x.size = 'auto';
+                    x.minWidth = '0';
+                    x.maxWidth = '100%';
+                    x.minHeight = '0';
+                    x.maxHeight = '100%';
+                });
             }
         };
         /**
@@ -86087,6 +86182,35 @@
                     selector: '[igxTreeExpandIndicator]'
                 },] }
     ];
+    /**
+     * IgxTreeComponent allows a developer to show a set of nodes in a hierarchical fashion.
+     *
+     * @igxModule IgxTreeModule
+     * @igxKeywords tree
+     * @igxTheme igx-tree-theme
+     * @igxGroup Grids & Lists
+     *
+     * @remark
+     * The Angular Tree Component allows users to represent hierarchical data in a tree-view structure,
+     * maintaining parent-child relationships, as well as to define static tree-view structure without a corresponding data model.
+     * Its primary purpose is to allow end-users to visualize and navigate within hierarchical data structures.
+     * The Ignite UI for Angular Tree Component also provides load on demand capabilities, item activation,
+     * bi-state and cascading selection of items through built-in checkboxes, built-in keyboard navigation and more.
+     *
+     * @example
+     * ```html
+     * <igx-tree>
+     *   <igx-tree-node>
+     *      I am a parent node 1
+     *      <igx-tree-node>
+     *          I am a child node 1
+     *      </igx-tree-node>
+     *      ...
+     *   </igx-tree-node>
+     *	 ...
+     * </igx-tree>
+     * ```
+     */
     var IgxTreeComponent = /** @class */ (function (_super) {
         __extends(IgxTreeComponent, _super);
         function IgxTreeComponent(navService, selectionService, treeService, element, _displayDensityOptions) {