@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
136 lines • 13.7 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';
var TabsComponent = /** @class */ (function () {
function TabsComponent() {
this.type = 'tabs';
this.showContent = true;
this.vertical = false;
this.activeTabChange = new EventEmitter();
}
/**
* @return {?}
*/
TabsComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @param {?} currentTab
* @return {?}
*/
TabsComponent.prototype.canChange = /**
* @param {?} currentTab
* @return {?}
*/
function (currentTab) {
/** @type {?} */
var changeResult = Promise.resolve(true);
if (this.beforeChange) {
/** @type {?} */
var 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 {?}
*/
TabsComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
if (this.activeTab === undefined && this.tabs.length > 0) {
this.select(this.tabs.first.id);
}
};
/**
* @param {?} id
* @return {?}
*/
TabsComponent.prototype.select = /**
* @param {?} id
* @return {?}
*/
function (id) {
var _this = this;
this.canChange(id).then((/**
* @param {?} change
* @return {?}
*/
function (change) {
if (!change) {
return;
}
/** @type {?} */
var tab = _this.tabs.find((/**
* @param {?} item
* @return {?}
*/
function (item) { return 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 = function () { return []; };
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 }]
};
return TabsComponent;
}());
export { TabsComponent };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9uZy1kZXZ1aS90YWJzLyIsInNvdXJjZXMiOlsidGFicy5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUVULFNBQVMsRUFDVCxlQUFlLEVBQ2YsS0FBSyxFQUNMLE1BQU0sRUFDTixZQUFZLEdBRWIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBSS9DO0lBZ0JFO1FBVFMsU0FBSSxHQUFnQyxNQUFNLENBQUM7UUFDM0MsZ0JBQVcsR0FBRyxJQUFJLENBQUM7UUFFbkIsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUloQixvQkFBZSxHQUFHLElBQUksWUFBWSxFQUFrQixDQUFDO0lBRy9ELENBQUM7Ozs7SUFFRCxnQ0FBUTs7O0lBQVI7SUFDQSxDQUFDOzs7OztJQUNELGlDQUFTOzs7O0lBQVQsVUFBVSxVQUEyQjs7WUFDL0IsWUFBWSxHQUFHLE9BQU8sQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO1FBRXhDLElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTs7Z0JBQ2YsTUFBTSxHQUFRLElBQUksQ0FBQyxZQUFZLENBQUMsVUFBVSxDQUFDO1lBQ2pELElBQUksT0FBTyxNQUFNLEtBQUssV0FBVyxFQUFFO2dCQUNqQyxJQUFJLE1BQU0sQ0FBQyxJQUFJLEVBQUU7b0JBQ2YsWUFBWSxHQUFHLE1BQU0sQ0FBQztpQkFDdkI7cUJBQU0sSUFBSSxNQUFNLENBQUMsU0FBUyxFQUFFO29CQUMzQixZQUFZLEdBQUcsQ0FBQyxtQkFBQSxNQUFNLEVBQXVCLENBQUMsQ0FBQyxTQUFTLEVBQUUsQ0FBQztpQkFDNUQ7cUJBQU07b0JBQ0wsWUFBWSxHQUFHLE9BQU8sQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7aUJBQ3hDO2FBQ0Y7U0FDRjtRQUVELE9BQU8sWUFBWSxDQUFDO0lBQ3RCLENBQUM7Ozs7SUFDRCwwQ0FBa0I7OztJQUFsQjtRQUNFLElBQUksSUFBSSxDQUFDLFNBQVMsS0FBSyxTQUFTLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFO1lBQ3hELElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDakM7SUFDSCxDQUFDOzs7OztJQUVELDhCQUFNOzs7O0lBQU4sVUFBTyxFQUFtQjtRQUExQixpQkFXQztRQVZDLElBQUksQ0FBQyxTQUFTLENBQUMsRUFBRSxDQUFDLENBQUMsSUFBSTs7OztRQUFDLFVBQUMsTUFBTTtZQUM3QixJQUFJLENBQUMsTUFBTSxFQUFFO2dCQUNYLE9BQU87YUFDUjs7Z0JBQ0ssR0FBRyxHQUFHLEtBQUksQ0FBQyxJQUFJLENBQUMsSUFBSTs7OztZQUFDLFVBQUEsSUFBSSxJQUFJLE9BQUEsSUFBSSxDQUFDLEVBQUUsS0FBSyxFQUFFLEVBQWQsQ0FBYyxFQUFDO1lBQ2xELElBQUksR0FBRyxJQUFJLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRTtnQkFDeEIsS0FBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7Z0JBQ3BCLEtBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxDQUFDO2FBQy9CO1FBQ0gsQ0FBQyxFQUFDLENBQUM7SUFDTCxDQUFDOztnQkF4REYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxRQUFRO29CQUNsQiw2ckNBQW9DO29CQUVwQyxRQUFRLEVBQUUsTUFBTTs7aUJBQ2pCOzs7Ozt1QkFFRSxLQUFLOzhCQUNMLEtBQUs7NEJBQ0wsS0FBSzsyQkFDTCxLQUFLOzJCQUNMLEtBQUs7OEJBQ0wsS0FBSzt1QkFDTCxlQUFlLFNBQUMsWUFBWTtrQ0FDNUIsTUFBTTsrQkFDTixLQUFLOztJQTJDUixvQkFBQztDQUFBLEFBMURELElBMERDO1NBcERZLGFBQWE7OztJQUN4Qiw2QkFBb0Q7O0lBQ3BELG9DQUE0Qjs7SUFDNUIsa0NBQW1DOztJQUNuQyxpQ0FBMEI7O0lBQzFCLGlDQUEwQjs7SUFDMUIsb0NBQTZCOztJQUM3Qiw2QkFBNkQ7O0lBQzdELHdDQUErRDs7SUFDL0QscUNBQW1GIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcclxuICBDb21wb25lbnQsXHJcbiAgT25Jbml0LFxyXG4gIFF1ZXJ5TGlzdCxcclxuICBDb250ZW50Q2hpbGRyZW4sXHJcbiAgSW5wdXQsXHJcbiAgT3V0cHV0LFxyXG4gIEV2ZW50RW1pdHRlcixcclxuICBBZnRlckNvbnRlbnRJbml0LFxyXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBUYWJDb21wb25lbnQgfSBmcm9tICcuL3RhYi5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBPYnNlcnZhYmxlIH0gZnJvbSAncnhqcyc7XHJcblxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdkLXRhYnMnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJzLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi90YWJzLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgZXhwb3J0QXM6ICd0YWJzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgVGFic0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJDb250ZW50SW5pdCB7XHJcbiAgQElucHV0KCkgdHlwZTogJ3RhYnMnfCAncGlsbHMnIHwgJ29wdGlvbnMnID0gJ3RhYnMnO1xyXG4gIEBJbnB1dCgpIHNob3dDb250ZW50ID0gdHJ1ZTtcclxuICBASW5wdXQoKSBhY3RpdmVUYWI6IG51bWJlciB8c3RyaW5nO1xyXG4gIEBJbnB1dCgpIHZlcnRpY2FsID0gZmFsc2U7XHJcbiAgQElucHV0KCkgY3NzQ2xhc3M6IHN0cmluZztcclxuICBASW5wdXQoKSBjdXN0b21XaWR0aDogc3RyaW5nO1xyXG4gIEBDb250ZW50Q2hpbGRyZW4oVGFiQ29tcG9uZW50KSB0YWJzOiBRdWVyeUxpc3Q8VGFiQ29tcG9uZW50PjtcclxuICBAT3V0cHV0KCkgYWN0aXZlVGFiQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXJ8IHN0cmluZz4oKTtcclxuICBASW5wdXQoKSBiZWZvcmVDaGFuZ2U6ICh2YWx1ZSkgPT4gYm9vbGVhbiB8IFByb21pc2U8Ym9vbGVhbj4gfCBPYnNlcnZhYmxlPGJvb2xlYW4+O1xyXG4gIGNvbnN0cnVjdG9yKCkge1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgfVxyXG4gIGNhbkNoYW5nZShjdXJyZW50VGFiOiBudW1iZXIgfCBzdHJpbmcpIHtcclxuICAgIGxldCBjaGFuZ2VSZXN1bHQgPSBQcm9taXNlLnJlc29sdmUodHJ1ZSk7XHJcblxyXG4gICAgaWYgKHRoaXMuYmVmb3JlQ2hhbmdlKSB7XHJcbiAgICAgIGNvbnN0IHJlc3VsdDogYW55ID0gdGhpcy5iZWZvcmVDaGFuZ2UoY3VycmVudFRhYik7XHJcbiAgICAgIGlmICh0eXBlb2YgcmVzdWx0ICE9PSAndW5kZWZpbmVkJykge1xyXG4gICAgICAgIGlmIChyZXN1bHQudGhlbikge1xyXG4gICAgICAgICAgY2hhbmdlUmVzdWx0ID0gcmVzdWx0O1xyXG4gICAgICAgIH0gZWxzZSBpZiAocmVzdWx0LnN1YnNjcmliZSkge1xyXG4gICAgICAgICAgY2hhbmdlUmVzdWx0ID0gKHJlc3VsdCBhcyBPYnNlcnZhYmxlPGJvb2xlYW4+KS50b1Byb21pc2UoKTtcclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgY2hhbmdlUmVzdWx0ID0gUHJvbWlzZS5yZXNvbHZlKHJlc3VsdCk7XHJcbiAgICAgICAgfVxyXG4gICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcmV0dXJuIGNoYW5nZVJlc3VsdDtcclxuICB9XHJcbiAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xyXG4gICAgaWYgKHRoaXMuYWN0aXZlVGFiID09PSB1bmRlZmluZWQgJiYgdGhpcy50YWJzLmxlbmd0aCA+IDApIHtcclxuICAgICAgdGhpcy5zZWxlY3QodGhpcy50YWJzLmZpcnN0LmlkKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIHNlbGVjdChpZDogbnVtYmVyIHwgc3RyaW5nKSB7XHJcbiAgICB0aGlzLmNhbkNoYW5nZShpZCkudGhlbigoY2hhbmdlKSA9PiB7XHJcbiAgICAgIGlmICghY2hhbmdlKSB7XHJcbiAgICAgICAgcmV0dXJuO1xyXG4gICAgICB9XHJcbiAgICAgIGNvbnN0IHRhYiA9IHRoaXMudGFicy5maW5kKGl0ZW0gPT4gaXRlbS5pZCA9PT0gaWQpO1xyXG4gICAgICBpZiAodGFiICYmICF0YWIuZGlzYWJsZWQpIHtcclxuICAgICAgICB0aGlzLmFjdGl2ZVRhYiA9IGlkO1xyXG4gICAgICAgIHRoaXMuYWN0aXZlVGFiQ2hhbmdlLmVtaXQoaWQpO1xyXG4gICAgICB9XHJcbiAgICB9KTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==