import * as i0 from '@angular/core';
import { inject, ElementRef, EventEmitter, Component, Input, Output, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

/**
 * @description Botão composto com ação principal e dropdown de opções adicionais.
 * Ao clicar no botão principal emite `buttonClicked`; ao clicar no ícone de seta
 * abre/fecha o dropdown com a lista de `options`.
 *
 * @example
 * ```html
 * <s-split-button
 *   label="Salvar"
 *   iconClass="fas fa-save"
 *   [options]="menuOpcoes"
 *   (buttonClicked)="onSalvar()" />
 * ```
 *
 * @category Inputs
 */
class SplitButtonComponent {
    _eRef = inject(ElementRef);
    /** @description Desabilita o botão principal e o dropdown. @default false */
    disabled = false;
    /** @description Classe do ícone exibido no botão principal. Campo obrigatório. */
    iconClass;
    /** @description Rótulo do botão principal. Campo obrigatório. */
    label;
    /** @description Estilo visual do botão (`'primary'` ou `'secondary'`). @default 'primary' */
    type = 'primary';
    /** @description Lista de opções exibidas no dropdown. Campo obrigatório. */
    options;
    /** @description Emitido quando o usuário clica no botão principal (não no dropdown). */
    buttonClicked = new EventEmitter();
    open = false;
    onClickout(event) {
        if (!this._eRef.nativeElement.contains(event.target)) {
            this._closeDropdown();
        }
    }
    onButtonClick() {
        if (!this.disabled) {
            this.buttonClicked.emit();
            this._closeDropdown();
        }
    }
    onDropdownClick() {
        if (!this.disabled) {
            this.open = !this.open;
        }
    }
    onOptionClick(option) {
        option.action?.();
        this._closeDropdown();
    }
    _closeDropdown() {
        this.open = false;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SplitButtonComponent, selector: "s-split-button", inputs: { disabled: "disabled", iconClass: "iconClass", label: "label", type: "type", options: "options" }, outputs: { buttonClicked: "buttonClicked" }, host: { listeners: { "document:click": "onClickout($event)" } }, ngImport: i0, template: "<div\n    class=\"split-button\"\n    [ngClass]=\"{\n        'split-button--primary': type === 'primary',\n        'split-button--secondary': type === 'secondary',\n        'split-button--default': type === 'default',\n        'split-button--disabled': disabled,\n    }\"\n>\n    <button\n        class=\"button\"\n        (click)=\"onButtonClick()\"\n    >\n        <span\n            class=\"button__icon\"\n            [ngClass]=\"iconClass\"\n        ></span>\n        <span class=\"button__label\">{{ label }}</span>\n    </button>\n    <button\n        class=\"dropdown\"\n        (click)=\"onDropdownClick()\"\n    >\n        <span\n            class=\"dropdown__icon\"\n            [ngClass]=\"{\n                far: true,\n                'fa-chevron-down': !open,\n                'fa-chevron-up': open,\n            }\"\n        >\n        </span>\n    </button>\n</div>\n\n@if (this.open) {\n    <ul class=\"options\">\n        @for (option of options; track option.title) {\n            <li (click)=\"onOptionClick(option)\">\n                {{ option.title }}\n            </li>\n        }\n    </ul>\n}\n", styles: [".split-button{display:flex;-webkit-user-select:none;user-select:none;max-height:35px}.split-button .button{align-items:center;border:none;border-radius:4px 0 0 4px;display:flex;padding:8px 8px 8px 12px;transition:all .3s ease-in-out}.split-button .button__icon{font-size:16px;padding:0 4px}.split-button .button__title{font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;line-height:21px}.split-button .dropdown{align-items:center;border:none;border-left:1px solid #608190;border-radius:0 4px 4px 0;display:flex;justify-content:center;padding:12px 8px;transition:all .3s ease-in-out}.split-button--disabled{opacity:.5}.split-button--primary .button,.split-button--primary .dropdown{background-color:#428bca;color:#fff}.split-button--primary:not(.split-button--primary--disabled) .button,.split-button--primary:not(.split-button--primary--disabled) .dropdown{cursor:pointer}.split-button--primary:not(.split-button--primary--disabled) .button:hover,.split-button--primary:not(.split-button--primary--disabled) .dropdown:hover{background-color:#063951}.split-button--secondary .button,.split-button--secondary .dropdown{background-color:#7892a1;color:#fff}.split-button--secondary:not(.split-button--secondary--disabled) .button,.split-button--secondary:not(.split-button--secondary--disabled) .dropdown{cursor:pointer}.split-button--secondary:not(.split-button--secondary--disabled) .button:hover,.split-button--secondary:not(.split-button--secondary--disabled) .dropdown:hover{background-color:#697882}.split-button--default .button,.split-button--default .dropdown{background-color:unset;border:1px solid #d8d8d8;color:#333}.split-button--default:not(.split-button--default--disabled) .button,.split-button--default:not(.split-button--default--disabled) .dropdown{cursor:pointer}.split-button--default:not(.split-button--default--disabled) .button:hover,.split-button--default:not(.split-button--default--disabled) .dropdown:hover{background-color:#d8d8d8}.options{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px #00000040;display:inline-block;list-style:none;margin:2px 0;padding:8px 0;position:absolute;-webkit-user-select:none;user-select:none;z-index:10}.options li{color:#333;cursor:pointer;font-family:Open Sans,sans-serif;font-weight:400;font-size:14px;line-height:21px;padding:8px 16px}.options li:hover{background-color:#d8d8d8}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SplitButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 's-split-button', template: "<div\n    class=\"split-button\"\n    [ngClass]=\"{\n        'split-button--primary': type === 'primary',\n        'split-button--secondary': type === 'secondary',\n        'split-button--default': type === 'default',\n        'split-button--disabled': disabled,\n    }\"\n>\n    <button\n        class=\"button\"\n        (click)=\"onButtonClick()\"\n    >\n        <span\n            class=\"button__icon\"\n            [ngClass]=\"iconClass\"\n        ></span>\n        <span class=\"button__label\">{{ label }}</span>\n    </button>\n    <button\n        class=\"dropdown\"\n        (click)=\"onDropdownClick()\"\n    >\n        <span\n            class=\"dropdown__icon\"\n            [ngClass]=\"{\n                far: true,\n                'fa-chevron-down': !open,\n                'fa-chevron-up': open,\n            }\"\n        >\n        </span>\n    </button>\n</div>\n\n@if (this.open) {\n    <ul class=\"options\">\n        @for (option of options; track option.title) {\n            <li (click)=\"onOptionClick(option)\">\n                {{ option.title }}\n            </li>\n        }\n    </ul>\n}\n", styles: [".split-button{display:flex;-webkit-user-select:none;user-select:none;max-height:35px}.split-button .button{align-items:center;border:none;border-radius:4px 0 0 4px;display:flex;padding:8px 8px 8px 12px;transition:all .3s ease-in-out}.split-button .button__icon{font-size:16px;padding:0 4px}.split-button .button__title{font-family:Open Sans,sans-serif;font-size:14px;font-weight:400;line-height:21px}.split-button .dropdown{align-items:center;border:none;border-left:1px solid #608190;border-radius:0 4px 4px 0;display:flex;justify-content:center;padding:12px 8px;transition:all .3s ease-in-out}.split-button--disabled{opacity:.5}.split-button--primary .button,.split-button--primary .dropdown{background-color:#428bca;color:#fff}.split-button--primary:not(.split-button--primary--disabled) .button,.split-button--primary:not(.split-button--primary--disabled) .dropdown{cursor:pointer}.split-button--primary:not(.split-button--primary--disabled) .button:hover,.split-button--primary:not(.split-button--primary--disabled) .dropdown:hover{background-color:#063951}.split-button--secondary .button,.split-button--secondary .dropdown{background-color:#7892a1;color:#fff}.split-button--secondary:not(.split-button--secondary--disabled) .button,.split-button--secondary:not(.split-button--secondary--disabled) .dropdown{cursor:pointer}.split-button--secondary:not(.split-button--secondary--disabled) .button:hover,.split-button--secondary:not(.split-button--secondary--disabled) .dropdown:hover{background-color:#697882}.split-button--default .button,.split-button--default .dropdown{background-color:unset;border:1px solid #d8d8d8;color:#333}.split-button--default:not(.split-button--default--disabled) .button,.split-button--default:not(.split-button--default--disabled) .dropdown{cursor:pointer}.split-button--default:not(.split-button--default--disabled) .button:hover,.split-button--default:not(.split-button--default--disabled) .dropdown:hover{background-color:#d8d8d8}.options{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px #00000040;display:inline-block;list-style:none;margin:2px 0;padding:8px 0;position:absolute;-webkit-user-select:none;user-select:none;z-index:10}.options li{color:#333;cursor:pointer;font-family:Open Sans,sans-serif;font-weight:400;font-size:14px;line-height:21px;padding:8px 16px}.options li:hover{background-color:#d8d8d8}\n"] }]
        }], propDecorators: { disabled: [{
                type: Input
            }], iconClass: [{
                type: Input,
                args: [{ required: true }]
            }], label: [{
                type: Input,
                args: [{ required: true }]
            }], type: [{
                type: Input
            }], options: [{
                type: Input,
                args: [{ required: true }]
            }], buttonClicked: [{
                type: Output
            }], onClickout: [{
                type: HostListener,
                args: ['document:click', ['$event']]
            }] } });

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

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

export { SplitButtonComponent, SplitButtonModule };
//# sourceMappingURL=seniorsistemas-angular-components-split-button.mjs.map
