@anker-in/headless-ui 1.0.19-temp-101407 → 1.0.19-temp-101408

package/dist/esm/biz-components/HeaderNavigation/types.d.ts

@@ -1,26 +1,14 @@
 import type { Product } from '../../cpn-components/CpnProductCard/types.js';
 export interface HeaderNavigationProps {
     data: any;
-    searchResult?: any;
-    onSearch?: (value?: string) => void;
-    isSearching?: boolean;
-    keywords?: {
-        search_term: string;
-        search_date: string;
-        shopify_domain: string;
-        counts: number;
-    }[];
     event?: {
         search?: () => void;
         cart?: () => void;
         profile?: () => void;
         livestream?: () => void;
-        join?: () => void;
-        login?: () => void;
     };
     buildProps: {
-        products?: Product[];
-        categories?: Record<string, any>;
+        products: Product[];
     };
     profile?: UserProfile;
     theme?: string;
@@ -44,8 +32,7 @@ export declare enum HeaderNavigationMenu {
 export declare enum HeaderNavigationBlockType {
     Sidebar = "ipc-navigation-sidebar",
     Supports = "ipc-navigation-supports",
-    Multicol = "ipc-navigation-multicol",
-    Links = "ipc-navigation-links"
+    Multicol = "ipc-navigation-multicol"
 }
 export declare enum HeaderNavigationActionBlockType {
     Search = "ipc-navigation-action-search",
@@ -58,7 +45,6 @@ export interface MobileNavigationProps {
 }
 export interface DesktopNavigationProps {
     data: any;
-    onNavItemClick?: () => void;
 }
 type Country = {
     id?: number;

package/dist/esm/biz-components/HeaderNavigation/types.js

@@ -1,2 +1,2 @@
-import"react";var r=(i=>(i.Primary="primary",i.Secondary="secondary",i.Third="third",i))(r||{}),t=(n=>(n.Sidebar="ipc-navigation-sidebar",n.Supports="ipc-navigation-supports",n.Multicol="ipc-navigation-multicol",n.Links="ipc-navigation-links",n))(t||{}),o=(n=>(n.Search="ipc-navigation-action-search",n.Cart="ipc-navigation-action-cart",n.Profile="ipc-navigation-action-profile",n.Livestream="ipc-navigation-action-livestream",n))(o||{});export{o as HeaderNavigationActionBlockType,t as HeaderNavigationBlockType,r as HeaderNavigationMenu};
+import"react";var t=(r=>(r.Primary="primary",r.Secondary="secondary",r.Third="third",r))(t||{}),i=(r=>(r.Sidebar="ipc-navigation-sidebar",r.Supports="ipc-navigation-supports",r.Multicol="ipc-navigation-multicol",r))(i||{}),o=(n=>(n.Search="ipc-navigation-action-search",n.Cart="ipc-navigation-action-cart",n.Profile="ipc-navigation-action-profile",n.Livestream="ipc-navigation-action-livestream",n))(o||{});export{o as HeaderNavigationActionBlockType,i as HeaderNavigationBlockType,t as HeaderNavigationMenu};
 //# sourceMappingURL=types.js.map

package/dist/esm/biz-components/HeaderNavigation/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/types.ts"],
-  "sourcesContent": ["import React from 'react'\n\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\n\nexport interface HeaderNavigationProps {\n  data: any\n  searchResult?: any\n  onSearch?: (value?: string) => void\n  isSearching?: boolean\n  keywords?: {\n    search_term: string\n    search_date: string\n    shopify_domain: string\n    counts: number\n  }[]\n  event?: {\n    search?: () => void\n    cart?: () => void\n    profile?: () => void\n    livestream?: () => void\n    join?: () => void\n    login?: () => void\n  }\n  buildProps: {\n    products?: Product[]\n    categories?: Record<string, any>\n  }\n  profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n  theme?: string\n}\n\nexport interface MobilePrimaryNavigationData {\n  actions: any\n  menuOpen?: boolean\n  onMenuOpenClick: () => void\n  onMenuOpenClose: () => void\n}\n\nexport interface MobileSecondaryNavigationData {\n  title?: string\n  onMenuOpenClose: () => void\n  onMenuBackClick: () => void\n}\n\nexport enum HeaderNavigationMenu {\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Third = 'third',\n}\n\nexport enum HeaderNavigationBlockType {\n  Sidebar = 'ipc-navigation-sidebar',\n  Supports = 'ipc-navigation-supports',\n  Multicol = 'ipc-navigation-multicol',\n  Links = 'ipc-navigation-links',\n}\n\nexport enum HeaderNavigationActionBlockType {\n  Search = 'ipc-navigation-action-search',\n  Cart = 'ipc-navigation-action-cart',\n  Profile = 'ipc-navigation-action-profile',\n  Livestream = 'ipc-navigation-action-livestream',\n}\n\nexport interface MobileNavigationProps {\n  data: any\n}\n\nexport interface DesktopNavigationProps {\n  data: any\n  onNavItemClick?: () => void\n}\n\ntype Country = {\n  id?: number\n  name?: string\n  code?: string\n}\n\nexport type UserProfile = {\n  user_id: string\n  email: string\n  nick_name?: string\n  full_name?: string\n  first_name?: string\n  last_name?: string\n  dob?: string\n  gender?: string\n  phone_number?: string\n  phone_account?: string\n  country?: Country\n  is_subscribe?: boolean\n  avatar?: string\n  can_change_password?: boolean\n  invitation_code?: string\n  phone_carrier?: string\n  dob_programmed?: boolean\n  activated?: boolean\n  registed_at?: number\n  activated_at?: number\n  token?: string\n}\n"],
-  "mappings": "AAAA,MAAkB,QA4CX,IAAKA,OACVA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,MAAQ,QAHEA,OAAA,IAMAC,OACVA,EAAA,QAAU,yBACVA,EAAA,SAAW,0BACXA,EAAA,SAAW,0BACXA,EAAA,MAAQ,uBAJEA,OAAA,IAOAC,OACVA,EAAA,OAAS,+BACTA,EAAA,KAAO,6BACPA,EAAA,QAAU,gCACVA,EAAA,WAAa,mCAJHA,OAAA",
+  "sourcesContent": ["import React from 'react'\n\nimport type { Product } from '../../cpn-components/CpnProductCard/types.js'\n\nexport interface HeaderNavigationProps {\n  data: any\n  event?: {\n    search?: () => void\n    cart?: () => void\n    profile?: () => void\n    livestream?: () => void\n  }\n  buildProps: {\n    products: Product[]\n  }\n  profile?: UserProfile // \u7528\u6237\u4FE1\u606F\n  theme?: string\n}\n\nexport interface MobilePrimaryNavigationData {\n  actions: any\n  menuOpen?: boolean\n  onMenuOpenClick: () => void\n  onMenuOpenClose: () => void\n}\n\nexport interface MobileSecondaryNavigationData {\n  title?: string\n  onMenuOpenClose: () => void\n  onMenuBackClick: () => void\n}\n\nexport enum HeaderNavigationMenu {\n  Primary = 'primary',\n  Secondary = 'secondary',\n  Third = 'third',\n}\n\nexport enum HeaderNavigationBlockType {\n  Sidebar = 'ipc-navigation-sidebar',\n  Supports = 'ipc-navigation-supports',\n  Multicol = 'ipc-navigation-multicol',\n}\n\nexport enum HeaderNavigationActionBlockType {\n  Search = 'ipc-navigation-action-search',\n  Cart = 'ipc-navigation-action-cart',\n  Profile = 'ipc-navigation-action-profile',\n  Livestream = 'ipc-navigation-action-livestream',\n}\n\nexport interface MobileNavigationProps {\n  data: any\n}\n\nexport interface DesktopNavigationProps {\n  data: any\n}\n\ntype Country = {\n  id?: number\n  name?: string\n  code?: string\n}\n\nexport type UserProfile = {\n  user_id: string\n  email: string\n  nick_name?: string\n  full_name?: string\n  first_name?: string\n  last_name?: string\n  dob?: string\n  gender?: string\n  phone_number?: string\n  phone_account?: string\n  country?: Country\n  is_subscribe?: boolean\n  avatar?: string\n  can_change_password?: boolean\n  invitation_code?: string\n  phone_carrier?: string\n  dob_programmed?: boolean\n  activated?: boolean\n  registed_at?: number\n  activated_at?: number\n  token?: string\n}\n"],
+  "mappings": "AAAA,MAAkB,QAgCX,IAAKA,OACVA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,MAAQ,QAHEA,OAAA,IAMAC,OACVA,EAAA,QAAU,yBACVA,EAAA,SAAW,0BACXA,EAAA,SAAW,0BAHDA,OAAA,IAMAC,OACVA,EAAA,OAAS,+BACTA,EAAA,KAAO,6BACPA,EAAA,QAAU,gCACVA,EAAA,WAAa,mCAJHA,OAAA",
   "names": ["HeaderNavigationMenu", "HeaderNavigationBlockType", "HeaderNavigationActionBlockType"]
 }

package/dist/esm/biz-components/HeaderNavigation/withCategory.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare function WithSidebar<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
-export declare function WithSupports<P extends object>(WrappedComponent: React.ComponentType<any>, { categoriesItem, currentNavItemRef, }: {
+export declare function WithSupports<P extends object>(WrappedComponent: React.ComponentType<any>, { categoriesItem, currentNavItemRef, onMouseLeave, }: {
     categoriesItem: any;
     currentNavItemRef?: any;
     onMouseLeave?: () => void;

package/dist/esm/biz-components/HeaderNavigation/withCategory.js

@@ -1,2 +1,2 @@
-import{jsx as d}from"react/jsx-runtime";import i,{useMemo as u}from"react";function c(a,e){const r=u(()=>{let t=null;try{t=JSON.parse(e?.components?.[0]?.sidebar?.categoriesMetadata||"{}")}catch(n){console.log("categoriesMetadata Parse error",n)}return t},[e]),s=u(()=>{let t=null;try{t=JSON.parse(e?.components?.[0]?.sidebar?.seriesMetadata||"[]")}catch(n){console.log("seriesMetadata Parse error",n)}return t},[e]),o=i.forwardRef((t,n)=>d(a,{...t,ref:n,seriesMetadata:s,sidebarCategoriesMetadata:r}));return o.displayName=a.displayName||a.name||"WithSidebarDropdown",o}function p(a,{categoriesItem:e,currentNavItemRef:r}){const s=u(()=>e?.components?.[0]?.supports,[e]),o=i.forwardRef((t,n)=>d(a,{...t,supportsMetadata:s,currentNavItemRef:r,ref:n}));return o.displayName=a.displayName||a.name||"WithSupportsDropdown",o}function y(a,e){const r=u(()=>{try{return JSON.parse(e?.components?.[0]?.multicol?.multicolMetadata||"{}")}catch(o){console.log("multicolMetadata Parse error",o)}return null},[e]),s=i.forwardRef((o,t)=>d(a,{...o,ref:t,multicolMetadata:r}));return s.displayName=a.displayName||a.name||"WithMulticolDropdown",s}function M(a){return a?Object.values(a?.reduce((e,r)=>(e[r.group]||(e[r.group]=[]),e[r.group].push(r),e),{})):[[]]}export{M as WithGroupCategory,y as WithMulticol,c as WithSidebar,p as WithSupports};
+import{jsx as d}from"react/jsx-runtime";import i,{useMemo as u}from"react";function p(a,e){const r=u(()=>{let t=null;try{t=JSON.parse(e?.components?.[0]?.sidebar?.categoriesMetadata||"{}")}catch(n){console.log("categoriesMetadata Parse error",n)}return t},[e]),s=u(()=>{let t=null;try{t=JSON.parse(e?.components?.[0]?.sidebar?.seriesMetadata||"[]")}catch(n){console.log("seriesMetadata Parse error",n)}return t},[e]),o=i.forwardRef((t,n)=>d(a,{...t,ref:n,seriesMetadata:s,sidebarCategoriesMetadata:r}));return o.displayName=a.displayName||a.name||"WithSidebarDropdown",o}function y(a,{categoriesItem:e,currentNavItemRef:r,onMouseLeave:s}){const o=u(()=>e?.components?.[0]?.supports,[e]),t=i.forwardRef((n,l)=>d(a,{...n,supportsMetadata:o,currentNavItemRef:r,onMouseLeave:s,ref:l}));return t.displayName=a.displayName||a.name||"WithSupportsDropdown",t}function M(a,e){const r=u(()=>{try{return JSON.parse(e?.components?.[0]?.multicol?.multicolMetadata||"{}")}catch(o){console.log("multicolMetadata Parse error",o)}return null},[e]),s=i.forwardRef((o,t)=>d(a,{...o,ref:t,multicolMetadata:r}));return s.displayName=a.displayName||a.name||"WithMulticolDropdown",s}function f(a){return a?Object.values(a?.reduce((e,r)=>(e[r.group]||(e[r.group]=[]),e[r.group].push(r),e),{})):[[]]}export{f as WithGroupCategory,M as WithMulticol,p as WithSidebar,y as WithSupports};
 //# sourceMappingURL=withCategory.js.map

package/dist/esm/biz-components/HeaderNavigation/withCategory.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/HeaderNavigation/withCategory.tsx"],
-  "sourcesContent": ["import React, { useMemo } from 'react'\n\nexport function WithSidebar<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any) {\n  // \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n  const sidebarCategoriesMetadata = useMemo(() => {\n    let categoriesMetadata = null\n    try {\n      categoriesMetadata = JSON.parse(categoriesItem?.components?.[0]?.sidebar?.categoriesMetadata || '{}')\n    } catch (error) {\n      console.log('categoriesMetadata Parse error', error)\n    }\n    return categoriesMetadata\n  }, [categoriesItem])\n\n  // \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n  const seriesMetadata = useMemo(() => {\n    let seriesMetadata = null\n    try {\n      seriesMetadata = JSON.parse(categoriesItem?.components?.[0]?.sidebar?.seriesMetadata || '[]')\n    } catch (error) {\n      console.log('seriesMetadata Parse error', error)\n    }\n    return seriesMetadata\n  }, [categoriesItem])\n\n  const withSidebarDropdown = React.forwardRef<any, P>((props, ref) => {\n    return (\n      <WrappedComponent\n        {...(props as unknown as P)}\n        ref={ref}\n        seriesMetadata={seriesMetadata}\n        sidebarCategoriesMetadata={sidebarCategoriesMetadata}\n      />\n    )\n  })\n\n  withSidebarDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithSidebarDropdown'\n  return withSidebarDropdown\n}\n\nexport function WithSupports<P extends object>(\n  WrappedComponent: React.ComponentType<any>,\n  {\n    categoriesItem,\n    currentNavItemRef,\n  }: { categoriesItem: any; currentNavItemRef?: any; onMouseLeave?: () => void }\n) {\n  const supportsMetadata = useMemo(() => {\n    return categoriesItem?.components?.[0]?.supports\n  }, [categoriesItem])\n\n  const supportsDropdown = React.forwardRef<any, P>((props, ref) => {\n    return (\n      <WrappedComponent\n        {...(props as unknown as P)}\n        supportsMetadata={supportsMetadata}\n        currentNavItemRef={currentNavItemRef}\n        ref={ref}\n      />\n    )\n  })\n\n  supportsDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithSupportsDropdown'\n  return supportsDropdown\n}\n\nexport function WithMulticol<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any) {\n  const multicolMetadata = useMemo(() => {\n    try {\n      return JSON.parse(categoriesItem?.components?.[0]?.multicol?.multicolMetadata || '{}')\n    } catch (error) {\n      console.log('multicolMetadata Parse error', error)\n    }\n    return null\n  }, [categoriesItem])\n  const multicolDropdown = React.forwardRef<any, P>((props, ref) => {\n    return <WrappedComponent {...(props as unknown as P)} ref={ref} multicolMetadata={multicolMetadata} />\n  })\n\n  multicolDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithMulticolDropdown'\n  return multicolDropdown\n}\n\nexport function WithGroupCategory(categories: any) {\n  if (!categories) return [[]]\n  return Object.values(\n    categories?.reduce((acc: any, item: any) => {\n      if (!acc[item.group]) {\n        acc[item.group] = []\n      }\n      acc[item.group].push(item)\n      return acc\n    }, {})\n  )\n}\n"],
-  "mappings": "AA2BM,cAAAA,MAAA,oBA3BN,OAAOC,GAAS,WAAAC,MAAe,QAExB,SAASC,EAA8BC,EAA4CC,EAAqB,CAE7G,MAAMC,EAA4BJ,EAAQ,IAAM,CAC9C,IAAIK,EAAqB,KACzB,GAAI,CACFA,EAAqB,KAAK,MAAMF,GAAgB,aAAa,CAAC,GAAG,SAAS,oBAAsB,IAAI,CACtG,OAASG,EAAO,CACd,QAAQ,IAAI,iCAAkCA,CAAK,CACrD,CACA,OAAOD,CACT,EAAG,CAACF,CAAc,CAAC,EAGbI,EAAiBP,EAAQ,IAAM,CACnC,IAAIO,EAAiB,KACrB,GAAI,CACFA,EAAiB,KAAK,MAAMJ,GAAgB,aAAa,CAAC,GAAG,SAAS,gBAAkB,IAAI,CAC9F,OAASG,EAAO,CACd,QAAQ,IAAI,6BAA8BA,CAAK,CACjD,CACA,OAAOC,CACT,EAAG,CAACJ,CAAc,CAAC,EAEbK,EAAsBT,EAAM,WAAmB,CAACU,EAAOC,IAEzDZ,EAACI,EAAA,CACE,GAAIO,EACL,IAAKC,EACL,eAAgBH,EAChB,0BAA2BH,EAC7B,CAEH,EAED,OAAAI,EAAoB,YAAcN,EAAiB,aAAeA,EAAiB,MAAQ,sBACpFM,CACT,CAEO,SAASG,EACdT,EACA,CACE,eAAAC,EACA,kBAAAS,CACF,EACA,CACA,MAAMC,EAAmBb,EAAQ,IACxBG,GAAgB,aAAa,CAAC,GAAG,SACvC,CAACA,CAAc,CAAC,EAEbW,EAAmBf,EAAM,WAAmB,CAACU,EAAOC,IAEtDZ,EAACI,EAAA,CACE,GAAIO,EACL,iBAAkBI,EAClB,kBAAmBD,EACnB,IAAKF,EACP,CAEH,EAED,OAAAI,EAAiB,YAAcZ,EAAiB,aAAeA,EAAiB,MAAQ,uBACjFY,CACT,CAEO,SAASC,EAA+Bb,EAA4CC,EAAqB,CAC9G,MAAMa,EAAmBhB,EAAQ,IAAM,CACrC,GAAI,CACF,OAAO,KAAK,MAAMG,GAAgB,aAAa,CAAC,GAAG,UAAU,kBAAoB,IAAI,CACvF,OAASG,EAAO,CACd,QAAQ,IAAI,+BAAgCA,CAAK,CACnD,CACA,OAAO,IACT,EAAG,CAACH,CAAc,CAAC,EACbc,EAAmBlB,EAAM,WAAmB,CAACU,EAAOC,IACjDZ,EAACI,EAAA,CAAkB,GAAIO,EAAwB,IAAKC,EAAK,iBAAkBM,EAAkB,CACrG,EAED,OAAAC,EAAiB,YAAcf,EAAiB,aAAeA,EAAiB,MAAQ,uBACjFe,CACT,CAEO,SAASC,EAAkBC,EAAiB,CACjD,OAAKA,EACE,OAAO,OACZA,GAAY,OAAO,CAACC,EAAUC,KACvBD,EAAIC,EAAK,KAAK,IACjBD,EAAIC,EAAK,KAAK,EAAI,CAAC,GAErBD,EAAIC,EAAK,KAAK,EAAE,KAAKA,CAAI,EAClBD,GACN,CAAC,CAAC,CACP,EATwB,CAAC,CAAC,CAAC,CAU7B",
-  "names": ["jsx", "React", "useMemo", "WithSidebar", "WrappedComponent", "categoriesItem", "sidebarCategoriesMetadata", "categoriesMetadata", "error", "seriesMetadata", "withSidebarDropdown", "props", "ref", "WithSupports", "currentNavItemRef", "supportsMetadata", "supportsDropdown", "WithMulticol", "multicolMetadata", "multicolDropdown", "WithGroupCategory", "categories", "acc", "item"]
+  "sourcesContent": ["import React, { useMemo } from 'react'\n\nexport function WithSidebar<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any) {\n  // \u4FA7\u8FB9\u680F\u5206\u7C7B\u5143\u6570\u636E\n  const sidebarCategoriesMetadata = useMemo(() => {\n    let categoriesMetadata = null\n    try {\n      categoriesMetadata = JSON.parse(categoriesItem?.components?.[0]?.sidebar?.categoriesMetadata || '{}')\n    } catch (error) {\n      console.log('categoriesMetadata Parse error', error)\n    }\n    return categoriesMetadata\n  }, [categoriesItem])\n\n  // \u4FA7\u8FB9\u680F\u7CFB\u5217\u5143\u6570\u636E\n  const seriesMetadata = useMemo(() => {\n    let seriesMetadata = null\n    try {\n      seriesMetadata = JSON.parse(categoriesItem?.components?.[0]?.sidebar?.seriesMetadata || '[]')\n    } catch (error) {\n      console.log('seriesMetadata Parse error', error)\n    }\n    return seriesMetadata\n  }, [categoriesItem])\n\n  const withSidebarDropdown = React.forwardRef<any, P>((props, ref) => {\n    return (\n      <WrappedComponent\n        {...(props as unknown as P)}\n        ref={ref}\n        seriesMetadata={seriesMetadata}\n        sidebarCategoriesMetadata={sidebarCategoriesMetadata}\n      />\n    )\n  })\n\n  withSidebarDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithSidebarDropdown'\n  return withSidebarDropdown\n}\n\nexport function WithSupports<P extends object>(\n  WrappedComponent: React.ComponentType<any>,\n  {\n    categoriesItem,\n    currentNavItemRef,\n    onMouseLeave,\n  }: { categoriesItem: any; currentNavItemRef?: any; onMouseLeave?: () => void }\n) {\n  const supportsMetadata = useMemo(() => {\n    return categoriesItem?.components?.[0]?.supports\n  }, [categoriesItem])\n\n  const supportsDropdown = React.forwardRef<any, P>((props, ref) => {\n    return (\n      <WrappedComponent\n        {...(props as unknown as P)}\n        supportsMetadata={supportsMetadata}\n        currentNavItemRef={currentNavItemRef}\n        onMouseLeave={onMouseLeave}\n        ref={ref}\n      />\n    )\n  })\n\n  supportsDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithSupportsDropdown'\n  return supportsDropdown\n}\n\nexport function WithMulticol<P extends object>(WrappedComponent: React.ComponentType<any>, categoriesItem: any) {\n  const multicolMetadata = useMemo(() => {\n    try {\n      return JSON.parse(categoriesItem?.components?.[0]?.multicol?.multicolMetadata || '{}')\n    } catch (error) {\n      console.log('multicolMetadata Parse error', error)\n    }\n    return null\n  }, [categoriesItem])\n  const multicolDropdown = React.forwardRef<any, P>((props, ref) => {\n    return <WrappedComponent {...(props as unknown as P)} ref={ref} multicolMetadata={multicolMetadata} />\n  })\n\n  multicolDropdown.displayName = WrappedComponent.displayName || WrappedComponent.name || 'WithMulticolDropdown'\n  return multicolDropdown\n}\n\nexport function WithGroupCategory(categories: any) {\n  if (!categories) return [[]]\n  return Object.values(\n    categories?.reduce((acc: any, item: any) => {\n      if (!acc[item.group]) {\n        acc[item.group] = []\n      }\n      acc[item.group].push(item)\n      return acc\n    }, {})\n  )\n}\n"],
+  "mappings": "AA2BM,cAAAA,MAAA,oBA3BN,OAAOC,GAAS,WAAAC,MAAe,QAExB,SAASC,EAA8BC,EAA4CC,EAAqB,CAE7G,MAAMC,EAA4BJ,EAAQ,IAAM,CAC9C,IAAIK,EAAqB,KACzB,GAAI,CACFA,EAAqB,KAAK,MAAMF,GAAgB,aAAa,CAAC,GAAG,SAAS,oBAAsB,IAAI,CACtG,OAASG,EAAO,CACd,QAAQ,IAAI,iCAAkCA,CAAK,CACrD,CACA,OAAOD,CACT,EAAG,CAACF,CAAc,CAAC,EAGbI,EAAiBP,EAAQ,IAAM,CACnC,IAAIO,EAAiB,KACrB,GAAI,CACFA,EAAiB,KAAK,MAAMJ,GAAgB,aAAa,CAAC,GAAG,SAAS,gBAAkB,IAAI,CAC9F,OAASG,EAAO,CACd,QAAQ,IAAI,6BAA8BA,CAAK,CACjD,CACA,OAAOC,CACT,EAAG,CAACJ,CAAc,CAAC,EAEbK,EAAsBT,EAAM,WAAmB,CAACU,EAAOC,IAEzDZ,EAACI,EAAA,CACE,GAAIO,EACL,IAAKC,EACL,eAAgBH,EAChB,0BAA2BH,EAC7B,CAEH,EAED,OAAAI,EAAoB,YAAcN,EAAiB,aAAeA,EAAiB,MAAQ,sBACpFM,CACT,CAEO,SAASG,EACdT,EACA,CACE,eAAAC,EACA,kBAAAS,EACA,aAAAC,CACF,EACA,CACA,MAAMC,EAAmBd,EAAQ,IACxBG,GAAgB,aAAa,CAAC,GAAG,SACvC,CAACA,CAAc,CAAC,EAEbY,EAAmBhB,EAAM,WAAmB,CAACU,EAAOC,IAEtDZ,EAACI,EAAA,CACE,GAAIO,EACL,iBAAkBK,EAClB,kBAAmBF,EACnB,aAAcC,EACd,IAAKH,EACP,CAEH,EAED,OAAAK,EAAiB,YAAcb,EAAiB,aAAeA,EAAiB,MAAQ,uBACjFa,CACT,CAEO,SAASC,EAA+Bd,EAA4CC,EAAqB,CAC9G,MAAMc,EAAmBjB,EAAQ,IAAM,CACrC,GAAI,CACF,OAAO,KAAK,MAAMG,GAAgB,aAAa,CAAC,GAAG,UAAU,kBAAoB,IAAI,CACvF,OAASG,EAAO,CACd,QAAQ,IAAI,+BAAgCA,CAAK,CACnD,CACA,OAAO,IACT,EAAG,CAACH,CAAc,CAAC,EACbe,EAAmBnB,EAAM,WAAmB,CAACU,EAAOC,IACjDZ,EAACI,EAAA,CAAkB,GAAIO,EAAwB,IAAKC,EAAK,iBAAkBO,EAAkB,CACrG,EAED,OAAAC,EAAiB,YAAchB,EAAiB,aAAeA,EAAiB,MAAQ,uBACjFgB,CACT,CAEO,SAASC,EAAkBC,EAAiB,CACjD,OAAKA,EACE,OAAO,OACZA,GAAY,OAAO,CAACC,EAAUC,KACvBD,EAAIC,EAAK,KAAK,IACjBD,EAAIC,EAAK,KAAK,EAAI,CAAC,GAErBD,EAAIC,EAAK,KAAK,EAAE,KAAKA,CAAI,EAClBD,GACN,CAAC,CAAC,CACP,EATwB,CAAC,CAAC,CAAC,CAU7B",
+  "names": ["jsx", "React", "useMemo", "WithSidebar", "WrappedComponent", "categoriesItem", "sidebarCategoriesMetadata", "categoriesMetadata", "error", "seriesMetadata", "withSidebarDropdown", "props", "ref", "WithSupports", "currentNavItemRef", "onMouseLeave", "supportsMetadata", "supportsDropdown", "WithMulticol", "multicolMetadata", "multicolDropdown", "WithGroupCategory", "categories", "acc", "item"]
 }

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js

@@ -1,2 +1,2 @@
-import{Fragment as U,jsx as t,jsxs as i}from"react/jsx-runtime";import E,{useState as T,useEffect as H,useRef as j}from"react";import{useMediaQuery as D}from"react-responsive";import{withLayout as Q}from"../../shared/Styles.js";import G from"../../components/picture.js";import C from"../../components/button.js";import{Heading as _}from"../../components/heading.js";import{VideoModal as Y}from"../VideoModal/index.js";import{Grid as q,GridItem as z}from"../../components/gird.js";import A from"../Title/index.js";import{cn as y,spaceToHyphen as P}from"../../helpers/utils.js";import V from"../SwiperBox/index.js";import{isVideo as S}from"../../shared/mimeType.js";import{Tabs as O,TabsList as Z,TabsTrigger as F,TabsContent as J}from"../../components/tabs.js";import{useExposure as K}from"../../hooks/useExposure.js";import{trackUrlRef as L}from"../../shared/trackUrlRef.js";import{gaTrack as W}from"../../shared/track.js";const m="image",h="p1_banner",B=({data:f,configuration:c,jIndex:l,spanType:o,title:x})=>{const[k,u]=T(!1),g=D({query:"(max-width: 768px)"}),v=j(null),M=()=>{if(o)switch(o){case"full":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"half":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]";case"one-third":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]";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]"}else switch(c?.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]";case 3: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]";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]"}};K(v,{componentType:m,componentName:h,position:l,componentTitle:f.title,componentDescription:f.description,navigation:c?.activeTab}),H(()=>{u(g)},[g]);const{theme:$="light",title:n,description:d,imageUrl:p,primaryButton:r,secondaryButton:s,imageMobileUrl:w,blockLink:b,video:e,youtubeId:a,isYouTube:N}=f,I="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return i("div",{className:y("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",M(),{"rounded-2xl":c?.shape==="rounded","aiui-dark":$==="dark","h-[400px]":k},"text-info-primary"),ref:v,children:[(b||s.link)&&t("a",{className:"absolute inset-0 z-10",href:L(b||s.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,"aria-hidden":"true",tabIndex:-1}),i("div",{className:"absolute inset-0",children:[S(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden overflow-hidden w-full h-full object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(G,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),S(w?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block overflow-hidden w-full h-full object-cover",children:t("source",{src:w?.url,type:"video/mp4"})}):t(G,{source:w?.url||p?.url,alt:w?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),i("div",{className:y("absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":f?.width==="full"}),children:[i("div",{className:"flex flex-col gap-1",children:[t(_,{size:3,as:"h3",className:"item-title",html:n}),t(_,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:d})]}),i("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&i(C,{"aria-label":n??d,className:y(I,"link-left"),variant:"secondary",as:"a",href:L(s.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}#${s.text}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,children:[s.text,t("span",{className:"sr-only",children:n??d})]}),r&&r.text&&t(C,{"aria-label":n??d,className:y(I,"link-right"),variant:"primary",as:"a",href:L(r.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}#${r.text}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,children:r.text})]})]})]}),t("div",{children:t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20",children:(e?.url||a)&&t("button",{onClick:()=>{c?.onVideoPlayBtnClick?.(e?.url||a,N)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},R=E.forwardRef((f,c)=>{const{shape:l,sectionTitle:o,groupByTab:x=!1,items:k=[],carousel:u}=f.data,[g,v]=T(!1),[M,$]=T(""),[n,d]=T(""),p=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},r=k.map(e=>e.tabName).filter(Boolean).filter((e,a,N)=>N.indexOf(e)===a),s=(e,a)=>{v(!0),a?d?.(e||""):$?.(e||"")},w=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},b=r.map(e=>({tabName:e,items:k.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return i("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:c,className:y("multiLayoutGraphicBlock","text-info-primary",f.className),children:[o&&t(A,{data:{title:o},className:"section-title"}),x?i(O,{shape:l,align:"left",defaultValue:P(r[0]),children:[t(Z,{children:r.map((e,a)=>t(F,{value:P(e),onClick:()=>{W({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:m,component_name:h,component_title:o,component_position:1,navigation:e,button_name:e}})},children:e},a))}),r.map((e,a)=>t(J,{value:P(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:i(U,{children:[t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:b?.[e]||[],configuration:{shape:l,isTab:x,activeTab:e,title:o,num:b?.[e]?.length||0,onVideoPlayBtnClick:s}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:w(b?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:w(b?.[e]?.length||0)}}}),u&&u?.items.length>0?t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:u?.items||[],configuration:{shape:l,isTab:x,onVideoPlayBtnClick:s,title:o}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},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))]}):i(U,{children:[i(q,{className:"w-full",children:[k.map((e,a)=>t(z,{span:p(e.width??"full"),className:"laptop:block hidden",children:t(B,{data:e,configuration:{shape:l,onVideoPlayBtnClick:s,title:o},jIndex:a,spanType:e.width})},`${e?.title||""}${a}`)),k.map((e,a)=>t(z,{span:p("full"),className:"laptop:hidden block",children:t(B,{data:e,configuration:{shape:l,onVideoPlayBtnClick:s,title:o},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),u&&u?.items.length>0?t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:u?.items||[],configuration:{shape:l,onVideoPlayBtnClick:s,title:o}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),g&&t(Y,{visible:g,youTubeId:n,videoUrl:M,onCloseModal:()=>v(!1)})]})});R.displayName="MultiLayoutGraphicBlock";var fe=Q(R);export{fe as default};
+import{Fragment as U,jsx as t,jsxs as i}from"react/jsx-runtime";import E,{useState as T,useEffect as H,useRef as j}from"react";import{useMediaQuery as D}from"react-responsive";import{withLayout as Q}from"../../shared/Styles.js";import G from"../../components/picture.js";import C from"../../components/button.js";import{Heading as _}from"../../components/heading.js";import{VideoModal as Y}from"../VideoModal/index.js";import{Grid as q,GridItem as z}from"../../components/gird.js";import A from"../Title/index.js";import{cn as y,spaceToHyphen as P}from"../../helpers/utils.js";import V from"../SwiperBox/index.js";import{isVideo as S}from"../../shared/mimeType.js";import{Tabs as O,TabsList as Z,TabsTrigger as F,TabsContent as J}from"../../components/tabs.js";import{useExposure as K}from"../../hooks/useExposure.js";import{trackUrlRef as L}from"../../shared/trackUrlRef.js";import{gaTrack as W}from"../../shared/track.js";const m="image",h="p1_banner",B=({data:f,configuration:c,jIndex:l,spanType:o,title:x})=>{const[k,u]=T(!1),g=D({query:"(max-width: 768px)"}),v=j(null),M=()=>{if(o)switch(o){case"full":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"half":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]";case"one-third":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]";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]"}else switch(c?.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]";case 3: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]";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]"}};K(v,{componentType:m,componentName:h,position:l,componentTitle:f.title,componentDescription:f.description,navigation:c?.activeTab}),H(()=>{u(g)},[g]);const{theme:$="light",title:n,description:d,imageUrl:p,primaryButton:r,secondaryButton:s,imageMobileUrl:w,blockLink:b,video:e,youtubeId:a,isYouTube:N}=f,I="lg-desktop:px-7 lg-desktop:pb-[14px] lg-desktop:pt-[15px] lg-desktop:text-[16px]";return i("div",{className:y("item-wrapper cursor-pointer","text-info-primary group relative box-border w-full overflow-hidden",M(),{"rounded-2xl":c?.shape==="rounded","aiui-dark":$==="dark","h-[400px]":k},"text-info-primary"),ref:v,children:[(b||s.link)&&t("a",{className:"absolute inset-0 z-10",href:L(b||s.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,"aria-hidden":"true",tabIndex:-1}),i("div",{className:"absolute inset-0",children:[S(p?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:block hidden overflow-hidden w-full h-full object-cover",children:t("source",{src:p?.url,type:"video/mp4"})}):t(G,{source:p?.url,alt:p?.alt||"",className:"tablet:block hidden h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 group-hover:scale-105 object-cover",style:{aspectRatio:`${p?.width}/${p?.height}`}}),S(w?.mimeType)?t("video",{autoPlay:!0,muted:!0,playsInline:!0,loop:!0,className:"tablet:hidden block overflow-hidden w-full h-full object-cover",children:t("source",{src:w?.url,type:"video/mp4"})}):t(G,{source:w?.url||p?.url,alt:w?.alt||p?.alt||"",className:"tablet:hidden block h-full overflow-hidden",imgClassName:"h-full transition-all duration-300 object-cover"}),i("div",{className:y("laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4",{"laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto":f?.width==="full"}),children:[i("div",{className:"flex flex-col gap-1",children:[t(_,{size:3,as:"h3",className:"item-title",html:n}),t(_,{as:"h4",className:"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]",html:d})]}),i("div",{className:"lg-desktop:gap-3 flex gap-2",children:[s&&s.text&&i(C,{"aria-label":n??d,className:y(I,"link-left"),variant:"secondary",as:"a",href:L(s.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}#${s.text}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,children:[s.text,t("span",{className:"sr-only",children:n??d})]}),r&&r.text&&t(C,{"aria-label":n??d,className:y(I,"link-right"),variant:"primary",as:"a",href:L(r.link,`${m}_${h}`),"data-headless-type-name":`${m}#${h}`,"data-headless-title-desc-button":`${n}#${d}#${r.text}`,"data-headless-nav-postion":`${c?.activeTab}#${l}`,children:r.text})]})]})]}),t("div",{children:t("div",{className:"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20",children:(e?.url||a)&&t("button",{onClick:()=>{c?.onVideoPlayBtnClick?.(e?.url||a,N)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})})})})]})},R=E.forwardRef((f,c)=>{const{shape:l,sectionTitle:o,groupByTab:x=!1,items:k=[],carousel:u}=f.data,[g,v]=T(!1),[M,$]=T(""),[n,d]=T(""),p=e=>{switch(e){case"full":return 12;case"half":return 6;case"one-third":return 4}},r=k.map(e=>e.tabName).filter(Boolean).filter((e,a,N)=>N.indexOf(e)===a),s=(e,a)=>{v(!0),a?d?.(e||""):$?.(e||"")},w=(e,a)=>{switch(e){case 1:return 1;case 2:return 2;default:return a?2.3:3}},b=r.map(e=>({tabName:e,items:k.filter(a=>a.tabName===e)})).reduce((e,a)=>(e[a.tabName]=a.items,e),{});return i("section",{"data-ui-component-id":"MultiLayoutGraphicBlock",ref:c,className:y("multiLayoutGraphicBlock","text-info-primary",f.className),children:[o&&t(A,{data:{title:o},className:"section-title"}),x?i(O,{shape:l,align:"left",defaultValue:P(r[0]),children:[t(Z,{children:r.map((e,a)=>t(F,{value:P(e),onClick:()=>{W({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:m,component_name:h,component_title:o,component_position:1,navigation:e,button_name:e}})},children:e},a))}),r.map((e,a)=>t(J,{value:P(e),className:"desktop:mt-[36px] mt-[24px] w-full",children:i(U,{children:[t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock1",data:{list:b?.[e]||[],configuration:{shape:l,isTab:x,activeTab:e,title:o,num:b?.[e]?.length||0,onVideoPlayBtnClick:s}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:w(b?.[e]?.length||0,!0)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:w(b?.[e]?.length||0)}}}),u&&u?.items.length>0?t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock2",data:{list:u?.items||[],configuration:{shape:l,isTab:x,onVideoPlayBtnClick:s,title:o}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},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))]}):i(U,{children:[i(q,{className:"w-full",children:[k.map((e,a)=>t(z,{span:p(e.width??"full"),className:"laptop:block hidden",children:t(B,{data:e,configuration:{shape:l,onVideoPlayBtnClick:s,title:o},jIndex:a,spanType:e.width})},`${e?.title||""}${a}`)),k.map((e,a)=>t(z,{span:p("full"),className:"laptop:hidden block",children:t(B,{data:e,configuration:{shape:l,onVideoPlayBtnClick:s,title:o},jIndex:a,spanType:"full"})},`${e?.title||""}${a}`))]}),u&&u?.items.length>0?t(V,{className:"!overflow-visible",id:"MultiLayoutGraphicBlock3",data:{list:u?.items||[],configuration:{shape:l,onVideoPlayBtnClick:s,title:o}},Slide:B,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3.1},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}}):null]}),g&&t(Y,{visible:g,youTubeId:n,videoUrl:M,onCloseModal:()=>v(!1)})]})});R.displayName="MultiLayoutGraphicBlock";var fe=Q(R);export{fe as default};
 //# sourceMappingURL=MultiLayoutGraphicBlock.js.map

package/dist/esm/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/MultiLayoutGraphicBlock/MultiLayoutGraphicBlock.tsx"],
-  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.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 = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\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 'half':\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        case 'one-third':\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        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    } else {\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        case 3:\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        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\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 {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = 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 cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden overflow-hidden w-full h-full object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\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        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block overflow-hidden w-full h-full object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'absolutestyle laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'fullstyle laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\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 handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\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\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(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={spaceToHyphen(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                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\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.2,\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={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\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.2,\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              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                    jIndex={index}\n                    spanType={item.width}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle },\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.2,\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      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { useState, useEffect, useRef } from 'react'\nimport { useMediaQuery } from 'react-responsive'\nimport type { MultiLayoutGraphicBlockProps, Item } from './types'\nimport { withLayout } from '../../shared/Styles.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { Heading } from '../../components/heading.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport Title from '../Title/index.js'\nimport { cn, spaceToHyphen } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { isVideo } from '../../shared/mimeType.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 = ({\n  data: item,\n  configuration,\n  jIndex,\n  spanType,\n  title: titleProp,\n}: {\n  data: Item\n  configuration?: any\n  jIndex?: number\n  spanType?: string\n  title?: string\n}) => {\n  const [isMobile, setIsMobile] = useState<boolean>(false)\n  const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n  const ref = useRef<HTMLDivElement>(null)\n\n  const handleAspect = () => {\n    if (spanType) {\n      switch (spanType) {\n        case 'full':\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 'half':\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        case 'one-third':\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        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    } else {\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        case 3:\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        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\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 {\n    theme = 'light',\n    title,\n    description,\n    imageUrl,\n    primaryButton,\n    secondaryButton,\n    imageMobileUrl,\n    blockLink,\n    video,\n    youtubeId,\n    isYouTube,\n  } = 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 cursor-pointer',\n        'text-info-primary group relative box-border w-full overflow-hidden',\n        handleAspect(),\n        {\n          'rounded-2xl': configuration?.shape === 'rounded',\n          'aiui-dark': theme === 'dark',\n          'h-[400px]': isMobile,\n        },\n        `text-info-primary`\n      )}\n      ref={ref}\n    >\n      {(blockLink || secondaryButton.link) && (\n        <a\n          className=\"absolute inset-0 z-10\"\n          href={trackUrlRef(blockLink || secondaryButton.link, `${componentType}_${componentName}`)}\n          data-headless-type-name={`${componentType}#${componentName}`}\n          data-headless-title-desc-button={`${title}#${description}`}\n          data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n        />\n      )}\n      <div className=\"absolute inset-0\">\n        {isVideo(imageUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:block hidden overflow-hidden w-full h-full object-cover\">\n            <source src={imageUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageUrl?.url}\n            alt={imageUrl?.alt || ''}\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        )}\n        {isVideo(imageMobileUrl?.mimeType) ? (\n          <video autoPlay muted playsInline loop className=\"tablet:hidden block overflow-hidden w-full h-full object-cover\">\n            <source src={imageMobileUrl?.url} type=\"video/mp4\" />\n          </video>\n        ) : (\n          <Picture\n            source={imageMobileUrl?.url || imageUrl?.url}\n            alt={imageMobileUrl?.alt || imageUrl?.alt || ''}\n            className=\"tablet:hidden block h-full overflow-hidden\"\n            imgClassName=\"h-full transition-all duration-300 object-cover\"\n          />\n        )}\n        <div\n          className={cn(\n            'laptop:p-6 desktop:p-[32px] laptop:gap-4 desktop:gap-6 absolute inset-x-0 bottom-0 z-20 flex w-fit flex-col gap-6 p-4',\n            {\n              'laptop:top-1/2 laptop:-translate-y-1/2 laptop:bottom-auto': item?.width === 'full',\n            }\n          )}\n        >\n          <div className=\"flex flex-col gap-1\">\n            <Heading size={3} as=\"h3\" className=\"item-title\" html={title} />\n            <Heading\n              as=\"h4\"\n              className=\"item-description desktop:text-[16px] lg-desktop:text-[18px] line-clamp-1 text-[14px]\"\n              html={description}\n            />\n          </div>\n          <div className=\"lg-desktop:gap-3 flex gap-2\">\n            {secondaryButton && secondaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-left')}\n                variant=\"secondary\"\n                as=\"a\"\n                href={trackUrlRef(secondaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${secondaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {secondaryButton.text}\n                <span className=\"sr-only\">{title ?? description}</span>\n              </Button>\n            )}\n            {primaryButton && primaryButton.text && (\n              <Button\n                aria-label={title ?? description}\n                className={cn(lgButtonSize, 'link-right')}\n                variant=\"primary\"\n                as=\"a\"\n                href={trackUrlRef(primaryButton.link, `${componentType}_${componentName}`)}\n                data-headless-type-name={`${componentType}#${componentName}`}\n                data-headless-title-desc-button={`${title}#${description}#${primaryButton.text}`}\n                data-headless-nav-postion={`${configuration?.activeTab}#${jIndex}`}\n              >\n                {primaryButton.text}\n              </Button>\n            )}\n          </div>\n        </div>\n      </div>\n      <div>\n        <div className=\"laptop:bottom-6 laptop:right-6 absolute bottom-4 right-4 z-20\">\n          {(video?.url || youtubeId) && (\n            <button\n              onClick={() => {\n                configuration?.onVideoPlayBtnClick?.(video?.url || youtubeId, isYouTube)\n              }}\n              className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n            >\n              <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n              </svg>\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nconst MultiLayoutGraphicBlock = React.forwardRef<HTMLDivElement, MultiLayoutGraphicBlockProps>((props, ref) => {\n  const { shape, sectionTitle, groupByTab = false, items = [], carousel } = props.data\n  const [visible, setVisible] = useState<boolean>(false)\n  const [videoUrl, setVideoUrl] = useState<string>('')\n  const [youTubeId, setYouTubeId] = useState<string>('')\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 handleVideoPlayBtnClick = (url: string, isYouTube: boolean) => {\n    setVisible(true)\n    if (isYouTube) {\n      setYouTubeId?.(url || '')\n    } else {\n      setVideoUrl?.(url || '')\n    }\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\n      data-ui-component-id=\"MultiLayoutGraphicBlock\"\n      ref={ref}\n      className={cn('multiLayoutGraphicBlock', 'text-info-primary', props.className)}\n    >\n      {sectionTitle && <Title data={{ title: sectionTitle }} className=\"section-title\" />}\n\n      {groupByTab ? (\n        <Tabs shape={shape} align=\"left\" defaultValue={spaceToHyphen(tabNames[0]!)}>\n          <TabsList>\n            {tabNames.map((tabName, index) => (\n              <TabsTrigger\n                key={index}\n                value={spaceToHyphen(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={spaceToHyphen(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                      title: sectionTitle,\n                      num: tabItemsMaps?.[tabName]?.length || 0,\n                      onVideoPlayBtnClick: handleVideoPlayBtnClick,\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.2,\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={{\n                      list: carousel?.items || [],\n                      configuration: {\n                        shape: shape,\n                        isTab: groupByTab,\n                        onVideoPlayBtnClick: handleVideoPlayBtnClick,\n                        title: sectionTitle,\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.2,\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              return (\n                <GridItem\n                  key={`${item?.title || ''}${index}`}\n                  span={getSpan(item.width ?? 'full')}\n                  className=\"laptop:block hidden\"\n                >\n                  <ItemBlock\n                    data={item}\n                    configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                    jIndex={index}\n                    spanType={item.width}\n                  />\n                </GridItem>\n              )\n            })}\n            {items.map((item, index) => (\n              <GridItem key={`${item?.title || ''}${index}`} span={getSpan('full')} className=\"laptop:hidden block\">\n                <ItemBlock\n                  data={item}\n                  configuration={{ shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle }}\n                  jIndex={index}\n                  spanType={'full'}\n                />\n              </GridItem>\n            ))}\n          </Grid>\n          {carousel && carousel?.items.length > 0 ? (\n            <SwiperBox\n              className=\"!overflow-visible\"\n              id={'MultiLayoutGraphicBlock3'}\n              data={{\n                list: carousel?.items || [],\n                configuration: { shape: shape, onVideoPlayBtnClick: handleVideoPlayBtnClick, title: sectionTitle },\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.2,\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      {visible && (\n        <VideoModal\n          visible={visible}\n          youTubeId={youTubeId}\n          videoUrl={videoUrl}\n          onCloseModal={() => setVisible(false)}\n        />\n      )}\n    </section>\n  )\n})\n\nMultiLayoutGraphicBlock.displayName = 'MultiLayoutGraphicBlock'\n\nexport default withLayout(MultiLayoutGraphicBlock)\nexport type { MultiLayoutGraphicBlockProps }\n"],
+  "mappings": "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",
   "names": ["Fragment", "jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useMediaQuery", "withLayout", "Picture", "Button", "Heading", "VideoModal", "Grid", "GridItem", "Title", "cn", "spaceToHyphen", "SwiperBox", "isVideo", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "useExposure", "trackUrlRef", "gaTrack", "componentType", "componentName", "ItemBlock", "item", "configuration", "jIndex", "spanType", "titleProp", "isMobile", "setIsMobile", "mediaQuery", "ref", "handleAspect", "theme", "title", "description", "imageUrl", "primaryButton", "secondaryButton", "imageMobileUrl", "blockLink", "video", "youtubeId", "isYouTube", "lgButtonSize", "MultiLayoutGraphicBlock", "props", "shape", "sectionTitle", "groupByTab", "items", "carousel", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "getSpan", "width", "tabNames", "index", "arr", "handleVideoPlayBtnClick", "url", "handleTabNumber", "num", "flag", "tabItemsMaps", "tabName", "acc", "cur", "MultiLayoutGraphicBlock_default"]
 }

package/dist/esm/biz-components/ShelfDisplay/index.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as r,jsxs as le}from"react/jsx-runtime";import J,{useState as I,useEffect as M,useRef as g,useImperativeHandle as K}from"react";import{cn as U}from"../../helpers/utils.js";import X from"./tabSwitch.js";import Y from"../Title/index.js";import Z from"../SwiperBox/index.js";import{withLayout as ee}from"../../shared/Styles.js";import{gaTrack as P}from"../../shared/track.js";import{useMediaQuery as te}from"react-responsive";import{useRollout as se}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as ae,ShelfDisplayHorizontalItem as ne}from"./shelfDisplayItem.js";const ie="image",re="product_shelf",oe=J.forwardRef(({key:x,data:c,event:H,buildData:B,breakpoints:C,className:E="",recommendedData:n,target:V="_self",metafields:L,isDisplayGudgments:_=!1,isDisplayBackImage:N=!1},A)=>{const{productsTab:o=[],productsCard:$=[],title:v,isShowTab:p=!0,tabShape:q="square",isShowTag:O=!1,isShowOriginalPrice:z=!0,isShowRecommendedCard:Q=!1,...W}=c,[b,S]=I(""),[a,f]=I([]),y=g(!1),u=g(!1),T=g(null),j=te({query:"(max-width: 768px)"}),[F,k]=se({threshold:0}),l=a?.length<=1&&_,i=!j&&a?.length<=2&&_,d=e=>{switch(e){case 1440:return i?a?.length:4;case 1024:return i?a?.length:3;default:return i?a?.length:2.3}},D=()=>{P({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:n?.map((e,w)=>{const s=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||s?.sku,item_name:e?.name,item_variant:s?.name,price:s?.price,index:w+1}})}})},h=(e,w)=>{if(w){const m=n?.map?.(s=>({...s,isShowRecommended:!0}));f(m?.length?m||[]:[])}else if(Array.isArray(e)){const s=e?.map?.(t=>{const R=B?.products?.find(G=>G?.handle===t?.handle);if(R)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,...R}})?.filter(t=>t);f(s?.length?s||[]:[])}else f([])};return K(A,()=>T.current),M(()=>{k&&n?.length&&!y.current&&(y.current=!0,D())},[k,n]),M(()=>{if(!u.current){if(!u.current&&n?.length&&(u.current=!0),p){S(o?.[0]?.tab||""),h(o?.[0]?.data||[],o?.[0]?.isShowRecommendedTab);return}h($,Q)}},[n]),le("div",{ref:T,className:U("shelf-display-wrap w-full",E,{"aiui-dark":c?.theme==="dark"}),children:[v&&r(Y,{data:{title:v}}),p&&r("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:r(X,{value:b,tabs:o,tabShape:q,onTabClick:e=>{if(S(e?.tab),h(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){P({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ie,component_name:re,component_title:c?.title,component_position:1,navigation:e?.tab}});return}D()}})}),r("div",{ref:F,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:r(Z,{data:{list:a,configuration:{...W,event:H,isShowTag:O,isShowOriginalPrice:z,target:V,metafields:L,itemLength:a?.length,isDisplayBackImage:N}},id:`ShelfDisplay${x}${b}`,className:`${p?"mt-6":""} !overflow-visible`,itemClassName:i?"flex-1":"",Slide:i?ne:ae,breakpoints:C||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:l?1:1.2},768:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d()},1024:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d(1024)},1440:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d(1440)}}})})]})});var ve=ee(oe);export{ve as default};
+"use client";import{jsx as r,jsxs as oe}from"react/jsx-runtime";import G,{useState as I,useEffect as M,useRef as g,useImperativeHandle as J}from"react";import{cn as K}from"../../helpers/utils.js";import U from"./tabSwitch.js";import X from"../Title/index.js";import Y from"../SwiperBox/index.js";import{withLayout as Z}from"../../shared/Styles.js";import{gaTrack as P}from"../../shared/track.js";import{useMediaQuery as ee}from"react-responsive";import{useRollout as te}from"../../hooks/useRollout.js";import{ShelfDisplayWrapItem as se,ShelfDisplayHorizontalItem as ae}from"./shelfDisplayItem.js";const ne="image",ie="product_shelf",re=G.forwardRef(({key:x,data:c,event:H,buildData:B,breakpoints:C,className:E="",recommendedData:n,target:V="_self",isDisplayGudgments:_=!1,isDisplayBackImage:L=!1},N)=>{const{productsTab:o=[],productsCard:A=[],title:v,isShowTab:p=!0,tabShape:$="square",isShowTag:q=!1,isShowOriginalPrice:O=!0,isShowRecommendedCard:z=!1,...Q}=c,[b,S]=I(""),[a,f]=I([]),y=g(!1),u=g(!1),T=g(null),W=ee({query:"(max-width: 768px)"}),[j,k]=te({threshold:0}),l=a?.length<=1&&_,i=!W&&a?.length<=2&&_,d=e=>{switch(e){case 1440:return i?a?.length:4;case 1024:return i?a?.length:3;default:return i?a?.length:2.3}},D=()=>{P({event:"ga4Event",event_name:"view_item_list",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:n?.map((e,w)=>{const s=e?.variants?.find(t=>t?.sku===e?.sku)||e?.variants?.[0];return{item_id:e?.sku||s?.sku,item_name:e?.name,item_variant:s?.name,price:s?.price,index:w+1}})}})},h=(e,w)=>{if(w){const m=n?.map?.(s=>({...s,isShowRecommended:!0}));f(m?.length?m||[]:[])}else if(Array.isArray(e)){const s=e?.map?.(t=>{const R=B?.products?.find(F=>F?.handle===t?.handle);if(R)return{sku:t.sku,isShowRecommended:!1,custom_name:t.custom_name,custom_description:t.custom_description,custom_image:t.custom_image,custom_theme:t.custom_theme,...R}})?.filter(t=>t);f(s?.length?s||[]:[])}else f([])};return J(N,()=>T.current),M(()=>{k&&n?.length&&!y.current&&(y.current=!0,D())},[k,n]),M(()=>{if(!u.current){if(!u.current&&n?.length&&(u.current=!0),p){S(o?.[0]?.tab||""),h(o?.[0]?.data||[],o?.[0]?.isShowRecommendedTab);return}h(A,z)}},[n]),oe("div",{ref:T,className:K("shelf-display-wrap w-full",E,{"aiui-dark":c?.theme==="dark"}),children:[v&&r(X,{data:{title:v}}),p&&r("div",{className:"md-tablet:w-full md-tablet:overflow-hidden",children:r(U,{value:b,tabs:o,tabShape:$,onTabClick:e=>{if(S(e?.tab),h(e?.data||[],e?.isShowRecommendedTab),!e?.isShowRecommendedTab){P({event:"ga4Event",event_name:"component_click",event_parameters:{page_group:"Home Page",component_type:ne,component_name:ie,component_title:c?.title,component_position:1,navigation:e?.tab}});return}D()}})}),r("div",{ref:j,className:"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]",children:r(Y,{data:{list:a,configuration:{...Q,event:H,isShowTag:q,isShowOriginalPrice:O,target:V,itemLength:a?.length,isDisplayBackImage:L}},id:`ShelfDisplay${x}${b}`,className:`${p?"mt-6":""} !overflow-visible`,itemClassName:i?"flex-1":"",Slide:i?ae:se,breakpoints:C||{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:l?1:1.2},768:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d()},1024:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d(1024)},1440:{spaceBetween:l?0:16,freeMode:!1,slidesPerView:d(1440)}}})})]})});var _e=Z(re);export{_e as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/biz-components/ShelfDisplay/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/index.tsx"],
-  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      metafields,\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\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                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\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                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                metafields: metafields,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={`ShelfDisplay${key}${tabId}`}\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
-  "mappings": "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",
-  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "TabSwitch", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "metafields", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "ShelfDisplay_default"]
+  "sourcesContent": ["'use client'\nimport React, { useState, useEffect, useRef, useImperativeHandle } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport TabSwitch from './tabSwitch.js'\nimport Title from '../Title/index.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useRollout } from '../../hooks/useRollout.js'\nimport { ShelfDisplayWrapItem, ShelfDisplayHorizontalItem } from './shelfDisplayItem.js'\nimport type { ShelfDisplayProps, ShelfDisplayItem } from './shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst ShelfDisplay = React.forwardRef<HTMLDivElement, ShelfDisplayProps>(\n  (\n    {\n      key,\n      data,\n      event,\n      buildData,\n      breakpoints,\n      className = '',\n      recommendedData,\n      target = '_self',\n      isDisplayGudgments = false,\n      isDisplayBackImage = false,\n    },\n    ref\n  ) => {\n    const {\n      productsTab = [],\n      productsCard = [],\n      title,\n      isShowTab = true,\n      tabShape = 'square',\n      isShowTag = false,\n      isShowOriginalPrice = true,\n      isShowRecommendedCard = false,\n      ...other\n    } = data\n\n    const [tabId, setTabId] = useState<string>('')\n    const [currentItems, setCurrentItems] = useState<ShelfDisplayItem[]>([])\n\n    const isView = useRef<boolean>(false)\n    const isRecommend = useRef<boolean>(false)\n    const innerRef = useRef<HTMLDivElement>(null)\n\n    const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n    const [viewRef, inView] = useRollout<HTMLDivElement>({ threshold: 0 })\n\n    const isOnce = currentItems?.length <= 1 && isDisplayGudgments\n    const isShowGudgments = !isMobile && currentItems?.length <= 2 && isDisplayGudgments\n\n    const showItemLength = (size?: number) => {\n      switch (size) {\n        case 1440:\n          return isShowGudgments ? currentItems?.length : 4\n        case 1024:\n          return isShowGudgments ? currentItems?.length : 3\n        default:\n          return isShowGudgments ? currentItems?.length : 2.3\n      }\n    }\n\n    const gackViewEvent = () => {\n      gaTrack({\n        event: 'ga4Event',\n        event_name: 'view_item_list',\n        event_parameters: {\n          page_group: 'Home Page',\n          item_list_name: 'Home_Page_Bundle',\n          items: recommendedData?.map((item, index) => {\n            const findData = item?.variants?.find((v: any) => v?.sku === item?.sku)\n            const variant = findData || item?.variants?.[0]\n            return {\n              item_id: item?.sku || variant?.sku,\n              item_name: item?.name,\n              item_variant: variant?.name,\n              price: variant?.price,\n              index: index + 1,\n            }\n          }),\n        },\n      })\n    }\n\n    const handleCurrentTab = (currentData: ShelfDisplayItem[], flag: boolean) => {\n      if (flag) {\n        const newCurrentData = recommendedData?.map?.(item => {\n          return {\n            ...item,\n            isShowRecommended: true,\n          }\n        })\n        setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n      } else {\n        const isArray = Array.isArray(currentData)\n        if (isArray) {\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                  isShowRecommended: false,\n                  custom_name: item.custom_name,\n                  custom_description: item.custom_description,\n                  custom_image: item.custom_image,\n                  custom_theme: item.custom_theme,\n                  ...findData,\n                }\n              }\n            })\n            ?.filter(item => item)\n          setCurrentItems(newCurrentData?.length ? newCurrentData || [] : [])\n        } else {\n          setCurrentItems([])\n        }\n      }\n    }\n\n    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n\n    useEffect(() => {\n      if (inView && recommendedData?.length && !isView.current) {\n        isView.current = true\n        gackViewEvent()\n      }\n    }, [inView, recommendedData])\n\n    // \u7B97\u6CD5\u6570\u636E\u4F1A\u7A0D\u5FAE\u5EF6\u8FDF\uFF0C\u6240\u4EE5\u9700\u76D1\u542CrecommendedData\uFF0C\u4E3A\u4E86\u9632\u6B62\u5728\u6709\u7B97\u6CD5\u6570\u636E\u4E14\u5BF9\u9ED8\u8BA4\u6E32\u67D3\u7B2C\u4E00\u4E2A\u540E\u53CD\u590D\u89E6\u53D1\uFF0C\u7528isRecommend\u5173\u95ED\n    useEffect(() => {\n      if (isRecommend.current) return\n      if (!isRecommend.current && recommendedData?.length) {\n        isRecommend.current = true\n      }\n      if (isShowTab) {\n        setTabId(productsTab?.[0]?.tab || '')\n        handleCurrentTab(productsTab?.[0]?.data || [], productsTab?.[0]?.isShowRecommendedTab)\n        return\n      }\n      handleCurrentTab(productsCard, isShowRecommendedCard)\n    }, [recommendedData])\n\n    return (\n      <div\n        ref={innerRef}\n        className={cn('shelf-display-wrap w-full', className, { 'aiui-dark': data?.theme === 'dark' })}\n      >\n        {title && <Title data={{ title: title }} />}\n        {isShowTab && (\n          <div className=\"md-tablet:w-full md-tablet:overflow-hidden\">\n            <TabSwitch\n              value={tabId}\n              tabs={productsTab}\n              tabShape={tabShape}\n              onTabClick={v => {\n                setTabId(v?.tab)\n                handleCurrentTab(v?.data || [], v?.isShowRecommendedTab)\n                if (!v?.isShowRecommendedTab) {\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                  return\n                }\n                gackViewEvent()\n              }}\n            />\n          </div>\n        )}\n        <div\n          ref={viewRef as any}\n          className=\"tablet:min-h-[393px] laptop:min-h-[425px] desktop:min-h-[405px] lg-desktop:min-h-[409px]\"\n        >\n          <SwiperBox\n            data={{\n              list: currentItems,\n              configuration: {\n                ...other,\n                event: event,\n                isShowTag,\n                isShowOriginalPrice,\n                target: target,\n                itemLength: currentItems?.length,\n                isDisplayBackImage: isDisplayBackImage,\n              },\n            }}\n            id={`ShelfDisplay${key}${tabId}`}\n            className={`${isShowTab ? 'mt-6' : ''} !overflow-visible`}\n            itemClassName={isShowGudgments ? 'flex-1' : ''}\n            Slide={isShowGudgments ? ShelfDisplayHorizontalItem : ShelfDisplayWrapItem}\n            breakpoints={\n              breakpoints || {\n                0: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: 1,\n                },\n                374: {\n                  spaceBetween: 12,\n                  freeMode: false,\n                  slidesPerView: isOnce ? 1 : 1.2,\n                },\n                768: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(),\n                },\n                1024: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1024),\n                },\n                1440: {\n                  spaceBetween: isOnce ? 0 : 16,\n                  freeMode: false,\n                  slidesPerView: showItemLength(1440),\n                },\n              }\n            }\n          />\n        </div>\n      </div>\n    )\n  }\n)\n\nexport default withLayout(ShelfDisplay)\n"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "React", "useState", "useEffect", "useRef", "useImperativeHandle", "cn", "TabSwitch", "Title", "SwiperBox", "withLayout", "gaTrack", "useMediaQuery", "useRollout", "ShelfDisplayWrapItem", "ShelfDisplayHorizontalItem", "componentType", "componentName", "ShelfDisplay", "key", "data", "event", "buildData", "breakpoints", "className", "recommendedData", "target", "isDisplayGudgments", "isDisplayBackImage", "ref", "productsTab", "productsCard", "title", "isShowTab", "tabShape", "isShowTag", "isShowOriginalPrice", "isShowRecommendedCard", "other", "tabId", "setTabId", "currentItems", "setCurrentItems", "isView", "isRecommend", "innerRef", "isMobile", "viewRef", "inView", "isOnce", "isShowGudgments", "showItemLength", "size", "gackViewEvent", "item", "index", "variant", "v", "handleCurrentTab", "currentData", "flag", "newCurrentData", "findData", "params", "ShelfDisplay_default"]
 }

package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js

@@ -1,2 +1,2 @@
-import b from"decimal.js";const c={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",nl:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},l=e=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",eu:"en",fr:"de-DE","eu-es":"de-DE","eu-fr":"de-DE","eu-it":"de-DE","eu-de":"de-DE","eu-en":"en-US","cz-en":"de-DE",nl:"de-DE",de:"de-DE",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl",dk:"en-dk",fi:"en-fi",no:"en-no",is:"en-is",se:"en-se"})[e]||"";function d({amount:e,currencyCode:r,locale:t,maximumFractionDigits:n,minimumFractionDigits:o,removeTrailingZeros:u=!1}){const a=t==="nl"?"EUR":r||"USD";let i=new Intl.NumberFormat(l(t),{style:"currency",currency:a,minimumFractionDigits:n===0?0:o,maximumFractionDigits:n}).format(e);return["eu-de","eu-en","de","eu"].includes(t)&&(i=i?.toString()?.replace(/[\s]/g,"")),u&&(i=i.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),i}function h({amount:e,baseAmount:r,currencyCode:t,locale:n,maximumFractionDigits:o,minimumFractionDigits:u,removeTrailingZeros:a}){if(typeof Intl>"u")return{price:`${c[n]}${e}`,basePrice:`${c[n]}${r}`,discount:`${c[n]}${r-e||0}`};const s=r>e,i=new Intl.NumberFormat(l(n),{style:"percent"}),p=s?i.format((r-e)/r):null;let m;if(s){const f=new b(r).sub(e||0).toNumber();m=d({amount:f,currencyCode:t||"USD",locale:n,maximumFractionDigits:2})}const g=d({amount:e,currencyCode:t,locale:n,removeTrailingZeros:a}),y=s?d({amount:r,currencyCode:t,locale:n,maximumFractionDigits:o,minimumFractionDigits:u,removeTrailingZeros:a}):void 0;return{price:g,basePrice:y,discount:p,discountAmount:m}}export{c as PRICE_SYMBOL,d as formatPrice,h as formatVariantPrice,l as languageTerritory};
+import b from"decimal.js";const u={us:"$",uk:"\xA3",ca:"$",eu:"\u20AC",fr:"\u20AC",de:"\u20AC",vn:"\u20AB",cl:"$",sg:"$",ae:"AED"},d=e=>({us:"en-us",uk:"en-gb",ca:"en-ca",au:"en-au",eu:"en",fr:"de-DE","eu-es":"de-DE","eu-fr":"de-DE","eu-it":"de-DE","eu-de":"de-DE","eu-en":"en-US","cz-en":"de-DE",nl:"de-DE",de:"de-DE",vn:"vi-vn",sg:"en-sg","ae-en":"ae-en",plus:"en-us",cl:"es-cl",dk:"en-dk",fi:"en-fi",no:"en-no",is:"en-is",se:"en-se"})[e]||"";function c({amount:e,currencyCode:r,locale:i,maximumFractionDigits:n,minimumFractionDigits:a,removeTrailingZeros:s=!1}){let t=new Intl.NumberFormat(d(i),{style:"currency",currency:r||"USD",minimumFractionDigits:n===0?0:a,maximumFractionDigits:n}).format(e);return["eu-de","eu-en","de","eu"].includes(i)&&(t=t?.toString()?.replace(/[\s]/g,"")),s&&(t=t.replace(/(\.\d*?[1-9])0+\b/,"$1").replace(/\.0+\b/,"").replace(/(\,\d*?[1-9])0+\b/,"$1").replace(/\,0+\b/,"")),t}function h({amount:e,baseAmount:r,currencyCode:i,locale:n,maximumFractionDigits:a,minimumFractionDigits:s,removeTrailingZeros:o}){if(typeof Intl>"u")return{price:`${u[n]}${e}`,basePrice:`${u[n]}${r}`,discount:`${u[n]}${r-e||0}`};const t=r>e,l=new Intl.NumberFormat(d(n),{style:"percent"}),p=t?l.format((r-e)/r):null;let m;if(t){const f=new b(r).sub(e||0).toNumber();m=c({amount:f,currencyCode:i||"USD",locale:n,maximumFractionDigits:2})}const g=c({amount:e,currencyCode:i,locale:n,removeTrailingZeros:o}),y=t?c({amount:r,currencyCode:i,locale:n,maximumFractionDigits:a,minimumFractionDigits:s,removeTrailingZeros:o}):void 0;return{price:g,basePrice:y,discount:p,discountAmount:m}}export{u as PRICE_SYMBOL,c as formatPrice,h as formatVariantPrice,d as languageTerritory};
 //# sourceMappingURL=shelfDisplay.js.map

package/dist/esm/biz-components/ShelfDisplay/shelfDisplay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplay.ts"],
-  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  nl: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-us',\n    uk: 'en-gb',\n    ca: 'en-ca',\n    au: 'en-au',\n    eu: 'en',\n    fr: 'de-DE',\n    'eu-es': 'de-DE',\n    'eu-fr': 'de-DE',\n    'eu-it': 'de-DE',\n    'eu-de': 'de-DE',\n    'eu-en': 'en-US',\n    'cz-en': 'de-DE',\n    nl: 'de-DE',\n    de: 'de-DE',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n    dk: 'en-dk',\n    fi: 'en-fi',\n    no: 'en-no',\n    is: 'en-is',\n    se: 'en-se',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const code = locale === 'nl' ? 'EUR' : currencyCode || 'USD'\n  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'currency',\n    currency: code,\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency.format(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    // Adjust the regex to match comma as decimal separator\n    formattedValue = formattedValue\n      .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\.0+\\b/, '')\n      .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'percent',\n  })\n  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount;\n  if (hasDiscount) { \n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = formatPrice({\n      amount: savePriceAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    })\n  }\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\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  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_theme?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: 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  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n}"],
-  "mappings": "AAAA,OAAOA,MAAa,aAGb,MAAMC,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaC,EAAqBC,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACN,GAAGA,CAAM,GAAK,GAET,SAASC,EAAY,CAC1B,OAAAC,EACA,aAAAC,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CACD,MAAMC,EAAOP,IAAW,KAAO,MAAQG,GAAgB,MAQvD,IAAIK,EAPmB,IAAI,KAAK,aAAaT,EAAkBC,CAAM,EAAG,CACtE,MAAO,WACP,SAAUO,EACV,sBAAuBH,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,EAEmC,OAAOF,CAAM,EAEjD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASF,CAAM,IAChDQ,EAAiBA,GAAgB,SAAS,GAAG,QAAQ,QAAS,EAAE,GAG9DF,IAEFE,EAAiBA,EACd,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,EACpB,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,GAGlBA,CACT,CAEO,SAASC,EAAmB,CACjC,OAAAP,EACA,WAAAQ,EACA,aAAAP,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGR,EAAaE,CAAM,CAAC,GAAGE,CAAM,GACvC,UAAW,GAAGJ,EAAaE,CAAM,CAAC,GAAGU,CAAU,GAC/C,SAAU,GAAGZ,EAAaE,CAAM,CAAC,GAAGU,EAAaR,GAAU,CAAC,EAC9D,EAGF,MAAMS,EAAcD,EAAaR,EAC3BU,EAAiB,IAAI,KAAK,aAAab,EAAkBC,CAAM,EAAG,CACtE,MAAO,SACT,CAAC,EACKa,EAAWF,EAAcC,EAAe,QAAQF,EAAaR,GAAUQ,CAAU,EAAI,KAE3F,IAAII,EACJ,GAAIH,EAAa,CACf,MAAMI,EAAkB,IAAIlB,EAAQa,CAAU,EAAE,IAAIR,GAAU,CAAC,EAAE,SAAS,EAC1EY,EAAiBb,EAAY,CAC3B,OAAQc,EACR,aAAcZ,GAAgB,MAC9B,OAAAH,EACA,sBAAuB,CACzB,CAAC,CACH,CAEA,MAAMgB,EAAQf,EAAY,CAAE,OAAAC,EAAQ,aAAAC,EAAc,OAAAH,EAAQ,oBAAAM,CAAoB,CAAC,EACzEW,EAAYN,EACdV,EAAY,CACV,OAAQS,EACR,aAAAP,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAU,EAAO,UAAAC,EAAW,SAAAJ,EAAU,eAAAC,CAAe,CACtD",
-  "names": ["Decimal", "PRICE_SYMBOL", "languageTerritory", "locale", "formatPrice", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "code", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "formatDiscount", "discount", "discountAmount", "savePriceAmount", "price", "basePrice"]
+  "sourcesContent": ["import Decimal from 'decimal.js'\nimport type { ContainerProps } from '../../types/props.js'\n/* eslint-disable no-useless-escape */\nexport const PRICE_SYMBOL = {\n  us: '$',\n  uk: '\u00A3',\n  ca: '$',\n  eu: '\u20AC',\n  fr: '\u20AC',\n  de: '\u20AC',\n  vn: '\u20AB',\n  cl: '$',\n  sg: '$',\n  ae: 'AED',\n} as any\n\nexport const languageTerritory = (locale: string) =>\n  // https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_territory_information.html\n  ({\n    us: 'en-us',\n    uk: 'en-gb',\n    ca: 'en-ca',\n    au: 'en-au',\n    eu: 'en',\n    fr: 'de-DE',\n    'eu-es': 'de-DE',\n    'eu-fr': 'de-DE',\n    'eu-it': 'de-DE',\n    'eu-de': 'de-DE',\n    'eu-en': 'en-US',\n    'cz-en': 'de-DE',\n    nl: 'de-DE',\n    de: 'de-DE',\n    vn: 'vi-vn',\n    sg: 'en-sg',\n    'ae-en': 'ae-en',\n    plus: 'en-us',\n    cl: 'es-cl',\n    dk: 'en-dk',\n    fi: 'en-fi',\n    no: 'en-no',\n    is: 'en-is',\n    se: 'en-se',\n  })[locale] || ''\n\nexport function formatPrice({\n  amount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros = false,\n}: {\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  const formatCurrency = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'currency',\n    currency: currencyCode || 'USD',\n    minimumFractionDigits: maximumFractionDigits === 0 ? 0 : minimumFractionDigits,\n    maximumFractionDigits,\n  })\n\n  let formattedValue = formatCurrency.format(amount)\n\n  if (['eu-de', 'eu-en', 'de', 'eu'].includes(locale)) {\n    formattedValue = formattedValue?.toString()?.replace(/[\\s]/g, '')\n  }\n\n  if (removeTrailingZeros) {\n    // Adjust the regex to match comma as decimal separator\n    formattedValue = formattedValue\n      .replace(/(\\.\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\.0+\\b/, '')\n      .replace(/(\\,\\d*?[1-9])0+\\b/, '$1')\n      .replace(/\\,0+\\b/, '')\n  }\n\n  return formattedValue\n}\n\nexport function formatVariantPrice({\n  amount,\n  baseAmount,\n  currencyCode,\n  locale,\n  maximumFractionDigits,\n  minimumFractionDigits,\n  removeTrailingZeros,\n}: {\n  baseAmount: number\n  amount: number\n  currencyCode: string\n  locale: string\n  maximumFractionDigits?: number\n  minimumFractionDigits?: number\n  removeTrailingZeros?: boolean\n}) {\n  if (typeof Intl === 'undefined') {\n    return {\n      price: `${PRICE_SYMBOL[locale]}${amount}`,\n      basePrice: `${PRICE_SYMBOL[locale]}${baseAmount}`,\n      discount: `${PRICE_SYMBOL[locale]}${baseAmount - amount || 0}`,\n    }\n  }\n\n  const hasDiscount = baseAmount > amount\n  const formatDiscount = new Intl.NumberFormat(languageTerritory(locale), {\n    style: 'percent',\n  })\n  const discount = hasDiscount ? formatDiscount.format((baseAmount - amount) / baseAmount) : null\n  // \u6298\u6263\u91D1\u989D\n  let discountAmount;\n  if (hasDiscount) { \n    const savePriceAmount = new Decimal(baseAmount).sub(amount || 0).toNumber()\n    discountAmount = formatPrice({\n      amount: savePriceAmount,\n      currencyCode: currencyCode || 'USD',\n      locale,\n      maximumFractionDigits: 2,\n    })\n  }\n\n  const price = formatPrice({ amount, currencyCode, locale, removeTrailingZeros })\n  const basePrice = hasDiscount\n    ? formatPrice({\n        amount: baseAmount,\n        currencyCode,\n        locale,\n        maximumFractionDigits,\n        minimumFractionDigits,\n        removeTrailingZeros,\n      })\n    : undefined\n\n  return { price, basePrice, discount, discountAmount }\n}\n\ntype EventType = {\n  primaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n  secondaryButton?: (v: any, index: number, data: ShelfDisplayType) => void\n}\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  custom_name?: string\n  custom_description?: string\n  custom_image?: string\n  custom_theme?: string\n}\n\nexport type ShelfDisplayType = {\n  title?: string\n  isShowTab?: boolean\n  isShowTag?: boolean\n  isShowRecommendedCard?: boolean\n  isShowOriginalPrice?: 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  primaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  /** \u526F\u6309\u94AE\u914D\u7F6E */\n  secondaryButton?: string\n  secondaryFun?: 'AddCart' | 'BuyNow' | 'LearnMore'\n  theme?: 'light' | 'dark'\n  containerProps?: ContainerProps\n}\n\nexport interface ShelfDisplayProps {\n  data: ShelfDisplayType\n  buildData?: {\n    categories: any[]\n    products: any[]\n  }\n  recommendedData?: any[]\n  /** \u6309\u94AE\u4E8B\u4EF6*/\n  event?: EventType\n  className?: string\n  key?: string\n  target?: '_self' | '_blank'\n  breakpoints?: {\n    [key: number]: {\n      spaceBetween: number\n      freeMode: boolean\n      slidesPerView: number\n    }\n  }\n  metafields?: any\n  isDisplayGudgments?: boolean\n  isDisplayBackImage?: boolean\n}"],
+  "mappings": "AAAA,OAAOA,MAAa,aAGb,MAAMC,EAAe,CAC1B,GAAI,IACJ,GAAI,OACJ,GAAI,IACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,SACJ,GAAI,IACJ,GAAI,IACJ,GAAI,KACN,EAEaC,EAAqBC,IAE/B,CACC,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,KACJ,GAAI,QACJ,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,QAAS,QACT,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,QAAS,QACT,KAAM,QACN,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,QACJ,GAAI,OACN,GAAGA,CAAM,GAAK,GAET,SAASC,EAAY,CAC1B,OAAAC,EACA,aAAAC,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,EAAsB,EACxB,EAOG,CAQD,IAAIC,EAPmB,IAAI,KAAK,aAAaR,EAAkBC,CAAM,EAAG,CACtE,MAAO,WACP,SAAUG,GAAgB,MAC1B,sBAAuBC,IAA0B,EAAI,EAAIC,EACzD,sBAAAD,CACF,CAAC,EAEmC,OAAOF,CAAM,EAEjD,MAAI,CAAC,QAAS,QAAS,KAAM,IAAI,EAAE,SAASF,CAAM,IAChDO,EAAiBA,GAAgB,SAAS,GAAG,QAAQ,QAAS,EAAE,GAG9DD,IAEFC,EAAiBA,EACd,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,EACpB,QAAQ,oBAAqB,IAAI,EACjC,QAAQ,SAAU,EAAE,GAGlBA,CACT,CAEO,SAASC,EAAmB,CACjC,OAAAN,EACA,WAAAO,EACA,aAAAN,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,EAQG,CACD,GAAI,OAAO,KAAS,IAClB,MAAO,CACL,MAAO,GAAGR,EAAaE,CAAM,CAAC,GAAGE,CAAM,GACvC,UAAW,GAAGJ,EAAaE,CAAM,CAAC,GAAGS,CAAU,GAC/C,SAAU,GAAGX,EAAaE,CAAM,CAAC,GAAGS,EAAaP,GAAU,CAAC,EAC9D,EAGF,MAAMQ,EAAcD,EAAaP,EAC3BS,EAAiB,IAAI,KAAK,aAAaZ,EAAkBC,CAAM,EAAG,CACtE,MAAO,SACT,CAAC,EACKY,EAAWF,EAAcC,EAAe,QAAQF,EAAaP,GAAUO,CAAU,EAAI,KAE3F,IAAII,EACJ,GAAIH,EAAa,CACf,MAAMI,EAAkB,IAAIjB,EAAQY,CAAU,EAAE,IAAIP,GAAU,CAAC,EAAE,SAAS,EAC1EW,EAAiBZ,EAAY,CAC3B,OAAQa,EACR,aAAcX,GAAgB,MAC9B,OAAAH,EACA,sBAAuB,CACzB,CAAC,CACH,CAEA,MAAMe,EAAQd,EAAY,CAAE,OAAAC,EAAQ,aAAAC,EAAc,OAAAH,EAAQ,oBAAAM,CAAoB,CAAC,EACzEU,EAAYN,EACdT,EAAY,CACV,OAAQQ,EACR,aAAAN,EACA,OAAAH,EACA,sBAAAI,EACA,sBAAAC,EACA,oBAAAC,CACF,CAAC,EACD,OAEJ,MAAO,CAAE,MAAAS,EAAO,UAAAC,EAAW,SAAAJ,EAAU,eAAAC,CAAe,CACtD",
+  "names": ["Decimal", "PRICE_SYMBOL", "languageTerritory", "locale", "formatPrice", "amount", "currencyCode", "maximumFractionDigits", "minimumFractionDigits", "removeTrailingZeros", "formattedValue", "formatVariantPrice", "baseAmount", "hasDiscount", "formatDiscount", "discount", "discountAmount", "savePriceAmount", "price", "basePrice"]
 }

package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js

@@ -1,10 +1,10 @@
-import{Fragment as A,jsx as s,jsxs as c}from"react/jsx-runtime";import{useAiuiContext as H}from"../AiuiProvider/index.js";import{formatVariantPrice as L}from"./shelfDisplay.js";import O from"../../components/picture.js";import z from"../../components/badge.js";import{cn as d}from"../../helpers/utils.js";import{Text as F}from"../../components/text.js";import N from"../../components/button.js";import{gaTrack as U}from"../../shared/track.js";import{trackUrlRef as W}from"../../shared/trackUrlRef.js";import{Heading as R}from"../../components/heading.js";import{useEffect as M,useState as V}from"react";import{useExposure as q}from"../../hooks/useExposure.js";import{useRef as G}from"react";const T="image",B="product_shelf",J=999999999e-2,pe=({data:e,configuration:t})=>{const{itemShape:D,metafields:k}=t||{},{locale:x="us",copyWriting:C}=H(),{discounts:h}=k||{},[$,I]=V([]),w=G(null),S=(o,r,l)=>t?.event?.primaryButton?.(o,r+1,l),P=(o,r,l)=>t?.event?.secondaryButton?.(o,r+1,l),i=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},a=!i?.availableForSale&&i?.price?.amount===J,E=t?.isShowTag,_=t?.isShowOriginalPrice,f=i?.coupons?.[0],{price:g,basePrice:j,discount:v}=L({locale:x,amount:_&&f?f.variant_price4wscode:i.price,baseAmount:_&&f?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),b=()=>{const o=e?.sku,r=e?.variants;return r?.find(n=>n?.sku===o)?.image?.url||r?.[0]?.image?.url||""},u=e?.custom_name||e?.title||e?.name,m=e?.custom_description||e?.description;M(()=>{let o=[];if(v){const l=`${v}${h?.off||""}`;o.push(l)}const r=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,v?1:2);I(o.concat(r))},[e?.tags,v]),q(w,{componentType:T,componentName:B,componentTitle:u,componentDescription:m,position:t?.index+1});const y=()=>c(A,{children:[E?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:$?.map?.((o,r)=>s(z,{children:o},r))}):null,u?s(R,{as:"h3",title:u||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2 text-info-primary",html:u||""}):null,m?s(F,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm text-info-primary",html:m||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:a?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:C?.soldOutText}):c(A,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&g||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&j||""})]})}),c("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(N,{variant:"secondary",onClick:()=>P(e,t?.index,t),className:`
-                ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(N,{variant:"primary",onClick:()=>S(e,t?.index,t),className:`
-              ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]});return s("div",{ref:w,className:d("bg-[#EAEAEC] tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",D==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]",{"aiui-dark":e?.custom_theme==="dark"}),children:e?.custom_image?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:c("div",{className:"relative inset-0 size-full",children:[s(O,{alt:"",source:e?.custom_image,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:y()})]})}):c("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[s("div",{className:d("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":u,target:t?.target,href:W(`${x==="us"||!x?"":`/${x}`}/products/${e?.handle}`,`${T}_${B}`),onClick:()=>{U({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(O,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),y()]})},e?.id||e?.handle)},me=({data:e,configuration:t})=>{const{itemShape:D,itemLength:k,metafields:x}=t||{},{discounts:C}=x||{},{locale:h="us",copyWriting:$}=H(),[I,w]=V([]),S=G(null),P=(l,n,p)=>t?.event?.primaryButton?.(l,n+1,p),i=(l,n,p)=>t?.event?.secondaryButton?.(l,n+1,p),a=e?.variants?.find(l=>l?.sku===e?.sku)||e?.variants?.[0]||{},E=!a?.availableForSale&&a?.price?.amount===J,_=t?.isShowTag,f=t?.isShowOriginalPrice,g=a?.coupons?.[0],{price:j,basePrice:v,discount:b}=L({locale:h,amount:f&&g?g.variant_price4wscode:a.price,baseAmount:f&&g?a.price:0,currencyCode:e?.price?.currencyCode||"USD"}),u=()=>{const l=e?.sku,n=e?.variants;return n?.find(K=>K?.sku===l)?.image?.url||n?.[0]?.image?.url||""},m=e?.custom_name||e?.title,y=e?.custom_description||e?.description;q(S,{componentType:T,componentName:B,componentTitle:m,componentDescription:y,position:t?.index+1});const o=()=>k>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},r=()=>k>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return M(()=>{let l=[];if(b){const p=`${b}${C?.off||""}`;l.push(p)}const n=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,b?1:2);w(l.concat(n))},[e?.tags,b]),s("div",{ref:S,className:d(o().wrap,D==="round"?"rounded-2xl":"rounded-none","bg-[#EAEAEC] tablet:hover:bg-info-white duration-300 gap-6","box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]",{"aiui-dark":e.custom_theme==="dark"}),children:c("div",{className:d(r(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:d(o().imgItem,"relative overflow-hidden desktop:mb-0 mb-1"),children:s("a",{"aria-label":m,target:t?.target,href:W(`${h==="us"||!h?"":`/${h}`}/products/${e?.handle}`,`${T}_${B}`),onClick:()=>{U({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,price:a?.price,item_variant:a?.name,index:t?.index+1}]}})},children:s(O,{source:u(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c("div",{className:d("flex flex-col justify-center items-start",o().boxItem),children:[_?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:I?.map?.((l,n)=>s(z,{children:l},n))}):null,m?s(R,{as:"h3",title:m||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2 text-info-primary",html:m||""}):null,y?s(F,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm text-info-primary",html:y||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:E?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:$?.soldOutText}):c(A,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&j||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&v||""})]})}),c("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(N,{variant:"secondary",onClick:()=>i(e,t?.index,t),className:`
-                ${t.direction==="vertical"?"w-full":""}
-              `,children:t?.secondaryButton||""}):null,t?.primaryButton?s(N,{variant:"primary",onClick:()=>P(e,t?.index,t),className:`
-              ${t.direction==="vertical"?"w-full":""}
-            `,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{me as ShelfDisplayHorizontalItem,pe as ShelfDisplayWrapItem};
+import{Fragment as P,jsx as l,jsxs as p}from"react/jsx-runtime";import{useAiuiContext as $}from"../AiuiProvider/index.js";import{formatVariantPrice as j}from"./shelfDisplay.js";import I from"../../components/picture.js";import O from"../../components/badge.js";import{cn as m}from"../../helpers/utils.js";import{Text as H}from"../../components/text.js";import y from"../../components/button.js";import{gaTrack as L}from"../../shared/track.js";import{trackUrlRef as z}from"../../shared/trackUrlRef.js";import{Heading as E}from"../../components/heading.js";import{useExposure as F}from"../../hooks/useExposure.js";import{useRef as U}from"react";const k="image",w="product_shelf",W=999999999e-2,te=({data:t,configuration:e})=>{const{isDisplayBackImage:g=!1,itemShape:f}=e||{},{locale:n="us",copyWriting:S}=$(),v=U(null),_=(o,s,i)=>e?.event?.primaryButton?.(o,s+1,i),N=(o,s,i)=>e?.event?.secondaryButton?.(o,s+1,i),a=t?.variants?.find(o=>o?.sku===t?.sku)||t?.variants?.[0]||{},B=!a?.availableForSale&&a?.price?.amount===W,D=e?.isShowTag,h=e?.isShowOriginalPrice,c=a?.coupons?.[0],{price:T,basePrice:C}=j({locale:n,amount:h&&c?c.variant_price4wscode:a.price,baseAmount:h&&c?a.price:0,currencyCode:t?.price?.currencyCode||"USD"}),b=()=>{const o=t?.sku,s=t?.variants;return s?.find(u=>u?.sku===o)?.image?.url||s?.[0]?.image?.url||""},r=t?.custom_name||t?.title,d=t?.custom_description||t?.description;F(v,{componentType:k,componentName:w,componentTitle:r,componentDescription:d,position:e?.index+1});const x=()=>p(P,{children:[D?l("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:t?.tags?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((o,s)=>l(O,{children:o},s))}):null,r?l(E,{as:"h3",title:r||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:r||""}):null,d?l(H,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:d||""}):null,l("div",{className:"mb-2 mt-5 flex items-center",children:B?l("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:S?.soldOutText}):p(P,{children:[l("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&T||""}),l("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&C||""})]})}),p("div",{className:m("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",e.direction==="vertical"?"flex-col":""),children:[e?.secondaryButton?l(y,{variant:"secondary",onClick:()=>N(t,e?.index,e),className:`
+                ${e.direction==="vertical"?"w-full":""}
+              `,children:e?.secondaryButton||""}):null,e?.primaryButton?l(y,{variant:"primary",onClick:()=>_(t,e?.index,e),className:`
+              ${e.direction==="vertical"?"w-full":""}
+            `,children:e?.primaryButton||""}):null]})]});return l("div",{ref:v,className:m("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",f==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:g?l("div",{className:"absolute inset-0 box-border overflow-hidden",children:p("div",{className:"relative inset-0 size-full",children:[l(I,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"}),l("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:x()})]})}):p("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[l("div",{className:m("lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:l("a",{"aria-label":r,target:e?.target,href:z(`${n==="us"||!n?"":`/${n}`}/products/${t?.handle}`,`${k}_${w}`),onClick:()=>{L({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:t?.sku||a?.sku,item_name:t?.name,item_variant:a?.name,price:a?.price,index:e?.index+1}]}})},children:l(I,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),x()]})},t?.id||t?.handle)},le=({data:t,configuration:e})=>{const{itemShape:g,itemLength:f}=e||{},{locale:n="us",copyWriting:S}=$(),v=U(null),_=(s,i,u)=>e?.event?.primaryButton?.(s,i+1,u),N=(s,i,u)=>e?.event?.secondaryButton?.(s,i+1,u),a=t?.variants?.find(s=>s?.sku===t?.sku)||t?.variants?.[0]||{},B=!a?.availableForSale&&a?.price?.amount===W,D=e?.isShowTag,h=e?.isShowOriginalPrice,c=a?.coupons?.[0],{price:T,basePrice:C}=j({locale:n,amount:h&&c?c.variant_price4wscode:a.price,baseAmount:h&&c?a.price:0,currencyCode:t?.price?.currencyCode||"USD"}),b=()=>{const s=t?.sku,i=t?.variants;return i?.find(A=>A?.sku===s)?.image?.url||i?.[0]?.image?.url||""},r=t?.custom_name||t?.title,d=t?.custom_description||t?.description;F(v,{componentType:k,componentName:w,componentTitle:r,componentDescription:d,position:e?.index+1});const x=()=>f>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},o=()=>f>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return l("div",{ref:v,className:m(x().wrap,g==="round"?"rounded-2xl":"rounded-none","bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6","box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]"),children:p("div",{className:m(o(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[l("div",{className:m(x().imgItem,"relative overflow-hidden desktop:mb-0 mb-1"),children:l("a",{"aria-label":r,target:e?.target,href:z(`${n==="us"||!n?"":`/${n}`}/products/${t?.handle}`,`${k}_${w}`),onClick:()=>{L({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:t?.sku||a?.sku,item_name:t?.name,item_variant:a?.name,price:a?.price,index:e?.index+1}]}})},children:l(I,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),p("div",{className:m("flex flex-col justify-center items-start",x().boxItem),children:[D?l("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:t?.tags?.filter?.(s=>s?.startsWith?.("CLtag"))?.map?.(s=>s?.replace?.("CLtag:",""))?.slice?.(0,2)?.map?.((s,i)=>l(O,{children:s},i))}):null,r?l(E,{as:"h3",title:r||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:r||""}):null,d?l(H,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:d||""}):null,l("div",{className:"mb-2 mt-5 flex items-center",children:B?l("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:S?.soldOutText}):p(P,{children:[l("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&T||""}),l("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&C||""})]})}),p("div",{className:m("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",e.direction==="vertical"?"flex-col":""),children:[e?.secondaryButton?l(y,{variant:"secondary",onClick:()=>N(t,e?.index,e),className:`
+                ${e.direction==="vertical"?"w-full":""}
+              `,children:e?.secondaryButton||""}):null,e?.primaryButton?l(y,{variant:"primary",onClick:()=>_(t,e?.index,e),className:`
+              ${e.direction==="vertical"?"w-full":""}
+            `,children:e?.primaryButton||""}):null]})]})]})},t?.id||t?.handle)};export{le as ShelfDisplayHorizontalItem,te as ShelfDisplayWrapItem};
 //# sourceMappingURL=shelfDisplayItem.js.map