Merge branch 'mdragnev/pivot-selection' of https://github.com/IgniteUI/igniteui-angular into mdragnev/pivot-selection

Author: mddragnev

package-lock.json

@@ -51,14 +51,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.0.0",
-    "@angular/common": "^13.0.0",
-    "@angular/compiler": "^13.0.0",
-    "@angular/core": "^13.0.0",
-    "@angular/forms": "^13.0.0",
-    "@angular/platform-browser": "^13.0.0",
-    "@angular/platform-browser-dynamic": "^13.0.0",
-    "@angular/router": "^13.0.0",
+    "@angular/animations": "^13.0.2",
+    "@angular/common": "^13.0.2",
+    "@angular/compiler": "^13.0.2",
+    "@angular/core": "^13.0.2",
+    "@angular/forms": "^13.0.2",
+    "@angular/platform-browser": "^13.0.2",
+    "@angular/platform-browser-dynamic": "^13.0.2",
+    "@angular/router": "^13.0.2",
     "@igniteui/material-icons-extended": "^2.10.0",
     "@types/hammerjs": "^2.0.40",
     "@types/source-map": "0.5.2",
@@ -75,28 +75,28 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.0.1",
-    "@angular-devkit/schematics": "^13.0.1",
-    "@angular-eslint/builder": "^13.0.0-alpha.0",
-    "@angular-eslint/eslint-plugin": "^12.6.1",
-    "@angular-eslint/eslint-plugin-template": "^12.6.1",
-    "@angular-eslint/schematics": "^12.6.1",
-    "@angular-eslint/template-parser": "^12.6.1",
-    "@angular/cli": "~13.0.1",
-    "@angular/compiler-cli": "^13.0.0",
-    "@angular/language-service": "^13.0.0",
+    "@angular-devkit/build-angular": "~13.0.3",
+    "@angular-devkit/schematics": "^13.0.3",
+    "@angular-eslint/builder": "^13.0.1",
+    "@angular-eslint/eslint-plugin": "^13.0.1",
+    "@angular-eslint/eslint-plugin-template": "^13.0.1",
+    "@angular-eslint/schematics": "^13.0.1",
+    "@angular-eslint/template-parser": "^13.0.1",
+    "@angular/cli": "~13.0.3",
+    "@angular/compiler-cli": "^13.0.2",
+    "@angular/language-service": "^13.0.2",
     "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "^3.10.2",
     "@types/jasminewd2": "^2.0.10",
     "@types/node": "^12.20.36",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "4.16.1",
-    "@typescript-eslint/parser": "4.16.1",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
     "browser-sync": "^2.27.7",
     "codelyzer": "^6.0.2",
     "coveralls": "^3.1.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "2.22.1",
+    "eslint": "^8.2.0",
+    "eslint-plugin-import": "2.25.2",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
     "gulp": "^4.0.2",

package.json

@@ -548,10 +548,43 @@
             }
         }
 
+        // Pivot start
+        @include e(tr-pivot) {
+            @extend %igx-grid__tr-pivot !optional
+        }
+
+        @include e(tr-pivot, $m: 'row-area') {
+            @extend %igx-grid__tr-pivot--row-area !optional
+        }
+
+        @include e(tr-pivot, $m: 'filter') {
+            @extend %igx-grid__tr-pivot--filter !optional
+        }
+
+        @include e(tr-pivot-group) {
+            @extend %igx-grid__tr-pivot-group !optional
+        }
+
+        @include e(tr-pivot-toggle-icons) {
+            @extend %igx-grid__tr-pivot-toggle-icons !optional;
+        }
+        // pivot end
 
         @include m(cosy) {
             @extend %grid-display !optional;
 
+            @include e(tr-pivot) {
+                @extend %igx-grid__tr-pivot--cosy !optional
+            }
+
+            @include e(tr-pivot, $m: 'row-area') {
+                @extend %igx-grid__tr-pivot--row-area--cosy !optional
+            }
+
+            @include e(tr-pivot, $m: 'filter') {
+                @extend %igx-grid__tr-pivot--filter--cosy !optional
+            }
+
             @include e(drag-indicator) {
                 @extend %igx-grid__drag-indicator--cosy !optional;
             }
@@ -641,6 +674,18 @@
         @include m(compact) {
             @extend %grid-display !optional;
 
+            @include e(tr-pivot) {
+                @extend %igx-grid__tr-pivot--compact !optional
+            }
+
+            @include e(tr-pivot, $m: 'row-area') {
+                @extend %igx-grid__tr-pivot--row-area--compact !optional
+            }
+
+            @include e(tr-pivot, $m: 'filter') {
+                @extend %igx-grid__tr-pivot--filter--compact !optional
+            }
+
             @include e(drag-indicator) {
                 @extend %igx-grid__drag-indicator--compact !optional;
             }
@@ -727,22 +772,6 @@
             }
         }
 
-        @include e(tr-pivot) {
-            @extend %igx-grid__tr-pivot !optional
-        }
-
-        @include e(tr-pivot, $m: 'row-area') {
-            @extend %igx-grid__tr-pivot--row-area !optional
-        }
-
-        @include e(tr-pivot, $m: 'filter') {
-            @extend %igx-grid__tr-pivot--filter !optional
-        }
-
-        @include e(tr-pivot-group) {
-            @extend %igx-grid__tr-pivot-group !optional
-        }
-
         @include excel-filtering-partial();
         @include advanced-filtering-partial();
         @include group-by-area();

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

@@ -640,6 +640,12 @@
         compact: 0 $padding-compact
     );
 
+    $pivot-row-aria-padding: (
+        comfortable: $padding-comfortable,
+        cosy: $padding-cosy,
+        compact: $padding-compact
+    );
+
     $grid-cbx-padding: (
         comfortable: $padding-comfortable,
         cosy: $padding-cosy,
@@ -2879,20 +2885,29 @@
         display: flex;
         align-items: center;
         background: inherit;
+        overflow: hidden;
         z-index: 3;
+        height: map.get($grid-header-height, 'comfortable');
 
-        &:not(&--row-area) {
-            height: map.get($grid-header-height, 'comfortable');
+        &--cosy {
+            height: map.get($grid-header-height, 'cosy');
+            padding: map.get($grid-header-padding, 'cosy');
+        }
+
+        &--compact {
+            height: map.get($grid-header-height, 'compact');
+            padding: map.get($grid-header-padding, 'compact');
         }
 
         padding: map.get($grid-header-padding, 'comfortable');
         background-clip: border-box !important;
-
         border-#{$left}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
         border-#{$right}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
         border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
 
         igx-chips-area {
+            flex-wrap: nowrap;
+
             > * {
                 margin-#{$right}: rem(8px);
             }
@@ -2904,14 +2919,33 @@
     }
 
     %igx-grid__tr-pivot--row-area {
+        height: auto !important;
         align-items: flex-end;
-        padding-bottom: $padding-comfortable;
+        padding-bottom: map.get($pivot-row-aria-padding, 'comfortable');
+
+        &--cosy{
+            padding-bottom: map.get($pivot-row-aria-padding, 'cosy');
+        }
+
+        &--compact{
+            padding-bottom: map.get($pivot-row-aria-padding, 'compact');
+        }
+
         border-#{$left}: 0;
         border-bottom: 0;
     }
 
     %igx-grid__tr-pivot--filter {
         height: map.get($grid-header-height, 'comfortable');
+
+        &--cosy {
+            height: map.get($grid-header-height, 'cosy');
+        }
+
+        &--compact {
+            height: map.get($grid-header-height, 'compact');
+        }
+
         border-left: 0;
         border-right: 0;
         border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
@@ -2924,7 +2958,12 @@
     %igx-grid__tr-pivot-group {
         flex: 1;
     }
+
+    %igx-grid__tr-pivot-toggle-icons {
+        display: inline-flex !important;
+    }
     // Pivot grid END
 }
 
 
+

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

@@ -34,7 +34,7 @@ import { IGridGroupingStrategy, IGridSortingStrategy } from './strategy';
 import { IForOfState, IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
 import { OverlaySettings } from '../../services/overlay/utilities';
 import { IPinningConfig } from '../grid.common';
-import { IPivotConfiguration, IPivotDimension, IPivotValue } from '../pivot-grid/pivot-grid.interface';
+import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotValue, IValuesChange } from '../pivot-grid/pivot-grid.interface';
 
 
 export const IGX_GRID_BASE = new InjectionToken<GridType>('IgxGridBaseToken');
@@ -628,6 +628,8 @@ export interface PivotGridType extends GridType {
     setupColumns(): void;
     toggleRow(rowID: any): void;
     resolveDataTypes(field: any): GridColumnDataType;
+    dimensionsChange: EventEmitter<IDimensionsChange>;
+    valuesChange: EventEmitter<IValuesChange>;
 }
 export interface GridSVGIcon {
     name: string;

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

@@ -18,12 +18,12 @@ export abstract class BaseFilteringComponent {
     public abstract expressionsList: ExpressionUI[];
     public abstract listData: FilterListItem[];
 
-    abstract loadingStart: EventEmitter<undefined>;
-    abstract loadingEnd: EventEmitter<undefined>;
-    abstract initialized: EventEmitter<undefined>;
-    abstract columnChange: EventEmitter<any>;
-    abstract sortingChanged: EventEmitter<undefined>;
-    abstract listDataLoaded: EventEmitter<undefined>;
+    public abstract loadingStart: EventEmitter<undefined>;
+    public abstract loadingEnd: EventEmitter<undefined>;
+    public abstract initialized: EventEmitter<undefined>;
+    public abstract columnChange: EventEmitter<any>;
+    public abstract sortingChanged: EventEmitter<undefined>;
+    public abstract listDataLoaded: EventEmitter<undefined>;
 
     constructor(
         protected cdr: ChangeDetectorRef,
@@ -32,13 +32,13 @@ export abstract class BaseFilteringComponent {
     ) { }
 
 
-    abstract initialize(column: any, overlayService: IgxOverlayService): void;
-    abstract detectChanges(): void;
-    abstract hide(): void;
-    abstract closeDropdown(): void;
-    abstract onSelect(): void;
-    abstract onPin(): void;
-    abstract onHideToggle(): void;
-    abstract cancel(): void;
+    public abstract initialize(column: any, overlayService: IgxOverlayService): void;
+    public abstract detectChanges(): void;
+    public abstract hide(): void;
+    public abstract closeDropdown(): void;
+    public abstract onSelect(): void;
+    public abstract onPin(): void;
+    public abstract onHideToggle(): void;
+    public abstract cancel(): void;
 
 }

projects/igniteui-angular/src/lib/grids/filtering/excel-style/base-filtering.component.ts

@@ -2786,8 +2786,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public abstract id: string;
-    abstract data: any[] | null;
-    abstract filteredData: any[];
+    public abstract data: any[] | null;
+    public abstract filteredData: any[];
     /**
      * Returns an array containing the filtered sorted data.
      *

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

@@ -33,7 +33,7 @@ import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives
 import { GridServiceType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridSummaryService } from '../summaries/grid-summary.service';
-import { IPivotConfiguration, IPivotDimension, IPivotKeys, PivotDimensionType } from './pivot-grid.interface';
+import { IDimensionsChange, IPivotConfiguration, IPivotDimension, IPivotKeys, IValuesChange, PivotDimensionType } from './pivot-grid.interface';
 import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
 import { IgxColumnGroupComponent } from '../columns/column-group.component';
 import { IgxColumnComponent } from '../columns/column.component';
@@ -85,6 +85,34 @@ const MINIMUM_COLUMN_WIDTH = 200;
 export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit,
     GridType, AfterViewInit {
 
+    /**
+     * Emitted when the dimension collection is changed via the grid chip area.
+     *
+     * @remarks
+     * Returns the new dimension collection and its type: 
+     * @example
+     * ```html
+     * <igx-pivot-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
+     *              (dimensionsChange)="dimensionsChange($event)"></igx-grid>
+     * ```
+     */
+    @Output()
+    public dimensionsChange = new EventEmitter<IDimensionsChange>();
+
+    /**
+     * Emitted when the values collection is changed via the grid chip area.
+     *
+     * @remarks
+     * Returns the new dimension
+     * @example
+     * ```html
+     * <igx-pivot-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
+     *              (valuesChange)="valuesChange($event)"></igx-grid>
+     * ```
+    */
+    @Output()
+    public valuesChange = new EventEmitter<IValuesChange>();
+
     /** @hidden @internal */
     @ViewChild(IgxPivotHeaderRowComponent, { static: true })
     public theadRow: IgxPivotHeaderRowComponent;
@@ -522,6 +550,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         });
     }
 
+    /**
+     * Notifies for dimension change.
+     */
+    public notifyDimensionChange(regenerateColumns = false) {
+        if (regenerateColumns) {
+            this.setupColumns();
+        }
+        this.pipeTrigger++;
+        this.cdr.detectChanges();
+    }
+
     public uniqueDimensionValuesStrategy(column: IgxColumnComponent, exprTree: IFilteringExpressionsTree,
         done: (uniqueValues: any[]) => void) {
         const config = this.pivotConfiguration;

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

@@ -3,6 +3,14 @@ import { FilteringExpressionsTree } from '../../data-operations/filtering-expres
 import { SortingDirection } from '../../data-operations/sorting-strategy';
 import { ColumnType } from '../common/grid.interface';
 
+export interface IDimensionsChange {
+    dimensions: IPivotDimension[],
+    dimensionCollectionType: PivotDimensionType
+}
+
+export interface IValuesChange {
+    values: IPivotValue[]
+}
 
 export interface IPivotDimensionStrategy {
     process(collection: any,