/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-211ca8fb.js';
import { h as getAriaLabel } from './helpers-4b2cb009.js';
import { c as createColorClasses, h as hostContext } from './theme-c4ea3043.js';

const gascoRadioMdCss = ":host{--inner-border-radius:50%;display:inline-block;position:relative;box-sizing:border-box;user-select:none;z-index:2}:host(.radio-disabled){pointer-events:none}.radio-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;contain:layout size style}.radio-icon,.radio-inner{box-sizing:border-box}label{left:0;top:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;position:absolute;width:100%;height:100%;border:0;background:transparent;cursor:pointer;appearance:none;outline:none;display:flex;align-items:center;opacity:0}[dir=rtl] label,:host-context([dir=rtl]) label{left:unset;right:unset;right:0}label::-moz-focus-inner{border:0}input{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(:focus){outline:none}:host{--color:var(--gasco-color-step-400, #999999);--color-checked:var(--gasco-color-primary, #00A3E0);--border-width:2px;--border-style:solid;--border-radius:50%;width:20px;height:20px}:host(.gasco-color) .radio-inner{background:var(--gasco-color-base)}:host(.gasco-color.radio-checked) .radio-icon{border-color:var(--gasco-color-base)}.radio-icon{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color)}.radio-inner{border-radius:var(--inner-border-radius);width:calc(50% + var(--border-width));height:calc(50% + var(--border-width));transform:scale3d(0, 0, 0);transition:transform 280ms cubic-bezier(0.4, 0, 0.2, 1);background:var(--color-checked)}:host(.radio-checked) .radio-icon{border-color:var(--color-checked)}:host(.radio-checked) .radio-inner{transform:scale3d(1, 1, 1)}:host(.radio-disabled){opacity:0.3}:host(.gasco-focused) .radio-icon::after{border-radius:var(--inner-border-radius);left:-12px;top:-12px;display:block;position:absolute;width:36px;height:36px;background:var(--gasco-color-primary-tint, #1aace3);content:\"\";opacity:0.2}:host-context([dir=rtl]):host(.gasco-focused) .radio-icon::after,:host-context([dir=rtl]).gasco-focused .radio-icon::after{left:unset;right:unset;right:-12px}:host(.in-item){margin-left:0;margin-right:0;margin-top:9px;margin-bottom:9px;display:block;position:static}:host(.in-item[slot=start]){margin-left:4px;margin-right:36px;margin-top:11px;margin-bottom:10px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.in-item[slot=start]){margin-left:unset;margin-right:unset;-webkit-margin-start:4px;margin-inline-start:4px;-webkit-margin-end:36px;margin-inline-end:36px}}";

const GascoRadio = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.gascoStyle = createEvent(this, "gascoStyle", 7);
    this.gascoFocus = createEvent(this, "gascoFocus", 7);
    this.gascoBlur = createEvent(this, "gascoBlur", 7);
    this.inputId = `gasco-rb-${radioButtonIds++}`;
    /**
     * If `true`, the radio is selected.
     */
    this.checked = false;
    /**
     * The tabindex of the radio button.
     * @internal
     */
    this.buttonTabindex = -1;
    /**
     * The color to use from your application's color palette.
     * Default options are: `"primary"`, `"secondary"`, `"success"`, `"warning"`.
     */
    this.color = 'primary';
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.inputId;
    /**
     * If `true`, the user cannot interact with the radio.
     */
    this.disabled = false;
    this.onClick = () => {
      this.checked = this.nativeInput.checked;
    };
    this.onFocus = () => {
      this.gascoFocus.emit();
    };
    this.onBlur = () => {
      this.gascoBlur.emit();
    };
  }
  /** @internal */
  async setFocus(ev) {
    ev.stopPropagation();
    ev.preventDefault();
    this.el.focus();
  }
  /** @internal */
  async setButtonTabindex(value) {
    this.buttonTabindex = value;
  }
  connectedCallback() {
    if (this.value === undefined) {
      this.value = this.inputId;
    }
  }
  componentWillLoad() {
    this.emitStyle();
  }
  emitStyle() {
    this.gascoStyle.emit({
      'radio-checked': this.checked,
      'interactive-disabled': this.disabled,
    });
  }
  render() {
    const { inputId, disabled, checked, color, el, buttonTabindex } = this;
    const { label, labelId, labelText } = getAriaLabel(el, inputId);
    return (h(Host, { role: "radio", onBlur: this.onBlur, onFocus: this.onFocus, onClick: this.onClick, tabindex: buttonTabindex, "aria-checked": `${checked}`, "aria-hidden": disabled ? 'true' : null, "aria-labelledby": label ? labelId : null, class: createColorClasses(color, {
        'in-item': hostContext('gasco-item', el),
        interactive: true,
        'radio-checked': checked,
        'radio-disabled': disabled,
      }) }, h("div", { class: "radio-icon", part: "container" }, h("div", { class: "radio-inner", part: "mark" }), h("div", { class: "radio-ripple" })), h("label", { htmlFor: inputId }, labelText), h("input", { type: "radio", checked: checked, disabled: disabled, tabindex: "-1", id: inputId, ref: (nativeEl) => (this.nativeInput = nativeEl) })));
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "color": ["emitStyle"],
    "checked": ["emitStyle"],
    "disabled": ["emitStyle"]
  }; }
};
let radioButtonIds = 0;
GascoRadio.style = gascoRadioMdCss;

export { GascoRadio as gasco_radio };
