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

/**
 * @description
 * Chip button component that provides clickable chip-styled buttons for triggering actions.
 * Similar to eui-chip but designed specifically for button interactions rather than display or removal.
 * Supports color variants, sizes, and filled/outline styles for various use cases.
 * Emits buttonClick event when clicked, making it ideal for filters, toggles, and action triggers.
 *
 * @usageNotes
 * #### Basic chip button
 * ```html
 * <eui-chip-button (buttonClick)="onChipClick($event)">
 *   Click me
 * </eui-chip-button>
 * ```
 *
 * #### Chip buttons with variants
 * ```html
 * <eui-chip-button euiPrimary [isFilled]="true">
 *   Primary
 * </eui-chip-button>
 * <eui-chip-button euiSuccess>
 *   Success
 * </eui-chip-button>
 * ```
 *
 * #### Filter chips
 * ```html
 * <eui-chip-button
 *   id="filter-active"
 *   [isFilled]="isActive"
 *   (buttonClick)="toggleFilter($event)">
 *   Active
 * </eui-chip-button>
 * ```
 *
 * #### With tooltip
 * ```html
 * <eui-chip-button
 *   euiTooltip="Click to apply filter"
 *   tooltipMessage="Filter by category">
 *   Category
 * </eui-chip-button>
 * ```
 *
 * #### Size variants
 * ```html
 * <eui-chip-button euiSizeS>Small</eui-chip-button>
 * <eui-chip-button>Default</eui-chip-button>
 * ```
 *
 * ```ts
 * onChipClick(id: string | number): void {
 *   console.log('Chip button clicked:', id);
 * }
 *
 * toggleFilter(id: string | number): void {
 *   this.isActive = !this.isActive;
 * }
 * ```
 *
 * ### Accessibility
 * - Native button semantics for keyboard accessibility (Enter/Space)
 * - Focus visible by default for keyboard navigation
 * - Disabled state prevents interaction and is announced to screen readers
 * - Color variants provide visual meaning supplemented by text labels
 * - tooltipMessage provides additional context on hover
 * - Ensure descriptive labels for screen reader users
 *
 * ### Notes
 * - Can be used as element (eui-chip-button) or attribute (span[euiChipButton], li[euiChipButton])
 * - Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger
 * - Size variants: euiSizeS, default (medium)
 * - isFilled applies solid background color instead of outline
 * - euiOutline applies outline/ghost styling
 * - euiDisabled disables button interaction
 * - buttonClick event emits the chip's id when clicked
 * - id property used for identification in click events
 * - euiInternalId for internal tracking purposes
 * - tooltipMessage displays tooltip on hover
 * - Different from eui-chip: designed for actions, not display/removal
 * - Commonly used for filters, category selection, and toggleable options
 * - Does not support removal functionality (use eui-chip with isChipRemovable instead)
 */
class EuiChipButtonComponent {
    constructor() {
        /**
         * Sets the `data-e2e` attribute for the host element.
         *
         * @default 'eui-chip-button'
         */
        this.e2eAttr = 'eui-chip';
        /**
         * Sets the euiInternalId of the chip.
         *
         * @default null
         */
        this.euiInternalId = null;
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        this.buttonClick = new EventEmitter();
        /**
         * Wether the chip is filled with color.
         *
         * @default false
         */
        this.isFilled = false;
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the component based on its current state.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-chip-button'),
            this.isFilled ? 'eui-chip-button--filled' : '',
        ].join(' ').trim();
    }
    onClick() {
        this.buttonClick.emit(this.id);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiChipButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", type: EuiChipButtonComponent, isStandalone: true, selector: "eui-chip-button, span[euiChipButton], li[euiChipButton]", inputs: { e2eAttr: "e2eAttr", euiInternalId: "euiInternalId", tooltipMessage: "tooltipMessage", id: "id", isFilled: ["isFilled", "isFilled", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant", "euiSizeS", "euiSizeS", "euiSizeVariant", "euiSizeVariant", "euiOutline", "euiOutline", "euiDisabled", "euiDisabled"] }], ngImport: i0, template: "<button class=\"eui-chip-button-wrapper\" (click)=\"onClick()\">\n    <div class=\"eui-chip-button__content-container\" #chipLabel>\n        <ng-content></ng-content>\n    </div>\n</button>\n", styles: [".eui-21 :host.eui-chip-button{--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_close-hover-color: var(--eui-c-secondary-surface-light-hover);--_border-outline-color: var(--eui-c-secondary-border);--_border-color: var(--eui-c-secondary-border);--_size-s-font: var(--eui-f-s);--_size-m-font: var(--eui-f-m)}.eui-21 :host.eui-chip-button--primary{--_bg-color: var(--eui-c-primary-surface-light);--_color: var(--eui-c-primary-on-surface-light);--_close-hover-color: var(--eui-c-primary-surface-light-hover);--_border-outline-color: var(--eui-c-primary-border);--_border-color: var(--eui-c-primary-border-light)}.eui-21 :host.eui-chip-button--secondary{--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_close-hover-color: var(--eui-c-secondary-surface-light-hover);--_border-outline-color: var(--eui-c-secondary-border);--_border-color: var(--eui-c-secondary-border)}.eui-21 :host.eui-chip-button--info{--_bg-color: var(--eui-c-info-surface-light);--_color: var(--eui-c-info-on-surface-light);--_close-hover-color: var(--eui-c-info-surface-light-hover);--_border-outline-color: var(--eui-c-info-border);--_border-color: var(--eui-c-info-border-light)}.eui-21 :host.eui-chip-button--success{--_bg-color: var(--eui-c-success-surface-light);--_color: var(--eui-c-success-on-surface-light);--_close-hover-color: var(--eui-c-success-surface-light-hover);--_border-outline-color: var(--eui-c-success-border);--_border-color: var(--eui-c-success-border-light)}.eui-21 :host.eui-chip-button--warning{--_bg-color: var(--eui-c-warning-surface-light);--_color: var(--eui-c-warning-on-surface-light);--_close-hover-color: var(--eui-c-warning-surface-light-hover);--_border-outline-color: var(--eui-c-warning-border);--_border-color: var(--eui-c-warning-border-light)}.eui-21 :host.eui-chip-button--danger{--_bg-color: var(--eui-c-danger-surface-light);--_color: var(--eui-c-danger-on-surface-light);--_close-hover-color: var(--eui-c-danger-surface-light-hover);--_border-outline-color: var(--eui-c-danger-border);--_border-color: var(--eui-c-danger-border-light)}.eui-21 :host.eui-chip-button--filled.eui-chip--primary{--_bg-color: var(--eui-c-primary-surface);--_color: var(--eui-c-primary-on-surface);--_icon-color: var(--eui-c-primary-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-primary-surface-hover)}.eui-21 :host.eui-chip-button--filled.eui-chip--secondary{--_bg-color: var(--eui-c-secondary-surface-medium);--_color: var(--eui-c-secondary-on-surface-medium);--_icon-color: var(--eui-c-secondary-on-surface-medium);--_border-color: transparent;--_close-hover-color: var(--eui-c-secondary-surface-medium-hover)}.eui-21 :host.eui-chip-button--filled.eui-chip--info{--_bg-color: var(--eui-c-info-surface);--_color: var(--eui-c-info-on-surface);--_icon-color: var(--eui-c-info-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-info-surface-hover)}.eui-21 :host.eui-chip-button--filled.eui-chip--success{--_bg-color: var(--eui-c-success-surface);--_color: var(--eui-c-success-on-surface);--_icon-color: var(--eui-c-success-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-success-surface-hover)}.eui-21 :host.eui-chip-button--filled.eui-chip--warning{--_bg-color: var(--eui-c-warning-surface);--_color: var(--eui-c-warning-on-surface);--_icon-color: var(--eui-c-warning-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-warning-surface-hover)}.eui-21 :host.eui-chip-button--filled.eui-chip--danger{--_bg-color: var(--eui-c-danger-surface);--_color: var(--eui-c-danger-on-surface);--_icon-color: var(--eui-c-danger-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-danger-surface-hover)}.eui-21 :host.eui-chip-button{align-items:center;border-radius:calc(2 * var(--eui-br-l));display:inline-flex;position:relative;font:var(--_size-m-font);outline:var(--eui-bw-xs) solid var(--_border-color);outline-offset:-1px;cursor:pointer}.eui-21 :host.eui-chip-button .eui-chip-button-wrapper{border:none;border-radius:calc(2 * var(--eui-br-l));background:transparent;min-height:calc(var(--eui-s-m) * 2);padding:0 var(--eui-s-s)}.eui-21 :host.eui-chip-button .eui-chip-button-wrapper:focus:not([readonly]){outline:var(--eui-bw-s) solid var(--eui-c-primary-border-light)!important;outline-offset:1px!important;border-radius:var(--eui-br-max)!important}.eui-21 :host.eui-chip-button .eui-chip-button-wrapper,.eui-21 :host.eui-chip-button .eui-chip-button__content-container{display:flex;align-items:center;gap:var(--eui-s-xs);cursor:pointer}.eui-21 :host.eui-chip-button{background-color:var(--_bg-color);color:var(--_color)}.eui-21 :host.eui-chip-button ::ng-deep .eui-icon-svg:not(.eui-chip__close) svg{fill:var(--_color);color:var(--_color)}.eui-21 :host.eui-chip-button.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-21 :host.eui-chip-button--outline{background-color:var(--eui-c-surface-container);outline-color:var(--_border-outline-color)}.eui-21 :host.eui-chip-button--size-s{font:var(--_size-s-font);min-height:var(--eui-s-xl);padding:0 var(--eui-s-xs)}.eui-21 :host.eui-chip-button--size-s .eui-chip-button-wrapper,.eui-21 :host.eui-chip-button--size-s .eui-chip-button__content-container{gap:var(--eui-s-3xs)}.eui-21 :host.eui-chip-button--size-s .eui-chip-button-wrapper ::ng-deep svg,.eui-21 :host.eui-chip-button--size-s .eui-chip-button__content-container ::ng-deep svg{height:var(--eui-is-s);width:var(--eui-is-s)}.eui-21 :host.eui-chip-button--size-s .eui-chip-button-wrapper ::ng-deep .eui-flag-icon,.eui-21 :host.eui-chip-button--size-s .eui-chip-button__content-container ::ng-deep .eui-flag-icon{height:var(--eui-is-xs);min-width:calc(1.3333333 * var(--eui-is-xs));width:calc(1.3333333 * var(--eui-is-xs))}.eui-21 :host.eui-chip-button--size-s .eui-chip-button-wrapper ::ng-deep .eui-flag-icon.eui-flag-icon--rounded,.eui-21 :host.eui-chip-button--size-s .eui-chip-button__content-container ::ng-deep .eui-flag-icon.eui-flag-icon--rounded{height:var(--eui-is-s);width:var(--eui-is-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiChipButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-chip-button, span[euiChipButton], li[euiChipButton]', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_ICON,
                        ...EUI_ICON_BUTTON,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                                'euiSizeS',
                                'euiSizeVariant',
                                'euiOutline',
                                'euiDisabled',
                            ],
                        },
                    ], template: "<button class=\"eui-chip-button-wrapper\" (click)=\"onClick()\">\n    <div class=\"eui-chip-button__content-container\" #chipLabel>\n        <ng-content></ng-content>\n    </div>\n</button>\n", styles: [".eui-21 :host.eui-chip-button{--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_close-hover-color: var(--eui-c-secondary-surface-light-hover);--_border-outline-color: var(--eui-c-secondary-border);--_border-color: var(--eui-c-secondary-border);--_size-s-font: var(--eui-f-s);--_size-m-font: var(--eui-f-m)}.eui-21 :host.eui-chip-button--primary{--_bg-color: var(--eui-c-primary-surface-light);--_color: var(--eui-c-primary-on-surface-light);--_close-hover-color: var(--eui-c-primary-surface-light-hover);--_border-outline-color: var(--eui-c-primary-border);--_border-color: var(--eui-c-primary-border-light)}.eui-21 :host.eui-chip-button--secondary{--_bg-color: var(--eui-c-secondary-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_close-hover-color: var(--eui-c-secondary-surface-light-hover);--_border-outline-color: var(--eui-c-secondary-border);--_border-color: var(--eui-c-secondary-border)}.eui-21 :host.eui-chip-button--info{--_bg-color: var(--eui-c-info-surface-light);--_color: var(--eui-c-info-on-surface-light);--_close-hover-color: var(--eui-c-info-surface-light-hover);--_border-outline-color: var(--eui-c-info-border);--_border-color: var(--eui-c-info-border-light)}.eui-21 :host.eui-chip-button--success{--_bg-color: var(--eui-c-success-surface-light);--_color: var(--eui-c-success-on-surface-light);--_close-hover-color: var(--eui-c-success-surface-light-hover);--_border-outline-color: var(--eui-c-success-border);--_border-color: var(--eui-c-success-border-light)}.eui-21 :host.eui-chip-button--warning{--_bg-color: var(--eui-c-warning-surface-light);--_color: var(--eui-c-warning-on-surface-light);--_close-hover-color: var(--eui-c-warning-surface-light-hover);--_border-outline-color: var(--eui-c-warning-border);--_border-color: var(--eui-c-warning-border-light)}.eui-21 :host.eui-chip-button--danger{--_bg-color: var(--eui-c-danger-surface-light);--_color: var(--eui-c-danger-on-surface-light);--_close-hover-color: var(--eui-c-danger-surface-light-hover);--_border-outline-color: var(--eui-c-danger-border);--_border-color: var(--eui-c-danger-border-light)}.eui-21 :host.eui-chip-button--filled.eui-chip--primary{--_bg-color: var(--eui-c-primary-surface);--_color: var(--eui-c-primary-on-surface);--_icon-color: var(--eui-c-primary-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-primary-surface-hover)}.eui-21 :host.eui-chip-button--filled.eui-chip--secondary{--_bg-color: var(--eui-c-secondary-surface-medium);--_color: var(--eui-c-secondary-on-surface-medium);--_icon-color: var(--eui-c-secondary-on-surface-medium);--_border-color: transparent;--_close-hover-color: var(--eui-c-secondary-surface-medium-hover)}.eui-21 :host.eui-chip-button--filled.eui-chip--info{--_bg-color: var(--eui-c-info-surface);--_color: var(--eui-c-info-on-surface);--_icon-color: var(--eui-c-info-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-info-surface-hover)}.eui-21 :host.eui-chip-button--filled.eui-chip--success{--_bg-color: var(--eui-c-success-surface);--_color: var(--eui-c-success-on-surface);--_icon-color: var(--eui-c-success-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-success-surface-hover)}.eui-21 :host.eui-chip-button--filled.eui-chip--warning{--_bg-color: var(--eui-c-warning-surface);--_color: var(--eui-c-warning-on-surface);--_icon-color: var(--eui-c-warning-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-warning-surface-hover)}.eui-21 :host.eui-chip-button--filled.eui-chip--danger{--_bg-color: var(--eui-c-danger-surface);--_color: var(--eui-c-danger-on-surface);--_icon-color: var(--eui-c-danger-on-surface);--_border-color: transparent;--_close-hover-color: var(--eui-c-danger-surface-hover)}.eui-21 :host.eui-chip-button{align-items:center;border-radius:calc(2 * var(--eui-br-l));display:inline-flex;position:relative;font:var(--_size-m-font);outline:var(--eui-bw-xs) solid var(--_border-color);outline-offset:-1px;cursor:pointer}.eui-21 :host.eui-chip-button .eui-chip-button-wrapper{border:none;border-radius:calc(2 * var(--eui-br-l));background:transparent;min-height:calc(var(--eui-s-m) * 2);padding:0 var(--eui-s-s)}.eui-21 :host.eui-chip-button .eui-chip-button-wrapper:focus:not([readonly]){outline:var(--eui-bw-s) solid var(--eui-c-primary-border-light)!important;outline-offset:1px!important;border-radius:var(--eui-br-max)!important}.eui-21 :host.eui-chip-button .eui-chip-button-wrapper,.eui-21 :host.eui-chip-button .eui-chip-button__content-container{display:flex;align-items:center;gap:var(--eui-s-xs);cursor:pointer}.eui-21 :host.eui-chip-button{background-color:var(--_bg-color);color:var(--_color)}.eui-21 :host.eui-chip-button ::ng-deep .eui-icon-svg:not(.eui-chip__close) svg{fill:var(--_color);color:var(--_color)}.eui-21 :host.eui-chip-button.cdk-drag:not(.cdk-drag-disabled){cursor:move}.eui-21 :host.eui-chip-button--outline{background-color:var(--eui-c-surface-container);outline-color:var(--_border-outline-color)}.eui-21 :host.eui-chip-button--size-s{font:var(--_size-s-font);min-height:var(--eui-s-xl);padding:0 var(--eui-s-xs)}.eui-21 :host.eui-chip-button--size-s .eui-chip-button-wrapper,.eui-21 :host.eui-chip-button--size-s .eui-chip-button__content-container{gap:var(--eui-s-3xs)}.eui-21 :host.eui-chip-button--size-s .eui-chip-button-wrapper ::ng-deep svg,.eui-21 :host.eui-chip-button--size-s .eui-chip-button__content-container ::ng-deep svg{height:var(--eui-is-s);width:var(--eui-is-s)}.eui-21 :host.eui-chip-button--size-s .eui-chip-button-wrapper ::ng-deep .eui-flag-icon,.eui-21 :host.eui-chip-button--size-s .eui-chip-button__content-container ::ng-deep .eui-flag-icon{height:var(--eui-is-xs);min-width:calc(1.3333333 * var(--eui-is-xs));width:calc(1.3333333 * var(--eui-is-xs))}.eui-21 :host.eui-chip-button--size-s .eui-chip-button-wrapper ::ng-deep .eui-flag-icon.eui-flag-icon--rounded,.eui-21 :host.eui-chip-button--size-s .eui-chip-button__content-container ::ng-deep .eui-flag-icon.eui-flag-icon--rounded{height:var(--eui-is-s);width:var(--eui-is-s)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], euiInternalId: [{
                type: Input
            }], tooltipMessage: [{
                type: Input
            }], id: [{
                type: Input
            }], buttonClick: [{
                type: Output
            }], isFilled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

const EUI_CHIP_BUTTON = [
    EuiChipButtonComponent,
];

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

export { EUI_CHIP_BUTTON, EuiChipButtonComponent };
//# sourceMappingURL=eui-components-eui-chip-button.mjs.map
