@anker-in/headless-ui 0.0.27-alpha.152 → 0.0.27-alpha.153

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.
Files changed (17) hide show
  1. package/dist/cjs/biz-components/Evaluate/index.js +1 -1
  2. package/dist/cjs/biz-components/Evaluate/index.js.map +2 -2
  3. package/dist/cjs/biz-components/Graphic/index.js +1 -1
  4. package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
  5. package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
  6. package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
  7. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  8. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
  9. package/dist/esm/biz-components/Evaluate/index.js +1 -1
  10. package/dist/esm/biz-components/Evaluate/index.js.map +2 -2
  11. package/dist/esm/biz-components/Graphic/index.js +1 -1
  12. package/dist/esm/biz-components/Graphic/index.js.map +2 -2
  13. package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
  14. package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
  15. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  16. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
  17. package/package.json +1 -1
package/dist/cjs/biz-components/Evaluate/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var T=Object.create;var m=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var R=(e,r)=>{for(var i in r)m(e,i,{get:r[i],enumerable:!0})},f=(e,r,i,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of z(r))!I.call(e,s)&&s!==i&&m(e,s,{get:()=>r[s],enumerable:!(n=B(r,s))||n.enumerable});return e};var p=(e,r,i)=>(i=e!=null?T(F(e)):{},f(r||!e||!e.__esModule?m(i,"default",{value:e,enumerable:!0}):i,e)),V=e=>f(m({},"__esModule",{value:!0}),e);var _={};R(_,{default:()=>S});module.exports=V(_);var t=require("react/jsx-runtime"),o=p(require("react")),w=p(require("../Title/index.js")),a=require("../../helpers/utils.js"),b=p(require("../../components/picture.js")),g=p(require("../SwiperBox/index.js")),h=require("react-responsive"),k=require("../../shared/Styles.js"),l=require("../../components/avatar.js"),N=require("../../components/container.js"),y=require("../AiuiProvider/index.js"),C=require("../../hooks/useExposure.js"),L=require("../../shared/trackUrlRef.js");const u="copy",x="product_review",D=({data:e,configuration:r})=>{const i=(0,h.useMediaQuery)({query:"(max-width: 768px)"}),n=s=>s?Array.from(new Array(Number(s)))||[]:[];return(0,t.jsxs)("div",{className:(0,a.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] aspect-[296/360]",{"h-[360px]":i}),children:[(0,t.jsxs)("div",{className:(0,a.cn)("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}),(0,t.jsx)("div",{className:"mt-1 flex items-center",children:n(e?.rating)?.map?.((s,d)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},d))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:(0,t.jsx)(l.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:e?.avatar?.url?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(l.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(l.AvatarFallback,{children:e?.title})]}):e?.title})})]}),(0,t.jsx)("div",{className:"flex-1",children:(0,t.jsx)("p",{className:(0,a.cn)("desktop:max-h-[151px] tablet:max-h-[140px]","desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold"),children:e?.description||""})}),(0,t.jsx)("a",{href:(0,L.trackUrlRef)(e?.link,`${u}_${x}`),onClick:()=>{r?.event?.primaryButton(e,r?.index)},children:(0,t.jsxs)("div",{className:(0,a.cn)("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(b.default,{className:"w-full object-cover",source:e?.img?.url})}),(0,t.jsx)("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:e?.subTitle||""})]})})]})},H=o.default.forwardRef(({className:e="",data:r,key:i,...n},s)=>{const{products:d,title:c,theme:E,...P}=r,v=(0,o.useRef)(null);(0,o.useImperativeHandle)(s,()=>v.current);const{trackingData:A}=(0,y.useAiuiContext)(),{profileActivated:M}=A;return(0,C.useExposure)(v,{componentType:u,componentName:x,memberActiveStatus:M?"active":"not active",componentTitle:c}),(0,t.jsx)("div",{className:e,ref:v,children:(0,t.jsx)("div",{className:"evaluate-box",children:(0,t.jsx)(N.Container,{...r?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:s,className:(0,a.cn)("w-full",e,{"aiui-dark":E==="dark"}),children:[c&&(0,t.jsx)(w.default,{data:{title:c}}),(0,t.jsx)(g.default,{className:"!overflow-visible",id:"Evaluate"+i,data:{list:d,configuration:{...P}},Slide:D,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var S=(0,k.withStyles)(H);
1
+ "use strict";"use client";var T=Object.create;var p=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var R=(t,r)=>{for(var i in r)p(t,i,{get:r[i],enumerable:!0})},f=(t,r,i,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of z(r))!I.call(t,s)&&s!==i&&p(t,s,{get:()=>r[s],enumerable:!(n=B(r,s))||n.enumerable});return t};var m=(t,r,i)=>(i=t!=null?T(F(t)):{},f(r||!t||!t.__esModule?p(i,"default",{value:t,enumerable:!0}):i,t)),V=t=>f(p({},"__esModule",{value:!0}),t);var _={};R(_,{default:()=>S});module.exports=V(_);var e=require("react/jsx-runtime"),o=m(require("react")),x=m(require("../Title/index.js")),a=require("../../helpers/utils.js"),h=m(require("../../components/picture.js")),b=m(require("../SwiperBox/index.js")),g=require("react-responsive"),k=require("../../shared/Styles.js"),l=require("../../components/avatar.js"),N=require("../../components/container.js"),y=require("../AiuiProvider/index.js"),C=require("../../hooks/useExposure.js"),L=require("../../shared/trackUrlRef.js");const u="copy",w="product_review",D=({data:t,configuration:r})=>{const i=(0,g.useMediaQuery)({query:"(max-width: 768px)"}),n=s=>s?Array.from(new Array(Number(s)))||[]:[];return(0,e.jsx)("div",{className:(0,a.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":i}),children:(0,e.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,e.jsxs)("div",{className:(0,a.cn)("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:t?.title}),(0,e.jsx)("div",{className:"mt-1 flex items-center",children:n(t?.rating)?.map?.((s,d)=>(0,e.jsx)("div",{className:"mr-1",children:(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,e.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},d))})]}),(0,e.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:(0,e.jsx)(l.Avatar,{className:"size-full",isAdaptation:!t?.avatar?.url,children:t?.avatar?.url?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.AvatarImage,{src:t?.avatar?.url}),(0,e.jsx)(l.AvatarFallback,{children:t?.title})]}):t?.title})})]}),(0,e.jsx)("div",{className:"flex-1",children:(0,e.jsx)("p",{className:(0,a.cn)("desktop:max-h-[151px] tablet:max-h-[140px]","desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold"),children:t?.description||""})}),(0,e.jsx)("a",{href:(0,L.trackUrlRef)(t?.link,`${u}_${w}`),onClick:()=>{r?.event?.primaryButton(t,r?.index)},children:(0,e.jsxs)("div",{className:(0,a.cn)("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,e.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,e.jsx)(h.default,{className:"w-full object-cover",source:t?.img?.url})}),(0,e.jsx)("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:t?.subTitle||""})]})})]})})},H=o.default.forwardRef(({className:t="",data:r,key:i,...n},s)=>{const{products:d,title:c,theme:E,...P}=r,v=(0,o.useRef)(null);(0,o.useImperativeHandle)(s,()=>v.current);const{trackingData:A}=(0,y.useAiuiContext)(),{profileActivated:M}=A;return(0,C.useExposure)(v,{componentType:u,componentName:w,memberActiveStatus:M?"active":"not active",componentTitle:c}),(0,e.jsx)("div",{className:t,ref:v,children:(0,e.jsx)("div",{className:"evaluate-box",children:(0,e.jsx)(N.Container,{...r?.containerProps||{},className:"overflow-hidden",children:(0,e.jsxs)("div",{ref:s,className:(0,a.cn)("w-full",t,{"aiui-dark":E==="dark"}),children:[c&&(0,e.jsx)(x.default,{data:{title:c}}),(0,e.jsx)(b.default,{className:"!overflow-visible",id:"Evaluate"+i,data:{list:d,configuration:{...P}},Slide:D,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var S=(0,k.withStyles)(H);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Evaluate/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] aspect-[296/360]',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n {data?.avatar?.url ? (\n <>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </>\n ) : (\n data?.title\n )}\n </Avatar>\n </div>\n </div>\n <div className=\"flex-1\">\n <p\n className={cn(\n 'desktop:max-h-[151px] tablet:max-h-[140px]',\n 'desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold'\n )}\n >\n {data?.description || ''}\n </p>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index)\n }}\n >\n <div\n className={cn(\n 'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n </div>\n <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n </div>\n </a>\n </div>\n )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n const { products, title, theme, ...ohter } = data\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"evaluate-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter } }}\n Slide={EvaluateItem}\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 </div>\n </Container>\n </div>\n </div>\n )\n})\n\nexport default withStyles(Evaluate)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n {data?.avatar?.url ? (\n <>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </>\n ) : (\n data?.title\n )}\n </Avatar>\n </div>\n </div>\n <div className=\"flex-1\">\n <p\n className={cn(\n 'desktop:max-h-[151px] tablet:max-h-[140px]',\n 'desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold'\n )}\n >\n {data?.description || ''}\n </p>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index)\n }}\n >\n <div\n className={cn(\n 'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n </div>\n <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n const { products, title, theme, ...ohter } = data\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"evaluate-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter } }}\n Slide={EvaluateItem}\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,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n})\n\nexport default withStyles(Evaluate)\n"],
5
+ "mappings": "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",
6
6
  "names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_react_responsive", "import_Styles", "import_avatar", "import_container", "import_AiuiProvider", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "isMobile", "handleRating", "num", "_", "index", "Picture", "Evaluate", "React", "className", "key", "rest", "ref", "products", "title", "theme", "ohter", "innerRef", "trackingData", "profileActivated", "Title", "SwiperBox"]
7
7
  }
package/dist/cjs/biz-components/Graphic/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var M=Object.create;var l=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of S(t))!A.call(e,i)&&i!==o&&l(e,i,{get:()=>t[i],enumerable:!(p=G(t,i))||p.enumerable});return e};var c=(e,t,o)=>(o=e!=null?M(B(e)):{},d(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),R=e=>d(l({},"__esModule",{value:!0}),e);var E={};H(E,{default:()=>D});module.exports=R(E);var s=require("react/jsx-runtime"),r=c(require("react")),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js"),g=c(require("../SwiperBox/index.js")),v=require("../../components/index.js"),a=require("../../components/index.js"),w=require("../../components/container.js"),k=c(require("../Title/index.js")),b=require("react-responsive"),y=require("../../hooks/useExposure.js"),N=require("../AiuiProvider/index.js"),P=require("../../shared/trackUrlRef.js");const f="image",u="graphic",V=({data:e,configuration:t})=>{const o=(0,b.useMediaQuery)({query:"(max-width: 768px)"});return(0,s.jsx)("div",{className:(0,m.cn)((()=>{switch(t.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":o,"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,s.jsxs)("a",{href:(0,P.trackUrlRef)(e?.link,`${f}_${u}`),className:"relative block size-full cursor-pointer",children:[(0,s.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,s.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,s.jsx)(a.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,s.jsx)(v.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},h=r.default.forwardRef(({data:e,className:t,...o},p)=>{const i=e?.items?.length>2,n=(0,r.useRef)(null);(0,r.useImperativeHandle)(p,()=>n.current);const{trackingData:C}=(0,N.useAiuiContext)(),{profileActivated:T}=C;return(0,y.useExposure)(n,{componentType:f,componentName:u,memberActiveStatus:T?"active":"not active",componentTitle:e?.title}),(0,s.jsx)("div",{className:t,ref:n,children:(0,s.jsx)("div",{className:"graphic-box",children:(0,s.jsxs)(w.Container,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&(0,s.jsx)(k.default,{data:{title:e?.title}}),(0,s.jsx)(g.default,{id:"Graphic",className:(0,m.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:i?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:i?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:i?4:2}}})]})})})});h.displayName="Graphic";var D=(0,x.withStyles)(h);
1
+ "use strict";"use client";var M=Object.create;var r=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var o in t)r(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of S(t))!A.call(e,p)&&p!==o&&r(e,p,{get:()=>t[p],enumerable:!(i=G(t,p))||i.enumerable});return e};var m=(e,t,o)=>(o=e!=null?M(B(e)):{},d(t||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),R=e=>d(r({},"__esModule",{value:!0}),e);var E={};H(E,{default:()=>D});module.exports=R(E);var s=require("react/jsx-runtime"),a=m(require("react")),l=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),x=m(require("../SwiperBox/index.js")),g=require("../../components/index.js"),c=require("../../components/index.js"),k=require("../../components/container.js"),v=m(require("../Title/index.js")),b=require("react-responsive"),y=require("../../hooks/useExposure.js"),N=require("../AiuiProvider/index.js"),P=require("../../shared/trackUrlRef.js");const h="image",f="graphic",V=({data:e,configuration:t})=>{const o=(0,b.useMediaQuery)({query:"(max-width: 768px)"});return(0,s.jsx)("div",{className:(0,l.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"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346] tablet:aspect-h-[360]";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"lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384] laptop:aspect-w-[288] laptop:aspect-h-[360] tablet:aspect-w-[296] tablet:aspect-h-[360]"}})(),{"h-[360px]":o},"flex-1 shrink-0 md:basis-[296px]"),children:(0,s.jsx)("div",{className:(0,l.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,s.jsxs)("a",{href:(0,P.trackUrlRef)(e?.link,`${h}_${f}`),className:"relative block size-full cursor-pointer",children:[(0,s.jsx)(c.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,s.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,s.jsx)(c.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,s.jsx)(g.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},u=a.default.forwardRef(({data:e,className:t,...o},i)=>{const p=e?.items?.length>2,n=(0,a.useRef)(null);(0,a.useImperativeHandle)(i,()=>n.current);const{trackingData:C}=(0,N.useAiuiContext)(),{profileActivated:T}=C;return(0,y.useExposure)(n,{componentType:h,componentName:f,memberActiveStatus:T?"active":"not active",componentTitle:e?.title}),(0,s.jsx)("div",{className:t,ref:n,children:(0,s.jsx)("div",{className:"graphic-box",children:(0,s.jsxs)(k.Container,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&(0,s.jsx)(v.default,{data:{title:e?.title}}),(0,s.jsx)(x.default,{id:"Graphic",className:(0,l.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:p?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:p?3:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:p?4:2}}})]})})})});u.displayName="Graphic";var D=(0,w.withStyles)(u);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/Graphic/index.js.map CHANGED
@@ -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, { 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 { useAiuiContext } from '../AiuiProvider/index.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 link?: 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-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer\"\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 />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] 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=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold 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=\"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 )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\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: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
5
- "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8DQ,IAAAI,EAAA,6BA7DRC,EAAmD,oBACnDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAA0B,yCAC1BC,EAAkB,gCAClBC,EAA8B,4BAE9BC,EAA4B,sCAC5BC,EAA+B,oCAC/BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAe9D,SACE,OAAC,OACC,aAAW,OAfM,IAAM,CACzB,OAAQD,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,yGACT,IAAK,GACH,MAAO,uGACT,IAAK,GACH,MAAO,uGACT,QACE,MAAO,sGACX,CACF,GAI+B,EAAG,mCAAoC,CAChE,YAAaC,EACZ,gDAAkDD,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KACC,QAAM,eAAYD,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,UAAU,0CAEV,oBAAC,WACC,UAAU,SACV,aAAa,yEACb,OAAQE,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,CAEJ,EAEMG,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAJ,EAAM,UAAAK,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUR,GAAM,OAAyB,OAAS,EAClDS,KAAW,UAAuB,IAAI,KAC5C,uBAAoBF,EAAK,IAAME,EAAS,OAAyB,EACjE,KAAM,CAAE,aAAAC,CAAa,KAAI,kBAAe,EAClC,CAAE,iBAAAC,CAAiB,EAAID,EAE7B,wBAAYD,EAAU,CACpB,cAAAZ,EACA,cAAAC,EACA,mBAAoBa,EAAmB,SAAW,aAClD,eAAgBX,GAAM,KACxB,CAAC,KAGC,OAAC,OAAI,UAAWK,EAAW,IAAKI,EAC9B,mBAAC,OAAI,UAAU,cACb,oBAAC,aAAW,GAAIT,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACpD,UAAAA,GAAM,UAAS,OAAC,EAAAY,QAAA,CAAM,KAAM,CAAE,MAAOZ,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAa,QAAA,CACC,GAAG,UACH,aAAW,MAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMb,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,CAC9B,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeS,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,EACF,EACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOpB,KAAQ,cAAWoB,CAAO",
4
+ "sourcesContent": ["'use client'\nimport React, { 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 { useAiuiContext } from '../AiuiProvider/index.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 link?: 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 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346] tablet:aspect-h-[360]'\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 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384] laptop:aspect-w-[288] laptop:aspect-h-[360] tablet:aspect-w-[296] tablet:aspect-h-[360]'\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?.link, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer\"\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 />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] 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=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold 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=\"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 isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\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: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
5
+ "mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsEU,IAAAI,EAAA,6BArEVC,EAAmD,oBACnDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAA0B,yCAC1BC,EAAkB,gCAClBC,EAA8B,4BAE9BC,EAA4B,sCAC5BC,EAA+B,oCAC/BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAe9D,SACE,OAAC,OACC,aAAW,OAfM,IAAM,CACzB,OAAQD,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,6LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,GAKmB,EACb,CACE,YAAaC,CACf,EACA,kCACF,EAEA,mBAAC,OACC,aAAW,MAAG,mBAAoB,CAC/B,gDAAkDD,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KACC,QAAM,eAAYD,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,UAAU,0CAEV,oBAAC,WACC,UAAU,SACV,aAAa,yEACb,OAAQE,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EACF,CAEJ,EAEMG,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAJ,EAAM,UAAAK,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUR,GAAM,OAAyB,OAAS,EAClDS,KAAW,UAAuB,IAAI,KAC5C,uBAAoBF,EAAK,IAAME,EAAS,OAAyB,EACjE,KAAM,CAAE,aAAAC,CAAa,KAAI,kBAAe,EAClC,CAAE,iBAAAC,CAAiB,EAAID,EAE7B,wBAAYD,EAAU,CACpB,cAAAZ,EACA,cAAAC,EACA,mBAAoBa,EAAmB,SAAW,aAClD,eAAgBX,GAAM,KACxB,CAAC,KAGC,OAAC,OAAI,UAAWK,EAAW,IAAKI,EAC9B,mBAAC,OAAI,UAAU,cACb,oBAAC,aAAW,GAAIT,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACpD,UAAAA,GAAM,UAAS,OAAC,EAAAY,QAAA,CAAM,KAAM,CAAE,MAAOZ,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAa,QAAA,CACC,GAAG,UACH,aAAW,MAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMb,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,CAC9B,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeS,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,EACF,EACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOpB,KAAQ,cAAWoB,CAAO",
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_AiuiProvider", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "React", "className", "props", "ref", "isShow", "innerRef", "trackingData", "profileActivated", "Title", "SwiperBox"]
7
7
  }
package/dist/cjs/biz-components/MediaPlayerMulti/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var B=Object.create;var r=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var D=(t,l)=>{for(var o in l)r(t,o,{get:l[o],enumerable:!0})},f=(t,l,o,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of z(l))!j.call(t,i)&&i!==o&&r(t,i,{get:()=>l[i],enumerable:!(s=V(l,i))||s.enumerable});return t};var c=(t,l,o)=>(o=t!=null?B(L(t)):{},f(l||!t||!t.__esModule?r(o,"default",{value:t,enumerable:!0}):o,t)),S=t=>f(r({},"__esModule",{value:!0}),t);var H={};D(H,{default:()=>q});module.exports=S(H);var e=require("react/jsx-runtime"),a=require("react"),u=require("../../helpers/utils.js"),v=require("../../shared/Styles.js"),h=require("../../components/index.js"),n=require("../../components/dialog.js"),w=c(require("../Title/index.js")),x=c(require("../SwiperBox/index.js")),g=require("../../components/container.js"),b=require("@payloadcms/richtext-lexical/html");const _=({data:t,configuration:l})=>(0,e.jsxs)("div",{className:(0,u.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[(0,e.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,e.jsx)(h.Picture,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t?.video?.url&&(0,e.jsx)("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(t?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,e.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&(0,e.jsx)("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),(0,e.jsx)("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]}),T=(0,a.forwardRef)(({data:{items:t=[],shape:l="square",title:o,containerProps:s},className:i="",key:y,onVideoPlayBtnClick:M},k)=>{const[m,p]=(0,a.useState)(!1),[N,d]=(0,a.useState)(""),P=typeof o=="string"?o:o&&(0,b.convertLexicalToHTML)({data:o});return(0,e.jsxs)("div",{className:i,children:[(0,e.jsx)("div",{className:"mediaplayermulti-box",children:(0,e.jsx)(g.Container,{...s||{},className:"overflow-hidden",children:(0,e.jsxs)("div",{className:i,ref:k,children:[o&&(0,e.jsx)(w.default,{data:{title:P||""}}),(0,e.jsx)(x.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+y,data:{list:t,configuration:{shape:l,onVideoPlayBtnClick:M,setVisible:p,setVideoUrl:d}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:1.55},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),(0,e.jsx)(n.Dialog,{open:m,onOpenChange:C=>{p(C),d("")},children:(0,e.jsxs)(n.DialogContent,{className:"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[m?(0,e.jsx)("video",{className:"size-full object-cover",src:N,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,(0,e.jsx)("div",{onClick:()=>{p(!1),d("")},className:"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:(0,e.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var q=(0,v.withStyles)(T);
1
+ "use strict";"use client";var B=Object.create;var r=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var L=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var D=(t,l)=>{for(var o in l)r(t,o,{get:l[o],enumerable:!0})},f=(t,l,o,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of z(l))!j.call(t,i)&&i!==o&&r(t,i,{get:()=>l[i],enumerable:!(s=V(l,i))||s.enumerable});return t};var c=(t,l,o)=>(o=t!=null?B(L(t)):{},f(l||!t||!t.__esModule?r(o,"default",{value:t,enumerable:!0}):o,t)),S=t=>f(r({},"__esModule",{value:!0}),t);var H={};D(H,{default:()=>q});module.exports=S(H);var e=require("react/jsx-runtime"),a=require("react"),u=require("../../helpers/utils.js"),v=require("../../shared/Styles.js"),h=require("../../components/index.js"),n=require("../../components/dialog.js"),w=c(require("../Title/index.js")),x=c(require("../SwiperBox/index.js")),g=require("../../components/container.js"),b=require("@payloadcms/richtext-lexical/html");const _=({data:t,configuration:l})=>(0,e.jsxs)("div",{className:(0,u.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[(0,e.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,e.jsx)(h.Picture,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,e.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t?.video?.url&&(0,e.jsx)("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(t?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,e.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[(0,e.jsxs)("div",{className:"flex flex-col",children:[(0,e.jsx)("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&(0,e.jsx)("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),(0,e.jsx)("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]}),T=(0,a.forwardRef)(({data:{items:t=[],shape:l="square",title:o,containerProps:s},className:i="",key:y,onVideoPlayBtnClick:M},k)=>{const[m,p]=(0,a.useState)(!1),[N,d]=(0,a.useState)(""),P=typeof o=="string"?o:o&&(0,b.convertLexicalToHTML)({data:o});return(0,e.jsxs)("div",{className:i,children:[(0,e.jsx)("div",{className:"mediaplayermulti-box",children:(0,e.jsx)(g.Container,{...s||{},className:"overflow-hidden",children:(0,e.jsxs)("div",{className:i,ref:k,children:[o&&(0,e.jsx)(w.default,{data:{title:P||""}}),(0,e.jsx)(x.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+y,data:{list:t,configuration:{shape:l,onVideoPlayBtnClick:M,setVisible:p,setVideoUrl:d}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),(0,e.jsx)(n.Dialog,{open:m,onOpenChange:C=>{p(C),d("")},children:(0,e.jsxs)(n.DialogContent,{className:"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[m?(0,e.jsx)("video",{className:"size-full object-cover",src:N,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,(0,e.jsx)("div",{onClick:()=>{p(!1),d("")},className:"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:(0,e.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var q=(0,v.withStyles)(T);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n Slide={MediaPlayerItem}\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: 1.55,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n setVideoUrl('')\n }}\n >\n <DialogContent className=\"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n setVideoUrl('')\n }}\n className=\"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n Slide={MediaPlayerItem}\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: 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n setVideoUrl('')\n }}\n >\n <DialogContent className=\"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n setVideoUrl('')\n }}\n className=\"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
5
+ "mappings": "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",
6
6
  "names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_dialog", "import_Title", "import_SwiperBox", "import_container", "import_html", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "Title", "SwiperBox", "flag"]
7
7
  }
package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var H=Object.create;var x=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var O=(s,o)=>{for(var i in o)x(s,i,{get:o[i],enumerable:!0})},I=(s,o,i,r)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of U(o))!q.call(s,l)&&l!==i&&x(s,l,{get:()=>o[l],enumerable:!(r=z(o,l))||r.enumerable});return s};var h=(s,o,i)=>(i=s!=null?H(Q(s)):{},I(o||!s||!s.__esModule?x(i,"default",{value:s,enumerable:!0}):i,s)),F=s=>I(x({},"__esModule",{value:!0}),s);var W={};O(W,{default:()=>K});module.exports=F(W);var t=require("react/jsx-runtime"),n=h(require("react")),L=require("react-responsive"),$=require("../../shared/Styles.js"),N=h(require("../../components/picture.js")),P=h(require("../../components/button.js")),S=require("../../components/heading.js"),C=require("../../components/text.js"),b=require("../../components/gird.js"),R=h(require("../Title/index.js")),A=require("../../helpers/utils.js"),M=h(require("../SwiperBox/index.js")),c=require("../../components/tabs.js"),D=require("../../hooks/useExposure.js"),V=require("../AiuiProvider/index.js"),G=require("../../shared/trackUrlRef.js"),E=require("../../shared/track.js");const y="image",B="p1_banner",w=({data:s,configuration:o,jIndex:i})=>{const[r,l]=(0,n.useState)(!1),d=(0,L.useMediaQuery)({query:"(max-width: 768px)"}),{trackingData:p}=(0,V.useAiuiContext)(),{profileActivated:T}=p,k=(0,n.useRef)(null),g=()=>{switch(o?.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"tablet:aspect-[704/480] laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]";default:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]"}};(0,D.useExposure)(k,{componentType:y,componentName:B,position:i,componentTitle:s.title,componentDescription:s.description,memberActiveStatus:T?"active":"not active",navigation:o?.activeTab}),(0,n.useEffect)(()=>{l(d)},[d]);const{theme:m="light",title:v,description:f,imageUrl:e,primaryButton:a,secondaryButton:u,imageMobileUrl:j}=s,_="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsxs)("div",{className:(0,A.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?g():"tablet:aspect-[704/480] laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":m==="dark","h-[480px]":r&&!o?.isTab,"h-[400px]":r&&o?.isTab},"text-info-primary"),ref:k,children:[(0,t.jsx)(N.default,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),(0,t.jsx)(N.default,{source:j?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(S.Heading,{size:3,className:"item-title",html:v}),(0,t.jsx)(C.Text,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:f})]}),(0,t.jsxs)("div",{className:"flex gap-[16px]",children:[u&&u.text&&(0,t.jsx)("a",{href:(0,G.trackUrlRef)(u.link,`${y}_${B}`),children:(0,t.jsx)(P.default,{className:_,variant:"secondary",children:u.text})}),a&&a.text&&(0,t.jsx)("a",{href:(0,G.trackUrlRef)(a.link,`${y}_${B}`),children:(0,t.jsx)(P.default,{className:_,variant:"primary",children:a.text})})]})]})]})},J=n.default.forwardRef((s,o)=>{const{shape:i,sectionTitle:r,groupByTab:l=!1,items:d=[],carousel:p}=s.data,{trackingData:T}=(0,V.useAiuiContext)(),{profileActivated:k}=T,g=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(e=>e.tabName).filter(Boolean).filter((e,a,u)=>u.indexOf(e)===a),v=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},f=m.map(e=>({tabName:e,items:d.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[r&&(0,t.jsx)(R.default,{data:{title:r},className:"section-title"}),l?(0,t.jsxs)(c.Tabs,{shape:i,align:"left",defaultValue:m[0],children:[(0,t.jsx)(c.TabsList,{children:m.map((e,a)=>(0,t.jsx)(c.TabsTrigger,{value:e,onClick:()=>{(0,E.gaTrack)({event:"ga4Event",event_name:"component_click",member_active_status:k?"active":"not active",event_parameters:{page_group:"Home Page",component_type:y,component_name:B,component_title:r,component_position:1,navigation:e}})},children:e},a))}),m.map((e,a)=>(0,t.jsx)(c.TabsContent,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:f?.[e]||[],configuration:{shape:i,isTab:l,activeTab:e,num:f?.[e]?.length||0}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:v(f?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:v(f?.[e]?.length||0)}}}),p&&p?.items.length>0?(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:p?.items||[],configuration:{shape:i,isTab:l}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},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,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(b.Grid,{className:"w-full",children:[d.map((e,a)=>(0,t.jsx)(b.GridItem,{span:g(e.width??"full"),className:"laptop:block hidden",children:(0,t.jsx)(w,{data:e,configuration:{shape:i},jIndex:a})},`${e?.title||""}${a}`)),d.map((e,a)=>(0,t.jsx)(b.GridItem,{span:g("full"),className:"laptop:hidden block",children:(0,t.jsx)(w,{data:e,configuration:{shape:i},jIndex:a})},`${e?.title||""}${a}`))]}),p&&p?.items.length>0?(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:p?.items||[],configuration:{shape:i}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var K=(0,$.withStyles)(J);
1
+ "use strict";var H=Object.create;var x=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var O=(s,o)=>{for(var i in o)x(s,i,{get:o[i],enumerable:!0})},I=(s,o,i,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of U(o))!q.call(s,l)&&l!==i&&x(s,l,{get:()=>o[l],enumerable:!(p=z(o,l))||p.enumerable});return s};var h=(s,o,i)=>(i=s!=null?H(Q(s)):{},I(o||!s||!s.__esModule?x(i,"default",{value:s,enumerable:!0}):i,s)),F=s=>I(x({},"__esModule",{value:!0}),s);var W={};O(W,{default:()=>K});module.exports=F(W);var t=require("react/jsx-runtime"),c=h(require("react")),L=require("react-responsive"),$=require("../../shared/Styles.js"),N=h(require("../../components/picture.js")),P=h(require("../../components/button.js")),S=require("../../components/heading.js"),C=require("../../components/text.js"),k=require("../../components/gird.js"),R=h(require("../Title/index.js")),A=require("../../helpers/utils.js"),M=h(require("../SwiperBox/index.js")),n=require("../../components/tabs.js"),D=require("../../hooks/useExposure.js"),V=require("../AiuiProvider/index.js"),G=require("../../shared/trackUrlRef.js"),E=require("../../shared/track.js");const y="image",B="p1_banner",w=({data:s,configuration:o,jIndex:i})=>{const[p,l]=(0,c.useState)(!1),d=(0,L.useMediaQuery)({query:"(max-width: 768px)"}),{trackingData:r}=(0,V.useAiuiContext)(),{profileActivated:T}=r,b=(0,c.useRef)(null),g=()=>{switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";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,D.useExposure)(b,{componentType:y,componentName:B,position:i,componentTitle:s.title,componentDescription:s.description,memberActiveStatus:T?"active":"not active",navigation:o?.activeTab}),(0,c.useEffect)(()=>{l(d)},[d]);const{theme:m="light",title:v,description:f,imageUrl:e,primaryButton:a,secondaryButton:u,imageMobileUrl:j}=s,_="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsx)("div",{className:(0,A.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?g():"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]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":m==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:b,children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(N.default,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),(0,t.jsx)(N.default,{source:j?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(S.Heading,{size:3,className:"item-title",html:v}),(0,t.jsx)(C.Text,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:f})]}),(0,t.jsxs)("div",{className:"flex gap-[16px]",children:[u&&u.text&&(0,t.jsx)("a",{href:(0,G.trackUrlRef)(u.link,`${y}_${B}`),children:(0,t.jsx)(P.default,{className:_,variant:"secondary",children:u.text})}),a&&a.text&&(0,t.jsx)("a",{href:(0,G.trackUrlRef)(a.link,`${y}_${B}`),children:(0,t.jsx)(P.default,{className:_,variant:"primary",children:a.text})})]})]})]})})},J=c.default.forwardRef((s,o)=>{const{shape:i,sectionTitle:p,groupByTab:l=!1,items:d=[],carousel:r}=s.data,{trackingData:T}=(0,V.useAiuiContext)(),{profileActivated:b}=T,g=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(e=>e.tabName).filter(Boolean).filter((e,a,u)=>u.indexOf(e)===a),v=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},f=m.map(e=>({tabName:e,items:d.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[p&&(0,t.jsx)(R.default,{data:{title:p},className:"section-title"}),l?(0,t.jsxs)(n.Tabs,{shape:i,align:"left",defaultValue:m[0],children:[(0,t.jsx)(n.TabsList,{children:m.map((e,a)=>(0,t.jsx)(n.TabsTrigger,{value:e,onClick:()=>{(0,E.gaTrack)({event:"ga4Event",event_name:"component_click",member_active_status:b?"active":"not active",event_parameters:{page_group:"Home Page",component_type:y,component_name:B,component_title:p,component_position:1,navigation:e}})},children:e},a))}),m.map((e,a)=>(0,t.jsx)(n.TabsContent,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:f?.[e]||[],configuration:{shape:i,isTab:l,activeTab:e,num:f?.[e]?.length||0}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:v(f?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:v(f?.[e]?.length||0)}}}),r&&r?.items.length>0?(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:i,isTab:l}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},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,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(k.Grid,{className:"w-full",children:[d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:g(e.width??"full"),className:"laptop:block hidden",children:(0,t.jsx)(w,{data:e,configuration:{shape:i},jIndex:a})},`${e?.title||""}${a}`)),d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:g("full"),className:"laptop:hidden block",children:(0,t.jsx)(w,{data:e,configuration:{shape:i},jIndex:a})},`${e?.title||""}${a}`))]}),r&&r?.items.length>0?(0,t.jsx)(M.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:i}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var K=(0,$.withStyles)(J);
2
2
  //# sourceMappingURL=MultiLayoutGraphicBlock.js.map
package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map CHANGED
@@ -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 { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'tablet:aspect-[704/480] laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]'\n default:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = 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 configuration?.isTab\n ? handleAspect()\n : 'tablet:aspect-[704/480] laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]',\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 <Picture\n source={imageUrl?.url}\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 <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text size={3} className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\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 )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\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 member_active_status: profileActivated ? 'active' : 'not active',\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 },\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 <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} />\n </GridItem>\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} />\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\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
- "mappings": "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",
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 { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[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 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 useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = 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 configuration?.isTab\n ? handleAspect()\n : '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 {\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 <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\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 <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text\n size={3}\n className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\"\n html={description}\n />\n </div>\n <div className=\"flex gap-[16px]\">\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 const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\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 member_active_status: profileActivated ? 'active' : 'not active',\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 },\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 <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} />\n </GridItem>\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} />\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\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
+ "mappings": "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",
6
6
  "names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_tabs", "import_useExposure", "import_AiuiProvider", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "trackingData", "profileActivated", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "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
  }
package/dist/esm/biz-components/Evaluate/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as I,jsx as e,jsxs as s}from"react/jsx-runtime";import w,{useImperativeHandle as b,useRef as g}from"react";import h from"../Title/index.js";import{cn as a}from"../../helpers/utils.js";import k from"../../components/picture.js";import N from"../SwiperBox/index.js";import{useMediaQuery as y}from"react-responsive";import{withStyles as C}from"../../shared/Styles.js";import{Avatar as L,AvatarImage as E,AvatarFallback as P}from"../../components/avatar.js";import{Container as A}from"../../components/container.js";import{useAiuiContext as M}from"../AiuiProvider/index.js";import{useExposure as T}from"../../hooks/useExposure.js";import{trackUrlRef as B}from"../../shared/trackUrlRef.js";const d="copy",c="product_review",z=({data:t,configuration:r})=>{const o=y({query:"(max-width: 768px)"}),p=i=>i?Array.from(new Array(Number(i)))||[]:[];return s("div",{className:a("bg-container-secondary-1 tablet:hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] aspect-[296/360]",{"h-[360px]":o}),children:[s("div",{className:a("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[s("div",{className:"flex-1",children:[e("h4",{className:"laptop:text-lg text-sm font-bold",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:p(t?.rating)?.map?.((i,l)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},l))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e(L,{className:"size-full",isAdaptation:!t?.avatar?.url,children:t?.avatar?.url?s(I,{children:[e(E,{src:t?.avatar?.url}),e(P,{children:t?.title})]}):t?.title})})]}),e("div",{className:"flex-1",children:e("p",{className:a("desktop:max-h-[151px] tablet:max-h-[140px]","desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold"),children:t?.description||""})}),e("a",{href:B(t?.link,`${d}_${c}`),onClick:()=>{r?.event?.primaryButton(t,r?.index)},children:s("div",{className:a("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(k,{className:"w-full object-cover",source:t?.img?.url})}),e("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:t?.subTitle||""})]})})]})},F=w.forwardRef(({className:t="",data:r,key:o,...p},i)=>{const{products:l,title:n,theme:v,...f}=r,m=g(null);b(i,()=>m.current);const{trackingData:u}=M(),{profileActivated:x}=u;return T(m,{componentType:d,componentName:c,memberActiveStatus:x?"active":"not active",componentTitle:n}),e("div",{className:t,ref:m,children:e("div",{className:"evaluate-box",children:e(A,{...r?.containerProps||{},className:"overflow-hidden",children:s("div",{ref:i,className:a("w-full",t,{"aiui-dark":v==="dark"}),children:[n&&e(h,{data:{title:n}}),e(N,{className:"!overflow-visible",id:"Evaluate"+o,data:{list:l,configuration:{...f}},Slide:z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var G=C(F);export{G as default};
1
+ "use client";import{Fragment as I,jsx as e,jsxs as s}from"react/jsx-runtime";import x,{useImperativeHandle as h,useRef as b}from"react";import g from"../Title/index.js";import{cn as a}from"../../helpers/utils.js";import k from"../../components/picture.js";import N from"../SwiperBox/index.js";import{useMediaQuery as y}from"react-responsive";import{withStyles as C}from"../../shared/Styles.js";import{Avatar as L,AvatarImage as E,AvatarFallback as P}from"../../components/avatar.js";import{Container as A}from"../../components/container.js";import{useAiuiContext as M}from"../AiuiProvider/index.js";import{useExposure as T}from"../../hooks/useExposure.js";import{trackUrlRef as B}from"../../shared/trackUrlRef.js";const d="copy",c="product_review",z=({data:t,configuration:r})=>{const o=y({query:"(max-width: 768px)"}),m=i=>i?Array.from(new Array(Number(i)))||[]:[];return e("div",{className:a("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":o}),children:s("div",{className:"absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[s("div",{className:a("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[s("div",{className:"flex-1",children:[e("h4",{className:"laptop:text-lg text-sm font-bold",children:t?.title}),e("div",{className:"mt-1 flex items-center",children:m(t?.rating)?.map?.((i,l)=>e("div",{className:"mr-1",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:e("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},l))})]}),e("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e(L,{className:"size-full",isAdaptation:!t?.avatar?.url,children:t?.avatar?.url?s(I,{children:[e(E,{src:t?.avatar?.url}),e(P,{children:t?.title})]}):t?.title})})]}),e("div",{className:"flex-1",children:e("p",{className:a("desktop:max-h-[151px] tablet:max-h-[140px]","desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold"),children:t?.description||""})}),e("a",{href:B(t?.link,`${d}_${c}`),onClick:()=>{r?.event?.primaryButton(t,r?.index)},children:s("div",{className:a("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[e("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:e(k,{className:"w-full object-cover",source:t?.img?.url})}),e("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:t?.subTitle||""})]})})]})})},F=x.forwardRef(({className:t="",data:r,key:o,...m},i)=>{const{products:l,title:n,theme:v,...f}=r,p=b(null);h(i,()=>p.current);const{trackingData:u}=M(),{profileActivated:w}=u;return T(p,{componentType:d,componentName:c,memberActiveStatus:w?"active":"not active",componentTitle:n}),e("div",{className:t,ref:p,children:e("div",{className:"evaluate-box",children:e(A,{...r?.containerProps||{},className:"overflow-hidden",children:s("div",{ref:i,className:a("w-full",t,{"aiui-dark":v==="dark"}),children:[n&&e(g,{data:{title:n}}),e(N,{className:"!overflow-visible",id:"Evaluate"+o,data:{list:l,configuration:{...f}},Slide:z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var G=C(F);export{G as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Evaluate/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] aspect-[296/360]',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n {data?.avatar?.url ? (\n <>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </>\n ) : (\n data?.title\n )}\n </Avatar>\n </div>\n </div>\n <div className=\"flex-1\">\n <p\n className={cn(\n 'desktop:max-h-[151px] tablet:max-h-[140px]',\n 'desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold'\n )}\n >\n {data?.description || ''}\n </p>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index)\n }}\n >\n <div\n className={cn(\n 'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n </div>\n <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n </div>\n </a>\n </div>\n )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n const { products, title, theme, ...ohter } = data\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"evaluate-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter } }}\n Slide={EvaluateItem}\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 </div>\n </Container>\n </div>\n </div>\n )\n})\n\nexport default withStyles(Evaluate)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n {data?.avatar?.url ? (\n <>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </>\n ) : (\n data?.title\n )}\n </Avatar>\n </div>\n </div>\n <div className=\"flex-1\">\n <p\n className={cn(\n 'desktop:max-h-[151px] tablet:max-h-[140px]',\n 'desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold'\n )}\n >\n {data?.description || ''}\n </p>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index)\n }}\n >\n <div\n className={cn(\n 'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n </div>\n <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n const { products, title, theme, ...ohter } = data\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"evaluate-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter } }}\n Slide={EvaluateItem}\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,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n})\n\nexport default withStyles(Evaluate)\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Title", "cn", "Picture", "SwiperBox", "useMediaQuery", "withStyles", "Avatar", "AvatarImage", "AvatarFallback", "Container", "useAiuiContext", "useExposure", "trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "isMobile", "handleRating", "num", "_", "index", "Evaluate", "className", "key", "rest", "ref", "products", "title", "theme", "ohter", "innerRef", "trackingData", "profileActivated", "Evaluate_default"]
7
7
  }
package/dist/esm/biz-components/Graphic/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import u,{useImperativeHandle as h,useRef as x}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import v from"../SwiperBox/index.js";import{Heading as w}from"../../components/index.js";import{Picture as k,Text as b}from"../../components/index.js";import{Container as y}from"../../components/container.js";import N from"../Title/index.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as C}from"../../hooks/useExposure.js";import{useAiuiContext as T}from"../AiuiProvider/index.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const n="image",c="graphic",G=({data:e,configuration:s})=>{const p=P({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":p,"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:r("a",{href:M(e?.link,`${n}_${c}`),className:"relative block size-full cursor-pointer",children:[t(k,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),r("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(b,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(w,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},m=u.forwardRef(({data:e,className:s,...p},l)=>{const o=e?.items?.length>2,i=x(null);h(l,()=>i.current);const{trackingData:d}=T(),{profileActivated:f}=d;return C(i,{componentType:n,componentName:c,memberActiveStatus:f?"active":"not active",componentTitle:e?.title}),t("div",{className:s,ref:i,children:t("div",{className:"graphic-box",children:r(y,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(N,{data:{title:e?.title}}),t(v,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})})})});m.displayName="Graphic";var z=g(m);export{z as default};
1
+ "use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import f,{useImperativeHandle as u,useRef as w}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as x}from"../../shared/Styles.js";import g from"../SwiperBox/index.js";import{Heading as k}from"../../components/index.js";import{Picture as v,Text as b}from"../../components/index.js";import{Container as y}from"../../components/container.js";import N from"../Title/index.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as C}from"../../hooks/useExposure.js";import{useAiuiContext as T}from"../AiuiProvider/index.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const c="image",n="graphic",G=({data:e,configuration:s})=>{const r=P({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.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"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346] tablet:aspect-h-[360]";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"lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384] laptop:aspect-w-[288] laptop:aspect-h-[360] tablet:aspect-w-[296] tablet:aspect-h-[360]"}})(),{"h-[360px]":r},"flex-1 shrink-0 md:basis-[296px]"),children:t("div",{className:a("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:i("a",{href:M(e?.link,`${c}_${n}`),className:"relative block size-full cursor-pointer",children:[t(v,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),i("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(b,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(k,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})})},m=f.forwardRef(({data:e,className:s,...r},l)=>{const o=e?.items?.length>2,p=w(null);u(l,()=>p.current);const{trackingData:d}=T(),{profileActivated:h}=d;return C(p,{componentType:c,componentName:n,memberActiveStatus:h?"active":"not active",componentTitle:e?.title}),t("div",{className:s,ref:p,children:t("div",{className:"graphic-box",children:i(y,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(N,{data:{title:e?.title}}),t(g,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})})})});m.displayName="Graphic";var z=x(m);export{z as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Graphic/index.js.map CHANGED
@@ -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, { 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 { useAiuiContext } from '../AiuiProvider/index.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 link?: 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-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer\"\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 />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] 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=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold 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=\"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 )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\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: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { 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 { useAiuiContext } from '../AiuiProvider/index.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 link?: 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 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[384] laptop:aspect-w-[440] laptop:aspect-h-[360] tablet:aspect-w-[346] tablet:aspect-h-[360]'\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 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384] laptop:aspect-w-[288] laptop:aspect-h-[360] tablet:aspect-w-[296] tablet:aspect-h-[360]'\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?.link, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer\"\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 />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] 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=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold 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=\"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 isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\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: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useMediaQuery", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "className", "props", "ref", "isShow", "innerRef", "trackingData", "profileActivated", "Graphic_default"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerMulti/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as p,forwardRef as w}from"react";import{cn as x}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import{Picture as b}from"../../components/index.js";import{Dialog as y,DialogContent as M}from"../../components/dialog.js";import k from"../Title/index.js";import N from"../SwiperBox/index.js";import{Container as P}from"../../components/container.js";import{convertLexicalToHTML as C}from"@payloadcms/richtext-lexical/html";const B=({data:t,configuration:l})=>o("div",{className:x("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[e(b,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t?.video?.url&&e("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(t?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&e("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]}),V=w(({data:{items:t=[],shape:l="square",title:i,containerProps:d},className:r="",key:m,onVideoPlayBtnClick:f},c)=>{const[n,a]=p(!1),[u,s]=p(""),v=typeof i=="string"?i:i&&C({data:i});return o("div",{className:r,children:[e("div",{className:"mediaplayermulti-box",children:e(P,{...d||{},className:"overflow-hidden",children:o("div",{className:r,ref:c,children:[i&&e(k,{data:{title:v||""}}),e(N,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+m,data:{list:t,configuration:{shape:l,onVideoPlayBtnClick:f,setVisible:a,setVideoUrl:s}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:1.55},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),e(y,{open:n,onOpenChange:h=>{a(h),s("")},children:o(M,{className:"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[n?e("video",{className:"size-full object-cover",src:u,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,e("div",{onClick:()=>{a(!1),s("")},className:"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:e("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var U=g(V);export{U as default};
1
+ "use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as p,forwardRef as w}from"react";import{cn as x}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import{Picture as b}from"../../components/index.js";import{Dialog as y,DialogContent as M}from"../../components/dialog.js";import k from"../Title/index.js";import N from"../SwiperBox/index.js";import{Container as P}from"../../components/container.js";import{convertLexicalToHTML as C}from"@payloadcms/richtext-lexical/html";const B=({data:t,configuration:l})=>o("div",{className:x("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[e(b,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t?.video?.url&&e("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(t?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[e("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&e("p",{className:"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]}),V=w(({data:{items:t=[],shape:l="square",title:i,containerProps:d},className:r="",key:m,onVideoPlayBtnClick:f},c)=>{const[n,a]=p(!1),[u,s]=p(""),v=typeof i=="string"?i:i&&C({data:i});return o("div",{className:r,children:[e("div",{className:"mediaplayermulti-box",children:e(P,{...d||{},className:"overflow-hidden",children:o("div",{className:r,ref:c,children:[i&&e(k,{data:{title:v||""}}),e(N,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+m,data:{list:t,configuration:{shape:l,onVideoPlayBtnClick:f,setVisible:a,setVideoUrl:s}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),e(y,{open:n,onOpenChange:h=>{a(h),s("")},children:o(M,{className:"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[n?e("video",{className:"size-full object-cover",src:u,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,e("div",{onClick:()=>{a(!1),s("")},className:"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:e("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var U=g(V);export{U as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/MediaPlayerMulti/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n Slide={MediaPlayerItem}\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: 1.55,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n setVideoUrl('')\n }}\n >\n <DialogContent className=\"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n setVideoUrl('')\n }}\n className=\"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, forwardRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n Slide={MediaPlayerItem}\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: 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n setVideoUrl('')\n }}\n >\n <DialogContent className=\"w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n setVideoUrl('')\n }}\n className=\"tablet:size-8 tablet:-right-10 tablet:-top-10 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "useState", "forwardRef", "cn", "withStyles", "Picture", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "convertLexicalToHTML", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "flag", "MediaPlayerMulti_default"]
7
7
  }
package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js CHANGED
@@ -1,2 +1,2 @@
1
- import{Fragment as V,jsx as a,jsxs as s}from"react/jsx-runtime";import _,{useState as I,useEffect as L,useRef as $}from"react";import{useMediaQuery as S}from"react-responsive";import{withStyles as C}from"../../shared/Styles.js";import B from"../../components/picture.js";import M from"../../components/button.js";import{Heading as R}from"../../components/heading.js";import{Text as A}from"../../components/text.js";import{Grid as D,GridItem as T}from"../../components/gird.js";import E from"../Title/index.js";import{cn as j}from"../../helpers/utils.js";import x from"../SwiperBox/index.js";import{Tabs as H,TabsList as z,TabsTrigger as U,TabsContent as Q}from"../../components/tabs.js";import{useExposure as q}from"../../hooks/useExposure.js";import{useAiuiContext as N}from"../AiuiProvider/index.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";import{gaTrack as O}from"../../shared/track.js";const k="image",g="p1_banner",u=({data:m,configuration:o,jIndex:i})=>{const[p,f]=I(!1),r=S({query:"(max-width: 768px)"}),{trackingData:l}=N(),{profileActivated:v}=l,h=$(null),w=()=>{switch(o?.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"tablet:aspect-[704/480] laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]";default:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]"}};q(h,{componentType:k,componentName:g,position:i,componentTitle:m.title,componentDescription:m.description,memberActiveStatus:v?"active":"not active",navigation:o?.activeTab}),L(()=>{f(r)},[r]);const{theme:n="light",title:b,description:c,imageUrl:e,primaryButton:t,secondaryButton:d,imageMobileUrl:G}=m,y="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return s("div",{className:j("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?w():"tablet:aspect-[704/480] laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":n==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:h,children:[a(B,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),a(B,{source:G?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),s("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[s("div",{children:[a(R,{size:3,className:"item-title",html:b}),a(A,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:c})]}),s("div",{className:"flex gap-[16px]",children:[d&&d.text&&a("a",{href:P(d.link,`${k}_${g}`),children:a(M,{className:y,variant:"secondary",children:d.text})}),t&&t.text&&a("a",{href:P(t.link,`${k}_${g}`),children:a(M,{className:y,variant:"primary",children:t.text})})]})]})]})},F=_.forwardRef((m,o)=>{const{shape:i,sectionTitle:p,groupByTab:f=!1,items:r=[],carousel:l}=m.data,{trackingData:v}=N(),{profileActivated:h}=v,w=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=r.map(e=>e.tabName).filter(Boolean).filter((e,t,d)=>d.indexOf(e)===t),b=(e,t)=>{switch(e){case 1:return 1;case 2:return 2;default:return t?2.3:3}},c=n.map(e=>({tabName:e,items:r.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return s("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[p&&a(E,{data:{title:p},className:"section-title"}),f?s(H,{shape:i,align:"left",defaultValue:n[0],children:[a(z,{children:n.map((e,t)=>a(U,{value:e,onClick:()=>{O({event:"ga4Event",event_name:"component_click",member_active_status:h?"active":"not active",event_parameters:{page_group:"Home Page",component_type:k,component_name:g,component_title:p,component_position:1,navigation:e}})},children:e},t))}),n.map((e,t)=>a(Q,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:s(V,{children:[a(x,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:c?.[e]||[],configuration:{shape:i,isTab:f,activeTab:e,num:c?.[e]?.length||0}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:b(c?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:b(c?.[e]?.length||0)}}}),l&&l?.items.length>0?a(x,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:l?.items||[],configuration:{shape:i,isTab:f}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},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(V,{children:[s(D,{className:"w-full",children:[r.map((e,t)=>a(T,{span:w(e.width??"full"),className:"laptop:block hidden",children:a(u,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`)),r.map((e,t)=>a(T,{span:w("full"),className:"laptop:hidden block",children:a(u,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`))]}),l&&l?.items.length>0?a(x,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:l?.items||[],configuration:{shape:i}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var ce=C(F);export{ce as default};
1
+ import{Fragment as V,jsx as a,jsxs as s}from"react/jsx-runtime";import _,{useState as I,useEffect as L,useRef as $}from"react";import{useMediaQuery as S}from"react-responsive";import{withStyles as C}from"../../shared/Styles.js";import B from"../../components/picture.js";import M from"../../components/button.js";import{Heading as R}from"../../components/heading.js";import{Text as A}from"../../components/text.js";import{Grid as D,GridItem as T}from"../../components/gird.js";import E from"../Title/index.js";import{cn as j}from"../../helpers/utils.js";import x from"../SwiperBox/index.js";import{Tabs as H,TabsList as z,TabsTrigger as U,TabsContent as Q}from"../../components/tabs.js";import{useExposure as q}from"../../hooks/useExposure.js";import{useAiuiContext as N}from"../AiuiProvider/index.js";import{trackUrlRef as P}from"../../shared/trackUrlRef.js";import{gaTrack as O}from"../../shared/track.js";const b="image",g="p1_banner",u=({data:m,configuration:o,jIndex:i})=>{const[r,f]=I(!1),p=S({query:"(max-width: 768px)"}),{trackingData:l}=N(),{profileActivated:v}=l,h=$(null),w=()=>{switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";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]"}};q(h,{componentType:b,componentName:g,position:i,componentTitle:m.title,componentDescription:m.description,memberActiveStatus:v?"active":"not active",navigation:o?.activeTab}),L(()=>{f(p)},[p]);const{theme:c="light",title:k,description:n,imageUrl:e,primaryButton:t,secondaryButton:d,imageMobileUrl:G}=m,y="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return a("div",{className:j("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?w():"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]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":c==="dark","h-[480px]":r&&!o?.isTab,"h-[400px]":r&&o?.isTab},"text-info-primary"),ref:h,children:s("div",{className:"absolute inset-0",children:[a(B,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),a(B,{source:G?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),s("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[s("div",{children:[a(R,{size:3,className:"item-title",html:k}),a(A,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:n})]}),s("div",{className:"flex gap-[16px]",children:[d&&d.text&&a("a",{href:P(d.link,`${b}_${g}`),children:a(M,{className:y,variant:"secondary",children:d.text})}),t&&t.text&&a("a",{href:P(t.link,`${b}_${g}`),children:a(M,{className:y,variant:"primary",children:t.text})})]})]})]})})},F=_.forwardRef((m,o)=>{const{shape:i,sectionTitle:r,groupByTab:f=!1,items:p=[],carousel:l}=m.data,{trackingData:v}=N(),{profileActivated:h}=v,w=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},c=p.map(e=>e.tabName).filter(Boolean).filter((e,t,d)=>d.indexOf(e)===t),k=(e,t)=>{switch(e){case 1:return 1;case 2:return 2;default:return t?2.3:3}},n=c.map(e=>({tabName:e,items:p.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return s("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[r&&a(E,{data:{title:r},className:"section-title"}),f?s(H,{shape:i,align:"left",defaultValue:c[0],children:[a(z,{children:c.map((e,t)=>a(U,{value:e,onClick:()=>{O({event:"ga4Event",event_name:"component_click",member_active_status:h?"active":"not active",event_parameters:{page_group:"Home Page",component_type:b,component_name:g,component_title:r,component_position:1,navigation:e}})},children:e},t))}),c.map((e,t)=>a(Q,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:s(V,{children:[a(x,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:n?.[e]||[],configuration:{shape:i,isTab:f,activeTab:e,num:n?.[e]?.length||0}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:k(n?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:k(n?.[e]?.length||0)}}}),l&&l?.items.length>0?a(x,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:l?.items||[],configuration:{shape:i,isTab:f}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},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(V,{children:[s(D,{className:"w-full",children:[p.map((e,t)=>a(T,{span:w(e.width??"full"),className:"laptop:block hidden",children:a(u,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`)),p.map((e,t)=>a(T,{span:w("full"),className:"laptop:hidden block",children:a(u,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`))]}),l&&l?.items.length>0?a(x,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:l?.items||[],configuration:{shape:i}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var ne=C(F);export{ne as default};
2
2
  //# sourceMappingURL=MultiLayoutGraphicBlock.js.map
package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map CHANGED
@@ -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 { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'tablet:aspect-[704/480] laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]'\n default:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = 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 configuration?.isTab\n ? handleAspect()\n : 'tablet:aspect-[704/480] laptop:aspect-[440/384] desktop:aspect-[648/512] lg-desktop:aspect-[824/640]',\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 <Picture\n source={imageUrl?.url}\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 <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text size={3} className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\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 )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\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 member_active_status: profileActivated ? 'active' : 'not active',\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 },\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 <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} />\n </GridItem>\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} />\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\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
5
- "mappings": "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",
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 { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[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 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 useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = 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 configuration?.isTab\n ? handleAspect()\n : '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 {\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 <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\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 <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text\n size={3}\n className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\"\n html={description}\n />\n </div>\n <div className=\"flex gap-[16px]\">\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 const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\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 member_active_status: profileActivated ? 'active' : 'not active',\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 },\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 <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} />\n </GridItem>\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} />\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\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
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", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "useAiuiContext", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "trackingData", "profileActivated", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "0.0.27-alpha.152",
3
+ "version": "0.0.27-alpha.153",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",