@telia-ace/widget-ui 1.0.31-next.0 → 1.0.31-next.2

package/dist/index.js

@@ -23,7 +23,7 @@ var re = (e, t, n) => (me(e, typeof t != "symbol" ? t + "" : t, n), n);
 import { Container as ct, WidgetState as lt } from "@webprovisions/platform";
 import r, { forwardRef as N, createContext as X, useContext as K, useState as $, useEffect as v, useRef as R, useCallback as H, useImperativeHandle as Ce, useMemo as se, Component as ut, lazy as mt } from "react";
 import { ComponentPlatform as dt, asDescriptor as ft, createEventSubscriber as ht, ComponentQuery as pt, WidgetRenderState as oe, extendComponent as gt } from "@telia-ace/widget-core";
-import { css as L, keyframes as We } from "@emotion/react";
+import { css as L, keyframes as Ze } from "@emotion/react";
 import y from "@emotion/styled";
 import { kebabCase as Ct, appendClassNames as M, uuid as q, removeNullAndUndefinedValues as De, Logger as de } from "@telia-ace/widget-utilities";
 import { CSSTransition as Ie, Transition as yt } from "react-transition-group";
@@ -210,7 +210,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
 }), Nt = (e) => Tt(e, "a"), Vt = Nt, ae = N((s, o) => {
   var i = s, { className: e, children: t } = i, n = S(i, ["className", "children"]);
   return /* @__PURE__ */ r.createElement(
-    Zt,
+    Wt,
     k(h({
       type: "button",
       className: M(e, "humany-button")
@@ -219,7 +219,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     }),
     t
   );
-}), Zt = y.button`
+}), Wt = y.button`
     -webkit-appearance: button;
     text-transform: none;
     overflow: visible;
@@ -232,7 +232,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     line-height: normal;
     margin: 0;
     padding: 0;
-`, Wt = (s) => {
+`, Zt = (s) => {
   var i = s, {
     onChange: e = () => {
     },
@@ -254,13 +254,13 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
       onChange: (a) => e(a.target.value, a.currentTarget.checked)
     }, V(o))
   );
-}, po = Wt, It = X(new ct()), Ot = X(1), Pe = X({
+}, po = Zt, It = X(new ct()), Ot = X(1), Pe = X({
   id: "",
   type: "",
   name: "",
   branch: ""
-}), Pt = X({}), Ft = X(null), At = X(null), Kt = () => K(Pe), ye = Kt, Yt = () => K(It), Z = Yt, jt = (e, t) => {
-  const n = ye().id, o = Z();
+}), Pt = X({}), Ft = X(null), At = X(null), Kt = () => K(Pe), ye = Kt, Yt = () => K(It), W = Yt, jt = (e, t) => {
+  const n = ye().id, o = W();
   return (s, i) => {
     (t || o).getAsync("actionResolver").then((a) => {
       a.action(e || n, s, i);
@@ -280,7 +280,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     e.current = !1;
   }), []), e;
 }, O = Ut, _t = (e) => {
-  const t = Z(), [n, o] = $(null), s = O();
+  const t = W(), [n, o] = $(null), s = O();
   return v(() => {
     dt.getInstance(e || t).then((i) => {
       s.current && o(i);
@@ -313,7 +313,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     }
   }, [e, t, i]), n;
 }, Co = qt, Qt = () => K(Ot), yo = Qt, Gt = (e, t) => {
-  const n = ye(), o = Z(), [s, i] = $(void 0), a = O(), l = e || n.type || "";
+  const n = ye(), o = W(), [s, i] = $(void 0), a = O(), l = e || n.type || "";
   return v(() => {
     if (l) {
       let u;
@@ -378,7 +378,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     };
   }, [e, n]);
 }, rn = (e) => {
-  const t = Z(), { events: n } = (e || t).get("$widget");
+  const t = W(), { events: n } = (e || t).get("$widget");
   return n;
 }, on = rn, sn = () => {
   const [e, t] = $(!1);
@@ -429,7 +429,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     t.current = e;
   }), t.current;
 }, Fe = ln, un = () => K(Pt), $o = un, mn = (e) => {
-  const [t, n] = $(), o = Z(), s = O();
+  const [t, n] = $(), o = W(), s = O();
   return v(() => {
     let i;
     const a = (e || o).get("$widget");
@@ -456,7 +456,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
     };
   }, [s]), t;
 }, ko = mn, dn = () => K(Ft), Ae = dn, fn = (e) => {
-  const t = Z(), n = Ae(), [o, s] = $({ name: "", params: {} }), i = O();
+  const t = W(), n = Ae(), [o, s] = $({ name: "", params: {} }), i = O();
   return v(() => {
     const a = (e || t).get("$widget");
     if (!a)
@@ -530,7 +530,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
         }
     }
 `, pn = () => {
-  const [e, t] = $(null), n = Z(), o = O();
+  const [e, t] = $(null), n = W(), o = O();
   return v(() => {
     n.get("settings").then((s) => {
       o.current && t(s);
@@ -542,7 +542,7 @@ const Bt = (e) => (t) => /* @__PURE__ */ r.createElement(Hr, { attrs: t, htmlBod
   }, []);
   return [t, o];
 }, Ye = gn, So = (e) => {
-  const t = Z(), n = U(), o = t.get("widgetDOMElement"), [s, i] = $(null), [a, l] = $(null), u = O();
+  const t = W(), n = U(), o = t.get("widgetDOMElement"), [s, i] = $(null), [a, l] = $(null), u = O();
   v(() => {
     if (n && u.current) {
       const m = n.nodes.all.find((d) => d.name === "root-area"), p = n.nodes.all.find((d) => d.type === "view");
@@ -1378,7 +1378,7 @@ const Hn = 300, Tn = ({
   }), v(() => {
     f && c.current ? c.current.focus() : !f && m.current && x && m.current.focus();
   }, [f, c.current, m.current]);
-  const B = Zn[l.type];
+  const B = Wn[l.type];
   return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
     Ie,
     {
@@ -1537,12 +1537,12 @@ const Hn = 300, Tn = ({
     &.humany-drawer-transition-exit-done {
         height: 0;
     }
-`, Zn = {
+`, Wn = {
   ["slide-in-bottom"]: Bn,
   ["slide-in-right"]: zn,
   ["slide-in-left"]: Nn,
   ["slide-in-top"]: Vn
-}, Wn = (e, t, n) => {
+}, Zn = (e, t, n) => {
   const [o, s] = $(0), [i, a] = $(0), l = H(
     (u, c) => {
       if (u.preventDefault(), c) {
@@ -1561,7 +1561,7 @@ const Hn = 300, Tn = ({
     };
     u.left < 0 && (c.x = 0), u.bottom > window.innerHeight && (c.y = 0), c.x !== o && s(c.x), c.y !== i && a(c.y);
   }, [n, e, t]), [{ x: o, y: i }, l];
-}, Xe = Wn, In = r.forwardRef(
+}, Xe = Zn, In = r.forwardRef(
   (a, i) => {
     var l = a, { className: e = "", children: t = null, trigger: n, closeButtonAriaLabel: o } = l, s = S(l, ["className", "children", "trigger", "closeButtonAriaLabel"]);
     const u = R(), c = R(), m = R();
@@ -1665,7 +1665,7 @@ const Hn = 300, Tn = ({
 `, Ue = N(
   (i, s) => {
     var a = i, { htmlParseInstruction: e = null, className: t, html: n } = a, o = S(a, ["htmlParseInstruction", "className", "html"]);
-    const l = Z(), [u, c] = $();
+    const l = W(), [u, c] = $();
     return v(() => {
       const m = zt(l, n), p = k(h(h({}, m), e), {
         transform: h(h({}, m.transform), e == null ? void 0 : e.transform)
@@ -1862,11 +1862,11 @@ const Hn = 300, Tn = ({
     }
   );
   return /* @__PURE__ */ r.createElement("div", { className: M(e, "humany-item-tree") }, o && o(!u(t || [])), t && m(t, 1));
-}, Zo = qn, Qn = N(
+}, Wo = qn, Qn = N(
   (u, l) => {
     var c = u, { className: e, onClick: t = () => {
     }, name: n = "", to: o = "", params: s = {}, children: i } = c, a = S(c, ["className", "onClick", "name", "to", "params", "children"]);
-    const m = Ae(), p = Z();
+    const m = Ae(), p = W();
     if (!m)
       return null;
     let d = "";
@@ -2067,11 +2067,11 @@ const Hn = 300, Tn = ({
     &.humany-overlay-transition-exit-done {
         opacity: 0;
     }
-`, _e = tr, rr = We`
+`, _e = tr, rr = Ze`
   100% {
     transform: rotate(360deg);
   }
-`, or = We`
+`, or = Ze`
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -2157,19 +2157,19 @@ const Hn = 300, Tn = ({
   const a = R(null), [l, u] = $(!1), [c, m] = $(!1), b = o.style || {}, { width: p, height: d } = b, f = S(b, ["width", "height"]), C = H(() => {
     const g = a.current;
     if (g) {
-      const B = window.innerWidth / g.width, z = window.innerHeight / g.height, T = Math.min(B, z);
+      const B = window.innerWidth / g.naturalWidth, z = window.innerHeight / g.naturalHeight, T = Math.min(B, z);
       return z >= 1 && B >= 1 ? 1 : T;
     }
     return 1;
   }, [l, t.src]), x = se(() => {
     const g = a.current;
-    if (g) {
+    if (g && l) {
       if (!c) {
         m(!0);
         const B = C();
         n(B);
       }
-      return g.width >= g.height ? [`${e * g.naturalWidth}px`, "auto"] : ["auto", `${e * g.naturalHeight}px`];
+      return g.naturalWidth >= g.naturalHeight ? [`${e * g.naturalWidth}px`, "auto"] : ["auto", `${e * g.naturalHeight}px`];
     }
     return null;
   }, [e, a, l, t.src]);
@@ -2228,11 +2228,11 @@ const Hn = 300, Tn = ({
     var P, te;
     if (f === null || g.current === null)
       return;
-    const w = g.current.firstElementChild, D = (P = B.current) == null ? void 0 : P.querySelector(".nav-left"), W = (te = B.current) == null ? void 0 : te.querySelector(".nav-right");
+    const w = g.current.firstElementChild, D = (P = B.current) == null ? void 0 : P.querySelector(".nav-left"), Z = (te = B.current) == null ? void 0 : te.querySelector(".nav-right");
     if (x === "Right")
-      ee && W ? W.focus() : J && D && D.focus();
+      ee && Z ? Z.focus() : J && D && D.focus();
     else if (x === "Left")
-      J && D ? D.focus() : ee && W && W.focus();
+      J && D ? D.focus() : ee && Z && Z.focus();
     else {
       if (!w)
         return;
@@ -2262,7 +2262,7 @@ const Hn = 300, Tn = ({
   }, [t]), Y = H(() => {
     const { src: w } = e;
     if (w) {
-      const D = T.findIndex((W, P) => W.src === w);
+      const D = T.findIndex((Z, P) => Z.src === w);
       C(D);
     }
   }, [T, e]), Ge = H((w) => {
@@ -2287,8 +2287,8 @@ const Hn = 300, Tn = ({
     (w) => {
       const D = z.current;
       if (D && c) {
-        const W = w.clientX - l.x, P = w.clientY - l.y;
-        D.scrollTop = l.top - P, D.scrollLeft = l.left - W;
+        const Z = w.clientX - l.x, P = w.clientY - l.y;
+        D.scrollTop = l.top - P, D.scrollLeft = l.left - Z;
       }
     },
     [c, l]
@@ -2694,8 +2694,8 @@ const Hn = 300, Tn = ({
     var p;
     i(), (p = u == null ? void 0 : u.current) == null || p.close();
   }, [i]);
-  return /* @__PURE__ */ r.createElement(Nr, { className: e, trigger: t, ref: u, onOverlayClick: c }, n && /* @__PURE__ */ r.createElement(Ve, null, n), o && /* @__PURE__ */ r.createElement(Ve, null, o), l && /* @__PURE__ */ r.createElement(Vr, { onClick: m }, l), a && /* @__PURE__ */ r.createElement(Zr, { onClick: c }, a));
-}, Wo = zr, Nr = y(Dr)`
+  return /* @__PURE__ */ r.createElement(Nr, { className: e, trigger: t, ref: u, onOverlayClick: c }, n && /* @__PURE__ */ r.createElement(Ve, null, n), o && /* @__PURE__ */ r.createElement(Ve, null, o), l && /* @__PURE__ */ r.createElement(Vr, { onClick: m }, l), a && /* @__PURE__ */ r.createElement(Wr, { onClick: c }, a));
+}, Zo = zr, Nr = y(Dr)`
     display: block;
 
     span {
@@ -2743,7 +2743,7 @@ const Hn = 300, Tn = ({
     &:focus-visible {
         ${F}
     }
-`, Zr = y(ae)`
+`, Wr = y(ae)`
     display: inline-block;
     min-width: 50px;
     ${(e) => {
@@ -2764,12 +2764,12 @@ const Hn = 300, Tn = ({
     &:focus-visible {
         ${F};
     }
-`, Wr = ({
+`, Zr = ({
   header: e = "",
   link: t = "",
   suggestionHeader: n = "",
   suggestion: o = ""
-}) => /* @__PURE__ */ r.createElement(Ir, null, /* @__PURE__ */ r.createElement(Or, null, /* @__PURE__ */ r.createElement(_, { variant: "h2" }, "404")), /* @__PURE__ */ r.createElement(Pr, null, /* @__PURE__ */ r.createElement(_, { variant: "h3" }, e), /* @__PURE__ */ r.createElement(Kr, { routeName: "index", "aria-label": t, text: t })), /* @__PURE__ */ r.createElement(Fr, null, /* @__PURE__ */ r.createElement("span", null, n), /* @__PURE__ */ r.createElement("ul", null, /* @__PURE__ */ r.createElement("li", null, o)))), Io = Wr, Ir = y.div`
+}) => /* @__PURE__ */ r.createElement(Ir, null, /* @__PURE__ */ r.createElement(Or, null, /* @__PURE__ */ r.createElement(_, { variant: "h2" }, "404")), /* @__PURE__ */ r.createElement(Pr, null, /* @__PURE__ */ r.createElement(_, { variant: "h3" }, e), /* @__PURE__ */ r.createElement(Kr, { routeName: "index", "aria-label": t, text: t })), /* @__PURE__ */ r.createElement(Fr, null, /* @__PURE__ */ r.createElement("span", null, n), /* @__PURE__ */ r.createElement("ul", null, /* @__PURE__ */ r.createElement("li", null, o)))), Io = Zr, Ir = y.div`
     display: flex;
     flex-wrap: wrap;
 `, Or = y.div`
@@ -2869,9 +2869,9 @@ const Oo = Ar, Kr = N(
   }
 );
 var Yr = /* @__PURE__ */ ((e) => (e.HH_MM = "hh:mm", e.YYYY_MM_DD = "yyyy-mm-dd", e.YYYY_MM_DD_HH_MM = "yyyy-mm-dd hh:mm", e))(Yr || {});
-const jr = ({ className: e = "", format: t = "hh:mm", timestamp: n }) => /* @__PURE__ */ r.createElement("span", { className: M(e, "humany-timestamp") }, Xr(n, t)), Po = jr, Ze = (e) => `0${e}`.slice(-2);
+const jr = ({ className: e = "", format: t = "hh:mm", timestamp: n }) => /* @__PURE__ */ r.createElement("span", { className: M(e, "humany-timestamp") }, Xr(n, t)), Po = jr, We = (e) => `0${e}`.slice(-2);
 function Xr(e, t) {
-  const n = new Date(e), o = n.toTimeString().split(" ")[0].split(":"), s = o.length > 1 ? `${o[0]}:${o[1]}` : o[0], i = n.getFullYear(), a = n.getMonth() + 1, l = n.getDate(), u = `${i}-${Ze(a)}-${Ze(l)}`;
+  const n = new Date(e), o = n.toTimeString().split(" ")[0].split(":"), s = o.length > 1 ? `${o[0]}:${o[1]}` : o[0], i = n.getFullYear(), a = n.getMonth() + 1, l = n.getDate(), u = `${i}-${We(a)}-${We(l)}`;
   return t === "yyyy-mm-dd" ? u : t === "hh:mm" ? s : `${u} ${s}`;
 }
 const Ur = (i) => {
@@ -3012,7 +3012,7 @@ const Ur = (i) => {
   (l, a) => {
     var u = l, { className: e, children: t, onClick: n = () => {
     }, widgetName: o, activationOptions: s } = u, i = S(u, ["className", "children", "onClick", "widgetName", "activationOptions"]);
-    const c = Z(), m = () => {
+    const c = W(), m = () => {
       const { implementation: f } = c.get("$widget");
       return f.widgets.get(o);
     };
@@ -3060,7 +3060,7 @@ const Ur = (i) => {
   }
 ), Ko = N(
   ({ portalId: e = "humany-widget-overlay-portal", className: t, children: n }, o) => {
-    const s = Z(), i = se(() => {
+    const s = W(), i = se(() => {
       if (!s)
         return null;
       const a = s.get("widgetDOMElement");
@@ -3097,7 +3097,7 @@ export {
   Ot as ColumnContext,
   Pe as ComponentNodeContext,
   Pt as ComponentPropertyContext,
-  Wo as Confirm,
+  Zo as Confirm,
   It as ContainerContext,
   At as ConversationContext,
   Yr as DateFormats,
@@ -3110,7 +3110,7 @@ export {
   jn as Icon,
   Vo as Input,
   _n as ItemList,
-  Zo as ItemTree,
+  Wo as ItemTree,
   Hr as Lightbox,
   we as Link,
   Xn as List,
@@ -3161,7 +3161,7 @@ export {
   ye as useComponentDescriptor,
   be as useComponentNode,
   U as useComponentPlatform,
-  Z as useContainer,
+  W as useContainer,
   en as useContext,
   vo as useConversation,
   Eo as useDispatch,