{"version":3,"file":"SimplifiedProductImageGallery-Chunk-a279a1d063b869a3efda.js","mappings":"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","sources":["webpack://nikon-client/./components/atoms/Button/Button.tsx","webpack://nikon-client/./components/atoms/Image/Image.tsx","webpack://nikon-client/./components/organisms/SimplifiedProductImageGallery/SimplifiedProductImageGallery.tsx","webpack://nikon-client/./models/enums/BreakpointEnum.ts","webpack://nikon-client/./utility/hooks/useBreakpoint.ts","webpack://nikon-client/./utility/hooks/useMediaQuery.ts","webpack://nikon-client/./utility/hooks/useResizeObserver.ts","webpack://nikon-client/./assets/hue.svg"],"sourcesContent":["import { ILink } from '@models/ILink';\nimport classNames from 'classnames';\nimport {\n  ButtonHTMLAttributes,\n  DetailedHTMLProps,\n  PropsWithChildren,\n} from 'react';\n\ninterface Props {\n  readonly className?: string;\n  readonly dataTestId?: string;\n  readonly disabled?: boolean;\n  readonly editHint?: string;\n  readonly link?: ILink;\n  readonly linkCallback?: () => void;\n  readonly secondary?: boolean;\n  readonly secondaryBackgroundClassName?: string;\n  readonly isLightMode?: boolean;\n  readonly inverted?: boolean;\n}\n\ntype ButtonProps = Props &\n  DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;\n\nconst Button = ({\n  children,\n  className,\n  dataTestId,\n  disabled = false,\n  editHint,\n  link,\n  linkCallback,\n  secondary = false,\n  secondaryBackgroundClassName = 'bg-transparent',\n  isLightMode,\n  inverted = false,\n  ...buttonProps\n}: PropsWithChildren<ButtonProps>) => {\n  const buttonClasses = classNames(\n    {\n      'bg-yellow py-1 px-4 text-black-100 hover:bg-yellow-100 focus:bg-yellow-500 active:bg-yellow-500':\n        !disabled && !secondary && !inverted,\n      //\n      [`${secondaryBackgroundClassName} border border-yellow py-[3px] px-[15px] text-black-100 hover:border-yellow-100 hover:bg-yellow-100 hover:text-black-100 focus:border-yellow-500 focus:bg-yellow-500 active:border-yellow-500 active:bg-yellow-500 ${\n        isLightMode\n          ? ''\n          : 'dark:text-white dark:hover:text-black-100 dark:focus:text-black-100 dark:active:text-black-100'\n      }`]: !disabled && secondary && !inverted,\n      //\n      'bg-grey text-grey-500 py-1 px-4': disabled,\n      //\n      'bg-black text-white py-1 px-4 active:bg-grey-600 hover:bg-grey-600 focus:bg-grey-600':\n        !disabled && !secondary && inverted,\n    },\n    'cta rounded-full inline-block min-h-min select-none',\n    className\n  );\n\n  return link?.url && (link?.name || children) && !disabled ? (\n    <a\n      className={buttonClasses}\n      href={link.url}\n      target={link.target}\n      data-epi-property-name={editHint}\n      onClick={linkCallback}\n      data-testid={dataTestId}\n    >\n      {children || link.name}\n    </a>\n  ) : (\n    <button\n      {...buttonProps}\n      className={buttonClasses}\n      disabled={disabled}\n      data-epi-property-name={editHint}\n      data-testid={dataTestId}\n    >\n      {children}\n    </button>\n  );\n};\n\nexport default Button;\n","import BreakpointEnum from '@models/enums/BreakpointEnum';\nimport { IImage } from '@models/IImage';\nimport useBreakpoint from '@utils/hooks/useBreakpoint';\nimport classNames from 'classnames';\nimport { PropsWithChildren, RefObject, useState } from 'react';\n\ninterface Props {\n  readonly classes?: string;\n  readonly dataTestId?: string;\n  readonly epiEdit?: string;\n  readonly image?: IImage;\n  readonly imageClasses?: string;\n  readonly imageRef?:\n    | RefObject<HTMLImageElement>\n    | ((node: HTMLElement | null) => void);\n  readonly lazyLoad?: boolean;\n  readonly progressiveLoad?: boolean;\n  readonly sizes?: string;\n}\n\nconst Image = ({\n  children,\n  classes,\n  dataTestId,\n  epiEdit,\n  image,\n  imageClasses,\n  imageRef,\n  lazyLoad = true,\n  progressiveLoad = true,\n  sizes = '',\n}: PropsWithChildren<Props>) => {\n  const mobileSource = image?.mobile;\n  const tabletSource = image?.tablet;\n  const desktopSource = image?.desktop;\n  const largeDesktopSource = image?.largeDesktop;\n  const breakpoint = useBreakpoint() as BreakpointEnum;\n  const [isLoaded, setIsLoaded] = useState<boolean>(false);\n\n  if (!desktopSource?.url) return null;\n\n  const currentSrc = {\n    [BreakpointEnum.Small]: mobileSource,\n    [BreakpointEnum.Medium]: tabletSource,\n    [BreakpointEnum.Large]: desktopSource,\n    [BreakpointEnum.XLarge]: largeDesktopSource,\n  };\n\n  return (\n    <picture className={classNames(classes)}>\n      <source\n        type=\"image/webp\"\n        sizes={sizes}\n        srcSet={`${mobileSource?.url} 376w, ${tabletSource?.url} 768w, ${desktopSource?.url} 1024w, ${largeDesktopSource?.url} 1440w`}\n      />\n      <img\n        ref={imageRef}\n        alt={image?.altText?.length ? image?.altText : 'nikon-image'}\n        className={classNames(\n          imageClasses,\n          'transition duration-500 ease-in-out'\n        )}\n        data-epi-property-name={epiEdit}\n        draggable=\"false\"\n        loading={lazyLoad ? 'lazy' : 'eager'}\n        onLoad={() => setIsLoaded(true)}\n        sizes={sizes}\n        src={\n          isLoaded && progressiveLoad\n            ? currentSrc[breakpoint]?.url\n            : mobileSource?.url\n        }\n        height={currentSrc[breakpoint]?.height}\n        width={currentSrc[breakpoint]?.width}\n        srcSet={`${mobileSource?.originalUrl} 376w, ${tabletSource?.originalUrl} 768w, ${desktopSource?.originalUrl} 1024w, ${largeDesktopSource?.originalUrl} 1440w`}\n        {...(dataTestId && { 'data-testid': dataTestId })}\n      />\n      {isLoaded && children}\n    </picture>\n  );\n};\n\nexport default Image;\n","import Hue from '@assets/hue.svg';\nimport Button from '@atoms/Button/Button';\nimport Image from '@atoms/Image/Image';\nimport { IImage } from '@models/IImage';\nimport { ILink } from '@models/ILink';\nimport useMediaQuery from '@utils/hooks/useMediaQuery';\nimport useResizeObserver from '@utils/hooks/useResizeObserver';\nimport classNames from 'classnames';\nimport { motion, useScroll, useSpring, useTransform } from 'framer-motion';\nimport { useRef } from 'react';\n\ninterface Props {\n  readonly title: string;\n  readonly subTitle: string;\n  readonly mainImage: IImage;\n  readonly secondaryImage?: IImage;\n  readonly cta?: ILink;\n  readonly glow: boolean;\n}\n\nconst SimplifiedProductImageGallery = ({\n  title,\n  subTitle,\n  mainImage,\n  secondaryImage,\n  cta,\n  glow,\n}: Props) => {\n  const isSmallDesktop = useMediaQuery(1440);\n  const isMobile = useMediaQuery(1024);\n  const [\n    mainImageContainerRef,\n    { height: mainImageContainerHeight, width: mainImageContainerWidth },\n  ] = useResizeObserver();\n  const mediaContainerRef = useRef<HTMLDivElement>(null);\n  const { scrollYProgress } = useScroll({\n    target: mediaContainerRef,\n    offset: ['start end', 'end start'],\n  });\n  const smoothScrollYProgress = useSpring(scrollYProgress, {\n    stiffness: 300,\n    damping: 50,\n  });\n  const mainImageTranslateYLimit = 60;\n  const mainImageTranslateY = useTransform(\n    smoothScrollYProgress,\n    [0, 0.5, 1],\n    [mainImageTranslateYLimit, 0, -mainImageTranslateYLimit]\n  );\n  const secondaryImageTranslateYLimit = isSmallDesktop ? 90 : 120;\n  const secondaryImageTranslateY = useTransform(\n    smoothScrollYProgress,\n    [0, 0.5, 1],\n    [secondaryImageTranslateYLimit, 0, -secondaryImageTranslateYLimit]\n  );\n\n  const hasTwoImages = !!mainImage && !!secondaryImage;\n\n  return (\n    <section\n      className=\"component-padding overflow-hidden bg-white pt-13 text-black-100 dark:bg-black-100 dark:text-white lg:pt-[110px]\"\n      data-testid=\"CT-14-A-Simplified-Product-Image-Gallery\"\n    >\n      <div\n        className=\"container flex grid-cols-12 flex-col xl:grid\"\n        ref={mediaContainerRef}\n      >\n        <div\n          className=\"relative z-10 flex flex-col justify-center gap-[15px] max-xl:items-center max-lg:pb-16 lg:gap-10 xl:col-span-5\"\n          data-testid=\"CT-14-A-Simplified-Product-Image-Gallery-Text-Container\"\n        >\n          <h1\n            className=\"mount max-xl:text-center\"\n            data-testid=\"CT-14-A-Simplified-Product-Image-Gallery-Title\"\n          >\n            {title}\n          </h1>\n          <p\n            className={classNames(\n              'text-grey-450 dark:text-grey-400 max-xl:text-center',\n              isMobile ? 'h5' : 'h3'\n            )}\n            data-testid=\"CT-14-A-Simplified-Product-Image-Gallery-Subtitle\"\n          >\n            {subTitle}\n          </p>\n          {cta?.name && cta.url && (\n            <Button\n              link={cta}\n              className=\"mt-2.5 w-fit xl:mt-4\"\n              dataTestId=\"CT-14-A-Simplified-Product-Image-Gallery-CTA\"\n            />\n          )}\n        </div>\n        <div\n          className={classNames(\n            'flex justify-end xl:col-span-6 xl:col-start-8',\n            { relative: hasTwoImages }\n          )}\n          data-testid=\"CT-14-A-Simplified-Product-Image-Gallery-Media-Container\"\n          ref={mainImageContainerRef}\n        >\n          <motion.div\n            style={{\n              ...(hasTwoImages ? { translateY: mainImageTranslateY } : {}),\n            }}\n            className={classNames({\n              'relative max-xl:w-[85%]': hasTwoImages,\n            })}\n          >\n            <Image\n              image={mainImage}\n              sizes=\"(min-width: 1024px) 1024px, 100vw\"\n              dataTestId=\"CT-14-A-Simplified-Product-Image-Gallery-Main-Image\"\n            />\n\n            {hasTwoImages && glow && (\n              <motion.img\n                src={`${Hue}`}\n                alt=\"hue\"\n                style={{\n                  height: mainImageContainerHeight,\n                  width: mainImageContainerWidth,\n                  translateY: mainImageTranslateY,\n                  scale: 2.5,\n                  opacity: 0.35,\n                }}\n                className=\"absolute bottom-0 -z-max max-h-full xl:-bottom-20 xl:-left-36\"\n                data-testid=\"CT-14-A-Simplified-Product-Image-Gallery-Glow-Image\"\n              />\n            )}\n          </motion.div>\n        </div>\n\n        {hasTwoImages && (\n          <motion.div\n            style={{ translateY: secondaryImageTranslateY, zIndex: 3 }}\n            className=\"relative xl:col-span-2 xl:col-start-7\"\n          >\n            <div className=\"absolute -bottom-5 left-0 flex max-h-[86px] max-w-[114px] md:max-h-[180px] md:max-w-[240px] xl:-bottom-20 xl:max-h-[390px] xl:max-w-[470px]\">\n              <Image\n                image={secondaryImage}\n                imageClasses=\"h-full object-contain\"\n                dataTestId=\"CT-14-A-Simplified-Product-Image-Gallery-Main-Image\"\n              />\n            </div>\n          </motion.div>\n        )}\n      </div>\n    </section>\n  );\n};\n\nexport default SimplifiedProductImageGallery;\n","const enum BreakpointEnum {\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n  XLarge = 'xl',\n}\n\nexport default BreakpointEnum;\n","import BreakpointEnum from '@models/enums/BreakpointEnum';\nimport { useCallback, useEffect, useState } from 'react';\n\nconst getCurrentBreakpoint = () => {\n  const breakpoints = { tablet: 768, desktop: 1024, lgDesktop: 1440 };\n  const width = window.innerWidth;\n\n  if (width < breakpoints.tablet) {\n    return BreakpointEnum.Small;\n  }\n  if (width >= breakpoints.tablet && width < breakpoints.desktop) {\n    return BreakpointEnum.Medium;\n  }\n  if (width >= breakpoints.desktop && width < breakpoints.lgDesktop) {\n    return BreakpointEnum.Large;\n  }\n  return BreakpointEnum.XLarge;\n};\n\nconst useBreakpoint = () => {\n  const [screen, setScreen] = useState<BreakpointEnum>();\n\n  const resizeHandler = useCallback(\n    () => setScreen(getCurrentBreakpoint()),\n    []\n  );\n\n  useEffect(() => {\n    window.addEventListener('resize', resizeHandler);\n    setScreen(getCurrentBreakpoint());\n\n    return () => {\n      window.removeEventListener('resize', resizeHandler);\n    };\n  }, [resizeHandler]);\n\n  return screen;\n};\n\nexport default useBreakpoint;\n","import { useCallback, useEffect, useState } from 'react';\n\nconst useMediaQuery = (minWidth: number) => {\n  // Set the default value to undefined in order to properly distinguish the falsey values\n  // where undefined is the value before computing whether the screen size is smaller than the minWidth\n  // i.e. a state where we don't really know whether we're below the threshold or not\n  // and false is the value where the computation returns false\n  const [isSmallerThan, setIsSmallerThan] = useState<boolean>();\n\n  const handler = useCallback(() => {\n    const isDesiredWidth = window.innerWidth < minWidth;\n    setIsSmallerThan(isDesiredWidth);\n  }, [minWidth]);\n\n  useEffect(() => {\n    window.addEventListener('resize', handler);\n    handler();\n\n    return () => {\n      window.removeEventListener('resize', handler);\n    };\n  }, [handler]);\n\n  return isSmallerThan;\n};\n\nexport default useMediaQuery;\n","import { useCallback, useRef, useState } from 'react';\n\nconst useResizeObserver = () => {\n  const observerRef = useRef<ResizeObserver>();\n  const [resizeParameters, setResizeParameters] = useState({\n    width: 0,\n    height: 0,\n    clientWidth: 0,\n    clientHeight: 0,\n    scrollWidth: 0,\n    scrollHeight: 0,\n  });\n\n  const handleResize = useCallback((entries: ResizeObserverEntry[]) => {\n    if (!Array.isArray(entries)) return;\n\n    const entry = entries[0];\n\n    setResizeParameters({\n      width: entry?.contentRect.width ?? 0,\n      height: entry?.contentRect.height ?? 0,\n      clientWidth: entry?.target.clientWidth ?? 0,\n      clientHeight: entry?.target.clientHeight ?? 0,\n      scrollWidth: entry?.target.scrollWidth ?? 0,\n      scrollHeight: entry?.target.scrollHeight ?? 0,\n    });\n  }, []);\n\n  const ref = useCallback(\n    (node: HTMLElement | null) => {\n      if (observerRef.current && !node) {\n        observerRef.current.disconnect();\n        observerRef.current = undefined;\n      }\n\n      if (!observerRef.current && node) {\n        observerRef.current = new ResizeObserver(handleResize);\n        observerRef.current.observe(node);\n      }\n    },\n    [handleResize]\n  );\n\n  return [ref, resizeParameters] as const;\n};\n\nexport default useResizeObserver;\n","module.exports = \"data:image/svg+xml,%3csvg width='906' height='906' viewBox='0 0 906 906' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg opacity='0.5' filter='url(%23filter0_df_5839_100698)'%3e %3ccircle cx='453' cy='453' r='263' fill='%23FFDD00'/%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_df_5839_100698' x='0' y='0' width='906' height='906' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dy='1.66516'/%3e %3cfeGaussianBlur stdDeviation='0.832579'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_5839_100698'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_5839_100698' result='shape'/%3e %3cfeGaussianBlur stdDeviation='95' result='effect2_foregroundBlur_5839_100698'/%3e %3c/filter%3e %3c/defs%3e %3c/svg%3e\""],"names":["_ref","children","className","dataTestId","disabled","editHint","link","linkCallback","secondary","secondaryBackgroundClassName","isLightMode","inverted","buttonProps","buttonClasses","classNames","url","name","React","createElement","href","target","onClick","_extends","classes","epiEdit","image","imageClasses","imageRef","lazyLoad","progressiveLoad","sizes","mobileSource","mobile","tabletSource","tablet","desktopSource","desktop","largeDesktopSource","largeDesktop","breakpoint","useBreakpoint","isLoaded","setIsLoaded","useState","currentSrc","BreakpointEnum","Small","Medium","Large","XLarge","type","srcSet","ref","alt","altText","length","draggable","loading","onLoad","src","height","width","originalUrl","title","subTitle","mainImage","secondaryImage","cta","glow","isSmallDesktop","useMediaQuery","isMobile","mainImageContainerRef","mainImageContainerHeight","mainImageContainerWidth","useResizeObserver","mediaContainerRef","useRef","scrollYProgress","useScroll","offset","smoothScrollYProgress","useSpring","stiffness","damping","mainImageTranslateY","useTransform","secondaryImageTranslateYLimit","secondaryImageTranslateY","hasTwoImages","Button","relative","motion","div","style","translateY","Image","img","Hue","scale","opacity","zIndex","getCurrentBreakpoint","breakpoints","window","innerWidth","screen","setScreen","resizeHandler","useCallback","useEffect","addEventListener","removeEventListener","minWidth","isSmallerThan","setIsSmallerThan","handler","isDesiredWidth","observerRef","resizeParameters","setResizeParameters","clientWidth","clientHeight","scrollWidth","scrollHeight","handleResize","entries","Array","isArray","entry","contentRect","node","current","disconnect","undefined","ResizeObserver","observe","module","exports"],"sourceRoot":""}