@stella-source/stellasource-dsl 5.1.1 → 5.2.0

package/dist/cjs/index.js

@@ -18177,12 +18177,24 @@ const IconButton = a$n.forwardRef(({ iconName, onClick, disabled, variant = "pri
 
 const Wrapper = styled.div `
   display: flex;
-  flex-direction: column;
+  flex-direction: ${({ $labelPosition }) => $labelPosition === "left" ? "row" : "column"};
+  align-items: ${({ $labelPosition }) => $labelPosition === "left" ? "flex-start" : "stretch"};
+  gap: ${({ $labelPosition }) => ($labelPosition === "left" ? "10px" : "0")};
   min-width: 60px;
   max-width: 400px;
   position: relative;
   width: 100%;
 `;
+const InputColumn = styled.div `
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+const LabelAligner = styled.div `
+  height: 32px;
+  display: flex;
+  align-items: center;
+`;
 const TextFieldWrapper = styled.div.attrs({
     className: "DSL-stella-textfield",
 }) `
@@ -18194,7 +18206,7 @@ const TextFieldWrapper = styled.div.attrs({
   border: 1px solid ${Styles.color.grey.medium};
   border-radius: 6px;
   overflow: hidden;
-  margin-top: 3px;
+  margin-top: ${({ $labelPosition }) => $labelPosition === "left" ? "0" : "3px"};
   background-color: ${({ $isDisabled }) => $isDisabled ? Styles.color.grey.pale : "white"};
   outline: ${({ $hasError }) => $hasError && `${Styles.color.states.error} auto 1px`};
   cursor: ${({ $isDisabled, $isLoading }) => {
@@ -18253,10 +18265,9 @@ const IconContainer = styled.div `
   margin-right: 5px;
 `;
 
-const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout = true, disabled = false, hideLabel = false, isLoading = false, hasError = false, isRequired = false, }) => {
-    return (a$n.createElement(Wrapper, { "data-testid": dataTestId, className: className },
-        a$n.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }),
-        a$n.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "data-testid": "text-input-wrapper" },
+const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, className, rightCategory, leftCategory, helperText, dataTestId, helperTextAffectLayout = true, disabled = false, hideLabel = false, isLoading = false, hasError = false, isRequired = false, labelPosition = "top", }) => {
+    const inputAndHelper = (a$n.createElement(a$n.Fragment, null,
+        a$n.createElement(TextFieldWrapper, { id: id, "$hasError": hasError, "$isDisabled": disabled, "$isLoading": isLoading, "$labelPosition": labelPosition, "data-testid": "text-input-wrapper" },
             leftCategory && a$n.createElement(Category, null, leftCategory),
             children,
             isLoading && (a$n.createElement(IconContainer, null,
@@ -18265,9 +18276,13 @@ const TextFieldContainer = ({ id, label, children, tooltipText, endIcon, classNa
                 a$n.createElement(StellaIcon, { dataTestId: "end-icon", iconName: endIcon }))),
             rightCategory && a$n.createElement(Category, null, rightCategory)),
         helperText && (a$n.createElement(HelperText, { id: `${id}-helper-text`, text: helperText, affectLayout: helperTextAffectLayout, type: hasError ? "error" : "info" }))));
+    return (a$n.createElement(Wrapper, { "data-testid": dataTestId, className: className, "$labelPosition": labelPosition },
+        labelPosition === "left" ? (a$n.createElement(LabelAligner, null,
+            a$n.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` }))) : (a$n.createElement(Label, { tooltipText: tooltipText, required: isRequired, labelValue: label, hideLabel: hideLabel, id: `${id}-label`, htmlFor: `${id}-text-field` })),
+        labelPosition === "left" ? (a$n.createElement(InputColumn, null, inputAndHelper)) : (inputAndHelper)));
 };
 
-const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "", textAlign = "left", helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, isLoading = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "", textAlign = "left", helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, isLoading = false, ariaDescribedBy, enableAutocomplete = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18283,6 +18298,7 @@ const TextInput = ({ id, className, htmlProps, label, onChange, onBlur, onFocus,
         endIcon,
         disabled,
         isLoading,
+        labelPosition,
     };
     const [inputValue, setInputValue] = a$n.useState("");
     const valueToUse = value ?? inputValue;
@@ -18299,7 +18315,7 @@ const CustomIconButton$2 = styled(IconButton) `
   margin-right: 2px;
 `;
 
-const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter Password", onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign = "left", isHidden = true, helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, ariaDescribedBy, enableAutocomplete = false, }) => {
+const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter Password", onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, textAlign = "left", isHidden = true, helperTextAffectLayout = true, hideLabel = false, disabled = false, hasError = false, ariaDescribedBy, enableAutocomplete = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18313,6 +18329,7 @@ const PasswordInput = ({ id, className, htmlProps, label, placeholder = "Enter P
         leftCategory: undefined,
         hideLabel,
         disabled,
+        labelPosition,
     };
     const [inputValue, setInputValue] = a$n.useState("");
     const [show, setShow] = a$n.useState(!isHidden);
@@ -18351,7 +18368,7 @@ const formatDynamicNumbersWithCommas = (num, decimalPlaces, isDegrees) => {
         : "";
 };
 
-const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, enableAutocomplete = false, isDegrees = false, }) => {
+const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, label, onChange, onBlur, onFocus, value, isRequired, maxLength, tooltipText, helperText, endIcon, placeholder = "0", textAlign = "left", isTruncated = false, helperTextAffectLayout = true, hideLabel = false, disabled = false, isLoading = false, hasError = false, thousandSeparator = true, decimalPlaces = 0, allowNegativeNumbers = false, ariaDescribedBy, enableAutocomplete = false, isDegrees = false, labelPosition, }) => {
     const containerProps = {
         id,
         label,
@@ -18367,6 +18384,7 @@ const NumberInput = ({ id, className, htmlProps, leftCategory, rightCategory, la
         leftCategory,
         hideLabel,
         disabled,
+        labelPosition,
     };
     const [inputValue, setInputValue] = a$n.useState("");
     const [placeholderText, setPlaceholderText] = a$n.useState(placeholder);