pyro/dist/radio.js

Pyro custom elements

import { i as d, r as l, x as h, t as u } from "./custom-element-CWJsDAat.js";
import { n as t } from "./property-Bf-I6Ep_.js";
import { e as y } from "./query-Ddbd72Um.js";
import { o as v } from "./if-defined-D-M-EmTt.js";
var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (n, a, c, i) => {
  for (var e = i > 1 ? void 0 : i ? b(a, c) : a, s = n.length - 1, p; s >= 0; s--)
    (p = n[s]) && (e = (i ? p(a, c, e) : p(e)) || e);
  return i && e && m(a, c, e), e;
};
let r = class extends l {
  constructor() {
    super(...arguments), this.checked = !1, this.value = "", this.name = "", this.square = !1;
  }
  handleClick() {
    this.dispatchEvent(
      new CustomEvent("pyro-radio-click", {
        bubbles: !0
      })
    );
  }
  render() {
    return h`
      <input
        type="radio"
        id="${this.checked}"
        name="${this.name}"
        .value=${this.value}
        @click=${this.handleClick}
        .checked=${this.checked}
        aria-label=${v(this["aria-label"])}
      />
      <slot></slot>
      <div class="check"></div>
    `;
  }
};
r.styles = d`
    :host {
      display: inline-grid;
      grid-template-areas: 'stack';
      align-items: center;
      width: var(--pyro-radio-width, 1em);
      height: var(--pyro-radio-height, 1em);
      border: var(--pyro-radio-border, 1px solid var(--pyro-border-color));
      border-radius: var(--pyro-radio-border-radius, var(--pyro-border-radius));
      background: var(--pyro-radio-surface-color, var(--pyro-surface-color));
    }
    input,
    .check,
    slot {
      grid-area: stack;
      margin: 0 auto;
      outline: none;
    }
    input {
      appearance: none;
      font: inherit;
      width: 100%;
      height: 100%;
    }
    :host([square]) * {
      cursor: pointer;
    }
    :host(:not([square])),
    .check {
      border-radius: 50%;
    }
    :host(:not([square])[checked]) .check {
      height: var(--pyro-radio-check-height, 0.5em);
      width: var(--pyro-radio-check-width, 0.5em);
      background: var(--pyro-radio-accent-color, var(--pyro-primary-color));
    }
    :host([checked]) {
      border-color: var(--pyro-radio-accent-color, var(--pyro-primary-color));
    }
    slot {
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: none;
    }
  `;
o([
  t({ type: Boolean, reflect: !0 })
], r.prototype, "checked", 2);
o([
  t()
], r.prototype, "value", 2);
o([
  t()
], r.prototype, "name", 2);
o([
  t({ type: Boolean, reflect: !0 })
], r.prototype, "square", 2);
o([
  t()
], r.prototype, "aria-label", 2);
o([
  y("input")
], r.prototype, "_input", 2);
r = o([
  u("pyro-radio")
], r);
export {
  r as PyroRadio
};