@anker-in/headless-ui 1.3.76-alpha.1790245429452 → 1.3.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/cjs/biz-components/AiuiProvider/index.js +1 -1
- package/dist/cjs/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.d.ts +10 -9
- package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/index.d.ts +0 -3
- package/dist/cjs/biz-components/HeroBanner/index.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +6 -101
- package/dist/cjs/biz-components/HeroBanner/types.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/types.d.ts +2 -2
- package/dist/cjs/biz-components/Ksp/index.d.ts +0 -2
- package/dist/cjs/biz-components/Ksp/index.js +1 -1
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +2 -2
- package/dist/cjs/biz-components/SecondaryBanner/SecondaryBannerCarousel.d.ts +9 -9
- package/dist/cjs/biz-components/SecondaryBanner/SecondaryBannerCarousel.js +1 -1
- package/dist/cjs/biz-components/SecondaryBanner/index.d.ts +6 -54
- package/dist/cjs/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/cjs/biz-components/index.d.ts +0 -1
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/components/link.js +1 -1
- package/dist/cjs/hooks/useDraggableScroll.js +1 -1
- package/dist/cjs/hooks/useExposure.d.ts +1 -1
- package/dist/cjs/hooks/useExposure.js +1 -1
- package/dist/cjs/hooks/useViewItemList.d.ts +1 -1
- package/dist/cjs/index.d.ts +0 -4
- package/dist/cjs/index.js +1 -1
- package/dist/esm/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/esm/biz-components/AiuiProvider/index.js +1 -1
- package/dist/esm/biz-components/BrandEquity/BrandEquity.js +1 -1
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.d.ts +10 -9
- package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
- package/dist/esm/biz-components/HeroBanner/index.d.ts +0 -3
- package/dist/esm/biz-components/HeroBanner/index.js +1 -1
- package/dist/esm/biz-components/HeroBanner/types.d.ts +6 -101
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/types.d.ts +2 -2
- package/dist/esm/biz-components/Ksp/index.d.ts +0 -2
- package/dist/esm/biz-components/Ksp/index.js +1 -1
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +2 -2
- package/dist/esm/biz-components/SecondaryBanner/SecondaryBannerCarousel.d.ts +9 -9
- package/dist/esm/biz-components/SecondaryBanner/SecondaryBannerCarousel.js +1 -1
- package/dist/esm/biz-components/SecondaryBanner/index.d.ts +6 -54
- package/dist/esm/biz-components/SecondaryBanner/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/esm/biz-components/index.d.ts +0 -1
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/components/link.js +1 -1
- package/dist/esm/hooks/useDraggableScroll.js +1 -1
- package/dist/esm/hooks/useExposure.d.ts +1 -1
- package/dist/esm/hooks/useExposure.js +1 -1
- package/dist/esm/hooks/useViewItemList.d.ts +1 -1
- package/dist/esm/index.d.ts +0 -4
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
- package/style.css +19 -28
- package/dist/cjs/biz-components/HeroBanner/mediaResolver.d.ts +0 -58
- package/dist/cjs/biz-components/HeroBanner/mediaResolver.js +0 -1
- package/dist/cjs/hooks/useCarouselPlayback.d.ts +0 -67
- package/dist/cjs/hooks/useCarouselPlayback.js +0 -1
- package/dist/cjs/shared/CarouselControls.d.ts +0 -48
- package/dist/cjs/shared/CarouselControls.js +0 -1
- package/dist/esm/biz-components/HeroBanner/mediaResolver.d.ts +0 -58
- package/dist/esm/biz-components/HeroBanner/mediaResolver.js +0 -1
- package/dist/esm/hooks/useCarouselPlayback.d.ts +0 -67
- package/dist/esm/hooks/useCarouselPlayback.js +0 -1
- package/dist/esm/shared/CarouselControls.d.ts +0 -48
- package/dist/esm/shared/CarouselControls.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var C=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},g=(e,t,a,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of V(t))!I.call(e,s)&&s!==a&&p(e,s,{get:()=>t[s],enumerable:!(c=P(t,s))||c.enumerable});return e};var L=(e,t,a)=>(a=e!=null?C(z(e)):{},g(t||!e||!e.__esModule?p(a,"default",{value:e,enumerable:!0}):a,e)),E=e=>g(p({},"__esModule",{value:!0}),e);var R={};B(R,{default:()=>M});module.exports=E(R);var i=require("react/jsx-runtime"),v=L(require("react")),d=require("../../helpers/index.js"),l=require("../../components/index.js"),f=require("class-variance-authority"),h=require("swiper/react"),y=require("../../shared/Styles.js");const j=(0,f.cva)("rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3",{variants:{state:{"active-light":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","active-dark":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","inactive-light":"bg-[#EAEAEC]","inactive-dark":"bg-[#1E2024]"},size:{small:"laptop:h-[160px] h-[120px]",large:"laptop:h-[240px] h-[200px]"}},defaultVariants:{state:"inactive-light",size:"small"}}),m=(0,f.cva)("font-bold leading-[1.2]",{variants:{state:{"active-light":"text-white","active-dark":"text-white","inactive-light":"text-[#080A0F]","inactive-dark":"text-white"}},defaultVariants:{state:"inactive-light"}}),w=v.memo(({item:e,theme:t="light",className:a,size:c})=>{const s=e.isActive||!1,o=`${s?"active":"inactive"}-${t}`;return(0,i.jsx)("div",{className:(0,d.cn)(j({state:o,size:c}),a),"data-ui-component-id":"ActivityScheduleCard",children:(0,i.jsxs)(l.Link,{asChild:!e?.link,href:e?.link,className:"size-full no-underline hover:text-current",children:[(s?e.activeIcon:e.inactiveIcon)&&(0,i.jsx)("div",{className:"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]",children:(0,i.jsx)(l.Picture,{source:s?e.activeIcon.url:e.inactiveIcon.url,alt:s?e.activeIcon.alt:e.inactiveIcon.alt,className:"aspect-square"})}),(0,i.jsxs)("div",{className:"relative z-20 flex h-full flex-col justify-between",children:[(0,i.jsx)(l.Heading,{as:"h3",size:3,html:e.title,className:(0,d.cn)(m({state:o}))}),(0,i.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,i.jsx)("div",{className:"flex flex-col justify-end overflow-hidden",children:(0,i.jsx)(l.Heading,{as:"h4",size:2,html:e.subtitle,className:(0,d.cn)(" line-clamp-2",m({state:o}))})}),c==="large"&&e.description&&(0,i.jsx)(l.Text,{html:e.description,className:(0,d.cn)("lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]",m({state:o}))})]})]})]})})});w.displayName="ActivityScheduleCard";const x=v.forwardRef(({classNames:e={},data:t,...a},c)=>{const s=t.theme||"light",o=t.size||"
|
|
1
|
+
"use strict";"use client";var C=Object.create;var p=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var B=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},g=(e,t,a,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of V(t))!I.call(e,s)&&s!==a&&p(e,s,{get:()=>t[s],enumerable:!(c=P(t,s))||c.enumerable});return e};var L=(e,t,a)=>(a=e!=null?C(z(e)):{},g(t||!e||!e.__esModule?p(a,"default",{value:e,enumerable:!0}):a,e)),E=e=>g(p({},"__esModule",{value:!0}),e);var R={};B(R,{default:()=>M});module.exports=E(R);var i=require("react/jsx-runtime"),v=L(require("react")),d=require("../../helpers/index.js"),l=require("../../components/index.js"),f=require("class-variance-authority"),h=require("swiper/react"),y=require("../../shared/Styles.js");const j=(0,f.cva)("rounded-card laptop:px-6 laptop:py-4 relative flex min-w-0 flex-col justify-between gap-2 overflow-hidden px-4 py-3",{variants:{state:{"active-light":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","active-dark":"bg-gradient-to-r from-[#3555aa] to-[#6988e3]","inactive-light":"bg-[#EAEAEC]","inactive-dark":"bg-[#1E2024]"},size:{small:"laptop:h-[160px] h-[120px]",large:"laptop:h-[240px] h-[200px]"}},defaultVariants:{state:"inactive-light",size:"small"}}),m=(0,f.cva)("font-bold leading-[1.2]",{variants:{state:{"active-light":"text-white","active-dark":"text-white","inactive-light":"text-[#080A0F]","inactive-dark":"text-white"}},defaultVariants:{state:"inactive-light"}}),w=v.memo(({item:e,theme:t="light",className:a,size:c})=>{const s=e.isActive||!1,o=`${s?"active":"inactive"}-${t}`;return(0,i.jsx)("div",{className:(0,d.cn)(j({state:o,size:c}),a),"data-ui-component-id":"ActivityScheduleCard",children:(0,i.jsxs)(l.Link,{asChild:!e?.link,href:e?.link,className:"size-full no-underline hover:text-current",children:[(s?e.activeIcon:e.inactiveIcon)&&(0,i.jsx)("div",{className:"laptop:w-[160px] aspect-1 absolute right-0 top-0 z-10 w-[120px]",children:(0,i.jsx)(l.Picture,{source:s?e.activeIcon.url:e.inactiveIcon.url,alt:s?e.activeIcon.alt:e.inactiveIcon.alt,className:"aspect-square"})}),(0,i.jsxs)("div",{className:"relative z-20 flex h-full flex-col justify-between",children:[(0,i.jsx)(l.Heading,{as:"h3",size:3,html:e.title,className:(0,d.cn)(m({state:o}))}),(0,i.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,i.jsx)("div",{className:"flex flex-col justify-end overflow-hidden",children:(0,i.jsx)(l.Heading,{as:"h4",size:2,html:e.subtitle,className:(0,d.cn)(" line-clamp-2",m({state:o}))})}),c==="large"&&e.description&&(0,i.jsx)(l.Text,{html:e.description,className:(0,d.cn)("lg-desktop:text-[18px] desktop:text-[16px] line-clamp-3 text-[14px] leading-[1.4]",m({state:o}))})]})]})]})})});w.displayName="ActivityScheduleCard";const x=v.forwardRef(({classNames:e={},data:t,...a},c)=>{const s=t.theme||"light",o=t.size||"large",r=v.useMemo(()=>t?.scheduleList?.length||2,[t?.scheduleList]),k=v.useMemo(()=>{const n=N=>{switch(N){case"mobile":return{slidesPerView:1.17,spaceBetween:12};case"tablet":return r===2?{slidesPerView:2,spaceBetween:12}:{slidesPerView:2.4,spaceBetween:12};case"laptop":return r===2?{}:r===4?{slidesPerView:3.2,spaceBetween:16}:{slidesPerView:r,spaceBetween:16};case"desktop":return r===2?{slidesPerView:2,spaceBetween:16}:{slidesPerView:r,spaceBetween:16}}},u=n("mobile"),S=n("tablet"),b=n("laptop"),A=n("desktop");return{0:u,768:S,1024:b,1440:A}},[r]);return(0,i.jsx)(l.Container,{ref:c,className:(0,d.cn)(e?.root),childClassName:"overflow-hidden","data-ui-component-id":"ActivitySchedule",...a,children:(0,i.jsx)(h.Swiper,{breakpoints:k,className:"w-full !overflow-visible",children:t.scheduleList.map((n,u)=>(0,i.jsx)(h.SwiperSlide,{children:(0,i.jsx)(w,{item:n,theme:s,size:o,className:e?.card})},"activityScheduleCardItem"+u))})})});x.displayName="ActivitySchedule";var M=(0,y.withLayout)(x);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var d=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var M=(n,e)=>{for(var i in e)d(n,i,{get:e[i],enumerable:!0})},P=(n,e,i,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of T(e))!_.call(n,o)&&o!==i&&d(n,o,{get:()=>e[o],enumerable:!(c=D(e,o))||c.enumerable});return n};var R=n=>P(d({},"__esModule",{value:!0}),n);var S={};M(S,{AiuiContext:()=>m,default:()=>O,useAiuiContext:()=>L});module.exports=R(S);var g=require("react/jsx-runtime"),h=require("../../shared/track.js"),t=require("react"),k=require("../../helpers/index.js");const m=(0,t.createContext)({trackingData:{},locale:void 0,copyWriting:{}
|
|
1
|
+
"use strict";"use client";var d=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var _=Object.prototype.hasOwnProperty;var M=(n,e)=>{for(var i in e)d(n,i,{get:e[i],enumerable:!0})},P=(n,e,i,c)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of T(e))!_.call(n,o)&&o!==i&&d(n,o,{get:()=>e[o],enumerable:!(c=D(e,o))||c.enumerable});return n};var R=n=>P(d({},"__esModule",{value:!0}),n);var S={};M(S,{AiuiContext:()=>m,default:()=>O,useAiuiContext:()=>L});module.exports=R(S);var g=require("react/jsx-runtime"),h=require("../../shared/track.js"),t=require("react"),k=require("../../helpers/index.js");const m=(0,t.createContext)({trackingData:{},locale:void 0,copyWriting:{}}),L=()=>{const n=(0,t.useContext)(m);if(!n)throw new Error("useAiui must be used in <AiuiProvider>");return n},N=({children:n,...e})=>{const i=(0,t.useRef)(null),c=(0,t.useRef)(e?.trackingData),[o,x]=(0,t.useState)(void 0);(0,t.useEffect)(()=>{e.localeMap&&Object.keys(e.localeMap).length>0&&(0,k.extendLocaleMap)(e.localeMap)},[e.localeMap]),(0,t.useEffect)(()=>{c.current=e?.trackingData},[e?.trackingData]),(0,t.useEffect)(()=>{const p=i.current;if(!p)return;const y=(a,r)=>{const s={};if(!r||!r.attributes)return s;for(const E of Array.from(r.attributes)){const l=E?.name;l?.startsWith("data-headless-")&&(s[l]=r.getAttribute(l))}const A=s?.["data-headless-sku"],v=s?.["data-headless-type-name"]?.split?.("#"),u=s?.["data-headless-title-desc-button"]?.split?.("#"),b=s?.["data-headless-nav-position"]?.split?.("#");(0,h.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:c.current?.pageGroup||"Home Page",component_type:v?.[0]||"",component_name:v?.[1]||"",position:b?.[1]||"",navigation:b?.[0]||"",button_name:u?.[2]||"",SKU:A||"",component_title:u?.[0]||"",component_description:u?.[1]||""}})},f=new MutationObserver(()=>{p.querySelectorAll("[data-headless-type-name]").forEach(a=>{a.hasAttribute("data-headless-track-bound")||(a.addEventListener("click",r=>y(r,a)),a.setAttribute("data-headless-track-bound","true"))})});return f.observe(p,{childList:!0,subtree:!0}),p.querySelectorAll("[data-headless-type-name]").forEach(a=>{a.hasAttribute("data-headless-track-bound")||(a.addEventListener("click",r=>y(r,a)),a.setAttribute("data-headless-track-bound","true"))}),()=>f.disconnect()},[]);const C=(0,t.useMemo)(()=>({...e,navCollapsed:o,setNavCollapsed:x}),[e,o]);return(0,g.jsx)(m.Provider,{value:C,children:(0,g.jsx)("div",{ref:i,children:n})})};var O=N;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var j=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,r)=>{for(var
|
|
1
|
+
"use strict";"use client";var j=Object.create;var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,r)=>{for(var i in r)d(e,i,{get:r[i],enumerable:!0})},h=(e,r,i,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of L(r))!A.call(e,o)&&o!==i&&d(e,o,{get:()=>r[o],enumerable:!(a=P(r,o))||a.enumerable});return e};var k=(e,r,i)=>(i=e!=null?j(z(e)):{},h(r||!e||!e.__esModule?d(i,"default",{value:e,enumerable:!0}):i,e)),D=e=>h(d({},"__esModule",{value:!0}),e);var F={};H(F,{default:()=>C});module.exports=D(F);var t=require("react/jsx-runtime"),s=require("react"),l=require("../../helpers/utils.js"),y=k(require("../../components/picture.js")),q=require("../../shared/Styles.js"),E=require("react-responsive"),S=require("../../hooks/useExposure.js"),c=require("swiper/react"),p=require("swiper/modules"),M=k(require("../Title/index.js"));const R="copy",Q="store_benefits",$=(e,r)=>{const i=[];for(let a=0;a<e.length;a+=r)i.push(e.slice(a,a+r));return i},N=(0,s.forwardRef)(({data:{items:e=[],itemShape:r,title:i,theme:a},className:o},u)=>{const[x,B]=(0,s.useState)(!1),v=(0,E.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,s.useRef)(null),f=(0,s.useRef)(null);(0,s.useImperativeHandle)(u,()=>f.current),(0,S.useExposure)(f,{componentType:R,componentName:Q}),(0,s.useEffect)(()=>{B(v)},[v]);const T=x?$(e,3):e;return(0,t.jsxs)("div",{ref:f,className:(0,l.cn)("brand-equity-wrapper w-full",{"aiui-dark":a==="dark"},o),children:[i&&(0,t.jsx)(M.default,{data:{title:i}}),x?(0,t.jsxs)(c.Swiper,{className:(0,l.cn)(o),modules:[p.FreeMode,p.Mousewheel,p.Pagination],freeMode:!0,mousewheel:{forceToAxis:!0},pagination:{clickable:!0,el:b.current},breakpoints:{0:{spaceBetween:12}},children:[T?.map((n,m)=>(0,t.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((I,g)=>(0,t.jsx)(w,{data:I,itemShape:r,index:g,theme:a},g))},"SwiperSlide"+m)),(0,t.jsx)("div",{ref:b,className:"mt-3 flex justify-center"})]}):(0,t.jsx)("div",{className:(0,l.cn)("grid grid-cols-1 gap-3","tablet:grid-cols-2","laptop:gap-4 laptop:grid-cols-10"),children:e.map((n,m)=>(0,t.jsx)(w,{data:n,itemShape:r,index:m,theme:a},m))})]})}),w=({data:e,itemShape:r,index:i,theme:a})=>(0,t.jsxs)("div",{className:(0,l.cn)("brand-equity-item",`brand-equity-item-${i+1}`,e.containerName?`brand-equity-item--${e.containerName}`:void 0,"bg-container-secondary-1 box-border flex w-full flex-col p-4","desktop:p-6 justify-between","laptop:col-span-3 lg-desktop:p-8","laptop:h-[192px] lg-desktop:h-[240px] h-[160px]",{"laptop:col-span-4":[0,5,6,11].includes(i),"bg-container-primary":a==="dark"},"rounded-box",e.className),children:[(0,t.jsxs)("div",{className:"lg-desktop:h-[36px] flex h-[30px] items-center justify-between gap-3",children:[(0,t.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.type==="avatar"?(0,t.jsx)("div",{className:"flex shrink-0 -space-x-2",children:e?.avatarList?.map((o,u)=>(0,t.jsx)("div",{className:(0,l.cn)("border-container-primary size-[30px] overflow-hidden rounded-full border-2","relative inline-block shrink-0","lg-desktop:size-[36px]"),children:(0,t.jsx)(y.default,{source:o.avatar?.url,alt:o.avatar?.alt,className:"size-full object-cover"})},u))}):(0,t.jsx)("div",{className:"lg-desktop:size-[36px] size-[30px] shrink-0",children:(0,t.jsx)(y.default,{className:"size-full object-cover",source:e.icon?.url,alt:e.icon?.alt,imgClassName:"w-full h-full object-cover"})})]}),(0,t.jsx)("p",{className:"lg-desktop:text-[24px] text-info-primary line-clamp-3 text-[20px] font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]});N.displayName="BrandEquity";var C=(0,q.withLayout)(N);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var Q=Object.create;var M=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var Z=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(a,t)=>{for(var s in t)M(a,s,{get:t[s],enumerable:!0})},G=(a,t,s,h)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Z(t))!F.call(a,i)&&i!==s&&M(a,i,{get:()=>t[i],enumerable:!(h=q(t,i))||h.enumerable});return a};var P=(a,t,s)=>(s=a!=null?Q(j(a)):{},G(t||!a||!a.__esModule?M(s,"default",{value:a,enumerable:!0}):s,a)),K=a=>G(M({},"__esModule",{value:!0}),a);var ee={};J(ee,{default:()=>X});module.exports=K(ee);var e=require("react/jsx-runtime"),r=P(require("react")),R=require("react-responsive"),A=require("../../shared/Styles.js"),C=P(require("../../components/picture.js")),O=P(require("../../components/button.js")),I=require("../../components/heading.js"),
|
|
1
|
+
"use strict";var Q=Object.create;var M=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var Z=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(a,t)=>{for(var s in t)M(a,s,{get:t[s],enumerable:!0})},G=(a,t,s,h)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Z(t))!F.call(a,i)&&i!==s&&M(a,i,{get:()=>t[i],enumerable:!(h=q(t,i))||h.enumerable});return a};var P=(a,t,s)=>(s=a!=null?Q(j(a)):{},G(t||!a||!a.__esModule?M(s,"default",{value:a,enumerable:!0}):s,a)),K=a=>G(M({},"__esModule",{value:!0}),a);var ee={};J(ee,{default:()=>X});module.exports=K(ee);var e=require("react/jsx-runtime"),r=P(require("react")),R=require("react-responsive"),A=require("../../shared/Styles.js"),C=P(require("../../components/picture.js")),O=P(require("../../components/button.js")),I=require("../../components/heading.js"),v=require("../../components/tabs.js"),E=require("../VideoModal/index.js"),p=require("../../helpers/utils.js"),_=P(require("../SwiperBox/index.js")),L=require("../../shared/mimeType.js"),D=require("../../hooks/useExposure.js"),V=require("../../shared/trackUrlRef.js"),H=require("../AiuiProvider/index.js");const y="image",w="p1_banner",W=({data:a,configuration:t,jIndex:s})=>{const[h,i]=(0,r.useState)(!1),m=(0,R.useMediaQuery)({query:"(max-width: 768px)"}),u=(0,r.useRef)(null),b=()=>{switch(t?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[400] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[426] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,D.useExposure)(u,{componentType:y,componentName:w,position:s,componentTitle:a.title,componentDescription:a.description,navigation:t?.activeTab}),(0,r.useEffect)(()=>{i(m)},[m]);const{theme:n="light",title:c,description:o,imageUrl:d,primaryButton:f,secondaryButton:g,imageMobileUrl:k,blockLink:x,video:$,youtubeId:N,isYouTube:B}=a,T="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,p.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",b(),{"rounded-box":!0,"aiui-dark":n==="dark","h-[400px]":h},"text-info-primary"),ref:u,children:[x&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,V.trackUrlRef)((0,p.getLocalizedPath)(x||"",t?.locale||"us"),`${y}_${w}`),"data-headless-type-name":`${y}#${w}`,"data-headless-title-desc-button":`${c}#${o}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,L.isVideo)(d?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden h-full overflow-hidden",children:(0,e.jsx)("source",{src:d?.url,type:"video/mp4"})}):(0,e.jsx)(C.default,{source:d?.url,alt:d?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:(0,p.cn)("h-full object-cover",x&&"transition-all duration-300 group-hover:scale-105"),style:{aspectRatio:`${d?.width}/${d?.height}`}}),(0,L.isVideo)(k?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block h-full overflow-hidden",children:(0,e.jsx)("source",{src:k?.url,type:"video/mp4"})}):(0,e.jsx)(C.default,{source:k?.url||d?.url,alt:k?.alt||d?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,e.jsxs)("div",{className:(0,p.cn)("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 pointer-events-none absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":a?.width==="full"}),children:[(0,e.jsxs)("div",{className:"flex flex-col gap-1",children:[(0,e.jsx)(I.Heading,{size:3,as:"h3",className:"item-title",html:c}),(0,e.jsx)(I.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-3 text-[14px]",html:o})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[g&&g.text&&(0,e.jsxs)(O.default,{"aria-label":c??o,className:(0,p.cn)(T,"link-left pointer-events-auto"),variant:"secondary",as:"a",href:(0,V.trackUrlRef)((0,p.getLocalizedPath)(g.link||"",t?.locale||"us"),`${y}_${w}`),"data-headless-type-name":`${y}#${w}`,"data-headless-title-desc-button":`${c}#${o}#${g?.text}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,children:[g.text,(0,e.jsx)("span",{className:"sr-only",children:c??o})]}),f&&f.text&&(0,e.jsx)(O.default,{"aria-label":c??o,className:(0,p.cn)(T,"link-right pointer-events-auto"),variant:"primary",as:"a",href:(0,V.trackUrlRef)((0,p.getLocalizedPath)(f.link||"",t?.locale||"us"),`${y}_${w}`),"data-headless-type-name":`${y}#${w}`,"data-headless-title-desc-button":`${c}#${o}#${f.text}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,children:f.text})]})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:($?.url||N)&&(0,e.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.($?.url||N,B)},className:"laptop:size-12 hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80",children:(0,e.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:n==="dark"?"black":"white",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z"})})})})})]})},z=({items:a=[],shape:t,locale:s,activeTab:h,onVideoPlayBtnClick:i})=>{const m=u=>{const b=a?.length,n=b>3,c=b>2,o=b>1;switch(!0){case u>=1440:case u>=1024:return n?3:b;case u>=768:return n||c?2.3:o?2:1;default:return o?1.2:1}};return(0,e.jsx)(_.default,{className:"!overflow-visible",id:"GraphicOverlaySwiper",data:{list:a||[],configuration:{shape:t,num:a.length,locale:s,activeTab:h,onVideoPlayBtnClick:i}},Slide:W,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:m(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:m(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:m(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:m(1440)}}})},U=r.default.forwardRef((a,t)=>{const{data:s,className:h,...i}=a,{shape:m,items:u=[],isShowTab:b=!1,tabs:n,tabAlign:c="left"}=s,[o,d]=(0,r.useState)(!1),[f,g]=(0,r.useState)(""),[k,x]=(0,r.useState)(""),[$,N]=(0,r.useState)(n?.[0]?.id??""),{locale:B="us"}=(0,H.useAiuiContext)(),T=(l,Y)=>{d(!0),Y?x?.(l||""):g?.(l||"")},S=()=>(0,e.jsx)(E.VideoModal,{visible:o,youTubeId:k,videoUrl:f,onCloseModal:()=>d(!1)});return!b||!n||n.length===0?(0,e.jsxs)("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...i,className:(0,p.cn)("graphicOverlayBlock text-info-primary ",h),children:[u&&u.length>0?(0,e.jsx)(z,{items:u,shape:m,locale:B,onVideoPlayBtnClick:T}):null,o&&S()]}):(0,e.jsxs)("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...i,className:(0,p.cn)("graphicOverlayBlock text-info-primary ",h),children:[(0,e.jsxs)(v.Tabs,{value:$,onValueChange:N,align:c,children:[(0,e.jsx)("div",{className:"mb-6",children:(0,e.jsx)(v.TabsList,{children:n.map(l=>(0,e.jsx)(v.TabsTrigger,{value:l.id,children:l.label},l.id))})}),n.map(l=>(0,e.jsx)(v.TabsContent,{value:l.id,children:l.items&&l.items.length>0?(0,e.jsx)(z,{items:l.items,shape:m,locale:B,activeTab:l.id,onVideoPlayBtnClick:T}):null},l.id))]}),o&&S()]})});U.displayName="GraphicOverlayBlock";var X=(0,A.withLayout)(U);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var Ne=Object.create;var C=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var Ve=Object.getOwnPropertyNames;var ze=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var Le=(t,i)=>{for(var o in i)C(t,o,{get:i[o],enumerable:!0})},te=(t,i,o,y)=>{if(i&&typeof i=="object"||typeof i=="function")for(let b of Ve(i))!Ce.call(t,b)&&b!==o&&C(t,b,{get:()=>i[b],enumerable:!(y=He(i,b))||y.enumerable});return t};var T=(t,i,o)=>(o=t!=null?Ne(ze(t)):{},te(i||!t||!t.__esModule?C(o,"default",{value:t,enumerable:!0}):o,t)),Se=t=>te(C({},"__esModule",{value:!0}),t);var je={};Le(je,{default:()=>De});module.exports=Se(je);var e=require("react/jsx-runtime"),p=T(require("react")),$=T(require("gsap")),N=require("gsap/dist/ScrollTrigger"),L=T(require("jump.js")),x=require("./mediaResolver.js"),ae=require("react-intersection-observer"),oe=T(require("../../helpers/ScrollLoadVideo.js")),l=require("../../components/index.js"),m=require("../../helpers/index.js"),H=require("class-variance-authority"),ne=require("../../shared/Styles.js"),le=require("../../hooks/useExposure.js"),V=require("../../shared/trackUrlRef.js"),ie=require("../../helpers/utils.js"),se=require("../AiuiProvider/index.js"),pe=require("../../components/button.js"),ue=require("../VideoModal/index.js"),ce=T(require("./HeroBannerCarousel.js"));const f="image",g="hero_banner",Pe=(0,H.cva)("hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]",center:"tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center"}},defaultVariants:{align:"left"}}),Ee=(0,H.cva)("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),Ie=(0,H.cva)("hero-banner-button-group lg-desktop:gap-x-3 flex flex-wrap items-center gap-x-2 gap-y-3",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Me=(0,H.cva)("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),Re=({size:t="base"})=>{const{width:i,height:o}=pe.sizeMap[t];return(0,e.jsx)("svg",{width:i,height:o,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},re=p.default.forwardRef(({data:t,className:i,classNames:o={},onSecondaryClick:y,onPrimaryClick:b,onTertiaryClick:j,jumpOptions:me={},a11yLabels:de,..._},A)=>{const{locale:O}=(0,se.useAiuiContext)(),S={...{duration:500,offset:0},...me},z=r=>!r||!O?r:(0,ie.getLocalizedPath)(r,O),{label:U,title:s,subtitle:n,endDate:G,endDate_tz:fe,dateFormat:ge,pcImage:J,isShowVideo:be,isVideoLoop:xe=!0,primaryButton:u,secondaryButton:a,tertiaryButton:c,theme:he="light",size:P="default",titleSize:E,caption:q=[],blockLink:F,iconArray:W,align:v="left",enableParallax:Y=!0}=t,I=Array.isArray(q)?q:[],ye=Array.isArray(W)?W:void 0,ve=(0,x.useMediaTier)(),Z=(0,x.buildPictureSource)(t),ke=(0,x.resolveTierMedia)(t,ve,"video")?.url||"",[K,Q]=(0,p.useState)(!1),{ref:we,inView:X}=(0,ae.useInView)(),M=(0,p.useRef)(null),R=(0,p.useRef)(null),D=(0,p.useRef)(null),k=(0,p.useRef)(null),h=(0,p.useRef)(null),Be=s?.trim()||n?.trim()||J?.alt?.trim()||void 0,Te=s!==void 0?s?.trim()||n?.trim()||J?.alt?.trim()||void 0:n&&n.trim()||"",$e=n&&n.trim()||"";return(0,le.useExposure)(h,{componentType:f,componentName:g,componentTitle:Te,componentDescription:$e}),(0,p.useImperativeHandle)(A,()=>h.current),(0,p.useEffect)(()=>{if(t.items&&t.items.length>0||!Y)return;$.default.registerPlugin(N.ScrollTrigger);function r(){if(!k.current)return;const d=h.current?.clientHeight||100;window.innerHeight<=d?M.current=N.ScrollTrigger.create({trigger:h.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:w=>{const B=w.progress*40-20;$.default.set(k.current,{yPercent:B})}}):(D.current=N.ScrollTrigger.create({trigger:h.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:w=>{const B=w.progress*20-20;$.default.set(k.current,{yPercent:B})}}),R.current=N.ScrollTrigger.create({trigger:h.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:w=>{const B=w.progress*20;$.default.set(k.current,{yPercent:B})}}))}return X&&r(),()=>{M.current&&M.current.kill(),D.current&&D.current.kill(),R.current&&R.current.kill()}},[X,t.items,Y]),t.items&&t.items.length>0?(0,e.jsx)(ce.default,{data:t,className:i,classNames:o,onPrimaryClick:b,onSecondaryClick:y,onTertiaryClick:j,a11yLabels:de,ref:A,..._}):(0,e.jsx)("div",{..._,ref:we,"data-ui-component-id":"HeroBanner",className:(0,m.cn)(o.root),children:(0,e.jsxs)("div",{ref:h,className:(0,m.cn)(he==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden",{"h-[560px] laptop:h-[400px] desktop:h-[560px] lg-desktop:h-[800px]":P==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":P==="sm"},i),children:[F&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,V.trackUrlRef)(z(F),`${f}_${g}`),"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${s}#${n}`,tabIndex:-1,"aria-hidden":"true","aria-label":Be}),(0,e.jsx)("div",{ref:k,className:(0,m.cn)("absolute left-0 top-0 size-full"),children:be?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{"data-video-poster":"true",className:"laptop:w-full absolute inset-0 h-full transition-opacity duration-500",children:(0,e.jsx)(l.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:(0,x.resolveTierMedia)(t,"lgDesktop","image")?.alt||"",source:Z})}),(0,e.jsx)(oe.default,{poster:void 0,src:ke,className:"laptop:w-full absolute inset-0 h-full",videoClassName:"h-full object-cover",muted:!0,loop:xe,playsInline:!0,onPlaying:r=>{r.currentTarget.closest('[data-ui-component-id="HeroBanner"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")}})]}):(0,e.jsx)(l.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:(0,x.resolveTierMedia)(t,"lgDesktop","image")?.alt||"",source:Z})}),(0,e.jsxs)("div",{className:Pe({align:v}),children:[(0,e.jsxs)("div",{className:Ee({align:v}),children:[U&&(0,e.jsx)(l.Text,{size:2,as:"p",className:(0,m.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:U}),s&&(0,e.jsx)(l.Heading,{as:E==="4"?"h1":"h2",html:s,className:(0,m.cn)("hero-banner-title",o.title),size:E?Number(E||"5"):P==="sm"?4:5}),n&&(0,e.jsx)(l.Text,{as:"p",size:2,className:(0,m.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",o.subtitle),html:n}),G&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(l.Countdown,{endDate:G,endDate_tz:fe,dateFormat:ge,variant:"spacious",align:v})})]}),(0,e.jsxs)("div",{className:(0,m.cn)(Ie({align:v}),o.buttonGroup),children:[(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[a?.isShowPlayVideoButton&&a?.playVideoButtonText?(0,e.jsxs)(l.Button,{onClick:()=>Q(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${s}#${n}#${a?.playVideoButtonText}`,children:[a?.playVideoButtonText," ",(0,e.jsx)(Re,{size:"lg"})]}):a?.text?(0,e.jsxs)(l.Button,{"aria-label":s??n,size:"lg",variant:"secondary",className:(0,m.cn)("hero-banner-secondary-button",o.secondaryButton),as:a?.isCustomSecondaryButton?"button":"a",href:(0,V.trackUrlRef)(z(a?.link),`${f}_${g}`),target:a?.target,rel:a?.target==="_blank"?a?.rel??"noopener noreferrer":a?.rel,onClick:r=>{if(a.link?.startsWith("#")){r.preventDefault();const d=document.querySelector(a.link);d&&(0,L.default)(d,S)}a?.isCustomSecondaryButton&&y?.(t,r,a?.customSecondaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${s}#${n}#${a?.text}`,children:[a?.text,(0,e.jsx)("span",{className:"sr-only",children:s??n})]}):null,u&&u.text&&(0,e.jsx)(l.Button,{"aria-label":s??n,size:"lg",variant:"primary",className:(0,m.cn)("hero-banner-primary-button",o.primaryButton),as:u?.isCustomPrimaryButton?"button":"a",href:(0,V.trackUrlRef)(z(u.link),`${f}_${g}`),target:u?.target,rel:u?.target==="_blank"?u?.rel??"noopener noreferrer":u?.rel,onClick:r=>{if(u.link?.startsWith("#")){r.preventDefault();const d=document.querySelector(u.link);d&&(0,L.default)(d,S)}u?.isCustomPrimaryButton&&b?.(t,r,u?.customPrimaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${s}#${n}#${u?.text}`,children:u.text})]}),c&&c.text&&(0,e.jsxs)(l.Button,{"aria-label":s??n,size:"lg",variant:"link",className:(0,m.cn)("hero-banner-tertiary-button w-auto p-0",o.tertiaryButton),as:c?.isCustomTertiaryButton?"button":"a",href:(0,V.trackUrlRef)(z(c.link),`${f}_${g}`),target:c?.target,rel:c?.target==="_blank"?c?.rel??"noopener noreferrer":c?.rel,onClick:r=>{if(c.link?.startsWith("#")){r.preventDefault();const d=document.querySelector(c.link);d&&(0,L.default)(d,S)}c?.isCustomTertiaryButton&&j?.(t,r,c?.customTertiaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${s}#${n}#${c?.text}`,children:[c.text,(0,e.jsx)("span",{className:"sr-only",children:s??n})]})]}),(0,e.jsx)("div",{className:Me({align:v}),children:ye?.map(r=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(l.Picture,{className:"!inline-block h-full !w-auto",imgClassName:"!w-auto h-full object-contain",loading:"eager",alt:r?.pcImage?.alt||"",source:r?.pcImage?.url})},r?.pcImage?.url||r?.pcImage?.alt))})]}),I.length>0&&(0,e.jsx)("div",{className:(0,m.cn)("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",o.captionGroup),children:I.map((r,d)=>(0,e.jsxs)(p.default.Fragment,{children:[(0,e.jsx)(l.Text,{size:2,className:(0,m.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:r.title}),d<I.length-1&&(0,e.jsx)("div",{className:(0,m.cn)("bg-info-primary w-px")})]},r.title))}),K&&(0,e.jsx)(ue.VideoModal,{visible:K,videoUrl:a?.isYoutubeVideo?void 0:a?.videoUrl?.url,youTubeId:a?.isYoutubeVideo?a?.youtubeId:void 0,onCloseModal:()=>Q(!1)})]})})});re.displayName="HeroBanner";var De=(0,ne.withLayout)(re);
|
|
1
|
+
"use strict";"use client";var ze=Object.create;var L=Object.defineProperty;var Ce=Object.getOwnPropertyDescriptor;var Le=Object.getOwnPropertyNames;var Ie=Object.getPrototypeOf,Pe=Object.prototype.hasOwnProperty;var Se=(t,s)=>{for(var o in s)L(t,o,{get:s[o],enumerable:!0})},re=(t,s,o,h)=>{if(s&&typeof s=="object"||typeof s=="function")for(let b of Le(s))!Pe.call(t,b)&&b!==o&&L(t,b,{get:()=>s[b],enumerable:!(h=Ce(s,b))||h.enumerable});return t};var B=(t,s,o)=>(o=t!=null?ze(Ie(t)):{},re(s||!t||!t.__esModule?L(o,"default",{value:t,enumerable:!0}):o,t)),Ee=t=>re(L({},"__esModule",{value:!0}),t);var Oe={};Se(Oe,{default:()=>Ae});module.exports=Ee(Oe);var e=require("react/jsx-runtime"),p=B(require("react")),N=B(require("gsap")),T=require("gsap/dist/ScrollTrigger"),I=B(require("jump.js")),_=require("react-responsive"),ne=require("react-intersection-observer"),le=B(require("../../helpers/ScrollLoadVideo.js")),l=require("../../components/index.js"),d=require("../../helpers/index.js"),V=require("class-variance-authority"),se=require("../../shared/Styles.js"),ie=require("../../hooks/useExposure.js"),H=require("../../shared/trackUrlRef.js"),pe=require("../../helpers/utils.js"),ue=require("../AiuiProvider/index.js"),ce=require("../../components/button.js"),me=require("../VideoModal/index.js"),de=B(require("./HeroBannerCarousel.js"));const f="image",g="hero_banner",Me=(0,V.cva)("hero-banner-content lg-desktop:gap-[32px] absolute top-24 z-10 flex w-full flex-col gap-[24px]",{variants:{align:{left:"tablet:px-[32px] laptop:top-1/2 laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] laptop:-translate-y-1/2 left-0 px-[16px]",center:"tablet:top-[84px] laptop:top-[76px] desktop:top-[176px] lg-desktop:top-[192px] left-1/2 top-[84px] -translate-x-1/2 translate-y-0 items-center text-center"}},defaultVariants:{align:"left"}}),Re=(0,V.cva)("hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",{variants:{align:{left:"laptop:text-left",center:"text-center"}},defaultVariants:{align:"left"}}),De=(0,V.cva)("hero-banner-button-group lg-desktop:gap-x-3 flex flex-wrap items-center gap-x-2 gap-y-3",{variants:{align:{left:"laptop:justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),je=(0,V.cva)("hero-banner-icon-group flex items-center gap-2",{variants:{align:{left:"justify-start",center:"justify-center"}},defaultVariants:{align:"left"}}),_e=({size:t="base"})=>{const{width:s,height:o}=ce.sizeMap[t];return(0,e.jsx)("svg",{width:s,height:o,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},oe=p.default.forwardRef(({data:t,className:s,classNames:o={},onSecondaryClick:h,onPrimaryClick:b,onTertiaryClick:A,jumpOptions:fe={},...O},U)=>{const{locale:q}=(0,ue.useAiuiContext)(),P={...{duration:500,offset:0},...fe},z=a=>!a||!q?a:(0,pe.getLocalizedPath)(a,q),{label:G,title:i,subtitle:n,endDate:J,endDate_tz:ge,dateFormat:be,pcImage:y,padImage:F,mobileImage:C,pcVideo:xe,padVideo:ye,mobileVideo:W,isShowVideo:he,isVideoLoop:ve=!0,primaryButton:u,secondaryButton:r,tertiaryButton:c,theme:ke="light",size:S="default",titleSize:E,caption:Y=[],blockLink:Q,iconArray:Z,align:v="left",enableParallax:K=!0}=t,M=Array.isArray(Y)?Y:[],we=Array.isArray(Z)?Z:void 0,$e=(0,_.useMediaQuery)({query:"(max-width: 768px)"}),Be=(0,_.useMediaQuery)({query:"(max-width: 1024px)"}),[X,ee]=(0,p.useState)(!1),{ref:Ne,inView:te}=(0,ne.useInView)(),R=(0,p.useRef)(null),D=(0,p.useRef)(null),j=(0,p.useRef)(null),k=(0,p.useRef)(null),x=(0,p.useRef)(null),Te=i?.trim()||n?.trim()||y?.alt?.trim()||void 0,Ve=i!==void 0?i?.trim()||n?.trim()||y?.alt?.trim()||void 0:n&&n.trim()||"",He=n&&n.trim()||"";return(0,ie.useExposure)(x,{componentType:f,componentName:g,componentTitle:Ve,componentDescription:He}),(0,p.useImperativeHandle)(U,()=>x.current),(0,p.useEffect)(()=>{if(t.items&&t.items.length>0||!K)return;N.default.registerPlugin(T.ScrollTrigger);function a(){if(!k.current)return;const m=x.current?.clientHeight||100;window.innerHeight<=m?R.current=T.ScrollTrigger.create({trigger:x.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:w=>{const $=w.progress*40-20;N.default.set(k.current,{yPercent:$})}}):(j.current=T.ScrollTrigger.create({trigger:x.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:w=>{const $=w.progress*20-20;N.default.set(k.current,{yPercent:$})}}),D.current=T.ScrollTrigger.create({trigger:x.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:w=>{const $=w.progress*20;N.default.set(k.current,{yPercent:$})}}))}return te&&a(),()=>{R.current&&R.current.kill(),j.current&&j.current.kill(),D.current&&D.current.kill()}},[te,t.items,K]),t.items&&t.items.length>0?(0,e.jsx)(de.default,{data:t,className:s,classNames:o,onPrimaryClick:b,onSecondaryClick:h,onTertiaryClick:A,ref:U,...O}):(0,e.jsx)("div",{...O,ref:Ne,"data-ui-component-id":"HeroBanner",children:(0,e.jsxs)("div",{ref:x,className:(0,d.cn)(ke==="dark"?"aiui-dark":"","text-info-primary relative w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] aspect-[390/660]":S==="default","lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]":S==="sm"},s),children:[Q&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,H.trackUrlRef)(z(Q),`${f}_${g}`),"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}`,tabIndex:-1,"aria-hidden":"true","aria-label":Te}),(0,e.jsx)("div",{ref:k,className:(0,d.cn)("absolute left-0 top-0 size-full"),children:he?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{"data-video-poster":"true",className:"laptop:w-full absolute inset-0 h-full transition-opacity duration-500",children:(0,e.jsx)(l.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:y?.alt||"",source:`${y?.url||""} , ${F?.url??(C?.url||"")} 1024, ${C?.url||""} 767`})}),(0,e.jsx)(le.default,{poster:void 0,src:$e?W?.url:Be?ye?.url||W?.url:xe?.url,className:"laptop:w-full absolute inset-0 h-full",videoClassName:"h-full object-cover",muted:!0,loop:ve,playsInline:!0,onPlaying:a=>{a.currentTarget.closest('[data-ui-component-id="HeroBanner"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")}})]}):(0,e.jsx)(l.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:y?.alt||"",source:`${y?.url||""} , ${F?.url??(C?.url||"")} 1024, ${C?.url||""} 767`})}),(0,e.jsxs)("div",{className:Me({align:v}),children:[(0,e.jsxs)("div",{className:Re({align:v}),children:[G&&(0,e.jsx)(l.Text,{size:2,as:"p",className:(0,d.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:G}),i&&(0,e.jsx)(l.Heading,{as:E==="4"?"h1":"h2",html:i,className:(0,d.cn)("hero-banner-title",o.title),size:E?Number(E||"5"):S==="sm"?4:5}),n&&(0,e.jsx)(l.Text,{as:"p",size:2,className:(0,d.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm",o.subtitle),html:n}),J&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(l.Countdown,{endDate:J,endDate_tz:ge,dateFormat:be,variant:"spacious",align:v})})]}),(0,e.jsxs)("div",{className:(0,d.cn)(De({align:v}),o.buttonGroup),children:[(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[r?.isShowPlayVideoButton&&r?.playVideoButtonText?(0,e.jsxs)(l.Button,{onClick:()=>ee(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${r?.playVideoButtonText}`,children:[r?.playVideoButtonText," ",(0,e.jsx)(_e,{size:"lg"})]}):r?.text?(0,e.jsxs)(l.Button,{"aria-label":i??n,size:"lg",variant:"secondary",className:(0,d.cn)("hero-banner-secondary-button",o.secondaryButton),as:r?.isCustomSecondaryButton?"button":"a",href:(0,H.trackUrlRef)(z(r?.link),`${f}_${g}`),target:r?.target,rel:r?.target==="_blank"?r?.rel??"noopener noreferrer":r?.rel,onClick:a=>{if(r.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(r.link);m&&(0,I.default)(m,P)}r?.isCustomSecondaryButton&&h?.(t,a,r?.customSecondaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${r?.text}`,children:[r?.text,(0,e.jsx)("span",{className:"sr-only",children:i??n})]}):null,u&&u.text&&(0,e.jsx)(l.Button,{"aria-label":i??n,size:"lg",variant:"primary",className:(0,d.cn)("hero-banner-primary-button",o.primaryButton),as:u?.isCustomPrimaryButton?"button":"a",href:(0,H.trackUrlRef)(z(u.link),`${f}_${g}`),target:u?.target,rel:u?.target==="_blank"?u?.rel??"noopener noreferrer":u?.rel,onClick:a=>{if(u.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(u.link);m&&(0,I.default)(m,P)}u?.isCustomPrimaryButton&&b?.(t,a,u?.customPrimaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${u?.text}`,children:u.text})]}),c&&c.text&&(0,e.jsxs)(l.Button,{"aria-label":i??n,size:"lg",variant:"link",className:(0,d.cn)("hero-banner-tertiary-button w-auto p-0",o.tertiaryButton),as:c?.isCustomTertiaryButton?"button":"a",href:(0,H.trackUrlRef)(z(c.link),`${f}_${g}`),target:c?.target,rel:c?.target==="_blank"?c?.rel??"noopener noreferrer":c?.rel,onClick:a=>{if(c.link?.startsWith("#")){a.preventDefault();const m=document.querySelector(c.link);m&&(0,I.default)(m,P)}c?.isCustomTertiaryButton&&A?.(t,a,c?.customTertiaryEventId)},"data-headless-type-name":`${f}#${g}`,"data-headless-title-desc-button":`${i}#${n}#${c?.text}`,children:[c.text,(0,e.jsx)("span",{className:"sr-only",children:i??n})]})]}),(0,e.jsx)("div",{className:je({align:v}),children:we?.map(a=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(l.Picture,{className:"!inline-block h-full !w-auto",imgClassName:"!w-auto h-full object-contain",loading:"eager",alt:a?.pcImage?.alt||"",source:a?.pcImage?.url})},a?.pcImage?.url||a?.pcImage?.alt))})]}),M.length>0&&(0,e.jsx)("div",{className:(0,d.cn)("hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",o.captionGroup),children:M.map((a,m)=>(0,e.jsxs)(p.default.Fragment,{children:[(0,e.jsx)(l.Text,{size:2,className:(0,d.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:a.title}),m<M.length-1&&(0,e.jsx)("div",{className:(0,d.cn)("bg-info-primary w-px")})]},a.title))}),X&&(0,e.jsx)(me.VideoModal,{visible:X,videoUrl:r?.isYoutubeVideo?void 0:r?.videoUrl?.url,youTubeId:r?.isYoutubeVideo?r?.youtubeId:void 0,onCloseModal:()=>ee(!1)})]})})});oe.displayName="HeroBanner";var Ae=(0,se.withLayout)(oe);
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { HeroBannerProps } from './types.js';
|
|
3
3
|
import 'swiper/css';
|
|
4
|
+
import 'swiper/css/navigation';
|
|
5
|
+
import 'swiper/css/pagination';
|
|
4
6
|
interface HeroBannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
7
|
data: HeroBannerProps['data'];
|
|
6
8
|
classNames?: Record<string, string>;
|
|
7
|
-
a11yLabels?: HeroBannerA11yLabels;
|
|
8
9
|
onPrimaryClick?: (data: any, e: any, id?: string) => void;
|
|
9
10
|
onSecondaryClick?: (data: any, e: any, id?: string) => void;
|
|
10
11
|
onTertiaryClick?: (data: any, e: any, id?: string) => void;
|
|
11
12
|
}
|
|
12
13
|
/**
|
|
13
|
-
* HeroBannerCarousel —
|
|
14
|
-
* 2-state machine (AUTOPLAYING / STOPPED; hover interactions removed 2026-09-23).
|
|
14
|
+
* HeroBannerCarousel — arrows-only Navigation Swiper wrapping HeroBannerSlide units.
|
|
15
15
|
*
|
|
16
|
-
*
|
|
17
|
-
* - DECISION-
|
|
18
|
-
* -
|
|
19
|
-
* -
|
|
20
|
-
* -
|
|
16
|
+
* Architecture:
|
|
17
|
+
* - DECISION-A007: Navigation only, loop=false, slidesPerView=1
|
|
18
|
+
* - DECISION-A003: ScrollLoadVideo videoRef as imperative pause channel
|
|
19
|
+
* - DECISION-A010: initial activeIndex=0; useEffect pauses slides 1..N on mount
|
|
20
|
+
* - DECISION-A006: arrow buttons at z-[20], above blockLink overlay z-10
|
|
21
|
+
* - ISSUE-017: post-mount pause wins over IO rootMargin='200px' race
|
|
21
22
|
*/
|
|
22
23
|
declare const HeroBannerCarousel: React.ForwardRefExoticComponent<HeroBannerCarouselProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
24
|
export default HeroBannerCarousel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var ve=Object.create;var F=Object.defineProperty;var xe=Object.getOwnPropertyDescriptor;var Se=Object.getOwnPropertyNames;var ke=Object.getPrototypeOf,we=Object.prototype.hasOwnProperty;var Te=(a,u)=>{for(var y in u)F(a,y,{get:u[y],enumerable:!0})},te=(a,u,y,w)=>{if(u&&typeof u=="object"||typeof u=="function")for(let b of Se(u))!we.call(a,b)&&b!==y&&F(a,b,{get:()=>u[b],enumerable:!(w=xe(u,b))||w.enumerable});return a};var re=(a,u,y)=>(y=a!=null?ve(ke(a)):{},te(u||!a||!a.__esModule?F(y,"default",{value:a,enumerable:!0}):y,a)),Ce=a=>te(F({},"__esModule",{value:!0}),a);var Pe={};Te(Pe,{default:()=>Be});module.exports=Ce(Pe);var t=require("react/jsx-runtime"),n=re(require("react")),O=require("swiper/react"),ne=require("swiper/modules"),oe=re(require("../../helpers/ScrollLoadVideo.js")),k=require("../../helpers/index.js"),_=require("./mediaResolver.js"),d=require("../../components/index.js"),ie=require("../../hooks/useCarouselPlayback.js"),U=require("../../shared/CarouselControls.js"),se=require("../../shared/track.js"),Ae=require("swiper/css");const _e=()=>(0,t.jsxs)("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",stroke:"currentColor","aria-hidden":"true",children:[(0,t.jsx)("path",{d:"M3 12a9 9 0 1 0 2.64-6.36L3 8",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),(0,t.jsx)("path",{d:"M3 3v5h5",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})]}),Le=({data:a,isActive:u,videoRef:y,slideIndex:w,containerSize:b="default",slideLabel:$,onPrimaryClick:q,onSecondaryClick:G,onTertiaryClick:T})=>{const{pcImage:s,isVideoLoop:z=!0,isShowVideo:R,title:g,subtitle:E,label:I,endDate:L,endDate_tz:A,dateFormat:M,iconArray:h,caption:N,blockLink:V,primaryButton:p,secondaryButton:l,tertiaryButton:c,align:B="left",titleSize:H}=a,v=(0,_.useMediaTier)(),j=(0,_.buildPictureSource)(a),f=(0,_.resolveTierMedia)(a,"lgDesktop","image")?.alt||s?.alt||"",x=(0,_.resolveTierMedia)(a,v,"video")?.url||"";return(0,t.jsxs)("div",{"data-ui-component-id":"HeroBannerSlide",role:"group","aria-roledescription":"slide","aria-label":$,className:(0,k.cn)("text-info-primary relative w-full overflow-hidden transition-colors duration-500",b==="default"?"laptop:h-[400px] desktop:h-[560px] lg-desktop:h-[800px] h-[560px]":"lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]"),children:[V&&(0,t.jsx)("a",{className:"absolute inset-0 z-10",href:V,tabIndex:-1,"aria-hidden":"true"}),R?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{"data-video-poster":"true",className:"absolute inset-0 size-full transition-opacity duration-500",children:(0,t.jsx)(d.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:w===0?"eager":"lazy",fetchPriority:w===0?"high":"auto",alt:f,source:j})}),(0,t.jsx)(oe.default,{videoRef:y,src:x,poster:void 0,className:"absolute inset-0 size-full",videoClassName:"size-full object-cover",muted:!0,loop:z,playsInline:!0,onPlaying:i=>{i.currentTarget.closest('[data-ui-component-id="HeroBannerSlide"]')?.querySelector('[data-video-poster="true"]')?.classList.add("opacity-0")}})]}):(0,t.jsx)(d.Picture,{className:"absolute inset-0 size-full",imgClassName:"size-full object-cover",loading:"eager",fetchPriority:"high",alt:f,source:j}),(0,t.jsxs)("div",{className:(0,k.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] transition-colors duration-500",B==="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,t.jsxs)("div",{className:(0,k.cn)("tablet:max-w-[704px] laptop:max-w-[440px] desktop:max-w-[648px] lg-desktop:max-w-[824px] max-w-[358px] transition-colors duration-500",B==="center"?"text-center":"laptop:text-left"),children:[I&&(0,t.jsx)(d.Text,{size:2,as:"p",className:(0,k.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:I}),g&&(0,t.jsx)(d.Heading,{as:H==="4"?"h1":"h2",html:g,size:H?Number(H||"5"):b==="sm"?4:5}),E&&(0,t.jsx)(d.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:E}),L&&(0,t.jsx)("div",{className:"mt-3",children:(0,t.jsx)(d.Countdown,{endDate:L,endDate_tz:A,dateFormat:M,variant:"spacious",align:B})})]}),(p?.text||l?.text||c?.text)&&(0,t.jsxs)("div",{className:(0,k.cn)("lg-desktop:gap-3 flex flex-wrap items-center gap-2",B==="center"?"justify-center":"laptop:justify-start"),children:[l?.text&&(0,t.jsx)(d.Button,{size:"lg",variant:"secondary",as:l?.isCustomSecondaryButton?"button":"a",href:l.link,target:l?.target,rel:l?.target==="_blank"?l?.rel??"noopener noreferrer":l?.rel,onClick:i=>l?.isCustomSecondaryButton&&G?.(a,i,l?.customSecondaryEventId),children:l.text}),p?.text&&(0,t.jsx)(d.Button,{size:"lg",variant:"primary",as:p?.isCustomPrimaryButton?"button":"a",href:p.link,target:p?.target,rel:p?.target==="_blank"?p?.rel??"noopener noreferrer":p?.rel,onClick:i=>p?.isCustomPrimaryButton&&q?.(a,i,p?.customPrimaryEventId),children:p.text}),c?.text&&(0,t.jsx)(d.Button,{size:"lg",variant:"link",className:"tablet:basis-auto basis-full",as:c?.isCustomTertiaryButton?"button":"a",href:c.link,target:c?.target,rel:c?.target==="_blank"?c?.rel??"noopener noreferrer":c?.rel,onClick:i=>c?.isCustomTertiaryButton&&T?.(a,i,c?.customTertiaryEventId),children:c.text})]}),h&&h.length>0&&(0,t.jsx)("div",{className:(0,k.cn)("flex items-center gap-2",B==="center"?"justify-center":"justify-start"),children:h.map(i=>(0,t.jsx)("div",{className:"h-12",children:(0,t.jsx)(d.Picture,{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))})]}),N&&N.length>0&&(0,t.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:N.map((i,D)=>(0,t.jsxs)(n.default.Fragment,{children:[(0,t.jsx)(d.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:i.title}),D<N.length-1&&(0,t.jsx)("div",{className:"bg-info-primary w-px"})]},i.title))})]})},Ne={prevSlide:"Previous slide",nextSlide:"Next slide",pauseAutoplay:"Pause autoplay",playAutoplay:"Play autoplay",replayVideo:"Replay video",slideStatus:"Slide",carouselLabel:"Banner carousel"},ae=n.default.forwardRef(({data:a,className:u,classNames:y={},a11yLabels:w,onPrimaryClick:b,onSecondaryClick:$,onTertiaryClick:q,...G},T)=>{const s=a.items||[],z=a.carousel,R=a.size??"default",g={...Ne,...w},E=(0,n.useRef)(null),[I,L]=(0,n.useState)(!1),[A,M]=(0,n.useState)(null),h=(0,n.useRef)(s);(0,n.useEffect)(()=>{h.current=s});const N=e=>e!==void 0&&e!==999&&e>=5,V=e=>e!==void 0&&e!==999&&e>=1&&e<=30,p=z?.autoplaySeconds,l=e=>{const r=e?.autoplaySeconds;return V(r)?r:N(p)?p:void 0},c=s.length>1&&s.some(e=>l(e)!==void 0),H=(l(s[0])??5)*1e3,v=(0,n.useRef)(s.map(()=>n.default.createRef())),j=(z?.showArrows??!0)&&s.length>1,f=(0,n.useCallback)((e,r)=>{(0,se.gaTrack)({event:"ga4Event",event_name:e,event_parameters:r})},[]),x=(0,n.useCallback)(e=>h.current[e]?.isShowVideo?"video":"image",[]),i=(0,n.useCallback)((e,r)=>{r==="swipe"&&f("hero_banner_swipe_stop",{to_index:e}),f("hero_banner_slide_view",{index:e,total:h.current.length,media_type:x(e),trigger:r})},[f,x]),D=(0,n.useCallback)((e,r,o)=>{f("hero_banner_arrow_click",{direction:e,from_index:r,to_index:o})},[f]),le=(0,n.useCallback)((e,r)=>{f(e?"hero_banner_pause":"hero_banner_resume",{index:r,media_type:x(r)})},[f,x]),ce=(0,n.useCallback)(e=>{v.current.forEach((o,S)=>{S!==e&&o.current&&(o.current.pause(),o.current.currentTime=0)});const r=v.current[e];r?.current&&r.current.paused&&r.current.play()?.catch(()=>{})},[]),{rootRef:Y,activeIndex:m,playbackState:W,resetNonce:de,announcement:ue,activeFrameIntervalSec:pe,handleSlideChange:me,handleSliderFirstMove:fe,goToSlide:J,handlePausePlayClick:ye}=(0,ie.useCarouselPlayback)({frameCount:s.length,resolveFrameIntervalSec:e=>l(s[e]),isAutoplayEnabled:c,swiperRef:E,slideStatusLabel:g.slideStatus,onSlideMediaSync:ce,onSlideChange:i,onArrowNavigate:D,onPauseToggle:(e,r)=>{le(e,r);const o=v.current[r]?.current;o&&(e?o.pause():o.play()?.catch(()=>{}))}}),ge=(0,n.useCallback)(e=>{Y.current=e,typeof T=="function"?T(e):T&&(T.current=e)},[T,Y]);(0,n.useEffect)(()=>{L(!1);const e=h.current[m],r=v.current[m]?.current;if(!e?.isShowVideo||!r||(e.isVideoLoop??!0))return;const o=()=>{W!=="AUTOPLAYING"&&L(!0)};return r.ended&&o(),r.addEventListener("ended",o),()=>r.removeEventListener("ended",o)},[W,m]),(0,n.useEffect)(()=>{const e=h.current[m];if(!e?.isShowVideo||!e?.isMultiThemeEnabled)return;const r=v.current[m]?.current;if(!r)return;const o=(P,C,Z)=>{if(!P||typeof C!="number"||typeof Z!="number")return;const ee=r.currentTime;return ee>=C&&ee<Z?P:void 0};let S=null;const be=P=>{S=P,M(C=>C&&C.index===m&&C.theme===P?C:{index:m,theme:P})},Q=()=>{be(o(e.theme_1,e.star_time_1,e.end_time_1)??o(e.theme_2,e.star_time_2,e.end_time_2)??e.theme??"light")},X=()=>{S&&M({index:m,theme:S})};return r.addEventListener("timeupdate",Q),r.addEventListener("ended",X),()=>{r.removeEventListener("timeupdate",Q),r.removeEventListener("ended",X)}},[m]),(0,n.useEffect)(()=>{v.current.forEach((e,r)=>{r!==0&&e.current&&(e.current.pause(),e.current.currentTime=0)})},[]),(0,n.useEffect)(()=>{h.current.length!==0&&f("hero_banner_slide_view",{index:0,total:h.current.length,media_type:x(0),trigger:"initial"})},[f,x]);const he=()=>{const e=v.current[m]?.current;if(!e)return;f("hero_banner_replay_click",{index:m}),L(!1),e.currentTime=0,e.play()?.catch(()=>{})},K=A&&A.index===m?A.theme:s[m]?.theme;return(0,t.jsxs)("div",{ref:ge,role:"region","aria-roledescription":"carousel","aria-label":g.carouselLabel,className:(0,k.cn)("hero-banner-carousel group relative w-full overflow-hidden transition-colors duration-500",R==="default"?"laptop:h-[400px] desktop:h-[560px] lg-desktop:h-[800px] h-[560px]":"lg-desktop:aspect-[1920/800] desktop:aspect-[1440/640] laptop:aspect-[1024/480] tablet:aspect-[768/560] aspect-[390/560]",{"aiui-dark":K==="dark"},y.root,u),...G,children:[(0,t.jsx)(O.Swiper,{onSwiper:e=>E.current=e,onSlideChange:me,onSliderFirstMove:fe,modules:c?[ne.Autoplay]:[],slidesPerView:1,loop:!0,initialSlide:0,allowTouchMove:!0,autoplay:c?{delay:H,disableOnInteraction:!1}:!1,children:s.map((e,r)=>{const o=l(e);return(0,t.jsx)(O.SwiperSlide,{"data-swiper-autoplay":o!==void 0?o*1e3:void 0,children:({isActive:S})=>(0,t.jsx)(Le,{data:e,isActive:S,slideIndex:r,slideLabel:`${g.slideStatus} ${r+1} / ${s.length}`,videoRef:v.current[r],containerSize:R,onPrimaryClick:b,onSecondaryClick:$,onTertiaryClick:q})},r)})}),j&&(0,t.jsx)(U.CarouselArrows,{onPrev:()=>J("prev"),onNext:()=>J("next"),prevLabel:g.prevSlide,nextLabel:g.nextSlide}),s.length>1&&(0,t.jsx)(U.CarouselProgressControls,{frameCount:s.length,activeIndex:m,resetNonce:de,activeFrameIntervalSec:pe,isAutoplayEnabled:c,playbackState:W,onPausePlayClick:ye,pauseAutoplayLabel:g.pauseAutoplay,playAutoplayLabel:g.playAutoplay,classPrefix:"hero-banner",theme:K}),I&&(0,t.jsx)("div",{className:"pointer-events-none absolute inset-0 z-20 flex items-center justify-center",children:(0,t.jsx)("button",{type:"button",className:"hero-banner-replay pointer-events-auto flex size-14 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-colors duration-200 hover:bg-white/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 active:bg-white/40","aria-label":g.replayVideo,onClick:he,children:(0,t.jsx)(_e,{})})}),(0,t.jsx)("div",{"aria-live":"polite","aria-atomic":"true",className:"sr-only",children:ue})]})});ae.displayName="HeroBannerCarousel";var Be=ae;
|
|
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;
|
|
@@ -1,5 +1,2 @@
|
|
|
1
1
|
export { default } from './HeroBanner.js';
|
|
2
2
|
export type { JumpOptions } from './HeroBanner.js';
|
|
3
|
-
export type { HeroBannerProps, HeroBannerSlideData, HeroBannerCarouselConfig, HeroBannerA11yLabels, HeroBannerMediaTier, HeroBannerTieredMedia, HeroBannerTieredMediaFields, HeroBannerMultiThemeFields, } from './types.js';
|
|
4
|
-
export { resolveTierMedia, buildPictureSource } from './mediaResolver.js';
|
|
5
|
-
export type { MediaTier, MediaKind, TieredMediaFields, TieredMediaSources } from './mediaResolver.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var a=Object.create;var t=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty;var i=(e,o)=>{for(var r in o)t(e,r,{get:o[r],enumerable:!0})},m=(e,o,r,f)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of u(o))!d.call(e,p)&&p!==r&&t(e,p,{get:()=>o[p],enumerable:!(f=s(o,p))||f.enumerable});return e};var j=(e,o,r)=>(r=e!=null?a(x(e)):{},m(o||!e||!e.__esModule?t(r,"default",{value:e,enumerable:!0}):r,e)),l=e=>m(t({},"__esModule",{value:!0}),e);var y={};i(y,{default:()=>n.default});module.exports=l(y);var n=j(require("./HeroBanner.js"));
|
|
@@ -1,68 +1,9 @@
|
|
|
1
1
|
import type { ButtonProps } from '../../components/button.js';
|
|
2
2
|
import type { Media, Theme } from '../../types/props.js';
|
|
3
3
|
type TitleSizeType = '5' | '4' | '3' | '2' | '1';
|
|
4
|
-
/** 5-breakpoint media tier keys (Tailwind preset boundaries). */
|
|
5
|
-
export type HeroBannerMediaTier = 'lgDesktop' | 'desktop' | 'laptop' | 'tablet' | 'mobile';
|
|
6
4
|
/**
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*/
|
|
10
|
-
export interface HeroBannerTieredMedia {
|
|
11
|
-
sources: Partial<Record<HeroBannerMediaTier, {
|
|
12
|
-
image?: Media;
|
|
13
|
-
video?: Media;
|
|
14
|
-
}>>;
|
|
15
|
-
}
|
|
16
|
-
/** New-tier flat fields + structured media, shared by banner data and slides. */
|
|
17
|
-
export interface HeroBannerTieredMediaFields {
|
|
18
|
-
/** ≥1920 image (CMS flat field) */
|
|
19
|
-
lgDesktopImage?: Media;
|
|
20
|
-
/** 1440-1919 image (CMS flat field) */
|
|
21
|
-
desktopImage?: Media;
|
|
22
|
-
/** ≥1920 video (CMS flat field) */
|
|
23
|
-
lgDesktopVideo?: Media;
|
|
24
|
-
/** 1440-1919 video (CMS flat field) */
|
|
25
|
-
desktopVideo?: Media;
|
|
26
|
-
/** Structured 5-tier media — takes precedence over the flat fields */
|
|
27
|
-
media?: HeroBannerTieredMedia;
|
|
28
|
-
}
|
|
29
|
-
/** Video multi-theme window (D19): times are seconds relative to the video playhead. */
|
|
30
|
-
export interface HeroBannerMultiThemeFields {
|
|
31
|
-
/** Enable playhead-driven theme switching for this video frame @default false */
|
|
32
|
-
isMultiThemeEnabled?: boolean;
|
|
33
|
-
theme_1?: 'light' | 'dark';
|
|
34
|
-
/** Window 1 start (seconds, inclusive) */
|
|
35
|
-
star_time_1?: number;
|
|
36
|
-
/** Window 1 end (seconds, exclusive) */
|
|
37
|
-
end_time_1?: number;
|
|
38
|
-
theme_2?: 'light' | 'dark';
|
|
39
|
-
/** Window 2 start (seconds, inclusive) */
|
|
40
|
-
star_time_2?: number;
|
|
41
|
-
/** Window 2 end (seconds, exclusive) */
|
|
42
|
-
end_time_2?: number;
|
|
43
|
-
}
|
|
44
|
-
/**
|
|
45
|
-
* Accessibility label overrides for HeroBanner carousel controls.
|
|
46
|
-
* All labels default to English; override per-locale as needed.
|
|
47
|
-
*/
|
|
48
|
-
export interface HeroBannerA11yLabels {
|
|
49
|
-
/** Accessible name for the previous-slide arrow @default 'Previous slide' */
|
|
50
|
-
prevSlide?: string;
|
|
51
|
-
/** Accessible name for the next-slide arrow @default 'Next slide' */
|
|
52
|
-
nextSlide?: string;
|
|
53
|
-
/** Accessible name for the pause button while autoplaying @default 'Pause autoplay' */
|
|
54
|
-
pauseAutoplay?: string;
|
|
55
|
-
/** Accessible name for the play button while stopped @default 'Play autoplay' */
|
|
56
|
-
playAutoplay?: string;
|
|
57
|
-
/** Accessible name for the centered video replay button @default 'Replay video' */
|
|
58
|
-
replayVideo?: string;
|
|
59
|
-
/** Slide status noun, used as `{slideStatus} {n} / {total}` @default 'Slide' */
|
|
60
|
-
slideStatus?: string;
|
|
61
|
-
/** Accessible name for the carousel region @default 'Banner carousel' */
|
|
62
|
-
carouselLabel?: string;
|
|
63
|
-
}
|
|
64
|
-
/**
|
|
65
|
-
* Carousel navigation configuration for HeroBanner.
|
|
5
|
+
* Carousel navigation configuration for HeroBanner. v1: arrows only.
|
|
6
|
+
* autoplay, dots, and progress are intentionally EXCLUDED from v1.
|
|
66
7
|
*/
|
|
67
8
|
export interface HeroBannerCarouselConfig {
|
|
68
9
|
/**
|
|
@@ -71,27 +12,15 @@ export interface HeroBannerCarouselConfig {
|
|
|
71
12
|
* @default true
|
|
72
13
|
*/
|
|
73
14
|
showArrows?: boolean;
|
|
74
|
-
/**
|
|
75
|
-
* @deprecated The legacy Swiper bullet dots are replaced by the fixed
|
|
76
|
-
* segmented progress + pause/play control cluster. This field is kept for
|
|
77
|
-
* type compatibility only and no longer affects rendering.
|
|
78
|
-
*/
|
|
79
15
|
showDots?: boolean;
|
|
80
|
-
/**
|
|
81
|
-
* @deprecated Loop is always enabled; this field is ignored.
|
|
82
|
-
*/
|
|
83
16
|
loop?: boolean;
|
|
84
|
-
/**
|
|
85
|
-
* 全局默认自动轮播间隔(秒)。`999` / 缺省 / `<5` = 不自动轮播(静态展示首帧)。
|
|
86
|
-
* 可被单帧 `items[i].autoplaySeconds`(1-30 秒)覆盖。
|
|
87
|
-
*/
|
|
88
17
|
autoplaySeconds?: number;
|
|
89
18
|
}
|
|
90
19
|
/**
|
|
91
20
|
* Per-slide data for HeroBanner carousel mode.
|
|
92
21
|
* Mirrors the single-banner data shape; no nested carousels allowed in v1.
|
|
93
22
|
*/
|
|
94
|
-
export interface HeroBannerSlideData
|
|
23
|
+
export interface HeroBannerSlideData {
|
|
95
24
|
title: string;
|
|
96
25
|
subtitle: string;
|
|
97
26
|
pcImage: Media;
|
|
@@ -133,11 +62,6 @@ export interface HeroBannerSlideData extends HeroBannerTieredMediaFields, HeroBa
|
|
|
133
62
|
customTertiaryEventId?: string;
|
|
134
63
|
} & Omit<ButtonProps, 'children'>;
|
|
135
64
|
theme?: Theme;
|
|
136
|
-
/**
|
|
137
|
-
* 单帧轮播间隔(秒),覆盖全局默认间隔。可选范围 1-30 秒,不允许 999;
|
|
138
|
-
* 缺省/无效值时回退全局 `carousel.autoplaySeconds`。
|
|
139
|
-
*/
|
|
140
|
-
autoplaySeconds?: number;
|
|
141
65
|
size?: 'default' | 'sm';
|
|
142
66
|
titleSize?: TitleSizeType;
|
|
143
67
|
align?: 'left' | 'center';
|
|
@@ -166,16 +90,6 @@ export interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
|
|
|
166
90
|
pcVideo?: Media;
|
|
167
91
|
padVideo?: Media;
|
|
168
92
|
mobileVideo?: Media;
|
|
169
|
-
/** ≥1920 image (CMS flat field) */
|
|
170
|
-
lgDesktopImage?: Media;
|
|
171
|
-
/** 1440-1919 image (CMS flat field) */
|
|
172
|
-
desktopImage?: Media;
|
|
173
|
-
/** ≥1920 video (CMS flat field) */
|
|
174
|
-
lgDesktopVideo?: Media;
|
|
175
|
-
/** 1440-1919 video (CMS flat field) */
|
|
176
|
-
desktopVideo?: Media;
|
|
177
|
-
/** Structured 5-tier media — takes precedence over the flat fields */
|
|
178
|
-
media?: HeroBannerTieredMedia;
|
|
179
93
|
isShowVideo?: boolean;
|
|
180
94
|
/** 视频是否循环播放 */
|
|
181
95
|
isVideoLoop?: boolean;
|
|
@@ -213,11 +127,7 @@ export interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
|
|
|
213
127
|
} & Omit<ButtonProps, 'children'>;
|
|
214
128
|
/** 主题 */
|
|
215
129
|
theme?: Theme;
|
|
216
|
-
/**
|
|
217
|
-
* 大小, 默认default,单banner。default 使用 5 档固定高度表(560/560/400/560/800)。
|
|
218
|
-
* `sm`(多 banner 场景的旧等比高度)保留可用。
|
|
219
|
-
* @deprecated 变体 `sm` 已废弃,仅存量兼容保留;新页面请使用 `default`。
|
|
220
|
-
*/
|
|
130
|
+
/** 大小, 默认default,单banner, 可选sm, 用于多banner场景 */
|
|
221
131
|
size?: 'default' | 'sm';
|
|
222
132
|
titleSize?: TitleSizeType;
|
|
223
133
|
/** 内容对齐方式 */
|
|
@@ -243,13 +153,8 @@ export interface HeroBannerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
|
|
|
243
153
|
*/
|
|
244
154
|
enableParallax?: boolean;
|
|
245
155
|
};
|
|
246
|
-
onSecondaryClick?: (data: any, e: any,
|
|
247
|
-
onPrimaryClick?: (data: any, e: any,
|
|
156
|
+
onSecondaryClick?: (data: any, e: any, customPrimaryEventId?: string) => void;
|
|
157
|
+
onPrimaryClick?: (data: any, e: any, customSecondaryEventId?: string) => void;
|
|
248
158
|
onTertiaryClick?: (data: any, e: any, customTertiaryEventId?: string) => void;
|
|
249
|
-
/**
|
|
250
|
-
* Accessibility label overrides for carousel controls (arrows, pause/play,
|
|
251
|
-
* replay, live announcements). Defaults are English.
|
|
252
|
-
*/
|
|
253
|
-
a11yLabels?: HeroBannerA11yLabels;
|
|
254
159
|
}
|
|
255
160
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var s=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var d=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of s(t))!l.call(e,o)&&o!==r&&n(e,o,{get:()=>t[o],enumerable:!(i=a(t,o))||i.enumerable});return e};var m=e=>d(n({},"__esModule",{value:!0}),e);var u={};module.exports=m(u);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";"use client";var fe=Object.create;var S=Object.defineProperty;var he=Object.getOwnPropertyDescriptor;var ge=Object.getOwnPropertyNames;var ve=Object.getPrototypeOf,be=Object.prototype.hasOwnProperty;var we=(n,c)=>{for(var g in c)S(n,g,{get:c[g],enumerable:!0})},U=(n,c,g,b)=>{if(c&&typeof c=="object"||typeof c=="function")for(let v of ge(c))!be.call(n,v)&&v!==g&&S(n,v,{get:()=>c[v],enumerable:!(b=he(c,v))||b.enumerable});return n};var _e=(n,c,g)=>(g=n!=null?fe(ve(n)):{},U(c||!n||!n.__esModule?S(g,"default",{value:n,enumerable:!0}):g,n)),ye=n=>U(S({},"__esModule",{value:!0}),n);var Ie={};we(Ie,{default:()=>Te});module.exports=ye(Ie);var e=require("react/jsx-runtime"),i=_e(require("react")),r=require("../../components/index.js"),o=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),ae=require("../AiuiProvider/index.js"),k=require("framer-motion");const ke="image",Ne="image_with_text",X=(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,e.jsx)("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),Y=i.default.forwardRef(({data:n,className:c},g)=>{const{title:b,subtitle:v,desc:_,descIcon:M,image:N,padImage:z,mobileImage:E,theme:oe="dark",items:H=[],layout:le="left",mediaType:se="image",datalist:d=[],video:j,padVideo:R,mobVideo:W,button:w,textAlign:m="left",titleTag:re}=n,l=le,{locale:C="us"}=(0,ae.useAiuiContext)(),D=(0,i.useRef)(null),I=(0,i.useRef)(null),L=(0,i.useRef)(null),P=(0,i.useRef)(null),A=(0,i.useRef)(null),[u,ne]=(0,i.useState)(0),q=(0,i.useRef)([]),[$,me]=(0,i.useState)({left:0,width:0}),[y,B]=(0,i.useState)(""),[F,O]=(0,i.useState)(""),[Z,G]=(0,i.useState)(""),p=d.length>0,T=se==="video";(0,te.useExposure)(D,{componentType:ke,componentName:Ne,componentTitle:b,componentDescription:v}),(0,i.useImperativeHandle)(g,()=>D.current),(0,i.useEffect)(()=>{if(d.length>0){const t=q.current[u];if(t){const{offsetLeft:s,offsetWidth:a}=t;me({left:s,width:a})}}},[u,d.length]);const[J,de]=(0,i.useState)(!1);(0,ie.useIntersectionObserverDelay)(A,{once:!0,threshold:.01,callback:()=>{de(!0)}}),(0,i.useEffect)(()=>{if(!J||!T)return;let t="",s="",a="";if(p&&d[u]){const f=d[u];t=f.video?.url||"",s=f.padVideo?.url||t,a=f.mobVideo?.url||t}else t=j?.url||"",s=R?.url||t,a=W?.url||t;t&&B(t),s&&O(s),a&&G(a),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},200)},[J,T,p,u,d,j?.url,R?.url,W?.url]);const ce=(t,s)=>{if(ne(t),s.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),T&&p&&d[t]){const a=d[t];a.video?.url&&B(a.video.url),a.padVideo?.url&&O(a.padVideo.url),a.mobVideo?.url&&G(a.mobVideo.url),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},300)}},pe=()=>!V||!w?.text||l==="bottom"?null:(0,e.jsx)("div",{className:(0,o.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":m==="center","flex justify-start":m==="left"}),children:(0,e.jsx)(r.Link,{href:(0,o.getLocalizedPath)(w.link||"",C),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:X,children:w.text})}),x=H.length>0,V=!!w,K=()=>{if(p&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return N?`${N?.url},${z?.url||N?.url} 1024, ${E?.url||N?.url} 768`:""},Q=()=>{if(p){const f=d[u],h=f.image?.url,xe=f.imgPad?.url||h,ue=f.imageMob?.url||h;return(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h,src:y,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:xe,src:F||y,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ue,src:Z||y,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=N?.url,s=z?.url||t,a=E?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:y,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:s,src:F||y,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:Z||y,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:D,"data-ui-component-id":"ImageWithText",className:(0,o.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!p,"flex-col":!p&&l==="bottom","items-center":l==="left"||l==="right","flex-col laptop:flex-row":!p&&(l==="left"||l==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":p,"aiui-dark":oe==="dark"},c),children:[p&&(b||_||d.length>0)&&(0,e.jsxs)("div",{className:(0,o.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":m==="left","text-center":m==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(r.Heading,{as:"h3",size:4,html:b,className:"image-with-text__title"}),(0,e.jsx)(r.Text,{as:"p",size:1,html:_,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,o.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":m==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:$.left,width:$.width}}),d.map((t,s)=>(0,e.jsx)("div",{ref:a=>{q.current[s]=a},onClick:a=>ce(s,a),className:(0,o.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===s?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(r.Heading,{as:re??"h3",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},s))]})})]}),!p&&(b||v||_)&&(0,e.jsxs)("div",{className:(0,o.cn)("image-with-text__content flex w-full flex-col",{"justify-center":!V,"justify-between":V,"items-start":m==="left"&&x,"items-center":m==="center"&&x,"text-left":m==="left","text-center":m==="center","laptop:order-1":l==="left"}),children:[(0,e.jsxs)("div",{className:(0,o.cn)("image-with-text__main-content",{"flex flex-col":V}),children:[(0,e.jsxs)("div",{className:(0,o.cn)("image-with-text__header",{"laptop:flex laptop:items-end laptop:justify-between laptop:gap-16":l==="bottom"&&w?.text}),children:[(0,e.jsxs)("div",{className:"image-with-text__title-wrapper flex min-w-0 flex-1 flex-col",children:[(0,e.jsx)(r.Heading,{as:"h2",size:4,html:b,className:(0,o.cn)("image-with-text__title",{"text-left":x&&m==="left","text-center":x&&m==="center"})}),v&&(0,e.jsx)(r.Text,{as:"p",size:x?4:3,html:v,className:(0,o.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!x,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":x,"text-left":x&&m==="left","text-center":x&&m==="center"})})]}),l==="bottom"&&w?.text&&(0,e.jsx)(r.Link,{href:(0,o.getLocalizedPath)(w.link||"",C),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:X,children:w.text})]}),!x&&(_||M)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[M&&(0,e.jsx)("img",{src:M,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),_&&(0,e.jsx)(r.Heading,{as:"h4",size:5,html:_,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),x&&(0,e.jsx)("div",{className:(0,o.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":l==="bottom","grid-cols-2 tablet:grid-cols-4":l==="bottom","grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2":l==="left"||l==="right"}),children:H.map((t,s)=>(0,e.jsxs)("div",{className:(0,o.cn)("image-with-text__item",{"text-center":m==="center"}),children:[(0,e.jsxs)("div",{className:(0,o.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":m==="center","justify-start":m==="left"}),children:[t.icon?.url&&(0,e.jsx)(r.Picture,{source:t.icon.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(r.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(r.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},s))})]}),pe()]}),(0,e.jsx)("div",{ref:A,className:(0,o.cn)("image-with-text__media-wrapper",{"laptop:w-[60%] w-full shrink-0":l==="left"||l==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":x&&l!=="bottom","laptop:basis-[63%] desktop:basis-[57%]":x&&l==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":p,"!max-w-none !max-h-none aspect-auto":l==="bottom"}),children:p?T?Q():(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(r.Picture,{source:K(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):T?Q():(0,e.jsx)(r.Picture,{source:K(),className:(0,o.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});Y.displayName="ImageWithText";var Te=(0,ee.withLayout)(Y);
|
|
1
|
+
"use strict";"use client";var fe=Object.create;var S=Object.defineProperty;var he=Object.getOwnPropertyDescriptor;var ge=Object.getOwnPropertyNames;var ve=Object.getPrototypeOf,be=Object.prototype.hasOwnProperty;var we=(n,p)=>{for(var g in p)S(n,g,{get:p[g],enumerable:!0})},U=(n,p,g,b)=>{if(p&&typeof p=="object"||typeof p=="function")for(let v of ge(p))!be.call(n,v)&&v!==g&&S(n,v,{get:()=>p[v],enumerable:!(b=he(p,v))||b.enumerable});return n};var _e=(n,p,g)=>(g=n!=null?fe(ve(n)):{},U(p||!n||!n.__esModule?S(g,"default",{value:n,enumerable:!0}):g,n)),ye=n=>U(S({},"__esModule",{value:!0}),n);var Ie={};we(Ie,{default:()=>Te});module.exports=ye(Ie);var e=require("react/jsx-runtime"),a=_e(require("react")),r=require("../../components/index.js"),l=require("../../helpers/utils.js"),ee=require("../../shared/Styles.js"),te=require("../../hooks/useExposure.js"),ie=require("../../hooks/useIntersectionObserver.js"),ae=require("../AiuiProvider/index.js"),k=require("framer-motion");const ke="image",Ne="image_with_text",X=(0,e.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:(0,e.jsx)("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),Y=a.default.forwardRef(({data:n,className:p},g)=>{const{title:b,subtitle:v,desc:_,descIcon:M,image:N,padImage:z,mobileImage:E,theme:oe="dark",items:H=[],layout:le="left",mediaType:se="image",datalist:d=[],video:j,padVideo:R,mobVideo:W,button:w,textAlign:m="left",titleTag:re}=n,i=le,{locale:C="us"}=(0,ae.useAiuiContext)(),D=(0,a.useRef)(null),I=(0,a.useRef)(null),L=(0,a.useRef)(null),P=(0,a.useRef)(null),A=(0,a.useRef)(null),[u,ne]=(0,a.useState)(0),q=(0,a.useRef)([]),[$,me]=(0,a.useState)({left:0,width:0}),[y,B]=(0,a.useState)(""),[F,O]=(0,a.useState)(""),[Z,G]=(0,a.useState)(""),c=d.length>0,T=se==="video";(0,te.useExposure)(D,{componentType:ke,componentName:Ne,componentTitle:b,componentDescription:v}),(0,a.useImperativeHandle)(g,()=>D.current),(0,a.useEffect)(()=>{if(d.length>0){const t=q.current[u];if(t){const{offsetLeft:s,offsetWidth:o}=t;me({left:s,width:o})}}},[u,d.length]);const[J,de]=(0,a.useState)(!1);(0,ie.useIntersectionObserverDelay)(A,{once:!0,threshold:.01,callback:()=>{de(!0)}}),(0,a.useEffect)(()=>{if(!J||!T)return;let t="",s="",o="";if(c&&d[u]){const f=d[u];t=f.video?.url||"",s=f.padVideo?.url||t,o=f.mobVideo?.url||t}else t=j?.url||"",s=R?.url||t,o=W?.url||t;t&&B(t),s&&O(s),o&&G(o),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},200)},[J,T,c,u,d,j?.url,R?.url,W?.url]);const pe=(t,s)=>{if(ne(t),s.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),T&&c&&d[t]){const o=d[t];o.video?.url&&B(o.video.url),o.padVideo?.url&&O(o.padVideo.url),o.mobVideo?.url&&G(o.mobVideo.url),setTimeout(()=>{[I.current?.querySelector("video"),L.current?.querySelector("video"),P.current?.querySelector("video")].forEach(h=>{h&&(h.load(),h.play().catch(()=>{}))})},300)}},ce=()=>!V||!w?.text||i==="top"||i==="bottom"?null:(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":m==="center","flex justify-start":m==="left"}),children:(0,e.jsx)(r.Link,{href:(0,l.getLocalizedPath)(w.link||"",C),className:"image-with-text__button whitespace-nowrap no-underline",suffixIcon:X,children:w.text})}),x=H.length>0,V=!!w,K=()=>{if(c&&d[u]){const t=d[u];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return N?`${N?.url},${z?.url||N?.url} 1024, ${E?.url||N?.url} 768`:""},Q=()=>{if(c){const f=d[u],h=f.image?.url,xe=f.imgPad?.url||h,ue=f.imageMob?.url||h;return(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:h,src:y,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:xe,src:F||y,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:ue,src:Z||y,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},f.video?.url||f.image?.url)})}const t=N?.url,s=z?.url||t,o=E?.url||t;return(0,e.jsxs)("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[(0,e.jsx)("div",{ref:I,className:"image-with-text__desktop-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:y,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),(0,e.jsx)("div",{ref:L,className:"image-with-text__tablet-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:s,src:F||y,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),(0,e.jsx)("div",{ref:P,className:"image-with-text__mobile-video-container",children:(0,e.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:Z||y,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return(0,e.jsxs)("section",{ref:D,"data-ui-component-id":"ImageWithText",className:(0,l.cn)("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!c,"flex-col":!c&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!c&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":c,"aiui-dark":oe==="dark"},p),children:[c&&(b||_||d.length>0)&&(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":m==="left","text-center":m==="center"}),children:[(0,e.jsxs)("div",{className:"image-with-text__header",children:[(0,e.jsx)(r.Heading,{as:"h3",size:4,html:b,className:"image-with-text__title"}),(0,e.jsx)(r.Text,{as:"p",size:1,html:_,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":m==="center"}),children:(0,e.jsxs)("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[(0,e.jsx)("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:$.left,width:$.width}}),d.map((t,s)=>(0,e.jsx)("div",{ref:o=>{q.current[s]=o},onClick:o=>pe(s,o),className:(0,l.cn)("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",u===s?"image-with-text__tab--active text-black":"text-white"),children:(0,e.jsx)(r.Heading,{as:re??"h3",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},s))]})})]}),!c&&(b||v||_)&&(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__content flex w-full flex-col",{"justify-center":!V,"justify-between":V,"items-start":m==="left"&&x,"items-center":m==="center"&&x,"text-left":m==="left","text-center":m==="center","laptop:order-1":i==="left"}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__main-content",{"flex flex-col":V}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__header",{"laptop:flex laptop:items-end laptop:justify-between laptop:gap-16":(i==="top"||i==="bottom")&&w?.text}),children:[(0,e.jsxs)("div",{className:"image-with-text__title-wrapper flex min-w-0 flex-1 flex-col",children:[(0,e.jsx)(r.Heading,{as:"h2",size:4,html:b,className:(0,l.cn)("image-with-text__title",{"text-left":x&&m==="left","text-center":x&&m==="center"})}),v&&(0,e.jsx)(r.Text,{as:"p",size:x?4:3,html:v,className:(0,l.cn)("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!x,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":x,"text-left":x&&m==="left","text-center":x&&m==="center"})})]}),(i==="top"||i==="bottom")&&w?.text&&(0,e.jsx)(r.Link,{href:(0,l.getLocalizedPath)(w.link||"",C),className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:X,children:w.text})]}),!x&&(_||M)&&(0,e.jsxs)("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[M&&(0,e.jsx)("img",{src:M,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),_&&(0,e.jsx)(r.Heading,{as:"h4",size:5,html:_,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),x&&(0,e.jsx)("div",{className:(0,l.cn)("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4":i==="top"||i==="bottom","grid-cols-2 tablet:grid-cols-4 laptop:grid-cols-2":i==="left"||i==="right"}),children:H.map((t,s)=>(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__item",{"text-center":m==="center"}),children:[(0,e.jsxs)("div",{className:(0,l.cn)("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":m==="center","justify-start":m==="left"}),children:[t.icon?.url&&(0,e.jsx)(r.Picture,{source:t.icon.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),(0,e.jsx)(r.Heading,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),(0,e.jsx)(r.Text,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},s))})]}),ce()]}),(0,e.jsx)("div",{ref:A,className:(0,l.cn)("image-with-text__media-wrapper",{"laptop:w-[60%] w-full shrink-0":i==="left"||i==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":x,"laptop:basis-[63%] desktop:basis-[57%]":x&&i==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":c,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:c?T?Q():(0,e.jsx)(k.AnimatePresence,{mode:"wait",children:(0,e.jsx)(k.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:(0,e.jsx)(r.Picture,{source:K(),alt:d[u].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},d[u].image?.url)}):T?Q():(0,e.jsx)(r.Picture,{source:K(),className:(0,l.cn)("image-with-text__image rounded-box laptop:rounded-box")})})]})});Y.displayName="ImageWithText";var Te=(0,ee.withLayout)(Y);
|
|
@@ -45,7 +45,7 @@ export interface ImageWithTextTabItem {
|
|
|
45
45
|
title: string;
|
|
46
46
|
}
|
|
47
47
|
export type MediaType = 'image' | 'video';
|
|
48
|
-
export type LayoutPosition = 'left' | 'right' | 'bottom';
|
|
48
|
+
export type LayoutPosition = 'left' | 'right' | 'top' | 'bottom';
|
|
49
49
|
export type TextAlign = 'left' | 'center';
|
|
50
50
|
/** 列数枚举类型 */
|
|
51
51
|
export declare enum Cols {
|
|
@@ -68,7 +68,7 @@ export interface ImageWithTextProps {
|
|
|
68
68
|
descIcon?: string;
|
|
69
69
|
/** 主题,默认 dark */
|
|
70
70
|
theme?: Theme;
|
|
71
|
-
/** 布局位置,默认 left
|
|
71
|
+
/** 布局位置,默认 left。支持上下左右布局(left/right/top/bottom) */
|
|
72
72
|
layout?: LayoutPosition;
|
|
73
73
|
/** 媒体类型,默认 image。所有模式都支持 image 和 video */
|
|
74
74
|
mediaType?: MediaType;
|