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

UI library for web applications using Lit

import { property as c, state as l } from "lit/decorators.js";
import { unsafeCSS as d, LitElement as f, nothing as h, html as p } from "lit";
import "../tab-panel/register.mjs";
import "../tab-item/register.mjs";
import "../tab-panel/tab-panel.mjs";
import "../tab-item/tab-item.mjs";
const m = `:host{display:block}.tab-bar{display:flex;position:relative;border-bottom:1px solid var(--wolf-border-color);--wolf-tab-border-offset: 0}.tab-bar .tab-border{position:absolute;bottom:0;left:var(--wolf-active-tab-offset, 0);width:var(--wolf-tab-border-width, 0);height:2px;background-color:var(--wolf-color-primary);transition:left .2s ease-in-out,width .2s ease-in-out}.tab-content{margin-top:16px}
`;
var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (i, t, s, a) => {
  for (var e = a > 1 ? void 0 : a ? u(t, s) : t, r = i.length - 1, b; r >= 0; r--)
    (b = i[r]) && (e = (a ? b(t, s, e) : b(e)) || e);
  return a && e && v(t, s, e), e;
};
const P = "wolf-tabs";
class o extends f {
  constructor() {
    super(...arguments), this.activeTabIndex = 0, this.tabItems = [], this.tabPanels = [];
  }
  handleTabClick(t) {
    const s = t.target;
    if (s === this.tabItems[this.activeTabIndex])
      return;
    this.tabItems.forEach((r) => r.isActive = !1);
    const a = this.getTabWidth(s);
    this.activeTabIndex = this.tabItems.indexOf(s), s.isActive = !0;
    const e = this.getOffsetByIndex(this.activeTabIndex);
    this.style.setProperty("--wolf-tab-border-width", `${a}px`), this.style.setProperty("--wolf-active-tab-offset", `${e}px`);
  }
  /**
   * Get the offset of the tab at the given index
   * @param index
   * @returns
   */
  getOffsetByIndex(t) {
    return this.tabItems.slice(0, t).reduce((e, r) => e + this.getTabWidth(r), 0);
  }
  getTabWidth(t) {
    return t.clientWidth;
  }
  connectedCallback() {
    super.connectedCallback(), this.tabPanels = Array.from(this.querySelectorAll("wolf-tab-panel")), this.tabItems = Array.from(this.querySelectorAll("wolf-tab-item")), requestAnimationFrame(() => {
      this.style.setProperty("--wolf-tab-border-width", `${this.getTabWidth(this.tabItems[0])}px`);
    });
  }
  renderActiveTabContent() {
    if (this.tabItems[this.activeTabIndex])
      return this.tabPanels.find((t) => t.for === this.tabItems[this.activeTabIndex].label) ?? h;
  }
  render() {
    return p`<div class="tab-bar">
        <slot @tab-click=${this.handleTabClick}></slot>
        <div class="tab-border"></div>
      </div>
      <div class="tab-content"><slot hidden name="content"></slot>${this.renderActiveTabContent()}</div>`;
  }
}
o.styles = d(m);
n([
  c({ type: Number })
], o.prototype, "activeTabIndex", 2);
n([
  l()
], o.prototype, "tabItems", 2);
n([
  l()
], o.prototype, "tabPanels", 2);
export {
  o as WolfTabs,
  P as tagName
};