@anker-in/headless-ui 0.0.51 → 0.0.52
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/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +1 -1
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var C=Object.create;var m=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},u=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of E(t))!H.call(e,p)&&p!==o&&m(e,p,{get:()=>t[p],enumerable:!(a=S(t,p))||a.enumerable});return e};var f=(e,t,o)=>(o=e!=null?C(G(e)):{},u(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>u(m({},"__esModule",{value:!0}),e);var V={};B(V,{default:()=>R});module.exports=D(V);var s=require("react/jsx-runtime"),r=f(require("react")),d=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),k=f(require("../SwiperBox/index.js")),v=require("../../components/index.js"),h=require("../../components/index.js"),y=require("../../components/container.js"),M=f(require("../Title/index.js")),N=require("react-responsive"),T=require("../../hooks/useExposure.js"),P=require("../../shared/trackUrlRef.js");const g="image",w="graphic",L=({data:e,configuration:t})=>{const o=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,s.jsx)("div",{className:(0,d.cn)((()=>{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-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),{"h-[360px]":o},"flex-1 shrink-0 md:basis-[296px]"),children:(0,s.jsx)("div",{className:(0,d.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,s.jsxs)("a",{href:(0,P.trackUrlRef)(e?.href,`${g}_${w}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[(0,s.jsx)(h.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),(0,s.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,s.jsx)(h.Text,{style:{color:e?.textColor},html:e?.title,className:"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]"}),e?.description&&(0,s.jsx)(v.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},x=r.default.forwardRef(({data:e,className:t,...o},a)=>{const p=(0,r.useRef)(null),n=l=>{const i=e?.items?.length>3,c=e?.items?.length>2;switch(l){case 1440:return i?4:e?.items?.length;case 1024:return i?3:e?.items?.length;case 768:return i||c?2.3:2;default:return 1.
|
|
1
|
+
"use strict";"use client";var C=Object.create;var m=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var G=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var o in t)m(e,o,{get:t[o],enumerable:!0})},u=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of E(t))!H.call(e,p)&&p!==o&&m(e,p,{get:()=>t[p],enumerable:!(a=S(t,p))||a.enumerable});return e};var f=(e,t,o)=>(o=e!=null?C(G(e)):{},u(t||!e||!e.__esModule?m(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>u(m({},"__esModule",{value:!0}),e);var V={};B(V,{default:()=>R});module.exports=D(V);var s=require("react/jsx-runtime"),r=f(require("react")),d=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),k=f(require("../SwiperBox/index.js")),v=require("../../components/index.js"),h=require("../../components/index.js"),y=require("../../components/container.js"),M=f(require("../Title/index.js")),N=require("react-responsive"),T=require("../../hooks/useExposure.js"),P=require("../../shared/trackUrlRef.js");const g="image",w="graphic",L=({data:e,configuration:t})=>{const o=(0,N.useMediaQuery)({query:"(max-width: 768px)"});return(0,s.jsx)("div",{className:(0,d.cn)((()=>{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-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),{"h-[360px]":o},"flex-1 shrink-0 md:basis-[296px]"),children:(0,s.jsx)("div",{className:(0,d.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,s.jsxs)("a",{href:(0,P.trackUrlRef)(e?.href,`${g}_${w}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[(0,s.jsx)(h.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),(0,s.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,s.jsx)(h.Text,{style:{color:e?.textColor},html:e?.title,className:"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]"}),e?.description&&(0,s.jsx)(v.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},x=r.default.forwardRef(({data:e,className:t,...o},a)=>{const p=(0,r.useRef)(null),n=l=>{const i=e?.items?.length>3,c=e?.items?.length>2;switch(l){case 1440:return i?4:e?.items?.length;case 1024:return i?3:e?.items?.length;case 768:return i||c?2.3:2;default:return 1.2}};return(0,r.useImperativeHandle)(a,()=>p.current),(0,T.useExposure)(p,{componentType:g,componentName:w,componentTitle:e?.title}),(0,r.useEffect)(()=>{const l=p.current?.querySelectorAll(".graphic-description");if(l&&l.length>0){let i=0;l.forEach(c=>{i=Math.max(i,c.offsetHeight)}),l.forEach(c=>{c.style.height=`${i}px`})}},[]),(0,s.jsx)("div",{className:t,ref:p,children:(0,s.jsx)("div",{className:"graphic-box",children:(0,s.jsxs)(y.Container,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&(0,s.jsx)(M.default,{data:{title:e?.title}}),(0,s.jsx)(k.default,{id:"Graphic",className:(0,d.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:L,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:n()},768:{spaceBetween:16,freeMode:!1,slidesPerView:n(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:n(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:n(1440)}}})]})})})});x.displayName="Graphic";var R=(0,b.withStyles)(x);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\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-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n {\n 'h-[360px]': isMobile,\n },\n 'flex-1 shrink-0 md:basis-[296px]'\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\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-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n {\n 'h-[360px]': isMobile,\n },\n 'flex-1 shrink-0 md:basis-[296px]'\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n },\n }}\n Slide={Item}\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(),\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 </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_container", "import_Title", "import_react_responsive", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "React", "className", "props", "ref", "innerRef", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var U=Object.create;var T=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var F=(s,p)=>{for(var o in p)T(s,o,{get:p[o],enumerable:!0})},$=(s,p,o,i)=>{if(p&&typeof p=="object"||typeof p=="function")for(let l of q(p))!O.call(s,l)&&l!==o&&T(s,l,{get:()=>p[l],enumerable:!(i=Q(p,l))||i.enumerable});return s};var w=(s,p,o)=>(o=s!=null?U(A(s)):{},$(p||!s||!s.__esModule?T(o,"default",{value:s,enumerable:!0}):o,s)),J=s=>$(T({},"__esModule",{value:!0}),s);var W={};F(W,{default:()=>K});module.exports=J(W);var e=require("react/jsx-runtime"),c=w(require("react")),R=require("react-responsive"),z=require("../../shared/Styles.js"),P=w(require("../../components/picture.js")),V=w(require("../../components/button.js")),C=require("../../components/heading.js"),E=require("../../components/text.js"),v=require("../../components/gird.js"),j=w(require("../Title/index.js")),I=require("../../helpers/utils.js"),M=w(require("../SwiperBox/index.js")),G=require("../../shared/mimeType.js"),n=require("../../components/tabs.js"),H=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),D=require("../../shared/track.js");const k="image",b="p1_banner",g=({data:s,configuration:p,jIndex:o,spanType:i})=>{const[l,d]=(0,c.useState)(!1),r=(0,R.useMediaQuery)({query:"(max-width: 768px)"}),h=(0,c.useRef)(null),m=()=>{if(i)switch(i){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(p?.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,H.useExposure)(h,{componentType:k,componentName:b,position:o,componentTitle:s.title,componentDescription:s.description,navigation:p?.activeTab}),(0,c.useEffect)(()=>{d(r)},[r]);const{theme:y="light",title:u,description:t,imageUrl:a,primaryButton:f,secondaryButton:x,imageMobileUrl:B,blockLink: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 text-info-primary group relative box-border w-full overflow-hidden",m(),{"rounded-2xl":p?.shape==="rounded","aiui-dark":y==="dark","h-[480px]":l&&!p?.isTab,"h-[400px]":l&&p?.isTab},"text-info-primary"),ref:h,children:[L&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,N.trackUrlRef)(L,`${k}_${b}`),"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,G.isVideo)(a?.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:a?.url,type:"video/mp4"})}):(0,e.jsx)(P.default,{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}`}}),(0,G.isVideo)(B?.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:B?.url,type:"video/mp4"})}):(0,e.jsx)(P.default,{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"}),(0,e.jsxs)("div",{className:(0,I.cn)("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-3",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":s?.width==="full"}),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(C.Heading,{size:3,className:"item-title",html:u}),(0,e.jsx)(E.Text,{size:2,className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:t})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[x&&x.text&&(0,e.jsx)("a",{href:(0,N.trackUrlRef)(x.link,`${k}_${b}`),children:(0,e.jsx)(V.default,{className:_,variant:"secondary",children:x.text})}),f&&f.text&&(0,e.jsx)("a",{href:(0,N.trackUrlRef)(f.link,`${k}_${b}`),children:(0,e.jsx)(V.default,{className:_,variant:"primary",children:f.text})})]})]})]})]})},S=c.default.forwardRef((s,p)=>{const{shape:o,sectionTitle:i,groupByTab:l=!1,items:d=[],carousel:r}=s.data,h=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(t=>t.tabName).filter(Boolean).filter((t,a,f)=>f.indexOf(t)===a),y=(t,a)=>{switch(t){case 1:return 1;case 2:return 2;default:return a?2.3:3}},u=m.map(t=>({tabName:t,items:d.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:p,className:"text-info-primary",children:[i&&(0,e.jsx)(j.default,{data:{title:i},className:"section-title"}),l?(0,e.jsxs)(n.Tabs,{shape:o,align:"left",defaultValue:m[0],children:[(0,e.jsx)(n.TabsList,{children:m.map((t,a)=>(0,e.jsx)(n.TabsTrigger,{value:t,onClick:()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:k,component_name:b,component_title:i,component_position:1,navigation:t,button_name:t}})},children:t},a))}),m.map((t,a)=>(0,e.jsx)(n.TabsContent,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:u?.[t]||[],configuration:{shape:o,isTab:l,activeTab:t,num:u?.[t]?.length||0}},Slide:g,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.
|
|
1
|
+
"use strict";var U=Object.create;var T=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var F=(s,p)=>{for(var o in p)T(s,o,{get:p[o],enumerable:!0})},$=(s,p,o,i)=>{if(p&&typeof p=="object"||typeof p=="function")for(let l of q(p))!O.call(s,l)&&l!==o&&T(s,l,{get:()=>p[l],enumerable:!(i=Q(p,l))||i.enumerable});return s};var w=(s,p,o)=>(o=s!=null?U(A(s)):{},$(p||!s||!s.__esModule?T(o,"default",{value:s,enumerable:!0}):o,s)),J=s=>$(T({},"__esModule",{value:!0}),s);var W={};F(W,{default:()=>K});module.exports=J(W);var e=require("react/jsx-runtime"),c=w(require("react")),R=require("react-responsive"),z=require("../../shared/Styles.js"),P=w(require("../../components/picture.js")),V=w(require("../../components/button.js")),C=require("../../components/heading.js"),E=require("../../components/text.js"),v=require("../../components/gird.js"),j=w(require("../Title/index.js")),I=require("../../helpers/utils.js"),M=w(require("../SwiperBox/index.js")),G=require("../../shared/mimeType.js"),n=require("../../components/tabs.js"),H=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),D=require("../../shared/track.js");const k="image",b="p1_banner",g=({data:s,configuration:p,jIndex:o,spanType:i})=>{const[l,d]=(0,c.useState)(!1),r=(0,R.useMediaQuery)({query:"(max-width: 768px)"}),h=(0,c.useRef)(null),m=()=>{if(i)switch(i){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(p?.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,H.useExposure)(h,{componentType:k,componentName:b,position:o,componentTitle:s.title,componentDescription:s.description,navigation:p?.activeTab}),(0,c.useEffect)(()=>{d(r)},[r]);const{theme:y="light",title:u,description:t,imageUrl:a,primaryButton:f,secondaryButton:x,imageMobileUrl:B,blockLink: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 text-info-primary group relative box-border w-full overflow-hidden",m(),{"rounded-2xl":p?.shape==="rounded","aiui-dark":y==="dark","h-[480px]":l&&!p?.isTab,"h-[400px]":l&&p?.isTab},"text-info-primary"),ref:h,children:[L&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,N.trackUrlRef)(L,`${k}_${b}`),"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,G.isVideo)(a?.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:a?.url,type:"video/mp4"})}):(0,e.jsx)(P.default,{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}`}}),(0,G.isVideo)(B?.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:B?.url,type:"video/mp4"})}):(0,e.jsx)(P.default,{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"}),(0,e.jsxs)("div",{className:(0,I.cn)("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-3",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":s?.width==="full"}),children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(C.Heading,{size:3,className:"item-title",html:u}),(0,e.jsx)(E.Text,{size:2,className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:t})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[x&&x.text&&(0,e.jsx)("a",{href:(0,N.trackUrlRef)(x.link,`${k}_${b}`),children:(0,e.jsx)(V.default,{className:_,variant:"secondary",children:x.text})}),f&&f.text&&(0,e.jsx)("a",{href:(0,N.trackUrlRef)(f.link,`${k}_${b}`),children:(0,e.jsx)(V.default,{className:_,variant:"primary",children:f.text})})]})]})]})]})},S=c.default.forwardRef((s,p)=>{const{shape:o,sectionTitle:i,groupByTab:l=!1,items:d=[],carousel:r}=s.data,h=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(t=>t.tabName).filter(Boolean).filter((t,a,f)=>f.indexOf(t)===a),y=(t,a)=>{switch(t){case 1:return 1;case 2:return 2;default:return a?2.3:3}},u=m.map(t=>({tabName:t,items:d.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:p,className:"text-info-primary",children:[i&&(0,e.jsx)(j.default,{data:{title:i},className:"section-title"}),l?(0,e.jsxs)(n.Tabs,{shape:o,align:"left",defaultValue:m[0],children:[(0,e.jsx)(n.TabsList,{children:m.map((t,a)=>(0,e.jsx)(n.TabsTrigger,{value:t,onClick:()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:k,component_name:b,component_title:i,component_position:1,navigation:t,button_name:t}})},children:t},a))}),m.map((t,a)=>(0,e.jsx)(n.TabsContent,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:u?.[t]||[],configuration:{shape:o,isTab:l,activeTab:t,num:u?.[t]?.length||0}},Slide:g,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:y(u?.[t]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:y(u?.[t]?.length||0)}}}),r&&r?.items.length>0?(0,e.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:o,isTab:l}},Slide:g,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))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(v.Grid,{className:"w-full",children:[d.map((t,a)=>(0,e.jsx)(v.GridItem,{span:h(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(g,{data:t,configuration:{shape:o},jIndex:a,spanType:t.width})},`${t?.title||""}${a}`)),d.map((t,a)=>(0,e.jsx)(v.GridItem,{span:h("full"),className:"laptop:hidden block",children:(0,e.jsx)(g,{data:t,configuration:{shape:o},jIndex:a,spanType:"full"})},`${t?.title||""}${a}`))]}),r&&r?.items.length>0?(0,e.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:o}},Slide:g,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.displayName="MultiLayoutGraphicBlock";var K=(0,z.withStyles)(S);
|
|
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 { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } 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 { 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}: {\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 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 } = 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-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\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-3',\n {\n 'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text\n size={2}\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 <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\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 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 return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={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={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 shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\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.1,\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={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\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.1,\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 data={item} configuration={{ shape: shape }} jIndex={index} spanType={item.width} />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={'full'} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\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.1,\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 </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } 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 { 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}: {\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 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 } = 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-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\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-3',\n {\n 'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text\n size={2}\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 <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\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 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 return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={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={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 shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\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={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\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 data={item} configuration={{ shape: shape }} jIndex={index} spanType={item.width} />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={'full'} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\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 </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_mimeType", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as c}from"react/jsx-runtime";import u,{useEffect as g,useImperativeHandle as w,useRef as x}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as b}from"../../shared/Styles.js";import k from"../SwiperBox/index.js";import{Heading as v}from"../../components/index.js";import{Picture as y,Text as M}from"../../components/index.js";import{Container as N}from"../../components/container.js";import T from"../Title/index.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as C}from"../../hooks/useExposure.js";import{trackUrlRef as S}from"../../shared/trackUrlRef.js";const d="image",h="graphic",E=({data:e,configuration:r})=>{const n=P({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(r.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-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),{"h-[360px]":n},"flex-1 shrink-0 md:basis-[296px]"),children:t("div",{className:a("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":r?.itemShape==="round"}),children:c("a",{href:S(e?.href,`${d}_${h}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[t(y,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),c("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[t(M,{style:{color:e?.textColor},html:e?.title,className:"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]"}),e?.description&&t(v,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},f=u.forwardRef(({data:e,className:r,...n},m)=>{const i=x(null),l=o=>{const s=e?.items?.length>3,p=e?.items?.length>2;switch(o){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||p?2.3:2;default:return 1.
|
|
1
|
+
"use client";import{jsx as t,jsxs as c}from"react/jsx-runtime";import u,{useEffect as g,useImperativeHandle as w,useRef as x}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as b}from"../../shared/Styles.js";import k from"../SwiperBox/index.js";import{Heading as v}from"../../components/index.js";import{Picture as y,Text as M}from"../../components/index.js";import{Container as N}from"../../components/container.js";import T from"../Title/index.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as C}from"../../hooks/useExposure.js";import{trackUrlRef as S}from"../../shared/trackUrlRef.js";const d="image",h="graphic",E=({data:e,configuration:r})=>{const n=P({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(r.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-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}})(),{"h-[360px]":n},"flex-1 shrink-0 md:basis-[296px]"),children:t("div",{className:a("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":r?.itemShape==="round"}),children:c("a",{href:S(e?.href,`${d}_${h}`),className:"relative block size-full cursor-pointer overflow-hidden",children:[t(y,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""}),c("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[t(M,{style:{color:e?.textColor},html:e?.title,className:"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]"}),e?.description&&t(v,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},f=u.forwardRef(({data:e,className:r,...n},m)=>{const i=x(null),l=o=>{const s=e?.items?.length>3,p=e?.items?.length>2;switch(o){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return s||p?2.3:2;default:return 1.2}};return w(m,()=>i.current),C(i,{componentType:d,componentName:h,componentTitle:e?.title}),g(()=>{const o=i.current?.querySelectorAll(".graphic-description");if(o&&o.length>0){let s=0;o.forEach(p=>{s=Math.max(s,p.offsetHeight)}),o.forEach(p=>{p.style.height=`${s}px`})}},[]),t("div",{className:r,ref:i,children:t("div",{className:"graphic-box",children:c(N,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(T,{data:{title:e?.title}}),t(k,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:E,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:l()},768:{spaceBetween:16,freeMode:!1,slidesPerView:l(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:l(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:l(1440)}}})]})})})});f.displayName="Graphic";var $=b(f);export{$ as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\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-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n {\n 'h-[360px]': isMobile,\n },\n 'flex-1 shrink-0 md:basis-[296px]'\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useEffect, useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\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-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n {\n 'h-[360px]': isMobile,\n },\n 'flex-1 shrink-0 md:basis-[296px]'\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-[18px] desktop:text-[16px] text-[14px] font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n },\n }}\n Slide={Item}\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(),\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 </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useEffect", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useMediaQuery", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "className", "props", "ref", "innerRef", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Graphic_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as L,jsx as a,jsxs as s}from"react/jsx-runtime";import _,{useState as $,useEffect as S,useRef as R}from"react";import{useMediaQuery as z}from"react-responsive";import{withStyles as C}from"../../shared/Styles.js";import M from"../../components/picture.js";import N from"../../components/button.js";import{Heading as E}from"../../components/heading.js";import{Text as j}from"../../components/text.js";import{Grid as H,GridItem as P}from"../../components/gird.js";import D from"../Title/index.js";import{cn as V}from"../../helpers/utils.js";import y from"../SwiperBox/index.js";import{isVideo as I}from"../../shared/mimeType.js";import{Tabs as U,TabsList as Q,TabsTrigger as q,TabsContent as A}from"../../components/tabs.js";import{useExposure as O}from"../../hooks/useExposure.js";import{trackUrlRef as x}from"../../shared/trackUrlRef.js";import{gaTrack as F}from"../../shared/track.js";const h="image",w="p1_banner",k=({data:i,configuration:l,jIndex:o,spanType:r})=>{const[c,n]=$(!1),p=z({query:"(max-width: 768px)"}),f=R(null),d=()=>{if(r)switch(r){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]"}};O(f,{componentType:h,componentName:w,position:o,componentTitle:i.title,componentDescription:i.description,navigation:l?.activeTab}),S(()=>{n(p)},[p]);const{theme:b="light",title:m,description:e,imageUrl:t,primaryButton:u,secondaryButton:g,imageMobileUrl:v,blockLink:B}=i,T="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return s("div",{className:V("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",d(),{"rounded-2xl":l?.shape==="rounded","aiui-dark":b==="dark","h-[480px]":c&&!l?.isTab,"h-[400px]":c&&l?.isTab},"text-info-primary"),ref:f,children:[B&&a("a",{className:"absolute inset-0 z-10",href:x(B,`${h}_${w}`),"aria-hidden":"true",tabIndex:-1}),s("div",{className:"absolute inset-0",children:[I(t?.mimeType)?a("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:a("source",{src:t?.url,type:"video/mp4"})}):a(M,{source:t?.url,alt:t?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${t?.width}/${t?.height}`}}),I(v?.mimeType)?a("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:a("source",{src:v?.url,type:"video/mp4"})}):a(M,{source:v?.url||t?.url,alt:v?.alt||t?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),s("div",{className:V("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-3",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":i?.width==="full"}),children:[s("div",{children:[a(E,{size:3,className:"item-title",html:m}),a(j,{size:2,className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:e})]}),s("div",{className:"lg-desktop:gap-3 flex gap-2",children:[g&&g.text&&a("a",{href:x(g.link,`${h}_${w}`),children:a(N,{className:T,variant:"secondary",children:g.text})}),u&&u.text&&a("a",{href:x(u.link,`${h}_${w}`),children:a(N,{className:T,variant:"primary",children:u.text})})]})]})]})]})},G=_.forwardRef((i,l)=>{const{shape:o,sectionTitle:r,groupByTab:c=!1,items:n=[],carousel:p}=i.data,f=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},d=n.map(e=>e.tabName).filter(Boolean).filter((e,t,u)=>u.indexOf(e)===t),b=(e,t)=>{switch(e){case 1:return 1;case 2:return 2;default:return t?2.3:3}},m=d.map(e=>({tabName:e,items:n.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return s("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:l,className:"text-info-primary",children:[r&&a(D,{data:{title:r},className:"section-title"}),c?s(U,{shape:o,align:"left",defaultValue:d[0],children:[a(Q,{children:d.map((e,t)=>a(q,{value:e,onClick:()=>{F({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:h,component_name:w,component_title:r,component_position:1,navigation:e,button_name:e}})},children:e},t))}),d.map((e,t)=>a(A,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:s(L,{children:[a(y,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:m?.[e]||[],configuration:{shape:o,isTab:c,activeTab:e,num:m?.[e]?.length||0}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.
|
|
1
|
+
import{Fragment as L,jsx as a,jsxs as s}from"react/jsx-runtime";import _,{useState as $,useEffect as S,useRef as R}from"react";import{useMediaQuery as z}from"react-responsive";import{withStyles as C}from"../../shared/Styles.js";import M from"../../components/picture.js";import N from"../../components/button.js";import{Heading as E}from"../../components/heading.js";import{Text as j}from"../../components/text.js";import{Grid as H,GridItem as P}from"../../components/gird.js";import D from"../Title/index.js";import{cn as V}from"../../helpers/utils.js";import y from"../SwiperBox/index.js";import{isVideo as I}from"../../shared/mimeType.js";import{Tabs as U,TabsList as Q,TabsTrigger as q,TabsContent as A}from"../../components/tabs.js";import{useExposure as O}from"../../hooks/useExposure.js";import{trackUrlRef as x}from"../../shared/trackUrlRef.js";import{gaTrack as F}from"../../shared/track.js";const h="image",w="p1_banner",k=({data:i,configuration:l,jIndex:o,spanType:r})=>{const[c,n]=$(!1),p=z({query:"(max-width: 768px)"}),f=R(null),d=()=>{if(r)switch(r){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]"}};O(f,{componentType:h,componentName:w,position:o,componentTitle:i.title,componentDescription:i.description,navigation:l?.activeTab}),S(()=>{n(p)},[p]);const{theme:b="light",title:m,description:e,imageUrl:t,primaryButton:u,secondaryButton:g,imageMobileUrl:v,blockLink:B}=i,T="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return s("div",{className:V("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",d(),{"rounded-2xl":l?.shape==="rounded","aiui-dark":b==="dark","h-[480px]":c&&!l?.isTab,"h-[400px]":c&&l?.isTab},"text-info-primary"),ref:f,children:[B&&a("a",{className:"absolute inset-0 z-10",href:x(B,`${h}_${w}`),"aria-hidden":"true",tabIndex:-1}),s("div",{className:"absolute inset-0",children:[I(t?.mimeType)?a("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:a("source",{src:t?.url,type:"video/mp4"})}):a(M,{source:t?.url,alt:t?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${t?.width}/${t?.height}`}}),I(v?.mimeType)?a("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:a("source",{src:v?.url,type:"video/mp4"})}):a(M,{source:v?.url||t?.url,alt:v?.alt||t?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),s("div",{className:V("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-3",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":i?.width==="full"}),children:[s("div",{children:[a(E,{size:3,className:"item-title",html:m}),a(j,{size:2,className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:e})]}),s("div",{className:"lg-desktop:gap-3 flex gap-2",children:[g&&g.text&&a("a",{href:x(g.link,`${h}_${w}`),children:a(N,{className:T,variant:"secondary",children:g.text})}),u&&u.text&&a("a",{href:x(u.link,`${h}_${w}`),children:a(N,{className:T,variant:"primary",children:u.text})})]})]})]})]})},G=_.forwardRef((i,l)=>{const{shape:o,sectionTitle:r,groupByTab:c=!1,items:n=[],carousel:p}=i.data,f=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},d=n.map(e=>e.tabName).filter(Boolean).filter((e,t,u)=>u.indexOf(e)===t),b=(e,t)=>{switch(e){case 1:return 1;case 2:return 2;default:return t?2.3:3}},m=d.map(e=>({tabName:e,items:n.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return s("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:l,className:"text-info-primary",children:[r&&a(D,{data:{title:r},className:"section-title"}),c?s(U,{shape:o,align:"left",defaultValue:d[0],children:[a(Q,{children:d.map((e,t)=>a(q,{value:e,onClick:()=>{F({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:h,component_name:w,component_title:r,component_position:1,navigation:e,button_name:e}})},children:e},t))}),d.map((e,t)=>a(A,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:s(L,{children:[a(y,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:m?.[e]||[],configuration:{shape:o,isTab:c,activeTab:e,num:m?.[e]?.length||0}},Slide:k,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(m?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(m?.[e]?.length||0)}}}),p&&p?.items.length>0?a(y,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:p?.items||[],configuration:{shape:o,isTab:c}},Slide:k,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]})},t))]}):s(L,{children:[s(H,{className:"w-full",children:[n.map((e,t)=>a(P,{span:f(e.width??"full"),className:"laptop:block hidden",children:a(k,{data:e,configuration:{shape:o},jIndex:t,spanType:e.width})},`${e?.title||""}${t}`)),n.map((e,t)=>a(P,{span:f("full"),className:"laptop:hidden block",children:a(k,{data:e,configuration:{shape:o},jIndex:t,spanType:"full"})},`${e?.title||""}${t}`))]}),p&&p?.items.length>0?a(y,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:p?.items||[],configuration:{shape:o}},Slide:k,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]})]})});G.displayName="MultiLayoutGraphicBlock";var ne=C(G);export{ne 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 { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } 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 { 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}: {\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 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 } = 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-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\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-3',\n {\n 'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text\n size={2}\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 <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\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 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 return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={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={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 shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\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.1,\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={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\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.1,\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 data={item} configuration={{ shape: shape }} jIndex={index} spanType={item.width} />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={'full'} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\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.1,\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 </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } 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 { 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}: {\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 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 } = 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-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\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-3',\n {\n 'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text\n size={2}\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 <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\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 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 return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={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={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 shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\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={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\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 data={item} configuration={{ shape: shape }} jIndex={index} spanType={item.width} />\n </GridItem>\n )\n })}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} spanType={'full'} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\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 </section>\n )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withStyles", "Picture", "Button", "Heading", "Text", "Grid", "GridItem", "Title", "cn", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
|
|
7
7
|
}
|