@rolster/react-components 18.21.46 → 18.22.1

package/dist/es/index.js

@@ -2279,6 +2279,61 @@ function RlsPickerYear({ date: _date, disabled, formControl, maxDate, minDate, o
     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...'
@@ -2560,6 +2621,126 @@ function useListController(props) {
     };
 }
 
+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) {
@@ -2739,11 +2920,11 @@ function RlsFieldAutocomplete(props) {
     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}';
@@ -3134,6 +3315,259 @@ 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 = props.imgWidth || 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,
+        props.imgWidth
+    ]);
+    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, imgWidth: props.imgWidth, 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;
@@ -3220,5 +3654,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