@lanaco/lnc-react-ui 4.0.156 → 4.0.160

package/dist/{suspense-product-card-detailed-YJVsf2-a.js → suspense-product-card-detailed-BZtObEfA.js}

@@ -1,15 +1,15 @@
-import { jsxs as t, jsx as e, Fragment as P } from "react/jsx-runtime";
-import { forwardRef as M, useState as L, useRef as q, useEffect as we, cloneElement as A, Suspense as be } from "react";
-import { p as ke, t as Y, o as k, l as K, q as H, G as Z, k as ye } from "./utils-BdsZgOUE.js";
-import { s as $ } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { jsxs as t, jsx as e, Fragment as $ } from "react/jsx-runtime";
+import { forwardRef as B, useState as q, useRef as A, useEffect as be, cloneElement as Y, Suspense as ke } from "react";
+import { p as ye, t as K, o as y, l as H, q as Z, G as J } from "./utils-BdsZgOUE.js";
+import { s as T } from "./emotion-styled.browser.esm-BNN1dTl3.js";
 import { P as _e } from "./index-CF3HhgvN.js";
-import C from "./Badge.js";
-import Ne from "./Popover.js";
-import Ce from "./PopoverTrigger.js";
+import P from "./Badge.js";
+import Ce from "./Popover.js";
+import Ne from "./PopoverTrigger.js";
 import Pe from "./PopoverContent.js";
 import { u as $e } from "./useDetectMobile-Bkvj0VMa.js";
-import { M as J } from "./consts-BuFChS64.js";
-const Q = $.div`
+import { M as Q } from "./consts-BuFChS64.js";
+const ee = T.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -61,24 +61,16 @@ const Q = $.div`
     }
   }
 
-  & .tag-mobile {
-    font-weight: 400;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    letter-spacing: 0.025rem;
-    color: var(--gray-600, #676e79);
-  }
-
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-    ${ke(2)}
+    ${ye(2)}
   }
 
   & .price-text {
     font-size: 1rem;
     font-weight: 600;
-    ${Y()}
+    ${K()}
     display: flex;
     align-items: end;
     gap: 0.5rem;
@@ -101,7 +93,7 @@ const Q = $.div`
     font-size: 0.75rem;
     font-weight: 400;
     color: var(--gray-600, #676e79);
-    ${Y()}
+    ${K()}
   }
 
   & .tags-wrapper {
@@ -110,7 +102,7 @@ const Q = $.div`
   }
 
   & .skeleton-img {
-    background-color: ${k("-90deg")};
+    background-color: ${y("-90deg")};
     border-radius: 0.75rem;
     border: 1px solid white;
     width: 100%;
@@ -118,25 +110,25 @@ const Q = $.div`
   }
 
   & .skeleton-title {
-    background-color: ${k("-90deg")};
+    background-color: ${y("-90deg")};
     width: 100%;
     height: 2.5rem;
   }
 
   & .skeleton-tags {
-    background-color: ${k("-90deg")};
+    background-color: ${y("-90deg")};
     width: 80%;
     height: 1.5rem;
   }
 
   & .skeleton-price {
-    background-color: ${k("-90deg")};
+    background-color: ${y("-90deg")};
     width: 50%;
     height: 2.5rem;
   }
 
   & .skeleton-sponsored {
-    background-color: ${k("-90deg")};
+    background-color: ${y("-90deg")};
     width: 50%;
     height: 1rem;
   }
@@ -146,11 +138,54 @@ const Q = $.div`
     gap: 0.25rem;
   }
 
-  @media (max-width: ${J + "px"}) {
+  @media (max-width: ${Q + "px"}) {
     overflow: visible;
 
+    & .wrapper-card-3 {
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      overflow-x: scroll;
+      width: 8.875rem !important;
+
+      -webkit-overflow-scrolling: touch;
+      ::-webkit-scrollbar {
+        -webkit-appearance: none;
+      }
+      -ms-overflow-style: none;
+      /* Internet Explorer 10+ */
+      scrollbar-width: none;
+      /* Firefox */
+
+      &::-webkit-scrollbar {
+        display: none;
+        /* Safari and Chrome */
+      }
+
+      & > div {
+        & > div {
+          width: 8.875rem !important;
+        }
+      }
+    }
+
     & .tags-popover__trigger {
-      flex-wrap: wrap;
+      overflow-x: scroll;
+      justify-content: flex-start;
+      width: 100%;
+
+      -webkit-overflow-scrolling: touch;
+      ::-webkit-scrollbar {
+        -webkit-appearance: none;
+      }
+      -ms-overflow-style: none;
+      /* Internet Explorer 10+ */
+      scrollbar-width: none;
+      /* Firefox */
+
+      &::-webkit-scrollbar {
+        display: none;
+        /* Safari and Chrome */
+      }
     }
 
     & .price-text {
@@ -166,7 +201,7 @@ const Q = $.div`
   &:hover .product-image-wrapper img {
     transform: scale(1.1);
   }
-`, Te = $.div`
+`, Te = T.div`
   position: relative;
   overflow: hidden;
   border-radius: 0.75rem;
@@ -198,7 +233,7 @@ const Q = $.div`
     transition: var(--transition, all 0.3s ease);
   }
 
-  @media (max-width: ${J + "px"}) {
+  @media (max-width: ${Q + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -211,7 +246,7 @@ const Q = $.div`
       display: flex;
     }
   }
-`, Ee = $.div`
+`, Ee = T.div`
   background: var(--white, #fff);
   z-index: 1;
 
@@ -261,7 +296,7 @@ const Q = $.div`
       color: var(--gray-950, #14161a);
     }
   }
-`, Ve = $.div`
+`, Se = T.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -273,10 +308,10 @@ const Q = $.div`
     font-size: 1rem;
     color: var(--warning-500, #F59E0B);
   }
-`, Oe = M(({ sponsoredText: m = "Sponsored" }, v) => /* @__PURE__ */ t(Ve, { ref: v, className: "sponsored-line", children: [
+`, Ve = B(({ sponsoredText: c = "Sponsored" }, f) => /* @__PURE__ */ t(Se, { ref: f, className: "sponsored-line", children: [
   /* @__PURE__ */ e("i", { className: "mng-lnc-paw2" }),
-  /* @__PURE__ */ e("span", { children: m })
-] })), Se = "Vehicles_Cars", ze = "Vehicles_Motorcycles", Be = "Vehicles_Trucks", Me = "Vehicles_AgriculturalMachines_Tractors", We = "Vehicles_ConstructionMachines", Fe = "Vehicles_Bus", De = "Vehicles_Campers", Ie = "RealEstates_", a = {
+  /* @__PURE__ */ e("span", { children: c })
+] })), Oe = "Vehicles_Cars", Be = "Vehicles_Motorcycles", ze = "Vehicles_Trucks", Me = "Vehicles_AgriculturalMachines_Tractors", Fe = "Vehicles_ConstructionMachines", We = "Vehicles_Bus", Ie = "Vehicles_Campers", je = "RealEstates_", a = {
   Mileage: {
     icon: "mng-lnc-road",
     measure: "km"
@@ -377,173 +412,167 @@ const Q = $.div`
     icon: " mng-lnc-clock--filled",
     measure: ""
   }
-}, xe = M((m, v) => {
+}, Qe = B((c, f) => {
   const {
-    uuid: p,
-    name: y,
-    price: u = 0,
-    sellingPrice: _,
+    uuid: l,
+    name: _,
+    price: g = 0,
+    sellingPrice: C,
     currency: N,
-    isNegotiable: T,
-    isFree: E,
-    imageUrl: x,
-    location: ee,
-    sponsored: re,
-    imageComponent: W,
-    onSelectCard: oe = () => {
+    isNegotiable: E,
+    isFree: S,
+    imageUrl: re,
+    location: oe,
+    sponsored: ne,
+    imageComponent: z,
+    onSelectCard: te = () => {
     },
-    freeText: ne = "Free",
-    negotiableText: te = "Negotiable",
+    freeText: ae = "Free",
+    negotiableText: ie = "Negotiable",
     tags: n = [],
     categoryCode: V,
-    condition: O,
-    quantity: S,
-    trade: z,
-    sponsoredText: ie,
-    onBookmark: F = () => {
+    condition: M,
+    quantity: F,
+    trade: W,
+    sponsoredText: se,
+    onBookmark: I = () => {
     },
-    bookmarkComponent: w,
-    bookmarked: D,
-    bookmarkLists: ae
-  } = m, B = $e(), se = () => {
-    var c;
-    if (!K(w)) return /* @__PURE__ */ e(P, {});
-    const r = w, o = (c = w == null ? void 0 : w.props) == null ? void 0 : c.children, i = A(o, {
-      key: `bookmark_pr__${D}`,
-      bookmarked: D,
-      productUuid: p,
-      onAddToBookmark: () => F(!0, p),
-      onRemoveFromBookmark: () => F(!1, p),
-      bookmarkedUuidList: ae
+    bookmarkComponent: b,
+    bookmarked: j,
+    bookmarkLists: ce,
+    metadata: v
+  } = c, O = $e(), le = () => {
+    var d;
+    if (!H(b)) return /* @__PURE__ */ e($, {});
+    const r = b, o = (d = b == null ? void 0 : b.props) == null ? void 0 : d.children, s = Y(o, {
+      key: `bookmark_pr__${j}`,
+      bookmarked: j,
+      productUuid: l,
+      onAddToBookmark: () => I(!0, l),
+      onRemoveFromBookmark: () => I(!1, l),
+      bookmarkedUuidList: ce
     });
-    return A(r, void 0, i);
-  }, I = [
-    Se,
-    ze,
+    return Y(r, void 0, s);
+  }, D = [
+    Oe,
     Be,
+    ze,
     Me,
-    We,
     Fe,
-    De,
-    Ie
+    We,
+    Ie,
+    je
   ].some(
     (r) => V == null ? void 0 : V.includes(r)
-  ), [ce, j] = L(!1), le = () => {
-    j(!0);
-  }, de = () => {
-    j(!1);
-  }, s = q(null), h = q([]), [me, pe] = L(n == null ? void 0 : n.length), ge = () => {
-    var c, l, b;
-    if (!(s != null && s.current) || ((c = h == null ? void 0 : h.current) == null ? void 0 : c.length) === 0) return;
-    const r = (l = s == null ? void 0 : s.current) == null ? void 0 : l.offsetWidth;
-    let o = 0, i = 0;
-    for (let d = 0; d < (n == null ? void 0 : n.length); d++) {
-      const f = ((b = h == null ? void 0 : h.current[d]) == null ? void 0 : b.offsetWidth) || 0, g = o + f + 4;
-      if (g <= r)
-        o += g, i++;
+  ), [de, x] = q(!1), me = () => {
+    x(!0);
+  }, pe = () => {
+    x(!1);
+  }, i = A(null), u = A([]), [ge, G] = q(n == null ? void 0 : n.length), ue = () => {
+    var d, w, k;
+    if (!(i != null && i.current) || ((d = u == null ? void 0 : u.current) == null ? void 0 : d.length) === 0) return;
+    if (O) {
+      G(n == null ? void 0 : n.length);
+      return;
+    }
+    const r = (w = i == null ? void 0 : i.current) == null ? void 0 : w.offsetWidth;
+    let o = 0, s = 0;
+    for (let m = 0; m < (n == null ? void 0 : n.length); m++) {
+      const h = ((k = u == null ? void 0 : u.current[m]) == null ? void 0 : k.offsetWidth) || 0, p = o + h + 4;
+      if (p <= r)
+        o += p, s++;
       else
         break;
     }
-    pe(i);
+    G(s);
   };
-  we(() => {
-    const r = s == null ? void 0 : s.current;
+  be(() => {
+    const r = i == null ? void 0 : i.current;
     if (!r) return;
     const o = new ResizeObserver(() => {
-      ge();
+      ue();
     });
     return o.observe(r), () => {
       o.disconnect();
     };
-  }, [n]);
-  const ue = () => {
+  }, [n, O]);
+  const he = () => {
     var r;
-    return /* @__PURE__ */ e("div", { className: "tags-popover__trigger", children: (r = n == null ? void 0 : n.slice(0, me)) == null ? void 0 : r.map((o, i) => {
-      var f, g, R, U, X;
-      const c = ((f = a == null ? void 0 : a[o == null ? void 0 : o.code]) == null ? void 0 : f.icon) ?? ((g = a == null ? void 0 : a.default) == null ? void 0 : g.icon) ?? "", l = ((R = o == null ? void 0 : o.measurementUnit) == null ? void 0 : R.symbol) ?? ((U = a == null ? void 0 : a[o == null ? void 0 : o.code]) == null ? void 0 : U.measure) ?? "", d = [(o == null ? void 0 : o.value) ?? ((X = o == null ? void 0 : o.multiOptions) == null ? void 0 : X[0]) ?? "", l].filter(Boolean).join(" ");
-      return B ? /* @__PURE__ */ t("div", { className: "tag-mobile", children: [
-        d,
-        i < (n == null ? void 0 : n.length) - 1 ? " · " : ""
-      ] }) : /* @__PURE__ */ t(
-        C,
+    return /* @__PURE__ */ e("div", { className: "tags-popover__trigger", children: (r = n == null ? void 0 : n.slice(0, ge)) == null ? void 0 : r.map((o, s) => {
+      var h, p, U, X, L;
+      const d = ((h = a == null ? void 0 : a[o == null ? void 0 : o.code]) == null ? void 0 : h.icon) ?? ((p = a == null ? void 0 : a.default) == null ? void 0 : p.icon) ?? "", w = ((U = o == null ? void 0 : o.measurementUnit) == null ? void 0 : U.symbol) ?? ((X = a == null ? void 0 : a[o == null ? void 0 : o.code]) == null ? void 0 : X.measure) ?? "", m = [(o == null ? void 0 : o.value) ?? ((L = o == null ? void 0 : o.multiOptions) == null ? void 0 : L[0]) ?? "", w].filter(Boolean).join(" ");
+      return /* @__PURE__ */ t(
+        P,
         {
-          ref: (ve) => h.current[i] = ve,
+          ref: (we) => u.current[s] = we,
           className: "tag",
           children: [
-            /* @__PURE__ */ e("i", { className: c }),
-            d
+            /* @__PURE__ */ e("i", { className: d }),
+            m
           ]
         },
-        `detailed-products-section-tag__${i + 1}`
+        `detailed-products-section-tag__${s + 1}`
       );
     }) });
-  }, he = () => /* @__PURE__ */ e("div", { className: "tags-popover__content", children: n == null ? void 0 : n.map((r, o) => {
-    var d, f, g;
-    const i = ((d = r == null ? void 0 : r.measurementUnit) == null ? void 0 : d.symbol) ?? ((f = a == null ? void 0 : a[r == null ? void 0 : r.code]) == null ? void 0 : f.measure) ?? "", l = [(r == null ? void 0 : r.value) ?? ((g = r == null ? void 0 : r.multiOptions) == null ? void 0 : g[0]) ?? "", i].filter(Boolean).join(" "), b = r == null ? void 0 : r.name;
+  }, fe = () => /* @__PURE__ */ e("div", { className: "tags-popover__content", children: n == null ? void 0 : n.map((r, o) => {
+    var m, h, p;
+    const s = ((m = r == null ? void 0 : r.measurementUnit) == null ? void 0 : m.symbol) ?? ((h = a == null ? void 0 : a[r == null ? void 0 : r.code]) == null ? void 0 : h.measure) ?? "", w = [(r == null ? void 0 : r.value) ?? ((p = r == null ? void 0 : r.multiOptions) == null ? void 0 : p[0]) ?? "", s].filter(Boolean).join(" "), k = r == null ? void 0 : r.name;
     return /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ e("span", { className: "tags-popover__name", children: `${b}: ` }),
-      /* @__PURE__ */ e("span", { className: "tags-popover__value", children: l })
+      /* @__PURE__ */ e("span", { className: "tags-popover__name", children: `${k}: ` }),
+      /* @__PURE__ */ e("span", { className: "tags-popover__value", children: w })
     ] }, `detailed-products-section-tag-dropdown__${o + 1}`);
-  }) }), fe = () => {
-    var r;
-    if (B) {
-      const o = [O, S, z];
-      return (r = o == null ? void 0 : o.filter((i) => ye(i))) == null ? void 0 : r.map((i, c, l) => /* @__PURE__ */ t("div", { className: "tag-mobile", children: [
-        i,
-        c < (l == null ? void 0 : l.length) - 1 ? " · " : ""
-      ] }));
-    }
-    return /* @__PURE__ */ t(P, { children: [
-      O && /* @__PURE__ */ e(C, { className: "tag", children: O }, "detailed-products-section-tag__condition"),
-      S && /* @__PURE__ */ e(C, { className: "tag", children: S }, "detailed-products-section-tag__quantity"),
-      z && /* @__PURE__ */ e(C, { className: "tag", children: z }, "detailed-products-section-tag__trade")
-    ] });
-  }, G = u > 0 && N && T !== !0 && E !== !0 && u !== _;
+  }) }), ve = () => /* @__PURE__ */ t($, { children: [
+    M && /* @__PURE__ */ e(P, { className: "tag", children: M }, "detailed-products-section-tag__condition"),
+    F && /* @__PURE__ */ e(P, { className: "tag", children: F }, "detailed-products-section-tag__quantity"),
+    W && /* @__PURE__ */ e(P, { className: "tag", children: W }, "detailed-products-section-tag__trade")
+  ] }), R = g > 0 && N && E !== !0 && S !== !0 && g !== C;
   return (
     // <LandingPageProductCardSkeleton />
     /* @__PURE__ */ t(
-      Q,
+      ee,
       {
-        ref: s,
+        ref: i,
         className: "product-card",
-        onClick: oe,
+        "data-accessor": v == null ? void 0 : v.accessor,
+        name: v == null ? void 0 : v.name,
+        onClick: (r) => te(r, i),
         children: [
           /* @__PURE__ */ t(Te, { className: "product-image-wrapper", children: [
-            /* @__PURE__ */ e(se, {}),
-            K(W) ? W : /* @__PURE__ */ e(_e, { src: x })
+            /* @__PURE__ */ e(le, {}),
+            H(z) ? z : /* @__PURE__ */ e(_e, { src: re })
           ] }),
-          /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: y }) }),
+          /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: _ }) }),
           /* @__PURE__ */ t("div", { className: "wrapper-card-3", children: [
-            I && /* @__PURE__ */ e(
+            D && /* @__PURE__ */ e(
               "div",
               {
-                ...B ? {} : {
-                  onMouseEnter: le,
-                  onMouseLeave: de
+                ...O ? {} : {
+                  onMouseEnter: me,
+                  onMouseLeave: pe
                 },
-                children: /* @__PURE__ */ t(Ne, { placement: "bottom", open: ce, children: [
-                  /* @__PURE__ */ e(Ce, { children: ue() }),
-                  /* @__PURE__ */ e(Pe, { style: { all: "unset" }, children: /* @__PURE__ */ e(Ee, { children: he() }) })
+                children: /* @__PURE__ */ t(Ce, { placement: "bottom", open: de, children: [
+                  /* @__PURE__ */ e(Ne, { children: he() }),
+                  /* @__PURE__ */ e(Pe, { style: { all: "unset" }, children: /* @__PURE__ */ e(Ee, { children: fe() }) })
                 ] })
               }
             ),
-            !I && fe()
+            !D && ve()
           ] }),
           /* @__PURE__ */ t("div", { className: "wrapper-card-2", children: [
-            /* @__PURE__ */ t("div", { className: `price-text ${G ? "new-price" : ""}`, children: [
-              _ > 0 && N && T !== !0 && E !== !0 && /* @__PURE__ */ e("div", { children: `${H(_)} ${Z(N)}` }),
-              G && /* @__PURE__ */ e("div", { className: `${_ > 0 ? "full-price" : ""}`, children: `${H(u)} ${Z(N)}` }),
-              T && te,
-              E && ne
+            /* @__PURE__ */ t("div", { className: `price-text ${R ? "new-price" : ""}`, children: [
+              C > 0 && N && E !== !0 && S !== !0 && /* @__PURE__ */ e("div", { children: `${Z(C)} ${J(N)}` }),
+              R && /* @__PURE__ */ e("div", { className: `${C > 0 ? "full-price" : ""}`, children: `${Z(g)} ${J(N)}` }),
+              E && ie,
+              S && ae
             ] }),
-            /* @__PURE__ */ e("div", { className: "location-text", children: ee })
+            /* @__PURE__ */ e("div", { className: "location-text", children: oe })
           ] }),
-          re === !0 && /* @__PURE__ */ e(Oe, { sponsoredText: ie })
+          ne === !0 && /* @__PURE__ */ e(Ve, { sponsoredText: se })
         ]
       }
     )
   );
-}), je = M(({}, m) => /* @__PURE__ */ t(Q, { className: "product-card", children: [
+}), De = B(({}, c) => /* @__PURE__ */ t(ee, { className: "product-card", children: [
   /* @__PURE__ */ e("img", { className: "skeleton-img" }),
   /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
     /* @__PURE__ */ e("div", { className: "skeleton-title" }),
@@ -553,27 +582,27 @@ const Q = $.div`
     /* @__PURE__ */ e("div", { className: "skeleton-price" }),
     /* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
   ] })
-] })), Ge = ({ limit: m = 5, isLoading: v = !1, keyPrefix: p }) => /* @__PURE__ */ e(P, { children: Array.from({ length: m }, (y, u) => /* @__PURE__ */ e(
-  je,
+] })), xe = ({ limit: c = 5, isLoading: f = !1, keyPrefix: l }) => /* @__PURE__ */ e($, { children: Array.from({ length: c }, (_, g) => /* @__PURE__ */ e(
+  De,
   {
-    isLoading: v
+    isLoading: f
   },
-  `${p}-skeleton-product-card-${u}`
+  `${l}-skeleton-product-card-${g}`
 )) }), er = ({
-  children: m,
-  fallbackComponent: v = /* @__PURE__ */ e(P, {}),
-  isLoading: p = !1,
-  limit: y,
-  keyPrefix: u
-}) => /* @__PURE__ */ e(be, { fallbackComponent: v, children: p === !0 ? /* @__PURE__ */ e(
-  Ge,
+  children: c,
+  fallbackComponent: f = /* @__PURE__ */ e($, {}),
+  isLoading: l = !1,
+  limit: _,
+  keyPrefix: g
+}) => /* @__PURE__ */ e(ke, { fallbackComponent: f, children: l === !0 ? /* @__PURE__ */ e(
+  xe,
   {
-    isLoading: p,
-    limit: y,
-    keyPrefix: u
+    isLoading: l,
+    limit: _,
+    keyPrefix: g
   }
-) : m });
+) : c });
 export {
-  xe as D,
+  Qe as D,
   er as S
 };