import { trigger, transition, style, animate, state } from '@angular/animations';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, ContentChildren, Output, NgModule } from '@angular/core';
import { TemplateDirective } from '@seniorsistemas/angular-components/template';
import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';
import { NgTemplateOutlet } from '@angular/common';

/**
 * @description Componente de fieldset com legenda, ícone configurável e suporte a
 * toggle (recolher/expandir) com animação. Suporta template personalizado para o
 * cabeçalho via diretiva `TemplateDirective` com tipo `'header'`.
 *
 * @example
 * ```html
 * <s-fieldset legend="Dados pessoais" [toggleable]="true">
 *   <p>Conteúdo do fieldset</p>
 * </s-fieldset>
 * ```
 *
 * @category Inputs
 */
class FieldsetComponent {
    /** @description Texto exibido como título do fieldset. @default '' */
    legend = '';
    /** @description Habilita o botão de toggle que permite recolher e expandir o conteúdo. @default false */
    toggleable = false;
    /** @description Classe de ícone exibida ao lado da legenda (ex.: `'fas fa-cog'`). @default '' */
    icon = '';
    /** @description Quando `true`, remove o conteúdo do DOM ao recolher o fieldset. @default true */
    destroyOnHide = true;
    templateDirectives;
    headerTemplate;
    /** @description Emitido imediatamente antes da animação de toggle iniciar, com o estado atual. */
    beforeToggle = new EventEmitter();
    /** @description Emitido após a animação de toggle concluir, com o novo estado. */
    afterToggle = new EventEmitter();
    active = true;
    ngAfterViewInit() {
        this.headerTemplate = this.templateDirectives?.find((template) => template.type === 'header')?.template;
    }
    toggleActive(originalEvent) {
        if (!this.toggleable) {
            return;
        }
        this.beforeToggle.next({ collapsed: this.active, originalEvent });
        this.active = !this.active;
        this.afterToggle.next({ collapsed: this.active, originalEvent });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FieldsetComponent, isStandalone: true, selector: "s-fieldset", inputs: { legend: "legend", toggleable: "toggleable", icon: "icon", destroyOnHide: "destroyOnHide" }, outputs: { beforeToggle: "beforeToggle", afterToggle: "afterToggle" }, queries: [{ propertyName: "templateDirectives", predicate: TemplateDirective }], ngImport: i0, template: "<fieldset\r\n    class=\"bg-grayscale-0 border border-grayscale-20 rounded-xbig mb-[10px] min-h-[4.5em] px-2 py-1.5 w-full min-w-0\"\r\n>\r\n    <legend\r\n        class=\"flex items-center text-grayscale-90 font-open-sans text-sm font-bold px-1 gap-1 ml-4 select-none\"\r\n        [class.cursor-pointer]=\"toggleable\"\r\n        (sInteractiveContent)=\"toggleActive($event)\"\r\n    >\r\n        @if (toggleable) {\r\n            @if (active) {\r\n                <i class=\"fas fa-plus\"></i>\r\n            } @else {\r\n                <i class=\"fas fa-minus\"></i>\r\n            }\r\n        }\r\n        @if (headerTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n        } @else {\r\n            @if (icon) {\r\n                <i [class]=\"icon\"></i>\r\n            }\r\n            {{ legend }}\r\n        }\r\n    </legend>\r\n    @if (destroyOnHide ? (toggleable ? active : true) : true) {\r\n        <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    }\r\n</fieldset>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
            trigger('toggleAnimation', [
                transition(':enter', [
                    style({ opacity: 0, height: 0 }),
                    animate('300ms ease-out', style({ opacity: 1, height: '*' })),
                ]),
                transition(':leave', [
                    style({ opacity: 1, height: '*' }),
                    animate('300ms ease-in', style({ opacity: 0, height: 0 })),
                ]),
                state('open', style({ opacity: 1, height: '*' })),
                state('closed', style({ opacity: 0, height: 0 })),
                transition('open <=> closed', animate('300ms ease')),
            ]),
        ] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-fieldset', animations: [
                        trigger('toggleAnimation', [
                            transition(':enter', [
                                style({ opacity: 0, height: 0 }),
                                animate('300ms ease-out', style({ opacity: 1, height: '*' })),
                            ]),
                            transition(':leave', [
                                style({ opacity: 1, height: '*' }),
                                animate('300ms ease-in', style({ opacity: 0, height: 0 })),
                            ]),
                            state('open', style({ opacity: 1, height: '*' })),
                            state('closed', style({ opacity: 0, height: 0 })),
                            transition('open <=> closed', animate('300ms ease')),
                        ]),
                    ], standalone: true, imports: [InteractiveContentDirective, NgTemplateOutlet], template: "<fieldset\r\n    class=\"bg-grayscale-0 border border-grayscale-20 rounded-xbig mb-[10px] min-h-[4.5em] px-2 py-1.5 w-full min-w-0\"\r\n>\r\n    <legend\r\n        class=\"flex items-center text-grayscale-90 font-open-sans text-sm font-bold px-1 gap-1 ml-4 select-none\"\r\n        [class.cursor-pointer]=\"toggleable\"\r\n        (sInteractiveContent)=\"toggleActive($event)\"\r\n    >\r\n        @if (toggleable) {\r\n            @if (active) {\r\n                <i class=\"fas fa-plus\"></i>\r\n            } @else {\r\n                <i class=\"fas fa-minus\"></i>\r\n            }\r\n        }\r\n        @if (headerTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n        } @else {\r\n            @if (icon) {\r\n                <i [class]=\"icon\"></i>\r\n            }\r\n            {{ legend }}\r\n        }\r\n    </legend>\r\n    @if (destroyOnHide ? (toggleable ? active : true) : true) {\r\n        <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\r\n            <ng-content></ng-content>\r\n        </div>\r\n    }\r\n</fieldset>\r\n", styles: [":host{display:block}\n"] }]
        }], propDecorators: { legend: [{
                type: Input
            }], toggleable: [{
                type: Input
            }], icon: [{
                type: Input
            }], destroyOnHide: [{
                type: Input
            }], templateDirectives: [{
                type: ContentChildren,
                args: [TemplateDirective]
            }], beforeToggle: [{
                type: Output
            }], afterToggle: [{
                type: Output
            }] } });

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

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

export { FieldsetComponent, FieldsetModule };
//# sourceMappingURL=seniorsistemas-angular-components-fieldset.mjs.map
