Merge branch 'master' into valadzhov/toast-position-not-working-10305-master

Author: kdinev

.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

@@ -9,6 +9,8 @@ All notable changes for each version of this project will be documented in this
     - Exporter services are no longer required to be provided in the application since they are now injected on a root level.
 - `IgxGridToolbarPinningComponent`, `IgxGridToolbarHidingComponent`
     - Exposed new input `buttonText` which sets the text that is displayed inside the dropdown button in the toolbar.
+- `IgxCombo`
+    - Added `groupSortingDirection` input, which allows you to set groups sorting order.
 
 ### General
 
@@ -33,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
@@ -3657,3 +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/combo/combo.component.html

@@ -52,7 +52,7 @@
         [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
         <igx-combo-item role="option" [itemHeight]='itemHeight' *igxFor="let item of data
             | comboFiltering:filterValue:displayKey:filterable:filteringOptions
-            | comboGrouping:groupKey:valueKey;
+            | comboGrouping:groupKey:valueKey:groupSortingDirection;
             index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
             [value]="item" [isHeader]="item.isHeader" [index]="rowIndex">
             <ng-container *ngIf="item.isHeader">

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -28,6 +28,7 @@ import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../service
 import { IgxSelectionAPIService } from '../core/selection';
 import { IgxIconService } from '../icon/public_api';
 import { IBaseCancelableBrowserEventArgs } from '../core/utils';
+import { SortingDirection } from '../data-operations/sorting-expression.interface';
 
 const CSS_CLASS_COMBO = 'igx-combo';
 const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -2172,6 +2173,17 @@ describe('igxCombo', () => {
             expect(combo.dropdown.headers.length).toEqual(1);
             expect(combo.dropdown.headers[0].element.nativeElement.innerText).toEqual(fallBackGroup);
         });
+        it('should sort groups correctly', () => {
+            combo.groupSortingDirection = SortingDirection.Asc;
+            combo.toggle();
+            fixture.detectChanges();
+            expect(combo.dropdown.headers[0].element.nativeElement.innerText).toEqual('East North Central');
+
+            combo.groupSortingDirection = SortingDirection.Desc;
+            combo.toggle();
+            fixture.detectChanges();
+            expect(combo.dropdown.headers[0].element.nativeElement.innerText).toEqual('West South Cent');
+        });
     });
     describe('Filtering tests: ', () => {
         configureTestSuite();

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -40,6 +40,7 @@ import { EditorProvider } from '../core/edit-provider';
 import { IgxInputState, IgxInputDirective } from '../directives/input/input.directive';
 import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api';
 import { caseSensitive } from '@igniteui/material-icons-extended';
+import { SortingDirection } from '../data-operations/sorting-expression.interface';
 
 /**
  * @hidden
@@ -774,6 +775,25 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     @Input()
     public filterable = true;
 
+    /**
+     * An @Input property that sets groups sorting order.
+     *
+     * @example
+     * ```html
+     * <igx-combo [groupSortingDirection]="groupSortingDirection"></igx-combo>
+     * ```
+     * ```typescript
+     * public groupSortingDirection = SortingDirection.Asc;
+     * ```
+     */
+    @Input()
+    public get groupSortingDirection(): SortingDirection {
+        return this._groupSortingDirection;
+    }
+    public set groupSortingDirection(val: SortingDirection) {
+        this._groupSortingDirection = val;
+    }
+
     /**
      * An @Input property that set aria-labelledby attribute
      * ```html
@@ -906,6 +926,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     private _overlaySettings: OverlaySettings;
     private _value = '';
     private _valid = IgxComboState.INITIAL;
+    private _groupSortingDirection: SortingDirection = SortingDirection.Asc;
 
     constructor(
         protected elementRef: ElementRef,

projects/igniteui-angular/src/lib/combo/combo.pipes.ts

@@ -44,14 +44,14 @@ export class IgxComboGroupingPipe implements PipeTransform {
 
     constructor(@Inject(IGX_COMBO_COMPONENT) public combo: IgxComboBase) { }
 
-    public transform(collection: any[], groupKey: any, valueKey: any) {
+    public transform(collection: any[], groupKey: any, valueKey: any, sortingDirection: SortingDirection) {
         this.combo.filteredData = collection;
         if ((!groupKey && groupKey !== 0) || !collection.length) {
             return collection;
         }
         const sorted = DataUtil.sort(cloneArray(collection), [{
             fieldName: groupKey,
-            dir: SortingDirection.Asc,
+            dir: sortingDirection,
             ignoreCase: true,
             strategy: DefaultSortingStrategy.instance()
         }]);

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/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();