@akveo/nga-theme
Version:
@akveo/nga-theme
121 lines • 5.56 kB
JavaScript
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Component, Input, Output, EventEmitter, ContentChildren, QueryList, HostBinding, } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { convertToBoolProperty } from '../helpers';
var NgaTabComponent = (function () {
function NgaTabComponent() {
this.activeValue = false;
// TODO: it makes sense to add 'lazyLoad' input to 'nga-tabset' component and make this functionality configurable
this.init = false;
}
Object.defineProperty(NgaTabComponent.prototype, "active", {
get: function () {
return this.activeValue;
},
set: function (val) {
this.activeValue = convertToBoolProperty(val);
if (this.activeValue) {
this.init = true;
}
},
enumerable: true,
configurable: true
});
return NgaTabComponent;
}());
__decorate([
Input(),
__metadata("design:type", String)
], NgaTabComponent.prototype, "tabTitle", void 0);
__decorate([
Input(),
__metadata("design:type", String)
], NgaTabComponent.prototype, "route", void 0);
__decorate([
HostBinding('class.content-active'),
__metadata("design:type", Boolean)
], NgaTabComponent.prototype, "activeValue", void 0);
__decorate([
Input(),
__metadata("design:type", Object),
__metadata("design:paramtypes", [Boolean])
], NgaTabComponent.prototype, "active", null);
NgaTabComponent = __decorate([
Component({
selector: 'nga-tab',
template: "\n <ng-container *ngIf=\"init\">\n <ng-content></ng-content>\n </ng-container>\n ",
})
], NgaTabComponent);
export { NgaTabComponent };
var NgaTabsetComponent = (function () {
function NgaTabsetComponent(route) {
this.route = route;
this.fullWidthValue = false;
this.routes = false;
this.changeTab = new EventEmitter();
}
Object.defineProperty(NgaTabsetComponent.prototype, "fullWidth", {
set: function (val) {
this.fullWidthValue = convertToBoolProperty(val);
},
enumerable: true,
configurable: true
});
NgaTabsetComponent.prototype.ngAfterContentInit = function () {
var _this = this;
this.route.params
.subscribe(function (params) {
var activeTab = _this.tabs.find(function (tab) { return _this.routes ? tab.route === params.tab : tab.active; });
_this.selectTab(activeTab || _this.tabs.first);
});
};
NgaTabsetComponent.prototype.selectTab = function (selectedTab) {
this.tabs.forEach(function (tab) { return tab.active = tab === selectedTab; });
this.changeTab.emit(selectedTab);
};
return NgaTabsetComponent;
}());
__decorate([
ContentChildren(NgaTabComponent),
__metadata("design:type", QueryList)
], NgaTabsetComponent.prototype, "tabs", void 0);
__decorate([
HostBinding('class.full-width'),
__metadata("design:type", Boolean)
], NgaTabsetComponent.prototype, "fullWidthValue", void 0);
__decorate([
Input(),
__metadata("design:type", Boolean),
__metadata("design:paramtypes", [Boolean])
], NgaTabsetComponent.prototype, "fullWidth", null);
__decorate([
Input(),
__metadata("design:type", Boolean)
], NgaTabsetComponent.prototype, "routes", void 0);
__decorate([
Output(),
__metadata("design:type", Object)
], NgaTabsetComponent.prototype, "changeTab", void 0);
NgaTabsetComponent = __decorate([
Component({
selector: 'nga-tabset',
styles: [":host{display:block}:host.full-width ul{justify-content:space-around}:host /deep/ nga-tab{flex:1;overflow:auto;display:none}:host /deep/ nga-tab.content-active{display:block}ul{display:flex;flex-direction:row;list-style-type:none;margin:0}ul li{cursor:pointer;margin-bottom:-1px;text-align:center}ul li.active a::before{display:block}ul li a{position:relative;text-decoration:none;display:inline-block}ul li a::before{display:none;position:absolute;content:'';width:100%;height:6px;border-radius:3px;bottom:-2px;left:0} "],
template: "\n <ul>\n <li *ngFor=\"let tab of tabs\"\n (click)=\"selectTab(tab)\"\n [class.active]=\"tab.active\">\n <a href (click)=\"$event.preventDefault()\">{{ tab.tabTitle }}</a>\n </li>\n </ul>\n <ng-content select=\"nga-tab\"></ng-content>\n ",
}),
__metadata("design:paramtypes", [ActivatedRoute])
], NgaTabsetComponent);
export { NgaTabsetComponent };
//# sourceMappingURL=tabset.component.js.map