Merge branch 'master' into pivot-grid-master

Author: ChronosSF

CHANGELOG.md

@@ -22,6 +22,10 @@ All notable changes for each version of this project will be documented in this
 ### 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
 

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/core/styles/components/navbar/_navbar-theme.scss

@@ -122,6 +122,8 @@
         margin: $navbar-title-margin;
         flex-grow: 1;
         user-select: text;
+        display: flex;
+        flex-direction: row
     }
 
     %igx-navbar-bundle {

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/common/crud.service.ts

@@ -586,7 +586,9 @@ export class IgxGridCRUDService extends IgxRowAddCrudState {
         this.grid.notifyChanges(true);
 
         this.grid.navigateTo(this.row.index, -1);
-        const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index);
+        // when selecting the dummy row we need to adjust for top pinned rows
+        const indexAdjust = this.grid.isRowPinningToTop && !this.addRowParent.isPinned ? this.grid.pinnedRows.length : 0;
+        const dummyRow = this.grid.gridAPI.get_row_by_index(this.row.index + indexAdjust);
         dummyRow.triggerAddAnimation();
         dummyRow.cdr.detectChanges();
         dummyRow.addAnimationEnd.pipe(first()).subscribe(() => {

projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts

@@ -51,6 +51,9 @@ export class IgxGridNavigationService {
 
     handleNavigation(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
+        if (NAVIGATION_KEYS.has(key)) {
+            event.stopPropagation();
+        }
         if (this.grid.crudService.cell && NAVIGATION_KEYS.has(key)) {
             return;
         }

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

@@ -1807,6 +1807,40 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expect(rows.length).toEqual(3, 'Wrong filtered rows count');
         }));
 
+        it('Should filter by cells formatted data when using FormattedValuesFilteringStrategy with rowData', fakeAsync(() => {
+            const formattedStrategy = new FormattedValuesFilteringStrategy(['ProductName']);
+            grid.filterStrategy = formattedStrategy;
+            const anotherFieldFormatter = (value: any, rowData: any) => rowData.ID + ':' + value;
+            grid.columns[1].formatter = anotherFieldFormatter;
+            fix.detectChanges();
+
+            grid.openAdvancedFilteringDialog();
+            tick(200);
+            fix.detectChanges();
+
+            // Add root group.
+            GridFunctions.clickAdvancedFilteringInitialAddGroupButton(fix, 0);
+            tick(100);
+            fix.detectChanges();
+
+            // Add a new expression
+            selectColumnInEditModeExpression(fix, 1); // Select 'ProductName' column.
+            selectOperatorInEditModeExpression(fix, 0); // Select 'Contains' operator.
+            const input = GridFunctions.getAdvancedFilteringValueInput(fix).querySelector('input');
+            UIInteractions.clickAndSendInputElementValue(input, '1:', fix); // Type filter value.
+
+            // Commit the populated expression.
+            GridFunctions.clickAdvancedFilteringExpressionCommitButton(fix);
+            tick(100);
+            fix.detectChanges();
+            GridFunctions.clickAdvancedFilteringApplyButton(fix);
+            tick(100);
+            fix.detectChanges();
+
+            const rows = GridFunctions.getRows(fix);
+            expect(rows.length).toEqual(1, 'Wrong filtered rows count');
+        }));
+
         describe('Context Menu - ', () => {
             it('Should discard added group when clicking its operator line without having a single expression.', fakeAsync(() => {
                 // Open Advanced Filtering dialog.

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

@@ -2179,6 +2179,25 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(rows.length).toEqual(2);
         }));
 
+        it('Should filter by cells formatted data when using FormattedValuesFilteringStrategy with rowData', fakeAsync(() => {
+            const formattedStrategy = new FormattedValuesFilteringStrategy(['ProductName']);
+            grid.filterStrategy = formattedStrategy;
+            const anotherFieldFormatter = (value: any, rowData: any) => rowData.ID + ':' + value;
+            grid.columns[1].formatter = anotherFieldFormatter;
+            fix.detectChanges();
+
+            GridFunctions.clickFilterCellChipUI(fix, 'ProductName');
+            fix.detectChanges();
+
+            GridFunctions.typeValueInFilterRowInput('1:', fix);
+            tick(DEBOUNCETIME);
+            GridFunctions.closeFilterRow(fix);
+            fix.detectChanges();
+
+            const rows = GridFunctions.getRows(fix);
+            expect(rows.length).toEqual(1);
+        }));
+
         it('Should remove pending chip via its close button #9333', fakeAsync(() => {
             GridFunctions.clickFilterCellChipUI(fix, 'Downloads');
             fix.detectChanges();
@@ -3860,6 +3879,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             scrollbar.scrollTop = displayContainer.getBoundingClientRect().height / 2;
             await wait(200);
             fix.detectChanges();
+            await wait(100);
 
             // Type string in search box
             const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);