igniteui-angular 12.3.27 → 12.3.28

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';
@@ -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;
@@ -10627,8 +10627,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 +10645,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 +10656,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 +11570,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 +12202,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);
@@ -44525,7 +44525,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 +44582,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 +44603,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 +44637,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 +51028,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 +51042,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.
@@ -51724,13 +51724,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 +51797,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 +52028,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 +52265,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 +52273,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 +52341,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 +52359,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 +52490,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 +52534,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);
     }
@@ -52664,7 +52657,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 +53109,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 +53120,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 +53131,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 +53142,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 +53156,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 +53172,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 +53194,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 +53649,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      * ```
      */
     selectAllColumns() {
-        this.selectColumns(this.columnList.filter(c => !c.columnGroup));
+        this.selectColumns(this._columns.filter(c => !c.columnGroup));
     }
     /**
      *
@@ -53774,7 +53767,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 +53813,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 +53848,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 +54114,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 +54131,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 +54283,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 +54335,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 +54346,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 +54391,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 +54402,9 @@ class IgxGridBaseDirective extends DisplayDensityBase {
             this.onColumnsChanged(change);
         });
     }
+    getColumnList() {
+        return this.columnList.toArray();
+    }
     /**
      * @hidden
      */
@@ -54447,10 +54446,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 +54464,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) {
@@ -54765,7 +54764,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 +54790,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 +54805,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 +54826,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 +55129,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 +55292,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 +55852,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 +56163,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 +61599,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 +62035,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 +62099,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 +62154,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 +62424,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 +62549,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 +62597,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 +62733,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 +62755,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 +62856,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 +63047,9 @@ class IgxGridStateDirective {
                         }
                     });
                     context.grid.updateColumns(newColumns);
+                    newColumns.forEach(col => {
+                        context.grid.columnInit.emit(col);
+                    });
                 }
             },
             groupBy: {
@@ -63292,13 +63291,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 +63346,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 +63386,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 +65414,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 +65499,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 +65514,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 +65738,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);
         }
@@ -66075,7 +66075,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 +66094,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 +66152,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 +66232,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);
     }
@@ -67767,7 +67767,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 +67810,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 +68167,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 +68260,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 +68269,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 +68361,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 +68599,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 +68821,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 +68840,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 +69115,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 +69124,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 +69158,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);
             }
         }