@anker-in/headless-ui 1.3.26 → 1.3.27

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 (14) hide show
  1. package/dist/cjs/biz-components/Graphic/index.js +1 -1
  2. package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
  3. package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
  4. package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js.map +3 -3
  5. package/dist/cjs/biz-components/SecondaryBanner/index.js +1 -1
  6. package/dist/cjs/biz-components/SecondaryBanner/index.js.map +1 -1
  7. package/dist/esm/biz-components/Graphic/index.js +1 -1
  8. package/dist/esm/biz-components/Graphic/index.js.map +2 -2
  9. package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
  10. package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js.map +3 -3
  11. package/dist/esm/biz-components/SecondaryBanner/index.js +1 -1
  12. package/dist/esm/biz-components/SecondaryBanner/index.js.map +1 -1
  13. package/package.json +1 -1
  14. package/style.css +18 -12
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})},$=(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 T=(e,o,s)=>(s=e!=null?q(Z(e)):{},$(o||!e||!e.__esModule?v(s,"default",{value:e,enumerable:!0}):s,e)),K=e=>$(v({},"__esModule",{value:!0}),e);var ee={};J(ee,{default:()=>W});module.exports=K(ee);var t=require("react/jsx-runtime"),G=require("react-responsive"),l=T(require("react")),S=require("react-dom"),c=require("../../helpers/utils.js"),B=require("../../shared/Styles.js"),D=T(require("../SwiperBox/index.js")),p=require("../../components/index.js"),L=T(require("../Title/index.js")),U=require("../VideoModal/index.js"),z=require("../TextModal/index.js"),I=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js"),E=require("../AiuiProvider/index.js"),se=require("swiper/css");const u="image",h="graphic",C=e=>{let o="";const s=d=>(d?.url&&(o=d.url),o),n=s(e.lgDesktop),i=s(e.desktop),a=s(e.laptop),b=s(e.tablet),g=e.default?.url;return[`${n} 9999`,`${i} 1919`,`${a} 1439`,`${b} 1024`,`${g} 768`].join(", ")},V="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:""}),a=o?.descriptionTag||"h3",b=()=>{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]"}},g=r=>{e?.description&&i({visible:!0,x:r.clientX,y:r.clientY,text:e.description})},d=()=>{i(r=>({...r,visible:!1}))};(0,I.useExposure)(s,{componentType:u,componentName:h,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const k=e?.href?"a":"div",y=e?.href?{href:(0,w.trackUrlRef)(e.href,`${u}_${h}`)}:{};return(0,t.jsx)("div",{ref:s,className:(0,c.cn)(b(),"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)("rounded-box absolute inset-0 overflow-hidden"),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||"",`${u}_${h}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${u}#${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?C(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?C(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),(0,t.jsxs)(k,{...y,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:g,onMouseLeave:d,children:[e?.title?(0,t.jsx)(p.Heading,{html:e?.description,style:{color:e?.textColor},as:a,className:`${V} graphic-description`}):(0,t.jsx)(a,{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${V} 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"),`${u}_${h}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${u}#${h}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},P=l.default.forwardRef(({data:e,className:o,...s},n)=>{const i=(0,G.useMediaQuery)({query:"(max-width: 768px)"}),a=(0,l.useRef)(null),[b,g]=(0,l.useState)(!1),[d,k]=(0,l.useState)(""),[y,r]=(0,l.useState)(""),[H,R]=(0,l.useState)(""),[j,M]=(0,l.useState)(null),[_,N]=(0,l.useState)(!1),{locale:A="us"}=(0,E.useAiuiContext)(),f=x=>{const m=e?.items?.length>3,Y=e?.items?.length>2;switch(x){case 1440:return m?4:e?.items?.length;case 1024:return m?3:e?.items?.length;case 768:return e?.items?.length===1?1:m||Y?2.3:2;default:return e?.items?.length===1?1:1.2}};return(0,l.useImperativeHandle)(n,()=>a.current),(0,I.useExposure)(a,{componentType:u,componentName:h,componentTitle:e?.title}),(0,t.jsxs)("div",{...s,ref:a,className:(0,c.cn)("graphicBlock",o),children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(L.default,{data:{title:e?.title,align:e?.titleAlign??"left"}}),(0,t.jsx)(D.default,{id:"Graphic",className:(0,c.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:A,descriptionTag:e.descriptionTag,onVideoPlayBtnClick:(x,m)=>{g(!0),m?.isYouTube?r?.(m?.youtubeId||""):(k?.(m?.video?.url||""),R?.(m?.mobileVideo?.url||""))},onIconClick:x=>{N(!0),M(x)},title:e?.title}},Slide:O,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),(0,t.jsx)(U.VideoModal,{visible:b,youTubeId:y,onCloseModal:()=>g(!1),videoUrl:i&&H||d}),(0,t.jsx)(z.TextModal,{textVisible:_,extension:j?.extension,onCloseModal:()=>{N(!1),M(null)}})]})});P.displayName="Graphic";var W=(0,B.withLayout)(P);
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})},$=(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 T=(e,o,s)=>(s=e!=null?q(Z(e)):{},$(o||!e||!e.__esModule?v(s,"default",{value:e,enumerable:!0}):s,e)),K=e=>$(v({},"__esModule",{value:!0}),e);var ee={};J(ee,{default:()=>W});module.exports=K(ee);var t=require("react/jsx-runtime"),G=require("react-responsive"),l=T(require("react")),S=require("react-dom"),c=require("../../helpers/utils.js"),B=require("../../shared/Styles.js"),D=T(require("../SwiperBox/index.js")),p=require("../../components/index.js"),L=T(require("../Title/index.js")),U=require("../VideoModal/index.js"),z=require("../TextModal/index.js"),I=require("../../hooks/useExposure.js"),w=require("../../shared/trackUrlRef.js"),E=require("../AiuiProvider/index.js"),se=require("swiper/css");const d="image",h="graphic",C=e=>{let o="";const s=u=>(u?.url&&(o=u.url),o),n=s(e.lgDesktop),i=s(e.desktop),a=s(e.laptop),b=s(e.tablet),g=e.default?.url;return[`${n} 9999`,`${i} 1919`,`${a} 1439`,`${b} 1024`,`${g} 768`].join(", ")},V="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:""}),a=o?.descriptionTag||"h3",b=()=>{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]"}},g=r=>{e?.description&&i({visible:!0,x:r.clientX,y:r.clientY,text:e.description})},u=()=>{i(r=>({...r,visible:!1}))};(0,I.useExposure)(s,{componentType:d,componentName:h,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const k=e?.href?"a":"div",y=e?.href?{href:(0,w.trackUrlRef)(e.href,`${d}_${h}`)}:{};return(0,t.jsx)("div",{ref:s,className:(0,c.cn)(b(),"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)("rounded-box absolute inset-0 overflow-hidden"),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?C(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?C(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),(0,t.jsxs)(k,{...y,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:g,onMouseLeave:u,children:[e?.title?(0,t.jsx)(p.Heading,{html:e?.description,style:{color:e?.textColor},as:a,className:`${V} graphic-description`}):(0,t.jsx)(a,{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${V} graphic-description-item`}),typeof window<"u"&&n.visible&&(0,S.createPortal)((0,t.jsx)(p.Text,{as:"div",html:n.text,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`}}),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})]})]})})})},P=l.default.forwardRef(({data:e,className:o,...s},n)=>{const i=(0,G.useMediaQuery)({query:"(max-width: 768px)"}),a=(0,l.useRef)(null),[b,g]=(0,l.useState)(!1),[u,k]=(0,l.useState)(""),[y,r]=(0,l.useState)(""),[H,R]=(0,l.useState)(""),[j,M]=(0,l.useState)(null),[_,N]=(0,l.useState)(!1),{locale:A="us"}=(0,E.useAiuiContext)(),f=x=>{const m=e?.items?.length>3,Y=e?.items?.length>2;switch(x){case 1440:return m?4:e?.items?.length;case 1024:return m?3:e?.items?.length;case 768:return e?.items?.length===1?1:m||Y?2.3:2;default:return e?.items?.length===1?1:1.2}};return(0,l.useImperativeHandle)(n,()=>a.current),(0,I.useExposure)(a,{componentType:d,componentName:h,componentTitle:e?.title}),(0,t.jsxs)("div",{...s,ref:a,className:(0,c.cn)("graphicBlock",o),children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(L.default,{data:{title:e?.title,align:e?.titleAlign??"left"}}),(0,t.jsx)(D.default,{id:"Graphic",className:(0,c.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:A,descriptionTag:e.descriptionTag,onVideoPlayBtnClick:(x,m)=>{g(!0),m?.isYouTube?r?.(m?.youtubeId||""):(k?.(m?.video?.url||""),R?.(m?.mobileVideo?.url||""))},onIconClick:x=>{N(!0),M(x)},title:e?.title}},Slide:O,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),(0,t.jsx)(U.VideoModal,{visible:b,youTubeId:y,onCloseModal:()=>g(!1),videoUrl:i&&H||u}),(0,t.jsx)(z.TextModal,{textVisible:_,extension:j?.extension,onCloseModal:()=>{N(!1),M(null)}})]})});P.displayName="Graphic";var W=(0,B.withLayout)(P);
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'\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 descriptionTag?: 'h3' | 'h4' | 'h5' | 'h6'\n titleAlign?: 'center' | 'left'\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 Tag = configuration?.descriptionTag || 'h3'\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 className={cn('rounded-box absolute inset-0 overflow-hidden')}>\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={Tag}\n className={`${descriptionClass} graphic-description`}\n />\n ) : (\n <Tag\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, align: data?.titleAlign ?? 'left' }} />}\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 descriptionTag: data.descriptionTag,\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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",
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 descriptionTag?: 'h3' | 'h4' | 'h5' | 'h6'\n titleAlign?: 'center' | 'left'\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 Tag = configuration?.descriptionTag || 'h3'\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 className={cn('rounded-box absolute inset-0 overflow-hidden')}>\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={Tag}\n className={`${descriptionClass} graphic-description`}\n />\n ) : (\n <Tag\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 <Text\n as=\"div\"\n html={tooltip.text}\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 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, align: data?.titleAlign ?? 'left' }} />}\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 descriptionTag: data.descriptionTag,\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
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", "Tag", "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/HeroBannerCarousel.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var J=Object.create;var L=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(a,s)=>{for(var p in s)L(a,p,{get:s[p],enumerable:!0})},$=(a,s,p,f)=>{if(s&&typeof s=="object"||typeof s=="function")for(let d of U(s))!Y.call(a,d)&&d!==p&&L(a,d,{get:()=>s[d],enumerable:!(f=K(s,d))||f.enumerable});return a};var O=(a,s,p)=>(p=a!=null?J(X(a)):{},$(s||!a||!a.__esModule?L(p,"default",{value:a,enumerable:!0}):p,a)),ee=a=>$(L({},"__esModule",{value:!0}),a);var oe={};Z(oe,{default:()=>ie});module.exports=ee(oe);var e=require("react/jsx-runtime"),n=O(require("react")),_=require("swiper/react"),g=require("swiper/modules"),D=require("react-responsive"),F=O(require("../../helpers/ScrollLoadVideo.js")),m=require("../../helpers/index.js"),i=require("../../components/index.js"),se=require("swiper/css"),le=require("swiper/css/navigation"),pe=require("swiper/css/pagination");const te=()=>(0,e.jsxs)("svg",{className:"lg-desktop:size-14 size-10",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"})]}),ae=()=>(0,e.jsxs)("svg",{className:"lg-desktop:size-14 size-10",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"})]}),re=({data:a,isActive:s,videoRef:p,slideIndex:f,onPrimaryClick:d,onSecondaryClick:E,onTertiaryClick:I})=>{const{pcVideo:N,padVideo:b,mobileVideo:y,pcImage:w,padImage:x,mobileImage:v,isVideoLoop:M=!0,isShowVideo:C,title:B,subtitle:j,label:T,endDate:h,endDate_tz:R,dateFormat:H,iconArray:u,caption:S,blockLink:P,primaryButton:l,secondaryButton:t,tertiaryButton:r,theme:k="light",align:c="left",titleSize:z,size:V="default"}=a,W=(0,D.useMediaQuery)({query:"(max-width: 768px)"}),Q=(0,D.useMediaQuery)({query:"(max-width: 1024px)"}),G=W?y?.url||N?.url||"":Q?b?.url||N?.url||y?.url||"":N?.url||y?.url||"";return(0,e.jsxs)("div",{"data-ui-component-id":"HeroBannerSlide",className:(0,m.cn)("text-info-primary relative w-full overflow-hidden",k==="dark"?"aiui-dark":"",V==="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:[P&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:P,tabIndex:-1,"aria-hidden":"true"}),C?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{"data-video-poster":"true",className:"absolute inset-0 size-full transition-opacity duration-500",children:(0,e.jsx)(i.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:f===0?"eager":"lazy",fetchPriority:f===0?"high":"auto",alt:w?.alt||"",source:`${w?.url||""} , ${x?.url??(v?.url||"")} 1024, ${v?.url||""} 767`})}),(0,e.jsx)(F.default,{videoRef:p,src:G,poster:void 0,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:M,playsInline:!0,onPlaying:o=>{o.currentTarget.closest('[data-ui-component-id="HeroBannerSlide"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")}})]}):(0,e.jsx)(i.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:w?.alt||"",source:`${w?.url||""} , ${x?.url??(v?.url||"")} 1024, ${v?.url||""} 767`}),(0,e.jsxs)("div",{className:(0,m.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]",c==="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,m.cn)("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]",c==="center"?"text-center":"laptop:text-left"),children:[T&&(0,e.jsx)(i.Text,{size:2,as:"p",className:(0,m.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:T}),B&&(0,e.jsx)(i.Heading,{as:z==="4"?"h1":"h2",html:B,size:z?Number(z||"5"):V==="sm"?4:5}),j&&(0,e.jsx)(i.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:j}),h&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(i.Countdown,{endDate:h,endDate_tz:R,dateFormat:H,variant:"spacious",align:c})})]}),(l?.text||t?.text||r?.text)&&(0,e.jsxs)("div",{className:(0,m.cn)("lg-desktop:gap-3 flex flex-wrap items-center gap-2",c==="center"?"justify-center":"laptop:justify-start"),children:[t?.text&&(0,e.jsx)(i.Button,{size:"lg",variant:"secondary",as:t?.isCustomSecondaryButton?"button":"a",href:t.link,target:t?.target,rel:t?.target==="_blank"?t?.rel??"noopener noreferrer":t?.rel,onClick:o=>t?.isCustomSecondaryButton&&E?.(a,o,t?.customSecondaryEventId),children:t.text}),l?.text&&(0,e.jsx)(i.Button,{size:"lg",variant:"primary",as:l?.isCustomPrimaryButton?"button":"a",href:l.link,target:l?.target,rel:l?.target==="_blank"?l?.rel??"noopener noreferrer":l?.rel,onClick:o=>l?.isCustomPrimaryButton&&d?.(a,o,l?.customPrimaryEventId),children:l.text}),r?.text&&(0,e.jsx)(i.Button,{size:"lg",variant:"link",className:"tablet:basis-auto basis-full",as:r?.isCustomTertiaryButton?"button":"a",href:r.link,target:r?.target,rel:r?.target==="_blank"?r?.rel??"noopener noreferrer":r?.rel,onClick:o=>r?.isCustomTertiaryButton&&I?.(a,o,r?.customTertiaryEventId),children:r.text})]}),u&&u.length>0&&(0,e.jsx)("div",{className:(0,m.cn)("flex items-center gap-2",c==="center"?"justify-center":"justify-start"),children:u.map(o=>(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:o?.pcImage?.alt||"",source:o?.pcImage?.url})},o?.pcImage?.url||o?.pcImage?.alt))})]}),S&&S.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:S.map((o,A)=>(0,e.jsxs)(n.default.Fragment,{children:[(0,e.jsx)(i.Text,{size:2,className:"hero-banner-product-text tablet:w-[108px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]",html:o.title}),A<S.length-1&&(0,e.jsx)("div",{className:"bg-info-primary w-px"})]},o.title))})]})},q=n.default.forwardRef(({data:a,className:s,classNames:p={},onPrimaryClick:f,onSecondaryClick:d,onTertiaryClick:E,...I},N)=>{const b=a.items||[],y=a.carousel,w=a.size??"default",x=(0,n.useRef)(null),[v,M]=(0,n.useState)(0),[C,B]=(0,n.useState)(null),T=(b[v]?.theme??"light")==="dark";(0,n.useEffect)(()=>{const t=x.current;!t||!C||t.pagination&&(t.pagination.el=C,t.pagination.init(),t.pagination.render(),t.pagination.update())},[C]);const h=(0,n.useRef)(b.map(()=>n.default.createRef())),R=(y?.showArrows??!0)&&b.length>1,H=y?.showDots??!0,u=y?.autoplaySeconds,S=u!==void 0&&u>0?[g.Navigation,g.Pagination,g.Autoplay]:[g.Navigation,g.Pagination],P=u!==void 0&&u>0?{delay:Math.max(u*1e3,3e3),disableOnInteraction:!1}:!1;(0,n.useEffect)(()=>{h.current.forEach((t,r)=>{r!==0&&t.current&&(t.current.pause(),t.current.currentTime=0)})},[]);const l=(0,n.useCallback)(t=>{const r=t.realIndex;h.current.forEach((c,z)=>{z!==r&&c.current&&(c.current.pause(),c.current.currentTime=0)});const k=h.current[r];k?.current&&k.current.paused&&k.current.play()?.catch(()=>{}),M(r)},[]);return(0,e.jsxs)("div",{ref:N,className:(0,m.cn)("hero-banner-carousel group relative w-full overflow-hidden",w==="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]",{"aiui-dark":b[v]?.theme==="dark"},s),...I,children:[(0,e.jsx)(_.Swiper,{onSwiper:t=>x.current=t,onSlideChange:l,modules:S,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:P,pagination:H?{clickable:!0,el:C,renderBullet:(t,r)=>`<span class="${r} banner-dot"></span>`}:!1,children:b.map((t,r)=>(0,e.jsx)(_.SwiperSlide,{children:({isActive:k})=>(0,e.jsx)(re,{data:t,isActive:k,slideIndex:r,videoRef:h.current[r],onPrimaryClick:f,onSecondaryClick:d,onTertiaryClick:E})},r))}),R&&(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 scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>x.current?.slidePrev(),"aria-label":"Previous banner",children:(0,e.jsx)(te,{})}),(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>x.current?.slideNext(),"aria-label":"Next banner",children:(0,e.jsx)(ae,{})})]}),H&&(0,e.jsx)("div",{ref:B,style:{"--swiper-pagination-bottom":"0px"},className:(0,m.cn)("hero-banner-pagination swiper-pagination lg-desktop:!bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary absolute !bottom-4 !left-1/2 z-20 flex !w-auto !-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]:size-2 [&_.banner-dot]:rounded-full [&_.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",{"aiui-dark":T})})]})});q.displayName="HeroBannerCarousel";var ie=q;
1
+ "use strict";"use client";var J=Object.create;var L=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(a,l)=>{for(var p in l)L(a,p,{get:l[p],enumerable:!0})},$=(a,l,p,f)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of U(l))!Y.call(a,c)&&c!==p&&L(a,c,{get:()=>l[c],enumerable:!(f=K(l,c))||f.enumerable});return a};var O=(a,l,p)=>(p=a!=null?J(X(a)):{},$(l||!a||!a.__esModule?L(p,"default",{value:a,enumerable:!0}):p,a)),ee=a=>$(L({},"__esModule",{value:!0}),a);var oe={};Z(oe,{default:()=>ie});module.exports=ee(oe);var e=require("react/jsx-runtime"),s=O(require("react")),_=require("swiper/react"),g=require("swiper/modules"),V=require("react-responsive"),F=O(require("../../helpers/ScrollLoadVideo.js")),m=require("../../helpers/index.js"),o=require("../../components/index.js"),se=require("swiper/css"),le=require("swiper/css/navigation"),pe=require("swiper/css/pagination");const te=()=>(0,e.jsxs)("svg",{className:"lg-desktop:size-14 size-10",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"})]}),ae=()=>(0,e.jsxs)("svg",{className:"lg-desktop:size-14 size-10",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"})]}),re=({data:a,isActive:l,videoRef:p,slideIndex:f,containerSize:c="default",onPrimaryClick:E,onSecondaryClick:I,onTertiaryClick:M})=>{const{pcVideo:d,padVideo:S,mobileVideo:v,pcImage:u,padImage:N,mobileImage:h,isVideoLoop:k=!0,isShowVideo:j,title:R,subtitle:B,label:b,endDate:T,endDate_tz:H,dateFormat:y,iconArray:z,caption:w,blockLink:P,primaryButton:t,secondaryButton:r,tertiaryButton:i,theme:C="light",align:x="left",titleSize:D}=a,W=(0,V.useMediaQuery)({query:"(max-width: 768px)"}),Q=(0,V.useMediaQuery)({query:"(max-width: 1024px)"}),G=W?v?.url||d?.url||"":Q?S?.url||d?.url||v?.url||"":d?.url||v?.url||"";return(0,e.jsxs)("div",{"data-ui-component-id":"HeroBannerSlide",className:(0,m.cn)("text-info-primary relative w-full overflow-hidden",C==="dark"?"aiui-dark":"",c==="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:[P&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:P,tabIndex:-1,"aria-hidden":"true"}),j?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{"data-video-poster":"true",className:"absolute inset-0 size-full transition-opacity duration-500",children:(0,e.jsx)(o.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:f===0?"eager":"lazy",fetchPriority:f===0?"high":"auto",alt:u?.alt||"",source:`${u?.url||""} , ${N?.url??(h?.url||"")} 1024, ${h?.url||""} 767`})}),(0,e.jsx)(F.default,{videoRef:p,src:G,poster:void 0,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:k,playsInline:!0,onPlaying:n=>{n.currentTarget.closest('[data-ui-component-id="HeroBannerSlide"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")}})]}):(0,e.jsx)(o.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:u?.alt||"",source:`${u?.url||""} , ${N?.url??(h?.url||"")} 1024, ${h?.url||""} 767`}),(0,e.jsxs)("div",{className:(0,m.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]",x==="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,m.cn)("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]",x==="center"?"text-center":"laptop:text-left"),children:[b&&(0,e.jsx)(o.Text,{size:2,as:"p",className:(0,m.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:b}),R&&(0,e.jsx)(o.Heading,{as:D==="4"?"h1":"h2",html:R,size:D?Number(D||"5"):c==="sm"?4:5}),B&&(0,e.jsx)(o.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:B}),T&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(o.Countdown,{endDate:T,endDate_tz:H,dateFormat:y,variant:"spacious",align:x})})]}),(t?.text||r?.text||i?.text)&&(0,e.jsxs)("div",{className:(0,m.cn)("lg-desktop:gap-3 flex flex-wrap items-center gap-2",x==="center"?"justify-center":"laptop:justify-start"),children:[r?.text&&(0,e.jsx)(o.Button,{size:"lg",variant:"secondary",as:r?.isCustomSecondaryButton?"button":"a",href:r.link,target:r?.target,rel:r?.target==="_blank"?r?.rel??"noopener noreferrer":r?.rel,onClick:n=>r?.isCustomSecondaryButton&&I?.(a,n,r?.customSecondaryEventId),children:r.text}),t?.text&&(0,e.jsx)(o.Button,{size:"lg",variant:"primary",as:t?.isCustomPrimaryButton?"button":"a",href:t.link,target:t?.target,rel:t?.target==="_blank"?t?.rel??"noopener noreferrer":t?.rel,onClick:n=>t?.isCustomPrimaryButton&&E?.(a,n,t?.customPrimaryEventId),children:t.text}),i?.text&&(0,e.jsx)(o.Button,{size:"lg",variant:"link",className:"tablet:basis-auto basis-full",as:i?.isCustomTertiaryButton?"button":"a",href:i.link,target:i?.target,rel:i?.target==="_blank"?i?.rel??"noopener noreferrer":i?.rel,onClick:n=>i?.isCustomTertiaryButton&&M?.(a,n,i?.customTertiaryEventId),children:i.text})]}),z&&z.length>0&&(0,e.jsx)("div",{className:(0,m.cn)("flex items-center gap-2",x==="center"?"justify-center":"justify-start"),children:z.map(n=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(o.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:n?.pcImage?.alt||"",source:n?.pcImage?.url})},n?.pcImage?.url||n?.pcImage?.alt))})]}),w&&w.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:w.map((n,A)=>(0,e.jsxs)(s.default.Fragment,{children:[(0,e.jsx)(o.Text,{size:2,className:"hero-banner-product-text tablet:w-[108px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]",html:n.title}),A<w.length-1&&(0,e.jsx)("div",{className:"bg-info-primary w-px"})]},n.title))})]})},q=s.default.forwardRef(({data:a,className:l,classNames:p={},onPrimaryClick:f,onSecondaryClick:c,onTertiaryClick:E,...I},M)=>{const d=a.items||[],S=a.carousel,v=a.size??"default",u=(0,s.useRef)(null),[N,h]=(0,s.useState)(0),[k,j]=(0,s.useState)(null),B=(d[N]?.theme??"light")==="dark";(0,s.useEffect)(()=>{const t=u.current;!t||!k||t.pagination&&(t.pagination.el=k,t.pagination.init(),t.pagination.render(),t.pagination.update())},[k]);const b=(0,s.useRef)(d.map(()=>s.default.createRef())),T=(S?.showArrows??!0)&&d.length>1,H=S?.showDots??!0,y=S?.autoplaySeconds,z=y!==void 0&&y>0?[g.Navigation,g.Pagination,g.Autoplay]:[g.Navigation,g.Pagination],w=y!==void 0&&y>0?{delay:Math.max(y*1e3,3e3),disableOnInteraction:!1}:!1;(0,s.useEffect)(()=>{b.current.forEach((t,r)=>{r!==0&&t.current&&(t.current.pause(),t.current.currentTime=0)})},[]);const P=(0,s.useCallback)(t=>{const r=t.realIndex;b.current.forEach((C,x)=>{x!==r&&C.current&&(C.current.pause(),C.current.currentTime=0)});const i=b.current[r];i?.current&&i.current.paused&&i.current.play()?.catch(()=>{}),h(r)},[]);return(0,e.jsxs)("div",{ref:M,className:(0,m.cn)("hero-banner-carousel group relative w-full overflow-hidden",v==="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]",{"aiui-dark":d[N]?.theme==="dark"},l),...I,children:[(0,e.jsx)(_.Swiper,{onSwiper:t=>u.current=t,onSlideChange:P,modules:z,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:w,pagination:H?{clickable:!0,el:k,renderBullet:(t,r)=>`<span class="${r} banner-dot"></span>`}:!1,children:d.map((t,r)=>(0,e.jsx)(_.SwiperSlide,{children:({isActive:i})=>(0,e.jsx)(re,{data:t,isActive:i,slideIndex:r,videoRef:b.current[r],containerSize:v,onPrimaryClick:f,onSecondaryClick:c,onTertiaryClick:E})},r))}),T&&(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 scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>u.current?.slidePrev(),"aria-label":"Previous banner",children:(0,e.jsx)(te,{})}),(0,e.jsx)("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>u.current?.slideNext(),"aria-label":"Next banner",children:(0,e.jsx)(ae,{})})]}),H&&(0,e.jsx)("div",{ref:j,style:{"--swiper-pagination-bottom":"0px"},className:(0,m.cn)("hero-banner-pagination swiper-pagination lg-desktop:!bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary absolute !bottom-4 !left-1/2 z-20 flex !w-auto !-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]:size-2 [&_.banner-dot]:rounded-full [&_.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",{"aiui-dark":B})})]})});q.displayName="HeroBannerCarousel";var ie=q;
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 { useMediaQuery } from 'react-responsive'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { cn } from '../../helpers/index.js'\nimport type { HeroBannerProps, HeroBannerSlideData } from './types.js'\nimport { Button, Heading, Text, Countdown, Picture } 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\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\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\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\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 slideIndex: number\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n onTertiaryClick?: (data: any, e: any, id?: string) => void\n}\n\nconst HeroBannerSlide = ({\n data,\n isActive: _isActive,\n videoRef,\n slideIndex,\n onPrimaryClick,\n onSecondaryClick,\n onTertiaryClick,\n}: HeroBannerSlideProps) => {\n const {\n pcVideo,\n padVideo,\n mobileVideo,\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = true,\n isShowVideo,\n title,\n subtitle,\n label,\n endDate,\n endDate_tz,\n dateFormat,\n iconArray,\n caption,\n blockLink,\n primaryButton,\n secondaryButton,\n tertiaryButton,\n theme = 'light',\n align = 'left',\n titleSize,\n size = 'default',\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const videoSrc = isMobile\n ? mobileVideo?.url || pcVideo?.url || ''\n : isPad\n ? padVideo?.url || pcVideo?.url || mobileVideo?.url || ''\n : pcVideo?.url || mobileVideo?.url || ''\n\n return (\n <div\n data-ui-component-id=\"HeroBannerSlide\"\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 {blockLink && <a className=\"absolute inset-0 z-10\" href={blockLink} tabIndex={-1} aria-hidden=\"true\"></a>}\n {isShowVideo ? (\n <>\n {/* Poster cover layer: slide 0 = eager+high, others = lazy+auto */}\n <div data-video-poster=\"true\" className=\"absolute inset-0 size-full transition-opacity duration-500\">\n <Picture\n className=\"absolute inset-0 size-full\"\n imgClassName=\"size-full object-cover\"\n loading={slideIndex === 0 ? 'eager' : 'lazy'}\n fetchPriority={slideIndex === 0 ? 'high' : 'auto'}\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n </div>\n {/* Video layer: lazy-loaded, overlays Picture via DOM order */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={videoSrc}\n poster={undefined}\n className=\"absolute inset-0 size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n onPlaying={(e: React.SyntheticEvent<HTMLVideoElement>) => {\n const slide = (e.currentTarget as HTMLVideoElement).closest('[data-ui-component-id=\"HeroBannerSlide\"]')\n slide?.querySelector<HTMLElement>('[data-video-poster=\"true\"]')?.classList.add('opacity-0')\n }}\n />\n </>\n ) : (\n <Picture\n className=\"absolute inset-0 size-full\"\n imgClassName=\"size-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\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 {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 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 {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\n {(primaryButton?.text || secondaryButton?.text || tertiaryButton?.text) && (\n <div\n className={cn(\n 'lg-desktop:gap-3 flex flex-wrap 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 {tertiaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"link\"\n className=\"tablet:basis-auto basis-full\"\n as={tertiaryButton?.isCustomTertiaryButton ? 'button' : 'a'}\n href={tertiaryButton.link}\n target={tertiaryButton?.target}\n rel={\n tertiaryButton?.target === '_blank'\n ? (tertiaryButton?.rel ?? 'noopener noreferrer')\n : tertiaryButton?.rel\n }\n onClick={e =>\n tertiaryButton?.isCustomTertiaryButton &&\n onTertiaryClick?.(data, e, tertiaryButton?.customTertiaryEventId)\n }\n >\n {tertiaryButton.text}\n </Button>\n )}\n </div>\n )}\n {iconArray && iconArray.length > 0 && (\n <div className={cn('flex items-center gap-2', align === 'center' ? 'justify-center' : 'justify-start')}>\n {iconArray.map((icon: any) => (\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 )}\n </div>\n\n {caption && caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c: { title: string }, index: number) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className=\"hero-banner-product-text tablet:w-[108px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]\"\n html={c.title}\n />\n {index < caption.length - 1 && <div className=\"bg-info-primary w-px\" />}\n </React.Fragment>\n ))}\n </div>\n )}\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 onTertiaryClick?: (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 onTertiaryClick: _onTertiaryClick,\n ...rest\n },\n ref\n ) => {\n const items = data.items || []\n const carousel = data.carousel\n const containerSize = data.size ?? 'default'\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [activeIndex, setActiveIndex] = useState(0)\n const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n const activeTheme = items[activeIndex]?.theme ?? 'light'\n const isDark = activeTheme === 'dark'\n\n useEffect(() => {\n const swiper = swiperRef.current\n if (!swiper || !paginationEl) return\n if (swiper.pagination) {\n swiper.pagination.el = paginationEl\n swiper.pagination.init()\n swiper.pagination.render()\n swiper.pagination.update()\n }\n }, [paginationEl])\n\n const videoRefs = useRef<React.RefObject<HTMLVideoElement>[]>(items.map(() => React.createRef<HTMLVideoElement>()))\n\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n const showDots = carousel?.showDots ?? true\n\n const autoplaySeconds = carousel?.autoplaySeconds\n const swiperModules =\n autoplaySeconds !== undefined && autoplaySeconds > 0\n ? [Navigation, Pagination, Autoplay]\n : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds !== undefined && autoplaySeconds > 0\n ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n : false\n\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 const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n videoRefs.current.forEach((vRef, i) => {\n if (i !== newIndex && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n const incoming = videoRefs.current[newIndex]\n if (incoming?.current && incoming.current.paused) {\n const p = incoming.current.play()\n p?.catch(() => {})\n }\n setActiveIndex(newIndex)\n }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'hero-banner-carousel group relative w-full overflow-hidden',\n containerSize === '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 { 'aiui-dark': items[activeIndex]?.theme === 'dark' },\n className\n )}\n {...rest}\n >\n <Swiper\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: paginationEl,\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 slideIndex={index}\n videoRef={videoRefs.current[index]}\n onPrimaryClick={_onPrimaryClick}\n onSecondaryClick={_onSecondaryClick}\n onTertiaryClick={_onTertiaryClick}\n />\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n\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 scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\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 scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next banner\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {showDots && (\n <div\n ref={setPaginationEl}\n style={{ '--swiper-pagination-bottom': '0px' } as React.CSSProperties}\n className={cn(\n 'hero-banner-pagination swiper-pagination lg-desktop:!bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary absolute !bottom-4 !left-1/2 z-20 flex !w-auto !-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]:size-2 [&_.banner-dot]:rounded-full [&_.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 { 'aiui-dark': isDark }\n )}\n />\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_react_responsive", "import_ScrollLoadVideo", "import_helpers", "import_components", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "HeroBannerSlide", "data", "_isActive", "videoRef", "slideIndex", "onPrimaryClick", "onSecondaryClick", "onTertiaryClick", "pcVideo", "padVideo", "mobileVideo", "pcImage", "padImage", "mobileImage", "isVideoLoop", "isShowVideo", "title", "subtitle", "label", "endDate", "endDate_tz", "dateFormat", "iconArray", "caption", "blockLink", "primaryButton", "secondaryButton", "tertiaryButton", "theme", "align", "titleSize", "size", "isMobile", "isPad", "videoSrc", "ScrollLoadVideo", "e", "icon", "c", "index", "React", "HeroBannerCarousel", "className", "_classNames", "_onPrimaryClick", "_onSecondaryClick", "_onTertiaryClick", "rest", "ref", "items", "carousel", "containerSize", "swiperRef", "activeIndex", "setActiveIndex", "paginationEl", "setPaginationEl", "isDark", "swiper", "videoRefs", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "vRef", "i", "handleSlideChange", "newIndex", "incoming", "s", "_index", "slideData", "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 { useMediaQuery } from 'react-responsive'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { cn } from '../../helpers/index.js'\nimport type { HeroBannerProps, HeroBannerSlideData } from './types.js'\nimport { Button, Heading, Text, Countdown, Picture } 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\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\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\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\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 slideIndex: number\n containerSize?: 'default' | 'sm'\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n onTertiaryClick?: (data: any, e: any, id?: string) => void\n}\n\nconst HeroBannerSlide = ({\n data,\n isActive: _isActive,\n videoRef,\n slideIndex,\n containerSize = 'default',\n onPrimaryClick,\n onSecondaryClick,\n onTertiaryClick,\n}: HeroBannerSlideProps) => {\n const {\n pcVideo,\n padVideo,\n mobileVideo,\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = true,\n isShowVideo,\n title,\n subtitle,\n label,\n endDate,\n endDate_tz,\n dateFormat,\n iconArray,\n caption,\n blockLink,\n primaryButton,\n secondaryButton,\n tertiaryButton,\n theme = 'light',\n align = 'left',\n titleSize,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const videoSrc = isMobile\n ? mobileVideo?.url || pcVideo?.url || ''\n : isPad\n ? padVideo?.url || pcVideo?.url || mobileVideo?.url || ''\n : pcVideo?.url || mobileVideo?.url || ''\n\n return (\n <div\n data-ui-component-id=\"HeroBannerSlide\"\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n theme === 'dark' ? 'aiui-dark' : '',\n containerSize === '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 {blockLink && <a className=\"absolute inset-0 z-10\" href={blockLink} tabIndex={-1} aria-hidden=\"true\"></a>}\n {isShowVideo ? (\n <>\n {/* Poster cover layer: slide 0 = eager+high, others = lazy+auto */}\n <div data-video-poster=\"true\" className=\"absolute inset-0 size-full transition-opacity duration-500\">\n <Picture\n className=\"absolute inset-0 size-full\"\n imgClassName=\"size-full object-cover\"\n loading={slideIndex === 0 ? 'eager' : 'lazy'}\n fetchPriority={slideIndex === 0 ? 'high' : 'auto'}\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n </div>\n {/* Video layer: lazy-loaded, overlays Picture via DOM order */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={videoSrc}\n poster={undefined}\n className=\"absolute inset-0 size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n onPlaying={(e: React.SyntheticEvent<HTMLVideoElement>) => {\n const slide = (e.currentTarget as HTMLVideoElement).closest('[data-ui-component-id=\"HeroBannerSlide\"]')\n slide?.querySelector<HTMLElement>('[data-video-poster=\"true\"]')?.classList.add('opacity-0')\n }}\n />\n </>\n ) : (\n <Picture\n className=\"absolute inset-0 size-full\"\n imgClassName=\"size-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\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 {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 size={titleSize ? (Number(titleSize || '5') as any) : containerSize === '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 {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\n {(primaryButton?.text || secondaryButton?.text || tertiaryButton?.text) && (\n <div\n className={cn(\n 'lg-desktop:gap-3 flex flex-wrap 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 {tertiaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"link\"\n className=\"tablet:basis-auto basis-full\"\n as={tertiaryButton?.isCustomTertiaryButton ? 'button' : 'a'}\n href={tertiaryButton.link}\n target={tertiaryButton?.target}\n rel={\n tertiaryButton?.target === '_blank'\n ? (tertiaryButton?.rel ?? 'noopener noreferrer')\n : tertiaryButton?.rel\n }\n onClick={e =>\n tertiaryButton?.isCustomTertiaryButton &&\n onTertiaryClick?.(data, e, tertiaryButton?.customTertiaryEventId)\n }\n >\n {tertiaryButton.text}\n </Button>\n )}\n </div>\n )}\n {iconArray && iconArray.length > 0 && (\n <div className={cn('flex items-center gap-2', align === 'center' ? 'justify-center' : 'justify-start')}>\n {iconArray.map((icon: any) => (\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 )}\n </div>\n\n {caption && caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c: { title: string }, index: number) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className=\"hero-banner-product-text tablet:w-[108px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]\"\n html={c.title}\n />\n {index < caption.length - 1 && <div className=\"bg-info-primary w-px\" />}\n </React.Fragment>\n ))}\n </div>\n )}\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 onTertiaryClick?: (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 onTertiaryClick: _onTertiaryClick,\n ...rest\n },\n ref\n ) => {\n const items = data.items || []\n const carousel = data.carousel\n const containerSize = data.size ?? 'default'\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [activeIndex, setActiveIndex] = useState(0)\n const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n const activeTheme = items[activeIndex]?.theme ?? 'light'\n const isDark = activeTheme === 'dark'\n\n useEffect(() => {\n const swiper = swiperRef.current\n if (!swiper || !paginationEl) return\n if (swiper.pagination) {\n swiper.pagination.el = paginationEl\n swiper.pagination.init()\n swiper.pagination.render()\n swiper.pagination.update()\n }\n }, [paginationEl])\n\n const videoRefs = useRef<React.RefObject<HTMLVideoElement>[]>(items.map(() => React.createRef<HTMLVideoElement>()))\n\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n const showDots = carousel?.showDots ?? true\n\n const autoplaySeconds = carousel?.autoplaySeconds\n const swiperModules =\n autoplaySeconds !== undefined && autoplaySeconds > 0\n ? [Navigation, Pagination, Autoplay]\n : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds !== undefined && autoplaySeconds > 0\n ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n : false\n\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 const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n videoRefs.current.forEach((vRef, i) => {\n if (i !== newIndex && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n const incoming = videoRefs.current[newIndex]\n if (incoming?.current && incoming.current.paused) {\n const p = incoming.current.play()\n p?.catch(() => {})\n }\n setActiveIndex(newIndex)\n }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'hero-banner-carousel group relative w-full overflow-hidden',\n containerSize === '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 { 'aiui-dark': items[activeIndex]?.theme === 'dark' },\n className\n )}\n {...rest}\n >\n <Swiper\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: paginationEl,\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 slideIndex={index}\n videoRef={videoRefs.current[index]}\n containerSize={containerSize}\n onPrimaryClick={_onPrimaryClick}\n onSecondaryClick={_onSecondaryClick}\n onTertiaryClick={_onTertiaryClick}\n />\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n\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 scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\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 scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next banner\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {showDots && (\n <div\n ref={setPaginationEl}\n style={{ '--swiper-pagination-bottom': '0px' } as React.CSSProperties}\n className={cn(\n 'hero-banner-pagination swiper-pagination lg-desktop:!bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary absolute !bottom-4 !left-1/2 z-20 flex !w-auto !-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]:size-2 [&_.banner-dot]:rounded-full [&_.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 { 'aiui-dark': isDark }\n )}\n />\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_react_responsive", "import_ScrollLoadVideo", "import_helpers", "import_components", "import_css", "import_navigation", "import_pagination", "ChevronLeft", "ChevronRight", "HeroBannerSlide", "data", "_isActive", "videoRef", "slideIndex", "containerSize", "onPrimaryClick", "onSecondaryClick", "onTertiaryClick", "pcVideo", "padVideo", "mobileVideo", "pcImage", "padImage", "mobileImage", "isVideoLoop", "isShowVideo", "title", "subtitle", "label", "endDate", "endDate_tz", "dateFormat", "iconArray", "caption", "blockLink", "primaryButton", "secondaryButton", "tertiaryButton", "theme", "align", "titleSize", "isMobile", "isPad", "videoSrc", "ScrollLoadVideo", "e", "icon", "c", "index", "React", "HeroBannerCarousel", "className", "_classNames", "_onPrimaryClick", "_onSecondaryClick", "_onTertiaryClick", "rest", "ref", "items", "carousel", "swiperRef", "activeIndex", "setActiveIndex", "paginationEl", "setPaginationEl", "isDark", "swiper", "videoRefs", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "vRef", "i", "handleSlideChange", "newIndex", "incoming", "s", "_index", "slideData", "isActive"]
7
7
  }
package/dist/cjs/biz-components/SecondaryBanner/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var Q=Object.create;var u=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(n,t)=>{for(var e in t)u(n,e,{get:t[e],enumerable:!0})},z=(n,t,e,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of X(t))!Z.call(n,p)&&p!==e&&u(n,p,{get:()=>t[p],enumerable:!(m=U(t,p))||m.enumerable});return n};var g=(n,t,e)=>(e=n!=null?Q(Y(n)):{},z(t||!n||!n.__esModule?u(e,"default",{value:n,enumerable:!0}):e,n)),te=n=>z(u({},"__esModule",{value:!0}),n);var ne={};ee(ne,{default:()=>ae,secondaryBannerVariants:()=>P});module.exports=te(ne);var a=require("react/jsx-runtime"),C=g(require("react")),D=require("class-variance-authority"),x=g(require("jump.js")),o=require("../../helpers/index.js"),i=require("../../components/index.js"),N=require("../../shared/Styles.js"),L=g(require("../Media/index.js")),A=require("../AiuiProvider/index.js"),O=g(require("./SecondaryBannerCarousel.js"));const P=(0,D.cva)("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),M=C.forwardRef(({className:n,classNames:t={},data:e,jumpOptions:m={},isActive:p,...k},h)=>{const{pcImage:w,padImage:_,mobileImage:j,isVideoLoop:H,endDate:B,endDate_tz:V,dateFormat:E,size:J,iconArray:b,theme:R,primaryButton:s,secondaryButton:r,title:F,titleTag:W}=e,$=H??!0,y=J??"base",q=R??"light",G=W??"h1",{locale:T="us"}=(0,A.useAiuiContext)(),v={...{duration:500,offset:0},...m},f=C.useId(),d=F?`${f}-title`:void 0,I=e.subtitle?`${f}-subtitle`:void 0,S=e.superTitle?`${f}-super-title`:void 0,K=[S,I].filter(Boolean).join(" ")||void 0;return e.mode==="carousel"&&e.items&&e.items.length>0?(0,a.jsx)(O.default,{data:e,className:n,classNames:t,jumpOptions:m,ref:h,...k}):(0,a.jsxs)("section",{ref:h,role:"banner","aria-labelledby":d,"aria-describedby":K,className:(0,o.cn)({"aiui-dark":q==="dark"},P({size:y}),n,t?.root),...k,children:[(0,a.jsx)("div",{className:(0,o.cn)("absolute inset-0",{"h-fit":y==="xlg"}),children:(0,a.jsx)(L.default,{pcImage:w,padImage:_,mobileImage:j,className:"size-full",imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:$,playsInline:!0,autoPlay:p??!0})}),(0,a.jsxs)("div",{className:(0,o.cn)("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",t?.content),children:[(0,a.jsxs)("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[e.superTitle&&(0,a.jsx)(i.Text,{as:"p",size:2,id:S,className:(0,o.cn)("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",t?.superTitle),html:e.superTitle}),e.title&&(0,a.jsx)(i.Heading,{as:G,size:["xlg","lg"].includes(y)?5:4,id:d,className:(0,o.cn)("banner-title ",t?.title),html:e.title}),e.subtitle&&(0,a.jsx)(i.Text,{as:"p",size:3,id:I,className:(0,o.cn)("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",t?.subtitle),html:e.subtitle})]}),B&&(0,a.jsx)("div",{className:"banner-countdown",children:(0,a.jsx)(i.Countdown,{endDate:B,endDate_tz:V,dateFormat:E,variant:"spacious",className:"lg-desktop:mt-8 mt-6"})}),(0,a.jsxs)("div",{className:(0,o.cn)("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",t?.buttonGroup),children:[r?.text&&(0,a.jsx)(i.Button,{variant:"secondary",onClick:c=>{if(r.link?.startsWith("#")){c.preventDefault();const l=document.querySelector(r.link);l&&(0,x.default)(l,v)}r.onClick?.()},className:(0,o.cn)("",t?.secondaryButton),"aria-describedby":d,...r.link&&!r.link.startsWith("#")?{as:"a",href:(0,o.getLocalizedPath)(r.link,T)}:{},children:r.text}),s?.text&&(0,a.jsx)(i.Button,{onClick:c=>{if(s.link?.startsWith("#")){c.preventDefault();const l=document.querySelector(s.link);l&&(0,x.default)(l,v)}s.onClick?.()},className:(0,o.cn)("",t?.primaryButton),"aria-describedby":d,...s.link&&!s.link.startsWith("#")?{as:"a",href:(0,o.getLocalizedPath)(s.link,T)}:{},children:s.text})]}),Array.isArray(b)&&b.length>0&&(0,a.jsx)("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:b.map((c,l)=>c.pcImage?(0,a.jsx)(i.Picture,{source:c.pcImage.url,alt:c.pcImage.alt||`icon ${l+1}`,role:"img",className:"laptop:h-auto h-[48px] max-w-none",imgClassName:"h-full"},l):null)})]})]})});M.displayName="SecondaryBanner";var ae=(0,N.withLayout)(M);
1
+ "use strict";"use client";var Q=Object.create;var u=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(n,t)=>{for(var e in t)u(n,e,{get:t[e],enumerable:!0})},z=(n,t,e,m)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of X(t))!Z.call(n,p)&&p!==e&&u(n,p,{get:()=>t[p],enumerable:!(m=U(t,p))||m.enumerable});return n};var g=(n,t,e)=>(e=n!=null?Q(Y(n)):{},z(t||!n||!n.__esModule?u(e,"default",{value:n,enumerable:!0}):e,n)),te=n=>z(u({},"__esModule",{value:!0}),n);var ne={};ee(ne,{default:()=>ae,secondaryBannerVariants:()=>P});module.exports=te(ne);var a=require("react/jsx-runtime"),C=g(require("react")),D=require("class-variance-authority"),x=g(require("jump.js")),o=require("../../helpers/index.js"),i=require("../../components/index.js"),N=require("../../shared/Styles.js"),L=g(require("../Media/index.js")),A=require("../AiuiProvider/index.js"),O=g(require("./SecondaryBannerCarousel.js"));const P=(0,D.cva)("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1920/480] desktop:aspect-[1920/480] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1920/720] desktop:aspect-[1920/720] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1920/930] desktop:aspect-[1920/930] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1920/930] desktop:aspect-[1920/930] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),M=C.forwardRef(({className:n,classNames:t={},data:e,jumpOptions:m={},isActive:p,...k},h)=>{const{pcImage:w,padImage:_,mobileImage:j,isVideoLoop:H,endDate:B,endDate_tz:V,dateFormat:E,size:J,iconArray:b,theme:R,primaryButton:s,secondaryButton:r,title:F,titleTag:W}=e,$=H??!0,y=J??"base",q=R??"light",G=W??"h1",{locale:T="us"}=(0,A.useAiuiContext)(),v={...{duration:500,offset:0},...m},f=C.useId(),d=F?`${f}-title`:void 0,I=e.subtitle?`${f}-subtitle`:void 0,S=e.superTitle?`${f}-super-title`:void 0,K=[S,I].filter(Boolean).join(" ")||void 0;return e.mode==="carousel"&&e.items&&e.items.length>0?(0,a.jsx)(O.default,{data:e,className:n,classNames:t,jumpOptions:m,ref:h,...k}):(0,a.jsxs)("section",{ref:h,role:"banner","aria-labelledby":d,"aria-describedby":K,className:(0,o.cn)({"aiui-dark":q==="dark"},P({size:y}),n,t?.root),...k,children:[(0,a.jsx)("div",{className:(0,o.cn)("absolute inset-0",{"h-fit":y==="xlg"}),children:(0,a.jsx)(L.default,{pcImage:w,padImage:_,mobileImage:j,className:"size-full",imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:$,playsInline:!0,autoPlay:p??!0})}),(0,a.jsxs)("div",{className:(0,o.cn)("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",t?.content),children:[(0,a.jsxs)("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[e.superTitle&&(0,a.jsx)(i.Text,{as:"p",size:2,id:S,className:(0,o.cn)("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",t?.superTitle),html:e.superTitle}),e.title&&(0,a.jsx)(i.Heading,{as:G,size:["xlg","lg"].includes(y)?5:4,id:d,className:(0,o.cn)("banner-title ",t?.title),html:e.title}),e.subtitle&&(0,a.jsx)(i.Text,{as:"p",size:3,id:I,className:(0,o.cn)("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",t?.subtitle),html:e.subtitle})]}),B&&(0,a.jsx)("div",{className:"banner-countdown",children:(0,a.jsx)(i.Countdown,{endDate:B,endDate_tz:V,dateFormat:E,variant:"spacious",className:"lg-desktop:mt-8 mt-6"})}),(0,a.jsxs)("div",{className:(0,o.cn)("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",t?.buttonGroup),children:[r?.text&&(0,a.jsx)(i.Button,{variant:"secondary",onClick:c=>{if(r.link?.startsWith("#")){c.preventDefault();const l=document.querySelector(r.link);l&&(0,x.default)(l,v)}r.onClick?.()},className:(0,o.cn)("",t?.secondaryButton),"aria-describedby":d,...r.link&&!r.link.startsWith("#")?{as:"a",href:(0,o.getLocalizedPath)(r.link,T)}:{},children:r.text}),s?.text&&(0,a.jsx)(i.Button,{onClick:c=>{if(s.link?.startsWith("#")){c.preventDefault();const l=document.querySelector(s.link);l&&(0,x.default)(l,v)}s.onClick?.()},className:(0,o.cn)("",t?.primaryButton),"aria-describedby":d,...s.link&&!s.link.startsWith("#")?{as:"a",href:(0,o.getLocalizedPath)(s.link,T)}:{},children:s.text})]}),Array.isArray(b)&&b.length>0&&(0,a.jsx)("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:b.map((c,l)=>c.pcImage?(0,a.jsx)(i.Picture,{source:c.pcImage.url,alt:c.pcImage.alt||`icon ${l+1}`,role:"img",className:"laptop:h-auto h-[48px] max-w-none",imgClassName:"h-full"},l):null)})]})]})});M.displayName="SecondaryBanner";var ae=(0,N.withLayout)(M);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/SecondaryBanner/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n// Task 15: static import (no require()) for carousel delegation (DECISION-002)\nimport SecondaryBannerCarouselImpl from './SecondaryBannerCarousel.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * Carousel navigation configuration for SecondaryBanner. v1: arrows only.\n * autoplay, dots, and progress are intentionally EXCLUDED from v1.\n */\nexport interface SecondaryBannerCarouselConfig {\n /**\n * Show prev/next arrow navigation controls.\n * Only used when data.items has 2+ slides.\n * @default true\n */\n showArrows?: boolean\n showDots?: boolean\n loop?: boolean\n autoplaySeconds?: number\n}\n\n/**\n * Per-slide data for SecondaryBanner carousel mode.\n * All fields optional (mirrors SecondaryBannerData permissiveness).\n */\nexport interface SecondaryBannerSlideData {\n title?: string\n titleTag?: 'h1' | 'h2'\n superTitle?: string\n subtitle?: string\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n isVideoLoop?: boolean\n endDate?: string\n endDate_tz?: string\n dateFormat?: string\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\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\nexport const secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n /**\n * Carousel slide items. When present and non-empty, activates carousel mode.\n * Single-banner mode is used when absent or empty (DECISION-002).\n */\n items?: SecondaryBannerSlideData[]\n /**\n * Display mode: 'single' renders the first frame only; 'carousel' activates Swiper.\n * Mirrors the CMS `mode` field (single | carousel). Defaults to single-banner path\n * when absent (backward-compatible with legacy data that has no mode field).\n */\n mode?: 'single' | 'carousel'\n /**\n * Carousel navigation configuration.\n * Only meaningful when data.items is present and has 2+ items.\n */\n carousel?: SecondaryBannerCarouselConfig\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, 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 * Whether this banner is the active slide in a carousel.\n * Controls video autoPlay: autoPlay={isActive ?? true}.\n * When absent (legacy single-banner), defaults to true (DECISION-008).\n * @default true\n */\n isActive?: boolean\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, isActive, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop: _isVideoLoop,\n endDate,\n endDate_tz,\n dateFormat,\n size: _size,\n iconArray: icons,\n theme: _theme,\n primaryButton,\n secondaryButton,\n title,\n titleTag: _titleTag,\n } = data\n\n const isVideoLoop = _isVideoLoop ?? true\n const size = _size ?? 'base'\n const theme = _theme ?? 'light'\n const titleTag = _titleTag ?? 'h1'\n\n // Hooks must be called unconditionally before any early return (React rules)\n const { locale = 'us' } = useAiuiContext()\n\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n // Task 15: Carousel mode early return AFTER all hooks (DECISION-002 / DECISION-A008)\n if (data.mode === 'carousel' && data.items && data.items.length > 0) {\n return (\n <SecondaryBannerCarouselImpl\n data={data}\n className={className}\n classNames={classNames}\n jumpOptions={jumpOptions}\n ref={ref}\n {...props}\n />\n )\n }\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <div className={cn('absolute inset-0', { 'h-fit': size === 'xlg' })}>\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className=\"size-full\"\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={isActive ?? true}\n />\n </div>\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\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.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(secondaryButton.link, locale) }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\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.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(primaryButton.link, locale) }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default withLayout(SecondaryBanner)\n"],
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n// Task 15: static import (no require()) for carousel delegation (DECISION-002)\nimport SecondaryBannerCarouselImpl from './SecondaryBannerCarousel.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * Carousel navigation configuration for SecondaryBanner. v1: arrows only.\n * autoplay, dots, and progress are intentionally EXCLUDED from v1.\n */\nexport interface SecondaryBannerCarouselConfig {\n /**\n * Show prev/next arrow navigation controls.\n * Only used when data.items has 2+ slides.\n * @default true\n */\n showArrows?: boolean\n showDots?: boolean\n loop?: boolean\n autoplaySeconds?: number\n}\n\n/**\n * Per-slide data for SecondaryBanner carousel mode.\n * All fields optional (mirrors SecondaryBannerData permissiveness).\n */\nexport interface SecondaryBannerSlideData {\n title?: string\n titleTag?: 'h1' | 'h2'\n superTitle?: string\n subtitle?: string\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n isVideoLoop?: boolean\n endDate?: string\n endDate_tz?: string\n dateFormat?: string\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\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\nexport const secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1920/480] desktop:aspect-[1920/480] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1920/720] desktop:aspect-[1920/720] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1920/930] desktop:aspect-[1920/930] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1920/930] desktop:aspect-[1920/930] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n /**\n * Carousel slide items. When present and non-empty, activates carousel mode.\n * Single-banner mode is used when absent or empty (DECISION-002).\n */\n items?: SecondaryBannerSlideData[]\n /**\n * Display mode: 'single' renders the first frame only; 'carousel' activates Swiper.\n * Mirrors the CMS `mode` field (single | carousel). Defaults to single-banner path\n * when absent (backward-compatible with legacy data that has no mode field).\n */\n mode?: 'single' | 'carousel'\n /**\n * Carousel navigation configuration.\n * Only meaningful when data.items is present and has 2+ items.\n */\n carousel?: SecondaryBannerCarouselConfig\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, 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 * Whether this banner is the active slide in a carousel.\n * Controls video autoPlay: autoPlay={isActive ?? true}.\n * When absent (legacy single-banner), defaults to true (DECISION-008).\n * @default true\n */\n isActive?: boolean\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, isActive, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop: _isVideoLoop,\n endDate,\n endDate_tz,\n dateFormat,\n size: _size,\n iconArray: icons,\n theme: _theme,\n primaryButton,\n secondaryButton,\n title,\n titleTag: _titleTag,\n } = data\n\n const isVideoLoop = _isVideoLoop ?? true\n const size = _size ?? 'base'\n const theme = _theme ?? 'light'\n const titleTag = _titleTag ?? 'h1'\n\n // Hooks must be called unconditionally before any early return (React rules)\n const { locale = 'us' } = useAiuiContext()\n\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n // Task 15: Carousel mode early return AFTER all hooks (DECISION-002 / DECISION-A008)\n if (data.mode === 'carousel' && data.items && data.items.length > 0) {\n return (\n <SecondaryBannerCarouselImpl\n data={data}\n className={className}\n classNames={classNames}\n jumpOptions={jumpOptions}\n ref={ref}\n {...props}\n />\n )\n }\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <div className={cn('absolute inset-0', { 'h-fit': size === 'xlg' })}>\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className=\"size-full\"\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={isActive ?? true}\n />\n </div>\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\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.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(secondaryButton.link, locale) }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\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.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(primaryButton.link, locale) }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default withLayout(SecondaryBanner)\n"],
5
5
  "mappings": "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",
6
6
  "names": ["SecondaryBanner_exports", "__export", "SecondaryBanner_default", "secondaryBannerVariants", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_jump", "import_helpers", "import_components", "import_Styles", "import_Media", "import_AiuiProvider", "import_SecondaryBannerCarousel", "SecondaryBanner", "className", "classNames", "data", "jumpOptions", "isActive", "props", "ref", "pcImage", "padImage", "mobileImage", "_isVideoLoop", "endDate", "endDate_tz", "dateFormat", "_size", "icons", "_theme", "primaryButton", "secondaryButton", "title", "_titleTag", "isVideoLoop", "size", "theme", "titleTag", "locale", "mergedJumpOptions", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "SecondaryBannerCarouselImpl", "Media", "e", "element", "jump", "icon", "index"]
7
7
  }
package/dist/esm/biz-components/Graphic/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{useMediaQuery as U}from"react-responsive";import z,{useImperativeHandle as E,useRef as M,useState as a}from"react";import{createPortal as H}from"react-dom";import{cn as g,getLocalizedPath as R}from"../../helpers/utils.js";import{withLayout as j}from"../../shared/Styles.js";import _ from"../SwiperBox/index.js";import{Button as A,Heading as Y,Picture as k,Text as q}from"../../components/index.js";import Q from"../Title/index.js";import{VideoModal as X}from"../VideoModal/index.js";import{TextModal as Z}from"../TextModal/index.js";import{useExposure as N}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import"swiper/css";const m="image",d="graphic",$=e=>{let o="";const l=c=>(c?.url&&(o=c.url),o),i=l(e.lgDesktop),u=l(e.desktop),r=l(e.laptop),b=l(e.tablet),h=e.default?.url;return[`${i} 9999`,`${u} 1919`,`${r} 1439`,`${b} 1024`,`${h} 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]",J=({data:e,configuration:o})=>{const l=M(null),[i,u]=a({visible:!1,x:0,y:0,text:""}),r=o?.descriptionTag||"h3",b=()=>{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]"}},h=s=>{e?.description&&u({visible:!0,x:s.clientX,y:s.clientY,text:e.description})},c=()=>{u(s=>({...s,visible:!1}))};N(l,{componentType:m,componentName:d,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const v=e?.href?"a":"div",w=e?.href?{href:y(e.href,`${m}_${d}`)}:{};return t("div",{ref:l,className:g(b(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:g("rounded-box absolute inset-0 overflow-hidden"),children:p("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?p("a",{"aria-label":e?.title||e?.description,href:y(e?.href||"",`${m}_${d}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[t(k,{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||""}),t("span",{className:"sr-only",children:e?.title||e?.description})]}):t("div",{className:"rounded-card block size-full overflow-hidden",children:t(k,{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||""})}),p(v,{...w,className:g("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:[p("div",{className:g("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[p("div",{className:"flex-1 overflow-hidden",children:[t(q,{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&&p("div",{onMouseMove:h,onMouseLeave:c,children:[e?.title?t(Y,{html:e?.description,style:{color:e?.textColor},as:r,className:`${C} graphic-description`}):t(r,{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${C} graphic-description-item`}),typeof window<"u"&&i.visible&&H(t("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:`${i.x+16}px`,top:`${i.y+16}px`},children:i.text}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:s=>{s.preventDefault(),s.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:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:s=>{s.preventDefault(),s.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:t(k,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(A,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:y(R(e?.href||"",o?.locale||"us"),`${m}_${d}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${m}#${d}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},V=z.forwardRef(({data:e,className:o,...l},i)=>{const u=U({query:"(max-width: 768px)"}),r=M(null),[b,h]=a(!1),[c,v]=a(""),[w,s]=a(""),[P,G]=a(""),[S,T]=a(null),[B,I]=a(!1),{locale:D="us"}=F(),f=x=>{const n=e?.items?.length>3,L=e?.items?.length>2;switch(x){case 1440:return n?4:e?.items?.length;case 1024:return n?3:e?.items?.length;case 768:return e?.items?.length===1?1:n||L?2.3:2;default:return e?.items?.length===1?1:1.2}};return E(i,()=>r.current),N(r,{componentType:m,componentName:d,componentTitle:e?.title}),p("div",{...l,ref:r,className:g("graphicBlock",o),children:[p("div",{className:"graphic-box",children:[e?.title&&t(Q,{data:{title:e?.title,align:e?.titleAlign??"left"}}),t(_,{id:"Graphic",className:g("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:D,descriptionTag:e.descriptionTag,onVideoPlayBtnClick:(x,n)=>{h(!0),n?.isYouTube?s?.(n?.youtubeId||""):(v?.(n?.video?.url||""),G?.(n?.mobileVideo?.url||""))},onIconClick:x=>{I(!0),T(x)},title:e?.title}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),t(X,{visible:b,youTubeId:w,onCloseModal:()=>h(!1),videoUrl:u&&P||c}),t(Z,{textVisible:B,extension:S?.extension,onCloseModal:()=>{I(!1),T(null)}})]})});V.displayName="Graphic";var de=j(V);export{de as default};
1
+ "use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import{useMediaQuery as z}from"react-responsive";import E,{useImperativeHandle as H,useRef as M,useState as a}from"react";import{createPortal as R}from"react-dom";import{cn as g,getLocalizedPath as j}from"../../helpers/utils.js";import{withLayout as _}from"../../shared/Styles.js";import A from"../SwiperBox/index.js";import{Button as Y,Heading as q,Picture as k,Text as N}from"../../components/index.js";import Q from"../Title/index.js";import{VideoModal as X}from"../VideoModal/index.js";import{TextModal as Z}from"../TextModal/index.js";import{useExposure as $}from"../../hooks/useExposure.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import"swiper/css";const m="image",u="graphic",C=e=>{let o="";const l=c=>(c?.url&&(o=c.url),o),i=l(e.lgDesktop),d=l(e.desktop),r=l(e.laptop),b=l(e.tablet),h=e.default?.url;return[`${i} 9999`,`${d} 1919`,`${r} 1439`,`${b} 1024`,`${h} 768`].join(", ")},V="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]",J=({data:e,configuration:o})=>{const l=M(null),[i,d]=a({visible:!1,x:0,y:0,text:""}),r=o?.descriptionTag||"h3",b=()=>{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]"}},h=s=>{e?.description&&d({visible:!0,x:s.clientX,y:s.clientY,text:e.description})},c=()=>{d(s=>({...s,visible:!1}))};$(l,{componentType:m,componentName:u,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1});const v=e?.href?"a":"div",w=e?.href?{href:y(e.href,`${m}_${u}`)}:{};return t("div",{ref:l,className:g(b(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:g("rounded-box absolute inset-0 overflow-hidden"),children:p("div",{className:`graphic-children relative block size-full overflow-hidden ${e?.href?"cursor-pointer":""}`,children:[e?.href?p("a",{"aria-label":e?.title||e?.description,href:y(e?.href||"",`${m}_${u}`),className:"rounded-card block size-full overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${m}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:[t(k,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?C(e.backgroundImage):e?.imgUrl?.url,alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""}),t("span",{className:"sr-only",children:e?.title||e?.description})]}):t("div",{className:"rounded-card block size-full overflow-hidden",children:t(k,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.backgroundImage?.default?C(e.backgroundImage):e?.imgUrl?.url||"",alt:e?.backgroundImage?.lgDesktop?.alt||e?.backgroundImage?.default?.alt||e?.imgUrl?.alt||""})}),p(v,{...w,className:g("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:[p("div",{className:g("flex items-end gap-1 overflow-hidden","graphic-bottom"),children:[p("div",{className:"flex-1 overflow-hidden",children:[t(N,{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&&p("div",{onMouseMove:h,onMouseLeave:c,children:[e?.title?t(q,{html:e?.description,style:{color:e?.textColor},as:r,className:`${V} graphic-description`}):t(r,{style:{color:e?.textColor},dangerouslySetInnerHTML:{__html:e?.description||""},className:`${V} graphic-description-item`}),typeof window<"u"&&i.visible&&R(t(N,{as:"div",html:i.text,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:`${i.x+16}px`,top:`${i.y+16}px`}}),document.body)]})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:s=>{s.preventDefault(),s.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:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:s=>{s.preventDefault(),s.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:t(k,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(Y,{as:"a","aria-label":e?.title||e?.description,variant:"secondary",className:"bgButton mt-[8px] self-start",href:y(j(e?.href||"",o?.locale||"us"),`${m}_${u}`),"data-headless-nav-position":`''#${o?.index+1}`,"data-headless-type-name":`${m}#${u}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},P=E.forwardRef(({data:e,className:o,...l},i)=>{const d=z({query:"(max-width: 768px)"}),r=M(null),[b,h]=a(!1),[c,v]=a(""),[w,s]=a(""),[G,S]=a(""),[B,T]=a(null),[D,I]=a(!1),{locale:L="us"}=F(),f=x=>{const n=e?.items?.length>3,U=e?.items?.length>2;switch(x){case 1440:return n?4:e?.items?.length;case 1024:return n?3:e?.items?.length;case 768:return e?.items?.length===1?1:n||U?2.3:2;default:return e?.items?.length===1?1:1.2}};return H(i,()=>r.current),$(r,{componentType:m,componentName:u,componentTitle:e?.title}),p("div",{...l,ref:r,className:g("graphicBlock",o),children:[p("div",{className:"graphic-box",children:[e?.title&&t(Q,{data:{title:e?.title,align:e?.titleAlign??"left"}}),t(A,{id:"Graphic",className:g("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,locale:L,descriptionTag:e.descriptionTag,onVideoPlayBtnClick:(x,n)=>{h(!0),n?.isYouTube?s?.(n?.youtubeId||""):(v?.(n?.video?.url||""),S?.(n?.mobileVideo?.url||""))},onIconClick:x=>{I(!0),T(x)},title:e?.title}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f()},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}})]}),t(X,{visible:b,youTubeId:w,onCloseModal:()=>h(!1),videoUrl:d&&G||c}),t(Z,{textVisible:D,extension:B?.extension,onCloseModal:()=>{I(!1),T(null)}})]})});P.displayName="Graphic";var ue=_(P);export{ue as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Graphic/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { 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 descriptionTag?: 'h3' | 'h4' | 'h5' | 'h6'\n titleAlign?: 'center' | 'left'\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 Tag = configuration?.descriptionTag || 'h3'\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 className={cn('rounded-box absolute inset-0 overflow-hidden')}>\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={Tag}\n className={`${descriptionClass} graphic-description`}\n />\n ) : (\n <Tag\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, align: data?.titleAlign ?? 'left' }} />}\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 descriptionTag: data.descriptionTag,\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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",
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 descriptionTag?: 'h3' | 'h4' | 'h5' | 'h6'\n titleAlign?: 'center' | 'left'\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 Tag = configuration?.descriptionTag || 'h3'\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 className={cn('rounded-box absolute inset-0 overflow-hidden')}>\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={Tag}\n className={`${descriptionClass} graphic-description`}\n />\n ) : (\n <Tag\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 <Text\n as=\"div\"\n html={tooltip.text}\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 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, align: data?.titleAlign ?? 'left' }} />}\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 descriptionTag: data.descriptionTag,\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
6
  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useImperativeHandle", "useRef", "useState", "createPortal", "cn", "getLocalizedPath", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "useAiuiContext", "componentType", "componentName", "buildPictureSource", "bg", "last", "resolve", "img", "lgDesktopSrc", "desktopSrc", "laptopSrc", "tabletSrc", "defaultSrc", "descriptionClass", "Item", "data", "configuration", "ref", "tooltip", "setTooltip", "Tag", "handleAspect", "handleMouseMove", "e", "handleMouseLeave", "prev", "Container", "containerProps", "Graphic", "className", "rest", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "locale", "handleSwiperShow", "width", "isShow", "_", "Graphic_default"]
7
7
  }
package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as ne,jsx as e,jsxs as n}from"react/jsx-runtime";import _,{useRef as A,useEffect as $,useCallback as U,useState as O}from"react";import{Swiper as X,SwiperSlide as Y}from"swiper/react";import{Navigation as q,Pagination as F,Autoplay as Z}from"swiper/modules";import{useMediaQuery as W}from"react-responsive";import ee from"../../helpers/ScrollLoadVideo.js";import{cn as p}from"../../helpers/index.js";import{Button as E,Heading as te,Text as I,Countdown as ae,Picture as M}from"../../components/index.js";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";const re=()=>n("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),ie=()=>n("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),oe=({data:l,isActive:j,videoRef:R,slideIndex:k,onPrimaryClick:z,onSecondaryClick:B,onTertiaryClick:T})=>{const{pcVideo:v,padVideo:c,mobileVideo:d,pcImage:b,padImage:u,mobileImage:m,isVideoLoop:H=!0,isShowVideo:y,title:w,subtitle:P,label:C,endDate:g,endDate_tz:L,dateFormat:S,iconArray:s,caption:x,blockLink:N,primaryButton:i,secondaryButton:t,tertiaryButton:a,theme:f="light",align:o="left",titleSize:h,size:D="default"}=l,G=W({query:"(max-width: 768px)"}),J=W({query:"(max-width: 1024px)"}),K=G?d?.url||v?.url||"":J?c?.url||v?.url||d?.url||"":v?.url||d?.url||"";return n("div",{"data-ui-component-id":"HeroBannerSlide",className:p("text-info-primary relative w-full overflow-hidden",f==="dark"?"aiui-dark":"",D==="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:[N&&e("a",{className:"absolute inset-0 z-10",href:N,tabIndex:-1,"aria-hidden":"true"}),y?n(ne,{children:[e("div",{"data-video-poster":"true",className:"absolute inset-0 size-full transition-opacity duration-500",children:e(M,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:k===0?"eager":"lazy",fetchPriority:k===0?"high":"auto",alt:b?.alt||"",source:`${b?.url||""} , ${u?.url??(m?.url||"")} 1024, ${m?.url||""} 767`})}),e(ee,{videoRef:R,src:K,poster:void 0,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:H,playsInline:!0,onPlaying:r=>{r.currentTarget.closest('[data-ui-component-id="HeroBannerSlide"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")}})]}):e(M,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:b?.alt||"",source:`${b?.url||""} , ${u?.url??(m?.url||"")} 1024, ${m?.url||""} 767`}),n("div",{className:p("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]",o==="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:[n("div",{className:p("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]",o==="center"?"text-center":"laptop:text-left"),children:[C&&e(I,{size:2,as:"p",className:p("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:C}),w&&e(te,{as:h==="4"?"h1":"h2",html:w,size:h?Number(h||"5"):D==="sm"?4:5}),P&&e(I,{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:P}),g&&e("div",{className:"mt-3",children:e(ae,{endDate:g,endDate_tz:L,dateFormat:S,variant:"spacious",align:o})})]}),(i?.text||t?.text||a?.text)&&n("div",{className:p("lg-desktop:gap-3 flex flex-wrap items-center gap-2",o==="center"?"justify-center":"laptop:justify-start"),children:[t?.text&&e(E,{size:"lg",variant:"secondary",as:t?.isCustomSecondaryButton?"button":"a",href:t.link,target:t?.target,rel:t?.target==="_blank"?t?.rel??"noopener noreferrer":t?.rel,onClick:r=>t?.isCustomSecondaryButton&&B?.(l,r,t?.customSecondaryEventId),children:t.text}),i?.text&&e(E,{size:"lg",variant:"primary",as:i?.isCustomPrimaryButton?"button":"a",href:i.link,target:i?.target,rel:i?.target==="_blank"?i?.rel??"noopener noreferrer":i?.rel,onClick:r=>i?.isCustomPrimaryButton&&z?.(l,r,i?.customPrimaryEventId),children:i.text}),a?.text&&e(E,{size:"lg",variant:"link",className:"tablet:basis-auto basis-full",as:a?.isCustomTertiaryButton?"button":"a",href:a.link,target:a?.target,rel:a?.target==="_blank"?a?.rel??"noopener noreferrer":a?.rel,onClick:r=>a?.isCustomTertiaryButton&&T?.(l,r,a?.customTertiaryEventId),children:a.text})]}),s&&s.length>0&&e("div",{className:p("flex items-center gap-2",o==="center"?"justify-center":"justify-start"),children:s.map(r=>e("div",{className:"h-12",children:e(M,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:r?.pcImage?.alt||"",source:r?.pcImage?.url})},r?.pcImage?.url||r?.pcImage?.alt))})]}),x&&x.length>0&&e("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:x.map((r,V)=>n(_.Fragment,{children:[e(I,{size:2,className:"hero-banner-product-text tablet:w-[108px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]",html:r.title}),V<x.length-1&&e("div",{className:"bg-info-primary w-px"})]},r.title))})]})},Q=_.forwardRef(({data:l,className:j,classNames:R={},onPrimaryClick:k,onSecondaryClick:z,onTertiaryClick:B,...T},v)=>{const c=l.items||[],d=l.carousel,b=l.size??"default",u=A(null),[m,H]=O(0),[y,w]=O(null),C=(c[m]?.theme??"light")==="dark";$(()=>{const t=u.current;!t||!y||t.pagination&&(t.pagination.el=y,t.pagination.init(),t.pagination.render(),t.pagination.update())},[y]);const g=A(c.map(()=>_.createRef())),L=(d?.showArrows??!0)&&c.length>1,S=d?.showDots??!0,s=d?.autoplaySeconds,x=s!==void 0&&s>0?[q,F,Z]:[q,F],N=s!==void 0&&s>0?{delay:Math.max(s*1e3,3e3),disableOnInteraction:!1}:!1;$(()=>{g.current.forEach((t,a)=>{a!==0&&t.current&&(t.current.pause(),t.current.currentTime=0)})},[]);const i=U(t=>{const a=t.realIndex;g.current.forEach((o,h)=>{h!==a&&o.current&&(o.current.pause(),o.current.currentTime=0)});const f=g.current[a];f?.current&&f.current.paused&&f.current.play()?.catch(()=>{}),H(a)},[]);return n("div",{ref:v,className:p("hero-banner-carousel group relative w-full overflow-hidden",b==="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]",{"aiui-dark":c[m]?.theme==="dark"},j),...T,children:[e(X,{onSwiper:t=>u.current=t,onSlideChange:i,modules:x,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:N,pagination:S?{clickable:!0,el:y,renderBullet:(t,a)=>`<span class="${a} banner-dot"></span>`}:!1,children:c.map((t,a)=>e(Y,{children:({isActive:f})=>e(oe,{data:t,isActive:f,slideIndex:a,videoRef:g.current[a],onPrimaryClick:k,onSecondaryClick:z,onTertiaryClick:B})},a))}),L&&n("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[e("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>u.current?.slidePrev(),"aria-label":"Previous banner",children:e(re,{})}),e("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>u.current?.slideNext(),"aria-label":"Next banner",children:e(ie,{})})]}),S&&e("div",{ref:w,style:{"--swiper-pagination-bottom":"0px"},className:p("hero-banner-pagination swiper-pagination lg-desktop:!bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary absolute !bottom-4 !left-1/2 z-20 flex !w-auto !-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]:size-2 [&_.banner-dot]:rounded-full [&_.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",{"aiui-dark":C})})]})});Q.displayName="HeroBannerCarousel";var ye=Q;export{ye as default};
1
+ "use client";import{Fragment as ne,jsx as e,jsxs as o}from"react/jsx-runtime";import E,{useRef as A,useEffect as $,useCallback as U,useState as O}from"react";import{Swiper as X,SwiperSlide as Y}from"swiper/react";import{Navigation as q,Pagination as F,Autoplay as Z}from"swiper/modules";import{useMediaQuery as W}from"react-responsive";import ee from"../../helpers/ScrollLoadVideo.js";import{cn as p}from"../../helpers/index.js";import{Button as I,Heading as te,Text as M,Countdown as ae,Picture as j}from"../../components/index.js";import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";const re=()=>o("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M23 13L16 20L23 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),ie=()=>o("svg",{className:"lg-desktop:size-14 size-10",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e("circle",{cx:"20",cy:"20",r:"20",fill:"currentColor",fillOpacity:"0.2"}),e("path",{d:"M17 13L24 20L17 27",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),oe=({data:l,isActive:R,videoRef:D,slideIndex:k,containerSize:w="default",onPrimaryClick:B,onSecondaryClick:T,onTertiaryClick:H})=>{const{pcVideo:n,padVideo:x,mobileVideo:m,pcImage:s,padImage:v,mobileImage:g,isVideoLoop:f=!0,isShowVideo:P,title:L,subtitle:C,label:c,endDate:S,endDate_tz:N,dateFormat:d,iconArray:h,caption:b,blockLink:z,primaryButton:t,secondaryButton:a,tertiaryButton:r,theme:y="light",align:u="left",titleSize:_}=l,G=W({query:"(max-width: 768px)"}),J=W({query:"(max-width: 1024px)"}),K=G?m?.url||n?.url||"":J?x?.url||n?.url||m?.url||"":n?.url||m?.url||"";return o("div",{"data-ui-component-id":"HeroBannerSlide",className:p("text-info-primary relative w-full overflow-hidden",y==="dark"?"aiui-dark":"",w==="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:[z&&e("a",{className:"absolute inset-0 z-10",href:z,tabIndex:-1,"aria-hidden":"true"}),P?o(ne,{children:[e("div",{"data-video-poster":"true",className:"absolute inset-0 size-full transition-opacity duration-500",children:e(j,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:k===0?"eager":"lazy",fetchPriority:k===0?"high":"auto",alt:s?.alt||"",source:`${s?.url||""} , ${v?.url??(g?.url||"")} 1024, ${g?.url||""} 767`})}),e(ee,{videoRef:D,src:K,poster:void 0,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:f,playsInline:!0,onPlaying:i=>{i.currentTarget.closest('[data-ui-component-id="HeroBannerSlide"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")}})]}):e(j,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:s?.alt||"",source:`${s?.url||""} , ${v?.url??(g?.url||"")} 1024, ${g?.url||""} 767`}),o("div",{className:p("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]",u==="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:[o("div",{className:p("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px]",u==="center"?"text-center":"laptop:text-left"),children:[c&&e(M,{size:2,as:"p",className:p("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:c}),L&&e(te,{as:_==="4"?"h1":"h2",html:L,size:_?Number(_||"5"):w==="sm"?4:5}),C&&e(M,{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:C}),S&&e("div",{className:"mt-3",children:e(ae,{endDate:S,endDate_tz:N,dateFormat:d,variant:"spacious",align:u})})]}),(t?.text||a?.text||r?.text)&&o("div",{className:p("lg-desktop:gap-3 flex flex-wrap items-center gap-2",u==="center"?"justify-center":"laptop:justify-start"),children:[a?.text&&e(I,{size:"lg",variant:"secondary",as:a?.isCustomSecondaryButton?"button":"a",href:a.link,target:a?.target,rel:a?.target==="_blank"?a?.rel??"noopener noreferrer":a?.rel,onClick:i=>a?.isCustomSecondaryButton&&T?.(l,i,a?.customSecondaryEventId),children:a.text}),t?.text&&e(I,{size:"lg",variant:"primary",as:t?.isCustomPrimaryButton?"button":"a",href:t.link,target:t?.target,rel:t?.target==="_blank"?t?.rel??"noopener noreferrer":t?.rel,onClick:i=>t?.isCustomPrimaryButton&&B?.(l,i,t?.customPrimaryEventId),children:t.text}),r?.text&&e(I,{size:"lg",variant:"link",className:"tablet:basis-auto basis-full",as:r?.isCustomTertiaryButton?"button":"a",href:r.link,target:r?.target,rel:r?.target==="_blank"?r?.rel??"noopener noreferrer":r?.rel,onClick:i=>r?.isCustomTertiaryButton&&H?.(l,i,r?.customTertiaryEventId),children:r.text})]}),h&&h.length>0&&e("div",{className:p("flex items-center gap-2",u==="center"?"justify-center":"justify-start"),children:h.map(i=>e("div",{className:"h-12",children:e(j,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",alt:i?.pcImage?.alt||"",source:i?.pcImage?.url})},i?.pcImage?.url||i?.pcImage?.alt))})]}),b&&b.length>0&&e("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:b.map((i,V)=>o(E.Fragment,{children:[e(M,{size:2,className:"hero-banner-product-text tablet:w-[108px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]",html:i.title}),V<b.length-1&&e("div",{className:"bg-info-primary w-px"})]},i.title))})]})},Q=E.forwardRef(({data:l,className:R,classNames:D={},onPrimaryClick:k,onSecondaryClick:w,onTertiaryClick:B,...T},H)=>{const n=l.items||[],x=l.carousel,m=l.size??"default",s=A(null),[v,g]=O(0),[f,P]=O(null),C=(n[v]?.theme??"light")==="dark";$(()=>{const t=s.current;!t||!f||t.pagination&&(t.pagination.el=f,t.pagination.init(),t.pagination.render(),t.pagination.update())},[f]);const c=A(n.map(()=>E.createRef())),S=(x?.showArrows??!0)&&n.length>1,N=x?.showDots??!0,d=x?.autoplaySeconds,h=d!==void 0&&d>0?[q,F,Z]:[q,F],b=d!==void 0&&d>0?{delay:Math.max(d*1e3,3e3),disableOnInteraction:!1}:!1;$(()=>{c.current.forEach((t,a)=>{a!==0&&t.current&&(t.current.pause(),t.current.currentTime=0)})},[]);const z=U(t=>{const a=t.realIndex;c.current.forEach((y,u)=>{u!==a&&y.current&&(y.current.pause(),y.current.currentTime=0)});const r=c.current[a];r?.current&&r.current.paused&&r.current.play()?.catch(()=>{}),g(a)},[]);return o("div",{ref:H,className:p("hero-banner-carousel group relative w-full overflow-hidden",m==="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]",{"aiui-dark":n[v]?.theme==="dark"},R),...T,children:[e(X,{onSwiper:t=>s.current=t,onSlideChange:z,modules:h,slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:b,pagination:N?{clickable:!0,el:f,renderBullet:(t,a)=>`<span class="${a} banner-dot"></span>`}:!1,children:n.map((t,a)=>e(Y,{children:({isActive:r})=>e(oe,{data:t,isActive:r,slideIndex:a,videoRef:c.current[a],containerSize:m,onPrimaryClick:k,onSecondaryClick:w,onTertiaryClick:B})},a))}),S&&o("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-between px-4",children:[e("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>s.current?.slidePrev(),"aria-label":"Previous banner",children:e(re,{})}),e("button",{type:"button",className:"tablet:flex pointer-events-auto hidden scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100",onClick:()=>s.current?.slideNext(),"aria-label":"Next banner",children:e(ie,{})})]}),N&&e("div",{ref:P,style:{"--swiper-pagination-bottom":"0px"},className:p("hero-banner-pagination swiper-pagination lg-desktop:!bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary absolute !bottom-4 !left-1/2 z-20 flex !w-auto !-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]:size-2 [&_.banner-dot]:rounded-full [&_.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",{"aiui-dark":C})})]})});Q.displayName="HeroBannerCarousel";var ye=Q;export{ye as default};
2
2
  //# sourceMappingURL=HeroBannerCarousel.js.map
package/dist/esm/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 { useMediaQuery } from 'react-responsive'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { cn } from '../../helpers/index.js'\nimport type { HeroBannerProps, HeroBannerSlideData } from './types.js'\nimport { Button, Heading, Text, Countdown, Picture } 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\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\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\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\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 slideIndex: number\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n onTertiaryClick?: (data: any, e: any, id?: string) => void\n}\n\nconst HeroBannerSlide = ({\n data,\n isActive: _isActive,\n videoRef,\n slideIndex,\n onPrimaryClick,\n onSecondaryClick,\n onTertiaryClick,\n}: HeroBannerSlideProps) => {\n const {\n pcVideo,\n padVideo,\n mobileVideo,\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = true,\n isShowVideo,\n title,\n subtitle,\n label,\n endDate,\n endDate_tz,\n dateFormat,\n iconArray,\n caption,\n blockLink,\n primaryButton,\n secondaryButton,\n tertiaryButton,\n theme = 'light',\n align = 'left',\n titleSize,\n size = 'default',\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const videoSrc = isMobile\n ? mobileVideo?.url || pcVideo?.url || ''\n : isPad\n ? padVideo?.url || pcVideo?.url || mobileVideo?.url || ''\n : pcVideo?.url || mobileVideo?.url || ''\n\n return (\n <div\n data-ui-component-id=\"HeroBannerSlide\"\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 {blockLink && <a className=\"absolute inset-0 z-10\" href={blockLink} tabIndex={-1} aria-hidden=\"true\"></a>}\n {isShowVideo ? (\n <>\n {/* Poster cover layer: slide 0 = eager+high, others = lazy+auto */}\n <div data-video-poster=\"true\" className=\"absolute inset-0 size-full transition-opacity duration-500\">\n <Picture\n className=\"absolute inset-0 size-full\"\n imgClassName=\"size-full object-cover\"\n loading={slideIndex === 0 ? 'eager' : 'lazy'}\n fetchPriority={slideIndex === 0 ? 'high' : 'auto'}\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n </div>\n {/* Video layer: lazy-loaded, overlays Picture via DOM order */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={videoSrc}\n poster={undefined}\n className=\"absolute inset-0 size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n onPlaying={(e: React.SyntheticEvent<HTMLVideoElement>) => {\n const slide = (e.currentTarget as HTMLVideoElement).closest('[data-ui-component-id=\"HeroBannerSlide\"]')\n slide?.querySelector<HTMLElement>('[data-video-poster=\"true\"]')?.classList.add('opacity-0')\n }}\n />\n </>\n ) : (\n <Picture\n className=\"absolute inset-0 size-full\"\n imgClassName=\"size-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\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 {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 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 {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\n {(primaryButton?.text || secondaryButton?.text || tertiaryButton?.text) && (\n <div\n className={cn(\n 'lg-desktop:gap-3 flex flex-wrap 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 {tertiaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"link\"\n className=\"tablet:basis-auto basis-full\"\n as={tertiaryButton?.isCustomTertiaryButton ? 'button' : 'a'}\n href={tertiaryButton.link}\n target={tertiaryButton?.target}\n rel={\n tertiaryButton?.target === '_blank'\n ? (tertiaryButton?.rel ?? 'noopener noreferrer')\n : tertiaryButton?.rel\n }\n onClick={e =>\n tertiaryButton?.isCustomTertiaryButton &&\n onTertiaryClick?.(data, e, tertiaryButton?.customTertiaryEventId)\n }\n >\n {tertiaryButton.text}\n </Button>\n )}\n </div>\n )}\n {iconArray && iconArray.length > 0 && (\n <div className={cn('flex items-center gap-2', align === 'center' ? 'justify-center' : 'justify-start')}>\n {iconArray.map((icon: any) => (\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 )}\n </div>\n\n {caption && caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c: { title: string }, index: number) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className=\"hero-banner-product-text tablet:w-[108px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]\"\n html={c.title}\n />\n {index < caption.length - 1 && <div className=\"bg-info-primary w-px\" />}\n </React.Fragment>\n ))}\n </div>\n )}\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 onTertiaryClick?: (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 onTertiaryClick: _onTertiaryClick,\n ...rest\n },\n ref\n ) => {\n const items = data.items || []\n const carousel = data.carousel\n const containerSize = data.size ?? 'default'\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [activeIndex, setActiveIndex] = useState(0)\n const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n const activeTheme = items[activeIndex]?.theme ?? 'light'\n const isDark = activeTheme === 'dark'\n\n useEffect(() => {\n const swiper = swiperRef.current\n if (!swiper || !paginationEl) return\n if (swiper.pagination) {\n swiper.pagination.el = paginationEl\n swiper.pagination.init()\n swiper.pagination.render()\n swiper.pagination.update()\n }\n }, [paginationEl])\n\n const videoRefs = useRef<React.RefObject<HTMLVideoElement>[]>(items.map(() => React.createRef<HTMLVideoElement>()))\n\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n const showDots = carousel?.showDots ?? true\n\n const autoplaySeconds = carousel?.autoplaySeconds\n const swiperModules =\n autoplaySeconds !== undefined && autoplaySeconds > 0\n ? [Navigation, Pagination, Autoplay]\n : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds !== undefined && autoplaySeconds > 0\n ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n : false\n\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 const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n videoRefs.current.forEach((vRef, i) => {\n if (i !== newIndex && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n const incoming = videoRefs.current[newIndex]\n if (incoming?.current && incoming.current.paused) {\n const p = incoming.current.play()\n p?.catch(() => {})\n }\n setActiveIndex(newIndex)\n }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'hero-banner-carousel group relative w-full overflow-hidden',\n containerSize === '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 { 'aiui-dark': items[activeIndex]?.theme === 'dark' },\n className\n )}\n {...rest}\n >\n <Swiper\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: paginationEl,\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 slideIndex={index}\n videoRef={videoRefs.current[index]}\n onPrimaryClick={_onPrimaryClick}\n onSecondaryClick={_onSecondaryClick}\n onTertiaryClick={_onTertiaryClick}\n />\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n\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 scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\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 scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next banner\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {showDots && (\n <div\n ref={setPaginationEl}\n style={{ '--swiper-pagination-bottom': '0px' } as React.CSSProperties}\n className={cn(\n 'hero-banner-pagination swiper-pagination lg-desktop:!bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary absolute !bottom-4 !left-1/2 z-20 flex !w-auto !-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]:size-2 [&_.banner-dot]:rounded-full [&_.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 { 'aiui-dark': isDark }\n )}\n />\n )}\n </div>\n )\n }\n)\n\nHeroBannerCarousel.displayName = 'HeroBannerCarousel'\n\nexport default HeroBannerCarousel\n"],
5
- "mappings": "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",
6
- "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useEffect", "useCallback", "useState", "Swiper", "SwiperSlide", "Navigation", "Pagination", "Autoplay", "useMediaQuery", "ScrollLoadVideo", "cn", "Button", "Heading", "Text", "Countdown", "Picture", "ChevronLeft", "ChevronRight", "HeroBannerSlide", "data", "_isActive", "videoRef", "slideIndex", "onPrimaryClick", "onSecondaryClick", "onTertiaryClick", "pcVideo", "padVideo", "mobileVideo", "pcImage", "padImage", "mobileImage", "isVideoLoop", "isShowVideo", "title", "subtitle", "label", "endDate", "endDate_tz", "dateFormat", "iconArray", "caption", "blockLink", "primaryButton", "secondaryButton", "tertiaryButton", "theme", "align", "titleSize", "size", "isMobile", "isPad", "videoSrc", "e", "icon", "c", "index", "HeroBannerCarousel", "className", "_classNames", "_onPrimaryClick", "_onSecondaryClick", "_onTertiaryClick", "rest", "ref", "items", "carousel", "containerSize", "swiperRef", "activeIndex", "setActiveIndex", "paginationEl", "setPaginationEl", "isDark", "swiper", "videoRefs", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "vRef", "i", "handleSlideChange", "newIndex", "incoming", "s", "_index", "slideData", "isActive", "HeroBannerCarousel_default"]
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 { useMediaQuery } from 'react-responsive'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { cn } from '../../helpers/index.js'\nimport type { HeroBannerProps, HeroBannerSlideData } from './types.js'\nimport { Button, Heading, Text, Countdown, Picture } 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\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\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\n className=\"lg-desktop:size-14 size-10\"\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\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 slideIndex: number\n containerSize?: 'default' | 'sm'\n onPrimaryClick?: (data: any, e: any, id?: string) => void\n onSecondaryClick?: (data: any, e: any, id?: string) => void\n onTertiaryClick?: (data: any, e: any, id?: string) => void\n}\n\nconst HeroBannerSlide = ({\n data,\n isActive: _isActive,\n videoRef,\n slideIndex,\n containerSize = 'default',\n onPrimaryClick,\n onSecondaryClick,\n onTertiaryClick,\n}: HeroBannerSlideProps) => {\n const {\n pcVideo,\n padVideo,\n mobileVideo,\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop = true,\n isShowVideo,\n title,\n subtitle,\n label,\n endDate,\n endDate_tz,\n dateFormat,\n iconArray,\n caption,\n blockLink,\n primaryButton,\n secondaryButton,\n tertiaryButton,\n theme = 'light',\n align = 'left',\n titleSize,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n\n const videoSrc = isMobile\n ? mobileVideo?.url || pcVideo?.url || ''\n : isPad\n ? padVideo?.url || pcVideo?.url || mobileVideo?.url || ''\n : pcVideo?.url || mobileVideo?.url || ''\n\n return (\n <div\n data-ui-component-id=\"HeroBannerSlide\"\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n theme === 'dark' ? 'aiui-dark' : '',\n containerSize === '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 {blockLink && <a className=\"absolute inset-0 z-10\" href={blockLink} tabIndex={-1} aria-hidden=\"true\"></a>}\n {isShowVideo ? (\n <>\n {/* Poster cover layer: slide 0 = eager+high, others = lazy+auto */}\n <div data-video-poster=\"true\" className=\"absolute inset-0 size-full transition-opacity duration-500\">\n <Picture\n className=\"absolute inset-0 size-full\"\n imgClassName=\"size-full object-cover\"\n loading={slideIndex === 0 ? 'eager' : 'lazy'}\n fetchPriority={slideIndex === 0 ? 'high' : 'auto'}\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n </div>\n {/* Video layer: lazy-loaded, overlays Picture via DOM order */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={videoSrc}\n poster={undefined}\n className=\"absolute inset-0 size-full\"\n videoClassName=\"size-full object-cover\"\n muted\n loop={isVideoLoop}\n playsInline\n onPlaying={(e: React.SyntheticEvent<HTMLVideoElement>) => {\n const slide = (e.currentTarget as HTMLVideoElement).closest('[data-ui-component-id=\"HeroBannerSlide\"]')\n slide?.querySelector<HTMLElement>('[data-video-poster=\"true\"]')?.classList.add('opacity-0')\n }}\n />\n </>\n ) : (\n <Picture\n className=\"absolute inset-0 size-full\"\n imgClassName=\"size-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\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 {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 size={titleSize ? (Number(titleSize || '5') as any) : containerSize === '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 {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\n {(primaryButton?.text || secondaryButton?.text || tertiaryButton?.text) && (\n <div\n className={cn(\n 'lg-desktop:gap-3 flex flex-wrap 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 {tertiaryButton?.text && (\n <Button\n size=\"lg\"\n variant=\"link\"\n className=\"tablet:basis-auto basis-full\"\n as={tertiaryButton?.isCustomTertiaryButton ? 'button' : 'a'}\n href={tertiaryButton.link}\n target={tertiaryButton?.target}\n rel={\n tertiaryButton?.target === '_blank'\n ? (tertiaryButton?.rel ?? 'noopener noreferrer')\n : tertiaryButton?.rel\n }\n onClick={e =>\n tertiaryButton?.isCustomTertiaryButton &&\n onTertiaryClick?.(data, e, tertiaryButton?.customTertiaryEventId)\n }\n >\n {tertiaryButton.text}\n </Button>\n )}\n </div>\n )}\n {iconArray && iconArray.length > 0 && (\n <div className={cn('flex items-center gap-2', align === 'center' ? 'justify-center' : 'justify-start')}>\n {iconArray.map((icon: any) => (\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 )}\n </div>\n\n {caption && caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c: { title: string }, index: number) => (\n <React.Fragment key={c.title}>\n <Text\n size={2}\n className=\"hero-banner-product-text tablet:w-[108px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]\"\n html={c.title}\n />\n {index < caption.length - 1 && <div className=\"bg-info-primary w-px\" />}\n </React.Fragment>\n ))}\n </div>\n )}\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 onTertiaryClick?: (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 onTertiaryClick: _onTertiaryClick,\n ...rest\n },\n ref\n ) => {\n const items = data.items || []\n const carousel = data.carousel\n const containerSize = data.size ?? 'default'\n\n const swiperRef = useRef<SwiperType | null>(null)\n const [activeIndex, setActiveIndex] = useState(0)\n const [paginationEl, setPaginationEl] = useState<HTMLDivElement | null>(null)\n\n const activeTheme = items[activeIndex]?.theme ?? 'light'\n const isDark = activeTheme === 'dark'\n\n useEffect(() => {\n const swiper = swiperRef.current\n if (!swiper || !paginationEl) return\n if (swiper.pagination) {\n swiper.pagination.el = paginationEl\n swiper.pagination.init()\n swiper.pagination.render()\n swiper.pagination.update()\n }\n }, [paginationEl])\n\n const videoRefs = useRef<React.RefObject<HTMLVideoElement>[]>(items.map(() => React.createRef<HTMLVideoElement>()))\n\n const showArrowControls = (carousel?.showArrows ?? true) && items.length > 1\n const showDots = carousel?.showDots ?? true\n\n const autoplaySeconds = carousel?.autoplaySeconds\n const swiperModules =\n autoplaySeconds !== undefined && autoplaySeconds > 0\n ? [Navigation, Pagination, Autoplay]\n : [Navigation, Pagination]\n const autoplayConfig =\n autoplaySeconds !== undefined && autoplaySeconds > 0\n ? { delay: Math.max(autoplaySeconds * 1000, 3000), disableOnInteraction: false }\n : false\n\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 const handleSlideChange = useCallback((swiper: SwiperType) => {\n const newIndex = swiper.realIndex\n videoRefs.current.forEach((vRef, i) => {\n if (i !== newIndex && vRef.current) {\n vRef.current.pause()\n vRef.current.currentTime = 0\n }\n })\n const incoming = videoRefs.current[newIndex]\n if (incoming?.current && incoming.current.paused) {\n const p = incoming.current.play()\n p?.catch(() => {})\n }\n setActiveIndex(newIndex)\n }, [])\n\n return (\n <div\n ref={ref}\n className={cn(\n 'hero-banner-carousel group relative w-full overflow-hidden',\n containerSize === '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 { 'aiui-dark': items[activeIndex]?.theme === 'dark' },\n className\n )}\n {...rest}\n >\n <Swiper\n onSwiper={s => (swiperRef.current = s)}\n onSlideChange={handleSlideChange}\n modules={swiperModules}\n slidesPerView={1}\n loop={true}\n initialSlide={0}\n allowTouchMove={true}\n autoplay={autoplayConfig}\n pagination={\n showDots\n ? {\n clickable: true,\n el: paginationEl,\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 slideIndex={index}\n videoRef={videoRefs.current[index]}\n containerSize={containerSize}\n onPrimaryClick={_onPrimaryClick}\n onSecondaryClick={_onSecondaryClick}\n onTertiaryClick={_onTertiaryClick}\n />\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n\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 scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\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 scale-95 items-center justify-center opacity-0 transition-all duration-300 ease-out hover:scale-105 focus-visible:scale-105 group-focus-within:scale-100 group-focus-within:opacity-100 group-hover:scale-100 group-hover:opacity-100\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next banner\"\n >\n <ChevronRight />\n </button>\n </div>\n )}\n\n {showDots && (\n <div\n ref={setPaginationEl}\n style={{ '--swiper-pagination-bottom': '0px' } as React.CSSProperties}\n className={cn(\n 'hero-banner-pagination swiper-pagination lg-desktop:!bottom-6 [&_.banner-dot.swiper-pagination-bullet-active]:bg-info-primary [&_.banner-dot]:bg-info-quaternary absolute !bottom-4 !left-1/2 z-20 flex !w-auto !-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]:size-2 [&_.banner-dot]:rounded-full [&_.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 { 'aiui-dark': isDark }\n )}\n />\n )}\n </div>\n )\n }\n)\n\nHeroBannerCarousel.displayName = 'HeroBannerCarousel'\n\nexport default HeroBannerCarousel\n"],
5
+ "mappings": "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",
6
+ "names": ["Fragment", "jsx", "jsxs", "React", "useRef", "useEffect", "useCallback", "useState", "Swiper", "SwiperSlide", "Navigation", "Pagination", "Autoplay", "useMediaQuery", "ScrollLoadVideo", "cn", "Button", "Heading", "Text", "Countdown", "Picture", "ChevronLeft", "ChevronRight", "HeroBannerSlide", "data", "_isActive", "videoRef", "slideIndex", "containerSize", "onPrimaryClick", "onSecondaryClick", "onTertiaryClick", "pcVideo", "padVideo", "mobileVideo", "pcImage", "padImage", "mobileImage", "isVideoLoop", "isShowVideo", "title", "subtitle", "label", "endDate", "endDate_tz", "dateFormat", "iconArray", "caption", "blockLink", "primaryButton", "secondaryButton", "tertiaryButton", "theme", "align", "titleSize", "isMobile", "isPad", "videoSrc", "e", "icon", "c", "index", "HeroBannerCarousel", "className", "_classNames", "_onPrimaryClick", "_onSecondaryClick", "_onTertiaryClick", "rest", "ref", "items", "carousel", "swiperRef", "activeIndex", "setActiveIndex", "paginationEl", "setPaginationEl", "isDark", "swiper", "videoRefs", "showArrowControls", "showDots", "autoplaySeconds", "swiperModules", "autoplayConfig", "vRef", "i", "handleSlideChange", "newIndex", "incoming", "s", "_index", "slideData", "isActive", "HeroBannerCarousel_default"]
7
7
  }
package/dist/esm/biz-components/SecondaryBanner/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import*as T from"react";import{cva as F}from"class-variance-authority";import v from"jump.js";import{cn as n,getLocalizedPath as I}from"../../helpers/index.js";import{Text as S,Button as z,Heading as W,Picture as $,Countdown as q}from"../../components/index.js";import{withLayout as G}from"../../shared/Styles.js";import K from"../Media/index.js";import{useAiuiContext as Q}from"../AiuiProvider/index.js";import U from"./SecondaryBannerCarousel.js";const X=F("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),C=T.forwardRef(({className:u,classNames:a={},data:e,jumpOptions:g={},isActive:M,...b},y)=>{const{pcImage:D,padImage:N,mobileImage:L,isVideoLoop:A,endDate:f,endDate_tz:O,dateFormat:P,size:w,iconArray:c,theme:_,primaryButton:o,secondaryButton:i,title:j,titleTag:H}=e,V=A??!0,m=w??"base",E=_??"light",J=H??"h1",{locale:x="us"}=Q(),k={...{duration:500,offset:0},...g},d=T.useId(),l=j?`${d}-title`:void 0,h=e.subtitle?`${d}-subtitle`:void 0,B=e.superTitle?`${d}-super-title`:void 0,R=[B,h].filter(Boolean).join(" ")||void 0;return e.mode==="carousel"&&e.items&&e.items.length>0?t(U,{data:e,className:u,classNames:a,jumpOptions:g,ref:y,...b}):p("section",{ref:y,role:"banner","aria-labelledby":l,"aria-describedby":R,className:n({"aiui-dark":E==="dark"},X({size:m}),u,a?.root),...b,children:[t("div",{className:n("absolute inset-0",{"h-fit":m==="xlg"}),children:t(K,{pcImage:D,padImage:N,mobileImage:L,className:"size-full",imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:V,playsInline:!0,autoPlay:M??!0})}),p("div",{className:n("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",a?.content),children:[p("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[e.superTitle&&t(S,{as:"p",size:2,id:B,className:n("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",a?.superTitle),html:e.superTitle}),e.title&&t(W,{as:J,size:["xlg","lg"].includes(m)?5:4,id:l,className:n("banner-title ",a?.title),html:e.title}),e.subtitle&&t(S,{as:"p",size:3,id:h,className:n("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",a?.subtitle),html:e.subtitle})]}),f&&t("div",{className:"banner-countdown",children:t(q,{endDate:f,endDate_tz:O,dateFormat:P,variant:"spacious",className:"lg-desktop:mt-8 mt-6"})}),p("div",{className:n("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",a?.buttonGroup),children:[i?.text&&t(z,{variant:"secondary",onClick:r=>{if(i.link?.startsWith("#")){r.preventDefault();const s=document.querySelector(i.link);s&&v(s,k)}i.onClick?.()},className:n("",a?.secondaryButton),"aria-describedby":l,...i.link&&!i.link.startsWith("#")?{as:"a",href:I(i.link,x)}:{},children:i.text}),o?.text&&t(z,{onClick:r=>{if(o.link?.startsWith("#")){r.preventDefault();const s=document.querySelector(o.link);s&&v(s,k)}o.onClick?.()},className:n("",a?.primaryButton),"aria-describedby":l,...o.link&&!o.link.startsWith("#")?{as:"a",href:I(o.link,x)}:{},children:o.text})]}),Array.isArray(c)&&c.length>0&&t("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:c.map((r,s)=>r.pcImage?t($,{source:r.pcImage.url,alt:r.pcImage.alt||`icon ${s+1}`,role:"img",className:"laptop:h-auto h-[48px] max-w-none",imgClassName:"h-full"},s):null)})]})]})});C.displayName="SecondaryBanner";var re=G(C);export{re as default,X as secondaryBannerVariants};
1
+ "use client";import{jsx as t,jsxs as p}from"react/jsx-runtime";import*as T from"react";import{cva as F}from"class-variance-authority";import v from"jump.js";import{cn as n,getLocalizedPath as I}from"../../helpers/index.js";import{Text as S,Button as z,Heading as W,Picture as $,Countdown as q}from"../../components/index.js";import{withLayout as G}from"../../shared/Styles.js";import K from"../Media/index.js";import{useAiuiContext as Q}from"../AiuiProvider/index.js";import U from"./SecondaryBannerCarousel.js";const X=F("text-info-primary relative w-full",{variants:{size:{sm:"tablet:aspect-[768/480] laptop:aspect-[1920/480] desktop:aspect-[1920/480] lg-desktop:aspect-[1920/480] aspect-[390/480]",base:"tablet:aspect-[768/660] laptop:aspect-[1920/720] desktop:aspect-[1920/720] lg-desktop:aspect-[1920/720] aspect-[390/660]",lg:"tablet:aspect-[768/660] laptop:aspect-[1920/930] desktop:aspect-[1920/930] lg-desktop:aspect-[1920/930] aspect-[390/660]",xlg:"tablet:aspect-[768/660] laptop:aspect-[1920/930] desktop:aspect-[1920/930] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible"}},defaultVariants:{size:"base"}}),C=T.forwardRef(({className:u,classNames:a={},data:e,jumpOptions:g={},isActive:M,...b},y)=>{const{pcImage:D,padImage:N,mobileImage:L,isVideoLoop:A,endDate:f,endDate_tz:O,dateFormat:P,size:w,iconArray:c,theme:_,primaryButton:o,secondaryButton:i,title:j,titleTag:H}=e,V=A??!0,m=w??"base",E=_??"light",J=H??"h1",{locale:x="us"}=Q(),k={...{duration:500,offset:0},...g},d=T.useId(),l=j?`${d}-title`:void 0,h=e.subtitle?`${d}-subtitle`:void 0,B=e.superTitle?`${d}-super-title`:void 0,R=[B,h].filter(Boolean).join(" ")||void 0;return e.mode==="carousel"&&e.items&&e.items.length>0?t(U,{data:e,className:u,classNames:a,jumpOptions:g,ref:y,...b}):p("section",{ref:y,role:"banner","aria-labelledby":l,"aria-describedby":R,className:n({"aiui-dark":E==="dark"},X({size:m}),u,a?.root),...b,children:[t("div",{className:n("absolute inset-0",{"h-fit":m==="xlg"}),children:t(K,{pcImage:D,padImage:N,mobileImage:L,className:"size-full",imgClassName:"object-cover",videoClassName:"object-cover",muted:!0,loop:V,playsInline:!0,autoPlay:M??!0})}),p("div",{className:n("banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left",a?.content),children:[p("div",{className:"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1",children:[e.superTitle&&t(S,{as:"p",size:2,id:B,className:n("banner-super-title desktop:text-[16px] lg-desktop:text-[18px]",a?.superTitle),html:e.superTitle}),e.title&&t(W,{as:J,size:["xlg","lg"].includes(m)?5:4,id:l,className:n("banner-title ",a?.title),html:e.title}),e.subtitle&&t(S,{as:"p",size:3,id:h,className:n("banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]",a?.subtitle),html:e.subtitle})]}),f&&t("div",{className:"banner-countdown",children:t(q,{endDate:f,endDate_tz:O,dateFormat:P,variant:"spacious",className:"lg-desktop:mt-8 mt-6"})}),p("div",{className:n("banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2",a?.buttonGroup),children:[i?.text&&t(z,{variant:"secondary",onClick:r=>{if(i.link?.startsWith("#")){r.preventDefault();const s=document.querySelector(i.link);s&&v(s,k)}i.onClick?.()},className:n("",a?.secondaryButton),"aria-describedby":l,...i.link&&!i.link.startsWith("#")?{as:"a",href:I(i.link,x)}:{},children:i.text}),o?.text&&t(z,{onClick:r=>{if(o.link?.startsWith("#")){r.preventDefault();const s=document.querySelector(o.link);s&&v(s,k)}o.onClick?.()},className:n("",a?.primaryButton),"aria-describedby":l,...o.link&&!o.link.startsWith("#")?{as:"a",href:I(o.link,x)}:{},children:o.text})]}),Array.isArray(c)&&c.length>0&&t("div",{className:"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2",role:"group","aria-label":"brand icons",children:c.map((r,s)=>r.pcImage?t($,{source:r.pcImage.url,alt:r.pcImage.alt||`icon ${s+1}`,role:"img",className:"laptop:h-auto h-[48px] max-w-none",imgClassName:"h-full"},s):null)})]})]})});C.displayName="SecondaryBanner";var re=G(C);export{re as default,X as secondaryBannerVariants};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/SecondaryBanner/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/SecondaryBanner/index.tsx"],
4
- "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n// Task 15: static import (no require()) for carousel delegation (DECISION-002)\nimport SecondaryBannerCarouselImpl from './SecondaryBannerCarousel.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * Carousel navigation configuration for SecondaryBanner. v1: arrows only.\n * autoplay, dots, and progress are intentionally EXCLUDED from v1.\n */\nexport interface SecondaryBannerCarouselConfig {\n /**\n * Show prev/next arrow navigation controls.\n * Only used when data.items has 2+ slides.\n * @default true\n */\n showArrows?: boolean\n showDots?: boolean\n loop?: boolean\n autoplaySeconds?: number\n}\n\n/**\n * Per-slide data for SecondaryBanner carousel mode.\n * All fields optional (mirrors SecondaryBannerData permissiveness).\n */\nexport interface SecondaryBannerSlideData {\n title?: string\n titleTag?: 'h1' | 'h2'\n superTitle?: string\n subtitle?: string\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n isVideoLoop?: boolean\n endDate?: string\n endDate_tz?: string\n dateFormat?: string\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\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\nexport const secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1024/400] desktop:aspect-[1440/384] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1024/432] desktop:aspect-[1440/576] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1024/520] desktop:aspect-[1440/700] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n /**\n * Carousel slide items. When present and non-empty, activates carousel mode.\n * Single-banner mode is used when absent or empty (DECISION-002).\n */\n items?: SecondaryBannerSlideData[]\n /**\n * Display mode: 'single' renders the first frame only; 'carousel' activates Swiper.\n * Mirrors the CMS `mode` field (single | carousel). Defaults to single-banner path\n * when absent (backward-compatible with legacy data that has no mode field).\n */\n mode?: 'single' | 'carousel'\n /**\n * Carousel navigation configuration.\n * Only meaningful when data.items is present and has 2+ items.\n */\n carousel?: SecondaryBannerCarouselConfig\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, 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 * Whether this banner is the active slide in a carousel.\n * Controls video autoPlay: autoPlay={isActive ?? true}.\n * When absent (legacy single-banner), defaults to true (DECISION-008).\n * @default true\n */\n isActive?: boolean\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, isActive, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop: _isVideoLoop,\n endDate,\n endDate_tz,\n dateFormat,\n size: _size,\n iconArray: icons,\n theme: _theme,\n primaryButton,\n secondaryButton,\n title,\n titleTag: _titleTag,\n } = data\n\n const isVideoLoop = _isVideoLoop ?? true\n const size = _size ?? 'base'\n const theme = _theme ?? 'light'\n const titleTag = _titleTag ?? 'h1'\n\n // Hooks must be called unconditionally before any early return (React rules)\n const { locale = 'us' } = useAiuiContext()\n\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n // Task 15: Carousel mode early return AFTER all hooks (DECISION-002 / DECISION-A008)\n if (data.mode === 'carousel' && data.items && data.items.length > 0) {\n return (\n <SecondaryBannerCarouselImpl\n data={data}\n className={className}\n classNames={classNames}\n jumpOptions={jumpOptions}\n ref={ref}\n {...props}\n />\n )\n }\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <div className={cn('absolute inset-0', { 'h-fit': size === 'xlg' })}>\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className=\"size-full\"\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={isActive ?? true}\n />\n </div>\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\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.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(secondaryButton.link, locale) }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\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.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(primaryButton.link, locale) }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default withLayout(SecondaryBanner)\n"],
4
+ "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cva } from 'class-variance-authority'\nimport jump from 'jump.js'\nimport { cn, getLocalizedPath } from '../../helpers/index.js'\nimport type { Media as MediaType, Theme } from '../../types/props.js'\nimport { Text, Button, Heading, Picture, Countdown } from '../../components/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Media from '../Media/index.js'\nimport type { ButtonProps } from '../../components/button.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n// Task 15: static import (no require()) for carousel delegation (DECISION-002)\nimport SecondaryBannerCarouselImpl from './SecondaryBannerCarousel.js'\n\nexport type SecondaryBannerSemanticName =\n | 'root'\n | 'title'\n | 'superTitle'\n | 'subtitle'\n | 'content'\n | 'buttonGroup'\n | 'primaryButton'\n | 'secondaryButton'\n\n/**\n * Carousel navigation configuration for SecondaryBanner. v1: arrows only.\n * autoplay, dots, and progress are intentionally EXCLUDED from v1.\n */\nexport interface SecondaryBannerCarouselConfig {\n /**\n * Show prev/next arrow navigation controls.\n * Only used when data.items has 2+ slides.\n * @default true\n */\n showArrows?: boolean\n showDots?: boolean\n loop?: boolean\n autoplaySeconds?: number\n}\n\n/**\n * Per-slide data for SecondaryBanner carousel mode.\n * All fields optional (mirrors SecondaryBannerData permissiveness).\n */\nexport interface SecondaryBannerSlideData {\n title?: string\n titleTag?: 'h1' | 'h2'\n superTitle?: string\n subtitle?: string\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n isVideoLoop?: boolean\n endDate?: string\n endDate_tz?: string\n dateFormat?: string\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\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\nexport const secondaryBannerVariants = cva(\n // \u57FA\u7840\u6837\u5F0F\n 'text-info-primary relative w-full',\n {\n variants: {\n size: {\n sm: 'tablet:aspect-[768/480] laptop:aspect-[1920/480] desktop:aspect-[1920/480] lg-desktop:aspect-[1920/480] aspect-[390/480]',\n base: 'tablet:aspect-[768/660] laptop:aspect-[1920/720] desktop:aspect-[1920/720] lg-desktop:aspect-[1920/720] aspect-[390/660]',\n lg: 'tablet:aspect-[768/660] laptop:aspect-[1920/930] desktop:aspect-[1920/930] lg-desktop:aspect-[1920/930] aspect-[390/660]',\n xlg: 'tablet:aspect-[768/660] laptop:aspect-[1920/930] desktop:aspect-[1920/930] lg-desktop:aspect-[1920/930] aspect-[390/660] overflow-visible',\n },\n },\n defaultVariants: {\n size: 'base',\n },\n }\n)\n\n/**\n * SecondaryBanner \u4E1A\u52A1\u7EC4\u4EF6\u6570\u636E\u63A5\u53E3\n */\nexport interface SecondaryBannerData {\n /** \u4E3B\u6807\u9898*/\n title?: string\n /**\n * \u4E3B\u6807\u9898\u6807\u7B7E\n * @default 'h1'\n */\n titleTag?: 'h1' | 'h2'\n /**\n * \u4E0A\u6807\u9898/\u5F15\u5BFC\u6807\u9898\n * \u901A\u5E38\u7528\u4E8E\u5206\u7C7B\u3001\u5F15\u5BFC\u6027\u6587\u5B57\n */\n superTitle?: string\n /**\n * \u526F\u6807\u9898/\u63CF\u8FF0\u6587\u5B57\n * \u901A\u5E38\u7528\u4E8E\u8865\u5145\u8BF4\u660E\u3001\u8BE6\u7EC6\u63CF\u8FF0\n */\n subtitle?: string\n /**\n * \u5C3A\u5BF8:\n * sm: \u5C0F\u5C3A\u5BF8\u7528\u4E8E\u7B5B\u9009\u9875\u9762\n * base: \u57FA\u7840\u5C3A\u5BF8\u7528\u4E8E\n * lg: \u5927\u5C3A\u5BF8\u7528\u4E8E\u4E13\u9898\u9875\n * xlg: \u6D3B\u52A8\u9875\uFF08\u901A\u680F\uFF09\n */\n size?: 'sm' | 'base' | 'lg' | 'xlg'\n pcImage?: MediaType\n padImage?: MediaType\n mobileImage?: MediaType\n /** \u89C6\u9891\u662F\u5426\u5FAA\u73AF\u64AD\u653E */\n isVideoLoop?: boolean\n /** \u7ED3\u675F\u65F6\u95F4\uFF08ISO \u5B57\u7B26\u4E32\uFF09 */\n endDate?: string\n /** \u7ED3\u675F\u65F6\u95F4\u65F6\u533A\uFF08\u5982: America/Los_Angeles\uFF09 */\n endDate_tz?: string\n /**\n * \u65F6\u95F4\u683C\u5F0F\u5316\u914D\u7F6E\uFF08JSON \u5B57\u7B26\u4E32\uFF09\n * {\"day\":\"\u65E5\",\"hour\":\"\u65F6\",\"minute\":\"\u5206\",\"second\":\"\u79D2\"}\n */\n dateFormat?: string\n\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n /** \u6B21\u7EA7\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: {\n text: string\n link?: string\n onClick?: () => void\n } & Omit<ButtonProps, 'children'>\n\n iconArray?: Array<{ pcImage: MediaType }>\n theme?: Theme\n /**\n * Carousel slide items. When present and non-empty, activates carousel mode.\n * Single-banner mode is used when absent or empty (DECISION-002).\n */\n items?: SecondaryBannerSlideData[]\n /**\n * Display mode: 'single' renders the first frame only; 'carousel' activates Swiper.\n * Mirrors the CMS `mode` field (single | carousel). Defaults to single-banner path\n * when absent (backward-compatible with legacy data that has no mode field).\n */\n mode?: 'single' | 'carousel'\n /**\n * Carousel navigation configuration.\n * Only meaningful when data.items is present and has 2+ items.\n */\n carousel?: SecondaryBannerCarouselConfig\n}\n\nexport interface SecondaryBannerProps extends React.HTMLAttributes<HTMLElement> {\n /** \u4E1A\u52A1\u6570\u636E */\n data: SecondaryBannerData\n classNames?: Partial<Record<SecondaryBannerSemanticName, 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 * Whether this banner is the active slide in a carousel.\n * Controls video autoPlay: autoPlay={isActive ?? true}.\n * When absent (legacy single-banner), defaults to true (DECISION-008).\n * @default true\n */\n isActive?: boolean\n}\n\n/**\n * SecondaryBanner - \u6B21\u7EA7\u6A2A\u5E45banner\n *\n * @description \u662F\u6307\u7528\u6237\u8FDB\u5165\u4E8C\u7EA7\u9875\u9762\u540E\uFF0C\u65E0\u9700\u6EDA\u52A8\u9875\u9762\u5C31\u80FD\u5728\u7B2C\u4E00\u5C4F\uFF08\u5373\"\u9996\u5C4F\"\uFF09\u770B\u5230\u7684\u3001\u901A\u5E38\u6A2A\u8DE8\u6574\u4E2A\u6D4F\u89C8\u5668\u7A97\u53E3\u5BBD\u5EA6\u7684\u6838\u5FC3\u89C6\u89C9\u533A\u57DF\u3002\n */\nconst SecondaryBanner = React.forwardRef<HTMLElement, SecondaryBannerProps>(\n ({ className, classNames = {}, data, jumpOptions = {}, isActive, ...props }, ref) => {\n const {\n pcImage,\n padImage,\n mobileImage,\n isVideoLoop: _isVideoLoop,\n endDate,\n endDate_tz,\n dateFormat,\n size: _size,\n iconArray: icons,\n theme: _theme,\n primaryButton,\n secondaryButton,\n title,\n titleTag: _titleTag,\n } = data\n\n const isVideoLoop = _isVideoLoop ?? true\n const size = _size ?? 'base'\n const theme = _theme ?? 'light'\n const titleTag = _titleTag ?? 'h1'\n\n // Hooks must be called unconditionally before any early return (React rules)\n const { locale = 'us' } = useAiuiContext()\n\n const defaultJumpOptions: JumpOptions = { duration: 500, offset: 0 }\n const mergedJumpOptions = { ...defaultJumpOptions, ...jumpOptions }\n\n const bannerId = React.useId()\n const titleId = title ? `${bannerId}-title` : undefined\n const subtitleId = data.subtitle ? `${bannerId}-subtitle` : undefined\n const superTitleId = data.superTitle ? `${bannerId}-super-title` : undefined\n const describedBy = [superTitleId, subtitleId].filter(Boolean).join(' ') || undefined\n\n // Task 15: Carousel mode early return AFTER all hooks (DECISION-002 / DECISION-A008)\n if (data.mode === 'carousel' && data.items && data.items.length > 0) {\n return (\n <SecondaryBannerCarouselImpl\n data={data}\n className={className}\n classNames={classNames}\n jumpOptions={jumpOptions}\n ref={ref}\n {...props}\n />\n )\n }\n\n return (\n <section\n ref={ref}\n role=\"banner\"\n aria-labelledby={titleId}\n aria-describedby={describedBy}\n className={cn(\n {\n 'aiui-dark': theme === 'dark',\n },\n secondaryBannerVariants({ size: size }),\n className,\n classNames?.root\n )}\n {...props}\n >\n <div className={cn('absolute inset-0', { 'h-fit': size === 'xlg' })}>\n <Media\n pcImage={pcImage}\n padImage={padImage}\n mobileImage={mobileImage}\n className=\"size-full\"\n imgClassName=\"object-cover\"\n videoClassName=\"object-cover\"\n muted={true}\n loop={isVideoLoop}\n playsInline={true}\n autoPlay={isActive ?? true}\n />\n </div>\n <div\n className={cn(\n 'banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] absolute top-12 z-10 flex flex-col items-start justify-center px-[16px] text-left',\n classNames?.content\n )}\n >\n <div className=\"banner-inner-title desktop:gap-2 flex flex-col items-start gap-1\">\n {data.superTitle && (\n <Text\n as=\"p\"\n size={2}\n id={superTitleId}\n className={cn('banner-super-title desktop:text-[16px] lg-desktop:text-[18px]', classNames?.superTitle)}\n html={data.superTitle}\n />\n )}\n\n {data.title && (\n <Heading\n as={titleTag}\n size={['xlg', 'lg'].includes(size) ? 5 : 4}\n id={titleId}\n className={cn('banner-title ', classNames?.title)}\n html={data.title}\n />\n )}\n\n {data.subtitle && (\n <Text\n as=\"p\"\n size={3}\n id={subtitleId}\n className={cn('banner-subtitle desktop:text-[16px] lg-desktop:text-[18px]', classNames?.subtitle)}\n html={data.subtitle}\n />\n )}\n </div>\n\n {endDate && (\n <div className=\"banner-countdown\">\n <Countdown\n endDate={endDate}\n endDate_tz={endDate_tz}\n dateFormat={dateFormat}\n variant=\"spacious\"\n className=\"lg-desktop:mt-8 mt-6\"\n />\n </div>\n )}\n\n <div\n className={cn(\n 'banner-cta-group lg-desktop:mt-[32px] lg-desktop:gap-3 mt-6 flex gap-2',\n classNames?.buttonGroup\n )}\n >\n {secondaryButton?.text && (\n <Button\n variant=\"secondary\"\n onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\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.onClick?.()\n }}\n className={cn('', classNames?.secondaryButton)}\n aria-describedby={titleId}\n {...(secondaryButton.link && !secondaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(secondaryButton.link, locale) }\n : {})}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton?.text && (\n <Button\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.onClick?.()\n }}\n className={cn('', classNames?.primaryButton)}\n aria-describedby={titleId}\n {...(primaryButton.link && !primaryButton.link.startsWith('#')\n ? { as: 'a', href: getLocalizedPath(primaryButton.link, locale) }\n : {})}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n\n {Array.isArray(icons) && icons.length > 0 && (\n <div\n className=\"banner-icons desktop:mt-3 lg-desktop:mt-4 mt-2 flex items-center gap-2\"\n role=\"group\"\n aria-label=\"brand icons\"\n >\n {icons.map((icon, index) =>\n icon.pcImage ? (\n <Picture\n key={index}\n source={icon.pcImage.url}\n alt={icon.pcImage.alt || `icon ${index + 1}`}\n role=\"img\"\n className=\"laptop:h-auto h-[48px] max-w-none\"\n imgClassName=\"h-full\"\n />\n ) : null\n )}\n </div>\n )}\n </div>\n </section>\n )\n }\n)\n\nSecondaryBanner.displayName = 'SecondaryBanner'\nexport default withLayout(SecondaryBanner)\n"],
5
5
  "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "React", "cva", "jump", "cn", "getLocalizedPath", "Text", "Button", "Heading", "Picture", "Countdown", "withLayout", "Media", "useAiuiContext", "SecondaryBannerCarouselImpl", "secondaryBannerVariants", "SecondaryBanner", "className", "classNames", "data", "jumpOptions", "isActive", "props", "ref", "pcImage", "padImage", "mobileImage", "_isVideoLoop", "endDate", "endDate_tz", "dateFormat", "_size", "icons", "_theme", "primaryButton", "secondaryButton", "title", "_titleTag", "isVideoLoop", "size", "theme", "titleTag", "locale", "mergedJumpOptions", "bannerId", "titleId", "subtitleId", "superTitleId", "describedBy", "e", "element", "icon", "index", "SecondaryBanner_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.3.26",
3
+ "version": "1.3.27",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",
package/style.css CHANGED
@@ -5745,18 +5745,21 @@ video {
5745
5745
  .laptop\:aspect-\[1024\/384\] {
5746
5746
  aspect-ratio: 1024/384;
5747
5747
  }
5748
- .laptop\:aspect-\[1024\/400\] {
5749
- aspect-ratio: 1024/400;
5750
- }
5751
- .laptop\:aspect-\[1024\/432\] {
5752
- aspect-ratio: 1024/432;
5753
- }
5754
5748
  .laptop\:aspect-\[1024\/480\] {
5755
5749
  aspect-ratio: 1024/480;
5756
5750
  }
5757
5751
  .laptop\:aspect-\[1024\/520\] {
5758
5752
  aspect-ratio: 1024/520;
5759
5753
  }
5754
+ .laptop\:aspect-\[1920\/480\] {
5755
+ aspect-ratio: 1920/480;
5756
+ }
5757
+ .laptop\:aspect-\[1920\/720\] {
5758
+ aspect-ratio: 1920/720;
5759
+ }
5760
+ .laptop\:aspect-\[1920\/930\] {
5761
+ aspect-ratio: 1920/930;
5762
+ }
5760
5763
  .laptop\:aspect-\[288\/192\] {
5761
5764
  aspect-ratio: 288/192;
5762
5765
  }
@@ -6789,21 +6792,24 @@ video {
6789
6792
  .desktop\:aspect-\[1312\/512\] {
6790
6793
  aspect-ratio: 1312/512;
6791
6794
  }
6792
- .desktop\:aspect-\[1440\/384\] {
6793
- aspect-ratio: 1440/384;
6794
- }
6795
6795
  .desktop\:aspect-\[1440\/512\] {
6796
6796
  aspect-ratio: 1440/512;
6797
6797
  }
6798
- .desktop\:aspect-\[1440\/576\] {
6799
- aspect-ratio: 1440/576;
6800
- }
6801
6798
  .desktop\:aspect-\[1440\/640\] {
6802
6799
  aspect-ratio: 1440/640;
6803
6800
  }
6804
6801
  .desktop\:aspect-\[1440\/700\] {
6805
6802
  aspect-ratio: 1440/700;
6806
6803
  }
6804
+ .desktop\:aspect-\[1920\/480\] {
6805
+ aspect-ratio: 1920/480;
6806
+ }
6807
+ .desktop\:aspect-\[1920\/720\] {
6808
+ aspect-ratio: 1920/720;
6809
+ }
6810
+ .desktop\:aspect-\[1920\/930\] {
6811
+ aspect-ratio: 1920/930;
6812
+ }
6807
6813
  .desktop\:aspect-\[427\/256\] {
6808
6814
  aspect-ratio: 427/256;
6809
6815
  }