igniteui-angular 12.3.19 → 12.3.20

package/fesm2015/igniteui-angular.js

@@ -4916,6 +4916,13 @@ class IgxForOfDirective {
             this.scrollComponent.nativeElement.scrollTop = val;
         }
     }
+    /**
+     * @hidden
+     */
+    get isRTL() {
+        const dir = window.getComputedStyle(this.dc.instance._viewContainer.element.nativeElement).getPropertyValue('direction');
+        return dir === 'rtl';
+    }
     get sizesCache() {
         return this._sizesCache;
     }
@@ -5138,7 +5145,7 @@ class IgxForOfDirective {
             return;
         }
         if (this.igxForScrollOrientation === 'horizontal') {
-            this.scrollPosition = nextScroll;
+            this.scrollPosition = this.isRTL ? -nextScroll : nextScroll;
         }
         else {
             const maxVirtScrollTop = this._virtHeight - containerSize;
@@ -5159,7 +5166,7 @@ class IgxForOfDirective {
      * ```
      */
     scrollNext() {
-        const scr = Math.ceil(this.scrollPosition);
+        const scr = Math.abs(Math.ceil(this.scrollPosition));
         const endIndex = this.getIndexAt(scr + parseInt(this.igxForContainerSize, 10), this.sizesCache);
         this.scrollTo(endIndex);
     }
@@ -5182,7 +5189,7 @@ class IgxForOfDirective {
      */
     scrollNextPage() {
         if (this.igxForScrollOrientation === 'horizontal') {
-            this.scrollPosition += parseInt(this.igxForContainerSize, 10);
+            this.scrollPosition += this.isRTL ? -parseInt(this.igxForContainerSize, 10) : parseInt(this.igxForContainerSize, 10);
         }
         else {
             this.addScrollTop(parseInt(this.igxForContainerSize, 10));
@@ -5197,7 +5204,7 @@ class IgxForOfDirective {
      */
     scrollPrevPage() {
         if (this.igxForScrollOrientation === 'horizontal') {
-            this.scrollPosition -= parseInt(this.igxForContainerSize, 10);
+            this.scrollPosition -= this.isRTL ? -parseInt(this.igxForContainerSize, 10) : parseInt(this.igxForContainerSize, 10);
         }
         else {
             const containerSize = (parseInt(this.igxForContainerSize, 10));
@@ -5515,9 +5522,16 @@ class IgxForOfDirective {
             return;
         }
         const prevStartIndex = this.state.startIndex;
+        const scrLeft = event.target.scrollLeft;
         // Updating horizontal chunks
-        const scrollOffset = this.fixedUpdateAllElements(event.target.scrollLeft);
-        this.dc.instance._viewContainer.element.nativeElement.style.left = -scrollOffset + 'px';
+        const scrollOffset = this.fixedUpdateAllElements(Math.abs(event.target.scrollLeft));
+        if (scrLeft < 0) {
+            // RTL
+            this.dc.instance._viewContainer.element.nativeElement.style.left = scrollOffset + 'px';
+        }
+        else {
+            this.dc.instance._viewContainer.element.nativeElement.style.left = -scrollOffset + 'px';
+        }
         this.dc.changeDetectorRef.detectChanges();
         if (prevStartIndex !== this.state.startIndex) {
             this.chunkLoad.emit(this.state);
@@ -6064,8 +6078,15 @@ class IgxGridForOfDirective extends IgxForOfDirective {
             return;
         }
         // Updating horizontal chunks
-        const scrollOffset = this.fixedUpdateAllElements(scrollAmount);
-        this.dc.instance._viewContainer.element.nativeElement.style.left = -scrollOffset + 'px';
+        const scrollOffset = this.fixedUpdateAllElements(Math.abs(scrollAmount));
+        if (scrollAmount < 0) {
+            // RTL
+            this.dc.instance._viewContainer.element.nativeElement.style.left = scrollOffset + 'px';
+        }
+        else {
+            // LTR
+            this.dc.instance._viewContainer.element.nativeElement.style.left = -scrollOffset + 'px';
+        }
     }
     getItemSize(item) {
         let size = 0;
@@ -44274,9 +44295,15 @@ class IgxGridNavigationService {
             return;
         }
         if (shift && alt && this.isToggleKey(key) && !column.columnGroup && column.groupable) {
-            direction = direction ? SortingDirection.Desc : SortingDirection.Asc;
+            direction = direction || SortingDirection.Asc;
             if (key.includes('right')) {
-                this.grid.groupBy({ fieldName: column.field, dir: direction, ignoreCase: false });
+                this.grid.groupBy({
+                    fieldName: column.field,
+                    dir: direction,
+                    ignoreCase: column.sortingIgnoreCase,
+                    strategy: column.sortStrategy,
+                    groupingComparer: column.groupingComparer,
+                });
             }
             else {
                 this.grid.clearGrouping(column.field);
@@ -45541,6 +45568,7 @@ class IgxGroupByAreaDirective {
         this.updateSorting(id);
     }
     onDragDrop(event) {
+        var _a;
         const drag = event.detail.owner;
         if (drag instanceof IgxColumnMovingDragDirective) {
             const column = drag.column;
@@ -45551,7 +45579,7 @@ class IgxGroupByAreaDirective {
             if (column.groupable && !isGrouped && !column.columnGroup && !!column.field) {
                 const groupingExpression = {
                     fieldName: column.field,
-                    dir: SortingDirection.Asc,
+                    dir: ((_a = this.grid.sortingExpressions.find(expr => expr.fieldName === column.field)) === null || _a === void 0 ? void 0 : _a.dir) || SortingDirection.Asc,
                     ignoreCase: column.sortingIgnoreCase,
                     strategy: column.sortStrategy,
                     groupingComparer: column.groupingComparer
@@ -51620,7 +51648,8 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         this._setupServices();
         this._setupListeners();
         this.rowListDiffer = this.differs.find([]).create(null);
-        this.columnListDiffer = this.differs.find([]).create(null);
+        // compare based on field, not on object ref.
+        this.columnListDiffer = this.differs.find([]).create((index, col) => col.field);
         this.calcWidth = this.width && this.width.indexOf('%') === -1 ? parseInt(this.width, 10) : 0;
         this.shouldGenerate = this.autoGenerate;
     }
@@ -54021,6 +54050,20 @@ 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.
      *
@@ -54232,9 +54275,7 @@ class IgxGridBaseDirective extends DisplayDensityBase {
         const list = this.columnList.toArray();
         this._reorderColumns(from, to, pos, list);
         const newList = this._resetColumnList(list);
-        this.columnList.reset(newList);
-        this.columnList.notifyOnChanges();
-        this._columns = this.columnList.toArray();
+        this.updateColumns(newList);
     }
     /**
      * @hidden
@@ -54662,6 +54703,20 @@ class IgxGridBaseDirective extends DisplayDensityBase {
     generateDataFields(data) {
         return Object.keys(data && data.length !== 0 ? data[0] : []);
     }
+    /**
+     * @hidden
+     * @internal
+     */
+    _getResolvedDataIndex(index) {
+        let newIndex = index;
+        if ((index < 0 || index >= this.dataView.length) && this.pagingMode === 1 && this.paginator.page !== 0) {
+            newIndex = index - this.paginator.perPage * this.paginator.page;
+        }
+        else if (this.gridAPI.grid.verticalScrollContainer.isRemote) {
+            newIndex = index - this.gridAPI.grid.virtualizationState.startIndex;
+        }
+        return newIndex;
+    }
     /**
      * @hidden
      */
@@ -54704,10 +54759,12 @@ class IgxGridBaseDirective extends DisplayDensityBase {
      */
     reinitPinStates() {
         this._pinnedColumns = this.columnList
-            .filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
+            .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) => a.index - b.index);
+                .sort((a, b) => this._unpinnedColumns.findIndex(x => x.field === a.field) -
+                this._unpinnedColumns.findIndex(x => x.field === b.field));
     }
     extractDataFromSelection(source, formatters = false, headers = false, columnData) {
         var _a;
@@ -62613,19 +62670,8 @@ class IgxGridComponent extends IgxGridBaseDirective {
      */
     createRow(index, data) {
         let row;
-        let rec;
-        if (index < 0 || index >= this.dataView.length) {
-            if (this.pagingMode === 1 && this.paginator.page !== 0) {
-                rec = data !== null && data !== void 0 ? data : this.dataView[index - this.paginator.perPage * this.paginator.page];
-            }
-            else if (index >= this.dataView.length) {
-                const virtIndex = index - this.gridAPI.grid.virtualizationState.startIndex;
-                rec = data !== null && data !== void 0 ? data : this.dataView[virtIndex];
-            }
-        }
-        else {
-            rec = data !== null && data !== void 0 ? data : this.dataView[index];
-        }
+        const dataIndex = this._getResolvedDataIndex(index);
+        const rec = data !== null && data !== void 0 ? data : this.dataView[dataIndex];
         if (rec && this.isGroupByRecord(rec)) {
             row = new IgxGroupByRow(this, index, rec);
         }
@@ -62897,8 +62943,7 @@ class IgxGridStateDirective {
                             newColumns.push(ref.instance);
                         }
                     });
-                    context.currGrid.columnList.reset(newColumns);
-                    context.currGrid.columnList.notifyOnChanges();
+                    context.grid.updateColumns(newColumns);
                 }
             },
             groupBy: {
@@ -63210,7 +63255,8 @@ class IgxGridStateDirective {
                     expr.searchVal = new Set(expr.searchVal);
                 }
                 else {
-                    expr.searchVal = expr.searchVal && (dataType === 'date') ? new Date(Date.parse(expr.searchVal)) : expr.searchVal;
+                    expr.searchVal = expr.searchVal && (dataType === 'date' || dataType === 'dateTime')
+                        ? new Date(Date.parse(expr.searchVal)) : expr.searchVal;
                 }
                 expr.condition = this.generateFilteringCondition(dataType, expr.condition.name);
                 expressionsTree.filteringOperands.push(expr);
@@ -65969,7 +66015,8 @@ class IgxTreeGridComponent extends IgxGridBaseDirective {
      */
     createRow(index, data) {
         let row;
-        const rec = data !== null && data !== void 0 ? data : this.dataView[index];
+        const dataIndex = this._getResolvedDataIndex(index);
+        const rec = data !== null && data !== void 0 ? data : this.dataView[dataIndex];
         if (this.isSummaryRow(rec)) {
             row = new IgxSummaryRow(this, index, rec.summaries, GridInstanceType.TreeGrid);
         }
@@ -68952,7 +68999,8 @@ class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective {
      */
     createRow(index, data) {
         let row;
-        const rec = data !== null && data !== void 0 ? data : this.dataView[index];
+        const dataIndex = this._getResolvedDataIndex(index);
+        const rec = data !== null && data !== void 0 ? data : this.dataView[dataIndex];
         if (!row && rec && !rec.childGridsData) {
             row = new IgxHierarchicalGridRow(this, index, rec);
         }
@@ -69303,7 +69351,10 @@ class IgxGridHierarchicalPipe {
             result.push(v);
             const childGridsData = {};
             childKeys.forEach((childKey) => {
-                const childData = v[childKey] ? v[childKey] : null;
+                if (!v[childKey]) {
+                    v[childKey] = [];
+                }
+                const childData = v[childKey];
                 childGridsData[childKey] = childData;
             });
             if (grid.gridAPI.get_row_expansion_state(v)) {