Merge branch 'master' into simeonoff/css-var-refs

Author: simeonoff

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes for each version of this project will be documented in this
 
 ## 12.0.0
 
+### General
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Breaking Change** - The `locale` and `pipeArgs` parameters are removed from the `operate` method exposed by the `IgxNumberSummaryOperand`, `IgxDateSummaryOperand`, `IgxCurrencySummaryOperand` and `IgxPercentSummaryOperand`. They are now set in the `igx-grid-summary-cell` template. To change the locale and format setting of the `igx-grid-summary-cell` the user can use the new `summaryFormatter` property of the `IgxColumnComponent`.
+
 ### New Features
 - `IgxForOf`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Virtual containers now scroll smoothly when using the mouse wheel(s) to scroll them horizontally or vertically. This behavior more closely resembles the scrolling behavior of non-virtualized containers in most modern browsers.
@@ -16,11 +20,28 @@ All notable changes for each version of this project will be documented in this
                 </ng-template>
             </igx-grid>
         ```
+    -   A new `summaryFormatter` input property is exposed by the `IgxColumnComponent`, which is used to format the displayed summary values for the columns.
+        ```typescript
+            public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
+                const result = summary.summaryResult;
+                if(summaryOperand instanceof IgxDateSummaryOperand && summary.key !== 'count'
+                    && result !== null && result !== undefined) {
+                    const pipe = new DatePipe('en-US');
+                    return pipe.transform(result,'MMM YYYY');
+                }
+                return result;
+            }
+        ```
+        ```html
+            <igx-column field="OrderDate" header="Order Date" [sortable]="true" [disableHiding]="true" [dataType]="'date'" [hasSummary]="true"
+                [summaryFormatter]="dateSummaryFormat">
+            </igx-column>
+        ```
 ### Themes:
 - Breaking Changes:
     - `IgxButton` theme has been simplified. The number of theme params (`igx-button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). See the migration guide to update existing button themes. Updates performed with `ng update` will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params.
     - The `igx-typography` mixin is no longer implicitly included with `igx-core`. To use our typography styles users have to include the mixin explicitly:
-    
+
     ```html
     @include igx-core();
     /// Example with Indigo Design theme:
@@ -48,10 +69,10 @@ All notable changes for each version of this project will be documented in this
     - Added support for exporting grouped data.
 - `IgxTreeGrid`
     - Added `multipleCascade` row selection mode. In this mode, selecting a record results in the selection of all its children recursively. When only some children are selected, their parent's checkbox is in an indeterminate state.
- 
+
 
         ```html
-        <igx-tree-grid [rowSelection]="'multipleCascade'">           
+        <igx-tree-grid [rowSelection]="'multipleCascade'">
         </igx-tree-grid>
         ```
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -65,7 +86,7 @@ All notable changes for each version of this project will be documented in this
     - `Column Resizing` now does not exit edit mode.
 - `IgxInput` now supports `type="file"` and its styling upon all themes.
    _Note: validation of file type input is not yet supported._
-- `igxSplitter` now has the following additional outputs: 
+- `igxSplitter` now has the following additional outputs:
     - `resizeStart` - Emits when pane resizing starts.
     - `resizing`- Emits while panes are being resized.
     - `resizeEnd` - Emits when pane resizing ends.

projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss

@@ -346,3 +346,16 @@
         @content;
     }
 }
+
+/// Truncates text at a specific number of lines
+/// @param {number|string} $lines - The number of lines to show
+/// @param {Boolean} $inline - Sets whether an element displays inline-box or box
+/// @param {Boolean} $vertical - Sets whether an element lays out its contents horizontally or vertically
+/// @example scss Truncates text after the fourth line
+///    @include line-clamp(4, true, true);
+@mixin line-clamp($lines, $inline, $vertical) {
+    display: if($inline, -webkit-inline-box, -webkit-box);
+    -webkit-line-clamp: if($lines, $lines, initial);
+    -webkit-box-orient: if($vertical, vertical, initial);
+    overflow: hidden;
+}

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -265,6 +265,7 @@
     %igx-drop-down__list-scroll {
         overflow-y: auto;
         overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
         position: relative;
 
         igx-input-group {

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

@@ -750,6 +750,10 @@
                 color: inherit;
             }
         }
+
+        > [aria-activedescendant] {
+            outline-style: none;
+        }
     }
 
     %grid-thead {
@@ -1771,6 +1775,7 @@
         display: flex;
         overflow: hidden;
         background: --var($theme, 'root-summaries-background');
+        outline-style: none;
 
         %igx-grid-summary__result {
             color: --var($theme, 'root-summaries-text-color');

projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss

@@ -90,7 +90,7 @@
 @mixin igx-navbar($theme) {
     @include igx-css-vars($theme);
 
-    $navbar-padding: 0 rem(16px);
+    $navbar-padding: rem(16px);
     $navbar-title-fz: rem(18px, 16px);
     $navbar-title-lh: rem(18px, 16px);
     $navbar-title-margin: 0;
@@ -103,12 +103,14 @@
         align-items: center;
         justify-content: space-between;
         width: 100%;
-        height: 56px;
+        min-height: 56px;
+        max-height: 128px;
         padding: $navbar-padding;
         background: --var($theme, 'background');
         color: --var($theme, 'text-color');
         box-shadow: --var($theme, 'shadow');
         z-index: 4;
+        overflow: hidden;
     }
 
     %igx-navbar-part {
@@ -117,6 +119,7 @@
     }
 
     %igx-navbar-title {
+        @include line-clamp(4, true, true);
         margin: $navbar-title-margin;
         flex-grow: 1;
         user-select: text;

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

@@ -73,5 +73,12 @@
             background: --var($theme, 'thumb-background');
         }
     }
+
+    @media (hover: none) {
+        %scrollbar-display ::-webkit-scrollbar {
+            width: auto;
+            height: auto;
+        }
+    }
 }
 

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

@@ -36,7 +36,7 @@ import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-
 import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';
 import { getNodeSizeViaRange } from '../../core/utils';
 import { IgxSummaryOperand, IgxNumberSummaryOperand, IgxDateSummaryOperand,
-    IgxCurrencySummaryOperand, IgxPercentSummaryOperand } from '../summaries/grid-summary';
+    IgxCurrencySummaryOperand, IgxPercentSummaryOperand, IgxSummaryResult } from '../summaries/grid-summary';
 import {
     IgxCellTemplateDirective,
     IgxCellHeaderTemplateDirective,
@@ -575,6 +575,37 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     @WatchColumnChanges()
     @Input()
     public formatter: (value: any) => any;
+
+    /**
+     * The summaryFormatter is used to format the display of the column summaries.
+     *
+     * In this example, we check to see if the column name is OrderDate, and then provide a method as the summaryFormatter
+     * to change the locale for the dates to 'fr-FR'. The summaries with the count key are skipped so they are displayed as numbers.
+     *
+     * ```typescript
+     * onColumnInit(column: IgxColumnComponent) {
+     *   if (column.field == "OrderDate") {
+     *     column.summaryFormatter = this.summaryFormat;
+     *   }
+     * }
+     *
+     * summaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand): string {
+     *   const result = summary.summaryResult;
+     *   if(summaryResult.key !== 'count' && result !== null && result !== undefined) {
+     *      const pipe = new DatePipe('fr-FR');
+     *      return pipe.transform(result,'mediumDate');
+     *   }
+     *   return result;
+     * }
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @notifyChanges()
+    @WatchColumnChanges()
+    @Input()
+    public summaryFormatter: (summary: IgxSummaryResult, summaryOperand: IgxSummaryOperand) => any;
+
     /**
      * Sets/gets whether the column filtering should be case sensitive.
      * Default value is `true`.

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

@@ -17,6 +17,7 @@ import {
     IgxStringReplacePipe,
     IgxGridTransactionStatePipe,
     IgxColumnFormatterPipe,
+    IgxSummaryFormatterPipe,
     IgxGridAddRowPipe
 } from './pipes';
 
@@ -38,7 +39,8 @@ import {
         IgxStringReplacePipe,
         IgxGridTransactionStatePipe,
         IgxGridAddRowPipe,
-        IgxColumnFormatterPipe
+        IgxColumnFormatterPipe,
+        IgxSummaryFormatterPipe
     ],
     exports: [
         IgxGridFilterConditionPipe,
@@ -57,7 +59,8 @@ import {
         IgxStringReplacePipe,
         IgxGridTransactionStatePipe,
         IgxGridAddRowPipe,
-        IgxColumnFormatterPipe
+        IgxColumnFormatterPipe,
+        IgxSummaryFormatterPipe
     ],
     imports: [
         CommonModule

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

@@ -7,6 +7,7 @@ import { GridType } from './grid.interface';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnDisplayOrder } from './enums';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
+import { IgxSummaryOperand, IgxSummaryResult } from '../grid/public_api';
 
 /**
  * @hidden
@@ -308,6 +309,15 @@ export class IgxColumnFormatterPipe implements PipeTransform {
     }
 }
 
+@Pipe({ name: 'summaryFormatter' })
+export class IgxSummaryFormatterPipe implements PipeTransform {
+
+    transform(summaryResult: IgxSummaryResult, summaryOperand: IgxSummaryOperand,
+        summaryFormatter: (s: IgxSummaryResult, o: IgxSummaryOperand) => any) {
+        return summaryFormatter(summaryResult, summaryOperand);
+    }
+}
+
 @Pipe({
     name: 'gridAddRow',
     pure: true

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

@@ -2259,11 +2259,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
 
     public get activeDescendant() {
         const activeElem = this.navigation.activeNode;
-        if (activeElem) {
-            return !this.navigation.isDataRow(activeElem.row, true) ? this.id + '_' + activeElem.row :
-                this.id + '_' + activeElem.row + '_' + activeElem.column;
+
+        if (!activeElem || !Object.keys(activeElem).length) {
+            return this.id;
         }
-        return null;
+
+        return activeElem.row < 0 ?
+        `${this.id}_${activeElem.row}_${activeElem.mchCache.level}_${activeElem.column}` :
+        `${this.id}_${activeElem.row}_${activeElem.column}`;
     }
 
     /**