@lanaco/lnc-react-ui 4.0.186 → 4.0.189

package/dist/BlogExploreSection.js

@@ -1,21 +1,20 @@
-import { jsxs as o, jsx as t, Fragment as j } from "react/jsx-runtime";
-import { forwardRef as V, useRef as ce, useState as le, useEffect as se, Fragment as de } from "react";
-import { P as n } from "./index-CblbdqjE.js";
+import { jsxs as a, jsx as n, Fragment as j } from "react/jsx-runtime";
+import { forwardRef as V, useRef as oe, useState as le, useEffect as se, Fragment as de } from "react";
 import { u as me } from "./useDetectMobile-Bkvj0VMa.js";
-import { o as he, q as fe } from "./utils-Dc5zIpaz.js";
-import _e from "./TextInput.js";
-import C from "./Icon.js";
+import { o as _e, q as he } from "./utils-Dc5zIpaz.js";
+import fe from "./TextInput.js";
+import z from "./Icon.js";
 import ue from "./Link.js";
 import M from "./IconButton.js";
 import W from "./DropdownMenu.js";
 import E from "./DropdownItem.js";
-import { F as ge } from "./tag-BtS5lWJ0.js";
+import { F as ve } from "./tag-BtS5lWJ0.js";
 import pe from "./BlogProductCardsSection.js";
 import { s as q } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as ve } from "./index-C_NnINik.js";
+import { P as ge } from "./index-C_NnINik.js";
 import F from "./BlogListSection.js";
 import { M as xe } from "./consts-BuFChS64.js";
-const ye = q.div`
+const we = q.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -98,91 +97,91 @@ const ye = q.div`
   }
 `, be = V(
   ({
-    perPageOptions: d = [
+    perPageOptions: s = [
       { code: 10, name: "Show 10 items" },
       { code: 25, name: "Show 25 items" },
       { code: 50, name: "Show 50 items" }
     ],
-    perPage: u,
-    handlePerPage: v = () => {
+    perPage: f,
+    handlePerPage: p = () => {
     },
     page: c = 1,
-    handlePage: m = () => {
+    handlePage: d = () => {
     },
-    totalPage: r
-  }, _) => {
-    var p, h;
-    const g = () => {
-      c > 1 && (m == null || m(c - 1));
-    }, x = () => {
-      c < r && (m == null || m(c + 1));
-    }, b = () => {
-      const i = [];
-      if (r <= 7)
-        for (let a = 1; a <= r; a++)
-          i.push(a);
+    totalPage: t
+  }, h) => {
+    var v, m;
+    const u = () => {
+      c > 1 && (d == null || d(c - 1));
+    }, g = () => {
+      c < t && (d == null || d(c + 1));
+    }, w = () => {
+      const r = [];
+      if (t <= 7)
+        for (let i = 1; i <= t; i++)
+          r.push(i);
       else
-        c <= 3 ? i.push(1, 2, 3, "...", r) : c >= r - 2 ? i.push(1, "...", r - 2, r - 1, r) : i.push(1, 2, 3, "...", r);
-      return i == null ? void 0 : i.map((a, y) => a === "..." ? /* @__PURE__ */ t(
+        c <= 3 ? r.push(1, 2, 3, "...", t) : c >= t - 2 ? r.push(1, "...", t - 2, t - 1, t) : r.push(1, 2, 3, "...", t);
+      return r == null ? void 0 : r.map((i, x) => i === "..." ? /* @__PURE__ */ n(
         "div",
         {
           className: "pagination__page ellipsis",
-          children: a
+          children: i
         },
-        `pagination-ellipsis__${y}`
-      ) : /* @__PURE__ */ t(
+        `pagination-ellipsis__${x}`
+      ) : /* @__PURE__ */ n(
         "div",
         {
-          onClick: () => m(a),
-          className: `pagination__page ${c === a ? "active" : ""}`,
-          children: a
+          onClick: () => d(i),
+          className: `pagination__page ${c === i ? "active" : ""}`,
+          children: i
         },
-        `pagination-page__${y}`
+        `pagination-page__${x}`
       ));
     };
-    return /* @__PURE__ */ o(ye, { className: "pagination", children: [
-      /* @__PURE__ */ t(
+    return /* @__PURE__ */ a(we, { className: "pagination", children: [
+      /* @__PURE__ */ n(
         W,
         {
           color: "neutral",
-          control: ((p = d == null ? void 0 : d.find((i) => (i == null ? void 0 : i.code) === u)) == null ? void 0 : p.name) || ((h = d[0]) == null ? void 0 : h.name),
+          control: ((v = s == null ? void 0 : s.find((r) => (r == null ? void 0 : r.code) === f)) == null ? void 0 : v.name) || ((m = s[0]) == null ? void 0 : m.name),
           placement: "bottom",
           zIndex: 1001,
           className: "pagination__per-page",
-          children: d == null ? void 0 : d.map((i, a) => /* @__PURE__ */ t(
+          children: s == null ? void 0 : s.map((r, i) => /* @__PURE__ */ n(
             E,
             {
-              active: (i == null ? void 0 : i.code) === (u == null ? void 0 : u.code),
+              active: (r == null ? void 0 : r.code) === (f == null ? void 0 : f.code),
               className: "sort-by__item",
-              onClick: () => v(i),
-              children: i == null ? void 0 : i.name
+              onClick: () => p(r),
+              children: r == null ? void 0 : r.name
             },
-            `blog-epxlore-section-per-page-option__${a + 1}`
+            `blog-epxlore-section-per-page-option__${i + 1}`
           ))
         }
       ),
-      /* @__PURE__ */ o("div", { className: "pagination__pages", children: [
-        /* @__PURE__ */ t(
+      /* @__PURE__ */ a("div", { className: "pagination__pages", children: [
+        /* @__PURE__ */ n(
           "div",
           {
             className: `pagination__page ${c === 1 ? "disabled" : ""}`,
-            onClick: g,
-            children: /* @__PURE__ */ t(C, { icon: " mng-lnc-chevron--left" })
+            onClick: u,
+            children: /* @__PURE__ */ n(z, { icon: " mng-lnc-chevron--left" })
           }
         ),
-        b(),
-        /* @__PURE__ */ t(
+        w(),
+        /* @__PURE__ */ n(
           "div",
           {
-            className: `pagination__page ${c === r ? "disabled" : ""}`,
-            onClick: x,
-            children: /* @__PURE__ */ t(C, { icon: " mng-lnc-chevron--right" })
+            className: `pagination__page ${c === t ? "disabled" : ""}`,
+            onClick: g,
+            children: /* @__PURE__ */ n(z, { icon: " mng-lnc-chevron--right" })
           }
         )
       ] })
     ] });
   }
-), we = q.div`
+), ye = q.div`
   display: flex;
   align-items: flex-start;
   gap: 2rem;
@@ -388,7 +387,7 @@ const ye = q.div`
             font-style: normal;
             font-weight: 500;
             line-height: 1.25rem;
-            ${he(2)}
+            ${_e(2)}
           }
 
           & .item__description {
@@ -455,142 +454,143 @@ const ye = q.div`
       display: none;
     }
   }
-`, Ne = V(
+`, Ee = V(
   ({
-    mainTitle: d,
-    sideTitle: u,
-    tags: v,
+    mainTitle: s,
+    sideTitle: f,
+    tags: p,
     selectedTag: c,
-    handleSelectTag: m = () => {
+    handleSelectTag: d = () => {
     },
-    blogs: r,
-    miniBlogs: _,
-    products: g,
-    blogsLoading: x = !1,
-    productsLoading: b = !1,
-    sortingOptions: p,
-    sortBy: h,
-    handleSortBy: i = () => {
+    blogs: t,
+    miniBlogs: h,
+    products: u,
+    blogsLoading: g = !1,
+    productsLoading: w = !1,
+    sortingOptions: v,
+    sortBy: m,
+    handleSortBy: r = () => {
     },
-    allTagText: a = "All",
-    searchPlaceholderText: y = "Search blogs",
-    timeToReadText: L = "{0} min read",
-    getBlogImageUrl: w = () => {
+    allTagText: i = "All",
+    searchPlaceholderText: x = "Search blogs",
+    timeToReadText: $ = "{0} min read",
+    getBlogImageUrl: b = () => {
     },
-    handleSelectBlog: N = () => {
+    handleSelectBlog: y = () => {
     },
     handleSelectBlogTag: A = () => {
     },
-    handleShareBlog: z = () => {
+    handleShareBlog: D = () => {
     },
     // handleBookmarkBlog = () => {},
-    showAllButtonLink: R,
-    showAllButtonText: U = "Show all products",
-    viewAllButtonText: H = "View all (11)",
+    showAllButtonLink: H,
+    showAllButtonText: R = "Show all products",
+    viewAllButtonText: X = "View all (11)",
     // viewAllButtonLink,
-    handleViewAll: X = () => {
+    handleViewAll: Z = () => {
     },
-    handleShowAll: Z = () => {
+    handleShowAll: G = () => {
     },
-    handleSelectProduct: G = () => {
+    handleSelectProduct: J = () => {
     },
-    getProductImageUrl: J = () => {
+    getProductImageUrl: K = () => {
     },
-    page: K,
-    handlePage: k = () => {
+    page: Q,
+    handlePage: N = () => {
     },
-    perPage: Q,
+    perPage: U,
     handlePerPage: Y = () => {
     },
-    totalPage: S,
-    perPageOptions: B,
-    handleSearch: O = () => {
+    totalPage: k,
+    perPageOptions: O,
+    handleSearch: B = () => {
     },
-    onBookmark: $ = () => {
+    onBookmark: I = () => {
     },
-    bookmarkComponent: I = /* @__PURE__ */ t(j, {}),
-    componentName: T
+    bookmarkComponent: L = /* @__PURE__ */ n(j, {}),
+    componentName: S,
+    LinkComponent: C
   }, P) => {
     const ee = (e) => {
-      document.getElementById("landing__container").scrollIntoView({ behavior: "smooth", block: "start" }), k == null || k(e);
-    }, l = ce(null), ne = me(), [f, te] = le({
+      document.getElementById("landing__container").scrollIntoView({ behavior: "smooth", block: "start" }), N == null || N(e);
+    }, o = oe(null), ne = me(), [_, te] = le({
       arrowsVisible: !1,
       leftArrowDisabled: !1,
       rightArrowDisabled: !1
     });
     se(() => {
-      const e = l == null ? void 0 : l.current;
+      const e = o == null ? void 0 : o.current;
       if (!e) return;
-      const s = () => {
+      const l = () => {
         const ae = e.scrollWidth - e.clientWidth;
-        te((oe) => ({
-          ...oe,
+        te((ce) => ({
+          ...ce,
           arrowsVisible: e.clientWidth < e.scrollWidth,
           leftArrowDisabled: e.scrollLeft <= 0,
           rightArrowDisabled: e.scrollLeft >= ae
         }));
-      }, D = new ResizeObserver(s);
-      return D.observe(e), s(), e.addEventListener("scroll", s), () => {
-        D.disconnect(), e.removeEventListener("scroll", s);
+      }, T = new ResizeObserver(l);
+      return T.observe(e), l(), e.addEventListener("scroll", l), () => {
+        T.disconnect(), e.removeEventListener("scroll", l);
       };
     }, []);
     const re = () => {
       var e;
-      (e = l == null ? void 0 : l.current) == null || e.scrollBy({ left: 100, behavior: "smooth" });
+      (e = o == null ? void 0 : o.current) == null || e.scrollBy({ left: 100, behavior: "smooth" });
     }, ie = () => {
       var e;
-      (e = l == null ? void 0 : l.current) == null || e.scrollBy({ left: -100, behavior: "smooth" });
+      (e = o == null ? void 0 : o.current) == null || e.scrollBy({ left: -100, behavior: "smooth" });
     };
-    return /* @__PURE__ */ o(we, { ref: P, id: "landing__container", children: [
-      /* @__PURE__ */ o("div", { className: "landing__main-content", children: [
-        /* @__PURE__ */ o("div", { className: "main-content__heading", children: [
-          /* @__PURE__ */ t("div", { className: "main-content__title", children: d }),
-          !ne && (f == null ? void 0 : f.arrowsVisible) && /* @__PURE__ */ o("div", { className: "main-content__tags-nav", children: [
-            /* @__PURE__ */ t(
+    return /* @__PURE__ */ a(ye, { ref: P, id: "landing__container", children: [
+      /* @__PURE__ */ a("div", { className: "landing__main-content", children: [
+        /* @__PURE__ */ a("div", { className: "main-content__heading", children: [
+          /* @__PURE__ */ n("div", { className: "main-content__title", children: s }),
+          !ne && (_ == null ? void 0 : _.arrowsVisible) && /* @__PURE__ */ a("div", { className: "main-content__tags-nav", children: [
+            /* @__PURE__ */ n(
               M,
               {
                 icon: "chevron-left",
                 borderRadius: "curved",
                 btnType: "tinted",
                 color: "neutral",
-                disabled: f == null ? void 0 : f.leftArrowDisabled,
+                disabled: _ == null ? void 0 : _.leftArrowDisabled,
                 className: "main-content__tag-nav",
                 onClick: ie
               }
             ),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ n(
               M,
               {
                 icon: "chevron-right",
                 borderRadius: "curved",
                 btnType: "tinted",
                 color: "neutral",
-                disabled: f == null ? void 0 : f.rightArrowDisabled,
+                disabled: _ == null ? void 0 : _.rightArrowDisabled,
                 className: "main-content__tag-nav",
                 onClick: re
               }
             )
           ] })
         ] }),
-        v && /* @__PURE__ */ t(
-          ge,
+        p && /* @__PURE__ */ n(
+          ve,
           {
-            ref: l,
-            tags: v,
-            allTagText: a,
+            ref: o,
+            tags: p,
+            allTagText: i,
             selectedTagCode: c,
-            onSelectTag: m
+            onSelectTag: d
           }
         ),
-        /* @__PURE__ */ o("div", { className: "main-content__actions", children: [
-          /* @__PURE__ */ t(
-            _e,
+        /* @__PURE__ */ a("div", { className: "main-content__actions", children: [
+          /* @__PURE__ */ n(
+            fe,
             {
               className: "main-content__search",
-              placeholder: y,
+              placeholder: x,
               debounceTime: 200,
-              prefix: /* @__PURE__ */ t(
-                C,
+              prefix: /* @__PURE__ */ n(
+                z,
                 {
                   icon: " mng-lnc-search",
                   sizeInUnits: "1.25rem",
@@ -598,155 +598,122 @@ const ye = q.div`
                 }
               ),
               color: "neutral",
-              onChange: O
+              onChange: B
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ n(
             W,
             {
               color: "neutral",
-              control: h == null ? void 0 : h.name,
+              control: m == null ? void 0 : m.name,
               zIndex: 1001,
               className: "main-content__sort-by",
-              children: p == null ? void 0 : p.map((e, s) => /* @__PURE__ */ t(
+              children: v == null ? void 0 : v.map((e, l) => /* @__PURE__ */ n(
                 E,
                 {
-                  active: (e == null ? void 0 : e.code) === (h == null ? void 0 : h.code),
+                  active: (e == null ? void 0 : e.code) === (m == null ? void 0 : m.code),
                   className: "sort-by__item",
-                  onClick: () => i(e),
+                  onClick: () => r(e),
                   children: e == null ? void 0 : e.name
                 },
-                `blog-epxlore-section-sorting-option__${s + 1}`
+                `blog-epxlore-section-sorting-option__${l + 1}`
               ))
             }
           )
         ] }),
-        /* @__PURE__ */ o("div", { className: "main-content__items", children: [
-          r && (r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ t(
+        /* @__PURE__ */ a("div", { className: "main-content__items", children: [
+          t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ n(
             F,
             {
-              timeToReadText: L,
-              items: r == null ? void 0 : r.slice(0, 5),
-              isLoading: x,
-              getImage: w,
-              onSelectCard: N,
+              timeToReadText: $,
+              items: t == null ? void 0 : t.slice(0, 5),
+              isLoading: g,
+              getImage: b,
+              onSelectCard: y,
               onSelectOption: A,
-              onShare: z,
-              onBookmark: $,
-              bookmarkComponent: I,
-              componentName: T
+              onShare: D,
+              onBookmark: I,
+              bookmarkComponent: L,
+              componentName: S,
+              LinkComponent: C
             }
           ),
-          /* @__PURE__ */ t("div", { className: "main-content__divider" }),
-          g && (g == null ? void 0 : g.length) > 0 && /* @__PURE__ */ t(
+          /* @__PURE__ */ n("div", { className: "main-content__divider" }),
+          u && (u == null ? void 0 : u.length) > 0 && /* @__PURE__ */ n(
             pe,
             {
-              buttonText: U,
-              buttonLink: R,
-              onButtonAction: Z,
-              onSelectCard: G,
-              items: g,
-              isLoading: b,
-              getImage: J,
+              buttonText: R,
+              buttonLink: H,
+              onButtonAction: G,
+              onSelectCard: J,
+              items: u,
+              isLoading: w,
+              getImage: K,
               isHighlight: !0,
-              componentName: T
+              componentName: S,
+              LinkComponent: C
             }
           ),
-          /* @__PURE__ */ t("div", { className: "main-content__divider" }),
-          r && (r == null ? void 0 : r.length) > 0 && /* @__PURE__ */ t(
+          /* @__PURE__ */ n("div", { className: "main-content__divider" }),
+          t && (t == null ? void 0 : t.length) > 0 && /* @__PURE__ */ n(
             F,
             {
-              timeToReadText: L,
-              items: r == null ? void 0 : r.slice(5),
-              isLoading: x,
-              getImage: w,
-              onSelectCard: N,
+              timeToReadText: $,
+              items: t == null ? void 0 : t.slice(5),
+              isLoading: g,
+              getImage: b,
+              onSelectCard: y,
               onSelectOption: A,
-              onShare: z,
-              onBookmark: $,
-              bookmarkComponent: I,
-              componentName: T
+              onShare: D,
+              onBookmark: I,
+              bookmarkComponent: L,
+              componentName: S,
+              LinkComponent: C
             }
           )
         ] }),
-        S && S > 1 && /* @__PURE__ */ t(
+        k && k > 1 && /* @__PURE__ */ n(
           be,
           {
-            perPageOptions: B,
-            perPage: Q,
+            perPageOptions: O,
+            perPage: U,
             handlePerPage: Y,
-            page: K,
+            page: Q,
             handlePage: ee,
-            totalPage: S
+            totalPage: k
           }
         )
       ] }),
-      /* @__PURE__ */ o("div", { className: "landing__side-content", children: [
-        u && /* @__PURE__ */ t("div", { className: "side-content__title", children: u }),
-        _ && (_ == null ? void 0 : _.length) > 0 && /* @__PURE__ */ o(j, { children: [
-          /* @__PURE__ */ t("div", { className: "side-content__items", children: _ == null ? void 0 : _.map((e, s) => /* @__PURE__ */ t(de, { children: /* @__PURE__ */ o(
+      /* @__PURE__ */ a("div", { className: "landing__side-content", children: [
+        f && /* @__PURE__ */ n("div", { className: "side-content__title", children: f }),
+        h && (h == null ? void 0 : h.length) > 0 && /* @__PURE__ */ a(j, { children: [
+          /* @__PURE__ */ n("div", { className: "side-content__items", children: h == null ? void 0 : h.map((e, l) => /* @__PURE__ */ n(de, { children: /* @__PURE__ */ a(
             "div",
             {
               className: "side-content__item",
-              onClick: () => N(e),
+              onClick: () => y(e),
               children: [
-                /* @__PURE__ */ t(
-                  ve,
+                /* @__PURE__ */ n(
+                  ge,
                   {
-                    src: w(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
-                    alt: `Mini blog ${s + 1}`,
+                    src: b(e == null ? void 0 : e.imageUrl, e == null ? void 0 : e.uuid) || null,
+                    alt: `Mini blog ${l + 1}`,
                     className: "item__image"
                   }
                 ),
-                /* @__PURE__ */ o("div", { className: "item__content", children: [
-                  /* @__PURE__ */ t("div", { className: "item__title", children: e == null ? void 0 : e.title }),
-                  /* @__PURE__ */ t("div", { className: "item__description", children: fe(e == null ? void 0 : e.publishedAt) })
+                /* @__PURE__ */ a("div", { className: "item__content", children: [
+                  /* @__PURE__ */ n("div", { className: "item__title", children: e == null ? void 0 : e.title }),
+                  /* @__PURE__ */ n("div", { className: "item__description", children: he(e == null ? void 0 : e.publishedAt) })
                 ] })
               ]
             }
-          ) }, `mini_blg_${s}`)) }),
-          /* @__PURE__ */ t(ue, { onClick: X, className: "side-content__link", children: H })
+          ) }, `mini_blg_${l}`)) }),
+          /* @__PURE__ */ n(ue, { onClick: Z, className: "side-content__link", children: X })
         ] })
       ] })
     ] });
   }
 );
-Ne.propTypes = {
-  mainTitle: n.string,
-  sideTitle: n.string,
-  tags: n.array,
-  selectedTag: n.any,
-  handleSelectTag: n.func,
-  blogs: n.array,
-  miniBlogs: n.array,
-  products: n.array,
-  blogsLoading: n.bool,
-  productsLoading: n.bool,
-  sortingOptions: n.array,
-  sortBy: n.any,
-  handleSortBy: n.func,
-  allTagText: n.string,
-  searchPlaceholderText: n.string,
-  timeToReadText: n.string,
-  getBlogImageUrl: n.func,
-  handleSelectBlog: n.func,
-  handleSelectBlogTag: n.func,
-  handleShareBlog: n.func,
-  handleBookmarkBlog: n.func,
-  showAllButtonLink: n.string,
-  showAllButtonText: n.string,
-  viewAllButtonText: n.string,
-  handleShowAll: n.func,
-  handleSelectProduct: n.func,
-  getProductImageUrl: n.func,
-  page: n.number,
-  handlePage: n.func,
-  perPage: n.any,
-  handlePerPage: n.func,
-  totalPage: n.number,
-  perPageOptions: n.array,
-  handleSearch: n.func
-};
 export {
-  Ne as default
+  Ee as default
 };