@anker-in/headless-ui 1.0.16-alpha.1 → 1.0.16-alpha.11

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 (55) hide show
  1. package/dist/cjs/biz-components/Evaluate/index.js +1 -1
  2. package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
  3. package/dist/cjs/biz-components/Graphic/index.js +1 -1
  4. package/dist/cjs/biz-components/Graphic/index.js.map +3 -3
  5. package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
  6. package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
  7. package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
  8. package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +3 -3
  9. package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
  10. package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
  11. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  12. package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
  13. package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
  14. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
  15. package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +4 -4
  16. package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
  17. package/dist/cjs/biz-components/TextModal/index.js +1 -1
  18. package/dist/cjs/biz-components/TextModal/index.js.map +2 -2
  19. package/dist/cjs/biz-components/Title/index.js +1 -1
  20. package/dist/cjs/biz-components/Title/index.js.map +3 -3
  21. package/dist/cjs/biz-components/Title/types.d.ts +1 -0
  22. package/dist/cjs/biz-components/Title/types.js +1 -1
  23. package/dist/cjs/biz-components/Title/types.js.map +1 -1
  24. package/dist/cjs/components/board.d.ts +3 -1
  25. package/dist/cjs/components/board.js +1 -1
  26. package/dist/cjs/components/board.js.map +3 -3
  27. package/dist/cjs/components/picture.js +1 -1
  28. package/dist/cjs/components/picture.js.map +3 -3
  29. package/dist/esm/biz-components/Evaluate/index.js +1 -1
  30. package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
  31. package/dist/esm/biz-components/Graphic/index.js +1 -1
  32. package/dist/esm/biz-components/Graphic/index.js.map +3 -3
  33. package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
  34. package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
  35. package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
  36. package/dist/esm/biz-components/MediaPlayerBase/index.js.map +3 -3
  37. package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
  38. package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
  39. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
  40. package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
  41. package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
  42. package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
  43. package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +9 -9
  44. package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
  45. package/dist/esm/biz-components/TextModal/index.js +1 -1
  46. package/dist/esm/biz-components/TextModal/index.js.map +2 -2
  47. package/dist/esm/biz-components/Title/index.js +1 -1
  48. package/dist/esm/biz-components/Title/index.js.map +3 -3
  49. package/dist/esm/biz-components/Title/types.d.ts +1 -0
  50. package/dist/esm/components/board.d.ts +3 -1
  51. package/dist/esm/components/board.js +1 -1
  52. package/dist/esm/components/board.js.map +3 -3
  53. package/dist/esm/components/picture.js +1 -1
  54. package/dist/esm/components/picture.js.map +3 -3
  55. package/package.json +1 -1
package/dist/cjs/biz-components/Evaluate/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var E=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var I=(e,r)=>{for(var s in r)d(e,s,{get:r[s],enumerable:!0})},u=(e,r,s,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of B(r))!A.call(e,i)&&i!==s&&d(e,i,{get:()=>r[i],enumerable:!(a=P(r,i))||a.enumerable});return e};var m=(e,r,s)=>(s=e!=null?E(M(e)):{},u(r||!e||!e.__esModule?d(s,"default",{value:e,enumerable:!0}):s,e)),$=e=>u(d({},"__esModule",{value:!0}),e);var V={};I(V,{default:()=>R});module.exports=$(V);var t=require("react/jsx-runtime"),o=m(require("react")),x=m(require("../Title/index.js")),l=require("../../helpers/utils.js"),w=m(require("../../components/picture.js")),h=m(require("../SwiperBox/index.js")),b=require("../../shared/Styles.js"),n=require("../../components/avatar.js"),g=require("../../components/container.js"),k=require("../../components/text.js"),N=require("../../hooks/useExposure.js"),y=require("../../shared/trackUrlRef.js");const v="copy",f="product_review",z=({data:e,configuration:r})=>{const s=a=>a?Array.from(new Array(Number(a)))||[]:[];return(0,t.jsx)("div",{className:(0,l.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full 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","md-tablet:h-[360px]"),children:(0,t.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:(0,l.cn)("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[e?.title?(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}):null,(0,t.jsx)("div",{className:"mt-1 flex items-center",children:s(e?.rating)?.map?.((a,i)=>(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"})})},i))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e?.avatar?.url?(0,t.jsxs)(n.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:[(0,t.jsx)(n.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(n.AvatarFallback,{children:e?.title})]}):null})]}),(0,t.jsx)("div",{className:"flex-1",children:(0,t.jsx)(k.Text,{className:(0,l.cn)("desktop:max-h-[151px] tablet:max-h-[140px]","lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]"),children:e?.description||""})}),(0,t.jsx)("a",{href:(0,y.trackUrlRef)(e?.link,`${v}_${f}`),onClick:()=>{r?.event?.primaryButton(e,r?.index+1)},"data-headless-type-name":`${v}#${f}`,"data-headless-title-desc-button":`${e?.title}#${e?.description||e?.subTitle}`,"data-headless-nav-postion":`''#${r?.index+1}`,children:(0,t.jsxs)("div",{className:(0,l.cn)("mt-3 flex items-center cursor-pointer 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)(w.default,{className:"w-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""})}),(0,t.jsx)("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:e?.subTitle||""})]})})]})})},F=o.default.forwardRef(({className:e="",data:r,key:s,...a},i)=>{const{products:C,title:p,theme:L,...T}=r,c=(0,o.useRef)(null);return(0,o.useImperativeHandle)(i,()=>c.current),(0,N.useExposure)(c,{componentType:v,componentName:f,componentTitle:p}),(0,t.jsx)("div",{className:e,ref:c,children:(0,t.jsx)("div",{className:"evaluate-box",children:(0,t.jsx)(g.Container,{...r?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:i,className:(0,l.cn)("w-full",e,{"aiui-dark":L==="dark"}),children:[p&&(0,t.jsx)(x.default,{data:{title:p}}),(0,t.jsx)(h.default,{className:"!overflow-visible",id:"Evaluate"+s,data:{list:C,configuration:{...T,title:p}},Slide:z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var R=(0,b.withLayout)(F);
1
+ "use strict";"use client";var E=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var I=(e,r)=>{for(var s in r)p(e,s,{get:r[s],enumerable:!0})},x=(e,r,s,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of M(r))!A.call(e,i)&&i!==s&&p(e,i,{get:()=>r[i],enumerable:!(n=P(r,i))||n.enumerable});return e};var d=(e,r,s)=>(s=e!=null?E(B(e)):{},x(r||!e||!e.__esModule?p(s,"default",{value:e,enumerable:!0}):s,e)),$=e=>x(p({},"__esModule",{value:!0}),e);var D={};I(D,{default:()=>R});module.exports=$(D);var t=require("react/jsx-runtime"),l=d(require("react")),w=d(require("../Title/index.js")),o=require("../../helpers/utils.js"),h=d(require("../../components/picture.js")),b=d(require("../SwiperBox/index.js")),g=require("../../shared/Styles.js"),a=require("../../components/avatar.js"),k=require("../../components/container.js"),N=require("../../components/text.js"),y=require("../../hooks/useExposure.js"),C=require("../../shared/trackUrlRef.js");const v="copy",f="product_review",z=({data:e,configuration:r})=>{const s=(0,l.useRef)(null),n=i=>i?Array.from(new Array(Number(i)))||[]:[];return(0,y.useExposure)(s,{componentType:v,componentName:f,componentTitle:e?.title,componentDescription:e?.description,position:r?.index+1}),(0,t.jsx)("div",{ref:s,className:(0,o.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full 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","md-tablet:h-[360px]"),children:(0,t.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:(0,o.cn)("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[e?.title?(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}):null,(0,t.jsx)("div",{className:"mt-1 flex items-center",children:n(e?.rating)?.map?.((i,m)=>(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"})})},m))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e?.avatar?.url?(0,t.jsxs)(a.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:[(0,t.jsx)(a.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(a.AvatarFallback,{children:e?.title})]}):null})]}),(0,t.jsx)("div",{className:"flex-1",children:(0,t.jsx)(N.Text,{className:(0,o.cn)("desktop:max-h-[151px] tablet:max-h-[140px]","lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]"),children:e?.description||""})}),(0,t.jsx)("a",{href:(0,C.trackUrlRef)(e?.link,`${v}_${f}`),onClick:()=>{r?.event?.primaryButton(e,r?.index+1)},"data-headless-type-name":`${v}#${f}`,"data-headless-title-desc-button":`${e?.title}#${e?.description||e?.subTitle}`,"data-headless-nav-postion":`''#${r?.index+1}`,children:(0,t.jsxs)("div",{className:(0,o.cn)("mt-3 flex items-center cursor-pointer 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)(h.default,{className:"w-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""})}),(0,t.jsx)("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:e?.subTitle||""})]})})]})})},F=l.default.forwardRef(({className:e="",data:r,key:s,...n},i)=>{const{products:m,title:c,theme:L,...T}=r,u=(0,l.useRef)(null);return(0,l.useImperativeHandle)(i,()=>u.current),(0,t.jsx)("div",{className:e,ref:u,children:(0,t.jsx)("div",{className:"evaluate-box",children:(0,t.jsx)(k.Container,{...r?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:i,className:(0,o.cn)("w-full",e,{"aiui-dark":L==="dark"}),children:[c&&(0,t.jsx)(w.default,{data:{title:c}}),(0,t.jsx)(b.default,{className:"!overflow-visible",id:"Evaluate"+s,data:{list:m,configuration:{...T,title:c}},Slide:z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var R=(0,g.withLayout)(F);
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 { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: Img\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 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 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 'md-tablet:h-[360px]'\n )}\n >\n <div className=\"desktop:p-6 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 {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\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 {data?.avatar?.url ? (\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </Avatar>\n ) : null}\n </div>\n </div>\n <div className=\"flex-1\">\n <Text\n className={cn(\n 'desktop:max-h-[151px] tablet:max-h-[140px]',\n 'lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]'\n )}\n >\n {data?.description || ''}\n </Text>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index + 1)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description || data?.subTitle}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n >\n <div\n className={cn(\n 'mt-3 flex items-center cursor-pointer 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} alt={data?.img?.alt || ''} />\n </div>\n <p className=\"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]\">\n {data?.subTitle || ''}\n </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\n useExposure(innerRef, {\n componentType,\n componentName,\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, title: title } }}\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.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\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 withLayout(Evaluate)\n"],
5
- "mappings": "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",
6
- "names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "import_container", "import_text", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Picture", "Evaluate", "React", "className", "key", "rest", "ref", "products", "title", "theme", "ohter", "innerRef", "Title", "SwiperBox"]
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 { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: Img\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 ref = useRef<HTMLDivElement>(null)\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full 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 'md-tablet:h-[360px]'\n )}\n >\n <div className=\"desktop:p-6 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 {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\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 {data?.avatar?.url ? (\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </Avatar>\n ) : null}\n </div>\n </div>\n <div className=\"flex-1\">\n <Text\n className={cn(\n 'desktop:max-h-[151px] tablet:max-h-[140px]',\n 'lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]'\n )}\n >\n {data?.description || ''}\n </Text>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index + 1)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description || data?.subTitle}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n >\n <div\n className={cn(\n 'mt-3 flex items-center cursor-pointer 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} alt={data?.img?.alt || ''} />\n </div>\n <p className=\"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]\">\n {data?.subTitle || ''}\n </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\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, title: title } }}\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.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\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 withLayout(Evaluate)\n"],
5
+ "mappings": "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",
6
+ "names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "import_container", "import_text", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "ref", "handleRating", "num", "_", "index", "Picture", "Evaluate", "React", "className", "key", "rest", "products", "title", "theme", "ohter", "innerRef", "Title", "SwiperBox"]
7
7
  }
package/dist/cjs/biz-components/Graphic/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var z=Object.create;var b=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var Y=(e,s)=>{for(var i in s)b(e,i,{get:s[i],enumerable:!0})},T=(e,s,i,m)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of R(s))!F.call(e,r)&&r!==i&&b(e,r,{get:()=>s[r],enumerable:!(m=j(s,r))||m.enumerable});return e};var g=(e,s,i)=>(i=e!=null?z(q(e)):{},T(s||!e||!e.__esModule?b(i,"default",{value:e,enumerable:!0}):i,e)),_=e=>T(b({},"__esModule",{value:!0}),e);var Z={};Y(Z,{default:()=>Q});module.exports=_(Z);var t=require("react/jsx-runtime"),M=require("react-responsive"),o=g(require("react")),c=require("../../helpers/utils.js"),V=require("../../shared/Styles.js"),N=g(require("../SwiperBox/index.js")),a=require("../../components/index.js"),C=g(require("../Title/index.js")),P=require("../VideoModal/index.js"),$=require("../TextModal/index.js"),G=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js");const h="image",u="graphic",A=({data:e,configuration:s})=>{const i=()=>{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"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};function m(n){throw new Error("Function not implemented.")}function r(n){throw new Error("Function not implemented.")}function x(n){throw new Error("Function not implemented.")}return(0,t.jsx)("div",{className:(0,c.cn)(i(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,c.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[(0,t.jsx)("a",{"aria-label":e?.title??e?.description,href:e?.href?(0,w.trackUrlRef)(e?.href||"",`${h}_${u}`):"",className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${h}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,t.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),(0,t.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsxs)("div",{className:(0,c.cn)("flex items-end overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(a.Text,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(a.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:n=>{n.preventDefault(),n.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:n=>{n.preventDefault(),n.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:(0,t.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(a.Button,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:(0,w.trackUrlRef)(e?.href,`${h}_${u}`),"data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${h}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},I=o.default.forwardRef(({data:e,className:s},i)=>{const m=(0,M.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,o.useRef)(null),[x,n]=(0,o.useState)(!1),[v,S]=(0,o.useState)(""),[E,B]=(0,o.useState)(""),[H,L]=(0,o.useState)(""),[D,y]=(0,o.useState)(null),[U,k]=(0,o.useState)(!1),f=p=>{const l=e?.items?.length>3,d=e?.items?.length>2;switch(p){case 1440:return l?4:e?.items?.length;case 1024:return l?3:e?.items?.length;case 768:return l||d?2.3:2;default:return 1.2}};return(0,o.useImperativeHandle)(i,()=>r.current),(0,G.useExposure)(r,{componentType:h,componentName:u,componentTitle:e?.title}),(0,o.useEffect)(()=>{const p=r.current?.querySelectorAll(".graphic-description");if(p&&p.length>0){let l=0;p.forEach(d=>{l=Math.max(l,d.offsetHeight)}),p.forEach(d=>{d.style.height=`${l}px`})}},[]),(0,t.jsxs)("div",{className:(0,c.cn)("graphicBlock",s),ref:r,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(C.default,{data:{title:e?.title}}),(0,t.jsx)(N.default,{id:"Graphic",className:(0,c.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(p,l)=>{n(!0),l?.isYouTube?B?.(l?.youtubeId||""):(S?.(l?.video?.url||""),L?.(l?.mobileVideo?.url||""))},onIconClick:p=>{k(!0),y(p)},title:e?.title}},Slide:A,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),(0,t.jsx)(P.VideoModal,{visible:x,youTubeId:E,onCloseModal:()=>n(!1),videoUrl:m&&H||v}),(0,t.jsx)($.TextModal,{textVisible:U,extension:D?.extension,onCloseModal:()=>{k(!1),y(null)}})]})});I.displayName="Graphic";var Q=(0,V.withLayout)(I);
1
+ "use strict";"use client";var z=Object.create;var f=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var _=(e,s)=>{for(var i in s)f(e,i,{get:s[i],enumerable:!0})},T=(e,s,i,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of R(s))!Y.call(e,o)&&o!==i&&f(e,o,{get:()=>s[o],enumerable:!(a=j(s,o))||a.enumerable});return e};var b=(e,s,i)=>(i=e!=null?z(q(e)):{},T(s||!e||!e.__esModule?f(i,"default",{value:e,enumerable:!0}):i,e)),A=e=>T(f({},"__esModule",{value:!0}),e);var F={};_(F,{default:()=>Z});module.exports=A(F);var t=require("react/jsx-runtime"),M=require("react-responsive"),l=b(require("react")),d=require("../../helpers/utils.js"),I=require("../../shared/Styles.js"),V=b(require("../SwiperBox/index.js")),n=require("../../components/index.js"),C=b(require("../Title/index.js")),P=require("../VideoModal/index.js"),$=require("../TextModal/index.js"),g=require("../../hooks/useExposure.js"),x=require("../../shared/trackUrlRef.js");const c="image",m="graphic",Q=({data:e,configuration:s})=>{const i=(0,l.useRef)(null),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"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};return(0,g.useExposure)(i,{componentType:c,componentName:m,componentTitle:e?.title,componentDescription:e?.description,position:s?.index+1}),(0,t.jsx)("div",{ref:i,className:(0,d.cn)(a(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,d.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[e?.href?(0,t.jsx)("a",{"aria-label":e?.title??e?.description,href:(0,x.trackUrlRef)(e?.href||"",`${c}_${m}`),className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${c}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,t.jsx)(n.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):(0,t.jsx)("div",{className:"block size-full cursor-pointer overflow-hidden",children:(0,t.jsx)(n.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),(0,t.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsxs)("div",{className:(0,d.cn)("flex items-end overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(n.Text,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(n.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:o=>{o.preventDefault(),o.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:(0,t.jsx)(n.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(n.Button,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:(0,x.trackUrlRef)(e?.href,`${c}_${m}`),"data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${c}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},N=l.default.forwardRef(({data:e,className:s},i)=>{const a=(0,M.useMediaQuery)({query:"(max-width: 768px)"}),o=(0,l.useRef)(null),[S,v]=(0,l.useState)(!1),[w,G]=(0,l.useState)(""),[B,D]=(0,l.useState)(""),[E,H]=(0,l.useState)(""),[L,y]=(0,l.useState)(null),[U,k]=(0,l.useState)(!1),u=p=>{const r=e?.items?.length>3,h=e?.items?.length>2;switch(p){case 1440:return r?4:e?.items?.length;case 1024:return r?3:e?.items?.length;case 768:return r||h?2.3:2;default:return 1.2}};return(0,l.useImperativeHandle)(i,()=>o.current),(0,g.useExposure)(o,{componentType:c,componentName:m,componentTitle:e?.title}),(0,l.useEffect)(()=>{const p=o.current?.querySelectorAll(".graphic-description");if(p&&p.length>0){let r=0;p.forEach(h=>{r=Math.max(r,h.offsetHeight)}),p.forEach(h=>{h.style.height=`${r}px`})}},[]),(0,t.jsxs)("div",{className:(0,d.cn)("graphicBlock",s),ref:o,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(C.default,{data:{title:e?.title}}),(0,t.jsx)(V.default,{id:"Graphic",className:(0,d.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(p,r)=>{v(!0),r?.isYouTube?D?.(r?.youtubeId||""):(G?.(r?.video?.url||""),H?.(r?.mobileVideo?.url||""))},onIconClick:p=>{k(!0),y(p)},title:e?.title}},Slide:Q,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u()},768:{spaceBetween:16,freeMode:!1,slidesPerView:u(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:u(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:u(1440)}}})]}),(0,t.jsx)(P.VideoModal,{visible:S,youTubeId:B,onCloseModal:()=>v(!1),videoUrl:a&&E||w}),(0,t.jsx)($.TextModal,{textVisible:U,extension:L?.extension,onCloseModal:()=>{k(!1),y(null)}})]})});N.displayName="Graphic";var Z=(0,I.withLayout)(N);
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 { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n function setVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setTextVisible(arg0: boolean) {\n throw new Error('Function not implemented.')\n }\n\n function setCurrentItem(data: GraphicType) {\n throw new Error('Function not implemented.')\n }\n\n return (\n <div\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div\n className=\"relative block size-full cursor-pointer overflow-hidden\"\n >\n <a\n aria-label={data?.title ?? data?.description}\n href={data?.href ? trackUrlRef(data?.href || '', `${componentType}_${componentName}`) : ''}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\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 onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
5
- "mappings": "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",
6
- "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "handleAspect", "setVisible", "arg0", "setTextVisible", "setCurrentItem", "e", "Graphic", "React", "className", "ref", "isMobile", "innerRef", "visible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "textVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Title", "SwiperBox", "_"]
4
+ "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div className=\"relative block size-full cursor-pointer overflow-hidden\">\n {data?.href ? (\n <a\n aria-label={data?.title ?? data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n ) : (\n <div className=\"block size-full cursor-pointer overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </div>\n )}\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\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 onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
5
+ "mappings": "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",
6
+ "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "ref", "handleAspect", "e", "Graphic", "React", "className", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Title", "SwiperBox", "_"]
7
7
  }
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var ee=Object.create;var w=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var le=(t,r)=>{for(var s in r)w(t,s,{get:r[s],enumerable:!0})},q=(t,r,s,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of ae(r))!oe.call(t,a)&&a!==s&&w(t,a,{get:()=>r[a],enumerable:!(l=te(r,a))||l.enumerable});return t};var V=(t,r,s)=>(s=t!=null?ee(re(t)):{},q(r||!t||!t.__esModule?w(s,"default",{value:t,enumerable:!0}):s,t)),se=t=>q(w({},"__esModule",{value:!0}),t);var pe={};le(pe,{default:()=>ie});module.exports=se(pe);var e=require("react/jsx-runtime"),o=V(require("react")),x=V(require("gsap")),h=require("gsap/dist/ScrollTrigger"),z=require("react-responsive"),A=require("react-intersection-observer"),Q=V(require("../../helpers/ScrollLoadVideo.js")),n=require("../../components/index.js"),d=require("../../helpers/index.js"),Z=require("../../shared/Styles.js"),G=require("../../hooks/useExposure.js"),$=require("../../shared/trackUrlRef.js"),J=require("../../components/button.js"),K=require("../VideoModal/index.js");const p="image",c="hero_banner",ne=({size:t="base"})=>{const{width:r,height:s}=J.sizeMap[t];return(0,e.jsx)("svg",{width:r,height:s,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},F=o.default.forwardRef(({data:t,className:r},s)=>{const{title:l,subtitle:a,pcImage:R,padImage:O,mobileImage:I,pcVideo:P,padVideo:M,mobileVideo:y,isShowVideo:W,primaryButton:m,secondaryButton:i,theme:X="light",size:L="default",caption:k=[],blockLink:S}=t,C=(0,z.useMediaQuery)({query:"(max-width: 768px)"}),E=(0,z.useMediaQuery)({query:"(max-width: 1024px)"}),[U,D]=(0,o.useState)(!1),{ref:Y,inView:_}=(0,A.useInView)(),N=(0,o.useRef)(null),T=(0,o.useRef)(null),B=(0,o.useRef)(null),g=(0,o.useRef)(null),u=(0,o.useRef)(null);return(0,G.useExposure)(u,{componentType:p,componentName:c,componentTitle:l,componentDescription:a}),(0,o.useImperativeHandle)(s,()=>u.current),(0,o.useEffect)(()=>{x.default.registerPlugin(h.ScrollTrigger);function H(){if(!g.current)return;const v=u.current?.clientHeight||100;window.innerHeight<=v?N.current=h.ScrollTrigger.create({trigger:u.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:b=>{const f=b.progress*40-20;x.default.set(g.current,{yPercent:f})}}):(B.current=h.ScrollTrigger.create({trigger:u.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:b=>{const f=b.progress*20-20;x.default.set(g.current,{yPercent:f})}}),T.current=h.ScrollTrigger.create({trigger:u.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:b=>{const f=b.progress*20;x.default.set(g.current,{yPercent:f})}}))}return _&&H(),()=>{N.current&&N.current.kill(),B.current&&B.current.kill(),T.current&&T.current.kill()}},[_]),(0,e.jsx)("div",{ref:Y,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:u,className:(0,d.cn)(X==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":L==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":L==="sm"},r),children:[S&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,$.trackUrlRef)(S,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":l}),(0,e.jsx)("div",{ref:g,className:(0,d.cn)("absolute left-0 top-0 size-full"),children:W?(0,e.jsx)(Q.default,{poster:C?y?.url:E?M?.url||y?.url:P?.url,src:C?y?.url:E?M?.url||y?.url:P?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,e.jsx)(n.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:R?.alt||"",source:`${R?.url||""} , ${O?.url??(I?.url||"")} 1024, ${I?.url||""} 767`})}),(0,e.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[l&&(0,e.jsx)(n.Heading,{as:"h2",size:5,className:(0,d.cn)("hero-banner-title"),html:l}),a&&(0,e.jsx)(n.Heading,{as:"h3",className:(0,d.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:a})]}),(0,e.jsxs)("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i?.isShowPlayVideoButton&&i?.playVideoButtonText?(0,e.jsxs)(n.Button,{onClick:()=>D(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${i?.playVideoButtonText}`,children:[i?.playVideoButtonText," ",(0,e.jsx)(ne,{size:"lg"})]}):i?.text?(0,e.jsxs)(n.Button,{"aria-label":l??a,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:(0,$.trackUrlRef)(i?.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${i?.text}`,children:[i?.text,(0,e.jsx)("span",{className:"sr-only",children:l??a})]}):null,m&&m.text&&(0,e.jsx)(n.Button,{"aria-label":l??a,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:(0,$.trackUrlRef)(m.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${m?.text}`,children:m.text})]})]}),k.length>0&&(0,e.jsx)("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:k.map((H,v)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(n.Text,{size:2,className:(0,d.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:H.title}),v<k.length-1&&(0,e.jsx)("div",{className:(0,d.cn)("bg-info-primary w-px")})]},v))}),U&&(0,e.jsx)(K.VideoModal,{visible:U,videoUrl:i?.videoUrl?.url,youTubeId:i?.youtubeId,onCloseModal:()=>D(!1)})]})})});F.displayName="HeroBanner";var ie=(0,Z.withLayout)(F);
1
+ "use strict";"use client";var ee=Object.create;var w=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var ae=Object.getOwnPropertyNames;var re=Object.getPrototypeOf,oe=Object.prototype.hasOwnProperty;var le=(t,r)=>{for(var s in r)w(t,s,{get:r[s],enumerable:!0})},q=(t,r,s,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of ae(r))!oe.call(t,a)&&a!==s&&w(t,a,{get:()=>r[a],enumerable:!(l=te(r,a))||l.enumerable});return t};var V=(t,r,s)=>(s=t!=null?ee(re(t)):{},q(r||!t||!t.__esModule?w(s,"default",{value:t,enumerable:!0}):s,t)),se=t=>q(w({},"__esModule",{value:!0}),t);var pe={};le(pe,{default:()=>ie});module.exports=se(pe);var e=require("react/jsx-runtime"),o=V(require("react")),x=V(require("gsap")),h=require("gsap/dist/ScrollTrigger"),z=require("react-responsive"),A=require("react-intersection-observer"),Q=V(require("../../helpers/ScrollLoadVideo.js")),n=require("../../components/index.js"),d=require("../../helpers/index.js"),Z=require("../../shared/Styles.js"),G=require("../../hooks/useExposure.js"),$=require("../../shared/trackUrlRef.js"),J=require("../../components/button.js"),K=require("../VideoModal/index.js");const p="image",c="hero_banner",ne=({size:t="base"})=>{const{width:r,height:s}=J.sizeMap[t];return(0,e.jsx)("svg",{width:r,height:s,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},F=o.default.forwardRef(({data:t,className:r},s)=>{const{title:l,subtitle:a,pcImage:R,padImage:O,mobileImage:I,pcVideo:P,padVideo:M,mobileVideo:y,isShowVideo:W,primaryButton:m,secondaryButton:i,theme:X="light",size:L="default",caption:k=[],blockLink:S}=t,C=(0,z.useMediaQuery)({query:"(max-width: 768px)"}),E=(0,z.useMediaQuery)({query:"(max-width: 1024px)"}),[U,D]=(0,o.useState)(!1),{ref:Y,inView:_}=(0,A.useInView)(),N=(0,o.useRef)(null),T=(0,o.useRef)(null),B=(0,o.useRef)(null),g=(0,o.useRef)(null),u=(0,o.useRef)(null);return(0,G.useExposure)(u,{componentType:p,componentName:c,componentTitle:l,componentDescription:a}),(0,o.useImperativeHandle)(s,()=>u.current),(0,o.useEffect)(()=>{x.default.registerPlugin(h.ScrollTrigger);function H(){if(!g.current)return;const v=u.current?.clientHeight||100;window.innerHeight<=v?N.current=h.ScrollTrigger.create({trigger:u.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:b=>{const f=b.progress*40-20;x.default.set(g.current,{yPercent:f})}}):(B.current=h.ScrollTrigger.create({trigger:u.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:b=>{const f=b.progress*20-20;x.default.set(g.current,{yPercent:f})}}),T.current=h.ScrollTrigger.create({trigger:u.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:b=>{const f=b.progress*20;x.default.set(g.current,{yPercent:f})}}))}return _&&H(),()=>{N.current&&N.current.kill(),B.current&&B.current.kill(),T.current&&T.current.kill()}},[_]),(0,e.jsx)("div",{ref:Y,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:u,className:(0,d.cn)(X==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":L==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":L==="sm"},r),children:[S&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,$.trackUrlRef)(S,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":l}),(0,e.jsx)("div",{ref:g,className:(0,d.cn)("absolute left-0 top-0 size-full"),children:W?(0,e.jsx)(Q.default,{poster:C?y?.url:E?M?.url||y?.url:P?.url,src:C?y?.url:E?M?.url||y?.url:P?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,e.jsx)(n.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:R?.alt||"",source:`${R?.url||""} , ${O?.url??(I?.url||"")} 1024, ${I?.url||""} 767`})}),(0,e.jsxs)("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[l&&(0,e.jsx)(n.Heading,{as:"h2",size:5,className:(0,d.cn)("hero-banner-title"),html:l}),a&&(0,e.jsx)(n.Heading,{as:"h3",className:(0,d.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:a})]}),(0,e.jsxs)("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i?.isShowPlayVideoButton&&i?.playVideoButtonText?(0,e.jsxs)(n.Button,{onClick:()=>D(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${i?.playVideoButtonText}`,children:[i?.playVideoButtonText," ",(0,e.jsx)(ne,{size:"lg"})]}):i?.text?(0,e.jsxs)(n.Button,{"aria-label":l??a,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:(0,$.trackUrlRef)(i?.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${i?.text}`,children:[i?.text,(0,e.jsx)("span",{className:"sr-only",children:l??a})]}):null,m&&m.text&&(0,e.jsx)(n.Button,{"aria-label":l??a,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:(0,$.trackUrlRef)(m.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${l}#${a}#${m?.text}`,children:m.text})]})]}),k.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:k.map((H,v)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(n.Text,{size:2,className:(0,d.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:H.title}),v<k.length-1&&(0,e.jsx)("div",{className:(0,d.cn)("bg-info-primary w-px")})]},v))}),U&&(0,e.jsx)(K.VideoModal,{visible:U,videoUrl:i?.videoUrl?.url,youTubeId:i?.youtubeId,onCloseModal:()=>D(!1)})]})})});F.displayName="HeroBanner";var ie=(0,Z.withLayout)(F);
2
2
  //# sourceMappingURL=HeroBanner.js.map
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as=\"a\"\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as=\"a\"\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n title,\n subtitle,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileVideo?.url : isPad ? padVideo?.url || mobileVideo?.url : pcVideo?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h2\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as=\"a\"\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as=\"a\"\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
5
+ "mappings": "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",
6
6
  "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "c", "index"]
7
7
  }
package/dist/cjs/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var me=Object.create;var h=Object.defineProperty;var fe=Object.getOwnPropertyDescriptor;var ge=Object.getOwnPropertyNames;var ve=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var ye=(r,n)=>{for(var o in n)h(r,o,{get:n[o],enumerable:!0})},O=(r,n,o,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of ge(n))!xe.call(r,s)&&s!==o&&h(r,s,{get:()=>n[s],enumerable:!(l=fe(n,s))||l.enumerable});return r};var U=(r,n,o)=>(o=r!=null?me(ve(r)):{},O(n||!r||!r.__esModule?h(o,"default",{value:r,enumerable:!0}):o,r)),be=r=>O(h({},"__esModule",{value:!0}),r);var ke={};ye(ke,{default:()=>Te});module.exports=be(ke);var e=require("react/jsx-runtime"),t=require("react"),J=require("lodash"),m=require("../../helpers/utils.js"),K=require("../../shared/Styles.js"),Q=U(require("../../components/button.js")),W=require("../VideoModal/index.js"),E=require("@payloadcms/richtext-lexical/html"),X=require("react-intersection-observer"),Z=require("../../hooks/useExposure.js"),z=U(require("../../helpers/ScrollLoadVideo.js")),w=require("gsap"),A=require("gsap/dist/SplitText"),ee=require("gsap/dist/ScrollTrigger");const he="media_player_base",we="video",G=({defaultConverters:r})=>({...r,text:n=>{const{node:o}=n;return o.$&&o.$.color?`<span class="lexical-${o.$.color}">${o.text}</span>`:o.text}}),He=(0,t.forwardRef)(({className:r="",onBtnClick:n,data:{title:o,videoTitle:l,btnText:s,youtubeId:I,video:_,mobileVideo:te,theme:P,img:S,shape:$,titleAnimation:f,...oe}},re)=>{const{sticky:c}=oe,[B,C]=(0,t.useState)(!1),[V,ne]=(0,t.useState)(0),[se,le]=(0,t.useState)(0),[D,F]=(0,t.useState)(!1),g=(0,t.useRef)(null),j=(0,t.useRef)(null),a=(0,t.useRef)(null),v=(0,t.useRef)(null),Y=(0,t.useRef)(null),x=(0,t.useRef)(null),H=(0,t.useRef)(null),{ref:ae,inView:y}=(0,X.useInView)();(0,t.useImperativeHandle)(re,()=>a.current);const b=typeof o=="string"?o:o&&(0,E.convertLexicalToHTML)({data:o,converters:G}),T=typeof l=="string"?l:l&&(0,E.convertLexicalToHTML)({data:l,converters:G});(0,t.useEffect)(()=>{y?(g.current?.play(),C(!0)):(g.current?.pause(),C(!1))},[y]);const k=(0,J.debounce)(()=>{if(a.current){const d=a.current.getBoundingClientRect(),i=window.innerHeight,p=window.scrollY||window.pageYOffset,L=d.bottom+p,u=document.documentElement.scrollHeight-L;ne(u>i?i:u)}if(a.current){const d=a.current.clientHeight,i=window.innerHeight;le(d+i)}},600);(0,t.useEffect)(()=>(k(),window.addEventListener("resize",k),()=>{window.removeEventListener("resize",k)}),[]),(0,t.useEffect)(()=>{function d(){if(!v.current||f!=="fade-in")return;const i=v.current?.clientHeight||80;x.current=new A.SplitText(v.current,{type:"words",wordsClass:"word"});const p=x.current.words;w.gsap.set(p,{opacity:0}),H.current=ee.ScrollTrigger.create({trigger:a.current,start:"top center-=10%",end:`top+=${i*1.5+80}px center-=10%`,scrub:!0,onUpdate:L=>{const N=L.progress,u=p.length,ie=1/u,q=.5;p.forEach((ce,de)=>{const pe=de/u*(1-q),ue=ie*(1+q);let R=(N-pe)/ue;R=Math.max(0,Math.min(R,1)),w.gsap.set(ce,{opacity:R})}),w.gsap.set(j.current,{opacity:N})}})}return y&&d(),()=>{x.current&&x.current.revert(),H.current&&H.current.kill()}},[f,y]),(0,Z.useExposure)(Y,{componentType:we,componentName:he,componentTitle:T});const M="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return(0,e.jsxs)(e.Fragment,{children:[c&&(0,e.jsx)("div",{ref:a,className:(0,m.cn)("relative z-10",M,{"aiui-dark":P==="dark","rounded-box":$==="rounded"},r),children:(0,e.jsx)("div",{ref:ae,children:!f&&(0,e.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[b&&!B&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),T&&B&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),s&&(0,e.jsx)(Q.default,{variant:"link",className:(0,m.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{F(!0),n&&n?.()},children:s})]})})}),(0,e.jsxs)("div",{style:c?{marginBottom:`-${V}px`,marginTop:`-${se}px`}:{},className:"relative",children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{className:(0,m.cn)("relative overflow-hidden",c?"h-screen w-full":M,{"aiui-dark":P==="dark","rounded-box":$==="rounded"}),children:[f==="fade-in"&&b&&(0,e.jsx)("div",{ref:v,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),(0,e.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,e.jsx)(z.default,{videoRef:g,poster:S?.url||"",src:_?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)(z.default,{videoRef:g,poster:S?.url||"",src:te?.url||_?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)("div",{ref:j,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),(0,e.jsx)("div",{className:(0,m.cn)(c&&"relative box-content block",M),style:c?{height:`${V}px`}:{},ref:Y})]}),D&&I&&(0,e.jsx)(W.VideoModal,{visible:D,youTubeId:I,onCloseModal:()=>F(!1)})]})});var Te=(0,K.withLayout)(He);
1
+ "use strict";"use client";var fe=Object.create;var h=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var ve=Object.getOwnPropertyNames;var xe=Object.getPrototypeOf,ye=Object.prototype.hasOwnProperty;var be=(o,n)=>{for(var r in n)h(o,r,{get:n[r],enumerable:!0})},U=(o,n,r,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of ve(n))!ye.call(o,s)&&s!==r&&h(o,s,{get:()=>n[s],enumerable:!(l=ge(n,s))||l.enumerable});return o};var G=(o,n,r)=>(r=o!=null?fe(xe(o)):{},U(n||!o||!o.__esModule?h(r,"default",{value:o,enumerable:!0}):r,o)),he=o=>U(h({},"__esModule",{value:!0}),o);var Me={};be(Me,{default:()=>ke});module.exports=he(Me);var e=require("react/jsx-runtime"),t=require("react"),K=require("lodash"),m=require("../../helpers/utils.js"),Q=require("../../shared/Styles.js"),W=G(require("../../components/button.js")),X=require("../VideoModal/index.js"),E=require("@payloadcms/richtext-lexical/html"),Z=require("react-intersection-observer"),A=require("../../hooks/useExposure.js"),z=G(require("../../helpers/ScrollLoadVideo.js")),w=require("gsap"),ee=require("gsap/dist/SplitText"),te=require("gsap/dist/ScrollTrigger");const we="media_player_base",He="video",J=({defaultConverters:o})=>({...o,text:n=>{const{node:r}=n;return r.$&&r.$.color?`<span class="lexical-${r.$.color}">${r.text}</span>`:r.text}}),Te=(0,t.forwardRef)(({className:o="",id:n,onBtnClick:r,data:{title:l,videoTitle:s,btnText:I,youtubeId:_,video:P,mobileVideo:oe,theme:S,img:$,shape:B,titleAnimation:f,...re}},ne)=>{const{sticky:c}=re,[C,V]=(0,t.useState)(!1),[D,se]=(0,t.useState)(0),[le,ae]=(0,t.useState)(0),[F,j]=(0,t.useState)(!1),g=(0,t.useRef)(null),Y=(0,t.useRef)(null),a=(0,t.useRef)(null),v=(0,t.useRef)(null),q=(0,t.useRef)(null),x=(0,t.useRef)(null),H=(0,t.useRef)(null),{ref:ie,inView:y}=(0,Z.useInView)();(0,t.useImperativeHandle)(ne,()=>a.current);const b=typeof l=="string"?l:l&&(0,E.convertLexicalToHTML)({data:l,converters:J}),T=typeof s=="string"?s:s&&(0,E.convertLexicalToHTML)({data:s,converters:J});(0,t.useEffect)(()=>{y?(g.current?.play(),V(!0)):(g.current?.pause(),V(!1))},[y]);const k=(0,K.debounce)(()=>{if(a.current){const d=a.current.getBoundingClientRect(),i=window.innerHeight,p=window.scrollY||window.pageYOffset,L=d.bottom+p,u=document.documentElement.scrollHeight-L;se(u>i?i:u)}if(a.current){const d=a.current.clientHeight,i=window.innerHeight;ae(d+i)}},600);(0,t.useEffect)(()=>(k(),window.addEventListener("resize",k),()=>{window.removeEventListener("resize",k)}),[]),(0,t.useEffect)(()=>{function d(){if(!v.current||f!=="fade-in")return;const i=v.current?.clientHeight||80;x.current=new ee.SplitText(v.current,{type:"words",wordsClass:"word"});const p=x.current.words;w.gsap.set(p,{opacity:0}),H.current=te.ScrollTrigger.create({trigger:a.current,start:"top center-=10%",end:`top+=${i*1.5+80}px center-=10%`,scrub:!0,onUpdate:L=>{const N=L.progress,u=p.length,ce=1/u,O=.5;p.forEach((de,pe)=>{const ue=pe/u*(1-O),me=ce*(1+O);let R=(N-ue)/me;R=Math.max(0,Math.min(R,1)),w.gsap.set(de,{opacity:R})}),w.gsap.set(Y.current,{opacity:N})}})}return y&&d(),()=>{x.current&&x.current.revert(),H.current&&H.current.kill()}},[f,y]),(0,A.useExposure)(q,{componentType:He,componentName:we,componentTitle:T});const M="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return(0,e.jsxs)(e.Fragment,{children:[c&&(0,e.jsx)("div",{ref:a,className:(0,m.cn)("relative z-10",M,{"aiui-dark":S==="dark","rounded-box":B==="rounded"},o),children:(0,e.jsx)("div",{ref:ie,children:!f&&(0,e.jsxs)("div",{className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[b&&!C&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),T&&C&&(0,e.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),I&&(0,e.jsx)(W.default,{variant:"link",className:(0,m.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{j(!0),r&&r?.()},children:I})]})})}),(0,e.jsxs)("div",{style:c?{marginBottom:`-${D}px`,marginTop:`-${le}px`}:{},className:"relative",children:[(0,e.jsx)("div",{className:"sticky top-0 ",children:(0,e.jsxs)("div",{id:n,className:(0,m.cn)("relative overflow-hidden",c?"h-screen w-full":M,{"aiui-dark":S==="dark","rounded-box":B==="rounded"}),children:[f==="fade-in"&&b&&(0,e.jsx)("div",{ref:v,className:"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),(0,e.jsxs)("div",{className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,e.jsx)(z.default,{videoRef:g,poster:$?.url||"",src:P?.url,className:"tablet:block hidden size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)(z.default,{videoRef:g,poster:$?.url||"",src:oe?.url||P?.url,className:"tablet:hidden block size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,autoplay:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,e.jsx)("div",{ref:Y,className:"absolute left-0 top-0 z-10 size-full opacity-0",style:{background:"rgba(0, 0, 0, 0.2)"}})]})]})}),(0,e.jsx)("div",{className:(0,m.cn)(c&&"relative box-content block",M),style:c?{height:`${D}px`}:{},ref:q})]}),F&&_&&(0,e.jsx)(X.VideoModal,{visible:F,youTubeId:_,onCloseModal:()=>j(!1)})]})});var ke=(0,Q.withLayout)(Te);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaPlayerBase/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover left-0 top-0 h-screen w-screen\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
5
- "mappings": "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",
6
- "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "aspect", "Button", "ScrollLoadVideo"]
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { gsap } from 'gsap'\nimport { SplitText } from 'gsap/dist/SplitText'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n (\n {\n className = '',\n id,\n onBtnClick,\n data: { title, videoTitle, btnText, youtubeId, video, mobileVideo, theme, img, shape, titleAnimation, ...rest },\n },\n ref\n ) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n const [visible, setVisible] = useState<boolean>(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const titleFadeInRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n const splitTextInstance = useRef<SplitText | null>(null)\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n if (!titleFadeInRef.current || titleAnimation !== 'fade-in') return\n const height = titleFadeInRef.current?.clientHeight || 80\n splitTextInstance.current = new SplitText(titleFadeInRef.current, {\n type: 'words',\n wordsClass: 'word',\n })\n const words = splitTextInstance.current.words\n gsap.set(words, { opacity: 0 })\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: titleRef.current,\n start: 'top center-=10%',\n end: `top+=${height * 1.5 + 80}px center-=10%`,\n scrub: true,\n onUpdate: (self: any) => {\n const progress = self.progress\n const total = words.length\n const interval = 1 / total\n const overlap = 0.5\n words.forEach((word: any, i: number) => {\n const start = (i / total) * (1 - overlap)\n const width = interval * (1 + overlap)\n let opacity = (progress - start) / width\n opacity = Math.max(0, Math.min(opacity, 1))\n gsap.set(word, { opacity })\n })\n gsap.set(bgRef.current, { opacity: progress })\n },\n })\n }\n\n if (inView) gsapResize()\n\n return () => {\n splitTextInstance.current && splitTextInstance.current.revert()\n // ScrollTrigger.getAll().forEach((t: { kill: () => any }) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n }\n }, [titleAnimation, inView])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div\n ref={titleRef}\n className={cn(\n 'relative z-10',\n aspect,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n },\n className\n )}\n >\n <div ref={inViewRef}>\n {!titleAnimation && (\n <div className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\">\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n setVisible(true)\n // if (isPlaying) {\n // if (videoRef.current) {\n // videoRef.current.pause()\n // }\n // setIsPlaying(false)\n // } else {\n // if (videoRef.current) {\n // videoRef.current.play()\n // }\n // setIsPlaying(true)\n // }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n id={id}\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n {titleAnimation === 'fade-in' && title_html && (\n <div\n ref={titleFadeInRef}\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n <div className=\"media-cover left-0 top-0 h-screen w-screen\">\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={video?.url!}\n className=\"tablet:block hidden size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={img?.url || ''}\n src={mobileVideo?.url || video?.url!}\n className=\"tablet:hidden block size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n autoplay\n webkit-playsinline\n x5-playsinline\n />\n <div\n ref={bgRef}\n className=\"absolute left-0 top-0 z-10 size-full opacity-0\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n {visible && youtubeId && (\n <VideoModal visible={visible} youTubeId={youtubeId} onCloseModal={() => setVisible(false)} />\n )}\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerBase)\n"],
5
+ "mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IAwJM,IAAAI,EAAA,6BAvJNC,EAA6E,iBAC7EC,EAAyB,kBACzBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAmB,yCACnBC,EAA2B,kCAC3BC,EAAqC,6CAGrCC,EAA0B,uCAE1BC,EAA4B,sCAC5BC,EAA4B,+CAC5BC,EAAqB,gBACrBC,GAA0B,+BAC1BC,GAA8B,mCAE9B,MAAMC,GAAgB,oBAChBC,GAAgB,QAEhBC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAEjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,MAAkB,cACtB,CACE,CACE,UAAAC,EAAY,GACZ,GAAAC,EACA,WAAAC,EACA,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,YAAAC,GAAa,MAAAC,EAAO,IAAAC,EAAK,MAAAC,EAAO,eAAAC,EAAgB,GAAGC,EAAK,CAChH,EACAC,KACG,CACH,KAAM,CAAE,OAAAC,CAAO,EAAIF,GACb,CAACG,EAAWC,CAAY,KAAI,YAAS,EAAK,EAC1C,CAACC,EAAKC,EAAM,KAAI,YAAS,CAAC,EAC1B,CAACC,GAAaC,EAAc,KAAI,YAAS,CAAC,EAC1C,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAE/CC,KAAW,UAAyB,IAAI,EACxCC,KAAQ,UAAyB,IAAI,EACrCC,KAAW,UAAuB,IAAI,EACtCC,KAAiB,UAAuB,IAAI,EAC5CC,KAAW,UAAuB,IAAI,EACtCC,KAAoB,UAAyB,IAAI,EACjDC,KAAmB,UAA6B,IAAI,EACpD,CAAE,IAAKC,GAAW,OAAAC,CAAO,KAAI,aAAU,KAE7C,uBAAoBlB,GAAK,IAAMY,EAAS,OAAyB,EAEjE,MAAMO,EACJ,OAAO9B,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,EAAO,WAAYR,CAAe,CAAC,EACzGuC,EACJ,OAAO9B,GAAe,SAClBA,EACAA,MAAc,wBAAqB,CAAE,KAAMA,EAAY,WAAYT,CAAe,CAAC,KAEzF,aAAU,IAAM,CACVqC,GACFR,EAAS,SAAS,KAAK,EACvBP,EAAa,EAAI,IAEjBO,EAAS,SAAS,MAAM,EACxBP,EAAa,EAAK,EAEtB,EAAG,CAACe,CAAM,CAAC,EAEX,MAAMG,KAAwB,YAAS,IAAM,CAC3C,GAAIT,EAAS,QAAS,CACpB,MAAMU,EAAOV,EAAS,QAAQ,sBAAsB,EAC9CW,EAAe,OAAO,YACtBC,EAAY,OAAO,SAAW,OAAO,YACrCC,EAAyBH,EAAK,OAASE,EAEvCE,EADa,SAAS,gBAAgB,aACFD,EAC1CpB,GAAOqB,EAAuBH,EAAeA,EAAeG,CAAoB,CAClF,CACA,GAAId,EAAS,QAAS,CACpB,MAAMN,EAAcM,EAAS,QAAQ,aAC/BW,EAAe,OAAO,YAC5BhB,GAAeD,EAAciB,CAAY,CAC3C,CACF,EAAG,GAAG,KAEN,aAAU,KACRF,EAAsB,EACtB,OAAO,iBAAiB,SAAUA,CAAqB,EAChD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAqB,CAC5D,GACC,CAAC,CAAC,KAEL,aAAU,IAAM,CACd,SAASM,GAAa,CACpB,GAAI,CAACd,EAAe,SAAWf,IAAmB,UAAW,OAC7D,MAAM8B,EAASf,EAAe,SAAS,cAAgB,GACvDE,EAAkB,QAAU,IAAI,aAAUF,EAAe,QAAS,CAChE,KAAM,QACN,WAAY,MACd,CAAC,EACD,MAAMgB,EAAQd,EAAkB,QAAQ,MACxC,OAAK,IAAIc,EAAO,CAAE,QAAS,CAAE,CAAC,EAC9Bb,EAAiB,QAAU,iBAAc,OAAO,CAC9C,QAASJ,EAAS,QAClB,MAAO,kBACP,IAAK,QAAQgB,EAAS,IAAM,EAAE,iBAC9B,MAAO,GACP,SAAWE,GAAc,CACvB,MAAMC,EAAWD,EAAK,SAChBE,EAAQH,EAAM,OACdI,GAAW,EAAID,EACfE,EAAU,GAChBL,EAAM,QAAQ,CAACM,GAAWC,KAAc,CACtC,MAAMC,GAASD,GAAIJ,GAAU,EAAIE,GAC3BI,GAAQL,IAAY,EAAIC,GAC9B,IAAIK,GAAWR,EAAWM,IAASC,GACnCC,EAAU,KAAK,IAAI,EAAG,KAAK,IAAIA,EAAS,CAAC,CAAC,EAC1C,OAAK,IAAIJ,GAAM,CAAE,QAAAI,CAAQ,CAAC,CAC5B,CAAC,EACD,OAAK,IAAI5B,EAAM,QAAS,CAAE,QAASoB,CAAS,CAAC,CAC/C,CACF,CAAC,CACH,CAEA,OAAIb,GAAQS,EAAW,EAEhB,IAAM,CACXZ,EAAkB,SAAWA,EAAkB,QAAQ,OAAO,EAE9DC,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,CAC5D,CACF,EAAG,CAAClB,EAAgBoB,CAAM,CAAC,KAE3B,eAAYJ,EAAU,CACpB,cAAAlC,GACA,cAAAD,GACA,eAAgByC,CAClB,CAAC,EAED,MAAMoB,EACJ,6NACF,SACE,oBACG,UAAAvC,MACC,OAAC,OACC,IAAKW,EACL,aAAW,MACT,gBACA4B,EACA,CACE,YAAa7C,IAAU,OACvB,cAAeE,IAAU,SAC3B,EACAX,CACF,EAEA,mBAAC,OAAI,IAAK+B,GACP,UAACnB,MACA,QAAC,OAAI,UAAU,yGACZ,UAAAqB,GAAc,CAACjB,MACd,OAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQiB,CAAW,EAChD,EAEDC,GAAmBlB,MAClB,OAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQkB,CAAgB,EACrD,EAED7B,MACC,OAAC,EAAAkD,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,4DAA4D,EAC1E,QAAS,IAAM,CACbhC,EAAW,EAAI,EAYfrB,GAAcA,IAAa,CAC7B,EAEC,SAAAG,EAEH,GAEJ,EAEJ,EACF,KAEF,QAAC,OAAI,MAAOU,EAAS,CAAE,aAAc,IAAIG,CAAG,KAAM,UAAW,IAAIE,EAAW,IAAK,EAAI,CAAC,EAAG,UAAU,WACjG,oBAAC,OAAI,UAAU,gBACb,oBAAC,OACC,GAAInB,EACJ,aAAW,MAAG,2BAA4Bc,EAAS,kBAAoBuC,EAAQ,CAC7E,YAAa7C,IAAU,OACvB,cAAeE,IAAU,SAC3B,CAAC,EAEA,UAAAC,IAAmB,WAAaqB,MAC/B,OAAC,OACC,IAAKN,EACL,UAAU,wLACV,wBAAyB,CAAE,OAAQM,CAAW,EAChD,KAEF,QAAC,OAAI,UAAU,6CACb,oBAAC,EAAAuB,QAAA,CACC,SAAUhC,EACV,OAAQd,GAAK,KAAO,GACpB,IAAKH,GAAO,IACZ,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,EAAAiD,QAAA,CACC,SAAUhC,EACV,OAAQd,GAAK,KAAO,GACpB,IAAKF,IAAa,KAAOD,GAAO,IAChC,UAAU,gCACV,eAAe,eACf,MAAK,GACL,KAAI,GACJ,YAAW,GACX,SAAQ,GACR,qBAAkB,GAClB,iBAAc,GAChB,KACA,OAAC,OACC,IAAKkB,EACL,UAAU,iDACV,MAAO,CACL,WAAY,oBACd,EACF,GACF,GACF,EACF,KACA,OAAC,OACC,aAAW,MAAGV,GAAU,6BAA8BuC,CAAM,EAC5D,MAAOvC,EAAS,CAAE,OAAQ,GAAGG,CAAG,IAAK,EAAI,CAAC,EAC1C,IAAKU,EACP,GACF,EACCN,GAAWhB,MACV,OAAC,cAAW,QAASgB,EAAS,UAAWhB,EAAW,aAAc,IAAMiB,EAAW,EAAK,EAAG,GAE/F,CAEJ,CACF,EAEA,IAAO9C,MAAQ,cAAWsB,EAAe",
6
+ "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_VideoModal", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "import_gsap", "import_SplitText", "import_ScrollTrigger", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "id", "onBtnClick", "title", "videoTitle", "btnText", "youtubeId", "video", "mobileVideo", "theme", "img", "shape", "titleAnimation", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "visible", "setVisible", "videoRef", "bgRef", "titleRef", "titleFadeInRef", "trackRef", "splitTextInstance", "scrollTriggerRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "words", "self", "progress", "total", "interval", "overlap", "word", "i", "start", "width", "opacity", "aspect", "Button", "ScrollLoadVideo"]
7
7
  }
package/dist/cjs/biz-components/MediaPlayerMulti/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var U=Object.create;var p=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},h=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of j(t))!E.call(e,i)&&i!==o&&p(e,i,{get:()=>t[i],enumerable:!(a=_(t,i))||a.enumerable});return e};var b=(e,t,o)=>(o=e!=null?U(q(e)):{},h(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>h(p({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>A});module.exports=D(F);var l=require("react/jsx-runtime"),s=require("react"),g=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),r=require("../../components/index.js"),y=b(require("../Title/index.js")),k=b(require("../SwiperBox/index.js")),M=require("../../components/container.js"),P=require("../VideoModal/index.js"),N=require("@payloadcms/richtext-lexical/html"),I=require("../../hooks/useExposure.js"),L=require("../../shared/trackUrlRef.js");const m="video",f="media_player_multi",Y=({data:e,configuration:t})=>(0,l.jsxs)("div",{className:(0,g.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",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(r.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.index||0,e)},className:"laptop:size-14 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.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 gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(r.Link,{href:(0,L.trackUrlRef)(e?.href,`${m}_${f}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]","data-headless-type-name":`${m}#${f}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:e.quote})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] 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:e.description})]})]}),Z=(0,s.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:i="",key:T,onVideoPlayBtnClick:V},B)=>{const[c,u]=(0,s.useState)(!1),[C,$]=(0,s.useState)(""),[z,R]=(0,s.useState)(""),n=typeof o=="string"?o:o&&(0,N.convertLexicalToHTML)({data:o}),x=(0,s.useRef)(null);(0,I.useExposure)(x,{componentType:m,componentName:f,componentTitle:n});const v=e.length===2;return(0,l.jsxs)("div",{className:i,ref:x,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(M.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:i,ref:B,children:[o&&(0,l.jsx)(y.default,{className:"mediaplayermulti-title",data:{title:n||""}}),(0,l.jsx)(k.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+T,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:(S,d)=>{u(!0),d?.isYouTube?R?.(d?.youtubeId||""):$?.(d?.video?.url||""),V?.(S)},title:n}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:v?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:v?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),c&&(0,l.jsx)(P.VideoModal,{visible:c,youTubeId:z,videoUrl:C,onCloseModal:()=>u(!1)})]})});var A=(0,w.withLayout)(Z);
1
+ "use strict";"use client";var U=Object.create;var p=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},v=(e,t,o,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of j(t))!E.call(e,i)&&i!==o&&p(e,i,{get:()=>t[i],enumerable:!(a=_(t,i))||a.enumerable});return e};var b=(e,t,o)=>(o=e!=null?U(q(e)):{},v(t||!e||!e.__esModule?p(o,"default",{value:e,enumerable:!0}):o,e)),D=e=>v(p({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>A});module.exports=D(F);var l=require("react/jsx-runtime"),s=require("react"),g=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),r=require("../../components/index.js"),y=b(require("../Title/index.js")),k=b(require("../SwiperBox/index.js")),M=require("../../components/container.js"),P=require("../VideoModal/index.js"),N=require("@payloadcms/richtext-lexical/html"),I=require("../../hooks/useExposure.js"),L=require("../../shared/trackUrlRef.js");const m="video",f="media_player_multi",Y=({data:e,configuration:t})=>(0,l.jsxs)("div",{className:(0,g.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",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(r.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(r.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:(e?.video?.url||e?.youtubeId)&&(0,l.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(t?.index||0,e)},className:"laptop:size-14 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.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 gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(r.Link,{asChild:!e?.href,href:(0,L.trackUrlRef)(e?.href,`${m}_${f}`),className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]","data-headless-type-name":`${m}#${f}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:e.quote})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] 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:e.description})]})]}),Z=(0,s.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:a},className:i="",key:T,onVideoPlayBtnClick:V},B)=>{const[c,u]=(0,s.useState)(!1),[C,$]=(0,s.useState)(""),[z,R]=(0,s.useState)(""),n=typeof o=="string"?o:o&&(0,N.convertLexicalToHTML)({data:o}),x=(0,s.useRef)(null);(0,I.useExposure)(x,{componentType:m,componentName:f,componentTitle:n});const h=e.length===2;return(0,l.jsxs)("div",{className:i,ref:x,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(M.Container,{...a||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:i,ref:B,children:[o&&(0,l.jsx)(y.default,{className:"mediaplayermulti-title",data:{title:n||""}}),(0,l.jsx)(k.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+T,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:(S,d)=>{u(!0),d?.isYouTube?R?.(d?.youtubeId||""):$?.(d?.video?.url||""),V?.(S)},title:n}},Slide:Y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:h?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),c&&(0,l.jsx)(P.VideoModal,{visible:c,youTubeId:z,videoUrl:C,onCloseModal:()=>u(!1)})]})});var A=(0,w.withLayout)(Z);
2
2
  //# sourceMappingURL=index.js.map