@junte/ui
Version:
Quality Angular UI components kit
107 lines • 12.3 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';
var TabsComponent = /** @class */ (function () {
function TabsComponent() {
this.ui = UI;
this._active = 0;
this.changed = new EventEmitter();
this.host = 'jnt-tabs-host';
this._outline = Outline.fill;
this.features = [];
}
Object.defineProperty(TabsComponent.prototype, "active", {
get: function () {
return this._active;
},
set: function (active) {
this._active = active;
this.changed.emit(active);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TabsComponent.prototype, "outline", {
set: function (outline) {
this._outline = outline || Outline.fill;
},
enumerable: true,
configurable: true
});
__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);
return TabsComponent;
}());
export { TabsComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AanVudGUvdWkvIiwic291cmNlcyI6WyJsaWIvbmF2aWdhdGlvbi90YWJzL3RhYnMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUM1RixPQUFPLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hILE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN4RCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDbkQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUF1Qy9DO0lBQUE7UUFFRSxPQUFFLEdBQUcsRUFBRSxDQUFDO1FBQ0EsWUFBTyxHQUFHLENBQUMsQ0FBQztRQWFwQixZQUFPLEdBQUcsSUFBSSxZQUFZLEVBQVUsQ0FBQztRQUc1QixTQUFJLEdBQUcsZUFBZSxDQUFDO1FBR2hDLGFBQVEsR0FBWSxPQUFPLENBQUMsSUFBSSxDQUFDO1FBbUJqQyxhQUFRLEdBQWMsRUFBRSxDQUFDO0lBSTNCLENBQUM7SUF2Q0Msc0JBQUksaUNBQU07YUFLVjtZQUNFLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQztRQUN0QixDQUFDO2FBUEQsVUFBVyxNQUFjO1lBQ3ZCLElBQUksQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFDO1lBQ3RCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQzVCLENBQUM7OztPQUFBO0lBcUJRLHNCQUFJLGtDQUFPO2FBQVgsVUFBWSxPQUFnQjtZQUNuQyxJQUFJLENBQUMsUUFBUSxHQUFHLE9BQU8sSUFBSSxPQUFPLENBQUMsSUFBSSxDQUFDO1FBQzFDLENBQUM7OztPQUFBO0lBMUJEO1FBREMsS0FBSyxFQUFFOzs7K0NBSVA7SUFPRDtRQURDLE1BQU0sRUFBRTs7a0RBQzRCO0lBR3JDO1FBREMsV0FBVyxDQUFDLFdBQVcsQ0FBQzs7K0NBQ087SUFHaEM7UUFEQyxXQUFXLENBQUMsbUJBQW1CLENBQUM7O21EQUNBO0lBUXhCO1FBTlIsV0FBVyxDQUFDO1lBQ1gsV0FBVyxFQUFFLHdDQUF3QztZQUNyRCxJQUFJLEVBQUUsWUFBWTtZQUNsQixPQUFPLEVBQUUsT0FBTyxDQUFDLElBQUk7WUFDckIsT0FBTyxFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxPQUFPLENBQUMsV0FBVyxDQUFDO1NBQzdDLENBQUM7UUFDRCxLQUFLLEVBQUU7OztnREFFUDtJQVNEO1FBUEMsV0FBVyxDQUFDO1lBQ1gsV0FBVyxFQUFFLDZCQUE2QjtZQUMxQyxJQUFJLEVBQUUsWUFBWTtZQUNsQixPQUFPLEVBQUUsQ0FBQyxPQUFPLENBQUMsT0FBTyxDQUFDO1NBQzNCLENBQUM7UUFDRCxXQUFXLENBQUMsb0JBQW9CLENBQUM7UUFDakMsS0FBSyxFQUFFOzttREFDaUI7SUFHekI7UUFEQyxlQUFlLENBQUMsWUFBWSxDQUFDO2tDQUN4QixTQUFTOytDQUFlO0lBNUNuQixhQUFhO1FBckN6QixTQUFTLENBQUM7WUFDVCxRQUFRLEVBQUUsVUFBVTtZQUNwQixtcUZBQXVDO1lBQ3ZDLFVBQVUsRUFBRTtnQkFDVixPQUFPLENBQUMsT0FBTyxFQUFFO29CQUNiLEtBQUssQ0FDSCxNQUFNLEVBQ04sS0FBSyxDQUFDO3dCQUNKLE9BQU8sRUFBRSxDQUFDO3FCQUNYLENBQUMsQ0FDSDtvQkFDRCxLQUFLLENBQ0gsR0FBRyxFQUNILEtBQUssQ0FBQzt3QkFDSixPQUFPLEVBQUUsQ0FBQzt3QkFDVixLQUFLLEVBQUUsTUFBTTt3QkFDYixNQUFNLEVBQUUsTUFBTTtxQkFDZixDQUFDLENBQ0g7b0JBQ0QsVUFBVSxDQUNSLFdBQVcsRUFDWDt3QkFDRSxPQUFPLENBQUMsaUJBQWlCLENBQUM7cUJBQzNCLENBQ0Y7b0JBQ0QsVUFBVSxDQUNSLFdBQVcsRUFDWDt3QkFDRSxPQUFPLENBQUMsaUJBQWlCLEVBQUUsU0FBUyxDQUFDOzRCQUNuQyxLQUFLLENBQUMsRUFBQyxPQUFPLEVBQUUsR0FBRyxFQUFDLENBQUM7eUJBQ3RCLENBQUMsQ0FBQztxQkFDSixDQUNGO2lCQUNGLENBQ0Y7YUFDRjtTQUNGLENBQUM7T0FDVyxhQUFhLENBNkN6QjtJQUFELG9CQUFDO0NBQUEsQUE3Q0QsSUE2Q0M7U0E3Q1ksYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGFuaW1hdGUsIGtleWZyYW1lcywgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBDb21wb25lbnQsIENvbnRlbnRDaGlsZHJlbiwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE91dHB1dCwgUXVlcnlMaXN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBQcm9wZXJ0eUFwaSB9IGZyb20gJy4uLy4uL2NvcmUvZGVjb3JhdG9ycy9hcGknO1xuaW1wb3J0IHsgRmVhdHVyZSB9IGZyb20gJy4uLy4uL2NvcmUvZW51bXMvZmVhdHVyZSc7XG5pbXBvcnQgeyBPdXRsaW5lIH0gZnJvbSAnLi4vLi4vY29yZS9lbnVtcy9vdXRsaW5lJztcbmltcG9ydCB7IFVJIH0gZnJvbSAnLi4vLi4vY29yZS9lbnVtcy91aSc7XG5pbXBvcnQgeyBUYWJDb21wb25lbnQgfSBmcm9tICcuL3RhYi5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdqbnQtdGFicycsXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJzLmVuY2Fwc3VsYXRlZC5odG1sJyxcbiAgYW5pbWF0aW9uczogW1xuICAgIHRyaWdnZXIoJ2ZsYXNoJywgW1xuICAgICAgICBzdGF0ZShcbiAgICAgICAgICAndm9pZCcsXG4gICAgICAgICAgc3R5bGUoe1xuICAgICAgICAgICAgb3BhY2l0eTogMFxuICAgICAgICAgIH0pXG4gICAgICAgICksXG4gICAgICAgIHN0YXRlKFxuICAgICAgICAgICcqJyxcbiAgICAgICAgICBzdHlsZSh7XG4gICAgICAgICAgICBvcGFjaXR5OiAxLFxuICAgICAgICAgICAgd2lkdGg6ICcxNTAlJyxcbiAgICAgICAgICAgIGhlaWdodDogJzE1MCUnXG4gICAgICAgICAgfSlcbiAgICAgICAgKSxcbiAgICAgICAgdHJhbnNpdGlvbihcbiAgICAgICAgICAndm9pZCA9PiAqJyxcbiAgICAgICAgICBbXG4gICAgICAgICAgICBhbmltYXRlKCcuNHMgZWFzZS1pbi1vdXQnKVxuICAgICAgICAgIF1cbiAgICAgICAgKSxcbiAgICAgICAgdHJhbnNpdGlvbihcbiAgICAgICAgICAnKiA9PiB2b2lkJyxcbiAgICAgICAgICBbXG4gICAgICAgICAgICBhbmltYXRlKCcuM3MgZWFzZS1pbi1vdXQnLCBrZXlmcmFtZXMoW1xuICAgICAgICAgICAgICBzdHlsZSh7b3BhY2l0eTogJzAnfSksXG4gICAgICAgICAgICBdKSlcbiAgICAgICAgICBdXG4gICAgICAgICksXG4gICAgICBdXG4gICAgKSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBUYWJzQ29tcG9uZW50IHtcblxuICB1aSA9IFVJO1xuICBwcml2YXRlIF9hY3RpdmUgPSAwO1xuXG4gIEBJbnB1dCgpXG4gIHNldCBhY3RpdmUoYWN0aXZlOiBudW1iZXIpIHtcbiAgICB0aGlzLl9hY3RpdmUgPSBhY3RpdmU7XG4gICAgdGhpcy5jaGFuZ2VkLmVtaXQoYWN0aXZlKTtcbiAgfVxuXG4gIGdldCBhY3RpdmUoKSB7XG4gICAgcmV0dXJuIHRoaXMuX2FjdGl2ZTtcbiAgfVxuXG4gIEBPdXRwdXQoKVxuICBjaGFuZ2VkID0gbmV3IEV2ZW50RW1pdHRlcjxudW1iZXI+KCk7XG5cbiAgQEhvc3RCaW5kaW5nKCdhdHRyLmhvc3QnKVxuICByZWFkb25seSBob3N0ID0gJ2pudC10YWJzLWhvc3QnO1xuXG4gIEBIb3N0QmluZGluZygnYXR0ci5kYXRhLW91dGxpbmUnKVxuICBfb3V0bGluZTogT3V0bGluZSA9IE91dGxpbmUuZmlsbDtcblxuICBAUHJvcGVydHlBcGkoe1xuICAgIGRlc2NyaXB0aW9uOiAndGhlcmUgaXMvbm8gYmFja2dyb3VuZCBmb3IgdGhlIGNvbnRlbnQnLFxuICAgIHBhdGg6ICd1aS5vdXRsaW5lJyxcbiAgICBkZWZhdWx0OiBPdXRsaW5lLmZpbGwsXG4gICAgb3B0aW9uczogW091dGxpbmUuZmlsbCwgT3V0bGluZS50cmFuc3BhcmVudF1cbiAgfSlcbiAgQElucHV0KCkgc2V0IG91dGxpbmUob3V0bGluZTogT3V0bGluZSkge1xuICAgIHRoaXMuX291dGxpbmUgPSBvdXRsaW5lIHx8IE91dGxpbmUuZmlsbDtcbiAgfVxuXG4gIEBQcm9wZXJ0eUFwaSh7XG4gICAgZGVzY3JpcHRpb246ICdBZGFwdGVkIHRhYnMgb24gbW9iaWxlIHZpZXcnLFxuICAgIHBhdGg6ICd1aS5mZWF0dXJlJyxcbiAgICBvcHRpb25zOiBbRmVhdHVyZS5hZGFwdGVkXVxuICB9KVxuICBASG9zdEJpbmRpbmcoJ2F0dHIuZGF0YS1mZWF0dXJlcycpXG4gIEBJbnB1dCgpXG4gIGZlYXR1cmVzOiBGZWF0dXJlW10gPSBbXTtcblxuICBAQ29udGVudENoaWxkcmVuKFRhYkNvbXBvbmVudClcbiAgdGFiczogUXVlcnlMaXN0PFRhYkNvbXBvbmVudD47XG59XG4iXX0=