Merge branch 'master' into vmihalkov/fix-10074

Author: ChronosSF

CHANGELOG.md

@@ -5,18 +5,33 @@ All notable changes for each version of this project will be documented in this
 ## 12.2.0
 
 ### New Features
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
+    - Introduced new 'rowStyles' and 'rowClasses' grid properties which allows to define a custom styling on each grid row
+    - Introduced two new *cancellable* outputs related to CRUD - `rowDelete` and `rowAdd`. Both use an `IGridEditEventArgs` object as an event argument.
+        ```html
+        <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" (rowDelete)="rowDelete($event)" [autoGenerate]="true"></igx-grid>
+        ```
 - `igxTreeGrid`
     - Added `TreeGridMatchingRecordsOnlyFilteringStrategy`, which allows you to display only the records matching particular filtering condition without any trace for their parents.
-
-## 12.1.6
+- `IgxSnackbarComponent`
+    - Introduced new 'positionSettings' input which allows to define a custom animation and position.
+- `IgxToastComponent`
+    - Introduced new 'positionSettings' input which allows to define a custom animation and position.
 
 ### General
 - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
     - 'oddRowCSS' and 'evenRowCSS' properties has been deprecated
+- `IgxForOf` - now takes margins into account when calculating the space that each element takes.
+    _Note:_ If your virtualized items contain margins, please calculate them into the `itemSize` value for the best possible initial virtualized state.
+
+## 12.1.6
+
+## 12.1.6
 
 ### New Features
 - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
-    - Added two public methods that spawn the add row UI for an arbitrary record in the current data view. One that accepts a rowID to use as the row the UI spawns under and the other accepting an index that has a distinct implementation for `IgxTreeGrid`. Please, refer to the official documentation for more information:[Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-adding) and [Tree Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-adding).
+    - Added two public methods that spawn the add row UI for an arbitrary record in the current data view. One that accepts a rowID to use as the row the UI spawns under and the other accepting an index that has a distinct implementation for `IgxTreeGrid`. Please, refer to the official documentation for more information: [Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/row-adding) and [Tree Grid Row Adding](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/row-adding).
 
         _Note:_ That the new record is still added at the end of the data view, after the end-user submits it.
         ```typescript
@@ -28,16 +43,6 @@ All notable changes for each version of this project will be documented in this
         this.treeGrid.beginAddRowByIndex(10, true);     // spawns the add row UI to add a child for the row at index 10
         this.treeGrid.beginAddRowByIndex(null);         // spawns the add row UI as the first record
         ```
-    - Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
-    - Introduced new 'rowStyles' and 'rowClasses' grid properties which allows to define a custom styling on each grid row
-    - Introduced two new *cancellable* outputs related to CRUD - `rowDelete` and `rowAdd`. Both use an `IGridEditEventArgs` object as an event argument.
-        ```html
-        <igx-grid #grid [data]="localData" (rowAdd)="rowAdd($event)" (rowDelete)="rowDelete($event)" [autoGenerate]="true"></igx-grid>
-        ```
-- `IgxSnackbarComponent`
-    - Introduced new 'positionSettings' input which allows to define a custom animation and position.
-- `IgxToastComponent`
-    - Introduced new 'positionSettings' input which allows to define a custom animation and position.
 
 ## 12.1.3
 

ROADMAP.md

@@ -8,12 +8,8 @@
 2. **[DONE]** Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969)
 3. **[DONE]** Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863)
 4. **[DONE]** Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516)
-5. IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
-6. IgxCombo: being able to set groups sorting order [#10125](https://github.com/IgniteUI/igniteui-angular/issues/10125)
-7. IgxCsvExporterService: Support multi-column headers export [#10078](https://github.com/IgniteUI/igniteui-angular/issues/10078)
-8. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126)
-9. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
-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)
+5. **[DONE]** IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
+6. **[DONE]** Snackbar support for animation customization [#10126](https://github.com/IgniteUI/igniteui-angular/issues/10126)
 
 ## Going down the road
 
@@ -24,6 +20,9 @@
 5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
 6. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
 7. Make IgxDropDownBaseToken public [#10103](https://github.com/IgniteUI/igniteui-angular/issues/10103)
+8. IgxLinearProgressBar: animate initial progress [#10068](https://github.com/IgniteUI/igniteui-angular/issues/10068)
+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)
 
 # Previous Milestone
 

projects/igniteui-angular/package.json

@@ -77,14 +77,14 @@
         "@igniteui/material-icons-extended": "^2.8.0"
     },
     "peerDependencies": {
-        "@angular/common": "^12.1.1",
-        "@angular/core": "^12.1.1",
-        "@angular/animations": "^12.1.1",
-        "@angular/forms": "^12.1.1",
+        "@angular/common": "^12.2.0",
+        "@angular/core": "^12.2.0",
+        "@angular/animations": "^12.2.0",
+        "@angular/forms": "^12.2.0",
         "web-animations-js": "^2.3.2"
     },
     "igxDevDependencies": {
-        "@igniteui/angular-schematics": "~12.1.810"
+        "@igniteui/angular-schematics": "~12.2.820-alpha.0"
     },
     "ng-update": {
         "migrations": "./migrations/migration-collection.json"

projects/igniteui-angular/src/lib/data-operations/data-util.spec.ts

@@ -487,9 +487,9 @@ const testMerging = () => {
     describe('Test merging', () => {
         it('Should merge add transactions correctly', () => {
             const data = SampleTestData.personIDNameData();
-            const addRow4 = { ID: 4, Name: 'Peter' };
-            const addRow5 = { ID: 5, Name: 'Mimi' };
-            const addRow6 = { ID: 6, Name: 'Pedro' };
+            const addRow4 = { ID: 4, IsEmployed: true, Name: 'Peter' };
+            const addRow5 = { ID: 5, IsEmployed: true, Name: 'Mimi' };
+            const addRow6 = { ID: 6, IsEmployed: false, Name: 'Pedro' };
             const transactions: Transaction[] = [
                 { id: addRow4.ID, newValue: addRow4, type: TransactionType.ADD },
                 { id: addRow5.ID, newValue: addRow5, type: TransactionType.ADD },

projects/igniteui-angular/src/lib/data-operations/filtering-strategy.ts

@@ -134,7 +134,7 @@ export class FormattedValuesFilteringStrategy extends FilteringStrategy {
         let value = resolveNestedPath(rec, fieldName);
 
         value = column.formatter && this.shouldApplyFormatter(fieldName) ?
-            column.formatter(value) : value && (isDate || isTime) ? parseDate(value) : value;
+            column.formatter(value, rec) : value && (isDate || isTime) ? parseDate(value) : value;
 
         return value;
     }

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

@@ -324,6 +324,33 @@ describe('IgxForOf directive -', () => {
             chunkSize = (virtualContainer as any)._calcMaxChunkSize();
             expect(chunkSize).toEqual(10);
         });
+
+        it('should take item margins into account when calculating the size cache', async () => {
+            fix.componentInstance.height = '600px';
+            fix.componentInstance.itemSize = '100px';
+            const virtualContainer = fix.componentInstance.parentVirtDir;
+            virtualContainer.igxForSizePropName = 'height';
+            fix.componentInstance.data = [
+                { 1: '1', height: '100px', margin: '30px' },
+                { 1: '2', height: '100px', margin: '0px' },
+                { 1: '3', height: '100px', margin: '0px' },
+                { 1: '4', height: '100px', margin: '0px' },
+                { 1: '5', height: '100px', margin: '0px' },
+                { 1: '6', height: '100px', margin: '0px' },
+                { 1: '7', height: '100px', margin: '0px' },
+                { 1: '8', height: '100px', margin: '30px' },
+                { 1: '9', height: '100px', margin: '30px' },
+                { 1: '10', height: '100px', margin: '30px' }
+            ];
+            fix.detectChanges();
+            await wait(200);
+            const cache = (fix.componentInstance.parentVirtDir as any).heightCache;
+            expect(cache).toEqual([130, 100, 100, 100, 100, 100, 100, 100, 100, 100]);
+            fix.componentInstance.scrollTop(400);
+            fix.detectChanges();
+            await wait(200);
+            expect(cache).toEqual([130, 100, 100, 100, 100, 100, 100, 130, 130, 130]);
+        });
     });
 
     describe('vertical and horizontal virtual component', () => {
@@ -1185,7 +1212,7 @@ describe('IgxForOf directive -', () => {
             const secondForOf = fix.componentInstance.secondForOfDir;
             expect(secondForOf.state.startIndex).toBe(0);
         });
-});
+    });
 });
 
 class DataGenerator {
@@ -1401,7 +1428,9 @@ export class VirtualComponent {
                 [igxForScrollOrientation]="'vertical'"
                 [igxForContainerSize]='height'
                 [igxForItemSize]='itemSize'>
-                <div [style.display]="'flex'" [style.height]="rowData.height || itemSize || '50px'">
+                <div [style.display]="'flex'"
+                    [style.height]="rowData.height || itemSize || '50px'"
+                    [style.margin-top]="rowData.margin || '0px'">
                     <div [style.min-width]=cols[0].width>{{rowData['1']}}</div>
                     <div [style.min-width]=cols[1].width>{{rowData['2']}}</div>
                     <div [style.min-width]=cols[2].width>{{rowData['3']}}</div>

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

@@ -735,7 +735,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
     /**
      * @hidden
-     * Function that recaculates and updates cache sizes.
+     * Function that recalculates and updates cache sizes.
      */
     public recalcUpdateSizes() {
         const dimension = this.igxForScrollOrientation === 'horizontal' ?
@@ -753,8 +753,9 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
                 if (!this.isRemote && !this.igxForOf[index]) {
                     continue;
                 }
+                const margin = this.getMargin(rNode, dimension);
                 const oldVal = dimension === 'height' ? this.heightCache[index] : this.igxForOf[index][dimension];
-                const newVal = dimension === 'height' ? h : rNode.clientWidth;
+                const newVal = (dimension === 'height' ? h : rNode.clientWidth) + margin;
                 if (dimension === 'height') {
                     this.heightCache[index] = newVal;
                 } else {
@@ -855,6 +856,8 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
 
         this.dc.instance._viewContainer.element.nativeElement.style.top = -(scrollOffset) + 'px';
 
+        this._zone.onStable.pipe(first()).subscribe(this.recalcUpdateSizes.bind(this));
+
         this.dc.changeDetectorRef.detectChanges();
         if (prevStartIndex !== this.state.startIndex) {
             this.chunkLoad.emit(this.state);
@@ -1404,6 +1407,16 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             this.scrollPosition = newSize === this.scrollPosition ? newSize + 1 : newSize;
         }
     }
+
+    private getMargin(node, dimension: string): number {
+        const styles = window.getComputedStyle(node);
+        if (dimension === 'height') {
+            return parseFloat(styles['marginTop']) +
+                parseFloat(styles['marginBottom']) || 0;
+        }
+        return parseFloat(styles['marginLeft']) +
+            parseFloat(styles['marginRight']) || 0;
+    }
 }
 
 export const getTypeNameForDebugging = (type: any): string => type.name || typeof type;

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

@@ -8,7 +8,7 @@
     >
 </ng-template>
 <ng-template #defaultCell>
-    <div *ngIf="column.dataType !== 'boolean'"
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
         igxTextHighlight
         class="igx-grid__td-text"
         style="pointer-events: none;"
@@ -46,13 +46,14 @@
                 : value
         }}</div>
     <igx-icon
-        *ngIf="column.dataType === 'boolean'"
+        *ngIf="column.dataType === 'boolean' && !this.formatter"
         [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
         >{{ value ? "check" : "close" }}</igx-icon
     >
 </ng-template>
 <ng-template #addRowCell let-cell="cell">
-    <div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
+        igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
     [cssClass]="highlightClass"
     [activeCssClass]="activeHighlightClass"
     [groupName]="gridID"

projects/igniteui-angular/src/lib/grids/grid/column.spec.ts

@@ -126,11 +126,16 @@ describe('IgxGrid - Column properties #grid', () => {
         const grid = fix.componentInstance.grid;
         const formatter = fix.componentInstance.multiplier;
 
+        const boolFormatter = fix.componentInstance.boolFormatter;
+
         expect(grid.columnList.first.formatter).toBeDefined();
 
         for (let i = 0; i < 3; i++) {
             const cell = grid.gridAPI.get_cell_by_index(i, 'ID');
             expect(cell.nativeElement.textContent).toMatch(formatter(cell.value));
+
+            const cellBool = grid.gridAPI.get_cell_by_index(i, 'IsEmployed');
+            expect(cellBool.nativeElement.textContent).toMatch(boolFormatter(cellBool.value));
         }
     });
 
@@ -161,18 +166,18 @@ describe('IgxGrid - Column properties #grid', () => {
 
         headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
         expect(headers[0].nativeElement.textContent).toMatch('ID');
-        expect(headers[1].nativeElement.textContent).toMatch('Name');
+        expect(headers[2].nativeElement.textContent).toMatch('Name');
 
         // Swap columns
         grid.moveColumn(grid.columnList.first, grid.columnList.last);
         fix.detectChanges();
 
-        expect(grid.columnList.first.field).toMatch('Name');
+        expect(grid.columnList.first.field).toMatch('IsEmployed');
         expect(grid.columnList.last.field).toMatch('ID');
 
         headers = fix.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS));
-        expect(headers[0].nativeElement.textContent).toMatch('Name');
-        expect(headers[1].nativeElement.textContent).toMatch('ID');
+        expect(headers[0].nativeElement.textContent).toMatch('IsEmployed');
+        expect(headers[1].nativeElement.textContent).toMatch('Name');
     });
 
     it('should support adding and removing columns through a declared iterable', fakeAsync(/** columnList.changes rAF */() => {

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

@@ -2,7 +2,8 @@
     <igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
 </ng-template>
 <ng-template #defaultCell>
-    <div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
+        igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
         [cssClass]="highlightClass"
         [activeCssClass]="activeHighlightClass"
         [groupName]="gridID"
@@ -13,18 +14,27 @@
             ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale)
             : column.dataType === 'currency'
             ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale)
-            : column.dataType === 'percent' ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value"
+            : column.dataType === 'percent'
+            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale)
+            : value"
         [row]="rowData"
         [column]="this.column.field"
         [containerClass]="'igx-grid__td-text'"
         [metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === "number"
             ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime')
             ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency'
             ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent'
-            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value }}</div>
+            ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}</div>
+
+    <igx-icon
+        *ngIf="column.dataType === 'boolean' && !this.formatter"
+        [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
+    >{{ value ? "check" : "close" }}</igx-icon
+    >
 </ng-template>
 <ng-template #addRowCell let-cell="cell">
-    <div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
+    <div *ngIf="column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)"
+        igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
     [cssClass]="highlightClass"
     [activeCssClass]="activeHighlightClass"
     [groupName]="gridID"