@rolster/react-components 18.14.0 → 18.14.1

package/dist/es/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, createContext } from 'react';
 import { currencyFormat, itIsDefined, PartialSealed } from '@rolster/helpers-advanced';
 import { hasPattern } from '@rolster/helpers-string';
@@ -247,12 +247,16 @@ function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsThem
                 }), children: jsx("ul", { children: options.map((action, index) => (jsx("li", { className: "truncate", onClick: () => onSelectAction(action), children: action.label }, index))) }) })] }));
 }
 
+function RlsMessageFormError({ className, formControl }) {
+    return (jsx(Fragment, { children: formControl?.wrong && (jsx("div", { className: className, children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl?.error?.message }) })) }));
+}
+
 function RlsFieldMoney({ children, decimals, disabled, formControl, placeholder, symbol, rlsTheme, value, onValue }) {
     return (jsxs("div", { className: renderClassStatus('rls-field-box', {
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-money'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsx("div", { className: "rls-field-box__body", children: jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-field-box__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+        }, 'rls-field-money'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsx("div", { className: "rls-field-box__body", children: jsx(RlsInputMoney, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, symbol: symbol, decimals: decimals, onValue: onValue }) }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
 }
 
 function RlsFieldNumber({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
@@ -260,7 +264,7 @@ function RlsFieldNumber({ children, disabled, formControl, placeholder, rlsTheme
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-number'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsx("div", { className: "rls-field-box__body", children: jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-field-box__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+        }, 'rls-field-number'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsx("div", { className: "rls-field-box__body", children: jsx(RlsInputNumber, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
 }
 
 function RlsFieldPassword({ children, disabled, formControl, placeholder, rlsTheme }) {
@@ -272,7 +276,7 @@ function RlsFieldPassword({ children, disabled, formControl, placeholder, rlsThe
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-password'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-field-box__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+        }, 'rls-field-password'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx(RlsInputPassword, { formControl: formControl, disabled: disabled, placeholder: placeholder, type: password ? 'password' : 'text' }), jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
 }
 
 function RlsFieldText({ children, disabled, formControl, placeholder, rlsTheme, value, onValue }) {
@@ -280,7 +284,7 @@ function RlsFieldText({ children, disabled, formControl, placeholder, rlsTheme,
             focused: formControl?.focused,
             error: formControl?.wrong,
             disabled: formControl?.disabled || disabled
-        }, 'rls-field-text'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsx("div", { className: "rls-field-box__body", children: jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-field-box__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }));
+        }, 'rls-field-text'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsx("div", { className: "rls-field-box__body", children: jsx(RlsInputText, { formControl: formControl, value: value, disabled: disabled, placeholder: placeholder, onValue: onValue }) }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }));
 }
 
 function RlsLabelCheckBox({ children, disabled, extended, formControl, rlsTheme }) {
@@ -1595,7 +1599,7 @@ function RlsFieldAutocompleteTemplate({ suggestions, children, disabled, formCon
             disabled,
             focused: listControl.focused,
             selected: !!listControl.value
-        }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx("label", { className: "rls-field-list__control", onClick: onClickControl, children: listControl.value ? (jsx("span", { className: "rls-field-list__control__description", children: listControl.value })) : (jsx("span", { className: "rls-field-list__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "trash-2" }) }))] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-field-box__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) })), jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+        }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx("label", { className: "rls-field-list__control", onClick: onClickControl, children: listControl.value ? (jsx("span", { className: "rls-field-list__control__description", children: listControl.value })) : (jsx("span", { className: "rls-field-list__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "trash-2" }) }))] }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: listControl.visible,
                     hide: !listControl.visible,
                     higher: listControl.higher
@@ -1615,6 +1619,10 @@ function rangeFormatTemplate({ maxDate, minDate }) {
     return `${minFormat} - ${maxFormat}`;
 }
 
+function RlsModal({ children, visible, rlsTheme }) {
+    return ReactDOM.createPortal(jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-modal__component", children: children }), jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
+}
+
 const controlIsValid = (props) => {
     const { state, validators } = props;
     return validators.reduce((errors, validator) => {
@@ -1780,10 +1788,6 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
                 }), children: [jsx(RlsPickerDay, { formControl: dayControl, date: dateInitial, month: monthControl.state, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsx(RlsPickerMonth, { formControl: monthControl, date: dateInitial, year: yearControl.state, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsx(RlsPickerYear, { formControl: yearControl, date: dateInitial, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsx("div", { className: renderClassStatus('rls-picker-date__footer', { automatic }), children: jsxs("div", { className: "rls-picker-date__actions", children: [jsx("div", { className: "rls-picker-date__actions--cancel", children: jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), jsx("div", { className: "rls-picker-date__actions--today", children: jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: dateOutRange({ date: today, maxDate, minDate }), children: reactI18n('dateActionToday') }) }), jsx("div", { className: "rls-picker-date__actions--ok", children: jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
 }
 
-function RlsModal({ children, visible, rlsTheme }) {
-    return ReactDOM.createPortal(jsxs("div", { className: renderClassStatus('rls-modal', { visible }), "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-modal__component", children: children }), jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
-}
-
 function RlsFieldDate({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }) {
     const today = new Date(); // Initial current date in component
     const [value, setValue] = useState();
@@ -1820,7 +1824,7 @@ function RlsFieldDate({ children, date, disabled, formControl, maxDate, minDate,
             setModalIsVisible(true);
         }
     }
-    return (jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx("input", { className: "rls-field-date__control", type: "text", value: value ? dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-field-date__action", onClick: onClean, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-field-box__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
+    return (jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx("input", { className: "rls-field-date__control", type: "text", value: value ? dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-field-date__action", onClick: onClean, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
                         if (type !== PickerListenerType.Cancel) {
                             onChange(value, true);
                         }
@@ -1906,7 +1910,7 @@ function RlsFieldDateRange({ children, date: datePicker, disabled, formControl,
             setModalIsVisible(true);
         }
     }
-    return (jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+    return (jsxs("div", { className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx("input", { className: "rls-field-date-range__control", type: "text", value: value ? rangeFormatTemplate(value) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
                         if (value) {
                             setValue(value);
                         }
@@ -2035,7 +2039,7 @@ function RlsFieldSelectTemplate({ suggestions, children, disabled, formControl,
     });
     return (jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-field-box', { focused: listControl.focused, disabled }, 'rls-field-list rls-field-select'), "rls-theme": rlsTheme, children: [children && jsx("label", { className: "rls-field-box__label", children: children }), jsx("div", { className: "rls-field-box__component", children: jsxs("div", { className: "rls-field-box__body", children: [jsx("input", { ref: listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: listControl.value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), jsx("button", { className: renderClassStatus('rls-field-list__action', {
                                 visible: listControl.visible
-                            }), disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), formControl?.wrong && (jsx("div", { className: "rls-field-box__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl?.error?.message }) })), jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
+                            }), disabled: disabled, onClick: onClickAction, children: jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
                     visible: listControl.visible,
                     hide: !listControl.visible,
                     higher: listControl.higher
@@ -2110,5 +2114,5 @@ function RlsApplication({ children }) {
     return (jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
 }
 
-export { ConfirmationResult, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableInfo, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSearchInput, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
+export { ConfirmationResult, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableInfo, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSearchInput, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
 //# sourceMappingURL=index.js.map