Merge remote-tracking branch 'origin/master' into valadzhov/time-picker-label-6905

Author: valadzhov

ROADMAP.md

@@ -2,6 +2,38 @@
 
 # Current Milestone
 
+## Milestone 13 (Due by October, 2020)
+
+1. Move PositionSettings to OverlaySettings [#7807](https://github.com/IgniteUI/igniteui-angular/issues/7807)
+2. Native add row [#5946](https://github.com/IgniteUI/igniteui-angular/issues/5946)
+3. Accept ISO 8601 Date-only string as input for IgxDateTimeEditorDirective [#6994](https://github.com/IgniteUI/igniteui-angular/issues/6994)
+4. Enhance hGrid multi-cell selection behavior [#5714](https://github.com/IgniteUI/igniteui-angular/issues/5714)
+5. Calendar ARIA [#6272](https://github.com/IgniteUI/igniteui-angular/issues/6272)
+6. Grid Accessibility Issues [#6341](https://github.com/IgniteUI/igniteui-angular/issues/6341)
+7. Implement cellEditExit and rowEditExit event [#7931](https://github.com/IgniteUI/igniteui-angular/issues/7931)
+8. Calendar keyboard navigation accessibility [#6275](https://github.com/IgniteUI/igniteui-angular/issues/6275)
+9. Column Moving using API [#6334](https://github.com/IgniteUI/igniteui-angular/issues/6334)
+10. Expose an event that indicates that the Grid is fully loaded [#7924](https://github.com/IgniteUI/igniteui-angular/issues/7924)
+11. View week numbers in datepicker and calendar [#6172](https://github.com/IgniteUI/igniteui-angular/issues/6172)
+12. Expose the functionality of private getRowData via a public method [#7930](https://github.com/IgniteUI/igniteui-angular/issues/7930)
+13. Expose templates for all ESF UI parts [#7221](https://github.com/IgniteUI/igniteui-angular/issues/7221)
+14. [igx-tab] [igx-nav-drawer] Add animations option [#7157](https://github.com/IgniteUI/igniteui-angular/issues/7157)
+15. Choose label -text for igxTimePicker [#6905](https://github.com/IgniteUI/igniteui-angular/issues/6905)
+16. Implement factory functions for creating OverlaySettings [#7941](https://github.com/IgniteUI/igniteui-angular/issues/7941)
+17. igx-grid: Set grouped column width in percentage [#4155](https://github.com/IgniteUI/igniteui-angular/issues/4155)
+18. IgxGrid: Excel Style Filter "Apply" on "Enter" [#5812](https://github.com/IgniteUI/igniteui-angular/issues/5812)
+19. Grid export visualization [#7738](https://github.com/IgniteUI/igniteui-angular/issues/7738)
+20. Allow setting of the name of the worksheet in exported workbook in IgxExcelExporter [#7396](https://github.com/IgniteUI/igniteui-angular/issues/7396)
+21. Enhance behavior of the Select All checkbox in Excel Style Filtering [#6617](https://github.com/IgniteUI/igniteui-angular/issues/6617)
+22. Igx-grid: Select all rows in a group [#7344](https://github.com/IgniteUI/igniteui-angular/issues/7344)
+
+## Going down the road
+
+1. Tile Manager
+2. Visual Cell merging
+3. RTL Support across Ignite UI for Angular components
+# Previous Milestones 
+
 ## Milestone 12 (Due by August 17th, 2020)
 
 1. **[DONE]** igx-grid improve IGridEditEventArgs [#4965](https://github.com/IgniteUI/igniteui-angular/issues/4965)
@@ -16,27 +48,19 @@
 10. **[DONE]** igx-grid - pre-select rows [#6653](https://github.com/IgniteUI/igniteui-angular/issues/6653)
 11. **[DONE]** Average and Sum are shown on the Ship country level [#7334](https://github.com/IgniteUI/igniteui-angular/issues/7334)
 12. **[DONE]** Dock Manager Better Default Themes [#7578](https://github.com/IgniteUI/igniteui-angular/issues/7578)
-13. Expose templates for all ESF UI parts [#7221](https://github.com/IgniteUI/igniteui-angular/issues/7221)
+13. **[DONE]** Expose templates for all ESF UI parts [#7221](https://github.com/IgniteUI/igniteui-angular/issues/7221)
 14. **[DONE]** Calendar events when user changes month/year [#7039](https://github.com/IgniteUI/igniteui-angular/issues/7039)
-15. igxGrid default column display templates per-type [#7224](https://github.com/IgniteUI/igniteui-angular/issues/7224)
-16. Provide "Unfreeze All" option under Freeze button on Data Grid & Tree Grid
+15. **[DONE]** igxGrid default column display templates per-type [#7224](https://github.com/IgniteUI/igniteui-angular/issues/7224)
+16. **[DONE]** Provide "Unfreeze All" option under Freeze button on Data Grid & Tree Grid
 To Be Updated [#6549](https://github.com/IgniteUI/igniteui-angular/issues/6549)
-17. Exposing onActiveNodeChange output in the Grid [#7601](https://github.com/IgniteUI/igniteui-angular/issues/7601)
+17. **[DONE]** Exposing onActiveNodeChange output in the Grid [#7601](https://github.com/IgniteUI/igniteui-angular/issues/7601)
 18. **[DONE]** Refactor commit method of IgxHierarchicalTransactionService to accept same parameters as base type [#5205](https://github.com/IgniteUI/igniteui-angular/issues/5205)
 19. **[DONE]** Tooltip for grid cell text content [#6215](https://github.com/IgniteUI/igniteui-angular/issues/6215)
 20. **[DONE]** Add tooltip to column summary [#6505](https://github.com/IgniteUI/igniteui-angular/issues/6505)
 21. **[DONE]** IgxToast `show` should take a message param [#7156](https://github.com/IgniteUI/igniteui-angular/issues/7156)
 22. **[DONE]** IgxGridState working with IgxHierarchicalGrid [#7025](https://github.com/IgniteUI/igniteui-angular/issues/7025)
 23. **[DONE]** Sorting Indicator on all Grid components [#7493](https://github.com/IgniteUI/igniteui-angular/issues/7493)
 
-
-## Going down the road
-
-1. Tile Manager
-2. Visual Cell merging
-3. RTL Support across Ignite UI for Angular components
-# Previous Milestones 
-
 ## Milestone 11 (Released June 2nd, 2020)
 
 1.  **[DONE]** Dock Manger - Public Preview [#5980](https://github.com/IgniteUI/igniteui-angular/issues/5980)

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

@@ -10,21 +10,24 @@ import {
     ViewChild
 } from '@angular/core';
 import { IgxIconModule } from '../icon/public_api';
+import { mkenum } from '../core/utils';
 
 let NEXT_ID = 0;
-
-export enum IgxAvatarSize {
-    SMALL = 'small',
-    MEDIUM = 'medium',
-    LARGE = 'large'
-}
-
-export enum IgxAvatarType {
-    INITIALS = 'initials',
-    IMAGE = 'image',
-    ICON = 'icon',
-    CUSTOM = 'custom',
-}
+export const IgxAvatarSize = mkenum({
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large'
+});
+export type IgxAvatarSize = (typeof IgxAvatarSize)[keyof typeof IgxAvatarSize];
+
+export const IgxAvatarType = mkenum({
+    INITIALS: 'initials',
+    IMAGE: 'image',
+    ICON: 'icon',
+    CUSTOM: 'custom'
+});
+
+export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
 
 /**
  * Avatar provides a way to display an image, icon or initials to the user.

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

@@ -1,19 +1,21 @@
 import { CommonModule } from '@angular/common';
 import { Component, HostBinding, Input, NgModule } from '@angular/core';
 import { IgxIconModule } from '../icon/public_api';
+import { mkenum } from '../core/utils';
 
 let NEXT_ID = 0;
 
 /**
  * Determines the igxBadge type
  */
-export enum IgxBadgeType {
-    PRIMARY = 'primary',
-    INFO = 'info',
-    SUCCESS = 'success',
-    WARNING = 'warning',
-    ERROR = 'error'
-}
+export const IgxBadgeType = mkenum({
+    PRIMARY: 'primary',
+    INFO: 'info',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    ERROR: 'error'
+});
+export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
 /**
  * Badge provides visual notifications used to decorate avatars, menus, etc.
  *

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

@@ -3,17 +3,18 @@ import { WEEKDAYS, Calendar, isDateInRanges, IFormattingOptions, IFormattingView
 import { ControlValueAccessor } from '@angular/forms';
 import { DateRangeDescriptor } from '../core/dates';
 import { Subject } from 'rxjs';
-import { isDate } from '../core/utils';
+import { isDate, mkenum } from '../core/utils';
 import { CalendarView } from './month-picker-base';
 
 /**
- * Sets the selction type - single, multi or range.
+ * Sets the selection type - single, multi or range.
  */
-export enum CalendarSelection {
-    SINGLE = 'single',
-    MULTI = 'multi',
-    RANGE = 'range'
-}
+export const CalendarSelection = mkenum({
+    SINGLE: 'single',
+    MULTI: 'multi',
+    RANGE: 'range'
+});
+export type CalendarSelection = (typeof CalendarSelection)[keyof typeof CalendarSelection];
 
 export enum ScrollMonth {
     PREV = 'prev',

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

@@ -1,6 +1,6 @@
 <div *ngIf="isDefaultView" [@animateView]="activeView" (@animateView.done)="viewRendered($event)" class="igx-calendar__body" (swiperight)="previousYear()" (swipeleft)="nextYear()">
     <div class="igx-calendar-picker">
-        <div tabindex="0" class="igx-calendar-picker__prev" (click)="previousYear()" (keydown)="previousYearKB($event)" [ngStyle]="{
+        <div tabindex="0" class="igx-calendar-picker__prev" (click)="previousYear()" (keydown)="changeYearKB($event, false)" [ngStyle]="{
             'min-width.%': 25,
             'left': 0
         }">
@@ -11,7 +11,7 @@
                 {{ formattedYear(viewDate) }}
             </span>
         </div>
-        <div tabindex="0" class="igx-calendar-picker__next" (click)="nextYear()" (keydown)="nextYearKB($event)" [ngStyle]="{
+        <div tabindex="0" class="igx-calendar-picker__next" (click)="nextYear()" (keydown)="changeYearKB($event)" [ngStyle]="{
             'min-width.%': 25,
             'right': 0
         }">

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

@@ -275,6 +275,73 @@ describe('IgxMonthPicker', () => {
         expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
     });
 
+    it('should not emit onSelection when navigating to the next year', () => {
+        const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+        fixture.detectChanges();
+
+        const dom = fixture.debugElement;
+        const monthPicker = fixture.componentInstance.monthPicker;
+        spyOn(monthPicker.onSelection, 'emit').and.callThrough();
+
+        const next = dom.query(By.css('.igx-calendar-picker__next'));
+        let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+        UIInteractions.simulateClickEvent(next.nativeElement);
+        fixture.detectChanges();
+        UIInteractions.triggerKeyDownEvtUponElem('Enter', next.nativeElement);
+        fixture.detectChanges();
+
+        expect(monthPicker.onSelection.emit).toHaveBeenCalledTimes(0);
+        yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2021');
+    });
+
+    it('should not emit onSelection when navigating to the previous year', () => {
+        const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+        fixture.detectChanges();
+
+        const dom = fixture.debugElement;
+        const monthPicker = fixture.componentInstance.monthPicker;
+        spyOn(monthPicker.onSelection, 'emit').and.callThrough();
+
+        const prev = dom.query(By.css('.igx-calendar-picker__prev'));
+        let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+        UIInteractions.triggerKeyDownEvtUponElem('Enter', prev.nativeElement);
+        fixture.detectChanges();
+        UIInteractions.simulateClickEvent(prev.nativeElement);
+        fixture.detectChanges();
+
+        expect(monthPicker.onSelection.emit).toHaveBeenCalledTimes(0);
+        yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2017');
+    });
+
+    it('should not emit onSelection when changing the year', () => {
+        const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
+        fixture.detectChanges();
+
+        const dom = fixture.debugElement;
+        const monthPicker = fixture.componentInstance.monthPicker;
+        spyOn(monthPicker.onSelection, 'emit').and.callThrough();
+
+        let yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+
+        UIInteractions.simulateClickEvent(yearBtn.nativeElement);
+        fixture.detectChanges();
+
+        const year = dom.nativeElement.querySelector('.igx-calendar__year');
+        UIInteractions.simulateClickEvent(year);
+        fixture.detectChanges();
+
+        expect(monthPicker.onSelection.emit).toHaveBeenCalledTimes(0);
+        yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2016');
+    });
+
     it('should open years view, navigate through and select an year via KB.', () => {
         const fixture = TestBed.createComponent(IgxMonthPickerSampleComponent);
         fixture.detectChanges();

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

@@ -124,13 +124,11 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
         super.activeViewDecadeKB(event);
 
         if (event.key === KEYS.RIGHT_ARROW || event.key === KEYS.RIGHT_ARROW_IE) {
-            event.preventDefault();
-            this.nextYear();
+            this.nextYear(event);
         }
 
         if (event.key === KEYS.LEFT_ARROW || event.key === KEYS.LEFT_ARROW_IE) {
-            event.preventDefault();
-            this.previousYear();
+            this.previousYear(event);
         }
 
         requestAnimationFrame(() => {
@@ -152,48 +150,10 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
     /**
      * @hidden
      */
-    public nextYear() {
-        this.yearAction = 'next';
-        this.previousViewDate = this.viewDate;
-        this.viewDate = this.calendarModel.getNextYear(this.viewDate);
-
-        this.selectDate(this.viewDate);
-        this.onSelection.emit(this.selectedDates);
-    }
-
-    /**
-     * @hidden
-     */
-    public nextYearKB(event) {
+    public changeYearKB(event, next = true) {
         if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
-            event.preventDefault();
             event.stopPropagation();
-
-            this.nextYear();
-        }
-    }
-
-    /**
-     * @hidden
-     */
-    public previousYear() {
-        this.yearAction = 'prev';
-        this.previousViewDate = this.viewDate;
-        this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
-
-        this.selectDate(this.viewDate);
-        this.onSelection.emit(this.selectedDates);
-    }
-
-    /**
-     * @hidden
-     */
-    public previousYearKB(event) {
-        if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
-            event.preventDefault();
-            event.stopPropagation();
-
-            this.previousYear();
+            next ? this.nextYear(event) :  this.previousYear(event);
         }
     }
 
@@ -205,9 +165,6 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
         this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
         this.activeView = CalendarView.DEFAULT;
 
-        this.selectDate(event);
-        this.onSelection.emit(this.selectedDates);
-
         requestAnimationFrame(() => {
             if (this.yearsBtn) { this.yearsBtn.nativeElement.focus(); }
         });
@@ -252,8 +209,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
      * @hidden
      */
     @HostListener('keydown.pageup', ['$event'])
-    public onKeydownPageUp(event: KeyboardEvent) {
-        event.preventDefault();
+    public previousYear(event?: KeyboardEvent) {
+        event?.preventDefault();
         this.yearAction = 'prev';
         this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getPrevYear(this.viewDate);
@@ -263,8 +220,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBaseDirective {
      * @hidden
      */
     @HostListener('keydown.pagedown', ['$event'])
-    public onKeydownPageDown(event: KeyboardEvent) {
-        event.preventDefault();
+    public nextYear(event?: KeyboardEvent) {
+        event?.preventDefault();
         this.yearAction = 'next';
         this.previousViewDate = this.viewDate;
         this.viewDate = this.calendarModel.getNextYear(this.viewDate);

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

@@ -12,6 +12,7 @@ import {
     SimpleChanges
 } from '@angular/core';
 import { IgxButtonModule } from '../directives/button/button.directive';
+import { mkenum } from '../core/utils';
 
 let NEXT_ID = 0;
 
@@ -200,10 +201,11 @@ export class IgxCardFooterDirective {
  * ```
  */
 
-export enum IgxCardType {
-    ELEVATED = 'elevated',
-    OUTLINED = 'outlined'
-}
+export const IgxCardType = mkenum({
+    ELEVATED: 'elevated',
+    OUTLINED: 'outlined'
+});
+export type IgxCardType = (typeof IgxCardType)[keyof typeof IgxCardType];
 
 @Component({
     selector: 'igx-card',
@@ -276,10 +278,11 @@ export class IgxCardComponent {
     public horizontal = false;
 }
 
-export enum IgxCardActionsLayout {
-    START = 'start',
-    JUSTIFY = 'justify',
-}
+export const IgxCardActionsLayout = mkenum({
+    START: 'start',
+    JUSTIFY: 'justify'
+});
+export type IgxCardActionsLayout = (typeof IgxCardActionsLayout)[keyof typeof IgxCardActionsLayout];
 
 /**
  * IgxCardActions is container for the card actions.