Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into rkaraivanov/grids-spa-and-wellbeing

Author: rkaraivanov

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes for each version of this project will be documented in this
 ## 12.1.0
 
 ### New Features
+- `igxGrid`
+    - New `additionalTemplateContext` column input:
+
+    ```html
+    <igx-column [additionalTemplateContext]="contextObject">
+      <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
+         {{ props }}
+      </ng-template>
+    </igx-column>
+    ```
 - `Toolbar Actions`
     - Exposed a new input property `overlaySettings` for all column actions (`hiding` | `pinning` | `advanced filtering` | `exporter`). Example below:
 

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

@@ -234,7 +234,7 @@ export class IgxSorting implements IGridSortingStrategy {
 
 export class IgxDataRecordSorting extends IgxSorting {
 
-    protected getFieldValue(obj: any, key: string, isDate: boolean = false): any {
-        return isDate ? parseDate(resolveNestedPath(obj.data, key)) : resolveNestedPath(obj.data, key);
+    protected getFieldValue(obj: any, key: string, isDate: boolean = false, isTime: boolean = false): any {
+        return super.getFieldValue(obj.data, key, isDate, isTime);
     }
 }

projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts

@@ -198,6 +198,39 @@ describe('igxExpansionPanel', () => {
             expect(panel.contentCollapsed.emit).toHaveBeenCalledTimes(1);
         }));
 
+        it('Should expand/collapse without animation when animationSettings === null', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxExpansionPanelSampleComponent);
+            fixture.detectChanges();
+            const panel = fixture.componentInstance.panel;
+            panel.animationSettings = null;
+            expect(panel).toBeTruthy();
+
+            spyOn(panel.contentCollapsed, 'emit');
+            spyOn(panel.contentExpanded, 'emit');
+            spyOn(panel.contentCollapsing, 'emit');
+            spyOn(panel.contentExpanding, 'emit');
+
+            panel.toggle();
+            tick();
+            fixture.detectChanges();
+            expect(panel.contentCollapsed.emit).toHaveBeenCalledTimes(0); // Initially collapsed
+            expect(panel.contentCollapsing.emit).toHaveBeenCalledTimes(0);
+            expect(panel.contentExpanded.emit).toHaveBeenCalledTimes(1);
+            expect(panel.contentExpanding.emit).toHaveBeenCalledTimes(1);
+            expect(panel.contentExpanding.emit).toHaveBeenCalledBefore(panel.contentExpanded.emit);
+            expect(panel.collapsed).toBeFalsy();
+
+            panel.toggle();
+            tick();
+            fixture.detectChanges();
+            expect(panel.contentCollapsed.emit).toHaveBeenCalledTimes(1);
+            expect(panel.contentCollapsing.emit).toHaveBeenCalledTimes(1);
+            expect(panel.contentExpanded.emit).toHaveBeenCalledTimes(1);
+            expect(panel.contentExpanding.emit).toHaveBeenCalledTimes(1);
+            expect(panel.contentCollapsing.emit).toHaveBeenCalledBefore(panel.contentCollapsed.emit);
+            expect(panel.collapsed).toBeTruthy();
+        }));
+
         it('Should allow expanding and collapsing events to be cancelled', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxExpansionPanelSampleComponent);
             fixture.detectChanges();

projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.spec.ts

@@ -2,6 +2,7 @@ import { AnimationBuilder } from '@angular/animations';
 import { TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { noop } from 'rxjs';
+import { growVerIn, growVerOut } from '../animations/main';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { ToggleAnimationPlayer ,ANIMATION_TYPE } from './toggle-animation-component';
 
@@ -40,5 +41,43 @@ describe('Toggle animation component', () => {
             player.playCloseAnimation(null, mockCB);
             expect(startPlayerSpy).toHaveBeenCalledWith(ANIMATION_TYPE.CLOSE, null, mockCB);
         });
+
+        it('Should allow overwriting animation setting with falsy value', () => {
+            const player = new MockTogglePlayer(mockBuilder);
+            expect(player.animationSettings).toEqual({
+                openAnimation: growVerIn,
+                closeAnimation: growVerOut
+            });
+            player.animationSettings = null;
+            expect(player.animationSettings).toEqual(null);
+        });
+
+        it('Should not throw if called with a falsy animationSettings value', () => {
+            const player = new MockTogglePlayer(mockBuilder);
+            player.animationSettings = null;
+            const mockCb = jasmine.createSpy('mockCb');
+            const mockElement = jasmine.createSpy('element');
+            spyOn(player.openAnimationStart, 'emit');
+            spyOn(player.openAnimationDone, 'emit');
+            spyOn(player.closeAnimationStart, 'emit');
+            spyOn(player.closeAnimationDone, 'emit');
+
+            player.playOpenAnimation({ nativeElement: mockElement }, mockCb);
+            expect(player.openAnimationStart.emit).toHaveBeenCalledTimes(1);
+            expect(player.openAnimationDone.emit).toHaveBeenCalledTimes(1);
+            expect(player.closeAnimationStart.emit).toHaveBeenCalledTimes(0);
+            expect(player.closeAnimationDone.emit).toHaveBeenCalledTimes(0);
+            expect(player.openAnimationStart.emit).toHaveBeenCalledBefore(player.openAnimationDone.emit);
+            expect(mockCb).toHaveBeenCalledTimes(1);
+
+            player.playCloseAnimation({ nativeElement: mockElement }, mockCb);
+            expect(player.openAnimationStart.emit).toHaveBeenCalledTimes(1);
+            expect(player.openAnimationDone.emit).toHaveBeenCalledTimes(1);
+            expect(player.closeAnimationStart.emit).toHaveBeenCalledTimes(1);
+            expect(player.closeAnimationDone.emit).toHaveBeenCalledTimes(1);
+            expect(player.closeAnimationStart.emit).toHaveBeenCalledBefore(player.closeAnimationDone.emit);
+
+            expect(mockCb).toHaveBeenCalledTimes(2);
+        });
     });
 });

projects/igniteui-angular/src/lib/expansion-panel/toggle-animation-component.ts

@@ -99,19 +99,33 @@ export abstract class ToggleAnimationPlayer implements ToggleAnimationOwner, OnD
             target = this.initializePlayer(type, targetElement, callback);
         }
 
-        if (target.hasStarted()) {
+        // V.S. Jun 28th, 2021 #9783: player will NOT be initialized w/ null settings
+        // events will already be emitted
+        if (!target || target.hasStarted()) {
             return;
         }
 
         const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationStart : this.closeAnimationStart;
         targetEmitter.emit();
-        target.play();
+        if (target) {
+            target.play();
+        }
     }
 
     private initializePlayer(type: ANIMATION_TYPE, targetElement: ElementRef, callback: () => void): AnimationPlayer {
         const oppositeType = type === ANIMATION_TYPE.OPEN ? ANIMATION_TYPE.CLOSE : ANIMATION_TYPE.OPEN;
+        // V.S. Jun 28th, 2021 #9783: Treat falsy animation settings as disabled animations
+        const targetAnimationSettings = this.animationSettings || { closeAnimation: null, openAnimation: null };
         const animationSettings = type === ANIMATION_TYPE.OPEN ?
-        this.animationSettings.openAnimation : this.animationSettings.closeAnimation;
+            targetAnimationSettings.openAnimation : targetAnimationSettings.closeAnimation;
+        // V.S. Jun 28th, 2021 #9783: When no animation in target direction, emit start and done events and return
+        if (!animationSettings) {
+            this.setCallback(type, callback);
+            const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationStart : this.closeAnimationStart;
+            targetEmitter.emit();
+            this.onDoneHandler(type);
+            return;
+        }
         const animation = useAnimation(animationSettings);
         const animationBuilder = this.builder.build(animation);
         const opposite = this.getPlayer(oppositeType);
@@ -132,23 +146,31 @@ export abstract class ToggleAnimationPlayer implements ToggleAnimationOwner, OnD
         const target = this.getPlayer(type);
         target.init();
         this.getPlayer(type).setPosition(1 - oppositePosition);
+        this.setCallback(type, callback);
+        target.onDone(() => {
+            this.onDoneHandler(type);
+        });
+        return target;
+    }
+
+    private onDoneHandler(type) {
+        const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationDone : this.closeAnimationDone;
+        const targetCallback = type === ANIMATION_TYPE.OPEN ? this.onOpenedCallback : this.onClosedCallback;
+        targetCallback();
+        if (!(type === ANIMATION_TYPE.OPEN ? this.openInterrupted : this.closeInterrupted)) {
+            targetEmitter.emit();
+        }
+        this.cleanUpPlayer(type);
+    }
+
+    private setCallback(type: ANIMATION_TYPE, callback: () => void) {
         if (type === ANIMATION_TYPE.OPEN) {
             this.onOpenedCallback = callback;
             this.openInterrupted = false;
         } else if (type === ANIMATION_TYPE.CLOSE) {
             this.onClosedCallback = callback;
             this.closeInterrupted = false;
         }
-        const targetEmitter = type === ANIMATION_TYPE.OPEN ? this.openAnimationDone : this.closeAnimationDone;
-        target.onDone(() => {
-            const targetCallback = type === ANIMATION_TYPE.OPEN ? this.onOpenedCallback : this.onClosedCallback;
-            targetCallback();
-            if (!(type === ANIMATION_TYPE.OPEN ? this.openInterrupted : this.closeInterrupted)) {
-                targetEmitter.emit();
-            }
-            this.cleanUpPlayer(type);
-        });
-        return target;
     }
 
 

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

@@ -165,7 +165,8 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     public get context(): any {
         return {
             $implicit: this.value,
-            cell: this
+            cell: this,
+            additionalTemplateContext: this.column.additionalTemplateContext
         };
     }
 

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -748,6 +748,22 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
     @Input()
     public colStart: number;
 
+    /**
+     * Sets/gets custom properties provided in additional template context.
+     *
+     * ```html
+     * <igx-column [additionalTemplateContext]="contextObject">
+     *   <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
+     *      {{ props }}
+     *   </ng-template>
+     * </igx-column>
+     * ```
+     *
+     * @memberof IgxColumnComponent
+     */
+    @Input()
+    public additionalTemplateContext: any;
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/common/column.interface.ts

@@ -49,5 +49,6 @@ export interface ColumnType {
     hasNestedPath: boolean;
     defaultTimeFormat: string;
     defaultDateTimeFormat: string;
+    additionalTemplateContext: any;
     getGridTemplate(isRow: boolean, isIE: boolean): string;
 }

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -7,8 +7,8 @@ import { ISortingExpression } from '../../data-operations/sorting-expression.int
 import { IGroupingExpression } from '../../data-operations/grouping-expression.interface';
 import { TransactionService, Transaction, State } from '../../services/public_api';
 import { ITreeGridRecord } from '../tree-grid/public_api';
-import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface';
 import { IGroupByRecord } from '../../data-operations/groupby-record.interface';
+import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface';
 
 export interface IGridDataBindable {
     data: any[] | null;
@@ -31,6 +31,7 @@ export interface GridType extends IGridDataBindable {
     id: string;
     renderedRowHeight: number;
     summaryPipeTrigger: number;
+    hasColumnLayouts: boolean;
 
     filterMode: FilterMode;
 
@@ -100,8 +101,9 @@ export interface FlatGridType extends GridType {
     groupingExpressions: IGroupingExpression[];
     groupingExpressionsChange: EventEmitter<IGroupingExpression[]>;
 
-    clearGrouping(field: string): void;
     toggleGroup(groupRow: IGroupByRecord): void;
+    clearGrouping(field: string): void;
+    groupBy(expression: IGroupingExpression | Array<IGroupingExpression>): void;
 }
 
 /**

projects/igniteui-angular/src/lib/grids/grid-common.module.ts

@@ -31,11 +31,14 @@ import { IgxGridFilteringModule } from './filtering/base/filtering.module';
 import { IgxRowDirective } from './row.directive';
 import {
     IgxExcelStyleHeaderIconDirective,
+    IgxGroupAreaDropDirective,
     IgxHeaderCollapseIndicatorDirective,
     IgxHeaderExpandIndicatorDirective,
     IgxRowCollapsedIndicatorDirective,
     IgxRowExpandedIndicatorDirective
 } from './grid/grid.directives';
+import { IgxChipsModule } from '../chips/chips.module';
+import { IgxGroupByMetaPipe } from './grouping/group-by-area.directive';
 /**
  * @hidden
  */
@@ -56,6 +59,8 @@ import {
         IgxHeaderExpandIndicatorDirective,
         IgxHeaderCollapseIndicatorDirective,
         IgxExcelStyleHeaderIconDirective,
+        IgxGroupAreaDropDirective,
+        IgxGroupByMetaPipe
     ],
     entryComponents: [
         IgxAdvancedFilteringDialogComponent
@@ -89,6 +94,8 @@ import {
         IgxHeaderExpandIndicatorDirective,
         IgxHeaderCollapseIndicatorDirective,
         IgxExcelStyleHeaderIconDirective,
+        IgxGroupAreaDropDirective,
+        IgxGroupByMetaPipe
     ],
     imports: [
         IgxGridColumnModule,
@@ -104,7 +111,8 @@ import {
         IgxGridExcelStyleFilteringModule,
         IgxRowDragModule,
         IgxPaginatorModule,
-        IgxGridSharedModules
+        IgxGridSharedModules,
+        IgxChipsModule
     ],
     providers: [
         { provide: IgxGridTransaction, useClass: IgxBaseTransactionService }

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

@@ -34,6 +34,7 @@ describe('IgxGrid - Column properties #grid', () => {
                 ColumnsFromIterableComponent,
                 TemplatedColumnsComponent,
                 TemplatedInputColumnsComponent,
+                TemplatedContextInputColumnsComponent,
                 ColumnCellFormatterComponent,
                 ColumnHaederClassesComponent,
                 ColumnHiddenFromMarkupComponent,
@@ -308,6 +309,20 @@ describe('IgxGrid - Column properties #grid', () => {
 
     });
 
+    it('should support passing properties through the additionalTemplateContext input property', () => {
+        const fixture = TestBed.createComponent(TemplatedContextInputColumnsComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.instance;
+        const contextObject = {property1: 'cellContent', property2: 'cellContent1'};
+        const firstColumn = grid.columns[0];
+        const secondColumn = grid.columns[1];
+
+        expect(firstColumn.additionalTemplateContext).toEqual(contextObject);
+        expect(firstColumn.cells[0].nativeElement.innerText).toEqual(contextObject.property1);
+        expect(secondColumn.cells[0].nativeElement.innerText).toEqual(contextObject.property2);
+    });
+
     it('should apply column\'s formatter programmatically', () => {
         const expectedVal = ['Johny', 'Sally', 'Tim'];
         const expectedValToLower = ['johny', 'sally', 'tim'];
@@ -1133,6 +1148,31 @@ export class TemplatedInputColumnsComponent {
     public columns = Object.keys(this.data[0]);
 }
 
+
+@Component({
+    template: `
+        <igx-grid [data]="data">
+            <igx-column [additionalTemplateContext]="contextObject" field="FirstName">
+                <ng-template igxCell let-cell="cell">
+                    {{ cell.column.additionalTemplateContext.property1 }}
+                </ng-template>
+            </igx-column>
+            <igx-column [additionalTemplateContext]="contextObject">
+                <ng-template igxCell let-cell="cell" let-props="additionalTemplateContext">
+                    {{ props.property2 }}
+                </ng-template>
+            </igx-column>
+        </igx-grid>
+    `
+})
+export class TemplatedContextInputColumnsComponent {
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
+    public instance: IgxGridComponent;
+    public contextObject = {property1: 'cellContent', property2: 'cellContent1'};
+
+    public data = SampleTestData.personNameAgeData();
+}
+
 @Component({
     template: `
         <igx-grid [data]="data" height="500px" width="400px">