ngx-pluto
Version:
127 lines • 12.7 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ContentChildren, QueryList, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
import { NpTab } from './tab.component';
/**
* @ignore
*/
export class NpTabGroup {
constructor() {
this.selectedIndex = 0;
this.type = 'default';
this.selectedIndexChange = new EventEmitter();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes.selectedIndex && !changes.selectedIndex.firstChange) {
/** @type {?} */
const selectedTabComp = this.tabs.find((/**
* @param {?} v
* @param {?} i
* @return {?}
*/
(v, i) => i === changes.selectedIndex.currentValue));
this.selectTab(selectedTabComp);
}
}
/**
* @return {?}
*/
ngAfterContentInit() {
/** @type {?} */
const selectedTabComp = this.tabs.find((/**
* @param {?} v
* @param {?} i
* @return {?}
*/
(v, i) => i === this.selectedIndex));
this.selectTab(selectedTabComp);
}
/**
*
* @param {?} tab 当前选中的tab
* @param {?=} index 当前选中的tab的index，注：index目前只有在单击tab标签页的时候需要传入，其他情况下不需要
* @return {?}
*/
selectTab(tab, index = -1) {
if (tab.disabled) {
return;
}
if (index !== -1) {
this.selectedIndex = index;
}
// deactivate all tabs
this.tabs.toArray().forEach((/**
* @param {?} tabComponent
* @return {?}
*/
tabComponent => {
tabComponent.active = false;
}));
// activate the tab the user has clicked on.
tab.active = true;
// emit changeEvent && selectedIndex
// fix bug，会把初始化时候selectedIndex为undefined传出去
if (this.selectedIndex !== undefined && index > -1) {
this.selectedIndexChange.emit(this.selectedIndex);
}
}
/**
* @param {?} tabs
* @param {?} tab
* @param {?} index
* @return {?}
*/
isShowDivider(tabs, tab, index) {
/** @type {?} */
let tabArray = tabs.toArray();
if (tab.active) {
return false;
}
if (tabArray.length - 1 === index) {
return false;
}
if (!tab.active && tabArray[index + 1] && tabArray[index + 1].active) {
return false;
}
return true;
}
/**
* @return {?}
*/
ngOnDestroy() {
}
}
NpTabGroup.decorators = [
{ type: Component, args: [{
selector: 'np-tab-group',
template: "<div class=\"tab-title-container\" [ngClass]=\"{'chrome-like-tabs': type === 'chrome-like'}\">\r\n <div class=\"tab-title\" *ngFor=\"let tab of tabs;let $index=index\" (click)=\"selectTab(tab, $index)\"\r\n [class.active]=\"tab.active\" [class.disabled]=\"tab.disabled\">\r\n <span *ngIf=\"type === 'chrome-like'\" class=\"square-block-before\"></span>\r\n <ng-container *ngIf=\"tab.headerTemplate\">\r\n <ng-container *ngTemplateOutlet=\"tab.headerTemplate.template; context: { title: tab.tabTitle }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!tab.headerTemplate\">\r\n {{tab.tabTitle }}\r\n </ng-container>\r\n <span *ngIf=\"type === 'chrome-like'\" class=\"square-block-after\"></span>\r\n <span *ngIf=\"type === 'chrome-like' && isShowDivider(tabs, tab, $index) \" class=\"tab-divider\"></span>\r\n </div>\r\n</div>\r\n<ng-content></ng-content>\r\n",
host: { "[class.chrome-like-wrapper]": "type === 'chrome-like'", },
encapsulation: ViewEncapsulation.None,
styles: [".tab-title-container{margin-bottom:40px;height:34px;width:100%;display:flex;padding-bottom:2px}.tab-title-container .tab-title{font-size:16px;font-weight:500;padding-left:18px;padding-right:18px;height:35px;cursor:pointer;padding-bottom:2px;line-height:35px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tab-title-container .tab-title.active{padding-bottom:0}.tab-title-container.chrome-like-tabs{border-top-left-radius:10px;border-top-right-radius:10px}.tab-title-container.chrome-like-tabs .tab-title:first-child{margin-left:15px}.tab-title-container.chrome-like-tabs .tab-title{position:relative;border-radius:10px 10px 0 0}.tab-title-container.chrome-like-tabs .tab-title.active::before{content:'';width:0;height:0;position:absolute;bottom:0;left:-10px;border-width:0 0 10px 10px;border-style:solid;border-bottom-right-radius:20px;transform:rotate(0);z-index:2}.tab-title-container.chrome-like-tabs .tab-title.active::after{content:'';width:0;height:0;position:absolute;bottom:0;right:-10px;border-width:0 0 10px 10px;border-style:solid;border-bottom-right-radius:20px;transform:rotate(90deg);z-index:2}.tab-title-container.chrome-like-tabs .tab-title .square-block-before{position:absolute;content:'';width:10px;height:10px;left:-10px;background-color:inherit;bottom:0}.tab-title-container.chrome-like-tabs .tab-title .square-block-after{position:absolute;content:'';width:10px;height:10px;right:-10px;background-color:inherit;bottom:0}.tab-title-container.chrome-like-tabs .tab-title .tab-divider{width:0;height:20px;position:absolute;right:0;top:9px}.chrome-like-wrapper{border-top-left-radius:10px;border-top-right-radius:10px}"]
}] }
];
/** @nocollapse */
NpTabGroup.ctorParameters = () => [];
NpTabGroup.propDecorators = {
selectedIndex: [{ type: Input }],
type: [{ type: Input }],
selectedIndexChange: [{ type: Output }],
tabs: [{ type: ContentChildren, args: [NpTab,] }]
};
if (false) {
/** @type {?} */
NpTabGroup.prototype.selectedIndex;
/** @type {?} */
NpTabGroup.prototype.type;
/** @type {?} */
NpTabGroup.prototype.selectedIndexChange;
/** @type {?} */
NpTabGroup.prototype.tabs;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1wbHV0by8iLCJzb3VyY2VzIjpbImxpYi90YWIvdGFiLWdyb3VwLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFBb0IsZUFBZSxFQUFFLFNBQVMsRUFDdkQsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQXVDLGlCQUFpQixFQUNwRixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0saUJBQWlCLENBQUM7Ozs7QUFZeEMsTUFBTSxPQUFPLFVBQVU7SUFRckI7UUFQUyxrQkFBYSxHQUFHLENBQUMsQ0FBQztRQUNsQixTQUFJLEdBQThCLFNBQVMsQ0FBQztRQUUzQyx3QkFBbUIsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBSTNDLENBQUM7Ozs7O0lBRWpCLFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxhQUFhLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLFdBQVcsRUFBRTs7a0JBQ3pELGVBQWUsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUk7Ozs7O1lBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEtBQUssT0FBTyxDQUFDLGFBQWEsQ0FBQyxZQUFZLEVBQUM7WUFDMUYsSUFBSSxDQUFDLFNBQVMsQ0FBQyxlQUFlLENBQUMsQ0FBQztTQUNqQztJQUNILENBQUM7Ozs7SUFFRCxrQkFBa0I7O2NBQ1YsZUFBZSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSTs7Ozs7UUFBQyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsS0FBSyxJQUFJLENBQUMsYUFBYSxFQUFDO1FBQzFFLElBQUksQ0FBQyxTQUFTLENBQUMsZUFBZSxDQUFDLENBQUM7SUFDbEMsQ0FBQzs7Ozs7OztJQU9ELFNBQVMsQ0FBQyxHQUFVLEVBQUUsUUFBZ0IsQ0FBQyxDQUFDO1FBQ3RDLElBQUksR0FBRyxDQUFDLFFBQVEsRUFBRTtZQUNoQixPQUFPO1NBQ1I7UUFFRCxJQUFJLEtBQUssS0FBSyxDQUFDLENBQUMsRUFBRTtZQUNoQixJQUFJLENBQUMsYUFBYSxHQUFHLEtBQUssQ0FBQztTQUM1QjtRQUVELHNCQUFzQjtRQUN0QixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDLE9BQU87Ozs7UUFBQyxZQUFZLENBQUMsRUFBRTtZQUN6QyxZQUFZLENBQUMsTUFBTSxHQUFHLEtBQUssQ0FBQztRQUM5QixDQUFDLEVBQUMsQ0FBQztRQUVILDRDQUE0QztRQUM1QyxHQUFHLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztRQUVsQixvQ0FBb0M7UUFDcEMsNENBQTRDO1FBQzVDLElBQUksSUFBSSxDQUFDLGFBQWEsS0FBSyxTQUFTLElBQUksS0FBSyxHQUFHLENBQUMsQ0FBQyxFQUFFO1lBQ2xELElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO1NBQ25EO0lBQ0gsQ0FBQzs7Ozs7OztJQUVELGFBQWEsQ0FBQyxJQUFzQixFQUFFLEdBQVUsRUFBRSxLQUFhOztZQUN6RCxRQUFRLEdBQUcsSUFBSSxDQUFDLE9BQU8sRUFBRTtRQUM3QixJQUFJLEdBQUcsQ0FBQyxNQUFNLEVBQUU7WUFDZCxPQUFPLEtBQUssQ0FBQztTQUNkO1FBRUQsSUFBSSxRQUFRLENBQUMsTUFBTSxHQUFHLENBQUMsS0FBSyxLQUFLLEVBQUU7WUFDakMsT0FBTyxLQUFLLENBQUM7U0FDZDtRQUVELElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxJQUFJLFFBQVEsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLElBQUksUUFBUSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQyxNQUFNLEVBQUU7WUFDcEUsT0FBTyxLQUFLLENBQUM7U0FDZDtRQUVELE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQzs7OztJQUVELFdBQVc7SUFDWCxDQUFDOzs7WUE1RUYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxjQUFjO2dCQUN4Qix5NUJBQStCO2dCQUUvQixJQUFJLEVBQUUsRUFBRSw2QkFBNkIsRUFBRSx3QkFBd0IsR0FBRztnQkFDbEUsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7O2FBQ3RDOzs7Ozs0QkFFRSxLQUFLO21CQUNMLEtBQUs7a0NBRUwsTUFBTTttQkFFTixlQUFlLFNBQUMsS0FBSzs7OztJQUx0QixtQ0FBMkI7O0lBQzNCLDBCQUFxRDs7SUFFckQseUNBQTJEOztJQUUzRCwwQkFBK0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xyXG4gIENvbXBvbmVudCwgQWZ0ZXJDb250ZW50SW5pdCwgQ29udGVudENoaWxkcmVuLCBRdWVyeUxpc3QsXHJcbiAgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBPbkNoYW5nZXMsIFNpbXBsZUNoYW5nZXMsIE9uRGVzdHJveSwgVmlld0VuY2Fwc3VsYXRpb25cclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTnBUYWIgfSBmcm9tICcuL3RhYi5jb21wb25lbnQnO1xyXG5cclxuLyoqXHJcbiAqIEBpZ25vcmVcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbnAtdGFiLWdyb3VwJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vdGFiLWdyb3VwLmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3RhYi1ncm91cC5zY3NzJ10sXHJcbiAgaG9zdDogeyBcIltjbGFzcy5jaHJvbWUtbGlrZS13cmFwcGVyXVwiOiBcInR5cGUgPT09ICdjaHJvbWUtbGlrZSdcIiwgfSxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOcFRhYkdyb3VwIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCwgT25DaGFuZ2VzLCBPbkRlc3Ryb3kge1xyXG4gIEBJbnB1dCgpIHNlbGVjdGVkSW5kZXggPSAwO1xyXG4gIEBJbnB1dCgpIHR5cGU6ICdkZWZhdWx0JyB8ICdjaHJvbWUtbGlrZScgPSAnZGVmYXVsdCc7XHJcblxyXG4gIEBPdXRwdXQoKSBzZWxlY3RlZEluZGV4Q2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XHJcblxyXG4gIEBDb250ZW50Q2hpbGRyZW4oTnBUYWIpIHRhYnM6IFF1ZXJ5TGlzdDxOcFRhYj47XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcclxuICAgIGlmIChjaGFuZ2VzLnNlbGVjdGVkSW5kZXggJiYgIWNoYW5nZXMuc2VsZWN0ZWRJbmRleC5maXJzdENoYW5nZSkge1xyXG4gICAgICBjb25zdCBzZWxlY3RlZFRhYkNvbXAgPSB0aGlzLnRhYnMuZmluZCgodiwgaSkgPT4gaSA9PT0gY2hhbmdlcy5zZWxlY3RlZEluZGV4LmN1cnJlbnRWYWx1ZSk7XHJcbiAgICAgIHRoaXMuc2VsZWN0VGFiKHNlbGVjdGVkVGFiQ29tcCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XHJcbiAgICBjb25zdCBzZWxlY3RlZFRhYkNvbXAgPSB0aGlzLnRhYnMuZmluZCgodiwgaSkgPT4gaSA9PT0gdGhpcy5zZWxlY3RlZEluZGV4KTtcclxuICAgIHRoaXMuc2VsZWN0VGFiKHNlbGVjdGVkVGFiQ29tcCk7XHJcbiAgfVxyXG5cclxuICAvKipcclxuICAgKiBcclxuICAgKiBAcGFyYW0gdGFiIOW9k+WJjemAieS4reeahHRhYlxyXG4gICAqIEBwYXJhbSBpbmRleCDlvZPliY3pgInkuK3nmoR0YWLnmoRpbmRleO+8jOazqO+8mmluZGV455uu5YmN5Y+q5pyJ5Zyo5Y2V5Ye7dGFi5qCH562+6aG155qE5pe25YCZ6ZyA6KaB5Lyg5YWl77yM5YW25LuW5oOF5Ya15LiL5LiN6ZyA6KaBXHJcbiAgICovXHJcbiAgc2VsZWN0VGFiKHRhYjogTnBUYWIsIGluZGV4OiBudW1iZXIgPSAtMSkge1xyXG4gICAgaWYgKHRhYi5kaXNhYmxlZCkge1xyXG4gICAgICByZXR1cm47XHJcbiAgICB9XHJcblxyXG4gICAgaWYgKGluZGV4ICE9PSAtMSkge1xyXG4gICAgICB0aGlzLnNlbGVjdGVkSW5kZXggPSBpbmRleDtcclxuICAgIH1cclxuXHJcbiAgICAvLyBkZWFjdGl2YXRlIGFsbCB0YWJzXHJcbiAgICB0aGlzLnRhYnMudG9BcnJheSgpLmZvckVhY2godGFiQ29tcG9uZW50ID0+IHtcclxuICAgICAgdGFiQ29tcG9uZW50LmFjdGl2ZSA9IGZhbHNlO1xyXG4gICAgfSk7XHJcblxyXG4gICAgLy8gYWN0aXZhdGUgdGhlIHRhYiB0aGUgdXNlciBoYXMgY2xpY2tlZCBvbi5cclxuICAgIHRhYi5hY3RpdmUgPSB0cnVlO1xyXG5cclxuICAgIC8vIGVtaXQgY2hhbmdlRXZlbnQgJiYgc2VsZWN0ZWRJbmRleFxyXG4gICAgLy8gZml4IGJ1Z++8jOS8muaKiuWIneWni+WMluaXtuWAmXNlbGVjdGVkSW5kZXjkuLp1bmRlZmluZWTkvKDlh7rljrtcclxuICAgIGlmICh0aGlzLnNlbGVjdGVkSW5kZXggIT09IHVuZGVmaW5lZCAmJiBpbmRleCA+IC0xKSB7XHJcbiAgICAgIHRoaXMuc2VsZWN0ZWRJbmRleENoYW5nZS5lbWl0KHRoaXMuc2VsZWN0ZWRJbmRleCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBpc1Nob3dEaXZpZGVyKHRhYnM6IFF1ZXJ5TGlzdDxOcFRhYj4sIHRhYjogTnBUYWIsIGluZGV4OiBudW1iZXIpIHtcclxuICAgIGxldCB0YWJBcnJheSA9IHRhYnMudG9BcnJheSgpO1xyXG4gICAgaWYgKHRhYi5hY3RpdmUpIHtcclxuICAgICAgcmV0dXJuIGZhbHNlO1xyXG4gICAgfVxyXG5cclxuICAgIGlmICh0YWJBcnJheS5sZW5ndGggLSAxID09PSBpbmRleCkge1xyXG4gICAgICByZXR1cm4gZmFsc2U7XHJcbiAgICB9XHJcblxyXG4gICAgaWYgKCF0YWIuYWN0aXZlICYmIHRhYkFycmF5W2luZGV4ICsgMV0gJiYgdGFiQXJyYXlbaW5kZXggKyAxXS5hY3RpdmUpIHtcclxuICAgICAgcmV0dXJuIGZhbHNlO1xyXG4gICAgfVxyXG5cclxuICAgIHJldHVybiB0cnVlO1xyXG4gIH1cclxuXHJcbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XHJcbiAgfVxyXG59XHJcbiJdfQ==