@inaccess-fang/ui-components
Version:
The Inaccess UI Components Library for the Front-end projects
54 lines • 7.35 kB
JavaScript
// @angular/core
import { Component, EventEmitter, ChangeDetectionStrategy, Output, ChangeDetectorRef, ContentChildren } from '@angular/core';
// rxjs/operators
import { filter } from 'rxjs/operators';
// Components
import { FangTabComponent } from './fang-tab.component';
export class FangMultiTabsComponent {
constructor(_changeDetectorRef) {
this._changeDetectorRef = _changeDetectorRef;
this.selectedTabChanged = new EventEmitter();
}
// @Override
ngOnInit() {
console.log('FangMultiTabsComponent [ngOnInit]');
}
// @Override
ngAfterViewInit() {
// Set initial active tab
if (this.tabs.length && !this.tabs.first.active) {
this.selectTab(this.tabs.first);
}
// Set selected Tab after each time child view changes on a single lifecycle
this._changesSubscription$ = this.tabs.changes
.pipe(filter((change) => change.first))
.subscribe(() => this.selectTab(this.tabs.first));
}
// @Override
ngOnDestroy() {
this._changesSubscription$.unsubscribe();
}
selectTab(tab) {
console.log('FangMultiTabsComponent [selectTab]');
this.tabs.toArray().map(tab => tab.active = false);
tab.active = true;
this.selectedTabChanged.emit();
this._changeDetectorRef.detectChanges();
}
}
FangMultiTabsComponent.decorators = [
{ type: Component, args: [{
selector: 'fang-multi-tabs',
template: "<ul class=\"fang-multi-tabs\">\n\t<li *ngFor=\"let tab of tabs.toArray()\"\n\t\t[class.fang-tab-active]=\"tab.active\"\n\t\t(click)=\"selectTab(tab)\"\n\t\tclass=\"fang-tab\">\n\t\t<a class=\"fang-tab-header\">{{tab.title}}</a>\n\t</li>\n</ul>\n<ng-content></ng-content>\n",
changeDetection: ChangeDetectionStrategy.Default,
styles: [".fang-multi-tabs{display:flex;margin:0 8px;padding:0}.fang-tab{border-bottom:2px solid #ceeaf2;display:inline-flex;flex-grow:1;justify-content:space-around;padding:6px}.fang-tab-active,.fang-tab:focus{outline-color:transparent}.fang-tab-active{border-bottom:2px solid #519eae}.fang-tab-header{color:#6a6a6a;cursor:pointer;font-size:.85em;font-weight:600;text-transform:uppercase}"]
},] }
];
FangMultiTabsComponent.ctorParameters = () => [
{ type: ChangeDetectorRef }
];
FangMultiTabsComponent.propDecorators = {
tabs: [{ type: ContentChildren, args: [FangTabComponent,] }],
selectedTabChanged: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFuZy1tdWx0aS10YWJzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIvaG9tZS9pYXNvbmFzL0Rlc2t0b3AvY3VycmVudC9mYW5nLXVpLWNvbXBvbmVudHMtbGlicmFyeS9wcm9qZWN0cy9mYW5nLXVpLWNvbXBvbmVudHMvc3JjLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvbXVsdGktdGFicy9mYW5nLW11bHRpLXRhYnMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGdCQUFnQjtBQUNoQixPQUFPLEVBQ04sU0FBUyxFQUNULFlBQVksRUFDWix1QkFBdUIsRUFDdkIsTUFBTSxFQUdOLGlCQUFpQixFQUNqQixlQUFlLEVBR2YsTUFBTSxlQUFlLENBQUE7QUFLdEIsaUJBQWlCO0FBQ2pCLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUV4QyxhQUFhO0FBQ2IsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFTeEQsTUFBTSxPQUFPLHNCQUFzQjtJQVVsQyxZQUNTLGtCQUFxQztRQUFyQyx1QkFBa0IsR0FBbEIsa0JBQWtCLENBQW1CO1FBTHZDLHVCQUFrQixHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFNbEQsQ0FBQztJQUVKLFlBQVk7SUFDVCxRQUFRO1FBQ1YsT0FBTyxDQUFDLEdBQUcsQ0FBQyxtQ0FBbUMsQ0FBQyxDQUFDO0lBQy9DLENBQUM7SUFFSixZQUFZO0lBQ1osZUFBZTtRQUNkLHlCQUF5QjtRQUN6QixJQUFLLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFHO1lBQ2xELElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztTQUNoQztRQUVELDRFQUE0RTtRQUM1RSxJQUFJLENBQUMscUJBQXFCLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPO2FBQzVDLElBQUksQ0FDSixNQUFNLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FDaEM7YUFDQSxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUE7SUFDbkQsQ0FBQztJQUVELFlBQVk7SUFDWixXQUFXO1FBQ1YsSUFBSSxDQUFDLHFCQUFxQixDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQzFDLENBQUM7SUFFUyxTQUFTLENBQUMsR0FBcUI7UUFDeEMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxvQ0FBb0MsQ0FBQyxDQUFDO1FBRTVDLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsQ0FBQztRQUVuRCxHQUFHLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztRQUVsQixJQUFJLENBQUMsa0JBQWtCLENBQUMsSUFBSSxFQUFFLENBQUM7UUFFckMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQ3RDLENBQUM7OztZQXhESixTQUFTLFNBQUM7Z0JBQ1YsUUFBUSxFQUFFLGlCQUFpQjtnQkFDM0IsNFJBQStDO2dCQUUvQyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsT0FBTzs7YUFDaEQ7OztZQXBCQSxpQkFBaUI7OzttQkF3QmIsZUFBZSxTQUFDLGdCQUFnQjtpQ0FHaEMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbIi8vIEBhbmd1bGFyL2NvcmVcbmltcG9ydCB7XG5cdENvbXBvbmVudCxcblx0RXZlbnRFbWl0dGVyLFxuXHRDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcblx0T3V0cHV0LFxuXHRPbkRlc3Ryb3ksXG5cdE9uSW5pdCxcblx0Q2hhbmdlRGV0ZWN0b3JSZWYsXG5cdENvbnRlbnRDaGlsZHJlbixcblx0UXVlcnlMaXN0LFxuXHRBZnRlclZpZXdJbml0XG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnXG5cbi8vIHJ4anNcbmltcG9ydCB7IFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuXG4vLyByeGpzL29wZXJhdG9yc1xuaW1wb3J0IHsgZmlsdGVyIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG4vLyBDb21wb25lbnRzXG5pbXBvcnQgeyBGYW5nVGFiQ29tcG9uZW50IH0gZnJvbSAnLi9mYW5nLXRhYi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcblx0c2VsZWN0b3I6ICdmYW5nLW11bHRpLXRhYnMnLFxuXHR0ZW1wbGF0ZVVybDogJy4vZmFuZy1tdWx0aS10YWJzLmNvbXBvbmVudC5odG1sJyxcblx0c3R5bGVVcmxzOiBbJy4vZmFuZy1tdWx0aS10YWJzLmNvbXBvbmVudC5zY3NzJ10sXG5cdGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuRGVmYXVsdFxufSlcblxuZXhwb3J0IGNsYXNzIEZhbmdNdWx0aVRhYnNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG5cbiAgICBAQ29udGVudENoaWxkcmVuKEZhbmdUYWJDb21wb25lbnQpXG5cdHB1YmxpYyB0YWJzOiBRdWVyeUxpc3Q8RmFuZ1RhYkNvbXBvbmVudD47XG5cbiAgICBAT3V0cHV0KClcblx0cHVibGljIHNlbGVjdGVkVGFiQ2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICAgIHByaXZhdGUgX2NoYW5nZXNTdWJzY3JpcHRpb24kOiBTdWJzY3JpcHRpb247XG5cblx0Y29uc3RydWN0b3IoXG5cdFx0cHJpdmF0ZSBfY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmXG5cdCkge31cblxuXHQvLyBAT3ZlcnJpZGVcbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcblx0XHRjb25zb2xlLmxvZygnRmFuZ011bHRpVGFic0NvbXBvbmVudCBbbmdPbkluaXRdJyk7XG4gICAgfVxuXG5cdC8vIEBPdmVycmlkZVxuXHRuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG5cdFx0Ly8gU2V0IGluaXRpYWwgYWN0aXZlIHRhYlxuXHRcdGlmICAodGhpcy50YWJzLmxlbmd0aCAmJiAhdGhpcy50YWJzLmZpcnN0LmFjdGl2ZSApIHtcblx0XHRcdHRoaXMuc2VsZWN0VGFiKHRoaXMudGFicy5maXJzdCk7XG5cdFx0fVxuXG5cdFx0Ly8gU2V0IHNlbGVjdGVkIFRhYiBhZnRlciBlYWNoIHRpbWUgY2hpbGQgdmlldyBjaGFuZ2VzIG9uIGEgc2luZ2xlIGxpZmVjeWNsZVxuXHRcdHRoaXMuX2NoYW5nZXNTdWJzY3JpcHRpb24kID0gdGhpcy50YWJzLmNoYW5nZXNcblx0XHRcdC5waXBlKFxuXHRcdFx0XHRmaWx0ZXIoKGNoYW5nZSkgPT4gY2hhbmdlLmZpcnN0KVxuXHRcdFx0KVxuXHRcdFx0LnN1YnNjcmliZSgoKSA9PiB0aGlzLnNlbGVjdFRhYih0aGlzLnRhYnMuZmlyc3QpKVxuXHR9XG5cblx0Ly8gQE92ZXJyaWRlXG5cdG5nT25EZXN0cm95KCk6IHZvaWQge1xuXHRcdHRoaXMuX2NoYW5nZXNTdWJzY3JpcHRpb24kLnVuc3Vic2NyaWJlKCk7XG5cdH1cblxuICAgIHB1YmxpYyBzZWxlY3RUYWIodGFiOiBGYW5nVGFiQ29tcG9uZW50KSB7XG5cdFx0Y29uc29sZS5sb2coJ0ZhbmdNdWx0aVRhYnNDb21wb25lbnQgW3NlbGVjdFRhYl0nKTtcblxuICAgICAgICB0aGlzLnRhYnMudG9BcnJheSgpLm1hcCh0YWIgPT4gdGFiLmFjdGl2ZSA9IGZhbHNlKTtcblxuICAgICAgICB0YWIuYWN0aXZlID0gdHJ1ZTtcblxuICAgICAgICB0aGlzLnNlbGVjdGVkVGFiQ2hhbmdlZC5lbWl0KCk7XG5cblx0XHR0aGlzLl9jaGFuZ2VEZXRlY3RvclJlZi5kZXRlY3RDaGFuZ2VzKCk7XG4gICAgfVxufVxuXG5cblxuXG5cblxuIl19