{"version":3,"file":"ImageCarousel-Chunk-bcfa84fb90a8b691666d.js","mappings":"6NAoBA,MAsFA,EAtFwBA,IASX,IATY,MACvBC,EAAK,SACLC,EAAQ,IACRC,EAAG,eACHC,GAAiB,EAAK,cACtBC,EAAgB,WAAU,gBAC1BC,GAAkB,EAAK,WACvBC,EAAU,YACVC,GACMR,EACN,MAAMS,GAAWC,EAAAA,EAAAA,GAAc,MAE/B,OACEC,MAAAC,cAAA,OACEC,UAAU,qDACV,cAAaN,IAEXN,GAASC,IACTS,MAAAC,cAAA,OACEC,UAAW,gCACTV,GAAKW,KAAON,EACR,gBACA,mBAAkBF,EAAkB,gBAAkB,eAG5DK,MAAAC,cAAA,OAAKC,UAAU,2BACZZ,GAASU,MAAAC,cAAA,UAAKX,GACdG,GACCO,MAAAC,cAACG,EAAAA,EAAI,CACHC,KAAK,eACLC,eAAe,cACfC,KAAMT,EAAW,WAAa,cAInCP,GAAYS,MAAAC,cAAA,KAAGC,UAAWR,GAAgBH,GAC1CC,GAAKW,KAAON,GACXG,MAAAC,cAACO,EAAAA,EAAM,CACLC,KAAMjB,EACNkB,aAAcA,MACZC,EAAAA,EAAAA,GAAgB,CACdC,MAAO,gBACPC,aAAcrB,EAAIa,MAClB,EAEJH,UAAU,mBAKhBV,GAAKW,KAAON,IACZG,MAAAC,cAAA,OACEC,UAAWY,IACT,4EACAjB,EAAc,oBAAsB,mBAGrCA,GACCG,MAAAC,cAAA,OAAKC,UAAU,wBACbF,MAAAC,cAACc,EAAAA,EAAS,CACRC,GAAInB,EACJoB,UAAWC,EAAAA,EAAwBC,OAErCnB,MAAAC,cAACc,EAAAA,EAAS,CACRC,GAAInB,EACJoB,UAAWC,EAAAA,EAAwBE,SAIxC5B,GAAKW,MAAQN,GACZG,MAAAC,cAACO,EAAAA,EAAM,CACLC,KAAMjB,EACNkB,aAAcA,MACZC,EAAAA,EAAAA,GAAgB,CACdC,MAAO,gBACPC,aAAcrB,EAAIa,MAClB,KAMR,C,wTCpFV,MA0EA,EA1EsBhB,IAQT,IARU,MACrBC,EAAK,SACL+B,EAAQ,KACRZ,EAAI,OACJa,EAAM,UACNC,EAAS,eACT9B,EAAc,SACd+B,EAAW,IACLnC,EACN,MAEMQ,EAAc,kBAAkB2B,IAEtC,OACExB,MAAAC,cAAA,WACEe,GAAI,KAAKQ,IACTtB,UAAU,wMACV,cAAY,+BAEVZ,GAAS+B,GAAYZ,GAAMN,MAC3BH,MAAAC,cAACwB,EAAAA,EAAe,CACdnC,MAAOA,EACPC,SAAU8B,EACV3B,cAAc,4CACdD,eAAgBA,EAChBD,IAAKiB,EACLb,WAAW,wCACXC,YAAaA,IAIhByB,GAAQI,OAAS,GAChB1B,MAAAC,cAAA,OAAKC,UAAU,kBACbF,MAAAC,cAAA,OAAKC,UAAU,8CACbF,MAAAC,cAAC0B,EAAAA,EAAQ,CACPzB,UAAU,SACV0B,YAAa,CACX,IAAK,CACHC,aAAc,KAGlBC,UAAQ,EACRC,gBAAc,EACdC,OAASC,IACPA,EAAOC,QAAQ,EAEjBC,cAAc,OACdN,aAAc,GACdO,MAAOvC,GAENyB,EAAOe,KAAI,CAACC,EAAOC,IAClBvC,MAAAC,cAACuC,EAAAA,GAAW,CACVC,IAAK,sBAAsBH,EAAMI,MAAMC,cACvCzC,UAAU,YAEVF,MAAAC,cAAC2C,EAAAA,EAAaC,EAAA,CACZC,WAAYxB,EAAOe,KACjBU,IAAA,IAAGL,KAAMM,GAAWD,EAAA,OAAKC,GAAWL,WAAW,IAEjDM,aAlDC,6CAmDD1B,UAAWA,GACPe,EAAK,CACT1C,WAAY,iCAAiC2C,aAQnD,C","sources":["webpack://nikon-client/./components/atoms/ComponentHeader/ComponentHeader.tsx","webpack://nikon-client/./components/organisms/ImageCarousel/ImageCarousel.tsx"],"sourcesContent":["import Button from '@atoms/Button/Button';\nimport Icon from '@atoms/Icon/Icon';\nimport NavButton from '@atoms/NavButton/NavButton';\nimport HorizontalDirectionEnum from '@models/enums/HorizontalDirectionEnum';\nimport { ILink } from '@models/ILink';\nimport updateDataLayer from '@utils/helpers/gtm';\nimport useMediaQuery from '@utils/hooks/useMediaQuery';\nimport classNames from 'classnames';\n\ninterface Props {\n  title?: string;\n  subtitle?: string;\n  cta?: ILink;\n  showYellowTick?: boolean;\n  subtitleClass?: string;\n  hasTextMaxWidth?: boolean;\n  dataTestId?: string;\n  navButtonId?: string;\n}\n\nconst ComponentHeader = ({\n  title,\n  subtitle,\n  cta,\n  showYellowTick = false,\n  subtitleClass = 'body-one',\n  hasTextMaxWidth = false,\n  dataTestId,\n  navButtonId,\n}: Props) => {\n  const isMobile = useMediaQuery(1024);\n\n  return (\n    <div\n      className=\"container grid grid-cols-1 gap-x-4 lg:grid-cols-12\"\n      data-testid={dataTestId}\n    >\n      {(title || subtitle) && (\n        <div\n          className={`mb-7.5 flex flex-col gap-2.5 ${\n            cta?.url || navButtonId\n              ? 'lg:col-span-9'\n              : `lg:col-span-12 ${hasTextMaxWidth ? 'max-w-[812px]' : ''}`\n          } lg:mb-0`}\n        >\n          <div className=\"flex items-center gap-5\">\n            {title && <h2>{title}</h2>}\n            {showYellowTick && (\n              <Icon\n                name=\"check_circle\"\n                colorClassName=\"text-yellow\"\n                size={isMobile ? '1.275rem' : '1.875rem'}\n              />\n            )}\n          </div>\n          {subtitle && <p className={subtitleClass}>{subtitle}</p>}\n          {cta?.url && navButtonId && (\n            <Button\n              link={cta}\n              linkCallback={() => {\n                updateDataLayer({\n                  event: 'selectContent',\n                  content_type: cta.name,\n                });\n              }}\n              className=\"w-fit mt-1.5\"\n            />\n          )}\n        </div>\n      )}\n      {(cta?.url || navButtonId) && (\n        <div\n          className={classNames(\n            'lg:col-span-3 lg:col-start-10 lg:flex lg:items-end lg:flex-col lg:gap-2.5',\n            navButtonId ? 'lg:justify-center' : 'lg:justify-end'\n          )}\n        >\n          {navButtonId && (\n            <div className=\"lg:flex gap-5 hidden\">\n              <NavButton\n                id={navButtonId}\n                direction={HorizontalDirectionEnum.Left}\n              />\n              <NavButton\n                id={navButtonId}\n                direction={HorizontalDirectionEnum.Right}\n              />\n            </div>\n          )}\n          {cta?.url && !navButtonId && (\n            <Button\n              link={cta}\n              linkCallback={() => {\n                updateDataLayer({\n                  event: 'selectContent',\n                  content_type: cta.name,\n                });\n              }}\n            />\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default ComponentHeader;\n","import ComponentHeader from '@atoms/ComponentHeader/ComponentHeader';\nimport { ICameraImage } from '@models/ICameraImage';\nimport { ILink } from '@models/ILink';\nimport ImageLightBoxTypeEnum from '@models/enums/ImageLightBoxTypeEnum';\nimport Carousel from '@molecules/Carousel/Carousel';\nimport ImageLightBox from '@molecules/ImageLightBox/ImageLightBox';\nimport { SwiperSlide } from 'swiper/react';\n\ninterface Props {\n  readonly title?: string;\n  readonly subTitle?: string;\n  readonly link?: ILink;\n  readonly images: ICameraImage[];\n  readonly imageType: ImageLightBoxTypeEnum;\n  readonly showYellowTick: boolean;\n  readonly anchorId?: string;\n}\n\nconst ImageCarousel = ({\n  title,\n  subTitle,\n  link,\n  images,\n  imageType,\n  showYellowTick,\n  anchorId = '',\n}: Props) => {\n  const imageClass = 'h-[220px] lg:h-[400px] xl:h-[640px] w-auto';\n\n  const navButtonId = `image-carousel-${anchorId}`;\n\n  return (\n    <section\n      id={`a-${anchorId}`}\n      className=\"noselect component-padding flex min-h-[220px] flex-col items-center justify-center gap-10 overflow-hidden bg-white text-black-100 dark:bg-black-100 dark:text-white lg:min-h-[400px] xl:min-h-[640px]\"\n      data-testid=\"CT-44-Image-Carousel-Block\"\n    >\n      {(title || subTitle || link?.url) && (\n        <ComponentHeader\n          title={title}\n          subtitle={subTitle}\n          subtitleClass=\"text-grey-450 dark:text-grey-500 body-two\"\n          showYellowTick={showYellowTick}\n          cta={link}\n          dataTestId=\"CT-44-Image-Carousel-Component-Header\"\n          navButtonId={navButtonId}\n        />\n      )}\n\n      {images?.length > 0 && (\n        <div className=\"image-carousel\">\n          <div className=\"overflow-swiper container overflow-visible\">\n            <Carousel\n              className=\"w-full\"\n              breakpoints={{\n                768: {\n                  spaceBetween: 30,\n                },\n              }}\n              observer\n              observeParents\n              onInit={(swiper) => {\n                swiper.update();\n              }}\n              slidesPerView=\"auto\"\n              spaceBetween={20}\n              navId={navButtonId}\n            >\n              {images.map((image, index) => (\n                <SwiperSlide\n                  key={`img-carousel-slide-${image.meta?.contentLink}`}\n                  className=\"relative\"\n                >\n                  <ImageLightBox\n                    contentIds={images.map(\n                      ({ meta: imageMeta }) => imageMeta?.contentLink as string\n                    )}\n                    imageClasses={imageClass}\n                    imageType={imageType}\n                    {...image}\n                    dataTestId={`CT-44-Image-Carousel-Lightbox-${index}`}\n                  />\n                </SwiperSlide>\n              ))}\n            </Carousel>\n          </div>\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default ImageCarousel;\n"],"names":["_ref","title","subtitle","cta","showYellowTick","subtitleClass","hasTextMaxWidth","dataTestId","navButtonId","isMobile","useMediaQuery","React","createElement","className","url","Icon","name","colorClassName","size","Button","link","linkCallback","updateDataLayer","event","content_type","classNames","NavButton","id","direction","HorizontalDirectionEnum","Left","Right","subTitle","images","imageType","anchorId","ComponentHeader","length","Carousel","breakpoints","spaceBetween","observer","observeParents","onInit","swiper","update","slidesPerView","navId","map","image","index","SwiperSlide","key","meta","contentLink","ImageLightBox","_extends","contentIds","_ref2","imageMeta","imageClasses"],"sourceRoot":""}