@wavelengthusaf/components 2.7.2 → 2.7.3

package/dist/cjs/index.d.cts

@@ -270,13 +270,14 @@ interface WavelengthTitleBarProps {
 declare function WavelengthTitleBar({ titleText, subtitleText, textColor, textShadow }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthBannerProps {
-    classification?: "unclassified" | "controlled" | "controlled unclassified information" | "cui" | "u" | "confidential" | "c" | "secret" | "s" | "top secret" | "ts" | string;
-    control?: ("cui" | "sci" | "fouo" | "nf" | "propin" | "frd" | "gbr s" | "si" | "si-g" | "tk" | "relido" | "rd" | "rd-n" | "rel" | "fvey" | "hcs" | string)[];
+    headerText?: string;
     headerColor?: string;
     textColor?: string;
+    opacity?: string | number;
+    zIndex?: string | number;
     id?: string;
 }
-declare function WavelengthBanner({ classification, control, headerColor, textColor, id }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthBanner({ headerText, headerColor, textColor, opacity, zIndex, id }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
 
 interface AppLogoProps {
     width?: number;

package/dist/esm/index.d.ts

@@ -270,13 +270,14 @@ interface WavelengthTitleBarProps {
 declare function WavelengthTitleBar({ titleText, subtitleText, textColor, textShadow }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthBannerProps {
-    classification?: "unclassified" | "controlled" | "controlled unclassified information" | "cui" | "u" | "confidential" | "c" | "secret" | "s" | "top secret" | "ts" | string;
-    control?: ("cui" | "sci" | "fouo" | "nf" | "propin" | "frd" | "gbr s" | "si" | "si-g" | "tk" | "relido" | "rd" | "rd-n" | "rel" | "fvey" | "hcs" | string)[];
+    headerText?: string;
     headerColor?: string;
     textColor?: string;
+    opacity?: string | number;
+    zIndex?: string | number;
     id?: string;
 }
-declare function WavelengthBanner({ classification, control, headerColor, textColor, id }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthBanner({ headerText, headerColor, textColor, opacity, zIndex, id }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
 
 interface AppLogoProps {
     width?: number;

package/dist/esm/index.js

@@ -4988,51 +4988,76 @@ function WavelengthTitleBar2({ titleText, subtitleText, textColor, textShadow })
 }
 
 // src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-function WavelengthBanner({ classification, control, headerColor, textColor, id }) {
-  const palette2 = getPalette();
-  if (classification === "unclassified") {
-    if (control && control.includes("cui")) {
-      headerColor = headerColor ? headerColor : "#502b85";
-      textColor = textColor ? textColor : "white";
-    }
-    headerColor = headerColor ? headerColor : "#007a33";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "controlled" || classification === "controlled unclassified information" || classification === "cui" || classification === "u") {
-    headerColor = headerColor ? headerColor : "#502b85";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "confidential" || classification === "c") {
-    headerColor = headerColor ? headerColor : "#0033a0";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "secret" || classification === "s") {
-    headerColor = headerColor ? headerColor : "#c8102e";
-    textColor = textColor ? textColor : "white";
-  } else if (classification === "top secret" || classification === "ts") {
-    if (control && control.includes("sci")) {
-      headerColor = headerColor ? headerColor : "#fce83a";
-      textColor = textColor ? textColor : "black";
-    }
-    headerColor = headerColor ? headerColor : "#ff8c00";
-    textColor = textColor ? textColor : "black";
-  } else if (classification === "" || classification === null || classification === void 0) {
-    classification = "CLASSIFICATION//CONTROL";
-    headerColor = palette2.primary;
-    textColor = palette2.secondary;
-  } else {
-    headerColor = headerColor ? headerColor : palette2.primary;
-    textColor = textColor ? textColor : palette2.secondary;
+import { useEffect as useEffect2, useRef as useRef3 } from "react";
+
+// src/web-components/wavelength-banner.tsx
+var WavelengthBanner = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["header-text", "header-color", "text-color", "opacity", "z-index", "id"];
   }
-  if (control && control.length === 0) {
-    classification = `${classification}`;
-  } else if (control && control.length === 1) {
-    classification = `${classification}//${control[0]}`;
-  } else if (control) {
-    classification = `${classification}//${control[0]}`;
-    for (let i = 1; i < control.length; i++) {
-      classification = `${classification}/${control[i]}`;
-    }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style3 = document.createElement("style");
+    style3.textContent = `
+        :host {
+          display: block;
+          width: 100%;
+        }
+  
+        .banner {
+          width: 100%;
+          text-align: center;
+          font-weight: normal;
+          font-family: sans-serif;
+          font-size: 1rem;
+        }
+      `;
+    this.container = document.createElement("div");
+    this.container.classList.add("banner");
+    this.textElement = document.createElement("p");
+    this.container.appendChild(this.textElement);
+    shadow.appendChild(style3);
+    shadow.appendChild(this.container);
   }
-  return /* @__PURE__ */ jsx20("div", { style: { width: "100%", backgroundColor: headerColor }, id, children: /* @__PURE__ */ jsx20("p", { style: { width: "100%", color: textColor, textAlign: "center" }, children: classification.toUpperCase() }) });
+  connectedCallback() {
+    this.updateAttributes();
+  }
+  attributeChangedCallback() {
+    this.updateAttributes();
+  }
+  updateAttributes() {
+    const headerText = this.getAttribute("header-text") || "CLASSIFICATION//CONTROL";
+    const headerColor = this.getAttribute("header-color") || "#4373aa";
+    const textColor = this.getAttribute("text-color") || "#ffffff";
+    const opacity = this.getAttribute("opacity") || "1";
+    const zIndex = this.getAttribute("z-index") || "10";
+    const id = this.getAttribute("id");
+    this.container.style.backgroundColor = headerColor;
+    this.container.style.opacity = opacity;
+    this.container.style.zIndex = zIndex;
+    if (id) this.container.id = id;
+    this.textElement.textContent = headerText.toUpperCase();
+    this.textElement.style.color = textColor;
+  }
+};
+customElements.define("wavelength-banner", WavelengthBanner);
+
+// src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+function WavelengthBanner2({ headerText = "CLASSIFICATION//CONTROL", headerColor = "#000000", textColor = "#FFFFFF", opacity = 1, zIndex = 10, id }) {
+  const ref = useRef3(null);
+  useEffect2(() => {
+    if (ref.current) {
+      ref.current.setAttribute("header-text", headerText);
+      ref.current.setAttribute("header-color", headerColor);
+      ref.current.setAttribute("text-color", textColor);
+      ref.current.setAttribute("opacity", String(opacity));
+      ref.current.setAttribute("z-index", String(zIndex));
+      if (id) ref.current.setAttribute("id", id);
+    }
+  }, [headerText, headerColor, textColor, opacity, zIndex, id]);
+  return /* @__PURE__ */ jsx20("wavelength-banner", { ref });
 }
 
 // src/components/CSFD/ManyPlanes.tsx
@@ -5553,11 +5578,11 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
 // src/components/snackbars/TestSnackbar.tsx
 import Box6 from "@mui/material/Box";
 import Button5 from "@mui/material/Button";
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
 import { Fragment as Fragment12, jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var useOutsideClick = (callback) => {
-  const ref = useRef3(null);
-  useEffect2(() => {
+  const ref = useRef4(null);
+  useEffect3(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -5709,7 +5734,7 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
 };
 
 // src/components/carousels/sliderCarousel.tsx
-import { useState as useState5, useEffect as useEffect4 } from "react";
+import { useState as useState5, useEffect as useEffect5 } from "react";
 import Grid6 from "@mui/material/Grid";
 import Card2 from "@mui/material/Card";
 import CardContent2 from "@mui/material/CardContent";
@@ -5720,7 +5745,7 @@ var delay = 2500;
 var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
   const [index, setIndex] = useState5(0);
   const [isHovered, setIsHovered] = useState5(false);
-  useEffect4(() => {
+  useEffect5(() => {
     setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
     return () => {
     };
@@ -6235,7 +6260,7 @@ export {
   TestSnackbar,
   WavelengthAppTheme,
   WavelengthAutocomplete,
-  WavelengthBanner,
+  WavelengthBanner2 as WavelengthBanner,
   WavelengthBox,
   WavelengthButton,
   WavelengthCommentDisplay,