Merge branch 'master' into mkirova/fix-grid-overlay-position

Author: dkamburov

CHANGELOG.md

@@ -48,7 +48,7 @@ All notable changes for each version of this project will be documented in this
     - `cellEditExit` is a new event that fires when cell exits edit mode
     - `rowEditExit` is a new event that fires when row exits edit mode
     - Added *getRowData(rowSelector)* method that returns an object that represents the data that is contained in the specified row component.
-    - Added ability to spawn row adding UI through exoposed methods. Note that rowEditing should be enabled.
+    - Added ability to spawn row adding UI through exposed methods. Note that rowEditing should be enabled.
         - `beginAddRow` method which starts the adding row UI.
         - `beginAddChild` method which starts the adding child UI.
         ```typescript
@@ -63,6 +63,22 @@ All notable changes for each version of this project will be documented in this
             </igx-action-strip>
         </igx-tree-grid>
         ```
+    - A new `locale` and `pipeArgs` parameters are introduced in the `operate` method exposed by the `IgxNumberSummaryOperand` and `IgxDateSummaryOperand`, which exposes the grid locale. Use the `locale` parameter to get localized summary data (as per the grid locale. If not passed, `locale` defaults to `'en-US'`). Use the `pipeArgs` parameter only if you want to customize the format of the date and numeric values that will be returned.
+    ```typescript
+    class MySummary extends IgxDateSummaryOperand {
+        operate(columnData: any[], allData = [], fieldName, locale: string, pipeArgs: IColumnPipeArgs): IgxSummaryResult[] {
+            const pipeArgs: IColumnPipeArgs = {
+                format: 'longDate',
+                timezone: 'UTC',
+                digitsInfo: '1.1-2'
+            }
+            const result = super.operate(columnData, allData, fieldName, locale, pipeArgs);
+            return result;
+        }
+    }
+    ```  
+    - A new `pipeArgs` input property is exposed by the `IgxColumnComponent`, which is used to pass arguments to the Angular `DatePipe` and `DecimalPipe`, to format the display for date and numeric columns.
+    ```typescript
 - ` IGX_INPUT_GROUP_TYPE` injection token
     - Allows for setting an input group `type` on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a `type`.
 - ` IgxExcelExporterService`

projects/igniteui-angular/src/lib/combo/README.md

@@ -336,9 +336,9 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 | `onSearchInput`     | Emitted when an the search input's input event is triggered             | true        | { searchValue: `string` }               |
 | `onAddition`        | Emitted when an item is being added to the data collection              | false        | { oldCollection: `any[]`, addedItem: `<any>`, newCollection: `any[]` }|
 | `onDataPreLoad`     | Emitted when new chunk of data is loaded from the virtualization        | false        | { event: `Event` }                        |
-| `onOpening`   | Emitted before the dropdown is opened                                   | false        | { event: `Event` }                        |
+| `onOpening`   | Emitted before the dropdown is opened                                   | false        | `IBaseCancelableBrowserEventArgs` |
 | `onOpened`    | Emitted after the dropdown is opened                                    | false        | { event: `Event` }                        |
-| `onClosing`   | Emitted before the dropdown is closed                                   | false        | { event: `Event` }                        |
+| `onClosing`   | Emitted before the dropdown is closed                                   | false        | `IBaseCancelableBrowserEventArgs` |
 | `onClosed`    | Emitted after the dropdown is closed                                    | false        | { event: `Event` }                        |
 
 ### Methods

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -19,6 +19,7 @@ import { DisplayDensity } from '../core/density';
 import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/public_api';
 import { IgxSelectionAPIService } from '../core/selection';
 import { IgxIconService } from '../icon/public_api';
+import { IBaseCancelableBrowserEventArgs } from '../core/utils';
 
 const CSS_CLASS_COMBO = 'igx-combo';
 const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -282,6 +283,45 @@ describe('igxCombo', () => {
             combo.selectItems([], true);
             expect(combo.selectedItems()).toEqual([]);
         });
+        it('should emit owner on `onOpening` and `onClosing`', () => {
+            combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService,
+                mockIconService, null, null, mockInjector);
+            spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
+            combo.ngOnInit();
+            spyOn(combo.onOpening, 'emit').and.callThrough();
+            spyOn(combo.onClosing, 'emit').and.callThrough();
+            const mockObj = {};
+            const inputEvent: IBaseCancelableBrowserEventArgs = {
+                cancel: false,
+                owner: mockObj,
+            };
+            combo.comboInput = <any>{
+                nativeElement: {
+                    focus: () => {}
+                }
+            };
+            combo.handleOpening(inputEvent);
+            const expectedCall: IBaseCancelableBrowserEventArgs = Object.assign({}, inputEvent, { owner: combo });
+            expect(combo.onOpening.emit).toHaveBeenCalledWith(expectedCall);
+            expect(inputEvent.owner).toEqual(mockObj);
+            combo.handleClosing(inputEvent);
+            expect(combo.onClosing.emit).toHaveBeenCalledWith(expectedCall);
+            expect(inputEvent.owner).toEqual(mockObj);
+            let sub = combo.onOpening.subscribe((e: IBaseCancelableBrowserEventArgs) => {
+                e.cancel = true;
+            });
+            combo.handleOpening(inputEvent);
+            expect(inputEvent.cancel).toEqual(true);
+            sub.unsubscribe();
+            inputEvent.cancel = false;
+
+            sub = combo.onClosing.subscribe((e: IBaseCancelableBrowserEventArgs) => {
+                e.cancel = true;
+            });
+            combo.handleClosing(inputEvent);
+            expect(inputEvent.cancel).toEqual(true);
+            sub.unsubscribe();
+        });
         it('should fire onSelectionChange event on item selection', () => {
             const selectionService = new IgxSelectionAPIService();
             combo = new IgxComboComponent(elementRef, mockCdr, selectionService, mockComboService,
@@ -299,12 +339,13 @@ describe('igxCombo', () => {
 
             combo.selectItems(newSelection);
             expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(1);
-            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
+            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
                 oldSelection: oldSelection,
                 newSelection: newSelection,
                 added: newSelection,
                 removed: [],
                 event: undefined,
+                owner: combo,
                 displayText: `${newSelection.join(', ')}`,
                 cancel: false
             });
@@ -314,12 +355,13 @@ describe('igxCombo', () => {
             oldSelection = [...newSelection];
             newSelection.push(newItem);
             expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(2);
-            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
+            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
                 oldSelection: oldSelection,
                 newSelection: newSelection,
                 removed: [],
                 added: [combo.data[3]],
                 event: undefined,
+                owner: combo,
                 displayText: `${newSelection.join(', ')}`,
                 cancel: false
             });
@@ -328,12 +370,13 @@ describe('igxCombo', () => {
             newSelection = [combo.data[0]];
             combo.selectItems(newSelection, true);
             expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(3);
-            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
+            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
                 oldSelection: oldSelection,
                 newSelection: newSelection,
                 removed: oldSelection,
                 added: newSelection,
                 event: undefined,
+                owner: combo,
                 displayText: `${newSelection.join(', ')}`,
                 cancel: false
             });
@@ -344,12 +387,13 @@ describe('igxCombo', () => {
             combo.deselectItems([newItem]);
             expect(combo.selectedItems().length).toEqual(0);
             expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(4);
-            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
+            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
                 oldSelection: oldSelection,
                 newSelection: newSelection,
                 removed: [combo.data[0]],
                 added: [],
                 event: undefined,
+                owner: combo,
                 displayText: `${newSelection.join(', ')}`,
                 cancel: false
             });
@@ -372,6 +416,7 @@ describe('igxCombo', () => {
                 added: [combo.data[0][combo.valueKey]],
                 removed: [],
                 event: undefined,
+                owner: combo,
                 displayText: `${combo.data[0][combo.displayKey]}`,
                 cancel: false
             };
@@ -408,6 +453,7 @@ describe('igxCombo', () => {
                 added: newSelection.map(e => e[combo.valueKey]),
                 removed: [],
                 event: undefined,
+                owner: combo,
                 displayText: `${newSelection.map(entry => entry[combo.displayKey]).join(', ')}`,
                 cancel: false
             };
@@ -472,11 +518,12 @@ describe('igxCombo', () => {
             combo.selectAllItems(true);
             expect(combo.selectedItems()).toEqual(data);
             expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(1);
-            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
+            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
                 oldSelection: [],
                 newSelection: data,
                 added: data,
                 removed: [],
+                owner: combo,
                 event: undefined,
                 displayText: `${combo.data.join(', ')}`,
                 cancel: false
@@ -485,11 +532,12 @@ describe('igxCombo', () => {
             combo.deselectAllItems(true);
             expect(combo.selectedItems()).toEqual([]);
             expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(2);
-            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({
+            expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(<IComboSelectionChangeEventArgs>{
                 oldSelection: data,
                 newSelection: [],
                 added: [],
                 removed: data,
+                owner: combo,
                 event: undefined,
                 displayText: '',
                 cancel: false
@@ -1879,12 +1927,13 @@ describe('igxCombo', () => {
             expect(selectedItem_1.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
             expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(1);
             expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(
-                {
+                <IComboSelectionChangeEventArgs>{
                     newSelection: [selectedItem_1.value[combo.valueKey]],
                     oldSelection: [],
                     added: [selectedItem_1.value[combo.valueKey]],
                     removed: [],
                     event: UIInteractions.getMouseEvent('click'),
+                    owner: combo,
                     displayText: selectedItem_1.value[combo.valueKey],
                     cancel: false
                 });
@@ -1896,12 +1945,13 @@ describe('igxCombo', () => {
             expect(selectedItem_2.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeTruthy();
             expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(2);
             expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(
-                {
+                <IComboSelectionChangeEventArgs>{
                     newSelection: [selectedItem_1.value[combo.valueKey], selectedItem_2.value[combo.valueKey]],
                     oldSelection: [selectedItem_1.value[combo.valueKey]],
                     added: [selectedItem_2.value[combo.valueKey]],
                     removed: [],
                     event: UIInteractions.getMouseEvent('click'),
+                    owner: combo,
                     displayText: selectedItem_1.value[combo.valueKey] + ', ' + selectedItem_2.value[combo.valueKey],
                     cancel: false
                 });
@@ -1914,12 +1964,13 @@ describe('igxCombo', () => {
             expect(unselectedItem.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeFalsy();
             expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(3);
             expect(combo.onSelectionChange.emit).toHaveBeenCalledWith(
-                {
+                <IComboSelectionChangeEventArgs>{
                     newSelection: [selectedItem_2.value[combo.valueKey]],
                     oldSelection: [selectedItem_1.value[combo.valueKey], selectedItem_2.value[combo.valueKey]],
                     added: [],
                     removed: [unselectedItem.value[combo.valueKey]],
                     event: UIInteractions.getMouseEvent('click'),
+                    owner: combo,
                     displayText: selectedItem_2.value[combo.valueKey],
                     cancel: false
                 });

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

@@ -16,7 +16,7 @@ import {
 import { FormsModule, ReactiveFormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl } from '@angular/forms';
 import { IgxCheckboxModule } from '../checkbox/checkbox.component';
 import { IgxSelectionAPIService } from '../core/selection';
-import { cloneArray, CancelableEventArgs, CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
+import { cloneArray, IBaseEventArgs, IBaseCancelableBrowserEventArgs, IBaseCancelableEventArgs } from '../core/utils';
 import { IgxStringFilteringOperand, IgxBooleanFilteringOperand } from '../data-operations/filtering-condition';
 import { FilteringLogic } from '../data-operations/filtering-expression.interface';
 import { IgxForOfModule, IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
@@ -89,7 +89,7 @@ export interface IComboFilteringOptions {
 }
 
 /** Event emitted when an igx-combo's selection is changing */
-export interface IComboSelectionChangeEventArgs extends CancelableEventArgs, IBaseEventArgs {
+export interface IComboSelectionChangeEventArgs extends IBaseCancelableEventArgs {
     /** An array containing the values that are currently selected */
     oldSelection: any[];
     /** An array containing the values that will be selected after this event */
@@ -105,7 +105,7 @@ export interface IComboSelectionChangeEventArgs extends CancelableEventArgs, IBa
 }
 
 /** Event emitted when the igx-combo's search input changes */
-export interface IComboSearchInputEventArgs extends CancelableEventArgs, IBaseEventArgs {
+export interface IComboSearchInputEventArgs extends IBaseCancelableEventArgs {
     /** The text that has been typed into the search input */
     searchText: string;
 }
@@ -453,7 +453,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Output()
-    public onOpening = new EventEmitter<CancelableEventArgs & IBaseEventArgs>();
+    public onOpening = new EventEmitter<IBaseCancelableBrowserEventArgs>();
 
     /**
      * Emitted after the dropdown is opened
@@ -473,7 +473,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Output()
-    public onClosing = new EventEmitter<CancelableBrowserEventArgs & IBaseEventArgs>();
+    public onClosing = new EventEmitter<IBaseCancelableBrowserEventArgs>();
 
     /**
      * Emitted after the dropdown is closed
@@ -513,7 +513,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Output()
-    public onDataPreLoad = new EventEmitter<any>();
+    public onDataPreLoad = new EventEmitter<IForOfState>();
 
     /**
      * Gets/gets combo id.
@@ -1145,7 +1145,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
         const newCollection = [...this.data];
         newCollection.push(addedItem);
         const args: IComboItemAdditionEvent = {
-            oldCollection, addedItem, newCollection
+            oldCollection, addedItem, newCollection, owner: this
         };
         this.onAddition.emit(args);
         this.data.push(addedItem);
@@ -1238,8 +1238,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
             this.manageRequiredAsterisk();
             this.cdr.detectChanges();
         }
-        this.virtDir.onChunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e) => {
-            this.onDataPreLoad.emit(e);
+        this.virtDir.onChunkPreload.pipe(takeUntil(this.destroy$)).subscribe((e: IForOfState) => {
+            const eventArgs: IForOfState = Object.assign({}, e, { owner: this });
+            this.onDataPreLoad.emit(eventArgs);
         });
     }
 
@@ -1489,6 +1490,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
             added,
             removed,
             event,
+            owner: this,
             displayText,
             cancel: false
         };
@@ -1549,11 +1551,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * @hidden
      * @internal
      */
-    public handleOpening(event: CancelableEventArgs) {
-        this.onOpening.emit(event);
-        if (event.cancel) {
-            return;
-        }
+    public handleOpening(event: IBaseCancelableBrowserEventArgs) {
+        const eventArgs: IBaseCancelableBrowserEventArgs = Object.assign({}, event, { owner: this });
+        this.onOpening.emit(eventArgs);
+        event.cancel = eventArgs.cancel;
     }
 
     /**
@@ -1576,8 +1577,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     /**
      * @hidden @internal
      */
-    public handleClosing(event) {
-        this.onClosing.emit(event);
+    public handleClosing(event: IBaseCancelableBrowserEventArgs) {
+        const eventArgs: IBaseCancelableBrowserEventArgs = Object.assign({}, event, { owner: this });
+        this.onClosing.emit(eventArgs);
+        event.cancel = eventArgs.cancel;
         if (event.cancel) {
             return;
         }

projects/igniteui-angular/src/lib/core/utils.ts

@@ -305,6 +305,10 @@ export interface CancelableBrowserEventArgs extends CancelableEventArgs {
     event?: Event;
 }
 
+export interface IBaseCancelableBrowserEventArgs extends CancelableBrowserEventArgs, IBaseEventArgs {}
+
+export interface IBaseCancelableEventArgs extends CancelableEventArgs, IBaseEventArgs {}
+
 export const HORIZONTAL_NAV_KEYS = new Set(['arrowleft', 'left', 'arrowright', 'right', 'home', 'end']);
 
 export const NAVIGATION_KEYS = new Set([