@lanaco/lnc-react-ui 4.0.170 → 4.0.171

package/dist/FieldOfInterestsWithAvatarsCardsSection.js

@@ -1,15 +1,11 @@
-import { jsx as t, jsxs as y } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { s as _ } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { M as x } from "./consts-BuFChS64.js";
-import { o as v, l as C } from "./utils-BdsZgOUE.js";
-import { S as F } from "./index-y6sKgrZC.js";
-const N = _.div`
-  width: 100%;
-  height: 11.625rem;
-  border-radius: 0.75rem;
-  background: ${v("-90deg")};
-`, k = _.div`
+import { jsx as i, jsxs as g, Fragment as F } from "react/jsx-runtime";
+import { forwardRef as v, Suspense as y } from "react";
+import { l as W } from "./utils-DHfRApMf.js";
+import { s as C } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { M as b } from "./consts-BuFChS64.js";
+import { S as I } from "./index-XYs5Cuh5.js";
+import { a as O, d as h, b as p } from "./style-CXMUA6cI.js";
+const j = C.div`
   width: 100%;
   height: auto;
   border-radius: 999px;
@@ -30,66 +26,56 @@ const N = _.div`
     border: var(--yellow-600, #d97706);
   }
 
-  @media (max-width: ${x + "px"}) {
+  @media (max-width: ${b + "px"}) {
     & .wrapper__image {
       height: auto;
     }
   }
-`, A = _.div`
-  width: 9.875rem;
-  height: 9.875rem;
-  border-radius: 999px;
-  background: ${v("-90deg")};
-
-  @media (max-width: ${x + "px"}) {
-    width: 4.5rem;
-    height: 4.5rem;
-  }
-`, W = h(({}, i) => /* @__PURE__ */ t(A, {})), I = h(
-  ({ isActive: i, image: o, imageComponent: r, onSelectCard: m = () => {
-  } }, l) => /* @__PURE__ */ t(
-    k,
+`, k = v(
+  ({ isActive: t, image: s, imageComponent: r, onSelectCard: n = () => {
+  } }, l) => /* @__PURE__ */ i(
+    j,
     {
       ref: l,
-      className: i ? "active" : "",
-      onClick: m,
-      children: C(r) ? r : /* @__PURE__ */ t("img", { src: o, className: "wrapper__image" })
+      className: t ? "active" : "",
+      onClick: n,
+      children: W(r) ? r : /* @__PURE__ */ i("img", { src: s, className: "wrapper__image" })
     }
   )
-), c = h(
+), A = v(
   ({
-    uuid: i,
-    title: o,
+    uuid: t,
+    title: s,
     price: r,
-    currency: m,
+    currency: n,
     isNegotiable: l,
-    isFree: u,
-    image: d,
-    sellerUuid: s,
-    onSelectCard: p = () => {
+    isFree: f,
+    image: _,
+    sellerUuid: m,
+    onSelectCard: o = () => {
     },
     imageComponent: a,
-    negotiableText: w = "Negotiable",
-    freeText: g = "Free"
-  }, f) => /* @__PURE__ */ t(
-    F,
+    negotiableText: d = "Negotiable",
+    freeText: u = "Free"
+  }, w) => /* @__PURE__ */ i(
+    I,
     {
-      ref: f,
-      uuid: i,
-      title: o,
+      ref: w,
+      uuid: t,
+      title: s,
       price: r,
-      currency: m,
+      currency: n,
       isNegotiable: l,
-      isFree: u,
-      image: d,
+      isFree: f,
+      image: _,
       imageComponent: a,
-      sellerUuid: s,
-      onSelectCard: p,
-      negotiableText: w,
-      freeText: g
+      sellerUuid: m,
+      onSelectCard: o,
+      negotiableText: d,
+      freeText: u
     }
   )
-), O = h(({}, i) => /* @__PURE__ */ t(N, {})), j = _.div`
+), T = C.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -123,7 +109,7 @@ const N = _.div`
 
   & .wrapper__avatars {
     display: grid;
-    grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitAvatars}, minmax(0, 1fr))`};
+    grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitAvatars}, minmax(0, 1fr))`};
     gap: 2rem;
     justify-items: center;
     align-items: center;
@@ -131,98 +117,177 @@ const N = _.div`
 
   & .wrapper__cards {
     display: grid;
-    grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitCards}, minmax(0, 1fr))`};
+    grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitCards}, minmax(0, 1fr))`};
     gap: 1.25rem;
     justify-items: center;
     align-items: center;
     width: 100%;
   }
 
-  @media (max-width: ${x + "px"}) {
+  @media (max-width: ${b + "px"}) {
     & .wrapper__avatars {
-      grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitAvatarsForMobile}, minmax(0, 1fr))`};
+      grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitAvatarsForMobile}, minmax(0, 1fr))`};
       gap: auto;
     }
 
     & .wrapper__cards {
-      grid-template-columns: ${(i) => `repeat(${i == null ? void 0 : i.limitCardsForMobile}, minmax(0, 1fr))`};
+      grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitCardsForMobile}, minmax(0, 1fr))`};
       gap: 1rem;
     }
   }
-`, B = h(
+`, N = C(O)`
+  &.skeleton__tags {
+    max-width: 50rem;
+  }
+
+  @media (max-width: ${b + "px"}) {
+    &.skeleton__tags {
+      overflow-x: hidden;
+
+      & > div {
+        width: 3rem;
+        height: 3rem;
+      }
+    }
+
+    &.skeleton__cards {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+
+      & > div {
+        height: 7rem;
+      }
+    }
+  }
+`, M = ({ keyPrefix: t }) => /* @__PURE__ */ g(N, { className: "skeleton__tags", justifyContent: "center", children: [
+  /* @__PURE__ */ i(
+    h,
+    {
+      width: "9.875rem",
+      height: "9.875rem"
+    },
+    `${t}-1`
+  ),
+  /* @__PURE__ */ i(
+    h,
+    {
+      width: "9.875rem",
+      height: "9.875rem"
+    },
+    `${t}-2`
+  ),
+  /* @__PURE__ */ i(
+    h,
+    {
+      width: "9.875rem",
+      height: "9.875rem"
+    },
+    `${t}-3`
+  ),
+  /* @__PURE__ */ i(
+    h,
+    {
+      width: "9.875rem",
+      height: "9.875rem"
+    },
+    `${t}-4`
+  )
+] }), L = ({
+  keyPrefix: t,
+  isLoading: s = !1,
+  fallbackComponent: r = /* @__PURE__ */ i(F, {}),
+  children: n
+}) => /* @__PURE__ */ i(y, { fallbackComponent: r, children: s === !0 ? /* @__PURE__ */ i(M, { keyPrefix: t }) : n }), S = ({ keyPrefix: t }) => /* @__PURE__ */ g(N, { className: "skeleton__cards", justifyContent: "center", children: [
+  /* @__PURE__ */ i(p, { height: "13.75rem" }, `${t}-1`),
+  /* @__PURE__ */ i(p, { height: "13.75rem" }, `${t}-2`),
+  /* @__PURE__ */ i(p, { height: "13.75rem" }, `${t}-3`),
+  /* @__PURE__ */ i(p, { height: "13.75rem" }, `${t}-3`)
+] }), z = ({
+  keyPrefix: t,
+  isLoading: s = !1,
+  fallbackComponent: r = /* @__PURE__ */ i(F, {}),
+  children: n
+}) => /* @__PURE__ */ i(y, { fallbackComponent: r, children: s === !0 ? /* @__PURE__ */ i(S, { keyPrefix: t }) : n }), q = v(
   ({
-    title: i,
-    subtitle: o,
+    title: t,
+    subtitle: s,
     avatars: r = [],
-    limitAvatars: m = 4,
+    limitAvatars: n = 4,
     limit: l = 6,
-    limitAvatarsForMobile: u = 4,
-    limitForMobile: d = 2,
-    items: s = [],
-    onSelectAvatar: p = () => {
+    limitAvatarsForMobile: f = 4,
+    limitForMobile: _ = 2,
+    items: m = [],
+    onSelectAvatar: o = () => {
     },
     onSelectCard: a = () => {
-    }
+    },
+    isLoadingTags: d = !1,
+    isLoadingCards: u = !1
   }, w) => {
-    var b, $;
-    const g = (e) => {
-      p == null || p(e);
-    }, f = (e) => {
+    const x = (e) => {
+      o == null || o(e);
+    }, $ = (e) => {
       a == null || a(e);
     };
-    return /* @__PURE__ */ y(
-      j,
+    return /* @__PURE__ */ g(
+      T,
       {
         ref: w,
-        limitAvatars: m,
-        limitAvatarsForMobile: u,
+        limitAvatars: n,
+        limitAvatarsForMobile: f,
         limitCards: l,
-        limitCardsForMobile: d,
+        limitCardsForMobile: _,
         children: [
-          /* @__PURE__ */ y("div", { className: "wrapper__heading", children: [
-            i && /* @__PURE__ */ t("div", { className: "wrapper__title", children: i }),
-            o && /* @__PURE__ */ t("div", { className: "wrapper__subtitle", children: o })
+          /* @__PURE__ */ g("div", { className: "wrapper__heading", children: [
+            t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
+            s && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: s })
           ] }),
-          /* @__PURE__ */ t("div", { className: "wrapper__avatars", children: r && (r == null ? void 0 : r.length) > 0 ? r == null ? void 0 : r.map((e, n) => /* @__PURE__ */ t(
-            I,
+          /* @__PURE__ */ i(
+            L,
             {
-              image: e == null ? void 0 : e.image,
-              imageComponent: e == null ? void 0 : e.imageComponent,
-              onSelectCard: () => g == null ? void 0 : g(e)
-            },
-            `field-of-interests-with-avatars-card-avatar__${n + 1}`
-          )) : (b = Array.from("1234")) == null ? void 0 : b.map((e, n) => /* @__PURE__ */ t(
-            W,
-            {},
-            `field-of-interests-with-avatars-card-avatar-skeleton__${n + 1}`
-          )) }),
-          /* @__PURE__ */ t("div", { className: "wrapper__cards", children: s && (s == null ? void 0 : s.length) > 0 ? s == null ? void 0 : s.map((e, n) => /* @__PURE__ */ t(
-            c,
+              isLoading: d,
+              keyPrefix: "field-of-interests-with-avatars-tag",
+              children: /* @__PURE__ */ i("div", { className: "wrapper__avatars", children: r == null ? void 0 : r.map((e, c) => /* @__PURE__ */ i(
+                k,
+                {
+                  image: e == null ? void 0 : e.image,
+                  imageComponent: e == null ? void 0 : e.imageComponent,
+                  onSelectCard: () => x == null ? void 0 : x(e)
+                },
+                `field-of-interests-with-avatars-card-avatar__${c + 1}`
+              )) })
+            }
+          ),
+          /* @__PURE__ */ i(
+            z,
             {
-              uuid: e == null ? void 0 : e.uuid,
-              title: e == null ? void 0 : e.title,
-              price: e == null ? void 0 : e.price,
-              currency: e == null ? void 0 : e.currency,
-              isNegotiable: e == null ? void 0 : e.isNegotiable,
-              isFree: e == null ? void 0 : e.isFree,
-              image: e == null ? void 0 : e.image,
-              imageComponent: e == null ? void 0 : e.imageComponent,
-              sellerUuid: e == null ? void 0 : e.sellerUuid,
-              negotiableText: e == null ? void 0 : e.negotiableText,
-              freeText: e == null ? void 0 : e.freeText,
-              onSelectCard: () => f == null ? void 0 : f(e)
-            },
-            `field-of-interests-with-avatars-card__${n + 1}`
-          )) : ($ = Array.from("123456")) == null ? void 0 : $.map((e, n) => /* @__PURE__ */ t(
-            O,
-            {},
-            `field-of-interests-with-avatars-card-skeleton__${n + 1}`
-          )) })
+              isLoading: u,
+              keyPrefix: "field-of-interests-with-avatars-card",
+              children: /* @__PURE__ */ i("div", { className: "wrapper__cards", children: m == null ? void 0 : m.map((e, c) => /* @__PURE__ */ i(
+                A,
+                {
+                  uuid: e == null ? void 0 : e.uuid,
+                  title: e == null ? void 0 : e.title,
+                  price: e == null ? void 0 : e.price,
+                  currency: e == null ? void 0 : e.currency,
+                  isNegotiable: e == null ? void 0 : e.isNegotiable,
+                  isFree: e == null ? void 0 : e.isFree,
+                  image: e == null ? void 0 : e.image,
+                  imageComponent: e == null ? void 0 : e.imageComponent,
+                  sellerUuid: e == null ? void 0 : e.sellerUuid,
+                  negotiableText: e == null ? void 0 : e.negotiableText,
+                  freeText: e == null ? void 0 : e.freeText,
+                  onSelectCard: () => $ == null ? void 0 : $(e)
+                },
+                `field-of-interests-with-avatars-card__${c + 1}`
+              )) })
+            }
+          )
         ]
       }
     );
   }
 );
 export {
-  B as default
+  q as default
 };

package/dist/FieldOfInterestsWithTagsCardsSection.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("react/jsx-runtime"),c=require("react"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./utils-Dl9xPH4c.cjs"),g=require("./consts-goSZX3xP.cjs"),b=require("./Icon.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),k=m.styled.div`
+"use strict";const r=require("react/jsx-runtime"),h=require("react"),l=require("./utils-Dl9xPH4c.cjs"),b=require("./Icon.cjs"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),g=require("./consts-goSZX3xP.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),_=require("./index-BAJkosVg.cjs"),k=x.styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -50,12 +50,7 @@
     }
   }
   cursor: pointer;
-`,$=m.styled.div`
-  width: 100%;
-  height: 11.625rem;
-  border-radius: 0.75rem;
-  background: ${l.linearGradientAnimation("-90deg")};
-`,I=m.styled.div`
+`,I=x.styled.div`
   display: flex;
   padding: 0 0.75rem 0 0.75rem;
   align-items: center;
@@ -95,7 +90,7 @@
   }
 
   &.active {
-    background: ${t=>(t==null?void 0:t.activeColor)||"var(--yellow-600, #d97706)"};
+    background: ${i=>(i==null?void 0:i.activeColor)||"var(--yellow-600, #d97706)"};
 
     & .wrapper__icon {
       color: var(--white, #fff);
@@ -109,12 +104,7 @@
   @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
     min-width: fit-content;
   }
-`,N=m.styled.div`
-  width: 7rem;
-  height: 3rem;
-  border-radius: 999px;
-  background: ${l.linearGradientAnimation("-90deg")};
-`,C=c.forwardRef(({},t)=>r.jsx(N,{})),W=c.forwardRef(({name:t,isActive:n,activeColor:i,icon:a,onSelectCard:d=()=>{}},p)=>r.jsxs(I,{ref:p,className:n?"active":"",activeColor:i,onClick:d,children:[l.isDefinedNotEmptyString(a)&&r.jsx(b,{icon:a,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:t})]})),R=c.forwardRef(({image:t,imageComponent:n,name:i,description:a,onSelectCard:d=()=>{}},p)=>{const{theme:f}=j.useTheme();return r.jsxs(k,{ref:p,theme:f,onClick:d,children:[l.isDefined(n)?n:r.jsx("img",{src:t,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),a&&r.jsx("div",{className:"wrapper__description",children:a})]})]})}),F=c.forwardRef(({},t)=>r.jsx($,{})),T=m.styled.div`
+`,N=h.forwardRef(({name:i,isActive:s,activeColor:t,icon:n,onSelectCard:a=()=>{}},o)=>r.jsxs(I,{ref:o,className:s?"active":"",activeColor:t,onClick:a,children:[l.isDefinedNotEmptyString(n)&&r.jsx(b,{icon:n,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),C=h.forwardRef(({image:i,imageComponent:s,name:t,description:n,onSelectCard:a=()=>{}},o)=>{const{theme:p}=j.useTheme();return r.jsxs(k,{ref:o,theme:p,onClick:a,children:[l.isDefined(s)?s:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__description",children:n})]})]})}),$=x.styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -155,7 +145,7 @@
 
   & .wrapper__cards {
     display: grid;
-    grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCards}, minmax(0, 1fr))`};
+    grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
     justify-content: center;
     align-items: center;
     gap: 1.5rem;
@@ -191,4 +181,4 @@
       gap: 1rem;
     }
   }
-`,q=c.forwardRef(({title:t,subtitle:n,tags:i=[],limitTags:a=7,limitTagsForMobile:d=7,limit:p=3,limitForMobile:f=2,items:s=[],selectedTag:u,activeColor:v,onSelectTag:h=()=>{},onSelectCard:_=()=>{}},y)=>{var w,x;return r.jsxs(T,{ref:y,limitTags:a,limitTagsForMobile:d,limitCards:p,limitCardsForMobile:f,children:[r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n})]}),r.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.length)>0?i==null?void 0:i.map((e,o)=>r.jsx(W,{icon:e==null?void 0:e.icon,name:e==null?void 0:e.title,isActive:(e==null?void 0:e.code)===u,activeColor:v,onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-with-tags-card-tag__${o+1}`)):(w=Array.from("123"))==null?void 0:w.map((e,o)=>r.jsx(C,{},`field-of-interests-with-tags-card-tag-skeleton__${o+1}`))}),r.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,o)=>r.jsx(R,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,name:e==null?void 0:e.title,description:e==null?void 0:e.description,onSelectCard:()=>_==null?void 0:_(e)},`field-of-interests-with-tags-card__${o+1}`)):(x=Array.from("123"))==null?void 0:x.map((e,o)=>r.jsx(F,{},`field-of-interests-with-tags-card-skeleton__${o+1}`))})]})});module.exports=q;
+`,q=h.forwardRef(({title:i,subtitle:s,tags:t=[],limitTags:n=7,limitTagsForMobile:a=7,limit:o=3,limitForMobile:p=2,items:c=[],isLoadingTags:w=!1,isLoadingCards:F=!1,selectedTag:u,activeColor:v,onSelectTag:d=()=>{},onSelectCard:m=()=>{}},y)=>r.jsxs($,{ref:y,limitTags:n,limitTagsForMobile:a,limitCards:o,limitCardsForMobile:p,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),s&&r.jsx("div",{className:"wrapper__subtitle",children:s})]}),r.jsx(_.SuspenseFieldOfInterestsWithTagsTag,{isLoading:w,keyPrefix:"field-of-interests-with-tags-tag",children:r.jsx("div",{className:"wrapper__tags",children:t==null?void 0:t.map((e,f)=>r.jsx(N,{icon:e==null?void 0:e.icon,name:e==null?void 0:e.title,isActive:(e==null?void 0:e.code)===u,activeColor:v,onSelectCard:()=>d==null?void 0:d(e)},`field-of-interests-with-tags-card-tag__${f+1}`))})}),r.jsx(_.SuspenseFieldOfInterestsWithTagsCard,{isLoading:w,keyPrefix:"field-of-interests-with-tags-card",children:r.jsx("div",{className:"wrapper__cards",children:c==null?void 0:c.map((e,f)=>r.jsx(C,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,name:e==null?void 0:e.title,description:e==null?void 0:e.description,onSelectCard:()=>m==null?void 0:m(e)},`field-of-interests-with-tags-card__${f+1}`))})})]}));module.exports=q;