{"version":3,"sources":["webpack:///./Scripts/Components/CustomAccordion.js","webpack:///./Scripts/Components/ProductAccordion.js","webpack:///./Scripts/Hooks/UseToggleExpand.js"],"names":["CustomAccordion","header","content","children","icon","className","elementRef","useRef","expanded","expand","recalculateHeight","useToggleExpand","useEffect","handleResize","window","addEventListener","removeEventListener","clearTimeout","resizeTimer","Fragment","onClick","ref","items","map","x","index","key","title","xmlns","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","fieldGroups","fieldGroup","fieldIndex","type","name","isRichText","dangerouslySetInnerHTML","__html","value","href","url","download","src","alt","initialState","externalRef","setIsExpanded","useState","prevExpanded","current","element","style","Array","prototype","reduce","call","childNodes","acc","child","offsetHeight","closeExpand"],"mappings":"2HAGO,MAEMA,EAAkB,EAAGC,SAAQC,UAASC,WAAUC,OAAMC,gBAC/D,MAAMC,GAAaC,YAAO,OAEpB,SAAEC,EAAF,OAAYC,EAAZ,kBAAoBC,IAAsBC,QAAgB,GAsBhE,OApBAC,gBAAU,KAGN,MAAMC,EAAe,KACdL,GACCE,EAAkBJ,IAQ1B,OAHAQ,OAAOC,iBAAiB,SAAUF,GAG3B,KACHC,OAAOE,oBAAoB,SAAUH,GACrCI,aAdAC,cAgBL,CAACV,IAIA,gBAAC,EAAAW,SAAD,KACI,0BAAQd,UAAU,2BAA2Be,QAAS,IAAMX,EAAOH,IAC9DL,EAED,wBAAMI,UAAW,2BAA6BG,EAAW,iCAAmC,KACvFJ,GAAQA,IAIjB,uBAAKC,UAAU,4BAA4BgB,IAAKf,GAC3CJ,M,4FCrCjB,MAwEA,EAxEyB,EAAGoB,WAEpB,uBAAKjB,UAAU,uCAEPiB,EAAMC,KAAI,CAACC,EAAGC,IACF,2BAASpB,UAAU,iCAAiCqB,IAAKD,GACzD,gBAAC,IAAD,CACIC,IAAKD,EACLxB,OAAQ,sBACJI,UAAU,mFAAmFmB,EAAEG,OACnGvB,KACI,uBAAKwB,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KACrDC,QAAQ,YAAYC,KAAK,QAC1B,wBAAMC,EAAE,mCAAmCC,OAAO,UAAUC,YAAY,IAClEC,cAAc,QAAQC,eAAe,WAGnDnC,QACI,uBAAKG,UAAU,qCACX,yBAAOA,UAAU,wCACb,6BAEImB,EAAEc,YAAYf,KAAI,CAACgB,EAAYC,IACnB,sBAAId,IAAKc,GAEE,IAAXhB,EAAEiB,MAAc,gCACZ,0BACI,qBAAGpC,UAAU,qCAAqCkC,EAAWG,OAEjE,0BACKH,EAAWI,WACR,uBAAKtC,UAAU,iCACVuC,wBAAyB,CAAEC,OAAQN,EAAWO,SAEnD,qBAAGzC,UAAU,kCAAkCkC,EAAWO,SAM3D,IAAXtB,EAAEiB,MAAc,gCACZ,0BACI,qBAAGM,KAAMR,EAAWS,IAAKC,UAAQ,EAAC5C,UAAU,uEAAuEkC,EAAWG,QAK3H,IAAXlB,EAAEiB,MAAc,gCACZ,0BACI,qBAAGM,KAAMR,EAAWS,IAAKC,UAAQ,EAAC5C,UAAU,uEACxC,uBAAK6C,IAAKX,EAAWS,IAAKG,IAAI,qB,2DCpDvF,SAASxC,EAAgByC,GAAe,EAAOC,EAAc,MACxE,MAAO7C,EAAU8C,IAAiBC,cAASH,GAuC3C,MAAO,CAAE5C,WAAUC,OAtCHY,IAGZ,GAFAiC,GAAcE,IAAiBA,IAE3BnC,EAAIoC,QAAS,CACb,MAAMC,EAAUrC,EAAIoC,QACfC,EAAQC,MAAM7B,QAAmC,QAAzB4B,EAAQC,MAAM7B,OAOvC4B,EAAQC,MAAM7B,OAAS,MANvB4B,EAAQC,MAAM7B,OAAS8B,MAAMC,UAAUC,OAAOC,KAC1CL,EAAQM,YACR,CAACC,EAAKC,IAAUD,GAAOC,EAAMC,cAAgB,IAC7C,GACA,OA4BWC,YARN/C,IACjB,GAAIA,EAAIoC,QAAS,CACGpC,EAAIoC,QAEZE,MAAM7B,OAAS,QAISwB,gBAAe5C,kBArB5BW,IACvB,GAAIA,EAAIoC,QAAS,CACb,MAAMC,EAAUrC,EAAIoC,SAChBC,EAAQC,MAAM7B,QAAmC,QAAzB4B,EAAQC,MAAM7B,UACtC4B,EAAQC,MAAM7B,OAAS8B,MAAMC,UAAUC,OAAOC,KAC1CL,EAAQM,YACR,CAACC,EAAKC,IAAUD,GAAOC,EAAMC,cAAgB,IAC7C,GACA","file":"19.b678bedd58321771a6de.js","sourcesContent":["import React, { useState, useMemo, Fragment, useRef, useLayoutEffect, useEffect } from 'react';\nimport useToggleExpand from \"../Hooks/UseToggleExpand\";\n\nexport const AccordionPanel = (props) => props;\n\nexport const CustomAccordion = ({ header, content, children, icon, className }) => {\n    const elementRef = useRef(null);\n\n    const { expanded, expand, recalculateHeight } = useToggleExpand(false);\n\n    useEffect(() => {\n        let resizeTimer;\n\n        const handleResize = () => {\n            if(expanded){\n                recalculateHeight(elementRef);\n            }\n        };\n\n        // Add event listener for window resize start\n        window.addEventListener('resize', handleResize);\n\n        // Clean up the event listener and timer on component unmount\n        return () => {\n            window.removeEventListener('resize', handleResize);\n            clearTimeout(resizeTimer);\n        };\n    }, [expanded]);\n\n\n    return (\n        <Fragment>\n            <button className=\"custom-accordion__button\" onClick={() => expand(elementRef)}>\n                {header}\n\n                <span className={\"custom-accordion__icon \" + (expanded ? \"custom-accordion__icon--active\" : \"\")}>\n                    {icon && icon}\n                </span>\n            </button>\n\n            <div className=\"custom-accordion__content\" ref={elementRef}>\n                {content}\n            </div>\n        </Fragment>\n    )\n};\n","import React from 'react';\nimport LanguageSelectorFooter from \"./LanguageSelectorFooter\";\nimport { CustomAccordion } from \"./CustomAccordion\";\n\nconst ProductAccordion = ({ items }) => {\n    return (\n        <div className=\"product-detail__accordion-container\">\n            {\n                items.map((x, index) => {\n                    return (<section className=\"product-detail__accordion-list\" key={index}>\n                            <CustomAccordion\n                                key={index}\n                                header={<h2\n                                    className=\"product-detail__accordion-title accordion-toggle product-detail__accordion-item\">{x.title}</h2>}\n                                icon={\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"21\"\n                                         viewBox=\"0 0 20 21\" fill=\"none\">\n                                        <path d=\"M5 8.06836L10 13.0684L15 8.06836\" stroke=\"#373D41\" strokeWidth=\"2\"\n                                              strokeLinecap=\"round\" strokeLinejoin=\"round\"/>\n                                    </svg>\n                                }\n                                content={\n                                    <div className=\"product-detail__accordion-content\">\n                                        <table className=\"product-detail__specifications-table\">\n                                            <tbody>\n                                            {\n                                                x.fieldGroups.map((fieldGroup, fieldIndex) => {\n                                                    return (<tr key={fieldIndex}>\n                                                        {\n                                                            x.type === 0 && <>\n                                                                <td>\n                                                                    <p className=\"product-detail__accordion-heading\">{fieldGroup.name}</p>\n                                                                </td>\n                                                                <td>\n                                                                    {fieldGroup.isRichText ?\n                                                                        <div className=\"product-detail__accordion-text\"\n                                                                             dangerouslySetInnerHTML={{ __html: fieldGroup.value }}\n                                                                        ></div> :\n                                                                        <p className=\"product-detail__accordion-text\">{fieldGroup.value}</p>\n                                                                    }\n                                                                </td>\n                                                            </>\n                                                        }\n                                                        {\n                                                            x.type === 1 && <>\n                                                                <td>\n                                                                    <a href={fieldGroup.url} download className=\"product-detail__accordion-text product-detail__accordion-text--link\">{fieldGroup.name}</a>\n                                                                </td>\n                                                            </>\n                                                        }\n                                                        {\n                                                            x.type === 2 && <>\n                                                                <td>\n                                                                    <a href={fieldGroup.url} download className=\"product-detail__accordion-text product-detail__accordion-text--link\">\n                                                                        <img src={fieldGroup.url} alt=\"\"/>\n                                                                    </a>\n                                                                </td>\n                                                            </>\n                                                        }\n                                                    </tr>);\n                                                })\n                                            }\n                                            </tbody>\n                                        </table>\n                                    </div>\n                                }\n                            >\n                            </CustomAccordion>\n                        </section>\n                    )\n                })\n            }\n        </div>\n    );\n};\n\nexport default ProductAccordion;\n","import React, { useState } from \"react\";\n\nexport default function useToggleExpand(initialState = false, externalRef = null) {\n    const [expanded, setIsExpanded] = useState(initialState);\n    const expand = (ref) => {\n        setIsExpanded(prevExpanded => !prevExpanded);\n\n        if (ref.current) {\n            const element = ref.current;\n            if (!element.style.height || element.style.height === '0px') {\n                element.style.height = Array.prototype.reduce.call(\n                    element.childNodes,\n                    (acc, child) => acc + (child.offsetHeight || 0),\n                    0\n                ) + 'px';\n            } else {\n                element.style.height = '0px';\n            }\n        }\n    };\n\n    const recalculateHeight = (ref) => {\n        if (ref.current) {\n            const element = ref.current;\n            if (element.style.height || element.style.height !== '0px') {\n                element.style.height = Array.prototype.reduce.call(\n                    element.childNodes,\n                    (acc, child) => acc + (child.offsetHeight || 0),\n                    0\n                ) + 'px';\n            }\n        }\n    }\n\n    const closeExpand = (ref) => {\n        if (ref.current) {\n            const element = ref.current;\n\n            element.style.height = '0px';\n        }\n    };\n\n    return { expanded, expand, closeExpand, setIsExpanded, recalculateHeight };\n}\n"],"sourceRoot":""}