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

Author: mddragnev

.github/workflows/nodejs.yml

@@ -41,6 +41,7 @@ jobs:
             npm run test:lib
             npm run test:styles
             npm run test:schematics
+            npm run test:i18n
         env:
             NODE_OPTIONS: --max_old_space_size=4096
       - name: Build i18n & validate output

CHANGELOG.md

@@ -35,6 +35,12 @@ All notable changes for each version of this project will be documented in this
 - `IgxColumnActionsComponent`
     - **Breaking Change** - The following input has been removed
         - Input `columns`. Use `igxGrid` `columns` input instead.        
+
+## 12.2.3
+
+### General
+- **Breaking Change** - `IgxPercentSummaryOperand` and `IgxCurrencySummaryOperand` have been removed and `IgxNumberSummaryOperand` should be used instead. If you have used the percent or currency summary operands to extend a custom summary operand from them, then change the custom operand to extend from the number summary operand.
+
 ## 12.2.1
 
 ### New Features
@@ -3659,4 +3665,4 @@ export class IgxCustomFilteringOperand extends IgxFilteringOperand {
     - `IgxDraggableDirective` moved inside `../directives/dragdrop/` folder
     - `IgxRippleDirective` moved inside `../directives/ripple/` folder
     - Folder `"./navigation/nav-service"` renamed to `"./navigation/nav.service"`
-    
+    

package.json

@@ -23,6 +23,7 @@
     "test:lib:watch": "ng test igniteui-angular --karma-config=./projects/igniteui-angular/karma.watch.conf.js",
     "test:schematics": "ts-node --project projects/igniteui-angular/migrations/tsconfig.json ./node_modules/jasmine/bin/jasmine.js ./projects/igniteui-angular/migrations/**/*.spec.ts ./projects/igniteui-angular/schematics/**/*.spec.ts",
     "test:styles": "ts-node --skip-project ./node_modules/jasmine/bin/jasmine.js ./projects/igniteui-angular/src/lib/core/styles/spec/tests.ts",
+    "test:i18n": "ts-node --skip-project ./projects/igniteui-angular/src/lib/core/i18n/tests/tests.ts",
     "build:lib": "ng build igniteui-angular --configuration production && gulp buildStyle",
     "build:style": "gulp buildStyle",
     "build:migration": "gulp copyMigrations && tsc --listEmittedFiles --project ./projects/igniteui-angular/migrations/tsconfig.json",

projects/igniteui-angular/src/lib/core/i18n/tests/tests.ts

@@ -0,0 +1,31 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+const i18nProductPath = path.join(__dirname, '../');
+const i18nLanguagesPath = path.join(__dirname, '../../../../../../igniteui-angular-i18n/src/i18n');
+const errors = [];
+
+class i18nTests {
+    public runTests(): void {
+        this.i18nFilesMatchForAllLanguages();
+    }
+
+    public getDirectories = srcPath => fs.readdirSync(srcPath).filter(file => fs.statSync(path.join(srcPath, file)).isDirectory());
+    public getFiles = srcPath => fs.readdirSync(srcPath).filter(file => fs.statSync(path.join(srcPath, file)).isFile());
+
+    public i18nFilesMatchForAllLanguages(): void {
+        this.getDirectories(i18nLanguagesPath).forEach(dir => {
+            const curDirPath = path.join(i18nLanguagesPath, dir);
+            if (this.getFiles(curDirPath).length !== this.getFiles(i18nProductPath).length) {
+                errors.push(`Not all i18n component files that are available for localization have matching files for ${dir} language.
+                    Check and add the appropriate resource strings with EN translation and mark the PR as 'pending localization'`
+                );
+            }
+        });
+        if (errors.length > 0) {
+            throw errors;
+        }
+    }
+}
+
+new i18nTests().runTests();

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss

@@ -340,7 +340,6 @@
         width: 100%;
         height: rem($slider-track-height);
         background-size: 100% em($slider-track-height);
-        background-color: --var($theme, 'track-step-color');
         opacity: .85;
         transition: opacity .2s $ease-out-quad;
         z-index: 1;

projects/igniteui-angular/src/lib/data-operations/pivot-strategy.ts

@@ -0,0 +1,153 @@
+
+import { IPivotDimension, IPivotKeys, IPivotValue, PivotDimensionType } from '../grids/pivot-grid/pivot-grid.interface';
+import { PivotUtil } from '../grids/pivot-grid/pivot-util';
+
+export interface IPivotDimensionStrategy {
+    process(collection: any,
+        dimensions: IPivotDimension[],
+        values: IPivotValue[],
+        pivotKeys?: IPivotKeys): any[];
+}
+
+export class NoopPivotDimensionsStrategy implements IPivotDimensionStrategy {
+    private static _instance: NoopPivotDimensionsStrategy = null;
+
+    public static instance() {
+        return this._instance || (this._instance = new NoopPivotDimensionsStrategy());
+    }
+
+    public process(collection: any[], _: IPivotDimension[], __: IPivotValue[]): any[] {
+        return collection;
+    }
+}
+
+
+export class PivotRowDimensionsStrategy implements IPivotDimensionStrategy {
+    private static _instance: PivotRowDimensionsStrategy = null;
+
+    public static instance() {
+        return this._instance || (this._instance = new PivotRowDimensionsStrategy());
+    }
+
+    public process(
+            collection: any,
+            rows: IPivotDimension[],
+            values?: IPivotValue[],
+            pivotKeys: IPivotKeys =
+            { aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
+        ): any[] {
+            let hierarchies;
+            let data;
+            const prevRowDims = [];
+            let prevDim;
+            for (const row of rows) {
+                if (!data) {
+                    // build hierarchies - groups and subgroups
+                    hierarchies = PivotUtil.getFieldsHierarchy(collection, [row], PivotDimensionType.Row, pivotKeys);
+                    // generate flat data from the hierarchies
+                    data = PivotUtil.processHierarchy(hierarchies, collection[0] ?? [], pivotKeys, 0, true);
+                    row.fieldName = hierarchies.get(hierarchies.keys().next().value).dimension.fieldName;
+                    prevRowDims.push(row);
+                    prevDim = row;
+                } else {
+                    const newData = [...data];
+                    for (let i = 0; i < newData.length; i++) {
+                        const currData = newData[i][prevDim.fieldName + '_' + pivotKeys.records];
+                        const hierarchyFields = PivotUtil
+                            .getFieldsHierarchy(currData, [row], PivotDimensionType.Row, pivotKeys);
+                        const siblingData = PivotUtil
+                            .processHierarchy(hierarchyFields, newData[i] ?? [], pivotKeys, 0);
+                        row.fieldName = hierarchyFields.get(hierarchyFields.keys().next().value).dimension.fieldName;
+                        PivotUtil.processSiblingProperties(newData[i], siblingData, pivotKeys);
+
+                        PivotUtil.processSubGroups(row, prevRowDims.slice(0), siblingData, pivotKeys);
+                        if (PivotUtil.getDimensionDepth(prevDim) > PivotUtil.getDimensionDepth(row)) {
+                            newData[i][row.fieldName + '_' + pivotKeys.records] = siblingData;
+                        } else {
+                            newData.splice(i , 1, ...siblingData);
+                        }
+                        i += siblingData.length - 1;
+                    }
+                    data = newData;
+                    prevDim = row;
+                    prevRowDims.push(row);
+                }
+            }
+            return data;
+        }
+    }
+
+export class PivotColumnDimensionsStrategy implements IPivotDimensionStrategy {
+    private static _instance: PivotRowDimensionsStrategy = null;
+
+    public static instance() {
+        return this._instance || (this._instance = new PivotColumnDimensionsStrategy());
+    }
+
+    public process(
+            collection: any[],
+            columns: IPivotDimension[],
+            values: IPivotValue[],
+            pivotKeys: IPivotKeys = {aggregations: 'aggregations', records: 'records', children: 'children', level: 'level'}
+        ): any[] {
+            const result = [];
+            collection.forEach(hierarchy => {
+                // apply aggregations based on the created groups and generate column fields based on the hierarchies
+                this.groupColumns(hierarchy, columns, values, pivotKeys);
+                if (hierarchy[pivotKeys.children]) {
+                    let flatCols = {};
+                    PivotUtil.flattenColumnHierarchy(hierarchy[pivotKeys.children], values, pivotKeys).forEach(o => {
+                        delete o[pivotKeys.records];
+                        flatCols = {...flatCols, ...o};
+                    });
+                    delete hierarchy[pivotKeys.children]; /* or we can keep it
+                    and use when creating the columns in pivot grid instead of recreating it */
+                    const keys = Object.keys(hierarchy);
+                    //remove all record keys from final data since we don't need them anymore.
+                    keys.forEach(k => {
+                        if (k.indexOf(pivotKeys.records) !== -1 || k  === pivotKeys.level) {
+                            delete hierarchy[k];
+                        }
+                    });
+                    if (this.isLeaf(hierarchy, pivotKeys)) {
+                        delete hierarchy[pivotKeys.records]; /* remove the helper records of the actual records so that
+                    expand indicators can be rendered properly */
+                    }
+                    for (const property in flatCols) {
+                        if (flatCols.hasOwnProperty(property)) {
+                            hierarchy[property] = flatCols[property];
+                        }
+                    }
+                    result.push(hierarchy);
+                }
+            });
+            return result;
+    }
+
+    private groupColumns(hierarchy, columns, values, pivotKeys) {
+        const children = hierarchy[pivotKeys.children];
+        if (children) {
+            this.groupColumns(children, columns, values, pivotKeys);
+        } else if (hierarchy[pivotKeys.records]) {
+            const leafRecords = this.getLeafs(hierarchy[pivotKeys.records], pivotKeys);
+            hierarchy[pivotKeys.children] = PivotUtil.getFieldsHierarchy(leafRecords, columns, PivotDimensionType.Column, pivotKeys);
+            PivotUtil.applyAggregations(hierarchy[pivotKeys.children], values, pivotKeys);
+        }
+    }
+
+    private getLeafs(records, pivotKeys) {
+        let leafs = [];
+        for (const rec of records) {
+            if (rec[pivotKeys.records]) {
+                leafs = leafs.concat(this.getLeafs(rec[pivotKeys.records], pivotKeys));
+            } else {
+                leafs.push(rec);
+            }
+        }
+        return leafs;
+    }
+
+    private isLeaf(record, pivotKeys) {
+        return !(record[pivotKeys.records] && record[pivotKeys.records].some(r => r[pivotKeys.records]));
+    }
+}

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

@@ -163,7 +163,7 @@ export interface IRowToggleEventArgs extends IBaseEventArgs {
 /**
  * Event emitted when a row's pin state changes.
  */
-export interface IPinRowEventArgs extends IBaseEventArgs {
+export interface IPinRowEventArgs extends IBaseEventArgs, CancelableEventArgs {
     /**
      * The ID of the row, that was pinned/unpinned.
      *   ID is either the primaryKey value or the data record instance.
@@ -172,7 +172,7 @@ export interface IPinRowEventArgs extends IBaseEventArgs {
     row?: RowType;
     /** The index at which to pin the row in the pinned rows collection. */
     insertAtIndex?: number;
-    /** Whether or noy the row is pinned or unpinned. */
+    /** Whether or not the row is pinned or unpinned. */
     readonly isPinned: boolean;
 }
 

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

@@ -4655,10 +4655,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             insertAtIndex: index,
             isPinned: true,
             rowID,
-            row
+            row,
+            cancel: false
         };
         this.rowPinning.emit(eventArgs);
 
+        if (eventArgs.cancel) {
+            return;
+        }
+
         this.crudService.endEdit(false);
 
         const insertIndex = typeof eventArgs.insertAtIndex === 'number' ? eventArgs.insertAtIndex : this._pinnedRecordIDs.length;
@@ -4691,10 +4696,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         const eventArgs: IPinRowEventArgs = {
             isPinned: false,
             rowID,
-            row
+            row,
+            cancel: false
         };
         this.rowPinning.emit(eventArgs);
 
+        if (eventArgs.cancel) {
+            return;
+        }
+
         this.crudService.endEdit(false);
         this._pinnedRecordIDs.splice(index, 1);
         this.pipeTrigger++;

projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts

@@ -3,7 +3,7 @@ import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxGridComponent } from './grid.component';
-import { IgxGridModule } from './public_api';
+import { IgxGridModule, IPinRowEventArgs } from './public_api';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { ColumnPinningPosition, RowPinningPosition } from '../common/enums';
 import { IPinningConfig } from '../grid.common';
@@ -164,7 +164,8 @@ describe('Row Pinning #grid', () => {
                 rowID,
                 insertAtIndex: 0,
                 isPinned: true,
-                row
+                row,
+                cancel: false
             });
 
             row = grid.getRowByIndex(0);
@@ -190,7 +191,8 @@ describe('Row Pinning #grid', () => {
                 rowID,
                 insertAtIndex: 0,
                 isPinned: true,
-                row
+                row,
+                cancel: false
             });
 
             row.unpin();
@@ -200,6 +202,62 @@ describe('Row Pinning #grid', () => {
             expect(grid.rowPinned.emit).toHaveBeenCalledTimes(2);
         });
 
+        it(`Should be able to cancel rowPinning on pin/unpin event.`, () => {
+            spyOn(grid.rowPinning, 'emit').and.callThrough();
+            let sub = grid.rowPinning.subscribe((e: IPinRowEventArgs) => {
+                e.cancel = true;
+            });
+
+            const row = grid.getRowByIndex(0);
+            const rowID = row.key;
+            expect(row.pinned).toBeFalsy();
+
+            row.pin();
+            fix.detectChanges();
+
+            expect(grid.rowPinning.emit).toHaveBeenCalledTimes(1);
+            expect(grid.rowPinning.emit).toHaveBeenCalledWith({
+                insertAtIndex: 0,
+                isPinned: true,
+                rowID,
+                row,
+                cancel: true
+            });
+            expect(row.pinned).toBeFalsy();
+
+            sub.unsubscribe();
+
+            row.pin();
+            fix.detectChanges();
+
+            expect(grid.rowPinning.emit).toHaveBeenCalledTimes(2);
+            expect(grid.rowPinning.emit).toHaveBeenCalledWith({
+                insertAtIndex: 0,
+                isPinned: true,
+                rowID,
+                row,
+                cancel: false
+            });
+            expect(row.pinned).toBe(true);
+
+            sub = grid.rowPinning.subscribe((e: IPinRowEventArgs) => {
+                e.cancel = true;
+            });
+
+            row.unpin();
+            fix.detectChanges();
+
+            expect(grid.rowPinning.emit).toHaveBeenCalledTimes(3);
+            expect(grid.rowPinning.emit).toHaveBeenCalledWith({
+                isPinned: false,
+                rowID,
+                row,
+                cancel: true
+            });
+            expect(row.pinned).toBe(true);
+            sub.unsubscribe();
+        });
+
         it('should pin/unpin via grid API methods.', () => {
             // pin 2nd row
             grid.pinRow(fix.componentInstance.data[1]);

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

@@ -32,8 +32,9 @@
             class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
         <ng-template igxGridFor let-rowData [igxGridForOf]="data
         | pivotGridFilter:pivotConfiguration.filters:filterStrategy:advancedFilteringExpressionsTree
-        | pivotGridRow:pivotConfiguration.rows:expansionStates:pivotConfiguration.values
-        | pivotGridColumn:pivotConfiguration.columns:pivotConfiguration.values"
+        | pivotGridRow:pivotConfiguration:expansionStates
+        | pivotGridRowExpansion:pivotConfiguration:expansionStates
+        | pivotGridColumn:pivotConfiguration:expansionStates"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
             [igxForContainerSize]='calcHeight'
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"