import * as i0 from '@angular/core';
import { input, booleanAttribute, output, signal, computed, effect, 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() {
        /**
         * Keyboard shortcut key.
         * @default 'i'
         */
        this.keyboardAccessKey = input('i', ...(ngDevMode ? [{ debugName: "keyboardAccessKey" }] : []));
        /**
         * Whether the toggle is in the checked/on state.
         * Bound to aria-checked attribute for accessibility.
         * @default false
         */
        this.isChecked = input(false, { ...(ngDevMode ? { debugName: "isChecked" } : {}), transform: booleanAttribute });
        /** @internal two-way binding support */
        this.isCheckedChange = output();
        this._isChecked = signal(false, ...(ngDevMode ? [{ debugName: "_isChecked" }] : []));
        /**
         * Whether the toggle is read-only (cannot be interacted with).
         * When true, tabindex is set to -1 and clicking will not change state.
         * @default undefined
         */
        this.isReadOnly = input(false, { ...(ngDevMode ? { debugName: "isReadOnly" } : {}), transform: booleanAttribute });
        /**
         * Data attribute for e2e testing.
         * @default 'eui-icon-toggle'
         */
        this.e2eAttr = input('eui-icon-toggle', ...(ngDevMode ? [{ debugName: "e2eAttr" }] : []));
        /**
         * Unique identifier for the component.
         * @default 'eui-icon-toggle-{uniqueId}'
         */
        this.id = input(`eui-icon-toggle-${uniqueId()}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
        /**
         * Tab order value for keyboard navigation.
         * @default '0'
         */
        this.tabindex = input('0', ...(ngDevMode ? [{ debugName: "tabindex" }] : []));
        /**
         * Accessible label for screen readers.
         * @default 'Toggle icon'
         */
        this.ariaLabel = input('Toggle icon', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
        /**
         * Size of the icon (s, m, l, xl).
         * @default 'm'
         */
        this.iconSvgSize = input('m', ...(ngDevMode ? [{ debugName: "iconSvgSize" }] : []));
        /**
         * Icon to display when toggle is in the ON state.
         */
        this.iconSvgNameOn = input(undefined, ...(ngDevMode ? [{ debugName: "iconSvgNameOn" }] : []));
        /**
         * Icon to display when toggle is in the OFF state.
         */
        this.iconSvgNameOff = input(undefined, ...(ngDevMode ? [{ debugName: "iconSvgNameOff" }] : []));
        /**
         * Color of the icon when toggle is in the ON state.
         * @default 'accent'
         */
        this.iconSvgFillColorOn = input('accent', ...(ngDevMode ? [{ debugName: "iconSvgFillColorOn" }] : []));
        /**
         * Color of the icon when toggle is in the OFF state.
         * @default 'neutral'
         */
        this.iconSvgFillColorOff = input('neutral', ...(ngDevMode ? [{ debugName: "iconSvgFillColorOff" }] : []));
        /**
         * Event emitted when the toggle state changes.
         * Emits the new state (true = checked, false = unchecked).
         */
        // eslint-disable-next-line
        this.toggle = output();
        this.iconSvgName = computed(() => this._isChecked() ? this.iconSvgNameOn() : this.iconSvgNameOff(), ...(ngDevMode ? [{ debugName: "iconSvgName" }] : []));
        this.iconSvgFillColor = computed(() => this._isChecked() ? this.iconSvgFillColorOn() : this.iconSvgFillColorOff(), ...(ngDevMode ? [{ debugName: "iconSvgFillColor" }] : []));
        this._tabindex = computed(() => this.isReadOnly() ? '-1' : this.tabindex(), ...(ngDevMode ? [{ debugName: "_tabindex" }] : []));
        this._ariaLabel = computed(() => {
            const label = this.ariaLabel();
            if (!label || label === '') {
                return this.iconSvgName() ?? '';
            }
            return label;
        }, ...(ngDevMode ? [{ debugName: "_ariaLabel" }] : []));
        this._cssClasses = computed(() => ['eui-icon-toggle',
            this._isChecked() ? 'eui-icon-toggle--default-on' : 'eui-icon-toggle--default-off',
            this.isReadOnly() ? 'eui-icon-toggle--readonly' : '',
        ].join(' ').trim(), ...(ngDevMode ? [{ debugName: "_cssClasses" }] : []));
        effect(() => this._isChecked.set(this.isChecked()));
    }
    _toggle() {
        if (!this.isReadOnly()) {
            this._isChecked.update(v => !v);
            this.isCheckedChange.emit(this._isChecked());
            this.toggle.emit(this._isChecked());
        }
    }
    /**
     * 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;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiIconToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: EuiIconToggleComponent, isStandalone: true, selector: "eui-icon-toggle", inputs: { keyboardAccessKey: { classPropertyName: "keyboardAccessKey", publicName: "keyboardAccessKey", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null }, isReadOnly: { classPropertyName: "isReadOnly", publicName: "isReadOnly", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, iconSvgSize: { classPropertyName: "iconSvgSize", publicName: "iconSvgSize", isSignal: true, isRequired: false, transformFunction: null }, iconSvgNameOn: { classPropertyName: "iconSvgNameOn", publicName: "iconSvgNameOn", isSignal: true, isRequired: false, transformFunction: null }, iconSvgNameOff: { classPropertyName: "iconSvgNameOff", publicName: "iconSvgNameOff", isSignal: true, isRequired: false, transformFunction: null }, iconSvgFillColorOn: { classPropertyName: "iconSvgFillColorOn", publicName: "iconSvgFillColorOn", isSignal: true, isRequired: false, transformFunction: null }, iconSvgFillColorOff: { classPropertyName: "iconSvgFillColorOff", publicName: "iconSvgFillColorOff", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCheckedChange: "isCheckedChange", toggle: "toggle" }, host: { attributes: { "role": "switch" }, listeners: { "click": "_toggle()", "keydown": "_onKeydown($event)" }, properties: { "class": "_cssClasses()", "attr.accesskey": "keyboardAccessKey()", "attr.aria-checked": "_isChecked()", "attr.readonly": "isReadOnly()", "attr.data-e2e": "e2eAttr()", "attr.id": "id()", "attr.tabindex": "_tabindex()", "attr.aria-label": "_ariaLabel()" } }, 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.1.0", ngImport: i0, type: EuiIconToggleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-icon-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_ICON,
                    ], host: {
                        role: 'switch',
                        '[class]': '_cssClasses()',
                        '[attr.accesskey]': 'keyboardAccessKey()',
                        '[attr.aria-checked]': '_isChecked()',
                        '[attr.readonly]': 'isReadOnly()',
                        '[attr.data-e2e]': 'e2eAttr()',
                        '[attr.id]': 'id()',
                        '[attr.tabindex]': '_tabindex()',
                        '[attr.aria-label]': '_ariaLabel()',
                        '(click)': '_toggle()',
                        '(keydown)': '_onKeydown($event)',
                    }, 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"] }]
        }], ctorParameters: () => [], propDecorators: { keyboardAccessKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyboardAccessKey", required: false }] }], isChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChecked", required: false }] }], isCheckedChange: [{ type: i0.Output, args: ["isCheckedChange"] }], isReadOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReadOnly", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], iconSvgSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSvgSize", required: false }] }], iconSvgNameOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSvgNameOn", required: false }] }], iconSvgNameOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSvgNameOff", required: false }] }], iconSvgFillColorOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSvgFillColorOn", required: false }] }], iconSvgFillColorOff: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSvgFillColorOff", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }] } });

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
