ng2-bootstrap
Version:
angular2 bootstrap components
126 lines (125 loc) • 4.85 kB
JavaScript
"use strict";
var core_1 = require('@angular/core');
// todo: add active event to tab
// todo: fix? mixing static and dynamic tabs position tabs in order of creation
var TabsetComponent = (function () {
function TabsetComponent() {
this.clazz = true;
this.tabs = [];
this.classMap = {};
}
Object.defineProperty(TabsetComponent.prototype, "vertical", {
get: function () {
return this._vertical;
},
set: function (value) {
this._vertical = value;
this.setClassMap();
},
enumerable: true,
configurable: true
});
;
Object.defineProperty(TabsetComponent.prototype, "justified", {
get: function () {
return this._justified;
},
set: function (value) {
this._justified = value;
this.setClassMap();
},
enumerable: true,
configurable: true
});
;
Object.defineProperty(TabsetComponent.prototype, "type", {
get: function () {
return this._type;
},
set: function (value) {
this._type = value;
this.setClassMap();
},
enumerable: true,
configurable: true
});
;
TabsetComponent.prototype.ngOnInit = function () {
this.type = this.type !== 'undefined' ? this.type : 'tabs';
};
TabsetComponent.prototype.ngOnDestroy = function () {
this.isDestroyed = true;
};
TabsetComponent.prototype.addTab = function (tab) {
this.tabs.push(tab);
tab.active = this.tabs.length === 1 && tab.active !== false;
};
TabsetComponent.prototype.removeTab = function (tab) {
var index = this.tabs.indexOf(tab);
if (index === -1 || this.isDestroyed) {
return;
}
// Select a new tab if the tab to be removed is selected and not destroyed
if (tab.active && this.hasAvailableTabs(index)) {
var newActiveIndex = this.getClosestTabIndex(index);
this.tabs[newActiveIndex].active = true;
}
tab.removed.emit(tab);
this.tabs.splice(index, 1);
};
TabsetComponent.prototype.getClosestTabIndex = function (index) {
var tabsLength = this.tabs.length;
if (!tabsLength) {
return -1;
}
for (var step = 1; step <= tabsLength; step += 1) {
var prevIndex = index - step;
var nextIndex = index + step;
if (this.tabs[prevIndex] && !this.tabs[prevIndex].disabled) {
return prevIndex;
}
if (this.tabs[nextIndex] && !this.tabs[nextIndex].disabled) {
return nextIndex;
}
}
return -1;
};
TabsetComponent.prototype.hasAvailableTabs = function (index) {
var tabsLength = this.tabs.length;
if (!tabsLength) {
return false;
}
for (var i = 0; i < tabsLength; i += 1) {
if (!this.tabs[i].disabled && i !== index) {
return true;
}
}
return false;
};
TabsetComponent.prototype.setClassMap = function () {
this.classMap = (_a = {
'nav-stacked': this.vertical,
'nav-justified': this.justified
},
_a['nav-' + (this.type || 'tabs')] = true,
_a
);
var _a;
};
TabsetComponent.decorators = [
{ type: core_1.Component, args: [{
selector: 'tabset',
template: "\n <ul class=\"nav\" [ngClass]=\"classMap\" (click)=\"$event.preventDefault()\">\n <li *ngFor=\"let tabz of tabs\" class=\"nav-item {{tabz.customClass}}\"\n [class.active]=\"tabz.active\" [class.disabled]=\"tabz.disabled\">\n <a href=\"javascript:void(0);\" class=\"nav-link\"\n [class.active]=\"tabz.active\" [class.disabled]=\"tabz.disabled\"\n (click)=\"tabz.active = true\">\n <span [ngTransclude]=\"tabz.headingRef\">{{tabz.heading}}</span>\n <span *ngIf=\"tabz.removable\">\n <span (click)=\"$event.preventDefault(); removeTab(tabz);\" class=\"glyphicon glyphicon-remove-circle\"></span>\n </span>\n </a>\n </li>\n </ul>\n <div class=\"tab-content\">\n <ng-content></ng-content>\n </div>\n "
},] },
];
/** @nocollapse */
TabsetComponent.ctorParameters = [];
TabsetComponent.propDecorators = {
'vertical': [{ type: core_1.Input },],
'justified': [{ type: core_1.Input },],
'type': [{ type: core_1.Input },],
'clazz': [{ type: core_1.HostBinding, args: ['class.tab-container',] },],
};
return TabsetComponent;
}());
exports.TabsetComponent = TabsetComponent;