Merge branch 'master' into izhostov/issue-10233

Author: gedinakova

CHANGELOG.md

@@ -48,6 +48,8 @@ All notable changes for each version of this project will be documented in this
     - 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.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Added new directives for re-templating header sorting indicators - `IgxSortHeaderIconDirective`, `IgxSortAscendingHeaderIconDirective` and `IgxSortDescendingHeaderIconDirective`.
 - `IgxDialog`
     - Added `focusTrap` input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to `true`.
 

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

@@ -11,7 +11,6 @@ import { IgxSelectionAPIService } from '../core/selection';
 import { CancelableBrowserEventArgs, cloneArray, IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { SortingDirection } from '../data-operations/sorting-expression.interface';
 import { IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
-import { ISelectionEventArgs } from '../drop-down/public_api';
 import { IgxIconService } from '../icon/public_api';
 import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/inputGroupType';
 import { IgxInputDirective, IgxInputGroupComponent, IgxInputState } from '../input-group/public_api';
@@ -23,8 +22,7 @@ import {
     IgxComboFooterDirective, IgxComboHeaderDirective, IgxComboHeaderItemDirective, IgxComboItemDirective, IgxComboToggleIconDirective
 } from './combo.directives';
 import {
-    IComboFilteringOptions, IComboItemAdditionEvent, IComboSearchInputEventArgs,
-    IComboSelectionChangingEventArgs
+    IComboFilteringOptions, IComboItemAdditionEvent, IComboSearchInputEventArgs
 } from './public_api';
 
 export const IGX_COMBO_COMPONENT = new InjectionToken<IgxComboBase>('IgxComboComponentToken');
@@ -100,6 +98,22 @@ export enum IgxComboState {
 @Directive()
 export abstract class IgxComboBaseDirective extends DisplayDensityBase implements IgxComboBase, OnInit, DoCheck,
     AfterViewInit, OnDestroy, ControlValueAccessor {
+    /**
+     * Defines whether the caseSensitive icon should be shown in the search input
+     *
+     * ```typescript
+     * // get
+     * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
+     * ```
+     *
+     * ```html
+     * <!--set-->
+     * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
+     * ```
+     */
+    @Input()
+    public showSearchCaseIcon = false;
+
     /**
      * Set custom overlay settings that control how the combo's list of items is displayed.
      * Set:
@@ -414,17 +428,6 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         this._type = val;
     }
 
-    /**
-     * Emitted when item selection is changing, before the selection completes
-     *
-     * ```html
-     * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
-     * ```
-     */
-    // TODO: any for old/new selection?
-    @Output()
-    public selectionChanging = new EventEmitter<IComboSelectionChangingEventArgs | ISelectionEventArgs>();
-
     /**
      * Emitted before the dropdown is opened
      *
@@ -865,6 +868,8 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
 
     public abstract dropdown: IgxComboDropDownComponent;
 
+    public abstract selectionChanging: EventEmitter<any>;
+
     constructor(
         protected elementRef: ElementRef,
         protected cdr: ChangeDetectorRef,
@@ -1125,6 +1130,11 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         }
     }
 
+    /** @hidden @internal */
+    public toggleCaseSensitive() {
+        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
+    }
+
     protected onStatusChanged = () => {
         if ((this.ngControl.control.touched || this.ngControl.control.dirty) &&
             (this.ngControl.control.validator || this.ngControl.control.asyncValidator)) {

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

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import {
-    AfterViewInit, ChangeDetectorRef, Component, ElementRef, NgModule, OnInit, OnDestroy, Optional, Inject, Injector, ViewChild, Input
+    AfterViewInit, ChangeDetectorRef, Component, ElementRef, NgModule, OnInit, OnDestroy,
+    Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter
 } from '@angular/core';
 import {
     IgxComboItemDirective,
@@ -18,7 +19,7 @@ import { IgxSelectionAPIService } from '../core/selection';
 import { IBaseEventArgs, IBaseCancelableEventArgs, CancelableEventArgs } from '../core/utils';
 import { IgxStringFilteringOperand, IgxBooleanFilteringOperand } from '../data-operations/filtering-condition';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
-import { IgxForOfModule, IForOfState } from '../directives/for-of/for_of.directive';
+import { IgxForOfModule } from '../directives/for-of/for_of.directive';
 import { IgxIconModule, IgxIconService } from '../icon/public_api';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxToggleModule } from '../directives/toggle/toggle.directive';
@@ -114,22 +115,6 @@ const diffInSets = (set1: Set<any>, set2: Set<any>): any[] => {
 })
 export class IgxComboComponent extends IgxComboBaseDirective implements AfterViewInit, ControlValueAccessor, OnInit,
     OnDestroy, EditorProvider {
-    /**
-     * Defines whether the caseSensitive icon should be shown in the search input
-     *
-     * ```typescript
-     * // get
-     * let myComboShowSearchCaseIcon = this.combo.showSearchCaseIcon;
-     * ```
-     *
-     * ```html
-     * <!--set-->
-     * <igx-combo [showSearchCaseIcon]='true'></igx-combo>
-     * ```
-     */
-    @Input()
-    public showSearchCaseIcon = false;
-
     /**
      * An @Input property that controls whether the combo's search box
      * should be focused after the `opened` event is called
@@ -163,6 +148,16 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
     @Input()
     public searchPlaceholder = 'Enter a Search Term';
 
+    /**
+     * Emitted when item selection is changing, before the selection completes
+     *
+     * ```html
+     * <igx-combo (selectionChanging)='handleSelection()'></igx-combo>
+     * ```
+     */
+    @Output()
+    public selectionChanging = new EventEmitter<IComboSelectionChangingEventArgs>();
+
     /** @hidden @internal */
     @ViewChild(IgxComboDropDownComponent, { static: true })
     public dropdown: IgxComboDropDownComponent;
@@ -369,13 +364,6 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
         }
     }
 
-    /**
-     * @hidden @internal
-     */
-    public toggleCaseSensitive() {
-        this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };
-    }
-
     /** @hidden @internal */
     public handleOpened() {
         this.triggerCheck();

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1603,11 +1603,14 @@
         }
 
         .sort-icon {
-            width: rem(15px);
-            height: rem(15px);
-            min-width: rem(15px); /* yeah IE, it really needs to be 15px wide... */
-            font-size: rem(15px);
             position: relative;
+            display: flex;
+
+            igx-icon {
+                width: rem(15px);
+                height: rem(15px);
+                font-size: rem(15px);
+            }
 
             &::after {
                 content: attr(data-sortIndex);

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -93,8 +93,9 @@ import { CharSeparatedValueData } from '../services/csv/char-separated-value-dat
 import { IgxColumnResizingService } from './resizing/resizing.service';
 import { IFilteringStrategy } from '../data-operations/filtering-strategy';
 import {
-    IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective,
-    IgxHeaderExpandIndicatorDirective, IgxHeaderCollapseIndicatorDirective, IgxExcelStyleHeaderIconDirective
+    IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandIndicatorDirective,
+    IgxHeaderCollapseIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective,
+    IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective
 } from './grid/grid.directives';
 import {
     GridKeydownTargetType,
@@ -765,8 +766,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" [height]="'305px'" [autoGenerate]="true"></igx-grid>
      * ```
      */
-     @Output()
-     public rowAdd = new EventEmitter<IGridEditEventArgs>();
+    @Output()
+    public rowAdd = new EventEmitter<IGridEditEventArgs>();
 
     /**
      * Emitted after column is resized.
@@ -1252,6 +1253,24 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     @ContentChild(IgxExcelStyleHeaderIconDirective, { read: TemplateRef })
     public excelStyleHeaderIconTemplate: TemplateRef<any> = null;
 
+    /**
+     * The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in asc order.
+     */
+    @ContentChild(IgxSortAscendingHeaderIconDirective, { read: TemplateRef })
+    public sortAscendingHeaderIconTemplate: TemplateRef<any> = null;
+
+    /**
+     * The custom template, if any, that should be used when rendering a header sorting indicator when columns are sorted in desc order.
+     */
+    @ContentChild(IgxSortDescendingHeaderIconDirective, { read: TemplateRef })
+    public sortDescendingHeaderIconTemplate: TemplateRef<any> = null;
+
+    /**
+     * The custom template, if any, that should be used when rendering a header sorting indicator when columns are not sorted.
+     */
+    @ContentChild(IgxSortHeaderIconDirective, { read: TemplateRef })
+    public sortHeaderIconTemplate: TemplateRef<any> = null;
+
     /**
      * @hidden
      * @internal
@@ -3437,26 +3456,26 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public setUpPaginator() {
         if (this.paginator) {
             this.paginator.pageChange.pipe(takeWhile(() => !!this.paginator), filter(() => !this._init))
-            .subscribe((page: number) => {
-                this.pageChange.emit(page);
-            });
+                .subscribe((page: number) => {
+                    this.pageChange.emit(page);
+                });
             this.paginator.pagingDone.pipe(takeWhile(() => !!this.paginator), filter(() => !this._init))
-            .subscribe((args: IPageEventArgs) => {
-                this.selectionService.clear(true);
-                this.pagingDone.emit({ previous: args.previous, current: args.current });
-                this.crudService.endEdit(false);
-                this.pipeTrigger++;
-                this.navigateTo(0);
-                this.notifyChanges();
-            });
+                .subscribe((args: IPageEventArgs) => {
+                    this.selectionService.clear(true);
+                    this.pagingDone.emit({ previous: args.previous, current: args.current });
+                    this.crudService.endEdit(false);
+                    this.pipeTrigger++;
+                    this.navigateTo(0);
+                    this.notifyChanges();
+                });
             this.paginator.perPageChange.pipe(takeWhile(() => !!this.paginator), filter(() => !this._init))
-            .subscribe((perPage: number) => {
-                this.selectionService.clear(true);
-                this.perPageChange.emit(perPage);
-                this.paginator.page = 0;
-                this.crudService.endEdit(false);
-                this.notifyChanges();
-            });
+                .subscribe((perPage: number) => {
+                    this.selectionService.clear(true);
+                    this.perPageChange.emit(perPage);
+                    this.paginator.page = 0;
+                    this.crudService.endEdit(false);
+                    this.notifyChanges();
+                });
         } else {
             this.markForCheck();
         }
@@ -3927,7 +3946,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      */
     public get columnsCollection(): IgxColumnComponent[] {
-        return this._rendered ?  this._columns : [];
+        return this._rendered ? this._columns : [];
     }
 
     /**
@@ -5479,7 +5498,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         const selectedColumns = this.gridAPI.grid.selectedColumns();
         const columnData = this.getSelectedColumnsData(this.clipboardOptions.copyFormatters, this.clipboardOptions.copyHeaders);
         let selectedData;
-        if (event.type === 'copy'){
+        if (event.type === 'copy') {
             selectedData = this.getSelectedData(this.clipboardOptions.copyFormatters, this.clipboardOptions.copyHeaders);
         };
 
@@ -5981,8 +6000,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
     protected subscribeToTransactions(): void {
         this.transactionChange$.next();
-        this.transactions.onStateUpdate.pipe(takeUntil(merge(this.destroy$,this.transactionChange$)))
-        .subscribe(this.transactionStatusUpdate.bind(this));
+        this.transactions.onStateUpdate.pipe(takeUntil(merge(this.destroy$, this.transactionChange$)))
+            .subscribe(this.transactionStatusUpdate.bind(this));
     }
 
     protected transactionStatusUpdate(event: StateUpdateEvent) {
@@ -6742,10 +6761,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         let selectionMap;
         if (this.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid' && selectionCollection.size > 0) {
             selectionMap = isRemote ? Array.from(selectionCollection) :
-            Array.from(selectionCollection).filter((tuple) => tuple[0] < source.length);
-        }else {
+                Array.from(selectionCollection).filter((tuple) => tuple[0] < source.length);
+        } else {
             selectionMap = isRemote ? Array.from(this.selectionService.selection) :
-            Array.from(this.selectionService.selection).filter((tuple) => tuple[0] < source.length);
+                Array.from(this.selectionService.selection).filter((tuple) => tuple[0] < source.length);
         }
 
         if (this.cellSelection === GridSelectionMode.single && activeEl) {

projects/igniteui-angular/src/lib/grids/grid-common.module.ts

@@ -29,6 +29,9 @@ import { IgxGridFilteringModule } from './filtering/base/filtering.module';
 import { IgxRowDirective } from './row.directive';
 import {
     IgxExcelStyleHeaderIconDirective,
+    IgxSortAscendingHeaderIconDirective,
+    IgxSortDescendingHeaderIconDirective,
+    IgxSortHeaderIconDirective,
     IgxGroupAreaDropDirective,
     IgxHeaderCollapseIndicatorDirective,
     IgxHeaderExpandIndicatorDirective,
@@ -58,6 +61,9 @@ import { IgxGroupByMetaPipe } from './grouping/group-by-area.directive';
         IgxHeaderExpandIndicatorDirective,
         IgxHeaderCollapseIndicatorDirective,
         IgxExcelStyleHeaderIconDirective,
+        IgxSortAscendingHeaderIconDirective,
+        IgxSortDescendingHeaderIconDirective,
+        IgxSortHeaderIconDirective,
         IgxGroupAreaDropDirective,
         IgxGroupByMetaPipe
     ],
@@ -93,6 +99,9 @@ import { IgxGroupByMetaPipe } from './grouping/group-by-area.directive';
         IgxHeaderExpandIndicatorDirective,
         IgxHeaderCollapseIndicatorDirective,
         IgxExcelStyleHeaderIconDirective,
+        IgxSortAscendingHeaderIconDirective,
+        IgxSortDescendingHeaderIconDirective,
+        IgxSortHeaderIconDirective,
         IgxGroupAreaDropDirective,
         IgxGroupByMetaPipe
     ],

projects/igniteui-angular/src/lib/grids/grid/grid.directives.ts

@@ -72,6 +72,33 @@ export class IgxHeaderCollapseIndicatorDirective {
 export class IgxExcelStyleHeaderIconDirective {
 }
 
+/**
+ * @hidden
+ */
+ @Directive({
+    selector: '[igxSortHeaderIcon]'
+})
+export class IgxSortHeaderIconDirective {
+}
+
+/**
+ * @hidden
+ */
+@Directive({
+    selector: '[igxSortAscendingHeaderIcon]'
+})
+export class IgxSortAscendingHeaderIconDirective {
+}
+
+/**
+ * @hidden
+ */
+@Directive({
+    selector: '[igxSortDescendingHeaderIcon]'
+})
+export class IgxSortDescendingHeaderIconDirective {
+}
+
 /**
  * @hidden
  */