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 } 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=\"my-4 flex flex-row py-2 text-on-surface dark:text-on-surface-variant-dark\"\n  [ngClass]=\"{\n    '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], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"my-4 flex flex-row py-2 text-on-surface dark:text-on-surface-variant-dark\"\n  [ngClass]=\"{\n    '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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy90YWItZ3JvdXAvdGFiLWdyb3VwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL21vbGVjdWxlcy90YWItZ3JvdXAvdGFiLWdyb3VwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULGVBQWUsRUFDZixVQUFVLEVBQ1YsTUFBTSxFQUNOLEtBQUssR0FJTixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw2Q0FBNkMsQ0FBQztBQUNqRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUNoRSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUM1RSxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0saUJBQWlCLENBQUM7O0FBUzFDLE1BQU0sT0FBTyxpQkFBaUI7SUFQOUI7UUFRVSxlQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBQy9CLFdBQU0sR0FBRyxJQUFJLENBQUM7UUFDZCxjQUFTLEdBQUcsRUFBRSxDQUFDO0tBbUN6QjtJQTlCQyxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsV0FBVyxDQUFDLENBQUMsYUFBYSxLQUFLLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztZQUMxRCxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNwQyxDQUFDO0lBQ0gsQ0FBQztJQUVELGtCQUFrQjtRQUNoQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUNsQyxJQUFJLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUM1QixNQUFNLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQ2xHLENBQUM7SUFDSixDQUFDO0lBRUQsWUFBWSxDQUFDLEdBQVc7UUFDdEIsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNoQyxJQUFJLENBQUMsTUFBTSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDMUIsSUFBSSxLQUFLLENBQUMsVUFBVSxLQUFLLEdBQUcsRUFBRSxDQUFDO29CQUM3QixLQUFLLENBQUMsSUFBSSxFQUFFLENBQUM7b0JBQ2IsSUFBSSxDQUFDLG1CQUFtQixDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUUsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO2dCQUNqRSxDQUFDO3FCQUFNLENBQUM7b0JBQ04sSUFBSSxDQUFDLG1CQUFtQixDQUFDLEtBQUssQ0FBQyxVQUFVLENBQUUsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxDQUFDO29CQUNoRSxLQUFLLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztnQkFDeEIsQ0FBQztZQUNILENBQUMsQ0FBQyxDQUFDO1FBQ0wsQ0FBQztJQUNILENBQUM7SUFFTyxtQkFBbUIsQ0FBQyxHQUFXO1FBQ3JDLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsR0FBRyxLQUFLLEdBQUcsQ0FBdUIsQ0FBQztJQUM3RSxDQUFDOzhHQXJDVSxpQkFBaUI7a0dBQWpCLGlCQUFpQixzSkFLWCxrQkFBa0IseUNBQ2xCLGlCQUFpQixrREM5QnBDLDhSQVFBLDRDRFlZLE9BQU87OzJGQUlOLGlCQUFpQjtrQkFQN0IsU0FBUzsrQkFDRSxjQUFjLGNBQ1osSUFBSSxXQUNQLENBQUMsT0FBTyxDQUFDLG1CQUVELHVCQUF1QixDQUFDLE1BQU07OEJBSXRDLE1BQU07c0JBQWQsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUUrQixPQUFPO3NCQUEzQyxlQUFlO3VCQUFDLGtCQUFrQjtnQkFDQyxNQUFNO3NCQUF6QyxlQUFlO3VCQUFDLGlCQUFpQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyQ29udGVudEluaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgRGVzdHJveVJlZixcbiAgaW5qZWN0LFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBRdWVyeUxpc3QsXG4gIFNpbXBsZUNoYW5nZXMsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGFiQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vYXRvbXMvdGFiLWJ1dHRvbi90YWItYnV0dG9uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyB0YWtlVW50aWxEZXN0cm95ZWQgfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQgeyBUYWJQYW5lbERpcmVjdGl2ZSB9IGZyb20gJy4uLy4uLy4uL2RpcmVjdGl2ZXMvdGFiLXBhbmVsLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBOZ0NsYXNzIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnY3QtdGFiLWdyb3VwJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW05nQ2xhc3NdLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFiLWdyb3VwLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFRhYkdyb3VwQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCwgT25DaGFuZ2VzIHtcbiAgcHJpdmF0ZSBkZXN0cm95UmVmID0gaW5qZWN0KERlc3Ryb3lSZWYpO1xuICBASW5wdXQoKSBib3JkZXIgPSB0cnVlO1xuICBASW5wdXQoKSBhY3RpdmVUYWIgPSAnJztcblxuICBAQ29udGVudENoaWxkcmVuKFRhYkJ1dHRvbkNvbXBvbmVudCkgYnV0dG9ucyE6IFF1ZXJ5TGlzdDxUYWJCdXR0b25Db21wb25lbnQ+O1xuICBAQ29udGVudENoaWxkcmVuKFRhYlBhbmVsRGlyZWN0aXZlKSBwYW5lbHMhOiBRdWVyeUxpc3Q8VGFiUGFuZWxEaXJlY3RpdmU+O1xuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcbiAgICBpZiAoY2hhbmdlc1snYWN0aXZlVGFiJ10ucHJldmlvdXNWYWx1ZSAhPT0gdGhpcy5hY3RpdmVUYWIpIHtcbiAgICAgIHRoaXMuc2V0QWN0aXZlVGFiKHRoaXMuYWN0aXZlVGFiKTtcbiAgICB9XG4gIH1cblxuICBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgdGhpcy5zZXRBY3RpdmVUYWIodGhpcy5hY3RpdmVUYWIpO1xuICAgIHRoaXMuYnV0dG9ucy5mb3JFYWNoKGJ1dHRvbiA9PlxuICAgICAgYnV0dG9uLmNsaWNrZWQucGlwZSh0YWtlVW50aWxEZXN0cm95ZWQodGhpcy5kZXN0cm95UmVmKSkuc3Vic2NyaWJlKGtleSA9PiB0aGlzLnNldEFjdGl2ZVRhYihrZXkpKVxuICAgICk7XG4gIH1cblxuICBzZXRBY3RpdmVUYWIoa2V5OiBzdHJpbmcpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5wYW5lbHMgJiYgdGhpcy5idXR0b25zKSB7XG4gICAgICB0aGlzLnBhbmVscy5mb3JFYWNoKHBhbmVsID0+IHtcbiAgICAgICAgaWYgKHBhbmVsLmN0VGFiUGFuZWwgPT09IGtleSkge1xuICAgICAgICAgIHBhbmVsLnNob3coKTtcbiAgICAgICAgICB0aGlzLmdldFRhYkJ1dHRvblRyaWdnZXIocGFuZWwuY3RUYWJQYW5lbCkhLmlzQWN0aXZlLnNldCh0cnVlKTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0aGlzLmdldFRhYkJ1dHRvblRyaWdnZXIocGFuZWwuY3RUYWJQYW5lbCkhLmlzQWN0aXZlLnNldChmYWxzZSk7XG4gICAgICAgICAgcGFuZWwuaGlkZS5uZXh0KHRydWUpO1xuICAgICAgICB9XG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGdldFRhYkJ1dHRvblRyaWdnZXIoa2V5OiBzdHJpbmcpOiBUYWJCdXR0b25Db21wb25lbnQge1xuICAgIHJldHVybiB0aGlzLmJ1dHRvbnMuZmluZChwYW5lbCA9PiBwYW5lbC5rZXkgPT09IGtleSkgYXMgVGFiQnV0dG9uQ29tcG9uZW50O1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwibXktNCBmbGV4IGZsZXgtcm93IHB5LTIgdGV4dC1vbi1zdXJmYWNlIGRhcms6dGV4dC1vbi1zdXJmYWNlLXZhcmlhbnQtZGFya1wiXG4gIFtuZ0NsYXNzXT1cIntcbiAgICAnZ2FwLTIgYm9yZGVyLXkgYm9yZGVyLXN1cmZhY2UtdmFyaWFudCBkYXJrOmJvcmRlci1zdXJmYWNlLXZhcmlhbnQtZGFyayc6IGJvcmRlclxuICB9XCI+XG4gIDxuZy1jb250ZW50IHNlbGVjdD1cIltoZWFkZXJdXCIgLz5cbjwvZGl2PlxuPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2JvZHldXCIgLz5cbiJdfQ==