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

/**
 * A button component that displays an icon indicating expandable/collapsible state, typically used for accordion panels, tree nodes, or disclosure widgets.
 * The icon rotates based on the expanded state and can be oriented in forward or reverse direction.
 *
 * @usageNotes
 * ### Basic expander button
 * ```html
 * <eui-icon-button-expander
 *   [isExpanded]="expanded"
 *   ariaLabel="Toggle section"
 *   (buttonClick)="expanded = !expanded">
 * </eui-icon-button-expander>
 * ```
 *
 * ### Forward direction (horizontal expansion)
 * ```html
 * <eui-icon-button-expander
 *   [isExpanded]="sidebarOpen"
 *   [isDirectionForward]="true"
 *   ariaLabel="Toggle sidebar">
 * </eui-icon-button-expander>
 * ```
 *
 * ### Accessibility
 * - Provide descriptive `ariaLabel` indicating expand/collapse action
 * - Visual rotation clearly indicates state change
 * - Keyboard accessible via Tab and Enter/Space
 *
 * ### Notes
 * - Default direction is downward (for vertical expansion)
 * - Set `isDirectionForward="true"` for horizontal/sidebar expansion
 * - Icon automatically rotates based on `isExpanded` state
 * - Commonly paired with eui-fieldset or custom collapsible sections
 */
class EuiIconButtonExpanderComponent {
    constructor() {
        /**
         * The size of the icon button. Default is 'm'.
         */
        this.size = 'm';
        /**
         * Controls the visual state of the expander icon. When true, the icon rotates to indicate expanded state. Default is false.
         */
        this.isExpanded = false;
        /**
         * Controls the rotation direction of the icon. When true, the icon points forward (right) when collapsed; when false, it points downward when collapsed. Default is false.
         */
        this.isDirectionForward = false;
        // TODO handle disabled attr (see button implementation)
        /**
         * Disables the button interaction when true. Default is false.
         */
        this.euiDisabled = false;
        /**
         * Emitted when the button is clicked. Payload is the native click Event.
         */
        this.buttonClick = new EventEmitter();
    }
    get cssClasses() {
        return [
            'eui-icon-button-expander',
            this.isDirectionForward ? 'eui-icon-button-expander--direction-forward' : '',
        ].join(' ').trim();
    }
    onClick(event) {
        this.buttonClick.emit(event);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiIconButtonExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: EuiIconButtonExpanderComponent, isStandalone: true, selector: "eui-icon-button-expander", inputs: { fillColor: "fillColor", size: "size", ariaLabel: "ariaLabel", isExpanded: ["isExpanded", "isExpanded", booleanAttribute], isDirectionForward: ["isDirectionForward", "isDirectionForward", booleanAttribute], euiDisabled: ["euiDisabled", "euiDisabled", booleanAttribute] }, outputs: { buttonClick: "buttonClick" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: "<button\n    type=\"button\"\n    class=\"eui-icon-button-expander-toggle\"\n    [class.eui-icon-button-expander-toggle--expanded]=\"isExpanded\"\n    [attr.aria-label]=\"isExpanded ? 'expanded' : 'collapsed'\"\n    [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"onClick($event)\">\n    @if (fillColor) {\n        @if (isDirectionForward) {\n            <eui-icon-svg icon=\"eui-chevron-right\" fillColor=\"{{fillColor}}\" size=\"{{size}}\"></eui-icon-svg>\n        } @else {\n            <eui-icon-svg icon=\"eui-chevron-down\" fillColor=\"{{fillColor}}\" size=\"{{size}}\"></eui-icon-svg>\n        }\n\n    } @else {\n        @if (isDirectionForward) {\n            <eui-icon-svg icon=\"eui-chevron-right\" size=\"{{size}}\"></eui-icon-svg>\n        } @else {\n            <eui-icon-svg icon=\"eui-chevron-down\" size=\"{{size}}\"></eui-icon-svg>\n        }\n    }\n</button>\n", styles: [":host.eui-icon-button-expander{display:inline-flex;border-radius:var(--eui-br-max)}:host.eui-icon-button-expander:hover{background-color:var(--eui-c-secondary-surface-light-hover)}.eui-icon-button-expander-toggle{background-color:transparent;border:var(--eui-bw-none);border-radius:var(--eui-br-max);cursor:pointer;padding:var(--eui-s-3xs);align-items:center;display:flex;justify-content:center;position:relative;transition:all .2s linear!important}.eui-icon-button-expander-toggle:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-icon-button-expander-toggle:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-button-expander-toggle [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-button-expander-toggle--expanded{transform:rotate(180deg)}:host.eui-icon-button-expander--direction-forward .eui-icon-button-expander-toggle--expanded{transform:rotate(90deg)}\n"], dependencies: [{ kind: "component", type: i1.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiIconButtonExpanderComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-icon-button-expander', changeDetection: ChangeDetectionStrategy.OnPush, imports: [...EUI_ICON], template: "<button\n    type=\"button\"\n    class=\"eui-icon-button-expander-toggle\"\n    [class.eui-icon-button-expander-toggle--expanded]=\"isExpanded\"\n    [attr.aria-label]=\"isExpanded ? 'expanded' : 'collapsed'\"\n    [attr.aria-expanded]=\"isExpanded\"\n    (click)=\"onClick($event)\">\n    @if (fillColor) {\n        @if (isDirectionForward) {\n            <eui-icon-svg icon=\"eui-chevron-right\" fillColor=\"{{fillColor}}\" size=\"{{size}}\"></eui-icon-svg>\n        } @else {\n            <eui-icon-svg icon=\"eui-chevron-down\" fillColor=\"{{fillColor}}\" size=\"{{size}}\"></eui-icon-svg>\n        }\n\n    } @else {\n        @if (isDirectionForward) {\n            <eui-icon-svg icon=\"eui-chevron-right\" size=\"{{size}}\"></eui-icon-svg>\n        } @else {\n            <eui-icon-svg icon=\"eui-chevron-down\" size=\"{{size}}\"></eui-icon-svg>\n        }\n    }\n</button>\n", styles: [":host.eui-icon-button-expander{display:inline-flex;border-radius:var(--eui-br-max)}:host.eui-icon-button-expander:hover{background-color:var(--eui-c-secondary-surface-light-hover)}.eui-icon-button-expander-toggle{background-color:transparent;border:var(--eui-bw-none);border-radius:var(--eui-br-max);cursor:pointer;padding:var(--eui-s-3xs);align-items:center;display:flex;justify-content:center;position:relative;transition:all .2s linear!important}.eui-icon-button-expander-toggle:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-icon-button-expander-toggle:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-button-expander-toggle [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-icon-button-expander-toggle--expanded{transform:rotate(180deg)}:host.eui-icon-button-expander--direction-forward .eui-icon-button-expander-toggle--expanded{transform:rotate(90deg)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], fillColor: [{
                type: Input
            }], size: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], isExpanded: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isDirectionForward: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiDisabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], buttonClick: [{
                type: Output
            }] } });

const EUI_ICON_BUTTON_EXPANDER = [
    EuiIconButtonExpanderComponent,
];
// export { EuiIconButtonExpanderComponent as EuiIconButtonExpander } from './eui-icon-button-expander.component';

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

export { EUI_ICON_BUTTON_EXPANDER, EuiIconButtonExpanderComponent };
//# sourceMappingURL=eui-components-eui-icon-button-expander.mjs.map
