@gem-sdk/components 4.0.6 → 4.0.9

package/dist/cjs/product/components/product-description/hooks/useGpDescription.js

@@ -1 +1 @@
-"use strict";var React=require("react"),helpers=require("../common/helpers.js"),core=require("@gem-sdk/core");const useGpDescription=e=>{let t=React.useRef(null),[r,c]=React.useState(!1),[s,u]=React.useState(!1),i=core.useProduct(),o=core.useCurrentDevice(),l=core.getResponsiveValueByScreen(e?.hasLineClamp,o),n=core.getResponsiveValueByScreen(e?.lineClamp,o),{redirectProductShopifyLink:a}=core.useProductShopifyEditLink(),p=core.useEditorMode(),h=React.useCallback(()=>{if(!t.current)return helpers.DESCRIPTION_LINE_HEIGHT_DEFAULT;let e=window.getComputedStyle(t.current).getPropertyValue("line-height");return Math.ceil(parseFloat(e))},[]),m=React.useCallback(e=>l&&n&&e?`${n*e}px`:"auto",[l,n]),d=()=>{if(!t.current)return;let e=h();r?t.current.style.maxHeight=m(e):t.current.style.maxHeight="none",c(e=>!e)};return React.useEffect(()=>{let e=h();m(e)},[e?.typo?.custom,m,h]),React.useEffect(()=>{let e=t.current;if(c(!1),!e)return;let r=l&&i?.descriptionHtml;r?setTimeout(()=>{let t=e?.scrollHeight??0,r=e?.clientHeight??0,c=h(),s=Math.round((t??0)/c);e.style.maxHeight=m(c);let i=n&&n<s||r<t;n&&i?u(()=>!0):u(()=>!1)},100):e.style.maxHeight="none"},[l,n,i?.description,i?.descriptionHtml,h,m,c,u]),{ref:t,open:r,isShowViewMore:s,handleToggleShowMore:d,mode:p,redirectProductShopifyLink:a}};exports.useGpDescription=useGpDescription;
+"use strict";var React=require("react"),helpers=require("../common/helpers.js"),core=require("@gem-sdk/core");const useGpDescription=e=>{let t=React.useRef(null),[r,c]=React.useState(!1),[i,s]=React.useState(!1),u=core.useProduct(),o=core.useCurrentDevice(),n=core.getResponsiveValueByScreen(e?.hasLineClamp,o),l=core.getResponsiveValueByScreen(e?.lineClamp,o),{redirectProductShopifyLink:a}=core.useProductShopifyEditLink(),p=core.useEditorMode(),h=React.useCallback(()=>{if(!t.current)return helpers.DESCRIPTION_LINE_HEIGHT_DEFAULT;let e=window.getComputedStyle(t.current).getPropertyValue("line-height");return Math.ceil(parseFloat(e))},[]),d=React.useCallback(e=>n&&l&&e?`${l*e}px`:"auto",[n,l]),g=()=>{if(!t.current)return;let e=h();r?t.current.style.maxHeight=d(e):t.current.style.maxHeight="none",c(e=>!e)};return React.useEffect(()=>{let e=h();d(e)},[e?.typo?.custom,d,h]),React.useEffect(()=>{let e=t.current;if(c(!1),!e)return;let r=n&&u?.descriptionHtml;r?setTimeout(()=>{let t=e?.scrollHeight??0,r=e?.clientHeight??0,c=r<t,i=window.getComputedStyle(e).getPropertyValue("line-height"),u=parseInt(i,10)||1,o=Math.round((t??0)/u),n=void 0!==l&&l<o,a=core.isSafari()?n:c;e.style.maxHeight=d(u),l&&a?s(()=>!0):s(()=>!1)},100):e.style.maxHeight="none"},[n,l,u?.description,u?.descriptionHtml,h,d,c,s]),{ref:t,open:r,isShowViewMore:i,handleToggleShowMore:g,mode:p,redirectProductShopifyLink:a}};exports.useGpDescription=useGpDescription;

package/dist/cjs/product/components/product-variants/common/base/styles.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getColorStyleWidth=e=>{let t=e?.height||"32px",o=e?.width||{desktop:t},r=Object.fromEntries(Object.entries(o).map(([e,o])=>{let r=o&&"undefined"!==o&&"auto"!==o?o:t;return[e,r]}));return core.makeStyleResponsive("minw",r)},getWrapperStyleActive=e=>{let{preset:t,optionTypography:o,optionTypo:r,typeOfOption:l}=e,a=t?.optionBgColor,p=t?.optionTextColor,i=t?.optionBorder,d=t?.optionHasShadow,c=t?.optionShadow,n=t?.optionRounded,h="color"===l,s="image"===l||"image_shopify"===l,g=core.composeTypographyStyle(r,o),y=e=>{let t=a?.active??a?.normal,o=i?.active??i?.normal;return core.makeStyle({bg:e&&core.getSingleColorVariable(t),bs:o?.border,bw:o?.width,bc:core.getSingleColorVariable(o?.color)})},S=c?.active??c?.normal,b=d?.active??d?.normal,m=p?.active??p?.normal;return helpers.filterTruthyObject({...y(!h),...core.getRadiusStyleActiveState(n),...core.getStyleShadow({value:S,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:b},!0),...g,...!h&&!s&&core.makeStyle({c:core.getSingleColorVariable(m)}),...h&&getColorStyleWidth(t),...core.makeStyle({h:t?.height})})},getWrapperStyleNormalAndHover=e=>{let{preset:t,optionTransform:o,optionTypography:r,optionTypo:l,typeOfOption:a}=e,p=t?.optionBgColor,i=t?.optionTextColor,d=t?.optionBorder,c=t?.optionHasShadow,n=t?.optionShadow,h=t?.optionRounded,s="color"===a,g="image"===a||"image_shopify"===a,y=core.composeTypographyStyle(l,r),S=["normal","hover"].reduce((e,t)=>({...e,...core.getStyleShadow({value:n?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:c?.[t]})}),{});return helpers.filterTruthyObject({...core.composeRadius(h),...S,...!s&&core.getGlobalColorStateStyle("bg",p),...!s&&core.handleConvertBorderStyle(d),...!s&&core.handleConvertBorderWidth(d),...!s&&core.handleConvertBorderColor(d),...!s&&!g&&core.makeStyle({c:o}),...!s&&!g&&core.getGlobalColorStateStyle("c",i),...y,...s&&getColorStyleWidth(t),...core.makeStyle({h:t?.height})})},getWrapperTextStyle=e=>{let{preset:t,typeOfOption:o,checked:r}=e,l=t?.optionBorder,a=t?.optionRounded,p="color"===o,i=()=>{let e="16px",o={"--pl":"0px","--pr":"0px","--pl-tablet":"0px","--pr-tablet":"0px","--pl-mobile":"0px","--pr-mobile":"0px","--pt":"0px","--pb":"0px"};return t?.width?.desktop?.toLowerCase()!=="auto"&&t?.width?.desktop||(o["--pl"]=e,o["--pr"]=e),t?.width?.tablet?.toLowerCase()!=="auto"&&t?.width?.tablet||(o["--pl-tablet"]=e,o["--pr-tablet"]=e),t?.width?.mobile?.toLowerCase()!=="auto"&&t?.width?.mobile||(o["--pl-mobile"]=e,o["--pr-mobile"]=e),(t?.height?.toLowerCase()==="auto"||t?.height)&&(o["--pt"]="8px",o["--pb"]="8px"),o},d={...a,active:{...a?.active||{},radiusType:"custom"}},c=r?core.getRadiusStyleActiveState(d):core.composeRadius(a),n=!r&&p?{...core.handleConvertBorderStyle(l),...core.handleConvertBorderWidth(l),...core.handleConvertBorderColor(l)}:{};return helpers.filterTruthyObject({...!p&&i(),...p&&c,...n})},getColorStyle=({optionBorder:e,optionRounded:t,isActive:o,color:r})=>{let l=()=>r?r?.startsWith("linear-gradient")?{backgroundImage:r}:{backgroundColor:r}:{},a=t=>t?{"--bs":"none"}:core.handleConvertBorderStyle(e),p=o=>({"--d":"flex","--jc":"center","	--ai":"center","--w":"100%","--h":"100%","--of":"hidden",...a(o),...core.handleConvertBorderWidth(e),...core.handleConvertBorderColor(e),...core.composeRadius(t),...l()});return p(!!o)},getTextStyle=({optionTypo:e,optionTypography:t})=>{let o=core.composeTypographyStyle(e,t);return delete o["--c"],helpers.filterTruthyObject({...o})};exports.getColorStyle=getColorStyle,exports.getTextStyle=getTextStyle,exports.getWrapperStyleActive=getWrapperStyleActive,exports.getWrapperStyleNormalAndHover=getWrapperStyleNormalAndHover,exports.getWrapperTextStyle=getWrapperTextStyle;
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getColorStyleWidth=e=>{let t=e?.height||"32px",o=e?.width||{desktop:t},r=Object.fromEntries(Object.entries(o).map(([e,o])=>{let r=o&&"undefined"!==o&&"auto"!==o?o:t;return[e,r]}));return core.makeStyleResponsive("minw",r)},getWrapperStyleActive=e=>{let{preset:t,optionTypography:o,optionTypo:r,typeOfOption:l}=e,a=t?.optionBgColor,p=t?.optionTextColor,i=t?.optionBorder,n=t?.optionHasShadow,c=t?.optionShadow,d=t?.optionRounded,h="color"===l,s="image"===l||"image_shopify"===l,y=core.composeTypographyStyle(r,o),S=e=>{let t=a?.active??a?.normal,o=i?.active??i?.normal;return core.makeStyle({bg:e&&core.getSingleColorVariable(t),bs:o?.border,bw:o?.width,bc:core.getSingleColorVariable(o?.color)})},g=c?.active??c?.normal,b=n?.active??n?.normal,u=p?.active??p?.normal;return helpers.filterTruthyObject({...S(!h),...core.getRadiusStyleActiveState(d),...core.getStyleShadow({value:g,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:b},!0),...y,...!h&&!s&&core.makeStyle({c:core.getSingleColorVariable(u)}),...h&&getColorStyleWidth(t),...core.makeStyle({h:t?.height})})},getWrapperStyleNormalAndHover=e=>{let{preset:t,optionTransform:o,optionTypography:r,optionTypo:l,typeOfOption:a}=e,p=t?.optionBgColor,i=t?.optionTextColor,n=t?.optionBorder,c=t?.optionHasShadow,d=t?.optionShadow,h=t?.optionRounded,s="color"===a,y="image"===a||"image_shopify"===a,S=["normal","hover"].reduce((e,t)=>({...e,...core.getStyleShadow({value:d?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:c?.[t]})}),{});return helpers.filterTruthyObject({...core.composeRadius(h),...S,...!s&&core.getGlobalColorStateStyle("bg",p),...!s&&core.handleConvertBorderStyle(n),...!s&&core.handleConvertBorderWidth(n),...!s&&core.handleConvertBorderColor(n),...!s&&!y&&core.makeStyle({c:o}),...!s&&!y&&core.getGlobalColorStateStyle("c",i),...typoStyleNotIn(l,r,["--c"]),...s&&getColorStyleWidth(t),...core.makeStyle({h:t?.height})})};function typoStyleNotIn(e,t,o){let r=core.composeTypographyStyle(e,t);return o&&0!==o.length?Object.fromEntries(Object.entries(r).filter(([e])=>!o.includes(e))):r}const getWrapperTextStyle=e=>{let{preset:t,typeOfOption:o,checked:r}=e,l=t?.optionBorder,a=t?.optionRounded,p="color"===o,i=()=>{let e="16px",o={"--pl":"0px","--pr":"0px","--pl-tablet":"0px","--pr-tablet":"0px","--pl-mobile":"0px","--pr-mobile":"0px","--pt":"0px","--pb":"0px"};return t?.width?.desktop?.toLowerCase()!=="auto"&&t?.width?.desktop||(o["--pl"]=e,o["--pr"]=e),t?.width?.tablet?.toLowerCase()!=="auto"&&t?.width?.tablet||(o["--pl-tablet"]=e,o["--pr-tablet"]=e),t?.width?.mobile?.toLowerCase()!=="auto"&&t?.width?.mobile||(o["--pl-mobile"]=e,o["--pr-mobile"]=e),(t?.height?.toLowerCase()==="auto"||t?.height)&&(o["--pt"]="8px",o["--pb"]="8px"),o},n={...a,active:{...a?.active||{},radiusType:"custom"}},c=r?core.getRadiusStyleActiveState(n):core.composeRadius(a),d=!r&&p?{...core.handleConvertBorderStyle(l),...core.handleConvertBorderWidth(l),...core.handleConvertBorderColor(l)}:{};return helpers.filterTruthyObject({...!p&&i(),...p&&c,...d})},getColorStyle=({optionBorder:e,optionRounded:t,isActive:o,color:r})=>{let l=()=>r?r?.startsWith("linear-gradient")?{backgroundImage:r}:{backgroundColor:r}:{},a=t=>t?{"--bs":"none"}:core.handleConvertBorderStyle(e),p=o=>({"--d":"flex","--jc":"center","	--ai":"center","--w":"100%","--h":"100%","--of":"hidden",...a(o),...core.handleConvertBorderWidth(e),...core.handleConvertBorderColor(e),...core.composeRadius(t),...l()});return p(!!o)},getTextStyle=({optionTypo:e,optionTypography:t})=>{let o=core.composeTypographyStyle(e,t);return delete o["--c"],helpers.filterTruthyObject({...o})};exports.getColorStyle=getColorStyle,exports.getTextStyle=getTextStyle,exports.getWrapperStyleActive=getWrapperStyleActive,exports.getWrapperStyleNormalAndHover=getWrapperStyleNormalAndHover,exports.getWrapperTextStyle=getWrapperTextStyle;

package/dist/cjs/product/components/product-variants/common/main/const.js

@@ -0,0 +1 @@
+"use strict";const VAR_WIDTH_BY_DEVICE={desktop:"--w",tablet:"--w-tablet",mobile:"--w-mobile"},HORIZONTAL_WIDTH="120px",DEFAULT_WIDTH_LABEL="fit-content";exports.DEFAULT_WIDTH_LABEL="fit-content",exports.HORIZONTAL_WIDTH="120px",exports.VAR_WIDTH_BY_DEVICE=VAR_WIDTH_BY_DEVICE;

package/dist/cjs/product/components/product-variants/common/main/getData.js

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),mappingVariantStyles=require("../../utils/mappingVariantStyles.js"),common=require("../common.js");const getDropdownGroupData=t=>{let{styles:e,setting:a}=t,{dropdownItemWidth:o}=e??{},r=mappingVariantStyles.mappingVariantStyles(a?.variantPresets,e),l={...a,variantPresets:r},i=()=>{let t={};return core.DEVICES.forEach(e=>{t[e]=o?.[e]==="fill"}),t};return{...e,...l,swatchAutoWidth:i()}},getTextVariantTitleData=(t,e,a)=>{let{styles:o,setting:r}=t,{layout:l}=r??{},{labelGap:i}=o??{},{optionName:n,hasPreSelected:p,isChangeVariant:s,selectedOptions:m,styleOptionSelected:g}=a??{},c=core.composeTypographyClassName(o?.labelTypo,o?.labelTypography),u=()=>{let t={};return l?.desktop==="horizontal"?t["--w"]="120px":l?.tablet==="horizontal"?t["--w-tablet"]="120px":l?.mobile==="horizontal"&&(t["--w-mobile"]="120px"),t},y=()=>"Liquid"===e?"{{option.name}}":`${n}${(!1!=p||s)&&"dropdown"!==g?`: ${m?.[n]}`:""}`;return{className:core.cls(c,"Liquid"===e?"{{showVariantClass}}":""),styles:{typo:o?.labelTypo},style:{...common.makeStyleGapForLabel(l,i)},setting:{htmlTag:"legend",text:y(),tagWidth:u(),excludeFlex:!0}}};exports.getDropdownGroupData=getDropdownGroupData,exports.getTextVariantTitleData=getTextVariantTitleData;
+"use strict";var core=require("@gem-sdk/core"),mappingVariantStyles=require("../../utils/mappingVariantStyles.js"),common=require("../common.js"),_const=require("./const.js");const getDropdownGroupData=e=>{let{styles:t,setting:a}=e,{dropdownItemWidth:r}=t??{},o=mappingVariantStyles.mappingVariantStyles(a?.variantPresets,t),n={...a,variantPresets:o},s=()=>{let e={};return core.DEVICES.forEach(t=>{e[t]=r?.[t]==="fill"}),e};return{...t,...n,swatchAutoWidth:s()}},getTextVariantTitleData=(e,t,a)=>{let{styles:r,setting:o}=e,{layout:n}=o??{},{labelGap:s}=r??{},{optionName:i,hasPreSelected:l,isChangeVariant:p,selectedOptions:c,styleOptionSelected:m}=a??{},g=core.composeTypographyClassName(r?.labelTypo,r?.labelTypography),u=e=>{let t=Object.fromEntries(core.DEVICES.map(t=>[_const.VAR_WIDTH_BY_DEVICE[t],"horizontal"===core.getResponsiveValueByScreen(e,t)?_const.HORIZONTAL_WIDTH:_const.DEFAULT_WIDTH_LABEL]));return t},D=()=>"Liquid"===t?"{{option.name}}":`${i}${(!1!=l||p)&&"dropdown"!==m?`: ${c?.[i]}`:""}`;return{className:core.cls(g,"Liquid"===t?"{{showVariantClass}}":""),styles:{typo:r?.labelTypo},style:{...common.makeStyleGapForLabel(n,s)},setting:{htmlTag:"legend",text:D(),tagWidth:u(n),excludeFlex:!0}}};exports.getDropdownGroupData=getDropdownGroupData,exports.getTextVariantTitleData=getTextVariantTitleData;

package/dist/esm/product/components/product-description/hooks/useGpDescription.js

@@ -1 +1 @@
-import{useRef as e,useState as t,useCallback as r,useEffect as i}from"react";import{DESCRIPTION_LINE_HEIGHT_DEFAULT as l}from"../common/helpers.js";import{useProduct as n,useCurrentDevice as o,getResponsiveValueByScreen as m,useProductShopifyEditLink as u,useEditorMode as p}from"@gem-sdk/core";let useGpDescription=s=>{let c=e(null),[a,h]=t(!1),[g,H]=t(!1),d=n(),y=o(),f=m(s?.hasLineClamp,y),x=m(s?.lineClamp,y),{redirectProductShopifyLink:C}=u(),w=p(),D=r(()=>{if(!c.current)return l;let e=window.getComputedStyle(c.current).getPropertyValue("line-height");return Math.ceil(parseFloat(e))},[]),G=r(e=>f&&x&&e?`${x*e}px`:"auto",[f,x]),M=()=>{if(!c.current)return;let e=D();a?c.current.style.maxHeight=G(e):c.current.style.maxHeight="none",h(e=>!e)};return i(()=>{let e=D();G(e)},[s?.typo?.custom,G,D]),i(()=>{let e=c.current;if(h(!1),!e)return;let t=f&&d?.descriptionHtml;t?setTimeout(()=>{let t=e?.scrollHeight??0,r=e?.clientHeight??0,i=D(),l=Math.round((t??0)/i);e.style.maxHeight=G(i);let n=x&&x<l||r<t;x&&n?H(()=>!0):H(()=>!1)},100):e.style.maxHeight="none"},[f,x,d?.description,d?.descriptionHtml,D,G,h,H]),{ref:c,open:a,isShowViewMore:g,handleToggleShowMore:M,mode:w,redirectProductShopifyLink:C}};export{useGpDescription};
+import{useRef as e,useState as t,useCallback as r,useEffect as i}from"react";import{DESCRIPTION_LINE_HEIGHT_DEFAULT as l}from"../common/helpers.js";import{useProduct as n,useCurrentDevice as o,getResponsiveValueByScreen as p,useProductShopifyEditLink as u,useEditorMode as m,isSafari as s}from"@gem-sdk/core";let useGpDescription=c=>{let a=e(null),[h,g]=t(!1),[d,y]=t(!1),H=n(),f=o(),x=p(c?.hasLineClamp,f),w=p(c?.lineClamp,f),{redirectProductShopifyLink:C}=u(),D=m(),G=r(()=>{if(!a.current)return l;let e=window.getComputedStyle(a.current).getPropertyValue("line-height");return Math.ceil(parseFloat(e))},[]),M=r(e=>x&&w&&e?`${w*e}px`:"auto",[x,w]),P=()=>{if(!a.current)return;let e=G();h?a.current.style.maxHeight=M(e):a.current.style.maxHeight="none",g(e=>!e)};return i(()=>{let e=G();M(e)},[c?.typo?.custom,M,G]),i(()=>{let e=a.current;if(g(!1),!e)return;let t=x&&H?.descriptionHtml;t?setTimeout(()=>{let t=e?.scrollHeight??0,r=e?.clientHeight??0,i=r<t,l=window.getComputedStyle(e).getPropertyValue("line-height"),n=parseInt(l,10)||1,o=Math.round((t??0)/n),p=void 0!==w&&w<o,u=s()?p:i;e.style.maxHeight=M(n),w&&u?y(()=>!0):y(()=>!1)},100):e.style.maxHeight="none"},[x,w,H?.description,H?.descriptionHtml,G,M,g,y]),{ref:a,open:h,isShowViewMore:d,handleToggleShowMore:P,mode:D,redirectProductShopifyLink:C}};export{useGpDescription};

package/dist/esm/product/components/product-variants/common/base/styles.js

@@ -1 +1 @@
-import{composeTypographyStyle as e,getRadiusStyleActiveState as t,getStyleShadow as o,makeStyle as r,getSingleColorVariable as l,composeRadius as p,getGlobalColorStateStyle as i,handleConvertBorderStyle as a,handleConvertBorderWidth as n,handleConvertBorderColor as d,makeStyleResponsive as h}from"@gem-sdk/core";import{filterTruthyObject as c}from"../../../../../helpers.js";let getColorStyleWidth=e=>{let t=e?.height||"32px",o=e?.width||{desktop:t},r=Object.fromEntries(Object.entries(o).map(([e,o])=>{let r=o&&"undefined"!==o&&"auto"!==o?o:t;return[e,r]}));return h("minw",r)},getWrapperStyleActive=p=>{let{preset:i,optionTypography:a,optionTypo:n,typeOfOption:d}=p,h=i?.optionBgColor,g=i?.optionTextColor,b=i?.optionBorder,s=i?.optionHasShadow,m=i?.optionShadow,u=i?.optionRounded,w="color"===d,x="image"===d||"image_shopify"===d,S=e(n,a),y=e=>{let t=h?.active??h?.normal,o=b?.active??b?.normal;return r({bg:e&&l(t),bs:o?.border,bw:o?.width,bc:l(o?.color)})},v=m?.active??m?.normal,C=s?.active??s?.normal,W=g?.active??g?.normal;return c({...y(!w),...t(u),...o({value:v,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:C},!0),...S,...!w&&!x&&r({c:l(W)}),...w&&getColorStyleWidth(i),...r({h:i?.height})})},getWrapperStyleNormalAndHover=t=>{let{preset:l,optionTransform:h,optionTypography:g,optionTypo:b,typeOfOption:s}=t,m=l?.optionBgColor,u=l?.optionTextColor,w=l?.optionBorder,x=l?.optionHasShadow,S=l?.optionShadow,y=l?.optionRounded,v="color"===s,C="image"===s||"image_shopify"===s,W=e(b,g),f=["normal","hover"].reduce((e,t)=>({...e,...o({value:S?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:x?.[t]})}),{});return c({...p(y),...f,...!v&&i("bg",m),...!v&&a(w),...!v&&n(w),...!v&&d(w),...!v&&!C&&r({c:h}),...!v&&!C&&i("c",u),...W,...v&&getColorStyleWidth(l),...r({h:l?.height})})},getWrapperTextStyle=e=>{let{preset:o,typeOfOption:r,checked:l}=e,i=o?.optionBorder,h=o?.optionRounded,g="color"===r,b=()=>{let e="16px",t={"--pl":"0px","--pr":"0px","--pl-tablet":"0px","--pr-tablet":"0px","--pl-mobile":"0px","--pr-mobile":"0px","--pt":"0px","--pb":"0px"};return o?.width?.desktop?.toLowerCase()!=="auto"&&o?.width?.desktop||(t["--pl"]=e,t["--pr"]=e),o?.width?.tablet?.toLowerCase()!=="auto"&&o?.width?.tablet||(t["--pl-tablet"]=e,t["--pr-tablet"]=e),o?.width?.mobile?.toLowerCase()!=="auto"&&o?.width?.mobile||(t["--pl-mobile"]=e,t["--pr-mobile"]=e),(o?.height?.toLowerCase()==="auto"||o?.height)&&(t["--pt"]="8px",t["--pb"]="8px"),t},s={...h,active:{...h?.active||{},radiusType:"custom"}},m=l?t(s):p(h),u=!l&&g?{...a(i),...n(i),...d(i)}:{};return c({...!g&&b(),...g&&m,...u})},getColorStyle=({optionBorder:e,optionRounded:t,isActive:o,color:r})=>{let l=()=>r?r?.startsWith("linear-gradient")?{backgroundImage:r}:{backgroundColor:r}:{},i=t=>t?{"--bs":"none"}:a(e),h=o=>({"--d":"flex","--jc":"center","	--ai":"center","--w":"100%","--h":"100%","--of":"hidden",...i(o),...n(e),...d(e),...p(t),...l()});return h(!!o)},getTextStyle=({optionTypo:t,optionTypography:o})=>{let r=e(t,o);return delete r["--c"],c({...r})};export{getColorStyle,getTextStyle,getWrapperStyleActive,getWrapperStyleNormalAndHover,getWrapperTextStyle};
+import{composeTypographyStyle as e,getRadiusStyleActiveState as t,getStyleShadow as o,makeStyle as r,getSingleColorVariable as l,composeRadius as i,getGlobalColorStateStyle as p,handleConvertBorderStyle as a,handleConvertBorderWidth as n,handleConvertBorderColor as d,makeStyleResponsive as h}from"@gem-sdk/core";import{filterTruthyObject as c}from"../../../../../helpers.js";let getColorStyleWidth=e=>{let t=e?.height||"32px",o=e?.width||{desktop:t},r=Object.fromEntries(Object.entries(o).map(([e,o])=>{let r=o&&"undefined"!==o&&"auto"!==o?o:t;return[e,r]}));return h("minw",r)},getWrapperStyleActive=i=>{let{preset:p,optionTypography:a,optionTypo:n,typeOfOption:d}=i,h=p?.optionBgColor,g=p?.optionTextColor,s=p?.optionBorder,b=p?.optionHasShadow,m=p?.optionShadow,u=p?.optionRounded,w="color"===d,x="image"===d||"image_shopify"===d,y=e(n,a),S=e=>{let t=h?.active??h?.normal,o=s?.active??s?.normal;return r({bg:e&&l(t),bs:o?.border,bw:o?.width,bc:l(o?.color)})},v=m?.active??m?.normal,C=b?.active??b?.normal,f=g?.active??g?.normal;return c({...S(!w),...t(u),...o({value:v,state:"active",styleAppliedFor:"box-shadow",isEnableShadow:C},!0),...y,...!w&&!x&&r({c:l(f)}),...w&&getColorStyleWidth(p),...r({h:p?.height})})},getWrapperStyleNormalAndHover=e=>{let{preset:t,optionTransform:l,optionTypography:h,optionTypo:g,typeOfOption:s}=e,b=t?.optionBgColor,m=t?.optionTextColor,u=t?.optionBorder,w=t?.optionHasShadow,x=t?.optionShadow,y=t?.optionRounded,S="color"===s,v="image"===s||"image_shopify"===s,C=["normal","hover"].reduce((e,t)=>({...e,...o({value:x?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:w?.[t]})}),{});return c({...i(y),...C,...!S&&p("bg",b),...!S&&a(u),...!S&&n(u),...!S&&d(u),...!S&&!v&&r({c:l}),...!S&&!v&&p("c",m),...typoStyleNotIn(g,h,["--c"]),...S&&getColorStyleWidth(t),...r({h:t?.height})})};function typoStyleNotIn(t,o,r){let l=e(t,o);return r&&0!==r.length?Object.fromEntries(Object.entries(l).filter(([e])=>!r.includes(e))):l}let getWrapperTextStyle=e=>{let{preset:o,typeOfOption:r,checked:l}=e,p=o?.optionBorder,h=o?.optionRounded,g="color"===r,s=()=>{let e="16px",t={"--pl":"0px","--pr":"0px","--pl-tablet":"0px","--pr-tablet":"0px","--pl-mobile":"0px","--pr-mobile":"0px","--pt":"0px","--pb":"0px"};return o?.width?.desktop?.toLowerCase()!=="auto"&&o?.width?.desktop||(t["--pl"]=e,t["--pr"]=e),o?.width?.tablet?.toLowerCase()!=="auto"&&o?.width?.tablet||(t["--pl-tablet"]=e,t["--pr-tablet"]=e),o?.width?.mobile?.toLowerCase()!=="auto"&&o?.width?.mobile||(t["--pl-mobile"]=e,t["--pr-mobile"]=e),(o?.height?.toLowerCase()==="auto"||o?.height)&&(t["--pt"]="8px",t["--pb"]="8px"),t},b={...h,active:{...h?.active||{},radiusType:"custom"}},m=l?t(b):i(h),u=!l&&g?{...a(p),...n(p),...d(p)}:{};return c({...!g&&s(),...g&&m,...u})},getColorStyle=({optionBorder:e,optionRounded:t,isActive:o,color:r})=>{let l=()=>r?r?.startsWith("linear-gradient")?{backgroundImage:r}:{backgroundColor:r}:{},p=t=>t?{"--bs":"none"}:a(e),h=o=>({"--d":"flex","--jc":"center","	--ai":"center","--w":"100%","--h":"100%","--of":"hidden",...p(o),...n(e),...d(e),...i(t),...l()});return h(!!o)},getTextStyle=({optionTypo:t,optionTypography:o})=>{let r=e(t,o);return delete r["--c"],c({...r})};export{getColorStyle,getTextStyle,getWrapperStyleActive,getWrapperStyleNormalAndHover,getWrapperTextStyle};

package/dist/esm/product/components/product-variants/common/main/const.js

@@ -0,0 +1 @@
+let VAR_WIDTH_BY_DEVICE={desktop:"--w",tablet:"--w-tablet",mobile:"--w-mobile"},HORIZONTAL_WIDTH="120px",DEFAULT_WIDTH_LABEL="fit-content";export{DEFAULT_WIDTH_LABEL,HORIZONTAL_WIDTH,VAR_WIDTH_BY_DEVICE};

package/dist/esm/product/components/product-variants/common/main/getData.js

@@ -1 +1 @@
-import{composeTypographyClassName as t,cls as e,DEVICES as a}from"@gem-sdk/core";import{mappingVariantStyles as o}from"../../utils/mappingVariantStyles.js";import{makeStyleGapForLabel as l}from"../common.js";let getDropdownGroupData=t=>{let{styles:e,setting:l}=t,{dropdownItemWidth:r}=e??{},i=o(l?.variantPresets,e),n={...l,variantPresets:i},p=()=>{let t={};return a.forEach(e=>{t[e]=r?.[e]==="fill"}),t};return{...e,...n,swatchAutoWidth:p()}},getTextVariantTitleData=(a,o,r)=>{let{styles:i,setting:n}=a,{layout:p}=n??{},{labelGap:s}=i??{},{optionName:m,hasPreSelected:d,isChangeVariant:g,selectedOptions:u,styleOptionSelected:h}=r??{},x=t(i?.labelTypo,i?.labelTypography),w=()=>{let t={};return p?.desktop==="horizontal"?t["--w"]="120px":p?.tablet==="horizontal"?t["--w-tablet"]="120px":p?.mobile==="horizontal"&&(t["--w-mobile"]="120px"),t},y=()=>"Liquid"===o?"{{option.name}}":`${m}${(!1!=d||g)&&"dropdown"!==h?`: ${u?.[m]}`:""}`;return{className:e(x,"Liquid"===o?"{{showVariantClass}}":""),styles:{typo:i?.labelTypo},style:{...l(p,s)},setting:{htmlTag:"legend",text:y(),tagWidth:w(),excludeFlex:!0}}};export{getDropdownGroupData,getTextVariantTitleData};
+import{composeTypographyClassName as t,cls as e,DEVICES as r,getResponsiveValueByScreen as a}from"@gem-sdk/core";import{mappingVariantStyles as o}from"../../utils/mappingVariantStyles.js";import{makeStyleGapForLabel as l}from"../common.js";import{VAR_WIDTH_BY_DEVICE as i,HORIZONTAL_WIDTH as n,DEFAULT_WIDTH_LABEL as s}from"./const.js";let getDropdownGroupData=t=>{let{styles:e,setting:a}=t,{dropdownItemWidth:l}=e??{},i=o(a?.variantPresets,e),n={...a,variantPresets:i},s=()=>{let t={};return r.forEach(e=>{t[e]=l?.[e]==="fill"}),t};return{...e,...n,swatchAutoWidth:s()}},getTextVariantTitleData=(o,p,m)=>{let{styles:d,setting:g}=o,{layout:u}=g??{},{labelGap:c}=d??{},{optionName:h,hasPreSelected:y,isChangeVariant:T,selectedOptions:f,styleOptionSelected:x}=m??{},D=t(d?.labelTypo,d?.labelTypography),w=t=>{let e=Object.fromEntries(r.map(e=>[i[e],"horizontal"===a(t,e)?n:s]));return e},b=()=>"Liquid"===p?"{{option.name}}":`${h}${(!1!=y||T)&&"dropdown"!==x?`: ${f?.[h]}`:""}`;return{className:e(D,"Liquid"===p?"{{showVariantClass}}":""),styles:{typo:d?.labelTypo},style:{...l(u,c)},setting:{htmlTag:"legend",text:b(),tagWidth:w(u),excludeFlex:!0}}};export{getDropdownGroupData,getTextVariantTitleData};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "4.0.6",
+  "version": "4.0.9",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",