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 * as i2 from '@seniorsistemas/angular-components/shared';
import { EnumSeverity, BorderButtonModule } from '@seniorsistemas/angular-components/shared';
import { TemplateDirective, TemplateModule } from '@seniorsistemas/angular-components/template';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

class PanelComponent {
    header;
    toggleable = false;
    collapsed = false;
    severity = 'default';
    borderButtonOptions;
    class = '';
    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, selector: "s-panel", inputs: { header: "header", toggleable: "toggleable", collapsed: "collapsed", severity: "severity", borderButtonOptions: "borderButtonOptions", class: "class" }, outputs: { collapsedChange: "collapsedChange" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div\n    [class]=\"class\"\n    [ngClass]=\"{\n        panel: true,\n        'panel--success': severity === EnumSeverity.Success,\n        'panel--info': severity === EnumSeverity.Info,\n        'panel--warn': severity === EnumSeverity.Warn,\n        'panel--error': severity === EnumSeverity.Error,\n        'panel--collapsed': collapsed,\n    }\"\n>\n    @if (borderButtonOptions?.visible ? borderButtonOptions?.visible(severity) : false) {\n        <s-border-button\n            [severity]=\"severity\"\n            [options]=\"borderButtonOptions\"\n            class=\"border-button\"\n            [@BorderButtonAnimation]\n        >\n        </s-border-button>\n    }\n\n    @if (header || headerTemplate) {\n        <div class=\"header\">\n            <div class=\"header-content\">\n                @if (headerTemplate) {\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                } @else {\n                    <span>{{ header }}</span>\n                }\n            </div>\n\n            @if (toggleable) {\n                <button\n                    class=\"collapse-button fas\"\n                    [ngClass]=\"{\n                        'fa-plus': collapsed,\n                        'fa-minus': !collapsed,\n                    }\"\n                    (click)=\"toggleCollapsed()\"\n                ></button>\n            }\n        </div>\n    }\n\n    @if (!toggleable || !collapsed) {\n        <div class=\"panel-content\">\n            <div class=\"body\">\n                <ng-content></ng-content>\n                <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n            </div>\n\n            @if (footerTemplate) {\n                <div class=\"footer\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                </div>\n            }\n        </div>\n    }\n</div>\n", styles: [".panel{background-color:#fff;border:1px solid #dedce5;padding:20px;position:relative;transition:border-color .5s ease}.panel .border-button{position:absolute;right:15px;top:-12px;z-index:10}.panel .header{border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding-bottom:12px;margin-bottom:12px;text-transform:uppercase}.panel .header-content{flex-grow:1}.panel .header .collapse-button{background-color:transparent;border:none;color:#212533;cursor:pointer;height:24px;width:24px}.panel .panel-content .footer{border-top:1px solid #dedce5;padding-top:12px}.panel--success{border-color:#0c9348}.panel--info{border-color:#428bca}.panel--warn{border-color:#f8931f}.panel--error{border-color:#c13018}.panel--collapsed .header{border:none;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.BorderButtonComponent, selector: "s-border-button", inputs: ["severity", "options"] }], 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 })),
                            ]),
                        ]),
                    ], template: "<div\n    [class]=\"class\"\n    [ngClass]=\"{\n        panel: true,\n        'panel--success': severity === EnumSeverity.Success,\n        'panel--info': severity === EnumSeverity.Info,\n        'panel--warn': severity === EnumSeverity.Warn,\n        'panel--error': severity === EnumSeverity.Error,\n        'panel--collapsed': collapsed,\n    }\"\n>\n    @if (borderButtonOptions?.visible ? borderButtonOptions?.visible(severity) : false) {\n        <s-border-button\n            [severity]=\"severity\"\n            [options]=\"borderButtonOptions\"\n            class=\"border-button\"\n            [@BorderButtonAnimation]\n        >\n        </s-border-button>\n    }\n\n    @if (header || headerTemplate) {\n        <div class=\"header\">\n            <div class=\"header-content\">\n                @if (headerTemplate) {\n                    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n                } @else {\n                    <span>{{ header }}</span>\n                }\n            </div>\n\n            @if (toggleable) {\n                <button\n                    class=\"collapse-button fas\"\n                    [ngClass]=\"{\n                        'fa-plus': collapsed,\n                        'fa-minus': !collapsed,\n                    }\"\n                    (click)=\"toggleCollapsed()\"\n                ></button>\n            }\n        </div>\n    }\n\n    @if (!toggleable || !collapsed) {\n        <div class=\"panel-content\">\n            <div class=\"body\">\n                <ng-content></ng-content>\n                <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n            </div>\n\n            @if (footerTemplate) {\n                <div class=\"footer\">\n                    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n                </div>\n            }\n        </div>\n    }\n</div>\n", styles: [".panel{background-color:#fff;border:1px solid #dedce5;padding:20px;position:relative;transition:border-color .5s ease}.panel .border-button{position:absolute;right:15px;top:-12px;z-index:10}.panel .header{border-bottom:1px solid #dedce5;display:flex;justify-content:space-between;padding-bottom:12px;margin-bottom:12px;text-transform:uppercase}.panel .header-content{flex-grow:1}.panel .header .collapse-button{background-color:transparent;border:none;color:#212533;cursor:pointer;height:24px;width:24px}.panel .panel-content .footer{border-top:1px solid #dedce5;padding-top:12px}.panel--success{border-color:#0c9348}.panel--info{border-color:#428bca}.panel--warn{border-color:#f8931f}.panel--error{border-color:#c13018}.panel--collapsed .header{border:none;padding:0;margin:0}\n"] }]
        }], propDecorators: { header: [{
                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, declarations: [PanelComponent], imports: [CommonModule, BorderButtonModule], exports: [PanelComponent, TemplateModule] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelModule, imports: [CommonModule, BorderButtonModule, TemplateModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PanelModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, BorderButtonModule],
                    declarations: [PanelComponent],
                    exports: [PanelComponent, TemplateModule],
                }]
        }] });

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

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