@anker-in/headless-ui 1.1.8 → 1.1.9-alpha.1764038649043
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/AplusDesc/index.js +1 -1
- package/dist/cjs/biz-components/AplusDesc/index.js.map +3 -3
- package/dist/cjs/biz-components/Features/index.js +1 -1
- package/dist/cjs/biz-components/Features/index.js.map +3 -3
- package/dist/cjs/biz-components/GiftBox/index.js +1 -1
- package/dist/cjs/biz-components/GiftBox/index.js.map +3 -3
- package/dist/cjs/biz-components/GraphicMore/index.js +1 -1
- package/dist/cjs/biz-components/GraphicMore/index.js.map +2 -2
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +3 -3
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/cjs/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/cjs/biz-components/SelectStore/index.js +1 -1
- package/dist/cjs/biz-components/SelectStore/index.js.map +3 -3
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +2 -2
- package/dist/esm/biz-components/AplusDesc/index.js +1 -1
- package/dist/esm/biz-components/AplusDesc/index.js.map +3 -3
- package/dist/esm/biz-components/Features/index.js +1 -1
- package/dist/esm/biz-components/Features/index.js.map +3 -3
- package/dist/esm/biz-components/GiftBox/index.js +1 -1
- package/dist/esm/biz-components/GiftBox/index.js.map +3 -3
- package/dist/esm/biz-components/GraphicMore/index.js +1 -1
- package/dist/esm/biz-components/GraphicMore/index.js.map +2 -2
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductGallery/index.js.map +3 -3
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js +1 -1
- package/dist/esm/biz-components/Listing/components/ProductCard/ProductSummary/index.js.map +3 -3
- package/dist/esm/biz-components/SelectStore/index.js +1 -1
- package/dist/esm/biz-components/SelectStore/index.js.map +3 -3
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var i=Object.defineProperty;var
|
|
1
|
+
"use strict";"use client";var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var N=Object.prototype.hasOwnProperty;var b=(l,e)=>{for(var s in e)i(l,s,{get:e[s],enumerable:!0})},v=(l,e,s,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let m of k(e))!N.call(l,m)&&m!==s&&i(l,m,{get:()=>e[m],enumerable:!(p=f(e,m))||p.enumerable});return l};var I=l=>v(i({},"__esModule",{value:!0}),l);var D={};b(D,{default:()=>A});module.exports=I(D);var t=require("react/jsx-runtime"),d=require("../../helpers/utils.js"),r=require("../../shared/Styles.js"),o=require("../../components/index.js"),c=require("../../hooks/useExposure.js"),n=require("react");const y="image",h="aplus_desc",w=({index:l,item:e})=>{const s=(0,n.useRef)(null);return(0,c.useExposure)(s,{componentType:y,componentName:h,position:l+1,componentTitle:e.title,componentDescription:e.desc}),(0,t.jsxs)("div",{ref:s,className:"relative",children:[(0,t.jsx)(o.Picture,{className:" rounded-2xl",imgClassName:"",source:e?.img?.url,alt:e?.img?.alt||""}),(0,t.jsxs)("div",{className:(0,d.cn)("text-info-primary desktop:bottom-[24px] desktop:left-[24px] lg-desktop:bottom-[32px] lg-desktop:left-[32px] absolute bottom-[16px] left-[16px] flex flex-col",{"aiui-dark":e.theme==="dark"}),children:[(0,t.jsx)(o.Text,{html:e?.title,className:" lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2]"}),(0,t.jsx)(o.Text,{html:e?.desc,className:" lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4]"})]})]})},T=l=>{const{data:e,className:s}=l,{title:p,img:m,mobileImg:g,list:x}=e;return(0,t.jsx)(t.Fragment,{children:(0,t.jsxs)("div",{className:"w-full",children:[(0,t.jsxs)("div",{className:"desktop:items-center desktop:justify-between desktop:flex-row flex w-full flex-col",children:[(0,t.jsx)("div",{className:" desktop:w-[600px] lg-desktop:w-[800px]",children:p&&(0,t.jsx)(o.Text,{html:p,className:"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2]"})}),(0,t.jsxs)("div",{children:[m?.url&&(0,t.jsx)(o.Picture,{className:"desktop:block hidden w-[464px] rounded-2xl",imgClassName:"",source:e?.img?.url,alt:e?.img?.alt||""}),g?.url&&(0,t.jsx)(o.Picture,{className:"desktop:hidden block w-[224px] rounded-2xl",imgClassName:"",source:e?.mobileImg?.url,alt:e?.mobileImg?.alt||""})]})]}),(0,t.jsx)("div",{className:"tablet:grid-cols-2 desktop:grid-cols-3 mt-[24px] grid grid-cols-1 gap-[16px]",children:x.map((u,a)=>(0,t.jsx)(w,{index:a,item:u},a))})]})})};var A=(0,r.withLayout)(T);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/AplusDesc/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\ntype AplusItem = {\n img: Img\n mobileImg: Img\n title: string\n desc: string\n theme: 'light' | 'dark'\n}\n\ntype AplusDescType = {\n data: {\n title: string\n img: Img\n mobileImg: Img\n list: AplusItem[]\n }\n className?: string\n}\n\nconst AplusDesc = (props: AplusDescType) => {\n const { data, className } = props\n const { title, img, mobileImg, list } = data\n\n return (\n <>\n <div className=\"w-full\">\n <div className=\"desktop:items-center desktop:justify-between desktop:flex-row flex w-full flex-col\">\n <div className=\" desktop:w-[600px] lg-desktop:w-[800px]\">\n {title && (\n <Text\n html={title}\n className=\"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n <div>\n {img?.url && (\n <Picture\n className=\"desktop:block hidden w-[464px] rounded-2xl\"\n imgClassName=\"\"\n source={data?.img?.url}\n alt={data?.img?.alt || ''}\n />\n )}\n {mobileImg?.url && (\n <Picture\n className=\"desktop:hidden block w-[224px] rounded-2xl\"\n imgClassName=\"\"\n source={data?.mobileImg?.url}\n alt={data?.mobileImg?.alt || ''}\n />\n )}\n </div>\n </div>\n <div className=\"tablet:grid-cols-2 desktop:grid-cols-3 mt-[24px] grid grid-cols-1 gap-[16px]\">\n {list.map((item,
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["AplusDesc_exports", "__export", "AplusDesc_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_Styles", "import_components", "AplusDesc", "props", "data", "className", "title", "img", "mobileImg", "list"
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef } from 'react'\n\ntype AplusItem = {\n img: Img\n mobileImg: Img\n title: string\n desc: string\n theme: 'light' | 'dark'\n}\n\ntype AplusDescType = {\n data: {\n title: string\n img: Img\n mobileImg: Img\n list: AplusItem[]\n }\n className?: string\n}\n\nconst componentType = 'image'\nconst componentName = 'aplus_desc'\n\nconst Item = ({ index, item }: { index: number; item: AplusItem }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.desc,\n })\n\n return (\n <div ref={ref} className=\"relative\">\n <Picture className=\" rounded-2xl\" imgClassName=\"\" source={item?.img?.url} alt={item?.img?.alt || ''} />\n <div\n className={cn(\n 'text-info-primary desktop:bottom-[24px] desktop:left-[24px] lg-desktop:bottom-[32px] lg-desktop:left-[32px] absolute bottom-[16px] left-[16px] flex flex-col',\n {\n 'aiui-dark': item.theme === 'dark',\n }\n )}\n >\n <Text html={item?.title} className=\" lg-desktop:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n <Text html={item?.desc} className=\" lg-desktop:text-[16px] text-[14px] font-bold leading-[1.4]\" />\n </div>\n </div>\n )\n}\n\nconst AplusDesc = (props: AplusDescType) => {\n const { data, className } = props\n const { title, img, mobileImg, list } = data\n\n return (\n <>\n <div className=\"w-full\">\n <div className=\"desktop:items-center desktop:justify-between desktop:flex-row flex w-full flex-col\">\n <div className=\" desktop:w-[600px] lg-desktop:w-[800px]\">\n {title && (\n <Text\n html={title}\n className=\"desktop:text-[16px] lg-desktop:text-[18px] text-[14px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n <div>\n {img?.url && (\n <Picture\n className=\"desktop:block hidden w-[464px] rounded-2xl\"\n imgClassName=\"\"\n source={data?.img?.url}\n alt={data?.img?.alt || ''}\n />\n )}\n {mobileImg?.url && (\n <Picture\n className=\"desktop:hidden block w-[224px] rounded-2xl\"\n imgClassName=\"\"\n source={data?.mobileImg?.url}\n alt={data?.mobileImg?.alt || ''}\n />\n )}\n </div>\n </div>\n <div className=\"tablet:grid-cols-2 desktop:grid-cols-3 mt-[24px] grid grid-cols-1 gap-[16px]\">\n {list.map((item, index) => (\n <Item key={index} index={index} item={item} />\n ))}\n </div>\n </div>\n </>\n )\n}\n\nexport default withLayout(AplusDesc)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA0CM,IAAAI,EAAA,6BAzCNC,EAAmB,kCAEnBC,EAA2B,kCAC3BC,EAA8B,qCAC9BC,EAA4B,sCAC5BC,EAAuB,iBAoBvB,MAAMC,EAAgB,QAChBC,EAAgB,aAEhBC,EAAO,CAAC,CAAE,MAAAC,EAAO,KAAAC,CAAK,IAA0C,CACpE,MAAMC,KAAM,UAAuB,IAAI,EAEvC,wBAAYA,EAAK,CACf,cAAeL,EACf,cAAeC,EACf,SAAUE,EAAQ,EAClB,eAAgBC,EAAK,MACrB,qBAAsBA,EAAK,IAC7B,CAAC,KAGC,QAAC,OAAI,IAAKC,EAAK,UAAU,WACvB,oBAAC,WAAQ,UAAU,eAAe,aAAa,GAAG,OAAQD,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,KACrG,QAAC,OACC,aAAW,MACT,+JACA,CACE,YAAaA,EAAK,QAAU,MAC9B,CACF,EAEA,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,8DAA8D,KACjG,OAAC,QAAK,KAAMA,GAAM,KAAM,UAAU,8DAA8D,GAClG,GACF,CAEJ,EAEME,EAAaC,GAAyB,CAC1C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,MAAAG,EAAO,IAAAC,EAAK,UAAAC,EAAW,KAAAC,CAAK,EAAIL,EAExC,SACE,mBACE,oBAAC,OAAI,UAAU,SACb,qBAAC,OAAI,UAAU,qFACb,oBAAC,OAAI,UAAU,0CACZ,SAAAE,MACC,OAAC,QACC,KAAMA,EACN,UAAU,iFACZ,EAEJ,KACA,QAAC,OACE,UAAAC,GAAK,QACJ,OAAC,WACC,UAAU,6CACV,aAAa,GACb,OAAQH,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDI,GAAW,QACV,OAAC,WACC,UAAU,6CACV,aAAa,GACb,OAAQJ,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,GAEJ,GACF,KACA,OAAC,OAAI,UAAU,+EACZ,SAAAK,EAAK,IAAI,CAACT,EAAMD,OACf,OAACD,EAAA,CAAiB,MAAOC,EAAO,KAAMC,GAA3BD,CAAiC,CAC7C,EACH,GACF,EACF,CAEJ,EAEA,IAAOX,KAAQ,cAAWc,CAAS",
|
|
6
|
+
"names": ["AplusDesc_exports", "__export", "AplusDesc_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_Styles", "import_components", "import_useExposure", "import_react", "componentType", "componentName", "Item", "index", "item", "ref", "AplusDesc", "props", "data", "className", "title", "img", "mobileImg", "list"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var i=Object.defineProperty;var
|
|
1
|
+
"use strict";"use client";var i=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var u=(o,t)=>{for(var s in t)i(o,s,{get:t[s],enumerable:!0})},k=(o,t,s,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let p of c(t))!g.call(o,p)&&p!==s&&i(o,p,{get:()=>t[p],enumerable:!(a=x(t,p))||a.enumerable});return o};var b=o=>k(i({},"__esModule",{value:!0}),o);var y={};u(y,{default:()=>w});module.exports=b(y);var e=require("react/jsx-runtime"),I=require("../../helpers/utils.js"),F=require("../SwiperBox/index.js"),r=require("../../hooks/useExposure.js"),d=require("../../shared/Styles.js"),l=require("../../components/index.js"),m=require("react");const f="image",v="features",N=({index:o,item:t})=>{const s=(0,m.useRef)(null);return(0,r.useExposure)(s,{componentType:f,componentName:v,position:o+1,componentTitle:t.title,componentDescription:t.description}),(0,e.jsxs)("div",{className:`desktop:flex tablet:gap-8 laptop:gap-[64px] gap-4 pt-[64px] ${o%2===0?"laptop:flex-row-reverse":""}`,ref:s,children:[(0,e.jsxs)("div",{className:"desktop:w-[500px] lg-desktop:w-[640px] flex shrink-0 flex-col justify-center",children:[(0,e.jsx)(l.Text,{html:t?.title,className:"graphic-title desktop:text-base desktop:text-[32px] line-clamp-3 text-[24px] leading-[1.2] [&_*_strong]:!font-bold"}),(0,e.jsx)(l.Text,{html:t?.description,className:"graphic-title desktop:pt-[8px] lg-desktop:text-lg desktop:text-base lg-desktop:text-[18px] desktop:text-[16px] pt-[4px] text-[14px] leading-[1.2] [&_*_strong]:!font-bold"}),t?.numberOne&&(0,e.jsxs)("div",{className:"desktop:pt-[48px] desktop:flex-col desktop:gap-[48px] flex flex-row gap-[24px] pt-[24px]",children:[(0,e.jsxs)("div",{className:"",children:[(0,e.jsx)(l.Text,{style:{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))",backgroundClip:"text",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent"},html:t?.numberOne,className:"graphic-title desktop:text-base desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold"}),(0,e.jsx)(l.Text,{html:t?.textOne,className:"graphic-title lg-desktop:text-lg desktop:text-base desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold"})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)(l.Text,{style:{background:"var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))",backgroundClip:"text",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",color:"transparent"},html:t?.numberTwo,className:"graphic-title desktop:text-base desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold"}),(0,e.jsx)(l.Text,{html:t?.textTwo,className:"graphic-title lg-desktop:text-lg desktop:text-base desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold"})]})]}),t?.icon?.url&&(0,e.jsx)("div",{className:"desktop:pt-[24px] lg-desktop:pt-[48px] pt-[24px]",children:(0,e.jsx)(l.Picture,{className:"desktop:w-[368px] lg-desktop:w-[488px] w-[358px]",source:t?.icon?.url,alt:t?.icon?.alt||""})})]}),(0,e.jsx)("div",{className:"md-tablet:hidden laptop:pt-[32px] desktop:pt-0 aspect-[964/560] overflow-hidden rounded-2xl pt-[24px]",children:(0,e.jsx)(l.Picture,{className:"size-full object-cover ",source:t?.img?.url,alt:t?.img?.alt||""})}),(0,e.jsx)("div",{className:"tablet:hidden mt-[24px] aspect-[358/360] overflow-hidden rounded-2xl",children:(0,e.jsx)(l.Picture,{className:"size-full object-cover",source:t?.mobileImg?.url,alt:t?.mobileImg?.alt||""})})]})},h=o=>{const{data:t,className:s}=o,{list:a}=t;return(0,e.jsx)(e.Fragment,{children:(0,e.jsxs)("div",{className:"",children:[t?.title&&(0,e.jsx)("div",{className:"desktop:w-[800px] pb-[24px]",children:(0,e.jsx)(l.Text,{html:t?.title,className:" desktop:!text-[32px] lg-desktop:text-lg desktop:text-base line-clamp-3 !text-[24px] !leading-[1.2] [&_*_strong]:!font-bold"})}),t?.img?.url&&(0,e.jsx)(l.Picture,{className:"md-tablet:hidden aspect-[1664/560] rounded-2xl",imgClassName:"",source:t?.img?.url,alt:t?.img?.alt||""}),t?.mobileImg?.url&&(0,e.jsx)(l.Picture,{className:"tablet:hidden aspect-[358/360] rounded-2xl",imgClassName:"",source:t?.mobileImg?.url,alt:t?.mobileImg?.alt||""}),(0,e.jsx)("div",{className:"flex flex-col gap-4",children:a.map((p,n)=>(0,e.jsx)(N,{index:n,item:p},n))})]})})};var w=(0,d.withLayout)(h);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Features/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nexport type FeaturesDataType = {\n img: Img\n mobileImg: Img\n title: string\n description: string\n numberOne: string\n textOne: string\n numberTwo: string\n textTwo: string\n icon: Img\n}\ntype FeaturesType = {\n data: {\n title: string\n img: Img\n mobileImg: Img\n list: FeaturesDataType[]\n }\n className?: string\n}\n\nconst
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Features_exports", "__export", "Features_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_components", "
|
|
4
|
+
"sourcesContent": ["/* eslint-disable tailwindcss/no-contradicting-classname */\n'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { useRef } from 'react'\n\nexport type FeaturesDataType = {\n img: Img\n mobileImg: Img\n title: string\n description: string\n numberOne: string\n textOne: string\n numberTwo: string\n textTwo: string\n icon: Img\n}\ntype FeaturesType = {\n data: {\n title: string\n img: Img\n mobileImg: Img\n list: FeaturesDataType[]\n }\n className?: string\n}\n\nconst componentType = 'image'\nconst componentName = 'features'\n\nconst Item = ({ index, item }: { index: number; item: FeaturesDataType }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: index + 1,\n componentTitle: item.title,\n componentDescription: item.description,\n })\n\n return (\n <div\n className={`desktop:flex tablet:gap-8 laptop:gap-[64px] gap-4 pt-[64px] ${index % 2 === 0 ? 'laptop:flex-row-reverse' : ''}`}\n ref={ref}\n >\n <div className=\"desktop:w-[500px] lg-desktop:w-[640px] flex shrink-0 flex-col justify-center\">\n <Text\n html={item?.title}\n className=\"graphic-title desktop:text-base desktop:text-[32px] line-clamp-3 text-[24px] leading-[1.2] [&_*_strong]:!font-bold\"\n />\n <Text\n html={item?.description}\n className=\"graphic-title desktop:pt-[8px] lg-desktop:text-lg desktop:text-base lg-desktop:text-[18px] desktop:text-[16px] pt-[4px] text-[14px] leading-[1.2] [&_*_strong]:!font-bold\"\n />\n {/* \u6E10\u53D8\u8272 */}\n {item?.numberOne && (\n <div className=\"desktop:pt-[48px] desktop:flex-col desktop:gap-[48px] flex flex-row gap-[24px] pt-[24px]\">\n <div className=\"\">\n <Text\n style={{\n background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n backgroundClip: 'text',\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent',\n color: 'transparent', // \u5EFA\u8BAE\u52A0\u4E0A\uFF0C\u517C\u5BB9\u90E8\u5206\u6D4F\u89C8\u5668\n }}\n html={item?.numberOne}\n className=\"graphic-title desktop:text-base desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold\"\n />\n <Text\n html={item?.textOne}\n className=\"graphic-title lg-desktop:text-lg desktop:text-base desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold\"\n />\n </div>\n <div>\n <Text\n style={{\n background: 'var(--1, linear-gradient(90deg, #3AD1FF 0%, #008CD6 100%))',\n backgroundClip: 'text',\n WebkitBackgroundClip: 'text',\n WebkitTextFillColor: 'transparent',\n color: 'transparent', // \u5EFA\u8BAE\u52A0\u4E0A\uFF0C\u517C\u5BB9\u90E8\u5206\u6D4F\u89C8\u5668\n }}\n html={item?.numberTwo}\n className=\"graphic-title desktop:text-base desktop:text-[64px] line-clamp-3 text-[40px] leading-none [&_*_strong]:!font-bold\"\n />\n <Text\n html={item?.textTwo}\n className=\"graphic-title lg-desktop:text-lg desktop:text-base desktop:text-[18px] line-clamp-3 text-[14px] leading-[1.4] [&_*_strong]:!font-bold\"\n />\n </div>\n </div>\n )}\n {item?.icon?.url && (\n <div className=\"desktop:pt-[24px] lg-desktop:pt-[48px] pt-[24px]\">\n <Picture\n className=\"desktop:w-[368px] lg-desktop:w-[488px] w-[358px]\"\n source={item?.icon?.url}\n alt={item?.icon?.alt || ''}\n />\n </div>\n )}\n </div>\n <div className=\"md-tablet:hidden laptop:pt-[32px] desktop:pt-0 aspect-[964/560] overflow-hidden rounded-2xl pt-[24px]\">\n <Picture className=\"size-full object-cover \" source={item?.img?.url} alt={item?.img?.alt || ''} />\n </div>\n <div className=\"tablet:hidden mt-[24px] aspect-[358/360] overflow-hidden rounded-2xl\">\n <Picture className=\"size-full object-cover\" source={item?.mobileImg?.url} alt={item?.mobileImg?.alt || ''} />\n </div>\n </div>\n )\n}\n\nconst Features = (props: FeaturesType) => {\n const { data, className } = props\n const { list } = data\n\n return (\n <>\n <div className=\"\">\n {data?.title && (\n <div className=\"desktop:w-[800px] pb-[24px]\">\n <Text\n html={data?.title}\n className=\" desktop:!text-[32px] lg-desktop:text-lg desktop:text-base line-clamp-3 !text-[24px] !leading-[1.2] [&_*_strong]:!font-bold\"\n />\n </div>\n )}\n {data?.img?.url && (\n <Picture\n className=\"md-tablet:hidden aspect-[1664/560] rounded-2xl\"\n imgClassName=\"\"\n source={data?.img?.url}\n alt={data?.img?.alt || ''}\n />\n )}\n {data?.mobileImg?.url && (\n <Picture\n className=\"tablet:hidden aspect-[358/360] rounded-2xl\"\n imgClassName=\"\"\n source={data?.mobileImg?.url}\n alt={data?.mobileImg?.alt || ''}\n />\n )}\n <div className=\"flex flex-col gap-4\">\n {list.map((item, index) => (\n <Item key={index} index={index} item={item} />\n ))}\n </div>\n </div>\n </>\n )\n}\n\nexport default withLayout(Features)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmDQ,IAAAI,EAAA,6BAjDRC,EAAmB,kCACnBC,EAAsB,iCACtBC,EAA4B,sCAE5BC,EAA2B,kCAC3BC,EAA8B,qCAC9BC,EAAuB,iBAuBvB,MAAMC,EAAgB,QAChBC,EAAgB,WAEhBC,EAAO,CAAC,CAAE,MAAAC,EAAO,KAAAC,CAAK,IAAiD,CAC3E,MAAMC,KAAM,UAAuB,IAAI,EAEvC,wBAAYA,EAAK,CACf,cAAeL,EACf,cAAeC,EACf,SAAUE,EAAQ,EAClB,eAAgBC,EAAK,MACrB,qBAAsBA,EAAK,WAC7B,CAAC,KAGC,QAAC,OACC,UAAW,+DAA+DD,EAAQ,IAAM,EAAI,0BAA4B,EAAE,GAC1H,IAAKE,EAEL,qBAAC,OAAI,UAAU,+EACb,oBAAC,QACC,KAAMD,GAAM,MACZ,UAAU,qHACZ,KACA,OAAC,QACC,KAAMA,GAAM,YACZ,UAAU,4KACZ,EAECA,GAAM,cACL,QAAC,OAAI,UAAU,2FACb,qBAAC,OAAI,UAAU,GACb,oBAAC,QACC,MAAO,CACL,WAAY,6DACZ,eAAgB,OAChB,qBAAsB,OACtB,oBAAqB,cACrB,MAAO,aACT,EACA,KAAMA,GAAM,UACZ,UAAU,oHACZ,KACA,OAAC,QACC,KAAMA,GAAM,QACZ,UAAU,wIACZ,GACF,KACA,QAAC,OACC,oBAAC,QACC,MAAO,CACL,WAAY,6DACZ,eAAgB,OAChB,qBAAsB,OACtB,oBAAqB,cACrB,MAAO,aACT,EACA,KAAMA,GAAM,UACZ,UAAU,oHACZ,KACA,OAAC,QACC,KAAMA,GAAM,QACZ,UAAU,wIACZ,GACF,GACF,EAEDA,GAAM,MAAM,QACX,OAAC,OAAI,UAAU,mDACb,mBAAC,WACC,UAAU,mDACV,OAAQA,GAAM,MAAM,IACpB,IAAKA,GAAM,MAAM,KAAO,GAC1B,EACF,GAEJ,KACA,OAAC,OAAI,UAAU,wGACb,mBAAC,WAAQ,UAAU,0BAA0B,OAAQA,GAAM,KAAK,IAAK,IAAKA,GAAM,KAAK,KAAO,GAAI,EAClG,KACA,OAAC,OAAI,UAAU,uEACb,mBAAC,WAAQ,UAAU,yBAAyB,OAAQA,GAAM,WAAW,IAAK,IAAKA,GAAM,WAAW,KAAO,GAAI,EAC7G,GACF,CAEJ,EAEME,EAAYC,GAAwB,CACxC,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,SACE,mBACE,oBAAC,OAAI,UAAU,GACZ,UAAAA,GAAM,UACL,OAAC,OAAI,UAAU,8BACb,mBAAC,QACC,KAAMA,GAAM,MACZ,UAAU,8HACZ,EACF,EAEDA,GAAM,KAAK,QACV,OAAC,WACC,UAAU,iDACV,aAAa,GACb,OAAQA,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDA,GAAM,WAAW,QAChB,OAAC,WACC,UAAU,6CACV,aAAa,GACb,OAAQA,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,KAEF,OAAC,OAAI,UAAU,sBACZ,SAAAE,EAAK,IAAI,CAACN,EAAMD,OACf,OAACD,EAAA,CAAiB,MAAOC,EAAO,KAAMC,GAA3BD,CAAiC,CAC7C,EACH,GACF,EACF,CAEJ,EAEA,IAAOZ,KAAQ,cAAWe,CAAQ",
|
|
6
|
+
"names": ["Features_exports", "__export", "Features_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_useExposure", "import_Styles", "import_components", "import_react", "componentType", "componentName", "Item", "index", "item", "ref", "Features", "props", "data", "className", "list"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var s=Object.defineProperty;var g=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var l in t)s(e,l,{get:t[l],enumerable:!0})},u=(e,t,l,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of d(t))!f.call(e,i)&&i!==l&&s(e,i,{get:()=>t[i],enumerable:!(a=g(t,i))||a.enumerable});return e};var y=e=>u(s({},"__esModule",{value:!0}),e);var B={};x(B,{default:()=>I});module.exports=y(B);var o=require("react/jsx-runtime"),E=require("../../helpers/utils.js"),k=require("../SwiperBox/index.js"),r=require("../../shared/Styles.js"),p=require("../../components/index.js"),c=require("../../hooks/useExposure.js"),n=require("react");const N="image",b="gift_box",T=({index:e,item:t})=>{const l=(0,n.useRef)(null);return(0,c.useExposure)(l,{componentType:N,componentName:b,position:e+1,componentTitle:t.title}),(0,o.jsxs)("div",{className:"laptop:p-[20px] flex flex-col items-center justify-center p-[12px]",children:[(0,o.jsxs)("div",{children:[t?.img?.url&&(0,o.jsx)(p.Picture,{className:"l-tablet:hidden aspect-[194/194]",imgClassName:"",source:t?.img?.url,alt:t?.img?.alt||""}),t?.mobileImg?.url&&(0,o.jsx)(p.Picture,{className:"laptop:hidden aspect-[120/120]",imgClassName:"",source:t?.mobileImg?.url,alt:t?.mobileImg?.alt||""})]}),(0,o.jsx)(p.Text,{html:t?.title,className:"laptop:text-[18px] text-[14px] font-bold leading-[1.4]"})]},e)},v=e=>{const{data:t,className:l}=e,{list:a}=t;return(0,o.jsx)("div",{className:"w-full rounded-2xl bg-[#EAEAEC]",children:(0,o.jsx)("div",{className:"laptop:gap-4 tablet:grid-cols-4 laptop:grid-cols-3 desktop:grid-cols-5 lg-desktop:grid-cols-6 grid grid-cols-2 gap-3",children:a.map((i,m)=>(0,o.jsx)(T,{index:m,item:i},m))})})};var I=(0,r.withLayout)(v);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/GiftBox/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type GiftBoxDataType = {\n img: Img\n mobileImg: Img\n title: string\n}\n\ntype GiftBoxType = {\n data: {\n list: GiftBoxDataType[]\n }\n className?: string\n}\n\nconst
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["GiftBox_exports", "__export", "GiftBox_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_components", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef } from 'react'\n\nexport type GiftBoxDataType = {\n img: Img\n mobileImg: Img\n title: string\n}\n\ntype GiftBoxType = {\n data: {\n list: GiftBoxDataType[]\n }\n className?: string\n}\n\nconst componentType = 'image'\nconst componentName = 'gift_box'\n\nconst Item = ({ index, item }: { index: number; item: GiftBoxDataType }) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useExposure(ref, {\n componentType: componentType,\n componentName: componentName,\n position: index + 1,\n componentTitle: item.title,\n })\n return (\n <div key={index} className=\"laptop:p-[20px] flex flex-col items-center justify-center p-[12px]\">\n <div>\n {item?.img?.url && (\n <Picture\n className=\"l-tablet:hidden aspect-[194/194]\"\n imgClassName=\"\"\n source={item?.img?.url}\n alt={item?.img?.alt || ''}\n />\n )}\n {item?.mobileImg?.url && (\n <Picture\n className=\"laptop:hidden aspect-[120/120]\"\n imgClassName=\"\"\n source={item?.mobileImg?.url}\n alt={item?.mobileImg?.alt || ''}\n />\n )}\n </div>\n <Text html={item?.title} className=\"laptop:text-[18px] text-[14px] font-bold leading-[1.4]\" />\n </div>\n )\n}\n\nconst GiftBox = (props: GiftBoxType) => {\n const { data, className } = props\n const { list } = data\n\n return (\n <div className=\"w-full rounded-2xl bg-[#EAEAEC]\">\n <div className=\"laptop:gap-4 tablet:grid-cols-4 laptop:grid-cols-3 desktop:grid-cols-5 lg-desktop:grid-cols-6 grid grid-cols-2 gap-3\">\n {list.map((item, index) => (\n <Item key={index} index={index} item={item} />\n ))}\n </div>\n </div>\n )\n}\n\nexport default withLayout(GiftBox)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAoCM,IAAAI,EAAA,6BAnCNC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA8B,qCAC9BC,EAA4B,sCAC5BC,EAAuB,iBAevB,MAAMC,EAAgB,QAChBC,EAAgB,WAEhBC,EAAO,CAAC,CAAE,MAAAC,EAAO,KAAAC,CAAK,IAAgD,CAC1E,MAAMC,KAAM,UAAuB,IAAI,EAEvC,wBAAYA,EAAK,CACf,cAAeL,EACf,cAAeC,EACf,SAAUE,EAAQ,EAClB,eAAgBC,EAAK,KACvB,CAAC,KAEC,QAAC,OAAgB,UAAU,qEACzB,qBAAC,OACE,UAAAA,GAAM,KAAK,QACV,OAAC,WACC,UAAU,mCACV,aAAa,GACb,OAAQA,GAAM,KAAK,IACnB,IAAKA,GAAM,KAAK,KAAO,GACzB,EAEDA,GAAM,WAAW,QAChB,OAAC,WACC,UAAU,iCACV,aAAa,GACb,OAAQA,GAAM,WAAW,IACzB,IAAKA,GAAM,WAAW,KAAO,GAC/B,GAEJ,KACA,OAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,yDAAyD,IAnBpFD,CAoBV,CAEJ,EAEMG,EAAWC,GAAuB,CACtC,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,SACE,OAAC,OAAI,UAAU,kCACb,mBAAC,OAAI,UAAU,uHACZ,SAAAE,EAAK,IAAI,CAACN,EAAMD,OACf,OAACD,EAAA,CAAiB,MAAOC,EAAO,KAAMC,GAA3BD,CAAiC,CAC7C,EACH,EACF,CAEJ,EAEA,IAAOZ,KAAQ,cAAWe,CAAO",
|
|
6
|
+
"names": ["GiftBox_exports", "__export", "GiftBox_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_components", "import_useExposure", "import_react", "componentType", "componentName", "Item", "index", "item", "ref", "GiftBox", "props", "data", "className", "list"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var n=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var g=(o,l)=>{for(var d in l)n(o,d,{get:l[d],enumerable:!0})},h=(o,l,d,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of f(l))!u.call(o,a)&&a!==d&&n(o,a,{get:()=>l[a],enumerable:!(s=x(l,a))||s.enumerable});return o};var v=o=>h(n({},"__esModule",{value:!0}),o);var k={};g(k,{default:()=>N});module.exports=v(k);var e=require("react/jsx-runtime"),i=require("../../helpers/utils.js"),w=require("../SwiperBox/index.js"),c=require("../../shared/Styles.js"),p=require("../../components/gird.js"),r=require("../../components/index.js");const b=o=>{const{data:l,className:d}=o,{productsTab:s,shape:a}=l;return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:(0,i.cn)("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]"),children:(0,e.jsx)(p.Grid,{className:(0,i.cn)("tablet:gap-4 grid grid-cols-12 gap-3 ",d),children:s?.map((t,m)=>(0,e.jsxs)(p.GridItem,{span:t.span,className:(0,i.cn)("text-info-primary relative w-full overflow-hidden",a==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":t
|
|
1
|
+
"use strict";"use client";var n=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var g=(o,l)=>{for(var d in l)n(o,d,{get:l[d],enumerable:!0})},h=(o,l,d,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let a of f(l))!u.call(o,a)&&a!==d&&n(o,a,{get:()=>l[a],enumerable:!(s=x(l,a))||s.enumerable});return o};var v=o=>h(n({},"__esModule",{value:!0}),o);var k={};g(k,{default:()=>N});module.exports=v(k);var e=require("react/jsx-runtime"),i=require("../../helpers/utils.js"),w=require("../SwiperBox/index.js"),c=require("../../shared/Styles.js"),p=require("../../components/gird.js"),r=require("../../components/index.js");const b=o=>{const{data:l,className:d}=o,{productsTab:s,shape:a}=l;return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:(0,i.cn)("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]"),children:(0,e.jsx)(p.Grid,{className:(0,i.cn)("tablet:gap-4 grid grid-cols-12 gap-3 ",d),children:s?.map((t,m)=>(0,e.jsxs)(p.GridItem,{span:t.span,className:(0,i.cn)("text-info-primary relative w-full overflow-hidden",a==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":t?.theme==="dark"}),children:[(0,e.jsx)(r.Picture,{source:t?.img?.url,className:"size-full",imgClassName:""}),(0,e.jsxs)("div",{className:"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4",children:[t?.title&&(0,e.jsx)(r.Text,{html:t?.title,as:"p",className:"lg-desktop:text-[24px] line-clamp-2 text-[20px] font-bold leading-[1.2]"}),t?.description&&(0,e.jsx)(r.Text,{html:t?.description,className:"desktop:text-lg line-clamp-2 text-sm font-bold"})]})]},m))})}),(0,e.jsx)("div",{className:"tablet:hidden block text-[#1D1D1F]",children:(0,e.jsx)("div",{className:" flex flex-wrap gap-[12px]",children:s?.map((t,m)=>(0,e.jsxs)("div",{className:(0,i.cn)("text-info-primary relative overflow-hidden",a==="rounded"?"rounded-xl":"rounded-none",{"aiui-dark":t?.theme==="dark"},t?.fullWidth==="true"?"w-full flex-none":" w-[calc(50%-6px)]"),children:[(0,e.jsx)(r.Picture,{source:t?.mobileImg?.url,className:"size-full",imgClassName:"h-full object-cover"}),(0,e.jsxs)("div",{className:"footBottomMob absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4",children:[t?.title&&(0,e.jsx)(r.Text,{html:t?.title,as:"p",className:"line-clamp-3 text-xl font-bold leading-[1.2]"}),t?.description&&(0,e.jsx)(r.Text,{html:t?.description,className:"line-clamp-2 text-xl font-bold"})]})]},m))})})]})};var N=(0,c.withLayout)(b);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/GraphicMore/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\nexport type GraphicMoreDataType = {\n img: Img\n mobileImg: Img\n title: string\n description: string\n theme: 'light' | 'dark'\n fullWidth: 'true' | 'false'\n span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\ntype GraphicMoreType = {\n data: {\n shape?: 'rounded' | 'square'\n productsTab: GraphicMoreDataType[]\n }\n className?: string\n}\n\nconst GraphicMore = (props: GraphicMoreType) => {\n const { data, className } = props\n const { productsTab, shape } = data\n\n return (\n <>\n <div\n className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]')}\n >\n <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n {productsTab?.map((item, index) => {\n return (\n <GridItem\n key={index}\n span={item.span}\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n '',\n {\n 'aiui-dark': item
|
|
5
|
-
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BI,IAAAI,EAAA,6BA5BJC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAkB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,SACE,oBACE,oBAAC,OACC,aAAW,MAAG,sBAAuB,sEAAsE,EAE3G,mBAAC,QAAK,aAAW,MAAG,wCAAyCC,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAD,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\nexport type GraphicMoreDataType = {\n img: Img\n mobileImg: Img\n title: string\n description: string\n theme: 'light' | 'dark'\n fullWidth: 'true' | 'false'\n span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\ntype GraphicMoreType = {\n data: {\n shape?: 'rounded' | 'square'\n productsTab: GraphicMoreDataType[]\n }\n className?: string\n}\n\nconst GraphicMore = (props: GraphicMoreType) => {\n const { data, className } = props\n const { productsTab, shape } = data\n\n return (\n <>\n <div\n className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]')}\n >\n <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n {productsTab?.map((item, index) => {\n return (\n <GridItem\n key={index}\n span={item.span}\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n '',\n {\n 'aiui-dark': item?.theme === 'dark',\n }\n )}\n >\n <Picture source={item?.img?.url} className=\"size-full\" imgClassName=\"\" />\n <div className=\"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4\">\n {item?.title && (\n <Text\n html={item?.title}\n as=\"p\"\n className=\"lg-desktop:text-[24px] line-clamp-2 text-[20px] font-bold leading-[1.2]\"\n />\n )}\n {item?.description && (\n <Text html={item?.description} className=\"desktop:text-lg line-clamp-2 text-sm font-bold\" />\n )}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n </div>\n <div className=\"tablet:hidden block text-[#1D1D1F]\">\n <div className=\" flex flex-wrap gap-[12px]\">\n {productsTab?.map((it, ind) => {\n return (\n <div\n key={ind}\n className={cn(\n 'text-info-primary relative overflow-hidden',\n shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n { 'aiui-dark': it?.theme === 'dark' },\n it?.fullWidth === 'true'\n ? 'w-full flex-none' // \u5360\u6EE1\u6574\u884C\n : ' w-[calc(50%-6px)]' // \u666E\u901A\u5143\u7D20\n )}\n >\n <Picture source={it?.mobileImg?.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n <div className=\"footBottomMob absolute inset-x-0 top-4 flex flex-col gap-[6px] overflow-hidden px-4\">\n {it?.title && (\n <Text html={it?.title} as=\"p\" className=\"line-clamp-3 text-xl font-bold leading-[1.2]\" />\n )}\n {it?.description && <Text html={it?.description} className=\"line-clamp-2 text-xl font-bold\" />}\n </div>\n </div>\n )\n })}\n </div>\n </div>\n </>\n )\n}\n\nexport default withLayout(GraphicMore)\n"],
|
|
5
|
+
"mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA6BI,IAAAI,EAAA,6BA5BJC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA+B,oCAC/BC,EAA8B,qCAkB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,SACE,oBACE,oBAAC,OACC,aAAW,MAAG,sBAAuB,sEAAsE,EAE3G,mBAAC,QAAK,aAAW,MAAG,wCAAyCC,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,OAErB,QAAC,YAEC,KAAMD,EAAK,KACX,aAAW,MACT,oDACAD,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,GAAM,QAAU,MAC/B,CACF,EAEA,oBAAC,WAAQ,OAAQA,GAAM,KAAK,IAAK,UAAU,YAAY,aAAa,GAAG,KACvE,QAAC,OAAI,UAAU,+IACZ,UAAAA,GAAM,UACL,OAAC,QACC,KAAMA,GAAM,MACZ,GAAG,IACH,UAAU,0EACZ,EAEDA,GAAM,gBACL,OAAC,QAAK,KAAMA,GAAM,YAAa,UAAU,iDAAiD,GAE9F,IAvBKC,CAwBP,CAEH,EACH,EACF,KACA,OAAC,OAAI,UAAU,qCACb,mBAAC,OAAI,UAAU,6BACZ,SAAAH,GAAa,IAAI,CAACI,EAAIC,OAEnB,QAAC,OAEC,aAAW,MACT,6CACAJ,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,GAAI,QAAU,MAAO,EACpCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,oBAAC,WAAQ,OAAQA,GAAI,WAAW,IAAK,UAAU,YAAY,aAAa,sBAAsB,KAC9F,QAAC,OAAI,UAAU,sFACZ,UAAAA,GAAI,UACH,OAAC,QAAK,KAAMA,GAAI,MAAO,GAAG,IAAI,UAAU,+CAA+C,EAExFA,GAAI,gBAAe,OAAC,QAAK,KAAMA,GAAI,YAAa,UAAU,iCAAiC,GAC9F,IAhBKC,CAiBP,CAEH,EACH,EACF,GACF,CAEJ,EAEA,IAAOjB,KAAQ,cAAWQ,CAAW",
|
|
6
6
|
"names": ["GraphicMore_exports", "__export", "GraphicMore_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_gird", "import_components", "GraphicMore", "props", "data", "className", "productsTab", "shape", "item", "index", "it", "ind"]
|
|
7
7
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var m=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var T=(i,o)=>{for(var c in o)m(i,c,{get:o[c],enumerable:!0})},D=(i,o,c,d)=>{if(o&&typeof o=="object"||typeof o=="function")for(let l of N(o))!C.call(i,l)&&l!==c&&m(i,l,{get:()=>o[l],enumerable:!(d=y(o,l))||d.enumerable});return i};var E=i=>D(m({},"__esModule",{value:!0}),i);var _={};T(_,{default:()=>P});module.exports=E(_);var t=require("react/jsx-runtime"),n=require("../../../../../../components/index.js"),r=require("@radix-ui/react-tabs"),s=require("react"),x=require("../../../../../../helpers/index.js"),h=require("../../../../BizProductProvider.js"),k=require("../../../../../../shared/Styles.js"),b=require("../../../../../../shared/track.js");const A=()=>{const{product:i,variant:o}=(0,h.useBizProductContext)(),[c,d]=(0,s.useState)(!1),l=(0,s.useMemo)(()=>i?.payload?.components?.find(a=>a.componentKey==="ProductHighlight")?.data||{},[i?.payload]),[g,p]=(0,s.useState)(l?.ksp?.[0]),e=(0,s.useCallback)(a=>{(0,b.gaTrack)({event:"ga4Event",event_name:"lp_button",event_parameters:{page_group:`Product Detail Page${o.sku}`,position:l?.title||"",button_name:a||l?.view||""}})},[l?.title,l?.view,o.sku]);return(0,t.jsxs)("div",{className:"ipc-product-detail-highlight",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[l?.title&&(0,t.jsx)(n.Text,{size:3,className:"font-bold leading-[1.2]",html:l?.title}),(0,t.jsxs)(n.Dialog,{open:c,onOpenChange:d,children:[(0,t.jsx)(n.DialogTrigger,{asChild:!0,children:(0,t.jsx)(n.Button,{variant:"link",className:"!p-0 text-base font-bold",onClick:()=>e(),children:l?.view})}),(0,t.jsx)(L,{ksp:l?.ksp||[],activeKspItem:g,setActiveKspItem:p,gaTrackEvent:e})]})]}),(0,t.jsx)("div",{className:"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4",children:l?.ksp?.map(a=>(0,t.jsx)("div",{className:"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]",children:(0,t.jsx)(n.Text,{size:3,onClick:()=>{p(a),d(!0),e(a?.title)},className:"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]",html:a?.title})},a?.title))})]})},L=({ksp:i,activeKspItem:o,setActiveKspItem:c,gaTrackEvent:d})=>{const l=(0,s.useRef)([]),g=(0,s.useRef)(null),p=(0,s.useCallback)(e=>{const a=i.findIndex(f=>f.title===e?.title),u=l.current[a];if(u&&g.current){const f=g.current,v=u,w=v.offsetLeft-f.offsetWidth/2+v.offsetWidth/2;f.scrollTo({left:w,behavior:"smooth"})}},[i]);return(0,s.useEffect)(()=>{o&&setTimeout(()=>{p(o)},100)},[p,o]),(0,t.jsxs)(n.DialogContent,{className:"tablet:max-w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none p-0 [&_.dialog-close-icon]:size-4",children:[(0,t.jsx)("style",{children:`
|
|
2
2
|
.dialog-close-icon {
|
|
3
|
-
color: ${
|
|
3
|
+
color: ${o?.closeColor||"#1D1D1F"};
|
|
4
4
|
}
|
|
5
|
-
`}),(0,
|
|
5
|
+
`}),(0,t.jsxs)(r.Root,{value:o?.title,className:"w-full overflow-hidden",children:[i?.map(e=>(0,t.jsx)(r.Content,{value:e.title,children:(0,t.jsx)(n.Picture,{source:`${e?.img}, ${e?.mobileImg} 767`,className:"desktop:h-[480px] h-[304px] w-full",alt:e.img.alt,imgClassName:"object-cover h-full"})},e.title)),(0,t.jsxs)("div",{className:"desktop:py-6 w-full overflow-visible py-4",children:[(0,t.jsx)("div",{ref:g,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:"desktop:px-6 overflow-x-auto px-4",children:(0,t.jsx)("div",{className:"rounded-btn w-fit bg-[#EAEAEC]",children:(0,t.jsx)(r.List,{className:"flex w-max p-1",children:i?.map((e,a)=>(0,t.jsx)(r.Trigger,{ref:u=>{u&&(l.current[a]=u)},className:(0,x.cn)("lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]",e.title===o?.title&&"bg-white"),onClick:()=>{p(e),c(e),d(e?.title)},value:e.title,children:(0,t.jsx)(n.Text,{html:e.title,className:"text-[14px] font-bold leading-[1.2]"})},a+e.title))})})}),(0,t.jsx)("div",{className:"desktop:px-6 mt-4 px-4",children:i?.map((e,a)=>(0,t.jsx)(r.Content,{value:e.title,className:"desktop:text-[18px] text-[14px] font-bold",children:e.description},a+e.title))})]})]})]})};var P=(0,k.withLayout)(A);
|
|
6
6
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../../src/biz-components/Listing/components/ProductCard/ProductDetail/ProductHighlight/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "import_Styles", "import_track", "ProductHighlight", "product", "variant", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "ksp", "
|
|
4
|
+
"sourcesContent": ["import { Text, Picture, Button, Dialog, DialogContent, DialogTrigger } from '../../../../../../components/index.js'\nimport { Content, List, Root, Trigger } from '@radix-ui/react-tabs'\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../../../../../../helpers/index.js'\nimport { useBizProductContext } from '../../../../BizProductProvider.js'\nimport { withLayout } from '../../../../../../shared/Styles.js'\nimport { gaTrack } from '../../../../../../shared/track.js'\n\nconst ProductHighlight = () => {\n const { product, variant } = useBizProductContext()\n const [open, setOpen] = useState(false)\n\n const productHighlightData = useMemo(() => {\n return product?.payload?.components?.find((item: any) => item.componentKey === 'ProductHighlight')?.data || {}\n }, [product?.payload])\n\n const [activeKspItem, setActiveKspItem] = useState(productHighlightData?.ksp?.[0])\n\n const gaTrackEvent = useCallback(\n (buttonName?: string) => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'lp_button',\n event_parameters: {\n page_group: `Product Detail Page${variant.sku}`,\n position: productHighlightData?.title || '',\n button_name: buttonName || productHighlightData?.view || '',\n },\n })\n },\n [productHighlightData?.title, productHighlightData?.view, variant.sku]\n )\n\n return (\n <div className=\"ipc-product-detail-highlight\">\n <div className=\"flex items-center justify-between\">\n {productHighlightData?.title && (\n <Text size={3} className=\"font-bold leading-[1.2]\" html={productHighlightData?.title} />\n )}\n <Dialog open={open} onOpenChange={setOpen}>\n <DialogTrigger asChild>\n <Button variant=\"link\" className=\"!p-0 text-base font-bold\" onClick={() => gaTrackEvent()}>\n {productHighlightData?.view}\n </Button>\n </DialogTrigger>\n <ProductHighlightModal\n ksp={productHighlightData?.ksp || []}\n activeKspItem={activeKspItem}\n setActiveKspItem={setActiveKspItem}\n gaTrackEvent={gaTrackEvent}\n />\n </Dialog>\n </div>\n <div className=\"lg-desktop:mt-4 mt-3 flex flex-wrap gap-4\">\n {productHighlightData?.ksp?.map((item: any) => (\n <div\n key={item?.title}\n className=\"product-highlight-item lg-desktop:h-[38px] lg-desktop:leading-[38px] h-[36px] cursor-pointer rounded-full bg-[#F5F5F7] px-4 leading-[36px] hover:bg-[#EAEAEC]\"\n >\n <Text\n size={3}\n onClick={() => {\n setActiveKspItem(item)\n setOpen(true)\n gaTrackEvent(item?.title)\n }}\n className=\"lg-desktop:text-[16px] line-clamp-1 overflow-hidden break-all text-[14px] font-bold text-[#1D1D1F]\"\n html={item?.title}\n />\n </div>\n ))}\n </div>\n </div>\n )\n}\n\nconst ProductHighlightModal = ({\n ksp,\n activeKspItem,\n setActiveKspItem,\n gaTrackEvent,\n}: {\n ksp: any[]\n activeKspItem: any\n setActiveKspItem: (activeKspItem: any) => void\n gaTrackEvent: (buttonName: string) => void\n}) => {\n const highlightRef = useRef<HTMLButtonElement[]>([])\n const scrollContainerRef = useRef<HTMLDivElement>(null)\n\n const autoScrollToActiveItem = useCallback(\n (activeKspItem: any) => {\n const curIndex = ksp.findIndex(item => item.title === activeKspItem?.title)\n const curRef = highlightRef.current[curIndex]\n\n if (curRef && scrollContainerRef.current) {\n const container = scrollContainerRef.current\n const button = curRef\n const scrollLeft = button.offsetLeft - container.offsetWidth / 2 + button.offsetWidth / 2\n\n container.scrollTo({\n left: scrollLeft,\n behavior: 'smooth',\n })\n }\n },\n [ksp]\n )\n\n useEffect(() => {\n if (!activeKspItem) return\n // setActiveKspItem(clickActiveKspItem)\n\n // \u5EF6\u8FDF\u6267\u884C\uFF0C\u7B49\u5F85 Dialog \u548C\u5185\u90E8\u5143\u7D20\u5B8C\u5168\u6E32\u67D3\n setTimeout(() => {\n autoScrollToActiveItem(activeKspItem)\n }, 100)\n }, [autoScrollToActiveItem, activeKspItem])\n\n return (\n <DialogContent className=\"tablet:max-w-[896px] [&_.dialog-close-icon]:laptop:size-6 !rounded-box mx-auto w-full max-w-[326px] overflow-hidden border-none p-0 [&_.dialog-close-icon]:size-4\">\n <style>{`\n .dialog-close-icon {\n color: ${activeKspItem?.closeColor || '#1D1D1F'};\n }\n `}</style>\n <Root value={activeKspItem?.title} className=\"w-full overflow-hidden\">\n {ksp?.map(item => (\n <Content value={item.title} key={item.title}>\n <Picture\n source={`${item?.img}, ${item?.mobileImg} 767`}\n className=\"desktop:h-[480px] h-[304px] w-full\"\n alt={item.img.alt}\n imgClassName=\"object-cover h-full\"\n />\n </Content>\n ))}\n <div className=\"desktop:py-6 w-full overflow-visible py-4\">\n <div\n ref={scrollContainerRef}\n style={{\n scrollbarWidth: 'none',\n msOverflowStyle: 'none',\n }}\n className=\"desktop:px-6 overflow-x-auto px-4\"\n >\n <div className=\"rounded-btn w-fit bg-[#EAEAEC]\">\n <List className=\"flex w-max p-1\">\n {ksp?.map((item, index) => (\n <Trigger\n ref={el => {\n if (el) {\n highlightRef.current[index] = el\n }\n }}\n className={cn(\n 'lg-desktop:px-7 rounded-btn h-[38px] shrink-0 px-5 leading-[38px]',\n item.title === activeKspItem?.title && 'bg-white'\n )}\n onClick={() => {\n autoScrollToActiveItem(item)\n setActiveKspItem(item)\n gaTrackEvent(item?.title)\n }}\n key={index + item.title}\n value={item.title}\n >\n <Text html={item.title} className=\"text-[14px] font-bold leading-[1.2]\" />\n </Trigger>\n ))}\n </List>\n </div>\n </div>\n <div className=\"desktop:px-6 mt-4 px-4\">\n {ksp?.map((item, index) => (\n <Content\n value={item.title}\n key={index + item.title}\n className=\"desktop:text-[18px] text-[14px] font-bold\"\n >\n {item.description}\n </Content>\n ))}\n </div>\n </div>\n </Root>\n </DialogContent>\n )\n}\n\nexport default withLayout(ProductHighlight)\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqCU,IAAAI,EAAA,6BArCVC,EAA4E,iDAC5EC,EAA6C,gCAC7CC,EAAkE,iBAClEC,EAAmB,8CACnBC,EAAqC,6CACrCC,EAA2B,8CAC3BC,EAAwB,6CAExB,MAAMC,EAAmB,IAAM,CAC7B,KAAM,CAAE,QAAAC,EAAS,QAAAC,CAAQ,KAAI,wBAAqB,EAC5C,CAACC,EAAMC,CAAO,KAAI,YAAS,EAAK,EAEhCC,KAAuB,WAAQ,IAC5BJ,GAAS,SAAS,YAAY,KAAMK,GAAcA,EAAK,eAAiB,kBAAkB,GAAG,MAAQ,CAAC,EAC5G,CAACL,GAAS,OAAO,CAAC,EAEf,CAACM,EAAeC,CAAgB,KAAI,YAASH,GAAsB,MAAM,CAAC,CAAC,EAE3EI,KAAe,eAClBC,GAAwB,IACvB,WAAQ,CACN,MAAO,WACP,WAAY,YACZ,iBAAkB,CAChB,WAAY,sBAAsBR,EAAQ,GAAG,GAC7C,SAAUG,GAAsB,OAAS,GACzC,YAAaK,GAAcL,GAAsB,MAAQ,EAC3D,CACF,CAAC,CACH,EACA,CAACA,GAAsB,MAAOA,GAAsB,KAAMH,EAAQ,GAAG,CACvE,EAEA,SACE,QAAC,OAAI,UAAU,+BACb,qBAAC,OAAI,UAAU,oCACZ,UAAAG,GAAsB,UACrB,OAAC,QAAK,KAAM,EAAG,UAAU,0BAA0B,KAAMA,GAAsB,MAAO,KAExF,QAAC,UAAO,KAAMF,EAAM,aAAcC,EAChC,oBAAC,iBAAc,QAAO,GACpB,mBAAC,UAAO,QAAQ,OAAO,UAAU,2BAA2B,QAAS,IAAMK,EAAa,EACrF,SAAAJ,GAAsB,KACzB,EACF,KACA,OAACM,EAAA,CACC,IAAKN,GAAsB,KAAO,CAAC,EACnC,cAAeE,EACf,iBAAkBC,EAClB,aAAcC,EAChB,GACF,GACF,KACA,OAAC,OAAI,UAAU,4CACZ,SAAAJ,GAAsB,KAAK,IAAKC,MAC/B,OAAC,OAEC,UAAU,gKAEV,mBAAC,QACC,KAAM,EACN,QAAS,IAAM,CACbE,EAAiBF,CAAI,EACrBF,EAAQ,EAAI,EACZK,EAAaH,GAAM,KAAK,CAC1B,EACA,UAAU,qGACV,KAAMA,GAAM,MACd,GAZKA,GAAM,KAab,CACD,EACH,GACF,CAEJ,EAEMK,EAAwB,CAAC,CAC7B,IAAAC,EACA,cAAAL,EACA,iBAAAC,EACA,aAAAC,CACF,IAKM,CACJ,MAAMI,KAAe,UAA4B,CAAC,CAAC,EAC7CC,KAAqB,UAAuB,IAAI,EAEhDC,KAAyB,eAC5BR,GAAuB,CACtB,MAAMS,EAAWJ,EAAI,UAAUN,GAAQA,EAAK,QAAUC,GAAe,KAAK,EACpEU,EAASJ,EAAa,QAAQG,CAAQ,EAE5C,GAAIC,GAAUH,EAAmB,QAAS,CACxC,MAAMI,EAAYJ,EAAmB,QAC/BK,EAASF,EACTG,EAAaD,EAAO,WAAaD,EAAU,YAAc,EAAIC,EAAO,YAAc,EAExFD,EAAU,SAAS,CACjB,KAAME,EACN,SAAU,QACZ,CAAC,CACH,CACF,EACA,CAACR,CAAG,CACN,EAEA,sBAAU,IAAM,CACTL,GAIL,WAAW,IAAM,CACfQ,EAAuBR,CAAa,CACtC,EAAG,GAAG,CACR,EAAG,CAACQ,EAAwBR,CAAa,CAAC,KAGxC,QAAC,iBAAc,UAAU,oKACvB,oBAAC,SAAO;AAAA;AAAA,mBAEKA,GAAe,YAAc,SAAS;AAAA;AAAA,QAEjD,KACF,QAAC,QAAK,MAAOA,GAAe,MAAO,UAAU,yBAC1C,UAAAK,GAAK,IAAIN,MACR,OAAC,WAAQ,MAAOA,EAAK,MACnB,mBAAC,WACC,OAAQ,GAAGA,GAAM,GAAG,KAAKA,GAAM,SAAS,OACxC,UAAU,qCACV,IAAKA,EAAK,IAAI,IACd,aAAa,sBACf,GAN+BA,EAAK,KAOtC,CACD,KACD,QAAC,OAAI,UAAU,4CACb,oBAAC,OACC,IAAKQ,EACL,MAAO,CACL,eAAgB,OAChB,gBAAiB,MACnB,EACA,UAAU,oCAEV,mBAAC,OAAI,UAAU,iCACb,mBAAC,QAAK,UAAU,iBACb,SAAAF,GAAK,IAAI,CAACN,EAAMe,OACf,OAAC,WACC,IAAKC,GAAM,CACLA,IACFT,EAAa,QAAQQ,CAAK,EAAIC,EAElC,EACA,aAAW,MACT,oEACAhB,EAAK,QAAUC,GAAe,OAAS,UACzC,EACA,QAAS,IAAM,CACbQ,EAAuBT,CAAI,EAC3BE,EAAiBF,CAAI,EACrBG,EAAaH,GAAM,KAAK,CAC1B,EAEA,MAAOA,EAAK,MAEZ,mBAAC,QAAK,KAAMA,EAAK,MAAO,UAAU,sCAAsC,GAHnEe,EAAQf,EAAK,KAIpB,CACD,EACH,EACF,EACF,KACA,OAAC,OAAI,UAAU,yBACZ,SAAAM,GAAK,IAAI,CAACN,EAAMe,OACf,OAAC,WACC,MAAOf,EAAK,MAEZ,UAAU,4CAET,SAAAA,EAAK,aAHDe,EAAQf,EAAK,KAIpB,CACD,EACH,GACF,GACF,GACF,CAEJ,EAEA,IAAOhB,KAAQ,cAAWU,CAAgB",
|
|
6
|
+
"names": ["ProductHighlight_exports", "__export", "ProductHighlight_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_react_tabs", "import_react", "import_helpers", "import_BizProductProvider", "import_Styles", "import_track", "ProductHighlight", "product", "variant", "open", "setOpen", "productHighlightData", "item", "activeKspItem", "setActiveKspItem", "gaTrackEvent", "buttonName", "ProductHighlightModal", "ksp", "highlightRef", "scrollContainerRef", "autoScrollToActiveItem", "curIndex", "curRef", "container", "button", "scrollLeft", "index", "el"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var ee=Object.create;var V=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,ie=Object.prototype.hasOwnProperty;var oe=(t,a)=>{for(var s in a)V(t,s,{get:a[s],enumerable:!0})},W=(t,a,s,y)=>{if(a&&typeof a=="object"||typeof a=="function")for(let n of le(a))!ie.call(t,n)&&n!==s&&V(t,n,{get:()=>a[n],enumerable:!(y=te(a,n))||y.enumerable});return t};var re=(t,a,s)=>(s=t!=null?ee(ae(t)):{},W(a||!t||!t.__esModule?V(s,"default",{value:t,enumerable:!0}):s,t)),se=t=>W(V({},"__esModule",{value:!0}),t);var pe={};oe(pe,{default:()=>ue});module.exports=se(pe);var e=require("react/jsx-runtime"),$=require("../../../../AiuiProvider/index.js"),N=require("../../../../../components/index.js"),l=require("react"),G=require("swiper/react"),g=require("swiper/modules"),T=require("../../../../../helpers/index.js"),k=require("./types.js"),P=require("@radix-ui/react-tabs"),z=require("../../../BizProductProvider.js"),K=require("../../../hooks/use-variant-media.js"),U=require("./components/SpecsModal.js"),Z=re(require("./components/CompareModal.js")),q=require("../../../utils/index.js"),J=require("../../../../../shared/Styles.js"),Q=require("../../../../../shared/track.js"),X=require("../../../../../components/index.js");const Y=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),O=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),ne=()=>{const{copyWriting:t}=(0,$.useAiuiContext)(),{product:a,variant:s,selectedOptions:y}=(0,z.useBizProductContext)(),n=(0,K.useVariantMedia)({product:a,variant:s}),[p,x]=(0,l.useState)(null),M=(0,l.useRef)(null),m=s?.metafields?.component?.custom_media_list;let h,w,A,S;m&&m?.available?(h=m?.product||[],w=m?.scenarios||[],A=m?.keyFeatures||[],S=m?.video||[]):(h=n?.productList,w=n?.sceneList,A=n?.keyFeaturesList,S=n?.videoList);const o=(0,l.useMemo)(()=>[...h,...w,...S],[h,w,S]),b={productList:h,sceneList:w,keyFeaturesList:A,videoList:S},i=(0,l.useMemo)(()=>(a?.payload?.components?.find(d=>d.componentKey==="ProductGallery")?.data||[])?.map(d=>{let F=b[d?.galleries]||[];if(d?.images&&Array.isArray(d.images)&&d.images.length>0){const j=d.images.map(u=>{const I=[];if(u.image_1920&&u.image_1920.trim()&&I.push(`${u.image_1920} 1920`),u.image_1440&&u.image_1440.trim()&&I.push(`${u.image_1440} 1440`),u.image_1024&&u.image_1024.trim()&&I.push(`${u.image_1024} 1024`),u.image_768&&u.image_768.trim()&&I.push(`${u.image_768} 767`),u.image_390&&u.image_390.trim()&&I.push(`${u.image_390} 390`),I.length>0){const H=I.join(", ");return{image:{url:H,altText:d.comment?.content||""},_fromImages:!0,_responsiveSource:H}}return null}).filter(u=>u!==null);j.length>0&&(F=j)}return{...d,galleries:F}}).filter(d=>d.galleries.length>0),[a?.payload,b]),[E,L]=(0,l.useState)(i?.[0]),[f,_]=(0,l.useState)(0),[C,r]=(0,l.useState)(null),v=(0,l.useCallback)(()=>{const c=(f+1)%i.length;_(c),L(i[c]),r(0)},[f,i]),R=(0,l.useCallback)(()=>{const c=f===0?i.length-1:f-1;_(c),L(i[c]);const d=i[c]?.galleries||[];r(d.length-1)},[f,i]);(0,l.useEffect)(()=>{f!=null&&requestAnimationFrame(()=>{M.current?.scrollToTab(f)})},[f]),(0,l.useEffect)(()=>{L(i[0]),_(0)},[s?.id]);const D=(c,d)=>{switch(c?.galleryTabType){case k.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(B,{...c,index:d,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>r(null)});case k.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(B,{...c,index:d,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>r(null)});case k.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(B,{...c,index:d,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>r(null)});case k.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(de,{...c,onNextTab:v,onPrevTab:R,targetSlideIndex:C,onSlideChange:()=>r(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(P.Root,{className:"relative",value:E?.tabValue,defaultValue:i?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:i.map((c,d)=>(0,e.jsx)(P.Content,{className:"h-full",value:c.tabValue,children:D(c,d)},c.tabValue))}),(0,e.jsx)(ce,{ref:M,galleryTabs:i,activeGalleryTab:E,setActiveGalleryTab:L,setActiveTabIndex:_,setTargetSlideIndex:r})]})})},ce=(0,l.forwardRef)((t,a)=>{const{galleryTabs:s,activeGalleryTab:y,setActiveGalleryTab:n,setActiveTabIndex:p,setTargetSlideIndex:x}=t,{product:M}=(0,z.useBizProductContext)(),m=(0,l.useRef)(null),h=(0,l.useRef)(new Map),w=(0,l.useCallback)((o,b,i)=>{n(b),p(i),x(0),A(o)},[n,p,x]),A=(0,l.useCallback)(o=>{if(m.current){const b=m.current,i=o.currentTarget,E=i.offsetLeft-b.offsetWidth/2+i.offsetWidth/2;b.scrollTo({left:E,behavior:"smooth"})}},[]),S=(0,l.useCallback)(o=>{if(m.current&&s[o]){const b=m.current,i=s[o],E=h.current.get(i.tabValue);if(E){const L=E.offsetLeft-b.offsetWidth/2+E.offsetWidth/2;b.scrollTo({left:L,behavior:"smooth"})}}},[s]);return(0,l.useImperativeHandle)(a,()=>({scrollToTab:S})),(0,e.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,e.jsx)(P.List,{ref:m,className:"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:s?.map((o,b)=>(0,e.jsx)(P.Trigger,{ref:i=>{i?h.current.set(o.tabValue,i):h.current.delete(o.tabValue)},className:(0,T.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",o.tabValue===y?.tabValue&&"bg-white"),onClick:i=>w(i,o,b),value:o.tabValue,children:o.tabLabel},o.tabValue+b))})}),(0,e.jsx)("div",{className:"laptop:gap-2 laptop:flex hidden",children:M.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(U.SpecsModal,{})," | ",(0,e.jsx)(Z.default,{})]})})]})}),B=(0,l.forwardRef)((t,a)=>{const{locale:s="us",copyWriting:y}=(0,$.useAiuiContext)(),{variant:n,totalSavings:p}=(0,z.useBizProductContext)(),x=(0,l.useRef)(null),[M,m]=(0,l.useState)(null),[h,w]=(0,l.useState)(!0),[A,S]=(0,l.useState)(!1),[o,b]=(0,l.useState)(null),i=(0,l.useRef)(null),[E,L]=(0,l.useState)(!1),f=(0,l.useMemo)(()=>{if(t?.galleryTabType===k.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===k.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,k.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),_=(0,l.useCallback)(()=>{o?.isBeginning?t.onPrevTab?.():o?.slidePrev()},[o,t]),C=(0,l.useCallback)(()=>{o?.isEnd?t.onNextTab?.():o?.slideNext()},[o,t]);return(0,l.useEffect)(()=>{o&&t.targetSlideIndex&&(o.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[o,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(G.Swiper,{ref:a,className:"h-full",onSwiper:b,onProgress:r=>{w(r.isBeginning),S(r.isEnd)},onTouchEnd:(r,v)=>{r.isBeginning&&r.swipeDirection==="prev"?_():r.isEnd&&r.swipeDirection==="next"&&C()},pagination:{clickable:!0,el:x.current},thumbs:{swiper:M},modules:[g.Mousewheel,g.Thumbs,g.Navigation,g.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((r,v)=>{const R=`${t.tabValue}-${v}`,D=()=>{(0,Q.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${n.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:v+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},c=r?._responsiveSource||r?.image?.url||"";return(0,e.jsx)(G.SwiperSlide,{className:"h-full",children:(0,e.jsx)(X.ExposureDetector,{onExposure:D,exposureKey:R,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(N.Picture,{source:c,alt:r?.image?.altText,className:(0,T.cn)("h-full",f),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+v)})}),n.availableForSale&&!!p&&!t.index&&(0,e.jsx)(N.Badge,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,q.formatPrice)({amount:p,currencyCode:n?.price?.currencyCode,locale:s})} ${y?.off}`}),(0,e.jsx)("div",{className:(0,T.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:_,children:(0,e.jsx)(Y,{className:(0,T.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,T.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:C,children:(0,e.jsx)(O,{className:(0,T.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)(G.Swiper,{className:"flex items-center justify-between",onSwiper:m,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[g.Navigation,g.Thumbs],children:t?.galleries?.map((r,v)=>(0,e.jsx)(G.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(N.Picture,{source:r.image?.url,alt:r.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+v))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(N.Picture,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,e.jsx)("div",{className:"relative max-w-[528px] overflow-hidden",children:(0,e.jsx)("div",{ref:i,className:(0,T.cn)("line-clamp-2"),style:{},children:(0,e.jsx)(N.Text,{html:t?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]}),(0,e.jsx)("div",{ref:x,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),de=t=>{const[a,s]=(0,l.useState)(null),y=(0,l.useCallback)(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),n=(0,l.useCallback)(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return(0,l.useEffect)(()=>{a&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(G.Swiper,{className:"h-full",onSwiper:s,onTouchEnd:(p,x)=>{p.isBeginning&&p.swipeDirection==="prev"?y():p.isEnd&&p.swipeDirection==="next"&&n()},modules:[g.Mousewheel,g.Thumbs,g.Navigation,g.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((p,x)=>(0,e.jsx)(G.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:p?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:p?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:p?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+x))}),(0,e.jsx)("div",{className:(0,T.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:y,children:(0,e.jsx)(Y,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,T.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:n,children:(0,e.jsx)(O,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ge=t=>(0,e.jsx)("div",{children:"3D View"});var ue=(0,J.withLayout)(ne);
|
|
1
|
+
"use strict";var ee=Object.create;var V=Object.defineProperty;var te=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,ie=Object.prototype.hasOwnProperty;var oe=(t,a)=>{for(var o in a)V(t,o,{get:a[o],enumerable:!0})},H=(t,a,o,h)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of le(a))!ie.call(t,r)&&r!==o&&V(t,r,{get:()=>a[r],enumerable:!(h=te(a,r))||h.enumerable});return t};var re=(t,a,o)=>(o=t!=null?ee(ae(t)):{},H(a||!t||!t.__esModule?V(o,"default",{value:t,enumerable:!0}):o,t)),se=t=>H(V({},"__esModule",{value:!0}),t);var pe={};oe(pe,{default:()=>ue});module.exports=se(pe);var e=require("react/jsx-runtime"),B=require("../../../../AiuiProvider/index.js"),E=require("../../../../../components/index.js"),l=require("react"),G=require("swiper/react"),v=require("swiper/modules"),x=require("../../../../../helpers/index.js"),N=require("./types.js"),L=require("@radix-ui/react-tabs"),z=require("../../../BizProductProvider.js"),O=require("../../../hooks/use-variant-media.js"),K=require("./components/SpecsModal.js"),U=re(require("./components/CompareModal.js")),Z=require("../../../utils/index.js"),q=require("../../../../../shared/Styles.js"),J=require("../../../../../shared/track.js"),Q=require("../../../../../components/index.js");const W=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{x:"48",y:"48",width:"48",height:"48",rx:"24",transform:"rotate(-180 48 48)",fill:"white"}),(0,e.jsx)("path",{d:"M25.1035 16.8545C25.5372 16.3818 26.246 16.3818 26.6797 16.8545C27.1067 17.3201 27.1067 18.0706 26.6797 18.5361L21.668 24L26.6797 29.4639C27.1067 29.9294 27.1067 30.6799 26.6797 31.1455C26.246 31.6182 25.5372 31.6182 25.1035 31.1455L19.3203 24.8408C18.8933 24.3752 18.8933 23.6248 19.3203 23.1592L25.1035 16.8545Z",fill:"currentColor"})]}),Y=t=>(0,e.jsxs)("svg",{width:"48",height:"48",viewBox:"0 0 48 48",fill:"none",xmlns:"http://www.w3.org/2000/svg",...t,children:[(0,e.jsx)("rect",{width:"48",height:"48",rx:"24",transform:"matrix(1 -8.74228e-08 -8.74228e-08 -1 0 48)",fill:"white"}),(0,e.jsx)("path",{d:"M22.8965 16.8545C22.4628 16.3818 21.754 16.3818 21.3203 16.8545C20.8933 17.3201 20.8933 18.0706 21.3203 18.5361L26.332 24L21.3203 29.4639C20.8933 29.9294 20.8933 30.6799 21.3203 31.1455C21.754 31.6182 22.4628 31.6182 22.8965 31.1455L28.6797 24.8408C29.1067 24.3752 29.1067 23.6248 28.6797 23.1592L22.8965 16.8545Z",fill:"currentColor"})]}),ne=()=>{const{copyWriting:t}=(0,B.useAiuiContext)(),{product:a,variant:o,selectedOptions:h}=(0,z.useBizProductContext)(),r=(0,O.useVariantMedia)({product:a,variant:o}),[m,w]=(0,l.useState)(null),C=(0,l.useRef)(null),f=o?.metafields?.component?.custom_media_list;let s,T,P,k;f&&f?.available?(s=f?.product||[],T=f?.scenarios||[],P=f?.keyFeatures||[],k=f?.video||[]):(s=r?.productList,T=r?.sceneList,P=r?.keyFeaturesList,k=r?.videoList);const p=(0,l.useMemo)(()=>[...s,...T,...k],[s,T,k]),g={productList:s,sceneList:T,keyFeaturesList:P,videoList:k},i=(0,l.useMemo)(()=>(a?.payload?.components?.find(n=>n.componentKey==="ProductGallery")?.data||[])?.map(n=>{let $=g[n?.galleries]||[];if(n?.images&&Array.isArray(n.images)&&n.images.length>0){const F=n.images.map(u=>{const _=[];if(u.image_1920&&u.image_1920.trim()&&_.push(`${u.image_1920} 1920`),u.image_1440&&u.image_1440.trim()&&_.push(`${u.image_1440} 1440`),u.image_1024&&u.image_1024.trim()&&_.push(`${u.image_1024} 1024`),u.image_768&&u.image_768.trim()&&_.push(`${u.image_768} 767`),u.image_390&&u.image_390.trim()&&_.push(`${u.image_390} 390`),_.length>0){const j=_.join(", ");return{image:{url:j,altText:n.comment?.content||""},_fromImages:!0,_responsiveSource:j}}return null}).filter(u=>u!==null);F.length>0&&($=F)}return{...n,galleries:$}}).filter(n=>n.galleries.length>0),[a?.payload,g]),[y,c]=(0,l.useState)(i?.[0]),[b,I]=(0,l.useState)(0),[M,S]=(0,l.useState)(null),A=(0,l.useCallback)(()=>{const d=(b+1)%i.length;I(d),c(i[d]),S(0)},[b,i]),R=(0,l.useCallback)(()=>{const d=b===0?i.length-1:b-1;I(d),c(i[d]);const n=i[d]?.galleries||[];S(n.length-1)},[b,i]);(0,l.useEffect)(()=>{b!=null&&requestAnimationFrame(()=>{C.current?.scrollToTab(b)})},[b]),(0,l.useEffect)(()=>{c(i[0]),I(0)},[o?.id]);const X=(d,n)=>{switch(d?.galleryTabType){case N.GalleryTabType.GALLERY_IMAGE_MAIN:return(0,e.jsx)(D,{...d,index:n,onNextTab:A,onPrevTab:R,targetSlideIndex:M,onSlideChange:()=>S(null)});case N.GalleryTabType.GALLERY_IMAGE_FEATURES:return(0,e.jsx)(D,{...d,index:n,onNextTab:A,onPrevTab:R,targetSlideIndex:M,onSlideChange:()=>S(null)});case N.GalleryTabType.GALLERY_IMAGE_SCENE:return(0,e.jsx)(D,{...d,index:n,onNextTab:A,onPrevTab:R,targetSlideIndex:M,onSlideChange:()=>S(null)});case N.GalleryTabType.GALLERY_VIDEO:return(0,e.jsx)(de,{...d,onNextTab:A,onPrevTab:R,targetSlideIndex:M,onSlideChange:()=>S(null)});default:return null}};return(0,e.jsx)("div",{id:"ipc-product-gallery",children:(0,e.jsxs)(L.Root,{className:"relative",value:y?.tabValue,defaultValue:i?.[0]?.tabValue,children:[(0,e.jsx)("div",{className:"tablet:h-[620px] desktop:rounded-2xl desktop:h-[560px] lg-desktop:h-[700px] desktop:relative h-[420px] overflow-hidden bg-[#EAEAEC] ",children:i.map((d,n)=>(0,e.jsx)(L.Content,{className:"h-full",value:d.tabValue,children:X(d,n)},d.tabValue))}),(0,e.jsx)(ce,{ref:C,galleryTabs:i,activeGalleryTab:y,setActiveGalleryTab:c,setActiveTabIndex:I,setTargetSlideIndex:S})]})})},ce=(0,l.forwardRef)((t,a)=>{const{galleryTabs:o,activeGalleryTab:h,setActiveGalleryTab:r,setActiveTabIndex:m,setTargetSlideIndex:w}=t,{product:C}=(0,z.useBizProductContext)(),f=(0,l.useRef)(null),s=(0,l.useRef)(new Map),T=(0,l.useCallback)(p=>{if(f.current){const g=f.current,i=p.currentTarget,y=i.offsetLeft-g.offsetWidth/2+i.offsetWidth/2;g.scrollTo({left:y,behavior:"smooth"})}},[]),P=(0,l.useCallback)((p,g,i)=>{r(g),m(i),w(0),T(p)},[r,m,w,T]),k=(0,l.useCallback)(p=>{if(f.current&&o[p]){const g=f.current,i=o[p],y=s.current.get(i.tabValue);if(y){const c=y.offsetLeft-g.offsetWidth/2+y.offsetWidth/2;g.scrollTo({left:c,behavior:"smooth"})}}},[o]);return(0,l.useImperativeHandle)(a,()=>({scrollToTab:k})),(0,e.jsxs)("div",{className:"laptop:inset-x-16 tablet:mt-3 desktop:static absolute inset-x-4 bottom-4 z-[2] flex items-center justify-between",children:[(0,e.jsx)(L.List,{ref:f,className:"laptop:p-0 desktop:p-1 overflow-x-auto rounded-full bg-[#EAEAEC] p-1",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:(0,e.jsx)("div",{className:"whitespace-nowrap",children:o?.map((p,g)=>(0,e.jsx)(L.Trigger,{ref:i=>{i?s.current.set(p.tabValue,i):s.current.delete(p.tabValue)},className:(0,x.cn)("lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px] rounded-full px-5 pb-[10px] pt-[11px] text-[14px] font-bold leading-tight",p.tabValue===h?.tabValue&&"bg-white"),onClick:i=>P(i,p,g),value:p.tabValue,children:p.tabLabel},p.tabValue+g))})}),(0,e.jsx)("div",{className:"laptop:gap-2 laptop:flex hidden",children:C.metafields?.global?.specifications&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(K.SpecsModal,{})," | ",(0,e.jsx)(U.default,{})]})})]})}),D=(0,l.forwardRef)((t,a)=>{const{locale:o="us",copyWriting:h}=(0,B.useAiuiContext)(),{variant:r,totalSavings:m}=(0,z.useBizProductContext)(),w=(0,l.useRef)(null),[C,f]=(0,l.useState)(null),[s,T]=(0,l.useState)(null),P=(0,l.useRef)(null),[k,p]=(0,l.useState)(!1),g=(0,l.useMemo)(()=>{if(t?.galleryTabType===N.GalleryTabType.GALLERY_IMAGE_MAIN)return"size-[240px] mx-auto mt-[42px] tablet:mt-16 tablet:size-[420px] lg-desktop:size-[560px]";t?.galleryTabType===N.GalleryTabType.GALLERY_IMAGE_FEATURES||(t?.galleryTabType,N.GalleryTabType.GALLERY_IMAGE_SCENE)},[t?.galleryTabType]),i=(0,l.useCallback)(()=>{s?.isBeginning?t.onPrevTab?.():s?.slidePrev()},[s,t]),y=(0,l.useCallback)(()=>{s?.isEnd?t.onNextTab?.():s?.slideNext()},[s,t]);return(0,l.useEffect)(()=>{s&&t.targetSlideIndex&&(s.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[s,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(G.Swiper,{ref:a,className:"h-full",onSwiper:T,onTouchEnd:(c,b)=>{c.isBeginning&&c.swipeDirection==="prev"?i():c.isEnd&&c.swipeDirection==="next"&&y()},pagination:{clickable:!0,el:w.current},thumbs:{swiper:C},modules:[v.Mousewheel,v.Thumbs,v.Navigation,v.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((c,b)=>{const I=`${t.tabValue}-${b}`,M=()=>{(0,J.gaTrack)({event:"ga4Event",event_name:"component_impression",event_parameters:{page_group:`Product Detail Page${r.sku}`,component_type:"image",component_name:t?.tabLabel||"",position:b+1,creative_id:"",component_title:"",component_description:"",navigation:""}})},S=c?._responsiveSource||c?.image?.url||"";return(0,e.jsx)(G.SwiperSlide,{className:"h-full",children:(0,e.jsx)(Q.ExposureDetector,{onExposure:M,exposureKey:I,threshold:.5,duration:2e3,className:"h-full",children:(0,e.jsx)(E.Picture,{source:S,alt:c?.image?.altText,className:(0,x.cn)("h-full",g),imgClassName:"object-cover h-full"})})},t?.id+"SwiperSlideItem"+b)})}),r.availableForSale&&!!m&&!t.index&&(0,e.jsx)(E.Badge,{size:"lg",className:"bg-brand laptop:left-16 laptop:top-5 desktop:left-6 desktop:top-6 absolute left-4 top-3 z-[2] text-white",children:`${(0,Z.formatPrice)({amount:m,currencyCode:r?.price?.currencyCode,locale:o})} ${h?.off}`}),(0,e.jsx)("div",{className:(0,x.cn)("tablet:opacity-0 tablet:block tablet:absolute tablet:top-1/2 laptop:left-16 tablet:left-6 desktop:left-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:i,children:(0,e.jsx)(W,{className:(0,x.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsx)("div",{className:(0,x.cn)("tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 laptop:right-16 tablet:right-6 desktop:right-6 z-10 hidden -translate-y-1/2 cursor-pointer","swiper-button"),onClick:y,children:(0,e.jsx)(Y,{className:(0,x.cn)("tablet:size-10 lg-desktop:size-12")})}),(0,e.jsxs)("div",{className:"tablet:bottom-[70px] tablet:flex laptop:inset-x-16 desktop:bottom-[20px] desktop:inset-x-6 absolute inset-x-4 bottom-[94px] z-10 items-center justify-between",children:[(0,e.jsx)("div",{className:"tablet:block hidden",children:(0,e.jsx)(G.Swiper,{className:"flex items-center justify-between",onSwiper:f,spaceBetween:12,slidesPerView:6,freeMode:!0,watchSlidesProgress:!0,modules:[v.Navigation,v.Thumbs],children:t?.galleries?.map((c,b)=>(0,e.jsx)(G.SwiperSlide,{className:"[&.swiper-slide-thumb-active]:border-brand !w-auto cursor-pointer border border-transparent [&.swiper-slide-thumb-active]:rounded",children:(0,e.jsx)(E.Picture,{source:c.image?.url,alt:c.image?.altText,className:"lg-desktop:size-12 size-10 overflow-hidden rounded bg-white",imgClassName:"object-cover h-full"})},t?.id+"SwiperSlideThumbItem"+b))})}),!t?.index&&(0,e.jsxs)("div",{className:"flex items-center gap-2",children:[(0,e.jsx)(E.Picture,{source:t?.comment?.avatar?.url,className:"laptop:size-10 size-8 shrink-0 rounded-full",imgClassName:"object-cover "}),(0,e.jsx)("div",{className:"relative max-w-[528px] overflow-hidden",children:(0,e.jsx)("div",{ref:P,className:(0,x.cn)("line-clamp-2"),style:{},children:(0,e.jsx)(E.Text,{html:t?.comment?.content,className:"lg-desktop:text-base text-sm font-bold text-[#1D1D1F]"})})})]})]}),(0,e.jsx)("div",{ref:w,className:"tablet:hidden absolute inset-x-4 !bottom-[70px] z-10 text-center [&_.swiper-pagination-bullet-active]:!bg-[#1D1D1F] [&_.swiper-pagination-bullet]:bg-white [&_.swiper-pagination-bullet]:opacity-100"})]})}),de=t=>{const[a,o]=(0,l.useState)(null),h=(0,l.useCallback)(()=>{a?.isBeginning?t.onPrevTab?.():a?.slidePrev()},[a,t]),r=(0,l.useCallback)(()=>{a?.isEnd?t.onNextTab?.():a?.slideNext()},[a,t]);return(0,l.useEffect)(()=>{a&&t.targetSlideIndex!==null&&t.targetSlideIndex!==void 0&&(a.slideTo(t.targetSlideIndex,0),t.onSlideChange?.())},[a,t.targetSlideIndex,t]),(0,e.jsxs)("div",{className:"h-full [&_.swiper-button]:hover:opacity-100",children:[(0,e.jsx)(G.Swiper,{className:"h-full",onSwiper:o,onTouchEnd:(m,w)=>{m.isBeginning&&m.swipeDirection==="prev"?h():m.isEnd&&m.swipeDirection==="next"&&r()},modules:[v.Mousewheel,v.Thumbs,v.Navigation,v.Pagination],mousewheel:{forceToAxis:!0},breakpoints:{0:{slidesPerView:1,freeMode:!1}},children:t?.galleries?.map((m,w)=>(0,e.jsx)(G.SwiperSlide,{className:"h-full",children:(0,e.jsxs)("video",{controls:!0,className:"size-full object-cover",children:[(0,e.jsx)("track",{kind:"captions"}),(0,e.jsx)("source",{src:m?.sources?.[0]?.url,type:"video/mp4"}),(0,e.jsx)("source",{src:m?.sources?.[0]?.url,type:"video/webm"}),(0,e.jsx)("source",{src:m?.sources?.[0]?.url,type:"video/ogg"})]})},t?.id+"SwiperSlideItem"+w))}),(0,e.jsx)("div",{className:(0,x.cn)("swiper-button tablet:block tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:left-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:h,children:(0,e.jsx)(W,{className:"tablet:size-10 lg-desktop:size-12"})}),(0,e.jsx)("div",{className:(0,x.cn)("tablet:block swiper-button tablet:opacity-0 tablet:absolute tablet:top-1/2 tablet:right-6 z-10 hidden -translate-y-1/2 cursor-pointer"),onClick:r,children:(0,e.jsx)(Y,{className:"tablet:size-10 lg-desktop:size-12"})})]})},ge=t=>(0,e.jsx)("div",{children:"3D View"});var ue=(0,q.withLayout)(ne);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|