@anker-in/headless-ui 0.0.53 → 0.0.55

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 (17) hide show
  1. package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
  2. package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
  3. package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
  4. package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
  5. package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts +1 -0
  6. package/dist/cjs/biz-components/MediaPlayerMulti/types.js +1 -1
  7. package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map +1 -1
  8. package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
  9. package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
  10. package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
  11. package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
  12. package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
  13. package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
  14. package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts +1 -0
  15. package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
  16. package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
  17. package/package.json +1 -1
package/dist/cjs/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var G=Object.create;var f=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var W=(o,n)=>{for(var e in n)f(o,e,{get:n[e],enumerable:!0})},L=(o,n,e,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of K(n))!U.call(o,s)&&s!==e&&f(o,s,{get:()=>n[s],enumerable:!(i=J(n,s))||i.enumerable});return o};var M=(o,n,e)=>(e=o!=null?G(Q(o)):{},L(n||!o||!o.__esModule?f(e,"default",{value:o,enumerable:!0}):e,o)),X=o=>L(f({},"__esModule",{value:!0}),o);var ne={};W(ne,{default:()=>oe});module.exports=X(ne);var t=require("react/jsx-runtime"),r=require("react"),E=require("lodash"),d=require("../../helpers/utils.js"),R=require("../../shared/Styles.js"),P=M(require("../../components/button.js")),h=require("@payloadcms/richtext-lexical/html"),z=require("react-intersection-observer"),B=require("../../hooks/useExposure.js"),_=M(require("../../helpers/ScrollLoadVideo.js"));const Z="media_player_base",ee="video",N=({defaultConverters:o})=>({...o,text:n=>{const{node:e}=n;return e.$&&e.$.color?`<span class="lexical-${e.$.color}">${e.text}</span>`:e.text}}),te=(0,r.forwardRef)(({className:o="",onBtnClick:n,data:{title:e,videoTitle:i,btnText:s,img:re,video:$,theme:I,shape:D,...C}},S)=>{const{sticky:c}=C,[p,m]=(0,r.useState)(!1),[w,V]=(0,r.useState)(0),[F,Y]=(0,r.useState)(0),a=(0,r.useRef)(null),j=(0,r.useRef)(null),l=(0,r.useRef)(null),b=(0,r.useRef)(null),{ref:q,inView:H}=(0,z.useInView)();(0,r.useImperativeHandle)(S,()=>l.current);const T=typeof e=="string"?e:e&&(0,h.convertLexicalToHTML)({data:e,converters:N}),g=typeof i=="string"?i:i&&(0,h.convertLexicalToHTML)({data:i,converters:N});(0,r.useEffect)(()=>{H&&!s?(a.current?.play(),m(!0)):(a.current?.pause(),m(!1))},[H]);const v=(0,E.debounce)(()=>{if(l.current){const y=l.current.getBoundingClientRect(),u=window.innerHeight,O=window.scrollY||window.pageYOffset,A=y.bottom+O,k=document.documentElement.scrollHeight-A;V(k>u?u:k)}if(l.current){const y=l.current.clientHeight,u=window.innerHeight;Y(y+u)}},600);(0,r.useEffect)(()=>(v(),window.addEventListener("resize",v),()=>{window.removeEventListener("resize",v)}),[]),(0,B.useExposure)(b,{componentType:ee,componentName:Z,componentTitle:g});const x="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return(0,t.jsxs)(t.Fragment,{children:[c&&(0,t.jsx)("div",{ref:l,className:(0,d.cn)("relative z-10 ",x),children:(0,t.jsx)("div",{children:(0,t.jsxs)("div",{ref:q,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!p&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),g&&p&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:g}}),!p&&s&&(0,t.jsx)(P.default,{variant:"link",className:(0,d.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{p?(a.current&&a.current.pause(),m(!1)):(a.current&&a.current.play(),m(!0)),n&&n?.()},children:s})]})})}),(0,t.jsxs)("div",{style:c?{marginBottom:`-${w}px`,marginTop:`-${F}px`}:{},className:"relative",children:[(0,t.jsx)("div",{className:"sticky top-0 ",children:(0,t.jsx)("div",{className:(0,d.cn)("relative overflow-hidden",c?"h-screen w-full":x,o,{"aiui-dark":I==="dark","rounded-box":D==="rounded"}),children:(0,t.jsx)("div",{children:(0,t.jsxs)("div",{ref:j,className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,t.jsx)(_.default,{videoRef:a,src:$?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,t.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})})}),(0,t.jsx)("div",{className:(0,d.cn)(c&&"relative box-content block",x),style:c?{height:`${w}px`}:{},ref:b})]})]})});var oe=(0,R.withStyles)(te);
1
+ "use strict";"use client";var G=Object.create;var f=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var W=(o,n)=>{for(var e in n)f(o,e,{get:n[e],enumerable:!0})},L=(o,n,e,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of K(n))!U.call(o,s)&&s!==e&&f(o,s,{get:()=>n[s],enumerable:!(i=J(n,s))||i.enumerable});return o};var M=(o,n,e)=>(e=o!=null?G(Q(o)):{},L(n||!o||!o.__esModule?f(e,"default",{value:o,enumerable:!0}):e,o)),X=o=>L(f({},"__esModule",{value:!0}),o);var ne={};W(ne,{default:()=>oe});module.exports=X(ne);var t=require("react/jsx-runtime"),r=require("react"),E=require("lodash"),d=require("../../helpers/utils.js"),R=require("../../shared/Styles.js"),P=M(require("../../components/button.js")),h=require("@payloadcms/richtext-lexical/html"),z=require("react-intersection-observer"),B=require("../../hooks/useExposure.js"),_=M(require("../../helpers/ScrollLoadVideo.js"));const Z="media_player_base",ee="video",N=({defaultConverters:o})=>({...o,text:n=>{const{node:e}=n;return e.$&&e.$.color?`<span class="lexical-${e.$.color}">${e.text}</span>`:e.text}}),te=(0,r.forwardRef)(({className:o="",onBtnClick:n,data:{title:e,videoTitle:i,btnText:s,img:re,video:$,theme:I,shape:C,...S}},V)=>{const{sticky:c}=S,[p,m]=(0,r.useState)(!1),[w,D]=(0,r.useState)(0),[F,Y]=(0,r.useState)(0),a=(0,r.useRef)(null),j=(0,r.useRef)(null),l=(0,r.useRef)(null),b=(0,r.useRef)(null),{ref:q,inView:H}=(0,z.useInView)();(0,r.useImperativeHandle)(V,()=>l.current);const T=typeof e=="string"?e:e&&(0,h.convertLexicalToHTML)({data:e,converters:N}),v=typeof i=="string"?i:i&&(0,h.convertLexicalToHTML)({data:i,converters:N});(0,r.useEffect)(()=>{H&&!s?(a.current?.play(),m(!0)):(a.current?.pause(),m(!1))},[H]);const g=(0,E.debounce)(()=>{if(l.current){const y=l.current.getBoundingClientRect(),u=window.innerHeight,O=window.scrollY||window.pageYOffset,A=y.bottom+O,k=document.documentElement.scrollHeight-A;D(k>u?u:k)}if(l.current){const y=l.current.clientHeight,u=window.innerHeight;Y(y+u)}},600);(0,r.useEffect)(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]),(0,B.useExposure)(b,{componentType:ee,componentName:Z,componentTitle:v});const x="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return(0,t.jsxs)(t.Fragment,{children:[c&&(0,t.jsx)("div",{ref:l,className:(0,d.cn)("relative z-10 ",x),children:(0,t.jsx)("div",{children:(0,t.jsxs)("div",{ref:q,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!p&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),v&&p&&(0,t.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),!p&&s&&(0,t.jsx)(P.default,{variant:"link",className:(0,d.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{p?(a.current&&a.current.pause(),m(!1)):(a.current&&a.current.play(),m(!0)),n&&n?.()},children:s})]})})}),(0,t.jsxs)("div",{style:c?{marginBottom:`-${w}px`,marginTop:`-${F}px`}:{},className:"relative",children:[(0,t.jsx)("div",{className:"sticky top-0 ",children:(0,t.jsx)("div",{className:(0,d.cn)("relative overflow-hidden",c?"h-screen w-full":x,o,{"aiui-dark":I==="dark","rounded-box":C==="rounded"}),children:(0,t.jsx)("div",{children:(0,t.jsxs)("div",{ref:j,className:"media-cover left-0 top-0 h-screen w-screen",children:[(0,t.jsx)(_.default,{videoRef:a,src:$?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),(0,t.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})})})}),(0,t.jsx)("div",{className:(0,d.cn)(c&&"relative box-content block",x),style:c?{height:`${w}px`}:{},ref:b})]})]})});var oe=(0,R.withStyles)(te);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaPlayerBase/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n {/* <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n /> */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={video?.url!}\n className=\"size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n <div\n className=\"absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n </>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n {/* <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n /> */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={video?.url!}\n className=\"size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n <div\n className=\"absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n </>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
5
+ "mappings": "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",
6
6
  "names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_lodash", "import_utils", "import_Styles", "import_button", "import_html", "import_react_intersection_observer", "import_useExposure", "import_ScrollLoadVideo", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "trackRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "Button", "ScrollLoadVideo"]
7
7
  }
package/dist/cjs/biz-components/MediaPlayerMulti/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var T=Object.create;var r=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var j=(e,l)=>{for(var o in l)r(e,o,{get:l[o],enumerable:!0})},u=(e,l,o,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of z(l))!S.call(e,i)&&i!==o&&r(e,i,{get:()=>l[i],enumerable:!(s=_(l,i))||s.enumerable});return e};var v=(e,l,o)=>(o=e!=null?T(D(e)):{},u(l||!e||!e.__esModule?r(o,"default",{value:e,enumerable:!0}):o,e)),H=e=>u(r({},"__esModule",{value:!0}),e);var Z={};j(Z,{default:()=>U});module.exports=H(Z);var t=require("react/jsx-runtime"),a=require("react"),w=require("../../helpers/utils.js"),g=require("../../shared/Styles.js"),n=require("../../components/index.js"),p=require("../../components/dialog.js"),b=v(require("../Title/index.js")),k=v(require("../SwiperBox/index.js")),y=require("../../components/container.js"),M=require("@payloadcms/richtext-lexical/html"),N=require("../../hooks/useExposure.js");const q="video",E="media_player_multi",I=({data:e,configuration:l})=>(0,t.jsxs)("div",{className:(0,w.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[(0,t.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,t.jsx)(n.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,t.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:e?.video?.url&&(0,t.jsx)("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(e?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,t.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,t.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,t.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,t.jsx)(n.Link,{href:e?.href,className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,t.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]}),R=(0,a.forwardRef)(({data:{items:e=[],shape:l="square",title:o,containerProps:s},className:i="",key:P,onVideoPlayBtnClick:C},B)=>{const[c,d]=(0,a.useState)(!1),[L,m]=(0,a.useState)(""),f=typeof o=="string"?o:o&&(0,M.convertLexicalToHTML)({data:o}),x=(0,a.useRef)(null);(0,N.useExposure)(x,{componentType:q,componentName:E,componentTitle:f});const h=e.length;return(0,t.jsxs)("div",{className:i,ref:x,children:[(0,t.jsx)("div",{className:"mediaplayermulti-box",children:(0,t.jsx)(y.Container,{...s||{},className:"overflow-hidden",children:(0,t.jsxs)("div",{className:i,ref:B,children:[o&&(0,t.jsx)(b.default,{className:"mediaplayermulti-title",data:{title:f||""}}),(0,t.jsx)(k.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+P,data:{list:e,configuration:{shape:l,onVideoPlayBtnClick:C,setVisible:d,setVideoUrl:m}},Slide:I,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:h===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),(0,t.jsx)(p.Dialog,{open:c,onOpenChange:V=>{d(V),m("")},children:(0,t.jsxs)(p.DialogContent,{className:"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[c?(0,t.jsx)("video",{className:"size-full object-cover",src:L,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,(0,t.jsx)("div",{onClick:()=>{d(!1),m("")},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:(0,t.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var U=(0,g.withStyles)(R);
1
+ "use strict";"use client";var z=Object.create;var n=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var I=(e,t)=>{for(var o in t)n(e,o,{get:t[o],enumerable:!0})},x=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of _(t))!j.call(e,i)&&i!==o&&n(e,i,{get:()=>t[i],enumerable:!(r=T(t,i))||r.enumerable});return e};var g=(e,t,o)=>(o=e!=null?z(D(e)):{},x(t||!e||!e.__esModule?n(o,"default",{value:e,enumerable:!0}):o,e)),S=e=>x(n({},"__esModule",{value:!0}),e);var Z={};I(Z,{default:()=>U});module.exports=S(Z);var l=require("react/jsx-runtime"),s=require("react"),v=require("../../helpers/utils.js"),w=require("../../shared/Styles.js"),a=require("../../components/index.js"),p=require("../../components/dialog.js"),b=g(require("../Title/index.js")),k=g(require("../SwiperBox/index.js")),y=require("../../components/container.js"),N=require("@payloadcms/richtext-lexical/html"),M=require("../../hooks/useExposure.js");const H="video",q="media_player_multi",E=({data:e,configuration:t})=>(0,l.jsxs)("div",{className:(0,v.cn)("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[(0,l.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[(0,l.jsx)(a.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),(0,l.jsx)(a.Picture,{source:e.mobileImg?.url||e.img?.url,alt:e.mobileImg?.alt||e.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),(0,l.jsx)("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:e?.video?.url&&(0,l.jsx)("button",{onClick:()=>{t?.setVisible?.(!0),t?.setVideoUrl?.(e?.video?.url),t?.onVideoPlayBtnClick?.(t?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:(0,l.jsx)("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:(0,l.jsx)("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),(0,l.jsxs)("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[(0,l.jsxs)("div",{className:"flex flex-col",children:[(0,l.jsx)("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,l.jsx)(a.Link,{href:e?.href,className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.quote})]}),(0,l.jsx)("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:e.description})]})]}),R=(0,s.forwardRef)(({data:{items:e=[],shape:t="square",title:o,containerProps:r},className:i="",key:P,onVideoPlayBtnClick:C},B)=>{const[c,d]=(0,s.useState)(!1),[L,m]=(0,s.useState)(""),f=typeof o=="string"?o:o&&(0,N.convertLexicalToHTML)({data:o}),u=(0,s.useRef)(null);(0,M.useExposure)(u,{componentType:H,componentName:q,componentTitle:f});const h=e.length;return(0,l.jsxs)("div",{className:i,ref:u,children:[(0,l.jsx)("div",{className:"mediaplayermulti-box",children:(0,l.jsx)(y.Container,{...r||{},className:"overflow-hidden",children:(0,l.jsxs)("div",{className:i,ref:B,children:[o&&(0,l.jsx)(b.default,{className:"mediaplayermulti-title",data:{title:f||""}}),(0,l.jsx)(k.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+P,data:{list:e,configuration:{shape:t,onVideoPlayBtnClick:C,setVisible:d,setVideoUrl:m}},Slide:E,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:h===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),(0,l.jsx)(p.Dialog,{open:c,onOpenChange:V=>{d(V),m("")},children:(0,l.jsxs)(p.DialogContent,{className:"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[c?(0,l.jsx)("video",{className:"size-full object-cover",src:L,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,(0,l.jsx)("div",{onClick:()=>{d(!1),m("")},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:(0,l.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:(0,l.jsx)("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var U=(0,w.withStyles)(R);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n href={data?.href}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n >\n {data.quote}\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n useExposure(wrapperRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length\n\n return (\n <div className={className} ref={wrapperRef}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n setVideoUrl('')\n }}\n >\n <DialogContent className=\"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n setVideoUrl('')\n }}\n className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n href={data?.href}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n >\n {data.quote}\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n useExposure(wrapperRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length\n\n return (\n <div className={className} ref={wrapperRef}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n setVideoUrl('')\n }}\n >\n <DialogContent className=\"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n setVideoUrl('')\n }}\n className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
5
+ "mappings": "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",
6
6
  "names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_dialog", "import_Title", "import_SwiperBox", "import_container", "import_html", "import_useExposure", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "wrapperRef", "itemsLength", "Title", "SwiperBox", "flag"]
7
7
  }
package/dist/cjs/biz-components/MediaPlayerMulti/types.d.ts CHANGED
@@ -4,6 +4,7 @@ export interface MediaPlayerItemProps {
4
4
  name: string;
5
5
  description: string;
6
6
  img: Img;
7
+ mobileImg?: Img;
7
8
  video?: Video;
8
9
  quote?: string;
9
10
  href?: string;
package/dist/cjs/biz-components/MediaPlayerMulti/types.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var m=(o,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of p(e))!a.call(o,r)&&r!==n&&i(o,r,{get:()=>e[r],enumerable:!(t=s(e,r))||t.enumerable});return o};var d=o=>m(i({},"__esModule",{value:!0}),o);var P={};module.exports=d(P);
1
+ "use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var a=(o,e,n,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of m(e))!p.call(o,r)&&r!==n&&i(o,r,{get:()=>e[r],enumerable:!(t=s(e,r))||t.enumerable});return o};var d=o=>a(i({},"__esModule",{value:!0}),o);var P={};module.exports=d(P);
2
2
  //# sourceMappingURL=types.js.map
package/dist/cjs/biz-components/MediaPlayerMulti/types.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerMulti/types.ts"],
4
- "sourcesContent": ["import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n title: string\n name: string\n description: string\n img: Img\n video?: Video\n quote?: string\n href?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n data: {\n title?: string\n shape?: 'round' | 'square'\n items: MediaPlayerItemProps[]\n containerProps?: ContainerProps\n }\n onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
4
+ "sourcesContent": ["import type { ComponentCommonProps, Img, Video, ContainerProps } from '../../types/props.js'\n\nexport interface MediaPlayerItemProps {\n title: string\n name: string\n description: string\n img: Img\n mobileImg?: Img\n video?: Video\n quote?: string\n href?: string\n}\n\nexport interface MediaPlayerMultiProps extends ComponentCommonProps {\n data: {\n title?: string\n shape?: 'round' | 'square'\n items: MediaPlayerItemProps[]\n containerProps?: ContainerProps\n }\n onVideoPlayBtnClick?: (jIndex: number) => void\n}\n"],
5
5
  "mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
6
6
  "names": ["types_exports", "__toCommonJS"]
7
7
  }
package/dist/cjs/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";"use client";var J=Object.create;var x=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,t)=>{for(var i in t)x(e,i,{get:t[i],enumerable:!0})},C=(e,t,i,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of X(t))!Z.call(e,a)&&a!==i&&x(e,a,{get:()=>t[a],enumerable:!(p=K(t,a))||p.enumerable});return e};var l=(e,t,i)=>(i=e!=null?J(Y(e)):{},C(t||!e||!e.__esModule?x(i,"default",{value:e,enumerable:!0}):i,e)),te=e=>C(x({},"__esModule",{value:!0}),e);var ne={};ee(ne,{default:()=>se});module.exports=te(ne);var r=require("react/jsx-runtime"),n=l(require("react")),h=require("../../helpers/utils.js"),I=l(require("../../components/picture.js")),_=l(require("./tabSwitch.js")),N=l(require("../../components/button.js")),M=l(require("../Title/index.js")),$=l(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),le=require("../../components/container.js"),D=require("react-responsive"),q=require("../../hooks/useExposure.js"),L=require("../../shared/track.js"),R=require("../AiuiProvider/index.js"),V=l(require("../../components/badge.js")),A=require("../../components/heading.js"),O=require("../../components/text.js"),U=require("../../shared/trackUrlRef.js");const T="image",B="product_shelf",re=999999999e-2,ie=({data:e,configuration:t})=>{const{locale:i="us",copyWriting:p}=(0,R.useAiuiContext)(),a=(0,D.useMediaQuery)({query:"(max-width: 768px)"}),b=(o,s)=>t?.event?.primaryButton?.(o,s+1),m=(o,s)=>t?.event?.secondaryButton?.(o,s+1),c=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},g=!c?.availableForSale&&c?.price?.amount===re,w=t?.isShowTag,{price:k,basePrice:d}=(0,H.formatVariantPrice)({locale:i,amount:c?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const o=e?.sku,s=e?.variants;return s?.find(v=>v?.sku===o)?.image?.url||s?.[0]?.image?.url||""};return(0,r.jsx)("div",{className:(0,h.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":a}),children:(0,r.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,r.jsx)("div",{className:(0,h.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,r.jsx)("a",{href:(0,U.trackUrlRef)(`${i==="us"||!i?"":`/${i}`}/products/${e?.handle}`,`${T}_${B}`),children:(0,r.jsx)(I.default,{source:u(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),w?(0,r.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter(o=>o.startsWith("CLtag"))?.map(o=>o.replace("CLtag:",""))?.slice(0,2)?.map?.((o,s)=>(0,r.jsx)(V.default,{children:o},s))}):null,e?.title?(0,r.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?(0,r.jsx)(O.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,(0,r.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:g?(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k||""}),(0,r.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:d||""})]})}),(0,r.jsxs)("div",{className:(0,h.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,r.jsx)(N.default,{variant:"secondary",onClick:()=>m(e,t?.index),className:`
1
+ "use strict";"use client";var J=Object.create;var x=Object.defineProperty;var K=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,t)=>{for(var i in t)x(e,i,{get:t[i],enumerable:!0})},C=(e,t,i,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of X(t))!Z.call(e,a)&&a!==i&&x(e,a,{get:()=>t[a],enumerable:!(p=K(t,a))||p.enumerable});return e};var l=(e,t,i)=>(i=e!=null?J(Y(e)):{},C(t||!e||!e.__esModule?x(i,"default",{value:e,enumerable:!0}):i,e)),te=e=>C(x({},"__esModule",{value:!0}),e);var ne={};ee(ne,{default:()=>se});module.exports=te(ne);var r=require("react/jsx-runtime"),n=l(require("react")),h=require("../../helpers/utils.js"),I=l(require("../../components/picture.js")),_=l(require("./tabSwitch.js")),N=l(require("../../components/button.js")),M=l(require("../Title/index.js")),$=l(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),le=require("../../components/container.js"),D=require("react-responsive"),q=require("../../hooks/useExposure.js"),L=require("../../shared/track.js"),R=require("../AiuiProvider/index.js"),V=l(require("../../components/badge.js")),A=require("../../components/heading.js"),O=require("../../components/text.js"),U=require("../../shared/trackUrlRef.js");const T="image",B="product_shelf",re=999999999e-2,ie=({data:e,configuration:t})=>{const{locale:i="us",copyWriting:p}=(0,R.useAiuiContext)(),a=(0,D.useMediaQuery)({query:"(max-width: 768px)"}),b=(o,s)=>t?.event?.primaryButton?.(o,s+1),m=(o,s)=>t?.event?.secondaryButton?.(o,s+1),c=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},g=!c?.availableForSale&&c?.price?.amount===re,w=t?.isShowTag,{price:k,basePrice:d}=(0,H.formatVariantPrice)({locale:i,amount:c?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const o=e?.sku,s=e?.variants;return s?.find(v=>v?.sku===o)?.image?.url||s?.[0]?.image?.url||""};return(0,r.jsx)("div",{className:(0,h.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",t?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":a}),children:(0,r.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[(0,r.jsx)("div",{className:(0,h.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,r.jsx)("a",{href:(0,U.trackUrlRef)(`${i==="us"||!i?"":`/${i}`}/products/${e?.handle}`,`${T}_${B}`),children:(0,r.jsx)(I.default,{source:u(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),w?(0,r.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((o,s)=>(0,r.jsx)(V.default,{children:o},s))}):null,e?.title?(0,r.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?(0,r.jsx)(O.Text,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,(0,r.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:g?(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:p?.soldOutText}):(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k||""}),(0,r.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:d||""})]})}),(0,r.jsxs)("div",{className:(0,h.cn)("lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,r.jsx)(N.default,{variant:"secondary",onClick:()=>m(e,t?.index),className:`
2
2
  ${t.direction==="vertical"?"w-full":""}
3
3
  `,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,r.jsx)(N.default,{variant:"primary",onClick:()=>b(e,t?.index),className:`
4
4
  ${t.direction==="vertical"?"w-full":""}
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 Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\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 ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\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 }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(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 Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\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 ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\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 }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
6
  "names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_container", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "import_trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerBase/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as W,jsx as e,jsxs as m}from"react/jsx-runtime";import{useState as h,useRef as d,useEffect as L,forwardRef as F,useImperativeHandle as Y}from"react";import{debounce as j}from"lodash";import{cn as p}from"../../helpers/utils.js";import{withStyles as q}from"../../shared/Styles.js";import O from"../../components/button.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as A}from"react-intersection-observer";import{useExposure as G}from"../../hooks/useExposure.js";import J from"../../helpers/ScrollLoadVideo.js";const K="media_player_base",Q="video",N=({defaultConverters:u})=>({...u,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),U=F(({className:u="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:f,img:X,video:E,theme:R,shape:P,...z}},B)=>{const{sticky:r}=z,[a,l]=h(!1),[w,_]=h(0),[$,I]=h(0),o=d(null),D=d(null),n=d(null),b=d(null),{ref:C,inView:H}=A();Y(B,()=>n.current);const T=typeof t=="string"?t:t&&M({data:t,converters:N}),g=typeof i=="string"?i:i&&M({data:i,converters:N});L(()=>{H&&!f?(o.current?.play(),l(!0)):(o.current?.pause(),l(!1))},[H]);const v=j(()=>{if(n.current){const y=n.current.getBoundingClientRect(),c=window.innerHeight,S=window.scrollY||window.pageYOffset,V=y.bottom+S,k=document.documentElement.scrollHeight-V;_(k>c?c:k)}if(n.current){const y=n.current.clientHeight,c=window.innerHeight;I(y+c)}},600);L(()=>(v(),window.addEventListener("resize",v),()=>{window.removeEventListener("resize",v)}),[]),G(b,{componentType:Q,componentName:K,componentTitle:g});const x="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return m(W,{children:[r&&e("div",{ref:n,className:p("relative z-10 ",x),children:e("div",{children:m("div",{ref:C,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),g&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:g}}),!a&&f&&e(O,{variant:"link",className:p("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(o.current&&o.current.pause(),l(!1)):(o.current&&o.current.play(),l(!0)),s&&s?.()},children:f})]})})}),m("div",{style:r?{marginBottom:`-${w}px`,marginTop:`-${$}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:p("relative overflow-hidden",r?"h-screen w-full":x,u,{"aiui-dark":R==="dark","rounded-box":P==="rounded"}),children:e("div",{children:m("div",{ref:D,className:"media-cover left-0 top-0 h-screen w-screen",children:[e(J,{videoRef:o,src:E?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)"}})]})})})}),e("div",{className:p(r&&"relative box-content block",x),style:r?{height:`${w}px`}:{},ref:b})]})]})});var ce=q(U);export{ce as default};
1
+ "use client";import{Fragment as W,jsx as e,jsxs as m}from"react/jsx-runtime";import{useState as h,useRef as d,useEffect as L,forwardRef as F,useImperativeHandle as Y}from"react";import{debounce as j}from"lodash";import{cn as p}from"../../helpers/utils.js";import{withStyles as q}from"../../shared/Styles.js";import O from"../../components/button.js";import{convertLexicalToHTML as M}from"@payloadcms/richtext-lexical/html";import{useInView as A}from"react-intersection-observer";import{useExposure as G}from"../../hooks/useExposure.js";import J from"../../helpers/ScrollLoadVideo.js";const K="media_player_base",Q="video",N=({defaultConverters:u})=>({...u,text:s=>{const{node:t}=s;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),U=F(({className:u="",onBtnClick:s,data:{title:t,videoTitle:i,btnText:f,img:X,video:E,theme:R,shape:P,...z}},B)=>{const{sticky:r}=z,[a,l]=h(!1),[w,_]=h(0),[$,I]=h(0),o=d(null),C=d(null),n=d(null),b=d(null),{ref:S,inView:H}=A();Y(B,()=>n.current);const T=typeof t=="string"?t:t&&M({data:t,converters:N}),v=typeof i=="string"?i:i&&M({data:i,converters:N});L(()=>{H&&!f?(o.current?.play(),l(!0)):(o.current?.pause(),l(!1))},[H]);const g=j(()=>{if(n.current){const y=n.current.getBoundingClientRect(),c=window.innerHeight,V=window.scrollY||window.pageYOffset,D=y.bottom+V,k=document.documentElement.scrollHeight-D;_(k>c?c:k)}if(n.current){const y=n.current.clientHeight,c=window.innerHeight;I(y+c)}},600);L(()=>(g(),window.addEventListener("resize",g),()=>{window.removeEventListener("resize",g)}),[]),G(b,{componentType:Q,componentName:K,componentTitle:v});const x="lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]";return m(W,{children:[r&&e("div",{ref:n,className:p("relative z-10 ",x),children:e("div",{children:m("div",{ref:S,className:"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center",children:[T&&!a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:T}}),v&&a&&e("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:v}}),!a&&f&&e(O,{variant:"link",className:p("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{a?(o.current&&o.current.pause(),l(!1)):(o.current&&o.current.play(),l(!0)),s&&s?.()},children:f})]})})}),m("div",{style:r?{marginBottom:`-${w}px`,marginTop:`-${$}px`}:{},className:"relative",children:[e("div",{className:"sticky top-0 ",children:e("div",{className:p("relative overflow-hidden",r?"h-screen w-full":x,u,{"aiui-dark":R==="dark","rounded-box":P==="rounded"}),children:e("div",{children:m("div",{ref:C,className:"media-cover left-0 top-0 h-screen w-screen",children:[e(J,{videoRef:o,src:E?.url,className:"size-full",videoClassName:"object-cover",muted:!0,loop:!0,playsInline:!0,"webkit-playsinline":!0,"x5-playsinline":!0}),e("div",{className:"absolute left-0 top-0 z-10 size-full",style:{background:"rgba(0, 0, 0, 0.2)"}})]})})})}),e("div",{className:p(r&&"relative box-content block",x),style:r?{height:`${w}px`}:{},ref:b})]})]})});var ce=q(U);export{ce as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/MediaPlayerBase/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n {/* <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n /> */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={video?.url!}\n className=\"size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n <div\n className=\"absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #1D1D1F 100%)',\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n </>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { debounce } from 'lodash'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Button from '../../components/button.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerBaseProps } from './types.js'\n// import { Right } from './right.js'\nimport { useInView } from 'react-intersection-observer'\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst componentName = 'media_player_base'\nconst componentType = 'video'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst MediaPlayerBase = forwardRef<HTMLDivElement, MediaPlayerBaseProps>(\n ({ className = '', onBtnClick, data: { title, videoTitle, btnText, img, video, theme, shape, ...rest } }, ref) => {\n const { sticky } = rest\n const [isPlaying, setIsPlaying] = useState(false)\n const [btb, setbtb] = useState(0)\n const [titleHeight, setTitleHeight] = useState(0)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n const titleRef = useRef<HTMLDivElement>(null)\n const trackRef = useRef<HTMLDivElement>(null)\n\n const { ref: inViewRef, inView } = useInView()\n\n useImperativeHandle(ref, () => titleRef.current as HTMLDivElement)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n const videoTitle_html =\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n useEffect(() => {\n if (inView && !btnText) {\n videoRef.current?.play()\n setIsPlaying(true)\n } else {\n videoRef.current?.pause()\n setIsPlaying(false)\n }\n }, [inView])\n\n const debouncedHandleResize = debounce(() => {\n if (titleRef.current) {\n const rect = titleRef.current.getBoundingClientRect()\n const screenHeight = window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n }\n if (titleRef.current) {\n const titleHeight = titleRef.current.clientHeight\n const screenHeight = window.innerHeight\n setTitleHeight(titleHeight + screenHeight)\n }\n }, 600)\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useExposure(trackRef, {\n componentType,\n componentName,\n componentTitle: videoTitle_html,\n })\n\n const aspect =\n 'lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] desktop:aspect-w-[1024] desktop:aspect-h-[520] laptop:aspect-w-[1024] laptop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]'\n return (\n <>\n {sticky && (\n <div ref={titleRef} className={cn('relative z-10 ', aspect)}>\n <div>\n <div\n ref={inViewRef}\n className=\"media-content absolute left-1/2 top-1/2 z-20 w-full -translate-x-1/2 -translate-y-1/2 px-4 text-center\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: title_html }}\n />\n )}\n {videoTitle_html && isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl\"\n dangerouslySetInnerHTML={{ __html: videoTitle_html }}\n />\n )}\n {!isPlaying && btnText && (\n <Button\n variant=\"link\"\n className={cn('member-equity-button-secondary text-btn-primary-foreground')}\n onClick={() => {\n if (isPlaying) {\n if (videoRef.current) {\n videoRef.current.pause()\n }\n setIsPlaying(false)\n } else {\n if (videoRef.current) {\n videoRef.current.play()\n }\n setIsPlaying(true)\n }\n onBtnClick && onBtnClick?.()\n }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n </div>\n )}\n <div style={sticky ? { marginBottom: `-${btb}px`, marginTop: `-${titleHeight}px` } : {}} className=\"relative\">\n <div className=\"sticky top-0 \">\n <div\n className={cn('relative overflow-hidden', sticky ? 'h-screen w-full' : aspect, className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n >\n <div>\n <div ref={bgRef} className=\"media-cover left-0 top-0 h-screen w-screen\">\n {/* <video\n ref={videoRef}\n className=\"size-full object-cover\"\n src={video?.url}\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n /> */}\n <ScrollLoadVideo\n videoRef={videoRef}\n src={video?.url!}\n className=\"size-full\"\n videoClassName=\"object-cover\"\n muted\n loop\n playsInline\n webkit-playsinline\n x5-playsinline\n />\n <div\n className=\"absolute left-0 top-0 z-10 size-full\"\n style={{\n background: 'rgba(0, 0, 0, 0.2)',\n }}\n />\n </div>\n </div>\n </div>\n </div>\n <div\n className={cn(sticky && 'relative box-content block', aspect)}\n style={sticky ? { height: `${btb}px` } : {}}\n ref={trackRef}\n />\n </div>\n </>\n )\n }\n)\n\nexport default withStyles(MediaPlayerBase)\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "useState", "useRef", "useEffect", "forwardRef", "useImperativeHandle", "debounce", "cn", "withStyles", "Button", "convertLexicalToHTML", "useInView", "useExposure", "ScrollLoadVideo", "componentName", "componentType", "htmlConverters", "defaultConverters", "args", "node", "MediaPlayerBase", "className", "onBtnClick", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "rest", "ref", "sticky", "isPlaying", "setIsPlaying", "btb", "setbtb", "titleHeight", "setTitleHeight", "videoRef", "bgRef", "titleRef", "trackRef", "inViewRef", "inView", "title_html", "videoTitle_html", "debouncedHandleResize", "rect", "screenHeight", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "aspect", "MediaPlayerBase_default"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerMulti/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as c,forwardRef as g,useRef as b}from"react";import{cn as k}from"../../helpers/utils.js";import{withStyles as y}from"../../shared/Styles.js";import{Picture as M,Link as N}from"../../components/index.js";import{Dialog as P,DialogContent as C}from"../../components/dialog.js";import B from"../Title/index.js";import L from"../SwiperBox/index.js";import{Container as V}from"../../components/container.js";import{convertLexicalToHTML as T}from"@payloadcms/richtext-lexical/html";import{useExposure as _}from"../../hooks/useExposure.js";const z="video",D="media_player_multi",S=({data:t,configuration:l})=>o("div",{className:k("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",l.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[e(M,{source:t.img?.url,alt:t.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:t?.video?.url&&e("button",{onClick:()=>{l?.setVisible?.(!0),l?.setVideoUrl?.(t?.video?.url),l?.onVideoPlayBtnClick?.(l?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[e("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:t.title}),t.quote&&e(N,{href:t?.href,className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:t.quote})]}),e("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:t.description})]})]}),j=g(({data:{items:t=[],shape:l="square",title:i,containerProps:f},className:r="",key:x,onVideoPlayBtnClick:h},u)=>{const[n,a]=c(!1),[v,s]=c(""),p=typeof i=="string"?i:i&&T({data:i}),d=b(null);_(d,{componentType:z,componentName:D,componentTitle:p});const m=t.length;return o("div",{className:r,ref:d,children:[e("div",{className:"mediaplayermulti-box",children:e(V,{...f||{},className:"overflow-hidden",children:o("div",{className:r,ref:u,children:[i&&e(B,{className:"mediaplayermulti-title",data:{title:p||""}}),e(L,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+x,data:{list:t,configuration:{shape:l,onVideoPlayBtnClick:h,setVisible:a,setVideoUrl:s}},Slide:S,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:m===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:m===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),e(P,{open:n,onOpenChange:w=>{a(w),s("")},children:o(C,{className:"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[n?e("video",{className:"size-full object-cover",src:v,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,e("div",{onClick:()=>{a(!1),s("")},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:e("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var F=y(j);export{F as default};
1
+ "use client";import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useState as c,forwardRef as b,useRef as k}from"react";import{cn as y}from"../../helpers/utils.js";import{withStyles as N}from"../../shared/Styles.js";import{Picture as f,Link as M}from"../../components/index.js";import{Dialog as P,DialogContent as C}from"../../components/dialog.js";import B from"../Title/index.js";import L from"../SwiperBox/index.js";import{Container as V}from"../../components/container.js";import{convertLexicalToHTML as z}from"@payloadcms/richtext-lexical/html";import{useExposure as T}from"../../hooks/useExposure.js";const _="video",D="media_player_multi",j=({data:l,configuration:t})=>o("div",{className:y("laptop:max-w-full w-full overflow-hidden","laptop:flex-row flex shrink-0 flex-col","lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",t.shape==="round"?"rounded-2xl":""),children:[o("div",{className:"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none",children:[e(f,{source:l.img?.url,alt:l.img?.alt||"",className:"tablet:block hidden size-full",imgClassName:"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300"}),e(f,{source:l.mobileImg?.url||l.img?.url,alt:l.mobileImg?.alt||l.img?.alt||"",className:"tablet:hidden block size-full",imgClassName:"w-full h-full object-cover"}),e("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4",children:l?.video?.url&&e("button",{onClick:()=>{t?.setVisible?.(!0),t?.setVideoUrl?.(l?.video?.url),t?.onVideoPlayBtnClick?.(t?.index||0)},className:"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:e("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})]}),o("div",{className:"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4",children:[o("div",{className:"flex flex-col",children:[e("h3",{className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]",children:l.title}),l.quote&&e(M,{href:l?.href,className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:l.quote})]}),e("p",{className:"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]",children:l.description})]})]}),I=b(({data:{items:l=[],shape:t="square",title:i,containerProps:u},className:r="",key:h,onVideoPlayBtnClick:x},g)=>{const[n,s]=c(!1),[v,a]=c(""),p=typeof i=="string"?i:i&&z({data:i}),d=k(null);T(d,{componentType:_,componentName:D,componentTitle:p});const m=l.length;return o("div",{className:r,ref:d,children:[e("div",{className:"mediaplayermulti-box",children:e(V,{...u||{},className:"overflow-hidden",children:o("div",{className:r,ref:g,children:[i&&e(B,{className:"mediaplayermulti-title",data:{title:p||""}}),e(L,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+h,data:{list:l,configuration:{shape:t,onVideoPlayBtnClick:x,setVisible:s,setVideoUrl:a}},Slide:j,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:m===2?2:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:m===2?2:1.5},1440:{spaceBetween:16,freeMode:!1,slidesPerView:2}}})]})})}),e(P,{open:n,onOpenChange:w=>{s(w),a("")},children:o(C,{className:"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden",children:[n?e("video",{className:"size-full object-cover",src:v,muted:!0,loop:!0,autoPlay:!0,controls:!0}):null,e("div",{onClick:()=>{s(!1),a("")},className:"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24","stroke-width":"1.5",stroke:"currentColor","aria-hidden":"true","data-slot":"icon",className:"HomeCharger_closeWrap__Z7aBo",children:e("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M6 18 18 6M6 6l12 12"})})})]})})]})});var F=N(I);export{F as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/MediaPlayerMulti/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n href={data?.href}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n >\n {data.quote}\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n useExposure(wrapperRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length\n\n return (\n <div className={className} ref={wrapperRef}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n setVideoUrl('')\n }}\n >\n <DialogContent className=\"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n setVideoUrl('')\n }}\n className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useState, forwardRef, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture, Link } from '../../components/index.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Container } from '../../components/container.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\nimport { useExposure } from '../../hooks/useExposure.js'\n\nconst componentType = 'video'\nconst componentName = 'media_player_multi'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'laptop:max-w-full w-full overflow-hidden',\n 'laptop:flex-row flex shrink-0 flex-col',\n 'lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto',\n configuration.shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <div className=\"laptop:w-[49%] laptop:h-full tablet:h-[18.22vw] relative h-[35.9vw] w-full flex-none\">\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"tablet:block hidden size-full\"\n imgClassName=\"w-full h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n />\n <Picture\n source={data.mobileImg?.url || data.img?.url}\n alt={data.mobileImg?.alt || data.img?.alt || ''}\n className=\"tablet:hidden block size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data?.video?.url && (\n <button\n onClick={() => {\n configuration?.setVisible?.(true)\n configuration?.setVideoUrl?.(data?.video?.url)\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0)\n }}\n className=\"laptop:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n </div>\n </div>\n\n <div className=\"laptop:gap-[60px] lg-desktop:p-8 tablet:p-6 bg-container-secondary-1 flex min-h-[200px] flex-1 flex-col gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary mb-2 text-[14px] font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <Link\n href={data?.href}\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\"\n >\n {data.quote}\n </Link>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl lg-desktop:leading-[1.2] text-info-primary desktop:max-h-[186px] line-clamp-6 max-h-[144px] min-h-[100px] text-xl font-bold leading-[1.2] tracking-[-0.04em]\">\n {data.description}\n </p>\n </div>\n </div>\n )\n}\n\nconst MediaPlayerMulti = forwardRef<HTMLDivElement, MediaPlayerMultiProps>(\n (\n { data: { items = [], shape = 'square', title, containerProps }, className = '', key, onVideoPlayBtnClick },\n ref\n ) => {\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n useExposure(wrapperRef, {\n componentType,\n componentName,\n componentTitle: title_html,\n })\n\n // \u5982\u679C\u53EA\u6709\u4E24\u4E2Aitem, \u5219\u5E73\u5747\u5206\u914D\u7A7A\u95F4\n const itemsLength = items.length\n\n return (\n <div className={className} ref={wrapperRef}>\n <div className=\"mediaplayermulti-box\">\n <Container {...(containerProps || {})} className=\"overflow-hidden\">\n <div className={className} ref={ref}>\n {title && <Title className=\"mediaplayermulti-title\" data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape, onVideoPlayBtnClick, setVisible, setVideoUrl } }}\n Slide={MediaPlayerItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: itemsLength === 2 ? 2 : 1.5,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2,\n },\n }}\n />\n </div>\n </Container>\n </div>\n <Dialog\n open={visible}\n onOpenChange={(flag: boolean) => {\n setVisible(flag)\n setVideoUrl('')\n }}\n >\n <DialogContent className=\"max-h-3/4 w-4/5 max-w-[1200px] border-none bg-transparent p-0 [&_button]:hidden\">\n {visible ? <video className=\"size-full object-cover\" src={videoUrl} muted loop autoPlay controls /> : null}\n <div\n onClick={() => {\n setVisible(false)\n setVideoUrl('')\n }}\n className=\"tablet:size-8 tablet:-right-8 tablet:-top-8 absolute -right-6 -top-6 size-6 cursor-pointer overflow-hidden text-white\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke-width=\"1.5\"\n stroke=\"currentColor\"\n aria-hidden=\"true\"\n data-slot=\"icon\"\n className=\"HomeCharger_closeWrap__Z7aBo\"\n >\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"></path>\n </svg>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n }\n)\n\nexport default withStyles(MediaPlayerMulti)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "useState", "forwardRef", "useRef", "cn", "withStyles", "Picture", "Link", "Dialog", "DialogContent", "Title", "SwiperBox", "Container", "convertLexicalToHTML", "useExposure", "componentType", "componentName", "MediaPlayerItem", "data", "configuration", "MediaPlayerMulti", "items", "shape", "title", "containerProps", "className", "key", "onVideoPlayBtnClick", "ref", "visible", "setVisible", "videoUrl", "setVideoUrl", "title_html", "wrapperRef", "itemsLength", "flag", "MediaPlayerMulti_default"]
7
7
  }
package/dist/esm/biz-components/MediaPlayerMulti/types.d.ts CHANGED
@@ -4,6 +4,7 @@ export interface MediaPlayerItemProps {
4
4
  name: string;
5
5
  description: string;
6
6
  img: Img;
7
+ mobileImg?: Img;
7
8
  video?: Video;
8
9
  quote?: string;
9
10
  href?: string;
package/dist/esm/biz-components/ShelfDisplay/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use client";import{Fragment as ee,jsx as t,jsxs as f}from"react/jsx-runtime";import E,{useState as B,useEffect as H,useRef as q,useImperativeHandle as L}from"react";import{cn as u}from"../../helpers/utils.js";import R from"../../components/picture.js";import V from"./tabSwitch.js";import N from"../../components/button.js";import A from"../Title/index.js";import O from"../SwiperBox/index.js";import{withStyles as U}from"../../shared/Styles.js";import{formatVariantPrice as j}from"./shelfDisplay.js";import"../../components/container.js";import{useMediaQuery as D}from"react-responsive";import{useExposure as z}from"../../hooks/useExposure.js";import{gaTrack as W}from"../../shared/track.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import Q from"../../components/badge.js";import{Heading as G}from"../../components/heading.js";import{Text as J}from"../../components/text.js";import{trackUrlRef as K}from"../../shared/trackUrlRef.js";const k="image",S="product_shelf",X=999999999e-2,Y=({data:e,configuration:r})=>{const{locale:s="us",copyWriting:h}=F(),v=D({query:"(max-width: 768px)"}),y=(i,o)=>r?.event?.primaryButton?.(i,o+1),a=(i,o)=>r?.event?.secondaryButton?.(i,o+1),n=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},x=!n?.availableForSale&&n?.price?.amount===X,b=r?.isShowTag,{price:g,basePrice:l}=j({locale:s,amount:n?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),p=()=>{const i=e?.sku,o=e?.variants;return o?.find(m=>m?.sku===i)?.image?.url||o?.[0]?.image?.url||""};return t("div",{className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":v}),children:f("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[t("div",{className:u("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:t("a",{href:K(`${s==="us"||!s?"":`/${s}`}/products/${e?.handle}`,`${k}_${S}`),children:t(R,{source:p(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),b?t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter(i=>i.startsWith("CLtag"))?.map(i=>i.replace("CLtag:",""))?.slice(0,2)?.map?.((i,o)=>t(Q,{children:i},o))}):null,e?.title?t(G,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?t(J,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,t("div",{className:"mb-2 mt-[20px] flex items-center",children:x?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h?.soldOutText}):f(ee,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:l||""})]})}),f("div",{className:u("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[r?.secondaryButton?t(N,{variant:"secondary",onClick:()=>a(e,r?.index),className:`
1
+ "use client";import{Fragment as ee,jsx as t,jsxs as f}from"react/jsx-runtime";import E,{useState as B,useEffect as H,useRef as q,useImperativeHandle as L}from"react";import{cn as u}from"../../helpers/utils.js";import R from"../../components/picture.js";import V from"./tabSwitch.js";import N from"../../components/button.js";import A from"../Title/index.js";import O from"../SwiperBox/index.js";import{withStyles as U}from"../../shared/Styles.js";import{formatVariantPrice as j}from"./shelfDisplay.js";import"../../components/container.js";import{useMediaQuery as D}from"react-responsive";import{useExposure as z}from"../../hooks/useExposure.js";import{gaTrack as W}from"../../shared/track.js";import{useAiuiContext as F}from"../AiuiProvider/index.js";import Q from"../../components/badge.js";import{Heading as G}from"../../components/heading.js";import{Text as J}from"../../components/text.js";import{trackUrlRef as K}from"../../shared/trackUrlRef.js";const k="image",S="product_shelf",X=999999999e-2,Y=({data:e,configuration:r})=>{const{locale:s="us",copyWriting:h}=F(),v=D({query:"(max-width: 768px)"}),y=(i,o)=>r?.event?.primaryButton?.(i,o+1),a=(i,o)=>r?.event?.secondaryButton?.(i,o+1),n=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},x=!n?.availableForSale&&n?.price?.amount===X,b=r?.isShowTag,{price:g,basePrice:l}=j({locale:s,amount:n?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),p=()=>{const i=e?.sku,o=e?.variants;return o?.find(m=>m?.sku===i)?.image?.url||o?.[0]?.image?.url||""};return t("div",{className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative",{"h-[360px]":v}),children:f("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[t("div",{className:u("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:t("a",{href:K(`${s==="us"||!s?"":`/${s}`}/products/${e?.handle}`,`${k}_${S}`),children:t(R,{source:p(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),b?t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.filter?.(i=>i?.startsWith?.("CLtag"))?.map?.(i=>i?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((i,o)=>t(Q,{children:i},o))}):null,e?.title?t(G,{title:e?.title||"",size:2,className:"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]",children:e?.title||""}):null,e?.description?t(J,{size:2,className:"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]",children:e?.description||""}):null,t("div",{className:"mb-2 mt-[20px] flex items-center",children:x?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:h?.soldOutText}):f(ee,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:l||""})]})}),f("div",{className:u("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[r?.secondaryButton?t(N,{variant:"secondary",onClick:()=>a(e,r?.index),className:`
2
2
  ${r.direction==="vertical"?"w-full":""}
3
3
  `,children:r?.secondaryButton||""}):null,r?.primaryButton?t(N,{variant:"primary",onClick:()=>y(e,r?.index),className:`
4
4
  ${r.direction==="vertical"?"w-full":""}
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 Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter((item: any) => item.startsWith('CLtag'))\n ?.map((item: any) => item.replace('CLtag:', ''))\n ?.slice(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\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 ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\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 }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(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 Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { Container } from '../../components/container.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps } from '../../types/props.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n isShowTag?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n containerProps?: ContainerProps\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n {\n 'h-[360px]': isMobile,\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {isShowTag ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n ?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {data?.title ? (\n <Heading\n title={data?.title || ''}\n size={2}\n className=\"shelf-display-product-title lg-desktop:h-[58px] mb-1 line-clamp-2 h-[48px]\"\n >\n {data?.title || ''}\n </Heading>\n ) : null}\n {data?.description ? (\n <Text\n size={2}\n className=\"shelf-display-product-description lg-desktop:text-[18px] lg-desktop:h-[26px] desktop:text-[16px] desktop:h-[24px] line-clamp-1 h-[20px] text-[14px]\"\n >\n {data?.description || ''}\n </Text>\n ) : null}\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n isShowTag = false,\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\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 ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\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 }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event, isShowTag } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
5
+ "mappings": "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",
6
6
  "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "trackUrlRef", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "isMobile", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "0.0.53",
3
+ "version": "0.0.55",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",