Merge branch 'pivot-grid-master' into mkirova/fix-10662

MKirova · MKirova · commit 67530355765c · 2021-12-15T17:01:15.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -90,6 +90,8 @@ All notable changes for each version of this project will be documented in this
     - Exposed a `groupStrategy` input that functions similarly to `sortStrategy`, allowing customization of the grouping behavior of the grid. Please, refer to the [Group By ](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/groupby) topic for more information.
 - `IgxDialog`
     - Added `focusTrap` input to set whether the Tab key focus is trapped within the dialog when opened. Defaults to `true`.
+- `IgxProgressBar`
+    - Exposed new animationDuration input - sets the duration of the progress animation. 
 
 ### General
 
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -2,37 +2,39 @@
 
 # Current Milestone
 
-## Milestone 19 (Due by Nov, 2021)
+## Milestone 20 (Due by Feb, 2022)
 
-1. **DONE** Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
-2. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
-3. **DONE** Themes: Refactor Grid theme [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556) 
-6. **DONE** onFilterDone property to expose additional information [#10243](https://github.com/IgniteUI/igniteui-angular/issues/10243)
-7. IgxCombo with single selection [#9832](https://github.com/IgniteUI/igniteui-angular/issues/9832)
+1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700)
+2. igx-tree-grid:excel-style filtering should show children of parent elements returned from the filter [#10342](https://github.com/IgniteUI/igniteui-angular/issues/10342)
+3. Grid summary custom templating [#7981](https://github.com/IgniteUI/igniteui-angular/issues/7981)
+6. Tabs component does not support RTL [#5904](https://github.com/IgniteUI/igniteui-angular/issues/5904)
+7. Column moving feature on grid level [#10176](https://github.com/IgniteUI/igniteui-angular/issues/10176)
+8. Improve sorting experience for users [#9674](https://github.com/IgniteUI/igniteui-angular/issues/9674)
+9. Template grid excel filter footer [#10183](https://github.com/IgniteUI/igniteui-angular/issues/10183)
+10. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514)
 
 ## Going down the road
 
-# Due in 2021
+# Due in 2022
 
-1. Angular Pivot Grid [#5700](https://github.com/IgniteUI/igniteui-angular/issues/5700)
+1. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
 2. Classes to indicate position of auto overlay [#9481](https://github.com/IgniteUI/igniteui-angular/issues/9481)
+3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
 4. Grid autosize feature with performance improvements [#10205](https://github.com/IgniteUI/igniteui-angular/issues/10205)
-5. Column moving feature on grid level [#10176](https://github.com/IgniteUI/igniteui-angular/issues/10176)
-6. Grid summary custom templating [#7981](https://github.com/IgniteUI/igniteui-angular/issues/7981)
-7. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
-8. Improve sorting experience for users [#9674](https://github.com/IgniteUI/igniteui-angular/issues/9674)
-9. IgxCombo: being able to set groups sorting order [#10125](https://github.com/IgniteUI/igniteui-angular/issues/10125)
-10. Getting only one sort and one filter event after changing the state of grid using setState function [#8064](https://github.com/IgniteUI/igniteui-angular/issues/8064)
-11. IgxGridState directive to save disableHiding property [#9304](https://github.com/IgniteUI/igniteui-angular/issues/9304)
-12. Template grid excel filter footer [#10183](https://github.com/IgniteUI/igniteui-angular/issues/10183)
-13. Igx Grid Sort Icon Change [#10217](https://github.com/IgniteUI/igniteui-angular/issues/10217)
+5. Getting only one sort and one filter event after changing the state of grid using setState function [#8064](https://github.com/IgniteUI/igniteui-angular/issues/8064)
 
-# Due in 2022
+# Previous Milestone
 
-1. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
-2. Grid Cell Merging [#3514](https://github.com/IgniteUI/igniteui-angular/issues/3514)
+## Milestone 19 (Released November 23rd, 2021)
 
-# Previous Milestone
+1. **[DONE]** Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
+2. **[DONE]** Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
+3. **[DONE]** Themes: Refactor Grid theme [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556) 
+6. **[DONE]** onFilterDone property to expose additional information [#10243](https://github.com/IgniteUI/igniteui-angular/issues/10243)
+7. **[DONE]** IgxCombo with single selection [#9832](https://github.com/IgniteUI/igniteui-angular/issues/9832)
+8. **[DONE]** Igx Grid Sort Icon Change [#10217](https://github.com/IgniteUI/igniteui-angular/issues/10217)
+9. **[DONE]** IgxCombo: being able to set groups sorting order [#10125](https://github.com/IgniteUI/igniteui-angular/issues/10125)
+10. **[DONE]** IgxGridState directive to save disableHiding property [#9304](https://github.com/IgniteUI/igniteui-angular/issues/9304)
 
 ## Milestone 18 (Released October 4th, 2021)
 
diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts
@@ -997,7 +997,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      *
      * @returns Array of selected items
      * ```typescript
-     * let selectedItems = this.combo.selectedItems();
+     * let mySelection = this.combo.selection;
      * ```
      */
     public get selection() {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -992,7 +992,7 @@
         top: 0;
         #{$right}: 0;
         background: var-get($theme, 'header-background');
-        border-#{$left}: 1px solid var-get($theme, 'header-border-color');
+        border-#{$left}: 1px solid igx-color($palette, 'grays', 300);
     }
 
     %grid-tbody-scrollbar {
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_input-group.scss
@@ -49,8 +49,8 @@ $dark-fluent-input-group: extend(
 /// @requires $bootstrap-input-group
 /// @requires $base-dark-input-group
 $dark-bootstrap-input-group: extend(
-    $bootstrap-input-group,
-    $base-dark-input-group
+    $base-dark-input-group,
+    $bootstrap-input-group
 );
 
 /// Generates an dark indigo input-group schema
@@ -97,7 +97,6 @@ $dark-indigo-input-group: extend(
         focused-bottom-line-color: (
             igx-contrast-color: ('surface')
         ),
-
     )
 );
 
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -826,7 +826,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     public pointerenter = (event: PointerEvent) => {
         const isHierarchicalGrid = this.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
-        if (isHierarchicalGrid && (!this.grid.navigation.activeNode.gridID || this.grid.navigation.activeNode.gridID !== this.gridID)) {
+        if (isHierarchicalGrid && (!this.grid.navigation?.activeNode?.gridID || this.grid.navigation.activeNode.gridID !== this.gridID)) {
             return;
         }
         const dragMode = this.selectionService.pointerEnter(this.selectionNode, event);
@@ -841,7 +841,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      */
     public pointerup = (event: PointerEvent) => {
         const isHierarchicalGrid = this.grid.nativeElement.tagName.toLowerCase() === 'igx-hierarchical-grid';
-        if (!this.platformUtil.isLeftClick(event) || (isHierarchicalGrid && (!this.grid.navigation.activeNode.gridID ||
+        if (!this.platformUtil.isLeftClick(event) || (isHierarchicalGrid && (!this.grid.navigation?.activeNode?.gridID ||
             this.grid.navigation.activeNode.gridID !== this.gridID))) {
             return;
         }
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts
@@ -371,10 +371,6 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
             });
         }
     }
-    // constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & IGridDataBindable>, public cdr: ChangeDetectorRef) {
-    //     // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
-    //     super(gridAPI, cdr);
-    // }
 
     /**
      * @hidden
diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts
@@ -233,6 +233,19 @@ export class IgxHasVisibleColumnsPipe implements PipeTransform {
 
 }
 
+/** @hidden @internal */
+function buildDataView(): MethodDecorator {
+    return function (_target: unknown, _propertyKey: string, descriptor: PropertyDescriptor) {
+        const original = descriptor.value;
+        descriptor.value = function (...args: unknown[]) {
+            const result = original.apply(this, args);
+            this.grid.buildDataView();
+            return result;
+        }
+        return descriptor;
+    }
+}
+
 /**
  * @hidden
  */
@@ -241,6 +254,7 @@ export class IgxGridRowPinningPipe implements PipeTransform {
 
     constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
 
+    @buildDataView()
     public transform(collection: any[], id: string, isPinned = false, _pipeTrigger: number) {
 
         if (this.grid.hasPinnedRecords && isPinned) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -1159,7 +1159,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     public get headerSelectorContainer() {
-        return  this.theadRow?.headerSelectorContainer;
+        return this.theadRow?.headerSelectorContainer;
     }
 
     public get headerDragContainer() {
@@ -2763,6 +2763,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     private _unpinnedWidth = NaN;
     private _visibleColumns = [];
     private _columnGroups = false;
+    private _dataView = [];
 
     private _columnWidth: string;
 
@@ -3239,7 +3240,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.onDensityChanged.pipe(destructor).subscribe(() => {
             this.crudService.endEdit(false);
             if (this._summaryRowHeight === 0) {
-            this.summaryService.summaryHeight = 0;
+                this.summaryService.summaryHeight = 0;
             }
             this.notifyChanges(true);
         });
@@ -3432,18 +3433,21 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      */
     public setFilteredSortedData(data, pinned: boolean) {
         data = data || [];
-        if (this.pinnedRecordsCount > 0 && pinned) {
-            this._filteredSortedPinnedData = data;
-            this.pinnedRecords = data;
-            this._filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
-                [... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData];
-            this.refreshSearch(true, false);
-        } else if (this.pinnedRecordsCount > 0 && !pinned) {
-            this._filteredSortedUnpinnedData = data;
+        if (this.pinnedRecordsCount > 0) {
+            if (pinned) {
+                this._filteredSortedPinnedData = data;
+                this.pinnedRecords = data;
+                this._filteredSortedData = this.isRowPinningToTop ? [... this._filteredSortedPinnedData, ... this._filteredSortedUnpinnedData] :
+                    [... this._filteredSortedUnpinnedData, ... this._filteredSortedPinnedData];
+                this.refreshSearch(true, false);
+            } else {
+                this._filteredSortedUnpinnedData = data;
+            }
         } else {
             this._filteredSortedData = data;
             this.refreshSearch(true, false);
         }
+        this.buildDataView();
     }
 
     /**
@@ -5117,10 +5121,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      *      const dataView = this.grid.dataView;
      * ```
      */
-    public get dataView(): any[] {
-        return this.isRowPinningToTop ?
-            [...this.pinnedDataView, ...this.unpinnedDataView] :
-            [...this.unpinnedDataView, ...this.pinnedDataView];
+    public get dataView() {
+        return this._dataView;
     }
 
     /**
@@ -6923,6 +6925,12 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         column.resetCaches();
     }
 
+    private buildDataView() {
+        this._dataView = this.isRowPinningToTop ?
+            [...this.pinnedDataView, ...this.unpinnedDataView] :
+            [...this.unpinnedDataView, ...this.pinnedDataView];
+    }
+
     private _applyWidthHostBinding() {
         let width = this._width;
         if (width === null) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -124,7 +124,7 @@
                                 <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{groupingExpressions.length}}"></div>
                         </ng-container>
                         <ng-template
-                    [ngTemplateOutlet]='detailTemplate'
+                    [ngTemplateOutlet]='detailTemplate.first'
                     [ngTemplateOutletContext]='getDetailsContext(rowData, rowIndex)'>
                     </ng-template>
                 </div>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -150,8 +150,8 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    @ContentChild(IgxGridDetailTemplateDirective, { read: TemplateRef, static: false })
-    public detailTemplate: TemplateRef<any> = null;
+    @ContentChildren(IgxGridDetailTemplateDirective, { read: TemplateRef })
+    public detailTemplate: QueryList<TemplateRef<any>> = new QueryList();
 
     /**
      * @hidden @internal
@@ -200,12 +200,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     @ContentChild(IgxGroupByRowTemplateDirective, { read: IgxGroupByRowTemplateDirective })
     protected groupTemplate: IgxGroupByRowTemplateDirective;
 
-    /**
-     * @hidden @internal
-     */
-    @ContentChild(IgxGridDetailTemplateDirective, { read: IgxGridDetailTemplateDirective, static: false })
-    protected gridDetailsTemplate: IgxGridDetailTemplateDirective;
-
     /**
      * @hidden
      * @internal
@@ -555,16 +549,6 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         };
     }
 
-    /**
-     * @hidden @internal
-     */
-    public trackChanges(index, rec) {
-        if (rec && rec.detailsData !== undefined) {
-            return rec.detailsData;
-        }
-        return rec;
-    }
-
     /**
      * @hidden @internal
      */
@@ -576,7 +560,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     public get hasDetails() {
-        return !!this.gridDetailsTemplate;
+        return !!this.detailTemplate.length;
     }
 
     /**
@@ -645,6 +629,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         this.notifyChanges();
     }
 
+    /** @hidden @internal */
+    public trackChanges: (index, rec) => any;
+
     /**
      * Groups by a new `IgxColumnComponent` based on the provided expression, or modifies an existing one.
      *
@@ -931,6 +918,9 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             this._groupRowTemplate = this.groupTemplate.template;
         }
 
+        this.detailTemplate.changes.subscribe(() =>
+            this.trackChanges = (_, rec) => (rec?.detailsData !== undefined ? rec.detailsData : rec));
+
         if (this.hideGroupedColumns && this.columnList && this.groupingExpressions) {
             this._setGroupColsVisibility(this.hideGroupedColumns);
         }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -321,17 +321,17 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     private p_id = `igx-pivot-grid-${NEXT_ID++}`;
 
 
-     /**
-     * Gets/Sets the default expand state for all rows.
-     */
-      @Input()
-      public get defaultExpandState() {
-          return this._defaultExpandState;
-      }
+    /**
+    * Gets/Sets the default expand state for all rows.
+    */
+    @Input()
+    public get defaultExpandState() {
+        return this._defaultExpandState;
+    }
 
-      public set defaultExpandState(val: boolean) {
-          this._defaultExpandState = val;
-      }
+    public set defaultExpandState(val: boolean) {
+        this._defaultExpandState = val;
+    }
 
     /**
      * @hidden @internal
@@ -604,7 +604,8 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             this.pivotKeys
         );
         const flatData = Array.from(allValuesHierarchy.values());
-        columnValues = flatData.map(record => this.extractValue(record['value']));
+        // Note: Once ESF supports tree view, we should revert this back.
+        columnValues = flatData.map(record => record['value']);
         done(columnValues);
         return;
     }
@@ -987,18 +988,18 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         groupColumn.hidden = state;
         this.columnGroupStates.set(groupColumn.field, state);
         const childrenTotal = this.hasMultipleValues ?
-         groupColumn.children.filter(x => x.columnGroup && x.children.filter(y => !y.columnGroup).length === this.values.length) :
-         groupColumn.children.filter(x => !x.columnGroup);
-         const childrenSubgroups = this.hasMultipleValues ?
-         groupColumn.children.filter(x => x.columnGroup && x.children.filter(y => !y.columnGroup).length === 0) :
-         groupColumn.children.filter(x => x.columnGroup);
-         childrenTotal.forEach(group => {
+            groupColumn.children.filter(x => x.columnGroup && x.children.filter(y => !y.columnGroup).length === this.values.length) :
+            groupColumn.children.filter(x => !x.columnGroup);
+        const childrenSubgroups = this.hasMultipleValues ?
+            groupColumn.children.filter(x => x.columnGroup && x.children.filter(y => !y.columnGroup).length === 0) :
+            groupColumn.children.filter(x => x.columnGroup);
+        childrenTotal.forEach(group => {
             if (state) {
                 group.headerTemplate = this.headerTemplate;
             } else {
                 group.headerTemplate = undefined;
             }
-         });
+        });
         if (!groupColumn.hidden && childrenSubgroups.length > 0) {
             childrenSubgroups.forEach(group => {
                 this.resolveToggle(group, state);
@@ -1216,7 +1217,4 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         });
         return cols;
     }
-    private extractValue(value) {
-        return value.split(this.pivotKeys.columnDimensionSeparator)[value.split(this.pivotKeys.columnDimensionSeparator).length - 1];
-    }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html
diff --git a/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts b/projects/igniteui-angular/src/lib/progressbar/circularbar.component.spec.ts
diff --git a/projects/igniteui-angular/src/lib/progressbar/linearbar.component.spec.ts b/projects/igniteui-angular/src/lib/progressbar/linearbar.component.spec.ts
diff --git a/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts b/projects/igniteui-angular/src/lib/progressbar/progressbar.component.ts
diff --git a/projects/igniteui-angular/src/lib/progressbar/templates/linear-bar.component.html b/projects/igniteui-angular/src/lib/progressbar/templates/linear-bar.component.html
diff --git a/src/app/progressbar/progressbar.sample.html b/src/app/progressbar/progressbar.sample.html

Original file line number	Diff line number	Diff line change
`@@ -997,7 +997,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement`
`997`	`997`	`*`
`998`	`998`	`* @returns Array of selected items`
`999`	`999`	* ```typescript
`1000`		`- * let selectedItems = this.combo.selectedItems();`
	`1000`	`+ * let mySelection = this.combo.selection;`
`1001`	`1001`	* ```
`1002`	`1002`	`*/`
`1003`	`1003`	`public get selection() {`
Original file line number	Diff line number	Diff line change
`@@ -992,7 +992,7 @@`
`992`	`992`	`top: 0;`
`993`	`993`	`#{$right}: 0;`
`994`	`994`	`background: var-get($theme, 'header-background');`
`995`		`- border-#{$left}: 1px solid var-get($theme, 'header-border-color');`
	`995`	`+ border-#{$left}: 1px solid igx-color($palette, 'grays', 300);`
`996`	`996`	`}`
`997`	`997`
`998`	`998`	`%grid-tbody-scrollbar {`
Original file line number	Diff line number	Diff line change
`@@ -371,10 +371,6 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After`
`371`	`371`	`});`
`372`	`372`	`}`
`373`	`373`	`}`
`374`		`- // constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & IGridDataBindable>, public cdr: ChangeDetectorRef) {`
`375`		`- // // D.P. constructor duplication due to es6 compilation, might be obsolete in the future`
`376`		`- // super(gridAPI, cdr);`
`377`		`- // }`
`378`	`374`
`379`	`375`	`/**`
`380`	`376`	`* @hidden`