{"version":3,"file":"static/js/5892.5f71641d.chunk.js","mappings":"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","sources":["components/Elements/TeaserGroup/Grid/Grid.styles.js","components/Elements/TeaserGroup/Grid/index.jsx","../node_modules/react-intersection-observer/src/observe.ts","../node_modules/react-intersection-observer/src/InView.tsx","../node_modules/react-intersection-observer/src/useInView.tsx"],"sourcesContent":["import makeStyles from \"@material-ui/styles/makeStyles\";\n\nconst styles = makeStyles(theme => ({\n\tteaserGrid: {},\n\theadline: {\n\t\tpaddingBottom: theme.spacing(7),\n\t\tpaddingTop: theme.spacing(12.5),\n\t\tposition: \"relative\",\n\t\ttextAlign: \"center\",\n\t\t\"&:before\": {\n\t\t\tbackground: \"linear-gradient(180deg, #C65470 0%, #548EB5 100%)\",\n\t\t\tbottom: 0,\n\t\t\tcontent: \"''\",\n\t\t\tleft: \"50%\",\n\t\t\tposition: \"absolute\",\n\t\t\ttop: 0,\n\t\t\ttransform: \"translate(-50%, 0)\",\n\t\t\twidth: 2,\n\t\t\tzIndex: -1\n\t\t},\n\t\t\"& span\": {\n\t\t\tbackground: \"#FFFFFF\",\n\t\t\tpadding: theme.spacing(0.5, 0)\n\t\t}\n\t},\n\twrapper: {\n\t\tdisplay: \"grid\",\n\t\tgridRowGap: theme.spacing(4),\n\t\tgridTemplateColumns: \"1fr\",\n\t\tgridTemplateRows: \"auto\",\n\t\t[theme.breakpoints.up(\"md\")]: {\n\t\t\tgridColumnGap: theme.spacing(3),\n\t\t\tgridTemplateColumns: \"1fr 1fr\"\n\t\t},\n\t\t[theme.breakpoints.up(\"lg\")]: {\n\t\t\tgridColumnGap: theme.spacing(4),\n\t\t\tgridTemplateColumns: \"1fr 1fr 1fr\"\n\t\t}\n\t},\n\twrapperCentered: {\n\t\t[theme.breakpoints.up(\"md\")]: {\n\t\t\tmargin: \"0 auto\",\n\t\t\tmaxWidth: 842\n\t\t},\n\t\t[theme.breakpoints.up(\"lg\")]: {\n\t\t\tgridTemplateColumns: \"1fr 1fr\"\n\t\t}\n\t}\n}));\n\nexport default styles;\n","import React from \"react\";\nimport loadable from \"@loadable/component\";\nimport { motion } from \"framer-motion\";\nimport { useInView } from \"react-intersection-observer\";\nimport clsx from \"clsx\";\n\nimport styles from \"./Grid.styles\";\n\nconst Default = loadable(() => import(\"../../Teaser/Default\"));\nconst Typography = loadable(() => import(\"@micado-digital/react-ui/components/Typography\"));\n\nconst TeaserGrid = ({\n\tbuttonLabel,\n\titems,\n\tlang,\n\tlink,\n\tlinkTitle,\n\tmediaFormats,\n\ttargetBlank,\n\ttitle\n}) => {\n\tconst css = styles();\n\tconst centeredGrid = items?.length === 2 || items?.length === 4;\n\tconst [ref, inView] = useInView({\n\t\ttriggerOnce: true\n\t});\n\n\tconst animationContainer1 = {\n\t\tanimate: {\n\t\t\ttransition: {\n\t\t\t\tdelayChildren: 1,\n\t\t\t\tstaggerChildren: 0.1\n\t\t\t}\n\t\t}\n\t};\n\n\tconst animationItem1 = {\n\t\tinitial: {\n\t\t\topacity: 0,\n\t\t\ty: 20\n\t\t},\n\t\tanimate: {\n\t\t\topacity: 1,\n\t\t\ttransition: {\n\t\t\t\tstiffness: 50,\n\t\t\t\ttype: \"spring\"\n\t\t\t},\n\t\t\ty: 0\n\t\t}\n\t};\n\n\treturn (\n\t\t<div className={clsx(css.teaserGrid, \"mco-teaser-group-grid\")} ref={ref}>\n\t\t\t{title && (\n\t\t\t\t<Typography\n\t\t\t\t\tclassName={clsx(css.headline, \"mco-teaser-group-grid__headline\")}\n\t\t\t\t\tcomponent=\"h2\"\n\t\t\t\t\tvariants={{ xs: \"headline-medium\", md: \"headline-large\" }}\n\t\t\t\t\tdangerouslySetInnerHTML={{ __html: `<span>${title}</span>` }}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<motion.div\n\t\t\t\tclassName={clsx(css.wrapper, \"mco-teaser-group-grid__wrapper\", {\n\t\t\t\t\t[css.wrapperCentered]: centeredGrid\n\t\t\t\t})}\n\t\t\t\tanimate={inView && \"animate\"}\n\t\t\t\tinitial={\"initial\"}\n\t\t\t\tvariants={animationContainer1}\n\t\t\t>\n\t\t\t\t{items?.map(item => {\n\t\t\t\t\tconst { id, link, linkRel, linkTarget, media, title } = item;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div variants={animationItem1} key={id}>\n\t\t\t\t\t\t\t<Default\n\t\t\t\t\t\t\t\tbuttonLabel={buttonLabel}\n\t\t\t\t\t\t\t\tlink={link}\n\t\t\t\t\t\t\t\tlinkRel={linkRel}\n\t\t\t\t\t\t\t\tlinkTarget={linkTarget}\n\t\t\t\t\t\t\t\tmedia={media}\n\t\t\t\t\t\t\t\tmediaFormats={mediaFormats}\n\t\t\t\t\t\t\t\ttitle={title}\n\t\t\t\t\t\t\t\tlang={lang}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</motion.div>\n\t\t</div>\n\t);\n};\n\nexport default TeaserGrid;\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(\n      (key) => options[key as keyof IntersectionObserverInit] !== undefined,\n    )\n    .map((key) => {\n      return `${key}_${\n        key === \"root\"\n          ? getRootId(options.root)\n          : options[key as keyof IntersectionObserverInit]\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  const 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    // biome-ignore lint/style/useConst: It's fine to use let here, as we are going to assign it later\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  const 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  node: Element | null = null;\n  _unobserveCb: (() => void) | null = null;\n\n  constructor(props: IntersectionObserverProps | PlainChildrenProps) {\n    super(props);\n    this.state = {\n      inView: !!props.initialInView,\n      entry: undefined,\n    };\n  }\n\n  componentDidMount() {\n    this.unobserve();\n    this.observeNode();\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  }\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    const { children } = this.props;\n    if (typeof children === \"function\") {\n      const { inView, entry } = this.state;\n      return children({ inView, entry, ref: this.handleNode });\n    }\n\n    const {\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 as PlainChildrenProps;\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\"]>(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  // biome-ignore lint/correctness/useExhaustiveDependencies: threshold is not correctly detected as a dependency\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      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 | undefined>(undefined);\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","paddingBottom","spacing","paddingTop","position","textAlign","background","bottom","content","left","top","transform","width","zIndex","padding","wrapper","display","gridRowGap","gridTemplateColumns","gridTemplateRows","breakpoints","up","gridColumnGap","wrapperCentered","margin","maxWidth","Default","loadable","Typography","_ref","buttonLabel","items","lang","link","linkTitle","mediaFormats","targetBlank","title","css","styles","centeredGrid","length","ref","inView","useInView","triggerOnce","animationItem1","initial","opacity","y","animate","transition","stiffness","type","_jsxs","className","clsx","children","_jsx","component","variants","xs","md","dangerouslySetInnerHTML","__html","concat","motion","div","delayChildren","staggerChildren","map","item","id","linkRel","linkTarget","media","observerMap","Map","RootIds","WeakMap","rootId","unsupportedValue","optionsToId","options","Object","keys","sort","filter","key","root","has","set","toString","get","observe","element","callback","arguments","undefined","fallbackInView","window","IntersectionObserver","bounds","getBoundingClientRect","isIntersecting","target","intersectionRatio","threshold","time","boundingClientRect","intersectionRect","rootBounds","observer","elements","instance","thresholds","entries","forEach","entry","_a","some","trackVisibility","isVisible","Array","isArray","createObserver","callbacks","push","splice","indexOf","delete","unobserve","size","disconnect","React","delay","rootMargin","skip","initialInView","onChange","setRef","React2","state","setState","current","entryTarget","previousEntryTarget","result"],"sourceRoot":""}