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

/**
 * Component that provides a toggleable icon button with accessibility support.
 * Functions as a switch control that can be toggled between on/off states,
 * displaying different icons based on the current state.
 *
 * This component handles keyboard navigation, focus management, and proper
 * ARIA attributes for accessibility compliance.
 *
 * @usageNotes
 * ### Basic toggle
 * ```typescript
 * isFavorite = false;
 * ```
 * ```html
 * <eui-icon-toggle
 *   [(isChecked)]="isFavorite"
 *   iconSvgNameOn="star-filled"
 *   iconSvgNameOff="star-outline"
 *   ariaLabel="Toggle favorite"
 *   (toggle)="onToggle($event)">
 * </eui-icon-toggle>
 * ```
 *
 * ### With custom colors
 * ```html
 * <eui-icon-toggle
 *   [isChecked]="enabled"
 *   iconSvgNameOn="visibility"
 *   iconSvgNameOff="visibility-off"
 *   iconSvgFillColorOn="success"
 *   iconSvgFillColorOff="neutral"
 *   ariaLabel="Toggle visibility">
 * </eui-icon-toggle>
 * ```
 *
 * ### Accessibility
 * - Implements ARIA switch role with aria-checked state
 * - Keyboard accessible via Tab, Enter, and Space keys
 * - Provides keyboard shortcut via accesskey attribute
 * - Screen readers announce state changes
 *
 * ### Notes
 * - Use distinct icons for on/off states for clarity
 * - Set `isReadOnly` to prevent interaction while maintaining visual state
 * - Default colors: accent (on), neutral (off)
 * - Emits toggle event with boolean state on change
 */
class EuiIconToggleComponent {
    constructor() {
        this.role = 'switch';
        /**
         * Keyboard shortcut key.
         * @default 'i'
         */
        this.keyboardAccessKey = 'i';
        /**
         * Whether the toggle is in the checked/on state.
         * Bound to aria-checked attribute for accessibility.
         * @default false
         */
        this.isChecked = false;
        /**
         * Data attribute for e2e testing.
         * @default 'eui-icon-toggle'
         */
        this.e2eAttr = 'eui-icon-toggle';
        /**
         * Unique identifier for the component.
         * @default 'eui-icon-toggle-{uniqueId}'
         */
        this.id = `eui-icon-toggle-${uniqueId()}`;
        /**
         * Tab order value for keyboard navigation.
         * @default '0'
         */
        this.tabindex = '0';
        /**
         * Accessible label for screen readers.
         * @default 'Toggle icon'
         */
        this.ariaLabel = 'Toggle icon';
        /**
         * Size of the icon (s, m, l, xl).
         * @default 'm'
         */
        this.iconSvgSize = 'm';
        /**
         * Color of the icon when toggle is in the ON state.
         * @default 'accent'
         */
        this.iconSvgFillColorOn = 'accent';
        /**
         * Color of the icon when toggle is in the OFF state.
         * @default 'neutral'
         */
        this.iconSvgFillColorOff = 'neutral';
        /**
         * Event emitted when the toggle state changes.
         * Emits the new state (true = checked, false = unchecked).
         */
        // eslint-disable-next-line
        this.toggle = new EventEmitter();
    }
    get cssClasses() {
        return ['eui-icon-toggle',
            this.isChecked ? 'eui-icon-toggle--default-on' : 'eui-icon-toggle--default-off',
            this.isReadOnly ? 'eui-icon-toggle--readonly' : '',
        ].join(' ').trim();
    }
    /**
     * Handles changes to input properties.
     * Updates the tabindex when the component becomes read-only.
     *
     * @param {SimpleChanges} changes - Object containing changed properties
     */
    ngOnChanges(changes) {
        if (changes?.isReadOnly && changes?.isReadOnly.currentValue === true) {
            this.tabindex = '-1';
        }
        if (changes.isChecked) {
            this._setIconClass();
        }
    }
    /**
     * Initializes the component after content has been set.
     * Sets the appropriate icon based on the current toggle state.
     * Sets the aria-label if none was provided.
     */
    ngAfterContentInit() {
        this._setIconClass();
        if (!this.ariaLabel || this.ariaLabel === '') {
            this.ariaLabel = this.iconSvgName ? this.iconSvgName : '';
        }
    }
    /**
     * Host listener that handles click events on the component.
     * Triggers the toggle action if the component is not read-only.
     */
    onClick() {
        this._toggle();
    }
    /**
     * Host listener that handles keyboard events.
     * Triggers the toggle action on Enter or Space key press.
     *
     * @param {KeyboardEvent} event - The keyboard event
     */
    onKeydown(event) {
        switch (event.code) {
            case 'Enter':
            case 'Space':
                event.preventDefault();
                event.stopPropagation();
                this._toggle();
                break;
        }
    }
    _toggle() {
        if (!this.isReadOnly) {
            this.isChecked = !this.isChecked;
            this._setIconClass();
            this.toggle.emit(this.isChecked);
        }
    }
    _setIconClass() {
        if (this.isChecked) {
            this.iconSvgName = this.iconSvgNameOn;
            this.iconSvgFillColor = this.iconSvgFillColorOn;
        }
        else {
            this.iconSvgName = this.iconSvgNameOff;
            this.iconSvgFillColor = this.iconSvgFillColorOff;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiIconToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.2.1", type: EuiIconToggleComponent, isStandalone: true, selector: "eui-icon-toggle", inputs: { keyboardAccessKey: "keyboardAccessKey", isChecked: ["isChecked", "isChecked", booleanAttribute], isReadOnly: ["isReadOnly", "isReadOnly", booleanAttribute], e2eAttr: "e2eAttr", id: "id", tabindex: "tabindex", ariaLabel: "ariaLabel", iconSvgSize: "iconSvgSize", iconSvgNameOn: "iconSvgNameOn", iconSvgNameOff: "iconSvgNameOff", iconSvgFillColorOn: "iconSvgFillColorOn", iconSvgFillColorOff: "iconSvgFillColorOff" }, outputs: { toggle: "toggle" }, host: { listeners: { "click": "onClick()", "keydown": "onKeydown($event)" }, properties: { "class": "this.cssClasses", "attr.role": "this.role", "attr.accesskey": "this.keyboardAccessKey", "attr.aria-checked": "this.isChecked", "attr.readonly": "this.isReadOnly", "attr.data-e2e": "this.e2eAttr", "attr.id": "this.id", "attr.tabindex": "this.tabindex", "attr.aria-label": "this.ariaLabel" } }, usesOnChanges: true, ngImport: i0, template: "<eui-icon-svg [icon]=\"iconSvgName\" [fillColor]=\"iconSvgFillColor\" [size]=\"iconSvgSize\" />\n", styles: [".eui-21 :host.eui-icon-toggle{display:inline-flex;position:relative;cursor:pointer;padding:calc(var(--eui-s-xs) - 1px) calc(var(--eui-s-xs) - 1px)}.eui-21 :host.eui-icon-toggle:focus-visible:not([readonly]){border-radius:var(--eui-br-max);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-icon-toggle:hover{background-color:var(--eui-c-secondary-surface-light-hover);border-radius:var(--eui-br-max)}.eui-21 :host.eui-icon-toggle--default-on{color:var(--eui-c-primary)}.eui-21 :host.eui-icon-toggle--checked{color:var(--eui-c-primary)}.eui-21 :host.eui-icon-toggle--readonly{cursor:auto}\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: EuiIconToggleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-icon-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_ICON,
                    ], template: "<eui-icon-svg [icon]=\"iconSvgName\" [fillColor]=\"iconSvgFillColor\" [size]=\"iconSvgSize\" />\n", styles: [".eui-21 :host.eui-icon-toggle{display:inline-flex;position:relative;cursor:pointer;padding:calc(var(--eui-s-xs) - 1px) calc(var(--eui-s-xs) - 1px)}.eui-21 :host.eui-icon-toggle:focus-visible:not([readonly]){border-radius:var(--eui-br-max);outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-21 :host.eui-icon-toggle:hover{background-color:var(--eui-c-secondary-surface-light-hover);border-radius:var(--eui-br-max)}.eui-21 :host.eui-icon-toggle--default-on{color:var(--eui-c-primary)}.eui-21 :host.eui-icon-toggle--checked{color:var(--eui-c-primary)}.eui-21 :host.eui-icon-toggle--readonly{cursor:auto}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], keyboardAccessKey: [{
                type: HostBinding,
                args: ['attr.accesskey']
            }, {
                type: Input
            }], isChecked: [{
                type: HostBinding,
                args: ['attr.aria-checked']
            }, {
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], isReadOnly: [{
                type: HostBinding,
                args: ['attr.readonly']
            }, {
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], id: [{
                type: HostBinding,
                args: ['attr.id']
            }, {
                type: Input
            }], tabindex: [{
                type: HostBinding,
                args: ['attr.tabindex']
            }, {
                type: Input
            }], ariaLabel: [{
                type: HostBinding,
                args: ['attr.aria-label']
            }, {
                type: Input
            }], iconSvgSize: [{
                type: Input
            }], iconSvgNameOn: [{
                type: Input
            }], iconSvgNameOff: [{
                type: Input
            }], iconSvgFillColorOn: [{
                type: Input
            }], iconSvgFillColorOff: [{
                type: Input
            }], toggle: [{
                type: Output
            }], onClick: [{
                type: HostListener,
                args: ['click']
            }], onKeydown: [{
                type: HostListener,
                args: ['keydown', ['$event']]
            }] } });

const EUI_ICON_TOGGLE = [
    EuiIconToggleComponent,
];
// export { EuiIconToggleComponent as EuiIconToggle } from './eui-icon-toggle.component';

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

export { EUI_ICON_TOGGLE, EuiIconToggleComponent };
//# sourceMappingURL=eui-components-eui-icon-toggle.mjs.map
