@anker-in/headless-ui 0.0.27-alpha.107 → 0.0.27-alpha.109
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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.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/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- 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 E=Object.create;var f=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,
|
|
1
|
+
"use strict";"use client";var E=Object.create;var f=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var S=(e,a)=>{for(var r in a)f(e,r,{get:a[r],enumerable:!0})},H=(e,a,r,m)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of L(a))!D.call(e,o)&&o!==r&&f(e,o,{get:()=>a[o],enumerable:!(m=I(a,o))||m.enumerable});return e};var N=(e,a,r)=>(r=e!=null?E(M(e)):{},H(a||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),U=e=>H(f({},"__esModule",{value:!0}),e);var A={};S(A,{default:()=>j});module.exports=U(A);var t=require("react/jsx-runtime"),s=N(require("react")),B=require("@gsap/react"),g=N(require("gsap")),c=require("gsap/dist/ScrollTrigger"),p=require("../../components/index.js"),n=require("../../helpers/index.js"),z=require("../../shared/Styles.js");const w=s.default.forwardRef(({data:e,className:a},r)=>{const{title:m,subtitle:o,pcImage:P,mobileImage:R,primaryButton:d,secondaryButton:b,theme:T="light",caption:h=[]}=e,u=(0,s.useRef)(null),i=(0,s.useRef)(null);return(0,s.useImperativeHandle)(r,()=>i.current),(0,B.useGSAP)(()=>{if(g.default.registerPlugin(c.ScrollTrigger),!u.current)return;const v=i.current?.clientHeight||100;return window.innerHeight<=v?c.ScrollTrigger.create({trigger:i.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:l=>{const x=l.progress*40-20;g.default.set(u.current,{yPercent:x})}}):(c.ScrollTrigger.create({trigger:i.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:l=>{const x=l.progress*20-20;g.default.set(u.current,{yPercent:x})}}),c.ScrollTrigger.create({trigger:i.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:l=>{const x=l.progress*20;g.default.set(u.current,{yPercent:x})}})),()=>{c.ScrollTrigger.getAll().forEach(l=>l.kill())}},[]),(0,t.jsxs)("div",{ref:i,"data-ui-component-id":"HeroBanner",className:(0,n.cn)(T==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",a),children:[(0,t.jsx)("div",{ref:u,className:(0,n.cn)("absolute left-0 top-0 size-full"),children:(0,t.jsx)(p.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",source:`${P?.url||""} , ${R?.url||""} 767`})}),(0,t.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-[48px] z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,t.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[m&&(0,t.jsx)(p.Heading,{as:"h1",size:5,className:(0,n.cn)("hero-banner-title tablet:pr-0 pr-[50px]"),html:m}),o&&(0,t.jsx)(p.Text,{as:"p",size:3,className:(0,n.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:o})]}),(0,t.jsxs)("div",{className:"laptop:justify-start laptop:gap-3 flex items-center gap-2",children:[b&&b.text&&(0,t.jsx)("a",{href:b.link,children:(0,t.jsx)(p.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:b.text})}),d&&d.text&&(0,t.jsx)("a",{href:d.link,children:(0,t.jsx)(p.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:d.text})})]})]}),h.length>0&&(0,t.jsx)("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:h.map((v,y)=>(0,t.jsxs)(s.default.Fragment,{children:[(0,t.jsx)(p.Text,{size:3,className:(0,n.cn)("hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]"),html:v.title}),y<h.length-1&&(0,t.jsx)("div",{className:(0,n.cn)("bg-info-primary w-px")})]},y))})]})});w.displayName="HeroBanner";var j=(0,z.withStyles)(w);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-[48px] z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title tablet:pr-0 pr-[50px]')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start laptop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={secondaryButton.link}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={primaryButton.link}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={3}\n className={cn(\n 'hero-banner-product-text lg-desktop:text-[14px] tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1 text-[12px] leading-[1.2] tracking-[-0.02em]'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "gsap", "clientHeight", "self", "value", "t", "c", "index"]
|
|
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`,
|
|
1
|
+
"use strict";"use client";var q=Object.create;var n=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var M=(t,a)=>{for(var o in a)n(t,o,{get:a[o],enumerable:!0})},x=(t,a,o,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let s of z(a))!E.call(t,s)&&s!==o&&n(t,s,{get:()=>a[s],enumerable:!(p=w(a,s))||p.enumerable});return t};var C=(t,a,o)=>(o=t!=null?q(P(t)):{},x(a||!t||!t.__esModule?n(o,"default",{value:t,enumerable:!0}):o,t)),j=t=>x(n({},"__esModule",{value:!0}),t);var T={};M(T,{default:()=>I});module.exports=j(T);var e=require("react/jsx-runtime"),y=C(require("react")),l=require("../../components/index.js"),g=require("../../shared/Styles.js"),c=require("../../helpers/utils.js"),u=require("../../shared/mimeType.js");const H=y.default.forwardRef(({data:t,className:a=""},o)=>{const{title:p,description:s,backgroundImage:i,mobileBackgroundImage:r,primaryButton:d,secondaryButton:m,theme:f,shape:k,primaryButtonHandler:v,secondaryButtonHandler:h}=t,N=()=>{v?.()},B=()=>{h?.()},b="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,c.cn)(`tablet:aspect-[740/480] laptop:aspect-[1664/485] text-info-primary relative
|
|
2
|
+
aspect-[390/480] overflow-hidden`,a,{"aiui-dark":f==="dark","rounded-box":k==="rounded"}),ref:o,children:[(0,u.isVideo)(i?.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:i?.url,type:"video/mp4"})}):(0,e.jsx)(l.Picture,{source:i?.url,alt:i?.alt,className:"tablet:block absolute inset-0 hidden size-full object-cover"}),(0,u.isVideo)(r?.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:r?.url,type:"video/mp4"})}):(0,e.jsx)(l.Picture,{source:r?.url,alt:r?.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)(l.Heading,{as:"h2",size:3,className:"member-equity-title ",html:p}),(0,e.jsx)(l.Text,{size:2,className:"member-equity-description",html:s})]}),(0,e.jsxs)("div",{className:"tablet:gap-3 laptop:gap-4 desktop:gap-4 lg-desktop:gap-4 flex items-center gap-3",children:[m&&m.text&&(0,e.jsx)("a",{href:m.link,children:(0,e.jsx)(l.Button,{variant:"secondary",onClick:B,className:(0,c.cn)("member-equity-button-secondary ",b),children:m.text})}),d&&d.text&&(0,e.jsx)("a",{href:d.link,children:(0,e.jsx)(l.Button,{variant:"primary",onClick:N,className:(0,c.cn)("member-equity-button-primary ",b),children:d.text})})]})]})})]})});var I=(0,g.withStyles)(H);
|
|
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
|
|
5
|
-
"mappings": "
|
|
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> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\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 ref={ref}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"tablet:block absolute inset-0 hidden size-full object-cover\"\n >\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)\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwDY,IAAAI,EAAA,6BAvDZC,EAAkB,oBAClBC,EAA+C,qCAC/CC,EAA2B,kCAE3BC,EAAmB,kCACnBC,EAAwB,oCAExB,MAAMC,EAA4C,EAAAC,QAAM,WACtD,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EACEa,EAA2B,IAAM,CAErCF,IAAuB,CACzB,EAEMG,EAA6B,IAAM,CAEvCF,IAAyB,CAC3B,EAEMG,EAAe,mFAErB,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT;AAAA,0CAEAd,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,SAC3B,CACF,EACA,IAAKR,EAEJ,wBAAQG,GAAiB,QAAQ,KAChC,OAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,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,CACF,EAEA,IAAOjB,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", "React", "data", "className", "ref", "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
|