@rolster/react-components 1.4.2 → 1.5.0

package/dist/es/lib.js

@@ -1407,7 +1407,7 @@ function RlsCheckBox({ checked, disabled, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-checkbox', { checked, disabled }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-checkbox__component" }) }));
 }
 
-function RlsInput({ children, defaultValue, disabled, formControl, placeholder, type }) {
+function RlsInput({ children, defaultValue, disabled, formControl, onValue, placeholder, type }) {
     const [active, setActive] = useState(false);
     function onChange(event) {
         switch (type) {
@@ -1421,6 +1421,9 @@ function RlsInput({ children, defaultValue, disabled, formControl, placeholder,
     }
     function setState(value) {
         formControl?.setState(value);
+        if (onValue) {
+            onValue(value);
+        }
     }
     function onFocus() {
         formControl?.setActive(true);
@@ -1437,30 +1440,49 @@ function RlsInput({ children, defaultValue, disabled, formControl, placeholder,
         }), children: [jsxRuntimeExports.jsx("input", { ref: formControl?.elementRef, className: "rls-input__component", autoComplete: "off", type: type || 'text', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange, value: formControl?.state || defaultValue || '' }), jsxRuntimeExports.jsx("span", { className: "rls-input__value", children: children })] }));
 }
 
-function RlsInputMoney({ decimals, defaultValue, disabled, formControl, placeholder, symbol }) {
+function RlsInputMoney({ decimals, defaultValue, disabled, formControl, onValue, placeholder, symbol }) {
     const [value, setValue] = useState(defaultValue || 0);
     useEffect(() => {
         formControl?.subscribe((value) => {
             setValue(value || 0);
         });
     }, []);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", disabled: disabled, placeholder: placeholder, defaultValue: defaultValue, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.state || value, symbol: symbol, decimals: decimals }) }) }));
+    function onMoney(value) {
+        if (!formControl) {
+            setValue(value);
+        }
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    return (jsxRuntimeExports.jsx("div", { className: "rls-input-money", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", disabled: disabled, placeholder: placeholder, defaultValue: defaultValue, onValue: onMoney, children: jsxRuntimeExports.jsx(RlsAmount, { value: formControl?.state || value, symbol: symbol, decimals: decimals }) }) }));
 }
 
-function RlsInputNumber({ disabled, defaultValue, formControl, placeholder }) {
+function RlsInputNumber({ disabled, defaultValue, formControl, onValue, placeholder }) {
     const [value, setValue] = useState(defaultValue || 0);
     useEffect(() => {
         formControl?.subscribe((value) => {
             setValue(value || 0);
         });
     }, []);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", disabled: disabled, placeholder: placeholder, children: formControl?.state || value }) }));
+    function onNumber(value) {
+        if (!formControl) {
+            setValue(value);
+        }
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    return (jsxRuntimeExports.jsx("div", { className: "rls-input-number", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "number", disabled: disabled, placeholder: placeholder, onValue: onNumber, children: formControl?.state || value }) }));
 }
 
-function RlsInputPassword({ disabled, formControl, placeholder, type }) {
+function RlsInputPassword({ disabled, formControl, onValue, placeholder, type }) {
     const [active, setActive] = useState(false);
     function onChange(event) {
         formControl?.setState(event.target.value);
+        if (onValue) {
+            onValue(event.target.value);
+        }
     }
     function onFocus() {
         setActive(true);
@@ -1477,14 +1499,22 @@ function RlsInputPassword({ disabled, formControl, placeholder, type }) {
         }), children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type || 'password', placeholder: placeholder, disabled: disabled, onFocus: onFocus, onBlur: onBlur, onChange: onChange }) }));
 }
 
-function RlsInputText({ defaultValue, disabled, formControl, placeholder }) {
+function RlsInputText({ defaultValue, disabled, formControl, onValue, placeholder }) {
     const [value, setValue] = useState(defaultValue || '');
     useEffect(() => {
         formControl?.subscribe((value) => {
             setValue(value || '');
         });
     }, []);
-    return (jsxRuntimeExports.jsx("div", { className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", disabled: disabled, placeholder: placeholder, children: formControl?.state || value }) }));
+    function onText(value) {
+        if (!formControl) {
+            setValue(value);
+        }
+        if (onValue) {
+            onValue(value);
+        }
+    }
+    return (jsxRuntimeExports.jsx("div", { className: "rls-input-text", children: jsxRuntimeExports.jsx(RlsInput, { formControl: formControl, type: "text", disabled: disabled, placeholder: placeholder, onValue: onText, children: formControl?.state || value }) }));
 }
 
 function RlsPoster({ children, rlsTheme }) {
@@ -2635,7 +2665,7 @@ function useListControl(suggestions, ignoreHigher = false) {
 
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
-function RlsAutocompleteField({ suggestions, children, disabled, formControl, placeholder, searching, rlsTheme, onSearch }) {
+function RlsAutocompleteField({ suggestions, children, disabled, formControl, onSearch, onSelect, placeholder, searching, rlsTheme }) {
     const [pattern, setPattern] = useState('');
     const [coincidences, setCoincidences] = useState([]);
     const [store, setStore] = useState({
@@ -2701,12 +2731,12 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, pl
     function onClickBackdrop() {
         setVisible(false);
     }
-    function onClickElement(element) {
+    function onClickItem(element) {
         return () => {
             onChange(element);
         };
     }
-    function onKeydownElement(element) {
+    function onKeydownItem(element) {
         return (event) => {
             switch (event.code) {
                 case 'Enter':
@@ -2721,11 +2751,16 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, pl
     function onChange(element) {
         const { description, value } = element;
         setVisible(false);
-        if (formControl) {
-            setChangeInternal(true);
-            formControl.setState(value);
+        if (onSelect) {
+            onSelect(value);
+        }
+        else {
+            if (formControl) {
+                setChangeInternal(true);
+                formControl.setState(value);
+            }
+            setValue(description);
         }
-        setValue(description);
     }
     function filterSuggestions(pattern, reboot = false) {
         if (pattern) {
@@ -2783,7 +2818,7 @@ function RlsAutocompleteField({ suggestions, children, disabled, formControl, pl
                                             setPattern(value);
                                         }, disabled: disabled || searching, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown: onKeydownInput }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: () => {
                                             onSearch(pattern);
-                                        }, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title }) }, index))), !coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-list-field__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-list-field__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "label-bold truncate", children: "Selecci\u00F3n no disponible" }), jsxRuntimeExports.jsx("label", { className: "caption-regular", children: "Lo sentimos, en el momento no hay elementos en el listado" })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+                                        }, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickItem(element), onKeyDown: onKeydownItem(element), children: jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title }) }, index))), !coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-list-field__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-list-field__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "label-bold truncate", children: "Selecci\u00F3n no disponible" }), jsxRuntimeExports.jsx("label", { className: "caption-regular", children: "Lo sentimos, en el momento no hay elementos en el listado" })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
 }
 
 function RlsCard({ children, rlsTheme }) {
@@ -3112,7 +3147,7 @@ function RlsFormNavigation({ children, visible, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: renderClassStatus('rls-form-navigation', { visible }), "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
 }
 
-function RlsSelectField({ suggestions, children, disabled, formControl, placeholder, rlsTheme }) {
+function RlsSelectField({ suggestions, children, disabled, formControl, onSelect, placeholder, rlsTheme }) {
     const { active, boxContentRef, higher, inputRef, listRef, suggestionsField, value, visible, setActive, setValue, setVisible, navigationElement, navigationInput } = useListControl(suggestions);
     const [changeInternal, setChangeInternal] = useState(false);
     useEffect(() => {
@@ -3161,12 +3196,12 @@ function RlsSelectField({ suggestions, children, disabled, formControl, placehol
     function onClickBackdrop() {
         setVisible(false);
     }
-    function onClickElement(element) {
+    function onClickItem(element) {
         return () => {
             onChange(element);
         };
     }
-    function onKeydownElement(element) {
+    function onKeydownItem(element) {
         return (event) => {
             switch (event.code) {
                 case 'Enter':
@@ -3181,18 +3216,23 @@ function RlsSelectField({ suggestions, children, disabled, formControl, placehol
     function onChange({ description, value }) {
         inputRef?.current?.focus();
         setVisible(false);
-        if (formControl) {
-            setChangeInternal(true);
-            formControl.setState(value);
+        if (onSelect) {
+            onSelect(value);
+        }
+        else {
+            if (formControl) {
+                setChangeInternal(true);
+                formControl.setState(value);
+            }
+            setValue(description);
         }
-        setValue(description);
     }
     return (jsxRuntimeExports.jsxs("div", { ref: boxContentRef, className: 'rls-select-field rls-list-field ' +
             renderClassStatus('rls-box-field', { active, disabled }), "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-box-field__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-box-field__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-box-field__body", children: [jsxRuntimeExports.jsx("input", { ref: inputRef, className: "rls-list-field__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), jsxRuntimeExports.jsx("button", { className: renderClassStatus('rls-list-field__action', { visible }), disabled: disabled, onClick: onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), jsxRuntimeExports.jsxs("div", { className: renderClassStatus('rls-list-field__suggestions', {
                     visible,
                     hide: !visible,
                     higher
-                }), children: [jsxRuntimeExports.jsxs("ul", { ref: listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title }) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-list-field__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-list-field__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "label-bold truncate", children: "Selecci\u00F3n no disponible" }), jsxRuntimeExports.jsx("label", { className: "caption-regular", children: "Lo sentimos, en el momento no hay elementos en el listado" })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+                }), children: [jsxRuntimeExports.jsxs("ul", { ref: listRef, className: "rls-list-field__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickItem(element), onKeyDown: onKeydownItem(element), children: jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title }) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-list-field__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-list-field__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "label-bold truncate", children: "Selecci\u00F3n no disponible" }), jsxRuntimeExports.jsx("label", { className: "caption-regular", children: "Lo sentimos, en el momento no hay elementos en el listado" })] }) }))] }), jsxRuntimeExports.jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
 }
 
 const DURATION_ANIMATION = 240;