@rolster/react-components 1.4.1 → 1.5.0

package/dist/cjs/assets/{lib.cjs-7a1f29f4.css → lib.cjs-a7ae2768.css}

@@ -1679,12 +1679,13 @@
 
 .rls-date-picker {
   position: relative;
-  float: left;
-  max-width: 18.75rem;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
+  max-width: 18.75rem;
 }
 .rls-date-picker__header {
-  background: var(--color-xofttion-100);
+  background: var(--color-rolster-100);
   padding: var(--sizing-8);
   box-sizing: border-box;
   margin-bottom: var(--sizing-16);
@@ -1696,7 +1697,7 @@
   font-weight: var(--font-weight-bold);
 }
 .rls-date-picker__title:hover {
-  color: var(--color-xofttion-500);
+  color: var(--color-rolster-500);
 }
 .rls-date-picker__title--description {
   height: var(--sizing-32);
@@ -1712,6 +1713,7 @@
 }
 .rls-date-picker__component {
   display: flex;
+  width: 18.75rem;
   padding: 0rem var(--sizing-4);
   box-sizing: border-box;
   margin-bottom: var(--sizing-8);
@@ -1733,20 +1735,20 @@
   display: none;
 }
 .rls-date-picker__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sizing-8);
   padding: var(--sizing-8) var(--sizing-16) var(--sizing-12) var(--sizing-16);
   overflow: hidden;
   box-sizing: border-box;
 }
 .rls-date-picker__actions--cancel {
   width: calc(50% - var(--sizing-4));
-  margin-right: var(--sizing-4);
 }
 .rls-date-picker__actions--today {
   width: calc(50% - var(--sizing-4));
-  margin-left: var(--sizing-4);
 }
 .rls-date-picker__actions--ok {
-  margin-top: var(--sizing-8);
   width: 100%;
 }
 .rls-date-picker__actions button {
@@ -1814,7 +1816,7 @@
 }
 
 .rls-date-field {
-  --rls-input-parent-padding: var(--sizing-6) var(--sizing-8);
+  --rls-boxfield-body-padding: var(--sizing-6) var(--sizing-8);
   position: relative;
   float: left;
   width: 100%;

package/dist/cjs/lib.cjs.js

@@ -1409,7 +1409,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] = require$$0.useState(false);
     function onChange(event) {
         switch (type) {
@@ -1423,6 +1423,9 @@ function RlsInput({ children, defaultValue, disabled, formControl, placeholder,
     }
     function setState(value) {
         formControl?.setState(value);
+        if (onValue) {
+            onValue(value);
+        }
     }
     function onFocus() {
         formControl?.setActive(true);
@@ -1439,30 +1442,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] = require$$0.useState(defaultValue || 0);
     require$$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] = require$$0.useState(defaultValue || 0);
     require$$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] = require$$0.useState(false);
     function onChange(event) {
         formControl?.setState(event.target.value);
+        if (onValue) {
+            onValue(event.target.value);
+        }
     }
     function onFocus() {
         setActive(true);
@@ -1479,14 +1501,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] = require$$0.useState(defaultValue || '');
     require$$0.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 }) {
@@ -2637,7 +2667,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] = require$$0.useState('');
     const [coincidences, setCoincidences] = require$$0.useState([]);
     const [store, setStore] = require$$0.useState({
@@ -2703,12 +2733,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':
@@ -2723,11 +2753,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) {
@@ -2785,7 +2820,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 }) {
@@ -3114,7 +3149,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] = require$$0.useState(false);
     require$$0.useEffect(() => {
@@ -3163,12 +3198,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':
@@ -3183,18 +3218,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;