import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@seniorsistemas/angular-components/interactive-content";
export 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
            }] } });
//# sourceMappingURL=data:application/json;base64, 