@telia-ace/widget-components-grid 1.1.1-rc.2 → 1.1.1-rc.4

package/grid-f0087a03.mjs

@@ -1,549 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import { css as C, ThemeProvider as se } from "@emotion/react";
-import { C as k, u as E, a as j, b as O, c as ie, d as ae, e as M, f as q, g as J, G as Q, h as H, i as Z, j as T, p as ce, k as le, T as ue, l as de, m as me } from "./index-fe430b79.mjs";
-import ee, { useContext as L, useState as v, useCallback as pe, useEffect as g, forwardRef as te, useMemo as ne, Suspense as fe } from "react";
-import "react-dom";
-import { TransitionGroup as he, Transition as ge } from "react-transition-group";
-import w from "@emotion/styled";
-import { Switch as be, Route as X } from "react-router";
-const ye = (e) => e === "entering" || e === "entered", $e = (e) => e === "exiting" || e === "exited", N = {
-  fade: {
-    in: "opacity: 1;",
-    out: "opacity: 0;"
-  },
-  "slide-left": {
-    in: "transform: translateX(0);",
-    out: "transform: translateX(-100%);"
-  },
-  "slide-right": {
-    in: "transform: translateX(0);",
-    out: "transform: translateX(100%);"
-  },
-  "slide-up": {
-    in: "transform: translateY(0);",
-    out: "transform: translateY(100%);"
-  },
-  "slide-down": {
-    in: "transform: translateY(0);",
-    out: "transform: translateY(-100%);"
-  },
-  scale: {
-    in: "transform: scale(1);",
-    out: "transform: scale(0);"
-  }
-}, xe = ["slide-up", "slide-down", "slide-left", "slide-right", "scale"], Y = {
-  compose: (e = "exited", t) => {
-    const { enter: n, exit: r } = t, o = n.transitionKeys.split(" "), s = xe.indexOf(o[0]) > -1 ? "transform" : "opacity";
-    if (ye(e))
-      return o && o.length > 0 ? C`
-                    ${o && o.length > 0 && o.map((a) => N[a] ? N[a].in : "")}
-                    transition: ${s} ${n.duration}ms ${n.easing};
-                ` : "";
-    const i = o && o.length > 0 && C`
-                ${o.map((a) => N[a] ? N[a].out : "")}
-            `;
-    if ($e(e)) {
-      const a = r.transitionKeys.split(" ");
-      return a && a.length > 0 && e === "exiting" ? C`
-                    ${i};
-                    ${a.map((c) => N[c] ? N[c].out : "")}
-                    transition: ${s} ${r.duration}ms ${r.easing};
-                ` : i;
-    }
-  },
-  composeViewTransition: (e, t, n) => {
-    if (t === "slide")
-      return Y.compose(e, {
-        enter: {
-          transitionKeys: n === "forth" ? "slide-right" : "slide-left",
-          duration: 500
-        },
-        exit: {
-          transitionKeys: n === "forth" ? "slide-left" : "slide-right",
-          duration: 500
-        }
-      });
-    if (t === "fade")
-      return Y.compose(e, {
-        enter: {
-          transitionKeys: "fade",
-          duration: 500
-        },
-        exit: {
-          transitionKeys: "fade",
-          duration: 500
-        }
-      });
-  },
-  get: (e) => N[e]
-}, U = (e = {}) => (Object.keys(e).forEach((t) => {
-  (e[t] === null || typeof e[t] > "u") && delete e[t];
-}), e), oe = () => L(k), B = (e, t) => ({
-  id: e.id,
-  type: e.type,
-  name: e.name,
-  branch: t || "default"
-}), Ce = () => {
-  const e = E(), t = j(), [n, r] = v([]), o = O(), s = pe(
-    (i) => {
-      if (t && o.current && i) {
-        const a = t.getBranch(i), c = i.getChildren(a).map((u) => B(u));
-        r(c);
-      }
-    },
-    [o, t, r, e]
-  );
-  return g(() => {
-    e && s(e);
-  }, [e, t]), g(() => {
-    if (t) {
-      const [i, a] = ie(t.events);
-      return i("components:set-layout", (c, u) => {
-        (e === u.node.parent || u.node.parent === t.nodes.root) && s(u.node.parent);
-      }), i("components:node-appended", (c, u) => {
-        (e === u.node.parent || u.node.parent === t.nodes.root) && s(u.node.parent);
-      }), i("components:node-removed", (c, { parentNode: u }) => {
-        (u === e || u === t.nodes.root) && s(u);
-      }), () => {
-        a();
-      };
-    }
-  }, [e, t, s]), n;
-}, ve = () => L(ae), we = (e, t) => {
-  const n = oe(), r = M(), [o, s] = v(void 0), i = O(), a = e || n.type || "";
-  return g(() => {
-    if (a) {
-      let c;
-      return (t || r).getAsync("componentResolver").then((u) => {
-        if (i.current) {
-          const p = u.getComponent(a);
-          s(p);
-        }
-        c = u.registerResolver(a, (p) => {
-          i.current && s(p);
-        });
-      }), () => {
-        c && c();
-      };
-    }
-  }, [i, a, t, r]), o;
-}, Se = (e) => {
-  const t = E(e), n = j(), [r, o] = v({}), s = O();
-  return g(() => {
-    t && s.current && o(t.attributes.layout);
-  }, [t, s]), g(() => {
-    if (n) {
-      const i = n.events.subscribe(
-        "components:layout-changed",
-        (a, c) => {
-          t === c.node && s.current && o(c.node.attributes.layout);
-        }
-      );
-      return () => {
-        i();
-      };
-    }
-  }, [n, s, t]), r;
-}, W = () => L(q), Ne = (e) => {
-  const t = M(), n = J(), [r, o] = v({ name: "", params: {} }), s = O();
-  return g(() => {
-    const i = (e || t).get("$widget");
-    if (!i)
-      return;
-    const { events: a } = i;
-    return a.subscribe("router:change", (u, { next: { routeData: p } }) => {
-      if (s.current) {
-        const { name: d, params: b } = p;
-        U(b), o({ name: d, params: b });
-      }
-    });
-  }, [s, e, t]), g(() => {
-    if (n && n.history && s.current) {
-      const i = n.getRouteData(), { name: a, params: c } = i;
-      U(c), o({ name: a, params: c });
-    }
-  }, [n, s]), r;
-};
-var F = /* @__PURE__ */ ((e) => (e.back = "back", e.forth = "forth", e))(F || {});
-const De = (e, t, n) => typeof n[e] == "number" && typeof n[t] == "number" && n[e] > n[t] ? "back" : "forth", re = ({ views: e, location: t, render: n }) => /* @__PURE__ */ l(
-  be,
-  {
-    location: t && {
-      ...t,
-      pathname: t.pathname.split("?")[0]
-    },
-    children: [
-      ...Object.keys(e).filter((r) => !!e[r].path),
-      ...Object.keys(e).filter((r) => !e[r].path)
-    ].map((r) => {
-      const { path: o } = e[r];
-      return o ? Array.isArray(o) ? o.map((s) => /* @__PURE__ */ l(X, { exact: !0, path: s, render: () => n(r) }, r)) : /* @__PURE__ */ l(X, { exact: !0, path: o, render: () => n(r) }, r) : /* @__PURE__ */ l(X, { render: () => n(r) }, r);
-    })
-  }
-), Pe = w.div`
-  position: relative;
-  width: 100%;
-  flex: 1;
-`, Ae = w(Q)`
-  position: absolute;
-  left: 0;
-  right: 0;
-  ${(e) => !!e.animationCss && e.animationCss}
-  ${(e) => !!e.scrollableCss && e.scrollableCss}
-`, Ve = {
-  index: 1,
-  search: 2,
-  browse: 3,
-  guide: 4,
-  contact: 5,
-  "contact-method": 6,
-  conversation: 7
-}, Re = ({ className: e = "", ...t }) => {
-  const [n, r] = v("index"), [o, s] = v(
-    F.forth
-  ), i = Ne(), a = J(), c = W(), u = H(), p = M(), d = E(), { gap: b = "0" } = u, {
-    columns: D = 1,
-    animation: x = "none",
-    scrollable: f = !1,
-    ...A
-  } = c, [G, V] = Z(f);
-  if (!d || !a)
-    return null;
-  const { location: _ } = a;
-  i.name !== n && i.name !== "" && x && (s(
-    De(n, i.name, Ve)
-  ), r(i.name));
-  const { views: y } = p.get("$settings");
-  if (!Object.keys(y).length)
-    return null;
-  const $ = (m, S, P) => {
-    const h = z(S, P), R = d.getChildren(m)[0];
-    return /* @__PURE__ */ l(
-      Ae,
-      {
-        ...t,
-        ...A,
-        scrollableCss: G,
-        ref: V,
-        columns: D,
-        gap: b,
-        ...h,
-        className: T(e, "humany-view"),
-        children: /* @__PURE__ */ l(I, { id: R.id, branch: "default" })
-      }
-    );
-  }, z = (m, S) => {
-    if (x === "slide" || x === "fade")
-      return {
-        animationCss: Y.composeViewTransition(
-          m,
-          x,
-          S
-        ),
-        "data-state": m
-      };
-  };
-  return /* @__PURE__ */ l(Pe, { className: "humany-animated-view", children: /* @__PURE__ */ l(
-    he,
-    {
-      component: null,
-      childFactory: (m) => ee.cloneElement(m, { direction: o }),
-      children: /* @__PURE__ */ l(
-        ge,
-        {
-          timeout: { enter: 500, exit: 500 },
-          onEnter: (m) => m == null ? void 0 : m.clientHeight,
-          unmountOnExit: !0,
-          direction: F.forth,
-          children: (m, { direction: S }) => /* @__PURE__ */ l(
-            re,
-            {
-              views: y,
-              location: _,
-              render: (P) => $(P, m, S)
-            }
-          )
-        },
-        n
-      )
-    }
-  ) });
-}, Te = w(Q)`
-    ${(e) => !!e.scrollableCss && e.scrollableCss}
-`, Ee = ({ className: e = "", ...t }) => {
-  const n = W(), r = H(), o = M(), s = E(), { views: i } = o.get("$settings"), { gap: a = "0" } = r, { columns: c = 1, animation: u = "none", scrollable: p = !1, ...d } = n, [b, D] = Z(p);
-  return s ? /* @__PURE__ */ l(
-    Te,
-    {
-      ...t,
-      ...d,
-      scrollableCss: b,
-      ref: D,
-      columns: c,
-      gap: a,
-      className: T(e, "humany-view"),
-      children: /* @__PURE__ */ l(
-        re,
-        {
-          views: i,
-          render: (x) => {
-            const f = s.getChildren(x)[0];
-            return /* @__PURE__ */ l(I, { id: f.id, node: f, branch: "default" });
-          }
-        }
-      )
-    }
-  ) : null;
-}, K = (e) => {
-  var t, n;
-  return C`
-    outline: none;
-    box-sizing: border-box;
-    * {
-        box-sizing: border-box;
-        outline: none;
-    }
-
-    grid-column: ${e["data-indent"] ? `${e["data-indent"] + 1} / ${e["data-indent"] + (e["data-width"] || 0) + 1}` : `span ${e["data-width"]}`};
-
-    ${((t = e.theme.fonts) == null ? void 0 : t.type) && `
-    font-family: ${e.theme.fonts.type};
-
-    input, textarea {
-      font-family: ${e.theme.fonts.type};
-    }
-  `}
-
-    ${((n = e.theme.fonts) == null ? void 0 : n.base) && `
-    font-size: ${e.theme.fonts.base};
-  `}
-
-  &:focus-visible {
-        ${ce(e)};
-    }
-`;
-}, Oe = w(Ee)`
-    ${(e) => K(e)}
-`, Me = w(Re)`
-    ${(e) => K(e)}
-`, je = w.div`
-    text-align: center;
-    ${(e) => {
-  var t, n, r;
-  return typeof ((t = e.theme.colors) == null ? void 0 : t.warning) < "u" && C`
-            color: ${(n = e.theme.colors) == null ? void 0 : n.warning};
-            border: 2px dashed ${(r = e.theme.colors) == null ? void 0 : r.warning};
-        `;
-}}
-    ${(e) => typeof e.theme.borderRadius < "u" && `border-radius: ${e.theme.borderRadius};`}
-  ${(e) => K(e)}
-`, Ke = te(
-  ({ className: e = "", children: t, ...n }, r) => {
-    const o = we(), { name: s, type: i, id: a } = oe(), c = ne(() => o ? w(o)`
-                    ${K}
-                    ${le}
-                ` : null, [o]);
-    return typeof o > "u" ? null : o === null || c === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ l(
-      je,
-      {
-        ...n,
-        title: `type: ${i}, definition-id: ${s}, instance-id: ${a}`,
-        className: T(e, "humany-non-resolved-component"),
-        children: /* @__PURE__ */ l(ue, { variant: "h5", children: "Non Resolved Component Type" })
-      }
-    ) : null : /* @__PURE__ */ l(fe, { fallback: null, children: /* @__PURE__ */ l(
-      c,
-      {
-        ref: r,
-        ...n,
-        className: T(
-          e,
-          "humany-component",
-          `humany-component-${s}`
-        ),
-        children: t
-      }
-    ) });
-  }
-), Ge = (e) => {
-  const t = E(e), n = j(), [r, o] = v({}), s = O();
-  return g(() => {
-    t && s.current && o(t.attributes.properties);
-  }, [t, e, s]), g(() => {
-    if (n) {
-      const i = n.events.subscribe(
-        "components:properties-changed",
-        (a, c) => {
-          t === c.node && s.current && o(c.node.attributes.properties);
-        }
-      );
-      return () => {
-        i();
-      };
-    }
-  }, [n, s, e, t]), r;
-}, _e = (e, t) => t ? !0 : typeof e == "string" ? e === "full" : e > 0, I = te(
-  ({
-    className: e = "",
-    id: t,
-    branch: n,
-    node: r,
-    ariaLabel: o,
-    tabIndex: s,
-    context: i,
-    ...a
-  }, c) => {
-    const u = j(), p = M(), [d, b] = v(), D = ve(), x = H(t), f = Ge(t), { size: A = "none", indent: G = 0 } = Se(t), V = _e(A, r);
-    if (g(() => {
-      if (u) {
-        if (t && !r) {
-          const h = u.nodes.get(t);
-          if (h && (b(B(h, n)), V)) {
-            const R = h.mount(p);
-            return () => {
-              R();
-            };
-          }
-        } else if (r) {
-          b(B(r, n));
-          const h = r.mount(p);
-          return () => {
-            h();
-          };
-        }
-      }
-    }, [u, t, r, V]), !d || !V)
-      return null;
-    const _ = { ...x, ...i || {} }, {
-      cardinal: y,
-      fonts: $ = {},
-      accessibility: z = {},
-      ...m
-    } = _, S = {
-      type: $.type,
-      base: $.base || "16px",
-      small: $.small || "0.8em",
-      normal: $.normal || "1em",
-      medium: $.medium || "1.2em",
-      large: $.large || "1.6em",
-      huge: $.huge || "2.5em"
-    }, P = {
-      ...m,
-      fonts: S,
-      accessibility: {
-        ...z
-      }
-    };
-    return typeof y == "number" && (P.sizes = {
-      cardinal: y,
-      small: `${y}px`,
-      normal: `${y * 3}px`,
-      medium: `${y * 5}px`,
-      large: `${y * 8}px`
-    }), /* @__PURE__ */ l(se, { theme: P, children: /* @__PURE__ */ l(k.Provider, { value: d, children: /* @__PURE__ */ l(q.Provider, { value: f, children: (() => {
-      const h = {
-        "data-width": A === "full" ? D : Math.min(A, D),
-        "data-indent": G,
-        "data-name": d.name,
-        "data-node-id": d.id,
-        "data-component-type": d.type,
-        "aria-label": o,
-        tabIndex: s,
-        id: d.id,
-        role: f && f.role,
-        ...a
-      };
-      switch (d.type) {
-        case "view":
-          return typeof f.animation == "string" && f.animation !== "none" ? /* @__PURE__ */ l(Me, { ...h, className: e }) : /* @__PURE__ */ l(Oe, { ...h, className: e });
-        default: {
-          const R = de(f);
-          return /* @__PURE__ */ l(
-            Ke,
-            {
-              ref: c,
-              ...h,
-              ...R,
-              className: e
-            }
-          );
-        }
-      }
-    })() }) }) });
-  }
-);
-ee.lazy(() => import("./detached-component-ccd8259a.mjs"));
-const ze = (e) => {
-  const t = e.map((o) => "min-content").join(" "), n = e[0].split(" ").map((o) => "1fr").join(" "), r = e.map((o) => `'${o}'`).join(" ");
-  return C`
-        grid-template-columns: ${n};
-        grid-template-rows: ${t};
-        grid-template-areas: ${r};
-    `;
-}, Xe = (e) => {
-  const t = Ce(), n = ne(() => Object.entries(e.areas).map(([r, o]) => {
-    const s = t.find((i) => i.name === r);
-    return me(o) ? {
-      name: r,
-      componentDef: s,
-      context: o.context,
-      areaSettings: o.areaSettings,
-      template: o.template,
-      areas: o.areas,
-      gap: o.gap
-    } : {
-      name: r,
-      componentDef: s,
-      areaSettings: o.areaSettings,
-      child: o.child,
-      context: o.context
-    };
-  }), [e, t]);
-  return /* @__PURE__ */ l(
-    Ye,
-    {
-      "data-grid-area": e.gridArea,
-      gridArea: e.gridArea,
-      gap: e.gap,
-      template: e.template,
-      className: T(e.className, "humany-grid"),
-      children: n.map((r) => r.componentDef ? /* @__PURE__ */ l(
-        I,
-        {
-          id: r.componentDef.id,
-          branch: "default",
-          context: {}
-        },
-        r.componentDef.id
-      ) : null)
-    }
-  );
-}, Ye = w.div`
-    display: grid;
-    ${(e) => e.gridArea && C`
-            grid-area: ${e.gridArea};
-        `}
-    ${(e) => ze(e.template)}
-  ${(e) => e.gap && C`
-            grid-gap: ${e.gap}rem;
-        `}
-`, Be = ({ className: e }) => {
-  const t = W();
-  return /* @__PURE__ */ l(
-    Xe,
-    {
-      template: t.template,
-      areas: t.areas,
-      gap: t.gap,
-      areaSettings: t.areaSettings,
-      context: t.context
-    }
-  );
-}, Je = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  default: Be
-}, Symbol.toStringTag, { value: "Module" }));
-export {
-  I as C,
-  Je as g
-};