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

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, isStandalone: true, selector: "s-grid-menu-item", inputs: { item: "item", iconIsFromFontAwesome: "iconIsFromFontAwesome" }, outputs: { clickedGridMenuItem: "clickedGridMenuItem" }, ngImport: i0, template: "@if (item) {\n    <button\n        class=\"items-center bg-transparent border-0 inline-flex flex-col gap-3 justify-center p-[5px] transition-transform duration-300 ease-in-out w-[200px]\"\n        [ngClass]=\"{\n            'cursor-pointer group hover:scale-105': !disabled,\n            'cursor-default opacity-50': disabled,\n            'scale-105 rounded-xxbig bg-grayscale-20': item.active,\n            'hover:bg-grayscale-20 hover:rounded-xxbig': iconIsFromFontAwesome && !disabled\n        }\"\n        (sInteractiveContent)=\"onClick()\"\n        [disabled]=\"disabled\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (mouseenter)=\"onMouseEnter()\"\n        (mouseleave)=\"onMouseLeave()\"\n    >\n        <div\n            class=\"self-center rounded-xxbig flex h-16 justify-center overflow-hidden p-2 w-16 items-center text-[3em]\"\n            [class.bg-grayscale-20]=\"!iconIsFromFontAwesome\"\n        >\n            @if (item.icon) {\n                @if (iconIsFromFontAwesome) {\n                    <i [ngClass]=\"iconFontAwesomeClassName + ' text-[#009494]'\"> </i>\n                } @else {\n                    <span\n                        class=\"bg-center bg-no-repeat bg-cover inline-block h-full w-full\"\n                        style=\"background-image: url('{{ item.icon }}');\"\n                    >\n                    </span>\n                }\n            } @else if (!item.icon) {\n                <span class=\"items-center flex font-open-sans text-xl font-bold group-hover:font-bold\">{{ initialLetter }}</span>\n            }\n        </div>\n        <span\n            class=\"font-open-sans text-sm line-clamp-2 overflow-hidden text-ellipsis w-full group-hover:font-bold\"\n            [style.paddingBottom]=\"iconIsFromFontAwesome ? '1em' : null\"\n        >{{ item.label }}</span>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridMenuItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-grid-menu-item', standalone: true, imports: [InteractiveContentDirective, NgClass], template: "@if (item) {\n    <button\n        class=\"items-center bg-transparent border-0 inline-flex flex-col gap-3 justify-center p-[5px] transition-transform duration-300 ease-in-out w-[200px]\"\n        [ngClass]=\"{\n            'cursor-pointer group hover:scale-105': !disabled,\n            'cursor-default opacity-50': disabled,\n            'scale-105 rounded-xxbig bg-grayscale-20': item.active,\n            'hover:bg-grayscale-20 hover:rounded-xxbig': iconIsFromFontAwesome && !disabled\n        }\"\n        (sInteractiveContent)=\"onClick()\"\n        [disabled]=\"disabled\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        (mouseenter)=\"onMouseEnter()\"\n        (mouseleave)=\"onMouseLeave()\"\n    >\n        <div\n            class=\"self-center rounded-xxbig flex h-16 justify-center overflow-hidden p-2 w-16 items-center text-[3em]\"\n            [class.bg-grayscale-20]=\"!iconIsFromFontAwesome\"\n        >\n            @if (item.icon) {\n                @if (iconIsFromFontAwesome) {\n                    <i [ngClass]=\"iconFontAwesomeClassName + ' text-[#009494]'\"> </i>\n                } @else {\n                    <span\n                        class=\"bg-center bg-no-repeat bg-cover inline-block h-full w-full\"\n                        style=\"background-image: url('{{ item.icon }}');\"\n                    >\n                    </span>\n                }\n            } @else if (!item.icon) {\n                <span class=\"items-center flex font-open-sans text-xl font-bold group-hover:font-bold\">{{ initialLetter }}</span>\n            }\n        </div>\n        <span\n            class=\"font-open-sans text-sm line-clamp-2 overflow-hidden text-ellipsis w-full group-hover:font-bold\"\n            [style.paddingBottom]=\"iconIsFromFontAwesome ? '1em' : null\"\n        >{{ item.label }}</span>\n    </button>\n}\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, isStandalone: true, selector: "s-grid-menu", inputs: { items: "items", useFontAwesomeIcons: "useFontAwesomeIcons", selectable: "selectable", selected: "selected" }, outputs: { selectedChange: "selectedChange" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"grid gap-5 [grid-template-columns:repeat(auto-fill,200px)] justify-evenly\">\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", 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', standalone: true, imports: [GridMenuItemComponent], template: "<section class=\"grid gap-5 [grid-template-columns:repeat(auto-fill,200px)] justify-evenly\">\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" }]
        }], 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, imports: [GridMenuItemComponent, GridMenuComponent], exports: [GridMenuItemComponent, GridMenuComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridMenuModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: GridMenuModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [GridMenuItemComponent, GridMenuComponent],
                    exports: [GridMenuItemComponent, GridMenuComponent],
                }]
        }] });

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

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