import { NgTemplateOutlet, NgClass } from '@angular/common';
import * as i0 from '@angular/core';
import { viewChild, contentChildren, computed, input, model, Component } from '@angular/core';
import { toObservable } from '@angular/core/rxjs-interop';
import { TooltipDirective } from '@seniorsistemas/angular-components/tooltip';
import { Subject, takeUntil } from 'rxjs';
import { TemplateDirective } from '@seniorsistemas/angular-components/template';
import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';

/**
 * @description Componente de item de aba, utilizado como filho direto de `TabsComponent`.
 * Define o rótulo, ícone e conteúdo de cada aba individualmente.
 * Suporta templates customizados para cabeçalho e corpo via `TemplateDirective`.
 *
 * @example
 * ```html
 * <s-tab-item header="Detalhes" value="details" [disabled]="false">
 *   Conteúdo da aba
 * </s-tab-item>
 * ```
 *
 * @category Navegação
 */
class TabItemComponent {
    _template = viewChild('template');
    headerTemplateDirectives = contentChildren(TemplateDirective);
    templateContent = computed(() => {
        return this.headerTemplateDirectives()?.find((x) => x.type === 'body')?.template;
    });
    /** @description Classe de ícone exibida ao lado do rótulo da aba (ex: classe de Font Awesome. */
    icon = input();
    /** @description Texto do rótulo exibido na aba. */
    header = input();
    /**
     * @description Quando `true`, a aba fica desabilitada e não pode ser selecionada pelo usuário.
     *
     * @default false
     */
    disabled = input(false);
    /**
     * @description Valor identificador único da aba, utilizado pelo `TabsComponent` para controlar a aba ativa.
     * Quando não informado, é atribuído automaticamente o índice da aba (baseado em zero).
     */
    value = model();
    /**
     * @description Quando `true`, destrói o conteúdo da aba ao escondê-la, liberando recursos.
     * Exige que o conteúdo seja envolvido em um template com `sTemplate="body"`.
     *
     * @default false
     */
    destroyOnHide = input(false);
    template = computed(() => {
        const _template = this._template();
        const templateContent = this.templateContent();
        return templateContent ? templateContent : _template;
    });
    headerElement = computed(() => {
        return this.headerTemplateDirectives()?.find((x) => x.type === 'header')?.template;
    });
    ngAfterViewInit() {
        if (this.destroyOnHide() && !this.templateContent()) {
            console.error("When destroyOnHide is true sTemplate='body' is required");
        }
        return;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.14", type: TabItemComponent, isStandalone: true, selector: "s-tab-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, destroyOnHide: { classPropertyName: "destroyOnHide", publicName: "destroyOnHide", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, queries: [{ propertyName: "headerTemplateDirectives", predicate: TemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "_template", first: true, predicate: ["template"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #template>\n    <ng-content></ng-content>\n</ng-template>\n" });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-tab-item', standalone: true, template: "<ng-template #template>\n    <ng-content></ng-content>\n</ng-template>\n" }]
        }] });

/**
 * @description Componente de abas (tabs) que organiza o conteúdo em painéis acessíveis por rótulos clicáveis.
 * Suporta layout horizontal e vertical, two-way binding da aba ativa e renderização condicional
 * do conteúdo de cada aba via `TabItemComponent`.
 *
 * @example
 * ```html
 * <s-tabs [(activeTab)]="activeTab" layoutType="horizontal">
 *   <s-tab-item header="Aba 1" value="tab1">Conteúdo 1</s-tab-item>
 *   <s-tab-item header="Aba 2" value="tab2">Conteúdo 2</s-tab-item>
 * </s-tabs>
 * ```
 *
 * @category Navegação
 */
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());
    });
    /**
     * @description Valor da aba atualmente ativa. Suporta two-way binding via `[(activeTab)]`.
     * Por padrão, ativa a primeira aba (índice `0`).
     *
     * @default 0
     */
    activeTab = model(0);
    /**
     * @description Orientação visual das abas.
     * - `'horizontal'`: abas exibidas em linha, acima do conteúdo (padrão).
     * - `'vertical'`: abas exibidas em coluna, à esquerda do conteúdo.
     *
     * @default 'horizontal'
     */
    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: () => [] });

/**
 * Generated bundle index. Do not edit.
 */

export { TabItemComponent, TabsComponent };
//# sourceMappingURL=seniorsistemas-angular-components-tabs.mjs.map
