igniteui-angular 12.3.27 → 12.3.30

package/fesm2015/igniteui-angular.js

@@ -6,7 +6,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, NgModel, F
 import * as i2 from '@angular/common';
 import { isPlatformBrowser, CommonModule, DOCUMENT, DatePipe, formatDate, FormatWidth, getLocaleDateFormat, getLocaleCurrencyCode, DecimalPipe, CurrencyPipe, PercentPipe, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
 import { Observable, noop, Subject, fromEvent, interval, animationFrameScheduler, merge, pipe, Subscription, timer } from 'rxjs';
-import { throttleTime, takeUntil, filter, first as first$1, take, throttle, debounce, tap, switchMap, skipLast, map, shareReplay, takeWhile, debounceTime, delay, pluck } from 'rxjs/operators';
+import { throttleTime, takeUntil, filter, first as first$1, take, throttle, debounce, tap, switchMap, skipLast, map, shareReplay, takeWhile, debounceTime, pluck } from 'rxjs/operators';
 import mergeWith from 'lodash.mergewith';
 import { ResizeObserver } from '@juggle/resize-observer';
 import { __decorate, __awaiter } from 'tslib';
@@ -6703,8 +6703,8 @@ class IgxRowAddCrudState extends IgxRowCrudState {
         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;
@@ -6885,7 +6885,7 @@ class GridBaseAPIService {
         this.destroyMap = new Map();
     }
     get_column_by_name(name) {
-        return this.grid.columnList.find((col) => col.field === name);
+        return this.grid.columns.find((col) => col.field === name);
     }
     get_summary_data() {
         const grid = this.grid;
@@ -7145,8 +7145,7 @@ class GridBaseAPIService {
             return;
         }
         const 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);
@@ -10627,8 +10626,7 @@ class IgxColumnComponent {
      */
     move(index) {
         let target;
-        const grid = this.grid;
-        let columns = grid.columnList.filter(c => c.visibleIndex > -1);
+        let columns = this.grid.columns.filter(c => c.visibleIndex > -1);
         // grid last visible index
         const li = columns.map(c => c.visibleIndex).reduce((a, b) => Math.max(a, b));
         const parent = this.parent;
@@ -10646,7 +10644,8 @@ class IgxColumnComponent {
         /* eslint-enable max-len */
         if (isPreceding) {
             columns = columns.filter(c => c.visibleIndex > this.visibleIndex);
-            target = columns.find(c => c.level === this.level && c.visibleIndex + c.calcChildren() - this.calcChildren() === index);
+            target = columns.find(c => c.level === this.level &&
+                c.visibleIndex + c.calcChildren() - this.calcChildren() === index);
         }
         else {
             columns = columns.filter(c => c.visibleIndex < this.visibleIndex);
@@ -10656,7 +10655,7 @@ class IgxColumnComponent {
             return;
         }
         const 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.
@@ -11570,7 +11569,7 @@ class IgxBaseExporter {
             throw Error('No options provided!');
         }
         this.options = options;
-        let columns = grid.columnList.toArray();
+        let columns = grid.columns;
         if (this.options.ignoreMultiColumnHeaders) {
             columns = columns.filter(col => col.children === undefined);
         }
@@ -12202,7 +12201,7 @@ class IgxBaseExporter {
             columnList = this.getAutoGeneratedColumns(islandData);
         }
         else {
-            const islandColumnList = island.childColumns.toArray();
+            const islandColumnList = island.columns;
             columnList = this.getColumns(islandColumnList);
         }
         this._ownersMap.set(island, columnList);
@@ -37287,7 +37286,7 @@ class IgxSimpleComboComponent extends IgxComboBaseDirective {
     }
     /** @hidden @internal */
     onBlur() {
-        if (this.collapsed) {
+        if (this.collapsed && !this.selectedItem) {
             this.clearOnBlur();
         }
         super.onBlur();
@@ -44525,7 +44524,7 @@ class IgxGridSummaryService {
             this.removeSummaries(rowID);
         }
         if (args.rowID !== undefined && args.rowID !== null) {
-            let columnName = args.cellID ? this.grid.columnList.find(col => col.index === args.cellID.columnID).field : undefined;
+            let columnName = args.cellID ? this.grid.columns.find(col => col.index === args.cellID.columnID).field : undefined;
             if (columnName && this.grid.rowEditable) {
                 return;
             }
@@ -44582,7 +44581,7 @@ class IgxGridSummaryService {
             return this.summaryHeight = 0;
         }
         let maxSummaryLength = 0;
-        this.grid.columnList.filter((col) => col.hasSummary && !col.hidden).forEach((column) => {
+        this.grid.columns.filter((col) => col.hasSummary && !col.hidden).forEach((column) => {
             const getCurrentSummaryColumn = column.summaries.operate([], [], column.field).length;
             if (getCurrentSummaryColumn) {
                 if (maxSummaryLength < getCurrentSummaryColumn) {
@@ -44603,7 +44602,7 @@ class IgxGridSummaryService {
         if (!this.hasSummarizedColumns || !data) {
             return rowSummaries;
         }
-        this.grid.columnList.filter(col => col.hasSummary).forEach((column) => {
+        this.grid.columns.filter(col => col.hasSummary).forEach((column) => {
             if (!rowSummaries.get(column.field)) {
                 const summaryResult = column.summaries.operate(data.map(r => resolveNestedPath(r, column.field)), data, column.field, this.grid.locale, column.pipeArgs);
                 rowSummaries.set(column.field, summaryResult);
@@ -44637,7 +44636,7 @@ class IgxGridSummaryService {
         this.groupingExpressions = groupingArgs.expressions.map(record => record.fieldName);
     }
     get hasSummarizedColumns() {
-        const summarizedColumns = this.grid.columnList.filter(col => col.hasSummary && !col.hidden);
+        const summarizedColumns = this.grid.columns.filter(col => col.hasSummary && !col.hidden);
         return summarizedColumns.length > 0;
     }
     deleteSummaryCache(id, columnName) {
@@ -51028,8 +51027,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     get maxLevelHeaderDepth() {
         if (this._maxLevelHeaderDepth === null) {
             this._maxLevelHeaderDepth = this.hasColumnLayouts ?
-                this.columnList.reduce((acc, col) => Math.max(acc, col.rowStart), 0) :
-                this.columnList.reduce((acc, col) => Math.max(acc, col.level), 0);
+                this._columns.reduce((acc, col) => Math.max(acc, col.rowStart), 0) :
+                this._columns.reduce((acc, col) => Math.max(acc, col.level), 0);
         }
         return this._maxLevelHeaderDepth;
     }
@@ -51042,7 +51041,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ``
      */
     get hiddenColumnsCount() {
-        return this.columnList.filter((col) => col.columnGroup === false && col.hidden === true).length;
+        return this._columns.filter((col) => col.columnGroup === false && col.hidden === true).length;
     }
     /**
      * Gets the number of pinned columns.
@@ -51697,8 +51696,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             this.notifyChanges(true);
             this.cdr.detectChanges();
         });
-        this.verticalScrollContainer.contentSizeChange.pipe(filter(() => !this._init), destructor).subscribe(() => {
-            this.notifyChanges();
+        this.verticalScrollContainer.contentSizeChange.pipe(filter(() => !this._init), throttleTime(30), destructor).subscribe(() => {
+            this.notifyChanges(true);
         });
         this.onDensityChanged.pipe(destructor).subscribe(() => {
             this.crudService.endEdit(false);
@@ -51724,13 +51723,13 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @internal
      */
     resetColumnsCaches() {
-        this.columnList.forEach(column => column.resetCaches());
+        this._columns.forEach(column => column.resetCaches());
     }
     /**
      * @hidden @internal
      */
     generateRowID() {
-        const primaryColumn = this.columnList.find(col => col.field === this.primaryKey);
+        const primaryColumn = this._columns.find(col => col.field === this.primaryKey);
         const idType = this.data.length ?
             this.resolveDataTypes(this.data[0][this.primaryKey]) : primaryColumn ? primaryColumn.dataType : 'string';
         return idType === 'string' ? v4() : FAKE_ROW_ID--;
@@ -51797,7 +51796,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.resetColumnCollections();
         this.resetCachedWidths();
         this.hasVisibleColumns = undefined;
-        this._columnGroups = this.columnList.some(col => col.columnGroup);
+        this._columnGroups = this._columns.some(col => col.columnGroup);
     }
     /**
      * @hidden
@@ -52028,7 +52027,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     toggleColumnVisibility(args) {
-        const col = args.column ? this.columnList.find((c) => c === args.column) : undefined;
+        const col = args.column ? this._columns.find((c) => c === args.column) : undefined;
         if (!col) {
             return;
         }
@@ -52265,13 +52264,6 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     get summariesMargin() {
         return this.featureColumnsWidth();
     }
-    /**
-     * @hidden
-     * @internal
-     */
-    get columns() {
-        return this._columns;
-    }
     /**
      * Gets an array of `IgxColumnComponent`s.
      *
@@ -52280,8 +52272,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * const colums = this.grid.columnsCollection.
      * ```
      */
-    get columnsCollection() {
-        return this._rendered ? this._columns : [];
+    get columns() {
+        return this._columns || [];
     }
     /**
      * Gets an array of the pinned `IgxColumnComponent`s.
@@ -52348,7 +52340,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @param name
      */
     getColumnByName(name) {
-        return this.columnList.find((col) => col.field === name);
+        return this._columns.find((col) => col.field === name);
     }
     getColumnByVisibleIndex(index) {
         return this.visibleColumns.find((col) => !col.columnGroup && !col.columnLayout &&
@@ -52366,7 +52358,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (this._visibleColumns.length) {
             return this._visibleColumns;
         }
-        this._visibleColumns = this.columnList.filter(c => !c.hidden);
+        this._visibleColumns = this._columns.filter(c => !c.hidden);
         return this._visibleColumns;
     }
     /**
@@ -52497,14 +52489,14 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @internal
      */
     get showAddButton() {
-        return this.rowEditable && this.dataView.length === 0 && this.columns.length > 0;
+        return this.rowEditable && this.dataView.length === 0 && this._columns.length > 0;
     }
     /**
      * @hidden
      * @internal
      */
     get showDragIcons() {
-        return this.rowDraggable && this.columns.length > this.hiddenColumnsCount;
+        return this.rowDraggable && this._columns.length > this.hiddenColumnsCount;
     }
     /**
      * Places a column before or after the specified target column.
@@ -52541,12 +52533,12 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             const 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);
     }
@@ -52609,7 +52601,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         // commit pending states prior to adding a row
         this.crudService.endEdit(true);
         this.gridAPI.addRowToData(data);
-        this.rowAddedNotifier.next({ data });
+        this.rowAddedNotifier.next({ data, owner: this });
         this.pipeTrigger++;
         this.notifyChanges();
     }
@@ -52636,7 +52628,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             rowID: rowId,
             cancel: false,
             rowData: this.getRowData(rowId),
-            oldValue: null
+            oldValue: null,
+            owner: this
         };
         this.rowDelete.emit(args);
         if (args.cancel) {
@@ -52644,8 +52637,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
         const 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;
     }
@@ -52664,7 +52656,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     updateCell(value, rowSelector, column) {
         if (this.isDefined(this.primaryKey)) {
-            const col = this.columnList.toArray().find(c => c.field === column);
+            const col = this._columns.find(c => c.field === column);
             if (col) {
                 // Simplify
                 const rowData = this.gridAPI.getRowData(rowSelector);
@@ -53116,7 +53108,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasSortableColumns() {
-        return this.columnList.some((col) => col.sortable);
+        return this._columns.some((col) => col.sortable);
     }
     /**
      * Returns if the `IgxGridComponent` has editable columns.
@@ -53127,7 +53119,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasEditableColumns() {
-        return this.columnList.some((col) => col.editable);
+        return this._columns.some((col) => col.editable);
     }
     /**
      * Returns if the `IgxGridComponent` has filterable columns.
@@ -53138,7 +53130,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasFilterableColumns() {
-        return this.columnList.some((col) => col.filterable);
+        return this._columns.some((col) => col.filterable);
     }
     /**
      * Returns if the `IgxGridComponent` has summarized columns.
@@ -53149,7 +53141,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasSummarizedColumns() {
-        const summarizedColumns = this.columnList.filter(col => col.hasSummary && !col.hidden);
+        const summarizedColumns = this._columns.filter(col => col.hasSummary && !col.hidden);
         return summarizedColumns.length > 0;
     }
     /**
@@ -53163,7 +53155,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     get hasVisibleColumns() {
         if (this._hasVisibleColumns === undefined) {
-            return this.columnList ? this.columnList.some(c => !c.hidden) : false;
+            return this._columns ? this._columns.some(c => !c.hidden) : false;
         }
         return this._hasVisibleColumns;
     }
@@ -53179,7 +53171,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasMovableColumns() {
-        return this.columnList && this.columnList.some((col) => col.movable);
+        return this.columns && this.columns.some((col) => col.movable);
     }
     /**
      * Returns if the `IgxGridComponent` has column groups.
@@ -53201,7 +53193,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasColumnLayouts() {
-        return !!this.columnList.some(col => col.columnLayout);
+        return !!this._columns.some(col => col.columnLayout);
     }
     /**
      * @hidden @internal
@@ -53656,7 +53648,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     selectAllColumns() {
-        this.selectColumns(this.columnList.filter(c => !c.columnGroup));
+        this.selectColumns(this._columns.filter(c => !c.columnGroup));
     }
     /**
      *
@@ -53774,7 +53766,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         var _a;
         const totalItems = (_a = this.totalItemCount) !== null && _a !== void 0 ? _a : this.dataView.length - 1;
         if (rowIndex < 0 || rowIndex > totalItems || (visibleColIndex !== -1
-            && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
+            && this._columns.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
             return;
         }
         if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
@@ -53820,7 +53812,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     getNextCell(currRowIndex, curVisibleColIndex, callback = null) {
-        const columns = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0);
+        const columns = this._columns.filter(col => !col.columnGroup && col.visibleIndex >= 0);
         const dataViewIndex = this._getDataViewIndex(currRowIndex);
         if (!this.isValidPosition(dataViewIndex, curVisibleColIndex)) {
             return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
@@ -53855,7 +53847,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     getPreviousCell(currRowIndex, curVisibleColIndex, callback = null) {
-        const columns = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0);
+        const columns = this._columns.filter(col => !col.columnGroup && col.visibleIndex >= 0);
         const dataViewIndex = this._getDataViewIndex(currRowIndex);
         if (!this.isValidPosition(dataViewIndex, curVisibleColIndex)) {
             return { rowIndex: currRowIndex, visibleColumnIndex: curVisibleColIndex };
@@ -54121,20 +54113,6 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             console.warn('The row with the specified PK or index is outside of the current data view.');
         }
     }
-    /**
-     * Update internal column's collection.
-     *
-     * @hidden
-     */
-    updateColumns(newColumns) {
-        // update internal collections to retain order.
-        this._pinnedColumns = newColumns
-            .filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
-        this._unpinnedColumns = newColumns.filter((c) => !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.
      *
@@ -54152,6 +54130,19 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
         return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index - 1, this.dataView));
     }
+    /**
+     * Update internal column's collection.
+     *
+     * @hidden
+     */
+    updateColumns(newColumns) {
+        // update internal collections to retain order.
+        this._pinnedColumns = newColumns
+            .filter((c) => c.pinned);
+        this._unpinnedColumns = newColumns.filter((c) => !c.pinned);
+        this._columns = newColumns;
+        this.resetCaches();
+    }
     beginAddRowForIndex(index, asChild = false) {
         const row = index == null ?
             null : this.rowList.find(r => r.index === index);
@@ -54291,7 +54282,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (!this.columnWidthSetByUser) {
             this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH + 'px';
         }
-        this.columnList.forEach((column) => {
+        this._columns.forEach((column) => {
             if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
                 const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
                 column.defaultWidth = columnWidthCombined + 'px';
@@ -54343,7 +54334,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @hidden
      */
     _moveColumns(from, to, pos) {
-        const list = this.columnList.toArray();
+        const orderedList = this._pinnedColumns.concat(this._unpinnedColumns);
+        const list = orderedList;
         this._reorderColumns(from, to, pos, list);
         const newList = this._resetColumnList(list);
         this.updateColumns(newList);
@@ -54353,7 +54345,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     _resetColumnList(list) {
         if (!list) {
-            list = this.columnList.toArray();
+            list = this._columns;
         }
         let newList = [];
         list.filter(c => c.level === 0).forEach(p => {
@@ -54398,7 +54390,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (this.autoGenerate) {
             this.autogenerateColumns();
         }
-        this.initColumns(this.columnList, (col) => this.columnInit.emit(col));
+        else {
+            this._columns = this.getColumnList();
+        }
+        this.initColumns(this._columns, (col) => this.columnInit.emit(col));
         this.columnListDiffer.diff(this.columnList);
         this.columnList.changes
             .pipe(takeUntil(this.destroy$))
@@ -54406,6 +54401,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             this.onColumnsChanged(change);
         });
     }
+    getColumnList() {
+        return this.columnList.toArray();
+    }
     /**
      * @hidden
      */
@@ -54447,10 +54445,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     onColumnsChanged(change) {
         const 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) {
@@ -54465,7 +54463,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
                     this._unpinnedColumns.push(record.item);
                 }
             });
-            this.initColumns(this.columnList, (col) => this.columnInit.emit(col));
+            this.initColumns(this.columnList.toArray(), (col) => this.columnInit.emit(col));
             diff.forEachRemovedItem((record) => {
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                 if (!isColumnGroup) {
@@ -54676,12 +54674,14 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     }
     _shouldAutoSize(renderedHeight) {
         this.tbody.nativeElement.style.display = 'none';
-        const res = !this.nativeElement.parentElement ||
+        let 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;
     }
@@ -54765,7 +54765,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             columns.push(ref.instance);
         });
         this._autoGeneratedCols = columns;
-        this.columnList.reset(columns);
+        this.updateColumns(columns);
         if (data && data.length > 0) {
             this.shouldGenerate = false;
         }
@@ -54791,10 +54791,10 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @hidden
      */
     initColumns(collection, cb = null) {
-        this._columnGroups = this.columnList.some(col => col.columnGroup);
+        this._columnGroups = collection.some(col => col.columnGroup);
         if (this.hasColumnLayouts) {
             // Set overall row layout size
-            this.columnList.forEach((col) => {
+            collection.forEach((col) => {
                 if (col.columnLayout) {
                     const layoutSize = col.children ?
                         col.children.reduce((acc, val) => Math.max(val.rowStart + val.gridRowSpan - 1, acc), 1) :
@@ -54806,18 +54806,17 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         if (this.hasColumnLayouts && this.hasColumnGroups) {
             // invalid configuration - multi-row and column groups
             // remove column groups
-            const columnLayoutColumns = this.columnList.filter((col) => col.columnLayout || col.columnLayoutChild);
-            this.columnList.reset(columnLayoutColumns);
+            const columnLayoutColumns = collection.filter((col) => col.columnLayout || col.columnLayoutChild);
+            collection = columnLayoutColumns;
         }
         this._maxLevelHeaderDepth = null;
-        this._columns = this.columnList.toArray();
         collection.forEach((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((column) => {
                 column.populateVisibleIndexes();
@@ -54828,13 +54827,11 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @hidden
      */
     reinitPinStates() {
-        this._pinnedColumns = this.columnList
-            .filter((c) => c.pinned)
-            .sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
-        this._unpinnedColumns = this.hasColumnGroups ? this.columnList.filter((c) => !c.pinned) :
-            this.columnList.filter((c) => !c.pinned)
-                .sort((a, b) => this._unpinnedColumns.findIndex(x => x.field === a.field) -
-                this._unpinnedColumns.findIndex(x => x.field === b.field));
+        this._pinnedColumns = this._columns
+            .filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
+        this._unpinnedColumns = this.hasColumnGroups ? this._columns.filter((c) => !c.pinned) :
+            this._columns.filter((c) => !c.pinned)
+                .sort((a, b) => this._unpinnedColumns.indexOf(a) - this._unpinnedColumns.indexOf(b));
     }
     extractDataFromSelection(source, formatters = false, headers = false, columnData) {
         var _a;
@@ -55133,7 +55130,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     _columnsReordered(column) {
         this.notifyChanges();
         if (this.hasColumnLayouts) {
-            this.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this._columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
         // after reordering is done reset cached column collections.
         this.resetColumnCollections();
@@ -55296,7 +55293,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     }
     isValidPosition(rowIndex, colIndex) {
         const rows = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).length;
-        const cols = this.columnList.filter(col => !col.columnGroup && col.visibleIndex >= 0 && !col.hidden).length;
+        const cols = this._columns.filter(col => !col.columnGroup && col.visibleIndex >= 0 && !col.hidden).length;
         if (rows < 1 || cols < 1) {
             return false;
         }
@@ -55856,7 +55853,7 @@ class BaseRow {
      */
     get cells() {
         const res = [];
-        this.grid.columnList.forEach(col => {
+        this.grid.columns.forEach(col => {
             const cell = new IgxGridCell(this.grid, this.index, col.field);
             res.push(cell);
         });
@@ -56167,7 +56164,7 @@ class IgxHierarchicalGridRow extends BaseRow {
      */
     get cells() {
         const res = [];
-        this.grid.columnList.forEach(col => {
+        this.grid.columns.forEach(col => {
             const cell = new IgxGridCell(this.grid, this.index, col.field);
             res.push(cell);
         });
@@ -61603,7 +61600,7 @@ class IgxGridMRLNavigationService extends IgxGridNavigationService {
             col.visibleIndex > this.activeNode.column && col.colStart > this.activeNode.layout.colStart);
         if (!column || (previous && this.activeNode.layout.colStart === 1)) {
             const index = previous ? parent.visibleIndex - 1 : parent.visibleIndex + 1;
-            const children = this.grid.columnList.find(cols => cols.columnLayout && cols.visibleIndex === index).children;
+            const children = this.grid.columns.find(cols => cols.columnLayout && cols.visibleIndex === index).children;
             column = previous ? children.toArray().reverse().find(child => child.rowStart <= this.activeNode.layout.rowStart) :
                 children.find(child => this.rowEnd(child) > this.activeNode.layout.rowStart && child.colStart === 1);
         }
@@ -62039,7 +62036,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             // 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) {
             const groupedCols = [];
             const ungroupedCols = [];
             const groupedColsArr = newExpressions.filter((obj) => !oldExpressions.some((obj2) => obj.fieldName === obj2.fieldName));
@@ -62103,7 +62100,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
         else {
             this.groupingDiffer = null;
         }
-        if (this.columnList && this.groupingExpressions) {
+        if (this._columns && this.groupingExpressions) {
             this._setGroupColsVisibility(value);
         }
         this._hideGroupedColumns = value;
@@ -62158,7 +62155,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
     getCellByColumnVisibleIndex(rowIndex, index) {
         var _a;
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.visibleIndex === index);
+        const column = this._columns.find((col) => 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);
         }
@@ -62428,7 +62425,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
      * ```
      */
     get hasGroupableColumns() {
-        return this.columnList.some((col) => col.groupable && !col.columnGroup);
+        return this._columns.some((col) => col.groupable && !col.columnGroup);
     }
     /**
      * Returns whether the `IgxGridComponent` has group area.
@@ -62553,7 +62550,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             this._groupRowTemplate = this.groupTemplate.template;
         }
         this.detailTemplate.changes.subscribe(() => this.trackChanges = (_, rec) => ((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();
@@ -62601,9 +62598,9 @@ class IgxGridComponent extends IgxGridBaseDirective {
      * @hidden @internal
      */
     ngDoCheck() {
-        if (this.groupingDiffer && this.columnList && !this.hasColumnLayouts) {
+        if (this.groupingDiffer && this._columns && !this.hasColumnLayouts) {
             const changes = this.groupingDiffer.diff(this.groupingExpressions);
-            if (changes && this.columnList.length > 0) {
+            if (changes && this._columns.length > 0) {
                 changes.forEachAddedItem((rec) => {
                     const col = this.getColumnByName(rec.item.fieldName);
                     if (col) {
@@ -62737,7 +62734,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
     getCellByColumn(rowIndex, columnField) {
         var _a;
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this._columns.find((col) => 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;
@@ -62759,7 +62756,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
      */
     getCellByKey(rowSelector, columnField) {
         const row = this.getRowByKey(rowSelector);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this._columns.find((col) => col.field === columnField);
         if (row && column) {
             return new IgxGridCell(this, row.index, columnField);
         }
@@ -62860,7 +62857,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
         return !expression.fieldName;
     }
     _setGroupColsVisibility(value) {
-        if (this.columnList.length > 0 && !this.hasColumnLayouts) {
+        if (this._columns.length > 0 && !this.hasColumnLayouts) {
             this.groupingExpressions.forEach((expr) => {
                 const col = this.getColumnByName(expr.fieldName);
                 col.hidden = value;
@@ -63051,6 +63048,9 @@ class IgxGridStateDirective {
                         }
                     });
                     context.grid.updateColumns(newColumns);
+                    newColumns.forEach(col => {
+                        context.grid.columnInit.emit(col);
+                    });
                 }
             },
             groupBy: {
@@ -63292,13 +63292,11 @@ class IgxGridStateDirective {
         // TODO Notify the grid that columnList.changes is triggered by the state directive
         // instead of piping it like below
         const columns = 'columns';
-        this.grid.columnList.changes.pipe(delay(0), take(1)).subscribe(() => {
-            this.featureKeys = this.featureKeys.filter(f => 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(f => f !== columns);
+            this.restoreFeatures(state);
         }
         else {
             this.restoreFeatures(state);
@@ -63349,8 +63347,8 @@ class IgxGridStateDirective {
             else {
                 const expr = item;
                 let dataType;
-                if (this.currGrid.columnList.length > 0) {
-                    dataType = this.currGrid.columnList.find(c => c.field === expr.fieldName).dataType;
+                if (this.currGrid.columns.length > 0) {
+                    dataType = this.currGrid.columns.find(c => c.field === expr.fieldName).dataType;
                 }
                 else if (this.state.columns) {
                     dataType = this.state.columns.find(c => c.field === expr.fieldName).dataType;
@@ -63389,6 +63387,9 @@ class IgxGridStateDirective {
             case GridColumnDataType.Date:
                 filters = IgxDateFilteringOperand.instance();
                 break;
+            case GridColumnDataType.DateTime:
+                filters = IgxDateTimeFilteringOperand.instance();
+                break;
             case GridColumnDataType.String:
             default:
                 filters = IgxStringFilteringOperand.instance();
@@ -65414,13 +65415,13 @@ class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
         return this._hideGroupedColumns;
     }
     set hideGroupedColumns(value) {
-        if (this.grid.columnList && this.expressions) {
+        if (this.grid.columns && this.expressions) {
             this.setColumnsVisibility(value);
         }
         this._hideGroupedColumns = value;
     }
     ngAfterContentInit() {
-        if (this.grid.columnList && this.expressions) {
+        if (this.grid.columns && this.expressions) {
             this.groupingDiffer = this.differs.find(this.expressions).create();
             this.updateColumnsVisibility();
         }
@@ -65499,9 +65500,9 @@ class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
         }
     }
     updateColumnsVisibility() {
-        if (this.groupingDiffer && this.grid.columnList && !this.grid.hasColumnLayouts) {
+        if (this.groupingDiffer && this.grid.columns && !this.grid.hasColumnLayouts) {
             const changes = this.groupingDiffer.diff(this.expressions);
-            if (changes && this.grid.columnList.length > 0) {
+            if (changes && this.grid.columns.length > 0) {
                 changes.forEachAddedItem((rec) => {
                     const col = this.grid.getColumnByName(rec.item.fieldName);
                     col.hidden = this.hideGroupedColumns;
@@ -65514,7 +65515,7 @@ class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
         }
     }
     setColumnsVisibility(value) {
-        if (this.grid.columnList.length > 0 && !this.grid.hasColumnLayouts) {
+        if (this.grid.columns.length > 0 && !this.grid.hasColumnLayouts) {
             this.expressions.forEach((expr) => {
                 const col = this.grid.getColumnByName(expr.fieldName);
                 col.hidden = value;
@@ -65738,7 +65739,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
      */
     getCellByColumnVisibleIndex(rowIndex, index) {
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.visibleIndex === index);
+        const column = this.columns.find((col) => col.visibleIndex === index);
         if (row && row instanceof IgxTreeGridRow && column) {
             return new IgxGridCell(this, rowIndex, column.field);
         }
@@ -65893,7 +65894,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
     addRow(data, parentRowID) {
         this.crudService.endEdit(true);
         this.gridAPI.addRowToData(data, parentRowID);
-        this.rowAddedNotifier.next({ data });
+        this.rowAddedNotifier.next({ data, owner: this });
         this.pipeTrigger++;
         this.notifyChanges();
     }
@@ -66000,7 +66001,22 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         //  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);
+        const args = {
+            rowID: rowId,
+            cancel: false,
+            rowData: this.getRowData(rowId),
+            oldValue: null,
+            owner: this
+        };
+        this.rowDelete.emit(args);
+        if (args.cancel) {
+            return;
+        }
+        const record = this.gridAPI.deleteRowById(rowId);
+        if (record !== null && record !== undefined) {
+            this.rowDeleted.emit({ data: record, owner: this });
+        }
+        return record;
     }
     /**
      * Returns the `IgxTreeGridRow` by index.
@@ -66075,7 +66091,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
      */
     getCellByColumn(rowIndex, columnField) {
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this.columns.find((col) => col.field === columnField);
         if (row && row instanceof IgxTreeGridRow && column) {
             return new IgxGridCell(this, rowIndex, columnField);
         }
@@ -66094,7 +66110,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
      */
     getCellByKey(rowSelector, columnField) {
         const row = this.getRowByKey(rowSelector);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this.columns.find((col) => col.field === columnField);
         if (row && column) {
             return new IgxGridCell(this, row.index, columnField);
         }
@@ -66152,7 +66168,7 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
      * ```
      */
     get hasGroupableColumns() {
-        return this.columnList.some((col) => col.groupable && !col.columnGroup);
+        return this.columns.some((col) => col.groupable && !col.columnGroup);
     }
     transactionStatusUpdate(event) {
         let actions = [];
@@ -66232,8 +66248,8 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
         if (this.hasColumnLayouts) {
             // invalid configuration - tree grid should not allow column layouts
             // remove column layouts
-            const nonColumnLayoutColumns = this.columnList.filter((col) => !col.columnLayout && !col.columnLayoutChild);
-            this.columnList.reset(nonColumnLayoutColumns);
+            const nonColumnLayoutColumns = this.columns.filter((col) => !col.columnLayout && !col.columnLayoutChild);
+            this.updateColumns(nonColumnLayoutColumns);
         }
         super.initColumns(collection, cb);
     }
@@ -66344,6 +66360,7 @@ IgxTreeGridComponent.decorators = [
                     { provide: GridBaseAPIService, useClass: IgxTreeGridAPIService },
                     { provide: IgxGridBaseDirective, useExisting: forwardRef(() => IgxTreeGridComponent) },
                     IgxFilteringService,
+                    IgxColumnResizingService,
                     IgxForOfSyncService,
                     IgxForOfScrollSyncService
                 ]
@@ -67767,7 +67784,7 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
      */
     get maxLevelHeaderDepth() {
         if (this._maxLevelHeaderDepth === null) {
-            this._maxLevelHeaderDepth = this.columnList.reduce((acc, col) => Math.max(acc, col.level), 0);
+            this._maxLevelHeaderDepth = this.columns.reduce((acc, col) => Math.max(acc, col.level), 0);
         }
         return this._maxLevelHeaderDepth;
     }
@@ -67810,13 +67827,12 @@ class IgxHierarchicalGridBaseDirective extends IgxGridBaseDirective {
             columns.push(ref.instance);
         });
         const result = flatten(columns);
-        this.columnList.reset(result);
-        this.columnList.notifyOnChanges();
+        this.updateColumns(result);
         this.initPinning();
         const factoryColumn = this.resolver.resolveComponentFactory(IgxColumnComponent);
         const outputs = factoryColumn.outputs.filter(o => o.propName !== 'columnChange');
         outputs.forEach(output => {
-            this.columnList.forEach(column => {
+            this.columns.forEach(column => {
                 if (column[output.propName]) {
                     column[output.propName].pipe(takeUntil(column.destroy$)).subscribe((args) => {
                         const rowIslandColumn = this.parentIsland.childColumns.find(col => col.field === column.field);
@@ -68168,6 +68184,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
          * @hidden
          */
         this.rootGrid = null;
+        this._childColumns = [];
         this.layout_id = `igx-row-island-`;
         this.isInit = false;
         this.hgridAPI = gridAPI;
@@ -68260,7 +68277,8 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         const nestedColumns = this.children.map((layout) => layout.columnList.toArray());
         const colsArray = [].concat.apply([], nestedColumns);
         const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
-        this.childColumns.reset(topCols);
+        this._childColumns = topCols;
+        this.updateColumns(this._childColumns);
         this.columnList.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
             Promise.resolve().then(() => {
                 this.updateColumnList();
@@ -68268,7 +68286,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         });
         // 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(x => x.columnChange.pipe(takeUntil(x.destroy$)).subscribe(() => this.updateColumnList()));
+        this._childColumns.forEach(x => x.columnChange.pipe(takeUntil(x.destroy$)).subscribe(() => this.updateColumnList()));
         this.childColumns.changes.pipe(takeUntil(this.destroy$)).subscribe((change) => {
             const diff = this.ri_columnListDiffer.diff(change);
             if (diff) {
@@ -68360,15 +68378,9 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
             }
             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((grid) => {
-            grid.createColumnsList(this.childColumns.toArray());
+            grid.createColumnsList(this._childColumns);
             if (!document.body.contains(grid.nativeElement)) {
                 grid.updateOnRender = true;
             }
@@ -68604,7 +68616,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
      */
     getCellByColumnVisibleIndex(rowIndex, index) {
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.visibleIndex === index);
+        const column = this.columns.find((col) => col.visibleIndex === index);
         if (row && row instanceof IgxHierarchicalGridRow && column) {
             return new IgxGridCell(this, rowIndex, column.field);
         }
@@ -68826,7 +68838,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
      */
     getCellByColumn(rowIndex, columnField) {
         const row = this.getRowByIndex(rowIndex);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this.columns.find((col) => col.field === columnField);
         if (row && row instanceof IgxHierarchicalGridRow && column) {
             return new IgxGridCell(this, rowIndex, columnField);
         }
@@ -68845,7 +68857,7 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
      */
     getCellByKey(rowSelector, columnField) {
         const row = this.getRowByKey(rowSelector);
-        const column = this.columnList.find((col) => col.field === columnField);
+        const column = this.columns.find((col) => col.field === columnField);
         if (row && column) {
             return new IgxGridCell(this, row.index, columnField);
         }
@@ -69120,8 +69132,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         if (this.hasColumnLayouts) {
             // invalid configuration - hierarchical grid should not allow column layouts
             // remove column layouts
-            const nonColumnLayoutColumns = this.columnList.filter((col) => !col.columnLayout && !col.columnLayoutChild);
-            this.columnList.reset(nonColumnLayoutColumns);
+            const nonColumnLayoutColumns = this.columns.filter((col) => !col.columnLayout && !col.columnLayoutChild);
+            this.updateColumns(nonColumnLayoutColumns);
         }
         super.initColumns(collection, cb);
     }
@@ -69129,16 +69141,25 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         if (this.parentIsland && this.parentIsland.childColumns.length > 0 && !this.autoGenerate) {
             this.createColumnsList(this.parentIsland.childColumns.toArray());
         }
-        super.setupColumns();
+        else {
+            super.setupColumns();
+        }
+    }
+    getColumnList() {
+        const childLayouts = this.parent ? this.childLayoutList : this.allLayoutList;
+        const nestedColumns = childLayouts.map((layout) => layout.columnList.toArray());
+        const colsArray = [].concat.apply([], nestedColumns);
+        if (colsArray.length > 0) {
+            const topCols = this.columnList.filter((item) => colsArray.indexOf(item) === -1);
+            return topCols;
+        }
+        else {
+            return this.columnList.toArray();
+        }
     }
     onColumnsChanged(change) {
         Promise.resolve().then(() => {
             this.updateColumnList();
-            const cols = change.filter(c => c.gridAPI.grid === this);
-            if (cols.length > 0 || this.autoGenerate) {
-                this.columnList.reset(cols);
-                super.onColumnsChanged(this.columnList);
-            }
         });
     }
     _shouldAutoSize(renderedHeight) {
@@ -69154,8 +69175,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
         const colLength = this.columnList.length;
         if (colsArray.length > 0) {
             const topCols = this.columnList.filter((item) => 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);
             }
         }
@@ -69188,6 +69209,7 @@ IgxHierarchicalGridComponent.decorators = [
                     { provide: GridBaseAPIService, useClass: IgxHierarchicalGridAPIService },
                     { provide: IgxGridBaseDirective, useExisting: forwardRef(() => IgxHierarchicalGridComponent) },
                     IgxGridSummaryService,
+                    IgxColumnResizingService,
                     IgxFilteringService,
                     IgxHierarchicalGridNavigationService,
                     IgxForOfSyncService,
@@ -73865,17 +73887,67 @@ class IgxSplitterPaneComponent {
         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.minHeight = 0;
+        this.minWidth = '0';
         /**
          * @hidden @internal
-         * Gets/Sets the `maxHeight` and `maxWidth` properties of the current `IgxSplitterPaneComponent`.
+         * Get/Sets the `maxWidth` properties of the current pane.
+         */
+        this.maxWidth = '100%';
+        /**
+         * @hidden @internal
+         * 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;
     }
+    /**
+     * 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 minSize() {
+        return this._minSize;
+    }
+    ;
+    set minSize(value) {
+        this._minSize = value;
+        if (this.owner) {
+            this.owner.panes.notifyOnChanges();
+        }
+    }
+    /**
+     * 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 maxSize() {
+        return this._maxSize;
+    }
+    ;
+    set maxSize(value) {
+        this._maxSize = value;
+        if (this.owner) {
+            this.owner.panes.notifyOnChanges();
+        }
+    }
     /**
      * Gets/Sets the size of the current pane.
      *  * @example
@@ -73987,8 +74059,10 @@ IgxSplitterPaneComponent.propDecorators = {
     collapsedChange: [{ type: Output }],
     order: [{ type: HostBinding, args: ['style.order',] }],
     overflow: [{ type: HostBinding, args: ['style.overflow',] }],
-    minHeight: [{ type: HostBinding, args: ['style.min-height',] }, { type: HostBinding, args: ['style.min-width',] }],
-    maxHeight: [{ type: HostBinding, args: ['style.max-height',] }, { type: HostBinding, args: ['style.max-width',] }],
+    minWidth: [{ type: HostBinding, args: ['style.min-width',] }],
+    maxWidth: [{ type: HostBinding, args: ['style.max-width',] }],
+    minHeight: [{ type: HostBinding, args: ['style.min-height',] }],
+    maxHeight: [{ type: HostBinding, args: ['style.max-height',] }],
     size: [{ type: Input }],
     flex: [{ type: HostBinding, args: ['style.flex',] }],
     collapsed: [{ type: Input }]
@@ -74089,8 +74163,10 @@ class IgxSplitterComponent {
         return this._type;
     }
     set type(value) {
+        var _a;
         this._type = value;
         this.resetPaneSizes();
+        (_a = this.panes) === null || _a === void 0 ? void 0 : _a.notifyOnChanges();
     }
     /**
      * @hidden @internal
@@ -74195,7 +74271,18 @@ class IgxSplitterComponent {
      * This method inits panes with properties.
      */
     initPanes() {
-        this.panes.forEach(pane => pane.owner = this);
+        this.panes.forEach(pane => {
+            var _a, _b, _c, _d;
+            pane.owner = this;
+            if (this.type === 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(x => x.collapsed).length > 0) {
             // if any panes are collapsed, reset sizes.
@@ -74209,7 +74296,13 @@ class IgxSplitterComponent {
     resetPaneSizes() {
         if (this.panes) {
             // if type is changed runtime, should reset sizes.
-            this.panes.forEach(x => x.size = 'auto');
+            this.panes.forEach(x => {
+                x.size = 'auto';
+                x.minWidth = '0';
+                x.maxWidth = '100%';
+                x.minHeight = '0';
+                x.maxHeight = '100%';
+            });
         }
     }
     /**
@@ -76745,6 +76838,35 @@ IgxTreeExpandIndicatorDirective.decorators = [
                 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>
+ * ```
+ */
 class IgxTreeComponent extends DisplayDensityBase {
     constructor(navService, selectionService, treeService, element, _displayDensityOptions) {
         super(_displayDensityOptions);