@telia-ace/widget-types-grid 0.0.1

package/index.mjs

@@ -0,0 +1,1097 @@
+var dt = Object.defineProperty;
+var ht = (e, n, t) => n in e ? dt(e, n, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[n] = t;
+var x = (e, n, t) => (ht(e, typeof n != "symbol" ? n + "" : n, t), t);
+import { jsx as m } from "react/jsx-runtime";
+import { css as nt, ThemeProvider as pt, useTheme as mt } from "@emotion/react";
+import { asDescriptor as X, ComponentPlatform as ft, createComponentModel as gt, ComponentQuery as bt, WidgetRenderState as O } from "@telia-ace/widget-core";
+import { Grid as it, useRouteData as yt, useRouter as wt, useProperties as st, useContext as Y, useContainer as z, useComponentNode as q, useScroll as ot, transitionComposer as vt, paddedBorderTabStyle as Ot, useComponent as Ct, useComponentDescriptor as Et, filterCssPropsStyle as At, Typography as St, useComponentPlatform as rt, useIsMounted as Mt, useColumns as Dt, useLayout as xt, ComponentNodeContext as Nt, ComponentPropertyContext as Lt, filterCssProps as $t } from "@telia-ace/widget-ui";
+import Q, { useState as _, forwardRef as at, useMemo as Pt, Suspense as kt, useEffect as I } from "react";
+import L from "@emotion/styled";
+import { appendClassNames as j, notifyDataLoaded as Rt, lock as H, removeNullAndUndefinedValues as tt, uuid as Vt } from "@telia-ace/widget-utilities";
+import { TransitionGroup as _t, Transition as It } from "react-transition-group";
+import { Switch as zt, Route as F } from "react-router";
+import { onWidgetUrl as Bt } from "@telia-ace/widget-routing";
+import { readStorage as M, StorageMedium as v, createStorageWriter as P, StorageCategory as k, StorageScope as Tt } from "@telia-ace/widget-services";
+import { supportBootstrapping as jt } from "@webprovisions/bootstrapping";
+import { WidgetState as Wt, WidgetType as Gt } from "@webprovisions/platform";
+var U = /* @__PURE__ */ ((e) => (e.back = "back", e.forth = "forth", e))(U || {});
+const Ht = (e, n, t) => typeof t[e] == "number" && typeof t[n] == "number" && t[e] > t[n] ? "back" : "forth", ct = ({ views: e, location: n, render: t }) => /* @__PURE__ */ m(
+  zt,
+  {
+    location: n && {
+      ...n,
+      pathname: n.pathname.split("?")[0]
+    },
+    children: [
+      ...Object.keys(e).filter((i) => !!e[i].path),
+      ...Object.keys(e).filter((i) => !e[i].path)
+    ].map((i) => {
+      const { path: s } = e[i];
+      return s ? Array.isArray(s) ? s.map((o) => /* @__PURE__ */ m(F, { exact: !0, path: o, render: () => t(i) }, i)) : /* @__PURE__ */ m(F, { exact: !0, path: s, render: () => t(i) }, i) : /* @__PURE__ */ m(F, { render: () => t(i) }, i);
+    })
+  }
+), Ft = L.div`
+  position: relative;
+  width: 100%;
+  flex: 1;
+`, Kt = L(it)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  ${(e) => !!e.animationCss && e.animationCss}
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+`, Ut = {
+  index: 1,
+  search: 2,
+  browse: 3,
+  guide: 4,
+  contact: 5,
+  "contact-method": 6,
+  conversation: 7
+}, Yt = ({ className: e = "", ...n }) => {
+  const [t, i] = _("index"), [s, o] = _(
+    U.forth
+  ), r = yt(), a = wt(), c = st(), p = Y(), u = z(), l = q(), { gap: d = "0" } = p, {
+    columns: f = 1,
+    animation: g = "none",
+    scrollable: h = !1,
+    ...b
+  } = c, [y, A] = ot(h);
+  if (!l || !a)
+    return null;
+  const { location: R } = a;
+  r.name !== t && r.name !== "" && g && (o(
+    Ht(t, r.name, Ut)
+  ), i(r.name));
+  const { views: S } = u.get("$settings");
+  if (!Object.keys(S).length)
+    return null;
+  const C = (w, D, $) => {
+    const E = G(D, $), V = l.getChildren(w)[0];
+    return /* @__PURE__ */ m(
+      Kt,
+      {
+        ...n,
+        ...b,
+        scrollableCss: y,
+        ref: A,
+        columns: f,
+        gap: d,
+        ...E,
+        className: j(e, "humany-view"),
+        children: /* @__PURE__ */ m(Z, { id: V.id, branch: "default" })
+      }
+    );
+  }, G = (w, D) => {
+    if (g === "slide" || g === "fade")
+      return {
+        animationCss: vt.composeViewTransition(
+          w,
+          g,
+          D
+        ),
+        "data-state": w
+      };
+  };
+  return /* @__PURE__ */ m(Ft, { className: "humany-animated-view", children: /* @__PURE__ */ m(
+    _t,
+    {
+      component: null,
+      childFactory: (w) => Q.cloneElement(w, { direction: s }),
+      children: /* @__PURE__ */ m(
+        It,
+        {
+          timeout: { enter: 500, exit: 500 },
+          onEnter: (w) => w == null ? void 0 : w.clientHeight,
+          unmountOnExit: !0,
+          direction: U.forth,
+          children: (w, { direction: D }) => /* @__PURE__ */ m(
+            ct,
+            {
+              views: S,
+              location: R,
+              render: ($) => C($, w, D)
+            }
+          )
+        },
+        t
+      )
+    }
+  ) });
+}, qt = L(it)`
+  ${(e) => !!e.scrollableCss && e.scrollableCss}
+`, Qt = ({ className: e = "", ...n }) => {
+  const t = st(), i = Y(), s = z(), o = q(), { views: r } = s.get("$settings"), { gap: a = "0" } = i, {
+    columns: c = 1,
+    animation: p = "none",
+    scrollable: u = !1,
+    ...l
+  } = t, [d, f] = ot(u);
+  return o ? /* @__PURE__ */ m(
+    qt,
+    {
+      ...n,
+      ...l,
+      scrollableCss: d,
+      ref: f,
+      columns: c,
+      gap: a,
+      className: j(e, "humany-view"),
+      children: /* @__PURE__ */ m(
+        ct,
+        {
+          views: r,
+          render: (g) => {
+            const h = o.getChildren(g)[0];
+            return /* @__PURE__ */ m(Z, { id: h.id, node: h, branch: "default" });
+          }
+        }
+      )
+    }
+  ) : null;
+}, W = (e) => {
+  var n, t;
+  return nt`
+  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"]}`};
+
+  ${((n = e.theme.fonts) == null ? void 0 : n.type) && `
+    font-family: ${e.theme.fonts.type};
+
+    input, textarea {
+      font-family: ${e.theme.fonts.type};
+    }
+  `}
+
+  ${((t = e.theme.fonts) == null ? void 0 : t.base) && `
+    font-size: ${e.theme.fonts.base};
+  `}
+
+  &:focus-visible {
+    ${Ot(e)};
+  }
+`;
+}, Zt = L(Qt)`
+  ${(e) => W(e)}
+`, Jt = L(Yt)`
+  ${(e) => W(e)}
+`, Xt = L.div`
+  text-align: center;
+  ${(e) => {
+  var n, t, i;
+  return typeof ((n = e.theme.colors) == null ? void 0 : n.warning) < "u" && nt`
+      color: ${(t = e.theme.colors) == null ? void 0 : t.warning};
+      border: 2px dashed ${(i = e.theme.colors) == null ? void 0 : i.warning};
+    `;
+}}
+  ${(e) => typeof e.theme.borderRadius < "u" && `border-radius: ${e.theme.borderRadius};`}
+  ${(e) => W(e)}
+`, te = at(
+  ({ className: e = "", children: n, ...t }, i) => {
+    const s = Ct(), { name: o, type: r, id: a } = Et(), c = Pt(() => s ? L(s)`
+          ${W}
+          ${At}
+        ` : null, [s]);
+    return typeof s > "u" ? null : s === null || c === null ? process.env.NODE_ENV !== "production" ? /* @__PURE__ */ m(
+      Xt,
+      {
+        ...t,
+        title: `type: ${r}, definition-id: ${o}, instance-id: ${a}`,
+        className: j(
+          e,
+          "humany-non-resolved-component"
+        ),
+        children: /* @__PURE__ */ m(St, { variant: "h5", children: "Non Resolved Component Type" })
+      }
+    ) : null : /* @__PURE__ */ m(kt, { fallback: null, children: /* @__PURE__ */ m(
+      c,
+      {
+        ref: i,
+        ...t,
+        className: j(
+          e,
+          "humany-component",
+          `humany-component-${o}`
+        ),
+        children: n
+      }
+    ) });
+  }
+), ee = (e) => {
+  const n = q(e), t = rt(), [i, s] = _({}), o = Mt();
+  return I(() => {
+    n && o.current && s(n.attributes.properties);
+  }, [n, e, o]), I(() => {
+    if (t) {
+      const r = t.events.subscribe(
+        "components:properties-changed",
+        (a, c) => {
+          n === c.node && o.current && s(c.node.attributes.properties);
+        }
+      );
+      return () => {
+        r();
+      };
+    }
+  }, [t, o, e, n]), i;
+}, ne = (e, n) => n ? !0 : typeof e == "string" ? e === "full" : e > 0, Z = at(
+  ({
+    className: e = "",
+    id: n,
+    branch: t,
+    node: i,
+    ariaLabel: s,
+    tabIndex: o,
+    context: r,
+    ...a
+  }, c) => {
+    const p = rt(), u = z(), [l, d] = _(), f = Dt(), g = Y(n), h = ee(n), { size: b = "none", indent: y = 0 } = xt(n), A = ne(b, i);
+    if (I(() => {
+      if (p) {
+        if (n && !i) {
+          const E = p.nodes.get(n);
+          if (E && (d(X(E, t)), A)) {
+            const V = E.mount(u);
+            return () => {
+              V();
+            };
+          }
+        } else if (i) {
+          d(X(i, t));
+          const E = i.mount(u);
+          return () => {
+            E();
+          };
+        }
+      }
+    }, [p, n, i, A]), !l || !A)
+      return null;
+    const R = { ...g, ...r || {} }, {
+      cardinal: S,
+      fonts: C = {},
+      accessibility: G = {},
+      ...w
+    } = R, D = {
+      type: C.type,
+      base: C.base || "16px",
+      small: C.small || "0.8em",
+      normal: C.normal || "1em",
+      medium: C.medium || "1.2em",
+      large: C.large || "1.6em",
+      huge: C.huge || "2.5em"
+    }, $ = {
+      ...w,
+      fonts: D,
+      accessibility: {
+        ...G
+      }
+    };
+    return typeof S == "number" && ($.sizes = {
+      cardinal: S,
+      small: `${S}px`,
+      normal: `${S * 3}px`,
+      medium: `${S * 5}px`,
+      large: `${S * 8}px`
+    }), /* @__PURE__ */ m(pt, { theme: $, children: /* @__PURE__ */ m(Nt.Provider, { value: l, children: /* @__PURE__ */ m(Lt.Provider, { value: h, children: (() => {
+      const E = {
+        "data-width": b === "full" ? f : Math.min(b, f),
+        "data-indent": y,
+        "data-name": l.name,
+        "data-node-id": l.id,
+        "data-component-type": l.type,
+        "aria-label": s,
+        tabIndex: o,
+        id: l.id,
+        role: h.role ? h && h.role : null,
+        ...a
+      };
+      switch (l.type) {
+        case "view":
+          return typeof h.animation == "string" && h.animation !== "none" ? /* @__PURE__ */ m(Jt, { ...E, className: e }) : /* @__PURE__ */ m(Zt, { ...E, className: e });
+        default: {
+          const V = $t(h);
+          return /* @__PURE__ */ m(
+            te,
+            {
+              ref: c,
+              ...E,
+              ...V,
+              className: e
+            }
+          );
+        }
+      }
+    })() }) }) });
+  }
+), ie = ({ builder: e }) => {
+  const n = z(), [t, i] = _(null);
+  return I(() => {
+    n.getAsync("components").then((s) => e(s).then((o) => {
+      i(o);
+    }));
+  }, []), I(() => () => {
+    t && n.getAsync("components").then((s) => {
+      s.nodes.detached = s.nodes.detached.filter(
+        (o) => o.id !== t.id
+      );
+    });
+  }, [t]), t ? /* @__PURE__ */ m(Z, { id: t.id, node: t, branch: "default" }) : null;
+}, se = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: ie
+}, Symbol.toStringTag, { value: "Module" })), oe = Q.lazy(() => Promise.resolve().then(() => se)), _e = ({ showSearch: e = !1 }) => {
+  const n = mt(), t = z();
+  return /* @__PURE__ */ m(Q.Suspense, { fallback: null, children: /* @__PURE__ */ m(
+    oe,
+    {
+      builder: (i) => t.get("settings").then((s) => {
+        var p;
+        const { properties: o, context: r } = Object.keys(
+          s.components
+        ).reduce(
+          (u, l) => (s.components[l].type === "not-found" && (u.properties = s.components[l].properties, u.context = s.components[l].context), u),
+          { properties: {}, context: {} }
+        );
+        o.showSearch = e;
+        const a = i.createNode("area", { detached: !0 });
+        if (a.name = "not-found-area", a.writeLayout({
+          size: "full"
+        }), e) {
+          const u = Object.keys(
+            s.components
+          ).reduce((d, f) => s.components[f].type === "search" ? s.components[f].properties : d, {}), l = i.createNode("search", {
+            detached: !0
+          });
+          l.writeLayout({ size: "full" }), l.writeProperties({
+            "css-margin-bottom": ((p = n == null ? void 0 : n.sizes) == null ? void 0 : p.normal) || "15px",
+            ...u
+          }), a.appendChild(l);
+        }
+        const c = i.createNode("not-found", {
+          detached: !0
+        });
+        return c.writeLayout({ size: "full" }), c.writeProperties(o), c.writeContext(r), a.appendChild(c), a;
+      })
+    }
+  ) });
+}, re = (e) => {
+  if (e) {
+    const { type: n, content: t } = e;
+    switch (n) {
+      case "FontAwesome":
+        return `<i class="humany-icon fa fa-${t}"></i>`;
+      case "Uri":
+        return `<i class="humany-icon humany-custom-icon" style="background: url(${t}) no-repeat center center;background-size: contain;"></i>`;
+      default:
+        return "";
+    }
+  }
+}, ae = (e) => {
+  const n = (s, o) => {
+    s && (o ? s.classList.add("humany-tabbing") : s.classList.remove("humany-tabbing"));
+  }, t = (s) => {
+    s.key === "Tab" ? n(e, !0) : s.key === "Enter" && document.activeElement && document.activeElement.classList.contains("humany-trigger") || n(e, !1);
+  }, i = (s) => {
+    document.activeElement && document.activeElement.classList.contains("humany-trigger") && document.activeElement.classList.contains("humany-tabbing") || n(e, !1);
+  };
+  return document.addEventListener("keydown", t), document.addEventListener("click", i), () => {
+    document.removeEventListener("keydown", t), document.removeEventListener("click", i);
+  };
+};
+function ce(e, n) {
+  const {
+    symbol: t,
+    widgetName: i,
+    label: s = "",
+    ariaLabel: o = "",
+    tooltip: r = ""
+  } = n;
+  e.classList.add("humany-trigger"), e.classList.add(`humany_${i}`), s.length && e.classList.add("humany-has-text"), o.length && !e.getAttribute("aria-label") && e.setAttribute("aria-label", o), o.length && !e.getAttribute("tabindex") && e.setAttribute("tabindex", "0"), r.length && !e.getAttribute("title") && e.setAttribute("title", r);
+  const a = re(t) || "";
+  return e.innerHTML = `${a}
+          <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>
+          ${s.length ? `<span>${s}</span>` : ""}`, setTimeout(
+    () => e && e.classList.add("humany-rendered")
+  ), ae(e);
+}
+function le(e, n) {
+  e instanceof HTMLElement ? (n && e.setAttribute("title", n), e.classList.remove("humany-active"), e.classList.remove("humany-loading")) : e instanceof Array && e.forEach((t) => {
+    n && t.setAttribute("title", n), t.classList.remove("humany-active"), t.classList.remove("humany-loading");
+  });
+}
+function ue(e) {
+  e instanceof HTMLElement ? (e.classList.remove("humany-active"), e.classList.add("humany-loading")) : e instanceof Array && e.forEach((n) => {
+    n.classList.remove("humany-active"), n.classList.add("humany-loading");
+  });
+}
+function lt(e, n) {
+  e instanceof HTMLElement ? (n && e.setAttribute("title", n), e.classList.add("humany-active"), e.classList.remove("humany-loading")) : e instanceof Array && e.forEach((t) => {
+    n && t.setAttribute("title", n), t.classList.add("humany-active"), t.classList.remove("humany-loading");
+  });
+}
+var N = /* @__PURE__ */ ((e) => (e.Inline = "inline", e.Link = "link", e.Badge = "badge", e.Unsupported = "unsupported", e))(N || {});
+const de = (e, n) => e && n ? "both" : e ? "widgetDOM" : n ? "triggerDOM" : "none", ut = (e) => e ? typeof e == "boolean" && e ? "link" : typeof e == "object" && !Array.isArray(e) ? "badge" : "unsupported" : "inline", he = (e, n, t, i, s = !1) => {
+  var p, u;
+  const o = de(
+    n,
+    t
+  ), r = ut(i), a = {
+    widgetDOMElement: n ? n.cloneNode(!0) : void 0,
+    triggerDOMElement: t ? t.cloneNode(!0) : void 0
+  }, c = {
+    triggerType: r,
+    cachedOriginals: a,
+    widgetDOMElement: document.createElement("div")
+  };
+  switch (o) {
+    case "both": {
+      c.widgetDOMElement = n || document.createElement("div"), r !== "inline" && (c.triggerDOMElement = t);
+      break;
+    }
+    case "widgetDOM": {
+      if (c.widgetDOMElement = n || document.createElement("div"), r !== "inline") {
+        const l = document.body.appendChild(
+          document.createElement("a")
+        );
+        r === "link" && (l.innerText = e), c.triggerDOMElement = l;
+      }
+      break;
+    }
+    case "triggerDOM": {
+      const l = document.createElement("div");
+      c.widgetDOMElement = l, r === "inline" ? (l.id = (t == null ? void 0 : t.id) || "", s ? (l.style.display = "none", (p = t == null ? void 0 : t.parentNode) == null || p.appendChild(l), c.callback = () => {
+        var d;
+        (d = t == null ? void 0 : t.parentNode) == null || d.replaceChild(
+          l,
+          t
+        ), l.style.display = (t == null ? void 0 : t.style.display) || "block";
+      }) : (u = t == null ? void 0 : t.parentNode) == null || u.replaceChild(
+        l,
+        t
+      ), c.cachedOriginals.widgetDOMElement = t, c.cachedOriginals.triggerDOMElement = void 0) : (c.widgetDOMElement = document.body.appendChild(l), c.triggerDOMElement = t);
+      break;
+    }
+    case "none": {
+      const l = document.body.appendChild(
+        document.createElement("div")
+      );
+      if (c.widgetDOMElement = l, r !== "inline") {
+        const d = document.body.appendChild(
+          document.createElement("a")
+        );
+        r === "link" && (d.innerText = e), c.triggerDOMElement = d;
+      }
+      break;
+    }
+  }
+  return c;
+}, pe = "modals";
+class me {
+  constructor(n, t) {
+    x(this, "container");
+    x(this, "unsubscribe", []);
+    var a, c, p, u, l, d, f;
+    this.options = t, this.container = n.createChild(this), this.container.register("widgetDOMElement", this.options.widgetDOMElement), this.container.register(
+      "triggerDOMElement",
+      this.options.triggerDOMElement
+    );
+    const i = this.container.get("$widget"), s = n.get("$settings");
+    (a = this.options.widgetDOMElement) == null || a.classList.add("humany-widget"), (c = this.options.widgetDOMElement) == null || c.setAttribute("role", "region"), (u = this.options.widgetDOMElement) == null || u.setAttribute(
+      "aria-label",
+      ((p = s == null ? void 0 : s.data) == null ? void 0 : p.widgetAriaLabel) ?? "Widget"
+    ), this.options.triggerDOMElement && ((l = this.options.widgetDOMElement) == null || l.setAttribute(
+      "id",
+      `humany_widget_${i.name}`
+    ), (d = this.options.triggerDOMElement) == null || d.setAttribute(
+      "aria-controls",
+      `humany_widget_${i.name}`
+    )), (f = this.options.widgetDOMElement) == null || f.classList.add(`humany_${i.name}`), new MutationObserver(() => {
+      Array.from(
+        this.options.widgetDOMElement.querySelectorAll('[aria-label=""]')
+      ).forEach((g) => g.removeAttribute("aria-label"));
+    }).observe(this.options.widgetDOMElement, {
+      childList: !0,
+      subtree: !0
+    });
+    const r = n.get("widgetDOMElements") || [];
+    n.register("widgetDOMElements", [
+      ...r,
+      this.options.widgetDOMElement
+    ]);
+  }
+  /**
+   * Renders the view outlet to the DOM.
+   */
+  render() {
+    const { widgetDOMElement: n, triggerDOMElement: t } = this.options, i = this.container.get("$widget");
+    return n.getAttribute("data-rendered") === "true" ? Promise.resolve() : (t && this.options.triggerType === N.Badge && ue(t), import("./render-9309d354.mjs").then((s) => s.default(this.container, n)).then(() => {
+      if (n.setAttribute("data-rendered", "true"), t && this.options.triggerType === N.Badge) {
+        const o = this.options.triggerOptions.openTooltip;
+        lt(t, o);
+      }
+      Rt(this.container, n);
+      const s = this.container.get("$environment").widgets.all();
+      M(
+        this.container,
+        pe,
+        v.Session
+      ).then((o) => {
+        o && o.forEach((r) => {
+          s.find(
+            (a) => a.name === r.name && a.state === "activated"
+          ) && i.events.dispatch("widget:modal-opened", r);
+        });
+      });
+    }));
+  }
+  renderBadge(n) {
+    const { triggerDOMElement: t } = this.options;
+    if (!t)
+      return;
+    t.getAttribute("role") || t.setAttribute("role", "button");
+    const { name: i } = this.container.get("$widget"), { label: s, symbol: o, ariaLabel: r, closedTooltip: a, openTooltip: c } = n, p = { closedTooltip: a, openTooltip: c };
+    this.options.triggerOptions = p;
+    const u = ce(t, {
+      label: s,
+      symbol: o,
+      ariaLabel: r,
+      widgetName: i,
+      tooltip: a
+    });
+    this.unsubscribe.push(u);
+  }
+  dispose() {
+    return import("./unmount-063d8ea3.mjs").then((n) => {
+      var s, o, r, a;
+      const { triggerDOMElement: t, widgetDOMElement: i } = this.options;
+      n.default(i), this.options.cachedOriginals.widgetDOMElement && i && ((s = i.parentNode) == null || s.replaceChild(
+        this.options.cachedOriginals.widgetDOMElement,
+        i
+      )), this.options.cachedOriginals.triggerDOMElement && t && ((o = t.parentNode) == null || o.replaceChild(
+        this.options.cachedOriginals.triggerDOMElement,
+        t
+      )), this.unsubscribe.forEach((c) => {
+        c();
+      }), (r = i.parentNode) == null || r.removeChild(i), (a = t == null ? void 0 : t.parentNode) == null || a.removeChild(t);
+    });
+  }
+}
+const B = "changesets", fe = (e) => {
+  const n = { tags: e.tags };
+  return e.context && typeof e.context != "function" && (n.context = e.context), e.properties && typeof e.properties != "function" && (n.properties = e.properties), e.layout && typeof e.layout != "function" && (n.layout = e.layout), n;
+};
+class J {
+  constructor(n, t) {
+    this.container = n, this.storageWriter = t;
+  }
+  static create(n) {
+    return P(
+      n,
+      B,
+      k.Necessary,
+      {
+        medium: v.Local
+      }
+    ).then(
+      (t) => new J(n, t)
+    );
+  }
+  write(n, t, i, s) {
+    return H(this)(() => M(
+      this.container,
+      B,
+      v.Local
+    ).then((o = {}) => {
+      const { keys: r = [], items: a = {} } = o, c = r.indexOf(n);
+      return c > -1 && r.splice(c, 1), r.push(n), a[n] = {
+        options: s,
+        attributes: fe(i),
+        rules: t.rules
+      }, this.storageWriter({ keys: r, items: a });
+    }));
+  }
+  remove(n) {
+    return H(this)(() => M(
+      this.container,
+      B,
+      v.Local
+    ).then((t = {}) => {
+      const { keys: i = [], items: s = {} } = t, o = i.indexOf(n);
+      if (o > -1)
+        return i.splice(o, 1), delete s[n], this.storageWriter(t);
+    }));
+  }
+  load(n) {
+    return H(this)(() => M(
+      this.container,
+      B,
+      v.Local
+    ).then((t = {}) => {
+      const { keys: i = [], items: s = {} } = t;
+      i.forEach((o) => {
+        const r = s[o];
+        if (r) {
+          const { rules: a, attributes: c, options: p } = r;
+          n.write({
+            attributes: c,
+            options: p,
+            target: new bt(n, a)
+          });
+        }
+      });
+    }));
+  }
+}
+const ge = (e) => {
+  const { container: n } = e;
+  return J.create(n).then(
+    (t) => {
+      const i = n.get("$settings"), s = { localStorage: t }, o = new ft(e, s), r = gt(o, i);
+      return e.events.subscribe(
+        "widget:state-change",
+        (a, c) => {
+          c.state === Wt.Deactivating && r();
+        }
+      ), o;
+    }
+  );
+}, be = (e) => import("@telia-ace/widget-routing").then(
+  ({ RoutingService: n, HistoryMode: t }) => e.get("settings").then((i) => {
+    const {
+      routing: {
+        initialPath: s = "/",
+        mode: o = t.scopedHash,
+        basePath: r
+      },
+      views: a
+    } = i;
+    return new n(e, {
+      initialPath: s,
+      mode: o,
+      routes: Object.keys(a).map((p) => ({
+        name: p,
+        path: a[p].path
+      })),
+      basePath: r
+    });
+  })
+), ye = (e) => import("@telia-ace/widget-services").then(({ StorageProvider: n }) => new n()), we = (e) => import("@telia-ace/widget-core").then(({ ActionResolver: n }) => new n(e)), ve = (e) => import("@telia-ace/widget-core").then(({ ComponentResolver: n }) => new n(e)), Oe = (e) => import("@telia-ace/widget-core").then(
+  ({ ComponentPlatform: n, createComponentModel: t }) => ge(e.get("$widget"))
+), K = "$settings", T = "open", et = "activeStickyWidget";
+class Ie extends Gt {
+  constructor(t) {
+    super(t);
+    x(this, "outlets", /* @__PURE__ */ new Map());
+    x(this, "activated");
+    x(this, "subs", []);
+    x(this, "handleBootstrapping", (t) => {
+      const i = {
+        triggerDOMElement: t.sourceDOMElement,
+        withRenderState: "storage"
+        /* Storage */
+      };
+      this.container.get("settings").then((s) => {
+        const { activate: o } = s;
+        (typeof o > "u" || o === null || o === !0) && (this.activated = (this.activated || this.widget.activate()).then(
+          () => this.attach(i)
+        ));
+      });
+    });
+    this.container.registerAsync(
+      "storage",
+      () => ye(this.container)
+    ), this.container.registerFactory("settings", () => M(
+      this.container,
+      K,
+      v.Local
+    ).then((i = {}) => ({
+      ...this.container.get("$settings"),
+      ...i
+    }))), jt(this, "load", this.handleBootstrapping), this.container.registerAsync(
+      "componentResolver",
+      () => ve(this.container)
+    ), this.container.registerAsync(
+      "router",
+      () => be(this.container)
+    ), this.container.registerAsync(
+      "actionResolver",
+      () => we(this.container)
+    ), this.container.register("matchMedia", window.matchMedia), this.container.registerAsync(
+      "components",
+      () => Oe(this.container)
+    );
+  }
+  initialize() {
+    const t = this.container.getManyAsync(
+      "actionResolver",
+      "router",
+      "components"
+    ), i = this.container.get("csp");
+    return i && (window.webprovisionsEnvironmentVariables || (window.webprovisionsEnvironmentVariables = {}), window.webprovisionsEnvironmentVariables.cspNonce = i.nonce), Promise.all([t, this.container.get("settings")]).then(
+      ([{ actionResolver: s, router: o, components: r }, a]) => {
+        var u;
+        s.subscribe(
+          this.widget.name,
+          (l, d, f) => this.onAction(d, f)
+        );
+        const c = (l) => {
+          r.nodes.query({ type: "view" }).forEach((d) => {
+            r.setSwitch(d, l);
+          });
+        }, p = ((u = o.getInitialRoute()) == null ? void 0 : u.name) || "index";
+        return c(p), this.events.subscribe("widget:data-loaded", (l, { element: d }) => {
+          this.widget.container.get("seoConfiguration") && this.events.dispatch("widget:preloaded-replaced", {
+            element: d
+          });
+        }), this.events.subscribe(
+          "router:change",
+          (l, { previous: d = { routeData: {} }, next: f = { routeData: {} } }) => {
+            const { routeData: g } = d, { routeData: h } = f, b = Object.keys(a.views).reduce(
+              (y, A) => typeof a.views[A].path > "u" ? A : y,
+              ""
+            );
+            !h.name && b ? c(b) : c(h.name), tt(g && g.params), tt(h && h.params), this.container.getAsync("actionResolver").then((y) => {
+              y.action(this.widget.name, "routeChange", {
+                next: h,
+                previous: g
+              });
+            });
+          }
+        ), o.initialize();
+      }
+    );
+  }
+  attach(t = {}) {
+    return this.container.get("settings").then(({ trigger: i }) => {
+      var f, g;
+      const {
+        widgetDOMElement: s,
+        key: o = Vt(),
+        triggerDOMElement: r,
+        withRenderState: a
+      } = t, p = ut(i) === N.Inline && ((r == null ? void 0 : r.childElementCount) || 0) > 0, u = he(
+        this.widget.name,
+        s,
+        r,
+        i,
+        p
+      );
+      this.outlets.size < 1 && !a && this.setRenderState("unset");
+      const l = () => {
+        const h = () => b.querySelectorAll("[data-loading=true]").length === 0, [b] = this.widget.container.get("widgetDOMElements"), y = (S, C) => {
+          h() && (u.callback && u.callback(), C.disconnect());
+        }, A = {
+          attributes: !0,
+          subtree: !0,
+          childList: !0
+        };
+        h() && u.callback && u.callback(), new MutationObserver(y).observe(b, A);
+      };
+      p && this.widget.container.getAsync("dataClient").then(({ events: h }) => {
+        h.subscribe(
+          "data-client:fetched",
+          (b, y) => {
+            y.unresolvedQueries === 0 && l();
+          }
+        );
+      });
+      const d = this.getOrCreateViewOutlet(o, u);
+      if (this.outlets.set(o, d), this.widget.events.dispatch("widget:attached", {}, { bubbles: !0 }), u.triggerType === N.Badge && i && ((f = u.triggerDOMElement) == null || f.setAttribute(
+        "aria-expanded",
+        "false"
+      ), d == null || d.renderBadge(i)), u.triggerType !== N.Inline && ((g = u.triggerDOMElement) == null || g.addEventListener(
+        "click",
+        (h) => {
+          h.preventDefault(), this.container.get("settings").then(({ trigger: b }) => {
+            d.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((h) => {
+          this.triggerStateIfApplicable(h);
+        });
+      if (a)
+        return a === "storage" ? this.renderState().then((h) => {
+          if (u.triggerType === N.Inline) {
+            this.triggerStateIfApplicable("open");
+            return;
+          }
+          this.triggerStateIfApplicable(h);
+        }) : this.triggerStateIfApplicable(a);
+    });
+  }
+  detach(t) {
+    if (t) {
+      if (this.outlets.has(t)) {
+        const i = this.outlets.get(t);
+        i == null || i.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((i) => {
+      i.dispose();
+    }), this.outlets.clear();
+  }
+  triggerStateIfApplicable(t) {
+    return this.container.getAsync("router").then((i) => {
+      switch (t) {
+        case "closed":
+          this.close();
+          break;
+        case "open":
+          this.open();
+          break;
+        case "hidden":
+          this.hide(), i.start();
+          break;
+        default:
+          return;
+      }
+    });
+  }
+  getOrCreateViewOutlet(t, i) {
+    return this.outlets.has(t) ? this.outlets.get(t) : new me(this.container, i);
+  }
+  render(t = {}) {
+    if (process.env.NODE_ENV !== "production" && console.warn(
+      "widget.render() is deprecated. Use widget.attach() instead."
+    ), t.open) {
+      const i = {
+        ...t,
+        withRenderState: "open"
+        /* Open */
+      };
+      return this.attach(i);
+    }
+    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"),
+      P(
+        this.container,
+        K,
+        k.Necessary,
+        {
+          medium: v.Local
+        }
+      )
+    ]).then(([i, s]) => Promise.resolve(t(i)).then((o) => s(o).then(() => {
+      const r = { ...i, ...o };
+      return this.widget.events.dispatch("widget:settings-updated", r), r;
+    })));
+  }
+  clearSettings() {
+    return P(
+      this.container,
+      K,
+      k.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: i }) {
+    return this.container.getAsync("actionResolver").then((s) => {
+      s.action(this.widget.name, t, i);
+    });
+  }
+  renderState() {
+    if (Bt(this.container))
+      return Promise.resolve(O.open);
+    const t = () => M(
+      this.container,
+      T,
+      v.Session
+    ).then((s = O.closed) => s), i = () => M(
+      this.container,
+      T,
+      v.Session
+    ).then((s = O.closed) => s);
+    return this.container.getAsync("router").then((s) => s.isSticky() ? i().then((o) => o === O.open ? o : t()) : t());
+  }
+  hide(t) {
+    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((i) => {
+      if (i.render(), t != null && t.focusTrigger) {
+        const {
+          options: { triggerDOMElement: s }
+        } = i;
+        s == null || s.focus();
+      }
+    }), 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.widget.events.dispatch("tracking:widget-minimized", {}), 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, i) {
+    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 r;
+              return (r = o.options.triggerDOMElement) == null ? void 0 : r.setAttribute(
+                "aria-expanded",
+                "false"
+              );
+            }
+          );
+        });
+    }
+  }
+  setRenderState(t) {
+    const { invoke: i, events: s } = this.container.get("$widget");
+    return Promise.all([
+      P(
+        this.container,
+        T,
+        k.Necessary,
+        {
+          medium: v.Session
+        }
+      ),
+      P(
+        this.container,
+        T,
+        k.Necessary,
+        {
+          medium: v.Local,
+          duration: { minutes: 5 }
+        }
+      ),
+      this.container.getAsync("router"),
+      i("renderState")
+    ]).then(
+      ([o, r, a, c]) => {
+        t === "unset" || !t ? (r(), o()) : (a.isSticky() && r(t), o(t)), s.dispatch("widget:render-state-changed", {
+          previous: c,
+          next: t
+        });
+      }
+    );
+  }
+  onOpen() {
+    return this.container.getAsync("router").then((t) => (this.outlets.forEach((i) => {
+      i.options.triggerDOMElement && i.options.triggerDOMElement.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 r = o.nodes.visible;
+        return this.outlets.forEach(
+          (a) => {
+            var c;
+            return (c = a.options.triggerDOMElement) == null ? void 0 : c.setAttribute(
+              "aria-expanded",
+              "false"
+            );
+          }
+        ), r.filter(
+          (a) => a.attributes.properties.animation && a.attributes.properties.animation !== "none"
+        ).length ? new Promise((a) => {
+          setTimeout(() => {
+            a(s);
+          }, 200);
+        }) : Promise.resolve(s);
+      }
+    ).then((s) => s.stop());
+  }
+  setTriggerState(t) {
+    this.outlets.forEach((i) => {
+      const {
+        options: { triggerDOMElement: s, triggerOptions: o }
+      } = i, { openTooltip: r, closedTooltip: a } = o || {};
+      s && (t ? lt(s, r) : le(s, a));
+    });
+  }
+  deactivate() {
+    this.subs.forEach((i) => i());
+    const t = [];
+    return this.outlets.forEach((i) => t.push(i.dispose())), M(
+      this.container,
+      et,
+      v.Local
+    ).then((i) => i === this.widget.name ? P(
+      this.container,
+      et,
+      k.Necessary,
+      {
+        medium: v.Local,
+        scope: Tt.Implementation
+      }
+    ).then((s) => s()).then(() => Promise.all(t)) : Promise.all(t));
+  }
+}
+export {
+  Z as Component,
+  ie as DetachedComponent,
+  Ie as GridWidget,
+  _e as NotFound,
+  Ie as Widget,
+  W as genericComponentStyling
+};