import * as i0 from '@angular/core';
import { Component, Input, ContentChildren, NgModule } from '@angular/core';
import { TemplateDirective, TemplateModule } from '@seniorsistemas/angular-components/template';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

/**
 * @description Componente de cartão com suporte a banner, cabeçalho (título, subtítulo e ícone)
 * e templates customizáveis para cabeçalho, corpo e rodapé via `TemplateDirective`.
 *
 * @example
 * ```html
 * <s-card title="Título" subtitle="Subtítulo">
 *   <ng-template sTemplate type="body">Conteúdo</ng-template>
 * </s-card>
 * ```
 *
 * @category Structure
 */
class CardComponent {
    /** @description URL da imagem exibida como banner no topo do card. */
    bannerImage;
    /** @description Faz o card ocupar 100% da largura disponível. @default false */
    fullWidth = false;
    /** @description Título exibido no cabeçalho do card. @default '' */
    title = '';
    /** @description Subtítulo exibido abaixo do título. @default '' */
    subtitle = '';
    /** @description Classe do ícone exibido no cabeçalho. @default '' */
    icon = '';
    showBanner = false;
    templates;
    hasCustomTemplates = false;
    headerTemplate;
    bodyTemplate;
    footerTemplate;
    get hasHeader() {
        const headerTemplate = !!this.headerTemplate;
        const hasHeaderAttributes = this.title || this.subtitle || this.icon;
        return headerTemplate || hasHeaderAttributes;
    }
    async ngAfterContentInit() {
        await this._setShowBanner();
        this._setTemplates();
    }
    _getHeaderTemplate() {
        return this._getCustomTemplate('header');
    }
    _getBodyTemplate() {
        return this._getCustomTemplate('body');
    }
    _getFooterTemplate() {
        return this._getCustomTemplate('footer');
    }
    _getCustomTemplate(type) {
        return this.templates?.find((template) => template.type === type)?.template;
    }
    _setTemplates() {
        this.headerTemplate = this._getHeaderTemplate();
        this.bodyTemplate = this._getBodyTemplate();
        this.footerTemplate = this._getFooterTemplate();
        this.hasCustomTemplates = !!(this.headerTemplate || this.bodyTemplate || this.footerTemplate);
    }
    _setShowBanner() {
        return new Promise((resolve) => {
            if (!this.bannerImage) {
                resolve();
                return;
            }
            const img = new Image();
            img.src = this.bannerImage;
            img.onload = () => {
                this.showBanner = true;
                resolve();
            };
            img.onerror = () => {
                this.showBanner = false;
                resolve();
            };
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: CardComponent, selector: "s-card", inputs: { bannerImage: "bannerImage", fullWidth: "fullWidth", title: "title", subtitle: "subtitle", icon: "icon" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div\n    class=\"card\"\n    [class.card--full-width]=\"fullWidth\"\n>\n    @if (showBanner) {\n        <div\n            class=\"banner\"\n            [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\n        ></div>\n    }\n\n    <!-- @if (hasCustomTemplates) {\n        @if (headerTemplate) {\n            <div class=\"header\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n        }\n        @if (bodyTemplate) {\n            <div class=\"body\">\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    } @else {\n        <div class=\"body\">\n            <ng-content></ng-content>\n        </div>\n    } -->\n\n    @if(hasHeader) {\n        <div class=\"header\">\n            @if(headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            }\n            @if(!headerTemplate) {\n                <div class=\"header-content\">\n                    <div class=\"header-icon\" *ngIf=\"icon\">\n                        <i [class]=\"icon\"></i>\n                    </div>\n                    <div>\n                        <div class=\"header-title\" *ngIf=\"title\">\n                            {{ title }}\n                        </div>\n                        <div class=\"header-subtitle\" *ngIf=\"subtitle\">\n                            {{ subtitle }}\n                        </div>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n    <div class=\"body\">\n        @if(bodyTemplate) {\n            <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n        }@else {\n            <ng-content></ng-content>\n        }\n    </div>\n\n    @if(footerTemplate) {\n        <div class=\"footer\">\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n    }\n</div>\n", styles: [".card{display:inline-flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 1px 5px #00000040;overflow:hidden}.card--full-width{width:100%}.card .banner{background-repeat:no-repeat;background-size:cover;height:150px;width:100%}.card .header{padding:16px 12px}.card .header-content{display:flex;gap:12px}.card .header-title{color:#212533;font-size:14px;font-style:normal;font-weight:700}.card .header-subtitle{color:#6e7280;font-size:14px;font-style:normal;font-weight:400}.card .header-icon{border-radius:50%;background-color:#dedce5;width:3em;display:flex;align-items:center;justify-content:center;min-height:3em}.card .body,.card .footer{padding:16px}.card .header+.body,.card .body+.footer{border-top:1px solid #c1c1cc}\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-card', template: "<div\n    class=\"card\"\n    [class.card--full-width]=\"fullWidth\"\n>\n    @if (showBanner) {\n        <div\n            class=\"banner\"\n            [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\n        ></div>\n    }\n\n    <!-- @if (hasCustomTemplates) {\n        @if (headerTemplate) {\n            <div class=\"header\">\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            </div>\n        }\n        @if (bodyTemplate) {\n            <div class=\"body\">\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    } @else {\n        <div class=\"body\">\n            <ng-content></ng-content>\n        </div>\n    } -->\n\n    @if(hasHeader) {\n        <div class=\"header\">\n            @if(headerTemplate) {\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n            }\n            @if(!headerTemplate) {\n                <div class=\"header-content\">\n                    <div class=\"header-icon\" *ngIf=\"icon\">\n                        <i [class]=\"icon\"></i>\n                    </div>\n                    <div>\n                        <div class=\"header-title\" *ngIf=\"title\">\n                            {{ title }}\n                        </div>\n                        <div class=\"header-subtitle\" *ngIf=\"subtitle\">\n                            {{ subtitle }}\n                        </div>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n    <div class=\"body\">\n        @if(bodyTemplate) {\n            <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n        }@else {\n            <ng-content></ng-content>\n        }\n    </div>\n\n    @if(footerTemplate) {\n        <div class=\"footer\">\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n        </div>\n    }\n</div>\n", styles: [".card{display:inline-flex;flex-direction:column;background-color:#fff;border-radius:4px;box-shadow:0 1px 5px #00000040;overflow:hidden}.card--full-width{width:100%}.card .banner{background-repeat:no-repeat;background-size:cover;height:150px;width:100%}.card .header{padding:16px 12px}.card .header-content{display:flex;gap:12px}.card .header-title{color:#212533;font-size:14px;font-style:normal;font-weight:700}.card .header-subtitle{color:#6e7280;font-size:14px;font-style:normal;font-weight:400}.card .header-icon{border-radius:50%;background-color:#dedce5;width:3em;display:flex;align-items:center;justify-content:center;min-height:3em}.card .body,.card .footer{padding:16px}.card .header+.body,.card .body+.footer{border-top:1px solid #c1c1cc}\n"] }]
        }], propDecorators: { bannerImage: [{
                type: Input
            }], fullWidth: [{
                type: Input
            }], title: [{
                type: Input
            }], subtitle: [{
                type: Input
            }], icon: [{
                type: Input
            }], templates: [{
                type: ContentChildren,
                args: [TemplateDirective]
            }] } });

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

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

export { CardComponent, CardModule };
//# sourceMappingURL=seniorsistemas-angular-components-card.mjs.map
