Merge branch 'bpenkov/row-selection-templating' of https://github.com…

…/IgniteUI/igniteui-angular into bpenkov/row-selection-templating
IgniteUI · Aug 29, 2019 · 1a5a00c · 1a5a00c
2 parents e063c5a + 02f5cd7
commit 1a5a00c
Show file tree

Hide file tree

Showing 18 changed files with 821 additions and 129 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,29 @@ All notable changes for each version of this project will be documented in this
 
 ## 8.2.0
 
+### New theme
+Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.  
+Depending on your use case you can use one of the following mixins:  
+`igx-fluent-theme` and `igx-fluent-dark-theme`  
+
+We also added two new pallets that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.
+
+Next example shows how you can use the Fluent theme.
+
+```scss
+// Light version
+.fluent-word-theme {
+    @include igx-fluent-theme($fluent-word-palette);
+}
+
+// Dark version
+.fluent-excel-dark-theme {
+    @include igx-fluent-dark-theme($fluent-excel-palette);
+}
+```
+
+For more information about the theming please read our [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index.html)  
+
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - `uniqueColumnValuesStrategy` input is added. This property provides a callback for loading unique column values on demand. If this property is provided, the unique values it generates will be used by the Excel Style Filtering (instead of using the unique values from the data that is bound to the grid).
@@ -102,28 +125,6 @@ All notable changes for each version of this project will be documented in this
 ## 8.1.0
 
 ### New Features
-
-##### New theme
-Ignite UI for angular now have a new theme that mimics the Microsoft Fluent design as much as possible.  
-In order to use the theme you have to use one of the following mixins:  
-  `igx-fluent-theme` and `igx-fluent-dark-theme`  
-
-We also added two new pallets that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.  
-
-This is an example of how you can use the new theme.
-
-```scss
-// Light version
-.fluent-word-theme {
-    @include igx-fluent-theme($fluent-word-palette);
-}
-
-// Dark version
-.fluent-excel-dark-theme {
-    @include igx-fluent-dark-theme($fluent-excel-palette);
-}
-```
-
 - `IgxBottomNav` now supports an `igx-tab` declaration mode. When in this mode, panels declarations are not accepted and tab items' content is not rendered.
     - You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
     - You are allowed to customize tab items with labels, icons and even templates.

diff --git a/projects/igniteui-angular/src/lib/core/grid-selection.ts b/projects/igniteui-angular/src/lib/core/grid-selection.ts
@@ -559,7 +559,7 @@ export class IgxGridSelectionService {
     selectAllRows(event?) {
         const allRowIDs = this.getRowIDs(this.allData);
         const addedRows =  allRowIDs.filter((rID) => !this.isRowSelected(rID));
-        const newSelection = this.rowSelection.size ? allRowIDs.concat(this.getSelectedRows()) : addedRows;
+        const newSelection = this.rowSelection.size ? this.getSelectedRows().concat(addedRows) : addedRows;
 
         this.emitRowSelectionEvent(newSelection, addedRows, [], event);
     }

diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -90,7 +90,7 @@ import { IgxGridColumnResizerComponent } from './grid-column-resizer.component';
 import { IgxGridFilteringRowComponent } from './filtering/grid-filtering-row.component';
 import { IgxDragDirective } from '../directives/drag-drop/drag-drop.directive';
 import { CharSeparatedValueData } from '../services/csv/char-separated-value-data';
-import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './igx-selection.module';
+import { IgxHeadSelectorDirective, IgxRowSelectorDirective } from './igx-row-selectors.module';
 import { DeprecateProperty } from '../core/deprecateDecorators';
 
 const MINIMUM_COLUMN_WIDTH = 136;
@@ -260,7 +260,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private _locale = null;
     public _destroyed = false;
     private overlayIDs = [];
-    public rowSelected = false;
 
     private _hostWidth;
     /**
@@ -1039,7 +1038,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     /**
      *  Emitted when `IgxGridRowComponent` is selected.
      * ```html
-     * <igx-grid #grid (onRowSelectionChange)="onRowClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
+     * <igx-grid #grid (onRowSelectionChange)="onCellClickChange($event)" [data]="localData" [autoGenerate]="true"></igx-grid>
      * ```
      * ```typescript
      * public onCellClickChange(e){
@@ -1754,6 +1753,10 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return null;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
     @ContentChildren(IgxRowSelectorDirective, { read: IgxRowSelectorDirective, descendants: false })
     public rowSelectorsTemplate: QueryList<IgxRowSelectorDirective>;
 

diff --git a/projects/igniteui-angular/src/lib/grids/grid-common.module.ts b/projects/igniteui-angular/src/lib/grids/grid-common.module.ts
@@ -67,7 +67,7 @@ import { IgxGridExcelStyleFilteringModule } from './filtering/excel-style/grid.e
 import { IgxGridDragSelectDirective } from './drag-select.directive';
 import { IgxGridColumnResizerComponent } from './grid-column-resizer.component';
 import { IgxRowDragModule } from './row-drag.directive';
-import { IgxSelectorsModule } from './igx-selection.module';
+import { IgxRowSelectorsModule } from './igx-row-selectors.module';
 /**
  * @hidden
  */
@@ -166,7 +166,7 @@ import { IgxSelectorsModule } from './igx-selection.module';
         IgxRowDragModule,
         IgxPaginatorModule,
         IgxGridFooterComponent,
-        IgxSelectorsModule
+        IgxRowSelectorsModule
     ],
     imports: [
         CommonModule,
@@ -196,7 +196,7 @@ import { IgxSelectorsModule } from './igx-selection.module';
         IgxGridExcelStyleFilteringModule,
         IgxRowDragModule,
         IgxPaginatorModule,
-        IgxSelectorsModule
+        IgxRowSelectorsModule
     ],
     providers: [
         IgxGridSelectionService,

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts
@@ -144,13 +144,12 @@ describe('IgxGrid - Cell selection #grid', () => {
         });
 
         it('Should select correct cells with Ctrl key and mouse drag', () => {
-            pending('Related to the bug 4084');
             const range = { rowStart: 3, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' };
             const firstCell =  grid.getCellByColumn(1, 'ParentID');
             const secondCell =  grid.getCellByColumn(1, 'ID');
             const thirdCell =  grid.getCellByColumn(2, 'ParentID');
             const expectedData = [
-                { ParentID: 147, Name: 'Michael Langdon' },
+                { ParentID: 147, Name: 'Monica Reyes' },
                 { ParentID: 847, Name: 'Laurence Johnson' },
                 { ParentID: 147 }
             ];

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts
@@ -136,7 +136,6 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
         displayContainer.dispatchEvent(event);
         await wait(300);
 
-        expect(firstCell.isSelected).toBeFalsy();
         expect(firstCell.selected).toBeFalsy();
         expect(firstCell.focused).toBeFalsy();
     }));
@@ -163,15 +162,15 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
         fix.detectChanges();
 
         expect(cell.selected).toBeTruthy();
-        expect(secondRow.isSelected).toBeTruthy();
+        expect(secondRow.selected).toBeTruthy();
         expect(secondRowCheckbox.classList.contains('igx-checkbox--checked')).toBeTruthy();
 
         UIInteractions.triggerKeyDownEvtUponElem('space', cell.nativeElement, true);
         await wait(DEBOUNCETIME);
         fix.detectChanges();
 
         expect(cell.selected).toBeTruthy();
-        expect(secondRow.isSelected).toBeFalsy();
+        expect(secondRow.selected).toBeFalsy();
         expect(secondRowCheckbox.classList.contains('igx-checkbox--checked')).toBeFalsy();
 
         cell = grid.getCellByColumn(1, 'ID');
@@ -189,15 +188,15 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
         await wait(DEBOUNCETIME);
         fix.detectChanges();
 
-        expect(firstRow.isSelected).toBeTruthy();
+        expect(firstRow.selected).toBeTruthy();
         expect(firstRowCheckbox.classList.contains('igx-checkbox--checked')).toBeTruthy();
 
         UIInteractions.triggerKeyDownEvtUponElem('space', cell.nativeElement, true);
         await wait(DEBOUNCETIME);
         fix.detectChanges();
 
         expect(cell.selected).toBeTruthy();
-        expect(firstRow.isSelected).toBeFalsy();
+        expect(firstRow.selected).toBeFalsy();
         expect(firstRowCheckbox.classList.contains('igx-checkbox--checked')).toBeFalsy();
 
         UIInteractions.triggerKeyDownWithBlur('tab', cell.nativeElement, true);

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-selection.spec.ts
@@ -15,13 +15,10 @@ import {
     SelectionWithTransactionsComponent,
     GridCustomSelectorsComponent
 } from '../../test-utils/grid-samples.spec';
-import { IgxHierarchicalGridModule } from '../hierarchical-grid/hierarchical-grid.module';
 import { HelperUtils } from '../../test-utils/helper-utils.spec';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
-import { IgxHierarchicalGridCustomSelectorsComponent } from '../../test-utils/hierarhical-grid-components.spec';
-import { IgxSelectorsModule } from '../igx-selection.module';
-import { ROW_EDITING_BANNER_OVERLAY_CLASS } from '../../test-utils/tree-grid-functions.spec';
+import { IgxRowSelectorsModule } from '../igx-row-selectors.module';
 
 const DEBOUNCETIME = 30;
 
@@ -42,7 +39,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             imports: [
                 NoopAnimationsModule,
                 IgxGridModule,
-                IgxSelectorsModule
+                IgxRowSelectorsModule
             ]
         })
             .compileComponents();
@@ -60,7 +57,7 @@ describe('IgxGrid - Row Selection #grid', () => {
 
         it('Should have checkbox on each row', (async () => {
             HelperUtils.verifyHeaderRowHasCheckbox(fix);
-            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(fix, grid);
+            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(grid);
 
             for (const row of grid.rowList.toArray()) {
                 HelperUtils.verifyRowHasCheckbox(row.nativeElement);
@@ -70,7 +67,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             await wait(100);
             fix.detectChanges();
 
-            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(fix, grid);
+            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(grid);
 
             for (const row of grid.rowList.toArray()) {
                 HelperUtils.verifyRowHasCheckbox(row.nativeElement);
@@ -109,19 +106,19 @@ describe('IgxGrid - Row Selection #grid', () => {
         it('Should have correct checkboxes position when scroll left', (async () => {
             grid.width = '300px';
             fix.detectChanges();
-            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(fix, grid);
+            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(grid);
 
             GridFunctions.scrollLeft(grid, 1000);
             await wait(100);
             fix.detectChanges();
 
-            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(fix, grid);
+            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(grid);
 
             GridFunctions.scrollLeft(grid, 0);
             await wait(100);
             fix.detectChanges();
 
-            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(fix, grid);
+            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(grid);
         }));
 
         it('Header checkbox should select/deselect all rows', () => {
@@ -488,7 +485,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             HelperUtils.verifyRowSelected(firstRow, false);
             HelperUtils.verifyHeaderRowHasCheckbox(fix, false);
             HelperUtils.verifyRowHasCheckbox(firstRow.nativeElement);
-            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(fix, grid);
+            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(grid);
 
             // Click on a row
             UIInteractions.simulateClickEvent(firstRow.nativeElement);
@@ -651,7 +648,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             grid = fix.componentInstance.grid;
         }));
 
-        it('Change  RowSelection to multiple ', () => {
+        it('Change RowSelection to multiple ', () => {
             HelperUtils.verifyHeaderRowHasCheckbox(fix, false, false);
             HelperUtils.verifyRowHasCheckbox(grid.getRowByIndex(0).nativeElement, false, false);
 
@@ -663,7 +660,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             grid.rowSelection = GridSelectionMode.multiple;
             fix.detectChanges();
 
-            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(fix, grid);
+            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(grid);
             HelperUtils.verifyRowSelected(grid.getRowByIndex(0), false, false);
             HelperUtils.verifyHeaderRowCheckboxState(fix);
             HelperUtils.verifyHeaderRowHasCheckbox(fix);
@@ -683,7 +680,7 @@ describe('IgxGrid - Row Selection #grid', () => {
 
         it('Should have checkbox on each row nd do not have header checkbox', (async () => {
             HelperUtils.verifyHeaderRowHasCheckbox(fix, false);
-            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(fix, grid);
+            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(grid);
 
             for (const row of grid.rowList.toArray()) {
                 HelperUtils.verifyRowHasCheckbox(row.nativeElement);
@@ -694,7 +691,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             fix.detectChanges();
 
             HelperUtils.verifyHeaderRowHasCheckbox(fix, false);
-            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(fix, grid);
+            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(grid);
 
             for (const row of grid.rowList.toArray()) {
                 HelperUtils.verifyRowHasCheckbox(row.nativeElement);
@@ -963,7 +960,7 @@ describe('IgxGrid - Row Selection #grid', () => {
             HelperUtils.verifyRowSelected(firstRow, false);
             HelperUtils.verifyHeaderRowHasCheckbox(fix);
             HelperUtils.verifyRowHasCheckbox(firstRow.nativeElement);
-            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(fix, grid);
+            HelperUtils.verifyHeaderAndRowCheckBoxesAlignment(grid);
 
             // Click on a row
             UIInteractions.simulateClickEvent(firstRow.nativeElement);

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts
@@ -528,7 +528,6 @@ describe('IgxGrid - search API #grid', () => {
         });
 
         it('Highlight should be updated when a column is hidden and there are other hidden columns', () => {
-            pending('Related to the bug 3691');
             grid.columns[1].hidden = true;
             fix.detectChanges();
 

diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts
@@ -593,7 +593,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
             const dragIndicatorElement = dragIndicatorElements[2].nativeElement;
             const row = dragGridRows[1];
             const rowDragDirective = dragRows[1].injector.get(IgxRowDragDirective);
-            expect(row.isSelected).toBeTruthy();
+            expect(row.selected).toBeTruthy();
 
             const startPoint: Point = UIInteractions.getPointFromElement(dragIndicatorElement);
             const movePoint: Point = UIInteractions.getPointFromElement(dragGridRows[4].nativeElement);
@@ -614,7 +614,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
             expect(row.grid.rowDragging).toBeFalsy();
             verifyRowDragEndEvent(dragGrid, row, rowDragDirective, false);
             expect(dropGrid.rowList.length).toEqual(1);
-            expect(row.isSelected).toBeTruthy();
+            expect(row.selected).toBeTruthy();
         }));
         it('should not apply selection class to ghost element when dragging selected grid row', (async () => {
             dragGrid.rowSelection = GridSelectionMode.multiple;
@@ -624,7 +624,7 @@ describe('IgxGrid - Row Drag Tests #grid', () => {
 
             const dragIndicatorElement = dragIndicatorElements[2].nativeElement;
             const row = dragGridRows[1];
-            expect(row.isSelected).toBeTruthy();
+            expect(row.selected).toBeTruthy();
 
             const startPoint: Point = UIInteractions.getPointFromElement(dragIndicatorElement);
             const movePoint: Point = UIInteractions.getPointFromElement(dragGridRows[4].nativeElement);

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/child-grid-row.component.ts
@@ -13,7 +13,7 @@ import {
 } from '@angular/core';
 import { GridBaseAPIService } from '.././api.service';
 import { IgxRowIslandComponent } from './row-island.component';
-import { IgxGridComponent } from '../grid';
+import { IgxGridComponent } from '../grid/grid.component';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({

diff --git a/...ects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts b/...ects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-base.component.ts
@@ -9,8 +9,7 @@ import {
     Optional,
     Input,
     ViewChild,
-    TemplateRef,
-    ContentChild
+    TemplateRef
 } from '@angular/core';
 import { IgxGridBaseComponent, IgxGridTransaction, IGridDataBindable } from '../grid-base.component';
 import { GridBaseAPIService } from '../api.service';
@@ -26,8 +25,6 @@ import { IgxHierarchicalGridNavigationService } from './hierarchical-grid-naviga
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-selection';
 import { IgxChildGridRowComponent } from './child-grid-row.component';
-import { IgxRowSelectorDirective, IgxHeadSelectorDirective } from '../igx-selection.module';
-import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
 
 export const IgxHierarchicalTransactionServiceFactory = {
     provide: IgxGridTransaction,

diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.module.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.module.ts
@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { IgxChipsModule } from '../../chips/chips.module';
-import { IgxGridCommonModule } from '../grid-common.module';
 import { IgxGridModule } from '../grid/grid.module';
 import { IgxHierarchicalGridComponent } from './hierarchical-grid.component';
 import { IgxHierarchicalRowComponent } from './hierarchical-row.component';
@@ -13,7 +12,7 @@ import { IgxHierarchicalGridCellComponent } from './hierarchical-cell.component'
 import { IgxHierarchicalSelectionAPIService } from './selection';
 import { IgxRowIslandAPIService } from './row-island-api.service';
 import { IgxSelectModule } from '../../select/index';
-import { IgxGridComponent } from '../grid';
+import { IgxGridComponent } from '../grid/grid.component';
 
 /**
  * @hidden