ranui/dist/router-FjX12kw-.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 n } from "./factory-WDxu11V0.js";
import { t as h } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { i as a, n as i, o as r, t as l } from "./utils-U-9uH7EX.js";
import { a as u, n as c } from "./ssr-BzykYefm.js";
import { useRouter as o } from "./utils/router.js";
var d = ":host{display:block;width:100%}:host([hidden]){display:none}", _ = class extends c {
  static get observedAttributes() {
    return [
      "mode",
      "base",
      "sheet"
    ];
  }
  _events = new h();
  _shadowDom;
  _slot;
  _currentPath = "";
  _core = null;
  constructor() {
    super(), this._shadowDom = l(this, d);
    const t = n().build();
    this._shadowDom.appendChild(t), this._slot = t;
  }
  get mode() {
    return this.getAttribute("mode") === "hash" ? "hash" : "history";
  }
  get base() {
    return i(this, "base");
  }
  get sheet() {
    return i(this, "sheet");
  }
  set sheet(t) {
    a(this, "sheet", t);
  }
  handlerExternalCss = () => {
    r(this, this._shadowDom, "sheet", null, this.sheet);
  };
  _getPath() {
    if (this.mode === "hash") return window.location.hash.slice(1) || "/";
    const t = this.base, e = window.location.pathname;
    return t && e.startsWith(t) ? e.slice(t.length) || "/" : e;
  }
  navigate(t, e = !1) {
    if (this._core) {
      e ? this._core.replace(t) : this._core.push(t);
      return;
    }
    const s = this.mode === "hash" ? `#${t}` : this.base + t;
    e ? window.history.replaceState(null, "", s) : window.history.pushState(null, "", s), this._syncRoutes();
  }
  _syncRoutes() {
    const t = this._getPath();
    this._currentPath = t, this.querySelectorAll("r-route").forEach((e) => {
      typeof e._update == "function" && e._update(t);
    }), this.dispatchEvent(new CustomEvent("routechange", {
      detail: { path: t },
      bubbles: !0
    }));
  }
  _handlePopState = () => {
    this._core ? this._core._notify() : this._syncRoutes();
  };
  _handleNavigate = (t) => {
    const { path: e, replace: s } = t.detail;
    t.stopPropagation(), this.navigate(e, s);
  };
  connectedCallback() {
    this.handlerExternalCss(), this._events.on(window, "popstate", this._handlePopState), this._events.on(this, "ran-navigate", this._handleNavigate), this._events.on(this._slot, "slotchange", () => this._syncRoutes());
    const t = o();
    t && (this._core = t, t._bind(this)), this._syncRoutes(), typeof customElements < "u" && customElements.whenDefined("r-route").then(() => this._syncRoutes());
  }
  disconnectedCallback() {
    const t = o();
    t && t._unbind(this), this._core = null, this._events.abort();
  }
  attributeChangedCallback(t, e, s) {
    e !== s && t === "sheet" && this.handlerExternalCss();
  }
};
u("r-router", _);
export {
  _ as t
};