Merge branch '10.1.x' into ibarakov/fix-8247-10.1.x

# Conflicts:
#	projects/igniteui-angular/src/lib/grids/cell.component.html
#	projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

Author: onlyexeption

CHANGELOG.md

@@ -7,6 +7,21 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `IgxDatePicker`
     - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - A new `locale` and `pipeArgs` parameters are introduced in the `operate` method exposed by the `IgxNumberSummaryOperand` and `IgxDateSummaryOperand`, which exposes the grid locale. Use the `locale` parameter to get localized summary data (as per the grid locale. If not passed, `locale` defaults to `'en-US'`). Use the `pipeArgs` parameter only if you want to customize the format of the date and numeric values that will be returned.
+    ```typescript
+    class MySummary extends IgxDateSummaryOperand {
+        const pipeArgs: IColumnPipeArgs = {
+            format: 'longDate',
+            timezone: 'UTC'
+        }
+        operate(columnData: any[], allData = [], fieldName, locale: string): IgxSummaryResult[] {
+            const result = super.operate(columnData, allData, fieldName, locale, pipeArgs);
+            return result;
+        }
+    }
+    ```  
+    - A new `pipeArgs` input property is exposed by the `IgxColumnComponent`, which is used to pass arguments to the Angular `DatePipe` and `DecimalPipe`, to format the display for date and numeric columns.
 
 ## 10.1.0
 

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss

@@ -604,7 +604,7 @@ $_bootstrap-grid: extend(
 /// @prop {Color} header-text-color [igx-color: 'primary'] - The table header text color.
 /// @prop {Map} header-selected-background [igx-color: ('primary', 50)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [igx-color: 'primary'] - The table header text color when selected (ex. column selection).
-/// @prop {Map} header-border-color [igx-color: ('primary', 100)] - The color used for header borders.
+/// @prop {Map} header-border-color [igx-color: ('primary', 500), rgba: .24] - The color used for header borders.
 ///
 /// @prop {Map} filtering-header-text-color [igx-color: ('primary', 900)] - The text color color of the filtered column header.
 /// @prop {Map} filtering-background-or [igx-color: 'warn'] - The background color of advanced filtering "OR" condition.
@@ -673,7 +673,8 @@ $_indigo-grid: extend(
         ),
 
         header-border-color: (
-            igx-color: ('primary', 100)
+            igx-color: ('primary', 500),
+            rgba: .24
         ),
 
         filtering-header-text-color: (

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -270,7 +270,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
 
     public get displayContainer(): HTMLElement | undefined {
-        return this.dc.instance._viewContainer.element.nativeElement;
+        return this.dc?.instance?._viewContainer?.element?.nativeElement;
     }
 
     public get virtualHelper() {
@@ -372,11 +372,11 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     protected removeScrollEventListeners() {
         if (this.igxForScrollOrientation === 'horizontal') {
             this._zone.runOutsideAngular(() =>
-                this.scrollComponent.nativeElement.removeEventListener('scroll', this.func)
+                this.scrollComponent?.nativeElement?.removeEventListener('scroll', this.func)
             );
         } else {
             this._zone.runOutsideAngular(() =>
-                this.scrollComponent.nativeElement.removeEventListener('scroll', this.verticalScrollHandler)
+                this.scrollComponent?.nativeElement?.removeEventListener('scroll', this.verticalScrollHandler)
             );
         }
     }
@@ -717,7 +717,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
      * ```
      */
     public getScroll() {
-        return this.scrollComponent.nativeElement;
+        return this.scrollComponent?.nativeElement;
     }
     /**
      * Returns the size of the element at the specified index.

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -19,9 +19,9 @@
             formatter
                 ? (value | columnFormatter: formatter)
                 : column.dataType === 'number'
-                ? (value | igxdecimal: grid.locale)
+                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === 'date'
-                ? (value | igxdate: grid.locale)
+                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
                 : value
         "
         [row]="rowData"
@@ -32,9 +32,9 @@
             formatter
                 ? (value | columnFormatter: formatter)
                 : column.dataType === "number"
-                ? (value | igxdecimal: grid.locale)
+                ? (value | number:column.pipeArgs.digitsInfo:grid.locale)
                 : column.dataType === "date"
-                ? (value | igxdate: grid.locale)
+                ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
                 : value
         }}</div>
     <igx-icon

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -42,7 +42,10 @@ import {
     IgxCollapsibleIndicatorTemplateDirective,
     IgxFilterCellTemplateDirective
 } from './templates.directive';
-import { MRLResizeColumnInfo, MRLColumnSizeInfo } from './interfaces';
+import { MRLResizeColumnInfo, MRLColumnSizeInfo, IColumnPipeArgs } from './interfaces';
+
+const DEFAULT_DATE_FORMAT = 'mediumDate';
+const DEFAULT_DIGITS_INFO = '1.0-3';
 
 /**
  * **Ignite UI for Angular Column** -
@@ -1180,6 +1183,37 @@ export class IgxColumnComponent implements AfterContentInit {
         return this._visibleWhenCollapsed;
     }
 
+    private _pipeArgs: IColumnPipeArgs = { format: DEFAULT_DATE_FORMAT, digitsInfo: DEFAULT_DIGITS_INFO };
+    /**
+     * Provide parameters for DatePipe and DecimalPipe to customize the display format for date and numeric columns.
+     * Accepts an `IColumnPipeArgs` object with any of the `format`, `timezone` and `digitsInfo` properties.
+     * For more details see https://angular.io/api/common/DatePipe and https://angular.io/api/common/DecimalPipe
+     * @example
+     * ```typescript
+     * const pipeArgs: IColumnPipeArgs = {
+     *      format: 'longDate',
+     *      timezone: 'UTC',
+     *      digitsInfo: '1.1-2'
+     * }
+     * ```
+     * ```html
+     * <igx-column dataType="date" [pipeArgs]="pipeArgs"></igx-column>
+     * <igx-column dataType="number" [pipeArgs]="pipeArgs"></igx-column>
+     * ```
+     * @memberof IgxColumnComponent
+     */
+    @Input()
+    set pipeArgs(value: IColumnPipeArgs) {
+        this._pipeArgs = Object.assign(this._pipeArgs, value);
+        this.grid.summaryService.clearSummaryCache();
+        (this.grid as any)._pipeTrigger++;
+        this.grid.notifyChanges();
+    }
+    get pipeArgs(): IColumnPipeArgs {
+        return this._pipeArgs;
+    }
+
+
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/grids/columns/interfaces.ts

@@ -1,6 +1,9 @@
 import { IgxColumnComponent } from './column.component';
 
-
+/**
+ * @hidden
+ * @internal
+ */
 export interface MRLColumnSizeInfo {
     ref: IgxColumnComponent;
     width: number;
@@ -9,7 +12,26 @@ export interface MRLColumnSizeInfo {
     widthSetByUser: boolean;
 }
 
+/**
+ * @hidden
+ * @internal
+ */
 export interface MRLResizeColumnInfo {
     target: IgxColumnComponent;
     spanUsed: number;
 }
+
+export interface IColumnPipeArgs {
+    /** The date/time components that a date column will display, using predefined options or a custom format string. */
+    format?: string;
+    /** A timezone offset (such as '+0430'), or a standard UTC/GMT or continental US timezone abbreviation. */
+    timezone?: string;
+    /**
+     * Decimal representation options, specified by a string in the following format:
+     * `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
+     * `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
+     * `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
+     * `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
+     */
+    digitsInfo?: string;
+}

projects/igniteui-angular/src/lib/grids/common/column.interface.ts

@@ -2,6 +2,7 @@ import { TemplateRef } from '@angular/core';
 import { DataType } from '../../data-operations/data-util';
 import { ISortingStrategy } from '../../data-operations/sorting-strategy';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
+import { IColumnPipeArgs } from '../columns/interfaces';
 
 /**
  * @hidden
@@ -43,6 +44,6 @@ export interface ColumnType {
     topLevelParent?: ColumnType;
     parent?: ColumnType;
     hasLastPinnedChildColumn: boolean;
-
+    pipeArgs: IColumnPipeArgs;
     getGridTemplate(isRow: boolean, isIE: boolean): string;
 }

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

@@ -9,8 +9,6 @@ import {
     IgxGridCellStyleClassesPipe,
     IgxGridPaginatorOptionsPipe,
     IgxHasVisibleColumnsPipe,
-    IgxDatePipeComponent,
-    IgxDecimalPipeComponent,
     IgxGridRowPinningPipe,
     IgxColumnActionEnabledPipe,
     IgxFilterActionColumnsPipe,
@@ -23,8 +21,6 @@ import {
 
 @NgModule({
     declarations: [
-        IgxDatePipeComponent,
-        IgxDecimalPipeComponent,
         IgxGridFilterConditionPipe,
         IgxGridTransactionPipe,
         IgxGridNotGroupedPipe,
@@ -43,8 +39,6 @@ import {
         IgxColumnFormatterPipe
     ],
     exports: [
-        IgxDatePipeComponent,
-        IgxDecimalPipeComponent,
         IgxGridFilterConditionPipe,
         IgxGridTransactionPipe,
         IgxGridNotGroupedPipe,

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

@@ -4,6 +4,9 @@ import { EventEmitter } from '@angular/core';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { IGridResourceStrings } from '../../core/i18n/grid-resources';
 import { ISortingExpression } from '../../data-operations/sorting-expression.interface';
+import { IGroupingExpression } from '../../data-operations/grouping-expression.interface';
+import { TransactionService, Transaction, State } from '../../services/public_api';
+import { ITreeGridRecord } from '../tree-grid/public_api';
 
 export interface IGridDataBindable {
     data: any[];
@@ -46,6 +49,8 @@ export interface GridType extends IGridDataBindable {
     summariesRowList: any;
     headerContainer: any;
     dataView: any[];
+    transactions: TransactionService<Transaction, State>;
+    defaultSummaryHeight: number;
 
     rowInEditMode: any;
     rowEditTabs: any;
@@ -56,6 +61,8 @@ export interface GridType extends IGridDataBindable {
 
     sortingExpressions: ISortingExpression[];
     sortingExpressionsChange: EventEmitter<ISortingExpression[]>;
+    filteringExpressionsTree: IFilteringExpressionsTree;
+    filteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>;
     advancedFilteringExpressionsTree: IFilteringExpressionsTree;
     advancedFilteringExpressionsTreeChange: EventEmitter<IFilteringExpressionsTree>;
 
@@ -66,6 +73,22 @@ export interface GridType extends IGridDataBindable {
     isColumnGrouped(fieldName: string): boolean;
     isDetailRecord(rec: any): boolean;
     isGroupByRecord(rec: any): boolean;
+    notifyChanges(repaint: boolean): void;
+}
+
+/**
+ * An interface describing a Flat Grid type
+ */
+export interface FlatGridType extends GridType {
+    groupingExpressions: IGroupingExpression[];
+    groupingExpressionsChange: EventEmitter<IGroupingExpression[]>;
+}
+
+/**
+ * An interface describing a Tree Grid type
+ */
+export interface TreeGridType extends GridType {
+    records: Map<any, ITreeGridRecord>;
 }
 
 export interface GridSVGIcon {

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -1,10 +1,9 @@
-import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
+import { Pipe, PipeTransform, Inject } from '@angular/core';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { DataUtil } from '../../data-operations/data-util';
 import { cloneArray, resolveNestedPath } from '../../core/utils';
 import { GridType } from './grid.interface';
-import { DatePipe, DecimalPipe } from '@angular/common';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnDisplayOrder } from './enums';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
@@ -163,60 +162,6 @@ export class IgxHasVisibleColumnsPipe implements PipeTransform {
 
 }
 
-
-/**
- * @hidden
- * @internal
- */
-@Pipe({
-    name: 'igxdate'
-})
-export class IgxDatePipeComponent extends DatePipe implements PipeTransform {
-
-    private readonly DEFAULT_DATE_FORMAT = 'mediumDate';
-
-    constructor(@Inject(LOCALE_ID) locale: string) {
-        // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
-        super(locale);
-    }
-    transform(value: any, locale: string): string {
-        if (value && value instanceof Date) {
-            if (locale) {
-                return super.transform(value, this.DEFAULT_DATE_FORMAT, undefined, locale);
-            } else {
-                return super.transform(value);
-            }
-        } else {
-            return value;
-        }
-    }
-}
-
-/**
- * @hidden
- * @internal
- */
-@Pipe({
-    name: 'igxdecimal'
-})
-export class IgxDecimalPipeComponent extends DecimalPipe implements PipeTransform {
-    constructor(@Inject(LOCALE_ID) locale: string) {
-        // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
-        super(locale);
-    }
-    transform(value: any, locale: string): string {
-        if (value && typeof value === 'number') {
-            if (locale) {
-                return super.transform(value, undefined, locale);
-            } else {
-                return super.transform(value);
-            }
-        } else {
-            return value;
-        }
-    }
-}
-
 /**
  * @hidden
  */