import { __decorate } from 'tslib';
import { html } from 'lit';
import { property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import SgdsElement from '../../base/sgds-element.js';
import css_248z$1 from '../../styles/form-label.js';
import css_248z from '../../styles/form-check.js';
import genId from '../../utils/generateId.js';
import { watch } from '../../utils/watch.js';
import css_248z$2 from './radio.js';

/**
 * @summary Radio allows the user to select one option from a set while seeing all available options.
 *
 * @slot default - The label of the radio input
 *
 * @event sgds-focus - Emitted when the control gains focus.
 * @event sgds-blur - Emitted when the control loses focus.
 */
class SgdsRadio extends SgdsElement {
    constructor() {
        super(...arguments);
        /**
         * Draws the radio in a checked state. When used with SgdsRadioGroup, the value prop of SgdsRadioGroup overrides the checked prop
         */
        this.checked = false;
        /** Disables the radio. */
        this.disabled = false;
        /** Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements */
        this.invalid = false;
        this.radioId = genId("radio");
    }
    connectedCallback() {
        super.connectedCallback();
        this.setInitialAttributes();
        this.addEventListeners();
    }
    handleCheckedChange() {
        var _a;
        if (this.checked) {
            (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
        }
        this.setAttribute("aria-checked", this.checked ? "true" : "false");
        this.setAttribute("tabindex", this.checked ? "0" : "-1");
    }
    handleDisabledChange() {
        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
    }
    handleBlur() {
        this.emit("sgds-blur");
    }
    handleClick() {
        if (!this.disabled) {
            this.checked = true;
        }
    }
    handleFocus() {
        this.emit("sgds-focus");
    }
    addEventListeners() {
        this.addEventListener("blur", () => this.handleBlur());
        this.addEventListener("click", () => this.handleClick());
        this.addEventListener("focus", () => this.handleFocus());
    }
    setInitialAttributes() {
        this.setAttribute("role", "radio");
        this.setAttribute("tabindex", "-1");
        this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
    }
    render() {
        return html `
      <div class="form-check">
        <input
          class=${classMap({
            "form-check-input": true,
            "is-invalid": this.invalid
        })}
          type="radio"
          id=${ifDefined(this.radioId)}
          value=${ifDefined(this.value)}
          ?checked=${this.checked}
          ?disabled=${this.disabled}
          aria-disabled=${this.disabled ? "true" : "false"}
          aria-checked=${this.checked ? "true" : "false"}
          @click=${this.handleClick}
        />
        <label for="${ifDefined(this.radioId)}" aria-label=${ifDefined(this.ariaLabel)} class="form-check-label">
          <slot></slot>
        </label>
      </div>
    `;
    }
}
SgdsRadio.styles = [...SgdsElement.styles, css_248z, css_248z$1, css_248z$2];
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsRadio.prototype, "checked", void 0);
__decorate([
    property()
], SgdsRadio.prototype, "value", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsRadio.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsRadio.prototype, "invalid", void 0);
__decorate([
    query("input")
], SgdsRadio.prototype, "input", void 0);
__decorate([
    watch("checked")
], SgdsRadio.prototype, "handleCheckedChange", null);
__decorate([
    watch("disabled", { waitUntilFirstUpdate: true })
], SgdsRadio.prototype, "handleDisabledChange", null);

export { SgdsRadio, SgdsRadio as default };
//# sourceMappingURL=sgds-radio.js.map
