@wavelengthusaf/web-components 1.3.0 → 1.4.0

package/dist/cjs/index.cjs

@@ -4066,9 +4066,273 @@ if (!customElements.get("wavelength-date-picker")) {
   customElements.define("wavelength-date-picker", WavelengthDatePicker);
 }
 
-// src/web-components/wavelength-multi-select-autocomplete.ts
+// src/web-components/wavelength-notification-panel.ts
 var template4 = document.createElement("template");
 template4.innerHTML = `
+  <style>
+	:host {
+  	display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    height: 100%;
+	}
+    :host([open]) .dropdown-panel {
+  display: flex;
+}
+
+	.pill {
+  	display: inline-flex;
+  	position: relative;
+  	overflow: hidden;
+  	border: 1px solid #d3d3d3;
+  	border-radius: 0.25rem;
+    background-color: #ffffff;
+    color: black;
+  	cursor: pointer;
+  	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  	font-weight: 500;
+  	font-size: 0.875rem;
+  	letter-spacing: 0.02857rem;
+  	white-space: normal;
+  	word-break: break-word;
+  	text-align: left;
+  	height: auto;
+    width: 125px;
+    line-height: 0.5;
+    height: 80%;
+  border-radius: 6px;
+	}
+
+    .main {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    }
+
+    .dot {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      height: 5px;
+      width: 5px;
+      background-color: #8f0000;
+      border-radius: 50%;
+      z-index: 2;
+    }
+
+    p.notification {
+    color: #d3d3d3;
+    }
+
+    .dropdown-panel {
+    box-sizing: border-box;
+    flex-direction: column;
+    align-items: center;
+  	overflow: hidden;
+  	border: 1px solid #d3d3d3;
+  	border-radius: 0.5rem;
+    background-color: #ffffff;
+    color: black;
+  	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  	font-weight: 500;
+  	font-size: 0.875rem;
+  	letter-spacing: 0.02857rem;
+  	word-break: break-word;
+  	text-align: left;
+  	height: 220px;
+    width: 325px;
+    line-height: 0.5;
+    margin-top: 8px;
+    display: none;
+    position: absolute;
+    top: 100%;       /* opens BELOW navbar */
+    right: 0;
+    z-index: 2000;
+    }
+
+    .dropdown-panel.invisible {
+    display: none;
+    }
+
+    .dropdown-content {
+    display: flex;
+    flex-direction: column;
+  	position: relative;
+  	overflow: hidden;
+  	border: 1px solid #d3d3d3;
+  	border-radius: 0.25rem;
+    background-color: #ffffff;
+    color: black;
+  	white-space: normal;
+  	word-break: break-word;
+  	text-align: center;
+  	height: 85px;
+    width: 300px;
+    line-height: 0.5;
+    margin-top: 3px;
+    }
+
+    .dropdown-header {
+    padding: 8px;
+    width: 100%;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    font-size: 15px;
+    flew-wrap: nowrap;
+    border: 1px solid pink;
+    }
+
+    .mark-as-read {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    font-size: 10px;
+    background-color: #ffffff;
+    border: none;
+    height: 10px;
+    float: right;
+    text-decoration: underline;
+    cursor: pointer;
+    }
+
+    .dropdown-footer {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+    }
+
+    .footer-button-settings {
+    margin-top: 8px;
+    border: 1px;
+    width: 100%;
+    height 85px;
+    background-color: #ffffff;
+    display: flex;
+    cursor: pointer;
+    color: #7d7c7cff;
+    font-size: 13px;
+    }
+
+    .footer-button-sign-out {
+    margin-top: 8px;
+    border: 1px;
+    width: 100%;
+    height 85px;
+    background-color: #ffffff;
+    display: flex;
+    cursor: pointer;
+    color: #7d7c7cff;
+    font-size: 13px;
+    }
+
+  .footer-button-settings:hover {
+    background-color: #e0e0e0; /* Light gray on hover */
+  }
+  
+  .footer-button-sign-out:hover {
+    background-color: #e0e0e0; /* Light gray on hover */
+  }
+  
+  </style>
+  <div class="main">
+    <button class="pill">
+      <div>
+        <p>Your Name</p>
+        <p class="notification">No Notifications</p>
+      </div>
+    </button>
+    <span class="dot"></span>
+    <div class=dropdown-panel>
+      <div class="dropdown-header">
+        <p>Notifications</p>
+        <button class=mark-as-read> Mark As Read </button>
+      </div> 
+      <div class="dropdown-content">
+        <p>no notifications</p>
+      </div>
+      <div class=dropdown-footer>
+        <button class=footer-button-settings>Account Settings</button>
+        <button class=footer-button-sign-out>Sign Out</button>
+      </div>
+    </div>
+  </div>
+`;
+var WavelengthNotificationPanel = class extends HTMLElement {
+  // List of attributes to observe for changes
+  static get observedAttributes() {
+    return ["notification", "darkMode"];
+  }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template4.content.cloneNode(true));
+    this.panelButton = shadow.querySelector(".pill");
+    this.panel = shadow.querySelector(".dropdown-panel");
+    this.signOutButton = shadow.querySelector(".footer-button-sign-out");
+    this.accountButton = shadow.querySelector(".footer-button-settings");
+    this.markAsRead = shadow.querySelector(".mark-as-read");
+    this.panelButton.addEventListener("click", (event) => {
+      if (this.panelButton.disabled || this.hasAttribute("disabled")) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        return;
+      }
+      if (this.hasAttribute("open")) {
+        this.removeAttribute("open");
+      } else {
+        this.setAttribute("open", "");
+      }
+      this.updatePanelVisibility();
+    });
+    this.signOutButton.addEventListener("click", () => {
+      if (typeof this.onSignOut === "function") {
+        this.onSignOut();
+      } else {
+        alert("Insert function to Complete sign out functionality");
+      }
+    });
+    this.accountButton.addEventListener("click", () => {
+      if (typeof this.accountLink === "string") {
+        window.location.href = this.accountLink;
+      } else {
+        alert("Missing the link for an account");
+      }
+    });
+    this.markAsRead.addEventListener("click", () => {
+      if (typeof this.onMarkAsRead === "function") {
+        this.onMarkAsRead();
+      } else {
+        alert("Insert function to clear notifications");
+      }
+    });
+  }
+  // Called when component is inserted into the DOM
+  connectedCallback() {
+    this.updatePanelVisibility();
+  }
+  // Called when observed attributes change
+  attributeChangedCallback() {
+    this.updateComponent();
+  }
+  // Main update logic; Your component's functionality will go here and/or in other methods that you have below
+  updateComponent() {
+    const prop = this.getAttribute("test-prop") || "";
+  }
+  updatePanelVisibility() {
+    if (!this.panel) return;
+    const isOpen = this.hasAttribute("open");
+    this.panel.style.display = isOpen ? "inline-flex" : "none";
+  }
+};
+if (!customElements.get("wavelength-notification-panel")) {
+  customElements.define("wavelength-notification-panel", WavelengthNotificationPanel);
+}
+
+// src/web-components/wavelength-multi-select-autocomplete.ts
+var template5 = document.createElement("template");
+template5.innerHTML = `
   <style>
     .multi-select-container {
       background-color: white;
@@ -4310,7 +4574,7 @@ var BaseWavelengthMultiSelectAutocomplete = class extends HTMLElement {
     this._internals = this.attachInternals();
     this._internals.role = "combobox";
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template4.content.cloneNode(true));
+    shadow.appendChild(template5.content.cloneNode(true));
     this._container = this.shadowRoot.querySelector(".multi-select-container");
     this._inputWrapper = this.shadowRoot.querySelector(".multi-select-input-wrapper");
     this._input = this.shadowRoot.querySelector(".multi-select-input");
@@ -4527,18 +4791,19 @@ if (!customElements.get("wavelength-multi-select-autocomplete")) {
 }
 
 // src/web-components/wavelength-nav-bar.ts
-var template5 = document.createElement("template");
-template5.innerHTML = `
+var template6 = document.createElement("template");
+template6.innerHTML = `
   <style>
     :host {
       display: block;
       font-family: sans-serif;
+      height: 100%;
     }
 
     
     nav {
       display: flex;
-      width: 100%;
+      width: 95%;
       height: var(--height, 25px);
       padding: var(--padding, 1rem);
       border-bottom: var(--border, 1px solid #ddd);
@@ -4553,9 +4818,10 @@ template5.innerHTML = `
       justify-content: space-between;
     }
 
-    .flex-spacer {
-      flex: 8;
-    }
+    .nav-center {
+  display: flex;
+  justify-content: center;  
+}
 
     .home {
       flex: 1;
@@ -4588,22 +4854,25 @@ template5.innerHTML = `
 
 
     .settings {
-      flex: 1;
-      justify-content: flex-end;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;       
-      }
+    flex: 1;
+    justify-content: flex-end;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;       
+    }
 
     .profile {
-      padding: 0.5rem 0.75rem;
+      padding: var(--padding, 1rem);
       border: 2px solid #ccc;
       border-radius: 6px;
       cursor: pointer;
       display: flex;
       flex-direction: column;
       text-align: center;
+      width: 100%;
+      height: var(--height, 25px);
+      position: fixed;
     }
 
     .profile-name {
@@ -4621,6 +4890,14 @@ template5.innerHTML = `
       gap: 0.5rem;
       flex: 3;
     }
+      .notification-wrapper {
+      position: relative;
+      height: 100%;
+      display: flex;
+      
+}
+
+
   </style>
   <nav>
     <div class="section home" id="logo">
@@ -4644,18 +4921,14 @@ template5.innerHTML = `
       </svg>
       <slot name="home"></slot>
     </div>
-  <div class="flex-spacer"></div> 
+  <div class="nav-center"></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 class="notification-wrapper">
+         <wavelength-notification-panel ></wavelength-notification-panel>
     </div>
     </nav>
 `;
@@ -4666,7 +4939,7 @@ var WavelengthNavBar = class extends HTMLElement {
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template5.content.cloneNode(true));
+    shadow.appendChild(template6.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"));
     })]);
@@ -4680,7 +4953,7 @@ var WavelengthNavBar = class extends HTMLElement {
     this.renderTabs();
   }
   applyStyles() {
-    this.style.setProperty("--bg", this.getAttribute("bg-color") || "#fff");
+    this.style.setProperty("--bg", this.getAttribute("bg-color") || "#ffffffff");
     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");
@@ -4711,8 +4984,8 @@ if (!customElements.get("wavelength-nav-bar")) {
 
 // src/web-components/wavelength-child-data-table.ts
 var import_react = __toESM(require_react(), 1);
-var template6 = document.createElement("template");
-template6.innerHTML = `
+var template7 = document.createElement("template");
+template7.innerHTML = `
 
   <style>
   
@@ -4863,7 +5136,7 @@ var ChildDataTable = class extends HTMLElement {
   <path d="M13.2375 0L7.5 5.725L1.7625 0L0 1.7625L7.5 9.2625L15 1.7625L13.2375 0Z" fill="currentColor"/>
 </svg>`;
     this.shadow = this.attachShadow({ mode: "open" });
-    this.shadow.append(template6.content.cloneNode(true));
+    this.shadow.append(template7.content.cloneNode(true));
   }
   static get observedAttributes() {
     return ["table-columns", "table-data", "dropdown-arrow-location", "sort-icon", "dropdown-button-icon"];
@@ -5163,6 +5436,212 @@ if (!customElements.get("wavelength-child-data-table")) {
   customElements.define("wavelength-child-data-table", ChildDataTable);
 }
 
+// src/web-components/wavelength-file-drop-zone.ts
+var fileDropZoneTemplate = document.createElement("template");
+fileDropZoneTemplate.innerHTML = `
+  <style>
+    :host {
+      display: var(--hostDisplay, block);
+      width: var(--hostWidth, 100%);
+    }
+
+    .file-input {
+      display: var(--inputDisplay, none);
+    }
+
+    .file-drop-zone {
+      border: var(--borderWidth, 1px) var(--borderStyle, dashed) var(--borderColor, #596381);
+      border-radius: var(--borderRadius, 8px);
+      padding: var(--padding, 20px);
+      text-align: var(--textAlign, center);  
+      background-color: var(--backgroundColor, #242834);
+      cursor: var(--cursor, pointer);
+      transition: var(--transition, border-color 0.3s, background-color 0.3s);
+      display: var(--display, flex);
+      flex-direction: var(--flexDirection, column);
+      align-items: var(--alignItems, center);
+      gap: var(--gap, 10px);
+    }
+
+    .file-drop-zone:hover {
+      border-color: var(--borderHoverColor, #26BABE);
+      background-color: var(--backgroundHoverColor, #242834);
+    }
+
+    .file-drop-zone.dragover {
+      border-color: var(--borderActiveColor, #26BABE);
+      background-color: var(--backgroundActiveColor, #3E455A);
+    }
+
+    .drop-zone-content {
+      display: var(--contentDisplay, flex);
+      flex-direction: var(--contentFlexDirection, column);
+      align-items: var(--contentAlignItems, center);
+      gap: var(--contentGap, 10px);
+      color: var(--textColor, #FFFFFFCC);
+    }
+
+    .drop-zone-content span {
+      font-family: var(--fontFamily, Montserrat);
+      font-style: var(--fontStyle, normal);
+      font-size: var(--fontSize, 12px);
+      line-height: var(--lineHeight, 100%);
+      letter-spacing: var(--letterSpacing, 0%);
+    }
+
+    .drop-zone-icon {
+      width: var(--iconSize, 24px);
+      height: var(--iconSize, 24px);
+    }
+
+    .error-message {
+      color: var(--errorColor, #ff4444);
+      font-family: var(--errorFontFamily, Montserrat);
+      font-size: var(--errorFontSize, 12px);
+      margin-top: var(--errorMarginTop, 10px);
+    }
+  </style>
+  <div class="file-drop-zone">
+    <input type="file" class="file-input">
+    <div class="drop-zone-content">
+      <img class="drop-zone-icon" alt="Drag icon">
+      <span class="drag-text"></span>
+    </div>
+    <div class="error-message"></div>
+  </div>
+`;
+var WavelengthFileDropZone = class extends HTMLElement {
+  constructor() {
+    super();
+    this.dropZone = null;
+    this.fileInput = null;
+    this.dragText = null;
+    this.icon = null;
+    this.errorMessage = null;
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(fileDropZoneTemplate.content.cloneNode(true));
+    this.initializeElements();
+    this.setupEventListeners();
+  }
+  static get observedAttributes() {
+    return ["accepted-types", "max-size", "multiple", "drag-text", "icon-src"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+      case "drag-text":
+        if (this.dragText) this.dragText.textContent = newValue;
+        break;
+      case "icon-src":
+        if (this.icon) this.icon.src = newValue || "";
+        break;
+      case "accepted-types":
+        if (this.fileInput) this.fileInput.accept = newValue || "";
+        break;
+      case "multiple":
+        if (this.fileInput) this.fileInput.multiple = newValue !== null;
+        break;
+    }
+  }
+  initializeElements() {
+    if (!this.shadowRoot) return;
+    this.dropZone = this.shadowRoot.querySelector(".file-drop-zone");
+    this.fileInput = this.shadowRoot.querySelector(".file-input");
+    this.dragText = this.shadowRoot.querySelector(".drag-text");
+    this.icon = this.shadowRoot.querySelector(".drop-zone-icon");
+    this.errorMessage = this.shadowRoot.querySelector(".error-message");
+  }
+  connectedCallback() {
+    this.updateFromAttributes();
+  }
+  updateFromAttributes() {
+    if (this.dragText) {
+      this.dragText.textContent = this.getAttribute("drag-text") || "Drag & drop or click to choose files";
+    }
+    if (this.icon) {
+      this.icon.src = this.getAttribute("icon-src") || "";
+    }
+    if (this.fileInput) {
+      this.fileInput.accept = this.getAttribute("accepted-types") || "";
+      this.fileInput.multiple = this.hasAttribute("multiple");
+    }
+  }
+  setupEventListeners() {
+    if (!this.dropZone || !this.fileInput) return;
+    this.dropZone.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      _optionalChain([this, 'access', _68 => _68.dropZone, 'optionalAccess', _69 => _69.classList, 'access', _70 => _70.add, 'call', _71 => _71("dragover")]);
+    });
+    this.dropZone.addEventListener("dragleave", (e) => {
+      e.preventDefault();
+      _optionalChain([this, 'access', _72 => _72.dropZone, 'optionalAccess', _73 => _73.classList, 'access', _74 => _74.remove, 'call', _75 => _75("dragover")]);
+    });
+    this.dropZone.addEventListener("drop", (e) => {
+      e.preventDefault();
+      _optionalChain([this, 'access', _76 => _76.dropZone, 'optionalAccess', _77 => _77.classList, 'access', _78 => _78.remove, 'call', _79 => _79("dragover")]);
+      const files = _optionalChain([e, 'access', _80 => _80.dataTransfer, 'optionalAccess', _81 => _81.files]);
+      if (_optionalChain([files, 'optionalAccess', _82 => _82.length])) {
+        this.validateAndProcessFiles(files);
+      }
+    });
+    this.dropZone.addEventListener("click", () => {
+      _optionalChain([this, 'access', _83 => _83.fileInput, 'optionalAccess', _84 => _84.click, 'call', _85 => _85()]);
+    });
+    this.fileInput.addEventListener("change", (event) => {
+      const input = event.target;
+      if (_optionalChain([input, 'access', _86 => _86.files, 'optionalAccess', _87 => _87.length])) {
+        this.validateAndProcessFiles(input.files);
+      }
+    });
+  }
+  validateAndProcessFiles(files) {
+    const fileList = Array.from(files);
+    let errorMessage = "";
+    const acceptedTypes = _optionalChain([this, 'access', _88 => _88.getAttribute, 'call', _89 => _89("accepted-types"), 'optionalAccess', _90 => _90.split, 'call', _91 => _91(",")]) || [];
+    if (acceptedTypes.length) {
+      const invalidFiles = fileList.filter((file) => !acceptedTypes.some((type) => file.name.toLowerCase().endsWith(type.toLowerCase().replace("*", ""))));
+      if (invalidFiles.length) {
+        errorMessage = `Invalid file type. Accepted types: ${acceptedTypes.join(", ")}`;
+      }
+    }
+    const maxSize = Number(this.getAttribute("max-size"));
+    if (maxSize && fileList.some((file) => file.size > maxSize)) {
+      errorMessage = `File size exceeds the maximum limit of ${this.formatFileSize(maxSize)}`;
+    }
+    if (errorMessage) {
+      if (this.errorMessage) {
+        this.errorMessage.textContent = errorMessage;
+      }
+      return;
+    }
+    if (this.errorMessage) {
+      this.errorMessage.textContent = "";
+    }
+    this.dispatchEvent(
+      new CustomEvent("files-selected", {
+        detail: {
+          files: this.hasAttribute("multiple") ? fileList : fileList[0]
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  formatFileSize(bytes) {
+    const units = ["B", "KB", "MB", "GB"];
+    let size = bytes;
+    let unitIndex = 0;
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+    return `${size.toFixed(2)} ${units[unitIndex]}`;
+  }
+};
+customElements.define("wavelength-file-drop-zone", WavelengthFileDropZone);
+
+
+
 
 
 
@@ -5176,7 +5655,7 @@ if (!customElements.get("wavelength-child-data-table")) {
 
 
 
-exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; 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;
+exports.BaseWavelengthInput = BaseWavelengthInput; exports.BaseWavelengthMultiSelectAutocomplete = BaseWavelengthMultiSelectAutocomplete; exports.ChildDataTable = ChildDataTable; exports.SampleComponent = SampleComponent; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthButton = WavelengthButton; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthForm = WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthTitleBar = WavelengthTitleBar;
 /*! Bundled license information:
 
 react/cjs/react.production.min.js:

package/dist/cjs/index.d.cts

@@ -941,6 +941,23 @@ declare class WavelengthDatePicker extends HTMLElement {
     updateInput(): void;
 }
 
+declare class WavelengthNotificationPanel extends HTMLElement {
+    static get observedAttributes(): string[];
+    private panelButton;
+    private panel;
+    private signOutButton;
+    private accountButton;
+    private markAsRead;
+    onMarkAsRead?: () => void;
+    onSignOut?: () => void;
+    accountLink?: string;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    updateComponent(): void;
+    updatePanelVisibility(): void;
+}
+
 interface Option {
     label: string;
     value: string;
@@ -1408,4 +1425,21 @@ declare class ChildDataTable extends HTMLElement {
     set setDropdownButtonIcon(icon: typeof this._sortIcon);
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthDatePicker, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthProgressBar, WavelengthTitleBar };
+declare class WavelengthFileDropZone extends HTMLElement {
+    private dropZone;
+    private fileInput;
+    private dragText;
+    private icon;
+    private errorMessage;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    constructor();
+    private initializeElements;
+    connectedCallback(): void;
+    private updateFromAttributes;
+    private setupEventListeners;
+    private validateAndProcessFiles;
+    private formatFileSize;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthDatePicker, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthProgressBar, WavelengthTitleBar };

package/dist/esm/index.d.ts

@@ -941,6 +941,23 @@ declare class WavelengthDatePicker extends HTMLElement {
     updateInput(): void;
 }
 
+declare class WavelengthNotificationPanel extends HTMLElement {
+    static get observedAttributes(): string[];
+    private panelButton;
+    private panel;
+    private signOutButton;
+    private accountButton;
+    private markAsRead;
+    onMarkAsRead?: () => void;
+    onSignOut?: () => void;
+    accountLink?: string;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    updateComponent(): void;
+    updatePanelVisibility(): void;
+}
+
 interface Option {
     label: string;
     value: string;
@@ -1408,4 +1425,21 @@ declare class ChildDataTable extends HTMLElement {
     set setDropdownButtonIcon(icon: typeof this._sortIcon);
 }
 
-export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthDatePicker, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthProgressBar, WavelengthTitleBar };
+declare class WavelengthFileDropZone extends HTMLElement {
+    private dropZone;
+    private fileInput;
+    private dragText;
+    private icon;
+    private errorMessage;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    constructor();
+    private initializeElements;
+    connectedCallback(): void;
+    private updateFromAttributes;
+    private setupEventListeners;
+    private validateAndProcessFiles;
+    private formatFileSize;
+}
+
+export { BaseWavelengthInput, BaseWavelengthMultiSelectAutocomplete, ChildDataTable, SampleComponent, WavelengthBanner, WavelengthButton, WavelengthDatePicker, WavelengthFileDropZone, WavelengthForm, WavelengthInput, WavelengthMultiSelectAutocomplete, WavelengthNavBar, WavelengthNotificationPanel, WavelengthProgressBar, WavelengthTitleBar };

package/dist/esm/index.js

@@ -4066,9 +4066,273 @@ if (!customElements.get("wavelength-date-picker")) {
   customElements.define("wavelength-date-picker", WavelengthDatePicker);
 }
 
-// src/web-components/wavelength-multi-select-autocomplete.ts
+// src/web-components/wavelength-notification-panel.ts
 var template4 = document.createElement("template");
 template4.innerHTML = `
+  <style>
+	:host {
+  	display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    height: 100%;
+	}
+    :host([open]) .dropdown-panel {
+  display: flex;
+}
+
+	.pill {
+  	display: inline-flex;
+  	position: relative;
+  	overflow: hidden;
+  	border: 1px solid #d3d3d3;
+  	border-radius: 0.25rem;
+    background-color: #ffffff;
+    color: black;
+  	cursor: pointer;
+  	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  	font-weight: 500;
+  	font-size: 0.875rem;
+  	letter-spacing: 0.02857rem;
+  	white-space: normal;
+  	word-break: break-word;
+  	text-align: left;
+  	height: auto;
+    width: 125px;
+    line-height: 0.5;
+    height: 80%;
+  border-radius: 6px;
+	}
+
+    .main {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    }
+
+    .dot {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      height: 5px;
+      width: 5px;
+      background-color: #8f0000;
+      border-radius: 50%;
+      z-index: 2;
+    }
+
+    p.notification {
+    color: #d3d3d3;
+    }
+
+    .dropdown-panel {
+    box-sizing: border-box;
+    flex-direction: column;
+    align-items: center;
+  	overflow: hidden;
+  	border: 1px solid #d3d3d3;
+  	border-radius: 0.5rem;
+    background-color: #ffffff;
+    color: black;
+  	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  	font-weight: 500;
+  	font-size: 0.875rem;
+  	letter-spacing: 0.02857rem;
+  	word-break: break-word;
+  	text-align: left;
+  	height: 220px;
+    width: 325px;
+    line-height: 0.5;
+    margin-top: 8px;
+    display: none;
+    position: absolute;
+    top: 100%;       /* opens BELOW navbar */
+    right: 0;
+    z-index: 2000;
+    }
+
+    .dropdown-panel.invisible {
+    display: none;
+    }
+
+    .dropdown-content {
+    display: flex;
+    flex-direction: column;
+  	position: relative;
+  	overflow: hidden;
+  	border: 1px solid #d3d3d3;
+  	border-radius: 0.25rem;
+    background-color: #ffffff;
+    color: black;
+  	white-space: normal;
+  	word-break: break-word;
+  	text-align: center;
+  	height: 85px;
+    width: 300px;
+    line-height: 0.5;
+    margin-top: 3px;
+    }
+
+    .dropdown-header {
+    padding: 8px;
+    width: 100%;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    font-size: 15px;
+    flew-wrap: nowrap;
+    border: 1px solid pink;
+    }
+
+    .mark-as-read {
+    box-sizing: border-box;
+    flex-shrink: 0;
+    font-size: 10px;
+    background-color: #ffffff;
+    border: none;
+    height: 10px;
+    float: right;
+    text-decoration: underline;
+    cursor: pointer;
+    }
+
+    .dropdown-footer {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 100%;
+    padding: 8px;
+    box-sizing: border-box;
+    }
+
+    .footer-button-settings {
+    margin-top: 8px;
+    border: 1px;
+    width: 100%;
+    height 85px;
+    background-color: #ffffff;
+    display: flex;
+    cursor: pointer;
+    color: #7d7c7cff;
+    font-size: 13px;
+    }
+
+    .footer-button-sign-out {
+    margin-top: 8px;
+    border: 1px;
+    width: 100%;
+    height 85px;
+    background-color: #ffffff;
+    display: flex;
+    cursor: pointer;
+    color: #7d7c7cff;
+    font-size: 13px;
+    }
+
+  .footer-button-settings:hover {
+    background-color: #e0e0e0; /* Light gray on hover */
+  }
+  
+  .footer-button-sign-out:hover {
+    background-color: #e0e0e0; /* Light gray on hover */
+  }
+  
+  </style>
+  <div class="main">
+    <button class="pill">
+      <div>
+        <p>Your Name</p>
+        <p class="notification">No Notifications</p>
+      </div>
+    </button>
+    <span class="dot"></span>
+    <div class=dropdown-panel>
+      <div class="dropdown-header">
+        <p>Notifications</p>
+        <button class=mark-as-read> Mark As Read </button>
+      </div> 
+      <div class="dropdown-content">
+        <p>no notifications</p>
+      </div>
+      <div class=dropdown-footer>
+        <button class=footer-button-settings>Account Settings</button>
+        <button class=footer-button-sign-out>Sign Out</button>
+      </div>
+    </div>
+  </div>
+`;
+var WavelengthNotificationPanel = class extends HTMLElement {
+  // List of attributes to observe for changes
+  static get observedAttributes() {
+    return ["notification", "darkMode"];
+  }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template4.content.cloneNode(true));
+    this.panelButton = shadow.querySelector(".pill");
+    this.panel = shadow.querySelector(".dropdown-panel");
+    this.signOutButton = shadow.querySelector(".footer-button-sign-out");
+    this.accountButton = shadow.querySelector(".footer-button-settings");
+    this.markAsRead = shadow.querySelector(".mark-as-read");
+    this.panelButton.addEventListener("click", (event) => {
+      if (this.panelButton.disabled || this.hasAttribute("disabled")) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        return;
+      }
+      if (this.hasAttribute("open")) {
+        this.removeAttribute("open");
+      } else {
+        this.setAttribute("open", "");
+      }
+      this.updatePanelVisibility();
+    });
+    this.signOutButton.addEventListener("click", () => {
+      if (typeof this.onSignOut === "function") {
+        this.onSignOut();
+      } else {
+        alert("Insert function to Complete sign out functionality");
+      }
+    });
+    this.accountButton.addEventListener("click", () => {
+      if (typeof this.accountLink === "string") {
+        window.location.href = this.accountLink;
+      } else {
+        alert("Missing the link for an account");
+      }
+    });
+    this.markAsRead.addEventListener("click", () => {
+      if (typeof this.onMarkAsRead === "function") {
+        this.onMarkAsRead();
+      } else {
+        alert("Insert function to clear notifications");
+      }
+    });
+  }
+  // Called when component is inserted into the DOM
+  connectedCallback() {
+    this.updatePanelVisibility();
+  }
+  // Called when observed attributes change
+  attributeChangedCallback() {
+    this.updateComponent();
+  }
+  // Main update logic; Your component's functionality will go here and/or in other methods that you have below
+  updateComponent() {
+    const prop = this.getAttribute("test-prop") || "";
+  }
+  updatePanelVisibility() {
+    if (!this.panel) return;
+    const isOpen = this.hasAttribute("open");
+    this.panel.style.display = isOpen ? "inline-flex" : "none";
+  }
+};
+if (!customElements.get("wavelength-notification-panel")) {
+  customElements.define("wavelength-notification-panel", WavelengthNotificationPanel);
+}
+
+// src/web-components/wavelength-multi-select-autocomplete.ts
+var template5 = document.createElement("template");
+template5.innerHTML = `
   <style>
     .multi-select-container {
       background-color: white;
@@ -4310,7 +4574,7 @@ var BaseWavelengthMultiSelectAutocomplete = class extends HTMLElement {
     this._internals = this.attachInternals();
     this._internals.role = "combobox";
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template4.content.cloneNode(true));
+    shadow.appendChild(template5.content.cloneNode(true));
     this._container = this.shadowRoot.querySelector(".multi-select-container");
     this._inputWrapper = this.shadowRoot.querySelector(".multi-select-input-wrapper");
     this._input = this.shadowRoot.querySelector(".multi-select-input");
@@ -4527,18 +4791,19 @@ if (!customElements.get("wavelength-multi-select-autocomplete")) {
 }
 
 // src/web-components/wavelength-nav-bar.ts
-var template5 = document.createElement("template");
-template5.innerHTML = `
+var template6 = document.createElement("template");
+template6.innerHTML = `
   <style>
     :host {
       display: block;
       font-family: sans-serif;
+      height: 100%;
     }
 
     
     nav {
       display: flex;
-      width: 100%;
+      width: 95%;
       height: var(--height, 25px);
       padding: var(--padding, 1rem);
       border-bottom: var(--border, 1px solid #ddd);
@@ -4553,9 +4818,10 @@ template5.innerHTML = `
       justify-content: space-between;
     }
 
-    .flex-spacer {
-      flex: 8;
-    }
+    .nav-center {
+  display: flex;
+  justify-content: center;  
+}
 
     .home {
       flex: 1;
@@ -4588,22 +4854,25 @@ template5.innerHTML = `
 
 
     .settings {
-      flex: 1;
-      justify-content: flex-end;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;       
-      }
+    flex: 1;
+    justify-content: flex-end;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;       
+    }
 
     .profile {
-      padding: 0.5rem 0.75rem;
+      padding: var(--padding, 1rem);
       border: 2px solid #ccc;
       border-radius: 6px;
       cursor: pointer;
       display: flex;
       flex-direction: column;
       text-align: center;
+      width: 100%;
+      height: var(--height, 25px);
+      position: fixed;
     }
 
     .profile-name {
@@ -4621,6 +4890,14 @@ template5.innerHTML = `
       gap: 0.5rem;
       flex: 3;
     }
+      .notification-wrapper {
+      position: relative;
+      height: 100%;
+      display: flex;
+      
+}
+
+
   </style>
   <nav>
     <div class="section home" id="logo">
@@ -4644,18 +4921,14 @@ template5.innerHTML = `
       </svg>
       <slot name="home"></slot>
     </div>
-  <div class="flex-spacer"></div> 
+  <div class="nav-center"></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 class="notification-wrapper">
+         <wavelength-notification-panel ></wavelength-notification-panel>
     </div>
     </nav>
 `;
@@ -4666,7 +4939,7 @@ var WavelengthNavBar = class extends HTMLElement {
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
-    shadow.appendChild(template5.content.cloneNode(true));
+    shadow.appendChild(template6.content.cloneNode(true));
     shadow.querySelector("#logo")?.addEventListener("click", () => {
       this.dispatchEvent(new CustomEvent("home-click"));
     });
@@ -4680,7 +4953,7 @@ var WavelengthNavBar = class extends HTMLElement {
     this.renderTabs();
   }
   applyStyles() {
-    this.style.setProperty("--bg", this.getAttribute("bg-color") || "#fff");
+    this.style.setProperty("--bg", this.getAttribute("bg-color") || "#ffffffff");
     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");
@@ -4711,8 +4984,8 @@ if (!customElements.get("wavelength-nav-bar")) {
 
 // src/web-components/wavelength-child-data-table.ts
 var import_react = __toESM(require_react(), 1);
-var template6 = document.createElement("template");
-template6.innerHTML = `
+var template7 = document.createElement("template");
+template7.innerHTML = `
 
   <style>
   
@@ -4863,7 +5136,7 @@ var ChildDataTable = class extends HTMLElement {
   <path d="M13.2375 0L7.5 5.725L1.7625 0L0 1.7625L7.5 9.2625L15 1.7625L13.2375 0Z" fill="currentColor"/>
 </svg>`;
     this.shadow = this.attachShadow({ mode: "open" });
-    this.shadow.append(template6.content.cloneNode(true));
+    this.shadow.append(template7.content.cloneNode(true));
   }
   static get observedAttributes() {
     return ["table-columns", "table-data", "dropdown-arrow-location", "sort-icon", "dropdown-button-icon"];
@@ -5162,6 +5435,210 @@ var ChildDataTable = class extends HTMLElement {
 if (!customElements.get("wavelength-child-data-table")) {
   customElements.define("wavelength-child-data-table", ChildDataTable);
 }
+
+// src/web-components/wavelength-file-drop-zone.ts
+var fileDropZoneTemplate = document.createElement("template");
+fileDropZoneTemplate.innerHTML = `
+  <style>
+    :host {
+      display: var(--hostDisplay, block);
+      width: var(--hostWidth, 100%);
+    }
+
+    .file-input {
+      display: var(--inputDisplay, none);
+    }
+
+    .file-drop-zone {
+      border: var(--borderWidth, 1px) var(--borderStyle, dashed) var(--borderColor, #596381);
+      border-radius: var(--borderRadius, 8px);
+      padding: var(--padding, 20px);
+      text-align: var(--textAlign, center);  
+      background-color: var(--backgroundColor, #242834);
+      cursor: var(--cursor, pointer);
+      transition: var(--transition, border-color 0.3s, background-color 0.3s);
+      display: var(--display, flex);
+      flex-direction: var(--flexDirection, column);
+      align-items: var(--alignItems, center);
+      gap: var(--gap, 10px);
+    }
+
+    .file-drop-zone:hover {
+      border-color: var(--borderHoverColor, #26BABE);
+      background-color: var(--backgroundHoverColor, #242834);
+    }
+
+    .file-drop-zone.dragover {
+      border-color: var(--borderActiveColor, #26BABE);
+      background-color: var(--backgroundActiveColor, #3E455A);
+    }
+
+    .drop-zone-content {
+      display: var(--contentDisplay, flex);
+      flex-direction: var(--contentFlexDirection, column);
+      align-items: var(--contentAlignItems, center);
+      gap: var(--contentGap, 10px);
+      color: var(--textColor, #FFFFFFCC);
+    }
+
+    .drop-zone-content span {
+      font-family: var(--fontFamily, Montserrat);
+      font-style: var(--fontStyle, normal);
+      font-size: var(--fontSize, 12px);
+      line-height: var(--lineHeight, 100%);
+      letter-spacing: var(--letterSpacing, 0%);
+    }
+
+    .drop-zone-icon {
+      width: var(--iconSize, 24px);
+      height: var(--iconSize, 24px);
+    }
+
+    .error-message {
+      color: var(--errorColor, #ff4444);
+      font-family: var(--errorFontFamily, Montserrat);
+      font-size: var(--errorFontSize, 12px);
+      margin-top: var(--errorMarginTop, 10px);
+    }
+  </style>
+  <div class="file-drop-zone">
+    <input type="file" class="file-input">
+    <div class="drop-zone-content">
+      <img class="drop-zone-icon" alt="Drag icon">
+      <span class="drag-text"></span>
+    </div>
+    <div class="error-message"></div>
+  </div>
+`;
+var WavelengthFileDropZone = class extends HTMLElement {
+  constructor() {
+    super();
+    this.dropZone = null;
+    this.fileInput = null;
+    this.dragText = null;
+    this.icon = null;
+    this.errorMessage = null;
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(fileDropZoneTemplate.content.cloneNode(true));
+    this.initializeElements();
+    this.setupEventListeners();
+  }
+  static get observedAttributes() {
+    return ["accepted-types", "max-size", "multiple", "drag-text", "icon-src"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    switch (name) {
+      case "drag-text":
+        if (this.dragText) this.dragText.textContent = newValue;
+        break;
+      case "icon-src":
+        if (this.icon) this.icon.src = newValue || "";
+        break;
+      case "accepted-types":
+        if (this.fileInput) this.fileInput.accept = newValue || "";
+        break;
+      case "multiple":
+        if (this.fileInput) this.fileInput.multiple = newValue !== null;
+        break;
+    }
+  }
+  initializeElements() {
+    if (!this.shadowRoot) return;
+    this.dropZone = this.shadowRoot.querySelector(".file-drop-zone");
+    this.fileInput = this.shadowRoot.querySelector(".file-input");
+    this.dragText = this.shadowRoot.querySelector(".drag-text");
+    this.icon = this.shadowRoot.querySelector(".drop-zone-icon");
+    this.errorMessage = this.shadowRoot.querySelector(".error-message");
+  }
+  connectedCallback() {
+    this.updateFromAttributes();
+  }
+  updateFromAttributes() {
+    if (this.dragText) {
+      this.dragText.textContent = this.getAttribute("drag-text") || "Drag & drop or click to choose files";
+    }
+    if (this.icon) {
+      this.icon.src = this.getAttribute("icon-src") || "";
+    }
+    if (this.fileInput) {
+      this.fileInput.accept = this.getAttribute("accepted-types") || "";
+      this.fileInput.multiple = this.hasAttribute("multiple");
+    }
+  }
+  setupEventListeners() {
+    if (!this.dropZone || !this.fileInput) return;
+    this.dropZone.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      this.dropZone?.classList.add("dragover");
+    });
+    this.dropZone.addEventListener("dragleave", (e) => {
+      e.preventDefault();
+      this.dropZone?.classList.remove("dragover");
+    });
+    this.dropZone.addEventListener("drop", (e) => {
+      e.preventDefault();
+      this.dropZone?.classList.remove("dragover");
+      const files = e.dataTransfer?.files;
+      if (files?.length) {
+        this.validateAndProcessFiles(files);
+      }
+    });
+    this.dropZone.addEventListener("click", () => {
+      this.fileInput?.click();
+    });
+    this.fileInput.addEventListener("change", (event) => {
+      const input = event.target;
+      if (input.files?.length) {
+        this.validateAndProcessFiles(input.files);
+      }
+    });
+  }
+  validateAndProcessFiles(files) {
+    const fileList = Array.from(files);
+    let errorMessage = "";
+    const acceptedTypes = this.getAttribute("accepted-types")?.split(",") || [];
+    if (acceptedTypes.length) {
+      const invalidFiles = fileList.filter((file) => !acceptedTypes.some((type) => file.name.toLowerCase().endsWith(type.toLowerCase().replace("*", ""))));
+      if (invalidFiles.length) {
+        errorMessage = `Invalid file type. Accepted types: ${acceptedTypes.join(", ")}`;
+      }
+    }
+    const maxSize = Number(this.getAttribute("max-size"));
+    if (maxSize && fileList.some((file) => file.size > maxSize)) {
+      errorMessage = `File size exceeds the maximum limit of ${this.formatFileSize(maxSize)}`;
+    }
+    if (errorMessage) {
+      if (this.errorMessage) {
+        this.errorMessage.textContent = errorMessage;
+      }
+      return;
+    }
+    if (this.errorMessage) {
+      this.errorMessage.textContent = "";
+    }
+    this.dispatchEvent(
+      new CustomEvent("files-selected", {
+        detail: {
+          files: this.hasAttribute("multiple") ? fileList : fileList[0]
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  formatFileSize(bytes) {
+    const units = ["B", "KB", "MB", "GB"];
+    let size = bytes;
+    let unitIndex = 0;
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+    return `${size.toFixed(2)} ${units[unitIndex]}`;
+  }
+};
+customElements.define("wavelength-file-drop-zone", WavelengthFileDropZone);
 export {
   BaseWavelengthInput,
   BaseWavelengthMultiSelectAutocomplete,
@@ -5170,10 +5647,12 @@ export {
   WavelengthBanner,
   WavelengthButton,
   WavelengthDatePicker,
+  WavelengthFileDropZone,
   WavelengthForm,
   WavelengthInput,
   WavelengthMultiSelectAutocomplete,
   WavelengthNavBar,
+  WavelengthNotificationPanel,
   WavelengthProgressBar,
   WavelengthTitleBar
 };

package/package.json

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