Merge branch 'master' into simeonoff/indigo-theme

Author: simeonoff

CHANGELOG.md

@@ -7,10 +7,12 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `igxCombo`
     - **Behavioral Change** - Change default positioning strategy from `ConnectedPositioningStrategy` to `AutoPositionStrategy`. The [`Auto`](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay_position.html#auto) strategy will initially try to show the element like the Connected strategy does. If the element goes out of the viewport Auto will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. If after flipping direction the content goes out of the view, auto strategy will revert to initial start point and direction and will push the content into the view. Note after pushing the content it may hide the combo's input.
+    - Make `onSearchInput` event cancellable. The event args type has been changed to `IComboSearchInputEventArgs`, which have the following properties: `searchText` - holds the text typed into the search input, `owner` - holds a reference to the combo component and `cancel` - indicates whether the event should be canceled.
 - `IgxOverlay`
-    - Added new property - `closeOnEsc` - in `OverlaySettings`. The overlay can now be prevented from closing, on escape keypress, by setting the property to `false`, by default it's `true`.
+    - Added new property `closeOnEscape` in `OverlaySettings` that controls whether the overlay should close on escape keypress. By default `closeOnEsc` is set to `false`.
+    - **Behavioral Change** - `modal` overlays shown directly through the Overlay Service no longer close on Escape by default. That behavior can now be specified using the `closeOnEscape` property.
 - `igxDialog`
-    - Added `closeOnEscapeKey` - with it, the dialog can be allowed or prevented from closing when `Esc` is pressed.
+    - Added `closeOnEscape` - with it, the dialog can be allowed or prevented from closing when `Esc` is pressed.
 - `IgxNavbar`:
     - **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
 - `igxGrid`
@@ -19,6 +21,8 @@ All notable changes for each version of this project will be documented in this
     - Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
 - `IgxTimePicker`
     - Added a disabled style for time parts outside of the minimum and maximum range.
+- `igxDatePicker`
+    -  Added new property - `editorTabIndex`, that allows setting tabindex for the default editor.
 
 ### New Theme
 Ignite UI for Angular now has a new theme based on our own design system.

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

@@ -18,6 +18,7 @@ import { configureTestSuite } from '../test-utils/configure-suite';
 import { DisplayDensity } from '../core/density';
 import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/public_api';
 import { IgxSelectionAPIService } from '../core/selection';
+import { CancelableEventArgs } from '../core/utils';
 
 const CSS_CLASS_COMBO = 'igx-combo';
 const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -530,21 +531,42 @@ describe('igxCombo', () => {
             expect(matchSpy).toHaveBeenCalledTimes(1);
             expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(0);
 
+            const args = {
+                searchText: 'Fake',
+                owner: combo,
+                cancel: false
+            };
             combo.handleInputChange('Fake');
             expect(matchSpy).toHaveBeenCalledTimes(2);
             expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(1);
-            expect(combo.onSearchInput.emit).toHaveBeenCalledWith('Fake');
+            expect(combo.onSearchInput.emit).toHaveBeenCalledWith(args);
 
+            args.searchText = '';
             combo.handleInputChange('');
             expect(matchSpy).toHaveBeenCalledTimes(3);
             expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(2);
-            expect(combo.onSearchInput.emit).toHaveBeenCalledWith('');
+            expect(combo.onSearchInput.emit).toHaveBeenCalledWith(args);
 
             combo.filterable = false;
             combo.handleInputChange();
             expect(matchSpy).toHaveBeenCalledTimes(4);
             expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(2);
         });
+        it('should be able to cancel onSearchInput', () => {
+            combo = new IgxComboComponent({ nativeElement: null }, mockCdr, mockSelection as any, mockComboService, null, mockInjector);
+            combo.ngOnInit();
+            combo.data = data;
+            combo.filterable = true;
+            combo.onSearchInput.subscribe((e) => {
+                e.cancel = true;
+            });
+            const matchSpy = spyOn<any>(combo, 'checkMatch').and.callThrough();
+            spyOn(combo.onSearchInput, 'emit').and.callThrough();
+
+            combo.handleInputChange('Item1');
+            expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(1);
+            expect(matchSpy).toHaveBeenCalledTimes(0);
+        });
     });
     describe('Initialization and rendering tests: ', () => {
         configureTestSuite();

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

@@ -96,6 +96,12 @@ export interface IComboSelectionChangeEventArgs extends CancelableEventArgs, IBa
     event?: Event;
 }
 
+/** Event emitted when the igx-combo's search input changes */
+export interface IComboSearchInputEventArgs extends CancelableEventArgs, IBaseEventArgs {
+    /** The text that has been typed into the search input */
+    searchText: string;
+}
+
 export interface IComboItemAdditionEvent extends IBaseEventArgs {
     oldCollection: any[];
     addedItem: any;
@@ -483,7 +489,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Output()
-    public onSearchInput = new EventEmitter();
+    public onSearchInput = new EventEmitter<IComboSearchInputEventArgs>();
 
     /**
      * Emitted when new chunk of data is loaded from the virtualization
@@ -981,7 +987,16 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public handleInputChange(event?: string) {
         if (event !== undefined) {
-            this.onSearchInput.emit(event);
+            const args: IComboSearchInputEventArgs = {
+                searchText: event,
+                owner: this,
+                cancel: false
+            };
+            this.onSearchInput.emit(args);
+            if (args.cancel) {
+                this.searchValue = null;
+                return;
+            }
         }
         this.checkMatch();
     }
@@ -1436,8 +1451,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     /** Returns a string that should be populated in the combo's text box */
     private concatDisplayText(selection: any[]): string {
         const value = this.displayKey !== null && this.displayKey !== undefined ?
-        this.convertKeysToItems(selection).map(entry => entry[this.displayKey]).join(', ') :
-        selection.join(', ');
+            this.convertKeysToItems(selection).map(entry => entry[this.displayKey]).join(', ') :
+            selection.join(', ');
         return value;
     }
 

projects/igniteui-angular/src/lib/date-picker/date-picker.component.html

@@ -10,6 +10,7 @@
             [value]="displayData || ''"
             [disabled]="disabled"
             (blur)="onBlur($event)"
+            [tabindex]='editorTabIndex'
             readonly
         />
     </igx-input-group>
@@ -36,6 +37,7 @@
             (wheel)="onWheel($event)"
             (input)="onInput($event)"
             (focus)="onFocus()"
+            [tabindex]='editorTabIndex'
         />
         <igx-suffix *ngIf="!isEmpty" (click)="clear()">
             <igx-icon>clear</igx-icon>

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -277,6 +277,13 @@ describe('IgxDatePicker', () => {
                 expect(input).toEqual(document.activeElement);
             }));
 
+            it('should allow setting editorTabIndex', () => {
+                fixture.componentInstance.datePicker.editorTabIndex = 3;
+                fixture.detectChanges();
+                const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
+                expect(input.tabIndex).toBe(3);
+            });
+
     });
 
     describe('DatePicker with passed date', () => {

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -177,6 +177,15 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      */
     @Input() public locale: 'en';
 
+    /**
+     * Gets/Sets the default template editor's tabindex.
+     * @example
+     * ```html
+     * <igx-date-picker editorTabIndex="1"></igx-date-picker>
+     * ```
+     */
+    @Input() public editorTabIndex: number;
+
     /**
      * Gets/Sets on which day the week starts.
      * @example
@@ -783,8 +792,8 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
         this._modalOverlaySettings = {
             closeOnOutsideClick: true,
-            closeOnEsc: true,
             modal: true,
+            closeOnEscape: true,
             outlet: this.outlet
         };
 

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

@@ -73,23 +73,36 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     @Input()
     public id = `igx-dialog-${DIALOG_ID++}`;
 
+    /**
+     * Controls whether the dialog should be shown as modal. Defaults to `true`
+     * ```html
+     * <igx-dialog [isModal]="false" ></igx-dialog>
+     * ```
+     */
     @Input()
-    get isModal() {
+    public get isModal() {
         return this._isModal;
     }
 
-    set isModal(val: boolean) {
+    public set isModal(val: boolean) {
         this._overlayDefaultSettings.modal = val;
         this._isModal = val;
     }
 
-    get closeOnEscapeKey() {
-        return this._closeOnEscapeKey;
+    /**
+     * Controls whether the dialog should close when `Esc` key is pressed. Defaults to `true`
+     * ```html
+     * <igx-dialog [closeOnEscape]="false" ></igx-dialog>
+     * ```
+     */
+    @Input()
+    public get closeOnEscape() {
+        return this._closeOnEscape;
     }
 
-    set closeOnEscapeKey(val: boolean) {
-        this._overlayDefaultSettings.closeOnEsc = val;
-        this._closeOnEscapeKey = val;
+    public set closeOnEscape(val: boolean) {
+        this._overlayDefaultSettings.closeOnEscape = val;
+        this._closeOnEscape = val;
     }
 
     /**
@@ -310,7 +323,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
 
     private _overlayDefaultSettings: OverlaySettings;
     private _closeOnOutsideSelect = false;
-    private _closeOnEscapeKey = true;
+    private _closeOnEscape = true;
     private _isModal = true;
     protected destroy$ = new Subject<boolean>();
 
@@ -414,7 +427,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
             positionStrategy: new GlobalPositionStrategy(this._positionSettings),
             scrollStrategy: new NoOpScrollStrategy(),
             modal: this.isModal,
-            closeOnEsc: this._closeOnEscapeKey,
+            closeOnEscape: this._closeOnEscape,
             closeOnOutsideClick: this.closeOnOutsideSelect
         };
     }

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.spec.ts

@@ -475,7 +475,6 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
-                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 excludePositionTarget: true
             };
@@ -499,7 +498,6 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
-                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 excludePositionTarget: true
             };
@@ -535,7 +533,6 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
-                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 excludePositionTarget: true
             };
@@ -594,7 +591,6 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
-                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 outlet: jasmine.any(IgxOverlayOutletDirective) as any,
                 excludePositionTarget: true

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -429,7 +429,6 @@ export class IgxToggleActionDirective implements OnInit {
             scrollStrategy: new AbsoluteScrollStrategy(),
             closeOnOutsideClick: true,
             modal: false,
-            closeOnEsc: true,
             excludePositionTarget: true
         };
     }