@dropins/storefront-pdp 1.4.0-alpha001 → 1.4.0-beta1

package/api/initialize/initialize.d.ts

@@ -6,6 +6,7 @@ type ConfigProps = {
     scope?: string;
     langDefinitions?: Lang;
     defaultLocale?: string;
+    globalLocale?: string;
     sku?: string;
     acdl?: boolean;
     anchors?: string[];

package/chunks/GiftCardOptions2.js

@@ -1,4 +1,4 @@
 /*! Copyright 2025 Adobe
 All Rights Reserved. */
-import{jsxs as P,jsx as h}from"@dropins/tools/preact-jsx-runtime.js";import{useState as y,useCallback as I,useMemo as M,useEffect as A}from"@dropins/tools/preact-hooks.js";import{Field as B,TextArea as V,Picker as j,Input as $}from"@dropins/tools/components.js";import{classes as z}from"@dropins/tools/lib.js";/* empty css               */import{useText as u}from"@dropins/tools/i18n.js";const H=c=>{switch(c){case"number":return"number";case"email":return"email";default:return"text"}},J=c=>c.name==="giftcard/giftcard_message"?"textarea":c.name==="giftcard/giftcard_amount"?"picker":"input",K=(c,a,i)=>[{text:a,value:"0",disabled:!1},...c.map(l=>({text:l.toString(),value:l.toString(),disabled:!1})),{text:i,value:"other",disabled:!1}],x=(c,a,i)=>{const{validationRule:t}=c;if(c.name==="giftcard/giftcard_amount"){if(t.required&&(a==="0"||!a||a.trim()==="")||a==="0")return i.RequiredFieldError;if(a==="other")return""}else if(t.required&&(!a||a.trim()===""))return i.RequiredFieldError;if(!a||a.trim()==="")return"";switch(t.type){case"email":{if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a))return i.EmailError;break}case"number":{const l=Number(a);if(isNaN(l))return i.NumberError;if(t.min!==void 0&&l<t.min)return i.MinError.replace("{min}",t.min.toString());if(t.max!==void 0&&l>t.max)return i.MaxError.replace("{max}",t.max.toString());if(t.values&&!t.values.some(g=>typeof g=="number"?g===l:g===a))return i.InvalidValueError.replace("{values}",t.values.join(", "));break}case"string":{const l=a.length;if(t.minLength!==void 0&&l<t.minLength)return i.MinLengthError.replace("{min_length}",t.minLength.toString());if(t.maxLength!==void 0&&l>t.maxLength)return i.MaxLengthError.replace("{max_length}",t.maxLength.toString());break}}return""},rr=({options:c,currency:a,optionValues:i,onOptionChange:t,onValidationChange:l})=>{const v=u("PDP.Product.GiftCardOptions.ChooseAmount.label").label,g=u("PDP.Product.GiftCardOptions.OtherAmount.label").label,C=u("PDP.Product.GiftCardOptions.RequiredFieldError.label").label,w=u("PDP.Product.GiftCardOptions.NumberError.label").label,N=u("PDP.Product.GiftCardOptions.MinError.label").label,O=u("PDP.Product.GiftCardOptions.MaxError.label").label,G=u("PDP.Product.GiftCardOptions.MinLengthError.label").label,L=u("PDP.Product.GiftCardOptions.MaxLengthError.label").label,S=u("PDP.Product.GiftCardOptions.EmailError.label").label,D=u("PDP.Product.GiftCardOptions.InvalidValueError.label").label,[q,R]=y({}),[_,F]=y(!1),n=I(r=>c.find(e=>e.name===r),[c]),p=M(()=>({RequiredFieldError:C,NumberError:w,MinError:N,MaxError:O,MinLengthError:G,MaxLengthError:L,EmailError:S,InvalidValueError:D}),[C,w,N,O,G,L,S,D]);A(()=>{const r=c.every(e=>{if(e.name==="giftcard/custom_giftcard_amount"&&!_)return!0;const d=i.find(f=>f.id===e.uid),s=(d==null?void 0:d.value)||"";return x(e,s,p)===""});l(r)},[c,i,l,p,_]),A(()=>{const r=n("giftcard/giftcard_amount"),e=n("giftcard/custom_giftcard_amount"),d=i.find(o=>o.id===(r==null?void 0:r.uid)),s=(d==null?void 0:d.value)||"",f=_,b=s==="other";F(b),f&&!b&&e&&t(e.uid,"")},[i,n,_,t]);const E=(r,e)=>{const d=x(r,e,p);R(s=>({...s,[r.uid]:d})),t(r.uid,e)},k=(r,e)=>{const d=x(r,e,p);R(s=>({...s,[r.uid]:d}))},T=(r,e)=>{const d=e.target.value;E(r,d)},m=r=>{const e=i.find(o=>o.id===r.uid),d=e==null?void 0:e.value,s=q[r.uid],f=J(r);let b=r.label;return r.name==="giftcard/custom_giftcard_amount"&&a&&(b=`${r.label} ${a}`),h(B,{label:b,className:z(["pdp-gift-card-options__option-field",f==="textarea"&&"pdp-gift-card-options__option-field--full-width"]),error:s,children:f==="textarea"?h(V,{value:d,label:r.label,onChange:o=>E(r,o.target.value),onBlur:o=>k(r,o.target.value),"aria-invalid":!!s}):f==="picker"?h(j,{"aria-label":r.label,label:r.label,handleSelect:o=>T(r,o),options:K(r.validationRule.values||[],v,g),value:d,"aria-invalid":!!s}):h($,{type:H(r.validationRule.type),value:d,onChange:o=>E(r,o.target.value),onBlur:o=>k(r,o.target.value),"aria-invalid":!!s})},r.uid)};return P("div",{className:"pdp-gift-card-options__grid",children:[P("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_amount")&&m(n("giftcard/giftcard_amount")),n("giftcard/custom_giftcard_amount")&&_&&m(n("giftcard/custom_giftcard_amount"))]}),P("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_sender_name")&&m(n("giftcard/giftcard_sender_name")),n("giftcard/giftcard_sender_email")&&m(n("giftcard/giftcard_sender_email"))]}),P("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_recipient_name")&&m(n("giftcard/giftcard_recipient_name")),n("giftcard/giftcard_recipient_email")&&m(n("giftcard/giftcard_recipient_email"))]}),h("div",{className:"pdp-gift-card-options__row",children:n("giftcard/giftcard_message")&&m(n("giftcard/giftcard_message"))})]})};export{rr as G};
+import{jsxs as x,jsx as h}from"@dropins/tools/preact-jsx-runtime.js";import{useState as y,useCallback as M,useMemo as B,useEffect as q}from"@dropins/tools/preact-hooks.js";import{Field as V,TextArea as j,Picker as $,Input as z}from"@dropins/tools/components.js";import{classes as H}from"@dropins/tools/lib.js";/* empty css               */import{useText as u}from"@dropins/tools/i18n.js";const J=c=>{switch(c){case"number":return"number";case"email":return"email";default:return"text"}},K=c=>c.name==="giftcard/giftcard_message"?"textarea":c.name==="giftcard/giftcard_amount"?"picker":"input",Q=(c,a,i,t)=>[{text:i,value:"0",disabled:!1},...c.map(g=>({text:g.toString(),value:g.toString(),disabled:!1})),...a?[{text:t,value:"other",disabled:!1}]:[]],C=(c,a,i)=>{const{validationRule:t}=c;if(c.name==="giftcard/giftcard_amount"){if(t.required&&(a==="0"||!a||a.trim()==="")||a==="0")return i.RequiredFieldError;if(a==="other")return""}else if(t.required&&(!a||a.trim()===""))return i.RequiredFieldError;if(!a||a.trim()==="")return"";switch(t.type){case"email":{if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(a))return i.EmailError;break}case"number":{const l=Number(a);if(isNaN(l))return i.NumberError;if(t.min!==void 0&&l<t.min)return i.MinError.replace("{min}",t.min.toString());if(t.max!==void 0&&l>t.max)return i.MaxError.replace("{max}",t.max.toString());if(t.values&&!t.values.some(_=>typeof _=="number"?_===l:_===a))return i.InvalidValueError.replace("{values}",t.values.join(", "));break}case"string":{const l=a.length;if(t.minLength!==void 0&&l<t.minLength)return i.MinLengthError.replace("{min_length}",t.minLength.toString());if(t.maxLength!==void 0&&l>t.maxLength)return i.MaxLengthError.replace("{max_length}",t.maxLength.toString());break}}return""},tr=({options:c,currency:a,optionValues:i,onOptionChange:t,onValidationChange:l})=>{const g=u("PDP.Product.GiftCardOptions.ChooseAmount.label").label,_=u("PDP.Product.GiftCardOptions.OtherAmount.label").label,w=u("PDP.Product.GiftCardOptions.RequiredFieldError.label").label,N=u("PDP.Product.GiftCardOptions.NumberError.label").label,O=u("PDP.Product.GiftCardOptions.MinError.label").label,G=u("PDP.Product.GiftCardOptions.MaxError.label").label,L=u("PDP.Product.GiftCardOptions.MinLengthError.label").label,S=u("PDP.Product.GiftCardOptions.MaxLengthError.label").label,D=u("PDP.Product.GiftCardOptions.EmailError.label").label,R=u("PDP.Product.GiftCardOptions.InvalidValueError.label").label,[F,k]=y({}),[b,T]=y(!1),n=M(r=>c.find(e=>e.name===r),[c]),p=B(()=>({RequiredFieldError:w,NumberError:N,MinError:O,MaxError:G,MinLengthError:L,MaxLengthError:S,EmailError:D,InvalidValueError:R}),[w,N,O,G,L,S,D,R]);q(()=>{const r=c.every(e=>{if(e.name==="giftcard/custom_giftcard_amount"&&!b)return!0;const d=i.find(f=>f.id===e.uid),o=(d==null?void 0:d.value)||"";return C(e,o,p)===""});l(r)},[c,i,l,p,b]),q(()=>{const r=n("giftcard/giftcard_amount"),e=n("giftcard/custom_giftcard_amount"),d=i.find(E=>E.id===(r==null?void 0:r.uid)),o=(d==null?void 0:d.value)||"",f=b,P=r?o==="other":!!e;T(P),f&&!P&&e&&t(e.uid,"")},[i,n,b,t]);const v=(r,e)=>{const d=C(r,e,p);k(o=>({...o,[r.uid]:d})),t(r.uid,e)},A=(r,e)=>{const d=C(r,e,p);k(o=>({...o,[r.uid]:d}))},I=(r,e)=>{const d=e.target.value;v(r,d)},m=r=>{const e=i.find(s=>s.id===r.uid),d=e==null?void 0:e.value,o=F[r.uid],f=K(r),P=!!n("giftcard/custom_giftcard_amount");let E=r.label;return r.name==="giftcard/custom_giftcard_amount"&&a&&(E=`${r.label} ${a}`),h(V,{label:E,className:H(["pdp-gift-card-options__option-field",f==="textarea"&&"pdp-gift-card-options__option-field--full-width"]),error:o,children:f==="textarea"?h(j,{value:d,label:r.label,onChange:s=>v(r,s.target.value),onBlur:s=>A(r,s.target.value),"aria-invalid":!!o}):f==="picker"?h($,{"aria-label":r.label,label:r.label,handleSelect:s=>I(r,s),options:Q(r.validationRule.values||[],P,g,_),value:d,"aria-invalid":!!o}):h(z,{type:J(r.validationRule.type),value:d,onChange:s=>v(r,s.target.value),onBlur:s=>A(r,s.target.value),"aria-invalid":!!o})},r.uid)};return x("div",{className:"pdp-gift-card-options__grid",children:[x("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_amount")&&m(n("giftcard/giftcard_amount")),n("giftcard/custom_giftcard_amount")&&b&&m(n("giftcard/custom_giftcard_amount"))]}),x("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_sender_name")&&m(n("giftcard/giftcard_sender_name")),n("giftcard/giftcard_sender_email")&&m(n("giftcard/giftcard_sender_email"))]}),x("div",{className:"pdp-gift-card-options__row",children:[n("giftcard/giftcard_recipient_name")&&m(n("giftcard/giftcard_recipient_name")),n("giftcard/giftcard_recipient_email")&&m(n("giftcard/giftcard_recipient_email"))]}),h("div",{className:"pdp-gift-card-options__row",children:n("giftcard/giftcard_message")&&m(n("giftcard/giftcard_message"))})]})};export{tr as G};
 //# sourceMappingURL=GiftCardOptions2.js.map

package/chunks/GiftCardOptions2.js.map

@@ -1 +1 @@
-{"version":3,"file":"GiftCardOptions2.js","sources":["/@dropins/storefront-pdp/src/components/GiftCardOptions/GiftCardOptions.tsx"],"sourcesContent":["import { FunctionComponent } from 'preact';\nimport { useState, useEffect, useMemo, useCallback } from 'preact/hooks';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport {\n  Field,\n  Input,\n  TextArea,\n  Picker,\n  PickerOption,\n} from '@adobe-commerce/elsie/components';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { Option, OptionField } from '@/pdp/data/models/values-model';\nimport './GiftCardOptions.css';\n\nenum ComponentType {\n  INPUT = 'input',\n  TEXTAREA = 'textarea',\n  PICKER = 'picker',\n}\n\nexport interface GiftCardOptionsProps extends HTMLAttributes<HTMLDivElement> {\n  options: Option[];\n  currency?: string;\n  optionValues: OptionField[];\n  onOptionChange: (uid: string, value: string) => void;\n  onValidationChange: (valid: boolean) => void;\n}\n\n// Utility functions\nconst getInputType = (validationType: string): string => {\n  switch (validationType) {\n    case 'number':\n      return 'number';\n    case 'email':\n      return 'email';\n    default:\n      return 'text';\n  }\n};\n\nconst getComponentType = (option: Option): ComponentType => {\n  if (option.name === 'giftcard/giftcard_message') {\n    return ComponentType.TEXTAREA;\n  }\n\n  if (option.name === 'giftcard/giftcard_amount') {\n    return ComponentType.PICKER;\n  }\n\n  return ComponentType.INPUT;\n};\n\nconst mapToPickerOptions = (\n  values: (string | number)[],\n  chooseAmountText: string,\n  otherAmountText: string\n): PickerOption[] => {\n  const options: PickerOption[] = [\n    {\n      text: chooseAmountText,\n      value: '0',\n      disabled: false,\n    },\n    ...values.map((value) => ({\n      text: value.toString(),\n      value: value.toString(),\n      disabled: false,\n    })),\n    {\n      text: otherAmountText,\n      value: 'other',\n      disabled: false,\n    },\n  ];\n  return options;\n};\n\nconst validate = (\n  option: Option,\n  value: string,\n  errorMessages: {\n    RequiredFieldError: string;\n    NumberError: string;\n    MinError: string;\n    MaxError: string;\n    MinLengthError: string;\n    MaxLengthError: string;\n    EmailError: string;\n    InvalidValueError: string;\n  }\n) => {\n  const { validationRule } = option;\n\n  if (option.name === 'giftcard/giftcard_amount') {\n    if (\n      validationRule.required &&\n      (value === '0' || !value || value.trim() === '')\n    ) {\n      return errorMessages.RequiredFieldError;\n    }\n    if (value === '0') {\n      return errorMessages.RequiredFieldError;\n    }\n    if (value === 'other') {\n      return '';\n    }\n  } else if (validationRule.required && (!value || value.trim() === '')) {\n    return errorMessages.RequiredFieldError;\n  }\n\n  if (!value || value.trim() === '') {\n    return '';\n  }\n\n  switch (validationRule.type) {\n    case 'email': {\n      const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n      if (!emailRegex.test(value)) {\n        return errorMessages.EmailError;\n      }\n      break;\n    }\n\n    case 'number': {\n      const num = Number(value);\n      if (isNaN(num)) {\n        return errorMessages.NumberError;\n      }\n\n      // Check min value\n      if (validationRule.min !== undefined && num < validationRule.min) {\n        return errorMessages.MinError.replace(\n          '{min}',\n          validationRule.min.toString()\n        );\n      }\n\n      // Check max value\n      if (validationRule.max !== undefined && num > validationRule.max) {\n        return errorMessages.MaxError.replace(\n          '{max}',\n          validationRule.max.toString()\n        );\n      }\n\n      // Check allowed values\n      if (validationRule.values) {\n        const isValidValue = validationRule.values.some((val) =>\n          typeof val === 'number' ? val === num : val === value\n        );\n        if (!isValidValue) {\n          return errorMessages.InvalidValueError.replace(\n            '{values}',\n            validationRule.values.join(', ')\n          );\n        }\n      }\n      break;\n    }\n\n    case 'string': {\n      const length = value.length;\n\n      // Check min length\n      if (\n        validationRule.minLength !== undefined &&\n        length < validationRule.minLength\n      ) {\n        return errorMessages.MinLengthError.replace(\n          '{min_length}',\n          validationRule.minLength.toString()\n        );\n      }\n\n      // Check max length\n      if (\n        validationRule.maxLength !== undefined &&\n        length > validationRule.maxLength\n      ) {\n        return errorMessages.MaxLengthError.replace(\n          '{max_length}',\n          validationRule.maxLength.toString()\n        );\n      }\n      break;\n    }\n  }\n\n  return '';\n};\n\nexport const GiftCardOptions: FunctionComponent<GiftCardOptionsProps> = ({\n  options,\n  currency,\n  optionValues,\n  onOptionChange,\n  onValidationChange,\n}) => {\n  const ChooseAmount = useText(\n    'PDP.Product.GiftCardOptions.ChooseAmount.label'\n  ).label;\n  const OtherAmount = useText(\n    'PDP.Product.GiftCardOptions.OtherAmount.label'\n  ).label;\n  const RequiredFieldError = useText(\n    'PDP.Product.GiftCardOptions.RequiredFieldError.label'\n  ).label;\n  const NumberError = useText(\n    'PDP.Product.GiftCardOptions.NumberError.label'\n  ).label;\n  const MinError = useText('PDP.Product.GiftCardOptions.MinError.label').label;\n  const MaxError = useText('PDP.Product.GiftCardOptions.MaxError.label').label;\n  const MinLengthError = useText(\n    'PDP.Product.GiftCardOptions.MinLengthError.label'\n  ).label;\n  const MaxLengthError = useText(\n    'PDP.Product.GiftCardOptions.MaxLengthError.label'\n  ).label;\n  const EmailError = useText(\n    'PDP.Product.GiftCardOptions.EmailError.label'\n  ).label;\n  const InvalidValueError = useText(\n    'PDP.Product.GiftCardOptions.InvalidValueError.label'\n  ).label;\n\n  const [errors, setErrors] = useState<Record<string, string>>({});\n  const [showCustomAmount, setShowCustomAmount] = useState(false);\n\n  // Helper function to find option by name\n  const findOptionByName = useCallback(\n    (name: string): Option | undefined => {\n      return options.find((option) => option.name === name);\n    },\n    [options]\n  );\n\n  // Memoize error messages to avoid recreating them on every render\n  const errorMessages = useMemo(\n    () => ({\n      RequiredFieldError,\n      NumberError,\n      MinError,\n      MaxError,\n      MinLengthError,\n      MaxLengthError,\n      EmailError,\n      InvalidValueError,\n    }),\n    [\n      RequiredFieldError,\n      NumberError,\n      MinError,\n      MaxError,\n      MinLengthError,\n      MaxLengthError,\n      EmailError,\n      InvalidValueError,\n    ]\n  );\n\n  // Run initial validation only when options or optionValues change\n  useEffect(() => {\n    const valid = options.every((option) => {\n      // Skip validation for custom gift card amount when it's not shown\n      if (\n        option.name === 'giftcard/custom_giftcard_amount' &&\n        !showCustomAmount\n      ) {\n        return true;\n      }\n\n      const field = optionValues.find((f) => f.id === option.uid);\n      const value = field?.value || '';\n      return validate(option, value, errorMessages) === '';\n    });\n\n    onValidationChange(valid);\n  }, [\n    options,\n    optionValues,\n    onValidationChange,\n    errorMessages,\n    showCustomAmount,\n  ]);\n\n  useEffect(() => {\n    const giftCardAmountOption = findOptionByName('giftcard/giftcard_amount');\n    const customAmountOption = findOptionByName(\n      'giftcard/custom_giftcard_amount'\n    );\n\n    const giftCardAmountField = optionValues.find(\n      (f) => f.id === giftCardAmountOption?.uid\n    );\n\n    const selectedValue = giftCardAmountField?.value || '';\n    const wasShowingCustomAmount = showCustomAmount;\n    const willShowCustomAmount = selectedValue === 'other';\n\n    setShowCustomAmount(willShowCustomAmount);\n\n    // Reset custom amount value when switching away from \"other\"\n    if (wasShowingCustomAmount && !willShowCustomAmount && customAmountOption) {\n      onOptionChange(customAmountOption.uid, '');\n    }\n  }, [optionValues, findOptionByName, showCustomAmount, onOptionChange]);\n\n  const handleChange = (option: Option, value: string) => {\n    const error = validate(option, value, errorMessages);\n    setErrors((prev: Record<string, string>) => ({\n      ...prev,\n      [option.uid]: error,\n    }));\n\n    onOptionChange(option.uid, value);\n  };\n\n  const handleBlur = (option: Option, value: string) => {\n    const error = validate(option, value, errorMessages);\n    setErrors((prev: Record<string, string>) => ({\n      ...prev,\n      [option.uid]: error,\n    }));\n  };\n\n  const handlePickerSelect = (option: Option, event: any) => {\n    const selectedValue = event.target.value;\n    handleChange(option, selectedValue);\n  };\n\n  const renderField = (option: Option) => {\n    const field = optionValues.find((f) => f.id === option.uid);\n    const value = field?.value;\n    const error = errors[option.uid];\n    const componentType = getComponentType(option);\n\n    // Add currency to custom gift card amount label\n    let label = option.label;\n    if (option.name === 'giftcard/custom_giftcard_amount' && currency) {\n      label = `${option.label} ${currency}`;\n    }\n\n    return (\n      <Field\n        key={option.uid}\n        label={label}\n        className={classes([\n          'pdp-gift-card-options__option-field',\n          componentType === ComponentType.TEXTAREA &&\n            'pdp-gift-card-options__option-field--full-width',\n        ])}\n        error={error}\n      >\n        {(() => {\n          if (componentType === ComponentType.TEXTAREA) {\n            return (\n              <TextArea\n                value={value}\n                label={option.label}\n                onChange={(e: any) =>\n                  handleChange(option, (e.target as HTMLTextAreaElement).value)\n                }\n                onBlur={(e: any) =>\n                  handleBlur(option, (e.target as HTMLTextAreaElement).value)\n                }\n                aria-invalid={!!error}\n              />\n            );\n          }\n\n          if (componentType === ComponentType.PICKER) {\n            return (\n              <Picker\n                aria-label={option.label}\n                label={option.label}\n                handleSelect={(event) => handlePickerSelect(option, event)}\n                options={mapToPickerOptions(\n                  option.validationRule.values || [],\n                  ChooseAmount,\n                  OtherAmount\n                )}\n                value={value}\n                aria-invalid={!!error}\n              />\n            );\n          }\n\n          return (\n            <Input\n              type={getInputType(option.validationRule.type)}\n              value={value}\n              onChange={(e) =>\n                handleChange(option, (e.target as HTMLInputElement).value)\n              }\n              onBlur={(e) =>\n                handleBlur(option, (e.target as HTMLInputElement).value)\n              }\n              aria-invalid={!!error}\n            />\n          );\n        })()}\n      </Field>\n    );\n  };\n\n  return (\n    <div className=\"pdp-gift-card-options__grid\">\n      {/* Row 1: Gift card amount and custom amount */}\n      <div className=\"pdp-gift-card-options__row\">\n        {findOptionByName('giftcard/giftcard_amount') &&\n          renderField(findOptionByName('giftcard/giftcard_amount')!)}\n        {findOptionByName('giftcard/custom_giftcard_amount') &&\n          showCustomAmount &&\n          renderField(findOptionByName('giftcard/custom_giftcard_amount')!)}\n      </div>\n\n      {/* Row 2: Sender name and email */}\n      <div className=\"pdp-gift-card-options__row\">\n        {findOptionByName('giftcard/giftcard_sender_name') &&\n          renderField(findOptionByName('giftcard/giftcard_sender_name')!)}\n        {findOptionByName('giftcard/giftcard_sender_email') &&\n          renderField(findOptionByName('giftcard/giftcard_sender_email')!)}\n      </div>\n\n      {/* Row 3: Recipient name and email */}\n      <div className=\"pdp-gift-card-options__row\">\n        {findOptionByName('giftcard/giftcard_recipient_name') &&\n          renderField(findOptionByName('giftcard/giftcard_recipient_name')!)}\n        {findOptionByName('giftcard/giftcard_recipient_email') &&\n          renderField(findOptionByName('giftcard/giftcard_recipient_email')!)}\n      </div>\n\n      {/* Row 4: Gift card message */}\n      <div className=\"pdp-gift-card-options__row\">\n        {findOptionByName('giftcard/giftcard_message') &&\n          renderField(findOptionByName('giftcard/giftcard_message')!)}\n      </div>\n    </div>\n  );\n};\n"],"names":["getInputType","validationType","getComponentType","option","mapToPickerOptions","values","chooseAmountText","otherAmountText","value","validate","errorMessages","validationRule","num","val","length","GiftCardOptions","options","currency","optionValues","onOptionChange","onValidationChange","ChooseAmount","useText","OtherAmount","RequiredFieldError","NumberError","MinError","MaxError","MinLengthError","MaxLengthError","EmailError","InvalidValueError","errors","setErrors","useState","showCustomAmount","setShowCustomAmount","findOptionByName","useCallback","name","useMemo","useEffect","valid","field","giftCardAmountOption","customAmountOption","giftCardAmountField","f","selectedValue","wasShowingCustomAmount","willShowCustomAmount","handleChange","error","prev","handleBlur","handlePickerSelect","event","renderField","componentType","label","jsx","Field","classes","TextArea","e","Picker","Input","jsxs"],"mappings":"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"}
+{"version":3,"file":"GiftCardOptions2.js","sources":["/@dropins/storefront-pdp/src/components/GiftCardOptions/GiftCardOptions.tsx"],"sourcesContent":["import { FunctionComponent } from 'preact';\nimport { useState, useEffect, useMemo, useCallback } from 'preact/hooks';\nimport { HTMLAttributes } from 'preact/compat';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport {\n  Field,\n  Input,\n  TextArea,\n  Picker,\n  PickerOption,\n} from '@adobe-commerce/elsie/components';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { Option, OptionField } from '@/pdp/data/models/values-model';\nimport './GiftCardOptions.css';\n\nenum ComponentType {\n  INPUT = 'input',\n  TEXTAREA = 'textarea',\n  PICKER = 'picker',\n}\n\nexport interface GiftCardOptionsProps extends HTMLAttributes<HTMLDivElement> {\n  options: Option[];\n  currency?: string;\n  optionValues: OptionField[];\n  onOptionChange: (uid: string, value: string) => void;\n  onValidationChange: (valid: boolean) => void;\n}\n\n// Utility functions\nconst getInputType = (validationType: string): string => {\n  switch (validationType) {\n    case 'number':\n      return 'number';\n    case 'email':\n      return 'email';\n    default:\n      return 'text';\n  }\n};\n\nconst getComponentType = (option: Option): ComponentType => {\n  if (option.name === 'giftcard/giftcard_message') {\n    return ComponentType.TEXTAREA;\n  }\n\n  if (option.name === 'giftcard/giftcard_amount') {\n    return ComponentType.PICKER;\n  }\n\n  return ComponentType.INPUT;\n};\n\nconst mapToPickerOptions = (\n  values: (string | number)[],\n  hasCustomAmountField: boolean,\n  chooseAmountText: string,\n  otherAmountText: string\n): PickerOption[] => {\n  const options: PickerOption[] = [\n    {\n      text: chooseAmountText,\n      value: '0',\n      disabled: false,\n    },\n    ...values.map((value) => ({\n      text: value.toString(),\n      value: value.toString(),\n      disabled: false,\n    })),\n    ...(hasCustomAmountField\n      ? [\n          {\n            text: otherAmountText,\n            value: 'other',\n            disabled: false,\n          },\n        ]\n      : []),\n  ];\n  return options;\n};\n\nconst validate = (\n  option: Option,\n  value: string,\n  errorMessages: {\n    RequiredFieldError: string;\n    NumberError: string;\n    MinError: string;\n    MaxError: string;\n    MinLengthError: string;\n    MaxLengthError: string;\n    EmailError: string;\n    InvalidValueError: string;\n  }\n) => {\n  const { validationRule } = option;\n\n  if (option.name === 'giftcard/giftcard_amount') {\n    if (\n      validationRule.required &&\n      (value === '0' || !value || value.trim() === '')\n    ) {\n      return errorMessages.RequiredFieldError;\n    }\n    if (value === '0') {\n      return errorMessages.RequiredFieldError;\n    }\n    if (value === 'other') {\n      return '';\n    }\n  } else if (validationRule.required && (!value || value.trim() === '')) {\n    return errorMessages.RequiredFieldError;\n  }\n\n  if (!value || value.trim() === '') {\n    return '';\n  }\n\n  switch (validationRule.type) {\n    case 'email': {\n      const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n      if (!emailRegex.test(value)) {\n        return errorMessages.EmailError;\n      }\n      break;\n    }\n\n    case 'number': {\n      const num = Number(value);\n      if (isNaN(num)) {\n        return errorMessages.NumberError;\n      }\n\n      // Check min value\n      if (validationRule.min !== undefined && num < validationRule.min) {\n        return errorMessages.MinError.replace(\n          '{min}',\n          validationRule.min.toString()\n        );\n      }\n\n      // Check max value\n      if (validationRule.max !== undefined && num > validationRule.max) {\n        return errorMessages.MaxError.replace(\n          '{max}',\n          validationRule.max.toString()\n        );\n      }\n\n      // Check allowed values\n      if (validationRule.values) {\n        const isValidValue = validationRule.values.some((val) =>\n          typeof val === 'number' ? val === num : val === value\n        );\n        if (!isValidValue) {\n          return errorMessages.InvalidValueError.replace(\n            '{values}',\n            validationRule.values.join(', ')\n          );\n        }\n      }\n      break;\n    }\n\n    case 'string': {\n      const length = value.length;\n\n      // Check min length\n      if (\n        validationRule.minLength !== undefined &&\n        length < validationRule.minLength\n      ) {\n        return errorMessages.MinLengthError.replace(\n          '{min_length}',\n          validationRule.minLength.toString()\n        );\n      }\n\n      // Check max length\n      if (\n        validationRule.maxLength !== undefined &&\n        length > validationRule.maxLength\n      ) {\n        return errorMessages.MaxLengthError.replace(\n          '{max_length}',\n          validationRule.maxLength.toString()\n        );\n      }\n      break;\n    }\n  }\n\n  return '';\n};\n\nexport const GiftCardOptions: FunctionComponent<GiftCardOptionsProps> = ({\n  options,\n  currency,\n  optionValues,\n  onOptionChange,\n  onValidationChange,\n}) => {\n  const ChooseAmount = useText(\n    'PDP.Product.GiftCardOptions.ChooseAmount.label'\n  ).label;\n  const OtherAmount = useText(\n    'PDP.Product.GiftCardOptions.OtherAmount.label'\n  ).label;\n  const RequiredFieldError = useText(\n    'PDP.Product.GiftCardOptions.RequiredFieldError.label'\n  ).label;\n  const NumberError = useText(\n    'PDP.Product.GiftCardOptions.NumberError.label'\n  ).label;\n  const MinError = useText('PDP.Product.GiftCardOptions.MinError.label').label;\n  const MaxError = useText('PDP.Product.GiftCardOptions.MaxError.label').label;\n  const MinLengthError = useText(\n    'PDP.Product.GiftCardOptions.MinLengthError.label'\n  ).label;\n  const MaxLengthError = useText(\n    'PDP.Product.GiftCardOptions.MaxLengthError.label'\n  ).label;\n  const EmailError = useText(\n    'PDP.Product.GiftCardOptions.EmailError.label'\n  ).label;\n  const InvalidValueError = useText(\n    'PDP.Product.GiftCardOptions.InvalidValueError.label'\n  ).label;\n\n  const [errors, setErrors] = useState<Record<string, string>>({});\n  const [showCustomAmount, setShowCustomAmount] = useState(false);\n\n  // Helper function to find option by name\n  const findOptionByName = useCallback(\n    (name: string): Option | undefined => {\n      return options.find((option) => option.name === name);\n    },\n    [options]\n  );\n\n  // Memoize error messages to avoid recreating them on every render\n  const errorMessages = useMemo(\n    () => ({\n      RequiredFieldError,\n      NumberError,\n      MinError,\n      MaxError,\n      MinLengthError,\n      MaxLengthError,\n      EmailError,\n      InvalidValueError,\n    }),\n    [\n      RequiredFieldError,\n      NumberError,\n      MinError,\n      MaxError,\n      MinLengthError,\n      MaxLengthError,\n      EmailError,\n      InvalidValueError,\n    ]\n  );\n\n  // Run initial validation only when options or optionValues change\n  useEffect(() => {\n    const valid = options.every((option) => {\n      // Skip validation for custom gift card amount when it's not shown\n      if (\n        option.name === 'giftcard/custom_giftcard_amount' &&\n        !showCustomAmount\n      ) {\n        return true;\n      }\n\n      const field = optionValues.find((f) => f.id === option.uid);\n      const value = field?.value || '';\n      return validate(option, value, errorMessages) === '';\n    });\n\n    onValidationChange(valid);\n  }, [\n    options,\n    optionValues,\n    onValidationChange,\n    errorMessages,\n    showCustomAmount,\n  ]);\n\n  useEffect(() => {\n    const giftCardAmountOption = findOptionByName('giftcard/giftcard_amount');\n    const customAmountOption = findOptionByName(\n      'giftcard/custom_giftcard_amount'\n    );\n\n    const giftCardAmountField = optionValues.find(\n      (f) => f.id === giftCardAmountOption?.uid\n    );\n\n    const selectedValue = giftCardAmountField?.value || '';\n    const wasShowingCustomAmount = showCustomAmount;\n\n    // If there's no gift card amount option, always show custom amount\n    // Otherwise, show custom amount only when \"other\" is selected\n    const willShowCustomAmount = giftCardAmountOption\n      ? selectedValue === 'other'\n      : !!customAmountOption;\n\n    setShowCustomAmount(willShowCustomAmount);\n\n    // Reset custom amount value when switching away from \"other\"\n    if (wasShowingCustomAmount && !willShowCustomAmount && customAmountOption) {\n      onOptionChange(customAmountOption.uid, '');\n    }\n  }, [optionValues, findOptionByName, showCustomAmount, onOptionChange]);\n\n  const handleChange = (option: Option, value: string) => {\n    const error = validate(option, value, errorMessages);\n    setErrors((prev: Record<string, string>) => ({\n      ...prev,\n      [option.uid]: error,\n    }));\n\n    onOptionChange(option.uid, value);\n  };\n\n  const handleBlur = (option: Option, value: string) => {\n    const error = validate(option, value, errorMessages);\n    setErrors((prev: Record<string, string>) => ({\n      ...prev,\n      [option.uid]: error,\n    }));\n  };\n\n  const handlePickerSelect = (option: Option, event: any) => {\n    const selectedValue = event.target.value;\n    handleChange(option, selectedValue);\n  };\n\n  const renderField = (option: Option) => {\n    const field = optionValues.find((f) => f.id === option.uid);\n    const value = field?.value;\n    const error = errors[option.uid];\n    const componentType = getComponentType(option);\n    const hasCustomAmountField = !!findOptionByName(\n      'giftcard/custom_giftcard_amount'\n    );\n\n    // Add currency to custom gift card amount label\n    let label = option.label;\n    if (option.name === 'giftcard/custom_giftcard_amount' && currency) {\n      label = `${option.label} ${currency}`;\n    }\n\n    return (\n      <Field\n        key={option.uid}\n        label={label}\n        className={classes([\n          'pdp-gift-card-options__option-field',\n          componentType === ComponentType.TEXTAREA &&\n            'pdp-gift-card-options__option-field--full-width',\n        ])}\n        error={error}\n      >\n        {(() => {\n          if (componentType === ComponentType.TEXTAREA) {\n            return (\n              <TextArea\n                value={value}\n                label={option.label}\n                onChange={(e: any) =>\n                  handleChange(option, (e.target as HTMLTextAreaElement).value)\n                }\n                onBlur={(e: any) =>\n                  handleBlur(option, (e.target as HTMLTextAreaElement).value)\n                }\n                aria-invalid={!!error}\n              />\n            );\n          }\n\n          if (componentType === ComponentType.PICKER) {\n            return (\n              <Picker\n                aria-label={option.label}\n                label={option.label}\n                handleSelect={(event) => handlePickerSelect(option, event)}\n                options={mapToPickerOptions(\n                  option.validationRule.values || [],\n                  hasCustomAmountField,\n                  ChooseAmount,\n                  OtherAmount\n                )}\n                value={value}\n                aria-invalid={!!error}\n              />\n            );\n          }\n\n          return (\n            <Input\n              type={getInputType(option.validationRule.type)}\n              value={value}\n              onChange={(e) =>\n                handleChange(option, (e.target as HTMLInputElement).value)\n              }\n              onBlur={(e) =>\n                handleBlur(option, (e.target as HTMLInputElement).value)\n              }\n              aria-invalid={!!error}\n            />\n          );\n        })()}\n      </Field>\n    );\n  };\n\n  return (\n    <div className=\"pdp-gift-card-options__grid\">\n      {/* Row 1: Gift card amount and custom amount */}\n      <div className=\"pdp-gift-card-options__row\">\n        {findOptionByName('giftcard/giftcard_amount') &&\n          renderField(findOptionByName('giftcard/giftcard_amount')!)}\n        {findOptionByName('giftcard/custom_giftcard_amount') &&\n          showCustomAmount &&\n          renderField(findOptionByName('giftcard/custom_giftcard_amount')!)}\n      </div>\n\n      {/* Row 2: Sender name and email */}\n      <div className=\"pdp-gift-card-options__row\">\n        {findOptionByName('giftcard/giftcard_sender_name') &&\n          renderField(findOptionByName('giftcard/giftcard_sender_name')!)}\n        {findOptionByName('giftcard/giftcard_sender_email') &&\n          renderField(findOptionByName('giftcard/giftcard_sender_email')!)}\n      </div>\n\n      {/* Row 3: Recipient name and email */}\n      <div className=\"pdp-gift-card-options__row\">\n        {findOptionByName('giftcard/giftcard_recipient_name') &&\n          renderField(findOptionByName('giftcard/giftcard_recipient_name')!)}\n        {findOptionByName('giftcard/giftcard_recipient_email') &&\n          renderField(findOptionByName('giftcard/giftcard_recipient_email')!)}\n      </div>\n\n      {/* Row 4: Gift card message */}\n      <div className=\"pdp-gift-card-options__row\">\n        {findOptionByName('giftcard/giftcard_message') &&\n          renderField(findOptionByName('giftcard/giftcard_message')!)}\n      </div>\n    </div>\n  );\n};\n"],"names":["getInputType","validationType","getComponentType","option","mapToPickerOptions","values","hasCustomAmountField","chooseAmountText","otherAmountText","value","validate","errorMessages","validationRule","num","val","length","GiftCardOptions","options","currency","optionValues","onOptionChange","onValidationChange","ChooseAmount","useText","OtherAmount","RequiredFieldError","NumberError","MinError","MaxError","MinLengthError","MaxLengthError","EmailError","InvalidValueError","errors","setErrors","useState","showCustomAmount","setShowCustomAmount","findOptionByName","useCallback","name","useMemo","useEffect","valid","field","giftCardAmountOption","customAmountOption","giftCardAmountField","f","selectedValue","wasShowingCustomAmount","willShowCustomAmount","handleChange","error","prev","handleBlur","handlePickerSelect","event","renderField","componentType","label","jsx","Field","classes","TextArea","e","Picker","Input","jsxs"],"mappings":"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"}

package/chunks/PriceRange.js

@@ -1,4 +1,4 @@
 /*! Copyright 2025 Adobe
 All Rights Reserved. */
-import{jsx as r,Fragment as h,jsxs as l}from"@dropins/tools/preact-jsx-runtime.js";/* empty css     */import{Price as s}from"@dropins/tools/components.js";const o=({amount:e,currency:p,locale:d,variant:g,sale:t,minimumAmount:i,maximumAmount:n,className:a,...c})=>r(h,{children:e||i===n?r("div",{className:"pdp-price-range",...c,children:r(s,{amount:e||i,currency:p,locale:d,variant:g,sale:t,className:a})}):l("div",{className:"pdp-price-range",...c,children:[r(s,{amount:i,currency:p,locale:d,className:a}),r("span",{className:"pdp-price-range__label",children:"-"}),r(s,{amount:n,currency:p,locale:d,className:a})]})});export{o as P};
+import{jsx as r,Fragment as h,jsxs as l}from"@dropins/tools/preact-jsx-runtime.js";/* empty css          */import{Price as s}from"@dropins/tools/components.js";const o=({amount:e,currency:p,locale:d,variant:g,sale:t,minimumAmount:i,maximumAmount:n,className:a,...c})=>r(h,{children:e||i===n?r("div",{className:"pdp-price-range",...c,children:r(s,{amount:e||i,currency:p,locale:d,variant:g,sale:t,className:a})}):l("div",{className:"pdp-price-range",...c,children:[r(s,{amount:i,currency:p,locale:d,className:a}),r("span",{className:"pdp-price-range__label",children:"-"}),r(s,{amount:n,currency:p,locale:d,className:a})]})});export{o as P};
 //# sourceMappingURL=PriceRange.js.map

package/chunks/PriceRange.js.map

@@ -1 +1 @@
-{"version":3,"file":"PriceRange.js","sources":["/@dropins/storefront-pdp/src/components/PriceRange/PriceRange.tsx"],"sourcesContent":["/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2023 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { HTMLAttributes } from 'preact/compat';\nimport '@/pdp/components/PriceRange/PriceRange.css';\nimport { FunctionalComponent } from 'preact';\nimport { Price } from '@adobe-commerce/elsie/components';\n\nexport interface PriceRangeProps extends HTMLAttributes<HTMLDivElement> {\n  locale?: string;\n  variant?: 'default' | 'strikethrough';\n  currency?: string;\n\n  // Simple product\n  amount?: number;\n  sale?: boolean;\n\n  // Complex product (range)\n  minimumAmount?: number;\n  maximumAmount?: number;\n}\n\nexport const PriceRange: FunctionalComponent<PriceRangeProps> = ({\n  amount,\n  currency,\n  locale,\n  variant,\n  sale,\n  minimumAmount,\n  maximumAmount,\n  className,\n  ...props\n}) => {\n  return (\n    <>\n      {amount || minimumAmount === maximumAmount ? (\n        <div className={'pdp-price-range'} {...props}>\n          <Price\n            amount={amount ? amount : minimumAmount}\n            currency={currency}\n            locale={locale}\n            variant={variant}\n            sale={sale}\n            className={className}\n          />\n        </div>\n      ) : (\n        <div className={'pdp-price-range'} {...props}>\n          <Price\n            amount={minimumAmount}\n            currency={currency}\n            locale={locale}\n            className={className}\n          />\n          <span className=\"pdp-price-range__label\">{'-'}</span>\n          <Price\n            amount={maximumAmount}\n            currency={currency}\n            locale={locale}\n            className={className}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["PriceRange","amount","currency","locale","variant","sale","minimumAmount","maximumAmount","className","props","jsx","Fragment","Price","jsxs"],"mappings":"2JAmCO,MAAMA,EAAmD,CAAC,CAC/D,OAAAC,EACA,SAAAC,EACA,OAAAC,EACA,QAAAC,EACA,KAAAC,EACA,cAAAC,EACA,cAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAEIC,EAAAC,EAAA,CACG,YAAUL,IAAkBC,IAC1B,MAAI,CAAA,UAAW,kBAAoB,GAAGE,EACrC,SAAAC,EAACE,EAAA,CACC,OAAQX,GAAkBK,EAC1B,SAAAJ,EACA,OAAAC,EACA,QAAAC,EACA,KAAAC,EACA,UAAAG,CAAA,CAAA,EAEJ,EAEAK,EAAC,OAAI,UAAW,kBAAoB,GAAGJ,EACrC,SAAA,CAAAC,EAACE,EAAA,CACC,OAAQN,EACR,SAAAJ,EACA,OAAAC,EACA,UAAAK,CAAA,CACF,EACCE,EAAA,OAAA,CAAK,UAAU,yBAA0B,SAAI,IAAA,EAC9CA,EAACE,EAAA,CACC,OAAQL,EACR,SAAAL,EACA,OAAAC,EACA,UAAAK,CAAA,CAAA,CACF,CAAA,CACF,CAEJ,CAAA"}
+{"version":3,"file":"PriceRange.js","sources":["/@dropins/storefront-pdp/src/components/PriceRange/PriceRange.tsx"],"sourcesContent":["/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2023 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { HTMLAttributes } from 'preact/compat';\nimport '@/pdp/components/PriceRange/PriceRange.css';\nimport { FunctionalComponent } from 'preact';\nimport { Price } from '@adobe-commerce/elsie/components';\n\nexport interface PriceRangeProps extends HTMLAttributes<HTMLDivElement> {\n  locale?: string;\n  variant?: 'default' | 'strikethrough';\n  currency?: string;\n\n  // Simple product\n  amount?: number;\n  sale?: boolean;\n\n  // Complex product (range)\n  minimumAmount?: number;\n  maximumAmount?: number;\n}\n\nexport const PriceRange: FunctionalComponent<PriceRangeProps> = ({\n  amount,\n  currency,\n  locale,\n  variant,\n  sale,\n  minimumAmount,\n  maximumAmount,\n  className,\n  ...props\n}) => {\n  return (\n    <>\n      {amount || minimumAmount === maximumAmount ? (\n        <div className={'pdp-price-range'} {...props}>\n          <Price\n            amount={amount ? amount : minimumAmount}\n            currency={currency}\n            locale={locale}\n            variant={variant}\n            sale={sale}\n            className={className}\n          />\n        </div>\n      ) : (\n        <div className={'pdp-price-range'} {...props}>\n          <Price\n            amount={minimumAmount}\n            currency={currency}\n            locale={locale}\n            className={className}\n          />\n          <span className=\"pdp-price-range__label\">{'-'}</span>\n          <Price\n            amount={maximumAmount}\n            currency={currency}\n            locale={locale}\n            className={className}\n          />\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":["PriceRange","amount","currency","locale","variant","sale","minimumAmount","maximumAmount","className","props","jsx","Fragment","Price","jsxs"],"mappings":"gKAmCO,MAAMA,EAAmD,CAAC,CAC/D,OAAAC,EACA,SAAAC,EACA,OAAAC,EACA,QAAAC,EACA,KAAAC,EACA,cAAAC,EACA,cAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAEIC,EAAAC,EAAA,CACG,YAAUL,IAAkBC,IAC1B,MAAI,CAAA,UAAW,kBAAoB,GAAGE,EACrC,SAAAC,EAACE,EAAA,CACC,OAAQX,GAAkBK,EAC1B,SAAAJ,EACA,OAAAC,EACA,QAAAC,EACA,KAAAC,EACA,UAAAG,CAAA,CAAA,EAEJ,EAEAK,EAAC,OAAI,UAAW,kBAAoB,GAAGJ,EACrC,SAAA,CAAAC,EAACE,EAAA,CACC,OAAQN,EACR,SAAAJ,EACA,OAAAC,EACA,UAAAK,CAAA,CACF,EACCE,EAAA,OAAA,CAAK,UAAU,yBAA0B,SAAI,IAAA,EAC9CA,EAACE,EAAA,CACC,OAAQL,EACR,SAAAL,EACA,OAAAC,EACA,UAAAK,CAAA,CAAA,CACF,CAAA,CACF,CAEJ,CAAA"}

package/chunks/Swatches.js

@@ -1,4 +1,4 @@
 /*! Copyright 2025 Adobe
 All Rights Reserved. */
-import{jsx as f,jsxs as R}from"@dropins/tools/preact-jsx-runtime.js";import{useState as z,useEffect as P,useMemo as A,useCallback as _}from"@dropins/tools/preact-compat.js";import{classes as C}from"@dropins/tools/lib.js";import{Picker as y,ColorSwatch as B,ImageSwatch as D,TextSwatch as F}from"@dropins/tools/components.js";/* empty css     */import{useText as q}from"@dropins/tools/i18n.js";const G=["text","image","color","dropdown"],H=d=>d.map(h=>({...h,text:h.label,disabled:!h.inStock}));function K(d,h){return d.reduce((m,w)=>{const n=h==null?void 0:h.find(i=>i.items.find(S=>S.id===w));if(!n)return m;const b=n.items.find(i=>i.id===w);return{...m,[n.id]:{label:b.label,value:b.id}}},{})}const T=({options:d,hideSelectedValue:h,disablePreselections:m,selectedUIDs:w,onValues:n,onErrors:b,defaultOptions:i,selectionsToUpdate:S,className:L,children:Q,imageSwatchNode:O,...M})=>{const j=q("PDP.Swatches.Required.label").label,g=q("PDP.Swatches.ChooseOption.label").label,[v,x]=z(()=>d==null?void 0:d.reduce((r,e)=>{const{items:a}=e,c=a==null?void 0:a.find(s=>i==null?void 0:i.includes(s.id)),u=a==null?void 0:a.find(s=>s.selected);return c?{...r,[e.id]:{label:c.label,value:c.id}}:u?{...r,[e.id]:{label:u.label,value:u.id}}:r},{}));P(()=>{if(w){const l=K(w,d);if(JSON.stringify(l)===JSON.stringify(v))return;x(r=>{let e={...r,...l};return n==null||n(e),e})}},[w]),P(()=>{S==null||S.forEach(l=>{x(r=>{var c;const e=(c=l==null?void 0:l.items)==null?void 0:c.find(u=>u.selected);return e?{...r,[l.id]:{label:e==null?void 0:e.label,value:e==null?void 0:e.id}}:r})})},[S,x]),A(()=>{const l=d==null?void 0:d.reduce((r,e)=>{var c;let a=!1;return(c=e==null?void 0:e.items)==null||c.forEach(u=>{var t;((t=v[e.id])==null?void 0:t.value)===u.id&&(a=!0)}),e.required&&!a&&(r[e.id]=j),r},{});return b==null||b(l),l},[v]);const $=_((l,r,e)=>{x(a=>{let c={...a,...l&&{[l]:{label:r,value:e}}};return r===g&&delete c[l],n==null||n(c,e),c})},[n]),N=_((l,r)=>{var a;const e=((a=r.selectedOptions[0])==null?void 0:a.label)??"";$(l,e,r.value)},[$]),J=_(({items:l,id:r,required:e,type:a,selected:c,label:u})=>{const s=`pdp-swatch-${r}=${Math.random().toString(36)}`;return(l==null?void 0:l.length)>0&&f("div",{className:C(["pdp-swatches__options"]),children:(a==null?void 0:a.toLowerCase())==="dropdown"?f(y,{id:s,name:r,"aria-label":u,placeholder:m?g:void 0,handleSelect:t=>N(r,t.target),options:H(l),value:c}):l==null?void 0:l.map(t=>{const k={key:t.id,id:`${s}-${t.id}`,name:r,value:t.value,label:t.label,groupAriaLabel:u,selected:c===t.id,outOfStock:!t.inStock,required:e===null?!0:e,onValue:()=>{$(r,t.label,t.id)}};switch(a){case"text":return f(F,{...k,label:t.label});case"image":return f(D,{...k,src:t.value,alt:t.label,imageNode:O});case"color":return f(B,{...k,size:"large",color:t.value});default:return console.warn(`Invalid swatch type ${a}`),null}})})},[g,$,N]);return f("div",{...M,className:C(["pdp-swatches",L]),children:d==null?void 0:d.map(({type:l,label:r,id:e,multiple:a,required:c,items:u})=>{var s;return G.includes(l)||console.warn(`Invalid swatch type ${l}`),a&&console.warn("Multiple selection swatches are not currently supported."),R("div",{id:`swatch-item-${e}`,"data-slot-key":`product-swatch--${e}`,className:"pdp-swatches__field",children:[f("div",{className:"pdp-swatches__field__label",children:v[e]?h?`${r}`:`${r}: ${v[e].label}`:r}),f(J,{id:e,type:l,required:c,items:u,label:r,selected:(s=v[e])==null?void 0:s.value})]},`swatch-item-${e}`)})})};export{T as S};
+import{jsx as f,jsxs as R}from"@dropins/tools/preact-jsx-runtime.js";import{useState as z,useEffect as P,useMemo as A,useCallback as _}from"@dropins/tools/preact-compat.js";import{classes as C}from"@dropins/tools/lib.js";import{Picker as y,ColorSwatch as B,ImageSwatch as D,TextSwatch as F}from"@dropins/tools/components.js";/* empty css          */import{useText as q}from"@dropins/tools/i18n.js";const G=["text","image","color","dropdown"],H=d=>d.map(h=>({...h,text:h.label,disabled:!h.inStock}));function K(d,h){return d.reduce((m,w)=>{const n=h==null?void 0:h.find(i=>i.items.find(S=>S.id===w));if(!n)return m;const b=n.items.find(i=>i.id===w);return{...m,[n.id]:{label:b.label,value:b.id}}},{})}const T=({options:d,hideSelectedValue:h,disablePreselections:m,selectedUIDs:w,onValues:n,onErrors:b,defaultOptions:i,selectionsToUpdate:S,className:L,children:Q,imageSwatchNode:O,...M})=>{const j=q("PDP.Swatches.Required.label").label,g=q("PDP.Swatches.ChooseOption.label").label,[v,x]=z(()=>d==null?void 0:d.reduce((r,e)=>{const{items:a}=e,c=a==null?void 0:a.find(s=>i==null?void 0:i.includes(s.id)),u=a==null?void 0:a.find(s=>s.selected);return c?{...r,[e.id]:{label:c.label,value:c.id}}:u?{...r,[e.id]:{label:u.label,value:u.id}}:r},{}));P(()=>{if(w){const l=K(w,d);if(JSON.stringify(l)===JSON.stringify(v))return;x(r=>{let e={...r,...l};return n==null||n(e),e})}},[w]),P(()=>{S==null||S.forEach(l=>{x(r=>{var c;const e=(c=l==null?void 0:l.items)==null?void 0:c.find(u=>u.selected);return e?{...r,[l.id]:{label:e==null?void 0:e.label,value:e==null?void 0:e.id}}:r})})},[S,x]),A(()=>{const l=d==null?void 0:d.reduce((r,e)=>{var c;let a=!1;return(c=e==null?void 0:e.items)==null||c.forEach(u=>{var t;((t=v[e.id])==null?void 0:t.value)===u.id&&(a=!0)}),e.required&&!a&&(r[e.id]=j),r},{});return b==null||b(l),l},[v]);const $=_((l,r,e)=>{x(a=>{let c={...a,...l&&{[l]:{label:r,value:e}}};return r===g&&delete c[l],n==null||n(c,e),c})},[n]),N=_((l,r)=>{var a;const e=((a=r.selectedOptions[0])==null?void 0:a.label)??"";$(l,e,r.value)},[$]),J=_(({items:l,id:r,required:e,type:a,selected:c,label:u})=>{const s=`pdp-swatch-${r}=${Math.random().toString(36)}`;return(l==null?void 0:l.length)>0&&f("div",{className:C(["pdp-swatches__options"]),children:(a==null?void 0:a.toLowerCase())==="dropdown"?f(y,{id:s,name:r,"aria-label":u,placeholder:m?g:void 0,handleSelect:t=>N(r,t.target),options:H(l),value:c}):l==null?void 0:l.map(t=>{const k={key:t.id,id:`${s}-${t.id}`,name:r,value:t.value,label:t.label,groupAriaLabel:u,selected:c===t.id,outOfStock:!t.inStock,required:e===null?!0:e,onValue:()=>{$(r,t.label,t.id)}};switch(a){case"text":return f(F,{...k,label:t.label});case"image":return f(D,{...k,src:t.value,alt:t.label,imageNode:O});case"color":return f(B,{...k,size:"large",color:t.value});default:return console.warn(`Invalid swatch type ${a}`),null}})})},[g,$,N]);return f("div",{...M,className:C(["pdp-swatches",L]),children:d==null?void 0:d.map(({type:l,label:r,id:e,multiple:a,required:c,items:u})=>{var s;return G.includes(l)||console.warn(`Invalid swatch type ${l}`),a&&console.warn("Multiple selection swatches are not currently supported."),R("div",{id:`swatch-item-${e}`,"data-slot-key":`product-swatch--${e}`,className:"pdp-swatches__field",children:[f("div",{className:"pdp-swatches__field__label",children:v[e]?h?`${r}`:`${r}: ${v[e].label}`:r}),f(J,{id:e,type:l,required:c,items:u,label:r,selected:(s=v[e])==null?void 0:s.value})]},`swatch-item-${e}`)})})};export{T as S};
 //# sourceMappingURL=Swatches.js.map

package/chunks/Swatches.js.map

@@ -1 +1 @@
-{"version":3,"file":"Swatches.js","sources":["/@dropins/storefront-pdp/src/components/Swatches/Swatches.tsx"],"sourcesContent":["/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2023 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { FunctionComponent, VNode } from 'preact';\nimport {\n  HTMLAttributes,\n  useState,\n  useMemo,\n  useCallback,\n  useEffect,\n  JSX,\n} from 'preact/compat';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport {\n  ColorSwatch,\n  ImageSwatch,\n  TextSwatch,\n  Picker,\n  PickerOption,\n  ImageNodeRenderProps,\n} from '@adobe-commerce/elsie/components';\n\nimport '@/pdp/components/Swatches/Swatches.css';\n\nconst supportedTypes = ['text', 'image', 'color', 'dropdown'];\n\nconst mapToPickerOptions = (items: OptionValue[]): PickerOption[] => {\n  return items.map((item: OptionValue) => ({\n    ...item,\n    text: item.label,\n    disabled: !item.inStock,\n  }));\n};\n\ntype OptionValue = {\n  id: string;\n  label: string;\n  inStock: boolean;\n  value: string;\n  selected?: boolean;\n};\n\nexport type Option = {\n  id: string;\n  type: (typeof supportedTypes)[number];\n  label: string;\n  required?: boolean;\n  multiple?: boolean;\n  items: OptionValue[];\n};\n\ntype Selection = { [id: string]: { label: string; value: string } };\n\nfunction optionUIDsToSelection(\n  optionUIDs: string[],\n  options: Array<Option>\n): Selection {\n  return optionUIDs.reduce((accum, optionUID) => {\n    const option = options?.find((option) =>\n      option.items.find((item) => item.id === optionUID)\n    );\n    if (!option) return accum;\n\n    const item = option.items.find((item) => item.id === optionUID);\n\n    return {\n      ...accum,\n      [option.id]: {\n        label: item!.label,\n        value: item!.id,\n      },\n    };\n  }, {});\n}\n\nexport interface SwatchesProps extends HTMLAttributes<HTMLDivElement> {\n  options: Array<Option>;\n  hideSelectedValue?: boolean;\n  disablePreselections?: boolean;\n  defaultOptions?: string[];\n  selectionsToUpdate?: Option[];\n  onValues?: (uids: Selection, current: string) => void;\n  onErrors?: (errors: { [id: string]: string }) => void;\n  selectedUIDs?: string[];\n  imageSwatchNode?: VNode | ((props: ImageNodeRenderProps) => JSX.Element);\n}\n\nexport const Swatches: FunctionComponent<SwatchesProps> = ({\n  options,\n  hideSelectedValue,\n  disablePreselections,\n  selectedUIDs,\n  onValues,\n  onErrors,\n  defaultOptions,\n  selectionsToUpdate,\n  className,\n  children,\n  imageSwatchNode,\n  ...props\n}) => {\n  // i18n\n  const RequiredLabel = useText('PDP.Swatches.Required.label').label;\n  const ChooseOptionLabel = useText('PDP.Swatches.ChooseOption.label').label;\n\n  const [selections, setSelections] = useState<Selection>(() => {\n    const initial = options?.reduce((accum, option) => {\n      const { items } = option;\n      const defaultSelection = items?.find((item) =>\n        defaultOptions?.includes(item.id)\n      );\n      const selected = items?.find((item) => item.selected);\n      if (defaultSelection) {\n        return {\n          ...accum,\n          [option.id]: {\n            label: defaultSelection.label,\n            value: defaultSelection.id,\n          },\n        };\n      } else if (selected) {\n        return {\n          ...accum,\n          [option.id]: { label: selected.label, value: selected.id },\n        };\n      }\n      return accum;\n    }, {} as Selection);\n\n    return initial;\n  });\n\n  // set selected options from props\n  useEffect(() => {\n    if (selectedUIDs) {\n      const selection = optionUIDsToSelection(selectedUIDs, options);\n      // if the internal state is already the same as the props, do nothing\n      if (JSON.stringify(selection) === JSON.stringify(selections)) return;\n\n      setSelections((prev) => {\n        let next = {\n          ...prev,\n          ...selection,\n        };\n        onValues?.(next);\n        return next;\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedUIDs]);\n\n  // this only applies for the case with anchor options\n  // update selections in the swatches if they are updated in the parent component\n  useEffect(() => {\n    selectionsToUpdate?.forEach((selectionToUpdate) => {\n      setSelections((prev) => {\n        const selectedItem = selectionToUpdate?.items?.find(\n          (item) => item.selected\n        );\n        if (!selectedItem) return prev;\n\n        const next = {\n          ...prev,\n          [selectionToUpdate.id]: {\n            label: selectedItem?.label,\n            value: selectedItem?.id,\n          },\n        };\n        return next;\n      });\n    });\n  }, [selectionsToUpdate, setSelections]);\n\n  // Update invalid options\n  useMemo(() => {\n    const errors = options?.reduce((accum, option) => {\n      let valueSelected = false;\n      option?.items?.forEach((item) => {\n        const selected = selections[option.id]?.value === item.id;\n        if (selected) {\n          valueSelected = true;\n        }\n      });\n\n      // Validate required\n      if (option.required && !valueSelected) {\n        accum[option.id] = RequiredLabel;\n      }\n      return accum;\n    }, {} as { [id: string]: string });\n\n    // Call the callback\n    onErrors?.(errors);\n\n    return errors;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selections]);\n\n  const handleOnSelection = useCallback(\n    (id: string, label: string, optionId: string) => {\n      setSelections((prev) => {\n        let next = {\n          ...prev,\n          ...(id && { [id]: { label, value: optionId } }),\n        };\n\n        if (label === ChooseOptionLabel) {\n          delete next[id];\n        }\n\n        // Call the callback\n        onValues?.(next, optionId);\n\n        // Return the next state\n        return next;\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onValues]\n  );\n\n  // Function to handle the picker selection\n  const handlePickerSelect = useCallback(\n    (optionId: string, selection: any) => {\n      const label = selection.selectedOptions[0]?.label ?? '';\n      handleOnSelection(optionId, label, selection.value);\n    },\n    [handleOnSelection]\n  );\n\n  const Swatches = useCallback(\n    ({ items, id, required, type, selected, label }: any) => {\n      const uniqueId = `pdp-swatch-${id}=${Math.random().toString(36)}`;\n\n      return (\n        items?.length > 0 && (\n          <div className={classes(['pdp-swatches__options'])}>\n            {type?.toLowerCase() === 'dropdown' ? (\n              <Picker\n                id={uniqueId}\n                name={id}\n                aria-label={label}\n                placeholder={\n                  disablePreselections ? ChooseOptionLabel : undefined\n                }\n                handleSelect={(event) => handlePickerSelect(id, event.target)}\n                options={mapToPickerOptions(items)}\n                value={selected}\n              />\n            ) : (\n              items?.map((option: any) => {\n                const common = {\n                  key: option.id,\n                  id: `${uniqueId}-${option.id}`,\n                  name: id,\n                  value: option.value,\n                  label: option.label,\n                  groupAriaLabel: label,\n                  selected: selected === option.id,\n                  outOfStock: !option.inStock,\n                  // API may return null, we default to true as all swatches are required.\n                  //  we still comply to this in case the api return \"false\".\n                  required: required === null ? true : required,\n                  onValue: () => {\n                    handleOnSelection(id, option.label, option.id);\n                  },\n                };\n\n                switch (type) {\n                  case 'text':\n                    return <TextSwatch {...common} label={option.label} />;\n\n                  case 'image':\n                    return (\n                      <ImageSwatch\n                        {...common}\n                        src={option.value}\n                        alt={option.label}\n                        imageNode={imageSwatchNode}\n                      />\n                    );\n\n                  case 'color':\n                    return (\n                      <ColorSwatch\n                        {...common}\n                        size=\"large\"\n                        color={option.value}\n                      />\n                    );\n\n                  default:\n                    console.warn(`Invalid swatch type ${type}`);\n                    return null;\n                }\n              })\n            )}\n          </div>\n        )\n      );\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ChooseOptionLabel, handleOnSelection, handlePickerSelect]\n  );\n\n  return (\n    <div {...props} className={classes(['pdp-swatches', className])}>\n      {options?.map(({ type, label, id, multiple, required, items }) => {\n        // Only render supported types\n        if (!supportedTypes.includes(type)) {\n          console.warn(`Invalid swatch type ${type}`);\n        }\n\n        if (multiple) {\n          console.warn(\n            'Multiple selection swatches are not currently supported.'\n          );\n        }\n\n        return (\n          <div\n            key={`swatch-item-${id}`}\n            id={`swatch-item-${id}`}\n            data-slot-key={`product-swatch--${id}`}\n            className=\"pdp-swatches__field\"\n          >\n            <div className=\"pdp-swatches__field__label\">\n              {selections[id]\n                ? hideSelectedValue\n                  ? `${label}`\n                  : `${label}: ${selections[id].label}`\n                : label}\n            </div>\n\n            <Swatches\n              id={id}\n              type={type}\n              required={required}\n              items={items}\n              label={label} //label referring to the name of the swatchGroup\n              selected={selections[id]?.value}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["supportedTypes","mapToPickerOptions","items","item","optionUIDsToSelection","optionUIDs","options","accum","optionUID","option","Swatches","hideSelectedValue","disablePreselections","selectedUIDs","onValues","onErrors","defaultOptions","selectionsToUpdate","className","children","imageSwatchNode","props","RequiredLabel","useText","ChooseOptionLabel","selections","setSelections","useState","defaultSelection","selected","useEffect","selection","prev","next","selectionToUpdate","selectedItem","_a","useMemo","errors","valueSelected","handleOnSelection","useCallback","id","label","optionId","handlePickerSelect","required","type","uniqueId","jsx","classes","Picker","event","common","TextSwatch","ImageSwatch","ColorSwatch","multiple","jsxs"],"mappings":"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"}
+{"version":3,"file":"Swatches.js","sources":["/@dropins/storefront-pdp/src/components/Swatches/Swatches.tsx"],"sourcesContent":["/**\n * ADOBE CONFIDENTIAL\n * __________________\n * Copyright 2023 Adobe\n * All Rights Reserved.\n * __________________\n * NOTICE: All information contained herein is, and remains\n * the property of Adobe and its suppliers, if any. The intellectual\n * and technical concepts contained herein are proprietary to Adobe\n * and its suppliers and are protected by all applicable intellectual\n * property laws, including trade secret and copyright laws.\n * Dissemination of this information or reproduction of this material\n * is strictly forbidden unless prior written permission is obtained\n * from Adobe.\n */\n\nimport { FunctionComponent, VNode } from 'preact';\nimport {\n  HTMLAttributes,\n  useState,\n  useMemo,\n  useCallback,\n  useEffect,\n  JSX,\n} from 'preact/compat';\nimport { classes } from '@adobe-commerce/elsie/lib';\nimport { useText } from '@adobe-commerce/elsie/i18n';\nimport {\n  ColorSwatch,\n  ImageSwatch,\n  TextSwatch,\n  Picker,\n  PickerOption,\n  ImageNodeRenderProps,\n} from '@adobe-commerce/elsie/components';\n\nimport '@/pdp/components/Swatches/Swatches.css';\n\nconst supportedTypes = ['text', 'image', 'color', 'dropdown'];\n\nconst mapToPickerOptions = (items: OptionValue[]): PickerOption[] => {\n  return items.map((item: OptionValue) => ({\n    ...item,\n    text: item.label,\n    disabled: !item.inStock,\n  }));\n};\n\ntype OptionValue = {\n  id: string;\n  label: string;\n  inStock: boolean;\n  value: string;\n  selected?: boolean;\n};\n\nexport type Option = {\n  id: string;\n  type: (typeof supportedTypes)[number];\n  label: string;\n  required?: boolean;\n  multiple?: boolean;\n  items: OptionValue[];\n};\n\ntype Selection = { [id: string]: { label: string; value: string } };\n\nfunction optionUIDsToSelection(\n  optionUIDs: string[],\n  options: Array<Option>\n): Selection {\n  return optionUIDs.reduce((accum, optionUID) => {\n    const option = options?.find((option) =>\n      option.items.find((item) => item.id === optionUID)\n    );\n    if (!option) return accum;\n\n    const item = option.items.find((item) => item.id === optionUID);\n\n    return {\n      ...accum,\n      [option.id]: {\n        label: item!.label,\n        value: item!.id,\n      },\n    };\n  }, {});\n}\n\nexport interface SwatchesProps extends HTMLAttributes<HTMLDivElement> {\n  options: Array<Option>;\n  hideSelectedValue?: boolean;\n  disablePreselections?: boolean;\n  defaultOptions?: string[];\n  selectionsToUpdate?: Option[];\n  onValues?: (uids: Selection, current: string) => void;\n  onErrors?: (errors: { [id: string]: string }) => void;\n  selectedUIDs?: string[];\n  imageSwatchNode?: VNode | ((props: ImageNodeRenderProps) => JSX.Element);\n}\n\nexport const Swatches: FunctionComponent<SwatchesProps> = ({\n  options,\n  hideSelectedValue,\n  disablePreselections,\n  selectedUIDs,\n  onValues,\n  onErrors,\n  defaultOptions,\n  selectionsToUpdate,\n  className,\n  children,\n  imageSwatchNode,\n  ...props\n}) => {\n  // i18n\n  const RequiredLabel = useText('PDP.Swatches.Required.label').label;\n  const ChooseOptionLabel = useText('PDP.Swatches.ChooseOption.label').label;\n\n  const [selections, setSelections] = useState<Selection>(() => {\n    const initial = options?.reduce((accum, option) => {\n      const { items } = option;\n      const defaultSelection = items?.find((item) =>\n        defaultOptions?.includes(item.id)\n      );\n      const selected = items?.find((item) => item.selected);\n      if (defaultSelection) {\n        return {\n          ...accum,\n          [option.id]: {\n            label: defaultSelection.label,\n            value: defaultSelection.id,\n          },\n        };\n      } else if (selected) {\n        return {\n          ...accum,\n          [option.id]: { label: selected.label, value: selected.id },\n        };\n      }\n      return accum;\n    }, {} as Selection);\n\n    return initial;\n  });\n\n  // set selected options from props\n  useEffect(() => {\n    if (selectedUIDs) {\n      const selection = optionUIDsToSelection(selectedUIDs, options);\n      // if the internal state is already the same as the props, do nothing\n      if (JSON.stringify(selection) === JSON.stringify(selections)) return;\n\n      setSelections((prev) => {\n        let next = {\n          ...prev,\n          ...selection,\n        };\n        onValues?.(next);\n        return next;\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedUIDs]);\n\n  // this only applies for the case with anchor options\n  // update selections in the swatches if they are updated in the parent component\n  useEffect(() => {\n    selectionsToUpdate?.forEach((selectionToUpdate) => {\n      setSelections((prev) => {\n        const selectedItem = selectionToUpdate?.items?.find(\n          (item) => item.selected\n        );\n        if (!selectedItem) return prev;\n\n        const next = {\n          ...prev,\n          [selectionToUpdate.id]: {\n            label: selectedItem?.label,\n            value: selectedItem?.id,\n          },\n        };\n        return next;\n      });\n    });\n  }, [selectionsToUpdate, setSelections]);\n\n  // Update invalid options\n  useMemo(() => {\n    const errors = options?.reduce((accum, option) => {\n      let valueSelected = false;\n      option?.items?.forEach((item) => {\n        const selected = selections[option.id]?.value === item.id;\n        if (selected) {\n          valueSelected = true;\n        }\n      });\n\n      // Validate required\n      if (option.required && !valueSelected) {\n        accum[option.id] = RequiredLabel;\n      }\n      return accum;\n    }, {} as { [id: string]: string });\n\n    // Call the callback\n    onErrors?.(errors);\n\n    return errors;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selections]);\n\n  const handleOnSelection = useCallback(\n    (id: string, label: string, optionId: string) => {\n      setSelections((prev) => {\n        let next = {\n          ...prev,\n          ...(id && { [id]: { label, value: optionId } }),\n        };\n\n        if (label === ChooseOptionLabel) {\n          delete next[id];\n        }\n\n        // Call the callback\n        onValues?.(next, optionId);\n\n        // Return the next state\n        return next;\n      });\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onValues]\n  );\n\n  // Function to handle the picker selection\n  const handlePickerSelect = useCallback(\n    (optionId: string, selection: any) => {\n      const label = selection.selectedOptions[0]?.label ?? '';\n      handleOnSelection(optionId, label, selection.value);\n    },\n    [handleOnSelection]\n  );\n\n  const Swatches = useCallback(\n    ({ items, id, required, type, selected, label }: any) => {\n      const uniqueId = `pdp-swatch-${id}=${Math.random().toString(36)}`;\n\n      return (\n        items?.length > 0 && (\n          <div className={classes(['pdp-swatches__options'])}>\n            {type?.toLowerCase() === 'dropdown' ? (\n              <Picker\n                id={uniqueId}\n                name={id}\n                aria-label={label}\n                placeholder={\n                  disablePreselections ? ChooseOptionLabel : undefined\n                }\n                handleSelect={(event) => handlePickerSelect(id, event.target)}\n                options={mapToPickerOptions(items)}\n                value={selected}\n              />\n            ) : (\n              items?.map((option: any) => {\n                const common = {\n                  key: option.id,\n                  id: `${uniqueId}-${option.id}`,\n                  name: id,\n                  value: option.value,\n                  label: option.label,\n                  groupAriaLabel: label,\n                  selected: selected === option.id,\n                  outOfStock: !option.inStock,\n                  // API may return null, we default to true as all swatches are required.\n                  //  we still comply to this in case the api return \"false\".\n                  required: required === null ? true : required,\n                  onValue: () => {\n                    handleOnSelection(id, option.label, option.id);\n                  },\n                };\n\n                switch (type) {\n                  case 'text':\n                    return <TextSwatch {...common} label={option.label} />;\n\n                  case 'image':\n                    return (\n                      <ImageSwatch\n                        {...common}\n                        src={option.value}\n                        alt={option.label}\n                        imageNode={imageSwatchNode}\n                      />\n                    );\n\n                  case 'color':\n                    return (\n                      <ColorSwatch\n                        {...common}\n                        size=\"large\"\n                        color={option.value}\n                      />\n                    );\n\n                  default:\n                    console.warn(`Invalid swatch type ${type}`);\n                    return null;\n                }\n              })\n            )}\n          </div>\n        )\n      );\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [ChooseOptionLabel, handleOnSelection, handlePickerSelect]\n  );\n\n  return (\n    <div {...props} className={classes(['pdp-swatches', className])}>\n      {options?.map(({ type, label, id, multiple, required, items }) => {\n        // Only render supported types\n        if (!supportedTypes.includes(type)) {\n          console.warn(`Invalid swatch type ${type}`);\n        }\n\n        if (multiple) {\n          console.warn(\n            'Multiple selection swatches are not currently supported.'\n          );\n        }\n\n        return (\n          <div\n            key={`swatch-item-${id}`}\n            id={`swatch-item-${id}`}\n            data-slot-key={`product-swatch--${id}`}\n            className=\"pdp-swatches__field\"\n          >\n            <div className=\"pdp-swatches__field__label\">\n              {selections[id]\n                ? hideSelectedValue\n                  ? `${label}`\n                  : `${label}: ${selections[id].label}`\n                : label}\n            </div>\n\n            <Swatches\n              id={id}\n              type={type}\n              required={required}\n              items={items}\n              label={label} //label referring to the name of the swatchGroup\n              selected={selections[id]?.value}\n            />\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["supportedTypes","mapToPickerOptions","items","item","optionUIDsToSelection","optionUIDs","options","accum","optionUID","option","Swatches","hideSelectedValue","disablePreselections","selectedUIDs","onValues","onErrors","defaultOptions","selectionsToUpdate","className","children","imageSwatchNode","props","RequiredLabel","useText","ChooseOptionLabel","selections","setSelections","useState","defaultSelection","selected","useEffect","selection","prev","next","selectionToUpdate","selectedItem","_a","useMemo","errors","valueSelected","handleOnSelection","useCallback","id","label","optionId","handlePickerSelect","required","type","uniqueId","jsx","classes","Picker","event","common","TextSwatch","ImageSwatch","ColorSwatch","multiple","jsxs"],"mappings":"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"}

package/chunks/Zoom.js

@@ -1,4 +1,4 @@
 /*! Copyright 2025 Adobe
 All Rights Reserved. */
-import{jsxs as U,jsx as M,Fragment as be}from"@dropins/tools/preact-jsx-runtime.js";import*as le from"@dropins/tools/preact-compat.js";import{useState as $,Children as I,useRef as A,useMemo as ve,useEffect as R,useCallback as re,useLayoutEffect as We}from"@dropins/tools/preact-compat.js";import{debounce as ye,classes as P}from"@dropins/tools/lib.js";import{Button as pe,Icon as ke}from"@dropins/tools/components.js";/* empty css     */import{useText as q}from"@dropins/tools/i18n.js";import{cloneElement as De}from"@dropins/tools/preact.js";const Ae=i=>le.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...i},le.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),Ce=i=>le.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...i},le.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),le.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),Re=24,we=16,Se="32";var Me=(i=>(i[i.small=16]="small",i[i.medium=24]="medium",i[i.large=64]="large",i))(Me||{});const Fe=({show:i=1,scrollbar:p=!1,peak:y=!1,arrows:l=!1,controls:o="dots",arrowsOnMainImage:S=!1,loop:c=!1,gap:w=null,direction:L="horizontal",width:W="100%",height:ne="100%",defaultIndex:X=0,className:ie,children:k,thumbnails:J=null,isZoomed:Y,...O})=>{const Z=q("PDP.Carousel.label").label,ce=q("PDP.Carousel.Slide.label").label,x=q("PDP.Carousel.Previous.label").label,oe=q("PDP.Carousel.Next.label").label,j=q("PDP.Carousel.Controls.label").label,H=q("PDP.Carousel.Controls.Button.label").label,[d,ue]=$(()=>Le(i)),v=Math.ceil(I.count(k)/d),C=y?Re:0,Q=w?Me[w]:0,K=I.count(k)%d,[f,fe]=$(c?D()?X-1:X+1:X),G=A([]),[E,he]=$(0),[ee,de]=$(0),se=ve(()=>I.toArray(J),[J]),t=ve(()=>{const e=I.toArray(k).reduce((r,s,n)=>n%d===0?[...r,[s]]:[...r.slice(0,-1),[...r[r.length-1],s]],[]);return!c||e.length===1?e:c&&I.count(k)%d===0?[e[v-1]].concat(e).concat([e[0],e[1]]):[I.toArray(k).slice(-d)].concat(e).concat([e[0],e[1]])},[k,d,v,c]),g=A(null),h=A(null),a=o==="thumbnailsRow"||o==="thumbnailsColumn";R(()=>{const e=g.current;if(!e)return;const r=ye(()=>{he(e.offsetWidth??0),de(e.offsetHeight??0);const n=window.innerWidth,u=Le(i,n);u!==d&&ue(u)},50),s=new ResizeObserver(r);return s.observe(e),()=>{s.unobserve(e)}},[d,i]);const b=re(e=>{const r=c?e-1:e,s=G==null?void 0:G.current[0],n=(s==null?void 0:s.offsetWidth)+we,u=(s==null?void 0:s.offsetHeight)+we,_=h.current,te=o==="thumbnailsRow",ae=o==="thumbnailsColumn",F=te?_==null?void 0:_.offsetWidth:_==null?void 0:_.offsetHeight,N=te?n:u;if((te||ae)&&F){const Ee=Math.floor((te?_.clientWidth:_.clientHeight)/N),Ne=Math.floor(Ee/2),me=(r-Ne)*N;_.style.scrollBehavior="smooth",te?_.scrollLeft=D()?-(_.scrollWidth-_.clientWidth-me):me:_.scrollTop=me}},[o,c]);R(()=>{b(f)},[f,b]);const m=re((e,r,s)=>{a&&b(e);const n=g.current,u=C?n.offsetWidth-C:n.offsetWidth-C+Q;if(!Array.from(n.querySelectorAll("[data-index]")).filter(F=>{const N=Number(F.getAttribute("data-index"));return!isNaN(N)&&N>-1})[e])return;if(s){const F=e===0?v:0,N=u*(v+(K||d)/d);if(D()){if(n.scrollLeft<=0&&n.scrollLeft>-(u-5)){m(1,!0);return}if(n.scrollLeft<u-N&&n.scrollLeft>=-N){m(v,!0);return}n.style.scrollBehavior="auto",n.scrollLeft=F===0?0:-N,m(F===0?1:v,!0)}else{if(n.scrollLeft>=0&&n.scrollLeft<u-5){m(1,!0);return}if(n.scrollLeft>N-u&&n.scrollLeft<=N){m(v,!0);return}n.style.scrollBehavior="auto",n.scrollLeft=F===0?0:N,m(F===0?1:v,!0);return}}const ae=(n.offsetWidth-Q)/d*t[e].length-C;n.style.scrollBehavior=r?"smooth":"auto",n.scrollLeft=D()?-(t[e].length===d?u*e:u*(e-1)-ae):t[e].length===d?u*e:u*(e-1)+ae},[Q,v,C,d,K,t,b,o]),B=re(()=>{if(c){const r=f-1;m(r,!0,D()?f===v-1:f===1);return}const e=f<=0?0:f-1;m(e,!0)},[f,m,c]),z=re(()=>{const e=t.length-1;if(c){const s=f+1;m(s,!0,D()?f===0:f===v);return}const r=f>=e?e:f+1;m(r,!0)},[t.length,c,f,m,v]);R(()=>{const e=r=>{r.key==="ArrowLeft"&&(D()?z():B()),r.key==="ArrowRight"&&(D()?B():z())};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[z,B]),We(()=>{m(c?X+1:X,!1)},[X,m,c,E]);const V=ye(()=>{const e=g.current,r=C?e.offsetWidth-C:e.offsetWidth-C+Q,s=Math.abs(e.scrollLeft)/r,n=Math.abs(Math.round(s)-s<1?Math.round(s):Math.ceil(s));if(a&&b(n),c){const u=r*(v+(K||d)/d),_=D()?-e.scrollLeft:e.scrollLeft;if(Math.ceil(Math.abs(_))>=Math.ceil(u)-5){e.style.scrollBehavior="auto",e.scrollLeft=D()?-e.offsetWidth+(Math.ceil(_)-Math.ceil(u)-C):e.offsetWidth+(Math.ceil(_)-Math.ceil(u)-C);return}if(Math.abs(_)===0){e.style.scrollBehavior="auto",e.scrollLeft=D()?-(u-e.offsetWidth+C):u-e.offsetWidth+C;return}}f!==n&&fe(n)},100);R(()=>{const e=g.current;return e==null||e.addEventListener("scroll",V),()=>{e==null||e.removeEventListener("scroll",V)}},[V]);const T=(e,r,s)=>M(pe,{className:P([["pdp-carousel__button",!e],[`pdp-carousel__button--${r}`,!e],[`pdp-carousel__button--${o}`,e]]),style:{"--height":`${ee}px`},variant:"tertiary","aria-label":r==="next"?oe:x,onClick:s,disabled:c?!1:r==="next"?f>=t.length-1:f<1,children:M(ke,{className:P([["pdp-carousel__button__icon",!e],[`pdp-carousel__button__icon--${r}`,!e],[`pdp-carousel__button__icon--${o}--${r}`,e]]),size:Se,source:Ae})}),ge=l&&t.length!=1&&T(a,"prev",B),_e=l&&t.length!=1&&T(a,"next",z),Pe=l&&t.length!=1&&T(!1,"prev",B),xe=l&&t.length!=1&&T(!1,"next",z);return U("div",{role:"region","aria-roledescription":Z,className:P(["pdp-carousel",["pdp-carousel--main-image-controls",S],["pdp-carousel--arrows",l&&!a],[`pdp-carousel--${o}`,a],ie]),style:{"--flex-carousel":o==="thumbnailsColumn"?"row-reverse":"column","--gap":a?"0":"var(--spacing-small)","--width":W},...O,children:[M("div",{ref:g,className:P(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${L}`,["pdp-carousel__wrapper--scrollbar",p],["pdp-carousel__wrapper--peak",y]]),style:{"--total-width":o==="thumbnailsColumn"?"81.6%":"100%","--height":o==="thumbnailsColumn"?"auto":ne,"--gap":w?`var(--spacing-${w})`:"0px","--per-page":d},tabIndex:0,children:t.map((e,r)=>{const s=e.length<d;return M("div",{role:"group","aria-roledescription":ce,"data-index":r,className:P(["pdp-carousel__slide",`pdp-carousel__slide--${L}`,["pdp-carousel__slide--active",f===r],["pdp-carousel__slide--orphan",s],["pdp-carousel__slide--hidden",E===0]]),style:{"--length":e.length},children:e},r)})}),!a&&U(be,{children:[ge,_e]}),a&&S&&U(be,{children:[Pe,xe]}),o&&t.length!=1&&U("div",{className:P([[`pdp-carousel__controls__container--${o}`,a],["pdp-carousel__controls__container--no-arrows",!l||S]]),style:{"--width":o==="thumbnailsRow"?`${E}px`:W,"--height":`${ee}px`,"--nr-thumbnails":se.length},children:[(a||Y)&&!S&&ge,M("div",{ref:h,className:P([[`pdp-carousel__controls__wrapper--${o}`,a],["pdp-carousel__controls__wrapper",a]]),children:M("div",{role:"group","aria-label":j,className:P(["pdp-carousel__controls",[`pdp-carousel__controls--${o}`,a]]),children:(c?t.slice(0,v):t).map((e,r)=>{const s=c?v:t.length,n=c?f-1===r:f===r;return a?U("label",{className:P(["pdp-carousel__thumbnail__container"]),ref:u=>{u&&(G.current[r]=u)},children:[M("input",{type:"radio",name:"carousel-thumbnails","aria-label":H.replace("{key}",String(r+1)).replace("{total}",String(s)),checked:n&&E!==0,onChange:()=>{m(c?r+1:r,!0)},...O,className:P(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",n&&E!==0]])}),M("span",{className:P(["pdp-carousel__thumbnail__span"]),children:se[r]})]},r):M("button",{"aria-label":H.replace("{key}",String(r+1)).replace("{total}",String(s)),onClick:()=>{m(c?r+1:r,!0)},className:P(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",n]])},r)})})}),(a||Y)&&!S&&_e]})]})};function Le(i,p=0){if(typeof i=="number")return i;const{small:y,medium:l,large:o}=i,c=[{breakpoint:1024,value:o},{breakpoint:786,value:l},{breakpoint:0,value:y}].find(({breakpoint:w})=>p>w);return c?c.value:y}function D(){return document.documentElement.dir==="rtl"}const qe=({centered:i,onClose:p,className:y,children:l,...o})=>{const S=q("PDP.Overlay.Close.label").label,c=A(null),w=re(()=>{p==null||p()},[p]);return R(()=>{const L=W=>{W.key==="Escape"&&w()};return document.addEventListener("keydown",L),()=>{document.removeEventListener("keydown",L)}},[w]),R(()=>{const L=c.current;L==null||L.focus();const W=document.scrollingElement,ne=W.style.overflow;return W.style.overflow="hidden",()=>{W.style.overflow=ne}},[]),U("div",{...o,className:P(["pdp-overlay",["pdp-overlay--centered",i],y]),ref:c,role:"dialog","aria-describedby":"overlay-content",tabindex:0,children:[M("div",{className:"pdp-overlay__content",id:"overlay-content",children:l}),M(pe,{"aria-label":S,variant:"tertiary",className:"pdp-overlay__close-button",onClick:w,icon:M(Ce,{})})]})},Oe=({children:i,scale:p=2,closeButton:y=!0})=>{var se;const[l,o]=$(!1),[S,c]=$("pdp-zoom"),[w,L]=$(!1),[W,ne]=$({x:0,y:0}),[X,ie]=$({x:0,y:0}),[k,J]=$({x:0,y:0}),Y=A(null),O=A(null),Z=A(null),ce=A("none"),x=A(null),oe=A(!1),j=A(null),H=re(t=>{const g=()=>{var T;let h;O.current&&Y.current?h=O.current:Y.current?(h=Y.current.getBoundingClientRect(),O.current=h):h=(T=t.currentTarget)==null?void 0:T.getBoundingClientRect();const a=(100-100/p)/2;let b=null;if("touches"in t)if(t.touches.length>0)b=t.touches[0],j.current={clientX:b.clientX,clientY:b.clientY};else if(t.type==="touchend"&&x.current)b={clientX:x.current.x,clientY:x.current.y};else if(j.current)b=j.current;else return;else if(t instanceof MouseEvent)b=t;else return;const m=(b.clientX-h.left)/h.width*100,B=(b.clientY-h.top)/h.height*100,z=(50-m)*(p-1)/p,V=(50-B)*(p-1)/p;J({x:Math.max(-a,Math.min(z,a))||0,y:Math.max(-a,Math.min(V,a))||0})};Z.current&&cancelAnimationFrame(Z.current),Z.current=requestAnimationFrame(g)},[p]);R(()=>{O.current=null},[l]);const d=t=>{!l||t.type!=="touchstart"||(ne({x:t.touches[0].clientX,y:t.touches[0].clientY}),ie({x:k.x,y:k.y}),L(!0))},ue=t=>{var T;if(!w||t.type!=="touchmove")return;const g=(T=t.currentTarget)==null?void 0:T.getBoundingClientRect(),h=(100-100/p)/2,a=t.touches[0].clientX-W.x,b=t.touches[0].clientY-W.y,m=a*100/(g.width*p),B=b*100/(g.height*p),z=X.x+m,V=X.y+B;J({x:Math.max(-h,Math.min(z,h))||0,y:Math.max(-h,Math.min(V,h))||0}),t.preventDefault()},v=t=>{if(y)x.current={x:t.touches[0].clientX,y:t.touches[0].clientY,time:Date.now()},j.current={clientX:t.touches[0].clientX,clientY:t.touches[0].clientY},oe.current=!1,l&&d(t);else{if(w)return;!l&&H(t),o(!l),t.preventDefault()}},C=t=>{if(t.touches.length!==0){if(j.current={clientX:t.touches[0].clientX,clientY:t.touches[0].clientY},y){if(!x.current)return;if(w){ue(t);return}const g=t.touches[0].clientX,h=t.touches[0].clientY,a=Math.abs(g-x.current.x),b=Math.abs(h-x.current.y);(a>10||b>10)&&(oe.current=!0)}l&&H(t)}},Q=t=>{if(y){if(!x.current)return;const g=Date.now()-x.current.time;!oe.current&&g<300&&!w&&(o(!0),H(t),t.preventDefault()),L(!1),x.current=null}else o(!1)},K=t=>{"touches"in t||w||(l?!y&&o(!1):(o(!0),H(t)),t.preventDefault())},f=t=>{"touches"in t||l&&H(t)},fe=t=>{if(!("touches"in t)){if(y){L(!1);return}o(!1)}},G=t=>{o(!1),t.stopPropagation()},E=l?`scale(${p}) translateX(${k.x}%) translateY(${k.y}%)`:"none",he=q("PDP.Zoom.Close.label").label,ee=I.only(i);R(()=>{const t=()=>{l&&(o(!1),J({x:0,y:0}),L(!1))},g=document.querySelector("#gallery");if(g)return g.addEventListener("click",t),()=>g.removeEventListener("click",t)},[l]);const de=De(ee,{...ee.props,draggable:!1,style:{...(se=ee.props)==null?void 0:se.style,"--transform":E}});return R(()=>{c(l?`pdp-zoom ${y?"pdp-zoom--no-effects":"pdp-zoom--zoomed"}`:"pdp-zoom")},[l,y]),R(()=>{if(ce.current===E)return;ce.current=E,requestAnimationFrame(()=>{if(!Y.current)return;Y.current.querySelectorAll("img").forEach(h=>{l&&E!=="none"?h.style.setProperty("transform",E,"important"):h.style.removeProperty("transform")})})},[E,l]),R(()=>()=>{Z.current&&cancelAnimationFrame(Z.current)},[]),U("figure",{ref:Y,className:S,onClick:K,onMouseMove:f,onMouseLeave:fe,onTouchStart:v,onTouchMove:C,onTouchEnd:Q,children:[de,y&&l&&M(pe,{"aria-label":he,variant:"tertiary",className:"pdp-zoom__close-button",icon:M(Ce,{}),onClick:G})]})};export{Fe as C,qe as O,Oe as Z};
+import{jsxs as U,jsx as M,Fragment as be}from"@dropins/tools/preact-jsx-runtime.js";import*as le from"@dropins/tools/preact-compat.js";import{useState as $,Children as I,useRef as A,useMemo as ve,useEffect as R,useCallback as re,useLayoutEffect as We}from"@dropins/tools/preact-compat.js";import{debounce as ye,classes as P}from"@dropins/tools/lib.js";import{Button as pe,Icon as ke}from"@dropins/tools/components.js";/* empty css          */import{useText as q}from"@dropins/tools/i18n.js";import{cloneElement as De}from"@dropins/tools/preact.js";const Ae=i=>le.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...i},le.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),Ce=i=>le.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...i},le.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),le.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),Re=24,we=16,Se="32";var Me=(i=>(i[i.small=16]="small",i[i.medium=24]="medium",i[i.large=64]="large",i))(Me||{});const Fe=({show:i=1,scrollbar:p=!1,peak:y=!1,arrows:l=!1,controls:o="dots",arrowsOnMainImage:S=!1,loop:c=!1,gap:w=null,direction:L="horizontal",width:W="100%",height:ne="100%",defaultIndex:X=0,className:ie,children:k,thumbnails:J=null,isZoomed:Y,...O})=>{const Z=q("PDP.Carousel.label").label,ce=q("PDP.Carousel.Slide.label").label,x=q("PDP.Carousel.Previous.label").label,oe=q("PDP.Carousel.Next.label").label,j=q("PDP.Carousel.Controls.label").label,H=q("PDP.Carousel.Controls.Button.label").label,[d,ue]=$(()=>Le(i)),v=Math.ceil(I.count(k)/d),C=y?Re:0,Q=w?Me[w]:0,K=I.count(k)%d,[f,fe]=$(c?D()?X-1:X+1:X),G=A([]),[E,he]=$(0),[ee,de]=$(0),se=ve(()=>I.toArray(J),[J]),t=ve(()=>{const e=I.toArray(k).reduce((r,s,n)=>n%d===0?[...r,[s]]:[...r.slice(0,-1),[...r[r.length-1],s]],[]);return!c||e.length===1?e:c&&I.count(k)%d===0?[e[v-1]].concat(e).concat([e[0],e[1]]):[I.toArray(k).slice(-d)].concat(e).concat([e[0],e[1]])},[k,d,v,c]),g=A(null),h=A(null),a=o==="thumbnailsRow"||o==="thumbnailsColumn";R(()=>{const e=g.current;if(!e)return;const r=ye(()=>{he(e.offsetWidth??0),de(e.offsetHeight??0);const n=window.innerWidth,u=Le(i,n);u!==d&&ue(u)},50),s=new ResizeObserver(r);return s.observe(e),()=>{s.unobserve(e)}},[d,i]);const b=re(e=>{const r=c?e-1:e,s=G==null?void 0:G.current[0],n=(s==null?void 0:s.offsetWidth)+we,u=(s==null?void 0:s.offsetHeight)+we,_=h.current,te=o==="thumbnailsRow",ae=o==="thumbnailsColumn",F=te?_==null?void 0:_.offsetWidth:_==null?void 0:_.offsetHeight,N=te?n:u;if((te||ae)&&F){const Ee=Math.floor((te?_.clientWidth:_.clientHeight)/N),Ne=Math.floor(Ee/2),me=(r-Ne)*N;_.style.scrollBehavior="smooth",te?_.scrollLeft=D()?-(_.scrollWidth-_.clientWidth-me):me:_.scrollTop=me}},[o,c]);R(()=>{b(f)},[f,b]);const m=re((e,r,s)=>{a&&b(e);const n=g.current,u=C?n.offsetWidth-C:n.offsetWidth-C+Q;if(!Array.from(n.querySelectorAll("[data-index]")).filter(F=>{const N=Number(F.getAttribute("data-index"));return!isNaN(N)&&N>-1})[e])return;if(s){const F=e===0?v:0,N=u*(v+(K||d)/d);if(D()){if(n.scrollLeft<=0&&n.scrollLeft>-(u-5)){m(1,!0);return}if(n.scrollLeft<u-N&&n.scrollLeft>=-N){m(v,!0);return}n.style.scrollBehavior="auto",n.scrollLeft=F===0?0:-N,m(F===0?1:v,!0)}else{if(n.scrollLeft>=0&&n.scrollLeft<u-5){m(1,!0);return}if(n.scrollLeft>N-u&&n.scrollLeft<=N){m(v,!0);return}n.style.scrollBehavior="auto",n.scrollLeft=F===0?0:N,m(F===0?1:v,!0);return}}const ae=(n.offsetWidth-Q)/d*t[e].length-C;n.style.scrollBehavior=r?"smooth":"auto",n.scrollLeft=D()?-(t[e].length===d?u*e:u*(e-1)-ae):t[e].length===d?u*e:u*(e-1)+ae},[Q,v,C,d,K,t,b,o]),B=re(()=>{if(c){const r=f-1;m(r,!0,D()?f===v-1:f===1);return}const e=f<=0?0:f-1;m(e,!0)},[f,m,c]),z=re(()=>{const e=t.length-1;if(c){const s=f+1;m(s,!0,D()?f===0:f===v);return}const r=f>=e?e:f+1;m(r,!0)},[t.length,c,f,m,v]);R(()=>{const e=r=>{r.key==="ArrowLeft"&&(D()?z():B()),r.key==="ArrowRight"&&(D()?B():z())};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[z,B]),We(()=>{m(c?X+1:X,!1)},[X,m,c,E]);const V=ye(()=>{const e=g.current,r=C?e.offsetWidth-C:e.offsetWidth-C+Q,s=Math.abs(e.scrollLeft)/r,n=Math.abs(Math.round(s)-s<1?Math.round(s):Math.ceil(s));if(a&&b(n),c){const u=r*(v+(K||d)/d),_=D()?-e.scrollLeft:e.scrollLeft;if(Math.ceil(Math.abs(_))>=Math.ceil(u)-5){e.style.scrollBehavior="auto",e.scrollLeft=D()?-e.offsetWidth+(Math.ceil(_)-Math.ceil(u)-C):e.offsetWidth+(Math.ceil(_)-Math.ceil(u)-C);return}if(Math.abs(_)===0){e.style.scrollBehavior="auto",e.scrollLeft=D()?-(u-e.offsetWidth+C):u-e.offsetWidth+C;return}}f!==n&&fe(n)},100);R(()=>{const e=g.current;return e==null||e.addEventListener("scroll",V),()=>{e==null||e.removeEventListener("scroll",V)}},[V]);const T=(e,r,s)=>M(pe,{className:P([["pdp-carousel__button",!e],[`pdp-carousel__button--${r}`,!e],[`pdp-carousel__button--${o}`,e]]),style:{"--height":`${ee}px`},variant:"tertiary","aria-label":r==="next"?oe:x,onClick:s,disabled:c?!1:r==="next"?f>=t.length-1:f<1,children:M(ke,{className:P([["pdp-carousel__button__icon",!e],[`pdp-carousel__button__icon--${r}`,!e],[`pdp-carousel__button__icon--${o}--${r}`,e]]),size:Se,source:Ae})}),ge=l&&t.length!=1&&T(a,"prev",B),_e=l&&t.length!=1&&T(a,"next",z),Pe=l&&t.length!=1&&T(!1,"prev",B),xe=l&&t.length!=1&&T(!1,"next",z);return U("div",{role:"region","aria-roledescription":Z,className:P(["pdp-carousel",["pdp-carousel--main-image-controls",S],["pdp-carousel--arrows",l&&!a],[`pdp-carousel--${o}`,a],ie]),style:{"--flex-carousel":o==="thumbnailsColumn"?"row-reverse":"column","--gap":a?"0":"var(--spacing-small)","--width":W},...O,children:[M("div",{ref:g,className:P(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${L}`,["pdp-carousel__wrapper--scrollbar",p],["pdp-carousel__wrapper--peak",y]]),style:{"--total-width":o==="thumbnailsColumn"?"81.6%":"100%","--height":o==="thumbnailsColumn"?"auto":ne,"--gap":w?`var(--spacing-${w})`:"0px","--per-page":d},tabIndex:0,children:t.map((e,r)=>{const s=e.length<d;return M("div",{role:"group","aria-roledescription":ce,"data-index":r,className:P(["pdp-carousel__slide",`pdp-carousel__slide--${L}`,["pdp-carousel__slide--active",f===r],["pdp-carousel__slide--orphan",s],["pdp-carousel__slide--hidden",E===0]]),style:{"--length":e.length},children:e},r)})}),!a&&U(be,{children:[ge,_e]}),a&&S&&U(be,{children:[Pe,xe]}),o&&t.length!=1&&U("div",{className:P([[`pdp-carousel__controls__container--${o}`,a],["pdp-carousel__controls__container--no-arrows",!l||S]]),style:{"--width":o==="thumbnailsRow"?`${E}px`:W,"--height":`${ee}px`,"--nr-thumbnails":se.length},children:[(a||Y)&&!S&&ge,M("div",{ref:h,className:P([[`pdp-carousel__controls__wrapper--${o}`,a],["pdp-carousel__controls__wrapper",a]]),children:M("div",{role:"group","aria-label":j,className:P(["pdp-carousel__controls",[`pdp-carousel__controls--${o}`,a]]),children:(c?t.slice(0,v):t).map((e,r)=>{const s=c?v:t.length,n=c?f-1===r:f===r;return a?U("label",{className:P(["pdp-carousel__thumbnail__container"]),ref:u=>{u&&(G.current[r]=u)},children:[M("input",{type:"radio",name:"carousel-thumbnails","aria-label":H.replace("{key}",String(r+1)).replace("{total}",String(s)),checked:n&&E!==0,onChange:()=>{m(c?r+1:r,!0)},...O,className:P(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",n&&E!==0]])}),M("span",{className:P(["pdp-carousel__thumbnail__span"]),children:se[r]})]},r):M("button",{"aria-label":H.replace("{key}",String(r+1)).replace("{total}",String(s)),onClick:()=>{m(c?r+1:r,!0)},className:P(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",n]])},r)})})}),(a||Y)&&!S&&_e]})]})};function Le(i,p=0){if(typeof i=="number")return i;const{small:y,medium:l,large:o}=i,c=[{breakpoint:1024,value:o},{breakpoint:786,value:l},{breakpoint:0,value:y}].find(({breakpoint:w})=>p>w);return c?c.value:y}function D(){return document.documentElement.dir==="rtl"}const qe=({centered:i,onClose:p,className:y,children:l,...o})=>{const S=q("PDP.Overlay.Close.label").label,c=A(null),w=re(()=>{p==null||p()},[p]);return R(()=>{const L=W=>{W.key==="Escape"&&w()};return document.addEventListener("keydown",L),()=>{document.removeEventListener("keydown",L)}},[w]),R(()=>{const L=c.current;L==null||L.focus();const W=document.scrollingElement,ne=W.style.overflow;return W.style.overflow="hidden",()=>{W.style.overflow=ne}},[]),U("div",{...o,className:P(["pdp-overlay",["pdp-overlay--centered",i],y]),ref:c,role:"dialog","aria-describedby":"overlay-content",tabindex:0,children:[M("div",{className:"pdp-overlay__content",id:"overlay-content",children:l}),M(pe,{"aria-label":S,variant:"tertiary",className:"pdp-overlay__close-button",onClick:w,icon:M(Ce,{})})]})},Oe=({children:i,scale:p=2,closeButton:y=!0})=>{var se;const[l,o]=$(!1),[S,c]=$("pdp-zoom"),[w,L]=$(!1),[W,ne]=$({x:0,y:0}),[X,ie]=$({x:0,y:0}),[k,J]=$({x:0,y:0}),Y=A(null),O=A(null),Z=A(null),ce=A("none"),x=A(null),oe=A(!1),j=A(null),H=re(t=>{const g=()=>{var T;let h;O.current&&Y.current?h=O.current:Y.current?(h=Y.current.getBoundingClientRect(),O.current=h):h=(T=t.currentTarget)==null?void 0:T.getBoundingClientRect();const a=(100-100/p)/2;let b=null;if("touches"in t)if(t.touches.length>0)b=t.touches[0],j.current={clientX:b.clientX,clientY:b.clientY};else if(t.type==="touchend"&&x.current)b={clientX:x.current.x,clientY:x.current.y};else if(j.current)b=j.current;else return;else if(t instanceof MouseEvent)b=t;else return;const m=(b.clientX-h.left)/h.width*100,B=(b.clientY-h.top)/h.height*100,z=(50-m)*(p-1)/p,V=(50-B)*(p-1)/p;J({x:Math.max(-a,Math.min(z,a))||0,y:Math.max(-a,Math.min(V,a))||0})};Z.current&&cancelAnimationFrame(Z.current),Z.current=requestAnimationFrame(g)},[p]);R(()=>{O.current=null},[l]);const d=t=>{!l||t.type!=="touchstart"||(ne({x:t.touches[0].clientX,y:t.touches[0].clientY}),ie({x:k.x,y:k.y}),L(!0))},ue=t=>{var T;if(!w||t.type!=="touchmove")return;const g=(T=t.currentTarget)==null?void 0:T.getBoundingClientRect(),h=(100-100/p)/2,a=t.touches[0].clientX-W.x,b=t.touches[0].clientY-W.y,m=a*100/(g.width*p),B=b*100/(g.height*p),z=X.x+m,V=X.y+B;J({x:Math.max(-h,Math.min(z,h))||0,y:Math.max(-h,Math.min(V,h))||0}),t.preventDefault()},v=t=>{if(y)x.current={x:t.touches[0].clientX,y:t.touches[0].clientY,time:Date.now()},j.current={clientX:t.touches[0].clientX,clientY:t.touches[0].clientY},oe.current=!1,l&&d(t);else{if(w)return;!l&&H(t),o(!l),t.preventDefault()}},C=t=>{if(t.touches.length!==0){if(j.current={clientX:t.touches[0].clientX,clientY:t.touches[0].clientY},y){if(!x.current)return;if(w){ue(t);return}const g=t.touches[0].clientX,h=t.touches[0].clientY,a=Math.abs(g-x.current.x),b=Math.abs(h-x.current.y);(a>10||b>10)&&(oe.current=!0)}l&&H(t)}},Q=t=>{if(y){if(!x.current)return;const g=Date.now()-x.current.time;!oe.current&&g<300&&!w&&(o(!0),H(t),t.preventDefault()),L(!1),x.current=null}else o(!1)},K=t=>{"touches"in t||w||(l?!y&&o(!1):(o(!0),H(t)),t.preventDefault())},f=t=>{"touches"in t||l&&H(t)},fe=t=>{if(!("touches"in t)){if(y){L(!1);return}o(!1)}},G=t=>{o(!1),t.stopPropagation()},E=l?`scale(${p}) translateX(${k.x}%) translateY(${k.y}%)`:"none",he=q("PDP.Zoom.Close.label").label,ee=I.only(i);R(()=>{const t=()=>{l&&(o(!1),J({x:0,y:0}),L(!1))},g=document.querySelector("#gallery");if(g)return g.addEventListener("click",t),()=>g.removeEventListener("click",t)},[l]);const de=De(ee,{...ee.props,draggable:!1,style:{...(se=ee.props)==null?void 0:se.style,"--transform":E}});return R(()=>{c(l?`pdp-zoom ${y?"pdp-zoom--no-effects":"pdp-zoom--zoomed"}`:"pdp-zoom")},[l,y]),R(()=>{if(ce.current===E)return;ce.current=E,requestAnimationFrame(()=>{if(!Y.current)return;Y.current.querySelectorAll("img").forEach(h=>{l&&E!=="none"?h.style.setProperty("transform",E,"important"):h.style.removeProperty("transform")})})},[E,l]),R(()=>()=>{Z.current&&cancelAnimationFrame(Z.current)},[]),U("figure",{ref:Y,className:S,onClick:K,onMouseMove:f,onMouseLeave:fe,onTouchStart:v,onTouchMove:C,onTouchEnd:Q,children:[de,y&&l&&M(pe,{"aria-label":he,variant:"tertiary",className:"pdp-zoom__close-button",icon:M(Ce,{}),onClick:G})]})};export{Fe as C,qe as O,Oe as Z};
 //# sourceMappingURL=Zoom.js.map