Merge remote-tracking branch 'remotes/origin/master' into mvenkov/tre…

…e-grid-batch-update

# Conflicts:
#	projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts
#	projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts

CHANGELOG.md

@@ -16,6 +16,33 @@ All notable changes for each version of this project will be documented in this
     - You can now export the tree grid both to CSV and Excel.
     - The hierarchy and the records' expanded states would be reflected in the exported Excel worksheet.
 
+## 7.0.3
+### Bug fixes
+
+- ng add igniteui-angular adds igniteui-cli package to both dependencies and devDependencies ([#3254](https://github.com/IgniteUI/igniteui-angular/issues/3254))
+- Group column header is not styled correctly when moving that column ([#3072](https://github.com/IgniteUI/igniteui-angular/issues/3072))
+- igx-grid: Filter row remains after disabling filtering feature ([#3255](https://github.com/IgniteUI/igniteui-angular/issues/3255))
+- [igxGrid] Keyboard navigation between cells and filtering row with MCH ([#3179](https://github.com/IgniteUI/igniteui-angular/issues/3179))
+- Argument $color of red($color) must be a color ([#3190](https://github.com/IgniteUI/igniteui-angular/issues/3190))
+- Shell strings localization ([#3237](https://github.com/IgniteUI/igniteui-angular/issues/3237))
+- Tabbing out of the combo search input not possible ([#3200](https://github.com/IgniteUI/igniteui-angular/issues/3200))
+- Localization (i18n) not available for inputs/buttons on the grid filtering dialog ([#2517](https://github.com/IgniteUI/igniteui-angular/issues/2517))
+- When in the tree grid are pinned columns and scroll horizontal the cells text is over the pinned text #3163
+- Request for update of shell strings in Japanese ([#3163](https://github.com/IgniteUI/igniteui-angular/issues/3163))
+- Refactor(themes): remove get-function calls ([#3327](https://github.com/IgniteUI/igniteui-angular/issues/3327))
+- Fix(grid): recalculate grid body size when changing allowFiltering dynamically ([#3321](https://github.com/IgniteUI/igniteui-angular/issues/3321))
+- Fix - Combo - Hide Search input when !filterable && !allowCustomValues - 7.0.x ([#3314](https://github.com/IgniteUI/igniteui-angular/issues/3314))
+- Fixing column chooser column updating - 7.0.x ([#3235](https://github.com/IgniteUI/igniteui-angular/issues/3235))
+- Disable combo checkbox animations on scroll ([#3303](https://github.com/IgniteUI/igniteui-angular/issues/3303))
+- Added validation if last column collides with grid's scroll. ([#3028](https://github.com/IgniteUI/igniteui-angular/issues/3028)) ([#3100](https://github.com/IgniteUI/igniteui-angular/issues/3100))
+- Use value instead of ngModel to update editValue for checkbox and calendar in igxCell ([#3225](https://github.com/IgniteUI/igniteui-angular/issues/3225))
+- Add @inheritdoc, create ScrollStrategy abstract class and fix method signatures 7.0.x ([#3222](https://github.com/IgniteUI/igniteui-angular/issues/3222))
+- When scroll with the mouse wheel the value in datePicker editor for edited cell is empty ([#2958](https://github.com/IgniteUI/igniteui-angular/issues/2958))
+- igxToolbar should have the option to add custom template ([#2983](https://github.com/IgniteUI/igniteui-angular/issues/2983))
+- fix(grid): mark grid for check inside NgZone when resizing ([#2792](https://github.com/IgniteUI/igniteui-angular/issues/2792)) ([#3277](https://github.com/IgniteUI/igniteui-angular/issues/3277))
+- IgxGridHeaderGroupComponent should have preset min width ([#3071](https://github.com/IgniteUI/igniteui-angular/issues/3071))
+- Tree grid selection ([#3334](https://github.com/IgniteUI/igniteui-angular/issues/3334))
+
 ## 7.0.2
 ### Features
 - `ng add igniteui-angular` support :tada:

projects/igniteui-angular/karma.conf.js

@@ -38,7 +38,7 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadless'],
     singleRun: false
   });
 };

projects/igniteui-angular/src/lib/core/selection.ts

@@ -208,7 +208,7 @@ export class IgxSelectionAPIService {
      * @returns If all items are selected.
      */
     public are_all_selected(componentID: string, dataCount: number): boolean {
-        return this.size(componentID) === dataCount;
+        return dataCount > 0 && dataCount === this.size(componentID);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -10,19 +10,19 @@
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">
         <igx-input-group displayDensity="compact">
-            <input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused">
+            <input igxInput [(ngModel)]="editValue" [igxFocus]="focused">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'number'">
         <igx-input-group displayDensity="compact">
-            <input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused" type="number">
+            <input igxInput [(ngModel)]="editValue" [igxFocus]="focused" type="number">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'boolean'">
-        <igx-checkbox [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [checked]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
+        <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-datePicker [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused" [labelVisibility]="false"></igx-datePicker>
+        <igx-datePicker (onSelection)="editValue = $event" [value]="editValue" [igxFocus]="focused" [labelVisibility]="false"></igx-datePicker>
     </ng-container>
 </ng-template>
 <ng-container *ngTemplateOutlet="template; context: context">

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -288,11 +288,11 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
             return;
         }
         if (this.column.editable && value) {
-            this.editValue = this.value;
             this.gridAPI.set_cell_inEditMode(this.gridID, this);
             if (this.highlight && this.grid.lastSearchInfo.searchText) {
                 this.highlight.observe();
             }
+            this.editValue = this.value;
         } else {
             this.gridAPI.escape_editMode(this.gridID, this.cellID);
         }
@@ -482,9 +482,30 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
     private highlight: IgxTextHighlightDirective;
 
     /**
-     * @hidden
+     * Sets the current edit value while a cell is in edit mode.
+     * Only for cell editing mode.
+     * ```typescript
+     * let isLastPinned = this.cell.isLastPinned;
+     * ```
+     * @memberof IgxGridCellComponent
      */
-    public editValue;
+    public set editValue(value) {
+        if (this.gridAPI.get_cell_inEditMode(this.gridID)) {
+            this.gridAPI.get_cell_inEditMode(this.gridID).cell.editValue = value;
+        }
+    }
+
+    /**
+     * Gets the current edit value while a cell is in edit mode.
+     * Only for cell editing mode.
+     * ```typescript
+     * let editValue = this.cell.editValue;
+     * ```
+     * @memberof IgxGridCellComponent
+     */
+    public get editValue() {
+        return this.gridAPI.get_cell_inEditMode(this.gridID).cell.editValue;
+    }
     public focused = false;
     protected isSelected = false;
     private cellSelectionID: string;
@@ -704,7 +725,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
             const column = this.gridAPI.get(this.gridID).columns[editCell.cellID.columnID];
 
             if (column.inlineEditorTemplate === undefined && (
-                (column.dataType === DataType.Boolean &&  (key !== KEYS.SPACE && key !== KEYS.SPACE_IE))
+                (column.dataType === DataType.Boolean && (key !== KEYS.SPACE && key !== KEYS.SPACE_IE))
                 || column.dataType === DataType.Date)) {
                 event.preventDefault();
             }
@@ -727,11 +748,11 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
                     (this.gridAPI as any).trigger_row_expansion_toggle(
                         this.gridID, this.row.treeRow, !this.row.expanded, event, this.visibleColumnIndex);
                 }
-            return;
+                return;
             }
         }
 
-        const args = {cell: this, groupRow: null, event: event, cancel: false };
+        const args = { cell: this, groupRow: null, event: event, cancel: false };
         this.grid.onFocusChange.emit(args);
         if (args.cancel) {
             return;
@@ -904,7 +925,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
      */
     public calculateSizeToFit(range: any): number {
         return Math.max(...Array.from(this.nativeElement.children)
-                   .map((child) => getNodeSizeViaRange(range, child)));
+            .map((child) => getNodeSizeViaRange(range, child)));
     }
 
     private isToggleKey(key) {

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

@@ -2392,6 +2392,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Returns the `IgxGridHeaderGroupComponent`'s minimum allowed width.
+     * Used internally for restricting header group component width.
+     * The values below depend on the header cell default right/left padding values.
+	 * @memberof IgxGridBaseComponent
+     */
+    get defaultHeaderGroupMinWidth(): number {
+        if (this.isCosy()) {
+            return 32;
+        } else if (this.isCompact()) {
+            return 24;
+        } else {
+            return 48;
+        }
+    }
+
     /**
      * Returns the maximum width of the container for the pinned `IgxColumnComponent`s.
      * ```typescript
@@ -2476,6 +2492,20 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         return this._unpinnedColumns.filter((col) => !col.hidden); // .sort((col1, col2) => col1.index - col2.index);
     }
 
+    /**
+     * Returns the `width` to be set on `IgxGridHeaderGroupComponent`.
+	 * @memberof IgxGridBaseComponent
+     */
+    public getHeaderGroupWidth(column: IgxColumnComponent): string {
+
+        const minWidth = this.defaultHeaderGroupMinWidth;
+        if (parseInt(column.width, 10) < minWidth) {
+            return minWidth.toString();
+        }
+
+        return column.width;
+    }
+
     /**
      * Returns the `IgxColumnComponent` by field name.
      * ```typescript

projects/igniteui-angular/src/lib/grids/grid-header-group.component.ts

@@ -70,7 +70,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck {
     @HostBinding('style.min-width')
     @HostBinding('style.flex-basis')
     get width() {
-        return this.column.width;
+        return this.grid.getHeaderGroupWidth(this.column);
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid.common.ts

@@ -590,10 +590,16 @@ export class IgxDecimalPipeComponent extends DecimalPipe implements PipeTransfor
     }
 }
 
+/**
+ * @hidden
+ */
 export interface ContainerPositionSettings extends PositionSettings {
     container?: HTMLElement;
 }
 
+/**
+ * @hidden
+ */
 export class ContainerPositioningStrategy extends ConnectedPositioningStrategy {
     isTop = false;
     isTopInitialPosition = null;

projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts

@@ -19,6 +19,7 @@ describe('IgxGrid - Deferred Column Resizing', () => {
     configureTestSuite();
     const COLUMN_HEADER_CLASS = '.igx-grid__th';
     const COLUMN_HEADER_GROUP_CLASS = '.igx-grid__thead-item';
+    const COLUMN_FILTER_CELL_SELECTOR = 'igx-grid-filtering-cell';
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
@@ -28,7 +29,8 @@ describe('IgxGrid - Deferred Column Resizing', () => {
                 GridFeaturesComponent,
                 LargePinnedColGridComponent,
                 NullColumnsComponent,
-                MultiColumnHeadersComponent
+                MultiColumnHeadersComponent,
+                ColGridComponent
             ],
             imports: [
                 FormsModule,
@@ -719,6 +721,29 @@ describe('IgxGrid - Deferred Column Resizing', () => {
         fixture.detectChanges();
         expect(column.width).toEqual('111px');
     }));
+
+    it('should size headers correctly when column width is below the allowed minimum.', fakeAsync(() => {
+        const fixture = TestBed.createComponent(ColGridComponent);
+        fixture.detectChanges();
+        tick();
+        fixture.detectChanges();
+
+        const headers = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
+        const headerGroups = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_GROUP_CLASS));
+        const filteringCells = fixture.debugElement.queryAll(By.css(COLUMN_FILTER_CELL_SELECTOR));
+
+        expect(headers[0].nativeElement.getBoundingClientRect().width).toBe(49);
+        expect(headers[1].nativeElement.getBoundingClientRect().width).toBe(50);
+        expect(headers[2].nativeElement.getBoundingClientRect().width).toBe(49);
+
+        expect(filteringCells[0].nativeElement.getBoundingClientRect().width).toBe(49);
+        expect(filteringCells[1].nativeElement.getBoundingClientRect().width).toBe(50);
+        expect(filteringCells[2].nativeElement.getBoundingClientRect().width).toBe(49);
+
+        expect(headerGroups[0].nativeElement.getBoundingClientRect().width).toBe(48);
+        expect(headerGroups[1].nativeElement.getBoundingClientRect().width).toBe(50);
+        expect(headerGroups[2].nativeElement.getBoundingClientRect().width).toBe(48);
+    }));
 });
 
 @Component({
@@ -827,3 +852,23 @@ export class NullColumnsComponent implements OnInit {
         this.data = SampleTestData.contactInfoData();
     }
 }
+
+@Component({
+    template: GridTemplateStrings.declareGrid(`width="400px" height="600px" [allowFiltering]="true"`, ``,
+        `<igx-column [field]="'Items'" [width]="'40px'" dataType="string" [filterable]="true"></igx-column>
+         <igx-column [field]="'ID'" [width]="'50px'" [header]="'ID'" [filterable]="true"></igx-column>
+         <igx-column [field]="'ProductName'" [width]="'30px'" dataType="string" [filterable]="true"></igx-column>
+         <igx-column [field]="'Test'" width="300px" dataType="string" [resizable]="true"></igx-column>
+         <igx-column [field]="'Downloads'" width="300px" dataType="number" [resizable]="true"></igx-column>
+         <igx-column [field]="'Category'" width="300px" dataType="string" [resizable]="true"></igx-column>`
+    )
+})
+export class ColGridComponent implements OnInit {
+    data = [];
+
+    @ViewChild(IgxGridComponent) public grid: IgxGridComponent;
+
+    ngOnInit() {
+        this.data = SampleTestData.generateProductData(10);
+    }
+}

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -54,12 +54,12 @@
         </ng-container>
         <ng-container *ngIf="pinnedColumns.length > 0">
             <ng-template ngFor let-col [ngForOf]="onlyTopLevel(pinnedColumns)">
-                <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width"></igx-grid-header-group>
+                <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)" [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
             </ng-template>
         </ng-container>
         <ng-template igxGridFor let-col [igxGridForOf]="onlyTopLevel(unpinnedColumns)" [igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir"
             [igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges' #headerContainer>
-            <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="col.width" [style.flex-basis.px]="col.width"></igx-grid-header-group>
+            <igx-grid-header-group [igxColumnMovingDrag]="col" [attr.droppable]="true" [igxColumnMovingDrop]="col" [column]="col" [gridID]="id" [style.min-width.px]="getHeaderGroupWidth(col)" [style.flex-basis.px]="getHeaderGroupWidth(col)"></igx-grid-header-group>
         </ng-template>
         <span *ngIf="hasMovableColumns && draggedColumn" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="right" class="igx-grid__scroll-on-drag-right"></span>
     </div>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

@@ -10,19 +10,19 @@
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">
         <igx-input-group>
-            <input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused">
+            <input igxInput [(ngModel)]="editValue" [igxFocus]="focused">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'number'">
         <igx-input-group>
-            <input igxInput [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [igxFocus]="focused"  type="number">
+            <input igxInput [(ngModel)]="editValue" [igxFocus]="focused"  type="number">
         </igx-input-group>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'boolean'">
-        <igx-checkbox [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [checked]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [disableRipple]="true"></igx-checkbox>
+        <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-datePicker [(ngModel)]="gridAPI.get_cell_inEditMode(gridID).cell.editValue" [labelVisibility]="false"></igx-datePicker>
+        <igx-datePicker (onSelection)="editValue = $event" [value]="editValue" [labelVisibility]="false"></igx-datePicker>
     </ng-container>
 </ng-template>
 <ng-container *ngIf="!inEditMode">

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts

@@ -153,4 +153,17 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
             mergeObjects(rowValueInDataSource, rowNewValue);
         }
     }
+
+    public get_selected_children(id: string, record: ITreeGridRecord, selectedRowIDs: any[]) {
+        const grid = this.get(id);
+        if (!record.children || record.children.length === 0) {
+            return;
+        }
+        for (const child of record.children) {
+            if (grid.selection.is_item_selected(id, child.rowID)) {
+                selectedRowIDs.push(child.rowID);
+            }
+            this.get_selected_children(id, child, selectedRowIDs);
+        }
+    }
 }

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-selection.spec.ts

@@ -84,6 +84,25 @@ describe('IgxTreeGrid - Selection', () => {
             TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false);
         });
 
+        it('when all items are selected and then some of the selected rows are deleted, still all the items should be selected', () => {
+            treeGrid.selectAllRows();
+            fix.detectChanges();
+            TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true);
+
+            treeGrid.deleteRowById(treeGrid.selectedRows()[0]);
+            fix.detectChanges();
+            TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true);
+
+            treeGrid.deleteRowById(treeGrid.selectedRows()[0]);
+            fix.detectChanges();
+            TreeGridFunctions.verifyHeaderCheckboxSelection(fix, true);
+
+            treeGrid.deleteRowById(treeGrid.selectedRows()[0]);
+            fix.detectChanges();
+             // When deleting the last selected row, header checkbox will be unchecked.
+            TreeGridFunctions.verifyHeaderCheckboxSelection(fix, false);
+        });
+
         it('should be able to select row of any level', () => {
             treeGrid.selectRows([treeGrid.getRowByIndex(0).rowID], true);
             fix.detectChanges();