Archive commit

src/ts/components/shared/tabset/tabset.pug

@@ -0,0 +1,30 @@
+.nav([ngClass]="navClass" role="tablist" [attr.aria-label]="label")
+	button.btn-unstyled.nav-link(
+		*ngFor="let tab of tabs; let i = index"
+		href
+		role="tab"
+		(click)="!tab.disabled && select(i); $event.preventDefault()"
+		(keydown)="keydown($event)"
+		[id]="tab.id"
+		[class.active]="i === activeIndex"
+		[class.disabled]="tab.disabled"
+		[tabindex]="i === activeIndex ? 0 : -1"
+		[attr.aria-controls]="(!destroyOnHide || i === activeIndex ? tab.id + '-panel' : null)"
+		[attr.aria-selected]="i === activeIndex"
+		[attr.aria-disabled]="tab.disabled")
+		span(*ngIf="tab.icon")
+			fa-icon.d-sm-none([icon]="tab.icon")
+			span.d-none.d-sm-inline {{tab.title}}
+		span(*ngIf="!tab.icon")
+			| {{tab.title}}
+		ng-template([ngTemplateOutlet]="tab.titleTpl?.templateRef")
+.tab-content
+	ng-template(ngFor let-tab [ngForOf]="tabs" let-i="index")
+		.tab-pane(
+			*ngIf="!destroyOnHide || i === activeIndex"
+			role="tabpanel"
+			id="{{tab.id}}-panel"
+			[class.active]="i === activeIndex"
+			[attr.aria-labelledby]="tab.id"
+			[attr.aria-expanded]="i === activeIndex")
+			ng-template([ngTemplateOutlet]="tab.contentTpl.templateRef")

src/ts/components/shared/tabset/tabset.ts

@@ -0,0 +1,93 @@
+import {
+	Component, Directive, TemplateRef, Input, ContentChild, ContentChildren, QueryList, Output, EventEmitter
+} from '@angular/core';
+import { uniqueId } from 'lodash';
+import { Key } from '../../../client/input/input';
+
+@Directive({
+	selector: '[tabTitle]'
+})
+export class TabTitle {
+	constructor(public templateRef: TemplateRef<any>) {
+	}
+}
+
+@Directive({
+	selector: '[tabContent]',
+})
+export class TabContent {
+	constructor(public templateRef: TemplateRef<any>) {
+	}
+}
+
+@Directive({
+	selector: 'tab',
+})
+export class Tab {
+	@Input() id = uniqueId(`tabset-tab`);
+	@Input() title?: string;
+	@Input() icon?: any;
+	@Input() disabled = false;
+	@ContentChild(TabContent, { static: false }) contentTpl?: TabContent;
+	@ContentChild(TabTitle, { static: false }) titleTpl?: TabTitle;
+}
+
+@Component({
+	selector: 'tabset',
+	templateUrl: 'tabset.pug',
+})
+export class Tabset {
+	justifyClass?: string;
+	@ContentChildren(Tab) tabs!: QueryList<Tab>;
+	@Input() label = '';
+	@Input() destroyOnHide = true;
+	@Input()
+	set justify(className: 'start' | 'center' | 'end' | 'fill' | 'justified') {
+		if (className === 'fill' || className === 'justified') {
+			this.justifyClass = `nav-${className}`;
+		} else {
+			this.justifyClass = `justify-content-${className}`;
+		}
+	}
+	@Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
+	@Input() type: 'tabs' | 'pills' = 'tabs';
+	@Input() activeIndex = 0;
+	@Output() activeIndexChange = new EventEmitter<number>();
+	constructor() {
+		this.justify = 'start';
+	}
+	get navClass() {
+		return `nav-${this.type}${this.orientation === 'horizontal' ? ` ${this.justifyClass}` : ' flex-column'}`;
+	}
+	select(index: number) {
+		if (this.activeIndex !== index) {
+			this.activeIndex = index;
+			this.activeIndexChange.emit(index);
+		}
+	}
+	keydown(e: KeyboardEvent) {
+		const index = this.handleKey(e.keyCode);
+
+		if (index !== undefined) {
+			e.preventDefault();
+			const element = document.getElementById(this.tabs.toArray()[index].id);
+			element && element.focus();
+			this.select(index);
+		}
+	}
+	private handleKey(keyCode: number) {
+		if (keyCode === Key.LEFT) {
+			return this.activeIndex === 0 ? this.tabs.length - 1 : this.activeIndex - 1;
+		} else if (keyCode === Key.RIGHT) {
+			return this.activeIndex === this.tabs.length - 1 ? 0 : this.activeIndex + 1;
+		} else if (keyCode === Key.HOME) {
+			return 0;
+		} else if (keyCode === Key.END) {
+			return this.tabs.length - 1;
+		} else {
+			return undefined;
+		}
+	}
+}
+
+export const tabsetComponents = [TabContent, TabTitle, Tabset, Tab];