import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import { isNullOrUndefined } from '@seniorsistemas/angular-components/utils';
import * as i1 from '@seniorsistemas/angular-components/interactive-content';
import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';
import { CommonModule } from '@angular/common';

class GridMenuItemComponent {
    item;
    iconIsFromFontAwesome = false;
    clickedGridMenuItem = new EventEmitter();
    fontAwesomePrefix = 'fal';
    onClick() {
        if (this.disabled) {
            return;
        }
        this.item.action?.();
        this.clickedGridMenuItem.emit(this.item);
    }
    onMouseEnter() {
        if (this.disabled) {
            return;
        }
        this.fontAwesomePrefix = 'fas';
    }
    onMouseLeave() {
        if (this.disabled) {
            return;
        }
        this.fontAwesomePrefix = 'fal';
    }
    get iconFontAwesomeClassName() {
        const prefix = this.item.active ? 'fas' : this.fontAwesomePrefix;
        return `${prefix} ${this.item.icon}`;
    }
    get initialLetter() {
        let initialLetter = '';
        if (this.item.label) {
            const words = this.item.label.split(' ', 2);
            initialLetter = words[0].charAt(0).toUpperCase();
            if (words.length > 1) {
                initialLetter += words[1].charAt(0).toUpperCase();
            }
        }
        return initialLetter;
    }
    get disabled() {
        return typeof this.item?.disabled === 'function' ? !!this.item.disabled() : !!this.item?.disabled;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GridMenuItemComponent, selector: "s-grid-menu-item", inputs: { item: "item", iconIsFromFontAwesome: "iconIsFromFontAwesome" }, outputs: { clickedGridMenuItem: "clickedGridMenuItem" }, ngImport: i0, template: "@if (item) {\n    <button\n        class=\"icon-button\"\n        [class.icon-button-active]=\"item.active\"\n        [class.icon-button--disabled]=\"disabled\"\n        (sInteractiveContent)=\"onClick()\"\n        [disabled]=\"disabled\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        [class.icon-font-awesome]=\"iconIsFromFontAwesome\"\n        (mouseenter)=\"onMouseEnter()\"\n        (mouseleave)=\"onMouseLeave()\"\n    >\n        <div\n            class=\"icon-wrapper\"\n            [class.icon-image]=\"!iconIsFromFontAwesome\"\n        >\n            @if (item.icon) {\n                @if (iconIsFromFontAwesome) {\n                    <i [class]=\"iconFontAwesomeClassName\"> </i>\n                } @else {\n                    <span\n                        class=\"icon\"\n                        style=\"background-image: url('{{ item.icon }}');\"\n                    >\n                    </span>\n                }\n            } @else if (!item.icon) {\n                <span class=\"initials\">{{ initialLetter }}</span>\n            }\n        </div>\n        <span class=\"title\">{{ item.label }}</span>\n    </button>\n}\n", styles: [".icon-button{align-items:center;background-color:transparent;border:none;cursor:pointer;display:inline-flex;flex-direction:column;gap:12px;justify-content:center;padding:5px;transition:transform .3s ease-in-out;width:200px}.icon-button:not(.icon-button--disabled):hover .title,.icon-button:not(.icon-button--disabled):hover .initials{font-weight:700}.icon-button.icon-font-awesome .title{padding-bottom:1em}.icon-button.icon-font-awesome:not(.icon-button--disabled):hover{border-radius:10px;background-color:#dedce5}.icon-button.icon-font-awesome .icon-wrapper i{color:#009494}.icon-button .icon-wrapper{align-self:center;border-radius:10px;display:flex;height:64px;justify-content:center;overflow:hidden;padding:8px;width:64px;align-items:center;font-size:3em}.icon-button .icon-wrapper.icon-image{background-color:#dedce5}.icon-button .icon-wrapper .icon{background-position:center;background-repeat:no-repeat;background-size:cover;display:inline-block;height:100%;width:100%}.icon-button .icon-wrapper .initials{align-items:center;display:flex;font-family:Open Sans,sans-serif;font-size:20px;font-weight:700}.icon-button .title{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;font-family:Open Sans,sans-serif;font-size:14px;line-clamp:2;overflow:hidden;text-overflow:ellipsis;width:100%}.icon-button--disabled{cursor:default;opacity:.5}.icon-button:not(.icon-button--disabled):hover{transform:scale(1.05)}.icon-button-active{transform:scale(1.05);border-radius:10px;background-color:#dedce5}.icon-button-active .title,.icon-button-active .initials{font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridMenuItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-grid-menu-item', template: "@if (item) {\n    <button\n        class=\"icon-button\"\n        [class.icon-button-active]=\"item.active\"\n        [class.icon-button--disabled]=\"disabled\"\n        (sInteractiveContent)=\"onClick()\"\n        [disabled]=\"disabled\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        [class.icon-font-awesome]=\"iconIsFromFontAwesome\"\n        (mouseenter)=\"onMouseEnter()\"\n        (mouseleave)=\"onMouseLeave()\"\n    >\n        <div\n            class=\"icon-wrapper\"\n            [class.icon-image]=\"!iconIsFromFontAwesome\"\n        >\n            @if (item.icon) {\n                @if (iconIsFromFontAwesome) {\n                    <i [class]=\"iconFontAwesomeClassName\"> </i>\n                } @else {\n                    <span\n                        class=\"icon\"\n                        style=\"background-image: url('{{ item.icon }}');\"\n                    >\n                    </span>\n                }\n            } @else if (!item.icon) {\n                <span class=\"initials\">{{ initialLetter }}</span>\n            }\n        </div>\n        <span class=\"title\">{{ item.label }}</span>\n    </button>\n}\n", styles: [".icon-button{align-items:center;background-color:transparent;border:none;cursor:pointer;display:inline-flex;flex-direction:column;gap:12px;justify-content:center;padding:5px;transition:transform .3s ease-in-out;width:200px}.icon-button:not(.icon-button--disabled):hover .title,.icon-button:not(.icon-button--disabled):hover .initials{font-weight:700}.icon-button.icon-font-awesome .title{padding-bottom:1em}.icon-button.icon-font-awesome:not(.icon-button--disabled):hover{border-radius:10px;background-color:#dedce5}.icon-button.icon-font-awesome .icon-wrapper i{color:#009494}.icon-button .icon-wrapper{align-self:center;border-radius:10px;display:flex;height:64px;justify-content:center;overflow:hidden;padding:8px;width:64px;align-items:center;font-size:3em}.icon-button .icon-wrapper.icon-image{background-color:#dedce5}.icon-button .icon-wrapper .icon{background-position:center;background-repeat:no-repeat;background-size:cover;display:inline-block;height:100%;width:100%}.icon-button .icon-wrapper .initials{align-items:center;display:flex;font-family:Open Sans,sans-serif;font-size:20px;font-weight:700}.icon-button .title{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;font-family:Open Sans,sans-serif;font-size:14px;line-clamp:2;overflow:hidden;text-overflow:ellipsis;width:100%}.icon-button--disabled{cursor:default;opacity:.5}.icon-button:not(.icon-button--disabled):hover{transform:scale(1.05)}.icon-button-active{transform:scale(1.05);border-radius:10px;background-color:#dedce5}.icon-button-active .title,.icon-button-active .initials{font-weight:700}\n"] }]
        }], propDecorators: { item: [{
                type: Input,
                args: [{ required: true }]
            }], iconIsFromFontAwesome: [{
                type: Input
            }], clickedGridMenuItem: [{
                type: Output
            }] } });

/**
 * @description Componente de menu em grade que exibe uma coleção de itens como cards clicáveis.
 * Suporta seleção de item ativo e pode utilizar ícones do Font Awesome ou ícones padrão.
 *
 * @example
 * ```html
 * <s-grid-menu
 *   [items]="menuItems"
 *   [selectable]="true"
 *   [(selected)]="selectedItem"
 * />
 * ```
 *
 * @category Navegação
 */
class GridMenuComponent {
    previousGridMenuItemClicked;
    /**
     * @description Lista de itens exibidos no grid. Aceita um único item ou um array de `GridMenuItem`.
     * Valores nulos ou indefinidos resultam em uma lista vazia.
     */
    set items(items) {
        if (isNullOrUndefined(items)) {
            this.itemsArray = [];
        }
        else {
            this.itemsArray = Array.isArray(items) ? items : [items];
        }
    }
    /**
     * @description Quando `true`, utiliza classes de ícones do Font Awesome nos itens do grid.
     * Quando `false`, utiliza o sistema de ícones padrão do projeto.
     *
     * @default false
     */
    useFontAwesomeIcons = false;
    itemsArray = [];
    /**
     * @description Habilita o modo de seleção do grid. Quando `true`, permite que o usuário
     * clique em um item para selecioná-lo, marcando-o como ativo.
     *
     * @default false
     */
    selectable = false;
    /**
     * @description Item atualmente selecionado no grid. Usado em conjunto com `selectable = true`
     * e suporta two-way binding via `[(selected)]`.
     */
    selected;
    /**
     * @description Emitido quando o usuário seleciona um novo item no grid.
     * Retorna o `GridMenuItem` selecionado. Usado para two-way binding com `[(selected)]`.
     */
    selectedChange = new EventEmitter();
    ngOnChanges(changes) {
        if (changes['selected'] && changes['selected'].isFirstChange()) {
            if (this.selectable) {
                this.previousGridMenuItemClicked = this.selected;
                this.selected.active = true;
            }
        }
    }
    onClickGridMenuItem(gridMenuItem) {
        if (!this.selectable) {
            return;
        }
        if (this.previousGridMenuItemClicked) {
            this.previousGridMenuItemClicked.active = false;
        }
        gridMenuItem.active = !gridMenuItem.active;
        this.previousGridMenuItemClicked = gridMenuItem;
        this.selectedChange.next(gridMenuItem);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: GridMenuComponent, selector: "s-grid-menu", inputs: { items: "items", useFontAwesomeIcons: "useFontAwesomeIcons", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"grid-menu\">\n    @for (item of itemsArray; track $index) {\n        <s-grid-menu-item\n            [item]=\"item\"\n            [iconIsFromFontAwesome]=\"useFontAwesomeIcons\"\n            (clickedGridMenuItem)=\"onClickGridMenuItem($event)\"\n        ></s-grid-menu-item>\n    }\n</section>\n", styles: [".grid-menu{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,200px);justify-content:space-evenly}\n"], dependencies: [{ kind: "component", type: GridMenuItemComponent, selector: "s-grid-menu-item", inputs: ["item", "iconIsFromFontAwesome"], outputs: ["clickedGridMenuItem"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-grid-menu', template: "<section class=\"grid-menu\">\n    @for (item of itemsArray; track $index) {\n        <s-grid-menu-item\n            [item]=\"item\"\n            [iconIsFromFontAwesome]=\"useFontAwesomeIcons\"\n            (clickedGridMenuItem)=\"onClickGridMenuItem($event)\"\n        ></s-grid-menu-item>\n    }\n</section>\n", styles: [".grid-menu{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,200px);justify-content:space-evenly}\n"] }]
        }], propDecorators: { items: [{
                type: Input
            }], useFontAwesomeIcons: [{
                type: Input
            }], selectable: [{
                type: Input
            }], selected: [{
                type: Input
            }], selectedChange: [{
                type: Output
            }] } });

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

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

export { GridMenuComponent, GridMenuItemComponent, GridMenuModule };
//# sourceMappingURL=seniorsistemas-angular-components-grid-menu.mjs.map
