import { __decorate, __metadata } from "tslib";
import { Component, Input } from '@angular/core';
import { NavGroup } from '../navigation/nav-group';
/**
 * Component to display navigation tabs
 */
let TabsComponent = class TabsComponent {
    constructor() {
        /** The id of the tabs component, will be used as a prefix for each individual tab */
        this.id = '';
        /** The tabindex of the tabs component, will be applied to each individual tab */
        this.tabindex = 0;
        /** Display tabs in the default style or as pills */
        this.tabStyle = 'tabs';
        /** The tabs group */
        this.tabs = new NavGroup();
    }
    /**
     * Set the selected tab to the one the user clicked on pressed enter
     * when focused. If the event was a keypress.enter and the tab
     * has a link, navigate to that link.
     */
    selectTab(event, tab) {
        if (!tab.disabled && (event.type === 'click' || (event.type === 'keypress' && event.key === 'Enter'))) {
            this.tabs.selected = tab;
        }
    }
};
__decorate([
    Input(),
    __metadata("design:type", String)
], TabsComponent.prototype, "id", void 0);
__decorate([
    Input(),
    __metadata("design:type", Number)
], TabsComponent.prototype, "tabindex", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], TabsComponent.prototype, "tabStyle", void 0);
__decorate([
    Input('tabGroup'),
    __metadata("design:type", NavGroup)
], TabsComponent.prototype, "tabs", void 0);
TabsComponent = __decorate([
    Component({
        selector: 'ec-tabs',
        template: "<ul *ngIf=\"tabs?.items?.length\" class=\"{{tabStyle}}\">\r\n\r\n  <li class=\"{{tab.classlist}}\" [ngClass]=\"{'icon-only': tab.icon && !tab.label}\" *ngFor=\"let tab of tabs?.items; index as i;\">\r\n\r\n    <a *ngIf=\"tab.url && !tab.disabled\"\r\n      tabindex=\"{{tabs?.selected === tab ? -1 : tabindex}}\"\r\n      class=\"tab\"\r\n      id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n      routerLinkActive=\"active\"\r\n      [routerLink]=\"tab.url\"\r\n      [queryParams]=\"tab.queryParams || null\"\r\n      [queryParamsHandling]=\"tab.queryParamsHandling || ''\"\r\n      (keypress)=\"selectTab($event, tab)\"\r\n      (click)=\"selectTab($event, tab)\">\r\n        <ec-icon [icon]=\"tab.icon\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></ec-icon>\r\n        <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n        <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </a>\r\n\r\n    <span *ngIf=\"!tab.url || tab.disabled\"\r\n          tabindex=\"{{tabs?.selected === tab || tab.disabled ? -1 : tabindex}}\"\r\n          id=\"{{tab.id ? tab.id : id + '_item' + i}}\"\r\n          class=\"tab\"\r\n          [ngClass]=\"{'active': tabs?.selected === tab, 'is-disabled': tab.disabled}\"\r\n          (keypress)=\"selectTab($event, tab)\"\r\n          (click)=\"selectTab($event, tab)\">\r\n      <ec-icon [icon]=\"tab.icon\" *ngIf=\"tab.icon\" [class.mr-1]=\"tab.label\"></ec-icon>\r\n      <span class=\"text-truncate\">{{tab.label | translate}}</span>\r\n      <span *ngIf=\"tab?.indicator\" class=\"indicator ml-1\" [style.background-color]=\"tab?.indicator === true ? '' : tab?.indicator\"></span>\r\n    </span>\r\n  </li>\r\n</ul>         ",
        styles: ["@-webkit-keyframes spin{from{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(1turn)}}:host{display:block}ul{padding:0;margin:0;list-style:none}.tabs{display:flex;border-bottom:1px solid #d2d7d9;padding-left:1rem;padding-right:1rem}.tabs li{display:block;min-width:0}.tabs li:not(:last-child){margin-right:.25rem}.tabs .tab{align-items:center;border:1px solid transparent;border-radius:0;color:#5e6d79;cursor:pointer;font-size:.75rem;display:flex;height:2rem;min-width:2rem;padding-left:.5rem;padding-right:.5rem;margin-bottom:-1px}.tabs .tab:hover{color:#354751}.tabs .tab.active{color:#354751;background-color:#f1f3f4;border-top-color:#d2d7d9;border-left-color:#d2d7d9;border-right-color:#d2d7d9}.tabs .tab:focus{outline:0}.tabs .tab:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none}.tabs .tab.is-disabled{color:rgba(26,26,35,.38);cursor:default}.pills{display:flex}.pills li{display:block;min-width:0}.pills li:not(:last-child){margin-right:.25rem}.pills .tab{align-items:center;border:1px solid transparent;border-radius:0;color:#5e6d79;cursor:pointer;font-size:.75rem;display:flex;height:1.5rem;min-width:1.5rem;padding-left:.5rem;padding-right:.5rem}.pills .tab:hover{color:#354751}.pills .tab.active{color:#354751;background-color:#d2d7d9}.pills .tab:focus{outline:0}.pills .tab:focus:not(.active):not(.is-disabled){border-color:#0084a9;box-shadow:0 0 0 1px #0084a9;box-shadow:none}.pills .tab.is-disabled{color:rgba(26,26,35,.38);cursor:default}.icon-only .tab{padding:0;justify-content:center}.indicator{background-color:#6f1c8a;display:block;width:.375rem;height:.375rem;border-radius:50%}"]
    }),
    __metadata("design:paramtypes", [])
], TabsComponent);
export { TabsComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AZW5lcmd5Y2FwL2NvbXBvbmVudHMvIiwic291cmNlcyI6WyJsaWIvY29udHJvbHMvdGFicy90YWJzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBUW5EOztHQUVHO0FBTUgsSUFBYSxhQUFhLEdBQTFCLE1BQWEsYUFBYTtJQWN4QjtRQVpBLHFGQUFxRjtRQUNyRSxPQUFFLEdBQVcsRUFBRSxDQUFDO1FBRWhDLGlGQUFpRjtRQUNqRSxhQUFRLEdBQVcsQ0FBQyxDQUFDO1FBRXJDLG9EQUFvRDtRQUNwQyxhQUFRLEdBQXFCLE1BQU0sQ0FBQztRQUVwRCxxQkFBcUI7UUFDSyxTQUFJLEdBQWEsSUFBSSxRQUFRLEVBQUUsQ0FBQztJQUUxQyxDQUFDO0lBRWpCOzs7O09BSUc7SUFDSSxTQUFTLENBQUMsS0FBWSxFQUFFLEdBQVk7UUFDekMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxRQUFRLElBQUksQ0FBQyxLQUFLLENBQUMsSUFBSSxLQUFLLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEtBQUssVUFBVSxJQUFvQixLQUFNLENBQUMsR0FBRyxLQUFLLE9BQU8sQ0FBQyxDQUFDLEVBQUU7WUFDdEgsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEdBQUcsR0FBRyxDQUFDO1NBQzFCO0lBQ0gsQ0FBQztDQUNGLENBQUE7QUF2QlU7SUFBUixLQUFLLEVBQUU7O3lDQUF3QjtBQUd2QjtJQUFSLEtBQUssRUFBRTs7K0NBQTZCO0FBRzVCO0lBQVIsS0FBSyxFQUFFOzsrQ0FBNEM7QUFHakM7SUFBbEIsS0FBSyxDQUFDLFVBQVUsQ0FBQzs4QkFBYyxRQUFROzJDQUFrQjtBQVovQyxhQUFhO0lBTHpCLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSxTQUFTO1FBQ25CLDJ2REFBb0M7O0tBRXJDLENBQUM7O0dBQ1csYUFBYSxDQTBCekI7U0ExQlksYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmF2SXRlbSB9IGZyb20gJy4uL25hdmlnYXRpb24vbmF2LWl0ZW0nO1xyXG5pbXBvcnQgeyBOYXZHcm91cCB9IGZyb20gJy4uL25hdmlnYXRpb24vbmF2LWdyb3VwJztcclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgVGFiIGV4dGVuZHMgTmF2SXRlbSB7XHJcbiAgdXJsOiBzdHJpbmcsXHJcbiAgdGFicz86IFRhYltdLFxyXG4gIGhpZGU/OiBBcnJheTwoLi4uYXJnczogYW55W10pID0+IGJvb2xlYW4+LFxyXG59XHJcblxyXG4vKipcclxuICogQ29tcG9uZW50IHRvIGRpc3BsYXkgbmF2aWdhdGlvbiB0YWJzXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2VjLXRhYnMnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi90YWJzLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi90YWJzLmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFRhYnNDb21wb25lbnQge1xyXG5cclxuICAvKiogVGhlIGlkIG9mIHRoZSB0YWJzIGNvbXBvbmVudCwgd2lsbCBiZSB1c2VkIGFzIGEgcHJlZml4IGZvciBlYWNoIGluZGl2aWR1YWwgdGFiICovXHJcbiAgQElucHV0KCkgcHVibGljIGlkOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgLyoqIFRoZSB0YWJpbmRleCBvZiB0aGUgdGFicyBjb21wb25lbnQsIHdpbGwgYmUgYXBwbGllZCB0byBlYWNoIGluZGl2aWR1YWwgdGFiICovXHJcbiAgQElucHV0KCkgcHVibGljIHRhYmluZGV4OiBudW1iZXIgPSAwO1xyXG5cclxuICAvKiogRGlzcGxheSB0YWJzIGluIHRoZSBkZWZhdWx0IHN0eWxlIG9yIGFzIHBpbGxzICovXHJcbiAgQElucHV0KCkgcHVibGljIHRhYlN0eWxlOiAndGFicycgfCAncGlsbHMnID0gJ3RhYnMnO1xyXG5cclxuICAvKiogVGhlIHRhYnMgZ3JvdXAgKi9cclxuICBASW5wdXQoJ3RhYkdyb3VwJykgcHVibGljIHRhYnM6IE5hdkdyb3VwID0gbmV3IE5hdkdyb3VwKCk7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkgeyB9XHJcblxyXG4gIC8qKlxyXG4gICAqIFNldCB0aGUgc2VsZWN0ZWQgdGFiIHRvIHRoZSBvbmUgdGhlIHVzZXIgY2xpY2tlZCBvbiBwcmVzc2VkIGVudGVyXHJcbiAgICogd2hlbiBmb2N1c2VkLiBJZiB0aGUgZXZlbnQgd2FzIGEga2V5cHJlc3MuZW50ZXIgYW5kIHRoZSB0YWJcclxuICAgKiBoYXMgYSBsaW5rLCBuYXZpZ2F0ZSB0byB0aGF0IGxpbmsuXHJcbiAgICovXHJcbiAgcHVibGljIHNlbGVjdFRhYihldmVudDogRXZlbnQsIHRhYjogTmF2SXRlbSkge1xyXG4gICAgaWYgKCF0YWIuZGlzYWJsZWQgJiYgKGV2ZW50LnR5cGUgPT09ICdjbGljaycgfHwgKGV2ZW50LnR5cGUgPT09ICdrZXlwcmVzcycgJiYgKDxLZXlib2FyZEV2ZW50PmV2ZW50KS5rZXkgPT09ICdFbnRlcicpKSkge1xyXG4gICAgICB0aGlzLnRhYnMuc2VsZWN0ZWQgPSB0YWI7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcbiJdfQ==