import { ChangeDetectionStrategy, Component, ContentChildren, DestroyRef, inject, Input, } from '@angular/core';
import { TabButtonComponent } from '../../atoms/tab-button/tab-button.component';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { TabPanelDirective } from '../../../directives/tab-panel.directive';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import * as i0 from "@angular/core";
export class TabGroupComponent {
    constructor() {
        this.destroyRef = inject(DestroyRef);
        this.border = true;
        this.activeTab = '';
    }
    ngOnChanges(changes) {
        if (changes['activeTab'].previousValue !== this.activeTab) {
            this.setActiveTab(this.activeTab);
        }
    }
    ngAfterContentInit() {
        this.setActiveTab(this.activeTab);
        this.buttons.forEach(button => button.clicked.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(key => this.setActiveTab(key)));
    }
    setActiveTab(key) {
        if (this.panels && this.buttons) {
            this.panels.forEach(panel => {
                if (panel.ctTabPanel === key) {
                    panel.show();
                    this.getTabButtonTrigger(panel.ctTabPanel).isActive.set(true);
                }
                else {
                    this.getTabButtonTrigger(panel.ctTabPanel).isActive.set(false);
                    panel.hide.next(true);
                }
            });
        }
    }
    getTabButtonTrigger(key) {
        return this.buttons.find(panel => panel.key === key);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.5", type: TabGroupComponent, isStandalone: true, selector: "ct-tab-group", inputs: { border: "border", activeTab: "activeTab" }, queries: [{ propertyName: "buttons", predicate: TabButtonComponent }, { propertyName: "panels", predicate: TabPanelDirective }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"flex flex-row py-2 text-on-surface dark:text-on-surface-variant-dark\"\n  [ngClass]=\"{\n    'my-4 gap-2 border-y border-surface-variant dark:border-surface-variant-dark': border\n  }\">\n  <ng-content select=\"[header]\" />\n</div>\n<ng-content select=\"[body]\" />\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: TabGroupComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-tab-group', standalone: true, imports: [NgClass, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"flex flex-row py-2 text-on-surface dark:text-on-surface-variant-dark\"\n  [ngClass]=\"{\n    'my-4 gap-2 border-y border-surface-variant dark:border-surface-variant-dark': border\n  }\">\n  <ng-content select=\"[header]\" />\n</div>\n<ng-content select=\"[body]\" />\n" }]
        }], propDecorators: { border: [{
                type: Input
            }], activeTab: [{
                type: Input
            }], buttons: [{
                type: ContentChildren,
                args: [TabButtonComponent]
            }], panels: [{
                type: ContentChildren,
                args: [TabPanelDirective]
            }] } });
//# sourceMappingURL=data:application/json;base64,[encoded data, 5884 characters]