pyro/dist/button.js

Pyro custom elements

import { i as p, r as u, x as y, t as d } from "./custom-element-CWJsDAat.js";
import { n as e } from "./property-Bf-I6Ep_.js";
import { o as b } from "./if-defined-D-M-EmTt.js";
var v = Object.defineProperty, h = Object.getOwnPropertyDescriptor, o = (c, n, i, a) => {
  for (var t = a > 1 ? void 0 : a ? h(n, i) : n, s = c.length - 1, l; s >= 0; s--)
    (l = c[s]) && (t = (a ? l(n, i, t) : l(t)) || t);
  return a && t && v(n, i, t), t;
};
let r = class extends u {
  constructor() {
    super(...arguments), this.variant = "", this.size = "m", this.transparent = !1, this.circle = !1, this.disabled = !1, this.type = "button";
  }
  render() {
    return y`
      <slot name="icon-left" aria-hidden="true"></slot>
      <button ?disabled=${this.disabled} type=${this.type} form=${b(this.form)}>
        <slot></slot>
      </button>
      <slot name="icon-right" aria-hidden="true"></slot>
    `;
  }
};
r.styles = p`
    :host {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: var(--pyro-button-spacing, var(--pyro-spacing));
      gap: var(--pyro-button-spacing, var(--pyro-spacing));
      color: var(--pyro-button-text-color, var(--pyro-text-color));
      border: var(--pyro-button-border, var(--pyro-border));
      border-radius: var(--pyro-button-border-radius, var(--pyro-border-radius));
      cursor: pointer;
      touch-action: manipulation;
      --internal-background: var(--pyro-button-surface-color, var(--pyro-surface-color));
      background: var(--internal-background);
      user-select: none;
    }
    button {
      font-family: inherit;
      background: transparent;
      color: inherit;
      border: none;
      font-size: inherit;
      font-weight: var(--pyro-button-font-weight, inherit);
      cursor: inherit;
    }
    :host([variant='primary']) {
      --internal-background: var(--pyro-button-primary-color, var(--pyro-primary-color));
      color: var(--pyro-text-color-on-primary, inherit);
    }
    :host([variant='secondary']) {
      --internal-background: var(--pyro-button-secondary-color, var(--pyro-secondary-color));
      color: var(--pyro-text-color-on-secondary, inherit);
    }
    :host([variant='tertiary']) {
      --internal-background: var(--pyro-button-tertiary-color, var(--pyro-tertiary-color));
      color: var(--pyro-text-color-on-tertiary, inherit);
    }
    :host([transparent]) {
      --internal-background: transparent;
      border-color: transparent;
      color: var(--pyro-text-color-on-transparent, inherit);
    }
    :host([disabled]) {
      --internal-background: var(--pyro-button-disabled-color, var(--pyro-disabled-color));
      cursor: not-allowed;
    }
    :host([circle]) {
      border-radius: 50%;
    }
    :host([circle]) button {
      display: flex;
    }
    :host(:hover):not([disabled]) {
      background: var(--pyro-button-hover-color, var(--pyro-hover-color));
    }
    :host(:active) {
      background: var(--pyro-button-active-color, var(--internal-background));
    }
    :host(:focus-within) {
      border-color: currentColor;
      outline: 1px solid currentColor;
    }
    button:focus-visible {
      outline: none;
    }
    :host([size='s']) {
      padding: var(--pyro-spacing-s);
    }
    :host([size='l']) {
      padding: var(--pyro-spacing-l);
    }
  `;
o([
  e({ reflect: !0 })
], r.prototype, "variant", 2);
o([
  e({ reflect: !0 })
], r.prototype, "size", 2);
o([
  e({ type: Boolean, reflect: !0 })
], r.prototype, "transparent", 2);
o([
  e({ type: Boolean, reflect: !0 })
], r.prototype, "circle", 2);
o([
  e({ type: Boolean, reflect: !0 })
], r.prototype, "disabled", 2);
o([
  e({ reflect: !0 })
], r.prototype, "form", 2);
o([
  e({ reflect: !0 })
], r.prototype, "type", 2);
r = o([
  d("pyro-button")
], r);
export {
  r as PyroButton
};