Merge branch 'master' into astaev/tabsStyleMigrations

Author: gedinakova

CHANGELOG.md

@@ -9,6 +9,21 @@ All notable changes for each version of this project will be documented in this
     - **Breaking Change** - The `locale` and `pipeArgs` parameters are removed from the `operate` method exposed by the `IgxNumberSummaryOperand`, `IgxDateSummaryOperand`, `IgxCurrencySummaryOperand` and `IgxPercentSummaryOperand`. They are now set in the `igx-grid-summary-cell` template. To change the locale and format setting of the `igx-grid-summary-cell` the user can use the new `summaryFormatter` property of the `IgxColumnComponent`.
 - `IgxTabs`, `IgxBottomNav`
     - **Breaking Change** - `IgxTabs` and `IgxBottomNav` components were completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. Please make sure to update via `ng update` in order to migrate the existing `igx-tabs` and `igx-bottom-nav` definitions to the new ones.
+- `IgxForOfDirective`
+    - **Breaking Change** - `IgxForOfDirective` events are renamed as follows:
+        - `onChunkLoad` -> `chunkLoad`
+        - `onScrollbarVisibilityChanged` -> `scrollbarVisibilityChanged`
+        - `onContentSizeChange` -> `contentSizeChange`
+        - `onDataChanged` -> `dataChanged`
+        - `onBeforeViewDestroyed` -> `beforeViewDestroyed`
+        - `onChunkPreload` -> `chunkPreload`
+        - `onDataChanging` -> `dataChanging`
+- `IgxColumnComponent`
+    - **Breaking Change** - The `onColumnChange` output is renamed to `columnChange`.
+- **Breaking Change** - `IgxHierarchicalGrid` and `igxRowIsland` events are renamed as follows:
+    - `onGridCreated` -> `gridCreated`
+    - `onGridInitialized` -> `gridInitialized`
+    - `onDataPreLoad` -> `dataPreLoad`
 
 ### New Features
 - `IgxForOf`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -47,7 +62,9 @@ All notable changes for each version of this project will be documented in this
     - The `igx-tab-header` supports `igx-prefix` and `igx-suffix` directives in its `ng-content`.
 - `IgxBottomNav`
     - The `IgxBottomNav` component exposes `disableAnimations` property which determines whether the contents should animate when switching the selected item. The property is set to `true` by default which means that the animations are disabled. 
-    
+- `IgxOverlayService`
+    - `detach` and `detachAll` methods are added to `IgxOverlayService`. Calling `detach` will remove all the elements generated for the related overlay, as well as clean up all related resources. Calling `detachAll` will remove all elements generated by any call to `IgxOverlay` `attach`, and will clean up all related resources. _Note: calling `hide` or `hideAll` will not clean generated by the service elements and will not clean up related resources._
+ 
 ### Themes:
 - Breaking Changes:
     - `IgxButton` theme has been simplified. The number of theme params (`igx-button-theme`) has been reduced significantly and no longer includes prefixed parameters (`flat-*`, `raised-*`, etc.). See the migration guide to update existing button themes. Updates performed with `ng update` will migrate existing button themes but some additional tweaking may be required to account for the abscense of prefixed params.
@@ -60,13 +77,6 @@ All notable changes for each version of this project will be documented in this
     ```
 
 
-
-
-### New Features
-- `IgxOverlayService`
-    - `detach` and `detachAll` methods are added to `IgxOverlayService`. Calling `detach` will remove all the elements generated for the related overlay, as well as clean up all related resources. Calling `detachAll` will remove all elements generated by any call to `IgxOverlay` `attach`, and will clean up all related resources. _Note: calling `hide` or `hideAll` will not clean generated by the service elements and will not clean up related resources._
-
-
 ## 11.1.1
 
 ### New Features

projects/igniteui-angular/migrations/update-12_0_0/changes/members.json

@@ -0,0 +1,12 @@
+{
+    "$schema": "../../common/schema/members-changes.schema.json",
+    "changes": [
+        {
+            "member": "onColumnChange",
+            "replaceWith": "columnChange",
+            "definedIn": [
+                "IgxColumnComponent"
+            ]
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-12_0_0/changes/outputs.json

@@ -8,6 +8,102 @@
                 "selector": "igx-column",
                 "type": "component"
             }
+        },
+        {
+            "name": "onChunkLoad",
+            "replaceWith": "chunkLoad",
+            "owner": {
+                "selector": "[igxFor][igxForOf]",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onScrollbarVisibilityChanged",
+            "replaceWith": "scrollbarVisibilityChanged",
+            "owner": {
+                "selector": "[igxFor][igxForOf]",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onContentSizeChange",
+            "replaceWith": "contentSizeChange",
+            "owner": {
+                "selector": "[igxFor][igxForOf]",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onDataChanged",
+            "replaceWith": "dataChanged",
+            "owner": {
+                "selector": "[igxFor][igxForOf]",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onBeforeViewDestroyed",
+            "replaceWith": "beforeViewDestroyed",
+            "owner": {
+                "selector": "[igxFor][igxForOf]",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onChunkPreload",
+            "replaceWith": "chunkPreload",
+            "owner": {
+                "selector": "[igxFor][igxForOf]",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onDataChanging",
+            "replaceWith": "dataChanging",
+            "owner": {
+                "selector": "[igxFor][igxForOf]",
+                "type": "directive"
+            }
+        },
+        {
+            "name": "onGridCreated",
+            "replaceWith": "gridCreated",
+            "owner": {
+                "selector": "igx-row-island",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onGridInitialized",
+            "replaceWith": "gridInitialized",
+            "owner": {
+                "selector": "igx-row-island",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onDataPreLoad",
+            "replaceWith": "dataPreLoad",
+            "owner": {
+                "selector": "igx-hierarchical-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onDataPreLoad",
+            "replaceWith": "dataPreLoad",
+            "owner": {
+                "selector": "igx-grid",
+                "type": "component"
+            }
+        },
+        {
+            "name": "onColumnToggled",
+            "replaceWith": "columnToggled",
+            "owner": {
+                "selector": "igx-column-actions",
+                "type": "component"
+            }
         }
     ]
 }

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts

@@ -77,6 +77,21 @@ describe('igxGridEditingActions #grid ', () => {
             expect(grid.rowList.first.rowData['ID']).toBe('ANATR');
             expect(dataLenght - 1).toBe(grid.dataLength);
         });
+
+        it('should focus the first cell when editing mode is cell', () => {
+            fixture.detectChanges();
+            grid.selectRange({rowStart: 0, rowEnd: 0, columnStart: 'ContactName', columnEnd: 'ContactName'});
+            fixture.detectChanges();
+            grid.actionStrip.show(grid.rowList.first);
+            fixture.detectChanges();
+            const editIcon = fixture.debugElement.queryAll(By.css(`igx-grid-editing-actions igx-icon`))[0];
+            expect(editIcon.nativeElement.innerText).toBe('edit');
+            editIcon.parent.triggerEventHandler('click', new Event('click'));
+            fixture.detectChanges();
+            // first cell of the row should be the active one, excluding ID as primaryKey
+            expect(grid.selectionService.activeElement.column).toBe(1);
+            expect(grid.selectionService.activeElement.row).toBe(0);
+        });
     });
 
     describe('Menu ', () => {

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts

@@ -105,6 +105,7 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
         // be sure row is in view
         if (grid.rowList.filter(r => r === row).length !== 0) {
             grid.gridAPI.crudService.enterEditMode(firstEditable, event);
+            firstEditable.activate();
         }
         this.strip.hide();
     }

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

@@ -3,7 +3,7 @@ import { WEEKDAYS, Calendar, isDateInRanges, IFormattingOptions, IFormattingView
 import { ControlValueAccessor } from '@angular/forms';
 import { DateRangeDescriptor } from '../core/dates';
 import { noop, Subject } from 'rxjs';
-import { isDate, mkenum } from '../core/utils';
+import { isDate, mkenum, PlatformUtil } from '../core/utils';
 import { IgxCalendarView } from './month-picker-base';
 import { CurrentResourceStrings } from '../core/i18n/resources';
 import { ICalendarResourceStrings } from '../core/i18n/calendar-resources';
@@ -433,7 +433,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      * @hidden
      */
-    constructor() {
+    constructor(protected platform: PlatformUtil) {
         this.calendarModel = new Calendar();
 
         this.viewDate = this.viewDate ? this.viewDate : new Date();

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

@@ -19,7 +19,6 @@ import {
     IgxCalendarHeaderTemplateDirective,
     IgxCalendarSubheaderTemplateDirective
 } from './calendar.directives';
-import { KEYS } from '../core/utils';
 import { ICalendarDate, monthRange } from './calendar';
 import { CalendarView, IgxCalendarView, IgxMonthPickerBaseDirective } from './month-picker-base';
 import { IgxMonthsViewComponent } from './months-view/months-view.component';
@@ -700,7 +699,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @hidden
      * @internal
      */
-    public stopMonthScroll = (event) => {
+    public stopMonthScroll = (event: KeyboardEvent) => {
         event.stopPropagation();
 
         // generally the scrolling is built on the calendar component
@@ -716,7 +715,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         } else if (this.monthScrollDirection === ScrollMonth.NEXT) {
             this.nextMonthBtn.nativeElement.focus();
         }
-        if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
+        if (this.platform.isActivationKey(event)) {
             this.resetActiveDate();
         }
 
@@ -839,8 +838,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @hidden
      * @internal
      */
-    public onActiveViewYearKB(args: Date, event, activeViewIdx: number): void {
-        if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
+    public onActiveViewYearKB(args: Date, event: KeyboardEvent, activeViewIdx: number): void {
+        if (this.platform.isActivationKey(event)) {
             event.preventDefault();
             this.onActiveViewYear(args, activeViewIdx);
         }

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

@@ -20,7 +20,7 @@ import {
 } from '@angular/core';
 import { fromEvent, Subject, interval } from 'rxjs';
 import { takeUntil, debounce, tap } from 'rxjs/operators';
-import { KEYS } from '../core/utils';
+import { PlatformUtil } from '../core/utils';
 
 /**
  * @hidden
@@ -68,7 +68,7 @@ export class IgxCalendarYearDirective {
         return this.elementRef.nativeElement;
     }
 
-    constructor(public elementRef: ElementRef) {}
+    constructor(public elementRef: ElementRef) { }
 
     @HostListener('click')
     public onClick() {
@@ -106,7 +106,7 @@ export class IgxCalendarMonthDirective {
         return this.elementRef.nativeElement;
     }
 
-    constructor(public elementRef: ElementRef) {}
+    constructor(public elementRef: ElementRef) { }
 
     @HostListener('click')
     public onClick() {
@@ -123,7 +123,7 @@ export class IgxCalendarMonthDirective {
 })
 export class IgxCalendarHeaderTemplateDirective {
 
-    constructor(public template: TemplateRef<any>) {}
+    constructor(public template: TemplateRef<any>) { }
 }
 
 /**
@@ -133,7 +133,7 @@ export class IgxCalendarHeaderTemplateDirective {
     selector: '[igxCalendarSubheader]'
 })
 export class IgxCalendarSubheaderTemplateDirective {
-    constructor(public template: TemplateRef<any>) {}
+    constructor(public template: TemplateRef<any>) { }
 }
 
 /**
@@ -165,7 +165,7 @@ export class IgxCalendarScrollMonthDirective implements AfterViewInit, OnDestroy
      */
     private destroy$ = new Subject<boolean>();
 
-    constructor(private element: ElementRef, private zone: NgZone) { }
+    constructor(private element: ElementRef, private zone: NgZone, protected platform: PlatformUtil) { }
 
     /**
      * @hidden
@@ -198,15 +198,15 @@ export class IgxCalendarScrollMonthDirective implements AfterViewInit, OnDestroy
         this.zone.runOutsideAngular(() => {
             fromEvent(this.element.nativeElement, 'keydown').pipe(
                 tap((event: KeyboardEvent) => {
-                    if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
+                    if (this.platform.isActivationKey(event)) {
                         event.preventDefault();
                         event.stopPropagation();
                     }
                 }),
                 debounce(() => interval(100)),
                 takeUntil(this.destroy$)
             ).subscribe((event: KeyboardEvent) => {
-                if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
+                if (this.platform.isActivationKey(event)) {
                     this.zone.run(() => this.startScroll(true));
                 }
             });

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

@@ -15,7 +15,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { IgxDayItemComponent } from './day-item.component';
 import { DateRangeDescriptor, DateRangeType } from '../../core/dates';
 import { IgxCalendarBaseDirective, CalendarSelection } from '../calendar-base';
-import { isEqual } from '../../core/utils';
+import { isEqual, PlatformUtil } from '../../core/utils';
 import { IViewChangingEventArgs } from './days-view.interface';
 import { IgxDaysViewNavigationService } from '../days-view/daysview-navigation.service';
 
@@ -136,8 +136,11 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     /**
      * @hidden
      */
-    constructor(public daysNavService: IgxDaysViewNavigationService) {
-        super();
+    constructor(
+        public daysNavService: IgxDaysViewNavigationService,
+        protected platform: PlatformUtil
+    ) {
+        super(platform);
     }
 
     /**
@@ -148,8 +151,8 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     public resetActiveMonth() {
         if (this.shouldResetDate) {
             const date = this.dates.find(day => day.selected && day.isCurrentMonth) ||
-                        this.dates.find(day => day.isToday && day.isCurrentMonth) ||
-                        this.dates.find(d => d.isFocusable);
+                this.dates.find(day => day.isToday && day.isCurrentMonth) ||
+                this.dates.find(d => d.isFocusable);
             if (date) {
                 this.activeDate = date.date.date.toLocaleDateString();
             }
@@ -307,7 +310,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
         let selectedDates: Date | Date[];
         if (this.isDateDisabled(date.date) || !this.value ||
             (Array.isArray(this.value) && this.value.length === 0)
-            )  {
+        ) {
             return false;
         }
 

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

@@ -1,6 +1,6 @@
 import { IgxCalendarBaseDirective } from './calendar-base';
 import { Directive, ViewChildren, ElementRef, QueryList, Input } from '@angular/core';
-import { KEYS, mkenum } from '../core/utils';
+import { mkenum } from '../core/utils';
 
 export const IgxCalendarView = mkenum({
     Month: 'month',
@@ -113,8 +113,8 @@ export class IgxMonthPickerBaseDirective extends IgxCalendarBaseDirective {
     /**
      * @hidden
      */
-    public activeViewDecadeKB(event, activeViewIdx = 0) {
-        if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
+    public activeViewDecadeKB(event: KeyboardEvent, activeViewIdx = 0) {
+        if (this.platform.isActivationKey(event)) {
             event.preventDefault();
             this.activeViewDecade(activeViewIdx);
         }