'use client';
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var lit = require('lit');
var decorators_js = require('lit/decorators.js');
var classMap_js = require('lit/directives/class-map.js');
var ifDefined_js = require('lit/directives/if-defined.js');
var sgdsElement = require('../../base/sgds-element.cjs.js');
var formLabel = require('../../styles/form-label.cjs.js');
var formCheck = require('../../styles/form-check.cjs.js');
var generateId = require('../../utils/generateId.cjs.js');
var watch = require('../../utils/watch.cjs.js');
var radio = require('./radio.cjs.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["default"] {
    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 = generateId["default"]("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 lit.html `
      <div class="form-check">
        <input
          class=${classMap_js.classMap({
            "form-check-input": true,
            "is-invalid": this.invalid
        })}
          type="radio"
          id=${ifDefined_js.ifDefined(this.radioId)}
          value=${ifDefined_js.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_js.ifDefined(this.radioId)}" aria-label=${ifDefined_js.ifDefined(this.ariaLabel)} class="form-check-label">
          <slot></slot>
        </label>
      </div>
    `;
    }
}
SgdsRadio.styles = [...sgdsElement["default"].styles, formCheck["default"], formLabel["default"], radio["default"]];
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsRadio.prototype, "checked", void 0);
tslib.__decorate([
    decorators_js.property()
], SgdsRadio.prototype, "value", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsRadio.prototype, "disabled", void 0);
tslib.__decorate([
    decorators_js.property({ type: Boolean, reflect: true })
], SgdsRadio.prototype, "invalid", void 0);
tslib.__decorate([
    decorators_js.query("input")
], SgdsRadio.prototype, "input", void 0);
tslib.__decorate([
    watch.watch("checked")
], SgdsRadio.prototype, "handleCheckedChange", null);
tslib.__decorate([
    watch.watch("disabled", { waitUntilFirstUpdate: true })
], SgdsRadio.prototype, "handleDisabledChange", null);

exports.SgdsRadio = SgdsRadio;
exports["default"] = SgdsRadio;
//# sourceMappingURL=sgds-radio.cjs.js.map
