https://www.zoo.se/static/js/layouts-VariantDropdown.4c4691c6.chunk.js

1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[2763],{46557:(e,n,t)=>{t.d(n,{A:()=>a});var r=t(72176),i=t(94497),o=t.n(i),l=t(80812);const a=e=>(0,r.forwardRef)(((n,t)=>{let{height:i,trigger:a,...s}=n;const c=t||(0,r.useRef)(),d=(0,r.useRef)(null),u=(0,r.useRef)(null),p=(0,r.useCallback)((e=>{requestAnimationFrame((()=>{c.current&&(c.current.style.height=e,d.current=e)}))}),[c]),h=o()((()=>{p(u.current)}),250);return(0,r.useEffect)((()=>{u.current=i}),[i]),(0,r.useEffect)((()=>(window.addEventListener("resize",h,!1),()=>window.removeEventListener("resize",h,!1))),[]),(0,r.useEffect)((()=>{h()}),[a]),(0,r.useLayoutEffect)((()=>{if("auto"===i){const e=c.current.scrollHeight;parseInt(d.current,10)!==e&&p("".concat(e,"px"))}else d.current!==i&&p(i)})),(0,l.jsx)(e,{...s,ref:c,height:null===d.current&&(0===i||"0"===i||"0px"===i)&&"0px"})}))},46891:(e,n,t)=>{t.d(n,{A:()=>i});var r=t(72176);r.useRef;const i=(e,n)=>{const t=t=>{const r=t.target;e.current&&r&&(e.current.contains(r)||n())};(0,r.useEffect)((()=>(document.addEventListener("click",t),()=>{document.removeEventListener("click",t)})))}},62188:(e,n,t)=>{t.r(n),t.d(n,{default:()=>P});var r,i,o,l,a,s,c,d,u,p=t(22119),h=t(72176),x=t(46548),v=t(53661),g=t(46891),m=t(4602),f=t(52814),b=t(46557),A=t(36788),k=t(72407),j=t(26809),y=t(3087),_=t(42003),w=t(80812);const E=(0,A.A)("span")(r||(r=(0,p.A)([""]))),L=(0,A.A)("div")(i||(i=(0,p.A)(["\n    &[data-active='true'] {\n        & > div {\n            background-color: ",";\n        }\n    }\n"])),(e=>{let{theme:n}=e;return n.colors.lightGreen})),O=(0,A.A)("div")(o||(o=(0,p.A)(["\n    display: flex;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    transition: background-color ",",\n        border ",";\n    cursor: pointer;\n    border-radius: 8px;\n    border: 1px solid rgba(0, 0, 0, 0.3);\n\n    "," {\n        &:hover {\n            border: 1px solid ",";\n        }\n    }\n"])),(e=>{let{theme:n}=e;return n.transitions.primary}),(e=>{let{theme:n}=e;return n.transitions.primary}),(e=>{let{theme:n}=e;return n.media.hover}),(e=>{let{theme:n}=e;return n.colors.black})),S=(0,A.A)("div")(l||(l=(0,p.A)(["\n    display: flex;\n    width: 100%;\n"]))),D=(0,A.A)("div")(a||(a=(0,p.A)(["\n    display: flex;\n\n    // dumb hardcodes px values to make the design work\n    position: absolute;\n    right: 8px;\n    left: 8px;\n    top: -48px;\n\n    "," {\n        left: 112px;\n    }\n\n    &[data-type='relation'] {\n        right: unset;\n        width: calc(100% - 96px - clamp(100px, 15%, 240px) - 8px);\n    }\n\n    & > div:first-of-type {\n        &[data-margin='true'] {\n            margin-right: 8px;\n        }\n    }\n"])),(e=>{let{theme:n}=e;return n.above.mobileLg})),R=(0,A.A)("div")(s||(s=(0,p.A)(["\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 40px;\n    border-radius: 40px;\n    border: 1px solid ",";\n    padding: 9px 16px;\n    cursor: pointer;\n\n    &.relation {\n        &[data-active='true'] {\n            background-color: ",";\n            border: 1px solid ",";\n            color: ",";\n        }\n    }\n\n    "," {\n        &:hover {\n            opacity: 0.8;\n        }\n    }\n\n    .out-of-stock {\n        position: relative;\n        top: 7px;\n        &[data-active='true'] {\n            background-color: unset;\n        }\n    }\n"])),(e=>{let{theme:n}=e;return n.colors.black}),(e=>{let{theme:n}=e;return n.colors.lightGreen}),(e=>{let{theme:n}=e;return n.colors.darkGreen}),(e=>{let{theme:n}=e;return n.colors.darkGreen}),(e=>{let{theme:n}=e;return n.media.hover})),C=(0,A.A)("span")(c||(c=(0,p.A)(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    &[data-in-stock='false'] {\n        opacity: 0.5;\n        text-decoration: line-through;\n    }\n"]))),B=(0,A.A)("div")(d||(d=(0,p.A)(["\n    position: relative;\n    border-radius: 8px;\n    width: 100%;\n    margin-top: 8px;\n    padding: 0px 8px;\n    overflow: hidden;\n    background-color: ",";\n\n    & > div {\n        span {\n            display: flex;\n            align-items: center;\n        }\n\n        &:first-of-type {\n            padding-top: 8px;\n        }\n\n        &:last-child {\n            padding-bottom: 8px;\n        }\n\n        > div {\n            justify-content: space-between;\n            background-color: ",";\n            padding: 12px;\n            margin-bottom: 8px;\n        }\n    }\n\n    & >

1 div:last-child > div {\n        margin-bottom: 0;\n    }\n"])),(e=>{let{theme:n}=e;return n.colors.darkGreige}),(e=>{let{theme:n}=e;return n.colors.white})),G=(0,b.A)((0,A.A)("div")(u||(u=(0,p.A)(["\n    transition: all ",";\n"])),(e=>{let{theme:n}=e;return n.transitions.primary}))),P=e=>{var n,t;let{variants:r,t:i,selectedVariant:o,checkPossibleSelection:l,checkStockStatus:a,selectedParametrics:s,selectParametricValue:c,getVariantByParametricSelection:d,currentSelectedParametrics:u,type:p,...b}=e;const[A,P]=(0,h.useState)(null),V=(0,x.d4)((e=>{var n,t;let{application:r}=e;return null===(n=r.config.globalOptions)||void 0===n||null===(t=n.product_page)||void 0===t?void 0:t.variant_colors})),N=(0,h.useRef)(null),{red:H,darkGreen:U,black:z}=(0,v.DP)().colors,K=r.find((e=>e.code===A))||{},{id:q,index:F}=K,[I,T]=(0,h.useState)(d(u(s,q,null===K||void 0===K?void 0:K.value))),J=(null===I||void 0===I||null===(n=I.on_hand)||void 0===n?void 0:n.value)<1,M=Object.values(s).every((e=>!1!==e.value));(0,g.A)(N,(()=>{P(null)})),(0,h.useEffect)((()=>{m.A.subscribe(f.G7.PRODUCT_ADDED,(e=>{let{item:n}=e;null!==I&&void 0!==I&&I.id&&(null===n||void 0===n?void 0:n.product_id)===I.id&&Object.values(r).forEach(((e,n)=>c(n,null)))}))}),[]);return(0,w.jsxs)(S,{flexDirection:"column",ref:N,children:[(0,w.jsx)(D,{"data-type":p,children:Object.values(r).map(((e,n)=>{const{code:t}=e,o=A===t,l=M&&J&&0===n,a=Object.values(e.values).find((n=>n.value===e.selectedValue));let d;if(a&&t===j.cp){const e=(V||[]).find((e=>e.color.id===a.id));e&&(d=e.hex_code)}const u=!!s[n].value&&!o&&!l;return(0,w.jsxs)(R,{"data-active":u,"data-margin":Object.values(r).length>1,className:"".concat(t," ").concat(p),onChange:e=>c(n,e),...b,onClick:()=>{(e=>{A!==e.code?P(e.code):P(null)})(e)},children:[l&&(0,w.jsx)(_.A,{color:"red",position:"absolute",top:"3px",textStyles:"Buenos Aires/10-120 Regular",children:i("product.variant_out_of_stock")}),d&&!o&&(0,w.jsx)(k.A,{className:l?"out-of-stock":"",height:"16px",width:"16px",mr:"8px",background:d,border:"unset"}),(0,w.jsx)(_.A,{className:l?"out-of-stock":"",textStyles:"Buenos Aires/14-120 Regular",children:e.selectedValue&&!o&&a?null===a||void 0===a?void 0:a.label:i("pdp.choose",{variant:e.name})}),(0,w.jsx)(y.A,{isCross:!0,marginLeft:"auto",width:"14px",height:"14px",color:u&&"relation"===p?U:z,isOpen:o},n)]},t)}))}),(0,w.jsx)(G,{height:A?"auto":"0",children:(0,w.jsx)(B,{trigger:A,children:null===K||void 0===K||null===(t=K.values)||void 0===t?void 0:t.map(((e,n)=>{const{value:t}=e,o=l(F,q,t),p=a(F,q,t),h=a(F,q,t,s.map((e=>({...e,value:!1})))),x=0===F&&Object.keys(r).length>1?h:p,v=K.selectedValue===e.value;let g;if(K.code===j.cp){const n=(V||[]).find((n=>n.color.id===e.id));n&&(g=n.hex_code)}return o?(0,w.jsx)(L,{"data-disabled":!x,"data-active":K.selectedValue===t,onClick:()=>{T(d(u(s,q,t))),P(null),!v&&c(F,t)},children:(0,w.jsxs)(O,{children:[(0,w.jsxs)(E,{children:[g&&(0,w.jsx)(k.A,{height:"20px",width:"20px",mr:"16px",background:g,border:"unset"}),(0,w.jsx)(C,{"data-in-stock":x,children:(0,w.jsx)(_.A,{as:"span",textStyles:"Buenos Aires/14-120 Regular",children:t})})]}),!x&&(0,w.jsxs)(E,{children:[(0,w.jsx)(k.A,{height:"12px",width:"12px",mr:"8px",background:H,border:"unset"}),(0,w.jsx)(_.A,{as:"span",textStyles:"Buenos Aires/14-120 Regular",children:i("stock.out_of_stock")})]})]})},n):null}))})})]})}}}]);
2//# sourceMappingURL=layouts-VariantDropdown.4c4691c6.chunk.js.map