@gem-sdk/components 3.0.0-pre-production.14 → 3.0.1

package/dist/esm/sticky/settings/configs/ui-v1.js

@@ -0,0 +1 @@
+let SettingUIV1=[{type:"group",label:{en:"Display"},controls:[{type:"control",label:{en:""},layout:"vertical",setting:{id:"display"}}]},{type:"group",label:{en:"Size"},controls:[{type:"control",label:{en:"Full width"},setting:{id:"fullWidth"}},{condition:"fullWidth === false",type:"control",setting:{id:"width"},label:{en:"Width"},layout:"horizontal"}]},{type:"group",controls:[{type:"control",label:{en:"Background"},options:{label:"large",styleLabel:{marginBottom:"4px"}},setting:{id:"background"},layout:"vertical"},{label:{en:"Preload"},type:"control",setting:{id:"preloadBgImage"},condition:'background.type == "image"'}]},{type:"control",label:{en:"Position"},options:{label:"large"},setting:{id:"position"}}];export{SettingUIV1};

package/dist/esm/sticky/settings/configs/ui-v2.js

@@ -0,0 +1 @@
+let SettingUIV2=[{label:{en:"Layout"},controls:[{setting:{id:"position"},layout:"vertical"}]},{label:{en:"Size"},controls:[{setting:{id:"width"},label:{en:"Width"}},{label:{en:"Padding"},controlConfig:{id:"padding",type:"padding-v2",linkWithSetting:{name:"spacing-setting",field:"padding"},compoDefaultValue:{type:"custom",top:"16px",bottom:"16px",left:"24px",right:"24px"}}}]},{label:{en:"Background"},controls:[{setting:{id:"background"},layout:"vertical",options:{updateFields:[{field:"preload",settingId:"preloadBgImage"}]},controlChangeTrigger:{settings:[{action:{controlId:"preloadBgImage",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},controlConfig:{id:"border-advanced",type:"border-v2",linkWithSetting:{name:"border",field:"normal"},compoDefaultValue:{color:"line-3",border:"solid",width:"1px",borderWidth:"1px"}}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"Shadow"},setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]},{label:{en:"Display option"},controls:[{label:{en:"Condition"},setting:{id:"display"}}]}];export{SettingUIV2};

package/dist/esm/stock-counter/common/attrs.js

@@ -0,0 +1 @@
+let getLiquidTagAttrs=(t,e,a)=>{let{displayByDefault:s,scarcityThreshold:r=0,template:i,outOfStockMessage:o,continueSelling:d,unlimitedQuantityMessage:l,hiddenCounterWhenOutOfStock:g}=e??{},{displayProgressBar:p,textColor:c,oosTextColor:u,typo:A}=a??{},n=c||"brand",y=A?.attrs?.color;return{"data-id":t?.uid??"","data-visible":"{{ should_display }}","data-policy":"{{ variant_policy_list | escape }}","gp-setting":JSON.stringify({displayByDefault:s,displayProgressBar:p,scarcityThreshold:r,template:i,outOfStockMessage:o,continueSelling:d,unlimitedQuantityMessage:l,color:n,hiddenCounterWhenOutOfStock:g,oosTextColor:u,typoColor:y}).replaceAll('"',""")}},getLiquidProgressBarAttrs=()=>({"data-slot-type":"progress-bar","data-visible":"{{ show_progress_bar }}"}),getLiquidTextAttrs=()=>({"data-slot-type":"message"}),getWrapperAttrs=t=>({"data-id":t?.uid??""}),getIconAttrs=(t,e)=>({"data-slot-type":t?"oos-icon":"has-stock-icon","data-visible":e?"true":"false"});export{getIconAttrs,getLiquidProgressBarAttrs,getLiquidTagAttrs,getLiquidTextAttrs,getWrapperAttrs};

package/dist/esm/stock-counter/common/classes.js

@@ -0,0 +1 @@
+import{composeClasses as e,composeTypographyClassName as s}from"@gem-sdk/core";let getProgressBarClasses=s=>{let{effect:t}=s??{},g=t?e("before:gp-absolute before:gp-left-0 before:gp-h-full before:gp-w-full before:gp-animate-shift before:gp-content-[''] before:gp-bg-stock-counter-animate before:gp-bg-[length:60px_100%] before:gp-shadow-stock-counter"):{};return{...e("gp-sc-progress-bar gp-relative gp-w-full -gp-scale-100 !gp-bg-[length:200%] gp-mt-2"),...g}},getContainerClasses=s=>{let{progressBarPosition:t="bottom"}=s??{},g="bottom"===t;return{...e("gp-inline-block gp-flex"),"gp-flex-col":g,"gp-flex-col-reverse":!g}},getLiquidTagClasses=s=>({...e("gp-product-stock-counter data-[visible=true]:gp-block data-[visible=false]:gp-hidden"),...e(s?.cssClass)}),getWrapperIconClasses=s=>{let{iconPosition:t="left"}=s??{};return{...e("gp-flex gp-items-baseline gp-gap-x-1"),"gp-flex-row":"left"===t,"gp-flex-row-reverse gp-justify-end":"right"===t}},getIconClasses=()=>({...e("[&>svg]:!gp-h-[var(--w)] [&>svg]:!gp-w-auto tablet:[&>svg]:!gp-h-[var(--w-tablet)] mobile:[&>svg]:!gp-h-[var(--w-mobile)]")}),getOuterIconClasses=()=>({...e("gp-shrink-0 ")}),getTextClasses=t=>{let{typo:g}=t??{},r=s(g,t?.typography);return{...e(r)}},getWrapperClasses=(s,t)=>{let{hiddenCounterWhenOutOfStock:g}=s??{};return{...e("gp-flex"),"gp-opacity-50":t&&g}};export{getContainerClasses,getIconClasses,getLiquidTagClasses,getOuterIconClasses,getProgressBarClasses,getTextClasses,getWrapperClasses,getWrapperIconClasses};

package/dist/esm/stock-counter/common/helpers.js

@@ -0,0 +1,71 @@
+let QUANTITY_SOURCE={AUTO:"auto",MANUAL:"manual"},OUT_OF_STOCK={SHOW:"show",HIDE:"hide"},DEFAULT_QUANTITY_TEMPLATE="%number%",DEFAULT_HIGHLIGHT_TAG="mark",NO_PRODUCT_LEFT=0,DEFAULT_SCARCITY_THRESHOLD=12,DEFAULT_REMAINING_QUANTITY=12,DEFAULT_REMAINING_PERCENT=20,MIN_REMAINING_QUANTITY=0,MIN_REMAINING_PERCENT=10,MAX_REMAINING_PERCENT=100,DEFAULT_RANGE_STEP=10,DEFAULT_FONT_SIZE=20,DEFAULT_PROGRESS_BAR_HEIGHT=10,MIN_PROGRESS_BAR_HEIGHT=5,MAX_PROGRESS_BAR_HEIGHT=20,CONTINUE_SELLING_WHEN_OUT_OF_STOCK="CONTINUE",getLiquidTextContent=e=>{let{templateStringDisplay:t,outOfStockMessageDisplay:a,continueSellingDisplay:i,unlimitedQuantityMessageDisplay:n}=e??{};return`{% if inventory_management == null and inventory_quantity <= 0 %}
+                    ${n}
+                  {% elsif available == false %}
+                    ${a}
+                  {% elsif available and inventory_policy == '${CONTINUE_SELLING_WHEN_OUT_OF_STOCK.toLowerCase()}' and inventory_quantity <= 0 %}
+                    ${i}
+                  {% else %}
+                    ${t}
+                  {% endif %}`},getLiquidInitData=(e,t)=>{let{scarcityThreshold:a=0,hiddenCounterWhenOutOfStock:i,displayByDefault:n}=e??{},{displayProgressBar:_}=t??{},r=!!a&&a>0;return`{%- liquid
+      assign current_variant = variant
+      assign available = current_variant.available | default: false
+      assign inventory_management = current_variant.inventory_management | default: null
+      assign inventory_policy = current_variant.inventory_policy | default: 'deny'
+      assign inventory_quantity = current_variant.inventory_quantity | default: 0
+      assign scarcityThreshold = ${r}
+      assign check_display = ${!!n}
+
+      if inventory_management != null and available == false and inventory_quantity <= 0 and inventory_policy != '${CONTINUE_SELLING_WHEN_OUT_OF_STOCK.toLowerCase()}'
+        assign is_out_of_stock = true
+        else
+        assign is_out_of_stock = false
+      endif
+
+      if check_display == true
+        assign should_display = true
+      elsif ${r} and inventory_quantity >= 0 and inventory_quantity < ${a}
+        assign should_display = true
+      else
+        assign should_display = false
+      endif
+
+      if ${!0===i} and available == false
+        assign should_display = false
+      endif
+
+      if ${!0===_} and available
+        assign show_progress_bar = true
+      else
+        assign show_progress_bar = false
+      endif
+    -%}
+    {% capture variant_policy_list %}
+      {
+        {% for variant in product.variants %}
+        "{{ variant.id }}":"{{ variant.inventory_policy }}",
+        "{{ variant.id }}_management":"{{ variant.inventory_management }}"{% if forloop.last == false %},{% endif %}
+        {% endfor %}
+      }
+    {% endcapture %}`},getTextDisplayData=(e,t)=>{let{templateStringDisplay:a,outOfStockMessageDisplay:i,continueSellingDisplay:n,unlimitedQuantityMessageDisplay:_}=e??{},{textColor:r}=t??{},s=r||"brand";return`
+    <div class="gp-hidden gp-text-white gp-py-1 gp-px-2 gp-mr-1 gp-inline-block gp-my-[1px] gp-text-g-${s} gp-bg-g-${s}" >
+      <div id="template">${a}</div>
+      <div id="out-of-stock-message">${i}</div>
+      <div id="continue-selling">${n}</div>
+      <div id="unlimited-quantity-message">${_}</div>
+    </div>`},getInlineCss=(e,t)=>{let a=getBorderRadius(t);if(e)return`
+      [data-id="${e}"]  {
+          .gp-sc-progress-bar{
+            ${a}
+          }
+          .gp-sc-progress-bar:before{
+            ${a}
+          }
+      }`},getBorderRadius=e=>`
+  border-top-left-radius: ${e?.bbrr??"0px"};
+  border-top-right-radius: ${e?.bblr??"0px"};
+  border-bottom-left-radius: ${e?.btrr??"0px"};
+  border-bottom-right-radius: ${e?.btlr??"0px"};`,transformHighlighTag=(e,t)=>{if(!e.includes(`<${DEFAULT_HIGHLIGHT_TAG}>`))return e;let a="gp-text-white gp-py-1 gp-px-2 gp-mr-1 gp-inline-block gp-my-[1px]",i=`<${DEFAULT_HIGHLIGHT_TAG}>`;return i=t.includes("#")?`
+      <${DEFAULT_HIGHLIGHT_TAG} class='${a}' style='background-color: ${t}'>
+    `:`
+      <${DEFAULT_HIGHLIGHT_TAG} class='${a} gp-bg-g-${t}'>
+    `,e.replaceAll(`<${DEFAULT_HIGHLIGHT_TAG}>`,i)},transformNumberTag=(e,t,a)=>{if(!e.includes(DEFAULT_QUANTITY_TEMPLATE))return e;let i="";return i=t.includes("#")?`<span style='--c: ${t}'><$quantity$></span>`:`<span class='gp-text-g-${t}'><$quantity$></span>`,a&&(i=i.replace("<$quantity$>",a.toString())),e.replaceAll(DEFAULT_QUANTITY_TEMPLATE,i)},convertSizeToWidth=e=>{let t={};return e["--size"]&&(t["--w"]=e["--size"]),e["--size-tablet"]&&(t["--w-tablet"]=e["--size-tablet"]),e["--size-mobile"]&&(t["--w-mobile"]=e["--size-mobile"]),t};export{CONTINUE_SELLING_WHEN_OUT_OF_STOCK,DEFAULT_FONT_SIZE,DEFAULT_HIGHLIGHT_TAG,DEFAULT_PROGRESS_BAR_HEIGHT,DEFAULT_QUANTITY_TEMPLATE,DEFAULT_RANGE_STEP,DEFAULT_REMAINING_PERCENT,DEFAULT_REMAINING_QUANTITY,DEFAULT_SCARCITY_THRESHOLD,MAX_PROGRESS_BAR_HEIGHT,MAX_REMAINING_PERCENT,MIN_PROGRESS_BAR_HEIGHT,MIN_REMAINING_PERCENT,MIN_REMAINING_QUANTITY,NO_PRODUCT_LEFT,OUT_OF_STOCK,QUANTITY_SOURCE,convertSizeToWidth,getInlineCss,getLiquidInitData,getLiquidTextContent,getTextDisplayData,transformHighlighTag,transformNumberTag};

package/dist/esm/stock-counter/common/styles.js

@@ -0,0 +1 @@
+import{makeStyleResponsive as e,makeWidth as t,makeStyle as r,getSingleColorVariable as o,composeTypographyStyle as s,getStyleShadow as l,genVariable as n,getShortName as a,composeTypographyV2 as p}from"@gem-sdk/core";import{convertSizeToWidth as g}from"./helpers.js";let getProgressBarStyles=(s,l)=>{let n;let{progressBarHeight:a,color:p}=s??{},{remainingPercentage:g}=l??{};return a&&(n=Object.fromEntries(Object.entries(a).map(([e,t])=>[e,Number((t+"").replace("px",""))]))),{...e("h",t(n),"px"),...r({bg:"linear-gradient(90deg, #eee 50%, transparent 50%)",bgc:o(p),bgp:`${parseInt(String(g||0))}% center`})}},getContainerStyles=s=>{let{width:l,textColor:n}=s??{};return{...e("w",t(l)),...r({c:o(n)})}},getWrapperStyles=t=>{let{alignment:r}=t??{};return{...e("jc",r)}},getIconStyles=(e,t,s)=>{let{iconColor:l,oosIconColor:n}=e??{};return{...r({c:o(s?n:l)}),...getIconSize(e,t)}},getTextStyles=(e,t)=>{let{typo:r,oosTextColor:o}=e??{},n={...r,attrs:{...r?.attrs,color:t?o:r?.attrs?.color}},a=s(n,e?.typography);return{...a,...l({value:r?.custom?.textShadow,styleAppliedFor:"text-shadow",isEnableShadow:r?.custom?.hasShadowText})}};function getIconSize(o,s){let{typo:l}=o??{},{iconSize:c}=s??{};if(c?.desktop)return{...e("w",t(c),"px")};let i=l&&!l.custom?n(a(`typography-${l.type}-fontSize`)):void 0,S=l&&l.custom?g(p(l.custom)):{};return i?r({w:i}):S}export{getContainerStyles,getIconStyles,getProgressBarStyles,getTextStyles,getWrapperStyles};

package/dist/esm/stock-counter/components/StockCounter.js

@@ -1,128 +1,2 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useCurrentVariant, composeTypographyV2, composeTypography, getShortName, composeTypographyClassName, composeTypographyStyle, makeStyleResponsive, cls, makeWidth, makeStyle, getSingleColorVariable } from '@gem-sdk/core';
-import { useRef, useMemo, useEffect } from 'react';
-import { NO_PRODUCT_LEFT, CONTINUE_SELLING_WHEN_OUT_OF_STOCK } from '../const.js';
-import { convertSizeToWidth, transformHighlighTag, transformNumberTag } from '../helpers.js';
-import { useStockCounterInteraction } from '../hooks/useStockCounterInteraction.js';
-
-const StockCounter = ({ setting, styles, builderProps })=>{
-    const { fullWidth, width, alignment, typography, color, iconColor, textColor, displayProgressBar, progressBarHeight, roundedBorder, effect, typo } = styles ?? {};
-    const { remainingPercentage, showIcon, icon, template, outOfStockMessage, continueSelling, unlimitedQuantityMessage, hiddenCounterWhenOutOfStock } = setting ?? {};
-    const variant = useCurrentVariant();
-    const elementRef = useRef(null);
-    const inventoryQuantity = useMemo(()=>{
-        return Number(variant ? variant.inventoryQuantity : 0);
-    }, [
-        variant
-    ]);
-    const manageInventory = variant ? variant.manageInventory : true;
-    const inventoryPolicy = variant ? variant.inventoryPolicy : 'deny';
-    const mainColor = textColor || 'brand';
-    const { dispatchStockCounterInteraction } = useStockCounterInteraction({
-        element: elementRef,
-        uid: builderProps?.uid
-    });
-    const genVariable = (variableName)=>{
-        return `var(--g-${variableName})`;
-    };
-    const isOutOfStock = manageInventory && inventoryQuantity <= NO_PRODUCT_LEFT && inventoryPolicy !== CONTINUE_SELLING_WHEN_OUT_OF_STOCK;
-    const isContinueShopping = inventoryPolicy === CONTINUE_SELLING_WHEN_OUT_OF_STOCK && inventoryQuantity <= NO_PRODUCT_LEFT;
-    const isUnlimitedQuantity = !manageInventory && unlimitedQuantityMessage;
-    const showProgressBar = displayProgressBar !== false && !isOutOfStock;
-    function getMessage() {
-        if (isUnlimitedQuantity) return transformHighlighTag(unlimitedQuantityMessage, mainColor);
-        if (isOutOfStock) return transformHighlighTag(outOfStockMessage || '', mainColor);
-        if (isContinueShopping) return transformHighlighTag(continueSelling || '', mainColor);
-        return transformHighlighTag(transformNumberTag(template || '', mainColor, inventoryQuantity), mainColor);
-    }
-    const getVariableStyle = useMemo(()=>{
-        if (typo) {
-            return typo && typo.custom ? convertSizeToWidth(composeTypographyV2(typo.custom)) : {};
-        }
-        return typography && typography.custom ? convertSizeToWidth(composeTypography(typography.custom)) : {};
-    }, [
-        typo,
-        typography
-    ]);
-    const typoWidth = useMemo(()=>{
-        if (typo) {
-            return typo && !typo.custom ? genVariable(getShortName(`typography-${typo.type}-fontSize`)) : undefined;
-        }
-        return typography && !typography.custom ? genVariable(getShortName(`typography-${typography.type}-fontSize`)) : undefined;
-    }, [
-        typo,
-        typography
-    ]);
-    const appendTypoClass = composeTypographyClassName(styles?.typo, styles?.typography);
-    const appendTypoStyle = composeTypographyStyle(styles?.typo, styles?.typography);
-    useEffect(()=>{
-        dispatchStockCounterInteraction(inventoryQuantity);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        inventoryQuantity
-    ]);
-    return /*#__PURE__*/ jsx("div", {
-        style: {
-            ...makeStyleResponsive('ta', alignment)
-        },
-        ref: elementRef,
-        className: cls({
-            'gp-opacity-50': isOutOfStock && hiddenCounterWhenOutOfStock
-        }),
-        "data-id": builderProps?.uid,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: "gp-inline-block",
-            style: {
-                ...makeStyleResponsive('w', makeWidth(width, fullWidth)),
-                ...makeStyle({
-                    c: getSingleColorVariable(textColor)
-                })
-            },
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    className: "gp-flex gp-items-baseline",
-                    children: [
-                        showIcon && /*#__PURE__*/ jsx("div", {
-                            dangerouslySetInnerHTML: {
-                                __html: icon || ''
-                            },
-                            className: "gp-mr-1 gp-shrink-0 gp-bg-[length:60px_100%]",
-                            style: {
-                                ...makeStyle({
-                                    c: getSingleColorVariable(iconColor),
-                                    w: typoWidth
-                                }),
-                                ...getVariableStyle
-                            }
-                        }),
-                        /*#__PURE__*/ jsx("p", {
-                            dangerouslySetInnerHTML: {
-                                __html: getMessage()
-                            },
-                            className: appendTypoClass,
-                            style: appendTypoStyle
-                        })
-                    ]
-                }),
-                showProgressBar && /*#__PURE__*/ jsx("div", {
-                    style: {
-                        ...makeStyleResponsive('h', progressBarHeight),
-                        ...makeStyle({
-                            bg: 'linear-gradient(90deg, #eee 50%, transparent 50%)',
-                            bgc: getSingleColorVariable(color),
-                            bgp: `${remainingPercentage}% center`
-                        })
-                    },
-                    className: cls('gp-relative gp-mt-2 gp-w-full -gp-scale-100 !gp-bg-[length:200%]', {
-                        'gp-rounded-md': roundedBorder,
-                        "before:gp-absolute before:gp-eft-0 before:gp-h-full before:gp-w-full before:gp-animate-shift before:gp-content-['']": effect,
-                        'before:gp-bg-stock-counter-animate before:gp-bg-[length:60px_100%] before:gp-shadow-stock-counter': effect,
-                        'before:gp-rounded-md': effect && roundedBorder
-                    })
-                })
-            ]
-        })
-    });
-};
-
-export { StockCounter as default };
+'use client';
+import{jsxs as e,jsx as s}from"react/jsx-runtime";import{useRef as t,useEffect as o}from"react";import{useStockCounterInteraction as r}from"../hooks/useStockCounterInteraction.js";import{createClass as l,createStyle as m,createAttr as n}from"@gem-sdk/system";import{useStockCounter as a}from"../hooks/useStockCounter.js";import{getInlineCss as i}from"../common/helpers.js";import{getProgressBarClasses as c,getContainerClasses as d,getWrapperIconClasses as u,getIconClasses as p,getOuterIconClasses as f,getTextClasses as y,getWrapperClasses as h}from"../common/classes.js";import{getProgressBarStyles as N,getContainerStyles as S,getWrapperStyles as k,getIconStyles as _,getTextStyles as j}from"../common/styles.js";import{getWrapperAttrs as I,getIconAttrs as g}from"../common/attrs.js";let StockCounter=({setting:v,styles:C,builderProps:H})=>{let{displayProgressBar:L,borderRadius:M}=C??{},{showIcon:O,icon:T,layout:b="full",oosIcon:x}=v??{},{outputMessage:V,isOutOfStock:q,inventoryQuantity:w,shouldHideCounter:z}=a(v,C),A=t(null),{dispatchStockCounterInteraction:B}=r({element:A,uid:H?.uid}),D=i(H?.uid,M),E=!1!==L&&!q,F="progress-bar"!==b,G=l({...c(C)}),J=m({...N(C,v)}),K=m({...S(C)}),P=l({...d(v)}),Q=m({...k(C)}),R=l({...u(v)}),U=l({...p()}),W=l({...f()}),X=e=>m({..._(C,v,e)}),Y=({isOutOfStockIcon:e,isVisible:s})=>n({...g(e,s)}),Z=l({...y(C)}),$=e=>m({...j(C,e)}),ee=l({...h(v,q)}),es=n({...I(H)});return(o(()=>{B(w)},[w]),z)?null:e("div",{...es,style:Q,ref:A,className:ee,children:[s("style",{children:D}),e("div",{className:P,style:K,children:[e("div",{className:R,children:[O&&(q?s("div",{...Y({isOutOfStockIcon:q,isVisible:q}),style:X(!0),className:W,children:s("span",{className:U,dangerouslySetInnerHTML:{__html:x||""}})}):s("div",{...Y({isOutOfStockIcon:!q,isVisible:!q}),style:X(!1),className:W,children:s("span",{className:U,dangerouslySetInnerHTML:{__html:T||""}})})),F&&(q?s("p",{dangerouslySetInnerHTML:{__html:V()},className:Z,style:$(!0)}):s("p",{dangerouslySetInnerHTML:{__html:V()},className:Z,style:$(!1)}))]}),E&&s("div",{style:J,className:G})]})]})};export{StockCounter as default};

package/dist/esm/stock-counter/components/StockCounter.liquid.js

@@ -1,190 +1,70 @@
-import { composeMemo, composeTypographyV2, composeTypography, genVariable, getShortName, composeTypographyClassName, composeTypographyStyle, template, makeStyleResponsive, makeWidth, makeStyle, getSingleColorVariable, RenderIf, cls, isLocalEnv, baseAssetURL } from '@gem-sdk/core';
-import { CONTINUE_SELLING_WHEN_OUT_OF_STOCK } from '../const.js';
-import { convertSizeToWidth } from '../helpers.js';
-import { getDynamicSourceLocales, getSettingPreloadData } from '../../helpers.js';
-
-const StockCounter = ({ setting, styles, style, advanced, builderProps, pageContext })=>{
-    const { fullWidth, width, alignment, typography, typo, color, iconColor, textColor, displayProgressBar, progressBarHeight, roundedBorder, effect } = styles ?? {};
-    const { displayByDefault, scarcityThreshold = 0, remainingPercentage, showIcon, icon, template: templateString, outOfStockMessage, continueSelling, unlimitedQuantityMessage, hiddenCounterWhenOutOfStock, translate } = setting ?? {};
-    const mainColor = textColor || 'brand';
-    const checkDisplay = ()=>{
-        if (displayByDefault) return true;
-        return false;
-    };
-    const isScarcityThreshold = !!scarcityThreshold && scarcityThreshold > 0;
-    const getVariableStyle = composeMemo(()=>{
-        if (typo) {
-            return typo && typo.custom ? convertSizeToWidth(composeTypographyV2(typo.custom)) : {};
-        }
-        return typography && typography.custom ? convertSizeToWidth(composeTypography(typography.custom)) : {};
-    }, [
-        typo,
-        typography
-    ]);
-    const typoWidth = composeMemo(()=>{
-        if (typo) {
-            return typo && !typo.custom ? genVariable(getShortName(`typography-${typo.type}-fontSize`)) : undefined;
-        }
-        return typography && !typography.custom ? genVariable(getShortName(`typography-${typography.type}-fontSize`)) : undefined;
-    }, [
-        typo,
-        typography
-    ]);
-    const appendTypoClass = composeTypographyClassName(styles?.typo, styles?.typography);
-    const appendTypoStyle = composeTypographyStyle(styles?.typo, styles?.typography);
-    const templateStringDisplay = getDynamicSourceLocales({
-        val: templateString,
-        uid: builderProps?.uid,
-        settingId: 'template',
-        pageContext,
-        translate,
-        isReplaceInventoryQuantity: true
-    });
-    const outOfStockMessageDisplay = getDynamicSourceLocales({
-        val: outOfStockMessage,
-        uid: builderProps?.uid,
-        settingId: 'outOfStockMessage',
-        pageContext,
-        translate
-    });
-    const continueSellingDisplay = getDynamicSourceLocales({
-        val: continueSelling,
-        uid: builderProps?.uid,
-        settingId: 'continueSelling',
-        pageContext,
-        translate
-    });
-    const unlimitedQuantityMessageDisplay = getDynamicSourceLocales({
-        val: unlimitedQuantityMessage,
-        uid: builderProps?.uid,
-        settingId: 'unlimitedQuantityMessage',
-        pageContext,
-        translate
-    });
-    return template /* liquid */ `
-    {%- liquid
-      assign current_variant = variant
-      assign available = current_variant.available | default: false
-      assign inventory_management = current_variant.inventory_management | default: null
-      assign inventory_policy = current_variant.inventory_policy | default: 'deny'
-      assign inventory_quantity = current_variant.inventory_quantity | default: 0
-      assign scarcityThreshold = ${isScarcityThreshold}
-      assign check_display = ${checkDisplay()}
-
-      if check_display == true
-        assign should_display = true
-      elsif ${isScarcityThreshold} and inventory_quantity >= 0 and inventory_quantity < ${scarcityThreshold}
-        assign should_display = true
-      else
-        assign should_display = false
-      endif
-
-      if ${hiddenCounterWhenOutOfStock === true} and available == false
-        assign should_display = false
-      endif
-
-      if ${displayProgressBar === true} and available
-        assign show_progress_bar = true
-      else
-        assign show_progress_bar = false
-      endif
-    -%}
-    {% capture variant_policy_list %}
-      {
-        {% for variant in product.variants %}
-        "{{ variant.id }}":"{{ variant.inventory_policy }}",
-        "{{ variant.id }}_management":"{{ variant.inventory_management }}"{% if forloop.last == false %},{% endif %}
-        {% endfor %}
-      }
-    {% endcapture %}
-    <gp-product-stock-counter
-    data-id="${builderProps?.uid}"
-    data-visible="{{ should_display }}"
-    data-policy='{{ variant_policy_list }}'
-    gp-setting='${JSON.stringify({
-        displayByDefault,
-        displayProgressBar,
-        scarcityThreshold,
-        template: templateString,
-        outOfStockMessage,
-        continueSelling,
-        unlimitedQuantityMessage,
-        color: mainColor,
-        hiddenCounterWhenOutOfStock
-    }).replaceAll("'", '&#039;')}'
-    class="gp-product-stock-counter data-[visible=true]:gp-block data-[visible=false]:gp-hidden ${advanced?.cssClass}"
-      style="${{
-        ...style,
-        ...makeStyleResponsive('ta', alignment)
-    }}">
+import{composeClasses as s,template as t,RenderIf as e,isLocalEnv as i,baseAssetURL as l}from"@gem-sdk/core";import{getDynamicSourceLocales as o,getSettingPreloadData as a}from"../../helpers.js";import{getInlineCss as r,getLiquidInitData as c,getLiquidTextContent as d,getTextDisplayData as $}from"../common/helpers.js";import{getProgressBarClasses as n,getContainerClasses as p,getLiquidTagClasses as u,getWrapperIconClasses as m,getIconClasses as v,getOuterIconClasses as g,getWrapperClasses as f,getTextClasses as k}from"../common/classes.js";import{getProgressBarStyles as y,getContainerStyles as S,getWrapperStyles as b,getIconStyles as I,getTextStyles as O}from"../common/styles.js";import{getLiquidTagAttrs as _,getLiquidProgressBarAttrs as j,getLiquidTextAttrs as h,getIconAttrs as V}from"../common/attrs.js";import{createAttr as E,createClass as M,createStyle as A,LiquidIf as C}from"@gem-sdk/system";let StockCounter=({setting:G,styles:Q,style:R,advanced:x,builderProps:N,pageContext:P})=>{let{borderRadius:T}=Q??{},{showIcon:q,icon:w,oosIcon:z,layout:B="full",template:D,outOfStockMessage:F,continueSelling:H,unlimitedQuantityMessage:J}=G??{},K=r(N?.uid,T),L="progress-bar"!==B,U=o({val:D,uid:N?.uid,settingId:"template",pageContext:P,translate:G?.translate,isReplaceInventoryQuantity:!0}),W=o({val:F,uid:N?.uid,settingId:"outOfStockMessage",pageContext:P,translate:G?.translate}),X=o({val:H,uid:N?.uid,settingId:"continueSelling",pageContext:P,translate:G?.translate}),Y=o({val:J,uid:N?.uid,settingId:"unlimitedQuantityMessage",pageContext:P,translate:G?.translate}),Z=E({..._(N,G,Q)}),ss=M({...s("gp-stock-counter-progress gp-mt-2 data-[visible=true]:gp-block data-[visible=false]:gp-hidden"),...n(Q)}),st=A({...y(Q,G)}),se=A({...S(Q)}),si=M({...p(G)}),sl=M({...u(x)}),so=A({...R}),sa=A({...b(Q)}),sr=c(G,Q),sc=d({templateStringDisplay:U,outOfStockMessageDisplay:W,continueSellingDisplay:X,unlimitedQuantityMessageDisplay:Y}),sd=M({...m(G)}),s$=M({...s("gp-stock-counter-icon data-[visible=true]:gp-block data-[visible=false]:gp-hidden"),...v(),...g()}),sn=M({...f(G)}),sp=s=>A({...I(Q,G,s)}),su=({isOutOfStockIcon:s,isVisible:t})=>E({...V(s,t)}),sm=E({...j()}),sv=M({...k(Q),...s("gp-stock-counter-mark")}),sg=s=>A({...O(Q,s)}),sf=E({...h()}),sk=$({templateStringDisplay:U,outOfStockMessageDisplay:W,continueSellingDisplay:X,unlimitedQuantityMessageDisplay:Y},Q);return t`
+    ${sr}
+    <gp-product-stock-counter ${{...Z}} class="${sl}"
+      style="${so}">
+      <div class="${sn}" style="${sa}">
+      <style>${K}</style>
         <div
-          class="gp-inline-block"
-          style="${{
-        ...makeStyleResponsive('w', makeWidth(width, fullWidth)),
-        ...makeStyle({
-            c: getSingleColorVariable(textColor)
-        })
-    }}"
+          class="${si}"
+          style="${se}"
         >
-          <div class="gp-flex gp-items-baseline">
-            ${RenderIf(showIcon, template /* liquid */ `
-            <div
-            class="gp-mr-1 gp-shrink-0 gp-bg-[length:60px_100%] gp-stock-counter-icon"
-            style="${{
-        ...makeStyle({
-            c: getSingleColorVariable(iconColor),
-            w: typoWidth
-        }),
-        ...getVariableStyle
-    }}"
-          >
-          ${icon}</div>
+          <div class="${sd}">
+            ${e(q,t`
+              ${C("is_out_of_stock",t`<div
+                    ${{...su({isOutOfStockIcon:!0,isVisible:!0})}}
+                    class="${s$}"
+                    style="${sp(!0)}"
+                  >
+                    ${z}
+                  </div>
+              <div
+                    ${{...su({isOutOfStockIcon:!1,isVisible:!1})}}
+                     data-slot-type="false"
+                    class="${s$}"
+                    style="${sp(!1)}"
+                >
+                  ${w}
+                </div>`,t` <div
+                    ${{...su({isOutOfStockIcon:!0,isVisible:!1})}}
+                    class="${s$}"
+                    style="${sp(!0)}"
+                >
+                  ${z}
+              </div>
+              <div
+                    ${{...su({isOutOfStockIcon:!1,isVisible:!0})}}
+                    class="${s$}"
+                    style="${sp(!1)}"
+                >
+                  ${w}
+                </div>`)}
             `)}
-            <div class="gp-hidden gp-text-white gp-py-1 gp-px-2 gp-mr-1 gp-inline-block gp-my-[1px] gp-text-g-${mainColor} gp-bg-g-${mainColor}" >
-              <div id="template">${templateStringDisplay}</div>
-              <div id="out-of-stock-message">${outOfStockMessageDisplay}</div>
-              <div id="continue-selling">${continueSellingDisplay}</div>
-              <div id="unlimited-quantity-message">${unlimitedQuantityMessageDisplay}</div>
-            </div>
-            <p
-              data-slot-type="message"
-              class="${appendTypoClass} gp-stock-counter-mark"
-              style="${appendTypoStyle}"
-            >
-              {% if inventory_management == null and inventory_quantity <= 0 %}
-                ${unlimitedQuantityMessageDisplay}
-              {% elsif available == false %}
-                ${outOfStockMessageDisplay}
-              {% elsif available and inventory_policy == '${CONTINUE_SELLING_WHEN_OUT_OF_STOCK.toLowerCase()}' and inventory_quantity <= 0 %}
-                ${continueSellingDisplay}
-              {% else %}
-                ${templateStringDisplay}
-              {% endif %}
-            </p>
+            ${sk}
+            ${e(L,t`
+              ${C("is_out_of_stock",t`<p
+                ${{...sf}}
+                class="${sv}"
+                style="${sg(!0)}"
+              >
+                ${sc}
+              </p>`,t`<p
+                ${{...sf}}
+                class="${sv}"
+                style="${sg(!1)}"
+              >
+                ${sc}
+              </p>`)}
+              `)}
+
           </div>
 
           <div
-          data-slot-type="progress-bar"
-          data-visible="{{ show_progress_bar }}"
-            style="${{
-        ...makeStyleResponsive('h', progressBarHeight),
-        ...makeStyle({
-            bg: 'linear-gradient(90deg, #eee 50%, transparent 50%)',
-            bgc: getSingleColorVariable(color),
-            bgp: `${remainingPercentage}% center`
-        })
-    }}"
-            class="${cls('gp-stock-counter-progress gp-relative gp-mt-2 gp-w-full -gp-scale-100 data-[visible=true]:gp-block data-[visible=false]:gp-hidden !gp-bg-[length:200%]', {
-        'gp-rounded-md ': roundedBorder,
-        "before:gp-absolute before:gp-left-0 before:gp-h-full before:gp-w-full before:gp-animate-shift before:gp-content-['']": effect,
-        'before:gp-bg-stock-counter-animate before:gp-bg-[length:60px_100%] before:gp-shadow-stock-counter': effect,
-        'before:gp-rounded-md': effect && roundedBorder
-    })}"
+            ${{...sm}}
+            style="${st}"
+            class="${ss}"
           ></div>
         </div>
+        </div>
       </gp-product-stock-counter>
-      ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-product-stock-counter.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-product-stock-counter.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
-  `;
-};
-
-export { StockCounter as default };
+      ${e(i,`<script ${a('class="gps-link" delay',"src")}="{{ 'gp-product-stock-counter-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${a('class="gps-link" delay',"src")}="${l}/assets-v2/gp-product-stock-counter-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+  `};export{StockCounter as default};

package/dist/esm/stock-counter/hooks/useStockCounter.js

@@ -0,0 +1 @@
+import{useEditorMode as t,useCurrentVariant as e}from"@gem-sdk/core";import{useMemo as r}from"react";import{NO_PRODUCT_LEFT as o,CONTINUE_SELLING_WHEN_OUT_OF_STOCK as n,transformHighlighTag as i,transformNumberTag as u}from"../common/helpers.js";let useStockCounter=(a,c)=>{let l=t(),{template:s,outOfStockMessage:y,continueSelling:d,unlimitedQuantityMessage:m}=a??{},{textColor:f}=c??{},h=f||"brand",p=e(),k=r(()=>Number(p?p.inventoryQuantity:0),[p]),C=!p||p.manageInventory,O=p?p.inventoryPolicy:"deny",S=C&&k<=o&&O!==n,v=O===n&&k<=o,b=!C&&m;function g(){return b?i(m,h):S?i(y||"",h):v?i(d||"",h):i(u(s||"",h,k),h)}let B=()=>{let t=c?.typo?.attrs?.transform==="capitalize";return t?g()?.toLocaleLowerCase():g()},D=r(()=>{if("edit"===l)return!1;let t=!a?.displayByDefault&&k>=(a?.scarcityThreshold??0),e=a?.hiddenCounterWhenOutOfStock&&S;return t||e},[k,S,l,a?.displayByDefault,a?.hiddenCounterWhenOutOfStock,a?.scarcityThreshold]);return{outputMessage:B,isOutOfStock:S,inventoryQuantity:k,shouldHideCounter:D}};export{useStockCounter};

package/dist/esm/stock-counter/hooks/useStockCounterInteraction.js

@@ -1,66 +1 @@
-import { useInteraction } from '@gem-sdk/core';
-
-const useStockCounterInteraction = (params)=>{
-    const { uid, element } = params;
-    const { trigger } = useInteraction();
-    const dispatchInteractionOutOfStock = (quantity)=>{
-        trigger({
-            event: 'gp:rollback:stock-change',
-            selector: `[data-id="${uid}"]`,
-            element: element?.current
-        });
-        trigger({
-            event: 'gp:rollback:out-of-stock',
-            selector: `[data-id="${uid}"]`,
-            element: element?.current
-        });
-        trigger({
-            event: 'gp:out-of-stock',
-            selector: `[data-id="${uid}"]`,
-            data: quantity,
-            element: element?.current
-        });
-    };
-    const dispatchInteractionInStock = (quantity)=>{
-        trigger({
-            event: 'gp:rollback:stock-change',
-            selector: `[data-id="${uid}"]`,
-            element: element?.current
-        });
-        trigger({
-            event: 'gp:rollback:out-of-stock',
-            selector: `[data-id="${uid}"]`,
-            element: element?.current
-        });
-        trigger({
-            event: 'gp:stock-change',
-            selector: `[data-id="${uid}"]`,
-            data: quantity,
-            element: element?.current
-        });
-    };
-    const dispatchEventInteraction = (quantity = 0)=>{
-        if (quantity <= 0) {
-            dispatchInteractionOutOfStock(quantity);
-        } else {
-            dispatchInteractionInStock(quantity);
-        }
-    };
-    const dispatchStockCounterInteraction = (quantity = 0)=>{
-        const handleFlowActionsLoaded = ()=>{
-            dispatchEventInteraction(quantity);
-            window.removeEventListener('gp:flow-actions-loaded', handleFlowActionsLoaded);
-        };
-        //@ts-ignore
-        if (window.interactionLoaded) {
-            dispatchEventInteraction(quantity);
-        } else {
-            window.addEventListener('gp:flow-actions-loaded', handleFlowActionsLoaded);
-        }
-    };
-    return {
-        dispatchStockCounterInteraction
-    };
-};
-
-export { useStockCounterInteraction };
+import{useInteraction as e}from"@gem-sdk/core";let useStockCounterInteraction=t=>{let{uid:o,element:n}=t,{trigger:r}=e(),c=e=>{r({event:"gp:rollback:stock-change",selector:`[data-id="${o}"]`,element:n?.current}),r({event:"gp:rollback:out-of-stock",selector:`[data-id="${o}"]`,element:n?.current}),r({event:"gp:out-of-stock",selector:`[data-id="${o}"]`,data:e,element:n?.current})},a=e=>{r({event:"gp:rollback:stock-change",selector:`[data-id="${o}"]`,element:n?.current}),r({event:"gp:rollback:out-of-stock",selector:`[data-id="${o}"]`,element:n?.current}),r({event:"gp:stock-change",selector:`[data-id="${o}"]`,data:e,element:n?.current})},l=(e=0)=>{e<=0?c(e):a(e)},d=(e=0)=>{let t=()=>{l(e),window.removeEventListener("gp:flow-actions-loaded",t)};window.interactionLoaded?l(e):window.addEventListener("gp:flow-actions-loaded",t)};return{dispatchStockCounterInteraction:d}};export{useStockCounterInteraction};

package/dist/esm/stock-counter/index.js

@@ -0,0 +1 @@
+import t from"./settings/StockCounter.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";import"@gem-sdk/system";let stockCounterSetting={StockCounter:t};export{stockCounterSetting};

package/dist/esm/stock-counter/next.js

@@ -1,12 +1 @@
-import dynamic from 'next/dynamic';
-import Loading from '../common/components/Loading.js';
-import 'react/jsx-runtime';
-
-const StockCounter = dynamic(()=>import('./components/StockCounter.js'), {
-    loading: Loading
-});
-var stockCounter = {
-    StockCounter
-};
-
-export { stockCounter as default };
+import o from"next/dynamic";import t from"../common/components/Loading.js";import"react/jsx-runtime";import"react";import"@gem-sdk/core";let StockCounter=o(()=>import("./components/StockCounter.js"),{loading:t});var stockCounter={StockCounter};export{stockCounter as default};

package/dist/esm/stock-counter/settings/StockCounter.js

@@ -0,0 +1,5 @@
+import{StockCounterSettingsV2 as o}from"./configs/settings-v2.js";import{SettingUIV1 as t}from"./configs/ui-v1.js";import{SettingUIV2 as i}from"./configs/ui-v2.js";import{StockCounterPreset as e}from"./configs/presets.js";let config={tag:"StockCounter",label:"Stock Counter",icon:`
+    <svg width="32" height="32" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M33.3905 11.2545C33.1953 11.4498 32.8787 11.4498 32.6834 11.2545L29.8643 8.43541C29.6691 8.24014 29.6691 7.92356 29.8643 7.7283L30.9203 6.67231C31.1156 6.47705 31.4322 6.47705 31.6274 6.67231L34.4465 9.49139C34.6418 9.68666 34.6418 10.0032 34.4465 10.1985L33.3905 11.2545ZM15.7838 4.68533C15.7838 4.96148 16.0077 5.18534 16.2838 5.18534H22.84C23.1161 5.18534 23.34 4.96148 23.34 4.68534V3.16663C23.34 2.89048 23.1161 2.66663 22.84 2.66663H16.2838C16.0077 2.66663 15.7838 2.89048 15.7838 3.16663V4.68533ZM28.3774 28.6093L20.8212 21.0532V10.3487C26.4883 10.9784 30.8961 15.7639 30.8961 21.5569C30.8961 24.2016 30.0145 26.7203 28.3774 28.6093ZM8.22769 21.5569C8.22769 15.7639 12.6354 10.9784 18.3025 10.3487V21.7724C18.3025 22.0376 18.4079 22.292 18.5954 22.4795L26.6143 30.4984C24.7252 32.0096 22.2065 33.0171 19.5619 33.0171C13.2651 32.8911 8.22769 27.8537 8.22769 21.5569ZM19.5619 7.70404C11.8798 7.70404 5.70898 13.8749 5.70898 21.5569C5.70898 29.239 11.8798 35.4098 19.5619 35.4098C27.2439 35.4098 33.4148 29.239 33.4148 21.5569C33.4148 13.8749 27.2439 7.70404 19.5619 7.70404Z" fill="currentColor"/>
+    </svg>
+  `,settings:o,ui:t,uiV2:i,editorConfigs:{placeholder:{flowTag:["Product"]}},presets:e,locales:{editor:{en:{let_buy_now:"<mark>HURRY!</mark> LET BUY NOW"}}}};export{config as default};