@anker-in/headless-ui 1.0.26 → 1.0.28
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/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +3 -3
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.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/HeroBanner/Countdown.d.ts +10 -0
- package/dist/cjs/biz-components/HeroBanner/Countdown.js +2 -0
- package/dist/cjs/biz-components/HeroBanner/Countdown.js.map +7 -0
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/cjs/biz-components/HeroBanner/types.d.ts +7 -0
- package/dist/cjs/biz-components/HeroBanner/types.js.map +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.d.ts +11 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplay.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +4 -4
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/cjs/biz-components/Specs/dropdown.js +2 -2
- package/dist/cjs/biz-components/Specs/dropdown.js.map +3 -3
- package/dist/cjs/helpers/ScrollLoadVideo.js +1 -1
- package/dist/cjs/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/cjs/hooks/useRollout.d.ts +2 -0
- package/dist/cjs/hooks/useRollout.js +2 -0
- package/dist/cjs/hooks/useRollout.js.map +7 -0
- package/dist/cjs/stories/HeroBanner.stories.js +2 -2
- package/dist/cjs/stories/HeroBanner.stories.js.map +2 -2
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +3 -3
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.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/HeroBanner/Countdown.d.ts +10 -0
- package/dist/esm/biz-components/HeroBanner/Countdown.js +2 -0
- package/dist/esm/biz-components/HeroBanner/Countdown.js.map +7 -0
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/biz-components/HeroBanner/types.d.ts +7 -0
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.d.ts +11 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +9 -9
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/biz-components/Specs/dropdown.js +1 -1
- package/dist/esm/biz-components/Specs/dropdown.js.map +3 -3
- package/dist/esm/helpers/ScrollLoadVideo.js +1 -1
- package/dist/esm/helpers/ScrollLoadVideo.js.map +3 -3
- package/dist/esm/hooks/useRollout.d.ts +2 -0
- package/dist/esm/hooks/useRollout.js +2 -0
- package/dist/esm/hooks/useRollout.js.map +7 -0
- package/dist/esm/stories/HeroBanner.stories.js +1 -1
- package/dist/esm/stories/HeroBanner.stories.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var E=Object.create;var
|
|
1
|
+
"use strict";"use client";var E=Object.create;var d=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var z=(e,s)=>{for(var r in s)d(e,r,{get:s[r],enumerable:!0})},x=(e,s,r,p)=>{if(s&&typeof s=="object"||typeof s=="function")for(let i of P(s))!I.call(e,i)&&i!==r&&d(e,i,{get:()=>s[i],enumerable:!(p=M(s,i))||p.enumerable});return e};var c=(e,s,r)=>(r=e!=null?E(B(e)):{},x(s||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e)),A=e=>x(d({},"__esModule",{value:!0}),e);var D={};z(D,{default:()=>R});module.exports=A(D);var t=require("react/jsx-runtime"),o=c(require("react")),h=c(require("../Title/index.js")),a=require("../../helpers/utils.js"),w=c(require("../../components/picture.js")),b=c(require("../SwiperBox/index.js")),g=require("../../shared/Styles.js"),n=require("../../components/avatar.js"),k=require("../../components/container.js"),N=require("../../components/text.js"),y=require("../../hooks/useExposure.js"),C=require("../../shared/trackUrlRef.js");const v="copy",f="product_review",F=({data:e,configuration:s})=>{const r=(0,o.useRef)(null),p=i=>{const l=Number(i),m=Number.isFinite(l)?Math.max(0,Math.floor(l)):0;return Array.from({length:m})||[]};return(0,y.useExposure)(r,{componentType:v,componentName:f,componentTitle:e?.title,componentDescription:e?.description,position:s?.index+1}),(0,t.jsx)("div",{ref:r,className:(0,a.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300",s?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:(0,t.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:(0,a.cn)("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[e?.title?(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}):null,(0,t.jsx)("div",{className:"mt-1 flex items-center",children:p(e?.rating)?.map?.((i,l)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},l))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e?.avatar?.url?(0,t.jsxs)(n.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:[(0,t.jsx)(n.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(n.AvatarFallback,{children:e?.title})]}):null})]}),(0,t.jsx)("div",{className:"flex-1",children:(0,t.jsx)(N.Text,{className:(0,a.cn)("desktop:max-h-[151px] tablet:max-h-[140px]","lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]"),children:e?.description||""})}),(0,t.jsx)("a",{href:(0,C.trackUrlRef)(e?.link,`${v}_${f}`),onClick:()=>{s?.event?.primaryButton(e,s?.index+1)},"data-headless-type-name":`${v}#${f}`,"data-headless-title-desc-button":`${e?.title}#${e?.description||e?.subTitle}`,"data-headless-nav-postion":`''#${s?.index+1}`,children:(0,t.jsxs)("div",{className:(0,a.cn)("mt-3 flex items-center cursor-pointer overflow-hidden bg-[#F7F8F9] p-3",s?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(w.default,{className:"w-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""})}),(0,t.jsx)("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:e?.subTitle||""})]})})]})})},$=o.default.forwardRef(({className:e="",data:s,key:r,...p},i)=>{const{products:l,title:m,theme:L,...T}=s,u=(0,o.useRef)(null);return(0,o.useImperativeHandle)(i,()=>u.current),(0,t.jsx)("div",{className:e,ref:u,children:(0,t.jsx)("div",{className:"evaluate-box relative z-10",children:(0,t.jsx)(k.Container,{...s?.containerProps||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{ref:i,className:(0,a.cn)("w-full",e,{"aiui-dark":L==="dark"}),children:[m&&(0,t.jsx)(h.default,{data:{title:m}}),(0,t.jsx)(b.default,{className:"!overflow-visible",id:"Evaluate"+r,data:{list:l,configuration:{...T,title:m}},Slide:F,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var R=(0,g.withLayout)($);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: Img\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const handleRating = (num: number) => {\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "import_container", "import_text", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "ref", "handleRating", "num", "_", "index", "Picture", "Evaluate", "React", "className", "key", "rest", "products", "title", "theme", "ohter", "innerRef", "Title", "SwiperBox"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: Img\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const handleRating = (num: number) => {\n const raw = Number(num)\n const count = Number.isFinite(raw) ? Math.max(0, Math.floor(raw)) : 0\n return Array.from({ length: count }) || []\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px]'\n )}\n >\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n {data?.avatar?.url ? (\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </Avatar>\n ) : null}\n </div>\n </div>\n <div className=\"flex-1\">\n <Text\n className={cn(\n 'desktop:max-h-[151px] tablet:max-h-[140px]',\n 'lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2]'\n )}\n >\n {data?.description || ''}\n </Text>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index + 1)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description || data?.subTitle}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n >\n <div\n className={cn(\n 'mt-3 flex items-center cursor-pointer overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} alt={data?.img?.alt || ''} />\n </div>\n <p className=\"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]\">\n {data?.subTitle || ''}\n </p>\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n const { products, title, theme, ...ohter } = data\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"evaluate-box relative z-10\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter, title: title } }}\n Slide={EvaluateItem}\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 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n})\n\nexport default withLayout(Evaluate)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8EU,IAAAI,EAAA,6BA7EVC,EAAmD,oBACnDC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAoD,sCACpDC,EAA0B,yCAC1BC,EAAqB,oCAErBC,EAA4B,sCAC5BC,EAA4B,uCAG5B,MAAMC,EAAgB,OAChBC,EAAgB,iBAiChBC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,KAAM,UAAuB,IAAI,EACjCC,EAAgBC,GAAgB,CACpC,MAAMC,EAAM,OAAOD,CAAG,EAChBE,EAAQ,OAAO,SAASD,CAAG,EAAI,KAAK,IAAI,EAAG,KAAK,MAAMA,CAAG,CAAC,EAAI,EACpE,OAAO,MAAM,KAAK,CAAE,OAAQC,CAAM,CAAC,GAAK,CAAC,CAC3C,EAEA,wBAAYJ,EAAK,CACf,cAAAL,EACA,cAAAC,EACA,eAAgBE,GAAM,MACtB,qBAAsBA,GAAM,YAC5B,SAAUC,GAAe,MAAQ,CACnC,CAAC,KAGC,OAAC,OACC,IAAKC,EACL,aAAW,MACT,qGACAD,GAAe,QAAU,QAAU,cAAgB,eACnD,oGACA,qFACA,qBACF,EAEA,oBAAC,OAAI,UAAU,4EACb,qBAAC,OAAI,aAAW,MAAG,iEAAiE,EAClF,qBAAC,OAAI,UAAU,SACZ,UAAAD,GAAM,SAAQ,OAAC,MAAG,UAAU,mCAAoC,SAAAA,GAAM,MAAM,EAAQ,QACrF,OAAC,OAAI,UAAU,yBACZ,SAAAG,EAAaH,GAAM,MAAM,GAAG,MAAM,CAACO,EAAGC,OAEnC,OAAC,OAAgB,UAAU,OACzB,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQA,CAOV,CAEH,EACH,GACF,KACA,OAAC,OAAI,UAAU,0CACZ,SAAAR,GAAM,QAAQ,OACb,QAAC,UAAO,UAAU,YAAY,aAAc,CAACA,GAAM,QAAQ,IACzD,oBAAC,eAAY,IAAKA,GAAM,QAAQ,IAAK,KACrC,OAAC,kBAAgB,SAAAA,GAAM,MAAM,GAC/B,EACE,KACN,GACF,KACA,OAAC,OAAI,UAAU,SACb,mBAAC,QACC,aAAW,MACT,6CACA,gGACF,EAEC,SAAAA,GAAM,aAAe,GACxB,EACF,KACA,OAAC,KACC,QAAM,eAAYA,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,QAAS,IAAM,CACbG,GAAe,OAAO,cAAcD,EAAMC,GAAe,MAAQ,CAAC,CACpE,EACA,0BAAyB,GAAGJ,CAAa,IAAIC,CAAa,GAC1D,kCAAiC,GAAGE,GAAM,KAAK,IAAIA,GAAM,aAAeA,GAAM,QAAQ,GACtF,4BAA2B,MAAMC,GAAe,MAAQ,CAAC,GAEzD,oBAAC,OACC,aAAW,MACT,yEACAA,GAAe,QAAU,QAAU,aAAe,cACpD,EAEA,oBAAC,OAAI,UAAU,gEACb,mBAAC,EAAAQ,QAAA,CAAQ,UAAU,sBAAsB,OAAQT,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EAC9F,KACA,OAAC,KAAE,UAAU,qGACV,SAAAA,GAAM,UAAY,GACrB,GACF,EACF,GACF,EACF,CAEJ,EAEMU,EAAW,EAAAC,QAAM,WAA0C,CAAC,CAAE,UAAAC,EAAY,GAAI,KAAAZ,EAAM,IAAAa,EAAK,GAAGC,CAAK,EAAGZ,IAAQ,CAChH,KAAM,CAAE,SAAAa,EAAU,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAM,EAAIlB,EACvCmB,KAAW,UAAuB,IAAI,EAC5C,gCAAoBjB,EAAK,IAAMiB,EAAS,OAAyB,KAG/D,OAAC,OAAI,UAAWP,EAAW,IAAKO,EAC9B,mBAAC,OAAI,UAAU,6BACb,mBAAC,aAAW,GAAInB,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACrD,oBAAC,OAAI,IAAKE,EAAK,aAAW,MAAG,SAAUU,EAAW,CAAE,YAAaK,IAAU,MAAO,CAAC,EAChF,UAAAD,MAAS,OAAC,EAAAI,QAAA,CAAM,KAAM,CAAE,MAAOJ,CAAM,EAAG,KACzC,OAAC,EAAAK,QAAA,CACC,UAAU,oBACV,GAAI,WAAaR,EACjB,KAAM,CAAE,KAAME,EAAU,cAAe,CAAE,GAAGG,EAAO,MAAOF,CAAM,CAAE,EAClE,MAAOjB,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,EACF,EACF,EACF,CAEJ,CAAC,EAED,IAAOhB,KAAQ,cAAW2B,CAAQ",
|
|
6
|
+
"names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "import_container", "import_text", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "ref", "handleRating", "num", "raw", "count", "_", "index", "Picture", "Evaluate", "React", "className", "key", "rest", "products", "title", "theme", "ohter", "innerRef", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var z=Object.create;var f=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var _=(e,s)=>{for(var i in s)f(e,i,{get:s[i],enumerable:!0})},T=(e,s,i,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let
|
|
1
|
+
"use strict";"use client";var z=Object.create;var f=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var _=(e,s)=>{for(var i in s)f(e,i,{get:s[i],enumerable:!0})},T=(e,s,i,a)=>{if(s&&typeof s=="object"||typeof s=="function")for(let l of R(s))!Y.call(e,l)&&l!==i&&f(e,l,{get:()=>s[l],enumerable:!(a=j(s,l))||a.enumerable});return e};var b=(e,s,i)=>(i=e!=null?z(q(e)):{},T(s||!e||!e.__esModule?f(i,"default",{value:e,enumerable:!0}):i,e)),A=e=>T(f({},"__esModule",{value:!0}),e);var F={};_(F,{default:()=>Z});module.exports=A(F);var t=require("react/jsx-runtime"),M=require("react-responsive"),o=b(require("react")),d=require("../../helpers/utils.js"),I=require("../../shared/Styles.js"),V=b(require("../SwiperBox/index.js")),n=require("../../components/index.js"),C=b(require("../Title/index.js")),$=require("../VideoModal/index.js"),P=require("../TextModal/index.js"),g=require("../../hooks/useExposure.js"),x=require("../../shared/trackUrlRef.js");const c="image",m="graphic",Q=({data:e,configuration:s})=>{const i=(0,o.useRef)(null),a=()=>{switch(s.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};return(0,g.useExposure)(i,{componentType:c,componentName:m,componentTitle:e?.title,componentDescription:e?.description,position:s?.index+1}),(0,t.jsx)("div",{ref:i,className:(0,d.cn)(a(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,d.cn)("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:(0,t.jsxs)("div",{className:`relative block size-full overflow-hidden graphic-children ${e?.href?"cursor-pointer":""}`,children:[e?.href?(0,t.jsx)("a",{"aria-label":e?.title??e?.description,href:(0,x.trackUrlRef)(e?.href||"",`${c}_${m}`),className:"block size-full overflow-hidden","data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${c}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:(0,t.jsx)(n.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):(0,t.jsx)("div",{className:"block size-full overflow-hidden",children:(0,t.jsx)(n.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),(0,t.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[(0,t.jsxs)("div",{className:(0,d.cn)("flex items-end overflow-hidden","graphic-bottom"),children:[(0,t.jsxs)("div",{className:"flex-1 overflow-hidden",children:[(0,t.jsx)(n.Text,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&(0,t.jsx)(n.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&(0,t.jsx)("button",{"aria-label":"Play Video",onClick:l=>{l.preventDefault(),l.stopPropagation(),s?.onVideoPlayBtnClick?.(s?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&(0,t.jsx)("button",{onClick:l=>{l.preventDefault(),l.stopPropagation(),s?.onIconClick?.(e,s)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:(0,t.jsx)(n.Picture,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&(0,t.jsx)(n.Button,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:(0,x.trackUrlRef)(e?.href,`${c}_${m}`),"data-headless-nav-postion":`''#${s?.index+1}`,"data-headless-type-name":`${c}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},N=o.default.forwardRef(({data:e,className:s},i)=>{const a=(0,M.useMediaQuery)({query:"(max-width: 768px)"}),l=(0,o.useRef)(null),[S,v]=(0,o.useState)(!1),[w,G]=(0,o.useState)(""),[B,D]=(0,o.useState)(""),[E,H]=(0,o.useState)(""),[L,y]=(0,o.useState)(null),[U,k]=(0,o.useState)(!1),u=p=>{const r=e?.items?.length>3,h=e?.items?.length>2;switch(p){case 1440:return r?4:e?.items?.length;case 1024:return r?3:e?.items?.length;case 768:return r||h?2.3:2;default:return 1.2}};return(0,o.useImperativeHandle)(i,()=>l.current),(0,g.useExposure)(l,{componentType:c,componentName:m,componentTitle:e?.title}),(0,o.useEffect)(()=>{const p=l.current?.querySelectorAll(".graphic-description");if(p&&p.length>0){let r=0;p.forEach(h=>{r=Math.max(r,h.offsetHeight)}),p.forEach(h=>{h.style.height=`${r}px`})}},[]),(0,t.jsxs)("div",{className:(0,d.cn)("graphicBlock",s),ref:l,children:[(0,t.jsxs)("div",{className:"graphic-box",children:[e?.title&&(0,t.jsx)(C.default,{data:{title:e?.title}}),(0,t.jsx)(V.default,{id:"Graphic",className:(0,d.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(p,r)=>{v(!0),r?.isYouTube?D?.(r?.youtubeId||""):(G?.(r?.video?.url||""),H?.(r?.mobileVideo?.url||""))},onIconClick:p=>{k(!0),y(p)},title:e?.title}},Slide:Q,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u()},768:{spaceBetween:16,freeMode:!1,slidesPerView:u(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:u(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:u(1440)}}})]}),(0,t.jsx)($.VideoModal,{visible:S,youTubeId:B,onCloseModal:()=>v(!1),videoUrl:a&&E||w}),(0,t.jsx)(P.TextModal,{textVisible:U,extension:L?.extension,onCloseModal:()=>{k(!1),y(null)}})]})});N.displayName="Graphic";var Z=(0,I.withLayout)(N);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div className=\"relative block size-full cursor-pointer overflow-hidden\">\n {data?.href ? (\n <a\n aria-label={data?.title ?? data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n ) : (\n <div className=\"block size-full cursor-pointer overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </div>\n )}\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white 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 {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div\n className={`relative block size-full overflow-hidden graphic-children ${data?.href ? 'cursor-pointer' : ''}`}\n >\n {data?.href ? (\n <a\n aria-label={data?.title ?? data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"block size-full overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n ) : (\n <div className=\"block size-full overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </div>\n )}\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white 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 {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react_responsive", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "import_VideoModal", "import_TextModal", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "ref", "handleAspect", "e", "Graphic", "React", "className", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "Title", "SwiperBox", "_"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var me=Object.create;var G=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var ge=(t,n)=>{for(var o in n)G(t,o,{get:n[o],enumerable:!0})},Z=(t,n,o,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of be(n))!ve.call(t,r)&&r!==o&&G(t,r,{get:()=>n[r],enumerable:!(c=pe(n,r))||c.enumerable});return t};var K=(t,n,o)=>(o=t!=null?me(fe(t)):{},Z(n||!t||!t.__esModule?G(o,"default",{value:t,enumerable:!0}):o,t)),he=t=>Z(G({},"__esModule",{value:!0}),t);var He={};ge(He,{default:()=>Ee});module.exports=he(He);var e=require("react/jsx-runtime"),a=K(require("react")),l=require("../../components/index.js"),se=require("../../shared/Styles.js"),k=require("../../helpers/utils.js"),B=K(require("./NavProvider.js")),x=require("./types.js"),$e=require("react-responsive"),ie=require("es-toolkit"),ce=K(require("jump.js")),J=require("@gsap/react"),V=require("gsap"),T=require("./withCategory.js"),P=require("./icons/index.js"),de=K(require("../NavigationSearch/index.js"));const ye=(0,a.forwardRef)((t,n)=>{const{data:{headerNavigation:o}={},buildProps:c,event:r,profile:f,theme:u="light",isTop:m=!1,searchResult:d,onSearch:w,isSearching:i,keywords:C,onPrimaryNavClick:N,onSeriesProductClick:v,onSidebarNavClick:g,headerId:h,cartCount:p}=t,s=(0,a.useRef)(null),[b,S]=(0,a.useState)(!1),[D,z]=(0,a.useState)(!1),[L,j]=(0,a.useState)(!1),[_,M]=(0,a.useState)(!1),$=(0,a.useRef)(null),R=()=>{const F=document?.querySelector("body")?.offsetWidth||0;M(F<=1440)};(0,a.useEffect)(()=>(R(),window.addEventListener("resize",R),()=>{window.removeEventListener("resize",R)}),[]),(0,a.useImperativeHandle)(n,()=>$.current),(0,a.useEffect)(()=>{$.current&&m&&(0,ce.default)($.current,{duration:0,offset:$.current?.getBoundingClientRect()?.bottom||0})},[m]),(0,a.useEffect)(()=>{r&&(r.search=()=>S(!0))},[r]),(0,J.useGSAP)(()=>{s?.current&&b&&V.gsap.fromTo(s.current,{height:0},{height:"auto",duration:.3})},[b]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=b?"hidden":"auto"},[b]);const q=(0,a.useMemo)(()=>o?.headerBar?.actions?.find(F=>F?.blockType===x.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[o]);return(0,e.jsx)(B.default,{buildProps:c,profile:f,isMobile:_,event:r,payloadData:o,onSidebarNavClick:g,onSeriesProductClick:v,cartCount:p,children:(0,e.jsx)("header",{id:h||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:$,children:(0,e.jsxs)("div",{className:(0,k.cn)("hover:text-black hover:bg-white",u==="light"?"text-black":"text-white",{}),onClick:()=>j(!0),children:[(0,e.jsx)(xe,{data:o,className:"hidden desktop:block !bg-white",theme:u,onNavItemClick:()=>j(!0),onPrimaryNavClick:N}),(0,e.jsx)(Ce,{data:o,className:"block desktop:hidden !bg-white",onPrimaryNavClick:N}),b&&(0,e.jsxs)("div",{className:"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col",style:{height:`calc(100dvh - ${$?.current?.getBoundingClientRect()?.top}px)`},children:[(0,e.jsx)("div",{ref:s,className:(0,k.cn)("overflow-y-auto",{}),children:(0,e.jsx)(de.default,{data:q,keywords:C,isSearching:i,searchResult:d,onSearch:F=>{w?.(F)},onClose:()=>{w?.(),S(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1)})]})]})})})}),xe=(0,a.forwardRef)((t,n)=>{const{data:o,onNavItemClick:c,className:r,theme:f,onPrimaryNavClick:u}=t,{event:m,profile:d}=(0,B.useNavContext)(),[w,i]=(0,a.useState)(!1),C=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(o?.categories?.filter(y=>y?.pcShow)),[o]),[N,v]=(0,a.useState)(null),[g,h]=(0,a.useState)([]),p=(0,a.useRef)(null),[s,b]=(0,a.useState)(!1),S=(0,a.useRef)(null),D=(0,a.useRef)(null),z=(0,a.useRef)(C.map(y=>Array(y?.length||0).fill(null)));(0,a.useEffect)(()=>{C?.length&&h(C?.map((y,E)=>y?.map((H,A)=>({groupIndex:E,index:A,open:!1}))))},[C]);const L=(0,a.useMemo)(()=>{let y=null;for(const E of g){for(const H of E)if(H.open){y=H;break}if(y)break}return y},[g]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=L?.open||s?"hidden":"auto"},[L?.open,s]);const j=(y,E,H)=>{if(b(!1),N?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links)N?.components?.[0]?.url&&window.open(N?.components?.[0]?.url);else{const A=C?.flat()||[],I=A?.findIndex(Y=>Y?.id===C[E][H]?.id);y.stopPropagation(),c?.(),u?.(A[I],I),v(C[E][H]),h(Y=>Y.map(ue=>ue.map(W=>W.groupIndex===E&&W.index===H?{...W,open:!W.open}:{...W,open:!1})))}},_=()=>{h(y=>y.map(E=>E.map(H=>({...H,open:!1}))))},M=(0,a.useMemo)(()=>{if(N)return N?.components?.[0]?.blockType},[N]),$=(0,T.WithSidebar)(Ne,N),R=(0,T.WithMulticol)(ke,N),q=(0,T.WithSupports)(we,{categoriesItem:N,currentNavItemRef:z.current?.[L?.groupIndex||0]?.[L?.index||0]}),F=(0,a.useMemo)(()=>{switch(M){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)($,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(q,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(R,{});default:return null}},[M,N]),Q=(0,a.useMemo)(()=>o?.headerBar?.actions?.filter(y=>y?.pcShow),[o]),O=(0,a.useMemo)(()=>Q?.find(y=>y?.blockType===x.HeaderNavigationActionBlockType.Profile),[Q]),X=(0,a.useCallback)(()=>{b(y=>!y)},[]);return(0,a.useEffect)(()=>{if(p?.current){const y=p.current;return y.addEventListener("click",X),()=>{y.removeEventListener("click",X)}}},[X]),(0,J.useGSAP)(()=>{L?.open&&V.gsap.fromTo(D?.current,{height:0},{height:"auto"})},[L?.open]),(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[96px]",r),children:[(0,e.jsxs)("div",{ref:S,onClick:_,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)(le,{}),(0,e.jsx)(oe,{ref:p,actions:Q,activeStatus:s})]}),(0,e.jsx)("div",{className:"flex justify-between",children:C?.map((y,E)=>(0,e.jsx)("div",{className:"flex gap-3",children:y?.map((H,A)=>(0,e.jsx)("div",{ref:I=>{z.current[E][A]=I},className:"group cursor-pointer",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1 pb-4",onClick:I=>j(I,E,A),children:[(0,e.jsx)(l.Text,{html:H.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":L?.groupIndex===E&&L?.index===A,"opacity-100":w&&L?.groupIndex===E&&L?.index===A})})]}),(0,e.jsx)("div",{className:(0,k.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":L?.groupIndex===E&&L?.index===A},f==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},H.id))},`groupCategory-${E}`))})]}),(0,e.jsxs)("div",{className:(0,k.cn)("border-t border-b-[#E4E5E6] text-black absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70 overflow-hidden",{hidden:!(L?.open&&N)}),onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),style:{height:`calc(100dvh - ${S?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:D,className:(0,k.cn)("relative z-50",{"overflow-hidden":M!==x.HeaderNavigationBlockType.Supports}),children:F}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:_})]}),s&&(0,e.jsxs)("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full",children:[(0,e.jsx)("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${p?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:d?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:d?.nick_name||O?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),(0,e.jsx)("div",{className:"mt-2",children:O?.profiles?.map(y=>(0,e.jsx)(U,{className:"py-2",label:y?.title,href:y?.url},y.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(P.Polygon,{className:"absolute -top-2 text-white right-[46px] z-30"}),(0,e.jsx)(l.Text,{html:O?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:O?.benefits?.map(y=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:y.benefitIcon?.url,className:"size-4",alt:y.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:y.benefit,className:"text-sm font-bold leading-[1.4]"})]},y.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>m?.join?.(),children:(0,e.jsx)(l.Text,{html:O?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>m?.login?.(),children:(0,e.jsx)(l.Text,{html:O?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>b(!1)})]})]})}),Ne=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:o,onSidebarNavClick:c}=(0,B.useNavContext)(),[r,f]=(0,a.useState)([]),[u,m]=(0,a.useState)(-1),d=(0,a.useRef)(null),w=(0,a.useCallback)(()=>{const v=t?.subcategories;if(!v?.length)return;const g=v.findIndex(s=>!!s?.subSubCategories),h=v.findIndex(s=>!s?.subSubCategories),p=v.map((s,b)=>({index:b,open:g===b||h===b}));f(p)},[t]);(0,a.useEffect)(()=>{w()},[w]);const i=(0,a.useMemo)(()=>{const v=t?.subcategories?.[r?.find(h=>h.open)?.index||0],g=n?.find(h=>h?.label?.toLowerCase()===v?.label?.toLowerCase())||{};if(v?.collections){const h=o?.categories?.[v?.collections]||{};return{label:g?.label,isCollection:!0,banner:g?.banner,primary:g?.primary,series:[{products:h?.products}]}}else if(v?.subSubCategories){const h=v?.subSubCategories?.[u],p=n?.find(s=>s?.label?.toLowerCase()===h?.label?.toLowerCase())||{};if(h?.collections){const s=o?.categories?.[h?.collections]||{};return{label:p?.label,isCollection:!0,banner:p?.banner,primary:p?.primary,series:[{products:s?.products}]}}else return p}else return g},[t,r,u,n]),C=(0,a.useCallback)((v,g)=>{if(g?.subSubCategories?.length>0?m(0):m(-1),g?.subSubCategories?.length>0)f(h=>h.map(p=>p.index===v?{...p,open:!0}:{...p,open:!1}));else{const p=t?.subcategories?.findIndex(s=>!!s?.subSubCategories);f(s=>s.map(b=>({...b,open:b.index===v||b.index===p})))}},[t,w]),N=(v,g)=>{f(h=>h.map(p=>p.index===v?{...p,open:!0}:{...p,open:!1})),m(g)};return(0,e.jsxs)(l.Container,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[(0,e.jsxs)("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:d,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((v,g)=>{const h=Array.isArray(v?.subSubCategories)&&v?.subSubCategories?.length>0;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:(0,k.cn)("flex cursor-pointer items-center justify-between",{"bg-[#F5F5F7]":!h&&r?.find(p=>p.index===g)?.open}),onClick:()=>{C(g,v),c?.(v,g)},children:[(0,e.jsx)(l.Text,{html:v.label,className:"p-4 text-sm font-bold leading-[1.4]"}),h&&(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("size-4",{"rotate-180":r?.find(p=>p.index===g)?.open})})]}),r?.find(p=>p.index===g)?.open&&(0,e.jsx)("div",{className:"flex flex-col",children:v.subSubCategories?.map((p,s)=>(0,e.jsx)(l.Text,{html:p.label,onClick:()=>{N(g,s),c?.(p,s)},className:(0,k.cn)("cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]",{"bg-[#F5F5F7]":u===s})},`subSubItem-${g}-${s}`))})]},`subcategoryItem-${g}`)})}),t&&(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"text-sm lg-desktop:text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base",children:t?.secondary?.label})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(i).length>0&&(0,e.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(l.Text,{html:i?.label,className:"text-xl lg-desktop:text-2xl font-bold leading-[1.4]"}),i?.primary&&!i?.primary?.hide&&(0,e.jsx)(l.Button,{as:"a",href:`${i?.primary?.url}?ref=${i?.label}_viewmore`,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base font-bold leading-[1.2] no-underline",children:i?.primary?.label})]}),(0,e.jsx)(l.Link,{href:i?.guide?.url,className:"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]",children:i?.guide?.label})]}),(0,e.jsx)("div",{className:"flex flex-col gap-4 overflow-y-auto h-[426px]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:i?.series?.map((v,g)=>(0,e.jsxs)("div",{children:[v.label&&(0,e.jsx)(l.Text,{html:v.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!i?.banner&&(0,e.jsx)(l.Link,{asChild:!i?.banner?.href,href:i?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[(0,e.jsx)(l.Picture,{source:i?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:i?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),(0,e.jsx)(l.Text,{html:i?.banner?.desc||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),v.products?.map((h,p)=>(0,e.jsx)(ee,{seriesLabel:i?.label,product:h,isCollection:i?.isCollection},`seriesProductItem-${p}`))]})]},`seriesItem-${g}`))})]})]})}),ke=({multicolMetadata:t})=>{const n=(0,a.useRef)(null);return(0,e.jsx)("div",{ref:n,children:(0,e.jsx)(l.Container,{childClassName:"bg-white",className:"h-full",children:(0,e.jsx)("div",{className:"flex gap-4 py-4",children:t?.map((o,c)=>(0,e.jsx)("div",{className:"w-1/4",children:(0,e.jsx)(te,{item:o})},`multicolItem-${o?.label}-${c}`))})})})},we=({supportsMetadata:t,currentNavItemRef:n})=>{const o=(0,a.useRef)(null),[c,r]=(0,a.useState)(null),[f,u]=(0,a.useState)(0);(0,a.useEffect)(()=>{if(o?.current){const d=o?.current?.getBoundingClientRect();u(d.height)}},[o]);const m=(0,ie.debounce)(()=>{if(n){const d=n.getBoundingClientRect();r(d)}},500);return(0,a.useEffect)(()=>(m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m)}),[m]),(0,a.useEffect)(()=>{if(n){const d=n.getBoundingClientRect();r(d)}},[n]),(0,e.jsx)("div",{className:"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden",style:{right:`calc(100% - ${c?.right}px)`,height:f},children:(0,e.jsx)("div",{ref:o,className:"p-4",children:t?.map(d=>(0,e.jsx)("div",{className:"py-2",children:(0,e.jsx)(l.Link,{href:d.url,className:"text-sm font-bold leading-[1.4] no-underline",children:d.label})},d.id))})})},ee=({product:t,isCollection:n,position:o,seriesLabel:c})=>{const{buildProps:r,onSeriesProductClick:f}=(0,B.useNavContext)();let u=n?t:r?.products?.find(i=>i.handle===t.handle);const m=u?.variants?.find(i=>i.sku===t.sku)||u?.variants?.[0],d=(0,a.useMemo)(()=>`/products/${u?.handle}?variant=${(0,k.atobID)(m?.id)}`,[u?.handle,m?.id]),w=(0,a.useMemo)(()=>u?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,2),[u?.tags]);return m?.availableForSale?(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)(l.Picture,{source:`${m?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"flex gap-1",children:Array.isArray(w)&&w?.map(i=>(0,e.jsx)(l.Text,{as:"p",html:i,className:"text-brand-0 whitespace-nowrap mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"}))}),(0,e.jsx)(l.Link,{href:d,onClick:i=>{i.preventDefault(),window.open(d),f?.(u,o||0,c)},className:"no-underline hover:text-current",children:(0,e.jsx)(l.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:u?.title||t?.name})}),t?.desc&&(0,e.jsx)(l.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]}):null},te=({item:t,allPicture:n})=>(0,e.jsxs)(e.Fragment,{children:[t?.columns&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col",children:t.columns?.map(o=>(0,e.jsxs)("div",{className:"py-2 flex items-center gap-1",children:[(0,e.jsx)(l.Link,{href:`${o.url}?ref=navMenu`,asChild:!o.url,className:"text-sm font-bold leading-[1.4] no-underline",children:o.label}),o?.badge&&(0,e.jsx)(l.Text,{as:"p",html:o?.badge||"badge",className:"text-sm font-bold !leading-[22px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]"})]},o.label))})]}),t?.imageUrl&&(0,e.jsx)("div",{className:(0,k.cn)("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] h-[240px] max-w-[358px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative overflow-hidden",{"tablet:max-w-none laptop:max-w-none":n}),children:(0,e.jsxs)(l.Link,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[(0,e.jsx)(l.Picture,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),(0,e.jsxs)("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[(0,e.jsx)(l.Text,{html:t.title,className:(0,k.cn)("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&(0,e.jsx)(l.Text,{html:t.subtitle,className:(0,k.cn)("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&(0,e.jsx)(l.Button,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:(0,k.cn)("text-sm font-bold mr-auto !p-0 leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),Ce=(0,a.forwardRef)(({data:t,className:n,onPrimaryNavClick:o},c)=>{const r=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(t?.categories?.filter(M=>M?.mobileShow)),[t]),{currentMenu:f,setCurrentMenu:u,subSubCategory:m}=(0,B.useNavContext)(),[d,w]=(0,a.useState)(!1),[i,C]=(0,a.useState)(0),[N,v]=(0,a.useState)(null),g=(0,a.useRef)(null);(0,a.useEffect)(()=>{if(g?.current&&d){const M=g?.current?.getBoundingClientRect();C(window?.innerHeight-(M?.bottom||0))}},[d]),(0,J.useGSAP)(()=>{V.gsap.fromTo(g.current,{height:0},{height:i,duration:.3})},[i]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=d?"hidden":"auto"},[d]);const h=(0,a.useMemo)(()=>N?.components?.[0]?.blockType,[N]),p=(0,T.WithSupports)(Le,{categoriesItem:N}),s=(0,T.WithSidebar)(De,N),b=(0,T.WithMulticol)(Me,N),S=(0,a.useMemo)(()=>{switch(h){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(s,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(p,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(b,{});default:return null}},[h,N,p]),D=(0,a.useCallback)(()=>{w(!1),C(0),u&&u(x.HeaderNavigationMenu.Primary)},[w,C,u]),z=(0,a.useMemo)(()=>t?.headerBar?.actions?.filter(M=>M?.mobileShow&&M?.blockType!==x.HeaderNavigationActionBlockType.Profile),[t]),L=(0,a.useMemo)(()=>t?.headerBar?.actions?.find(M=>M?.mobileShow&&M?.blockType===x.HeaderNavigationActionBlockType.Profile)||{},[t]),j=(0,a.useMemo)(()=>{switch(f){case x.HeaderNavigationMenu.Primary:return(0,e.jsx)(ze,{actions:z,menuOpen:d,onMenuOpenClose:()=>{w(!1),C(0)},onMenuOpenClick:()=>w(!0)});case x.HeaderNavigationMenu.Secondary:return(0,e.jsx)(re,{title:N?.text,onMenuOpenClose:D,onMenuBackClick:()=>u?.(x.HeaderNavigationMenu.Primary)});case x.HeaderNavigationMenu.Third:return(0,e.jsx)(re,{title:m?.label,onMenuOpenClose:D,onMenuBackClick:()=>u?.(x.HeaderNavigationMenu.Secondary)});default:return null}},[d,f,u,N,z,m,D]),_=(0,a.useCallback)((M,$)=>{const R=Array.isArray(r)?Array.isArray(r[M])?r[M][$]:{}:{};v(R),R?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links?R?.components?.[0]?.url&&window.open(R?.components?.[0]?.url):u?.(x.HeaderNavigationMenu.Secondary)},[r,u]);return(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[52px]",n),children:[j,d&&(0,e.jsx)("div",{ref:g,className:"absolute left-0 top-full text-black border-t border-[#E4E5E6] z-[999] w-full overflow-y-auto bg-white",style:{height:i},children:f===x.HeaderNavigationMenu.Primary?(0,e.jsx)(Se,{categories:r,onPrimaryMenuClick:_,onPrimaryNavClick:o,profileAction:L}):S})]})}),Se=({categories:t,onPrimaryMenuClick:n,profileAction:o,onPrimaryNavClick:c})=>{const{onSidebarNavClick:r}=(0,B.useNavContext)();return(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((f,u)=>(0,e.jsxs)("div",{className:"",children:[f?.map((m,d)=>(0,e.jsx)(U,{label:m.text,onClick:()=>{const i=(t?.flat()||[])?.findIndex(C=>C?.id===t[u][d]?.id);n(u,d),c?.(m,i)},icon:m.components?.[0]?.icon},m.id)),(0,e.jsx)("div",{className:(0,k.cn)("my-2 h-px w-full bg-[#E5E5E7]",{hidden:u===t.length-1})})]},`groupCategory-${u}`))}),(0,e.jsx)(Pe,{profileAction:o})]})},De=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:o,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:f,setCurrentSeriesMetadata:u,currentSeriesMetadata:m,buildProps:d,onSidebarNavClick:w}=(0,B.useNavContext)(),[i,C]=(0,a.useState)([]),[N,v]=(0,a.useState)([]);(0,a.useEffect)(()=>{t?.subcategories?.length&&C(t?.subcategories?.map((s,b)=>({index:b,open:!1})))},[t]),(0,a.useEffect)(()=>{r?.subSubCategories?.length&&v(r?.subSubCategories?.map((s,b)=>({index:b,open:b===0})))},[r]);const g=(0,a.useCallback)((s,b)=>{c&&c(x.HeaderNavigationMenu.Third),f?.(s);const S=n?.find(D=>b!==void 0?s?.subSubCategories?.[b]?.label?.toLowerCase()===D.label?.toLowerCase():s?.label?.toLowerCase()===D.label?.toLowerCase())||{};if(s?.collections){const D=d?.categories?.[s?.collections]||{};u?.({label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:D?.products}]})}else u?.(S)},[n,t,c,f,u]),h=(0,a.useMemo)(()=>n?.find(s=>!!s?.guide)?.guide,[n,t]);return(0,a.useMemo)(()=>{switch(o){case x.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4",children:[(0,e.jsx)("div",{children:t?.subcategories?.map((s,b)=>(0,e.jsx)("div",{children:(0,e.jsx)(U,{label:s?.label,active:i.find(S=>S.index===b)?.open,onClick:()=>{g(s),w?.(s,b)}})},`${s.label}-${b}`))}),(0,e.jsxs)("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case x.HeaderNavigationMenu.Third:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[r?.subSubCategories?r?.subSubCategories?.map((s,b)=>{const S=n?.find(z=>z.label.toLowerCase()===s?.label?.toLowerCase())||{};let D={};if(s?.collections){const z=d?.categories?.[s?.collections]||{};D={label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:z?.products}]}}else D=S;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(s).length>0&&(0,e.jsx)(ae,{matchSeriesMetadata:D,onSubSubCategoryItemClick:()=>{w?.(s,b),v(z=>z.map((L,j)=>({...L,open:j===b?!L.open:L.open})))},expanded:!!N?.find(z=>z.index===b)?.open}),N?.find(z=>z.index===b)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(ne,{matchSeriesMetadata:D}),D?.primary&&(0,e.jsx)("div",{className:"text-center my-4",children:(0,e.jsx)(l.Button,{as:"a",href:D?.primary?.url,className:"text-base no-underline leading-[1.2]",variant:"secondary",size:"base",children:D?.primary?.label})})]})]},`${s.label}-${b}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(m).length>0&&(0,e.jsx)(ae,{matchSeriesMetadata:m}),(0,e.jsx)(ne,{matchSeriesMetadata:m}),m?.primary&&(0,e.jsx)("div",{className:"text-center my-4 ",children:(0,e.jsx)(l.Button,{as:"a",href:`${m?.primary?.url}?ref=${m?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base no-underline leading-[1.2]",children:m?.primary?.label})})]}),h&&(0,e.jsx)(l.Link,{href:h?.url,children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(l.Text,{html:h?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[o,t,c,n,i,N,f,r,u,m])},ae=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:o})=>(0,e.jsxs)("div",{className:"tablet:pt-0 py-4 flex items-center justify-between",onClick:n,children:[t?.label&&(0,e.jsx)(l.Text,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),n&&(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("size-5",{"rotate-180":o})})]}),ne=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"flex flex-col gap-2 laptop:gap-3",children:!!t?.series?.length&&t?.series?.map((n,o)=>(0,e.jsxs)("div",{children:[n.label&&(0,e.jsx)(l.Text,{html:n.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]"}),(0,e.jsxs)("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&(0,e.jsx)(l.Link,{asChild:!t?.banner?.href,href:t?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[(0,e.jsx)(l.Picture,{source:t?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:t?.banner?.title||"Buy in Guide",className:(0,k.cn)("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),(0,e.jsx)(l.Text,{html:t?.banner?.desc||"20.000mAh",className:(0,k.cn)("text-sm text-white font-bold",{"text-black":t?.banner?.theme==="dark"})})]})]})}),n.products?.map((c,r)=>(0,e.jsx)(ee,{position:r,product:c,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${o}-${r}`))]})]},`seriesItem-${o}`))}),Le=({supportsMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(n=>(0,e.jsx)(U,{href:n.url,label:n.label,onClick:()=>{}},n.id))}),Me=({multicolMetadata:t})=>{const n=(0,a.useMemo)(()=>!t?.some(o=>!!o.columns),[t]);return(0,e.jsx)("div",{className:(0,k.cn)("tablet:py-4 tablet:px-8 laptop:px-16 flex flex-col gap-4 tablet:gap-6 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":n}),children:t?.map((o,c)=>(0,e.jsx)("div",{children:(0,e.jsx)(te,{item:o,allPicture:n})},`multicolItem-${o?.label}-${c}`))})},Pe=({profileAction:t})=>{const[n,o]=(0,a.useState)(!1),{profile:c,event:r}=(0,B.useNavContext)();return(0,e.jsxs)("div",{className:(0,k.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":n}),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",onClick:()=>o(!n),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)(P.User,{})}),(0,e.jsx)(l.Text,{html:c?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("size-5 laptop:size-4",{"rotate-180":n})})]}),c?.email&&(0,e.jsx)("div",{className:"mt-4",children:t?.profiles?.map(f=>(0,e.jsx)(U,{label:f?.title,href:f?.url},f.id))}),n&&!c?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(f=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:f.benefitIcon?.url,className:"size-4",alt:f.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:f.benefit,className:"text-sm font-bold leading-[1.4]"})]},f.id))})]}),!c?.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:()=>r?.join?.(),children:(0,e.jsx)(l.Text,{html:t?.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:()=>r?.login?.(),children:(0,e.jsx)(l.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},ze=({menuOpen:t,onMenuOpenClose:n,onMenuOpenClick:o,actions:c})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(le,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(oe,{actions:c}),t?(0,e.jsx)(P.Close,{className:"size-5",onClick:()=>n()}):(0,e.jsx)(P.Menu,{className:"size-5",onClick:()=>o()})]})]}),le=()=>{const{payloadData:t,isMobile:n}=(0,B.useNavContext)();return(0,e.jsx)("div",{className:"[&>svg]:w-full hover:text-brand-0 cursor-pointer",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:n?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},oe=(0,a.forwardRef)(({actions:t,activeStatus:n=!1},o)=>{const{event:c,cartCount:r}=(0,B.useNavContext)(),[f,u]=(0,a.useState)(null),m=(0,a.useCallback)((d,w)=>{switch(u(w),d?.blockType){case x.HeaderNavigationActionBlockType.Search:c?.search?.();break;case x.HeaderNavigationActionBlockType.Cart:c?.cart?.();break;case x.HeaderNavigationActionBlockType.Profile:c?.profile?.();break;case x.HeaderNavigationActionBlockType.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((d,w)=>(0,e.jsxs)("div",{className:"relative",ref:d.blockType===x.HeaderNavigationActionBlockType.Profile?o:null,onClick:()=>m(d,w),children:[(0,e.jsx)(l.Text,{html:d.icon,className:(0,k.cn)("cursor-pointer size-5",{"text-brand-0":n&&f===w})}),d.blockType===x.HeaderNavigationActionBlockType.Cart&&r>0&&(0,e.jsx)("div",{className:"absolute min-h-5 z-[1] min-w-5 flex px-[2px] items-center justify-center right-[-12px] top-[calc(100%-16px)] bg-brand-0 rounded-full",children:(0,e.jsx)(l.Text,{html:r?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},d.id))})}),re=({title:t,onMenuOpenClose:n,onMenuBackClick:o})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)(P.LeftArrow,{className:"size-5",onClick:()=>o()}),(0,e.jsx)(l.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)(P.Close,{className:"size-5",onClick:()=>n()})]}),U=({label:t,href:n,onClick:o,active:c,icon:r,className:f})=>(0,e.jsx)("div",{className:(0,k.cn)("flex cursor-pointer items-center justify-between py-4",f),onClick:o,children:(0,e.jsxs)(l.Link,{href:n,asChild:!n,className:"flex w-full items-center justify-between no-underline",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(l.Text,{html:t,className:(0,k.cn)("text-sm font-bold leading-[1.4]",{underline:r})}),r&&(0,e.jsx)(l.Text,{html:r})]}),(0,e.jsx)(P.RightArrow,{className:(0,k.cn)("size-5 laptop:size-4",{"rotate-90":c})})]})});var Ee=(0,se.withLayout)(ye);
|
|
1
|
+
"use strict";"use client";var me=Object.create;var G=Object.defineProperty;var pe=Object.getOwnPropertyDescriptor;var be=Object.getOwnPropertyNames;var fe=Object.getPrototypeOf,ve=Object.prototype.hasOwnProperty;var ge=(t,n)=>{for(var o in n)G(t,o,{get:n[o],enumerable:!0})},Z=(t,n,o,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of be(n))!ve.call(t,r)&&r!==o&&G(t,r,{get:()=>n[r],enumerable:!(c=pe(n,r))||c.enumerable});return t};var K=(t,n,o)=>(o=t!=null?me(fe(t)):{},Z(n||!t||!t.__esModule?G(o,"default",{value:t,enumerable:!0}):o,t)),he=t=>Z(G({},"__esModule",{value:!0}),t);var He={};ge(He,{default:()=>Ee});module.exports=he(He);var e=require("react/jsx-runtime"),a=K(require("react")),l=require("../../components/index.js"),se=require("../../shared/Styles.js"),k=require("../../helpers/utils.js"),B=K(require("./NavProvider.js")),x=require("./types.js"),$e=require("react-responsive"),ie=require("es-toolkit"),ce=K(require("jump.js")),J=require("@gsap/react"),V=require("gsap"),T=require("./withCategory.js"),P=require("./icons/index.js"),de=K(require("../NavigationSearch/index.js"));const ye=(0,a.forwardRef)((t,n)=>{const{data:{headerNavigation:o}={},buildProps:c,event:r,profile:f,theme:u="light",isTop:m=!1,searchResult:d,onSearch:w,isSearching:i,keywords:C,onPrimaryNavClick:N,onSeriesProductClick:v,onSidebarNavClick:g,headerId:h,cartCount:p}=t,s=(0,a.useRef)(null),[b,S]=(0,a.useState)(!1),[D,z]=(0,a.useState)(!1),[L,j]=(0,a.useState)(!1),[_,M]=(0,a.useState)(!1),$=(0,a.useRef)(null),R=()=>{const F=document?.querySelector("body")?.offsetWidth||0;M(F<=1440)};(0,a.useEffect)(()=>(R(),window.addEventListener("resize",R),()=>{window.removeEventListener("resize",R)}),[]),(0,a.useImperativeHandle)(n,()=>$.current),(0,a.useEffect)(()=>{$.current&&m&&(0,ce.default)($.current,{duration:0,offset:$.current?.getBoundingClientRect()?.bottom||0})},[m]),(0,a.useEffect)(()=>{r&&(r.search=()=>S(!0))},[r]),(0,J.useGSAP)(()=>{s?.current&&b&&V.gsap.fromTo(s.current,{height:0},{height:"auto",duration:.3})},[b]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=b?"hidden":"auto"},[b]);const q=(0,a.useMemo)(()=>o?.headerBar?.actions?.find(F=>F?.blockType===x.HeaderNavigationActionBlockType.Search)?.searchBar?.[0]||{},[o]);return(0,e.jsx)(B.default,{buildProps:c,profile:f,isMobile:_,event:r,payloadData:o,onSidebarNavClick:g,onSeriesProductClick:v,cartCount:p,children:(0,e.jsx)("header",{id:h||"header","data-ui-component-id":"HeaderNavigation",className:"relative z-[100] bg-white",ref:$,children:(0,e.jsxs)("div",{className:(0,k.cn)("hover:text-black hover:bg-white",u==="light"?"text-black":"text-white",{}),onClick:()=>j(!0),children:[(0,e.jsx)(xe,{data:o,className:"hidden desktop:block !bg-white",theme:u,onNavItemClick:()=>j(!0),onPrimaryNavClick:N}),(0,e.jsx)(Ce,{data:o,className:"block desktop:hidden !bg-white",onPrimaryNavClick:N}),b&&(0,e.jsxs)("div",{className:"absolute z-[60] top-0 left-0 w-full bg-black/70 flex flex-col",style:{height:`calc(100dvh - ${$?.current?.getBoundingClientRect()?.top}px)`},children:[(0,e.jsx)("div",{ref:s,className:(0,k.cn)("overflow-y-auto",{}),children:(0,e.jsx)(de.default,{data:q,keywords:C,isSearching:i,searchResult:d,onSearch:F=>{w?.(F)},onClose:()=>{w?.(),S(!1)}})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>S(!1)})]})]})})})}),xe=(0,a.forwardRef)((t,n)=>{const{data:o,onNavItemClick:c,className:r,theme:f,onPrimaryNavClick:u}=t,{event:m,profile:d}=(0,B.useNavContext)(),[w,i]=(0,a.useState)(!1),C=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(o?.categories?.filter(y=>y?.pcShow)),[o]),[N,v]=(0,a.useState)(null),[g,h]=(0,a.useState)([]),p=(0,a.useRef)(null),[s,b]=(0,a.useState)(!1),S=(0,a.useRef)(null),D=(0,a.useRef)(null),z=(0,a.useRef)(C.map(y=>Array(y?.length||0).fill(null)));(0,a.useEffect)(()=>{C?.length&&h(C?.map((y,E)=>y?.map((H,A)=>({groupIndex:E,index:A,open:!1}))))},[C]);const L=(0,a.useMemo)(()=>{let y=null;for(const E of g){for(const H of E)if(H.open){y=H;break}if(y)break}return y},[g]);(0,a.useEffect)(()=>{document.documentElement.style.overflow=L?.open||s?"hidden":"auto"},[L?.open,s]);const j=(y,E,H)=>{if(b(!1),N?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links)N?.components?.[0]?.url&&window.open(N?.components?.[0]?.url);else{const A=C?.flat()||[],I=A?.findIndex(Y=>Y?.id===C[E][H]?.id);y.stopPropagation(),c?.(),u?.(A[I],I),v(C[E][H]),h(Y=>Y.map(ue=>ue.map(W=>W.groupIndex===E&&W.index===H?{...W,open:!W.open}:{...W,open:!1})))}},_=()=>{h(y=>y.map(E=>E.map(H=>({...H,open:!1}))))},M=(0,a.useMemo)(()=>{if(N)return N?.components?.[0]?.blockType},[N]),$=(0,T.WithSidebar)(Ne,N),R=(0,T.WithMulticol)(ke,N),q=(0,T.WithSupports)(we,{categoriesItem:N,currentNavItemRef:z.current?.[L?.groupIndex||0]?.[L?.index||0]}),F=(0,a.useMemo)(()=>{switch(M){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)($,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(q,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(R,{});default:return null}},[M,N]),Q=(0,a.useMemo)(()=>o?.headerBar?.actions?.filter(y=>y?.pcShow),[o]),O=(0,a.useMemo)(()=>Q?.find(y=>y?.blockType===x.HeaderNavigationActionBlockType.Profile),[Q]),X=(0,a.useCallback)(()=>{b(y=>!y)},[]);return(0,a.useEffect)(()=>{if(p?.current){const y=p.current;return y.addEventListener("click",X),()=>{y.removeEventListener("click",X)}}},[X]),(0,J.useGSAP)(()=>{L?.open&&V.gsap.fromTo(D?.current,{height:0},{height:"auto"})},[L?.open]),(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[96px]",r),children:[(0,e.jsxs)("div",{ref:S,onClick:_,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)(le,{}),(0,e.jsx)(oe,{ref:p,actions:Q,activeStatus:s})]}),(0,e.jsx)("div",{className:"flex justify-between",children:C?.map((y,E)=>(0,e.jsx)("div",{className:"flex gap-3",children:y?.map((H,A)=>(0,e.jsx)("div",{ref:I=>{z.current[E][A]=I},className:"group cursor-pointer",children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1 pb-4",onClick:I=>j(I,E,A),children:[(0,e.jsx)(l.Text,{html:H.text,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("opacity-0 size-4 group-hover:opacity-100 transition-opacity duration-500",{"rotate-180":L?.groupIndex===E&&L?.index===A,"opacity-100":w&&L?.groupIndex===E&&L?.index===A})})]}),(0,e.jsx)("div",{className:(0,k.cn)("absolute bottom-0 left-0 h-[2px] w-0 transition-all duration-500",{"w-[calc(100%-20px)]":L?.groupIndex===E&&L?.index===A},f==="dark"?"bg-white":"bg-[#1D1D1F]")})]})},H.id))},`groupCategory-${E}`))})]}),(0,e.jsxs)("div",{className:(0,k.cn)("border-t border-b-[#E4E5E6] text-black absolute left-0 top-full z-[999] flex w-full flex-col bg-black/70 overflow-hidden",{hidden:!(L?.open&&N)}),onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),style:{height:`calc(100dvh - ${S?.current?.getBoundingClientRect()?.bottom}px)`},children:[(0,e.jsx)("div",{ref:D,className:(0,k.cn)("relative z-50",{"overflow-hidden":M!==x.HeaderNavigationBlockType.Supports}),children:F}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:_})]}),s&&(0,e.jsxs)("div",{className:"absolute left-0 z-[999] flex w-full bg-black/70 h-[100dvh] top-full",children:[(0,e.jsx)("div",{className:"absolute w-[272px] bg-white p-4",style:{right:`calc(100% - ${p?.current?.getBoundingClientRect()?.right}px)`,top:"-36px"},children:d?.email?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:d?.nick_name||O?.welcome,className:"text-sm font-bold"}),(0,e.jsx)("div",{className:"h-[1px] mt-2 bg-[#D9D9D9]"}),(0,e.jsx)("div",{className:"mt-2",children:O?.profiles?.map(y=>(0,e.jsx)(U,{className:"py-2",label:y?.title,href:y?.url},y.id))})]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(P.Polygon,{className:"absolute -top-2 text-white right-[46px] z-30"}),(0,e.jsx)(l.Text,{html:O?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:O?.benefits?.map(y=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:y.benefitIcon?.url,className:"size-4",alt:y.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:y.benefit,className:"text-sm font-bold leading-[1.4]"})]},y.id))}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsx)(l.Button,{variant:"secondary",size:"lg",onClick:()=>m?.join?.(),children:(0,e.jsx)(l.Text,{html:O?.primaryButton||"Join Now",className:"font-bold"})}),(0,e.jsx)(l.Button,{variant:"primary",size:"lg",onClick:()=>m?.login?.(),children:(0,e.jsx)(l.Text,{html:O?.secondaryButton||"Log In",className:"font-bold"})})]})]})}),(0,e.jsx)("div",{className:"flex-1 bg-transparent",onClick:()=>b(!1)})]})]})}),Ne=a.default.memo(({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{buildProps:o,onSidebarNavClick:c}=(0,B.useNavContext)(),[r,f]=(0,a.useState)([]),[u,m]=(0,a.useState)(-1),d=(0,a.useRef)(null),w=(0,a.useCallback)(()=>{const v=t?.subcategories;if(!v?.length)return;const g=v.findIndex(s=>!!s?.subSubCategories),h=v.findIndex(s=>!s?.subSubCategories),p=v.map((s,b)=>({index:b,open:g===b||h===b}));f(p)},[t]);(0,a.useEffect)(()=>{w()},[w]);const i=(0,a.useMemo)(()=>{const v=t?.subcategories?.[r?.find(h=>h.open)?.index||0],g=n?.find(h=>h?.label?.toLowerCase()===v?.label?.toLowerCase())||{};if(v?.collections){const h=o?.categories?.[v?.collections]||{};return{label:g?.label,isCollection:!0,banner:g?.banner,primary:g?.primary,series:[{products:h?.products}]}}else if(v?.subSubCategories){const h=v?.subSubCategories?.[u],p=n?.find(s=>s?.label?.toLowerCase()===h?.label?.toLowerCase())||{};if(h?.collections){const s=o?.categories?.[h?.collections]||{};return{label:p?.label,isCollection:!0,banner:p?.banner,primary:p?.primary,series:[{products:s?.products}]}}else return p}else return g},[t,r,u,n]),C=(0,a.useCallback)((v,g)=>{if(g?.subSubCategories?.length>0?m(0):m(-1),g?.subSubCategories?.length>0)f(h=>h.map(p=>p.index===v?{...p,open:!0}:{...p,open:!1}));else{const p=t?.subcategories?.findIndex(s=>!!s?.subSubCategories);f(s=>s.map(b=>({...b,open:b.index===v||b.index===p})))}},[t,w]),N=(v,g)=>{f(h=>h.map(p=>p.index===v?{...p,open:!0}:{...p,open:!1})),m(g)};return(0,e.jsxs)(l.Container,{childClassName:"lg-desktop:gap-12 flex bg-white gap-8",children:[(0,e.jsxs)("div",{className:"lg-desktop:basis-[356px] flex basis-[284px] flex-col gap-4 py-4",style:{userSelect:"none"},ref:d,children:[(0,e.jsx)("div",{className:"desktop:h-[416px] flex flex-col overflow-y-auto",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:t?.subcategories?.map((v,g)=>{const h=Array.isArray(v?.subSubCategories)&&v?.subSubCategories?.length>0;return(0,e.jsxs)("div",{children:[(0,e.jsxs)("div",{className:(0,k.cn)("flex cursor-pointer items-center justify-between",{"bg-[#F5F5F7]":!h&&r?.find(p=>p.index===g)?.open}),onClick:()=>{C(g,v),c?.(v,g)},children:[(0,e.jsx)(l.Text,{html:v.label,className:"p-4 text-sm font-bold leading-[1.4]"}),h&&(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("size-4",{"rotate-180":r?.find(p=>p.index===g)?.open})})]}),r?.find(p=>p.index===g)?.open&&(0,e.jsx)("div",{className:"flex flex-col",children:v.subSubCategories?.map((p,s)=>(0,e.jsx)(l.Text,{html:p.label,onClick:()=>{N(g,s),c?.(p,s)},className:(0,k.cn)("cursor-pointer hover:bg-[#F5F5F7] px-6 py-4 text-sm font-bold leading-[1.4] text-[#6D6D6F]",{"bg-[#F5F5F7]":u===s})},`subSubItem-${g}-${s}`))})]},`subcategoryItem-${g}`)})}),t&&(0,e.jsx)("div",{className:"flex",children:(0,e.jsxs)("div",{className:"flex flex-col gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"text-sm lg-desktop:text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base",children:t?.secondary?.label})]})})]}),(0,e.jsxs)("div",{className:"flex-1 py-4",children:[Reflect.ownKeys(i).length>0&&(0,e.jsxs)("div",{className:"mb-4 flex items-center justify-between",children:[(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(l.Text,{html:i?.label,className:"text-xl lg-desktop:text-2xl font-bold leading-[1.4]"}),i?.primary&&!i?.primary?.hide&&(0,e.jsx)(l.Button,{as:"a",href:`${i?.primary?.url}?ref=${i?.label}_viewmore`,variant:"link",size:"lg",className:"justify-start !p-0 text-sm lg-desktop:text-base font-bold leading-[1.2] no-underline",children:i?.primary?.label})]}),(0,e.jsx)(l.Link,{href:i?.guide?.url,className:"text-sm lg-desktop:text-base leading-[1.2] text-[#6D6D6F]",children:i?.guide?.label})]}),(0,e.jsx)("div",{className:"flex flex-col gap-4 overflow-y-auto h-[426px]",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:i?.series?.map((v,g)=>(0,e.jsxs)("div",{children:[v.label&&(0,e.jsx)(l.Text,{html:v.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsxs)("div",{className:"grid grid-cols-3 gap-4",children:[!!i?.banner&&(0,e.jsx)(l.Link,{asChild:!i?.banner?.href,href:i?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[(0,e.jsx)(l.Picture,{source:i?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:i?.banner?.title||"Buy in Guide",className:"font-bold text-white"}),(0,e.jsx)(l.Text,{html:i?.banner?.desc||"20.000mAh",className:"text-sm text-white font-bold"})]})]})}),v.products?.map((h,p)=>(0,e.jsx)(ee,{seriesLabel:i?.label,product:h,isCollection:i?.isCollection},`seriesProductItem-${p}`))]})]},`seriesItem-${g}`))})]})]})}),ke=({multicolMetadata:t})=>{const n=(0,a.useRef)(null);return(0,e.jsx)("div",{ref:n,children:(0,e.jsx)(l.Container,{childClassName:"bg-white",className:"h-full",children:(0,e.jsx)("div",{className:"flex gap-4 py-4",children:t?.map((o,c)=>(0,e.jsx)("div",{className:"w-1/4",children:(0,e.jsx)(te,{item:o})},`multicolItem-${o?.label}-${c}`))})})})},we=({supportsMetadata:t,currentNavItemRef:n})=>{const o=(0,a.useRef)(null),[c,r]=(0,a.useState)(null),[f,u]=(0,a.useState)(0);(0,a.useEffect)(()=>{if(o?.current){const d=o?.current?.getBoundingClientRect();u(d.height)}},[o]);const m=(0,ie.debounce)(()=>{if(n){const d=n.getBoundingClientRect();r(d)}},500);return(0,a.useEffect)(()=>(m(),window.addEventListener("resize",m),()=>{window.removeEventListener("resize",m)}),[m]),(0,a.useEffect)(()=>{if(n){const d=n.getBoundingClientRect();r(d)}},[n]),(0,e.jsx)("div",{className:"absolute top-0 h-full bg-white transition-all duration-500 overflow-hidden",style:{right:`calc(100% - ${c?.right}px)`,height:f},children:(0,e.jsx)("div",{ref:o,className:"p-4",children:t?.map(d=>(0,e.jsx)("div",{className:"py-2",children:(0,e.jsx)(l.Link,{href:d.url,className:"text-sm font-bold leading-[1.4] no-underline",children:d.label})},d.id))})})},ee=({product:t,isCollection:n,position:o,seriesLabel:c})=>{const{buildProps:r,onSeriesProductClick:f}=(0,B.useNavContext)();let u=n?t:r?.products?.find(i=>i.handle===t.handle);const m=u?.variants?.find(i=>i.sku===t.sku)||u?.variants?.[0],d=(0,a.useMemo)(()=>`/products/${u?.handle}?variant=${(0,k.atobID)(m?.id)}`,[u?.handle,m?.id]),w=(0,a.useMemo)(()=>u?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,2),[u?.tags]);return m?.availableForSale?(0,e.jsx)(l.Link,{href:d,onClick:i=>{i.preventDefault(),window.open(d),f?.(u,o||0,c)},className:"no-underline hover:text-current",children:(0,e.jsxs)("div",{className:"flex shrink-0 items-center gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-110",children:[(0,e.jsx)("div",{className:"shrink-0",children:(0,e.jsx)(l.Picture,{source:`${m?.image?.url||t?.images?.[0]?.url}}`,width:90,height:90,className:"size-[96px]",imgClassName:"object-contain h-full"})}),(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"flex gap-1",children:Array.isArray(w)&&w?.map(i=>(0,e.jsx)(l.Text,{as:"p",html:i,className:"text-brand-0 whitespace-nowrap mb-1 inline-block h-[24px] rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold !leading-[22px]"}))}),(0,e.jsx)(l.Text,{className:"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]",html:u?.title||t?.name}),t?.desc&&(0,e.jsx)(l.Text,{as:"p",html:t?.desc,className:"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]"})]})]})}):null},te=({item:t,allPicture:n})=>(0,e.jsxs)(e.Fragment,{children:[t?.columns&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Text,{html:t.label,as:"div",className:"my-2 text-sm font-bold leading-[1.4] text-[#6D6D6F]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col",children:t.columns?.map(o=>(0,e.jsxs)("div",{className:"py-2 flex items-center gap-1",children:[(0,e.jsx)(l.Link,{href:`${o.url}?ref=navMenu`,asChild:!o.url,className:"text-sm font-bold leading-[1.4] no-underline",children:o.label}),o?.badge&&(0,e.jsx)(l.Text,{as:"p",html:o?.badge||"badge",className:"text-sm font-bold !leading-[22px] text-brand-0 h-[24px] rounded-full border-[1.6px] border-[var(--brand-color-0)] px-[6px]"})]},o.label))})]}),t?.imageUrl&&(0,e.jsx)("div",{className:(0,k.cn)("laptop:h-[280px] desktop:h-[224px] lg-desktop:h-[280px] h-[240px] max-w-[358px] tablet:max-w-[346px] laptop:max-w-[440px] desktop:w-full relative overflow-hidden",{"tablet:max-w-none laptop:max-w-none":n}),children:(0,e.jsxs)(l.Link,{href:`${t.url}?ref=navMenu`,asChild:!t.url,children:[(0,e.jsx)(l.Picture,{source:t.imageUrl,width:404,height:280,className:"size-full",imgClassName:"object-cover h-full hover:scale-105 transition-all duration-300"}),(0,e.jsxs)("div",{className:"absolute bottom-4 left-4 z-10 flex flex-col justify-end no-underline",children:[(0,e.jsx)(l.Text,{html:t.title,className:(0,k.cn)("lg-desktop:text-2xl text-xl font-bold leading-[1.2] text-white",{"text-black":t?.theme==="dark"})}),t.subtitle&&(0,e.jsx)(l.Text,{html:t.subtitle,className:(0,k.cn)("text-sm font-bold leading-[1.4] text-white",{"text-black":t?.theme==="dark"})}),t?.primary?.label&&(0,e.jsx)(l.Button,{as:"a",href:t?.primary?.url,variant:"link",size:"lg",className:(0,k.cn)("text-sm font-bold mr-auto !p-0 leading-[1.4] text-white",{"text-black":t?.theme==="dark"}),children:t?.primary?.label||"more"})]})]})})]}),Ce=(0,a.forwardRef)(({data:t,className:n,onPrimaryNavClick:o},c)=>{const r=(0,a.useMemo)(()=>(0,T.WithGroupCategory)(t?.categories?.filter(M=>M?.mobileShow)),[t]),{currentMenu:f,setCurrentMenu:u,subSubCategory:m}=(0,B.useNavContext)(),[d,w]=(0,a.useState)(!1),[i,C]=(0,a.useState)(0),[N,v]=(0,a.useState)(null),g=(0,a.useRef)(null);(0,a.useEffect)(()=>{if(g?.current&&d){const M=g?.current?.getBoundingClientRect();C(window?.innerHeight-(M?.bottom||0))}},[d]),(0,J.useGSAP)(()=>{V.gsap.fromTo(g.current,{height:0},{height:i,duration:.3})},[i]),(0,a.useEffect)(()=>{document.documentElement.style.overflow=d?"hidden":"auto"},[d]);const h=(0,a.useMemo)(()=>N?.components?.[0]?.blockType,[N]),p=(0,T.WithSupports)(Le,{categoriesItem:N}),s=(0,T.WithSidebar)(De,N),b=(0,T.WithMulticol)(Me,N),S=(0,a.useMemo)(()=>{switch(h){case x.HeaderNavigationBlockType.Sidebar:return(0,e.jsx)(s,{});case x.HeaderNavigationBlockType.Supports:return(0,e.jsx)(p,{});case x.HeaderNavigationBlockType.Multicol:return(0,e.jsx)(b,{});default:return null}},[h,N,p]),D=(0,a.useCallback)(()=>{w(!1),C(0),u&&u(x.HeaderNavigationMenu.Primary)},[w,C,u]),z=(0,a.useMemo)(()=>t?.headerBar?.actions?.filter(M=>M?.mobileShow&&M?.blockType!==x.HeaderNavigationActionBlockType.Profile),[t]),L=(0,a.useMemo)(()=>t?.headerBar?.actions?.find(M=>M?.mobileShow&&M?.blockType===x.HeaderNavigationActionBlockType.Profile)||{},[t]),j=(0,a.useMemo)(()=>{switch(f){case x.HeaderNavigationMenu.Primary:return(0,e.jsx)(ze,{actions:z,menuOpen:d,onMenuOpenClose:()=>{w(!1),C(0)},onMenuOpenClick:()=>w(!0)});case x.HeaderNavigationMenu.Secondary:return(0,e.jsx)(re,{title:N?.text,onMenuOpenClose:D,onMenuBackClick:()=>u?.(x.HeaderNavigationMenu.Primary)});case x.HeaderNavigationMenu.Third:return(0,e.jsx)(re,{title:m?.label,onMenuOpenClose:D,onMenuBackClick:()=>u?.(x.HeaderNavigationMenu.Secondary)});default:return null}},[d,f,u,N,z,m,D]),_=(0,a.useCallback)((M,$)=>{const R=Array.isArray(r)?Array.isArray(r[M])?r[M][$]:{}:{};v(R),R?.components?.[0]?.blockType===x.HeaderNavigationBlockType.Links?R?.components?.[0]?.url&&window.open(R?.components?.[0]?.url):u?.(x.HeaderNavigationMenu.Secondary)},[r,u]);return(0,e.jsxs)(l.Container,{className:(0,k.cn)("relative h-[52px]",n),children:[j,d&&(0,e.jsx)("div",{ref:g,className:"absolute left-0 top-full text-black border-t border-[#E4E5E6] z-[999] w-full overflow-y-auto bg-white",style:{height:i},children:f===x.HeaderNavigationMenu.Primary?(0,e.jsx)(Se,{categories:r,onPrimaryMenuClick:_,onPrimaryNavClick:o,profileAction:L}):S})]})}),Se=({categories:t,onPrimaryMenuClick:n,profileAction:o,onPrimaryNavClick:c})=>{const{onSidebarNavClick:r}=(0,B.useNavContext)();return(0,e.jsxs)("div",{className:"flex h-full flex-col justify-between",children:[(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map((f,u)=>(0,e.jsxs)("div",{className:"",children:[f?.map((m,d)=>(0,e.jsx)(U,{label:m.text,onClick:()=>{const i=(t?.flat()||[])?.findIndex(C=>C?.id===t[u][d]?.id);n(u,d),c?.(m,i)},icon:m.components?.[0]?.icon},m.id)),(0,e.jsx)("div",{className:(0,k.cn)("my-2 h-px w-full bg-[#E5E5E7]",{hidden:u===t.length-1})})]},`groupCategory-${u}`))}),(0,e.jsx)(Pe,{profileAction:o})]})},De=({sidebarCategoriesMetadata:t,seriesMetadata:n})=>{const{currentMenu:o,setCurrentMenu:c,subSubCategory:r,setSubSubCategory:f,setCurrentSeriesMetadata:u,currentSeriesMetadata:m,buildProps:d,onSidebarNavClick:w}=(0,B.useNavContext)(),[i,C]=(0,a.useState)([]),[N,v]=(0,a.useState)([]);(0,a.useEffect)(()=>{t?.subcategories?.length&&C(t?.subcategories?.map((s,b)=>({index:b,open:!1})))},[t]),(0,a.useEffect)(()=>{r?.subSubCategories?.length&&v(r?.subSubCategories?.map((s,b)=>({index:b,open:b===0})))},[r]);const g=(0,a.useCallback)((s,b)=>{c&&c(x.HeaderNavigationMenu.Third),f?.(s);const S=n?.find(D=>b!==void 0?s?.subSubCategories?.[b]?.label?.toLowerCase()===D.label?.toLowerCase():s?.label?.toLowerCase()===D.label?.toLowerCase())||{};if(s?.collections){const D=d?.categories?.[s?.collections]||{};u?.({label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:D?.products}]})}else u?.(S)},[n,t,c,f,u]),h=(0,a.useMemo)(()=>n?.find(s=>!!s?.guide)?.guide,[n,t]);return(0,a.useMemo)(()=>{switch(o){case x.HeaderNavigationMenu.Secondary:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 flex h-full flex-col justify-between tablet:justify-start tablet:gap-16 p-4",children:[(0,e.jsx)("div",{children:t?.subcategories?.map((s,b)=>(0,e.jsx)("div",{children:(0,e.jsx)(U,{label:s?.label,active:i.find(S=>S.index===b)?.open,onClick:()=>{g(s),w?.(s,b)}})},`${s.label}-${b}`))}),(0,e.jsxs)("div",{className:"tablet:items-start flex flex-col items-center gap-4",children:[t?.primary&&(0,e.jsx)(l.Button,{as:"a",href:`${t?.primary?.url}?ref=${t?.primary?.label}_shopall`,variant:"primary",size:"lg",className:"tablet:w-auto w-full text-base",children:t?.primary?.label}),t?.secondary&&(0,e.jsx)(l.Button,{as:"a",href:t?.secondary?.url,variant:"link",size:"lg",className:"tablet:w-auto tablet:px-0 w-full py-0 text-base",children:t?.secondary?.label})]})]});case x.HeaderNavigationMenu.Third:return(0,e.jsxs)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:[r?.subSubCategories?r?.subSubCategories?.map((s,b)=>{const S=n?.find(z=>z.label.toLowerCase()===s?.label?.toLowerCase())||{};let D={};if(s?.collections){const z=d?.categories?.[s?.collections]||{};D={label:S?.label,isCollection:!0,banner:S?.banner,primary:S?.primary,series:[{products:z?.products}]}}else D=S;return(0,e.jsxs)("div",{children:[Reflect.ownKeys(s).length>0&&(0,e.jsx)(ae,{matchSeriesMetadata:D,onSubSubCategoryItemClick:()=>{w?.(s,b),v(z=>z.map((L,j)=>({...L,open:j===b?!L.open:L.open})))},expanded:!!N?.find(z=>z.index===b)?.open}),N?.find(z=>z.index===b)?.open&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(ne,{matchSeriesMetadata:D}),D?.primary&&(0,e.jsx)("div",{className:"text-center my-4",children:(0,e.jsx)(l.Button,{as:"a",href:D?.primary?.url,className:"text-base no-underline leading-[1.2]",variant:"secondary",size:"base",children:D?.primary?.label})})]})]},`${s.label}-${b}`)}):(0,e.jsxs)(e.Fragment,{children:[Reflect.ownKeys(m).length>0&&(0,e.jsx)(ae,{matchSeriesMetadata:m}),(0,e.jsx)(ne,{matchSeriesMetadata:m}),m?.primary&&(0,e.jsx)("div",{className:"text-center my-4 ",children:(0,e.jsx)(l.Button,{as:"a",href:`${m?.primary?.url}?ref=${m?.label}_viewmore`,variant:"secondary",size:"base",className:"text-base no-underline leading-[1.2]",children:m?.primary?.label})})]}),h&&(0,e.jsx)(l.Link,{href:h?.url,children:(0,e.jsx)("div",{className:"mt-4",children:(0,e.jsx)(l.Text,{html:h?.label,className:"text-sm font-bold leading-[1.2] text-[#6D6D6F]"})})})]});default:return null}},[o,t,c,n,i,N,f,r,u,m])},ae=({matchSeriesMetadata:t,onSubSubCategoryItemClick:n,expanded:o})=>(0,e.jsxs)("div",{className:"tablet:pt-0 py-4 flex items-center justify-between",onClick:n,children:[t?.label&&(0,e.jsx)(l.Text,{html:t?.label,className:"text-sm font-bold leading-[1.4]"}),n&&(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("size-5",{"rotate-180":o})})]}),ne=({matchSeriesMetadata:t})=>(0,e.jsx)("div",{className:"flex flex-col gap-2 laptop:gap-3",children:!!t?.series?.length&&t?.series?.map((n,o)=>(0,e.jsxs)("div",{children:[n.label&&(0,e.jsx)(l.Text,{html:n.label,className:"text-sm mb-2 font-bold leading-[1.4] text-[#3D3D3F]"}),(0,e.jsxs)("div",{className:"laptop:grid-cols-3 laptop:gap-4 tablet:grid tablet:grid-cols-2 tablet:gap-3 flex flex-col gap-2",children:[!!t?.banner&&(0,e.jsx)(l.Link,{asChild:!t?.banner?.href,href:t?.banner?.href,children:(0,e.jsxs)("div",{className:"relative [&_img]:hover:scale-110 [&_img]:hover:transition-all [&_img]:hover:duration-600",children:[(0,e.jsx)(l.Picture,{source:t?.banner?.imageUrl,className:"h-[114px] laptop:h-[120px]",imgClassName:"object-cover h-full"}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 right-0 p-4",children:[(0,e.jsx)(l.Heading,{size:2,html:t?.banner?.title||"Buy in Guide",className:(0,k.cn)("font-bold text-white",{"text-black":t?.banner?.theme==="dark"})}),(0,e.jsx)(l.Text,{html:t?.banner?.desc||"20.000mAh",className:(0,k.cn)("text-sm text-white font-bold",{"text-black":t?.banner?.theme==="dark"})})]})]})}),n.products?.map((c,r)=>(0,e.jsx)(ee,{position:r,product:c,seriesLabel:t?.label,isCollection:t?.isCollection},`seriesProductItem-${o}-${r}`))]})]},`seriesItem-${o}`))}),Le=({supportsMetadata:t})=>(0,e.jsx)("div",{className:"tablet:px-8 laptop:px-16 p-4",children:t?.map(n=>(0,e.jsx)(U,{href:n.url,label:n.label,onClick:()=>{}},n.id))}),Me=({multicolMetadata:t})=>{const n=(0,a.useMemo)(()=>!t?.some(o=>!!o.columns),[t]);return(0,e.jsx)("div",{className:(0,k.cn)("tablet:py-4 tablet:px-8 laptop:px-16 flex flex-col gap-4 tablet:gap-6 p-4",{"tablet:grid tablet:grid-cols-2 tablet:gap-3 laptop:gap-4":n}),children:t?.map((o,c)=>(0,e.jsx)("div",{children:(0,e.jsx)(te,{item:o,allPicture:n})},`multicolItem-${o?.label}-${c}`))})},Pe=({profileAction:t})=>{const[n,o]=(0,a.useState)(!1),{profile:c,event:r}=(0,B.useNavContext)();return(0,e.jsxs)("div",{className:(0,k.cn)("tablet:px-8 laptop:px-16 bg-[#F5F5F7] px-4 py-6",{"p-4":n}),children:[(0,e.jsxs)("div",{className:"flex items-center justify-between",onClick:()=>o(!n),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)(P.User,{})}),(0,e.jsx)(l.Text,{html:c?.nick_name||t?.welcome,className:"text-base font-bold leading-[1.4]"})]}),!c?.email&&(0,e.jsx)(P.DownArrow,{className:(0,k.cn)("size-5 laptop:size-4",{"rotate-180":n})})]}),c?.email&&(0,e.jsx)("div",{className:"mt-4",children:t?.profiles?.map(f=>(0,e.jsx)(U,{label:f?.title,href:f?.url},f.id))}),n&&!c?.email&&(0,e.jsxs)("div",{className:"mt-4",children:[(0,e.jsx)(l.Text,{html:t?.benefits_title,className:"text-sm font-bold leading-[1.4]"}),(0,e.jsx)("div",{className:"mt-2 flex flex-col gap-1",children:t?.benefits?.map(f=>(0,e.jsxs)("div",{className:"flex items-center gap-[6px]",children:[(0,e.jsx)(l.Picture,{source:f.benefitIcon?.url,className:"size-4",alt:f.benefit,width:16,height:16}),(0,e.jsx)(l.Text,{html:f.benefit,className:"text-sm font-bold leading-[1.4]"})]},f.id))})]}),!c?.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:()=>r?.join?.(),children:(0,e.jsx)(l.Text,{html:t?.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:()=>r?.login?.(),children:(0,e.jsx)(l.Text,{html:t?.secondaryButton||"Log In",className:"text-sm font-bold leading-[1.4]"})})]})]})},ze=({menuOpen:t,onMenuOpenClose:n,onMenuOpenClick:o,actions:c})=>(0,e.jsxs)("div",{className:"flex h-full items-center justify-between gap-4",children:[(0,e.jsx)(le,{}),(0,e.jsxs)("div",{className:"desktop:gap-6 flex items-center gap-4",children:[(0,e.jsx)(oe,{actions:c}),t?(0,e.jsx)(P.Close,{className:"size-5",onClick:()=>n()}):(0,e.jsx)(P.Menu,{className:"size-5",onClick:()=>o()})]})]}),le=()=>{const{payloadData:t,isMobile:n}=(0,B.useNavContext)();return(0,e.jsx)("div",{className:"[&>svg]:w-full hover:text-brand-0 cursor-pointer",onClick:()=>{window.location.href="/"},dangerouslySetInnerHTML:{__html:n?t?.headerBar?.mobileLogo:t?.headerBar?.desktopLogo}})},oe=(0,a.forwardRef)(({actions:t,activeStatus:n=!1},o)=>{const{event:c,cartCount:r}=(0,B.useNavContext)(),[f,u]=(0,a.useState)(null),m=(0,a.useCallback)((d,w)=>{switch(u(w),d?.blockType){case x.HeaderNavigationActionBlockType.Search:c?.search?.();break;case x.HeaderNavigationActionBlockType.Cart:c?.cart?.();break;case x.HeaderNavigationActionBlockType.Profile:c?.profile?.();break;case x.HeaderNavigationActionBlockType.Livestream:c?.livestream?.();break;default:return()=>{}}},[c]);return(0,e.jsx)("div",{className:"desktop:gap-6 flex items-center gap-4",children:Array.isArray(t)&&t?.map((d,w)=>(0,e.jsxs)("div",{className:"relative",ref:d.blockType===x.HeaderNavigationActionBlockType.Profile?o:null,onClick:()=>m(d,w),children:[(0,e.jsx)(l.Text,{html:d.icon,className:(0,k.cn)("cursor-pointer size-5",{"text-brand-0":n&&f===w})}),d.blockType===x.HeaderNavigationActionBlockType.Cart&&r>0&&(0,e.jsx)("div",{className:"absolute min-h-5 z-[1] min-w-5 flex px-[2px] items-center justify-center right-[-12px] top-[calc(100%-16px)] bg-brand-0 rounded-full",children:(0,e.jsx)(l.Text,{html:r?.toString(),className:"text-sm font-bold leading-[1.2] text-white"})})]},d.id))})}),re=({title:t,onMenuOpenClose:n,onMenuBackClick:o})=>(0,e.jsxs)("div",{className:"flex h-full items-center gap-3",children:[(0,e.jsx)(P.LeftArrow,{className:"size-5",onClick:()=>o()}),(0,e.jsx)(l.Text,{html:t,className:"flex-1 text-center text-base font-bold leading-[1.4]"}),(0,e.jsx)(P.Close,{className:"size-5",onClick:()=>n()})]}),U=({label:t,href:n,onClick:o,active:c,icon:r,className:f})=>(0,e.jsx)("div",{className:(0,k.cn)("flex cursor-pointer items-center justify-between py-4",f),onClick:o,children:(0,e.jsxs)(l.Link,{href:n,asChild:!n,className:"flex w-full items-center justify-between no-underline",children:[(0,e.jsxs)("div",{className:"flex items-center gap-4",children:[(0,e.jsx)(l.Text,{html:t,className:(0,k.cn)("text-sm font-bold leading-[1.4]",{underline:r})}),r&&(0,e.jsx)(l.Text,{html:r})]}),(0,e.jsx)(P.RightArrow,{className:(0,k.cn)("size-5 laptop:size-4",{"rotate-90":c})})]})});var Ee=(0,se.withLayout)(ye);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|