Merge branch 'master' into pbozhinov/fix-7416

Author: ChronosSF

CHANGELOG.md

@@ -22,7 +22,7 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxHierarchicalGrid`
     - `onGridInitialized` - New output has been exposed. Emitted after a grid is being initialized for the corresponding row island.
-
+-  **Behavioral Change** - When moving a column `DropPosition.None` is now acting like `DropPosition.AfterDropTarget`.
 ## 9.1.0
 
 ### General

ROADMAP.md

@@ -19,19 +19,19 @@ To Be Updated
 
 ## Milestone 11 (Released June 2nd, 2020)
 
-1. Dock Manger [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
-2. Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
-3. Keyboard Navigation Enhancement [#6755](https://github.com/IgniteUI/igniteui-angular/issues/6755)
-4. Column freezing/Pinning on the right (igx-grid) [#5879](https://github.com/IgniteUI/igniteui-angular/issues/5879)
-5. Column Selection for IgxGrid [#6578](https://github.com/IgniteUI/igniteui-angular/issues/6578)
-6. Splitter [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
-7. Row Pinning IgxGrid [#6640](https://github.com/IgniteUI/igniteui-angular/issues/6640)
-8. Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
-9. Slider does not support RTL [#5212](https://github.com/igniteui/igniteui-angular/issues/5212)
-10. Circular Progress Indicator does not support RTL [#5903](https://github.com/igniteui/igniteui-angular/issues/5903)
-11. Action Strip [#6941](https://github.com/IgniteUI/igniteui-angular/issues/6941)
-12. Theme igx-component scrollbars [#6675](https://github.com/IgniteUI/igniteui-angular/issues/6675)
-13. Use CSS variables by default [#6803](https://github.com/IgniteUI/igniteui-angular/issues/6675)
+1.  **[DONE]** Dock Manger - Public Preview [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)
+2.  **[DONE]** Range Date Picker [#5732](https://github.com/IgniteUI/igniteui-angular/issues/5732)
+3.  **[DONE]** Keyboard Navigation Enhancement [#6755](https://github.com/IgniteUI/igniteui-angular/issues/6755)
+4.  **[DONE]** Column freezing/Pinning on the right (igx-grid) [#5879](https://github.com/IgniteUI/igniteui-angular/issues/5879)
+5.  **[DONE]** Column Selection for IgxGrid [#6578](https://github.com/IgniteUI/igniteui-angular/issues/6578)
+6.  **[DONE]** Splitter [#6639](https://github.com/IgniteUI/igniteui-angular/issues/6639)
+7.  **[DONE]** Row Pinning IgxGrid [#6640](https://github.com/IgniteUI/igniteui-angular/issues/6640)
+8.  **[DONE]** Data Analysis Directive [#1752](https://github.com/IgniteUI/igniteui-angular-samples/issues/1752)
+9.  **[DONE]** Slider does not support RTL [#5212](https://github.com/igniteui/igniteui-angular/issues/5212)
+10.  **[DONE]** Circular Progress Indicator does not support RTL [#5903](https://github.com/igniteui/igniteui-angular/issues/5903)
+11.  **[DONE]** Action Strip [#6941](https://github.com/IgniteUI/igniteui-angular/issues/6941)
+12.  **[DONE]** Theme igx-component scrollbars [#6675](https://github.com/IgniteUI/igniteui-angular/issues/6675)
+13.  **[DONE]** Use CSS variables by default [#6803](https://github.com/IgniteUI/igniteui-angular/issues/6675)
 
 ## Milestone 10 (Released February 10th, 2020)
 

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -179,7 +179,26 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
      * this.parentVirtDir.totalItemCount = data.Count;
      * ```
      */
-    public totalItemCount: number = null;
+    public get totalItemCount() {
+        return this._totalItemCount;
+    }
+
+    public set totalItemCount(val) {
+        if (this._totalItemCount !== val) {
+            this._totalItemCount = val;
+            // update sizes in case total count changes.
+            const newSize = this.initSizesCache(this.igxForOf);
+            const sizeDiff = this.scrollComponent.size - newSize;
+            this.scrollComponent.size = newSize;
+            const lastChunkExceeded = this.state.startIndex + this.state.chunkSize > val;
+            if (lastChunkExceeded) {
+                this.state.startIndex = val - this.state.chunkSize;
+            }
+            this._adjustScrollPositionAfterSizeChange(sizeDiff);
+        }
+    }
+
+    private _totalItemCount: number = null;
 
     /**
      * An event that is emitted after a new chunk has been loaded.
@@ -320,7 +339,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     /**
      * @hidden
      */
-    protected get isRemote(): boolean {
+    public get isRemote(): boolean {
         return this.totalItemCount !== null;
     }
 
@@ -1117,13 +1136,17 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
         const newHeight = this.initSizesCache(this.igxForOf);
 
         const diff = oldHeight - newHeight;
+        this._adjustScrollPositionAfterSizeChange(diff);
+    }
 
+    private _adjustScrollPositionAfterSizeChange(sizeDiff) {
         // if data has been changed while container is scrolled
         // should update scroll top/left according to change so that same startIndex is in view
-        if (Math.abs(diff) > 0 && this.scrollPosition > 0) {
+        if (Math.abs(sizeDiff) > 0 && this.scrollPosition > 0) {
             this.recalcUpdateSizes();
             const offset = parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
-            this.scrollPosition = this.sizesCache[this.state.startIndex] - offset;
+            const newSize = this.sizesCache[this.state.startIndex] - offset;
+            this.scrollPosition = newSize === this.scrollPosition ? newSize + 1 : newSize;
         }
     }
 
@@ -1525,7 +1548,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         if (changes && !this.isRemote) {
             newHeight = this.handleCacheChanges(changes);
         } else {
-            newHeight = this.initSizesCache(this.igxForOf);
+            return;
         }
 
         const diff = oldHeight - newHeight;

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1584,16 +1584,30 @@ export class IgxColumnComponent implements AfterContentInit {
         this._pinned = true;
         this.pinnedChange.emit(this._pinned);
         this._unpinnedIndex = grid._unpinnedColumns.indexOf(this);
-        index = index !== undefined ? index : grid._pinnedColumns.length;
+        const rootPinnedCols = grid._pinnedColumns.filter((c) => c.level === 0);
+        index = index !== undefined ? index : rootPinnedCols.length;
         const targetColumn = grid._pinnedColumns[index];
         const args = { column: this, insertAtIndex: index, isPinned: true };
         grid.onColumnPinning.emit(args);
 
         if (grid._pinnedColumns.indexOf(this) === -1) {
-            grid._pinnedColumns.splice(args.insertAtIndex, 0, this);
+            if (!grid.hasColumnGroups) {
+                grid._pinnedColumns.splice(args.insertAtIndex, 0, this);
+            } else {
+                // insert based only on root collection
+                rootPinnedCols.splice(args.insertAtIndex, 0, this);
+                let allPinned = [];
+                // re-create hierarchy
+                rootPinnedCols.forEach(group => {
+                    allPinned.push(group);
+                    allPinned = allPinned.concat(group.allChildren);
+                });
+                grid._pinnedColumns = allPinned;
+            }
 
             if (grid._unpinnedColumns.indexOf(this) !== -1) {
-                grid._unpinnedColumns.splice(grid._unpinnedColumns.indexOf(this), 1);
+                const childrenCount = this.allChildren.length;
+                grid._unpinnedColumns.splice(grid._unpinnedColumns.indexOf(this), 1 + childrenCount);
             }
         }
 
@@ -1650,13 +1664,16 @@ export class IgxColumnComponent implements AfterContentInit {
 
         const targetColumn = grid._unpinnedColumns[index];
 
-        grid._unpinnedColumns.splice(index, 0, this);
-        if (grid._pinnedColumns.indexOf(this) !== -1) {
-            grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
+        if (!hasIndex) {
+            grid._unpinnedColumns.splice(index, 0, this);
+            if (grid._pinnedColumns.indexOf(this) !== -1) {
+                grid._pinnedColumns.splice(grid._pinnedColumns.indexOf(this), 1);
+            }
         }
 
+
         if (hasIndex) {
-            grid._moveColumns(this, targetColumn);
+            grid.moveColumn(this, targetColumn);
         }
 
         if (this.columnGroup) {

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -151,10 +151,11 @@ import { IgxColumnGroupComponent } from './columns/column-group.component';
 import { IGridSortingStrategy } from '../data-operations/sorting-strategy';
 import { IgxRowDragGhostDirective, IgxDragIndicatorIconDirective } from './row-drag.directive';
 import { isNumber } from 'util';
+import { showMessage } from '../core/deprecateDecorators';
 
 const MINIMUM_COLUMN_WIDTH = 136;
 const FILTER_ROW_HEIGHT = 50;
-
+let warningShown = false;
 // By default row editing overlay outlet is inside grid body so that overlay is hidden below grid header when scrolling.
 // In cases when grid has 1-2 rows there isn't enough space in grid body and row editing overlay should be shown above header.
 // Default row editing overlay height is higher then row height that is why the case is valid also for row with 2 rows.
@@ -3756,21 +3757,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     protected _moveColumns(from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition) {
         const list = this.columnList.toArray();
-        const fromIndex = list.indexOf(from);
-        let toIndex = list.indexOf(to);
-
-        if (pos === DropPosition.BeforeDropTarget) {
-            toIndex--;
-            if (toIndex < 0) {
-                toIndex = 0;
-            }
-        }
-
-        if (pos === DropPosition.AfterDropTarget) {
-            toIndex++;
-        }
-
-        list.splice(toIndex, 0, ...list.splice(fromIndex, 1));
+        this._reorderColumns(from, to, pos, list);
         const newList = this._resetColumnList(list);
         this.columnList.reset(newList);
         this.columnList.notifyOnChanges();
@@ -3798,39 +3785,27 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      */
     protected _reorderColumns(from: IgxColumnComponent, to: IgxColumnComponent, position: DropPosition, columnCollection: any[]) {
-        let dropIndex = columnCollection.indexOf(to);
-
-        if (to.columnGroup) {
-            dropIndex += to.allChildren.length;
-        }
+        const fromIndex = columnCollection.indexOf(from);
+        const childColumnsCount = from.allChildren.length;
+        // remove item(s) to be moved.
+        const fromCollection = columnCollection.splice(fromIndex, childColumnsCount + 1);
 
-        if (position === DropPosition.BeforeDropTarget) {
-            dropIndex--;
-        }
+        let dropIndex = columnCollection.indexOf(to);
 
         if (position === DropPosition.AfterDropTarget) {
             dropIndex++;
+            if (to.columnGroup) {
+                dropIndex += to.allChildren.length;
+            }
         }
-
-        columnCollection.splice(dropIndex, 0, ...columnCollection.splice(columnCollection.indexOf(from), 1));
+        columnCollection.splice(dropIndex, 0, ...fromCollection);
     }
     /**
      * @hidden
      */
     protected _moveChildColumns(parent: IgxColumnComponent, from: IgxColumnComponent, to: IgxColumnComponent, pos: DropPosition) {
         const buffer = parent.children.toArray();
-        const fromIndex = buffer.indexOf(from);
-        let toIndex = buffer.indexOf(to);
-
-        if (pos === DropPosition.BeforeDropTarget) {
-            toIndex--;
-        }
-
-        if (pos === DropPosition.AfterDropTarget) {
-            toIndex++;
-        }
-
-        buffer.splice(toIndex, 0, ...buffer.splice(fromIndex, 1));
+        this._reorderColumns(from, to, pos, buffer);
         parent.children.reset(buffer);
     }
     /**
@@ -3842,19 +3817,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public moveColumn(column: IgxColumnComponent, dropTarget: IgxColumnComponent, pos: DropPosition = DropPosition.None) {
 
+        if (column === dropTarget) {
+            return;
+        }
         let position = pos;
-        const fromIndex = column.visibleIndex;
-        const toIndex = dropTarget.visibleIndex;
-
-        if (pos === DropPosition.BeforeDropTarget && fromIndex < toIndex) {
-            position = DropPosition.BeforeDropTarget;
-        } else if (pos === DropPosition.AfterDropTarget && fromIndex > toIndex) {
-            position = DropPosition.AfterDropTarget;
-        } else {
-            position = DropPosition.None;
+        if (position === DropPosition.None) {
+            warningShown = showMessage(
+                'DropPosition.None is deprecated.' +
+                'Use DropPosition.AfterDropTarget instead.',
+                warningShown);
+            position =  DropPosition.AfterDropTarget;
         }
-
-
         if ((column.level !== dropTarget.level) ||
             (column.topLevelParent !== dropTarget.topLevelParent)) {
             return;
@@ -3912,6 +3885,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         if (this.hasColumnLayouts) {
             this.columns.filter(x => x.columnLayout).forEach(x => x.populateVisibleIndexes());
         }
+        // after reordering is done reset cached column collections.
+        this.resetColumnCollections();
+        column.resetCaches();
 
         const args = {
             source: column,
@@ -5195,8 +5171,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden
      */
     protected reinitPinStates() {
-        this._pinnedColumns = (this.hasColumnGroups) ? this.columnList.filter((c) => c.pinned) :
-            this.columnList.filter((c) => c.pinned).sort((a, b) => this._pinnedColumns.indexOf(a) - this._pinnedColumns.indexOf(b));
+        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.indexOf(a) - this._unpinnedColumns.indexOf(b));