@anker-in/headless-ui 1.1.9-alpha.1764588298949 → 1.1.9-alpha.1764670339416
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/ImageWithText/ImageWithText.js +1 -1
- package/dist/cjs/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PaidShipping/LearnMore.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/LearnMore.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.d.ts +2 -0
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +2 -0
- package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +7 -0
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +2 -2
- package/dist/cjs/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +2 -2
- package/dist/cjs/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/cjs/biz-components/ProductHero/ProductHero.js.map +2 -2
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/cjs/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js +1 -1
- package/dist/esm/biz-components/ImageWithText/ImageWithText.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/LearnMore.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js +1 -1
- package/dist/esm/biz-components/Listing/components/PaidShipping/ShippingMethod.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/components/CompareModal.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.d.ts +2 -0
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js +2 -0
- package/dist/esm/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map +7 -0
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js +2 -2
- package/dist/esm/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.js.map +2 -2
- package/dist/esm/biz-components/ProductHero/ProductHero.js +1 -1
- package/dist/esm/biz-components/ProductHero/ProductHero.js.map +2 -2
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js +1 -1
- package/dist/esm/biz-components/ThreeDCarousel/ThreeDCarousel.js.map +2 -2
- package/package.json +1 -1
package/dist/cjs/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.js.map
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../src/biz-components/Listing/components/PurchaseBar/ScrollSpyNav/useScrollSpy.tsx"],
|
|
4
|
+
"sourcesContent": ["import { useState, useEffect } from 'react'\nimport { debounce } from 'es-toolkit'\n\nconst useScrollSpy = (sectionIds: string[], offset = 100) => {\n const [activeId, setActiveId] = useState('')\n\n useEffect(() => {\n const handleScroll = () => {\n const scrollPosition = Math.ceil(window.scrollY + offset)\n\n // \u904D\u5386\u6240\u6709section\uFF0C\u627E\u5230\u5F53\u524D\u53EF\u89C6\u533A\u57DF\u5185\u7684section\n for (let i = sectionIds.length - 1; i >= 0; i--) {\n const section = document.getElementById(sectionIds[i])\n if (section) {\n const offsetTop = Math.ceil(section.getBoundingClientRect().top + window.scrollY)\n if (scrollPosition >= offsetTop) {\n setActiveId(sectionIds[i])\n break\n }\n }\n }\n }\n\n // \u521D\u59CB\u5316\u65F6\u6267\u884C\u4E00\u6B21\n handleScroll()\n\n // \u76D1\u542C\u6EDA\u52A8\u4E8B\u4EF6\n window.addEventListener('scroll', debounce(handleScroll, 50))\n\n return () => {\n window.removeEventListener('scroll', debounce(handleScroll, 50))\n }\n }, [sectionIds, offset])\n\n return activeId\n}\n\nexport { useScrollSpy }\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAoC,iBACpCC,EAAyB,sBAEzB,MAAMH,EAAe,CAACI,EAAsBC,EAAS,MAAQ,CAC3D,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAE,EAE3C,sBAAU,IAAM,CACd,MAAMC,EAAe,IAAM,CACzB,MAAMC,EAAiB,KAAK,KAAK,OAAO,QAAUJ,CAAM,EAGxD,QAASK,EAAIN,EAAW,OAAS,EAAGM,GAAK,EAAGA,IAAK,CAC/C,MAAMC,EAAU,SAAS,eAAeP,EAAWM,CAAC,CAAC,EACrD,GAAIC,EAAS,CACX,MAAMC,EAAY,KAAK,KAAKD,EAAQ,sBAAsB,EAAE,IAAM,OAAO,OAAO,EAChF,GAAIF,GAAkBG,EAAW,CAC/BL,EAAYH,EAAWM,CAAC,CAAC,EACzB,KACF,CACF,CACF,CACF,EAGA,OAAAF,EAAa,EAGb,OAAO,iBAAiB,YAAU,YAASA,EAAc,EAAE,CAAC,EAErD,IAAM,CACX,OAAO,oBAAoB,YAAU,YAASA,EAAc,EAAE,CAAC,CACjE,CACF,EAAG,CAACJ,EAAYC,CAAM,CAAC,EAEhBC,CACT",
|
|
6
|
+
"names": ["useScrollSpy_exports", "__export", "useScrollSpy", "__toCommonJS", "import_react", "import_es_toolkit", "sectionIds", "offset", "activeId", "setActiveId", "handleScroll", "scrollPosition", "i", "section", "offsetTop"]
|
|
7
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var I=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var H=Object.prototype.hasOwnProperty;var V=(t,i)=>{for(var c in i)I(t,c,{get:i[c],enumerable:!0})},B=(t,i,c,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of F(i))!H.call(t,s)&&s!==c&&I(t,s,{get:()=>i[s],enumerable:!(m=R(i,s))||m.enumerable});return t};var _=t=>B(I({},"__esModule",{value:!0}),t);var Q={};V(Q,{default:()=>O});module.exports=_(Q);var e=require("react/jsx-runtime"),o=require("react"),D=require("react-responsive"),p=require("../../helpers/utils.js"),A=require("../../shared/Styles.js"),a=require("../../components/index.js"),X=require("../SwiperBox/index.js"),f=require("../../hooks/useExposure.js"),w=require("swiper/react"),T=require("swiper/modules"),Z=require("swiper/css");const U="media",S="media_scene_switcher",v=3e3,q=({data:t,configuration:i,theme:c})=>{const m=(0,o.useRef)(null),s=i?.isActive||!1;return(0,f.useExposure)(m,{componentType:U,componentName:S,componentTitle:t?.title,position:(i?.index??0)+1}),(0,e.jsxs)("div",{ref:m,className:(0,p.cn)("media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":s,"bg-[#EAEAEC] text-[1D1D1F]":s&&c==="light"}),onClick:()=>i?.onItemClick?.(i?.index??0),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]",children:[(0,e.jsx)("div",{className:"media-scene-switcher-item-title flex-1",children:(0,e.jsx)(a.Heading,{as:"h6",size:2,html:t?.title})}),(0,e.jsx)("div",{className:"media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]",children:(0,e.jsx)(a.Heading,{as:"h6",size:2,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,p.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":s}),style:{transform:"translate3d(-100%, -2px, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:s?`progress-bar ${v}ms ease-out`:"none"}})]})},$=({data:t,configuration:i,theme:c})=>{const m=(0,o.useRef)(null),s=i?.isActive||!1,d=(0,D.useMediaQuery)({query:"(max-width: 768px)"});(0,f.useExposure)(m,{componentType:U,componentName:S,componentTitle:t?.title,position:(i?.index??0)+1});const x=d&&t?.mobVideoUrl?.url?t.mobVideoUrl.url:t?.videoUrl?.url,r=d&&t?.mobImageUrl?.url?t.mobImageUrl.url:t?.imageUrl?.url,u=r||t?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)("div",{ref:m,className:(0,p.cn)("media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden",{"aiui-dark":c==="dark"}),children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden",children:x?(0,e.jsx)("video",{src:x,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:u,className:"size-full object-cover"}):r?(0,e.jsx)(a.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:r,alt:t?.title||""}):null}),(0,e.jsxs)("div",{className:(0,p.cn)("media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]","text-[#6D6D6F]",{"bg-[#1D1D1F] text-white":s,"bg-[#EAEAEC] text-[1D1D1F]":s&&c==="light"}),children:[(0,e.jsx)("div",{className:"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1",children:(0,e.jsx)(a.Heading,{as:"h6",size:2,html:t?.title})}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]",children:(0,e.jsx)(a.Heading,{as:"h6",size:1,html:t?.tag})})]}),(0,e.jsx)("div",{className:(0,p.cn)("media-scene-switcher-progress h-[2px] w-full",{"media-scene-switcher-progress-active":s}),style:{transform:"translate3d(-100%, -2px, 0)",background:"linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)",animation:s?`progress-bar ${v}ms ease-out`:"none"}})]})},z=(0,o.forwardRef)(({className:t="",data:i,id:c,style:m},s)=>{const{title:d,subtitle:x,items:r=[],theme:u="light"}=i||{},[b,g]=(0,o.useState)(0),[C,P]=(0,o.useState)(0),N=(0,o.useRef)(null),h=(0,o.useRef)(0),E=(0,D.useMediaQuery)({query:"(max-width: 1023px)"});(0,o.useImperativeHandle)(s,()=>N.current),(0,f.useExposure)(N,{componentType:U,componentName:S,componentTitle:d}),(0,o.useEffect)(()=>{if(!(E||r.length===0))return h.current=window.setInterval(()=>{g(l=>(l+1)%r.length)},v),()=>{h.current&&window.clearInterval(h.current)}},[E,r.length]);const L=l=>{g(l),h.current&&window.clearInterval(h.current),h.current=window.setInterval(()=>{g(n=>(n+1)%r.length)},v)},y=r[b],G=y?.videoUrl?.url,K=y?.imageUrl?.url||y?.videoUrl?.thumbnailURL||"";return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("style",{children:`
|
|
2
2
|
@keyframes progress-bar {
|
|
3
3
|
from {
|
|
4
4
|
transform: translate3d(-100%, -2px, 0);
|
|
@@ -7,5 +7,5 @@
|
|
|
7
7
|
transform: translate3d(0, -2px, 0);
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
|
-
`}),(0,e.jsxs)("section",{id:c,ref:N,className:(0,
|
|
10
|
+
`}),(0,e.jsxs)("section",{id:c,ref:N,className:(0,p.cn)("media-scene-switcher text-info-primary w-full overflow-hidden",{"aiui-dark":u==="dark"},t),children:[(0,e.jsxs)("div",{className:"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden",children:[(0,e.jsx)("div",{className:"media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden",children:r.map((l,n)=>{const M=l?.videoUrl?.url,k=l?.imageUrl?.url,j=k||l?.videoUrl?.thumbnailURL||"";return(0,e.jsx)("div",{className:(0,p.cn)("media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden",{"inline-block":n===b}),children:M?(0,e.jsx)("video",{src:M,playsInline:!0,autoPlay:!0,loop:!0,muted:!0,poster:j,className:"size-full object-cover"}):k?(0,e.jsx)(a.Picture,{className:"size-full",imgClassName:"size-full object-cover",source:k,alt:l?.title||""}):null},l.id||n)})}),(0,e.jsxs)("div",{className:"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-header flex flex-col",children:[d&&(0,e.jsx)(a.Heading,{as:"h3",html:d,size:4,className:"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]"}),x&&(0,e.jsx)(a.Text,{as:"span",size:4,html:x,className:"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px] text-white"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-list flex flex-col gap-[16px]",children:r.map((l,n)=>(0,e.jsx)(q,{data:l,configuration:{index:n,isActive:n===b,onItemClick:L},theme:u},l.id||n))})]})]}),(0,e.jsxs)("div",{className:"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible",children:[(0,e.jsxs)("div",{className:"media-scene-switcher-mobile-header",children:[d&&(0,e.jsx)(a.Heading,{as:"h2",html:d,size:2,className:"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight"}),x&&(0,e.jsx)(a.Text,{as:"span",size:4,html:x,className:"media-scene-switcher-subtitle text-[14px] text-white"})]}),(0,e.jsx)("div",{className:"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible",children:(0,e.jsx)(w.Swiper,{onSlideChange:l=>P(l.realIndex),initialSlide:0,modules:[T.Autoplay],loop:r.length>1,autoplay:r.length>1?{delay:v,disableOnInteraction:!1}:!1,spaceBetween:12,slidesPerView:"auto",watchSlidesProgress:!0,className:"w-full !overflow-visible",children:r.map((l,n)=>(0,e.jsx)(w.SwiperSlide,{className:"!h-auto !w-[296px]",children:(0,e.jsx)($,{data:l,configuration:{index:n,isActive:n===C},theme:u})},l.id||n))})})]})]})]})});z.displayName="MediaSceneSwitcher";var O=(0,A.withLayout)(z);
|
|
11
11
|
//# sourceMappingURL=MediaSceneSwitcher.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaSceneSwitcher/MediaSceneSwitcher.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n data: MediaSceneSwitcherItem\n configuration?: {\n index: number\n isActive?: boolean\n onItemClick?: (index: number) => void\n }\n theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n >\n <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n <div className=\"media-scene-switcher-item-title flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]\">\n <Heading as=\"h6\" size={2} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n ref={ref}\n className=\"media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden\"\n >\n <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n {videoUrl ? (\n <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n ) : imageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={imageUrl}\n alt={data?.title || ''}\n />\n ) : null}\n </div>\n <div className=\"media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] bg-[#1D1D1F] p-[16px] text-white\">\n <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]\">\n <Heading as=\"h6\" size={1} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(\n ({ className = '', data, id, style }, ref) => {\n const { title, subtitle, items = [], theme = 'light' } = data || {}\n const [currentIndex, setCurrentIndex] = useState(0)\n const [activeIndex, setActiveIndex] = useState(0)\n const innerRef = useRef<HTMLDivElement>(null)\n const intervalRef = useRef<number>(0)\n const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // Auto-play functionality for desktop\n useEffect(() => {\n if (isMobile || items.length === 0) return\n\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [isMobile, items.length])\n\n const handleItemClick = (index: number) => {\n setCurrentIndex(index)\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n }\n\n const currentItem = items[currentIndex]\n const videoUrl = currentItem?.videoUrl?.url\n const imageUrl = currentItem?.imageUrl?.url\n const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n return (\n <>\n <style>{`\n @keyframes progress-bar {\n from {\n transform: translate3d(-100%, -2px, 0);\n }\n to {\n transform: translate3d(0, -2px, 0);\n }\n }\n `}</style>\n <section\n id={id}\n ref={innerRef}\n className={cn(\n 'media-scene-switcher text-info-primary w-full overflow-hidden',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* Desktop Layout */}\n <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n <div className=\"media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden\">\n {items.map((item, index) => {\n const itemVideoUrl = item?.videoUrl?.url\n const itemImageUrl = item?.imageUrl?.url\n const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n key={item.id || index}\n className={cn(\n 'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n {\n 'inline-block': index === currentIndex,\n }\n )}\n >\n {itemVideoUrl ? (\n <video\n src={itemVideoUrl}\n playsInline\n autoPlay\n loop\n muted\n poster={itemPosterUrl}\n className=\"size-full object-cover\"\n />\n ) : itemImageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={itemImageUrl}\n alt={item?.title || ''}\n />\n ) : null}\n </div>\n )\n })}\n </div>\n\n <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n <div className=\"media-scene-switcher-header flex flex-col\">\n {title && (\n <Heading\n as=\"h3\"\n html={title}\n size={4}\n className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n {items.map((item, index) => (\n <DesktopItem\n key={item.id || index}\n data={item}\n configuration={{\n index,\n isActive: index === currentIndex,\n onItemClick: handleItemClick,\n }}\n />\n ))}\n </div>\n </div>\n </div>\n\n {/* Mobile Layout */}\n <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n <div className=\"media-scene-switcher-mobile-header\">\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n size={2}\n className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n <Swiper\n onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n initialSlide={0}\n modules={[Autoplay]}\n loop={items.length > 1}\n autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n spaceBetween={12}\n slidesPerView=\"auto\"\n watchSlidesProgress={true}\n className=\"w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n <MobileItem\n data={item}\n configuration={{\n index,\n isActive: index === activeIndex,\n }}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </section>\n </>\n )\n }\n)\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoDM,IAAAI,EAAA,6BAnDNC,EAA6E,iBAC7EC,EAA8B,4BAC9BC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAuC,qCACvCC,EAAsB,iCACtBC,EAA4B,sCAE5BN,EAAoC,wBACpCO,EAAyB,0BACzBC,EAAO,sBAGP,MAAMC,EAAgB,QAChBC,EAAgB,uBAChBC,EAAgB,IAYhBC,EAAc,CAAC,CAAE,KAAAC,EAAM,cAAAC,EAAe,MAAAC,CAAM,IAAiB,CACjE,MAAMC,KAAM,UAAuB,IAAI,EACjCC,EAAWH,GAAe,UAAY,GAE5C,wBAAYE,EAAK,CACf,cAAAP,EACA,cAAAC,EACA,eAAgBG,GAAM,MACtB,UAAWC,GAAe,OAAS,GAAK,CAC1C,CAAC,KAGC,QAAC,OACC,IAAKE,EACL,aAAW,MACT,yFACA,iBACA,CACE,0BAA2BC,EAC3B,6BAA8BA,GAAYF,IAAU,OACtD,CACF,EACA,QAAS,IAAMD,GAAe,cAAcA,GAAe,OAAS,CAAC,EAErE,qBAAC,OAAI,UAAU,uJACb,oBAAC,OAAI,UAAU,yCACb,mBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMD,GAAM,MAAO,EAC/C,KACA,OAAC,OAAI,UAAU,gFACb,mBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAMA,GAAM,IAAK,EAC7C,GACF,KACA,OAAC,OACC,aAAW,MAAG,+CAAgD,CAC5D,uCAAwCI,CAC1C,CAAC,EACD,MAAO,CACL,UAAW,8BACX,WAAY,mDACZ,UAAWA,EAAW,gBAAgBN,CAAa,cAAgB,MACrE,EACF,GACF,CAEJ,EAEMO,EAAa,CAAC,CAAE,KAAAL,EAAM,cAAAC,EAAe,MAAAC,CAAM,IAAiB,CAChE,MAAMC,KAAM,UAAuB,IAAI,EACjCC,EAAWH,GAAe,UAAY,GACtCK,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,KAE9D,eAAYH,EAAK,CACf,cAAAP,EACA,cAAAC,EACA,eAAgBG,GAAM,MACtB,UAAWC,GAAe,OAAS,GAAK,CAC1C,CAAC,EAED,MAAMM,EAAWD,GAAYN,GAAM,aAAa,IAAMA,EAAK,YAAY,IAAMA,GAAM,UAAU,IACvFQ,EAAWF,GAAYN,GAAM,aAAa,IAAMA,EAAK,YAAY,IAAMA,GAAM,UAAU,IACvFS,EAAYD,GAAYR,GAAM,UAAU,cAAgB,GAE9D,SACE,QAAC,OACC,IAAKG,EACL,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Heading, Text, Picture } from '../../components/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { MediaSceneSwitcherProps, MediaSceneSwitcherItem } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Autoplay } from 'swiper/modules'\nimport 'swiper/css'\nimport type { Theme } from '../../types/props.js'\n\nconst componentType = 'media'\nconst componentName = 'media_scene_switcher'\nconst INTERVAL_TIME = 3000\n\ninterface ItemProps {\n data: MediaSceneSwitcherItem\n configuration?: {\n index: number\n isActive?: boolean\n onItemClick?: (index: number) => void\n }\n theme?: Theme\n}\n\nconst DesktopItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'media-scene-switcher-item rounded-box cursor-pointer overflow-hidden transition-colors',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n onClick={() => configuration?.onItemClick?.(configuration?.index ?? 0)}\n >\n <div className=\"media-scene-switcher-item-content laptop:gap-[32px] laptop:p-[12px] desktop:gap-[48px] desktop:p-[24px] flex items-center justify-between gap-[24px]\">\n <div className=\"media-scene-switcher-item-title flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-item-badge rounded-btn border-[1.6px] px-[18px] py-[7px]\">\n <Heading as=\"h6\" size={2} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MobileItem = ({ data, configuration, theme }: ItemProps) => {\n const ref = useRef<HTMLDivElement>(null)\n const isActive = configuration?.isActive || false\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n position: (configuration?.index ?? 0) + 1,\n })\n\n const videoUrl = isMobile && data?.mobVideoUrl?.url ? data.mobVideoUrl.url : data?.videoUrl?.url\n const imageUrl = isMobile && data?.mobImageUrl?.url ? data.mobImageUrl.url : data?.imageUrl?.url\n const posterUrl = imageUrl || data?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n ref={ref}\n className={cn('media-scene-switcher-mobile-item rounded-box flex h-[360px] w-[296px] flex-col overflow-hidden', {\n 'aiui-dark': theme === 'dark',\n })}\n >\n <div className=\"media-scene-switcher-mobile-media relative aspect-[554/480] w-full overflow-hidden\">\n {videoUrl ? (\n <video src={videoUrl} playsInline autoPlay loop muted poster={posterUrl} className=\"size-full object-cover\" />\n ) : imageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={imageUrl}\n alt={data?.title || ''}\n />\n ) : null}\n </div>\n <div\n className={cn(\n 'media-scene-switcher-mobile-bottom flex items-start justify-between gap-[8px] p-[16px]',\n 'text-[#6D6D6F]',\n {\n 'bg-[#1D1D1F] text-white': isActive,\n 'bg-[#EAEAEC] text-[1D1D1F]': isActive && theme === 'light',\n }\n )}\n >\n <div className=\"media-scene-switcher-mobile-title line-clamp-3 h-[72px] flex-1\">\n <Heading as=\"h6\" size={2} html={data?.title} />\n </div>\n <div className=\"media-scene-switcher-mobile-badge rounded-btn shrink-0 border-[1.6px] px-[12px] py-[5px]\">\n <Heading as=\"h6\" size={1} html={data?.tag} />\n </div>\n </div>\n <div\n className={cn('media-scene-switcher-progress h-[2px] w-full', {\n 'media-scene-switcher-progress-active': isActive,\n })}\n style={{\n transform: 'translate3d(-100%, -2px, 0)',\n background: 'linear-gradient(90deg, #3ad1ff 0%, #008cd6 100%)',\n animation: isActive ? `progress-bar ${INTERVAL_TIME}ms ease-out` : 'none',\n }}\n />\n </div>\n )\n}\n\nconst MediaSceneSwitcher = forwardRef<HTMLDivElement, MediaSceneSwitcherProps>(\n ({ className = '', data, id, style }, ref) => {\n const { title, subtitle, items = [], theme = 'light' } = data || {}\n const [currentIndex, setCurrentIndex] = useState(0)\n const [activeIndex, setActiveIndex] = useState(0)\n const innerRef = useRef<HTMLDivElement>(null)\n const intervalRef = useRef<number>(0)\n const isMobile = useMediaQuery({ query: '(max-width: 1023px)' })\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n // Auto-play functionality for desktop\n useEffect(() => {\n if (isMobile || items.length === 0) return\n\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n\n return () => {\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n }\n }, [isMobile, items.length])\n\n const handleItemClick = (index: number) => {\n setCurrentIndex(index)\n if (intervalRef.current) {\n window.clearInterval(intervalRef.current)\n }\n intervalRef.current = window.setInterval(() => {\n setCurrentIndex(prev => (prev + 1) % items.length)\n }, INTERVAL_TIME)\n }\n\n const currentItem = items[currentIndex]\n const videoUrl = currentItem?.videoUrl?.url\n const imageUrl = currentItem?.imageUrl?.url\n const posterUrl = imageUrl || currentItem?.videoUrl?.thumbnailURL || ''\n\n return (\n <>\n <style>{`\n @keyframes progress-bar {\n from {\n transform: translate3d(-100%, -2px, 0);\n }\n to {\n transform: translate3d(0, -2px, 0);\n }\n }\n `}</style>\n <section\n id={id}\n ref={innerRef}\n className={cn(\n 'media-scene-switcher text-info-primary w-full overflow-hidden',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n {/* Desktop Layout */}\n <div className=\"media-scene-switcher-desktop laptop:gap-[24px] lg-desktop:gap-[40px] laptop:flex hidden w-full items-stretch gap-[20px] overflow-hidden\">\n <div className=\"media-scene-switcher-preview rounded-box laptop:flex-1 relative aspect-[824/640] max-w-[824px] shrink-0 overflow-hidden\">\n {items.map((item, index) => {\n const itemVideoUrl = item?.videoUrl?.url\n const itemImageUrl = item?.imageUrl?.url\n const itemPosterUrl = itemImageUrl || item?.videoUrl?.thumbnailURL || ''\n\n return (\n <div\n key={item.id || index}\n className={cn(\n 'media-scene-switcher-media rounded-box absolute inset-0 hidden size-full overflow-hidden',\n {\n 'inline-block': index === currentIndex,\n }\n )}\n >\n {itemVideoUrl ? (\n <video\n src={itemVideoUrl}\n playsInline\n autoPlay\n loop\n muted\n poster={itemPosterUrl}\n className=\"size-full object-cover\"\n />\n ) : itemImageUrl ? (\n <Picture\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n source={itemImageUrl}\n alt={item?.title || ''}\n />\n ) : null}\n </div>\n )\n })}\n </div>\n\n <div className=\"media-scene-switcher-sidebar laptop:flex-1 flex shrink-0 flex-col justify-between\">\n <div className=\"media-scene-switcher-header flex flex-col\">\n {title && (\n <Heading\n as=\"h3\"\n html={title}\n size={4}\n className=\"media-scene-switcher-title text-info-primary tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-none text-[#00BEFA]\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] relative -top-2 mt-3 text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-list flex flex-col gap-[16px]\">\n {items.map((item, index) => (\n <DesktopItem\n key={item.id || index}\n data={item}\n configuration={{\n index,\n isActive: index === currentIndex,\n onItemClick: handleItemClick,\n }}\n theme={theme}\n />\n ))}\n </div>\n </div>\n </div>\n\n {/* Mobile Layout */}\n <div className=\"media-scene-switcher-mobile laptop:hidden flex flex-col overflow-visible\">\n <div className=\"media-scene-switcher-mobile-header\">\n {title && (\n <Heading\n as=\"h2\"\n html={title}\n size={2}\n className=\"media-scene-switcher-title tablet:!text-[40px] desktop:!text-[56px] lg-desktop:!text-[64px] text-[40px] leading-tight\"\n />\n )}\n {subtitle && (\n <Text\n as=\"span\"\n size={4}\n html={subtitle}\n className=\"media-scene-switcher-subtitle text-[14px] text-white\"\n />\n )}\n </div>\n\n <div className=\"media-scene-switcher-mobile-swiper mt-[24px] overflow-visible\">\n <Swiper\n onSlideChange={swiper => setActiveIndex(swiper.realIndex)}\n initialSlide={0}\n modules={[Autoplay]}\n loop={items.length > 1}\n autoplay={items.length > 1 ? { delay: INTERVAL_TIME, disableOnInteraction: false } : false}\n spaceBetween={12}\n slidesPerView=\"auto\"\n watchSlidesProgress={true}\n className=\"w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide key={item.id || index} className=\"!h-auto !w-[296px]\">\n <MobileItem\n data={item}\n configuration={{\n index,\n isActive: index === activeIndex,\n }}\n theme={theme}\n />\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </div>\n </section>\n </>\n )\n }\n)\n\nMediaSceneSwitcher.displayName = 'MediaSceneSwitcher'\n\nexport default withLayout(MediaSceneSwitcher)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MediaSceneSwitcher_exports", "__export", "MediaSceneSwitcher_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_utils", "import_Styles", "import_components", "import_SwiperBox", "import_useExposure", "import_modules", "import_css", "componentType", "componentName", "INTERVAL_TIME", "DesktopItem", "data", "configuration", "theme", "ref", "isActive", "MobileItem", "isMobile", "videoUrl", "imageUrl", "posterUrl", "MediaSceneSwitcher", "className", "id", "style", "title", "subtitle", "items", "currentIndex", "setCurrentIndex", "activeIndex", "setActiveIndex", "innerRef", "intervalRef", "prev", "handleItemClick", "index", "currentItem", "item", "itemVideoUrl", "itemImageUrl", "itemPosterUrl", "swiper"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var k=Object.create;var c=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var w=(t,e)=>{for(var r in e)c(t,r,{get:e[r],enumerable:!0})},u=(t,e,r,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of H(e))!P.call(t,s)&&s!==r&&c(t,s,{get:()=>e[s],enumerable:!(l=g(e,s))||l.enumerable});return t};var y=(t,e,r)=>(r=t!=null?k(v(t)):{},u(e||!t||!t.__esModule?c(r,"default",{value:t,enumerable:!0}):r,t)),T=t=>u(c({},"__esModule",{value:!0}),t);var R={};w(R,{default:()=>E});module.exports=T(R);var o=require("react/jsx-runtime"),p=y(require("react")),a=require("../../components/index.js"),d=require("../../helpers/utils.js"),h=require("../../shared/Styles.js"),f=require("../../hooks/useExposure.js");const L="image",D="product_hero",n=p.default.forwardRef(({data:t,className:e},r)=>{const{title:l,subtitle:s,ctaText:m,poster:b,mobPoster:x,ctaLink:_,theme:N="light"}=t,i=(0,p.useRef)(null);return(0,f.useExposure)(i,{componentType:L,componentName:D,componentTitle:l,componentDescription:s}),(0,p.useImperativeHandle)(r,()=>i.current),(0,o.jsxs)("section",{ref:i,"data-ui-component-id":"ProductHero",className:(0,d.cn)("product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]",{"aiui-dark":N==="dark"},e),children:[(0,o.jsxs)("div",{className:"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]",children:[(0,o.jsxs)("div",{className:"product-hero__text",children:[(0,o.jsx)(a.Heading,{as:"h3",size:4,html:l,className:"product-hero__title"}),(0,o.jsx)(a.Heading,{as:"h4",size:2,html:s,className:"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden"}),(0,o.jsx)(a.Text,{as:"p",size:2,html:s,className:"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block"})]}),m&&(0,o.jsx)("a",{href:_,className:"product-hero__cta-link",children:(0,o.jsx)(a.Button,{className:"product-hero__cta-button w-fit",children:m})})]}),(0,o.jsx)(a.Picture,{className:"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink",source:`${b?.url}, ${x?.url} 768`,imgClassName:"h-full object-cover"})]})});n.displayName="ProductHero";var E=(0,h.withLayout)(n);
|
|
2
2
|
//# sourceMappingURL=ProductHero.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ProductHero/ProductHero.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ProductHero\"\n className={cn(\n 'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n <div className=\"product-hero__text\">\n <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n <Heading\n as={'h4'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n />\n <Text\n as={'p'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n />\n </div>\n {ctaText && (\n <a href={ctaLink} className=\"product-hero__cta-link\">\n <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n </a>\n )}\n </div>\n <Picture\n className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n source={`${poster?.url}, ${mobPoster?.url} 768`}\n />\n </section>\n )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCQ,IAAAI,EAAA,6BArCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAE5EU,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMQ,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,sJACA,CACE,YAAaD,IAAU,MACzB,EACAR,CACF,EAEA,qBAAC,OAAI,UAAU,0GACb,qBAAC,OAAI,UAAU,qBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,sBAAsB,KACzE,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yHACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,wHACZ,GACF,EACCC,MACC,OAAC,KAAE,KAAMG,EAAS,UAAU,yBAC1B,mBAAC,UAAO,UAAU,iCAAkC,SAAAH,EAAQ,EAC9D,GAEJ,KACA,OAAC,WACC,UAAU,wHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Heading, Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ProductHeroProps } from './types.js'\n\nconst componentType = 'image'\nconst componentName = 'product_hero'\n\nconst ProductHero = React.forwardRef<HTMLDivElement, ProductHeroProps>(({ data, className }, ref) => {\n const { title, subtitle, ctaText, poster, mobPoster, ctaLink, theme = 'light' } = data\n\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ProductHero\"\n className={cn(\n 'product-hero text-info-primary tablet:flex-row tablet:gap-[16px] lg-desktop:gap-[64px] flex w-full flex-col items-center justify-between gap-[32px]',\n {\n 'aiui-dark': theme === 'dark',\n },\n className\n )}\n >\n <div className=\"product-hero__content tablet:basis-[42%] laptop:basis-[36%] flex w-full flex-col items-start gap-[24px]\">\n <div className=\"product-hero__text\">\n <Heading as={'h3'} size={4} html={title} className=\"product-hero__title\" />\n <Heading\n as={'h4'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--desktop laptop:mt-[12px] laptop:block desktop:mt-[16px] mt-[4px] hidden\"\n />\n <Text\n as={'p'}\n size={2}\n html={subtitle}\n className=\"product-hero__subtitle product-hero__subtitle--mobile laptop:mt-[12px] laptop:hidden desktop:mt-[16px] mt-[4px] block\"\n />\n </div>\n {ctaText && (\n <a href={ctaLink} className=\"product-hero__cta-link\">\n <Button className=\"product-hero__cta-button w-fit\">{ctaText}</Button>\n </a>\n )}\n </div>\n <Picture\n className=\"product-hero__image tablet:aspect-[824/640] tablet:basis-[58%] laptop:basis-[64%] rounded-box aspect-[358/360] shrink\"\n source={`${poster?.url}, ${mobPoster?.url} 768`}\n imgClassName=\"h-full object-cover\"\n />\n </section>\n )\n})\n\nProductHero.displayName = 'ProductHero'\n\nexport default withLayout(ProductHero)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCQ,IAAAI,EAAA,6BArCRC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAG5B,MAAMC,EAAgB,QAChBC,EAAgB,eAEhBC,EAAc,EAAAC,QAAM,WAA6C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACnG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,EAAS,MAAAC,EAAQ,OAAQ,EAAIT,EAE5EU,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAd,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMQ,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,cACrB,aAAW,MACT,sJACA,CACE,YAAaD,IAAU,MACzB,EACAR,CACF,EAEA,qBAAC,OAAI,UAAU,0GACb,qBAAC,OAAI,UAAU,qBACb,oBAAC,WAAQ,GAAI,KAAM,KAAM,EAAG,KAAME,EAAO,UAAU,sBAAsB,KACzE,OAAC,WACC,GAAI,KACJ,KAAM,EACN,KAAMC,EACN,UAAU,yHACZ,KACA,OAAC,QACC,GAAI,IACJ,KAAM,EACN,KAAMA,EACN,UAAU,wHACZ,GACF,EACCC,MACC,OAAC,KAAE,KAAMG,EAAS,UAAU,yBAC1B,mBAAC,UAAO,UAAU,iCAAkC,SAAAH,EAAQ,EAC9D,GAEJ,KACA,OAAC,WACC,UAAU,wHACV,OAAQ,GAAGC,GAAQ,GAAG,KAAKC,GAAW,GAAG,OACzC,aAAa,sBACf,GACF,CAEJ,CAAC,EAEDT,EAAY,YAAc,cAE1B,IAAOV,KAAQ,cAAWU,CAAW",
|
|
6
6
|
"names": ["ProductHero_exports", "__export", "ProductHero_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "componentType", "componentName", "ProductHero", "React", "data", "className", "ref", "title", "subtitle", "ctaText", "poster", "mobPoster", "ctaLink", "theme", "boxRef"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var k=Object.create;var n=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var C=(o,r)=>{for(var a in r)n(o,a,{get:r[a],enumerable:!0})},v=(o,r,a,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of y(r))!T.call(o,s)&&s!==a&&n(o,s,{get:()=>r[s],enumerable:!(d=N(r,s))||d.enumerable});return o};var L=(o,r,a)=>(a=o!=null?k(S(o)):{},v(r||!o||!o.__esModule?n(a,"default",{value:o,enumerable:!0}):a,o)),E=o=>v(n({},"__esModule",{value:!0}),o);var R={};C(R,{default:()=>B});module.exports=E(R);var e=require("react/jsx-runtime"),i=L(require("react")),l=require("../../components/index.js"),p=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),_=require("../../hooks/useExposure.js"),c=require("swiper/react"),u=require("swiper/modules"),M=require("swiper/css"),U=require("swiper/css/navigation"),I=require("swiper/css/pagination"),O=require("swiper/css/effect-coverflow");const z="carousel",D="three_d_carousel",j=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),P=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),x=i.default.forwardRef(({data:o,className:r},a)=>{const{title:d,items:s=[]}=o,g=s.length<4?[...s,...s]:s,h=(0,i.useRef)(null),f=(0,i.useRef)(null);return(0,_.useExposure)(f,{componentType:z,componentName:D,componentTitle:d}),(0,i.useImperativeHandle)(a,()=>f.current),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"ThreeDCarousel",className:(0,p.cn)("three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white",r),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:d,className:"three-d-carousel__title laptop:text-center text-left"}),(0,e.jsxs)("div",{className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4",children:[(0,e.jsx)(c.Swiper,{onSwiper:t=>h.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[u.EffectCoverflow,u.Navigation],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:
|
|
1
|
+
"use strict";"use client";var k=Object.create;var n=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,T=Object.prototype.hasOwnProperty;var C=(o,r)=>{for(var a in r)n(o,a,{get:r[a],enumerable:!0})},v=(o,r,a,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let s of y(r))!T.call(o,s)&&s!==a&&n(o,s,{get:()=>r[s],enumerable:!(d=N(r,s))||d.enumerable});return o};var L=(o,r,a)=>(a=o!=null?k(S(o)):{},v(r||!o||!o.__esModule?n(a,"default",{value:o,enumerable:!0}):a,o)),E=o=>v(n({},"__esModule",{value:!0}),o);var R={};C(R,{default:()=>B});module.exports=E(R);var e=require("react/jsx-runtime"),i=L(require("react")),l=require("../../components/index.js"),p=require("../../helpers/utils.js"),b=require("../../shared/Styles.js"),_=require("../../hooks/useExposure.js"),c=require("swiper/react"),u=require("swiper/modules"),M=require("swiper/css"),U=require("swiper/css/navigation"),I=require("swiper/css/pagination"),O=require("swiper/css/effect-coverflow");const z="carousel",D="three_d_carousel",j=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M32 20L24 28L32 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),P=()=>(0,e.jsxs)("svg",{width:"56",height:"56",viewBox:"0 0 56 56",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]",children:[(0,e.jsx)("circle",{cx:"28",cy:"28",r:"28",fill:"currentColor",fillOpacity:"0.2"}),(0,e.jsx)("path",{d:"M24 20L32 28L24 36",stroke:"white",strokeWidth:"2.66667",strokeLinecap:"round",strokeLinejoin:"round"})]}),x=i.default.forwardRef(({data:o,className:r},a)=>{const{title:d,items:s=[]}=o,g=s.length<4?[...s,...s]:s,h=(0,i.useRef)(null),f=(0,i.useRef)(null);return(0,_.useExposure)(f,{componentType:z,componentName:D,componentTitle:d}),(0,i.useImperativeHandle)(a,()=>f.current),(0,e.jsxs)("section",{ref:f,"data-ui-component-id":"ThreeDCarousel",className:(0,p.cn)("three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white",r),children:[(0,e.jsx)(l.Heading,{as:"h1",size:4,html:d,className:"three-d-carousel__title laptop:text-center text-left"}),(0,e.jsxs)("div",{className:"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4",children:[(0,e.jsx)(c.Swiper,{onSwiper:t=>h.current=t,centeredSlides:!0,initialSlide:0,loop:!0,slidesPerView:"auto",spaceBetween:0,grabCursor:!0,modules:[u.EffectCoverflow,u.Navigation],slideToClickedSlide:!0,className:"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible",effect:"coverflow",coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0},breakpoints:{1921:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1490:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1441:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},1025:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}},769:{coverflowEffect:{rotate:0,stretch:"70%",depth:300,slideShadows:!0}}},children:g.map((t,m)=>(0,e.jsx)(c.SwiperSlide,{className:"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100",children:({isActive:w})=>(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.Picture,{source:t.imageUrl?.url||"",alt:t.imageUrl?.alt||t.title,className:(0,p.cn)("three-d-carousel__image rounded-box mx-auto h-full overflow-hidden shadow-lg"),imgClassName:"h-full object-cover",style:{filter:w?"":"brightness(50%) contrast(120%)"}}),(0,e.jsxs)("div",{className:(0,p.cn)("three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",{"aiui-dark":t.theme==="dark","opacity-0":!w}),children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-description text-[14px]"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-link ",children:(0,e.jsx)(l.Button,{size:"base",variant:"secondary",className:"three-d-carousel__image-button desktop:mt-6 mt-4",children:t.buttonText})})]})]})},m))}),(0,e.jsxs)("div",{className:"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between",children:[(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--prev",onClick:()=>h.current?.slidePrev(),"aria-label":"Previous slide",children:(0,e.jsx)(j,{})}),(0,e.jsx)("button",{className:"three-d-carousel__nav-button three-d-carousel__nav-button--next",onClick:()=>h.current?.slideNext(),"aria-label":"Next slide",children:(0,e.jsx)(P,{})})]})]}),(0,e.jsx)("div",{className:"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible",children:(0,e.jsx)(c.Swiper,{loop:!0,slidesPerView:"auto",spaceBetween:12,grabCursor:!0,className:"three-d-carousel__swiper-mobile relative w-full !overflow-visible",children:s.map((t,m)=>(0,e.jsxs)(c.SwiperSlide,{className:"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden",children:[(0,e.jsx)(l.Picture,{source:t.mobImageUrl?.url||t.imageUrl?.url||"",alt:t.mobImageUrl?.alt||t.title,className:"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden shadow-lg",imgClassName:"h-full object-cover"}),(0,e.jsxs)("div",{className:"three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]",children:[(0,e.jsx)(l.Heading,{as:"h2",size:2,html:t.title}),(0,e.jsx)(l.Text,{as:"p",size:4,html:t.description,className:"three-d-carousel__image-mobile-description text-[14px] text-white"}),t.buttonText&&(0,e.jsx)("a",{href:t.buttonLink||"",className:"three-d-carousel__image-mobile-link ",children:(0,e.jsx)("button",{className:"three-d-carousel__image-mobile-button rounded-btn mt-3 border border-white px-[16px] py-[8px] text-[14px] font-semibold text-white transition-all duration-300 ease-in-out hover:bg-white hover:text-black active:scale-95",children:t.buttonText})})]})]},m))})})]})});x.displayName="ThreeDCarousel";var B=(0,b.withLayout)(x);
|
|
2
2
|
//# sourceMappingURL=ThreeDCarousel.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ThreeDCarousel/ThreeDCarousel.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n const { title, items = [] } = data\n const cloneItems = items.length < 4 ? [...items, ...items] : items\n const swiperRef = useRef<SwiperType | null>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ThreeDCarousel\"\n className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n {/* Desktop carousel with 3D effect */}\n <div className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4\">\n <Swiper\n onSwiper={swiper => (swiperRef.current = swiper)}\n centeredSlides={true}\n initialSlide={0}\n loop\n slidesPerView={'auto'}\n // loopAdditionalSlides={2}\n spaceBetween={0}\n grabCursor\n modules={[EffectCoverflow, Navigation]}\n slideToClickedSlide\n className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n effect=\"coverflow\"\n coverflowEffect={{\n rotate: 0,\n stretch:
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoBE,IAAAI,EAAA,6BAnBFC,EAAmD,oBACnDC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAE5BJ,EAAoC,wBACpCK,EAA4C,0BAG5CC,EAAO,sBACPC,EAAO,iCACPC,EAAO,iCACPC,EAAO,uCAEP,MAAMC,EAAgB,WAChBC,EAAgB,mBAEhBC,EAAc,OAClB,QAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,8FAEV,oBAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAK,eAAe,YAAY,MAAM,KACrE,OAAC,QAAK,EAAE,qBAAqB,OAAO,QAAQ,YAAY,UAAU,cAAc,QAAQ,eAAe,QAAQ,GACjH,EAGIC,EAAe,OACnB,QAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,MAAM,6BACN,UAAU,8FAEV,oBAAC,UAAO,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,KAAK,eAAe,YAAY,MAAM,KACrE,OAAC,QAAK,EAAE,qBAAqB,OAAO,QAAQ,YAAY,UAAU,cAAc,QAAQ,eAAe,QAAQ,GACjH,EAGIC,EAAiB,EAAAC,QAAM,WAAgD,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACzG,KAAM,CAAE,MAAAC,EAAO,MAAAC,EAAQ,CAAC,CAAE,EAAIJ,EACxBK,EAAaD,EAAM,OAAS,EAAI,CAAC,GAAGA,EAAO,GAAGA,CAAK,EAAIA,EACvDE,KAAY,UAA0B,IAAI,EAC1CC,KAAS,UAAuB,IAAI,EAE1C,wBAAYA,EAAQ,CAClB,cAAAb,EACA,cAAAC,EACA,eAAgBQ,CAClB,CAAC,KAED,uBAAoBD,EAAK,IAAMK,EAAO,OAAyB,KAG7D,QAAC,WACC,IAAKA,EACL,uBAAqB,iBACrB,aAAW,MAAG,6EAA8EN,CAAS,EAErG,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,KAAME,EAAO,UAAU,uDAAuD,KAGxG,QAAC,OAAI,UAAU,uFACb,oBAAC,UACC,SAAUK,GAAWF,EAAU,QAAUE,EACzC,eAAgB,GAChB,aAAc,EACd,KAAI,GACJ,cAAe,OAEf,aAAc,EACd,WAAU,GACV,QAAS,CAAC,kBAAiB,YAAU,EACrC,oBAAmB,GACnB,UAAU,mFACV,OAAO,YACP,gBAAiB,CACf,OAAQ,EACR,QAAS,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useRef, useImperativeHandle } from 'react'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { ThreeDCarouselProps } from './types.js'\nimport { Swiper, SwiperSlide } from 'swiper/react'\nimport { Navigation, EffectCoverflow } from 'swiper/modules'\nimport type { Swiper as SwiperType } from 'swiper'\n\nimport 'swiper/css'\nimport 'swiper/css/navigation'\nimport 'swiper/css/pagination'\nimport 'swiper/css/effect-coverflow'\n\nconst componentType = 'carousel'\nconst componentName = 'three_d_carousel'\n\nconst ChevronLeft = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M32 20L24 28L32 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ChevronRight = () => (\n <svg\n width=\"56\"\n height=\"56\"\n viewBox=\"0 0 56 56\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n className=\"three-d-carousel__nav-icon lg-desktop:scale-100 scale-[70%] text-white hover:text-[#1f1f1f]\"\n >\n <circle cx=\"28\" cy=\"28\" r=\"28\" fill=\"currentColor\" fillOpacity=\"0.2\" />\n <path d=\"M24 20L32 28L24 36\" stroke=\"white\" strokeWidth=\"2.66667\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n)\n\nconst ThreeDCarousel = React.forwardRef<HTMLDivElement, ThreeDCarouselProps>(({ data, className }, ref) => {\n const { title, items = [] } = data\n const cloneItems = items.length < 4 ? [...items, ...items] : items\n const swiperRef = useRef<SwiperType | null>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n return (\n <section\n ref={boxRef}\n data-ui-component-id=\"ThreeDCarousel\"\n className={cn('three-d-carousel laptop:overflow-hidden w-full overflow-visible text-white', className)}\n >\n <Heading as=\"h1\" size={4} html={title} className=\"three-d-carousel__title laptop:text-center text-left\" />\n\n {/* Desktop carousel with 3D effect */}\n <div className=\"three-d-carousel__desktop laptop:block relative mx-auto mt-[24px] hidden w-full px-4\">\n <Swiper\n onSwiper={swiper => (swiperRef.current = swiper)}\n centeredSlides={true}\n initialSlide={0}\n loop\n slidesPerView={'auto'}\n // loopAdditionalSlides={2}\n spaceBetween={0}\n grabCursor\n modules={[EffectCoverflow, Navigation]}\n slideToClickedSlide\n className=\"three-d-carousel__swiper rounded-box relative aspect-[1386/502] overflow-visible\"\n effect=\"coverflow\"\n coverflowEffect={{\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n }}\n breakpoints={{\n 1921: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1490: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1441: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 1025: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n 769: {\n coverflowEffect: {\n rotate: 0,\n stretch: '70%',\n depth: 300,\n // modifier: 1,\n slideShadows: true,\n },\n },\n }}\n >\n {cloneItems.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide relative !w-[62.23%] cursor-grab overflow-hidden opacity-0 [.swiper-slide-active&]:opacity-100 [.swiper-slide-next&]:opacity-100 [.swiper-slide-prev&]:opacity-100\"\n >\n {({ isActive }) => (\n <>\n <Picture\n source={item.imageUrl?.url || ''}\n alt={item.imageUrl?.alt || item.title}\n className={cn('three-d-carousel__image rounded-box mx-auto h-full overflow-hidden shadow-lg')}\n imgClassName=\"h-full object-cover\"\n style={{\n filter: isActive ? '' : 'brightness(50%) contrast(120%)',\n }}\n />\n <div\n className={cn(\n 'three-d-carousel__image-content tablet:p-[24px] desktop:p-[32px] text-info-primary absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]',\n {\n 'aiui-dark': item.theme === 'dark',\n 'opacity-0': !isActive,\n }\n )}\n >\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-description text-[14px]\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-link \">\n <Button\n size=\"base\"\n variant=\"secondary\"\n className=\"three-d-carousel__image-button desktop:mt-6 mt-4\"\n >\n {item.buttonText}\n </Button>\n </a>\n )}\n </div>\n </>\n )}\n </SwiperSlide>\n ))}\n </Swiper>\n <div className=\"three-d-carousel__nav-controls laptop:px-[64px] desktop:px-[140px] lg-desktop:px-[200px] absolute left-1/2 top-1/2 z-20 flex w-full -translate-x-1/2 -translate-y-1/2 justify-between\">\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--prev\"\n onClick={() => swiperRef.current?.slidePrev()}\n aria-label=\"Previous slide\"\n >\n <ChevronLeft />\n </button>\n <button\n className=\"three-d-carousel__nav-button three-d-carousel__nav-button--next\"\n onClick={() => swiperRef.current?.slideNext()}\n aria-label=\"Next slide\"\n >\n <ChevronRight />\n </button>\n </div>\n </div>\n\n {/* Mobile carousel */}\n <div className=\"three-d-carousel__mobile laptop:hidden mt-[24px] block w-full overflow-visible\">\n <Swiper\n loop={true}\n slidesPerView={'auto'}\n spaceBetween={12}\n grabCursor\n className=\"three-d-carousel__swiper-mobile relative w-full !overflow-visible\"\n >\n {items.map((item, index) => (\n <SwiperSlide\n key={index}\n className=\"three-d-carousel__slide-mobile relative !h-[360px] !w-[296px] cursor-grab overflow-hidden\"\n >\n <Picture\n source={item.mobImageUrl?.url || item.imageUrl?.url || ''}\n alt={item.mobImageUrl?.alt || item.title}\n className=\"three-d-carousel__image-mobile rounded-box mx-auto h-full overflow-hidden shadow-lg\"\n imgClassName=\"h-full object-cover\"\n />\n <div className=\"three-d-carousel__image-mobile-content tablet:p-[24px] desktop:p-[32px] absolute left-0 top-0 flex size-full flex-col justify-end gap-1 p-[16px]\">\n <Heading as=\"h2\" size={2} html={item.title} />\n <Text\n as=\"p\"\n size={4}\n html={item.description}\n className=\"three-d-carousel__image-mobile-description text-[14px] text-white\"\n />\n {item.buttonText && (\n <a href={item.buttonLink || ''} className=\"three-d-carousel__image-mobile-link \">\n <button className=\"three-d-carousel__image-mobile-button rounded-btn mt-3 border border-white px-[16px] py-[8px] text-[14px] font-semibold text-white transition-all duration-300 ease-in-out hover:bg-white hover:text-black active:scale-95\">\n {item.buttonText}\n </button>\n </a>\n )}\n </div>\n </SwiperSlide>\n ))}\n </Swiper>\n </div>\n </section>\n )\n})\n\nThreeDCarousel.displayName = 'ThreeDCarousel'\n\nexport default withLayout(ThreeDCarousel)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ThreeDCarousel_exports", "__export", "ThreeDCarousel_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_utils", "import_Styles", "import_useExposure", "import_modules", "import_css", "import_navigation", "import_pagination", "import_effect_coverflow", "componentType", "componentName", "ChevronLeft", "ChevronRight", "ThreeDCarousel", "React", "data", "className", "ref", "title", "items", "cloneItems", "swiperRef", "boxRef", "swiper", "item", "index", "isActive"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as x}from"react/jsx-runtime";import ue,{useImperativeHandle as fe,useRef as f,useState as v,useEffect as X}from"react";import{Heading as b,Picture as M,Text as z,Button as ve}from"../../components/index.js";import{cn as s}from"../../helpers/utils.js";import{withLayout as he}from"../../shared/Styles.js";import{useExposure as ge}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as _e}from"../../hooks/useIntersectionObserver.js";import{motion as Y,AnimatePresence as Z}from"framer-motion";import{Cols as w}from"./types.js";const be="image",we="image_with_text",ee=ue.forwardRef(({data:te,className:ie},ae)=>{const{title:P,subtitle:S,desc:y,descIcon:D,image:h,padImage:E,mobileImage:H,theme:oe="dark",items:j=[],layout:le="left",mediaType:se="image",datalist:l=[],video:W,padVideo:R,mobVideo:A,cols:k=w.One,button:g,textAlign:o="left"}=te,d=le,L=f(null),N=f(null),T=f(null),I=f(null),q=f(null),[n,re]=v(0),$=f([]),[B,me]=v({left:0,width:0}),[u,C]=v(""),[F,O]=v(""),[G,J]=v(""),r=l.length>0,_=se==="video";ge(L,{componentType:be,componentName:we,componentTitle:P,componentDescription:S}),fe(ae,()=>L.current),X(()=>{if(l.length>0){const t=$.current[n];if(t){const{offsetLeft:a,offsetWidth:i}=t;me({left:a,width:i})}}},[n,l.length]);const[K,de]=v(!1);_e(q,{once:!0,threshold:.01,callback:()=>{de(!0)}}),X(()=>{if(!K||!_)return;let t="",a="",i="";if(r&&l[n]){const c=l[n];t=c.video?.url||"",a=c.padVideo?.url||t,i=c.mobVideo?.url||t}else t=W?.url||"",a=R?.url||t,i=A?.url||t;t&&C(t),a&&O(a),i&&J(i),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(p=>{p&&(p.load(),p.play().catch(()=>{}))})},200)},[K,_,r,n,l,W?.url,R?.url,A?.url]);const ne=(t,a)=>{if(re(t),a.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),_&&r&&l[t]){const i=l[t];i.video?.url&&C(i.video.url),i.padVideo?.url&&O(i.padVideo.url),i.mobVideo?.url&&J(i.mobVideo.url),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(p=>{p&&(p.load(),p.play().catch(()=>{}))})},300)}},ce=()=>!V||!g?.text?null:e("div",{className:s("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":o==="center","flex justify-start":o==="left"}),children:e(ve,{as:"a",href:g.link,variant:g.variant||"secondary",size:"base",className:"image-with-text__button",children:g.text})}),m=j.length>0,V=!!g,Q=()=>{if(r&&l[n]){const t=l[n];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return h?`${h?.url},${E?.url||h?.url} 1024, ${H?.url||h?.url} 768`:""},U=()=>{if(r){const c=l[n],p=c.image?.url,pe=c.imgPad?.url||p,xe=c.imageMob?.url||p;return e(Z,{mode:"wait",children:e(Y.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:x("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:p,src:u,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:F||u,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:xe,src:G||u,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},c.video?.url||c.image?.url)})}const t=h?.url,a=E?.url||t,i=H?.url||t;return x("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:u,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:F||u,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:i,src:G||u,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return x("section",{ref:L,"data-ui-component-id":"ImageWithText",className:s("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!r,"flex-col":!r&&(d==="top"||d==="bottom"),"items-center":d==="left"||d==="right","flex-col laptop:flex-row":!r&&(d==="left"||d==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":r,"aiui-dark":oe==="dark"},ie),children:[r&&x("div",{className:s("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":o==="left","text-center":o==="center"}),children:[x("div",{className:"image-with-text__header",children:[e(b,{as:"h3",size:4,html:P,className:"image-with-text__title"}),e(z,{as:"p",size:1,html:y,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),e("div",{className:s("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":o==="center"}),children:x("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:B.left,width:B.width}}),l.map((t,a)=>e("div",{ref:i=>{$.current[a]=i},onClick:i=>ne(a,i),className:s("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",n===a?"image-with-text__tab--active text-black":"text-white"),children:e(b,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},a))]})})]}),!r&&x("div",{className:s("image-with-text__content flex flex-col",{"justify-center":!V,"justify-between":V,"w-full laptop:w-fit":m,"items-start":o==="left","items-center":o==="center","text-left":o==="left","text-center":o==="center","laptop:order-1":d==="left"}),children:[x("div",{className:s("image-with-text__main-content",{"flex flex-col":V}),children:[e(b,{as:"h2",size:4,html:P,className:s("image-with-text__title",{"w-full":m,"text-left":m&&o==="left","text-center":m&&o==="center"})}),S&&e(z,{as:"p",size:m?4:3,html:S,className:s("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!m,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":m,"text-left":m&&o==="left","text-center":m&&o==="center"})}),!m&&(y||D)&&x("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[D&&e("img",{src:D,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),y&&e(b,{as:"h4",size:5,html:y,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),m&&e("div",{className:s("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":d==="top"||d==="bottom","grid-cols-1":k===w.One,"grid-cols-2":k===w.Two,"grid-cols-3":k===w.Three,"grid-cols-4":k===w.Four}),children:j.map((t,a)=>x("div",{className:s("image-with-text__item",{"text-center":o==="center"}),children:[x("div",{className:s("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":o==="center","justify-start":o==="left"}),children:[e(M,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),e(b,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(z,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},a))})]}),ce()]}),e("div",{ref:q,className:s("image-with-text__media-wrapper",{"w-[60%] shrink-0":d==="left"||d==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":m,"laptop:basis-[63%] desktop:basis-[57%]":m&&d==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":r}),children:r?_?U():e(Z,{mode:"wait",children:e(Y.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(M,{source:Q(),alt:l[n].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},l[n].image?.url)}):_?U():e(M,{source:Q(),className:s("image-with-text__image rounded-box laptop:rounded-box")})})]})});ee.displayName="ImageWithText";var De=he(ee);export{De as default};
|
|
1
|
+
"use client";import{jsx as e,jsxs as d}from"react/jsx-runtime";import ue,{useImperativeHandle as fe,useRef as h,useState as v,useEffect as U}from"react";import{Heading as w,Picture as D,Text as z,Button as he,Link as ve}from"../../components/index.js";import{cn as s}from"../../helpers/utils.js";import{withLayout as ge}from"../../shared/Styles.js";import{useExposure as be}from"../../hooks/useExposure.js";import{useIntersectionObserverDelay as we}from"../../hooks/useIntersectionObserver.js";import{motion as X,AnimatePresence as Y}from"framer-motion";import{Cols as _}from"./types.js";const _e="image",ye="image_with_text",ke=e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",children:e("path",{d:"M6.91009 4.41058C7.23553 4.08514 7.76304 4.08514 8.08848 4.41058L13.0885 9.41058C13.4139 9.73602 13.4139 10.2635 13.0885 10.589L8.08848 15.589C7.76304 15.9144 7.23553 15.9144 6.91009 15.589C6.58466 15.2635 6.58466 14.736 6.91009 14.4106L11.3209 9.99977L6.91009 5.58897C6.58466 5.26353 6.58466 4.73602 6.91009 4.41058Z",fill:"currentColor"})}),ee=ue.forwardRef(({data:te,className:ie},ae)=>{const{title:V,subtitle:P,desc:y,descIcon:S,image:g,padImage:E,mobileImage:H,theme:oe="dark",items:j=[],layout:le="left",mediaType:se="image",datalist:r=[],video:R,padVideo:W,mobVideo:C,cols:k=_.One,button:u,textAlign:l="left"}=te,i=le,M=h(null),N=h(null),T=h(null),I=h(null),A=h(null),[c,re]=v(0),q=h([]),[B,ne]=v({left:0,width:0}),[f,$]=v(""),[F,O]=v(""),[Z,G]=v(""),n=r.length>0,b=se==="video";be(M,{componentType:_e,componentName:ye,componentTitle:V,componentDescription:P}),fe(ae,()=>M.current),U(()=>{if(r.length>0){const t=q.current[c];if(t){const{offsetLeft:o,offsetWidth:a}=t;ne({left:o,width:a})}}},[c,r.length]);const[J,me]=v(!1);we(A,{once:!0,threshold:.01,callback:()=>{me(!0)}}),U(()=>{if(!J||!b)return;let t="",o="",a="";if(n&&r[c]){const p=r[c];t=p.video?.url||"",o=p.padVideo?.url||t,a=p.mobVideo?.url||t}else t=R?.url||"",o=W?.url||t,a=C?.url||t;t&&$(t),o&&O(o),a&&G(a),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},200)},[J,b,n,c,r,R?.url,W?.url,C?.url]);const de=(t,o)=>{if(re(t),o.target.scrollIntoView({behavior:"smooth",inline:"center",block:"nearest"}),b&&n&&r[t]){const a=r[t];a.video?.url&&$(a.video.url),a.padVideo?.url&&O(a.padVideo.url),a.mobVideo?.url&&G(a.mobVideo.url),setTimeout(()=>{[N.current?.querySelector("video"),T.current?.querySelector("video"),I.current?.querySelector("video")].forEach(x=>{x&&(x.load(),x.play().catch(()=>{}))})},300)}},ce=()=>!L||!u?.text?null:e("div",{className:s("image-with-text__button-wrapper laptop:mt-[32px] mt-[24px]",{"flex justify-center":l==="center","flex justify-start":l==="left","laptop:hidden":i==="top"||i==="bottom"}),children:e(he,{as:"a",href:u.link,variant:u.variant||"secondary",size:"base",className:"image-with-text__button",children:u.text})}),m=j.length>0,L=!!u,K=()=>{if(n&&r[c]){const t=r[c];return`${t.image?.url} ,${t.imgPad?.url||t.image?.url} 1440, ${t.imageMob?.url||t.image?.url} 767`}return g?`${g?.url},${E?.url||g?.url} 1024, ${H?.url||g?.url} 768`:""},Q=()=>{if(n){const p=r[c],x=p.image?.url,pe=p.imgPad?.url||x,xe=p.imageMob?.url||x;return e(Y,{mode:"wait",children:e(X.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__video-motion absolute left-0 top-0 w-full",children:d("div",{className:"image-with-text__video-wrapper rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:x,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:pe,src:F||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:xe,src:Z||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})},p.video?.url||p.image?.url)})}const t=g?.url,o=E?.url||t,a=H?.url||t;return d("div",{className:"image-with-text__video-wrapper rounded-box laptop:rounded-box overflow-hidden",children:[e("div",{ref:N,className:"image-with-text__desktop-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:t,src:f,loop:!0,className:"image-with-text__video image-with-text__video--desktop lg-desktop:block hidden size-full object-cover"})}),e("div",{ref:T,className:"image-with-text__tablet-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:o,src:F||f,loop:!0,className:"image-with-text__video image-with-text__video--tablet tablet:block lg-desktop:hidden hidden"})}),e("div",{ref:I,className:"image-with-text__mobile-video-container",children:e("video",{playsInline:!0,autoPlay:!0,muted:!0,poster:a,src:Z||f,loop:!0,className:"image-with-text__video image-with-text__video--mobile tablet:hidden block"})})]})};return d("section",{ref:M,"data-ui-component-id":"ImageWithText",className:s("image-with-text text-info-primary",{"flex gap-[24px] laptop:gap-[48px] lg-desktop:gap-[64px]":!n,"flex-col":!n&&(i==="top"||i==="bottom"),"items-center":i==="left"||i==="right","flex-col laptop:flex-row":!n&&(i==="left"||i==="right"),"flex l:gap-[24px] xl:flex-col min-md:justify-between min-l:gap-[20px]":n,"aiui-dark":oe==="dark"},ie),children:[n&&d("div",{className:s("image-with-text__tab-content min-md:gap-[24px] laptop:basis-[36%] inline-flex flex-col justify-center",{"text-left":l==="left","text-center":l==="center"}),children:[d("div",{className:"image-with-text__header",children:[e(w,{as:"h3",size:4,html:V,className:"image-with-text__title"}),e(z,{as:"p",size:1,html:y,className:"image-with-text__description tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]"})]}),e("div",{className:s("image-with-text__tabs-wrapper md:scrollbar-hidden relative md:overflow-hidden md:overflow-x-scroll",{"flex justify-center":l==="center"}),children:d("div",{className:"image-with-text__tabs rounded-btn relative inline-flex bg-[#1D1D1F] px-[4px] md:my-[24px]",children:[e("div",{className:"image-with-text__slider rounded-btn absolute inset-y-0 bg-white transition-all duration-300 ease-in-out",style:{left:B.left,width:B.width}}),r.map((t,o)=>e("div",{ref:a=>{q.current[o]=a},onClick:a=>de(o,a),className:s("image-with-text__tab rounded-btn min-xxl:px-[28px] min-xxl:py-[15px] relative z-10 cursor-pointer px-[20px] py-[10px] text-center text-[12px] font-medium transition-colors duration-300 md:px-[20px] md:py-[10px]",c===o?"image-with-text__tab--active text-black":"text-white"),children:e(w,{as:"h1",size:1,html:t?.title,className:"image-with-text__tab-title text-balance-normal !whitespace-nowrap md:text-[14px]"})},o))]})})]}),!n&&d("div",{className:s("image-with-text__content flex flex-col",{"justify-center":!L,"justify-between":L,"w-full laptop:w-fit":m,"items-start":l==="left","items-center":l==="center","text-left":l==="left","text-center":l==="center","laptop:order-1":i==="left"}),children:[d("div",{className:s("image-with-text__main-content",{"flex flex-col":L}),children:[d("div",{className:s("image-with-text__header",{"items-end justify-between gap-16 hidden laptop:flex":(i==="top"||i==="bottom")&&u?.text}),children:[d("div",{className:"image-with-text__title-wrapper flex flex-col",children:[e(w,{as:"h2",size:4,html:V,className:s("image-with-text__title",{"w-full":m,"text-left":m&&l==="left","text-center":m&&l==="center"})}),P&&e(z,{as:"p",size:m?4:3,html:P,className:s("image-with-text__subtitle tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[4px] text-[14px]",{"laptop:mt-[16px]":!m,"min-xxl:mt-[8px] laptop:text-[16px] lg-desktop:text-[18px]":m,"text-left":m&&l==="left","text-center":m&&l==="center"})})]}),(i==="top"||i==="bottom")&&u?.text&&e(ve,{href:u.link,className:"laptop:flex hidden whitespace-nowrap no-underline",suffixIcon:ke,children:u.text})]}),!m&&(y||S)&&d("div",{className:"image-with-text__description flex flex-row gap-[8px]",children:[S&&e("img",{src:S,alt:"icon",className:"image-with-text__description-icon desktop:size-[48px] size-[36px]"}),y&&e(w,{as:"h4",size:5,html:y,className:"image-with-text__description-text min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] text-[#3AD1FF] md:text-[40px]"})]}),m&&e("div",{className:s("image-with-text__items laptop:mt-[32px] desktop:mt-[48px] mt-[24px] grid w-full gap-6",{"!mt-6":i==="top"||i==="bottom","grid-cols-1":k===_.One,"grid-cols-2":k===_.Two,"grid-cols-3":k===_.Three,"grid-cols-4":k===_.Four}),children:j.map((t,o)=>d("div",{className:s("image-with-text__item",{"text-center":l==="center"}),children:[d("div",{className:s("image-with-text__item-header flex flex-row items-center gap-[8px]",{"justify-center":l==="center","justify-start":l==="left"}),children:[e(D,{source:t.icon?.url,alt:t.icon?.alt,className:"image-with-text__item-icon min-md:text-[40px] min-l:text-[40px] min-xl:text-[56px] min-xxl:text-[64px] desktop:h-[44px] lg-desktop:h-[52px] h-[28px] translate-y-[-12%] md:text-[40px]",imgClassName:"h-full !w-full"}),e(w,{size:4,as:"h6",className:"image-with-text__item-text bg-gradient-to-r from-[#3ad1ff] to-[#008cd6] bg-clip-text text-transparent",children:t.text})]}),e(z,{size:4,as:"p",html:t.desc,className:"image-with-text__item-desc tablet:text-[14px] laptop:text-[14px] desktop:text-[16px] lg-desktop:text-[18px] mt-[-2px] text-[14px]"})]},o))})]}),ce()]}),e("div",{ref:A,className:s("image-with-text__media-wrapper",{"w-[60%] shrink-0":i==="left"||i==="right","aspect-[716/720] max-h-[560px] max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[824/560] shrink-0":m,"laptop:basis-[63%] desktop:basis-[57%]":m&&i==="left","relative w-full shrink md:aspect-[358/360] min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] laptop:basis-[64%] desktop:aspect-[648/448]":n,"!max-w-none !max-h-none aspect-auto":i==="top"||i==="bottom"}),children:n?b?Q():e(Y,{mode:"wait",children:e(X.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.3},className:"image-with-text__image-motion absolute left-0 top-0 w-full",children:e(D,{source:K(),alt:r[c].image?.alt,className:"image-with-text__image rounded-box min-xxl:aspect-[824/560] min-xxl:max-w-[824px] tablet:aspect-[704/360] laptop:aspect-[744/336] desktop:aspect-[648/448] md:aspect-[358/360]"})},r[c].image?.url)}):b?Q():e(D,{source:K(),className:s("image-with-text__image rounded-box laptop:rounded-box")})})]})});ee.displayName="ImageWithText";var De=ge(ee);export{De as default};
|
|
2
2
|
//# sourceMappingURL=ImageWithText.js.map
|