@anker-in/headless-ui 0.0.27-alpha.107 → 0.0.27-alpha.108
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/cjs/biz-components/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +2 -2
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js +5 -5
- package/dist/cjs/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/cjs/biz-components/Slogan/index.js +1 -1
- package/dist/cjs/biz-components/Slogan/index.js.map +2 -2
- package/dist/cjs/biz-components/Title/index.js +1 -1
- package/dist/cjs/biz-components/Title/index.js.map +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +3 -3
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerBase/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerBase/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerMulti/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerMulti/index.js.map +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js +6 -6
- package/dist/esm/biz-components/MemberEquity/index.js.map +3 -3
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/esm/biz-components/Slogan/index.js +1 -1
- package/dist/esm/biz-components/Slogan/index.js.map +2 -2
- package/dist/esm/biz-components/Title/index.js +1 -1
- package/dist/esm/biz-components/Title/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var I=Object.create;var u=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,H=Object.prototype.hasOwnProperty;var P=(e,n)=>{for(var s in n)u(e,s,{get:n[s],enumerable:!0})},g=(e,n,s,d)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of A(n))!H.call(e,a)&&a!==s&&u(e,a,{get:()=>n[a],enumerable:!(d=L(n,a))||d.enumerable});return e};var p=(e,n,s)=>(s=e!=null?I(j(e)):{},g(n||!e||!e.__esModule?u(s,"default",{value:e,enumerable:!0}):s,e)),R=e=>g(u({},"__esModule",{value:!0}),e);var D={};P(D,{default:()=>_});module.exports=R(D);var t=require("react/jsx-runtime"),w=p(require("../Title/index.js")),i=require("../../helpers/utils.js"),f=p(require("../../components/picture.js")),b=p(require("../../components/button.js")),N=p(require("../SwiperBox/index.js")),z=require("../../components/link.js"),T=require("../../shared/Styles.js"),l=require("react");const V=({data:e,className:n=""})=>{const[s,d]=(0,l.useState)(0),[a,B]=(0,l.useState)({0:!0}),v=(0,l.useRef)([]),h=(0,l.useRef)({0:!0}),m=(0,l.useRef)(!1),E=(r,o)=>{o&&(v.current[r]=o)},x=r=>{h.current?.[r]&&(m.current=!1,B({[r]:!0}))};(0,l.useEffect)(()=>{const r=v.current;return r?.forEach((o,c)=>{c?(o.style.flex="1 1 0%",o.style.transition="all 0.6s"):(o.style.flex="5 1 0%",o.style.transition="all 0.6s"),o.addEventListener("transitionend",()=>{x(c)})}),()=>{r?.forEach((o,c)=>{o.removeEventListener("transitionend",()=>x(c))})}},[]);const S=({data:r,configuration:o})=>(0,t.jsxs)("div",{className:(0,i.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",o?.itemShape==="round"?"rounded-2xl":""),children:[(0,t.jsx)(f.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:r?.img?.url}),(0,t.jsxs)("div",{className:(0,i.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[(0,t.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:r?.title}),(0,t.jsx)("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:r?.subTitle})]}),(0,t.jsx)("a",{href:r.link,children:(0,t.jsx)(b.default,{variant:"secondary",className:(0,i.cn)("text-info-primary text-sm font-bold"),children:o?.primaryButton})})]})]}),y=(0,l.useCallback)(r=>{s===r||m.current||(m.current=!0,h.current={[r]:!0},d(r))},[s,m]);return(0,t.jsxs)(t.Fragment,{children:[e?.title&&(0,t.jsx)(w.default,{data:{title:e?.title}}),(0,t.jsx)("div",{className:(0,i.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,t.jsx)("div",{className:(0,i.cn)("lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden",n),children:e?.products?.map((r,o)=>{const c=s===o,C=c?5:1,M=a?.[o]&&c;return(0,t.jsxs)("div",{style:{flex:C},ref:k=>{k&&E(o,k)},className:(0,i.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>y(o),onMouseLeave:()=>{m.current=!1},onClick:()=>y(o),children:[(0,t.jsx)(f.default,{source:r?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,t.jsxs)("div",{className:(0,i.cn)("absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8",M?"translate-x-0 opacity-100 transition-transform ease-out":"opacity-0"),children:[(0,t.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,t.jsx)("p",{className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:r?.title}),(0,t.jsx)("h3",{className:"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold",children:r?.subTitle})]}),(0,t.jsx)("a",{href:r?.link,children:(0,t.jsx)(b.default,{variant:"secondary",className:(0,i.cn)("desktop:text-base mb-1.5 text-sm font-bold"),children:e?.primaryButton})})]})]},o)})})}),(0,t.jsx)("div",{className:(0,i.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,t.jsx)(N.default,{className:(0,i.cn)("h-[400px] !overflow-visible",n),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton}},Slide:S,breakpoints:{0:{spaceBetween:"12px",freeMode:!1,slidesPerView:1},374:{spaceBetween:"12px",freeMode:!1,slidesPerView:1.1},768:{spaceBetween:"12px",freeMode:!1,slidesPerView:2.3}}})})]})};var _=(0,T.withStyles)(V);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport Link from '../../components/link.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: {\n url: string\n }\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n}\n\nconst AccordionCards = ({ data, className = '' }: AccordionCardsType) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n const isAnimation = useRef<boolean>(false)\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n if (enterRef.current?.[index]) {\n isAnimation.current = false\n setCurrentWidth({ [index]: true })\n }\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n if (!index) {\n item.style.flex = '5 1 0%'\n item.style.transition = 'all 0.6s'\n } else {\n item.style.flex = '1 1 0%'\n item.style.transition = 'all 0.6s'\n }\n item.addEventListener('transitionend', () => {\n handleTransitionEnd(index)\n })\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a href={data.link}>\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 5 : 1\n const isShowContent = currentWidth?.[idx] && isExpanded\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFQ,IAAAI,EAAA,6BAxFRC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAsB,oCACtBC,EAAiB,oCACjBC,EAA2B,kCAC3BC,
|
|
6
|
-
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_link", "import_Styles", "import_react", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "Picture", "Button", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport Link from '../../components/link.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useState, useEffect, useRef, useCallback } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\ntype ItemType = {\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: {\n url: string\n }\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\ntype AccordionCardsType = {\n className?: string\n data: {\n key?: string\n title?: string\n products: Array<ItemType>\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n theme?: 'light' | 'dark'\n }\n}\n\nconst AccordionCards = ({ data, className = '' }: AccordionCardsType) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({ 0: true })\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const enterRef = useRef<{ [key: number]: boolean }>({ 0: true })\n const isAnimation = useRef<boolean>(false)\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n if (enterRef.current?.[index]) {\n isAnimation.current = false\n setCurrentWidth({ [index]: true })\n }\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n if (!index) {\n item.style.flex = '5 1 0%'\n item.style.transition = 'all 0.6s'\n } else {\n item.style.flex = '1 1 0%'\n item.style.transition = 'all 0.6s'\n }\n item.addEventListener('transitionend', () => {\n handleTransitionEnd(index)\n })\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n const MobileItem = ({ data, configuration }: { data: ItemType; configuration?: any }) => {\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n <Picture className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\" source={data?.img?.url} />\n <div className={cn('absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4')}>\n <div className=\"tablet:mb-6 mb-4 flex-1 overflow-hidden\">\n <p className=\"text-info-primary text-2xl font-bold leading-[1.2]\">{data?.title}</p>\n <h3 className=\"text-info-primary line-clamp-2 text-sm font-semibold\">{data?.subTitle}</h3>\n </div>\n <a href={data.link}>\n <Button variant=\"secondary\" className={cn('text-info-primary text-sm font-bold')}>\n {configuration?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n }\n\n const handleSwiperItemClick = useCallback(\n (idx: number) => {\n if (hoverIndex === idx || isAnimation.current) return\n isAnimation.current = true\n // \u66F4\u65B0 ref \u72B6\u6001\n enterRef.current = { [idx]: true }\n // \u66F4\u65B0\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n },\n [hoverIndex, isAnimation]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[560px] desktop:h-[448px] flex h-[336px] w-full gap-4 overflow-hidden',\n className\n )}\n >\n {data?.products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 5 : 1\n const isShowContent = currentWidth?.[idx] && isExpanded\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n }}\n ref={(el: HTMLDivElement | null) => {\n if (el) getRef(idx, el)\n }}\n className={cn(\n 'relative cursor-pointer overflow-hidden',\n data?.itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => handleSwiperItemClick(idx)}\n onMouseLeave={() => {\n isAnimation.current = false\n }}\n onClick={() => handleSwiperItemClick(idx)}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n <div\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full translate-x-4 items-end justify-between overflow-hidden px-8 pb-8',\n isShowContent ? 'translate-x-0 opacity-100 transition-transform ease-out' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <p className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\">\n {item?.title}\n </p>\n <h3 className=\"desktop:text-lg text-info-primary line-clamp-2 text-sm font-semibold\">\n {item?.subTitle}\n </h3>\n </div>\n <a href={item?.link}>\n <Button variant=\"secondary\" className={cn('desktop:text-base mb-1.5 text-sm font-bold')}>\n {data?.primaryButton}\n </Button>\n </a>\n </div>\n </div>\n )\n })}\n </div>\n </div>\n <div className={cn('laptop:hidden block', { 'aiui-dark': data?.theme === 'dark' })}>\n <SwiperBox\n className={cn('h-[400px] !overflow-visible', className)}\n id={'AccordionCards' + data?.key}\n data={{\n list: data?.products,\n configuration: {\n shape: data?.shape,\n itemShape: data?.itemShape,\n primaryButton: data?.primaryButton,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: '12px',\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n}\n\nexport default withStyles(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_link", "import_Styles", "import_react", "AccordionCards", "data", "className", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "enterRef", "isAnimation", "getRef", "index", "el", "handleTransitionEnd", "element", "item", "MobileItem", "configuration", "Picture", "Button", "handleSwiperItemClick", "idx", "Title", "isExpanded", "flexValue", "isShowContent", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var x=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var L=(e,r)=>{for(var i in r)n(e,i,{get:r[i],enumerable:!0})},m=(e,r,i,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of b(r))!N.call(e,l)&&l!==i&&n(e,l,{get:()=>r[l],enumerable:!(s=h(r,l))||s.enumerable});return e};var d=(e,r,i)=>(i=e!=null?x(k(e)):{},m(r||!e||!e.__esModule?n(i,"default",{value:e,enumerable:!0}):i,e)),C=e=>m(n({},"__esModule",{value:!0}),e);var P={};L(P,{default:()=>E});module.exports=C(P);var t=require("react/jsx-runtime"),F=require("react"),p=d(require("../Title/index.js")),o=require("../../helpers/utils.js"),c=d(require("../../components/picture.js")),f=d(require("../SwiperBox/index.js")),u=require("../../shared/Styles.js"),a=require("../../components/avatar.js"),v=d(require("../../components/link.js"));const y=({data:e,configuration:r})=>{const i=s=>s?Array.from(new Array(Number(s)))||[]:[];return(0,t.jsxs)("div",{className:(0,o.cn)("bg-container-secondary-1 hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:h-[480px] desktop:h-[384px] h-[360px]"),children:[(0,t.jsxs)("div",{className:(0,o.cn)("laptop:mb-11 desktop:mb-16 mb-
|
|
1
|
+
"use strict";"use client";var x=Object.create;var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var L=(e,r)=>{for(var i in r)n(e,i,{get:r[i],enumerable:!0})},m=(e,r,i,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of b(r))!N.call(e,l)&&l!==i&&n(e,l,{get:()=>r[l],enumerable:!(s=h(r,l))||s.enumerable});return e};var d=(e,r,i)=>(i=e!=null?x(k(e)):{},m(r||!e||!e.__esModule?n(i,"default",{value:e,enumerable:!0}):i,e)),C=e=>m(n({},"__esModule",{value:!0}),e);var P={};L(P,{default:()=>E});module.exports=C(P);var t=require("react/jsx-runtime"),F=require("react"),p=d(require("../Title/index.js")),o=require("../../helpers/utils.js"),c=d(require("../../components/picture.js")),f=d(require("../SwiperBox/index.js")),u=require("../../shared/Styles.js"),a=require("../../components/avatar.js"),v=d(require("../../components/link.js"));const y=({data:e,configuration:r})=>{const i=s=>s?Array.from(new Array(Number(s)))||[]:[];return(0,t.jsxs)("div",{className:(0,o.cn)("bg-container-secondary-1 hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:h-[480px] desktop:h-[384px] h-[360px]"),children:[(0,t.jsxs)("div",{className:(0,o.cn)("laptop:mb-11 desktop:mb-16 mb-16 flex w-full justify-between"),children:[(0,t.jsxs)("div",{className:"flex-1",children:[(0,t.jsx)("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}),(0,t.jsx)("div",{className:"mt-1 flex items-center",children:i(e?.rating)?.map?.((s,l)=>(0,t.jsx)("div",{className:"mr-1",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:(0,t.jsx)("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},l))})]}),(0,t.jsx)("div",{className:"desktop:size-12 size-10 overflow-hidden",children:(0,t.jsx)(a.Avatar,{className:"size-full",isAdaptation:!e?.avatar?.url,children:e?.avatar?.url?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(a.AvatarImage,{src:e?.avatar?.url}),(0,t.jsx)(a.AvatarFallback,{children:e?.title})]}):e?.title})})]}),(0,t.jsx)("p",{className:"desktop:text-2xl text-info-primary desktop:line-clamp-3 line-clamp-5 h-fit flex-1 break-words text-xl font-bold",children:e?.description||""}),(0,t.jsx)(v.default,{href:e?.link||"",children:(0,t.jsxs)("div",{className:(0,o.cn)("mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[(0,t.jsx)("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:(0,t.jsx)(c.default,{className:"w-full object-cover",source:e?.img?.url})}),(0,t.jsx)("p",{className:"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold",children:e?.subTitle||""})]})})]})},A=({className:e="",data:r,key:i})=>{const{products:s,title:l,theme:g,...w}=r;return(0,t.jsxs)("div",{className:(0,o.cn)("w-full",e,{"aiui-dark":g==="dark"}),children:[l&&(0,t.jsx)(p.default,{data:{title:l}}),(0,t.jsx)(f.default,{className:"!overflow-visible",id:"Evaluate"+i,data:{list:s,configuration:{...w}},Slide:y,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})};var E=(0,u.withStyles)(A);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Evaluate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport Link from '../../components/link.js'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:h-[480px] desktop:h-[384px] h-[360px]'\n )}\n >\n <div className={cn('laptop:mb-11 desktop:mb-16 mb-
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuDQ,IAAAI,EAAA,6BAtDRC,EAAkB,iBAClBC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAoD,sCACpDC,EAAiB,uCA8BjB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,SACE,QAAC,OACC,aAAW,MACT,+HACAF,GAAe,QAAU,QAAU,cAAgB,eACnD,kDACF,EAEA,qBAAC,OAAI,aAAW,MAAG,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport Link from '../../components/link.js'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: {\n url: string\n }\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: 'light' | 'dark'\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const handleRating = (num: number) => {\n if (num) {\n return Array.from(new Array(Number(num))) || []\n }\n return []\n }\n\n return (\n <div\n className={cn(\n 'bg-container-secondary-1 hover:bg-info-white box-border flex w-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:h-[480px] desktop:h-[384px] h-[360px]'\n )}\n >\n <div className={cn('laptop:mb-11 desktop:mb-16 mb-16 flex w-full justify-between')}>\n <div className=\"flex-1\">\n <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4>\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n {data?.avatar?.url ? (\n <>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </>\n ) : (\n data?.title\n )}\n </Avatar>\n </div>\n </div>\n <p className=\"desktop:text-2xl text-info-primary desktop:line-clamp-3 line-clamp-5 h-fit flex-1 break-words text-xl font-bold\">\n {data?.description || ''}\n </p>\n <Link href={data?.link || ''}>\n <div\n className={cn(\n 'mt-3 flex items-center overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} />\n </div>\n <p className=\"lg-desktop:text-lg line-clamp-2 flex-1 text-sm font-bold\">{data?.subTitle || ''}</p>\n </div>\n </Link>\n </div>\n )\n}\n\nconst Evaluate: React.FC<EvaluateProps> = ({ className = '', data, key }) => {\n const { products, title, theme, ...ohter } = data\n return (\n <div className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter } }}\n Slide={EvaluateItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\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.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n )\n}\n\nexport default withStyles(Evaluate)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuDQ,IAAAI,EAAA,6BAtDRC,EAAkB,iBAClBC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAoD,sCACpDC,EAAiB,uCA8BjB,MAAMC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAgBC,GAChBA,EACK,MAAM,KAAK,IAAI,MAAM,OAAOA,CAAG,CAAC,CAAC,GAAK,CAAC,EAEzC,CAAC,EAGV,SACE,QAAC,OACC,aAAW,MACT,+HACAF,GAAe,QAAU,QAAU,cAAgB,eACnD,kDACF,EAEA,qBAAC,OAAI,aAAW,MAAG,8DAA8D,EAC/E,qBAAC,OAAI,UAAU,SACb,oBAAC,MAAG,UAAU,mCAAoC,SAAAD,GAAM,MAAM,KAC9D,OAAC,OAAI,UAAU,yBACZ,SAAAE,EAAaF,GAAM,MAAM,GAAG,MAAM,CAACI,EAAGC,OAEnC,OAAC,OAAgB,UAAU,OACzB,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQA,CAOV,CAEH,EACH,GACF,KACA,OAAC,OAAI,UAAU,0CACb,mBAAC,UAAO,UAAU,YAAY,aAAc,CAACL,GAAM,QAAQ,IACxD,SAAAA,GAAM,QAAQ,OACb,oBACE,oBAAC,eAAY,IAAKA,GAAM,QAAQ,IAAK,KACrC,OAAC,kBAAgB,SAAAA,GAAM,MAAM,GAC/B,EAEAA,GAAM,MAEV,EACF,GACF,KACA,OAAC,KAAE,UAAU,kHACV,SAAAA,GAAM,aAAe,GACxB,KACA,OAAC,EAAAM,QAAA,CAAK,KAAMN,GAAM,MAAQ,GACxB,oBAAC,OACC,aAAW,MACT,0DACAC,GAAe,QAAU,QAAU,aAAe,cACpD,EAEA,oBAAC,OAAI,UAAU,gEACb,mBAAC,EAAAM,QAAA,CAAQ,UAAU,sBAAsB,OAAQP,GAAM,KAAK,IAAK,EACnE,KACA,OAAC,KAAE,UAAU,2DAA4D,SAAAA,GAAM,UAAY,GAAG,GAChG,EACF,GACF,CAEJ,EAEMQ,EAAoC,CAAC,CAAE,UAAAC,EAAY,GAAI,KAAAT,EAAM,IAAAU,CAAI,IAAM,CAC3E,KAAM,CAAE,SAAAC,EAAU,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAM,EAAId,EAC7C,SACE,QAAC,OAAI,aAAW,MAAG,SAAUS,EAAW,CAAE,YAAaI,IAAU,MAAO,CAAC,EACtE,UAAAD,MAAS,OAAC,EAAAG,QAAA,CAAM,KAAM,CAAE,MAAOH,CAAM,EAAG,KACzC,OAAC,EAAAI,QAAA,CACC,UAAU,oBACV,GAAI,WAAaN,EACjB,KAAM,CAAE,KAAMC,EAAU,cAAe,CAAE,GAAGG,CAAM,CAAE,EACpD,MAAOf,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAe,CACjB,CACF,EACF,GACF,CAEJ,EAEA,IAAOX,KAAQ,cAAWoB,CAAQ",
|
|
6
6
|
"names": ["Evaluate_exports", "__export", "Evaluate_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_Title", "import_utils", "import_picture", "import_SwiperBox", "import_Styles", "import_avatar", "import_link", "EvaluateItem", "data", "configuration", "handleRating", "num", "_", "index", "Link", "Picture", "Evaluate", "className", "key", "products", "title", "theme", "ohter", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var u=Object.create;var r=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var s in t)r(e,s,{get:t[s],enumerable:!0})},m=(e,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of v(t))!k.call(e,o)&&o!==s&&r(e,o,{get:()=>t[o],enumerable:!(p=w(t,o))||p.enumerable});return e};var a=(e,t,s)=>(s=e!=null?u(y(e)):{},m(t||!e||!e.__esModule?r(s,"default",{value:e,enumerable:!0}):s,e)),P=e=>m(r({},"__esModule",{value:!0}),e);var C={};N(C,{default:()=>G});module.exports=P(C);var i=require("react/jsx-runtime"),d=a(require("react")),n=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),h=a(require("../SwiperBox/index.js")),x=require("../../components/index.js"),l=require("../../components/index.js"),g=a(require("../Title/index.js"));const b=({data:e,configuration:t})=>(0,i.jsx)("div",{className:"lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]",children:(0,i.jsxs)("a",{href:e?.link,className:
|
|
1
|
+
"use strict";"use client";var u=Object.create;var r=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var N=(e,t)=>{for(var s in t)r(e,s,{get:t[s],enumerable:!0})},m=(e,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of v(t))!k.call(e,o)&&o!==s&&r(e,o,{get:()=>t[o],enumerable:!(p=w(t,o))||p.enumerable});return e};var a=(e,t,s)=>(s=e!=null?u(y(e)):{},m(t||!e||!e.__esModule?r(s,"default",{value:e,enumerable:!0}):s,e)),P=e=>m(r({},"__esModule",{value:!0}),e);var C={};N(C,{default:()=>G});module.exports=P(C);var i=require("react/jsx-runtime"),d=a(require("react")),n=require("../../helpers/utils.js"),f=require("../../shared/Styles.js"),h=a(require("../SwiperBox/index.js")),x=require("../../components/index.js"),l=require("../../components/index.js"),g=a(require("../Title/index.js"));const b=({data:e,configuration:t})=>(0,i.jsx)("div",{className:(0,n.cn)("lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]",{"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,i.jsxs)("a",{href:e?.link,className:"relative cursor-pointer",children:[(0,i.jsx)(l.Picture,{className:"h-full",imgClassName:"h-full object-cover hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,i.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,i.jsx)(l.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,i.jsx)(x.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})}),c=d.default.forwardRef(({data:e,className:t,...s},p)=>{const o=e?.items?.length>2;return(0,i.jsxs)("div",{children:[e?.title&&(0,i.jsx)(g.default,{data:{title:e?.title}}),(0,i.jsx)(h.default,{className:(0,n.cn)("!overflow-visible",t),id:"Graphic",data:{list:e?.items||[],configuration:{itemShape:e.itemShape}},Slide:b,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})});c.displayName="Graphic";var G=(0,f.withStyles)(c);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n return (\n <div
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport type { ComponentCommonProps, Img } from '../../types/props.js'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n return (\n <div\n className={cn('lg-desktop:h-[480px] desktop:h-[384px] h-[360px] flex-1 shrink-0 md:basis-[296px]', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a href={data?.link} className=\"relative cursor-pointer\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n return (\n <div>\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n className={cn('!overflow-visible', className)}\n id={'Graphic'}\n data={{ list: data?.items || [], configuration: { itemShape: data.itemShape } }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAkCQ,IAAAI,EAAA,6BAjCRC,EAAkB,oBAClBC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAAkB,gCAmBlB,MAAMC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,OAEhC,OAAC,OACC,aAAW,MAAG,oFAAqF,CAChG,gDAAkDA,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KAAE,KAAMD,GAAM,KAAM,UAAU,0BAC7B,oBAAC,WACC,UAAU,SACV,aAAa,kEACb,OAAQA,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,EAIEE,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAH,EAAM,UAAAI,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUP,GAAM,OAAyB,OAAS,EACxD,SACE,QAAC,OACE,UAAAA,GAAM,UAAS,OAAC,EAAAQ,QAAA,CAAM,KAAM,CAAE,MAAOR,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAS,QAAA,CACC,aAAW,MAAG,oBAAqBL,CAAS,EAC5C,GAAI,UACJ,KAAM,CAAE,KAAMJ,GAAM,OAAS,CAAC,EAAG,cAAe,CAAE,UAAWA,EAAK,SAAU,CAAE,EAC9E,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeQ,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOZ,KAAQ,cAAWY,CAAO",
|
|
6
6
|
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_Title", "Item", "data", "configuration", "Graphic", "React", "className", "props", "ref", "isShow", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var j=Object.create;var p=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},k=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of V(t))!q.call(e,s)&&s!==r&&p(e,s,{get:()=>t[s],enumerable:!(n=C(t,s))||n.enumerable});return e};var w=(e,t,r)=>(r=e!=null?j(A(e)):{},k(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),F=e=>k(p({},"__esModule",{value:!0}),e);var J={};D(J,{default:()=>U});module.exports=F(J);var o=require("react/jsx-runtime"),a=require("react"),N=require("@gsap/react"),H=require("gsap"),
|
|
1
|
+
"use strict";"use client";var j=Object.create;var p=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var r in t)p(e,r,{get:t[r],enumerable:!0})},k=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of V(t))!q.call(e,s)&&s!==r&&p(e,s,{get:()=>t[s],enumerable:!(n=C(t,s))||n.enumerable});return e};var w=(e,t,r)=>(r=e!=null?j(A(e)):{},k(t||!e||!e.__esModule?p(r,"default",{value:e,enumerable:!0}):r,e)),F=e=>k(p({},"__esModule",{value:!0}),e);var J={};D(J,{default:()=>U});module.exports=F(J);var o=require("react/jsx-runtime"),a=require("react"),N=require("@gsap/react"),H=require("gsap"),m=require("gsap/dist/ScrollTrigger"),g=require("../../helpers/utils.js"),M=require("../../shared/Styles.js"),P=w(require("../../components/picture.js")),L=w(require("../../components/button.js")),y=require("@payloadcms/richtext-lexical/html"),z=require("react-intersection-observer");const G=({className:e="",data:{title:t,videoTitle:r,btnText:n,img:s,video:R,theme:S,shape:_}})=>{const[c,i]=(0,a.useState)(!1),l=(0,a.useRef)(null),f=(0,a.useRef)(null),u=(0,a.useRef)(null),{ref:B,inView:v}=(0,z.useInView)(),x=typeof t=="string"?t:t&&(0,y.convertLexicalToHTML)({data:t}),b=typeof r=="string"?r:r&&(0,y.convertLexicalToHTML)({data:r});return(0,a.useEffect)(()=>{v&&!n?(l.current?.play(),i(!0)):(l.current?.pause(),i(!1))},[v]),(0,N.useGSAP)(()=>{if(!u.current)return;const E=f.current?.clientHeight||100,h=u.current?.clientHeight||100,I=h+E;return m.ScrollTrigger.create({trigger:f.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:d=>{const T=d.progress*I-h;H.gsap.set(u.current,{y:T})}}),()=>{m.ScrollTrigger.getAll().forEach(d=>d.kill())}},[]),(0,o.jsxs)("div",{ref:f,className:(0,g.cn)(" relative w-full overflow-hidden"," lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",e,{"aiui-dark":S==="dark","rounded-box":_==="rounded"}),children:[(0,o.jsx)("div",{children:(0,o.jsxs)("div",{ref:B,className:"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5",children:[x&&!c&&(0,o.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:x}}),b&&c&&(0,o.jsx)("div",{className:"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold leading-none lg:text-5xl",dangerouslySetInnerHTML:{__html:b}}),!c&&n&&(0,o.jsx)(L.default,{variant:"link",className:(0,g.cn)("member-equity-button-secondary text-btn-primary-foreground"),onClick:()=>{c?(l.current&&l.current.pause(),i(!1)):(l.current&&l.current.play(),i(!0))},children:n})]})}),(0,o.jsx)("div",{children:(0,o.jsxs)("div",{ref:u,className:"media-cover sticky left-0 top-0 h-screen w-screen",children:[(0,o.jsx)("video",{ref:l,className:"size-full object-cover",src:R?.url,muted:!0,loop:!0}),!c&&s?.url&&(0,o.jsx)(P.default,{className:"z-1 absolute left-0 top-0 size-full object-cover",source:s?.url,alt:s?.alt,imgClassName:"w-full h-full object-cover"}),(0,o.jsx)("div",{className:"absolute left-0 top-0 z-10 size-full"})]})})]})};var U=(0,M.withStyles)(G);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerBase/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.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'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n\n const { ref, inView } = useInView()\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const videoTitle_html =\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\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 useGSAP(() => {\n if (!bgRef.current) return\n const height = boxRef.current?.clientHeight || 100\n const screenHeight = bgRef.current?.clientHeight || 100\n const base = screenHeight + height\n\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const value = self.progress * base - screenHeight\n gsap.set(bgRef.current, { y: value })\n },\n })\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n className={cn(\n ' relative w-full overflow-hidden',\n ' lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <div>\n <div\n ref={ref}\n className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\n >\n {title_html && !isPlaying && (\n <div\n className=\"lg-desktop:text-[64px] text-btn-primary-foreground text-center text-[40px] font-bold 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 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 }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n <div>\n <div ref={bgRef} className=\"media-cover sticky left-0 top-0 h-screen w-screen\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} muted loop />\n {!isPlaying && img?.url && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2EQ,IAAAI,EAAA,6BA1ERC,EAAmD,iBACnDA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAqC,6CAGrCC,EAA0B,uCAE1B,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAS,EAAK,EAE1CC,KAAW,UAAyB,IAAI,EACxCC,KAAS,UAAuB,IAAI,EACpCC,KAAQ,UAAyB,IAAI,EAErC,CAAE,IAAAC,EAAK,OAAAC,CAAO,KAAI,aAAU,EAE5BC,EAAa,OAAOd,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EAC9Fe,EACJ,OAAOd,GAAe,SAAWA,EAAaA,MAAc,wBAAqB,CAAE,KAAMA,CAAW,CAAC,EAEvG,sBAAU,IAAM,CACVY,GAAU,CAACX,GACbO,EAAS,SAAS,KAAK,EACvBD,EAAa,EAAI,IAEjBC,EAAS,SAAS,MAAM,EACxBD,EAAa,EAAK,EAEtB,EAAG,CAACK,CAAM,CAAC,KAEX,WAAQ,IAAM,CACZ,GAAI,CAACF,EAAM,QAAS,OACpB,MAAMK,EAASN,EAAO,SAAS,cAAgB,IACzCO,EAAeN,EAAM,SAAS,cAAgB,IAC9CO,EAAOD,EAAeD,EAE5B,uBAAc,OAAO,CACnB,QAASN,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWS,GAAc,CACvB,MAAMC,EAAQD,EAAK,SAAWD,EAAOD,EACrC,OAAK,IAAIN,EAAM,QAAS,CAAE,EAAGS,CAAM,CAAC,CACtC,CACF,CAAC,EACM,IAAM,CACX,gBAAc,OAAO,EAAE,QAASC,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,KAGH,QAAC,OACC,IAAKX,EACL,aAAW,MACT,mCACA,sNACAX,EACA,CACE,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CACF,EAEA,oBAAC,OACC,oBAAC,OACC,IAAKM,EACL,UAAU,kHAET,UAAAE,GAAc,CAACP,MACd,OAAC,OACC,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.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'\n\nconst MediaPlayerBase: React.FC<MediaPlayerBaseProps> = ({\n className = '',\n data: { title, videoTitle, btnText, img, video, theme, shape },\n}) => {\n const [isPlaying, setIsPlaying] = useState(false)\n\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const bgRef = useRef<HTMLImageElement>(null)\n\n const { ref, inView } = useInView()\n\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n const videoTitle_html =\n typeof videoTitle === 'string' ? videoTitle : videoTitle && convertLexicalToHTML({ data: videoTitle })\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 useGSAP(() => {\n if (!bgRef.current) return\n const height = boxRef.current?.clientHeight || 100\n const screenHeight = bgRef.current?.clientHeight || 100\n const base = screenHeight + height\n\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const value = self.progress * base - screenHeight\n gsap.set(bgRef.current, { y: value })\n },\n })\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n className={cn(\n ' relative w-full overflow-hidden',\n ' lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n <div>\n <div\n ref={ref}\n className=\"media-content absolute left-1/2 top-1/2 z-20 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center gap-5\"\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 }}\n >\n {btnText}\n {/* <Right /> */}\n </Button>\n )}\n </div>\n </div>\n <div>\n <div ref={bgRef} className=\"media-cover sticky left-0 top-0 h-screen w-screen\">\n <video ref={videoRef} className=\"size-full object-cover\" src={video?.url} muted loop />\n {!isPlaying && img?.url && (\n <Picture\n className=\"z-1 absolute left-0 top-0 size-full object-cover\"\n source={img?.url}\n alt={img?.alt}\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div className=\"absolute left-0 top-0 z-10 size-full\" />\n </div>\n </div>\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerBase)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA2EQ,IAAAI,EAAA,6BA1ERC,EAAmD,iBACnDA,EAAwB,uBACxBC,EAAqB,gBACrBC,EAA8B,mCAC9BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAqC,6CAGrCC,EAA0B,uCAE1B,MAAMC,EAAkD,CAAC,CACvD,UAAAC,EAAY,GACZ,KAAM,CAAE,MAAAC,EAAO,WAAAC,EAAY,QAAAC,EAAS,IAAAC,EAAK,MAAAC,EAAO,MAAAC,EAAO,MAAAC,CAAM,CAC/D,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAS,EAAK,EAE1CC,KAAW,UAAyB,IAAI,EACxCC,KAAS,UAAuB,IAAI,EACpCC,KAAQ,UAAyB,IAAI,EAErC,CAAE,IAAAC,EAAK,OAAAC,CAAO,KAAI,aAAU,EAE5BC,EAAa,OAAOd,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EAC9Fe,EACJ,OAAOd,GAAe,SAAWA,EAAaA,MAAc,wBAAqB,CAAE,KAAMA,CAAW,CAAC,EAEvG,sBAAU,IAAM,CACVY,GAAU,CAACX,GACbO,EAAS,SAAS,KAAK,EACvBD,EAAa,EAAI,IAEjBC,EAAS,SAAS,MAAM,EACxBD,EAAa,EAAK,EAEtB,EAAG,CAACK,CAAM,CAAC,KAEX,WAAQ,IAAM,CACZ,GAAI,CAACF,EAAM,QAAS,OACpB,MAAMK,EAASN,EAAO,SAAS,cAAgB,IACzCO,EAAeN,EAAM,SAAS,cAAgB,IAC9CO,EAAOD,EAAeD,EAE5B,uBAAc,OAAO,CACnB,QAASN,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWS,GAAc,CACvB,MAAMC,EAAQD,EAAK,SAAWD,EAAOD,EACrC,OAAK,IAAIN,EAAM,QAAS,CAAE,EAAGS,CAAM,CAAC,CACtC,CACF,CAAC,EACM,IAAM,CACX,gBAAc,OAAO,EAAE,QAASC,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,KAGH,QAAC,OACC,IAAKX,EACL,aAAW,MACT,mCACA,sNACAX,EACA,CACE,YAAaM,IAAU,OACvB,cAAeC,IAAU,SAC3B,CACF,EAEA,oBAAC,OACC,oBAAC,OACC,IAAKM,EACL,UAAU,kHAET,UAAAE,GAAc,CAACP,MACd,OAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQO,CAAW,EAChD,EAEDC,GAAmBR,MAClB,OAAC,OACC,UAAU,gHACV,wBAAyB,CAAE,OAAQQ,CAAgB,EACrD,EAED,CAACR,GAAaL,MACb,OAAC,EAAAoB,QAAA,CACC,QAAQ,OACR,aAAW,MAAG,4DAA4D,EAC1E,QAAS,IAAM,CACTf,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EAEC,SAAAN,EAEH,GAEJ,EACF,KACA,OAAC,OACC,oBAAC,OAAI,IAAKS,EAAO,UAAU,oDACzB,oBAAC,SAAM,IAAKF,EAAU,UAAU,yBAAyB,IAAKL,GAAO,IAAK,MAAK,GAAC,KAAI,GAAC,EACpF,CAACG,GAAaJ,GAAK,QAClB,OAAC,EAAAoB,QAAA,CACC,UAAU,mDACV,OAAQpB,GAAK,IACb,IAAKA,GAAK,IACV,aAAa,6BACf,KAEF,OAAC,OAAI,UAAU,uCAAuC,GACxD,EACF,GACF,CAEJ,EAEA,IAAOjB,KAAQ,cAAWY,CAAe",
|
|
6
6
|
"names": ["MediaPlayerBase_exports", "__export", "MediaPlayerBase_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_utils", "import_Styles", "import_picture", "import_button", "import_html", "import_react_intersection_observer", "MediaPlayerBase", "className", "title", "videoTitle", "btnText", "img", "video", "theme", "shape", "isPlaying", "setIsPlaying", "videoRef", "boxRef", "bgRef", "ref", "inView", "title_html", "videoTitle_html", "height", "screenHeight", "base", "self", "value", "t", "Button", "Picture"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var h=Object.create;var
|
|
1
|
+
"use strict";"use client";var h=Object.create;var r=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var M=(e,o)=>{for(var l in o)r(e,l,{get:o[l],enumerable:!0})},p=(e,o,l,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of y(o))!w.call(e,i)&&i!==l&&r(e,i,{get:()=>o[i],enumerable:!(a=v(o,i))||a.enumerable});return e};var n=(e,o,l)=>(l=e!=null?h(b(e)):{},p(o||!e||!e.__esModule?r(l,"default",{value:e,enumerable:!0}):l,e)),N=e=>p(r({},"__esModule",{value:!0}),e);var S={};M(S,{default:()=>L});module.exports=N(S);var t=require("react/jsx-runtime"),s=require("react"),m=require("../../helpers/utils.js"),d=require("../../shared/Styles.js"),c=require("../../components/index.js"),f=n(require("../Title/index.js")),u=n(require("../SwiperBox/index.js")),x=require("@payloadcms/richtext-lexical/html");const P=({data:e,configuration:o})=>{const[l,a]=(0,s.useState)(!1),i=(0,s.useRef)(null);return(0,t.jsxs)("div",{className:(0,m.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",o.shape==="round"?"rounded-2xl":""),children:[(0,t.jsxs)("div",{className:"laptop:w-[49%] laptop:h-full relative h-1/3 w-full flex-none",children:[l?(0,t.jsx)("video",{ref:i,className:"size-full object-cover",src:e?.video?.url,muted:!0,loop:!0}):(0,t.jsx)(c.Picture,{source:e.img?.url,alt:e.img?.alt||"",className:"size-full",imgClassName:"w-full h-full object-cover 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&&(0,t.jsx)("button",{onClick:()=>{l?(i.current&&i.current.pause(),a(!1)):(i.current&&i.current.play(),a(!0))},className:"tablet: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 justify-between gap-4 overflow-hidden p-4",children:[(0,t.jsxs)("div",{className:"flex flex-col",children:[(0,t.jsx)("h3",{className:"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]",children:e.title}),e.quote&&(0,t.jsx)("p",{className:"desktop:text-lg 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 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})]})]})},k=({data:{items:e=[],shape:o="square",title:l},className:a="",key:i})=>{const g=typeof l=="string"?l:l&&(0,x.convertLexicalToHTML)({data:l});return(0,t.jsxs)("div",{className:a,children:[l&&(0,t.jsx)(f.default,{data:{title:g||""}}),(0,t.jsx)(u.default,{className:"!overflow-visible",id:"MediaPlayerMultiSwiper"+i,data:{list:e,configuration:{shape:o}},Slide:P})]})};var L=(0,d.withStyles)(k);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerMulti/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const [isPlaying, setIsPlaying] = useState<boolean>(false)\n const videoRef = useRef<HTMLVideoElement>(null)\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 relative h-1/3 w-full flex-none\">\n {isPlaying ? (\n <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop />\n ) : (\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n )}\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button\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 }}\n className=\"tablet:size-12 flex size-10 items-center justify-center rounded-full bg-white bg-opacity-20\"\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 justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl 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: React.FC<MediaPlayerMultiProps> = ({\n data: { items = [], shape = 'square', title },\n className = '',\n key,\n}) => {\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape } }}\n Slide={MediaPlayerItem}\n />\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,EAAwC,iBACxCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwB,qCACxBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAAqC,6CAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAkB,EAAK,EACnDC,KAAW,UAAyB,IAAI,EAC9C,SACE,QAAC,OACC,aAAW,MACT,2CACA,yCACA,iEACAH,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,qBAAC,OAAI,UAAU,+DACZ,UAAAC,KACC,OAAC,SAAM,IAAKE,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,KAE3F,OAAC,WACC,OAAQA,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { Picture } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\nimport type { MediaPlayerMultiProps, MediaPlayerItemProps } from './types.js'\n\nconst MediaPlayerItem = ({ data, configuration }: { data: MediaPlayerItemProps; configuration?: any }) => {\n const [isPlaying, setIsPlaying] = useState<boolean>(false)\n const videoRef = useRef<HTMLVideoElement>(null)\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 relative h-1/3 w-full flex-none\">\n {isPlaying ? (\n <video ref={videoRef} className=\"size-full object-cover\" src={data?.video?.url} muted loop />\n ) : (\n <Picture\n source={data.img?.url}\n alt={data.img?.alt || ''}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover hover:scale-110 transition-all duration-300\"\n />\n )}\n <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4\">\n {data.video && (\n <button\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 }}\n className=\"tablet: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 justify-between gap-4 overflow-hidden p-4\">\n <div className=\"flex flex-col\">\n <h3 className=\"desktop:text-lg text-info-primary mb-2 text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.title}\n </h3>\n {data.quote && (\n <p className=\"desktop:text-lg text-info-primary text-sm font-bold leading-[1.2] tracking-[-0.02em]\">\n {data.quote}\n </p>\n )}\n </div>\n\n <p className=\"lg-desktop:text-2xl 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: React.FC<MediaPlayerMultiProps> = ({\n data: { items = [], shape = 'square', title },\n className = '',\n key,\n}) => {\n const title_html = typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title })\n return (\n <div className={className}>\n {title && <Title data={{ title: title_html || '' }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MediaPlayerMultiSwiper' + key}\n data={{ list: items, configuration: { shape: shape } }}\n Slide={MediaPlayerItem}\n />\n </div>\n )\n}\n\nexport default withStyles(MediaPlayerMulti)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsBM,IAAAI,EAAA,6BArBNC,EAAwC,iBACxCC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAwB,qCACxBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAAqC,6CAGrC,MAAMC,EAAkB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA2D,CACxG,KAAM,CAACC,EAAWC,CAAY,KAAI,YAAkB,EAAK,EACnDC,KAAW,UAAyB,IAAI,EAC9C,SACE,QAAC,OACC,aAAW,MACT,2CACA,yCACA,iEACAH,EAAc,QAAU,QAAU,cAAgB,EACpD,EAEA,qBAAC,OAAI,UAAU,+DACZ,UAAAC,KACC,OAAC,SAAM,IAAKE,EAAU,UAAU,yBAAyB,IAAKJ,GAAM,OAAO,IAAK,MAAK,GAAC,KAAI,GAAC,KAE3F,OAAC,WACC,OAAQA,EAAK,KAAK,IAClB,IAAKA,EAAK,KAAK,KAAO,GACtB,UAAU,YACV,aAAa,yEACf,KAEF,OAAC,OAAI,UAAU,2DACZ,SAAAA,EAAK,UACJ,OAAC,UACC,QAAS,IAAM,CACTE,GACEE,EAAS,SACXA,EAAS,QAAQ,MAAM,EAEzBD,EAAa,EAAK,IAEdC,EAAS,SACXA,EAAS,QAAQ,KAAK,EAExBD,EAAa,EAAI,EAErB,EACA,UAAU,gHAEV,mBAAC,OAAI,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OAAO,MAAM,6BAChE,mBAAC,QAAK,EAAE,uBAAuB,KAAK,QAAQ,EAC9C,EACF,EAEJ,GACF,KAEA,QAAC,OAAI,UAAU,oJACb,qBAAC,OAAI,UAAU,gBACb,oBAAC,MAAG,UAAU,4FACX,SAAAH,EAAK,MACR,EACCA,EAAK,UACJ,OAAC,KAAE,UAAU,uFACV,SAAAA,EAAK,MACR,GAEJ,KAEA,OAAC,KAAE,UAAU,0JACV,SAAAA,EAAK,YACR,GACF,GACF,CAEJ,EAEMK,EAAoD,CAAC,CACzD,KAAM,CAAE,MAAAC,EAAQ,CAAC,EAAG,MAAAC,EAAQ,SAAU,MAAAC,CAAM,EAC5C,UAAAC,EAAY,GACZ,IAAAC,CACF,IAAM,CACJ,MAAMC,EAAa,OAAOH,GAAU,SAAWA,EAAQA,MAAS,wBAAqB,CAAE,KAAMA,CAAM,CAAC,EACpG,SACE,QAAC,OAAI,UAAWC,EACb,UAAAD,MAAS,OAAC,EAAAI,QAAA,CAAM,KAAM,CAAE,MAAOD,GAAc,EAAG,EAAG,KACpD,OAAC,EAAAE,QAAA,CACC,UAAU,oBACV,GAAI,yBAA2BH,EAC/B,KAAM,CAAE,KAAMJ,EAAO,cAAe,CAAE,MAAOC,CAAM,CAAE,EACrD,MAAOR,EACT,GACF,CAEJ,EAEA,IAAOV,KAAQ,cAAWgB,CAAgB",
|
|
6
6
|
"names": ["MediaPlayerMulti_exports", "__export", "MediaPlayerMulti_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_components", "import_Title", "import_SwiperBox", "import_html", "MediaPlayerItem", "data", "configuration", "isPlaying", "setIsPlaying", "videoRef", "MediaPlayerMulti", "items", "shape", "title", "className", "key", "title_html", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
2
|
-
aspect-[390/480] overflow-hidden`,t,{"aiui-dark":
|
|
1
|
+
"use strict";"use client";var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var q=(l,t)=>{for(var s in t)n(l,s,{get:t[s],enumerable:!0})},w=(l,t,s,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of N(t))!B.call(l,a)&&a!==s&&n(l,a,{get:()=>t[a],enumerable:!(p=h(t,a))||p.enumerable});return l};var z=l=>w(n({},"__esModule",{value:!0}),l);var j={};q(j,{default:()=>C});module.exports=z(j);var e=require("react/jsx-runtime"),I=require("react"),o=require("../../components/index.js"),b=require("../../shared/Styles.js"),m=require("../../helpers/utils.js"),c=require("../../shared/mimeType.js");const P=({data:l,className:t=""})=>{const{title:s,description:p,backgroundImage:a,mobileBackgroundImage:i,primaryButton:r,secondaryButton:d,theme:x,shape:y,primaryButtonHandler:g,secondaryButtonHandler:k}=l,f=()=>{g?.()},v=()=>{k?.()},u="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,m.cn)(`tablet:aspect-[740/480] laptop:aspect-[1664/485] text-info-primary relative
|
|
2
|
+
aspect-[390/480] overflow-hidden`,t,{"aiui-dark":x==="dark","rounded-box":y==="rounded"}),children:[(0,c.isVideo)(a?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:a?.url,type:"video/mp4"})}):(0,e.jsx)(o.Picture,{source:a?.url,alt:a?.alt,className:"tablet:block absolute inset-0 hidden size-full object-cover"}),(0,c.isVideo)(i?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:i?.url,type:"video/mp4"})}):(0,e.jsx)(o.Picture,{source:i?.url,alt:i?.alt,className:"tablet:hidden absolute inset-0 size-full object-cover"}),(0,e.jsx)("div",{className:`
|
|
3
3
|
laptop:items-center
|
|
4
4
|
absolute
|
|
5
5
|
inset-0
|
|
6
6
|
flex w-full items-end py-[16px]
|
|
7
7
|
`,children:(0,e.jsxs)("div",{className:`
|
|
8
|
-
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
|
|
9
|
-
desktop:gap-
|
|
10
|
-
`,children:[(0,e.jsxs)("div",{className:"
|
|
8
|
+
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
|
|
9
|
+
laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
|
|
10
|
+
`,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(o.Heading,{as:"h2",size:3,className:"member-equity-title ",html:s}),(0,e.jsx)(o.Text,{size:2,className:"member-equity-description",html:p})]}),(0,e.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[d&&d.text&&(0,e.jsx)("a",{href:d.link,children:(0,e.jsx)(o.Button,{variant:"secondary",onClick:v,className:(0,m.cn)("member-equity-button-secondary ",u),children:d.text})}),r&&r.text&&(0,e.jsx)("a",{href:r.link,children:(0,e.jsx)(o.Button,{variant:"primary",onClick:f,className:(0,m.cn)("member-equity-button-primary ",u),children:r.text})})]})]})})]})};var C=(0,b.withStyles)(P);
|
|
11
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n `tablet:aspect-[740/480] laptop:aspect-[1664/485] text-info-primary relative\n aspect-[390/480] overflow-hidden`,\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block absolute inset-0 hidden size-full object-cover\">\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"tablet:block absolute inset-0 hidden size-full object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"tablet:hidden absolute inset-0 size-full object-cover\"\n />\n )}\n <div\n className={`\n laptop:items-center \n absolute\n inset-0\n flex w-full items-end py-[16px]\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 laptop:gap-
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "import_utils", "import_mimeType", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "handleButtonPrimaryClick", "handleButtonSecondaryClick"]
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\n\nconst MemberEquity: React.FC<MemberEquityProps> = ({ data, className = '' }) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n `tablet:aspect-[740/480] laptop:aspect-[1664/485] text-info-primary relative\n aspect-[390/480] overflow-hidden`,\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n }\n )}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:block absolute inset-0 hidden size-full object-cover\">\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"tablet:block absolute inset-0 hidden size-full object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"tablet:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"tablet:hidden absolute inset-0 size-full object-cover\"\n />\n )}\n <div\n className={`\n laptop:items-center \n absolute\n inset-0\n flex w-full items-end py-[16px]\n `}\n >\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text size={2} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3\">\n {secondaryButton && secondaryButton.text && (\n <a href={secondaryButton.link}>\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary ', lgButtonSize)}\n >\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={primaryButton.link}>\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={cn('member-equity-button-primary ', lgButtonSize)}\n >\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </section>\n )\n}\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgDU,IAAAI,EAAA,6BA/CVC,EAAkB,iBAClBC,EAA+C,qCAC/CC,EAA2B,kCAE3BC,EAAmB,kCACnBC,EAAwB,oCAExB,MAAMC,EAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,IAAM,CAC9E,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIX,EACEY,EAA2B,IAAM,CAErCF,IAAuB,CACzB,EAEMG,EAA6B,IAAM,CAEvCF,IAAyB,CAC3B,EAEMG,EAAe,mFAErB,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT;AAAA,0CAEAb,EACA,CACE,YAAaO,IAAU,OACvB,cAAeC,IAAU,SAC3B,CACF,EAEC,wBAAQL,GAAiB,QAAQ,KAChC,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,8DAC/C,mBAAC,UAAO,IAAKA,GAAiB,IAAK,KAAK,YAAY,EACtD,KAEA,OAAC,WACC,OAAQA,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,8DACZ,KAED,WAAQC,GAAuB,QAAQ,KACtC,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKA,GAAuB,IAAK,KAAK,YAAY,EAC5D,KAEA,OAAC,WACC,OAAQA,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,wDACZ,KAEF,OAAC,OACC,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAOX,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,UAKX,qBAAC,OAAI,UAAU,mHACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMC,EAAa,GAC5E,KAEA,QAAC,OAAI,UAAU,mFACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,KAAE,KAAMA,EAAgB,KACvB,mBAAC,UACC,QAAQ,YACR,QAASM,EACT,aAAW,MAAG,kCAAmCC,CAAY,EAE5D,SAAAP,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,KAAE,KAAMA,EAAc,KACrB,mBAAC,UACC,QAAQ,UACR,QAASM,EACT,aAAW,MAAG,gCAAiCE,CAAY,EAE1D,SAAAR,EAAc,KACjB,EACF,GAEJ,GACF,EACF,GACF,CAEJ,EAEA,IAAOf,KAAQ,cAAWQ,CAAY",
|
|
6
|
+
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_Styles", "import_utils", "import_mimeType", "MemberEquity", "data", "className", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var L=Object.create;var N=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var q=(l,o)=>{for(var s in o)N(l,s,{get:o[s],enumerable:!0})},v=(l,o,s,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of P(o))!z.call(l,r)&&r!==s&&N(l,r,{get:()=>o[r],enumerable:!(m=S(o,r))||m.enumerable});return l};var g=(l,o,s)=>(s=l!=null?L(R(l)):{},v(o||!l||!l.__esModule?N(s,"default",{value:l,enumerable:!0}):s,l)),E=l=>v(N({},"__esModule",{value:!0}),l);var D={};q(D,{default:()=>Q});module.exports=E(D);var e=require("react/jsx-runtime"),x=g(require("react")),T=require("react-responsive"),w=require("../../shared/Styles.js"),I=g(require("../../components/picture.js")),C=g(require("../../components/button.js")),B=require("../../components/heading.js"),G=require("../../components/text.js"),p=require("../../components/carousel.js"),c=require("../../components/gird.js"),$=g(require("../Title/index.js")),M=require("../../helpers/utils.js"),u=require("../../components/tabs.js");const b=({item:l,shape:o="square",isTab:s=!1})=>{const[m,r]=(0,x.useState)(!1),d=(0,T.useMediaQuery)({query:"(max-width: 1024px)"});(0,x.useEffect)(()=>{r(d)},[d]);const{theme:n="light",title:k,description:f,imageUrl:h,primaryButton:t,secondaryButton:a}=l,i="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,M.cn)("item-wrapper group relative box-border w-full overflow-hidden",{"rounded-2xl":o==="rounded","aiui-dark":n==="dark","h-[480px]":m&&!s,"h-[400px]":m&&s},"text-info-primary"),children:[(0,e.jsx)(I.default,{source:h?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${h?.width}/${h?.height}`}}),(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(B.Heading,{size:3,className:"item-title",html:k}),(0,e.jsx)(G.Text,{size:3,className:"item-description desktop:mt-1 text-text-2
|
|
1
|
+
"use strict";var L=Object.create;var N=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,z=Object.prototype.hasOwnProperty;var q=(l,o)=>{for(var s in o)N(l,s,{get:o[s],enumerable:!0})},v=(l,o,s,m)=>{if(o&&typeof o=="object"||typeof o=="function")for(let r of P(o))!z.call(l,r)&&r!==s&&N(l,r,{get:()=>o[r],enumerable:!(m=S(o,r))||m.enumerable});return l};var g=(l,o,s)=>(s=l!=null?L(R(l)):{},v(o||!l||!l.__esModule?N(s,"default",{value:l,enumerable:!0}):s,l)),E=l=>v(N({},"__esModule",{value:!0}),l);var D={};q(D,{default:()=>Q});module.exports=E(D);var e=require("react/jsx-runtime"),x=g(require("react")),T=require("react-responsive"),w=require("../../shared/Styles.js"),I=g(require("../../components/picture.js")),C=g(require("../../components/button.js")),B=require("../../components/heading.js"),G=require("../../components/text.js"),p=require("../../components/carousel.js"),c=require("../../components/gird.js"),$=g(require("../Title/index.js")),M=require("../../helpers/utils.js"),u=require("../../components/tabs.js");const b=({item:l,shape:o="square",isTab:s=!1})=>{const[m,r]=(0,x.useState)(!1),d=(0,T.useMediaQuery)({query:"(max-width: 1024px)"});(0,x.useEffect)(()=>{r(d)},[d]);const{theme:n="light",title:k,description:f,imageUrl:h,primaryButton:t,secondaryButton:a}=l,i="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("div",{className:(0,M.cn)("item-wrapper group relative box-border w-full overflow-hidden",{"rounded-2xl":o==="rounded","aiui-dark":n==="dark","h-[480px]":m&&!s,"h-[400px]":m&&s},"text-info-primary"),children:[(0,e.jsx)(I.default,{source:h?.url,className:"inset-0 h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${h?.width}/${h?.height}`}}),(0,e.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)(B.Heading,{size:3,className:"item-title",html:k}),(0,e.jsx)(G.Text,{size:3,className:"item-description desktop:mt-1 text-text-2 desktop:text-text-4",html:f})]}),(0,e.jsxs)("div",{className:"flex gap-[16px]",children:[a&&a.text&&(0,e.jsx)("a",{href:a.link,children:(0,e.jsx)(C.default,{className:i,variant:"secondary",children:a.text})}),t&&t.text&&(0,e.jsx)("a",{href:t.link,children:(0,e.jsx)(C.default,{className:i,variant:"primary",children:t.text})})]})]})]})},H=x.default.forwardRef((l,o)=>{const{shape:s,sectionTitle:m,groupByTab:r=!1,items:d=[],carousel:n}=l.data,k=t=>{switch(t){case"full":return 12;case"half":return 6;case"one-third":return 4}},f=d.map(t=>t.tabName).filter(Boolean).filter((t,a,i)=>i.indexOf(t)===a),h=f.map(t=>({tabName:t,items:d.filter(a=>a.tabName===t)})).reduce((t,a)=>(t[a.tabName]=a.items,t),{});return(0,e.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[m&&(0,e.jsx)($.default,{data:{title:m},className:"section-title"}),r?(0,e.jsxs)(u.Tabs,{shape:s,align:"left",defaultValue:f[0],children:[(0,e.jsx)(u.TabsList,{children:f.map((t,a)=>(0,e.jsx)(u.TabsTrigger,{value:t,children:t},a))}),f.map((t,a)=>(0,e.jsx)(u.TabsContent,{value:t,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(c.Grid,{className:"w-full",children:[h[t].map((i,y)=>(0,e.jsx)(c.GridItem,{span:k(i.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(b,{item:i,shape:s,isTab:r})},`${i?.title||""}${y}`)),(0,e.jsx)(c.GridItem,{className:"laptop:hidden block",span:12,children:(0,e.jsx)(p.Carousel,{className:"",children:(0,e.jsx)(p.CarouselContent,{className:"flex",children:h[t].map((i,y)=>(0,e.jsx)(p.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(b,{item:i,shape:s,isTab:r})},`${i?.title||""}${y}`))})})})]}),n&&n?.items.length>0?(0,e.jsx)(p.Carousel,{className:"laptop:mt-4 mt-3",children:(0,e.jsx)(p.CarouselContent,{className:"flex",children:n.items.map((i,y)=>(0,e.jsx)(p.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(b,{item:i,shape:s,isTab:r})},y))})}):null]})},a))]}):(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(c.Grid,{className:"w-full",children:[d.map((t,a)=>(0,e.jsx)(c.GridItem,{span:k(t.width??"full"),className:"laptop:block hidden",children:(0,e.jsx)(b,{item:t,shape:s})},`${t?.title||""}${a}`)),d.map((t,a)=>(0,e.jsx)(c.GridItem,{span:k("full"),className:"laptop:hidden block",children:(0,e.jsx)(b,{item:t,shape:s})},`${t?.title||""}${a}`))]}),n&&n?.items.length>0?(0,e.jsx)(p.Carousel,{className:"laptop:mt-4 mt-3",children:(0,e.jsx)(p.CarouselContent,{className:"flex",children:n.items.map((t,a)=>(0,e.jsx)(p.CarouselItem,{className:"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5",children:(0,e.jsx)(b,{item:t,shape:s})},`${t?.title||""}${a}`))})}):null]})]})});var Q=(0,w.withStyles)(H);
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({\n item,\n shape = 'square',\n isTab = false,\n}: { item: Item } & { shape?: Shape } & { isTab?: boolean }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 1024px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper group relative box-border w-full overflow-hidden',\n {\n 'rounded-2xl': shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !isTab,\n 'h-[400px]': isMobile && isTab,\n },\n `text-info-primary`\n )}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0 h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0CM,IAAAI,EAAA,6BA1CNC,EAA2C,oBAC3CC,EAA8B,4BAE9BC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAAwD,wCACxDC,EAA+B,oCAC/BC,EAAkB,gCAElBC,EAAmB,kCACnBC,EAAyD,oCACzD,MAAMC,EAAY,CAAC,CACjB,KAAAC,EACA,MAAAC,EAAQ,SACR,MAAAC,EAAQ,EACV,IAAgE,CAC9D,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAK,EACxCC,KAAa,iBAAc,CAAE,MAAO,qBAAsB,CAAC,KAEjE,aAAU,IAAM,CACdD,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CAAE,MAAAC,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,cAAAC,EAAe,gBAAAC,CAAgB,EAAIX,EACpFY,EAAe,mFAErB,SACE,QAAC,OACC,aAAW,MACT,gEACA,CACE,cAAeX,IAAU,UACzB,YAAaK,IAAU,OACvB,YAAaH,GAAY,CAACD,EAC1B,YAAaC,GAAYD,CAC3B,EACA,mBACF,EAEA,oBAAC,EAAAW,QAAA,CACC,OAAQJ,GAAU,IAClB,UAAU,iCACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,KACA,QAAC,OAAI,UAAU,kFACb,qBAAC,OACC,oBAAC,WAAQ,KAAM,EAAG,UAAU,aAAa,KAAMF,EAAO,KACtD,OAAC,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Carousel, CarouselContent, CarouselItem } from '../../components/carousel.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport type { Shape } from '../../types/props'\nimport { cn } from '../../helpers/utils.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nconst ItemBlock = ({\n item,\n shape = 'square',\n isTab = false,\n}: { item: Item } & { shape?: Shape } & { isTab?: boolean }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 1024px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper group relative box-border w-full overflow-hidden',\n {\n 'rounded-2xl': shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !isTab,\n 'h-[400px]': isMobile && isTab,\n },\n `text-info-primary`\n )}\n >\n <Picture\n source={imageUrl?.url}\n className=\"inset-0 h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text size={3} className=\"item-description desktop:mt-1 text-text-2 desktop:text-text-4\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && secondaryButton.text && (\n <a href={secondaryButton.link}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={primaryButton.link}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger key={index} value={tabName!}>\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <Grid className=\"w-full\">\n {tabItemsMaps[tabName].map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n </GridItem>\n ))}\n {\n <GridItem className=\"laptop:hidden block\" span={12}>\n <Carousel className=\"\">\n <CarouselContent className=\"flex\">\n {tabItemsMaps[tabName].map((item, index) => (\n <CarouselItem\n key={`${item?.title || ''}${index}`}\n className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n >\n <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n </GridItem>\n }\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem key={index} className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\">\n <ItemBlock item={item} shape={shape} isTab={groupByTab} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock item={item} shape={shape} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock item={item} shape={shape} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n <Carousel className=\"laptop:mt-4 mt-3\">\n <CarouselContent className=\"flex\">\n {carousel.items.map((item, index) => (\n <CarouselItem\n key={`${item?.title || ''}${index}`}\n className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n >\n <ItemBlock item={item} shape={shape} />\n </CarouselItem>\n ))}\n </CarouselContent>\n </Carousel>\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_carousel", "import_gird", "import_Title", "import_utils", "import_tabs", "ItemBlock", "item", "shape", "isTab", "isMobile", "setIsMobile", "mediaQuery", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "ref", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "tabItemsMaps", "tabName", "acc", "cur", "Title"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var Y=Object.create;var v=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var O=(t,e)=>{for(var r in e)v(t,r,{get:e[r],enumerable:!0})},
|
|
1
|
+
"use strict";"use client";var Y=Object.create;var v=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var O=(t,e)=>{for(var r in e)v(t,r,{get:e[r],enumerable:!0})},G=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of B(e))!K.call(t,n)&&n!==r&&v(t,n,{get:()=>e[n],enumerable:!(l=q(e,n))||l.enumerable});return t};var Q=(t,e,r)=>(r=t!=null?Y(J(t)):{},G(e||!t||!t.__esModule?v(r,"default",{value:t,enumerable:!0}):r,t)),V=t=>G(v({},"__esModule",{value:!0}),t);var Z={};O(Z,{default:()=>X});module.exports=V(Z);var s=require("react/jsx-runtime"),o=Q(require("react")),P=require("@gsap/react"),f=require("gsap"),k=require("gsap/dist/SplitText"),g=require("gsap/dist/ScrollTrigger"),c=require("../../helpers/utils.js"),w=require("../../components/index.js"),z=require("../../shared/Styles.js");function W(t=[],e=3){const r=[];for(let l=0;l<t.length;l+=e)r.push(t.slice(l,l+e));return r}const M=o.default.forwardRef(({data:t,className:e=""},r)=>{const{title:l,features:n=[],featureChunkSize:H=3,theme:_}=t,[b,N]=o.default.useState(0),[A,y]=o.default.useState(!0),d=W(n,H),S=d.length,u=n.length>H,C=u?[...d,d[0]]:d,T=40;o.default.useEffect(()=>{if(!u)return;const a=setInterval(()=>{N(i=>i+1),y(!0)},3e3);return()=>clearInterval(a)},[S,u]),o.default.useEffect(()=>{if(u)if(b===S){const a=setTimeout(()=>{y(!1),N(0)},500);return()=>clearTimeout(a)}else y(!0)},[b,S,u]);const m=(0,o.useRef)(null),I=(0,o.useRef)(null),x=(0,o.useRef)(null);return(0,P.useGSAP)(()=>{if(f.gsap.registerPlugin(g.ScrollTrigger,k.SplitText),!m.current)return;x.current=new k.SplitText(m.current,{type:"words",wordsClass:"word"});const a=m.current?.clientHeight||100,i=x.current.words;return f.gsap.set(i,{opacity:0}),g.ScrollTrigger.create({trigger:m.current,start:"bottom bottom-=6%",end:`bottom+=${a*2+80}px bottom-=6%`,scrub:!0,onUpdate:p=>{const h=p.progress,R=i.length,L=1/R,$=.5;i.forEach((j,D)=>{const F=D/R*(1-$),U=L*(1+$);let E=(h-F)/U;E=Math.max(0,Math.min(E,1)),f.gsap.set(j,{opacity:E})})}}),n&&n.length>0&&g.ScrollTrigger.create({trigger:I.current,start:`bottom+=${a*2}px bottom-=6%`,end:`bottom+=${a*2+100}px bottom-=6%`,onUpdate:p=>{f.gsap.set(I.current,{opacity:p.progress})}}),()=>{x.current&&x.current.revert(),g.ScrollTrigger.getAll().forEach(p=>p.kill())}},[]),(0,s.jsxs)("div",{ref:r,className:(0,c.cn)("slogan-container laptop:flex-row laptop:items-end laptop:justify-between text-info-primary laptop:min-h-[64px] lg-desktop:min-h-[128px] flex h-auto w-full flex-col items-start justify-center gap-[24px] text-center",e),children:[(0,s.jsx)(w.Heading,{ref:m,as:"h2",size:2,weight:"bold",align:"left",className:(0,c.cn)("slogan-title laptop:text-[40px] desktop:text-[48px] lg-desktop:text-[64px] text-[40px] !leading-none"),children:l}),n&&n.length>0&&(0,s.jsx)("div",{className:(0,c.cn)("relative w-full max-w-[500px] overflow-hidden",`tablet:h-[${T}px]`),children:(0,s.jsx)("div",{className:(0,c.cn)(["flex flex-col",A?"transition-transform duration-500 ease-[cubic-bezier(.4,0,.2,1)]":"!transition-none"]),style:{transform:`translateY(-${b*T}px)`},children:C.map((a,i)=>(0,s.jsx)("div",{className:(0,c.cn)("flex w-full flex-row items-stretch gap-3 overflow-hidden",`tablet:h-[${T}px]`),children:a.map((p,h)=>(0,s.jsxs)(o.default.Fragment,{children:[h>0&&(0,s.jsx)("div",{className:"slogan-feature-divider w-px self-stretch bg-[#E4E5E6]"}),(0,s.jsx)(w.Text,{size:3,align:"left",as:"p",className:"slogan-feature-text tablet:text-[13px] laptop:text-[14px] line-clamp-3 text-[12px] leading-[1.4]",html:p.title})]},h))},i))})})]})});M.displayName="Slogan";var X=(0,z.withStyles)(M);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|