@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
244 lines (235 loc) • 11.5 kB
JavaScript
import { Directive, TemplateRef, Component, Input, ContentChild, EventEmitter, ContentChildren, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: tab-content.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TabContentDirective {
/**
* @param {?} templateRef
*/
constructor(templateRef) {
this.templateRef = templateRef;
}
}
TabContentDirective.decorators = [
{ type: Directive, args: [{
selector: '[dTabContent]',
},] }
];
/** @nocollapse */
TabContentDirective.ctorParameters = () => [
{ type: TemplateRef }
];
if (false) {
/** @type {?} */
TabContentDirective.prototype.templateRef;
}
/**
* @fileoverview added by tsickle
* Generated from: tab-title.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TabTitleDirective {
/**
* @param {?} templateRef
*/
constructor(templateRef) {
this.templateRef = templateRef;
}
}
TabTitleDirective.decorators = [
{ type: Directive, args: [{
selector: '[dTabTitle]',
},] }
];
/** @nocollapse */
TabTitleDirective.ctorParameters = () => [
{ type: TemplateRef }
];
if (false) {
/** @type {?} */
TabTitleDirective.prototype.templateRef;
}
/**
* @fileoverview added by tsickle
* Generated from: tab.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TabComponent {
constructor() {
this.disabled = false;
}
}
TabComponent.decorators = [
{ type: Component, args: [{
selector: 'd-tab',
template: ''
}] }
];
TabComponent.propDecorators = {
tabId: [{ type: Input }],
id: [{ type: Input }],
title: [{ type: Input }],
disabled: [{ type: Input }],
contentTpl: [{ type: ContentChild, args: [TabContentDirective, { static: false },] }],
titleTpl: [{ type: ContentChild, args: [TabTitleDirective, { static: false },] }]
};
if (false) {
/** @type {?} */
TabComponent.prototype.tabId;
/** @type {?} */
TabComponent.prototype.id;
/** @type {?} */
TabComponent.prototype.title;
/** @type {?} */
TabComponent.prototype.disabled;
/** @type {?} */
TabComponent.prototype.contentTpl;
/** @type {?} */
TabComponent.prototype.titleTpl;
}
/**
* @fileoverview added by tsickle
* Generated from: tabs.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
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;
}
/**
* @fileoverview added by tsickle
* Generated from: tabs.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TabsModule {
}
TabsModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
exports: [TabsComponent, TabComponent, TabTitleDirective, TabContentDirective],
declarations: [TabsComponent, TabComponent, TabTitleDirective, TabContentDirective],
providers: [],
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-tabs.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { TabComponent, TabContentDirective, TabTitleDirective, TabsComponent, TabsModule };
//# sourceMappingURL=ng-devui-tabs.js.map