ngx-tabset
Version:
A very simple library to let you create some tabs
191 lines (181 loc) • 4.93 kB
JavaScript
/**
* @license ngx-tabset
* MIT license
*/
import { Component, ContentChild, ContentChildren, EventEmitter, Input, NgModule, Output, TemplateRef } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class TabComponent {
constructor() {
this.active = false;
this.disabled = false;
this.bypassDOM = false;
this.customPaneClass = '';
}
}
TabComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-tab',
template: `
<div *ngIf="active"
class="pane"
[ngClass]="customPaneClass">
<div *ngIf="bypassDOM">
<ng-container [ngTemplateOutlet]="template"></ng-container>
</div>
<div *ngIf="!bypassDOM">
<ng-content></ng-content>
</div>
</div>
`
},] },
];
/** @nocollapse */
TabComponent.ctorParameters = () => [];
TabComponent.propDecorators = {
"tabTitle": [{ type: Input },],
"tabSubTitle": [{ type: Input },],
"active": [{ type: Input },],
"disabled": [{ type: Input },],
"bypassDOM": [{ type: Input },],
"customPaneClass": [{ type: Input },],
"template": [{ type: ContentChild, args: [TemplateRef,] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class TabsetComponent {
constructor() {
this.disableStyle = false;
this.customNavClass = '';
this.customTabsClass = '';
this.onSelect = new EventEmitter();
}
/**
* @return {?}
*/
ngAfterContentInit() {
// get all active tabs
const /** @type {?} */ activeTabs = this.tabs.filter((tab) => tab.active);
// if there is no active tab set, activate the first
if (activeTabs.length === 0) {
this.selectTab(this.tabs.first);
}
}
/**
* @param {?} tabToSelect
* @return {?}
*/
selectTab(tabToSelect) {
if (tabToSelect.disabled === true || tabToSelect.active === true) {
return;
}
// deactivate all tabs
this.tabs.toArray().forEach((tab) => tab.active = false);
// activate the tab the user has clicked on.
tabToSelect.active = true;
this.onSelect.emit(this.tabs.toArray().indexOf(tabToSelect));
}
}
TabsetComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-tabset',
template: `
<ul class="nav-tabset"
[class.disable-style]="disableStyle"
[ngClass]="customNavClass">
<li *ngFor="let tab of tabs"
(click)="selectTab(tab)"
class="nav-tab"
[class.active]="tab.active"
[class.disabled]="tab.disabled">
<span>{{ tab.tabTitle }}</span>
<span *ngIf="!!tab.tabSubTitle" class="tab-subtitle">{{ tab.tabSubTitle }}</span>
</li>
</ul>
<div class="tabs-container"
[ngClass]="customTabsClass">
<ng-content></ng-content>
</div>
`
},] },
];
/** @nocollapse */
TabsetComponent.ctorParameters = () => [];
TabsetComponent.propDecorators = {
"tabs": [{ type: ContentChildren, args: [TabComponent,] },],
"disableStyle": [{ type: Input },],
"customNavClass": [{ type: Input },],
"customTabsClass": [{ type: Input },],
"onSelect": [{ type: Output },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
class TabsModule {
/**
* Use in AppModule: new instance of NgxTabset.
* @return {?}
*/
static forRoot() {
return {
ngModule: TabsModule,
providers: []
};
}
/**
* Use in features modules with lazy loading: new instance of NgxTabset.
* @return {?}
*/
static forChild() {
return {
ngModule: TabsModule,
providers: []
};
}
}
TabsModule.decorators = [
{ type: NgModule, args: [{
declarations: [
TabComponent,
TabsetComponent,
],
exports: [
TabComponent,
TabsetComponent,
],
imports: [CommonModule]
},] },
];
/** @nocollapse */
TabsModule.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
// Public classes.
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Entry point for all public APIs of the package.
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Generated bundle index. Do not edit.
*/
export { TabsetComponent, TabComponent, TabsModule };
//# sourceMappingURL=ngx-tabset.js.map