Merge branch 'master' into mkirova/fix-7778

Author: ChronosSF

.sassdocrc

@@ -9,14 +9,16 @@
     "theme": "./node_modules/igniteui-sassdoc-theme/sassdoc/",
     "autofill": ["throws", "content"],
     "groups": {
+        "global-themes": "Global Themes",
+        "component-themes": "Component Themes",
         "undefined": "general"
     },
     "no-update-notifier": false,
     "verbose": false,
     "strict": false,
     "display": {
         "alias": true,
-        "access": ["public", "private"]
+        "access": ["public"]
     },
     "privatePrefix": true,
     "resolvedValue": true

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,29 @@ 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.
+You can use one of the following mixins to include a dark or light indigo theme:
+`igx-indigo-light-theme` and `igx-indigo-dark-theme`
+
+We also added two new palettes that go with the new theme, `$light-indigo-palette` and `$dark-indigo-palette`.
+
+The following example shows how you can use the Indigo theme:
+
+```scss
+// Light version
+.indigo-theme {
+    @include igx-indigo-light-theme($light-indigo-palette);
+}
+
+// Dark version
+.indigo-dark-theme {
+    @include igx-indigo-dark-theme($dark-indigo-palette);
+}
+```
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -38,8 +63,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxNavbar`
     - Added new `igx-navbar-title, igxNavbarTitle` directive that can be used to provide custom content for navbar title. It would override the value of `title` input property.
 - `IgxCalendar` and `IgxMonthPicker`
-    - `onViewDateChanged` emitted after the month/year presented in the view is changed after user interaction.
-    - `onActiveViewChanged` event emitted after the active view (DEFAULT, YEAR, DECADE) is changed after user interaction.
+    - `viewDateChanged` emitted after the month/year presented in the view is changed after user interaction.
+    - `activeViewChanged` event emitted after the active view (DEFAULT, YEAR, DECADE) is changed after user interaction.
     - `viewDate` day value is always 1.
     - `activeView` setter is now available as an input property.
 
@@ -496,7 +521,7 @@ Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design
 Depending on your use case you can use one of the following mixins:
 `igx-fluent-theme` and `igx-fluent-dark-theme`
 
-We also added two new pallets that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.
+We also added two new palettes that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.
 
 Next example shows how you can use the Fluent theme.
 

angularDocsPostDeploy.ps1

@@ -64,7 +64,7 @@ if([System.IO.File]::Exists($filePath) -and [System.IO.Directory]::Exists($angul
     $folders = Get-ChildItem -Path $angularDocsRootFolder -Directory -Exclude $tagFolder,"sass","typescript" -Name | Sort-Object @{Expression = {[double]($_.Substring(0, $_.LastIndexOf('.'))) }};
     $textToUpdate = "";
     foreach($item in $folders) {
-        $textToUpdate += '"' + $item.Name + '"'; 
+        $textToUpdate += '"' + $item + '"'; 
     }
     $textToUpdate = "[" +  $textToUpdate.Replace("`"`"","`"`,`"") + "]" ;
     Write-Host $textToUpdate;

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

@@ -175,12 +175,12 @@ Controls the visibility of the dates that do not belong to the current month.
 Event fired when a value is selected through UI interaction.
 Emits the selected value (depending on the type of selection).
 
-- `onViewDateChanged(): IViewDateChangeEventArgs`
+- `viewDateChanged(): IViewDateChangeEventArgs`
 
-Event fired after the the month/year presented in the view is changed.
+Event fired after the month/year presented in the view is changed.
 Emits an object containing the previous and current value of the `viewDate` property.
 
-- `onActiveViewChanged(): CalendarView`
+- `activeViewChanged(): CalendarView`
 
 Event fired after the active view is changed.
 Emits an CalendarView enum, indicating the `activeView` property value.

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -250,21 +250,21 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * Emits an event when the month in view is changed.
      * ```html
-     * <igx-calendar (onViewDateChanged)="viewDateChanged($event)"></igx-calendar>
+     * <igx-calendar (viewDateChanged)="viewDateChanged($event)"></igx-calendar>
      * ```
      * ```typescript
      * public viewDateChanged(event: IViewDateChangeEventArgs) {
-     *  let newDate = event.newViewDate;
+     *  let viewDate = event.currentValue;
      * }
      * ```
      */
     @Output()
-    public onViewDateChanged = new EventEmitter<IViewDateChangeEventArgs>();
+    public viewDateChanged = new EventEmitter<IViewDateChangeEventArgs>();
 
     /**
      * Emits an event when the active view is changed.
      * ```html
-     * <igx-calendar (onActiveViewChanged)="activeViewChanged($event)"></igx-calendar>
+     * <igx-calendar (activeViewChanged)="activeViewChanged($event)"></igx-calendar>
      * ```
      * ```typescript
      * public activeViewChanged(event: CalendarView) {
@@ -273,7 +273,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      * ```
      */
     @Output()
-    public onActiveViewChanged  = new EventEmitter<CalendarView>();
+    public activeViewChanged  = new EventEmitter<CalendarView>();
 
     /**
      * @hidden

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

@@ -1588,14 +1588,14 @@ describe('IgxCalendar - ', () => {
 
                 expect(year.nativeElement).toBe(document.activeElement);
 
-                spyOn(calendar.onActiveViewChanged, 'emit').and.callThrough();
+                spyOn(calendar.activeViewChanged, 'emit').and.callThrough();
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
                 tick();
 
-                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledTimes(1);
-                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledWith(CalendarView.DECADE);
+                expect(calendar.activeViewChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.activeViewChanged.emit).toHaveBeenCalledWith(CalendarView.DECADE);
 
                 const years = dom.queryAll(By.css(HelperTestFunctions.YEAR_CSSCLASS));
                 let currentYear = dom.query(By.css(HelperTestFunctions.CURRENT_YEAR_CSSCLASS));
@@ -1617,32 +1617,32 @@ describe('IgxCalendar - ', () => {
                 expect(currentYear.nativeElement.textContent.trim()).toMatch('2016');
 
                 const previousValue = fixture.componentInstance.calendar.viewDate;
-                spyOn(calendar.onViewDateChanged, 'emit').and.callThrough();
+                spyOn(calendar.viewDateChanged, 'emit').and.callThrough();
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', currentYear.nativeElement);
 
                 fixture.detectChanges();
                 tick();
 
                 const eventArgs: IViewDateChangeEventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
-                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
-                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
+                expect(calendar.viewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.viewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
                 expect(calendar.viewDate.getFullYear()).toEqual(2016);
             }));
 
             it('Should open months view, navigate through and select a month via KB.', fakeAsync(() => {
                 const month = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_DATE_CSSCLASS))[0];
                 month.nativeElement.focus();
-                spyOn(calendar.onActiveViewChanged, 'emit').and.callThrough();
+                spyOn(calendar.activeViewChanged, 'emit').and.callThrough();
 
                 expect(month.nativeElement).toBe(document.activeElement);
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
                 tick();
 
-                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledTimes(1);
-                expect(calendar.onActiveViewChanged.emit).toHaveBeenCalledWith(CalendarView.YEAR);
+                expect(calendar.activeViewChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.activeViewChanged.emit).toHaveBeenCalledWith(CalendarView.YEAR);
 
                 const months = dom.queryAll(By.css(HelperTestFunctions.MONTH_CSSCLASS));
                 const currentMonth = dom.query(By.css(HelperTestFunctions.CURRENT_MONTH_CSSCLASS));
@@ -1672,15 +1672,15 @@ describe('IgxCalendar - ', () => {
                 expect(document.activeElement.textContent.trim()).toMatch('Sep');
 
                 const previousValue = fixture.componentInstance.calendar.viewDate;
-                spyOn(calendar.onViewDateChanged, 'emit').and.callThrough();
+                spyOn(calendar.viewDateChanged, 'emit').and.callThrough();
 
                 UIInteractions.triggerKeyDownEvtUponElem('Enter', document.activeElement);
                 fixture.detectChanges();
                 tick();
 
                 const eventArgs: IViewDateChangeEventArgs = { previousValue, currentValue: fixture.componentInstance.calendar.viewDate };
-                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledTimes(1);
-                expect(calendar.onViewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
+                expect(calendar.viewDateChanged.emit).toHaveBeenCalledTimes(1);
+                expect(calendar.viewDateChanged.emit).toHaveBeenCalledWith(eventArgs);
                 expect(calendar.viewDate.getMonth()).toEqual(8);
             }));
 

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

@@ -717,7 +717,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     public animationDone(event) {
         if ((event.fromState === ScrollMonth.NONE && (event.toState === ScrollMonth.PREV || event.toState === ScrollMonth.NEXT)) ||
              (event.fromState === 'void' && event.toState === ScrollMonth.NONE)) {
-            this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
+            this.viewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
         }
 
         if (this.monthScrollDirection !== ScrollMonth.NONE) {
@@ -751,7 +751,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      */
     public viewRendered(event) {
         if (event.fromState !== 'void') {
-            this.onActiveViewChanged.emit(this.activeView);
+            this.activeViewChanged.emit(this.activeView);
         }
     }
 

projects/igniteui-angular/src/lib/calendar/month-picker/README.md

@@ -122,12 +122,12 @@ The default values are listed below.
 Event fired when a value is selected through UI interaction.
 Returns the selected value (depending on the type of selection).
 
-- `onViewDateChanged(): IViewDateChangeEventArgs`
+- `viewDateChanged(): IViewDateChangeEventArgs`
 
-Event fired after the the month/year presented in the view is changed.
+Event fired after the month/year presented in the view is changed.
 Emits an object containing the previous and current value of the `viewDate` property.
 
-- `onActiveViewChanged(): CalendarView`
+- `activeViewChanged(): CalendarView`
 
 Event fired after the active view is changed.
 Emits an CalendarView enum, indicating the `activeView` property value.

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

@@ -103,7 +103,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
     public animationDone(event) {
         if ((event.fromState === 'void' && event.toState === '') ||
         (event.fromState === '' && (event.toState === ScrollMonth.PREV || event.toState === ScrollMonth.NEXT))) {
-            this.onViewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
+            this.viewDateChanged.emit({ previousValue: this.previousViewDate, currentValue: this.viewDate });
         }
         this.yearAction = '';
     }
@@ -113,7 +113,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
      */
     public viewRendered(event) {
         if (event.fromState !== 'void') {
-            this.onActiveViewChanged.emit(this.activeView);
+            this.activeViewChanged.emit(this.activeView);
         }
     }
 

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();