Merge from base.

Author: MKirova

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,9 @@ export interface PivotGridType extends GridType {
     setupColumns(): void;
     toggleRow(rowID: any): void;
     resolveDataTypes(field: any): GridColumnDataType;
+    resolveRowDimensionWidth(dim: IPivotDimension): number;
+    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

@@ -47,7 +47,8 @@
             </ng-template>
         </ng-template>
         <ng-template #record_template let-rowIndex="index" let-rowData>
-            <igx-pivot-row [gridID]="id" [index]="rowIndex" [data]="rowData" [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+            <igx-pivot-row [pivotRowWidths]='pivotRowWidths' [gridID]="id" [index]="rowIndex" [data]="rowData" 
+            [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
             [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-pivot-row>
         </ng-template>