openaire-library/utils/tabs/tabs.component.ts

50 lines
1.7 KiB
TypeScript
Raw Normal View History

/**
* The main component that renders single TabComponent
* instances.
*/
import {
Component,
ContentChildren,
QueryList,
AfterContentInit, Output, EventEmitter,
} from '@angular/core';
import { TabComponent } from './tab.component';
@Component({
selector: 'my-tabs',
template: `
<ul [class]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-tab main-tabs uk-margin-remove uk-child-width-expand'"
uk-tab uk-switcher="connect: .tabs-content" uk-height-match="target: .tab-header">
<li *ngFor="let tab of tabs.toArray(); let i=index"
[class]="'uk-padding-remove'+(tab.statistics ? ' statistics ' : '') + (i == 0?' uk-active':'')"
(click)="selectTab(tab)">
<a class="uk-width-1-1 uk-height-1-1">
<div class="tab-header">{{tab.title}}</div>
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
<div *ngIf="tab.statistics" class="number">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0z" fill="none"></path>
<path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"></path>
</svg>
</div>
</a>
</li>
</ul>
<div [class]="(tabs.toArray().length > 2 ? 'uk-visible@m' : '') + ' uk-switcher tabs-content main-tabs-content'">
<ng-content></ng-content>
</div>
`
})
export class TabsComponent {
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
selectTab(tab: TabComponent){
// activate the tab the user has clicked on.
this.selectedActiveTab.emit(tab.tabId);
}
}