@anker-in/headless-ui 0.0.29-alpha.1 → 0.0.29-alpha.3
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/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js +2 -2
- package/dist/cjs/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/cjs/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/cjs/components/badge.js +1 -1
- package/dist/cjs/components/badge.js.map +2 -2
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js +2 -2
- package/dist/esm/biz-components/MemberEquity/index.js.map +2 -2
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js +1 -1
- package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/index.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/index.js.map +2 -2
- package/dist/esm/components/badge.js +1 -1
- package/dist/esm/components/badge.js.map +2 -2
- package/package.json +1 -1
- package/style.css +10 -10
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var L=Object.create;var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var j=(t,r)=>{for(var a in r)f(t,a,{get:r[a],enumerable:!0})},B=(t,r,a,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of U(r))!_.call(t,p)&&p!==a&&f(t,p,{get:()=>r[p],enumerable:!(c=M(r,p))||c.enumerable});return t};var P=(t,r,a)=>(a=t!=null?L(S(t)):{},B(r||!t||!t.__esModule?f(a,"default",{value:t,enumerable:!0}):a,t)),A=t=>B(f({},"__esModule",{value:!0}),t);var C={};j(C,{default:()=>F});module.exports=A(C);var e=require("react/jsx-runtime"),s=P(require("react")),T=require("@gsap/react"),x=P(require("gsap")),m=require("gsap/dist/ScrollTrigger"),o=require("../../components/index.js"),i=require("../../helpers/index.js"),R=require("../../shared/Styles.js"),E=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js");const k="image",H="hero_banner",z=s.default.forwardRef(({data:t,className:r},a)=>{const{title:c,subtitle:p,pcImage:$,mobileImage:D,primaryButton:d,secondaryButton:b,theme:I="light",caption:h=[]}=t,u=(0,s.useRef)(null),n=(0,s.useRef)(null);return(0,E.useExposure)(n,{componentType:k,componentName:H,componentTitle:c,componentDescription:p}),(0,s.useImperativeHandle)(a,()=>n.current),(0,T.useGSAP)(()=>{if(x.default.registerPlugin(m.ScrollTrigger),!u.current)return;const v=n.current?.clientHeight||100;return window.innerHeight<=v?m.ScrollTrigger.create({trigger:n.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:l=>{const g=l.progress*40-20;x.default.set(u.current,{yPercent:g})}}):(m.ScrollTrigger.create({trigger:n.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:l=>{const g=l.progress*20-20;x.default.set(u.current,{yPercent:g})}}),m.ScrollTrigger.create({trigger:n.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:l=>{const g=l.progress*20;x.default.set(u.current,{yPercent:g})}})),()=>{m.ScrollTrigger.getAll().forEach(l=>l.kill())}},[]),(0,e.jsxs)("div",{ref:n,"data-ui-component-id":"HeroBanner",className:(0,i.cn)(I==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",r),children:[(0,e.jsx)("div",{ref:u,className:(0,i.cn)("absolute left-0 top-0 size-full"),children:(0,e.jsx)(o.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",source:`${$?.url||""} , ${D?.url||""} 767`})}),(0,e.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[c&&(0,e.jsx)(o.Heading,{as:"h1",size:5,className:(0,i.cn)("hero-banner-title"),html:c}),p&&(0,e.jsx)(o.Text,{as:"p",size:3,className:(0,i.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:p})]}),(0,e.jsxs)("div",{className:"laptop:justify-start
|
|
1
|
+
"use strict";"use client";var L=Object.create;var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,_=Object.prototype.hasOwnProperty;var j=(t,r)=>{for(var a in r)f(t,a,{get:r[a],enumerable:!0})},B=(t,r,a,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let p of U(r))!_.call(t,p)&&p!==a&&f(t,p,{get:()=>r[p],enumerable:!(c=M(r,p))||c.enumerable});return t};var P=(t,r,a)=>(a=t!=null?L(S(t)):{},B(r||!t||!t.__esModule?f(a,"default",{value:t,enumerable:!0}):a,t)),A=t=>B(f({},"__esModule",{value:!0}),t);var C={};j(C,{default:()=>F});module.exports=A(C);var e=require("react/jsx-runtime"),s=P(require("react")),T=require("@gsap/react"),x=P(require("gsap")),m=require("gsap/dist/ScrollTrigger"),o=require("../../components/index.js"),i=require("../../helpers/index.js"),R=require("../../shared/Styles.js"),E=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js");const k="image",H="hero_banner",z=s.default.forwardRef(({data:t,className:r},a)=>{const{title:c,subtitle:p,pcImage:$,mobileImage:D,primaryButton:d,secondaryButton:b,theme:I="light",caption:h=[]}=t,u=(0,s.useRef)(null),n=(0,s.useRef)(null);return(0,E.useExposure)(n,{componentType:k,componentName:H,componentTitle:c,componentDescription:p}),(0,s.useImperativeHandle)(a,()=>n.current),(0,T.useGSAP)(()=>{if(x.default.registerPlugin(m.ScrollTrigger),!u.current)return;const v=n.current?.clientHeight||100;return window.innerHeight<=v?m.ScrollTrigger.create({trigger:n.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:l=>{const g=l.progress*40-20;x.default.set(u.current,{yPercent:g})}}):(m.ScrollTrigger.create({trigger:n.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:l=>{const g=l.progress*20-20;x.default.set(u.current,{yPercent:g})}}),m.ScrollTrigger.create({trigger:n.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:l=>{const g=l.progress*20;x.default.set(u.current,{yPercent:g})}})),()=>{m.ScrollTrigger.getAll().forEach(l=>l.kill())}},[]),(0,e.jsxs)("div",{ref:n,"data-ui-component-id":"HeroBanner",className:(0,i.cn)(I==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",r),children:[(0,e.jsx)("div",{ref:u,className:(0,i.cn)("absolute left-0 top-0 size-full"),children:(0,e.jsx)(o.Picture,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",source:`${$?.url||""} , ${D?.url||""} 767`})}),(0,e.jsxs)("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[(0,e.jsxs)("div",{className:"laptop:text-left max-w-[686px]",children:[c&&(0,e.jsx)(o.Heading,{as:"h1",size:5,className:(0,i.cn)("hero-banner-title"),html:c}),p&&(0,e.jsx)(o.Text,{as:"p",size:3,className:(0,i.cn)("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:p})]}),(0,e.jsxs)("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[b&&b.text&&(0,e.jsx)("a",{href:(0,N.trackUrlRef)(b.link,`${k}_${H}`),children:(0,e.jsx)(o.Button,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:b.text})}),d&&d.text&&(0,e.jsx)("a",{href:(0,N.trackUrlRef)(d.link,`${k}_${H}`),children:(0,e.jsx)(o.Button,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:d.text})})]})]}),h.length>0&&(0,e.jsx)("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:h.map((v,y)=>(0,e.jsxs)(s.default.Fragment,{children:[(0,e.jsx)(o.Text,{size:2,className:(0,i.cn)("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1"),html:v.title}),y<h.length-1&&(0,e.jsx)("div",{className:(0,i.cn)("bg-info-primary w-px")})]},y))})]})});z.displayName="HeroBanner";var F=(0,R.withStyles)(z);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFQ,IAAAI,EAAA,6BAxFRC,EAAmD,oBACnDA,EAAwB,uBACxBC,EAAiB,mBACjBC,EAA8B,mCAE9BC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,KAAQ,UAAyB,IAAI,EACrCC,KAAS,UAAuB,IAAI,EAG1C,wBAAYA,EAAQ,CAClB,cAAAhB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMU,EAAO,OAAyB,KAE/D,WAAQ,IAAM,CAEZ,GADA,EAAAC,QAAK,eAAe,eAAa,EAC7B,CAACF,EAAM,QAAS,OACpB,MAAMG,EAAeF,EAAO,SAAS,cAAgB,IAGrD,OAFqB,OAAO,aAERE,EAClB,gBAAc,OAAO,CACnB,QAASF,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,GAED,gBAAc,OAAO,CACnB,QAASJ,EAAO,QAChB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,EACD,gBAAc,OAAO,CACnB,QAASJ,EAAO,QAChB,MAAO,UACP,IAAK,aACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAC9B,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,GAEI,IAAM,CACX,gBAAc,OAAO,EAAE,QAASC,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,KAGH,QAAC,OACC,IAAKL,EACL,uBAAqB,aACrB,aAAW,MACTH,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,oBAAC,OAAI,IAAKU,EAAO,aAAW,MAAG,iCAAiC,EAC9D,mBAAC,WACC,UAAU,uBACV,aAAa,sBACb,QAAQ,QACR,cAAc,OACd,OAAQ,GAAGN,GAAS,KAAO,EAAE,MAAMC,GAAa,KAAO,EAAE,OAC3D,EACF,KAGA,QAAC,OAAI,UAAU,yLACb,qBAAC,OAAI,UAAU,iCACZ,UAAAH,MAAS,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,mBAAmB,EAAG,KAAMA,EAAO,EACpFC,MACC,OAAC,QACC,GAAG,IACH,KAAM,EACN,aAAW,MACT,oHACF,EACA,KAAMA,EACR,GAEJ,KAEA,QAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAyFQ,IAAAI,EAAA,6BAxFRC,EAAmD,oBACnDA,EAAwB,uBACxBC,EAAiB,mBACjBC,EAA8B,mCAE9BC,EAA+C,qCAC/CC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAAa,EAAAC,QAAM,WAA4C,CAAC,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,KAAQ,UAAyB,IAAI,EACrCC,KAAS,UAAuB,IAAI,EAG1C,wBAAYA,EAAQ,CAClB,cAAAhB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,KAED,uBAAoBF,EAAK,IAAMU,EAAO,OAAyB,KAE/D,WAAQ,IAAM,CAEZ,GADA,EAAAC,QAAK,eAAe,eAAa,EAC7B,CAACF,EAAM,QAAS,OACpB,MAAMG,EAAeF,EAAO,SAAS,cAAgB,IAGrD,OAFqB,OAAO,aAERE,EAClB,gBAAc,OAAO,CACnB,QAASF,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,GAED,gBAAc,OAAO,CACnB,QAASJ,EAAO,QAChB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,EACD,gBAAc,OAAO,CACnB,QAASJ,EAAO,QAChB,MAAO,UACP,IAAK,aACL,MAAO,GACP,SAAWG,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAC9B,EAAAF,QAAK,IAAIF,EAAM,QAAS,CAAE,SAAUK,CAAM,CAAC,CAC7C,CACF,CAAC,GAEI,IAAM,CACX,gBAAc,OAAO,EAAE,QAASC,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,KAGH,QAAC,OACC,IAAKL,EACL,uBAAqB,aACrB,aAAW,MACTH,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,oBAAC,OAAI,IAAKU,EAAO,aAAW,MAAG,iCAAiC,EAC9D,mBAAC,WACC,UAAU,uBACV,aAAa,sBACb,QAAQ,QACR,cAAc,OACd,OAAQ,GAAGN,GAAS,KAAO,EAAE,MAAMC,GAAa,KAAO,EAAE,OAC3D,EACF,KAGA,QAAC,OAAI,UAAU,yLACb,qBAAC,OAAI,UAAU,iCACZ,UAAAH,MAAS,OAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,aAAW,MAAG,mBAAmB,EAAG,KAAMA,EAAO,EACpFC,MACC,OAAC,QACC,GAAG,IACH,KAAM,EACN,aAAW,MACT,oHACF,EACA,KAAMA,EACR,GAEJ,KAEA,QAAC,OAAI,UAAU,gEACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,KAAE,QAAM,eAAYA,EAAgB,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAC5E,mBAAC,UAAO,KAAK,KAAK,QAAQ,YAAY,UAAU,+BAC7C,SAAAW,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,KAAE,QAAM,eAAYA,EAAc,KAAM,GAAGX,CAAa,IAAIC,CAAa,EAAE,EAC1E,mBAAC,UAAO,KAAK,KAAK,QAAQ,UAAU,UAAU,6BAC3C,SAAAU,EAAc,KACjB,EACF,GAEJ,GACF,EAGCG,EAAQ,OAAS,MAChB,OAAC,OAAI,UAAU,uKACZ,SAAAA,EAAQ,IAAI,CAACQ,EAAGC,OACf,QAAC,EAAApB,QAAM,SAAN,CACC,oBAAC,QACC,KAAM,EACN,aAAW,MACT,0GACF,EACA,KAAMmB,EAAE,MACV,EACCC,EAAQT,EAAQ,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,sBAAsB,EAAG,IARxDS,CASrB,CACD,EACH,GAEJ,CAEJ,CAAC,EAEDrB,EAAW,YAAc,aAEzB,IAAOb,KAAQ,cAAWa,CAAU",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_gsap", "import_ScrollTrigger", "import_components", "import_helpers", "import_Styles", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "HeroBanner", "React", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "gsap", "clientHeight", "self", "value", "t", "c", "index"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";"use client";var P=Object.create;var d=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,o)=>{for(var a in o)d(t,a,{get:o[a],enumerable:!0})},v=(t,o,a,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let
|
|
1
|
+
"use strict";"use client";var P=Object.create;var d=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var j=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var I=(t,o)=>{for(var a in o)d(t,a,{get:o[a],enumerable:!0})},v=(t,o,a,s)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of j(o))!C.call(t,p)&&p!==a&&d(t,p,{get:()=>o[p],enumerable:!(s=_(o,p))||s.enumerable});return t};var D=(t,o,a)=>(a=t!=null?P(R(t)):{},v(o||!t||!t.__esModule?d(a,"default",{value:t,enumerable:!0}):a,t)),$=t=>v(d({},"__esModule",{value:!0}),t);var F={};I(F,{default:()=>S});module.exports=$(F);var e=require("react/jsx-runtime"),i=D(require("react")),h=require("react-responsive"),l=require("../../components/index.js"),N=require("../../shared/Styles.js"),u=require("../../helpers/utils.js"),b=require("../../shared/mimeType.js"),B=require("../../hooks/useExposure.js"),g=require("../../shared/trackUrlRef.js");const y="image",f="member_area",L=i.default.forwardRef(({data:t,className:o=""},a)=>{const{title:s,description:p,backgroundImage:r,mobileBackgroundImage:m,primaryButton:n,secondaryButton:c,theme:q,shape:M,primaryButtonHandler:w,secondaryButtonHandler:E}=t,T=(0,h.useMediaQuery)({query:"(max-width: 768px)"}),x=(0,i.useRef)(null);(0,i.useImperativeHandle)(a,()=>x.current),(0,B.useExposure)(x,{componentType:y,componentName:f,componentTitle:s,componentDescription:p});const z=()=>{w?.()},H=()=>{E?.()},k="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,e.jsxs)("section",{"data-ui-component-id":"MemberEquity",className:(0,u.cn)("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",o,{"aiui-dark":q==="dark","rounded-box":M==="rounded","h-[480px]":T}),ref:x,children:[(0,b.isVideo)(r?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:(0,e.jsx)("source",{src:r?.url,type:"video/mp4"})}):(0,e.jsx)(l.Picture,{source:r?.url,alt:r?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,b.isVideo)(m?.mimeType)?(0,e.jsx)("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:(0,e.jsx)("source",{src:m?.url,type:"video/mp4"})}):(0,e.jsx)(l.Picture,{source:m?.url,alt:m?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),(0,e.jsx)("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:(0,e.jsxs)("div",{className:`
|
|
2
2
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
|
|
3
3
|
laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
|
|
4
|
-
`,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(
|
|
4
|
+
`,children:[(0,e.jsxs)("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[(0,e.jsx)(l.Heading,{as:"h2",size:3,className:"member-equity-title ",html:s}),(0,e.jsx)(l.Text,{size:2,className:"member-equity-description",html:p})]}),(0,e.jsxs)("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[c&&c.text&&(0,e.jsx)("a",{href:(0,g.trackUrlRef)(c.link,`${y}_${f}`),children:(0,e.jsx)(l.Button,{variant:"secondary",onClick:H,className:(0,u.cn)("member-equity-button-secondary ",k),children:c.text})}),n&&n.text&&(0,e.jsx)("a",{href:(0,g.trackUrlRef)(n.link,`${y}_${f}`),children:(0,e.jsx)(l.Button,{variant:"primary",onClick:z,className:(0,u.cn)("member-equity-button-primary ",k),children:n.text})})]})]})})]})});var S=(0,N.withStyles)(L);
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text size={2} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4EY,IAAAI,EAAA,6BA3EZC,EAAmD,oBACnDC,EAA8B,4BAC9BC,EAA+C,qCAC/CC,EAA2B,kCAE3BC,EAAmB,kCACnBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAA4C,EAAAC,QAAM,WACtD,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EAEEa,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAW,UAAuB,IAAI,KAE5C,uBAAoBZ,EAAK,IAAMY,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAAlB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,EAED,MAAMW,EAA2B,IAAM,CAErCJ,IAAuB,CACzB,EAEMK,EAA6B,IAAM,CAEvCJ,IAAyB,CAC3B,EAEMK,EAAe,mFAErB,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT,yGACA,6CACAhB,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,UACzB,YAAaG,CACf,CACF,EACA,IAAKC,EAEJ,wBAAQT,GAAiB,QAAQ,KAChC,OAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,mBAAC,UAAO,IAAKA,GAAiB,IAAK,KAAK,YAAY,EACtD,KAEA,OAAC,WACC,OAAQA,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,kGACZ,KAED,WAAQC,GAAuB,QAAQ,KACtC,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKA,GAAuB,IAAK,KAAK,YAAY,EAC5D,KAEA,OAAC,WACC,OAAQA,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,4FACZ,KAEF,OAAC,OAAI,UAAW,uEACd,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,cAKX,qBAAC,OAAI,UAAU,mHACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMC,EAAa,GAC5E,KAEA,QAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text size={2} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary ', lgButtonSize)}\n >\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={cn('member-equity-button-primary ', lgButtonSize)}\n >\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </section>\n )\n }\n)\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA4EY,IAAAI,EAAA,6BA3EZC,EAAmD,oBACnDC,EAA8B,4BAC9BC,EAA+C,qCAC/CC,EAA2B,kCAE3BC,EAAmB,kCACnBC,EAAwB,oCACxBC,EAA4B,sCAC5BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAA4C,EAAAC,QAAM,WACtD,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EAEEa,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EACxDC,KAAW,UAAuB,IAAI,KAE5C,uBAAoBZ,EAAK,IAAMY,EAAS,OAAyB,KAEjE,eAAYA,EAAU,CACpB,cAAAlB,EACA,cAAAC,EACA,eAAgBM,EAChB,qBAAsBC,CACxB,CAAC,EAED,MAAMW,EAA2B,IAAM,CAErCJ,IAAuB,CACzB,EAEMK,EAA6B,IAAM,CAEvCJ,IAAyB,CAC3B,EAEMK,EAAe,mFAErB,SACE,QAAC,WACC,uBAAqB,eACrB,aAAW,MACT,yGACA,6CACAhB,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,UACzB,YAAaG,CACf,CACF,EACA,IAAKC,EAEJ,wBAAQT,GAAiB,QAAQ,KAChC,OAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,mBAAC,UAAO,IAAKA,GAAiB,IAAK,KAAK,YAAY,EACtD,KAEA,OAAC,WACC,OAAQA,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,kGACZ,KAED,WAAQC,GAAuB,QAAQ,KACtC,OAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,mBAAC,UAAO,IAAKA,GAAuB,IAAK,KAAK,YAAY,EAC5D,KAEA,OAAC,WACC,OAAQA,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,4FACZ,KAEF,OAAC,OAAI,UAAW,uEACd,oBAAC,OACC,UAAW;AAAA;AAAA;AAAA,cAKX,qBAAC,OAAI,UAAU,mHACb,oBAAC,WAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMH,EAAO,KAC1E,OAAC,QAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMC,EAAa,GAC5E,KAEA,QAAC,OAAI,UAAU,2CACZ,UAAAI,GAAmBA,EAAgB,SAClC,OAAC,KAAE,QAAM,eAAYA,EAAgB,KAAM,GAAGZ,CAAa,IAAIC,CAAa,EAAE,EAC5E,mBAAC,UACC,QAAQ,YACR,QAASmB,EACT,aAAW,MAAG,kCAAmCC,CAAY,EAE5D,SAAAT,EAAgB,KACnB,EACF,EAEDD,GAAiBA,EAAc,SAC9B,OAAC,KAAE,QAAM,eAAYA,EAAc,KAAM,GAAGX,CAAa,IAAIC,CAAa,EAAE,EAC1E,mBAAC,UACC,QAAQ,UACR,QAASkB,EACT,aAAW,MAAG,gCAAiCE,CAAY,EAE1D,SAAAV,EAAc,KACjB,EACF,GAEJ,GACF,EACF,GACF,CAEJ,CACF,EAEA,IAAOtB,KAAQ,cAAWa,CAAY",
|
|
6
6
|
"names": ["MemberEquity_exports", "__export", "MemberEquity_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_components", "import_Styles", "import_utils", "import_mimeType", "import_useExposure", "import_trackUrlRef", "componentType", "componentName", "MemberEquity", "React", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var j=Object.create;var v=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var Q=(s,o)=>{for(var l in o)v(s,l,{get:o[l],enumerable:!0})},V=(s,o,l,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of z(o))!U.call(s,i)&&i!==l&&v(s,i,{get:()=>o[i],enumerable:!(p=H(o,i))||p.enumerable});return s};var h=(s,o,l)=>(l=s!=null?j(D(s)):{},V(o||!s||!s.__esModule?v(l,"default",{value:s,enumerable:!0}):l,s)),q=s=>V(v({},"__esModule",{value:!0}),s);var F={};Q(F,{default:()=>O});module.exports=q(F);var t=require("react/jsx-runtime"),n=h(require("react")),G=require("react-responsive"),I=require("../../shared/Styles.js"),M=h(require("../../components/picture.js")),T=h(require("../../components/button.js")),L=require("../../components/heading.js"),_=require("../../components/text.js"),k=require("../../components/gird.js"),$=h(require("../Title/index.js")),S=require("../../helpers/utils.js"),B=h(require("../SwiperBox/index.js")),c=require("../../components/tabs.js"),R=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),C=require("../../shared/track.js");const x="image",y="p1_banner",w=({data:s,configuration:o,jIndex:l})=>{const[p,i]=(0,n.useState)(!1),d=(0,G.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,n.useRef)(null),b=()=>{switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,R.useExposure)(r,{componentType:x,componentName:y,position:l,componentTitle:s.title,componentDescription:s.description,navigation:o?.activeTab}),(0,n.useEffect)(()=>{i(d)},[d]);const{theme:m="light",title:g,description:f,imageUrl:e,primaryButton:a,secondaryButton:u,imageMobileUrl:E}=s,P="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsx)("div",{className:(0,S.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?b():"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":m==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:r,children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(M.default,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),(0,t.jsx)(M.default,{source:E?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(L.Heading,{size:3,className:"item-title",html:g}),(0,t.jsx)(_.Text,{size:2,className:"item-description lg-desktop:text-[18px]",html:f})]}),(0,t.jsxs)("div",{className:"flex gap-
|
|
1
|
+
"use strict";var j=Object.create;var v=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var Q=(s,o)=>{for(var l in o)v(s,l,{get:o[l],enumerable:!0})},V=(s,o,l,p)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of z(o))!U.call(s,i)&&i!==l&&v(s,i,{get:()=>o[i],enumerable:!(p=H(o,i))||p.enumerable});return s};var h=(s,o,l)=>(l=s!=null?j(D(s)):{},V(o||!s||!s.__esModule?v(l,"default",{value:s,enumerable:!0}):l,s)),q=s=>V(v({},"__esModule",{value:!0}),s);var F={};Q(F,{default:()=>O});module.exports=q(F);var t=require("react/jsx-runtime"),n=h(require("react")),G=require("react-responsive"),I=require("../../shared/Styles.js"),M=h(require("../../components/picture.js")),T=h(require("../../components/button.js")),L=require("../../components/heading.js"),_=require("../../components/text.js"),k=require("../../components/gird.js"),$=h(require("../Title/index.js")),S=require("../../helpers/utils.js"),B=h(require("../SwiperBox/index.js")),c=require("../../components/tabs.js"),R=require("../../hooks/useExposure.js"),N=require("../../shared/trackUrlRef.js"),C=require("../../shared/track.js");const x="image",y="p1_banner",w=({data:s,configuration:o,jIndex:l})=>{const[p,i]=(0,n.useState)(!1),d=(0,G.useMediaQuery)({query:"(max-width: 768px)"}),r=(0,n.useRef)(null),b=()=>{switch(o?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};(0,R.useExposure)(r,{componentType:x,componentName:y,position:l,componentTitle:s.title,componentDescription:s.description,navigation:o?.activeTab}),(0,n.useEffect)(()=>{i(d)},[d]);const{theme:m="light",title:g,description:f,imageUrl:e,primaryButton:a,secondaryButton:u,imageMobileUrl:E}=s,P="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return(0,t.jsx)("div",{className:(0,S.cn)("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",o?.isTab?b():"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]",{"rounded-2xl":o?.shape==="rounded","aiui-dark":m==="dark","h-[480px]":p&&!o?.isTab,"h-[400px]":p&&o?.isTab},"text-info-primary"),ref:r,children:(0,t.jsxs)("div",{className:"absolute inset-0",children:[(0,t.jsx)(M.default,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),(0,t.jsx)(M.default,{source:E?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),(0,t.jsxs)("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[(0,t.jsxs)("div",{children:[(0,t.jsx)(L.Heading,{size:3,className:"item-title",html:g}),(0,t.jsx)(_.Text,{size:2,className:"item-description lg-desktop:text-[18px]",html:f})]}),(0,t.jsxs)("div",{className:"lg-desktop:gap-3 flex gap-2",children:[u&&u.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(u.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"secondary",children:u.text})}),a&&a.text&&(0,t.jsx)("a",{href:(0,N.trackUrlRef)(a.link,`${x}_${y}`),children:(0,t.jsx)(T.default,{className:P,variant:"primary",children:a.text})})]})]})]})})},A=n.default.forwardRef((s,o)=>{const{shape:l,sectionTitle:p,groupByTab:i=!1,items:d=[],carousel:r}=s.data,b=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},m=d.map(e=>e.tabName).filter(Boolean).filter((e,a,u)=>u.indexOf(e)===a),g=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},f=m.map(e=>({tabName:e,items:d.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return(0,t.jsxs)("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:o,className:"text-info-primary",children:[p&&(0,t.jsx)($.default,{data:{title:p},className:"section-title"}),i?(0,t.jsxs)(c.Tabs,{shape:l,align:"left",defaultValue:m[0],children:[(0,t.jsx)(c.TabsList,{children:m.map((e,a)=>(0,t.jsx)(c.TabsTrigger,{value:e,onClick:()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:x,component_name:y,component_title:p,component_position:1,navigation:e,button_name:e}})},children:e},a))}),m.map((e,a)=>(0,t.jsx)(c.TabsContent,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:f?.[e]||[],configuration:{shape:l,isTab:i,activeTab:e,num:f?.[e]?.length||0}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:g(f?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:g(f?.[e]?.length||0)}}}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:r?.items||[],configuration:{shape:l,isTab:i}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},a))]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(k.Grid,{className:"w-full",children:[d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:b(e.width??"full"),className:"laptop:block hidden",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`)),d.map((e,a)=>(0,t.jsx)(k.GridItem,{span:b("full"),className:"laptop:hidden block",children:(0,t.jsx)(w,{data:e,configuration:{shape:l},jIndex:a})},`${e?.title||""}${a}`))]}),r&&r?.items.length>0?(0,t.jsx)(B.default,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:r?.items||[],configuration:{shape:l}},Slide:w,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var O=(0,I.withStyles)(A);
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n configuration?.isTab\n ? handleAspect()\n : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]',\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text size={2} className=\"item-description lg-desktop:text-[18px]\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={tabName!}\n onClick={() => {\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: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuEQ,IAAAI,EAAA,6BAvERC,EAAmD,oBACnDC,EAA8B,4BAE9BC,EAA2B,kCAC3BC,EAAoB,0CACpBC,EAAmB,yCACnBC,EAAwB,uCACxBC,EAAqB,oCACrBC,EAA+B,oCAC/BC,EAAkB,gCAClBC,EAAmB,kCACnBC,EAAsB,oCACtBC,EAAyD,oCACzDC,EAA4B,sCAC5BC,EAA4B,uCAC5BC,EAAwB,iCAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CAAE,KAAMC,EAAM,cAAAC,EAAe,OAAAC,CAAO,IAA4D,CACjH,KAAM,CAACC,EAAUC,CAAW,KAAI,YAAS,EAAK,EACxCC,KAAa,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1DC,KAAM,UAAuB,IAAI,EAEjCC,EAAe,IAAM,CACzB,OAAQN,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,KAEA,eAAYK,EAAK,CACf,cAAeT,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,KAED,aAAU,IAAM,CACdG,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CAAE,MAAAG,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,cAAAC,EAAe,gBAAAC,EAAiB,eAAAC,CAAe,EAAId,EACpGe,EAAe,mFAErB,SACE,OAAC,OACC,aAAW,MACT,kFACAd,GAAe,MACXM,EAAa,EACb,4LACJ,CACE,cAAeN,GAAe,QAAU,UACxC,YAAaO,IAAU,OACvB,YAAaL,GAAY,CAACF,GAAe,MACzC,YAAaE,GAAYF,GAAe,KAC1C,EACA,mBACF,EACA,IAAKK,EAEL,oBAAC,OAAI,UAAU,mBACb,oBAAC,EAAAU,QAAA,CACC,OAAQL,GAAU,IAClB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,KACA,OAAC,EAAAK,QAAA,CACC,OAAQF,GAAgB,KAAOH,GAAU,IACzC,UAAU,6CACV,aAAa,kDACf,KACA,QAAC,OAAI,UAAU,kFACb,qBAAC,OACC,oBAAC,WAAQ,KAAM,EAAG,UAAU,aAAa,KAAMF,EAAO,KACtD,OAAC,QAAK,KAAM,EAAG,UAAU,0CAA0C,KAAMC,EAAa,GACxF,KACA,QAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n configuration?.isTab\n ? handleAspect()\n : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]',\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text size={2} className=\"item-description lg-desktop:text-[18px]\" html={description} />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={tabName!}\n onClick={() => {\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: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["MultiLayoutGraphicBlock_exports", "__export", "MultiLayoutGraphicBlock_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_react_responsive", "import_Styles", "import_picture", "import_button", "import_heading", "import_text", "import_gird", "import_Title", "import_utils", "import_SwiperBox", "import_tabs", "import_useExposure", "import_trackUrlRef", "import_track", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "Picture", "Button", "MultiLayoutGraphicBlock", "React", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";"use client";var Q=Object.create;var y=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(e,i)=>{for(var n in i)y(e,n,{get:i[n],enumerable:!0})},N=(e,i,n,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of G(i))!K.call(e,s)&&s!==n&&y(e,s,{get:()=>i[s],enumerable:!(m=W(i,s))||m.enumerable});return e};var p=(e,i,n)=>(n=e!=null?Q(J(e)):{},N(i||!e||!e.__esModule?y(n,"default",{value:e,enumerable:!0}):n,e)),Y=e=>N(y({},"__esModule",{value:!0}),e);var re={};X(re,{default:()=>ie});module.exports=Y(re);var t=require("react/jsx-runtime"),a=p(require("react")),d=require("../../helpers/utils.js"),I=p(require("../../components/picture.js")),C=p(require("./tabSwitch.js")),w=p(require("../../components/button.js")),_=p(require("../Title/index.js")),M=p(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),V=require("react-responsive"),q=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js"),z=p(require("../../components/badge.js")),A=require("../../components/heading.js"),L=require("../../components/text.js");const D="image",P="product_shelf",Z=999999999e-2,ee=({data:e,configuration:i})=>{const{locale:n="us",copyWriting:m}=(0,$.useAiuiContext)(),s=(r,o)=>i?.event?.primaryButton?.(r,o+1),x=(r,o)=>i?.event?.secondaryButton?.(r,o+1),l=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},u=!l?.availableForSale&&l?.price?.amount===Z,{price:b,basePrice:h}=(0,H.formatVariantPrice)({locale:n,amount:l?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const r=e?.sku,o=e?.variants;return o?.find(f=>f?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return(0,t.jsxs)("div",{className:(0,d.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",i?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,d.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(I.default,{source:g(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((r,o)=>(0,t.jsx)(z.default,{children:r},o))}),(0,t.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title mb-1",children:e?.title||""}),(0,t.jsx)(L.Text,{size:2,className:"shelf-display-product-description",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:u?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:m?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:h||""})]})}),(0,t.jsxs)("div",{className:(0,d.cn)("
|
|
1
|
+
"use strict";"use client";var Q=Object.create;var y=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var J=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(e,i)=>{for(var n in i)y(e,n,{get:i[n],enumerable:!0})},N=(e,i,n,m)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of G(i))!K.call(e,s)&&s!==n&&y(e,s,{get:()=>i[s],enumerable:!(m=W(i,s))||m.enumerable});return e};var p=(e,i,n)=>(n=e!=null?Q(J(e)):{},N(i||!e||!e.__esModule?y(n,"default",{value:e,enumerable:!0}):n,e)),Y=e=>N(y({},"__esModule",{value:!0}),e);var re={};X(re,{default:()=>ie});module.exports=Y(re);var t=require("react/jsx-runtime"),a=p(require("react")),d=require("../../helpers/utils.js"),I=p(require("../../components/picture.js")),C=p(require("./tabSwitch.js")),w=p(require("../../components/button.js")),_=p(require("../Title/index.js")),M=p(require("../SwiperBox/index.js")),E=require("../../shared/Styles.js"),H=require("./shelfDisplay.js"),V=require("react-responsive"),q=require("../../hooks/useExposure.js"),R=require("../../shared/track.js"),$=require("../AiuiProvider/index.js"),z=p(require("../../components/badge.js")),A=require("../../components/heading.js"),L=require("../../components/text.js");const D="image",P="product_shelf",Z=999999999e-2,ee=({data:e,configuration:i})=>{const{locale:n="us",copyWriting:m}=(0,$.useAiuiContext)(),s=(r,o)=>i?.event?.primaryButton?.(r,o+1),x=(r,o)=>i?.event?.secondaryButton?.(r,o+1),l=e?.variants?.find(r=>r?.sku===e?.sku)||e?.variants?.[0]||{},u=!l?.availableForSale&&l?.price?.amount===Z,{price:b,basePrice:h}=(0,H.formatVariantPrice)({locale:n,amount:l?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),g=()=>{const r=e?.sku,o=e?.variants;return o?.find(f=>f?.sku===r)?.image?.url||o?.[0]?.image?.url||""};return(0,t.jsxs)("div",{className:(0,d.cn)("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",i?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[(0,t.jsx)("div",{className:(0,d.cn)("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:(0,t.jsx)(I.default,{source:g(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),(0,t.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((r,o)=>(0,t.jsx)(z.default,{children:r},o))}),(0,t.jsx)(A.Heading,{title:e?.title||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",children:e?.title||""}),(0,t.jsx)(L.Text,{size:2,className:"shelf-display-product-description line-clamp-1",children:e?.description||""}),(0,t.jsx)("div",{className:"mb-2 mt-[20px] flex items-center",children:u?(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:m?.soldOutText}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b||""}),(0,t.jsx)("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:h||""})]})}),(0,t.jsxs)("div",{className:(0,d.cn)("lg-desktop:gap-3 flex items-center gap-2",i.direction==="vertical"?"flex-col":""),children:[(0,t.jsx)(w.default,{variant:"primary",onClick:()=>s(e,i?.index),className:`
|
|
2
2
|
laptop:text-sm desktop:text-base text-xs
|
|
3
3
|
${i.direction==="vertical"?"w-full":""}
|
|
4
4
|
`,children:i?.primaryButton||""}),(0,t.jsx)(w.default,{variant:"secondary",onClick:()=>x(e,i?.index),className:`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading title={data?.title || ''} size={2} className=\"shelf-display-product-title mb-1\">\n {data?.title || ''}\n </Heading>\n <Text size={2} className=\"shelf-display-product-description\">\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn('
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,GAAA,GAAAC,EAAAD,GAAA,aAAAE,KAAA,eAAAC,EAAAH,IAkHQ,IAAAI,EAAA,6BAjHRC,EAAwE,oBACxEC,EAAmB,kCACnBC,EAAoB,0CACpBC,EAAsB,6BACtBC,EAAmB,yCACnBC,EAAkB,gCAClBC,EAAsB,oCACtBC,EAA2B,kCAC3BC,EAAmC,6BACnCC,EAA8B,4BAC9BC,EAA4B,sCAC5BC,EAAwB,iCACxBC,EAA+B,oCAC/BC,EAAkB,wCAClBC,EAAwB,uCACxBC,EAAqB,oCAErB,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAiB,aAyDjBC,GAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAEhDC,EAAkB,CAACC,EAA0BC,IACjDL,GAAe,OAAO,gBAAgBI,EAAQC,EAAQ,CAAC,EAEnDC,EAAoB,CAACF,EAA0BC,IACnDL,GAAe,OAAO,kBAAkBI,EAAQC,EAAQ,CAAC,EAErDE,EAAUR,GAAM,UAAU,KAAMS,GAAcA,GAAM,MAAQT,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGU,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWV,EAErE,CAAE,MAAAa,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQV,EACR,OAAQM,GAAS,OAAO,QAAU,EAClC,WAAYR,GAAM,gBAAgB,QAAUA,GAAM,OAAO,QAAU,EACnE,aAAcA,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKa,EAAY,IAAM,CACtB,MAAMC,EAAMd,GAAM,IACZe,EAAWf,GAAM,SAEvB,OADgBe,GAAU,KAAMN,GAAcA,GAAM,MAAQK,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,SACE,QAAC,OAEC,aAAW,MACT,2JACAd,GAAe,YAAc,QAAU,cAAgB,cACzD,EAEA,oBAAC,OAAI,aAAW,MAAG,2FAA2F,EAC5G,mBAAC,EAAAe,QAAA,CAAQ,OAAQH,EAAU,EAAG,UAAU,yDAAyD,EACnG,KACA,OAAC,OAAI,UAAU,2DACZ,SAAAb,GAAM,MAAM,MAAM,EAAG,CAAC,GAAG,MAAM,CAACS,EAAWH,OACnC,OAAC,EAAAW,QAAA,CAAmB,SAAAR,GAARH,CAAa,CACjC,EACH,KACA,OAAC,WAAQ,MAAON,GAAM,OAAS,GAAI,KAAM,EAAG,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading title={data?.title || ''} size={2} className=\"shelf-display-product-title mb-1 line-clamp-2\">\n {data?.title || ''}\n </Heading>\n <Text size={2} className=\"shelf-display-product-description line-clamp-1\">\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ShelfDisplay_exports", "__export", "ShelfDisplay_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_tabSwitch", "import_button", "import_Title", "import_SwiperBox", "import_Styles", "import_shelfDisplay", "import_react_responsive", "import_useExposure", "import_track", "import_AiuiProvider", "import_badge", "import_heading", "import_text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "Picture", "Badge", "Button", "ShelfDisplay", "React", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "Title", "TabSwitch", "v", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var g=(e,t)=>{for(var p in t)n(e,p,{get:t[p],enumerable:!0})},f=(e,t,p,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of d(t))!l.call(e,o)&&o!==p&&n(e,o,{get:()=>t[o],enumerable:!(a=x(t,o))||a.enumerable});return e};var u=e=>f(n({},"__esModule",{value:!0}),e);var k={};g(k,{default:()=>m});module.exports=u(k);var s=require("react/jsx-runtime"),v=require("react"),r=require("class-variance-authority"),i=require("../helpers/index.js");const b=(0,r.cva)("text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none",{variants:{size:{sm:"px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight",lg:"lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight"}},defaultVariants:{size:"lg"}});function c({className:e,size:t,...p}){return(0,s.jsx)("div",{className:(0,i.cn)(b({size:t}),e),...p})}var m=c;
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/badge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'px-[8px] pb-[4px] pt-[5px] text-[16px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBS,IAAAI,EAAA,6BAvBTC,EAAuB,iBACvBC,EAAuC,oCAEvCC,EAAmB,+BAEnB,MAAMC,KAAgB,OACpB,0NACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,uDACJ,GAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAuBS,IAAAI,EAAA,6BAvBTC,EAAuB,iBACvBC,EAAuC,oCAEvCC,EAAmB,+BAEnB,MAAMC,KAAgB,OACpB,0NACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,uDACJ,GAAI,yIACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAIA,SAASC,EAAM,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAe,CACxD,SAAO,OAAC,OAAI,aAAW,MAAGJ,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAC5E,CAEA,IAAOV,EAAQO",
|
|
6
6
|
"names": ["badge_exports", "__export", "badge_default", "__toCommonJS", "import_jsx_runtime", "React", "import_class_variance_authority", "import_helpers", "badgeVariants", "Badge", "className", "size", "props"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import v,{useImperativeHandle as $,useRef as y}from"react";import{useGSAP as D}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as k,Heading as I,Picture as L,Text as H}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as M}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const b="image",f="hero_banner",w=v.forwardRef(({data:B,className:P},z)=>{const{title:m,subtitle:u,pcImage:T,mobileImage:R,primaryButton:l,secondaryButton:i,theme:E="light",caption:g=[]}=B,o=y(null),t=y(null);return U(t,{componentType:b,componentName:f,componentTitle:m,componentDescription:u}),$(z,()=>t.current),D(()=>{if(c.registerPlugin(s),!o.current)return;const x=t.current?.clientHeight||100;return window.innerHeight<=x?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:r=>{const p=r.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(r=>r.kill())}},[]),n("div",{ref:t,"data-ui-component-id":"HeroBanner",className:a(E==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",P),children:[e("div",{ref:o,className:a("absolute left-0 top-0 size-full"),children:e(L,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",source:`${T?.url||""} , ${R?.url||""} 767`})}),n("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[n("div",{className:"laptop:text-left max-w-[686px]",children:[m&&e(I,{as:"h1",size:5,className:a("hero-banner-title"),html:m}),u&&e(H,{as:"p",size:3,className:a("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),n("div",{className:"laptop:justify-start
|
|
1
|
+
"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import v,{useImperativeHandle as $,useRef as y}from"react";import{useGSAP as D}from"@gsap/react";import c from"gsap";import{ScrollTrigger as s}from"gsap/dist/ScrollTrigger";import{Button as k,Heading as I,Picture as L,Text as H}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as M}from"../../shared/Styles.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as N}from"../../shared/trackUrlRef.js";const b="image",f="hero_banner",w=v.forwardRef(({data:B,className:P},z)=>{const{title:m,subtitle:u,pcImage:T,mobileImage:R,primaryButton:l,secondaryButton:i,theme:E="light",caption:g=[]}=B,o=y(null),t=y(null);return U(t,{componentType:b,componentName:f,componentTitle:m,componentDescription:u}),$(z,()=>t.current),D(()=>{if(c.registerPlugin(s),!o.current)return;const x=t.current?.clientHeight||100;return window.innerHeight<=x?s.create({trigger:t.current,start:"top bottom",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*40-20;c.set(o.current,{yPercent:p})}}):(s.create({trigger:t.current,start:"top bottom",end:"bottom bottom",scrub:!0,onUpdate:r=>{const p=r.progress*20-20;c.set(o.current,{yPercent:p})}}),s.create({trigger:t.current,start:"top top",end:"bottom top",scrub:!0,onUpdate:r=>{const p=r.progress*20;c.set(o.current,{yPercent:p})}})),()=>{s.getAll().forEach(r=>r.kill())}},[]),n("div",{ref:t,"data-ui-component-id":"HeroBanner",className:a(E==="dark"?"aiui-dark":"","lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden",P),children:[e("div",{ref:o,className:a("absolute left-0 top-0 size-full"),children:e(L,{className:"laptop:w-full h-full",imgClassName:"h-full object-cover",loading:"eager",fetchPriority:"high",source:`${T?.url||""} , ${R?.url||""} 767`})}),n("div",{className:"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]",children:[n("div",{className:"laptop:text-left max-w-[686px]",children:[m&&e(I,{as:"h1",size:5,className:a("hero-banner-title"),html:m}),u&&e(H,{as:"p",size:3,className:a("hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]"),html:u})]}),n("div",{className:"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2",children:[i&&i.text&&e("a",{href:N(i.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"secondary",className:"hero-banner-secondary-button",children:i.text})}),l&&l.text&&e("a",{href:N(l.link,`${b}_${f}`),children:e(k,{size:"lg",variant:"primary",className:"hero-banner-primary-button",children:l.text})})]})]}),g.length>0&&e("div",{className:"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]",children:g.map((x,d)=>n(v.Fragment,{children:[e(H,{size:2,className:a("hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1"),html:x.title}),d<g.length-1&&e("div",{className:a("bg-info-primary w-px")})]},d))})]})});w.displayName="HeroBanner";var K=M(w);export{K as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start
|
|
5
|
-
"mappings": "aAyFQ,cAAAA,EAWA,QAAAC,MAXA,oBAxFR,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,WAAAC,MAAe,cACxB,OAAOC,MAAU,OACjB,OAAS,iBAAAC,MAAqB,0BAE9B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAAahB,EAAM,WAA4C,CAAC,CAAE,KAAAiB,EAAM,UAAAC,CAAU,EAAGC,IAAQ,CACjG,KAAM,CAAE,MAAAC,EAAO,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,QAAAC,EAAU,CAAC,CAAE,EAAIV,EAE3GW,EAAQ1B,EAAyB,IAAI,EACrC2B,EAAS3B,EAAuB,IAAI,EAG1C,OAAAU,EAAYiB,EAAQ,CAClB,cAAAf,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAEDpB,EAAoBkB,EAAK,IAAMU,EAAO,OAAyB,EAE/D1B,EAAQ,IAAM,CAEZ,GADAC,EAAK,eAAeC,CAAa,EAC7B,CAACuB,EAAM,QAAS,OACpB,MAAME,EAAeD,EAAO,SAAS,cAAgB,IAGrD,OAFqB,OAAO,aAERC,EAClBzB,EAAc,OAAO,CACnB,QAASwB,EAAO,QAChB,MAAO,aACP,IAAK,aACL,MAAO,GACP,SAAWE,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC3B,EAAK,IAAIwB,EAAM,QAAS,CAAE,SAAUI,CAAM,CAAC,CAC7C,CACF,CAAC,GAED3B,EAAc,OAAO,CACnB,QAASwB,EAAO,QAChB,MAAO,aACP,IAAK,gBACL,MAAO,GACP,SAAWE,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAAO,GACrC3B,EAAK,IAAIwB,EAAM,QAAS,CAAE,SAAUI,CAAM,CAAC,CAC7C,CACF,CAAC,EACD3B,EAAc,OAAO,CACnB,QAASwB,EAAO,QAChB,MAAO,UACP,IAAK,aACL,MAAO,GACP,SAAWE,GAAc,CAEvB,MAAMC,EAAQD,EAAK,SAAW,GAC9B3B,EAAK,IAAIwB,EAAM,QAAS,CAAE,SAAUI,CAAM,CAAC,CAC7C,CACF,CAAC,GAEI,IAAM,CACX3B,EAAc,OAAO,EAAE,QAAS4B,GAAWA,EAAE,KAAK,CAAC,CACrD,CACF,EAAG,CAAC,CAAC,EAGHlC,EAAC,OACC,IAAK8B,EACL,uBAAqB,aACrB,UAAWnB,EACTgB,IAAU,OAAS,YAAc,GACjC,6KACAR,CACF,EAEA,UAAApB,EAAC,OAAI,IAAK8B,EAAO,UAAWlB,EAAG,iCAAiC,EAC9D,SAAAZ,EAACU,EAAA,CACC,UAAU,uBACV,aAAa,sBACb,QAAQ,QACR,cAAc,OACd,OAAQ,GAAGc,GAAS,KAAO,EAAE,MAAMC,GAAa,KAAO,EAAE,OAC3D,EACF,EAGAxB,EAAC,OAAI,UAAU,yLACb,UAAAA,EAAC,OAAI,UAAU,iCACZ,UAAAqB,GAAStB,EAACS,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAWG,EAAG,mBAAmB,EAAG,KAAMU,EAAO,EACpFC,GACCvB,EAACW,EAAA,CACC,GAAG,IACH,KAAM,EACN,UAAWC,EACT,oHACF,EACA,KAAMW,EACR,GAEJ,EAEAtB,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useGSAP } from '@gsap/react'\nimport gsap from 'gsap'\nimport { ScrollTrigger } from 'gsap/dist/ScrollTrigger'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'hero_banner'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(({ data, className }, ref) => {\n const { title, subtitle, pcImage, mobileImage, primaryButton, secondaryButton, theme = 'light', caption = [] } = data\n\n const bgRef = useRef<HTMLImageElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n\n\n useExposure(boxRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: subtitle,\n })\n\n useImperativeHandle(ref, () => boxRef.current as HTMLDivElement)\n\n useGSAP(() => {\n gsap.registerPlugin(ScrollTrigger)\n if (!bgRef.current) return\n const clientHeight = boxRef.current?.clientHeight || 100\n const screenHeight = window.innerHeight\n\n if (screenHeight <= clientHeight) {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 40\n const value = self.progress * base - base / 2\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n } else {\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top bottom',\n end: 'bottom bottom',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base - base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n ScrollTrigger.create({\n trigger: boxRef.current,\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n onUpdate: (self: any) => {\n const base = 20\n const value = self.progress * base\n gsap.set(bgRef.current, { yPercent: value })\n },\n })\n }\n return () => {\n ScrollTrigger.getAll().forEach((t: any) => t.kill())\n }\n }, [])\n\n return (\n <div\n ref={boxRef}\n data-ui-component-id=\"HeroBanner\"\n className={cn(\n theme === 'dark' ? 'aiui-dark' : '',\n 'lg-desktop:aspect-[1920/930] desktop:aspect-[1440/700] laptop:aspect-[1024/520] tablet:aspect-[768/660] text-info-primary relative aspect-[390/660] w-full overflow-hidden',\n className\n )}\n >\n <div ref={bgRef} className={cn('absolute left-0 top-0 size-full')}>\n <Picture\n className=\"laptop:w-full h-full\"\n imgClassName=\"h-full object-cover\"\n loading=\"eager\"\n fetchPriority=\"high\"\n source={`${pcImage?.url || ''} , ${mobileImage?.url || ''} 767`}\n />\n </div>\n\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"laptop:top-1/2 laptop:-translate-y-1/2 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] lg-desktop:gap-[32px] absolute top-24 z-10 flex flex-col gap-[24px] px-[16px]\">\n <div className=\"laptop:text-left max-w-[686px]\">\n {title && <Heading as=\"h1\" size={5} className={cn('hero-banner-title')} html={title} />}\n {subtitle && (\n <Text\n as=\"p\"\n size={3}\n className={cn(\n 'hero-banner-subtitle font-heading lg-desktop:text-[18px] laptop:mt-[8px] lg-desktop:mt-[16px] mt-[4px] text-[14px]'\n )}\n html={subtitle}\n />\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"laptop:justify-start lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"secondary\" className=\"hero-banner-secondary-button\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button size=\"lg\" variant=\"primary\" className=\"hero-banner-primary-button\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {caption.length > 0 && (\n <div className=\"laptop:gap-3 tablet:px-[32px] laptop:px-[64px] lg-desktop:px-[calc(50%-832px)] desktop:pb-[24px] absolute bottom-0 z-10 flex items-stretch gap-2 px-[16px] pb-[16px]\">\n {caption.map((c, index) => (\n <React.Fragment key={index}>\n <Text\n size={2}\n className={cn(\n 'hero-banner-product-text tablet:w-[108px] loptop:w-[150px] desktop:w-[156px] lg-desktop:w-[180px] flex-1'\n )}\n html={c.title}\n />\n {index < caption.length - 1 && <div className={cn('bg-info-primary w-px')} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n})\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useGSAP", "gsap", "ScrollTrigger", "Button", "Heading", "Picture", "Text", "cn", "withStyles", "useExposure", "trackUrlRef", "componentType", "componentName", "HeroBanner", "data", "className", "ref", "title", "subtitle", "pcImage", "mobileImage", "primaryButton", "secondaryButton", "theme", "caption", "bgRef", "boxRef", "clientHeight", "self", "value", "t", "c", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as
|
|
1
|
+
"use client";import{jsx as e,jsxs as p}from"react/jsx-runtime";import E,{useImperativeHandle as T,useRef as z}from"react";import{useMediaQuery as H}from"react-responsive";import{Button as u,Heading as P,Picture as x,Text as _}from"../../components/index.js";import{withStyles as j}from"../../shared/Styles.js";import{cn as s}from"../../helpers/utils.js";import{isVideo as y}from"../../shared/mimeType.js";import{useExposure as R}from"../../hooks/useExposure.js";import{trackUrlRef as f}from"../../shared/trackUrlRef.js";const r="image",m="member_area",C=E.forwardRef(({data:b,className:g=""},k)=>{const{title:n,description:c,backgroundImage:t,mobileBackgroundImage:o,primaryButton:a,secondaryButton:l,theme:v,shape:h,primaryButtonHandler:N,secondaryButtonHandler:B}=b,q=H({query:"(max-width: 768px)"}),i=z(null);T(k,()=>i.current),R(i,{componentType:r,componentName:m,componentTitle:n,componentDescription:c});const M=()=>{N?.()},w=()=>{B?.()},d="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return p("section",{"data-ui-component-id":"MemberEquity",className:s("lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]","text-info-primary relative overflow-hidden",g,{"aiui-dark":v==="dark","rounded-box":h==="rounded","h-[480px]":q}),ref:i,children:[y(t?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:block absolute inset-0 hidden size-full object-cover",children:e("source",{src:t?.url,type:"video/mp4"})}):e(x,{source:t?.url,alt:t?.alt,className:"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover"}),y(o?.mimeType)?e("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"laptop:hidden absolute inset-0 size-full object-cover",children:e("source",{src:o?.url,type:"video/mp4"})}):e(x,{source:o?.url,alt:o?.alt,className:"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover"}),e("div",{className:"laptop:items-center absolute inset-0 flex w-full items-end py-[16px]",children:p("div",{className:`
|
|
2
2
|
tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5
|
|
3
3
|
laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4
|
|
4
|
-
`,children:[
|
|
4
|
+
`,children:[p("div",{className:"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col",children:[e(P,{as:"h2",size:3,className:"member-equity-title ",html:n}),e(_,{size:2,className:"member-equity-description",html:c})]}),p("div",{className:"lg-desktop:gap-3 flex items-center gap-2",children:[l&&l.text&&e("a",{href:f(l.link,`${r}_${m}`),children:e(u,{variant:"secondary",onClick:w,className:s("member-equity-button-secondary ",d),children:l.text})}),a&&a.text&&e("a",{href:f(a.link,`${r}_${m}`),children:e(u,{variant:"primary",onClick:M,className:s("member-equity-button-primary ",d),children:a.text})})]})]})})]})});var V=j(C);export{V as default};
|
|
5
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MemberEquity/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text size={2} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"
|
|
5
|
-
"mappings": "aA4EY,cAAAA,EA2BA,QAAAC,MA3BA,oBA3EZ,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,UAAAC,EAAQ,WAAAC,EAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC/C,OAAS,cAAAC,MAAkB,yBAE3B,OAAS,MAAAC,MAAU,yBACnB,OAAS,WAAAC,MAAe,2BACxB,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAE5B,MAAMC,EAAgB,QAChBC,EAAgB,cAEhBC,EAA4Cf,EAAM,WACtD,CAAC,CAAE,KAAAgB,EAAM,UAAAC,EAAY,EAAG,EAAGC,IAAQ,CACjC,KAAM,CACJ,MAAAC,EACA,YAAAC,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,MAAAC,EACA,MAAAC,EACA,qBAAAC,EACA,uBAAAC,CACF,EAAIZ,EAEEa,EAAW1B,EAAc,CAAE,MAAO,oBAAqB,CAAC,EACxD2B,EAAW5B,EAAuB,IAAI,EAE5CD,EAAoBiB,EAAK,IAAMY,EAAS,OAAyB,EAEjEnB,EAAYmB,EAAU,CACpB,cAAAjB,EACA,cAAAC,EACA,eAAgBK,EAChB,qBAAsBC,CACxB,CAAC,EAED,MAAMW,EAA2B,IAAM,CAErCJ,IAAuB,CACzB,EAEMK,EAA6B,IAAM,CAEvCJ,IAAyB,CAC3B,EAEMK,EAAe,mFAErB,OACElC,EAAC,WACC,uBAAqB,eACrB,UAAWU,EACT,yGACA,6CACAQ,EACA,CACE,YAAaQ,IAAU,OACvB,cAAeC,IAAU,UACzB,YAAaG,CACf,CACF,EACA,IAAKC,EAEJ,UAAApB,EAAQW,GAAiB,QAAQ,EAChCvB,EAAC,SACC,SAAQ,GACR,MAAK,GACL,YAAW,GACX,KAAI,GACJ,UAAU,8DAEV,SAAAA,EAAC,UAAO,IAAKuB,GAAiB,IAAK,KAAK,YAAY,EACtD,EAEAvB,EAACQ,EAAA,CACC,OAAQe,GAAiB,IACzB,IAAKA,GAAiB,IACtB,UAAU,kGACZ,EAEDX,EAAQY,GAAuB,QAAQ,EACtCxB,EAAC,SAAM,SAAQ,GAAC,MAAK,GAAC,YAAW,GAAC,KAAI,GAAC,UAAU,wDAC/C,SAAAA,EAAC,UAAO,IAAKwB,GAAuB,IAAK,KAAK,YAAY,EAC5D,EAEAxB,EAACQ,EAAA,CACC,OAAQgB,GAAuB,IAC/B,IAAKA,GAAuB,IAC5B,UAAU,4FACZ,EAEFxB,EAAC,OAAI,UAAW,uEACd,SAAAC,EAAC,OACC,UAAW;AAAA;AAAA;AAAA,cAKX,UAAAA,EAAC,OAAI,UAAU,mHACb,UAAAD,EAACO,EAAA,CAAQ,GAAG,KAAK,KAAM,EAAG,UAAW,uBAAwB,KAAMc,EAAO,EAC1ErB,EAACS,EAAA,CAAK,KAAM,EAAG,UAAW,4BAA6B,KAAMa,EAAa,GAC5E,EAEArB,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport type { MemberEquityProps } from './types.js'\nimport { cn } from '../../helpers/utils.js'\nimport { isVideo } from '../../shared/mimeType.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'member_area'\n\nconst MemberEquity: React.FC<MemberEquityProps> = React.forwardRef<HTMLDivElement, MemberEquityProps>(\n ({ data, className = '' }, ref) => {\n const {\n title,\n description,\n backgroundImage,\n mobileBackgroundImage,\n primaryButton,\n secondaryButton,\n theme,\n shape,\n primaryButtonHandler,\n secondaryButtonHandler,\n } = data\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: title,\n componentDescription: description,\n })\n\n const handleButtonPrimaryClick = () => {\n // \u6267\u884C\u4E3B\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n primaryButtonHandler?.()\n }\n\n const handleButtonSecondaryClick = () => {\n // \u6267\u884C\u526F\u6309\u94AE\u7684\u70B9\u51FB\u4E8B\u4EF6\n secondaryButtonHandler?.()\n }\n\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <section\n data-ui-component-id=\"MemberEquity\"\n className={cn(\n 'lg-desktop:aspect-[1384/560] desktop:aspect-[1090/488] laptop:aspect-[774/336] tablet:aspect-[704/480]',\n 'text-info-primary relative overflow-hidden',\n className,\n {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n 'h-[480px]': isMobile,\n }\n )}\n ref={innerRef}\n >\n {isVideo(backgroundImage?.mimeType) ? (\n <video\n autoPlay\n muted\n playsInline\n loop\n className=\"laptop:block absolute inset-0 hidden size-full object-cover\"\n >\n <source src={backgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={backgroundImage?.url}\n alt={backgroundImage?.alt}\n className=\"laptop:block absolute inset-0 hidden size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n {isVideo(mobileBackgroundImage?.mimeType) ? (\n <video autoPlay muted playsInline loop className=\"laptop:hidden absolute inset-0 size-full object-cover\">\n <source src={mobileBackgroundImage?.url} type=\"video/mp4\" />\n </video>\n ) : (\n <Picture\n source={mobileBackgroundImage?.url}\n alt={mobileBackgroundImage?.alt}\n className=\"laptop:hidden absolute inset-0 size-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n )}\n <div className={'laptop:items-center absolute inset-0 flex w-full items-end py-[16px]'}>\n <div\n className={`\n tablet:px-6 laptop:px-[76px] desktop:px-[111px] lg-desktop:px-[139px] tablet:gap-5 \n laptop:gap-4 desktop:gap-6 lg-desktop:gap-8 flex w-full flex-col gap-6 px-4\n `}\n >\n <div className=\"desktop:gap-2 lg-desktop:gap-4 laptop:max-w-[286px] desktop:max-w-[426px] lg-desktop:max-w-[547px] flex flex-col\">\n <Heading as=\"h2\" size={3} className={`member-equity-title `} html={title} />\n <Text size={2} className={`member-equity-description`} html={description} />\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"lg-desktop:gap-3 flex items-center gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button\n variant=\"secondary\"\n onClick={handleButtonSecondaryClick}\n className={cn('member-equity-button-secondary ', lgButtonSize)}\n >\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button\n variant=\"primary\"\n onClick={handleButtonPrimaryClick}\n className={cn('member-equity-button-primary ', lgButtonSize)}\n >\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </section>\n )\n }\n)\n\nexport default withStyles(MemberEquity)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "useMediaQuery", "Button", "Heading", "Picture", "Text", "withStyles", "cn", "isVideo", "useExposure", "trackUrlRef", "componentType", "componentName", "MemberEquity", "data", "className", "ref", "title", "description", "backgroundImage", "mobileBackgroundImage", "primaryButton", "secondaryButton", "theme", "shape", "primaryButtonHandler", "secondaryButtonHandler", "isMobile", "innerRef", "handleButtonPrimaryClick", "handleButtonSecondaryClick", "lgButtonSize", "MemberEquity_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as T,jsx as a,jsxs as o}from"react/jsx-runtime";import P,{useState as V,useEffect as G,useRef as I}from"react";import{useMediaQuery as L}from"react-responsive";import{withStyles as _}from"../../shared/Styles.js";import x from"../../components/picture.js";import y from"../../components/button.js";import{Heading as $}from"../../components/heading.js";import{Text as S}from"../../components/text.js";import{Grid as R,GridItem as B}from"../../components/gird.js";import C from"../Title/index.js";import{cn as E}from"../../helpers/utils.js";import g from"../SwiperBox/index.js";import{Tabs as j,TabsList as H,TabsTrigger as z,TabsContent as D}from"../../components/tabs.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";import{gaTrack as Q}from"../../shared/track.js";const k="image",b="p1_banner",u=({data:m,configuration:l,jIndex:i})=>{const[r,f]=V(!1),p=L({query:"(max-width: 768px)"}),s=I(null),h=()=>{switch(l?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};U(s,{componentType:k,componentName:b,position:i,componentTitle:m.title,componentDescription:m.description,navigation:l?.activeTab}),G(()=>{f(p)},[p]);const{theme:n="light",title:w,description:c,imageUrl:e,primaryButton:t,secondaryButton:d,imageMobileUrl:N}=m,v="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return a("div",{className:E("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",l?.isTab?h():"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]",{"rounded-2xl":l?.shape==="rounded","aiui-dark":n==="dark","h-[480px]":r&&!l?.isTab,"h-[400px]":r&&l?.isTab},"text-info-primary"),ref:s,children:o("div",{className:"absolute inset-0",children:[a(x,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),a(x,{source:N?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),o("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[o("div",{children:[a($,{size:3,className:"item-title",html:w}),a(S,{size:2,className:"item-description lg-desktop:text-[18px]",html:c})]}),o("div",{className:"flex gap-
|
|
1
|
+
import{Fragment as T,jsx as a,jsxs as o}from"react/jsx-runtime";import P,{useState as V,useEffect as G,useRef as I}from"react";import{useMediaQuery as L}from"react-responsive";import{withStyles as _}from"../../shared/Styles.js";import x from"../../components/picture.js";import y from"../../components/button.js";import{Heading as $}from"../../components/heading.js";import{Text as S}from"../../components/text.js";import{Grid as R,GridItem as B}from"../../components/gird.js";import C from"../Title/index.js";import{cn as E}from"../../helpers/utils.js";import g from"../SwiperBox/index.js";import{Tabs as j,TabsList as H,TabsTrigger as z,TabsContent as D}from"../../components/tabs.js";import{useExposure as U}from"../../hooks/useExposure.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";import{gaTrack as Q}from"../../shared/track.js";const k="image",b="p1_banner",u=({data:m,configuration:l,jIndex:i})=>{const[r,f]=V(!1),p=L({query:"(max-width: 768px)"}),s=I(null),h=()=>{switch(l?.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]"}};U(s,{componentType:k,componentName:b,position:i,componentTitle:m.title,componentDescription:m.description,navigation:l?.activeTab}),G(()=>{f(p)},[p]);const{theme:n="light",title:w,description:c,imageUrl:e,primaryButton:t,secondaryButton:d,imageMobileUrl:N}=m,v="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return a("div",{className:E("item-wrapper text-info-primary group relative box-border w-full overflow-hidden",l?.isTab?h():"tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]",{"rounded-2xl":l?.shape==="rounded","aiui-dark":n==="dark","h-[480px]":r&&!l?.isTab,"h-[400px]":r&&l?.isTab},"text-info-primary"),ref:s,children:o("div",{className:"absolute inset-0",children:[a(x,{source:e?.url,className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${e?.width}/${e?.height}`}}),a(x,{source:N?.url||e?.url,className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),o("div",{className:"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3",children:[o("div",{children:[a($,{size:3,className:"item-title",html:w}),a(S,{size:2,className:"item-description lg-desktop:text-[18px]",html:c})]}),o("div",{className:"lg-desktop:gap-3 flex gap-2",children:[d&&d.text&&a("a",{href:M(d.link,`${k}_${b}`),children:a(y,{className:v,variant:"secondary",children:d.text})}),t&&t.text&&a("a",{href:M(t.link,`${k}_${b}`),children:a(y,{className:v,variant:"primary",children:t.text})})]})]})]})})},q=P.forwardRef((m,l)=>{const{shape:i,sectionTitle:r,groupByTab:f=!1,items:p=[],carousel:s}=m.data,h=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},n=p.map(e=>e.tabName).filter(Boolean).filter((e,t,d)=>d.indexOf(e)===t),w=(e,t)=>{switch(e){case 1:return 1;case 2:return 2;default:return t?2.3:3}},c=n.map(e=>({tabName:e,items:p.filter(t=>t.tabName===e)})).reduce((e,t)=>(e[t.tabName]=t.items,e),{});return o("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:l,className:"text-info-primary",children:[r&&a(C,{data:{title:r},className:"section-title"}),f?o(j,{shape:i,align:"left",defaultValue:n[0],children:[a(H,{children:n.map((e,t)=>a(z,{value:e,onClick:()=>{Q({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:k,component_name:b,component_title:r,component_position:1,navigation:e,button_name:e}})},children:e},t))}),n.map((e,t)=>a(D,{value:e,className:"desktop:mt-[36px] mt-[24px] w-full",children:o(T,{children:[a(g,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:c?.[e]||[],configuration:{shape:i,isTab:f,activeTab:e,num:c?.[e]?.length||0}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:w(c?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:w(c?.[e]?.length||0)}}}),s&&s?.items.length>0?a(g,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:s?.items||[],configuration:{shape:i,isTab:f}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})},t))]}):o(T,{children:[o(R,{className:"w-full",children:[p.map((e,t)=>a(B,{span:h(e.width??"full"),className:"laptop:block hidden",children:a(u,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`)),p.map((e,t)=>a(B,{span:h("full"),className:"laptop:hidden block",children:a(u,{data:e,configuration:{shape:i},jIndex:t})},`${e?.title||""}${t}`))]}),s&&s?.items.length>0?a(g,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:s?.items||[],configuration:{shape:i}},Slide:u,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]})]})});var ie=_(q);export{ie as default};
|
|
2
2
|
//# sourceMappingURL=MultiLayoutGraphicBlock.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n configuration?.isTab\n ? handleAspect()\n : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]',\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text size={2} className=\"item-description lg-desktop:text-[18px]\" html={description} />\n </div>\n <div className=\"flex gap-[16px]\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={tabName!}\n onClick={() => {\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: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
-
"mappings": "AAuEQ,OAkHM,YAAAA,EAlHN,OAAAC,EAYE,QAAAC,MAZF,oBAvER,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,MAAc,QACnD,OAAS,iBAAAC,MAAqB,mBAE9B,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,MAAa,8BACpB,OAAOC,MAAY,6BACnB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BACrB,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAe,wBACtB,OAAS,QAAAC,EAAM,YAAAC,EAAU,eAAAC,EAAa,eAAAC,MAAmB,2BACzD,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAC5B,OAAS,WAAAC,MAAe,wBAExB,MAAMC,EAAgB,QAChBC,EAAgB,YAEhBC,EAAY,CAAC,CAAE,KAAMC,EAAM,cAAAC,EAAe,OAAAC,CAAO,IAA4D,CACjH,KAAM,CAACC,EAAUC,CAAW,EAAI5B,EAAS,EAAK,EACxC6B,EAAa1B,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAE1D2B,EAAM5B,EAAuB,IAAI,EAEjC6B,EAAe,IAAM,CACzB,OAAQN,GAAe,IAAK,CAC1B,IAAK,GACH,MAAO,8LACT,IAAK,GACH,MAAO,4LACT,QACE,MAAO,2LACX,CACF,EAEAP,EAAYY,EAAK,CACf,cAAeT,EACf,cAAeC,EACf,SAAUI,EACV,eAAgBF,EAAK,MACrB,qBAAsBA,EAAK,YAC3B,WAAYC,GAAe,SAC7B,CAAC,EAEDxB,EAAU,IAAM,CACd2B,EAAYC,CAAU,CACxB,EAAG,CAACA,CAAU,CAAC,EAEf,KAAM,CAAE,MAAAG,EAAQ,QAAS,MAAAC,EAAO,YAAAC,EAAa,SAAAC,EAAU,cAAAC,EAAe,gBAAAC,EAAiB,eAAAC,CAAe,EAAId,EACpGe,EAAe,mFAErB,OACE1C,EAAC,OACC,UAAWe,EACT,kFACAa,GAAe,MACXM,EAAa,EACb,4LACJ,CACE,cAAeN,GAAe,QAAU,UACxC,YAAaO,IAAU,OACvB,YAAaL,GAAY,CAACF,GAAe,MACzC,YAAaE,GAAYF,GAAe,KAC1C,EACA,mBACF,EACA,IAAKK,EAEL,SAAAhC,EAAC,OAAI,UAAU,mBACb,UAAAD,EAACQ,EAAA,CACC,OAAQ8B,GAAU,IAClB,UAAU,6CACV,aAAa,wEACb,MAAO,CAAE,YAAa,GAAGA,GAAU,KAAK,IAAIA,GAAU,MAAM,EAAG,EACjE,EACAtC,EAACQ,EAAA,CACC,OAAQiC,GAAgB,KAAOH,GAAU,IACzC,UAAU,6CACV,aAAa,kDACf,EACArC,EAAC,OAAI,UAAU,kFACb,UAAAA,EAAC,OACC,UAAAD,EAACU,EAAA,CAAQ,KAAM,EAAG,UAAU,aAAa,KAAM0B,EAAO,EACtDpC,EAACW,EAAA,CAAK,KAAM,EAAG,UAAU,0CAA0C,KAAM0B,EAAa,GACxF,EACApC,EAAC,OAAI,UAAU,
|
|
4
|
+
"sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withStyles } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../../components/tabs.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { gaTrack } from '../../shared/track.js'\n\nconst componentType = 'image'\nconst componentName = 'p1_banner'\n\nconst ItemBlock = ({ data: item, configuration, jIndex }: { data: Item; configuration?: any; jIndex?: number }) => {\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n const ref = useRef<HTMLDivElement>(null)\n\n const handleAspect = () => {\n switch (configuration?.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[400] laptop:aspect-w-[288] laptop:aspect-h-[384] desktop:aspect-w-[427] desktop:aspect-h-[512] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[640]'\n }\n }\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: jIndex,\n componentTitle: item.title,\n componentDescription: item.description,\n navigation: configuration?.activeTab,\n })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const { theme = 'light', title, description, imageUrl, primaryButton, secondaryButton, imageMobileUrl } = item\n const lgButtonSize = 'lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]'\n\n return (\n <div\n className={cn(\n 'item-wrapper text-info-primary group relative box-border w-full overflow-hidden',\n configuration?.isTab\n ? handleAspect()\n : 'tablet:aspect-w-[704] tablet:aspect-h-[480] laptop:aspect-w-[440] laptop:aspect-h-[384] desktop:aspect-w-[648] desktop:aspect-h-[512] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[640]',\n {\n 'rounded-2xl': configuration?.shape === 'rounded',\n 'aiui-dark': theme === 'dark',\n 'h-[480px]': isMobile && !configuration?.isTab,\n 'h-[400px]': isMobile && configuration?.isTab,\n },\n `text-info-primary`\n )}\n ref={ref}\n >\n <div className=\"absolute inset-0\">\n <Picture\n source={imageUrl?.url}\n className=\"tablet:block hidden h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 group-hover:scale-105 object-cover\"\n style={{ aspectRatio: `${imageUrl?.width}/${imageUrl?.height}` }}\n />\n <Picture\n source={imageMobileUrl?.url || imageUrl?.url}\n className=\"tablet:hidden block h-full overflow-hidden\"\n imgClassName=\"h-full transition-all duration-300 object-cover\"\n />\n <div className=\"laptop:p-6 desktop:p-[32px] absolute inset-x-0 bottom-0 flex flex-col gap-6 p-3\">\n <div>\n <Heading size={3} className=\"item-title\" html={title} />\n <Text size={2} className=\"item-description lg-desktop:text-[18px]\" html={description} />\n </div>\n <div className=\"lg-desktop:gap-3 flex gap-2\">\n {secondaryButton && secondaryButton.text && (\n <a href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"secondary\">\n {secondaryButton.text}\n </Button>\n </a>\n )}\n {primaryButton && primaryButton.text && (\n <a href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}>\n <Button className={lgButtonSize} variant=\"primary\">\n {primaryButton.text}\n </Button>\n </a>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n\n const getSpan = (width: 'full' | 'half' | 'one-third') => {\n switch (width) {\n case 'full':\n return 12\n case 'half':\n return 6\n case 'one-third':\n return 4\n }\n }\n\n const tabNames = items\n .map(item => item.tabName)\n .filter(Boolean)\n .filter((item, index, arr) => arr.indexOf(item) === index) as string[]\n\n const handleTabNumber = (num: Number, flag?: boolean) => {\n switch (num) {\n case 1:\n return 1\n case 2:\n return 2\n default:\n return flag ? 2.3 : 3\n }\n }\n\n const tabItemsMaps = tabNames\n .map(tabName => ({\n tabName,\n items: items.filter(item => item.tabName === tabName),\n }))\n .reduce(\n (acc, cur) => {\n acc[cur.tabName] = cur.items\n return acc\n },\n {} as Record<string, (Item & { width?: 'full' | 'half' | 'one-third' })[]>\n )\n\n return (\n <section data-ui-component-id=\"MultiLayoutGraphicBlock\" ref={ref} className=\"text-info-primary\">\n {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n {groupByTab ? (\n <Tabs shape={shape} align=\"left\" defaultValue={tabNames[0]!}>\n <TabsList>\n {tabNames.map((tabName, index) => (\n <TabsTrigger\n key={index}\n value={tabName!}\n onClick={() => {\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: sectionTitle,\n component_position: 1,\n navigation: tabName,\n button_name: tabName,\n },\n })\n }}\n >\n {tabName}\n </TabsTrigger>\n ))}\n </TabsList>\n {tabNames.map((tabName, index) => (\n <TabsContent key={index} value={tabName!} className=\"desktop:mt-[36px] mt-[24px] w-full\">\n <>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock1'}\n data={{\n list: tabItemsMaps?.[tabName] || [],\n configuration: {\n shape: shape,\n isTab: groupByTab,\n activeTab: tabName,\n num: tabItemsMaps?.[tabName]?.length || 0,\n },\n }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0, true),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleTabNumber(tabItemsMaps?.[tabName]?.length || 0),\n },\n }}\n />\n {carousel && carousel?.items.length > 0 ? (\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock2'}\n data={{ list: carousel?.items || [], configuration: { shape: shape, isTab: groupByTab } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n </TabsContent>\n ))}\n </Tabs>\n ) : (\n <>\n <Grid className=\"w-full\">\n {items.map((item, index) => (\n <GridItem\n key={`${item?.title || ''}${index}`}\n span={getSpan(item.width ?? 'full')}\n className=\"laptop:block hidden\"\n >\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n {items.map((item, index) => (\n <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n <ItemBlock data={item} configuration={{ shape: shape }} jIndex={index} />\n </GridItem>\n ))}\n </Grid>\n {carousel && carousel?.items.length > 0 ? (\n // <Carousel className=\"laptop:mt-4 mt-3\">\n // <CarouselContent className=\"flex\">\n // {carousel.items.map((item, index) => (\n // <CarouselItem\n // key={`${item?.title || ''}${index}`}\n // className=\"tablet:basis-2/5 laptop:basis-[32%] flex basis-4/5\"\n // >\n // <ItemBlock item={item} shape={shape} />\n // </CarouselItem>\n // ))}\n // </CarouselContent>\n // </Carousel>\n <SwiperBox\n className=\"!overflow-visible\"\n id={'MultiLayoutGraphicBlock3'}\n data={{ list: carousel?.items || [], configuration: { shape: shape } }}\n Slide={ItemBlock}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3.1,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n ) : null}\n </>\n )}\n </section>\n )\n})\n\nexport default withStyles(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withStyles", "Picture", "Button", "Heading", "Text", "Grid", "GridItem", "Title", "cn", "SwiperBox", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "getSpan", "width", "tabNames", "index", "arr", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use client";import{Fragment as X,jsx as t,jsxs as c}from"react/jsx-runtime";import _,{useState as S,useEffect as M,useRef as E,useImperativeHandle as H}from"react";import{cn as m}from"../../helpers/utils.js";import V from"../../components/picture.js";import q from"./tabSwitch.js";import T from"../../components/button.js";import R from"../Title/index.js";import $ from"../SwiperBox/index.js";import{withStyles as z}from"../../shared/Styles.js";import{formatVariantPrice as A}from"./shelfDisplay.js";import{useMediaQuery as L}from"react-responsive";import{useExposure as O}from"../../hooks/useExposure.js";import{gaTrack as U}from"../../shared/track.js";import{useAiuiContext as j}from"../AiuiProvider/index.js";import F from"../../components/badge.js";import{Heading as Q}from"../../components/heading.js";import{Text as W}from"../../components/text.js";const B="image",N="product_shelf",G=999999999e-2,J=({data:e,configuration:r})=>{const{locale:d="us",copyWriting:u}=j(),f=(i,n)=>r?.event?.primaryButton?.(i,n+1),v=(i,n)=>r?.event?.secondaryButton?.(i,n+1),o=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},s=!o?.availableForSale&&o?.price?.amount===G,{price:y,basePrice:x}=A({locale:d,amount:o?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),b=()=>{const i=e?.sku,n=e?.variants;return n?.find(l=>l?.sku===i)?.image?.url||n?.[0]?.image?.url||""};return c("div",{className:m("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:m("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(V,{source:b(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,n)=>t(F,{children:i},n))}),t(Q,{title:e?.title||"",size:2,className:"shelf-display-product-title mb-1",children:e?.title||""}),t(W,{size:2,className:"shelf-display-product-description",children:e?.description||""}),t("div",{className:"mb-2 mt-[20px] flex items-center",children:s?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:u?.soldOutText}):c(X,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:y||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:x||""})]})}),c("div",{className:m("
|
|
1
|
+
"use client";import{Fragment as X,jsx as t,jsxs as c}from"react/jsx-runtime";import _,{useState as S,useEffect as M,useRef as E,useImperativeHandle as H}from"react";import{cn as m}from"../../helpers/utils.js";import V from"../../components/picture.js";import q from"./tabSwitch.js";import T from"../../components/button.js";import R from"../Title/index.js";import $ from"../SwiperBox/index.js";import{withStyles as z}from"../../shared/Styles.js";import{formatVariantPrice as A}from"./shelfDisplay.js";import{useMediaQuery as L}from"react-responsive";import{useExposure as O}from"../../hooks/useExposure.js";import{gaTrack as U}from"../../shared/track.js";import{useAiuiContext as j}from"../AiuiProvider/index.js";import F from"../../components/badge.js";import{Heading as Q}from"../../components/heading.js";import{Text as W}from"../../components/text.js";const B="image",N="product_shelf",G=999999999e-2,J=({data:e,configuration:r})=>{const{locale:d="us",copyWriting:u}=j(),f=(i,n)=>r?.event?.primaryButton?.(i,n+1),v=(i,n)=>r?.event?.secondaryButton?.(i,n+1),o=e?.variants?.find(i=>i?.sku===e?.sku)||e?.variants?.[0]||{},s=!o?.availableForSale&&o?.price?.amount===G,{price:y,basePrice:x}=A({locale:d,amount:o?.price?.amount||0,baseAmount:e?.compareAtPrice?.amount||e?.price?.amount||0,currencyCode:e?.price?.currencyCode||"USD"}),b=()=>{const i=e?.sku,n=e?.variants;return n?.find(l=>l?.sku===i)?.image?.url||n?.[0]?.image?.url||""};return c("div",{className:m("laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300",r?.itemShape==="round"?"rounded-2xl":"rounded-none"),children:[t("div",{className:m("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden"),children:t(V,{source:b(),className:"flex h-full justify-center object-cover [&_img]:w-auto"})}),t("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:e?.tags?.slice(0,1)?.map?.((i,n)=>t(F,{children:i},n))}),t(Q,{title:e?.title||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",children:e?.title||""}),t(W,{size:2,className:"shelf-display-product-description line-clamp-1",children:e?.description||""}),t("div",{className:"mb-2 mt-[20px] flex items-center",children:s?t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:u?.soldOutText}):c(X,{children:[t("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:y||""}),t("div",{className:"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold",children:x||""})]})}),c("div",{className:m("lg-desktop:gap-3 flex items-center gap-2",r.direction==="vertical"?"flex-col":""),children:[t(T,{variant:"primary",onClick:()=>f(e,r?.index),className:`
|
|
2
2
|
laptop:text-sm desktop:text-base text-xs
|
|
3
3
|
${r.direction==="vertical"?"w-full":""}
|
|
4
4
|
`,children:r?.primaryButton||""}),t(T,{variant:"secondary",onClick:()=>v(e,r?.index),className:`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading title={data?.title || ''} size={2} className=\"shelf-display-product-title mb-1\">\n {data?.title || ''}\n </Heading>\n <Text size={2} className=\"shelf-display-product-description\">\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn('
|
|
5
|
-
"mappings": "aAkHQ,OAiBE,YAAAA,EAjBF,OAAAC,EAiBE,QAAAC,MAjBF,oBAjHR,OAAOC,GAAS,YAAAC,EAAU,aAAAC,EAAW,UAAAC,EAAQ,uBAAAC,MAA2B,QACxE,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,iBACtB,OAAOC,MAAY,6BACnB,OAAOC,MAAW,oBAClB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,sBAAAC,MAA0B,oBACnC,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,WAAAC,MAAe,wBACxB,OAAS,kBAAAC,MAAsB,2BAC/B,OAAOC,MAAW,4BAClB,OAAS,WAAAC,MAAe,8BACxB,OAAS,QAAAC,MAAY,2BAErB,MAAMC,EAAgB,QAChBC,EAAgB,gBAEhBC,EAAiB,aAyDjBC,EAAmB,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAA0C,CACxF,KAAM,CAAE,OAAAC,EAAS,KAAM,YAAAC,CAAY,EAAIX,EAAe,EAEhDY,EAAkB,CAACC,EAA0BC,IACjDL,GAAe,OAAO,gBAAgBI,EAAQC,EAAQ,CAAC,EAEnDC,EAAoB,CAACF,EAA0BC,IACnDL,GAAe,OAAO,kBAAkBI,EAAQC,EAAQ,CAAC,EAErDE,EAAUR,GAAM,UAAU,KAAMS,GAAcA,GAAM,MAAQT,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGU,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWV,EAErE,CAAE,MAAAa,EAAO,UAAAC,CAAU,EAAIxB,EAAmB,CAC9C,OAAQc,EACR,OAAQM,GAAS,OAAO,QAAU,EAClC,WAAYR,GAAM,gBAAgB,QAAUA,GAAM,OAAO,QAAU,EACnE,aAAcA,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKa,EAAY,IAAM,CACtB,MAAMC,EAAMd,GAAM,IACZe,EAAWf,GAAM,SAEvB,OADgBe,GAAU,KAAMN,GAAcA,GAAM,MAAQK,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEA,OACExC,EAAC,OAEC,UAAWM,EACT,2JACAoB,GAAe,YAAc,QAAU,cAAgB,cACzD,EAEA,UAAA3B,EAAC,OAAI,UAAWO,EAAG,2FAA2F,EAC5G,SAAAP,EAACQ,EAAA,CAAQ,OAAQ+B,EAAU,EAAG,UAAU,yDAAyD,EACnG,EACAvC,EAAC,OAAI,UAAU,2DACZ,SAAA0B,GAAM,MAAM,MAAM,EAAG,CAAC,GAAG,MAAM,CAACS,EAAWH,IACnChC,EAACmB,EAAA,CAAmB,SAAAgB,GAARH,CAAa,CACjC,EACH,EACAhC,EAACoB,EAAA,CAAQ,MAAOM,GAAM,OAAS,GAAI,KAAM,EAAG,UAAU,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport TabSwitch from './tabSwitch.js'\nimport Button from '../../components/button.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport interface ShelfDisplayItem {\n id?: string\n /** \u4EA7\u54C1\u56FE\u7247*/\n img?: {\n url: string\n }\n handle?: string\n sku?: string\n /** \u6298\u6263\u540E\u4EF7\u683C*/\n price?: string\n title?: string\n /** \u6298\u6263\u524D\u4EF7\u683C*/\n basePrice?: string\n subTitle?: string\n /** \u6807\u7B7E*/\n tagItems?: string[]\n tab?: string\n data?: ShelfDisplayItem[]\n}\n\ntype EventType = {\n primaryButton?: (v: any, index: number) => void\n secondaryButton?: (v: any, index: number) => void\n}\n\nexport interface ShelfDisplayProps {\n data: {\n title?: string\n isShowTab?: boolean\n direction?: 'horizontal' | 'vertical'\n align?: 'left' | 'center' | 'right'\n productsTab?: any\n productsCard?: any\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u6807\u7B7E\u9875\u5F62\u72B6*/\n tabShape?: 'rounded' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u526F\u6309\u94AE\u914D\u7F6E */\n secondaryButton?: string\n theme?: 'light' | 'dark'\n }\n buildData?: {\n categories: any[]\n products: any[]\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: EventType\n className?: string\n key?: string\n}\n\nconst ShelfDisplayItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.primaryButton?.(params, index + 1)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number) =>\n configuration?.event?.secondaryButton?.(params, index + 1)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: variant?.price?.amount || 0,\n baseAmount: data?.compareAtPrice?.amount || data?.price?.amount || 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n 'laptop:pt-4 laptop:px-6 laptop:pb-6 bg-container-secondary-1 hover:bg-info-white flex size-full cursor-pointer flex-col overflow-hidden p-4 duration-300',\n configuration?.itemShape === 'round' ? 'rounded-2xl' : 'rounded-none'\n )}\n >\n <div className={cn('lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] overflow-hidden')}>\n <Picture source={handleUrl()} className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </div>\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {data?.tags?.slice(0, 1)?.map?.((item: any, index: number) => {\n return <Badge key={index}>{item}</Badge>\n })}\n </div>\n <Heading title={data?.title || ''} size={2} className=\"shelf-display-product-title mb-1 line-clamp-2\">\n {data?.title || ''}\n </Heading>\n <Text size={2} className=\"shelf-display-product-description line-clamp-1\">\n {data?.description || ''}\n </Text>\n <div className=\"mb-2 mt-[20px] flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{price || ''}</div>\n <div className=\"tablet:text-2xl text-info-secondary ml-1 text-xl font-bold\">{basePrice || ''}</div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index)}\n className={`\n laptop:text-sm desktop:text-base text-xs\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n </div>\n </div>\n )\n}\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n ({ data, buildData, className = '', key, event }, ref) => {\n const [tabId, setTabId] = useState<string>('')\n const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType: componentType,\n componentName: componentName,\n componentTitle: data?.title,\n navigation: tabId,\n })\n\n const {\n productsTab = [],\n productsCard = [],\n title,\n align = 'left',\n isShowTab = true,\n tabShape = 'square',\n ...other\n } = data\n\n const handleCurrentTab = (currentData: ShelfDisplayItem[]) => {\n const newCurrentData = currentData\n ?.map(item => {\n const findData = buildData?.products?.find(params => params?.handle === item?.handle)\n if (findData) {\n return {\n sku: item.sku,\n ...findData,\n }\n }\n })\n ?.filter(item => item)\n setCurrentItems(newCurrentData)\n }\n\n useEffect(() => {\n if (isShowTab) {\n setTabId(productsTab?.[0]?.tab || '')\n handleCurrentTab(productsTab?.[0]?.data || [])\n return\n }\n handleCurrentTab(productsCard)\n }, [])\n\n return (\n <div ref={innerRef} className={cn('w-full', className, { 'aiui-dark': data?.theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n {isShowTab && (\n <div className={`${isMobile ? 'w-full overflow-hidden' : ''}`}>\n <TabSwitch\n value={tabId}\n tabs={productsTab}\n tabShape={tabShape}\n onTabClick={v => {\n setTabId(v?.tab)\n handleCurrentTab(v?.data || [])\n gaTrack({\n event: 'ga4Event',\n event_name: 'component_click',\n event_parameters: {\n page_group: 'Home Page',\n component_type: componentType,\n component_name: componentName,\n component_title: data?.title,\n component_position: 1,\n navigation: v?.tab,\n },\n })\n }}\n />\n </div>\n )}\n <div className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\">\n <SwiperBox\n className=\"mt-6 !overflow-visible\"\n id={`ShelfDisplay${key}${tabId}`}\n data={{ list: currentItems, configuration: { ...other, event: event } }}\n Slide={ShelfDisplayItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </div>\n )\n }\n)\n\nexport default withStyles(ShelfDisplay)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "Picture", "TabSwitch", "Button", "Title", "SwiperBox", "withStyles", "formatVariantPrice", "useMediaQuery", "useExposure", "gaTrack", "useAiuiContext", "Badge", "Heading", "Text", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayItem", "data", "configuration", "locale", "copyWriting", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "price", "basePrice", "handleUrl", "sku", "skuArray", "ShelfDisplay", "buildData", "className", "key", "event", "ref", "tabId", "setTabId", "currentItems", "setCurrentItems", "isMobile", "innerRef", "productsTab", "productsCard", "title", "align", "isShowTab", "tabShape", "other", "handleCurrentTab", "currentData", "newCurrentData", "findData", "v", "ShelfDisplay_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as i}from"react/jsx-runtime";import"react";import{cva as o}from"class-variance-authority";import{cn as n}from"../helpers/index.js";const a=o("text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none",{variants:{size:{sm:"px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight",lg:"lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight"}},defaultVariants:{size:"lg"}});function r({className:t,size:e,...p}){return i("div",{className:n(a({size:e}),t),...p})}var l=r;export{l as default};
|
|
2
2
|
//# sourceMappingURL=badge.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/badge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'px-[8px] pb-[4px] pt-[5px] text-[16px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
-
"mappings": "AAuBS,cAAAA,MAAA,oBAvBT,MAAuB,QACvB,OAA4B,OAAAC,MAAW,2BAEvC,OAAS,MAAAC,MAAU,sBAEnB,MAAMC,EAAgBF,EACpB,0NACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,uDACJ,GAAI,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react'\nimport { type VariantProps, cva } from 'class-variance-authority'\n\nimport { cn } from '../helpers/index.js'\n\nconst badgeVariants = cva(\n 'text-brand-0 outline-brand-0 inline-flex items-center justify-center rounded-[16px] border-none text-xs font-bold outline outline-[1.6px] outline-offset-[-1.6px] backdrop-blur-sm transition-colors focus:outline-none',\n {\n variants: {\n size: {\n sm: 'px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n lg: 'lg-desktop:px-[8px] lg-desktop:pb-[4px] lg-desktop:pt-[5px] lg-desktop:text-[16px] px-[6px] pb-[3px] pt-[4px] text-[14px] leading-tight',\n },\n },\n defaultVariants: {\n size: 'lg',\n },\n }\n)\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}\n\nfunction Badge({ className, size, ...props }: BadgeProps) {\n return <div className={cn(badgeVariants({ size }), className)} {...props} />\n}\n\nexport default Badge\n"],
|
|
5
|
+
"mappings": "AAuBS,cAAAA,MAAA,oBAvBT,MAAuB,QACvB,OAA4B,OAAAC,MAAW,2BAEvC,OAAS,MAAAC,MAAU,sBAEnB,MAAMC,EAAgBF,EACpB,0NACA,CACE,SAAU,CACR,KAAM,CACJ,GAAI,uDACJ,GAAI,yIACN,CACF,EACA,gBAAiB,CACf,KAAM,IACR,CACF,CACF,EAIA,SAASG,EAAM,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAe,CACxD,OAAOP,EAAC,OAAI,UAAWE,EAAGC,EAAc,CAAE,KAAAG,CAAK,CAAC,EAAGD,CAAS,EAAI,GAAGE,EAAO,CAC5E,CAEA,IAAOC,EAAQJ",
|
|
6
6
|
"names": ["jsx", "cva", "cn", "badgeVariants", "Badge", "className", "size", "props", "badge_default"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -1194,10 +1194,6 @@ video {
|
|
|
1194
1194
|
padding-left: 6px;
|
|
1195
1195
|
padding-right: 6px;
|
|
1196
1196
|
}
|
|
1197
|
-
.px-\[8px\] {
|
|
1198
|
-
padding-left: 8px;
|
|
1199
|
-
padding-right: 8px;
|
|
1200
|
-
}
|
|
1201
1197
|
.py-1\.5 {
|
|
1202
1198
|
padding-top: 0.375rem;
|
|
1203
1199
|
padding-bottom: 0.375rem;
|
|
@@ -1230,9 +1226,6 @@ video {
|
|
|
1230
1226
|
.pb-\[3px\] {
|
|
1231
1227
|
padding-bottom: 3px;
|
|
1232
1228
|
}
|
|
1233
|
-
.pb-\[4px\] {
|
|
1234
|
-
padding-bottom: 4px;
|
|
1235
|
-
}
|
|
1236
1229
|
.pb-\[64px\] {
|
|
1237
1230
|
padding-bottom: 64px;
|
|
1238
1231
|
}
|
|
@@ -1260,9 +1253,6 @@ video {
|
|
|
1260
1253
|
.pt-\[4px\] {
|
|
1261
1254
|
padding-top: 4px;
|
|
1262
1255
|
}
|
|
1263
|
-
.pt-\[5px\] {
|
|
1264
|
-
padding-top: 5px;
|
|
1265
|
-
}
|
|
1266
1256
|
.pt-\[64px\] {
|
|
1267
1257
|
padding-top: 64px;
|
|
1268
1258
|
}
|
|
@@ -1910,6 +1900,10 @@ video {
|
|
|
1910
1900
|
padding-left: 28px;
|
|
1911
1901
|
padding-right: 28px;
|
|
1912
1902
|
}
|
|
1903
|
+
.lg-desktop\:px-\[8px\] {
|
|
1904
|
+
padding-left: 8px;
|
|
1905
|
+
padding-right: 8px;
|
|
1906
|
+
}
|
|
1913
1907
|
.lg-desktop\:px-\[calc\(50\%-832px\)\] {
|
|
1914
1908
|
padding-left: calc(50% - 832px);
|
|
1915
1909
|
padding-right: calc(50% - 832px);
|
|
@@ -1923,6 +1917,9 @@ video {
|
|
|
1923
1917
|
.lg-desktop\:pb-\[32px\] {
|
|
1924
1918
|
padding-bottom: 32px;
|
|
1925
1919
|
}
|
|
1920
|
+
.lg-desktop\:pb-\[4px\] {
|
|
1921
|
+
padding-bottom: 4px;
|
|
1922
|
+
}
|
|
1926
1923
|
.lg-desktop\:pt-\[128px\] {
|
|
1927
1924
|
padding-top: 128px;
|
|
1928
1925
|
}
|
|
@@ -1932,6 +1929,9 @@ video {
|
|
|
1932
1929
|
.lg-desktop\:pt-\[32px\] {
|
|
1933
1930
|
padding-top: 32px;
|
|
1934
1931
|
}
|
|
1932
|
+
.lg-desktop\:pt-\[5px\] {
|
|
1933
|
+
padding-top: 5px;
|
|
1934
|
+
}
|
|
1935
1935
|
.lg-desktop\:text-\[16px\] {
|
|
1936
1936
|
font-size: 16px;
|
|
1937
1937
|
}
|