@wavelengthusaf/components 3.3.5 → 3.3.7

package/README.md

@@ -14,6 +14,16 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 3.3.7
+
+- 8/11/2025
+- Introduced formAssociated = true for `WavelengthInput`. It allows the input to be recognized when utilized within a form element.
+
+### 3.3.6
+
+- 8/11/2025
+- Updated `WLAutoComplete` to have the outline styling refactored, the component also features a `id` and `name` prop for form handling. Fixed dropdown visibility issues.
+
 ### 3.3.5
 
 - 8/08/2025
@@ -27,7 +37,7 @@ npm install @wavelengthusaf/components
 ### 3.3.3
 
 - 8/05/2025
-- Updated `WLAutoComplete` to be able to have scroll functionality and basic validation. 
+- Updated `WLAutoComplete` to be able to have scroll functionality and basic validation.
 
 ### 3.3.2
 
@@ -37,7 +47,7 @@ npm install @wavelengthusaf/components
 ### 3.3.1
 
 - 6/22/2025
-- Updated `WLAutoComplete` to be able to have scroll functionality and basic validation. 
+- Updated `WLAutoComplete` to be able to have scroll functionality and basic validation.
 
 ### 3.3.0
 
@@ -57,7 +67,7 @@ npm install @wavelengthusaf/components
 ### 3.1.0
 
 - 6/2/2025
-- Added `WLChildDataTable`; Changed naming conventions for components into their respective categories. 
+- Added `WLChildDataTable`; Changed naming conventions for components into their respective categories.
 
 ### 3.0.3
 

package/dist/cjs/index.cjs

@@ -1790,9 +1790,9 @@ var WavelengthInput = class extends HTMLElement {
     this._debounceValidate = () => {
     };
     this._debounceTimeout = null;
-    this.internals = null;
     this._onInput = () => {
       this.setAttribute("value", this.inputEl.value);
+      this.internals.setFormValue(this.inputEl.value);
       this.dispatchEvent(
         new CustomEvent("inputChange", {
           bubbles: true,
@@ -1837,6 +1837,7 @@ var WavelengthInput = class extends HTMLElement {
         })
       );
     };
+    this.internals = this.attachInternals();
     const shadow = this.attachShadow({ mode: "open" });
     shadow.appendChild(template3.content.cloneNode(true));
     this.inputEl = document.createElement("input");
@@ -1846,9 +1847,6 @@ var WavelengthInput = class extends HTMLElement {
     this.clearButtonEl.addEventListener("click", this._onClearClick);
     shadow.querySelector(".input-wrapper").appendChild(this.inputEl);
     shadow.appendChild(this.placeholderStyleEl);
-    if (this.attachInternals) {
-      this.internals = this.attachInternals();
-    }
   }
   static get observedAttributes() {
     return [
@@ -2225,6 +2223,7 @@ var WavelengthInput = class extends HTMLElement {
     val ? this.setAttribute("clearable", "") : this.removeAttribute("clearable");
   }
 };
+WavelengthInput.formAssociated = true;
 if (!customElements.get("wavelength-input")) {
   customElements.define("wavelength-input", WavelengthInput);
 }
@@ -8402,9 +8401,6 @@ var OuterContainer = _styledcomponents2.default.div`
   align-items: center;
   justify-content: center;
   border-radius: 5px;
-  background-color: ${(props) => props.$primary || "#FFFFFF"};
-  height: calc(${(props) => props.$inputheight || "51px"} * 1.45);
-  width: calc(${(props) => props.$inputwidth || "320px"} * 1.07);
 `;
 var AutoContainer = _styledcomponents2.default.div`
   position: absolute;
@@ -8420,7 +8416,6 @@ var Label = _styledcomponents2.default.label`
   top: 50%;
   left: 10px;
   transform: translateY(-50%);
-  color: ${(props) => props.$primary || "#ccc"};
   font-size: 16px;
   pointer-events: none;
   transition: 0.3s ease all;
@@ -8453,7 +8448,8 @@ var Input = _styledcomponents2.default.input`
   &:focus + ${Label}, &:not(:placeholder-shown) + ${Label} {
     top: 0;
     left: 10px;
-    padding: 0 2px;
+
+    padding: 0 5px;
     color: ${(props) => {
   const { $focusedLabelColor, $dropDownVisible, $suggestBoolean } = props;
   if (!$focusedLabelColor) return "#4a90e2";
@@ -8461,7 +8457,12 @@ var Input = _styledcomponents2.default.input`
   if (!$suggestBoolean) return "#FF0000";
   return $focusedLabelColor;
 }};
-    background-color: ${(props) => props.$primary || "#FFFFFF"};
+    transform: translate(0%, -50%) scale(0.8);
+    background: linear-gradient(to bottom, transparent 50%, white 0%);
+  }
+
+  &:not(:focus) + ${Label} {
+    color: ${(props) => props.$defaultLabelColor || "#ccc"};
   }
 `;
 var DropDownList = _styledcomponents2.default.ul`
@@ -8478,8 +8479,9 @@ var DropDownList = _styledcomponents2.default.ul`
   max-height: 390px; //neccesary for limiting scroll options, limit to 10 per view
 `;
 var ActiveListItem = _styledcomponents2.default.li`
+  position: relative;
+  z-index: 9999;
   padding: 10px;
-  cursor: pointer;
   border-radius: 8px;
   background-color: ${(props) => props.$highlighted ? "#eee" : "white"};
   cursor: pointer;
@@ -8493,6 +8495,8 @@ var ActiveListItem = _styledcomponents2.default.li`
   }
 `;
 var NoHoverListItem = _styledcomponents2.default.li`
+  position: relative;
+  z-index: 9999;
   padding: 10px;
   cursor: pointer;
   background-color: white;
@@ -8518,7 +8522,8 @@ var WLAutoComplete = ({
   autoBackGroundColor,
   labelColor,
   FocusedlabelColor,
-  id
+  id,
+  name
 }) => {
   const inputRef = _react.useRef.call(void 0, null);
   const listRef = _react.useRef.call(void 0, null);
@@ -8605,12 +8610,13 @@ var WLAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { id: idName, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, OuterContainer, { id: `${idName}-outercontain`, $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AutoContainer, { id: `${idName}-autocontain`, $primary: autoBackGroundColor, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputWrapper, { id: `${idName}-inputwrapper`, $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, OuterContainer, { id: `${idName}-outercontain`, $primary: autoBackGroundColor, $inputheight: height2, $inputwidth: width2, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, AutoContainer, { id: `${idName}-autocontain`, $primary: autoBackGroundColor, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputWrapper, { id: `${idName}-inputwrapper`, $inputheight: height2, $inputwidth: width2, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Input,
         {
-          id: `${idName}-input`,
+          id: idName,
+          name,
           "data-testid": "InputSearchBar",
           type: "text",
           $primary: autoBackGroundColor,
@@ -8619,16 +8625,18 @@ var WLAutoComplete = ({
           $suggestBoolean: suggestHasItems,
           $dropDownVisible: isDropdownVisible,
           $focusedLabelColor: FocusedlabelColor,
+          $defaultLabelColor: labelColor,
           value: inputValue,
           ref: inputRef,
           onClick: handleInputClick,
           onInput: handleChange,
           onKeyDown: handleKeyDown,
           onBlur: handleBlur,
-          placeholder: ""
+          placeholder: "",
+          autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { id: `${idName}-label`, $primary: labelColor, children: floatLabel })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
     ] }),
     isDropdownVisible && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropDownList, { id: `${idName}-droplist`, ref: listRef, $inputwidth: width2, "data-testid": "InputSearchOptionsList", children: suggestHasItems ? (
       //suggestions length controls showing the suggestions
@@ -8646,7 +8654,7 @@ var WLAutoComplete = ({
         `ActivelistItem-${item}-${index}`
       ))
     ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, NoHoverListItem, { "data-testid": "NoOptionsListitem", ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
-  ] }) }) }) });
+  ] }) }) });
 };
 
 // src/components/inputs/WavelengthInputDatePicketer.tsx