@wavelengthusaf/components 3.0.0 → 3.0.1

package/README.md

@@ -14,6 +14,11 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 3.0.1
+
+- 5/27/2025
+- Updated `WavelengthProgressBar` to be a web component; added several new props
+
 ### 3.0.0
 
 - 5/16/2025
@@ -63,7 +68,7 @@ npm install @wavelengthusaf/components
 ### 2.9.1
 
 - 5/02/2025
-- WavelengthButton updated; new props
+- `WavelengthButton` updated; new props
 - Minor bug fixes
 
 ### 2.9.0

package/dist/cjs/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var __create = Object.create;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -1503,6 +1503,85 @@ if (!customElements.get("wavelength-button")) {
   customElements.define("wavelength-button", WavelengthButton);
 }
 
+// src/web-components/wavelength-progress-bar.ts
+var template2 = document.createElement("template");
+template2.innerHTML = `
+  <style>
+	.label {
+  	display: flex;
+  	justify-content: space-between;
+  	font-family: Arial, sans-serif;
+  	margin-bottom: 6px;
+	}
+	.progress-bar {
+  	background-color: #e0e0e0;
+  	border: 1px solid black;
+  	border-radius: 12px;
+  	overflow: hidden;
+  	position: relative;
+	}
+	.progress-fill {
+  	background-color: #1976d2;
+  	height: 100%;
+  	transition: width 0.3s ease-in-out;
+  	border-right: 1px solid black;
+	}
+  </style>
+  <div class="container">
+	<div class="label">
+  	<span class="name"></span>
+  	<span class="status"></span>
+	</div>
+	<div class="progress-bar">
+  	<div class="progress-fill"></div>
+	</div>
+  </div>
+`;
+var WavelengthProgressBar = class extends HTMLElement {
+  static get observedAttributes() {
+    return ["value", "width", "height", "font-size", "font-color", "progress-border", "progress-color", "name"];
+  }
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    shadow.appendChild(template2.content.cloneNode(true));
+    this.container = shadow.querySelector(".container");
+    this.nameSpan = shadow.querySelector(".name");
+    this.statusSpan = shadow.querySelector(".status");
+    this.progressBar = shadow.querySelector(".progress-bar");
+    this.progressFill = shadow.querySelector(".progress-fill");
+  }
+  connectedCallback() {
+    this.updateRendering();
+  }
+  attributeChangedCallback() {
+    this.updateRendering();
+  }
+  updateRendering() {
+    const value = Number(_nullishCoalesce(this.getAttribute("value"), () => ( "0")));
+    const width2 = _nullishCoalesce(this.getAttribute("width"), () => ( "425px"));
+    const height2 = _nullishCoalesce(this.getAttribute("height"), () => ( "12px"));
+    const fontSize = _nullishCoalesce(this.getAttribute("font-size"), () => ( "inherit"));
+    const fontColor = _nullishCoalesce(this.getAttribute("font-color"), () => ( "#000000"));
+    const progressBorder = _nullishCoalesce(this.getAttribute("progress-border"), () => ( "10px solid black"));
+    const progressColor = _nullishCoalesce(this.getAttribute("progress-color"), () => ( "#1976d2"));
+    const name = _nullishCoalesce(this.getAttribute("name"), () => ( ""));
+    this.container.style.width = width2;
+    this.progressBar.style.width = width2;
+    this.progressBar.style.height = height2;
+    this.progressBar.style.border = progressBorder;
+    this.progressFill.style.width = `${Math.min(value, 100)}%`;
+    this.progressFill.style.backgroundColor = progressColor;
+    this.nameSpan.textContent = name;
+    this.statusSpan.textContent = value === 100 ? `Complete! - ${value}%` : `Uploading - ${value}%`;
+    this.nameSpan.style.fontSize = fontSize;
+    this.nameSpan.style.color = fontColor;
+    this.statusSpan.style.fontSize = fontSize;
+    this.statusSpan.style.color = fontColor;
+  }
+};
+customElements.define("wavelength-progress-bar", WavelengthProgressBar);
+
 // src/styles/fontBase64.tsx
 var goldmanFont = `@font-face {
     font-family: 'Goldman';
@@ -5154,41 +5233,24 @@ function WavelengthDragAndDrop({
 }
 
 // src/components/PageComponents/WavelengthProgressBar.tsx
-var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
-var _LinearProgress = require('@mui/material/LinearProgress'); var _LinearProgress2 = _interopRequireDefault(_LinearProgress);
 
-function WavelengthProgressBar({ dataTestId, width: width2 = "425px", height: height2 = "12px", backgroundColor: backgroundColor2, borderRadius: borderRadius2 = "24px", progressColor, value, name, textColor = "inherit" }) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", width: width2, justifyContent: "space-between", color: textColor }, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "", children: name }),
-      value === 100 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: "", children: [
-        "Complete! - ",
-        value,
-        "%"
-      ] }),
-      value !== 100 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: "", children: [
-        "Uploading - ",
-        value,
-        "%"
-      ] })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { "data-testid": dataTestId, sx: { width: width2, height: "12px", borderRadius: "24px" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _LinearProgress2.default,
-      {
-        variant: "determinate",
-        value,
-        style: { backgroundColor: backgroundColor2, height: height2, borderRadius: borderRadius2, border: "2px solid black" },
-        sx: {
-          "& .MuiLinearProgress-bar": {
-            backgroundColor: progressColor,
-            borderRadius: borderRadius2,
-            border: "1px solid black"
-          }
-        }
-      }
-    ) })
-  ] });
-}
+
+var WavelengthProgressBar2 = ({ name, value, width: width2, height: height2, fontSize, fontColor, progressBorder, progressColor, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (ref.current) {
+      if (name !== void 0) ref.current.setAttribute("name", name);
+      if (value !== void 0) ref.current.setAttribute("value", value.toString());
+      if (width2 !== void 0) ref.current.setAttribute("width", width2);
+      if (height2 !== void 0) ref.current.setAttribute("height", height2);
+      if (fontSize !== void 0) ref.current.setAttribute("font-size", fontSize);
+      if (fontColor !== void 0) ref.current.setAttribute("font-color", fontColor);
+      if (progressBorder !== void 0) ref.current.setAttribute("progress-border", progressBorder);
+      if (progressColor !== void 0) ref.current.setAttribute("progress-color", progressColor);
+    }
+  }, [name, value, width2, height2, fontSize, fontColor, progressBorder, progressColor]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-progress-bar", { ref, ...rest });
+};
 
 // src/components/PageComponents/WavelengthCommentDisplay.tsx
 
@@ -5561,7 +5623,7 @@ function WavelengthAlert({
 
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
-
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
 var _Container = require('@mui/material/Container'); var _Container2 = _interopRequireDefault(_Container);
 
 
@@ -7294,7 +7356,7 @@ var SampleComponent2 = ({
 
 
 
-exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultPagination = DefaultPagination; exports.SampleComponent = SampleComponent2; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton2; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; 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.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultPagination = DefaultPagination; exports.SampleComponent = SampleComponent2; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner2; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton2; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar2; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; 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: