import { h } from "@stencil/core";
import { guid } from "../../utils";
export class RadioButton {
    constructor() {
        this.color = 'brand';
        this.hasHelperText = false;
        this.disabled = false;
        this.id = guid();
        this.value = '';
        this.checked = false;
        this.handleActive = () => {
            var _a;
            (_a = this.radioLabelRef) === null || _a === void 0 ? void 0 : _a.classList.add('active');
        };
        this.handleRemoveActive = () => {
            var _a;
            (_a = this.radioLabelRef) === null || _a === void 0 ? void 0 : _a.classList.remove('active');
        };
        this.handleFocus = () => {
            var _a;
            (_a = this.radioLabelRef) === null || _a === void 0 ? void 0 : _a.classList.add('focus');
        };
        this.handleFocusOut = () => {
            var _a;
            (_a = this.radioLabelRef) === null || _a === void 0 ? void 0 : _a.classList.remove('focus');
        };
        this.handleEscape = (event) => {
            var _a, _b;
            if (event.key === 'Escape') {
                (_b = (_a = this.radioLabelRef) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === null || _b === void 0 ? void 0 : _b.blur();
                this.handleFocusOut();
            }
        };
    }
    componentDidLoad() {
        window.addEventListener('keydown', this.handleEscape);
    }
    disconnectedCallback() {
        window.removeEventListener('keydown', this.handleEscape);
    }
    render() {
        return (h("label", { key: '52025f114cb64f2c4e40e2d70af80a9e3be49cde', ref: el => (this.radioLabelRef = el), class: `radio ${this.color ? 'radio--' + this.color : ''}`, onMouseDown: this.handleActive, onMouseUp: this.handleRemoveActive, onMouseOut: this.handleRemoveActive, onChange: this.handleRemoveActive }, h("div", { key: 'bc0fb8774a186d5d6cd339d0432f8650c1d1a423', class: "radio-main" }, h("div", { key: '0f6a5dd031b11842d643607c9c1395e4c14b4669', class: "radio-main__content" }, h("input", { key: 'ae84e863da85bc9ba213296cdceae1577f7f0cac', type: "radio", name: this.name, value: this.value,
            // id={this.id}
            onChange: this.onChange, onInput: this.onInput, disabled: this.disabled,
            // onFocus={this.handleFocus}
            // onBlur={this.handleFocusOut}
            checked: this.checked }), h("div", { key: '00e07c7e8a7e1515b85752d6ac554ede6df200b0', class: "radio-container" }), (this.label || this.hasHelperText) && h("div", { key: '3141d69c1e8690920f9ee62ccdd3121667a155fc', class: "dga-flex-column" }, this.label && h("span", { key: 'f8d97dffe7edbd934787aa8c098689f576f2f91f', class: "radio__label" }, this.label), this.hasHelperText && this.helperText && h("span", { key: '0b2f1acdd260d805c4da0cae1d94153d0e809a62', class: "radio__helper-text" }, this.helperText))), this.alertMessage && this.alertText && (h("div", { key: '42a11551cc1be3cb82dbd1f9278067f99747e4f2', class: "radio__warning" }, h("span", { key: '155c14f3e5977e345cd12e94681236f3e8609fed', class: "radio__warning-icon" }, h("i", { key: '377c91a6b2457d1db481f43460212f84400713ad', class: 'hgi-stroke hgi-alert-circle', style: { fontSize: "16px" } })), h("span", { key: '41c4bca8ffc4641a7a97fb9899c0a4ffcbf6ba3c', class: "radio__warning-text" }, this.alertText))))));
    }
    static get is() { return "dga-radio-button"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-radio-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-radio-button.css"]
        };
    }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'neutral' | 'brand'",
                    "resolved": "\"brand\" | \"neutral\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "color",
                "reflect": false,
                "defaultValue": "'brand'"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "hasHelperText": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "has-helper-text",
                "reflect": false,
                "defaultValue": "false"
            },
            "helperText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "helper-text",
                "reflect": false
            },
            "alertMessage": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "alert-message",
                "reflect": false
            },
            "alertText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "alert-text",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "id": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "id",
                "reflect": false,
                "defaultValue": "guid()"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": true
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "value",
                "reflect": false,
                "defaultValue": "''"
            },
            "checked": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "checked",
                "reflect": false,
                "defaultValue": "false"
            },
            "onChange": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event: any) => void",
                    "resolved": "(event: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "onInput": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "(event: any) => void",
                    "resolved": "(event: any) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=dga-radio-button.js.map
