igniteui-angular 12.3.19 → 12.3.20

package/bundles/igniteui-angular.umd.js

@@ -5594,6 +5594,17 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(IgxForOfDirective.prototype, "isRTL", {
+            /**
+             * @hidden
+             */
+            get: function () {
+                var dir = window.getComputedStyle(this.dc.instance._viewContainer.element.nativeElement).getPropertyValue('direction');
+                return dir === 'rtl';
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(IgxForOfDirective.prototype, "sizesCache", {
             get: function () {
                 return this._sizesCache;
@@ -5830,7 +5841,7 @@
                 return;
             }
             if (this.igxForScrollOrientation === 'horizontal') {
-                this.scrollPosition = nextScroll;
+                this.scrollPosition = this.isRTL ? -nextScroll : nextScroll;
             }
             else {
                 var maxVirtScrollTop = this._virtHeight - containerSize;
@@ -5851,7 +5862,7 @@
          * ```
          */
         IgxForOfDirective.prototype.scrollNext = function () {
-            var scr = Math.ceil(this.scrollPosition);
+            var scr = Math.abs(Math.ceil(this.scrollPosition));
             var endIndex = this.getIndexAt(scr + parseInt(this.igxForContainerSize, 10), this.sizesCache);
             this.scrollTo(endIndex);
         };
@@ -5874,7 +5885,7 @@
          */
         IgxForOfDirective.prototype.scrollNextPage = function () {
             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));
@@ -5889,7 +5900,7 @@
          */
         IgxForOfDirective.prototype.scrollPrevPage = function () {
             if (this.igxForScrollOrientation === 'horizontal') {
-                this.scrollPosition -= parseInt(this.igxForContainerSize, 10);
+                this.scrollPosition -= this.isRTL ? -parseInt(this.igxForContainerSize, 10) : parseInt(this.igxForContainerSize, 10);
             }
             else {
                 var containerSize = (parseInt(this.igxForContainerSize, 10));
@@ -6209,9 +6220,16 @@
                 return;
             }
             var prevStartIndex = this.state.startIndex;
+            var scrLeft = event.target.scrollLeft;
             // Updating horizontal chunks
-            var scrollOffset = this.fixedUpdateAllElements(event.target.scrollLeft);
-            this.dc.instance._viewContainer.element.nativeElement.style.left = -scrollOffset + 'px';
+            var 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);
@@ -6778,8 +6796,15 @@
                 return;
             }
             // Updating horizontal chunks
-            var scrollOffset = this.fixedUpdateAllElements(scrollAmount);
-            this.dc.instance._viewContainer.element.nativeElement.style.left = -scrollOffset + 'px';
+            var 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';
+            }
         };
         IgxGridForOfDirective.prototype.getItemSize = function (item) {
             var size = 0;
@@ -49220,9 +49245,15 @@
                 return;
             }
             if (shift && alt && this.isToggleKey(key) && !column.columnGroup && column.groupable) {
-                direction = direction ? exports.SortingDirection.Desc : exports.SortingDirection.Asc;
+                direction = direction || exports.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);
@@ -50684,6 +50715,7 @@
             this.updateSorting(id);
         };
         IgxGroupByAreaDirective.prototype.onDragDrop = function (event) {
+            var _a;
             var drag = event.detail.owner;
             if (drag instanceof IgxColumnMovingDragDirective) {
                 var column_1 = drag.column;
@@ -50694,7 +50726,7 @@
                 if (column_1.groupable && !isGrouped && !column_1.columnGroup && !!column_1.field) {
                     var groupingExpression = {
                         fieldName: column_1.field,
-                        dir: exports.SortingDirection.Asc,
+                        dir: ((_a = this.grid.sortingExpressions.find(function (expr) { return expr.fieldName === column_1.field; })) === null || _a === void 0 ? void 0 : _a.dir) || exports.SortingDirection.Asc,
                         ignoreCase: column_1.sortingIgnoreCase,
                         strategy: column_1.sortStrategy,
                         groupingComparer: column_1.groupingComparer
@@ -57882,7 +57914,8 @@
             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(function (index, col) { return col.field; });
             this.calcWidth = this.width && this.width.indexOf('%') === -1 ? parseInt(this.width, 10) : 0;
             this.shouldGenerate = this.autoGenerate;
         };
@@ -60538,6 +60571,21 @@
                 console.warn('The row with the specified PK or index is outside of the current data view.');
             }
         };
+        /**
+         * Update internal column's collection.
+         *
+         * @hidden
+         */
+        IgxGridBaseDirective.prototype.updateColumns = function (newColumns) {
+            var _this = this;
+            // update internal collections to retain order.
+            this._pinnedColumns = newColumns
+                .filter(function (c) { return c.pinned; }).sort(function (a, b) { return _this._pinnedColumns.indexOf(a) - _this._pinnedColumns.indexOf(b); });
+            this._unpinnedColumns = newColumns.filter(function (c) { return !c.pinned; });
+            this.columnList.reset(newColumns);
+            this.columnList.notifyOnChanges();
+            this._columns = this.columnList.toArray();
+        };
         /**
          * Enters add mode by spawning the UI at the specified index.
          *
@@ -60762,9 +60810,7 @@
             var list = this.columnList.toArray();
             this._reorderColumns(from, to, pos, list);
             var newList = this._resetColumnList(list);
-            this.columnList.reset(newList);
-            this.columnList.notifyOnChanges();
-            this._columns = this.columnList.toArray();
+            this.updateColumns(newList);
         };
         /**
          * @hidden
@@ -61201,6 +61247,20 @@
         IgxGridBaseDirective.prototype.generateDataFields = function (data) {
             return Object.keys(data && data.length !== 0 ? data[0] : []);
         };
+        /**
+         * @hidden
+         * @internal
+         */
+        IgxGridBaseDirective.prototype._getResolvedDataIndex = function (index) {
+            var 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
          */
@@ -61246,10 +61306,12 @@
         IgxGridBaseDirective.prototype.reinitPinStates = function () {
             var _this = this;
             this._pinnedColumns = this.columnList
-                .filter(function (c) { return c.pinned; }).sort(function (a, b) { return _this._pinnedColumns.indexOf(a) - _this._pinnedColumns.indexOf(b); });
+                .filter(function (c) { return c.pinned; })
+                .sort(function (a, b) { return _this._pinnedColumns.indexOf(a) - _this._pinnedColumns.indexOf(b); });
             this._unpinnedColumns = this.hasColumnGroups ? this.columnList.filter(function (c) { return !c.pinned; }) :
                 this.columnList.filter(function (c) { return !c.pinned; })
-                    .sort(function (a, b) { return a.index - b.index; });
+                    .sort(function (a, b) { return _this._unpinnedColumns.findIndex(function (x) { return x.field === a.field; }) -
+                    _this._unpinnedColumns.findIndex(function (x) { return x.field === b.field; }); });
         };
         IgxGridBaseDirective.prototype.extractDataFromSelection = function (source, formatters, headers, columnData) {
             var e_4, _h, e_5, _j, e_6, _k;
@@ -70259,19 +70321,8 @@
          */
         IgxGridComponent.prototype.createRow = function (index, data) {
             var row;
-            var 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) {
-                    var 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];
-            }
+            var dataIndex = this._getResolvedDataIndex(index);
+            var rec = data !== null && data !== void 0 ? data : this.dataView[dataIndex];
             if (rec && this.isGroupByRecord(rec)) {
                 row = new IgxGroupByRow(this, index, rec);
             }
@@ -70582,8 +70633,7 @@
                                 newColumns.push(ref_1.instance);
                             }
                         });
-                        context.currGrid.columnList.reset(newColumns);
-                        context.currGrid.columnList.notifyOnChanges();
+                        context.grid.updateColumns(newColumns);
                     }
                 },
                 groupBy: {
@@ -70917,7 +70967,8 @@
                         expr_1.searchVal = new Set(expr_1.searchVal);
                     }
                     else {
-                        expr_1.searchVal = expr_1.searchVal && (dataType === 'date') ? new Date(Date.parse(expr_1.searchVal)) : expr_1.searchVal;
+                        expr_1.searchVal = expr_1.searchVal && (dataType === 'date' || dataType === 'dateTime')
+                            ? new Date(Date.parse(expr_1.searchVal)) : expr_1.searchVal;
                     }
                     expr_1.condition = this_1.generateFilteringCondition(dataType, expr_1.condition.name);
                     expressionsTree.filteringOperands.push(expr_1);
@@ -74016,7 +74067,8 @@
          */
         IgxTreeGridComponent.prototype.createRow = function (index, data) {
             var row;
-            var rec = data !== null && data !== void 0 ? data : this.dataView[index];
+            var dataIndex = this._getResolvedDataIndex(index);
+            var rec = data !== null && data !== void 0 ? data : this.dataView[dataIndex];
             if (this.isSummaryRow(rec)) {
                 row = new IgxSummaryRow(this, index, rec.summaries, exports.GridInstanceType.TreeGrid);
             }
@@ -77383,7 +77435,8 @@
          */
         IgxHierarchicalGridComponent.prototype.createRow = function (index, data) {
             var row;
-            var rec = data !== null && data !== void 0 ? data : this.dataView[index];
+            var dataIndex = this._getResolvedDataIndex(index);
+            var rec = data !== null && data !== void 0 ? data : this.dataView[dataIndex];
             if (!row && rec && !rec.childGridsData) {
                 row = new IgxHierarchicalGridRow(this, index, rec);
             }
@@ -77776,7 +77829,10 @@
                 result.push(v);
                 var childGridsData = {};
                 childKeys.forEach(function (childKey) {
-                    var childData = v[childKey] ? v[childKey] : null;
+                    if (!v[childKey]) {
+                        v[childKey] = [];
+                    }
+                    var childData = v[childKey];
                     childGridsData[childKey] = childData;
                 });
                 if (grid.gridAPI.get_row_expansion_state(v)) {