import { ElementRef, HostBinding, Input, Optional, Renderer2, Self, ChangeDetectorRef, Component, ViewEncapsulation, HostListener, } 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 = ["euiInputRadio", ""];
export class EuiInputRadioComponent 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 = 'radio';
        this.onChange = (_) => { };
        this.onTouched = (_) => { };
        // Firefox fix: set type to radio before first ngDoCheck runs
        this._elementRef.nativeElement.type = 'radio';
        // if there's no id attribute set one
        if (!this._id) {
            this.setIdAttribute();
        }
        // register control valueAccessor
        if (this.ngControl) {
            this.ngControl.valueAccessor = this;
        }
    }
    get isInvalid() {
        return this._isInvalid || null;
    }
    set isInvalid(state) {
        this.setInvalid(state);
    }
    get cssClasses() {
        return [
            this.getCssClasses('eui-input-radio'),
            this._isInvalid ? 'eui-input-radio--invalid' : '',
            this._hasLabel ? '' : 'eui-input-radio--nolabel',
        ].join(' ').trim();
    }
    get defaultChecked() {
        return this._defaultChecked;
    }
    set defaultChecked(value) {
        this._defaultChecked = coerceBooleanProperty(value);
    }
    get selected() {
        var _a;
        return (_a = this._elementRef) === null || _a === void 0 ? void 0 : _a.nativeElement.checked;
    }
    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('', { 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 Radio
                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);
        }
        // when readonly changes hide other radio (input+label)
        if (changes['readonly']) {
            // in readonly hide all input elements.
            if (this.readonly) {
                this._renderer.addClass(this._elementRef.nativeElement, 'eui-input-radio--hide');
            }
            else {
                this._renderer.removeClass(this._elementRef.nativeElement, 'eui-input-radio--hide');
            }
            this.processReadonly();
        }
        if (changes['isInvalid']) {
            if (changes['isInvalid'].currentValue) {
                this._renderer.addClass(this._elementRef.nativeElement, 'eui-input-radio--invalid');
            }
            else {
                this._renderer.removeClass(this._elementRef.nativeElement, 'eui-input-radio--invalid');
            }
        }
    }
    writeValue(obj) {
        // set checked state based if radio value matches the control's one
        this._elementRef.nativeElement.checked = (this._elementRef.nativeElement.value === obj);
        this.processReadonly();
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    onCheckedChanged(checked) {
        this._defaultChecked = checked;
    }
    onValueChanged(value) {
        this.onChange(value);
    }
    setInvalid(state) {
        // in case it's controlled by NgControl override
        this._isInvalid = this.control ? this.control.invalid && this.control.touched : coerceBooleanProperty(state);
        // set BaseDirective Attribute
        super.euiDanger = this._isInvalid;
    }
    processReadonly() {
        const notRender = this._readonly && !this._elementRef.nativeElement.checked;
        // control the label that will be rendered
        const labelElementRef = document.querySelector(`[for=${this._id}]`);
        if (labelElementRef) {
            if (notRender) {
                this._renderer.setStyle(labelElementRef, 'display', 'none');
            }
            else {
                this._renderer.removeStyle(labelElementRef, 'display');
            }
        }
    }
}
/** @nocollapse */ EuiInputRadioComponent.ɵfac = function EuiInputRadioComponent_Factory(t) { return new (t || EuiInputRadioComponent)(i0.ɵɵdirectiveInject(i1.NgControl, 10), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
/** @nocollapse */ EuiInputRadioComponent.ɵcmp = i0.ɵɵdefineComponent({ type: EuiInputRadioComponent, selectors: [["input", "euiInputRadio", ""]], hostVars: 4, hostBindings: function EuiInputRadioComponent_HostBindings(rf, ctx) { if (rf & 1) {
        i0.ɵɵlistener("change", function EuiInputRadioComponent_change_HostBindingHandler($event) { return ctx.onValueChanged($event.target.value); });
    } if (rf & 2) {
        i0.ɵɵattribute("type", ctx.type)("checked", ctx.defaultChecked);
        i0.ɵɵclassMap(ctx.cssClasses);
    } }, inputs: { isInvalid: "isInvalid", label: "label", styleClass: "styleClass", defaultChecked: ["checked", "defaultChecked"] }, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], attrs: _c0, decls: 0, vars: 0, template: function EuiInputRadioComponent_Template(rf, ctx) { }, styles: ["input[type=radio].eui-input-radio:not(.cdk-visually-hidden){-moz-appearance:initial;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=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel{box-shadow:none;clip:auto;margin-right:var(--eui-spacing);opacity:1;position:relative}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel:before{background:transparent;border:2px solid var(--eui-color-grey)!important;border-radius:100%;content:\"\";cursor:pointer;display:inline-block;height:calc(var(--eui-spacing) + var(--eui-spacing-2xs));margin-right:var(--eui-spacing);position:relative;text-align:center;transition:all .25s ease;vertical-align:top;width:calc(var(--eui-spacing) + var(--eui-spacing-2xs))}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel:checked:before{background-color:var(--eui-color-primary);border:2px solid var(--eui-color-grey)!important;box-shadow:inset 0 0 0 3px var(--eui-color-white)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel:focus:before{border:2px solid var(--eui-color-accent-darker)!important;transition:border .1s ease-in}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel.eui-input-radio--disabled,input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel:disabled{pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel.eui-input-radio--disabled:before,input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel:disabled:before{background:var(--eui-color-grey-lightester);border:2px solid var(--eui-color-grey-light)!important}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel.eui-input-radio--disabled:checked:before,input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel:disabled:checked:before{background-color:var(--eui-color-primary-lightester);border:2px solid var(--eui-color-grey-light)!important;box-shadow:inset 0 0 0 3px var(--eui-color-grey-lightest)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel[readonly]{display:none;pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel[readonly]:not(:checked):before{display:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel[readonly]:checked{display:inline-block}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel[readonly]:checked:before{background:var(--eui-color-grey);box-shadow:inset 0 0 0 3px var(--eui-color-white)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--nolabel[readonly]:focus:before{border:2px solid var(--eui-color-accent-darker)!important;cursor:pointer;transition:border .1s ease-in}input[type=radio].eui-input-radio:not(.cdk-visually-hidden)--hide{display:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden)+label:not(:empty){cursor:pointer;padding-right:var(--eui-spacing-m)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden)+label:not(:empty):before{background:var(--eui-color-white);border:2px solid var(--eui-color-grey);border-radius:50%;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;top:0;transition:all .25s ease;vertical-align:top;width:calc(var(--eui-spacing) + var(--eui-spacing-2xs))}input[type=radio].eui-input-radio:not(.cdk-visually-hidden)+label:not(:empty):empty:before{margin-right:0}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):checked+label:before{background-color:var(--eui-color-primary);box-shadow:inset 0 0 0 3px var(--eui-color-white)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):disabled{pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):disabled+label{color:var(--eui-color-grey);font-style:normal;opacity:1;pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):disabled+label:before{background:var(--eui-color-grey-lightest);border:2px solid var(--eui-color-grey-lighter);box-shadow:none;opacity:1}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):disabled:checked{pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):disabled:checked+label{color:var(--eui-color-grey);font-style:normal;opacity:1;pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):disabled:checked+label:before{background:var(--eui-color-primary-lightest);border:2px solid var(--eui-color-grey-lighter);box-shadow:inset 0 0 0 3px var(--eui-color-grey-lightest);opacity:1}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):focus:not([readonly])+label:before{border:2px solid var(--eui-color-accent-darker)!important;transition:border .1s ease-in}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):focus[readonly]:not(:checked)+label:before{border:2px solid var(--eui-color-accent-darker)!important;cursor:pointer;transition:border .1s ease-in}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):focus[readonly]:checked+label{outline:2px solid var(--eui-color-accent-darker)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden):focus[readonly]:checked+label:before{border:2px solid var(--eui-color-accent-darker)!important;cursor:pointer;transition:border .1s ease-in}input[type=radio].eui-input-radio:not(.cdk-visually-hidden)[readonly]{pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden)[readonly]:not(:checked)+label{color:var(--eui-color-grey-darkester);font-style:normal;font-weight:700;pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden)[readonly]:not(:checked)+label:before{background:var(--eui-color-grey-lighter);border:2px solid var(--eui-color-grey)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden)[readonly]:checked+label{color:var(--eui-color-grey-darkester);font-style:normal;font-weight:700;pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden)[readonly]:checked+label:before{display:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid:not(:checked):before{background:var(--eui-color-danger-lighter);border:2px solid var(--eui-color-danger)!important}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid:checked{display:inline-block}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid:checked:before{background:var(--eui-color-danger-lightest);box-shadow:inset 0 0 0 3px var(--eui-color-white)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid:not(:checked)+label:before{background:transparent;border:2px solid var(--eui-color-danger)!important}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid:checked+label:before{background:var(--eui-color-danger);border:2px solid var(--eui-color-danger)!important;box-shadow:inset 0 0 0 3px var(--eui-color-white)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid:focus:before{border:2px solid var(--eui-color-accent-darker)!important;transition:border .1s ease-in}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid:disabled{opacity:var(--eui-disabled-opacity-base);pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid:disabled+label:before{background:var(--eui-color-danger-lightester);border:2px solid var(--eui-color-danger)!important;opacity:var(--eui-disabled-opacity-base)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid:disabled:checked+label:before{background-color:var(--eui-color-danger-lightest);box-shadow:inset 0 0 0 3px var(--eui-color-white)}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid[readonly]{background:transparent;box-shadow:none;pointer-events:none}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid[readonly]+label:before{background:var(--eui-color-danger-lightester);border:2px solid var(--eui-color-danger)!important}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid[readonly]:checked+label{color:var(--eui-color-danger);pointer-events:none;top:-4px}input[type=radio].eui-input-radio:not(.cdk-visually-hidden).eui-input-radio--invalid[readonly]:checked+label:before{display:none}"], encapsulation: 2 });
/*@__PURE__*/ (function () { i0.ɵsetClassMetadata(EuiInputRadioComponent, [{
        type: Component,
        args: [{
                // tslint:disable-next-line:component-selector
                selector: 'input[euiInputRadio]',
                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 }]; }, { isInvalid: [{
            type: Input
        }], cssClasses: [{
            type: HostBinding,
            args: ['class']
        }], label: [{
            type: Input
        }], styleClass: [{
            type: Input
        }], type: [{
            type: HostBinding,
            args: ['attr.type']
        }], defaultChecked: [{
            type: HostBinding,
            args: ['attr.checked']
        }, {
            type: Input,
            args: ['checked']
        }], onCheckedChanged: [{
            type: HostListener,
            args: ['change', ['$event.target.checked']]
        }], onValueChanged: [{
            type: HostListener,
            args: ['change', ['$event.target.value']]
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 