import * as i0 from '@angular/core';
import { EventEmitter, inject, ElementRef, Renderer2, HostListener, HostBinding, Input, Output, Component } from '@angular/core';
import { NgControl } from '@angular/forms';
import { InputDirective } from '@eui/components/shared';
import { coerceBooleanProperty } from '@angular/cdk/coercion';

/**
 * @description
 * Checkbox input field that allows users to select or deselect a boolean value.
 * Supports standard checked state, disabled and readonly modes, validation feedback, and an optional indeterminate (mixed) state.
 *
 * Angular component that provides a custom checkbox input implementation.
 * Extends {@link InputDirective} and implements form control functionality.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <input euiInputCheckBox id="terms" [(ngModel)]="acceptTerms" />
 * <label for="terms">I accept the terms and conditions</label>
 * ```
 *
 * ### With Indeterminate State
 * ```typescript
 * <input euiInputCheckBox [indeterminate]="someItemsSelected" />
 * ```
 *
 * ### Accessibility
 * - Always associate checkbox with a label using `for` attribute or wrap in `<label>`
 * - Component automatically provides `aria-label` based on checked state
 * - Supports keyboard interaction (Space key to toggle)
 * - Use `isInvalid` to communicate validation errors to screen readers
 *
 * ### Notes
 * - Indeterminate state is automatically cleared when checkbox is clicked
 * - Works seamlessly with Angular Forms (both template-driven and reactive)
 * - Readonly state prevents interaction but maintains visual appearance
 *
 * @component
 * @selector input[euiInputCheckBox]
 * @implements {@link OnInit}
 * @implements {@link DoCheck}
 * @implements {@link OnChanges}
 * @implements {@link ControlValueAccessor}
 */
class EuiInputCheckboxComponent extends InputDirective {
    /**
     * Gets the CSS classes for the checkbox component.
     * Combines base classes with validation state classes.
     *
     * @returns {string} Space-separated list of CSS classes
     */
    get cssClasses() {
        return [this.getCssClasses('eui-input-checkbox'), this._isInvalid ? 'eui-input-checkbox--invalid' : ''].join(' ').trim();
    }
    /**
     * Controls the indeterminate (mixed) state of the checkbox.
     * When true, the checkbox appears in an indeterminate state.
     * This state is automatically cleared when the checkbox is clicked.
     *
     * @property {boolean} indeterminate
     */
    get indeterminate() {
        return this._indeterminate;
    }
    set indeterminate(value) {
        const changed = value != this._indeterminate;
        this._indeterminate = coerceBooleanProperty(value);
        if (changed) {
            this.indeterminateChange.emit(this._indeterminate);
        }
        this._syncIndeterminate(this._checked ? false : this._indeterminate);
    }
    /**
     * Controls the invalid state of the checkbox. Used for displaying validation errors.
     *
     * @property {boolean} isInvalid
     */
    get isInvalid() {
        return this._isInvalid || null;
    }
    // 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
    set isInvalid(state) {
        this.setInvalid(state);
    }
    /**
     * Controls the checked state of the checkbox.
     *
     * @property {boolean} checked
     */
    get checked() {
        return this._checked;
    }
    set checked(value) {
        this._checked = coerceBooleanProperty(value) ? true : undefined;
    }
    /**
     * Attaches an aria-label attribute based on the checked state.
     *
     * @property {string} ariaLabel
     */
    get ariaLabel() {
        return this._checked ? 'Input Checked' : 'Input Unchecked';
    }
    constructor() {
        super();
        /**
         * Event emitter that fires when the indeterminate state changes.
         *
         * @event indeterminateChange
         * @type {EventEmitter<boolean>}
         */
        this.indeterminateChange = new EventEmitter();
        this.type = 'checkbox';
        this.ngControl = inject(NgControl, { optional: true, self: true });
        this._elementRef = inject(ElementRef);
        this._renderer = inject(Renderer2);
        this._indeterminate = false;
        this.onChange = (_) => {
            /* Nothing to be Done so far */
        };
        // 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.onBlur = (_) => {
            /* Nothing to be Done so far */
        };
        // if there's no id attribute set one
        if (!this._elementRef.nativeElement.id) {
            this.setIdAttribute();
        }
        // register control valueAccessor
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
    }
    /**
     * Lifecycle hook that is called after data-bound properties are initialized.
     * Sets the default control value if needed.
     */
    ngOnInit() {
        super.ngOnInit();
        // in case control value is null set the default one (isChecked) and sync Control State
        if (this.ngControl?.control?.value === null) {
            this.ngControl.control.setValue(this._checked, { emitModelToViewChange: false });
            // changing Model Expression after view checked, so detect changes
            // TODO: check why although it's checked .checked returns false
            // this.ngControl.viewToModelUpdate(this._checked);
            // this._cd.detectChanges();
        }
    }
    /**
     * Lifecycle hook that performs custom change detection.
     * Updates invalid state based on control status.
     */
    ngDoCheck() {
        if (this.ngControl) {
            this._isInvalid = this.ngControl.invalid && this.ngControl.touched;
        }
    }
    /**
     * Lifecycle hook that is called when data-bound properties change.
     * Handles changes to checked and readonly states.
     *
     * @param {SimpleChanges} changes - Object containing changed properties
     */
    ngOnChanges(changes) {
        if (changes['checked']) {
            const currentValue = coerceBooleanProperty(changes['checked']?.currentValue);
            if (currentValue !== this?.ngControl?.control?.value) {
                this._checked = currentValue;
                this._elementRef.nativeElement.checked = currentValue;
            }
        }
        if (changes['readonly']) {
            const readonly = coerceBooleanProperty(changes['readonly']?.currentValue);
            if (readonly) {
                this._renderer.setAttribute(this._elementRef.nativeElement, 'readonly', null);
            }
            else {
                this._renderer.removeAttribute(this._elementRef.nativeElement, 'readonly');
            }
        }
    }
    /**
     * Implements ControlValueAccessor writeValue method.
     * Updates the checked state of the checkbox.
     *
     * @param {boolean} obj - The value to write
     */
    writeValue(obj) {
        this._checked = coerceBooleanProperty(obj) ? true : undefined;
        this._elementRef.nativeElement.checked = this._checked ? true : undefined;
    }
    // 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
    registerOnChange(fn) {
        this.onChange = fn;
    }
    // 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
    registerOnTouched(fn) {
        this.onBlur = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    /**
     * Event handler for checkbox change events.
     *
     * @param {boolean} checked - The new checked state
     * @protected
     */
    onChanged(checked) {
        if (checked) {
            this._renderer.setAttribute(this._elementRef.nativeElement, 'checked', 'true');
            this._checked = true;
        }
        else {
            this._renderer.removeAttribute(this._elementRef.nativeElement, 'checked');
            this._checked = undefined;
        }
        this.onChange(checked);
    }
    /**
     * Event handler for space key press.
     * Prevents space key action when checkbox is readonly.
     *
     * @param {KeyboardEvent} event - The keyboard event
     * @protected
     */
    onSpacePressed(event) {
        if (this.readonly) {
            event.preventDefault();
            event.stopPropagation();
        }
    }
    /**
     * Sets the invalid state of the checkbox.
     *
     * @deprecated Use the boolean version instead
     * @param state - The invalid state to set (true/false)
     * @protected
     */
    // 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
    setInvalid(state) {
        // in case it's controlled by NgControl override
        this._isInvalid = this.control ? this.control.invalid && this.control.touched : coerceBooleanProperty(state);
    }
    /**
     * Sets the indeterminate state of the checkbox. This is also known as "mixed" mode and can be used to
     * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
     * check-able items.
     *
     * @param value
     */
    _syncIndeterminate(value) {
        if (this._elementRef) {
            this._elementRef.nativeElement.indeterminate = value;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiInputCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: EuiInputCheckboxComponent, isStandalone: true, selector: "input[euiInputCheckBox]", inputs: { indeterminate: "indeterminate", isInvalid: "isInvalid", checked: "checked" }, outputs: { indeterminateChange: "indeterminateChange" }, host: { listeners: { "change": "onChanged($any($event.target).checked)", "keydown.space": "onSpacePressed($any($event))" }, properties: { "class": "this.cssClasses", "attr.type": "this.type", "attr.checked": "this.checked", "attr.aria-label": "this.ariaLabel" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: [".eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden){appearance:inherit;align-items:center;border-radius:var(--eui-br-xs);cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;height:var(--eui-s-xl);justify-content:center;margin-right:var(--eui-s-s);position:relative;vertical-align:middle;width:var(--eui-s-xl);accent-color:var(--eui-c-white);background:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-secondary-border)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden) ::ng-deep~.eui-label,.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden) ::ng-deep~label{display:inline-flex;cursor:pointer;font:var(--eui-f-m);margin-right:var(--eui-s-m);white-space:inherit}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):checked{background:var(--eui-c-primary-surface);border:var(--eui-bw-xs) solid var(--eui-c-primary-base)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):checked:before{height:1rem;width:1rem;content:\"\";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:var(--eui-internal-icon-checkmark-path);mask-image:var(--eui-internal-icon-checkmark-path);background-color:var(--eui-c-white);height:var(--eui-s-l);width:var(--eui-s-l)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):indeterminate{background:var(--eui-c-primary-surface);border:var(--eui-bw-xs) solid var(--eui-c-primary-base)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):indeterminate:before{height:1rem;width:1rem;content:\"\";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:var(--eui-internal-icon-remove-path);mask-image:var(--eui-internal-icon-remove-path);background-color:var(--eui-c-white);height:var(--eui-s-l);width:var(--eui-s-l)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):disabled:not([readonly]){background:var(--eui-c-disabled-bg);opacity:var(--eui-o-50);pointer-events:none;-webkit-user-select:none;user-select:none}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):disabled:not([readonly]):checked:before{height:1rem;width:1rem;content:var(--eui-internal-icon-checkmark-path);background-color:var(--eui-c-text);height:var(--eui-s-l);width:var(--eui-s-l)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):disabled:not([readonly])+::ng-deep label{pointer-events:none}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden)[readonly]{opacity:var(--eui-o-75);pointer-events:none;-webkit-user-select:none;user-select:none}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:checked{background:var(--eui-c-primary-surface);border:var(--eui-bw-xs) solid var(--eui-c-primary-base)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:checked:before{height:1rem;width:1rem;content:\"\";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:var(--eui-internal-icon-checkmark-path);mask-image:var(--eui-internal-icon-checkmark-path);background-color:var(--eui-c-white);height:var(--eui-s-l);width:var(--eui-s-l)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden)[readonly]+::ng-deep label{align-items:center;pointer-events:none}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:not(:disabled):not([readonly]),.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:not(:disabled):not([readonly]){accent-color:var(--eui-c-danger-surface);appearance:inherit;background-color:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-danger-base)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:not(:disabled):not([readonly]):checked,.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:not(:disabled):not([readonly]):checked{background:var(--eui-c-danger-surface)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:not(:disabled):not([readonly]):checked:before,.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:not(:disabled):not([readonly]):checked:before{height:1rem;width:1rem;content:\"\";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:var(--eui-internal-icon-checkmark-path);mask-image:var(--eui-internal-icon-checkmark-path);background-color:var(--eui-c-white);height:var(--eui-s-l);width:var(--eui-s-l)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):focus:not([readonly]){outline:var(--eui-bw-s) solid var(--eui-c-primary-border-light)!important;outline-offset:1px!important;border-radius:var(--eui-br-xs)!important}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:not([readonly]),.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:not([readonly]){outline-color:var(--eui-c-danger-border-light)!important}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: EuiInputCheckboxComponent, decorators: [{
            type: Component,
            args: [{ selector: 'input[euiInputCheckBox]', template: '', styles: [".eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden){appearance:inherit;align-items:center;border-radius:var(--eui-br-xs);cursor:pointer;display:inline-flex;flex-direction:row;flex-shrink:0;height:var(--eui-s-xl);justify-content:center;margin-right:var(--eui-s-s);position:relative;vertical-align:middle;width:var(--eui-s-xl);accent-color:var(--eui-c-white);background:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-secondary-border)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden) ::ng-deep~.eui-label,.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden) ::ng-deep~label{display:inline-flex;cursor:pointer;font:var(--eui-f-m);margin-right:var(--eui-s-m);white-space:inherit}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):checked{background:var(--eui-c-primary-surface);border:var(--eui-bw-xs) solid var(--eui-c-primary-base)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):checked:before{height:1rem;width:1rem;content:\"\";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:var(--eui-internal-icon-checkmark-path);mask-image:var(--eui-internal-icon-checkmark-path);background-color:var(--eui-c-white);height:var(--eui-s-l);width:var(--eui-s-l)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):indeterminate{background:var(--eui-c-primary-surface);border:var(--eui-bw-xs) solid var(--eui-c-primary-base)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):indeterminate:before{height:1rem;width:1rem;content:\"\";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:var(--eui-internal-icon-remove-path);mask-image:var(--eui-internal-icon-remove-path);background-color:var(--eui-c-white);height:var(--eui-s-l);width:var(--eui-s-l)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):disabled:not([readonly]){background:var(--eui-c-disabled-bg);opacity:var(--eui-o-50);pointer-events:none;-webkit-user-select:none;user-select:none}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):disabled:not([readonly]):checked:before{height:1rem;width:1rem;content:var(--eui-internal-icon-checkmark-path);background-color:var(--eui-c-text);height:var(--eui-s-l);width:var(--eui-s-l)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):disabled:not([readonly])+::ng-deep label{pointer-events:none}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden)[readonly]{opacity:var(--eui-o-75);pointer-events:none;-webkit-user-select:none;user-select:none}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:checked{background:var(--eui-c-primary-surface);border:var(--eui-bw-xs) solid var(--eui-c-primary-base)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:checked:before{height:1rem;width:1rem;content:\"\";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:var(--eui-internal-icon-checkmark-path);mask-image:var(--eui-internal-icon-checkmark-path);background-color:var(--eui-c-white);height:var(--eui-s-l);width:var(--eui-s-l)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden)[readonly]+::ng-deep label{align-items:center;pointer-events:none}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:not(:disabled):not([readonly]),.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:not(:disabled):not([readonly]){accent-color:var(--eui-c-danger-surface);appearance:inherit;background-color:var(--eui-c-surface-container);border:var(--eui-bw-xs) solid var(--eui-c-danger-base)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:not(:disabled):not([readonly]):checked,.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:not(:disabled):not([readonly]):checked{background:var(--eui-c-danger-surface)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:not(:disabled):not([readonly]):checked:before,.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:not(:disabled):not([readonly]):checked:before{height:1rem;width:1rem;content:\"\";-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-image:var(--eui-internal-icon-checkmark-path);mask-image:var(--eui-internal-icon-checkmark-path);background-color:var(--eui-c-white);height:var(--eui-s-l);width:var(--eui-s-l)}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden):focus:not([readonly]){outline:var(--eui-bw-s) solid var(--eui-c-primary-border-light)!important;outline-offset:1px!important;border-radius:var(--eui-br-xs)!important}.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:not([readonly]),.eui-21 :host.eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:not([readonly]){outline-color:var(--eui-c-danger-border-light)!important}\n"] }]
        }], ctorParameters: () => [], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], indeterminateChange: [{
                type: Output
            }], indeterminate: [{
                type: Input
            }], isInvalid: [{
                type: Input
            }], type: [{
                type: HostBinding,
                args: ['attr.type']
            }], checked: [{
                type: HostBinding,
                args: ['attr.checked']
            }, {
                type: Input
            }], ariaLabel: [{
                type: HostBinding,
                args: ['attr.aria-label']
            }], onChanged: [{
                type: HostListener,
                args: ['change', ['$any($event.target).checked']]
            }], onSpacePressed: [{
                type: HostListener,
                args: ['keydown.space', ['$any($event)']]
            }] } });

const EUI_INPUT_CHECKBOX = [
    EuiInputCheckboxComponent,
];
// export { EuiInputCheckboxComponent as EuiInputCheckbox } from './eui-input-checkbox.component';

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

export { EUI_INPUT_CHECKBOX, EuiInputCheckboxComponent };
//# sourceMappingURL=eui-components-eui-input-checkbox.mjs.map
