Merge branch 'master' into puppeteer

Author: kdinev

.github/workflows/nodejs.yml

@@ -54,6 +54,6 @@ jobs:
             npm run test:i18n:dist
       - name: Publish to coveralls.io
         if: github.repository == 'IgniteUI/igniteui-angular' && matrix.node-version == '16.x'
-        uses: coverallsapp/github-action@v1.1.2
+        uses: coverallsapp/github-action@v1.2.1
         with:
             github-token: ${{ github.token }}

projects/igniteui-angular/src/lib/badge/badge.component.ts

@@ -133,6 +133,24 @@ export class IgxBadgeComponent {
     @HostBinding('class.igx-badge')
     public cssClass = 'igx-badge';
 
+    /**
+     * Sets a square shape to the badge, if `shape` is set to `square`.
+     * By default the shape of the badge is rounded.
+     *
+     * @example
+     * ```html
+     * <igx-badge shape="square"></igx-badge>
+     * ```
+     */
+    @Input()
+    public shape: 'rounded' | 'square' = 'rounded';
+
+    /** @hidden @internal */
+    @HostBinding('class.igx-badge--square')
+    public get _squareShape(): boolean {
+        return this.shape === 'square';
+    }
+
     /**
      * Sets/gets the aria-label attribute value.
      *

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-component.scss

@@ -39,6 +39,10 @@
             @extend %igx-badge--error !optional;
         }
 
+        @include m(square) {
+            @extend %igx-badge--square !optional;
+        }
+
         @include m(hidden) {
             @extend %igx-badge--hidden !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -127,6 +127,10 @@
         }
     }
 
+    %igx-badge--square {
+        border-radius: 0;
+    }
+
     %igx-badge-value {
         white-space: nowrap;
         padding: $badge-value-padding;

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

@@ -4758,8 +4758,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.crudService.endEdit(true);
         this.gridAPI.addRowToData(data);
 
-        this.rowAddedNotifier.next({ data: data, owner: this });
         this.pipeTrigger++;
+        this.rowAddedNotifier.next({ data: data, owner: this });
         this.notifyChanges();
     }
 
@@ -5065,6 +5065,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.crudService.endEdit(true);
         this.selectionService.clearHeaderCBState();
         this.summaryService.clearSummaryCache();
+        this.summaryPipeTrigger++;
         this.cdr.detectChanges();
     }
 

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

@@ -2284,6 +2284,57 @@ describe('IgxGrid - Summaries #grid', () => {
             GridSummaryFunctions.verifyColumnSummaries(summaryRow, 5, ['Count'], ['3']);
         });
 
+        it('CRUD: Adding grouped item via UI should update group summary accordingly', () => {
+            grid.rowEditable = true;
+            fix.detectChanges();
+            const newRow = {
+                ID: 777,
+                ParentID: 17,
+                Name: 'New Employee',
+                HireDate: new Date(2019, 3, 3),
+                Age: 19,
+                OnPTO: true
+            };
+            const rows = grid.rowList.toArray();
+            rows[1].beginAddRow();
+
+            const animationElem = fix.nativeElement.querySelector('.igx-grid__tr--inner');
+            const endEvent = new AnimationEvent('animationend');
+            animationElem.dispatchEvent(endEvent);
+
+            fix.detectChanges();
+
+            let addRow = grid.gridAPI.get_row_by_index(2);
+            expect(addRow.addRowUI).toBeTrue();
+
+            let cell = grid.getCellByColumn(2, 'ParentID');
+            cell.update(newRow.ParentID);
+            cell = grid.getCellByColumn(2, 'Name');
+            cell.update(newRow.Name);
+            cell = grid.getCellByColumn(2, 'HireDate');
+            cell.update(newRow.HireDate);
+            cell = grid.getCellByColumn(2, 'Age');
+            cell.update(newRow.Age);
+            cell = grid.getCellByColumn(2, 'OnPTO');
+            cell.update(newRow.OnPTO);
+
+            fix.detectChanges();
+            grid.endEdit(true);
+
+            fix.detectChanges();
+
+            addRow = grid.gridAPI.get_row_by_index(2);
+            expect(addRow.addRowUI).toBeFalse();
+
+            let summaryRow = GridSummaryFunctions.getSummaryRowByDataRowIndex(fix, 4);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 0, [], []);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 1, ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['3', '17', '17', '51', '17']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 2, ['Count'], ['3']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 3,
+                ['Count', 'Earliest', 'Latest'], ['3', 'Dec 18, 2007', 'Apr 3, 2019']);
+            GridSummaryFunctions.verifyColumnSummaries(summaryRow, 5, ['Count'], ['3']);
+        });
+
         it('CRUD: Add not grouped item', () => {
             const newRow = {
                 ID: 777,

src/app/badge/badge.sample.html

@@ -9,7 +9,7 @@ <h4 class="sample-title">In conjunction with the
 
     <div class="avatar-sample">
         <igx-avatar icon="face" size="medium"></igx-avatar>
-        <igx-badge value="8"></igx-badge>
+        <igx-badge value="8" shape="square"></igx-badge>
     </div>
 
     <div class="avatar-sample">