igniteui-angular 13.2.2 → 13.2.5

package/fesm2020/igniteui-angular.mjs

@@ -7,7 +7,7 @@ import { NgModel, FormControlName, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxReq
 import * as i4 from '@angular/common';
 import { isPlatformBrowser, formatDate as formatDate$1, CurrencyPipe, formatPercent, formatNumber, getLocaleCurrencyCode, DatePipe, DOCUMENT, CommonModule, FormatWidth, getLocaleDateFormat, getLocaleNumberFormat, NumberFormatStyle, getCurrencySymbol } from '@angular/common';
 import { Observable, Subject, fromEvent, interval, animationFrameScheduler, noop, merge, Subscription, timer, pipe } from 'rxjs';
-import { takeUntil, filter, first as first$1, throttleTime, take, throttle, debounce, tap, switchMap, skipLast, map, debounceTime, shareReplay, takeWhile, delay, pluck } from 'rxjs/operators';
+import { takeUntil, filter, first as first$1, throttleTime, take, throttle, debounce, tap, switchMap, skipLast, map, debounceTime, shareReplay, takeWhile, pluck } from 'rxjs/operators';
 import mergeWith from 'lodash.mergewith';
 import * as JSZip from 'jszip';
 import * as i1$1 from '@angular/platform-browser';
@@ -3094,7 +3094,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);
         }
@@ -3725,7 +3725,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);
@@ -11158,7 +11158,7 @@ class IgxGridForOfDirective extends IgxForOfDirective {
                 this.igxForContainerSize = args.containerSize;
                 const sizeDiff = this._updateSizeCache(changes);
                 this._applyChanges();
-                if (sizeDiff) {
+                if (sizeDiff && this.igxForScrollOrientation === 'vertical') {
                     this._adjustScrollPositionAfterSizeChange(sizeDiff);
                 }
                 this._updateScrollOffset();
@@ -24016,8 +24016,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;
@@ -48131,7 +48131,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;
@@ -48408,8 +48408,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);
@@ -50565,7 +50564,7 @@ class IgxColumnComponent {
         grid.resetCaches();
         grid.notifyChanges();
         if (this.columnLayoutChild) {
-            this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
         this.grid.filteringService.refreshExpressions();
         const eventArgs = { column: this, insertAtIndex: index, isPinned: true };
@@ -50632,7 +50631,7 @@ class IgxColumnComponent {
         grid.resetCaches();
         grid.notifyChanges();
         if (this.columnLayoutChild) {
-            this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
         this.grid.filteringService.refreshExpressions();
         this.grid.columnPinned.emit({ column: this, insertAtIndex: index, isPinned: false });
@@ -50651,7 +50650,7 @@ class IgxColumnComponent {
      */
     move(index) {
         let target;
-        let columns = this.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;
@@ -52213,7 +52212,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);
         });
@@ -52520,7 +52519,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);
         });
@@ -53821,7 +53820,7 @@ class IgxGroupByAreaDirective {
         const drag = event.detail.owner;
         if (drag instanceof IgxColumnMovingDragDirective) {
             const column = drag.column;
-            if (!this.grid.columnList.find(c => c === column)) {
+            if (!this.grid.columns.find(c => c === column)) {
                 return;
             }
             const isGrouped = this.expressions.findIndex((item) => item.fieldName === column.field) !== -1;
@@ -54322,7 +54321,7 @@ class IgxAdvancedFilteringDialogComponent {
      * @hidden @internal
      */
     get filterableColumns() {
-        return this.grid.columnList.filter((col) => !col.columnGroup && col.filterable);
+        return this.grid.columns.filter((col) => !col.columnGroup && col.filterable);
     }
     /**
      * @hidden @internal
@@ -56157,7 +56156,7 @@ class IgxFilteringService {
             grid.paginator.page = 0;
         }
         filteringTree.filteringOperands = [];
-        for (const column of grid.columnList) {
+        for (const column of grid.columns) {
             this.prepare_filtering_expression(filteringTree, column.field, term, condition, ignoreCase || column.filteringIgnoreCase);
         }
         grid.filteringExpressionsTree = filteringTree;
@@ -56191,7 +56190,7 @@ class IgxFilteringService {
             expressions.length = 0;
         }
         else {
-            this.grid.columnList.forEach(c => {
+            this.grid.columns.forEach(c => {
                 const expressions = this.getExpressions(c.field);
                 expressions.length = 0;
             });
@@ -56221,7 +56220,7 @@ class IgxFilteringService {
         const grid = this.grid;
         const filteringTree = grid.filteringExpressionsTree;
         const newFilteringTree = new FilteringExpressionsTree(filteringTree.operator, filteringTree.fieldName);
-        for (const column of grid.columnList) {
+        for (const column of grid.columns) {
             this.prepare_filtering_expression(newFilteringTree, column.field, value, condition, ignoreCase || column.filteringIgnoreCase);
         }
         const eventArgs = { owner: grid, filteringExpressions: newFilteringTree, cancel: false };
@@ -56251,7 +56250,7 @@ class IgxFilteringService {
      */
     getExpressions(columnId) {
         if (!this.columnToExpressionsMap.has(columnId)) {
-            const column = this.grid.columnList.find((col) => col.field === columnId);
+            const column = this.grid.columns.find((col) => col.field === columnId);
             const expressionUIs = new Array();
             if (column) {
                 this.generateExpressionsList(column.filteringExpressionsTree, this.grid.filteringExpressionsTree.operator, expressionUIs);
@@ -56268,7 +56267,7 @@ class IgxFilteringService {
         if (!this.isFiltering) {
             this.columnsWithComplexFilter.clear();
             this.columnToExpressionsMap.forEach((value, key) => {
-                const column = this.grid.columnList.find((col) => col.field === key);
+                const column = this.grid.columns.find((col) => col.field === key);
                 if (column) {
                     value.length = 0;
                     this.generateExpressionsList(column.filteringExpressionsTree, this.grid.filteringExpressionsTree.operator, value);
@@ -56341,7 +56340,7 @@ class IgxFilteringService {
         if (this.columnsWithComplexFilter.has(columnId)) {
             return true;
         }
-        const column = this.grid.columnList.find((col) => col.field === columnId);
+        const column = this.grid.columns.find((col) => col.field === columnId);
         const isComplex = column && this.isFilteringTreeComplex(column.filteringExpressionsTree);
         if (isComplex) {
             this.columnsWithComplexFilter.add(columnId);
@@ -59241,7 +59240,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;
             }
@@ -59298,7 +59297,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) {
@@ -59319,7 +59318,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);
@@ -59352,7 +59351,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) {
@@ -60390,6 +60389,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._rendered = false;
         this.DRAG_SCROLL_DELTA = 10;
         this._dataCloneStrategy = new DefaultDataCloneStrategy();
+        this._autoSize = false;
         /**
          * @hidden @internal
          */
@@ -61286,8 +61286,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;
     }
@@ -61300,7 +61300,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.
@@ -61430,6 +61430,12 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     get scrollSize() {
         return this.verticalScrollContainer.getScrollNativeSize();
     }
+    /**
+     * @hidden @internal
+     */
+    get minColumnWidth() {
+        return MINIMUM_COLUMN_WIDTH$2;
+    }
     /**
      * Returns an array containing the filtered sorted data.
      *
@@ -61786,10 +61792,11 @@ 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._autoSize = this.isPercentHeight && this.calcHeight !== this.getDataBasedBodyHeight();
             this.crudService.endEdit(false);
             if (this._summaryRowHeight === 0) {
                 this.summaryService.summaryHeight = 0;
@@ -61815,13 +61822,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--;
@@ -61888,7 +61895,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
@@ -62151,7 +62158,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;
         }
@@ -62411,7 +62418,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get columns() {
-        return this._rendered ? this._columns : [];
+        return this._columns || [];
     }
     /**
      * Gets an array of the pinned `IgxColumnComponent`s.
@@ -62472,7 +62479,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 &&
@@ -62490,7 +62497,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;
     }
     /**
@@ -62619,14 +62626,14 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @internal
      */
     get showAddButton() {
-        return this.rowEditable && this.dataView.length === 0 && this.columnList.length > 0;
+        return this.rowEditable && this.dataView.length === 0 && this._columns.length > 0;
     }
     /**
      * @hidden
      * @internal
      */
     get showDragIcons() {
-        return this.rowDraggable && this.columnList.length > this.hiddenColumnsCount;
+        return this.rowDraggable && this._columns.length > this.hiddenColumnsCount;
     }
     /**
      * @hidden
@@ -62688,12 +62695,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);
     }
@@ -62756,7 +62763,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: data, owner: this });
         this.pipeTrigger++;
         this.notifyChanges();
     }
@@ -62783,7 +62790,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) {
@@ -62791,8 +62799,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;
     }
@@ -62811,7 +62818,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);
@@ -62902,7 +62909,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         }
         else {
             if (this._sortingOptions.mode === 'single') {
-                this.columns.forEach((col) => {
+                this._columns.forEach((col) => {
                     if (!(col.field === expression.fieldName)) {
                         this.clearSort(col.field);
                     }
@@ -63264,7 +63271,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.
@@ -63275,7 +63282,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.
@@ -63286,7 +63293,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.
@@ -63297,7 +63304,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;
     }
     /**
@@ -63311,7 +63318,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;
     }
@@ -63352,7 +63359,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     get hasColumnLayouts() {
-        return !!this.columnList.some(col => col.columnLayout);
+        return !!this._columns.some(col => col.columnLayout);
     }
     /**
      * @hidden @internal
@@ -63450,8 +63457,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             return '0px';
         }
         const columnWidth = Math.floor(!Number.isFinite(sumExistingWidths) ?
-            Math.max(computedWidth / columnsToSize, MINIMUM_COLUMN_WIDTH$2) :
-            Math.max((computedWidth - sumExistingWidths) / columnsToSize, MINIMUM_COLUMN_WIDTH$2));
+            Math.max(computedWidth / columnsToSize, this.minColumnWidth) :
+            Math.max((computedWidth - sumExistingWidths) / columnsToSize, this.minColumnWidth));
         return columnWidth + 'px';
     }
     /**
@@ -63807,7 +63814,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     selectAllColumns() {
-        this.selectColumns(this.columnList.filter(c => !c.columnGroup));
+        this.selectColumns(this._columns.filter(c => !c.columnGroup));
     }
     /**
      *
@@ -63916,7 +63923,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     navigateTo(rowIndex, visibleColIndex = -1, cb = null) {
         const totalItems = this.totalItemCount ?? 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)) {
@@ -63962,7 +63969,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 };
@@ -63997,7 +64004,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 };
@@ -64417,9 +64424,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     _derivePossibleWidth() {
         if (!this.columnWidthSetByUser) {
-            this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH$2 + 'px';
+            this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : this.minColumnWidth + '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';
@@ -64472,7 +64479,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);
@@ -64484,18 +64492,17 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     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));
+            .filter((c) => c.pinned);
         this._unpinnedColumns = newColumns.filter((c) => !c.pinned);
-        this.columnList.reset(newColumns);
-        this.columnList.notifyOnChanges();
-        this._columns = this.columnList.toArray();
+        this._columns = newColumns;
+        this.resetCaches();
     }
     /**
      * @hidden
      */
     _resetColumnList(list) {
         if (!list) {
-            list = this.columnList.toArray();
+            list = this._columns;
         }
         let newList = [];
         list.filter(c => c.level === 0).forEach(p => {
@@ -64543,7 +64550,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$))
@@ -64551,6 +64561,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             this.onColumnsChanged(change);
         });
     }
+    getColumnList() {
+        return this.columnList.toArray();
+    }
     /**
      * @hidden
      */
@@ -64592,10 +64605,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) {
@@ -64610,7 +64623,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) {
@@ -64819,10 +64832,13 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this.tbody.nativeElement.style.display = 'none';
         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) || this._autoSize) {
             // 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();
+            this._autoSize = false;
+            res = this.checkContainerSizeChange();
+        }
         this.tbody.nativeElement.style.display = '';
         return res;
     }
@@ -64906,7 +64922,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;
         }
@@ -64918,10 +64934,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) :
@@ -64933,18 +64949,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();
@@ -64955,11 +64970,11 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * @hidden
      */
     reinitPinStates() {
-        this._pinnedColumns = this.columnList
+        this._pinnedColumns = this._columns
             .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._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) {
         let columnsArray;
@@ -65138,7 +65153,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         // Make sure we don't exceed unpinned area min width and get pinned and unpinned col collections.
         // We take into account top level columns (top level groups and non groups).
         // If top level is unpinned the pinning handles all children to be unpinned as well.
-        for (const column of this.columnList) {
+        for (const column of this._columns) {
             if (column.pinned && !column.parent) {
                 pinnedColumns.push(column);
             }
@@ -65214,7 +65229,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         const cols = this.hasColumnLayouts ?
             this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup);
         cols.forEach((item) => {
-            colSum += parseInt((item.calcWidth || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH$2;
+            colSum += parseInt((item.calcWidth || item.defaultWidth), 10) || this.minColumnWidth;
         });
         if (!colSum) {
             return null;
@@ -65231,7 +65246,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     _columnsReordered(column) {
         this.notifyChanges();
         if (this.hasColumnLayouts) {
-            this.columnList.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();
@@ -65393,7 +65408,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;
         }
@@ -66473,7 +66488,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);
         }
@@ -68348,7 +68363,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             this._applyGrouping();
             this.notifyChanges();
         }
-        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));
@@ -68412,7 +68427,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;
@@ -68466,7 +68481,7 @@ class IgxGridComponent 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 IgxGridRow && !row.data?.detailsData && column) {
             return new IgxGridCell(this, rowIndex, column.field);
         }
@@ -68729,7 +68744,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.
@@ -68853,7 +68868,7 @@ class IgxGridComponent extends IgxGridBaseDirective {
             this._groupRowTemplate = this.groupTemplate.template;
         }
         this.detailTemplate.changes.subscribe(() => this.trackChanges = (_, rec) => (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();
@@ -68901,9 +68916,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) {
@@ -69033,7 +69048,7 @@ class IgxGridComponent 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 IgxGridRow && !row.data?.detailsData && column) {
             if (this.pagingMode === 1 && this.gridAPI.grid.page !== 0) {
                 row.index = rowIndex + this.paginator.perPage * this.paginator.page;
@@ -69055,7 +69070,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);
         }
@@ -69157,7 +69172,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;
@@ -69332,7 +69347,7 @@ class IgxGridStateDirective {
             },
             columns: {
                 getFeatureState: (context) => {
-                    const gridColumns = context.currGrid.columnList.map((c) => ({
+                    const gridColumns = context.currGrid.columns.map((c) => ({
                         pinned: c.pinned,
                         sortable: c.sortable,
                         filterable: c.filterable,
@@ -69392,6 +69407,9 @@ class IgxGridStateDirective {
                         }
                     });
                     context.grid.updateColumns(newColumns);
+                    newColumns.forEach(col => {
+                        context.grid.columnInit.emit(col);
+                    });
                 }
             },
             groupBy: {
@@ -69641,13 +69659,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);
@@ -69698,8 +69714,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;
@@ -70034,14 +70050,14 @@ class IgxColumnLayoutComponent extends IgxColumnGroupComponent {
     set hidden(value) {
         this._hidden = value;
         this.children.forEach(child => child.hidden = value);
-        if (this.grid && this.grid.columnList && this.grid.columnList.length > 0) {
+        if (this.grid && this.grid.columns && this.grid.columns.length > 0) {
             // reset indexes in case columns are hidden/shown runtime
             const columns = this.grid && this.grid.pinnedColumns && this.grid.unpinnedColumns ?
                 this.grid.pinnedColumns.concat(this.grid.unpinnedColumns) : [];
             if (!this._hidden && !columns.find(c => c.field === this.field)) {
                 this.grid.resetColumnCollections();
             }
-            this.grid.columnList.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
+            this.grid.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
     }
     /**
@@ -71968,13 +71984,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();
         }
@@ -72025,9 +72041,9 @@ class IgxTreeGridGroupByAreaComponent extends IgxGroupByAreaDirective {
         this.updateColumnsVisibility();
     }
     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;
@@ -72040,7 +72056,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;
@@ -73520,7 +73536,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);
         }
@@ -73675,7 +73691,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: data, owner: this });
         this.pipeTrigger++;
         this.notifyChanges();
     }
@@ -73782,7 +73798,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.
@@ -73857,7 +73888,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);
         }
@@ -73876,7 +73907,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);
         }
@@ -73934,7 +73965,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);
     }
     generateDataFields(data) {
         return super.generateDataFields(data).filter(field => field !== this.childDataKey);
@@ -74017,8 +74048,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);
     }
@@ -74120,6 +74151,7 @@ IgxTreeGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
         IgxGridCRUDService,
         IgxGridSummaryService,
         IgxGridNavigationService,
+        IgxColumnResizingService,
         { provide: IgxGridSelectionService, useClass: IgxTreeGridSelectionService },
         { provide: IGX_GRID_SERVICE_BASE, useClass: IgxTreeGridAPIService },
         { provide: IGX_GRID_BASE, useExisting: IgxTreeGridComponent },
@@ -74133,6 +74165,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         IgxGridCRUDService,
                         IgxGridSummaryService,
                         IgxGridNavigationService,
+                        IgxColumnResizingService,
                         { provide: IgxGridSelectionService, useClass: IgxTreeGridSelectionService },
                         { provide: IGX_GRID_SERVICE_BASE, useClass: IgxTreeGridAPIService },
                         { provide: IGX_GRID_BASE, useExisting: IgxTreeGridComponent },
@@ -74926,7 +74959,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;
     }
@@ -74969,13 +75002,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);
@@ -75216,6 +75248,7 @@ class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective {
         this.rootGrid = null;
         this.layout_id = `igx-row-island-`;
         this.isInit = false;
+        this._childColumns = [];
     }
     /**
      * Sets if all immediate children of the grids for this `IgxRowIslandComponent` should be expanded/collapsed.
@@ -75305,7 +75338,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();
@@ -75313,7 +75347,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) {
@@ -75400,15 +75434,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;
             }
@@ -76097,7 +76125,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);
         }
@@ -76320,7 +76348,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);
         }
@@ -76339,7 +76367,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);
         }
@@ -76615,8 +76643,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);
     }
@@ -76624,16 +76652,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.grid === this);
-            if (cols.length > 0 || this.autoGenerate) {
-                this.columnList.reset(cols);
-                super.onColumnsChanged(this.columnList);
-            }
         });
     }
     _shouldAutoSize(renderedHeight) {
@@ -76649,8 +76686,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);
             }
         }
@@ -76678,6 +76715,7 @@ IgxHierarchicalGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
         { provide: IGX_GRID_SERVICE_BASE, useClass: IgxHierarchicalGridAPIService },
         { provide: IGX_GRID_BASE, useExisting: IgxHierarchicalGridComponent },
         IgxGridSummaryService,
+        IgxColumnResizingService,
         IgxFilteringService,
         IgxHierarchicalGridNavigationService,
         IgxForOfSyncService,
@@ -76692,6 +76730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
                         { provide: IGX_GRID_SERVICE_BASE, useClass: IgxHierarchicalGridAPIService },
                         { provide: IGX_GRID_BASE, useExisting: IgxHierarchicalGridComponent },
                         IgxGridSummaryService,
+                        IgxColumnResizingService,
                         IgxFilteringService,
                         IgxHierarchicalGridNavigationService,
                         IgxForOfSyncService,
@@ -81470,17 +81509,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.minWidth = '0';
+        /**
+         * @hidden @internal
+         * 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;
+        this.minHeight = '0';
         /**
          * @hidden @internal
-         * Gets/Sets the `maxHeight` and `maxWidth` properties of the current `IgxSplitterPaneComponent`.
+         * 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
@@ -81576,7 +81665,7 @@ class IgxSplitterPaneComponent {
     }
 }
 IgxSplitterPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxSplitterPaneComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-IgxSplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxSplitterPaneComponent, selector: "igx-splitter-pane", inputs: { minSize: "minSize", maxSize: "maxSize", resizable: "resizable", size: "size", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "style.display": "this.display", "style.order": "this.order", "style.overflow": "this.overflow", "style.min-height": "this.minHeight", "style.min-width": "this.minHeight", "style.max-height": "this.maxHeight", "style.max-width": "this.maxHeight", "style.flex": "this.flex" } }, ngImport: i0, template: "<ng-content></ng-content>" });
+IgxSplitterPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: IgxSplitterPaneComponent, selector: "igx-splitter-pane", inputs: { minSize: "minSize", maxSize: "maxSize", resizable: "resizable", size: "size", collapsed: "collapsed" }, outputs: { collapsedChange: "collapsedChange" }, host: { properties: { "style.display": "this.display", "style.order": "this.order", "style.overflow": "this.overflow", "style.min-width": "this.minWidth", "style.max-width": "this.maxWidth", "style.min-height": "this.minHeight", "style.max-height": "this.maxHeight", "style.flex": "this.flex" } }, ngImport: i0, template: "<ng-content></ng-content>" });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: IgxSplitterPaneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'igx-splitter-pane', template: "<ng-content></ng-content>" }]
@@ -81597,18 +81686,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImpor
             }], overflow: [{
                 type: HostBinding,
                 args: ['style.overflow']
+            }], minWidth: [{
+                type: HostBinding,
+                args: ['style.min-width']
+            }], maxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
             }], 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']
             }], size: [{
                 type: Input
             }], flex: [{
@@ -81727,6 +81816,7 @@ class IgxSplitterComponent {
     set type(value) {
         this._type = value;
         this.resetPaneSizes();
+        this.panes?.notifyOnChanges();
     }
     /**
      * @hidden @internal
@@ -81831,7 +81921,17 @@ class IgxSplitterComponent {
      * This method inits panes with properties.
      */
     initPanes() {
-        this.panes.forEach(pane => pane.owner = this);
+        this.panes.forEach(pane => {
+            pane.owner = this;
+            if (this.type === SplitterType.Horizontal) {
+                pane.minWidth = pane.minSize ?? '0';
+                pane.maxWidth = pane.maxSize ?? '100%';
+            }
+            else {
+                pane.minHeight = pane.minSize ?? '0';
+                pane.maxHeight = pane.maxSize ?? '100%';
+            }
+        });
         this.assignFlexOrder();
         if (this.panes.filter(x => x.collapsed).length > 0) {
             // if any panes are collapsed, reset sizes.
@@ -81845,7 +81945,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%';
+            });
         }
     }
     /**
@@ -86265,6 +86371,17 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
             this.onDensityChanged.emit(densityChangedArgs);
         }
     }
+    /**
+     * @hidden @internal
+     */
+    get minColumnWidth() {
+        if (this.superCompactMode) {
+            return MINIMUM_COLUMN_WIDTH_SUPER_COMPACT;
+        }
+        else {
+            return MINIMUM_COLUMN_WIDTH;
+        }
+    }
     get pivotKeys() {
         return this.pivotConfiguration.pivotKeys || DEFAULT_PIVOT_KEYS;
     }
@@ -86544,7 +86661,7 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
      */
     ngAfterContentInit() {
         // ignore any user defined columns and auto-generate based on pivot config.
-        this.columnList.reset([]);
+        this.updateColumns([]);
         Promise.resolve().then(() => {
             this.setupColumns();
         });
@@ -87417,8 +87534,8 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
                 }
             }
         });
+        this.updateColumns(columns);
         this.reflow();
-        this.columnList.reset(columns);
         if (data && data.length > 0) {
             this.shouldGenerate = false;
         }
@@ -87470,7 +87587,6 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
                 ref.instance.header = value.displayName;
                 ref.instance.field = value.member;
                 ref.instance.parent = parent;
-                ref.instance.width = MINIMUM_COLUMN_WIDTH + 'px';
                 ref.instance.sortable = true;
                 ref.instance.dataType = value.dataType || this.resolveDataTypes(data[0][value.member]);
                 ref.instance.formatter = value.formatter;
@@ -87549,7 +87665,9 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         ref.instance.header = parent != null ? key.split(parent.header + this.pivotKeys.columnDimensionSeparator)[1] : key;
         ref.instance.field = key;
         ref.instance.parent = parent;
-        ref.instance.width = this.resolveColumnDimensionWidth(value.dimension);
+        if (value.dimension.width) {
+            ref.instance.width = value.dimension.width;
+        }
         const valueDefinition = this.values[0];
         ref.instance.dataType = valueDefinition?.dataType || this.resolveDataTypes(data[0][valueDefinition?.member]);
         ref.instance.formatter = valueDefinition?.formatter;
@@ -87561,20 +87679,21 @@ class IgxPivotGridComponent extends IgxGridBaseDirective {
         if (dim.width) {
             return dim.width;
         }
-        return this.superCompactMode ? MINIMUM_COLUMN_WIDTH_SUPER_COMPACT + 'px' : MINIMUM_COLUMN_WIDTH + 'px';
+        return this.minColumnWidth + 'px';
     }
     getMeasureChildren(colFactory, data, parent, hidden, parentWidth) {
         const cols = [];
         const count = this.values.length;
-        const width = parentWidth ? parseInt(parentWidth, 10) / count :
-            this.superCompactMode ? MINIMUM_COLUMN_WIDTH_SUPER_COMPACT : MINIMUM_COLUMN_WIDTH;
+        const childWidth = parseInt(parentWidth, 10) / count;
         const isPercent = parentWidth && parentWidth.indexOf('%') !== -1;
         this.values.forEach(val => {
             const ref = colFactory.create(this.viewRef.injector);
             ref.instance.header = val.displayName || val.member;
             ref.instance.field = parent.field + this.pivotKeys.columnDimensionSeparator + val.member;
             ref.instance.parent = parent;
-            ref.instance.width = isPercent ? width + '%' : width + 'px';
+            if (parentWidth) {
+                ref.instance.width = isPercent ? childWidth + '%' : childWidth + 'px';
+            }
             ref.instance.hidden = hidden;
             ref.instance.sortable = true;
             ref.instance.dataType = val.dataType || this.resolveDataTypes(data[0][val.member]);