'use strict';

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

const index = require('./index-b7293b2f.js');
const theme = require('./theme-1ac31ccf.js');

const radioCss = ":host{display:inline-block;position:relative;box-sizing:border-box;user-select:none;z-index:1}:host button{padding:0;display:flex;align-items:center;transition:color 0.25s ease;border:none;outline:none;background-color:transparent;line-height:var(--radio-line-height, 1.5);cursor:pointer}:host(:focus),:host(:hover){outline:none}:host(:focus) button,:host(:hover) button{color:#256EC1}.radio-icon{margin-left:0;margin-right:var(--radio-icon-margin-right, 0.5em);width:var(--radio-icon-size, 1.125em);height:var(--radio-icon-size, 1.125em)}.radio-icon-inner{fill:#ffffff;stroke:none}#radioLabel{font-family:var(--radio-label-font-family);font-size:var(--radio-label-font-size)}:host(.radio-checked) .radio-icon-inner{fill:#256EC1;stroke:none;transition:all 0.25s ease}.radio-icon,.radio-inner{box-sizing:border-box}:host(.radio-disabled){pointer-events:none}:host(.radio-disabled) .radio-icon-outer{fill:none;stroke:#222222;transition:all 0.25s ease}";

const Radio = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.luStyle = index.createEvent(this, "luStyle", 7);
    this.luSelect = index.createEvent(this, "luSelect", 7);
    this.luDeselect = index.createEvent(this, "luDeselect", 7);
    this.luFocus = index.createEvent(this, "luFocus", 7);
    this.luBlur = index.createEvent(this, "luBlur", 7);
    /**
     * Used by parent to prevent deselection
     */
    this.canDeselect = false;
    /**
     * If `true`, the user cannot interact with the radio.
     */
    this.disabled = false;
    /**
     * If `true`, the radio is selected.
     */
    this.checked = false;
    this.onFocus = () => {
      this.hasFocus = true;
      this.luFocus.emit();
    };
    this.onBlur = () => {
      this.hasFocus = false;
      this.luBlur.emit();
    };
  }
  checkedChanged(isChecked) {
    if (isChecked) {
      this.luSelect.emit({
        checked: true,
        value: this.value,
      });
    }
  }
  onClick() {
    if (this.canDeselect || !this.checked) {
      this.checked = !this.checked;
    }
  }
  onKeyDown(event) {
    if (event.key === " " && (this.canDeselect || !this.checked)) {
      this.checked = !this.checked;
    }
  }
  render() {
    const { disabled, checked, color, el } = this;
    let labelId;
    if (this.labeledById) {
      labelId = this.labeledById + "-lbl";
    }
    return (index.h(index.Host, { "aria-checked": checked, "aria-disabled": disabled ? "true" : null, "aria-labelledby": labelId, class: Object.assign(Object.assign({}, theme.createColorClasses(color)), { "in-item": theme.hostContext("lu-item", el), interactive: true, "radio-checked": checked, "radio-disabled": disabled }), "data-is-radio-checked": this.checked, "has-focus": this.hasFocus, onBlur: this.onBlur, onFocus: this.onFocus, role: "radio", tabindex: "0" }, index.h("button", { disabled: this.disabled, tabindex: "-1", type: "button" }, index.h("svg", { class: "radio-icon", viewBox: "0 0 23 22" }, index.h("g", { stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd" }, index.h("g", { id: "radio-unselected", transform: "translate(2.000000, 2.000000)", fill: "#FFFFFF", stroke: "#256EC1", "stroke-width": "2" }, index.h("path", { class: "radio-icon-outer", d: "M9.5,19 C3.9771525,19 -0.5,14.5228475 -0.5,9 C-0.5,3.4771525 3.9771525,-1 9.5,-1 C15.0228475,-1 19.5,3.4771525 19.5,9 C19.5,14.5228475 15.0228475,19 9.5,19 Z" }), index.h("path", { class: "radio-icon-inner", d: "M9.5,15 C12.8137085,15 15.5,12.3137085 15.5,9 C15.5,5.6862915 12.8137085,3 9.5,3 C6.1862915,3 3.5,5.6862915 3.5,9 C3.5,12.3137085 6.1862915,15 9.5,15 Z", id: "Oval-12-Copy-2" })))), index.h("span", { id: "radioLabel" }, index.h("slot", null)))));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "checked": ["checkedChanged"]
  }; }
};
Radio.style = radioCss;

exports.lu_radio = Radio;

//# sourceMappingURL=lu-radio.cjs.entry.js.map