Merge branch 'master' into mkirova/hgrid-remote-POC

ChronosSF · web-flow · commit de44aba33ba7 · 2020-06-18T15:53:12.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,19 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 10.0.0
+
+### General
+- `igx-select`, `igx-combo`, `igx-drop-down`
+- **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
+- `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
+    - `origin` - it can vary within the values of the `TransactionEventOrigin` interface; 
+    - `actions` - contains information about the transactions, that caused the emission of the event.
+
+### New Features
+- `IgxGrid`
+    - `showGroupArea` input is added, which can be used to enable/disable the group area row.
+
 ## 9.1.1
 
 ### General
@@ -129,11 +142,11 @@ All notable changes for each version of this project will be documented in this
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
-    - Added new properties for paging:
-     - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.
-     - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.
+  - Added new properties for paging:	
+    - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.	
+    - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.   
     - Added functionality for column selection.
-     - `columnSelection` property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
+    - `columnSelection` property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
     - `selected` property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.
     - `selectable` property has been added to the IgxColumnComponent; Allows you to set whether the column is selectable.
     - `onColumnSelectionChange` event is added for the `IgxGrid`. It is emitted when the column selection is changed.
diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.html b/projects/igniteui-angular/src/lib/combo/combo-item.component.html
@@ -1,4 +1,4 @@
 <ng-container *ngIf="!isHeader">
     <igx-checkbox [checked]="selected" disableRipple="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
 </ng-container>
-<ng-content></ng-content>
+<span class="igx-drop-down__inner"><ng-content></ng-content></span>
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-component.scss
@@ -25,6 +25,10 @@
         @extend %igx-drop-down__item !optional;
     }
 
+    @include e(inner) {
+        @extend %igx-drop-down__inner !optional;
+    }
+
     @include e(item, $m: cosy) {
         @extend %igx-drop-down__item--cosy !optional;
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
@@ -271,6 +271,11 @@
         }
     }
 
+    %igx-drop-down__inner {
+        display: block;
+        @include ellipsis();
+    }
+
     %igx-drop-down__item--cosy {
         height: map-get($item-height, 'cosy');
         padding: map-get($item-padding, 'cosy');
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.html b/projects/igniteui-angular/src/lib/drop-down/drop-down-item.component.html
@@ -1 +1 @@
-<ng-content></ng-content>
+<span class="igx-drop-down__inner"><ng-content></ng-content></span>
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts
@@ -21,6 +21,7 @@ const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down';
 const CSS_CLASS_LIST = 'igx-drop-down__list';
 const CSS_CLASS_SCROLL = 'igx-drop-down__list-scroll';
 const CSS_CLASS_ITEM = 'igx-drop-down__item';
+const CSS_CLASS_INNER_SPAN = 'igx-drop-down__inner';
 const CSS_CLASS_GROUP_ITEM = 'igx-drop-down__group';
 const CSS_CLASS_ITEM_COSY = 'igx-drop-down__item--cosy';
 const CSS_CLASS_ITEM_COMPACT = 'igx-drop-down__item--compact';
@@ -977,7 +978,7 @@ describe('IgxDropDown ', () => {
                 dropdown.toggle();
                 fixture.detectChanges();
                 expect(dropdown.collapsed).toBeFalsy();
-                const dropdownItems = document.querySelectorAll(`.${CSS_CLASS_ITEM}`);
+                const dropdownItems = document.querySelectorAll(`.${CSS_CLASS_INNER_SPAN}`);
                 expect(dropdownItems.length).toEqual(9);
                 expect(dropdown.items.length).toEqual(9);
                 for (let i = 0; i < dropdownItems.length; i++) {
diff --git a/projects/igniteui-angular/src/lib/grids/README.md b/projects/igniteui-angular/src/lib/grids/README.md
@@ -212,6 +212,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 | `isLoading` | bool | Sets if the grid is waiting for data - default value false. |
 | `rowDraggable` | bool | Sets if the grid rows can be dragged |
 | `columnSelection` | GridSelectionMode | Sets if the grid columns can be selected |
+| `showGroupArea` | boolean | Set/get whether the group are row is shown |
 
 ### Outputs
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -46,7 +46,9 @@ import {
     OverlaySettings,
     PositionSettings,
     ConnectedPositioningStrategy,
-    ContainerPositionStrategy
+    ContainerPositionStrategy,
+    StateUpdateEvent,
+    TransactionEventOrigin
 } from '../services/public_api';
 import { GridBaseAPIService } from './api.service';
 import { IgxGridCellComponent } from './cell.component';
@@ -2856,7 +2858,20 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
             this.summaryService.clearSummaryCache(args);
         });
 
-        this.transactions.onStateUpdate.pipe(destructor).subscribe(() => {
+        this.transactions.onStateUpdate.pipe(destructor).subscribe((event: StateUpdateEvent) => {
+            let actions = [];
+            if (event.origin === TransactionEventOrigin.REDO) {
+                actions = event.actions ? event.actions.filter(x => x.transaction.type === TransactionType.DELETE) : [];
+            } else if (event.origin === TransactionEventOrigin.UNDO) {
+                actions = event.actions ? event.actions.filter(x => x.transaction.type === TransactionType.ADD) : [];
+            }
+            if (actions.length > 0) {
+                for (const action of actions) {
+                    if (this.selectionService.isRowSelected(action.transaction.id)) {
+                        this.selectionService.deselectRow(action.transaction.id);
+                    }
+                }
+            }
             this.selectionService.clearHeaderCBState();
             this.summaryService.clearSummaryCache();
             this._pipeTrigger++;
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -3,7 +3,7 @@
 </igx-grid-toolbar>
 
 <div [style.flex-basis.px]='outerWidth' class="igx-grid__grouparea"
-    *ngIf="groupingExpressions.length > 0 || hasGroupableColumns" #groupArea>
+    *ngIf="showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)" #groupArea>
     <igx-chips-area (onReorder)="chipsOrderChanged($event)" (onMoveEnd)="chipsMovingEnded()">
         <ng-container *ngFor="let expr of chipsGoupingExpressions; let last = last;">
             <igx-chip [id]="expr.fieldName" [attr.title]="getGroupByChipTitle(expr)"
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -111,6 +111,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     private _data;
     private _hideGroupedColumns = false;
     private _dropAreaMessage = null;
+    private _showGroupArea = true;
 
     /**
      * Gets/Sets the value of the `id` attribute.
@@ -699,6 +700,14 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         return this.columnList.some((col) => col.groupable && !col.columnGroup);
     }
 
+    @Input()
+    public get showGroupArea(): boolean {
+        return this._showGroupArea;
+    }
+    public set showGroupArea(value: boolean) {
+        this._showGroupArea = value;
+    }
+
     private _setGroupColsVisibility(value) {
         if (this.columnList.length > 0 && !this.hasColumnLayouts) {
             this.groupingExpressions.forEach((expr) => {
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts
@@ -490,7 +490,6 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
         }));
 
         it('should deselect row when delete its parent', () => {
-            pending('Related to the bug #5673');
             treeGrid.selectRows([treeGrid.getRowByIndex(3).rowID, treeGrid.getRowByIndex(5).rowID], true);
             fix.detectChanges();
 
@@ -506,8 +505,8 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
             expect(treeGrid.selectedRows()).toEqual([]);
 
             // try to select deleted row
-            TreeGridFunctions.clickRowSelectionCheckbox(fix, 0);
-            UIInteractions.simulateClickEvent(treeGrid.getRowByIndex(3).nativeElement);
+            UIInteractions.simulateClickEvent(treeGrid.getRowByIndex(0).nativeElement);
+            TreeGridFunctions.clickRowSelectionCheckbox(fix, 3);
             TreeGridFunctions.clickRowSelectionCheckbox(fix, 5);
             fix.detectChanges();
 
@@ -522,8 +521,8 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
             fix.detectChanges();
 
             // select rows
-            TreeGridFunctions.clickRowSelectionCheckbox(fix, 0);
-            UIInteractions.simulateClickEvent(treeGrid.getRowByIndex(3).nativeElement);
+            UIInteractions.simulateClickEvent(treeGrid.getRowByIndex(0).nativeElement);
+            TreeGridFunctions.clickRowSelectionCheckbox(fix, 3);
             TreeGridFunctions.clickRowSelectionCheckbox(fix, 5);
             fix.detectChanges();
 
@@ -579,7 +578,6 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
         });
 
         it('should have correct header checkbox when add a row', () => {
-            pending('Related to the bug #5673');
             treeGrid.selectAllRows();
             fix.detectChanges();
 
@@ -600,7 +598,6 @@ describe('IgxTreeGrid - Selection #tGrid', () => {
         });
 
         it('should have correct header checkbox when add a row and undo transaction', fakeAsync(() => {
-            pending('Related to the bug #5673');
             treeGrid.addRow({ ID: 13, Name: 'Michael Cooper', Age: 33, OnPTO: false }, 317);
             tick();
             fix.detectChanges();
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts
@@ -17,7 +17,13 @@ import { IgxGridBaseDirective } from '../grid-base.directive';
 import { GridBaseAPIService } from '../api.service';
 import { ITreeGridRecord } from './tree-grid.interfaces';
 import { IRowToggleEventArgs } from '../common/events';
-import { HierarchicalTransaction, HierarchicalState, TransactionType } from '../../services/transaction/transaction';
+import {
+    HierarchicalTransaction,
+    HierarchicalState,
+    TransactionType,
+    TransactionEventOrigin,
+    StateUpdateEvent
+} from '../../services/transaction/transaction';
 import { IgxHierarchicalTransactionService } from '../../services/public_api';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
@@ -30,6 +36,7 @@ import { IgxGridNavigationService } from '../grid-navigation.service';
 import { GridType } from '../common/grid.interface';
 import { IgxColumnComponent } from '../columns/column.component';
 import { IgxRowIslandAPIService } from '../hierarchical-grid/row-island-api.service';
+import { IgxTreeGridRowComponent } from './tree-grid-row.component';
 
 let NEXT_ID = 0;
 
@@ -345,6 +352,20 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         this.onRowToggle.pipe(takeUntil(this.destroy$)).subscribe((args) => {
             this.loadChildrenOnRowExpansion(args);
         });
+
+        this.transactions.onStateUpdate.pipe(takeUntil<any>(this.destroy$)).subscribe((event: StateUpdateEvent) => {
+            let actions = [];
+            if (event.origin === TransactionEventOrigin.REDO) {
+                actions = event.actions ? event.actions.filter(x => x.transaction.type === TransactionType.DELETE) : [];
+            } else if (event.origin === TransactionEventOrigin.UNDO) {
+                actions = event.actions ? event.actions.filter(x => x.transaction.type === TransactionType.ADD) : [];
+            }
+            if (actions.length) {
+                for (const action of actions) {
+                    this.deselectChildren(action.transaction.id);
+                }
+            }
+        });
     }
 
     ngDoCheck() {
@@ -663,4 +684,20 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         }
         super.initColumns(collection, cb);
     }
+
+    /**
+     * @description A recursive way to deselect all selected children of a given record
+     * @param recordID ID of the record whose children to deselect
+     * @hidden
+     * @internal
+     */
+    private deselectChildren(recordID): void {
+        const selectedChildren = [];
+        const rowToDeselect = (this.getRowByKey(recordID) as IgxTreeGridRowComponent).treeRow;
+        this.selectionService.deselectRow(recordID);
+        this._gridAPI.get_selected_children(rowToDeselect, selectedChildren);
+        if (selectedChildren.length > 0) {
+            selectedChildren.forEach(x => this.deselectChildren(x));
+        }
+    }
 }
diff --git a/projects/igniteui-angular/src/lib/select/select-item.component.ts b/projects/igniteui-angular/src/lib/select/select-item.component.ts
@@ -3,7 +3,7 @@ import { Component, DoCheck, Input } from '@angular/core';
 
 @Component({
     selector: 'igx-select-item',
-    template: '<ng-content></ng-content>'
+    template: '<span class="igx-drop-down__inner"><ng-content></ng-content></span>'
 })
 export class IgxSelectItemComponent extends IgxDropDownItemComponent implements DoCheck {
 
diff --git a/projects/igniteui-angular/src/lib/services/transaction/base-transaction.ts b/projects/igniteui-angular/src/lib/services/transaction/base-transaction.ts
@@ -1,4 +1,4 @@
-import { TransactionService, Transaction, State } from './transaction';
+import { TransactionService, Transaction, State, StateUpdateEvent } from './transaction';
 import { EventEmitter, Injectable } from '@angular/core';
 import { isObject, mergeObjects, cloneValue } from '../../core/utils';
 
@@ -32,7 +32,7 @@ export class IgxBaseTransactionService<T extends Transaction, S extends State> i
     /**
      * @inheritdoc
      */
-    public onStateUpdate = new EventEmitter<void>();
+    public onStateUpdate = new EventEmitter<StateUpdateEvent>();
 
     /**
      * @inheritdoc
diff --git a/projects/igniteui-angular/src/lib/services/transaction/igx-transaction.ts b/projects/igniteui-angular/src/lib/services/transaction/igx-transaction.ts
@@ -1,13 +1,13 @@
-import { Transaction, State, TransactionType } from './transaction';
+import { Transaction, State, TransactionType, StateUpdateEvent, TransactionEventOrigin, Action } from './transaction';
 import { IgxBaseTransactionService } from './base-transaction';
 import { EventEmitter, Injectable } from '@angular/core';
 import { isObject, mergeObjects, cloneValue } from '../../core/utils';
 
 @Injectable()
 export class IgxTransactionService<T extends Transaction, S extends State> extends IgxBaseTransactionService<T, S> {
     protected _transactions: T[] = [];
-    protected _redoStack: { transaction: T, recordRef: any }[][] = [];
-    protected _undoStack: { transaction: T, recordRef: any }[][] = [];
+    protected _redoStack: Action<T>[][] = [];
+    protected _undoStack: Action<T>[][] = [];
     protected _states: Map<any, S> = new Map();
 
     /**
@@ -27,7 +27,7 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
     /**
      * @inheritdoc
      */
-    public onStateUpdate = new EventEmitter<void>();
+    public onStateUpdate = new EventEmitter<StateUpdateEvent>();
 
     /**
      * @inheritdoc
@@ -45,9 +45,10 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
         transactions.push(transaction);
 
         if (!this._isPending) {
-            this._undoStack.push([{ transaction, recordRef }]);
+            const actions = [{ transaction, recordRef }];
+            this._undoStack.push(actions);
             this._redoStack = [];
-            this.onStateUpdate.emit();
+            this.onStateUpdate.emit({ origin: TransactionEventOrigin.ADD, actions });
         }
     }
 
@@ -115,7 +116,7 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
     public endPending(commit: boolean): void {
         this._isPending = false;
         if (commit) {
-            const actions: { transaction: T, recordRef: any }[] = [];
+            const actions: Action<T>[] = [];
             // don't use addTransaction due to custom undo handling
             for (const transaction of this._pendingTransactions) {
                 const pendingState = this._pendingStates.get(transaction.id);
@@ -127,7 +128,7 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
             this._undoStack.push(actions);
             this._redoStack = [];
 
-            this.onStateUpdate.emit();
+            this.onStateUpdate.emit({ origin: TransactionEventOrigin.END, actions});
         }
         super.endPending(commit);
     }
@@ -167,7 +168,7 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
             this._undoStack = [];
         }
         this._redoStack = [];
-        this.onStateUpdate.emit();
+        this.onStateUpdate.emit({ origin: TransactionEventOrigin.CLEAR, actions: []});
     }
 
     /**
@@ -178,7 +179,7 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
             return;
         }
 
-        const lastActions: { transaction: T, recordRef: any }[] = this._undoStack.pop();
+        const lastActions: Action<T>[] = this._undoStack.pop();
         this._transactions.splice(this._transactions.length - lastActions.length);
         this._redoStack.push(lastActions);
 
@@ -189,23 +190,23 @@ export class IgxTransactionService<T extends Transaction, S extends State> exten
             }
         }
 
-        this.onStateUpdate.emit();
+        this.onStateUpdate.emit({ origin: TransactionEventOrigin.UNDO, actions: lastActions });
     }
 
     /**
      * @inheritdoc
      */
     public redo(): void {
         if (this._redoStack.length > 0) {
-            let actions: { transaction: T, recordRef: any, useInUndo?: boolean }[];
+            let actions: Action<T>[];
             actions = this._redoStack.pop();
             for (const action of actions) {
                 this.updateState(this._states, action.transaction, action.recordRef);
                 this._transactions.push(action.transaction);
             }
 
             this._undoStack.push(actions);
-            this.onStateUpdate.emit();
+            this.onStateUpdate.emit({ origin: TransactionEventOrigin.REDO, actions });
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/services/transaction/transaction.ts b/projects/igniteui-angular/src/lib/services/transaction/transaction.ts
diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts
diff --git a/src/app/drop-down/drop-down.sample.html b/src/app/drop-down/drop-down.sample.html
diff --git a/src/app/drop-down/drop-down.sample.scss b/src/app/drop-down/drop-down.sample.scss
diff --git a/src/app/grid-groupby/grid-groupby.sample.html b/src/app/grid-groupby/grid-groupby.sample.html
diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,10 @@`
`25`	`25`	`@extend %igx-drop-down__item !optional;`
`26`	`26`	`}`
`27`	`27`
	`28`	`+ @include e(inner) {`
	`29`	`+ @extend %igx-drop-down__inner !optional;`
	`30`	`+ }`
	`31`	`+`
`28`	`32`	`@include e(item, $m: cosy) {`
`29`	`33`	`@extend %igx-drop-down__item--cosy !optional;`
`30`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -271,6 +271,11 @@`
`271`	`271`	`}`
`272`	`272`	`}`
`273`	`273`
	`274`	`+ %igx-drop-down__inner {`
	`275`	`+ display: block;`
	`276`	`+ @include ellipsis();`
	`277`	`+ }`
	`278`	`+`
`274`	`279`	`%igx-drop-down__item--cosy {`
`275`	`280`	`height: map-get($item-height, 'cosy');`
`276`	`281`	`padding: map-get($item-padding, 'cosy');`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<ng-content></ng-content>`
	`1`	`+<span class="igx-drop-down__inner"><ng-content></ng-content></span>`