Merge branch 'master' into pivot-grid-master

Author: ChronosSF

.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/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/toolbar/grid-toolbar.component.ts

@@ -6,10 +6,8 @@ import {
     Inject,
     Input,
     OnDestroy,
-    OnInit,
     Optional
 } from '@angular/core';
-import { first } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../../core/displayDensity';
 import { IgxIconService } from '../../icon/public_api';
@@ -30,7 +28,7 @@ import { GridType } from '../common/grid.interface';
     selector: 'igx-grid-toolbar',
     templateUrl: './grid-toolbar.component.html'
 })
-export class IgxGridToolbarComponent extends DisplayDensityBase implements OnInit, OnDestroy {
+export class IgxGridToolbarComponent extends DisplayDensityBase implements OnDestroy {
 
     /**
      * When enabled, shows the indeterminate progress bar.
@@ -106,10 +104,6 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements OnIni
         return this.displayDensity === 'compact';
     }
 
-    /** @hidden @internal */
-    @HostBinding('style.max-width.px')
-    @HostBinding('style.flex-basis.px')
-    public width = null;
 
     protected _grid: IgxGridBaseDirective;
     protected sub: Subscription;
@@ -125,12 +119,6 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements OnIni
         this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons');
     }
 
-    /** @hidden @internal */
-    public ngOnInit() {
-        this.grid.rendered$.pipe(first()).subscribe(() => this.width = this.grid.outerWidth);
-        this.sub = this.grid.resizeNotify.subscribe(() => this.width = this.grid.outerWidth);
-    }
-
     /** @hidden @internal */
     public ngOnDestroy() {
         this.sub?.unsubscribe();