import { trigger, transition, style, animate } from '@angular/animations';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ContentChildren, NgModule } from '@angular/core';
import { EnumSeverity, BorderButtonComponent } from '@seniorsistemas/angular-components/shared';
import { TemplateDirective, TemplateModule } from '@seniorsistemas/angular-components/template';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import * as i1 from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core';

/**
 * @description Componente de painel com cabeçalho, corpo e rodapé customizáveis
 * via `TemplateDirective`. Suporta colapsar/expandir com animação, nível de
 * severidade para estilo visual e botão de borda configurável.
 *
 * @example
 * ```html
 * <s-panel header="Título" [toggleable]="true" severity="info">
 *   <p>Conteúdo</p>
 * </s-panel>
 * ```
 *
 * @category Data
 */
class PanelComponent {
    static _idCounter = 0;
    /** @description ID único gerado automaticamente para associar o botão toggle ao corpo do painel via aria-controls. */
    panelBodyId = `panel-body-${++PanelComponent._idCounter}`;
    /** @description Nível do heading do cabeçalho para acessibilidade (aria-level). @default 3 */
    ariaHeaderLevel = 3;
    /** @description Título exibido no cabeçalho do painel. */
    header;
    /** @description Descrição exibida no cabeçalho do painel. */
    description;
    /** @description Habilita o botão de toggle para colapsar/expandir o painel. @default false */
    toggleable = false;
    /** @description Define o estado inicial do painel como colapsado. @default false */
    collapsed = false;
    /** @description Nível de severidade que altera o estilo visual do painel. @default 'default' */
    severity = 'default';
    /** @description Opções de configuração do botão de borda lateral do painel. */
    borderButtonOptions;
    /** @description Classes CSS adicionais aplicadas ao elemento raíz do painel. @default '' */
    class = '';
    /** @description Emitido quando o estado de colapso muda, com o novo valor booleano. */
    collapsedChange = new EventEmitter();
    templates = null;
    headerTemplate = null;
    bodyTemplate = null;
    footerTemplate = null;
    EnumSeverity = EnumSeverity;
    ngAfterContentInit() {
        this._getTemplates();
    }
    toggleCollapsed() {
        this.collapsed = !this.collapsed;
        this.collapsedChange.emit(this.collapsed);
    }
    _getCustomTemplate(type) {
        return this.templates?.find((template) => template.type === type)?.template;
    }
    _getHeaderTemplate() {
        return this._getCustomTemplate('header') ?? null;
    }
    _getBodyTemplate() {
        return this._getCustomTemplate('body') ?? null;
    }
    _getFooterTemplate() {
        return this._getCustomTemplate('footer') ?? null;
    }
    _getTemplates() {
        this.headerTemplate = this._getHeaderTemplate();
        this.bodyTemplate = this._getBodyTemplate();
        this.footerTemplate = this._getFooterTemplate();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PanelComponent, isStandalone: true, selector: "s-panel", inputs: { ariaHeaderLevel: "ariaHeaderLevel", header: "header", description: "description", toggleable: "toggleable", collapsed: "collapsed", severity: "severity", borderButtonOptions: "borderButtonOptions", class: "class" }, outputs: { collapsedChange: "collapsedChange" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div\n    class=\"relative border border-[#dedce5] bg-grayscale-0 p-5 transition-colors duration-500 ease-in-out\"\n    [class]=\"class\"\n    [ngClass]=\"{\n        'border-criticality-green': severity === EnumSeverity.Success,\n        'border-criticality-blue': severity === EnumSeverity.Info,\n        'border-criticality-orange': severity === EnumSeverity.Warn,\n        'border-criticality-red': severity === EnumSeverity.Error,\n    }\"\n>\n    @if (borderButtonOptions && borderButtonOptions.visible?.(severity)) {\n        <s-border-button\n            [severity]=\"severity\"\n            [options]=\"borderButtonOptions\"\n            class=\"absolute -top-3 right-[15px] z-10\"\n            [@BorderButtonAnimation]\n        >\n        </s-border-button>\n    }\n\n    @if (header || headerTemplate) {\n        <div\n            class=\"flex justify-between\"\n            [ngClass]=\"{ 'mb-3 border-b border-b-[#dedce5] pb-3': !collapsed }\"\n        >\n            <div class=\"grow\">\n                @if (headerTemplate) {\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                } @else {\n                    <div class=\"flex flex-col gap-3\">\n                        <span\n                            class=\"uppercase\"\n                            role=\"heading\"\n                            [attr.aria-level]=\"ariaHeaderLevel\"\n                            >{{ header }}</span\n                        >\n                        @if (description) {\n                            <span class=\"text-sm text-grayscale-60\">{{ description }}</span>\n                        }\n                    </div>\n                }\n            </div>\n\n            @if (toggleable) {\n                <button\n                    type=\"button\"\n                    class=\"fas h-6 w-6 cursor-pointer border-none bg-transparent text-[#212533]\"\n                    [ngClass]=\"{\n                        'fa-plus': collapsed,\n                        'fa-minus': !collapsed,\n                    }\"\n                    [attr.aria-expanded]=\"!collapsed\"\n                    [attr.aria-controls]=\"collapsed ? null : panelBodyId\"\n                    [attr.aria-label]=\"'platform.angular_components.panel_toggle' | translate: { header: header || '' }\"\n                    (click)=\"toggleCollapsed()\"\n                ></button>\n            }\n        </div>\n    }\n\n    @if (!toggleable || !collapsed) {\n        <div [id]=\"panelBodyId\">\n            <div>\n                <ng-content></ng-content>\n                <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n            </div>\n\n            @if (footerTemplate) {\n                <div class=\"border-t border-t-[#dedce5] pt-3\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: BorderButtonComponent, selector: "s-border-button", inputs: ["severity", "options"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }], animations: [
            trigger('BorderButtonAnimation', [
                transition(':enter', [
                    style({ transform: 'scaleY(0)', opacity: 0 }),
                    animate('300ms ease', style({ transform: 'scaleY(1)', opacity: 1 })),
                ]),
                transition(':leave', [
                    style({ transform: 'scaleY(1)', opacity: 1 }),
                    animate('300ms ease', style({ transform: 'scaleY(0)', opacity: 0 })),
                ]),
            ]),
        ] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-panel', animations: [
                        trigger('BorderButtonAnimation', [
                            transition(':enter', [
                                style({ transform: 'scaleY(0)', opacity: 0 }),
                                animate('300ms ease', style({ transform: 'scaleY(1)', opacity: 1 })),
                            ]),
                            transition(':leave', [
                                style({ transform: 'scaleY(1)', opacity: 1 }),
                                animate('300ms ease', style({ transform: 'scaleY(0)', opacity: 0 })),
                            ]),
                        ]),
                    ], standalone: true, imports: [NgClass, BorderButtonComponent, NgTemplateOutlet, TranslateModule], template: "<div\n    class=\"relative border border-[#dedce5] bg-grayscale-0 p-5 transition-colors duration-500 ease-in-out\"\n    [class]=\"class\"\n    [ngClass]=\"{\n        'border-criticality-green': severity === EnumSeverity.Success,\n        'border-criticality-blue': severity === EnumSeverity.Info,\n        'border-criticality-orange': severity === EnumSeverity.Warn,\n        'border-criticality-red': severity === EnumSeverity.Error,\n    }\"\n>\n    @if (borderButtonOptions && borderButtonOptions.visible?.(severity)) {\n        <s-border-button\n            [severity]=\"severity\"\n            [options]=\"borderButtonOptions\"\n            class=\"absolute -top-3 right-[15px] z-10\"\n            [@BorderButtonAnimation]\n        >\n        </s-border-button>\n    }\n\n    @if (header || headerTemplate) {\n        <div\n            class=\"flex justify-between\"\n            [ngClass]=\"{ 'mb-3 border-b border-b-[#dedce5] pb-3': !collapsed }\"\n        >\n            <div class=\"grow\">\n                @if (headerTemplate) {\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                } @else {\n                    <div class=\"flex flex-col gap-3\">\n                        <span\n                            class=\"uppercase\"\n                            role=\"heading\"\n                            [attr.aria-level]=\"ariaHeaderLevel\"\n                            >{{ header }}</span\n                        >\n                        @if (description) {\n                            <span class=\"text-sm text-grayscale-60\">{{ description }}</span>\n                        }\n                    </div>\n                }\n            </div>\n\n            @if (toggleable) {\n                <button\n                    type=\"button\"\n                    class=\"fas h-6 w-6 cursor-pointer border-none bg-transparent text-[#212533]\"\n                    [ngClass]=\"{\n                        'fa-plus': collapsed,\n                        'fa-minus': !collapsed,\n                    }\"\n                    [attr.aria-expanded]=\"!collapsed\"\n                    [attr.aria-controls]=\"collapsed ? null : panelBodyId\"\n                    [attr.aria-label]=\"'platform.angular_components.panel_toggle' | translate: { header: header || '' }\"\n                    (click)=\"toggleCollapsed()\"\n                ></button>\n            }\n        </div>\n    }\n\n    @if (!toggleable || !collapsed) {\n        <div [id]=\"panelBodyId\">\n            <div>\n                <ng-content></ng-content>\n                <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n            </div>\n\n            @if (footerTemplate) {\n                <div class=\"border-t border-t-[#dedce5] pt-3\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                </div>\n            }\n        </div>\n    }\n</div>\n\n" }]
        }], propDecorators: { ariaHeaderLevel: [{
                type: Input
            }], header: [{
                type: Input
            }], description: [{
                type: Input
            }], toggleable: [{
                type: Input
            }], collapsed: [{
                type: Input
            }], severity: [{
                type: Input
            }], borderButtonOptions: [{
                type: Input
            }], class: [{
                type: Input
            }], collapsedChange: [{
                type: Output
            }], templates: [{
                type: ContentChildren,
                args: [TemplateDirective]
            }] } });

class PanelModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PanelModule, imports: [PanelComponent], exports: [PanelComponent, TemplateModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelModule, imports: [PanelComponent, TemplateModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [PanelComponent],
                    exports: [PanelComponent, TemplateModule],
                }]
        }] });

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

export { PanelComponent, PanelModule };
//# sourceMappingURL=seniorsistemas-angular-components-panel.mjs.map
