{"version":3,"file":"static/chunks/9985.c354d17ca0d89702.js","mappings":"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","sources":["webpack://_N_E/./components/ProductsOverview/desktop/CollapsibleProductsOverview.js","webpack://_N_E/./node_modules/@babel/runtime/helpers/esm/extends.js","webpack://_N_E/./node_modules/dom-helpers/esm/removeClass.js","webpack://_N_E/./node_modules/react-transition-group/esm/CSSTransition.js","webpack://_N_E/./node_modules/dom-helpers/esm/addClass.js","webpack://_N_E/./node_modules/dom-helpers/esm/hasClass.js","webpack://_N_E/<anon>"],"sourcesContent":["import React, { useCallback, useState, useRef, useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport dynamic from 'next/dynamic';\nconst ProductOverview = dynamic(()=>import('../ProductOverview'))\nimport { Waypoint } from 'react-waypoint';\nimport C from 'classnames';\nimport { CSSTransition } from 'react-transition-group';\nimport { chunk, minimum} from '../../../adapters/helpers/functions';\nconst SeeMoreButton = dynamic(()=>import('../../SeeMoreButton/SeeMoreButton'))\nimport {useIsomorphicLayoutEffect} from '../../../adapters/helpers/Hooks';\n\nfunction makeRows(products, itemsPerLine) {\n    return chunk(products, itemsPerLine)\n    .map(chunk => {\n        const aspectRatios = chunk\n        .map((item) =>{ \n            if(item?.fields?.mainAsset?.fields){\n                item.fields.mainAsset.fields.isPreload = false\n            }\n            item?.fields?.mainAsset?.fields?.imageRendition?.fields?.aspectRatio});\n\n\n        const minAspectRatio = minimum(aspectRatios)\n\n        return {aspectRatio: minAspectRatio, items: chunk};\n    }).map(row => {\n        // Temporary while aspect Ratios are too extreme\n        const aspectRatio = row.aspectRatio && Math.max(row.aspectRatio, 0.4);\n        return {...row, aspectRatio};\n    });\n}\n\nexport default function CollapsibleProductsOverview({\n    products,\n    seeMoreProductsText,\n    seeLessProductsText,\n    whiteText,\n    itemsPerRow,\n    onClickCallback,\n    productOverview,\n    isRecentlyViewed,\n    removeLazyLoad\n}) {\n\n    const [isViewedMore, setIsViewedMore] = useState(false);\n    const [navHeight, setNavHeight] = useState(0);\n    const [isLoaded, setIsLoaded] = useState(false);\n    const collapsibleRef = useRef(null);\n    const wrapperRef = useRef(null);\n    const [isShown, setIsShown] = useState(false);\n\n    const onViewMore = useCallback(\n        () => {\n            setIsViewedMore(prevState => !prevState);\n        },\n        [],\n    );\n\n    const handleWaypoint = useCallback(() => {\n        setIsShown(true);\n    }, []);\n\n    const calculateHeight = useCallback(\n        () => {\n            if (collapsibleRef.current) {\n                setNavHeight(collapsibleRef.current.scrollHeight);\n            }\n        },\n        [],\n    );\n\n    useIsomorphicLayoutEffect(() => {\n        if (wrapperRef?.current && isLoaded && !isRecentlyViewed) {\n            const seeMoreWrapperClassName = 'ob-collapsible-products-overview-see-more-wrapper';\n            const collapsibleWrapperClassName = 'ob-collapsible-products-overview-collapsible';\n            const imageWrapperSelector = '.ob-products-overview__overview-image-wrapper-1';\n            const productsOverviewRows = Array.from(wrapperRef?.current?.children);\n            let imageHeight = 0;\n            // The timeout is to give time for the images to load\n            let timeout = null;\n            timeout = window.setTimeout(() => {\n                productsOverviewRows.forEach(productsOverviewRow => {\n                    if (!productsOverviewRow.classList.contains(seeMoreWrapperClassName)) {\n                        const productsOverviewList = Array.from(productsOverviewRow.children);\n\n                        productsOverviewList.forEach((productsOverviewListItem => {\n                            if (productsOverviewListItem.classList.contains(collapsibleWrapperClassName)) {\n                                const innerProductsOverviewList = Array.from(productsOverviewListItem.children);\n                                let innerImageHeight = 0;\n\n                                innerProductsOverviewList.forEach(innerProductsOverviewListItem => {\n                                    const imageWrapper = innerProductsOverviewListItem.querySelector(imageWrapperSelector);\n                                    const currentImageHeight = imageWrapper.clientHeight;\n                                    innerImageHeight = currentImageHeight > innerImageHeight ? currentImageHeight : innerImageHeight;\n                                });\n\n                                // we have to do another loop to make sure every item gets the proper height\n                                innerProductsOverviewList.forEach(innerProductsOverviewListItem => {\n                                    const imageWrapper = innerProductsOverviewListItem.querySelector(imageWrapperSelector);\n                                    imageWrapper.style.height = `${innerImageHeight}px`;\n                                });\n                            }\n\n                            const imageWrapper = productsOverviewListItem.querySelector(imageWrapperSelector);\n                            const currentImageHeight = imageWrapper.clientHeight;\n                            imageHeight = currentImageHeight > imageHeight ? currentImageHeight : imageHeight;\n                        }));\n\n                        // we have to do another loop to make sure every item gets the proper height\n                        productsOverviewList.forEach(productsOverviewListItem => {\n                            const imageWrapper = productsOverviewListItem.querySelector(imageWrapperSelector);\n                            imageWrapper.style.height = `${imageHeight}px`;\n                        });\n                    }\n                });\n            }, 500);\n\n            return () => {\n                window.clearTimeout(timeout)\n            }\n        }\n    },[isLoaded, isViewedMore]);\n\n    const fullScreenWidth = useMemo(() => `${(100 / itemsPerRow).toFixed(2)}%`, [itemsPerRow]);\n    const rows = useMemo(() => makeRows(products, itemsPerRow), [products, itemsPerRow]);\n    const firstRow = useMemo(() => rows.length > 0 && rows[0], [rows]);\n    const remainingRows = useMemo(() => rows.length > 1 ? rows.slice(1) : undefined, [rows]);\n\n    const Row = useCallback(({row, isShown, isAnimated = false}) => (\n            <>\n                {row.items.map((item, i) => (\n                    <div key={i} style={{width: fullScreenWidth}}\n                        className=\"ob-collapsible-products-overview-product-wrapper\">\n                            <ProductOverview product={item}\n                                whiteText={whiteText}\n                                aspectRatio={row.aspectRatio}\n                                index={i}\n                                isShown={isShown}\n                                isRecentlyViewed={isRecentlyViewed}\n                                isAnimated={isAnimated}\n                                removeLazyLoad={removeLazyLoad}\n                                onClickCallback={onClickCallback}\n                                productOverview={productOverview}/>\n                    </div>\n                ))}\n            </>\n        ), [fullScreenWidth, whiteText]);\n\n    return (\n        <CSSTransition in={isViewedMore} timeout={800} onEntering={calculateHeight} onExit={calculateHeight}>\n            <div ref={wrapperRef} className={C('ob-collapsible-products-overview')} onLoad={() => setIsLoaded(true)}>\n\n                {/* Arbitrary numbers */}\n                {!!firstRow && <Waypoint onEnter={handleWaypoint} topOffset={'500px'} bottomOffset={'300px'}>\n                    <div className=\"ob-collapsible-products-overview-first-line\">\n                        <Row row={firstRow} isShown={isShown} isAnimated />\n                    </div>\n                </Waypoint>}\n\n                {!!remainingRows &&\n                <div className=\"ob-collapsible-products-overview-collapsible-wrapper\" style={{ height: navHeight }}>\n                    <div className=\"ob-collapsible-products-overview-collapsible\" ref={collapsibleRef}>\n                        {remainingRows.map((row, i) => (\n                            <Row key={i}\n                                isShown\n                                row={row}\n                                isAnimated />\n                        ))}\n                    </div>\n                </div>}\n                {!!remainingRows && !!seeMoreProductsText &&\n                <div className=\"ob-collapsible-products-overview-see-more-wrapper\">\n                    <SeeMoreButton whiteText={whiteText}\n                        onClick={onViewMore}\n                        isOpen={isViewedMore}\n                        seeMoreText={seeMoreProductsText}\n                        seeLessText={seeLessProductsText}/>\n                </div>}\n            </div>\n        </CSSTransition>\n    )\n}\n\nCollapsibleProductsOverview.defaultProps = {\n    products: [],\n}\n\nCollapsibleProductsOverview.propTypes = {\n    products: PropTypes.array,\n    seeMoreProductsText: PropTypes.string,\n    seeLessProductsText: PropTypes.string,\n    whiteText: PropTypes.bool,\n    itemsPerRow: PropTypes.number.isRequired,\n    productOverview: PropTypes.any,\n    removeLazyLoad: PropTypes.bool,\n    onClickCallback: PropTypes.func,\n    isRecentlyViewed: PropTypes.bool\n}\n","function _extends() {\n  return _extends = Object.assign ? Object.assign.bind() : function (n) {\n    for (var e = 1; e < arguments.length; e++) {\n      var t = arguments[e];\n      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);\n    }\n    return n;\n  }, _extends.apply(null, arguments);\n}\nexport { _extends as default };","function replaceClassName(origClass, classToRemove) {\n  return origClass.replace(new RegExp(\"(^|\\\\s)\" + classToRemove + \"(?:\\\\s|$)\", 'g'), '$1').replace(/\\s+/g, ' ').replace(/^\\s*|\\s*$/g, '');\n}\n/**\n * Removes a CSS class from a given element.\n * \n * @param element the element\n * @param className the CSS class name\n */\n\n\nexport default function removeClass(element, className) {\n  if (element.classList) {\n    element.classList.remove(className);\n  } else if (typeof element.className === 'string') {\n    element.className = replaceClassName(element.className, className);\n  } else {\n    element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));\n  }\n}","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport addOneClass from 'dom-helpers/addClass';\nimport removeOneClass from 'dom-helpers/removeClass';\nimport React from 'react';\nimport Transition from './Transition';\nimport { classNamesShape } from './utils/PropTypes';\n\nvar _addClass = function addClass(node, classes) {\n  return node && classes && classes.split(' ').forEach(function (c) {\n    return addOneClass(node, c);\n  });\n};\n\nvar removeClass = function removeClass(node, classes) {\n  return node && classes && classes.split(' ').forEach(function (c) {\n    return removeOneClass(node, c);\n  });\n};\n/**\n * A transition component inspired by the excellent\n * [ng-animate](http://www.nganimate.org/) library, you should use it if you're\n * using CSS transitions or animations. It's built upon the\n * [`Transition`](https://reactcommunity.org/react-transition-group/transition)\n * component, so it inherits all of its props.\n *\n * `CSSTransition` applies a pair of class names during the `appear`, `enter`,\n * and `exit` states of the transition. The first class is applied and then a\n * second `*-active` class in order to activate the CSS transition. After the\n * transition, matching `*-done` class names are applied to persist the\n * transition state.\n *\n * ```jsx\n * function App() {\n *   const [inProp, setInProp] = useState(false);\n *   return (\n *     <div>\n *       <CSSTransition in={inProp} timeout={200} classNames=\"my-node\">\n *         <div>\n *           {\"I'll receive my-node-* classes\"}\n *         </div>\n *       </CSSTransition>\n *       <button type=\"button\" onClick={() => setInProp(true)}>\n *         Click to Enter\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n *\n * When the `in` prop is set to `true`, the child component will first receive\n * the class `example-enter`, then the `example-enter-active` will be added in\n * the next tick. `CSSTransition` [forces a\n * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * between before adding the `example-enter-active`. This is an important trick\n * because it allows us to transition between `example-enter` and\n * `example-enter-active` even though they were added immediately one after\n * another. Most notably, this is what makes it possible for us to animate\n * _appearance_.\n *\n * ```css\n * .my-node-enter {\n *   opacity: 0;\n * }\n * .my-node-enter-active {\n *   opacity: 1;\n *   transition: opacity 200ms;\n * }\n * .my-node-exit {\n *   opacity: 1;\n * }\n * .my-node-exit-active {\n *   opacity: 0;\n *   transition: opacity 200ms;\n * }\n * ```\n *\n * `*-active` classes represent which styles you want to animate **to**.\n *\n * **Note**: If you're using the\n * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)\n * prop, make sure to define styles for `.appear-*` classes as well.\n */\n\n\nvar CSSTransition =\n/*#__PURE__*/\nfunction (_React$Component) {\n  _inheritsLoose(CSSTransition, _React$Component);\n\n  function CSSTransition() {\n    var _this;\n\n    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n      args[_key] = arguments[_key];\n    }\n\n    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n    _this.appliedClasses = {\n      appear: {},\n      enter: {},\n      exit: {}\n    };\n\n    _this.onEnter = function (node, appearing) {\n      _this.removeClasses(node, 'exit');\n\n      _this.addClass(node, appearing ? 'appear' : 'enter', 'base');\n\n      if (_this.props.onEnter) {\n        _this.props.onEnter(node, appearing);\n      }\n    };\n\n    _this.onEntering = function (node, appearing) {\n      var type = appearing ? 'appear' : 'enter';\n\n      _this.addClass(node, type, 'active');\n\n      if (_this.props.onEntering) {\n        _this.props.onEntering(node, appearing);\n      }\n    };\n\n    _this.onEntered = function (node, appearing) {\n      var type = appearing ? 'appear' : 'enter';\n\n      _this.removeClasses(node, type);\n\n      _this.addClass(node, type, 'done');\n\n      if (_this.props.onEntered) {\n        _this.props.onEntered(node, appearing);\n      }\n    };\n\n    _this.onExit = function (node) {\n      _this.removeClasses(node, 'appear');\n\n      _this.removeClasses(node, 'enter');\n\n      _this.addClass(node, 'exit', 'base');\n\n      if (_this.props.onExit) {\n        _this.props.onExit(node);\n      }\n    };\n\n    _this.onExiting = function (node) {\n      _this.addClass(node, 'exit', 'active');\n\n      if (_this.props.onExiting) {\n        _this.props.onExiting(node);\n      }\n    };\n\n    _this.onExited = function (node) {\n      _this.removeClasses(node, 'exit');\n\n      _this.addClass(node, 'exit', 'done');\n\n      if (_this.props.onExited) {\n        _this.props.onExited(node);\n      }\n    };\n\n    _this.getClassNames = function (type) {\n      var classNames = _this.props.classNames;\n      var isStringClassNames = typeof classNames === 'string';\n      var prefix = isStringClassNames && classNames ? classNames + \"-\" : '';\n      var baseClassName = isStringClassNames ? \"\" + prefix + type : classNames[type];\n      var activeClassName = isStringClassNames ? baseClassName + \"-active\" : classNames[type + \"Active\"];\n      var doneClassName = isStringClassNames ? baseClassName + \"-done\" : classNames[type + \"Done\"];\n      return {\n        baseClassName: baseClassName,\n        activeClassName: activeClassName,\n        doneClassName: doneClassName\n      };\n    };\n\n    return _this;\n  }\n\n  var _proto = CSSTransition.prototype;\n\n  _proto.addClass = function addClass(node, type, phase) {\n    var className = this.getClassNames(type)[phase + \"ClassName\"];\n\n    if (type === 'appear' && phase === 'done') {\n      className += \" \" + this.getClassNames('enter').doneClassName;\n    } // This is for to force a repaint,\n    // which is necessary in order to transition styles when adding a class name.\n\n\n    if (phase === 'active') {\n      /* eslint-disable no-unused-expressions */\n      node && node.scrollTop;\n    }\n\n    this.appliedClasses[type][phase] = className;\n\n    _addClass(node, className);\n  };\n\n  _proto.removeClasses = function removeClasses(node, type) {\n    var _this$appliedClasses$ = this.appliedClasses[type],\n        baseClassName = _this$appliedClasses$.base,\n        activeClassName = _this$appliedClasses$.active,\n        doneClassName = _this$appliedClasses$.done;\n    this.appliedClasses[type] = {};\n\n    if (baseClassName) {\n      removeClass(node, baseClassName);\n    }\n\n    if (activeClassName) {\n      removeClass(node, activeClassName);\n    }\n\n    if (doneClassName) {\n      removeClass(node, doneClassName);\n    }\n  };\n\n  _proto.render = function render() {\n    var _this$props = this.props,\n        _ = _this$props.classNames,\n        props = _objectWithoutPropertiesLoose(_this$props, [\"classNames\"]);\n\n    return React.createElement(Transition, _extends({}, props, {\n      onEnter: this.onEnter,\n      onEntered: this.onEntered,\n      onEntering: this.onEntering,\n      onExit: this.onExit,\n      onExiting: this.onExiting,\n      onExited: this.onExited\n    }));\n  };\n\n  return CSSTransition;\n}(React.Component);\n\nCSSTransition.defaultProps = {\n  classNames: ''\n};\nCSSTransition.propTypes = process.env.NODE_ENV !== \"production\" ? _extends({}, Transition.propTypes, {\n  /**\n   * The animation classNames applied to the component as it appears, enters,\n   * exits or has finished the transition. A single name can be provided and it\n   * will be suffixed for each stage: e.g.\n   *\n   * `classNames=\"fade\"` applies `fade-appear`, `fade-appear-active`,\n   * `fade-appear-done`, `fade-enter`, `fade-enter-active`, `fade-enter-done`,\n   * `fade-exit`, `fade-exit-active`, and `fade-exit-done`.\n   *\n   * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.\n   * This allows you to define different behavior for when appearing is done and\n   * when regular entering is done, using selectors like\n   * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply an\n   * epic entrance animation when element first appears in the DOM using\n   * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can\n   * simply use `fade-enter-done` for defining both cases.\n   *\n   * Each individual classNames can also be specified independently like:\n   *\n   * ```js\n   * classNames={{\n   *  appear: 'my-appear',\n   *  appearActive: 'my-active-appear',\n   *  appearDone: 'my-done-appear',\n   *  enter: 'my-enter',\n   *  enterActive: 'my-active-enter',\n   *  enterDone: 'my-done-enter',\n   *  exit: 'my-exit',\n   *  exitActive: 'my-active-exit',\n   *  exitDone: 'my-done-exit',\n   * }}\n   * ```\n   *\n   * If you want to set these classes using CSS Modules:\n   *\n   * ```js\n   * import styles from './styles.css';\n   * ```\n   *\n   * you might want to use camelCase in your CSS file, that way could simply\n   * spread them instead of listing them one by one:\n   *\n   * ```js\n   * classNames={{ ...styles }}\n   * ```\n   *\n   * @type {string | {\n   *  appear?: string,\n   *  appearActive?: string,\n   *  appearDone?: string,\n   *  enter?: string,\n   *  enterActive?: string,\n   *  enterDone?: string,\n   *  exit?: string,\n   *  exitActive?: string,\n   *  exitDone?: string,\n   * }}\n   */\n  classNames: classNamesShape,\n\n  /**\n   * A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is\n   * applied.\n   *\n   * @type Function(node: HtmlElement, isAppearing: bool)\n   */\n  onEnter: PropTypes.func,\n\n  /**\n   * A `<Transition>` callback fired immediately after the 'enter-active' or\n   * 'appear-active' class is applied.\n   *\n   * @type Function(node: HtmlElement, isAppearing: bool)\n   */\n  onEntering: PropTypes.func,\n\n  /**\n   * A `<Transition>` callback fired immediately after the 'enter' or\n   * 'appear' classes are **removed** and the `done` class is added to the DOM node.\n   *\n   * @type Function(node: HtmlElement, isAppearing: bool)\n   */\n  onEntered: PropTypes.func,\n\n  /**\n   * A `<Transition>` callback fired immediately after the 'exit' class is\n   * applied.\n   *\n   * @type Function(node: HtmlElement)\n   */\n  onExit: PropTypes.func,\n\n  /**\n   * A `<Transition>` callback fired immediately after the 'exit-active' is applied.\n   *\n   * @type Function(node: HtmlElement)\n   */\n  onExiting: PropTypes.func,\n\n  /**\n   * A `<Transition>` callback fired immediately after the 'exit' classes\n   * are **removed** and the `exit-done` class is added to the DOM node.\n   *\n   * @type Function(node: HtmlElement)\n   */\n  onExited: PropTypes.func\n}) : {};\nexport default CSSTransition;","import hasClass from './hasClass';\n/**\n * Adds a CSS class to a given element.\n * \n * @param element the element\n * @param className the CSS class name\n */\n\nexport default function addClass(element, className) {\n  if (element.classList) element.classList.add(className);else if (!hasClass(element, className)) if (typeof element.className === 'string') element.className = element.className + \" \" + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + \" \" + className);\n}","/**\n * Checks if a given element has a CSS class.\n * \n * @param element the element\n * @param className the CSS class name\n */\nexport default function hasClass(element, className) {\n  if (element.classList) return !!className && element.classList.contains(className);\n  return (\" \" + (element.className.baseVal || element.className) + \" \").indexOf(\" \" + className + \" \") !== -1;\n}","\"use strict\";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9985],{39985:function(e,t,n){n.r(t),n.d(t,{default:function(){return w}});var s=n(930),r=n.n(s),a=n(67294),o=n(5152),i=n.n(o),c=n(83824),l=n(94184),u=n.n(l),p=n(68665),d=n(61986),f=n(71357),v=n(85893);function m(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,s)}return n}function h(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?m(Object(n),!0).forEach((function(t){r()(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):m(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var b=i()((function(){return n.e(4658).then(n.bind(n,14658))}),{loadableGenerated:{webpack:function(){return[14658]}}}),x=i()((function(){return n.e(7363).then(n.bind(n,37363))}),{loadableGenerated:{webpack:function(){return[37363]}}});function w(e){var t=e.products,n=e.seeMoreProductsText,s=e.seeLessProductsText,r=e.whiteText,o=e.itemsPerRow,i=e.onClickCallback,l=e.productOverview,m=e.isRecentlyViewed,w=e.removeLazyLoad,E=(0,a.useState)(!1),g=E[0],C=E[1],y=(0,a.useState)(0),N=y[0],j=y[1],O=(0,a.useState)(!1),L=O[0],k=O[1],P=(0,a.useRef)(null),A=(0,a.useRef)(null),R=(0,a.useState)(!1),S=R[0],T=R[1],M=(0,a.useCallback)((function(){C((function(e){return!e}))}),[]),_=(0,a.useCallback)((function(){T(!0)}),[]),D=(0,a.useCallback)((function(){P.current&&j(P.current.scrollHeight)}),[]);(0,f.LI)((function(){if((null==A?void 0:A.current)&&L&&!m){var e,t,n=\".ob-products-overview__overview-image-wrapper-1\",s=Array.from(null==A||null==(e=A.current)?void 0:e.children),r=0;return t=window.setTimeout((function(){s.forEach((function(e){if(!e.classList.contains(\"ob-collapsible-products-overview-see-more-wrapper\")){var t=Array.from(e.children);t.forEach((function(e){if(e.classList.contains(\"ob-collapsible-products-overview-collapsible\")){var t=Array.from(e.children),s=0;t.forEach((function(e){var t=e.querySelector(n).clientHeight;s=t>s?t:s})),t.forEach((function(e){e.querySelector(n).style.height=\"\".concat(s,\"px\")}))}var a=e.querySelector(n).clientHeight;r=a>r?a:r})),t.forEach((function(e){e.querySelector(n).style.height=\"\".concat(r,\"px\")}))}}))}),500),function(){window.clearTimeout(t)}}}),[L,g]);var V=(0,a.useMemo)((function(){return\"\".concat((100/o).toFixed(2),\"%\")}),[o]),Z=(0,a.useMemo)((function(){return function(e,t){return(0,d.yo)(e,t).map((function(e){var t=e.map((function(e){var t,n,s,r,a,o,i;(null==e||null==(t=e.fields)||null==(n=t.mainAsset)?void 0:n.fields)&&(e.fields.mainAsset.fields.isPreload=!1),null==e||null==(s=e.fields)||null==(r=s.mainAsset)||null==(a=r.fields)||null==(o=a.imageRendition)||null==(i=o.fields)||i.aspectRatio}));return{aspectRatio:(0,d.LT)(t),items:e}})).map((function(e){var t=e.aspectRatio&&Math.max(e.aspectRatio,.4);return h(h({},e),{},{aspectRatio:t})}))}(t,o)}),[t,o]),q=(0,a.useMemo)((function(){return Z.length>0&&Z[0]}),[Z]),H=(0,a.useMemo)((function(){return Z.length>1?Z.slice(1):void 0}),[Z]),$=(0,a.useCallback)((function(e){var t=e.row,n=e.isShown,s=e.isAnimated,a=void 0!==s&&s;return(0,v.jsx)(v.Fragment,{children:t.items.map((function(e,s){return(0,v.jsx)(\"div\",{style:{width:V},className:\"ob-collapsible-products-overview-product-wrapper\",children:(0,v.jsx)(b,{product:e,whiteText:r,aspectRatio:t.aspectRatio,index:s,isShown:n,isRecentlyViewed:m,isAnimated:a,removeLazyLoad:w,onClickCallback:i,productOverview:l})},s)}))})}),[V,r]);return(0,v.jsx)(p.Z,{in:g,timeout:800,onEntering:D,onExit:D,children:(0,v.jsxs)(\"div\",{ref:A,className:u()(\"ob-collapsible-products-overview\"),onLoad:function(){return k(!0)},children:[!!q&&(0,v.jsx)(c.h,{onEnter:_,topOffset:\"500px\",bottomOffset:\"300px\",children:(0,v.jsx)(\"div\",{className:\"ob-collapsible-products-overview-first-line\",children:(0,v.jsx)($,{row:q,isShown:S,isAnimated:!0})})}),!!H&&(0,v.jsx)(\"div\",{className:\"ob-collapsible-products-overview-collapsible-wrapper\",style:{height:N},children:(0,v.jsx)(\"div\",{className:\"ob-collapsible-products-overview-collapsible\",ref:P,children:H.map((function(e,t){return(0,v.jsx)($,{isShown:!0,row:e,isAnimated:!0},t)}))})}),!!H&&!!n&&(0,v.jsx)(\"div\",{className:\"ob-collapsible-products-overview-see-more-wrapper\",children:(0,v.jsx)(x,{whiteText:r,onClick:M,isOpen:g,seeMoreText:n,seeLessText:s})})]})})}w.defaultProps={products:[]}},68665:function(e,t,n){function s(){return(s=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var s in n)({}).hasOwnProperty.call(n,s)&&(e[s]=n[s])}return e}).apply(null,arguments)}n.d(t,{Z:function(){return p}});var r=n(63366),a=n(75068);n(45697);function o(e,t){return e.replace(new RegExp(\"(^|\\\\s)\"+t+\"(?:\\\\s|$)\",\"g\"),\"$1\").replace(/\\s+/g,\" \").replace(/^\\s*|\\s*$/g,\"\")}var i=n(67294),c=n(39325),l=function(e,t){return e&&t&&t.split(\" \").forEach((function(t){return s=t,void((n=e).classList?n.classList.remove(s):\"string\"==typeof n.className?n.className=o(n.className,s):n.setAttribute(\"class\",o(n.className&&n.className.baseVal||\"\",s)));var n,s}))},u=function(e){function t(){for(var t,n=arguments.length,s=new Array(n),r=0;r<n;r++)s[r]=arguments[r];return(t=e.call.apply(e,[this].concat(s))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,\"exit\"),t.addClass(e,n?\"appear\":\"enter\",\"base\"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var s=n?\"appear\":\"enter\";t.addClass(e,s,\"active\"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var s=n?\"appear\":\"enter\";t.removeClasses(e,s),t.addClass(e,s,\"done\"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,\"appear\"),t.removeClasses(e,\"enter\"),t.addClass(e,\"exit\",\"base\"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,\"exit\",\"active\"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,\"exit\"),t.addClass(e,\"exit\",\"done\"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,s=\"string\"==typeof n,r=s?\"\"+(s&&n?n+\"-\":\"\")+e:n[e];return{baseClassName:r,activeClassName:s?r+\"-active\":n[e+\"Active\"],doneClassName:s?r+\"-done\":n[e+\"Done\"]}},t}(0,a.Z)(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var s=this.getClassNames(t)[n+\"ClassName\"];\"appear\"===t&&\"done\"===n&&(s+=\" \"+this.getClassNames(\"enter\").doneClassName),\"active\"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=s,function(e,t){e&&t&&t.split(\" \").forEach((function(t){return s=t,void((n=e).classList?n.classList.add(s):function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(\" \"+(e.className.baseVal||e.className)+\" \").indexOf(\" \"+t+\" \")}(n,s)||(\"string\"==typeof n.className?n.className=n.className+\" \"+s:n.setAttribute(\"class\",(n.className&&n.className.baseVal||\"\")+\" \"+s)));var n,s}))}(e,s)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],s=n.base,r=n.active,a=n.done;this.appliedClasses[t]={},s&&l(e,s),r&&l(e,r),a&&l(e,a)},n.render=function(){var e=this.props,t=(e.classNames,(0,r.Z)(e,[\"classNames\"]));return i.createElement(c.ZP,s({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(i.Component);u.defaultProps={classNames:\"\"},u.propTypes={};var p=u}}]);"],"names":["self","webpackChunk_N_E","push","e","t","n","r","d","default","w","s","a","o","i","c","l","u","p","f","v","m","Object","keys","getOwnPropertySymbols","filter","getOwnPropertyDescriptor","enumerable","apply","h","arguments","length","forEach","getOwnPropertyDescriptors","defineProperties","defineProperty","b","then","bind","loadableGenerated","webpack","x","products","seeMoreProductsText","seeLessProductsText","whiteText","itemsPerRow","onClickCallback","productOverview","isRecentlyViewed","removeLazyLoad","E","useState","g","C","y","N","j","O","L","k","P","useRef","A","R","S","T","M","useCallback","_","D","current","scrollHeight","LI","Array","from","children","window","setTimeout","classList","contains","querySelector","clientHeight","style","height","concat","clearTimeout","V","useMemo","toFixed","Z","yo","map","fields","mainAsset","isPreload","imageRendition","aspectRatio","LT","items","Math","max","q","H","slice","$","row","isShown","isAnimated","jsx","Fragment","width","className","product","index","in","timeout","onEntering","onExit","jsxs","ref","onLoad","onEnter","topOffset","bottomOffset","onClick","isOpen","seeMoreText","seeLessText","defaultProps","assign","hasOwnProperty","call","replace","split","remove","setAttribute","baseVal","appliedClasses","appear","enter","exit","removeClasses","addClass","props","onEntered","onExiting","onExited","getClassNames","classNames","baseClassName","activeClassName","doneClassName","prototype","scrollTop","add","indexOf","base","active","done","render","createElement","ZP","Component","propTypes"],"sourceRoot":""}