import * as i0 from '@angular/core';
import { EventEmitter, inject, ChangeDetectorRef, booleanAttribute, Output, Input, HostBinding, ChangeDetectionStrategy, Component } 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 used to represent a boolean state.
 * It can be used as a standalone toggle or integrated with Angular Reactive Forms.
 * Supports icons for ON/OFF states and visual variants via EUI base state directives.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <!-- Simple toggle -->
 * <eui-slide-toggle [(isChecked)]="enabled" />
 *
 * <!-- With icons -->
 * <eui-slide-toggle
 *   [iconSvgNameOn]="'check'"
 *   [iconSvgNameOff]="'close'"
 *   [(isChecked)]="enabled" />
 *
 * <!-- Reactive forms -->
 * <form [formGroup]="form">
 *   <eui-slide-toggle formControlName="notifications" />
 * </form>
 * ```
 *
 * ### Accessibility
 * - Provide meaningful aria-label describing the toggle's purpose
 * - Toggle is keyboard accessible (Space/Enter to toggle)
 * - Disabled state is properly communicated to screen readers
 *
 * ### Notes
 * - Supports semantic color variants (euiPrimary, euiSuccess, euiDanger, etc.)
 * - Size variants (euiSizeS, euiSizeM, euiSizeL, euiSizeXL) control toggle dimensions
 * - Icons are optional and can be customized for ON/OFF states
 */
class EuiSlideToggleComponent {
    /** CSS classes applied to the host element */
    get cssClasses() {
        return [this.baseStatesDirective.getCssClasses('eui-slide-toggle')].join(' ').trim();
    }
    /**
     * Whether the toggle is disabled
     * @default false
     */
    set disabled(value) {
        this._disabled = value;
        if (value) {
            this.checkboxControl.disable();
        }
        else {
            this.checkboxControl.enable();
        }
    }
    get disabled() {
        return this._disabled;
    }
    constructor() {
        /**
         * Unique identifier for the toggle
         * @default Generated unique ID with 'eui-slide-toggle-' prefix
         */
        this.id = `eui-slide-toggle-${uniqueId()}`;
        /**
         * attribute attached to the aria-label of the input field
         * @default 'eUI slide toggle'
         */
        this.ariaLabel = 'eUI slide toggle';
        /**
         * Fill color for the ON state icon
         * @default 'secondary'
         */
        this.iconSvgFillColorOn = 'secondary';
        /**
         * Fill color for the OFF state icon
         * @default 'secondary'
         */
        this.iconSvgFillColorOff = 'secondary';
        /**
         * Current checked state of the toggle
         * @default false
         */
        this.isChecked = false;
        /**
         * Event emitted when toggle state changes
         * @emits boolean - The new toggle state
         */
        this.slideToggleChange = new EventEmitter();
        /** Form control for the toggle when used in reactive forms */
        this.checkboxControl = new FormControl();
        this._disabled = false;
        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;
        if (isDisabled) {
            this.checkboxControl.disable();
        }
        else {
            this.checkboxControl.enable();
        }
        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: "21.1.0", ngImport: i0, type: EuiSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiSlideToggleComponent, isStandalone: true, selector: "eui-slide-toggle", inputs: { id: "id", ariaLabel: "ariaLabel", 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", "euiVariant", "euiVariant", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<div\n    class=\"eui-slide-toggle__container\"\n    [class.eui-slide-toggle__container--disabled]=\"disabled\">\n    <input\n        class=\"eui-slide-toggle__container-input\"\n        [formControl]=\"checkboxControl\"\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [aria-label]=\"ariaLabel\"\n        [checked]=\"isChecked\"\n        (change)=\"toggle(); $event.preventDefault()\"\n        (keydown.enter)=\"toggle()\"\n        (blur)=\"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-21 :host.eui-slide-toggle{align-items:center;display:inline-flex;position:relative}.eui-21 :host.eui-slide-toggle:not(.eui-slide-toggle__container--disabled){cursor:pointer}.eui-21 :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-21 :host.eui-slide-toggle .eui-slide-toggle__container{align-items:center;display:flex;padding:var(--eui-s-xs) 0;position:relative}.eui-21 :host.eui-slide-toggle .eui-slide-toggle__container-input{position:absolute;width:100%;height:100%;opacity:0;cursor:inherit;z-index:1;margin:0}.eui-21 :host.eui-slide-toggle .eui-slide-toggle__container-input:not(:disabled){cursor:pointer}.eui-21 :host.eui-slide-toggle .eui-slide-toggle__container-input:focus-visible~.eui-slide-toggle__track{outline:2px solid var(--eui-c-focus-visible);outline-offset:2px;border-radius:var(--eui-br-max);transition:none}.eui-21 :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-21 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-success);position:relative}.eui-21 :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-xl) + var(--eui-s-4xs));width:calc(var(--eui-s-xl) + var(--eui-s-4xs))}.eui-21 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler--off{left:0rem}.eui-21 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler--on{left:var(--eui-s-m)}.eui-21 :host.eui-slide-toggle--size-s{transform:scale(.75)}.eui-21 :host.eui-slide-toggle--size-m{transform:scale(1)}.eui-21 :host.eui-slide-toggle--size-l{transform:scale(1.25)}.eui-21 :host.eui-slide-toggle--size-xl{transform:scale(1.5)}.eui-21 :host.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-primary-surface)}.eui-21 :host.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-primary-surface)}.eui-21 :host.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-info-surface)}.eui-21 :host.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-info-surface)}.eui-21 :host.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-success-surface)}.eui-21 :host.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-success-surface)}.eui-21 :host.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-warning-surface)}.eui-21 :host.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-warning-surface)}.eui-21 :host.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-danger-surface)}.eui-21 :host.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-danger-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", "ariaLabel", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }], animations: [onOff], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", 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',
                                'euiVariant',
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiSizeVariant',
                            ],
                        },
                    ], template: "<div\n    class=\"eui-slide-toggle__container\"\n    [class.eui-slide-toggle__container--disabled]=\"disabled\">\n    <input\n        class=\"eui-slide-toggle__container-input\"\n        [formControl]=\"checkboxControl\"\n        [id]=\"id\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [aria-label]=\"ariaLabel\"\n        [checked]=\"isChecked\"\n        (change)=\"toggle(); $event.preventDefault()\"\n        (keydown.enter)=\"toggle()\"\n        (blur)=\"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-21 :host.eui-slide-toggle{align-items:center;display:inline-flex;position:relative}.eui-21 :host.eui-slide-toggle:not(.eui-slide-toggle__container--disabled){cursor:pointer}.eui-21 :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-21 :host.eui-slide-toggle .eui-slide-toggle__container{align-items:center;display:flex;padding:var(--eui-s-xs) 0;position:relative}.eui-21 :host.eui-slide-toggle .eui-slide-toggle__container-input{position:absolute;width:100%;height:100%;opacity:0;cursor:inherit;z-index:1;margin:0}.eui-21 :host.eui-slide-toggle .eui-slide-toggle__container-input:not(:disabled){cursor:pointer}.eui-21 :host.eui-slide-toggle .eui-slide-toggle__container-input:focus-visible~.eui-slide-toggle__track{outline:2px solid var(--eui-c-focus-visible);outline-offset:2px;border-radius:var(--eui-br-max);transition:none}.eui-21 :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-21 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-success);position:relative}.eui-21 :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-xl) + var(--eui-s-4xs));width:calc(var(--eui-s-xl) + var(--eui-s-4xs))}.eui-21 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler--off{left:0rem}.eui-21 :host.eui-slide-toggle .eui-slide-toggle__container .eui-slide-toggle__handler--on{left:var(--eui-s-m)}.eui-21 :host.eui-slide-toggle--size-s{transform:scale(.75)}.eui-21 :host.eui-slide-toggle--size-m{transform:scale(1)}.eui-21 :host.eui-slide-toggle--size-l{transform:scale(1.25)}.eui-21 :host.eui-slide-toggle--size-xl{transform:scale(1.5)}.eui-21 :host.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-primary-surface)}.eui-21 :host.eui-slide-toggle--primary .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-primary-surface)}.eui-21 :host.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-info-surface)}.eui-21 :host.eui-slide-toggle--info .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-info-surface)}.eui-21 :host.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-success-surface)}.eui-21 :host.eui-slide-toggle--success .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-success-surface)}.eui-21 :host.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-warning-surface)}.eui-21 :host.eui-slide-toggle--warning .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-warning-surface)}.eui-21 :host.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__track.eui-slide-toggle__track--on{background-color:var(--eui-c-danger-surface)}.eui-21 :host.eui-slide-toggle--danger .eui-slide-toggle__container .eui-slide-toggle__handler{background-color:var(--eui-c-danger-surface)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], id: [{
                type: Input
            }], ariaLabel: [{
                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
            }] } });

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 };
//# sourceMappingURL=eui-components-eui-slide-toggle.mjs.map
