Skip to content

Commit da6e86a

Browse files
zdrawkuzdrawku
authored
Merge branch '8.2.x' into validate-comments
2 parents c93a923 + 722dd3c commit da6e86a

39 files changed

+541
-203
lines changed

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { WEEKDAYS, Calendar, isDateInRanges, IFormattingOptions, IFormattingView
33
import { ControlValueAccessor } from '@angular/forms';
44
import { DateRangeDescriptor } from '../core/dates';
55
import { Subject } from 'rxjs';
6+
import { isDate } from '../core/utils';
67

78
/**
89
* Sets the selction type - single, multi or range.
@@ -243,7 +244,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
243244
/**
244245
*@hidden
245246
*/
246-
private rangeStarted = false;
247+
public rangeStarted = false;
247248

248249
/**
249250
*@hidden
@@ -580,12 +581,14 @@ export class IgxCalendarBase implements ControlValueAccessor {
580581
*/
581582
public selectDate(value: Date | Date[]) {
582583
if (value === null || value === undefined || (Array.isArray(value) && value.length === 0)) {
583-
return new Date();
584+
return;
584585
}
585586

586587
switch (this.selection) {
587588
case CalendarSelection.SINGLE:
588-
this.selectSingle(value as Date);
589+
if (isDate(value)) {
590+
this.selectSingle(value as Date);
591+
}
589592
break;
590593
case CalendarSelection.MULTI:
591594
this.selectMultiple(value);
@@ -600,7 +603,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
600603
* Deselects date(s) (based on the selection type).
601604
*/
602605
public deselectDate(value?: Date | Date[]) {
603-
if (this.selectedDates === null || this.selectedDates === []) {
606+
if (this.selectedDates === null || this.selectedDates.length === 0) {
604607
return;
605608
}
606609

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

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
</ng-template>
55

66
<ng-template let-result #defaultMonth let-obj>
7-
<span tabindex="0" #monthsBtn (keydown)="activeViewYearKB($event)" (click)="activeViewYear()"
7+
<span tabindex="0" #monthsBtn (keydown)="activeViewYearKB(getViewDate(obj.index), $event)" (click)="activeViewYear(getViewDate(obj.index), $event)"
88
class="igx-calendar-picker__date">
99
{{ formattedMonth(getViewDate(obj.index)) }}
1010
</span>
11-
<span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event)" (click)="activeViewDecade()"
11+
<span tabindex="0" #yearsBtn (keydown)="activeViewDecadeKB($event, getViewDate(obj.index))" (click)="activeViewDecade(getViewDate(obj.index))"
1212
class="igx-calendar-picker__date">
1313
{{ formattedYear(getViewDate(obj.index)) }}
1414
</span>
@@ -26,21 +26,15 @@ <h2 class="igx-calendar__header-date">
2626
(swipeleft)="nextMonth()">
2727
<div class="igx-calendar-picker">
2828
<div tabindex="0" class="igx-calendar-picker__prev" #prevMonthBtn
29-
igxCalendarScrollMonth [startScroll]="startPrevMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{
30-
'min-width.%': 100/(monthsViewNumber*7),
31-
'left': 0
32-
}">
29+
igxCalendarScrollMonth [startScroll]="startPrevMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{'min-width.%': 100/(monthsViewNumber*7)}">
3330
<igx-icon fontSet="material">keyboard_arrow_left</igx-icon>
3431
</div>
35-
<div *ngFor="let view of dayViews; index as i;" [style.width.%]="100/monthsViewNumber">
32+
<div *ngFor="let view of dayViews; index as i;" [style.width.%]="100/monthsViewNumber" [attr.data-month]="getMonth(i)">
3633
<ng-container *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonth; context: getContext(i)">
3734
</ng-container>
3835
</div>
3936
<div tabindex="0" class="igx-calendar-picker__next" #nextMonthBtn
40-
igxCalendarScrollMonth [startScroll]="startNextMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{
41-
'min-width.%': 100/(monthsViewNumber*7),
42-
'right': 0
43-
}">
37+
igxCalendarScrollMonth [startScroll]="startNextMonthScroll" [stopScroll]="stopMonthScroll" [ngStyle]="{'min-width.%': 100/(monthsViewNumber*7)}">
4438
<igx-icon fontSet="material">keyboard_arrow_right</igx-icon>
4539
</div>
4640
</div>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1908,6 +1908,8 @@ describe('IgxCalendar', () => {
19081908

19091909
date = calendar.daysView.dates.find(d => getDate(d).getTime() === new Date(2017, 7, 5).getTime());
19101910
date.nativeElement.focus();
1911+
fixture.detectChanges();
1912+
await wait(400);
19111913

19121914
UIInteractions.simulateKeyDownEvent(document.activeElement, 'ArrowRight');
19131915
fixture.detectChanges();

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

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
113113
}
114114

115115
set monthsViewNumber(val: number) {
116-
if (this._monthsViewNumber === val || val === 0) {
116+
if (this._monthsViewNumber === val || val <= 0) {
117117
return;
118118
} else if (this._monthsViewNumber < val) {
119119
for (let i = this._monthsViewNumber; i < val; i++) {
@@ -348,7 +348,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
348348
*/
349349
private defaultDayView = {
350350
value: this.value,
351-
viewDate: this.viewDate,
351+
viewDate: this.viewDate
352352
};
353353

354354
/**
@@ -462,11 +462,11 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
462462
/**
463463
* @hidden
464464
*/
465-
public activeViewDecade() {
465+
public activeViewDecade(args: Date) {
466466
super.activeViewDecade();
467-
468467
requestAnimationFrame(() => {
469468
if (this.dacadeView) {
469+
this.dacadeView.date = args;
470470
this.dacadeView.el.nativeElement.focus();
471471
}
472472
});
@@ -475,11 +475,12 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
475475
/**
476476
* @hidden
477477
*/
478-
public activeViewDecadeKB(event) {
479-
super.activeViewDecadeKB(event);
478+
public activeViewDecadeKB(event, args: Date) {
479+
super.activeViewDecadeKB(event, args);
480480

481481
requestAnimationFrame(() => {
482482
if (this.dacadeView) {
483+
this.dacadeView.date = args;
483484
this.dacadeView.el.nativeElement.focus();
484485
}
485486
});
@@ -520,6 +521,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
520521
public viewChanged(event) {
521522
this.viewDate = this.calendarModel.timedelta(event, 'month', 0);
522523
}
524+
523525
/**
524526
* @hidden
525527
*/
@@ -528,27 +530,34 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
528530
this.activeView = CalendarView.DEFAULT;
529531

530532
requestAnimationFrame(() => {
531-
this.monthsBtn.nativeElement.focus();
533+
if (this.monthsBtn) { this.monthsBtn.nativeElement.focus(); }
532534
});
533535
}
534536

535537
/**
536538
* @hidden
537539
*/
538-
public activeViewYear(): void {
540+
public activeViewYear(args: Date, event): void {
539541
this.activeView = CalendarView.YEAR;
540542
requestAnimationFrame(() => {
541-
this.monthsView.dates.find((date) => date.isCurrentMonth).nativeElement.focus();
543+
this.monthsView.date = args;
544+
this.focusMonth(event.target);
542545
});
543546
}
544547

548+
private focusMonth(target: HTMLElement) {
549+
const month = this.monthsView.dates.find((date) =>
550+
date.index === parseInt(target.parentElement.attributes['data-month'].value, 10));
551+
if (month) { month.nativeElement.focus(); }
552+
}
553+
545554
/**
546555
* @hidden
547556
*/
548-
public activeViewYearKB(event): void {
557+
public activeViewYearKB(args: Date, event): void {
549558
if (event.key === KEYS.SPACE || event.key === KEYS.SPACE_IE || event.key === KEYS.ENTER) {
550559
event.preventDefault();
551-
this.activeViewYear();
560+
this.activeViewYear(args, event);
552561
}
553562
}
554563

@@ -561,7 +570,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
561570
public deselectDate(value?: Date | Date[]) {
562571
super.deselectDate(value);
563572

564-
this.daysView.selectedDates = this.selectedDates;
573+
this.monthViews.forEach((view) => {
574+
view.selectedDates = this.selectedDates;
575+
view.rangeStarted = false;
576+
});
565577
this._onChangeCallback(this.selectedDates);
566578
}
567579

@@ -573,6 +585,14 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
573585
return date;
574586
}
575587

588+
/**
589+
* @hidden
590+
*/
591+
public getMonth(i: number): number {
592+
const date = this.calendarModel.timedelta(this.viewDate, 'month', i);
593+
return date.getMonth();
594+
}
595+
576596
/**
577597
* @hidden
578598
*/
@@ -588,6 +608,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
588608
public onKeydownPageUp(event: KeyboardEvent) {
589609
event.preventDefault();
590610

611+
if (this.activeView !== CalendarView.DEFAULT) {
612+
return;
613+
}
614+
591615
const activeDate = this.daysView.dates.find((date) => date.nativeElement === document.activeElement);
592616
if (activeDate) {
593617
this.daysView.nextDate = new Date(activeDate.date.date);
@@ -622,7 +646,9 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
622646
public onKeydownPageDown(event: KeyboardEvent) {
623647
event.preventDefault();
624648

625-
this.nextMonth(true);
649+
if (this.activeView !== CalendarView.DEFAULT) {
650+
return;
651+
}
626652

627653
const activeDate = this.daysView.dates.find((date) => date.nativeElement === document.activeElement);
628654
if (activeDate) {
@@ -647,6 +673,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
647673
if (dayItem) { dayItem.nativeElement.focus(); }
648674
};
649675
}
676+
677+
this.nextMonth(true);
650678
}
651679

652680
/**
@@ -760,8 +788,8 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
760788
private generateContext(value: Date, i?: number) {
761789
const formatObject = {
762790
index: i,
763-
monthView: () => this.activeViewYear(),
764-
yearView: () => this.activeViewDecade(),
791+
monthView: () => this.activeViewYear(value, event),
792+
yearView: () => this.activeViewDecade(value),
765793
...this.calendarModel.formatToParts(value, this.locale, this.formatOptions,
766794
['era', 'year', 'month', 'day', 'weekday'])
767795
};

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,9 +135,6 @@ export class IgxDayItemComponent {
135135
return isDateInRanges(this.date.date, this.specialDates);
136136
}
137137

138-
@HostBinding('attr.tabindex')
139-
public tabindex = 0;
140-
141138
@HostBinding('class.igx-calendar__date')
142139
public get defaultCSS(): boolean {
143140
return this.date.isCurrentMonth && !(this.isWeekend && this.selected);
@@ -153,6 +150,11 @@ export class IgxDayItemComponent {
153150
return this.selection !== CalendarSelection.RANGE;
154151
}
155152

153+
@HostBinding('attr.tabindex')
154+
public get tabindex(): number {
155+
return this.isDisabled || this.isHidden ? -1 : 0;
156+
}
157+
156158
private _selected = false;
157159

158160
constructor(private elementRef: ElementRef) { }

0 commit comments

Comments
 (0)