@wavelengthusaf/components 2.9.3 → 2.10.1

package/dist/cjs/index.d.cts

@@ -579,4 +579,9 @@ type Props<T> = {
 };
 declare const WavelengthDataTable: <T extends DataType>({ data, columns, itemsPerPage, totalPages }: Props<T>) => react_jsx_runtime.JSX.Element;
 
-export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement> {
+    testProp?: string;
+}
+declare const SampleComponent: React__default.FC<SampleComponentProps>;
+
+export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, SampleComponent, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.d.ts

@@ -579,4 +579,9 @@ type Props<T> = {
 };
 declare const WavelengthDataTable: <T extends DataType>({ data, columns, itemsPerPage, totalPages }: Props<T>) => react_jsx_runtime.JSX.Element;
 
-export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };
+interface SampleComponentProps extends React__default.HTMLAttributes<HTMLElement> {
+    testProp?: string;
+}
+declare const SampleComponent: React__default.FC<SampleComponentProps>;
+
+export { AppLogo, ButtonIcon, ButtonMenu, DefaultCarousel, DefaultIcon, DefaultPagination, ManyPlanesComponent, NotAvailablePage, SampleComponent, type SearchProps, type SearchResult, SearchTextField, SliderCardCarousel, type StyledButtonPropsTwo, TestSnackbar, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppTheme, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, type WavelengthButtonProps, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFooter, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTextField, WavelengthTitleBar, add, ascendingRange, concat, findBestStringMatch, type menuItemProps, range, useOutsideClick, useThemeContext };

package/dist/esm/index.js

@@ -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) => {
       onClick?.(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__ */ jsx("wavelength-button", { ref, className, style: style3, ...rest, children });
 };
 
@@ -7176,6 +7215,26 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages }) => {
     /* @__PURE__ */ jsx41(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx41(WavelengthPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
   ] });
 };
+
+// src/components/samples/SampleComponent.tsx
+import { useRef as useRef7, useEffect as useEffect8 } from "react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var SampleComponent2 = ({
+  testProp,
+  children,
+  ...rest
+  // This rest operator includes className, style, onClick, etc.
+}) => {
+  const ref = useRef7(null);
+  useEffect8(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (testProp !== void 0) {
+      el.setAttribute("test-prop", testProp);
+    }
+  }, [testProp]);
+  return /* @__PURE__ */ jsx42("sample-component", { ref, ...rest, children });
+};
 export {
   AppLogo,
   ButtonIcon,
@@ -7185,6 +7244,7 @@ export {
   DefaultPagination,
   ManyPlanesComponent,
   NotAvailablePage,
+  SampleComponent2 as SampleComponent,
   SearchTextField,
   SliderCardCarousel,
   TestSnackbar,