@lanaco/lnc-react-ui 4.0.151 → 4.0.153

package/dist/suspense-product-card-detailed-C-ZCjG5p.js

@@ -1,538 +0,0 @@
-import { jsxs as o, jsx as r, Fragment as C } from "react/jsx-runtime";
-import { forwardRef as M, useState as le, cloneElement as G, Suspense as de } from "react";
-import { p as me, t as U, o as v, l as X, q as L, G as q, k as pe } from "./utils-BdsZgOUE.js";
-import { s as N } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as ge } from "./index-CF3HhgvN.js";
-import _ from "./Badge.js";
-import ue from "./Popover.js";
-import he from "./PopoverTrigger.js";
-import fe from "./PopoverContent.js";
-import { u as ve } from "./useDetectMobile-Bkvj0VMa.js";
-import { M as A } from "./consts-BuFChS64.js";
-const Y = N.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;
-
-    & 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;
-    ${me(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: ${v("-90deg")};
-    border-radius: 0.75rem;
-    border: 1px solid white;
-  }
-
-  & .skeleton-title {
-    background-color: ${v("-90deg")};
-    width: 100%;
-    height: 2.5rem;
-  }
-
-  & .skeleton-tags {
-    background-color: ${v("-90deg")};
-    width: 80%;
-    height: 1.5rem;
-  }
-
-  & .skeleton-price {
-    background-color: ${v("-90deg")};
-    width: 50%;
-    height: 2.5rem;
-  }
-
-  & .skeleton-sponsored {
-    background-color: ${v("-90deg")};
-    width: 50%;
-    height: 1rem;
-  }
-
-  & .tags-popover__trigger {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-  }
-
-  @media (max-width: ${A + "px"}) {
-    overflow: visible;
-
-    & .price-text {
-      font-size: 0.875rem;
-      font-weight: 600;
-
-      & .full-price {
-        display: none;
-      }
-    }
-  }
-
-  &:hover .product-image-wrapper img {
-    transform: scale(1.1);
-  }
-`, we = N.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: ${A + "px"}) {
-    & img {
-      width: 8.875rem;
-      height: 8.875rem;
-      min-width: 8.875rem;
-      min-height: 8.875rem;
-      object-fit: cover;
-    }
-
-    & .bookmarking-btn {
-      display: flex;
-    }
-  }
-`, be = N.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);
-    }
-  }
-`, ye = N.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 = M(({ sponsoredText: s = "Sponsored" }, m) => /* @__PURE__ */ o(ye, { ref: m, className: "sponsored-line", children: [
-  /* @__PURE__ */ r("i", { className: "mng-lnc-paw2" }),
-  /* @__PURE__ */ r("span", { children: s })
-] })), _e = "Vehicles_Cars", Ce = "Vehicles_Motorcycles", Ne = "Vehicles_Trucks", Pe = "Vehicles_AgriculturalMachines_Tractors", $e = "Vehicles_ConstructionMachines", Ee = "Vehicles_Bus", Se = "Vehicles_Campers", Ve = "RealEstates_", n = {
-  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: ""
-  }
-}, Le = M((s, m) => {
-  const {
-    uuid: c,
-    name: w,
-    price: l = 0,
-    sellingPrice: b,
-    currency: y,
-    isNegotiable: P,
-    isFree: $,
-    imageUrl: K,
-    location: H,
-    sponsored: Z,
-    imageComponent: z,
-    onSelectCard: J = () => {
-    },
-    freeText: Q = "Free",
-    negotiableText: x = "Negotiable",
-    tags: t = [],
-    categoryCode: E,
-    condition: S,
-    quantity: V,
-    trade: B,
-    sponsoredText: ee,
-    onBookmark: O = () => {
-    },
-    bookmarkComponent: g,
-    bookmarked: R,
-    bookmarkLists: re
-  } = s, T = ve(), oe = () => {
-    var d;
-    if (!X(g)) return /* @__PURE__ */ r(C, {});
-    const e = g, a = (d = g == null ? void 0 : g.props) == null ? void 0 : d.children, i = G(a, {
-      key: `bookmark_pr__${R}`,
-      bookmarked: R,
-      productUuid: c,
-      onAddToBookmark: () => O(!0, c),
-      onRemoveFromBookmark: () => O(!1, c),
-      bookmarkedUuidList: re
-    });
-    return G(e, void 0, i);
-  }, F = [
-    _e,
-    Ce,
-    Ne,
-    Pe,
-    $e,
-    Ee,
-    Se,
-    Ve
-  ].some(
-    (e) => E == null ? void 0 : E.includes(e)
-  ), [ne, D] = le(!1), ae = () => {
-    D(!0);
-  }, te = () => {
-    D(!1);
-  }, ie = () => /* @__PURE__ */ r("div", { className: "tags-popover__trigger", children: t == null ? void 0 : t.map((e, a) => {
-    var u, h, f, j, W;
-    const i = ((u = n == null ? void 0 : n[e == null ? void 0 : e.code]) == null ? void 0 : u.icon) ?? ((h = n == null ? void 0 : n.default) == null ? void 0 : h.icon) ?? "", d = ((f = e == null ? void 0 : e.measurementUnit) == null ? void 0 : f.symbol) ?? ((j = n == null ? void 0 : n[e == null ? void 0 : e.code]) == null ? void 0 : j.measure) ?? "", k = [(e == null ? void 0 : e.value) ?? ((W = e == null ? void 0 : e.multiOptions) == null ? void 0 : W[0]) ?? "", d].filter(Boolean).join(" ");
-    return T ? /* @__PURE__ */ o("div", { className: "tag-mobile", children: [
-      k,
-      a < (t == null ? void 0 : t.length) - 1 ? " · " : ""
-    ] }) : /* @__PURE__ */ o(
-      _,
-      {
-        className: "tag",
-        children: [
-          /* @__PURE__ */ r("i", { className: i }),
-          k
-        ]
-      },
-      `detailed-products-section-tag__${a + 1}`
-    );
-  }) }), se = () => /* @__PURE__ */ r("div", { className: "tags-popover__content", children: t == null ? void 0 : t.map((e, a) => {
-    var u, h, f;
-    const i = ((u = e == null ? void 0 : e.measurementUnit) == null ? void 0 : u.symbol) ?? ((h = n == null ? void 0 : n[e == null ? void 0 : e.code]) == null ? void 0 : h.measure) ?? "", p = [(e == null ? void 0 : e.value) ?? ((f = e == null ? void 0 : e.multiOptions) == null ? void 0 : f[0]) ?? "", i].filter(Boolean).join(" "), k = e == null ? void 0 : e.name;
-    return /* @__PURE__ */ o("div", { children: [
-      /* @__PURE__ */ r("span", { className: "tags-popover__name", children: `${k}: ` }),
-      /* @__PURE__ */ r("span", { className: "tags-popover__value", children: p })
-    ] }, `detailed-products-section-tag-dropdown__${a + 1}`);
-  }) }), ce = () => {
-    var e;
-    if (T) {
-      const a = [S, V, B];
-      return (e = a == null ? void 0 : a.filter((i) => pe(i))) == null ? void 0 : e.map((i, d, p) => /* @__PURE__ */ o("div", { className: "tag-mobile", children: [
-        i,
-        d < (p == null ? void 0 : p.length) - 1 ? " · " : ""
-      ] }));
-    }
-    return /* @__PURE__ */ o(C, { children: [
-      S && /* @__PURE__ */ r(_, { className: "tag", children: S }, "detailed-products-section-tag__condition"),
-      V && /* @__PURE__ */ r(_, { className: "tag", children: V }, "detailed-products-section-tag__quantity"),
-      B && /* @__PURE__ */ r(_, { className: "tag", children: B }, "detailed-products-section-tag__trade")
-    ] });
-  }, I = l > 0 && y && P !== !0 && $ !== !0 && l !== b;
-  return (
-    // <LandingPageProductCardSkeleton />
-    /* @__PURE__ */ o(Y, { className: "product-card", onClick: J, children: [
-      /* @__PURE__ */ o(we, { className: "product-image-wrapper", children: [
-        /* @__PURE__ */ r(oe, {}),
-        X(z) ? z : /* @__PURE__ */ r(ge, { src: K })
-      ] }),
-      /* @__PURE__ */ r("div", { className: "wrapper-card-1", children: /* @__PURE__ */ r("div", { className: "card-title", children: w }) }),
-      /* @__PURE__ */ o("div", { className: "wrapper-card-3", children: [
-        F && /* @__PURE__ */ r(
-          "div",
-          {
-            ...T ? {} : {
-              onMouseEnter: ae,
-              onMouseLeave: te
-            },
-            children: /* @__PURE__ */ o(ue, { placement: "bottom", open: ne, children: [
-              /* @__PURE__ */ r(he, { children: ie() }),
-              /* @__PURE__ */ r(fe, { style: { all: "unset" }, children: /* @__PURE__ */ r(be, { children: se() }) })
-            ] })
-          }
-        ),
-        !F && ce()
-      ] }),
-      /* @__PURE__ */ o("div", { className: "wrapper-card-2", children: [
-        /* @__PURE__ */ o("div", { className: `price-text ${I ? "new-price" : ""}`, children: [
-          b > 0 && y && P !== !0 && $ !== !0 && /* @__PURE__ */ r("div", { children: `${L(b)} ${q(y)}` }),
-          I && /* @__PURE__ */ r("div", { className: `${b > 0 ? "full-price" : ""}`, children: `${L(l)} ${q(y)}` }),
-          P && x,
-          $ && Q
-        ] }),
-        /* @__PURE__ */ r("div", { className: "location-text", children: H })
-      ] }),
-      Z === !0 && /* @__PURE__ */ r(ke, { sponsoredText: ee })
-    ] })
-  );
-}), Be = M(({}, s) => /* @__PURE__ */ o(Y, { className: "product-card", children: [
-  /* @__PURE__ */ r("img", { className: "skeleton-img" }),
-  /* @__PURE__ */ o("div", { className: "wrapper-card-1", children: [
-    /* @__PURE__ */ r("div", { className: "skeleton-title" }),
-    /* @__PURE__ */ r("div", { className: "skeleton-tags" })
-  ] }),
-  /* @__PURE__ */ o("div", { className: "wrapper-card-1", children: [
-    /* @__PURE__ */ r("div", { className: "skeleton-price" }),
-    /* @__PURE__ */ r("div", { className: "skeleton-sponsored" })
-  ] })
-] })), Te = ({ limit: s = 5, isLoading: m = !1, keyPrefix: c }) => /* @__PURE__ */ r(C, { children: Array.from({ length: s }, (w, l) => /* @__PURE__ */ r(
-  Be,
-  {
-    isLoading: m
-  },
-  `${c}-skeleton-product-card-${l}`
-)) }), qe = ({
-  children: s,
-  fallbackComponent: m = /* @__PURE__ */ r(C, {}),
-  isLoading: c = !1,
-  limit: w,
-  keyPrefix: l
-}) => /* @__PURE__ */ r(de, { fallbackComponent: m, children: c === !0 ? /* @__PURE__ */ r(
-  Te,
-  {
-    isLoading: c,
-    limit: w,
-    keyPrefix: l
-  }
-) : s });
-export {
-  Le as D,
-  qe as S
-};