@rolster/react-components 18.22.2 → 18.22.4

package/dist/es/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/es/index.js

@@ -1552,6 +1552,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] = useState(false);
+    const refSrc = useRef(src);
+    const className = useMemo(() => {
+        return renderClassStatus('rls-image', { complet: isComplet });
+    }, [isComplet]);
+    useEffect(() => {
+        if (refSrc.current !== src) {
+            setIsComplet(false);
+            refSrc.current = src;
+        }
+    }, [src]);
+    const onLoad = 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] = useState(valueInitial);
@@ -1885,7 +1903,7 @@ function RlsLabelCheckBox({ children, disabled, extended, identifier, formContro
     const className = 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 }) {
@@ -1899,7 +1917,7 @@ function RlsLabelRadioButton({ children, disabled, extended, identifier, formCon
     const className = 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 }) {
@@ -1915,7 +1933,7 @@ function RlsLabelSwitch({ children, disabled, extended, identifier, formControl,
     const className = 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 }) {
@@ -3376,25 +3394,28 @@ function RlsImageEditor(props) {
         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;
+        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 = 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]);
@@ -3497,13 +3518,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 = useCallback(() => {
         const context = refCanvas.current.getContext('2d');
@@ -3565,7 +3587,7 @@ function RlsImageChooser(props) {
     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 })] }));
+    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;
@@ -3654,5 +3676,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, 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 };
+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, RlsImage, 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