feat(combo): expose input to set groups sorting order

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
 
@@ -3657,3 +3659,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()
         }]);