{"version":3,"file":"static/js/577.fee0794b.chunk.js","mappings":"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","sources":["components/Elements/TeaserGroup/Grid/Grid.styles.js","components/Elements/TeaserGroup/Grid/index.jsx","../node_modules/src/observe.ts","../node_modules/src/InView.tsx","../node_modules/src/useInView.tsx"],"sourcesContent":["import makeStyles from \"@material-ui/styles/makeStyles\";\r\n\r\nconst styles = makeStyles(theme => ({\r\n\tteaserGrid: {},\r\n\theadline: {\r\n\t\tcolor: theme.palette.secondary.dark,\r\n\t\tmarginBottom: theme.spacing(5),\r\n\t\tposition: \"relative\",\r\n\t\tpaddingBottom: theme.spacing(3),\r\n\t\ttextAlign: \"center\",\r\n\t\tzIndex: 1,\r\n\t\t\"&:after\": {\r\n\t\t\tbackground: \"url('/img/highlight-xl.svg')\",\r\n\t\t\tbackgroundSize: \"contain\",\r\n\t\t\tbackgroundRepeat: \"no-repeat\",\r\n\t\t\tbottom: 0,\r\n\t\t\tcontent: \"''\",\r\n\t\t\theight: 14,\r\n\t\t\tleft: \"50%\",\r\n\t\t\tposition: \"absolute\",\r\n\t\t\ttransform: \"translate(-50%, 0)\",\r\n\t\t\twidth: 221\r\n\t\t}\r\n\t},\r\n\twrapper: {\r\n\t\tdisplay: \"grid\",\r\n\t\tgridRowGap: theme.spacing(2),\r\n\t\tgridTemplateColumns: \"1fr\",\r\n\t\tgridTemplateRows: \"auto\"\r\n\t}\r\n}));\r\n\r\nexport default styles;\r\n","import React from \"react\";\r\nimport loadable from \"@loadable/component\";\r\nimport { motion } from \"framer-motion\";\r\nimport { useInView } from \"react-intersection-observer\";\r\nimport clsx from \"clsx\";\r\n\r\nimport styles from \"./Grid.styles\";\r\n\r\nconst Default = loadable(() => import(\"../../Teaser/Default\"));\r\nconst Typography = loadable(() => import(\"@micado-digital/react-ui/components/Typography\"));\r\n\r\nconst TeaserGrid = ({\r\n\tbuttonLabel,\r\n\titems,\r\n\tlang,\r\n\tlink,\r\n\tlinkTitle,\r\n\tmediaFormats,\r\n\ttargetBlank,\r\n\ttitle,\r\n\tvariant\r\n}) => {\r\n\tconst css = styles();\r\n\tconst [ref, inView] = useInView({\r\n\t\ttriggerOnce: true\r\n\t});\r\n\r\n\tconst animationContainer1 = {\r\n\t\tanimate: {\r\n\t\t\ttransition: {\r\n\t\t\t\tdelayChildren: 1,\r\n\t\t\t\tstaggerChildren: 0.1\r\n\t\t\t}\r\n\t\t}\r\n\t};\r\n\r\n\tconst animationItem1 = {\r\n\t\tinitial: {\r\n\t\t\topacity: 0,\r\n\t\t\ty: -20\r\n\t\t},\r\n\t\tanimate: {\r\n\t\t\topacity: 1,\r\n\t\t\ttransition: {\r\n\t\t\t\tstiffness: 100,\r\n\t\t\t\ttype: \"spring\"\r\n\t\t\t},\r\n\t\t\ty: 0\r\n\t\t}\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div className={clsx(css.teaserGrid, \"mco-teaser-group-grid\")} ref={ref}>\r\n\t\t\t{title && (\r\n\t\t\t\t<Typography\r\n\t\t\t\t\tclassName={clsx(css.headline, \"mco-teaser-group-grid__headline\")}\r\n\t\t\t\t\tcomponent=\"h2\"\r\n\t\t\t\t\tvariants={{ xs: \"headline-small\" }}\r\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: title }}\r\n\t\t\t\t/>\r\n\t\t\t)}\r\n\t\t\t<motion.div\r\n\t\t\t\tclassName={clsx(css.wrapper, \"mco-teaser-group-grid__wrapper\")}\r\n\t\t\t\tanimate={inView && \"animate\"}\r\n\t\t\t\tinitial={\"initial\"}\r\n\t\t\t\tvariants={animationContainer1}\r\n\t\t\t>\r\n\t\t\t\t{items?.map(item => {\r\n\t\t\t\t\tconst { fields, id, link, linkRel, linkTarget, media, text, title } = item;\r\n\r\n\t\t\t\t\treturn (\r\n\t\t\t\t\t\t<motion.div variants={animationItem1} key={id}>\r\n\t\t\t\t\t\t\t<Default\r\n\t\t\t\t\t\t\t\tbuttonLabel={buttonLabel}\r\n\t\t\t\t\t\t\t\tfields={fields}\r\n\t\t\t\t\t\t\t\tlink={link}\r\n\t\t\t\t\t\t\t\tlinkRel={linkRel}\r\n\t\t\t\t\t\t\t\tlinkTarget={linkTarget}\r\n\t\t\t\t\t\t\t\tmedia={media}\r\n\t\t\t\t\t\t\t\tmediaFormats={mediaFormats}\r\n\t\t\t\t\t\t\t\ttext={text}\r\n\t\t\t\t\t\t\t\ttitle={title}\r\n\t\t\t\t\t\t\t\tlang={lang}\r\n\t\t\t\t\t\t\t\tvariant={variant}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</motion.div>\r\n\t\t\t\t\t);\r\n\t\t\t\t})}\r\n\t\t\t</motion.div>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default TeaserGrid;\r\n","import type { ObserverInstanceCallback } from './index';\n\nconst observerMap = new Map<\n  string,\n  {\n    id: string;\n    observer: IntersectionObserver;\n    elements: Map<Element, Array<ObserverInstanceCallback>>;\n  }\n>();\n\nconst RootIds: WeakMap<Element | Document, string> = new WeakMap();\nlet rootId = 0;\n\nlet unsupportedValue: boolean | undefined = undefined;\n\n/**\n * What should be the default behavior if the IntersectionObserver is unsupported?\n * Ideally the polyfill has been loaded, you can have the following happen:\n * - `undefined`: Throw an error\n * - `true` or `false`: Set the `inView` value to this regardless of intersection state\n * **/\nexport function defaultFallbackInView(inView: boolean | undefined) {\n  unsupportedValue = inView;\n}\n\n/**\n * Generate a unique ID for the root element\n * @param root\n */\nfunction getRootId(root: IntersectionObserverInit['root']) {\n  if (!root) return '0';\n  if (RootIds.has(root)) return RootIds.get(root);\n  rootId += 1;\n  RootIds.set(root, rootId.toString());\n  return RootIds.get(root);\n}\n\n/**\n * Convert the options to a string Id, based on the values.\n * Ensures we can reuse the same observer when observing elements with the same options.\n * @param options\n */\nexport function optionsToId(options: IntersectionObserverInit) {\n  return Object.keys(options)\n    .sort()\n    .filter((key) => options[key] !== undefined)\n    .map((key) => {\n      return `${key}_${\n        key === 'root' ? getRootId(options.root) : options[key]\n      }`;\n    })\n    .toString();\n}\n\nfunction createObserver(options: IntersectionObserverInit) {\n  // Create a unique ID for this observer instance, based on the root, root margin and threshold.\n  let id = optionsToId(options);\n  let instance = observerMap.get(id);\n\n  if (!instance) {\n    // Create a map of elements this observer is going to observe. Each element has a list of callbacks that should be triggered, once it comes into view.\n    const elements = new Map<Element, Array<ObserverInstanceCallback>>();\n    let thresholds: number[] | readonly number[];\n\n    const observer = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.\n        // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0\n        const inView =\n          entry.isIntersecting &&\n          thresholds.some((threshold) => entry.intersectionRatio >= threshold);\n\n        // @ts-ignore support IntersectionObserver v2\n        if (options.trackVisibility && typeof entry.isVisible === 'undefined') {\n          // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.\n          // @ts-ignore\n          entry.isVisible = inView;\n        }\n\n        elements.get(entry.target)?.forEach((callback) => {\n          callback(inView, entry);\n        });\n      });\n    }, options);\n\n    // Ensure we have a valid thresholds array. If not, use the threshold from the options\n    thresholds =\n      observer.thresholds ||\n      (Array.isArray(options.threshold)\n        ? options.threshold\n        : [options.threshold || 0]);\n\n    instance = {\n      id,\n      observer,\n      elements,\n    };\n\n    observerMap.set(id, instance);\n  }\n\n  return instance;\n}\n\n/**\n * @param element - DOM Element to observe\n * @param callback - Callback function to trigger when intersection status changes\n * @param options - Intersection Observer options\n * @param fallbackInView - Fallback inView value.\n * @return Function - Cleanup function that should be triggered to unregister the observer\n */\nexport function observe(\n  element: Element,\n  callback: ObserverInstanceCallback,\n  options: IntersectionObserverInit = {},\n  fallbackInView = unsupportedValue,\n) {\n  if (\n    typeof window.IntersectionObserver === 'undefined' &&\n    fallbackInView !== undefined\n  ) {\n    const bounds = element.getBoundingClientRect();\n    callback(fallbackInView, {\n      isIntersecting: fallbackInView,\n      target: element,\n      intersectionRatio:\n        typeof options.threshold === 'number' ? options.threshold : 0,\n      time: 0,\n      boundingClientRect: bounds,\n      intersectionRect: bounds,\n      rootBounds: bounds,\n    });\n    return () => {\n      // Nothing to cleanup\n    };\n  }\n  // An observer with the same options can be reused, so lets use this fact\n  const { id, observer, elements } = createObserver(options);\n\n  // Register the callback listener for this element\n  let callbacks = elements.get(element) || [];\n  if (!elements.has(element)) {\n    elements.set(element, callbacks);\n  }\n\n  callbacks.push(callback);\n  observer.observe(element);\n\n  return function unobserve() {\n    // Remove the callback from the callback list\n    callbacks.splice(callbacks.indexOf(callback), 1);\n\n    if (callbacks.length === 0) {\n      // No more callback exists for element, so destroy it\n      elements.delete(element);\n      observer.unobserve(element);\n    }\n\n    if (elements.size === 0) {\n      // No more elements are being observer by this instance, so destroy it\n      observer.disconnect();\n      observerMap.delete(id);\n    }\n  };\n}\n","import * as React from 'react';\nimport type { IntersectionObserverProps, PlainChildrenProps } from './index';\nimport { observe } from './observe';\n\ntype State = {\n  inView: boolean;\n  entry?: IntersectionObserverEntry;\n};\n\nfunction isPlainChildren(\n  props: IntersectionObserverProps | PlainChildrenProps,\n): props is PlainChildrenProps {\n  return typeof props.children !== 'function';\n}\n\n/**\n ## Render props\n\n To use the `<InView>` component, you pass it a function. It will be called\n whenever the state changes, with the new value of `inView`. In addition to the\n `inView` prop, children also receive a `ref` that should be set on the\n containing DOM element. This is the element that the IntersectionObserver will\n monitor.\n\n If you need it, you can also access the\n [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)\n on `entry`, giving you access to all the details about the current intersection\n state.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n <InView>\n {({ inView, ref, entry }) => (\n      <div ref={ref}>\n        <h2>{`Header inside viewport ${inView}.`}</h2>\n      </div>\n    )}\n </InView>\n );\n\n export default Component;\n ```\n\n ## Plain children\n\n You can pass any element to the `<InView />`, and it will handle creating the\n wrapping DOM element. Add a handler to the `onChange` method, and control the\n state in your own component. Any extra props you add to `<InView>` will be\n passed to the HTML element, allowing you set the `className`, `style`, etc.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n <InView as=\"div\" onChange={(inView, entry) => console.log('Inview:', inView)}>\n <h2>Plain children are always rendered. Use onChange to monitor state.</h2>\n </InView>\n );\n\n export default Component;\n ```\n */\nexport class InView extends React.Component<\n  IntersectionObserverProps | PlainChildrenProps,\n  State\n> {\n  constructor(props: IntersectionObserverProps | PlainChildrenProps) {\n    super(props);\n    this.state = {\n      inView: !!props.initialInView,\n      entry: undefined,\n    };\n  }\n\n  componentDidUpdate(prevProps: IntersectionObserverProps) {\n    // If a IntersectionObserver option changed, reinit the observer\n    if (\n      prevProps.rootMargin !== this.props.rootMargin ||\n      prevProps.root !== this.props.root ||\n      prevProps.threshold !== this.props.threshold ||\n      prevProps.skip !== this.props.skip ||\n      prevProps.trackVisibility !== this.props.trackVisibility ||\n      prevProps.delay !== this.props.delay\n    ) {\n      this.unobserve();\n      this.observeNode();\n    }\n  }\n\n  componentWillUnmount() {\n    this.unobserve();\n    this.node = null;\n  }\n\n  node: Element | null = null;\n  _unobserveCb: (() => void) | null = null;\n\n  observeNode() {\n    if (!this.node || this.props.skip) return;\n    const {\n      threshold,\n      root,\n      rootMargin,\n      trackVisibility,\n      delay,\n      fallbackInView,\n    } = this.props;\n\n    this._unobserveCb = observe(\n      this.node,\n      this.handleChange,\n      {\n        threshold,\n        root,\n        rootMargin,\n        // @ts-ignore\n        trackVisibility,\n        // @ts-ignore\n        delay,\n      },\n      fallbackInView,\n    );\n  }\n\n  unobserve() {\n    if (this._unobserveCb) {\n      this._unobserveCb();\n      this._unobserveCb = null;\n    }\n  }\n\n  handleNode = (node?: Element | null) => {\n    if (this.node) {\n      // Clear the old observer, before we start observing a new element\n      this.unobserve();\n\n      if (!node && !this.props.triggerOnce && !this.props.skip) {\n        // Reset the state if we get a new node, and we aren't ignoring updates\n        this.setState({ inView: !!this.props.initialInView, entry: undefined });\n      }\n    }\n\n    this.node = node ? node : null;\n    this.observeNode();\n  };\n\n  handleChange = (inView: boolean, entry: IntersectionObserverEntry) => {\n    if (inView && this.props.triggerOnce) {\n      // If `triggerOnce` is true, we should stop observing the element.\n      this.unobserve();\n    }\n    if (!isPlainChildren(this.props)) {\n      // Store the current State, so we can pass it to the children in the next render update\n      // There's no reason to update the state for plain children, since it's not used in the rendering.\n      this.setState({ inView, entry });\n    }\n    if (this.props.onChange) {\n      // If the user is actively listening for onChange, always trigger it\n      this.props.onChange(inView, entry);\n    }\n  };\n\n  render() {\n    if (!isPlainChildren(this.props)) {\n      const { inView, entry } = this.state;\n      return this.props.children({ inView, entry, ref: this.handleNode });\n    }\n\n    const {\n      children,\n      as,\n      triggerOnce,\n      threshold,\n      root,\n      rootMargin,\n      onChange,\n      skip,\n      trackVisibility,\n      delay,\n      initialInView,\n      fallbackInView,\n      ...props\n    } = this.props;\n\n    return React.createElement(\n      as || 'div',\n      { ref: this.handleNode, ...props },\n      children,\n    );\n  }\n}\n","import * as React from 'react';\nimport type { InViewHookResponse, IntersectionOptions } from './index';\nimport { observe } from './observe';\n\ntype State = {\n  inView: boolean;\n  entry?: IntersectionObserverEntry;\n};\n\n/**\n * React Hooks make it easy to monitor the `inView` state of your components. Call\n * the `useInView` hook with the (optional) [options](#options) you need. It will\n * return an array containing a `ref`, the `inView` status and the current\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\n * report the status.\n *\n * @example\n * ```jsx\n * import React from 'react';\n * import { useInView } from 'react-intersection-observer';\n *\n * const Component = () => {\n *   const { ref, inView, entry } = useInView({\n *       threshold: 0,\n *   });\n *\n *   return (\n *     <div ref={ref}>\n *       <h2>{`Header inside viewport ${inView}.`}</h2>\n *     </div>\n *   );\n * };\n * ```\n */\nexport function useInView({\n  threshold,\n  delay,\n  trackVisibility,\n  rootMargin,\n  root,\n  triggerOnce,\n  skip,\n  initialInView,\n  fallbackInView,\n  onChange,\n}: IntersectionOptions = {}): InViewHookResponse {\n  const [ref, setRef] = React.useState<Element | null>(null);\n  const callback = React.useRef<IntersectionOptions['onChange']>();\n  const [state, setState] = React.useState<State>({\n    inView: !!initialInView,\n    entry: undefined,\n  });\n\n  // Store the onChange callback in a `ref`, so we can access the latest instance\n  // inside the `useEffect`, but without triggering a rerender.\n  callback.current = onChange;\n\n  React.useEffect(\n    () => {\n      // Ensure we have node ref, and that we shouldn't skip observing\n      if (skip || !ref) return;\n\n      let unobserve: (() => void) | undefined;\n      unobserve = observe(\n        ref,\n        (inView, entry) => {\n          setState({\n            inView,\n            entry,\n          });\n          if (callback.current) callback.current(inView, entry);\n\n          if (entry.isIntersecting && triggerOnce && unobserve) {\n            // If it should only trigger once, unobserve the element after it's inView\n            unobserve();\n            unobserve = undefined;\n          }\n        },\n        {\n          root,\n          rootMargin,\n          threshold,\n          // @ts-ignore\n          trackVisibility,\n          // @ts-ignore\n          delay,\n        },\n        fallbackInView,\n      );\n\n      return () => {\n        if (unobserve) {\n          unobserve();\n        }\n      };\n    },\n    // We break the rule here, because we aren't including the actual `threshold` variable\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      // If the threshold is an array, convert it to a string, so it won't change between renders.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      Array.isArray(threshold) ? threshold.toString() : threshold,\n      ref,\n      root,\n      rootMargin,\n      triggerOnce,\n      skip,\n      trackVisibility,\n      fallbackInView,\n      delay,\n    ],\n  );\n\n  const entryTarget = state.entry?.target;\n  const previousEntryTarget = React.useRef<Element>();\n  if (\n    !ref &&\n    entryTarget &&\n    !triggerOnce &&\n    !skip &&\n    previousEntryTarget.current !== entryTarget\n  ) {\n    // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n    // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n    previousEntryTarget.current = entryTarget;\n    setState({\n      inView: !!initialInView,\n      entry: undefined,\n    });\n  }\n\n  const result = [setRef, state.inView, state.entry] as InViewHookResponse;\n\n  // Support object destructuring, by adding the specific values.\n  result.ref = result[0];\n  result.inView = result[1];\n  result.entry = result[2];\n\n  return result;\n}\n"],"names":["makeStyles","theme","teaserGrid","headline","color","palette","secondary","dark","marginBottom","spacing","position","paddingBottom","textAlign","zIndex","background","backgroundSize","backgroundRepeat","bottom","content","height","left","transform","width","wrapper","display","gridRowGap","gridTemplateColumns","gridTemplateRows","Default","loadable","Typography","buttonLabel","items","lang","mediaFormats","link","linkTitle","title","targetBlank","variant","css","styles","useInView","triggerOnce","ref","inView","animationItem1","initial","opacity","y","animate","transition","stiffness","type","className","clsx","component","variants","xs","dangerouslySetInnerHTML","__html","motion","delayChildren","staggerChildren","map","item","fields","id","linkRel","linkTarget","media","text","observerMap","Map","RootIds","WeakMap","rootId","unsupportedValue","undefined","optionsToId","options","Object","keys","sort","filter","key","root","has","set","toString","get","observe","element","callback","fallbackInView","window","IntersectionObserver","bounds","getBoundingClientRect","isIntersecting","target","intersectionRatio","threshold","time","boundingClientRect","intersectionRect","rootBounds","instance","thresholds","elements","observer","entries","forEach","entry","some","trackVisibility","isVisible","Array","isArray","createObserver","callbacks","push","splice","indexOf","length","delete","unobserve","size","disconnect","isPlainChildren","props","children","React","delay","rootMargin","skip","initialInView","onChange","setRef","state","setState","current","entryTarget","_state$entry","previousEntryTarget","result"],"sourceRoot":""}