@junte/ui
Version:
Quality Angular UI components kit
98 lines • 11.7 kB
JavaScript
import { __decorate, __metadata } from "tslib";
import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
import { Component, ContentChildren, EventEmitter, HostBinding, Input, Output, QueryList } from '@angular/core';
import { PropertyApi } from '../../core/decorators/api';
import { Feature } from '../../core/enums/feature';
import { Outline } from '../../core/enums/outline';
import { UI } from '../../core/enums/ui';
import { TabComponent } from './tab.component';
let TabsComponent = class TabsComponent {
constructor() {
this.ui = UI;
this._active = 0;
this.changed = new EventEmitter();
this.host = 'jnt-tabs-host';
this._outline = Outline.fill;
this.features = [];
}
set active(active) {
this._active = active;
this.changed.emit(active);
}
get active() {
return this._active;
}
set outline(outline) {
this._outline = outline || Outline.fill;
}
};
__decorate([
Input(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], TabsComponent.prototype, "active", null);
__decorate([
Output(),
__metadata("design:type", Object)
], TabsComponent.prototype, "changed", void 0);
__decorate([
HostBinding('attr.host'),
__metadata("design:type", Object)
], TabsComponent.prototype, "host", void 0);
__decorate([
HostBinding('attr.data-outline'),
__metadata("design:type", String)
], TabsComponent.prototype, "_outline", void 0);
__decorate([
PropertyApi({
description: 'there is/no background for the content',
path: 'ui.outline',
default: Outline.fill,
options: [Outline.fill, Outline.transparent]
}),
Input(),
__metadata("design:type", String),
__metadata("design:paramtypes", [String])
], TabsComponent.prototype, "outline", null);
__decorate([
PropertyApi({
description: 'Adapted tabs on mobile view',
path: 'ui.feature',
options: [Feature.adapted]
}),
HostBinding('attr.data-features'),
Input(),
__metadata("design:type", Array)
], TabsComponent.prototype, "features", void 0);
__decorate([
ContentChildren(TabComponent),
__metadata("design:type", QueryList)
], TabsComponent.prototype, "tabs", void 0);
TabsComponent = __decorate([
Component({
selector: 'jnt-tabs',
template: "<ng-template #tabTemplate let-tab=\"tab\">\n <jnt-stack child-of=\"jnt-tabs-host\" data-label\n [orientation]=\"ui.orientation.horizontal\"\n [gutter]=\"ui.gutter.small\"\n [align]=\"ui.align.center\">\n <jnt-icon child-of=\"jnt-tabs-host\" *ngIf=\"tab.icon\" [icon]=\"tab.icon\"></jnt-icon>\n <jnt-stack child-of=\"jnt-tabs-host\" [orientation]=\"ui.orientation.horizontal\"\n [align]=\"ui.align.center\">\n <span child-of=\"jnt-tabs-host\" >{{tab.title}}</span>\n <jnt-stack child-of=\"jnt-tabs-host\" *ngIf=\"tab.badges.length\"\n [orientation]=\"ui.orientation.horizontal\"\n [gutter]=\"ui.gutter.tiny\"\n [align]=\"ui.align.center\">\n <jnt-badge child-of=\"jnt-tabs-host\" data-badge *ngFor=\"let badge of tab.badges\"\n [color]=\"badge.color\"\n [text]=\"badge.text\"\n [value]=\"badge.value\"\n [position]=\"ui.position.inline\">\n </jnt-badge>\n </jnt-stack>\n </jnt-stack>\n </jnt-stack>\n</ng-template>\n\n<jnt-stack child-of=\"jnt-tabs-host\" data-tabs\n [orientation]=\"ui.orientation.horizontal\"\n [wrap]=\"ui.wrap.wrap\"\n [spacing]=\"ui.gutter.small\"\n [gutter]=\"ui.gutter.none\">\n <a child-of=\"jnt-tabs-host\" href=\"#\" data-wrapper *ngFor=\"let tab of tabs;let i = index\"\n [attr.data-active]=\"i === active\"\n (click)=\"active = i; $event.preventDefault()\">\n <div child-of=\"jnt-tabs-host\" data-tab>\n <ng-container *ngIf=\"(!!features && !features.includes(ui.feature.adapted)) || !features; else adaptedTemplate\">\n <ng-container *ngTemplateOutlet=\"tabTemplate; context: {tab: tab}\"></ng-container>\n </ng-container>\n <ng-template #adaptedTemplate>\n <ng-container *jntMinFor=\"ui.breakpoint.tablet\">\n <ng-container *ngTemplateOutlet=\"tabTemplate; context: {tab: tab}\"></ng-container>\n </ng-container>\n <ng-container *jntFor=\"ui.breakpoint.mobile\">\n <jnt-icon child-of=\"jnt-tabs-host\" *ngIf=\"tab.icon\" [icon]=\"tab.icon\"></jnt-icon>\n </ng-container>\n </ng-template>\n <div child-of=\"jnt-tabs-host\" *ngIf=\"tab.state.flash\" [@flash]=\"tab.state.flash\" data-ripple></div>\n </div>\n </a>\n</jnt-stack>\n\n<ng-container *ngFor=\"let tab of tabs;let i = index\">\n <div child-of=\"jnt-tabs-host\" data-content *ngIf=\"i === active && tab.tabContentTemplate\"\n [attr.data-padding]=\"tab.padding\">\n <ng-container *ngTemplateOutlet=\"tab.tabContentTemplate\"></ng-container>\n </div>\n</ng-container>",
animations: [
trigger('flash', [
state('void', style({
opacity: 0
})),
state('*', style({
opacity: 1,
width: '150%',
height: '150%'
})),
transition('void => *', [
animate('.4s ease-in-out')
]),
transition('* => void', [
animate('.3s ease-in-out', keyframes([
style({ opacity: '0' }),
]))
]),
]),
]
})
], TabsComponent);
export { TabsComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AanVudGUvdWkvIiwic291cmNlcyI6WyJsaWIvbmF2aWdhdGlvbi90YWJzL3RhYnMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUM1RixPQUFPLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hILE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN4RCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDbkQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUF1Qy9DLElBQWEsYUFBYSxHQUExQixNQUFhLGFBQWE7SUFBMUI7UUFFRSxPQUFFLEdBQUcsRUFBRSxDQUFDO1FBQ0EsWUFBTyxHQUFHLENBQUMsQ0FBQztRQWFwQixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUc1QixTQUFJLEdBQUcsZUFBZSxDQUFDO1FBR2hDLGFBQVEsR0FBWSxPQUFPLENBQUMsSUFBSSxDQUFDO1FBbUJqQyxhQUFRLEdBQWMsRUFBRSxDQUFDO0lBSTNCLENBQUM7SUF2Q0MsSUFBSSxNQUFNLENBQUMsTUFBYztRQUN2QixJQUFJLENBQUMsT0FBTyxHQUFHLE1BQU0sQ0FBQztRQUN0QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUM1QixDQUFDO0lBRUQsSUFBSSxNQUFNO1FBQ1IsT0FBTyxJQUFJLENBQUMsT0FBTyxDQUFDO0lBQ3RCLENBQUM7SUFpQlEsSUFBSSxPQUFPLENBQUMsT0FBZ0I7UUFDbkMsSUFBSSxDQUFDLFFBQVEsR0FBRyxPQUFPLElBQUksT0FBTyxDQUFDLElBQUksQ0FBQztJQUMxQyxDQUFDO0NBYUYsQ0FBQTtBQXZDQztJQURDLEtBQUssRUFBRTs7OzJDQUlQO0FBT0Q7SUFEQyxNQUFNLEVBQUU7OzhDQUM0QjtBQUdyQztJQURDLFdBQVcsQ0FBQyxXQUFXLENBQUM7OzJDQUNPO0FBR2hDO0lBREMsV0FBVyxDQUFDLG1CQUFtQixDQUFDOzsrQ0FDQTtBQVF4QjtJQU5SLFdBQVcsQ0FBQztRQUNYLFdBQVcsRUFBRSx3Q0FBd0M7UUFDckQsSUFBSSxFQUFFLFlBQVk7UUFDbEIsT0FBTyxFQUFFLE9BQU8sQ0FBQyxJQUFJO1FBQ3JCLE9BQU8sRUFBRSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsT0FBTyxDQUFDLFdBQVcsQ0FBQztLQUM3QyxDQUFDO0lBQ0QsS0FBSyxFQUFFOzs7NENBRVA7QUFTRDtJQVBDLFdBQVcsQ0FBQztRQUNYLFdBQVcsRUFBRSw2QkFBNkI7UUFDMUMsSUFBSSxFQUFFLFlBQVk7UUFDbEIsT0FBTyxFQUFFLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQztLQUMzQixDQUFDO0lBQ0QsV0FBVyxDQUFDLG9CQUFvQixDQUFDO0lBQ2pDLEtBQUssRUFBRTs7K0NBQ2lCO0FBR3pCO0lBREMsZUFBZSxDQUFDLFlBQVksQ0FBQzs4QkFDeEIsU0FBUzsyQ0FBZTtBQTVDbkIsYUFBYTtJQXJDekIsU0FBUyxDQUFDO1FBQ1QsUUFBUSxFQUFFLFVBQVU7UUFDcEIsbXFGQUF1QztRQUN2QyxVQUFVLEVBQUU7WUFDVixPQUFPLENBQUMsT0FBTyxFQUFFO2dCQUNiLEtBQUssQ0FDSCxNQUFNLEVBQ04sS0FBSyxDQUFDO29CQUNKLE9BQU8sRUFBRSxDQUFDO2lCQUNYLENBQUMsQ0FDSDtnQkFDRCxLQUFLLENBQ0gsR0FBRyxFQUNILEtBQUssQ0FBQztvQkFDSixPQUFPLEVBQUUsQ0FBQztvQkFDVixLQUFLLEVBQUUsTUFBTTtvQkFDYixNQUFNLEVBQUUsTUFBTTtpQkFDZixDQUFDLENBQ0g7Z0JBQ0QsVUFBVSxDQUNSLFdBQVcsRUFDWDtvQkFDRSxPQUFPLENBQUMsaUJBQWlCLENBQUM7aUJBQzNCLENBQ0Y7Z0JBQ0QsVUFBVSxDQUNSLFdBQVcsRUFDWDtvQkFDRSxPQUFPLENBQUMsaUJBQWlCLEVBQUUsU0FBUyxDQUFDO3dCQUNuQyxLQUFLLENBQUMsRUFBQyxPQUFPLEVBQUUsR0FBRyxFQUFDLENBQUM7cUJBQ3RCLENBQUMsQ0FBQztpQkFDSixDQUNGO2FBQ0YsQ0FDRjtTQUNGO0tBQ0YsQ0FBQztHQUNXLGFBQWEsQ0E2Q3pCO1NBN0NZLGFBQWEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBhbmltYXRlLCBrZXlmcmFtZXMsIHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBDb250ZW50Q2hpbGRyZW4sIEV2ZW50RW1pdHRlciwgSG9zdEJpbmRpbmcsIElucHV0LCBPdXRwdXQsIFF1ZXJ5TGlzdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUHJvcGVydHlBcGkgfSBmcm9tICcuLi8uLi9jb3JlL2RlY29yYXRvcnMvYXBpJztcbmltcG9ydCB7IEZlYXR1cmUgfSBmcm9tICcuLi8uLi9jb3JlL2VudW1zL2ZlYXR1cmUnO1xuaW1wb3J0IHsgT3V0bGluZSB9IGZyb20gJy4uLy4uL2NvcmUvZW51bXMvb3V0bGluZSc7XG5pbXBvcnQgeyBVSSB9IGZyb20gJy4uLy4uL2NvcmUvZW51bXMvdWknO1xuaW1wb3J0IHsgVGFiQ29tcG9uZW50IH0gZnJvbSAnLi90YWIuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnam50LXRhYnMnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFicy5lbmNhcHN1bGF0ZWQuaHRtbCcsXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdmbGFzaCcsIFtcbiAgICAgICAgc3RhdGUoXG4gICAgICAgICAgJ3ZvaWQnLFxuICAgICAgICAgIHN0eWxlKHtcbiAgICAgICAgICAgIG9wYWNpdHk6IDBcbiAgICAgICAgICB9KVxuICAgICAgICApLFxuICAgICAgICBzdGF0ZShcbiAgICAgICAgICAnKicsXG4gICAgICAgICAgc3R5bGUoe1xuICAgICAgICAgICAgb3BhY2l0eTogMSxcbiAgICAgICAgICAgIHdpZHRoOiAnMTUwJScsXG4gICAgICAgICAgICBoZWlnaHQ6ICcxNTAlJ1xuICAgICAgICAgIH0pXG4gICAgICAgICksXG4gICAgICAgIHRyYW5zaXRpb24oXG4gICAgICAgICAgJ3ZvaWQgPT4gKicsXG4gICAgICAgICAgW1xuICAgICAgICAgICAgYW5pbWF0ZSgnLjRzIGVhc2UtaW4tb3V0JylcbiAgICAgICAgICBdXG4gICAgICAgICksXG4gICAgICAgIHRyYW5zaXRpb24oXG4gICAgICAgICAgJyogPT4gdm9pZCcsXG4gICAgICAgICAgW1xuICAgICAgICAgICAgYW5pbWF0ZSgnLjNzIGVhc2UtaW4tb3V0Jywga2V5ZnJhbWVzKFtcbiAgICAgICAgICAgICAgc3R5bGUoe29wYWNpdHk6ICcwJ30pLFxuICAgICAgICAgICAgXSkpXG4gICAgICAgICAgXVxuICAgICAgICApLFxuICAgICAgXVxuICAgICksXG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgVGFic0NvbXBvbmVudCB7XG5cbiAgdWkgPSBVSTtcbiAgcHJpdmF0ZSBfYWN0aXZlID0gMDtcblxuICBASW5wdXQoKVxuICBzZXQgYWN0aXZlKGFjdGl2ZTogbnVtYmVyKSB7XG4gICAgdGhpcy5fYWN0aXZlID0gYWN0aXZlO1xuICAgIHRoaXMuY2hhbmdlZC5lbWl0KGFjdGl2ZSk7XG4gIH1cblxuICBnZXQgYWN0aXZlKCkge1xuICAgIHJldHVybiB0aGlzLl9hY3RpdmU7XG4gIH1cblxuICBAT3V0cHV0KClcbiAgY2hhbmdlZCA9IG5ldyBFdmVudEVtaXR0ZXI8bnVtYmVyPigpO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5ob3N0JylcbiAgcmVhZG9ubHkgaG9zdCA9ICdqbnQtdGFicy1ob3N0JztcblxuICBASG9zdEJpbmRpbmcoJ2F0dHIuZGF0YS1vdXRsaW5lJylcbiAgX291dGxpbmU6IE91dGxpbmUgPSBPdXRsaW5lLmZpbGw7XG5cbiAgQFByb3BlcnR5QXBpKHtcbiAgICBkZXNjcmlwdGlvbjogJ3RoZXJlIGlzL25vIGJhY2tncm91bmQgZm9yIHRoZSBjb250ZW50JyxcbiAgICBwYXRoOiAndWkub3V0bGluZScsXG4gICAgZGVmYXVsdDogT3V0bGluZS5maWxsLFxuICAgIG9wdGlvbnM6IFtPdXRsaW5lLmZpbGwsIE91dGxpbmUudHJhbnNwYXJlbnRdXG4gIH0pXG4gIEBJbnB1dCgpIHNldCBvdXRsaW5lKG91dGxpbmU6IE91dGxpbmUpIHtcbiAgICB0aGlzLl9vdXRsaW5lID0gb3V0bGluZSB8fCBPdXRsaW5lLmZpbGw7XG4gIH1cblxuICBAUHJvcGVydHlBcGkoe1xuICAgIGRlc2NyaXB0aW9uOiAnQWRhcHRlZCB0YWJzIG9uIG1vYmlsZSB2aWV3JyxcbiAgICBwYXRoOiAndWkuZmVhdHVyZScsXG4gICAgb3B0aW9uczogW0ZlYXR1cmUuYWRhcHRlZF1cbiAgfSlcbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmRhdGEtZmVhdHVyZXMnKVxuICBASW5wdXQoKVxuICBmZWF0dXJlczogRmVhdHVyZVtdID0gW107XG5cbiAgQENvbnRlbnRDaGlsZHJlbihUYWJDb21wb25lbnQpXG4gIHRhYnM6IFF1ZXJ5TGlzdDxUYWJDb21wb25lbnQ+O1xufVxuIl19