@lanaco/lnc-react-ui 4.0.139 → 4.0.141

package/dist/suspense-product-card-detailed-CUd-EI3U.js

@@ -0,0 +1,574 @@
+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 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;
+  cursor: pointer;
+  overflow: hidden;
+  width: 100%;
+
+  & .wrapper-card-1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.38rem;
+  }
+
+  & .wrapper-card-2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  & .wrapper-card-3 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+
+    & > div {
+      & > div {
+        width: 100% !important;
+      }
+    }
+  }
+
+  & .tag {
+    height: 1.5rem;
+    gap: 0.25rem;
+    padding: 0.25rem 0.375rem;
+    border-radius: 0.375rem;
+    background: #f9fafb;
+    border: 1px solid var(--gray-95012, #14161a1f);
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.025rem;
+    color: var(--gray-950, #14161a);
+    white-space: nowrap;
+    flex: 0 0 auto;
+
+    &.tag-sponsored {
+      & i {
+        color: var(--yellow-500, #f59e0b);
+      }
+    }
+  }
+
+  & .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)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${K()}
+    display: flex;
+    align-items: end;
+    gap: 0.5rem;
+    color: var(--gray-950, #14161a);
+
+    &.new-price {
+      color: var(--danger-600, #e11d48);
+    }
+
+    & .full-price {
+      text-decoration: line-through;
+      font-size: 0.75rem;
+      font-weight: 400;
+      padding-bottom: 0.125rem;
+      color: var(--gray-600, #676e79);
+    }
+  }
+
+  & .location-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--gray-600, #676e79);
+    ${K()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  & .skeleton-img {
+    background-color: ${b("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${b("-90deg")};
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-tags {
+    background-color: ${b("-90deg")};
+    width: 80%;
+    height: 1.5rem;
+  }
+
+  & .skeleton-price {
+    background-color: ${b("-90deg")};
+    width: 50%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-sponsored {
+    background-color: ${b("-90deg")};
+    width: 50%;
+    height: 1rem;
+  }
+
+  & .tags-popover__trigger {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  @media (max-width: ${Q + "px"}) {
+    overflow: visible;
+
+    & .tags-popover__trigger {
+      flex-wrap: wrap;
+    }
+
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+
+      & .full-price {
+        display: none;
+      }
+    }
+  }
+
+  &:hover .product-image-wrapper img {
+    transform: scale(1.1);
+  }
+`, Te = P.div`
+  position: relative;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  width: 100%;
+  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%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 0.75rem;
+    transition: var(--transition, all 0.3s ease);
+  }
+
+  @media (max-width: ${Q + "px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+
+    & .bookmarking-btn {
+      display: flex;
+    }
+  }
+`, Ee = P.div`
+  background: var(--white, #fff);
+  z-index: 1;
+
+  border: 1px solid var(--gray-200, #dddfe4);
+  border-radius: 0.5rem;
+  line-height: 1rem;
+  position: absolute;
+  padding: 0.5rem 0.75rem;
+  top: 0.5rem;
+  left: 25%;
+  transform: translateX(-50%);
+  min-width: 13rem;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-style: solid;
+    border-width: 0.625rem;
+  }
+
+  &::after {
+    top: -1.1875rem;
+    border-color: transparent transparent var(--white, #fff) transparent;
+  }
+
+  &::before {
+    top: -1.25rem;
+    border-color: transparent transparent var(--gray-200, #dddfe4) transparent;
+  }
+
+  & .tags-popover__content {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 400;
+
+    & .tags-popover__name {
+      color: var(--gray-600, #676e79);
+    }
+
+    & .tags-popover__value {
+      color: var(--gray-950, #14161a);
+    }
+  }
+`, Ve = P.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--gray-500);
+  font-size:  0.75rem;
+  font-weight: 500;
+
+  & i {
+    font-size: 1rem;
+    color: var(--warning-500, #F59E0B);
+  }
+`, 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 })
+] })), 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"
+  },
+  YearOfProduction: {
+    icon: "mng-lnc-calendar",
+    measure: ""
+  },
+  Fuel: {
+    icon: "mng-lnc-gas-station",
+    measure: ""
+  },
+  EnginePowerKW: {
+    icon: "mng-lnc-engine",
+    measure: "kW"
+  },
+  Transmission: {
+    icon: "mng-lnc-transmission",
+    measure: ""
+  },
+  Model: {
+    icon: "mng-lnc-application",
+    measure: ""
+  },
+  Brand: {
+    icon: "mng-lnc-car--front",
+    measure: ""
+  },
+  SurfaceArea: {
+    icon: "mng-lnc-right-angle",
+    measure: ""
+  },
+  Floor: {
+    icon: "mng-lnc-elevator",
+    measure: ""
+  },
+  FurnishedCondition: {
+    icon: "mng-lnc-sofa-01",
+    measure: ""
+  },
+  AdType: {
+    icon: "mng-lnc-notes",
+    measure: ""
+  },
+  NumberOfRooms: {
+    icon: "mng-lnc-meeting-room",
+    measure: ""
+  },
+  HeatingType: {
+    icon: "mng-lnc-heat",
+    measure: ""
+  },
+  AirConditioning: {
+    icon: "mng-lnc-air-conditioner",
+    measure: ""
+  },
+  Type: {
+    icon: "mng-lnc-house-building",
+    measure: ""
+  },
+  Parking: {
+    icon: "mng-lnc-parking-area-circle",
+    measure: ""
+  },
+  Internet: {
+    icon: "mng-lnc-wifi-02",
+    measure: ""
+  },
+  State: {
+    icon: "mng-lnc-settings-1",
+    measure: ""
+  },
+  NumberOfPremises: {
+    icon: "mng-lnc-meeting-room",
+    measure: ""
+  },
+  Pool: {
+    icon: "mng-lnc-pool",
+    measure: ""
+  },
+  Approach: {
+    icon: "mng-lnc-driveway",
+    measure: ""
+  },
+  NumberOfBeds: {
+    icon: "mng-lnc-bed",
+    measure: ""
+  },
+  Kitchen: {
+    icon: "mng-lnc-fridge",
+    measure: ""
+  },
+  BathroomToilet: {
+    icon: "mng-lnc-bath",
+    measure: ""
+  },
+  default: {
+    icon: " mng-lnc-clock--filled",
+    measure: ""
+  }
+}, xe = B((d, v) => {
+  const {
+    uuid: m,
+    title: k,
+    price: g = 0,
+    sellingPrice: y,
+    currency: _,
+    isNegotiable: $,
+    isFree: T,
+    imageUrl: ee,
+    location: re,
+    sponsored: M,
+    imageComponent: W,
+    onSelectCard: oe = () => {
+    },
+    freeText: ne = "Free",
+    negotiableText: te = "Negotiable",
+    tags: t = [],
+    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) => 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 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;
+    }
+    me(a);
+  };
+  ve(() => {
+    const r = s == null ? void 0 : s.current;
+    if (!r) return;
+    const o = new ResizeObserver(() => {
+      pe();
+    });
+    return o.observe(r), () => {
+      o.disconnect();
+    };
+  }, [t]);
+  const ge = () => {
+    var r;
+    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 < R - 1 ? " · " : ""
+      ] }) : /* @__PURE__ */ n(
+        N,
+        {
+          ref: (fe) => u.current[a] = fe,
+          className: `tag ${M ? "tag-sponsored" : ""}`,
+          children: [
+            /* @__PURE__ */ e("i", { className: h }),
+            l
+          ]
+        },
+        `detailed-products-section-tag__${a + 1}`
+      );
+    }) });
+  }, 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: `${w}: ` }),
+      /* @__PURE__ */ e("span", { className: "tags-popover__value", children: c })
+    ] }, `detailed-products-section-tag-dropdown__${o + 1}`);
+  }) }), he = () => {
+    var r;
+    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,
+        h < (c == null ? void 0 : c.length) - 1 ? " · " : ""
+      ] }));
+    }
+    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")
+    ] });
+  }, U = g > 0 && _ && $ !== !0 && T !== !0 && g !== y;
+  return (
+    // <LandingPageProductCardSkeleton />
+    /* @__PURE__ */ n(
+      x,
+      {
+        ref: s,
+        className: "product-card",
+        onClick: oe,
+        children: [
+          /* @__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: [
+            j && /* @__PURE__ */ e(
+              "div",
+              {
+                ...z ? {} : {
+                  onMouseEnter: le,
+                  onMouseLeave: de
+                },
+                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() }) })
+                ] })
+              }
+            ),
+            !j && he()
+          ] }),
+          /* @__PURE__ */ n("div", { className: "wrapper-card-2", children: [
+            /* @__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: re })
+          ] }),
+          M === !0 && /* @__PURE__ */ e(Oe, { sponsoredText: ae })
+        ]
+      }
+    )
+  );
+}), 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" }),
+    /* @__PURE__ */ e("div", { className: "skeleton-tags" })
+  ] }),
+  /* @__PURE__ */ n("div", { className: "wrapper-card-1", children: [
+    /* @__PURE__ */ e("div", { className: "skeleton-price" }),
+    /* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
+  ] })
+] })), Ge = ({ limit: d = 5, isLoading: v = !1, keyPrefix: m }) => /* @__PURE__ */ e(C, { children: Array.from({ length: d }, (k, g) => /* @__PURE__ */ e(
+  je,
+  {
+    isLoading: v
+  },
+  `${m}-skeleton-product-card-${g}`
+)) }), er = ({
+  children: d,
+  fallbackComponent: v = /* @__PURE__ */ e(C, {}),
+  isLoading: m = !1,
+  limit: k,
+  keyPrefix: g
+}) => /* @__PURE__ */ e(be, { fallbackComponent: v, children: m === !0 ? /* @__PURE__ */ e(
+  Ge,
+  {
+    isLoading: m,
+    limit: k,
+    keyPrefix: g
+  }
+) : d });
+export {
+  xe as D,
+  er as S
+};

package/package.json

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