import * as i0 from '@angular/core';
import { EventEmitter, inject, ChangeDetectorRef, booleanAttribute, Output, Input, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i2 from '@angular/forms';
import { FormControl, NgControl, ReactiveFormsModule } from '@angular/forms';
import { uniqueId } from '@eui/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import { trigger, state, transition, style, animate } from '@angular/animations';
import * as i3 from '@eui/components/eui-icon';
import { EUI_ICON } from '@eui/components/eui-icon';

const onOff = trigger('onOff', [
    state('off', style({
        left: 0,
    })),
    state('on', style({
        left: '1rem',
    })),
    transition('off => on', [animate('0ms 100ms linear')]),
    transition('on => off', [animate('0ms 100ms linear')]),
]);

/**
 * @description
 * Slide toggle component that can be used as a standalone toggle or within reactive forms.
 * Supports custom icons for on/off states and various size/variant options through BaseStatesDirective.
 *
 * @implements {ControlValueAccessor}
 */
class EuiSlideToggleComponent {
    /** CSS classes applied to the host element */
    get cssClasses() {
        return [this.baseStatesDirective.getCssClasses('eui-slide-toggle')].join(' ').trim();
    }
    constructor() {
        /**
         * Unique identifier for the toggle
         * @default Generated unique ID with 'eui-slide-toggle-' prefix
         */
        this.id = `eui-slide-toggle-${uniqueId()}`;
        /**
         * Fill color for the ON state icon
         * @default 'neutral'
         */
        this.iconSvgFillColorOn = 'neutral';
        /**
         * Fill color for the OFF state icon
         * @default 'neutral'
         */
        this.iconSvgFillColorOff = 'neutral';
        /**
         * Current checked state of the toggle
         * @default false
         */
        this.isChecked = false;
        /**
         * Whether the toggle is disabled
         * @default false
         */
        this.disabled = false;
        /** Form control for the toggle when used in reactive forms */
        this.checkboxControl = new FormControl();
        /**
         * Event emitted when toggle state changes
         * @emits boolean - The new toggle state
         */
        this.slideToggleChange = new EventEmitter();
        this.cd = inject(ChangeDetectorRef);
        this.control = inject(NgControl, { self: true, optional: true });
        this.baseStatesDirective = inject(BaseStatesDirective);
        // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        this.onChange = () => { };
        // TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        this.onTouch = () => { };
        if (this.control) {
            this.control.valueAccessor = this;
        }
    }
    /**
     * Toggles the current state if not disabled
     * Emits the new state and notifies form control
     */
    toggle() {
        if (!this.disabled) {
            this.isChecked = !this.isChecked;
            this.slideToggleChange.emit(this.isChecked);
            this.onChange(this.isChecked);
            this.onTouch();
        }
    }
    /**
     * Implements ControlValueAccessor
     * Updates the toggle's checked state
     */
    writeValue(value) {
        this.isChecked = value;
        this.cd.detectChanges();
    }
    /**
     * Implements ControlValueAccessor
     * Updates the toggle's disabled state
     */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
        this.cd.detectChanges();
    }
    /**
     * Handles focus out event
     * Notifies form control of touch event
     */
    onFocusOut() {
        this.onTouch();
    }
    /**
     * Implements ControlValueAccessor
     * Registers change handler
     * @todo Improve type definition or make generic
     */
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /**
     * Implements ControlValueAccessor
     * Registers touch handler
     * @todo Improve type definition or make generic
     */
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    registerOnTouched(fn) {
        this.onTouch = fn;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiSlideToggleComponent, isStandalone: true, selector: "eui-slide-toggle", inputs: { id: "id", iconSvgNameOn: "iconSvgNameOn", iconSvgNameOff: "iconSvgNameOff", iconSvgFillColorOn: "iconSvgFillColorOn", iconSvgFillColorOff: "iconSvgFillColorOff", isChecked: ["isChecked", "isChecked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { slideToggleChange: "slideToggleChange" }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiSuccess", "euiSuccess", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<div\n    class=\"eui-slide-toggle__container\"\n    [tabindex]=\"this.disabled ? '-1' : '0'\"\n    [class.eui-slide-toggle__container--disabled]=\"disabled\"\n    (keydown.Enter)=\"toggle()\"\n    (click)=\"toggle()\">\n    <input\n        class=\"eui-slide-toggle__container-input\"\n        [formControl]=\"checkboxControl\"\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [attr.checked]=\"isChecked\"\n        (focusout)=\"onFocusOut()\" />\n    <div\n        class=\"eui-slide-toggle__track\"\n        [class.eui-slide-toggle__track--off]=\"!isChecked\"\n        [class.eui-slide-toggle__track--on]=\"isChecked\"></div>\n    <div\n        class=\"eui-slide-toggle__handler\"\n        [@onOff]=\"isChecked ? 'on' : 'off'\"\n        [class.eui-slide-toggle__handler--off]=\"!isChecked\"\n        [class.eui-slide-toggle__handler--on]=\"isChecked\">\n\n        @if (iconSvgNameOn && iconSvgNameOff) {\n            @if (isChecked) {\n                <eui-icon-svg icon=\"{{iconSvgNameOn}}\" fillColor=\"{{iconSvgFillColorOn}}\"></eui-icon-svg>\n            } @else {\n                <eui-icon-svg icon=\"{{iconSvgNameOff}}\" fillColor=\"{{iconSvgFillColorOff}}\"></eui-icon-svg>\n            }\n        }\n    </div>\n</div>\n", styles: [".eui-19 :host.eui-slide-toggle{align-items:center;display:inline-flex;position:relative}.eui-19 :host.eui-slide-toggle:not(.eui-slide-toggle__container--disabled){cursor:pointer}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container{align-items:center;display:flex;padding:var(--eui-s-xs) 0;position:relative}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container-input{display:none}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track{background-color:var(--eui-c-surface-container-3);border-radius:var(--eui-br-max);height:var(--eui-s-m);width:calc(var(--eui-s-xl) + var(--eui-s-m))}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-success);position:relative}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-surface-container);border-radius:var(--eui-br-max);border:1px solid var(--eui-c-divider);box-shadow:var(--eui-sh-3);position:absolute;height:calc(var(--eui-s-m) + var(--eui-s-xs));width:calc(var(--eui-s-m) + var(--eui-s-xs))}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler--off{left:0rem}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler--on{left:var(--eui-s-m)}.eui-19 :host.eui-slide-toggle--size-s{transform:scale(.75)}.eui-19 :host.eui-slide-toggle--size-m{transform:scale(1)}.eui-19 :host.eui-slide-toggle--size-l{transform:scale(1.25)}.eui-19 :host.eui-slide-toggle--size-xl{transform:scale(1.5)}.eui-19 :host.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-primary-surface)}.eui-19 :host.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-primary-surface)}.eui-19 :host.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-info-surface)}.eui-19 :host.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-info-surface)}.eui-19 :host.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-success-surface)}.eui-19 :host.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-success-surface)}.eui-19 :host.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-warning-surface)}.eui-19 :host.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-warning-surface)}.eui-19 :host.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-danger-surface)}.eui-19 :host.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-danger-surface)}.eui-19 :host.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-accent-surface)}.eui-19 :host.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-accent-surface)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], animations: [onOff], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiSlideToggleComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-slide-toggle', animations: [onOff], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ReactiveFormsModule,
                        ...EUI_ICON,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiInfo',
                                'euiWarning',
                                'euiSuccess',
                                'euiDanger',
                                'euiAccent',
                                'euiVariant',
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiSizeVariant',
                            ],
                        },
                    ], template: "<div\n    class=\"eui-slide-toggle__container\"\n    [tabindex]=\"this.disabled ? '-1' : '0'\"\n    [class.eui-slide-toggle__container--disabled]=\"disabled\"\n    (keydown.Enter)=\"toggle()\"\n    (click)=\"toggle()\">\n    <input\n        class=\"eui-slide-toggle__container-input\"\n        [formControl]=\"checkboxControl\"\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [attr.checked]=\"isChecked\"\n        (focusout)=\"onFocusOut()\" />\n    <div\n        class=\"eui-slide-toggle__track\"\n        [class.eui-slide-toggle__track--off]=\"!isChecked\"\n        [class.eui-slide-toggle__track--on]=\"isChecked\"></div>\n    <div\n        class=\"eui-slide-toggle__handler\"\n        [@onOff]=\"isChecked ? 'on' : 'off'\"\n        [class.eui-slide-toggle__handler--off]=\"!isChecked\"\n        [class.eui-slide-toggle__handler--on]=\"isChecked\">\n\n        @if (iconSvgNameOn && iconSvgNameOff) {\n            @if (isChecked) {\n                <eui-icon-svg icon=\"{{iconSvgNameOn}}\" fillColor=\"{{iconSvgFillColorOn}}\"></eui-icon-svg>\n            } @else {\n                <eui-icon-svg icon=\"{{iconSvgNameOff}}\" fillColor=\"{{iconSvgFillColorOff}}\"></eui-icon-svg>\n            }\n        }\n    </div>\n</div>\n", styles: [".eui-19 :host.eui-slide-toggle{align-items:center;display:inline-flex;position:relative}.eui-19 :host.eui-slide-toggle:not(.eui-slide-toggle__container--disabled){cursor:pointer}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container--disabled{background-image:none;box-shadow:none;cursor:not-allowed!important;opacity:var(--eui-o-50)}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container{align-items:center;display:flex;padding:var(--eui-s-xs) 0;position:relative}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container-input{display:none}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track{background-color:var(--eui-c-surface-container-3);border-radius:var(--eui-br-max);height:var(--eui-s-m);width:calc(var(--eui-s-xl) + var(--eui-s-m))}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-success);position:relative}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-surface-container);border-radius:var(--eui-br-max);border:1px solid var(--eui-c-divider);box-shadow:var(--eui-sh-3);position:absolute;height:calc(var(--eui-s-m) + var(--eui-s-xs));width:calc(var(--eui-s-m) + var(--eui-s-xs))}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler--off{left:0rem}.eui-19 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler--on{left:var(--eui-s-m)}.eui-19 :host.eui-slide-toggle--size-s{transform:scale(.75)}.eui-19 :host.eui-slide-toggle--size-m{transform:scale(1)}.eui-19 :host.eui-slide-toggle--size-l{transform:scale(1.25)}.eui-19 :host.eui-slide-toggle--size-xl{transform:scale(1.5)}.eui-19 :host.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-primary-surface)}.eui-19 :host.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-primary-surface)}.eui-19 :host.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-info-surface)}.eui-19 :host.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-info-surface)}.eui-19 :host.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-success-surface)}.eui-19 :host.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-success-surface)}.eui-19 :host.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-warning-surface)}.eui-19 :host.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-warning-surface)}.eui-19 :host.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-danger-surface)}.eui-19 :host.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-danger-surface)}.eui-19 :host.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-s-accent-surface)}.eui-19 :host.eui-slide-toggle--accent .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-s-accent-surface)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], id: [{
                type: Input
            }], iconSvgNameOn: [{
                type: Input
            }], iconSvgNameOff: [{
                type: Input
            }], iconSvgFillColorOn: [{
                type: Input
            }], iconSvgFillColorOff: [{
                type: Input
            }], isChecked: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], disabled: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], slideToggleChange: [{
                type: Output
            }] } });

/**
 * @deprecated Import the standalone {@link EUI_SLIDE_TOGGLE} instead.
 * This module is maintained for backward compatibility.
 *
 */
class EuiSlideToggleModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiSlideToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiSlideToggleModule, imports: [EuiSlideToggleComponent], exports: [EuiSlideToggleComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiSlideToggleModule, imports: [EuiSlideToggleComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiSlideToggleModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [EuiSlideToggleComponent],
                    exports: [EuiSlideToggleComponent],
                }]
        }] });

const EUI_SLIDE_TOGGLE = [
    EuiSlideToggleComponent,
];
// export { EuiSlideToggleComponent as EuiSlideToggle } from './eui-slide-toggle.component';

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

export { EUI_SLIDE_TOGGLE, EuiSlideToggleComponent, EuiSlideToggleModule };
//# sourceMappingURL=eui-components-eui-slide-toggle.mjs.map
