tabexseriescomponents 0.0.565 → 0.0.567

package/dist/index.cjs.js

@@ -32919,7 +32919,7 @@ var Modernheader = function Modernheader(props) {
       }
     }),
     top_bar: glamor.css({
-      backgroundColor: sectionproperties.headerstyles_bgtransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.header_backgroundColor : 'transparent' : sectionproperties.header_backgroundColor,
+      backgroundColor: sectionproperties.uppersection_bgcolortransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.uppersection_bgcolor : 'transparent' : sectionproperties.uppersection_bgcolor,
       borderTopLeftRadius: langdetect == 'en' ? sectionproperties.uppersection_btlradius + 'px' : sectionproperties.uppersection_btrradius + 'px',
       borderTopRightRadius: langdetect == 'en' ? sectionproperties.uppersection_btrradius + 'px' : sectionproperties.uppersection_btlradius + 'px',
       borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.uppersection_bblradius + 'px' : sectionproperties.uppersection_bbrradius + 'px',
@@ -32930,7 +32930,8 @@ var Modernheader = function Modernheader(props) {
       paddingBottom: sectionproperties.uppersection_paddingbottom + 'px'
     }),
     navbar_nav: glamor.css({
-      background: sectionproperties.lowersection_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.lowersection_backgroundColor,
+      backgroundColor: sectionproperties.lowersection_bgcolortransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.lowersection_backgroundColor : 'transparent' : sectionproperties.lowersection_backgroundColor,
+      // background: sectionproperties.lowersection_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.lowersection_backgroundColor,
       paddingTop: sectionproperties.lowersection_paddingtop + 'px',
       paddingBottom: sectionproperties.lowersection_paddingbottom + 'px',
       paddingLeft: langdetect == 'en' ? sectionproperties.lowersection_paddingleft + 'px' : sectionproperties.lowersection_paddingright + 'px',
@@ -33044,7 +33045,14 @@ var Modernheader = function Modernheader(props) {
     style: {
       position: 'relative'
     }
-  }, templateproperties_context.showtextslider == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, sectionproperties.showdownloadapp == 'Show' && /*#__PURE__*/React__default["default"].createElement(DownloadApp, {
+    sectionpropertiesprops: sectionproperties,
+    actions: actions
+  }), templateproperties_context.showsocialmedia == 'Show' && /*#__PURE__*/React__default["default"].createElement(SocialMediaSection, {
+    sectionpropertiesprops: sectionproperties,
+    templateproperties_contextprops: templateproperties_context,
+    actions: actions
+  }), templateproperties_context.showtextslider == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "col-lg-12 p-0"
   }, /*#__PURE__*/React__default["default"].createElement(MarqueeHeader, {
     sectionpropertiesprops: sectionproperties,
@@ -33085,14 +33093,7 @@ var Modernheader = function Modernheader(props) {
     style: {
       transform: langdetect == 'en' ? 'scaleX(1)' : 'scaleX(-1)'
     }
-  }))), templateproperties_context.showsocialmedia == 'Show' && /*#__PURE__*/React__default["default"].createElement(SocialMediaSection, {
-    sectionpropertiesprops: sectionproperties,
-    templateproperties_contextprops: templateproperties_context,
-    actions: actions
-  }), sectionproperties.showdownloadapp == 'Show' && /*#__PURE__*/React__default["default"].createElement(DownloadApp, {
-    sectionpropertiesprops: sectionproperties,
-    actions: actions
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "row m-0 d-md-none",
     style: {
       position: sectionproperties.headerstyles_position,
@@ -40867,7 +40868,7 @@ var CenteredLogoHeaderWithSlider = function CenteredLogoHeaderWithSlider(props)
       }
     }),
     lowerHeaderSection: glamor.css({
-      backgroundColor: sectionproperties.headerstyles_bgtransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.lowersection_backgroundColor : 'transparent' : sectionproperties.lowersection_backgroundColor,
+      backgroundColor: sectionproperties.headerstyles_bgtransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 100 ? sectionproperties.lowersection_backgroundColor : 'transparent' : sectionproperties.lowersection_backgroundColor,
       // background: sectionproperties.headerstyles_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.lowersection_backgroundColor,
       paddingLeft: langdetect == 'en' ? sectionproperties.lowersection_paddingleft + 'px' : sectionproperties.lowersection_paddingright + 'px',
       paddingRight: langdetect == 'en' ? sectionproperties.lowersection_paddingright + 'px' : sectionproperties.lowersection_paddingleft + 'px',
@@ -41193,12 +41194,8 @@ var CenteredLogoHeaderWithSlider = function CenteredLogoHeaderWithSlider(props)
     }
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "col-lg-4 col-md-6 col-sm-12 p-0 d-flex align-items-center justify-content-end"
-  }, sectionproperties.showupperheadersection == 'Hide' && sectionproperties.showlanuagecontainer == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
-    "class": header_cssstyles.languagecontainer + ' p-0 mb-0 pb-0 ',
-    style: {
-      marginRight: langdetect == 'en' ? '35px' : 0,
-      marginLeft: langdetect == 'ar' ? '35px' : 0
-    },
+  }, sectionproperties.showupperheadersection == 'Hide' && sectionproperties.showlanuagecontainer == 'Show' && sectionproperties.languagecontainertype != 'Dropdown' && /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": header_cssstyles.languagecontainer + ' m-0 p-0 ',
     onClick: function onClick() {
       if (langdetect == 'en') {
         setlang('ar');
@@ -41206,7 +41203,57 @@ var CenteredLogoHeaderWithSlider = function CenteredLogoHeaderWithSlider(props)
         setlang('en');
       }
     }
-  }, langdetect == 'en' ? 'English' : 'لغة عربية'), sectionproperties.ShowUserBtn == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, langdetect == 'en' ? 'English' : 'لغة عربية'), sectionproperties.showupperheadersection == 'Hide' && sectionproperties.showlanuagecontainer == 'Show' && sectionproperties.languagecontainertype == 'Dropdown' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'
+  }, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Toggle, null, /*#__PURE__*/React__default["default"].createElement("li", {
+    "class": "".concat(headerstyles$g.header_menu) + ' allcentered '
+  }, langdetect == 'ar' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "".concat(header_cssstyles.languagecontainer) + ' row m-0  w-100 ml-4 '
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "m-0 p-0 d-flex align-items-center "
+  }, "\u0644\u063A\u0629 \u0639\u0631\u0628\u064A\u0629", /*#__PURE__*/React__default["default"].createElement("i", {
+    "class": "h-100 allcentered ml-auto pr-3"
+  }, /*#__PURE__*/React__default["default"].createElement(BsChevronDown.BsChevronDown, null)))), langdetect == 'en' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "".concat(header_cssstyles.languagecontainer) + ' row m-0  w-100 mr-4 '
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "m-0 p-0 d-flex align-items-center"
+  }, "English", /*#__PURE__*/React__default["default"].createElement("i", {
+    "class": "h-100 allcentered ml-auto pl-3"
+  }, /*#__PURE__*/React__default["default"].createElement(BsChevronDown.BsChevronDown, null)))))), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Menu, null, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
+    "class": "".concat(header_cssstyles.dropdownitem),
+    onClick: function onClick() {
+      setlang('ar');
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "".concat(header_cssstyles.dropdownitemcontainer) + ' d-flex align-items-center m-0 p-0 '
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "".concat(header_cssstyles.dropdownitem) + ' dropdownitem d-flex align-items-center m-0 p-0 '
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: 'https://tabex-co.com/storage/StaticImages/egyptflag.png',
+    style: {
+      maxWidth: '2vh',
+      maxHeight: '2vh'
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    "class": "ml-2 mr-2"
+  }, "\u0644\u063A\u0629 \u0639\u0631\u0628\u064A\u0629")))), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Divider, null), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
+    "class": "".concat(header_cssstyles.dropdownitem),
+    onClick: function onClick() {
+      setlang('en');
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "".concat(header_cssstyles.dropdownitemcontainer) + ' d-flex align-items-center m-0 p-0 '
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "".concat(header_cssstyles.dropdownitem) + ' dropdownitem d-flex align-items-center m-0 p-0 '
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: 'https://tabex-co.com/storage/StaticImages/usflag.png',
+    style: {
+      maxWidth: '2vh',
+      maxHeight: '2vh'
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    "class": "ml-2 mr-2"
+  }, "English"))))))), sectionproperties.ShowUserBtn == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       marginRight: langdetect == 'en' ? '30px' : 0,
       marginLeft: langdetect == 'en' ? 0 : '30px'
@@ -75815,8 +75862,12 @@ var QuantityButtonBasedProductCard = function QuantityButtonBasedProductCard(pro
   };
   var card_cssstyles = {
     productcard: glamor.css({
-      minWidth: sectionproperties.width + 'px',
-      maxWidth: sectionproperties.width + 'px'
+      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'
+      }
     }),
     productcardimagecont: glamor.css({
       position: 'relative',
@@ -75987,7 +76038,7 @@ var QuantityButtonBasedProductCard = function QuantityButtonBasedProductCard(pro
     })
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    "class": props.sectiontypeprops2 == 'vertical' ? "".concat(card_cssstyles.productcard) + ' w-100 ' : " ".concat(card_cssstyles.productcard, " ").concat(generalCardsStyles.Simpleproductcard),
+    "class": props.sectiontypeprops2 == 'vertical' ? "".concat(card_cssstyles.productcard) + ' w-100 ' : " ".concat(card_cssstyles.productcard),
     style: {
       paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
       paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px',
@@ -76254,7 +76305,8 @@ var QuantityButtonBasedProductCard = function QuantityButtonBasedProductCard(pro
     },
     "class": sectionproperties.wordbreak == '1' ? "".concat(card_cssstyles.productNameStyles) + '  wordbreak wordbreak1 m-0 ' : "".concat(card_cssstyles.productNameStyles) + '  wordbreak wordbreak2 m-0 ',
     style: {
-      textAlign: langdetect == 'en' ? 'left' : 'right'
+      textAlign: langdetect == 'en' ? 'left' : 'right',
+      height: sectionproperties.wordbreak == '2' ? '6vh' : 'auto'
     }
   }, item.name)), sectionproperties.quantityshow == 'Show' && item.quantity != null && /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "col-lg-12 p-0 d-flex align-items-center justify-content-start"

package/dist/index.esm.js

@@ -32870,7 +32870,7 @@ var Modernheader = function Modernheader(props) {
       }
     }),
     top_bar: css({
-      backgroundColor: sectionproperties.headerstyles_bgtransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.header_backgroundColor : 'transparent' : sectionproperties.header_backgroundColor,
+      backgroundColor: sectionproperties.uppersection_bgcolortransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.uppersection_bgcolor : 'transparent' : sectionproperties.uppersection_bgcolor,
       borderTopLeftRadius: langdetect == 'en' ? sectionproperties.uppersection_btlradius + 'px' : sectionproperties.uppersection_btrradius + 'px',
       borderTopRightRadius: langdetect == 'en' ? sectionproperties.uppersection_btrradius + 'px' : sectionproperties.uppersection_btlradius + 'px',
       borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.uppersection_bblradius + 'px' : sectionproperties.uppersection_bbrradius + 'px',
@@ -32881,7 +32881,8 @@ var Modernheader = function Modernheader(props) {
       paddingBottom: sectionproperties.uppersection_paddingbottom + 'px'
     }),
     navbar_nav: css({
-      background: sectionproperties.lowersection_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.lowersection_backgroundColor,
+      backgroundColor: sectionproperties.lowersection_bgcolortransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.lowersection_backgroundColor : 'transparent' : sectionproperties.lowersection_backgroundColor,
+      // background: sectionproperties.lowersection_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.lowersection_backgroundColor,
       paddingTop: sectionproperties.lowersection_paddingtop + 'px',
       paddingBottom: sectionproperties.lowersection_paddingbottom + 'px',
       paddingLeft: langdetect == 'en' ? sectionproperties.lowersection_paddingleft + 'px' : sectionproperties.lowersection_paddingright + 'px',
@@ -32995,7 +32996,14 @@ var Modernheader = function Modernheader(props) {
     style: {
       position: 'relative'
     }
-  }, templateproperties_context.showtextslider == 'Show' && /*#__PURE__*/React.createElement("div", {
+  }, sectionproperties.showdownloadapp == 'Show' && /*#__PURE__*/React.createElement(DownloadApp, {
+    sectionpropertiesprops: sectionproperties,
+    actions: actions
+  }), templateproperties_context.showsocialmedia == 'Show' && /*#__PURE__*/React.createElement(SocialMediaSection, {
+    sectionpropertiesprops: sectionproperties,
+    templateproperties_contextprops: templateproperties_context,
+    actions: actions
+  }), templateproperties_context.showtextslider == 'Show' && /*#__PURE__*/React.createElement("div", {
     "class": "col-lg-12 p-0"
   }, /*#__PURE__*/React.createElement(MarqueeHeader, {
     sectionpropertiesprops: sectionproperties,
@@ -33036,14 +33044,7 @@ var Modernheader = function Modernheader(props) {
     style: {
       transform: langdetect == 'en' ? 'scaleX(1)' : 'scaleX(-1)'
     }
-  }))), templateproperties_context.showsocialmedia == 'Show' && /*#__PURE__*/React.createElement(SocialMediaSection, {
-    sectionpropertiesprops: sectionproperties,
-    templateproperties_contextprops: templateproperties_context,
-    actions: actions
-  }), sectionproperties.showdownloadapp == 'Show' && /*#__PURE__*/React.createElement(DownloadApp, {
-    sectionpropertiesprops: sectionproperties,
-    actions: actions
-  }), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     "class": "row m-0 d-md-none",
     style: {
       position: sectionproperties.headerstyles_position,
@@ -40818,7 +40819,7 @@ var CenteredLogoHeaderWithSlider = function CenteredLogoHeaderWithSlider(props)
       }
     }),
     lowerHeaderSection: css({
-      backgroundColor: sectionproperties.headerstyles_bgtransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.lowersection_backgroundColor : 'transparent' : sectionproperties.lowersection_backgroundColor,
+      backgroundColor: sectionproperties.headerstyles_bgtransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 100 ? sectionproperties.lowersection_backgroundColor : 'transparent' : sectionproperties.lowersection_backgroundColor,
       // background: sectionproperties.headerstyles_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.lowersection_backgroundColor,
       paddingLeft: langdetect == 'en' ? sectionproperties.lowersection_paddingleft + 'px' : sectionproperties.lowersection_paddingright + 'px',
       paddingRight: langdetect == 'en' ? sectionproperties.lowersection_paddingright + 'px' : sectionproperties.lowersection_paddingleft + 'px',
@@ -41144,12 +41145,8 @@ var CenteredLogoHeaderWithSlider = function CenteredLogoHeaderWithSlider(props)
     }
   }))), /*#__PURE__*/React.createElement("div", {
     "class": "col-lg-4 col-md-6 col-sm-12 p-0 d-flex align-items-center justify-content-end"
-  }, sectionproperties.showupperheadersection == 'Hide' && sectionproperties.showlanuagecontainer == 'Show' && /*#__PURE__*/React.createElement("p", {
-    "class": header_cssstyles.languagecontainer + ' p-0 mb-0 pb-0 ',
-    style: {
-      marginRight: langdetect == 'en' ? '35px' : 0,
-      marginLeft: langdetect == 'ar' ? '35px' : 0
-    },
+  }, sectionproperties.showupperheadersection == 'Hide' && sectionproperties.showlanuagecontainer == 'Show' && sectionproperties.languagecontainertype != 'Dropdown' && /*#__PURE__*/React.createElement("p", {
+    "class": header_cssstyles.languagecontainer + ' m-0 p-0 ',
     onClick: function onClick() {
       if (langdetect == 'en') {
         setlang('ar');
@@ -41157,7 +41154,57 @@ var CenteredLogoHeaderWithSlider = function CenteredLogoHeaderWithSlider(props)
         setlang('en');
       }
     }
-  }, langdetect == 'en' ? 'English' : 'لغة عربية'), sectionproperties.ShowUserBtn == 'Show' && /*#__PURE__*/React.createElement("div", {
+  }, langdetect == 'en' ? 'English' : 'لغة عربية'), sectionproperties.showupperheadersection == 'Hide' && sectionproperties.showlanuagecontainer == 'Show' && sectionproperties.languagecontainertype == 'Dropdown' && /*#__PURE__*/React.createElement("div", {
+    "class": langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'
+  }, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.Toggle, null, /*#__PURE__*/React.createElement("li", {
+    "class": "".concat(headerstyles$g.header_menu) + ' allcentered '
+  }, langdetect == 'ar' && /*#__PURE__*/React.createElement("div", {
+    "class": "".concat(header_cssstyles.languagecontainer) + ' row m-0  w-100 ml-4 '
+  }, /*#__PURE__*/React.createElement("p", {
+    "class": "m-0 p-0 d-flex align-items-center "
+  }, "\u0644\u063A\u0629 \u0639\u0631\u0628\u064A\u0629", /*#__PURE__*/React.createElement("i", {
+    "class": "h-100 allcentered ml-auto pr-3"
+  }, /*#__PURE__*/React.createElement(BsChevronDown, null)))), langdetect == 'en' && /*#__PURE__*/React.createElement("div", {
+    "class": "".concat(header_cssstyles.languagecontainer) + ' row m-0  w-100 mr-4 '
+  }, /*#__PURE__*/React.createElement("p", {
+    "class": "m-0 p-0 d-flex align-items-center"
+  }, "English", /*#__PURE__*/React.createElement("i", {
+    "class": "h-100 allcentered ml-auto pl-3"
+  }, /*#__PURE__*/React.createElement(BsChevronDown, null)))))), /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement(Dropdown.Item, {
+    "class": "".concat(header_cssstyles.dropdownitem),
+    onClick: function onClick() {
+      setlang('ar');
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    "class": "".concat(header_cssstyles.dropdownitemcontainer) + ' d-flex align-items-center m-0 p-0 '
+  }, /*#__PURE__*/React.createElement("p", {
+    "class": "".concat(header_cssstyles.dropdownitem) + ' dropdownitem d-flex align-items-center m-0 p-0 '
+  }, /*#__PURE__*/React.createElement("img", {
+    src: 'https://tabex-co.com/storage/StaticImages/egyptflag.png',
+    style: {
+      maxWidth: '2vh',
+      maxHeight: '2vh'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    "class": "ml-2 mr-2"
+  }, "\u0644\u063A\u0629 \u0639\u0631\u0628\u064A\u0629")))), /*#__PURE__*/React.createElement(Dropdown.Divider, null), /*#__PURE__*/React.createElement(Dropdown.Item, {
+    "class": "".concat(header_cssstyles.dropdownitem),
+    onClick: function onClick() {
+      setlang('en');
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    "class": "".concat(header_cssstyles.dropdownitemcontainer) + ' d-flex align-items-center m-0 p-0 '
+  }, /*#__PURE__*/React.createElement("p", {
+    "class": "".concat(header_cssstyles.dropdownitem) + ' dropdownitem d-flex align-items-center m-0 p-0 '
+  }, /*#__PURE__*/React.createElement("img", {
+    src: 'https://tabex-co.com/storage/StaticImages/usflag.png',
+    style: {
+      maxWidth: '2vh',
+      maxHeight: '2vh'
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    "class": "ml-2 mr-2"
+  }, "English"))))))), sectionproperties.ShowUserBtn == 'Show' && /*#__PURE__*/React.createElement("div", {
     style: {
       marginRight: langdetect == 'en' ? '30px' : 0,
       marginLeft: langdetect == 'en' ? 0 : '30px'
@@ -75766,8 +75813,12 @@ var QuantityButtonBasedProductCard = function QuantityButtonBasedProductCard(pro
   };
   var card_cssstyles = {
     productcard: css({
-      minWidth: sectionproperties.width + 'px',
-      maxWidth: sectionproperties.width + 'px'
+      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'
+      }
     }),
     productcardimagecont: css({
       position: 'relative',
@@ -75938,7 +75989,7 @@ var QuantityButtonBasedProductCard = function QuantityButtonBasedProductCard(pro
     })
   };
   return /*#__PURE__*/React.createElement("div", {
-    "class": props.sectiontypeprops2 == 'vertical' ? "".concat(card_cssstyles.productcard) + ' w-100 ' : " ".concat(card_cssstyles.productcard, " ").concat(generalCardsStyles.Simpleproductcard),
+    "class": props.sectiontypeprops2 == 'vertical' ? "".concat(card_cssstyles.productcard) + ' w-100 ' : " ".concat(card_cssstyles.productcard),
     style: {
       paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
       paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px',
@@ -76205,7 +76256,8 @@ var QuantityButtonBasedProductCard = function QuantityButtonBasedProductCard(pro
     },
     "class": sectionproperties.wordbreak == '1' ? "".concat(card_cssstyles.productNameStyles) + '  wordbreak wordbreak1 m-0 ' : "".concat(card_cssstyles.productNameStyles) + '  wordbreak wordbreak2 m-0 ',
     style: {
-      textAlign: langdetect == 'en' ? 'left' : 'right'
+      textAlign: langdetect == 'en' ? 'left' : 'right',
+      height: sectionproperties.wordbreak == '2' ? '6vh' : 'auto'
     }
   }, item.name)), sectionproperties.quantityshow == 'Show' && item.quantity != null && /*#__PURE__*/React.createElement("div", {
     "class": "col-lg-12 p-0 d-flex align-items-center justify-content-start"

package/dist/index.umd.js

@@ -32743,7 +32743,7 @@
           }
         }),
         top_bar: glamor.css({
-          backgroundColor: sectionproperties.headerstyles_bgtransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.header_backgroundColor : 'transparent' : sectionproperties.header_backgroundColor,
+          backgroundColor: sectionproperties.uppersection_bgcolortransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.uppersection_bgcolor : 'transparent' : sectionproperties.uppersection_bgcolor,
           borderTopLeftRadius: langdetect == 'en' ? sectionproperties.uppersection_btlradius + 'px' : sectionproperties.uppersection_btrradius + 'px',
           borderTopRightRadius: langdetect == 'en' ? sectionproperties.uppersection_btrradius + 'px' : sectionproperties.uppersection_btlradius + 'px',
           borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.uppersection_bblradius + 'px' : sectionproperties.uppersection_bbrradius + 'px',
@@ -32754,7 +32754,8 @@
           paddingBottom: sectionproperties.uppersection_paddingbottom + 'px'
         }),
         navbar_nav: glamor.css({
-          background: sectionproperties.lowersection_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.lowersection_backgroundColor,
+          backgroundColor: sectionproperties.lowersection_bgcolortransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.lowersection_backgroundColor : 'transparent' : sectionproperties.lowersection_backgroundColor,
+          // background: sectionproperties.lowersection_bgcolortransparent == 'Transparent' ? 'transparent' : sectionproperties.lowersection_backgroundColor,
           paddingTop: sectionproperties.lowersection_paddingtop + 'px',
           paddingBottom: sectionproperties.lowersection_paddingbottom + 'px',
           paddingLeft: langdetect == 'en' ? sectionproperties.lowersection_paddingleft + 'px' : sectionproperties.lowersection_paddingright + 'px',
@@ -32868,7 +32869,14 @@
         style: {
           position: 'relative'
         }
-      }, templateproperties_context.showtextslider == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, sectionproperties.showdownloadapp == 'Show' && /*#__PURE__*/React__default["default"].createElement(DownloadApp, {
+        sectionpropertiesprops: sectionproperties,
+        actions: actions
+      }), templateproperties_context.showsocialmedia == 'Show' && /*#__PURE__*/React__default["default"].createElement(SocialMediaSection, {
+        sectionpropertiesprops: sectionproperties,
+        templateproperties_contextprops: templateproperties_context,
+        actions: actions
+      }), templateproperties_context.showtextslider == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "col-lg-12 p-0"
       }, /*#__PURE__*/React__default["default"].createElement(MarqueeHeader, {
         sectionpropertiesprops: sectionproperties,
@@ -32909,14 +32917,7 @@
         style: {
           transform: langdetect == 'en' ? 'scaleX(1)' : 'scaleX(-1)'
         }
-      }))), templateproperties_context.showsocialmedia == 'Show' && /*#__PURE__*/React__default["default"].createElement(SocialMediaSection, {
-        sectionpropertiesprops: sectionproperties,
-        templateproperties_contextprops: templateproperties_context,
-        actions: actions
-      }), sectionproperties.showdownloadapp == 'Show' && /*#__PURE__*/React__default["default"].createElement(DownloadApp, {
-        sectionpropertiesprops: sectionproperties,
-        actions: actions
-      }), /*#__PURE__*/React__default["default"].createElement("div", {
+      }))), /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "row m-0 d-md-none",
         style: {
           position: sectionproperties.headerstyles_position,
@@ -40691,7 +40692,7 @@
           }
         }),
         lowerHeaderSection: glamor.css({
-          backgroundColor: sectionproperties.headerstyles_bgtransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 300 ? sectionproperties.lowersection_backgroundColor : 'transparent' : sectionproperties.lowersection_backgroundColor,
+          backgroundColor: sectionproperties.headerstyles_bgtransparent == 'Transparent' && window.location.pathname == '/home' ? scrollYposittionprops > 100 ? sectionproperties.lowersection_backgroundColor : 'transparent' : sectionproperties.lowersection_backgroundColor,
           // background: sectionproperties.headerstyles_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.lowersection_backgroundColor,
           paddingLeft: langdetect == 'en' ? sectionproperties.lowersection_paddingleft + 'px' : sectionproperties.lowersection_paddingright + 'px',
           paddingRight: langdetect == 'en' ? sectionproperties.lowersection_paddingright + 'px' : sectionproperties.lowersection_paddingleft + 'px',
@@ -41017,12 +41018,8 @@
         }
       }))), /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "col-lg-4 col-md-6 col-sm-12 p-0 d-flex align-items-center justify-content-end"
-      }, sectionproperties.showupperheadersection == 'Hide' && sectionproperties.showlanuagecontainer == 'Show' && /*#__PURE__*/React__default["default"].createElement("p", {
-        "class": header_cssstyles.languagecontainer + ' p-0 mb-0 pb-0 ',
-        style: {
-          marginRight: langdetect == 'en' ? '35px' : 0,
-          marginLeft: langdetect == 'ar' ? '35px' : 0
-        },
+      }, sectionproperties.showupperheadersection == 'Hide' && sectionproperties.showlanuagecontainer == 'Show' && sectionproperties.languagecontainertype != 'Dropdown' && /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": header_cssstyles.languagecontainer + ' m-0 p-0 ',
         onClick: function onClick() {
           if (langdetect == 'en') {
             setlang('ar');
@@ -41030,7 +41027,57 @@
             setlang('en');
           }
         }
-      }, langdetect == 'en' ? 'English' : 'لغة عربية'), sectionproperties.ShowUserBtn == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+      }, langdetect == 'en' ? 'English' : 'لغة عربية'), sectionproperties.showupperheadersection == 'Hide' && sectionproperties.showlanuagecontainer == 'Show' && sectionproperties.languagecontainertype == 'Dropdown' && /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": langdetect == 'en' ? 'headerdropdownml' : 'headerdropdownmr'
+      }, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], null, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Toggle, null, /*#__PURE__*/React__default["default"].createElement("li", {
+        "class": "".concat(headerstyles$g.header_menu) + ' allcentered '
+      }, langdetect == 'ar' && /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "".concat(header_cssstyles.languagecontainer) + ' row m-0  w-100 ml-4 '
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": "m-0 p-0 d-flex align-items-center "
+      }, "\u0644\u063A\u0629 \u0639\u0631\u0628\u064A\u0629", /*#__PURE__*/React__default["default"].createElement("i", {
+        "class": "h-100 allcentered ml-auto pr-3"
+      }, /*#__PURE__*/React__default["default"].createElement(BsChevronDown.BsChevronDown, null)))), langdetect == 'en' && /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "".concat(header_cssstyles.languagecontainer) + ' row m-0  w-100 mr-4 '
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": "m-0 p-0 d-flex align-items-center"
+      }, "English", /*#__PURE__*/React__default["default"].createElement("i", {
+        "class": "h-100 allcentered ml-auto pl-3"
+      }, /*#__PURE__*/React__default["default"].createElement(BsChevronDown.BsChevronDown, null)))))), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Menu, null, /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
+        "class": "".concat(header_cssstyles.dropdownitem),
+        onClick: function onClick() {
+          setlang('ar');
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "".concat(header_cssstyles.dropdownitemcontainer) + ' d-flex align-items-center m-0 p-0 '
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": "".concat(header_cssstyles.dropdownitem) + ' dropdownitem d-flex align-items-center m-0 p-0 '
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        src: 'https://tabex-co.com/storage/StaticImages/egyptflag.png',
+        style: {
+          maxWidth: '2vh',
+          maxHeight: '2vh'
+        }
+      }), /*#__PURE__*/React__default["default"].createElement("span", {
+        "class": "ml-2 mr-2"
+      }, "\u0644\u063A\u0629 \u0639\u0631\u0628\u064A\u0629")))), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Divider, null), /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"].Item, {
+        "class": "".concat(header_cssstyles.dropdownitem),
+        onClick: function onClick() {
+          setlang('en');
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "".concat(header_cssstyles.dropdownitemcontainer) + ' d-flex align-items-center m-0 p-0 '
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": "".concat(header_cssstyles.dropdownitem) + ' dropdownitem d-flex align-items-center m-0 p-0 '
+      }, /*#__PURE__*/React__default["default"].createElement("img", {
+        src: 'https://tabex-co.com/storage/StaticImages/usflag.png',
+        style: {
+          maxWidth: '2vh',
+          maxHeight: '2vh'
+        }
+      }), /*#__PURE__*/React__default["default"].createElement("span", {
+        "class": "ml-2 mr-2"
+      }, "English"))))))), sectionproperties.ShowUserBtn == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
         style: {
           marginRight: langdetect == 'en' ? '30px' : 0,
           marginLeft: langdetect == 'en' ? 0 : '30px'
@@ -75639,8 +75686,12 @@
       };
       var card_cssstyles = {
         productcard: glamor.css({
-          minWidth: sectionproperties.width + 'px',
-          maxWidth: sectionproperties.width + 'px'
+          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'
+          }
         }),
         productcardimagecont: glamor.css({
           position: 'relative',
@@ -75811,7 +75862,7 @@
         })
       };
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        "class": props.sectiontypeprops2 == 'vertical' ? "".concat(card_cssstyles.productcard) + ' w-100 ' : " ".concat(card_cssstyles.productcard, " ").concat(generalCardsStyles.Simpleproductcard),
+        "class": props.sectiontypeprops2 == 'vertical' ? "".concat(card_cssstyles.productcard) + ' w-100 ' : " ".concat(card_cssstyles.productcard),
         style: {
           paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
           paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px',
@@ -76078,7 +76129,8 @@
         },
         "class": sectionproperties.wordbreak == '1' ? "".concat(card_cssstyles.productNameStyles) + '  wordbreak wordbreak1 m-0 ' : "".concat(card_cssstyles.productNameStyles) + '  wordbreak wordbreak2 m-0 ',
         style: {
-          textAlign: langdetect == 'en' ? 'left' : 'right'
+          textAlign: langdetect == 'en' ? 'left' : 'right',
+          height: sectionproperties.wordbreak == '2' ? '6vh' : 'auto'
         }
       }, item.name)), sectionproperties.quantityshow == 'Show' && item.quantity != null && /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "col-lg-12 p-0 d-flex align-items-center justify-content-start"

package/package.json

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