@telia-ace/widget-types-grid 1.0.30-experimental.10 → 1.0.30-experimental.11

package/dist/index.js

@@ -1,26 +1,1143 @@
-import { C as D, D as N, a as f, N as h, a as u, W as v, s as x, r as y } from "./index.c6989014.js";
-import "@telia-ace/widget-ui";
-import "react";
-import "@emotion/react";
-import "@telia-ace/widget-core";
-import "@emotion/styled";
-import "@telia-ace/widget-utilities";
-import "react-transition-group";
-import "react-router";
-import "@open-wc/lit-helpers";
-import "lit";
-import "@telia-ace/widget-routing";
-import "@telia-ace/widget-services";
-import "@webprovisions/bootstrapping";
-import "@webprovisions/platform";
+var St = Object.defineProperty, At = Object.defineProperties;
+var Dt = Object.getOwnPropertyDescriptors;
+var H = Object.getOwnPropertySymbols;
+var lt = Object.prototype.hasOwnProperty, ut = Object.prototype.propertyIsEnumerable;
+var ct = (e, t, n) => t in e ? St(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, f = (e, t) => {
+  for (var n in t || (t = {}))
+    lt.call(t, n) && ct(e, n, t[n]);
+  if (H)
+    for (var n of H(t))
+      ut.call(t, n) && ct(e, n, t[n]);
+  return e;
+}, C = (e, t) => At(e, Dt(t));
+var N = (e, t) => {
+  var n = {};
+  for (var s in e)
+    lt.call(e, s) && t.indexOf(s) < 0 && (n[s] = e[s]);
+  if (e != null && H)
+    for (var s of H(e))
+      t.indexOf(s) < 0 && ut.call(e, s) && (n[s] = e[s]);
+  return n;
+};
+var dt = (e, t, n) => new Promise((s, o) => {
+  var i = (a) => {
+    try {
+      c(n.next(a));
+    } catch (u) {
+      o(u);
+    }
+  }, r = (a) => {
+    try {
+      c(n.throw(a));
+    } catch (u) {
+      o(u);
+    }
+  }, c = (a) => a.done ? s(a.value) : Promise.resolve(a.value).then(i, r);
+  c((n = n.apply(e, t)).next());
+});
+import { Grid as ft, useRouteData as Mt, useRouter as Nt, useProperties as gt, useContext as st, useContainer as W, useComponentNode as ot, useScroll as yt, transitionComposer as Pt, paddedBorderTabStyle as Lt, useComponent as _t, useComponentDescriptor as kt, filterCssPropsStyle as Rt, Typography as Vt, useComponentPlatform as bt, useIsMounted as It, useColumns as Tt, useLayout as zt, ComponentNodeContext as Bt, ComponentPropertyContext as jt, filterCssProps as Wt } from "@telia-ace/widget-ui";
+import p, { useState as B, forwardRef as wt, useMemo as Ft, Suspense as Gt, useEffect as j } from "react";
+import { css as vt, ThemeProvider as Ht, useTheme as qt } from "@emotion/react";
+import { asDescriptor as U, ComponentPlatform as Et, createComponentModel as Kt, ComponentQuery as Ut, WidgetRenderState as O } from "@telia-ace/widget-core";
+import k from "@emotion/styled";
+import { appendClassNames as Y, notifyDataLoaded as Yt, lock as X, removeNullAndUndefinedValues as ht, uuid as Qt } from "@telia-ace/widget-utilities";
+import { TransitionGroup as Zt, Transition as Jt } from "react-transition-group";
+import { Switch as Xt, Route as tt } from "react-router";
+import { spread as te } from "@open-wc/lit-helpers";
+import { nothing as ee, css as ne, LitElement as se } from "lit";
+import { property as Ct, state as Q, customElement as oe } from "lit/decorators.js";
+import { html as ie, unsafeStatic as re } from "lit/static-html.js";
+import { onWidgetUrl as ae } from "@telia-ace/widget-routing";
+import { readStorage as P, StorageMedium as v, createStorageWriter as I, StorageCategory as T, StorageScope as ce } from "@telia-ace/widget-services";
+import { supportBootstrapping as le } from "@webprovisions/bootstrapping";
+import { WidgetState as ue, WidgetType as de } from "@webprovisions/platform";
+var nt = /* @__PURE__ */ ((e) => (e.back = "back", e.forth = "forth", e))(nt || {});
+const he = (e, t, n) => typeof n[e] == "number" && typeof n[t] == "number" && n[e] > n[t] ? "back" : "forth", pe = ({ views: e, location: t, render: n }) => /* @__PURE__ */ p.createElement(
+  Xt,
+  {
+    location: t && C(f({}, t), {
+      pathname: t.pathname.split("?")[0]
+    })
+  },
+  [
+    ...Object.keys(e).filter((s) => !!e[s].path),
+    ...Object.keys(e).filter((s) => !e[s].path)
+  ].map((s) => {
+    const { path: o } = e[s];
+    return o ? Array.isArray(o) ? o.map((i) => /* @__PURE__ */ p.createElement(tt, { key: s, exact: !0, path: i, render: () => n(s) })) : /* @__PURE__ */ p.createElement(tt, { key: s, exact: !0, path: o, render: () => n(s) }) : /* @__PURE__ */ p.createElement(tt, { key: s, render: () => n(s) });
+  })
+), Ot = pe, me = k.div`
+    position: relative;
+    width: 100%;
+    flex: 1;
+`, fe = k(ft)`
+    position: absolute;
+    left: 0;
+    right: 0;
+    ${(e) => !!e.animationCss && e.animationCss}
+    ${(e) => !!e.scrollableCss && e.scrollableCss}
+`, ge = {
+  index: 1,
+  search: 2,
+  browse: 3,
+  guide: 4,
+  contact: 5,
+  "contact-method": 6,
+  conversation: 7
+}, ye = (n) => {
+  var s = n, { className: e = "" } = s, t = N(s, ["className"]);
+  const [o, i] = B("index"), [r, c] = B(nt.forth), a = Mt(), u = Nt(), d = gt(), l = st(), h = W(), m = ot(), { gap: g = "0" } = l, G = d, { columns: b = 1, animation: y = "none", scrollable: E = !1 } = G, $ = N(G, ["columns", "animation", "scrollable"]), [F, L] = yt(E);
+  if (!m || !u)
+    return null;
+  const { location: at } = u;
+  a.name !== o && a.name !== "" && y && (c(he(o, a.name, ge)), i(a.name));
+  const { views: S } = h.get("$settings");
+  if (!Object.keys(S).length)
+    return null;
+  const A = (w, M, V) => {
+    const x = J(M, V), z = m.getChildren(w)[0];
+    return /* @__PURE__ */ p.createElement(
+      fe,
+      C(f(C(f(f({}, t), $), {
+        scrollableCss: F,
+        ref: L,
+        columns: b,
+        gap: g
+      }), x), {
+        className: Y(e, "humany-view")
+      }),
+      /* @__PURE__ */ p.createElement(it, { id: z.id, branch: "default" })
+    );
+  }, J = (w, M) => {
+    if (y === "slide" || y === "fade")
+      return {
+        animationCss: Pt.composeViewTransition(
+          w,
+          y,
+          M
+        ),
+        ["data-state"]: w
+      };
+  };
+  return /* @__PURE__ */ p.createElement(me, { className: "humany-animated-view" }, /* @__PURE__ */ p.createElement(
+    Zt,
+    {
+      component: null,
+      childFactory: (w) => p.cloneElement(w, { direction: r })
+    },
+    /* @__PURE__ */ p.createElement(
+      Jt,
+      {
+        key: o,
+        timeout: { enter: 500, exit: 500 },
+        onEnter: (w) => w == null ? void 0 : w.clientHeight,
+        unmountOnExit: !0,
+        direction: nt.forth
+      },
+      (w, { direction: M }) => /* @__PURE__ */ p.createElement(
+        Ot,
+        {
+          views: S,
+          location: at,
+          render: (V) => A(V, w, M)
+        }
+      )
+    )
+  ));
+}, be = ye, we = k(ft)`
+    ${(e) => !!e.scrollableCss && e.scrollableCss}
+`, ve = (n) => {
+  var s = n, { className: e = "" } = s, t = N(s, ["className"]);
+  const o = gt(), i = st(), r = W(), c = ot(), { views: a } = r.get("$settings"), { gap: u = "0" } = i, y = o, { columns: d = 1, animation: l = "none", scrollable: h = !1 } = y, m = N(y, ["columns", "animation", "scrollable"]), [g, b] = yt(h);
+  return c ? /* @__PURE__ */ p.createElement(
+    we,
+    C(f(f({}, t), m), {
+      scrollableCss: g,
+      ref: b,
+      columns: d,
+      gap: u,
+      className: Y(e, "humany-view")
+    }),
+    /* @__PURE__ */ p.createElement(
+      Ot,
+      {
+        views: a,
+        render: (E) => {
+          const $ = c.getChildren(E)[0];
+          return /* @__PURE__ */ p.createElement(it, { id: $.id, node: $, branch: "default" });
+        }
+      }
+    )
+  ) : null;
+}, Ee = ve, Z = (e) => {
+  var t, n;
+  return vt`
+    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 {
+        ${Lt(e)};
+    }
+`;
+}, Ce = k(Ee)`
+    ${(e) => Z(e)}
+`, Oe = k(be)`
+    ${(e) => Z(e)}
+`, xe = k.div`
+    text-align: center;
+    ${(e) => {
+  var t, n, s;
+  return typeof ((t = e.theme.colors) == null ? void 0 : t.warning) != "undefined" && vt`
+            color: ${(n = e.theme.colors) == null ? void 0 : n.warning};
+            border: 2px dashed ${(s = e.theme.colors) == null ? void 0 : s.warning};
+        `;
+}}
+    ${(e) => typeof e.theme.borderRadius != "undefined" && `border-radius: ${e.theme.borderRadius};`}
+  ${(e) => Z(e)}
+`, $e = wt(
+  (o, s) => {
+    var i = o, { className: e = "", children: t } = i, n = N(i, ["className", "children"]);
+    const r = _t(), { name: c, type: a, id: u } = kt(), d = Ft(() => r ? k(r)`
+                    ${Z}
+                    ${Rt}
+                ` : null, [r]);
+    return typeof r == "undefined" ? null : r === null || d === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ p.createElement(
+      xe,
+      C(f({}, n), {
+        title: `type: ${a}, definition-id: ${c}, instance-id: ${u}`,
+        className: Y(e, "humany-non-resolved-component")
+      }),
+      /* @__PURE__ */ p.createElement(Vt, { variant: "h5" }, "Non Resolved Component Type")
+    ) : null : /* @__PURE__ */ p.createElement(Gt, { fallback: null }, /* @__PURE__ */ p.createElement(
+      d,
+      C(f({
+        ref: s
+      }, n), {
+        className: Y(
+          e,
+          "humany-component",
+          `humany-component-${c}`
+        )
+      }),
+      t
+    ));
+  }
+), Se = $e, Ae = (e) => {
+  const t = ot(e), n = bt(), [s, o] = B({}), i = It();
+  return j(() => {
+    t && i.current && o(t.attributes.properties);
+  }, [t, e, i]), j(() => {
+    if (n) {
+      const r = n.events.subscribe(
+        "components:properties-changed",
+        (c, a) => {
+          t === a.node && i.current && o(a.node.attributes.properties);
+        }
+      );
+      return () => {
+        r();
+      };
+    }
+  }, [n, i, e, t]), s;
+}, De = (e, t) => t ? !0 : typeof e == "string" ? e === "full" : e > 0, Me = wt(
+  (u, a) => {
+    var d = u, { className: e = "", id: t, branch: n, node: s, ariaLabel: o, tabIndex: i, context: r } = d, c = N(d, ["className", "id", "branch", "node", "ariaLabel", "tabIndex", "context"]);
+    const l = bt(), h = W(), [m, g] = B(), b = Tt(), y = st(t), E = Ae(t), { size: $ = "none", indent: F = 0 } = zt(t), L = De($, s);
+    if (j(() => {
+      if (l) {
+        if (t && !s) {
+          const x = l.nodes.get(t);
+          if (x && (g(U(x, n)), L)) {
+            const z = x.mount(h);
+            return () => {
+              z();
+            };
+          }
+        } else if (s) {
+          g(U(s, n));
+          const x = s.mount(h);
+          return () => {
+            x();
+          };
+        }
+      }
+    }, [l, t, s, L]), !m || !L)
+      return null;
+    const V = f(f({}, y), r || {}), {
+      cardinal: S,
+      fonts: A = {},
+      accessibility: J = {}
+    } = V, G = N(V, [
+      "cardinal",
+      "fonts",
+      "accessibility"
+    ]), w = {
+      type: A.type,
+      base: A.base || "16px",
+      small: A.small || "0.8em",
+      normal: A.normal || "1em",
+      medium: A.medium || "1.2em",
+      large: A.large || "1.6em",
+      huge: A.huge || "2.5em"
+    }, M = C(f({}, G), {
+      fonts: w,
+      accessibility: f({}, J)
+    });
+    return typeof S == "number" && (M.sizes = {
+      cardinal: S,
+      small: `${S}px`,
+      normal: `${S * 3}px`,
+      medium: `${S * 5}px`,
+      large: `${S * 8}px`
+    }), /* @__PURE__ */ p.createElement(Ht, { theme: M }, /* @__PURE__ */ p.createElement(Bt.Provider, { value: m }, /* @__PURE__ */ p.createElement(jt.Provider, { value: E }, (() => {
+      const x = f({
+        "data-width": $ === "full" ? b : Math.min($, b),
+        "data-indent": F,
+        "data-name": m.name,
+        "data-node-id": m.id,
+        "data-component-type": m.type,
+        "aria-label": o,
+        tabIndex: i,
+        id: m.id,
+        role: E && E.role
+      }, c);
+      switch (m.type) {
+        case "view":
+          return typeof E.animation == "string" && E.animation !== "none" ? /* @__PURE__ */ p.createElement(Oe, C(f({}, x), { className: e })) : /* @__PURE__ */ p.createElement(Ce, C(f({}, x), { className: e }));
+        default: {
+          const z = Wt(E);
+          return /* @__PURE__ */ p.createElement(
+            Se,
+            C(f(f({
+              ref: a
+            }, x), z), {
+              className: e
+            })
+          );
+        }
+      }
+    })())));
+  }
+), it = Me, Ne = ({ builder: e }) => {
+  const t = W(), [n, s] = B(null);
+  return j(() => {
+    t.getAsync("components").then((o) => e(o).then((i) => {
+      s(i);
+    }));
+  }, []), j(() => () => {
+    n && t.getAsync("components").then((o) => {
+      o.nodes.detached = o.nodes.detached.filter(
+        (i) => i.id !== n.id
+      );
+    });
+  }, [n]), n ? /* @__PURE__ */ p.createElement(it, { id: n.id, node: n, branch: "default" }) : null;
+}, Pe = Ne, Le = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Pe
+}, Symbol.toStringTag, { value: "Module" })), _e = p.lazy(() => Promise.resolve().then(() => Le)), ke = ({ showSearch: e = !1 }) => {
+  const t = qt(), n = W();
+  return /* @__PURE__ */ p.createElement(p.Suspense, { fallback: null }, /* @__PURE__ */ p.createElement(
+    _e,
+    {
+      builder: (s) => n.get("settings").then((o) => {
+        var u;
+        const { properties: i, context: r } = Object.keys(o.components).reduce(
+          (d, l) => (o.components[l].type === "not-found" && (d.properties = o.components[l].properties, d.context = o.components[l].context), d),
+          { properties: {}, context: {} }
+        );
+        i.showSearch = e;
+        const c = s.createNode("area", { detached: !0 });
+        if (c.name = "not-found-area", c.writeLayout({
+          size: "full"
+        }), e) {
+          const d = Object.keys(o.components).reduce(
+            (h, m) => o.components[m].type === "search" ? o.components[m].properties : h,
+            {}
+          ), l = s.createNode("search", { detached: !0 });
+          l.writeLayout({ size: "full" }), l.writeProperties(f({
+            "css-margin-bottom": ((u = t == null ? void 0 : t.sizes) == null ? void 0 : u.normal) || "15px"
+          }, d)), c.appendChild(l);
+        }
+        const a = s.createNode("not-found", { detached: !0 });
+        return a.writeLayout({ size: "full" }), a.writeProperties(i), a.writeContext(r), c.appendChild(a), c;
+      })
+    }
+  ));
+}, vn = ke, Re = (e) => {
+  class t extends e {
+    requestInstance(s) {
+      const o = new CustomEvent("request-instance", {
+        detail: { key: s },
+        bubbles: !0,
+        composed: !0,
+        cancelable: !0
+      });
+      return this.dispatchEvent(o), o.detail.instance;
+    }
+  }
+  return t;
+};
+var Ve = Object.defineProperty, Ie = Object.getOwnPropertyDescriptor, R = (e, t, n, s) => {
+  for (var o = s > 1 ? void 0 : s ? Ie(t, n) : t, i = e.length - 1, r; i >= 0; i--)
+    (r = e[i]) && (o = (s ? r(t, n, o) : r(o)) || o);
+  return s && o && Ve(t, n, o), o;
+};
+const Te = (e) => `w-${e}`, pt = (e = "none", t = 1) => e === "full" ? t : Math.min(e, t);
+let D = class extends Re(se) {
+  constructor() {
+    super(...arguments), this.listeners = [], this.branch = "default", this._descriptor = null, this._properties = {}, this._context = {}, this._layout = {};
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.container = this.requestInstance("container"), this.container && Promise.all([
+      Et.getInstance(this.container),
+      this.container.getAsync("componentResolver")
+    ]).then((e) => {
+      const t = e[0], n = e[1], s = t.nodes.get(this.nodeId || "");
+      if (s) {
+        this._descriptor = U(s, this.branch), this._properties = s.attributes.properties, this._context = s.attributes.context, this._layout = s.attributes.layout;
+        const o = this.style.getPropertyValue("--columns") ? +this.style.getPropertyValue("--columns") : 1, i = pt(this._layout.size, o), r = typeof this._layout.indent != "undefined" ? `${this._layout.indent + 1} / ${this._layout.indent + (i || 0) + 1}` : `span ${i}`;
+        this.style.setProperty("--gridColumn", r), this.listeners.push(
+          t.events.subscribe(
+            "components:properties-changed",
+            (d, l) => {
+              var h;
+              this.nodeId === ((h = l.node) == null ? void 0 : h.id) && (this._properties = l.node.attributes.properties);
+            }
+          )
+        ), this.listeners.push(
+          t.events.subscribe("components:context-changed", (d, l) => {
+            var h;
+            this.nodeId === ((h = l.node) == null ? void 0 : h.id) && (this._context = l.node.attributes.context);
+          })
+        ), this.listeners.push(
+          t.events.subscribe("components:layout-changed", (d, l) => {
+            var h;
+            this.nodeId === ((h = l.node) == null ? void 0 : h.id) && (this._layout = l.node.attributes.layout);
+          })
+        );
+        const c = s.mount(this.container);
+        if (this.listeners.push(c), !n) {
+          console.warn(
+            "Could not find resolver. Make sure it is registered on the container."
+          );
+          return;
+        }
+        const a = Te(this._descriptor.type);
+        if (customElements.get(a))
+          return;
+        const u = n.getComponent(this._descriptor.type);
+        if (!u) {
+          console.warn("Component is missing or using incorrect import.");
+          return;
+        }
+        return u().then((d) => {
+          customElements.get(a) || customElements.define(a, d.default);
+        });
+      }
+    });
+  }
+  disconnectedCallback() {
+    this.listeners.forEach((e) => {
+      e();
+    });
+  }
+  mapProps() {
+    var t;
+    const e = this.style.getPropertyValue("--columns") ? +this.style.getPropertyValue("--columns") : 1;
+    return Object.entries(this._properties).reduce(
+      (n, [s, o]) => (typeof o == "object" ? n[`.${s}`] = o : n[s] = o, n),
+      {
+        "data-width": pt(this._layout.size, e),
+        "data-indent": (t = this._layout.indent) != null ? t : 0,
+        id: this._descriptor.id,
+        "data-name": this._descriptor.name,
+        "data-component-type": this._descriptor.type,
+        "data-node-id": this.nodeId
+      }
+    );
+  }
+  render() {
+    if (!this._descriptor)
+      return ee;
+    const e = `w-${this._descriptor.type}`, t = this.mapProps();
+    return ie`
+      <${re(e)}
+        ${te(t)}
+        .layout=${this._layout}
+        .context=${this._context}
+      />
+    `;
+  }
+};
+D.styles = [
+  ne`
+      :host {
+        outline: none;
+        box-sizing: border-box;
+      }
+
+      * {
+        box-sizing: border-box;
+        outline: none;
+      }
+
+      grid-column: var(--gridColumn);
+    `
+];
+R([
+  Ct({ type: String })
+], D.prototype, "nodeId", 2);
+R([
+  Ct({ type: String })
+], D.prototype, "branch", 2);
+R([
+  Q()
+], D.prototype, "_descriptor", 2);
+R([
+  Q()
+], D.prototype, "_properties", 2);
+R([
+  Q()
+], D.prototype, "_context", 2);
+R([
+  Q()
+], D.prototype, "_layout", 2);
+D = R([
+  oe("widget-component")
+], D);
+const ze = (e) => `w-${e}`, En = (e, t, n) => dt(void 0, null, function* () {
+  const s = n.nodes.get(e);
+  if (!t) {
+    console.warn("Could not find resolver. Make sure it is registered on the container.");
+    return;
+  }
+  if (!s) {
+    console.warn(`Unable to find node with id: ${e}`);
+    return;
+  }
+  const o = U(s);
+  if (!(o != null && o.type)) {
+    console.warn(`Could not get descriptor for: ${s.name}`);
+    return;
+  }
+  const i = ze(o.type);
+  if (customElements.get(i))
+    return;
+  const r = t.getComponent(o.type);
+  if (!r) {
+    console.warn("Component is missing or using incorrect import.");
+    return;
+  }
+  const c = yield r();
+  if (!customElements.get(i))
+    try {
+      customElements.define(i, c.default);
+    } catch (a) {
+      console.log("error", a);
+    }
+  return customElements.whenDefined(i).then(() => ({
+    nodeId: e,
+    tag: i
+  }));
+}), Be = (e) => {
+  if (e) {
+    const { type: t, content: n } = e;
+    switch (t) {
+      case "FontAwesome":
+        return `<i class="humany-icon fa fa-${n}"></i>`;
+      case "Uri":
+        return `<i class="humany-icon humany-custom-icon" style="background: url(${n}) no-repeat center center;background-size: contain;"></i>`;
+      default:
+        return "";
+    }
+  }
+}, je = (e) => {
+  const t = (o, i) => {
+    !o || (i ? o.classList.add("humany-tabbing") : o.classList.remove("humany-tabbing"));
+  }, n = (o) => {
+    o.key === "Tab" ? t(e, !0) : o.key === "Enter" && document.activeElement && document.activeElement.classList.contains("humany-trigger") || t(e, !1);
+  }, s = (o) => {
+    document.activeElement && document.activeElement.classList.contains("humany-trigger") && document.activeElement.classList.contains("humany-tabbing") || t(e, !1);
+  };
+  return document.addEventListener("keydown", n), document.addEventListener("click", s), () => {
+    document.removeEventListener("keydown", n), document.removeEventListener("click", s);
+  };
+};
+function We(e, t) {
+  const { symbol: n, widgetName: s, label: o = "", ariaLabel: i = "", tooltip: r = "" } = t;
+  e.classList.add("humany-trigger"), e.classList.add(`humany_${s}`), o.length && e.classList.add("humany-has-text"), i.length && !e.getAttribute("aria-label") && e.setAttribute("aria-label", i), i.length && !e.getAttribute("tabindex") && e.setAttribute("tabindex", "0"), r.length && !e.getAttribute("title") && e.setAttribute("title", r);
+  const c = Be(n) || "";
+  return e.innerHTML = `${c}
+          <span class="humany-close">
+            <svg width="18" height="9" viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M9 9C8.81794 9.00045 8.63759 8.96634 8.46939 8.89965C8.3012 8.83295 8.14851 8.735 8.02015 8.61145L0.194523 1.12367C0.068294 0.99862 -0.00155266 0.831133 2.61958e-05 0.657285C0.00160506 0.483436 0.0744832 0.317136 0.202964 0.194202C0.331445 0.0712675 0.505249 0.00153576 0.686941 2.50649e-05C0.868634 -0.00148563 1.04368 0.0653456 1.17437 0.186125L9 7.6739L16.8256 0.186125C16.9563 0.0653456 17.1314 -0.00148563 17.3131 2.50649e-05C17.4948 0.00153576 17.6686 0.0712675 17.797 0.194202C17.9255 0.317136 17.9984 0.483436 18 0.657285C18.0016 0.831133 17.9317 0.99862 17.8055 1.12367L9.97985 8.61145C9.85149 8.735 9.6988 8.83295 9.53061 8.89965C9.36241 8.96634 9.18206 9.00045 9 9Z" fill="white"/>
+            </svg>
+          </span>
+          <span class="humany-loader">
+            <svg viewBox="25 25 50 50">
+              <circle
+                cx="50"
+                cy="50"
+                r="20"
+                fill="none"
+                stroke="#000"
+                stroke-width="2"
+                stroke-miterlimit="10" />
+            </svg>
+          </span>
+          ${o.length ? `<span>${o}</span>` : ""}`, setTimeout(() => e && e.classList.add("humany-rendered")), je(e);
+}
+function Fe(e, t) {
+  e instanceof HTMLElement ? (t && e.setAttribute("title", t), e.classList.remove("humany-active"), e.classList.remove("humany-loading")) : e instanceof Array && e.forEach((n) => {
+    t && n.setAttribute("title", t), n.classList.remove("humany-active"), n.classList.remove("humany-loading");
+  });
+}
+function Ge(e) {
+  e instanceof HTMLElement ? (e.classList.remove("humany-active"), e.classList.add("humany-loading")) : e instanceof Array && e.forEach((t) => {
+    t.classList.remove("humany-active"), t.classList.add("humany-loading");
+  });
+}
+function xt(e, t) {
+  e instanceof HTMLElement ? (t && e.setAttribute("title", t), e.classList.add("humany-active"), e.classList.remove("humany-loading")) : e instanceof Array && e.forEach((n) => {
+    t && n.setAttribute("title", t), n.classList.add("humany-active"), n.classList.remove("humany-loading");
+  });
+}
+var _ = /* @__PURE__ */ ((e) => (e.Inline = "inline", e.Link = "link", e.Badge = "badge", e.Unsupported = "unsupported", e))(_ || {});
+const He = (e, t) => e && t ? "both" : e ? "widgetDOM" : t ? "triggerDOM" : "none", $t = (e) => e ? typeof e == "boolean" && e ? "link" : typeof e == "object" && !Array.isArray(e) ? "badge" : "unsupported" : "inline", qe = (e, t, n, s, o = !1) => {
+  var u, d;
+  const i = He(
+    t,
+    n
+  ), r = $t(s), c = {
+    widgetDOMElement: t ? t.cloneNode(!0) : void 0,
+    triggerDOMElement: n ? n.cloneNode(!0) : void 0
+  }, a = {
+    triggerType: r,
+    cachedOriginals: c,
+    widgetDOMElement: document.createElement("div")
+  };
+  switch (i) {
+    case "both": {
+      a.widgetDOMElement = t || document.createElement("div"), r !== "inline" && (a.triggerDOMElement = n);
+      break;
+    }
+    case "widgetDOM": {
+      if (a.widgetDOMElement = t || document.createElement("div"), r !== "inline") {
+        const l = document.body.appendChild(document.createElement("a"));
+        r === "link" && (l.innerText = e), a.triggerDOMElement = l;
+      }
+      break;
+    }
+    case "triggerDOM": {
+      const l = document.createElement("div");
+      a.widgetDOMElement = l, r === "inline" ? (l.id = (n == null ? void 0 : n.id) || "", o ? (l.style.display = "none", (u = n == null ? void 0 : n.parentNode) == null || u.appendChild(l), a.callback = () => {
+        var h;
+        (h = n == null ? void 0 : n.parentNode) == null || h.replaceChild(
+          l,
+          n
+        ), l.style.display = (n == null ? void 0 : n.style.display) || "block";
+      }) : (d = n == null ? void 0 : n.parentNode) == null || d.replaceChild(
+        l,
+        n
+      ), a.cachedOriginals.widgetDOMElement = n, a.cachedOriginals.triggerDOMElement = void 0) : (a.widgetDOMElement = document.body.appendChild(l), a.triggerDOMElement = n);
+      break;
+    }
+    case "none": {
+      const l = document.body.appendChild(document.createElement("div"));
+      if (a.widgetDOMElement = l, r !== "inline") {
+        const h = document.body.appendChild(document.createElement("a"));
+        r === "link" && (h.innerText = e), a.triggerDOMElement = h;
+      }
+      break;
+    }
+  }
+  return a;
+}, Ke = "modals";
+class Ue {
+  constructor(t, n) {
+    this.options = n, this.unsubscribe = [], this.container = t.createChild(this), this.container.register("widgetDOMElement", this.options.widgetDOMElement), this.container.register("triggerDOMElement", this.options.triggerDOMElement);
+    const s = this.container.get("$widget");
+    this.options.widgetDOMElement.classList.add("humany-widget"), this.options.widgetDOMElement.classList.add(`humany_${s.name}`);
+    const o = t.get("widgetDOMElements") || [];
+    t.register("widgetDOMElements", [
+      ...o,
+      this.options.widgetDOMElement
+    ]);
+  }
+  render() {
+    const { widgetDOMElement: t, triggerDOMElement: n } = this.options, s = this.container.get("$widget");
+    return t.getAttribute("data-rendered") === "true" ? Promise.resolve() : (n && this.options.triggerType === _.Badge && Ge(n), import("./render.4f979aa1.js").then((o) => o.default(s.name, this.container, t)).then(() => {
+      if (t.setAttribute("data-rendered", "true"), n && this.options.triggerType === _.Badge) {
+        const i = this.options.triggerOptions.openTooltip;
+        xt(n, i);
+      }
+      Yt(this.container, t);
+      const o = this.container.get("$environment").widgets.all();
+      P(
+        this.container,
+        Ke,
+        v.Session
+      ).then((i) => {
+        i && i.forEach((r) => {
+          o.find(
+            (c) => c.name === r.name && c.state === "activated"
+          ) && s.events.dispatch("widget:modal-opened", r);
+        });
+      });
+    }));
+  }
+  renderBadge(t) {
+    const { triggerDOMElement: n } = this.options;
+    if (!n)
+      return;
+    n.getAttribute("role") || n.setAttribute("role", "button");
+    const { name: s } = this.container.get("$widget"), { label: o, symbol: i, ariaLabel: r, closedTooltip: c, openTooltip: a } = t, u = { closedTooltip: c, openTooltip: a };
+    this.options.triggerOptions = u;
+    const d = We(n, {
+      label: o,
+      symbol: i,
+      ariaLabel: r,
+      widgetName: s,
+      tooltip: c
+    });
+    this.unsubscribe.push(d);
+  }
+  dispose() {
+    return import("./unmount.b0816844.js").then((t) => {
+      var o, i, r, c;
+      const { triggerDOMElement: n, widgetDOMElement: s } = this.options;
+      t.default(s), this.options.cachedOriginals.widgetDOMElement && s && ((o = s.parentNode) == null || o.replaceChild(
+        this.options.cachedOriginals.widgetDOMElement,
+        s
+      )), this.options.cachedOriginals.triggerDOMElement && n && ((i = n.parentNode) == null || i.replaceChild(
+        this.options.cachedOriginals.triggerDOMElement,
+        n
+      )), this.unsubscribe.forEach((a) => {
+        a();
+      }), (r = s.parentNode) == null || r.removeChild(s), (c = n == null ? void 0 : n.parentNode) == null || c.removeChild(n);
+    });
+  }
+}
+const q = "changesets", Ye = (e) => {
+  const t = { tags: e.tags };
+  return e.context && typeof e.context != "function" && (t.context = e.context), e.properties && typeof e.properties != "function" && (t.properties = e.properties), e.layout && typeof e.layout != "function" && (t.layout = e.layout), t;
+};
+class rt {
+  constructor(t, n) {
+    this.container = t, this.storageWriter = n;
+  }
+  static create(t) {
+    return I(t, q, T.Necessary, {
+      medium: v.Local
+    }).then((n) => new rt(t, n));
+  }
+  write(t, n, s, o) {
+    return X(this)(() => P(
+      this.container,
+      q,
+      v.Local
+    ).then((i = {}) => {
+      const { keys: r = [], items: c = {} } = i, a = r.indexOf(t);
+      return a > -1 && r.splice(a, 1), r.push(t), c[t] = {
+        options: o,
+        attributes: Ye(s),
+        rules: n.rules
+      }, this.storageWriter({ keys: r, items: c });
+    }));
+  }
+  remove(t) {
+    return X(this)(() => P(
+      this.container,
+      q,
+      v.Local
+    ).then((n = {}) => {
+      const { keys: s = [], items: o = {} } = n, i = s.indexOf(t);
+      if (i > -1)
+        return s.splice(i, 1), delete o[t], this.storageWriter(n);
+    }));
+  }
+  load(t) {
+    return X(this)(() => P(
+      this.container,
+      q,
+      v.Local
+    ).then((n = {}) => {
+      const { keys: s = [], items: o = {} } = n;
+      s.forEach((i) => {
+        const r = o[i];
+        if (r) {
+          const { rules: c, attributes: a, options: u } = r;
+          t.write({
+            attributes: a,
+            options: u,
+            target: new Ut(t, c)
+          });
+        }
+      });
+    }));
+  }
+}
+const Qe = (e) => {
+  const { container: t } = e;
+  return rt.create(t).then((n) => {
+    const s = t.get("$settings"), o = { localStorage: n }, i = new Et(e, o), r = Kt(i, s);
+    return e.events.subscribe("widget:state-change", (c, a) => {
+      a.state === ue.Deactivating && r();
+    }), i;
+  });
+}, Ze = (e) => import("@telia-ace/widget-routing").then(({ RoutingService: t, HistoryMode: n }) => e.get("settings").then((s) => {
+  const {
+    routing: { initialPath: o = "/", mode: i = n.scopedHash, basePath: r },
+    views: c
+  } = s;
+  return new t(e, {
+    initialPath: o,
+    mode: i,
+    routes: Object.keys(c).map((u) => ({
+      name: u,
+      path: c[u].path
+    })),
+    basePath: r
+  });
+})), Je = (e) => import("@telia-ace/widget-services").then(({ StorageProvider: t }) => new t()), Xe = (e) => import("@telia-ace/widget-core").then(({ ActionResolver: t }) => new t(e)), tn = (e) => import("@telia-ace/widget-core").then(({ ComponentResolver: t }) => new t(e)), en = (e) => import("@telia-ace/widget-core").then(({ ComponentPlatform: t, createComponentModel: n }) => Qe(e.get("$widget"))), et = "$settings", K = "open", mt = "activeStickyWidget";
+class Cn extends de {
+  constructor(t) {
+    super(t), this.outlets = /* @__PURE__ */ new Map(), this.activated = void 0, this.subs = [], this.handleBootstrapping = (n) => {
+      const s = {
+        triggerDOMElement: n.sourceDOMElement,
+        withRenderState: "storage"
+      };
+      this.container.get("settings").then((o) => {
+        const { activate: i } = o;
+        (typeof i == "undefined" || i === null || i === !0) && (this.activated = (this.activated || this.widget.activate()).then(
+          () => this.attach(s)
+        ));
+      });
+    }, this.container.registerAsync("storage", () => Je(this.container)), this.container.registerFactory("settings", () => P(
+      this.container,
+      et,
+      v.Local
+    ).then((n = {}) => f(f({}, this.container.get("$settings")), n))), le(this, "load", this.handleBootstrapping), this.container.registerAsync(
+      "componentResolver",
+      () => tn(this.container)
+    ), this.container.registerAsync("router", () => Ze(this.container)), this.container.registerAsync("actionResolver", () => Xe(this.container)), this.container.register("matchMedia", window.matchMedia), this.container.registerAsync("components", () => en(this.container));
+  }
+  initialize() {
+    const t = this.container.getManyAsync(
+      "actionResolver",
+      "router",
+      "components"
+    );
+    return Promise.all([t, this.container.get("settings")]).then(
+      ([{ actionResolver: n, router: s, components: o }, i]) => {
+        var a;
+        n.subscribe(
+          this.widget.name,
+          (u, d, l) => this.onAction(d, l)
+        );
+        const r = (u) => {
+          o.nodes.query({ type: "view" }).forEach((d) => {
+            o.setSwitch(d, u);
+          });
+        }, c = ((a = s.getInitialRoute()) == null ? void 0 : a.name) || "index";
+        return r(c), this.events.subscribe("widget:data-loaded", (u, { element: d }) => {
+          this.widget.container.get("seoConfiguration") && this.events.dispatch("widget:preloaded-replaced", {
+            element: d
+          });
+        }), this.events.subscribe(
+          "router:change",
+          (u, { previous: d = { routeData: {} }, next: l = { routeData: {} } }) => {
+            const { routeData: h } = d, { routeData: m } = l, g = Object.keys(i.views).reduce((b, y) => typeof i.views[y].path == "undefined" ? y : b, "");
+            !m.name && g ? r(g) : r(m.name), ht(h && h.params), ht(m && m.params), this.container.getAsync("actionResolver").then((b) => {
+              b.action(this.widget.name, "routeChange", {
+                next: m,
+                previous: h
+              });
+            });
+          }
+        ), s.initialize();
+      }
+    );
+  }
+  attach(t = {}) {
+    return this.container.get("settings").then(({ trigger: n }) => {
+      var h, m;
+      const {
+        widgetDOMElement: s,
+        key: o = Qt(),
+        triggerDOMElement: i,
+        withRenderState: r
+      } = t, a = $t(n) === _.Inline && ((i == null ? void 0 : i.childElementCount) || 0) > 0, u = qe(
+        this.widget.name,
+        s,
+        i,
+        n,
+        a
+      );
+      this.outlets.size < 1 && !r && this.setRenderState("unset");
+      const d = () => {
+        const g = () => b.querySelectorAll("[data-loading=true]").length === 0, [b] = this.widget.container.get("widgetDOMElements"), y = (F, L) => {
+          g() && (u.callback && u.callback(), L.disconnect());
+        }, E = {
+          attributes: !0,
+          subtree: !0,
+          childList: !0
+        };
+        g() && u.callback && u.callback(), new MutationObserver(y).observe(b, E);
+      };
+      a && this.widget.container.getAsync("dataClient").then(({ events: g }) => {
+        g.subscribe("data-client:fetched", (b, y) => {
+          y.unresolvedQueries === 0 && d();
+        });
+      });
+      const l = this.getOrCreateViewOutlet(o, u);
+      if (this.outlets.set(o, l), this.widget.events.dispatch("widget:attached", {}, { bubbles: !0 }), u.triggerType === _.Badge && n && ((h = u.triggerDOMElement) == null || h.setAttribute("aria-expanded", "false"), l == null || l.renderBadge(n)), u.triggerType !== _.Inline && ((m = u.triggerDOMElement) == null || m.addEventListener("click", (g) => {
+        g.preventDefault(), this.container.get("settings").then(({ trigger: b }) => {
+          l.render().then(() => this.renderState()).then((y) => b && b.action && b.action === "hide" ? y === O.open ? this.hide() : this.open() : y === O.open ? this.close() : this.open());
+        });
+      })), this.outlets.size > 1)
+        return this.renderState().then((g) => {
+          this.triggerStateIfApplicable(g);
+        });
+      if (r)
+        return r === "storage" ? this.renderState().then((g) => {
+          if (u.triggerType === _.Inline) {
+            this.triggerStateIfApplicable("open");
+            return;
+          }
+          this.triggerStateIfApplicable(g);
+        }) : this.triggerStateIfApplicable(r);
+    });
+  }
+  detach(t) {
+    if (t) {
+      if (this.outlets.has(t)) {
+        const n = this.outlets.get(t);
+        n == null || n.dispose(), this.outlets.delete(t);
+        return;
+      }
+      process.env.NODE_ENV !== "production" && console.warn(`detach(): Could not find View Outlet with key ${t}`);
+      return;
+    }
+    this.outlets.forEach((n) => {
+      n.dispose();
+    }), this.outlets.clear();
+  }
+  triggerStateIfApplicable(t) {
+    return this.container.getAsync("router").then((n) => {
+      switch (t) {
+        case "closed":
+          this.close();
+          break;
+        case "open":
+          this.open();
+          break;
+        case "hidden":
+          this.hide(), n.start();
+          break;
+        default:
+          return;
+      }
+    });
+  }
+  getOrCreateViewOutlet(t, n) {
+    return this.outlets.has(t) ? this.outlets.get(t) : new Ue(this.container, n);
+  }
+  render(t = {}) {
+    if (process.env.NODE_ENV !== "production" && console.warn("widget.render() is deprecated. Use widget.attach() instead."), t.open) {
+      const n = C(f({}, t), {
+        withRenderState: "open"
+      });
+      return this.attach(n);
+    }
+    return this.attach(t);
+  }
+  activate(t) {
+    t != null && t.override && this.setSettings(() => t.override), t != null && t.apiNotificationPriorityBy && this.container.register("apiNotificationPriorityBy", t.apiNotificationPriorityBy);
+  }
+  setSettings(t) {
+    return Promise.all([
+      this.container.get("settings"),
+      I(this.container, et, T.Necessary, {
+        medium: v.Local
+      })
+    ]).then(([n, s]) => Promise.resolve(t(n)).then((o) => s(o).then(() => {
+      const i = f(f({}, n), o);
+      return this.widget.events.dispatch("widget:settings-updated", i), i;
+    })));
+  }
+  clearSettings() {
+    return I(
+      this.container,
+      et,
+      T.Necessary,
+      { medium: v.Local }
+    ).then((t) => t()).then(() => this.container.get("settings")).then((t) => {
+      this.widget.events.dispatch("widget:settings-updated", t);
+    });
+  }
+  action({ action: t, value: n }) {
+    return this.container.getAsync("actionResolver").then((s) => {
+      s.action(this.widget.name, t, n);
+    });
+  }
+  renderState() {
+    if (ae(this.container))
+      return Promise.resolve(O.open);
+    const t = () => P(
+      this.container,
+      K,
+      v.Session
+    ).then((s = O.closed) => s), n = () => P(
+      this.container,
+      K,
+      v.Session
+    ).then((s = O.closed) => s);
+    return this.container.getAsync("router").then((s) => s.isSticky() ? n().then((o) => o === O.open ? o : t()) : t());
+  }
+  hide() {
+    return this.outlets.size < 1 ? (process.env.NODE_ENV !== "production" && console.warn(
+      "hide(): No-op as no view outlets are registered. Invoke the attach() command first."
+    ), Promise.resolve()) : (this.outlets.forEach((t) => t.render()), this.action({ action: "hide" }).then(() => {
+      this.setTriggerState(!1);
+    }));
+  }
+  open() {
+    return this.outlets.size < 1 ? (process.env.NODE_ENV !== "production" && console.warn(
+      "open(): No-op as no view outlets are registered. Invoke the attach() command first."
+    ), Promise.resolve()) : (this.outlets.forEach((t) => t.render()), this.action({ action: "open" }).then(() => (this.widget.events.dispatch("tracking:widget-rendered", {}), this.onOpen())));
+  }
+  close() {
+    return this.outlets.size < 1 ? (process.env.NODE_ENV !== "production" && console.warn(
+      "close(): No-op as no view outlets are registered. Invoke the attach() command first."
+    ), Promise.resolve()) : this.action({ action: "close" }).then(() => this.onClose());
+  }
+  show() {
+    return process.env.NODE_ENV !== "production" && console.warn(
+      "show(): Command is deprecated and will be removed in the future. Use open() instead."
+    ), this.open();
+  }
+  onAction(t, n) {
+    switch (t) {
+      case "close":
+      case "open":
+      case "hide":
+        const s = t === "open" ? O.open : t === "close" ? O.closed : O.hidden;
+        return this.setRenderState(s).then(() => {
+          this.setTriggerState(s === O.open), s !== O.hidden ? s === O.open ? this.onOpen() : this.onClose() : this.outlets.forEach(
+            (o) => {
+              var i;
+              return (i = o.options.triggerDOMElement) == null ? void 0 : i.setAttribute("aria-expanded", "false");
+            }
+          );
+        });
+    }
+  }
+  setRenderState(t) {
+    const { invoke: n, events: s } = this.container.get("$widget");
+    return Promise.all([
+      I(this.container, K, T.Necessary, {
+        medium: v.Session
+      }),
+      I(this.container, K, T.Necessary, {
+        medium: v.Local,
+        duration: { minutes: 5 }
+      }),
+      this.container.getAsync("router"),
+      n("renderState")
+    ]).then(([o, i, r, c]) => {
+      t === "unset" || !t ? (i(), o()) : (r.isSticky() && i(t), o(t)), s.dispatch("widget:render-state-changed", {
+        previous: c,
+        next: t
+      });
+    });
+  }
+  onOpen() {
+    return this.container.getAsync("router").then((t) => (this.outlets.forEach(
+      (n) => {
+        var s;
+        return (s = n.options.triggerDOMElement) == null ? void 0 : s.setAttribute("aria-expanded", "true");
+      }
+    ), t.start()));
+  }
+  onClose() {
+    const t = this.container.getManyAsync("router", "components");
+    return (() => this.container.get("settings").then((s) => {
+      const { activate: o } = this.container.get("$settings");
+      return s.activate !== o ? this.setSettings(() => Promise.resolve({ activate: o })) : Promise.resolve();
+    }))().then(() => t).then(
+      ({
+        router: s,
+        components: o
+      }) => {
+        const i = o.nodes.visible;
+        return this.outlets.forEach(
+          (r) => {
+            var c;
+            return (c = r.options.triggerDOMElement) == null ? void 0 : c.setAttribute("aria-expanded", "false");
+          }
+        ), i.filter(
+          (r) => r.attributes.properties.animation && r.attributes.properties.animation !== "none"
+        ).length ? new Promise((r) => {
+          setTimeout(() => {
+            r(s);
+          }, 200);
+        }) : Promise.resolve(s);
+      }
+    ).then((s) => s.stop());
+  }
+  setTriggerState(t) {
+    this.outlets.forEach((n) => {
+      const {
+        options: { triggerDOMElement: s, triggerOptions: o }
+      } = n, { openTooltip: i, closedTooltip: r } = o || {};
+      s && (t ? xt(s, i) : Fe(s, r));
+    });
+  }
+  deactivate() {
+    this.subs.forEach((n) => n());
+    const t = [];
+    return this.outlets.forEach((n) => t.push(n.dispose())), P(
+      this.container,
+      mt,
+      v.Local
+    ).then((n) => n === this.widget.name ? I(
+      this.container,
+      mt,
+      T.Necessary,
+      {
+        medium: v.Local,
+        scope: ce.Implementation
+      }
+    ).then((s) => s()).then(() => Promise.all(t)) : Promise.all(t));
+  }
+}
 export {
-  D as Component,
-  N as DetachedComponent,
-  f as GridWidget,
-  h as NotFound,
-  u as Widget,
-  v as WidgetComponent,
-  x as genericComponentStyling,
-  y as resolveComponent
+  it as Component,
+  Pe as DetachedComponent,
+  Cn as GridWidget,
+  vn as NotFound,
+  Cn as Widget,
+  D as WidgetComponent,
+  Z as genericComponentStyling,
+  En as resolveComponent
 };
 //# sourceMappingURL=index.js.map