pyro/dist/tab.js

Pyro custom elements

import { i as s, r as d, x as i, t as v } from "./custom-element-CWJsDAat.js";
import { n as p } from "./property-Bf-I6Ep_.js";
var y = Object.defineProperty, u = Object.getOwnPropertyDescriptor, t = (n, e, l, a) => {
  for (var r = a > 1 ? void 0 : a ? u(e, l) : e, b = n.length - 1, c; b >= 0; b--)
    (c = n[b]) && (r = (a ? c(e, l, r) : c(r)) || r);
  return a && r && y(e, l, r), r;
};
let o = class extends d {
  constructor() {
    super(...arguments), this.value = "", this.label = "", this.selected = !1, this["aria-controls"] = "";
  }
  handleClick() {
    this.dispatchEvent(
      new CustomEvent("pyro-tab-click", {
        bubbles: !0
      })
    );
  }
  render() {
    return i`<button type="button" @click=${this.handleClick} role="tab"><slot>${this.label}</slot></button>`;
  }
};
o.styles = s`
    :host {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-bottom: var(--pyro-tab-border, var(--pyro-border));
      color: var(--pyro-tab-text-color, var(--pyro-text-color));
      box-sizing: border-box;
    }
    :host([selected]) {
      border-bottom: var(--pyro-tab-selected-border, var(--pyro-border));
      border-width: var(--pyro-tab-selected-border-width, calc(2 * var(--pyro-border-width)));
      border-bottom-color: var(--pyro-tab-selected-border-color, var(--pyro-accent-color));
    }
    button {
      padding: var(--pyro-tab-padding, var(--pyro-spacing));
      border: 0;
      padding: var(--pyro-tab-padding, var(--pyro-spacing))
        calc(var(--pyro-tab-padding, var(--pyro-spacing)) + var(--pyro-tab-gap, 0px)); /* // FIXME: remove in favour of group gap? */
      background: var(--pyro-tab-background, transparent);
      outline: none;
      color: inherit;
      cursor: pointer;
    }
    :host([selected]) button {
      /* This must be simpler */
      padding-bottom: calc(
        var(--pyro-tab-padding, var(--pyro-spacing)) - var(
            --pyro-tab-selected-border-width,
            calc(2 * var(--pyro-border-width))
          ) + var(--pyro-border-width)
      );
    }
  `;
t([
  p()
], o.prototype, "value", 2);
t([
  p()
], o.prototype, "label", 2);
t([
  p({ type: Boolean, reflect: !0 })
], o.prototype, "selected", 2);
t([
  p({ reflect: !0 })
], o.prototype, "aria-controls", 2);
o = t([
  v("pyro-tab")
], o);
export {
  o as PyroTab
};