@rolster/react-components 18.24.8 → 18.24.9

package/dist/cjs/assets/{index-BYLoD6-3.css → index-Jhih2qiU.css}

@@ -1337,7 +1337,7 @@
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   line-height: var(--pvt-text-height);
-  color: var(--rls-app-color-600);
+  color: var(--rlc-label-checkbox-font-color, var(--rls-app-color-600));
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1379,7 +1379,7 @@
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   line-height: var(--pvt-text-height);
-  color: var(--rls-app-color-600);
+  color: var(--rlc-label-radiobutton-font-color, var(--rls-app-color-600));
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1421,7 +1421,7 @@
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   line-height: var(--pvt-text-height);
-  color: var(--rls-app-color-600);
+  color: var(--rlc-label-switch-font-color, var(--rls-app-color-600));
   user-select: none;
   opacity: var(--pvt-text-opacity);
 }
@@ -1936,7 +1936,7 @@
 } /*# sourceMappingURL=Toolbar.css.map */
 
 .rls-bottom-sheet {
-  --pvt-component-transform: translateY(150px) scale(0.6);
+  --pvt-component-transform: translateY(100%);
   --pvt-component-height: 0rem;
   --pvt-component-opacity: 0;
   --pvt-component-visibility: hidden;
@@ -1954,7 +1954,7 @@
   --pvt-component-visibility: visible;
   --pvt-component-height: auto;
   --pvt-component-opacity: 1;
-  --pvt-component-transform: translateY(0) scale(1);
+  --pvt-component-transform: translateY(0);
   --pvt-backdrop-bottom: 0rem;
   --pvt-backdrop-opacity: 1;
   visibility: visible;
@@ -1971,9 +1971,9 @@
   border-radius: var(--rls-sizing-x4) var(--rls-sizing-x4) 0rem 0rem;
   background: var(--rlc-bottom-sheet-background, var(--rls-app-color-050));
   transform: var(--pvt-component-transform);
-  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
-    transform 125ms 0ms var(--rls-deceleration-curve),
-    visibility 125ms 0ms var(--rls-deceleration-curve);
+  transition: opacity 240ms 0ms var(--rls-deceleration-curve),
+    transform 240ms 0ms var(--rls-deceleration-curve),
+    visibility 240ms 0ms var(--rls-deceleration-curve);
 }
 .rls-bottom-sheet__backdrop {
   position: absolute;
@@ -2176,9 +2176,6 @@
 .rls-field-autocomplete.rls-field-box--disabled {
   --pvt-control-opacity: 0.5;
 }
-.rls-field-autocomplete .rls-field-list__control {
-  width: var(--pvt-control-width);
-}
 .rls-field-autocomplete .rls-field-list__ul__search {
   display: flex;
   align-items: center;
@@ -2378,16 +2375,20 @@
     --rlc-fieldbox-action-dimension,
     var(--rls-sizing-x12)
   );
+  --pvt-control-width: calc(100% - var(--pvt-action-dimension));
   position: relative;
   width: 100%;
   box-sizing: border-box;
 }
+.rls-field-date .rls-field-box--readonly {
+  --pvt-control-width: 100%;
+}
 .rls-field-date .rls-field-box__body {
   column-gap: var(--rls-sizing-x2);
 }
 .rls-field-date__control {
   position: relative;
-  width: calc(100% - var(--pvt-action-dimension));
+  width: var(--pvt-control-width);
   height: var(--rls-sizing-x12);
   line-height: var(--rls-sizing-x12);
   padding: 0rem;
@@ -2405,7 +2406,7 @@
 }
 .rls-field-date__control:disabled {
   opacity: 0.5;
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .rls-field-date__action {
   --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
@@ -2522,13 +2523,17 @@
     --rlc-fieldbox-action-dimension,
     var(--rls-sizing-x12)
   );
+  --pvt-control-width: calc(100% - var(--pvt-action-dimension));
   position: relative;
   width: 100%;
   box-sizing: border-box;
 }
+.rls-field-date-range .rls-field-box--readonly {
+  --pvt-control-width: 100%;
+}
 .rls-field-date-range__control {
   position: relative;
-  width: calc(100% - var(--pvt-action-dimension));
+  width: var(--pvt-control-width);
   height: var(--rls-sizing-x12);
   line-height: var(--rls-sizing-x12);
   padding: 0rem;
@@ -2546,7 +2551,7 @@
 }
 .rls-field-date-range__control:disabled {
   opacity: 0.5;
-  pointer-events: none;
+  cursor: not-allowed;
 }
 .rls-field-date-range__action {
   --rlc-icon-dimension: calc(var(--pvt-action-dimension) - 2rem);
@@ -2572,13 +2577,7 @@
 } /*# sourceMappingURL=FieldDateRange.css.map */
 
 .rls-field-select {
-  --pvt-control-cursor: pointer;
-}
-.rls-field-select.rls-field-box--disabled {
-  --pvt-control-cursor: none;
-}
-.rls-field-select .rls-field-list__control {
-  cursor: var(--pvt-control-cursor);
+  --rlc-fieldlist-control-cursor: pointer;
 }
 .rls-field-select .rls-field-list__action {
   transition: transform 160ms 0ms var(--rls-sharp-curve);

package/dist/cjs/index.js

@@ -2727,11 +2727,13 @@ function useFieldAutocomplete(props) {
         }
     }, [controller.setState, controller.navigationInput]);
     const onClickControl = require$$0.useCallback(() => {
-        controller.setState({ modalIsVisible: true });
-        setTimeout(() => {
-            controller.refInput?.current?.focus();
-        }, DURATION_ANIMATION$1);
-    }, [controller.setState]);
+        if (!props.readOnly) {
+            controller.setState({ modalIsVisible: true });
+            setTimeout(() => {
+                controller.refInput?.current?.focus();
+            }, DURATION_ANIMATION$1);
+        }
+    }, [controller.setState, props.readOnly]);
     const onClickAction = require$$0.useCallback(() => {
         if (controller.value) {
             controller.setState({ modalIsVisible: false });
@@ -2803,7 +2805,7 @@ function useFieldAutocomplete(props) {
 
 function RlsFieldAutocompleteTemplate(props) {
     const autocomplete = useFieldAutocomplete(props);
-    const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, rlsTheme, searching } = props;
+    const { render, children, formControl, msgErrorDisabled, onSearch, placeholder, readOnly, rlsTheme, searching } = props;
     const [labels, setLabels] = require$$0.useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
         listEmptyTitle: reactI18n('listEmptyTitle'),
@@ -2826,9 +2828,16 @@ function RlsFieldAutocompleteTemplate(props) {
             focused: autocomplete.focused && !disabled,
             error: formControl?.wrong,
             disabled,
+            readonly: readOnly,
             selected: !!autocomplete.value
         }, 'rls-field-list rls-field-autocomplete');
-    }, [formControl?.wrong, autocomplete.value, autocomplete.focused, disabled]);
+    }, [
+        formControl?.wrong,
+        autocomplete.value,
+        autocomplete.focused,
+        disabled,
+        readOnly
+    ]);
     const classNameList = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
             higher: autocomplete.higher,
@@ -2845,7 +2854,7 @@ function RlsFieldAutocompleteTemplate(props) {
         event.key === 'Enter' && onSearch && onSearch(autocomplete.pattern);
         autocomplete.onKeydownInput(event);
     }, [autocomplete.onKeydownInput, onSearch, autocomplete.pattern]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, 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("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: autocomplete.refContent, 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("input", { className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: autocomplete.value, onClick: autocomplete.onClickControl }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: autocomplete.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: autocomplete.value ? 'trash-2' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: autocomplete.refList, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.refInput, className: "rls-field-list__ul__control", type: "text", placeholder: labels.listInputPlaceholder, value: autocomplete.pattern, onChange: onChangePattern, onFocus: autocomplete.onFocusInput, onBlur: autocomplete.onBlurInput, onKeyDown: onKeyDownPattern, disabled: disabled || searching }), onSearch && (jsxRuntimeExports.jsx("button", { disabled: disabled || searching, onClick: onClickPattern, children: jsxRuntimeExports.jsx(RlsIcon, { value: "search" }) }))] }), searching && jsxRuntimeExports.jsx(RlsProgressBar, { indeterminate: true }), autocomplete.coincidences.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: autocomplete.onClickElement(element), onKeyDown: autocomplete.onKeydownElement(element), children: render(element) }, index))), !autocomplete.coincidences.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: autocomplete.onClickBackdrop })] })] }));
 }
 function RlsFieldAutocomplete(props) {
     const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -2938,7 +2947,7 @@ function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDat
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDay, { formControl: dayControl, date: _date, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, date: _date, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, date: _date, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (jsxRuntimeExports.jsx("div", { className: "rls-picker-date__footer", children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--today", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: itIsDisabledToday, children: labels.dateActionToday }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) }))] }));
 }
 
-function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: _value }) {
+function RlsFieldDate({ children, date, disabled, formControl, format, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
     const today = require$$0.useRef(new Date()); // Initial current date in component
     const [value, setValue] = require$$0.useState(formControl?.value ?? _value);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
@@ -2946,8 +2955,11 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
         return formControl?.disabled || disabled;
     }, [formControl?.disabled, disabled]);
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-field-box', { disabled: _disabled });
-    }, [_disabled]);
+        return renderClassStatus('rls-field-box', {
+            disabled: _disabled,
+            readonly: readOnly
+        });
+    }, [_disabled, readOnly]);
     const { icon, valueInput } = require$$0.useMemo(() => {
         return {
             icon: value ? 'trash-2' : 'calendar',
@@ -2964,8 +2976,8 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
         formControl?.setValue(_date);
     }, []);
     const onClickInput = require$$0.useCallback(() => {
-        setModalIsVisible(true);
-    }, []);
+        !readOnly && setModalIsVisible(true);
+    }, [readOnly]);
     const onChange = require$$0.useCallback((value) => {
         setValue(value);
         onValue && onValue(value);
@@ -2985,7 +2997,7 @@ function RlsFieldDate({ children, date, disabled, formControl, format, identifie
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, 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("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, 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("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function rangeFormatTemplate({ maxDate, minDate }) {
@@ -3063,7 +3075,7 @@ function RlsPickerDateRange({ automatic, date: _picker, disabled, formControl, m
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityDay, children: title }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: jsxRuntimeExports.jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), jsxRuntimeExports.jsx(RlsPickerSelectorTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxRuntimeExports.jsxs("div", { className: classNameComponent, children: [jsxRuntimeExports.jsx(RlsPickerDayRange, { formControl: rangeControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), jsxRuntimeExports.jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), jsxRuntimeExports.jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), jsxRuntimeExports.jsx("div", { className: classNameFooter, children: jsxRuntimeExports.jsxs("div", { className: "rls-picker-date-range__actions", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--cancel", children: jsxRuntimeExports.jsx(RlsButton, { type: "ghost", onClick: onCancel, children: labels.dateActionCancel }) }), jsxRuntimeExports.jsx("div", { className: "rls-picker-date-range__actions--ok", children: jsxRuntimeExports.jsx(RlsButton, { type: "raised", onClick: onSelect, children: labels.dateActionSelect }) })] }) })] }));
 }
 
-function RlsFieldDateRange({ children, date: _date, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, rlsTheme, value: _value }) {
+function RlsFieldDateRange({ children, date: _date, disabled, formControl, identifier, maxDate, minDate, msgErrorDisabled, onValue, placeholder, readOnly, rlsTheme, value: _value }) {
     const currentDate = require$$0.useMemo(() => _date ?? new Date(), [_date]);
     const [value, setValue] = require$$0.useState(formControl?.value || _value);
     const [modalIsVisible, setModalIsVisible] = require$$0.useState(false);
@@ -3071,8 +3083,11 @@ function RlsFieldDateRange({ children, date: _date, disabled, formControl, ident
         return formControl?.disabled || disabled;
     }, [formControl?.disabled, disabled]);
     const className = require$$0.useMemo(() => {
-        return renderClassStatus('rls-field-box', { disabled: _disabled });
-    }, [_disabled]);
+        return renderClassStatus('rls-field-box', {
+            disabled: _disabled,
+            readonly: readOnly
+        });
+    }, [_disabled, readOnly]);
     const { icon, valueInput } = require$$0.useMemo(() => {
         return {
             icon: value ? 'trash-2' : 'calendar',
@@ -3080,8 +3095,8 @@ function RlsFieldDateRange({ children, date: _date, disabled, formControl, ident
         };
     }, [value]);
     const onClickInput = require$$0.useCallback(() => {
-        setModalIsVisible(true);
-    }, []);
+        !readOnly && setModalIsVisible(true);
+    }, [readOnly]);
     const onChange = require$$0.useCallback((value) => {
         setValue(value);
         onValue && onValue(value);
@@ -3101,7 +3116,7 @@ function RlsFieldDateRange({ children, date: _date, disabled, formControl, ident
         formControl?.touch();
         setModalIsVisible(false);
     }, [formControl, onChange]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, 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("input", { className: "rls-field-date-range__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: "rls-field-date-range", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: className, 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("input", { className: "rls-field-date-range__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: _disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: "rls-field-date-range__action", onClick: onClickAction, disabled: _disabled, children: jsxRuntimeExports.jsx(RlsIcon, { value: icon }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }))] }), jsxRuntimeExports.jsx(RlsModal, { className: "rls-field-date-range-modal", visible: modalIsVisible, rlsTheme: rlsTheme, children: jsxRuntimeExports.jsx(RlsPickerDateRange, { formControl: formControl, date: currentDate, disabled: _disabled, maxDate: maxDate, minDate: minDate, onListener: onListener }) })] }));
 }
 
 function useFieldSelect(props) {
@@ -3123,8 +3138,8 @@ function useFieldSelect(props) {
         controller.setState({ focused: false });
     }, [controller.setState]);
     const onClickInput = require$$0.useCallback(() => {
-        controller.setState({ modalIsVisible: true });
-    }, [controller.setState]);
+        !props.readOnly && controller.setState({ modalIsVisible: true });
+    }, [controller.setState, props.readOnly]);
     const onKeydownInput = require$$0.useCallback((event) => {
         switch (event.code) {
             case 'Space':
@@ -3208,7 +3223,7 @@ function useFieldSelect(props) {
 
 function RlsFieldSelectTemplate(props) {
     const select = useFieldSelect(props);
-    const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, rlsTheme, unremovable } = props;
+    const { render, suggestions, children, formControl, msgErrorDisabled, placeholder, readOnly, rlsTheme, unremovable } = props;
     const [labels, setLabels] = require$$0.useState({
         listEmptyDescription: reactI18n('listEmptyDescription'),
         listEmptyTitle: reactI18n('listEmptyTitle')
@@ -3228,16 +3243,17 @@ function RlsFieldSelectTemplate(props) {
         return renderClassStatus('rls-field-box', {
             focused: select.focused && !disabled,
             error: formControl?.wrong,
-            disabled: disabled
+            disabled: disabled,
+            readonly: readOnly
         }, 'rls-field-list rls-field-select');
-    }, [formControl?.wrong, select.focused, disabled]);
+    }, [formControl?.wrong, select.focused, disabled, readOnly]);
     const classNameList = require$$0.useMemo(() => {
         return renderClassStatus('rls-field-list__suggestions', {
             higher: select.higher,
             visible: select.modalIsVisible
         });
     }, [select.modalIsVisible, select.higher]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, 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("input", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) })] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.refContent, 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("input", { ref: select.refInput, className: "rls-field-list__control", readOnly: true, placeholder: placeholder, value: select.value, onFocus: select.onFocusInput, onBlur: select.onBlurInput, onClick: select.onClickInput, onKeyDown: select.onKeydownInput, disabled: disabled }), !readOnly && (jsxRuntimeExports.jsx("button", { className: 'rls-field-list__action', disabled: disabled, onClick: select.onClickAction, children: jsxRuntimeExports.jsx(RlsIcon, { value: !unremovable && !!select.value ? 'close' : 'arrow-ios-down' }) }))] }) }), !msgErrorDisabled && (jsxRuntimeExports.jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })), jsxRuntimeExports.jsxs("div", { className: classNameList, children: [jsxRuntimeExports.jsx("div", { className: "rls-field-list__suggestions__body", children: jsxRuntimeExports.jsxs("ul", { ref: select.refList, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (jsxRuntimeExports.jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: select.onClickElement(element), onKeyDown: select.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (jsxRuntimeExports.jsx("li", { className: "rls-field-list__empty", children: jsxRuntimeExports.jsxs("div", { className: "rls-field-list__empty__description", children: [jsxRuntimeExports.jsx("label", { className: "rls-label-bold rls-truncate", children: labels.listEmptyTitle }), jsxRuntimeExports.jsx("p", { className: "rls-caption-regular", children: labels.listEmptyDescription })] }) }))] }) }), jsxRuntimeExports.jsx("div", { className: "rls-field-list__backdrop", onClick: select.onClickBackdrop })] })] }));
 }
 function RlsFieldSelect(props) {
     const render = require$$0.useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);