@anker-in/headless-ui 1.0.9-temp-3 → 1.0.9-temp-4
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.d.ts +1 -0
- package/dist/cjs/biz-components/AccordionCards/index.js +1 -1
- package/dist/cjs/biz-components/AccordionCards/index.js.map +2 -2
- package/dist/esm/biz-components/AccordionCards/index.d.ts +1 -0
- package/dist/esm/biz-components/AccordionCards/index.js +1 -1
- package/dist/esm/biz-components/AccordionCards/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var A=Object.create;var d=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var W=(e,i)=>{for(var s in i)d(e,s,{get:i[s],enumerable:!0})},I=(e,i,s,u)=>{if(i&&typeof i=="object"||typeof i=="function")for(let a of j(i))!V.call(e,a)&&a!==s&&d(e,a,{get:()=>i[a],enumerable:!(u=D(i,a))||u.enumerable});return e};var m=(e,i,s)=>(s=e!=null?A(P(e)):{},I(i||!e||!e.__esModule?d(s,"default",{value:e,enumerable:!0}):s,e)),q=e=>I(d({},"__esModule",{value:!0}),e);var G={};W(G,{default:()=>F});module.exports=q(G);var o=require("react/jsx-runtime"),B=m(require("../Title/index.js")),l=require("../../helpers/utils.js"),y=m(require("../../components/picture.js")),x=m(require("../../components/button.js")),E=m(require("../SwiperBox/index.js")),H=require("../../shared/Styles.js"),r=m(require("react")),L=require("../../hooks/useExposure.js"),f=require("../../shared/trackUrlRef.js"),M=require("../../shared/track.js"),C=m(require("../../shared/throttle.js")),w=require("../../components/heading.js");const c="image",p="scene_banner",U=r.default.forwardRef(({data:e,className:i="",event:s},u)=>{const[a,R]=(0,r.useState)(0),v=(0,r.useRef)(0),b=(0,r.useRef)([]),h=(0,r.useRef)(!1),[k,S]=(0,r.useState)(0),g=(0,r.useRef)(null);(0,r.useImperativeHandle)(u,()=>g.current),(0,L.useExposure)(g,{componentType:c,componentName:p,componentTitle:e?.title});const $=(t,n)=>{n&&(b.current[t]=n)};(0,r.useEffect)(()=>{const t=()=>{b.current[v.current]&&S(b.current[v.current].offsetWidth)};t();const n=(0,C.default)(t,300);return window.addEventListener("resize",n),()=>window.removeEventListener("resize",n)},[]);const z=({data:t,configuration:n})=>(0,o.jsxs)("div",{className:(0,l.cn)("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",n?.itemShape==="round"?"rounded-2xl":""),children:[(0,o.jsx)(y.default,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.mobileImg?.url||"",alt:t?.mobileImg?.alt||""}),(0,o.jsxs)("div",{className:(0,l.cn)("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[(0,o.jsxs)("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[(0,o.jsx)("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:t?.title}),(0,o.jsx)("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:t?.subTitle})]}),(0,o.jsx)(x.default,{"aria-label":t?.title??t?.subTitle,variant:"secondary",className:(0,l.cn)("text-info-primary text-sm font-bold"),as:"a",href:(0,f.trackUrlRef)(t.link,`${c}_${p}`),children:n?.primaryButton})]})]}),_=(0,r.useCallback)(t=>{a===t||h.current||(h.current=!0,R(t),v.current=t,(0,M.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:c,component_name:p,component_title:e?.products[t]?.title,component_description:e?.products[t]?.subTitle,position:t+1}}))},[e?.products,a]);return(0,o.jsxs)(o.Fragment,{children:[e?.title&&(0,o.jsx)(B.default,{data:{title:e?.title}}),(0,o.jsx)("div",{ref:g,className:(0,l.cn)("laptop:block hidden",{"aiui-dark":e?.theme==="dark"}),children:(0,o.jsx)("div",{className:(0,l.cn)("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",i),children:e?.products?.map((t,n)=>{const T=a===n;return(0,o.jsxs)("div",{style:{flex:`${T?8:1} 1 0%`,transition:"all 0.6s"},ref:N=>{N&&$(n,N)},className:(0,l.cn)("relative cursor-pointer overflow-hidden",e?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>_(n),onMouseLeave:()=>{h.current=!1},onClick:()=>{_(n)},children:[(0,o.jsx)(y.default,{source:t?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:t?.img?.alt||"",onClick:()=>{(0,f.trackUrlRef)(t?.imgLink,`${c}_${p}`)}}),(0,o.jsxs)("div",{style:{width:k},className:(0,l.cn)("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",T&&k?"opacity-100":"opacity-0"),children:[(0,o.jsxs)("div",{className:"mr-16 flex-1 overflow-hidden",children:[(0,o.jsx)(w.Heading,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:t?.title}),(0,o.jsx)(w.Heading,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:t?.subTitle})]}),(0,o.jsxs)(x.default,{className:(0,l.cn)("mb-1.5 font-bold"),as:"a",href:(0,f.trackUrlRef)(t?.link,`${c}_${p}`),onClick:()=>s?.primaryButton?.(e,n),children:[e?.primaryButton,(0,o.jsx)("span",{className:"sr-only",children:t?.title??t?.subTitle})]})]})]},n)})})}),(0,o.jsx)("div",{className:(0,l.cn)("laptop:hidden block",{"aiui-dark":e?.theme==="dark"}),children:(0,o.jsx)(E.default,{className:(0,l.cn)("h-[400px] !overflow-visible",i),id:"AccordionCards"+e?.key,data:{list:e?.products,configuration:{shape:e?.shape,itemShape:e?.itemShape,primaryButton:e?.primaryButton,event:s}},Slide:z,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var F=(0,H.withLayout)(U);
|
|
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 { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\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: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\nexport type 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 /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\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\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\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\n <Button\n aria-label={data?.title ?? data?.subTitle}\n variant=\"secondary\"\n className={cn('text-info-primary text-sm font-bold')}\n as=\"a\"\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n >\n {configuration?.primaryButton}\n </Button>\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\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-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 ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\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 alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n >\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {data?.primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\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 event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
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 { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\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: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type 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 /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\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\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\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\n <Button\n aria-label={data?.title ?? data?.subTitle}\n variant=\"secondary\"\n className={cn('text-info-primary text-sm font-bold')}\n as=\"a\"\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n >\n {configuration?.primaryButton}\n </Button>\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\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-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 ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\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={() => {\n handleSwiperItemClick(idx)\n }}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n onClick={() => {\n trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)\n }}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n >\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {data?.primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\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 event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_Title", "import_utils", "import_picture", "import_button", "import_SwiperBox", "import_Styles", "import_react", "import_useExposure", "import_trackUrlRef", "import_track", "import_throttle", "import_heading", "componentType", "componentName", "AccordionCards", "React", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "hoverIndexRef", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "throttleResize", "throttle", "MobileItem", "configuration", "Picture", "Button", "handleSwiperItemClick", "idx", "Title", "item", "isExpanded", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as V,jsx as r,jsxs as i}from"react/jsx-runtime";import L from"../Title/index.js";import{cn as n}from"../../helpers/utils.js";import w from"../../components/picture.js";import k from"../../components/button.js";import M from"../SwiperBox/index.js";import{withLayout as C}from"../../shared/Styles.js";import R,{useState as _,useRef as a,useCallback as S,useImperativeHandle as $,useEffect as z}from"react";import{useExposure as A}from"../../hooks/useExposure.js";import{trackUrlRef as f}from"../../shared/trackUrlRef.js";import{gaTrack as D}from"../../shared/track.js";import j from"../../shared/throttle.js";import{Heading as T}from"../../components/heading.js";const s="image",l="scene_banner",P=R.forwardRef(({data:t,className:v="",event:b},N)=>{const[m,I]=_(0),c=a(0),p=a([]),u=a(!1),[h,B]=_(0),d=a(null);$(N,()=>d.current),A(d,{componentType:s,componentName:l,componentTitle:t?.title});const E=(e,o)=>{o&&(p.current[e]=o)};z(()=>{const e=()=>{p.current[c.current]&&B(p.current[c.current].offsetWidth)};e();const o=j(e,300);return window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]);const H=({data:e,configuration:o})=>i("div",{className:n("bg-container-secondary-1 relative w-full shrink-0 grow-0 overflow-hidden border border-solid",o?.itemShape==="round"?"rounded-2xl":""),children:[r(w,{className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",source:e?.mobileImg?.url||"",alt:e?.mobileImg?.alt||""}),i("div",{className:n("absolute inset-x-0 bottom-0 flex flex-col overflow-hidden px-4 pb-4"),children:[i("div",{className:"tablet:mb-6 mb-4 flex-1 overflow-hidden",children:[r("p",{className:"text-info-primary text-2xl font-bold leading-[1.2]",children:e?.title}),r("h3",{className:"text-info-primary line-clamp-2 text-sm font-semibold",children:e?.subTitle})]}),r(k,{"aria-label":e?.title??e?.subTitle,variant:"secondary",className:n("text-info-primary text-sm font-bold"),as:"a",href:f(e.link,`${s}_${l}`),children:o?.primaryButton})]})]}),g=S(e=>{m===e||u.current||(u.current=!0,I(e),c.current=e,D({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:s,component_name:l,component_title:t?.products[e]?.title,component_description:t?.products[e]?.subTitle,position:e+1}}))},[t?.products,m]);return i(V,{children:[t?.title&&r(L,{data:{title:t?.title}}),r("div",{ref:d,className:n("laptop:block hidden",{"aiui-dark":t?.theme==="dark"}),children:r("div",{className:n("lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-h-[336px] w-full gap-4 overflow-hidden",v),children:t?.products?.map((e,o)=>{const y=m===o;return i("div",{style:{flex:`${y?8:1} 1 0%`,transition:"all 0.6s"},ref:x=>{x&&E(o,x)},className:n("relative cursor-pointer overflow-hidden",t?.itemShape==="round"?"rounded-2xl":""),onMouseEnter:()=>g(o),onMouseLeave:()=>{u.current=!1},onClick:()=>{g(o)},children:[r(w,{source:e?.img?.url,className:"size-full object-cover [&_img]:h-full [&_img]:object-cover",alt:e?.img?.alt||"",onClick:()=>{f(e?.imgLink,`${s}_${l}`)}}),i("div",{style:{width:h},className:n("absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in",y&&h?"opacity-100":"opacity-0"),children:[i("div",{className:"mr-16 flex-1 overflow-hidden",children:[r(T,{as:"h3",className:"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold",children:e?.title}),r(T,{as:"h4",className:"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]",children:e?.subTitle})]}),i(k,{className:n("mb-1.5 font-bold"),as:"a",href:f(e?.link,`${s}_${l}`),onClick:()=>b?.primaryButton?.(t,o),children:[t?.primaryButton,r("span",{className:"sr-only",children:e?.title??e?.subTitle})]})]})]},o)})})}),r("div",{className:n("laptop:hidden block",{"aiui-dark":t?.theme==="dark"}),children:r(M,{className:n("h-[400px] !overflow-visible",v),id:"AccordionCards"+t?.key,data:{list:t?.products,configuration:{shape:t?.shape,itemShape:t?.itemShape,primaryButton:t?.primaryButton,event:b}},Slide:H,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3}}})})]})});var te=C(P);export{te as default};
|
|
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 { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\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: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n}\n\nexport type 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 /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\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\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\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\n <Button\n aria-label={data?.title ?? data?.subTitle}\n variant=\"secondary\"\n className={cn('text-info-primary text-sm font-bold')}\n as=\"a\"\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n >\n {configuration?.primaryButton}\n </Button>\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\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-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 ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\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 alt={item?.img?.alt || ''}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n >\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {data?.primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\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 event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
-
"mappings": "
|
|
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 { withLayout } from '../../shared/Styles.js'\nimport React, { useState, useRef, useCallback, useImperativeHandle, useEffect } from 'react'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\nimport type { Img } from '../../types/props.js'\nimport throttle from '../../shared/throttle.js'\nimport { Heading } from '../../components/heading.js'\n\nconst componentType = 'image'\nconst componentName = 'scene_banner'\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: Img\n mobileImg?: Img\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n link?: string\n imgLink?: string\n}\n\nexport type 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 /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n}\n\nconst AccordionCards = React.forwardRef<HTMLDivElement, AccordionCardsType>(({ data, className = '', event }, ref) => {\n const [hoverIndex, setHoverIndex] = useState<number | null>(0)\n\n const hoverIndexRef = useRef<number>(0)\n const accordionRef = useRef<HTMLDivElement[]>([])\n const isAnimation = useRef<boolean>(false)\n const [contentWidth, setContentWidth] = useState<number>(0)\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n useEffect(() => {\n const handleResize = () => {\n if (accordionRef.current[hoverIndexRef.current]) {\n setContentWidth(accordionRef.current[hoverIndexRef.current].offsetWidth)\n }\n }\n handleResize()\n const throttleResize = throttle(handleResize, 300)\n window.addEventListener('resize', throttleResize)\n return () => window.removeEventListener('resize', throttleResize)\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\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={data?.mobileImg?.url || ''}\n alt={data?.mobileImg?.alt || ''}\n />\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\n <Button\n aria-label={data?.title ?? data?.subTitle}\n variant=\"secondary\"\n className={cn('text-info-primary text-sm font-bold')}\n as=\"a\"\n href={trackUrlRef(data.link, `${componentType}_${componentName}`)}\n >\n {configuration?.primaryButton}\n </Button>\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\u5BBD\u5EA6\u76F8\u5173\u72B6\u6001\n setHoverIndex(idx)\n hoverIndexRef.current = idx\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.products[idx]?.title,\n component_description: data?.products[idx]?.subTitle,\n position: idx + 1,\n },\n })\n },\n [data?.products, hoverIndex]\n )\n\n return (\n <>\n {data?.title && <Title data={{ title: data?.title }} />}\n <div ref={innerRef} className={cn('laptop:block hidden', { 'aiui-dark': data?.theme === 'dark' })}>\n <div\n className={cn(\n 'lg-desktop:h-[calc(560_/_1920*100vw)] desktop:h-[calc(448_/_1440*100vw)] laptop:h-[calc(336_/_1025*100vw)] flex max-h-[560px] min-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 ? 8 : 1\n return (\n <div\n key={idx}\n style={{\n flex: `${flexValue} 1 0%`,\n transition: 'all 0.6s',\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={() => {\n handleSwiperItemClick(idx)\n }}\n >\n <Picture\n source={item?.img?.url}\n className=\"size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n alt={item?.img?.alt || ''}\n onClick={() => {\n trackUrlRef(item?.imgLink, `${componentType}_${componentName}`)\n }}\n />\n <div\n style={{\n width: contentWidth,\n }}\n className={cn(\n 'absolute inset-x-0 bottom-0 flex w-full items-end justify-between overflow-hidden px-8 pb-8 opacity-0 transition-opacity duration-[600ms] ease-in',\n isExpanded && contentWidth ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-16 flex-1 overflow-hidden\">\n <Heading\n as=\"h3\"\n className=\"laptop:text-2xl desktop:text-[32px] text-info-primary mb-1 text-xl font-bold\"\n >\n {item?.title}\n </Heading>\n <Heading\n as=\"h4\"\n className=\"lg-desktop:text-[18px] desktop:text-[16px] text-info-primary line-clamp-2 text-[14px] font-[700]\"\n >\n {item?.subTitle}\n </Heading>\n </div>\n <Button\n className={cn('mb-1.5 font-bold')}\n as=\"a\"\n href={trackUrlRef(item?.link, `${componentType}_${componentName}`)}\n onClick={() => event?.primaryButton?.(data, idx)}\n >\n {data?.primaryButton}\n <span className=\"sr-only\">{item?.title ?? item?.subTitle}</span>\n </Button>\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 event: event,\n },\n }}\n Slide={MobileItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n }}\n />\n </div>\n </>\n )\n})\nexport default withLayout(AccordionCards)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "Title", "cn", "Picture", "Button", "SwiperBox", "withLayout", "React", "useState", "useRef", "useCallback", "useImperativeHandle", "useEffect", "useExposure", "trackUrlRef", "gaTrack", "throttle", "Heading", "componentType", "componentName", "AccordionCards", "data", "className", "event", "ref", "hoverIndex", "setHoverIndex", "hoverIndexRef", "accordionRef", "isAnimation", "contentWidth", "setContentWidth", "innerRef", "getRef", "index", "el", "handleResize", "throttleResize", "MobileItem", "configuration", "handleSwiperItemClick", "idx", "item", "isExpanded", "AccordionCards_default"]
|
|
7
7
|
}
|