@wavelengthusaf/components 3.0.1 → 3.0.3

package/dist/cjs/index.d.cts

@@ -321,14 +321,16 @@ interface WavelengthTitleBarProps {
 declare function WavelengthTitleBar({ titleText, subtitleText, textColor, textShadow }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthBannerProps {
-    headerText?: string;
-    headerColor?: string;
+    bannerText?: string;
+    bannerColor?: string;
     textColor?: string;
     opacity?: string | number;
     zIndex?: string | number;
     id?: string;
+    classification?: string;
+    control?: string[];
 }
-declare function WavelengthBanner({ headerText, headerColor, textColor, opacity, zIndex, id }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthBanner({ bannerText, bannerColor, textColor, opacity, zIndex, id, classification, control }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthAppLogoProps {
     width?: number;
@@ -584,4 +586,4 @@ interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement
 }
 declare const SampleComponent: React__default.FC<SampleComponentProps>;
 
-export { ButtonIcon, ButtonMenu, DefaultCarousel, DefaultPagination, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, type WavelengthProgressBarProps, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+export { ButtonIcon, ButtonMenu, DefaultCarousel, DefaultPagination, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, type WavelengthBannerProps, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, type WavelengthProgressBarProps, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.d.ts

@@ -321,14 +321,16 @@ interface WavelengthTitleBarProps {
 declare function WavelengthTitleBar({ titleText, subtitleText, textColor, textShadow }: WavelengthTitleBarProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthBannerProps {
-    headerText?: string;
-    headerColor?: string;
+    bannerText?: string;
+    bannerColor?: string;
     textColor?: string;
     opacity?: string | number;
     zIndex?: string | number;
     id?: string;
+    classification?: string;
+    control?: string[];
 }
-declare function WavelengthBanner({ headerText, headerColor, textColor, opacity, zIndex, id }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
+declare function WavelengthBanner({ bannerText, bannerColor, textColor, opacity, zIndex, id, classification, control }: WavelengthBannerProps): react_jsx_runtime.JSX.Element;
 
 interface WavelengthAppLogoProps {
     width?: number;
@@ -584,4 +586,4 @@ interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement
 }
 declare const SampleComponent: React__default.FC<SampleComponentProps>;
 
-export { ButtonIcon, ButtonMenu, DefaultCarousel, DefaultPagination, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, type WavelengthProgressBarProps, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+export { ButtonIcon, ButtonMenu, DefaultCarousel, DefaultPagination, SampleComponent, type SearchProps, type SearchResult, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, type WavelengthBannerProps, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDefaultIcon, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthManyPlanes, WavelengthNotAvailablePage, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, type WavelengthProgressBarProps, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.js

@@ -1227,26 +1227,26 @@ if (!customElements.get("sample-component")) {
 // src/web-components/wavelength-banner.ts
 var WavelengthBanner = class extends HTMLElement {
   static get observedAttributes() {
-    return ["header-text", "header-color", "text-color", "opacity", "z-index", "id"];
+    return ["banner-text", "banner-color", "text-color", "opacity", "z-index", "id", "classification", "control"];
   }
   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;
-        }
-      `;
+      :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");
@@ -1261,18 +1261,76 @@ var WavelengthBanner = class extends HTMLElement {
     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;
+    const classificationRaw = this.getAttribute("classification")?.toLowerCase() || "";
+    const controlRaw = this.getAttribute("control") || "";
+    const controlList = controlRaw.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean);
+    let bannerText = this.getAttribute("banner-text");
+    const bannerColor = this.getAttribute("banner-color");
+    const textColor = this.getAttribute("text-color");
+    const palette2 = {
+      primary: "#4373aa",
+      secondary: "#ffffff"
+    };
+    let effectiveClassification = classificationRaw;
+    let effectiveColor = palette2.primary;
+    let effectiveTextColor = palette2.secondary;
+    switch (classificationRaw) {
+      case "unclassified":
+      case "u":
+        if (controlRaw) {
+          effectiveColor = "#502b85";
+          effectiveTextColor = "white";
+        } else {
+          effectiveColor = "#007a33";
+          effectiveTextColor = "white";
+        }
+        break;
+      case "controlled":
+      case "controlled unclassified information":
+      case "cui":
+        effectiveColor = "#502b85";
+        effectiveTextColor = "white";
+        break;
+      case "confidential":
+      case "c":
+        effectiveColor = "#0033a0";
+        effectiveTextColor = "white";
+        break;
+      case "secret":
+      case "s":
+        effectiveColor = "#c8102e";
+        effectiveTextColor = "white";
+        break;
+      case "top secret":
+      case "ts":
+        if (controlList.includes("sci")) {
+          effectiveColor = "#fce83a";
+          effectiveTextColor = "black";
+        } else {
+          effectiveColor = "#ff8c00";
+          effectiveTextColor = "black";
+        }
+        break;
+      case "":
+        effectiveClassification = "CLASSIFICATION//CONTROL";
+        break;
+      default:
+        effectiveColor = palette2.primary;
+        effectiveTextColor = palette2.secondary;
+    }
+    if (!bannerText) {
+      if (controlList.length === 0) {
+        bannerText = effectiveClassification;
+      } else {
+        bannerText = `${effectiveClassification}//${controlList.join("/")}`;
+      }
+    }
+    this.container.style.backgroundColor = bannerColor || effectiveColor;
+    this.textElement.style.color = textColor || effectiveTextColor;
+    this.container.style.opacity = this.getAttribute("opacity") || "1";
+    this.container.style.zIndex = this.getAttribute("z-index") || "10";
+    if (this.getAttribute("id")) this.container.id = this.getAttribute("id");
+    this.textElement.textContent = bannerText.toUpperCase();
   }
 };
 if (!customElements.get("wavelength-banner")) {
@@ -5583,10 +5641,7 @@ function WavelengthAlert({
       /* @__PURE__ */ jsxs14("a", { href: url, style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
         /* @__PURE__ */ jsx20("label", { style: { fontSize: "14px", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 500 }, children: timeStamp }),
         /* @__PURE__ */ jsx20("div", { style: { fontSize: "16px", fontWeight: 550, lineHeight: "24px" }, children: alertType }),
-        /* @__PURE__ */ jsxs14("div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: [
-          "App: ",
-          appName
-        ] })
+        /* @__PURE__ */ jsx20("div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: appName })
       ] }),
       onClose && /* @__PURE__ */ jsx20(IconButton3, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ jsx20(Close, {}) })
     ] });
@@ -5691,18 +5746,20 @@ function WavelengthTitleBar2({ titleText, subtitleText, textColor, textShadow })
 // src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
 import { useEffect as useEffect4, useRef as useRef5 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
-function WavelengthBanner2({ headerText = "CLASSIFICATION//CONTROL", headerColor = "#000000", textColor = "#FFFFFF", opacity = 1, zIndex = 10, id }) {
+function WavelengthBanner2({ bannerText, bannerColor, textColor, opacity = 1, zIndex = 10, id, classification, control }) {
   const ref = useRef5(null);
   useEffect4(() => {
-    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]);
+    if (!ref.current) return;
+    const el = ref.current;
+    if (bannerText !== void 0) el.setAttribute("banner-text", bannerText);
+    if (bannerColor !== void 0) el.setAttribute("banner-color", bannerColor);
+    if (textColor !== void 0) el.setAttribute("text-color", textColor);
+    if (classification !== void 0) el.setAttribute("classification", classification);
+    if (control !== void 0) el.setAttribute("control", String(control));
+    if (opacity !== void 0) el.setAttribute("opacity", String(opacity));
+    if (zIndex !== void 0) el.setAttribute("z-index", String(zIndex));
+    if (id) el.setAttribute("id", id);
+  }, [bannerText, bannerColor, textColor, classification, control, opacity, zIndex, id]);
   return /* @__PURE__ */ jsx23("wavelength-banner", { ref });
 }