Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x | import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/core';
import { preserveContent, projectContent } from '../shared/utility/projection.utility';
import { WvrBaseComponent } from '../shared/wvr-base.component';
/**
* The principle component for a tabbed presentation.
*/
@Component({
selector: 'wvr-tabs-component',
templateUrl: './wvr-tabs.component.html',
styleUrls: ['./wvr-tabs.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class WvrTabsComponent extends WvrBaseComponent implements OnInit {
tabContentID = `wvr-tab-content-${this.id}`;
tabs: Array<HTMLElement>;
constructor(injector: Injector) {
super(injector);
}
ngOnInit(): void {
super.ngOnInit();
this.tabs = Array.from(this.eRef.nativeElement.querySelectorAll('template[tab-content]'));
let count = 0;
let activeTab = false;
this.tabs.forEach(tab => {
if (!tab.id) {
count += 1;
tab.id = `tab-${count}`;
}
if (this.isTabActive(tab)) {
this.activate(tab);
activeTab = true;
}
});
Eif (!activeTab) {
Iif (this.tabs.length) {
this.activate(this.tabs[0]);
}
}
}
activate(tab: HTMLElement): boolean {
this.tabs
.filter(this.isTabActive)
.forEach(t => {
this.deactivate(t);
});
tab.setAttribute('active', '');
if (!!tab.id) {
projectContent(this.eRef, `template[tab-content]#${tab.id}`, 'div[active-tab]');
}
return false;
}
trackTabById = (index, tab: HTMLElement): string => tab.id;
private deactivate(tab: HTMLElement): void {
if (!!tab.id) {
preserveContent(this.eRef, `template[tab-content]#${tab.id}`, 'div[active-tab]');
}
tab.removeAttribute('active');
}
private readonly isTabActive = (tab: HTMLElement): boolean => tab.hasAttribute('active');
}
|