@anker-in/headless-ui 1.3.42 → 1.3.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js.map +2 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map +2 -2
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var D=Object.create;var B=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var q=(a,t)=>{for(var s in t)B(a,s,{get:t[s],enumerable:!0})},z=(a,t,s,w)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of A(t))!Y.call(a,i)&&i!==s&&B(a,i,{get:()=>t[i],enumerable:!(w=H(t,i))||w.enumerable});return a};var M=(a,t,s)=>(s=a!=null?D(Q(a)):{},z(t||!a||!a.__esModule?B(s,"default",{value:a,enumerable:!0}):s,a)),Z=a=>z(B({},"__esModule",{value:!0}),a);var J={};q(J,{default:()=>F});module.exports=Z(J);var e=require("react/jsx-runtime"),o=M(require("react")),O=require("react-responsive"),S=require("../../shared/Styles.js"),P=M(require("../../components/picture.js")),V=M(require("../../components/button.js")),I=require("../../components/heading.js"),U=require("../VideoModal/index.js"),p=require("../../helpers/utils.js"),R=M(require("../SwiperBox/index.js")),L=require("../../shared/mimeType.js"),E=require("../../hooks/useExposure.js"),T=require("../../shared/trackUrlRef.js"),_=require("../AiuiProvider/index.js");const b="image",v="p1_banner",j=({data:a,configuration:t,jIndex:s})=>{const[w,i]=(0,o.useState)(!1),g=(0,O.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,o.useRef)(null),x=()=>{switch(t?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,E.useExposure)(m,{componentType:b,componentName:v,position:s,componentTitle:a.title,componentDescription:a.description,navigation:t?.activeTab}),(0,o.useEffect)(()=>{i(g)},[g]);const{theme:k="light",title:r,description:
|
|
1
|
+
"use strict";var D=Object.create;var B=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var q=(a,t)=>{for(var s in t)B(a,s,{get:t[s],enumerable:!0})},z=(a,t,s,w)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of A(t))!Y.call(a,i)&&i!==s&&B(a,i,{get:()=>t[i],enumerable:!(w=H(t,i))||w.enumerable});return a};var M=(a,t,s)=>(s=a!=null?D(Q(a)):{},z(t||!a||!a.__esModule?B(s,"default",{value:a,enumerable:!0}):s,a)),Z=a=>z(B({},"__esModule",{value:!0}),a);var J={};q(J,{default:()=>F});module.exports=Z(J);var e=require("react/jsx-runtime"),o=M(require("react")),O=require("react-responsive"),S=require("../../shared/Styles.js"),P=M(require("../../components/picture.js")),V=M(require("../../components/button.js")),I=require("../../components/heading.js"),U=require("../VideoModal/index.js"),p=require("../../helpers/utils.js"),R=M(require("../SwiperBox/index.js")),L=require("../../shared/mimeType.js"),E=require("../../hooks/useExposure.js"),T=require("../../shared/trackUrlRef.js"),_=require("../AiuiProvider/index.js");const b="image",v="p1_banner",j=({data:a,configuration:t,jIndex:s})=>{const[w,i]=(0,o.useState)(!1),g=(0,O.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,o.useRef)(null),x=()=>{switch(t?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,E.useExposure)(m,{componentType:b,componentName:v,position:s,componentTitle:a.title,componentDescription:a.description,navigation:t?.activeTab}),(0,o.useEffect)(()=>{i(g)},[g]);const{theme:k="light",title:r,description:n,imageUrl:l,primaryButton:u,secondaryButton:h,imageMobileUrl:y,blockLink:f,video:c,youtubeId:d,isYouTube:$}=a,N="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,p.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",x(),{"rounded-box":!0,"aiui-dark":k==="dark","h-[400px]":w},"text-info-primary"),ref:m,children:[f&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,T.trackUrlRef)((0,p.getLocalizedPath)(f||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${r}#${n}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,L.isVideo)(l?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:(0,e.jsx)("source",{src:l?.url,type:"video/mp4"})}):(0,e.jsx)(P.default,{source:l?.url,alt:l?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${l?.width}/${l?.height}`}}),(0,L.isVideo)(y?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:(0,e.jsx)("source",{src:y?.url,type:"video/mp4"})}):(0,e.jsx)(P.default,{source:y?.url||l?.url,alt:y?.alt||l?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,e.jsxs)("div",{className:(0,p.cn)("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":a?.width==="full"}),children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)(I.Heading,{size:3,as:"h3",className:"item-title",html:r}),(0,e.jsx)(I.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:n})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[h&&h.text&&(0,e.jsxs)(V.default,{"aria-label":r??n,className:(0,p.cn)(N,"link-left pointer-events-auto"),variant:"secondary",as:"a",href:(0,T.trackUrlRef)((0,p.getLocalizedPath)(h.link||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${r}#${n}#${h?.text}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,children:[h.text,(0,e.jsx)("span",{className:"sr-only",children:r??n})]}),u&&u.text&&(0,e.jsx)(V.default,{"aria-label":r??n,className:(0,p.cn)(N,"link-right pointer-events-auto"),variant:"primary",as:"a",href:(0,T.trackUrlRef)((0,p.getLocalizedPath)(u.link||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${r}#${n}#${u.text}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,children:u.text})]})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:(c?.url||d)&&(0,e.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(c?.url||d,$)},className:"laptop:size-12 hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:k==="dark"?"black":"white",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z"})})})})})]})},G=o.default.forwardRef((a,t)=>{const{data:s,className:w,...i}=a,{shape:g,items:m=[]}=s,[x,k]=(0,o.useState)(!1),[r,n]=(0,o.useState)(""),[l,u]=(0,o.useState)(""),{locale:h="us"}=(0,_.useAiuiContext)(),y=(c,d)=>{k(!0),d?u?.(c||""):n?.(c||"")},f=c=>{const d=m?.length,$=d>3,N=d>2,C=d>1;switch(!0){case c>=1440:case c>=1024:return $?3:d;case c>=768:return $||N?2.3:C?2:1;default:return C?1.2:1}};return(0,e.jsxs)("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...i,className:(0,p.cn)("graphicOverlayBlock text-info-primary ",w),children:[m&&m.length>0?(0,e.jsx)(R.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m||[],configuration:{shape:g,num:m.length,locale:h,onVideoPlayBtnClick:y}},Slide:j,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}}):null,x&&(0,e.jsx)(U.VideoModal,{visible:x,youTubeId:l,videoUrl:r,onCloseModal:()=>k(!1)})]})});G.displayName="GraphicOverlayBlock";var F=(0,S.withLayout)(G);
|
|
2
2
|
//# sourceMappingURL=GraphicOverlay.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/GraphicOverlay/GraphicOverlay.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-box': true,\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n ></a>\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n <div\n className={cn(\n 'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n {\n 'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n <div>\n <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n {(video?.url || youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n }}\n className=\"laptop:size-12 hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80\"\n >\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill={theme === 'dark' ? 'black' : 'white'}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M12 7L0 14L0 0L12 7Z\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n const { data, className, ...rest } = props\n const { shape, items = [] } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n\n const handleSwiperShow = (width: number) => {\n const len = items?.length\n const isShow = len > 3\n const isMiddle = len > 2\n const isMobile = len > 1\n\n switch (true) {\n case width >= 1440:\n case width >= 1024:\n return isShow ? 3 : len\n case width >= 768:\n if (isShow || isMiddle) {\n return 2.3\n }\n return isMobile ? 2 : 1\n default:\n return isMobile ? 1.2 : 1\n }\n }\n\n return (\n <section\n data-ui-component-id=\"GraphicOverlay\"\n ref={ref}\n {...rest}\n className={cn('graphicOverlayBlock text-info-primary ', className)}\n >\n {items && items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: items || [],\n configuration: {\n shape: shape,\n num: items.length,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(374),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n ) : null}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFQ,IAAAI,EAAA,6BAzFRC,EAAmD,oBACnDC,EAA8B,4BAE9BC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAA2B,kCAC3BC,EAAqC,kCACrCC,EAAsB,oCACtBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAA+B,oCAE/B,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,CACF,IAKM,CACJ,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAkB,EAAK,EACjDC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DC,KAAM,UAAuB,IAAI,EAEjCC,EAAe,IAAM,CACzB,OAAQN,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,KAEA,eAAYK,EAAK,CACf,cAAeT,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,KAED,aAAU,IAAM,CACdG,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,CACF,EAAIlB,EACEmB,EAAe,mFAErB,SACE,QAAC,OACC,aAAW,MACT,kFACAZ,EAAa,EACb,CACE,cAAe,GACf,YAAaC,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEJ,UAAAS,MACC,OAAC,KACC,UAAU,wBACV,QAAM,kBACJ,oBAAiBA,GAAa,GAAId,GAAe,QAAU,IAAI,EAC/D,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGW,CAAK,IAAIC,CAAW,GACxD,6BAA4B,GAAGT,GAAe,SAAS,IAAIC,CAAM,GACjE,cAAY,OACZ,SAAU,GACX,KAEH,QAAC,OAAI,UAAU,mBACZ,wBAAQS,GAAU,QAAQ,KACzB,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6CAC/C,mBAAC,UAAO,IAAKA,GAAU,IAAK,KAAK,YAAY,EAC/C,KAEA,OAAC,EAAAS,QAAA,CACC,OAAQT,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,KAED,WAAQG,GAAgB,QAAQ,KAC/B,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6CAC/C,mBAAC,UAAO,IAAKA,GAAgB,IAAK,KAAK,YAAY,EACrD,KAEA,OAAC,EAAAM,QAAA,CACC,OAAQN,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,KAEF,QAAC,OACC,aAAW,MACT,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-box': true,\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n ></a>\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n <div\n className={cn(\n 'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n {\n 'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left pointer-events-auto')}\n variant=\"secondary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right pointer-events-auto')}\n variant=\"primary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n <div>\n <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n {(video?.url || youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n }}\n className=\"laptop:size-12 hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80\"\n >\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill={theme === 'dark' ? 'black' : 'white'}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M12 7L0 14L0 0L12 7Z\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n const { data, className, ...rest } = props\n const { shape, items = [] } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n\n const handleSwiperShow = (width: number) => {\n const len = items?.length\n const isShow = len > 3\n const isMiddle = len > 2\n const isMobile = len > 1\n\n switch (true) {\n case width >= 1440:\n case width >= 1024:\n return isShow ? 3 : len\n case width >= 768:\n if (isShow || isMiddle) {\n return 2.3\n }\n return isMobile ? 2 : 1\n default:\n return isMobile ? 1.2 : 1\n }\n }\n\n return (\n <section\n data-ui-component-id=\"GraphicOverlay\"\n ref={ref}\n {...rest}\n className={cn('graphicOverlayBlock text-info-primary ', className)}\n >\n {items && items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: items || [],\n configuration: {\n shape: shape,\n num: items.length,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(374),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n ) : null}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["GraphicOverlay_exports", "__export", "GraphicOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_utils", "import_SwiperBox", "import_mimeType", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "GraphicOverlay", "React", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var W=Object.create;var S=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var se=(l,a)=>{for(var o in a)S(l,o,{get:a[o],enumerable:!0})},U=(l,a,o,u)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of ee(a))!ae.call(l,n)&&n!==o&&S(l,n,{get:()=>a[n],enumerable:!(u=X(a,n))||u.enumerable});return l};var $=(l,a,o)=>(o=l!=null?W(te(l)):{},U(a||!l||!l.__esModule?S(o,"default",{value:l,enumerable:!0}):o,l)),le=l=>U(S({},"__esModule",{value:!0}),l);var ie={};se(ie,{default:()=>oe});module.exports=le(ie);var e=require("react/jsx-runtime"),r=$(require("react")),A=require("react-responsive"),Q=$(require("./MultiLayoutGraphicBlockCarousel.js")),Y=require("../../shared/Styles.js"),R=$(require("../../components/picture.js")),j=$(require("../../components/button.js")),E=require("../../components/heading.js"),q=require("../VideoModal/index.js"),V=require("../../components/grid.js"),O=$(require("../Title/index.js")),i=require("../../helpers/utils.js"),_=$(require("../SwiperBox/index.js")),H=require("../../shared/mimeType.js"),y=require("../../components/tabs.js"),Z=require("../../hooks/useExposure.js"),z=require("../../shared/trackUrlRef.js"),F=require("../AiuiProvider/index.js"),J=require("../../shared/track.js");const w="image",g="p1_banner",C=({data:l,configuration:a,jIndex:o,spanType:u,title:n,onSecondaryButtonClick:v,onPrimaryButtonClick:L})=>{const[c,N]=(0,r.useState)(!1),k=(0,A.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,r.useRef)(null),I=()=>{if(u)switch(u){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(a?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,Z.useExposure)(m,{componentType:w,componentName:g,position:o,componentTitle:l.title,componentDescription:l.description,navigation:a?.activeTab}),(0,r.useEffect)(()=>{N(k)},[k]);const{theme:G="light",title:f,description:h,imageUrl:d,primaryButton:B,secondaryButton:p,imageMobileUrl:x,blockLink:T,video:b,youtubeId:M,isYouTube:P,id:t}=l,s="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,i.cn)("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",I(),{"rounded-box":!0,"aiui-dark":G==="dark","h-[400px]":c},"text-info-primary"),ref:m,children:[(T||p.link)&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,z.trackUrlRef)((0,i.getLocalizedPath)(T||p.link||"",a?.locale||"us"),`${w}_${g}`),"data-headless-type-name":`${w}#${g}`,"data-headless-title-desc-button":`${f}#${h}`,"data-headless-nav-position":`${a?.activeTab}#${o}`,"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,H.isVideo)(d?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:(0,e.jsx)("source",{src:d?.url,type:"video/mp4"})}):(0,e.jsx)(R.default,{source:d?.url,alt:d?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${d?.width}/${d?.height}`}}),(0,H.isVideo)(x?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:(0,e.jsx)("source",{src:x?.url,type:"video/mp4"})}):(0,e.jsx)(R.default,{source:x?.url||d?.url,alt:x?.alt||d?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),(0,e.jsxs)("div",{className:(0,i.cn)("pointer-events-none absolute inset-0 z-20 flex flex-col",u==="full"?"laptop:justify-center justify-end":"justify-end"),children:[(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)(E.Heading,{size:3,as:"h3",className:"item-title",html:f}),(0,e.jsx)(E.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",html:h})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[p&&p.text&&(0,e.jsxs)(j.default,{"aria-label":f??h,className:(0,i.cn)(s,"link-left"),variant:"secondary",as:"a","data-track":`${t}-link-left`,onClick:()=>{v?.(l)},href:(0,z.trackUrlRef)((0,i.getLocalizedPath)(p.link||"",a?.locale||"us"),`${w}_${g}`),"data-headless-type-name":`${w}#${g}`,"data-headless-title-desc-button":`${f}#${h}#${p.text}`,"data-headless-nav-position":`${a?.activeTab}#${o}`,children:[p.text,(0,e.jsx)("span",{className:"sr-only",children:f??h})]}),B&&B.text&&(0,e.jsx)(j.default,{"aria-label":f??h,className:(0,i.cn)(s,"link-right"),variant:"primary","data-track":`${t}-link-right`,as:"a",onClick:()=>{L?.(l)},href:(0,z.trackUrlRef)((0,i.getLocalizedPath)(B.link||"",a?.locale||"us"),`${w}_${g}`),"data-headless-type-name":`${w}#${g}`,"data-headless-title-desc-button":`${f}#${h}#${B.text}`,"data-headless-nav-position":`${a?.activeTab}#${o}`,children:B.text})]})]}),(b?.url||M)&&(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4",children:(0,e.jsx)("button",{onClick:()=>{a?.onVideoPlayBtnClick?.(P&&M?M:b?.url||M,P)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},D=r.default.forwardRef((l,a)=>{const{data:o,className:u,onSecondaryButtonClick:n,onPrimaryButtonClick:v,...L}=l,{sectionTitle:c,groupByTab:N=!1,items:k=[],carousel:m}=o,[I,G]=(0,r.useState)(!1),[f,h]=(0,r.useState)(""),[d,B]=(0,r.useState)(""),{locale:p="us"}=(0,F.useAiuiContext)(),x=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},T=k.map(t=>t.tabName).filter(Boolean).filter((t,s,K)=>K.indexOf(t)===s),b=(t,s)=>{G(!0),s?B?.(t||""):h?.(t||"")},M=(t,s)=>{switch(t){case 1:return 1;case 2:return 2;default:return s?2.3:3}},P=T.map(t=>({tabName:t,items:k.filter(s=>s.tabName===t)})).reduce((t,s)=>(t[s.tabName]=s.items,t),{});return o.mode==="carousel"&&k.length>0?(0,e.jsx)(Q.default,{data:o,onPrimaryButtonClick:v,onSecondaryButtonClick:n,className:u,ref:a,...L}):(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:a,...L,className:(0,i.cn)("multiLayoutGraphicBlock","text-info-primary",u),children:[c&&(0,e.jsx)(O.default,{data:{title:c},className:"section-title"}),N?(0,e.jsxs)(y.Tabs,{align:"left",defaultValue:(0,i.spaceToHyphen)(T[0]),children:[(0,e.jsx)(y.TabsList,{children:T.map((t,s)=>(0,e.jsx)(y.TabsTrigger,{value:(0,i.spaceToHyphen)(t),onClick:()=>{(0,J.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:w,component_name:g,component_title:c,component_position:1,navigation:t,button_name:t}})},children:t},s))}),T.map((t,s)=>(0,e.jsx)(y.TabsContent,{value:(0,i.spaceToHyphen)(t),className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(_.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:P?.[t]||[],configuration:{isTab:N,activeTab:t,title:c,num:P?.[t]?.length||0,locale:p,onVideoPlayBtnClick:b,onSecondaryButtonClick:n,onPrimaryButtonClick:v}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:M(P?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:M(P?.[t]?.length||0)}}}),m&&m?.items.length>0?(0,e.jsx)(_.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:m?.items||[],configuration:{isTab:N,locale:p,onVideoPlayBtnClick:b,title:c,onSecondaryButtonClick:n,onPrimaryButtonClick:v}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},s))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(V.Grid,{className:"w-full",children:[k.map((t,s)=>(0,e.jsx)(V.GridItem,{span:x(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(C,{data:t,configuration:{locale:p,onVideoPlayBtnClick:b,title:c},jIndex:s,spanType:t.width,onSecondaryButtonClick:n,onPrimaryButtonClick:v})},`${t?.title||""}${s}`)),k.map((t,s)=>(0,e.jsx)(V.GridItem,{span:x("full"),className:"laptop:hidden block",children:(0,e.jsx)(C,{data:t,configuration:{locale:p,onVideoPlayBtnClick:b,title:c},jIndex:s,spanType:"full"})},`${t?.title||""}${s}`))]}),m&&m?.items.length>0?(0,e.jsx)(_.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m?.items||[],configuration:{locale:p,onVideoPlayBtnClick:b,title:c,onSecondaryButtonClick:n,onPrimaryButtonClick:v}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),I&&(0,e.jsx)(q.VideoModal,{visible:I,youTubeId:d,videoUrl:f,onCloseModal:()=>G(!1)})]})});D.displayName="MultiLayoutGraphicBlock";var oe=(0,Y.withLayout)(D,{container:{desktopSpan:12,mobileSpan:12}});
|
|
1
|
+
"use strict";var W=Object.create;var S=Object.defineProperty;var X=Object.getOwnPropertyDescriptor;var ee=Object.getOwnPropertyNames;var te=Object.getPrototypeOf,ae=Object.prototype.hasOwnProperty;var se=(o,a)=>{for(var l in a)S(o,l,{get:a[l],enumerable:!0})},U=(o,a,l,u)=>{if(a&&typeof a=="object"||typeof a=="function")for(let p of ee(a))!ae.call(o,p)&&p!==l&&S(o,p,{get:()=>a[p],enumerable:!(u=X(a,p))||u.enumerable});return o};var $=(o,a,l)=>(l=o!=null?W(te(o)):{},U(a||!o||!o.__esModule?S(l,"default",{value:o,enumerable:!0}):l,o)),oe=o=>U(S({},"__esModule",{value:!0}),o);var ie={};se(ie,{default:()=>le});module.exports=oe(ie);var e=require("react/jsx-runtime"),r=$(require("react")),A=require("react-responsive"),Q=$(require("./MultiLayoutGraphicBlockCarousel.js")),Y=require("../../shared/Styles.js"),R=$(require("../../components/picture.js")),j=$(require("../../components/button.js")),E=require("../../components/heading.js"),q=require("../VideoModal/index.js"),V=require("../../components/grid.js"),O=$(require("../Title/index.js")),i=require("../../helpers/utils.js"),_=$(require("../SwiperBox/index.js")),H=require("../../shared/mimeType.js"),v=require("../../components/tabs.js"),Z=require("../../hooks/useExposure.js"),z=require("../../shared/trackUrlRef.js"),F=require("../AiuiProvider/index.js"),J=require("../../shared/track.js");const g="image",y="p1_banner",C=({data:o,configuration:a,jIndex:l,spanType:u,title:p,onSecondaryButtonClick:k,onPrimaryButtonClick:L})=>{const[c,N]=(0,r.useState)(!1),b=(0,A.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,r.useRef)(null),I=()=>{if(u)switch(u){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(a?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,Z.useExposure)(m,{componentType:g,componentName:y,position:l,componentTitle:o.title,componentDescription:o.description,navigation:a?.activeTab}),(0,r.useEffect)(()=>{N(b)},[b]);const{theme:G="light",title:f,description:h,imageUrl:d,primaryButton:B,secondaryButton:n,imageMobileUrl:x,blockLink:T,video:w,youtubeId:M,isYouTube:P,id:t}=o,s="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,i.cn)("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",I(),{"rounded-box":!0,"aiui-dark":G==="dark","h-[400px]":c},"text-info-primary"),ref:m,children:[(T||n.link)&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,z.trackUrlRef)((0,i.getLocalizedPath)(T||n.link||"",a?.locale||"us"),`${g}_${y}`),"data-headless-type-name":`${g}#${y}`,"data-headless-title-desc-button":`${f}#${h}`,"data-headless-nav-position":`${a?.activeTab}#${l}`,"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,H.isVideo)(d?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:(0,e.jsx)("source",{src:d?.url,type:"video/mp4"})}):(0,e.jsx)(R.default,{source:d?.url,alt:d?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${d?.width}/${d?.height}`}}),(0,H.isVideo)(x?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:(0,e.jsx)("source",{src:x?.url,type:"video/mp4"})}):(0,e.jsx)(R.default,{source:x?.url||d?.url,alt:x?.alt||d?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),(0,e.jsxs)("div",{className:(0,i.cn)("pointer-events-none absolute inset-0 z-20 flex flex-col",u==="full"?"laptop:justify-center justify-end":"justify-end"),children:[(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)(E.Heading,{size:3,as:"h3",className:"item-title",html:f}),(0,e.jsx)(E.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",html:h})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[n&&n.text&&(0,e.jsxs)(j.default,{"aria-label":f??h,className:(0,i.cn)(s,"link-left"),variant:"secondary",as:"a","data-track":`${t}-link-left`,onClick:()=>{k?.(o)},href:(0,z.trackUrlRef)((0,i.getLocalizedPath)(n.link||"",a?.locale||"us"),`${g}_${y}`),"data-headless-type-name":`${g}#${y}`,"data-headless-title-desc-button":`${f}#${h}#${n.text}`,"data-headless-nav-position":`${a?.activeTab}#${l}`,children:[n.text,(0,e.jsx)("span",{className:"sr-only",children:f??h})]}),B&&B.text&&(0,e.jsx)(j.default,{"aria-label":f??h,className:(0,i.cn)(s,"link-right"),variant:"primary","data-track":`${t}-link-right`,as:"a",onClick:()=>{L?.(o)},href:(0,z.trackUrlRef)((0,i.getLocalizedPath)(B.link||"",a?.locale||"us"),`${g}_${y}`),"data-headless-type-name":`${g}#${y}`,"data-headless-title-desc-button":`${f}#${h}#${B.text}`,"data-headless-nav-position":`${a?.activeTab}#${l}`,children:B.text})]})]}),(w?.url||M)&&(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4",children:(0,e.jsx)("button",{onClick:()=>{a?.onVideoPlayBtnClick?.(P&&M?M:w?.url||M,P)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},D=r.default.forwardRef((o,a)=>{const{data:l,className:u,onSecondaryButtonClick:p,onPrimaryButtonClick:k,...L}=o,{sectionTitle:c,groupByTab:N=!1,items:b=[],carousel:m}=l,[I,G]=(0,r.useState)(!1),[f,h]=(0,r.useState)(""),[d,B]=(0,r.useState)(""),{locale:n="us"}=(0,F.useAiuiContext)(),x=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},T=b.map(t=>t.tabName).filter(Boolean).filter((t,s,K)=>K.indexOf(t)===s),w=(t,s)=>{G(!0),s?B?.(t||""):h?.(t||"")},M=(t,s)=>{switch(t){case 1:return 1;case 2:return 2;default:return s?2.3:3}},P=T.map(t=>({tabName:t,items:b.filter(s=>s.tabName===t)})).reduce((t,s)=>(t[s.tabName]=s.items,t),{});return l.mode==="carousel"&&b.length>0?(0,e.jsx)(Q.default,{data:l,onPrimaryButtonClick:k,onSecondaryButtonClick:p,className:u,ref:a,...L}):(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:a,...L,className:(0,i.cn)("multiLayoutGraphicBlock","text-info-primary",u),children:[c&&(0,e.jsx)(O.default,{data:{title:c},className:"section-title"}),N?(0,e.jsxs)(v.Tabs,{align:"left",defaultValue:(0,i.spaceToHyphen)(T[0]),children:[(0,e.jsx)(v.TabsList,{children:T.map((t,s)=>(0,e.jsx)(v.TabsTrigger,{value:(0,i.spaceToHyphen)(t),onClick:()=>{(0,J.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:g,component_name:y,component_title:c,component_position:1,navigation:t,button_name:t}})},children:t},s))}),T.map((t,s)=>(0,e.jsx)(v.TabsContent,{value:(0,i.spaceToHyphen)(t),className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(_.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:P?.[t]||[],configuration:{isTab:N,activeTab:t,title:c,num:P?.[t]?.length||0,locale:n,onVideoPlayBtnClick:w,onSecondaryButtonClick:p,onPrimaryButtonClick:k}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:M(P?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:M(P?.[t]?.length||0)}}}),m&&m?.items.length>0?(0,e.jsx)(_.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:m?.items||[],configuration:{isTab:N,locale:n,onVideoPlayBtnClick:w,title:c,onSecondaryButtonClick:p,onPrimaryButtonClick:k}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},s))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(V.Grid,{className:"w-full",children:[b.map((t,s)=>(0,e.jsx)(V.GridItem,{span:x(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(C,{data:t,configuration:{locale:n,onVideoPlayBtnClick:w,title:c},jIndex:s,spanType:t.width,onSecondaryButtonClick:p,onPrimaryButtonClick:k})},`${t?.title||""}${s}`)),b.map((t,s)=>(0,e.jsx)(V.GridItem,{span:x("full"),className:"laptop:hidden block",children:(0,e.jsx)(C,{data:t,configuration:{locale:n,onVideoPlayBtnClick:w,title:c},jIndex:s,spanType:"full",onSecondaryButtonClick:p,onPrimaryButtonClick:k})},`${t?.title||""}${s}`))]}),m&&m?.items.length>0?(0,e.jsx)(_.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m?.items||[],configuration:{locale:n,onVideoPlayBtnClick:w,title:c,onSecondaryButtonClick:p,onPrimaryButtonClick:k}},Slide:C,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),I&&(0,e.jsx)(q.VideoModal,{visible:I,youTubeId:d,videoUrl:f,onCloseModal:()=>G(!1)})]})});D.displayName="MultiLayoutGraphicBlock";var le=(0,Y.withLayout)(D,{container:{desktopSpan:12,mobileSpan:12}});
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport MultiLayoutGraphicBlockCarouselImpl from './MultiLayoutGraphicBlockCarousel.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n id,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-box': true,\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n </div>\n <div\n className={cn(\n 'pointer-events-none absolute inset-0 z-20 flex flex-col',\n spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n )}\n >\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n data-track={`${id}-link-left`}\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n data-track={`${id}-link-right`}\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n {(video?.url || youtubeId) && (\n <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(\n isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n isYouTube\n )\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n const { sectionTitle, groupByTab = false, items = [], carousel } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n // Carousel mode early return \u2014 MUST be after all hooks (React rules of hooks)\n if (data.mode === 'carousel' && items.length > 0) {\n return (\n <MultiLayoutGraphicBlockCarouselImpl\n data={data}\n onPrimaryButtonClick={onPrimaryButtonClick}\n onSecondaryButtonClick={onSecondaryButtonClick}\n className={className}\n ref={ref as React.Ref<HTMLElement>}\n {...rest}\n />\n )\n }\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n {...rest}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(tabName!)}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n isTab: groupByTab,\n activeTab: tabName,\n title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{\n list: carousel?.items || [],\n configuration: {\n isTab: groupByTab,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={'full'}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock, {\n container: { desktopSpan: 12, mobileSpan: 12 },\n})\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
-
"mappings": "kkBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAoHQ,IAAAI,EAAA,6BApHRC,EAAmD,oBACnDC,EAA8B,4BAE9BC,EAAgD,mDAChDC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAAkB,gCAClBC,EAAoD,kCACpDC,EAAsB,oCACtBC,EAAwB,oCACxBC,EAAyD,oCACzDC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAA+B,oCAC/BC,EAAwB,iCAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,EACA,SAAAC,EACA,MAAOC,EACP,uBAAAC,EACA,qBAAAC,CACF,IAQM,CACJ,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAkB,EAAK,EACjDC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DC,KAAM,UAAuB,IAAI,EAEjCC,EAAe,IAAM,CACzB,GAAIR,EACF,OAAQA,EAAU,CAChB,IAAK,OACH,MAAO,8LACT,IAAK,OACH,MAAO,4LACT,IAAK,YACH,MAAO,4LACT,QACE,MAAO,2LACX,KAEA,QAAQF,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CAEJ,KAEA,eAAYS,EAAK,CACf,cAAeb,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,KAED,aAAU,IAAM,CACdO,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,GAAAC,CACF,EAAIvB,EACEwB,EAAe,mFAErB,SACE,QAAC,OACC,aAAW,MACT,8BACA,qEACAb,EAAa,EACb,CACE,cAAe,GACf,YAAaC,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEH,WAAAS,GAAaF,EAAgB,UAC7B,OAAC,KACC,UAAU,wBACV,QAAM,kBACJ,oBAAiBE,GAAaF,EAAgB,MAAQ,GAAIhB,GAAe,QAAU,IAAI,EACvF,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,GACxD,6BAA4B,GAAGb,GAAe,SAAS,IAAIC,CAAM,GACjE,cAAY,OACZ,SAAU,GACZ,KAEF,QAAC,OAAI,UAAU,mBACZ,wBAAQa,GAAU,QAAQ,KACzB,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,mBAAC,UAAO,IAAKA,GAAU,IAAK,KAAK,YAAY,EAC/C,KAEA,OAAC,EAAAU,QAAA,CACC,OAAQV,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,KAED,WAAQG,GAAgB,QAAQ,KAC/B,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,mBAAC,UAAO,IAAKA,GAAgB,IAAK,KAAK,YAAY,EACrD,KAEA,OAAC,EAAAO,QAAA,CACC,OAAQP,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,GAEJ,KACA,QAAC,OACC,aAAW,MACT,0DACAZ,IAAa,OAAS,oCAAsC,aAC9D,EAEA,qBAAC,OAAI,UAAU,2GACb,qBAAC,OAAI,UAAU,sBACb,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMU,EAAO,KAC9D,OAAC,WACC,GAAG,KACH,UAAU,uFACV,KAAMC,EACR,GACF,KACA,QAAC,OAAI,UAAU,8BACZ,UAAAG,GAAmBA,EAAgB,SAClC,QAAC,EAAAS,QAAA,CACC,aAAYb,GAASC,EACrB,aAAW,MAAGU,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,aAAY,GAAGD,CAAE,aACjB,QAAS,IAAM,CACblB,IAAyBL,CAAI,CAC/B,EACA,QAAM,kBACJ,oBAAiBiB,EAAgB,MAAQ,GAAIhB,GAAe,QAAU,IAAI,EAC1E,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIG,EAAgB,IAAI,GAChF,6BAA4B,GAAGhB,GAAe,SAAS,IAAIC,CAAM,GAEhE,UAAAe,EAAgB,QACjB,OAAC,QAAK,UAAU,UAAW,SAAAJ,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,SAC9B,OAAC,EAAAU,QAAA,CACC,aAAYb,GAASC,EACrB,aAAW,MAAGU,EAAc,YAAY,EACxC,QAAQ,UACR,aAAY,GAAGD,CAAE,cACjB,GAAG,IACH,QAAS,IAAM,CACbjB,IAAuBN,CAAI,CAC7B,EACA,QAAM,kBACJ,oBAAiBgB,EAAc,MAAQ,GAAIf,GAAe,QAAU,IAAI,EACxE,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,6BAA4B,GAAGf,GAAe,SAAS,IAAIC,CAAM,GAEhE,SAAAc,EAAc,KACjB,GAEJ,GACF,GACEI,GAAO,KAAOC,OACd,OAAC,OAAI,UAAU,+EACb,mBAAC,UACC,QAAS,IAAM,CACbpB,GAAe,sBACbqB,GAAaD,EAAYA,EAAYD,GAAO,KAAOC,EACnDC,CACF,CACF,EACA,UAAU,+GAEV,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EACF,GAEJ,GACF,CAEJ,EAEMK,EAA0B,EAAAC,QAAM,WAAyD,CAACC,EAAOnB,IAAQ,CAC7G,KAAM,CAAE,KAAAoB,EAAM,UAAAC,EAAW,uBAAA1B,EAAwB,qBAAAC,EAAsB,GAAG0B,CAAK,EAAIH,EAC7E,CAAE,aAAAI,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIN,EAC7D,CAACO,EAASC,CAAU,KAAI,YAAkB,EAAK,EAC/C,CAACC,EAAUC,CAAW,KAAI,YAAiB,EAAE,EAC7C,CAACC,EAAWC,CAAY,KAAI,YAAiB,EAAE,EAC/C,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAEnCC,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWX,EACd,IAAInC,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAM+C,EAAOC,IAAQA,EAAI,QAAQhD,CAAI,IAAM+C,CAAK,EAErDE,EAA0B,CAACC,EAAa5B,IAAuB,CACnEgB,EAAW,EAAI,EACXhB,EACFoB,IAAeQ,GAAO,EAAE,EAExBV,IAAcU,GAAO,EAAE,CAE3B,EACMC,EAAkB,CAACC,EAAaC,IAAmB,CACvD,OAAQD,EAAK,CACX,IAAK,GACH,MAAO,GACT,IAAK,GACH,MAAO,GACT,QACE,OAAOC,EAAO,IAAM,CACxB,CACF,EAEMC,EAAeR,EAClB,IAAIS,IAAY,CACf,QAAAA,EACA,MAAOpB,EAAM,OAAOnC,GAAQA,EAAK,UAAYuD,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAGF,OAAI1B,EAAK,OAAS,YAAcK,EAAM,OAAS,KAE3C,OAAC,EAAAuB,QAAA,CACC,KAAM5B,EACN,qBAAsBxB,EACtB,uBAAwBD,EACxB,UAAW0B,EACX,IAAKrB,EACJ,GAAGsB,EACN,KAKF,QAAC,WACC,uBAAqB,0BACrB,IAAKtB,EACJ,GAAGsB,EACJ,aAAW,MAAG,0BAA2B,oBAAqBD,CAAS,EAEtE,UAAAE,MAAgB,OAAC,EAAA0B,QAAA,CAAM,KAAM,CAAE,MAAO1B,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,KACC,QAAC,QAAK,MAAM,OAAO,gBAAc,iBAAcY,EAAS,CAAC,CAAE,EACzD,oBAAC,YACE,SAAAA,EAAS,IAAI,CAACS,EAASR,OACtB,OAAC,eAEC,SAAO,iBAAcQ,CAAQ,EAC7B,QAAS,IAAM,IACb,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB1D,EAChB,eAAgBC,EAChB,gBAAiBmC,EACjB,mBAAoB,EACpB,WAAYsB,EACZ,YAAaA,CACf,CACF,CAAC,CACH,EAEC,SAAAA,GAlBIR,CAmBP,CACD,EACH,EACCD,EAAS,IAAI,CAACS,EAASR,OACtB,OAAC,eAAwB,SAAO,iBAAcQ,CAAQ,EAAG,UAAU,qCACjE,gCACE,oBAAC,EAAAK,QAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAMN,IAAeC,CAAO,GAAK,CAAC,EAClC,cAAe,CACb,MAAOrB,EACP,UAAWqB,EACX,MAAOtB,EACP,IAAKqB,IAAeC,CAAO,GAAG,QAAU,EACxC,OAAAZ,EACA,oBAAqBM,EACrB,uBAAA5C,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeoD,EAAgBG,IAAeC,CAAO,GAAG,QAAU,EAAG,EAAI,CAC3E,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeJ,EAAgBG,IAAeC,CAAO,GAAG,QAAU,CAAC,CACrE,CACF,EACF,EACCnB,GAAYA,GAAU,MAAM,OAAS,KACpC,OAAC,EAAAwB,QAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAMxB,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOF,EACP,OAAAS,EACA,oBAAqBM,EACrB,MAAOhB,EACP,uBAAA5B,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAvFgBgD,CAwFlB,CACD,GACH,KAEA,oBACE,qBAAC,QAAK,UAAU,SACb,UAAAZ,EAAM,IAAI,CAACnC,EAAM+C,OAEd,OAAC,YAEC,KAAMH,EAAQ5C,EAAK,OAAS,MAAM,EAClC,UAAU,sBAEV,mBAACD,EAAA,CACC,KAAMC,EACN,cAAe,CACb,OAAA2C,EACA,oBAAqBM,EACrB,MAAOhB,CACT,EACA,OAAQc,EACR,SAAU/C,EAAK,MACf,uBAAwBK,EACxB,qBAAsBC,EACxB,GAfK,GAAGN,GAAM,OAAS,EAAE,GAAG+C,CAAK,EAgBnC,CAEH,EACAZ,EAAM,IAAI,CAACnC,EAAM+C,OAChB,OAAC,YAA8C,KAAMH,EAAQ,MAAM,EAAG,UAAU,sBAC9E,mBAAC7C,EAAA,CACC,KAAMC,EACN,cAAe,CACb,OAAA2C,EACA,oBAAqBM,EACrB,MAAOhB,CACT,EACA,OAAQc,EACR,SAAU,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport MultiLayoutGraphicBlockCarouselImpl from './MultiLayoutGraphicBlockCarousel.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n id,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-box': true,\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n </div>\n <div\n className={cn(\n 'pointer-events-none absolute inset-0 z-20 flex flex-col',\n spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n )}\n >\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n data-track={`${id}-link-left`}\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n data-track={`${id}-link-right`}\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n {(video?.url || youtubeId) && (\n <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(\n isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n isYouTube\n )\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n const { sectionTitle, groupByTab = false, items = [], carousel } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n // Carousel mode early return \u2014 MUST be after all hooks (React rules of hooks)\n if (data.mode === 'carousel' && items.length > 0) {\n return (\n <MultiLayoutGraphicBlockCarouselImpl\n data={data}\n onPrimaryButtonClick={onPrimaryButtonClick}\n onSecondaryButtonClick={onSecondaryButtonClick}\n className={className}\n ref={ref as React.Ref<HTMLElement>}\n {...rest}\n />\n )\n }\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n {...rest}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(tabName!)}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n isTab: groupByTab,\n activeTab: tabName,\n title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{\n list: carousel?.items || [],\n configuration: {\n isTab: groupByTab,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={'full'}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock, {\n container: { desktopSpan: 12, mobileSpan: 12 },\n})\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_MultiLayoutGraphicBlockCarousel", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_grid", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "data", "className", "rest", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlockCarouselImpl", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as u}from"react/jsx-runtime";import G,{useState as $,useEffect as O,useRef as S}from"react";import{useMediaQuery as U}from"react-responsive";import{withLayout as R}from"../../shared/Styles.js";import V from"../../components/picture.js";import I from"../../components/button.js";import{Heading as L}from"../../components/heading.js";import{VideoModal as E}from"../VideoModal/index.js";import{cn as w,getLocalizedPath as M}from"../../helpers/utils.js";import _ from"../SwiperBox/index.js";import{isVideo as C}from"../../shared/mimeType.js";import{useExposure as D}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{useAiuiContext as H}from"../AiuiProvider/index.js";const
|
|
1
|
+
import{jsx as e,jsxs as u}from"react/jsx-runtime";import G,{useState as $,useEffect as O,useRef as S}from"react";import{useMediaQuery as U}from"react-responsive";import{withLayout as R}from"../../shared/Styles.js";import V from"../../components/picture.js";import I from"../../components/button.js";import{Heading as L}from"../../components/heading.js";import{VideoModal as E}from"../VideoModal/index.js";import{cn as w,getLocalizedPath as M}from"../../helpers/utils.js";import _ from"../SwiperBox/index.js";import{isVideo as C}from"../../shared/mimeType.js";import{useExposure as D}from"../../hooks/useExposure.js";import{trackUrlRef as T}from"../../shared/trackUrlRef.js";import{useAiuiContext as H}from"../AiuiProvider/index.js";const d="image",m="p1_banner",A=({data:h,configuration:t,jIndex:f})=>{const[N,B]=$(!1),y=U({query:"(max-width: 768px)"}),i=S(null),k=()=>{switch(t?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};D(i,{componentType:d,componentName:m,position:f,componentTitle:h.title,componentDescription:h.description,navigation:t?.activeTab}),O(()=>{B(y)},[y]);const{theme:v="light",title:s,description:o,imageUrl:a,primaryButton:r,secondaryButton:n,imageMobileUrl:b,blockLink:c,video:l,youtubeId:p,isYouTube:g}=h,x="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return u("div",{className:w("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",k(),{"rounded-box":!0,"aiui-dark":v==="dark","h-[400px]":N},"text-info-primary"),ref:i,children:[c&&e("a",{className:"absolute inset-0 z-10",href:T(M(c||"",t?.locale||"us"),`${d}_${m}`),"data-headless-type-name":`${d}#${m}`,"data-headless-title-desc-button":`${s}#${o}`,"data-headless-nav-position":`${t?.activeTab}#${f}`,"aria-hidden":"true",tabIndex:-1}),u("div",{className:"absolute inset-0",children:[C(a?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:e("source",{src:a?.url,type:"video/mp4"})}):e(V,{source:a?.url,alt:a?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${a?.width}/${a?.height}`}}),C(b?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:e("source",{src:b?.url,type:"video/mp4"})}):e(V,{source:b?.url||a?.url,alt:b?.alt||a?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),u("div",{className:w("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":h?.width==="full"}),children:[u("div",{className:"flex flex-col gap-1",children:[e(L,{size:3,as:"h3",className:"item-title",html:s}),e(L,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:o})]}),u("div",{className:"lg-desktop:gap-3 flex gap-2",children:[n&&n.text&&u(I,{"aria-label":s??o,className:w(x,"link-left pointer-events-auto"),variant:"secondary",as:"a",href:T(M(n.link||"",t?.locale||"us"),`${d}_${m}`),"data-headless-type-name":`${d}#${m}`,"data-headless-title-desc-button":`${s}#${o}#${n?.text}`,"data-headless-nav-position":`${t?.activeTab}#${f}`,children:[n.text,e("span",{className:"sr-only",children:s??o})]}),r&&r.text&&e(I,{"aria-label":s??o,className:w(x,"link-right pointer-events-auto"),variant:"primary",as:"a",href:T(M(r.link||"",t?.locale||"us"),`${d}_${m}`),"data-headless-type-name":`${d}#${m}`,"data-headless-title-desc-button":`${s}#${o}#${r.text}`,"data-headless-nav-position":`${t?.activeTab}#${f}`,children:r.text})]})]})]}),e("div",{children:e("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:(l?.url||p)&&e("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(l?.url||p,g)},className:"laptop:size-12 hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:v==="dark"?"black":"white",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z"})})})})})]})},z=G.forwardRef((h,t)=>{const{data:f,className:N,...B}=h,{shape:y,items:i=[]}=f,[k,v]=$(!1),[s,o]=$(""),[a,r]=$(""),{locale:n="us"}=H(),b=(l,p)=>{v(!0),p?r?.(l||""):o?.(l||"")},c=l=>{const p=i?.length,g=p>3,x=p>2,P=p>1;switch(!0){case l>=1440:case l>=1024:return g?3:p;case l>=768:return g||x?2.3:P?2:1;default:return P?1.2:1}};return u("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...B,className:w("graphicOverlayBlock text-info-primary ",N),children:[i&&i.length>0?e(_,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:i||[],configuration:{shape:y,num:i.length,locale:n,onVideoPlayBtnClick:b}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:c(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:c(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:c(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:c(1440)}}}):null,k&&e(E,{visible:k,youTubeId:a,videoUrl:s,onCloseModal:()=>v(!1)})]})});z.displayName="GraphicOverlayBlock";var se=R(z);export{se as default};
|
|
2
2
|
//# sourceMappingURL=GraphicOverlay.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/GraphicOverlay/GraphicOverlay.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-box': true,\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n ></a>\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n <div\n className={cn(\n 'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n {\n 'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n <div>\n <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n {(video?.url || youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n }}\n className=\"laptop:size-12 hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80\"\n >\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill={theme === 'dark' ? 'black' : 'white'}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M12 7L0 14L0 0L12 7Z\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n const { data, className, ...rest } = props\n const { shape, items = [] } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n\n const handleSwiperShow = (width: number) => {\n const len = items?.length\n const isShow = len > 3\n const isMiddle = len > 2\n const isMobile = len > 1\n\n switch (true) {\n case width >= 1440:\n case width >= 1024:\n return isShow ? 3 : len\n case width >= 768:\n if (isShow || isMiddle) {\n return 2.3\n }\n return isMobile ? 2 : 1\n default:\n return isMobile ? 1.2 : 1\n }\n }\n\n return (\n <section\n data-ui-component-id=\"GraphicOverlay\"\n ref={ref}\n {...rest}\n className={cn('graphicOverlayBlock text-info-primary ', className)}\n >\n {items && items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: items || [],\n configuration: {\n shape: shape,\n num: items.length,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(374),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n ) : null}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-box': true,\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n ></a>\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n <div\n className={cn(\n 'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n {\n 'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left pointer-events-auto')}\n variant=\"secondary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right pointer-events-auto')}\n variant=\"primary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n <div>\n <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n {(video?.url || youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n }}\n className=\"laptop:size-12 hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80\"\n >\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill={theme === 'dark' ? 'black' : 'white'}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M12 7L0 14L0 0L12 7Z\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n const { data, className, ...rest } = props\n const { shape, items = [] } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n\n const handleSwiperShow = (width: number) => {\n const len = items?.length\n const isShow = len > 3\n const isMiddle = len > 2\n const isMobile = len > 1\n\n switch (true) {\n case width >= 1440:\n case width >= 1024:\n return isShow ? 3 : len\n case width >= 768:\n if (isShow || isMiddle) {\n return 2.3\n }\n return isMobile ? 2 : 1\n default:\n return isMobile ? 1.2 : 1\n }\n }\n\n return (\n <section\n data-ui-component-id=\"GraphicOverlay\"\n ref={ref}\n {...rest}\n className={cn('graphicOverlayBlock text-info-primary ', className)}\n >\n {items && items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: items || [],\n configuration: {\n shape: shape,\n num: items.length,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(374),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n ) : null}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "cn", "getLocalizedPath", "SwiperBox", "isVideo", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "GraphicOverlay", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "GraphicOverlay_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as D,jsx as t,jsxs as o}from"react/jsx-runtime";import Q,{useState as L,useEffect as Y,useRef as q}from"react";import{useMediaQuery as O}from"react-responsive";import Z from"./MultiLayoutGraphicBlockCarousel.js";import{withLayout as F}from"../../shared/Styles.js";import z from"../../components/picture.js";import R from"../../components/button.js";import{Heading as j}from"../../components/heading.js";import{VideoModal as J}from"../VideoModal/index.js";import{Grid as K,GridItem as E}from"../../components/grid.js";import W from"../Title/index.js";import{cn as P,spaceToHyphen as I,getLocalizedPath as G}from"../../helpers/utils.js";import S from"../SwiperBox/index.js";import{isVideo as H}from"../../shared/mimeType.js";import{Tabs as X,TabsList as ee,TabsTrigger as te,TabsContent as ae}from"../../components/tabs.js";import{useExposure as se}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";import{useAiuiContext as le}from"../AiuiProvider/index.js";import{gaTrack as oe}from"../../shared/track.js";const f="image",h="p1_banner",$=({data:k,configuration:l,jIndex:d,spanType:x,title:T,onSecondaryButtonClick:b,onPrimaryButtonClick:N})=>{const[i,M]=L(!1),u=O({query:"(max-width: 768px)"}),n=q(null),C=()=>{if(x)switch(x){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(l?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};se(n,{componentType:f,componentName:h,position:d,componentTitle:k.title,componentDescription:k.description,navigation:l?.activeTab}),Y(()=>{M(u)},[u]);const{theme:V="light",title:r,description:c,imageUrl:p,primaryButton:w,secondaryButton:s,imageMobileUrl:g,blockLink:y,video:m,youtubeId:v,isYouTube:B,id:e}=k,a="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return o("div",{className:P("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",C(),{"rounded-box":!0,"aiui-dark":V==="dark","h-[400px]":i},"text-info-primary"),ref:n,children:[(y||s.link)&&t("a",{className:"absolute inset-0 z-10",href:_(G(y||s.link||"",l?.locale||"us"),`${f}_${h}`),"data-headless-type-name":`${f}#${h}`,"data-headless-title-desc-button":`${r}#${c}`,"data-headless-nav-position":`${l?.activeTab}#${d}`,"aria-hidden":"true",tabIndex:-1}),o("div",{className:"absolute inset-0",children:[H(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(z,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),H(g?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:g?.url,type:"video/mp4"})}):t(z,{source:g?.url||p?.url,alt:g?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),o("div",{className:P("pointer-events-none absolute inset-0 z-20 flex flex-col",x==="full"?"laptop:justify-center justify-end":"justify-end"),children:[o("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[o("div",{className:"flex flex-col gap-1",children:[t(j,{size:3,as:"h3",className:"item-title",html:r}),t(j,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",html:c})]}),o("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&o(R,{"aria-label":r??c,className:P(a,"link-left"),variant:"secondary",as:"a","data-track":`${e}-link-left`,onClick:()=>{b?.(k)},href:_(G(s.link||"",l?.locale||"us"),`${f}_${h}`),"data-headless-type-name":`${f}#${h}`,"data-headless-title-desc-button":`${r}#${c}#${s.text}`,"data-headless-nav-position":`${l?.activeTab}#${d}`,children:[s.text,t("span",{className:"sr-only",children:r??c})]}),w&&w.text&&t(R,{"aria-label":r??c,className:P(a,"link-right"),variant:"primary","data-track":`${e}-link-right`,as:"a",onClick:()=>{N?.(k)},href:_(G(w.link||"",l?.locale||"us"),`${f}_${h}`),"data-headless-type-name":`${f}#${h}`,"data-headless-title-desc-button":`${r}#${c}#${w.text}`,"data-headless-nav-position":`${l?.activeTab}#${d}`,children:w.text})]})]}),(m?.url||v)&&t("div",{className:"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4",children:t("button",{onClick:()=>{l?.onVideoPlayBtnClick?.(B&&v?v:m?.url||v,B)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},U=Q.forwardRef((k,l)=>{const{data:d,className:x,onSecondaryButtonClick:T,onPrimaryButtonClick:b,...N}=k,{sectionTitle:i,groupByTab:M=!1,items:u=[],carousel:n}=d,[C,V]=L(!1),[r,c]=L(""),[p,w]=L(""),{locale:s="us"}=le(),g=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},y=u.map(e=>e.tabName).filter(Boolean).filter((e,a,A)=>A.indexOf(e)===a),m=(e,a)=>{V(!0),a?w?.(e||""):c?.(e||"")},v=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},B=y.map(e=>({tabName:e,items:u.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return d.mode==="carousel"&&u.length>0?t(Z,{data:d,onPrimaryButtonClick:b,onSecondaryButtonClick:T,className:x,ref:l,...N}):o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:l,...N,className:P("multiLayoutGraphicBlock","text-info-primary",x),children:[i&&t(W,{data:{title:i},className:"section-title"}),M?o(X,{align:"left",defaultValue:I(y[0]),children:[t(ee,{children:y.map((e,a)=>t(te,{value:I(e),onClick:()=>{oe({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:f,component_name:h,component_title:i,component_position:1,navigation:e,button_name:e}})},children:e},a))}),y.map((e,a)=>t(ae,{value:I(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:o(D,{children:[t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:B?.[e]||[],configuration:{isTab:M,activeTab:e,title:i,num:B?.[e]?.length||0,locale:s,onVideoPlayBtnClick:m,onSecondaryButtonClick:T,onPrimaryButtonClick:b}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:v(B?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:v(B?.[e]?.length||0)}}}),n&&n?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:n?.items||[],configuration:{isTab:M,locale:s,onVideoPlayBtnClick:m,title:i,onSecondaryButtonClick:T,onPrimaryButtonClick:b}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):o(D,{children:[o(K,{className:"w-full",children:[u.map((e,a)=>t(E,{span:g(e.width??"full"),className:"laptop:block hidden",children:t($,{data:e,configuration:{locale:s,onVideoPlayBtnClick:m,title:i},jIndex:a,spanType:e.width,onSecondaryButtonClick:T,onPrimaryButtonClick:b})},`${e?.title||""}${a}`)),u.map((e,a)=>t(E,{span:g("full"),className:"laptop:hidden block",children:t($,{data:e,configuration:{locale:s,onVideoPlayBtnClick:m,title:i},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),n&&n?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:n?.items||[],configuration:{locale:s,onVideoPlayBtnClick:m,title:i,onSecondaryButtonClick:T,onPrimaryButtonClick:b}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),C&&t(J,{visible:C,youTubeId:p,videoUrl:r,onCloseModal:()=>V(!1)})]})});U.displayName="MultiLayoutGraphicBlock";var Te=F(U,{container:{desktopSpan:12,mobileSpan:12}});export{Te as default};
|
|
1
|
+
import{Fragment as D,jsx as t,jsxs as l}from"react/jsx-runtime";import Q,{useState as L,useEffect as Y,useRef as q}from"react";import{useMediaQuery as O}from"react-responsive";import Z from"./MultiLayoutGraphicBlockCarousel.js";import{withLayout as F}from"../../shared/Styles.js";import z from"../../components/picture.js";import R from"../../components/button.js";import{Heading as j}from"../../components/heading.js";import{VideoModal as J}from"../VideoModal/index.js";import{Grid as K,GridItem as E}from"../../components/grid.js";import W from"../Title/index.js";import{cn as P,spaceToHyphen as I,getLocalizedPath as G}from"../../helpers/utils.js";import S from"../SwiperBox/index.js";import{isVideo as H}from"../../shared/mimeType.js";import{Tabs as X,TabsList as ee,TabsTrigger as te,TabsContent as ae}from"../../components/tabs.js";import{useExposure as se}from"../../hooks/useExposure.js";import{trackUrlRef as _}from"../../shared/trackUrlRef.js";import{useAiuiContext as oe}from"../AiuiProvider/index.js";import{gaTrack as le}from"../../shared/track.js";const h="image",k="p1_banner",$=({data:b,configuration:o,jIndex:d,spanType:T,title:w,onSecondaryButtonClick:u,onPrimaryButtonClick:N})=>{const[i,M]=L(!1),m=O({query:"(max-width: 768px)"}),n=q(null),C=()=>{if(T)switch(T){case"full":return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case"half":return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case"one-third":return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}else switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};se(n,{componentType:h,componentName:k,position:d,componentTitle:b.title,componentDescription:b.description,navigation:o?.activeTab}),Y(()=>{M(m)},[m]);const{theme:V="light",title:r,description:c,imageUrl:p,primaryButton:g,secondaryButton:s,imageMobileUrl:y,blockLink:v,video:f,youtubeId:B,isYouTube:x,id:e}=b,a="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return l("div",{className:P("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",C(),{"rounded-box":!0,"aiui-dark":V==="dark","h-[400px]":i},"text-info-primary"),ref:n,children:[(v||s.link)&&t("a",{className:"absolute inset-0 z-10",href:_(G(v||s.link||"",o?.locale||"us"),`${h}_${k}`),"data-headless-type-name":`${h}#${k}`,"data-headless-title-desc-button":`${r}#${c}`,"data-headless-nav-position":`${o?.activeTab}#${d}`,"aria-hidden":"true",tabIndex:-1}),l("div",{className:"absolute inset-0",children:[H(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden size-full overflow-hidden object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(z,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),H(y?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block size-full overflow-hidden object-cover",children:t("source",{src:y?.url,type:"video/mp4"})}):t(z,{source:y?.url||p?.url,alt:y?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"})]}),l("div",{className:P("pointer-events-none absolute inset-0 z-20 flex flex-col",T==="full"?"laptop:justify-center justify-end":"justify-end"),children:[l("div",{className:"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4",children:[l("div",{className:"flex flex-col gap-1",children:[t(j,{size:3,as:"h3",className:"item-title",html:r}),t(j,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]",html:c})]}),l("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&l(R,{"aria-label":r??c,className:P(a,"link-left"),variant:"secondary",as:"a","data-track":`${e}-link-left`,onClick:()=>{u?.(b)},href:_(G(s.link||"",o?.locale||"us"),`${h}_${k}`),"data-headless-type-name":`${h}#${k}`,"data-headless-title-desc-button":`${r}#${c}#${s.text}`,"data-headless-nav-position":`${o?.activeTab}#${d}`,children:[s.text,t("span",{className:"sr-only",children:r??c})]}),g&&g.text&&t(R,{"aria-label":r??c,className:P(a,"link-right"),variant:"primary","data-track":`${e}-link-right`,as:"a",onClick:()=>{N?.(b)},href:_(G(g.link||"",o?.locale||"us"),`${h}_${k}`),"data-headless-type-name":`${h}#${k}`,"data-headless-title-desc-button":`${r}#${c}#${g.text}`,"data-headless-nav-position":`${o?.activeTab}#${d}`,children:g.text})]})]}),(f?.url||B)&&t("div",{className:"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4",children:t("button",{onClick:()=>{o?.onVideoPlayBtnClick?.(x&&B?B:f?.url||B,x)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]})]})},U=Q.forwardRef((b,o)=>{const{data:d,className:T,onSecondaryButtonClick:w,onPrimaryButtonClick:u,...N}=b,{sectionTitle:i,groupByTab:M=!1,items:m=[],carousel:n}=d,[C,V]=L(!1),[r,c]=L(""),[p,g]=L(""),{locale:s="us"}=oe(),y=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},v=m.map(e=>e.tabName).filter(Boolean).filter((e,a,A)=>A.indexOf(e)===a),f=(e,a)=>{V(!0),a?g?.(e||""):c?.(e||"")},B=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},x=v.map(e=>({tabName:e,items:m.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return d.mode==="carousel"&&m.length>0?t(Z,{data:d,onPrimaryButtonClick:u,onSecondaryButtonClick:w,className:T,ref:o,...N}):l("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,...N,className:P("multiLayoutGraphicBlock","text-info-primary",T),children:[i&&t(W,{data:{title:i},className:"section-title"}),M?l(X,{align:"left",defaultValue:I(v[0]),children:[t(ee,{children:v.map((e,a)=>t(te,{value:I(e),onClick:()=>{le({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:h,component_name:k,component_title:i,component_position:1,navigation:e,button_name:e}})},children:e},a))}),v.map((e,a)=>t(ae,{value:I(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:l(D,{children:[t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:x?.[e]||[],configuration:{isTab:M,activeTab:e,title:i,num:x?.[e]?.length||0,locale:s,onVideoPlayBtnClick:f,onSecondaryButtonClick:w,onPrimaryButtonClick:u}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:B(x?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:B(x?.[e]?.length||0)}}}),n&&n?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:n?.items||[],configuration:{isTab:M,locale:s,onVideoPlayBtnClick:f,title:i,onSecondaryButtonClick:w,onPrimaryButtonClick:u}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):l(D,{children:[l(K,{className:"w-full",children:[m.map((e,a)=>t(E,{span:y(e.width??"full"),className:"laptop:block hidden",children:t($,{data:e,configuration:{locale:s,onVideoPlayBtnClick:f,title:i},jIndex:a,spanType:e.width,onSecondaryButtonClick:w,onPrimaryButtonClick:u})},`${e?.title||""}${a}`)),m.map((e,a)=>t(E,{span:y("full"),className:"laptop:hidden block",children:t($,{data:e,configuration:{locale:s,onVideoPlayBtnClick:f,title:i},jIndex:a,spanType:"full",onSecondaryButtonClick:w,onPrimaryButtonClick:u})},`${e?.title||""}${a}`))]}),n&&n?.items.length>0?t(S,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:n?.items||[],configuration:{locale:s,onVideoPlayBtnClick:f,title:i,onSecondaryButtonClick:w,onPrimaryButtonClick:u}},Slide:$,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),C&&t(J,{visible:C,youTubeId:p,videoUrl:r,onCloseModal:()=>V(!1)})]})});U.displayName="MultiLayoutGraphicBlock";var Te=F(U,{container:{desktopSpan:12,mobileSpan:12}});export{Te as default};
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport MultiLayoutGraphicBlockCarouselImpl from './MultiLayoutGraphicBlockCarousel.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n id,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-box': true,\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n </div>\n <div\n className={cn(\n 'pointer-events-none absolute inset-0 z-20 flex flex-col',\n spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n )}\n >\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n data-track={`${id}-link-left`}\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n data-track={`${id}-link-right`}\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n {(video?.url || youtubeId) && (\n <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(\n isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n isYouTube\n )\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n const { sectionTitle, groupByTab = false, items = [], carousel } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n // Carousel mode early return \u2014 MUST be after all hooks (React rules of hooks)\n if (data.mode === 'carousel' && items.length > 0) {\n return (\n <MultiLayoutGraphicBlockCarouselImpl\n data={data}\n onPrimaryButtonClick={onPrimaryButtonClick}\n onSecondaryButtonClick={onSecondaryButtonClick}\n className={className}\n ref={ref as React.Ref<HTMLElement>}\n {...rest}\n />\n )\n }\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n {...rest}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(tabName!)}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n isTab: groupByTab,\n activeTab: tabName,\n title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{\n list: carousel?.items || [],\n configuration: {\n isTab: groupByTab,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={'full'}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock, {\n container: { desktopSpan: 12, mobileSpan: 12 },\n})\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
-
"mappings": "AAoHQ,OAuOM,YAAAA,EAvON,OAAAC,EAaF,QAAAC,MAbE,oBApHR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAOC,MAAyC,uCAChD,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAClB,OAAS,MAAAC,EAAI,iBAAAC,EAAe,oBAAAC,MAAwB,yBACpD,OAAOC,MAAe,wBACtB,OAAS,WAAAC,MAAe,2BACxB,OAAS,QAAAC,EAAM,YAAAC,GAAU,eAAAC,GAAa,eAAAC,OAAmB,2BACzD,OAAS,eAAAC,OAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,kBAAAC,OAAsB,2BAC/B,OAAS,WAAAC,OAAe,wBAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,EACA,SAAAC,EACA,MAAOC,EACP,uBAAAC,EACA,qBAAAC,CACF,IAQM,CACJ,KAAM,CAACC,EAAUC,CAAW,EAAIrC,EAAkB,EAAK,EACjDsC,EAAanC,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DoC,EAAMrC,EAAuB,IAAI,EAEjCsC,EAAe,IAAM,CACzB,GAAIR,EACF,OAAQA,EAAU,CAChB,IAAK,OACH,MAAO,8LACT,IAAK,OACH,MAAO,4LACT,IAAK,YACH,MAAO,4LACT,QACE,MAAO,2LACX,KAEA,QAAQF,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CAEJ,EAEAR,GAAYiB,EAAK,CACf,cAAeb,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAED7B,EAAU,IAAM,CACdoC,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,EACA,GAAAC,CACF,EAAIvB,EACEwB,EAAe,mFAErB,OACEvD,EAAC,OACC,UAAWe,EACT,8BACA,qEACA2B,EAAa,EACb,CACE,cAAe,GACf,YAAaC,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEH,WAAAS,GAAaF,EAAgB,OAC7BjD,EAAC,KACC,UAAU,wBACV,KAAM0B,EACJR,EAAiBiC,GAAaF,EAAgB,MAAQ,GAAIhB,GAAe,QAAU,IAAI,EACvF,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,GACxD,6BAA4B,GAAGb,GAAe,SAAS,IAAIC,CAAM,GACjE,cAAY,OACZ,SAAU,GACZ,EAEFjC,EAAC,OAAI,UAAU,mBACZ,UAAAmB,EAAQ2B,GAAU,QAAQ,EACzB/C,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAK+C,GAAU,IAAK,KAAK,YAAY,EAC/C,EAEA/C,EAACS,EAAA,CACC,OAAQsC,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EAED3B,EAAQ8B,GAAgB,QAAQ,EAC/BlD,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6DAC/C,SAAAA,EAAC,UAAO,IAAKkD,GAAgB,IAAK,KAAK,YAAY,EACrD,EAEAlD,EAACS,EAAA,CACC,OAAQyC,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,GAEJ,EACA9C,EAAC,OACC,UAAWe,EACT,0DACAmB,IAAa,OAAS,oCAAsC,aAC9D,EAEA,UAAAlC,EAAC,OAAI,UAAU,2GACb,UAAAA,EAAC,OAAI,UAAU,sBACb,UAAAD,EAACW,EAAA,CAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMkC,EAAO,EAC9D7C,EAACW,EAAA,CACC,GAAG,KACH,UAAU,uFACV,KAAMmC,EACR,GACF,EACA7C,EAAC,OAAI,UAAU,8BACZ,UAAAgD,GAAmBA,EAAgB,MAClChD,EAACS,EAAA,CACC,aAAYmC,GAASC,EACrB,UAAW9B,EAAGwC,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,aAAY,GAAGD,CAAE,aACjB,QAAS,IAAM,CACblB,IAAyBL,CAAI,CAC/B,EACA,KAAMN,EACJR,EAAiB+B,EAAgB,MAAQ,GAAIhB,GAAe,QAAU,IAAI,EAC1E,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIG,EAAgB,IAAI,GAChF,6BAA4B,GAAGhB,GAAe,SAAS,IAAIC,CAAM,GAEhE,UAAAe,EAAgB,KACjBjD,EAAC,QAAK,UAAU,UAAW,SAAA6C,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,MAC9BhD,EAACU,EAAA,CACC,aAAYmC,GAASC,EACrB,UAAW9B,EAAGwC,EAAc,YAAY,EACxC,QAAQ,UACR,aAAY,GAAGD,CAAE,cACjB,GAAG,IACH,QAAS,IAAM,CACbjB,IAAuBN,CAAI,CAC7B,EACA,KAAMN,EACJR,EAAiB8B,EAAc,MAAQ,GAAIf,GAAe,QAAU,IAAI,EACxE,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGe,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,6BAA4B,GAAGf,GAAe,SAAS,IAAIC,CAAM,GAEhE,SAAAc,EAAc,KACjB,GAEJ,GACF,GACEI,GAAO,KAAOC,IACdrD,EAAC,OAAI,UAAU,+EACb,SAAAA,EAAC,UACC,QAAS,IAAM,CACbiC,GAAe,sBACbqB,GAAaD,EAAYA,EAAYD,GAAO,KAAOC,EACnDC,CACF,CACF,EACA,UAAU,+GAEV,SAAAtD,EAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,SAAAA,EAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EACF,GAEJ,GACF,CAEJ,EAEMyD,EAA0BvD,EAAM,WAAyD,CAACwD,EAAOhB,IAAQ,CAC7G,KAAM,CAAE,KAAAiB,EAAM,UAAAC,EAAW,uBAAAvB,EAAwB,qBAAAC,EAAsB,GAAGuB,CAAK,EAAIH,EAC7E,CAAE,aAAAI,EAAc,WAAAC,EAAa,GAAO,MAAAC,EAAQ,CAAC,EAAG,SAAAC,CAAS,EAAIN,EAC7D,CAACO,EAASC,CAAU,EAAIhE,EAAkB,EAAK,EAC/C,CAACiE,EAAUC,CAAW,EAAIlE,EAAiB,EAAE,EAC7C,CAACmE,EAAWC,CAAY,EAAIpE,EAAiB,EAAE,EAC/C,CAAE,OAAAqE,EAAS,IAAK,EAAI7C,GAAe,EAEnC8C,EAAWC,GAAyC,CACxD,OAAQA,EAAO,CACb,IAAK,OACH,MAAO,IACT,IAAK,OACH,MAAO,GACT,IAAK,YACH,MAAO,EACX,CACF,EAEMC,EAAWX,EACd,IAAIhC,GAAQA,EAAK,OAAO,EACxB,OAAO,OAAO,EACd,OAAO,CAACA,EAAM4C,EAAOC,IAAQA,EAAI,QAAQ7C,CAAI,IAAM4C,CAAK,EAErDE,EAA0B,CAACC,EAAazB,IAAuB,CACnEa,EAAW,EAAI,EACXb,EACFiB,IAAeQ,GAAO,EAAE,EAExBV,IAAcU,GAAO,EAAE,CAE3B,EACMC,EAAkB,CAACC,EAAaC,IAAmB,CACvD,OAAQD,EAAK,CACX,IAAK,GACH,MAAO,GACT,IAAK,GACH,MAAO,GACT,QACE,OAAOC,EAAO,IAAM,CACxB,CACF,EAEMC,EAAeR,EAClB,IAAIS,IAAY,CACf,QAAAA,EACA,MAAOpB,EAAM,OAAOhC,GAAQA,EAAK,UAAYoD,CAAO,CACtD,EAAE,EACD,OACC,CAACC,EAAKC,KACJD,EAAIC,EAAI,OAAO,EAAIA,EAAI,MAChBD,GAET,CAAC,CACH,EAGF,OAAI1B,EAAK,OAAS,YAAcK,EAAM,OAAS,EAE3ChE,EAACO,EAAA,CACC,KAAMoD,EACN,qBAAsBrB,EACtB,uBAAwBD,EACxB,UAAWuB,EACX,IAAKlB,EACJ,GAAGmB,EACN,EAKF5D,EAAC,WACC,uBAAqB,0BACrB,IAAKyC,EACJ,GAAGmB,EACJ,UAAW7C,EAAG,0BAA2B,oBAAqB4C,CAAS,EAEtE,UAAAE,GAAgB9D,EAACe,EAAA,CAAM,KAAM,CAAE,MAAO+C,CAAa,EAAG,UAAU,gBAAgB,EAEhFC,EACC9D,EAACoB,EAAA,CAAK,MAAM,OAAO,aAAcJ,EAAc0D,EAAS,CAAC,CAAE,EACzD,UAAA3E,EAACsB,GAAA,CACE,SAAAqD,EAAS,IAAI,CAACS,EAASR,IACtB5E,EAACuB,GAAA,CAEC,MAAON,EAAcmE,CAAQ,EAC7B,QAAS,IAAM,CACbxD,GAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgBC,EAChB,eAAgBC,EAChB,gBAAiBgC,EACjB,mBAAoB,EACpB,WAAYsB,EACZ,YAAaA,CACf,CACF,CAAC,CACH,EAEC,SAAAA,GAlBIR,CAmBP,CACD,EACH,EACCD,EAAS,IAAI,CAACS,EAASR,IACtB5E,EAACwB,GAAA,CAAwB,MAAOP,EAAcmE,CAAQ,EAAG,UAAU,qCACjE,SAAAnF,EAAAF,EAAA,CACE,UAAAC,EAACmB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAMgE,IAAeC,CAAO,GAAK,CAAC,EAClC,cAAe,CACb,MAAOrB,EACP,UAAWqB,EACX,MAAOtB,EACP,IAAKqB,IAAeC,CAAO,GAAG,QAAU,EACxC,OAAAZ,EACA,oBAAqBM,EACrB,uBAAAzC,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeiD,EAAgBG,IAAeC,CAAO,GAAG,QAAU,EAAG,EAAI,CAC3E,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeJ,EAAgBG,IAAeC,CAAO,GAAG,QAAU,CAAC,CACrE,CACF,EACF,EACCnB,GAAYA,GAAU,MAAM,OAAS,EACpCjE,EAACmB,EAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAM8C,GAAU,OAAS,CAAC,EAC1B,cAAe,CACb,MAAOF,EACP,OAAAS,EACA,oBAAqBM,EACrB,MAAOhB,EACP,uBAAAzB,EACA,qBAAAC,CACF,CACF,EACA,MAAOP,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,EACE,MACN,GAvFgB6C,CAwFlB,CACD,GACH,EAEA3E,EAAAF,EAAA,CACE,UAAAE,EAACY,EAAA,CAAK,UAAU,SACb,UAAAmD,EAAM,IAAI,CAAChC,EAAM4C,IAEd5E,EAACc,EAAA,CAEC,KAAM2D,EAAQzC,EAAK,OAAS,MAAM,EAClC,UAAU,sBAEV,SAAAhC,EAAC+B,EAAA,CACC,KAAMC,EACN,cAAe,CACb,OAAAwC,EACA,oBAAqBM,EACrB,MAAOhB,CACT,EACA,OAAQc,EACR,SAAU5C,EAAK,MACf,uBAAwBK,EACxB,qBAAsBC,EACxB,GAfK,GAAGN,GAAM,OAAS,EAAE,GAAG4C,CAAK,EAgBnC,CAEH,EACAZ,EAAM,IAAI,CAAChC,EAAM4C,IAChB5E,EAACc,EAAA,CAA8C,KAAM2D,EAAQ,MAAM,EAAG,UAAU,sBAC9E,SAAAzE,EAAC+B,EAAA,CACC,KAAMC,EACN,cAAe,CACb,OAAAwC,EACA,oBAAqBM,EACrB,MAAOhB,CACT,EACA,OAAQc,EACR,SAAU,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport MultiLayoutGraphicBlockCarouselImpl from './MultiLayoutGraphicBlockCarousel.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/grid.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n spanType,\n title: titleProp,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n title?: string\n onSecondaryButtonClick?: (data: Item) => void\n onPrimaryButtonClick?: (data: Item) => void\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n if (spanType) {\n switch (spanType) {\n case 'full':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 'half':\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 'one-third':\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n } else {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n id,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper cursor-pointer',\n 'text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-box': true,\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {(blockLink || secondaryButton.link) && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden size-full overflow-hidden object-cover\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block size-full overflow-hidden object-cover\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n </div>\n <div\n className={cn(\n 'pointer-events-none absolute inset-0 z-20 flex flex-col',\n spanType === 'full' ? 'laptop:justify-center justify-end' : 'justify-end'\n )}\n >\n <div className=\"laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-auto flex w-fit flex-col gap-6 p-4\">\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-2 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n data-track={`${id}-link-left`}\n onClick={() => {\n onSecondaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n data-track={`${id}-link-right`}\n as=\"a\"\n onClick={() => {\n onPrimaryButtonClick?.(item)\n }}\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n {(video?.url || youtubeId) && (\n <div className=\"laptop:bottom-6 laptop:right-6 pointer-events-auto absolute bottom-4 right-4\">\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(\n isYouTube && youtubeId ? youtubeId : video?.url || youtubeId,\n isYouTube\n )\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n </div>\n )}\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { data, className, onSecondaryButtonClick, onPrimaryButtonClick, ...rest } = props\n const { sectionTitle, groupByTab = false, items = [], carousel } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n // Carousel mode early return \u2014 MUST be after all hooks (React rules of hooks)\n if (data.mode === 'carousel' && items.length > 0) {\n return (\n <MultiLayoutGraphicBlockCarouselImpl\n data={data}\n onPrimaryButtonClick={onPrimaryButtonClick}\n onSecondaryButtonClick={onSecondaryButtonClick}\n className={className}\n ref={ref as React.Ref<HTMLElement>}\n {...rest}\n />\n )\n }\n\n return (\n <section\n data-ui-component-id=\"MultiLayoutGraphicBlock\"\n ref={ref}\n {...rest}\n className={cn('multiLayoutGraphicBlock', 'text-info-primary', className)}\n >\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={spaceToHyphen(tabName!)}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={spaceToHyphen(tabName!)} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n isTab: groupByTab,\n activeTab: tabName,\n title: sectionTitle,\n num: tabItemsMaps?.[tabName]?.length || 0,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{\n list: carousel?.items || [],\n configuration: {\n isTab: groupByTab,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => {\n return (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={item.width}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock\n data={item}\n configuration={{\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n }}\n jIndex={index}\n spanType={'full'}\n onSecondaryButtonClick={onSecondaryButtonClick}\n onPrimaryButtonClick={onPrimaryButtonClick}\n />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: carousel?.items || [],\n configuration: {\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n title: sectionTitle,\n onSecondaryButtonClick,\n onPrimaryButtonClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock, {\n container: { desktopSpan: 12, mobileSpan: 12 },\n})\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "MultiLayoutGraphicBlockCarouselImpl", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "getLocalizedPath", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "useAiuiContext", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "onSecondaryButtonClick", "onPrimaryButtonClick", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "id", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "data", "className", "rest", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
|
|
7
7
|
}
|