@synergy-design-system/components/dist/chunks/chunk.OA6PFRQ2.js

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

import {
  radio_custom_styles_default
} from "./chunk.SAV6MIQK.js";
import {
  radio_styles_default
} from "./chunk.EHSNF4SS.js";
import {
  SynIcon
} from "./chunk.RCBSMXQH.js";
import {
  enableDefaultSettings
} from "./chunk.HYFCK7MM.js";
import {
  watch
} from "./chunk.BVZQ6QSY.js";
import {
  component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
  SynergyElement
} from "./chunk.3THJTCRO.js";
import {
  __decorateClass
} from "./chunk.Z4XV3SMG.js";

// src/components/radio/radio.component.ts
import { classMap } from "lit/directives/class-map.js";
import { html } from "lit";
import { property, state } from "lit/decorators.js";
var SynRadio = class extends SynergyElement {
  constructor() {
    super();
    this.checked = false;
    this.hasFocus = false;
    this.size = "medium";
    this.disabled = false;
    this.handleBlur = () => {
      this.hasFocus = false;
      this.emit("syn-blur");
    };
    this.handleClick = () => {
      if (!this.disabled) {
        this.checked = true;
      }
    };
    this.handleFocus = () => {
      this.hasFocus = true;
      this.emit("syn-focus");
    };
    this.addEventListener("blur", this.handleBlur);
    this.addEventListener("click", this.handleClick);
    this.addEventListener("focus", this.handleFocus);
  }
  connectedCallback() {
    super.connectedCallback();
    this.setInitialAttributes();
  }
  setInitialAttributes() {
    this.setAttribute("role", "radio");
    this.setAttribute("tabindex", "-1");
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  handleCheckedChange() {
    this.setAttribute("aria-checked", this.checked ? "true" : "false");
    this.setAttribute("tabindex", this.checked ? "0" : "-1");
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
  }
  render() {
    return html`
      <span
        part="base"
        class=${classMap({
      radio: true,
      "radio--checked": this.checked,
      "radio--disabled": this.disabled,
      "radio--focused": this.hasFocus,
      "radio--small": this.size === "small",
      "radio--medium": this.size === "medium",
      "radio--large": this.size === "large"
    })}
      >
        <span part="${`control${this.checked ? " control--checked" : ""}`}" class="radio__control">
          ${this.checked ? html` <syn-icon part="checked-icon" class="radio__checked-icon" library="system" name="radio"></syn-icon> ` : ""}
        </span>

        <slot part="label" class="radio__label"></slot>
      </span>
    `;
  }
};
SynRadio.styles = [component_styles_default, radio_styles_default, radio_custom_styles_default];
SynRadio.dependencies = { "syn-icon": SynIcon };
__decorateClass([
  state()
], SynRadio.prototype, "checked", 2);
__decorateClass([
  state()
], SynRadio.prototype, "hasFocus", 2);
__decorateClass([
  property()
], SynRadio.prototype, "value", 2);
__decorateClass([
  property({ reflect: true })
], SynRadio.prototype, "size", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SynRadio.prototype, "disabled", 2);
__decorateClass([
  watch("checked")
], SynRadio.prototype, "handleCheckedChange", 1);
__decorateClass([
  watch("disabled", { waitUntilFirstUpdate: true })
], SynRadio.prototype, "handleDisabledChange", 1);
SynRadio = __decorateClass([
  enableDefaultSettings("SynRadio")
], SynRadio);

export {
  SynRadio
};
//# sourceMappingURL=chunk.OA6PFRQ2.js.map