{"ast":null,"code":"import { jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Fragment as _Fragment } from \"react/jsx-runtime\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nimport cn from 'classnames';\nimport { Arrow } from 'components/gui/Arrow';\nimport Button from 'components/gui/Button';\nimport CircleButton from 'components/gui/CircleButton';\nimport CustomBlockContent from 'components/gui/CustomBlockContent';\nimport SlideshowInline from 'components/slideshowInline/SlideshowInline';\nimport Strip from 'components/strips/Strip';\nimport { useClientWidth } from 'hooks/useClientSize';\nimport { useIsDesktop } from 'hooks/useIsDevice';\nimport HTMLReactParser from 'html-react-parser';\nimport { imageBuilder } from 'lib/api';\nimport { useEffect, useRef, useState } from 'react';\nimport SliceIntro from 'slices/SliceIntro/SliceIntro';\nimport styles from './TextImageSlice.module.scss'; // Desktop\n\nvar ListItem = function ListItem(_ref) {\n  var data = _ref.data,\n      id = _ref.id,\n      nextId = _ref.nextId,\n      contentPosition = _ref.contentPosition;\n  var backgroundImageURL = data.image && imageBuilder.image(data.image.asset).width(1280).url();\n  var backgroundColor = data.color && data.color.hex;\n  return /*#__PURE__*/_jsx(\"div\", {\n    id: id,\n    className: cn(styles.listItem),\n    style: {\n      backgroundImage: backgroundImageURL ? \"url(\".concat(backgroundImageURL, \")\") : undefined,\n      backgroundColor: backgroundColor ? backgroundColor : undefined\n    },\n    children: /*#__PURE__*/_jsx(Strip, {\n      className: cn(styles.listStrip),\n      style: {\n        marginLeft: contentPosition * 25 + '%'\n      },\n      title: data.title,\n      intro: data.subtitle,\n      blocks: data.text,\n      button: {\n        label: data.button\n      },\n      downHref: nextId && '#' + nextId\n    })\n  });\n};\n\nvar List = function List(_ref2) {\n  var slides = _ref2.slides;\n  return /*#__PURE__*/_jsx(_Fragment, {\n    children: slides && slides.map(function (slide, i) {\n      var isLast = i == slides.length - 1;\n      return /*#__PURE__*/_jsx(ListItem, {\n        data: slide,\n        contentPosition: i % 2 ? 2 : 1,\n        id: 'intro-' + (i + 1),\n        nextId: isLast ? undefined : 'intro-' + (i + 2)\n      }, slide._key);\n    })\n  });\n}; // Mobile\n\n\nvar SlideItem = function SlideItem(_ref3) {\n  var data = _ref3.data,\n      className = _ref3.className,\n      number = _ref3.number;\n\n  var _useState = useState(false),\n      open = _useState[0],\n      setOpen = _useState[1];\n\n  var _useState2 = useState(false),\n      showFullText = _useState2[0],\n      setShowFullText = _useState2[1];\n\n  var imageRef = useRef();\n  var textsRef = useRef();\n  var imageURL = data.image && imageBuilder.image(data.image.asset).width(400).url();\n\n  var openClose = function openClose() {\n    var newOpen = !open;\n    setOpen(newOpen); // textsRef.current.style.overflowY = newOpen ? 'auto' : 'hidden'\n\n    textsRef.current.scrollTo({\n      top: 0,\n      behavior: 'smooth'\n    }); // if(newOpen) {\n    //    setShowFullText(newOpen)\n    // }\n    // else {\n    //    setTimeout(() => {\n    //       setShowFullText(newOpen)\n    //    }, 800);\n    // }\n    // return;\n    // const newOpen = !open\n    // const containerWidth = textsRef.current.parentNode.clientWidth\n    // const containerHeight = textsRef.current.parentNode.clientHeight\n    // const tl = gsap.timeline()\n    // textsRef.current.style.overflowY = newOpen ? 'auto' : 'hidden'\n    // tl.to(textsRef.current, {\n    //    duration: 0.66,\n    //    ease: 'power3.inOut',\n    //    y: newOpen ? -imageRef.current.clientHeight : 0,\n    //    height: newOpen\n    //       ? containerHeight + 'px'\n    //       : containerHeight * 0.5 + 'px',\n    //    //scale: newOpen ? 1.05 + ((containerWidth - textsRef.current.clientWidth) / containerWidth) : 1,\n    // })\n    // setOpen(newOpen)\n  }; // console.log('TextImageSlice.js::94 data.text', data.text)\n  // const floatRef = useRef()\n  // const textBlockRef = useRef()\n  // const textBlockReplacerRef = useRef()\n  // const [resizeComplete, setResizeComplete] = useState(false)\n  // const [innerBlockHtml, setInnerBlockHtml] = useState()\n  // useEffect(() => {\n  //    if(resizeComplete) return;\n  //    // TODO\n  //    // PROBABLY DOESNT WORK if children > 1\n  //    if ((textBlockRef.current || textBlockReplacerRef.current) && textsRef.current && floatRef.current) {\n  //       const textBlockRefCurrent = textBlockReplacerRef.current || textBlockRef.current\n  //       const lastChild = textBlockRefCurrent.children[textBlockRefCurrent.children.length - 1]\n  //       const availableSpace = textsRef.current.offsetHeight\n  //          - floatRef.current.offsetHeight\n  //          - textBlockRefCurrent.offsetTop\n  //       const newHTML = lastChild.innerHTML.split(' ').slice(0, -1).join(' ')\n  //       if (newHTML != '' && textBlockRefCurrent.offsetHeight > availableSpace)\n  //          setInnerBlockHtml(newHTML)\n  //       else {\n  //          setInnerBlockHtml(newHTML.split(' ').slice(0, -1).join(' ') + ('…'))\n  //          setResizeComplete(true)\n  //       }\n  //    }\n  // }, [innerBlockHtml])\n\n\n  return /*#__PURE__*/_jsxs(\"li\", {\n    className: cn(className, styles.slideshowItem, open && styles.isOpened),\n    children: [/*#__PURE__*/_jsx(\"div\", {\n      ref: imageRef,\n      className: cn(styles.slideshowImage, open && styles.isOpened),\n      children: imageURL && /*#__PURE__*/_jsx(\"img\", {\n        src: imageURL\n      })\n    }), /*#__PURE__*/_jsxs(\"div\", {\n      ref: textsRef,\n      className: cn(styles.slideshowTexts, open && styles.isOpened),\n      children: [/*#__PURE__*/_jsx(\"span\", {\n        className: cn('p--m', styles.slideNumber),\n        children: number\n      }), /*#__PURE__*/_jsx(\"h2\", {\n        className: cn('h--2', styles.title),\n        children: data.title\n      }), data.subtitle && /*#__PURE__*/_jsx(\"p\", {\n        className: cn('p--m', styles.intro),\n        children: data.subtitle\n      }), data.text && /*#__PURE__*/_jsx(CustomBlockContent, {\n        className: cn('p--m', styles.text),\n        blocks: data.text\n      })]\n    }), /*#__PURE__*/_jsx(\"div\", {\n      className: styles.floatCont,\n      children: /*#__PURE__*/_jsx(CircleButton, {\n        className: cn(styles.openCloseButton),\n        icon: open ? 'minus' : 'plus',\n        color: \"white\",\n        onClick: openClose\n      })\n    })]\n  });\n};\n\nvar Slideshow = function Slideshow(_ref4) {\n  var slides = _ref4.slides;\n  return /*#__PURE__*/_jsx(SlideshowInline, {\n    items: slides,\n    renderItem: function renderItem(item, itemStyle, i) {\n      return /*#__PURE__*/_jsx(SlideItem, {\n        data: item,\n        className: itemStyle,\n        number: \"\".concat(i + 1, \"/\").concat(slides.length)\n      }, item._key);\n    }\n  });\n};\n\nvar TextImageSlice = function TextImageSlice(_ref5) {\n  var slides = _ref5.slides,\n      id = _ref5.id;\n  var introText = slides && slides.length && slides[0].intro;\n  var isDesktop = useIsDesktop();\n  return /*#__PURE__*/_jsxs(\"section\", {\n    id: id,\n    className: cn(styles.slideShowSlice),\n    children: [/*#__PURE__*/_jsx(SliceIntro, {\n      text: introText\n    }), isDesktop ? /*#__PURE__*/_jsx(List, {\n      slides: slides\n    }) : /*#__PURE__*/_jsx(Slideshow, {\n      slides: slides\n    })]\n  });\n};\n\nexport default TextImageSlice;","map":null,"metadata":{},"sourceType":"module"}