@devgateway/dvz-ui-react 1.2.1 → 1.3.1

package/dist/cjs/embeddable/big-number-trend/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),T=require("react"),E=require("semantic-ui-react"),V=require("../data/DataProvider.js"),_=require("../data/DataConsumer.js");require("@devgateway/wp-react-lib");const H=require("react-redux"),J=require("../utils/common.js"),$=require("string-template"),k=g=>{const{editing:c=!1,unique:h,intl:m,childContent:f,"data-csv":d="","data-dvz-proxy-dataset-id":x,"data-no-data-message":U="No data matches your selection","data-view-mode":b="info","data-height":v,"data-app":y,"data-measures":D="{}","data-format":C="{}","data-group":F,"data-filters":z="[]","data-text-color":e="#000000","data-big-number-font-size":s=20,"data-label-font-size":n=20,"data-percent-font-size":u=20,"data-label":p="","data-dimension1":o,"data-show-percentage-change":S="false","data-wait-for-filters":j="false","data-no-data-text":N="-"}=g,q=m.locale,w=T.useRef(null),i=r=>c?r:decodeURIComponent(r),l=r=>{try{return JSON.parse(i(r))}catch{console.error("error parsing value:"+r)}return null},t=l(C),O=t?{style:t.style==="compacted"?"decimal":t.style,notation:t.style==="compacted"?"compact":"standard",currency:t.currency,minimumFractionDigits:parseInt(t.minimumFractionDigits),maximumFractionDigits:parseInt(t.maximumFractionDigits)}:{notation:"standard",currency:"USD",minimumFractionDigits:2,maximumFractionDigits:2},[Q,W]=T.useState(b),A=c?v-80:v-40,I={},R=l(z)||{};R&&R.forEach&&R.forEach(r=>{r.value!=null&&r.value.filter(M=>M!=null&&M.toString().trim()!="").length>0&&(I[r.param]=r.value)}),x&&(I.dvzProxyDatasetId=x);const P=[];return o!="none"&&P.push(o),a.jsx("div",{ref:w,children:a.jsx(E.Container,{className:"chart container big-number-trend-container",style:{height:v+"px"},fluid:!0,children:a.jsx(V.default,{style:{height:`${A}px`},params:I,app:y,group:F,csv:d,editing:c,waitForFilters:j==="true",store:[y,h,...P],source:P.join("/"),children:a.jsx(_.default,{children:a.jsx(B,{editing:c,locale:q,intl:m,app:y,format:O,dimension1:o,measure:l(D)[0]||null,label:p,bigNumberFontSize:s,textColor:e,labelFontSize:n,percentFontSize:u,showPercentageChange:S=="true"||S==!0,noDataText:N})})})})})},B=g=>{const{editing:c,app:h,measure:m,dimension1:f,data:d,format:x,label:U,textColor:b,bigNumberFontSize:v,percentFontSize:y,labelFontSize:D,showPercentageChange:C,intl:F,noDataText:z}=g;let e=[],s,n;if(h=="csv"){const{data:i,meta:{fields:l}}=d;s=l[0],n=l[1],e=d.data.map(t=>({value:t[s],[n]:t[n],[s]:t[s]}))}else e=!d.children||d.children.length==0?[]:d.children,n=m,s=f,e=e.map(i=>({value:i.value,[n]:i[n],[s]:i.value}));let u=null,p=null,o,S,j;e.length>0&&(e=e.sort((i,l)=>J.alphaSort(!1,F.locale,i.value,l.value)),u=e[e.length-1][n],e.length>1&&(p=e[e.length-2][n]),j=F.formatNumber(x.style==="percent"?u/100:u,{...x}),p&&(o=(u-p)/p,S=F.formatNumber(o,{style:"percent",minimumFractionDigits:2,maximumFractionDigits:2}))),u==null&&(j=z);const N={color:decodeURIComponent(b),fontSize:v+"px"},q={color:decodeURIComponent(b),fontSize:y+"px"},w={color:decodeURIComponent(b),fontSize:D+"px"};return a.jsxs("div",{className:"trend",children:[a.jsx("div",{className:"label",style:w,children:$(U,e[e.length-1])}),a.jsxs("div",{className:"number-and-icon",children:[a.jsx("span",{className:"number",style:N,children:j}),o&&a.jsx("img",{src:o>0?"/trend-up.svg":"/trend-down.svg",alt:"Arrow",className:"icon"})]}),C&&o&&a.jsx("div",{className:"percentage",style:q,children:S})]})},G=(g,c)=>{const{"data-app":h,"data-group":m}=c,f=g.getIn(["data","measures",h,m]);return f?{injectedMeasures:f}:{}},K={},L=H.connect(G,K)(k);exports.default=L;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),T=require("react"),V=require("semantic-ui-react"),_=require("../data/DataProvider.js"),A=require("../data/DataConsumer.js");require("@devgateway/wp-react-lib");const H=require("react-redux"),J=require("../utils/common.js"),$=require("string-template"),k=g=>{const{editing:c=!1,unique:h,intl:m,childContent:f,"data-csv":d="","data-dvz-proxy-dataset-id":x,"data-no-data-message":U="No data matches your selection","data-view-mode":b="info","data-height":v,"data-app":y,"data-measures":D="{}","data-format":C="{}","data-group":F,"data-filters":z="[]","data-text-color":e="#000000","data-big-number-font-size":i=20,"data-label-font-size":n=20,"data-percent-font-size":u=20,"data-label":p="","data-dimension1":o,"data-show-percentage-change":S="false","data-wait-for-filters":j="false","data-no-data-text":N="-"}=g,q=m.locale,I=T.useRef(null),s=r=>c?r:decodeURIComponent(r),l=r=>{try{return JSON.parse(s(r))}catch{console.error("error parsing value:"+r)}return null},t=l(C),O=t?{style:t.style==="compacted"?"decimal":t.style,notation:t.style==="compacted"?"compact":"standard",currency:t.currency,minimumFractionDigits:parseInt(t.minimumFractionDigits),maximumFractionDigits:parseInt(t.maximumFractionDigits)}:{notation:"standard",currency:"USD",minimumFractionDigits:2,maximumFractionDigits:2},[Q,W]=T.useState(b),E=c?v-80:v-40,w={},R=l(z)||{};R&&R.forEach&&R.forEach(r=>{r.value!=null&&r.value.filter(M=>M!=null&&M.toString().trim()!="").length>0&&(w[r.param]=r.value)}),x&&(w.dvzProxyDatasetId=x);const P=[];return o!="none"&&P.push(o),a.jsx("div",{ref:I,children:a.jsx(V.Container,{className:"chart container big-number-trend-container",style:{height:v+"px"},fluid:!0,children:a.jsx(_.default,{style:{height:`${E}px`},params:w,app:y,group:F,csv:d,editing:c,waitForFilters:j==="true",store:[y,h,...P],source:P.join("/"),children:a.jsx(A.default,{children:a.jsx(B,{editing:c,locale:q,intl:m,app:y,format:O,dimension1:o,measure:l(D)[0]||null,label:p,bigNumberFontSize:i,textColor:e,labelFontSize:n,percentFontSize:u,showPercentageChange:S=="true"||S==!0,noDataText:N})})})})})},B=g=>{const{editing:c,app:h,measure:m,dimension1:f,data:d,format:x,label:U,textColor:b,bigNumberFontSize:v,percentFontSize:y,labelFontSize:D,showPercentageChange:C,intl:F,noDataText:z}=g;let e=[],i,n;if(h=="csv"){const{data:s,meta:{fields:l}}=d;i=l[0],n=l[1],e=d.data.map(t=>({value:t[i],[n]:t[n],[i]:t[i]}))}else e=!d.children||d.children.length==0?[]:d.children,n=m,i=f,e=e.map(s=>({value:s.value,[n]:s[n],[i]:s.value}));let u=null,p=null,o,S,j;e.length>0&&(e=e.sort((s,l)=>J.alphaSort(!1,F.locale,s.value,l.value)),u=e[e.length-1][n],e.length>1&&(p=e[e.length-2][n]),j=F.formatNumber(x.style==="percent"?u/100:u,{...x}),p&&(o=(u-p)/p,S=F.formatNumber(o,{style:"percent",minimumFractionDigits:2,maximumFractionDigits:2}))),u==null&&(j=z);const N={color:decodeURIComponent(b),fontSize:v+"px"},q={color:decodeURIComponent(b),fontSize:y+"px"},I={color:decodeURIComponent(b),fontSize:D+"px"};return a.jsxs("div",{className:"trend",children:[a.jsx("div",{className:"label",style:I,children:$(U,e[e.length-1])}),a.jsxs("div",{className:"number-and-icon",children:[a.jsx("span",{className:"number",style:N,children:j}),o&&a.jsx("div",{className:o>0?"icon trend up":"icon trend down"})]}),C&&o&&a.jsx("div",{className:"percentage",style:q,children:S})]})},G=(g,c)=>{const{"data-app":h,"data-group":m}=c,f=g.getIn(["data","measures",h,m]);return f?{injectedMeasures:f}:{}},K={},L=H.connect(G,K)(k);exports.default=L;

package/dist/cjs/layout/Favicon.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),o=require("react"),c=require("../conf/index.js");function s(){const[n,i]=o.useState(null);if(!n){const r=c.Config.REACT_APP_WP_API;fetch(r).then(e=>e.json()).then(e=>{e&&e.site_icon_url&&i(e.site_icon_url)}).catch(e=>{console.error("Failed to fetch favicon:",e)})}return t.jsx(t.Fragment,{children:n&&t.jsxs(t.Fragment,{children:[t.jsx("link",{rel:"icon",href:n}),t.jsx("link",{rel:"apple-touch-icon",href:n}),t.jsx("link",{rel:"shortcut",href:n})]})})}const l=o.memo(s);exports.default=l;

package/dist/cjs/layout/Layout.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),u=require("react"),r=require("react-router"),g=require("../embeddable/index.js"),l=require("react-intl"),s=require("@devgateway/wp-react-lib"),p=require("react-redux");require("semantic-ui-react");require("../utils/AppMedia.js");require("./Footer.js");require("./Header.js");const q=require("./Customizer.js");require("./Favicon.js");const f=require("../conf/index.js"),h=require("../translations/en.json.js"),x=require("../translations/fr.json.js"),j=require("../translations/af.json.js"),v=require("../lib/react-intl-redux/index.js");require("immutable");const i=require("../redux/store.js"),c={en:h,fr:x,am:j},w=l.injectIntl(o=>(document.title=o.settings.description,e.jsx(e.Fragment,{}))),C=()=>{const o=r.useParams(),d=r.useLocation(),n=f.Config.DEFAULT_LOCALE;console.log("defaultLocale",n);const t=o.lan,m=d.pathname;return console.log("pathParams",o),u.useEffect(()=>{process.env.NODE_ENV==="development"&&(console.log("----------.env-----------"),console.log(process.env),console.log("----------.env-----------")),window&&window.setTimeout(()=>{if(window&&window.location.hash){const a=document.getElementById(window.location.hash.substring(1));a&&a.scrollIntoView({behavior:"auto",block:"start"})}},2e3)},[]),u.useEffect(()=>{i.store.dispatch(v.updateIntl({locale:t,formats:{},messages:c[t??"en"]}))},[t]),t?Object.keys(c).includes(t)?e.jsx(p.Provider,{store:i.store,children:e.jsx(l.IntlProvider,{locale:t,messages:c[t],children:e.jsx(s.AppContextProvider,{getComponent:g.getComponentByNameIgnoreCase,store:i.store,locale:t,children:e.jsx(s.SettingProvider,{locale:t,changeUUID:null,children:e.jsxs(s.SettingsConsumer,{children:[e.jsx(q.CustomizerWrapper,{children:e.jsx(w,{})}),e.jsx(r.Outlet,{})]})})})},t)}):e.jsx(r.Navigate,{to:`/${n}${m}`,replace:!0}):e.jsx(r.Navigate,{to:n,replace:!0})};exports.default=C;

package/dist/cjs/layout/Loading.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("semantic-ui-react"),t=()=>e.jsx(r.Segment,{className:"h-screen w-screen",children:e.jsx(r.Dimmer,{active:!0,inverted:!0,children:e.jsx(r.Loader,{size:"large",active:!0,inline:"centered",inverted:!0})})});exports.default=t;

package/dist/cjs/layout/PreviewComponent.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("react"),o=require("react-router"),u=require("semantic-ui-react"),g=require("@devgateway/wp-react-lib"),w=require("../embeddable/index.js"),f=()=>{const m=o.useParams();o.useLocation();const[a]=r.useState(()=>w.getComponentByNameIgnoreCase(m.name??""));let[n,d]=o.useSearchParams();const i=l=>{console.log("-------------------------------reading message ----------------------------------------");const t=l.data;if(t.messageType&&t.messageType=="component-attributes"){const c={...n};Object.keys(t).forEach(s=>{c["data-"+s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()]=typeof t[s]=="object"?JSON.stringify(t[s]):t[s]}),d(c)}};r.useEffect(()=>(window.addEventListener("message",i,!1),window.parent&&window.parent.postMessage({type:"componentReady",value:!0},"*"),window.top&&window.top.postMessage({type:"componentReady",value:!0},"*"),()=>{window.removeEventListener("message",i)}),[]);const p=r.useMemo(()=>Object.fromEntries(n.entries()),[n]);return e.jsx("div",{children:e.jsx(u.Container,{fluid:!0,className:"editing",children:a?e.jsx(a,{...p,editing:!0}):e.jsx(u.Segment.Group,{color:"red",textAlign:"center",children:e.jsx("h1",{children:"Wrong Component Name"})})})})},j=()=>e.jsx(g.SettingsConsumer,{children:e.jsx(f,{})});exports.default=j;

package/dist/cjs/layout/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ResponsiveContainer.js"),r=require("./ScrollTop.js"),t=require("./containers/PreviewPageContainer.js"),o=require("./containers/PreviewTypeContainer.js"),i=require("./containers/SlugContainer.js"),n=require("./containers/SlugPostContainer.js"),u=require("./Customizer.js");exports.default=e.default;exports.ScrollToTop=r.default;exports.PreviewPageContainer=t.default;exports.PreviewTypeContainer=o.default;exports.SlugContainer=i.default;exports.SlugPostContainer=n.default;exports.CustomizerWrapper=u.CustomizerWrapper;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./ResponsiveContainer.js"),r=require("./ScrollTop.js"),o=require("./containers/PreviewPageContainer.js"),t=require("./containers/PreviewTypeContainer.js"),n=require("./containers/SlugContainer.js"),i=require("./containers/SlugPostContainer.js"),u=require("./Customizer.js"),a=require("./Layout.js"),l=require("./PreviewComponent.js"),s=require("./Favicon.js"),c=require("./Loading.js");exports.default=e.default;exports.ScrollToTop=r.default;exports.PreviewPageContainer=o.default;exports.PreviewTypeContainer=t.default;exports.SlugContainer=n.default;exports.SlugPostContainer=i.default;exports.CustomizerWrapper=u.CustomizerWrapper;exports.RootLayout=a.default;exports.PreviewComponent=l.default;exports.Favicon=s.default;exports.Loading=c.default;

package/dist/esm/embeddable/big-number-trend/index.js

@@ -1,5 +1,5 @@
-import { jsx as o, jsxs as A } from "react/jsx-runtime";
-import { useRef as V, useState as q } from "react";
+import { jsx as o, jsxs as E } from "react/jsx-runtime";
+import { useRef as q, useState as A } from "react";
 import { Container as H } from "semantic-ui-react";
 import J from "../data/DataProvider.js";
 import $ from "../data/DataConsumer.js";
@@ -10,14 +10,14 @@ import G from "string-template";
 const K = (f) => {
   const {
     editing: c = !1,
-    unique: g,
+    unique: h,
     intl: u,
-    childContent: h,
+    childContent: g,
     "data-csv": m = "",
     "data-dvz-proxy-dataset-id": b,
     "data-no-data-message": T = "No data matches your selection",
-    "data-view-mode": v = "info",
-    "data-height": F,
+    "data-view-mode": F = "info",
+    "data-height": v,
     "data-app": x,
     "data-measures": C = "{}",
     "data-format": z = "{}",
@@ -31,15 +31,15 @@ const K = (f) => {
     "data-dimension1": r,
     "data-show-percentage-change": S = "false",
     "data-wait-for-filters": D = "false",
-    "data-no-data-text": w = "-"
-  } = f, I = u.locale, j = V(null), s = (n) => c ? n : decodeURIComponent(n), l = (n) => {
+    "data-no-data-text": I = "-"
+  } = f, w = u.locale, j = q(null), s = (n) => c ? n : decodeURIComponent(n), l = (n) => {
     try {
       return JSON.parse(s(n));
     } catch {
       console.error("error parsing value:" + n);
     }
     return null;
-  }, t = l(z), E = t ? {
+  }, t = l(z), O = t ? {
     style: t.style === "compacted" ? "decimal" : t.style,
     notation: t.style === "compacted" ? "compact" : "standard",
     currency: t.currency,
@@ -50,31 +50,31 @@ const K = (f) => {
     currency: "USD",
     minimumFractionDigits: 2,
     maximumFractionDigits: 2
-  }, [X, Y] = q(v), O = c ? F - 80 : F - 40, P = {}, M = l(N) || {};
+  }, [X, Y] = A(F), V = c ? v - 80 : v - 40, P = {}, M = l(N) || {};
   M && M.forEach && M.forEach((n) => {
     n.value != null && n.value.filter((U) => U != null && U.toString().trim() != "").length > 0 && (P[n.param] = n.value);
   }), b && (P.dvzProxyDatasetId = b);
   const R = [];
-  return r != "none" && R.push(r), /* @__PURE__ */ o("div", { ref: j, children: /* @__PURE__ */ o(H, { className: "chart container big-number-trend-container", style: { height: F + "px" }, fluid: !0, children: /* @__PURE__ */ o(
+  return r != "none" && R.push(r), /* @__PURE__ */ o("div", { ref: j, children: /* @__PURE__ */ o(H, { className: "chart container big-number-trend-container", style: { height: v + "px" }, fluid: !0, children: /* @__PURE__ */ o(
     J,
     {
-      style: { height: `${O}px` },
+      style: { height: `${V}px` },
       params: P,
       app: x,
       group: y,
       csv: m,
       editing: c,
       waitForFilters: D === "true",
-      store: [x, g, ...R],
+      store: [x, h, ...R],
       source: R.join("/"),
       children: /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(
         L,
         {
           editing: c,
-          locale: I,
+          locale: w,
           intl: u,
           app: x,
-          format: E,
+          format: O,
           dimension1: r,
           measure: l(C)[0] || null,
           label: p,
@@ -83,7 +83,7 @@ const K = (f) => {
           labelFontSize: a,
           percentFontSize: d,
           showPercentageChange: S == "true" || S == !0,
-          noDataText: w
+          noDataText: I
         }
       ) })
     }
@@ -91,14 +91,14 @@ const K = (f) => {
 }, L = (f) => {
   const {
     editing: c,
-    app: g,
+    app: h,
     measure: u,
-    dimension1: h,
+    dimension1: g,
     data: m,
     format: b,
     label: T,
-    textColor: v,
-    bigNumberFontSize: F,
+    textColor: F,
+    bigNumberFontSize: v,
     percentFontSize: x,
     labelFontSize: C,
     showPercentageChange: z,
@@ -106,7 +106,7 @@ const K = (f) => {
     noDataText: N
   } = f;
   let e = [], i, a;
-  if (g == "csv") {
+  if (h == "csv") {
     const { data: s, meta: { fields: l } } = m;
     i = l[0], a = l[1], e = m.data.map((t) => ({
       value: t[i],
@@ -114,35 +114,35 @@ const K = (f) => {
       [i]: t[i]
     }));
   } else
-    e = !m.children || m.children.length == 0 ? [] : m.children, a = u, i = h, e = e.map((s) => ({
+    e = !m.children || m.children.length == 0 ? [] : m.children, a = u, i = g, e = e.map((s) => ({
       value: s.value,
       [a]: s[a],
       [i]: s.value
     }));
   let d = null, p = null, r, S, D;
   e.length > 0 && (e = e.sort((s, l) => B(!1, y.locale, s.value, l.value)), d = e[e.length - 1][a], e.length > 1 && (p = e[e.length - 2][a]), D = y.formatNumber(b.style === "percent" ? d / 100 : d, { ...b }), p && (r = (d - p) / p, S = y.formatNumber(r, { style: "percent", minimumFractionDigits: 2, maximumFractionDigits: 2 }))), d == null && (D = N);
-  const w = {
-    color: decodeURIComponent(v),
-    fontSize: F + "px"
-  }, I = {
-    color: decodeURIComponent(v),
+  const I = {
+    color: decodeURIComponent(F),
+    fontSize: v + "px"
+  }, w = {
+    color: decodeURIComponent(F),
     fontSize: x + "px"
   }, j = {
-    color: decodeURIComponent(v),
+    color: decodeURIComponent(F),
     fontSize: C + "px"
   };
-  return /* @__PURE__ */ A("div", { className: "trend", children: [
+  return /* @__PURE__ */ E("div", { className: "trend", children: [
     /* @__PURE__ */ o("div", { className: "label", style: j, children: G(T, e[e.length - 1]) }),
-    /* @__PURE__ */ A("div", { className: "number-and-icon", children: [
-      /* @__PURE__ */ o("span", { className: "number", style: w, children: D }),
-      r && /* @__PURE__ */ o("img", { src: r > 0 ? "/trend-up.svg" : "/trend-down.svg", alt: "Arrow", className: "icon" })
+    /* @__PURE__ */ E("div", { className: "number-and-icon", children: [
+      /* @__PURE__ */ o("span", { className: "number", style: I, children: D }),
+      r && /* @__PURE__ */ o("div", { className: r > 0 ? "icon trend up" : "icon trend down" })
     ] }),
-    z && r && /* @__PURE__ */ o("div", { className: "percentage", style: I, children: S })
+    z && r && /* @__PURE__ */ o("div", { className: "percentage", style: w, children: S })
   ] });
 }, Q = (f, c) => {
-  const { "data-app": g, "data-group": u } = c, h = f.getIn(["data", "measures", g, u]);
-  return h ? {
-    injectedMeasures: h
+  const { "data-app": h, "data-group": u } = c, g = f.getIn(["data", "measures", h, u]);
+  return g ? {
+    injectedMeasures: g
   } : {};
 }, W = {}, se = k(Q, W)(K);
 export {

package/dist/esm/layout/Favicon.js

@@ -0,0 +1,23 @@
+import { jsx as t, Fragment as i, jsxs as c } from "react/jsx-runtime";
+import l, { useState as s } from "react";
+import { Config as f } from "../conf/index.js";
+function h() {
+  const [e, n] = s(null);
+  if (!e) {
+    const r = f.REACT_APP_WP_API;
+    fetch(r).then((o) => o.json()).then((o) => {
+      o && o.site_icon_url && n(o.site_icon_url);
+    }).catch((o) => {
+      console.error("Failed to fetch favicon:", o);
+    });
+  }
+  return /* @__PURE__ */ t(i, { children: e && /* @__PURE__ */ c(i, { children: [
+    /* @__PURE__ */ t("link", { rel: "icon", href: e }),
+    /* @__PURE__ */ t("link", { rel: "apple-touch-icon", href: e }),
+    /* @__PURE__ */ t("link", { rel: "shortcut", href: e })
+  ] }) });
+}
+const _ = l.memo(h);
+export {
+  _ as default
+};

package/dist/esm/layout/Layout.js

@@ -0,0 +1,45 @@
+import { jsx as e, Fragment as p, jsxs as f } from "react/jsx-runtime";
+import { useEffect as m } from "react";
+import { useParams as d, useLocation as u, Navigate as a, Outlet as g } from "react-router";
+import { getComponentByNameIgnoreCase as h } from "../embeddable/index.js";
+import { injectIntl as v, IntlProvider as w } from "react-intl";
+import { AppContextProvider as C, SettingProvider as I, SettingsConsumer as L } from "@devgateway/wp-react-lib";
+import { Provider as P } from "react-redux";
+import "semantic-ui-react";
+import "../utils/AppMedia.js";
+import "./Footer.js";
+import "./Header.js";
+import { CustomizerWrapper as E } from "./Customizer.js";
+import "./Favicon.js";
+import { Config as j } from "../conf/index.js";
+import * as b from "../translations/en.json.js";
+import * as x from "../translations/fr.json.js";
+import * as y from "../translations/af.json.js";
+import { updateIntl as N } from "../lib/react-intl-redux/index.js";
+import "immutable";
+import { store as n } from "../redux/store.js";
+const i = {
+  en: b,
+  fr: x,
+  am: y
+}, O = v((t) => (document.title = t.settings.description, /* @__PURE__ */ e(p, {}))), J = () => {
+  const t = d(), l = u(), r = j.DEFAULT_LOCALE;
+  console.log("defaultLocale", r);
+  const o = t.lan, c = l.pathname;
+  return console.log("pathParams", t), m(() => {
+    process.env.NODE_ENV === "development" && (console.log("----------.env-----------"), console.log(process.env), console.log("----------.env-----------")), window && window.setTimeout(() => {
+      if (window && window.location.hash) {
+        const s = document.getElementById(window.location.hash.substring(1));
+        s && s.scrollIntoView({ behavior: "auto", block: "start" });
+      }
+    }, 2e3);
+  }, []), m(() => {
+    n.dispatch(N({ locale: o, formats: {}, messages: i[o ?? "en"] }));
+  }, [o]), o ? Object.keys(i).includes(o) ? /* @__PURE__ */ e(P, { store: n, children: /* @__PURE__ */ e(w, { locale: o, messages: i[o], children: /* @__PURE__ */ e(C, { getComponent: h, store: n, locale: o, children: /* @__PURE__ */ e(I, { locale: o, changeUUID: null, children: /* @__PURE__ */ f(L, { children: [
+    /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(O, {}) }),
+    /* @__PURE__ */ e(g, {})
+  ] }) }) }) }, o) }) : /* @__PURE__ */ e(a, { to: `/${r}${c}`, replace: !0 }) : /* @__PURE__ */ e(a, { to: r, replace: !0 });
+};
+export {
+  J as default
+};

package/dist/esm/layout/Loading.js

@@ -0,0 +1,6 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Segment as r, Dimmer as t, Loader as i } from "semantic-ui-react";
+const c = () => /* @__PURE__ */ e(r, { className: "h-screen w-screen", children: /* @__PURE__ */ e(t, { active: !0, inverted: !0, children: /* @__PURE__ */ e(i, { size: "large", active: !0, inline: "centered", inverted: !0 }) }) });
+export {
+  c as default
+};

package/dist/esm/layout/PreviewComponent.js

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import d, { useState as u, useEffect as g } from "react";
+import { useParams as f, useLocation as l, useSearchParams as w } from "react-router";
+import { Container as y, Segment as P } from "semantic-ui-react";
+import { SettingsConsumer as C } from "@devgateway/wp-react-lib";
+import { getComponentByNameIgnoreCase as h } from "../embeddable/index.js";
+const v = () => {
+  const m = f();
+  l();
+  const [n] = u(() => h(m.name ?? ""));
+  let [r, i] = w();
+  const a = (c) => {
+    console.log("-------------------------------reading message ----------------------------------------");
+    const t = c.data;
+    if (t.messageType && t.messageType == "component-attributes") {
+      const s = { ...r };
+      Object.keys(t).forEach((o) => {
+        s["data-" + o.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()] = typeof t[o] == "object" ? JSON.stringify(t[o]) : t[o];
+      }), i(s);
+    }
+  };
+  g(() => (window.addEventListener("message", a, !1), window.parent && window.parent.postMessage({ type: "componentReady", value: !0 }, "*"), window.top && window.top.postMessage({ type: "componentReady", value: !0 }, "*"), () => {
+    window.removeEventListener("message", a);
+  }), []);
+  const p = d.useMemo(() => Object.fromEntries(r.entries()), [r]);
+  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(y, { fluid: !0, className: "editing", children: n ? /* @__PURE__ */ e(n, { ...p, editing: !0 }) : /* @__PURE__ */ e(P.Group, { color: "red", textAlign: "center", children: /* @__PURE__ */ e("h1", { children: "Wrong Component Name" }) }) }) });
+}, N = () => /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(v, {}) });
+export {
+  N as default
+};

package/dist/esm/layout/index.js

@@ -1,16 +1,24 @@
-import o from "./ResponsiveContainer.js";
+import e from "./ResponsiveContainer.js";
 import { default as a } from "./ScrollTop.js";
 import { default as p } from "./containers/PreviewPageContainer.js";
-import { default as i } from "./containers/PreviewTypeContainer.js";
+import { default as l } from "./containers/PreviewTypeContainer.js";
 import { default as s } from "./containers/SlugContainer.js";
-import { default as u } from "./containers/SlugPostContainer.js";
-import { CustomizerWrapper as d } from "./Customizer.js";
+import { default as i } from "./containers/SlugPostContainer.js";
+import { CustomizerWrapper as x } from "./Customizer.js";
+import { default as v } from "./Layout.js";
+import { default as g } from "./PreviewComponent.js";
+import { default as S } from "./Favicon.js";
+import { default as c } from "./Loading.js";
 export {
-  d as CustomizerWrapper,
+  x as CustomizerWrapper,
+  S as Favicon,
+  c as Loading,
+  g as PreviewComponent,
   p as PreviewPageContainer,
-  i as PreviewTypeContainer,
+  l as PreviewTypeContainer,
+  v as RootLayout,
   a as ScrollToTop,
   s as SlugContainer,
-  u as SlugPostContainer,
-  o as default
+  i as SlugPostContainer,
+  e as default
 };

package/dist/types/layout/Favicon.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+declare function Favicon(): React.JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Favicon>;
+export default _default;

package/dist/types/layout/Layout.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const RootLayout: () => React.JSX.Element;
+export default RootLayout;

package/dist/types/layout/Loading.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const Loading: () => React.JSX.Element;
+export default Loading;

package/dist/types/layout/PreviewComponent.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const PreviewComponent: () => React.JSX.Element;
+export default PreviewComponent;

package/dist/types/layout/index.d.ts

@@ -4,3 +4,7 @@ export * from './containers';
 export * from './Customizer';
 export default ResponsiveContainer;
 export { ScrollToTop };
+export { default as RootLayout } from './Layout';
+export { default as PreviewComponent } from './PreviewComponent';
+export { default as Favicon } from './Favicon';
+export { default as Loading } from './Loading';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devgateway/dvz-ui-react",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -80,7 +80,7 @@
     "string-template": "^1.0.0",
     "topojson-client": "^3.1.0",
     "uuid": "^11.1.0",
-    "@devgateway/wp-react-lib": "0.4.3"
+    "@devgateway/wp-react-lib": "0.4.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.26.0",