Merge branch 'master' into SlavUI-patch-1

CHANGELOG.md

@@ -8,6 +8,9 @@ All notable changes for each version of this project will be documented in this
     - Allows the developer to easily display a highly templateable message that requires minimal user interaction (1-2 actions) to be dismissed. Read up more information about the IgxBannerComponent in the official [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/banner.html) or the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/src/lib/banner/README.md)
 - `igxGrid`
     - Added a new `igxToolbarCustomContent` directive which can be used to mark an `ng-template` which provides a custom content for the IgxGrid's toolbar ([#2983](https://github.com/IgniteUI/igniteui-angular/issues/2983))
+    - Summary results are now calculated and displayed by default for each row group when 'Group By' feature is enabled.
+    - `clearSummaryCache()` and `recalculateSummaries()` methods are deprecated. The grid will clear the cache and recalculate the summaries automatically when needed.
+    - **Breaking change** `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of `IgxSummaryResult` with proper length.
 - `IgxIconModule`:
     - **Breaking change** `igxIconService` is now provided in root (providedIn: 'root') and `IgxIconModule.forRoot()` method is deprecated.
     - **Breaking change** `glyphName` property of the `igxIconComponent` is deprecated.
@@ -19,8 +22,8 @@ All notable changes for each version of this project will be documented in this
     - `focusedValuePipe` input property is provided that allows developers to additionally transform the value on focus;
 - `IgxTreeGrid`:
     - Batch editing - an injectable transaction provider accumulates pending changes, which are not directly applied to the grid's data source. Those can later be inspected, manipulated and submitted at once. Changes are collected for individual cells or rows, depending on editing mode, and accumulated per data row/record.
-    - You can now export the tree grid both to CSV and Excel.
-    - The hierarchy and the records' expanded states would be reflected in the exported Excel worksheet.
+    - You can now export the tree grid both to CSV and Excel. The hierarchy and the records' expanded states would be reflected in the exported Excel worksheet.
+    - Summaries feature is now supported in the tree grid. Summary results are calculated and displayed for the root level and each child level by default.
 
 ## 7.0.4
 ### Bug fixes

ROADMAP.md

@@ -15,7 +15,7 @@
 1. Hierarchical Grid [issue](https://github.com/IgniteUI/igniteui-angular/issues/827)   
 2. igxGrid rendering strategies (like record-based rendering) [issue](https://github.com/IgniteUI/igniteui-angular/issues/2384)  
 3. Auto-complete (inline editable)
-4. Advanced Filtering  
+4. Excel Style Filtering  
 5. Multi-cell Selection 
 
 

extras/docs/themes/sassdoc/scss/partials/_header.scss

@@ -15,10 +15,14 @@
     @include e(logo) {
         display: flex;
         align-items: center;
-        color: #fff;
         font-size: rem(18);
     }
 
+    @include e(logo-name) {
+        color: #fff;
+        text-decoration: none;
+    }
+
     @include e(logo-version) {
         font-size: rem(12);
         background: #666;

extras/docs/themes/sassdoc/views/partials/header.hbs

@@ -2,7 +2,7 @@
     {{#ifCond lang '==' 'jp'}}{{> infraHeadJA }}{{else}}{{> infraHead }}{{/ifCond}}
     <div class="header__secondary">
         <div class="header__logo">
-            <span class="header__logo-name">{{package.name}}</span>
+            <a class="header__logo-name" href="https://www.infragistics.com/products/ignite-ui-angular" class="title">{{package.name}}</a>
             <span class="header__logo-version">API ver. 7.0.x</span>
         </div>
 

extras/docs/themes/typedoc/src/partials/header.hbs

@@ -3,7 +3,7 @@
     <div class="tsd-header-content">
         <div class="tsd-header-group">
             <h1 class="tsd-header-logo">
-                <a href="{{relativeURL "index.html"}}" class="title">{{project.name}}</a>
+                <a href="https://www.infragistics.com/products/ignite-ui-angular" class="title">{{project.name}}</a>
                 <span class="version">API ver. <strong>7.0.x</strong></span>
             </h1>
             <div class="tsd-nav-toggle">

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

@@ -113,11 +113,14 @@
 /// @param {Map} $palette - The source palette map.
 /// @param {string} $color - The target color from the color palette.
 /// @param {number|variant} $variant - The target color shade from the color palette.
+/// @requires igx-color
+/// @requires text-contrast
+/// @requires hexrgba
 /// @returns {Color} [#fff] - Returns white if now palette, color and/or variant matches found.
 @function igx-contrast-color($palette, $color, $variant: 500) {
     $_color: igx-color($palette, $color, $variant);
     @if $_color {
-        @return text-contrast($_color);
+        @return text-contrast(hexrgba($_color));
     }
     @return #fff;
 }

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

@@ -150,13 +150,13 @@
     %igx-grid-toolbar {
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        justify-content: flex-end;
         grid-row: 1;
         font-size: $grid-toolbar-fs;
         padding: map-get($grid-toolbar-padding, 'cosy');
         border-bottom: 1px solid igx-color(map-get($theme, 'palette'), 'grays', 300);
         background: --var($theme, 'background-color');
-        min-height: map-get($grid-toolbar-height, 'comfortable');
+        height: map-get($grid-toolbar-height, 'comfortable');
 
         %igx-button--flat {
             background: --var($theme, 'button-background');
@@ -232,12 +232,12 @@
     }
 
     %igx-grid-toolbar--cosy {
-        min-height: map-get($grid-toolbar-height, 'cosy');
+        height: map-get($grid-toolbar-height, 'cosy');
         padding: map-get($grid-toolbar-padding, 'cosy');
     }
 
     %igx-grid-toolbar--compact {
-        min-height: map-get($grid-toolbar-height, 'compact');
+        height: map-get($grid-toolbar-height, 'compact');
         padding: map-get($grid-toolbar-padding, 'compact');
     }
 

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

@@ -176,6 +176,10 @@
         @extend %igx-grid__td--tree-cell !optional;
     }
 
+    @include e(td, $m: active) {
+        @extend %grid-cell--active !optional;
+    }
+
     @include e(td, $m: selected) {
         @extend %grid-cell--selected !optional;
     }

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

@@ -30,6 +30,7 @@
 /// @param {String} $pinned-border-width [null] - The border width of the pinned border.
 /// @param {String} $pinned-border-style [null] - The CSS border style of the pinned border.
 /// @param {Color} $pinned-border-color [null] - The color of the pinned border.
+/// @param {Color} $cell-active-border-color [null] - The border color for the currently active(focused) cell.
 /// @param {Color} $cell-selected-background [null] - The selected cell background color.
 /// @param {Color} $cell-selected-text-color [null] - The selected cell text color.
 /// @param {Color} $resize-line-color [null] - The table header resize line color.
@@ -104,6 +105,7 @@
     $pinned-border-style: null,
     $pinned-border-color: null,
 
+    $cell-active-border-color: null,
     $cell-selected-background: null,
     $cell-selected-text-color: null,
     $cell-editing-background: null,
@@ -333,6 +335,7 @@
         pinned-border-style: $pinned-border-style,
         pinned-border-color: $pinned-border-color,
 
+        cell-active-border-color: $cell-active-border-color,
         cell-selected-background: $cell-selected-background,
         cell-editing-background: $cell-editing-background,
         cell-selected-text-color: $cell-selected-text-color,
@@ -843,11 +846,14 @@
     }
 
     %grid-cell--fixed-width {
-        // position: relative;
         flex-grow: 0;
         outline-style: none;
     }
 
+    %grid-cell--active {
+        box-shadow: inset 0 0 0 1px --var($theme, 'cell-active-border-color');
+    }
+
     %grid-cell--selected {
         color: --var($theme, 'cell-selected-text-color');
         background-color: --var($theme, 'cell-selected-background');
@@ -879,7 +885,7 @@
 
     %igx-grid__td--editing {
         background-color: --var($theme, 'cell-editing-background') !important;
-        border: rem(2px) solid --var($theme, 'edit-mode-color');
+        box-shadow: inset 0 0 0 rem(2px) --var($theme, 'edit-mode-color');
 
         igx-input-group {
             width: 100%;

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

@@ -28,7 +28,8 @@
 /// @prop {Number} pinned-border-width [2px] - The border width of the pinned border.
 /// @prop {String} pinned-border-style [solid] - The CSS border style of the pinned border.
 /// @prop {Map} pinned-border-color [igx-color: ('grays', 400)] - The color of the pinned border.
-/// @prop {Map} cell-selected-background [igx-color: ('grays', 200), hexrgba: #fff] - The selected cell background color.
+/// @prop {Map} cell-active-border-color [igx-color: ('secondary', 500)] - The active(focused) cell border color.
+/// @prop {Map} cell-selected-background [igx-color: ('grays', 200)] - The selected cell background color.
 /// @prop {Map} cell-selected-text-color [igx-contrast-color: ('grays', 200)] - The selected cell text color.
 /// @prop {Map} resize-line-color [igx-color: ('secondary', 500)] - The table header resize line color.
 /// @prop {Map} grouparea-background [igx-color: ('grays', 100), hexrgba: #fff] - The grid group area background color.
@@ -124,6 +125,10 @@ $_light-grid: (
         igx-color: ('grays', 400)
     ),
 
+    cell-active-border-color: (
+        igx-color: ('secondary', 500)
+    ),
+
     cell-selected-background: (
         igx-color: ('grays', 200),
         hexrgba: #fff

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

@@ -159,7 +159,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     protected hvh: ComponentRef<HVirtualHelperComponent>;
     protected _differ: IterableDiffer<T> | null = null;
     protected _trackByFn: TrackByFunction<T>;
-    private heightCache = [];
+    protected heightCache = [];
     private _adjustToIndex;
 
     private get _isScrolledToBottom() {
@@ -625,7 +625,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             const view = this._embeddedViews[i];
             const rNode = view.rootNodes.find((node) => node.nodeType === Node.ELEMENT_NODE);
             if (rNode) {
-                const h = Math.max(rNode.offsetHeight, rNode.clientHeight, parseInt(this.igxForItemSize, 10));
+                const h = Math.max(rNode.offsetHeight, parseInt(this.igxForItemSize, 10));
                 const index = this.state.startIndex + i;
                 if (!this.isRemote && !this.igxForOf[index]) {
                     continue;
@@ -1164,6 +1164,53 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         }
     }
 
+    protected initSizesCache(items: any[]): number {
+        let totalSize = 0;
+        let size = 0;
+        const dimension = this.igxForScrollOrientation === 'horizontal' ?
+            'width' : 'height';
+        let i = 0;
+        this.sizesCache = [];
+        this.heightCache = [];
+        this.sizesCache.push(0);
+        const count = this.isRemote ? this.totalItemCount : items.length;
+        for (i; i < count; i++) {
+            if (dimension === 'height') {
+                size = parseInt(this.igxForItemSize, 10) || 0;
+                if (items[i] && items[i].summaries) {
+                    size = items[i].max;
+                }
+                this.heightCache.push(size);
+            } else {
+                size = parseInt(items[i][dimension], 10) || 0;
+            }
+            totalSize += size;
+            this.sizesCache.push(totalSize);
+        }
+        return totalSize;
+    }
+
+    protected _updateSizeCache() {
+        if (this.igxForScrollOrientation === 'horizontal') {
+            this.initSizesCache(this.igxForOf);
+            return;
+        }
+        const scr = this.vh.instance.elementRef.nativeElement;
+
+        const oldHeight = this.heightCache.length > 0 ? this.heightCache.reduce((acc, val) => acc + val) : 0;
+        const newHeight =  this.initSizesCache(this.igxForOf);
+
+        const diff = oldHeight - newHeight;
+
+        // if data has been changed while container is scrolled
+        // should update scroll top/left according to change so that same startIndex is in view
+        if (Math.abs(diff) > 0 && scr.scrollTop > 0) {
+            this.recalcUpdateSizes();
+            const offset = parseInt(this.dc.instance._viewContainer.element.nativeElement.style.top, 10);
+            scr.scrollTop = this.sizesCache[this.state.startIndex] - offset;
+        }
+    }
+
     ngDoCheck() {
         if (this._differ) {
             const changes = this._differ.diff(this.igxForOf);
@@ -1172,7 +1219,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
                 if (!this.igxForOf) {
                     return;
                 }
-                this.initSizesCache(this.igxForOf);
+                this._updateSizeCache();
                 this._applyChanges(changes);
                 this.cdr.markForCheck();
                 this._updateScrollOffset();

projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts

@@ -42,10 +42,15 @@ export class IgxTemplateOutletDirective implements OnChanges {
            // if view exists, but template has been changed and there is a view in the cache with the related template
            // then detach old view and insert the stored one with the matching template
            // after that update its context.
-            this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
-            this._viewRef = cachedView;
-            this._viewContainerRef.insert(this._viewRef, 0);
-            this._updateExistingContext(this.igxTemplateOutletContext);
+           this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
+           if (!cachedView.destroyed) {
+             this._viewRef = cachedView;
+           } else {
+             this._recreateView();
+             return;
+           }
+           this._viewContainerRef.insert(this._viewRef, 0);
+           this._updateExistingContext(this.igxTemplateOutletContext);
         }
     } else {
         // view should not be re-created. Check if it exists and if context exists and just update it.
@@ -58,7 +63,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
   private _recreateView() {
      // remove and recreate
      if (this._viewRef) {
-         this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
+         this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
       }
       if (this.igxTemplateOutlet) {
         this._viewRef = this._viewContainerRef.createEmbeddedView(

projects/igniteui-angular/src/lib/grids/README.md

@@ -184,6 +184,8 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`hideGroupedColumns`| boolean | Determines whether the grouped columns are hidden as well.  |
 |`rowEditable` | boolean | enables/disables row editing mode |
 |`transactions`| `TransactionService` | Transaction provider allowing access to all transactions and states of the modified rows. |
+|`summaryPosition`| GridSummaryPosition | The summary row position for the child levels. The default is top. |
+|`summaryCalculationMode`| GridSummaryCalculationMode | The summary calculation mode. The default is rootAndChildLevels, which means summaries are calculated for root and child levels. |
 
 ### Outputs
 
@@ -246,7 +248,6 @@ Here is a list of all public methods exposed by **igx-grid**:
 |`enableSummaries(expressions: Array)`|Enable summaries for the columns and apply your `customSummary` if it is provided.|
 |`disableSummaries(fieldName: string)`|Disable summaries for the specified column.|
 |`disableSummaries(columns: string[])`|Disable summaries for the listed columns.|
-|`clearSummaryCache()`|Delete all cached summaries and force recalculation.|
 |`previousPage()`|Goes to the previous page if paging is enabled and the current page is not the first.|
 |`nextPage()`|Goes to the next page if paging is enabled and current page is not the last.|
 |`paginate(page: number)`|Goes to the specified page if paging is enabled. Page indices are 0 based.|

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -136,7 +136,6 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
                     this.editCellState.delete(gridId);
                 }
             } else {
-                const grid = this.get(gridId);
                 this.editCellState.delete(gridId);
             }
         }
@@ -347,8 +346,8 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
                     grid.summaryService.removeSummaries(rowID);
                 }
             }
-            grid.summaryService.clearSummaryCache(emittedArgs);
             if (!grid.rowEditable || !grid.rowInEditMode || grid.rowInEditMode.rowID !== rowID || !grid.transactions.enabled) {
+                grid.summaryService.clearSummaryCache(emittedArgs);
                 (grid as any)._pipeTrigger++;
             }
         }
@@ -387,6 +386,7 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
         const index = this.get_row_index_in_data(id, rowID);
         const currentRowInEditMode = this.get_edit_row_state(id);
         let oldValue = Object.assign({}, data[index]);
+        const hasSummarizedColumns = grid.hasSummarizedColumns;
         if (grid.currentRowState && grid.currentRowState[grid.primaryKey] === rowID
             || currentRowInEditMode && currentRowInEditMode.rowID === rowID) {
             oldValue = Object.assign(oldValue, grid.currentRowState);
@@ -405,13 +405,16 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent> {
             if (currentRowInEditMode) {
                 grid.transactions.endPending(false);
             }
+            if (hasSummarizedColumns) {
+                grid.summaryService.removeSummaries(emitArgs.rowID);
+            }
             this.updateData(grid, rowID, data[index], emitArgs.oldValue, emitArgs.newValue);
             if (currentGridState.isRowSelected) {
                 grid.selection.deselect_item(id, rowID);
                 const newRowID = (grid.primaryKey) ? emitArgs.newValue[grid.primaryKey] : emitArgs.newValue;
                 grid.selection.select_item(id, newRowID);
             }
-            if (grid.hasSummarizedColumns) {
+            if (hasSummarizedColumns) {
                 grid.summaryService.removeSummaries(rowID);
             }
             (grid as any)._pipeTrigger++;