import { ElementRef, HostBinding, Input, Optional, Renderer2, Self, HostListener, ChangeDetectorRef, Component, ViewEncapsulation, } from '@angular/core';
import { NgControl } from '@angular/forms';
import { InputDirective } from '../../input.directive';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import * as i0 from "@angular/core";
import * as i1 from "@angular/forms";
const _c0 = ["euiInputCheckBox", ""];
export class EuiInputCheckboxComponent extends InputDirective {
    constructor(ngControl, _elementRef, _renderer, _cd) {
        super(_elementRef, _renderer, ngControl);
        this.ngControl = ngControl;
        this._elementRef = _elementRef;
        this._renderer = _renderer;
        this._cd = _cd;
        this.type = 'checkbox';
        this.onChange = (_) => { };
        this.onBlur = (_) => { };
        // if there's no id attribute set one
        if (!this._id) {
            this.setIdAttribute();
        }
        // register control valueAccessor
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
    }
    get cssClasses() {
        return [
            this.getCssClasses('eui-input-checkbox'),
            this._hasLabel ? '' : 'eui-input-checkbox--nolabel',
            this._isInvalid ? `eui-input-checkbox--invalid` : '',
        ].join(' ').trim();
    }
    get isInvalid() {
        return this._isInvalid || null;
    }
    set isInvalid(state) {
        this.setInvalid(state);
    }
    get checked() {
        return this._checked;
    }
    set checked(value) {
        this._checked = coerceBooleanProperty(value) ? true : undefined;
    }
    get id() {
        return this._id;
    }
    set id(value) {
        this.setIdAttribute(value);
    }
    ngOnInit() {
        var _a, _b;
        super.ngOnInit();
        // in case control value is null set the default one (isChecked) and sync Control State
        if (((_b = (_a = this.ngControl) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.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();
        }
    }
    ngDoCheck() {
        this._hasLabel = document.querySelector(`[for='${this._id}']`) ? true : false;
        if (this.ngControl) {
            this._isInvalid = this.ngControl.invalid && this.ngControl.touched;
        }
    }
    ngOnChanges(changes) {
        if (changes['label']) {
            // in case label Element already created update the value
            if (this._labelRef) {
                this._renderer.setProperty(this._labelRef, 'innerText', changes['label'].currentValue);
            }
            else {
                // create label Element
                this._labelRef = this._renderer.createElement('label');
                this._renderer.setProperty(this._labelRef, 'innerText', changes['label'].currentValue);
                this._renderer.setAttribute(this._labelRef, 'for', this._id);
                // append label element under the Checkbox
                const parent = this._elementRef.nativeElement.parentElement;
                this._renderer.appendChild(parent, this._labelRef);
                this._renderer.insertBefore(parent, this._labelRef, this._elementRef.nativeElement.nextSibling);
            }
        }
        // in case id change then sync label for attribute
        if (changes['id'] && this._labelRef) {
            this._renderer.setAttribute(this._labelRef, 'for', changes['id'].currentValue);
        }
    }
    writeValue(obj) {
        this._checked = coerceBooleanProperty(obj) ? true : undefined;
        this._elementRef.nativeElement.checked = this._checked ? true : undefined;
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onBlur = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    onChanged(checked) {
        this.onChange(checked);
    }
    setInvalid(state) {
        // in case it's controlled by NgControl override
        this._isInvalid = this.control ? this.control.invalid && this.control.touched : coerceBooleanProperty(state);
    }
}
/** @nocollapse */ EuiInputCheckboxComponent.ɵfac = function EuiInputCheckboxComponent_Factory(t) { return new (t || EuiInputCheckboxComponent)(i0.ɵɵdirectiveInject(i1.NgControl, 10), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
/** @nocollapse */ EuiInputCheckboxComponent.ɵcmp = i0.ɵɵdefineComponent({ type: EuiInputCheckboxComponent, selectors: [["input", "euiInputCheckBox", ""]], hostVars: 5, hostBindings: function EuiInputCheckboxComponent_HostBindings(rf, ctx) { if (rf & 1) {
        i0.ɵɵlistener("change", function EuiInputCheckboxComponent_change_HostBindingHandler($event) { return ctx.onChanged($event.target.checked); });
    } if (rf & 2) {
        i0.ɵɵattribute("type", ctx.type)("checked", ctx.checked)("id", ctx.id);
        i0.ɵɵclassMap(ctx.cssClasses);
    } }, inputs: { isInvalid: "isInvalid", label: "label", styleClass: "styleClass", checked: "checked", id: "id" }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c0, decls: 0, vars: 0, template: function EuiInputCheckboxComponent_Template(rf, ctx) { }, styles: ["@charset \"UTF-8\";input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden){border:0;clip:rect(0 0 0 0);height:calc(var(--eui-spacing) + var(--eui-spacing-2xs));opacity:0;overflow:hidden;padding:0;position:absolute;width:calc(var(--eui-spacing) + var(--eui-spacing-2xs))}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):after{background:transparent;clip:auto;content:\"\";opacity:1}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):before{background:var(--eui-color-white);border-radius:0;clip:auto;content:\"\";cursor:pointer;display:inline-block;height:calc(var(--eui-spacing) + var(--eui-spacing-2xs));margin-right:var(--eui-spacing);opacity:1;position:relative;text-align:center;transition:all .25s ease;vertical-align:top;width:calc(var(--eui-spacing) + var(--eui-spacing-2xs))}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):checked:after{background:transparent;color:var(--eui-color-white);content:\"\uF3C5\";font-family:eui-icons,sans-serif;font-weight:700;position:absolute;top:0}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):checked:before{background:var(--eui-color-primary)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--nolabel{clip:auto;cursor:pointer;opacity:1}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--nolabel:after{background:transparent;clip:auto;content:\"\";opacity:1;position:absolute}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--nolabel:before{background:var(--eui-color-white);border:2px solid var(--eui-color-grey);border-radius:0;clip:auto;content:\"\";cursor:pointer;display:inline-block;height:calc(var(--eui-spacing) + var(--eui-spacing-2xs));margin-right:var(--eui-spacing);opacity:1;position:relative;text-align:center;transition:all .25s ease;vertical-align:top;width:calc(var(--eui-spacing) + var(--eui-spacing-2xs))}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--nolabel:checked:after{background:transparent;color:var(--eui-color-white);content:\"\uF3C5\";font-family:eui-icons,sans-serif;font-weight:700;left:var(--eui-spacing-3xs);top:0}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--nolabel:checked:before{background:var(--eui-color-primary);border:2px solid var(--eui-color-primary);box-shadow:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled{color:var(--eui-color-grey);pointer-events:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled:before{background:transparent;border:2px solid var(--eui-color-grey-lighter);color:var(--eui-color-white)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled:checked:before{background-color:var(--eui-color-grey-lightester-2);border:2px solid var(--eui-color-grey-lighter)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled:checked:after{background:transparent}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):active,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):active:before,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):focus,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):focus:before{-moz-outline-radius:var(--eui-base-border-radius);outline:2px solid var(--eui-color-accessible-focus);outline-offset:0;transition:outline .15s ease-in-out,border .15s ease-in-out}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):active:before,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):focus:before{box-shadow:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):active+label:before,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):focus+label:before{-moz-outline-radius:var(--eui-base-border-radius);outline:2px solid var(--eui-color-accessible-focus);outline-offset:0;transition:outline .15s ease-in-out,border .15s ease-in-out}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:after{content:\"\"}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:before{background:var(--eui-color-grey-lighter);border:2px solid var(--eui-color-grey)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:checked:after{color:var(--eui-color-white);content:\"\uF3C5\";font-family:eui-icons,sans-serif;font-weight:700}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:checked:before{background:var(--eui-color-primary-lightest);border:2px solid var(--eui-color-primary-lightest)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)+label{cursor:pointer;padding-right:var(--eui-spacing-m)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)+label:after{background:transparent;content:\"\";left:2px;margin-left:0;position:absolute}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)+label:before{background:var(--eui-color-white);border:2px solid var(--eui-color-grey);border-radius:0;box-shadow:none!important;content:\"\";cursor:pointer;display:inline-block;flex-shrink:0;height:calc(var(--eui-spacing) + var(--eui-spacing-2xs));margin-right:var(--eui-spacing-s);position:relative;text-align:center;transition:all .25s ease!important;vertical-align:top;width:calc(var(--eui-spacing) + var(--eui-spacing-2xs))}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)+label:empty:before{margin-right:0}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):checked+label:after{background:transparent;color:var(--eui-color-white);content:\"\uF3C5\";font-family:eui-icons,sans-serif;font-size:var(--eui-font-size-m);font-weight:700}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):checked+label:before{background:var(--eui-color-primary);border:2px solid var(--eui-color-primary)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled+label{color:var(--eui-color-grey);pointer-events:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled+label:before{background:var(--eui-color-grey-lightest);border-color:var(--eui-color-grey-lighter);opacity:1}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled:checked{pointer-events:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled:checked:after{color:var(--eui-color-grey-light);content:\"\uF3C5\";font-family:eui-icons,sans-serif;font-weight:700}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled:checked+label{color:var(--eui-color-grey);pointer-events:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled:checked+label:after{color:var(--eui-color-grey);content:\"\uF3C5\";font-family:eui-icons,sans-serif;font-weight:700}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden):disabled:checked+label:before{background:var(--eui-color-grey-lightester-2);border:2px solid var(--eui-color-grey-lighter)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]{background:var(--eui-color-grey);background-image:none;box-shadow:none;outline:none;pointer-events:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]+label{color:var(--eui-color-font);cursor:not-allowed;pointer-events:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]+label:after{content:\"\"}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]+label:before{background:var(--eui-color-grey-lighter);border:2px solid var(--eui-color-grey)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:checked{pointer-events:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:checked+label{color:var(--eui-color-font);pointer-events:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:checked+label:after{color:var(--eui-color-white);content:\"\uF3C5\";font-family:eui-icons,sans-serif;font-weight:700}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden)[readonly]:checked+label:before{background:var(--eui-color-primary-lightest);border:2px solid var(--eui-color-primary-lightest)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger+label:before,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid+label:before{border:2px solid var(--eui-color-danger)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:checked+label:before,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:checked+label:before{background:var(--eui-color-danger);border:2px solid var(--eui-color-danger)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:checked+label:after,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:checked+label:after{color:var(--eui-color-white)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:disabled,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:disabled{opacity:var(--eui-disabled-opacity-base)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:disabled+label:before,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:disabled+label:before{background:var(--eui-color-danger-lightester);border:2px solid var(--eui-color-danger);opacity:var(--eui-disabled-opacity-base)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:disabled:checked+label:after,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:disabled:checked+label:after{color:var(--eui-color-danger)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger:disabled:checked+label:before,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid:disabled:checked+label:before{border:2px solid var(--eui-color-danger)}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger[readonly]:checked,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid[readonly]:checked{pointer-events:none}input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--danger[readonly]:checked+label:before,input[type=checkbox].eui-input-checkbox:not(.cdk-visually-hidden).eui-input-checkbox--invalid[readonly]:checked+label:before{background:var(--eui-color-primary-lightest)}"], encapsulation: 2 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(EuiInputCheckboxComponent, [{
        type: Component,
        args: [{
                // tslint:disable-next-line:component-selector
                selector: 'input[euiInputCheckBox]',
                styleUrls: ['./styles/_index.scss'],
                template: '',
                encapsulation: ViewEncapsulation.None
            }]
    }], function () { return [{ type: i1.NgControl, decorators: [{
                type: Optional
            }, {
                type: Self
            }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, { cssClasses: [{
            type: HostBinding,
            args: ['class']
        }], isInvalid: [{
            type: Input
        }], label: [{
            type: Input
        }], styleClass: [{
            type: Input
        }], type: [{
            type: HostBinding,
            args: ['attr.type']
        }], checked: [{
            type: HostBinding,
            args: ['attr.checked']
        }, {
            type: Input
        }], id: [{
            type: HostBinding,
            args: ['attr.id']
        }, {
            type: Input
        }], onChanged: [{
            type: HostListener,
            args: ['change', ['$event.target.checked']]
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 