import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/button-toggle";
import * as i3 from "@angular/material/badge";
export class MaterialVerticalTabsComponent {
    constructor() {
        this.tabClick = new EventEmitter();
    }
    ngOnInit() {
        // tabConfig$  [ {name: , id: , count: }]
        if (this.tabConfig$) {
            // seletedTabId is the first tab, unless another is selected
            this.selectedTabId$ = this.tabConfig$[0]?.id;
            // run through and see anything is selected
            for (let i = 0; i < this.tabConfig$.length; ++i) {
                const aTab = this.tabConfig$[i];
                if (aTab?.selected) {
                    this.selectedTabId$ = aTab.id;
                    break;
                }
            }
        }
    }
    onChange(tab) {
        this.tabClick.emit(tab);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialVerticalTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MaterialVerticalTabsComponent, isStandalone: true, selector: "app-material-vertical-tabs", inputs: { tabConfig$: "tabConfig$" }, outputs: { tabClick: "tabClick" }, ngImport: i0, template: "<div>\n  <mat-button-toggle-group vertical (change)=\"onChange($event.value)\" [value]=\"selectedTabId$\" aria-label=\"Tabs\">\n    <mat-button-toggle *ngFor=\"let tab of tabConfig$\" [value]=\"tab.id\" style=\"text-align: left\">\n      <div style=\"display: flex\">\n        <div style=\"flex-grow: 10\">{{ tab.name }}</div>\n        <div style=\"flex-grow: 1\">\n          <span *ngIf=\"tab?.count\" [matBadge]=\"tab.count\" matBadgeOverlap=\"false\" matBadgePosition=\"after\" class=\"psdk-vtab-badge\">&nbsp;</span>\n        </div>\n      </div>\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n", styles: ["mat-button-toggle-group{width:100%;border-width:.0625rem 0rem}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard{background-color:transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid var(--app-primary-color)}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-focus-indicator.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{text-align:left}.psdk-vtab-badge .mat-badge-content{top:0rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i3.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MaterialVerticalTabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-material-vertical-tabs', standalone: true, imports: [CommonModule, MatButtonToggleModule, MatBadgeModule], template: "<div>\n  <mat-button-toggle-group vertical (change)=\"onChange($event.value)\" [value]=\"selectedTabId$\" aria-label=\"Tabs\">\n    <mat-button-toggle *ngFor=\"let tab of tabConfig$\" [value]=\"tab.id\" style=\"text-align: left\">\n      <div style=\"display: flex\">\n        <div style=\"flex-grow: 10\">{{ tab.name }}</div>\n        <div style=\"flex-grow: 1\">\n          <span *ngIf=\"tab?.count\" [matBadge]=\"tab.count\" matBadgeOverlap=\"false\" matBadgePosition=\"after\" class=\"psdk-vtab-badge\">&nbsp;</span>\n        </div>\n      </div>\n    </mat-button-toggle>\n  </mat-button-toggle-group>\n</div>\n", styles: ["mat-button-toggle-group{width:100%;border-width:.0625rem 0rem}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard{background-color:transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-button-toggle-checked.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid var(--app-primary-color)}mat-button-toggle-group ::ng-deep .mat-button-toggle.mat-focus-indicator.mat-button-toggle-appearance-standard{background-color:transparent;border-right:.1875rem solid transparent}mat-button-toggle-group ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{text-align:left}.psdk-vtab-badge .mat-badge-content{top:0rem}\n"] }]
        }], propDecorators: { tabConfig$: [{
                type: Input
            }], tabClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 