feat(Calendar): remove tabIndex from the component itself #6275

Author: ddincheva

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

@@ -45,7 +45,7 @@ <h2 class="igx-calendar__header-date">
 
     <div style="display: flex"
         [@animateChange]="animationAction"
-        (@animateChange.done)="animationDone($event)" >
+        (@animateChange.done)="animationDone($event)" (pointerup)="$event.stopPropagation()" >
         <igx-days-view *ngFor="let view of monthsViewNumber | IgxMonthViewSlots; index as i;" [changeDaysView]="true" #days
                 [selection]="selection"
                 [locale]="locale"

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

@@ -191,15 +191,6 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
      */
     public callback: (next) => void;
 
-    /**
-     * The default `tabindex` attribute for the component.
-     *
-     * @hidden
-     * @internal
-     */
-    @HostBinding('attr.tabindex')
-    public tabindex = 0;
-
     /**
      * The default aria role attribute for the component.
      *
@@ -782,7 +773,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
     public resetActiveDate() {
         if (!this.monthViews) { return; }
         let dates = [];
-        this.monthViews.map(mv => mv.dates).forEach(days => { dates = dates.concat(days.toArray());  });
+        this.monthViews.map(mv => mv.dates).forEach(days => { dates = dates.concat(days.toArray()); });
         const date = dates.find(day => day.selected && day.isCurrentMonth) || dates.find(day => day.isToday && day.isCurrentMonth)
             || dates.find(d => d.isFocusable);
         if (date) {
@@ -943,12 +934,17 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         }
     }
 
-    @HostListener('focusout', ['$event'])
-    public onPointerDown(event) {
-/*         if (event.path.contains('igx-days-view')) {
-            return;
-        } */
-        console.log(event);
+    @HostListener('document:pointerup')
+    public pointerUp() {
+        this.resetActiveDate();
+    }
+
+    @HostListener('keydown.tab', ['$event'])
+    @HostListener('keydown.shift.tab', ['$event'])
+    public onTab(event) {
+        if (event.target.tagName.toLowerCase() === 'igx-day-item') {
+            requestAnimationFrame(() => this.resetActiveDate());
+        }
     }
 
     /**

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

@@ -21,14 +21,6 @@ export class IgxMonthPickerBaseDirective extends IgxCalendarBaseDirective {
      */
     protected activeViewIdx = 0;
 
-    /**
-     * The default `tabindex` attribute for the component.
-     *
-     * @hidden
-     */
-    @HostBinding('attr.tabindex')
-    public tabindex = 0;
-
     /**
      * @hidden
      */

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

@@ -139,16 +139,6 @@ export class IgxMonthsViewComponent implements ControlValueAccessor {
     @ViewChildren(IgxCalendarMonthDirective, { read: IgxCalendarMonthDirective })
     public monthsRef: QueryList<IgxCalendarMonthDirective>;
 
-
-    /**
-     * Gets/sets the `tabindex` attribute for the component.
-     * Default value is 0
-     *
-     */
-    @Input()
-    @HostBinding('attr.tabindex')
-    public tabindex = 0;
-
     /**
      * Returns an array of date objects which are then used to
      * properly render the month names.

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

@@ -134,15 +134,6 @@ export class IgxYearsViewComponent implements ControlValueAccessor {
     @HostBinding('class.igx-calendar')
     public styleClass = true;
 
-    /**
-     * The default `tabindex` attribute for the component.
-     *
-     * @hidden
-     */
-    @Input()
-    @HostBinding('attr.tabindex')
-    public tabindex = 0;
-
     /**
      * Returns an array of date objects which are then used to properly
      * render the years.

src/app/calendar/calendar.sample.html

@@ -4,8 +4,9 @@
         <article class="sample-column">
 
             <div class="calendar-sample">
+                {{cal.activeDate}}
                 <h4 class="sample-title">Calendar Sample (NO Card wrapper)</h4>
-                <igx-calendar weekStart="1" selection="multi" [hideOutsideDays]="false" [monthsViewNumber]="2"></igx-calendar>
+                <igx-calendar #cal weekStart="1" selection="multi" [hideOutsideDays]="false" [monthsViewNumber]="2"></igx-calendar>
             </div>
 
             <div class="calendar-sample">
@@ -21,6 +22,7 @@ <h4 class="sample-title">Default Calendar</h4>
                     <button igxButton="raised" igxRipple (click)="setSelection('single')">Single</button>
                     <button igxButton="raised" igxRipple (click)="setSelection('multi')">Multi</button>
                     <button igxButton="raised" igxRipple (click)="setSelection('range')">Range</button>
+                    {{calendar.activeDate}}
                 </div>
                 <igx-card>
                     <igx-calendar #calendar [showWeekNumbers]="true" weekStart="1" selection="multi" (viewDateChanged)="viewDateChanged($event)" (activeViewChanged)="activeViewChanged($event)" (onSelection)="onSelection($event)" [hideOutsideDays]="false" [monthsViewNumber]="3"></igx-calendar>

src/app/calendar/calendar.sample.ts

@@ -79,7 +79,12 @@ export class CalendarSampleComponent implements OnInit, AfterViewInit {
     }
 
     public select() {
-        this.calendar.selectDate(new Date(this.today.getFullYear(), this.today.getMonth() + 1, 11));
+        if (this.calendar.selection === 'single') {
+            this.calendar.selectDate(new Date(this.today.getFullYear(), this.today.getMonth() + 1, 11));
+        } else {
+            this.calendar.selectDate([new Date(this.today.getFullYear(), this.today.getMonth(), 10),
+                new Date(this.today.getFullYear(), this.today.getMonth(), 13)]);
+        }
     }
 
     public deselect() {