@shopgate/engage 7.29.0-alpha.10 → 7.29.0-alpha.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopgate/engage",
-  "version": "7.29.0-alpha.10",
+  "version": "7.29.0-alpha.12",
   "description": "Shopgate's ENGAGE library.",
   "license": "Apache-2.0",
   "author": "Shopgate <support@shopgate.com>",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@shopgate/native-modules": "1.0.0-beta.25",
-    "@shopgate/pwa-common": "7.29.0-alpha.10",
-    "@shopgate/pwa-common-commerce": "7.29.0-alpha.10",
-    "@shopgate/pwa-core": "7.29.0-alpha.10",
-    "@shopgate/pwa-ui-ios": "7.29.0-alpha.10",
-    "@shopgate/pwa-ui-material": "7.29.0-alpha.10",
-    "@shopgate/pwa-ui-shared": "7.29.0-alpha.10",
+    "@shopgate/pwa-common": "7.29.0-alpha.12",
+    "@shopgate/pwa-common-commerce": "7.29.0-alpha.12",
+    "@shopgate/pwa-core": "7.29.0-alpha.12",
+    "@shopgate/pwa-ui-ios": "7.29.0-alpha.12",
+    "@shopgate/pwa-ui-material": "7.29.0-alpha.12",
+    "@shopgate/pwa-ui-shared": "7.29.0-alpha.12",
     "@stripe/react-stripe-js": "^1.16.5",
     "@stripe/stripe-js": "^1.3.1",
     "@virtuous/conductor": "~2.5.0",

package/page/components/ResponsiveWidgetImage/ResponsiveWidgetImage.js

@@ -1,7 +1,7 @@
-var _excluded=["src","alt","breakpoint"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo}from'react';import PropTypes from'prop-types';import{useTheme,makeStyles}from'@shopgate/engage/styles';import{parseImageUrl}from"../../helpers";/** @typedef {import('@shopgate/engage/styles').Theme} Theme */ /** @typedef {Theme['breakpoints']['keys'][0]} Breakpoint */ /** @typedef {React.ImgHTMLAttributes<HTMLImageElement>} ImgProps */ /** @typedef {{breakpoint: Breakpoint} & ImgProps} ResponsiveImageProps */var useStyles=makeStyles()({preventSave:{userSelect:'none',' img':{userSelect:'none',pointerEvents:'none'}}});/**
+var _excluded=["src","alt","breakpoint","className"];function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _objectWithoutProperties(source,excluded){if(source==null)return{};var target=_objectWithoutPropertiesLoose(source,excluded);var key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++){key=sourceSymbolKeys[i];if(excluded.indexOf(key)>=0)continue;if(!Object.prototype.propertyIsEnumerable.call(source,key))continue;target[key]=source[key];}}return target;}function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return{};var target={};var sourceKeys=Object.keys(source);var key,i;for(i=0;i<sourceKeys.length;i++){key=sourceKeys[i];if(excluded.indexOf(key)>=0)continue;target[key]=source[key];}return target;}import React,{useMemo}from'react';import PropTypes from'prop-types';import{makeStyles,useResponsiveValue}from'@shopgate/engage/styles';import{parseImageUrl}from"../../helpers";/** @typedef {import('@shopgate/engage/styles').Theme} Theme */ /** @typedef {Theme['breakpoints']['keys'][0]} Breakpoint */ /** @typedef {React.ImgHTMLAttributes<HTMLImageElement>} ImgProps */ /** @typedef {{breakpoint: Breakpoint} & ImgProps} ResponsiveImageProps */var useStyles=makeStyles()({preventSave:{userSelect:'none',pointerEvents:'none'}});/**
  * The ResponsiveWidgetImage component renders an image that adapts to different screen sizes.
  * It uses the <picture> element to provide a higher resolution image for medium and larger screens.
  *
  * @param {ResponsiveImageProps} props The component props.
  * @returns {JSX.Element}
- */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,imgProps=_objectWithoutProperties(_ref,_excluded);var _useTheme=useTheme(),breakpoints=_useTheme.breakpoints;var _useStyles=useStyles(),classes=_useStyles.classes;var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);if(!src){return null;}return React.createElement("picture",{onContextMenu:function onContextMenu(e){return e.preventDefault();},className:classes.preventSave},React.createElement("source",{media:"(width >= ".concat(breakpoints.values[breakpoint],"px)"),srcSet:src2x}),React.createElement("img",_extends({src:src,alt:alt,loading:"lazy"},imgProps)));};ResponsiveWidgetImage.defaultProps={alt:null,breakpoint:'md'};export default ResponsiveWidgetImage;
+ */var ResponsiveWidgetImage=function ResponsiveWidgetImage(_ref){var src=_ref.src,alt=_ref.alt,breakpoint=_ref.breakpoint,className=_ref.className,imgProps=_objectWithoutProperties(_ref,_excluded);var _useStyles=useStyles(),classes=_useStyles.classes,cx=_useStyles.cx;var src2x=useMemo(function(){return parseImageUrl(src,true);},[src]);var imgSrc=useResponsiveValue(_defineProperty({xs:src},breakpoint,src2x));if(!src){return null;}return React.createElement("img",_extends({src:imgSrc,alt:alt,loading:"lazy",className:cx(classes.preventSave,className)},imgProps));};ResponsiveWidgetImage.defaultProps={src:null,alt:null,breakpoint:'md',className:null};export default ResponsiveWidgetImage;

package/page/widgets/ImageSlider/hooks.js

@@ -9,7 +9,7 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @property {ImageSliderImageData} image The image data object.
  * @property {string} [link] The link URL.
  */ /**
- * @typedef {Object} ImageWidgetConfig
+ * @typedef {Object} ImageSliderWidgetConfig
  * @property {ImageSliderImage[]} images The image objects.
  * @property {boolean} slideAutomatic Whether the slider should automatically slide.
  * @property {boolean} endlessSlider Whether the slider should loop endlessly.
@@ -19,15 +19,16 @@ function _extends(){_extends=Object.assign||function(target){for(var i=1;i<argum
  * @property {number} slidesPerViewCustomMedium Slides per view for medium screens.
  * @property {number} slidesPerViewCustomLarge Slides per view for large screens.
  * @property {number} imageSpacing Optional gap between image slides (in pixels).
+ * @property {"default"|"off"|"bullets"|"progressbar"|"fraction"} paginationStyle
+ * the pagination type for the slider.
  */ /**
  * @typedef {ReturnType< typeof import('@shopgate/engage/page/hooks')
- *   .useWidget<ImageWidgetConfig> >} UseWidgetReturnType
+ *   .useWidget<ImageSliderWidgetConfig> >} UseWidgetReturnType
  */ // eslint-disable-next-line valid-jsdoc
 /**
  * Hook to access the ImageSlider widget configuration and data.
- */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge,imageSpacing=config.imageSpacing;/**
+ */export var useImageSliderWidget=function useImageSliderWidget(){/** @type {UseWidgetReturnType}  */var _useWidget=useWidget(),config=_useWidget.config,isPreview=_useWidget.isPreview;var theme=useTheme();var images=config.images,slideAutomatic=config.slideAutomatic,endlessSlider=config.endlessSlider,sliderSpeed=config.sliderSpeed,slidesPerView=config.slidesPerView,slidesPerViewCustomSmall=config.slidesPerViewCustomSmall,slidesPerViewCustomMedium=config.slidesPerViewCustomMedium,slidesPerViewCustomLarge=config.slidesPerViewCustomLarge,imageSpacing=config.imageSpacing,_config$paginationSty=config.paginationStyle,paginationStyle=_config$paginationSty===void 0?'bullets':_config$paginationSty;var paginationType=useMemo(function(){return paginationStyle==='default'?'bullets':paginationStyle.toLowerCase();},[paginationStyle]);var imagesWithUrls=useMemo(function(){return images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;});},[images]);/**
    * @type {SwiperCmpProps}
-   */var swiperProps=useMemo(function(){var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:slidesPerViewMedium}),theme.breakpoints.values.md,{slidesPerView:slidesPerViewLarge});return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints,spaceBetween:imageSpacing},isPreview?{// Improves interaction with the slider in the CMS preview iframe
-touchStartPreventDefault:true,// Create a component key from breakpoint settings to force remount on breakpoint change.
-// This fixes issues with the Swiper when breakpoint settings change during runtime.
-key:JSON.stringify(_extends({slidesPerView:slidesPerView,spaceBetween:imageSpacing},breakpoints))}:{});},[isPreview,slidesPerView,slideAutomatic,sliderSpeed,endlessSlider,theme.breakpoints.values,slidesPerViewCustomMedium,slidesPerViewCustomLarge,slidesPerViewCustomSmall,imageSpacing]);return{slides:images.filter(function(img){var _img$image;return img===null||img===void 0?void 0:(_img$image=img.image)===null||_img$image===void 0?void 0:_img$image.url;}),swiperProps:swiperProps};};
+   */var swiperProps=useMemo(function(){var slidesPerViewSmall=1.0;var slidesPerViewMedium=1.3;var slidesPerViewLarge=1.6;if(slidesPerView==='dense'){slidesPerViewSmall=1.3;slidesPerViewMedium=1.8;slidesPerViewLarge=2.3;}else if(slidesPerView==='custom'){slidesPerViewSmall=slidesPerViewCustomSmall;slidesPerViewMedium=slidesPerViewCustomMedium;slidesPerViewLarge=slidesPerViewCustomLarge;}var breakpoints=_defineProperty(_defineProperty({},theme.breakpoints.values.sm,{slidesPerView:slidesPerViewMedium}),theme.breakpoints.values.md,{slidesPerView:slidesPerViewLarge});var showPagination=paginationType!=='off'&&imagesWithUrls.length>1;// Create a key that changes when relevant config changes, to force remount of Swiper
+var componentKey=isPreview?JSON.stringify(_extends({slidesPerView:slidesPerView,spaceBetween:imageSpacing,paginationType:paginationType,showPagination:showPagination},breakpoints)):null;return _extends({autoplay:slideAutomatic?{delay:sliderSpeed}:false,loop:endlessSlider,slidesPerView:slidesPerViewSmall,breakpoints:breakpoints,spaceBetween:imageSpacing,pagination:showPagination?{type:paginationType,clickable:true,dynamicBullets:true}:false},isPreview?{key:componentKey,// Improves interaction with the slider in the CMS preview iframe
+touchStartPreventDefault:true}:{});},[slidesPerView,theme.breakpoints.values.sm,theme.breakpoints.values.md,paginationType,imagesWithUrls.length,imageSpacing,slideAutomatic,sliderSpeed,endlessSlider,isPreview,slidesPerViewCustomSmall,slidesPerViewCustomMedium,slidesPerViewCustomLarge]);return{slides:imagesWithUrls,swiperProps:swiperProps};};