Merge branch 'master' into pbozhinov/fix-7416

ChronosSF · web-flow · commit c4d5753e0504 · 2020-06-18T16:15:05.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 10.0.0
+
+### General
+- `igxGrid`
+    - **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
+- `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 +144,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/data-operations/groupby-record.interface.ts b/projects/igniteui-angular/src/lib/data-operations/groupby-record.interface.ts
@@ -1,4 +1,5 @@
 import { ISortingExpression } from './sorting-expression.interface';
+import { IgxColumnComponent } from '../grids/columns/column.component';
 
 /**
  * @hidden
@@ -13,4 +14,5 @@ export interface IGroupByRecord {
     groupParent: IGroupByRecord;
     groups?: IGroupByRecord[];
     height: number;
+    column?: IgxColumnComponent;
  }
diff --git a/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts b/projects/igniteui-angular/src/lib/data-operations/sorting-strategy.ts
@@ -160,14 +160,16 @@ export class IgxSorting implements IGridSortingStrategy {
         let result = [];
         while (i < data.length) {
             const group = this.groupedRecordsByExpression(data, i, expressions[level]);
+            const column = grid ? grid.getColumnByName(expressions[level].fieldName) : null;
             const groupRow: IGroupByRecord = {
                 expression: expressions[level],
                 level,
                 records: cloneArray(group),
                 value: group[0][expressions[level].fieldName],
                 groupParent: parent,
                 groups: [],
-                height: grid ? grid.renderedRowHeight : null
+                height: grid ? grid.renderedRowHeight : null,
+                column: column
             };
             if (parent) {
                 parent.groups.push(groupRow);
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';
@@ -2846,7 +2848,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
@@ -112,6 +112,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.
@@ -710,6 +711,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/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts
@@ -529,7 +529,8 @@ describe('IgxGrid - GroupBy #grid', () => {
         for (const grRow of groupRows) {
             const elem = grRow.groupContent.nativeElement;
             const grVal = grRow.groupRow.value === null ? '' : grRow.groupRow.value.toString();
-            const expectedText = 'Total items with value:' + grVal +
+            const expectedText = 'Grouping by "Is it Released". ' +
+                'Total items with value:' + grVal +
                 ' are ' + grRow.groupRow.records.length;
             expect(elem.innerText.trim(['\n', '\r', ' '])).toEqual(expectedText);
             const expander = grRow.nativeElement.querySelector('.igx-grid__grouping-indicator');
@@ -2694,9 +2695,12 @@ export class GroupableGridComponent extends DataParent {
             <igx-column [field]="'ReleaseDate'" [header]="'ReleaseDate'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
             <igx-column [field]="'Downloads'" [header]="'Downloads'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
             <igx-column [field]="'ProductName'" [header]="'ProductName'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
-            <igx-column [field]="'Released'" [header]="'Released'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
+            <igx-column [field]="'Released'" [header]="'Is it Released'" [width]="200" [groupable]="true" [hasSummary]="false"></igx-column>
             <ng-template igxGroupByRow let-groupRow>
-                <span>Total items with value:{{ groupRow.value }} are {{ groupRow.records.length }}</span>
+                <span>
+                    Grouping by "{{groupRow.column.header}}".
+                    Total items with value:{{ groupRow.value }} are {{ groupRow.records.length }}
+                </span>
             </ng-template>
             <ng-template igxRowExpandedIndicator let-groupRow>
                 <span>EXPANDED</span>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html
@@ -22,7 +22,9 @@
         <div class="igx-group-label">
             <igx-icon fontSet="material" class="igx-group-label__icon">group_work</igx-icon>
             <span class="igx-group-label__column-name">
-            {{ groupRow.expression ? groupRow.expression.fieldName : '' }}:
+            {{ groupRow.column && groupRow.column.header ?
+                groupRow.column.header :
+                (groupRow.expression ? groupRow.expression.fieldName : '') }}:
             </span>
 
             <ng-container *ngIf="dataType === 'boolean' || dataType === 'string'; else default" >
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
@@ -205,7 +205,7 @@ export class IgxGridGroupByRowComponent {
      * @hidden
      */
     get dataType(): any {
-        const column = this.grid.getColumnByName(this.groupRow.expression.fieldName);
+        const column = this.groupRow.column;
         return (column && column.dataType) || DataType.String;
     }
 }
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
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>`