import * as i0 from '@angular/core';
import { EventEmitter, inject, booleanAttribute, Output, Input, HostBinding, Component } from '@angular/core';
import * as i2 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';

/**
 * A clickable button component that displays only an icon without text. Provides visual feedback states and supports various sizing and styling options. Commonly used in toolbars, navigation bars, and compact UI layouts where space is limited.
 *
 * @usageNotes
 * ### Basic icon button
 * ```html
 * <eui-icon-button
 *   icon="edit"
 *   ariaLabel="Edit item"
 *   (buttonClick)="onEdit()">
 * </eui-icon-button>
 * ```
 *
 * ### With state variant
 * ```html
 * <eui-icon-button
 *   icon="delete"
 *   euiDanger
 *   size="l"
 *   ariaLabel="Delete item">
 * </eui-icon-button>
 * ```
 *
 * ### Accessibility
 * - Always provide descriptive `ariaLabel` for screen readers
 * - Button is keyboard accessible via Tab and Enter/Space
 * - Focus states are clearly visible
 *
 * ### Notes
 * - Use `hasNoPadding` for compact layouts or icon-only toolbars
 * - Apply `euiRounded` for circular button shape
 * - Set `euiDisabled` to prevent interaction
 * - Choose between `hasFocusHoverColor` and `hasFocusHoverBg` for hover effects
 */
class EuiIconButtonComponent {
    constructor() {
        /**
         * Controls the icon dimensions. Default: 'm'
         */
        this.size = 'm';
        /**
         * Accessible label for screen readers describing the button's purpose.
         * @default 'eUI Icon button'
         */
        this.ariaLabel = 'eUI Icon button';
        /**
         * Tab order position for keyboard navigation. Set to -1 to remove from tab sequence. Default: 0
         */
        this.tabindex = 0;
        /**
         * Removes internal padding from the button, allowing the icon to fill the entire button area. Default: false
         */
        this.hasNoPadding = false;
        /**
         * Enables hover state that expands beyond the button boundaries, typically used in dense layouts. Default: false
         */
        this.hasOverflowHover = false;
        /**
         * Applies color change on focus and hover states instead of background change. Mutually exclusive with hasFocusHoverBg. Default: false
         */
        this.hasFocusHoverColor = false;
        /**
         * Applies background color change on focus and hover states. Automatically disabled when hasFocusHoverColor is true. Default: true
         */
        this.hasFocusHoverBg = true;
        /**
         * Applies rounded corners to the button shape instead of default square corners. Default: false
         */
        this.euiRounded = false;
        /**
         * Disables the button, preventing interaction and applying disabled styling. Default: false
         */
        this.euiDisabled = false;
        /**
         * Emitted when the button is clicked. Payload contains the native click Event object.
         */
        this.buttonClick = new EventEmitter();
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-icon-button'),
            this.hasNoPadding ? 'eui-icon-button--has-no-padding' : '',
            this.hasOverflowHover ? 'eui-icon-button--has-overflow-hover' : '',
            this.hasFocusHoverColor ? 'eui-icon-button--has-focus-hover-color' : '',
            this.hasFocusHoverBg ? 'eui-icon-button--has-focus-hover-bg' : '',
            this.euiRounded ? 'eui-icon-button--rounded' : '',
            this.euiDisabled ? 'eui-icon-button--disabled' : '',
        ]
            .join(' ')
            .trim();
    }
    onClick(event) {
        this.buttonClick.emit(event);
    }
    ngOnInit() {
        if (this.hasFocusHoverColor) {
            this.hasFocusHoverBg = false;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", type: EuiIconButtonComponent, isStandalone: true, selector: "eui-icon-button", inputs: { icon: "icon", iconUrl: "iconUrl", fillColor: "fillColor", size: "size", ariaLabel: "ariaLabel", tabindex: "tabindex", hasNoPadding: ["hasNoPadding", "hasNoPadding", booleanAttribute], hasOverflowHover: ["hasOverflowHover", "hasOverflowHover", booleanAttribute], hasFocusHoverColor: ["hasFocusHoverColor", "hasFocusHoverColor", booleanAttribute], hasFocusHoverBg: ["hasFocusHoverBg", "hasFocusHoverBg", booleanAttribute], euiRounded: ["euiRounded", "euiRounded", booleanAttribute], euiDisabled: ["euiDisabled", "euiDisabled", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant", "euiSizeS", "euiSizeS"] }], ngImport: i0, template: "<button class=\"eui-icon-button__button\"\n    type=\"button\"\n    (click)=\"onClick($event)\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.tabindex]=\"tabindex\">\n    <eui-icon-svg [icon]=\"icon\" [iconUrl]=\"iconUrl\" [fillColor]=\"fillColor\" [size]=\"size\" class=\"eui-icon-button__button-icon\">\n        <ng-content select=\"eui-badge\"></ng-content>\n    </eui-icon-svg>\n</button>\n", styles: [".eui-21 :host.eui-icon-button{--_hover-color: var(--eui-c-secondary-surface-light-hover);--_color: var(--eui-c-secondary)}.eui-21 :host.eui-icon-button--primary{--_hover-color: var(--eui-c-primary-surface-light-hover);--_color: var(--eui-c-primary)}.eui-21 :host.eui-icon-button--secondary{--_hover-color: var(--eui-c-secondary-surface-light-hover);--_color: var(--eui-c-secondary)}.eui-21 :host.eui-icon-button--info{--_hover-color: var(--eui-c-info-surface-light-hover);--_color: var(--eui-c-info)}.eui-21 :host.eui-icon-button--success{--_hover-color: var(--eui-c-success-surface-light-hover);--_color: var(--eui-c-success)}.eui-21 :host.eui-icon-button--warning{--_hover-color: var(--eui-c-warning-surface-light-hover);--_color: var(--eui-c-warning)}.eui-21 :host.eui-icon-button--danger{--_hover-color: var(--eui-c-danger-surface-light-hover);--_color: var(--eui-c-danger)}.eui-21 :host.eui-icon-button{display:inline-flex}.eui-21 :host.eui-icon-button .eui-icon-button__button{background-color:transparent;border:var(--eui-bw-none);cursor:pointer;align-items:center;display:flex;justify-content:center;position:relative;padding:var(--eui-s-xs)}.eui-21 :host.eui-icon-button .eui-icon-button__button:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-icon-button .eui-icon-button__button ::ng-deep .eui-icon-svg svg{fill:var(--_color);color:var(--_color)}.eui-21 :host.eui-icon-button--size-s .eui-icon-button__button{padding:var(--eui-s-3xs)}.eui-21 :host.eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover{background-color:var(--_hover-color)}.eui-21 :host.eui-icon-button--has-no-padding .eui-icon-button__button{padding:0}.eui-21 :host.eui-icon-button--has-focus-hover-color .eui-icon-button__button{opacity:var(--eui-o-75)}.eui-21 :host.eui-icon-button--has-focus-hover-color .eui-icon-button__button:hover{opacity:var(--eui-o-100)}.eui-21 :host.eui-icon-button--rounded .eui-icon-button__button{border-radius:var(--eui-br-max)}.eui-21 :host.eui-icon-button--disabled{cursor:not-allowed}.eui-21 :host.eui-icon-button--disabled .eui-icon-button__button{pointer-events:none;background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-21 :host.eui-icon-button--has-overflow-hover{position:relative}.eui-21 :host.eui-icon-button--has-overflow-hover .eui-icon-button__button{padding:0}.eui-21 :host.eui-icon-button--has-overflow-hover:hover:before{background-color:var(--_hover-color);content:\"\";display:block;height:var(--eui-s-3xl);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--eui-s-3xl)}.eui-21 :host.eui-icon-button--rounded.eui-icon-button--has-overflow-hover:hover:before{border-radius:var(--eui-br-max)}\n"], dependencies: [{ kind: "component", type: i2.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiIconButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-icon-button', hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                                'euiSizeS',
                            ],
                        },
                    ], imports: [...EUI_ICON], template: "<button class=\"eui-icon-button__button\"\n    type=\"button\"\n    (click)=\"onClick($event)\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.tabindex]=\"tabindex\">\n    <eui-icon-svg [icon]=\"icon\" [iconUrl]=\"iconUrl\" [fillColor]=\"fillColor\" [size]=\"size\" class=\"eui-icon-button__button-icon\">\n        <ng-content select=\"eui-badge\"></ng-content>\n    </eui-icon-svg>\n</button>\n", styles: [".eui-21 :host.eui-icon-button{--_hover-color: var(--eui-c-secondary-surface-light-hover);--_color: var(--eui-c-secondary)}.eui-21 :host.eui-icon-button--primary{--_hover-color: var(--eui-c-primary-surface-light-hover);--_color: var(--eui-c-primary)}.eui-21 :host.eui-icon-button--secondary{--_hover-color: var(--eui-c-secondary-surface-light-hover);--_color: var(--eui-c-secondary)}.eui-21 :host.eui-icon-button--info{--_hover-color: var(--eui-c-info-surface-light-hover);--_color: var(--eui-c-info)}.eui-21 :host.eui-icon-button--success{--_hover-color: var(--eui-c-success-surface-light-hover);--_color: var(--eui-c-success)}.eui-21 :host.eui-icon-button--warning{--_hover-color: var(--eui-c-warning-surface-light-hover);--_color: var(--eui-c-warning)}.eui-21 :host.eui-icon-button--danger{--_hover-color: var(--eui-c-danger-surface-light-hover);--_color: var(--eui-c-danger)}.eui-21 :host.eui-icon-button{display:inline-flex}.eui-21 :host.eui-icon-button .eui-icon-button__button{background-color:transparent;border:var(--eui-bw-none);cursor:pointer;align-items:center;display:flex;justify-content:center;position:relative;padding:var(--eui-s-xs)}.eui-21 :host.eui-icon-button .eui-icon-button__button:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-icon-button .eui-icon-button__button ::ng-deep .eui-icon-svg svg{fill:var(--_color);color:var(--_color)}.eui-21 :host.eui-icon-button--size-s .eui-icon-button__button{padding:var(--eui-s-3xs)}.eui-21 :host.eui-icon-button--has-focus-hover-bg .eui-icon-button__button:hover{background-color:var(--_hover-color)}.eui-21 :host.eui-icon-button--has-no-padding .eui-icon-button__button{padding:0}.eui-21 :host.eui-icon-button--has-focus-hover-color .eui-icon-button__button{opacity:var(--eui-o-75)}.eui-21 :host.eui-icon-button--has-focus-hover-color .eui-icon-button__button:hover{opacity:var(--eui-o-100)}.eui-21 :host.eui-icon-button--rounded .eui-icon-button__button{border-radius:var(--eui-br-max)}.eui-21 :host.eui-icon-button--disabled{cursor:not-allowed}.eui-21 :host.eui-icon-button--disabled .eui-icon-button__button{pointer-events:none;background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-21 :host.eui-icon-button--has-overflow-hover{position:relative}.eui-21 :host.eui-icon-button--has-overflow-hover .eui-icon-button__button{padding:0}.eui-21 :host.eui-icon-button--has-overflow-hover:hover:before{background-color:var(--_hover-color);content:\"\";display:block;height:var(--eui-s-3xl);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--eui-s-3xl)}.eui-21 :host.eui-icon-button--rounded.eui-icon-button--has-overflow-hover:hover:before{border-radius:var(--eui-br-max)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], icon: [{
                type: Input
            }], iconUrl: [{
                type: Input
            }], fillColor: [{
                type: Input
            }], size: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], tabindex: [{
                type: Input
            }], hasNoPadding: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasOverflowHover: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasFocusHoverColor: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], hasFocusHoverBg: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiRounded: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], buttonClick: [{
                type: Output
            }] } });

const EUI_ICON_BUTTON = [
    EuiIconButtonComponent,
];
// export { EuiIconButtonComponent as EuiIconButton } from './eui-icon-button.component';

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

export { EUI_ICON_BUTTON, EuiIconButtonComponent };
//# sourceMappingURL=eui-components-eui-icon-button.mjs.map
