@wavelengthusaf/components 2.9.3 → 2.10.1

package/README.md

@@ -14,6 +14,17 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 2.10.1
+
+- 5/13/2025
+- Small fix to exports
+
+### 2.10.0
+
+- 5/13/2025
+- Added Sample Component (skeleton)
+- Added documentation for internal developers to create their own Web Components
+
 ### 2.9.3
 
 - 5/06/2025

package/dist/cjs/index.cjs

@@ -1182,6 +1182,48 @@ var require_react_is2 = __commonJS({
   }
 });
 
+// src/web-components/sample-component.ts
+var template = document.createElement("template");
+template.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      /* Define component defaults here */
+    }
+  </style>
+  <div class="content">
+    <slot></slot> <!-- Enables user-defined inner HTML -->
+  </div>
+`;
+var SampleComponent = class extends HTMLElement {
+  // List of attributes to observe for changes
+  static get observedAttributes() {
+    return ["test-prop"];
+  }
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    this.shadow.append(template.content.cloneNode(true));
+  }
+  // Called when component is inserted into the DOM
+  connectedCallback() {
+    this.updateComponent();
+  }
+  // Called when observed attributes change
+  attributeChangedCallback() {
+    this.updateComponent();
+  }
+  // Main update logic; Your component's functionality will go here and/or in other methods that you have below
+  updateComponent() {
+    const prop = this.getAttribute("test-prop") || "";
+    const container = this.shadow.querySelector(".content");
+    if (container) container.textContent = prop;
+  }
+};
+if (!customElements.get("sample-component")) {
+  customElements.define("sample-component", SampleComponent);
+}
+
 // src/web-components/wavelength-banner.ts
 var WavelengthBanner = class extends HTMLElement {
   static get observedAttributes() {
@@ -1238,6 +1280,78 @@ if (!customElements.get("wavelength-banner")) {
 }
 
 // src/web-components/wavelength-button.ts
+var buttonTemplate = document.createElement("template");
+buttonTemplate.innerHTML = `
+  <style>
+	:host {
+  	display: inline-flex;
+	}
+
+	button {
+  	display: inline-flex;
+  	align-items: center;
+  	justify-content: center;
+  	position: relative;
+  	overflow: hidden;
+  	border: none;
+  	border-radius: 0.25rem;
+  	cursor: pointer;
+  	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  	font-weight: 500;
+  	font-size: 0.875rem;
+  	letter-spacing: 0.02857rem;
+  	text-transform: uppercase;
+  	user-select: none;
+  	white-space: normal;
+  	word-break: break-word;
+  	text-align: center;
+  	height: auto;
+	}
+
+	button .ripple {
+  	position: absolute;
+  	border-radius: 50%;
+  	transform: scale(0);
+  	animation: ripple 600ms linear;
+  	pointer-events: none;
+  	z-index: 0;
+	}
+
+	button .label {
+  	position: relative;
+  	z-index: 1;
+  	display: block;
+  	width: 100%;
+	}
+
+	@keyframes ripple {
+  	to {
+    	transform: scale(4);
+    	opacity: 0;
+  	}
+	}
+
+	button.contained {
+  	box-shadow: 0rem 0.125rem 0.25rem -0.063rem #000000;
+	}
+
+	button.contained:hover,
+	button.outlined:hover,
+	button.text:hover {
+  	opacity: 0.96;
+  	transition: background-color 300ms ease-in-out;
+	}
+
+	button:disabled {
+  	opacity: 0.5;
+  	pointer-events: none;
+	}
+  </style>
+
+  <button>
+	<span class="label"><slot>LABEL</slot></span>
+  </button>
+`;
 var WavelengthButton = class extends HTMLElement {
   constructor() {
     super();
@@ -1246,76 +1360,14 @@ var WavelengthButton = class extends HTMLElement {
     this.handleHoverOut = () => {
     };
     const shadow = this.attachShadow({ mode: "open" });
-    this.button = document.createElement("button");
-    const style3 = document.createElement("style");
-    style3.textContent = `
-  	:host {
-    	display: inline-flex;
-  	}
-
-  	button {
-    	display: inline-flex;
-    	align-items: center;
-    	justify-content: center;
-    	position: relative;
-    	overflow: hidden;
-    	border: none;
-    	border-radius: 0.25rem;
-    	cursor: pointer;
-    	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-    	font-weight: 500;
-    	font-size: 0.875rem;
-    	letter-spacing: 0.02857rem;
-    	text-transform: uppercase;
-    	user-select: none;
-    	white-space: normal;
-    	word-break: break-word;
-    	text-align: center;
-    	height: auto;
-  	}
-
-  	button .ripple {
-    	position: absolute;
-    	border-radius: 50%;
-    	transform: scale(0);
-    	animation: ripple 600ms linear;
-    	pointer-events: none;
-    	z-index: 0;
-  	}
-
-  	button .label {
-    	position: relative;
-    	z-index: 1;
-    	display: block;
-    	width: 100%;
-  	}
-
-  	@keyframes ripple {
-    	to {
-      	transform: scale(4);
-      	opacity: 0;
-    	}
-  	}
-
-  	button.contained {
-    	box-shadow: 0rem 0.125rem 0.25rem -0.063rem #000000;
-  	}
-
-  	button.contained:hover,
-  	button.outlined:hover,
-  	button.text:hover {
-    	opacity: 0.96;
-    	transition: background-color 300ms ease-in-out;
-  	}
-
-  	button:disabled {
-    	opacity: 0.5;
-    	pointer-events: none;
-  	}
-	`;
-    this.button.addEventListener("click", this.handleRipple.bind(this));
-    shadow.appendChild(style3);
-    shadow.appendChild(this.button);
+    shadow.appendChild(buttonTemplate.content.cloneNode(true));
+    this.button = shadow.querySelector("button");
+    this.button.addEventListener("click", (event) => {
+      this.handleRipple(event);
+      if (!this.getAttribute("href")) {
+        this.dispatchEvent(new MouseEvent("click", { bubbles: true, composed: true }));
+      }
+    });
   }
   static get observedAttributes() {
     return ["variant", "size", "margin", "padding", "color-one", "color-two", "font-size", "disabled", "border-radius", "href", "width", "height", "box-shadow", "target"];
@@ -1352,15 +1404,8 @@ var WavelengthButton = class extends HTMLElement {
     } else {
       this.applyPresetSize(size);
     }
-    if (width2) {
-      this.button.style.width = width2;
-    }
-    if (height2) {
-      this.button.style.height = height2;
-    } else {
-      this.button.style.height = "auto";
-    }
-    this.button.innerHTML = `<span class="label"><slot>LABEL</slot></span>`;
+    if (width2) this.button.style.width = width2;
+    this.button.style.height = height2;
     if (variant === "contained") {
       this.button.style.backgroundColor = colorOne;
       this.button.style.color = colorTwo;
@@ -1371,7 +1416,7 @@ var WavelengthButton = class extends HTMLElement {
       this.button.style.color = colorOne;
       this.button.style.border = `0.063rem solid ${colorOne}`;
       this.button.style.boxShadow = boxShadow || "none";
-    } else if (variant === "text") {
+    } else {
       this.button.style.backgroundColor = "transparent";
       this.button.style.color = colorOne;
       this.button.style.border = "none";
@@ -1388,7 +1433,7 @@ var WavelengthButton = class extends HTMLElement {
     this.handleHoverIn = () => {
       if (variant === "contained") {
         this.button.style.backgroundColor = this.shadeColor(colorOne, -15);
-      } else if (variant === "outlined" || variant === "text") {
+      } else {
         this.button.style.backgroundColor = this.hexToRgba(colorOne, 0.05);
       }
     };
@@ -1441,24 +1486,17 @@ var WavelengthButton = class extends HTMLElement {
     if (this.button.disabled) return;
     const variant = this.getAttribute("variant") || "outlined";
     const colorOne = this.getAttribute("color-one") || "#1976D2";
-    let rippleColor = "rgba(0,0,0,0.2)";
-    if (variant === "contained") {
-      rippleColor = this.hexToRgba(this.shadeColor(colorOne, 40), 0.6);
-    } else {
-      rippleColor = this.hexToRgba(this.shadeColor(colorOne, -40), 0.3);
-    }
     const ripple = document.createElement("span");
     ripple.className = "ripple";
-    ripple.style.backgroundColor = rippleColor;
+    const color2 = variant === "contained" ? this.hexToRgba(this.shadeColor(colorOne, 40), 0.6) : this.hexToRgba(this.shadeColor(colorOne, -40), 0.3);
+    ripple.style.backgroundColor = color2;
     const rect = this.button.getBoundingClientRect();
     const size = Math.max(rect.width, rect.height);
     ripple.style.width = ripple.style.height = `${size}px`;
     ripple.style.left = `${event.clientX - rect.left - size / 2}px`;
     ripple.style.top = `${event.clientY - rect.top - size / 2}px`;
     this.button.appendChild(ripple);
-    setTimeout(() => {
-      ripple.remove();
-    }, 600);
+    setTimeout(() => ripple.remove(), 600);
   }
 };
 if (!customElements.get("wavelength-button")) {
@@ -1675,13 +1713,14 @@ var WavelengthButton2 = ({
     setAttr("href", href);
     setAttr("target", target);
     setAttr("box-shadow", boxShadow);
-    disabled ? el.setAttribute("disabled", "") : el.removeAttribute("disabled");
+    if (disabled) el.setAttribute("disabled", "");
+    else el.removeAttribute("disabled");
     const handleClick = (e) => {
       _optionalChain([onClick, 'optionalCall', _17 => _17(e)]);
     };
     el.addEventListener("click", handleClick);
     return () => el.removeEventListener("click", handleClick);
-  }, [variant, size, height2, width2, margin2, padding2, colorOne, colorTwo, fontSize, borderRadius2, disabled, href, onClick]);
+  }, [variant, size, height2, width2, margin2, padding2, colorOne, colorTwo, fontSize, borderRadius2, disabled, href, onClick, boxShadow, target]);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-button", { ref, className, style: style3, ...rest, children });
 };
 
@@ -7177,6 +7216,27 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
   ] });
 };
 
+// src/components/samples/SampleComponent.tsx
+
+
+var SampleComponent2 = ({
+  testProp,
+  children,
+  ...rest
+  // This rest operator includes className, style, onClick, etc.
+}) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    if (testProp !== void 0) {
+      el.setAttribute("test-prop", testProp);
+    }
+  }, [testProp]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "sample-component", { ref, ...rest, children });
+};
+
+
 
 
 
@@ -7227,7 +7287,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
 
 
 
-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.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; 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.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; 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.SampleComponent = SampleComponent2; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; 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.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; 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: