tabexseriescomponents 0.0.284 → 0.0.285

package/dist/index.cjs.js

@@ -13034,7 +13034,8 @@ var CardsSection = function CardsSection(props) {
             item.tabexsectioninfo.sectioncompname == 'Categorycard_with_trianglebg' ? 'scrollmenuclassnameitemCategorycard_with_trianglebg' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_textonhover' ? 'scrollmenuclassnameitemProductcard_with_textonhover' : item.tabexsectioninfo.sectioncompname == 'Categorycard_slidebgscaled' ? 'scrollmenuclassnameitemCategorycard_slidebgscaled' : item.tabexsectioninfo.sectioncompname == 'Productccard_with_imageontopleft' ? 'scrollmenuclassnameitemProductccard_with_imageontopleft' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_zoominonhover' ? 'scrollmenuclassnameitemProductcard_with_zoominonhover' : item.tabexsectioninfo.sectioncompname == 'Horizontalcard' ? 'scrollmenuclassnameitemProductcard_Horizontalcard' : item.tabexsectioninfo.sectioncompname == 'Categorycard_fullimage' ? 'scrollmenuclassnameitemCategorycard_fullimage' :
             // : item.tabexsectioninfo.sectioncompname == 'Classiccategorycard'
             // ? 'scrollmenuclassnameitemClassiccategorycard'
-            item.tabexsectioninfo.sectioncompname == 'ModernProductCard' ? 'scrollmenuclassnameitemModernProductCard' :
+            // item.tabexsectioninfo.sectioncompname == 'ModernProductCard'
+            // ? 'scrollmenuclassnameitemModernProductCard'
             // : item.tabexsectioninfo.sectioncompname == 'Simplecategorycardwithtextbelow'
             // ? 'scrollmenuclassnameitemSimplecategorycardwithtextbelow'
             item.tabexsectioninfo.sectioncompname == 'Productcard7' ? 'scrollmenuclassnameitemProductcard7' : item.tabexsectioninfo.sectioncompname == 'MenuCard' ? 'scrollmenuclassnameitemMenuCard' : item.tabexsectioninfo.sectioncompname == 'StylishProductCard' ? 'scrollmenuclassnameitemStylishProductCard' : item.tabexsectioninfo.sectioncompname == 'ProductCardWithTextOnImage' ? 'scrollmenuclassnameitemProductCardWithTextOnImage' : item.tabexsectioninfo.sectioncompname == 'Card23' ? 'scrollmenuclassnameitemCard23' : item.tabexsectioninfo.sectioncompname == 'Card20' ? 'scrollmenuclassnameitemCard20' : item.tabexsectioninfo.sectioncompname == 'ModernCardWithQuantityButton' ? 'scrollmenuclassnameitemModernCardWithQuantityButton' : item.tabexsectioninfo.sectioncompname == 'CategoryCardwithhoveraction' ? 'scrollmenuclassnameitemCategoryCardwithhoveraction' : item.tabexsectioninfo.sectioncompname == 'CircleCardWithVariants' ? 'scrollmenuclassnameitemCircleCardWithVariants' :
@@ -41986,6 +41987,8 @@ var FullVideoSection = function FullVideoSection(props) {
       style: {
         display: sectionproperties.sectiontitleshow == 'Hide' && sectionproperties.prodCatShow == 'Hide' && sectionproperties.slideshowText2ContentFontSize == 0 ? 'none' : 'flex'
       }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      "class": "row m-0 w-100"
     }, sectionproperties.sectiontitleshow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
       "class": ' col-lg-12 p-0 d-flex d-md-none align-items-center ',
       style: {
@@ -42031,7 +42034,7 @@ var FullVideoSection = function FullVideoSection(props) {
       dangerouslySetInnerHTML: {
         __html: langdetect == 'en' ? sectionproperties.contenteditor : sectionproperties.text2editortextar
       }
-    })));
+    }))));
   };
   var Video = function Video() {
     var _Videosarrayofobjs$;
@@ -54009,7 +54012,7 @@ var ModernCardWithQuantityButton = function ModernCardWithQuantityButton(props)
 function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ModernProductCard = function ModernProductCard(props) {
-  var _css;
+  var _css, _css2;
   var _useState = React.useState(''),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
     sectionproperties = _useState2[0],
@@ -54022,7 +54025,7 @@ var ModernProductCard = function ModernProductCard(props) {
   props.actions.lang;
   var langdetect = props.actions.langdetect;
   var setShowProductInfoModalContext = props.actions.setShowProductInfoModalContext;
-  var addtofavoritescontext = props.actions.addtofavoritescontext;
+  props.actions.addtofavoritescontext;
   var setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
   var AddtoCartContext = props.actions.AddtoCartContext;
   props.actions.AddtoCartMutationContext;
@@ -54030,7 +54033,7 @@ var ModernProductCard = function ModernProductCard(props) {
   props.actions.routingcountext;
   var NotificationManager = NotificationManager;
   var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
-  var ikimagecredcontext = props.actions.ikimagecredcontext;
+  props.actions.ikimagecredcontext;
   var updatequantity = function updatequantity(type) {
     var tempitem = _objectSpread$g({}, item);
     tempitem.quantity = parseInt(tempitem.quantity);
@@ -54098,7 +54101,16 @@ var ModernProductCard = function ModernProductCard(props) {
   };
   var card_cssstyles = {
     productcard: glamor.css({
+      minWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.width + 'px',
+      maxWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.width + 'px',
+      '@media (max-width: 800px)': {
+        minWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.widthresponsive + 'px',
+        maxWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.widthresponsive + 'px'
+      }
+    }),
+    innerproductcard: glamor.css((_css = {
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
+      opacity: sectionproperties.cardbg_opacity,
       borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
       borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
       borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
@@ -54109,13 +54121,16 @@ var ModernProductCard = function ModernProductCard(props) {
       paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
       paddingTop: sectionproperties.paddingTop + 'px',
       paddingBottom: sectionproperties.paddingBottom + 'px',
+      boxShadow: sectionproperties.sectioncardshadow == 'Show' ? '0 0 10px ' + sectionproperties.sectioncardshadowcolor : 'none',
       border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
-      transition: '.3s',
-      color: sectionproperties.prodNameColor,
-      ':hover': {
-        color: sectionproperties.prodNameColorOnHover
-      }
-    }),
+      color: sectionproperties.prodNameColor
+    }, _defineProperty__default["default"](_css, "opacity", sectionproperties.cardbg_opacity), _defineProperty__default["default"](_css, "transition", '.3s'), _defineProperty__default["default"](_css, ':hover', _defineProperty__default["default"]({
+      opacity: sectionproperties.bgopacityonhover,
+      color: sectionproperties.prodNameColorOnHover
+    }, "opacity", sectionproperties.bgopacityonhover)), _defineProperty__default["default"](_css, ':hover .buttoncont', {
+      bottom: '30%',
+      opacity: 1
+    }), _css)),
     productcardimagecont: glamor.css({
       position: 'relative',
       overflow: 'hidden',
@@ -54172,11 +54187,11 @@ var ModernProductCard = function ModernProductCard(props) {
         color: sectionproperties.cartBtnTextcoloronhover
       }
     }),
-    quantitybtn: glamor.css((_css = {
+    quantitybtn: glamor.css((_css2 = {
       flex: 1,
       border: sectionproperties.quantitybtnborderwidth + 'px solid ' + sectionproperties.quantitybtnbordercolor,
       height: sectionproperties.quantitybtn_height + 'px'
-    }, _defineProperty__default["default"](_css, "height", '40px'), _defineProperty__default["default"](_css, "display", 'flex'), _defineProperty__default["default"](_css, "flexDirection", 'row'), _defineProperty__default["default"](_css, "overflow", 'hidden'), _defineProperty__default["default"](_css, "borderRadius", sectionproperties.quantitybtn_borderradius + 'px'), _defineProperty__default["default"](_css, "background", sectionproperties.quantitybtn_bgcolor), _defineProperty__default["default"](_css, "alignItems", 'center'), _defineProperty__default["default"](_css, "justifyContent", 'center'), _defineProperty__default["default"](_css, "margin", 0), _defineProperty__default["default"](_css, "position", 'relative'), _defineProperty__default["default"](_css, "fontWeight", sectionproperties.quantitybtn_textfontweight), _defineProperty__default["default"](_css, "color", sectionproperties.quantitybtn_textcolor), _defineProperty__default["default"](_css, "fontSize", sectionproperties.quantitybtn_textfontsize + 'px'), _css)),
+    }, _defineProperty__default["default"](_css2, "height", '40px'), _defineProperty__default["default"](_css2, "display", 'flex'), _defineProperty__default["default"](_css2, "flexDirection", 'row'), _defineProperty__default["default"](_css2, "overflow", 'hidden'), _defineProperty__default["default"](_css2, "borderRadius", sectionproperties.quantitybtn_borderradius + 'px'), _defineProperty__default["default"](_css2, "background", sectionproperties.quantitybtn_bgcolor), _defineProperty__default["default"](_css2, "alignItems", 'center'), _defineProperty__default["default"](_css2, "justifyContent", 'center'), _defineProperty__default["default"](_css2, "margin", 0), _defineProperty__default["default"](_css2, "position", 'relative'), _defineProperty__default["default"](_css2, "fontWeight", sectionproperties.quantitybtn_textfontweight), _defineProperty__default["default"](_css2, "color", sectionproperties.quantitybtn_textcolor), _defineProperty__default["default"](_css2, "fontSize", sectionproperties.quantitybtn_textfontsize + 'px'), _css2)),
     quantitybtn_text: glamor.css({
       margin: 'auto'
     }),
@@ -54231,82 +54246,19 @@ var ModernProductCard = function ModernProductCard(props) {
     })
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "row m-0 w-100",
+    "class": props.sectiontypeprops2 == 'vertical' ? "".concat(card_cssstyles.productcard) + ' w-100 p-md-0 ' : " ".concat(card_cssstyles.productcard),
     style: {
-      paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginLeft + 'px',
-      paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginRight + 'px'
+      paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
+      paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px'
     }
+    // class="row m-0 w-100"
+    // style={{
+    //     paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginLeft + 'px',
+    //     paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginRight + 'px',
+    // }}
   }, sectionproperties.length != 0 && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "".concat(card_cssstyles.productcard) + ' cursor-pointer w-100 '
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    onClick: function onClick() {
-      cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
-    },
-    "class": "".concat(card_cssstyles.productcardimagecont) + ' p-0 ',
-    style: {
-      marginBottom: sectionproperties.image_mb + 'px',
-      overflow: 'hidden'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
-    urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
-    publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
-    path: item.image,
-    loading: "lazy",
-    style: {
-      width: '100%',
-      height: '100%',
-      objectFit: 'contain'
-    }
-  }), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("button", {
-    "class": " ".concat(card_cssstyles.wishlist_btn) + ' m-0 p-0 d-flex align-items-center  justify-content-center ',
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      addtofavoritescontext(item.productid);
-    },
-    style: {
-      position: 'absolute',
-      top: 10,
-      right: langdetect == 'en' ? 10 : 0,
-      left: langdetect == 'en' ? 0 : 10,
-      background: item.IsFavExists == true ? sectionproperties.activebgcolor : ''
-    }
-  }, item.IsFavExists && /*#__PURE__*/React__default["default"].createElement("i", {
-    "class": "h-100 d-flex align-items-center justify-content-center"
-  }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React__default["default"].createElement(AiFillStar.AiFillStar, {
-    size: sectionproperties.favBtnIconfontsize,
-    style: {
-      color: sectionproperties.activefaviconcolor
-    }
-  }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React__default["default"].createElement(FaHeart.FaHeart, {
-    size: sectionproperties.favBtnIconfontsize,
-    style: {
-      color: sectionproperties.activefaviconcolor
-    }
-  })), !item.IsFavExists && /*#__PURE__*/React__default["default"].createElement("i", {
-    "class": "h-100 d-flex align-items-center justify-content-center"
-  }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React__default["default"].createElement(AiOutlineStar.AiOutlineStar, {
-    size: sectionproperties.favBtnIconfontsize
-  }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React__default["default"].createElement(FaRegHeart.FaRegHeart, {
-    size: sectionproperties.favBtnIconfontsize
-  }))), sectionproperties.prodsalePriceshow == 'Show' && (item === null || item === void 0 ? void 0 : item.hassale) == 1 && /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": "allcentered",
-    style: {
-      position: 'absolute',
-      top: 10,
-      right: langdetect == 'en' ? 10 : '',
-      left: langdetect == 'en' ? '' : 10,
-      width: sectionproperties.badge_width + 'px',
-      height: sectionproperties.badge_height + 'px',
-      background: sectionproperties.badge_bgcolor,
-      borderRadius: sectionproperties.badge_borderradius + 'px'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("p", {
-    "class": "m-0 p-0",
-    style: {
-      color: sectionproperties.badge_color,
-      fontSize: sectionproperties.badge_fontsize + 'px'
-    }
-  }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "".concat(card_cssstyles.innerproductcard) + ' w-100 '
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row m-0 w-100"
   }, sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: function onClick() {

package/dist/index.esm.js

@@ -12987,7 +12987,8 @@ var CardsSection = function CardsSection(props) {
             item.tabexsectioninfo.sectioncompname == 'Categorycard_with_trianglebg' ? 'scrollmenuclassnameitemCategorycard_with_trianglebg' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_textonhover' ? 'scrollmenuclassnameitemProductcard_with_textonhover' : item.tabexsectioninfo.sectioncompname == 'Categorycard_slidebgscaled' ? 'scrollmenuclassnameitemCategorycard_slidebgscaled' : item.tabexsectioninfo.sectioncompname == 'Productccard_with_imageontopleft' ? 'scrollmenuclassnameitemProductccard_with_imageontopleft' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_zoominonhover' ? 'scrollmenuclassnameitemProductcard_with_zoominonhover' : item.tabexsectioninfo.sectioncompname == 'Horizontalcard' ? 'scrollmenuclassnameitemProductcard_Horizontalcard' : item.tabexsectioninfo.sectioncompname == 'Categorycard_fullimage' ? 'scrollmenuclassnameitemCategorycard_fullimage' :
             // : item.tabexsectioninfo.sectioncompname == 'Classiccategorycard'
             // ? 'scrollmenuclassnameitemClassiccategorycard'
-            item.tabexsectioninfo.sectioncompname == 'ModernProductCard' ? 'scrollmenuclassnameitemModernProductCard' :
+            // item.tabexsectioninfo.sectioncompname == 'ModernProductCard'
+            // ? 'scrollmenuclassnameitemModernProductCard'
             // : item.tabexsectioninfo.sectioncompname == 'Simplecategorycardwithtextbelow'
             // ? 'scrollmenuclassnameitemSimplecategorycardwithtextbelow'
             item.tabexsectioninfo.sectioncompname == 'Productcard7' ? 'scrollmenuclassnameitemProductcard7' : item.tabexsectioninfo.sectioncompname == 'MenuCard' ? 'scrollmenuclassnameitemMenuCard' : item.tabexsectioninfo.sectioncompname == 'StylishProductCard' ? 'scrollmenuclassnameitemStylishProductCard' : item.tabexsectioninfo.sectioncompname == 'ProductCardWithTextOnImage' ? 'scrollmenuclassnameitemProductCardWithTextOnImage' : item.tabexsectioninfo.sectioncompname == 'Card23' ? 'scrollmenuclassnameitemCard23' : item.tabexsectioninfo.sectioncompname == 'Card20' ? 'scrollmenuclassnameitemCard20' : item.tabexsectioninfo.sectioncompname == 'ModernCardWithQuantityButton' ? 'scrollmenuclassnameitemModernCardWithQuantityButton' : item.tabexsectioninfo.sectioncompname == 'CategoryCardwithhoveraction' ? 'scrollmenuclassnameitemCategoryCardwithhoveraction' : item.tabexsectioninfo.sectioncompname == 'CircleCardWithVariants' ? 'scrollmenuclassnameitemCircleCardWithVariants' :
@@ -41939,6 +41940,8 @@ var FullVideoSection = function FullVideoSection(props) {
       style: {
         display: sectionproperties.sectiontitleshow == 'Hide' && sectionproperties.prodCatShow == 'Hide' && sectionproperties.slideshowText2ContentFontSize == 0 ? 'none' : 'flex'
       }
+    }, /*#__PURE__*/React.createElement("div", {
+      "class": "row m-0 w-100"
     }, sectionproperties.sectiontitleshow == 'Show' && /*#__PURE__*/React.createElement("div", {
       "class": ' col-lg-12 p-0 d-flex d-md-none align-items-center ',
       style: {
@@ -41984,7 +41987,7 @@ var FullVideoSection = function FullVideoSection(props) {
       dangerouslySetInnerHTML: {
         __html: langdetect == 'en' ? sectionproperties.contenteditor : sectionproperties.text2editortextar
       }
-    })));
+    }))));
   };
   var Video = function Video() {
     var _Videosarrayofobjs$;
@@ -53962,7 +53965,7 @@ var ModernCardWithQuantityButton = function ModernCardWithQuantityButton(props)
 function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ModernProductCard = function ModernProductCard(props) {
-  var _css;
+  var _css, _css2;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     sectionproperties = _useState2[0],
@@ -53975,7 +53978,7 @@ var ModernProductCard = function ModernProductCard(props) {
   props.actions.lang;
   var langdetect = props.actions.langdetect;
   var setShowProductInfoModalContext = props.actions.setShowProductInfoModalContext;
-  var addtofavoritescontext = props.actions.addtofavoritescontext;
+  props.actions.addtofavoritescontext;
   var setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
   var AddtoCartContext = props.actions.AddtoCartContext;
   props.actions.AddtoCartMutationContext;
@@ -53983,7 +53986,7 @@ var ModernProductCard = function ModernProductCard(props) {
   props.actions.routingcountext;
   var NotificationManager = NotificationManager;
   var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
-  var ikimagecredcontext = props.actions.ikimagecredcontext;
+  props.actions.ikimagecredcontext;
   var updatequantity = function updatequantity(type) {
     var tempitem = _objectSpread$g({}, item);
     tempitem.quantity = parseInt(tempitem.quantity);
@@ -54051,7 +54054,16 @@ var ModernProductCard = function ModernProductCard(props) {
   };
   var card_cssstyles = {
     productcard: css({
+      minWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.width + 'px',
+      maxWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.width + 'px',
+      '@media (max-width: 800px)': {
+        minWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.widthresponsive + 'px',
+        maxWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.widthresponsive + 'px'
+      }
+    }),
+    innerproductcard: css((_css = {
       background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
+      opacity: sectionproperties.cardbg_opacity,
       borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
       borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
       borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
@@ -54062,13 +54074,16 @@ var ModernProductCard = function ModernProductCard(props) {
       paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
       paddingTop: sectionproperties.paddingTop + 'px',
       paddingBottom: sectionproperties.paddingBottom + 'px',
+      boxShadow: sectionproperties.sectioncardshadow == 'Show' ? '0 0 10px ' + sectionproperties.sectioncardshadowcolor : 'none',
       border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
-      transition: '.3s',
-      color: sectionproperties.prodNameColor,
-      ':hover': {
-        color: sectionproperties.prodNameColorOnHover
-      }
-    }),
+      color: sectionproperties.prodNameColor
+    }, _defineProperty(_css, "opacity", sectionproperties.cardbg_opacity), _defineProperty(_css, "transition", '.3s'), _defineProperty(_css, ':hover', _defineProperty({
+      opacity: sectionproperties.bgopacityonhover,
+      color: sectionproperties.prodNameColorOnHover
+    }, "opacity", sectionproperties.bgopacityonhover)), _defineProperty(_css, ':hover .buttoncont', {
+      bottom: '30%',
+      opacity: 1
+    }), _css)),
     productcardimagecont: css({
       position: 'relative',
       overflow: 'hidden',
@@ -54125,11 +54140,11 @@ var ModernProductCard = function ModernProductCard(props) {
         color: sectionproperties.cartBtnTextcoloronhover
       }
     }),
-    quantitybtn: css((_css = {
+    quantitybtn: css((_css2 = {
       flex: 1,
       border: sectionproperties.quantitybtnborderwidth + 'px solid ' + sectionproperties.quantitybtnbordercolor,
       height: sectionproperties.quantitybtn_height + 'px'
-    }, _defineProperty(_css, "height", '40px'), _defineProperty(_css, "display", 'flex'), _defineProperty(_css, "flexDirection", 'row'), _defineProperty(_css, "overflow", 'hidden'), _defineProperty(_css, "borderRadius", sectionproperties.quantitybtn_borderradius + 'px'), _defineProperty(_css, "background", sectionproperties.quantitybtn_bgcolor), _defineProperty(_css, "alignItems", 'center'), _defineProperty(_css, "justifyContent", 'center'), _defineProperty(_css, "margin", 0), _defineProperty(_css, "position", 'relative'), _defineProperty(_css, "fontWeight", sectionproperties.quantitybtn_textfontweight), _defineProperty(_css, "color", sectionproperties.quantitybtn_textcolor), _defineProperty(_css, "fontSize", sectionproperties.quantitybtn_textfontsize + 'px'), _css)),
+    }, _defineProperty(_css2, "height", '40px'), _defineProperty(_css2, "display", 'flex'), _defineProperty(_css2, "flexDirection", 'row'), _defineProperty(_css2, "overflow", 'hidden'), _defineProperty(_css2, "borderRadius", sectionproperties.quantitybtn_borderradius + 'px'), _defineProperty(_css2, "background", sectionproperties.quantitybtn_bgcolor), _defineProperty(_css2, "alignItems", 'center'), _defineProperty(_css2, "justifyContent", 'center'), _defineProperty(_css2, "margin", 0), _defineProperty(_css2, "position", 'relative'), _defineProperty(_css2, "fontWeight", sectionproperties.quantitybtn_textfontweight), _defineProperty(_css2, "color", sectionproperties.quantitybtn_textcolor), _defineProperty(_css2, "fontSize", sectionproperties.quantitybtn_textfontsize + 'px'), _css2)),
     quantitybtn_text: css({
       margin: 'auto'
     }),
@@ -54184,82 +54199,19 @@ var ModernProductCard = function ModernProductCard(props) {
     })
   };
   return /*#__PURE__*/React.createElement("div", {
-    "class": "row m-0 w-100",
+    "class": props.sectiontypeprops2 == 'vertical' ? "".concat(card_cssstyles.productcard) + ' w-100 p-md-0 ' : " ".concat(card_cssstyles.productcard),
     style: {
-      paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginLeft + 'px',
-      paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginRight + 'px'
+      paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
+      paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px'
     }
+    // class="row m-0 w-100"
+    // style={{
+    //     paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginLeft + 'px',
+    //     paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginRight + 'px',
+    // }}
   }, sectionproperties.length != 0 && /*#__PURE__*/React.createElement("div", {
-    "class": "".concat(card_cssstyles.productcard) + ' cursor-pointer w-100 '
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
-    },
-    "class": "".concat(card_cssstyles.productcardimagecont) + ' p-0 ',
-    style: {
-      marginBottom: sectionproperties.image_mb + 'px',
-      overflow: 'hidden'
-    }
-  }, /*#__PURE__*/React.createElement(Imagekitimagecomp, {
-    urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
-    publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
-    path: item.image,
-    loading: "lazy",
-    style: {
-      width: '100%',
-      height: '100%',
-      objectFit: 'contain'
-    }
-  }), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React.createElement("button", {
-    "class": " ".concat(card_cssstyles.wishlist_btn) + ' m-0 p-0 d-flex align-items-center  justify-content-center ',
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      addtofavoritescontext(item.productid);
-    },
-    style: {
-      position: 'absolute',
-      top: 10,
-      right: langdetect == 'en' ? 10 : 0,
-      left: langdetect == 'en' ? 0 : 10,
-      background: item.IsFavExists == true ? sectionproperties.activebgcolor : ''
-    }
-  }, item.IsFavExists && /*#__PURE__*/React.createElement("i", {
-    "class": "h-100 d-flex align-items-center justify-content-center"
-  }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React.createElement(AiFillStar, {
-    size: sectionproperties.favBtnIconfontsize,
-    style: {
-      color: sectionproperties.activefaviconcolor
-    }
-  }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React.createElement(FaHeart, {
-    size: sectionproperties.favBtnIconfontsize,
-    style: {
-      color: sectionproperties.activefaviconcolor
-    }
-  })), !item.IsFavExists && /*#__PURE__*/React.createElement("i", {
-    "class": "h-100 d-flex align-items-center justify-content-center"
-  }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React.createElement(AiOutlineStar, {
-    size: sectionproperties.favBtnIconfontsize
-  }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React.createElement(FaRegHeart, {
-    size: sectionproperties.favBtnIconfontsize
-  }))), sectionproperties.prodsalePriceshow == 'Show' && (item === null || item === void 0 ? void 0 : item.hassale) == 1 && /*#__PURE__*/React.createElement("div", {
-    "class": "allcentered",
-    style: {
-      position: 'absolute',
-      top: 10,
-      right: langdetect == 'en' ? 10 : '',
-      left: langdetect == 'en' ? '' : 10,
-      width: sectionproperties.badge_width + 'px',
-      height: sectionproperties.badge_height + 'px',
-      background: sectionproperties.badge_bgcolor,
-      borderRadius: sectionproperties.badge_borderradius + 'px'
-    }
-  }, /*#__PURE__*/React.createElement("p", {
-    "class": "m-0 p-0",
-    style: {
-      color: sectionproperties.badge_color,
-      fontSize: sectionproperties.badge_fontsize + 'px'
-    }
-  }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    "class": "".concat(card_cssstyles.innerproductcard) + ' w-100 '
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     "class": "row m-0 w-100"
   }, sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React.createElement("div", {
     onClick: function onClick() {

package/dist/index.umd.js

@@ -12879,7 +12879,8 @@
                 item.tabexsectioninfo.sectioncompname == 'Categorycard_with_trianglebg' ? 'scrollmenuclassnameitemCategorycard_with_trianglebg' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_textonhover' ? 'scrollmenuclassnameitemProductcard_with_textonhover' : item.tabexsectioninfo.sectioncompname == 'Categorycard_slidebgscaled' ? 'scrollmenuclassnameitemCategorycard_slidebgscaled' : item.tabexsectioninfo.sectioncompname == 'Productccard_with_imageontopleft' ? 'scrollmenuclassnameitemProductccard_with_imageontopleft' : item.tabexsectioninfo.sectioncompname == 'Productcard_with_zoominonhover' ? 'scrollmenuclassnameitemProductcard_with_zoominonhover' : item.tabexsectioninfo.sectioncompname == 'Horizontalcard' ? 'scrollmenuclassnameitemProductcard_Horizontalcard' : item.tabexsectioninfo.sectioncompname == 'Categorycard_fullimage' ? 'scrollmenuclassnameitemCategorycard_fullimage' :
                 // : item.tabexsectioninfo.sectioncompname == 'Classiccategorycard'
                 // ? 'scrollmenuclassnameitemClassiccategorycard'
-                item.tabexsectioninfo.sectioncompname == 'ModernProductCard' ? 'scrollmenuclassnameitemModernProductCard' :
+                // item.tabexsectioninfo.sectioncompname == 'ModernProductCard'
+                // ? 'scrollmenuclassnameitemModernProductCard'
                 // : item.tabexsectioninfo.sectioncompname == 'Simplecategorycardwithtextbelow'
                 // ? 'scrollmenuclassnameitemSimplecategorycardwithtextbelow'
                 item.tabexsectioninfo.sectioncompname == 'Productcard7' ? 'scrollmenuclassnameitemProductcard7' : item.tabexsectioninfo.sectioncompname == 'MenuCard' ? 'scrollmenuclassnameitemMenuCard' : item.tabexsectioninfo.sectioncompname == 'StylishProductCard' ? 'scrollmenuclassnameitemStylishProductCard' : item.tabexsectioninfo.sectioncompname == 'ProductCardWithTextOnImage' ? 'scrollmenuclassnameitemProductCardWithTextOnImage' : item.tabexsectioninfo.sectioncompname == 'Card23' ? 'scrollmenuclassnameitemCard23' : item.tabexsectioninfo.sectioncompname == 'Card20' ? 'scrollmenuclassnameitemCard20' : item.tabexsectioninfo.sectioncompname == 'ModernCardWithQuantityButton' ? 'scrollmenuclassnameitemModernCardWithQuantityButton' : item.tabexsectioninfo.sectioncompname == 'CategoryCardwithhoveraction' ? 'scrollmenuclassnameitemCategoryCardwithhoveraction' : item.tabexsectioninfo.sectioncompname == 'CircleCardWithVariants' ? 'scrollmenuclassnameitemCircleCardWithVariants' :
@@ -41831,6 +41832,8 @@
           style: {
             display: sectionproperties.sectiontitleshow == 'Hide' && sectionproperties.prodCatShow == 'Hide' && sectionproperties.slideshowText2ContentFontSize == 0 ? 'none' : 'flex'
           }
+        }, /*#__PURE__*/React__default["default"].createElement("div", {
+          "class": "row m-0 w-100"
         }, sectionproperties.sectiontitleshow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
           "class": ' col-lg-12 p-0 d-flex d-md-none align-items-center ',
           style: {
@@ -41876,7 +41879,7 @@
           dangerouslySetInnerHTML: {
             __html: langdetect == 'en' ? sectionproperties.contenteditor : sectionproperties.text2editortextar
           }
-        })));
+        }))));
       };
       var Video = function Video() {
         var _Videosarrayofobjs$;
@@ -53854,7 +53857,7 @@
     function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
     function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
     var ModernProductCard = function ModernProductCard(props) {
-      var _css;
+      var _css, _css2;
       var _useState = React.useState(''),
         _useState2 = _slicedToArray__default["default"](_useState, 2),
         sectionproperties = _useState2[0],
@@ -53867,7 +53870,7 @@
       props.actions.lang;
       var langdetect = props.actions.langdetect;
       var setShowProductInfoModalContext = props.actions.setShowProductInfoModalContext;
-      var addtofavoritescontext = props.actions.addtofavoritescontext;
+      props.actions.addtofavoritescontext;
       var setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
       var AddtoCartContext = props.actions.AddtoCartContext;
       props.actions.AddtoCartMutationContext;
@@ -53875,7 +53878,7 @@
       props.actions.routingcountext;
       var NotificationManager = NotificationManager;
       var cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
-      var ikimagecredcontext = props.actions.ikimagecredcontext;
+      props.actions.ikimagecredcontext;
       var updatequantity = function updatequantity(type) {
         var tempitem = _objectSpread$g({}, item);
         tempitem.quantity = parseInt(tempitem.quantity);
@@ -53943,7 +53946,16 @@
       };
       var card_cssstyles = {
         productcard: glamor.css({
+          minWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.width + 'px',
+          maxWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.width + 'px',
+          '@media (max-width: 800px)': {
+            minWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.widthresponsive + 'px',
+            maxWidth: props.sectiontypeprops2 == 'vertical' ? '100%' : sectionproperties.widthresponsive + 'px'
+          }
+        }),
+        innerproductcard: glamor.css((_css = {
           background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
+          opacity: sectionproperties.cardbg_opacity,
           borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
           borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
           borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
@@ -53954,13 +53966,16 @@
           paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
           paddingTop: sectionproperties.paddingTop + 'px',
           paddingBottom: sectionproperties.paddingBottom + 'px',
+          boxShadow: sectionproperties.sectioncardshadow == 'Show' ? '0 0 10px ' + sectionproperties.sectioncardshadowcolor : 'none',
           border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
-          transition: '.3s',
-          color: sectionproperties.prodNameColor,
-          ':hover': {
-            color: sectionproperties.prodNameColorOnHover
-          }
-        }),
+          color: sectionproperties.prodNameColor
+        }, _defineProperty__default["default"](_css, "opacity", sectionproperties.cardbg_opacity), _defineProperty__default["default"](_css, "transition", '.3s'), _defineProperty__default["default"](_css, ':hover', _defineProperty__default["default"]({
+          opacity: sectionproperties.bgopacityonhover,
+          color: sectionproperties.prodNameColorOnHover
+        }, "opacity", sectionproperties.bgopacityonhover)), _defineProperty__default["default"](_css, ':hover .buttoncont', {
+          bottom: '30%',
+          opacity: 1
+        }), _css)),
         productcardimagecont: glamor.css({
           position: 'relative',
           overflow: 'hidden',
@@ -54017,11 +54032,11 @@
             color: sectionproperties.cartBtnTextcoloronhover
           }
         }),
-        quantitybtn: glamor.css((_css = {
+        quantitybtn: glamor.css((_css2 = {
           flex: 1,
           border: sectionproperties.quantitybtnborderwidth + 'px solid ' + sectionproperties.quantitybtnbordercolor,
           height: sectionproperties.quantitybtn_height + 'px'
-        }, _defineProperty__default["default"](_css, "height", '40px'), _defineProperty__default["default"](_css, "display", 'flex'), _defineProperty__default["default"](_css, "flexDirection", 'row'), _defineProperty__default["default"](_css, "overflow", 'hidden'), _defineProperty__default["default"](_css, "borderRadius", sectionproperties.quantitybtn_borderradius + 'px'), _defineProperty__default["default"](_css, "background", sectionproperties.quantitybtn_bgcolor), _defineProperty__default["default"](_css, "alignItems", 'center'), _defineProperty__default["default"](_css, "justifyContent", 'center'), _defineProperty__default["default"](_css, "margin", 0), _defineProperty__default["default"](_css, "position", 'relative'), _defineProperty__default["default"](_css, "fontWeight", sectionproperties.quantitybtn_textfontweight), _defineProperty__default["default"](_css, "color", sectionproperties.quantitybtn_textcolor), _defineProperty__default["default"](_css, "fontSize", sectionproperties.quantitybtn_textfontsize + 'px'), _css)),
+        }, _defineProperty__default["default"](_css2, "height", '40px'), _defineProperty__default["default"](_css2, "display", 'flex'), _defineProperty__default["default"](_css2, "flexDirection", 'row'), _defineProperty__default["default"](_css2, "overflow", 'hidden'), _defineProperty__default["default"](_css2, "borderRadius", sectionproperties.quantitybtn_borderradius + 'px'), _defineProperty__default["default"](_css2, "background", sectionproperties.quantitybtn_bgcolor), _defineProperty__default["default"](_css2, "alignItems", 'center'), _defineProperty__default["default"](_css2, "justifyContent", 'center'), _defineProperty__default["default"](_css2, "margin", 0), _defineProperty__default["default"](_css2, "position", 'relative'), _defineProperty__default["default"](_css2, "fontWeight", sectionproperties.quantitybtn_textfontweight), _defineProperty__default["default"](_css2, "color", sectionproperties.quantitybtn_textcolor), _defineProperty__default["default"](_css2, "fontSize", sectionproperties.quantitybtn_textfontsize + 'px'), _css2)),
         quantitybtn_text: glamor.css({
           margin: 'auto'
         }),
@@ -54076,82 +54091,19 @@
         })
       };
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "row m-0 w-100",
+        "class": props.sectiontypeprops2 == 'vertical' ? "".concat(card_cssstyles.productcard) + ' w-100 p-md-0 ' : " ".concat(card_cssstyles.productcard),
         style: {
-          paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginLeft + 'px',
-          paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginRight + 'px'
+          paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
+          paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px'
         }
+        // class="row m-0 w-100"
+        // style={{
+        //     paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginLeft + 'px',
+        //     paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginRight + 'px',
+        // }}
       }, sectionproperties.length != 0 && /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "".concat(card_cssstyles.productcard) + ' cursor-pointer w-100 '
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
-        onClick: function onClick() {
-          cardonclickfunctionContext(sectionproperties === null || sectionproperties === void 0 ? void 0 : sectionproperties.onClickRoute, item.productid, props.fetchingtypeprops, item.collectionid);
-        },
-        "class": "".concat(card_cssstyles.productcardimagecont) + ' p-0 ',
-        style: {
-          marginBottom: sectionproperties.image_mb + 'px',
-          overflow: 'hidden'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
-        urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
-        publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
-        path: item.image,
-        loading: "lazy",
-        style: {
-          width: '100%',
-          height: '100%',
-          objectFit: 'contain'
-        }
-      }), sectionproperties.favBtnShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("button", {
-        "class": " ".concat(card_cssstyles.wishlist_btn) + ' m-0 p-0 d-flex align-items-center  justify-content-center ',
-        onClick: function onClick(e) {
-          e.stopPropagation();
-          addtofavoritescontext(item.productid);
-        },
-        style: {
-          position: 'absolute',
-          top: 10,
-          right: langdetect == 'en' ? 10 : 0,
-          left: langdetect == 'en' ? 0 : 10,
-          background: item.IsFavExists == true ? sectionproperties.activebgcolor : ''
-        }
-      }, item.IsFavExists && /*#__PURE__*/React__default["default"].createElement("i", {
-        "class": "h-100 d-flex align-items-center justify-content-center"
-      }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React__default["default"].createElement(AiFillStar.AiFillStar, {
-        size: sectionproperties.favBtnIconfontsize,
-        style: {
-          color: sectionproperties.activefaviconcolor
-        }
-      }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React__default["default"].createElement(FaHeart.FaHeart, {
-        size: sectionproperties.favBtnIconfontsize,
-        style: {
-          color: sectionproperties.activefaviconcolor
-        }
-      })), !item.IsFavExists && /*#__PURE__*/React__default["default"].createElement("i", {
-        "class": "h-100 d-flex align-items-center justify-content-center"
-      }, sectionproperties.faviconshape == 'Star Shape' && /*#__PURE__*/React__default["default"].createElement(AiOutlineStar.AiOutlineStar, {
-        size: sectionproperties.favBtnIconfontsize
-      }), sectionproperties.faviconshape == 'Heart Shape' && /*#__PURE__*/React__default["default"].createElement(FaRegHeart.FaRegHeart, {
-        size: sectionproperties.favBtnIconfontsize
-      }))), sectionproperties.prodsalePriceshow == 'Show' && (item === null || item === void 0 ? void 0 : item.hassale) == 1 && /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": "allcentered",
-        style: {
-          position: 'absolute',
-          top: 10,
-          right: langdetect == 'en' ? 10 : '',
-          left: langdetect == 'en' ? '' : 10,
-          width: sectionproperties.badge_width + 'px',
-          height: sectionproperties.badge_height + 'px',
-          background: sectionproperties.badge_bgcolor,
-          borderRadius: sectionproperties.badge_borderradius + 'px'
-        }
-      }, /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": "m-0 p-0",
-        style: {
-          color: sectionproperties.badge_color,
-          fontSize: sectionproperties.badge_fontsize + 'px'
-        }
-      }, langdetect == 'en' ? sectionproperties.badgeContentEn : sectionproperties.badgeContentAr))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "".concat(card_cssstyles.innerproductcard) + ' w-100 '
+      }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "row m-0 w-100"
       }, sectionproperties.prodNameShow == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
         onClick: function onClick() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tabexseriescomponents",
-    "version": "0.0.284",
+    "version": "0.0.285",
     "description": "your description",
     "main": "dist/index.cjs.js",
     "scripts": {