@rolster/react-components 18.22.4 → 18.22.5

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

@@ -514,13 +514,65 @@
   transition: all 160ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=CheckBox.css.map */
 
+.rls-skeleton {
+  --pvt-height: var(--rlc-skeleton-height, inherit);
+  --pvt-max-height: var(--rlc-skeleton-max-height, inherit);
+  --pvt-min-height: var(--rlc-skeleton-min-height, inherit);
+  --pvt-color-primary: var(--rls-app-color-100);
+  --pvt-color-secondary: var(--rls-app-color-200);
+  position: relative;
+  width: 100%;
+  height: var(--pvt-height);
+  max-height: var(--pvt-max-height);
+  min-height: var(--pvt-min-height);
+  line-height: var(--pvt-height);
+  background: linear-gradient(
+    90deg,
+    var(--pvt-color-primary) 25%,
+    var(--pvt-color-secondary) 50%,
+    var(--pvt-color-primary) 75%
+  );
+  overflow: hidden;
+  background-size: 200% 100%;
+  animation: skeleton-animation 1600ms infinite;
+  border-radius: var(--rls-sizing-x2);
+}
+.rls-skeleton[rls-theme] {
+  --pvt-color-primary: var(--rls-theme-color-100);
+  --pvt-color-secondary: var(--rls-theme-color-200);
+}
+@keyframes skeleton-animation {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+} /*# sourceMappingURL=Skeleton.css.map */
+
 .rls-image {
-  content-visibility: auto;
-  background-color: var(--rls-theme-color-600);
-  opacity: 0;
+  --pvt-background: transparent;
+  --pvt-width: var(--rlc-image-width, 100%);
+  --pvt-height: var(--rlc-image-height, 100%);
+  --pvt-img-display: none;
+  --rlc-skeleton-width: var(--pvt-width);
+  --rlc-skeleton-height: var(--pvt-height);
+  width: var(--pvt-width);
+  height: var(--pvt-height);
+  overflow: hidden;
 }
 .rls-image--complet {
-  opacity: 1;
+  --pvt-img-display: block;
+  background: var(--pvt-background);
+}
+.rls-image[rls-theme] {
+  --pvt-background: var(--rls-theme-color-600);
+}
+.rls-image > img {
+  display: var(--pvt-img-display);
+  width: var(--pvt-width);
+  height: var(--pvt-height);
+  content-visibility: auto;
 } /*# sourceMappingURL=Image.css.map */
 
 .rls-input {
@@ -883,44 +935,6 @@
   transition: all 160ms 0ms var(--rls-standard-curve);
 } /*# sourceMappingURL=RadioButton.css.map */
 
-.rls-skeleton {
-  --pvt-height: var(--rlc-skeleton-height, inherit);
-  --pvt-max-height: var(--rlc-skeleton-max-height, inherit);
-  --pvt-min-height: var(--rlc-skeleton-min-height, inherit);
-  position: relative;
-  width: 100%;
-  max-height: var(--pvt-max-height);
-  min-height: var(--pvt-min-height);
-  height: var(--pvt-height);
-  line-height: var(--pvt-height);
-  letter-spacing: inherit;
-  overflow: hidden;
-  background: var(--rls-theme-color-100);
-  border-radius: var(--rls-sizing-x2);
-}
-.rls-skeleton::after {
-  position: absolute;
-  content: '';
-  top: 0rem;
-  right: 0rem;
-  bottom: 0rem;
-  left: 0rem;
-  transform: translateX(-100%);
-  background-image: linear-gradient(
-    90deg,
-    var(--rls-theme-skeleton-200) 0%,
-    var(--rls-theme-skeleton-200) 20%,
-    var(--rls-theme-skeleton-300) 60%,
-    var(--rls-theme-skeleton-200)
-  );
-  animation: skeleton-animation 1600ms infinite;
-}
-@keyframes skeleton-animation {
-  100% {
-    transform: translateX(100%);
-  }
-} /*# sourceMappingURL=Skeleton.css.map */
-
 .rls-skeleton-text {
   --pvt-height: var(--rlc-skeleton-text-height, var(--rls-body-line-height));
   --rlc-skeleton-height: var(--pvt-height);

package/dist/cjs/index.js

@@ -1554,7 +1554,11 @@ function RlsCheckBoxControl({ formControl, disabled, identifier, rlsTheme }) {
     return (jsxRuntimeExports.jsx(RlsCheckBox, { identifier: identifier, checked: !!formControl.value, disabled: disabled, onClick: onClick, rlsTheme: rlsTheme }));
 }
 
-function RlsImage({ src }) {
+function RlsSkeleton({ rlsTheme }) {
+    return jsxRuntimeExports.jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
+}
+
+function RlsImage({ src, rlsTheme }) {
     const [isComplet, setIsComplet] = require$$0.useState(false);
     const refSrc = require$$0.useRef(src);
     const className = require$$0.useMemo(() => {
@@ -1569,7 +1573,7 @@ function RlsImage({ src }) {
     const onLoad = require$$0.useCallback(() => {
         setIsComplet(true);
     }, []);
-    return jsxRuntimeExports.jsx("img", { className: className, src: src, onLoad: onLoad });
+    return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [!isComplet && jsxRuntimeExports.jsx(RlsSkeleton, { rlsTheme: rlsTheme }), jsxRuntimeExports.jsx("img", { src: src, onLoad: onLoad })] }));
 }
 
 function RlsInput({ children, decimals, disabled, formControl, identifier, onBlur, onEnter, onFocus, onKeyDown, onKeyUp, onValue, placeholder, readOnly, type, value }) {
@@ -1721,10 +1725,6 @@ function RlsRadioButton({ checked, disabled, identifier, rlsTheme, onClick }) {
     return (jsxRuntimeExports.jsx("div", { id: identifier, className: className, onClick: onClick, "rls-theme": rlsTheme, children: jsxRuntimeExports.jsx("div", { className: "rls-radiobutton__component" }) }));
 }
 
-function RlsSkeleton({ rlsTheme }) {
-    return jsxRuntimeExports.jsx("div", { className: "rls-skeleton", "rls-theme": rlsTheme });
-}
-
 function RlsSkeletonText({ active, children, rlsTheme }) {
     return (jsxRuntimeExports.jsx("div", { className: "rls-skeleton-text", "rls-theme": rlsTheme, children: active ? (jsxRuntimeExports.jsx(RlsSkeleton, {})) : (jsxRuntimeExports.jsx("label", { className: "rls-skeleton-text__value", children: children })) }));
 }