@anker-in/headless-ui 1.3.75 → 1.3.76-alpha.1790245429452
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.d.ts +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/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.d.ts +9 -10
- package/dist/cjs/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/index.d.ts +3 -0
- package/dist/cjs/biz-components/HeroBanner/index.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/mediaResolver.d.ts +58 -0
- package/dist/cjs/biz-components/HeroBanner/mediaResolver.js +1 -0
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +101 -6
- 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 +2 -0
- 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 +54 -6
- 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 +1 -0
- package/dist/cjs/biz-components/index.js +1 -1
- package/dist/cjs/components/link.js +1 -1
- package/dist/cjs/hooks/useCarouselPlayback.d.ts +67 -0
- package/dist/cjs/hooks/useCarouselPlayback.js +1 -0
- 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 +4 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/shared/CarouselControls.d.ts +48 -0
- package/dist/cjs/shared/CarouselControls.js +1 -0
- package/dist/esm/biz-components/ActivitySchedule/index.js +1 -1
- package/dist/esm/biz-components/AiuiProvider/index.d.ts +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/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.d.ts +9 -10
- package/dist/esm/biz-components/HeroBanner/HeroBannerCarousel.js +1 -1
- package/dist/esm/biz-components/HeroBanner/index.d.ts +3 -0
- package/dist/esm/biz-components/HeroBanner/index.js +1 -1
- package/dist/esm/biz-components/HeroBanner/mediaResolver.d.ts +58 -0
- package/dist/esm/biz-components/HeroBanner/mediaResolver.js +1 -0
- package/dist/esm/biz-components/HeroBanner/types.d.ts +101 -6
- 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 +2 -0
- 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 +54 -6
- 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 +1 -0
- package/dist/esm/biz-components/index.js +1 -1
- package/dist/esm/components/link.js +1 -1
- package/dist/esm/hooks/useCarouselPlayback.d.ts +67 -0
- package/dist/esm/hooks/useCarouselPlayback.js +1 -0
- 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 +4 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/shared/CarouselControls.d.ts +48 -0
- package/dist/esm/shared/CarouselControls.js +1 -0
- package/package.json +1 -1
- package/style.css +28 -19
|
@@ -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||"small",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)("div",{ref:c,className:(0,d.cn)(e?.root),"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))??null})})});x.displayName="ActivitySchedule";var M=(0,y.withLayout)(x);
|
|
@@ -89,7 +89,7 @@ interface AiuiContextType {
|
|
|
89
89
|
/**
|
|
90
90
|
* 设置导航折叠状态。仅供 HeaderNavigation 内部写入,消费方无需关心。
|
|
91
91
|
*/
|
|
92
|
-
setNavCollapsed?: (_collapsed: boolean) => void;
|
|
92
|
+
setNavCollapsed?: (_collapsed: boolean | undefined) => void;
|
|
93
93
|
}
|
|
94
94
|
export declare const AiuiContext: React.Context<AiuiContextType>;
|
|
95
95
|
export declare const useAiuiContext: () => AiuiContextType;
|
|
@@ -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=(
|
|
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:{},navCollapsed:!1,setNavCollapsed:()=>{}}),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,C]=(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 l=i.current;if(!l)return;const v=(a,r)=>{const s={};if(!r||!r.attributes)return s;for(const E of Array.from(r.attributes)){const u=E?.name;u?.startsWith("data-headless-")&&(s[u]=r.getAttribute(u))}const A=s?.["data-headless-sku"],y=s?.["data-headless-type-name"]?.split?.("#"),p=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:y?.[0]||"",component_name:y?.[1]||"",position:b?.[1]||"",navigation:b?.[0]||"",button_name:p?.[2]||"",SKU:A||"",component_title:p?.[0]||"",component_description:p?.[1]||""}})},f=new MutationObserver(()=>{l.querySelectorAll("[data-headless-type-name]").forEach(a=>{a.hasAttribute("data-headless-track-bound")||(a.addEventListener("click",r=>v(r,a)),a.setAttribute("data-headless-track-bound","true"))})});return f.observe(l,{childList:!0,subtree:!0}),l.querySelectorAll("[data-headless-type-name]").forEach(a=>{a.hasAttribute("data-headless-track-bound")||(a.addEventListener("click",r=>v(r,a)),a.setAttribute("data-headless-track-bound","true"))}),()=>f.disconnect()},[]);const x=(0,t.useMemo)(()=>({...e,navCollapsed:o,setNavCollapsed:C}),[e,o]);return(0,g.jsx)(m.Provider,{value:x,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 a in r)d(e,a,{get:r[a],enumerable:!0})},k=(e,r,a,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of L(r))!A.call(e,o)&&o!==a&&d(e,o,{get:()=>r[o],enumerable:!(i=P(r,o))||i.enumerable});return e};var N=(e,r,a)=>(a=e!=null?j(z(e)):{},k(r||!e||!e.__esModule?d(a,"default",{value:e,enumerable:!0}):a,e)),D=e=>k(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=N(require("../../components/picture.js")),E=require("../../shared/Styles.js"),S=require("react-responsive"),M=require("../../hooks/useExposure.js"),c=require("swiper/react"),p=require("swiper/modules"),B=N(require("../Title/index.js"));const R="copy",Q="store_benefits",$=(e,r)=>{const a=[];for(let i=0;i<e.length;i+=r)a.push(e.slice(i,i+r));return a},w=(0,s.forwardRef)(({data:{items:e=[],itemShape:r,title:a,theme:i},className:o},u)=>{const[x,T]=(0,s.useState)(!1),v=(0,S.useMediaQuery)({query:"(max-width: 768px)"}),b=(0,s.useRef)(null),f=(0,s.useRef)(null);(0,s.useImperativeHandle)(u,()=>f.current),(0,M.useExposure)(f,{componentType:R,componentName:Q}),(0,s.useEffect)(()=>{T(v)},[v]);const I=x?$(e,3):e;return(0,t.jsxs)("div",{ref:f,className:(0,l.cn)("brand-equity-wrapper w-full",{"aiui-dark":i==="dark"},o),children:[a&&(0,t.jsx)(B.default,{data:{title:a}}),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:[I?.map((n,m)=>(0,t.jsx)(c.SwiperSlide,{className:"!flex flex-col gap-3",children:Array.isArray(n)&&n?.map((g,h)=>(0,t.jsx)(q,{data:g,itemShape:r,index:h,theme:g.theme??i},h))},"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)(q,{data:n,itemShape:r,index:m,theme:n.theme??i},m))})]})}),q=({data:e,itemShape:r,index:a,theme:i})=>(0,t.jsxs)("div",{className:(0,l.cn)("brand-equity-item",`brand-equity-item-${a+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(a),"bg-container-primary":i==="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})]});w.displayName="BrandEquity";var C=(0,E.withLayout)(w);
|
|
@@ -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"),b=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 w="image",y="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),v=()=>{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:w,componentName:y,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",v(),{"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"),`${w}_${y}`),"data-headless-type-name":`${w}#${y}`,"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"),`${w}_${y}`),"data-headless-type-name":`${w}#${y}`,"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"),`${w}_${y}`),"data-headless-type-name":`${w}#${y}`,"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 v=a?.length,n=v>3,c=v>2,o=v>1;switch(!0){case u>=1440:case u>=1024:return n?3:v;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:v=!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!v||!n||n.length===0?(0,e.jsxs)("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...i,className:(0,p.cn)("graphicOverlayBlock text-info-primary max-w-[100dvw]",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 max-w-[100dvw]",h),children:[(0,e.jsxs)(b.Tabs,{value:$,onValueChange:N,align:c,children:[(0,e.jsx)("div",{className:"mb-6",children:(0,e.jsx)(b.TabsList,{children:n.map(l=>(0,e.jsx)(b.TabsTrigger,{value:l.id,children:l.label},l.id))})}),n.map(l=>(0,e.jsx)(b.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 Be=Object.create;var ie=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Ae=Object.getPrototypeOf,Oe=Object.prototype.hasOwnProperty;var je=(t,o)=>{for(var i in o)ie(t,i,{get:o[i],enumerable:!0})},pe=(t,o,i,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let u of Ie(o))!Oe.call(t,u)&&u!==i&&ie(t,u,{get:()=>o[u],enumerable:!(c=ze(o,u))||c.enumerable});return t};var le=(t,o,i)=>(i=t!=null?Be(Ae(t)):{},pe(o||!t||!t.__esModule?ie(i,"default",{value:t,enumerable:!0}):i,t)),_e=t=>pe(ie({},"__esModule",{value:!0}),t);var Ge={};je(Ge,{default:()=>Fe});module.exports=_e(Ge);var e=require("react/jsx-runtime"),a=require("react"),s=require("../../components/index.js"),xe=require("../../shared/Styles.js"),v=require("../../helpers/utils.js"),K=le(require("./NavProvider.js")),r=require("./types.js"),Ce=le(require("jump.js")),se=require("@gsap/react"),te=require("gsap"),M=require("./withCategory.js"),w=require("./icons/index.js"),we=le(require("../NavigationSearch/index.js")),Me=require("./ResourceSidebarDropdown.js"),Se=require("./MobileResourceSidebarMenu.js"),Te=require("./SidebarDropdown.js"),ce=require("./useScrollLock.js"),De=require("./MulticolDropdown.js"),Le=require("./SupportsDropdown.js"),Pe=require("./MobileSidebarMenu.js"),Ee=require("./MobileSupportMenu.js"),He=require("./MobileMulticolMenu.js"),ue=require("./MobileMenuComponents.js"),q=require("../AiuiProvider/index.js"),me=le(require("../../shared/throttle.js")),Re=require("./useNavCollapse.js");const fe=t=>!!t?.components?.length&&t?.components?.[0]?.blockType!==r.HeaderNavigationBlockType.Links,be=t=>t?.components?.[0]?.blockType===r.HeaderNavigationBlockType.Links&&t?.components?.[0]?.url||t?.url||void 0,ve=t=>t?.components?.[0]?.blockType===r.HeaderNavigationBlockType.Links&&t?.components?.[0]?.target||t?.target,$e=({groupCategories:t})=>(0,e.jsx)("div",{className:"pointer-events-none invisible absolute inset-x-0 top-0 overflow-hidden","aria-hidden":"true",children:(0,e.jsx)(s.Container,{className:"h-[92px]",children:(0,e.jsx)("nav",{className:"flex h-full items-end justify-between",children:t?.map((o,i)=>(0,e.jsx)("div",{className:"flex gap-3","data-nav-item":!0,children:o?.map(c=>(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(s.Text,{html:c.text,"data-nav-item-label":!0,className:"desktop:text-pretty text-nowrap text-sm font-bold leading-[1.4]"}),fe(c)&&(0,e.jsx)(w.DownArrow,{className:"size-4 opacity-0","aria-hidden":"true"})]},c.id))},`measure-group-${i}`))})})}),ge=(0,a.forwardRef)((t,o)=>{const{data:{header:i}={},buildProps:c,event:u,profile:P,theme:m="light",isTop:l=!1,searchResult:p,onSearch:f,isSearching:b,keywords:E,onPrimaryNavClick:T,onSeriesProductClick:y,onSidebarNavClick:D,onMobileMenuToggle:F,headerId:S,cartCount:H,menuData:B,render:z,componentOverrides:G,...U}=t,[k,I]=(0,a.useState)(!1),[g,A]=(0,a.useState)(!1),[J,O]=(0,a.useState)(!1),L=(0,a.useRef)(null),d=(0,a.useRef)(null),_=(0,a.useMemo)(()=>(0,M.WithGroupCategory)(i?.categories?.filter(x=>x?.pcShow)),[i]),R=(0,Re.useNavCollapse)(d),{setNavCollapsed:ae}=(0,q.useAiuiContext)();(0,a.useEffect)(()=>{ae?.(R)},[R,ae]),(0,a.useImperativeHandle)(o,()=>d.current),(0,a.useEffect)(()=>{d.current&&l&&(0,Ce.default)(d.current,{duration:0,offset:d.current?.getBoundingClientRect()?.bottom||0})},[l]),(0,a.useEffect)(()=>{if(l){A(!1),O(!1);return}let x=0,Y=0,V=0;const re=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,W=re();x=W,A(W>300),O(W>30);const j=(0,me.default)(()=>{const $=re(),n=$-x;O($>30),n>0?(Y=0,V+=n,V>=300&&$>300&&A(!0)):n<0&&(V=0,Y+=Math.abs(n),Y>=300&&(A(!1),Y=0)),x=$},100);return window.addEventListener("scroll",j,{passive:!0}),()=>window.removeEventListener("scroll",j)},[l]),(0,a.useEffect)(()=>{u&&(u.search=()=>I(!0))},[u]),(0,se.useGSAP)(()=>{L?.current&&k&&te.gsap.fromTo(L.current,{height:0},{height:"auto",duration:.3})},[k]),(0,ce.useScrollLock)(k);const Q=(0,a.useMemo)(()=>i?.bar?.actions?.find(x=>x?.blockType===r.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[i]),ne=z?.mobileHeaderNavigation;return(0,e.jsx)(K.default,{buildProps:c,profile:P,isMobile:R,event:u,payloadData:i,onSidebarNavClick:D,onSeriesProductClick:y,cartCount:H,componentOverrides:G,children:(0,e.jsx)("header",{...U,id:S||"header","data-ui-component-id":"HeaderNavigation",className:l?"relative z-[100] bg-white":(0,v.cn)("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":g}),ref:d,children:(0,e.jsxs)("div",{className:(0,v.cn)("hover:bg-white hover:text-black",m==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!l&&J},{"hover:!text-black":m==="dark","!text-black":!l&&J}),onClick:()=>!l&&O(!0),children:[(0,e.jsx)($e,{groupCategories:_}),(0,e.jsx)("div",{className:(0,v.cn)("hidden",R?"laptop:hidden":"laptop:block","desktop:block"),children:(0,e.jsx)(he,{data:i,groupCategories:_,theme:m,onNavItemClick:()=>!l&&O(!0),onPrimaryNavClick:T,className:"!bg-white"})}),(0,e.jsx)("div",{className:(0,v.cn)("block",R?"laptop:block":"laptop:hidden","desktop:hidden"),children:ne?(0,e.jsx)(ne,{menuData:B,data:i,onPrimaryNavClick:T}):(0,e.jsx)(ye,{menuData:B,data:i,onPrimaryNavClick:T,onMobileMenuToggle:F,className:"!bg-white"})}),k&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${d?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[(0,e.jsx)("div",{ref:L,className:(0,v.cn)("overflow-y-auto",{}),children:(0,e.jsx)(we.default,{data:Q,keywords:E,isSearching:b,searchResult:p,onSearch:x=>{f?.(x)},onClose:()=>{f?.(),I(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>I(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:x=>{(x.key==="Enter"||x.key===" "||x.key==="Escape")&&(x.preventDefault(),I(!1))}})]})]})})})}),he=(0,a.forwardRef)((t,o)=>{const{data:i,onNavItemClick:c,className:u,theme:P,onPrimaryNavClick:m,groupCategories:l}=t,{event:p,profile:f}=(0,K.useNavContext)(),[b,E]=(0,a.useState)(!1),{locale:T="us"}=(0,q.useAiuiContext)(),[y,D]=(0,a.useState)(null),[F,S]=(0,a.useState)([]),H=(0,a.useRef)(null),[B,z]=(0,a.useState)(!1),G=(0,a.useRef)(null),U=(0,a.useRef)(null),k=(0,a.useRef)(null),I=(0,a.useRef)(l.map(n=>Array(n?.length||0).fill(null)));(0,a.useEffect)(()=>{l?.length&&S(l?.map((n,h)=>n?.map((N,C)=>({groupIndex:h,index:C,open:!1}))))},[l]);const g=(0,a.useMemo)(()=>{let n=null;for(const h of F){for(const N of h)if(N.open){n=N;break}if(n)break}return n},[F]);(0,ce.useScrollLock)(!!g?.open||B);const A=(n,h)=>{z(!1),c?.();const N=l?.flat()||[],C=N?.findIndex(X=>X?.id===l[n][h]?.id);m?.(N[C],C)},J=(n,h)=>{const N=l[n][h],C=N?.components?.[0];C&&C?.blockType!==r.HeaderNavigationBlockType.Links&&(D(N),S(Z=>Z.map(ee=>ee.map(oe=>oe.groupIndex===n&&oe.index===h?{...oe,open:!0}:{...oe,open:!1}))))},O=(n,h,N)=>{n.key==="Escape"&&g?.groupIndex===h&&g?.index===N&&(n.preventDefault(),L())},L=()=>{S(n=>n.map(h=>h.map(N=>({...N,open:!1}))))},d=()=>{k.current&&clearTimeout(k.current),k.current=setTimeout(()=>{L()},200)},_=()=>{k.current&&clearTimeout(k.current)},R=()=>{k.current&&clearTimeout(k.current)},ae=()=>{k.current&&clearTimeout(k.current),k.current=setTimeout(()=>{L()},200)},Q=(0,a.useMemo)(()=>{if(y)return y?.components?.[0]?.blockType},[y]),ne=(0,M.WithSidebar)(Te.SidebarDropdown,y),x=(0,M.WithResource)(Me.ResourceSidebarDropdown,y),Y=(0,M.WithMulticol)(De.MulticolDropdown,y),V=(0,M.WithSupports)(Le.SupportsDropdown,{categoriesItem:y,currentNavItemRef:I.current?.[g?.groupIndex||0]?.[g?.index||0]}),re=(0,a.useMemo)(()=>{switch(Q){case r.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(ne,{});case r.HeaderNavigationBlockType.Resource:return(0,e.jsx)(x,{});case r.HeaderNavigationBlockType.Supports:return(0,e.jsx)(V,{});case r.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(Y,{});default:return null}},[Q,y]),W=(0,a.useMemo)(()=>i?.bar?.actions?.filter(n=>n?.pcShow),[i]),j=(0,a.useMemo)(()=>W?.find(n=>n?.blockType===r.HeaderNavigationActionBlockType.Profile),[W]),$=(0,a.useCallback)(()=>{z(n=>!n)},[]);return(0,a.useEffect)(()=>{if(H?.current){const n=H.current;return n.addEventListener("click",$),()=>{n.removeEventListener("click",$)}}},[$]),(0,se.useGSAP)(()=>{g?.open&&U?.current&&te.gsap.fromTo(U?.current,{height:0},{height:"auto"})},[g?.open]),(0,e.jsxs)(s.Container,{className:(0,v.cn)("relative h-[92px]",u),children:[(0,e.jsxs)("div",{ref:G,onClick:L,className:"flex h-full flex-col justify-end gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(Ne,{}),(0,e.jsx)(de,{ref:H,actions:W,activeStatus:B})]}),(0,e.jsx)("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",onMouseEnter:_,onMouseLeave:d,children:l?.map((n,h)=>(0,e.jsx)("div",{className:"flex gap-3",children:n?.map((N,C)=>{const X=g?.groupIndex===h&&g?.index===C,Z=ve(N);return(0,e.jsx)("div",{ref:ee=>{I.current[h][C]=ee},className:"group",onMouseEnter:()=>J(h,C),children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("a",{href:(0,v.getLocalizedPath)(be(N),T,"ref=navMenu"),...Z?{target:Z}:{},rel:Z==="_blank"?"noopener noreferrer":void 0,className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4 no-underline",onClick:()=>A(h,C),onKeyDown:ee=>O(ee,h,C),"aria-expanded":X,"aria-haspopup":"true","aria-label":N.text,children:[(0,e.jsx)(s.Text,{html:N.text,className:"desktop:text-pretty text-nowrap text-sm font-bold leading-[1.4]"}),(0,e.jsx)(w.DownArrow,{className:(0,v.cn)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":g?.groupIndex===h&&g?.index===C,"opacity-100":b&&g?.groupIndex===h&&g?.index===C,hidden:!fe(N)})})]}),(0,e.jsx)("div",{className:(0,v.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":X},P==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},N.id)})},`groupCategory-${h}`))})]}),(0,e.jsxs)("div",{role:"menu","aria-hidden":!(g?.open&&y),className:(0,v.cn)("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(g?.open&&y)}),style:{height:`calc(100dvh - ${G?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:U,className:(0,v.cn)("relative z-50",{"overflow-hidden":Q!==r.HeaderNavigationBlockType.Supports}),onMouseEnter:()=>{R(),E(!0)},onMouseLeave:()=>{ae(),E(!1)},children:re}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:L,onMouseEnter:L,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:n=>{(n.key==="Enter"||n.key===" "||n.key==="Escape")&&(n.preventDefault(),L())}})]}),B&&(0,e.jsxs)("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[(0,e.jsx)("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${H?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:f?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s.Text,{html:f?.nick_name||j?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),(0,e.jsx)("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:j?.profiles?.map(n=>(0,e.jsx)(ue.MenuItem,{className:"py-2",label:n?.title,href:(0,v.getLocalizedPath)(n?.url,T,"ref=navMenu")},n.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w.Polygon,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),(0,e.jsx)(s.Text,{html:j?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:j?.benefits?.map(n=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(s.Picture,{source:n.benefitIcon?.url,className:"size-4 shrink-0",alt:n.benefit,width:16,height:16}),(0,e.jsx)(s.Text,{html:n.benefit,className:"text-sm font-bold leading-[1.4]"})]},n.id))}),(0,e.jsxs)("div",{className:"mt-4 flex flex-wrap gap-2",children:[(0,e.jsx)(s.Button,{className:"grow",variant:"secondary",size:"lg",onClick:()=>p?.join?.(),children:(0,e.jsx)(s.Text,{html:j?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(s.Button,{className:"grow",variant:"primary",size:"lg",onClick:()=>p?.login?.(),children:(0,e.jsx)(s.Text,{html:j?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>z(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:n=>{(n.key==="Enter"||n.key===" "||n.key==="Escape")&&(n.preventDefault(),z(!1))}})]})]})}),ye=(0,a.forwardRef)(({data:t,menuData:o,className:i,onPrimaryNavClick:c,onMobileMenuToggle:u},P)=>{const m=(0,a.useMemo)(()=>(0,M.WithGroupCategory)(t?.categories?.filter(d=>d?.mobileShow)),[t]),{currentMenu:l,setCurrentMenu:p,subSubCategory:f}=(0,K.useNavContext)(),[b,E]=(0,a.useState)(!1),[T,y]=(0,a.useState)(0),[D,F]=(0,a.useState)(null),S=(0,a.useRef)(null),H=(0,a.useRef)(!1);(0,a.useEffect)(()=>{if(S?.current&&b){const d=S?.current?.getBoundingClientRect();y(window?.innerHeight-(d?.top||0))}u?.({open:b})},[b,u]),(0,a.useEffect)(()=>{if(!b)return;const d=(0,me.default)(()=>{if(S?.current){const _=S.current.getBoundingClientRect();H.current=!0,y(window?.innerHeight-(_?.top||0))}},100);return window.addEventListener("resize",d),()=>window.removeEventListener("resize",d)},[b]),(0,se.useGSAP)(()=>{if(S.current){if(H.current){te.gsap.set(S.current,{height:T}),H.current=!1;return}te.gsap.fromTo(S.current,{height:0},{height:T,duration:.3})}},[T]),(0,ce.useScrollLock)(b);const B=(0,a.useMemo)(()=>D?.components?.[0]?.blockType,[D]),z=(0,M.WithSupports)(Ee.MobileSupportMenu,{categoriesItem:D}),G=(0,M.WithSidebar)(Pe.MobileSidebarMenu,D),U=(0,M.WithResource)(Se.MobileResourceSidebarMenu,D),k=(0,M.WithMulticol)(He.MobileMulticolMenu,D),I=(0,a.useMemo)(()=>{switch(B){case r.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(G,{});case r.HeaderNavigationBlockType.Resource:return(0,e.jsx)(U,{});case r.HeaderNavigationBlockType.Supports:return(0,e.jsx)(z,{});case r.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(k,{});default:return null}},[B,D,z]),g=(0,a.useCallback)(()=>{E(!1),y(0),p&&p(r.HeaderNavigationMenu.Primary)},[E,y,p]),A=(0,a.useMemo)(()=>t?.bar?.actions?.filter(d=>d?.mobileShow&&d?.blockType!==r.HeaderNavigationActionBlockType.Profile),[t]),J=(0,a.useMemo)(()=>t?.bar?.actions?.find(d=>d?.mobileShow&&d?.blockType===r.HeaderNavigationActionBlockType.Profile)||{},[t]),O=(0,a.useMemo)(()=>{switch(l){case r.HeaderNavigationMenu.Primary:return(0,e.jsx)(We,{actions:A,menuOpen:b,onMenuOpenClose:()=>{E(!1),y(0)},onMenuOpenClick:()=>E(!0)});case r.HeaderNavigationMenu.Secondary:return(0,e.jsx)(ke,{title:D?.text,onMenuOpenClose:g,onMenuBackClick:()=>p?.(r.HeaderNavigationMenu.Primary)});case r.HeaderNavigationMenu.Third:return(0,e.jsx)(ke,{title:f?.label,onMenuOpenClose:g,onMenuBackClick:()=>p?.(r.HeaderNavigationMenu.Secondary)});default:return null}},[b,l,p,D,A,f,g]),L=(0,a.useCallback)((d,_)=>{const R=Array.isArray(m)?Array.isArray(m[d])?m[d][_]:{}:{};R?.components?.[0]?.blockType!==r.HeaderNavigationBlockType.Links&&(F(R),p?.(r.HeaderNavigationMenu.Secondary))},[m,p]);return(0,e.jsxs)(s.Container,{className:(0,v.cn)("relative h-[56px]",i),children:[O,b&&(0,e.jsxs)("nav",{ref:S,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:T},role:"navigation","aria-label":"Mobile navigation menu",children:[l===r.HeaderNavigationMenu.Primary&&o?(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(s.BrandStrip,{data:o})}):null,l===r.HeaderNavigationMenu.Primary?(0,e.jsx)(Ke,{categories:m,onPrimaryMenuClick:L,onPrimaryNavClick:c,profileAction:J,menuData:o}):I]})]})}),Ke=({categories:t,onPrimaryMenuClick:o,profileAction:i,onPrimaryNavClick:c,menuData:u})=>{const{locale:P="us"}=(0,q.useAiuiContext)();return(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((m,l)=>(0,e.jsxs)("div",{className:"",children:[l>0||u?(0,e.jsx)("div",{className:(0,v.cn)("my-2 h-px w-full bg-[#E5E5E7]")}):null,m?.map((p,f)=>{const b=p.components?.[0]?.blockType===r.HeaderNavigationBlockType.Links;return(0,e.jsx)(ue.MenuItem,{label:p.text,href:b?(0,v.getLocalizedPath)(be(p),P,"ref=navMenu"):void 0,target:b?ve(p):void 0,onClick:()=>{const T=(t?.flat()||[])?.findIndex(y=>y?.id===t[l][f]?.id);o(l,f),c?.(p,T)},icon:p.components?.[0]?.icon},p.id)})]},`groupCategory-${l}`))}),(0,e.jsx)(Ue,{profileAction:i})]})},Ue=({profileAction:t})=>{const[o,i]=(0,a.useState)(!1),{profile:c,event:u}=(0,K.useNavContext)(),{locale:P="us"}=(0,q.useAiuiContext)();return(0,e.jsxs)("div",{className:(0,v.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":o}),children:[(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>i(!o),"aria-expanded":o,"aria-label":c?.nick_name||t?.welcome,children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:(0,e.jsx)(w.User,{"aria-hidden":"true"})}),(0,e.jsx)(s.Text,{html:c?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&(0,e.jsx)(w.DownArrow,{"aria-hidden":"true",className:(0,v.cn)("laptop:size-4 size-5",{"rotate-180":o})})]}),c?.email&&(0,e.jsx)("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:t?.profiles?.map(m=>(0,e.jsx)(ue.MenuItem,{label:m?.title,href:(0,v.getLocalizedPath)(m?.url,P,"ref=navMenu")},m.id))}),o&&!c?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(s.Text,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(m=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(s.Picture,{source:m.benefitIcon?.url,className:"size-4",alt:m.benefit,width:16,height:16}),(0,e.jsx)(s.Text,{html:m.benefit,className:"text-sm font-bold leading-[1.4]"})]},m.id))})]}),!c?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(s.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>u?.join?.(),children:(0,e.jsx)(s.Text,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(s.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>u?.login?.(),children:(0,e.jsx)(s.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},We=({menuOpen:t,onMenuOpenClose:o,onMenuOpenClick:i,actions:c})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(Ne,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(de,{actions:c}),t?(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>o(),"aria-label":"Close menu","aria-expanded":"true",children:(0,e.jsx)(w.Close,{className:"size-5","aria-hidden":"true"})}):(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:(0,e.jsx)(w.Menu,{className:"size-5","aria-hidden":"true"})})]})]}),Ne=()=>{const{payloadData:t,isMobile:o}=(0,K.useNavContext)(),{locale:i="us"}=(0,q.useAiuiContext)();return(0,e.jsx)("a",{href:(0,v.getLocalizedPath)("/",i,"ref=logo"),className:"hover:text-[#00CBEB] [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:o?t?.bar?.mobileLogo:t?.bar?.desktopLogo}})},de=(0,a.forwardRef)(({actions:t,activeStatus:o=!1},i)=>{const{event:c,cartCount:u}=(0,K.useNavContext)(),[P,m]=(0,a.useState)(null),l=f=>{switch(f){case r.HeaderNavigationActionBlockType.Search:return"Search";case r.HeaderNavigationActionBlockType.Cart:return`Shopping cart${u>0?` (${u} items)`:""}`;case r.HeaderNavigationActionBlockType.Profile:return"User profile";case r.HeaderNavigationActionBlockType.Livestream:return"Livestream";default:return"Action"}},p=(0,a.useCallback)((f,b)=>{switch(m(b),f?.blockType){case r.HeaderNavigationActionBlockType.Search:c?.search?.();break;case r.HeaderNavigationActionBlockType.Cart:c?.cart?.();break;case r.HeaderNavigationActionBlockType.Profile:c?.profile?.();break;case r.HeaderNavigationActionBlockType.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((f,b)=>(0,e.jsxs)("button",{className:"relative cursor-pointer border-0 bg-transparent p-0","data-tag":f?.tag||"",ref:f.blockType===r.HeaderNavigationActionBlockType.Profile?i:null,onClick:()=>p(f,b),"aria-label":l(f.blockType),"aria-pressed":o&&P===b,children:[(0,e.jsx)(s.Text,{html:f.icon,className:(0,v.cn)("size-5",{"text-brand-0":o&&P===b}),"aria-hidden":"true"}),f.blockType===r.HeaderNavigationActionBlockType.Cart&&u>0&&(0,e.jsx)("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:(0,e.jsx)(s.Text,{html:u?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},f.id))})}),ke=({title:t,onMenuOpenClose:o,onMenuBackClick:i})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Back to previous menu",children:(0,e.jsx)(w.LeftArrow,{className:"size-5","aria-hidden":"true"})}),(0,e.jsx)(s.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>o(),"aria-label":"Close menu",children:(0,e.jsx)(w.Close,{className:"size-5","aria-hidden":"true"})})]});ye.displayName="MobileNavigation",de.displayName="Actions",ge.displayName="HeaderNavigation",he.displayName="DesktopNavigation";var Fe=(0,xe.withLayout)(ge);
|
|
1
|
+
"use strict";"use client";var Be=Object.create;var ie=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var Ie=Object.getOwnPropertyNames;var Ae=Object.getPrototypeOf,Oe=Object.prototype.hasOwnProperty;var je=(t,o)=>{for(var i in o)ie(t,i,{get:o[i],enumerable:!0})},pe=(t,o,i,c)=>{if(o&&typeof o=="object"||typeof o=="function")for(let u of Ie(o))!Oe.call(t,u)&&u!==i&&ie(t,u,{get:()=>o[u],enumerable:!(c=ze(o,u))||c.enumerable});return t};var le=(t,o,i)=>(i=t!=null?Be(Ae(t)):{},pe(o||!t||!t.__esModule?ie(i,"default",{value:t,enumerable:!0}):i,t)),_e=t=>pe(ie({},"__esModule",{value:!0}),t);var Ge={};je(Ge,{default:()=>Fe});module.exports=_e(Ge);var e=require("react/jsx-runtime"),a=require("react"),s=require("../../components/index.js"),xe=require("../../shared/Styles.js"),v=require("../../helpers/utils.js"),K=le(require("./NavProvider.js")),r=require("./types.js"),Ce=le(require("jump.js")),se=require("@gsap/react"),ae=require("gsap"),M=require("./withCategory.js"),w=require("./icons/index.js"),we=le(require("../NavigationSearch/index.js")),Me=require("./ResourceSidebarDropdown.js"),Se=require("./MobileResourceSidebarMenu.js"),Te=require("./SidebarDropdown.js"),ce=require("./useScrollLock.js"),De=require("./MulticolDropdown.js"),Le=require("./SupportsDropdown.js"),Pe=require("./MobileSidebarMenu.js"),Ee=require("./MobileSupportMenu.js"),He=require("./MobileMulticolMenu.js"),ue=require("./MobileMenuComponents.js"),q=require("../AiuiProvider/index.js"),me=le(require("../../shared/throttle.js")),Re=require("./useNavCollapse.js");const fe=t=>!!t?.components?.length&&t?.components?.[0]?.blockType!==r.HeaderNavigationBlockType.Links,be=t=>t?.components?.[0]?.blockType===r.HeaderNavigationBlockType.Links&&t?.components?.[0]?.url||t?.url||void 0,ve=t=>t?.components?.[0]?.blockType===r.HeaderNavigationBlockType.Links&&t?.components?.[0]?.target||t?.target,$e=({groupCategories:t})=>(0,e.jsx)("div",{className:"pointer-events-none invisible absolute inset-x-0 top-0 overflow-hidden","aria-hidden":"true",children:(0,e.jsx)(s.Container,{className:"h-[92px]",children:(0,e.jsx)("nav",{className:"flex h-full items-end justify-between",children:t?.map((o,i)=>(0,e.jsx)("div",{className:"flex gap-3","data-nav-item":!0,children:o?.map(c=>(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)(s.Text,{html:c.text,"data-nav-item-label":!0,className:"desktop:text-pretty text-nowrap text-sm font-bold leading-[1.4]"}),fe(c)&&(0,e.jsx)(w.DownArrow,{className:"size-4 opacity-0","aria-hidden":"true"})]},c.id))},`measure-group-${i}`))})})}),ge=(0,a.forwardRef)((t,o)=>{const{data:{header:i}={},buildProps:c,event:u,profile:P,theme:m="light",isTop:l=!1,searchResult:p,onSearch:f,isSearching:b,keywords:E,onPrimaryNavClick:T,onSeriesProductClick:y,onSidebarNavClick:D,onMobileMenuToggle:F,headerId:S,cartCount:H,menuData:B,render:z,componentOverrides:G,...U}=t,[k,I]=(0,a.useState)(!1),[g,A]=(0,a.useState)(!1),[J,O]=(0,a.useState)(!1),L=(0,a.useRef)(null),d=(0,a.useRef)(null),_=(0,a.useMemo)(()=>(0,M.WithGroupCategory)(i?.categories?.filter(x=>x?.pcShow)),[i]),R=(0,Re.useNavCollapse)(d),{setNavCollapsed:Q}=(0,q.useAiuiContext)();(0,a.useEffect)(()=>(Q?.(R),()=>Q?.(void 0)),[R,Q]),(0,a.useImperativeHandle)(o,()=>d.current),(0,a.useEffect)(()=>{d.current&&l&&(0,Ce.default)(d.current,{duration:0,offset:d.current?.getBoundingClientRect()?.bottom||0})},[l]),(0,a.useEffect)(()=>{if(l){A(!1),O(!1);return}let x=0,Y=0,X=0;const re=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,W=re();x=W,A(W>300),O(W>30);const j=(0,me.default)(()=>{const $=re(),n=$-x;O($>30),n>0?(Y=0,X+=n,X>=300&&$>300&&A(!0)):n<0&&(X=0,Y+=Math.abs(n),Y>=300&&(A(!1),Y=0)),x=$},100);return window.addEventListener("scroll",j,{passive:!0}),()=>window.removeEventListener("scroll",j)},[l]),(0,a.useEffect)(()=>{u&&(u.search=()=>I(!0))},[u]),(0,se.useGSAP)(()=>{L?.current&&k&&ae.gsap.fromTo(L.current,{height:0},{height:"auto",duration:.3})},[k]),(0,ce.useScrollLock)(k);const V=(0,a.useMemo)(()=>i?.bar?.actions?.find(x=>x?.blockType===r.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[i]),ne=z?.mobileHeaderNavigation;return(0,e.jsx)(K.default,{buildProps:c,profile:P,isMobile:R,event:u,payloadData:i,onSidebarNavClick:D,onSeriesProductClick:y,cartCount:H,componentOverrides:G,children:(0,e.jsx)("header",{...U,id:S||"header","data-ui-component-id":"HeaderNavigation",className:l?"relative z-[100] bg-white":(0,v.cn)("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":g}),ref:d,children:(0,e.jsxs)("div",{className:(0,v.cn)("hover:bg-white hover:text-black",m==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!l&&J},{"hover:!text-black":m==="dark","!text-black":!l&&J}),onClick:()=>!l&&O(!0),children:[(0,e.jsx)($e,{groupCategories:_}),(0,e.jsx)("div",{className:(0,v.cn)("hidden",R?"laptop:hidden":"laptop:block","desktop:block"),children:(0,e.jsx)(he,{data:i,groupCategories:_,theme:m,onNavItemClick:()=>!l&&O(!0),onPrimaryNavClick:T,className:"!bg-white"})}),(0,e.jsx)("div",{className:(0,v.cn)("block",R?"laptop:block":"laptop:hidden","desktop:hidden"),children:ne?(0,e.jsx)(ne,{menuData:B,data:i,onPrimaryNavClick:T}):(0,e.jsx)(ye,{menuData:B,data:i,onPrimaryNavClick:T,onMobileMenuToggle:F,className:"!bg-white"})}),k&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${d?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[(0,e.jsx)("div",{ref:L,className:(0,v.cn)("overflow-y-auto",{}),children:(0,e.jsx)(we.default,{data:V,keywords:E,isSearching:b,searchResult:p,onSearch:x=>{f?.(x)},onClose:()=>{f?.(),I(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>I(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:x=>{(x.key==="Enter"||x.key===" "||x.key==="Escape")&&(x.preventDefault(),I(!1))}})]})]})})})}),he=(0,a.forwardRef)((t,o)=>{const{data:i,onNavItemClick:c,className:u,theme:P,onPrimaryNavClick:m,groupCategories:l}=t,{event:p,profile:f}=(0,K.useNavContext)(),[b,E]=(0,a.useState)(!1),{locale:T="us"}=(0,q.useAiuiContext)(),[y,D]=(0,a.useState)(null),[F,S]=(0,a.useState)([]),H=(0,a.useRef)(null),[B,z]=(0,a.useState)(!1),G=(0,a.useRef)(null),U=(0,a.useRef)(null),k=(0,a.useRef)(null),I=(0,a.useRef)(l.map(n=>Array(n?.length||0).fill(null)));(0,a.useEffect)(()=>{l?.length&&S(l?.map((n,h)=>n?.map((N,C)=>({groupIndex:h,index:C,open:!1}))))},[l]);const g=(0,a.useMemo)(()=>{let n=null;for(const h of F){for(const N of h)if(N.open){n=N;break}if(n)break}return n},[F]);(0,ce.useScrollLock)(!!g?.open||B);const A=(n,h)=>{z(!1),c?.();const N=l?.flat()||[],C=N?.findIndex(Z=>Z?.id===l[n][h]?.id);m?.(N[C],C)},J=(n,h)=>{const N=l[n][h],C=N?.components?.[0];C&&C?.blockType!==r.HeaderNavigationBlockType.Links&&(D(N),S(ee=>ee.map(te=>te.map(oe=>oe.groupIndex===n&&oe.index===h?{...oe,open:!0}:{...oe,open:!1}))))},O=(n,h,N)=>{n.key==="Escape"&&g?.groupIndex===h&&g?.index===N&&(n.preventDefault(),L())},L=()=>{S(n=>n.map(h=>h.map(N=>({...N,open:!1}))))},d=()=>{k.current&&clearTimeout(k.current),k.current=setTimeout(()=>{L()},200)},_=()=>{k.current&&clearTimeout(k.current)},R=()=>{k.current&&clearTimeout(k.current)},Q=()=>{k.current&&clearTimeout(k.current),k.current=setTimeout(()=>{L()},200)},V=(0,a.useMemo)(()=>{if(y)return y?.components?.[0]?.blockType},[y]),ne=(0,M.WithSidebar)(Te.SidebarDropdown,y),x=(0,M.WithResource)(Me.ResourceSidebarDropdown,y),Y=(0,M.WithMulticol)(De.MulticolDropdown,y),X=(0,M.WithSupports)(Le.SupportsDropdown,{categoriesItem:y,currentNavItemRef:I.current?.[g?.groupIndex||0]?.[g?.index||0]}),re=(0,a.useMemo)(()=>{switch(V){case r.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(ne,{});case r.HeaderNavigationBlockType.Resource:return(0,e.jsx)(x,{});case r.HeaderNavigationBlockType.Supports:return(0,e.jsx)(X,{});case r.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(Y,{});default:return null}},[V,y]),W=(0,a.useMemo)(()=>i?.bar?.actions?.filter(n=>n?.pcShow),[i]),j=(0,a.useMemo)(()=>W?.find(n=>n?.blockType===r.HeaderNavigationActionBlockType.Profile),[W]),$=(0,a.useCallback)(()=>{z(n=>!n)},[]);return(0,a.useEffect)(()=>{if(H?.current){const n=H.current;return n.addEventListener("click",$),()=>{n.removeEventListener("click",$)}}},[$]),(0,se.useGSAP)(()=>{g?.open&&U?.current&&ae.gsap.fromTo(U?.current,{height:0},{height:"auto"})},[g?.open]),(0,e.jsxs)(s.Container,{className:(0,v.cn)("relative h-[92px]",u),children:[(0,e.jsxs)("div",{ref:G,onClick:L,className:"flex h-full flex-col justify-end gap-4",children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",children:[(0,e.jsx)(Ne,{}),(0,e.jsx)(de,{ref:H,actions:W,activeStatus:B})]}),(0,e.jsx)("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",onMouseEnter:_,onMouseLeave:d,children:l?.map((n,h)=>(0,e.jsx)("div",{className:"flex gap-3",children:n?.map((N,C)=>{const Z=g?.groupIndex===h&&g?.index===C,ee=ve(N);return(0,e.jsx)("div",{ref:te=>{I.current[h][C]=te},className:"group",onMouseEnter:()=>J(h,C),children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("a",{href:(0,v.getLocalizedPath)(be(N),T,"ref=navMenu"),...ee?{target:ee}:{},rel:ee==="_blank"?"noopener noreferrer":void 0,className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4 no-underline",onClick:()=>A(h,C),onKeyDown:te=>O(te,h,C),"aria-expanded":Z,"aria-haspopup":"true","aria-label":N.text,children:[(0,e.jsx)(s.Text,{html:N.text,className:"desktop:text-pretty text-nowrap text-sm font-bold leading-[1.4]"}),(0,e.jsx)(w.DownArrow,{className:(0,v.cn)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":g?.groupIndex===h&&g?.index===C,"opacity-100":b&&g?.groupIndex===h&&g?.index===C,hidden:!fe(N)})})]}),(0,e.jsx)("div",{className:(0,v.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":Z},P==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},N.id)})},`groupCategory-${h}`))})]}),(0,e.jsxs)("div",{role:"menu","aria-hidden":!(g?.open&&y),className:(0,v.cn)("absolute left-0 top-full z-[999] flex w-full flex-col overflow-hidden border-t border-b-[#E4E5E6] bg-black/70 text-black",{hidden:!(g?.open&&y)}),style:{height:`calc(100dvh - ${G?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:U,className:(0,v.cn)("relative z-50",{"overflow-hidden":V!==r.HeaderNavigationBlockType.Supports}),onMouseEnter:()=>{R(),E(!0)},onMouseLeave:()=>{Q(),E(!1)},children:re}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:L,onMouseEnter:L,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:n=>{(n.key==="Enter"||n.key===" "||n.key==="Escape")&&(n.preventDefault(),L())}})]}),B&&(0,e.jsxs)("div",{className:"absolute left-0 top-full z-[999] flex h-dvh w-full bg-black/70",role:"dialog","aria-modal":"true","aria-label":"User profile menu",children:[(0,e.jsx)("div",{className:"rounded-box absolute w-[272px] overflow-hidden bg-white p-4",style:{right:`calc(100% - ${H?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:f?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s.Text,{html:f?.nick_name||j?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"mt-2 h-px bg-[#D9D9D9]","aria-hidden":"true"}),(0,e.jsx)("nav",{className:"mt-2",role:"navigation","aria-label":"Profile navigation",children:j?.profiles?.map(n=>(0,e.jsx)(ue.MenuItem,{className:"py-2",label:n?.title,href:(0,v.getLocalizedPath)(n?.url,T,"ref=navMenu")},n.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(w.Polygon,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),(0,e.jsx)(s.Text,{html:j?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:j?.benefits?.map(n=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(s.Picture,{source:n.benefitIcon?.url,className:"size-4 shrink-0",alt:n.benefit,width:16,height:16}),(0,e.jsx)(s.Text,{html:n.benefit,className:"text-sm font-bold leading-[1.4]"})]},n.id))}),(0,e.jsxs)("div",{className:"mt-4 flex flex-wrap gap-2",children:[(0,e.jsx)(s.Button,{className:"grow",variant:"secondary",size:"lg",onClick:()=>p?.join?.(),children:(0,e.jsx)(s.Text,{html:j?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(s.Button,{className:"grow",variant:"primary",size:"lg",onClick:()=>p?.login?.(),children:(0,e.jsx)(s.Text,{html:j?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>z(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:n=>{(n.key==="Enter"||n.key===" "||n.key==="Escape")&&(n.preventDefault(),z(!1))}})]})]})}),ye=(0,a.forwardRef)(({data:t,menuData:o,className:i,onPrimaryNavClick:c,onMobileMenuToggle:u},P)=>{const m=(0,a.useMemo)(()=>(0,M.WithGroupCategory)(t?.categories?.filter(d=>d?.mobileShow)),[t]),{currentMenu:l,setCurrentMenu:p,subSubCategory:f}=(0,K.useNavContext)(),[b,E]=(0,a.useState)(!1),[T,y]=(0,a.useState)(0),[D,F]=(0,a.useState)(null),S=(0,a.useRef)(null),H=(0,a.useRef)(!1);(0,a.useEffect)(()=>{if(S?.current&&b){const d=S?.current?.getBoundingClientRect();y(window?.innerHeight-(d?.top||0))}u?.({open:b})},[b,u]),(0,a.useEffect)(()=>{if(!b)return;const d=(0,me.default)(()=>{if(S?.current){const _=S.current.getBoundingClientRect();H.current=!0,y(window?.innerHeight-(_?.top||0))}},100);return window.addEventListener("resize",d),()=>window.removeEventListener("resize",d)},[b]),(0,se.useGSAP)(()=>{if(S.current){if(H.current){ae.gsap.set(S.current,{height:T}),H.current=!1;return}ae.gsap.fromTo(S.current,{height:0},{height:T,duration:.3})}},[T]),(0,ce.useScrollLock)(b);const B=(0,a.useMemo)(()=>D?.components?.[0]?.blockType,[D]),z=(0,M.WithSupports)(Ee.MobileSupportMenu,{categoriesItem:D}),G=(0,M.WithSidebar)(Pe.MobileSidebarMenu,D),U=(0,M.WithResource)(Se.MobileResourceSidebarMenu,D),k=(0,M.WithMulticol)(He.MobileMulticolMenu,D),I=(0,a.useMemo)(()=>{switch(B){case r.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(G,{});case r.HeaderNavigationBlockType.Resource:return(0,e.jsx)(U,{});case r.HeaderNavigationBlockType.Supports:return(0,e.jsx)(z,{});case r.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(k,{});default:return null}},[B,D,z]),g=(0,a.useCallback)(()=>{E(!1),y(0),p&&p(r.HeaderNavigationMenu.Primary)},[E,y,p]),A=(0,a.useMemo)(()=>t?.bar?.actions?.filter(d=>d?.mobileShow&&d?.blockType!==r.HeaderNavigationActionBlockType.Profile),[t]),J=(0,a.useMemo)(()=>t?.bar?.actions?.find(d=>d?.mobileShow&&d?.blockType===r.HeaderNavigationActionBlockType.Profile)||{},[t]),O=(0,a.useMemo)(()=>{switch(l){case r.HeaderNavigationMenu.Primary:return(0,e.jsx)(We,{actions:A,menuOpen:b,onMenuOpenClose:()=>{E(!1),y(0)},onMenuOpenClick:()=>E(!0)});case r.HeaderNavigationMenu.Secondary:return(0,e.jsx)(ke,{title:D?.text,onMenuOpenClose:g,onMenuBackClick:()=>p?.(r.HeaderNavigationMenu.Primary)});case r.HeaderNavigationMenu.Third:return(0,e.jsx)(ke,{title:f?.label,onMenuOpenClose:g,onMenuBackClick:()=>p?.(r.HeaderNavigationMenu.Secondary)});default:return null}},[b,l,p,D,A,f,g]),L=(0,a.useCallback)((d,_)=>{const R=Array.isArray(m)?Array.isArray(m[d])?m[d][_]:{}:{};R?.components?.[0]?.blockType!==r.HeaderNavigationBlockType.Links&&(F(R),p?.(r.HeaderNavigationMenu.Secondary))},[m,p]);return(0,e.jsxs)(s.Container,{className:(0,v.cn)("relative h-[56px]",i),children:[O,b&&(0,e.jsxs)("nav",{ref:S,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:T},role:"navigation","aria-label":"Mobile navigation menu",children:[l===r.HeaderNavigationMenu.Primary&&o?(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(s.BrandStrip,{data:o})}):null,l===r.HeaderNavigationMenu.Primary?(0,e.jsx)(Ke,{categories:m,onPrimaryMenuClick:L,onPrimaryNavClick:c,profileAction:J,menuData:o}):I]})]})}),Ke=({categories:t,onPrimaryMenuClick:o,profileAction:i,onPrimaryNavClick:c,menuData:u})=>{const{locale:P="us"}=(0,q.useAiuiContext)();return(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((m,l)=>(0,e.jsxs)("div",{className:"",children:[l>0||u?(0,e.jsx)("div",{className:(0,v.cn)("my-2 h-px w-full bg-[#E5E5E7]")}):null,m?.map((p,f)=>{const b=p.components?.[0]?.blockType===r.HeaderNavigationBlockType.Links;return(0,e.jsx)(ue.MenuItem,{label:p.text,href:b?(0,v.getLocalizedPath)(be(p),P,"ref=navMenu"):void 0,target:b?ve(p):void 0,onClick:()=>{const T=(t?.flat()||[])?.findIndex(y=>y?.id===t[l][f]?.id);o(l,f),c?.(p,T)},icon:p.components?.[0]?.icon},p.id)})]},`groupCategory-${l}`))}),(0,e.jsx)(Ue,{profileAction:i})]})},Ue=({profileAction:t})=>{const[o,i]=(0,a.useState)(!1),{profile:c,event:u}=(0,K.useNavContext)(),{locale:P="us"}=(0,q.useAiuiContext)();return(0,e.jsxs)("div",{className:(0,v.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":o}),children:[(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>i(!o),"aria-expanded":o,"aria-label":c?.nick_name||t?.welcome,children:[(0,e.jsxs)("div",{className:"flex items-center gap-[14px]",children:[(0,e.jsx)("div",{className:"flex size-[40px] shrink-0 items-center justify-center rounded-full bg-white",children:(0,e.jsx)(w.User,{"aria-hidden":"true"})}),(0,e.jsx)(s.Text,{html:c?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&(0,e.jsx)(w.DownArrow,{"aria-hidden":"true",className:(0,v.cn)("laptop:size-4 size-5",{"rotate-180":o})})]}),c?.email&&(0,e.jsx)("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:t?.profiles?.map(m=>(0,e.jsx)(ue.MenuItem,{label:m?.title,href:(0,v.getLocalizedPath)(m?.url,P,"ref=navMenu")},m.id))}),o&&!c?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(s.Text,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(m=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(s.Picture,{source:m.benefitIcon?.url,className:"size-4",alt:m.benefit,width:16,height:16}),(0,e.jsx)(s.Text,{html:m.benefit,className:"text-sm font-bold leading-[1.4]"})]},m.id))})]}),!c?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(s.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>u?.join?.(),children:(0,e.jsx)(s.Text,{html:t?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(s.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>u?.login?.(),children:(0,e.jsx)(s.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},We=({menuOpen:t,onMenuOpenClose:o,onMenuOpenClick:i,actions:c})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(Ne,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(de,{actions:c}),t?(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>o(),"aria-label":"Close menu","aria-expanded":"true",children:(0,e.jsx)(w.Close,{className:"size-5","aria-hidden":"true"})}):(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Open menu","aria-expanded":"false","aria-haspopup":"true",children:(0,e.jsx)(w.Menu,{className:"size-5","aria-hidden":"true"})})]})]}),Ne=()=>{const{payloadData:t,isMobile:o}=(0,K.useNavContext)(),{locale:i="us"}=(0,q.useAiuiContext)();return(0,e.jsx)("a",{href:(0,v.getLocalizedPath)("/",i,"ref=logo"),className:"hover:text-[#00CBEB] [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:o?t?.bar?.mobileLogo:t?.bar?.desktopLogo}})},de=(0,a.forwardRef)(({actions:t,activeStatus:o=!1},i)=>{const{event:c,cartCount:u}=(0,K.useNavContext)(),[P,m]=(0,a.useState)(null),l=f=>{switch(f){case r.HeaderNavigationActionBlockType.Search:return"Search";case r.HeaderNavigationActionBlockType.Cart:return`Shopping cart${u>0?` (${u} items)`:""}`;case r.HeaderNavigationActionBlockType.Profile:return"User profile";case r.HeaderNavigationActionBlockType.Livestream:return"Livestream";default:return"Action"}},p=(0,a.useCallback)((f,b)=>{switch(m(b),f?.blockType){case r.HeaderNavigationActionBlockType.Search:c?.search?.();break;case r.HeaderNavigationActionBlockType.Cart:c?.cart?.();break;case r.HeaderNavigationActionBlockType.Profile:c?.profile?.();break;case r.HeaderNavigationActionBlockType.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((f,b)=>(0,e.jsxs)("button",{className:"relative cursor-pointer border-0 bg-transparent p-0","data-tag":f?.tag||"",ref:f.blockType===r.HeaderNavigationActionBlockType.Profile?i:null,onClick:()=>p(f,b),"aria-label":l(f.blockType),"aria-pressed":o&&P===b,children:[(0,e.jsx)(s.Text,{html:f.icon,className:(0,v.cn)("size-5",{"text-brand-0":o&&P===b}),"aria-hidden":"true"}),f.blockType===r.HeaderNavigationActionBlockType.Cart&&u>0&&(0,e.jsx)("div",{className:"bg-brand-0 absolute right-[-12px] top-[calc(100%-16px)] z-[1] flex min-h-5 min-w-5 items-center justify-center rounded-full px-[2px]","aria-hidden":"true",children:(0,e.jsx)(s.Text,{html:u?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},f.id))})}),ke=({title:t,onMenuOpenClose:o,onMenuBackClick:i})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>i(),"aria-label":"Back to previous menu",children:(0,e.jsx)(w.LeftArrow,{className:"size-5","aria-hidden":"true"})}),(0,e.jsx)(s.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>o(),"aria-label":"Close menu",children:(0,e.jsx)(w.Close,{className:"size-5","aria-hidden":"true"})})]});ye.displayName="MobileNavigation",de.displayName="Actions",ge.displayName="HeaderNavigation",he.displayName="DesktopNavigation";var Fe=(0,xe.withLayout)(ge);
|
|
@@ -1 +1 @@
|
|
|
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
|
+
"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,24 +1,23 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { HeroBannerProps } from './types.js';
|
|
2
|
+
import type { HeroBannerA11yLabels, HeroBannerProps } from './types.js';
|
|
3
3
|
import 'swiper/css';
|
|
4
|
-
import 'swiper/css/navigation';
|
|
5
|
-
import 'swiper/css/pagination';
|
|
6
4
|
interface HeroBannerCarouselProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
7
5
|
data: HeroBannerProps['data'];
|
|
8
6
|
classNames?: Record<string, string>;
|
|
7
|
+
a11yLabels?: HeroBannerA11yLabels;
|
|
9
8
|
onPrimaryClick?: (data: any, e: any, id?: string) => void;
|
|
10
9
|
onSecondaryClick?: (data: any, e: any, id?: string) => void;
|
|
11
10
|
onTertiaryClick?: (data: any, e: any, id?: string) => void;
|
|
12
11
|
}
|
|
13
12
|
/**
|
|
14
|
-
* HeroBannerCarousel —
|
|
13
|
+
* HeroBannerCarousel — Swiper carousel driven by the shared useCarouselPlayback
|
|
14
|
+
* 2-state machine (AUTOPLAYING / STOPPED; hover interactions removed 2026-09-23).
|
|
15
15
|
*
|
|
16
|
-
*
|
|
17
|
-
* - DECISION-
|
|
18
|
-
* -
|
|
19
|
-
* -
|
|
20
|
-
* -
|
|
21
|
-
* - ISSUE-017: post-mount pause wins over IO rootMargin='200px' race
|
|
16
|
+
* HeroBanner-specific layers kept here on top of the hook:
|
|
17
|
+
* - DECISION-A003: ScrollLoadVideo videoRef as imperative pause/play channel
|
|
18
|
+
* - Video play-once + centered replay when STOPPED on a video frame (D6/D18)
|
|
19
|
+
* - D19 multi-theme playhead switching
|
|
20
|
+
* - hero_banner_* GA events (plan §8) fired off the hook's callbacks
|
|
22
21
|
*/
|
|
23
22
|
declare const HeroBannerCarousel: React.ForwardRefExoticComponent<HeroBannerCarouselProps & React.RefAttributes<HTMLDivElement>>;
|
|
24
23
|
export default HeroBannerCarousel;
|
|
@@ -1 +1 @@
|
|
|
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
|
+
"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,2 +1,5 @@
|
|
|
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 p=Object.create;var a=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var H=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var m=(e,r)=>{for(var o in r)a(e,o,{get:r[o],enumerable:!0})},s=(e,r,o,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let i of B(r))!M.call(e,i)&&i!==o&&a(e,i,{get:()=>r[i],enumerable:!(d=l(r,i))||d.enumerable});return e};var u=(e,r,o)=>(o=e!=null?p(H(e)):{},s(r||!e||!e.__esModule?a(o,"default",{value:e,enumerable:!0}):o,e)),T=e=>s(a({},"__esModule",{value:!0}),e);var f={};m(f,{buildPictureSource:()=>n.buildPictureSource,default:()=>t.default,resolveTierMedia:()=>n.resolveTierMedia});module.exports=T(f);var t=u(require("./HeroBanner.js")),n=require("./mediaResolver.js");
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import type { Media } from '../../types/props.js';
|
|
2
|
+
/**
|
|
3
|
+
* 5-breakpoint media tiers, mapped to the Tailwind preset boundaries:
|
|
4
|
+
* lgDesktop ≥1920 | desktop 1440-1919 | laptop 1025-1439 | tablet 768-1024 | mobile <768
|
|
5
|
+
*/
|
|
6
|
+
export type MediaTier = 'lgDesktop' | 'desktop' | 'laptop' | 'tablet' | 'mobile';
|
|
7
|
+
export type MediaKind = 'image' | 'video';
|
|
8
|
+
/**
|
|
9
|
+
* Structured per-tier media bag. `media.sources[tier]` takes precedence over
|
|
10
|
+
* the flat fields for the same tier.
|
|
11
|
+
*/
|
|
12
|
+
export interface TieredMediaSources {
|
|
13
|
+
sources?: Partial<Record<MediaTier, {
|
|
14
|
+
image?: Media;
|
|
15
|
+
video?: Media;
|
|
16
|
+
}>>;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* All media-bearing fields the resolver understands. Both HeroBannerProps['data']
|
|
20
|
+
* and HeroBannerSlideData structurally satisfy this interface.
|
|
21
|
+
*/
|
|
22
|
+
export interface TieredMediaFields {
|
|
23
|
+
/** Legacy PC tier (≥1025) — mapped to the `laptop` tier */
|
|
24
|
+
pcImage?: Media;
|
|
25
|
+
/** Legacy pad tier (768-1024) — mapped to the `tablet` tier */
|
|
26
|
+
padImage?: Media;
|
|
27
|
+
/** Legacy mobile tier (<768) — mapped to the `mobile` tier */
|
|
28
|
+
mobileImage?: Media;
|
|
29
|
+
pcVideo?: Media;
|
|
30
|
+
padVideo?: Media;
|
|
31
|
+
mobileVideo?: Media;
|
|
32
|
+
/** New-tier flat fields (CMS parity) */
|
|
33
|
+
lgDesktopImage?: Media;
|
|
34
|
+
desktopImage?: Media;
|
|
35
|
+
lgDesktopVideo?: Media;
|
|
36
|
+
desktopVideo?: Media;
|
|
37
|
+
/** Optional structured form — takes precedence over flat fields */
|
|
38
|
+
media?: TieredMediaSources;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Resolve the effective media for a tier, walking the tier fallback chain.
|
|
42
|
+
* Returns undefined when nothing in the chain resolves.
|
|
43
|
+
*/
|
|
44
|
+
export declare const resolveTierMedia: (data: TieredMediaFields, tier: MediaTier, kind: MediaKind) => Media | undefined;
|
|
45
|
+
/**
|
|
46
|
+
* Build a Picture `source` string covering all 5 tiers. Only tiers that
|
|
47
|
+
* resolve are emitted; unresolved tiers simply fall through to the next
|
|
48
|
+
* matching <source> (which the resolver chain already filled where possible).
|
|
49
|
+
* Legacy 3-field data produces output that renders pixel-identically to the
|
|
50
|
+
* legacy hand-written descriptor.
|
|
51
|
+
*/
|
|
52
|
+
export declare const buildPictureSource: (data: TieredMediaFields) => string;
|
|
53
|
+
/**
|
|
54
|
+
* SSR-safe 5-tier detection matching the Tailwind preset boundaries exactly.
|
|
55
|
+
* When no query matches (SSR / tests with all-false mock) the desktop-most
|
|
56
|
+
* tier is returned, mirroring the legacy "default to PC" behavior.
|
|
57
|
+
*/
|
|
58
|
+
export declare const useMediaTier: () => MediaTier;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";"use client";var p=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var c=(e,i)=>{for(var t in i)p(e,t,{get:i[t],enumerable:!0})},b=(e,i,t,o)=>{if(i&&typeof i=="object"||typeof i=="function")for(let r of n(i))!m.call(e,r)&&r!==t&&p(e,r,{get:()=>i[r],enumerable:!(o=l(i,r))||o.enumerable});return e};var u=e=>b(p({},"__esModule",{value:!0}),e);var x={};c(x,{buildPictureSource:()=>f,resolveTierMedia:()=>s,useMediaTier:()=>I});module.exports=u(x);var a=require("react-responsive");const M={lgDesktop:["lgDesktop","desktop","laptop","tablet","mobile"],desktop:["desktop","laptop","tablet","mobile"],laptop:["laptop","tablet","mobile"],tablet:["tablet","mobile","laptop"],mobile:["mobile","tablet","laptop"]},k={lgDesktop:["lgDesktop","desktop","laptop","tablet","mobile"],desktop:["desktop","laptop","tablet","mobile"],laptop:["laptop","tablet","mobile"],tablet:["tablet","laptop","mobile"],mobile:["mobile","tablet","laptop"]},g=(e,i,t)=>{const o=e.media?.sources?.[i]?.[t];if(o)return o;if(t==="image")switch(i){case"lgDesktop":return e.lgDesktopImage;case"desktop":return e.desktopImage;case"laptop":return e.pcImage;case"tablet":return e.padImage;case"mobile":return e.mobileImage}switch(i){case"lgDesktop":return e.lgDesktopVideo;case"desktop":return e.desktopVideo;case"laptop":return e.pcVideo;case"tablet":return e.padVideo;case"mobile":return e.mobileVideo}},s=(e,i,t)=>{const o=(t==="image"?M:k)[i];for(const r of o){const d=g(e,r,t);if(d?.url)return d}},T=[{tier:"lgDesktop"},{tier:"desktop",breakpoint:1919},{tier:"laptop",breakpoint:1439},{tier:"tablet",breakpoint:1024},{tier:"mobile",breakpoint:767}],f=e=>{const i=[];for(const{tier:t,breakpoint:o}of T){const r=s(e,t,"image")?.url;r&&i.push(o?`${r} ${o}`:r)}return i.join(", ")},I=()=>{const e=(0,a.useMediaQuery)({query:"(max-width: 767px)"}),i=(0,a.useMediaQuery)({query:"(min-width: 768px) and (max-width: 1024px)"}),t=(0,a.useMediaQuery)({query:"(min-width: 1025px) and (max-width: 1439px)"}),o=(0,a.useMediaQuery)({query:"(min-width: 1440px) and (max-width: 1919px)"});return e?"mobile":i?"tablet":t?"laptop":o?"desktop":"lgDesktop"};
|