{"version":3,"file":"coopse.script.3285.3220ac5c.chunk.js","mappings":"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","sources":["webpack:///./src/microApps/common/tracking/hooks/usePromotionTracking.ts","webpack:///./src/microApps/common/components/organisms/VideoBlock/VideoBlock.tsx","webpack:///./src/microApps/common/components/organisms/VideoBlock/VideoBlock.module.scss","webpack:///./src/microApps/episerver/components/blocks/EpiVideoBlock/EpiVideoBlock.tsx","webpack:///../../node_modules/react-intersection-observer/react-intersection-observer.modern.mjs"],"sourcesContent":["import { useEffect } from 'react';\nimport { useInView } from 'react-intersection-observer';\n\nimport { ga4PromotionTracking } from '../ga4/promotion';\nimport type { IGaPromoData } from '../models/IGaPromoData';\n\nconst usePromotionTracking = ({\n    gaPromoCreative,\n    gaPromoId,\n    gaPromoName,\n    gaPromoPosition,\n}: IGaPromoData) => {\n    const [ref, inView] = useInView({\n        triggerOnce: true,\n        threshold: 0.5,\n    });\n\n    useEffect(() => {\n        if (inView) {\n            ga4PromotionTracking.viewPromotion({\n                gaPromoCreative,\n                gaPromoId,\n                gaPromoName,\n                gaPromoPosition,\n            });\n        }\n    }, [gaPromoCreative, gaPromoId, gaPromoName, gaPromoPosition, inView]);\n\n    const click = () => {\n        ga4PromotionTracking.selectPromotion({\n            gaPromoCreative,\n            gaPromoId,\n            gaPromoName,\n            gaPromoPosition,\n        });\n    };\n\n    return { ref, click };\n};\n\nexport default usePromotionTracking;\n","/* eslint-disable jsx-a11y/anchor-has-content */\n/* eslint-disable jsx-a11y/control-has-associated-label */\n/* eslint-disable jsx-a11y/media-has-caption */\nimport { Button } from '@coop/components';\nimport classNames from 'classnames';\nimport { forwardRef, useState } from 'react';\n\nimport usePromotionTracking from '../../../tracking/hooks/usePromotionTracking';\nimport type { IGaPromoData } from '../../../tracking/models/IGaPromoData';\nimport styles from './VideoBlock.module.scss';\n\nexport interface VideoBlockProps extends IGaPromoData {\n    aspectRatio: string;\n    headline: string;\n    buttonLinkUrl: string;\n    buttonText: string;\n    muteButtonAlwaysOn: boolean;\n    autoplay: boolean;\n    loop: boolean;\n    videoUrl: string;\n    narrowScreenImageUrl: string;\n    showImageOnNarrowScreens: boolean;\n    hasNoSound: boolean;\n    useControls: boolean;\n    buttonLabel: string;\n}\n\nconst VideoBlock = forwardRef<HTMLVideoElement, VideoBlockProps>(\n    (\n        {\n            aspectRatio,\n            headline,\n            buttonLinkUrl,\n            buttonText,\n            buttonLabel,\n            muteButtonAlwaysOn,\n            autoplay,\n            loop,\n            videoUrl,\n            narrowScreenImageUrl,\n            showImageOnNarrowScreens,\n            hasNoSound,\n            useControls,\n            gaPromoId,\n            gaPromoName,\n            gaPromoCreative,\n            gaPromoPosition,\n        },\n        ref1,\n    ) => {\n        const { ref, click } = usePromotionTracking({\n            gaPromoCreative,\n            gaPromoId,\n            gaPromoName,\n            gaPromoPosition,\n        });\n\n        const [isMuted, setIsMuted] = useState(true);\n\n        const aspectRatioValue = aspectRatio || 'Video--16by9';\n        const backgroundImage = {\n            backgroundImage: `url(${narrowScreenImageUrl || ''})`,\n        };\n\n        const toggleVideoSound = () => {\n            setIsMuted((prev) => !prev);\n        };\n\n        return (\n            <div\n                ref={ref}\n                className={classNames(\n                    'Video',\n                    'Video--roundedCorners',\n                    aspectRatioValue,\n                    !muteButtonAlwaysOn && 'Video--muteHover',\n                )}\n            >\n                {buttonLinkUrl && (\n                    <a\n                        className={classNames('Video-link', styles.Focus)}\n                        href={buttonLinkUrl}\n                        onClick={click}\n                        aria-label={buttonLabel}\n                    />\n                )}\n                <video\n                    className={classNames(\n                        'Video-media',\n                        showImageOnNarrowScreens ? 'u-sm-block' : '',\n                    )}\n                    autoPlay={autoplay}\n                    loop={loop}\n                    playsInline\n                    muted={isMuted}\n                    controls={useControls}\n                    ref={ref1}\n                >\n                    <source src={videoUrl} />\n                </video>\n                {!hasNoSound && (\n                    <button\n                        type=\"button\"\n                        aria-label={!isMuted ? 'Slå på ljudet' : 'Stäng av ljudet'}\n                        className={classNames(\n                            'Video-mute u-outlineSolidBase2 u-opacity1',\n                            !isMuted && 'is-unmuted',\n                        )}\n                        onClick={toggleVideoSound}\n                    />\n                )}\n                {showImageOnNarrowScreens && (\n                    <div className=\"Video-media u-sm-hidden\" style={backgroundImage} />\n                )}\n                {(headline || buttonLinkUrl || buttonText) && (\n                    <div className=\"Video-content\">\n                        {headline && (\n                            <h2 className=\"Video-heading Video-heading--large\">{headline}</h2>\n                        )}\n\n                        {buttonLinkUrl && buttonText && (\n                            <div className=\"Video-button\">\n                                <Button asChild size={40} theme=\"primary\">\n                                    <a href={buttonLinkUrl}>{buttonText}</a>\n                                </Button>\n                            </div>\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\n\nexport default VideoBlock;\n","// extracted by mini-css-extract-plugin\nexport default {\"Focus\":\"X9z0LEGO\"};","import VideoBlock from '../../../../common/components/organisms/VideoBlock/VideoBlock';\nimport type { EpiVideoBlockType } from './epiVideoBlockType';\n\nconst EpiVideoBlock: React.FC<React.PropsWithChildren<EpiVideoBlockType>> = (props) => (\n    <VideoBlock\n        aspectRatio={props.aspectRatio}\n        headline={props.headline}\n        buttonText={props.buttonText}\n        buttonLinkUrl={props.buttonLink}\n        muteButtonAlwaysOn={props.muteButtonAlwaysOn}\n        autoplay={props.autoplay}\n        loop={props.loop}\n        narrowScreenImageUrl={props.narrowScreenImage?.url}\n        showImageOnNarrowScreens={props.showImageOnNarrowScreens}\n        videoUrl={props.videoUrl}\n        hasNoSound={props.hasNoSound}\n        useControls={props.useControls}\n        gaPromoPosition={props.gaPromoPosition}\n        gaPromoCreative={props.gaPromoCreative}\n        gaPromoId={props.gaPromoId}\n        gaPromoName={props.gaPromoName}\n        buttonLabel={props.buttonLabel}\n    />\n);\n\nexport default EpiVideoBlock;\n","import * as React from 'react';\n\nfunction _extends() {\n  _extends = Object.assign || function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n\n    return target;\n  };\n\n  return _extends.apply(this, arguments);\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n  if (source == null) return {};\n  var target = {};\n  var sourceKeys = Object.keys(source);\n  var key, i;\n\n  for (i = 0; i < sourceKeys.length; i++) {\n    key = sourceKeys[i];\n    if (excluded.indexOf(key) >= 0) continue;\n    target[key] = source[key];\n  }\n\n  return target;\n}\n\nconst observerMap = new Map();\nconst RootIds = new WeakMap();\nlet rootId = 0;\nlet unsupportedValue = undefined;\n/**\r\n * What should be the default behavior if the IntersectionObserver is unsupported?\r\n * Ideally the polyfill has been loaded, you can have the following happen:\r\n * - `undefined`: Throw an error\r\n * - `true` or `false`: Set the `inView` value to this regardless of intersection state\r\n * **/\n\nfunction defaultFallbackInView(inView) {\n  unsupportedValue = inView;\n}\n/**\r\n * Generate a unique ID for the root element\r\n * @param root\r\n */\n\nfunction getRootId(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/**\r\n * Convert the options to a string Id, based on the values.\r\n * Ensures we can reuse the same observer when observing elements with the same options.\r\n * @param options\r\n */\n\n\nfunction optionsToId(options) {\n  return Object.keys(options).sort().filter(key => options[key] !== undefined).map(key => {\n    return `${key}_${key === 'root' ? getRootId(options.root) : options[key]}`;\n  }).toString();\n}\n\nfunction createObserver(options) {\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();\n    let thresholds;\n    const observer = new IntersectionObserver(entries => {\n      entries.forEach(entry => {\n        var _elements$get;\n\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 = entry.isIntersecting && thresholds.some(threshold => entry.intersectionRatio >= threshold); // @ts-ignore support IntersectionObserver v2\n\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 = elements.get(entry.target)) == null ? void 0 : _elements$get.forEach(callback => {\n          callback(inView, entry);\n        });\n      });\n    }, options); // Ensure we have a valid thresholds array. If not, use the threshold from the options\n\n    thresholds = observer.thresholds || (Array.isArray(options.threshold) ? options.threshold : [options.threshold || 0]);\n    instance = {\n      id,\n      observer,\n      elements\n    };\n    observerMap.set(id, instance);\n  }\n\n  return instance;\n}\n/**\r\n * @param element - DOM Element to observe\r\n * @param callback - Callback function to trigger when intersection status changes\r\n * @param options - Intersection Observer options\r\n * @param fallbackInView - Fallback inView value.\r\n * @return Function - Cleanup function that should be triggered to unregister the observer\r\n */\n\n\nfunction observe(element, callback, options = {}, fallbackInView = unsupportedValue) {\n  if (typeof window.IntersectionObserver === 'undefined' && fallbackInView !== undefined) {\n    const bounds = element.getBoundingClientRect();\n    callback(fallbackInView, {\n      isIntersecting: fallbackInView,\n      target: element,\n      intersectionRatio: typeof options.threshold === 'number' ? options.threshold : 0,\n      time: 0,\n      boundingClientRect: bounds,\n      intersectionRect: bounds,\n      rootBounds: bounds\n    });\n    return () => {// Nothing to cleanup\n    };\n  } // An observer with the same options can be reused, so lets use this fact\n\n\n  const {\n    id,\n    observer,\n    elements\n  } = createObserver(options); // Register the callback listener for this element\n\n  let callbacks = elements.get(element) || [];\n\n  if (!elements.has(element)) {\n    elements.set(element, callbacks);\n  }\n\n  callbacks.push(callback);\n  observer.observe(element);\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\nconst _excluded = [\"children\", \"as\", \"triggerOnce\", \"threshold\", \"root\", \"rootMargin\", \"onChange\", \"skip\", \"trackVisibility\", \"delay\", \"initialInView\", \"fallbackInView\"];\n\nfunction isPlainChildren(props) {\n  return typeof props.children !== 'function';\n}\n/**\r\n ## Render props\r\n\n To use the `<InView>` component, you pass it a function. It will be called\r\n whenever the state changes, with the new value of `inView`. In addition to the\r\n `inView` prop, children also receive a `ref` that should be set on the\r\n containing DOM element. This is the element that the IntersectionObserver will\r\n monitor.\r\n\n If you need it, you can also access the\r\n [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)\r\n on `entry`, giving you access to all the details about the current intersection\r\n state.\r\n\n ```jsx\r\n import { InView } from 'react-intersection-observer';\r\n\n const Component = () => (\r\n <InView>\r\n {({ inView, ref, entry }) => (\r\n      <div ref={ref}>\r\n        <h2>{`Header inside viewport ${inView}.`}</h2>\r\n      </div>\r\n    )}\r\n </InView>\r\n );\r\n\n export default Component;\r\n ```\r\n\n ## Plain children\r\n\n You can pass any element to the `<InView />`, and it will handle creating the\r\n wrapping DOM element. Add a handler to the `onChange` method, and control the\r\n state in your own component. Any extra props you add to `<InView>` will be\r\n passed to the HTML element, allowing you set the `className`, `style`, etc.\r\n\n ```jsx\r\n import { InView } from 'react-intersection-observer';\r\n\n const Component = () => (\r\n <InView as=\"div\" onChange={(inView, entry) => console.log('Inview:', inView)}>\r\n <h2>Plain children are always rendered. Use onChange to monitor state.</h2>\r\n </InView>\r\n );\r\n\n export default Component;\r\n ```\r\n */\n\n\nclass InView extends React.Component {\n  constructor(props) {\n    super(props);\n    this.node = null;\n    this._unobserveCb = null;\n\n    this.handleNode = node => {\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({\n            inView: !!this.props.initialInView,\n            entry: undefined\n          });\n        }\n      }\n\n      this.node = node ? node : null;\n      this.observeNode();\n    };\n\n    this.handleChange = (inView, entry) => {\n      if (inView && this.props.triggerOnce) {\n        // If `triggerOnce` is true, we should stop observing the element.\n        this.unobserve();\n      }\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({\n          inView,\n          entry\n        });\n      }\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    this.state = {\n      inView: !!props.initialInView,\n      entry: undefined\n    };\n  }\n\n  componentDidUpdate(prevProps) {\n    // If a IntersectionObserver option changed, reinit the observer\n    if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold || prevProps.skip !== this.props.skip || prevProps.trackVisibility !== this.props.trackVisibility || prevProps.delay !== this.props.delay) {\n      this.unobserve();\n      this.observeNode();\n    }\n  }\n\n  componentWillUnmount() {\n    this.unobserve();\n    this.node = null;\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    this._unobserveCb = observe(this.node, this.handleChange, {\n      threshold,\n      root,\n      rootMargin,\n      // @ts-ignore\n      trackVisibility,\n      // @ts-ignore\n      delay\n    }, fallbackInView);\n  }\n\n  unobserve() {\n    if (this._unobserveCb) {\n      this._unobserveCb();\n\n      this._unobserveCb = null;\n    }\n  }\n\n  render() {\n    if (!isPlainChildren(this.props)) {\n      const {\n        inView,\n        entry\n      } = this.state;\n      return this.props.children({\n        inView,\n        entry,\n        ref: this.handleNode\n      });\n    }\n\n    const _this$props = this.props,\n          {\n      children,\n      as\n    } = _this$props,\n          props = _objectWithoutPropertiesLoose(_this$props, _excluded);\n\n    return React.createElement(as || 'div', _extends({\n      ref: this.handleNode\n    }, props), children);\n  }\n\n}\n\n/**\r\n * React Hooks make it easy to monitor the `inView` state of your components. Call\r\n * the `useInView` hook with the (optional) [options](#options) you need. It will\r\n * return an array containing a `ref`, the `inView` status and the current\r\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\r\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\r\n * report the status.\r\n *\r\n * @example\r\n * ```jsx\r\n * import React from 'react';\r\n * import { useInView } from 'react-intersection-observer';\r\n *\r\n * const Component = () => {\r\n *   const { ref, inView, entry } = useInView({\r\n *       threshold: 0,\r\n *   });\r\n *\r\n *   return (\r\n *     <div ref={ref}>\r\n *       <h2>{`Header inside viewport ${inView}.`}</h2>\r\n *     </div>\r\n *   );\r\n * };\r\n * ```\r\n */\n\nfunction useInView({\n  threshold,\n  delay,\n  trackVisibility,\n  rootMargin,\n  root,\n  triggerOnce,\n  skip,\n  initialInView,\n  fallbackInView,\n  onChange\n} = {}) {\n  var _state$entry;\n\n  const [ref, setRef] = React.useState(null);\n  const callback = React.useRef();\n  const [state, setState] = React.useState({\n    inView: !!initialInView,\n    entry: undefined\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\n  callback.current = onChange;\n  React.useEffect(() => {\n    // Ensure we have node ref, and that we shouldn't skip observing\n    if (skip || !ref) return;\n    let unobserve;\n    unobserve = observe(ref, (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      root,\n      rootMargin,\n      threshold,\n      // @ts-ignore\n      trackVisibility,\n      // @ts-ignore\n      delay\n    }, fallbackInView);\n    return () => {\n      if (unobserve) {\n        unobserve();\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  [// 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, ref, root, rootMargin, triggerOnce, skip, trackVisibility, fallbackInView, delay]);\n  const entryTarget = (_state$entry = state.entry) == null ? void 0 : _state$entry.target;\n  const previousEntryTarget = React.useRef();\n\n  if (!ref && entryTarget && !triggerOnce && !skip && previousEntryTarget.current !== entryTarget) {\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]; // Support object destructuring, by adding the specific values.\n\n  result.ref = result[0];\n  result.inView = result[1];\n  result.entry = result[2];\n  return result;\n}\n\nexport { InView, defaultFallbackInView, observe, useInView };\n//# sourceMappingURL=react-intersection-observer.modern.mjs.map\n"],"names":["gaPromoCreative","gaPromoId","gaPromoName","gaPromoPosition","ref","inView","triggerOnce","threshold","useEffect","viewPromotion","click","selectPromotion","forwardRef","aspectRatio","headline","buttonLinkUrl","buttonText","buttonLabel","muteButtonAlwaysOn","autoplay","loop","videoUrl","narrowScreenImageUrl","showImageOnNarrowScreens","hasNoSound","useControls","ref1","usePromotionTracking","isMuted","setIsMuted","useState","aspectRatioValue","backgroundImage","className","href","onClick","autoPlay","playsInline","muted","controls","src","type","prev","style","Button","asChild","size","theme","props","buttonLink","narrowScreenImage","url","observerMap","Map","RootIds","WeakMap","unsupportedValue","rootId","observe","element","callback","options","fallbackInView","window","IntersectionObserver","undefined","bounds","getBoundingClientRect","isIntersecting","target","intersectionRatio","time","boundingClientRect","intersectionRect","rootBounds","id","observer","elements","Object","keys","sort","filter","key","map","root","has","set","toString","get","optionsToId","instance","thresholds","entries","forEach","entry","_elements$get","some","trackVisibility","isVisible","Array","isArray","createObserver","callbacks","push","splice","indexOf","length","delete","unobserve","disconnect","useInView","delay","rootMargin","skip","initialInView","onChange","_state$entry","setRef","state","setState","current","entryTarget","previousEntryTarget","result"],"sourceRoot":""}