pyro/dist/tab-group.js

Pyro custom elements

import { i as f, r as n, x as b, t as u } from "./custom-element-CWJsDAat.js";
import { n as c } from "./property-Bf-I6Ep_.js";
import { o as h } from "./query-assigned-elements-DjfhL1cl.js";
import { f as d } from "./findDeepChildren-DcrW2E5D.js";
var y = Object.defineProperty, m = Object.getOwnPropertyDescriptor, p = (r, t, l, o) => {
  for (var e = o > 1 ? void 0 : o ? m(t, l) : t, a = r.length - 1, i; a >= 0; a--)
    (i = r[a]) && (e = (o ? i(t, l, e) : i(e)) || e);
  return o && e && y(t, l, e), e;
};
let s = class extends n {
  constructor() {
    super(...arguments), this.fill = !1, this._tabs = [];
  }
  firstUpdated() {
    this._tabs = d(this._slotElements, "pyro-tab");
  }
  handleTabClick({ target: r }) {
    this._tabs.forEach((t) => {
      t.selected = !1, t.setAttribute("aria-selected", "false");
    }), r.setAttribute("aria-selected", "true"), r.selected = !0;
  }
  render() {
    return b`<slot @pyro-tab-click=${this.handleTabClick} role="tablist"></slot>`;
  }
};
s.styles = f`
    :host {
      display: flex;
      box-sizing: border-box;
      justify-content: var(--pyro-tab-group-justify-content, flex-start);
      gap: var(--pyro-tab-group-gap, 0);
    }
    :host([fill]) {
      width: 100%;
    }
    :host([fill]) ::slotted(*) {
      flex: 1;
    }
  `;
p([
  c({ type: Boolean, reflect: !0 })
], s.prototype, "fill", 2);
p([
  h({ flatten: !0 })
], s.prototype, "_slotElements", 2);
s = p([
  u("pyro-tab-group")
], s);
export {
  s as PyroTabGroup
};