@rolster/react-components 18.22.2 → 18.22.4

package/dist/cjs/assets/{index-CkCoIjNb.css → index-DrZV0dgi.css}

@@ -514,6 +514,15 @@
   transition: all 160ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=CheckBox.css.map */
 
+.rls-image {
+  content-visibility: auto;
+  background-color: var(--rls-theme-color-600);
+  opacity: 0;
+}
+.rls-image--complet {
+  opacity: 1;
+} /*# sourceMappingURL=Image.css.map */
+
 .rls-input {
   --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
   --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
@@ -1275,18 +1284,20 @@
   width: auto;
 }
 .rls-label-checkbox__text {
-  max-width: calc(100% - var(--rls-sizing-x16));
-  height: var(--pvt-text-height);
-  line-height: var(--rls-sizing-x12);
+  max-width: calc(100% - var(--rls-sizing-x28));
   color: var(--rls-app-color-600);
+  line-height: var(--pvt-text-height);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   user-select: none;
   opacity: var(--pvt-text-opacity);
-  overflow: var(--pvt-text-overflow);
-  white-space: var(--pvt-text-white-space);
-  text-overflow: var(--pvt-text-text-overflow);
+}
+.rls-label-checkbox__text > p {
+  height: initial;
+  overflow: initial;
+  text-overflow: initial;
+  white-space: initial;
 } /*# sourceMappingURL=LabelCheckBox.css.map */
 
 .rls-label-radiobutton {
@@ -1314,18 +1325,20 @@
   width: auto;
 }
 .rls-label-radiobutton__text {
-  max-width: calc(100% - var(--rls-sizing-x16));
-  height: var(--pvt-text-height);
-  line-height: var(--rls-sizing-x12);
+  max-width: calc(100% - var(--rls-sizing-x28));
   color: var(--rls-app-color-600);
+  line-height: var(--pvt-text-height);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   user-select: none;
   opacity: var(--pvt-text-opacity);
-  overflow: var(--pvt-text-overflow);
-  white-space: var(--pvt-text-white-space);
-  text-overflow: var(--pvt-text-text-overflow);
+}
+.rls-label-radiobutton__text > p {
+  height: initial;
+  overflow: initial;
+  text-overflow: initial;
+  white-space: initial;
 } /*# sourceMappingURL=LabelRadioButton.css.map */
 
 .rls-label-switch {
@@ -1353,17 +1366,19 @@
 }
 .rls-label-switch__text {
   max-width: calc(100% - var(--rls-sizing-x28));
-  height: var(--pvt-text-height);
-  line-height: var(--rls-sizing-x12);
   color: var(--rls-app-color-600);
+  line-height: var(--pvt-text-height);
   font-size: var(--rls-label-font-size);
   font-weight: var(--rls-font-weight-medium);
   letter-spacing: var(--rls-label-letter-spacing);
   user-select: none;
   opacity: var(--pvt-text-opacity);
-  overflow: var(--pvt-text-overflow);
-  white-space: var(--pvt-text-white-space);
-  text-overflow: var(--pvt-text-text-overflow);
+}
+.rls-label-switch__text > p {
+  height: initial;
+  overflow: initial;
+  text-overflow: initial;
+  white-space: initial;
 } /*# sourceMappingURL=LabelSwitch.css.map */
 
 .rls-pagination {

package/dist/cjs/index.js

@@ -1554,6 +1554,24 @@ function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
 }
 
+function RlsImage({ src }) {
+    const [isComplet, setIsComplet] = require$$0.useState(false);
+    const refSrc = require$$0.useRef(src);
+    const className = require$$0.useMemo(() => {
+        return renderClassStatus('rls-image', { complet: isComplet });
+    }, [isComplet]);
+    require$$0.useEffect(() => {
+        if (refSrc.current !== src) {
+            setIsComplet(false);
+            refSrc.current = src;
+        }
+    }, [src]);
+    const onLoad = require$$0.useCallback(() => {
+        setIsComplet(true);
+    }, []);
+    return jsxRuntimeExports.jsx("img", { className: className, src: src, onLoad: onLoad });
+}
+
 function RlsInput({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
     const valueInitial = formControl?.value ?? value ? String(value) : '';
     const [valueInput, setValueInput] = require$$0.useState(valueInitial);
@@ -1887,7 +1905,7 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-label-checkbox', { disabled, extended });
     }, [disabled, extended]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-checkbox__text", children: children })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsCheckBox, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-checkbox__text", children: children })] }));
 }
 
 function RlsLabelRadioButton({ children, disabled, extended, identifier, formControl, rlsTheme, value }) {
@@ -1901,7 +1919,7 @@ function RlsLabelRadioButton({ children, disabled, extended, identifier, formCon
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-label-radiobutton', { disabled, extended });
     }, [disabled, extended]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-radiobutton__text", children: children })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__component", onClick: onSelect, children: jsxRuntimeExports.jsx(RlsRadioButton, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-radiobutton__text", children: children })] }));
 }
 
 function RlsLabelSwitch({ children, disabled, extended, identifier, formControl, rlsTheme }) {
@@ -1917,7 +1935,7 @@ function RlsLabelSwitch({ children, disabled, extended, identifier, formControl,
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-label-switch', { disabled, extended });
     }, [disabled, extended]);
-    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("label", { className: "rls-label-switch__text", children: children })] }));
+    return (jsxRuntimeExports.jsxs("div", { id: identifier, className: className, "rls-theme": rlsTheme, children: [jsxRuntimeExports.jsx("div", { className: "rls-label-switch__component", onClick: onToggle, children: jsxRuntimeExports.jsx(RlsSwitch, { checked: checked, disabled: disabled }) }), jsxRuntimeExports.jsx("div", { className: "rls-label-switch__text", children: children })] }));
 }
 
 function RlsPagination({ suggestions, count, filter, onPagination }) {
@@ -3378,25 +3396,28 @@ function RlsImageEditor(props) {
         refOverlayLeft.current.style.width = `calc(${left}px)`;
     }, []);
     const refreshSelectionFromWidth = require$$0.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;
+        const ratioFactor = getRatioFactor(props.ratio || '1:1');
+        const _ratio = rateSelection * ratioFactor;
+        const offsetWidth = refImage.current?.offsetWidth || 0;
+        const offsetHeight = refImage.current?.offsetHeight || 0;
+        let width = (offsetWidth * rateSelection) / 100;
+        let height = (offsetWidth * _ratio) / 100;
+        if (height > offsetHeight) {
+            height = offsetHeight;
+            width = height / ratioFactor;
         }
         return { height, width };
     }, [props.ratio]);
     const refreshSelectionFromHeight = require$$0.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;
+        const ratioFactor = getRatioFactor(props.ratio || '1:1');
+        const _ratio = rateSelection * ratioFactor;
+        const offsetWidth = refImage.current?.offsetWidth || 0;
+        const offsetHeight = refImage.current?.offsetHeight || 0;
+        let height = (offsetHeight * rateSelection) / 100;
+        let width = (offsetHeight * _ratio) / 100;
+        if (width > offsetWidth) {
+            width = offsetWidth;
+            height = width / ratioFactor;
         }
         return { height, width };
     }, [props.ratio]);
@@ -3499,13 +3520,14 @@ function RlsImageEditor(props) {
                     props.formControl?.setValue(value);
                 };
             }
-        }, props.mimeType || 'image/jpeg', 1);
+        }, props.mimeType || 'image/jpeg', props.imgQuality || 1);
     }, [
         props.ratio,
         props.mimeType,
         props.onValue,
         props.formControl,
-        props.imgWidth
+        props.imgWidth,
+        props.imgQuality
     ]);
     const onRestore = require$$0.useCallback(() => {
         const context = refCanvas.current.getContext('2d');
@@ -3567,7 +3589,7 @@ function RlsImageChooser(props) {
     const onCancel = require$$0.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 })] }));
+    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, imgQuality: props.imgQuality, 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;
@@ -3695,6 +3717,7 @@ exports.RlsFieldSelectTemplate = RlsFieldSelectTemplate;
 exports.RlsFieldText = RlsFieldText;
 exports.RlsFormNavigation = RlsFormNavigation;
 exports.RlsIcon = RlsIcon;
+exports.RlsImage = RlsImage;
 exports.RlsImageChooser = RlsImageChooser;
 exports.RlsImageEditor = RlsImageEditor;
 exports.RlsInput = RlsInput;