@rolster/react-components 18.23.9 → 18.23.10

package/dist/cjs/assets/{index-SyKruNt7.css → index-C_p5wY7X.css}

@@ -705,6 +705,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 +1257,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/cjs/index.js

@@ -1565,6 +1565,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] = require$$0.useState(formControl?.value ?? value ?? 0);
+    const onValueInput = require$$0.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] = require$$0.useState('');
     const onValue = require$$0.useCallback((value) => {
@@ -1862,6 +1872,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 = require$$0.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 }) }) })] }));
 }
@@ -3759,6 +3787,7 @@ exports.RlsFieldDateRange = RlsFieldDateRange;
 exports.RlsFieldMoney = RlsFieldMoney;
 exports.RlsFieldNumber = RlsFieldNumber;
 exports.RlsFieldPassword = RlsFieldPassword;
+exports.RlsFieldPercentage = RlsFieldPercentage;
 exports.RlsFieldReadonly = RlsFieldReadonly;
 exports.RlsFieldSelect = RlsFieldSelect;
 exports.RlsFieldSelectTemplate = RlsFieldSelectTemplate;
@@ -3772,6 +3801,7 @@ exports.RlsInput = RlsInput;
 exports.RlsInputMoney = RlsInputMoney;
 exports.RlsInputNumber = RlsInputNumber;
 exports.RlsInputPassword = RlsInputPassword;
+exports.RlsInputPercentage = RlsInputPercentage;
 exports.RlsInputSearch = RlsInputSearch;
 exports.RlsInputText = RlsInputText;
 exports.RlsLabel = RlsLabel;