ranui/dist/tabpane.js

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { p as s } from "./factory-WDxu11V0.js";
import { t as r } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { i as h, o as n, t as o } from "./utils-U-9uH7EX.js";
import { a, n as b } from "./ssr-BzykYefm.js";
var d = class extends b {
  static get observedAttributes() {
    return [
      "label",
      "key",
      "disabled",
      "icon",
      "effect",
      "iconsize",
      "sheet"
    ];
  }
  _events = new r();
  _div;
  parent;
  _shadowDom;
  constructor() {
    super(), this._shadowDom = o(this, "");
    const t = s().part("content").build();
    this._shadowDom.appendChild(t), this._div = t;
  }
  get label() {
    return this.getAttribute("label") || "";
  }
  set label(t) {
    this.setAttribute("label", t);
  }
  get icon() {
    return this.getAttribute("icon");
  }
  set icon(t) {
    !t || t === "false" ? this.removeAttribute("icon") : this.setAttribute("icon", t);
  }
  get iconSize() {
    return this.getAttribute("iconSize");
  }
  set iconSize(t) {
    !t || t === "false" ? this.removeAttribute("iconSize") : this.setAttribute("iconSize", t);
  }
  get key() {
    return this.getAttribute("r-key");
  }
  set key(t) {
    t ? this.setAttribute("r-key", t) : this.removeAttribute("r-key");
  }
  get disabled() {
    return this.getAttribute("disabled");
  }
  set disabled(t) {
    !t || t === "false" ? this.removeAttribute("disabled") : this.setAttribute("disabled", t);
  }
  get effect() {
    return this.getAttribute("effect");
  }
  set effect(t) {
    !t || t === "false" ? this.removeAttribute("effect") : this.setAttribute("effect", t);
  }
  get sheet() {
    return this.getAttribute("sheet");
  }
  set sheet(t) {
    h(this, "sheet", t);
  }
  handlerExternalCss = () => {
    n(this, this._shadowDom, "sheet", null, this.sheet);
  };
  initAttribute = () => {
    this.parent = this.parentNode, this.key && (this.parent?.updateAttribute(this.key, "icon", this.icon), this.parent?.updateAttribute(this.key, "iconSize", this.iconSize), this.parent?.updateAttribute(this.key, "effect", this.effect));
  };
  connectedCallback() {
    this.handlerExternalCss(), this._events.on(document, "DOMContentLoaded", this.initAttribute);
  }
  disconnectedCallback() {
    this._events.abort();
  }
  attributeChangedCallback(t, i, e) {
    i !== e && (this.key && this.parent?.updateAttribute && (t === "icon" && this.parent?.updateAttribute(this.key, "icon", e), t === "iconsize" && this.parent?.updateAttribute(this.key, "iconSize", e), t === "effect" && this.parent?.updateAttribute(this.key, "effect", e), t === "disabled" && this.parent?.updateAttribute(this.key, "disabled", e)), t === "sheet" && this.handlerExternalCss());
  }
};
a("r-tab", d);
export {
  d as TabPane,
  d as default
};