Merge branch '8.2.x' of https://github.com/IgniteUI/igniteui-angular into mkirova/fix-5552-master

Author: 3phase

CHANGELOG.md

@@ -24,6 +24,9 @@ Next example shows how you can use the Fluent theme.
 }
 ```
 
+### Theme Changes
+`igx-badge-theme` - Removed the `$disable-shadow` property to mitigate confusion when specifying `$shadow` explicitly.
+
 For more information about the theming please read our [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index.html)  
 
 ### New Features
@@ -64,6 +67,8 @@ For more information about the theming please read our [documentation](https://w
     - introduced a new `readonly` property that doesn't allow user interaction to change the state, but keeps the default active style. Intended for integration in complex controls that handle the interaction and control the checkbox instead through binding.
 - `IgxOverlay`
     - introduced a new `ContainerPositionStrategy`. The new strategy positions the element inside the containing outlet based on the directions passed in trough PositionSettings.
+- `IgxChip`
+    - add `onSelectionDone` event that is triggered after all animations and transitions related to selection have ended.
 
 ### General
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/migrations/update-8_2_0/changes/theme-props.json

@@ -0,0 +1,8 @@
+{
+    "$schema": "../../common/schema/theme-props.schema.json",
+    "changes": [{
+        "name": "$disable-shadow",
+        "remove": true,
+        "owner": "igx-badge-theme"
+    }]
+}

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

@@ -280,7 +280,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
 
     /**
      * Selects a button by its index.
-     * @memberOf {@link IgxButtonGroupComponent}
      *```typescript
      *@ViewChild("MyChild")
      *private buttonG: IgxButtonGroupComponent;
@@ -289,6 +288,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      *    this.cdr.detectChanges();
      *}
      *```
+     * @memberOf {@link IgxButtonGroupComponent}
      */
     public selectButton(index: number) {
         if (index >= this.buttons.length || index < 0) {
@@ -327,7 +327,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
 
     /**
      * Deselects a button by its index.
-     * @memberOf {@link IgxButtonGroupComponent}
      * ```typescript
      *@ViewChild("MyChild")
      *private buttonG: IgxButtonGroupComponent;
@@ -336,6 +335,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      *    this.cdr.detectChanges();
      *}
      * ```
+     * @memberOf {@link IgxButtonGroupComponent}
      */
     public deselectButton(index: number) {
         if (index >= this.buttons.length || index < 0) {

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

@@ -3,6 +3,7 @@ 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';
 
 /**
  * Sets the selction type - single, multi or range.
@@ -243,7 +244,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
     /**
      *@hidden
      */
-    private rangeStarted = false;
+    public rangeStarted = false;
 
     /**
     *@hidden
@@ -580,12 +581,14 @@ export class IgxCalendarBase implements ControlValueAccessor {
      */
     public selectDate(value: Date | Date[]) {
         if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
-            return new Date();
+            return;
         }
 
         switch (this.selection) {
             case CalendarSelection.SINGLE:
-                this.selectSingle(value as Date);
+                if (isDate(value)) {
+                    this.selectSingle(value as Date);
+                }
                 break;
             case CalendarSelection.MULTI:
                 this.selectMultiple(value);
@@ -600,7 +603,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
      * Deselects date(s) (based on the selection type).
      */
     public deselectDate(value?: Date | Date[]) {
-        if (this.selectedDates === null || this.selectedDates === []) {
+        if (this.selectedDates === null || this.selectedDates.length === 0) {
             return;
         }
 

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

@@ -4,11 +4,11 @@
 </ng-template>
 
 <ng-template let-result #defaultMonth let-obj>
-    <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()"
+    <span tabindex="0" #monthsBtn (keydown)="activeViewYearKB(getViewDate(obj.index), $event)" (click)="activeViewYear(getViewDate(obj.index), $event)"
         class="igx-calendar-picker__date">
         {{ formattedMonth(getViewDate(obj.index)) }}
     </span>
-    <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()"
+    <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event, getViewDate(obj.index))" (click)="activeViewDecade(getViewDate(obj.index))"
         class="igx-calendar-picker__date">
         {{ formattedYear(getViewDate(obj.index)) }}
     </span>
@@ -26,21 +26,15 @@ <h2 class="igx-calendar__header-date">
     (swipeleft)="nextMonth()">
     <div class="igx-calendar-picker">
         <div tabindex="0" class="igx-calendar-picker__prev" #prevMonthBtn
-            igxCalendarScrollMonth [startScroll]="startPrevMonthScroll" [stopScroll]="stopMonthScroll"  [ngStyle]="{
-                    'min-width.%': 100/(monthsViewNumber*7),
-                    'left': 0
-                }">
+            igxCalendarScrollMonth [startScroll]="startPrevMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{'min-width.%': 100/(monthsViewNumber*7)}">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
-        <div *ngFor="let view of dayViews; index as i;" [style.width.%]="100/monthsViewNumber">
+        <div *ngFor="let view of dayViews; index as i;" [style.width.%]="100/monthsViewNumber" [attr.data-month]="getMonth(i)">
             <ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: getContext(i)">
             </ng-container>
         </div>
         <div tabindex="0" class="igx-calendar-picker__next" #nextMonthBtn 
-            igxCalendarScrollMonth [startScroll]="startNextMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{
-                    'min-width.%': 100/(monthsViewNumber*7),
-                    'right': 0
-                }">
+            igxCalendarScrollMonth [startScroll]="startNextMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{'min-width.%': 100/(monthsViewNumber*7)}">
             <igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
         </div>
     </div>

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

@@ -1908,6 +1908,8 @@ describe('IgxCalendar', () => {
 
             date = calendar.daysView.dates.find(d => getDate(d).getTime() === new Date(2017, 7, 5).getTime());
             date.nativeElement.focus();
+            fixture.detectChanges();
+            await wait(400);
 
             UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowRight');
             fixture.detectChanges();

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

@@ -113,7 +113,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     }
 
     set monthsViewNumber(val: number) {
-        if (this._monthsViewNumber === val || val === 0) {
+        if (this._monthsViewNumber === val || val <= 0) {
             return;
         } else if (this._monthsViewNumber < val) {
             for (let i = this._monthsViewNumber; i < val; i++) {
@@ -348,7 +348,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
      */
     private defaultDayView = {
         value: this.value,
-        viewDate: this.viewDate,
+        viewDate: this.viewDate
     };
 
     /**
@@ -462,11 +462,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     /**
      * @hidden
      */
-    public activeViewDecade() {
+    public activeViewDecade(args: Date) {
         super.activeViewDecade();
-
         requestAnimationFrame(() => {
             if (this.dacadeView) {
+                this.dacadeView.date = args;
                 this.dacadeView.el.nativeElement.focus();
             }
         });
@@ -475,11 +475,12 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     /**
      * @hidden
      */
-    public activeViewDecadeKB(event) {
-        super.activeViewDecadeKB(event);
+    public activeViewDecadeKB(event, args: Date) {
+        super.activeViewDecadeKB(event, args);
 
         requestAnimationFrame(() => {
             if (this.dacadeView) {
+                this.dacadeView.date = args;
                 this.dacadeView.el.nativeElement.focus();
             }
         });
@@ -520,6 +521,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     public viewChanged(event) {
         this.viewDate = this.calendarModel.timedelta(event, 'month', 0);
     }
+
     /**
      * @hidden
      */
@@ -528,27 +530,34 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
         this.activeView = CalendarView.DEFAULT;
 
         requestAnimationFrame(() => {
-            this.monthsBtn.nativeElement.focus();
+            if (this.monthsBtn) { this.monthsBtn.nativeElement.focus(); }
         });
     }
 
     /**
      * @hidden
      */
-    public activeViewYear(): void {
+    public activeViewYear(args: Date, event): void {
         this.activeView = CalendarView.YEAR;
         requestAnimationFrame(() => {
-            this.monthsView.dates.find((date) => date.isCurrentMonth).nativeElement.focus();
+            this.monthsView.date = args;
+            this.focusMonth(event.target);
         });
     }
 
+    private focusMonth(target: HTMLElement) {
+        const month = this.monthsView.dates.find((date) =>
+            date.index === parseInt(target.parentElement.attributes['data-month'].value, 10));
+        if (month) { month.nativeElement.focus(); }
+    }
+
     /**
      * @hidden
      */
-    public activeViewYearKB(event): void {
+    public activeViewYearKB(args: Date, event): void {
         if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
             event.preventDefault();
-            this.activeViewYear();
+            this.activeViewYear(args, event);
         }
     }
 
@@ -561,7 +570,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     public deselectDate(value?: Date | Date[]) {
         super.deselectDate(value);
 
-        this.daysView.selectedDates = this.selectedDates;
+        this.monthViews.forEach((view) => {
+            view.selectedDates = this.selectedDates;
+            view.rangeStarted = false;
+        });
         this._onChangeCallback(this.selectedDates);
     }
 
@@ -573,6 +585,14 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
         return date;
     }
 
+    /**
+     * @hidden
+     */
+    public getMonth(i: number): number {
+        const date = this.calendarModel.timedelta(this.viewDate, 'month', i);
+        return date.getMonth();
+    }
+
     /**
      * @hidden
      */
@@ -588,6 +608,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     public onKeydownPageUp(event: KeyboardEvent) {
         event.preventDefault();
 
+        if (this.activeView !== CalendarView.DEFAULT) {
+            return;
+        }
+
         const activeDate = this.daysView.dates.find((date) => date.nativeElement === document.activeElement);
         if (activeDate) {
             this.daysView.nextDate = new Date(activeDate.date.date);
@@ -622,7 +646,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     public onKeydownPageDown(event: KeyboardEvent) {
         event.preventDefault();
 
-        this.nextMonth(true);
+        if (this.activeView !== CalendarView.DEFAULT) {
+            return;
+        }
 
         const activeDate = this.daysView.dates.find((date) => date.nativeElement === document.activeElement);
         if (activeDate) {
@@ -647,6 +673,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
                 if (dayItem) { dayItem.nativeElement.focus(); }
             };
         }
+
+        this.nextMonth(true);
     }
 
     /**
@@ -760,8 +788,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
     private generateContext(value: Date, i?: number) {
         const formatObject = {
             index: i,
-            monthView: () => this.activeViewYear(),
-            yearView: () => this.activeViewDecade(),
+            monthView: () => this.activeViewYear(value, event),
+            yearView: () => this.activeViewDecade(value),
             ...this.calendarModel.formatToParts(value, this.locale, this.formatOptions,
                 ['era', 'year', 'month', 'day', 'weekday'])
         };

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

@@ -135,9 +135,6 @@ export class IgxDayItemComponent {
         return isDateInRanges(this.date.date, this.specialDates);
     }
 
-    @HostBinding('attr.tabindex')
-    public tabindex = 0;
-
     @HostBinding('class.igx-calendar__date')
     public get defaultCSS(): boolean {
         return this.date.isCurrentMonth && !(this.isWeekend && this.selected);
@@ -153,6 +150,11 @@ export class IgxDayItemComponent {
         return this.selection !== CalendarSelection.RANGE;
     }
 
+    @HostBinding('attr.tabindex')
+    public get tabindex(): number {
+        return this.isDisabled || this.isHidden ? -1 : 0;
+    }
+
     private _selected = false;
 
     constructor(private elementRef: ElementRef) { }