import { Component, ContentChildren, QueryList, ViewChildren } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { TabComponent } from './tab.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
import * as i3 from "rpx-xui-translation";
const _c0 = ["tab"];
const _c1 = ["*"];
const _c2 = () => ["."];
const _c3 = a0 => ({ "tabs-toggle-selected": a0 });
function TabsComponent_li_2_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "li", 5)(1, "a", 6, 0);
    i0.ɵɵlistener("click", function TabsComponent_li_2_Template_a_click_1_listener() { const panel_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.show(panel_r2.id)); });
    i0.ɵɵtext(3);
    i0.ɵɵpipe(4, "rpxTranslate");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const panel_r2 = ctx.$implicit;
    i0.ɵɵadvance();
    i0.ɵɵproperty("routerLink", i0.ɵɵpureFunction0(8, _c2))("fragment", panel_r2.id)("ngClass", i0.ɵɵpureFunction1(9, _c3, panel_r2.selected));
    i0.ɵɵattribute("aria-controls", panel_r2.id)("aria-selected", panel_r2.selected);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(4, 6, panel_r2.title));
} }
export class TabsComponent {
    route;
    tabs;
    panels;
    panelIds = [];
    constructor(route) {
        this.route = route;
    }
    ngAfterContentInit() {
        this.panels.forEach((panel) => this.panelIds.push(panel.id));
        this.show(this.route.snapshot.fragment);
    }
    show(id) {
        const panels = this.panels.toArray();
        id = id || panels[0].id;
        /* istanbul ignore else */
        if (0 > this.panelIds.indexOf(id)) {
            id = panels[0].id;
        }
        panels.forEach((panel) => panel.selected = id === panel.id);
    }
    static ɵfac = function TabsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TabsComponent)(i0.ɵɵdirectiveInject(i1.ActivatedRoute)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TabsComponent, selectors: [["cut-tabs"]], contentQueries: function TabsComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
            i0.ɵɵcontentQuery(dirIndex, TabComponent, 4);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.panels = _t);
        } }, viewQuery: function TabsComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tabs = _t);
        } }, ngContentSelectors: _c1, decls: 5, vars: 1, consts: [["tab", ""], [1, "tabs"], ["role", "list", 1, "tabs-list"], ["class", "tabs-list-item", 4, "ngFor", "ngForOf"], [1, "tabs-content"], [1, "tabs-list-item"], ["role", "tab", "tabindex", "0", 1, "tabs-toggle", 3, "click", "routerLink", "fragment", "ngClass"]], template: function TabsComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵprojectionDef();
            i0.ɵɵelementStart(0, "div", 1)(1, "ul", 2);
            i0.ɵɵtemplate(2, TabsComponent_li_2_Template, 5, 11, "li", 3);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(3, "div", 4);
            i0.ɵɵprojection(4);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(2);
            i0.ɵɵproperty("ngForOf", ctx.panels);
        } }, dependencies: [i2.NgClass, i2.NgForOf, i1.RouterLink, i3.RpxTranslatePipe], styles: [".tabs-toggle[_ngcontent-%COMP%]{display:block;padding:10px 15px 3px;margin-bottom:8px}.tabs-toggle[aria-selected=true][_ngcontent-%COMP%]{color:#0b0c0c;text-decoration:none;border-bottom:none}.tabs-toggle[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]{color:#005ea5}@media (max-width: 640px){.tabs-list[_ngcontent-%COMP%]{border-bottom:1px solid #bfc1c3;margin-left:-15px;margin-right:-15px}.tabs-toggle[_ngcontent-%COMP%]{border-top:1px solid #bfc1c3}.tabs-toggle[_ngcontent-%COMP%]:focus{color:#0b0c0c;outline:none}}@media (min-width: 641px){.tabs-panel[_ngcontent-%COMP%]{border-top:1px solid #bfc1c3;clear:both;overflow:hidden}.tabs-list[_ngcontent-%COMP%]{float:left}.tabs-list-item[_ngcontent-%COMP%]{float:left;position:relative;bottom:-1px;padding-top:10px}.tabs-toggle[_ngcontent-%COMP%]{background-color:#dee0e2;border:1px solid transparent;float:left;margin:0 6px 0 0;text-decoration:none}.tabs-toggle[_ngcontent-%COMP%]:visited{color:#005ea5}.tabs-toggle-selected[_ngcontent-%COMP%], .tabs-toggle[aria-selected=true][_ngcontent-%COMP%]{background-color:#fff;border-bottom:0px;border-color:#bfc1c3;padding-bottom:11px;margin-bottom:0;color:#0b0c0c}}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabsComponent, [{
        type: Component,
        args: [{ selector: 'cut-tabs', template: "<div class=\"tabs\">\n\n  <ul class=\"tabs-list\" role=\"list\">\n    <li class=\"tabs-list-item\" *ngFor=\"let panel of panels\">\n      <a\n        class=\"tabs-toggle\"\n        [routerLink]=\"['.']\"\n        [fragment]=\"panel.id\"\n        role=\"tab\"\n        (click)=\"show(panel.id)\"\n        [attr.aria-controls]=\"panel.id\"\n        [attr.aria-selected]=\"panel.selected\"\n        tabindex=\"0\"\n        [ngClass]=\"{\n          'tabs-toggle-selected': panel.selected\n        }\"\n        #tab\n      >{{panel.title | rpxTranslate}}</a>\n    </li>\n  </ul>\n\n  <div class=\"tabs-content\">\n    <ng-content></ng-content>\n  </div>\n\n</div>\n", styles: [".tabs-toggle{display:block;padding:10px 15px 3px;margin-bottom:8px}.tabs-toggle[aria-selected=true]{color:#0b0c0c;text-decoration:none;border-bottom:none}.tabs-toggle a{color:#005ea5}@media (max-width: 640px){.tabs-list{border-bottom:1px solid #bfc1c3;margin-left:-15px;margin-right:-15px}.tabs-toggle{border-top:1px solid #bfc1c3}.tabs-toggle:focus{color:#0b0c0c;outline:none}}@media (min-width: 641px){.tabs-panel{border-top:1px solid #bfc1c3;clear:both;overflow:hidden}.tabs-list{float:left}.tabs-list-item{float:left;position:relative;bottom:-1px;padding-top:10px}.tabs-toggle{background-color:#dee0e2;border:1px solid transparent;float:left;margin:0 6px 0 0;text-decoration:none}.tabs-toggle:visited{color:#005ea5}.tabs-toggle-selected,.tabs-toggle[aria-selected=true]{background-color:#fff;border-bottom:0px;border-color:#bfc1c3;padding-bottom:11px;margin-bottom:0;color:#0b0c0c}}\n"] }]
    }], () => [{ type: i1.ActivatedRoute }], { tabs: [{
            type: ViewChildren,
            args: ['tab']
        }], panels: [{
            type: ContentChildren,
            args: [TabComponent]
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabsComponent, { className: "TabsComponent", filePath: "lib/components/tabs/tabs.component.ts", lineNumber: 12 }); })();
//# sourceMappingURL=data:application/json;base64, 