import * as i0 from '@angular/core';
import { Component, Input, ContentChildren, NgModule } from '@angular/core';
import { TemplateDirective } from '@seniorsistemas/angular-components/template';
import { NgStyle, NgTemplateOutlet } 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, isStandalone: true, selector: "s-card", inputs: { bannerImage: "bannerImage", fullWidth: "fullWidth", title: "title", subtitle: "subtitle", icon: "icon" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], ngImport: i0, template: "<div\r\n    class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n    [class.w-full]=\"fullWidth\"\r\n>\r\n    @if (showBanner) {\r\n        <div\r\n            class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n            [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n        ></div>\r\n    }\r\n\r\n    <!-- @if (hasCustomTemplates) {\r\n  @if (headerTemplate) {\r\n    <div class=\"header\">\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (bodyTemplate) {\r\n    <div class=\"body\">\r\n      <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (footerTemplate) {\r\n    <div class=\"footer\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n} @else {\r\n  <div class=\"body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  } -->\r\n\r\n    @if (hasHeader) {\r\n        <div class=\"py-4 px-3\">\r\n            @if (headerTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            }\r\n            @if (!headerTemplate) {\r\n                <div class=\"flex gap-3\">\r\n                    @if (icon) {\r\n                        <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n                            <i [class]=\"icon\"></i>\r\n                        </div>\r\n                    }\r\n                    <div>\r\n                        @if (title) {\r\n                            <div class=\"text-grayscale-90 text-sm font-bold\">\r\n                                {{ title }}\r\n                            </div>\r\n                        }\r\n                        @if (subtitle) {\r\n                            <div class=\"text-grayscale-60 text-sm font-normal\">\r\n                                {{ subtitle }}\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n    <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n        @if (bodyTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n        } @else {\r\n            <ng-content></ng-content>\r\n        }\r\n    </div>\r\n\r\n    @if (footerTemplate) {\r\n        <div class=\"p-4 border-t border-t-grayscale-30\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n    }\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-card', standalone: true, imports: [NgStyle, NgTemplateOutlet], template: "<div\r\n    class=\"inline-flex flex-col bg-grayscale-0 rounded-medium shadow-[0px_1px_5px_0px_#00000040] overflow-hidden\"\r\n    [class.w-full]=\"fullWidth\"\r\n>\r\n    @if (showBanner) {\r\n        <div\r\n            class=\"bg-no-repeat bg-cover h-[150px] w-full\"\r\n            [ngStyle]=\"{ 'background-image': 'url(' + bannerImage + ')' }\"\r\n        ></div>\r\n    }\r\n\r\n    <!-- @if (hasCustomTemplates) {\r\n  @if (headerTemplate) {\r\n    <div class=\"header\">\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (bodyTemplate) {\r\n    <div class=\"body\">\r\n      <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (footerTemplate) {\r\n    <div class=\"footer\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n} @else {\r\n  <div class=\"body\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n  } -->\r\n\r\n    @if (hasHeader) {\r\n        <div class=\"py-4 px-3\">\r\n            @if (headerTemplate) {\r\n                <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n            }\r\n            @if (!headerTemplate) {\r\n                <div class=\"flex gap-3\">\r\n                    @if (icon) {\r\n                        <div class=\"rounded-[50%] bg-grayscale-20 w-[3em] flex items-center justify-center min-h-[3em]\">\r\n                            <i [class]=\"icon\"></i>\r\n                        </div>\r\n                    }\r\n                    <div>\r\n                        @if (title) {\r\n                            <div class=\"text-grayscale-90 text-sm font-bold\">\r\n                                {{ title }}\r\n                            </div>\r\n                        }\r\n                        @if (subtitle) {\r\n                            <div class=\"text-grayscale-60 text-sm font-normal\">\r\n                                {{ subtitle }}\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                </div>\r\n            }\r\n        </div>\r\n    }\r\n    <div class=\"p-4\" [class.border-t]=\"hasHeader\" [class.border-t-grayscale-30]=\"hasHeader\">\r\n        @if (bodyTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n        } @else {\r\n            <ng-content></ng-content>\r\n        }\r\n    </div>\r\n\r\n    @if (footerTemplate) {\r\n        <div class=\"p-4 border-t border-t-grayscale-30\">\r\n            <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n    }\r\n</div>\r\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, imports: [CardComponent], exports: [CardComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CardComponent],
                    exports: [CardComponent],
                }]
        }] });

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

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