@wolf-scope/wolf-ui/dist/components/checkbox/checkbox.mjs

UI library for web applications using Lit

import { property as c } from "lit/decorators.js";
import { unsafeCSS as p, LitElement as n, html as d } from "lit";
import "../typography/register.mjs";
import "../typography/typography.mjs";
const f = `:host{display:inline-flex;margin:var(--wolf-spacing-lg)}:host .checkbox{display:flex;align-items:center}:host input{margin-right:var(--wolf-spacing-lg)}:host .label{user-select:none;cursor:pointer}
`;
var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, h = (o, t, r, l) => {
  for (var e = l > 1 ? void 0 : l ? y(t, r) : t, i = o.length - 1, a; i >= 0; i--)
    (a = o[i]) && (e = (l ? a(t, r, e) : a(e)) || e);
  return l && e && b(t, r, e), e;
};
const x = "wolf-checkbox";
class s extends n {
  constructor() {
    super(...arguments), this.checked = !1, this.disabled = !1, this.label = "";
  }
  handleClick() {
    this.disabled || (this.checked = !this.checked);
  }
  render() {
    return d`
      <div class="checkbox" @click=${this.handleClick}>
        <input type="checkbox" .checked=${this.checked} ?disabled=${this.disabled} />
        <wolf-typography class="label" variant="header-xsmall">${this.label}</wolf-typography>
      </div>
    `;
  }
}
s.styles = p(f);
h([
  c({ type: Boolean })
], s.prototype, "checked", 2);
h([
  c({ type: Boolean })
], s.prototype, "disabled", 2);
h([
  c()
], s.prototype, "label", 2);
export {
  s as WolfCheckbox,
  x as tagName
};