Merge branch 'master' into iganchev/select-implement-hint

Author: kdinev

.github/workflows/nodejs.yml

@@ -0,0 +1,42 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ master, 9.1.x ]
+  pull_request:
+    branches: [ master, 9.1.x ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x, 14.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run lint:lib
+    - run: npm run build:lib
+    - run: npm run test:lib:others
+      env:
+        NODE_OPTIONS: --max_old_space_size=4096
+    - run: npm run test:lib:grid
+      env:
+        NODE_OPTIONS: --max_old_space_size=4096
+    - run: npm run test:lib:tgrid
+      env:
+        NODE_OPTIONS: --max_old_space_size=4096
+    - run: npm run test:lib:hgrid
+      env:
+        NODE_OPTIONS: --max_old_space_size=4096
+    - run: npm run test:schematics

README.md

@@ -1,5 +1,6 @@
 # Ignite UI for Angular - from Infragistics
 
+![Node.js CI](https://github.com/IgniteUI/igniteui-angular/workflows/Node.js%20CI/badge.svg)
 [![Build Status](https://dev.azure.com/IgniteUI/igniteui-angular/_apis/build/status/IgniteUI.igniteui-angular)](https://dev.azure.com/IgniteUI/igniteui-angular/_build/latest?definitionId=3)
 [![Build Status](https://travis-ci.org/IgniteUI/igniteui-angular.svg?branch=master)](https://travis-ci.org/IgniteUI/igniteui-angular)
 [![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-angular/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-angular?branch=master)

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts

@@ -1,5 +1,6 @@
 import { Component, HostBinding } from '@angular/core';
 import { IgxGridActionsBaseDirective } from './grid-actions-base.directive';
+import { showMessage } from '../../core/deprecateDecorators';
 
 @Component({
     selector: 'igx-grid-editing-actions',
@@ -16,6 +17,8 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
     @HostBinding('class.igx-action-strip__editing-actions')
     public cssClass = 'igx-action-strip__editing-actions';
 
+    private isMessageShown = false;
+
     /**
      * Enter row or cell edit mode depending the grid rowEditable option
      * @example
@@ -33,6 +36,12 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
         const row = this.strip.context;
         const firstEditable = row.cells.filter(cell => cell.editable)[0];
         const grid = row.grid;
+        if (!grid.hasEditableColumns) {
+            this.isMessageShown = showMessage(
+                'The grid should be editable in order to use IgxGridEditingActionsComponent',
+                this.isMessageShown);
+                return;
+        }
         // be sure row is in view
         if (grid.rowList.filter(r => r === row).length !== 0) {
             grid.crudService.begin(firstEditable);

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -276,12 +276,12 @@
 /// @param {Color} $color - The base color used to generate the palette.
 /// @param {Map} $shades - A map of variations as keys and opacities as values.
 /// Based on the Material color system.
-/// @returns {Map} - A map consisting of 10 grayscale color variations and 10
+/// @returns {Map} - A map consisting of 10 color variations and 10
 /// text contrast colors for each variation.
 @function grayscale-palette($color, $shades) {
     $result: ();
     @each $saturation, $opacity in $shades {
-        $shade: rgba(grayscale($color), $opacity);
+        $shade: rgba($color, $opacity);
         $result: map-merge($result, ($saturation: $shade));
     }
     @return $result;
@@ -297,7 +297,7 @@
 /// @param {Color} $success [#4eb862] - The success color used throughout the application.
 /// @param {Color} $warn [#fbb13c] - The warning color used throughout the application.
 /// @param {Color} $error [#ff134a] - The error color used throughout the application.
-/// @param {Color} $grays [#000 | $igx-foreground-color] - The color used for generating the grayscale palette.
+/// @param {Color} $grays [#000 | $igx-foreground-color] - The color used for generating the grays palette.
 /// @param {Color} $surface [#fff] - The color used as a background in components, such as cards, sheets, and menus.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1132,6 +1132,8 @@
 
     %igx-grid__tr--pinned-bottom {
         border-top: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important;
+        position: absolute;
+        bottom: 0;
     }
 
     %igx-grid__tr--edit {

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

@@ -588,14 +588,12 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
 
     private addPointerListeners(selection) {
         if (selection !== GridSelectionMode.multiple) { return; }
-        this.nativeElement.addEventListener('pointerdown', this.pointerdown);
         this.nativeElement.addEventListener('pointerenter', this.pointerenter);
         this.nativeElement.addEventListener('pointerup', this.pointerup);
     }
 
     private  removePointerListeners(selection) {
         if (selection !== GridSelectionMode.multiple) { return; }
-        this.nativeElement.removeEventListener('pointerdown', this.pointerdown);
         this.nativeElement.removeEventListener('pointerenter', this.pointerenter);
         this.nativeElement.removeEventListener('pointerup', this.pointerup);
     }
@@ -606,6 +604,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     ngOnInit() {
         this.zone.runOutsideAngular(() => {
+            this.nativeElement.addEventListener('pointerdown', this.pointerdown);
             this.addPointerListeners(this.cellSelectionMode);
             // IE 11 workarounds
             if (isIE()) {
@@ -629,6 +628,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     ngOnDestroy() {
         this.zone.runOutsideAngular(() => {
+            this.nativeElement.removeEventListener('pointerdown', this.pointerdown);
             this.removePointerListeners(this.cellSelectionMode);
             if (isIE()) {
                 this.nativeElement.removeEventListener('compositionstart', this.compositionStartHandler);
@@ -755,6 +755,10 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * @internal
      */
     pointerdown = (event: PointerEvent) => {
+        if (this.cellSelectionMode !== GridSelectionMode.multiple) {
+            this.activate(event);
+            return;
+        }
         if (!isLeftClick(event)) {
             this.selectionService.addKeyboardRange();
             this.selectionService.initKeyboardState();
@@ -816,9 +820,6 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     @HostListener('click', ['$event'])
     public onClick(event: MouseEvent) {
-        if (this.cellSelectionMode !== GridSelectionMode.multiple) {
-            this.activate(event);
-        }
         this.grid.onCellClick.emit({
             cell: this,
             event

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

@@ -239,9 +239,9 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
     }
 
     /**
-     * Enables/Disables the column group selection.
-     * ```html
-     * <igx-column [selected] = "true"></igx-column>
+     * Select/deselect the column group.
+     * ```typescript
+     * this.columnGroup.selected = true;
      * ```
      * @memberof IgxColumnGroupComponent
      */

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

@@ -294,10 +294,10 @@ export class IgxColumnComponent implements AfterContentInit {
     }
 
     /**
-     * Enables/Disables column selection.
+     * Select/deselect a column.
      * Default value is `false`.
-     * ```html
-     * <igx-column [selected] = "true"></igx-column>
+     * ```typescript
+     * this.column.selected = true;
      * ```
      * @memberof IgxColumnComponent
      */

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

@@ -4294,14 +4294,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.calcHeight ? this.calcHeight + this.pinnedRowHeight : this.calcHeight;
     }
 
-    get pinnedBottom() {
-        const start = this.verticalScrollContainer.state.startIndex;
-        const end = this.verticalScrollContainer.state.startIndex + this.verticalScrollContainer.state.chunkSize - 1;
-        const bottom = this.verticalScrollContainer.getScrollForIndex(end, true) - this.verticalScrollContainer.getScrollForIndex(start);
-        return bottom;
-    }
-
-
     /**
      * Recalculates grid width/height dimensions.
      * @remarks

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

@@ -43,12 +43,16 @@ export class IgxGridAPIService extends GridBaseAPIService<IgxGridComponent> {
             names.forEach((colName) => {
                 const grExprIndex = groupingState.findIndex((exp) => exp.fieldName === colName);
                 const grpExpandState = this.grid.groupingExpansionState;
-                /* remove expansion states related to the cleared group
-                and all with deeper hierarchy than the cleared group */
-                this.grid.groupingExpansionState = grpExpandState
-                    .filter((val) => {
-                        return val.hierarchy && val.hierarchy.length <= grExprIndex;
-                    });
+                 /* remove expansion states related to the cleared group
+                    and all with deeper hierarchy than the cleared group */
+                const newExpandState = grpExpandState.filter((val) => {
+                    return val.hierarchy && val.hierarchy.length <= grExprIndex;
+                });
+                /* Do not set the new instance produced by filter
+                    when there are no differences between expansion states */
+                if (newExpandState.length !== grpExpandState.length) {
+                   this.grid.groupingExpansionState = newExpandState;
+                }
             });
         } else {
             // clear all