Merge branch 'master' into nalipiev/schematics

Author: Lipata

projects/igniteui-angular/migrations/update-15_1_0/index.spec.ts

@@ -218,6 +218,36 @@ describe(`Update to ${version}`, () => {
         );
     });
 
+    it('shouldn\'t append igxStart and igxEnd directives to the child elements of the igx-card-actions if already applied', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <igx-card-actions>
+            <span igxButton igxStart>Span</span>
+            <button igxButton igxStart>Button</button>
+            <button igxButton="icon" igxEnd>
+                <igx-icon>favorite</igx-icon>
+            </button>
+            <igx-icon igxEnd>drag_indicator</igx-icon>
+        </igx-card-actions>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <igx-card-actions>
+            <span igxButton igxStart>Span</span>
+            <button igxButton igxStart>Button</button>
+            <button igxButton="icon" igxEnd>
+                <igx-icon>favorite</igx-icon>
+            </button>
+            <igx-icon igxEnd>drag_indicator</igx-icon>
+        </igx-card-actions>
+        `
+        );
+    });
+
     it('should rename the $size property to the $scrollbar-size', async () => {
         appTree.create(
             `/testSrc/appPrefix/component/test.component.scss`,

projects/igniteui-angular/migrations/update-15_1_0/index.ts

@@ -20,7 +20,7 @@ export default (options: Options): Rule => async (host: Tree, context: Schematic
     const CARD_ACTIONS = ['igx-card-actions'];
     const prop = ['igxButton'];
     const changes = new Map<string, FileChange[]>();
-    
+
     const applyChanges = () => {
       for (const [path, change] of changes.entries()) {
         let buffer = host.read(path).toString();
@@ -57,25 +57,34 @@ export default (options: Options): Rule => async (host: Tree, context: Schematic
             const icons: any[] = [];
             getChildren(card_action_elem, buttons, icons);
 
-            icons.map(node =>getSourceOffset(node as Element))
+            icons.map(node => getSourceOffset(node as Element))
             .forEach(offset => {
-                const { startTag, file } = offset;
-                addChange(file.url, new FileChange(startTag.end - 1, ' igxEnd'));
+                const { startTag, file, node } = offset;
+                const end = getAttribute(node, 'igxEnd')[0];
+
+                if (!end) {
+                    addChange(file.url, new FileChange(startTag.end - 1, ' igxEnd'));
+                }
             })
-        
+
             buttons.map(node => getSourceOffset(node as Element))
             .forEach(offset => {
                 const { startTag, file, node } = offset;
                 const { value } = getAttribute(node, prop)[0];
-                if (value === 'icon') {
-                  addChange(file.url, new FileChange(startTag.end - 1, ' igxEnd'));
-                } else {
+                const start = getAttribute(node, 'igxStart')[0];
+                const end = getAttribute(node, 'igxEnd')[0];
+
+                if (!start && value !== 'icon') {
                   addChange(file.url, new FileChange(startTag.end - 1, ' igxStart'));
                 }
+
+                if (!end && value === 'icon') {
+                  addChange(file.url, new FileChange(startTag.end - 1, ' igxEnd'));
+                }
             });
         });
     }
-    
+
     update.shouldInvokeLS = options['shouldInvokeLS'];
     update.addValueTransform('roundShape_is_deprecated', (args: BoundPropertyObject): void => {
         args.bindingType = InputPropertyType.STRING;

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

@@ -177,7 +177,6 @@ import { IgxGridValidationService } from './grid/grid-validation.service';
 let FAKE_ROW_ID = -1;
 const DEFAULT_ITEMS_PER_PAGE = 15;
 const MINIMUM_COLUMN_WIDTH = 136;
-const FILTER_ROW_HEIGHT = 50;
 // By default row editing overlay outlet is inside grid body so that overlay is hidden below grid header when scrolling.
 // In cases when grid has 1-2 rows there isn't enough space in grid body and row editing overlay should be shown above header.
 // Default row editing overlay height is higher then row height that is why the case is valid also for row with 2 rows.
@@ -6643,10 +6642,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     protected calcGridHeadRow() {
         if (this.maxLevelHeaderDepth) {
             this._baseFontSize = parseFloat(getComputedStyle(this.document.documentElement).getPropertyValue('font-size'));
-            let minSize = (this.maxLevelHeaderDepth + 1) * this.defaultRowHeight / this._baseFontSize;
-            if (this._allowFiltering && this._filterMode === FilterMode.quickFilter) {
-                minSize += (FILTER_ROW_HEIGHT + 1) / this._baseFontSize;
-            }
+            const hasFilterRow = this._allowFiltering && this._filterMode === FilterMode.quickFilter;
+            const minSize = (this.maxLevelHeaderDepth + 1 + (hasFilterRow ? 1 : 0)) * this.defaultRowHeight / this._baseFontSize;
             this.theadRow.nativeElement.style.minHeight = `${minSize}rem`;
         }
     }

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

@@ -2535,6 +2535,23 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
         }));
 
         // Filtering + Column Groups
+        it('should size correctly the header based on display density.', () => {
+            grid.displayDensity = "comfortable";
+            fix.detectChanges();
+
+            const thead = GridFunctions.getGridHeader(grid).nativeElement;
+            expect(thead.getBoundingClientRect().height).toEqual(grid.defaultRowHeight * 4 + 1);
+
+            grid.displayDensity = "cosy";
+            fix.detectChanges();
+            expect(thead.getBoundingClientRect().height).toEqual(grid.defaultRowHeight * 4 + 1);
+
+            grid.displayDensity = "compact";
+            fix.detectChanges();
+            expect(thead.getBoundingClientRect().height).toEqual(grid.defaultRowHeight * 4 + 1);
+
+        });
+
         it('should position filter row correctly when grid has column groups.', fakeAsync(() => {
             const thead = GridFunctions.getGridHeader(grid).nativeElement;
 

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts

@@ -7,6 +7,8 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxActionStripComponent } from '../../action-strip/public_api';
 import { IgxTreeGridRowComponent } from './tree-grid-row.component';
+import { first } from 'rxjs/operators';
+import { IGridEditEventArgs } from '../public_api';
 
 describe('IgxTreeGrid - Add Row UI #tGrid', () => {
     configureTestSuite();
@@ -192,5 +194,28 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => {
             treeGrid.gridAPI.crudService.endEdit(true);
             fix.detectChanges();
         });
+
+        it('should have correct foreignKey value for the data record in rowAdd event arguments', () => {
+            let newRowId = null;
+            treeGrid.rowAdd.pipe(first()).subscribe((args: IGridEditEventArgs) => {
+                expect(args.newValue[treeGrid.foreignKey]).toBe(2);
+                expect(args.rowData[treeGrid.foreignKey]).toBe(2);
+                newRowId = args.newValue[treeGrid.primaryKey];
+            });
+
+            treeGrid.beginAddRowById(2, true);
+            fix.detectChanges();
+            endTransition();
+
+            const addRow = treeGrid.gridAPI.get_row_by_index(2);
+            expect(addRow.addRowUI).toBeTrue();
+
+            treeGrid.gridAPI.crudService.endEdit(true);
+            fix.detectChanges();
+
+            expect(treeGrid.rowList.length).toBe(9);
+            const addedRow = treeGrid.getRowByKey(newRowId);
+            expect(addedRow.data[treeGrid.foreignKey]).toBe(2);
+        });
     });
 });

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts

@@ -711,7 +711,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
         Object.keys(row.data).forEach(key => {
             // persist foreign key if one is set.
             if (this.foreignKey && key === this.foreignKey) {
-                row.data[key] = treeRowRec.data[key];
+                row.data[key] = treeRowRec.data[this.crudService.addRowParent?.asChild ? this.primaryKey : key];
             } else {
                 row.data[key] = undefined;
             }

src/app/grid-column-groups/grid-column-groups.sample.css

@@ -0,0 +1,4 @@
+.density-chooser {
+    margin-bottom: 16px;
+    min-width: 900px;
+}

src/app/grid-column-groups/grid-column-groups.sample.html

@@ -1,8 +1,11 @@
 <section class="sample-content">
+    <div class="density-chooser">
+        <igx-buttongroup [values]="displayDensities" (selected)="selectDensity($event)"></igx-buttongroup>
+    </div>
     <ng-template igxCollapsibleIndicator let-column="column" #ind >
         <igx-icon [attr.draggable]="false">{{column.expanded ? 'remove' : 'add'}} </igx-icon>
     </ng-template>
-    <igx-grid [allowFiltering]="true" [moving]="true" [pinning]="pinningConfig" [rowSelection]="selectionMode" #grid [data]="data" displayDensity="compact">
+    <igx-grid [displayDensity]="density" [allowFiltering]="true" [moving]="true" [pinning]="pinningConfig" [rowSelection]="selectionMode" #grid [data]="data" displayDensity="compact">
         <igx-grid-toolbar [displayDensity]="grid.displayDensity">
             <igx-grid-toolbar-actions>
                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>

src/app/grid-column-groups/grid-column-groups.sample.ts

@@ -12,6 +12,7 @@ import { IgxGridComponent } from '../../../projects/igniteui-angular/src/lib/gri
 import { IgxIconComponent } from '../../../projects/igniteui-angular/src/lib/icon/icon.component';
 import { IgxCollapsibleIndicatorTemplateDirective } from '../../../projects/igniteui-angular/src/lib/grids/columns/templates.directive';
 import { ColumnPinningPosition, GridSelectionMode } from '../../../projects/igniteui-angular/src/lib/grids/common/enums';
+import { DisplayDensity } from '../../../projects/igniteui-angular/src/lib/core/density';
 
 @Component({
     selector: 'app-grid-column-groups-sample',
@@ -61,12 +62,19 @@ export class GridColumnGroupsSampleComponent {
     ];
     /* eslint-enable max-len */
 
+    public density: string = DisplayDensity.compact;
+    public displayDensities;
 
     constructor() {
         for (const item of this.data) {
             item.FullAddress = `${item.Address}, ${item.City}, ${item.Country}`;
         }
         this.selectionMode = GridSelectionMode.none;
+        this.displayDensities = [
+            { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
+            { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+            { label: 'compact', selected: this.density === 'compact', togglable: true }
+        ];
     }
 
     public pinGroup() {
@@ -110,4 +118,8 @@ export class GridColumnGroupsSampleComponent {
 
         this.columnGroupStates.set(columnGroup, !this.columnGroupStates.get(columnGroup));
     }
+
+    public selectDensity(event) {
+        this.density = this.displayDensities[event.index].label;
+    }
 }