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

Author: viktorkombov

CHANGELOG.md

@@ -7,6 +7,8 @@ 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.
+- `IgxCombo`
+    - Added `groupsSortingDirection` input, which allows you to set groups sorting order.
 
 ### General
 

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:groupsSortingDirection;
             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

@@ -2172,6 +2172,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.groupsSortingDirection = 'ascending';
+            combo.toggle();
+            fixture.detectChanges();
+            expect(combo.dropdown.headers[0].element.nativeElement.innerText).toEqual('East North Central');
+
+            combo.groupsSortingDirection = 'descending';
+            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

@@ -16,7 +16,9 @@ import {
 import { FormsModule, ReactiveFormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl } from '@angular/forms';
 import { IgxCheckboxModule } from '../checkbox/checkbox.component';
 import { IgxSelectionAPIService } from '../core/selection';
-import { cloneArray, IBaseEventArgs, IBaseCancelableBrowserEventArgs, IBaseCancelableEventArgs, CancelableEventArgs } from '../core/utils';
+import {
+    cloneArray, IBaseEventArgs, IBaseCancelableBrowserEventArgs, IBaseCancelableEventArgs, CancelableEventArgs, mkenum
+} from '../core/utils';
 import { IgxStringFilteringOperand, IgxBooleanFilteringOperand } from '../data-operations/filtering-condition';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
 import { IgxForOfModule, IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
@@ -67,6 +69,16 @@ const ItemHeights = {
  */
 const itemsInContainer = 10;
 
+/**
+ * @hidden
+ */
+ export const GroupsSortingDirection = mkenum({
+    ascending: 'ascending',
+    descending: 'descending'
+});
+
+export type GroupsSortingDirection = (typeof GroupsSortingDirection)[keyof typeof GroupsSortingDirection];
+
 export enum IgxComboState {
     /**
      * Combo with initial state.
@@ -774,6 +786,20 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     @Input()
     public filterable = true;
 
+    /**
+     * An @Input property that sets groups sorting order. The default is `ascending`.
+     * ```html
+     * <igx-combo [groupsSortingDirection]="'ascending'">
+     * ```
+     */
+    @Input()
+    public get groupsSortingDirection() {
+        return this._groupsSortingDirection;
+    }
+    public set groupsSortingDirection(val: GroupsSortingDirection) {
+        this._groupsSortingDirection = val;
+    }
+
     /**
      * An @Input property that set aria-labelledby attribute
      * ```html
@@ -906,6 +932,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     private _overlaySettings: OverlaySettings;
     private _value = '';
     private _valid = IgxComboState.INITIAL;
+    private _groupsSortingDirection: GroupsSortingDirection = GroupsSortingDirection.ascending;
 
     constructor(
         protected elementRef: ElementRef,

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

@@ -4,7 +4,7 @@ import { DataUtil } from '../data-operations/data-util';
 import { SortingDirection } from '../data-operations/sorting-expression.interface';
 import { IGX_COMBO_COMPONENT, IgxComboBase } from './combo.common';
 import { DefaultSortingStrategy } from '../data-operations/sorting-strategy';
-import { IComboFilteringOptions } from './combo.component';
+import { IComboFilteringOptions, GroupsSortingDirection } from './combo.component';
 
 
 /**
@@ -44,14 +44,15 @@ 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: GroupsSortingDirection) {
         this.combo.filteredData = collection;
         if ((!groupKey && groupKey !== 0) || !collection.length) {
             return collection;
         }
+        const dir: SortingDirection = sortingDirection === 'ascending' ? SortingDirection.Asc : SortingDirection.Desc;
         const sorted = DataUtil.sort(cloneArray(collection), [{
             fieldName: groupKey,
-            dir: SortingDirection.Asc,
+            dir,
             ignoreCase: true,
             strategy: DefaultSortingStrategy.instance()
         }]);