@anker-in/headless-ui 1.1.9-alpha.1765352011951 → 1.1.9-alpha.1765358416020

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/biz-components/HeroBanner/HeroBanner.js +1 -1
  2. package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
  3. package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
  4. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
  5. package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
  6. package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
  7. package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
  8. package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
  9. package/package.json +1 -1
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var se=Object.create;var N=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var ie=Object.getOwnPropertyNames;var pe=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var ue=(t,r)=>{for(var s in r)N(t,s,{get:r[s],enumerable:!0})},q=(t,r,s,b)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of ie(r))!ce.call(t,a)&&a!==s&&N(t,a,{get:()=>r[a],enumerable:!(b=ne(r,a))||b.enumerable});return t};var $=(t,r,s)=>(s=t!=null?se(pe(t)):{},q(r||!t||!t.__esModule?N(s,"default",{value:t,enumerable:!0}):s,t)),de=t=>q(N({},"__esModule",{value:!0}),t);var be={};ue(be,{default:()=>ge});module.exports=de(be);var e=require("react/jsx-runtime"),o=$(require("react")),y=$(require("gsap")),w=require("gsap/dist/ScrollTrigger"),P=require("react-responsive"),Q=require("react-intersection-observer"),Z=$(require("../../helpers/ScrollLoadVideo.js")),l=require("../../components/index.js"),G=$(require("./Countdown.js")),u=require("../../helpers/index.js"),J=require("../../shared/Styles.js"),K=require("../../hooks/useExposure.js"),T=require("../../shared/trackUrlRef.js"),O=require("../../components/button.js"),W=require("../VideoModal/index.js");const p="image",c="hero_banner",me=({size:t="base"})=>{const{width:r,height:s}=O.sizeMap[t];return(0,e.jsx)("svg",{width:r,height:s,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},A=o.default.forwardRef(({data:t,className:r},s)=>{const{label:b,title:a,subtitle:n,endDate:M,endDate_tz:X,dateFormat:Y,pcImage:z,padImage:C,mobileImage:k,pcVideo:ee,padVideo:te,mobileVideo:L,isShowVideo:ae,primaryButton:f,secondaryButton:i,theme:re="light",size:B="default",caption:H=[],blockLink:D,iconArray:oe}=t,S=(0,P.useMediaQuery)({query:"(max-width: 768px)"}),E=(0,P.useMediaQuery)({query:"(max-width: 1024px)"}),[U,_]=(0,o.useState)(!1),{ref:le,inView:j}=(0,Q.useInView)(),V=(0,o.useRef)(null),I=(0,o.useRef)(null),R=(0,o.useRef)(null),h=(0,o.useRef)(null),d=(0,o.useRef)(null);return(0,K.useExposure)(d,{componentType:p,componentName:c,componentTitle:a,componentDescription:n}),(0,o.useImperativeHandle)(s,()=>d.current),(0,o.useEffect)(()=>{y.default.registerPlugin(w.ScrollTrigger);function m(){if(!h.current)return;const g=d.current?.clientHeight||100;window.innerHeight<=g?V.current=w.ScrollTrigger.create({trigger:d.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:x=>{const v=x.progress*40-20;y.default.set(h.current,{yPercent:v})}}):(R.current=w.ScrollTrigger.create({trigger:d.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:x=>{const v=x.progress*20-20;y.default.set(h.current,{yPercent:v})}}),I.current=w.ScrollTrigger.create({trigger:d.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:x=>{const v=x.progress*20;y.default.set(h.current,{yPercent:v})}}))}return j&&m(),()=>{V.current&&V.current.kill(),R.current&&R.current.kill(),I.current&&I.current.kill()}},[j]),(0,e.jsx)("div",{ref:le,"data-ui-component-id":"HeroBanner",className:"relative z-[5]",children:(0,e.jsxs)("div",{ref:d,className:(0,u.cn)(re==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":B==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":B==="sm"},r),children:[D&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,T.trackUrlRef)(D,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${a}#${n}`,tabIndex:-1,"aria-hidden":"true","aria-label":a}),(0,e.jsx)("div",{ref:h,className:(0,u.cn)("absolute left-0 top-0 size-full"),children:ae?(0,e.jsx)(Z.default,{poster:S?k?.url:E?C?.url||k?.url:z?.url,src:S?L?.url:E?te?.url||L?.url:ee?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,e.jsx)(l.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:z?.alt||"",source:`${z?.url||""} , ${C?.url??(k?.url||"")} 1024, ${k?.url||""} 767`})}),(0,e.jsxs)("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[b&&(0,e.jsx)(l.Heading,{as:"h3",className:(0,u.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:b}),a&&(0,e.jsx)(l.Heading,{as:"h2",size:B==="sm"?4:5,className:(0,u.cn)("hero-banner-title"),html:a}),n&&(0,e.jsx)(l.Heading,{as:"h3",className:(0,u.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:n}),M&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(G.default,{endDate:M,endDate_tz:X,dateFormat:Y})})]}),(0,e.jsxs)("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i?.isShowPlayVideoButton&&i?.playVideoButtonText?(0,e.jsxs)(l.Button,{onClick:()=>_(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${a}#${n}#${i?.playVideoButtonText}`,children:[i?.playVideoButtonText," ",(0,e.jsx)(me,{size:"lg"})]}):i?.text?(0,e.jsxs)(l.Button,{"aria-label":a??n,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:(0,T.trackUrlRef)(i?.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${a}#${n}#${i?.text}`,children:[i?.text,(0,e.jsx)("span",{className:"sr-only",children:a??n})]}):null,f&&f.text&&(0,e.jsx)(l.Button,{"aria-label":a??n,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:(0,T.trackUrlRef)(f.link,`${p}_${c}`),"data-headless-type-name":`${p}#${c}`,"data-headless-title-desc-button":`${a}#${n}#${f?.text}`,children:f.text})]}),(0,e.jsx)("div",{className:"hero-banner-icon-group flex items-center gap-2",children:oe?.map((m,g)=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(l.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover !w-auto",loading:"eager",alt:m?.pcImage?.alt||"",source:m?.pcImage?.url})},g))})]}),H.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:H.map((m,g)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(l.Text,{size:2,className:(0,u.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:m.title}),g<H.length-1&&(0,e.jsx)("div",{className:(0,u.cn)("bg-info-primary w-px")})]},g))}),U&&(0,e.jsx)(W.VideoModal,{visible:U,videoUrl:i?.videoUrl?.url,youTubeId:i?.youtubeId,onCloseModal:()=>_(!1)})]})})});A.displayName="HeroBanner";var ge=(0,J.withLayout)(A);
1
+ "use strict";"use client";var se=Object.create;var N=Object.defineProperty;var ne=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var ie=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var ue=(t,r)=>{for(var s in r)N(t,s,{get:r[s],enumerable:!0})},q=(t,r,s,b)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of pe(r))!ce.call(t,a)&&a!==s&&N(t,a,{get:()=>r[a],enumerable:!(b=ne(r,a))||b.enumerable});return t};var $=(t,r,s)=>(s=t!=null?se(ie(t)):{},q(r||!t||!t.__esModule?N(s,"default",{value:t,enumerable:!0}):s,t)),de=t=>q(N({},"__esModule",{value:!0}),t);var be={};ue(be,{default:()=>ge});module.exports=de(be);var e=require("react/jsx-runtime"),o=$(require("react")),y=$(require("gsap")),w=require("gsap/dist/ScrollTrigger"),P=require("react-responsive"),Q=require("react-intersection-observer"),Z=$(require("../../helpers/ScrollLoadVideo.js")),l=require("../../components/index.js"),G=$(require("./Countdown.js")),u=require("../../helpers/index.js"),J=require("../../shared/Styles.js"),K=require("../../hooks/useExposure.js"),T=require("../../shared/trackUrlRef.js"),O=require("../../components/button.js"),W=require("../VideoModal/index.js");const i="image",c="hero_banner",me=({size:t="base"})=>{const{width:r,height:s}=O.sizeMap[t];return(0,e.jsx)("svg",{width:r,height:s,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:(0,e.jsx)("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},A=o.default.forwardRef(({data:t,className:r},s)=>{const{label:b,title:a,subtitle:n,endDate:M,endDate_tz:X,dateFormat:Y,pcImage:z,padImage:C,mobileImage:k,pcVideo:ee,padVideo:te,mobileVideo:L,isShowVideo:ae,primaryButton:x,secondaryButton:p,theme:re="light",size:B="default",caption:H=[],blockLink:D,iconArray:oe}=t,S=(0,P.useMediaQuery)({query:"(max-width: 768px)"}),E=(0,P.useMediaQuery)({query:"(max-width: 1024px)"}),[U,_]=(0,o.useState)(!1),{ref:le,inView:j}=(0,Q.useInView)(),V=(0,o.useRef)(null),I=(0,o.useRef)(null),R=(0,o.useRef)(null),f=(0,o.useRef)(null),d=(0,o.useRef)(null);return(0,K.useExposure)(d,{componentType:i,componentName:c,componentTitle:a,componentDescription:n}),(0,o.useImperativeHandle)(s,()=>d.current),(0,o.useEffect)(()=>{y.default.registerPlugin(w.ScrollTrigger);function m(){if(!f.current)return;const g=d.current?.clientHeight||100;window.innerHeight<=g?V.current=w.ScrollTrigger.create({trigger:d.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:h=>{const v=h.progress*40-20;y.default.set(f.current,{yPercent:v})}}):(R.current=w.ScrollTrigger.create({trigger:d.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:h=>{const v=h.progress*20-20;y.default.set(f.current,{yPercent:v})}}),I.current=w.ScrollTrigger.create({trigger:d.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:h=>{const v=h.progress*20;y.default.set(f.current,{yPercent:v})}}))}return j&&m(),()=>{V.current&&V.current.kill(),R.current&&R.current.kill(),I.current&&I.current.kill()}},[j]),(0,e.jsx)("div",{ref:le,"data-ui-component-id":"HeroBanner",className:"relative z-[5]",children:(0,e.jsxs)("div",{ref:d,className:(0,u.cn)(re==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":B==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":B==="sm"},r),children:[D&&(0,e.jsx)("a",{className:"absolute inset-0 z-10",href:(0,T.trackUrlRef)(D,`${i}_${c}`),"data-headless-type-name":`${i}#${c}`,"data-headless-title-desc-button":`${a}#${n}`,tabIndex:-1,"aria-hidden":"true","aria-label":a}),(0,e.jsx)("div",{ref:f,className:(0,u.cn)("absolute left-0 top-0 size-full"),children:ae?(0,e.jsx)(Z.default,{poster:S?k?.url:E?C?.url||k?.url:z?.url,src:S?L?.url:E?te?.url||L?.url:ee?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):(0,e.jsx)(l.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:z?.alt||"",source:`${z?.url||""} , ${C?.url??(k?.url||"")} 1024, ${k?.url||""} 767`})}),(0,e.jsxs)("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[b&&(0,e.jsx)(l.Heading,{as:"h3",className:(0,u.cn)("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:b}),a&&(0,e.jsx)(l.Heading,{as:"h2",size:B==="sm"?4:5,className:(0,u.cn)("hero-banner-title"),html:a}),n&&(0,e.jsx)(l.Heading,{as:"h3",className:(0,u.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:n}),M&&(0,e.jsx)("div",{className:"mt-3",children:(0,e.jsx)(G.default,{endDate:M,endDate_tz:X,dateFormat:Y})})]}),(0,e.jsxs)("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[p?.isShowPlayVideoButton&&p?.playVideoButtonText?(0,e.jsxs)(l.Button,{onClick:()=>_(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${i}#${c}`,"data-headless-title-desc-button":`${a}#${n}#${p?.playVideoButtonText}`,children:[p?.playVideoButtonText," ",(0,e.jsx)(me,{size:"lg"})]}):p?.text?(0,e.jsxs)(l.Button,{"aria-label":a??n,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:(0,T.trackUrlRef)(p?.link,`${i}_${c}`),"data-headless-type-name":`${i}#${c}`,"data-headless-title-desc-button":`${a}#${n}#${p?.text}`,children:[p?.text,(0,e.jsx)("span",{className:"sr-only",children:a??n})]}):null,x&&x.text&&(0,e.jsx)(l.Button,{"aria-label":a??n,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:(0,T.trackUrlRef)(x.link,`${i}_${c}`),"data-headless-type-name":`${i}#${c}`,"data-headless-title-desc-button":`${a}#${n}#${x?.text}`,children:x.text})]}),(0,e.jsx)("div",{className:"hero-banner-icon-group flex items-center gap-2",children:oe?.map((m,g)=>(0,e.jsx)("div",{className:"h-12",children:(0,e.jsx)(l.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover !w-auto",loading:"eager",alt:m?.pcImage?.alt||"",source:m?.pcImage?.url})},g))})]}),H.length>0&&(0,e.jsx)("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:H.map((m,g)=>(0,e.jsxs)(o.default.Fragment,{children:[(0,e.jsx)(l.Text,{size:2,className:(0,u.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:m.title}),g<H.length-1&&(0,e.jsx)("div",{className:(0,u.cn)("bg-info-primary w-px")})]},g))}),U&&(0,e.jsx)(W.VideoModal,{visible:U,videoUrl:p?.videoUrl?.url,youTubeId:p?.youtubeId,onCloseModal:()=>_(!1)})]})})});A.displayName="HeroBanner";var ge=(0,J.withLayout)(A);
2
2
  //# sourceMappingURL=HeroBanner.js.map
package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\" className=\"relative z-[5]\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {label && (\n <Heading\n as=\"h3\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as=\"a\"\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as=\"a\"\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover !w-auto\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\" className=\"relative z-[5]\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Heading\n as=\"h3\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as=\"a\"\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as=\"a\"\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover !w-auto\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
5
+ "mappings": "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",
6
6
  "names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_react_responsive", "import_react_intersection_observer", "import_ScrollLoadVideo", "import_components", "import_Countdown", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "import_button", "import_VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "React", "data", "className", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsap", "gsapResize", "clientHeight", "self", "value", "ScrollLoadVideo", "Countdown", "icon", "index", "c"]
7
7
  }
package/dist/cjs/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var re=Object.create;var S=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var me=Object.getPrototypeOf,ce=Object.prototype.hasOwnProperty;var fe=(e,n)=>{for(var a in n)S(e,a,{get:n[a],enumerable:!0})},z=(e,n,a,p)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of le(n))!ce.call(e,l)&&l!==a&&S(e,l,{get:()=>n[l],enumerable:!(p=oe(n,l))||p.enumerable});return e};var y=(e,n,a)=>(a=e!=null?re(me(e)):{},z(n||!e||!e.__esModule?S(a,"default",{value:e,enumerable:!0}):a,e)),pe=e=>z(S({},"__esModule",{value:!0}),e);var _e={};fe(_e,{default:()=>be});module.exports=pe(_e);var o=require("react/jsx-runtime"),s=y(require("react")),A=require("../../helpers/utils.js"),$=y(require("./tabSwitch.js")),q=y(require("../Title/index.js")),O=y(require("../SwiperBox/index.js")),K=require("../../shared/Styles.js"),D=require("../../shared/track.js"),Q=require("react-responsive"),W=require("../../hooks/useRollout.js"),v=require("./shelfDisplayItem.js");const de="image",ue="product_shelf",he=e=>e==null?"default":String(e).replace(/[^a-zA-Z0-9_-]/g,"")||"default",we=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,ge=s.default.forwardRef(({key:e,data:n,event:a,buildData:p,breakpoints:l,className:Z="",recommendedData:f,target:j="_self",metafields:F,isDisplayGudgments:P=!1,isDisplayBackImage:G=!1},J)=>{const{productsTab:m=[],productsCard:T=[],title:x,isShowTab:d=!0,tabShape:U="square",isShowTag:X=!1,isShowOriginalPrice:Y=!0,isShowRecommendedCard:k=!1,...ee}=n,[g,C]=(0,s.useState)(""),[c,I]=(0,s.useState)([]),H=(0,s.useRef)(!1),R=(0,s.useRef)(!1),B=(0,s.useRef)(null),te=(0,s.useRef)(we()),ne=(0,Q.useMediaQuery)({query:"(max-width: 768px)"}),[se,E]=(0,W.useRollout)({threshold:0}),b=c?.length<=1&&P,u=!ne&&c?.length<=2&&P,M=t=>{switch(t){case 1440:return u?c?.length:4;case 1024:return u?c?.length:3;default:return u?c?.length:2.3}},V=()=>{(0,D.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:f?.map((t,w)=>{const r=t?.variants?.find(i=>i?.sku===t?.sku)||t?.variants?.[0];return{item_id:t?.sku||r?.sku,item_name:t?.name,item_variant:r?.name,price:r?.price,index:w+1}})}})},h=(t,w)=>{if(w){const _=f?.map?.(r=>({...r,isShowRecommended:!0}));I(_?.length?_||[]:[])}else if(Array.isArray(t)){const r=t?.map?.(i=>{const N=p?.products?.find(ie=>ie?.handle===i?.handle);if(N)return{sku:i.sku,isShowRecommended:!1,custom_name:i.custom_name,custom_description:i.custom_description,custom_image:i.custom_image,custom_theme:i.custom_theme,...N}})?.filter(i=>i);I(r?.length?r||[]:[])}else I([])};(0,s.useImperativeHandle)(J,()=>B.current),(0,s.useEffect)(()=>{E&&f?.length&&!H.current&&(H.current=!0,V())},[E,f]),(0,s.useEffect)(()=>{if(!R.current){if(!R.current&&f?.length&&(R.current=!0),d){C(m?.[0]?.tab||""),h(m?.[0]?.data||[],m?.[0]?.isShowRecommendedTab);return}h(T,k)}},[f]),(0,s.useEffect)(()=>{if(d){const t=m?.find(w=>w?.tab===g)||m?.[0];h(t?.data||[],t?.isShowRecommendedTab);return}h(T,k)},[p,d,k,T,m,g]);const ae=he(g),L=`${te.current}-${ae}`;return(0,o.jsxs)("div",{ref:B,className:(0,A.cn)("shelf-display-wrap w-full",Z,{"aiui-dark":n?.theme==="dark"}),children:[x&&(0,o.jsx)(q.default,{data:{title:x}}),d&&(0,o.jsx)("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:(0,o.jsx)($.default,{value:g,tabs:m,tabShape:U,onTabClick:t=>{if(C(t?.tab),h(t?.data||[],t?.isShowRecommendedTab),!t?.isShowRecommendedTab){(0,D.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:de,component_name:ue,component_title:n?.title,component_position:1,navigation:t?.tab}});return}V()}})}),(0,o.jsx)("div",{ref:se,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(O.default,{data:{list:c,configuration:{...ee,event:a,isShowTag:X,isShowOriginalPrice:Y,target:j,metafields:F,itemLength:c?.length,isDisplayBackImage:G}},id:L,className:`${d?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:u?"flex-1":"",Slide:u?v.ShelfDisplayHorizontalItem:v.ShelfDisplayWrapItem,breakpoints:l||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:b?1:1.2},768:{spaceBetween:b?0:16,freeMode:!1,slidesPerView:M()},1024:{spaceBetween:b?0:16,freeMode:!1,slidesPerView:M(1024)},1440:{spaceBetween:b?0:16,freeMode:!1,slidesPerView:M(1440)}}},L)})]})});var be=(0,K.withLayout)(ge);
1
+ "use strict";"use client";var re=Object.create;var S=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var ce=Object.getPrototypeOf,me=Object.prototype.hasOwnProperty;var fe=(t,n)=>{for(var a in n)S(t,a,{get:n[a],enumerable:!0})},z=(t,n,a,p)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of le(n))!me.call(t,l)&&l!==a&&S(t,l,{get:()=>n[l],enumerable:!(p=oe(n,l))||p.enumerable});return t};var y=(t,n,a)=>(a=t!=null?re(ce(t)):{},z(n||!t||!t.__esModule?S(a,"default",{value:t,enumerable:!0}):a,t)),pe=t=>z(S({},"__esModule",{value:!0}),t);var _e={};fe(_e,{default:()=>be});module.exports=pe(_e);var o=require("react/jsx-runtime"),s=y(require("react")),A=require("../../helpers/utils.js"),$=y(require("./tabSwitch.js")),q=y(require("../Title/index.js")),O=y(require("../SwiperBox/index.js")),K=require("../../shared/Styles.js"),R=require("../../shared/track.js"),Q=require("react-responsive"),W=require("../../hooks/useRollout.js"),v=require("./shelfDisplayItem.js");const de="image",ue="product_shelf",he=t=>t==null?"default":String(t).replace(/[^a-zA-Z0-9_-]/g,"")||"default",we=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,ge=s.default.forwardRef(({key:t,data:n,event:a,buildData:p,breakpoints:l,className:Z="",recommendedData:f,target:j="_self",metafields:F,isDisplayGudgments:M=!1,isDisplayBackImage:G=!1},J)=>{const{productsTab:d=[],productsCard:D=[],title:P,isShowTab:w=!0,tabShape:U="square",isShowTag:X=!1,isShowOriginalPrice:Y=!0,isShowRecommendedCard:x=!1,...ee}=n,[g,C]=(0,s.useState)(""),[c,T]=(0,s.useState)([]),H=(0,s.useRef)(!1),k=(0,s.useRef)(!1),B=(0,s.useRef)(null),te=(0,s.useRef)(we()),ne=(0,Q.useMediaQuery)({query:"(max-width: 768px)"}),[se,E]=(0,W.useRollout)({threshold:0}),b=c?.length<=1&&M,u=!ne&&c?.length<=2&&M,I=e=>{switch(e){case 1440:return u?c?.length:4;case 1024:return u?c?.length:3;default:return u?c?.length:2.3}},V=()=>{(0,R.gaTrack)({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:f?.map((e,m)=>{const r=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||r?.sku,item_name:e?.name,item_variant:r?.name,price:r?.price,index:m+1}})}})},h=(e,m)=>{if(m){const _=f?.map?.(r=>({...r,isShowRecommended:!0}));T(_?.length?_||[]:[])}else if(Array.isArray(e)){const r=e?.map?.(i=>{const N=p?.products?.find(ie=>ie?.handle===i?.handle);if(N)return{sku:i.sku,isShowRecommended:!1,custom_name:i.custom_name,custom_description:i.custom_description,custom_image:i.custom_image,custom_theme:i.custom_theme,...N}})?.filter(i=>i);T(r?.length?r||[]:[])}else T([])};(0,s.useImperativeHandle)(J,()=>B.current),(0,s.useEffect)(()=>{E&&f?.length&&!H.current&&(H.current=!0,V())},[E,f]),(0,s.useEffect)(()=>{if(!k.current){if(!k.current&&f?.length&&(k.current=!0),w){const e=d?.find(m=>m?.tab===g)||d?.[0];C(e?.tab||""),h(e?.data||[],e?.isShowRecommendedTab);return}h(D,x)}},[f]),(0,s.useEffect)(()=>{if(w){const e=d?.find(m=>m?.tab===g)||d?.[0];h(e?.data||[],e?.isShowRecommendedTab);return}h(D,x)},[p]);const ae=he(g),L=`${te.current}-${ae}`;return(0,o.jsxs)("div",{ref:B,className:(0,A.cn)("shelf-display-wrap w-full",Z,{"aiui-dark":n?.theme==="dark"}),children:[P&&(0,o.jsx)(q.default,{data:{title:P}}),w&&(0,o.jsx)("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:(0,o.jsx)($.default,{value:g,tabs:d,tabShape:U,onTabClick:e=>{if(C(e?.tab),h(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){(0,R.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:de,component_name:ue,component_title:n?.title,component_position:1,navigation:e?.tab}});return}V()}})}),(0,o.jsx)("div",{ref:se,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:(0,o.jsx)(O.default,{data:{list:c,configuration:{...ee,event:a,isShowTag:X,isShowOriginalPrice:Y,target:j,metafields:F,itemLength:c?.length,isDisplayBackImage:G}},id:L,className:`${w?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:u?"flex-1":"",Slide:u?v.ShelfDisplayHorizontalItem:v.ShelfDisplayWrapItem,breakpoints:l||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:b?1:1.2},768:{spaceBetween:b?0:16,freeMode:!1,slidesPerView:I()},1024:{spaceBetween:b?0:16,freeMode:!1,slidesPerView:I(1024)},1440:{spaceBetween:b?0:16,freeMode:!1,slidesPerView:I(1440)}}},L)})]})});var be=(0,K.withLayout)(ge);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceIdRef = useRef<string>(createInstanceId())\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData, isShowTab, isShowRecommendedCard, productsCard, productsTab, tabId])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n if (!v?.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n return\n }\n gackViewEvent()\n }}\n />\n </div>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceIdRef = useRef<string>(createInstanceId())\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n if (!v?.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n return\n }\n gackViewEvent()\n }}\n />\n </div>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
5
+ "mappings": "mlBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,aAAAE,KAAA,eAAAC,GAAAH,IA6KM,IAAAI,EAAA,6BA5KNC,EAAwE,oBACxEC,EAAmB,kCACnBC,EAAsB,6BACtBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAwB,iCACxBC,EAA8B,4BAC9BC,EAA2B,qCAC3BC,EAAiE,iCAGjE,MAAMC,GAAgB,QAChBC,GAAgB,gBAEhBC,GAAuBC,GACAA,GAAU,KAAa,UAChC,OAAOA,CAAK,EAAE,QAAQ,kBAAmB,EAAE,GACzC,UAGhBC,GAAmB,IAAM,iBAAiB,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,EAAG,CAAC,CAAC,GAEhFC,GAAe,EAAAC,QAAM,WACzB,CACE,CACE,IAAAC,EACA,KAAAC,EACA,MAAAC,EACA,UAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,GACZ,gBAAAC,EACA,OAAAC,EAAS,QACT,WAAAC,EACA,mBAAAC,EAAqB,GACrB,mBAAAC,EAAqB,EACvB,EACAC,IACG,CACH,KAAM,CACJ,YAAAC,EAAc,CAAC,EACf,aAAAC,EAAe,CAAC,EAChB,MAAAC,EACA,UAAAC,EAAY,GACZ,SAAAC,EAAW,SACX,UAAAC,EAAY,GACZ,oBAAAC,EAAsB,GACtB,sBAAAC,EAAwB,GACxB,GAAGC,EACL,EAAInB,EAEE,CAACoB,EAAOC,CAAQ,KAAI,YAAiB,EAAE,EACvC,CAACC,EAAcC,CAAe,KAAI,YAA6B,CAAC,CAAC,EAEjEC,KAAS,UAAgB,EAAK,EAC9BC,KAAc,UAAgB,EAAK,EACnCC,KAAW,UAAuB,IAAI,EACtCC,MAAgB,UAAe/B,GAAiB,CAAC,EAEjDgC,MAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxD,CAACC,GAASC,CAAM,KAAI,cAA2B,CAAE,UAAW,CAAE,CAAC,EAE/DC,EAAST,GAAc,QAAU,GAAKd,EACtCwB,EAAkB,CAACJ,IAAYN,GAAc,QAAU,GAAKd,EAE5DyB,EAAkBC,GAAkB,CACxC,OAAQA,EAAM,CACZ,IAAK,MACH,OAAOF,EAAkBV,GAAc,OAAS,EAClD,IAAK,MACH,OAAOU,EAAkBV,GAAc,OAAS,EAClD,QACE,OAAOU,EAAkBV,GAAc,OAAS,GACpD,CACF,EAEMa,EAAgB,IAAM,IAC1B,WAAQ,CACN,MAAO,WACP,WAAY,iBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB,mBAChB,MAAO9B,GAAiB,IAAI,CAAC+B,EAAMC,IAAU,CAE3C,MAAMC,EADWF,GAAM,UAAU,KAAMG,GAAWA,GAAG,MAAQH,GAAM,GAAG,GAC1CA,GAAM,WAAW,CAAC,EAC9C,MAAO,CACL,QAASA,GAAM,KAAOE,GAAS,IAC/B,UAAWF,GAAM,KACjB,aAAcE,GAAS,KACvB,MAAOA,GAAS,MAChB,MAAOD,EAAQ,CACjB,CACF,CAAC,CACH,CACF,CAAC,CACH,EAEMG,EAAmB,CAACC,EAAiCC,IAAkB,CAC3E,GAAIA,EAAM,CACR,MAAMC,EAAiBtC,GAAiB,MAAM+B,IACrC,CACL,GAAGA,EACH,kBAAmB,EACrB,EACD,EACDb,EAAgBoB,GAAgB,OAASA,GAAkB,CAAC,EAAI,CAAC,CAAC,CACpE,SACkB,MAAM,QAAQF,CAAW,EAC5B,CACX,MAAME,EAAiBF,GACnB,MAAML,GAAQ,CACd,MAAMQ,EAAW1C,GAAW,UAAU,KAAK2C,IAAUA,IAAQ,SAAWT,GAAM,MAAM,EACpF,GAAIQ,EACF,MAAO,CACL,IAAKR,EAAK,IACV,kBAAmB,GACnB,YAAaA,EAAK,YAClB,mBAAoBA,EAAK,mBACzB,aAAcA,EAAK,aACnB,aAAcA,EAAK,aACnB,GAAGQ,CACL,CAEJ,CAAC,GACC,OAAOR,GAAQA,CAAI,EACvBb,EAAgBoB,GAAgB,OAASA,GAAkB,CAAC,EAAI,CAAC,CAAC,CACpE,MACEpB,EAAgB,CAAC,CAAC,CAGxB,KAEA,uBAAoBb,EAAK,IAAMgB,EAAS,OAAyB,KAEjE,aAAU,IAAM,CACVI,GAAUzB,GAAiB,QAAU,CAACmB,EAAO,UAC/CA,EAAO,QAAU,GACjBW,EAAc,EAElB,EAAG,CAACL,EAAQzB,CAAe,CAAC,KAG5B,aAAU,IAAM,CACd,GAAI,CAAAoB,EAAY,QAIhB,IAHI,CAACA,EAAY,SAAWpB,GAAiB,SAC3CoB,EAAY,QAAU,IAEpBX,EAAW,CACb,MAAMgC,EAAanC,GAAa,KAAKyB,GAAQA,GAAM,MAAQhB,CAAK,GAAKT,IAAc,CAAC,EACpFU,EAASyB,GAAY,KAAO,EAAE,EAC9BN,EAAiBM,GAAY,MAAQ,CAAC,EAAGA,GAAY,oBAAoB,EACzE,MACF,CACAN,EAAiB5B,EAAcM,CAAqB,EACtD,EAAG,CAACb,CAAe,CAAC,KAEpB,aAAU,IAAM,CACd,GAAIS,EAAW,CACb,MAAMgC,EAAanC,GAAa,KAAKyB,GAAQA,GAAM,MAAQhB,CAAK,GAAKT,IAAc,CAAC,EACpF6B,EAAiBM,GAAY,MAAQ,CAAC,EAAGA,GAAY,oBAAoB,EACzE,MACF,CACAN,EAAiB5B,EAAcM,CAAqB,CAEtD,EAAG,CAAChB,CAAS,CAAC,EAEd,MAAM6C,GAAarD,GAAoB0B,CAAK,EACtC4B,EAAmB,GAAGrB,GAAc,OAAO,IAAIoB,EAAU,GAE/D,SACE,QAAC,OACC,IAAKrB,EACL,aAAW,MAAG,4BAA6BtB,EAAW,CAAE,YAAaJ,GAAM,QAAU,MAAO,CAAC,EAE5F,UAAAa,MAAS,OAAC,EAAAoC,QAAA,CAAM,KAAM,CAAE,MAAOpC,CAAM,EAAG,EACxCC,MACC,OAAC,OAAI,UAAU,6CACb,mBAAC,EAAAoC,QAAA,CACC,MAAO9B,EACP,KAAMT,EACN,SAAUI,EACV,WAAYwB,GAAK,CAGf,GAFAlB,EAASkB,GAAG,GAAG,EACfC,EAAiBD,GAAG,MAAQ,CAAC,EAAGA,GAAG,oBAAoB,EACnD,CAACA,GAAG,qBAAsB,IAC5B,WAAQ,CACN,MAAO,WACP,WAAY,kBACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB/C,GAChB,eAAgBC,GAChB,gBAAiBO,GAAM,MACvB,mBAAoB,EACpB,WAAYuC,GAAG,GACjB,CACF,CAAC,EACD,MACF,CACAJ,EAAc,CAChB,EACF,EACF,KAEF,OAAC,OACC,IAAKN,GACL,UAAU,2FAEV,mBAAC,EAAAsB,QAAA,CAEC,KAAM,CACJ,KAAM7B,EACN,cAAe,CACb,GAAGH,GACH,MAAOlB,EACP,UAAAe,EACA,oBAAAC,EACA,OAAQX,EACR,WAAYC,EACZ,WAAYe,GAAc,OAC1B,mBAAoBb,CACtB,CACF,EACA,GAAIuC,EACJ,UAAW,GAAGlC,EAAY,OAAS,EAAE,8CACrC,cAAekB,EAAkB,SAAW,GAC5C,MAAOA,EAAkB,6BAA6B,uBACtD,YACE7B,GAAe,CACb,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe4B,EAAS,EAAI,GAC9B,EACA,IAAK,CACH,aAAcA,EAAS,EAAI,GAC3B,SAAU,GACV,cAAeE,EAAe,CAChC,EACA,KAAM,CACJ,aAAcF,EAAS,EAAI,GAC3B,SAAU,GACV,cAAeE,EAAe,IAAI,CACpC,EACA,KAAM,CACJ,aAAcF,EAAS,EAAI,GAC3B,SAAU,GACV,cAAeE,EAAe,IAAI,CACpC,CACF,GA7CGe,CA+CP,EACF,GACF,CAEJ,CACF,EAEA,IAAOrE,MAAQ,cAAWkB,EAAY",
6
6
  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_tabSwitch", "import_Title", "import_SwiperBox", "import_Styles", "import_track", "import_react_responsive", "import_useRollout", "import_shelfDisplayItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "React", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "Title", "TabSwitch", "SwiperBox"]
7
7
  }
package/dist/esm/biz-components/HeroBanner/HeroBanner.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import F,{useImperativeHandle as ee,useRef as b,useState as te,useEffect as ae}from"react";import h from"gsap";import{ScrollTrigger as x}from"gsap/dist/ScrollTrigger";import{useMediaQuery as q}from"react-responsive";import{useInView as re}from"react-intersection-observer";import oe from"../../helpers/ScrollLoadVideo.js";import{Button as H,Heading as V,Picture as A,Text as le}from"../../components/index.js";import se from"./Countdown.js";import{cn as n}from"../../helpers/index.js";import{withLayout as ne}from"../../shared/Styles.js";import{useExposure as ie}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{sizeMap as pe}from"../../components/button.js";import{VideoModal as ce}from"../VideoModal/index.js";const o="image",l="hero_banner",ue=({size:v="base"})=>{const{width:y,height:w}=pe[v];return e("svg",{width:y,height:w,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},Q=F.forwardRef(({data:v,className:y},w)=>{const{label:R,title:t,subtitle:a,endDate:P,endDate_tz:Z,dateFormat:G,pcImage:k,padImage:M,mobileImage:f,pcVideo:J,padVideo:K,mobileVideo:C,isShowVideo:O,primaryButton:u,secondaryButton:r,theme:W="light",size:N="default",caption:$=[],blockLink:L,iconArray:X}=v,D=q({query:"(max-width: 768px)"}),S=q({query:"(max-width: 1024px)"}),[E,U]=te(!1),{ref:Y,inView:_}=re(),T=b(null),z=b(null),B=b(null),d=b(null),s=b(null);return ie(s,{componentType:o,componentName:l,componentTitle:t,componentDescription:a}),ee(w,()=>s.current),ae(()=>{h.registerPlugin(x);function p(){if(!d.current)return;const c=s.current?.clientHeight||100;window.innerHeight<=c?T.current=x.create({trigger:s.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:m=>{const g=m.progress*40-20;h.set(d.current,{yPercent:g})}}):(B.current=x.create({trigger:s.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:m=>{const g=m.progress*20-20;h.set(d.current,{yPercent:g})}}),z.current=x.create({trigger:s.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:m=>{const g=m.progress*20;h.set(d.current,{yPercent:g})}}))}return _&&p(),()=>{T.current&&T.current.kill(),B.current&&B.current.kill(),z.current&&z.current.kill()}},[_]),e("div",{ref:Y,"data-ui-component-id":"HeroBanner",className:"relative z-[5]",children:i("div",{ref:s,className:n(W==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":N==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":N==="sm"},y),children:[L&&e("a",{className:"absolute inset-0 z-10",href:I(L,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":t}),e("div",{ref:d,className:n("absolute left-0 top-0 size-full"),children:O?e(oe,{poster:D?f?.url:S?M?.url||f?.url:k?.url,src:D?C?.url:S?K?.url||C?.url:J?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:k?.alt||"",source:`${k?.url||""} , ${M?.url??(f?.url||"")} 1024, ${f?.url||""} 767`})}),i("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[i("div",{className:"laptop:text-left max-w-[686px]",children:[R&&e(V,{as:"h3",className:n("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:R}),t&&e(V,{as:"h2",size:N==="sm"?4:5,className:n("hero-banner-title"),html:t}),a&&e(V,{as:"h3",className:n("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:a}),P&&e("div",{className:"mt-3",children:e(se,{endDate:P,endDate_tz:Z,dateFormat:G})})]}),i("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[r?.isShowPlayVideoButton&&r?.playVideoButtonText?i(H,{onClick:()=>U(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${r?.playVideoButtonText}`,children:[r?.playVideoButtonText," ",e(ue,{size:"lg"})]}):r?.text?i(H,{"aria-label":t??a,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:I(r?.link,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${r?.text}`,children:[r?.text,e("span",{className:"sr-only",children:t??a})]}):null,u&&u.text&&e(H,{"aria-label":t??a,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:I(u.link,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${u?.text}`,children:u.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:X?.map((p,c)=>e("div",{className:"h-12",children:e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover !w-auto",loading:"eager",alt:p?.pcImage?.alt||"",source:p?.pcImage?.url})},c))})]}),$.length>0&&e("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:$.map((p,c)=>i(F.Fragment,{children:[e(le,{size:2,className:n("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:p.title}),c<$.length-1&&e("div",{className:n("bg-info-primary w-px")})]},c))}),E&&e(ce,{visible:E,videoUrl:r?.videoUrl?.url,youTubeId:r?.youtubeId,onCloseModal:()=>U(!1)})]})})});Q.displayName="HeroBanner";var Be=ne(Q);export{Be as default};
1
+ "use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import F,{useImperativeHandle as ee,useRef as b,useState as te,useEffect as ae}from"react";import f from"gsap";import{ScrollTrigger as h}from"gsap/dist/ScrollTrigger";import{useMediaQuery as q}from"react-responsive";import{useInView as re}from"react-intersection-observer";import oe from"../../helpers/ScrollLoadVideo.js";import{Button as H,Heading as V,Picture as A,Text as le}from"../../components/index.js";import se from"./Countdown.js";import{cn as n}from"../../helpers/index.js";import{withLayout as ne}from"../../shared/Styles.js";import{useExposure as pe}from"../../hooks/useExposure.js";import{trackUrlRef as I}from"../../shared/trackUrlRef.js";import{sizeMap as ie}from"../../components/button.js";import{VideoModal as ce}from"../VideoModal/index.js";const o="image",l="hero_banner",ue=({size:v="base"})=>{const{width:y,height:w}=ie[v];return e("svg",{width:y,height:w,viewBox:"0 0 20 20",fill:"currentcolor",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z",fill:"currentcolor"})})},Q=F.forwardRef(({data:v,className:y},w)=>{const{label:R,title:t,subtitle:a,endDate:P,endDate_tz:Z,dateFormat:G,pcImage:k,padImage:M,mobileImage:x,pcVideo:J,padVideo:K,mobileVideo:C,isShowVideo:O,primaryButton:u,secondaryButton:r,theme:W="light",size:N="default",caption:$=[],blockLink:L,iconArray:X}=v,D=q({query:"(max-width: 768px)"}),S=q({query:"(max-width: 1024px)"}),[E,U]=te(!1),{ref:Y,inView:_}=re(),T=b(null),z=b(null),B=b(null),d=b(null),s=b(null);return pe(s,{componentType:o,componentName:l,componentTitle:t,componentDescription:a}),ee(w,()=>s.current),ae(()=>{f.registerPlugin(h);function i(){if(!d.current)return;const c=s.current?.clientHeight||100;window.innerHeight<=c?T.current=h.create({trigger:s.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:m=>{const g=m.progress*40-20;f.set(d.current,{yPercent:g})}}):(B.current=h.create({trigger:s.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:m=>{const g=m.progress*20-20;f.set(d.current,{yPercent:g})}}),z.current=h.create({trigger:s.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:m=>{const g=m.progress*20;f.set(d.current,{yPercent:g})}}))}return _&&i(),()=>{T.current&&T.current.kill(),B.current&&B.current.kill(),z.current&&z.current.kill()}},[_]),e("div",{ref:Y,"data-ui-component-id":"HeroBanner",className:"relative z-[5]",children:p("div",{ref:s,className:n(W==="dark"?"aiui-dark":""," tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",{"lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]":N==="default","lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]":N==="sm"},y),children:[L&&e("a",{className:"absolute inset-0 z-10",href:I(L,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}`,tabIndex:-1,"aria-hidden":"true","aria-label":t}),e("div",{ref:d,className:n("absolute left-0 top-0 size-full"),children:O?e(oe,{poster:D?x?.url:S?M?.url||x?.url:k?.url,src:D?C?.url:S?K?.url||C?.url:J?.url,className:"laptop:w-full h-full",videoClassName:"h-full object-cover",muted:!0,loop:!0,playsInline:!0}):e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",alt:k?.alt||"",source:`${k?.url||""} , ${M?.url??(x?.url||"")} 1024, ${x?.url||""} 767`})}),p("div",{className:"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[p("div",{className:"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]",children:[R&&e(V,{as:"h3",className:n("hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm"),html:R}),t&&e(V,{as:"h2",size:N==="sm"?4:5,className:n("hero-banner-title"),html:t}),a&&e(V,{as:"h3",className:n("hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm"),html:a}),P&&e("div",{className:"mt-3",children:e(se,{endDate:P,endDate_tz:Z,dateFormat:G})})]}),p("div",{className:"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[r?.isShowPlayVideoButton&&r?.playVideoButtonText?p(H,{onClick:()=>U(!0),size:"lg",variant:"secondary",className:"hero-banner-play-video-button","data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${r?.playVideoButtonText}`,children:[r?.playVideoButtonText," ",e(ue,{size:"lg"})]}):r?.text?p(H,{"aria-label":t??a,size:"lg",variant:"secondary",className:"hero-banner-secondary-button",as:"a",href:I(r?.link,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${r?.text}`,children:[r?.text,e("span",{className:"sr-only",children:t??a})]}):null,u&&u.text&&e(H,{"aria-label":t??a,size:"lg",variant:"primary",className:"hero-banner-primary-button",as:"a",href:I(u.link,`${o}_${l}`),"data-headless-type-name":`${o}#${l}`,"data-headless-title-desc-button":`${t}#${a}#${u?.text}`,children:u.text})]}),e("div",{className:"hero-banner-icon-group flex items-center gap-2",children:X?.map((i,c)=>e("div",{className:"h-12",children:e(A,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover !w-auto",loading:"eager",alt:i?.pcImage?.alt||"",source:i?.pcImage?.url})},c))})]}),$.length>0&&e("div",{className:"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:$.map((i,c)=>p(F.Fragment,{children:[e(le,{size:2,className:n("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]"),html:i.title}),c<$.length-1&&e("div",{className:n("bg-info-primary w-px")})]},c))}),E&&e(ce,{visible:E,videoUrl:r?.videoUrl?.url,youTubeId:r?.youtubeId,onCloseModal:()=>U(!1)})]})})});Q.displayName="HeroBanner";var Be=ne(Q);export{Be as default};
2
2
  //# sourceMappingURL=HeroBanner.js.map
package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\" className=\"relative z-[5]\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {label && (\n <Heading\n as=\"h3\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as=\"a\"\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as=\"a\"\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover !w-auto\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef, useState, useEffect } from 'react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useInView } from 'react-intersection-observer'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Countdown from './Countdown.js'\nimport { cn } from '../../helpers/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { sizeMap } from '../../components/button.js'\nimport { VideoModal } from '../VideoModal/index.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst PlayButtonAppendIcon = ({ size = 'base' }: { size: 'base' | 'lg' | 'sm' }) => {\n const { width, height } = sizeMap[size]\n return (\n <svg width={width} height={height} viewBox=\"0 0 20 20\" fill=\"currentcolor\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M13.9599 9.30662C14.4547 9.63647 14.4547 10.3635 13.9599 10.6934L6.29558 15.8029C5.74179 16.1721 5 15.7751 5 15.1096V4.89042C5 4.22484 5.74179 3.82785 6.29558 4.19705L13.9599 9.30662Z\"\n fill=\"currentcolor\"\n />\n </svg>\n )\n}\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const {\n label,\n title,\n subtitle,\n endDate,\n endDate_tz,\n dateFormat,\n pcImage,\n padImage,\n mobileImage,\n pcVideo,\n padVideo,\n mobileVideo,\n isShowVideo,\n primaryButton,\n secondaryButton,\n theme = 'light',\n size = 'default',\n caption = [],\n blockLink,\n iconArray,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const isPad = useMediaQuery({ query: '(max-width: 1024px)' })\n const [visible, setVisible] = useState<boolean>(false)\n const { ref: inViewRef, inView } = useInView()\n const scrollTriggerRef = useRef<ScrollTrigger | null>(null)\n const bgTriggerRef = useRef<ScrollTrigger | null>(null)\n const boxTriggerRef = useRef<ScrollTrigger | null>(null)\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useEffect(() => {\n gsap.registerPlugin(ScrollTrigger)\n function gsapResize() {\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n scrollTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n boxTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n bgTriggerRef.current = ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n }\n if (inView) gsapResize()\n return () => {\n // ScrollTrigger.getAll().forEach((t: any) => t.kill())\n scrollTriggerRef.current && scrollTriggerRef.current.kill()\n boxTriggerRef.current && boxTriggerRef.current.kill()\n bgTriggerRef.current && bgTriggerRef.current.kill()\n }\n }, [inView])\n\n return (\n <div ref={inViewRef} data-ui-component-id=\"HeroBanner\" className=\"relative z-[5]\">\n <div\n ref={boxRef}\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n ' tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n {\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520]': size === 'default',\n 'lg-desktop:aspect-[1920/720] desktop:aspect-[1440/576] laptop:aspect-[1024/432]': size === 'sm',\n },\n className\n )}\n >\n {blockLink && (\n <a\n className=\"absolute inset-0 z-10\"\n href={trackUrlRef(blockLink, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}`}\n tabIndex={-1}\n aria-hidden=\"true\"\n aria-label={title}\n ></a>\n )}\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n {isShowVideo ? (\n <ScrollLoadVideo\n poster={isMobile ? mobileImage?.url : isPad ? padImage?.url || mobileImage?.url : pcImage?.url}\n src={\n isMobile\n ? (mobileVideo?.url as string)\n : isPad\n ? (padVideo?.url as string) || (mobileVideo?.url as string)\n : (pcVideo?.url as string)\n }\n className=\"laptop:w-full h-full\"\n videoClassName=\"h-full object-cover\"\n muted\n loop\n playsInline\n />\n ) : (\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n alt={pcImage?.alt || ''}\n source={`${pcImage?.url || ''} , ${padImage?.url ?? (mobileImage?.url || '')} 1024, ${mobileImage?.url || ''} 767`}\n />\n )}\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"hero-banner-content laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left hero-banner-wrap-text lg-desktop:max-w-[824px] desktop:max-w-[648px] laptop:max-w-[440px] tablet:max-w-[704px] max-w-[358px]\">\n {label && (\n <Heading\n as=\"h3\"\n className={cn('hero-banner-label font-heading lg-desktop:text-[18px] desktop:text-base text-sm')}\n html={label}\n />\n )}\n {title && <Heading as=\"h2\" size={size === 'sm' ? 4 : 5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Heading\n as=\"h3\"\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] desktop:text-base laptop:mt-2 lg-desktop:mt-4 mt-1 text-sm'\n )}\n html={subtitle}\n />\n )}\n {endDate && (\n <div className=\"mt-3\">\n <Countdown endDate={endDate} endDate_tz={endDate_tz} dateFormat={dateFormat} />\n </div>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"hero-banner-button-group laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton?.isShowPlayVideoButton && secondaryButton?.playVideoButtonText ? (\n <Button\n onClick={() => setVisible(true)}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-play-video-button\"\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.playVideoButtonText}`}\n >\n {secondaryButton?.playVideoButtonText} <PlayButtonAppendIcon size=\"lg\" />\n </Button>\n ) : secondaryButton?.text ? (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"secondary\"\n className=\"hero-banner-secondary-button\"\n as=\"a\"\n href={trackUrlRef(secondaryButton?.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${secondaryButton?.text}`}\n >\n {secondaryButton?.text}\n <span className=\"sr-only\">{title ?? subtitle}</span>\n </Button>\n ) : null}\n {primaryButton && primaryButton.text && (\n <Button\n aria-label={title ?? subtitle}\n size=\"lg\"\n variant=\"primary\"\n className=\"hero-banner-primary-button\"\n as=\"a\"\n href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${title}#${subtitle}#${primaryButton?.text}`}\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n <div className=\"hero-banner-icon-group flex items-center gap-2\">\n {iconArray?.map((icon, index) => (\n <div key={index} className=\"h-12\">\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover !w-auto\"\n loading=\"eager\"\n alt={icon?.pcImage?.alt || ''}\n source={icon?.pcImage?.url}\n />\n </div>\n ))}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"hero-banner-caption-group laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] laptop:text-[14px] flex-1 text-[12px]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n\n {/* \u89C6\u9891\u5F39\u7A97 */}\n {visible && (\n <VideoModal\n visible={visible}\n videoUrl={secondaryButton?.videoUrl?.url}\n youTubeId={secondaryButton?.youtubeId}\n onCloseModal={() => setVisible(false)}\n />\n )}\n </div>\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withLayout(HeroBanner)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useState", "useEffect", "gsap", "ScrollTrigger", "useMediaQuery", "useInView", "ScrollLoadVideo", "Button", "Heading", "Picture", "Text", "Countdown", "cn", "withLayout", "useExposure", "trackUrlRef", "sizeMap", "VideoModal", "componentType", "componentName", "PlayButtonAppendIcon", "size", "width", "height", "HeroBanner", "data", "className", "ref", "label", "title", "subtitle", "endDate", "endDate_tz", "dateFormat", "pcImage", "padImage", "mobileImage", "pcVideo", "padVideo", "mobileVideo", "isShowVideo", "primaryButton", "secondaryButton", "theme", "caption", "blockLink", "iconArray", "isMobile", "isPad", "visible", "setVisible", "inViewRef", "inView", "scrollTriggerRef", "bgTriggerRef", "boxTriggerRef", "bgRef", "boxRef", "gsapResize", "clientHeight", "self", "value", "icon", "index", "c", "HeroBanner_default"]
7
7
  }
package/dist/esm/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as c,jsxs as de}from"react/jsx-runtime";import U,{useState as B,useEffect as v,useRef as w,useImperativeHandle as X}from"react";import{cn as Y}from"../../helpers/utils.js";import ee from"./tabSwitch.js";import te from"../Title/index.js";import ne from"../SwiperBox/index.js";import{withLayout as se}from"../../shared/Styles.js";import{gaTrack as E}from"../../shared/track.js";import{useMediaQuery as ae}from"react-responsive";import{useRollout as ie}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as re,ShelfDisplayHorizontalItem as oe}from"./shelfDisplayItem.js";const le="image",me="product_shelf",ce=f=>f==null?"default":String(f).replace(/[^a-zA-Z0-9_-]/g,"")||"default",fe=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,pe=U.forwardRef(({key:f,data:p,event:V,buildData:T,breakpoints:L,className:N="",recommendedData:i,target:z="_self",metafields:A,isDisplayGudgments:k=!1,isDisplayBackImage:$=!1},q)=>{const{productsTab:s=[],productsCard:g=[],title:I,isShowTab:r=!0,tabShape:O="square",isShowTag:K=!1,isShowOriginalPrice:Q=!0,isShowRecommendedCard:b=!1,...W}=p,[d,R]=B(""),[a,_]=B([]),M=w(!1),S=w(!1),D=w(null),Z=w(fe()),j=ae({query:"(max-width: 768px)"}),[F,P]=ie({threshold:0}),u=a?.length<=1&&k,o=!j&&a?.length<=2&&k,y=e=>{switch(e){case 1440:return o?a?.length:4;case 1024:return o?a?.length:3;default:return o?a?.length:2.3}},x=()=>{E({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:i?.map((e,m)=>{const n=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:m+1}})}})},l=(e,m)=>{if(m){const h=i?.map?.(n=>({...n,isShowRecommended:!0}));_(h?.length?h||[]:[])}else if(Array.isArray(e)){const n=e?.map?.(t=>{const H=T?.products?.find(J=>J?.handle===t?.handle);if(H)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,...H}})?.filter(t=>t);_(n?.length?n||[]:[])}else _([])};X(q,()=>D.current),v(()=>{P&&i?.length&&!M.current&&(M.current=!0,x())},[P,i]),v(()=>{if(!S.current){if(!S.current&&i?.length&&(S.current=!0),r){R(s?.[0]?.tab||""),l(s?.[0]?.data||[],s?.[0]?.isShowRecommendedTab);return}l(g,b)}},[i]),v(()=>{if(r){const e=s?.find(m=>m?.tab===d)||s?.[0];l(e?.data||[],e?.isShowRecommendedTab);return}l(g,b)},[T,r,b,g,s,d]);const G=ce(d),C=`${Z.current}-${G}`;return de("div",{ref:D,className:Y("shelf-display-wrap w-full",N,{"aiui-dark":p?.theme==="dark"}),children:[I&&c(te,{data:{title:I}}),r&&c("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:c(ee,{value:d,tabs:s,tabShape:O,onTabClick:e=>{if(R(e?.tab),l(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:le,component_name:me,component_title:p?.title,component_position:1,navigation:e?.tab}});return}x()}})}),c("div",{ref:F,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:c(ne,{data:{list:a,configuration:{...W,event:V,isShowTag:K,isShowOriginalPrice:Q,target:z,metafields:A,itemLength:a?.length,isDisplayBackImage:$}},id:C,className:`${r?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:o?"flex-1":"",Slide:o?oe:re,breakpoints:L||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u?1:1.2},768:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:y()},1024:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:y(1024)},1440:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:y(1440)}}},C)})]})});var ke=se(pe);export{ke as default};
1
+ "use client";import{jsx as c,jsxs as de}from"react/jsx-runtime";import U,{useState as B,useEffect as S,useRef as w,useImperativeHandle as X}from"react";import{cn as Y}from"../../helpers/utils.js";import ee from"./tabSwitch.js";import te from"../Title/index.js";import ne from"../SwiperBox/index.js";import{withLayout as se}from"../../shared/Styles.js";import{gaTrack as E}from"../../shared/track.js";import{useMediaQuery as ae}from"react-responsive";import{useRollout as ie}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as re,ShelfDisplayHorizontalItem as oe}from"./shelfDisplayItem.js";const le="image",ce="product_shelf",me=m=>m==null?"default":String(m).replace(/[^a-zA-Z0-9_-]/g,"")||"default",fe=()=>`shelf-display-${Math.random().toString(36).slice(2,9)}`,pe=U.forwardRef(({key:m,data:f,event:V,buildData:y,breakpoints:L,className:N="",recommendedData:i,target:z="_self",metafields:A,isDisplayGudgments:v=!1,isDisplayBackImage:$=!1},q)=>{const{productsTab:r=[],productsCard:T=[],title:k,isShowTab:p=!0,tabShape:O="square",isShowTag:K=!1,isShowOriginalPrice:Q=!0,isShowRecommendedCard:I=!1,...W}=f,[d,R]=B(""),[s,g]=B([]),M=w(!1),b=w(!1),D=w(null),Z=w(fe()),j=ae({query:"(max-width: 768px)"}),[F,P]=ie({threshold:0}),u=s?.length<=1&&v,o=!j&&s?.length<=2&&v,_=e=>{switch(e){case 1440:return o?s?.length:4;case 1024:return o?s?.length:3;default:return o?s?.length:2.3}},x=()=>{E({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:i?.map((e,a)=>{const n=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:a+1}})}})},l=(e,a)=>{if(a){const h=i?.map?.(n=>({...n,isShowRecommended:!0}));g(h?.length?h||[]:[])}else if(Array.isArray(e)){const n=e?.map?.(t=>{const H=y?.products?.find(J=>J?.handle===t?.handle);if(H)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,...H}})?.filter(t=>t);g(n?.length?n||[]:[])}else g([])};X(q,()=>D.current),S(()=>{P&&i?.length&&!M.current&&(M.current=!0,x())},[P,i]),S(()=>{if(!b.current){if(!b.current&&i?.length&&(b.current=!0),p){const e=r?.find(a=>a?.tab===d)||r?.[0];R(e?.tab||""),l(e?.data||[],e?.isShowRecommendedTab);return}l(T,I)}},[i]),S(()=>{if(p){const e=r?.find(a=>a?.tab===d)||r?.[0];l(e?.data||[],e?.isShowRecommendedTab);return}l(T,I)},[y]);const G=me(d),C=`${Z.current}-${G}`;return de("div",{ref:D,className:Y("shelf-display-wrap w-full",N,{"aiui-dark":f?.theme==="dark"}),children:[k&&c(te,{data:{title:k}}),p&&c("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:c(ee,{value:d,tabs:r,tabShape:O,onTabClick:e=>{if(R(e?.tab),l(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){E({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:le,component_name:ce,component_title:f?.title,component_position:1,navigation:e?.tab}});return}x()}})}),c("div",{ref:F,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:c(ne,{data:{list:s,configuration:{...W,event:V,isShowTag:K,isShowOriginalPrice:Q,target:z,metafields:A,itemLength:s?.length,isDisplayBackImage:$}},id:C,className:`${p?"mt-6":""} shelf-display-swiper-box !overflow-visible`,itemClassName:o?"flex-1":"",Slide:o?oe:re,breakpoints:L||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:u?1:1.2},768:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_()},1024:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_(1024)},1440:{spaceBetween:u?0:16,freeMode:!1,slidesPerView:_(1440)}}},C)})]})});var ke=se(pe);export{ke as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/ShelfDisplay/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceIdRef = useRef<string>(createInstanceId())\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData, isShowTab, isShowRecommendedCard, productsCard, productsTab, tabId])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n if (!v?.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n return\n }\n gackViewEvent()\n }}\n />\n </div>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst sanitizeCssSelector = (value?: string | number) => {\n if (value === undefined || value === null) return 'default'\n const sanitized = String(value).replace(/[^a-zA-Z0-9_-]/g, '')\n return sanitized || 'default'\n}\n\nconst createInstanceId = () => `shelf-display-${Math.random().toString(36).slice(2, 9)}`\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n (\n {\n key,\n data,\n event,\n buildData,\n breakpoints,\n className = '',\n recommendedData,\n target = '_self',\n metafields,\n isDisplayGudgments = false,\n isDisplayBackImage = false,\n },\n ref\n ) => {\n const {\n productsTab = [],\n productsCard = [],\n title,\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n isShowOriginalPrice = true,\n isShowRecommendedCard = false,\n ...other\n } = data\n\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isView = useRef<boolean>(false)\n const isRecommend = useRef<boolean>(false)\n const innerRef = useRef<HTMLDivElement>(null)\n const instanceIdRef = useRef<string>(createInstanceId())\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n const showItemLength = (size?: number) => {\n switch (size) {\n case 1440:\n return isShowGudgments ? currentItems?.length : 4\n case 1024:\n return isShowGudgments ? currentItems?.length : 3\n default:\n return isShowGudgments ? currentItems?.length : 2.3\n }\n }\n\n const gackViewEvent = () => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'view_item_list',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: recommendedData?.map((item, index) => {\n const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n const variant = findData || item?.variants?.[0]\n return {\n item_id: item?.sku || variant?.sku,\n item_name: item?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: index + 1,\n }\n }),\n },\n })\n }\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n if (flag) {\n const newCurrentData = recommendedData?.map?.(item => {\n return {\n ...item,\n isShowRecommended: true,\n }\n })\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n const isArray = Array.isArray(currentData)\n if (isArray) {\n const newCurrentData = currentData\n ?.map?.(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n isShowRecommended: false,\n custom_name: item.custom_name,\n custom_description: item.custom_description,\n custom_image: item.custom_image,\n custom_theme: item.custom_theme,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n } else {\n setCurrentItems([])\n }\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (inView && recommendedData?.length && !isView.current) {\n isView.current = true\n gackViewEvent()\n }\n }, [inView, recommendedData])\n\n // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n useEffect(() => {\n if (isRecommend.current) return\n if (!isRecommend.current && recommendedData?.length) {\n isRecommend.current = true\n }\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n setTabId(currentTab?.tab || '')\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n }, [recommendedData])\n\n useEffect(() => {\n if (isShowTab) {\n const currentTab = productsTab?.find(item => item?.tab === tabId) || productsTab?.[0]\n handleCurrentTab(currentTab?.data || [], currentTab?.isShowRecommendedTab)\n return\n }\n handleCurrentTab(productsCard, isShowRecommendedCard)\n // buildData \u66F4\u65B0\u65F6\u9700\u8981\u91CD\u65B0\u8BA1\u7B97\u5F53\u524D\u5217\u8868\n }, [buildData])\n\n const safeTabKey = sanitizeCssSelector(tabId)\n const swiperInstanceId = `${instanceIdRef.current}-${safeTabKey}`\n\n return (\n <div\n ref={innerRef}\n className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n >\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n if (!v?.isShowRecommendedTab) {\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n return\n }\n gackViewEvent()\n }}\n />\n </div>\n )}\n <div\n ref={viewRef as any}\n className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n >\n <SwiperBox\n key={swiperInstanceId}\n data={{\n list: currentItems,\n configuration: {\n ...other,\n event: event,\n isShowTag,\n isShowOriginalPrice,\n target: target,\n metafields: metafields,\n itemLength: currentItems?.length,\n isDisplayBackImage: isDisplayBackImage,\n },\n }}\n id={swiperInstanceId}\n className={`${isShowTab ? 'mt-6' : ''} shelf-display-swiper-box !overflow-visible`}\n itemClassName={isShowGudgments ? 'flex-1' : ''}\n Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n breakpoints={\n breakpoints || {\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: isOnce ? 1 : 1.2,\n },\n 768: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(),\n },\n 1024: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1024),\n },\n 1440: {\n spaceBetween: isOnce ? 0 : 16,\n freeMode: false,\n slidesPerView: showItemLength(1440),\n },\n }\n }\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "TabSwitch", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "sanitizeCssSelector", "value", "createInstanceId", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "instanceIdRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "currentTab", "safeTabKey", "swiperInstanceId", "ShelfDisplay_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "1.1.9-alpha.1765352011951",
3
+ "version": "1.1.9-alpha.1765358416020",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",