@campminder/components 0.2.0 → 0.3.1

package/dist/{state-Ns9O6R8g.js → state-BvQoY71J.js}

@@ -1,4 +1,4 @@
-import { n as r } from "./property-B5JHHBCF.js";
+import { n as r } from "./shell-tokens-BjECzZvL.js";
 /**
  * @license
  * Copyright 2017 Google LLC

package/dist/super-user-banner.js

@@ -1,4 +1,4 @@
-import { i as p, n as h, a as g, b as d, t as c } from "./property-B5JHHBCF.js";
+import { S as d, i as p, n as h, a as g, b as c, t as m } from "./shell-tokens-BjECzZvL.js";
 const b = p`
   * {
     padding: 0;
@@ -11,6 +11,12 @@ const b = p`
     height: 32px;
     min-height: 32px;
     max-height: 32px;
+
+    /* Declared per shadow root. This component is slotted into
+     * '<campminder-app-shell>' as a light-DOM sibling of the side nav, not a
+     * descendant of it, so it inherits nothing from the side nav's ':host' and
+     * must read the shared token itself. Rationale: '../shell-tokens.ts'. */
+    --font-family: ${d};
   }
 
   .banner {
@@ -45,7 +51,7 @@ const b = p`
   }
 
   .banner-text {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family);
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
@@ -114,12 +120,12 @@ const b = p`
     }
   }
 `;
-var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (n, a, r, s) => {
-  for (var e = s > 1 ? void 0 : s ? u(a, r) : a, o = n.length - 1, l; o >= 0; o--)
-    (l = n[o]) && (e = (s ? l(a, r, e) : l(e)) || e);
-  return s && e && m(a, r, e), e;
+var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (n, a, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? f(a, o) : a, r = n.length - 1, l; r >= 0; r--)
+    (l = n[r]) && (e = (s ? l(a, o, e) : l(e)) || e);
+  return s && e && u(a, o, e), e;
 };
-const x = /^(local|localhost|dev|develop(ment)?|qa\d*|test\d*|demo|sandbox|uat)$/;
+const v = /^(local|localhost|dev|develop(ment)?|qa\d*|test\d*|demo|sandbox|uat)$/;
 let t = class extends g {
   constructor() {
     super(...arguments), this.client = "", this.superUser = "", this.activeEnvironment = "";
@@ -142,10 +148,10 @@ let t = class extends g {
    */
   get environmentBadgeClass() {
     const n = this.activeEnvironment.trim().toLowerCase();
-    return n === "staging" ? "staging" : x.test(n) ? "local" : "alert";
+    return n === "staging" ? "staging" : v.test(n) ? "local" : "alert";
   }
   render() {
-    return d`
+    return c`
       <section class="banner banner-text">
         <div class="content">
           <span class="text-bold name"
@@ -171,7 +177,7 @@ i([
   h({ type: String, attribute: "active-environment" })
 ], t.prototype, "activeEnvironment", 2);
 t = i([
-  c("cm-super-user-banner")
+  m("cm-super-user-banner")
 ], t);
 export {
   t as SuperUserBanner

package/dist/top-bar.js

@@ -1,6 +1,6 @@
-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
+import { b as r, S as m, i as v, n as b, a as y, A as $, t as _ } from "./shell-tokens-BjECzZvL.js";
+import { r as g } from "./state-BvQoY71J.js";
+const L = r`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -11,7 +11,7 @@ const _ = o`<svg
     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
+</svg>`, S = r`<svg
   width="20"
   height="20"
   viewBox="0 0 20 20"
@@ -22,7 +22,7 @@ const _ = o`<svg
     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
+</svg>`, k = r`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -33,7 +33,7 @@ const _ = o`<svg
     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
+</svg>`, D = r`<svg
   width="24"
   height="24"
   viewBox="0 0 24 24"
@@ -44,7 +44,7 @@ const _ = o`<svg
     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
+</svg>`, h = r`<svg
   width="16"
   height="16"
   viewBox="0 0 16 16"
@@ -64,6 +64,12 @@ const _ = o`<svg
 
   :host {
     height: 56px;
+
+    /* Declared per shadow root. This component is slotted into
+     * '<campminder-app-shell>' as a light-DOM sibling of the side nav, not a
+     * descendant of it, so it inherits nothing from the side nav's ':host' and
+     * must read the shared token itself. Rationale: '../shell-tokens.ts'. */
+    --font-family: ${m};
   }
 
   .top-bar {
@@ -116,7 +122,7 @@ const _ = o`<svg
   }
 
   .page-title {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family);
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
@@ -201,7 +207,7 @@ const _ = o`<svg
   }
 
   .user-info strong {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family);
     font-size: 16px;
     font-weight: 600;
     line-height: 24px;
@@ -209,7 +215,7 @@ const _ = o`<svg
   }
 
   .user-info p {
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family);
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
@@ -232,7 +238,7 @@ const _ = o`<svg
     align-items: center;
     border-radius: 4px;
     text-decoration: none;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family);
     font-size: 14px;
     font-weight: 400;
     line-height: 20px;
@@ -285,7 +291,7 @@ const _ = o`<svg
     box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.12);
     border-radius: 4px;
     display: none;
-    font-family: 'Inter', sans-serif;
+    font-family: var(--font-family);
     overflow-y: auto;
   }
 
@@ -386,109 +392,109 @@ const _ = o`<svg
       display: none;
     }
   }
-`, D = (e) => {
-  var t, i, n, r;
+`, O = (e) => {
+  var t, n, i, o;
   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) => {
+    return s.account_data.links.sort(E), (n = (t = s.super_user_data) == null ? void 0 : t.sections) == null || n.sort(f), (o = (i = s.super_user_data) == null ? void 0 : i.sections) == null || o.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) {
+}, E = (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), U = /* @__PURE__ */ new Set(["http:", "https:", "mailto:"]), A = /* @__PURE__ */ new Set(["http:", "https:", "data:"]), P = "#", F = "https://portal.invalid";
+function w(e) {
   try {
-    return new URL(e, P).protocol;
+    return new URL(e, F).protocol;
   } catch {
     return null;
   }
 }
-function w(e) {
+function x(e) {
   if (!e) return !1;
-  const t = x(e);
-  return t !== null && E.has(t);
+  const t = w(e);
+  return t !== null && U.has(t);
 }
 function u(e) {
-  return w(e) ? e : A;
+  return x(e) ? e : P;
 }
 function d(e) {
   if (!e) return "";
-  const t = x(e);
-  return t !== null && U.has(t) ? e : "";
+  const t = w(e);
+  return t !== null && A.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 ?? "");
+const H = /* @__PURE__ */ new Set(["height", "width", "top", "left"]), z = "height=720,width=1024", M = "noopener,noreferrer";
+function V(e) {
+  const t = (e ?? "").split(",").map((i) => i.trim()).filter((i) => {
+    const [o, s] = i.split("=");
+    return H.has((o == null ? void 0 : o.toLowerCase()) ?? "") && /^\d+$/.test(s ?? "");
   });
-  return `${t.length > 0 ? t.join(",") : H},${I}`;
+  return `${t.length > 0 ? t.join(",") : z},${M}`;
 }
-function V(e) {
+function I(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;
+var R = Object.defineProperty, B = Object.getOwnPropertyDescriptor, c = (e, t, n, i) => {
+  for (var o = i > 1 ? void 0 : i ? B(t, n) : t, s = e.length - 1, a; s >= 0; s--)
+    (a = e[s]) && (o = (i ? a(t, n, o) : a(o)) || o);
+  return i && o && R(t, n, o), o;
 };
-let l = class extends b {
+let l = class extends y {
   constructor() {
     super(...arguments), this.data = null, this.isDropdownOpen = !1, this.isSuperUserDropdownOpen = !1, this.handleOutsideClick = (e) => {
-      var i;
+      var n;
       const t = e.target;
-      (i = this.shadowRoot) != null && i.contains(t) || this.closeAllDropdowns();
+      (n = this.shadowRoot) != null && n.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`
+        return r`<span class="feature-value icon">${e.enabled ? L : S}</span>`;
+      const n = I(e.value).map((i, o) => o === 0 ? i : r`<br />${i}`);
+      return r`<span class="feature-value">${n}</span>`;
+    }, this.renderFeature = (e) => r`
     <div class="feature ${e.display === "block" ? "block" : ""}">
-      ${e.name ? o`<span class="feature-name">${e.name}</span>` : ""}
+      ${e.name ? r`<span class="feature-name">${e.name}</span>` : ""}
       ${this.renderFeatureValue(e)}
     </div>
-  `, this.renderFeatureSection = (e) => o`
+  `, this.renderFeatureSection = (e) => r`
     <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.title ? r`<p class="section-title">${e.title}</p>` : ""}
+      ${e.sub_title ? r`<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`
+      const { name: t, url: n, new_tab: i, icon_url: o, popup: s, popup_properties: a } = e, p = i || s;
+      return s ? r`
       <a
         href="#nowhere"
         target="_top"
-        @click="${() => (w(i) && window.open(i, "", z(a)), !1)}"
+        @click="${() => (x(n) && window.open(n, "", V(a)), !1)}"
       >
         <img
-          src=${d(r)}
+          src=${d(o)}
           alt="icon"
           class="link-icon"
           referrerpolicy="no-referrer"
         />
-        ${t} ${p ? o`<span class="new-tab-icon">${h}</span>` : null}
+        ${t} ${p ? r`<span class="new-tab-icon">${h}</span>` : null}
       </a>
-    ` : o`
+    ` : r`
         <a
-          href=${u(i)}
-          target=${n ? "_blank" : "_self"}
-          rel=${n ? "noopener noreferrer" : y}
+          href=${u(n)}
+          target=${i ? "_blank" : "_self"}
+          rel=${i ? "noopener noreferrer" : $}
         >
           <img
-            src=${d(r)}
+            src=${d(o)}
             alt="icon"
             class="link-icon"
             referrerpolicy="no-referrer"
           />
-          ${t} ${p ? o`<span class="new-tab-icon">${h}</span>` : null}
+          ${t} ${p ? r`<span class="new-tab-icon">${h}</span>` : null}
         </a>
       `;
     };
@@ -509,16 +515,16 @@ let l = class extends b {
     this.isDropdownOpen = !1, this.isSuperUserDropdownOpen = !1;
   }
   renderSearch() {
-    return o`<slot name="search"></slot>`;
+    return r`<slot name="search"></slot>`;
   }
-  renderSuperUserDropdown(e, t, i) {
-    var n;
-    return o`
+  renderSuperUserDropdown(e, t, n) {
+    var i;
+    return r`
       <div
         class=${`super-user-toggle ${this.isSuperUserDropdownOpen ? "active" : ""}`}
         @click=${this.toggleSuperUserDropdown}
       >
-        <span class="info-icon">${k}</span>
+        <span class="info-icon">${D}</span>
       </div>
       <div class=${`super-user-dropdown ${this.isSuperUserDropdownOpen ? "open" : ""}`}>
         <div class="super-user-section-client">
@@ -526,17 +532,17 @@ let l = class extends b {
           <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)}
+        ${(i = e == null ? void 0 : e.sections) == null ? void 0 : i.map(this.renderFeatureSection)}
         <div class="super-user-section-btn">
           <div class="feature">
-            <a href=${u(i)} class="reset-pwd-url">Reset Password</a>
+            <a href=${u(n)} class="reset-pwd-url">Reset Password</a>
           </div>
         </div>
       </div>
     `;
   }
-  renderUserDropdown(e, t, i) {
-    return o`
+  renderUserDropdown(e, t, n) {
+    return r`
       <div
         class=${`user-profile ${this.isDropdownOpen ? "active" : ""}`}
         @click=${this.toggleDropdown}
@@ -547,29 +553,29 @@ let l = class extends b {
           class="profile-pic"
           referrerpolicy="no-referrer"
         />
-        <span class="user-drop-down-icon">${S}</span>
+        <span class="user-drop-down-icon">${k}</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 class="navigation-links">${n.map(this.renderNavigationLink)}</div>
       </div>
     `;
   }
   render() {
     if (!this.data)
-      return o`<div>Loading...</div>`;
+      return r`<div>Loading...</div>`;
     const {
       logo_url: e,
       page_title: t,
-      account_data: i,
-      client_data: n,
-      super_user_data: r,
+      account_data: n,
+      client_data: i,
+      super_user_data: o,
       reset_password_url: s
-    } = this.data, { person_data: a, links: p } = i;
-    return o`
+    } = this.data, { person_data: a, links: p } = n;
+    return r`
       <section class="top-bar">
         <div class="top-bar-content">
           <div class="page-info">
@@ -586,8 +592,8 @@ let l = class extends b {
 
           <div class="user-navigation">
             ${this.renderSearch()}
-            ${r ? this.renderSuperUserDropdown(r, n, s) : null}
-            ${this.renderUserDropdown(a, n, p)}
+            ${o ? this.renderSuperUserDropdown(o, i, s) : null}
+            ${this.renderUserDropdown(a, i, p)}
           </div>
         </div>
       </section>
@@ -596,9 +602,9 @@ let l = class extends b {
 };
 l.styles = C;
 c([
-  m({
+  b({
     type: Object,
-    converter: { fromAttribute: D }
+    converter: { fromAttribute: O }
   })
 ], l.prototype, "data", 2);
 c([
@@ -608,7 +614,7 @@ c([
   g()
 ], l.prototype, "isSuperUserDropdownOpen", 2);
 l = c([
-  $("cm-top-bar")
+  _("cm-top-bar")
 ], l);
 export {
   l as TopBar

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campminder/components",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "type": "module",
   "publishConfig": {
     "access": "public"