@rolster/react-components 18.21.45 → 18.22.0

package/dist/es/index.js

@@ -1966,7 +1966,10 @@ function RlsPagination({ suggestions, count, filter, onPagination }) {
                 }) }), jsxRuntimeExports.jsx("div", { className: "rls-pagination__description", children: template?.description }), jsxRuntimeExports.jsxs("div", { className: "rls-pagination__actions", children: [jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goNextPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrow-ios-right" }) }), jsxRuntimeExports.jsx("button", { className: "rls-pagination__action", onClick: goLastPagination, disabled: template?.lastPage, children: jsxRuntimeExports.jsx(RlsIcon, { value: "arrowhead-right" }) })] })] }));
 }
 
-function RlsPickerDayItem({ day, onSelect, disabled }) {
+function RlsPickerDayHeaders() {
+    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
+}
+function RlsPickerDayElement({ day, onSelect, disabled }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-picker-day__element', {
             disabled: day.disabled || disabled,
@@ -1988,23 +1991,27 @@ function RlsPickerDayItem({ day, onSelect, disabled }) {
     }, [day.value, day.disabled, disabled, onSelect]);
     return (jsxRuntimeExports.jsx("div", { className: className, onClick: onClick, children: jsxRuntimeExports.jsx("span", { className: "rls-picker-day__element__span", children: day.value || '??' }) }));
 }
-function RlsPickerDayHeaders() {
-    return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
-}
 function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minDate, onValue, rlsTheme, year }) {
     const date = useMemo(() => _date ?? new Date(), [_date]);
     const [weeks, setWeeks] = useState([]);
     const [value, setValue] = useState(formControl?.value || date.getDate());
     const [headers, setHeaders] = useState(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
     const [component, setComponent] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const setDayValue = useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+    }, [formControl]);
+    const onSelect = useCallback((value) => {
+        setDayValue(value);
+        onValue && onValue(value);
+    }, [setDayValue, onValue]);
     useEffect(() => {
         return i18nSubscribe(() => {
             setHeaders(jsxRuntimeExports.jsx(RlsPickerDayHeaders, {}));
         });
     }, []);
     useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayItem, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) }));
-    }, [weeks]);
+        setComponent(jsxRuntimeExports.jsx("div", { className: "rls-picker-day__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) }));
+    }, [weeks, onSelect, disabled]);
     useEffect(() => {
         const options = createPickerOptions();
         const day = verifyDayPicker(options);
@@ -2026,13 +2033,6 @@ function RlsPickerDay({ date: _date, disabled, formControl, maxDate, month, minD
             maxDate
         };
     }, [date, formControl?.value, value, month, year, minDate, maxDate]);
-    const setDayValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-    }, [formControl]);
-    const onSelect = useCallback((value) => {
-        setDayValue(value);
-        onValue && onValue(value);
-    }, [setDayValue, onValue]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day", "rls-theme": rlsTheme, children: [headers, component] }));
 }
 
@@ -2040,7 +2040,7 @@ const formatRange = '{dd}/{mx}/{aa}';
 function RlsPickerDayRangeHeaders() {
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day__header", children: DAY_LABELS().map((title, index) => (jsxRuntimeExports.jsx("label", { className: "rls-picker-day__label", children: title }, index))) }));
 }
-function RlsPickerDayRangeItem({ day, onSelect, disabled }) {
+function RlsPickerDayRangeElement({ day, onSelect, disabled }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-picker-day-range__element', {
             disabled: day.disabled || disabled,
@@ -2067,14 +2067,23 @@ function RlsPickerDayRange({ date: _date, disabled, formControl, maxDate, minDat
     const [range, setRange] = useState(_range);
     const [headers, setHeaders] = useState(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
     const [component, setComponent] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const onSelect = useCallback((value) => {
+        const _date = assignDayInDate(date, value);
+        const range = dateIsBefore(_date, sourceDate.current)
+            ? new DateRange(sourceDate.current, _date)
+            : new DateRange(_date, sourceDate.current);
+        sourceDate.current = _date;
+        setRange(range);
+        formControl?.setValue(range);
+    }, [date, sourceDate.current, formControl]);
     useEffect(() => {
         return i18nSubscribe(() => {
             setHeaders(jsxRuntimeExports.jsx(RlsPickerDayRangeHeaders, {}));
         });
     }, []);
     useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayRangeItem, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) }));
-    }, [weeks]);
+        setComponent(jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__component", children: weeks.map(({ days }, index) => (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__week", children: days.map((day, index) => (jsxRuntimeExports.jsx(RlsPickerDayRangeElement, { day: day, onSelect: onSelect, disabled: disabled }, index))) }, index))) }));
+    }, [weeks, onSelect, disabled]);
     useEffect(() => {
         setWeeks(createDayRangePicker({
             date,
@@ -2087,19 +2096,10 @@ function RlsPickerDayRange({ date: _date, disabled, formControl, maxDate, minDat
     const title = useMemo(() => {
         return (jsxRuntimeExports.jsx("div", { className: "rls-picker-day-range__title", children: dateFormatTemplate(sourceDate.current, formatRange) }));
     }, [sourceDate.current]);
-    const onSelect = useCallback((value) => {
-        const _date = assignDayInDate(date, value);
-        const range = dateIsBefore(_date, sourceDate.current)
-            ? new DateRange(sourceDate.current, _date)
-            : new DateRange(_date, sourceDate.current);
-        sourceDate.current = _date;
-        setRange(range);
-        formControl?.setValue(range);
-    }, [date, sourceDate.current, formControl]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-day-range", "rls-theme": rlsTheme, children: [title, headers, component] }));
 }
 
-function RlsPickerMonthItem({ month, onSelect, disabled }) {
+function RlsPickerMonthElement({ month, onSelect, disabled }) {
     const [label, setLabel] = useState(MONTH_NAMES(month.value));
     useEffect(() => {
         return i18nSubscribe(() => {
@@ -2126,9 +2126,16 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
     const [months, setMonths] = useState([]);
     const [value, setValue] = useState(formControl?.value ?? date.getMonth());
     const [component, setComponent] = useState(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {}));
+    const setMonthValue = useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+    }, [formControl]);
+    const onSelect = useCallback((value) => {
+        setMonthValue(value);
+        onValue && onValue(value);
+    }, [setMonthValue, onValue]);
     useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthItem, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
-    }, [months]);
+        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: months.map((month, index) => (jsxRuntimeExports.jsx(RlsPickerMonthElement, { month: month, onSelect: onSelect, disabled: disabled }, index))) }));
+    }, [months, onSelect, disabled]);
     useEffect(() => {
         const options = {
             date,
@@ -2154,13 +2161,6 @@ function RlsPickerMonth({ date: _date, disabled, formControl, maxDate, minDate,
             ? formControl?.setValue(month)
             : setValue(formControl?.value ?? date.getMonth());
     }, [formControl?.value]);
-    const setMonthValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-    }, [formControl]);
-    const onSelect = useCallback((value) => {
-        setMonthValue(value);
-        onValue && onValue(value);
-    }, [setMonthValue, onValue]);
     return (jsxRuntimeExports.jsx("div", { className: "rls-picker-month", "rls-theme": rlsTheme, children: component }));
 }
 
@@ -2221,7 +2221,7 @@ function RlsPickerSelectorTitle({ monthControl, type, yearControl, date, disable
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-selector-title", children: [jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onPrevious, disabled: limitPrevious || disabled }), jsxRuntimeExports.jsx("span", { onClick: onClick, children: label }), jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onNext, disabled: limitNext || disabled })] }));
 }
 
-function RlsPickerYearItem({ onSelect, year, disabled }) {
+function RlsPickerYearElement({ onSelect, year, disabled }) {
     const className = useMemo(() => {
         return renderClassStatus('rls-picker-year__element', {
             disabled: year.disabled || disabled,
@@ -2248,37 +2248,92 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
         };
     }, [date, year, minDate, maxDate]);
     const [template, setTemplate] = useState(createYearPicker(createPickerOptions()));
+    const setYearValue = useCallback((value) => {
+        formControl ? formControl.setValue(value) : setValue(value);
+        setYear(value);
+    }, [formControl]);
+    const onSelect = useCallback((value) => {
+        setYearValue(value);
+        onValue && onValue(value);
+    }, [setYearValue, onValue]);
     useEffect(() => {
         const options = createPickerOptions(); // YearPickerProps
         const year = verifyYearPicker(options);
         year ? setYearValue(year) : setTemplate(createYearPicker(options));
     }, [date, year, value, minDate, maxDate]);
     useEffect(() => {
-        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearItem, { year: year, onSelect: onSelect, disabled: disabled }, index))) }));
-    }, [template.years]);
+        setComponent(jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: template.years.map((year, index) => (jsxRuntimeExports.jsx(RlsPickerYearElement, { year: year, onSelect: onSelect, disabled: disabled }, index))) }));
+    }, [template.years, onSelect, disabled]);
     useEffect(() => {
         const year = verifyYearPicker(createPickerOptions());
         itIsDefined(year)
             ? formControl?.setValue(year)
             : setValue(formControl?.value ?? date.getFullYear());
     }, [formControl?.value]);
-    const setYearValue = useCallback((value) => {
-        formControl ? formControl.setValue(value) : setValue(value);
-        setYear(value);
-    }, [formControl]);
     const onClickPrev = useCallback(() => {
         setYear((year) => year - 8);
     }, []);
     const onClickNext = useCallback(() => {
         setYear((year) => year + 8);
     }, []);
-    const onSelect = useCallback((value) => {
-        setYearValue(value);
-        onValue && onValue(value);
-    }, [setYearValue, onValue]);
     return (jsxRuntimeExports.jsxs("div", { className: "rls-picker-year", "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsxs("div", { className: "rls-picker-year__header", children: [jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--prev", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-left", onClick: onClickPrev, disabled: !template.canPrevious || disabled }) }), jsxRuntimeExports.jsxs("label", { className: "rls-title-bold", children: [template.minRange, " - ", template.maxRange] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__action rls-picker-year__action--next", children: jsxRuntimeExports.jsx(RlsButtonAction, { icon: "arrow-ios-right", onClick: onClickNext, disabled: !template.canNext || disabled }) })] }), jsxRuntimeExports.jsx("div", { className: "rls-picker-year__component", children: component })] }));
 }
 
+function calculateInitialValue(value, minValue, maxValue) {
+    return minValue > value ? minValue : maxValue < value ? maxValue : value;
+}
+function calculateInitialRate(value, minValue, maxValue) {
+    const rateMax = maxValue - minValue;
+    const rateValue = value - minValue;
+    return Math.ceil((rateValue / rateMax) * 100);
+}
+function RlsSlider(props) {
+    const minValue = useMemo(() => {
+        return props.minValue ?? 0;
+    }, [props.minValue]);
+    const maxValue = useMemo(() => {
+        return props.maxValue ?? 100;
+    }, [props.maxValue]);
+    const [value, setValue] = useState(calculateInitialValue(props.formControl?.value ?? props.value ?? 0, minValue, maxValue));
+    const [rate, setRate] = useState(calculateInitialRate(value, minValue, maxValue));
+    const refComponent = useRef(null);
+    const refTrack = useRef(null);
+    const refTrackOn = useRef(null);
+    const refThumb = useRef(null);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-slider', {
+            complet: value === maxValue,
+            disabled: props.disabled,
+            empty: value === minValue
+        });
+    }, [value, minValue, maxValue, props.disabled]);
+    useEffect(() => {
+        const valueInitial = props.formControl?.value ?? props.value ?? 0;
+        refThumb.current.style.left = `${rate}%`;
+        refTrackOn.current.style.width = `${rate}%`;
+        if (valueInitial !== value) {
+            props.formControl?.setValue(value);
+            props.onValue && props.onValue(value);
+        }
+    }, []);
+    const calculateValueWithRate = useCallback((rate) => {
+        const value = Math.ceil(((maxValue - minValue) * rate) / 100);
+        refThumb.current.style.left = `${rate}%`;
+        refTrackOn.current.style.width = `${rate}%`;
+        const sliderValue = value + minValue;
+        setRate(rate);
+        setValue(sliderValue);
+        props.formControl?.setValue(sliderValue);
+        props.onValue && props.onValue(sliderValue);
+    }, [minValue, maxValue, props.formControl, props.onValue]);
+    const onClickTrack = useCallback((event) => {
+        const { left, width } = refTrack.current.getBoundingClientRect();
+        const rate = Math.ceil(((event.clientX - left) / width) * 100);
+        calculateValueWithRate(rate);
+    }, [minValue, maxValue]);
+    return (jsxRuntimeExports.jsxs("div", { className: className, children: [props.children && (jsxRuntimeExports.jsx("span", { className: "rls-slider__label", children: props.children })), jsxRuntimeExports.jsxs("div", { className: "rls-slider__body", children: [props.prefixIcon && jsxRuntimeExports.jsx(RlsIcon, { value: props.prefixIcon }), jsxRuntimeExports.jsxs("div", { ref: refComponent, className: "rls-slider__component", children: [jsxRuntimeExports.jsx("div", { ref: refTrack, className: "rls-slider__track", onClick: onClickTrack, children: jsxRuntimeExports.jsx("div", { ref: refTrackOn, className: "rls-slider__track__on" }) }), jsxRuntimeExports.jsxs("div", { ref: refThumb, className: "rls-slider__thumb", children: [rate, "%"] })] })] })] }));
+}
+
 function RlsToolbar({ actions, children, subtitle }) {
     return (jsxRuntimeExports.jsxs("div", { className: "rls-toolbar", children: [jsxRuntimeExports.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntimeExports.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntimeExports.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntimeExports.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntimeExports.jsx("div", { children: action }, index))) }))] }));
 }
@@ -2296,6 +2351,9 @@ const reactI18n = i18n({
         dateActionCancel: 'Cancelar',
         dateActionSelect: 'Establecer',
         dateActionToday: 'Hoy',
+        chooserImageActionCancel: 'Cancelar',
+        editorImageActionRestore: 'Restaurar',
+        editorImageActionSelect: 'Seleccionar',
         listEmptyDescription: 'Lo sentimos, en el momento no hay elementos en el listado',
         listEmptyTitle: 'Selección no disponible',
         listInputPlaceholder: 'Escriba palabre clave para filtrar...'
@@ -2305,6 +2363,9 @@ const reactI18n = i18n({
         dateActionCancel: 'Cancel',
         dateActionSelect: 'Select',
         dateActionToday: 'Today',
+        chooserImageActionCancel: 'Cancel',
+        editorImageActionRestore: 'Restore',
+        editorImageActionSelect: 'Select',
         listEmptyDescription: 'Sorry, there are currently no items in the list',
         listEmptyTitle: 'Selection not available',
         listInputPlaceholder: 'Enter keyword to filter...'
@@ -2448,23 +2509,23 @@ function calculateMinHeightList(count, height) {
 }
 function useListController(props) {
     const { count, suggestions, automatic, formControl, lineHeight, reference } = props;
+    const refContent = useRef(null);
+    const refList = useRef(null);
+    const refInput = useRef(null);
     const listIsOpen = useRef(false);
-    const contentRef = useRef(null);
-    const listRef = useRef(null);
-    const inputRef = useRef(null);
     const [collection, setCollection] = useState(new ListCollection(suggestions));
     const [state, refreshState] = useState({
         focused: false,
         higher: false,
-        value: '',
-        modalIsVisible: false
+        modalIsVisible: false,
+        value: ''
     });
+    const changeValueInternal = useRef(false);
     const position = useRef(0);
     const valueProtected = useRef();
-    const changeValueInternal = useRef(false);
     useEffect(() => {
         function onCloseSuggestions({ target }) {
-            !contentRef?.current?.contains(target) &&
+            !refContent?.current?.contains(target) &&
                 refreshState((state) => ({ ...state, modalIsVisible: false }));
         }
         document.addEventListener('click', onCloseSuggestions);
@@ -2514,7 +2575,7 @@ function useListController(props) {
         const _state = state.modalIsVisible
             ? {
                 ...state,
-                higher: locationListCanTop(contentRef.current, listRef.current, minHeightList)
+                higher: locationListCanTop(refContent.current, refList.current, minHeightList)
             }
             : state;
         refreshState((state) => ({ ...state, ..._state }));
@@ -2532,34 +2593,154 @@ function useListController(props) {
     const navigationInput = useCallback((event) => {
         if (state.modalIsVisible) {
             const _position = navigationListFromInput({
-                content: contentRef.current,
+                content: refContent.current,
                 event: event,
-                list: listRef.current
+                list: refList.current
             });
             position.current = _position ?? 0;
         }
     }, [state.modalIsVisible]);
     const navigationElement = useCallback((event) => {
         position.current = navigationListFromElement({
-            content: contentRef.current,
+            content: refContent.current,
             event: event,
-            input: inputRef.current,
-            list: listRef.current,
+            input: refInput.current,
+            list: refList.current,
             position: position.current
         });
     }, [state.modalIsVisible]);
     return {
         ...state,
-        contentRef,
-        inputRef,
-        listRef,
         navigationElement,
         navigationInput,
+        refContent,
+        refInput,
+        refList,
         setFormValue,
         setState
     };
 }
 
+function useRelocationOnComponent({ container, element, onDrag }) {
+    const position = useRef({ x: 0, y: 0 });
+    const dragOffset = useRef({ x: 0, y: 0 });
+    const dragging = useRef(false);
+    const getClientX = useCallback((positionX) => {
+        let clientX = position.current.x + positionX - dragOffset.current.x;
+        if (clientX < 0) {
+            clientX = 0;
+        }
+        else {
+            const width = clientX + element.current.offsetWidth;
+            if (width > container.current.offsetWidth) {
+                clientX = container.current.offsetWidth - element.current.offsetWidth;
+            }
+        }
+        return clientX;
+    }, []);
+    const getClientY = useCallback((positionY) => {
+        let clientY = position.current.y + positionY - dragOffset.current.y;
+        if (clientY < 0) {
+            clientY = 0;
+        }
+        else {
+            const height = clientY + element.current.offsetHeight;
+            if (height > container.current.offsetHeight) {
+                clientY = container.current.offsetHeight - element.current.offsetHeight;
+            }
+        }
+        return clientY;
+    }, []);
+    const start = useCallback((positionX, positionY) => {
+        dragOffset.current = {
+            x: positionX,
+            y: positionY
+        };
+        position.current = {
+            x: element.current.offsetLeft,
+            y: element.current.offsetTop
+        };
+        dragging.current = true;
+    }, []);
+    const relocation = useCallback((positionX, positionY) => {
+        const clientX = getClientX(positionX);
+        const clientY = getClientY(positionY);
+        element.current.style.top = `${clientY}px`;
+        element.current.style.left = `${clientX}px`;
+        onDrag && onDrag();
+    }, []);
+    useEffect(() => {
+        const mousedown = (event) => {
+            start(event.clientX, event.clientY);
+        };
+        const mousemove = (event) => {
+            if (dragging.current) {
+                relocation(event.clientX, event.clientY);
+                event.preventDefault();
+            }
+        };
+        const mouseup = () => {
+            dragging.current = false;
+        };
+        const touchstart = (event) => {
+            if (event.touches[0]) {
+                start(event.touches[0].clientX, event.touches[0].clientY);
+            }
+        };
+        const touchmove = (event) => {
+            if (event.touches[0] && dragging.current) {
+                relocation(event.touches[0].clientX, event.touches[0].clientY);
+                event.preventDefault();
+            }
+        };
+        const touchend = () => {
+            dragging.current = false;
+        };
+        element.current.addEventListener('mousedown', mousedown);
+        element.current.addEventListener('mousemove', mousemove);
+        element.current.addEventListener('mouseup', mouseup);
+        element.current.addEventListener('touchstart', touchstart);
+        element.current.addEventListener('touchmove', touchmove);
+        element.current.addEventListener('touchend', touchend);
+        return () => {
+            element.current?.removeEventListener('mousedown', mousedown);
+            element.current?.removeEventListener('mousemove', mousemove);
+            element.current?.removeEventListener('mouseup', mouseup);
+            element.current?.removeEventListener('touchstart', touchstart);
+            element.current?.removeEventListener('touchmove', touchmove);
+            element.current?.removeEventListener('touchend', touchend);
+        };
+    }, []);
+}
+
+function useResize(props) {
+    const { refElement, onResize } = props;
+    const dimension = useRef({ height: 0, width: 0 });
+    const observer = useCallback((entries) => {
+        const { height, width } = entries[0].contentRect;
+        onResize &&
+            onResize({
+                current: dimension.current,
+                dimension: {
+                    height,
+                    width
+                }
+            });
+        dimension.current = { height, width };
+    }, []);
+    useEffect(() => {
+        dimension.current = {
+            height: refElement.current.offsetHeight,
+            width: refElement.current.offsetWidth
+        };
+        const resizeObserver = new ResizeObserver(observer);
+        resizeObserver.observe(refElement.current);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, []);
+}
+
 const DURATION_ANIMATION$1 = 240;
 const MAX_ELEMENTS = 6;
 function useFieldAutocomplete(props) {
@@ -2593,6 +2774,9 @@ function useFieldAutocomplete(props) {
     useEffect(() => {
         refreshCoincidences(props.suggestions, pattern);
     }, [pattern]);
+    useEffect(() => {
+        props.disabled && controller.setState({ focused: false });
+    }, [props.disabled]);
     const onFocusInput = useCallback(() => {
         controller.setState({ focused: true });
     }, [controller.setState]);
@@ -2613,7 +2797,7 @@ function useFieldAutocomplete(props) {
     const onClickControl = useCallback(() => {
         controller.setState({ modalIsVisible: true });
         setTimeout(() => {
-            controller.inputRef?.current?.focus();
+            controller.refInput?.current?.focus();
         }, DURATION_ANIMATION$1);
     }, [controller.setState]);
     const onClickAction = useCallback(() => {
@@ -2643,7 +2827,7 @@ function useFieldAutocomplete(props) {
         }
         if (props.selectionContinuos) {
             setPattern('');
-            controller.inputRef?.current?.focus();
+            controller.refInput?.current?.focus();
         }
         else {
             controller.setState({ modalIsVisible: false });
@@ -2729,18 +2913,18 @@ 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.contentRef, 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.listRef, className: "rls-field-list__ul", children: [jsxRuntimeExports.jsxs("div", { className: "rls-field-list__ul__search", children: [jsxRuntimeExports.jsx("input", { ref: autocomplete.inputRef, 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 }), 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 = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
     return jsxRuntimeExports.jsx(RlsFieldAutocompleteTemplate, { ...props, render: render });
 }
 
-function RlsModal({ children, overflow, visible, rlsTheme }) {
-    const className = useMemo(() => {
-        return renderClassStatus('rls-modal', { overflow, visible });
-    }, [overflow, visible]);
-    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
+function RlsModal({ children, className, overflow, visible, rlsTheme }) {
+    const classNameModal = useMemo(() => {
+        return renderClassStatus('rls-modal', { overflow, visible }, className);
+    }, [className, overflow, visible]);
+    return ReactDOM.createPortal(jsxRuntimeExports.jsxs("div", { className: classNameModal, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-modal__component", children: children }), jsxRuntimeExports.jsx("div", { className: "rls-modal__backdrop" })] }), document.body);
 }
 
 const formatTitle = '{dw}, {mx} {dd} de {aa}';
@@ -2993,6 +3177,9 @@ function useFieldSelect(props) {
     useEffect(() => {
         count.current = props.suggestions.length;
     }, [props.suggestions]);
+    useEffect(() => {
+        props.disabled && controller.setState({ focused: false });
+    }, [props.disabled]);
     const onFocusInput = useCallback(() => {
         controller.setState({ focused: true });
     }, [controller.setState]);
@@ -3027,7 +3214,7 @@ function useFieldSelect(props) {
         else {
             const modalIsVisible = !controller.modalIsVisible;
             controller.setState({ modalIsVisible });
-            modalIsVisible && controller.inputRef?.current?.focus();
+            modalIsVisible && controller.refInput?.current?.focus();
         }
     }, [
         controller.modalIsVisible,
@@ -3041,7 +3228,7 @@ function useFieldSelect(props) {
         controller.setState({ modalIsVisible: false });
     }, [controller.setState]);
     const onChange = useCallback((element) => {
-        controller.inputRef?.current?.focus();
+        !props.disabled && controller.refInput?.current?.focus();
         if (props.onSelect) {
             controller.setState({ modalIsVisible: false });
             element.value && props.onSelect(element.value);
@@ -3055,7 +3242,8 @@ function useFieldSelect(props) {
         controller.setState,
         controller.setFormValue,
         props.onSelect,
-        props.onValue
+        props.onValue,
+        props.disabled
     ]);
     const onClickElement = useCallback((element) => {
         return () => {
@@ -3102,9 +3290,9 @@ function RlsFieldSelectTemplate(props) {
     }, [formControl?.disabled, props.disabled]);
     const className = useMemo(() => {
         return renderClassStatus('rls-field-box', {
-            disabled: disabled,
+            focused: select.focused && !disabled,
             error: formControl?.wrong,
-            focused: select.focused && !disabled
+            disabled: disabled
         }, 'rls-field-list rls-field-select');
     }, [formControl?.wrong, select.focused, disabled]);
     const classNameList = useMemo(() => {
@@ -3113,7 +3301,7 @@ function RlsFieldSelectTemplate(props) {
             visible: select.modalIsVisible
         });
     }, [select.modalIsVisible, select.higher]);
-    return (jsxRuntimeExports.jsxs("div", { id: props.identifier, ref: select.contentRef, 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.inputRef, 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.listRef, 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 }), 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 = useCallback((element) => (jsxRuntimeExports.jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: jsxRuntimeExports.jsx("span", { children: element.title }) })), []);
@@ -3127,6 +3315,253 @@ function RlsFormNavigation({ children, visible, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: className, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-form-navigation__body", children: children }) }));
 }
 
+function getRatioFactor(ratio) {
+    switch (ratio) {
+        case '16:9':
+            return 9 / 16;
+        case '8:5':
+            return 5 / 8;
+        case '4:3':
+            return 3 / 4;
+        case '3:4':
+            return 4 / 3;
+        case '3:2':
+            return 2 / 3;
+        default:
+            return 1;
+    }
+}
+function simpleThreeRule(value1, value2, proportion) {
+    return (value2 * proportion) / value1;
+}
+function RlsImageEditor(props) {
+    const [selection, setSelection] = useState(props.rateSelection ?? 60);
+    const [labels, setLabels] = useState({
+        actionRestore: reactI18n('editorImageActionRestore'),
+        actionSelect: reactI18n('editorImageActionSelect')
+    });
+    const refBody = useRef(null);
+    const refImage = useRef(null);
+    const refSelection = useRef(null);
+    const refOverlayTop = useRef(null);
+    const refOverlayBottom = useRef(null);
+    const refOverlayLeft = useRef(null);
+    const refOverlayRight = useRef(null);
+    const refCanvas = useRef(null);
+    const refPicture = useRef(null);
+    const image = useRef(new Image());
+    const originalImage = useRef();
+    const getCropProperties = useCallback(() => {
+        return {
+            height: simpleThreeRule(refImage.current.offsetHeight, image.current.height, refSelection.current.offsetHeight),
+            left: simpleThreeRule(refImage.current.offsetWidth, image.current.width, refSelection.current.offsetLeft),
+            top: simpleThreeRule(refImage.current.offsetHeight, image.current.height, refSelection.current.offsetTop),
+            width: simpleThreeRule(refImage.current.offsetWidth, image.current.width, refSelection.current.offsetWidth)
+        };
+    }, []);
+    const refreshOverlaysStyle = useCallback(() => {
+        const width = refSelection.current.offsetWidth;
+        const height = refSelection.current.offsetHeight;
+        const top = refSelection.current.offsetTop;
+        const left = refSelection.current.offsetLeft;
+        refOverlayTop.current.style.width = `${width}px`;
+        refOverlayTop.current.style.bottom = `calc(100% - ${top}px)`;
+        refOverlayTop.current.style.left = `${left}px`;
+        refOverlayRight.current.style.left = `calc(${width + left}px)`;
+        refOverlayRight.current.style.width = `calc(100% - ${width + left}px)`;
+        refOverlayBottom.current.style.width = `${width}px`;
+        refOverlayBottom.current.style.top = `calc(${height + top}px)`;
+        refOverlayBottom.current.style.left = `${left}px`;
+        refOverlayLeft.current.style.right = `calc(100% - ${left}px)`;
+        refOverlayLeft.current.style.width = `calc(${left}px)`;
+    }, []);
+    const refreshSelectionFromWidth = useCallback((rateSelection) => {
+        const _ratio = rateSelection * getRatioFactor(props.ratio || '1:1');
+        let width = (refImage.current.offsetWidth * rateSelection) / 100;
+        let height = (refImage.current.offsetWidth * _ratio) / 100;
+        if (height > refImage.current.offsetHeight) {
+            height = refImage.current.offsetHeight;
+            width =
+                (height * refImage.current.offsetHeight) /
+                    refImage.current.offsetHeight;
+        }
+        return { height, width };
+    }, [props.ratio]);
+    const refreshSelectionFromHeight = useCallback((rateSelection) => {
+        const _ratio = rateSelection * getRatioFactor(props.ratio || '1:1');
+        let height = (refImage.current.offsetHeight * rateSelection) / 100;
+        let width = (refImage.current.offsetHeight * _ratio) / 100;
+        if (width > refImage.current.offsetWidth) {
+            width = refImage.current.offsetWidth;
+            height =
+                (width * refImage.current.offsetWidth) / refImage.current.offsetWidth;
+        }
+        return { height, width };
+    }, [props.ratio]);
+    const refreshSelectionStyle = useCallback((rateSelection) => {
+        if (image.current.width > 0 && image.current.height > 0) {
+            const { height, width } = image.current.width >= image.current.height
+                ? refreshSelectionFromHeight(rateSelection)
+                : refreshSelectionFromWidth(rateSelection);
+            refSelection.current.style.width = `${width}px`;
+            refSelection.current.style.height = `${height}px`;
+            if (refSelection.current.offsetLeft + width >
+                refImage.current.offsetWidth) {
+                const selectionLeft = refImage.current.offsetWidth - width;
+                refSelection.current.style.left = `${selectionLeft}px`;
+            }
+            if (refSelection.current.offsetTop + height >
+                refImage.current.offsetHeight) {
+                const selectionTop = refImage.current.offsetHeight - height;
+                refSelection.current.style.top = `${selectionTop}px`;
+            }
+            refreshOverlaysStyle();
+        }
+    }, [props.ratio]);
+    const setImageStyle = useCallback((width, height) => {
+        refImage.current.style.width = width;
+        refImage.current.style.height = height;
+        refCanvas.current.style.width = width;
+        refCanvas.current.style.height = height;
+    }, []);
+    const refreshImageStyle = useCallback(() => {
+        if (image.current.width <= 0 || image.current.height <= 0) {
+            return setImageStyle('0%', '0%');
+        }
+        const height = (refBody.current.offsetWidth * image.current.height) /
+            image.current.width;
+        if (height <= refBody.current.offsetHeight) {
+            return setImageStyle('100%', `${height}px`);
+        }
+        const width = (refBody.current.offsetHeight * image.current.width) /
+            image.current.height;
+        return setImageStyle(`${width}px`, '100%');
+    }, []);
+    useEffect(() => {
+        image.current.onload = () => {
+            const context = refCanvas.current.getContext('2d', {
+                willReadFrequently: true
+            });
+            refCanvas.current.width = image.current.width;
+            refCanvas.current.height = image.current.height;
+            context?.drawImage(image.current, 0, 0, image.current.width, image.current.height);
+            originalImage.current = context?.getImageData(0, 0, refCanvas.current.width, refCanvas.current.height);
+            refreshImageStyle();
+            refreshSelectionStyle(selection);
+        };
+        const unsubscription = i18nSubscribe(() => {
+            setLabels({
+                actionRestore: reactI18n('editorImageActionRestore'),
+                actionSelect: reactI18n('editorImageActionSelect')
+            });
+        });
+        window.addEventListener('resize', refreshImageStyle);
+        return () => {
+            window.removeEventListener('resize', refreshImageStyle);
+            unsubscription();
+        };
+    }, []);
+    useEffect(() => {
+        image.current.src = props.src || '';
+    }, [props.src]);
+    useEffect(() => {
+        refreshSelectionStyle(selection);
+    }, [selection]);
+    const onResizeElement = useCallback(() => {
+        refreshSelectionStyle(selection);
+    }, [selection]);
+    useRelocationOnComponent({
+        container: refImage,
+        element: refSelection,
+        onDrag: refreshOverlaysStyle
+    });
+    useResize({ refElement: refImage, onResize: onResizeElement });
+    const onCropImage = useCallback(() => {
+        const cropProps = getCropProperties();
+        const width = cropProps.width;
+        const height = width * getRatioFactor(props.ratio || '1:1');
+        refPicture.current.width = width;
+        refPicture.current.height = height;
+        const context = refPicture.current.getContext('2d');
+        context?.drawImage(refCanvas.current, cropProps.left, cropProps.top, cropProps.width, cropProps.height, 0, 0, width, height);
+        refPicture.current.toBlob((blob) => {
+            if (blob) {
+                const reader = new FileReader();
+                reader.readAsDataURL(blob);
+                reader.onloadend = function () {
+                    const value = {
+                        base64: reader.result,
+                        blob
+                    };
+                    props.onValue && props.onValue(value);
+                    props.formControl?.setValue(value);
+                };
+            }
+        }, props.mimeType || 'image/jpeg', 1);
+    }, [props.ratio, props.mimeType, props.onValue, props.formControl]);
+    const onRestore = useCallback(() => {
+        const context = refCanvas.current.getContext('2d');
+        if (originalImage.current) {
+            context?.putImageData(originalImage.current, 0, 0);
+        }
+    }, []);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-editor", children: [jsxRuntimeExports.jsx("div", { ref: refBody, className: "rls-image-editor__body", children: jsxRuntimeExports.jsxs("div", { ref: refImage, className: "rls-image-editor__body__image", children: [jsxRuntimeExports.jsx("div", { ref: refSelection, className: "rls-image-editor__body__selection" }), jsxRuntimeExports.jsx("div", { ref: refOverlayTop, className: "rls-image-editor__body__overlay--top" }), jsxRuntimeExports.jsx("div", { ref: refOverlayRight, className: "rls-image-editor__body__overlay--right" }), jsxRuntimeExports.jsx("div", { ref: refOverlayBottom, className: "rls-image-editor__body__overlay--bottom" }), jsxRuntimeExports.jsx("div", { ref: refOverlayLeft, className: "rls-image-editor__body__overlay--left" }), jsxRuntimeExports.jsx("canvas", { ref: refCanvas })] }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__footer", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-editor__sliders", children: jsxRuntimeExports.jsx(RlsSlider, { prefixIcon: "external-link", value: selection, minValue: 50, maxValue: 100, onValue: setSelection, disabled: props.disabled }) }), jsxRuntimeExports.jsxs("div", { className: "rls-image-editor__actions", children: [props.children, jsxRuntimeExports.jsx(RlsButton, { type: "classic", prefixIcon: "refresh", onClick: onRestore, disabled: props.disabled, children: labels.actionRestore }), jsxRuntimeExports.jsx(RlsButton, { type: "raised", prefixIcon: "crop", onClick: onCropImage, disabled: props.disabled, children: labels.actionSelect })] })] }), jsxRuntimeExports.jsx("canvas", { ref: refPicture })] }));
+}
+
+const mimeTypeSupports = [
+    'image/png',
+    'image/jpg',
+    'image/jpeg',
+    'image/bmp',
+    'image/webp',
+    'image/gif',
+    'image/svg+xml'
+];
+function RlsImageChooser(props) {
+    const refInput = useRef(null);
+    const [labels, setLabels] = useState({
+        actionCancel: reactI18n('chooserImageActionCancel')
+    });
+    const [src, setSrc] = useState();
+    const [srcEditor, setSrcEditor] = useState();
+    const onSelect = useCallback(() => {
+        refInput.current.click();
+    }, []);
+    const processImage = useCallback((file) => {
+        const reader = new FileReader();
+        reader.onload = function () {
+            setSrcEditor(reader.result);
+            refInput.current.value = '';
+        };
+        reader.readAsDataURL(file);
+    }, []);
+    useEffect(() => {
+        refInput.current.onchange = () => {
+            if (refInput.current.files &&
+                mimeTypeSupports.includes(refInput.current.files[0].type)) {
+                processImage(refInput.current.files[0]);
+            }
+        };
+        return i18nSubscribe(() => {
+            setLabels({
+                actionCancel: reactI18n('chooserImageActionCancel')
+            });
+        });
+    }, []);
+    useEffect(() => {
+        props.src && setSrc(props.src);
+    }, [props.src]);
+    const onEditorValue = useCallback((image) => {
+        setSrc(image.base64);
+        setSrcEditor(undefined);
+        props.onValue && props.onValue(image);
+    }, [props.onValue]);
+    const onCancel = useCallback(() => {
+        setSrcEditor(undefined);
+    }, []);
+    return (jsxRuntimeExports.jsxs("div", { className: "rls-image-chooser", children: [jsxRuntimeExports.jsx("div", { className: "rls-image-chooser__avatar", onClick: onSelect, children: src && jsxRuntimeExports.jsx("img", { src: src }) }), srcEditor && (jsxRuntimeExports.jsx(RlsModal, { className: "rls-image-chooser__modal", visible: true, children: jsxRuntimeExports.jsx(RlsImageEditor, { src: srcEditor, formControl: props.formControl, onValue: onEditorValue, children: jsxRuntimeExports.jsx(RlsButton, { type: "flat", rlsTheme: "danger", onClick: onCancel, disabled: props.disabled, children: labels.actionCancel }) }) })), jsxRuntimeExports.jsx("input", { ref: refInput, type: "file", disabled: props.disabled })] }));
+}
+
 const DURATION_ANIMATION = 240;
 const DURATION_CHAR = 75;
 const DURATION_MAX = 9000;
@@ -3213,5 +3648,5 @@ function RlsApplication({ children }) {
         }, children: [jsxRuntimeExports.jsxs("div", { className: className, children: [children, RlsSnackbar] }), RlsConfirmation] }));
 }
 
-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, 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, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsTabularText, RlsToolbar, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useListController, 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, RlsFieldReadonly, RlsFieldSelect, RlsFieldSelectTemplate, RlsFieldText, RlsFormNavigation, RlsIcon, 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, rangeFormatTemplate, renderClassStatus, setErrorsI18n, useConfirmation, useDatatable, useFieldAutocomplete, useFieldSelect, useListController, useRelocationOnComponent, useResize, useSnackbar };
 //# sourceMappingURL=index.js.map