Merge branch 'master' into amarinov/stringEnumsChange_master

Author: damyanpetev

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/core/styles/base/utilities/_mixins.scss

@@ -141,22 +141,24 @@
 }
 
 /// Generates CSS class names for all colors from
-/// the color palette for a given property, with
+/// for a given property and color palette, with
 /// optional prefix and suffix attached to the class name.
 /// @access private
 /// @param {string} $prop - The CSS property to assign the palette color to.
 /// @param {string} $prefix - A prefix to be attached to the class name.
 /// @param {string} $suffix - A suffix to be attached to the class name.
+/// @param {Map} $palette [$default-palette] - The igx palette to use to generate css class names for.
 /// @example scss Generate background classes with colors from the palette.
 ///   // Will generate class names like
 ///   // .my-primary-500-bg { ... };
 ///   @include gen-color-classes(
 ///     $prop: 'background-color',
-///     $prefix: 'my', $suffix: 'bg'
+///     $prefix: 'my',
+///     $suffix: 'bg'
 ///   );
 /// @requires {mixin} gen-color-class
-@mixin gen-color-classes($prop, $prefix, $suffix) {
-    @each $palette-name, $sub-palette in $default-palette {
+@mixin gen-color-classes($prop, $prefix, $suffix, $palette: $default-palette) {
+    @each $palette-name, $sub-palette in $palette {
         @each $variant, $color in $sub-palette {
             @if type-of($color) != 'map' {
                 @include gen-color-class($palette-name, $variant, $prefix, $suffix) {
@@ -211,12 +213,13 @@
 }
 
 /// Generates CSS class names for all colors from
-/// the color palette for a given property, with
+/// for a given property and color palette, with
 /// optional prefix and suffix attached to the class name.
 /// @access private
 /// @param {string} $prop - The CSS property to assign the palette color to.
 /// @param {string} $prefix [igx] - A prefix to be attached to the class name.
 /// @param {string} $suffix [null] - A suffix to be attached to the class name.
+/// @param {Map} $palette [$default-palette] - The igx palette to use to generate css class names for.
 /// @example scss Generate background classes with colors from the palette.
 ///   // Will generate class names like
 ///   // .igx-primary-500-bg { ... };
@@ -225,8 +228,8 @@
 ///     $suffix: 'bg'
 ///   );
 /// @requires {mixin} gen-color-classes
-@mixin igx-color-classes($prop, $suffix: null, $prefix: 'igx') {
-    @include gen-color-classes($prop, $prefix, $suffix);
+@mixin igx-color-classes($prop, $suffix: null, $prefix: 'igx', $palette: $default-palette) {
+    @include gen-color-classes($prop, $prefix, $suffix, $palette);
 }
 
 /// Parses a map of key value pairs