@lanaco/lnc-react-ui 4.0.139 → 4.0.140

package/dist/suspense-product-card-detailed-DtTXmJJB.js

@@ -0,0 +1,539 @@
+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 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`
+  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;
+    ${pe(2)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${U()}
+    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);
+    ${U()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  & .skeleton-img {
+    background-color: ${y("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${y("-90deg")};
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-tags {
+    background-color: ${y("-90deg")};
+    width: 80%;
+    height: 1.5rem;
+  }
+
+  & .skeleton-price {
+    background-color: ${y("-90deg")};
+    width: 50%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-sponsored {
+    background-color: ${y("-90deg")};
+    width: 50%;
+    height: 1rem;
+  }
+
+  & .tags-popover__trigger {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  @media (max-width: ${K + "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);
+  }
+`, ye = k.div`
+  position: relative;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border: 1px solid #0c15201f;
+
+  & img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 0.75rem;
+    transition: var(--transition, all 0.3s ease);
+  }
+
+  @media (max-width: ${K + "px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+  }
+`, _e = k.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);
+    }
+  }
+`, Ne = k.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);
+  }
+`, ke = z(({ sponsoredText: d = "Sponsored" }, f) => /* @__PURE__ */ n(Ne, { ref: f, 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 = {
+  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: ""
+  }
+}, Ae = z((d, f) => {
+  const {
+    title: v,
+    price: w = 0,
+    sellingPrice: m,
+    currency: _,
+    isNegotiable: C,
+    isFree: P,
+    imageUrl: H,
+    location: Z,
+    sponsored: M,
+    imageComponent: W,
+    onSelectCard: J = () => {
+    },
+    freeText: Q = "Free",
+    negotiableText: x = "Negotiable",
+    tags: t = [],
+    categoryCode: $,
+    condition: T,
+    quantity: V,
+    trade: E,
+    sponsoredText: ee
+  } = d, O = be(), B = [
+    Ce,
+    Pe,
+    $e,
+    Te,
+    Ve,
+    Ee,
+    Oe,
+    Se
+  ].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;
+    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;
+      if (p <= r)
+        o += p, a++;
+      else
+        break;
+    }
+    te(a);
+  };
+  de(() => {
+    const r = s == null ? void 0 : s.current;
+    if (!r) return;
+    const o = new ResizeObserver(() => {
+      ae();
+    });
+    return o.observe(r), () => {
+      o.disconnect();
+    };
+  }, [t]);
+  const ie = () => {
+    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: [
+        l,
+        a < D - 1 ? " · " : ""
+      ] }) : /* @__PURE__ */ n(
+        N,
+        {
+          ref: (le) => g.current[a] = le,
+          className: `tag ${M ? "tag-sponsored" : ""}`,
+          children: [
+            /* @__PURE__ */ e("i", { className: u }),
+            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;
+    return /* @__PURE__ */ n("div", { children: [
+      /* @__PURE__ */ e("span", { className: "tags-popover__name", children: `${b}: ` }),
+      /* @__PURE__ */ e("span", { className: "tags-popover__value", children: c })
+    ] }, `detailed-products-section-tag-dropdown__${o + 1}`);
+  }) }), ce = () => {
+    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: [
+        a,
+        u < (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")
+    ] });
+  }, I = w > 0 && _ && C !== !0 && P !== !0 && w !== m;
+  return (
+    // <LandingPageProductCardSkeleton />
+    /* @__PURE__ */ n(
+      L,
+      {
+        ref: s,
+        className: "product-card",
+        onClick: J,
+        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("div", { className: "wrapper-card-3", children: [
+            B && /* @__PURE__ */ e(
+              "div",
+              {
+                ...O ? {} : {
+                  onMouseEnter: oe,
+                  onMouseLeave: ne
+                },
+                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() }) })
+                ] })
+              }
+            ),
+            !B && ce()
+          ] }),
+          /* @__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__ */ e("div", { className: "location-text", children: Z })
+          ] }),
+          M === !0 && /* @__PURE__ */ e(ke, { sponsoredText: ee })
+        ]
+      }
+    )
+  );
+}), ze = z(({}, d) => /* @__PURE__ */ n(L, { 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" })
+  ] })
+] })), Me = ({ limit: d = 5, isLoading: f = !1, keyPrefix: v }) => /* @__PURE__ */ e(S, { children: Array.from({ length: d }, (w, m) => /* @__PURE__ */ e(
+  ze,
+  {
+    isLoading: f
+  },
+  `${v}-skeleton-product-card-${m}`
+)) }), Ke = ({
+  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,
+  {
+    isLoading: v,
+    limit: w,
+    keyPrefix: m
+  }
+) : d });
+export {
+  Ae as D,
+  Ke as S
+};

package/package.json

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