import { Component, EventEmitter, Input, Output } from '@angular/core';
import { trigger, style, animate, transition, state } from '@angular/animations';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@seniorsistemas/angular-components/tooltip";
import * as i4 from "@seniorsistemas/angular-components/switch";
import * as i5 from "@seniorsistemas/angular-components/badge";
/**
 * @description Painel individual do {@link AccordionComponent}. Gerencia o estado de
 * abertura/fechamento com animação, podendo conter um switch de controle via `switchControl`,
 * botões de ação configuráveis e uma mensagem de validação com ícone.
 *
 * @example
 * ```html
 * <s-accordion-panel
 *   header="Configurações"
 *   [disabled]="false"
 *   (panelOpened)="onOpen()"
 *   (panelClosed)="onClose()">
 *   <p>Conteúdo do painel</p>
 * </s-accordion-panel>
 * ```
 *
 * @category Inputs
 */
export class AccordionPanelComponent {
    /**
     * @description Título exibido no cabeçalho do painel. Campo obrigatório.
     */
    header;
    /**
     * @description Cria um componente Badge ao lado dos botões de ação no cabeçalho do painel.
     * O objeto de configuração deve conter o texto e a cor do badge.
     */
    badgeConfig;
    /**
     * @description Lista de botões de ação exibidos no cabeçalho do painel,
     * à direita do título. Cada item define ícone, tooltip e callback de clique.
     */
    buttons;
    /**
     * @description Desabilita a interação do usuário com o painel, impedindo abertura e fechamento.
     *
     * @default false
     */
    disabled = false;
    /**
     * @description `FormControl` vinculado a um switch exibido no cabeçalho do painel.
     * Permite habilitar/desabilitar o conteúdo do painel via toggle.
     */
    switchControl;
    /**
     * @description Mensagem de validação exibida abaixo do cabeçalho, acompanhada de um ícone.
     * Útil para indicar erros ou alertas relacionados ao conteúdo do painel.
     */
    validationMessage;
    /**
     * @description Mantém o conteúdo do painel no DOM mesmo quando fechado (modo cache).
     * Útil para preservar o estado de componentes internos ao reabrir o painel.
     *
     * @default false
     */
    cache = false;
    /**
     * @description Classe do ícone exibido ao lado da mensagem de validação.
     *
     * @default 'fas fa-exclamation-circle'
     */
    validationMessageIcon = 'fas fa-exclamation-circle';
    /**
     * @description Cor do ícone da mensagem de validação.
     *
     * @default 'Red'
     */
    validationMessageIconColor = 'Red';
    /**
     * @description Emitido quando o painel é aberto pelo usuário.
     */
    panelOpened = new EventEmitter();
    /**
     * @description Emitido quando o painel é fechado pelo usuário.
     */
    panelClosed = new EventEmitter();
    isAnimating = false;
    isContentAnimationDisabled = true;
    _isOpen = false;
    get isOpen() {
        return this._isOpen;
    }
    set isOpen(isOpen) {
        this._isOpen = isOpen;
    }
    ngOnChanges(changes) {
        if ('disabled' in changes && this.switchControl) {
            if (changes['disabled'].currentValue) {
                this.switchControl.disable({ emitEvent: false });
            }
            else {
                this.switchControl.enable({ emitEvent: false });
            }
        }
        if ('switch' in changes && 'switchControl' in changes) {
            throw new Error("You can't set switch and switchControl together.");
        }
    }
    ngAfterViewInit() {
        // to executed at a safe time prior to control returning to the browser's event loop
        queueMicrotask(() => {
            this.isContentAnimationDisabled = false;
        });
    }
    onIconButtonsClick(event, callback) {
        if (this.disabled) {
            return;
        }
        event.stopPropagation();
        callback();
    }
    onTabClick() {
        if (this.disabled || this.isAnimating) {
            return;
        }
        this.isOpen = !this.isOpen;
        this._emitPanelEvent();
    }
    onContentAnimationStart() {
        this.isAnimating = true;
    }
    onContentAnimationDone() {
        this.isAnimating = false;
        this._emitPanelEvent();
    }
    _emitPanelEvent() {
        if (this.isOpen) {
            this.panelOpened.emit();
        }
        else {
            this.panelClosed.emit();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccordionPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AccordionPanelComponent, selector: "s-accordion-panel", inputs: { header: "header", badgeConfig: "badgeConfig", buttons: "buttons", disabled: "disabled", switchControl: "switchControl", validationMessage: "validationMessage", cache: "cache", validationMessageIcon: "validationMessageIcon", validationMessageIconColor: "validationMessageIconColor" }, outputs: { panelOpened: "panelOpened", panelClosed: "panelClosed" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"accordion-panel\"\n    [class.accordion-panel--open]=\"isOpen\"\n    [class.accordion-panel--disabled]=\"disabled\"\n>\n    <div\n        class=\"header\"\n        (click)=\"onTabClick()\"\n    >\n        <div class=\"header__title\">\n            <span\n                class=\"icon fas\"\n                [class.fa-minus]=\"isOpen\"\n                [class.fa-plus]=\"!isOpen\"\n            >\n            </span>\n            @if (validationMessage) {\n                <span\n                    class=\"exclamation-icon\"\n                    [class]=\"validationMessageIcon\"\n                    [sTooltip]=\"validationMessage\"\n                    [class.exclamation-icon-red]=\"validationMessageIconColor === 'Red'\"\n                    [class.exclamation-icon-orange]=\"validationMessageIconColor === 'Orange'\"\n                    [class.exclamation-icon-yellow]=\"validationMessageIconColor === 'Yellow'\"\n                    [class.exclamation-icon-green]=\"validationMessageIconColor === 'Green'\"\n                    [class.exclamation-icon-blue]=\"validationMessageIconColor === 'Blue'\"\n                >\n                </span>\n            }\n            <span class=\"title\">{{ header }}</span>\n        </div>\n        <div class=\"header__controls\">\n            @if (badgeConfig) {\n                <s-badge\n                    [color]=\"badgeConfig.color\"\n                    [text]=\"badgeConfig.text\"\n                ></s-badge>\n            }\n\n            @for (button of buttons; track button.icon) {\n                <button\n                    class=\"icon-button\"\n                    [ngClass]=\"button.icon\"\n                    (click)=\"onIconButtonsClick($event, button.onClick)\"\n                ></button>\n            }\n\n            @if (switchControl) {\n                <s-switch\n                    class=\"switch\"\n                    [formControl]=\"switchControl\"\n                    (click)=\"$event.stopPropagation()\"\n                >\n                </s-switch>\n            }\n        </div>\n    </div>\n\n    @if (cache) {\n        <div\n            class=\"content\"\n            [@cacheAnimation]=\"isOpen\"\n            [@.disabled]=\"isContentAnimationDisabled\"\n            (@cacheAnimation.start)=\"onContentAnimationStart()\"\n            (@cacheAnimation.done)=\"onContentAnimationDone()\"\n        >\n            <div class=\"content-container\">\n                <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n            </div>\n        </div>\n    } @else {\n        @if (isOpen) {\n            <div\n                class=\"content\"\n                @cachelessAnimation\n                [@.disabled]=\"isContentAnimationDisabled\"\n                (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n                (@cachelessAnimation.done)=\"onContentAnimationDone()\"\n            >\n                <div class=\"content-container\">\n                    <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n                </div>\n            </div>\n        }\n    }\n</div>\n\n<ng-template #panelContent>\n    <ng-content></ng-content>\n</ng-template>\n\n", styles: [".accordion-panel{border-bottom:1px solid #c1c1cc}.accordion-panel .header{align-items:center;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;padding:16px;-webkit-user-select:none;user-select:none}.accordion-panel .header .header__title{align-items:center;display:flex;flex-wrap:nowrap}.accordion-panel .header .header__title .icon{color:#212533;font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon{font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon-red{color:#c13018}.accordion-panel .header .header__title .exclamation-icon-orange{color:#f8931f}.accordion-panel .header .header__title .exclamation-icon-yellow{color:#fcbf10}.accordion-panel .header .header__title .exclamation-icon-green{color:#0c9348}.accordion-panel .header .header__title .exclamation-icon-blue{color:#428bca}.accordion-panel .header .header__title .title{font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:700;line-height:150%;text-transform:uppercase}.accordion-panel .header .header__controls{align-items:center;display:flex;margin-left:16px}.accordion-panel .header .header__controls .icon-button{color:#212533;cursor:pointer;font-size:1rem;margin-left:12px;padding:4px;border:none;background:none}.accordion-panel .header .header__controls .switch{padding-left:16px}.accordion-panel .content{background-color:#fff;overflow:hidden}.accordion-panel .content .content-container{margin:20px}.accordion-panel--open .header{background-color:#eeebf2;border-bottom:1px solid #c1c1cc}.accordion-panel--disabled .header{cursor:auto}.accordion-panel--disabled .header .header__title .icon,.accordion-panel--disabled .header .header__title .title{color:#c1c1cc}.accordion-panel--disabled .header .header__controls .icon-button{color:#c1c1cc;cursor:auto}.accordion-panel--disabled .exclamation-icon{opacity:.5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "component", type: i4.SwitchComponent, selector: "s-switch", inputs: ["readonly", "trueLabel", "falseLabel", "inputId", "label", "inputName", "disabled", "value", "showStatusLabel"], outputs: ["valueChanged"] }, { kind: "component", type: i5.BadgeComponent, selector: "s-badge", inputs: ["type", "color", "title", "text", "selectable", "iconClass", "iconPosition", "infoSign", "enableTruncateText"], outputs: ["selected"] }], animations: [
            trigger('cachelessAnimation', [
                transition(':enter', [style({ height: '0' }), animate('200ms linear', style({ height: '*' }))]),
                transition(':leave', [style({ height: '*' }), animate('200ms linear', style({ height: '0' }))]),
            ]),
            trigger('cacheAnimation', [
                state('true', style({ height: '*' })),
                state('false', style({ height: '0px' })),
                transition('* => *', animate('200ms')),
            ]),
        ] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccordionPanelComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-accordion-panel', animations: [
                        trigger('cachelessAnimation', [
                            transition(':enter', [style({ height: '0' }), animate('200ms linear', style({ height: '*' }))]),
                            transition(':leave', [style({ height: '*' }), animate('200ms linear', style({ height: '0' }))]),
                        ]),
                        trigger('cacheAnimation', [
                            state('true', style({ height: '*' })),
                            state('false', style({ height: '0px' })),
                            transition('* => *', animate('200ms')),
                        ]),
                    ], template: "<div\n    class=\"accordion-panel\"\n    [class.accordion-panel--open]=\"isOpen\"\n    [class.accordion-panel--disabled]=\"disabled\"\n>\n    <div\n        class=\"header\"\n        (click)=\"onTabClick()\"\n    >\n        <div class=\"header__title\">\n            <span\n                class=\"icon fas\"\n                [class.fa-minus]=\"isOpen\"\n                [class.fa-plus]=\"!isOpen\"\n            >\n            </span>\n            @if (validationMessage) {\n                <span\n                    class=\"exclamation-icon\"\n                    [class]=\"validationMessageIcon\"\n                    [sTooltip]=\"validationMessage\"\n                    [class.exclamation-icon-red]=\"validationMessageIconColor === 'Red'\"\n                    [class.exclamation-icon-orange]=\"validationMessageIconColor === 'Orange'\"\n                    [class.exclamation-icon-yellow]=\"validationMessageIconColor === 'Yellow'\"\n                    [class.exclamation-icon-green]=\"validationMessageIconColor === 'Green'\"\n                    [class.exclamation-icon-blue]=\"validationMessageIconColor === 'Blue'\"\n                >\n                </span>\n            }\n            <span class=\"title\">{{ header }}</span>\n        </div>\n        <div class=\"header__controls\">\n            @if (badgeConfig) {\n                <s-badge\n                    [color]=\"badgeConfig.color\"\n                    [text]=\"badgeConfig.text\"\n                ></s-badge>\n            }\n\n            @for (button of buttons; track button.icon) {\n                <button\n                    class=\"icon-button\"\n                    [ngClass]=\"button.icon\"\n                    (click)=\"onIconButtonsClick($event, button.onClick)\"\n                ></button>\n            }\n\n            @if (switchControl) {\n                <s-switch\n                    class=\"switch\"\n                    [formControl]=\"switchControl\"\n                    (click)=\"$event.stopPropagation()\"\n                >\n                </s-switch>\n            }\n        </div>\n    </div>\n\n    @if (cache) {\n        <div\n            class=\"content\"\n            [@cacheAnimation]=\"isOpen\"\n            [@.disabled]=\"isContentAnimationDisabled\"\n            (@cacheAnimation.start)=\"onContentAnimationStart()\"\n            (@cacheAnimation.done)=\"onContentAnimationDone()\"\n        >\n            <div class=\"content-container\">\n                <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n            </div>\n        </div>\n    } @else {\n        @if (isOpen) {\n            <div\n                class=\"content\"\n                @cachelessAnimation\n                [@.disabled]=\"isContentAnimationDisabled\"\n                (@cachelessAnimation.start)=\"onContentAnimationStart()\"\n                (@cachelessAnimation.done)=\"onContentAnimationDone()\"\n            >\n                <div class=\"content-container\">\n                    <ng-container [ngTemplateOutlet]=\"panelContent\"></ng-container>\n                </div>\n            </div>\n        }\n    }\n</div>\n\n<ng-template #panelContent>\n    <ng-content></ng-content>\n</ng-template>\n\n", styles: [".accordion-panel{border-bottom:1px solid #c1c1cc}.accordion-panel .header{align-items:center;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;padding:16px;-webkit-user-select:none;user-select:none}.accordion-panel .header .header__title{align-items:center;display:flex;flex-wrap:nowrap}.accordion-panel .header .header__title .icon{color:#212533;font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon{font-size:1rem;margin-right:12px}.accordion-panel .header .header__title .exclamation-icon-red{color:#c13018}.accordion-panel .header .header__title .exclamation-icon-orange{color:#f8931f}.accordion-panel .header .header__title .exclamation-icon-yellow{color:#fcbf10}.accordion-panel .header .header__title .exclamation-icon-green{color:#0c9348}.accordion-panel .header .header__title .exclamation-icon-blue{color:#428bca}.accordion-panel .header .header__title .title{font-family:\"Open Sans\" sans-serif;font-size:.875rem;font-weight:700;line-height:150%;text-transform:uppercase}.accordion-panel .header .header__controls{align-items:center;display:flex;margin-left:16px}.accordion-panel .header .header__controls .icon-button{color:#212533;cursor:pointer;font-size:1rem;margin-left:12px;padding:4px;border:none;background:none}.accordion-panel .header .header__controls .switch{padding-left:16px}.accordion-panel .content{background-color:#fff;overflow:hidden}.accordion-panel .content .content-container{margin:20px}.accordion-panel--open .header{background-color:#eeebf2;border-bottom:1px solid #c1c1cc}.accordion-panel--disabled .header{cursor:auto}.accordion-panel--disabled .header .header__title .icon,.accordion-panel--disabled .header .header__title .title{color:#c1c1cc}.accordion-panel--disabled .header .header__controls .icon-button{color:#c1c1cc;cursor:auto}.accordion-panel--disabled .exclamation-icon{opacity:.5}\n"] }]
        }], propDecorators: { header: [{
                type: Input,
                args: [{ required: true }]
            }], badgeConfig: [{
                type: Input
            }], buttons: [{
                type: Input
            }], disabled: [{
                type: Input
            }], switchControl: [{
                type: Input
            }], validationMessage: [{
                type: Input
            }], cache: [{
                type: Input
            }], validationMessageIcon: [{
                type: Input
            }], validationMessageIconColor: [{
                type: Input
            }], panelOpened: [{
                type: Output
            }], panelClosed: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 