circletone/esm2022/lib/components/molecules/tab-group/tab-group.component.mjs

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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy90YWItZ3JvdXAvdGFiLWdyb3VwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy90YWItZ3JvdXAvdGFiLWdyb3VwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULGVBQWUsRUFDZixVQUFVLEVBQ1YsTUFBTSxFQUNOLEtBQUssR0FJTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQztBQUNqRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUM1RSxPQUFPLEVBQUUsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBUzVELE1BQU0sT0FBTyxpQkFBaUI7SUFQOUI7UUFRVSxlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQy9CLFdBQU0sR0FBRyxJQUFJLENBQUM7UUFDZCxjQUFTLEdBQUcsRUFBRSxDQUFDO0tBbUN6QjtJQTlCQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUMsYUFBYSxLQUFLLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUMxRCxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNwQyxDQUFDO0lBQ0gsQ0FBQztJQUVELGtCQUFrQjtRQUNoQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNsQyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUM1QixNQUFNLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQ2xHLENBQUM7SUFDSixDQUFDO0lBRUQsWUFBWSxDQUFDLEdBQVc7UUFDdEIsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNoQyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDMUIsSUFBSSxLQUFLLENBQUMsVUFBVSxLQUFLLEdBQUcsRUFBRSxDQUFDO29CQUM3QixLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7b0JBQ2IsSUFBSSxDQUFDLG1CQUFtQixDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUUsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUNqRSxDQUFDO3FCQUFNLENBQUM7b0JBQ04sSUFBSSxDQUFDLG1CQUFtQixDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUUsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO29CQUNoRSxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDeEIsQ0FBQztZQUNILENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztJQUNILENBQUM7SUFFTyxtQkFBbUIsQ0FBQyxHQUFXO1FBQ3JDLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsR0FBRyxLQUFLLEdBQUcsQ0FBdUIsQ0FBQztJQUM3RSxDQUFDOzhHQXJDVSxpQkFBaUI7a0dBQWpCLGlCQUFpQixzSkFLWCxrQkFBa0IseUNBQ2xCLGlCQUFpQixrREM5QnBDLDhSQVFBLDRDRFlZLE9BQU87OzJGQUlOLGlCQUFpQjtrQkFQN0IsU0FBUzsrQkFDRSxjQUFjLGNBQ1osSUFBSSxXQUNQLENBQUMsT0FBTyxFQUFFLGdCQUFnQixDQUFDLG1CQUVuQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUl0QyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFFK0IsT0FBTztzQkFBM0MsZUFBZTt1QkFBQyxrQkFBa0I7Z0JBQ0MsTUFBTTtzQkFBekMsZUFBZTt1QkFBQyxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGRyZW4sXG4gIERlc3Ryb3lSZWYsXG4gIGluamVjdCxcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgUXVlcnlMaXN0LFxuICBTaW1wbGVDaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRhYkJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uLy4uL2F0b21zL3RhYi1idXR0b24vdGFiLWJ1dHRvbi5jb21wb25lbnQnO1xuaW1wb3J0IHsgdGFrZVVudGlsRGVzdHJveWVkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZS9yeGpzLWludGVyb3AnO1xuaW1wb3J0IHsgVGFiUGFuZWxEaXJlY3RpdmUgfSBmcm9tICcuLi8uLi8uLi9kaXJlY3RpdmVzL3RhYi1wYW5lbC5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgTmdDbGFzcywgTmdUZW1wbGF0ZU91dGxldCB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N0LXRhYi1ncm91cCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0NsYXNzLCBOZ1RlbXBsYXRlT3V0bGV0XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhYi1ncm91cC5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUYWJHcm91cENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQsIE9uQ2hhbmdlcyB7XG4gIHByaXZhdGUgZGVzdHJveVJlZiA9IGluamVjdChEZXN0cm95UmVmKTtcbiAgQElucHV0KCkgYm9yZGVyID0gdHJ1ZTtcbiAgQElucHV0KCkgYWN0aXZlVGFiID0gJyc7XG5cbiAgQENvbnRlbnRDaGlsZHJlbihUYWJCdXR0b25Db21wb25lbnQpIGJ1dHRvbnMhOiBRdWVyeUxpc3Q8VGFiQnV0dG9uQ29tcG9uZW50PjtcbiAgQENvbnRlbnRDaGlsZHJlbihUYWJQYW5lbERpcmVjdGl2ZSkgcGFuZWxzITogUXVlcnlMaXN0PFRhYlBhbmVsRGlyZWN0aXZlPjtcblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgaWYgKGNoYW5nZXNbJ2FjdGl2ZVRhYiddLnByZXZpb3VzVmFsdWUgIT09IHRoaXMuYWN0aXZlVGFiKSB7XG4gICAgICB0aGlzLnNldEFjdGl2ZVRhYih0aGlzLmFjdGl2ZVRhYik7XG4gICAgfVxuICB9XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2V0QWN0aXZlVGFiKHRoaXMuYWN0aXZlVGFiKTtcbiAgICB0aGlzLmJ1dHRvbnMuZm9yRWFjaChidXR0b24gPT5cbiAgICAgIGJ1dHRvbi5jbGlja2VkLnBpcGUodGFrZVVudGlsRGVzdHJveWVkKHRoaXMuZGVzdHJveVJlZikpLnN1YnNjcmliZShrZXkgPT4gdGhpcy5zZXRBY3RpdmVUYWIoa2V5KSlcbiAgICApO1xuICB9XG5cbiAgc2V0QWN0aXZlVGFiKGtleTogc3RyaW5nKTogdm9pZCB7XG4gICAgaWYgKHRoaXMucGFuZWxzICYmIHRoaXMuYnV0dG9ucykge1xuICAgICAgdGhpcy5wYW5lbHMuZm9yRWFjaChwYW5lbCA9PiB7XG4gICAgICAgIGlmIChwYW5lbC5jdFRhYlBhbmVsID09PSBrZXkpIHtcbiAgICAgICAgICBwYW5lbC5zaG93KCk7XG4gICAgICAgICAgdGhpcy5nZXRUYWJCdXR0b25UcmlnZ2VyKHBhbmVsLmN0VGFiUGFuZWwpIS5pc0FjdGl2ZS5zZXQodHJ1ZSk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgdGhpcy5nZXRUYWJCdXR0b25UcmlnZ2VyKHBhbmVsLmN0VGFiUGFuZWwpIS5pc0FjdGl2ZS5zZXQoZmFsc2UpO1xuICAgICAgICAgIHBhbmVsLmhpZGUubmV4dCh0cnVlKTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBnZXRUYWJCdXR0b25UcmlnZ2VyKGtleTogc3RyaW5nKTogVGFiQnV0dG9uQ29tcG9uZW50IHtcbiAgICByZXR1cm4gdGhpcy5idXR0b25zLmZpbmQocGFuZWwgPT4gcGFuZWwua2V5ID09PSBrZXkpIGFzIFRhYkJ1dHRvbkNvbXBvbmVudDtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cImZsZXggZmxleC1yb3cgcHktMiB0ZXh0LW9uLXN1cmZhY2UgZGFyazp0ZXh0LW9uLXN1cmZhY2UtdmFyaWFudC1kYXJrXCJcbiAgW25nQ2xhc3NdPVwie1xuICAgICdteS00IGdhcC0yIGJvcmRlci15IGJvcmRlci1zdXJmYWNlLXZhcmlhbnQgZGFyazpib3JkZXItc3VyZmFjZS12YXJpYW50LWRhcmsnOiBib3JkZXJcbiAgfVwiPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJbaGVhZGVyXVwiIC8+XG48L2Rpdj5cbjxuZy1jb250ZW50IHNlbGVjdD1cIltib2R5XVwiIC8+XG4iXX0=