@wavelengthusaf/web-components 1.1.1 → 1.2.0

package/README.md

@@ -14,6 +14,11 @@ npm install @wavelengthusaf/web-components
 
 ## Release Notes
 
+### 1.2.0
+
+- 12/4/2025
+- Added wavelength-nav-bar
+
 ### 1.1.1
 
 - 11/26/2025

package/dist/cjs/index.cjs

@@ -2341,6 +2341,190 @@ if (!customElements.get("wavelength-multi-select-autocomplete")) {
   customElements.define("wavelength-multi-select-autocomplete", WavelengthMultiSelectAutocomplete);
 }
 
+// src/web-components/wavelength-nav-bar.ts
+var template5 = document.createElement("template");
+template5.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      font-family: sans-serif;
+    }
+
+    
+    nav {
+      display: flex;
+      width: 100%;
+      height: var(--height, 25px);
+      padding: var(--padding, 1rem);
+      border-bottom: var(--border, 1px solid #ddd);
+      position: fixed;
+      top: -25;
+      z-index: 1000;
+      background: var(--bg, #ffffffff);
+      color: var(--txt, #000);
+      gap:1rem;
+      white-space: nowrap;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .flex-spacer {
+      flex: 8;
+    }
+
+    .home {
+      flex: 1;
+      justify-content: flex-start;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    #logo svg {
+      width: 28px;
+      height: 28px;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+
+    .tab {
+      padding: 0.35rem 0.75rem;
+      border: 1px solid #ffffffff;
+      border-radius: 4px;
+      text-align: center;
+      cursor: pointer;
+      background: #fff;
+    }
+
+    .tab:hover {
+      background: #f0f0f0; /* optional hover effect */
+    }
+
+
+    .settings {
+      flex: 1;
+      justify-content: flex-end;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;       
+      }
+
+    .profile {
+      padding: 0.5rem 0.75rem;
+      border: 2px solid #ccc;
+      border-radius: 6px;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .profile-name {
+      font-weight: 600;
+    }
+
+    .profile-note {
+      font-size: 0.8rem;
+      opacity: 0.75;
+    }
+
+    .middle-tab-group {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex: 3;
+    }
+  </style>
+  <nav>
+    <div class="section home" id="logo">
+      <!-- Inline SVG to ensure universal compatibility -->
+      <svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="280" height="280" viewBox="0 0 280 280">
+        <defs>
+          <style>
+            .b {
+              fill: #231f20;
+            }
+            .c {
+              fill: #fff;
+            }
+          </style>
+        </defs>
+        <path class="b" d="M82.5,272.3c-8,.5-13.5-2-17.5-5.5s-34-47.5-36-50.5-2-2.5-2-7.5-1.5-122-1.5-122c1.5-5.5,7-17.5,18-16l72-3.5c1-3.5,4-4.5,4-4.5l-44.5-40.5c-5.5-5.5,1.5-11.5,6.5-7l46,41c4-1.5,10.5-2,15.5-1l38.5-44.5c5.5-5.5,12,0,8,5.5l-36,42.5c1.5,1,4,4.5,4.5,6l28-2c5.5,0,47.5,14,57,17s12,9,12,17-1.5,140-1.5,140c-2.7,12.3-10.5,19-27.5,20.5l-143.5,15Z"/>
+        <path class="c" d="M240,113.3c.3-11.6-9.4-21-21-20.4l-122.5,6.4c-10.6.6-19,9.3-19,20v100.8c0,11.9,10.3,21.1,22.1,19.9l120.4-12.8c10-1.1,17.7-9.4,17.9-19.4l2.1-94.4Z"/>
+        <ellipse class="c" cx="228.4" cy="241.6" rx="7" ry="6.5" transform="translate(-89 340.5) rotate(-63.9)"/>
+        <path d="M132,217.5c-9.5,0-16.3-3.5-21-9.9-6-8.3-7.5-23.5-7.5-39.6s1-29.2,9.5-38.6c6-6.6,10-9.9,22-9.9s16.5,2.8,21,9.4c6.5,9.6,7.5,23.1,7.5,39.2s-.4,20.3-3.1,27.7c-2.7,7.3-6.3,12.8-11,16.4-4.7,3.6-11.3,5.4-17.4,5.4ZM132.5,200.4c5.2,0,7.8-2.9,10-8.8,1.5-6.6,2-11.9,2-23.7s0-17.6-1.5-24.2c-2.3-5.8-4.8-8.8-9.8-8.8-5.2,1.1-6.4,3.6-8.7,9.4-1.5,10.5-1.5,12.7-1.5,23.7s0,19.3,1.5,25.3c2.5,5,2.7,7.2,8,7.2Z"/>
+        <path d="M172.7,209.3c-1.1-1.1-.5-12.3-.5-12.3,0,0,0-.6,1.1-1.1,5.9,0,10.1-1.6,10.7-2.8,1.1-1.1,1.6-1.3,1.6-3.9l.5-44.1c0-6.1-7-2.8-12.9-3.3-.5,0-1.1-.6-1.1-1.1v-12.8c3.7-.7,8-1.9,11.1-3.9,3.1-2,4.3-5.7,6.4-8.4l16.8-1.1-.5,73.1s.5,3.3,2.1,3.9c1.1.4,7.5.6,9.1.6s1.6,1.1,1.6,1.1c0,1.7.5,11.7,0,12.3,0,.6-45,5-46.1,3.9Z"/>
+      </svg>
+      <slot name="home"></slot>
+    </div>
+  <div class="flex-spacer"></div> 
+<div class = "middle-tab-group">
+   <div class="tab"><a href="/applications"><slot name="tab">Applications</slot></a></div>
+  <div class="tab"><a href="/users"><slot name="tab">Users</slot></a></div>
+  <div class="tab"><a href="/apikeys"><slot name="tab">API Keys</slot></a></div>
+   </div>
+   <div class="flex-spacer"></div> 
+    <div class="section settings">
+        <div class="profile">
+          <span class="profile-name">User</span>
+          <span class="profile-note">Notifications</span>
+        </div>
+    </div>
+    </nav>
+`;
+var WavelengthNavBar = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["bg-color", "txt-color", "height", "padding", "border", "items"];
+  }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template5.content.cloneNode(true));
+    _optionalChain([shadow, 'access', _61 => _61.querySelector, 'call', _62 => _62("#logo"), 'optionalAccess', _63 => _63.addEventListener, 'call', _64 => _64("click", () => {
+      this.dispatchEvent(new CustomEvent("home-click"));
+    })]);
+  }
+  connectedCallback() {
+    this.applyStyles();
+    this.renderTabs();
+  }
+  attributeChangedCallback() {
+    this.applyStyles();
+    this.renderTabs();
+  }
+  applyStyles() {
+    this.style.setProperty("--bg", this.getAttribute("bg-color") || "#fff");
+    this.style.setProperty("--txt", this.getAttribute("txt-color") || "#000");
+    this.style.setProperty("--height", this.getAttribute("height") || "60px");
+    this.style.setProperty("--padding", this.getAttribute("padding") || "0 1rem");
+    this.style.setProperty("--border", this.getAttribute("border") || "1px solid #ddd");
+  }
+  renderTabs() {
+    const container = _optionalChain([this, 'access', _65 => _65.shadowRoot, 'optionalAccess', _66 => _66.querySelector, 'call', _67 => _67(".middle-tab-group")]);
+    if (!container) return;
+    container.innerHTML = "";
+    const itemsAttr = this.getAttribute("items");
+    const items = itemsAttr ? JSON.parse(itemsAttr) : [];
+    items.forEach((item) => {
+      const tab = document.createElement("div");
+      tab.className = "tab";
+      tab.textContent = item.title;
+      if (item.path) {
+        tab.addEventListener("click", () => {
+          alert(`You clicked: ${item.title}`);
+        });
+      }
+      container.appendChild(tab);
+    });
+  }
+};
+if (!customElements.get("wavelength-nav-bar")) {
+  customElements.define("wavelength-nav-bar", WavelengthNavBar);
+}
+
+
 
 
 
@@ -2352,5 +2536,5 @@ if (!customElements.get("wavelength-multi-select-autocomplete")) {
 
 
 
-exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthTitleBar = WavelengthTitleBar;
+exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthTitleBar = WavelengthTitleBar;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/index.d.cts

@@ -1359,4 +1359,13 @@ declare const WavelengthMultiSelectAutocomplete_base: {
 declare class WavelengthMultiSelectAutocomplete extends WavelengthMultiSelectAutocomplete_base {
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthDatePicker, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthProgressBar, WavelengthTitleBar };
+declare class WavelengthNavBar extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private applyStyles;
+    private renderTabs;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthDatePicker, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthProgressBar, WavelengthTitleBar };

package/dist/esm/index.d.ts

@@ -1359,4 +1359,13 @@ declare const WavelengthMultiSelectAutocomplete_base: {
 declare class WavelengthMultiSelectAutocomplete extends WavelengthMultiSelectAutocomplete_base {
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthDatePicker, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthProgressBar, WavelengthTitleBar };
+declare class WavelengthNavBar extends HTMLElement {
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private applyStyles;
+    private renderTabs;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthDatePicker, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthProgressBar, WavelengthTitleBar };

package/dist/esm/index.js

@@ -2340,6 +2340,189 @@ var WavelengthMultiSelectAutocomplete = class extends StylingMixin(BaseWavelengt
 if (!customElements.get("wavelength-multi-select-autocomplete")) {
   customElements.define("wavelength-multi-select-autocomplete", WavelengthMultiSelectAutocomplete);
 }
+
+// src/web-components/wavelength-nav-bar.ts
+var template5 = document.createElement("template");
+template5.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      font-family: sans-serif;
+    }
+
+    
+    nav {
+      display: flex;
+      width: 100%;
+      height: var(--height, 25px);
+      padding: var(--padding, 1rem);
+      border-bottom: var(--border, 1px solid #ddd);
+      position: fixed;
+      top: -25;
+      z-index: 1000;
+      background: var(--bg, #ffffffff);
+      color: var(--txt, #000);
+      gap:1rem;
+      white-space: nowrap;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .flex-spacer {
+      flex: 8;
+    }
+
+    .home {
+      flex: 1;
+      justify-content: flex-start;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    #logo svg {
+      width: 28px;
+      height: 28px;
+      flex-shrink: 0;
+      cursor: pointer;
+    }
+
+    .tab {
+      padding: 0.35rem 0.75rem;
+      border: 1px solid #ffffffff;
+      border-radius: 4px;
+      text-align: center;
+      cursor: pointer;
+      background: #fff;
+    }
+
+    .tab:hover {
+      background: #f0f0f0; /* optional hover effect */
+    }
+
+
+    .settings {
+      flex: 1;
+      justify-content: flex-end;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;       
+      }
+
+    .profile {
+      padding: 0.5rem 0.75rem;
+      border: 2px solid #ccc;
+      border-radius: 6px;
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .profile-name {
+      font-weight: 600;
+    }
+
+    .profile-note {
+      font-size: 0.8rem;
+      opacity: 0.75;
+    }
+
+    .middle-tab-group {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      flex: 3;
+    }
+  </style>
+  <nav>
+    <div class="section home" id="logo">
+      <!-- Inline SVG to ensure universal compatibility -->
+      <svg id="a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="280" height="280" viewBox="0 0 280 280">
+        <defs>
+          <style>
+            .b {
+              fill: #231f20;
+            }
+            .c {
+              fill: #fff;
+            }
+          </style>
+        </defs>
+        <path class="b" d="M82.5,272.3c-8,.5-13.5-2-17.5-5.5s-34-47.5-36-50.5-2-2.5-2-7.5-1.5-122-1.5-122c1.5-5.5,7-17.5,18-16l72-3.5c1-3.5,4-4.5,4-4.5l-44.5-40.5c-5.5-5.5,1.5-11.5,6.5-7l46,41c4-1.5,10.5-2,15.5-1l38.5-44.5c5.5-5.5,12,0,8,5.5l-36,42.5c1.5,1,4,4.5,4.5,6l28-2c5.5,0,47.5,14,57,17s12,9,12,17-1.5,140-1.5,140c-2.7,12.3-10.5,19-27.5,20.5l-143.5,15Z"/>
+        <path class="c" d="M240,113.3c.3-11.6-9.4-21-21-20.4l-122.5,6.4c-10.6.6-19,9.3-19,20v100.8c0,11.9,10.3,21.1,22.1,19.9l120.4-12.8c10-1.1,17.7-9.4,17.9-19.4l2.1-94.4Z"/>
+        <ellipse class="c" cx="228.4" cy="241.6" rx="7" ry="6.5" transform="translate(-89 340.5) rotate(-63.9)"/>
+        <path d="M132,217.5c-9.5,0-16.3-3.5-21-9.9-6-8.3-7.5-23.5-7.5-39.6s1-29.2,9.5-38.6c6-6.6,10-9.9,22-9.9s16.5,2.8,21,9.4c6.5,9.6,7.5,23.1,7.5,39.2s-.4,20.3-3.1,27.7c-2.7,7.3-6.3,12.8-11,16.4-4.7,3.6-11.3,5.4-17.4,5.4ZM132.5,200.4c5.2,0,7.8-2.9,10-8.8,1.5-6.6,2-11.9,2-23.7s0-17.6-1.5-24.2c-2.3-5.8-4.8-8.8-9.8-8.8-5.2,1.1-6.4,3.6-8.7,9.4-1.5,10.5-1.5,12.7-1.5,23.7s0,19.3,1.5,25.3c2.5,5,2.7,7.2,8,7.2Z"/>
+        <path d="M172.7,209.3c-1.1-1.1-.5-12.3-.5-12.3,0,0,0-.6,1.1-1.1,5.9,0,10.1-1.6,10.7-2.8,1.1-1.1,1.6-1.3,1.6-3.9l.5-44.1c0-6.1-7-2.8-12.9-3.3-.5,0-1.1-.6-1.1-1.1v-12.8c3.7-.7,8-1.9,11.1-3.9,3.1-2,4.3-5.7,6.4-8.4l16.8-1.1-.5,73.1s.5,3.3,2.1,3.9c1.1.4,7.5.6,9.1.6s1.6,1.1,1.6,1.1c0,1.7.5,11.7,0,12.3,0,.6-45,5-46.1,3.9Z"/>
+      </svg>
+      <slot name="home"></slot>
+    </div>
+  <div class="flex-spacer"></div> 
+<div class = "middle-tab-group">
+   <div class="tab"><a href="/applications"><slot name="tab">Applications</slot></a></div>
+  <div class="tab"><a href="/users"><slot name="tab">Users</slot></a></div>
+  <div class="tab"><a href="/apikeys"><slot name="tab">API Keys</slot></a></div>
+   </div>
+   <div class="flex-spacer"></div> 
+    <div class="section settings">
+        <div class="profile">
+          <span class="profile-name">User</span>
+          <span class="profile-note">Notifications</span>
+        </div>
+    </div>
+    </nav>
+`;
+var WavelengthNavBar = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["bg-color", "txt-color", "height", "padding", "border", "items"];
+  }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template5.content.cloneNode(true));
+    shadow.querySelector("#logo")?.addEventListener("click", () => {
+      this.dispatchEvent(new CustomEvent("home-click"));
+    });
+  }
+  connectedCallback() {
+    this.applyStyles();
+    this.renderTabs();
+  }
+  attributeChangedCallback() {
+    this.applyStyles();
+    this.renderTabs();
+  }
+  applyStyles() {
+    this.style.setProperty("--bg", this.getAttribute("bg-color") || "#fff");
+    this.style.setProperty("--txt", this.getAttribute("txt-color") || "#000");
+    this.style.setProperty("--height", this.getAttribute("height") || "60px");
+    this.style.setProperty("--padding", this.getAttribute("padding") || "0 1rem");
+    this.style.setProperty("--border", this.getAttribute("border") || "1px solid #ddd");
+  }
+  renderTabs() {
+    const container = this.shadowRoot?.querySelector(".middle-tab-group");
+    if (!container) return;
+    container.innerHTML = "";
+    const itemsAttr = this.getAttribute("items");
+    const items = itemsAttr ? JSON.parse(itemsAttr) : [];
+    items.forEach((item) => {
+      const tab = document.createElement("div");
+      tab.className = "tab";
+      tab.textContent = item.title;
+      if (item.path) {
+        tab.addEventListener("click", () => {
+          alert(`You clicked: ${item.title}`);
+        });
+      }
+      container.appendChild(tab);
+    });
+  }
+};
+if (!customElements.get("wavelength-nav-bar")) {
+  customElements.define("wavelength-nav-bar", WavelengthNavBar);
+}
 export {
   BaseWavelengthInput,
   BaseWavelengthMultiSelectAutocomplete,
@@ -2350,6 +2533,7 @@ export {
   WavelengthForm,
   WavelengthInput,
   WavelengthMultiSelectAutocomplete,
+  WavelengthNavBar,
   WavelengthProgressBar,
   WavelengthTitleBar
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/web-components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Common component library used by Wavelength developers (NATIVE WEB COMPONENTS)",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",