Merge branch 'master' into kdragieva/single-cell-value-master

Author: zdrawku

.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

@@ -7,6 +7,10 @@ All notable changes for each version of this project will be documented in this
 ### New Features
 - `IgxCsvExporterService`, `IgxExcelExporterService`
     - 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
 
@@ -23,6 +27,19 @@ All notable changes for each version of this project will be documented in this
     };
     this.alert.positionSettings = this.newPositionSettings;
     ```
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - **Breaking Change** - The following deprecated inputs have been removed
+        - Inputs  `showToolbar`, `toolbarTitle`, `columnHiding`, `columnHidingTitle`, `hiddenColumnsText`,
+        `columnPinning`, `columnPinningTitle`, `pinnedColumnsText`.
+        Use `IgxGridToolbarComponent`, `IgxGridToolbarHidingComponent`, `IgxGridToolbarPinningComponent` instead.
+- `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
 
@@ -3648,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"`
+    

ROADMAP.md

@@ -2,30 +2,49 @@
 
 # Current Milestone
 
-## Milestone 18 (Due by Oct, 2021)
+## Milestone 19 (Due by Nov, 2021)
 
-1. **[DONE]** Add row at top of grid [#9675](https://github.com/IgniteUI/igniteui-angular/issues/9675)
-2. **[DONE]** Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969)
-3. **[DONE]** Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863)
-4. **[DONE]** Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516)
-5. **[DONE]** IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
-6. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126)
+1. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
+2. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
+3. **DONE** Themes: Refactor Grid theme [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
+4. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103)
+5. Classes to indicate position of auto overlay [#9481](https://github.com/IgniteUI/igniteui-angular/issues/9481)
+6. onFilterDone property to expose additional information [#10243](https://github.com/IgniteUI/igniteui-angular/issues/10243)
+7. IgxCombo with single selection [#9832](https://github.com/IgniteUI/igniteui-angular/issues/9832)
 
 ## Going down the road
 
+# Due in 2021
+
 1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700)
-2. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514)
-3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
-4. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
-5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
-6. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
-7. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103)
-8. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
+2. Grid grouping for an unbound field [#10223](https://github.com/IgniteUI/igniteui-angular/issues/10223)
+4. Grid autosize feature with performance improvements [#10205](https://github.com/IgniteUI/igniteui-angular/issues/10205)
+5. Column moving feature on grid level [#10176](https://github.com/IgniteUI/igniteui-angular/issues/10176)
+6. Grid summary custom templating [#7981](https://github.com/IgniteUI/igniteui-angular/issues/7981)
+7. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
+8. Improve sorting experience for users [#9674](https://github.com/IgniteUI/igniteui-angular/issues/9674)
 9. IgxCombo: being able to set groups sorting order [#10125](https://github.com/IgniteUI/igniteui-angular/issues/10125)
 10. Getting only one sort and one filter event after changing the state of grid using setState function [#8064](https://github.com/IgniteUI/igniteui-angular/issues/8064)
+11. IgxGridState directive to save disableHiding property [#9304](https://github.com/IgniteUI/igniteui-angular/issues/9304)
+12. Template grid excel filter footer [#10183](https://github.com/IgniteUI/igniteui-angular/issues/10183)
+13. Igx Grid Sort Icon Change [#10217](https://github.com/IgniteUI/igniteui-angular/issues/10217)
+
+# Due in 2022
+
+1. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
+2. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514)
 
 # Previous Milestone
 
+## Milestone 18 (Released October 4th, 2021)
+
+1. **[DONE]** Add row at top of grid [#9675](https://github.com/IgniteUI/igniteui-angular/issues/9675)
+2. **[DONE]** Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969)
+3. **[DONE]** Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863)
+4. **[DONE]** Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516)
+5. **[DONE]** IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
+6. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126)
+
 ## Milestone 17 (Released August 2nd, 2021)
 
 1. **[DONE]** Accordion component to Ignite UI for Angular [#9559](https://github.com/IgniteUI/igniteui-angular/issues/9559)

azure-pipelines.yml

@@ -1,5 +1,5 @@
 pool:
-  vmImage: 'Ubuntu 16.04'
+  vmImage: 'ubuntu-latest'
 
 steps:
 - script: npm ci

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