@anker-in/headless-ui 1.2.3 → 1.2.5

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 (30) hide show
  1. package/dist/cjs/biz-components/Graphic/index.d.ts +2 -0
  2. package/dist/cjs/biz-components/Graphic/index.js +1 -1
  3. package/dist/cjs/biz-components/Graphic/index.js.map +3 -3
  4. package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
  5. package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
  6. package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
  7. package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js.map +3 -3
  8. package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.js +1 -1
  9. package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.js.map +3 -3
  10. package/dist/cjs/biz-components/Listing/components/PurchaseBar/types.d.ts +2 -0
  11. package/dist/cjs/biz-components/Listing/components/PurchaseBar/types.js +1 -1
  12. package/dist/cjs/biz-components/Listing/components/PurchaseBar/types.js.map +1 -1
  13. package/dist/cjs/components/button.d.ts +4 -0
  14. package/dist/cjs/components/button.js +1 -1
  15. package/dist/cjs/components/button.js.map +3 -3
  16. package/dist/esm/biz-components/Graphic/index.d.ts +2 -0
  17. package/dist/esm/biz-components/Graphic/index.js +1 -1
  18. package/dist/esm/biz-components/Graphic/index.js.map +2 -2
  19. package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
  20. package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
  21. package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
  22. package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js.map +2 -2
  23. package/dist/esm/biz-components/Listing/components/PurchaseBar/index.js +1 -1
  24. package/dist/esm/biz-components/Listing/components/PurchaseBar/index.js.map +3 -3
  25. package/dist/esm/biz-components/Listing/components/PurchaseBar/types.d.ts +2 -0
  26. package/dist/esm/components/button.d.ts +4 -0
  27. package/dist/esm/components/button.js +1 -1
  28. package/dist/esm/components/button.js.map +3 -3
  29. package/package.json +1 -1
  30. package/style.css +6 -0
package/dist/cjs/biz-components/Graphic/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js';
3
+ import 'swiper/css';
3
4
  type GraphicType = {
4
5
  imgUrl: Img;
5
6
  title: string;
@@ -28,6 +29,7 @@ type GraphicType = {
28
29
  textPcImg: Img;
29
30
  textMobileImg: Img;
30
31
  };
32
+ showBottomGradient?: boolean;
31
33
  };
32
34
  export interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {
33
35
  data: {
package/dist/cjs/biz-components/Graphic/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var q=Object.create;var v=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(e,o)=>{for(var s in o)v(e,s,{get:o[s],enumerable:!0})},N=(e,o,s,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of X(o))!F.call(e,i)&&i!==s&&v(e,i,{get:()=>o[i],enumerable:!(n=Q(o,i))||n.enumerable});return e};var y=(e,o,s)=>(s=e!=null?q(Z(e)):{},N(o||!e||!e.__esModule?v(s,"default",{value:e,enumerable:!0}):s,e)),K=e=>N(v({},"__esModule",{value:!0}),e);var ee={};J(ee,{default:()=>W});module.exports=K(ee);var t=require("react/jsx-runtime"),P=require("react-responsive"),l=y(require("react")),S=require("react-dom"),a=require("../../helpers/utils.js"),G=require("../../shared/Styles.js"),D=y(require("../SwiperBox/index.js")),p=require("../../components/index.js"),L=y(require("../Title/index.js")),B=require("../VideoModal/index.js"),U=require("../TextModal/index.js"),T=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js"),z=require("../AiuiProvider/index.js");const d="image",h="graphic",$=e=>{let o="";const s=u=>(u?.url&&(o=u.url),o),n=s(e.lgDesktop),i=s(e.desktop),m=s(e.laptop),f=s(e.tablet),b=e.default?.url;return[`${n} 9999`,`${i} 1919`,`${m} 1439`,`${f} 1024`,`${b} 768`].join(", ")},C="descTitle 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]",O=({data:e,configuration:o})=>{const s=(0,l.useRef)(null),[n,i]=(0,l.useState)({visible:!1,x:0,y:0,text:""}),m=()=>{switch(o.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[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]"}},f=r=>{e?.description&&i({visible:!0,x:r.clientX,y:r.clientY,text:e.description})},b=()=>{i(r=>({...r,visible:!1}))};(0,T.useExposure)(s,{componentType:d,componentName:h,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const u=e?.href?"a":"div",k=e?.href?{href:(0,w.trackUrlRef)(e.href,`${d}_${h}`)}:{};return(0,t.jsx)("div",{ref:s,className:(0,a.cn)(m(),"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,a.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":o?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?(0,t.jsxs)("a",{"aria-label":e?.title||e?.description,href:(0,w.trackUrlRef)(e?.href||"",`${d}_${h}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${d}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?$(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""}),(0,t.jsx)("span",{className:"sr-only",children:e?.title||e?.description})]}):(0,t.jsx)("div",{className:"rounded-card block size-full overflow-hidden",children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?$(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),(0,t.jsxs)(u,{...k,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,a.cn)("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(p.Text,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsxs)("div",{onMouseMove:f,onMouseLeave:b,children:[e?.title?(0,t.jsx)(p.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:`${C} graphic-description`}):(0,t.jsx)("h3",{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${C} graphic-description-item`}),typeof window<"u"&&n.visible&&(0,S.createPortal)((0,t.jsx)("div",{className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${n.x+16}px`,top:`${n.y+16}px`},children:n.text}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:r=>{r.preventDefault(),r.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/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:r=>{r.preventDefault(),r.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75",children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(p.Button,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:(0,w.trackUrlRef)((0,a.getLocalizedPath)(e?.href||"",o?.locale||"us"),`${d}_${h}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${d}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},V=l.default.forwardRef(({data:e,className:o,...s},n)=>{const i=(0,P.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,l.useRef)(null),[f,b]=(0,l.useState)(!1),[u,k]=(0,l.useState)(""),[r,E]=(0,l.useState)(""),[H,R]=(0,l.useState)(""),[j,I]=(0,l.useState)(null),[_,M]=(0,l.useState)(!1),{locale:Y="us"}=(0,z.useAiuiContext)(),g=x=>{const c=e?.items?.length>3,A=e?.items?.length>2;switch(x){case 1440:return c?4:e?.items?.length;case 1024:return c?3:e?.items?.length;case 768:return e?.items?.length===1?1:c||A?2.3:2;default:return e?.items?.length===1?1:1.2}};return(0,l.useImperativeHandle)(n,()=>m.current),(0,T.useExposure)(m,{componentType:d,componentName:h,componentTitle:e?.title}),(0,t.jsxs)("div",{...s,ref:m,className:(0,a.cn)("graphicBlock",o),children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(L.default,{data:{title:e?.title}}),(0,t.jsx)(D.default,{id:"Graphic",className:(0,a.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:Y,onVideoPlayBtnClick:(x,c)=>{b(!0),c?.isYouTube?E?.(c?.youtubeId||""):(k?.(c?.video?.url||""),R?.(c?.mobileVideo?.url||""))},onIconClick:x=>{M(!0),I(x)},title:e?.title}},Slide:O,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:g()},768:{spaceBetween:16,freeMode:!1,slidesPerView:g(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:g(1440)}}})]}),(0,t.jsx)(B.VideoModal,{visible:f,youTubeId:r,onCloseModal:()=>b(!1),videoUrl:i&&H||u}),(0,t.jsx)(U.TextModal,{textVisible:_,extension:j?.extension,onCloseModal:()=>{M(!1),I(null)}})]})});V.displayName="Graphic";var W=(0,G.withLayout)(V);
1
+ "use strict";"use client";var q=Object.create;var v=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(e,o)=>{for(var s in o)v(e,s,{get:o[s],enumerable:!0})},N=(e,o,s,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of X(o))!F.call(e,i)&&i!==s&&v(e,i,{get:()=>o[i],enumerable:!(n=Q(o,i))||n.enumerable});return e};var y=(e,o,s)=>(s=e!=null?q(Z(e)):{},N(o||!e||!e.__esModule?v(s,"default",{value:e,enumerable:!0}):s,e)),K=e=>N(v({},"__esModule",{value:!0}),e);var ee={};J(ee,{default:()=>W});module.exports=K(ee);var t=require("react/jsx-runtime"),P=require("react-responsive"),l=y(require("react")),S=require("react-dom"),c=require("../../helpers/utils.js"),G=require("../../shared/Styles.js"),B=y(require("../SwiperBox/index.js")),p=require("../../components/index.js"),D=y(require("../Title/index.js")),L=require("../VideoModal/index.js"),U=require("../TextModal/index.js"),T=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js"),z=require("../AiuiProvider/index.js"),se=require("swiper/css");const d="image",h="graphic",$=e=>{let o="";const s=u=>(u?.url&&(o=u.url),o),n=s(e.lgDesktop),i=s(e.desktop),m=s(e.laptop),f=s(e.tablet),b=e.default?.url;return[`${n} 9999`,`${i} 1919`,`${m} 1439`,`${f} 1024`,`${b} 768`].join(", ")},C="descTitle 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]",O=({data:e,configuration:o})=>{const s=(0,l.useRef)(null),[n,i]=(0,l.useState)({visible:!1,x:0,y:0,text:""}),m=()=>{switch(o.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[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]"}},f=r=>{e?.description&&i({visible:!0,x:r.clientX,y:r.clientY,text:e.description})},b=()=>{i(r=>({...r,visible:!1}))};(0,T.useExposure)(s,{componentType:d,componentName:h,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const u=e?.href?"a":"div",k=e?.href?{href:(0,w.trackUrlRef)(e.href,`${d}_${h}`)}:{};return(0,t.jsx)("div",{ref:s,className:(0,c.cn)(m(),"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":o?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?(0,t.jsxs)("a",{"aria-label":e?.title||e?.description,href:(0,w.trackUrlRef)(e?.href||"",`${d}_${h}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${d}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?$(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""}),(0,t.jsx)("span",{className:"sr-only",children:e?.title||e?.description})]}):(0,t.jsx)("div",{className:"rounded-card block size-full overflow-hidden",children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?$(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),(0,t.jsxs)(u,{...k,className:(0,c.cn)("laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",{"bg-gradient-to-b from-transparent to-black/80":e?.showBottomGradient&&e?.theme==="dark","bg-gradient-to-b from-transparent to-white/80":e?.showBottomGradient&&e?.theme!=="dark"}),children:[(0,t.jsxs)("div",{className:(0,c.cn)("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(p.Text,{html:e?.title,style:{color:e?.textColor},className:"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsxs)("div",{onMouseMove:f,onMouseLeave:b,children:[e?.title?(0,t.jsx)(p.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:`${C} graphic-description`}):(0,t.jsx)("h3",{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${C} graphic-description-item`}),typeof window<"u"&&n.visible&&(0,S.createPortal)((0,t.jsx)("div",{className:"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200",style:{left:`${n.x+16}px`,top:`${n.y+16}px`},children:n.text}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:r=>{r.preventDefault(),r.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white/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:r=>{r.preventDefault(),r.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center overflow-hidden rounded-full bg-white/20 hover:bg-black/75",children:(0,t.jsx)(p.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(p.Button,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:(0,w.trackUrlRef)((0,c.getLocalizedPath)(e?.href||"",o?.locale||"us"),`${d}_${h}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${d}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},V=l.default.forwardRef(({data:e,className:o,...s},n)=>{const i=(0,P.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,l.useRef)(null),[f,b]=(0,l.useState)(!1),[u,k]=(0,l.useState)(""),[r,E]=(0,l.useState)(""),[H,R]=(0,l.useState)(""),[j,I]=(0,l.useState)(null),[_,M]=(0,l.useState)(!1),{locale:Y="us"}=(0,z.useAiuiContext)(),g=x=>{const a=e?.items?.length>3,A=e?.items?.length>2;switch(x){case 1440:return a?4:e?.items?.length;case 1024:return a?3:e?.items?.length;case 768:return e?.items?.length===1?1:a||A?2.3:2;default:return e?.items?.length===1?1:1.2}};return(0,l.useImperativeHandle)(n,()=>m.current),(0,T.useExposure)(m,{componentType:d,componentName:h,componentTitle:e?.title}),(0,t.jsxs)("div",{...s,ref:m,className:(0,c.cn)("graphicBlock",o),children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(D.default,{data:{title:e?.title}}),(0,t.jsx)(B.default,{id:"Graphic",className:(0,c.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:Y,onVideoPlayBtnClick:(x,a)=>{b(!0),a?.isYouTube?E?.(a?.youtubeId||""):(k?.(a?.video?.url||""),R?.(a?.mobileVideo?.url||""))},onIconClick:x=>{M(!0),I(x)},title:e?.title}},Slide:O,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:g()},768:{spaceBetween:16,freeMode:!1,slidesPerView:g(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:g(1440)}}})]}),(0,t.jsx)(L.VideoModal,{visible:f,youTubeId:r,onCloseModal:()=>b(!1),videoUrl:i&&H||u}),(0,t.jsx)(U.TextModal,{textVisible:_,extension:j?.extension,onCloseModal:()=>{M(!1),I(null)}})]})});V.displayName="Graphic";var W=(0,G.withLayout)(V);
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 { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } 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 { useAiuiContext } from '../AiuiProvider/index.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 backgroundImage?: {\n default?: Img\n tablet?: Img\n laptop?: Img\n desktop?: Img\n lgDesktop?: Img\n }\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n}\n\n/**\n * \u5C06 backgroundImage \u5404\u5C3A\u5BF8\u5B57\u6BB5\u62FC\u63A5\u6210 Picture source \u5B57\u7B26\u4E32\u683C\u5F0F\n *\n * Picture \u5185\u90E8\u5339\u914D\u89C4\u5219\uFF1A\u5BF9\u6BCF\u4E2A deviceSize\uFF0C\u8FC7\u6EE4 breakpoint >= deviceSize \u7684\u6761\u76EE\uFF0C\u53D6\u6700\u540E\u4E00\u4E2A (.pop())\u3002\n * \u56E0\u6B64 source \u5B57\u7B26\u4E32\u5185\u65AD\u70B9\u5FC5\u987B\u300C\u7531\u5927\u5230\u5C0F\u300D\u6392\u5217\uFF0C\u624D\u80FD\u8BA9 .pop() \u5339\u914D\u5230\u6700\u63A5\u8FD1\u81EA\u8EAB\u7684\u65AD\u70B9\u3002\n *\n * \u65AD\u70B9\u5BF9\u5E94\u5173\u7CFB (max-width):\n * lgDesktop \u2192 1919px (\u22641920px, \u5145\u5F53\u6700\u5927\u5C4F\u5C4F\u5E55\u5339\u914D\u5C42)\n * desktop \u2192 1439px (1440px - 1919px)\n * laptop \u2192 1024px (1025px - 1439px)\n * tablet \u2192 767px (768px - 1024px)\n * default \u2192 \u9996\u4F4D\u65E0\u65AD\u70B9\uFF0C\u5145\u5F53 <img src> (\u79FB\u52A8\u7AEF <768px \u5C4F\u5E55)\n *\n * \u7EE7\u627F\u89C4\u5219\uFF08\u5927 \u2192 \u5C0F\uFF09\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u81EA\u52A8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\uFF0C\u6700\u7EC8 fallback \u5230 default\n */\nconst buildPictureSource = (bg: NonNullable<GraphicType['backgroundImage']>): string => {\n // \u7531\u5927\u5230\u5C0F\u7EE7\u627F\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\n let last = ''\n const resolve = (img?: Img) => {\n if (img?.url) last = img.url\n return last\n }\n const lgDesktopSrc = resolve(bg.lgDesktop)\n const desktopSrc = resolve(bg.desktop)\n const laptopSrc = resolve(bg.laptop)\n const tabletSrc = resolve(bg.tablet)\n // default \u65E0\u65AD\u70B9\uFF0C\u4F5C\u4E3A\u9996\u4F4D\u5145\u5F53 <img src>(\u79FB\u52A8\u7AEF\u5C4F\u5E55)\n const defaultSrc = bg.default?.url\n return [\n `${lgDesktopSrc} 9999`, // \u22641920px\n `${desktopSrc} 1919`, // 1440-1919px\n `${laptopSrc} 1439`, // 1025-1439px\n `${tabletSrc} 1024`, // 768-1024px\n `${defaultSrc} 768`, // \u9996\u4F4D\u65E0\u65AD\u70B9 \u2192 <img src>(<768px)\n ].join(', ')\n}\nconst descriptionClass =\n 'descTitle 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]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\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 [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n visible: false,\n x: 0,\n y: 0,\n text: '',\n })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n const handleMouseMove = (e: React.MouseEvent) => {\n if (data?.description) {\n setTooltip({\n visible: true,\n x: e.clientX,\n y: e.clientY,\n text: data.description,\n })\n }\n }\n\n const handleMouseLeave = () => {\n setTooltip(prev => ({ ...prev, visible: false }))\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 const Container: React.ElementType = data?.href ? 'a' : 'div'\n const containerProps = data?.href ? { href: trackUrlRef(data.href, `${componentType}_${componentName}`) } : {}\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\n className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n >\n {data?.href ? (\n <a\n aria-label={data?.title || data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"rounded-card block size-full 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?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url}\n alt={\n data?.backgroundImage?.lgDesktop?.alt ||\n data?.backgroundImage?.default?.alt ||\n data?.imgUrl?.alt ||\n ''\n }\n />\n <span className=\"sr-only\">{data?.title || data?.description}</span>\n </a>\n ) : (\n <div className=\"rounded-card block size-full overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={\n data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url || ''\n }\n alt={\n data?.backgroundImage?.lgDesktop?.alt ||\n data?.backgroundImage?.default?.alt ||\n data?.imgUrl?.alt ||\n ''\n }\n />\n </div>\n )}\n <Container\n {...containerProps}\n className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\"\n >\n <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n {data?.title ? (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className={`${descriptionClass} graphic-description`}\n />\n ) : (\n <h3\n style={{\n color: data?.textColor,\n }}\n dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n className={`${descriptionClass} graphic-description-item`}\n />\n )}\n {typeof window !== 'undefined' &&\n tooltip.visible &&\n createPortal(\n <div\n className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n style={{\n left: `${tooltip.x + 16}px`,\n top: `${tooltip.y + 16}px`,\n }}\n >\n {tooltip.text}\n </div>,\n document.body\n )}\n </div>\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/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 overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\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=\"bgButton mt-[8px] self-start\"\n href={trackUrlRef(\n getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-nav-position={`''#${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 </Container>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, 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 const { locale = 'us' } = useAiuiContext()\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 if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\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 return (\n <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\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 locale,\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": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,IAAA,eAAAC,EAAAH,IAqKY,IAAAI,EAAA,6BApKZC,EAA8B,4BAC9BC,EAAwE,oBACxEC,EAA6B,qBAC7BC,EAAqC,kCACrCC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAA+C,qCAC/CC,EAAkB,gCAClBC,EAA2B,kCAC3BC,EAA0B,iCAE1BC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAA+B,oCAE/B,MAAMC,EAAgB,QAChBC,EAAgB,UA+ChBC,EAAsBC,GAA4D,CAEtF,IAAIC,EAAO,GACX,MAAMC,EAAWC,IACXA,GAAK,MAAKF,EAAOE,EAAI,KAClBF,GAEHG,EAAeF,EAAQF,EAAG,SAAS,EACnCK,EAAaH,EAAQF,EAAG,OAAO,EAC/BM,EAAYJ,EAAQF,EAAG,MAAM,EAC7BO,EAAYL,EAAQF,EAAG,MAAM,EAE7BQ,EAAaR,EAAG,SAAS,IAC/B,MAAO,CACL,GAAGI,CAAY,QACf,GAAGC,CAAU,QACb,GAAGC,CAAS,QACZ,GAAGC,CAAS,QACZ,GAAGC,CAAU,MACf,EAAE,KAAK,IAAI,CACb,EACMC,EACJ,8IAUIC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,KAAM,UAAuB,IAAI,EACjC,CAACC,EAASC,CAAU,KAAI,YAAmE,CAC/F,QAAS,GACT,EAAG,EACH,EAAG,EACH,KAAM,EACR,CAAC,EAEKC,EAAe,IAAM,CACzB,OAAQJ,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,EAEMK,EAAmBC,GAAwB,CAC3CP,GAAM,aACRI,EAAW,CACT,QAAS,GACT,EAAGG,EAAE,QACL,EAAGA,EAAE,QACL,KAAMP,EAAK,WACb,CAAC,CAEL,EAEMQ,EAAmB,IAAM,CAC7BJ,EAAWK,IAAS,CAAE,GAAGA,EAAM,QAAS,EAAM,EAAE,CAClD,KAEA,eAAYP,EAAK,CACf,cAAAhB,EACA,cAAAC,EACA,eAAgBa,GAAM,MACtB,qBAAsBA,GAAM,YAC5B,SAAUC,GAAe,MAAQ,CACnC,CAAC,EAED,MAAMS,EAA+BV,GAAM,KAAO,IAAM,MAClDW,EAAiBX,GAAM,KAAO,CAAE,QAAM,eAAYA,EAAK,KAAM,GAAGd,CAAa,IAAIC,CAAa,EAAE,CAAE,EAAI,CAAC,EAE7G,SACE,OAAC,OACC,IAAKe,EACL,aAAW,MACTG,EAAa,EACb,cACA,uFACA,CACE,YAAaL,EAAK,QAAU,MAC9B,CACF,EAEA,mBAAC,OACC,aAAW,MAAG,mBAAoB,CAC/B,gDAAkDC,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,OACC,UAAW,6DAA6DD,GAAM,KAAO,iBAAmB,EAAE,GAEzG,UAAAA,GAAM,QACL,QAAC,KACC,aAAYA,GAAM,OAASA,GAAM,YACjC,QAAM,eAAYA,GAAM,MAAQ,GAAI,GAAGd,CAAa,IAAIC,CAAa,EAAE,EACvE,UAAU,+CACV,4BAA2B,MAAMc,GAAe,MAAQ,CAAC,GACzD,0BAAyB,GAAGf,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGa,GAAM,KAAK,IAAIA,GAAM,WAAW,GAEpE,oBAAC,WACC,UAAU,SACV,aAAa,yEACb,OAAQA,GAAM,iBAAiB,QAAUZ,EAAmBY,EAAK,eAAe,EAAIA,GAAM,QAAQ,IAClG,IACEA,GAAM,iBAAiB,WAAW,KAClCA,GAAM,iBAAiB,SAAS,KAChCA,GAAM,QAAQ,KACd,GAEJ,KACA,OAAC,QAAK,UAAU,UAAW,SAAAA,GAAM,OAASA,GAAM,YAAY,GAC9D,KAEA,OAAC,OAAI,UAAU,+CACb,mBAAC,WACC,UAAU,SACV,aAAa,yEACb,OACEA,GAAM,iBAAiB,QAAUZ,EAAmBY,EAAK,eAAe,EAAIA,GAAM,QAAQ,KAAO,GAEnG,IACEA,GAAM,iBAAiB,WAAW,KAClCA,GAAM,iBAAiB,SAAS,KAChCA,GAAM,QAAQ,KACd,GAEJ,EACF,KAEF,QAACU,EAAA,CACE,GAAGC,EACJ,UAAU,yEAEV,qBAAC,OAAI,aAAW,MAAG,uCAAwC,gBAAgB,EACzE,qBAAC,OAAI,UAAU,yBACb,oBAAC,QACC,KAAMX,GAAM,MACZ,MAAO,CAAE,MAAOA,GAAM,SAAU,EAChC,UAAU,4GACZ,EACCA,GAAM,gBACL,QAAC,OAAI,YAAaM,EAAiB,aAAcE,EAC9C,UAAAR,GAAM,SACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAW,GAAGF,CAAgB,uBAChC,KAEA,OAAC,MACC,MAAO,CACL,MAAOE,GAAM,SACf,EACA,wBAAyB,CAAE,OAAQA,GAAM,aAAe,EAAG,EAC3D,UAAW,GAAGF,CAAgB,4BAChC,EAED,OAAO,OAAW,KACjBK,EAAQ,YACR,mBACE,OAAC,OACC,UAAU,6JACV,MAAO,CACL,KAAM,GAAGA,EAAQ,EAAI,EAAE,KACvB,IAAK,GAAGA,EAAQ,EAAI,EAAE,IACxB,EAEC,SAAAA,EAAQ,KACX,EACA,SAAS,IACX,GACJ,GAEJ,EACC,CAACH,GAAM,aAAeA,GAAM,OAAO,KAAOA,GAAM,eAC/C,OAAC,UACC,aAAW,aACX,QAAUO,GAAW,CACnBA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBN,GAAe,sBAAsBA,GAAe,OAAS,EAAGD,CAAI,CACtE,EACA,UAAU,oGAEV,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEDA,GAAM,YAAcA,GAAM,MAAM,QAC/B,OAAC,UACC,QAAUO,GAAW,CACnBA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EAClBN,GAAe,cAAcD,EAAMC,CAAa,CAClD,EACA,UAAU,mHAEV,mBAAC,WACC,UAAU,SACV,aAAa,sBACb,OAAQD,GAAM,MAAM,IACpB,IAAKA,GAAM,MAAM,KAAO,GAC1B,EACF,GAEJ,EACCA,EAAK,eACJ,OAAC,UACC,GAAG,IACH,aAAYA,GAAM,OAASA,GAAM,YACjC,QAAQ,YACR,UAAU,+BACV,QAAM,kBACJ,oBAAiBA,GAAM,MAAQ,GAAIC,GAAe,QAAU,IAAI,EAChE,GAAGf,CAAa,IAAIC,CAAa,EACnC,EACA,6BAA4B,MAAMc,GAAe,MAAQ,CAAC,GAC1D,0BAAyB,GAAGf,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGa,GAAM,KAAK,IAAIA,GAAM,WAAW,IAAIA,GAAM,UAAU,GAEvF,SAAAA,EAAK,WACR,GAEJ,GACF,EACF,EACF,CAEJ,EAEMY,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAb,EAAM,UAAAc,EAAW,GAAGC,CAAK,EAAGb,IAAQ,CACpG,MAAMc,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAW,UAAuB,IAAI,EACtC,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAC/C,CAACC,EAAUC,CAAW,KAAI,YAAiB,EAAE,EAC7C,CAACC,EAAWC,CAAY,KAAI,YAAiB,EAAE,EAC/C,CAACC,EAAgBC,CAAiB,KAAI,YAAiB,EAAE,EACzD,CAACC,EAAaC,CAAc,KAAI,YAA6B,IAAI,EACjE,CAACC,EAAaC,CAAc,KAAI,YAAkB,EAAK,EACvD,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAEnCC,EAAoBC,GAAmB,CAC3C,MAAMC,EAAUjC,GAAM,OAAyB,OAAS,EAClDgB,EAAYhB,GAAM,OAAyB,OAAS,EAC1D,OAAQgC,EAAO,CACb,IAAK,MACH,OAAOC,EAAS,EAAIjC,GAAM,OAAO,OACnC,IAAK,MACH,OAAOiC,EAAS,EAAIjC,GAAM,OAAO,OACnC,IAAK,KACH,OAAKA,GAAM,OAAyB,SAAW,EAAU,EAClDiC,GAAejB,EAAN,IAAuB,EACzC,QACE,OAAKhB,GAAM,OAAyB,SAAW,EAAU,EAClD,GACX,CACF,EAEA,gCAAoBE,EAAK,IAAMe,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAA/B,EACA,cAAAC,EACA,eAAgBa,GAAM,KACxB,CAAC,KAGC,QAAC,OAAK,GAAGe,EAAM,IAAKE,EAAU,aAAW,MAAG,eAAgBH,CAAS,EACnE,qBAAC,OAAI,UAAU,cACZ,UAAAd,GAAM,UAAS,OAAC,EAAAkC,QAAA,CAAM,KAAM,CAAE,MAAOlC,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAmC,QAAA,CACC,GAAG,UACH,aAAW,MAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMnC,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,EAC5B,OAAA8B,EACA,oBAAqB,CAACM,EAAWpC,IAAsB,CACrDmB,EAAW,EAAI,EACXnB,GAAM,UACRuB,IAAevB,GAAM,WAAa,EAAE,GAEpCqB,IAAcrB,GAAM,OAAO,KAAO,EAAE,EACpCyB,IAAoBzB,GAAM,aAAa,KAAO,EAAE,EAEpD,EACA,YAAcA,GAAsB,CAClC6B,EAAe,EAAI,EACnBF,EAAe3B,CAAI,CACrB,EACA,MAAOA,GAAM,KACf,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAegC,EAAiB,CAClC,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,GAAG,CACrC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,CACF,EACF,GACF,KACA,OAAC,cACC,QAASb,EACT,UAAWI,EACX,aAAc,IAAMH,EAAW,EAAK,EACpC,SAAUH,GAAWQ,GAAkBJ,EACzC,KACA,OAAC,aACC,YAAaQ,EACb,UAAWF,GAAa,UACxB,aAAc,IAAM,CAClBG,EAAe,EAAK,EACpBF,EAAe,IAAI,CACrB,EACF,GACF,CAEJ,CAAC,EAEDf,EAAQ,YAAc,UAEtB,IAAO1C,KAAQ,cAAW0C,CAAO",
6
- "names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_react_dom", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "buildPictureSource", "bg", "last", "resolve", "img", "lgDesktopSrc", "desktopSrc", "laptopSrc", "tabletSrc", "defaultSrc", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Container", "containerProps", "Graphic", "React", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "Title", "SwiperBox", "_"]
4
+ "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport { cn, getLocalizedPath } 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 { useAiuiContext } from '../AiuiProvider/index.js'\nimport 'swiper/css'\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 backgroundImage?: {\n default?: Img\n tablet?: Img\n laptop?: Img\n desktop?: Img\n lgDesktop?: Img\n }\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n showBottomGradient?: boolean\n}\n\n/**\n * \u5C06 backgroundImage \u5404\u5C3A\u5BF8\u5B57\u6BB5\u62FC\u63A5\u6210 Picture source \u5B57\u7B26\u4E32\u683C\u5F0F\n *\n * Picture \u5185\u90E8\u5339\u914D\u89C4\u5219\uFF1A\u5BF9\u6BCF\u4E2A deviceSize\uFF0C\u8FC7\u6EE4 breakpoint >= deviceSize \u7684\u6761\u76EE\uFF0C\u53D6\u6700\u540E\u4E00\u4E2A (.pop())\u3002\n * \u56E0\u6B64 source \u5B57\u7B26\u4E32\u5185\u65AD\u70B9\u5FC5\u987B\u300C\u7531\u5927\u5230\u5C0F\u300D\u6392\u5217\uFF0C\u624D\u80FD\u8BA9 .pop() \u5339\u914D\u5230\u6700\u63A5\u8FD1\u81EA\u8EAB\u7684\u65AD\u70B9\u3002\n *\n * \u65AD\u70B9\u5BF9\u5E94\u5173\u7CFB (max-width):\n * lgDesktop \u2192 1919px (\u22641920px, \u5145\u5F53\u6700\u5927\u5C4F\u5C4F\u5E55\u5339\u914D\u5C42)\n * desktop \u2192 1439px (1440px - 1919px)\n * laptop \u2192 1024px (1025px - 1439px)\n * tablet \u2192 767px (768px - 1024px)\n * default \u2192 \u9996\u4F4D\u65E0\u65AD\u70B9\uFF0C\u5145\u5F53 <img src> (\u79FB\u52A8\u7AEF <768px \u5C4F\u5E55)\n *\n * \u7EE7\u627F\u89C4\u5219\uFF08\u5927 \u2192 \u5C0F\uFF09\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u81EA\u52A8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\uFF0C\u6700\u7EC8 fallback \u5230 default\n */\nconst buildPictureSource = (bg: NonNullable<GraphicType['backgroundImage']>): string => {\n // \u7531\u5927\u5230\u5C0F\u7EE7\u627F\uFF1A\u672A\u914D\u7F6E\u7684\u5C3A\u5BF8\u7EE7\u627F\u4E0A\u4E00\u5C3A\u5BF8\n let last = ''\n const resolve = (img?: Img) => {\n if (img?.url) last = img.url\n return last\n }\n const lgDesktopSrc = resolve(bg.lgDesktop)\n const desktopSrc = resolve(bg.desktop)\n const laptopSrc = resolve(bg.laptop)\n const tabletSrc = resolve(bg.tablet)\n // default \u65E0\u65AD\u70B9\uFF0C\u4F5C\u4E3A\u9996\u4F4D\u5145\u5F53 <img src>(\u79FB\u52A8\u7AEF\u5C4F\u5E55)\n const defaultSrc = bg.default?.url\n return [\n `${lgDesktopSrc} 9999`, // \u22641920px\n `${desktopSrc} 1919`, // 1440-1919px\n `${laptopSrc} 1439`, // 1025-1439px\n `${tabletSrc} 1024`, // 768-1024px\n `${defaultSrc} 768`, // \u9996\u4F4D\u65E0\u65AD\u70B9 \u2192 <img src>(<768px)\n ].join(', ')\n}\nconst descriptionClass =\n 'descTitle 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]'\nexport interface GraphicProps extends ComponentCommonProps, React.HTMLAttributes<HTMLDivElement> {\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 [tooltip, setTooltip] = useState<{ visible: boolean; x: number; y: number; text: string }>({\n visible: false,\n x: 0,\n y: 0,\n text: '',\n })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n const handleMouseMove = (e: React.MouseEvent) => {\n if (data?.description) {\n setTooltip({\n visible: true,\n x: e.clientX,\n y: e.clientY,\n text: data.description,\n })\n }\n }\n\n const handleMouseLeave = () => {\n setTooltip(prev => ({ ...prev, visible: false }))\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 const Container: React.ElementType = data?.href ? 'a' : 'div'\n const containerProps = data?.href ? { href: trackUrlRef(data.href, `${componentType}_${componentName}`) } : {}\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\n className={`graphic-children relative block size-full overflow-hidden ${data?.href ? 'cursor-pointer' : ''}`}\n >\n {data?.href ? (\n <a\n aria-label={data?.title || data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"rounded-card block size-full 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?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url}\n alt={\n data?.backgroundImage?.lgDesktop?.alt ||\n data?.backgroundImage?.default?.alt ||\n data?.imgUrl?.alt ||\n ''\n }\n />\n <span className=\"sr-only\">{data?.title || data?.description}</span>\n </a>\n ) : (\n <div className=\"rounded-card block size-full overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={\n data?.backgroundImage?.default ? buildPictureSource(data.backgroundImage) : data?.imgUrl?.url || ''\n }\n alt={\n data?.backgroundImage?.lgDesktop?.alt ||\n data?.backgroundImage?.default?.alt ||\n data?.imgUrl?.alt ||\n ''\n }\n />\n </div>\n )}\n <Container\n {...containerProps}\n className={cn('laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4', {\n 'bg-gradient-to-b from-transparent to-black/80': data?.showBottomGradient && data?.theme === 'dark',\n 'bg-gradient-to-b from-transparent to-white/80': data?.showBottomGradient && data?.theme !== 'dark',\n })}\n >\n <div className={cn('flex items-end gap-1 overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n className=\"spanTitle graphic-title lg-desktop:text-lg desktop:text-base line-clamp-3 text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <div onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>\n {data?.title ? (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className={`${descriptionClass} graphic-description`}\n />\n ) : (\n <h3\n style={{\n color: data?.textColor,\n }}\n dangerouslySetInnerHTML={{ __html: data?.description || '' }}\n className={`${descriptionClass} graphic-description-item`}\n />\n )}\n {typeof window !== 'undefined' &&\n tooltip.visible &&\n createPortal(\n <div\n className=\"pointer-events-none fixed z-[9999] max-w-xs rounded-lg bg-black/60 px-3 py-2 text-sm text-white shadow-lg backdrop-blur-sm transition-opacity duration-200\"\n style={{\n left: `${tooltip.x + 16}px`,\n top: `${tooltip.y + 16}px`,\n }}\n >\n {tooltip.text}\n </div>,\n document.body\n )}\n </div>\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/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 overflow-hidden rounded-full bg-white/20 hover:bg-black/75\"\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=\"bgButton mt-[8px] self-start\"\n href={trackUrlRef(\n getLocalizedPath(data?.href || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-nav-position={`''#${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 </Container>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...rest }, 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 const { locale = 'us' } = useAiuiContext()\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 if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\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 return (\n <div {...rest} ref={innerRef} className={cn('graphicBlock', className)}>\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 locale,\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_react_dom", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "import_css", "componentType", "componentName", "buildPictureSource", "bg", "last", "resolve", "img", "lgDesktopSrc", "desktopSrc", "laptopSrc", "tabletSrc", "defaultSrc", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Container", "containerProps", "Graphic", "React", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "Title", "SwiperBox", "_"]
7
7
  }
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var Ne=Object.create;var T=Object.defineProperty;var Ve=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var Ce=(t,n)=>{for(var r in n)T(t,r,{get:n[r],enumerable:!0})},te=(t,n,r,x)=>{if(n&&typeof n=="object"||typeof n=="function")for(let d of He(n))!ze.call(t,d)&&d!==r&&T(t,d,{get:()=>n[d],enumerable:!(x=Ve(n,d))||x.enumerable});return t};var B=(t,n,r)=>(r=t!=null?Ne(Te(t)):{},te(n||!t||!t.__esModule?T(r,"default",{value:t,enumerable:!0}):r,t)),Ie=t=>te(T({},"__esModule",{value:!0}),t);var Ee={};Ce(Ee,{default:()=>De});module.exports=Ie(Ee);var e=require("react/jsx-runtime"),s=B(require("react")),$=B(require("gsap")),N=require("gsap/dist/ScrollTrigger"),D=B(require("jump.js")),E=require("react-responsive"),re=require("react-intersection-observer"),oe=B(require("../../helpers/ScrollLoadVideo.js")),i=require("../../components/index.js"),u=require("../../helpers/index.js"),V=require("class-variance-authority"),ne=require("../../shared/Styles.js"),le=require("../../hooks/useExposure.js"),z=require("../../shared/trackUrlRef.js"),se=require("../../helpers/utils.js"),ie=require("../AiuiProvider/index.js"),pe=require("../../components/button.js"),ue=require("../VideoModal/index.js"),ce=B(require("./HeroBannerCarousel.js"));const f="image",g="hero_banner",Pe=(0,V.cva)("hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]",center:"tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center"}},defaultVariants:{align:"left"}}),Le=(0,V.cva)("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),Se=(0,V.cva)("hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Re=(0,V.cva)("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Me=({size:t="base"})=>{const{width:n,height:r}=pe.sizeMap[t];return(0,e.jsx)("svg",{width:n,height:r,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"})})},ae=s.default.forwardRef(({data:t,className:n,classNames:r={},onSecondaryClick:x,onPrimaryClick:d,jumpOptions:me={},...j},O)=>{const{locale:U}=(0,ie.useAiuiContext)(),G={...{duration:500,offset:0},...me},C=a=>!a||!U?a:(0,se.getLocalizedPath)(a,U),{label:J,title:p,subtitle:l,endDate:_,endDate_tz:de,dateFormat:fe,pcImage:h,padImage:q,mobileImage:H,pcVideo:ge,padVideo:be,mobileVideo:F,isShowVideo:xe,isVideoLoop:he=!0,primaryButton:c,secondaryButton:o,theme:ye="light",size:I="default",titleSize:P,caption:L=[],blockLink:A,iconArray:ve,align:y="left",enableParallax:W=!0}=t,Y=(0,E.useMediaQuery)({query:"(max-width: 768px)"}),Q=(0,E.useMediaQuery)({query:"(max-width: 1024px)"}),[Z,K]=(0,s.useState)(!1),{ref:ke,inView:X}=(0,re.useInView)(),S=(0,s.useRef)(null),R=(0,s.useRef)(null),M=(0,s.useRef)(null),v=(0,s.useRef)(null),b=(0,s.useRef)(null),we=p?.trim()||l?.trim()||h?.alt?.trim()||void 0,Be=p!==void 0?p?.trim()||l?.trim()||h?.alt?.trim()||void 0:l&&l.trim()||"",$e=l&&l.trim()||"";return(0,le.useExposure)(b,{componentType:f,componentName:g,componentTitle:Be,componentDescription:$e}),(0,s.useImperativeHandle)(O,()=>b.current),(0,s.useEffect)(()=>{if(t.items&&t.items.length>0||!W)return;$.default.registerPlugin(N.ScrollTrigger);function a(){if(!v.current)return;const m=b.current?.clientHeight||100;window.innerHeight<=m?S.current=N.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:k=>{const w=k.progress*40-20;$.default.set(v.current,{yPercent:w})}}):(M.current=N.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:k=>{const w=k.progress*20-20;$.default.set(v.current,{yPercent:w})}}),R.current=N.ScrollTrigger.create({trigger:b.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:k=>{const w=k.progress*20;$.default.set(v.current,{yPercent:w})}}))}return X&&a(),()=>{S.current&&S.current.kill(),M.current&&M.current.kill(),R.current&&R.current.kill()}},[X,t.items,W]),t.items&&t.items.length>0?(0,e.jsx)(ce.default,{data:t,className:n,classNames:r,onPrimaryClick:d,onSecondaryClick:x,ref:O,...j}):(0,e.jsx)("div",{...j,ref:ke,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:b,className:(0,u.cn)(ye==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":I==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":I==="sm"},n),children:[A&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,z.trackUrlRef)(C(A),`${f}_${g}`),"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${p}#${l}`,tabIndex:-1,"aria-hidden":"true","aria-label":we}),(0,e.jsx)("div",{ref:v,className:(0,u.cn)("absolute left-0 top-0 size-full"),children:xe?(0,e.jsx)(oe.default,{poster:Y?H?.url:Q?q?.url||H?.url:h?.url,src:Y?F?.url:Q?be?.url||F?.url:ge?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:he,playsInline:!0}):(0,e.jsx)(i.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:h?.alt||"",source:`${h?.url||""} , ${q?.url??(H?.url||"")} 1024, ${H?.url||""} 767`})}),(0,e.jsxs)("div",{className:Pe({align:y}),children:[(0,e.jsxs)("div",{className:Le({align:y}),children:[J&&(0,e.jsx)(i.Text,{size:2,as:"p",className:(0,u.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:J}),p&&(0,e.jsx)(i.Heading,{as:P==="4"?"h1":"h2",html:p,className:(0,u.cn)("hero-banner-title",r.title),size:P?Number(P||"5"):I==="sm"?4:5}),l&&(0,e.jsx)(i.Text,{as:"p",size:2,className:(0,u.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",r.subtitle),html:l}),_&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(i.Countdown,{endDate:_,endDate_tz:de,dateFormat:fe,variant:"spacious",align:y})})]}),(0,e.jsxs)("div",{className:(0,u.cn)(Se({align:y}),r.buttonGroup),children:[o?.isShowPlayVideoButton&&o?.playVideoButtonText?(0,e.jsxs)(i.Button,{onClick:()=>K(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${p}#${l}#${o?.playVideoButtonText}`,children:[o?.playVideoButtonText," ",(0,e.jsx)(Me,{size:"lg"})]}):o?.text?(0,e.jsxs)(i.Button,{"aria-label":p??l,size:"lg",variant:"secondary",className:(0,u.cn)("hero-banner-secondary-button",r.secondaryButton),as:o?.isCustomSecondaryButton?"button":"a",href:(0,z.trackUrlRef)(C(o?.link),`${f}_${g}`),onClick:a=>{if(o.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(o.link);m&&(0,D.default)(m,G)}o?.isCustomSecondaryButton&&x?.(t,a,o?.customSecondaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${p}#${l}#${o?.text}`,children:[o?.text,(0,e.jsx)("span",{className:"sr-only",children:p??l})]}):null,c&&c.text&&(0,e.jsx)(i.Button,{"aria-label":p??l,size:"lg",variant:"primary",className:(0,u.cn)("hero-banner-primary-button",r.primaryButton),as:c?.isCustomPrimaryButton?"button":"a",href:(0,z.trackUrlRef)(C(c.link),`${f}_${g}`),onClick:a=>{if(c.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(c.link);m&&(0,D.default)(m,G)}c?.isCustomPrimaryButton&&d?.(t,a,c?.customPrimaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${p}#${l}#${c?.text}`,children:c.text})]}),(0,e.jsx)("div",{className:Re({align:y}),children:ve?.map(a=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(i.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:a?.pcImage?.alt||"",source:a?.pcImage?.url})},a?.pcImage?.url||a?.pcImage?.alt))})]}),L.length>0&&(0,e.jsx)("div",{className:(0,u.cn)("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]",r.captionGroup),children:L.map((a,m)=>(0,e.jsxs)(s.default.Fragment,{children:[(0,e.jsx)(i.Text,{size:2,className:(0,u.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:a.title}),m<L.length-1&&(0,e.jsx)("div",{className:(0,u.cn)("bg-info-primary w-px")})]},a.title))}),Z&&(0,e.jsx)(ue.VideoModal,{visible:Z,videoUrl:o?.isYoutubeVideo?void 0:o?.videoUrl?.url,youTubeId:o?.isYoutubeVideo?o?.youtubeId:void 0,onCloseModal:()=>K(!1)})]})})});ae.displayName="HeroBanner";var De=(0,ne.withLayout)(ae);
1
+ "use strict";"use client";var Ne=Object.create;var T=Object.defineProperty;var Ve=Object.getOwnPropertyDescriptor;var He=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,ze=Object.prototype.hasOwnProperty;var Ce=(t,n)=>{for(var o in n)T(t,o,{get:n[o],enumerable:!0})},te=(t,n,o,x)=>{if(n&&typeof n=="object"||typeof n=="function")for(let d of He(n))!ze.call(t,d)&&d!==o&&T(t,d,{get:()=>n[d],enumerable:!(x=Ve(n,d))||x.enumerable});return t};var B=(t,n,o)=>(o=t!=null?Ne(Te(t)):{},te(n||!t||!t.__esModule?T(o,"default",{value:t,enumerable:!0}):o,t)),Ie=t=>te(T({},"__esModule",{value:!0}),t);var Ee={};Ce(Ee,{default:()=>De});module.exports=Ie(Ee);var e=require("react/jsx-runtime"),s=B(require("react")),$=B(require("gsap")),N=require("gsap/dist/ScrollTrigger"),D=B(require("jump.js")),E=require("react-responsive"),ae=require("react-intersection-observer"),oe=B(require("../../helpers/ScrollLoadVideo.js")),i=require("../../components/index.js"),c=require("../../helpers/index.js"),V=require("class-variance-authority"),ne=require("../../shared/Styles.js"),le=require("../../hooks/useExposure.js"),z=require("../../shared/trackUrlRef.js"),se=require("../../helpers/utils.js"),ie=require("../AiuiProvider/index.js"),pe=require("../../components/button.js"),ue=require("../VideoModal/index.js"),ce=B(require("./HeroBannerCarousel.js"));const f="image",g="hero_banner",Pe=(0,V.cva)("hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]",center:"tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center"}},defaultVariants:{align:"left"}}),Le=(0,V.cva)("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),Se=(0,V.cva)("hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Re=(0,V.cva)("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Me=({size:t="base"})=>{const{width:n,height:o}=pe.sizeMap[t];return(0,e.jsx)("svg",{width:n,height:o,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"})})},re=s.default.forwardRef(({data:t,className:n,classNames:o={},onSecondaryClick:x,onPrimaryClick:d,jumpOptions:me={},...j},_)=>{const{locale:O}=(0,ie.useAiuiContext)(),U={...{duration:500,offset:0},...me},C=a=>!a||!O?a:(0,se.getLocalizedPath)(a,O),{label:G,title:u,subtitle:l,endDate:J,endDate_tz:de,dateFormat:fe,pcImage:h,padImage:q,mobileImage:H,pcVideo:ge,padVideo:be,mobileVideo:F,isShowVideo:xe,isVideoLoop:he=!0,primaryButton:p,secondaryButton:r,theme:ye="light",size:I="default",titleSize:P,caption:L=[],blockLink:A,iconArray:ve,align:y="left",enableParallax:W=!0}=t,Y=(0,E.useMediaQuery)({query:"(max-width: 768px)"}),Q=(0,E.useMediaQuery)({query:"(max-width: 1024px)"}),[Z,K]=(0,s.useState)(!1),{ref:ke,inView:X}=(0,ae.useInView)(),S=(0,s.useRef)(null),R=(0,s.useRef)(null),M=(0,s.useRef)(null),v=(0,s.useRef)(null),b=(0,s.useRef)(null),we=u?.trim()||l?.trim()||h?.alt?.trim()||void 0,Be=u!==void 0?u?.trim()||l?.trim()||h?.alt?.trim()||void 0:l&&l.trim()||"",$e=l&&l.trim()||"";return(0,le.useExposure)(b,{componentType:f,componentName:g,componentTitle:Be,componentDescription:$e}),(0,s.useImperativeHandle)(_,()=>b.current),(0,s.useEffect)(()=>{if(t.items&&t.items.length>0||!W)return;$.default.registerPlugin(N.ScrollTrigger);function a(){if(!v.current)return;const m=b.current?.clientHeight||100;window.innerHeight<=m?S.current=N.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:k=>{const w=k.progress*40-20;$.default.set(v.current,{yPercent:w})}}):(M.current=N.ScrollTrigger.create({trigger:b.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:k=>{const w=k.progress*20-20;$.default.set(v.current,{yPercent:w})}}),R.current=N.ScrollTrigger.create({trigger:b.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:k=>{const w=k.progress*20;$.default.set(v.current,{yPercent:w})}}))}return X&&a(),()=>{S.current&&S.current.kill(),M.current&&M.current.kill(),R.current&&R.current.kill()}},[X,t.items,W]),t.items&&t.items.length>0?(0,e.jsx)(ce.default,{data:t,className:n,classNames:o,onPrimaryClick:d,onSecondaryClick:x,ref:_,...j}):(0,e.jsx)("div",{...j,ref:ke,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:b,className:(0,c.cn)(ye==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":I==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":I==="sm"},n),children:[A&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,z.trackUrlRef)(C(A),`${f}_${g}`),"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${u}#${l}`,tabIndex:-1,"aria-hidden":"true","aria-label":we}),(0,e.jsx)("div",{ref:v,className:(0,c.cn)("absolute left-0 top-0 size-full"),children:xe?(0,e.jsx)(oe.default,{poster:Y?H?.url:Q?q?.url||H?.url:h?.url,src:Y?F?.url:Q?be?.url||F?.url:ge?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:he,playsInline:!0}):(0,e.jsx)(i.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:h?.alt||"",source:`${h?.url||""} , ${q?.url??(H?.url||"")} 1024, ${H?.url||""} 767`})}),(0,e.jsxs)("div",{className:Pe({align:y}),children:[(0,e.jsxs)("div",{className:Le({align:y}),children:[G&&(0,e.jsx)(i.Text,{size:2,as:"p",className:(0,c.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:G}),u&&(0,e.jsx)(i.Heading,{as:P==="4"?"h1":"h2",html:u,className:(0,c.cn)("hero-banner-title",o.title),size:P?Number(P||"5"):I==="sm"?4:5}),l&&(0,e.jsx)(i.Text,{as:"p",size:2,className:(0,c.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",o.subtitle),html:l}),J&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(i.Countdown,{endDate:J,endDate_tz:de,dateFormat:fe,variant:"spacious",align:y})})]}),(0,e.jsxs)("div",{className:(0,c.cn)(Se({align:y}),o.buttonGroup),children:[r?.isShowPlayVideoButton&&r?.playVideoButtonText?(0,e.jsxs)(i.Button,{onClick:()=>K(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${u}#${l}#${r?.playVideoButtonText}`,children:[r?.playVideoButtonText," ",(0,e.jsx)(Me,{size:"lg"})]}):r?.text?(0,e.jsxs)(i.Button,{"aria-label":u??l,size:"lg",variant:"secondary",className:(0,c.cn)("hero-banner-secondary-button",o.secondaryButton),as:r?.isCustomSecondaryButton?"button":"a",href:(0,z.trackUrlRef)(C(r?.link),`${f}_${g}`),target:r?.target,rel:r?.target==="_blank"?r?.rel??"noopener noreferrer":r?.rel,onClick:a=>{if(r.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(r.link);m&&(0,D.default)(m,U)}r?.isCustomSecondaryButton&&x?.(t,a,r?.customSecondaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${u}#${l}#${r?.text}`,children:[r?.text,(0,e.jsx)("span",{className:"sr-only",children:u??l})]}):null,p&&p.text&&(0,e.jsx)(i.Button,{"aria-label":u??l,size:"lg",variant:"primary",className:(0,c.cn)("hero-banner-primary-button",o.primaryButton),as:p?.isCustomPrimaryButton?"button":"a",href:(0,z.trackUrlRef)(C(p.link),`${f}_${g}`),target:p?.target,rel:p?.target==="_blank"?p?.rel??"noopener noreferrer":p?.rel,onClick:a=>{if(p.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(p.link);m&&(0,D.default)(m,U)}p?.isCustomPrimaryButton&&d?.(t,a,p?.customPrimaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${u}#${l}#${p?.text}`,children:p.text})]}),(0,e.jsx)("div",{className:Re({align:y}),children:ve?.map(a=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(i.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:a?.pcImage?.alt||"",source:a?.pcImage?.url})},a?.pcImage?.url||a?.pcImage?.alt))})]}),L.length>0&&(0,e.jsx)("div",{className:(0,c.cn)("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]",o.captionGroup),children:L.map((a,m)=>(0,e.jsxs)(s.default.Fragment,{children:[(0,e.jsx)(i.Text,{size:2,className:(0,c.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:a.title}),m<L.length-1&&(0,e.jsx)("div",{className:(0,c.cn)("bg-info-primary w-px")})]},a.title))}),Z&&(0,e.jsx)(ue.VideoModal,{visible:Z,videoUrl:r?.isYoutubeVideo?void 0:r?.videoUrl?.url,youTubeId:r?.isYoutubeVideo?r?.youtubeId:void 0,onCloseModal:()=>K(!1)})]})})});re.displayName="HeroBanner";var De=(0,ne.withLayout)(re);
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 jump from 'jump.js'\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, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n// Task 18: import carousel implementation for early-return delegation (DECISION-A002)\nimport HeroBannerCarousel from './HeroBannerCarousel.js'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n 'hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n {\n variants: {\n align: {\n left: 'tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]',\n center:\n 'tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst textVariants = cva(\n 'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n {\n variants: {\n align: {\n left: 'laptop:text-left',\n center: 'text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n variants: {\n align: {\n left: 'laptop:justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n variants: {\n align: {\n left: 'justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\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<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick, jumpOptions = {}, ...rest }, ref) => {\n const { locale } = useAiuiContext()\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u5305\u88C5\u94FE\u63A5\uFF0C\u81EA\u52A8\u6DFB\u52A0 locale \u524D\u7F00\n const localizeUrl = (url?: string) => {\n if (!url || !locale) return url\n return getLocalizedPath(url, locale)\n }\n\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n isVideoLoop = true,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n align = 'left',\n enableParallax = true,\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 // Task 7: Compute accessibility / tracking fallback values (Rule 2/3/4 \u2014 DECISION-T3)\n // blockLink aria-label: title \u2192 subtitle \u2192 pcImage.alt \u2192 undefined (absent attr)\n const blockLinkLabel = title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n // componentTitle: title=undefined \u2192 coerce '' via subtitle only (no pcImage.alt for undefined title);\n // title='' (intentional) \u2192 cascade: subtitle \u2192 pcImage.alt \u2192 undefined\n const resolvedComponentTitle =\n title !== undefined\n ? title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n : (subtitle && subtitle.trim()) || ''\n // componentDescription: subtitle with undefined guard\n const resolvedComponentDescription = (subtitle && subtitle.trim()) || ''\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: resolvedComponentTitle,\n componentDescription: resolvedComponentDescription,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n // Task 18: GSAP bypass \u2014 skip ALL GSAP setup in carousel mode (DECISION-A002/DECISION-009)\n if (data.items && data.items.length > 0) return\n if (!enableParallax) return\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, data.items, enableParallax])\n\n // Task 18: Carousel mode early return (DECISION-A002 / DECISION-011)\n // All hooks above have already run. Delegate entirely to HeroBannerCarousel\n // when data.items is non-empty; GSAP was already bypassed in the useEffect above.\n if (data.items && data.items.length > 0) {\n return (\n <HeroBannerCarousel\n data={data}\n className={className}\n classNames={classNames}\n onPrimaryClick={onPrimaryClick}\n onSecondaryClick={onSecondaryClick}\n ref={ref as React.Ref<HTMLDivElement>}\n {...rest}\n />\n )\n }\n return (\n <div {...rest} ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(localizeUrl(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={blockLinkLabel}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.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={isVideoLoop}\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={contentVariants({ align })}>\n <div className={textVariants({ align })}>\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\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 classNames.subtitle\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n align={align}\n />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn(buttonGroupVariants({ align }), classNames.buttonGroup)}>\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={cn('hero-banner-secondary-button', classNames.secondaryButton)}\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(secondaryButton?.link), `${componentType}_${componentName}`)}\n onClick={e => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }}\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={cn('hero-banner-primary-button', classNames.primaryButton)}\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(primaryButton.link), `${componentType}_${componentName}`)}\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }}\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 className={iconGroupVariants({ align })}>\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n '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 classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\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?.isYoutubeVideo ? undefined : secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.isYoutubeVideo ? secondaryButton?.youtubeId : undefined}\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 jump from 'jump.js'\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, Countdown } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { cva } from 'class-variance-authority'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getLocalizedPath } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n// Task 18: import carousel implementation for early-return delegation (DECISION-A002)\nimport HeroBannerCarousel from './HeroBannerCarousel.js'\n\n/**\n * jump.js \u914D\u7F6E\u9009\u9879\n */\nexport interface JumpOptions {\n /** \u52A8\u753B\u6301\u7EED\u65F6\u95F4\uFF08\u6BEB\u79D2\uFF09 @default 500 */\n duration?: number\n /** \u504F\u79FB\u91CF\uFF08\u50CF\u7D20\uFF09 @default 0 */\n offset?: number\n /** \u52A8\u753B\u5B8C\u6210\u56DE\u8C03 */\n callback?: () => void\n /** \u7F13\u52A8\u51FD\u6570 */\n easing?: (t: number, b: number, c: number, d: number) => number\n /** \u662F\u5426\u8003\u8651 a11y @default false */\n a11y?: boolean\n}\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\n// CVA variants for align\nconst contentVariants = cva(\n 'hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n {\n variants: {\n align: {\n left: 'tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]',\n center:\n 'tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst textVariants = cva(\n 'hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]',\n {\n variants: {\n align: {\n left: 'laptop:text-left',\n center: 'text-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n }\n)\n\nconst buttonGroupVariants = cva('hero-banner-button-group lg-desktop:gap-3 flex items-center gap-2', {\n variants: {\n align: {\n left: 'laptop:justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nconst iconGroupVariants = cva('hero-banner-icon-group flex items-center gap-2', {\n variants: {\n align: {\n left: 'justify-start',\n center: 'justify-center',\n },\n },\n defaultVariants: {\n align: 'left',\n },\n})\n\nexport type HeroBannerSemanticName =\n | 'root'\n | 'title'\n | 'subtitle'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n | 'captionGroup'\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<\n HTMLDivElement,\n HeroBannerProps & {\n classNames?: Partial<Record<HeroBannerSemanticName, string>>\n /**\n * \u951A\u70B9\u8DF3\u8F6C\u914D\u7F6E\uFF08\u7528\u4E8E # \u5F00\u5934\u7684\u94FE\u63A5\uFF09\n * @default { duration: 500, offset: 0 }\n */\n jumpOptions?: JumpOptions\n }\n>(({ data, className, classNames = {}, onSecondaryClick, onPrimaryClick, jumpOptions = {}, ...rest }, ref) => {\n const { locale } = useAiuiContext()\n\n // \u9ED8\u8BA4 jump \u914D\u7F6E\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n // \u5305\u88C5\u94FE\u63A5\uFF0C\u81EA\u52A8\u6DFB\u52A0 locale \u524D\u7F00\n const localizeUrl = (url?: string) => {\n if (!url || !locale) return url\n return getLocalizedPath(url, locale)\n }\n\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n isVideoLoop = true,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n titleSize,\n caption = [],\n blockLink,\n iconArray,\n align = 'left',\n enableParallax = true,\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 // Task 7: Compute accessibility / tracking fallback values (Rule 2/3/4 \u2014 DECISION-T3)\n // blockLink aria-label: title \u2192 subtitle \u2192 pcImage.alt \u2192 undefined (absent attr)\n const blockLinkLabel = title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n // componentTitle: title=undefined \u2192 coerce '' via subtitle only (no pcImage.alt for undefined title);\n // title='' (intentional) \u2192 cascade: subtitle \u2192 pcImage.alt \u2192 undefined\n const resolvedComponentTitle =\n title !== undefined\n ? title?.trim() || subtitle?.trim() || pcImage?.alt?.trim() || undefined\n : (subtitle && subtitle.trim()) || ''\n // componentDescription: subtitle with undefined guard\n const resolvedComponentDescription = (subtitle && subtitle.trim()) || ''\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: resolvedComponentTitle,\n componentDescription: resolvedComponentDescription,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n // Task 18: GSAP bypass \u2014 skip ALL GSAP setup in carousel mode (DECISION-A002/DECISION-009)\n if (data.items && data.items.length > 0) return\n if (!enableParallax) return\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, data.items, enableParallax])\n\n // Task 18: Carousel mode early return (DECISION-A002 / DECISION-011)\n // All hooks above have already run. Delegate entirely to HeroBannerCarousel\n // when data.items is non-empty; GSAP was already bypassed in the useEffect above.\n if (data.items && data.items.length > 0) {\n return (\n <HeroBannerCarousel\n data={data}\n className={className}\n classNames={classNames}\n onPrimaryClick={onPrimaryClick}\n onSecondaryClick={onSecondaryClick}\n ref={ref as React.Ref<HTMLDivElement>}\n {...rest}\n />\n )\n }\n return (\n <div {...rest} ref={inViewRef} data-ui-component-id=\"HeroBanner\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'text-info-primary relative w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]':\n size === 'default',\n 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]':\n size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(localizeUrl(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={blockLinkLabel}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.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={isVideoLoop}\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={contentVariants({ align })}>\n <div className={textVariants({ align })}>\n {label && (\n <Text\n size={2}\n as=\"p\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n className={cn('hero-banner-title', classNames.title)}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\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 classNames.subtitle\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n align={align}\n />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className={cn(buttonGroupVariants({ align }), classNames.buttonGroup)}>\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={cn('hero-banner-secondary-button', classNames.secondaryButton)}\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(secondaryButton?.link), `${componentType}_${componentName}`)}\n target={secondaryButton?.target}\n rel={\n secondaryButton?.target === '_blank'\n ? (secondaryButton?.rel ?? 'noopener noreferrer')\n : secondaryButton?.rel\n }\n onClick={e => {\n if (secondaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(secondaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }}\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={cn('hero-banner-primary-button', classNames.primaryButton)}\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={trackUrlRef(localizeUrl(primaryButton.link), `${componentType}_${componentName}`)}\n target={primaryButton?.target}\n rel={\n primaryButton?.target === '_blank'\n ? (primaryButton?.rel ?? 'noopener noreferrer')\n : primaryButton?.rel\n }\n onClick={e => {\n if (primaryButton.link?.startsWith('#')) {\n e.preventDefault()\n const element = document.querySelector(primaryButton.link)\n if (element) {\n jump(element as HTMLElement, mergedJumpOptions)\n }\n }\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }}\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 className={iconGroupVariants({ align })}>\n {iconArray?.map(icon => (\n <div key={icon?.pcImage?.url || icon?.pcImage?.alt} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div\n className={cn(\n '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 classNames.captionGroup\n )}\n >\n {caption.map((c, index) => (\n <React.Fragment key={c.title}>\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?.isYoutubeVideo ? undefined : secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.isYoutubeVideo ? secondaryButton?.youtubeId : undefined}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
5
+ "mappings": "slBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IA8GM,IAAAI,EAAA,6BA7GNC,EAAwE,oBACxEC,EAAiB,mBACjBC,EAA8B,mCAC9BC,EAAiB,sBAEjBC,EAA8B,4BAC9BC,GAA0B,uCAC1BC,GAA4B,+CAC5BC,EAA0D,qCAC1DC,EAAmB,kCACnBC,EAAoB,oCACpBC,GAA2B,kCAC3BC,GAA4B,sCAC5BC,EAA4B,uCAC5BC,GAAiC,kCACjCC,GAA+B,oCAC/BC,GAAwB,sCACxBC,GAA2B,kCAE3BC,GAA+B,sCAkB/B,MAAMC,EAAgB,QAChBC,EAAgB,cAGhBC,MAAkB,OACtB,iGACA,CACE,SAAU,CACR,MAAO,CACL,KAAM,4HACN,OACE,4JACJ,CACF,EACA,gBAAiB,CACf,MAAO,MACT,CACF,CACF,EAEMC,MAAe,OACnB,+HACA,CACE,SAAU,CACR,MAAO,CACL,KAAM,mBACN,OAAQ,aACV,CACF,EACA,gBAAiB,CACf,MAAO,MACT,CACF,CACF,EAEMC,MAAsB,OAAI,oEAAqE,CACnG,SAAU,CACR,MAAO,CACL,KAAM,uBACN,OAAQ,gBACV,CACF,EACA,gBAAiB,CACf,MAAO,MACT,CACF,CAAC,EAEKC,MAAoB,OAAI,iDAAkD,CAC9E,SAAU,CACR,MAAO,CACL,KAAM,gBACN,OAAQ,gBACV,CACF,EACA,gBAAiB,CACf,MAAO,MACT,CACF,CAAC,EAWKC,GAAuB,CAAC,CAAE,KAAAC,EAAO,MAAO,IAAsC,CAClF,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAI,WAAQF,CAAI,EACtC,SACE,OAAC,OAAI,MAAOC,EAAO,OAAQC,EAAQ,QAAQ,YAAY,KAAK,eAAe,MAAM,6BAC/E,mBAAC,QACC,EAAE,0LACF,KAAK,eACP,EACF,CAEJ,EAEMC,GAAa,EAAAC,QAAM,WAUvB,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,WAAAC,EAAa,CAAC,EAAG,iBAAAC,EAAkB,eAAAC,EAAgB,YAAAC,GAAc,CAAC,EAAG,GAAGC,CAAK,EAAGC,IAAQ,CAC5G,KAAM,CAAE,OAAAC,CAAO,KAAI,mBAAe,EAI5BC,EAAoB,CAAE,GADY,CAAE,SAAU,IAAK,OAAQ,CAAE,EAChB,GAAGJ,EAAY,EAG5DK,EAAeC,GACf,CAACA,GAAO,CAACH,EAAeG,KACrB,qBAAiBA,EAAKH,CAAM,EAG/B,CACJ,MAAAI,EACA,MAAAC,EACA,SAAAC,EACA,QAAAC,EACA,WAAAC,GACA,WAAAC,GACA,QAAAC,EACA,SAAAC,EACA,YAAAC,EACA,QAAAC,GACA,SAAAC,GACA,YAAAC,EACA,YAAAC,GACA,YAAAC,GAAc,GACd,cAAAC,EACA,gBAAAC,EACA,MAAAC,GAAQ,QACR,KAAAjC,EAAO,UACP,UAAAkC,EACA,QAAAC,EAAU,CAAC,EACX,UAAAC,EACA,UAAAC,GACA,MAAAC,EAAQ,OACR,eAAAC,EAAiB,EACnB,EAAIlC,EAEEmC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAQ,iBAAc,CAAE,MAAO,qBAAsB,CAAC,EACtD,CAACC,EAASC,CAAU,KAAI,YAAkB,EAAK,EAC/C,CAAE,IAAKC,GAAW,OAAAC,CAAO,KAAI,cAAU,EACvCC,KAAmB,UAA6B,IAAI,EACpDC,KAAe,UAA6B,IAAI,EAChDC,KAAgB,UAA6B,IAAI,EAEjDC,KAAQ,UAAyB,IAAI,EACrCC,KAAS,UAAuB,IAAI,EAIpCC,GAAiBjC,GAAO,KAAK,GAAKC,GAAU,KAAK,GAAKI,GAAS,KAAK,KAAK,GAAK,OAG9E6B,GACJlC,IAAU,OACNA,GAAO,KAAK,GAAKC,GAAU,KAAK,GAAKI,GAAS,KAAK,KAAK,GAAK,OAC5DJ,GAAYA,EAAS,KAAK,GAAM,GAEjCkC,GAAgClC,GAAYA,EAAS,KAAK,GAAM,GAsEtE,SApEA,gBAAY+B,EAAQ,CAClB,cAAAzD,EACA,cAAAC,EACA,eAAgB0D,GAChB,qBAAsBC,EACxB,CAAC,KAED,uBAAoBzC,EAAK,IAAMsC,EAAO,OAAyB,KAE/D,aAAU,IAAM,CAGd,GADI7C,EAAK,OAASA,EAAK,MAAM,OAAS,GAClC,CAACkC,EAAgB,OACrB,EAAAe,QAAK,eAAe,eAAa,EACjC,SAASC,GAAa,CACpB,GAAI,CAACN,EAAM,QAAS,OACpB,MAAMO,EAAeN,EAAO,SAAS,cAAgB,IAChC,OAAO,aAERM,EAClBV,EAAiB,QAAU,gBAAc,OAAO,CAC9C,QAASI,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWO,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAH,QAAK,IAAIL,EAAM,QAAS,CAAE,SAAUS,CAAM,CAAC,CAC7C,CACF,CAAC,GAEDV,EAAc,QAAU,gBAAc,OAAO,CAC3C,QAASE,EAAO,QAChB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWO,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAH,QAAK,IAAIL,EAAM,QAAS,CAAE,SAAUS,CAAM,CAAC,CAC7C,CACF,CAAC,EACDX,EAAa,QAAU,gBAAc,OAAO,CAC1C,QAASG,EAAO,QAChB,MAAO,UACP,IAAK,aACL,MAAO,GACP,SAAWO,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAC9B,EAAAH,QAAK,IAAIL,EAAM,QAAS,CAAE,SAAUS,CAAM,CAAC,CAC7C,CACF,CAAC,EAEL,CACA,OAAIb,GAAQU,EAAW,EAChB,IAAM,CAEXT,EAAiB,SAAWA,EAAiB,QAAQ,KAAK,EAC1DE,EAAc,SAAWA,EAAc,QAAQ,KAAK,EACpDD,EAAa,SAAWA,EAAa,QAAQ,KAAK,CACpD,CACF,EAAG,CAACF,EAAQxC,EAAK,MAAOkC,CAAc,CAAC,EAKnClC,EAAK,OAASA,EAAK,MAAM,OAAS,KAElC,OAAC,GAAAsD,QAAA,CACC,KAAMtD,EACN,UAAWC,EACX,WAAYC,EACZ,eAAgBE,EAChB,iBAAkBD,EAClB,IAAKI,EACJ,GAAGD,EACN,KAIF,OAAC,OAAK,GAAGA,EAAM,IAAKiC,GAAW,uBAAqB,aAClD,oBAAC,OACC,IAAKM,EACL,aAAW,MACTjB,KAAU,OAAS,YAAc,GACjC,qDACA,CACE,2HACEjC,IAAS,UACX,2HACEA,IAAS,IACb,EACAM,CACF,EAEC,UAAA8B,MACC,OAAC,KACC,UAAU,wBACV,QAAM,eAAYrB,EAAYqB,CAAS,EAAG,GAAG3C,CAAa,IAAIC,CAAa,EAAE,EAC7E,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGwB,CAAK,IAAIC,CAAQ,GACrD,SAAU,GACV,cAAY,OACZ,aAAYgC,GACb,KAEH,OAAC,OAAI,IAAKF,EAAO,aAAW,MAAG,iCAAiC,EAC7D,SAAApB,MACC,OAAC,GAAA+B,QAAA,CACC,OAAQpB,EAAWf,GAAa,IAAMgB,EAAQjB,GAAU,KAAOC,GAAa,IAAMF,GAAS,IAC3F,IACEiB,EACKZ,GAAa,IACda,EACGd,IAAU,KAAmBC,GAAa,IAC1CF,IAAS,IAElB,UAAU,uBACV,eAAe,sBACf,MAAK,GACL,KAAMI,GACN,YAAW,GACb,KAEA,OAAC,WACC,UAAU,uBACV,aAAa,sBACb,QAAQ,QACR,cAAc,OACd,IAAKP,GAAS,KAAO,GACrB,OAAQ,GAAGA,GAAS,KAAO,EAAE,MAAMC,GAAU,MAAQC,GAAa,KAAO,GAAG,UAAUA,GAAa,KAAO,EAAE,OAC9G,EAEJ,KAGA,QAAC,OAAI,UAAW9B,GAAgB,CAAE,MAAA2C,CAAM,CAAC,EACvC,qBAAC,OAAI,UAAW1C,GAAa,CAAE,MAAA0C,CAAM,CAAC,EACnC,UAAArB,MACC,OAAC,QACC,KAAM,EACN,GAAG,IACH,aAAW,MAAG,iFAAiF,EAC/F,KAAMA,EACR,EAEDC,MACC,OAAC,WACC,GAAIgB,IAAc,IAAM,KAAO,KAC/B,KAAMhB,EACN,aAAW,MAAG,oBAAqBX,EAAW,KAAK,EACnD,KAAM2B,EAAa,OAAOA,GAAa,GAAG,EAAYlC,IAAS,KAAO,EAAI,EAC5E,EAEDmB,MACC,OAAC,QACC,GAAG,IACH,KAAM,EACN,aAAW,MACT,sHACAZ,EAAW,QACb,EACA,KAAMY,EACR,EAEDC,MACC,OAAC,OAAI,UAAU,OACb,mBAAC,aACC,QAASA,EACT,WAAYC,GACZ,WAAYC,GACZ,QAAQ,WACR,MAAOgB,EACT,EACF,GAEJ,KAEA,QAAC,OAAI,aAAW,MAAGzC,GAAoB,CAAE,MAAAyC,CAAM,CAAC,EAAG/B,EAAW,WAAW,EACtE,UAAAyB,GAAiB,uBAAyBA,GAAiB,uBAC1D,QAAC,UACC,QAAS,IAAMW,EAAW,EAAI,EAC9B,KAAK,KACL,QAAQ,YACR,UAAU,gCACV,0BAAyB,GAAGlD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGwB,CAAK,IAAIC,CAAQ,IAAIa,GAAiB,mBAAmB,GAE5F,UAAAA,GAAiB,oBAAoB,OAAC,OAACjC,GAAA,CAAqB,KAAK,KAAK,GACzE,EACEiC,GAAiB,QACnB,QAAC,UACC,aAAYd,GAASC,EACrB,KAAK,KACL,QAAQ,YACR,aAAW,MAAG,+BAAgCZ,EAAW,eAAe,EACxE,GAAIyB,GAAiB,wBAA0B,SAAW,IAC1D,QAAM,eAAYjB,EAAYiB,GAAiB,IAAI,EAAG,GAAGvC,CAAa,IAAIC,CAAa,EAAE,EACzF,OAAQsC,GAAiB,OACzB,IACEA,GAAiB,SAAW,SACvBA,GAAiB,KAAO,sBACzBA,GAAiB,IAEvB,QAAS6B,GAAK,CACZ,GAAI7B,EAAgB,MAAM,WAAW,GAAG,EAAG,CACzC6B,EAAE,eAAe,EACjB,MAAMC,EAAU,SAAS,cAAc9B,EAAgB,IAAI,EACvD8B,MACF,EAAAC,SAAKD,EAAwBhD,CAAiB,CAElD,CACAkB,GAAiB,yBACfxB,IAAmBH,EAAMwD,EAAG7B,GAAiB,sBAAsB,CACvE,EACA,0BAAyB,GAAGvC,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGwB,CAAK,IAAIC,CAAQ,IAAIa,GAAiB,IAAI,GAE7E,UAAAA,GAAiB,QAClB,OAAC,QAAK,UAAU,UAAW,SAAAd,GAASC,EAAS,GAC/C,EACE,KACHY,GAAiBA,EAAc,SAC9B,OAAC,UACC,aAAYb,GAASC,EACrB,KAAK,KACL,QAAQ,UACR,aAAW,MAAG,6BAA8BZ,EAAW,aAAa,EACpE,GAAIwB,GAAe,sBAAwB,SAAW,IACtD,QAAM,eAAYhB,EAAYgB,EAAc,IAAI,EAAG,GAAGtC,CAAa,IAAIC,CAAa,EAAE,EACtF,OAAQqC,GAAe,OACvB,IACEA,GAAe,SAAW,SACrBA,GAAe,KAAO,sBACvBA,GAAe,IAErB,QAAS8B,GAAK,CACZ,GAAI9B,EAAc,MAAM,WAAW,GAAG,EAAG,CACvC8B,EAAE,eAAe,EACjB,MAAMC,EAAU,SAAS,cAAc/B,EAAc,IAAI,EACrD+B,MACF,EAAAC,SAAKD,EAAwBhD,CAAiB,CAElD,CACAiB,GAAe,uBAAyBtB,IAAiBJ,EAAMwD,EAAG9B,GAAe,oBAAoB,CACvG,EACA,0BAAyB,GAAGtC,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGwB,CAAK,IAAIC,CAAQ,IAAIY,GAAe,IAAI,GAE3E,SAAAA,EAAc,KACjB,GAEJ,KACA,OAAC,OAAI,UAAWjC,GAAkB,CAAE,MAAAwC,CAAM,CAAC,EACxC,SAAAD,IAAW,IAAI2B,MACd,OAAC,OAAmD,UAAU,OAC5D,mBAAC,WACC,UAAU,uBACV,aAAa,sBACb,QAAQ,QACR,IAAKA,GAAM,SAAS,KAAO,GAC3B,OAAQA,GAAM,SAAS,IACzB,GAPQA,GAAM,SAAS,KAAOA,GAAM,SAAS,GAQ/C,CACD,EACH,GACF,EAGC7B,EAAQ,OAAS,MAChB,OAAC,OACC,aAAW,MACT,iMACA5B,EAAW,YACb,EAEC,SAAA4B,EAAQ,IAAI,CAAC8B,EAAGC,OACf,QAAC,EAAA9D,QAAM,SAAN,CACC,oBAAC,QACC,KAAM,EACN,aAAW,MACT,yIACF,EACA,KAAM6D,EAAE,MACV,EACCC,EAAQ/B,EAAQ,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,sBAAsB,EAAG,IARxD8B,EAAE,KASvB,CACD,EACH,EAIDvB,MACC,OAAC,eACC,QAASA,EACT,SAAUV,GAAiB,eAAiB,OAAYA,GAAiB,UAAU,IACnF,UAAWA,GAAiB,eAAiBA,GAAiB,UAAY,OAC1E,aAAc,IAAMW,EAAW,EAAK,EACtC,GAEJ,EACF,CAEJ,CAAC,EAEDxC,GAAW,YAAc,aAEzB,IAAO/B,MAAQ,eAAW+B,EAAU",
6
6
  "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_jump", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_helpers", "import_class_variance_authority", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_utils", "import_AiuiProvider", "import_button", "import_VideoModal", "import_HeroBannerCarousel", "componentType", "componentName", "contentVariants", "textVariants", "buttonGroupVariants", "iconGroupVariants", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "classNames", "onSecondaryClick", "onPrimaryClick", "jumpOptions", "rest", "ref", "locale", "mergedJumpOptions", "localizeUrl", "url", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "isVideoLoop", "primaryButton", "secondaryButton", "theme", "titleSize", "caption", "blockLink", "iconArray", "align", "enableParallax", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "blockLinkLabel", "resolvedComponentTitle", "resolvedComponentDescription", "gsap", "gsapResize", "clientHeight", "self", "value", "HeroBannerCarousel", "ScrollLoadVideo", "e", "element", "jump", "icon", "c", "index"]
7
7
  }
package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var A=Object.create;var B=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var D=(t,n)=>{for(var i in n)B(t,i,{get:n[i],enumerable:!0})},_=(t,n,i,f)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of I(n))!V.call(t,l)&&l!==i&&B(t,l,{get:()=>n[l],enumerable:!(f=E(n,l))||f.enumerable});return t};var T=(t,n,i)=>(i=t!=null?A(M(t)):{},_(n||!t||!t.__esModule?B(i,"default",{value:t,enumerable:!0}):i,t)),O=t=>_(B({},"__esModule",{value:!0}),t);var q={};D(q,{default:()=>$});module.exports=O(q);var e=require("react/jsx-runtime"),r=T(require("react")),N=require("swiper/react"),d=require("swiper/modules"),R=T(require("../../helpers/ScrollLoadVideo.js")),g=require("../../helpers/index.js"),m=require("../../components/index.js"),J=require("swiper/css"),K=require("swiper/css/navigation"),Q=require("swiper/css/pagination");const W=()=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),F=()=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),U=({data:t,isActive:n,videoRef:i,onPrimaryClick:f,onSecondaryClick:l})=>{const{pcVideo:H,padVideo:L,mobileVideo:x,pcImage:b,mobileImage:y,isVideoLoop:P=!0,title:k,subtitle:u,primaryButton:c,secondaryButton:s,theme:v="light",align:w="left",titleSize:h,size:S="default"}=t,a=H?.url||L?.url||x?.url||"",o=b?.url||y?.url||"";return(0,e.jsxs)("div",{className:(0,g.cn)("text-info-primary relative w-full overflow-hidden",v==="dark"?"aiui-dark":"",S==="default"?"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":"lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]"),children:[(0,e.jsx)(R.default,{videoRef:i,src:a,poster:o,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:P,playsInline:!0}),(0,e.jsxs)("div",{className:(0,g.cn)("laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",w==="center"?"left-1/2 -translate-x-1/2 items-center text-center":"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]"),children:[(0,e.jsxs)("div",{className:(0,g.cn)("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]",w==="center"?"text-center":"laptop:text-left"),children:[k&&(0,e.jsx)(m.Heading,{as:h==="4"?"h1":"h2",html:k,size:h?Number(h||"5"):S==="sm"?4:5}),u&&(0,e.jsx)(m.Text,{as:"p",size:2,className:"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",html:u})]}),(c?.text||s?.text)&&(0,e.jsxs)("div",{className:(0,g.cn)("lg-desktop:gap-3 flex items-center gap-2",w==="center"?"justify-center":"laptop:justify-start"),children:[s?.text&&(0,e.jsx)(m.Button,{size:"lg",variant:"secondary",as:s?.isCustomSecondaryButton?"button":"a",href:s.link,onClick:p=>s?.isCustomSecondaryButton&&l?.(t,p,s?.customSecondaryEventId),children:s.text}),c?.text&&(0,e.jsx)(m.Button,{size:"lg",variant:"primary",as:c?.isCustomPrimaryButton?"button":"a",href:c.link,onClick:p=>c?.isCustomPrimaryButton&&f?.(t,p,c?.customPrimaryEventId),children:c.text})]})]})]})},z=r.default.forwardRef(({data:t,className:n,classNames:i={},onPrimaryClick:f,onSecondaryClick:l,...H},L)=>{const x=t.items||[],b=t.carousel,y=(0,r.useRef)(null),[P,k]=(0,r.useState)(0),u=(0,r.useRef)(x.map(()=>r.default.createRef())),c=(b?.showArrows??!0)&&x.length>1,s=b?.showDots??!0,v=b?.autoplaySeconds,w=v!==void 0?[d.Navigation,d.Pagination,d.Autoplay]:[d.Navigation,d.Pagination],h=v!==void 0?{delay:v*1e3,disableOnInteraction:!1}:!1;(0,r.useEffect)(()=>{u.current.forEach((a,o)=>{o!==0&&a.current&&(a.current.pause(),a.current.currentTime=0)})},[]);const S=(0,r.useCallback)(a=>{const o=a.realIndex;u.current.forEach((C,j)=>{j!==o&&C.current&&(C.current.pause(),C.current.currentTime=0)});const p=u.current[o];p?.current&&p.current.paused&&p.current.play()?.catch(()=>{}),k(o)},[]);return(0,e.jsxs)("div",{ref:L,className:(0,g.cn)("hero-banner-carousel relative w-full overflow-hidden",n),...H,children:[(0,e.jsx)(N.Swiper,{onSwiper:a=>y.current=a,onSlideChange:S,modules:w,slidesPerView:1,loop:b?.loop??!0,initialSlide:0,allowTouchMove:!0,autoplay:h,pagination:s?{clickable:!0,el:".hero-banner-pagination",renderBullet:(a,o)=>`<span class="${o} banner-dot"></span>`}:!1,children:x.map((a,o)=>(0,e.jsx)(N.SwiperSlide,{children:({isActive:p})=>(0,e.jsx)(U,{data:a,isActive:p,videoRef:u.current[o],onPrimaryClick:f,onSecondaryClick:l})},o))}),c&&(0,e.jsxs)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>y.current?.slidePrev(),"aria-label":"Previous banner",children:(0,e.jsx)(W,{})}),(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>y.current?.slideNext(),"aria-label":"Next banner",children:(0,e.jsx)(F,{})})]}),s&&(0,e.jsx)("div",{className:"hero-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100"})]})});z.displayName="HeroBannerCarousel";var $=z;
1
+ "use strict";"use client";var A=Object.create;var B=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var D=(t,r)=>{for(var l in r)B(t,l,{get:r[l],enumerable:!0})},P=(t,r,l,f)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of I(r))!V.call(t,p)&&p!==l&&B(t,p,{get:()=>r[p],enumerable:!(f=E(r,p))||f.enumerable});return t};var T=(t,r,l)=>(l=t!=null?A(M(t)):{},P(r||!t||!t.__esModule?B(l,"default",{value:t,enumerable:!0}):l,t)),O=t=>P(B({},"__esModule",{value:!0}),t);var q={};D(q,{default:()=>$});module.exports=O(q);var e=require("react/jsx-runtime"),s=T(require("react")),N=require("swiper/react"),d=require("swiper/modules"),R=T(require("../../helpers/ScrollLoadVideo.js")),g=require("../../helpers/index.js"),m=require("../../components/index.js"),J=require("swiper/css"),K=require("swiper/css/navigation"),Q=require("swiper/css/pagination");const W=()=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),F=()=>(0,e.jsxs)("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[(0,e.jsx)("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),U=({data:t,isActive:r,videoRef:l,onPrimaryClick:f,onSecondaryClick:p})=>{const{pcVideo:_,padVideo:H,mobileVideo:x,pcImage:b,mobileImage:y,isVideoLoop:L=!0,title:k,subtitle:u,primaryButton:a,secondaryButton:n,theme:v="light",align:w="left",titleSize:h,size:S="default"}=t,o=_?.url||H?.url||x?.url||"",i=b?.url||y?.url||"";return(0,e.jsxs)("div",{className:(0,g.cn)("text-info-primary relative w-full overflow-hidden",v==="dark"?"aiui-dark":"",S==="default"?"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":"lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]"),children:[(0,e.jsx)(R.default,{videoRef:l,src:o,poster:i,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:L,playsInline:!0}),(0,e.jsxs)("div",{className:(0,g.cn)("laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",w==="center"?"left-1/2 -translate-x-1/2 items-center text-center":"tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]"),children:[(0,e.jsxs)("div",{className:(0,g.cn)("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]",w==="center"?"text-center":"laptop:text-left"),children:[k&&(0,e.jsx)(m.Heading,{as:h==="4"?"h1":"h2",html:k,size:h?Number(h||"5"):S==="sm"?4:5}),u&&(0,e.jsx)(m.Text,{as:"p",size:2,className:"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",html:u})]}),(a?.text||n?.text)&&(0,e.jsxs)("div",{className:(0,g.cn)("lg-desktop:gap-3 flex items-center gap-2",w==="center"?"justify-center":"laptop:justify-start"),children:[n?.text&&(0,e.jsx)(m.Button,{size:"lg",variant:"secondary",as:n?.isCustomSecondaryButton?"button":"a",href:n.link,target:n?.target,rel:n?.target==="_blank"?n?.rel??"noopener noreferrer":n?.rel,onClick:c=>n?.isCustomSecondaryButton&&p?.(t,c,n?.customSecondaryEventId),children:n.text}),a?.text&&(0,e.jsx)(m.Button,{size:"lg",variant:"primary",as:a?.isCustomPrimaryButton?"button":"a",href:a.link,target:a?.target,rel:a?.target==="_blank"?a?.rel??"noopener noreferrer":a?.rel,onClick:c=>a?.isCustomPrimaryButton&&f?.(t,c,a?.customPrimaryEventId),children:a.text})]})]})]})},z=s.default.forwardRef(({data:t,className:r,classNames:l={},onPrimaryClick:f,onSecondaryClick:p,..._},H)=>{const x=t.items||[],b=t.carousel,y=(0,s.useRef)(null),[L,k]=(0,s.useState)(0),u=(0,s.useRef)(x.map(()=>s.default.createRef())),a=(b?.showArrows??!0)&&x.length>1,n=b?.showDots??!0,v=b?.autoplaySeconds,w=v!==void 0?[d.Navigation,d.Pagination,d.Autoplay]:[d.Navigation,d.Pagination],h=v!==void 0?{delay:v*1e3,disableOnInteraction:!1}:!1;(0,s.useEffect)(()=>{u.current.forEach((o,i)=>{i!==0&&o.current&&(o.current.pause(),o.current.currentTime=0)})},[]);const S=(0,s.useCallback)(o=>{const i=o.realIndex;u.current.forEach((C,j)=>{j!==i&&C.current&&(C.current.pause(),C.current.currentTime=0)});const c=u.current[i];c?.current&&c.current.paused&&c.current.play()?.catch(()=>{}),k(i)},[]);return(0,e.jsxs)("div",{ref:H,className:(0,g.cn)("hero-banner-carousel relative w-full overflow-hidden",r),..._,children:[(0,e.jsx)(N.Swiper,{onSwiper:o=>y.current=o,onSlideChange:S,modules:w,slidesPerView:1,loop:b?.loop??!0,initialSlide:0,allowTouchMove:!0,autoplay:h,pagination:n?{clickable:!0,el:".hero-banner-pagination",renderBullet:(o,i)=>`<span class="${i} banner-dot"></span>`}:!1,children:x.map((o,i)=>(0,e.jsx)(N.SwiperSlide,{children:({isActive:c})=>(0,e.jsx)(U,{data:o,isActive:c,videoRef:u.current[i],onPrimaryClick:f,onSecondaryClick:p})},i))}),a&&(0,e.jsxs)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>y.current?.slidePrev(),"aria-label":"Previous banner",children:(0,e.jsx)(W,{})}),(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden items-center justify-center",onClick:()=>y.current?.slideNext(),"aria-label":"Next banner",children:(0,e.jsx)(F,{})})]}),n&&(0,e.jsx)("div",{className:"hero-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100"})]})});z.displayName="HeroBannerCarousel";var $=z;
2
2
  //# sourceMappingURL=HeroBannerCarousel.js.map
package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/HeroBanner/HeroBannerCarousel.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useRef, useEffect, useCallback, useState } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { cn } from '../../helpers/index.js'\nimport type { HeroBannerProps, HeroBannerSlideData } from './types.js'\nimport { Button, Heading, Text } from '../../components/index.js'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n// \u2500\u2500 HeroBannerSlide \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Minimal per-slide content unit. No GSAP, no withLayout, no useExposure.\n// videoRef is the imperative pause/play channel (DECISION-A003).\n\ninterface HeroBannerSlideProps {\n data: HeroBannerSlideData\n isActive: boolean\n videoRef: React.RefObject<HTMLVideoElement>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\nconst HeroBannerSlide = ({\n data,\n isActive: _isActive,\n videoRef,\n onPrimaryClick,\n onSecondaryClick,\n}: HeroBannerSlideProps) => {\n const {\n pcVideo,\n padVideo,\n mobileVideo,\n pcImage,\n mobileImage,\n isVideoLoop = true,\n title,\n subtitle,\n primaryButton,\n secondaryButton,\n theme = 'light',\n align = 'left',\n titleSize,\n size = 'default',\n } = data\n\n // Resolve video src (pc preferred; fallback to mobile)\n const videoSrc = pcVideo?.url || padVideo?.url || mobileVideo?.url || ''\n // Poster from image (shown while video loads or for image-only slides)\n const posterUrl = pcImage?.url || mobileImage?.url || ''\n\n return (\n <div\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n theme === 'dark' ? 'aiui-dark' : '',\n size === 'default'\n ? 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]'\n : 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]'\n )}\n >\n {/* Background media \u2014 always ScrollLoadVideo so videoRef is always attached.\n For image-only slides src='', IO won't load a video, but ref is live for control. */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={videoSrc}\n poster={posterUrl}\n className=\"absolute inset-0 size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n\n {/* Content Overlay */}\n <div\n className={cn(\n 'laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n align === 'center'\n ? 'left-1/2 -translate-x-1/2 items-center text-center'\n : 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]'\n )}\n >\n <div\n className={cn(\n 'tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]',\n align === 'center' ? 'text-center' : 'laptop:text-left'\n )}\n >\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className=\"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm\"\n html={subtitle}\n />\n )}\n </div>\n\n {(primaryButton?.text || secondaryButton?.text) && (\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n align === 'center' ? 'justify-center' : 'laptop:justify-start'\n )}\n >\n {secondaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={secondaryButton.link}\n onClick={e =>\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"primary\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={primaryButton.link}\n onClick={e =>\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )\n}\n\n// \u2500\u2500 HeroBannerCarousel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface HeroBannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n data: HeroBannerProps['data']\n classNames?: Record<string, string>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\n/**\n * HeroBannerCarousel \u2014 arrows-only Navigation Swiper wrapping HeroBannerSlide units.\n *\n * Architecture:\n * - DECISION-A007: Navigation only, loop=false, slidesPerView=1\n * - DECISION-A003: ScrollLoadVideo videoRef as imperative pause channel\n * - DECISION-A010: initial activeIndex=0; useEffect pauses slides 1..N on mount\n * - DECISION-A006: arrow buttons at z-[20], above blockLink overlay z-10\n * - ISSUE-017: post-mount pause wins over IO rootMargin='200px' race\n */\nconst HeroBannerCarousel = React.forwardRef<HTMLDivElement, HeroBannerCarouselProps>(\n (\n {\n data,\n className,\n classNames: _classNames = {},\n onPrimaryClick: _onPrimaryClick,\n onSecondaryClick: _onSecondaryClick,\n ...rest\n },\n ref\n ) => {\n const items = data.items || []\n const carousel = data.carousel\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [_activeIndex, setActiveIndex] = useState(0)\n\n // One RefObject<HTMLVideoElement> per slide.\n // Created once at mount; ref count is fixed (ISSUE-022 \u2014 stable data assumed).\n // DECISION-A003: passed to HeroBannerSlide \u2192 ScrollLoadVideo as imperative channel.\n const videoRefs = useRef<React.RefObject<HTMLVideoElement>[]>(items.map(() => React.createRef<HTMLVideoElement>()))\n\n // Arrow visibility formula \u2014 DECISION-011\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n\n // Pagination dots visibility formula \u2014 DECISION-006\n const showDots = carousel?.showDots ?? true\n\n // Autoplay module configuration \u2014 DECISION-006\n const autoplaySeconds = carousel?.autoplaySeconds\n const swiperModules = autoplaySeconds !== undefined ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds !== undefined ? { delay: autoplaySeconds * 1000, disableOnInteraction: false } : false\n\n // Post-mount effect: pause all non-active (index !== 0) slide videos.\n // Wins the race against ScrollLoadVideo's IO rootMargin='200px' auto-play (ISSUE-017).\n useEffect(() => {\n videoRefs.current.forEach((vRef, i) => {\n if (i !== 0 && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n }, [])\n\n // Slide transition handler \u2014 pause outgoing, play incoming (DECISION-A003 / DECISION-009)\n const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n // Pause and reset all non-active slide videos\n videoRefs.current.forEach((vRef, i) => {\n if (i !== newIndex && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n // Play incoming slide video \u2014 guard against AbortError from rapid swipe (ISSUE-005)\n const incoming = videoRefs.current[newIndex]\n if (incoming?.current && incoming.current.paused) {\n const p = incoming.current.play()\n p?.catch(() => {}) // Absorb AbortError silently\n }\n setActiveIndex(newIndex)\n }, [])\n\n return (\n <div ref={ref} className={cn('hero-banner-carousel relative w-full overflow-hidden', className)} {...rest}>\n <Swiper\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={carousel?.loop ?? true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: '.hero-banner-pagination',\n renderBullet: (_index: number, className: string) => `<span class=\"${className} banner-dot\"></span>`,\n }\n : false\n }\n >\n {items.map((slideData, index) => (\n <SwiperSlide key={index}>\n {({ isActive }) => (\n <HeroBannerSlide\n data={slideData}\n isActive={isActive}\n videoRef={videoRefs.current[index]}\n onPrimaryClick={_onPrimaryClick}\n onSecondaryClick={_onSecondaryClick}\n />\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* Arrow navigation \u2014 z-[20] to stay above blockLink overlay (z-10) \u2014 DECISION-A006 */}\n {showArrowControls && (\n <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous banner\"\n >\n <ChevronLeft />\n </button>\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next banner\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {/* Pagination dots \u2014 visible on all devices */}\n {showDots && (\n <div className=\"hero-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100\" />\n )}\n </div>\n )\n }\n)\n\nHeroBannerCarousel.displayName = 'HeroBannerCarousel'\n\nexport default HeroBannerCarousel\n"],
5
- "mappings": "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",
6
- "names": ["HeroBannerCarousel_exports", "__export", "HeroBannerCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_ScrollLoadVideo", "import_helpers", "import_components", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "HeroBannerSlide", "data", "_isActive", "videoRef", "onPrimaryClick", "onSecondaryClick", "pcVideo", "padVideo", "mobileVideo", "pcImage", "mobileImage", "isVideoLoop", "title", "subtitle", "primaryButton", "secondaryButton", "theme", "align", "titleSize", "size", "videoSrc", "posterUrl", "ScrollLoadVideo", "e", "HeroBannerCarousel", "React", "className", "_classNames", "_onPrimaryClick", "_onSecondaryClick", "rest", "ref", "items", "carousel", "swiperRef", "_activeIndex", "setActiveIndex", "videoRefs", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "vRef", "i", "handleSlideChange", "swiper", "newIndex", "incoming", "s", "_index", "slideData", "index", "isActive"]
4
+ "sourcesContent": ["'use client'\nimport React, { useRef, useEffect, useCallback, useState } from 'react'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, Pagination, Autoplay } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { cn } from '../../helpers/index.js'\nimport type { HeroBannerProps, HeroBannerSlideData } from './types.js'\nimport { Button, Heading, Text } from '../../components/index.js'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\n\n// \u2500\u2500 Arrow icons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\nconst ChevronLeft = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M23 13L16 20L23 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M17 13L24 20L17 27\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\n// \u2500\u2500 HeroBannerSlide \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n// Minimal per-slide content unit. No GSAP, no withLayout, no useExposure.\n// videoRef is the imperative pause/play channel (DECISION-A003).\n\ninterface HeroBannerSlideProps {\n data: HeroBannerSlideData\n isActive: boolean\n videoRef: React.RefObject<HTMLVideoElement>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\nconst HeroBannerSlide = ({\n data,\n isActive: _isActive,\n videoRef,\n onPrimaryClick,\n onSecondaryClick,\n}: HeroBannerSlideProps) => {\n const {\n pcVideo,\n padVideo,\n mobileVideo,\n pcImage,\n mobileImage,\n isVideoLoop = true,\n title,\n subtitle,\n primaryButton,\n secondaryButton,\n theme = 'light',\n align = 'left',\n titleSize,\n size = 'default',\n } = data\n\n // Resolve video src (pc preferred; fallback to mobile)\n const videoSrc = pcVideo?.url || padVideo?.url || mobileVideo?.url || ''\n // Poster from image (shown while video loads or for image-only slides)\n const posterUrl = pcImage?.url || mobileImage?.url || ''\n\n return (\n <div\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n theme === 'dark' ? 'aiui-dark' : '',\n size === 'default'\n ? 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]'\n : 'lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]'\n )}\n >\n {/* Background media \u2014 always ScrollLoadVideo so videoRef is always attached.\n For image-only slides src='', IO won't load a video, but ref is live for control. */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={videoSrc}\n poster={posterUrl}\n className=\"absolute inset-0 size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n />\n\n {/* Content Overlay */}\n <div\n className={cn(\n 'laptop:top-1/2 laptop:-translate-y-1/2 lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]',\n align === 'center'\n ? 'left-1/2 -translate-x-1/2 items-center text-center'\n : 'tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] left-0 px-[16px]'\n )}\n >\n <div\n className={cn(\n 'tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]',\n align === 'center' ? 'text-center' : 'laptop:text-left'\n )}\n >\n {title && (\n <Heading\n as={titleSize === '4' ? 'h1' : 'h2'}\n html={title}\n size={titleSize ? (Number(titleSize || '5') as any) : size === 'sm' ? 4 : 5}\n />\n )}\n {subtitle && (\n <Text\n as=\"p\"\n size={2}\n className=\"font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm\"\n html={subtitle}\n />\n )}\n </div>\n\n {(primaryButton?.text || secondaryButton?.text) && (\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n align === 'center' ? 'justify-center' : 'laptop:justify-start'\n )}\n >\n {secondaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n as={secondaryButton?.isCustomSecondaryButton ? 'button' : 'a'}\n href={secondaryButton.link}\n target={secondaryButton?.target}\n rel={\n secondaryButton?.target === '_blank'\n ? (secondaryButton?.rel ?? 'noopener noreferrer')\n : secondaryButton?.rel\n }\n onClick={e =>\n secondaryButton?.isCustomSecondaryButton &&\n onSecondaryClick?.(data, e, secondaryButton?.customSecondaryEventId)\n }\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"primary\"\n as={primaryButton?.isCustomPrimaryButton ? 'button' : 'a'}\n href={primaryButton.link}\n target={primaryButton?.target}\n rel={\n primaryButton?.target === '_blank'\n ? (primaryButton?.rel ?? 'noopener noreferrer')\n : primaryButton?.rel\n }\n onClick={e =>\n primaryButton?.isCustomPrimaryButton && onPrimaryClick?.(data, e, primaryButton?.customPrimaryEventId)\n }\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n )}\n </div>\n </div>\n )\n}\n\n// \u2500\u2500 HeroBannerCarousel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\ninterface HeroBannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {\n data: HeroBannerProps['data']\n classNames?: Record<string, string>\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n}\n\n/**\n * HeroBannerCarousel \u2014 arrows-only Navigation Swiper wrapping HeroBannerSlide units.\n *\n * Architecture:\n * - DECISION-A007: Navigation only, loop=false, slidesPerView=1\n * - DECISION-A003: ScrollLoadVideo videoRef as imperative pause channel\n * - DECISION-A010: initial activeIndex=0; useEffect pauses slides 1..N on mount\n * - DECISION-A006: arrow buttons at z-[20], above blockLink overlay z-10\n * - ISSUE-017: post-mount pause wins over IO rootMargin='200px' race\n */\nconst HeroBannerCarousel = React.forwardRef<HTMLDivElement, HeroBannerCarouselProps>(\n (\n {\n data,\n className,\n classNames: _classNames = {},\n onPrimaryClick: _onPrimaryClick,\n onSecondaryClick: _onSecondaryClick,\n ...rest\n },\n ref\n ) => {\n const items = data.items || []\n const carousel = data.carousel\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [_activeIndex, setActiveIndex] = useState(0)\n\n // One RefObject<HTMLVideoElement> per slide.\n // Created once at mount; ref count is fixed (ISSUE-022 \u2014 stable data assumed).\n // DECISION-A003: passed to HeroBannerSlide \u2192 ScrollLoadVideo as imperative channel.\n const videoRefs = useRef<React.RefObject<HTMLVideoElement>[]>(items.map(() => React.createRef<HTMLVideoElement>()))\n\n // Arrow visibility formula \u2014 DECISION-011\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n\n // Pagination dots visibility formula \u2014 DECISION-006\n const showDots = carousel?.showDots ?? true\n\n // Autoplay module configuration \u2014 DECISION-006\n const autoplaySeconds = carousel?.autoplaySeconds\n const swiperModules = autoplaySeconds !== undefined ? [Navigation, Pagination, Autoplay] : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds !== undefined ? { delay: autoplaySeconds * 1000, disableOnInteraction: false } : false\n\n // Post-mount effect: pause all non-active (index !== 0) slide videos.\n // Wins the race against ScrollLoadVideo's IO rootMargin='200px' auto-play (ISSUE-017).\n useEffect(() => {\n videoRefs.current.forEach((vRef, i) => {\n if (i !== 0 && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n }, [])\n\n // Slide transition handler \u2014 pause outgoing, play incoming (DECISION-A003 / DECISION-009)\n const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n // Pause and reset all non-active slide videos\n videoRefs.current.forEach((vRef, i) => {\n if (i !== newIndex && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n // Play incoming slide video \u2014 guard against AbortError from rapid swipe (ISSUE-005)\n const incoming = videoRefs.current[newIndex]\n if (incoming?.current && incoming.current.paused) {\n const p = incoming.current.play()\n p?.catch(() => {}) // Absorb AbortError silently\n }\n setActiveIndex(newIndex)\n }, [])\n\n return (\n <div ref={ref} className={cn('hero-banner-carousel relative w-full overflow-hidden', className)} {...rest}>\n <Swiper\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={carousel?.loop ?? true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: '.hero-banner-pagination',\n renderBullet: (_index: number, className: string) => `<span class=\"${className} banner-dot\"></span>`,\n }\n : false\n }\n >\n {items.map((slideData, index) => (\n <SwiperSlide key={index}>\n {({ isActive }) => (\n <HeroBannerSlide\n data={slideData}\n isActive={isActive}\n videoRef={videoRefs.current[index]}\n onPrimaryClick={_onPrimaryClick}\n onSecondaryClick={_onSecondaryClick}\n />\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n\n {/* Arrow navigation \u2014 z-[20] to stay above blockLink overlay (z-10) \u2014 DECISION-A006 */}\n {showArrowControls && (\n <div className=\"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4\">\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous banner\"\n >\n <ChevronLeft />\n </button>\n <button\n type=\"button\"\n className=\"tablet:flex pointer-events-auto hidden items-center justify-center\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next banner\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {/* Pagination dots \u2014 visible on all devices */}\n {showDots && (\n <div className=\"hero-banner-pagination swiper-pagination tablet:bottom-6 absolute bottom-5 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-2 [&_.banner-dot.swiper-pagination-bullet-active]:h-2 [&_.banner-dot.swiper-pagination-bullet-active]:w-8 [&_.banner-dot.swiper-pagination-bullet-active]:rounded-full [&_.banner-dot.swiper-pagination-bullet-active]:bg-[#080A0F] [&_.banner-dot]:size-2 [&_.banner-dot]:rounded-full [&_.banner-dot]:bg-[#767880] [&_.banner-dot]:transition-all [&_.banner-dot]:duration-300 [&_.banner-dot]:ease-out [&_.swiper-pagination-bullet]:m-0 [&_.swiper-pagination-bullet]:shrink-0 [&_.swiper-pagination-bullet]:opacity-100\" />\n )}\n </div>\n )\n }\n)\n\nHeroBannerCarousel.displayName = 'HeroBannerCarousel'\n\nexport default HeroBannerCarousel\n"],
5
+ "mappings": "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",
6
+ "names": ["HeroBannerCarousel_exports", "__export", "HeroBannerCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_modules", "import_ScrollLoadVideo", "import_helpers", "import_components", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "HeroBannerSlide", "data", "_isActive", "videoRef", "onPrimaryClick", "onSecondaryClick", "pcVideo", "padVideo", "mobileVideo", "pcImage", "mobileImage", "isVideoLoop", "title", "subtitle", "primaryButton", "secondaryButton", "theme", "align", "titleSize", "size", "videoSrc", "posterUrl", "ScrollLoadVideo", "e", "HeroBannerCarousel", "React", "className", "_classNames", "_onPrimaryClick", "_onSecondaryClick", "rest", "ref", "items", "carousel", "swiperRef", "_activeIndex", "setActiveIndex", "videoRefs", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "vRef", "handleSlideChange", "swiper", "newIndex", "i", "incoming", "s", "_index", "slideData", "index", "isActive"]
7
7
  }
package/dist/cjs/biz-components/Listing/components/PurchaseBar/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var b=Object.create;var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var g=(a,e)=>{for(var o in e)p(a,o,{get:e[o],enumerable:!0})},d=(a,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of h(e))!N.call(a,r)&&r!==o&&p(a,r,{get:()=>e[r],enumerable:!(i=v(e,r))||i.enumerable});return a};var w=(a,e,o)=>(o=a!=null?b(y(a)):{},d(e||!a||!a.__esModule?p(o,"default",{value:a,enumerable:!0}):o,a)),P=a=>d(p({},"__esModule",{value:!0}),a);var E={};g(E,{default:()=>B});module.exports=P(E);var t=require("react/jsx-runtime"),m=require("react"),l=require("../../../../components/index.js"),n=require("../index.js"),c=require("../../BizProductProvider.js"),s=w(require("./ScrollSpyNav/index.js")),u=require("../../../../shared/Styles.js");const x=({onSpyNavItemClick:a,totalSavingsSlot:e})=>{const{product:o,renderRating:i}=(0,c.useBizProductContext)(),r=(0,m.useMemo)(()=>o?.payload?.components?.find(f=>f.componentKey==="PurchaseBar")?.data||[],[o?.payload]);return(0,t.jsxs)("div",{id:"purchase-bar",className:"sticky left-0 top-0 z-[45] w-full border-b border-[#E4E5E6] bg-white",children:[(0,t.jsx)(l.Container,{children:(0,t.jsxs)("div",{className:"tablet:justify-between laptop-md:gap-16 tablet:gap-0 tablet:w-full flex flex-wrap items-center gap-[10px]",children:[(0,t.jsxs)("div",{className:"laptop-md:pt-6 laptop-md:pb-0 min-w-0 flex-1 py-3",children:[(0,t.jsx)(l.Heading,{size:2,className:"line-clamp-2 text-wrap",html:o?.title}),(0,t.jsx)("div",{className:"laptop-md:block mt-3 hidden",children:(0,t.jsx)(s.default,{tabs:r,className:"",renderRating:i,onSpyNavItemClick:a})})]}),(0,t.jsx)("div",{className:"laptop-md:block hidden shrink-0",children:(0,t.jsx)(n.ProductActions,{totalSavingsSlot:e})})]})}),(0,t.jsxs)(l.Container,{className:"laptop-md:hidden relative",children:[(0,t.jsx)("div",{className:"absolute left-0 top-0 h-px w-full bg-[#E4E5E6]"}),(0,t.jsx)(s.default,{tabs:r,renderRating:i,onSpyNavItemClick:a})]})]})};var B=(0,u.withLayout)(x);
1
+ "use strict";var v=Object.create;var p=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(a,e)=>{for(var o in e)p(a,o,{get:e[o],enumerable:!0})},m=(a,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of y(e))!g.call(a,r)&&r!==o&&p(a,r,{get:()=>e[r],enumerable:!(i=h(e,r))||i.enumerable});return a};var P=(a,e,o)=>(o=a!=null?v(N(a)):{},m(e||!a||!a.__esModule?p(o,"default",{value:a,enumerable:!0}):o,a)),x=a=>m(p({},"__esModule",{value:!0}),a);var k={};w(k,{default:()=>E});module.exports=x(k);var t=require("react/jsx-runtime"),n=require("react"),l=require("../../../../components/index.js"),c=require("../index.js"),u=require("../../BizProductProvider.js"),s=P(require("./ScrollSpyNav/index.js")),f=require("../../../../shared/Styles.js");const B=({onSpyNavItemClick:a,totalSavingsSlot:e,actionsSlot:o})=>{const{product:i,renderRating:r}=(0,u.useBizProductContext)(),d=(0,n.useMemo)(()=>i?.payload?.components?.find(b=>b.componentKey==="PurchaseBar")?.data||[],[i?.payload]);return(0,t.jsxs)("div",{id:"purchase-bar",className:"sticky left-0 top-0 z-[45] w-full border-b border-[#E4E5E6] bg-white",children:[(0,t.jsx)(l.Container,{children:(0,t.jsxs)("div",{className:"tablet:justify-between laptop-md:gap-16 tablet:gap-0 tablet:w-full flex flex-wrap items-center gap-[10px]",children:[(0,t.jsxs)("div",{className:"laptop-md:pt-6 laptop-md:pb-0 min-w-0 flex-1 py-3",children:[(0,t.jsx)(l.Heading,{size:2,className:"line-clamp-2 text-wrap",html:i?.title}),(0,t.jsx)("div",{className:"laptop-md:block mt-3 hidden",children:(0,t.jsx)(s.default,{tabs:d,className:"",renderRating:r,onSpyNavItemClick:a})})]}),(0,t.jsx)("div",{className:"laptop-md:block hidden shrink-0",children:o??(0,t.jsx)(c.ProductActions,{totalSavingsSlot:e})})]})}),(0,t.jsxs)(l.Container,{className:"laptop-md:hidden relative",children:[(0,t.jsx)("div",{className:"absolute left-0 top-0 h-px w-full bg-[#E4E5E6]"}),(0,t.jsx)(s.default,{tabs:d,renderRating:r,onSpyNavItemClick:a})]})]})};var E=(0,f.withLayout)(B);
2
2
  //# sourceMappingURL=index.js.map