From de6aa70516edd6b41b9600ee80cdda9e3ebec136 Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Mon, 12 Oct 2020 16:47:01 +0300 Subject: [PATCH 1/5] fix(combo, dropdown): emit owner in opening and closing events, #8326 --- .../src/lib/combo/combo.component.spec.ts | 63 ++++++++++++++++--- .../src/lib/combo/combo.component.ts | 24 ++++--- .../src/lib/drop-down/drop-down.component.ts | 17 +++-- 3 files changed, 80 insertions(+), 24 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 76c2793e630..d5932476a39 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/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 { CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; const CSS_CLASS_COMBO = 'igx-combo'; const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down'; @@ -282,6 +283,39 @@ describe('igxCombo', () => { combo.selectItems([], true); expect(combo.selectedItems()).toEqual([]); }); + it('should emit owner on `onOpened` and `onClosed`', () => { + combo = new IgxComboComponent(elementRef, mockCdr, mockSelection as any, mockComboService, + mockIconService, null, null, mockInjector); + spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null); + combo.ngOnInit(); + spyOn(combo.onOpened, 'emit'); + spyOn(combo.onClosing, 'emit'); + const mockObj = {}; + const inputEvent: CancelableBrowserEventArgs & IBaseEventArgs = { + cancel: false, + owner: mockObj, + }; + combo.handleOpening(inputEvent); + expect(combo.onOpened.emit).toHaveBeenCalledWith(Object.assign({}, inputEvent, { owner: combo })); + expect(inputEvent.owner).toEqual(mockObj); + combo.handleOpening(inputEvent); + expect(combo.onClosing.emit).toHaveBeenCalledWith(Object.assign({}, inputEvent, { owner: combo })); + expect(inputEvent.owner).toEqual(mockObj); + let sub = combo.onOpened.subscribe((e: CancelableBrowserEventArgs & IBaseEventArgs) => { + e.cancel = true; + }); + combo.handleOpening(inputEvent); + expect(inputEvent.cancel).toEqual(true); + sub.unsubscribe(); + inputEvent.cancel = false; + + sub = combo.onClosing.subscribe((e: CancelableBrowserEventArgs & IBaseEventArgs) => { + e.cancel = true; + }); + combo.handleOpening(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 +333,13 @@ describe('igxCombo', () => { combo.selectItems(newSelection); expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(1); - expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({ + expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({ oldSelection: oldSelection, newSelection: newSelection, added: newSelection, removed: [], event: undefined, + owner: combo, displayText: `${newSelection.join(', ')}`, cancel: false }); @@ -314,12 +349,13 @@ describe('igxCombo', () => { oldSelection = [...newSelection]; newSelection.push(newItem); expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(2); - expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({ + expect(combo.onSelectionChange.emit).toHaveBeenCalledWith({ oldSelection: oldSelection, newSelection: newSelection, removed: [], added: [combo.data[3]], event: undefined, + owner: combo, displayText: `${newSelection.join(', ')}`, cancel: false }); @@ -328,12 +364,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({ oldSelection: oldSelection, newSelection: newSelection, removed: oldSelection, added: newSelection, event: undefined, + owner: combo, displayText: `${newSelection.join(', ')}`, cancel: false }); @@ -344,12 +381,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({ oldSelection: oldSelection, newSelection: newSelection, removed: [combo.data[0]], added: [], event: undefined, + owner: combo, displayText: `${newSelection.join(', ')}`, cancel: false }); @@ -372,6 +410,7 @@ describe('igxCombo', () => { added: [combo.data[0][combo.valueKey]], removed: [], event: undefined, + owner: combo, displayText: `${combo.data[0][combo.displayKey]}`, cancel: false }; @@ -408,6 +447,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 +512,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({ oldSelection: [], newSelection: data, added: data, removed: [], + owner: combo, event: undefined, displayText: `${combo.data.join(', ')}`, cancel: false @@ -485,11 +526,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({ oldSelection: data, newSelection: [], added: [], removed: data, + owner: combo, event: undefined, displayText: '', cancel: false @@ -1879,12 +1921,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( - { + { 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 +1939,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( - { + { 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 +1958,13 @@ describe('igxCombo', () => { expect(unselectedItem.element.nativeElement.classList.contains(CSS_CLASS_SELECTED)).toBeFalsy(); expect(combo.onSelectionChange.emit).toHaveBeenCalledTimes(3); expect(combo.onSelectionChange.emit).toHaveBeenCalledWith( - { + { 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 }); diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index 6baf53637be..32c9c837be0 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -453,7 +453,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas * ``` */ @Output() - public onOpening = new EventEmitter(); + public onOpening = new EventEmitter(); /** * Emitted after the dropdown is opened @@ -513,7 +513,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas * ``` */ @Output() - public onDataPreLoad = new EventEmitter(); + public onDataPreLoad = new EventEmitter(); /** * 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,8 +1551,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas * @hidden * @internal */ - public handleOpening(event: CancelableEventArgs) { - this.onOpening.emit(event); + public handleOpening(event: CancelableBrowserEventArgs & IBaseEventArgs) { + const eventArgs: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, event, { owner: this }); + this.onOpening.emit(eventArgs); + event.cancel = eventArgs.cancel; if (event.cancel) { return; } @@ -1576,8 +1580,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas /** * @hidden @internal */ - public handleClosing(event) { - this.onClosing.emit(event); + public handleClosing(event: CancelableBrowserEventArgs & IBaseEventArgs) { + const eventArgs: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, event, { owner: this }); + this.onClosing.emit(eventArgs); + event.cancel = eventArgs.cancel; if (event.cancel) { return; } diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 158134ec74d..9e83642f762 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -23,7 +23,7 @@ import { IgxDropDownBaseDirective } from './drop-down.base'; import { DropDownActionKey, Navigate } from './drop-down.common'; import { IGX_DROPDOWN_BASE, IDropDownBase } from './drop-down.common'; import { ISelectionEventArgs } from './drop-down.common'; -import { CancelableEventArgs, CancelableBrowserEventArgs, isIE, IBaseEventArgs } from '../core/utils'; +import { CancelableBrowserEventArgs, IBaseEventArgs, isIE } from '../core/utils'; import { IgxSelectionAPIService } from '../core/selection'; import { Subject } from 'rxjs'; import { IgxDropDownItemBaseDirective } from './drop-down-item.base'; @@ -81,7 +81,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID * ``` */ @Output() - public onOpening = new EventEmitter(); + public onOpening = new EventEmitter(); /** * Emitted after the dropdown is opened @@ -374,8 +374,11 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID /** * @hidden @internal */ - public onToggleOpening(e: CancelableEventArgs) { - this.onOpening.emit(e); + public onToggleOpening(e: CancelableBrowserEventArgs & IBaseEventArgs) { + // do not mutate passed event args + const eventArgs: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, e, { owner: this }); + this.onOpening.emit(eventArgs); + e.cancel = eventArgs.cancel; if (e.cancel) { return; } @@ -405,8 +408,10 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID /** * @hidden @internal */ - public onToggleClosing(e: CancelableBrowserEventArgs) { - this.onClosing.emit(e); + public onToggleClosing(e: CancelableBrowserEventArgs & IBaseEventArgs) { + const eventArgs: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, e, { owner: this }); + this.onClosing.emit(eventArgs); + e.cancel = eventArgs.cancel; if (this.virtDir) { this._scrollPosition = this.virtDir.scrollPosition; } From c27c3ae0e81e3158e71d9eeb91d74b4be59eb2c6 Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Mon, 12 Oct 2020 16:51:53 +0300 Subject: [PATCH 2/5] docs(combo, dropdown): update README.md --- projects/igniteui-angular/src/lib/combo/README.md | 4 ++-- projects/igniteui-angular/src/lib/drop-down/README.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/README.md b/projects/igniteui-angular/src/lib/combo/README.md index 9069f316fc2..dd49d8cf923 100644 --- a/projects/igniteui-angular/src/lib/combo/README.md +++ b/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: ``, 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 | `CancelableBrowserEventArgs & IBaseEventArgs` | | `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 | `CancelableBrowserEventArgs & IBaseEventArgs` | | `onClosed` | Emitted after the dropdown is closed | false | { event: `Event` } | ### Methods diff --git a/projects/igniteui-angular/src/lib/drop-down/README.md b/projects/igniteui-angular/src/lib/drop-down/README.md index 7288ae653b4..ee747ff5c83 100644 --- a/projects/igniteui-angular/src/lib/drop-down/README.md +++ b/projects/igniteui-angular/src/lib/drop-down/README.md @@ -133,9 +133,9 @@ The following outputs are available in the **igx-drop-down** component: | Name | Cancelable | Description | Parameters | :--- | :--- | :--- | :--- | | `onSelection` | false | Emitted when item selection is changing, before the selection completes. | `{ISelectionEventArgs}` | -| `onOpening` | true | Emitted before the dropdown is opened. | +| `onOpening` | true | Emitted before the dropdown is opened. | `CancelableBrowserEventArgs & IBaseEventArgs` | | `onOpened` | false | Emitted when a dropdown is being opened. | -| `onClosing` | true | Emitted before the dropdown is closed. | +| `onClosing` | true | Emitted before the dropdown is closed. | `CancelableBrowserEventArgs & IBaseEventArgs` | | `onClosed` | false | Emitted when a dropdown is being closed. | ***NOTE:*** The using `*igxFor` to virtualize `igx-drop-down-item`s, `onSelection` will emit `newSeleciton` and `oldSelection` as type `{ value: any, index: number }`. From a440bb623dbeb4581c12a1fda05449f313d1e6c6 Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Mon, 12 Oct 2020 17:23:00 +0300 Subject: [PATCH 3/5] test(combo): fix failing events test --- .../src/lib/combo/combo.component.spec.ts | 22 ++++++++++++------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index d5932476a39..9e281be4e0b 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -283,25 +283,31 @@ describe('igxCombo', () => { combo.selectItems([], true); expect(combo.selectedItems()).toEqual([]); }); - it('should emit owner on `onOpened` and `onClosed`', () => { + 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.onOpened, 'emit'); - spyOn(combo.onClosing, 'emit'); + spyOn(combo.onOpening, 'emit').and.callThrough(); + spyOn(combo.onClosing, 'emit').and.callThrough(); const mockObj = {}; const inputEvent: CancelableBrowserEventArgs & IBaseEventArgs = { cancel: false, owner: mockObj, }; + combo.comboInput = { + nativeElement: { + focus: () => {} + } + }; combo.handleOpening(inputEvent); - expect(combo.onOpened.emit).toHaveBeenCalledWith(Object.assign({}, inputEvent, { owner: combo })); + const expectedCall: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, inputEvent, { owner: combo }); + expect(combo.onOpening.emit).toHaveBeenCalledWith(expectedCall); expect(inputEvent.owner).toEqual(mockObj); - combo.handleOpening(inputEvent); - expect(combo.onClosing.emit).toHaveBeenCalledWith(Object.assign({}, inputEvent, { owner: combo })); + combo.handleClosing(inputEvent); + expect(combo.onClosing.emit).toHaveBeenCalledWith(expectedCall); expect(inputEvent.owner).toEqual(mockObj); - let sub = combo.onOpened.subscribe((e: CancelableBrowserEventArgs & IBaseEventArgs) => { + let sub = combo.onOpening.subscribe((e: CancelableBrowserEventArgs & IBaseEventArgs) => { e.cancel = true; }); combo.handleOpening(inputEvent); @@ -312,7 +318,7 @@ describe('igxCombo', () => { sub = combo.onClosing.subscribe((e: CancelableBrowserEventArgs & IBaseEventArgs) => { e.cancel = true; }); - combo.handleOpening(inputEvent); + combo.handleClosing(inputEvent); expect(inputEvent.cancel).toEqual(true); sub.unsubscribe(); }); From 03d875cbeaef340f35c5804906c71f8f8531bd4a Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Tue, 13 Oct 2020 09:53:35 +0300 Subject: [PATCH 4/5] chore(dropdown, combo): cleanup unused code --- projects/igniteui-angular/src/lib/combo/combo.component.ts | 3 --- .../igniteui-angular/src/lib/drop-down/drop-down.component.ts | 3 +++ 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index 32c9c837be0..b11ee3ae42d 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -1555,9 +1555,6 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas const eventArgs: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, event, { owner: this }); this.onOpening.emit(eventArgs); event.cancel = eventArgs.cancel; - if (event.cancel) { - return; - } } /** diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 9e83642f762..23d5ab8fcc7 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -412,6 +412,9 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID const eventArgs: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, e, { owner: this }); this.onClosing.emit(eventArgs); e.cancel = eventArgs.cancel; + if (e.cancel) { + return; + } if (this.virtDir) { this._scrollPosition = this.virtDir.scrollPosition; } From fe283383757597a8fe7b9bd7b52e376fe1dd0cd4 Mon Sep 17 00:00:00 2001 From: ViktorSlavov Date: Tue, 13 Oct 2020 09:54:49 +0300 Subject: [PATCH 5/5] refactor(*): add `Base(Browser)CancelableEventArgs` interface and update usage --- .../igniteui-angular/src/lib/combo/README.md | 4 ++-- .../src/lib/combo/combo.component.spec.ts | 10 +++++----- .../src/lib/combo/combo.component.ts | 18 +++++++++--------- .../igniteui-angular/src/lib/core/utils.ts | 4 ++++ .../lib/date-picker/date-picker.component.ts | 4 ++-- .../src/lib/date-range-picker/README.md | 4 ++-- .../date-range-picker.component.ts | 10 +++++----- .../src/lib/drop-down/README.md | 4 ++-- .../src/lib/drop-down/drop-down.component.ts | 14 +++++++------- .../src/lib/select/select.component.ts | 6 +++--- .../time-picker/time-picker.component.spec.ts | 5 ++--- .../lib/time-picker/time-picker.component.ts | 4 ++-- 12 files changed, 45 insertions(+), 42 deletions(-) diff --git a/projects/igniteui-angular/src/lib/combo/README.md b/projects/igniteui-angular/src/lib/combo/README.md index dd49d8cf923..6b566f106ee 100644 --- a/projects/igniteui-angular/src/lib/combo/README.md +++ b/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: ``, 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 | `CancelableBrowserEventArgs & IBaseEventArgs` | +| `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 | `CancelableBrowserEventArgs & IBaseEventArgs` | +| `onClosing` | Emitted before the dropdown is closed | false | `IBaseCancelableBrowserEventArgs` | | `onClosed` | Emitted after the dropdown is closed | false | { event: `Event` } | ### Methods diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 9e281be4e0b..bc8376d0afa 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -19,7 +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 { CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; +import { IBaseCancelableBrowserEventArgs } from '../core/utils'; const CSS_CLASS_COMBO = 'igx-combo'; const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down'; @@ -291,7 +291,7 @@ describe('igxCombo', () => { spyOn(combo.onOpening, 'emit').and.callThrough(); spyOn(combo.onClosing, 'emit').and.callThrough(); const mockObj = {}; - const inputEvent: CancelableBrowserEventArgs & IBaseEventArgs = { + const inputEvent: IBaseCancelableBrowserEventArgs = { cancel: false, owner: mockObj, }; @@ -301,13 +301,13 @@ describe('igxCombo', () => { } }; combo.handleOpening(inputEvent); - const expectedCall: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, inputEvent, { owner: combo }); + 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: CancelableBrowserEventArgs & IBaseEventArgs) => { + let sub = combo.onOpening.subscribe((e: IBaseCancelableBrowserEventArgs) => { e.cancel = true; }); combo.handleOpening(inputEvent); @@ -315,7 +315,7 @@ describe('igxCombo', () => { sub.unsubscribe(); inputEvent.cancel = false; - sub = combo.onClosing.subscribe((e: CancelableBrowserEventArgs & IBaseEventArgs) => { + sub = combo.onClosing.subscribe((e: IBaseCancelableBrowserEventArgs) => { e.cancel = true; }); combo.handleClosing(inputEvent); diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index b11ee3ae42d..e1c50108892 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/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(); + public onOpening = new EventEmitter(); /** * Emitted after the dropdown is opened @@ -473,7 +473,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas * ``` */ @Output() - public onClosing = new EventEmitter(); + public onClosing = new EventEmitter(); /** * Emitted after the dropdown is closed @@ -1551,8 +1551,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas * @hidden * @internal */ - public handleOpening(event: CancelableBrowserEventArgs & IBaseEventArgs) { - const eventArgs: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, event, { owner: this }); + public handleOpening(event: IBaseCancelableBrowserEventArgs) { + const eventArgs: IBaseCancelableBrowserEventArgs = Object.assign({}, event, { owner: this }); this.onOpening.emit(eventArgs); event.cancel = eventArgs.cancel; } @@ -1577,8 +1577,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas /** * @hidden @internal */ - public handleClosing(event: CancelableBrowserEventArgs & IBaseEventArgs) { - const eventArgs: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, event, { owner: this }); + public handleClosing(event: IBaseCancelableBrowserEventArgs) { + const eventArgs: IBaseCancelableBrowserEventArgs = Object.assign({}, event, { owner: this }); this.onClosing.emit(eventArgs); event.cancel = eventArgs.cancel; if (event.cancel) { diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index ee671c56e0c..2b81144d638 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/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([ diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index f1d42e853e6..9ea7db55948 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -63,7 +63,7 @@ import { } from './date-picker.utils'; import { DatePickerDisplayValuePipe, DatePickerInputValuePipe } from './date-picker.pipes'; import { IDatePicker } from './date-picker.common'; -import { KEYS, CancelableBrowserEventArgs, isIE, isEqual, IBaseEventArgs, mkenum } from '../core/utils'; +import { KEYS, isIE, isEqual, IBaseEventArgs, mkenum, IBaseCancelableBrowserEventArgs } from '../core/utils'; import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from './date-picker.directives'; import { IgxCalendarContainerComponent } from './calendar-container.component'; import { InteractionMode } from '../core/enums'; @@ -605,7 +605,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor * Emitted when the `IgxDatePickerComponent` is being closed. */ @Output() - public onClosing = new EventEmitter(); + public onClosing = new EventEmitter(); /** * Emitted when selection is made in the calendar. diff --git a/projects/igniteui-angular/src/lib/date-range-picker/README.md b/projects/igniteui-angular/src/lib/date-range-picker/README.md index 322b2bfec3c..bf9221d7005 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/README.md +++ b/projects/igniteui-angular/src/lib/date-range-picker/README.md @@ -122,9 +122,9 @@ With projected inputs: | Name | Type | Description | |:-----------------|:----------------------|:------------| | rangeSelected | IgxDateRangePickerComponent | Emitted when a full range was selected in the `IgxDateRangePickerComponent`. | -| onOpening | CancelableBrowserEventArgs & IBaseEventArgs | Emitted when the calendar starts opening, cancelable. | +| onOpening | IBaseCancelableBrowserEventArgs | Emitted when the calendar starts opening, cancelable. | | onOpened | IBaseEventArgs | Emitted when the `IgxDateRangePickerComponent` is opened. | -| onClosing | CancelableBrowserEventArgs & IBaseEventArgs | Emitted when the calendar starts closing, cancelable. | +| onClosing | IBaseCancelableBrowserEventArgs | Emitted when the calendar starts closing, cancelable. | | onClosed | IBaseEventArgs | Emitted when the `IgxDateRangePickerComponent` is closed. | ### Methods diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index c35696b5a90..11e9692e2e7 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -17,7 +17,7 @@ import { DisplayDensityBase, DisplayDensityToken, IDisplayDensityOptions } from import { InteractionMode } from '../core/enums'; import { CurrentResourceStrings } from '../core/i18n/resources'; import { IToggleView } from '../core/navigation'; -import { CancelableBrowserEventArgs, IBaseEventArgs, KEYS } from '../core/utils'; +import { IBaseCancelableBrowserEventArgs, IBaseEventArgs, KEYS } from '../core/utils'; import { DatePickerUtil } from '../date-picker/date-picker.utils'; import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective } from '../input-group/public_api'; @@ -279,7 +279,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase * ``` */ @Output() - public onOpening = new EventEmitter(); + public onOpening = new EventEmitter(); /** * Emitted when the `IgxDateRangeComponent` is opened. @@ -301,7 +301,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase * ``` */ @Output() - public onClosing = new EventEmitter(); + public onClosing = new EventEmitter(); /** * Emitted when the `IgxDateRangeComponent` is closed. @@ -658,7 +658,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase } /** @hidden @internal */ - public handleOpening(event: CancelableBrowserEventArgs & IBaseEventArgs): void { + public handleOpening(event: IBaseCancelableBrowserEventArgs): void { const args = { owner: this, cancel: event.cancel, event: event.event }; this.onOpening.emit(args); event.cancel = args.cancel; @@ -674,7 +674,7 @@ export class IgxDateRangePickerComponent extends DisplayDensityBase } /** @hidden @internal */ - public handleClosing(event: CancelableBrowserEventArgs & IBaseEventArgs): void { + public handleClosing(event: IBaseCancelableBrowserEventArgs): void { if (this.value && !this.value.start && !this.value.end) { this.value = null; } diff --git a/projects/igniteui-angular/src/lib/drop-down/README.md b/projects/igniteui-angular/src/lib/drop-down/README.md index ee747ff5c83..78b1e1a04d7 100644 --- a/projects/igniteui-angular/src/lib/drop-down/README.md +++ b/projects/igniteui-angular/src/lib/drop-down/README.md @@ -133,9 +133,9 @@ The following outputs are available in the **igx-drop-down** component: | Name | Cancelable | Description | Parameters | :--- | :--- | :--- | :--- | | `onSelection` | false | Emitted when item selection is changing, before the selection completes. | `{ISelectionEventArgs}` | -| `onOpening` | true | Emitted before the dropdown is opened. | `CancelableBrowserEventArgs & IBaseEventArgs` | +| `onOpening` | true | Emitted before the dropdown is opened. | `IBaseCancelableBrowserEventArgs` | | `onOpened` | false | Emitted when a dropdown is being opened. | -| `onClosing` | true | Emitted before the dropdown is closed. | `CancelableBrowserEventArgs & IBaseEventArgs` | +| `onClosing` | true | Emitted before the dropdown is closed. | `IBaseCancelableBrowserEventArgs` | | `onClosed` | false | Emitted when a dropdown is being closed. | ***NOTE:*** The using `*igxFor` to virtualize `igx-drop-down-item`s, `onSelection` will emit `newSeleciton` and `oldSelection` as type `{ value: any, index: number }`. diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index 23d5ab8fcc7..8bfa5e5a1e3 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -23,7 +23,7 @@ import { IgxDropDownBaseDirective } from './drop-down.base'; import { DropDownActionKey, Navigate } from './drop-down.common'; import { IGX_DROPDOWN_BASE, IDropDownBase } from './drop-down.common'; import { ISelectionEventArgs } from './drop-down.common'; -import { CancelableBrowserEventArgs, IBaseEventArgs, isIE } from '../core/utils'; +import { IBaseCancelableBrowserEventArgs, isIE } from '../core/utils'; import { IgxSelectionAPIService } from '../core/selection'; import { Subject } from 'rxjs'; import { IgxDropDownItemBaseDirective } from './drop-down-item.base'; @@ -81,7 +81,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID * ``` */ @Output() - public onOpening = new EventEmitter(); + public onOpening = new EventEmitter(); /** * Emitted after the dropdown is opened @@ -101,7 +101,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID * ``` */ @Output() - public onClosing = new EventEmitter(); + public onClosing = new EventEmitter(); /** * Emitted after the dropdown is closed @@ -374,9 +374,9 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID /** * @hidden @internal */ - public onToggleOpening(e: CancelableBrowserEventArgs & IBaseEventArgs) { + public onToggleOpening(e: IBaseCancelableBrowserEventArgs) { // do not mutate passed event args - const eventArgs: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, e, { owner: this }); + const eventArgs: IBaseCancelableBrowserEventArgs = Object.assign({}, e, { owner: this }); this.onOpening.emit(eventArgs); e.cancel = eventArgs.cancel; if (e.cancel) { @@ -408,8 +408,8 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID /** * @hidden @internal */ - public onToggleClosing(e: CancelableBrowserEventArgs & IBaseEventArgs) { - const eventArgs: CancelableBrowserEventArgs & IBaseEventArgs = Object.assign({}, e, { owner: this }); + public onToggleClosing(e: IBaseCancelableBrowserEventArgs) { + const eventArgs: IBaseCancelableBrowserEventArgs = Object.assign({}, e, { owner: this }); this.onClosing.emit(eventArgs); e.cancel = eventArgs.cancel; if (e.cancel) { diff --git a/projects/igniteui-angular/src/lib/select/select.component.ts b/projects/igniteui-angular/src/lib/select/select.component.ts index 5a2a3d755ee..4edfd8dfd7b 100644 --- a/projects/igniteui-angular/src/lib/select/select.component.ts +++ b/projects/igniteui-angular/src/lib/select/select.component.ts @@ -27,7 +27,7 @@ import { takeUntil } from 'rxjs/operators'; import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density'; import { EditorProvider } from '../core/edit-provider'; import { IgxSelectionAPIService } from '../core/selection'; -import { CancelableBrowserEventArgs, CancelableEventArgs, IBaseEventArgs } from '../core/utils'; +import { CancelableEventArgs, IBaseCancelableBrowserEventArgs, IBaseCancelableEventArgs } from '../core/utils'; import { IgxLabelDirective } from '../directives/label/label.directive'; import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base'; import { IGX_DROPDOWN_BASE, ISelectionEventArgs, Navigate } from '../drop-down/drop-down.common'; @@ -207,7 +207,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec * ``` */ @Output() - public onOpening = new EventEmitter(); + public onOpening = new EventEmitter(); /** * Emitted after the dropdown is opened @@ -227,7 +227,7 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec * ``` */ @Output() - public onClosing = new EventEmitter(); + public onClosing = new EventEmitter(); /** * Emitted after the dropdown is closed diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts index 5134ac6fc6a..004902eee85 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts @@ -12,8 +12,7 @@ import { configureTestSuite } from '../test-utils/configure-suite'; import { InteractionMode } from '../core/enums'; import { IgxIconModule } from '../icon/public_api'; import { IgxToggleModule } from '../directives/toggle/toggle.directive'; -import { CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; -import { IgxHourItemDirective, IgxMinuteItemDirective, IgxSecondsItemDirective, IgxAmPmItemDirective } from './time-picker.directives'; +import { IBaseCancelableBrowserEventArgs } from '../core/utils'; // tslint:disable: no-use-before-declare describe('IgxTimePicker', () => { @@ -2186,7 +2185,7 @@ describe('IgxTimePicker', () => { toggleRef = { onOpened: new EventEmitter(), onClosed: new EventEmitter(), - onClosing: new EventEmitter(), + onClosing: new EventEmitter(), element }; injector = { get: () => ngModel }; diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts index 9426ca04eaa..87281091c4a 100644 --- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts +++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts @@ -48,7 +48,7 @@ import { IgxOverlayOutletDirective, IgxToggleModule, IgxToggleDirective } from ' import { TimeDisplayFormatPipe, TimeInputFormatPipe } from './time-picker.pipes'; import { ITimePickerResourceStrings } from '../core/i18n/time-picker-resources'; import { CurrentResourceStrings } from '../core/i18n/resources'; -import { KEYS, CancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils'; +import { KEYS, IBaseEventArgs, IBaseCancelableBrowserEventArgs } from '../core/utils'; import { InteractionMode } from '../core/enums'; import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive'; import { IgxLabelDirective } from '../directives/label/label.directive'; @@ -459,7 +459,7 @@ export class IgxTimePickerComponent implements * Emitted when a timePicker is being closed. */ @Output() - public onClosing = new EventEmitter(); + public onClosing = new EventEmitter(); /** * @hidden