@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
119 lines • 13 kB
JavaScript
/**
* @fileoverview added by tsickle
* Generated from: tabs.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, QueryList, ContentChildren, Input, Output, EventEmitter, } from '@angular/core';
import { TabComponent } from './tab.component';
export class TabsComponent {
constructor() {
this.type = 'tabs';
this.showContent = true;
this.vertical = false;
this.activeTabChange = new EventEmitter();
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} currentTab
* @return {?}
*/
canChange(currentTab) {
/** @type {?} */
let changeResult = Promise.resolve(true);
if (this.beforeChange) {
/** @type {?} */
const result = this.beforeChange(currentTab);
if (typeof result !== 'undefined') {
if (result.then) {
changeResult = result;
}
else if (result.subscribe) {
changeResult = ((/** @type {?} */ (result))).toPromise();
}
else {
changeResult = Promise.resolve(result);
}
}
}
return changeResult;
}
/**
* @return {?}
*/
ngAfterContentInit() {
if (this.activeTab === undefined && this.tabs.length > 0) {
this.select(this.tabs.first.id);
}
}
/**
* @param {?} id
* @return {?}
*/
select(id) {
this.canChange(id).then((/**
* @param {?} change
* @return {?}
*/
(change) => {
if (!change) {
return;
}
/** @type {?} */
const tab = this.tabs.find((/**
* @param {?} item
* @return {?}
*/
item => item.id === id));
if (tab && !tab.disabled) {
this.activeTab = id;
this.activeTabChange.emit(id);
}
}));
}
}
TabsComponent.decorators = [
{ type: Component, args: [{
selector: 'd-tabs',
template: "<ul\r\n class=\"devui-nav devui-nav-{{ type }} {{ cssClass }}\"\r\n [ngClass]=\"{\r\n 'devui-nav-stacked': vertical\r\n }\"\r\n role=\"tablist\"\r\n>\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <li role=\"presentation\" [class.disabled]=\"tab.disabled\" [id]=\"tab.tabId\" [class.active]=\"tab.id == activeTab\" (click)=\"select(tab.id)\">\r\n <a\r\n role=\"tab\"\r\n data-toggle=\"tab\"\r\n [attr.aria-expanded]=\"tab.id == activeTab\"\r\n [style.width]=\"customWidth\"\r\n [ngClass]=\"{ 'custom-width': customWidth }\"\r\n >\r\n <ng-template *ngIf=\"!tab.title\" [ngTemplateOutlet]=\"tab.titleTpl?.templateRef\"></ng-template>\r\n <span *ngIf=\"tab.title\">{{ tab.title }}</span>\r\n </a>\r\n </li>\r\n </ng-container>\r\n</ul>\r\n<div class=\"devui-tab-content\" *ngIf=\"showContent\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"devui-tab-pane fade in\" role=\"tabpanel\" *ngIf=\"tab.id == activeTab\" [ngClass]=\"{ 'in active': tab.id == activeTab }\">\r\n <ng-template [ngTemplateOutlet]=\"tab.contentTpl.templateRef\"></ng-template>\r\n </div>\r\n </ng-container>\r\n</div>\r\n",
exportAs: 'tabs',
styles: [":host{display:block}.devui-nav-pills,.devui-nav-tabs{background:0 0;font-size:14px;font-weight:700}.devui-nav-pills li,.devui-nav-tabs li{cursor:pointer;border:2px solid transparent}.devui-nav-pills li>a,.devui-nav-tabs li>a{cursor:pointer;border:none;line-height:30px;background-color:transparent;padding:0;color:#252b3a}.devui-nav-pills li>a:active,.devui-nav-pills li>a:focus,.devui-nav-pills li>a:hover,.devui-nav-tabs li>a:active,.devui-nav-tabs li>a:focus,.devui-nav-tabs li>a:hover{outline:0}.devui-nav-pills li.disabled a,.devui-nav-tabs li.disabled a{opacity:.3;cursor:not-allowed}.devui-nav-pills li.active>a,.devui-nav-pills li:hover:not(.disabled)>a,.devui-nav-tabs li.active>a,.devui-nav-tabs li:hover:not(.disabled)>a{color:#5e7ce0}.devui-nav-pills li:after,.devui-nav-tabs li:after{content:'';display:block;margin:auto;height:2px;width:0;background:0 0;-webkit-transition:width .3s ease-out,background-color .3s ease-out;transition:width .3s ease-out,background-color .3s ease-out}.devui-nav-pills li.active:after,.devui-nav-tabs li.active:after{width:100%;background:#5e7ce0}.devui-nav-options{font-size:14px;background:0 0;border:none;border-radius:1px}.devui-nav-options>li{cursor:pointer;border:1px solid #adb0b8;border-left-width:0;background-color:#fff;float:left}.devui-nav-options>li:first-child{border-left-width:1px;border-radius:1px 0 0 1px}.devui-nav-options>li:last-child{border-radius:0 1px 1px 0}.devui-nav-options>li>a{cursor:pointer;border:none;color:#252b3a;line-height:30px;padding:0 15px}.devui-nav-options>li>a:active,.devui-nav-options>li>a:focus,.devui-nav-options>li>a:hover{outline:0}.devui-nav-options>li.disabled a{opacity:.3;cursor:not-allowed}.devui-nav-options>li.active>a,.devui-nav-options>li:hover:not(.disabled)>a{color:#fff}.devui-nav-options>li.active>a:hover,.devui-nav-options>li:hover:not(.disabled)>a:hover{color:#fff;background:0 0}.devui-nav-options>li.active:not(:first-child)::before,.devui-nav-options>li:hover:not(.disabled):not(:first-child)::before{content:'';display:block;top:-1px;left:-1px;width:1px;height:'calc(100% + 2px)';position:absolute}.devui-nav-options>li.active{background-color:#5e7ce0;border-color:#5e7ce0}.devui-nav-options>li.active+li::before,.devui-nav-options>li.active:not(:first-child)::before{background-color:#5e7ce0}.devui-nav-options>li:hover:not(.active):not(.disabled){background-color:#344899;border-color:#344899}.devui-nav-options>li:hover:not(.active):not(.disabled):not(:first-child)::before{background-color:#344899}.devui-nav li>a.custom-width{display:inline-block;padding:0;text-align:center}.devui-nav-tabs:not(.devui-nav-stacked){border-bottom:1px solid #adb0b8}.devui-nav-tabs:not(.devui-nav-stacked) li{float:left;margin-left:32px;margin-bottom:-3px}.devui-nav-tabs:not(.devui-nav-stacked) li:first-child{margin-left:0}.devui-nav-pills:not(.devui-nav-stacked)>li{float:left;margin-left:32px}.devui-nav-pills:not(.devui-nav-stacked)>li:first-child{margin-left:0}.devui-nav:after,.devui-nav:before{content:' ';display:table}.devui-nav:after{clear:both}.devui-tab-content{margin-top:20px}"]
}] }
];
/** @nocollapse */
TabsComponent.ctorParameters = () => [];
TabsComponent.propDecorators = {
type: [{ type: Input }],
showContent: [{ type: Input }],
activeTab: [{ type: Input }],
vertical: [{ type: Input }],
cssClass: [{ type: Input }],
customWidth: [{ type: Input }],
tabs: [{ type: ContentChildren, args: [TabComponent,] }],
activeTabChange: [{ type: Output }],
beforeChange: [{ type: Input }]
};
if (false) {
/** @type {?} */
TabsComponent.prototype.type;
/** @type {?} */
TabsComponent.prototype.showContent;
/** @type {?} */
TabsComponent.prototype.activeTab;
/** @type {?} */
TabsComponent.prototype.vertical;
/** @type {?} */
TabsComponent.prototype.cssClass;
/** @type {?} */
TabsComponent.prototype.customWidth;
/** @type {?} */
TabsComponent.prototype.tabs;
/** @type {?} */
TabsComponent.prototype.activeTabChange;
/** @type {?} */
TabsComponent.prototype.beforeChange;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZy1kZXZ1aS90YWJzLyIsInNvdXJjZXMiOlsidGFicy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUVULFNBQVMsRUFDVCxlQUFlLEVBQ2YsS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEdBRWIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBVS9DLE1BQU0sT0FBTyxhQUFhO0lBVXhCO1FBVFMsU0FBSSxHQUFnQyxNQUFNLENBQUM7UUFDM0MsZ0JBQVcsR0FBRyxJQUFJLENBQUM7UUFFbkIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUloQixvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFrQixDQUFDO0lBRy9ELENBQUM7Ozs7SUFFRCxRQUFRO0lBQ1IsQ0FBQzs7Ozs7SUFDRCxTQUFTLENBQUMsVUFBMkI7O1lBQy9CLFlBQVksR0FBRyxPQUFPLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQztRQUV4QyxJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7O2tCQUNmLE1BQU0sR0FBUSxJQUFJLENBQUMsWUFBWSxDQUFDLFVBQVUsQ0FBQztZQUNqRCxJQUFJLE9BQU8sTUFBTSxLQUFLLFdBQVcsRUFBRTtnQkFDakMsSUFBSSxNQUFNLENBQUMsSUFBSSxFQUFFO29CQUNmLFlBQVksR0FBRyxNQUFNLENBQUM7aUJBQ3ZCO3FCQUFNLElBQUksTUFBTSxDQUFDLFNBQVMsRUFBRTtvQkFDM0IsWUFBWSxHQUFHLENBQUMsbUJBQUEsTUFBTSxFQUF1QixDQUFDLENBQUMsU0FBUyxFQUFFLENBQUM7aUJBQzVEO3FCQUFNO29CQUNMLFlBQVksR0FBRyxPQUFPLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO2lCQUN4QzthQUNGO1NBQ0Y7UUFFRCxPQUFPLFlBQVksQ0FBQztJQUN0QixDQUFDOzs7O0lBQ0Qsa0JBQWtCO1FBQ2hCLElBQUksSUFBSSxDQUFDLFNBQVMsS0FBSyxTQUFTLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ3hELElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDakM7SUFDSCxDQUFDOzs7OztJQUVELE1BQU0sQ0FBQyxFQUFtQjtRQUN4QixJQUFJLENBQUMsU0FBUyxDQUFDLEVBQUUsQ0FBQyxDQUFDLElBQUk7Ozs7UUFBQyxDQUFDLE1BQU0sRUFBRSxFQUFFO1lBQ2pDLElBQUksQ0FBQyxNQUFNLEVBQUU7Z0JBQ1gsT0FBTzthQUNSOztrQkFDSyxHQUFHLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJOzs7O1lBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxLQUFLLEVBQUUsRUFBQztZQUNsRCxJQUFJLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLEVBQUU7Z0JBQ3hCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO2dCQUNwQixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQzthQUMvQjtRQUNILENBQUMsRUFBQyxDQUFDO0lBQ0wsQ0FBQzs7O1lBeERGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsUUFBUTtnQkFDbEIsNnJDQUFvQztnQkFFcEMsUUFBUSxFQUFFLE1BQU07O2FBQ2pCOzs7OzttQkFFRSxLQUFLOzBCQUNMLEtBQUs7d0JBQ0wsS0FBSzt1QkFDTCxLQUFLO3VCQUNMLEtBQUs7MEJBQ0wsS0FBSzttQkFDTCxlQUFlLFNBQUMsWUFBWTs4QkFDNUIsTUFBTTsyQkFDTixLQUFLOzs7O0lBUk4sNkJBQW9EOztJQUNwRCxvQ0FBNEI7O0lBQzVCLGtDQUFtQzs7SUFDbkMsaUNBQTBCOztJQUMxQixpQ0FBMEI7O0lBQzFCLG9DQUE2Qjs7SUFDN0IsNkJBQTZEOztJQUM3RCx3Q0FBK0Q7O0lBQy9ELHFDQUFtRiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XHJcbiAgQ29tcG9uZW50LFxyXG4gIE9uSW5pdCxcclxuICBRdWVyeUxpc3QsXHJcbiAgQ29udGVudENoaWxkcmVuLFxyXG4gIElucHV0LFxyXG4gIE91dHB1dCxcclxuICBFdmVudEVtaXR0ZXIsXHJcbiAgQWZ0ZXJDb250ZW50SW5pdCxcclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgVGFiQ29tcG9uZW50IH0gZnJvbSAnLi90YWIuY29tcG9uZW50JztcclxuaW1wb3J0IHsgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xyXG5cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnZC10YWJzJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdGFicy5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vdGFicy5jb21wb25lbnQuc2NzcyddLFxyXG4gIGV4cG9ydEFzOiAndGFicydcclxufSlcclxuZXhwb3J0IGNsYXNzIFRhYnNDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyQ29udGVudEluaXQge1xyXG4gIEBJbnB1dCgpIHR5cGU6ICd0YWJzJ3wgJ3BpbGxzJyB8ICdvcHRpb25zJyA9ICd0YWJzJztcclxuICBASW5wdXQoKSBzaG93Q29udGVudCA9IHRydWU7XHJcbiAgQElucHV0KCkgYWN0aXZlVGFiOiBudW1iZXIgfHN0cmluZztcclxuICBASW5wdXQoKSB2ZXJ0aWNhbCA9IGZhbHNlO1xyXG4gIEBJbnB1dCgpIGNzc0NsYXNzOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgY3VzdG9tV2lkdGg6IHN0cmluZztcclxuICBAQ29udGVudENoaWxkcmVuKFRhYkNvbXBvbmVudCkgdGFiczogUXVlcnlMaXN0PFRhYkNvbXBvbmVudD47XHJcbiAgQE91dHB1dCgpIGFjdGl2ZVRhYkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyfCBzdHJpbmc+KCk7XHJcbiAgQElucHV0KCkgYmVmb3JlQ2hhbmdlOiAodmFsdWUpID0+IGJvb2xlYW4gfCBQcm9taXNlPGJvb2xlYW4+IHwgT2JzZXJ2YWJsZTxib29sZWFuPjtcclxuICBjb25zdHJ1Y3RvcigpIHtcclxuICB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gIH1cclxuICBjYW5DaGFuZ2UoY3VycmVudFRhYjogbnVtYmVyIHwgc3RyaW5nKSB7XHJcbiAgICBsZXQgY2hhbmdlUmVzdWx0ID0gUHJvbWlzZS5yZXNvbHZlKHRydWUpO1xyXG5cclxuICAgIGlmICh0aGlzLmJlZm9yZUNoYW5nZSkge1xyXG4gICAgICBjb25zdCByZXN1bHQ6IGFueSA9IHRoaXMuYmVmb3JlQ2hhbmdlKGN1cnJlbnRUYWIpO1xyXG4gICAgICBpZiAodHlwZW9mIHJlc3VsdCAhPT0gJ3VuZGVmaW5lZCcpIHtcclxuICAgICAgICBpZiAocmVzdWx0LnRoZW4pIHtcclxuICAgICAgICAgIGNoYW5nZVJlc3VsdCA9IHJlc3VsdDtcclxuICAgICAgICB9IGVsc2UgaWYgKHJlc3VsdC5zdWJzY3JpYmUpIHtcclxuICAgICAgICAgIGNoYW5nZVJlc3VsdCA9IChyZXN1bHQgYXMgT2JzZXJ2YWJsZTxib29sZWFuPikudG9Qcm9taXNlKCk7XHJcbiAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgIGNoYW5nZVJlc3VsdCA9IFByb21pc2UucmVzb2x2ZShyZXN1bHQpO1xyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHJldHVybiBjaGFuZ2VSZXN1bHQ7XHJcbiAgfVxyXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpOiB2b2lkIHtcclxuICAgIGlmICh0aGlzLmFjdGl2ZVRhYiA9PT0gdW5kZWZpbmVkICYmIHRoaXMudGFicy5sZW5ndGggPiAwKSB7XHJcbiAgICAgIHRoaXMuc2VsZWN0KHRoaXMudGFicy5maXJzdC5pZCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBzZWxlY3QoaWQ6IG51bWJlciB8IHN0cmluZykge1xyXG4gICAgdGhpcy5jYW5DaGFuZ2UoaWQpLnRoZW4oKGNoYW5nZSkgPT4ge1xyXG4gICAgICBpZiAoIWNoYW5nZSkge1xyXG4gICAgICAgIHJldHVybjtcclxuICAgICAgfVxyXG4gICAgICBjb25zdCB0YWIgPSB0aGlzLnRhYnMuZmluZChpdGVtID0+IGl0ZW0uaWQgPT09IGlkKTtcclxuICAgICAgaWYgKHRhYiAmJiAhdGFiLmRpc2FibGVkKSB7XHJcbiAgICAgICAgdGhpcy5hY3RpdmVUYWIgPSBpZDtcclxuICAgICAgICB0aGlzLmFjdGl2ZVRhYkNoYW5nZS5lbWl0KGlkKTtcclxuICAgICAgfVxyXG4gICAgfSk7XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=