Merge branch '9.0.x' into SKrastev/refactor-mrl-nav-test-9.0.x

Author: ChronosSF

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

@@ -317,7 +317,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     /**
      *@hidden
      */
-    public calendarModel: Calendar;
+    protected calendarModel: Calendar;
 
     /**
      * @hidden

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

@@ -841,9 +841,9 @@ describe('Multi-View Calendar - ', () => {
         })));
 
         it('When select a new month - should come at correct position', fakeAsync(() => {
-            const monthPicker = HelperTestFunctions.getCalendarSubHeader(fixture)
+            const secondMonthPicker = HelperTestFunctions.getCalendarSubHeader(fixture)
                 .querySelectorAll(HelperTestFunctions.CALENDAR_DATE_CSSCLASS)[2];
-            UIInteractions.simulateKeyDownEvent(monthPicker, 'Enter');
+            UIInteractions.simulateKeyDownEvent(secondMonthPicker, 'Enter');
             fixture.detectChanges();
             tick(100);
             const months = HelperTestFunctions.getMonthsFromMonthView(fixture);
@@ -878,7 +878,7 @@ describe('Multi-View Calendar - ', () => {
             UIInteractions.simulateKeyDownEvent(months[11], 'Enter');
             fixture.detectChanges();
             tick(100);
-            HelperTestFunctions.verifyCalendarSubHeaders(fixture, [new Date('2019-12-12'), new Date('2020-1-1'), new Date('2020-2-2')]);
+            HelperTestFunctions.verifyCalendarSubHeaders(fixture, [new Date('2019-11-12'), new Date('2019-12-1'), new Date('2020-1-2')]);
         }));
 
         it('When select a new year - should come at correct position', fakeAsync(() => {
@@ -887,9 +887,9 @@ describe('Multi-View Calendar - ', () => {
             fixture.detectChanges();
             HelperTestFunctions.verifyCalendarSubHeaders(fixture, [new Date('2019-12-12'), new Date('2020-1-1'), new Date('2020-2-2')]);
 
-            const monthPicker = HelperTestFunctions.getCalendarSubHeader(fixture)
+            const secondYearPicker = HelperTestFunctions.getCalendarSubHeader(fixture)
                 .querySelectorAll(HelperTestFunctions.CALENDAR_DATE_CSSCLASS)[3];
-            UIInteractions.simulateKeyDownEvent(monthPicker, 'Enter');
+            UIInteractions.simulateKeyDownEvent(secondYearPicker, 'Enter');
             fixture.detectChanges();
             tick(150);
             fixture.detectChanges();
@@ -920,7 +920,7 @@ describe('Multi-View Calendar - ', () => {
             tick(100);
             fixture.detectChanges();
 
-            HelperTestFunctions.verifyCalendarSubHeaders(fixture, [new Date('2021-12-12'), new Date('2022-1-1'), new Date('2022-2-2')]);
+            HelperTestFunctions.verifyCalendarSubHeaders(fixture, [new Date('2020-12-12'), new Date('2021-1-1'), new Date('2021-2-2')]);
         }));
 
     });

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(getViewDate(obj.index), $event)" (click)="activeViewYear(getViewDate(obj.index), $event)"
+    <span tabindex="0" #monthsBtn (keydown)="onActiveViewYearKB(getViewDate(obj.index), $event, obj.index)" (click)="onActiveViewYear(getViewDate(obj.index), obj.index, $event)"
         class="igx-calendar-picker__date">
         {{ formattedMonth(getViewDate(obj.index)) }}
     </span>
-    <span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event, getViewDate(obj.index))" (click)="activeViewDecade(getViewDate(obj.index))"
+    <span tabindex="0" #yearsBtn (keydown)="onActiveViewDecadeKB($event, getViewDate(obj.index), obj.index)" (click)="onActiveViewDecade(getViewDate(obj.index), obj.index)"
         class="igx-calendar-picker__date">
         {{ formattedYear(getViewDate(obj.index)) }}
     </span>
@@ -31,7 +31,7 @@ <h2 class="igx-calendar__header-date">
                 }">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
-        <div class="igx-calendar-picker__dates" *ngFor="let view of dayViews; index as i;" [style.width.%]="100/monthsViewNumber" [attr.data-month]="getMonth(i)">
+        <div class="igx-calendar-picker__dates" *ngFor="let view of monthsViewNumber | IgxMonthViewSlots; index as i;" [style.width.%]="100/monthsViewNumber" [attr.data-month]="i | IgxGetViewDate:viewDate:false">
             <ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: getContext(i)">
             </ng-container>
         </div>
@@ -46,11 +46,11 @@ <h2 class="igx-calendar__header-date">
     <div style="display: flex"
         [@animateChange]="animationAction"
         (@animateChange.done)="animationDone($event)">
-        <igx-days-view *ngFor="let view of dayViews; index as i;" [changeDaysView]="true" #days
+        <igx-days-view *ngFor="let view of monthsViewNumber | IgxMonthViewSlots; index as i;" [changeDaysView]="true" #days
                 [selection]="selection"
                 [locale]="locale"
                 [value]="value"
-                [viewDate]="getViewDate(i)"
+                [viewDate]="i | IgxGetViewDate:viewDate"
                 [weekStart]="weekStart"
                 [formatOptions]="formatOptions"
                 [formatViews]="formatViews"

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

@@ -87,6 +87,7 @@ let NEXT_ID = 0;
     templateUrl: 'calendar.component.html'
 })
 export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements AfterViewInit, OnDestroy {
+
     /**
      * Sets/gets the `id` of the calendar.
      *
@@ -142,23 +143,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     }
 
     set monthsViewNumber(val: number) {
-        if (this._monthsViewNumber === val || val <= 0) {
+        if (val < 1 ) {
             return;
-        } else if (this._monthsViewNumber < val) {
-            for (let i = this._monthsViewNumber; i < val; i++) {
-                const nextMonthDate = new Date(this.viewDate);
-                nextMonthDate.setMonth(nextMonthDate.getMonth() + i);
-                const monthView = {
-                    value: null,
-                    viewDate: nextMonthDate
-                };
-                this.dayViews.push(monthView);
-            }
-            this._monthsViewNumber = val;
-        } else {
-            this.dayViews.splice(val, this.dayViews.length - val);
-            this._monthsViewNumber = val;
         }
+
+        this._monthsViewNumber = val;
     }
 
     /**
@@ -252,8 +241,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @hidden
      * @internal
      */
-    @ViewChild('monthsBtn')
-    public monthsBtn: ElementRef;
+    @ViewChildren('monthsBtn')
+    public monthsBtns: QueryList<ElementRef>;
 
     /**
      * ViewChild that represents the decade view.
@@ -429,23 +418,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      */
     private _monthViewsChanges$: Subscription;
 
-    /**
-     * @hidden
-     * @internal
-     */
-    private defaultDayView = {
-        value: this.value,
-        viewDate: this.viewDate
-    };
-
-    /**
-     * Days which are displayed into the calendar days view
-     *
-     * @hidden
-     * @internal
-     */
-    public dayViews = [this.defaultDayView];
-
     public ngAfterViewInit() {
         this.setSiblingMonths(this.monthViews);
         this._monthViewsChanges$ = this.monthViews.changes.subscribe(c => {
@@ -494,7 +466,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     public previousMonth(isKeydownTrigger = false) {
-        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'month', -1);
+        this.viewDate = this.calendarModel.getPrevMonth(this.viewDate);
         this.animationAction = ScrollMonth.PREV;
         this.isKeydownTrigger = isKeydownTrigger;
     }
@@ -506,7 +478,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @internal
      */
     public nextMonth(isKeydownTrigger = false) {
-        this.viewDate = this.calendarModel.timedelta(this.viewDate, 'month', 1);
+        this.viewDate = this.calendarModel.getNextMonth(this.viewDate);
         this.animationAction = ScrollMonth.NEXT;
         this.isKeydownTrigger = isKeydownTrigger;
     }
@@ -564,8 +536,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @hidden
      * @internal
      */
-    public activeViewDecade(args: Date) {
-        super.activeViewDecade();
+    public onActiveViewDecade(args: Date, activeViewIdx: number) {
+        super.activeViewDecade(activeViewIdx);
         requestAnimationFrame(() => {
             if (this.dacadeView) {
                 this.dacadeView.date = args;
@@ -578,8 +550,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      * @hidden
      * @internal
      */
-    public activeViewDecadeKB(event, args: Date) {
-        super.activeViewDecadeKB(event, args);
+    public onActiveViewDecadeKB(event, args: Date, activeViewIdx: number) {
+        super.activeViewDecadeKB(event, activeViewIdx);
 
         requestAnimationFrame(() => {
             if (this.dacadeView) {
@@ -635,51 +607,53 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         this.callback = (next) => {
             const day = this.daysView.dates.find((item) => item.date.date.getTime() === next.getTime());
             if (day) {
-                this.daysView.navService.focusNextDate(day.nativeElement, args.key, true);
+                this.daysView.daysNavService.focusNextDate(day.nativeElement, args.key, true);
             }
         };
-        this.viewDate = this.calendarModel.timedelta(this.nextDate, 'month', 0);
+        this.viewDate = this.nextDate;
     }
 
     /**
      * @hidden
      * @intenal
      */
     public changeMonth(event: Date) {
-        this.viewDate = new Date(this.viewDate.getFullYear(), event.getMonth());
+        this.viewDate = this.calendarModel.getFirstViewDate(event, 'month', this.activeViewIdx);
         this.activeView = CalendarView.DEFAULT;
 
         requestAnimationFrame(() => {
-            if (this.monthsBtn) { this.monthsBtn.nativeElement.focus(); }
+            const elem = this.monthsBtns.find((e: ElementRef, idx: number) => idx === this.activeViewIdx);
+            if (elem) { elem.nativeElement.focus(); }
         });
     }
 
     /**
      * @hidden
      * @internal
      */
-    public activeViewYear(args: Date, event): void {
+    public onActiveViewYear(args: Date, activeViewIdx: number, event?): void {
         this.activeView = CalendarView.YEAR;
+        this.activeViewIdx = activeViewIdx;
         requestAnimationFrame(() => {
             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));
+        const month = this.monthsView.monthsRef.find((e) =>
+            e.index === parseInt(target.parentElement.attributes['data-month'].value, 10));
         if (month) { month.nativeElement.focus(); }
     }
 
     /**
      * @hidden
      * @internal
      */
-    public activeViewYearKB(args: Date, event): void {
+    public onActiveViewYearKB(args: Date, event, activeViewIdx: number): void {
         if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
             event.preventDefault();
-            this.activeViewYear(args, event);
+            this.onActiveViewYear(args, activeViewIdx, event);
         }
     }
 
@@ -722,22 +696,13 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         return date;
     }
 
-    /**
-     * @hidden
-     * @internal
-     */
-    public getMonth(i: number): number {
-        const date = this.calendarModel.timedelta(this.viewDate, 'month', i);
-        return date.getMonth();
-    }
-
     /**
      * Getter for the context object inside the calendar templates.
      * @hidden
      * @internal
      */
     public getContext(i: number) {
-        const date = this.calendarModel.timedelta(this.viewDate, 'month', i);
+        const date = this.getViewDate(i);
         return this.generateContext(date, i);
     }
 
@@ -941,8 +906,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     private generateContext(value: Date, i?: number) {
         const formatObject = {
             index: i,
-            monthView: () => this.activeViewYear(value, event),
-            yearView: () => this.activeViewDecade(value),
+            monthView: () => this.onActiveViewYear(value, i),
+            yearView: () => this.onActiveViewDecade(value, i),
             ...this.calendarModel.formatToParts(value, this.locale, this.formatOptions,
                 ['era', 'year', 'month', 'day', 'weekday'])
         };

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

@@ -17,6 +17,7 @@ import { IgxDayItemComponent } from './days-view/day-item.component';
 import { IgxMonthPickerComponent } from './month-picker/month-picker.component';
 import { IgxCalendarBaseDirective } from './calendar-base';
 import { IgxMonthPickerBaseDirective } from './month-picker-base';
+import { IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar } from './months-view.pipe';
 
 /**
  * @hidden
@@ -35,7 +36,9 @@ import { IgxMonthPickerBaseDirective } from './month-picker-base';
         IgxCalendarScrollMonthDirective,
         IgxMonthsViewComponent,
         IgxYearsViewComponent,
-        IgxMonthPickerComponent
+        IgxMonthPickerComponent,
+        IgxMonthViewSlotsCalendar,
+        IgxGetViewDateCalendar
     ],
     exports: [
         IgxCalendarComponent,

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

@@ -1,5 +1,13 @@
 import { DateRangeDescriptor, DateRangeType } from '../core/dates';
 
+/**
+ * @hidden
+ */
+enum TimeDeltaInterval {
+    Month = 'month',
+    Year = 'year'
+}
+
 const MDAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 const FEBRUARY = 1;
 
@@ -326,6 +334,26 @@ export class Calendar {
         return result;
     }
 
+    public getFirstViewDate(date: Date, interval: string, activeViewIdx: number) {
+        return this.timedelta(date, interval, -activeViewIdx);
+    }
+
+    public getNextMonth(date: Date) {
+        return this.timedelta(date, TimeDeltaInterval.Month, 1);
+    }
+
+    public getPrevMonth(date: Date) {
+        return this.timedelta(date, TimeDeltaInterval.Month, -1);
+    }
+
+    public getNextYear(date: Date) {
+        return this.timedelta(date, TimeDeltaInterval.Year, 1);
+    }
+
+    public getPrevYear(date: Date) {
+        return this.timedelta(date, TimeDeltaInterval.Year, -1);
+    }
+
     private generateICalendarDate(date: Date, year: number, month: number): ICalendarDate {
         return {
             date,

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

@@ -98,7 +98,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     /**
      * @hidden
      */
-    constructor(public navService: IgxDaysViewNavigationService) {
+    constructor(public daysNavService: IgxDaysViewNavigationService) {
         super();
     }
 
@@ -113,7 +113,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
      * @hidden
      */
     public ngOnInit() {
-        this.navService.monthView = this;
+        this.daysNavService.monthView = this;
     }
 
     /**
@@ -341,7 +341,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     public onKeydownArrow(event: KeyboardEvent) {
         event.preventDefault();
         event.stopPropagation();
-        this.navService.focusNextDate(event.target as HTMLElement, event.key);
+        this.daysNavService.focusNextDate(event.target as HTMLElement, event.key);
     }
 
     /**
@@ -351,7 +351,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     public onKeydownHome(event: KeyboardEvent) {
         event.preventDefault();
         event.stopPropagation();
-        this.getFirstMonthView().navService.focusHomeDate();
+        this.getFirstMonthView().daysNavService.focusHomeDate();
     }
 
     /**
@@ -361,6 +361,6 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     public onKeydownEnd(event: KeyboardEvent) {
         event.preventDefault();
         event.stopPropagation();
-        this.getLastMonthView().navService.focusEndDate();
+        this.getLastMonthView().daysNavService.focusEndDate();
     }
 }