@campminder/components 0.1.0

package/dist/top-bar.js

@@ -0,0 +1,615 @@
+import { b as o, i as v, n as m, a as b, A as y, t as $ } from "./property-B5JHHBCF.js";
+import { r as g } from "./state-Ns9O6R8g.js";
+const _ = o`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M10 1.66675C5.40002 1.66675 1.66669 5.40008 1.66669 10.0001C1.66669 14.6001 5.40002 18.3334 10 18.3334C14.6 18.3334 18.3334 14.6001 18.3334 10.0001C18.3334 5.40008 14.6 1.66675 10 1.66675ZM8.33335 14.1667L4.16669 10.0001L5.34169 8.82508L8.33335 11.8084L14.6584 5.48341L15.8334 6.66675L8.33335 14.1667Z"
+    fill="#00AA47"
+  />
+</svg>`, L = o`<svg
+  width="20"
+  height="20"
+  viewBox="0 0 20 20"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M10 1.66675C5.39169 1.66675 1.66669 5.39175 1.66669 10.0001C1.66669 14.6084 5.39169 18.3334 10 18.3334C14.6084 18.3334 18.3334 14.6084 18.3334 10.0001C18.3334 5.39175 14.6084 1.66675 10 1.66675ZM14.1667 12.9917L12.9917 14.1667L10 11.1751L7.00835 14.1667L5.83335 12.9917L8.82502 10.0001L5.83335 7.00841L7.00835 5.83341L10 8.82508L12.9917 5.83341L14.1667 7.00841L11.175 10.0001L14.1667 12.9917Z"
+    fill="#A0A0A0"
+  />
+</svg>`, S = o`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M8.70621 11.4139L11.2962 14.0039C11.6862 14.3939 12.3162 14.3939 12.7062 14.0039L15.2962 11.4139C15.9262 10.7839 15.4762 9.70386 14.5862 9.70386H9.40621C8.51621 9.70386 8.07621 10.7839 8.70621 11.4139Z"
+    fill="#380F8C"
+  />
+</svg>`, k = o`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z"
+    fill="#380F8C"
+  />
+</svg>`, h = o`<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12.6667 12.6667H3.33333V3.33333H8V2H3.33333C2.59333 2 2 2.6 2 3.33333V12.6667C2 13.4 2.59333 14 3.33333 14H12.6667C13.4 14 14 13.4 14 12.6667V8H12.6667V12.6667ZM9.33333 2V3.33333H11.7267L5.17333 9.88667L6.11333 10.8267L12.6667 4.27333V6.66667H14V2H9.33333Z"
+    fill="#282828"
+  />
+</svg> `, C = v`
+  * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  :host {
+    height: 56px;
+  }
+
+  .top-bar {
+    height: inherit;
+    background-color: #ffffff;
+    display: flex;
+    padding: 8px 16px;
+    border-bottom: 1px solid #a0a0a0;
+    transition:
+      left 0.3s ease,
+      width 0.3s ease;
+  }
+
+  .top-bar-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    position: relative;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .page-info {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+
+  @media screen and (max-width: 530px) {
+    .page-info {
+      padding-left: 56px;
+    }
+  }
+
+  .home-icon {
+    display: grid;
+    place-content: center;
+    width: 136.02px;
+    height: 24px;
+    cursor: pointer;
+  }
+
+  .home-icon-img {
+    height: auto;
+    max-height: 100%;
+    width: auto;
+    max-width: 100%;
+    object-fit: contain;
+  }
+
+  .page-title {
+    font-family: 'Inter', sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: left;
+    text-underline-position: from-font;
+    text-decoration-skip-ink: none;
+    color: #282828;
+    margin-left: 32px;
+    text-transform: capitalize;
+    white-space: nowrap;
+  }
+
+  .user-navigation {
+    position: relative;
+    display: flex;
+    gap: 1px;
+    align-items: center;
+    flex: 1;
+    justify-content: flex-end;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @media screen and (max-width: 530px) {
+    .user-navigation {
+      flex: 1;
+      min-width: 0;
+      max-width: 100%;
+    }
+  }
+
+  .user-profile {
+    display: flex;
+    gap: 0;
+    justify-content: space-around;
+    align-items: center;
+    width: auto;
+    height: 40px;
+    padding: 4px 4px 4px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .user-profile:hover,
+  .user-profile.active,
+  .super-user-toggle:hover,
+  .super-user-toggle.active {
+    background-color: #773dbd3d;
+  }
+
+  .profile-pic {
+    height: 24px;
+    width: 24px;
+    border-radius: 50%;
+  }
+
+  .dropdown {
+    position: absolute;
+    width: 256px;
+    height: 0;
+    top: 42px;
+    right: 0;
+    border-radius: 4px;
+    background: #ffffff;
+    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.12);
+    z-index: 9999999;
+    overflow: hidden;
+    transition: height 0.1s ease-in-out;
+  }
+
+  .dropdown.open {
+    height: auto;
+  }
+
+  .user-info {
+    color: #000000;
+    padding: 8px 16px;
+    display: flex;
+    justify-content: flex-start;
+    flex-flow: column;
+    gap: 4px;
+  }
+
+  .user-info strong {
+    font-family: 'Inter', sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    letter-spacing: 0.0025em;
+  }
+
+  .user-info p {
+    font-family: 'Inter', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: -0.001em;
+    text-align: left;
+  }
+
+  .navigation-links {
+    list-style: none;
+    padding: 0 8px 8px 8px;
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .navigation-links a {
+    width: 240px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    text-decoration: none;
+    font-family: 'Inter', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: -0.001em;
+    color: #282828;
+  }
+
+  .navigation-links a:hover {
+    background-color: #773dbd3d;
+  }
+
+  .link-icon {
+    display: grid;
+    place-content: center;
+    margin: 0 8px;
+    width: 20px;
+    height: 20px;
+  }
+
+  .user-drop-down-icon {
+    display: grid;
+    place-content: center;
+    width: 24px;
+    height: 24px;
+  }
+
+  .new-tab-icon {
+    margin-left: 4px;
+    display: grid;
+    place-content: center;
+  }
+
+  .super-user-toggle {
+    color: black;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    padding: 8px;
+  }
+
+  .super-user-dropdown {
+    position: absolute;
+    width: 305px;
+    max-height: calc(100vh - 105px);
+    top: 40px;
+    right: 61px;
+    background: #ffffff;
+    color: black;
+    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+    display: none;
+    font-family: 'Inter', sans-serif;
+    overflow-y: auto;
+  }
+
+  .super-user-dropdown.open {
+    display: block;
+  }
+
+  .super-user-section,
+  .super-user-section-btn {
+    padding: 8px 16px;
+    border-top: 1px solid #cccccc;
+  }
+
+  .super-user-section-client {
+    padding: 8px 16px;
+    border: none;
+  }
+
+  .section-title {
+    display: block;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 24px;
+    letter-spacing: 0.0025em;
+    color: #000000;
+  }
+
+  .client-section-title {
+    font-size: 16px;
+  }
+
+  .sub-title {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: -0.001em;
+    margin-bottom: 8px;
+  }
+
+  .feature {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    padding: 8px 0;
+  }
+
+  .feature.block {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .feature-name {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    letter-spacing: 0.0025em;
+  }
+
+  .feature-value {
+    margin-left: 6px;
+    color: #282828;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: -0.001em;
+  }
+
+  .feature.block .feature-value {
+    display: block;
+    margin-left: 0;
+    font-size: 12px;
+  }
+
+  .reset-pwd-url {
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    color: #773dbd;
+    text-align: left;
+    text-decoration: underline;
+  }
+
+  /*
+   * The single breakpoint for the page title, and there used to be two.
+   *
+   * Upstream hid it twice over: this rule, and a ':host(.is-mobile) .page-title--hidden'
+   * rule that fired off the class 'deviceCSS' wrote onto the host at its own 530px
+   * breakpoint. The class was applied unconditionally by the template, so the
+   * '--hidden' suffix described nothing — and because 815 > 530, this rule had already
+   * hidden the title before the other one could. Dropping the class and its rule leaves
+   * observable behaviour identical at every width, which is why the port is the moment
+   * to do it.
+   */
+  @media screen and (max-width: 815px) {
+    .page-title {
+      display: none;
+    }
+  }
+`, D = (e) => {
+  var t, i, n, r;
+  try {
+    const s = JSON.parse(decodeURIComponent(atob(e)));
+    return s.account_data.links.sort(O), (i = (t = s.super_user_data) == null ? void 0 : t.sections) == null || i.sort(f), (r = (n = s.super_user_data) == null ? void 0 : n.sections) == null || r.forEach((a) => {
+      var p;
+      (p = a.features) == null || p.sort(f);
+    }), s;
+  } catch (s) {
+    return console.error("Failed to decode and parse data:", s), null;
+  }
+}, O = (e, t) => e.sort_order === void 0 && t.sort_order === void 0 ? e.name.localeCompare(t.name) : (e.sort_order ?? 0) - (t.sort_order ?? 0) || e.name.localeCompare(t.name), f = (e, t) => (e.sort_order ?? 0) - (t.sort_order ?? 0), E = /* @__PURE__ */ new Set(["http:", "https:", "mailto:"]), U = /* @__PURE__ */ new Set(["http:", "https:", "data:"]), A = "#", P = "https://portal.invalid";
+function x(e) {
+  try {
+    return new URL(e, P).protocol;
+  } catch {
+    return null;
+  }
+}
+function w(e) {
+  if (!e) return !1;
+  const t = x(e);
+  return t !== null && E.has(t);
+}
+function u(e) {
+  return w(e) ? e : A;
+}
+function d(e) {
+  if (!e) return "";
+  const t = x(e);
+  return t !== null && U.has(t) ? e : "";
+}
+const F = /* @__PURE__ */ new Set(["height", "width", "top", "left"]), H = "height=720,width=1024", I = "noopener,noreferrer";
+function z(e) {
+  const t = (e ?? "").split(",").map((n) => n.trim()).filter((n) => {
+    const [r, s] = n.split("=");
+    return F.has((r == null ? void 0 : r.toLowerCase()) ?? "") && /^\d+$/.test(s ?? "");
+  });
+  return `${t.length > 0 ? t.join(",") : H},${I}`;
+}
+function V(e) {
+  return e ? e.split(/<br\b[^>]*>/i) : [];
+}
+var M = Object.defineProperty, B = Object.getOwnPropertyDescriptor, c = (e, t, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? B(t, i) : t, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (r = (n ? a(t, i, r) : a(r)) || r);
+  return n && r && M(t, i, r), r;
+};
+let l = class extends b {
+  constructor() {
+    super(...arguments), this.data = null, this.isDropdownOpen = !1, this.isSuperUserDropdownOpen = !1, this.handleOutsideClick = (e) => {
+      var i;
+      const t = e.target;
+      (i = this.shadowRoot) != null && i.contains(t) || this.closeAllDropdowns();
+    }, this.toggleDropdown = (e) => {
+      e.stopPropagation(), this.isDropdownOpen = !this.isDropdownOpen, this.isDropdownOpen && (this.isSuperUserDropdownOpen = !1);
+    }, this.toggleSuperUserDropdown = (e) => {
+      e.stopPropagation(), this.isSuperUserDropdownOpen = !this.isSuperUserDropdownOpen, this.isSuperUserDropdownOpen && (this.isDropdownOpen = !1);
+    }, this.renderFeatureValue = (e) => {
+      if (e.enabled !== void 0)
+        return o`<span class="feature-value icon">${e.enabled ? _ : L}</span>`;
+      const i = V(e.value).map((n, r) => r === 0 ? n : o`<br />${n}`);
+      return o`<span class="feature-value">${i}</span>`;
+    }, this.renderFeature = (e) => o`
+    <div class="feature ${e.display === "block" ? "block" : ""}">
+      ${e.name ? o`<span class="feature-name">${e.name}</span>` : ""}
+      ${this.renderFeatureValue(e)}
+    </div>
+  `, this.renderFeatureSection = (e) => o`
+    <div class="super-user-section">
+      ${e.title ? o`<p class="section-title">${e.title}</p>` : ""}
+      ${e.sub_title ? o`<p class="sub-title">${e.sub_title}</p>` : ""}
+      ${e.features.map(this.renderFeature)}
+    </div>
+  `, this.renderNavigationLink = (e) => {
+      const { name: t, url: i, new_tab: n, icon_url: r, popup: s, popup_properties: a } = e, p = n || s;
+      return s ? o`
+      <a
+        href="#nowhere"
+        target="_top"
+        @click="${() => (w(i) && window.open(i, "", z(a)), !1)}"
+      >
+        <img
+          src=${d(r)}
+          alt="icon"
+          class="link-icon"
+          referrerpolicy="no-referrer"
+        />
+        ${t} ${p ? o`<span class="new-tab-icon">${h}</span>` : null}
+      </a>
+    ` : o`
+        <a
+          href=${u(i)}
+          target=${n ? "_blank" : "_self"}
+          rel=${n ? "noopener noreferrer" : y}
+        >
+          <img
+            src=${d(r)}
+            alt="icon"
+            class="link-icon"
+            referrerpolicy="no-referrer"
+          />
+          ${t} ${p ? o`<span class="new-tab-icon">${h}</span>` : null}
+        </a>
+      `;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.initEventListeners();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListeners();
+  }
+  initEventListeners() {
+    document.addEventListener("click", this.handleOutsideClick);
+  }
+  removeEventListeners() {
+    document.removeEventListener("click", this.handleOutsideClick);
+  }
+  closeAllDropdowns() {
+    this.isDropdownOpen = !1, this.isSuperUserDropdownOpen = !1;
+  }
+  renderSearch() {
+    return o`<slot name="search"></slot>`;
+  }
+  renderSuperUserDropdown(e, t, i) {
+    var n;
+    return o`
+      <div
+        class=${`super-user-toggle ${this.isSuperUserDropdownOpen ? "active" : ""}`}
+        @click=${this.toggleSuperUserDropdown}
+      >
+        <span class="info-icon">${k}</span>
+      </div>
+      <div class=${`super-user-dropdown ${this.isSuperUserDropdownOpen ? "open" : ""}`}>
+        <div class="super-user-section-client">
+          <p class="section-title client-section-title">Client ID: ${t.id}</p>
+          <p class="sub-title">Domain: ${t.domain}</p>
+          <p class="sub-title">Country: ${t.country}</p>
+        </div>
+        ${(n = e == null ? void 0 : e.sections) == null ? void 0 : n.map(this.renderFeatureSection)}
+        <div class="super-user-section-btn">
+          <div class="feature">
+            <a href=${u(i)} class="reset-pwd-url">Reset Password</a>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderUserDropdown(e, t, i) {
+    return o`
+      <div
+        class=${`user-profile ${this.isDropdownOpen ? "active" : ""}`}
+        @click=${this.toggleDropdown}
+      >
+        <img
+          src=${d(e.profile_url)}
+          alt="Profile"
+          class="profile-pic"
+          referrerpolicy="no-referrer"
+        />
+        <span class="user-drop-down-icon">${S}</span>
+      </div>
+      <div class=${`dropdown ${this.isDropdownOpen ? "open" : ""}`}>
+        <div class="user-info">
+          <strong>${e.name}</strong>
+          <p>${t.name}</p>
+        </div>
+        <div class="navigation-links">${i.map(this.renderNavigationLink)}</div>
+      </div>
+    `;
+  }
+  render() {
+    if (!this.data)
+      return o`<div>Loading...</div>`;
+    const {
+      logo_url: e,
+      page_title: t,
+      account_data: i,
+      client_data: n,
+      super_user_data: r,
+      reset_password_url: s
+    } = this.data, { person_data: a, links: p } = i;
+    return o`
+      <section class="top-bar">
+        <div class="top-bar-content">
+          <div class="page-info">
+            <a href="/default.aspx" class="home-icon">
+              <img
+                src=${d(e)}
+                alt="campminder"
+                class="home-icon-img"
+                referrerpolicy="no-referrer"
+              />
+            </a>
+            <div class="page-title">${t}</div>
+          </div>
+
+          <div class="user-navigation">
+            ${this.renderSearch()}
+            ${r ? this.renderSuperUserDropdown(r, n, s) : null}
+            ${this.renderUserDropdown(a, n, p)}
+          </div>
+        </div>
+      </section>
+    `;
+  }
+};
+l.styles = C;
+c([
+  m({
+    type: Object,
+    converter: { fromAttribute: D }
+  })
+], l.prototype, "data", 2);
+c([
+  g()
+], l.prototype, "isDropdownOpen", 2);
+c([
+  g()
+], l.prototype, "isSuperUserDropdownOpen", 2);
+l = c([
+  $("cm-top-bar")
+], l);
+export {
+  l as TopBar
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@campminder/components",
+  "version": "0.1.0",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./side-nav": {
+      "import": "./dist/side-nav.js",
+      "types": "./dist/side-nav/index.d.ts"
+    },
+    "./top-bar": {
+      "import": "./dist/top-bar.js",
+      "types": "./dist/top-bar/index.d.ts"
+    },
+    "./super-user-banner": {
+      "import": "./dist/super-user-banner.js",
+      "types": "./dist/super-user-banner/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@campminder/menu-tree": "^0.1.0",
+    "lit": "^3.1.2"
+  },
+  "devDependencies": {
+    "jsdom": "^25.0.0",
+    "shx": "^0.3.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-dts": "^3.7.2",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "clean": "shx rm -rf dist .turbo"
+  }
+}