Skip to content

Commit e930238

Browse files
ChronosSFChronosSF
authored
Merge branch 'master' into mkirova/splitter-base
2 parents cd8d72d + 81f581c commit e930238

File tree

8 files changed

+411
-88
lines changed

8 files changed

+411
-88
lines changed

‎projects/igniteui-angular/src/lib/core/utils.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,9 @@ export const enum KEYS {
167167
DOWN_ARROW = 'ArrowDown',
168168
DOWN_ARROW_IE = 'Down',
169169
F2 = 'F2',
170-
TAB = 'Tab'
170+
TAB = 'Tab',
171+
HOME = 'Home',
172+
END = 'End'
171173
}
172174

173175
/**

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,19 @@ describe('IgxPaginator with default settings', () => {
3232
expect(totalPages).toBe(5);
3333
});
3434

35+
it('should change current page to equal last page, after changing perPage', () => {
36+
const fix = TestBed.createComponent(DefaultPaginatorComponent);
37+
fix.detectChanges();
38+
const paginator = fix.componentInstance.paginator;
39+
40+
paginator.paginate(paginator.totalPages - 1);
41+
paginator.perPage = paginator.totalRecords / 2;
42+
43+
fix.detectChanges();
44+
const page = paginator.page;
45+
expect(page).toBe(1);
46+
});
47+
3548
it('should disable go to first page when paginator is on first page', () => {
3649
const fix = TestBed.createComponent(DefaultPaginatorComponent);
3750
fix.detectChanges();

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,9 @@ export class IgxPaginatorComponent extends DisplayDensityBase {
7979
this.perPageChange.emit(this._perPage);
8080
this._selectOptions = this.sortUniqueOptions(this.defaultSelectValues, this._perPage);
8181
this.totalPages = Math.ceil(this.totalRecords / this._perPage);
82+
if (this._page >= this.totalPages) {
83+
this._page = this.totalPages - 1;
84+
}
8285
}
8386

8487
/**

‎projects/igniteui-angular/src/lib/tabs/tab-item.component.ts

Lines changed: 78 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
AfterViewInit,
1212
OnDestroy
1313
} from '@angular/core';
14-
14+
import { KEYS } from '../core/utils';
1515
import { IgxTabsGroupComponent } from './tabs-group.component';
1616
import { IgxTabItemBase, IgxTabsBase } from './tabs.common';
1717
import { IgxTabItemTemplateDirective } from './tabs.directives';
@@ -73,6 +73,13 @@ export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit
7373
this._label = newValue;
7474
}
7575

76+
/**
77+
* @hidden @internal
78+
* Set to true when the tab item is automatically generated from the IgxTabsComponent when tab groups are defined.
79+
*/
80+
@Input()
81+
public autoGenerated: boolean;
82+
7683
/**@hidden*/
7784
@ViewChild('defaultTabTemplate', { read: TemplateRef, static: true })
7885
protected defaultTabTemplate: TemplateRef<any>;
@@ -117,7 +124,7 @@ export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit
117124
* @hidden @internal
118125
*/
119126
@HostBinding('attr.tabindex')
120-
public tabindex;
127+
public tabindex = -1;
121128

122129
/**
123130
* @hidden @internal
@@ -168,41 +175,82 @@ export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit
168175
*/
169176
@HostListener('click', ['$event'])
170177
public onClick(event) {
171-
this.select();
172-
}
173-
174-
/**
175-
* @hidden
176-
*/
177-
@HostListener('keydown.arrowright', ['$event'])
178-
public onKeydownArrowRight(event: KeyboardEvent) {
179-
this.onKeyDown(false);
178+
if (this.autoGenerated) {
179+
this.select();
180+
}
180181
}
181182

182183
/**
183184
* @hidden
184185
*/
185-
@HostListener('keydown.arrowleft', ['$event'])
186-
public onKeydownArrowLeft(event: KeyboardEvent) {
187-
this.onKeyDown(true);
188-
}
186+
@HostListener('keydown', ['$event'])
187+
public onKeydown(event: KeyboardEvent) {
188+
const tabsArray = this._tabs.tabs.toArray();
189+
const startIndex = tabsArray.indexOf(this);
190+
let finalIndex = -1;
191+
let currentIndex = startIndex;
192+
193+
switch (event.key) {
194+
case KEYS.RIGHT_ARROW:
195+
case KEYS.RIGHT_ARROW_IE:
196+
do {
197+
currentIndex++;
198+
if (currentIndex === tabsArray.length) {
199+
currentIndex = -1;
200+
continue;
201+
} else if ((tabsArray[currentIndex] as IgxTabItemComponent).disabled === false) {
202+
finalIndex = currentIndex;
203+
break;
204+
}
205+
}
206+
while (currentIndex !== startIndex);
207+
break;
208+
case KEYS.LEFT_ARROW:
209+
case KEYS.LEFT_ARROW_IE:
210+
do {
211+
currentIndex--;
212+
if (currentIndex === -1) {
213+
currentIndex = tabsArray.length;
214+
continue;
215+
} else if ((tabsArray[currentIndex] as IgxTabItemComponent).disabled === false) {
216+
finalIndex = currentIndex;
217+
break;
218+
}
219+
}
220+
while (currentIndex !== startIndex);
221+
break;
222+
case KEYS.HOME:
223+
event.preventDefault();
224+
finalIndex = tabsArray.find(t => (t as IgxTabItemComponent).disabled === false).index;
225+
break;
226+
case KEYS.END:
227+
event.preventDefault();
228+
finalIndex = tabsArray.slice().reverse().find(t => (t as IgxTabItemComponent).disabled === false).index;
229+
break;
230+
case KEYS.ENTER:
231+
if (!this.autoGenerated) {
232+
this.nativeTabItem.nativeElement.click();
233+
}
234+
break;
235+
case KEYS.SPACE:
236+
case KEYS.SPACE_IE:
237+
event.preventDefault();
238+
if (!this.autoGenerated) {
239+
this.nativeTabItem.nativeElement.click();
240+
}
241+
break;
242+
default:
243+
break;
244+
}
189245

190-
/**
191-
* @hidden
192-
*/
193-
@HostListener('keydown.home', ['$event'])
194-
public onKeydownHome(event: KeyboardEvent) {
195-
event.preventDefault();
196-
this.onKeyDown(false, 0);
197-
}
246+
if (finalIndex > -1) {
247+
const tab = tabsArray[finalIndex];
248+
tab.nativeTabItem.nativeElement.focus();
198249

199-
/**
200-
* @hidden
201-
*/
202-
@HostListener('keydown.end', ['$event'])
203-
public onKeydownEnd(event: KeyboardEvent) {
204-
event.preventDefault();
205-
this.onKeyDown(false, this._tabs.tabs.toArray().length - 1);
250+
if (this.autoGenerated) {
251+
tab.select();
252+
}
253+
}
206254
}
207255

208256
/**
@@ -289,17 +337,6 @@ export class IgxTabItemComponent extends IgxTabItemBase implements AfterViewInit
289337
this.tabindex = newValue ? 0 : -1;
290338
}
291339

292-
private onKeyDown(isLeftArrow: boolean, index = null): void {
293-
const tabsArray = this._tabs.tabs.toArray();
294-
if (index === null) {
295-
index = (isLeftArrow)
296-
? (this._tabs.selectedIndex === 0) ? tabsArray.length - 1 : this._tabs.selectedIndex - 1
297-
: (this._tabs.selectedIndex === tabsArray.length - 1) ? 0 : this._tabs.selectedIndex + 1;
298-
}
299-
const tab = tabsArray[index];
300-
tab.select();
301-
}
302-
303340
/**
304341
* @hidden
305342
*/

‎projects/igniteui-angular/src/lib/tabs/tab-routing-test-guard.spec.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Injectable } from '@angular/core';
2+
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
3+
4+
@Injectable()
5+
export class TabRoutingTestGuard implements CanActivate {
6+
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
7+
if (state.url === '/view5') {
8+
return false;
9+
} else {
10+
return true;
11+
}
12+
}
13+
}

‎projects/igniteui-angular/src/lib/tabs/tabs-routing-view-components.spec.ts

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,26 @@ export class TabsRoutingView2Component {
1818
export class TabsRoutingView3Component {
1919
}
2020

21+
@Component({
22+
template: `This is a content from view component # 4`
23+
})
24+
export class TabsRoutingView4Component {
25+
}
26+
27+
@Component({
28+
template: `This is a content from view component # 5`
29+
})
30+
export class TabsRoutingView5Component {
31+
}
32+
2133
/**
2234
* @hidden
2335
*/
2436
@NgModule({
25-
declarations: [TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component],
26-
exports: [TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component],
37+
declarations: [TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component,
38+
TabsRoutingView4Component, TabsRoutingView5Component],
39+
exports: [TabsRoutingView1Component, TabsRoutingView2Component, TabsRoutingView3Component,
40+
TabsRoutingView4Component, TabsRoutingView5Component]
2741
})
2842
export class TabsRoutingViewComponentsModule {
2943
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<div class="igx-tabs__header-wrapper-fixed" #viewPort>
88
<div #itemsContainer class="igx-tabs__header-wrapper-fluid">
99
<ng-container *ngIf="!hasContentTabs">
10-
<igx-tab-item igxRipple *ngFor="let group of groups" [relatedGroup]="group">
10+
<igx-tab-item igxRipple *ngFor="let group of groups" [relatedGroup]="group" [autoGenerated]="true">
1111
</igx-tab-item>
1212
</ng-container>
1313
<ng-content select="igx-tab-item"></ng-content>
@@ -23,4 +23,4 @@
2323
<ng-content></ng-content>
2424
</div>
2525
</div>
26-
</div>
26+
</div>

0 commit comments

Comments
 (0)