@wavelengthusaf/components 3.0.1 → 3.0.3

package/README.md

@@ -14,6 +14,16 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 3.0.3
+
+- 5/30/2025
+- Updated `WavelengthBanner`; re-added the `classification` and `control` props
+
+### 3.0.2
+
+- 5/28/2025
+- Updated Alert Component
+
 ### 3.0.1
 
 - 5/27/2025

package/dist/cjs/index.cjs

@@ -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 = _optionalChain([this, 'access', _2 => _2.getAttribute, 'call', _3 => _3("classification"), 'optionalAccess', _4 => _4.toLowerCase, 'call', _5 => _5()]) || "";
+    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")) {
@@ -1701,18 +1759,18 @@ var WavelengthTitleBar = class extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue !== newValue) {
       if (name === "title-text") {
-        const titleElement = _optionalChain([this, 'access', _2 => _2.shadowRoot, 'optionalAccess', _3 => _3.querySelector, 'call', _4 => _4(".title")]);
+        const titleElement = _optionalChain([this, 'access', _6 => _6.shadowRoot, 'optionalAccess', _7 => _7.querySelector, 'call', _8 => _8(".title")]);
         if (titleElement) {
           titleElement.textContent = newValue;
         }
       } else if (name === "subtitle-text") {
-        const subtitleElement = _optionalChain([this, 'access', _5 => _5.shadowRoot, 'optionalAccess', _6 => _6.querySelector, 'call', _7 => _7(".subtitle")]);
+        const subtitleElement = _optionalChain([this, 'access', _9 => _9.shadowRoot, 'optionalAccess', _10 => _10.querySelector, 'call', _11 => _11(".subtitle")]);
         if (subtitleElement) {
           subtitleElement.textContent = newValue;
         }
       } else if (name === "text-color") {
-        const titleElement = _optionalChain([this, 'access', _8 => _8.shadowRoot, 'optionalAccess', _9 => _9.querySelector, 'call', _10 => _10(".title")]);
-        const subtitleElement = _optionalChain([this, 'access', _11 => _11.shadowRoot, 'optionalAccess', _12 => _12.querySelector, 'call', _13 => _13(".subtitle")]);
+        const titleElement = _optionalChain([this, 'access', _12 => _12.shadowRoot, 'optionalAccess', _13 => _13.querySelector, 'call', _14 => _14(".title")]);
+        const subtitleElement = _optionalChain([this, 'access', _15 => _15.shadowRoot, 'optionalAccess', _16 => _16.querySelector, 'call', _17 => _17(".subtitle")]);
         if (titleElement) {
           titleElement.style.color = newValue;
         }
@@ -1720,7 +1778,7 @@ var WavelengthTitleBar = class extends HTMLElement {
           subtitleElement.style.color = newValue;
         }
       } else if (name === "has-shadow") {
-        const titleElement = _optionalChain([this, 'access', _14 => _14.shadowRoot, 'optionalAccess', _15 => _15.querySelector, 'call', _16 => _16(".title")]);
+        const titleElement = _optionalChain([this, 'access', _18 => _18.shadowRoot, 'optionalAccess', _19 => _19.querySelector, 'call', _20 => _20(".title")]);
         if (titleElement) {
           titleElement.style.textShadow = newValue !== "false" ? "none" : "0.313rem 0.313rem 0.375rem #FFFFFF";
         }
@@ -1795,7 +1853,7 @@ var WavelengthButton2 = ({
     if (disabled) el.setAttribute("disabled", "");
     else el.removeAttribute("disabled");
     const handleClick = (e) => {
-      _optionalChain([onClick, 'optionalCall', _17 => _17(e)]);
+      _optionalChain([onClick, 'optionalCall', _21 => _21(e)]);
     };
     el.addEventListener("click", handleClick);
     return () => el.removeEventListener("click", handleClick);
@@ -5043,7 +5101,7 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
           openSections[section.title] ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.KeyboardArrowDownRounded, { sx: { color: arrowColor ? arrowColor : palette2.secondary } }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsmaterial.KeyboardArrowRightRounded, { sx: { color: arrowColor ? arrowColor : palette2.secondary } }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Typography2.default, { variant: "h6", sx: { fontSize: 16, color: txtColor ? txtColor : palette2.secondary }, children: section.title })
         ] }),
-        _optionalChain([section, 'access', _18 => _18.subsections, 'optionalAccess', _19 => _19.length]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Collapse2.default, { in: openSections[section.title], timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { component: "div", disablePadding: true, sx: { paddingLeft: 4 }, children: section.subsections.map((subsection, subIndex) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, React2.default.Fragment, { children: [
+        _optionalChain([section, 'access', _22 => _22.subsections, 'optionalAccess', _23 => _23.length]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Collapse2.default, { in: openSections[section.title], timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _List2.default, { component: "div", disablePadding: true, sx: { paddingLeft: 4 }, children: section.subsections.map((subsection, subIndex) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, React2.default.Fragment, { children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _Typography2.default,
             {
@@ -5054,7 +5112,7 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
                 paddingLeft: 0.75,
                 color: labelColor ? labelColor : palette2.secondary
               },
-              children: _optionalChain([subsection, 'access', _20 => _20.title, 'optionalAccess', _21 => _21.toUpperCase, 'call', _22 => _22()])
+              children: _optionalChain([subsection, 'access', _24 => _24.title, 'optionalAccess', _25 => _25.toUpperCase, 'call', _26 => _26()])
             }
           ),
           subsection.items && subsection.items.map((item, itemIndex) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5284,7 +5342,7 @@ function WavelengthCommentDisplay(props) {
             {
               onClick: (e) => {
                 setSelected(!selected);
-                _optionalChain([props, 'access', _23 => _23.onClick, 'optionalCall', _24 => _24(e)]);
+                _optionalChain([props, 'access', _27 => _27.onClick, 'optionalCall', _28 => _28(e)]);
               },
               style: { padding: "0px" },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircleOutline2.default, { fontSize: "small" })
@@ -5295,7 +5353,7 @@ function WavelengthCommentDisplay(props) {
             {
               onClick: (e) => {
                 setSelected(!selected);
-                _optionalChain([props, 'access', _25 => _25.onClick, 'optionalCall', _26 => _26(e)]);
+                _optionalChain([props, 'access', _29 => _29.onClick, 'optionalCall', _30 => _30(e)]);
               },
               style: { padding: "0px" },
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle2.default, { fontSize: "small", sx: { color: props.iconSelectedColor || "rgba(209, 106, 47, 1)" } })
@@ -5583,10 +5641,7 @@ function WavelengthAlert({
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "a", { href: url, style: { display: "flex", flexDirection: "column", gap: "4px", width: "250px", marginLeft: "12px", textDecoration: "none", color: baseContainerStyle.color }, children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { style: { fontSize: "14px", lineHeight: "150%", letterSpacing: "0.15px", fontWeight: 500 }, children: timeStamp }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "16px", fontWeight: 550, lineHeight: "24px" }, children: alertType }),
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: [
-          "App: ",
-          appName
-        ] })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "14px", lineHeight: "20px", fontWeight: 400 }, children: appName })
       ] }),
       onClose && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { sx: { padding: "0px", width: "20px" }, onClick: onClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) })
     ] });
@@ -5691,18 +5746,20 @@ function WavelengthTitleBar2({ titleText, subtitleText, textColor, textShadow })
 // src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
 
 
-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 = _react.useRef.call(void 0, null);
   _react.useEffect.call(void 0, () => {
-    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__ */ _jsxruntime.jsx.call(void 0, "wavelength-banner", { ref });
 }
 
@@ -5839,8 +5896,8 @@ function WavelengthConfirmationModal(props) {
         overflow: "scroll"
       },
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _27 => _27.textObj, 'optionalAccess', _28 => _28.title]) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _29 => _29.textObj, 'optionalAccess', _30 => _30.dialog]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _31 => _31.textObj, 'optionalAccess', _32 => _32.title]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _33 => _33.textObj, 'optionalAccess', _34 => _34.dialog]) }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
           props.cancelButton,
           props.submitButton
@@ -5861,11 +5918,11 @@ function WavelengthContentModal(props) {
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _31 => _31.textObj, 'optionalAccess', _32 => _32.title]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _35 => _35.textObj, 'optionalAccess', _36 => _36.title]) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) }) })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _33 => _33.textObj, 'optionalAccess', _34 => _34.dialog]) }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _35 => _35.textObj, 'optionalAccess', _36 => _36.purpose]) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _37 => _37.textObj, 'optionalAccess', _38 => _38.dialog]) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _39 => _39.textObj, 'optionalAccess', _40 => _40.purpose]) }) })
   ] });
 }
 
@@ -6079,7 +6136,7 @@ function WavelengthDropdown({
       borderBottomRightRadius: "8px",
       borderTopRightRadius: "0px",
       borderTopLeftRadius: "0px",
-      boxShadow: _optionalChain([menuSx, 'optionalAccess', _37 => _37.boxShadow]),
+      boxShadow: _optionalChain([menuSx, 'optionalAccess', _41 => _41.boxShadow]),
       width: myMenusx.width,
       backgroundColor: `${myMenusx.backgroundColor}`
     },
@@ -6862,7 +6919,7 @@ function WavelengthTextField(props) {
         label: props.label,
         onChange: (e) => {
           handleChange(e);
-          _optionalChain([props, 'access', _38 => _38.onChange, 'optionalCall', _39 => _39(e)]);
+          _optionalChain([props, 'access', _42 => _42.onChange, 'optionalCall', _43 => _43(e)]);
         },
         error: hasError,
         helperText: hasError ? props.errorMessage : "",
@@ -6913,7 +6970,7 @@ function WavelengthTextField(props) {
           error: hasError,
           onChange: (e) => {
             handleChange(e);
-            _optionalChain([props, 'access', _40 => _40.onChange, 'optionalCall', _41 => _41(e)]);
+            _optionalChain([props, 'access', _44 => _44.onChange, 'optionalCall', _45 => _45(e)]);
           }
         }
       ),
@@ -7102,7 +7159,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
   const [noRowsOpen, setNoRowsOpen] = _react.useState.call(void 0, false);
   const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
   const [searchItem, setSearchItem] = _react.useState.call(void 0, "");
-  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _42 => _42[0], 'optionalAccess', _43 => _43.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _46 => _46[0], 'optionalAccess', _47 => _47.key]) || "");
   const [currentPage, setCurrentPage] = _react.useState.call(void 0, 1);
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [editingMenuKey, setEditingMenuKey] = _react.useState.call(void 0, null);
@@ -7256,7 +7313,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _44 => _44.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _45 => _45.map, 'call', _46 => _46((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _48 => _48.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _49 => _49.map, 'call', _50 => _50((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       StyledInput,
       {