@devgateway/dvz-ui-react 1.7.15 → 1.7.16

package/dist/esm/embeddable/vertical-featuredtabs/index.js

@@ -1,123 +1,73 @@
-import { jsx as r, jsxs as S } from "react/jsx-runtime";
-import K, { useState as M, useEffect as L, useRef as q, useLayoutEffect as U } from "react";
-import { Container as F, Accordion as j, Icon as X } from "semantic-ui-react";
-import { PostProvider as J, PostConsumer as Y, MediaProvider as G, MediaConsumer as Q, PostIcon as Z, PostContent as O } from "@devgateway/wp-react-lib";
-import { connect as ee } from "react-redux";
-import H from "../connected-templates/PostIntro.js";
-const te = ({
-  posts: i,
-  activeItem: d,
-  setActive: p,
-  colors: g
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import H, { useState as b, useEffect as I, useRef as T, useLayoutEffect as V } from "react";
+import { Container as P, Accordion as N, Icon as j } from "semantic-ui-react";
+import { PostProvider as F, PostConsumer as K, MediaProvider as U, MediaConsumer as X, PostIcon as B, PostContent as L } from "@devgateway/wp-react-lib";
+import { connect as J } from "react-redux";
+import _ from "../connected-templates/PostIntro.js";
+const Y = ({
+  posts: r,
+  activeItem: s,
+  setActive: m,
+  colors: h
 }) => {
-  const [m, f] = M(
-    i.findIndex((n) => n.slug === d)
-  ), [c, w] = M(null), l = (n, o, s) => {
-    document.querySelectorAll(n).forEach((t) => {
-      t.querySelector(o) && t.classList.add(s);
+  const [l, u] = b(
+    r.findIndex((o) => o.slug === s)
+  ), [a, w] = b(null), c = (o, t, d) => {
+    document.querySelectorAll(o).forEach((i) => {
+      i.querySelector(t) && i.classList.add(d);
     });
   };
-  L(() => {
-    if (c) {
-      const n = c.getBoundingClientRect().top + window.scrollY;
+  I(() => {
+    if (a) {
+      const o = a.getBoundingClientRect().top + window.scrollY;
       window.scrollTo({
-        top: n,
+        top: o,
         behavior: "smooth"
       });
     }
-    l(
+    c(
       ".ui.fluid.container.viz.featured.tabs",
       ".accordion",
       "has-accordion"
-    ), l(
+    ), c(
       ".ui.fluid.container.viz.featured.tabs",
       "blockquote",
       "has-blockquote"
-    ), l(
+    ), c(
       ".ui.fluid.container.viz.featured.tabs",
       ".accordion .accordion-post-ft-title",
       "has-accordion-title"
-    ), l(
+    ), c(
       ".ui.fluid.container.viz.featured.tabs",
       ".accordion .accordion-post-vft-content",
       "has-accordion-content"
-    ), l(
+    ), c(
       ".ui.fluid.container.viz.featured.tabs",
       ".vt-accordion-post-intro figure",
       "has-vt-accordion-figure"
-    ), l(
+    ), c(
       ".ui.fluid.container.viz.featured.tabs",
       ".content.active.accordion-post-content .wp-block-columns",
       "has-wp-block-columns"
     );
-  }, [c]), L(() => {
-    let n;
-    const o = [], s = (e) => {
-      setTimeout(() => {
-        var h;
-        const t = e.querySelectorAll(
-          ".accordion .legends.container.has-standard-12-font-size.bottom, .legends.container.items-section:not(.legends.container.top .items-section)"
-        );
-        if (t.length !== 0)
-          for (const u of t) {
-            if (u.closest(".legends.container.top"))
-              continue;
-            const P = u.closest(
-              ".ui.fluid.container.content"
-            ), v = P ? P.querySelector(".data-source") : null;
-            if (!v || u.offsetParent === null || v.offsetParent === null || u.offsetHeight === 0 || v.offsetHeight === 0)
-              continue;
-            const A = v.getBoundingClientRect(), y = u.getBoundingClientRect();
-            if (y.top === 0 || y.bottom === 0 || A.top === 0 || Math.abs(y.top) > 1e4 || Math.abs(A.top) > 1e4)
-              continue;
-            const B = window.getComputedStyle(v), T = window.getComputedStyle(u), _ = parseFloat(B.marginTop) || 0, $ = parseFloat(T.marginBottom) || 0, E = y.bottom + $, R = A.top - _;
-            if (E > R) {
-              const a = E - R;
-              v.style.marginTop = `${a + 20}px`;
-            }
-            const x = (h = u.closest(
-              ".wp-block-column.is-layout-flow.wp-block-column-is-layout-flow"
-            )) == null ? void 0 : h.nextElementSibling;
-            if (x) {
-              const a = x.getBoundingClientRect(), b = window.getComputedStyle(x), N = Number.parseFloat(b.marginTop) || 0, k = a.top - N;
-              if (E > k) {
-                const z = E - k;
-                x.style.marginTop = `${z + 20}px`;
-              }
-            }
-            const I = u.closest(".chart.container");
-            if (I) {
-              const a = I.getBoundingClientRect(), b = window.getComputedStyle(I), N = Number.parseFloat(b.marginBottom) || 0, k = a.bottom + N, z = Number.parseFloat(T.marginTop) || 0, D = y.top - z;
-              if (D < k) {
-                const W = k - D, V = Math.min(W + 20, 200);
-                u.style.marginTop = `${V}px`;
-              }
-            }
-          }
-      }, 150);
-    };
-    return m !== -1 && (n = setTimeout(() => {
-      document.querySelectorAll(".accordion").forEach((t) => s(t));
-    }, 0)), () => {
-      clearTimeout(n), o.forEach((e) => e.disconnect());
-    };
-  }, [m]);
-  const C = (n, o) => {
-    const { index: s } = o, e = m === s ? -1 : s;
-    f(e), p(i[s].slug), e !== -1 && w(n.currentTarget);
+  }, [a]), I(() => {
+  }, [l]);
+  const v = (o, t) => {
+    const { index: d } = t, n = l === d ? -1 : d;
+    u(n), m(r[d].slug), n !== -1 && w(o.currentTarget);
   };
-  return /* @__PURE__ */ r(j, { fluid: !0, styled: !0, children: i.map((n, o) => {
-    var e;
-    const s = (e = n.meta_fields) != null && e.icon ? n.meta_fields.icon[0] : null;
-    return /* @__PURE__ */ S(K.Fragment, { children: [
-      /* @__PURE__ */ r(
-        j.Title,
+  return /* @__PURE__ */ e(N, { fluid: !0, styled: !0, children: r.map((o, t) => {
+    var n;
+    const d = (n = o.meta_fields) != null && n.icon ? o.meta_fields.icon[0] : null;
+    return /* @__PURE__ */ g(H.Fragment, { children: [
+      /* @__PURE__ */ e(
+        N.Title,
         {
-          active: m === o,
-          index: o,
-          onClick: (t) => C(t, { index: o }),
-          style: { backgroundColor: g[`color_${o}`] },
-          children: /* @__PURE__ */ S(
+          active: l === t,
+          index: t,
+          onClick: (i) => v(i, { index: t }),
+          style: { backgroundColor: h[`color_${t}`] },
+          children: /* @__PURE__ */ g(
             "div",
             {
               style: {
@@ -127,247 +77,247 @@ const te = ({
                 width: "100%"
               },
               children: [
-                /* @__PURE__ */ S("div", { style: { display: "flex", alignItems: "center" }, children: [
-                  s && /* @__PURE__ */ r(G, { id: s, children: /* @__PURE__ */ r(Q, { children: /* @__PURE__ */ r(Z, { className: "icon" }) }) }),
-                  /* @__PURE__ */ r(H, { post: n, className: "vt-accordion-post-intro" })
+                /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center" }, children: [
+                  d && /* @__PURE__ */ e(U, { id: d, children: /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(B, { className: "icon" }) }) }),
+                  /* @__PURE__ */ e(_, { post: o, className: "vt-accordion-post-intro" })
                 ] }),
-                /* @__PURE__ */ r(X, { name: "chevron down" })
+                /* @__PURE__ */ e(j, { name: "chevron down" })
               ]
             }
           )
         }
       ),
-      /* @__PURE__ */ r(
-        j.Content,
+      /* @__PURE__ */ e(
+        N.Content,
         {
           className: "accordion-post-content accordion-post-vft-content",
-          active: m === o,
-          children: /* @__PURE__ */ r(O, { post: n })
+          active: l === t,
+          children: /* @__PURE__ */ e(L, { post: o })
         }
       )
-    ] }, n.id);
+    ] }, o.id);
   }) });
-}, ne = ({
-  post: i,
-  count: d,
-  backgroundColor: p,
-  active: g,
-  dimensions: m,
-  height: f,
-  coverWidth: c,
+}, G = ({
+  post: r,
+  count: s,
+  backgroundColor: m,
+  active: h,
+  dimensions: l,
+  height: u,
+  coverWidth: a,
   index: w,
-  editing: l,
-  clickToExpandLabel: C
+  editing: c,
+  clickToExpandLabel: v
 }) => {
-  const n = i._embedded ? i._embedded["wp:featuredmedia"] : null, [o, s] = M(!1), e = l ? d - w : 1;
-  return /* @__PURE__ */ S("div", { className: "content-area", children: [
-    /* @__PURE__ */ S(
+  const o = r._embedded ? r._embedded["wp:featuredmedia"] : null, [t, d] = b(!1), n = c ? s - w : 1;
+  return /* @__PURE__ */ g("div", { className: "content-area", children: [
+    /* @__PURE__ */ g(
       "div",
       {
         className: "cover",
         style: {
-          width: `${c}px`,
-          backgroundColor: p,
-          backgroundImage: `url(${n ? n[0].source_url : ""})`
+          width: `${a}px`,
+          backgroundColor: m,
+          backgroundImage: `url(${o ? o[0].source_url : ""})`
         },
-        onMouseEnter: () => s(!0),
-        onMouseLeave: () => s(!1),
+        onMouseEnter: () => d(!0),
+        onMouseLeave: () => d(!1),
         children: [
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ e(
             "div",
             {
               className: "rotator",
               style: {
-                width: `${f}px`,
-                transform: `translate(${c / 2}px, 0px) rotate(90deg)`
+                width: `${u}px`,
+                transform: `translate(${a / 2}px, 0px) rotate(90deg)`
               },
-              children: /* @__PURE__ */ r(H, { post: i })
+              children: /* @__PURE__ */ e(_, { post: r })
             }
           ),
-          /* @__PURE__ */ S("div", { className: "overlay-label-container", children: [
-            /* @__PURE__ */ r(
+          /* @__PURE__ */ g("div", { className: "overlay-label-container", children: [
+            /* @__PURE__ */ e(
               "div",
               {
-                className: `overlay-label ${o && !g ? "visible" : ""}`,
-                children: C || "CLICK TO EXPAND"
+                className: `overlay-label ${t && !h ? "visible" : ""}`,
+                children: v || "CLICK TO EXPAND"
               }
             ),
-            /* @__PURE__ */ r("div", { className: "arrow-svg" })
+            /* @__PURE__ */ e("div", { className: "arrow-svg" })
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ e(
       "div",
       {
-        className: `collapsable-content ${g ? "expanded" : "collapsed"}`,
+        className: `collapsable-content ${h ? "expanded" : "collapsed"}`,
         style: {
           backgroundColor: "#f9f9f9",
-          width: `${m.width - c * d}px`,
-          marginLeft: `${c * e}px`
+          width: `${l.width - a * s}px`,
+          marginLeft: `${a * n}px`
         },
-        children: /* @__PURE__ */ r(O, { post: i })
+        children: /* @__PURE__ */ e(L, { post: r })
       }
     )
   ] });
-}, oe = ({
-  editing: i,
-  posts: d,
-  height: p,
-  colors: g,
-  coverWidth: m,
-  clickToExpandLabel: f
+}, Q = ({
+  editing: r,
+  posts: s,
+  height: m,
+  colors: h,
+  coverWidth: l,
+  clickToExpandLabel: u
 }) => {
-  const [c, w] = M(null), l = q(null), [C, n] = M({ width: 0, height: 0 }), o = q(null), s = (e) => {
-    c !== e && w(e);
+  const [a, w] = b(null), c = T(null), [v, o] = b({ width: 0, height: 0 }), t = T(null), d = (n) => {
+    a !== n && w(n);
   };
-  return L(() => {
-    d.length > 0 && c === null && i && w(d[0].slug);
-  }, [d, c, i]), U(() => {
-    var e, t, h, u;
-    (e = l.current) != null && e.parentElement && n({
-      width: i ? ((h = (t = l.current.parentElement) == null ? void 0 : t.parentElement) == null ? void 0 : h.offsetWidth) ?? 0 : ((u = l.current.parentElement) == null ? void 0 : u.offsetWidth) ?? 0,
-      height: l.current.offsetHeight
-    }), o.current && (o.current.style.overflow = i ? "visible" : "hidden");
-  }, [i]), /* @__PURE__ */ r(
-    F,
+  return I(() => {
+    s.length > 0 && a === null && r && w(s[0].slug);
+  }, [s, a, r]), V(() => {
+    var n, i, p, y;
+    (n = c.current) != null && n.parentElement && o({
+      width: r ? ((p = (i = c.current.parentElement) == null ? void 0 : i.parentElement) == null ? void 0 : p.offsetWidth) ?? 0 : ((y = c.current.parentElement) == null ? void 0 : y.offsetWidth) ?? 0,
+      height: c.current.offsetHeight
+    }), t.current && (t.current.style.overflow = r ? "visible" : "hidden");
+  }, [r]), /* @__PURE__ */ e(
+    P,
     {
       fluid: !0,
       className: "vertical featured tabs",
-      ref: o,
-      children: d == null ? void 0 : d.map((e, t) => {
-        const h = c ? e.slug === c : t === 0;
-        return /* @__PURE__ */ S(
+      ref: t,
+      children: s == null ? void 0 : s.map((n, i) => {
+        const p = a ? n.slug === a : i === 0;
+        return /* @__PURE__ */ g(
           "div",
           {
-            ref: l,
-            onClick: () => s(e.slug),
-            className: h ? "item expanded" : "item collapsed",
+            ref: c,
+            onClick: () => d(n.slug),
+            className: p ? "item expanded" : "item collapsed",
             style: {
-              minHeight: `${p}px`,
-              minWidth: `${m}px`
+              minHeight: `${m}px`,
+              minWidth: `${l}px`
             },
             children: [
-              /* @__PURE__ */ r("a", { id: e.slug }),
-              /* @__PURE__ */ r(
-                ne,
+              /* @__PURE__ */ e("a", { id: n.slug }),
+              /* @__PURE__ */ e(
+                G,
                 {
-                  editing: i,
-                  coverWidth: m,
-                  height: p,
-                  backgroundColor: g[`color_${t}`],
-                  count: d.length,
-                  dimensions: C,
-                  active: h,
-                  post: e,
-                  index: t,
-                  clickToExpandLabel: f
+                  editing: r,
+                  coverWidth: l,
+                  height: m,
+                  backgroundColor: h[`color_${i}`],
+                  count: s.length,
+                  dimensions: v,
+                  active: p,
+                  post: n,
+                  index: i,
+                  clickToExpandLabel: u
                 }
               )
             ]
           },
-          e.slug
+          n.slug
         );
       })
     }
   );
-}, re = (i) => {
-  var x, I;
+}, Z = (r) => {
+  var k, A;
   let {
-    "data-height": d,
-    "data-type": p,
-    "data-taxonomy": g,
-    "data-categories": m,
-    "data-count": f,
-    "data-colors": c,
+    "data-height": s,
+    "data-type": m,
+    "data-taxonomy": h,
+    "data-categories": l,
+    "data-count": u,
+    "data-colors": a,
     "data-cover-width": w = 50,
-    "data-read-more-label": l = "READ More",
-    "data-click-to-expand-label": C = "CLICK TO EXPAND",
-    "data-preview-mode": n = "Desktop",
-    editing: o,
-    parent: s,
-    unique: e,
-    pageModuleProps: t
-  } = i;
-  t != null && t.previewMode && (t != null && t.editing) && (n = t.previewMode, o = t.editing);
-  const h = i.intl.locale, u = m || "[]", [P, v] = M(
-    (((x = window == null ? void 0 : window.visualViewport) == null ? void 0 : x.width) || window.innerWidth) <= 1365
-  ), A = () => {
-    var a, b, N;
-    return ((a = window.screen.orientation) == null ? void 0 : a.type) || ((((b = window == null ? void 0 : window.visualViewport) == null ? void 0 : b.width) || window.innerWidth) > (((N = window == null ? void 0 : window.visualViewport) == null ? void 0 : N.height) || window.innerHeight) ? "landscape-primary" : "portrait-primary");
-  }, [y, B] = M(A()), T = () => {
+    "data-read-more-label": c = "READ More",
+    "data-click-to-expand-label": v = "CLICK TO EXPAND",
+    "data-preview-mode": o = "Desktop",
+    editing: t,
+    parent: d,
+    unique: n,
+    pageModuleProps: i
+  } = r;
+  i != null && i.previewMode && (i != null && i.editing) && (o = i.previewMode, t = i.editing);
+  const p = r.intl.locale, y = l || "[]", [z, O] = b(
+    (((k = window == null ? void 0 : window.visualViewport) == null ? void 0 : k.width) || window.innerWidth) <= 1365
+  ), $ = () => {
+    var f, C, M;
+    return ((f = window.screen.orientation) == null ? void 0 : f.type) || ((((C = window == null ? void 0 : window.visualViewport) == null ? void 0 : C.width) || window.innerWidth) > (((M = window == null ? void 0 : window.visualViewport) == null ? void 0 : M.height) || window.innerHeight) ? "landscape-primary" : "portrait-primary");
+  }, [R, S] = b($()), x = () => {
     setTimeout(() => {
-      var a;
-      B(A()), v(
-        (((a = window == null ? void 0 : window.visualViewport) == null ? void 0 : a.width) || window.innerWidth) <= 1365
+      var f;
+      S($()), O(
+        (((f = window == null ? void 0 : window.visualViewport) == null ? void 0 : f.width) || window.innerWidth) <= 1365
       );
     }, 100);
   };
-  L(() => (window.screen.orientation && window.screen.orientation.addEventListener(
+  I(() => (window.screen.orientation && window.screen.orientation.addEventListener(
     "change",
-    T
-  ), window.addEventListener("resize", T), () => {
-    window.removeEventListener("resize", T), window.screen.orientation && window.screen.orientation.removeEventListener(
+    x
+  ), window.addEventListener("resize", x), () => {
+    window.removeEventListener("resize", x), window.screen.orientation && window.screen.orientation.removeEventListener(
       "change",
-      T
+      x
     );
   }), []);
-  const _ = (a) => o ? a : decodeURIComponent(a), $ = (a) => {
-    if (!a) return null;
+  const D = (f) => t ? f : decodeURIComponent(f), E = (f) => {
+    if (!f) return null;
     try {
-      return JSON.parse(_(a));
-    } catch (b) {
-      console.error(`error parsing value:${a}
- error:${b}`);
+      return JSON.parse(D(f));
+    } catch (C) {
+      console.error(`error parsing value:${f}
+ error:${C}`);
     }
     return null;
-  }, E = n !== "Desktop" && o, R = P && !o;
-  return /* @__PURE__ */ r(
-    F,
+  }, W = o !== "Desktop" && t, q = z && !t;
+  return /* @__PURE__ */ e(
+    P,
     {
       style: { maxWidth: "100%" },
-      className: `viz featured tabs ${o ? "editing" : ""}`,
+      className: `viz featured tabs ${t ? "editing" : ""}`,
       fluid: !0,
-      children: /* @__PURE__ */ r(
-        J,
+      children: /* @__PURE__ */ e(
+        F,
         {
-          type: p,
-          locale: h,
-          taxonomy: g,
-          categories: $(u),
-          store: `vertical_tabs${s}_${e}`,
+          type: m,
+          locale: p,
+          taxonomy: h,
+          categories: E(y),
+          store: `vertical_tabs${d}_${n}`,
           page: 1,
-          perPage: f,
-          children: /* @__PURE__ */ r(Y, { children: R || E ? /* @__PURE__ */ r(
-            te,
+          perPage: u,
+          children: /* @__PURE__ */ e(K, { children: q || W ? /* @__PURE__ */ e(
+            Y,
             {
-              posts: f,
-              activeItem: (I = f == null ? void 0 : f[0]) == null ? void 0 : I.slug,
-              colors: $(c),
+              posts: u,
+              activeItem: (A = u == null ? void 0 : u[0]) == null ? void 0 : A.slug,
+              colors: E(a),
               setActive: () => {
               }
             }
-          ) : /* @__PURE__ */ r(
-            oe,
+          ) : /* @__PURE__ */ e(
+            Q,
             {
-              editing: o,
+              editing: t,
               coverWidth: w,
-              moreLabel: l,
-              clickToExpandLabel: C,
-              colors: $(c),
-              height: d,
-              posts: f
+              moreLabel: c,
+              clickToExpandLabel: v,
+              colors: E(a),
+              height: s,
+              posts: u
             }
           ) })
         }
       )
     },
-    y + Math.random()
+    R + Math.random()
   );
-}, ie = (i, d) => {
-  const p = i.getIn(["data", "pageModuleProps"]), g = {};
-  return p && (g.pageModuleProps = p), g;
-}, ae = {}, pe = ee(ie, ae)(re);
+}, ee = (r, s) => {
+  const m = r.getIn(["data", "pageModuleProps"]), h = {};
+  return m && (h.pageModuleProps = m), h;
+}, te = {}, se = J(ee, te)(Z);
 export {
-  pe as default
+  se as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devgateway/dvz-ui-react",
-  "version": "1.7.15",
+  "version": "1.7.16",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",