@anker-in/headless-ui 1.3.14 → 1.3.15
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/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/cjs/biz-components/Faq/Faq.js +1 -1
- package/dist/cjs/biz-components/Faq/Faq.js.map +2 -2
- package/dist/cjs/biz-components/Faq/types.d.ts +1 -0
- package/dist/cjs/biz-components/Faq/types.js +1 -1
- package/dist/cjs/biz-components/Faq/types.js.map +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/cjs/biz-components/GraphicOverlay/GraphicOverlay.js.map +2 -2
- package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/cjs/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/utils/index.js +1 -1
- package/dist/cjs/biz-components/Listing/utils/index.js.map +2 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +1 -1
- package/dist/cjs/helpers/priceFormatting.js +1 -1
- package/dist/cjs/helpers/priceFormatting.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/esm/biz-components/Faq/Faq.js +1 -1
- package/dist/esm/biz-components/Faq/Faq.js.map +2 -2
- package/dist/esm/biz-components/Faq/types.d.ts +1 -0
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js +1 -1
- package/dist/esm/biz-components/GraphicOverlay/GraphicOverlay.js.map +2 -2
- package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
- package/dist/esm/biz-components/HeaderNavigation/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/utils/index.js +1 -1
- package/dist/esm/biz-components/Listing/utils/index.js.map +2 -2
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +1 -1
- package/dist/esm/helpers/priceFormatting.js +1 -1
- package/dist/esm/helpers/priceFormatting.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var j=Object.create;var I=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var
|
|
1
|
+
"use strict";"use client";var j=Object.create;var I=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var n in t)I(e,n,{get:t[n],enumerable:!0})},E=(e,t,n,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of z(t))!O.call(e,c)&&c!==n&&I(e,c,{get:()=>t[c],enumerable:!(d=A(t,c))||d.enumerable});return e};var h=(e,t,n)=>(n=e!=null?j(P(e)):{},E(t||!e||!e.__esModule?I(n,"default",{value:e,enumerable:!0}):n,e)),W=e=>E(I({},"__esModule",{value:!0}),e);var F={};V(F,{default:()=>U});module.exports=W(F);var i=require("react/jsx-runtime"),H=h(require("../Title/index.js")),o=require("../../helpers/utils.js"),y=h(require("../../components/picture.js")),L=h(require("../../components/button.js")),C=h(require("../SwiperBox/index.js")),D=require("../../shared/Styles.js"),r=h(require("react")),R=require("../../hooks/useExposure.js"),g=require("../../shared/trackUrlRef.js"),S=h(require("../../shared/throttle.js")),x=require("../../components/heading.js");const a="image",m="scene_banner",q=({item:e,idx:t,itemShape:n,hoverIndex:d,getRef:c,handleSwiperItemClick:T,contentWidth:p,primaryButton:u,event:f,data:b,accordionRef:N})=>{const k=d===t,w=k?8:1;return(0,R.useExposure)({current:N.current[t]},{componentType:a,componentName:m,componentTitle:e?.title,position:t+1,componentDescription:e?.subTitle}),(0,i.jsxs)("div",{style:{flex:`${w} 1 0%`,transition:"all 0.6s"},ref:$=>{$&&c(t,$)},className:(0,o.cn)("relative cursor-pointer overflow-hidden",n==="round"?"rounded-2xl":""),onMouseEnter:()=>T(t),onClick:()=>{T(t)},children:[e?.imgLink?(0,i.jsx)("a",{href:(0,g.trackUrlRef)(e.imgLink,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}`,children:(0,i.jsx)(y.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""})}):(0,i.jsx)(y.default,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||""}),(0,i.jsxs)("div",{style:{width:p},className:(0,o.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",k&&p?"opacity-100":"opacity-0"),children:[(0,i.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,i.jsx)(x.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",html:e?.title}),(0,i.jsx)(x.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",html:e?.subTitle})]}),u&&(0,i.jsxs)(L.default,{className:(0,o.cn)("mb-1.5 font-bold"),as:"a",href:(0,g.trackUrlRef)(e?.link,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${u}`,onClick:()=>f?.primaryButton?.(b,t),children:[u,(0,i.jsx)("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},t)},J=({data:e,configuration:t})=>{const n=(0,r.useRef)(null);return(0,R.useExposure)(n,{componentType:a,componentName:m,componentTitle:e?.title,position:t?.index+1,componentDescription:e?.subTitle}),(0,i.jsxs)("div",{ref:n,className:(0,o.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",t?.itemShape==="round"?"rounded-2xl":""),children:[e?.imgLink?(0,i.jsx)("a",{href:(0,g.trackUrlRef)(e.imgLink,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-title-desc-button":`${e?.title}@${e?.subTitle}`,"data-headless-nav-position":`''#${t?.index+1}`,children:(0,i.jsx)(y.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""})}):(0,i.jsx)(y.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),(0,i.jsxs)("div",{className:(0,o.cn)("absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4"),children:[(0,i.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,i.jsx)(x.Heading,{as:"h3",className:"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]",html:e?.title}),(0,i.jsx)(x.Heading,{as:"h4",className:"text-info-primary line-clamp-2 text-sm font-bold",html:e?.subTitle})]}),t?.primaryButton&&(0,i.jsx)(L.default,{as:"a",variant:"secondary","aria-label":e?.title??e?.subTitle,className:(0,o.cn)("text-info-primary text-sm font-bold"),href:(0,g.trackUrlRef)(e.link,`${a}_${m}`),"data-headless-type-name":`${a}#${m}`,"data-headless-nav-position":`''#${t?.index+1}`,"data-headless-title-desc-button":`${e?.title}#${e?.subTitle}#${t?.primaryButton}`,children:t?.primaryButton})]})]})},B=r.default.forwardRef(({data:e,autoplay:t={enabled:!1,loop:!1,interval:1500},className:n="",event:d,...c},T)=>{const[p,u]=(0,r.useState)(0),f=(0,r.useRef)(0),b=(0,r.useRef)([]),[N,k]=(0,r.useState)(0),w=(0,r.useRef)(null);(0,r.useImperativeHandle)(T,()=>w.current);const $=(l,s)=>{s&&(b.current[l]=s)};(0,r.useEffect)(()=>{const l=()=>{b.current[f.current]&&k(b.current[f.current].offsetWidth)};l();const s=(0,S.default)(l,300);return window.addEventListener("resize",s),()=>window.removeEventListener("resize",s)},[]);const M=(0,r.useCallback)(l=>{p!==l&&(u(l),f.current=l)},[e?.products,p]);return(0,r.useEffect)(()=>{let l;return t?.enabled&&(l=setInterval(()=>{u(s=>{const _=s??0;let v;if(t.loop!==!1)v=(_+1)%e?.products?.length;else if(v=_+1,v>=e?.products?.length)return v=e?.products?.length-1,l&&clearInterval(l),_;return f.current=v,v})},t?.interval)),()=>{l&&clearInterval(l)}},[t?.enabled,t?.interval,t?.loop,e?.products?.length,M]),(0,i.jsxs)("div",{...c,ref:w,children:[e?.title&&(0,i.jsx)(H.default,{data:{title:e?.title}}),(0,i.jsx)("div",{className:(0,o.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,i.jsx)("div",{className:(0,o.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",n),children:e?.products?.map((l,s)=>(0,i.jsx)(q,{item:l,idx:s,itemShape:e?.itemShape,hoverIndex:p,getRef:$,handleSwiperItemClick:M,contentWidth:N,primaryButton:e?.primaryButton,event:d,data:e,accordionRef:b},s))})}),(0,i.jsx)("div",{className:(0,o.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,i.jsx)(C.default,{className:(0,o.cn)("h-[400px] !overflow-visible",n),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:d,title:e?.title}},Slide:J,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});B.displayName="AccordionCards";var U=(0,D.withLayout)(B);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type AccordionCardsType = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /**\n * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n */\n autoplay?: {\n /**\n * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n */\n enabled: boolean\n /**\n * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n */\n loop?: boolean\n /**\n * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n */\n interval?: number\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (_v: any, _index: number) => void\n }\n}\n\nconst AccordionCardsPcItem = ({\n item,\n idx,\n itemShape,\n hoverIndex,\n getRef,\n handleSwiperItemClick,\n contentWidth,\n primaryButton,\n event,\n data,\n accordionRef,\n}: {\n item: ItemType\n idx: number\n itemShape: 'round' | 'square' | undefined\n hoverIndex: number | null\n getRef: (_idx: number, _el: HTMLDivElement) => void\n handleSwiperItemClick: (_idx: number) => void\n contentWidth: number\n primaryButton: string | undefined\n event: any\n data: AccordionCardsType['data']\n accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n\n useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n componentTitle: item?.title,\n position: idx + 1,\n componentDescription: item?.subTitle,\n })\n\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n {item?.imgLink ? (\n <a\n href={trackUrlRef(item.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n </a>\n ) : (\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n )}\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading as=\"h3\" className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n {primaryButton && (\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.subTitle,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {data?.imgLink ? (\n <a\n href={trackUrlRef(data.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n </a>\n ) : (\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n )}\n <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <h3\n className=\"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n ></h3>\n <h4\n className=\"text-info-primary line-clamp-2 text-sm font-bold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n ></h4>\n </div>\n\n {configuration?.primaryButton && (\n <Button\n as=\"a\"\n variant=\"secondary\"\n aria-label={data?.title ?? data?.subTitle}\n className={cn('text-info-primary text-sm font-bold')}\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n >\n {configuration?.primaryButton}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event, ...rest }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx) return\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [data?.products, hoverIndex]\n )\n\n useEffect(() => {\n let autoPlayTimer: NodeJS.Timeout\n if (autoplay?.enabled) {\n autoPlayTimer = setInterval(() => {\n setHoverIndex(prev => {\n const currentIndex = prev ?? 0\n let nextIndex: number\n\n if (autoplay.loop !== false) {\n // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n nextIndex = (currentIndex + 1) % data?.products?.length\n } else {\n // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n nextIndex = currentIndex + 1\n if (nextIndex >= data?.products?.length) {\n nextIndex = data?.products?.length - 1\n // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n }\n }\n\n hoverIndexRef.current = nextIndex\n return nextIndex\n })\n }, autoplay?.interval)\n }\n return () => {\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n }\n }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n return (\n <div {...rest} ref={innerRef}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => (\n <AccordionCardsPcItem\n key={idx}\n item={item}\n idx={idx}\n itemShape={data?.itemShape}\n hoverIndex={hoverIndex}\n getRef={getRef}\n handleSwiperItemClick={handleSwiperItemClick}\n contentWidth={contentWidth}\n primaryButton={data?.primaryButton}\n event={event}\n data={data}\n accordionRef={accordionRef}\n />\n ))}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n title: data?.title,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6HU,IAAAI,EAAA,6BA5HVC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAqG,oBACrGC,EAA4B,sCAC5BC,EAA4B,uCAE5BC,EAAqB,uCACrBC,EAAwB,uCAExB,MAAMC,EAAgB,QAChBC,EAAgB,eAoDhBC,EAAuB,CAAC,CAC5B,KAAAC,EACA,IAAAC,EACA,UAAAC,EACA,WAAAC,EACA,OAAAC,EACA,sBAAAC,EACA,aAAAC,EACA,cAAAC,EACA,MAAAC,EACA,KAAAC,EACA,aAAAC,CACF,IAYM,CACJ,MAAMC,EAAaR,IAAeF,EAC5BW,EAAYD,EAAa,EAAI,EAEnC,wBAAY,CAAE,QAASD,EAAa,QAAQT,CAAG,CAAE,EAAgC,CAC/E,cAAAJ,EACA,cAAAC,EACA,eAAgBE,GAAM,MACtB,SAAUC,EAAM,EAChB,qBAAsBD,GAAM,QAC9B,CAAC,KAGC,QAAC,OAEC,MAAO,CACL,KAAM,GAAGY,CAAS,QAClB,WAAY,UACd,EACA,IAAMC,GAA8B,CAC9BA,GAAIT,EAAOH,EAAKY,CAAE,CACxB,EACA,aAAW,MAAG,0CAA2CX,IAAc,QAAU,cAAgB,EAAE,EACnG,aAAc,IAAMG,EAAsBJ,CAAG,EAC7C,QAAS,IAAM,CACbI,EAAsBJ,CAAG,CAC3B,EAEC,UAAAD,GAAM,WACL,OAAC,KACC,QAAM,eAAYA,EAAK,QAAS,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACnE,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,QAAQ,GAEjE,mBAAC,EAAAc,QAAA,CACC,OAAQd,GAAM,KAAK,IACnB,UAAU,6DACV,IAAKA,GAAM,KAAK,KAAO,GACzB,EACF,KAEA,OAAC,EAAAc,QAAA,CACC,OAAQd,GAAM,KAAK,IACnB,UAAU,6DACV,IAAKA,GAAM,KAAK,KAAO,GACzB,KAEF,QAAC,OACC,MAAO,CACL,MAAOM,CACT,EACA,aAAW,MACT,oJACAK,GAAcL,EAAe,cAAgB,WAC/C,EAEA,qBAAC,OAAI,UAAU,+BACb,oBAAC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect, type RefObject } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type AccordionCardsType = Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> & {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n /**\n * \u81EA\u52A8\u64AD\u653E\u914D\u7F6E\n */\n autoplay?: {\n /**\n * \u662F\u5426\u5F00\u542F\u81EA\u52A8\u64AD\u653E\n */\n enabled: boolean\n /**\n * \u662F\u5426\u5FAA\u73AF\u64AD\u653E\n */\n loop?: boolean\n /**\n * \u81EA\u52A8\u64AD\u653E\u95F4\u9694\u65F6\u95F4\uFF0C\u5355\u4F4D\u6BEB\u79D2\n */\n interval?: number\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (_v: any, _index: number) => void\n }\n}\n\nconst AccordionCardsPcItem = ({\n item,\n idx,\n itemShape,\n hoverIndex,\n getRef,\n handleSwiperItemClick,\n contentWidth,\n primaryButton,\n event,\n data,\n accordionRef,\n}: {\n item: ItemType\n idx: number\n itemShape: 'round' | 'square' | undefined\n hoverIndex: number | null\n getRef: (_idx: number, _el: HTMLDivElement) => void\n handleSwiperItemClick: (_idx: number) => void\n contentWidth: number\n primaryButton: string | undefined\n event: any\n data: AccordionCardsType['data']\n accordionRef: React.MutableRefObject<HTMLDivElement[]>\n}) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 8 : 1\n\n useExposure({ current: accordionRef.current[idx] } as RefObject<HTMLDivElement>, {\n componentType,\n componentName,\n componentTitle: item?.title,\n position: idx + 1,\n componentDescription: item?.subTitle,\n })\n\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn('relative cursor-pointer overflow-hidden', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onClick={() => {\n handleSwiperItemClick(idx)\n }}\n >\n {item?.imgLink ? (\n <a\n href={trackUrlRef(item.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}`}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n </a>\n ) : (\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n />\n )}\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n html={item?.title}\n />\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n html={item?.subTitle}\n />\n </div>\n {primaryButton && (\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${item?.title}#${item?.subTitle}#${primaryButton}`}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: configuration?.index + 1,\n componentDescription: data?.subTitle,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {data?.imgLink ? (\n <a\n href={trackUrlRef(data.imgLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}@${data?.subTitle}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n >\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n </a>\n ) : (\n <Picture\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\n )}\n <div className={cn('absolute inset-x-0 bottom-0 overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"text-info-primary line-clamp-3 text-2xl font-bold leading-[1.2]\"\n html={data?.title}\n />\n <Heading as=\"h4\" className=\"text-info-primary line-clamp-2 text-sm font-bold\" html={data?.subTitle} />\n </div>\n\n {configuration?.primaryButton && (\n <Button\n as=\"a\"\n variant=\"secondary\"\n aria-label={data?.title ?? data?.subTitle}\n className={cn('text-info-primary text-sm font-bold')}\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-nav-position={`''#${configuration?.index + 1}`}\n data-headless-title-desc-button={`${data?.title}#${data?.subTitle}#${configuration?.primaryButton}`}\n >\n {configuration?.primaryButton}\n </Button>\n )}\n </div>\n </div>\n )\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(\n ({ data, autoplay = { enabled: false, loop: false, interval: 1500 }, className = '', event, ...rest }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\n }, [])\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx) return\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n },\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [data?.products, hoverIndex]\n )\n\n useEffect(() => {\n let autoPlayTimer: NodeJS.Timeout\n if (autoplay?.enabled) {\n autoPlayTimer = setInterval(() => {\n setHoverIndex(prev => {\n const currentIndex = prev ?? 0\n let nextIndex: number\n\n if (autoplay.loop !== false) {\n // \u9ED8\u8BA4\u5FAA\u73AF\u64AD\u653E\n nextIndex = (currentIndex + 1) % data?.products?.length\n } else {\n // \u4E0D\u5FAA\u73AF\uFF1A\u64AD\u653E\u5230\u6700\u540E\u4E00\u4E2A\u540E\u505C\u6B62\n nextIndex = currentIndex + 1\n if (nextIndex >= data?.products?.length) {\n nextIndex = data?.products?.length - 1\n // \u505C\u6B62\u81EA\u52A8\u64AD\u653E\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n return currentIndex // \u4FDD\u6301\u5728\u6700\u540E\u4E00\u4E2A\n }\n }\n\n hoverIndexRef.current = nextIndex\n return nextIndex\n })\n }, autoplay?.interval)\n }\n return () => {\n if (autoPlayTimer) {\n clearInterval(autoPlayTimer)\n }\n }\n }, [autoplay?.enabled, autoplay?.interval, autoplay?.loop, data?.products?.length, handleSwiperItemClick])\n\n return (\n <div {...rest} ref={innerRef}>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => (\n <AccordionCardsPcItem\n key={idx}\n item={item}\n idx={idx}\n itemShape={data?.itemShape}\n hoverIndex={hoverIndex}\n getRef={getRef}\n handleSwiperItemClick={handleSwiperItemClick}\n contentWidth={contentWidth}\n primaryButton={data?.primaryButton}\n event={event}\n data={data}\n accordionRef={accordionRef}\n />\n ))}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n event: event,\n title: data?.title,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nAccordionCards.displayName = 'AccordionCards'\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCardsPcItem", "item", "idx", "itemShape", "hoverIndex", "getRef", "handleSwiperItemClick", "contentWidth", "primaryButton", "event", "data", "accordionRef", "isExpanded", "flexValue", "el", "Picture", "Button", "MobileItem", "configuration", "ref", "AccordionCards", "React", "autoplay", "className", "rest", "setHoverIndex", "hoverIndexRef", "setContentWidth", "innerRef", "index", "handleResize", "throttleResize", "throttle", "autoPlayTimer", "prev", "currentIndex", "nextIndex", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var x=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var w=(t,a)=>{for(var e in a)d(t,e,{get:a[e],enumerable:!0})},f=(t,a,e,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of b(a))!q.call(t,r)&&r!==e&&d(t,r,{get:()=>a[r],enumerable:!(o=h(a,r))||o.enumerable});return t};var N=(t,a,e)=>(e=t!=null?x(F(t)):{},f(a||!t||!t.__esModule?d(e,"default",{value:t,enumerable:!0}):e,t)),C=t=>f(d({},"__esModule",{value:!0}),t);var k={};w(k,{FaqItem:()=>l,default:()=>L});module.exports=C(k);var i=require("react/jsx-runtime"),s=N(require("react")),p=require("../../components/index.js"),n=require("../../helpers/index.js"),u=require("../../shared/Styles.js");const v=s.default.forwardRef(({data:t,className:a,defaultOpenIndex:e,classNames:o={}},r)=>{const m=(0,s.useRef)(null);(0,s.useImperativeHandle)(r,()=>m.current);const g=Array.isArray(e)?e:e!==void 0?[e]:[];return(0,i.jsx)("div",{ref:m,className:(0,n.cn)(a,o.root),children:(0,i.jsx)("div",{children:t?.productData?.map((y,c)=>(0,i.jsx)(l,{data:y,defaultOpen:g.includes(c),classNames:o},c))})})});v.displayName="Faq";const l=({data:t,defaultOpen:a=!1,classNames:e={}})=>{const[o,r]=(0,s.useState)(a),m=()=>{r(!o)};return(0,i.jsx)("div",{className:(0,n.cn)("tablet:py-6 border-b border-[#E4E5E6] py-4",e.item),children:(0,i.jsxs)("div",{children:[(0,i.jsxs)("div",{onClick:m,className:(0,n.cn)("tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",e.itemHeader),children:[(0,i.jsx)(p.Heading,{as:"h3",html:t?.title,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]",e.title)}),(0,i.jsx)("div",{className:(0,n.cn)("transition-transform duration-300",e.icon),children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,n.cn)("w-[20px] transition-transform duration-300",o&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,i.jsx)("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),(0,i.jsx)("div",{className:(0,n.cn)("overflow-hidden text-[#4A4C56] transition-all duration-300",o?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0",e.content),children:(0,i.jsx)(p.Text,{html:t?.richDesc??t?.desc,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline",e.description)})})]})})};l.displayName="FaqItem";var L=(0,u.withLayout)(v);
|
|
1
|
+
"use strict";"use client";var x=Object.create;var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var w=(t,a)=>{for(var e in a)d(t,e,{get:a[e],enumerable:!0})},f=(t,a,e,o)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of b(a))!q.call(t,r)&&r!==e&&d(t,r,{get:()=>a[r],enumerable:!(o=h(a,r))||o.enumerable});return t};var N=(t,a,e)=>(e=t!=null?x(F(t)):{},f(a||!t||!t.__esModule?d(e,"default",{value:t,enumerable:!0}):e,t)),C=t=>f(d({},"__esModule",{value:!0}),t);var k={};w(k,{FaqItem:()=>l,default:()=>L});module.exports=C(k);var i=require("react/jsx-runtime"),s=N(require("react")),p=require("../../components/index.js"),n=require("../../helpers/index.js"),u=require("../../shared/Styles.js");const v=s.default.forwardRef(({data:t,className:a,defaultOpenIndex:e,classNames:o={}},r)=>{const m=(0,s.useRef)(null);(0,s.useImperativeHandle)(r,()=>m.current);const g=Array.isArray(e)?e:e!==void 0?[e]:t?.openFirst??!0?[0]:[];return(0,i.jsx)("div",{ref:m,className:(0,n.cn)(a,o.root),children:(0,i.jsx)("div",{children:t?.productData?.map((y,c)=>(0,i.jsx)(l,{data:y,defaultOpen:g.includes(c),classNames:o},c))})})});v.displayName="Faq";const l=({data:t,defaultOpen:a=!1,classNames:e={}})=>{const[o,r]=(0,s.useState)(a),m=()=>{r(!o)};return(0,i.jsx)("div",{className:(0,n.cn)("tablet:py-6 border-b border-[#E4E5E6] py-4",e.item),children:(0,i.jsxs)("div",{children:[(0,i.jsxs)("div",{onClick:m,className:(0,n.cn)("tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4",e.itemHeader),children:[(0,i.jsx)(p.Heading,{as:"h3",html:t?.title,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]",e.title)}),(0,i.jsx)("div",{className:(0,n.cn)("transition-transform duration-300",e.icon),children:(0,i.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",className:(0,n.cn)("w-[20px] transition-transform duration-300",o&&"rotate-180"),width:"20",height:"21",viewBox:"0 0 20 21",fill:"none",children:(0,i.jsx)("path",{d:"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z",fill:"#1D1D1F"})})})]}),(0,i.jsx)("div",{className:(0,n.cn)("overflow-hidden text-[#4A4C56] transition-all duration-300",o?"mt-2 max-h-[500px] opacity-100":"max-h-0 opacity-0",e.content),children:(0,i.jsx)(p.Text,{html:t?.richDesc??t?.desc,className:(0,n.cn)("desktop:text-base lg-desktop:text-lg [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline",e.description)})})]})})};l.displayName="FaqItem";var L=(0,u.withLayout)(v);
|
|
2
2
|
//# sourceMappingURL=Faq.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Faq/Faq.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType, FaqSemanticName } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(\n ({ data, className, defaultOpenIndex, classNames = {} }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n // \u5C06 defaultOpenIndex \u8F6C\u6362\u4E3A\u6570\u7EC4\u65B9\u4FBF\u5224\u65AD\n const openIndexes = Array.isArray(defaultOpenIndex)\n ? defaultOpenIndex\n : defaultOpenIndex !== undefined\n ? [defaultOpenIndex]\n : []\n\n return (\n <div ref={innerRef} className={cn(className, classNames.root)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} defaultOpen={openIndexes.includes(index)} classNames={classNames} />\n ))}\n </div>\n </div>\n )\n }\n)\n\nFaq.displayName = 'Faq'\n\ninterface FaqItemProps {\n data: ItemType\n defaultOpen?: boolean\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n\nconst FaqItem = ({ data, defaultOpen = false, classNames = {} }: FaqItemProps) => {\n const [open, setOpen] = useState(defaultOpen)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className={cn('tablet:py-6 border-b border-[#E4E5E6] py-4', classNames.item)}>\n <div>\n <div\n onClick={handleToggle}\n className={cn(\n 'tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4',\n classNames.itemHeader\n )}\n >\n <Heading\n as=\"h3\"\n html={data?.title}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]',\n classNames.title\n )}\n />\n <div className={cn('transition-transform duration-300', classNames.icon)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden text-[#4A4C56] transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0',\n classNames.content\n )}\n >\n <Text\n html={data?.richDesc ?? data?.desc}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline',\n classNames.description\n )}\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState } from 'react'\nimport type { FaqProps, FaqItem as ItemType, FaqSemanticName } from './types.js'\nimport { Text, Heading } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\n\nconst Faq = React.forwardRef<HTMLDivElement, FaqProps>(\n ({ data, className, defaultOpenIndex, classNames = {} }, ref) => {\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current!)\n\n // \u5C06 defaultOpenIndex \u8F6C\u6362\u4E3A\u6570\u7EC4\u65B9\u4FBF\u5224\u65AD\n const openIndexes = Array.isArray(defaultOpenIndex)\n ? defaultOpenIndex\n : defaultOpenIndex !== undefined\n ? [defaultOpenIndex]\n : (data?.openFirst ?? true)\n ? [0]\n : []\n\n return (\n <div ref={innerRef} className={cn(className, classNames.root)}>\n <div>\n {data?.productData?.map((item: any, index: number) => (\n <FaqItem key={index} data={item} defaultOpen={openIndexes.includes(index)} classNames={classNames} />\n ))}\n </div>\n </div>\n )\n }\n)\n\nFaq.displayName = 'Faq'\n\ninterface FaqItemProps {\n data: ItemType\n defaultOpen?: boolean\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n\nconst FaqItem = ({ data, defaultOpen = false, classNames = {} }: FaqItemProps) => {\n const [open, setOpen] = useState(defaultOpen)\n\n const handleToggle = () => {\n setOpen(!open)\n }\n\n return (\n <div className={cn('tablet:py-6 border-b border-[#E4E5E6] py-4', classNames.item)}>\n <div>\n <div\n onClick={handleToggle}\n className={cn(\n 'tablet:gap-[128px] flex cursor-pointer items-center justify-between gap-4',\n classNames.itemHeader\n )}\n >\n <Heading\n as=\"h3\"\n html={data?.title}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg text-info-primary text-sm font-bold leading-[1.4]',\n classNames.title\n )}\n />\n <div className={cn('transition-transform duration-300', classNames.icon)}>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n className={cn('w-[20px] transition-transform duration-300', open && 'rotate-180')}\n width=\"20\"\n height=\"21\"\n viewBox=\"0 0 20 21\"\n fill=\"none\"\n >\n <path\n d=\"M14.4111 7.41107C14.7365 7.08563 15.264 7.08563 15.5895 7.41107C15.9149 7.73651 15.9149 8.26402 15.5895 8.58946L10.5895 13.5895C10.264 13.9149 9.73651 13.9149 9.41107 13.5895L4.41107 8.58946C4.08563 8.26402 4.08563 7.73651 4.41107 7.41107C4.73651 7.08563 5.26402 7.08563 5.58946 7.41107L10.0003 11.8219L14.4111 7.41107Z\"\n fill=\"#1D1D1F\"\n />\n </svg>\n </div>\n </div>\n\n {/* \u5E26\u8FC7\u6E21\u7684\u5185\u5BB9\u533A\u57DF */}\n <div\n className={cn(\n 'overflow-hidden text-[#4A4C56] transition-all duration-300',\n open ? 'mt-2 max-h-[500px] opacity-100' : 'max-h-0 opacity-0',\n classNames.content\n )}\n >\n <Text\n html={data?.richDesc ?? data?.desc}\n className={cn(\n 'desktop:text-base lg-desktop:text-lg [&_a]:text-brand-0 text-sm font-bold leading-[1.4] [&_a]:underline',\n classNames.description\n )}\n />\n </div>\n </div>\n </div>\n )\n}\n\nFaqItem.displayName = 'FaqItem'\n\nexport default withLayout(Faq)\nexport { FaqItem }\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,YAAAC,IAAA,eAAAC,EAAAJ,GAyBY,IAAAK,EAAA,6BAxBZC,EAA6D,oBAE7DC,EAA8B,qCAC9BC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAM,EAAAC,QAAM,WAChB,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,iBAAAC,EAAkB,WAAAC,EAAa,CAAC,CAAE,EAAGC,IAAQ,CAC/D,MAAMC,KAAW,UAAuB,IAAI,KAC5C,uBAAoBD,EAAK,IAAMC,EAAS,OAAQ,EAGhD,MAAMC,EAAc,MAAM,QAAQJ,CAAgB,EAC9CA,EACAA,IAAqB,OACnB,CAACA,CAAgB,EAChBF,GAAM,WAAa,GAClB,CAAC,CAAC,EACF,CAAC,EAET,SACE,OAAC,OAAI,IAAKK,EAAU,aAAW,MAAGJ,EAAWE,EAAW,IAAI,EAC1D,mBAAC,OACE,SAAAH,GAAM,aAAa,IAAI,CAACO,EAAWC,OAClC,OAAClB,EAAA,CAAoB,KAAMiB,EAAM,YAAaD,EAAY,SAASE,CAAK,EAAG,WAAYL,GAAzEK,CAAqF,CACpG,EACH,EACF,CAEJ,CACF,EAEAV,EAAI,YAAc,MAQlB,MAAMR,EAAU,CAAC,CAAE,KAAAU,EAAM,YAAAS,EAAc,GAAO,WAAAN,EAAa,CAAC,CAAE,IAAoB,CAChF,KAAM,CAACO,EAAMC,CAAO,KAAI,YAASF,CAAW,EAEtCG,EAAe,IAAM,CACzBD,EAAQ,CAACD,CAAI,CACf,EAEA,SACE,OAAC,OAAI,aAAW,MAAG,6CAA8CP,EAAW,IAAI,EAC9E,oBAAC,OACC,qBAAC,OACC,QAASS,EACT,aAAW,MACT,4EACAT,EAAW,UACb,EAEA,oBAAC,WACC,GAAG,KACH,KAAMH,GAAM,MACZ,aAAW,MACT,yFACAG,EAAW,KACb,EACF,KACA,OAAC,OAAI,aAAW,MAAG,oCAAqCA,EAAW,IAAI,EACrE,mBAAC,OACC,MAAM,6BACN,aAAW,MAAG,6CAA8CO,GAAQ,YAAY,EAChF,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OAEL,mBAAC,QACC,EAAE,kUACF,KAAK,UACP,EACF,EACF,GACF,KAGA,OAAC,OACC,aAAW,MACT,6DACAA,EAAO,iCAAmC,oBAC1CP,EAAW,OACb,EAEA,mBAAC,QACC,KAAMH,GAAM,UAAYA,GAAM,KAC9B,aAAW,MACT,0GACAG,EAAW,WACb,EACF,EACF,GACF,EACF,CAEJ,EAEAb,EAAQ,YAAc,UAEtB,IAAOC,KAAQ,cAAWO,CAAG",
|
|
6
6
|
"names": ["Faq_exports", "__export", "FaqItem", "Faq_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "Faq", "React", "data", "className", "defaultOpenIndex", "classNames", "ref", "innerRef", "openIndexes", "item", "index", "defaultOpen", "open", "setOpen", "handleToggle"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var o=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var c=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of o(e))!m.call(t,a)&&a!==n&&i(t,a,{get:()=>e[a],enumerable:!(r=s(e,a))||r.enumerable});return t};var p=t=>c(i({},"__esModule",{value:!0}),t);var d={};module.exports=p(d);
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Faq/types.ts"],
|
|
4
|
-
"sourcesContent": ["import type { Media } from '../../types/props.js'\n\nexport interface FaqItem {\n title: string\n desc: string\n richDesc: string\n img: Media\n}\n\n/** Faq \u7EC4\u4EF6\u8BED\u4E49\u5316\u6837\u5F0F\u540D\u79F0 */\nexport type FaqSemanticName = 'root' | 'item' | 'itemHeader' | 'title' | 'icon' | 'content' | 'description'\n\nexport interface FaqProps {\n data: {\n productData: FaqItem[]\n }\n className?: string\n /** \u9ED8\u8BA4\u5C55\u5F00\u7684 item \u7D22\u5F15\uFF0C\u53EF\u4EE5\u662F\u5355\u4E2A\u6570\u5B57\u6216\u6570\u5B57\u6570\u7EC4 */\n defaultOpenIndex?: number | number[]\n /** \u8BED\u4E49\u5316\u6837\u5F0F\u900F\u4F20 */\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { Media } from '../../types/props.js'\n\nexport interface FaqItem {\n title: string\n desc: string\n richDesc: string\n img: Media\n}\n\n/** Faq \u7EC4\u4EF6\u8BED\u4E49\u5316\u6837\u5F0F\u540D\u79F0 */\nexport type FaqSemanticName = 'root' | 'item' | 'itemHeader' | 'title' | 'icon' | 'content' | 'description'\n\nexport interface FaqProps {\n data: {\n productData: FaqItem[]\n openFirst?: boolean\n }\n className?: string\n /** \u9ED8\u8BA4\u5C55\u5F00\u7684 item \u7D22\u5F15\uFF0C\u53EF\u4EE5\u662F\u5355\u4E2A\u6570\u5B57\u6216\u6570\u5B57\u6570\u7EC4 */\n defaultOpenIndex?: number | number[]\n /** \u8BED\u4E49\u5316\u6837\u5F0F\u900F\u4F20 */\n classNames?: Partial<Record<FaqSemanticName, string>>\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["types_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var D=Object.create;var B=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var q=(a,t)=>{for(var s in t)B(a,s,{get:t[s],enumerable:!0})},z=(a,t,s,w)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of A(t))!Y.call(a,i)&&i!==s&&B(a,i,{get:()=>t[i],enumerable:!(w=H(t,i))||w.enumerable});return a};var M=(a,t,s)=>(s=a!=null?D(Q(a)):{},z(t||!a||!a.__esModule?B(s,"default",{value:a,enumerable:!0}):s,a)),Z=a=>z(B({},"__esModule",{value:!0}),a);var J={};q(J,{default:()=>F});module.exports=Z(J);var e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var D=Object.create;var B=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var q=(a,t)=>{for(var s in t)B(a,s,{get:t[s],enumerable:!0})},z=(a,t,s,w)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of A(t))!Y.call(a,i)&&i!==s&&B(a,i,{get:()=>t[i],enumerable:!(w=H(t,i))||w.enumerable});return a};var M=(a,t,s)=>(s=a!=null?D(Q(a)):{},z(t||!a||!a.__esModule?B(s,"default",{value:a,enumerable:!0}):s,a)),Z=a=>z(B({},"__esModule",{value:!0}),a);var J={};q(J,{default:()=>F});module.exports=Z(J);var e=require("react/jsx-runtime"),o=M(require("react")),O=require("react-responsive"),S=require("../../shared/Styles.js"),P=M(require("../../components/picture.js")),V=M(require("../../components/button.js")),I=require("../../components/heading.js"),U=require("../VideoModal/index.js"),p=require("../../helpers/utils.js"),R=M(require("../SwiperBox/index.js")),L=require("../../shared/mimeType.js"),E=require("../../hooks/useExposure.js"),T=require("../../shared/trackUrlRef.js"),_=require("../AiuiProvider/index.js");const b="image",v="p1_banner",j=({data:a,configuration:t,jIndex:s})=>{const[w,i]=(0,o.useState)(!1),g=(0,O.useMediaQuery)({query:"(max-width: 768px)"}),m=(0,o.useRef)(null),x=()=>{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,E.useExposure)(m,{componentType:b,componentName:v,position:s,componentTitle:a.title,componentDescription:a.description,navigation:t?.activeTab}),(0,o.useEffect)(()=>{i(g)},[g]);const{theme:k="light",title:r,description:d,imageUrl:l,primaryButton:u,secondaryButton:h,imageMobileUrl:y,blockLink:f,video:c,youtubeId:n,isYouTube:$}=a,N="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",x(),{"rounded-2xl":t?.shape==="rounded","aiui-dark":k==="dark","h-[400px]":w},"text-info-primary"),ref:m,children:[f&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,T.trackUrlRef)((0,p.getLocalizedPath)(f||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${r}#${d}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,"aria-hidden":"true",tabIndex:-1}),(0,e.jsxs)("div",{className:"absolute inset-0",children:[(0,L.isVideo)(l?.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:l?.url,type:"video/mp4"})}):(0,e.jsx)(P.default,{source:l?.url,alt:l?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${l?.width}/${l?.height}`}}),(0,L.isVideo)(y?.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:y?.url,type:"video/mp4"})}):(0,e.jsx)(P.default,{source:y?.url||l?.url,alt:y?.alt||l?.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 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:r}),(0,e.jsx)(I.Heading,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:d})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[h&&h.text&&(0,e.jsxs)(V.default,{"aria-label":r??d,className:(0,p.cn)(N,"link-left"),variant:"secondary",as:"a",href:(0,T.trackUrlRef)((0,p.getLocalizedPath)(h.link||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${r}#${d}#${h?.text}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,children:[h.text,(0,e.jsx)("span",{className:"sr-only",children:r??d})]}),u&&u.text&&(0,e.jsx)(V.default,{"aria-label":r??d,className:(0,p.cn)(N,"link-right"),variant:"primary",as:"a",href:(0,T.trackUrlRef)((0,p.getLocalizedPath)(u.link||"",t?.locale||"us"),`${b}_${v}`),"data-headless-type-name":`${b}#${v}`,"data-headless-title-desc-button":`${r}#${d}#${u.text}`,"data-headless-nav-position":`${t?.activeTab}#${s}`,children:u.text})]})]})]}),(0,e.jsx)("div",{children:(0,e.jsx)("div",{className:"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]",children:(c?.url||n)&&(0,e.jsx)("button",{onClick:()=>{t?.onVideoPlayBtnClick?.(c?.url||n,$)},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:k==="dark"?"black":"white",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z"})})})})})]})},G=o.default.forwardRef((a,t)=>{const{data:s,className:w,...i}=a,{shape:g,items:m=[]}=s,[x,k]=(0,o.useState)(!1),[r,d]=(0,o.useState)(""),[l,u]=(0,o.useState)(""),{locale:h="us"}=(0,_.useAiuiContext)(),y=(c,n)=>{k(!0),n?u?.(c||""):d?.(c||"")},f=c=>{const n=m?.length,$=n>3,N=n>2,C=n>1;switch(!0){case c>=1440:case c>=1024:return $?3:n;case c>=768:return $||N?2.3:C?2:1;default:return C?1.2:1}};return(0,e.jsxs)("section",{"data-ui-component-id":"GraphicOverlay",ref:t,...i,className:(0,p.cn)("graphicOverlayBlock text-info-primary ",w),children:[m&&m.length>0?(0,e.jsx)(R.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:m||[],configuration:{shape:g,num:m.length,locale:h,onVideoPlayBtnClick:y}},Slide:j,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:f(374)},768:{spaceBetween:16,freeMode:!1,slidesPerView:f(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:f(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:f(1440)}}}):null,x&&(0,e.jsx)(U.VideoModal,{visible:x,youTubeId:l,videoUrl:r,onCloseModal:()=>k(!1)})]})});G.displayName="GraphicOverlayBlock";var F=(0,S.withLayout)(G);
|
|
2
2
|
//# sourceMappingURL=GraphicOverlay.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/GraphicOverlay/GraphicOverlay.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[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]'\n case 3:\n 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]'\n default:\n 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]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n ></a>\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n <div\n className={cn(\n 'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n {\n 'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n <div>\n <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n {(video?.url || youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n const { data, className, ...rest } = props\n const { shape, items = [] } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n\n const handleSwiperShow = (width: number) => {\n const len = items?.length\n const isShow = len > 3\n const isMiddle = len > 2\n const isMobile = len > 1\n\n switch (true) {\n case width >= 1440:\n case width >= 1024:\n return isShow ? 3 : len\n case width >= 768:\n if (isShow || isMiddle) {\n return 2.3\n }\n return isMobile ? 2 : 1\n default:\n return isMobile ? 1.2 : 1\n }\n }\n\n return (\n <section\n data-ui-component-id=\"GraphicOverlay\"\n ref={ref}\n {...rest}\n className={cn('graphicOverlayBlock text-info-primary ', className)}\n >\n {items && items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: items || [],\n configuration: {\n shape: shape,\n num: items.length,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(374),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n ) : null}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { GraphicOverlayProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { cn, getLocalizedPath } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({\n data: item,\n configuration,\n jIndex,\n}: {\n data: Item\n configuration?: any\n jIndex?: number\n spanType?: string\n}) => {\n const [isMobile, setIsMobile] = useState<boolean>(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[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]'\n case 3:\n 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]'\n default:\n 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]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const {\n theme = 'light',\n title,\n description,\n imageUrl,\n primaryButton,\n secondaryButton,\n imageMobileUrl,\n blockLink,\n video,\n youtubeId,\n isYouTube,\n } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n handleAspect(),\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[400px]': isMobile,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(\n getLocalizedPath(blockLink || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n aria-hidden=\"true\"\n tabIndex={-1}\n ></a>\n )}\n <div className=\"absolute inset-0\">\n {isVideo(imageUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block hidden h-full overflow-hidden\">\n <source src={imageUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageUrl?.url}\n alt={imageUrl?.alt || ''}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n )}\n {isVideo(imageMobileUrl?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden block h-full overflow-hidden\">\n <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n )}\n <div\n className={cn(\n 'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n {\n 'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n }\n )}\n >\n <div className=\"flex flex-col gap-1\">\n <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n <Heading\n as=\"h4\"\n className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n html={description}\n />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-left')}\n variant=\"secondary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(secondaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${secondaryButton?.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {secondaryButton.text}\n <span className=\"sr-only\">{title ?? description}</span>\n </Button>\n )}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? description}\n className={cn(lgButtonSize, 'link-right')}\n variant=\"primary\"\n as=\"a\"\n href={trackUrlRef(\n getLocalizedPath(primaryButton.link || '', configuration?.locale || 'us'),\n `${componentType}_${componentName}`\n )}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n data-headless-nav-position={`${configuration?.activeTab}#${jIndex}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n </div>\n <div>\n <div className=\"laptop:bottom-[32px] laptop:right-[32px] absolute bottom-[16px] right-[16px]\">\n {(video?.url || youtubeId) && (\n <button\n onClick={() => {\n configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n }}\n className=\"laptop:size-12 hover:bg-current/75 bg-info-primary flex size-8 items-center justify-center rounded-full opacity-80\"\n >\n <svg\n width=\"12\"\n height=\"14\"\n viewBox=\"0 0 12 14\"\n fill={theme === 'dark' ? 'black' : 'white'}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M12 7L0 14L0 0L12 7Z\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst GraphicOverlay = React.forwardRef<HTMLDivElement, GraphicOverlayProps>((props, ref) => {\n const { data, className, ...rest } = props\n const { shape, items = [] } = data\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const { locale = 'us' } = useAiuiContext()\n\n const handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n setVisible(true)\n if (isYouTube) {\n setYouTubeId?.(url || '')\n } else {\n setVideoUrl?.(url || '')\n }\n }\n\n const handleSwiperShow = (width: number) => {\n const len = items?.length\n const isShow = len > 3\n const isMiddle = len > 2\n const isMobile = len > 1\n\n switch (true) {\n case width >= 1440:\n case width >= 1024:\n return isShow ? 3 : len\n case width >= 768:\n if (isShow || isMiddle) {\n return 2.3\n }\n return isMobile ? 2 : 1\n default:\n return isMobile ? 1.2 : 1\n }\n }\n\n return (\n <section\n data-ui-component-id=\"GraphicOverlay\"\n ref={ref}\n {...rest}\n className={cn('graphicOverlayBlock text-info-primary ', className)}\n >\n {items && items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{\n list: items || [],\n configuration: {\n shape: shape,\n num: items.length,\n locale,\n onVideoPlayBtnClick: handleVideoPlayBtnClick,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(374),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n ) : null}\n {visible && (\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n videoUrl={videoUrl}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </section>\n )\n})\n\nGraphicOverlay.displayName = 'GraphicOverlayBlock'\n\nexport default withLayout(GraphicOverlay)\nexport type { GraphicOverlayProps }\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFQ,IAAAI,EAAA,6BAzFRC,EAAmD,oBACnDC,EAA8B,4BAE9BC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAA2B,kCAC3BC,EAAqC,kCACrCC,EAAsB,oCACtBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAA+B,oCAE/B,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CACjB,KAAMC,EACN,cAAAC,EACA,OAAAC,CACF,IAKM,CACJ,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAkB,EAAK,EACjDC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DC,KAAM,UAAuB,IAAI,EAEjCC,EAAe,IAAM,CACzB,OAAQN,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,KAEA,eAAYK,EAAK,CACf,cAAeT,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,KAED,aAAU,IAAM,CACdG,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CACJ,MAAAG,EAAQ,QACR,MAAAC,EACA,YAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,MAAAC,EACA,UAAAC,EACA,UAAAC,CACF,EAAIlB,EACEmB,EAAe,mFAErB,SACE,QAAC,OACC,aAAW,MACT,kFACAZ,EAAa,EACb,CACE,cAAeN,GAAe,QAAU,UACxC,YAAaO,IAAU,OACvB,YAAaL,CACf,EACA,mBACF,EACA,IAAKG,EAEJ,UAAAS,MACC,OAAC,KACC,UAAU,wBACV,QAAM,kBACJ,oBAAiBA,GAAa,GAAId,GAAe,QAAU,IAAI,EAC/D,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGW,CAAK,IAAIC,CAAW,GACxD,6BAA4B,GAAGT,GAAe,SAAS,IAAIC,CAAM,GACjE,cAAY,OACZ,SAAU,GACX,KAEH,QAAC,OAAI,UAAU,mBACZ,wBAAQS,GAAU,QAAQ,KACzB,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6CAC/C,mBAAC,UAAO,IAAKA,GAAU,IAAK,KAAK,YAAY,EAC/C,KAEA,OAAC,EAAAS,QAAA,CACC,OAAQT,GAAU,IAClB,IAAKA,GAAU,KAAO,GACtB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,KAED,WAAQG,GAAgB,QAAQ,KAC/B,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,6CAC/C,mBAAC,UAAO,IAAKA,GAAgB,IAAK,KAAK,YAAY,EACrD,KAEA,OAAC,EAAAM,QAAA,CACC,OAAQN,GAAgB,KAAOH,GAAU,IACzC,IAAKG,GAAgB,KAAOH,GAAU,KAAO,GAC7C,UAAU,6CACV,aAAa,kDACf,KAEF,QAAC,OACC,aAAW,MACT,wHACA,CACE,4DAA6DX,GAAM,QAAU,MAC/E,CACF,EAEA,qBAAC,OAAI,UAAU,sBACb,oBAAC,WAAQ,KAAM,EAAG,GAAG,KAAK,UAAU,aAAa,KAAMS,EAAO,KAC9D,OAAC,WACC,GAAG,KACH,UAAU,uFACV,KAAMC,EACR,GACF,KACA,QAAC,OAAI,UAAU,8BACZ,UAAAG,GAAmBA,EAAgB,SAClC,QAAC,EAAAQ,QAAA,CACC,aAAYZ,GAASC,EACrB,aAAW,MAAGS,EAAc,WAAW,EACvC,QAAQ,YACR,GAAG,IACH,QAAM,kBACJ,oBAAiBN,EAAgB,MAAQ,GAAIZ,GAAe,QAAU,IAAI,EAC1E,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGW,CAAK,IAAIC,CAAW,IAAIG,GAAiB,IAAI,GACjF,6BAA4B,GAAGZ,GAAe,SAAS,IAAIC,CAAM,GAEhE,UAAAW,EAAgB,QACjB,OAAC,QAAK,UAAU,UAAW,SAAAJ,GAASC,EAAY,GAClD,EAEDE,GAAiBA,EAAc,SAC9B,OAAC,EAAAS,QAAA,CACC,aAAYZ,GAASC,EACrB,aAAW,MAAGS,EAAc,YAAY,EACxC,QAAQ,UACR,GAAG,IACH,QAAM,kBACJ,oBAAiBP,EAAc,MAAQ,GAAIX,GAAe,QAAU,IAAI,EACxE,GAAGJ,CAAa,IAAIC,CAAa,EACnC,EACA,0BAAyB,GAAGD,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGW,CAAK,IAAIC,CAAW,IAAIE,EAAc,IAAI,GAC9E,6BAA4B,GAAGX,GAAe,SAAS,IAAIC,CAAM,GAEhE,SAAAU,EAAc,KACjB,GAEJ,GACF,GACF,KACA,OAAC,OACC,mBAAC,OAAI,UAAU,+EACX,UAAAI,GAAO,KAAOC,OACd,OAAC,UACC,QAAS,IAAM,CACbhB,GAAe,sBAAsBe,GAAO,KAAOC,EAAWC,CAAS,CACzE,EACA,UAAU,sHAEV,mBAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAMV,IAAU,OAAS,QAAU,QACnC,MAAM,6BAEN,mBAAC,QAAK,EAAE,uBAAuB,EACjC,EACF,EAEJ,EACF,GACF,CAEJ,EAEMc,EAAiB,EAAAC,QAAM,WAAgD,CAACC,EAAOlB,IAAQ,CAC3F,KAAM,CAAE,KAAAmB,EAAM,UAAAC,EAAW,GAAGC,CAAK,EAAIH,EAC/B,CAAE,MAAAI,EAAO,MAAAC,EAAQ,CAAC,CAAE,EAAIJ,EACxB,CAACK,EAASC,CAAU,KAAI,YAAkB,EAAK,EAC/C,CAACC,EAAUC,CAAW,KAAI,YAAiB,EAAE,EAC7C,CAACC,EAAWC,CAAY,KAAI,YAAiB,EAAE,EAC/C,CAAE,OAAAC,EAAS,IAAK,KAAI,kBAAe,EAEnCC,EAA0B,CAACC,EAAapB,IAAuB,CACnEa,EAAW,EAAI,EACXb,EACFiB,IAAeG,GAAO,EAAE,EAExBL,IAAcK,GAAO,EAAE,CAE3B,EAEMC,EAAoBC,GAAkB,CAC1C,MAAMC,EAAMZ,GAAO,OACba,EAASD,EAAM,EACfE,EAAWF,EAAM,EACjBtC,EAAWsC,EAAM,EAEvB,OAAQ,GAAM,CACZ,KAAKD,GAAS,KACd,KAAKA,GAAS,KACZ,OAAOE,EAAS,EAAID,EACtB,KAAKD,GAAS,IACZ,OAAIE,GAAUC,EACL,IAEFxC,EAAW,EAAI,EACxB,QACE,OAAOA,EAAW,IAAM,CAC5B,CACF,EAEA,SACE,QAAC,WACC,uBAAqB,iBACrB,IAAKG,EACJ,GAAGqB,EACJ,aAAW,MAAG,yCAA0CD,CAAS,EAEhE,UAAAG,GAASA,EAAM,OAAS,KACvB,OAAC,EAAAe,QAAA,CACC,UAAU,oBACV,GAAI,2BACJ,KAAM,CACJ,KAAMf,GAAS,CAAC,EAChB,cAAe,CACb,MAAOD,EACP,IAAKC,EAAM,OACX,OAAAO,EACA,oBAAqBC,CACvB,CACF,EACA,MAAOtC,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAewC,EAAiB,GAAG,CACrC,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,GAAG,CACrC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAiB,IAAI,CACtC,CACF,EACF,EACE,KACHT,MACC,OAAC,cACC,QAASA,EACT,UAAWI,EACX,SAAUF,EACV,aAAc,IAAMD,EAAW,EAAK,EACtC,GAEJ,CAEJ,CAAC,EAEDT,EAAe,YAAc,sBAE7B,IAAOzC,KAAQ,cAAWyC,CAAc",
|
|
6
6
|
"names": ["GraphicOverlay_exports", "__export", "GraphicOverlay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_VideoModal", "import_utils", "import_SwiperBox", "import_mimeType", "import_useExposure", "import_trackUrlRef", "import_AiuiProvider", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "Picture", "Button", "GraphicOverlay", "React", "props", "data", "className", "rest", "shape", "items", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "locale", "handleVideoPlayBtnClick", "url", "handleSwiperShow", "width", "len", "isShow", "isMiddle", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var Me=Object.create;var Q=Object.defineProperty;var Se=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var De=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var Te=(n,r)=>{for(var i in r)Q(n,i,{get:r[i],enumerable:!0})},ie=(n,r,i,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of Pe(r))!Ee.call(n,p)&&p!==i&&Q(n,p,{get:()=>r[p],enumerable:!(u=Se(r,p))||u.enumerable});return n};var V=(n,r,i)=>(i=n!=null?Me(De(n)):{},ie(r||!n||!n.__esModule?Q(i,"default",{value:n,enumerable:!0}):i,n)),He=n=>ie(Q({},"__esModule",{value:!0}),n);var Ie={};Te(Ie,{default:()=>Re});module.exports=He(Ie);var e=require("react/jsx-runtime"),t=require("react"),l=require("../../components/index.js"),me=require("../../shared/Styles.js"),y=require("../../helpers/utils.js"),j=V(require("./NavProvider.js")),o=require("./types.js"),pe=V(require("jump.js")),X=require("@gsap/react"),Z=require("gsap"),C=require("./withCategory.js"),w=require("./icons/index.js"),fe=V(require("../NavigationSearch/index.js")),be=require("./ResourceSidebarDropdown.js"),ve=require("./MobileResourceSidebarMenu.js"),ge=require("./SidebarDropdown.js"),ee=require("./useScrollLock.js"),he=require("./MulticolDropdown.js"),ye=require("./SupportsDropdown.js"),Ne=require("./MobileSidebarMenu.js"),ke=require("./MobileSupportMenu.js"),xe=require("./MobileMulticolMenu.js"),te=require("./MobileMenuComponents.js"),ae=require("../AiuiProvider/index.js"),Ce=V(require("../../shared/throttle.js"));const le=(0,t.forwardRef)((n,r)=>{const{data:{header:i}={},buildProps:u,event:p,profile:h,theme:s="light",isTop:c=!1,searchResult:D,onSearch:m,isSearching:N,keywords:W,onPrimaryNavClick:k,onSeriesProductClick:b,onSidebarNavClick:G,headerId:L,cartCount:I,menuData:z,..._}=n,[S,B]=(0,t.useState)(!1),[F,P]=(0,t.useState)(!1),[v,E]=(0,t.useState)(!1),[J,A]=(0,t.useState)(!1),g=(0,t.useRef)(null),T=(0,t.useRef)(null),H=()=>{const x=document?.querySelector("body")?.offsetWidth||0;A(x<=1440)};(0,t.useEffect)(()=>(H(),window.addEventListener("resize",H),()=>{window.removeEventListener("resize",H)}),[]),(0,t.useImperativeHandle)(r,()=>T.current),(0,t.useEffect)(()=>{T.current&&c&&(0,pe.default)(T.current,{duration:0,offset:T.current?.getBoundingClientRect()?.bottom||0})},[c]),(0,t.useEffect)(()=>{if(c){P(!1),E(!1);return}let x=0,U=0,$=0;const R=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,K=R();x=K,P(K>300),E(K>30);const a=(0,Ce.default)(()=>{const d=R(),f=d-x;E(d>30),f>0?(U=0,$+=f,$>=300&&d>300&&P(!0)):f<0&&($=0,U+=Math.abs(f),U>=300&&(P(!1),U=0)),x=d},100);return window.addEventListener("scroll",a,{passive:!0}),()=>window.removeEventListener("scroll",a)},[c]),(0,t.useEffect)(()=>{p&&(p.search=()=>B(!0))},[p]),(0,X.useGSAP)(()=>{g?.current&&S&&Z.gsap.fromTo(g.current,{height:0},{height:"auto",duration:.3})},[S]),(0,ee.useScrollLock)(S);const ne=(0,t.useMemo)(()=>i?.bar?.actions?.find(x=>x?.blockType===o.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[i]);return(0,e.jsx)(j.default,{buildProps:u,profile:h,isMobile:J,event:p,payloadData:i,onSidebarNavClick:G,onSeriesProductClick:b,cartCount:I,children:(0,e.jsx)("header",{..._,id:L||"header","data-ui-component-id":"HeaderNavigation",className:c?"relative z-[100] bg-white":(0,y.cn)("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":F}),ref:T,children:(0,e.jsxs)("div",{className:(0,y.cn)("hover:bg-white hover:text-black",s==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!c&&v},{"hover:!text-black":s==="dark","!text-black":!c&&v}),onClick:()=>!c&&E(!0),children:[(0,e.jsx)(se,{data:i,className:"desktop:block hidden !bg-white",theme:s,onNavItemClick:()=>!c&&E(!0),onPrimaryNavClick:k}),(0,e.jsx)(ce,{menuData:z,data:i,className:"desktop:hidden block !bg-white",onPrimaryNavClick:k}),S&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${T?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[(0,e.jsx)("div",{ref:g,className:(0,y.cn)("overflow-y-auto",{}),children:(0,e.jsx)(fe.default,{data:ne,keywords:W,isSearching:N,searchResult:D,onSearch:x=>{m?.(x)},onClose:()=>{m?.(),B(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>B(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:x=>{(x.key==="Enter"||x.key===" "||x.key==="Escape")&&(x.preventDefault(),B(!1))}})]})]})})})}),se=(0,t.forwardRef)((n,r)=>{const{data:i,onNavItemClick:u,className:p,theme:h,onPrimaryNavClick:s}=n,{event:c,profile:D}=(0,j.useNavContext)(),[m,N]=(0,t.useState)(!1),{locale:W="us"}=(0,ae.useAiuiContext)(),k=(0,t.useMemo)(()=>(0,C.WithGroupCategory)(i?.categories?.filter(a=>a?.pcShow)),[i]),[b,G]=(0,t.useState)(null),[L,I]=(0,t.useState)([]),z=(0,t.useRef)(null),[_,S]=(0,t.useState)(!1),B=(0,t.useRef)(null),F=(0,t.useRef)(null),P=(0,t.useRef)(k.map(a=>Array(a?.length||0).fill(null)));(0,t.useEffect)(()=>{k?.length&&I(k?.map((a,d)=>a?.map((f,M)=>({groupIndex:d,index:M,open:!1}))))},[k]);const v=(0,t.useMemo)(()=>{let a=null;for(const d of L){for(const f of d)if(f.open){a=f;break}if(a)break}return a},[L]);(0,ee.useScrollLock)(!!v?.open||_);const E=(a,d,f)=>{S(!1);const M=k[d][f];if(M?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links)M?.components?.[0]?.url&&window.open(M?.components?.[0]?.url);else{const Y=k?.flat()||[],O=Y?.findIndex(oe=>oe?.id===k[d][f]?.id);a.stopPropagation(),u?.(),s?.(Y[O],O),G(M),I(oe=>oe.map(we=>we.map(q=>q.groupIndex===d&&q.index===f?{...q,open:!q.open}:{...q,open:!1})))}},J=(a,d,f)=>{a.key==="Enter"||a.key===" "?(a.preventDefault(),E(a,d,f)):a.key==="Escape"&&v?.groupIndex===d&&v?.index===f&&(a.preventDefault(),A())},A=()=>{I(a=>a.map(d=>d.map(f=>({...f,open:!1}))))},g=(0,t.useMemo)(()=>{if(b)return b?.components?.[0]?.blockType},[b]),T=(0,C.WithSidebar)(ge.SidebarDropdown,b),H=(0,C.WithResource)(be.ResourceSidebarDropdown,b),ne=(0,C.WithMulticol)(he.MulticolDropdown,b),x=(0,C.WithSupports)(ye.SupportsDropdown,{categoriesItem:b,currentNavItemRef:P.current?.[v?.groupIndex||0]?.[v?.index||0]}),U=(0,t.useMemo)(()=>{switch(g){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(T,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(H,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(x,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(ne,{});default:return null}},[g,b]),$=(0,t.useMemo)(()=>i?.bar?.actions?.filter(a=>a?.pcShow),[i]),R=(0,t.useMemo)(()=>$?.find(a=>a?.blockType===o.HeaderNavigationActionBlockType.Profile),[$]),K=(0,t.useCallback)(()=>{S(a=>!a)},[]);return(0,t.useEffect)(()=>{if(z?.current){const a=z.current;return a.addEventListener("click",K),()=>{a.removeEventListener("click",K)}}},[K]),(0,X.useGSAP)(()=>{v?.open&&Z.gsap.fromTo(F?.current,{height:0},{height:"auto"})},[v?.open]),(0,e.jsxs)(l.Container,{className:(0,y.cn)("relative h-[96px]",p),children:[(0,e.jsxs)("div",{ref:B,onClick:A,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)(ue,{}),(0,e.jsx)(re,{ref:z,actions:$,activeStatus:_})]}),(0,e.jsx)("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:k?.map((a,d)=>(0,e.jsx)("div",{className:"flex gap-3",children:a?.map((f,M)=>{const Y=v?.groupIndex===d&&v?.index===M;return(0,e.jsx)("div",{ref:O=>{P.current[d][M]=O},className:"group",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:O=>E(O,d,M),onKeyDown:O=>J(O,d,M),"aria-expanded":Y,"aria-haspopup":"true","aria-label":f.text,children:[(0,e.jsx)(l.Text,{html:f.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(w.DownArrow,{className:(0,y.cn)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":v?.groupIndex===d&&v?.index===M,"opacity-100":m&&v?.groupIndex===d&&v?.index===M,invisible:!f?.components?.length||f?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links})})]}),(0,e.jsx)("div",{className:(0,y.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":Y},h==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},f.id)})},`groupCategory-${d}`))})]}),(0,e.jsxs)("div",{role:"menu","aria-hidden":!(v?.open&&b),className:(0,y.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:!(v?.open&&b)}),onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1),style:{height:`calc(100dvh - ${B?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:F,className:(0,y.cn)("relative z-50",{"overflow-hidden":g!==o.HeaderNavigationBlockType.Supports}),children:U}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:A,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),A())}})]}),_&&(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% - ${z?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:D?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:D?.nick_name||R?.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:R?.profiles?.map(a=>(0,e.jsx)(te.MenuItem,{className:"py-2",label:a?.title,href:(0,y.getLocalizedPath)(a?.url,W)},a.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)(l.Text,{html:R?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:R?.benefits?.map(a=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:a.benefitIcon?.url,className:"size-4",alt:a.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:a.benefit,className:"text-sm font-bold leading-[1.4]"})]},a.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>c?.join?.(),children:(0,e.jsx)(l.Text,{html:R?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>c?.login?.(),children:(0,e.jsx)(l.Text,{html:R?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),S(!1))}})]})]})}),ce=(0,t.forwardRef)(({data:n,menuData:r,className:i,onPrimaryNavClick:u},p)=>{const h=(0,t.useMemo)(()=>(0,C.WithGroupCategory)(n?.categories?.filter(g=>g?.mobileShow)),[n]),{currentMenu:s,setCurrentMenu:c,subSubCategory:D}=(0,j.useNavContext)(),[m,N]=(0,t.useState)(!1),[W,k]=(0,t.useState)(0),[b,G]=(0,t.useState)(null),L=(0,t.useRef)(null);(0,t.useEffect)(()=>{if(L?.current&&m){const g=L?.current?.getBoundingClientRect();k(window?.innerHeight-(g?.bottom||0))}},[m]),(0,X.useGSAP)(()=>{Z.gsap.fromTo(L.current,{height:0},{height:W,duration:.3})},[W]),(0,ee.useScrollLock)(m);const I=(0,t.useMemo)(()=>b?.components?.[0]?.blockType,[b]),z=(0,C.WithSupports)(ke.MobileSupportMenu,{categoriesItem:b}),_=(0,C.WithSidebar)(Ne.MobileSidebarMenu,b),S=(0,C.WithResource)(ve.MobileResourceSidebarMenu,b),B=(0,C.WithMulticol)(xe.MobileMulticolMenu,b),F=(0,t.useMemo)(()=>{switch(I){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(_,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(S,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(z,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(B,{});default:return null}},[I,b,z]),P=(0,t.useCallback)(()=>{N(!1),k(0),c&&c(o.HeaderNavigationMenu.Primary)},[N,k,c]),v=(0,t.useMemo)(()=>n?.bar?.actions?.filter(g=>g?.mobileShow&&g?.blockType!==o.HeaderNavigationActionBlockType.Profile),[n]),E=(0,t.useMemo)(()=>n?.bar?.actions?.find(g=>g?.mobileShow&&g?.blockType===o.HeaderNavigationActionBlockType.Profile)||{},[n]),J=(0,t.useMemo)(()=>{switch(s){case o.HeaderNavigationMenu.Primary:return(0,e.jsx)(Be,{actions:v,menuOpen:m,onMenuOpenClose:()=>{N(!1),k(0)},onMenuOpenClick:()=>N(!0)});case o.HeaderNavigationMenu.Secondary:return(0,e.jsx)(de,{title:b?.text,onMenuOpenClose:P,onMenuBackClick:()=>c?.(o.HeaderNavigationMenu.Primary)});case o.HeaderNavigationMenu.Third:return(0,e.jsx)(de,{title:D?.label,onMenuOpenClose:P,onMenuBackClick:()=>c?.(o.HeaderNavigationMenu.Secondary)});default:return null}},[m,s,c,b,v,D,P]),A=(0,t.useCallback)((g,T)=>{const H=Array.isArray(h)?Array.isArray(h[g])?h[g][T]:{}:{};G(H),H?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links?H?.components?.[0]?.url&&window.open(H?.components?.[0]?.url):c?.(o.HeaderNavigationMenu.Secondary)},[h,c]);return(0,e.jsxs)(l.Container,{className:(0,y.cn)("relative h-[52px]",i),children:[J,m&&(0,e.jsxs)("nav",{ref:L,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:W},role:"navigation","aria-label":"Mobile navigation menu",children:[s===o.HeaderNavigationMenu.Primary&&r?(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(l.BrandStrip,{data:r})}):null,s===o.HeaderNavigationMenu.Primary?(0,e.jsx)(Le,{categories:h,onPrimaryMenuClick:A,onPrimaryNavClick:u,profileAction:E}):F]})]})}),Le=({categories:n,onPrimaryMenuClick:r,profileAction:i,onPrimaryNavClick:u})=>(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:n?.map((p,h)=>(0,e.jsxs)("div",{className:"",children:[(0,e.jsx)("div",{className:(0,y.cn)("my-2 h-px w-full bg-[#E5E5E7]")}),p?.map((s,c)=>(0,e.jsx)(te.MenuItem,{label:s.text,onClick:()=>{const m=(n?.flat()||[])?.findIndex(N=>N?.id===n[h][c]?.id);r(h,c),u?.(s,m)},icon:s.components?.[0]?.icon},s.id))]},`groupCategory-${h}`))}),(0,e.jsx)(ze,{profileAction:i})]}),ze=({profileAction:n})=>{const[r,i]=(0,t.useState)(!1),{profile:u,event:p}=(0,j.useNavContext)(),{locale:h="us"}=(0,ae.useAiuiContext)();return(0,e.jsxs)("div",{className:(0,y.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":r}),children:[(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>i(!r),"aria-expanded":r,"aria-label":u?.nick_name||n?.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)(l.Text,{html:u?.nick_name||n?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!u?.email&&(0,e.jsx)(w.DownArrow,{"aria-hidden":"true",className:(0,y.cn)("laptop:size-4 size-5",{"rotate-180":r})})]}),u?.email&&(0,e.jsx)("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:n?.profiles?.map(s=>(0,e.jsx)(te.MenuItem,{label:s?.title,href:(0,y.getLocalizedPath)(s?.url,h)},s.id))}),r&&!u?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:n?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:n?.benefits?.map(s=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:s.benefitIcon?.url,className:"size-4",alt:s.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:s.benefit,className:"text-sm font-bold leading-[1.4]"})]},s.id))})]}),!u?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>p?.join?.(),children:(0,e.jsx)(l.Text,{html:n?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>p?.login?.(),children:(0,e.jsx)(l.Text,{html:n?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Be=({menuOpen:n,onMenuOpenClose:r,onMenuOpenClick:i,actions:u})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(ue,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(re,{actions:u}),n?(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"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"})})]})]}),ue=()=>{const{payloadData:n,isMobile:r}=(0,j.useNavContext)(),{locale:i="us"}=(0,ae.useAiuiContext)();return(0,e.jsx)("a",{href:(0,y.getLocalizedPath)("/",i),className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:r?n?.bar?.mobileLogo:n?.bar?.desktopLogo}})},re=(0,t.forwardRef)(({actions:n,activeStatus:r=!1},i)=>{const{event:u,cartCount:p}=(0,j.useNavContext)(),[h,s]=(0,t.useState)(null),c=m=>{switch(m){case o.HeaderNavigationActionBlockType.Search:return"Search";case o.HeaderNavigationActionBlockType.Cart:return`Shopping cart${p>0?` (${p} items)`:""}`;case o.HeaderNavigationActionBlockType.Profile:return"User profile";case o.HeaderNavigationActionBlockType.Livestream:return"Livestream";default:return"Action"}},D=(0,t.useCallback)((m,N)=>{switch(s(N),m?.blockType){case o.HeaderNavigationActionBlockType.Search:u?.search?.();break;case o.HeaderNavigationActionBlockType.Cart:u?.cart?.();break;case o.HeaderNavigationActionBlockType.Profile:u?.profile?.();break;case o.HeaderNavigationActionBlockType.Livestream:u?.livestream?.();break;default:return()=>{}}},[u]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(n)&&n?.map((m,N)=>(0,e.jsxs)("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:m.blockType===o.HeaderNavigationActionBlockType.Profile?i:null,onClick:()=>D(m,N),"aria-label":c(m.blockType),"aria-pressed":r&&h===N,children:[(0,e.jsx)(l.Text,{html:m.icon,className:(0,y.cn)("size-5",{"text-brand-0":r&&h===N}),"aria-hidden":"true"}),m.blockType===o.HeaderNavigationActionBlockType.Cart&&p>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)(l.Text,{html:p?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},m.id))})}),de=({title:n,onMenuOpenClose:r,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)(l.Text,{html:n,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:()=>r(),"aria-label":"Close menu",children:(0,e.jsx)(w.Close,{className:"size-5","aria-hidden":"true"})})]});ce.displayName="MobileNavigation",re.displayName="Actions",le.displayName="HeaderNavigation",se.displayName="DesktopNavigation";var Re=(0,me.withLayout)(le);
|
|
1
|
+
"use strict";"use client";var Me=Object.create;var Q=Object.defineProperty;var Se=Object.getOwnPropertyDescriptor;var Pe=Object.getOwnPropertyNames;var De=Object.getPrototypeOf,Ee=Object.prototype.hasOwnProperty;var Te=(n,r)=>{for(var i in r)Q(n,i,{get:r[i],enumerable:!0})},ie=(n,r,i,u)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of Pe(r))!Ee.call(n,p)&&p!==i&&Q(n,p,{get:()=>r[p],enumerable:!(u=Se(r,p))||u.enumerable});return n};var V=(n,r,i)=>(i=n!=null?Me(De(n)):{},ie(r||!n||!n.__esModule?Q(i,"default",{value:n,enumerable:!0}):i,n)),He=n=>ie(Q({},"__esModule",{value:!0}),n);var Ie={};Te(Ie,{default:()=>Re});module.exports=He(Ie);var e=require("react/jsx-runtime"),t=require("react"),l=require("../../components/index.js"),de=require("../../shared/Styles.js"),y=require("../../helpers/utils.js"),j=V(require("./NavProvider.js")),o=require("./types.js"),pe=V(require("jump.js")),X=require("@gsap/react"),Z=require("gsap"),C=require("./withCategory.js"),M=require("./icons/index.js"),fe=V(require("../NavigationSearch/index.js")),be=require("./ResourceSidebarDropdown.js"),ve=require("./MobileResourceSidebarMenu.js"),ge=require("./SidebarDropdown.js"),ee=require("./useScrollLock.js"),he=require("./MulticolDropdown.js"),ye=require("./SupportsDropdown.js"),Ne=require("./MobileSidebarMenu.js"),ke=require("./MobileSupportMenu.js"),xe=require("./MobileMulticolMenu.js"),te=require("./MobileMenuComponents.js"),ae=require("../AiuiProvider/index.js"),Ce=V(require("../../shared/throttle.js"));const le=(0,t.forwardRef)((n,r)=>{const{data:{header:i}={},buildProps:u,event:p,profile:h,theme:s="light",isTop:c=!1,searchResult:D,onSearch:d,isSearching:N,keywords:_,onPrimaryNavClick:k,onSeriesProductClick:b,onSidebarNavClick:G,headerId:L,cartCount:I,menuData:z,...W}=n,[S,B]=(0,t.useState)(!1),[F,P]=(0,t.useState)(!1),[v,E]=(0,t.useState)(!1),[J,A]=(0,t.useState)(!1),g=(0,t.useRef)(null),T=(0,t.useRef)(null),H=()=>{const x=document?.querySelector("body")?.offsetWidth||0;A(x<=1440)};(0,t.useEffect)(()=>(H(),window.addEventListener("resize",H),()=>{window.removeEventListener("resize",H)}),[]),(0,t.useImperativeHandle)(r,()=>T.current),(0,t.useEffect)(()=>{T.current&&c&&(0,pe.default)(T.current,{duration:0,offset:T.current?.getBoundingClientRect()?.bottom||0})},[c]),(0,t.useEffect)(()=>{if(c){P(!1),E(!1);return}let x=0,U=0,$=0;const R=()=>document?.documentElement?.scrollTop||document?.body?.scrollTop||0,K=R();x=K,P(K>300),E(K>30);const a=(0,Ce.default)(()=>{const m=R(),f=m-x;E(m>30),f>0?(U=0,$+=f,$>=300&&m>300&&P(!0)):f<0&&($=0,U+=Math.abs(f),U>=300&&(P(!1),U=0)),x=m},100);return window.addEventListener("scroll",a,{passive:!0}),()=>window.removeEventListener("scroll",a)},[c]),(0,t.useEffect)(()=>{p&&(p.search=()=>B(!0))},[p]),(0,X.useGSAP)(()=>{g?.current&&S&&Z.gsap.fromTo(g.current,{height:0},{height:"auto",duration:.3})},[S]),(0,ee.useScrollLock)(S);const ne=(0,t.useMemo)(()=>i?.bar?.actions?.find(x=>x?.blockType===o.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[i]);return(0,e.jsx)(j.default,{buildProps:u,profile:h,isMobile:J,event:p,payloadData:i,onSidebarNavClick:G,onSeriesProductClick:b,cartCount:I,children:(0,e.jsx)("header",{...W,id:L||"header","data-ui-component-id":"HeaderNavigation",className:c?"relative z-[100] bg-white":(0,y.cn)("sticky top-0 z-[100] transition-transform duration-500 ease-in-out",{"translate-y-[-100%]":F}),ref:T,children:(0,e.jsxs)("div",{className:(0,y.cn)("hover:bg-white hover:text-black",s==="light"?"text-black":"text-white",{"!bg-white transition-all duration-500 ease-in-out":!c&&v},{"hover:!text-black":s==="dark","!text-black":!c&&v}),onClick:()=>!c&&E(!0),children:[(0,e.jsx)(se,{data:i,className:"desktop:block hidden !bg-white",theme:s,onNavItemClick:()=>!c&&E(!0),onPrimaryNavClick:k}),(0,e.jsx)(ce,{menuData:z,data:i,className:"desktop:hidden block !bg-white",onPrimaryNavClick:k}),S&&(0,e.jsxs)("div",{className:"absolute left-0 top-0 z-[60] flex w-full flex-col bg-black/70",style:{height:`calc(100dvh - ${T?.current?.getBoundingClientRect()?.top}px)`},role:"dialog","aria-modal":"true","aria-label":"Search",children:[(0,e.jsx)("div",{ref:g,className:(0,y.cn)("overflow-y-auto",{}),children:(0,e.jsx)(fe.default,{data:ne,keywords:_,isSearching:N,searchResult:D,onSearch:x=>{d?.(x)},onClose:()=>{d?.(),B(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>B(!1),role:"button",tabIndex:0,"aria-label":"Close search",onKeyDown:x=>{(x.key==="Enter"||x.key===" "||x.key==="Escape")&&(x.preventDefault(),B(!1))}})]})]})})})}),se=(0,t.forwardRef)((n,r)=>{const{data:i,onNavItemClick:u,className:p,theme:h,onPrimaryNavClick:s}=n,{event:c,profile:D}=(0,j.useNavContext)(),[d,N]=(0,t.useState)(!1),{locale:_="us"}=(0,ae.useAiuiContext)(),k=(0,t.useMemo)(()=>(0,C.WithGroupCategory)(i?.categories?.filter(a=>a?.pcShow)),[i]),[b,G]=(0,t.useState)(null),[L,I]=(0,t.useState)([]),z=(0,t.useRef)(null),[W,S]=(0,t.useState)(!1),B=(0,t.useRef)(null),F=(0,t.useRef)(null),P=(0,t.useRef)(k.map(a=>Array(a?.length||0).fill(null)));(0,t.useEffect)(()=>{k?.length&&I(k?.map((a,m)=>a?.map((f,w)=>({groupIndex:m,index:w,open:!1}))))},[k]);const v=(0,t.useMemo)(()=>{let a=null;for(const m of L){for(const f of m)if(f.open){a=f;break}if(a)break}return a},[L]);(0,ee.useScrollLock)(!!v?.open||W);const E=(a,m,f)=>{S(!1);const w=k[m][f];if(w?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links)w?.components?.[0]?.url&&window.open(w?.components?.[0]?.url,w?.components?.[0]?.target??"_blank");else{const Y=k?.flat()||[],O=Y?.findIndex(oe=>oe?.id===k[m][f]?.id);a.stopPropagation(),u?.(),s?.(Y[O],O),G(w),I(oe=>oe.map(we=>we.map(q=>q.groupIndex===m&&q.index===f?{...q,open:!q.open}:{...q,open:!1})))}},J=(a,m,f)=>{a.key==="Enter"||a.key===" "?(a.preventDefault(),E(a,m,f)):a.key==="Escape"&&v?.groupIndex===m&&v?.index===f&&(a.preventDefault(),A())},A=()=>{I(a=>a.map(m=>m.map(f=>({...f,open:!1}))))},g=(0,t.useMemo)(()=>{if(b)return b?.components?.[0]?.blockType},[b]),T=(0,C.WithSidebar)(ge.SidebarDropdown,b),H=(0,C.WithResource)(be.ResourceSidebarDropdown,b),ne=(0,C.WithMulticol)(he.MulticolDropdown,b),x=(0,C.WithSupports)(ye.SupportsDropdown,{categoriesItem:b,currentNavItemRef:P.current?.[v?.groupIndex||0]?.[v?.index||0]}),U=(0,t.useMemo)(()=>{switch(g){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(T,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(H,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(x,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(ne,{});default:return null}},[g,b]),$=(0,t.useMemo)(()=>i?.bar?.actions?.filter(a=>a?.pcShow),[i]),R=(0,t.useMemo)(()=>$?.find(a=>a?.blockType===o.HeaderNavigationActionBlockType.Profile),[$]),K=(0,t.useCallback)(()=>{S(a=>!a)},[]);return(0,t.useEffect)(()=>{if(z?.current){const a=z.current;return a.addEventListener("click",K),()=>{a.removeEventListener("click",K)}}},[K]),(0,X.useGSAP)(()=>{v?.open&&Z.gsap.fromTo(F?.current,{height:0},{height:"auto"})},[v?.open]),(0,e.jsxs)(l.Container,{className:(0,y.cn)("relative h-[96px]",p),children:[(0,e.jsxs)("div",{ref:B,onClick:A,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)(ue,{}),(0,e.jsx)(re,{ref:z,actions:$,activeStatus:W})]}),(0,e.jsx)("nav",{className:"flex justify-between",role:"navigation","aria-label":"Primary navigation",children:k?.map((a,m)=>(0,e.jsx)("div",{className:"flex gap-3",children:a?.map((f,w)=>{const Y=v?.groupIndex===m&&v?.index===w;return(0,e.jsx)("div",{ref:O=>{P.current[m][w]=O},className:"group",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("button",{className:"flex cursor-pointer items-center gap-1 border-0 bg-transparent pb-4",onClick:O=>E(O,m,w),onKeyDown:O=>J(O,m,w),"aria-expanded":Y,"aria-haspopup":"true","aria-label":f.text,children:[(0,e.jsx)(l.Text,{html:f.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(M.DownArrow,{className:(0,y.cn)("size-4 opacity-0 transition-opacity duration-500 group-hover:opacity-100",{"rotate-180":v?.groupIndex===m&&v?.index===w,"opacity-100":d&&v?.groupIndex===m&&v?.index===w,invisible:!f?.components?.length||f?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links})})]}),(0,e.jsx)("div",{className:(0,y.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":Y},h==="dark"?"bg-white":"bg-[#080A0F]"),"aria-hidden":"true"})]})},f.id)})},`groupCategory-${m}`))})]}),(0,e.jsxs)("div",{role:"menu","aria-hidden":!(v?.open&&b),className:(0,y.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:!(v?.open&&b)}),onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1),style:{height:`calc(100dvh - ${B?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:F,className:(0,y.cn)("relative z-50",{"overflow-hidden":g!==o.HeaderNavigationBlockType.Supports}),children:U}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:A,role:"button",tabIndex:0,"aria-label":"Close menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),A())}})]}),W&&(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% - ${z?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:D?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:D?.nick_name||R?.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:R?.profiles?.map(a=>(0,e.jsx)(te.MenuItem,{className:"py-2",label:a?.title,href:(0,y.getLocalizedPath)(a?.url,_)},a.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(M.Polygon,{className:"absolute -top-2 right-[46px] z-30 text-white","aria-hidden":"true"}),(0,e.jsx)(l.Text,{html:R?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:R?.benefits?.map(a=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:a.benefitIcon?.url,className:"size-4",alt:a.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:a.benefit,className:"text-sm font-bold leading-[1.4]"})]},a.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>c?.join?.(),children:(0,e.jsx)(l.Text,{html:R?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>c?.login?.(),children:(0,e.jsx)(l.Text,{html:R?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1),role:"button",tabIndex:0,"aria-label":"Close profile menu",onKeyDown:a=>{(a.key==="Enter"||a.key===" "||a.key==="Escape")&&(a.preventDefault(),S(!1))}})]})]})}),ce=(0,t.forwardRef)(({data:n,menuData:r,className:i,onPrimaryNavClick:u},p)=>{const h=(0,t.useMemo)(()=>(0,C.WithGroupCategory)(n?.categories?.filter(g=>g?.mobileShow)),[n]),{currentMenu:s,setCurrentMenu:c,subSubCategory:D}=(0,j.useNavContext)(),[d,N]=(0,t.useState)(!1),[_,k]=(0,t.useState)(0),[b,G]=(0,t.useState)(null),L=(0,t.useRef)(null);(0,t.useEffect)(()=>{if(L?.current&&d){const g=L?.current?.getBoundingClientRect();k(window?.innerHeight-(g?.bottom||0))}},[d]),(0,X.useGSAP)(()=>{Z.gsap.fromTo(L.current,{height:0},{height:_,duration:.3})},[_]),(0,ee.useScrollLock)(d);const I=(0,t.useMemo)(()=>b?.components?.[0]?.blockType,[b]),z=(0,C.WithSupports)(ke.MobileSupportMenu,{categoriesItem:b}),W=(0,C.WithSidebar)(Ne.MobileSidebarMenu,b),S=(0,C.WithResource)(ve.MobileResourceSidebarMenu,b),B=(0,C.WithMulticol)(xe.MobileMulticolMenu,b),F=(0,t.useMemo)(()=>{switch(I){case o.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(W,{});case o.HeaderNavigationBlockType.Resource:return(0,e.jsx)(S,{});case o.HeaderNavigationBlockType.Supports:return(0,e.jsx)(z,{});case o.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(B,{});default:return null}},[I,b,z]),P=(0,t.useCallback)(()=>{N(!1),k(0),c&&c(o.HeaderNavigationMenu.Primary)},[N,k,c]),v=(0,t.useMemo)(()=>n?.bar?.actions?.filter(g=>g?.mobileShow&&g?.blockType!==o.HeaderNavigationActionBlockType.Profile),[n]),E=(0,t.useMemo)(()=>n?.bar?.actions?.find(g=>g?.mobileShow&&g?.blockType===o.HeaderNavigationActionBlockType.Profile)||{},[n]),J=(0,t.useMemo)(()=>{switch(s){case o.HeaderNavigationMenu.Primary:return(0,e.jsx)(Be,{actions:v,menuOpen:d,onMenuOpenClose:()=>{N(!1),k(0)},onMenuOpenClick:()=>N(!0)});case o.HeaderNavigationMenu.Secondary:return(0,e.jsx)(me,{title:b?.text,onMenuOpenClose:P,onMenuBackClick:()=>c?.(o.HeaderNavigationMenu.Primary)});case o.HeaderNavigationMenu.Third:return(0,e.jsx)(me,{title:D?.label,onMenuOpenClose:P,onMenuBackClick:()=>c?.(o.HeaderNavigationMenu.Secondary)});default:return null}},[d,s,c,b,v,D,P]),A=(0,t.useCallback)((g,T)=>{const H=Array.isArray(h)?Array.isArray(h[g])?h[g][T]:{}:{};G(H),H?.components?.[0]?.blockType===o.HeaderNavigationBlockType.Links?H?.components?.[0]?.url&&window.open(H?.components?.[0]?.url):c?.(o.HeaderNavigationMenu.Secondary)},[h,c]);return(0,e.jsxs)(l.Container,{className:(0,y.cn)("relative h-[52px]",i),children:[J,d&&(0,e.jsxs)("nav",{ref:L,className:"absolute left-0 top-full z-[999] w-full overflow-y-auto border-t border-[#E4E5E6] bg-white text-black",style:{height:_},role:"navigation","aria-label":"Mobile navigation menu",children:[s===o.HeaderNavigationMenu.Primary&&r?(0,e.jsx)("div",{className:"pt-4",children:(0,e.jsx)(l.BrandStrip,{data:r})}):null,s===o.HeaderNavigationMenu.Primary?(0,e.jsx)(Le,{categories:h,onPrimaryMenuClick:A,onPrimaryNavClick:u,profileAction:E}):F]})]})}),Le=({categories:n,onPrimaryMenuClick:r,profileAction:i,onPrimaryNavClick:u})=>(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:n?.map((p,h)=>(0,e.jsxs)("div",{className:"",children:[(0,e.jsx)("div",{className:(0,y.cn)("my-2 h-px w-full bg-[#E5E5E7]")}),p?.map((s,c)=>(0,e.jsx)(te.MenuItem,{label:s.text,onClick:()=>{const d=(n?.flat()||[])?.findIndex(N=>N?.id===n[h][c]?.id);r(h,c),u?.(s,d)},icon:s.components?.[0]?.icon},s.id))]},`groupCategory-${h}`))}),(0,e.jsx)(ze,{profileAction:i})]}),ze=({profileAction:n})=>{const[r,i]=(0,t.useState)(!1),{profile:u,event:p}=(0,j.useNavContext)(),{locale:h="us"}=(0,ae.useAiuiContext)();return(0,e.jsxs)("div",{className:(0,y.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":r}),children:[(0,e.jsxs)("button",{className:"flex w-full cursor-pointer items-center justify-between border-0 bg-transparent",onClick:()=>i(!r),"aria-expanded":r,"aria-label":u?.nick_name||n?.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)(M.User,{"aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:u?.nick_name||n?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!u?.email&&(0,e.jsx)(M.DownArrow,{"aria-hidden":"true",className:(0,y.cn)("laptop:size-4 size-5",{"rotate-180":r})})]}),u?.email&&(0,e.jsx)("nav",{className:"mt-4",role:"navigation","aria-label":"Profile menu",children:n?.profiles?.map(s=>(0,e.jsx)(te.MenuItem,{label:s?.title,href:(0,y.getLocalizedPath)(s?.url,h)},s.id))}),r&&!u?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:n?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:n?.benefits?.map(s=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:s.benefitIcon?.url,className:"size-4",alt:s.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:s.benefit,className:"text-sm font-bold leading-[1.4]"})]},s.id))})]}),!u?.email&&(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-3",children:[(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"secondary",size:"base",onClick:()=>p?.join?.(),children:(0,e.jsx)(l.Text,{html:n?.primaryButton||"Join Now",className:"text-sm font-bold leading-[1.4]"})}),(0,e.jsx)(l.Button,{className:"tablet:flex-none flex-1",variant:"primary",size:"base",onClick:()=>p?.login?.(),children:(0,e.jsx)(l.Text,{html:n?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},Be=({menuOpen:n,onMenuOpenClose:r,onMenuOpenClick:i,actions:u})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(ue,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(re,{actions:u}),n?(0,e.jsx)("button",{className:"cursor-pointer border-0 bg-transparent p-0",onClick:()=>r(),"aria-label":"Close menu","aria-expanded":"true",children:(0,e.jsx)(M.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)(M.Menu,{className:"size-5","aria-hidden":"true"})})]})]}),ue=()=>{const{payloadData:n,isMobile:r}=(0,j.useNavContext)(),{locale:i="us"}=(0,ae.useAiuiContext)();return(0,e.jsx)("a",{href:(0,y.getLocalizedPath)("/",i),className:"hover:text-brand-0 [&>svg]:w-full","aria-label":"Home",dangerouslySetInnerHTML:{__html:r?n?.bar?.mobileLogo:n?.bar?.desktopLogo}})},re=(0,t.forwardRef)(({actions:n,activeStatus:r=!1},i)=>{const{event:u,cartCount:p}=(0,j.useNavContext)(),[h,s]=(0,t.useState)(null),c=d=>{switch(d){case o.HeaderNavigationActionBlockType.Search:return"Search";case o.HeaderNavigationActionBlockType.Cart:return`Shopping cart${p>0?` (${p} items)`:""}`;case o.HeaderNavigationActionBlockType.Profile:return"User profile";case o.HeaderNavigationActionBlockType.Livestream:return"Livestream";default:return"Action"}},D=(0,t.useCallback)((d,N)=>{switch(s(N),d?.blockType){case o.HeaderNavigationActionBlockType.Search:u?.search?.();break;case o.HeaderNavigationActionBlockType.Cart:u?.cart?.();break;case o.HeaderNavigationActionBlockType.Profile:u?.profile?.();break;case o.HeaderNavigationActionBlockType.Livestream:u?.livestream?.();break;default:return()=>{}}},[u]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(n)&&n?.map((d,N)=>(0,e.jsxs)("button",{className:"relative cursor-pointer border-0 bg-transparent p-0",ref:d.blockType===o.HeaderNavigationActionBlockType.Profile?i:null,onClick:()=>D(d,N),"aria-label":c(d.blockType),"aria-pressed":r&&h===N,children:[(0,e.jsx)(l.Text,{html:d.icon,className:(0,y.cn)("size-5",{"text-brand-0":r&&h===N}),"aria-hidden":"true"}),d.blockType===o.HeaderNavigationActionBlockType.Cart&&p>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)(l.Text,{html:p?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},d.id))})}),me=({title:n,onMenuOpenClose:r,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)(M.LeftArrow,{className:"size-5","aria-hidden":"true"})}),(0,e.jsx)(l.Text,{html:n,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:()=>r(),"aria-label":"Close menu",children:(0,e.jsx)(M.Close,{className:"size-5","aria-hidden":"true"})})]});ce.displayName="MobileNavigation",re.displayName="Actions",le.displayName="HeaderNavigation",se.displayName="DesktopNavigation";var Re=(0,de.withLayout)(le);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|