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 * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@seniorsistemas/angular-components/interactive-content';
import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';

/**
 * @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, 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\n    class=\"fieldset\"\n    [class.fieldset-togglable]=\"toggleable\"\n>\n    <legend\n        class=\"fieldset-title\"\n        (sInteractiveContent)=\"toggleActive($event)\"\n    >\n        <ng-container *ngIf=\"toggleable\">\n            @if (active) {\n                <i class=\"fas fa-plus\"></i>\n            } @else {\n                <i class=\"fas fa-minus\"></i>\n            }\n        </ng-container>\n        @if (headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        } @else {\n            <i\n                *ngIf=\"icon\"\n                [class]=\"icon\"\n            ></i>\n            {{ legend }}\n        }\n    </legend>\n    @if (destroyOnHide ? (toggleable ? active : true) : true) {\n        <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\n            <ng-content></ng-content>\n        </div>\n    }\n</fieldset>\n", styles: [".fieldset{background-color:#fff;border:1px solid #dedce5;border-radius:6px;margin-bottom:10px;min-height:4.5em;padding:6px 8px}.fieldset-title{align-items:center;color:#212533;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;display:flex;padding:0 4px;gap:4px;margin-left:16px;-webkit-user-select:none;user-select:none}.fieldset-togglable .fieldset-title,.fieldset-togglable .fieldset-title *{cursor:pointer}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }], 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')),
                        ]),
                    ], template: "<fieldset\n    class=\"fieldset\"\n    [class.fieldset-togglable]=\"toggleable\"\n>\n    <legend\n        class=\"fieldset-title\"\n        (sInteractiveContent)=\"toggleActive($event)\"\n    >\n        <ng-container *ngIf=\"toggleable\">\n            @if (active) {\n                <i class=\"fas fa-plus\"></i>\n            } @else {\n                <i class=\"fas fa-minus\"></i>\n            }\n        </ng-container>\n        @if (headerTemplate) {\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        } @else {\n            <i\n                *ngIf=\"icon\"\n                [class]=\"icon\"\n            ></i>\n            {{ legend }}\n        }\n    </legend>\n    @if (destroyOnHide ? (toggleable ? active : true) : true) {\n        <div [@toggleAnimation]=\"destroyOnHide ? null : active ? 'open' : 'closed'\">\n            <ng-content></ng-content>\n        </div>\n    }\n</fieldset>\n", styles: [".fieldset{background-color:#fff;border:1px solid #dedce5;border-radius:6px;margin-bottom:10px;min-height:4.5em;padding:6px 8px}.fieldset-title{align-items:center;color:#212533;font-family:Open Sans,sans-serif;font-size:14px;font-weight:700;display:flex;padding:0 4px;gap:4px;margin-left:16px;-webkit-user-select:none;user-select:none}.fieldset-togglable .fieldset-title,.fieldset-togglable .fieldset-title *{cursor:pointer}.hidden{display:none}\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, declarations: [FieldsetComponent], imports: [CommonModule, InteractiveContentDirective], exports: [FieldsetComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetModule, imports: [CommonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldsetModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, InteractiveContentDirective],
                    declarations: [FieldsetComponent],
                    exports: [FieldsetComponent],
                }]
        }] });

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

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