@purplle/sidebar 1.0.0 → 1.0.1

package/dist/prism-sidebar.js

@@ -0,0 +1,822 @@
+function M(t) {
+  if (!t || typeof t != "object") return !1;
+  const e = t;
+  return typeof e.id < "u" && typeof e.name == "string";
+}
+function x(t) {
+  return t.filter((e) => M(e)).map((e) => {
+    const r = e.path ?? e.url, i = {
+      ...e,
+      id: String(e.id),
+      ...r ? { path: r } : {}
+    };
+    return Array.isArray(e.children) && (i.children = x(e.children)), i;
+  });
+}
+function N(t) {
+  if (Array.isArray(t)) return x(t);
+  if (!t || typeof t != "object") return [];
+  const e = t;
+  return Array.isArray(e.data?.menu) ? x(e.data.menu) : Array.isArray(e.menu) ? x(e.menu) : [];
+}
+async function L(t, e) {
+  if (!t.apiUrl) throw new Error("Missing apiUrl");
+  if (!t.token) throw new Error("Missing token");
+  const r = {
+    headers: {
+      Authorization: `Bearer ${t.token}`
+    }
+  };
+  e && (r.signal = e);
+  const i = await fetch(t.apiUrl, r);
+  if (!i.ok)
+    throw new Error(`Menu API failed with ${i.status}`);
+  let n;
+  try {
+    n = await i.json();
+  } catch {
+    throw new Error("Menu API returned non-JSON payload");
+  }
+  return N(n);
+}
+function _(t) {
+  return {
+    role: "navigation",
+    "aria-label": t
+  };
+}
+function H(t) {
+  return t ? "page" : null;
+}
+function D(t) {
+  return t.key === "Enter" || t.key === " ";
+}
+function v(t) {
+  const e = t.trim();
+  return e && e.replace(/\/+$/, "") || "/";
+}
+function F(t) {
+  return t.split("?")[0]?.split("#")[0] ?? t;
+}
+function d(t, e) {
+  if (typeof t == "boolean") return t;
+  if (t == null || t === "") return e;
+  const r = String(t).toLowerCase();
+  return !["0", "false", "no", "off"].includes(r);
+}
+const a = {
+  token: "",
+  apiUrl: "",
+  baseUrl: "",
+  activePath: "",
+  target: "_top",
+  useShadowDom: !0,
+  ariaLabel: "Sidebar navigation",
+  collapsed: !0,
+  autoNavigate: !0,
+  width: "240px",
+  title: "P.R.I.S.M.",
+  subtitle: "Purplle Retail Intelligence & Sales Management",
+  homeUrl: "/",
+  logoutText: "Logout",
+  logoutPath: "/sentinel/logout",
+  error: ""
+}, V = ["_self", "_blank", "_top"];
+function B(t) {
+  const e = t.getAttribute("base-url") ?? (location?.origin || ""), r = {
+    target: P(t.getAttribute("target")),
+    baseUrl: e
+  }, i = t.getAttribute("token");
+  i !== null && (r.token = i);
+  const n = t.getAttribute("api-url") ?? t.getAttribute("api-base-url") ?? e + "/sentinel/api/v1/menu";
+  n !== null && (r.apiUrl = n);
+  const c = t.getAttribute("active-path");
+  c !== null && (r.activePath = c);
+  const f = t.getAttribute("aria-label");
+  f !== null && (r.ariaLabel = f);
+  const l = t.getAttribute("use-shadow-dom");
+  l !== null && (r.useShadowDom = d(l, !0));
+  const s = t.getAttribute("collapsed");
+  s !== null && (r.collapsed = d(s, !1));
+  const u = t.getAttribute("auto-navigate");
+  u !== null && (r.autoNavigate = d(u, !0));
+  const g = t.getAttribute("width");
+  g !== null && (r.width = g);
+  const h = t.getAttribute("title");
+  h !== null && (r.title = h);
+  const p = t.getAttribute("subtitle");
+  p !== null && (r.subtitle = p);
+  const b = t.getAttribute("home-url");
+  b !== null && (r.homeUrl = b);
+  const k = t.getAttribute("logout-text");
+  k !== null && (r.logoutText = k);
+  const S = t.getAttribute("logout-path");
+  S !== null && (r.logoutPath = S);
+  const A = t.getAttribute("error");
+  return A !== null && (r.error = A), r;
+}
+function R(t) {
+  const e = P(t.target);
+  return {
+    token: t.token?.trim() ?? a.token,
+    baseUrl: t.baseUrl?.trim() ?? a.baseUrl,
+    apiUrl: t.apiUrl?.replace(/\/+$/, "") ?? a.apiUrl,
+    activePath: t.activePath ? v(t.activePath) : a.activePath,
+    target: e,
+    useShadowDom: d(t.useShadowDom, a.useShadowDom),
+    ariaLabel: t.ariaLabel?.trim() || a.ariaLabel,
+    collapsed: d(t.collapsed, a.collapsed),
+    autoNavigate: d(t.autoNavigate, a.autoNavigate),
+    width: t.width?.trim() || a.width,
+    title: t.title?.trim() || a.title,
+    subtitle: t.subtitle?.trim() || a.subtitle,
+    homeUrl: t.homeUrl?.trim() || a.homeUrl,
+    logoutText: t.logoutText?.trim() || a.logoutText,
+    logoutPath: t.logoutPath?.trim() || a.logoutPath,
+    error: t.error?.trim() || a.error
+  };
+}
+function U(t, e) {
+  const r = { ...t };
+  for (const i of Object.keys(e)) {
+    const n = e[i];
+    typeof n > "u" || (r[i] = n);
+  }
+  return R(r);
+}
+function P(t) {
+  if (!t) return a.target;
+  const e = t;
+  return V.includes(e) ? e : a.target;
+}
+const w = {
+  loaded: "sidebar-loaded",
+  error: "sidebar-error",
+  itemClick: "sidebar-item-click"
+};
+function W(t, e) {
+  t.dispatchEvent(new CustomEvent(w.loaded, { detail: e, bubbles: !0, composed: !0 }));
+}
+function j(t, e) {
+  t.dispatchEvent(new CustomEvent(w.error, { detail: e, bubbles: !0, composed: !0 }));
+}
+function q(t, e) {
+  t.dispatchEvent(new CustomEvent(w.itemClick, { detail: e, bubbles: !0, composed: !0 }));
+}
+function O(t) {
+  const e = String(t || "").trim();
+  return e || "#";
+}
+function X(t) {
+  return String(t || "").replace(/\/+$/, "");
+}
+function Y(t, e) {
+  const r = O(t);
+  if (r === "#") return "#";
+  if (/^(https?:)?\/\//.test(r) || r.startsWith("mailto:") || r.startsWith("tel:")) return r;
+  const i = X(e);
+  return i ? r.startsWith("/") ? `${i}${r}` : `${i}/${r}` : r;
+}
+function G(t, e) {
+  if (!e.autoNavigate) return;
+  const r = Y(t, e.baseUrl);
+  if (r !== "#") {
+    if (e.target === "_blank") {
+      window.open(r, "_blank", "noopener,noreferrer");
+      return;
+    }
+    if (e.target === "_top")
+      try {
+        if (window.top) {
+          window.top.location.href = r;
+          return;
+        }
+      } catch {
+        window.location.href = r;
+        return;
+      }
+    window.location.href = r;
+  }
+}
+function Z() {
+  return {
+    loading: !1,
+    menu: [],
+    error: "",
+    activeId: null,
+    expandedIds: /* @__PURE__ */ new Set()
+  };
+}
+const J = `
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
+  unicode-range: U +0460 -052F, U +1C80 -1C8A, U +20B4, U +2DE0 -2DFF, U + A640-A69F, U + FE2E-FE2F;
+}
+
+:host, prism-sidebar {
+  --prism-sidebar-width: 240px;
+  --prism-sidebar-bg: linear-gradient(rgb(156,0,173),rgb(89,0,99));
+  --prism-sidebar-text-color: #ffffff;
+  --prism-sidebar-border-color: rgba(255,255,255,.15);
+  --prism-sidebar-hover-bg: rgba(255,255,255,0.12);
+  --prism-sidebar-active-bg: rgba(255,255,255,.1);
+  --prism-sidebar-indent: 14px;
+  --prism-sidebar-font-family: Inter,'sans-serif',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';
+  font-feature-settings: normal;
+  line-height: 1.5;
+  display: block;
+}
+
+.prism-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.hidden {
+  display: none !important;
+}
+
+@keyframes sidebar-spin {
+  to { transform: rotate(360deg); }
+}
+
+.prism-loader-spinner {
+  width: 28px;
+  height: 28px;
+  display: inline-block;
+  border: 3px solid rgba(255,255,255,.35);
+  border-top-color: #ffffff;
+  border-radius: 9999px;
+  animation: sidebar-spin 1s linear infinite;
+}
+
+/* layer: preflights */
+*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
+/* layer: default */
+.\\[-ms-overflow-style\\:none\\]{-ms-overflow-style:none;}
+.\\[background\\:var\\(--prism-sidebar-bg\\)\\]{background:var(--prism-sidebar-bg);}
+.\\[border-top\\:1px_solid_\\#ffffff26\\]{border-top:1px solid #ffffff26;}
+.\\[font-family\\:var\\(--prism-sidebar-font-family\\)\\]{font-family:var(--prism-sidebar-font-family);}
+.\\[scrollbar-width\\:none\\]{scrollbar-width:none;}
+.fixed{position:fixed;}
+.bottom-0{bottom:0;}
+.left-0{left:0;}
+.top-0{top:0;}
+.z-\\[1600\\]{z-index:1600;}
+.mb-\\[16px\\]{margin-bottom:16px;}
+.mb-\\[4px\\]{margin-bottom:4px;}
+.mt-2{margin-top:0.5rem;}
+.box-border{box-sizing:border-box;}
+.block{display:block;}
+.inline-block{display:inline-block;}
+.h-\\[100vh\\]{height:100vh;}
+.min-h-full{min-height:100%;}
+.min-w-\\[var\\(--prism-sidebar-width\\)\\]{min-width:var(--prism-sidebar-width);}
+.w-\\[var\\(--prism-sidebar-width\\)\\]{width:var(--prism-sidebar-width);}
+.w-full{width:100%;}
+.flex{display:flex;}
+.flex-\\[1_1_0\\%\\]{flex:1 1 0%;}
+.shrink-0{flex-shrink:0;}
+.flex-col{flex-direction:column;}
+.rotate-\\[180deg\\]{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.cursor-pointer{cursor:pointer;}
+.items-center{align-items:center;}
+.justify-center{justify-content:center;}
+.justify-between{justify-content:space-between;}
+.gap-\\[10px\\]{gap:10px;}
+.gap-\\[12px\\]{gap:12px;}
+.gap-\\[2px\\]{gap:2px;}
+.gap-\\[4px\\]{gap:4px;}
+.overflow-hidden{overflow:hidden;}
+.overflow-y-auto{overflow-y:auto;}
+.border{border-width:1px;}
+.border-0{border-width:0px;}
+.rounded-\\[6px\\]{border-radius:6px;}
+.bg-transparent{background-color:transparent /* transparent */;}
+.bg-white\\/10{background-color:rgb(255 255 255 / 0.1) /* #fff */;}
+.hover\\:bg-\\[var\\(--prism-sidebar-hover-bg\\)\\]:hover{background-color:var(--prism-sidebar-hover-bg) /* var(--prism-sidebar-hover-bg) */;}
+.hover\\:bg-white\\/10:hover{background-color:rgb(255 255 255 / 0.1) /* #fff */;}
+.p-\\[20px\\]{padding:20px;}
+.px-\\[10px\\]{padding-left:10px;padding-right:10px;}
+.px-\\[12px\\]{padding-left:12px;padding-right:12px;}
+.py-\\[10px\\]{padding-top:10px;padding-bottom:10px;}
+.py-\\[8px\\]{padding-top:8px;padding-bottom:8px;}
+.pl-\\[12px\\]{padding-left:12px;}
+.pt-\\[4px\\]{padding-top:4px;}
+.pt-2{padding-top:0.5rem;}
+.text-center{text-align:center;}
+.text-left{text-align:left;}
+.text-\\[12\\.5px\\]{font-size:12.5px;}
+.text-\\[12px\\]{font-size:12px;}
+.text-\\[13px\\]{font-size:13px;}
+.text-\\[14px\\]{font-size:14px;}
+.text-\\[16px\\]{font-size:16px;}
+.text-\\[30px\\]{font-size:30px;}
+.text-\\[\\#ffd0d0\\]{--un-text-opacity:1;color:rgb(255 208 208 / var(--un-text-opacity)) /* #ffd0d0 */;}
+.text-\\[rgba\\(255\\,255\\,255\\,\\.95\\)\\]{--un-text-opacity:.95;color:rgba(255, 255, 255, var(--un-text-opacity)) /* rgba(255,255,255,.95) */;}
+.text-\\[var\\(--prism-sidebar-text-color\\)\\]{color:var(--prism-sidebar-text-color) /* var(--prism-sidebar-text-color) */;}
+.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
+.text-white\\/80{color:rgb(255 255 255 / 0.8) /* #fff */;}
+.text-white\\/90{color:rgb(255 255 255 / 0.9) /* #fff */;}
+.hover\\:text-white:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}
+.text-inherit{color:inherit;}
+.font-bold{font-weight:700;}
+.font-semibold{font-weight:600;}
+.leading-\\[16px\\]{line-height:16px;}
+.leading-\\[17px\\]{line-height:17px;}
+.leading-\\[18px\\]{line-height:18px;}
+.leading-\\[36px\\]{line-height:36px;}
+.tracking-\\[2px\\]{letter-spacing:2px;}
+.font-\\[500\\]{font-family:500;}
+.font-\\[600\\]{font-family:600;}
+.font-\\[800\\]{font-family:800;}
+.no-underline{text-decoration:none;}
+.hover\\:opacity-\\[\\.9\\]:hover{opacity:.9;}
+.focus-visible\\:outline-\\[2px\\]:focus-visible{outline-width:2px;}
+.focus-visible\\:outline-\\[\\#ffffff\\]:focus-visible{--un-outline-color-opacity:1;outline-color:rgb(255 255 255 / var(--un-outline-color-opacity)) /* #ffffff */;}
+.focus-visible\\:outline-offset-\\[2px\\]:focus-visible{outline-offset:2px;}
+.focus-visible\\:outline:focus-visible{outline-style:solid;}
+.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.duration-\\[150ms\\]{transition-duration:150ms;}
+.duration-\\[200ms\\]{transition-duration:200ms;}
+.ease-\\[cubic-bezier\\(\\.4\\,0\\,\\.2\\,1\\)\\]{transition-timing-function:cubic-bezier(.4,0,.2,1);}
+`, o = {
+  sidebar: "fixed left-0 top-0 bottom-0 z-[1600] box-border [background:var(--prism-sidebar-bg)] text-[var(--prism-sidebar-text-color)] [font-family:var(--prism-sidebar-font-family)] p-[20px] h-[100vh] overflow-hidden flex flex-col gap-[12px] w-[var(--prism-sidebar-width)] min-w-[var(--prism-sidebar-width)]",
+  brand: "text-center text-inherit no-underline text-[30px] leading-[36px] font-[800] tracking-[2px] px-[10px] transition-opacity duration-[150ms] ease-[cubic-bezier(.4,0,.2,1)] hover:opacity-[.9] focus-visible:outline focus-visible:outline-[2px] focus-visible:outline-[#ffffff] focus-visible:outline-offset-[2px] font-bold",
+  subtitle: "text-center text-[12px] leading-[16px] px-[10px] mb-[16px]",
+  nav: "prism-nav flex-[1_1_0%] flex flex-col gap-[4px] overflow-y-auto [scrollbar-width:none] [-ms-overflow-style:none]",
+  footer: "mt-2 [border-top:1px_solid_#ffffff26] pt-2",
+  logout: "w-full box-border border-0 bg-transparent text-white/90 no-underline flex items-center gap-[10px] text-left text-[12.5px] leading-[17px] font-[600] py-[8px] px-[12px] rounded-[6px] cursor-pointer hover:bg-white/10 hover:text-white focus-visible:outline focus-visible:outline-[2px] focus-visible:outline-[#ffffff] focus-visible:outline-offset-[2px]",
+  state: "py-[8px] px-[10px] text-[14px]",
+  loaderWrap: "w-full min-h-full flex items-center justify-center",
+  loaderSpinner: "prism-loader-spinner",
+  error: "py-[8px] px-[10px] text-[14px] text-[#ffd0d0]",
+  group: "mb-[4px]",
+  groupTitle: "w-full bg-transparent border-0 text-[rgba(255,255,255,.95)] flex items-center justify-between text-left py-[10px] px-[12px] rounded-[6px] text-[13px] leading-[18px] font-semibold transition-colors cursor-pointer hover:bg-[var(--prism-sidebar-hover-bg)] focus-visible:outline focus-visible:outline-[2px] focus-visible:outline-[#ffffff] focus-visible:outline-offset-[2px]",
+  chevron: "flex shrink-0 transition-transform duration-[200ms] ease-[cubic-bezier(.4,0,.2,1)]",
+  chevronOpen: "flex shrink-0 transition-transform duration-[200ms] ease-[cubic-bezier(.4,0,.2,1)] rotate-[180deg]",
+  children: "flex flex-col gap-[2px] pt-[4px] pl-[12px]",
+  item: "text-white/80 no-underline flex items-center gap-[10px] text-left text-[12.5px] font-[500] py-[8px] px-[12px] rounded-[6px] transition-colors hover:text-white focus-visible:outline focus-visible:outline-[2px] focus-visible:outline-[#ffffff] focus-visible:outline-offset-[2px]",
+  itemActive: "text-white no-underline flex items-center gap-[10px] text-left text-[12.5px] font-[500] py-[8px] px-[12px] rounded-[6px] transition-colors hover:text-white focus-visible:outline focus-visible:outline-[2px] focus-visible:outline-[#ffffff] focus-visible:outline-offset-[2px] bg-white/10",
+  itemIcon: "flex shrink-0 text-[16px]"
+};
+function K(t, e) {
+  t.querySelectorAll("[data-action]").forEach((r) => {
+    r.addEventListener("click", (i) => e(i)), r.addEventListener("keydown", (i) => {
+      D(i) && (i.preventDefault(), e(i));
+    });
+  });
+}
+function Q(t, e) {
+  const r = t.currentTarget;
+  if (!(r instanceof HTMLElement)) return;
+  r instanceof HTMLAnchorElement && t.preventDefault();
+  const i = r.dataset.action;
+  if (i === "home") {
+    e.onStaticNavigation(e.homeUrl);
+    return;
+  }
+  if (i === "logout") {
+    e.onStaticNavigation(e.logoutPath);
+    return;
+  }
+  const n = r.dataset.id;
+  if (n) {
+    if (i === "toggle") {
+      e.onToggle(n);
+      return;
+    }
+    i === "navigate" && e.onNavigate(n);
+  }
+}
+function tt(t, e) {
+  t.has(e) ? t.delete(e) : t.add(e);
+}
+function $(t) {
+  const e = F(t || "").trim();
+  if (!e) return "/";
+  try {
+    return v(new URL(e, "http://localhost").pathname || "/");
+  } catch {
+    return v(e);
+  }
+}
+function et(t, e) {
+  if (!t || !e) return !1;
+  if (t === e) return !0;
+  const r = t === "/" ? t : `${t}/`, i = e === "/" ? e : `${e}/`;
+  return r.endsWith(i) || i.endsWith(r);
+}
+function rt(t, e) {
+  const r = $(e || "/"), i = /* @__PURE__ */ new Set();
+  let n = null;
+  const c = (f, l) => {
+    for (const s of f) {
+      const u = String(s.id), g = s.path ? $(s.path) : "", h = et(g, r), p = Array.isArray(s.children) ? c(s.children, [...l, u]) : !1;
+      if (h || p) {
+        n = h ? u : n;
+        for (const b of l)
+          i.add(b);
+        return p && i.add(u), !0;
+      }
+    }
+    return !1;
+  };
+  return c(t, []), { activeId: n, expandedIds: i };
+}
+function it(t, e) {
+  return U(t, B(e));
+}
+function nt(t, e) {
+  return U(t, e);
+}
+function ot(t) {
+  return t.activePath || window.location.pathname;
+}
+function at(t, e) {
+  const r = ot(e), { activeId: i, expandedIds: n } = rt(t.menu, r);
+  t.activeId = i, t.expandedIds = n;
+}
+function st(t) {
+  t.loading = !0, t.error = "";
+}
+function lt(t) {
+  return t && t.abort(), new AbortController();
+}
+function ut(t, e, r) {
+  return t !== e || r.aborted;
+}
+function ct(t, e, r) {
+  return t !== e || r instanceof Error && r.name === "AbortError";
+}
+function ft(t, e) {
+  t.menu = e, t.loading = !1, t.error = "";
+}
+function dt(t, e) {
+  t.loading = !1, t.menu = [], t.error = e;
+}
+const ht = '<span class="anticon anticon-appstore"><svg viewBox="64 64 896 896" width="1em" height="1em" fill="currentColor"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span>', pt = '<span class="anticon anticon-logout"><svg viewBox="64 64 896 896" focusable="false" data-icon="logout" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5a353.84 353.84 0 01-112.7 75.9A352.8 352.8 0 01512.4 866c-47.9 0-94.3-9.4-137.9-27.8a353.84 353.84 0 01-112.7-75.9 353.28 353.28 0 01-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 000-12.6z"></path></svg></span>', gt = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
+function bt(t, e) {
+  const r = String(e.id);
+  return {
+    active: t.activeId === r,
+    expanded: t.expandedIds.has(r)
+  };
+}
+function y(t) {
+  return String(t.baseUrl || "").replace(/\/+$/, "");
+}
+function E(t, e) {
+  const r = String(e || "").trim();
+  return r ? /^(https?:)?\/\//.test(r) || r.startsWith("mailto:") || r.startsWith("tel:") || !t ? r : r.startsWith("/") ? `${t}${r}` : `${t}/${r}` : t;
+}
+function I(t, e, r) {
+  const i = bt(e, t), n = !!t.children?.length, c = y(r), f = E(c, t.path ?? "");
+  if (n) {
+    const s = i.expanded || !r.collapsed;
+    return `
+        <div class="${o.group}">
+          <button type="button" class="${o.groupTitle}" data-action="toggle" data-id="${t.id}" aria-expanded="${s}">
+            <span>${t.name}</span>
+            <span class="${s ? o.chevronOpen : o.chevron}">${gt}</span>
+          </button>
+          <div class="${s ? o.children : `${o.children} hidden`}">
+            ${(t.children ?? []).map((u) => I(u, e, r)).join("")}
+          </div>
+        </div>
+      `;
+  }
+  const l = H(i.active);
+  return `
+      <a
+        href="${f}"
+        target="${r.target}"
+        class="${i.active ? o.itemActive : o.item}"
+        data-action="navigate"
+        data-id="${t.id}"
+        data-path="${f}"
+        ${l ? `aria-current="${l}"` : ""}
+      >
+        <span class="${o.itemIcon}">${ht}</span>
+        ${t.name}
+      </a>
+    `;
+}
+function xt(t, e, r) {
+  const i = y(t);
+  return `
+      <a href="${r(i || t.homeUrl)}" target="${t.target}" class="${o.brand}">
+        ${e(t.title)}
+      </a>
+      <div class="${o.subtitle}">${e(t.subtitle)}</div>
+    `;
+}
+function vt(t, e, r) {
+  const i = y(t), n = E(i, t.logoutPath);
+  return `
+      <div class="${o.footer}">
+        <a href="${r(n)}" target="${t.target}" class="${o.logout}">
+          <span class="${o.itemIcon}">${pt}</span>
+          ${e(t.logoutText)}
+        </a>
+      </div>
+    `;
+}
+function mt(t, e) {
+  const r = e.error;
+  return t.loading ? `<div id="sidebar-loader" class="${o.loaderWrap}" aria-label="Loading navigation"><span class="${o.loaderSpinner}" aria-hidden="true"></span></div>` : r ? `<div class="${o.error}">${r}</div>` : t.menu.length ? t.menu.map((i) => I(i, t, e)).join("") : `<div class="${o.state}"></div>`;
+}
+function m(t) {
+  return String(t || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function C(t) {
+  return m(t).replace(/"/g, "&quot;");
+}
+function T(t, e) {
+  for (const r of e) {
+    if (String(r.id) === t) return r;
+    if (r.children?.length) {
+      const i = T(t, r.children);
+      if (i) return i;
+    }
+  }
+  return null;
+}
+function wt(t, e) {
+  const r = String(t || "").trim();
+  if (!(!r || r === "#")) {
+    if (e === "_blank") {
+      window.open(r, "_blank", "noopener,noreferrer");
+      return;
+    }
+    if (e === "_top")
+      try {
+        if (window.top) {
+          window.top.location.href = r;
+          return;
+        }
+      } catch {
+        window.location.href = r;
+        return;
+      }
+    window.location.href = r;
+  }
+}
+class yt extends HTMLElement {
+  static observedAttributes = [
+    "token",
+    "api-url",
+    "base-url",
+    "active-path",
+    "target",
+    "use-shadow-dom",
+    "aria-label",
+    "collapsed",
+    "auto-navigate",
+    "width",
+    "title",
+    "subtitle",
+    "home-url",
+    "logout-text",
+    "logout-path",
+    "error"
+  ];
+  config = R({});
+  state = Z();
+  renderRoot = null;
+  abortController = null;
+  refreshSequence = 0;
+  get token() {
+    return this.config.token;
+  }
+  set token(e) {
+    this.setConfig({ token: e });
+  }
+  get apiUrl() {
+    return this.config.apiUrl;
+  }
+  set apiUrl(e) {
+    this.setConfig({ apiUrl: e });
+  }
+  get activePath() {
+    return this.config.activePath;
+  }
+  set activePath(e) {
+    this.setActivePath(e);
+  }
+  get target() {
+    return this.config.target;
+  }
+  set target(e) {
+    this.setConfig({ target: e });
+  }
+  get useShadowDom() {
+    return this.config.useShadowDom;
+  }
+  set useShadowDom(e) {
+    this.setConfig({ useShadowDom: e });
+  }
+  get ariaLabel() {
+    return this.config.ariaLabel;
+  }
+  set ariaLabel(e) {
+    this.setConfig({ ariaLabel: e });
+  }
+  get collapsed() {
+    return this.config.collapsed;
+  }
+  set collapsed(e) {
+    this.setConfig({ collapsed: e });
+  }
+  get autoNavigate() {
+    return this.config.autoNavigate;
+  }
+  set autoNavigate(e) {
+    this.setConfig({ autoNavigate: e });
+  }
+  get width() {
+    return this.config.width;
+  }
+  set width(e) {
+    this.setConfig({ width: e });
+  }
+  get title() {
+    return this.config.title;
+  }
+  set title(e) {
+    this.setConfig({ title: e });
+  }
+  get subtitle() {
+    return this.config.subtitle;
+  }
+  set subtitle(e) {
+    this.setConfig({ subtitle: e });
+  }
+  get homeUrl() {
+    return this.config.homeUrl;
+  }
+  set homeUrl(e) {
+    this.setConfig({ homeUrl: e });
+  }
+  get logoutText() {
+    return this.config.logoutText;
+  }
+  set logoutText(e) {
+    this.setConfig({ logoutText: e });
+  }
+  get logoutPath() {
+    return this.config.logoutPath;
+  }
+  set logoutPath(e) {
+    this.setConfig({ logoutPath: e });
+  }
+  get error() {
+    return this.config.error;
+  }
+  set error(e) {
+    this.setConfig({ error: e });
+  }
+  connectedCallback() {
+    this.syncConfigFromHost(), this.ensureRenderRoot(), this.render(), this.refresh().catch(() => {
+    });
+  }
+  disconnectedCallback() {
+    this.abortController && this.abortController.abort();
+  }
+  attributeChangedCallback(e, r, i) {
+    if (r === i) return;
+    const n = this.config.useShadowDom;
+    if (this.syncConfigFromHost(), e === "use-shadow-dom" ? this.ensureRenderRoot() : n !== this.config.useShadowDom && this.ensureRenderRoot(), e === "token" || e === "api-url") {
+      this.render(), this.refresh().catch(() => {
+      });
+      return;
+    }
+    this.rerenderWithMatchState();
+  }
+  async refresh() {
+    const e = ++this.refreshSequence;
+    this.prepareRefresh();
+    const r = this.resetAbortController();
+    try {
+      if (this.isRefreshStale(e, r)) return;
+      const i = await L(this.config, r);
+      if (this.isRefreshStale(e, r)) return;
+      this.finishRefreshSuccess(i), W(this, { menu: i });
+    } catch (i) {
+      if (this.shouldIgnoreRefreshError(e, i)) return;
+      const n = i instanceof Error ? i.message : "Failed to load menu";
+      this.finishRefreshFailure(n), j(this, { message: n });
+    }
+  }
+  setActivePath(e) {
+    this.updateConfigAndRender({ activePath: e });
+  }
+  setConfig(e) {
+    this.updateConfigAndRender(e);
+  }
+  updateConfigAndRender(e) {
+    const r = this.config.useShadowDom;
+    this.config = nt(this.config, e), r !== this.config.useShadowDom && this.ensureRenderRoot(), this.rerenderWithMatchState();
+  }
+  rerenderWithMatchState() {
+    this.applyMatchState(), this.render();
+  }
+  syncConfigFromHost() {
+    this.config = it(this.config, this);
+  }
+  prepareRefresh() {
+    st(this.state), this.render();
+  }
+  resetAbortController() {
+    return this.abortController = lt(this.abortController), this.abortController.signal;
+  }
+  isRefreshStale(e, r) {
+    return ut(e, this.refreshSequence, r);
+  }
+  shouldIgnoreRefreshError(e, r) {
+    return ct(e, this.refreshSequence, r);
+  }
+  finishRefreshSuccess(e) {
+    ft(this.state, e), this.rerenderWithMatchState();
+  }
+  finishRefreshFailure(e) {
+    dt(this.state, e), this.render();
+  }
+  ensureRenderRoot() {
+    if (this.config.useShadowDom) {
+      this.renderRoot = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+      return;
+    }
+    this.renderRoot = this;
+  }
+  applyMatchState() {
+    at(this.state, this.config);
+  }
+  render() {
+    this.renderRoot && (this.applyHostWidthStyles(), this.renderShell(), this.bindEvents(), this.ensureActiveItemInView());
+  }
+  applyHostWidthStyles() {
+    this.style.setProperty("width", this.config.width), this.style.setProperty("min-width", this.config.width), this.style.setProperty("--prism-sidebar-width", this.config.width);
+  }
+  renderShell() {
+    if (!this.renderRoot) return;
+    const e = _(this.config.ariaLabel), r = `
+      <style>${J}</style>
+      <aside class="${o.sidebar}" style="--prism-sidebar-width: ${this.config.width};">
+        ${xt(this.config, m, C)}
+        <nav class="${o.nav}" role="${e.role}" aria-label="${e["aria-label"]}">
+          ${mt(this.state, this.config)}
+        </nav>
+        ${vt(this.config, m, C)}
+      </aside>
+    `;
+    this.renderRoot.innerHTML = r;
+  }
+  ensureActiveItemInView() {
+    if (!this.renderRoot || !this.state.activeId) return;
+    const e = this.renderRoot.querySelector('[data-action="navigate"][aria-current="page"]');
+    e && e.scrollIntoView({ block: "nearest" });
+  }
+  bindEvents() {
+    this.renderRoot && K(this.renderRoot, (e) => this.handleAction(e));
+  }
+  handleAction(e) {
+    Q(e, {
+      homeUrl: this.config.homeUrl,
+      logoutPath: this.config.logoutPath,
+      onStaticNavigation: (r) => this.handleStaticNavigation(r),
+      onToggle: (r) => this.handleToggleAction(r),
+      onNavigate: (r) => this.handleNavigateAction(r)
+    });
+  }
+  handleToggleAction(e) {
+    tt(this.state.expandedIds, e), this.render();
+  }
+  handleNavigateAction(e) {
+    const r = T(e, this.state.menu);
+    !r || !r.path || (this.state.activeId = e, this.render(), q(this, {
+      item: r,
+      resolvedPath: r.path,
+      target: this.config.target
+    }), G(r.path, this.config));
+  }
+  handleStaticNavigation(e) {
+    wt(e, this.config.target);
+  }
+}
+const z = "prism-sidebar";
+function kt() {
+  customElements.get(z) || customElements.define(z, yt);
+}
+export {
+  z as PRISM_SIDEBAR_TAG_NAME,
+  yt as PrismSidebarElement,
+  kt as registerPrismSidebar
+};
+//# sourceMappingURL=prism-sidebar.js.map