@devgateway/dvz-ui-react 1.4.0 → 1.5.0

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

@@ -1,207 +1,211 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import z, { useState as p, useEffect as I } from "react";
-import { Container as M, Accordion as T, Icon as k, Grid as _, Segment as D, Label as P } from "semantic-ui-react";
-import { PostProvider as F, PostConsumer as q, MediaProvider as A, MediaConsumer as N, PostIcon as L, PostContent as E, PostTitle as H } from "@devgateway/wp-react-lib";
-import O from "../connected-templates/PostIntro.js";
-import { useWindowDimensionsAndDevice as R } from "../../lib/hooks/window-dimensions.js";
-import { connect as W } from "react-redux";
-const j = ({ post: n, onClick: h, active: a, moreLabel: l }) => {
-  const d = n._embedded ? n._embedded["wp:featuredmedia"] : null;
-  return /* @__PURE__ */ s("div", { className: "cover", style: { backgroundImage: `url(${d ? d[0].source_url : ""})` }, children: [
-    /* @__PURE__ */ e(O, { post: n }),
-    a ? /* @__PURE__ */ s(P, { onClick: h, children: [
-      /* @__PURE__ */ e(k, { name: "arrow alternate circle left outline", size: "large" }),
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import z, { useState as b, useEffect as I } from "react";
+import { Container as M, Accordion as T, Icon as k, Grid as _, Segment as F, Label as P } from "semantic-ui-react";
+import { PostProvider as q, PostConsumer as H, MediaProvider as A, MediaConsumer as L, PostIcon as N, PostContent as E, PostTitle as O } from "@devgateway/wp-react-lib";
+import R from "../connected-templates/PostIntro.js";
+import { useWindowDimensionsAndDevice as W } from "../../lib/hooks/window-dimensions.js";
+import { connect as j } from "react-redux";
+const B = ({ post: n, onClick: f, active: c, moreLabel: l }) => {
+  const u = n._embedded ? n._embedded["wp:featuredmedia"] : null;
+  return /* @__PURE__ */ d("div", { className: "cover", style: { backgroundImage: `url(${u ? u[0].source_url : ""})` }, children: [
+    /* @__PURE__ */ t(R, { post: n }),
+    c ? /* @__PURE__ */ d(P, { onClick: f, children: [
+      /* @__PURE__ */ t(k, { name: "arrow alternate circle left outline", size: "large" }),
       " Back "
-    ] }) : /* @__PURE__ */ s(P, { onClick: h, children: [
-      /* @__PURE__ */ e(k, { name: "search", size: "large" }),
+    ] }) : /* @__PURE__ */ d(P, { onClick: f, children: [
+      /* @__PURE__ */ t(k, { name: "search", size: "large" }),
       " ",
       l
     ] })
   ] });
-}, B = ({ post: n }) => {
+}, G = ({ post: n }) => {
   const l = new DOMParser().parseFromString(n.content.rendered, "text/html").querySelector("figure");
-  return l ? /* @__PURE__ */ e("div", { style: {
+  return l ? /* @__PURE__ */ t("div", { style: {
     flex: "0 0 40px"
   }, dangerouslySetInnerHTML: { __html: l.outerHTML } }) : null;
-}, G = ({ posts: n, width: h, height: a, color: l, moreLabel: d }) => {
-  const [u, r] = p(null), [b, y] = p(!1), [v, C] = p([0, 0]), m = l.split(","), g = (t) => {
-    b ? (y(!1), r(t)) : (r(t), y(!0));
+}, V = ({ posts: n, width: f, height: c, color: l, moreLabel: u, closeLabel: y }) => {
+  const [o, m] = b(null), [p, w] = b(!1), [C, v] = b([0, 0]), a = l.split(","), h = (i) => {
+    p ? (w(!1), m(i)) : (m(i), w(!0));
   };
   return I(() => {
-    u && C([window.scrollX, window.scrollY]), u == null && window.scrollTo(v[0], v[1]);
-  }, [u]), I(() => {
+    o && v([window.scrollX, window.scrollY]), o == null && window.scrollTo(C[0], C[1]);
+  }, [o]), I(() => {
     window.setTimeout(() => {
       if (window.location.hash) {
-        const t = window.location.hash.substr(1), o = document.getElementById(t);
-        o && n && n.map((i) => i.slug).indexOf(t) > -1 && (r(t), o.scrollIntoView({ behavior: "auto", block: "start" }));
+        const i = window.location.hash.substr(1), e = document.getElementById(i);
+        e && n && n.map((r) => r.slug).indexOf(i) > -1 && (m(i), e.scrollIntoView({ behavior: "auto", block: "start" }));
       }
     }, 0);
-  }, [n]), /* @__PURE__ */ e(M, { fluid: !0, className: "featured tabs", style: { minHeight: `${a}px` }, children: /* @__PURE__ */ e(_, { stackable: !0, columns: u != null ? 1 : n == null ? void 0 : n.length, className: "desktop", children: n == null ? void 0 : n.map((t, o) => {
-    var i;
-    return /* @__PURE__ */ s(z.Fragment, { children: [
-      /* @__PURE__ */ s(
+  }, [n]), /* @__PURE__ */ t(M, { fluid: !0, className: "featured tabs", style: { minHeight: `${c}px` }, children: /* @__PURE__ */ t(_, { stackable: !0, columns: o != null ? 1 : n == null ? void 0 : n.length, className: "desktop", children: n == null ? void 0 : n.map((i, e) => {
+    var r;
+    return /* @__PURE__ */ d(z.Fragment, { children: [
+      /* @__PURE__ */ d(
         _.Column,
         {
-          style: u == null ? { display: "block", visibility: "visible", backgroundColor: m[o] } : { display: "none", visibility: "hidden" },
+          style: o == null ? { display: "block", visibility: "visible", backgroundColor: a[e] } : { display: "none", visibility: "hidden" },
           children: [
-            /* @__PURE__ */ e("a", { id: t.slug }),
-            /* @__PURE__ */ e(j, { post: t, moreLabel: d, onClick: () => g(t.slug) })
+            /* @__PURE__ */ t("a", { id: i.slug }),
+            /* @__PURE__ */ t(B, { post: i, moreLabel: u, onClick: () => h(i.slug) })
           ]
         }
       ),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ d(
         _.Column,
         {
           className: "expanded",
-          style: u != t.slug ? { display: "none", visibility: "hidden" } : { display: "block", visibility: "visible" },
+          style: o != i.slug ? { display: "none", visibility: "hidden" } : { display: "block", visibility: "visible" },
           children: [
-            /* @__PURE__ */ s(D, { style: { backgroundColor: m[o] }, children: [
-              ((i = t.meta_fields) == null ? void 0 : i.icon) && /* @__PURE__ */ e(A, { id: t.meta_fields ? t.meta_fields.icon[0] : null, children: /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(L, {}) }) }),
-              /* @__PURE__ */ e(H, { as: "h2", post: t, className: "has-standard-36-font-size has-white-color" }),
-              /* @__PURE__ */ e(P, { className: "closeIcon", onClick: () => r(null), children: /* @__PURE__ */ e(k, { name: "times circle outline", size: "large" }) })
+            /* @__PURE__ */ d(F, { style: { backgroundColor: a[e] }, children: [
+              ((r = i.meta_fields) == null ? void 0 : r.icon) && /* @__PURE__ */ t(A, { id: i.meta_fields ? i.meta_fields.icon[0] : null, children: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(N, {}) }) }),
+              /* @__PURE__ */ t(O, { as: "h2", post: i, className: "has-standard-36-font-size has-white-color" }),
+              /* @__PURE__ */ t(P, { className: "closeIcon", onClick: () => m(null), children: /* @__PURE__ */ t(k, { name: "times circle outline", size: "large" }) })
             ] }),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ t(
               E,
               {
                 as: "div",
                 fluid: !0,
-                post: t,
-                style: { maxHeight: `calc(${a}px - 150px)` }
+                post: i,
+                style: { maxHeight: `calc(${c}px - 150px)` }
               }
             ),
-            /* @__PURE__ */ s(P, { className: "closeIconText", style: { backgroundColor: `${m[o]}` }, onClick: () => r(null), children: [
-              /* @__PURE__ */ e(k, { name: "times circle outline", size: "large" }),
-              " Close "
+            /* @__PURE__ */ d(P, { className: "closeIconText", style: { backgroundColor: `${a[e]}` }, onClick: () => m(null), children: [
+              /* @__PURE__ */ t(k, { name: "times circle outline", size: "large" }),
+              " ",
+              y || "Close",
+              " "
             ] })
           ]
         }
       )
-    ] }, t.slug);
+    ] }, i.slug);
   }) }) });
-}, V = ({ posts: n, activeItem: h, setActive: a, color: l }) => {
-  const [d, u] = p(n.findIndex((i) => i.slug === h)), [r, b] = p(null), y = l.split(","), v = () => {
-    var i;
-    return ((i = window.screen.orientation) == null ? void 0 : i.type) || (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary");
-  }, [C, m] = p(v()), g = () => {
+}, Y = ({ posts: n, activeItem: f, setActive: c, color: l }) => {
+  const [u, y] = b(n.findIndex((e) => e.slug === f)), [o, m] = b(null), p = l.split(","), w = () => {
+    var e;
+    return ((e = window.screen.orientation) == null ? void 0 : e.type) || (window.innerWidth > window.innerHeight ? "landscape-primary" : "portrait-primary");
+  }, [C, v] = b(w()), a = () => {
     setTimeout(() => {
-      m(v());
+      v(w());
     }, 100);
-  }, t = (i, f, c) => {
-    document.querySelectorAll(i).forEach((x) => {
-      x.querySelector(f) && x.classList.add(c);
+  }, h = (e, r, s) => {
+    document.querySelectorAll(e).forEach((x) => {
+      x.querySelector(r) && x.classList.add(s);
     });
   };
   I(() => {
-    if (r) {
-      const i = r.getBoundingClientRect().top + window.scrollY;
+    if (o) {
+      const e = o.getBoundingClientRect().top + window.scrollY;
       window.scrollTo({
-        top: i,
+        top: e,
         behavior: "smooth"
       });
     }
-    t(".ui.fluid.container.viz.featured.tabs", ".accordion .accordion-post-ft-title", "has-accordion-title"), t(".ui.fluid.container.viz.featured.tabs", ".accordion .accordion-post-vft-content", "has-accordion-content"), t(".ui.fluid.container.viz.featured.tabs", "blockquote", "has-blockquote"), t(".ui.fluid.container.viz.featured.tabs", ".vt-accordion-post-intro figure", "has-vt-accordion-figure"), t(".ui.fluid.container.viz.featured.tabs", ".content.active.accordion-post-content .wp-block-columns", "has-wp-block-columns");
-  }, [r]), I(() => (window.screen.orientation && window.screen.orientation.addEventListener(
+    h(".ui.fluid.container.viz.featured.tabs", ".accordion .accordion-post-ft-title", "has-accordion-title"), h(".ui.fluid.container.viz.featured.tabs", ".accordion .accordion-post-vft-content", "has-accordion-content"), h(".ui.fluid.container.viz.featured.tabs", "blockquote", "has-blockquote"), h(".ui.fluid.container.viz.featured.tabs", ".vt-accordion-post-intro figure", "has-vt-accordion-figure"), h(".ui.fluid.container.viz.featured.tabs", ".content.active.accordion-post-content .wp-block-columns", "has-wp-block-columns");
+  }, [o]), I(() => (window.screen.orientation && window.screen.orientation.addEventListener(
     "change",
-    g
-  ), window.addEventListener("resize", g), () => {
-    window.removeEventListener("resize", g), window.screen.orientation && window.screen.orientation.removeEventListener(
+    a
+  ), window.addEventListener("resize", a), () => {
+    window.removeEventListener("resize", a), window.screen.orientation && window.screen.orientation.removeEventListener(
       "change",
-      g
+      a
     );
   }), []);
-  const o = (i, f) => {
-    const { index: c } = f, w = d === c ? -1 : c;
-    u(w), a(n[c].slug), w !== -1 && b(i.currentTarget);
+  const i = (e, r) => {
+    const { index: s } = r, g = u === s ? -1 : s;
+    y(g), c(n[s].slug), g !== -1 && m(e.currentTarget);
   };
-  return /* @__PURE__ */ e(T, { fluid: !0, styled: !0, children: n.map((i, f) => {
-    var w;
-    const c = (w = i.meta_fields) != null && w.icon ? i.meta_fields.icon[0] : null;
-    return /* @__PURE__ */ s(z.Fragment, { children: [
-      /* @__PURE__ */ e(
+  return /* @__PURE__ */ t(T, { fluid: !0, styled: !0, children: n.map((e, r) => {
+    var g;
+    const s = (g = e.meta_fields) != null && g.icon ? e.meta_fields.icon[0] : null;
+    return /* @__PURE__ */ d(z.Fragment, { children: [
+      /* @__PURE__ */ t(
         T.Title,
         {
-          active: d === f,
-          index: f,
-          onClick: o,
-          style: { backgroundColor: y[f] },
-          children: /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
-            /* @__PURE__ */ s("div", { style: { display: "flex", alignItems: "center" }, children: [
-              c && /* @__PURE__ */ e(A, { id: c, children: /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(L, { className: "icon" }) }) }),
-              !c && /* @__PURE__ */ e(B, { post: i }),
-              /* @__PURE__ */ e("p", { className: "accordion-post-ft-title", dangerouslySetInnerHTML: { __html: i.title.rendered }, style: { marginLeft: "10px" } })
+          active: u === r,
+          index: r,
+          onClick: i,
+          style: { backgroundColor: p[r] },
+          children: /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, children: [
+            /* @__PURE__ */ d("div", { style: { display: "flex", alignItems: "center" }, children: [
+              s && /* @__PURE__ */ t(A, { id: s, children: /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(N, { className: "icon" }) }) }),
+              !s && /* @__PURE__ */ t(G, { post: e }),
+              /* @__PURE__ */ t("p", { className: "accordion-post-ft-title", dangerouslySetInnerHTML: { __html: e.title.rendered }, style: { marginLeft: "10px" } })
             ] }),
-            /* @__PURE__ */ e(k, { name: "chevron down" })
+            /* @__PURE__ */ t(k, { name: "chevron down" })
           ] })
         }
       ),
-      /* @__PURE__ */ e(T.Content, { className: "accordion-post-ft-content", active: d === f, children: /* @__PURE__ */ e(E, { post: i }) })
-    ] }, i.id);
+      /* @__PURE__ */ t(T.Content, { className: "accordion-post-ft-content", active: u === r, children: /* @__PURE__ */ t(E, { post: e }) })
+    ] }, e.id);
   }) });
-}, Y = (n) => {
+}, U = (n) => {
   var S;
   let {
-    "data-width": h,
-    "data-height": a,
+    "data-width": f,
+    "data-height": c,
     "data-type": l,
-    "data-taxonomy": d,
-    "data-categories": u,
-    "data-items": r,
-    "data-color": b,
-    "data-use-scrolls": y,
-    "data-read-more-label": v = "READ More",
-    "data-preview-mode": C = "Desktop",
-    editing: m,
-    parent: g,
-    unique: t,
-    pageModuleProps: o
+    "data-taxonomy": u,
+    "data-categories": y,
+    "data-items": o,
+    "data-color": m,
+    "data-use-scrolls": p,
+    "data-read-more-label": w = "READ More",
+    "data-close-label": C = "Close",
+    "data-preview-mode": v = "Desktop",
+    editing: a,
+    parent: h,
+    unique: i,
+    pageModuleProps: e
   } = n;
-  const i = n.intl.locale;
-  o != null && o.editing && (o != null && o.previewMode) && (m = o.editing, C = o.previewMode);
-  const f = y == "true", { width: c } = R(), w = c <= 1250, x = C !== "Desktop" && m, $ = w && !m;
-  return /* @__PURE__ */ e(
+  const r = n.intl.locale;
+  e != null && e.editing && (e != null && e.previewMode) && (a = e.editing, v = e.previewMode);
+  const s = p == "true", { width: g } = W(), x = g <= 1250, $ = v !== "Desktop" && a, D = x && !a;
+  return /* @__PURE__ */ t(
     M,
     {
-      className: `viz featured tabs ${m ? "editing" : ""} ${f ? "scrollable" : ""}`,
+      className: `viz featured tabs ${a ? "editing" : ""} ${s ? "scrollable" : ""}`,
       fluid: !0,
-      children: /* @__PURE__ */ e(
-        F,
+      children: /* @__PURE__ */ t(
+        q,
         {
-          locale: i,
+          locale: r,
           type: l,
-          taxonomy: d,
-          categories: u,
-          store: `tabbedposts_${g}_${t}`,
+          taxonomy: u,
+          categories: y,
+          store: `tabbedposts_${h}_${i}`,
           page: 1,
-          perPage: r,
-          children: /* @__PURE__ */ e(q, { children: x || $ ? /* @__PURE__ */ e(
-            V,
+          perPage: o,
+          children: /* @__PURE__ */ t(H, { children: $ || D ? /* @__PURE__ */ t(
+            Y,
             {
-              posts: r,
-              activeItem: (S = r == null ? void 0 : r[0]) == null ? void 0 : S.slug,
-              color: b,
+              posts: o,
+              activeItem: (S = o == null ? void 0 : o[0]) == null ? void 0 : S.slug,
+              color: m,
               setActive: () => {
               }
             }
-          ) : /* @__PURE__ */ e(
-            G,
+          ) : /* @__PURE__ */ t(
+            V,
             {
-              moreLabel: v,
-              color: b,
-              width: h,
-              height: a
+              moreLabel: w,
+              closeLabel: C,
+              color: m,
+              width: f,
+              height: c
             }
           ) })
         }
       )
     }
   );
-}, U = (n, h) => {
-  const a = n.getIn([
+}, X = (n, f) => {
+  const c = n.getIn([
     "data",
     "pageModuleProps"
   ]), l = {};
-  return a && (l.pageModuleProps = a), l;
-}, X = {}, ie = W(U, X)(Y);
+  return c && (l.pageModuleProps = c), l;
+}, J = {}, oe = j(X, J)(U);
 export {
-  ie as default
+  oe as default
 };