import { Component, EventEmitter, Input, Output, HostListener } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@seniorsistemas/angular-components/tooltip";
import * as i3 from "@seniorsistemas/angular-components/thumbnail";
/**
 * @description Card clicável que representa uma opção ou destino de navegação,
 * exibindo ícone (por classe ou imagem), rótulo e descrição opcional.
 * Suporta navegação por teclado e exibe as iniciais do rótulo como fallback.
 *
 * @example
 * ```html
 * <s-tile
 *   label="Relatórios"
 *   iconClass="fas fa-chart-bar"
 *   (clicked)="onTileClicado()" />
 * ```
 *
 * @category Summary
 */
export class TileComponent {
    static nextId = 0;
    /** @description Identificador único do elemento no DOM. Gerado automaticamente se não informado. */
    id = `s-tile-${TileComponent.nextId++}`;
    /** @description Rótulo principal exibido no tile. Campo obrigatório. */
    label;
    /** @description Texto descritivo exibido abaixo do rótulo. */
    description;
    /** @description Classe do ícone exibido no tile (ex.: `'fas fa-home'`). */
    iconClass;
    /** @description URL da imagem exibida no tile. */
    imageSource;
    /** @description Texto alternativo para a imagem (`alt`). */
    imageAlt;
    /** @description Desabilita o tile, removendo interações e aplicando estilo desativado. @default false */
    disabled = false;
    /** @description `tabindex` do tile para navegação por teclado. @default 0 */
    tabIndex = 0;
    /** @description Exibe o thumbnail (miniatura) no tile. @default true */
    thumbnail = true;
    /** @description Emitido quando o usuário clica ou pressiona Enter/Espaço no tile. */
    clicked = new EventEmitter();
    get initialLetter() {
        let initialLetter = '';
        if (this.label) {
            const words = this.label.split(' ', 2);
            initialLetter = words[0].charAt(0).toUpperCase();
            if (words.length > 1) {
                initialLetter += words[1].charAt(0).toUpperCase();
            }
        }
        return initialLetter;
    }
    onKeyDown(event) {
        if (!this.disabled && [13, 32].includes(event.keyCode)) {
            this.clicked.emit();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TileComponent, selector: "s-tile", inputs: { id: "id", label: "label", description: "description", iconClass: "iconClass", imageSource: "imageSource", imageAlt: "imageAlt", disabled: "disabled", tabIndex: "tabIndex", thumbnail: "thumbnail" }, outputs: { clicked: "clicked" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0, template: "<div\n    [id]=\"id\"\n    class=\"tile\"\n    [attr.tabindex]=\"disabled ? undefined : tabIndex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-disabled]=\"disabled\"\n    role=\"button\"\n    [ngClass]=\"{ 'tile--disabled': disabled }\"\n    (click)=\"!disabled && clicked.emit($event)\"\n>\n\n    @if(imageSource || iconClass) {\n        <div class=\"thumbnail\">\n            @if(imageSource) {\n                @if(!thumbnail) {\n                    <div\n                        class=\"image-icon\">\n                        <div\n                            class=\"icon\"\n                            [style.background-image]=\"'url(' + imageSource + ')'\">\n                        </div>\n                    </div>\n\n                }\n                @if(thumbnail) {\n                    <s-thumbnail\n                        [id]=\"id + '-thumbnail'\"\n                        [imageSource]=\"imageSource\"\n                        [imageAlt]=\"imageAlt || label\"\n                        size=\"small\"\n                        [isTile]=\"true\"/>\n                }\n            }\n            @if(!imageSource && iconClass) {\n                <span\n                    [id]=\"id + '-icon'\"\n                    [class]=\"'icon ' + iconClass\"\n                    aria-hidden=\"true\">\n                </span>\n            }\n        </div>\n    }\n\n    @if (!iconClass && !imageSource) {\n        <div class=\"first-letter-container\">\n            <div class=\"first-letter\">\n                <span>{{ initialLetter }}</span>\n            </div>\n        </div>\n    }\n\n    <div class=\"info\">\n        <span\n            [id]=\"id + '-title'\"\n            class=\"title\"\n            [sTooltip]=\"label\"\n        >\n            {{ label }}\n        </span>\n        <span\n            [id]=\"id + '-description'\"\n            class=\"description\"\n            [sTooltip]=\"description\"\n        >\n            {{ description }}\n        </span>\n    </div>\n</div>\n", styles: [".tile{align-items:center;background-color:#fff;border:1px solid #c1c1cc;cursor:pointer;display:flex;min-height:80px;overflow:hidden;padding:15px;position:relative;transition:background-color .2s ease-out,border-color .2s ease-out}.tile:hover:not(.tile--disabled),.tile:focus:not(.tile--disabled){background-color:#eeebf2;outline:none}.tile .thumbnail{display:flex;align-items:center;margin-right:15px}.tile .thumbnail .icon{color:#428bca;font-size:2.5rem}.tile .info{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.tile .info .title,.tile .info .description{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile .info .title{color:#428bca;font-size:1.25rem}.tile .info .description{color:#6e7280;font-size:.875rem}.tile .first-letter-container{float:left;margin-right:10px;position:relative;text-align:center}.tile .first-letter-container .first-letter{background-color:#428bca;border-radius:50%;color:#fff;font-size:1.375rem;height:40px;line-height:1.8em;margin:0 auto 5px;width:40px}.tile--disabled{opacity:.5;filter:Alpha(Opacity=50);background-image:none}.tile--disabled,.tile--disabled *{cursor:text!important}.tile .image-icon .icon{height:32px;width:32px;background-size:cover;background-repeat:no-repeat}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[sTooltip]", inputs: ["sTooltip", "tooltipPosition", "showDelay", "displayTime", "tooltipEvent", "escape", "visible", "mobileBehavior", "focusedInputRef", "checkTruncatedText"] }, { kind: "component", type: i3.ThumbnailComponent, selector: "s-thumbnail", inputs: ["id", "size", "imageSource", "imageFallback", "imageAlt", "iconClass", "hasAction", "actionIconClass", "isTile", "isBrand"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-tile', template: "<div\n    [id]=\"id\"\n    class=\"tile\"\n    [attr.tabindex]=\"disabled ? undefined : tabIndex\"\n    [attr.aria-label]=\"label\"\n    [attr.aria-disabled]=\"disabled\"\n    role=\"button\"\n    [ngClass]=\"{ 'tile--disabled': disabled }\"\n    (click)=\"!disabled && clicked.emit($event)\"\n>\n\n    @if(imageSource || iconClass) {\n        <div class=\"thumbnail\">\n            @if(imageSource) {\n                @if(!thumbnail) {\n                    <div\n                        class=\"image-icon\">\n                        <div\n                            class=\"icon\"\n                            [style.background-image]=\"'url(' + imageSource + ')'\">\n                        </div>\n                    </div>\n\n                }\n                @if(thumbnail) {\n                    <s-thumbnail\n                        [id]=\"id + '-thumbnail'\"\n                        [imageSource]=\"imageSource\"\n                        [imageAlt]=\"imageAlt || label\"\n                        size=\"small\"\n                        [isTile]=\"true\"/>\n                }\n            }\n            @if(!imageSource && iconClass) {\n                <span\n                    [id]=\"id + '-icon'\"\n                    [class]=\"'icon ' + iconClass\"\n                    aria-hidden=\"true\">\n                </span>\n            }\n        </div>\n    }\n\n    @if (!iconClass && !imageSource) {\n        <div class=\"first-letter-container\">\n            <div class=\"first-letter\">\n                <span>{{ initialLetter }}</span>\n            </div>\n        </div>\n    }\n\n    <div class=\"info\">\n        <span\n            [id]=\"id + '-title'\"\n            class=\"title\"\n            [sTooltip]=\"label\"\n        >\n            {{ label }}\n        </span>\n        <span\n            [id]=\"id + '-description'\"\n            class=\"description\"\n            [sTooltip]=\"description\"\n        >\n            {{ description }}\n        </span>\n    </div>\n</div>\n", styles: [".tile{align-items:center;background-color:#fff;border:1px solid #c1c1cc;cursor:pointer;display:flex;min-height:80px;overflow:hidden;padding:15px;position:relative;transition:background-color .2s ease-out,border-color .2s ease-out}.tile:hover:not(.tile--disabled),.tile:focus:not(.tile--disabled){background-color:#eeebf2;outline:none}.tile .thumbnail{display:flex;align-items:center;margin-right:15px}.tile .thumbnail .icon{color:#428bca;font-size:2.5rem}.tile .info{display:flex;flex-direction:column;justify-content:center;overflow:hidden}.tile .info .title,.tile .info .description{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile .info .title{color:#428bca;font-size:1.25rem}.tile .info .description{color:#6e7280;font-size:.875rem}.tile .first-letter-container{float:left;margin-right:10px;position:relative;text-align:center}.tile .first-letter-container .first-letter{background-color:#428bca;border-radius:50%;color:#fff;font-size:1.375rem;height:40px;line-height:1.8em;margin:0 auto 5px;width:40px}.tile--disabled{opacity:.5;filter:Alpha(Opacity=50);background-image:none}.tile--disabled,.tile--disabled *{cursor:text!important}.tile .image-icon .icon{height:32px;width:32px;background-size:cover;background-repeat:no-repeat}\n"] }]
        }], propDecorators: { id: [{
                type: Input
            }], label: [{
                type: Input,
                args: [{ required: true }]
            }], description: [{
                type: Input
            }], iconClass: [{
                type: Input
            }], imageSource: [{
                type: Input
            }], imageAlt: [{
                type: Input
            }], disabled: [{
                type: Input
            }], tabIndex: [{
                type: Input
            }], thumbnail: [{
                type: Input
            }], clicked: [{
                type: Output
            }], onKeyDown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 