Calendar - expose views as separate components + advanced KB navigation

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

@@ -4,10 +4,10 @@
 </ng-template>
 
 <ng-template let-result #defaultMonth>
-    <span (click)="activeViewYear()" class="igx-calendar-picker__date">
+    <span tabindex="0" (keydown)="activeViewYearKB($event)" (click)="activeViewYear()" class="igx-calendar-picker__date">
         {{ formattedMonth(viewDate) }}
     </span>
-    <span (click)="activeViewDecade()" class="igx-calendar-picker__date">
+    <span tabindex="0" (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()" class="igx-calendar-picker__date">
         {{ formattedYear(viewDate) }}
     </span>
 </ng-template>
@@ -22,44 +22,41 @@ <h2 class="igx-calendar__header-date">
 
 <div *ngIf="isDefaultView" class="igx-calendar__body" [@animateView]="activeView" (swiperight)="previousMonth()" (swipeleft)="nextMonth()">
     <div class="igx-calendar-picker">
-        <div class="igx-calendar-picker__prev" (click)="previousMonth()">
+        <div tabindex="0" class="igx-calendar-picker__prev" (keydown.space)="previousMonthKB($event)" (click)="previousMonth()">
             <igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
         </div>
         <div>
             <ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: context">
             </ng-container>
         </div>
-        <div class="igx-calendar-picker__next" (click)="nextMonth()">
+        <div tabindex="0" class="igx-calendar-picker__next" (keydown.space)="nextMonthKB($event)" (click)="nextMonth()">
             <igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
         </div>
     </div>
 
-    <div class="igx-calendar__body-row">
-        <span *ngFor="let dayName of generateWeekHeader()" class="igx-calendar__label">
-            {{ dayName | titlecase }}
-        </span>
-    </div>
-
-    <div *ngFor="let week of getCalendarMonth; last as isLast; index as i; trackBy: rowTracker" class="igx-calendar__body-row" [@animateChange]="monthAction"
-        (@animateChange.done)="animationDone($event, isLast)">
-        <span [igxCalendarDate]="day" (onDateSelection)="childClicked($event)" *ngFor="let day of week; trackBy: dateTracker">
-            {{ formattedDate(day.date) }}
-        </span>
-    </div>
+    <igx-days-view [changeDaysView]="true" #days
+                   [animationAction]="monthAction"
+                   [locale]="locale"
+                   [value]="value"
+                   [weekStart]="weekStart"
+                   [viewDate]="viewDate"
+                   [selection]="selection"
+                   [disabledDates]="disabledDates"
+                   [specialDates]="specialDates"
+                   (onDateSelection)="childClicked($event)">
+    </igx-days-view>
 </div>
 
-<div *ngIf="isYearView" class="igx-calendar__body" [@animateView]="activeView">
-    <div class="igx-calendar__body-row--wrap">
-        <div (onMonthSelection)="changeMonth($event)" [igxCalendarMonth]="month" [index]="i" *ngFor="let month of months; index as i;">
-            {{ formattedMonth(month) | titlecase }}
-        </div>
-    </div>
-</div>
+<igx-months-view *ngIf="isYearView" [@animateView]="activeView" #months
+                                    [date]="viewDate"
+                                    [locale]="locale"
+                                    [monthFormat]="_formatOptions.month"
+                                    (onMonthSelection)="changeMonth($event)" >
+</igx-months-view>
 
-<div *ngIf="isDecadeView" class="igx-calendar__body" [@animateView]="activeView">
-    <div class="igx-calendar__body-column" (wheel)="onScroll($event)" (pan)="onPan($event)">
-        <span (onYearSelection)="changeYear($event)" [igxCalendarYear]="year" *ngFor="let year of decade">
-            {{ formattedYear(year) }}
-        </span>
-    </div>
-</div>
+<igx-years-view *ngIf="isDecadeView" [@animateView]="activeView" #decade
+                                     [date]="viewDate"
+                                     [locale]="locale"
+                                     [yearFormat]="_formatOptions.year"
+                                     (onYearSelection)="changeYear($event)">
+</igx-years-view>