@wavelengthusaf/components 2.7.2 → 2.7.3

package/README.md

@@ -14,44 +14,54 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 2.7.3
+
+- 4/8/2025
+- Updated `WavelengthBanner` with various tweaks; added several props
+
+### 2.7.2
+
+- 4/4/2025
+- Updated `WavelengthTitleBar` to be a standard `<div>` instead of an svg. Also added several props for further customization. 
+
 ### 2.7.1
 
 - 4/1/2025
-- Updated WavelengthTextField component to have another variant.
+- Updated `WavelengthTextField` component to have another variant.
 
 ### 2.7.0
 
 - 3/24/2025
-- Added a Comment Component
+- Added the `WavelengthCommentDisplay` component
 
 ### 2.6.0
 
-- Added a new component, WavelengthProgressBar
+- Added a new component, `WavelengthProgressBar`
 
 ### 2.5.1
 
 - 03/12/2025
-- Added shrink prop to text field component
+- Added shrink prop to `WavelengthTextField` component
 - Changed message prop in the snackbar component to be a react or jsx element
 
 ### 2.5.0
 
 - 03/06/2025
-- Added a new component, WavelengthDragAndDrop
-- Updated WavelengthTextField component to take in a prop called type
+- Added a new component, `WavelengthDragAndDrop`
+- Updated `WavelengthTextField` component to take in a prop called type
 
 ### 2.4.0
 
 - 03/03/2025
-- Added 2 new components, WavelengthStyledButton, and WavelengthTextField
+- Added 2 new components, `WavelengthStyledButton`, and `WavelengthTextField`
 - Updated the confirmation modal to include more props making it more customizable
 - Updated documentation to reflect these changes
 
 ### 2.3.5
 
-- Updated WavelengthDropdown by adding default values to some of the props
+- Updated `WavelengthDropdown` by adding default values to some of the props
 - Fixed bugs related to WavelengthSearchbar, no longer 2 closing icons for some configurations
-- Updated WavelengthPopupMenu , each list item can have a hover color for text, also fixed underlining of link type issue
+- Updated `WavelengthPopupMenu`, each list item can have a hover color for text, also fixed underlining of link type issue
 - Standard Snackbar is not aligned properly, the Snackbars with icons are also aligned properly
 
 ### 2.3.4

package/dist/cjs/index.cjs

@@ -4989,50 +4989,75 @@ function WavelengthTitleBar2({ titleText, subtitleText, textColor, textShadow })
 
 // src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
 
-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;
+
+// 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__ */ _jsxruntime.jsx.call(void 0, "div", { style: { width: "100%", backgroundColor: headerColor }, id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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
+
+function WavelengthBanner2({ headerText = "CLASSIFICATION//CONTROL", headerColor = "#000000", textColor = "#FFFFFF", opacity = 1, zIndex = 10, id }) {
+  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]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-banner", { ref });
 }
 
 // src/components/CSFD/ManyPlanes.tsx
@@ -6268,7 +6293,7 @@ function WavelengthTextField(props) {
 
 
 
-exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar2; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar2; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: