@lanaco/lnc-react-ui 4.0.169 → 4.0.171

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

@@ -1,653 +0,0 @@
-import { jsxs as t, jsx as e, Fragment as $ } from "react/jsx-runtime";
-import { forwardRef as W, useState as K, useRef as H, useEffect as Pe, cloneElement as Z, Suspense as $e } from "react";
-import { t as M, p as Te, o as y, a as Ve, l as J, q as Q, G as ee } from "./utils-BdsZgOUE.js";
-import { s as T } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as Ee } from "./index-CF3HhgvN.js";
-import P from "./Badge.js";
-import Se from "./Popover.js";
-import Oe from "./PopoverTrigger.js";
-import Be from "./PopoverContent.js";
-import { u as ze } from "./useDetectMobile-Bkvj0VMa.js";
-import { M as re } from "./consts-BuFChS64.js";
-const oe = T.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  cursor: pointer;
-  overflow: hidden;
-  width: 100%;
-
-  & .seller {
-    text-transform: uppercase;
-    ${M()}
-    color: var(--gray-500);
-    font-size: 0.625rem;
-    font-weight: 400;
-  }
-
-  & .wrapper-card-1 {
-    display: flex;
-    flex-direction: column;
-    gap: 0.12rem;
-  }
-
-  & .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;
-
-    & i {
-      color: var(--yellow-500, #f59e0b);
-    }
-  }
-
-  & .card-title {
-    font-size: 0.875rem;
-    font-weight: 600;
-    ${Te(2)}
-  }
-
-  & .price-text {
-    font-size: 1rem;
-    font-weight: 600;
-    ${M()}
-    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);
-    ${M()}
-  }
-
-  & .tags-wrapper {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  & .skeleton-img {
-    background-color: ${y("-90deg")};
-    border-radius: 0.75rem;
-    border: 1px solid white;
-    width: 100%;
-    height: 11rem;
-  }
-
-  & .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: ${re + "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 {
-      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 {
-      font-size: 0.875rem;
-      font-weight: 600;
-
-      & .full-price {
-        display: none;
-      }
-    }
-  }
-
-  &:hover .product-image-wrapper img {
-    transform: scale(1.1);
-  }
-`, Me = T.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;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 2.25rem;
-    height: 2.25rem;
-    border-radius: ${(s) => Ve(s.theme, "curved")};
-    border: 1px solid var(--gray-95008);
-    background-color: white;
-    color: var(--gray-950);
-    transition: transform 0.2s ease;
-
-    &:hover {
-      transform: scale(1.05);
-    }
-
-    i {
-      color: #14161a;
-      font-size: 1.1rem;
-      line-height: 1;
-    }
-  }
-
-  &: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: ${re + "px"}) {
-    & img {
-      width: 8.875rem;
-      height: 8.875rem;
-      min-width: 8.875rem;
-      min-height: 8.875rem;
-      object-fit: cover;
-    }
-
-    & .bookmarking-btn {
-      display: flex;
-    }
-  }
-`, We = T.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);
-    }
-  }
-`, Fe = T.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);
-  }
-`, Ie = W(({ sponsoredText: s = "Sponsored" }, h) => /* @__PURE__ */ t(Fe, { ref: h, className: "sponsored-line", children: [
-  /* @__PURE__ */ e("i", { className: "mng-lnc-paw2" }),
-  /* @__PURE__ */ e("span", { children: s })
-] })), je = "Vehicles_Cars", xe = "Vehicles_Motorcycles", De = "Vehicles_Trucks", Ue = "Vehicles_AgriculturalMachines_Tractors", Re = "Vehicles_ConstructionMachines", Ge = "Vehicles_Bus", Xe = "Vehicles_Campers", Le = "RealEstates_", a = {
-  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: ""
-  }
-}, ir = W((s, h) => {
-  const {
-    uuid: c,
-    sellerUuid: _,
-    name: w,
-    price: V = 0,
-    sellingPrice: C,
-    currency: N,
-    isNegotiable: E,
-    isFree: S,
-    imageUrl: ne,
-    location: te,
-    sponsored: ae,
-    imageComponent: F,
-    onSelectCard: ie = () => {
-    },
-    freeText: se = "Free",
-    negotiableText: le = "Negotiable",
-    tags: n = [],
-    categoryCode: O,
-    condition: I,
-    quantity: j,
-    trade: x,
-    sponsoredText: ce,
-    forCart: de,
-    forOrder: me,
-    contactSeller: pe,
-    hasVariants: ge,
-    onBookmark: B = () => {
-    },
-    bookmarkComponent: b,
-    bookmarked: D,
-    bookmarkLists: ue,
-    metadata: f,
-    sellerName: U
-  } = s, z = ze(), he = () => {
-    var d;
-    if (!J(b)) return /* @__PURE__ */ e($, {});
-    const r = b, o = (d = b == null ? void 0 : b.props) == null ? void 0 : d.children, l = Z(o, {
-      key: `bookmark_pr__${D}`,
-      bookmarked: D,
-      productUuid: c,
-      onAddToBookmark: () => B(!0, c),
-      onRemoveFromBookmark: () => B(!1, c),
-      bookmarkedUuidList: ue,
-      sellerUuid: _,
-      handleBookmarking: B,
-      forCart: de,
-      forOrder: me,
-      contactSeller: pe,
-      hasVariants: ge
-    });
-    return Z(r, void 0, l);
-  }, R = [
-    je,
-    xe,
-    De,
-    Ue,
-    Re,
-    Ge,
-    Xe,
-    Le
-  ].some(
-    (r) => O == null ? void 0 : O.includes(r)
-  ), [fe, G] = K(!1), ve = () => {
-    G(!0);
-  }, we = () => {
-    G(!1);
-  }, i = H(null), g = H([]), [be, X] = K(n == null ? void 0 : n.length), ke = () => {
-    var d, v, k;
-    if (!(i != null && i.current) || ((d = g == null ? void 0 : g.current) == null ? void 0 : d.length) === 0) return;
-    if (z) {
-      X(n == null ? void 0 : n.length);
-      return;
-    }
-    const r = (v = i == null ? void 0 : i.current) == null ? void 0 : v.offsetWidth;
-    let o = 0, l = 0;
-    for (let m = 0; m < (n == null ? void 0 : n.length); m++) {
-      const u = ((k = g == null ? void 0 : g.current[m]) == null ? void 0 : k.offsetWidth) || 0, p = o + u + 4;
-      if (p <= r)
-        o += p, l++;
-      else
-        break;
-    }
-    X(l);
-  };
-  Pe(() => {
-    const r = i == null ? void 0 : i.current;
-    if (!r) return;
-    const o = new ResizeObserver(() => {
-      ke();
-    });
-    return o.observe(r), () => {
-      o.disconnect();
-    };
-  }, [n, z]);
-  const ye = () => {
-    var r;
-    return /* @__PURE__ */ e("div", { className: "tags-popover__trigger", children: (r = n == null ? void 0 : n.slice(0, be)) == null ? void 0 : r.map((o, l) => {
-      var u, p, q, A, Y;
-      const d = ((u = a == null ? void 0 : a[o == null ? void 0 : o.code]) == null ? void 0 : u.icon) ?? ((p = a == null ? void 0 : a.default) == null ? void 0 : p.icon) ?? "", v = ((q = o == null ? void 0 : o.measurementUnit) == null ? void 0 : q.symbol) ?? ((A = a == null ? void 0 : a[o == null ? void 0 : o.code]) == null ? void 0 : A.measure) ?? "", m = [(o == null ? void 0 : o.value) ?? ((Y = o == null ? void 0 : o.multiOptions) == null ? void 0 : Y[0]) ?? "", v].filter(Boolean).join(" ");
-      return /* @__PURE__ */ t(
-        P,
-        {
-          ref: (Ne) => g.current[l] = Ne,
-          className: "tag",
-          children: [
-            /* @__PURE__ */ e("i", { className: d }),
-            m
-          ]
-        },
-        `detailed-products-section-tag__${l + 1}`
-      );
-    }) });
-  }, _e = () => /* @__PURE__ */ e("div", { className: "tags-popover__content", children: n == null ? void 0 : n.map((r, o) => {
-    var m, u, p;
-    const l = ((m = r == null ? void 0 : r.measurementUnit) == null ? void 0 : m.symbol) ?? ((u = a == null ? void 0 : a[r == null ? void 0 : r.code]) == null ? void 0 : u.measure) ?? "", v = [(r == null ? void 0 : r.value) ?? ((p = r == null ? void 0 : r.multiOptions) == null ? void 0 : p[0]) ?? "", l].filter(Boolean).join(" "), k = r == null ? void 0 : r.name;
-    return /* @__PURE__ */ t("div", { children: [
-      /* @__PURE__ */ e("span", { className: "tags-popover__name", children: `${k}: ` }),
-      /* @__PURE__ */ e("span", { className: "tags-popover__value", children: v })
-    ] }, `detailed-products-section-tag-dropdown__${o + 1}`);
-  }) }), Ce = () => /* @__PURE__ */ t($, { children: [
-    I && /* @__PURE__ */ e(P, { className: "tag", children: I }, "detailed-products-section-tag__condition"),
-    j && /* @__PURE__ */ e(P, { className: "tag", children: j }, "detailed-products-section-tag__quantity"),
-    x && /* @__PURE__ */ e(P, { className: "tag", children: x }, "detailed-products-section-tag__trade")
-  ] }), L = V > 0 && N && E !== !0 && S !== !0 && V !== C;
-  return (
-    // <LandingPageProductCardSkeleton />
-    /* @__PURE__ */ t(
-      oe,
-      {
-        ref: i,
-        className: "product-card",
-        "data-accessor": f == null ? void 0 : f.accessor,
-        name: f == null ? void 0 : f.name,
-        onClick: (r) => ie(r, i),
-        children: [
-          /* @__PURE__ */ t(Me, { className: "product-image-wrapper", children: [
-            /* @__PURE__ */ e(he, {}),
-            J(F) ? F : /* @__PURE__ */ e(Ee, { src: ne })
-          ] }),
-          /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
-            /* @__PURE__ */ e("div", { className: "seller", title: U, children: U }),
-            /* @__PURE__ */ e("div", { className: "card-title", children: w })
-          ] }),
-          /* @__PURE__ */ t("div", { className: "wrapper-card-3", children: [
-            R && /* @__PURE__ */ e(
-              "div",
-              {
-                ...z ? {} : {
-                  onMouseEnter: ve,
-                  onMouseLeave: we
-                },
-                children: /* @__PURE__ */ t(Se, { placement: "bottom", open: fe, children: [
-                  /* @__PURE__ */ e(Oe, { children: ye() }),
-                  /* @__PURE__ */ e(Be, { style: { all: "unset" }, children: /* @__PURE__ */ e(We, { children: _e() }) })
-                ] })
-              }
-            ),
-            !R && Ce()
-          ] }),
-          /* @__PURE__ */ t("div", { className: "wrapper-card-2", children: [
-            /* @__PURE__ */ t("div", { className: `price-text ${L ? "new-price" : ""}`, children: [
-              C > 0 && N && E !== !0 && S !== !0 && /* @__PURE__ */ e("div", { children: `${Q(C)} ${ee(N)}` }),
-              L && /* @__PURE__ */ e("div", { className: `${C > 0 ? "full-price" : ""}`, children: `${Q(V)} ${ee(N)}` }),
-              E && le,
-              S && se
-            ] }),
-            /* @__PURE__ */ e("div", { className: "location-text", children: te })
-          ] }),
-          ae === !0 && /* @__PURE__ */ e(Ie, { sponsoredText: ce })
-        ]
-      }
-    )
-  );
-}), qe = W(({}, s) => /* @__PURE__ */ t(oe, { className: "product-card", children: [
-  /* @__PURE__ */ e("img", { className: "skeleton-img" }),
-  /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
-    /* @__PURE__ */ e("div", { className: "skeleton-title" }),
-    /* @__PURE__ */ e("div", { className: "skeleton-tags" })
-  ] }),
-  /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
-    /* @__PURE__ */ e("div", { className: "skeleton-price" }),
-    /* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
-  ] })
-] })), Ae = ({ limit: s = 5, isLoading: h = !1, keyPrefix: c }) => /* @__PURE__ */ e($, { children: Array.from({ length: s }, (_, w) => /* @__PURE__ */ e(
-  qe,
-  {
-    isLoading: h
-  },
-  `${c}-skeleton-product-card-${w}`
-)) }), sr = ({
-  children: s,
-  fallbackComponent: h = /* @__PURE__ */ e($, {}),
-  isLoading: c = !1,
-  limit: _,
-  keyPrefix: w
-}) => /* @__PURE__ */ e($e, { fallbackComponent: h, children: c === !0 ? /* @__PURE__ */ e(
-  Ae,
-  {
-    isLoading: c,
-    limit: _,
-    keyPrefix: w
-  }
-) : s });
-export {
-  ir as D,
-  sr as S
-};