pyro/dist/switch.js

Pyro custom elements

import { i as n, r as h, x as p, t as b } from "./custom-element-CWJsDAat.js";
import { n as l } from "./property-Bf-I6Ep_.js";
var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, d = (t, i, a, o) => {
  for (var e = o > 1 ? void 0 : o ? y(i, a) : i, c = t.length - 1, s; c >= 0; c--)
    (s = t[c]) && (e = (o ? s(i, a, e) : s(e)) || e);
  return o && e && v(i, a, e), e;
};
let r = class extends h {
  constructor() {
    super(...arguments), this.checked = !1, this.disabled = !1, this.value = this.checked, this.handleClick = (t) => {
      this.checked = !this.checked, this.value = this.checked, t.stopImmediatePropagation(), this.dispatchEvent(
        new Event("input", {
          bubbles: !0,
          cancelable: !1,
          composed: !0
        })
      );
    };
  }
  connectedCallback() {
    super.connectedCallback(), this.value = this.checked;
  }
  render() {
    return p`<input type="checkbox" @click="${this.handleClick}" ?disabled=${this.disabled} />
      <div><div class="ball"></div></div> `;
  }
};
r.styles = n`
    :host {
      box-sizing: content-box !important;
      display: inline-grid;
      align-content: center;
      grid-template-areas: 'stack';
      border: var(--pyro-switch-border, var(--pyro-border));
      border-radius: var(--pyro-switch-border-radius, var(--pyro-switch-size, 1em));
      background: var(--pyro-switch-accent-color, var(--pyro-accent-color));
      width: calc(2 * var(--pyro-switch-size, 1em));
      height: var(--pyro-switch-size, 1em);
    }
    * {
      box-sizing: border-box;
    }
    input {
      width: 100%;
      height: 100%;
      appearance: none;
      grid-area: stack;
    }
    :host > div {
      grid-area: stack;
      align-self: center;
      width: var(--pyro-switch-size, 1em);
      height: var(--pyro-switch-size, 1em);
      transition: margin 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
    }
    .ball {
      width: 100%;
      height: 100%;
      width: var(--pyro-switch-ball-size, 80%);
      height: var(--pyro-switch-ball-size, 80%);
      border: var(--pyro-switch-ball-border, var(--pyro-border));
      border-radius: var(--pyro-switch-border-radius, var(--pyro-switch-size, 1em));
      background: var(--pyro-switch-ball-color, var(--pyro-surface-color));
      z-index: 10;
    }
    div {
      pointer-events: none;
    }
    :host([checked]) > div {
      margin-left: var(--pyro-switch-size, 1em);
    }
    :host([checked]) {
      background: var(--pyro-switch-accent-color, var(--pyro-accent-color));
    }
    :host([disabled]) {
      --internal-background: var(--pyro-button-disabled-color, var(--pyro-disabled-color));
      cursor: not-allowed;
    }
  `;
d([
  l({ type: Boolean, reflect: !0 })
], r.prototype, "checked", 2);
d([
  l({ type: Boolean, reflect: !0 })
], r.prototype, "disabled", 2);
r = d([
  b("pyro-switch")
], r);
export {
  r as PyroSwitch
};