@rolster/react-components 18.23.9 → 18.23.11

package/dist/es/assets/{index-SyKruNt7.css → index-9GIW7Ggg.css}

@@ -94,13 +94,20 @@
   width: auto;
   padding: var(--rlc-badge-padding, var(--rls-sizing-x2));
   box-sizing: border-box;
-  font-size: var(--rls-caption-font-size);
-  letter-spacing: var(--rls-caption-letter-spacing);
-  line-height: var(--rls-caption-line-height);
+  font-size: var(--rlc-badge-font-size, var(--rls-caption-font-size));
+  letter-spacing: var(
+    --rlc-badge-letter-spacing,
+    var(--rls-caption-letter-spacing)
+  );
+  line-height: var(--rlc-badge-line-height, var(--rls-caption-line-height));
   color: var(--rls-theme-color-100);
   background: var(--rls-theme-color-500);
   border-radius: var(--rls-sizing-x2);
 }
+.rls-badge--contrast {
+  background: var(--rls-theme-color-100);
+  color: var(--rls-theme-color-700);
+}
 .rls-badge > span {
   font-size: inherit;
   letter-spacing: inherit;
@@ -705,6 +712,12 @@
   opacity: 0.5;
 } /*# sourceMappingURL=InputPassword.css.map */
 
+.rls-input-percentage {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+} /*# sourceMappingURL=InputPercentage.css.map */
+
 .rls-input-search {
   --rlc-input-height: var(--rls-sizing-x14);
   position: relative;
@@ -1251,6 +1264,13 @@
   z-index: 2;
 } /*# sourceMappingURL=FieldPassword.css.map */
 
+.rls-field-percentage {
+  --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+} /*# sourceMappingURL=FieldPercentage.css.map */
+
 .rls-field-readonly {
   --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
   --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));

package/dist/es/index.js

@@ -1393,8 +1393,11 @@ function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
-function RlsBadge({ children, rlsTheme }) {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-badge", "rls-theme": rlsTheme, children: children }));
+function RlsBadge({ children, contrast, rlsTheme }) {
+    const className = useMemo(() => {
+        return renderClassStatus('rls-badge', { contrast });
+    }, [contrast]);
+    return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsBreadcrumbLabel({ label }) {
@@ -1563,6 +1566,16 @@ function RlsInputPassword({ disabled, formControl, identifier, onEnter, onKeyDow
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, children: jsxRuntimeExports.jsx("input", { className: "rls-input-password__component", autoComplete: "off", type: type ?? 'password', placeholder: placeholder, disabled: disabled, readOnly: readOnly, onFocus: _onFocus, onBlur: _onBlur, onChange: _onChange, onKeyDown: _onKeyDown, onKeyUp: _onKeyUp }) }));
 }
 
+function RlsInputPercentage(props) {
+    const { formControl, identifier, onValue, value } = props;
+    const [valueInput, setValueInput] = useState(formControl?.value ?? value ?? 0);
+    const onValueInput = useCallback((value) => {
+        !formControl && setValueInput(value);
+        onValue && onValue(value);
+    }, [formControl, onValue]);
+    return (jsxRuntimeExports.jsx("div", { id: identifier, className: "rls-input-percentage", children: jsxRuntimeExports.jsxs(RlsInput, { ...props, type: "number", value: valueInput, onValue: onValueInput, children: [formControl?.value ?? valueInput, "%"] }) }));
+}
+
 function RlsInputSearch({ formControl, identifier, onEnter, onSearch, placeholder }) {
     const [value, setValue] = useState('');
     const onValue = useCallback((value) => {
@@ -1860,6 +1873,24 @@ function RlsFieldPassword(props) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-box__body", children: [jsxRuntimeExports.jsx(RlsInputPassword, { ...props, type: password ? 'password' : 'text' }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: password ? 'eye' : 'eye-off', onClick: onToggleInput })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
 }
 
+function RlsFieldPercentage(props) {
+    const { children, disabled, formControl, identifier, msgErrorDisabled, rlsTheme } = props;
+    const className = useMemo(() => {
+        const _disabled = formControl?.disabled || disabled;
+        return renderClassStatus('rls-field-box', {
+            focused: formControl?.focused && !_disabled,
+            error: formControl?.wrong,
+            disabled: _disabled
+        }, 'rls-field-percentage');
+    }, [
+        formControl?.focused,
+        formControl?.wrong,
+        formControl?.disabled,
+        disabled
+    ]);
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx(RlsInputPercentage, { ...props }) }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }));
+}
+
 function RlsFieldReadonly({ children, identifier, rlsTheme, value }) {
     return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-readonly rls-field-box", "rls-theme": rlsTheme, children: [children && jsxRuntimeExports.jsx("label", { className: "rls-field-box__label", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-field-box__component", children: jsxRuntimeExports.jsx("div", { className: "rls-field-box__body", children: jsxRuntimeExports.jsx("input", { className: "rls-input__component", autoComplete: "off", type: 'text', readOnly: true, value: value }) }) })] }));
 }
@@ -2692,7 +2723,7 @@ function useFieldAutocomplete(props) {
         else {
             controller.setFormValue(element);
         }
-        if (props.selectionContinuos) {
+        if (props.keepOpen) {
             setPattern('');
             controller.refInput?.current?.focus();
         }
@@ -2704,7 +2735,7 @@ function useFieldAutocomplete(props) {
         controller.setState,
         controller.setFormValue,
         setPattern,
-        props.selectionContinuos,
+        props.keepOpen,
         props.onSelect,
         props.onValue
     ]);
@@ -3724,5 +3755,5 @@ function useDatatable() {
     return { scrolleable, tableRef };
 }
 
-export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useImageEditorController, useListController, useRelocationOnComponent, useResize, useSnackbar };
+export { ConfirmationResult, RlsAlert, RlsAmount, RlsApplication, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonProgress, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableFloating, RlsDatatableHeader, RlsDatatableRecord, RlsDatatableSubheader, RlsDatatableTitle, RlsDatatableTotals, RlsFieldAutocomplete, RlsFieldAutocompleteTemplate, RlsFieldDate, RlsFieldDateRange, RlsFieldMoney, RlsFieldNumber, RlsFieldPassword, RlsFieldPercentage, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, RlsImage, RlsImageChooser, RlsImageEditor, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputPercentage, RlsInputSearch, RlsInputText, RlsLabel, RlsLabelCheckBox, RlsLabelRadioButton, RlsLabelSwitch, RlsMessageFormError, RlsMessageIcon, RlsModal, RlsPagination, RlsPickerDate, RlsPickerDateRange, RlsPickerDay, RlsPickerDayRange, RlsPickerMonth, RlsPickerSelectorTitle, RlsPickerYear, RlsPoster, RlsProgressBar, RlsProgressCircular, RlsRadioButton, RlsSkeleton, RlsSkeletonText, RlsSlider, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, calculateImgDimension, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useImageEditorController, useListController, useRelocationOnComponent, useResize, useSnackbar };
 //# sourceMappingURL=index.js.map