calendar: year aria updated

src/module/enterprise/calendar/calendar.component.html

@@ -7,16 +7,10 @@
         <div *ngIf="(currentState === 'year')"> {{currrentDate | date : 'y'}} </div>
 
         <div class="calendar-navigation">
-            <em id={{prevbtnid}} role="button" 
-            [attr.aria-pressed]="prevMonthPressed" 
-            (keyup.enter)="previous()" aria-label="previous month"
+            <em id={{prevbtnid}} role="button" [attr.aria-pressed]="prevMonthPressed" (keyup.enter)="previous()" aria-label="previous month"
                 tabindex="1" style="padding-right: 20px;" class="fa fa-chevron-left" aria-hidden="true" (click)="previous()"></em>
-            <em id="{{nextbtnid}}" role="button" 
-            [attr.aria-pressed]="nextMonthPressed" (keyup.enter)="next()" 
-            aria-label="next month"
-                tabindex="1" style="padding-right: 20px;" 
-                class="fa fa-chevron-right" aria-hidden="true" 
-                (click)="next()"></em>
+            <em id="{{nextbtnid}}" role="button" [attr.aria-pressed]="nextMonthPressed" (keyup.enter)="next()" aria-label="next month"
+                tabindex="1" style="padding-right: 20px;" class="fa fa-chevron-right" aria-hidden="true" (click)="next()"></em>
         </div>
     </div>
     <div>{{title}}</div>
@@ -35,5 +29,6 @@
 </amexio-calendar-month>
 <amexio-calendar-day-timewise *ngIf="(currentState === 'week' || currentState === 'day')" [headers]="displayHeaders" [calendar-data]="calendarWeekData"
     (onHeaderClicked)="onDaytimeHeaderClick($event)" (onEventClicked)="onDayTimeWiseEvent($event)"> </amexio-calendar-day-timewise>
-<amexio-calendar-year *ngIf="(currentState === 'year')" [headers]="displayHeaders" [calendar-data]="calendarMonthData" (onHeaderClicked)="onYearHeaderClicked($event)"
+<amexio-calendar-year *ngIf="(currentState === 'year')" [headers]="displayHeaders" [calendar-data]="calendarMonthData" (onLeftNavigate)="previous()"
+    (onRightNavigate)="next()" (onTopNavigate)="previous()" (onBottomNavigate)="next()" (onHeaderClicked)="onYearHeaderClicked($event)"
     (onEventClicked)="onYearEvent($event)"> </amexio-calendar-year>

src/module/enterprise/calendar/calendar.year.component.html

@@ -14,10 +14,12 @@
                 </thead>
                 <tbody>
                     <tr *ngFor="let week of month.data" class="calendar-week-timeslot">
-                        <td [ngClass]="{'calendar-inactive': (!day.isActivePeriod),                                         
+                        <td class="focuscls" attr.id="{{day.id}}" tabindex="1" role="button" [attr.aria-pressed]="isdaypressed" (keyup.arrowright)="navigateright(day)"
+                            (keyup.arrowleft)="navigateleft(day)" (keyup.arrowdown)="navigatedown(day)" (keyup.arrowup)="navigateup(day)"
+                            attr.aria-label="{{day.date | date : 'EEEE, MMMM d, y'}} " [ngClass]="{'calendar-inactive': (!day.isActivePeriod),                                         
                                         'calendar-year-month-hasevent': (day.isActivePeriod && day.isEvent)}" (click)="eventClicked($event, day)"
-                            *ngFor="let day of week" style="text-align: center;">
-                            <div [ngClass]="{'calendar-active-box calendar-year-month-today': (day.isActivePeriod && day.isActive)}" style="height:30px; width: 30px;"
+                            (keyup.enter)="eventClicked($event, day)" *ngFor="let day of week" style="text-align: center;">
+                            <div  [ngClass]="{'calendar-active-box calendar-year-month-today': (day.isActivePeriod && day.isActive)}" style="height:30px; width: 30px;"
                                 style="text-align: center; cursor: pointer;">
                                 {{day.date | date :'dd'}}
                             </div>

src/module/enterprise/calendar/calendar.year.component.ts

@@ -6,7 +6,14 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
     styleUrls: ['./calendar.common.css'],
 })
 export class AmexioCalendarYearComponent {
-
+    rightfocusrowindex: number;
+    rightfocusinnerindex: number;
+    rightfocuscalindex: number;
+    isextremeright = false;
+    leftfocusrowindex: number;
+    leftfocusinnerindex: number;
+    leftfocuscalindex: number;
+    isextremeleft = false;
     @Input('headers') headers: any[];
 
     @Input('calendar-data') calendaryData: any[];
@@ -15,10 +22,20 @@ export class AmexioCalendarYearComponent {
 
     @Output('onHeaderClicked') onHeaderClicked = new EventEmitter<any>();
 
+    @Output('onLeftNavigate') onleftnavigate = new EventEmitter<any>();
+
+    @Output('onRightNavigate') onrightnavigate = new EventEmitter<any>();
+
+    @Output('onTopNavigate') ontopnavigate = new EventEmitter<any>();
+
+    @Output('onBottomNavigate') onbottomnavigate = new EventEmitter<any>();
+
+    isdaypressed = false;
     constructor() {
     }
 
     eventClicked(event1: any, eventData: any) {
+        this.isdaypressed = true;
         const eventObject = {
             event: event1,
             this: eventData,
@@ -29,4 +46,164 @@ export class AmexioCalendarYearComponent {
     monthClicked(event: any) {
         this.onHeaderClicked.emit(event);
     }
+    navigateright(day: any) {
+        this.calendaryData.forEach((calendarrow: any, rowindex: number) => {
+            calendarrow.data.forEach((calendardata: any, innerindex: number) => {
+                calendardata.forEach((calelement: any, calindex: number) => {
+                    if (day.id === calelement.id) {
+                        this.refactorednavigateright(calindex, calendardata, innerindex, calendarrow, rowindex);
+                    }
+                });
+            });
+        });
+        if (!this.isextremeright) {
+            const itemid = this.calendaryData[this.rightfocusrowindex].data[this.rightfocusinnerindex][this.rightfocuscalindex];
+            document.getElementById(itemid['id']).focus();
+        }
+    }
+
+    refactorednavigateright(calindex: number, calendardata: any, innerindex: number, calendarrow: any, rowindex: number) {
+        if (calindex === (calendardata.length - 1) &&
+            innerindex === (calendarrow.data.length - 1) &&
+            rowindex === (this.calendaryData.length - 1)) {
+            this.onrightnavigate.emit();
+            this.isextremeright = true;
+            this.setExtremeFocus();
+        } else if (calindex === (calendardata.length - 1)) {
+            // chk condn for last row
+            if ((calendarrow.data.length - 1) === innerindex) {
+                this.rightfocusrowindex = rowindex + 1; // by inc:-> next month
+                this.rightfocusinnerindex = 0; // by inc:-> next row in same month
+                this.rightfocuscalindex = 0; // by inc:-> next day
+            } else {
+                this.rightfocusrowindex = rowindex; // by inc:-> next month
+                this.rightfocusinnerindex = innerindex + 1; // by inc:-> next row in same month
+                this.rightfocuscalindex = 0; // by inc:-> next day
+            }
+        } else {
+            this.rightfocusrowindex = rowindex; // by inc:-> next month
+            this.rightfocusinnerindex = innerindex; // by inc:-> next row in same month
+            this.rightfocuscalindex = calindex + 1; // by inc:-> next day
+        }
+    }
+
+    navigateleft(day: any) {
+        this.calendaryData.forEach((calendarrow: any, rowindex: number) => {
+            calendarrow.data.forEach((calendardata: any, innerindex: number) => {
+                calendardata.forEach((calelement: any, calindex: number) => {
+                    if (day.id === calelement.id) {
+                        this.refactoredleftnavigate(rowindex, innerindex, calindex, calendarrow, calendardata);
+                    }
+                });
+            });
+        });
+        if (!this.isextremeleft) {
+            const itemid = this.calendaryData[this.leftfocusrowindex].data[this.leftfocusinnerindex][this.leftfocuscalindex];
+            document.getElementById(itemid['id']).focus();
+        }
+    }
+
+    refactoredleftnavigate(rowindex: number, innerindex: number, calindex: number, calendarrow: any, calendardata: any) {
+        if (rowindex === 0 && innerindex === 0 && calindex === 0) {
+            this.onleftnavigate.emit();
+            this.isextremeleft = true;
+            this.setExtremeFocus();
+        } else if (calindex === 0) {
+            // chk for first row
+            if (innerindex === 0) {
+                this.leftfocusrowindex = rowindex - 1;
+                this.leftfocusinnerindex = calendarrow.data.length - 1; // row change
+                this.leftfocuscalindex = calendardata.length - 1; // last ele of month
+            } else {
+                this.leftfocusrowindex = rowindex;
+                this.leftfocusinnerindex = innerindex - 1;
+                this.leftfocuscalindex = calendardata.length - 1;
+            }
+        } else {
+            this.leftfocusrowindex = rowindex;
+            this.leftfocusinnerindex = innerindex;
+            this.leftfocuscalindex = calindex - 1;
+        }
+    }
+
+    navigatedown(day: any) {
+        let focusrowindex: number;
+        let focusinnerindex: number;
+        let focuscalindex: number;
+        let isextremedown = false;
+        this.calendaryData.forEach((calendarrow: any, rowindex: number) => {
+            calendarrow.data.forEach((calendardata: any, innerindex: number) => {
+                calendardata.forEach((calelement: any, calindex: number) => {
+                    if (day.id === calelement.id) {
+                        if (rowindex === (this.calendaryData.length - 1) &&
+                            innerindex === (calendarrow.data.length - 1)) {
+                            this.onbottomnavigate.emit();
+                            isextremedown = true;
+                            this.setExtremeFocus();
+                        } else if (innerindex === (calendarrow.data.length - 1)) {
+                            focusrowindex = rowindex + 1;
+                            focusinnerindex = 0;
+                            focuscalindex = 0;
+                        } else {
+                            focusrowindex = rowindex;
+                            focusinnerindex = innerindex + 1;
+                            focuscalindex = calindex;
+                        }
+                    }
+                });
+            });
+        });
+        if (!isextremedown) {
+            const itemid = this.calendaryData[focusrowindex].data[focusinnerindex][focuscalindex];
+            document.getElementById(itemid['id']).focus();
+        }
+    }
+
+    navigateup(day: any) {
+        let focusrowindex: number;
+        let focusinnerindex: number;
+        let focuscalindex: number;
+        let isextremetop = false;
+        this.calendaryData.forEach((calendarrow: any, rowindex: number) => {
+            calendarrow.data.forEach((calendardata: any, innerindex: number) => {
+                calendardata.forEach((calelement: any, calindex: number) => {
+                    if (day.id === calelement.id) {
+                        if (rowindex === 0 && innerindex === 0) {
+                            this.ontopnavigate.emit();
+                            isextremetop = true;
+                            this.setExtremeFocus();
+                        } else if (innerindex === 0) {
+                            focusrowindex = rowindex - 1;
+                            focusinnerindex = calendarrow.data.length - 1;
+                            focuscalindex = calendardata.length - 1;
+                        } else {
+                            focusrowindex = rowindex;
+                            focusinnerindex = innerindex - 1;
+                            focuscalindex = calindex;
+                        }
+                    }
+                });
+            });
+        });
+        if (!isextremetop) {
+            const itemid = this.calendaryData[focusrowindex].data[focusinnerindex][focuscalindex];
+            document.getElementById(itemid['id']).focus();
+        }
+    }
+
+    setExtremeFocus() {
+        setTimeout(() => {
+            let itemid;
+            this.calendaryData.forEach((calendarrow: any, rowindex: number) => {
+                calendarrow.data.forEach((calendardata: any, innerindex: number) => {
+                    calendardata.forEach((calelement: any, calindex: number) => {
+                        if (rowindex === 0 && innerindex === 0 && calindex === 0) {
+                            itemid = this.calendaryData[0].data[0][0];
+                            document.getElementById(itemid['id']).focus();
+                        }
+                    });
+                });
+            });
+        }, 0);
+    }
 }