@devgateway/dvz-ui-react 1.3.5 → 1.5.0

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

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