systelab-components
Version:
systelab-components is a set of components that use wide accepted and adopted standard technologies like Angular and Bootstrap, as well as other popular libraries. Please read the ATTRIBUTION.md file for a complete list of dependencies.
112 lines (110 loc) • 12 kB
JavaScript
import { Component, ContentChildren, EventEmitter, Input, Output } from '@angular/core';
import { TabComponent } from './tab.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class TabsComponent {
constructor() {
this.showTabBackground = true;
this.shrink = false;
this.paintFocus = false;
this.select = new EventEmitter();
}
ngAfterContentInit() {
if (this.tabs.length > 0) {
const activeTabs = this.tabs.filter((tab) => tab.active);
if (activeTabs.length === 0) {
this.doSelectTab(this.tabs.first);
}
else {
this.doSelectTab(activeTabs[0]);
}
}
}
doSelectTab(tab) {
this.deactivateAllTabs();
this.selectTab(tab);
}
doSelectTabById(tabId) {
const tab = this.tabs.toArray()
.find((t) => t.id === tabId);
if (tab) {
this.deactivateAllTabs();
this.selectTab(tab);
}
}
selectTab(tab) {
tab.active = true;
tab.setVisible(true);
this.select.emit(tab.id);
}
deactivateAllTabs() {
if (this.tabs) {
this.tabs.toArray()
.forEach(t => {
t.active = false;
t.setVisible(false);
});
}
}
doKeyDown(event, tab) {
if (event.key === 'Enter') {
event.preventDefault();
this.deactivateAllTabs();
this.selectTab(tab);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.9", type: TabsComponent, selector: "systelab-tabs", inputs: { showTabBackground: "showTabBackground", shrink: "shrink", paintFocus: "paintFocus" }, outputs: { select: "select" }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: `
<ul class="nav nav-tabs" [class.hideTabBackground]="!showTabBackground" [class.slab-tabs-shrink]="shrink" role="tablist">
(tab of tabs; track tab.id) {
<li class="nav-item" [class.hideTabBackground]="!showTabBackground"
(click)="doSelectTab(tab)">
<div class="nav-link nav-single-tab d-flex align-items-center justify-content-center"
[class.active]="tab.active" [class.slab-tabs-shrink]="shrink" data-toggle="tab" role="tab" [attr.aria-controls]="tab.id" id="tab-{{tab.id}}"
[tabindex]="paintFocus?0:-1" (keydown)="doKeyDown($event,tab)">
<span *ngIf="tab.titleHtml" [innerHTML]="tab.titleHtml" class="d-flex align-items-center"></span>
<span *ngIf="tab.title" class="d-flex align-items-center">{{tab.title}}</span>
<i *ngIf="tab.warning" class="text-warning icon-warning ml-3"></i>
</div>
</li>
}
</ul>
<div class="slab-flex-1 d-flex slab-overflow-container">
<ng-content></ng-content>
</div>
`, isInline: true, styles: [":host{width:100%;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: TabsComponent, decorators: [{
type: Component,
args: [{ selector: 'systelab-tabs', template: `
<ul class="nav nav-tabs" [class.hideTabBackground]="!showTabBackground" [class.slab-tabs-shrink]="shrink" role="tablist">
(tab of tabs; track tab.id) {
<li class="nav-item" [class.hideTabBackground]="!showTabBackground"
(click)="doSelectTab(tab)">
<div class="nav-link nav-single-tab d-flex align-items-center justify-content-center"
[class.active]="tab.active" [class.slab-tabs-shrink]="shrink" data-toggle="tab" role="tab" [attr.aria-controls]="tab.id" id="tab-{{tab.id}}"
[tabindex]="paintFocus?0:-1" (keydown)="doKeyDown($event,tab)">
<span *ngIf="tab.titleHtml" [innerHTML]="tab.titleHtml" class="d-flex align-items-center"></span>
<span *ngIf="tab.title" class="d-flex align-items-center">{{tab.title}}</span>
<i *ngIf="tab.warning" class="text-warning icon-warning ml-3"></i>
</div>
</li>
}
</ul>
<div class="slab-flex-1 d-flex slab-overflow-container">
<ng-content></ng-content>
</div>
`, styles: [":host{width:100%;display:flex;flex-direction:column}\n"] }]
}], propDecorators: { tabs: [{
type: ContentChildren,
args: [TabComponent]
}], showTabBackground: [{
type: Input
}], shrink: [{
type: Input
}], paintFocus: [{
type: Input
}], select: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zeXN0ZWxhYi1jb21wb25lbnRzL3NyYy9saWIvdGFicy90YWJzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQW9CLFNBQVMsRUFBRSxlQUFlLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFDckgsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFrQy9DLE1BQU0sT0FBTyxhQUFhO0lBaEMxQjtRQW9DaUIsc0JBQWlCLEdBQUcsSUFBSSxDQUFDO1FBQ3pCLFdBQU0sR0FBRyxLQUFLLENBQUM7UUFDZixlQUFVLEdBQUcsS0FBSyxDQUFDO1FBRWxCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0tBbURyRDtJQWpETyxrQkFBa0I7UUFFeEIsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDekIsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUN6RCxJQUFJLFVBQVUsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFO2dCQUM1QixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDbEM7aUJBQU07Z0JBQ04sSUFBSSxDQUFDLFdBQVcsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQzthQUNoQztTQUNEO0lBQ0YsQ0FBQztJQUVNLFdBQVcsQ0FBQyxHQUFpQjtRQUNuQyxJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztRQUN6QixJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3JCLENBQUM7SUFFTSxlQUFlLENBQUMsS0FBYTtRQUNuQyxNQUFNLEdBQUcsR0FBaUIsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUU7YUFDM0MsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsRUFBRSxLQUFLLEtBQUssQ0FBQyxDQUFDO1FBQzlCLElBQUksR0FBRyxFQUFFO1lBQ1IsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7WUFDekIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUNwQjtJQUNGLENBQUM7SUFFTyxTQUFTLENBQUMsR0FBaUI7UUFDbEMsR0FBRyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUM7UUFDbEIsR0FBRyxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNyQixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDMUIsQ0FBQztJQUVPLGlCQUFpQjtRQUN4QixJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUU7WUFDZCxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRTtpQkFDakIsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFO2dCQUNaLENBQUMsQ0FBQyxNQUFNLEdBQUcsS0FBSyxDQUFDO2dCQUNqQixDQUFDLENBQUMsVUFBVSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3JCLENBQUMsQ0FBQyxDQUFDO1NBQ0o7SUFDRixDQUFDO0lBRU0sU0FBUyxDQUFDLEtBQW9CLEVBQUUsR0FBaUI7UUFDdkQsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLE9BQU8sRUFBRTtZQUMxQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLGlCQUFpQixFQUFFLENBQUM7WUFDekIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxHQUFHLENBQUMsQ0FBQztTQUNwQjtJQUNGLENBQUM7OEdBMURXLGFBQWE7a0dBQWIsYUFBYSx5TUFFUixZQUFZLDZCQWhDbkI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7WUFtQkM7OzJGQVdDLGFBQWE7a0JBaEN6QixTQUFTOytCQUNDLGVBQWUsWUFDZjs7Ozs7Ozs7Ozs7Ozs7Ozs7OztZQW1CQzs4QkFhb0IsSUFBSTtzQkFBbEMsZUFBZTt1QkFBQyxZQUFZO2dCQUViLGlCQUFpQjtzQkFBaEMsS0FBSztnQkFDVSxNQUFNO3NCQUFyQixLQUFLO2dCQUNVLFVBQVU7c0JBQXpCLEtBQUs7Z0JBRVcsTUFBTTtzQkFBdEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyQ29udGVudEluaXQsIENvbXBvbmVudCwgQ29udGVudENoaWxkcmVuLCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFF1ZXJ5TGlzdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGFiQ29tcG9uZW50IH0gZnJvbSAnLi90YWIuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnc3lzdGVsYWItdGFicycsXG5cdHRlbXBsYXRlOiBgXG4gICAgICAgICAgICAgICAgPHVsIGNsYXNzPVwibmF2IG5hdi10YWJzXCIgW2NsYXNzLmhpZGVUYWJCYWNrZ3JvdW5kXT1cIiFzaG93VGFiQmFja2dyb3VuZFwiIFtjbGFzcy5zbGFiLXRhYnMtc2hyaW5rXT1cInNocmlua1wiIHJvbGU9XCJ0YWJsaXN0XCI+XG5cdFx0XHRcdFx0QGZvciAodGFiIG9mIHRhYnM7IHRyYWNrIHRhYi5pZCkge1xuXHRcdFx0XHRcdFx0PGxpIGNsYXNzPVwibmF2LWl0ZW1cIiBbY2xhc3MuaGlkZVRhYkJhY2tncm91bmRdPVwiIXNob3dUYWJCYWNrZ3JvdW5kXCJcblx0XHRcdFx0XHRcdFx0KGNsaWNrKT1cImRvU2VsZWN0VGFiKHRhYilcIj5cblx0XHRcdFx0XHRcdFx0PGRpdiBjbGFzcz1cIm5hdi1saW5rIG5hdi1zaW5nbGUtdGFiIGQtZmxleCBhbGlnbi1pdGVtcy1jZW50ZXIganVzdGlmeS1jb250ZW50LWNlbnRlclwiXG5cdFx0XHRcdFx0XHRcdFx0IFtjbGFzcy5hY3RpdmVdPVwidGFiLmFjdGl2ZVwiIFtjbGFzcy5zbGFiLXRhYnMtc2hyaW5rXT1cInNocmlua1wiIGRhdGEtdG9nZ2xlPVwidGFiXCIgcm9sZT1cInRhYlwiIFthdHRyLmFyaWEtY29udHJvbHNdPVwidGFiLmlkXCIgaWQ9XCJ0YWIte3t0YWIuaWR9fVwiXG5cdFx0XHRcdFx0XHRcdFx0IFt0YWJpbmRleF09XCJwYWludEZvY3VzPzA6LTFcIiAoa2V5ZG93bik9XCJkb0tleURvd24oJGV2ZW50LHRhYilcIj5cblx0XHRcdFx0XHRcdFx0XHQ8c3BhbiAqbmdJZj1cInRhYi50aXRsZUh0bWxcIiBbaW5uZXJIVE1MXT1cInRhYi50aXRsZUh0bWxcIiBjbGFzcz1cImQtZmxleCBhbGlnbi1pdGVtcy1jZW50ZXJcIj48L3NwYW4+XG5cdFx0XHRcdFx0XHRcdFx0PHNwYW4gKm5nSWY9XCJ0YWIudGl0bGVcIiBjbGFzcz1cImQtZmxleCBhbGlnbi1pdGVtcy1jZW50ZXJcIj57e3RhYi50aXRsZX19PC9zcGFuPlxuXHRcdFx0XHRcdFx0XHRcdDxpICpuZ0lmPVwidGFiLndhcm5pbmdcIiBjbGFzcz1cInRleHQtd2FybmluZyBpY29uLXdhcm5pbmcgbWwtM1wiPjwvaT5cblx0XHRcdFx0XHRcdFx0PC9kaXY+XG5cdFx0XHRcdFx0XHQ8L2xpPlxuXHRcdFx0XHRcdH1cbiAgICAgICAgICAgICAgICA8L3VsPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzbGFiLWZsZXgtMSBkLWZsZXggc2xhYi1vdmVyZmxvdy1jb250YWluZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuXG5cdCAgICAgICAgICBgLFxuXHRzdHlsZXM6ICAgW2BcbiAgICAgIDpob3N0IHtcbiAgICAgICAgICB3aWR0aDogMTAwJTtcbiAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgICB9XG5cblxuXHRgXVxufSlcbmV4cG9ydCBjbGFzcyBUYWJzQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG5cblx0QENvbnRlbnRDaGlsZHJlbihUYWJDb21wb25lbnQpIHRhYnM6IFF1ZXJ5TGlzdDxUYWJDb21wb25lbnQ+O1xuXG5cdEBJbnB1dCgpIHB1YmxpYyBzaG93VGFiQmFja2dyb3VuZCA9IHRydWU7XG5cdEBJbnB1dCgpIHB1YmxpYyBzaHJpbmsgPSBmYWxzZTtcblx0QElucHV0KCkgcHVibGljIHBhaW50Rm9jdXMgPSBmYWxzZTtcblxuXHRAT3V0cHV0KCkgcHVibGljIHNlbGVjdCA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nPigpO1xuXG5cdHB1YmxpYyBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG5cblx0XHRpZiAodGhpcy50YWJzLmxlbmd0aCA+IDApIHtcblx0XHRcdGNvbnN0IGFjdGl2ZVRhYnMgPSB0aGlzLnRhYnMuZmlsdGVyKCh0YWIpID0+IHRhYi5hY3RpdmUpO1xuXHRcdFx0aWYgKGFjdGl2ZVRhYnMubGVuZ3RoID09PSAwKSB7XG5cdFx0XHRcdHRoaXMuZG9TZWxlY3RUYWIodGhpcy50YWJzLmZpcnN0KTtcblx0XHRcdH0gZWxzZSB7XG5cdFx0XHRcdHRoaXMuZG9TZWxlY3RUYWIoYWN0aXZlVGFic1swXSk7XG5cdFx0XHR9XG5cdFx0fVxuXHR9XG5cblx0cHVibGljIGRvU2VsZWN0VGFiKHRhYjogVGFiQ29tcG9uZW50KSB7XG5cdFx0dGhpcy5kZWFjdGl2YXRlQWxsVGFicygpO1xuXHRcdHRoaXMuc2VsZWN0VGFiKHRhYik7XG5cdH1cblxuXHRwdWJsaWMgZG9TZWxlY3RUYWJCeUlkKHRhYklkOiBzdHJpbmcpIHtcblx0XHRjb25zdCB0YWI6IFRhYkNvbXBvbmVudCA9IHRoaXMudGFicy50b0FycmF5KClcblx0XHRcdC5maW5kKCh0KSA9PiB0LmlkID09PSB0YWJJZCk7XG5cdFx0aWYgKHRhYikge1xuXHRcdFx0dGhpcy5kZWFjdGl2YXRlQWxsVGFicygpO1xuXHRcdFx0dGhpcy5zZWxlY3RUYWIodGFiKTtcblx0XHR9XG5cdH1cblxuXHRwcml2YXRlIHNlbGVjdFRhYih0YWI6IFRhYkNvbXBvbmVudCkge1xuXHRcdHRhYi5hY3RpdmUgPSB0cnVlO1xuXHRcdHRhYi5zZXRWaXNpYmxlKHRydWUpO1xuXHRcdHRoaXMuc2VsZWN0LmVtaXQodGFiLmlkKTtcblx0fVxuXG5cdHByaXZhdGUgZGVhY3RpdmF0ZUFsbFRhYnMoKSB7XG5cdFx0aWYgKHRoaXMudGFicykge1xuXHRcdFx0dGhpcy50YWJzLnRvQXJyYXkoKVxuXHRcdFx0XHQuZm9yRWFjaCh0ID0+IHtcblx0XHRcdFx0XHR0LmFjdGl2ZSA9IGZhbHNlO1xuXHRcdFx0XHRcdHQuc2V0VmlzaWJsZShmYWxzZSk7XG5cdFx0XHRcdH0pO1xuXHRcdH1cblx0fVxuXG5cdHB1YmxpYyBkb0tleURvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQsIHRhYjogVGFiQ29tcG9uZW50KSB7XG5cdFx0aWYgKGV2ZW50LmtleSA9PT0gJ0VudGVyJykge1xuXHRcdFx0ZXZlbnQucHJldmVudERlZmF1bHQoKTtcblx0XHRcdHRoaXMuZGVhY3RpdmF0ZUFsbFRhYnMoKTtcblx0XHRcdHRoaXMuc2VsZWN0VGFiKHRhYik7XG5cdFx0fVxuXHR9XG59XG5cbiJdfQ==