@websolutespa/bom-mixer-ui 1.7.7 → 1.7.9

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @websolutespa/bom-mixer-ui
 
+## 1.7.9
+
+### Patch Changes
+
+- Modified: SvgAnimation over mode last frame
+- Modified: Media, MediaImage using exact dimensions
+- Updated dependencies
+  - @websolutespa/bom-mixer-models@1.7.3
+  - @websolutespa/bom-core@1.7.4
+
+## 1.7.8
+
+### Patch Changes
+
+- 75b1311: Fixing: Media srcset breakpoints
+
 ## 1.7.7
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -4383,14 +4383,21 @@ const MediaImage = _a => {
   }));
 };
 function getMediaSizes(mediaQuery, ratio, size) {
+  // console.log('getMediaSizes', size, ratio);
   if (size) {
     if (typeof size === 'number') {
-      return Object.entries(ratio).map(_ref2 => {
+      const s = size;
+      // console.log('typeof size === \'number\'', size);
+      const sizes = Object.entries(ratio).map(_ref2 => {
         let [k, v] = _ref2;
-        return [size, parseInt(String(mediaQuery[k])), v];
-      });
+        const w = IMAGE_SIZEMAP[k];
+        return [w && s > w ? w : s, parseInt(String(mediaQuery[k])), v];
+      }).filter(x => x[0] >= x[1]);
+      // console.log(size, 'sizes', sizes);
+      return sizes;
     }
     if (isMediaSizeVariant(size)) {
+      // console.log('isMediaSizeVariant');
       const sizeLimit = IMAGE_SIZEMAP[size] || 0;
       // console.log(size, ratio[size], sizeLimit);
       return Object.entries(IMAGE_SIZEMAP).filter(_ref3 => {
@@ -4403,10 +4410,13 @@ function getMediaSizes(mediaQuery, ratio, size) {
     }
   }
   size = size || IMAGE_SIZEMAP;
-  return Object.entries(size).map(_ref5 => {
+  // console.log('size || IMAGE_SIZEMAP', size, IMAGE_SIZEMAP);
+  const sizes = Object.entries(size).map(_ref5 => {
     let [k, v] = _ref5;
     return [v, parseInt(String(mediaQuery[k])), ratio[k]];
   });
+  // console.log(size, 'sizes', sizes, ratio);
+  return sizes;
 }
 function getImageProps(_a, mediaQuery) {
   var {
@@ -4424,15 +4434,25 @@ function getImageProps(_a, mediaQuery) {
       size
     } = props,
     otherProps = __rest(props, ["width", "height", "size"]);
+  let useSize = size;
+  if (typeof width === 'string' && width.indexOf('px') !== -1) {
+    useSize = parseInt(width);
+  }
+  // console.log(useSize, width);
   const ratio = getMediaRatio(props);
-  const sizes = getMediaSizes(mediaQuery, ratio, size);
+  const sizes = getMediaSizes(mediaQuery, ratio, useSize);
   const imageSrc = getImageSrc(src, sizes[0][0], sizes[0][2]);
   const imageSrcSet = getImageSrcset(src, sizes);
   const imageSizes = getImageSizes(sizes);
+  let useWidth = typeof width === 'string' ? parseInt(width) : width;
+  let useHeight = typeof height === 'string' ? parseInt(height) : height;
+  // console.log('width', width, 'useWidth', useWidth, 'height', height, 'useHeight', useHeight, 'useSize', useSize);
   return Object.assign({
     src: imageSrc,
     srcSet: imageSrcSet,
-    sizes: imageSizes
+    sizes: imageSizes,
+    width: useWidth ? `${useWidth}px` : undefined,
+    height: useHeight ? `${useHeight}px` : undefined
   }, otherProps);
 }
 function getMediaRatio(props) {
@@ -4492,7 +4512,7 @@ function getImageSrcset(src, sizes, quality) {
   return sizes.length > 1 ? sizes.map(size => getImageSrc(src, size[0], size[2], quality) + ` ${size[0]}w`).join(', ') : undefined;
 }
 function getImageSizes(sizes) {
-  return sizes.length > 1 ? sizes.map((size, i) => `${i < sizes.length - 1 ? `(max-width: ${sizes[i + 1][1]}px) ` : ''}${size[0]}px`).join(', ') : undefined;
+  return sizes.length > 1 ? sizes.map((size, i) => `${i < sizes.length - 1 ? `(max-width: ${sizes[i + 1][1] - 1}px) ` : ''}${size[0]}px`).join(', ') : undefined;
 }
 function isSVG(src) {
   return src.indexOf('.svg') !== -1;
@@ -4628,6 +4648,7 @@ const MediaBase = /*#__PURE__*/React.forwardRef((_a, ref) => {
   const classNames = bomCore.getClassNames(className, 'media', {
     'media--gallery': id
   });
+  // console.log('props.width', props.width, 'props.height', props.height);
   const mediaChildren = item && !children ? getMediaItems(item, {
     width,
     height,
@@ -4694,16 +4715,22 @@ function getMediaItems(itemOrItems, options) {
     if (x.title) {
       mediaItem.title = x.title;
     }
+    mediaItem.width = options.width || x.width;
+    /*
     if (options.width) {
       mediaItem.width = parseInt(String(options.width));
     } else if (x.width) {
       mediaItem.width = x.width;
     }
+    */
+    mediaItem.height = options.height || x.height;
+    /*
     if (options.height) {
       mediaItem.height = parseInt(String(options.height));
     } else if (x.height) {
       mediaItem.height = x.height;
     }
+    */
     mediaItem.aspectRatio = options.aspectRatio;
     mediaItem.aspectRatioSm = options.aspectRatioSm;
     mediaItem.aspectRatioMd = options.aspectRatioMd;
@@ -4712,7 +4739,8 @@ function getMediaItems(itemOrItems, options) {
     return mediaItem;
   });
   const hasGallery = options.galleryId != null && typeof options.open === 'function';
-  const getMediaItemProps = media => {
+  const getMediaItemProps = _a => {
+    var media = __rest(_a, ["width", "height"]);
     const title = media.title || options.title || media.alt || options.alt;
     const alt = media.alt || options.alt || media.title || options.title;
     const src = media.src || media.url || '';
@@ -4734,8 +4762,9 @@ function getMediaItems(itemOrItems, options) {
       };
     }
     if (bomCore.resolveMediaType(media) === 'image') {
-      let width = undefined;
-      let height = undefined;
+      /*
+      let width: number | undefined = undefined;
+      let height: number | undefined = undefined;
       if (options.width) {
         width = parseInt(String(options.width));
       }
@@ -4744,14 +4773,18 @@ function getMediaItems(itemOrItems, options) {
         height = parseInt(String(options.height));
       }
       props.height = height;
-      if (options.eager) {
-        props.loading = 'eager';
-      }
+      console.log('width', width, options.width, 'height', height, options.height);
+      */
+      props.width = options.width;
+      props.height = options.height;
       props.aspectRatio = options.aspectRatio;
       props.aspectRatioSm = options.aspectRatioSm;
       props.aspectRatioMd = options.aspectRatioMd;
       props.aspectRatioLg = options.aspectRatioLg;
       props.aspectRatioXl = options.aspectRatioXl;
+      if (options.eager) {
+        props.loading = 'eager';
+      }
     }
     return props;
   };
@@ -6746,11 +6779,18 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
           return;
         }
         // console.log(playerRef.current.currentFrame);
-        if (mode === SvgAnimationStrategy.Default) {
-          playerRef.current.goToAndPlay(0);
-        }
-        if (mode === SvgAnimationStrategy.Once && playerRef.current.currentFrame === 0) {
-          playerRef.current.goToAndPlay(0);
+        switch (mode) {
+          case SvgAnimationStrategy.Default:
+            playerRef.current.goToAndPlay(0);
+            break;
+          case SvgAnimationStrategy.Once:
+            if (playerRef.current.currentFrame === 0) {
+              playerRef.current.goToAndPlay(0);
+            }
+            break;
+          case SvgAnimationStrategy.Over:
+            playerRef.current.goToAndStop(playerRef.current.totalFrames - 1, true);
+            break;
         }
       }
     } else {
@@ -6802,9 +6842,9 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
       playerRef.current.goToAndPlay(0);
     }
   };
-  const onMouseOver = event => {
-    if (typeof props.onMouseOver === 'function') {
-      props.onMouseOver(event);
+  const onMouseEnter = event => {
+    if (typeof props.onMouseEnter === 'function') {
+      props.onMouseEnter(event);
     }
     if (!playerRef.current) {
       return;
@@ -6813,6 +6853,17 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
       playerRef.current.goToAndPlay(0);
     }
   };
+  const onMouseLeave = event => {
+    if (typeof props.onMouseLeave === 'function') {
+      props.onMouseLeave(event);
+    }
+    if (!playerRef.current) {
+      return;
+    }
+    if (mode === SvgAnimationStrategy.Over) {
+      playerRef.current.goToAndStop(playerRef.current.totalFrames - 1, true);
+    }
+  };
   const classNames = bomCore.getClassNames('lottie', className, {
     loading: !animationData
   });
@@ -6820,7 +6871,8 @@ const SvgAnimation = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
     ref: elementRef,
     className: classNames
   }, props, {
-    onMouseOver: onMouseOver,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     children: [animationData && jsxRuntime.jsx(LottiePlayerLight__default.default, {
       ref: playerRef,
       animationData: animationData,