Merge branch 'master' into iganchev/add-tests-i18n

Author: Lipata

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"`
+    

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/grids/columns/column.component.ts

@@ -38,7 +38,7 @@ import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-
 import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';
 import {
     IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand,
-    IgxCurrencySummaryOperand, IgxPercentSummaryOperand, IgxSummaryResult, IgxTimeSummaryOperand
+    IgxSummaryResult, IgxTimeSummaryOperand
 } from '../summaries/grid-summary';
 import {
     IgxCellTemplateDirective,
@@ -1711,6 +1711,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
                     this.summaries = IgxSummaryOperand;
                     break;
                 case GridColumnDataType.Number:
+                case GridColumnDataType.Currency:
+                case GridColumnDataType.Percent:
                     this.summaries = IgxNumberSummaryOperand;
                     break;
                 case GridColumnDataType.Date:
@@ -1720,12 +1722,6 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
                 case GridColumnDataType.Time:
                     this.summaries = IgxTimeSummaryOperand;
                     break;
-                case GridColumnDataType.Currency:
-                    this.summaries = IgxCurrencySummaryOperand;
-                    break;
-                case GridColumnDataType.Percent:
-                    this.summaries = IgxPercentSummaryOperand;
-                    break;
                 default:
                     this.summaries = IgxSummaryOperand;
                     break;

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

@@ -31,6 +31,7 @@ import { SortingDirection } from '../../data-operations/sorting-expression.inter
 import { DropPosition } from '../moving/moving.service';
 import { DatePipe } from '@angular/common';
 import { IgxGridGroupByRowComponent } from './groupby-row.component';
+import { IColumnPipeArgs } from 'igniteui-angular';
 
 describe('IgxGrid - Summaries #grid', () => {
 
@@ -154,7 +155,7 @@ describe('IgxGrid - Summaries #grid', () => {
             it('should properly render custom summaries', () => {
                 const summaryRow = GridSummaryFunctions.getRootSummaryRow(fixture);
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Sum', 'Avg'], ['10', '39,004', '3,900.4']);
-                GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest'], ['5/17/1990']);
+                GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest', 'Items InStock'], ['May 17, 1990', '1337']);
 
                 grid.filter('UnitsInStock', '0', IgxNumberFilteringOperand.instance().condition('lessThan'), true);
                 fixture.detectChanges();
@@ -181,7 +182,7 @@ describe('IgxGrid - Summaries #grid', () => {
             it('should change custom summaries at runtime', () => {
                 const summaryRow = GridSummaryFunctions.getRootSummaryRow(fixture);
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Sum', 'Avg'], ['10', '39,004', '3,900.4']);
-                GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest'], ['5/17/1990']);
+                GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest', 'Items InStock'], ['May 17, 1990', '1337']);
                 GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, grid.defaultSummaryHeight);
                 grid.getColumnByName('UnitsInStock').summaries = fixture.componentInstance.dealsSummaryMinMax;
                 fixture.detectChanges();
@@ -192,20 +193,20 @@ describe('IgxGrid - Summaries #grid', () => {
             it('should be able to access alldata from each summary', () => {
                 const summaryRow = GridSummaryFunctions.getRootSummaryRow(fixture);
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Sum', 'Avg'], ['10', '39,004', '3,900.4']);
-                GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest'], ['5/17/1990']);
+                GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest', 'Items InStock'], ['May 17, 1990', '1337']);
                 GridSummaryFunctions.verifyVisibleSummariesHeight(fixture, 3, grid.defaultSummaryHeight);
                 grid.getColumnByName('UnitsInStock').summaries = fixture.componentInstance.inStockSummary;
                 fixture.detectChanges();
 
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Min', 'Max', 'Sum', 'Avg', 'Items InStock'],
-                    ['10', '0', '20000', '39004', '3900.4', '6']);
-                GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest'], ['5/17/1990']);
+                    ['10', '0', '20,000', '39,004', '3,900.4', '6']);
+                GridSummaryFunctions.verifyColumnSummaries(summaryRow, 4, ['Earliest', 'Items InStock'], ['May 17, 1990', '1337']);
 
                 grid.getCellByColumn(4, 'InStock').update(true);
                 fixture.detectChanges();
 
                 GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3, ['Count', 'Min', 'Max', 'Sum', 'Avg', 'Items InStock'],
-                    ['10', '0', '20000', '39004', '3900.4', '7']);
+                    ['10', '0', '20,000', '39,004', '3,900.4', '7']);
 
                 grid.filter('UnitsInStock', 0, IgxNumberFilteringOperand.instance().condition('equals'));
                 fixture.detectChanges();
@@ -292,7 +293,7 @@ describe('IgxGrid - Summaries #grid', () => {
                 expect(grid.hasSummarizedColumns).toBe(false);
             });
 
-            it('should change summary operand through grid API ', () => {
+            it('should change summary operand through grid API', () => {
                 grid.enableSummaries([{ fieldName: 'UnitsInStock', customSummary: fix.componentInstance.dealsSummaryMinMax }]);
                 fix.detectChanges();
 
@@ -2442,11 +2443,6 @@ class DealsSummary extends IgxNumberSummaryOperand {
     public operate(summaries?: any[]): IgxSummaryResult[] {
         const result = super.operate(summaries).filter((obj) => {
             if (obj.key === 'average' || obj.key === 'sum' || obj.key === 'count') {
-                const summaryResult = obj.summaryResult;
-                // apply formatting to float numbers
-                if (Number(summaryResult) === summaryResult) {
-                    obj.summaryResult = summaryResult.toLocaleString('en-us', { maximumFractionDigits: 2 });
-                }
                 return obj;
             }
         });
@@ -2462,11 +2458,6 @@ class DealsSummaryMinMax extends IgxNumberSummaryOperand {
     public operate(summaries?: any[]): IgxSummaryResult[] {
         const result = super.operate(summaries).filter((obj) => {
             if (obj.key === 'min' || obj.key === 'max') {
-                const summaryResult = obj.summaryResult;
-                // apply formatting to float numbers
-                if (Number(summaryResult) === summaryResult) {
-                    obj.summaryResult = summaryResult.toLocaleString('en-us', { maximumFractionDigits: 2 });
-                }
                 return obj;
             }
         });
@@ -2482,11 +2473,14 @@ class EarliestSummary extends IgxDateSummaryOperand {
     public operate(summaries?: any[]): IgxSummaryResult[] {
         const result = super.operate(summaries).filter((obj) => {
             if (obj.key === 'earliest') {
-                const date = obj.summaryResult ? new Date(obj.summaryResult) : undefined;
-                obj.summaryResult = date ? new Intl.DateTimeFormat('en-US').format(date) : undefined;
                 return obj;
             }
         });
+        result.push({
+            key: 'test',
+            label: 'Items InStock',
+            summaryResult: 1337
+        });
         return result;
     }
 }
@@ -2541,14 +2535,15 @@ class AllDataAvgSummary extends IgxSummaryOperand {
 
 @Component({
     template: `
-        <igx-grid #grid1 [data]="data" [primaryKey]="'ProductID'" [allowFiltering]="true">
+        <igx-grid #grid1 [data]="data" [primaryKey]="'ProductID'" [locale]="locale" [allowFiltering]="true">
             <igx-column field="ProductID" header="Product ID">
             </igx-column>
             <igx-column field="ProductName" [hasSummary]="true">
             </igx-column>
             <igx-column field="InStock" [dataType]="'boolean'" [hasSummary]="true">
             </igx-column>
-            <igx-column field="UnitsInStock" [dataType]="'number'" [hasSummary]="true"  [summaries]="dealsSummary">
+            <igx-column field="UnitsInStock" [dataType]="'number'" [hasSummary]="true" [pipeArgs]="formatOptions"
+            [summaries]="dealsSummary">
             </igx-column>
             <igx-column field="OrderDate" width="200px" [dataType]="'date'" [sortable]="true" [hasSummary]="true"
             [summaries]="earliest">
@@ -2566,5 +2561,9 @@ export class CustomSummariesComponent {
     public earliest = EarliestSummary;
     public inStockSummary = InStockSummary;
     public allDataAvgSummary = AllDataAvgSummary;
+    public formatOptions: IColumnPipeArgs = {
+        digitsInfo: '1.0-2'
+    };
+    public locale = 'en-US';
 }
 

projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

@@ -178,6 +178,27 @@ describe('IgxGridState - input properties #grid', () => {
         expect(gridState).toBe(filteringState);
     });
 
+    it('setState should correctly restore grid filtering state from  with null date values', () => {
+        const fix = TestBed.createComponent(IgxGridStateComponent);
+        fix.detectChanges();
+        const grid  = fix.componentInstance.grid;
+        grid.getCellByColumn(0, 'OrderDate').value = null;
+        fix.detectChanges();
+        const state = fix.componentInstance.state;
+
+        const filteringState = '{"filtering":{"filteringOperands":[{"filteringOperands":[{"condition":{"name":"empty","isUnary":true,"iconName":"is-empty"},"fieldName":"OrderDate","ignoreCase":true,"searchVal":null}],"operator":1,"fieldName":"OrderDate"}],"operator":0,"type":0}}';
+        const initialState = '{"filtering":{"filteringOperands":[],"operator":0}}';
+
+        let gridState = state.getState(true, 'filtering');
+        expect(gridState).toBe(initialState);
+
+        state.setState(filteringState);
+        gridState = state.getState(false, 'filtering') as IGridState;
+        HelperFunctions.verifyFilteringExpressions(grid.filteringExpressionsTree, gridState);
+        gridState = state.getState(true, 'filtering');
+        expect(gridState).toBe(filteringState);
+    });
+
     it('setState should correctly restore grid filtering state from object', () => {
         const fix = TestBed.createComponent(IgxGridStateComponent);
         fix.detectChanges();

projects/igniteui-angular/src/lib/grids/state.directive.ts

@@ -549,7 +549,7 @@ export class IgxGridStateDirective {
                 if (Array.isArray(expr.searchVal)) {
                     expr.searchVal = new Set(expr.searchVal);
                 } else {
-                    expr.searchVal = (dataType === 'date') ? new Date(Date.parse(expr.searchVal)) : expr.searchVal;
+                    expr.searchVal = expr.searchVal && (dataType === 'date') ? new Date(Date.parse(expr.searchVal)) : expr.searchVal;
                 }
                 expr.condition = this.generateFilteringCondition(dataType, expr.condition.name);
                 expressionsTree.filteringOperands.push(expr);