@gem-sdk/components 8.0.0-dev.28 → 8.0.0-dev.29

package/dist/cjs/product/components/product-variants/OptionVariantsNewFormat.liquid.js

@@ -22,7 +22,7 @@
 
       {% if optionTitle == option.name %}
         {%- assign variantPresetString = "${i}" -%}
-        {%- assign optionName = option.name | replace: "'", "'" | replace: '"', '"' -%}
+        {%- assign optionName = option.name | replace: "'", "'" | replace: '"', """ -%}
         {%- assign items = variantPresetString | split: '($2)' -%}
         {%- assign type = 'dropdown' -%}
 

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

@@ -1 +1 @@
-"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getSelectStyle=({width:e,height:r,optionTypo:o,optionTypography:t,optionBgColor:c,optionTextColor:l,optionRounded:a,optionHasShadow:s,optionShadow:i,optionBorder:n,optionTransform:d,isCombine:S})=>{let h=core.composeTypographyStyle(o,t),p=core.makeStyle({bg:core.getSingleColorVariable(c?.active),bs:n?.active?.border,bw:n?.active?.width,bc:n?.active?.color}),g=[S?"active":"normal","hover"].reduce((e,r)=>({...e,...core.getStyleShadow({value:i?.[r],state:r,styleAppliedFor:"box-shadow",isEnableShadow:s?.[r]})}),{});return helpers.filterTruthyObject({...core.makeStyleResponsive("w",core.makeWidth(e)),...core.makeStyle({h:r}),...g,...p,...core.makeStyle({tt:d}),...h,...core.getGlobalColorStateStyle("c",l),...core.getGlobalColorStateStyle("bg",c),...core.handleConvertBorderStyle(n),...core.handleConvertBorderWidth(n),...core.handleConvertBorderColor(n),...core.composeRadius(a),appearance:"none","background-image":"url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031)","background-repeat":"no-repeat","background-position":"right 16px center"})};exports.getSelectStyle=getSelectStyle;
+"use strict";var core=require("@gem-sdk/core"),helpers=require("../../../../../helpers.js");const getSelectStyle=({width:e,height:o,optionTypo:t,optionTypography:r,optionBgColor:a,optionTextColor:l,optionRounded:c,optionHasShadow:s,optionShadow:i,optionBorder:d,optionTransform:S,isCombine:h,textAlign:n})=>{let p=core.composeTypographyStyle(t,r),y=n?core.makeStyleResponsive("ta",n):{},g=core.makeStyle({bg:core.getSingleColorVariable(a?.active),bs:d?.active?.border,bw:d?.active?.width,bc:d?.active?.color}),b=[h?"active":"normal","hover"].reduce((e,o)=>({...e,...core.getStyleShadow({value:i?.[o],state:o,styleAppliedFor:"box-shadow",isEnableShadow:s?.[o]})}),{});return helpers.filterTruthyObject({...core.makeStyleResponsive("w",core.makeWidth(e)),...core.makeStyle({h:o}),...b,...g,...core.makeStyle({tt:S}),...p,...core.getGlobalColorStateStyle("c",l),...core.getGlobalColorStateStyle("bg",a),...core.handleConvertBorderStyle(d),...core.handleConvertBorderWidth(d),...core.handleConvertBorderColor(d),...core.composeRadius(c),...core.getStyleShadow({value:t?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:t?.custom?.hasShadowText}),...y,appearance:"none","background-image":"url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031)","background-repeat":"no-repeat","background-position":"right 16px center"})};exports.getSelectStyle=getSelectStyle;

package/dist/cjs/product/components/product-variants/components/dropdown-swatches/Dropdown.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),VariantOption=require("../dropdown-option/VariantOption.js"),DropdownOption=require("../dropdown-option/DropdownOption.js"),classes=require("../../common/dropdown/classes.js"),system=require("@gem-sdk/system"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),useDropdownSwatches=require("./hooks/useDropdownSwatches.js");const DropdownVariant=e=>{let{option:t,optionPosition:o,optionNumber:s,variantGroup:n,variants:r,price:i,blankText:a,swatchHeight:d,optionTypography:p,optionTransform:l,initValue:u,hasPreSelected:m,optionTypo:c,combineHeight:w,combineWidth:j,soldOutStyle:h}=e,{optionBgColor:y,optionTextColor:x,optionRounded:S,optionShadow:D,optionHasShadow:g,optionBorder:q}=e,{value:v,preset:O,handleOnChangeSelect:R,checkVariantInStock:b}=useDropdownSwatches.useDropdownSwatches(e),f="disable"===h;n||(y=O?.optionBgColor,x=O?.optionTextColor,q=O?.optionBorder,g=O?.optionHasShadow,D=O?.optionShadow,S=O?.optionRounded);let C=system.createClass(classes.getSelectClass({optionTypo:c,optionTypography:p,optionBgColor:y,optionBorder:q,optionTextColor:x})),V=system.createStyle(styles.getSelectStyle({width:n?j:O?.width,height:n?w:O?.height,optionTypo:c,optionTypography:p,optionBgColor:y,optionTextColor:x,optionRounded:S,optionShadow:D,optionHasShadow:g,optionBorder:q,optionTransform:l,swatchHeight:d,isCombine:n})),k=system.createAttr(attrs.getSelectAttr({optionName:t?.name,value:v??u,type:"React"})),N=()=>r?.map(e=>jsxRuntime.jsx(VariantOption.default,{disabled:!b(e)&&f,value:e?.id,variant:e,includePrice:i},e?.id)),P=()=>t?.values?.map(e=>jsxRuntime.jsx(DropdownOption.default,{value:e,optionName:t.name,optionPosition:o,optionNumber:s,isSoldOutMark:f},e?.id));return jsxRuntime.jsxs("select",{...k,className:C,style:V,onChange:e=>R(e),children:[system.If(!m,jsxRuntime.jsx("option",{value:"blank",children:a??"Please select an option"})," "),system.If(n,N(),P())]})};exports.default=DropdownVariant;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),VariantOption=require("../dropdown-option/VariantOption.js"),DropdownOption=require("../dropdown-option/DropdownOption.js"),classes=require("../../common/dropdown/classes.js"),system=require("@gem-sdk/system"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),useDropdownSwatches=require("./hooks/useDropdownSwatches.js");const DropdownVariant=e=>{let{option:t,optionPosition:o,optionNumber:s,variantGroup:n,variants:r,price:i,blankText:a,swatchHeight:d,optionTypography:l,optionTransform:p,initValue:u,hasPreSelected:m,optionTypo:c,combineHeight:w,combineWidth:j,soldOutStyle:h}=e,{optionBgColor:x,optionTextColor:y,optionRounded:S,optionShadow:g,optionHasShadow:D,optionBorder:q}=e,{value:v,preset:O,handleOnChangeSelect:R,checkVariantInStock:b}=useDropdownSwatches.useDropdownSwatches(e),f="disable"===h;n||(x=O?.optionBgColor,y=O?.optionTextColor,q=O?.optionBorder,D=O?.optionHasShadow,g=O?.optionShadow,S=O?.optionRounded);let C=system.createClass(classes.getSelectClass({optionTypo:c,optionTypography:l,optionBgColor:x,optionBorder:q,optionTextColor:y})),V=system.createStyle(styles.getSelectStyle({width:n?j:O?.width,height:n?w:O?.height,optionTypo:c,optionTypography:l,optionBgColor:x,optionTextColor:y,optionRounded:S,optionShadow:g,optionHasShadow:D,optionBorder:q,optionTransform:p,swatchHeight:d,isCombine:n,textAlign:c?.attrs?.textAlign})),k=system.createAttr(attrs.getSelectAttr({optionName:t?.name,value:v??u,type:"React"})),A=()=>r?.map(e=>jsxRuntime.jsx(VariantOption.default,{disabled:!b(e)&&f,value:e?.id,variant:e,includePrice:i},e?.id)),N=()=>t?.values?.map(e=>jsxRuntime.jsx(DropdownOption.default,{value:e,optionName:t.name,optionPosition:o,optionNumber:s,isSoldOutMark:f},e?.id));return jsxRuntime.jsxs("select",{...k,className:C,style:V,onChange:e=>R(e),children:[system.If(!m,jsxRuntime.jsx("option",{value:"blank",children:a??"Please select an option"})," "),system.If(n,A(),N())]})};exports.default=DropdownVariant;

package/dist/cjs/product/components/product-variants/components/dropdown-swatches/Dropdown.liquid.js

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../../common/dropdown/classes.js"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),index=require("../dropdown-option/render-liquid/index.js");const DropdownVariant=e=>{let{variantGroup:s,blankText:t,swatchAutoWidth:r,swatchHeight:o,optionTypography:d,optionBgColor:n,optionTextColor:i,optionRounded:l,optionShadow:a,optionHasShadow:c,optionBorder:m,optionTransform:p,hasPreSelected:y,optionTypo:u,combineHeight:q,combineWidth:w,soldOutStyle:g,children:x}=e,j="disable"===g,S=system.createClass(classes.getSelectClass({optionTypo:u,optionTypography:d,optionBgColor:n,optionBorder:m,optionTextColor:i})),$=system.createStyle(styles.getSelectStyle({width:s?w:r,height:s?q:o,optionTypo:u,optionTypography:d,optionBgColor:n,optionTextColor:i,optionRounded:l,optionHasShadow:c,optionShadow:a,optionBorder:m,optionTransform:p,isCombine:s})),f=system.createAttr(attrs.getSelectAttr({variantGroup:s,type:"Liquid"})),b=()=>x;return core.template`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var core=require("@gem-sdk/core"),system=require("@gem-sdk/system"),classes=require("../../common/dropdown/classes.js"),styles=require("../../common/dropdown/styles.js"),attrs=require("../../common/dropdown/attrs.js"),index=require("../dropdown-option/render-liquid/index.js");const DropdownVariant=e=>{let{variantGroup:t,blankText:s,swatchAutoWidth:r,swatchHeight:o,optionTypography:n,optionBgColor:i,optionTextColor:d,optionRounded:l,optionShadow:a,optionHasShadow:c,optionBorder:m,optionTransform:p,hasPreSelected:y,optionTypo:u,combineHeight:g,combineWidth:q,soldOutStyle:w,children:x}=e,j="disable"===w,S=system.createClass(classes.getSelectClass({optionTypo:u,optionTypography:n,optionBgColor:i,optionBorder:m,optionTextColor:d})),$=system.createStyle(styles.getSelectStyle({width:t?q:r,height:t?g:o,optionTypo:u,optionTypography:n,optionBgColor:i,optionTextColor:d,optionRounded:l,optionHasShadow:c,optionShadow:a,optionBorder:m,optionTransform:p,isCombine:t,textAlign:u?.attrs?.textAlign})),f=system.createAttr(attrs.getSelectAttr({variantGroup:t,type:"Liquid"})),A=()=>x;return core.template`
     <select
       ${f}
       class="${S}"
       style="${$}"
     >
-      ${system.If(!y,index.renderBlankOption(t))}
-      ${system.If(s,b(),index.renderDropdownOptions(j,y))}
+      ${system.If(!y,index.renderBlankOption(s))}
+      ${system.If(t,A(),index.renderDropdownOptions(j,y))}
     </select>`};exports.default=DropdownVariant;

package/dist/esm/product/components/product-variants/OptionVariantsNewFormat.liquid.js

@@ -22,7 +22,7 @@ import{template as e}from"@gem-sdk/core";import{Liquid as s,LiquidIf as i}from"@
 
       {% if optionTitle == option.name %}
         {%- assign variantPresetString = "${r}" -%}
-        {%- assign optionName = option.name | replace: "'", "'" | replace: '"', '"' -%}
+        {%- assign optionName = option.name | replace: "'", "'" | replace: '"', """ -%}
         {%- assign items = variantPresetString | split: '($2)' -%}
         {%- assign type = 'dropdown' -%}
 

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

@@ -1 +1 @@
-import{composeTypographyStyle as e,makeStyle as t,getSingleColorVariable as o,getStyleShadow as r,makeStyleResponsive as c,makeWidth as a,getGlobalColorStateStyle as i,handleConvertBorderStyle as s,handleConvertBorderWidth as l,handleConvertBorderColor as p,composeRadius as n}from"@gem-sdk/core";import{filterTruthyObject as b}from"../../../../../helpers.js";let getSelectStyle=({width:d,height:g,optionTypo:h,optionTypography:v,optionBgColor:m,optionTextColor:u,optionRounded:w,optionHasShadow:S,optionShadow:f,optionBorder:k,optionTransform:y,isCombine:x})=>{let j=e(h,v),A=t({bg:o(m?.active),bs:k?.active?.border,bw:k?.active?.width,bc:k?.active?.color}),E=[x?"active":"normal","hover"].reduce((e,t)=>({...e,...r({value:f?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:S?.[t]})}),{});return b({...c("w",a(d)),...t({h:g}),...E,...A,...t({tt:y}),...j,...i("c",u),...i("bg",m),...s(k),...l(k),...p(k),...n(w),appearance:"none","background-image":"url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031)","background-repeat":"no-repeat","background-position":"right 16px center"})};export{getSelectStyle};
+import{composeTypographyStyle as e,makeStyleResponsive as t,makeStyle as o,getSingleColorVariable as a,getStyleShadow as r,makeWidth as c,getGlobalColorStateStyle as s,handleConvertBorderStyle as l,handleConvertBorderWidth as i,handleConvertBorderColor as d,composeRadius as p}from"@gem-sdk/core";import{filterTruthyObject as h}from"../../../../../helpers.js";let getSelectStyle=({width:n,height:b,optionTypo:g,optionTypography:m,optionBgColor:u,optionTextColor:v,optionRounded:w,optionHasShadow:S,optionShadow:x,optionBorder:y,optionTransform:f,isCombine:k,textAlign:A})=>{let E=e(g,m),F=A?t("ta",A):{},j=o({bg:a(u?.active),bs:y?.active?.border,bw:y?.active?.width,bc:y?.active?.color}),T=[k?"active":"normal","hover"].reduce((e,t)=>({...e,...r({value:x?.[t],state:t,styleAppliedFor:"box-shadow",isEnableShadow:S?.[t]})}),{});return h({...t("w",c(n)),...o({h:b}),...T,...j,...o({tt:f}),...E,...s("c",v),...s("bg",u),...l(y),...i(y),...d(y),...p(w),...r({value:g?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:g?.custom?.hasShadowText}),...F,appearance:"none","background-image":"url(https://cdn.shopify.com/s/files/1/1827/4239/t/1/assets/ico-select.svg?v=155563818344741998551488860031)","background-repeat":"no-repeat","background-position":"right 16px center"})};export{getSelectStyle};

package/dist/esm/product/components/product-variants/components/dropdown-swatches/Dropdown.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsxs as o,jsx as t}from"react/jsx-runtime";import e from"../dropdown-option/VariantOption.js";import i from"../dropdown-option/DropdownOption.js";import{getSelectClass as n}from"../../common/dropdown/classes.js";import{createClass as r,createStyle as a,createAttr as p,If as m}from"@gem-sdk/system";import{getSelectStyle as d}from"../../common/dropdown/styles.js";import{getSelectAttr as s}from"../../common/dropdown/attrs.js";import{useDropdownSwatches as l}from"./hooks/useDropdownSwatches.js";let DropdownVariant=c=>{let{option:w,optionPosition:h,optionNumber:u,variantGroup:f,variants:j,price:v,blankText:b,swatchHeight:g,optionTypography:k,optionTransform:y,initValue:C,hasPreSelected:D,optionTypo:N,combineHeight:S,combineWidth:x,soldOutStyle:O}=c,{optionBgColor:P,optionTextColor:V,optionRounded:B,optionShadow:R,optionHasShadow:H,optionBorder:M}=c,{value:T,preset:q,handleOnChangeSelect:z,checkVariantInStock:A}=l(c),E="disable"===O;f||(P=q?.optionBgColor,V=q?.optionTextColor,M=q?.optionBorder,H=q?.optionHasShadow,R=q?.optionShadow,B=q?.optionRounded);let F=r(n({optionTypo:N,optionTypography:k,optionBgColor:P,optionBorder:M,optionTextColor:V})),G=a(d({width:f?x:q?.width,height:f?S:q?.height,optionTypo:N,optionTypography:k,optionBgColor:P,optionTextColor:V,optionRounded:B,optionShadow:R,optionHasShadow:H,optionBorder:M,optionTransform:y,swatchHeight:g,isCombine:f})),I=p(s({optionName:w?.name,value:T??C,type:"React"})),J=()=>j?.map(o=>t(e,{disabled:!A(o)&&E,value:o?.id,variant:o,includePrice:v},o?.id)),K=()=>w?.values?.map(o=>t(i,{value:o,optionName:w.name,optionPosition:h,optionNumber:u,isSoldOutMark:E},o?.id));return o("select",{...I,className:F,style:G,onChange:o=>z(o),children:[m(!D,t("option",{value:"blank",children:b??"Please select an option"})," "),m(f,J(),K())]})};export{DropdownVariant as default};
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import e from"../dropdown-option/VariantOption.js";import i from"../dropdown-option/DropdownOption.js";import{getSelectClass as n}from"../../common/dropdown/classes.js";import{createClass as r,createStyle as a,createAttr as p,If as m}from"@gem-sdk/system";import{getSelectStyle as s}from"../../common/dropdown/styles.js";import{getSelectAttr as d}from"../../common/dropdown/attrs.js";import{useDropdownSwatches as l}from"./hooks/useDropdownSwatches.js";let DropdownVariant=c=>{let{option:w,optionPosition:h,optionNumber:u,variantGroup:f,variants:g,price:j,blankText:v,swatchHeight:b,optionTypography:x,optionTransform:k,initValue:y,hasPreSelected:C,optionTypo:D,combineHeight:N,combineWidth:S,soldOutStyle:O}=c,{optionBgColor:P,optionTextColor:V,optionRounded:A,optionShadow:B,optionHasShadow:R,optionBorder:H}=c,{value:M,preset:T,handleOnChangeSelect:q,checkVariantInStock:z}=l(c),E="disable"===O;f||(P=T?.optionBgColor,V=T?.optionTextColor,H=T?.optionBorder,R=T?.optionHasShadow,B=T?.optionShadow,A=T?.optionRounded);let F=r(n({optionTypo:D,optionTypography:x,optionBgColor:P,optionBorder:H,optionTextColor:V})),G=a(s({width:f?S:T?.width,height:f?N:T?.height,optionTypo:D,optionTypography:x,optionBgColor:P,optionTextColor:V,optionRounded:A,optionShadow:B,optionHasShadow:R,optionBorder:H,optionTransform:k,swatchHeight:b,isCombine:f,textAlign:D?.attrs?.textAlign})),I=p(d({optionName:w?.name,value:M??y,type:"React"})),J=()=>g?.map(o=>t(e,{disabled:!z(o)&&E,value:o?.id,variant:o,includePrice:j},o?.id)),K=()=>w?.values?.map(o=>t(i,{value:o,optionName:w.name,optionPosition:h,optionNumber:u,isSoldOutMark:E},o?.id));return o("select",{...I,className:F,style:G,onChange:o=>q(o),children:[m(!C,t("option",{value:"blank",children:v??"Please select an option"})," "),m(f,J(),K())]})};export{DropdownVariant as default};

package/dist/esm/product/components/product-variants/components/dropdown-swatches/Dropdown.liquid.js

@@ -1,9 +1,9 @@
-import{template as o}from"@gem-sdk/core";import{createClass as r,createStyle as t,createAttr as e,If as m}from"@gem-sdk/system";import{getSelectClass as s}from"../../common/dropdown/classes.js";import{getSelectStyle as d}from"../../common/dropdown/styles.js";import{getSelectAttr as i}from"../../common/dropdown/attrs.js";import{renderBlankOption as n,renderDropdownOptions as p}from"../dropdown-option/render-liquid/index.js";let DropdownVariant=l=>{let{variantGroup:a,blankText:c,swatchAutoWidth:f,swatchHeight:w,optionTypography:$,optionBgColor:j,optionTextColor:u,optionRounded:y,optionShadow:g,optionHasShadow:h,optionBorder:b,optionTransform:k,hasPreSelected:q,optionTypo:x,combineHeight:D,combineWidth:V,soldOutStyle:C,children:L}=l,v="disable"===C,z=r(s({optionTypo:x,optionTypography:$,optionBgColor:j,optionBorder:b,optionTextColor:u})),A=t(d({width:a?V:f,height:a?D:w,optionTypo:x,optionTypography:$,optionBgColor:j,optionTextColor:u,optionRounded:y,optionHasShadow:h,optionShadow:g,optionBorder:b,optionTransform:k,isCombine:a})),B=e(i({variantGroup:a,type:"Liquid"})),E=()=>L;return o`
+import{template as o}from"@gem-sdk/core";import{createClass as t,createStyle as r,createAttr as e,If as s}from"@gem-sdk/system";import{getSelectClass as m}from"../../common/dropdown/classes.js";import{getSelectStyle as i}from"../../common/dropdown/styles.js";import{getSelectAttr as d}from"../../common/dropdown/attrs.js";import{renderBlankOption as n,renderDropdownOptions as p}from"../dropdown-option/render-liquid/index.js";let DropdownVariant=l=>{let{variantGroup:a,blankText:c,swatchAutoWidth:f,swatchHeight:w,optionTypography:g,optionBgColor:$,optionTextColor:j,optionRounded:u,optionShadow:x,optionHasShadow:y,optionBorder:h,optionTransform:b,hasPreSelected:k,optionTypo:q,combineHeight:A,combineWidth:D,soldOutStyle:V,children:C}=l,L="disable"===V,v=t(m({optionTypo:q,optionTypography:g,optionBgColor:$,optionBorder:h,optionTextColor:j})),z=r(i({width:a?D:f,height:a?A:w,optionTypo:q,optionTypography:g,optionBgColor:$,optionTextColor:j,optionRounded:u,optionHasShadow:y,optionShadow:x,optionBorder:h,optionTransform:b,isCombine:a,textAlign:q?.attrs?.textAlign})),B=e(d({variantGroup:a,type:"Liquid"})),E=()=>C;return o`
     <select
       ${B}
-      class="${z}"
-      style="${A}"
+      class="${v}"
+      style="${z}"
     >
-      ${m(!q,n(c))}
-      ${m(a,E(),p(v,q))}
+      ${s(!k,n(c))}
+      ${s(a,E(),p(L,k))}
     </select>`};export{DropdownVariant as default};

package/package.json

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