import { NgClass, NgTemplateOutlet } from '@angular/common';
import { Component, computed, contentChildren, input, model } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { TooltipDirective } from '@seniorsistemas/angular-components/tooltip';
import { Subject, takeUntil } from 'rxjs';
import { TabItemComponent } from '../tab-item/tab-item.component';
import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';
import * as i0 from "@angular/core";
export class TabsComponent {
    onDestroy$ = new Subject();
    tabItems = contentChildren(TabItemComponent);
    activeTabComponent = computed(() => {
        return this.tabItems().find((tab) => tab.value() === this.activeTab() && tab.destroyOnHide())?.template();
    });
    keepAliveTabsContent = computed(() => {
        return this.tabItems().filter((tab) => !tab.destroyOnHide());
    });
    activeTab = model(0);
    layoutType = input('horizontal');
    constructor() {
        toObservable(this.tabItems).pipe(takeUntil(this.onDestroy$)).subscribe(() => {
            const tabs = this.tabItems();
            tabs.forEach((tab, $index) => {
                const tabHasValue = !!tab.value();
                if (!tabHasValue) {
                    tab.value.set($index);
                }
            });
        });
    }
    ngOnDestroy() {
        this.onDestroy$.next();
    }
    onActiveTab(tab) {
        if (tab.disabled()) {
            return;
        }
        const _previousTab = this.tabItems().find((tab) => tab.value() === this.activeTab());
        if (_previousTab && !_previousTab.templateContent() && _previousTab.destroyOnHide()) {
            _previousTab.template();
        }
        this.activeTab.set(tab.value());
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TabsComponent, isStandalone: true, selector: "s-tabs", inputs: { activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, layoutType: { classPropertyName: "layoutType", publicName: "layoutType", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange" }, queries: [{ propertyName: "tabItems", predicate: TabItemComponent, isSignal: true }], ngImport: i0, template: "@let layout = layoutType();\n@let isHorizontal = layout === 'horizontal';\n@let isVertical = layout === 'vertical';\n<ng-template #buttonsRender>\n    @for (tab of tabItems(); track $index) {\n        @let isActiveTab = tab.value() === activeTab();\n        @let disabledTab = tab.disabled();\n        <button\n            #tabButton\n            (sInteractiveContent)=\"onActiveTab(tab)\"\n            class=\"flex min-h-11 min-w-24 justify-start overflow-hidden text-ellipsis whitespace-nowrap border-primary p-2 hover:transition-all disabled:border-grayscale-30 disabled:text-grayscale-30\"\n            [class.active-tab]=\"isActiveTab\"\n            [disabled]=\"disabledTab\"\n            [ngClass]=\"{\n                'font-bold': isActiveTab,\n                'text-primary': !isActiveTab,\n                'border-b-4': isActiveTab && isHorizontal,\n                'border-r-4': isActiveTab && isVertical,\n                'hover:border-b-4': isHorizontal && !disabledTab,\n                'hover:border-r-4': isVertical && !disabledTab,\n                'flex items-center gap-2': tab.icon(),\n            }\"\n        >\n            @let headerElement = tab.headerElement();\n            @if (headerElement) {\n                <ng-container *ngTemplateOutlet=\"headerElement\"></ng-container>\n            } @else {\n                @if (tab.icon()) {\n                    <i\n                        class=\"text-grayscale-100\"\n                        [class]=\"tab.icon()\"\n                    ></i>\n                }\n                <span\n                    class=\"block overflow-hidden text-ellipsis whitespace-nowrap text-left\"\n                    [class.max-w-28]=\"isHorizontal\"\n                    [sTooltip]=\"tab.header()\"\n                    [visible]=\"!disabledTab\"\n                    [checkTruncatedText]=\"true\"\n                >\n                    {{ tab.header() }}\n                </span>\n            }\n        </button>\n    }\n</ng-template>\n\n<ng-template #renderComponent>\n    @let template = activeTabComponent();\n    @if (template) {\n        <section class=\"h-full min-h-10 bg-grayscale-0 p-2\">\n            <ng-container *ngTemplateOutlet=\"template\" />\n        </section>\n    }\n    @for (keepAliveTab of keepAliveTabsContent(); track $index) {\n        @let isActiveTab = keepAliveTab.value() === activeTab();\n\n        <section\n            class=\"h-full min-h-10 bg-grayscale-0 p-2\"\n            [class.hidden]=\"!isActiveTab\"\n            [class.block]=\"isActiveTab\"\n        >\n            @if (keepAliveTab.template()) {\n                <ng-container *ngTemplateOutlet=\"keepAliveTab.template()!\"></ng-container>\n            }\n        </section>\n    }\n</ng-template>\n\n@if (isHorizontal) {\n    <section class=\"p-2\">\n        <div class=\"flex grid-flow-col overflow-auto border-b-[1px] border-b-grayscale-20\">\n            <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n    </section>\n} @else if (isVertical) {\n    <section class=\"vertical-tab flex w-full flex-wrap gap-2\">\n        <aside class=\"vertical-tab-buttons flex max-h-96 flex-col overflow-auto\">\n            <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n        </aside>\n        <aside class=\"vertical-tab-content flex-1\">\n            <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n        </aside>\n    </section>\n}\n", styles: [".vertical-tab{container:vertical-tab/inline-size}.vertical-tab-buttons{width:14rem}.vertical-tab-content{min-width:20rem}@container vertical-tab (max-width: 552px){.vertical-tab-buttons{width:100%;flex-direction:row}.vertical-tab-buttons .active-tab,.vertical-tab-buttons button:hover{border-right:none;border-bottom-width:4px}}\n"], dependencies: [{ kind: "directive", type: InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-tabs', standalone: true, imports: [InteractiveContentDirective, NgTemplateOutlet, NgClass, TooltipDirective], template: "@let layout = layoutType();\n@let isHorizontal = layout === 'horizontal';\n@let isVertical = layout === 'vertical';\n<ng-template #buttonsRender>\n    @for (tab of tabItems(); track $index) {\n        @let isActiveTab = tab.value() === activeTab();\n        @let disabledTab = tab.disabled();\n        <button\n            #tabButton\n            (sInteractiveContent)=\"onActiveTab(tab)\"\n            class=\"flex min-h-11 min-w-24 justify-start overflow-hidden text-ellipsis whitespace-nowrap border-primary p-2 hover:transition-all disabled:border-grayscale-30 disabled:text-grayscale-30\"\n            [class.active-tab]=\"isActiveTab\"\n            [disabled]=\"disabledTab\"\n            [ngClass]=\"{\n                'font-bold': isActiveTab,\n                'text-primary': !isActiveTab,\n                'border-b-4': isActiveTab && isHorizontal,\n                'border-r-4': isActiveTab && isVertical,\n                'hover:border-b-4': isHorizontal && !disabledTab,\n                'hover:border-r-4': isVertical && !disabledTab,\n                'flex items-center gap-2': tab.icon(),\n            }\"\n        >\n            @let headerElement = tab.headerElement();\n            @if (headerElement) {\n                <ng-container *ngTemplateOutlet=\"headerElement\"></ng-container>\n            } @else {\n                @if (tab.icon()) {\n                    <i\n                        class=\"text-grayscale-100\"\n                        [class]=\"tab.icon()\"\n                    ></i>\n                }\n                <span\n                    class=\"block overflow-hidden text-ellipsis whitespace-nowrap text-left\"\n                    [class.max-w-28]=\"isHorizontal\"\n                    [sTooltip]=\"tab.header()\"\n                    [visible]=\"!disabledTab\"\n                    [checkTruncatedText]=\"true\"\n                >\n                    {{ tab.header() }}\n                </span>\n            }\n        </button>\n    }\n</ng-template>\n\n<ng-template #renderComponent>\n    @let template = activeTabComponent();\n    @if (template) {\n        <section class=\"h-full min-h-10 bg-grayscale-0 p-2\">\n            <ng-container *ngTemplateOutlet=\"template\" />\n        </section>\n    }\n    @for (keepAliveTab of keepAliveTabsContent(); track $index) {\n        @let isActiveTab = keepAliveTab.value() === activeTab();\n\n        <section\n            class=\"h-full min-h-10 bg-grayscale-0 p-2\"\n            [class.hidden]=\"!isActiveTab\"\n            [class.block]=\"isActiveTab\"\n        >\n            @if (keepAliveTab.template()) {\n                <ng-container *ngTemplateOutlet=\"keepAliveTab.template()!\"></ng-container>\n            }\n        </section>\n    }\n</ng-template>\n\n@if (isHorizontal) {\n    <section class=\"p-2\">\n        <div class=\"flex grid-flow-col overflow-auto border-b-[1px] border-b-grayscale-20\">\n            <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n        </div>\n        <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n    </section>\n} @else if (isVertical) {\n    <section class=\"vertical-tab flex w-full flex-wrap gap-2\">\n        <aside class=\"vertical-tab-buttons flex max-h-96 flex-col overflow-auto\">\n            <ng-container *ngTemplateOutlet=\"buttonsRender\"></ng-container>\n        </aside>\n        <aside class=\"vertical-tab-content flex-1\">\n            <ng-container *ngTemplateOutlet=\"renderComponent\"></ng-container>\n        </aside>\n    </section>\n}\n", styles: [".vertical-tab{container:vertical-tab/inline-size}.vertical-tab-buttons{width:14rem}.vertical-tab-content{min-width:20rem}@container vertical-tab (max-width: 552px){.vertical-tab-buttons{width:100%;flex-direction:row}.vertical-tab-buttons .active-tab,.vertical-tab-buttons button:hover{border-right:none;border-bottom-width:4px}}\n"] }]
        }], ctorParameters: () => [] });
//# sourceMappingURL=data:application/json;base64, 