@lanaco/lnc-react-ui 4.0.140 → 4.0.141

package/dist/{suspense-product-card-detailed-DtTXmJJB.js → suspense-product-card-detailed-CUd-EI3U.js}

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.140",
+  "version": "4.0.141",
   "description": "React component library",
   "type": "module",
   "keywords": [