import { __decorate, __metadata } from "tslib";
import { Component, Input } from '@angular/core';
import { NavGroup } from '../navigation/nav-group';
/**
 * Component to display navigation tabs
 */
var TabsComponent = /** @class */ (function () {
    function TabsComponent() {
        /** 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.
     */
    TabsComponent.prototype.selectTab = function (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);
    return TabsComponent;
}());
export { TabsComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9AZW5lcmd5Y2FwL2NvbXBvbmVudHMvIiwic291cmNlcyI6WyJsaWIvY29udHJvbHMvdGFicy90YWJzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFakQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBUW5EOztHQUVHO0FBTUg7SUFjRTtRQVpBLHFGQUFxRjtRQUNyRSxPQUFFLEdBQVcsRUFBRSxDQUFDO1FBRWhDLGlGQUFpRjtRQUNqRSxhQUFRLEdBQVcsQ0FBQyxDQUFDO1FBRXJDLG9EQUFvRDtRQUNwQyxhQUFRLEdBQXFCLE1BQU0sQ0FBQztRQUVwRCxxQkFBcUI7UUFDSyxTQUFJLEdBQWEsSUFBSSxRQUFRLEVBQUUsQ0FBQztJQUUxQyxDQUFDO0lBRWpCOzs7O09BSUc7SUFDSSxpQ0FBUyxHQUFoQixVQUFpQixLQUFZLEVBQUUsR0FBWTtRQUN6QyxJQUFJLENBQUMsR0FBRyxDQUFDLFFBQVEsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEtBQUssT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksS0FBSyxVQUFVLElBQW9CLEtBQU0sQ0FBQyxHQUFHLEtBQUssT0FBTyxDQUFDLENBQUMsRUFBRTtZQUN0SCxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxHQUFHLENBQUM7U0FDMUI7SUFDSCxDQUFDO0lBdEJRO1FBQVIsS0FBSyxFQUFFOzs2Q0FBd0I7SUFHdkI7UUFBUixLQUFLLEVBQUU7O21EQUE2QjtJQUc1QjtRQUFSLEtBQUssRUFBRTs7bURBQTRDO0lBR2pDO1FBQWxCLEtBQUssQ0FBQyxVQUFVLENBQUM7a0NBQWMsUUFBUTsrQ0FBa0I7SUFaL0MsYUFBYTtRQUx6QixTQUFTLENBQUM7WUFDVCxRQUFRLEVBQUUsU0FBUztZQUNuQiwydkRBQW9DOztTQUVyQyxDQUFDOztPQUNXLGFBQWEsQ0EwQnpCO0lBQUQsb0JBQUM7Q0FBQSxBQTFCRCxJQTBCQztTQTFCWSxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBOYXZJdGVtIH0gZnJvbSAnLi4vbmF2aWdhdGlvbi9uYXYtaXRlbSc7XHJcbmltcG9ydCB7IE5hdkdyb3VwIH0gZnJvbSAnLi4vbmF2aWdhdGlvbi9uYXYtZ3JvdXAnO1xyXG5cclxuZXhwb3J0IGludGVyZmFjZSBUYWIgZXh0ZW5kcyBOYXZJdGVtIHtcclxuICB1cmw6IHN0cmluZyxcclxuICB0YWJzPzogVGFiW10sXHJcbiAgaGlkZT86IEFycmF5PCguLi5hcmdzOiBhbnlbXSkgPT4gYm9vbGVhbj4sXHJcbn1cclxuXHJcbi8qKlxyXG4gKiBDb21wb25lbnQgdG8gZGlzcGxheSBuYXZpZ2F0aW9uIHRhYnNcclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnZWMtdGFicycsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3RhYnMuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL3RhYnMuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgVGFic0NvbXBvbmVudCB7XHJcblxyXG4gIC8qKiBUaGUgaWQgb2YgdGhlIHRhYnMgY29tcG9uZW50LCB3aWxsIGJlIHVzZWQgYXMgYSBwcmVmaXggZm9yIGVhY2ggaW5kaXZpZHVhbCB0YWIgKi9cclxuICBASW5wdXQoKSBwdWJsaWMgaWQ6IHN0cmluZyA9ICcnO1xyXG5cclxuICAvKiogVGhlIHRhYmluZGV4IG9mIHRoZSB0YWJzIGNvbXBvbmVudCwgd2lsbCBiZSBhcHBsaWVkIHRvIGVhY2ggaW5kaXZpZHVhbCB0YWIgKi9cclxuICBASW5wdXQoKSBwdWJsaWMgdGFiaW5kZXg6IG51bWJlciA9IDA7XHJcblxyXG4gIC8qKiBEaXNwbGF5IHRhYnMgaW4gdGhlIGRlZmF1bHQgc3R5bGUgb3IgYXMgcGlsbHMgKi9cclxuICBASW5wdXQoKSBwdWJsaWMgdGFiU3R5bGU6ICd0YWJzJyB8ICdwaWxscycgPSAndGFicyc7XHJcblxyXG4gIC8qKiBUaGUgdGFicyBncm91cCAqL1xyXG4gIEBJbnB1dCgndGFiR3JvdXAnKSBwdWJsaWMgdGFiczogTmF2R3JvdXAgPSBuZXcgTmF2R3JvdXAoKTtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7IH1cclxuXHJcbiAgLyoqXHJcbiAgICogU2V0IHRoZSBzZWxlY3RlZCB0YWIgdG8gdGhlIG9uZSB0aGUgdXNlciBjbGlja2VkIG9uIHByZXNzZWQgZW50ZXJcclxuICAgKiB3aGVuIGZvY3VzZWQuIElmIHRoZSBldmVudCB3YXMgYSBrZXlwcmVzcy5lbnRlciBhbmQgdGhlIHRhYlxyXG4gICAqIGhhcyBhIGxpbmssIG5hdmlnYXRlIHRvIHRoYXQgbGluay5cclxuICAgKi9cclxuICBwdWJsaWMgc2VsZWN0VGFiKGV2ZW50OiBFdmVudCwgdGFiOiBOYXZJdGVtKSB7XHJcbiAgICBpZiAoIXRhYi5kaXNhYmxlZCAmJiAoZXZlbnQudHlwZSA9PT0gJ2NsaWNrJyB8fCAoZXZlbnQudHlwZSA9PT0gJ2tleXByZXNzJyAmJiAoPEtleWJvYXJkRXZlbnQ+ZXZlbnQpLmtleSA9PT0gJ0VudGVyJykpKSB7XHJcbiAgICAgIHRoaXMudGFicy5zZWxlY3RlZCA9IHRhYjtcclxuICAgIH1cclxuICB9XHJcbn1cclxuIl19