@wavelengthusaf/components 3.3.6 → 3.3.8

package/README.md

@@ -14,6 +14,16 @@ npm install @wavelengthusaf/components
 
 ## Release Notes
 
+### 3.3.8
+
+- 8/11/2025
+- Updated `WlAutoComplete` and `WlDatePicker` to have the same outline styling, removal of `position: absolute` in components and reordering of css behavior. Both components contain an optional `OnDataChange` prop and the storybook documentation has been updated.
+
+### 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
@@ -32,7 +42,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
 
@@ -42,7 +52,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
 
@@ -62,7 +72,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);
 }
@@ -8397,16 +8396,6 @@ var NestedDataTable = ({ data, columns }) => {
 
 
 
-var OuterContainer = _styledcomponents2.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 5px;
-`;
-var AutoContainer = _styledcomponents2.default.div`
-  position: absolute;
-  border-radius: 6px;
-`;
 var InputWrapper = _styledcomponents2.default.div`
   position: relative;
   width: ${(props) => props.$inputwidth || "320px"};
@@ -8459,7 +8448,7 @@ var Input = _styledcomponents2.default.input`
   return $focusedLabelColor;
 }};
     transform: translate(0%, -50%) scale(0.8);
-    background: linear-gradient(to bottom, transparent 50%, white 0%);
+    background: linear-gradient(to bottom, transparent 50%, ${(props) => props.$primary !== null ? props.$primary : "#FFFFFF"} 0%);
   }
 
   &:not(:focus) + ${Label} {
@@ -8468,6 +8457,7 @@ var Input = _styledcomponents2.default.input`
 `;
 var DropDownList = _styledcomponents2.default.ul`
   position: absolute;
+  z-index: 5;
   width: ${(props) => props.$inputwidth || "320px"};
   background-color: white;
   border: 1px solid #ccc;
@@ -8589,7 +8579,7 @@ var WLAutoComplete = ({
           setIsDropdownVisible(false);
         } else {
           if (data.includes(inputValue)) {
-            onDataChange(inputValue);
+            if (onDataChange !== void 0) onDataChange(inputValue);
           } else {
             handleBlur;
           }
@@ -8611,7 +8601,7 @@ var WLAutoComplete = ({
         break;
     }
   };
-  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: [
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, InputWrapper, { id: `${idName}-inputwrapper`, $inputheight: height2, $inputwidth: width2, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         Input,
@@ -8655,7 +8645,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
@@ -8708,65 +8698,75 @@ var WLInputDatePicker2 = () => {
 
 
 
-var FloatLabel = _styledcomponents2.default.label`
+var Label2 = _styledcomponents2.default.label`
   position: absolute;
   top: 50%;
-  left: 20%;
-  transform: translate(-50%, -50%);
-  z-index: 99;
-  transition: all 0.2s ease-in-out;
+  left: 10px;
+  transform: translateY(-50%);
+  font-size: 16px;
   pointer-events: none;
-  padding-left: 4px;
-  padding-right: 4px;
-
-  &:active {
-    transform: translateY(-100%) scale(0.75);
-  }
+  transition: 0.3s ease all;
+  z-index: 999;
+  padding: 0 5px;
+  background-color: transparent;
 `;
-var FloatLabelContainer = _styledcomponents2.default.div`
-  position: absolute;
-  height: ${(props) => props.$height !== null ? props.$height : "40px"};
-  width: ${(props) => props.$width !== null ? props.$width : "150px"};
-  border: 10px solid ${(props) => props.$inputBackground !== null && props.$inputBackground !== void 0 && props.$inputBackground !== "" ? props.$inputBackground : "#FFFFFF"};
-  border-radius: 4px;
-  background-color: ${(props) => props.$inputBackground !== null && props.$inputBackground !== void 0 && props.$inputBackground !== "" ? props.$inputBackground : "#FFFFFF"};
-  color: ${(props) => props.$labelColor !== null && props.$labelColor !== void 0 && props.$labelColor !== "" ? props.$labelColor : "#000000"};
-  align-items: center;
+var InputWrapper2 = _styledcomponents2.default.div`
+  position: relative;
+  width: ${(props) => props.$inputwidth || "320px"};
+  height: ${(props) => props.$inputheight || "51px"};
 
   input {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    padding: 10px;
-    border: 1px solid ${(props) => props.$borderInpCol !== null && props.$borderInpCol !== void 0 && props.$borderInpCol !== "" ? props.$borderInpCol : "#ccc"};
+    width: inherit;
+    height: inherit;
+    padding: 0.5rem 0.75rem;
+    border: ${(props) => props.$inputBorderStyling || "2px solid #ccc"}; //works
     border-radius: 4px;
-    outline: none;
+    box-sizing: border-box;
     z-index: 1;
-    background-color: ${(props) => props.$inputBackground !== null && props.$inputBackground !== void 0 && props.$inputBackground !== "" ? props.$inputBackground : "#FFFFFF"};
+    background-color: ${(props) => props.$inputBackGroundColor !== null ? props.$inputBackGroundColor : "#FFFFFF"}; //this works
 
     &:focus {
-      border: 1px solid ${(props) => props.$focusBordCol !== null && props.$focusBordCol !== void 0 && props.$focusBordCol !== "" ? props.$focusBordCol : "#CCFFFF"};
+      border-color: ${(props) => props.$inputFocusBorderColor !== null ? props.$inputFocusBorderColor : "#4a90e2"};
+      outline: none;
+      background-color: ${(props) => props.$inputBackGroundColor !== null ? props.$inputBackGroundColor : "#FFFFFF"};
     }
 
-    &::-webkit-calendar-picker-indicator {
-      background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2221%22%20viewBox%3D%220%200%2018%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M11.5%2016.5C10.8%2016.5%2010.2083%2016.2583%209.725%2015.775C9.24167%2015.2917%209%2014.7%209%2014C9%2013.3%209.24167%2012.7083%209.725%2012.225C10.2083%2011.7417%2010.8%2011.5%2011.5%2011.5C12.2%2011.5%2012.7917%2011.7417%2013.275%2012.225C13.7583%2012.7083%2014%2013.3%2014%2014C14%2014.7%2013.7583%2015.2917%2013.275%2015.775C12.7917%2016.2583%2012.2%2016.5%2011.5%2016.5ZM2%2020.5C1.45%2020.5%200.979167%2020.3042%200.5875%2019.9125C0.195833%2019.5208%200%2019.05%200%2018.5V4.5C0%203.95%200.195833%203.47917%200.5875%203.0875C0.979167%202.69583%201.45%202.5%202%202.5H3V0.5H5V2.5H13V0.5H15V2.5H16C16.55%202.5%2017.0208%202.69583%2017.4125%203.0875C17.8042%203.47917%2018%203.95%2018%204.5V18.5C18%2019.05%2017.8042%2019.5208%2017.4125%2019.9125C17.0208%2020.3042%2016.55%2020.5%2016%2020.5H2ZM2%2018.5H16V8.5H2V18.5ZM2%206.5H16V4.5H2V6.5Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E%0A");
-      cursor: pointer;
+    &:focus + ${Label2}, &:not(:placeholder-shown) + ${Label2} {
+      top: 0;
+      left: 10px;
+
+      padding: 0 5px;
+      color: ${(props) => props.$FocusLabelColor || "#4a90e2"};
+      transform: translate(0%, -50%) scale(0.8);
+      background: linear-gradient(to bottom, transparent 50%, ${(props) => props.$inputBackGroundColor !== null ? props.$inputBackGroundColor : "#FFFFFF"} 0%);
     }
-  }
 
-  input:focus + ${FloatLabel}, input:not(:placeholder-shown) + ${FloatLabel} {
-    top: 0%;
-    left: 20%;
-    transform: translate(-50%, -50%) scale(0.75);
-    color: ${(props) => props.$focuslabel !== null && props.$focuslabel !== void 0 && props.$focuslabel !== "" ? props.$focuslabel : "#0047AB"}; /* Example active color */
-    background-color: ${(props) => props.$inputBackground !== null && props.$inputBackground !== void 0 && props.$inputBackground !== "" ? props.$inputBackground : "#FFFFFF"};
+    &:not(:focus) + ${Label2} {
+      color: ${(props) => props.$labelColor || "#ccc"};
+    }
   }
 `;
-var WLDatePicker = ({ labelVariant, labelColor, borderColor: borderColor2, FocusBorderColor, FocusLabelColor, backgroundColor: backgroundColor2, height: height2, width: width2, min, max, inputTimeType, OnDataChange }) => {
+var WLDatePicker = ({
+  id,
+  name,
+  inputBorderStyle,
+  floatLabel,
+  labelColor,
+  inputFocusBorderColor,
+  FocusLabelColor,
+  backgroundColor: backgroundColor2,
+  height: height2,
+  width: width2,
+  min,
+  max,
+  inputTimeType,
+  OnDataChange
+}) => {
   const [inputType, setInputType] = _react.useState.call(void 0, "");
   const [value, setValue] = _react.useState.call(void 0, "");
   const [minAdjusted, setMinAdjusted] = _react.useState.call(void 0, "");
   const [maxAdjusted, setMaxAdjusted] = _react.useState.call(void 0, "");
+  const idName = id ? id : "WlDatePick";
   _react.useEffect.call(void 0, () => {
     const minDate = new Date(min || "");
     const maxDate = new Date(max || "");
@@ -8804,24 +8804,26 @@ var WLDatePicker = ({ labelVariant, labelColor, borderColor: borderColor2, Focus
   const handleChange = (e) => {
     const dateString = e.target.value;
     setValue(dateString);
-    OnDataChange(new Date(dateString));
+    if (OnDataChange !== void 0) OnDataChange(new Date(dateString));
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    FloatLabelContainer,
+    InputWrapper2,
     {
-      $height: height2,
-      $width: width2,
+      id: `${idName}-inputWrapper`,
+      $inputBorderStyling: inputBorderStyle,
+      $inputwidth: width2,
+      $inputheight: height2,
+      $inputFocusBorderColor: inputFocusBorderColor,
       $labelColor: labelColor,
-      $borderInpCol: borderColor2,
-      $focusBordCol: FocusBorderColor,
-      $inputBackground: backgroundColor2,
-      $focuslabel: FocusLabelColor,
+      $FocusLabelColor: FocusLabelColor,
+      $inputBackGroundColor: backgroundColor2,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
             type: inputType,
-            id: "Wl_date_picker_input",
+            id: idName,
+            name,
             "data-testid": "my_wl_date_input",
             onFocus: handleFocus,
             onBlur: handleBlur,
@@ -8832,7 +8834,7 @@ var WLDatePicker = ({ labelVariant, labelColor, borderColor: borderColor2, Focus
             max: maxAdjusted
           }
         ),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FloatLabel, { $height: height2, $width: width2, htmlFor: "Wl_date_picker_input", children: labelVariant })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
       ]
     }
   );