@telia-ace/knowledge-widget-adapters 1.1.1-rc.2 → 1.1.1-rc.3

package/email-form-component-c6fab51f.js

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),l=require("@emotion/react"),u=require("@emotion/styled"),n=require("@telia-ace/knowledge-widget-ui"),o=require("@telia-ace/widget-utilities"),d=require("./index-e5030373.js");require("react");require("@telia-ace/widget-forms");require("@telia-ace/knowledge-widget-core");const h=u(n.Html)`
+    ${n.genericHtml}
+
+    ${e=>{var t;return n.headingElement(e)("h1",l.css`
+                font-weight: normal;
+                font-size: ${(t=e.theme.fonts)==null?void 0:t.medium};
+            `)}}
+`,f=e=>{const{className:t,renderDefault:s=()=>{},body:{form:a},confirmation:r,htmlParseInstruction:m,disabled:c}=e;return r?i.jsx(h,{className:o.appendClassNames(t,"humany-contact-method-confirmation","humany-contact-method-email"),html:r,htmlParseInstruction:m}):a&&!c?i.jsx(d.Form,{...e,className:o.appendClassNames(t,"humany-contact-method-email")}):s()};exports.default=f;

package/email-form-component-ed964e9d.mjs

@@ -0,0 +1,54 @@
+import { jsx as e } from "react/jsx-runtime";
+import { css as l } from "@emotion/react";
+import c from "@emotion/styled";
+import { Html as f, genericHtml as d, headingElement as h } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as r } from "@telia-ace/widget-utilities";
+import { F as p } from "./index-42994c22.mjs";
+import "react";
+import "@telia-ace/widget-forms";
+import "@telia-ace/knowledge-widget-core";
+const u = c(f)`
+    ${d}
+
+    ${(t) => {
+  var m;
+  return h(t)(
+    "h1",
+    l`
+                font-weight: normal;
+                font-size: ${(m = t.theme.fonts) == null ? void 0 : m.medium};
+            `
+  );
+}}
+`, E = (t) => {
+  const {
+    className: m,
+    renderDefault: n = () => {
+    },
+    body: { form: a },
+    confirmation: o,
+    htmlParseInstruction: i,
+    disabled: s
+  } = t;
+  return o ? /* @__PURE__ */ e(
+    u,
+    {
+      className: r(
+        m,
+        "humany-contact-method-confirmation",
+        "humany-contact-method-email"
+      ),
+      html: o,
+      htmlParseInstruction: i
+    }
+  ) : a && !s ? /* @__PURE__ */ e(
+    p,
+    {
+      ...t,
+      className: r(m, "humany-contact-method-email")
+    }
+  ) : n();
+};
+export {
+  E as default
+};

package/free-text-component-7b456d3b.mjs

@@ -0,0 +1,23 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import i from "@emotion/styled";
+import { Html as l, genericHtml as s } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as n } from "@telia-ace/widget-utilities";
+import { D as a } from "./index-42994c22.mjs";
+import "@telia-ace/widget-forms";
+import "react";
+import "@telia-ace/knowledge-widget-core";
+import "@emotion/react";
+const D = ({
+  className: e,
+  description: t,
+  body: { freetext: m },
+  htmlParseInstruction: o
+}) => m ? /* @__PURE__ */ p("div", { className: n(e, "humany-contact-method-free-text"), children: [
+  /* @__PURE__ */ r(d, { html: m, htmlParseInstruction: o }),
+  t && /* @__PURE__ */ r(a, { html: t, htmlParseInstruction: o })
+] }) : null, d = i(l)`
+    ${s};
+`;
+export {
+  D as default
+};

package/free-text-component-91478595.js

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("@emotion/styled"),n=require("@telia-ace/knowledge-widget-ui"),u=require("@telia-ace/widget-utilities"),o=require("./index-e5030373.js");require("@telia-ace/widget-forms");require("react");require("@telia-ace/knowledge-widget-core");require("@emotion/react");const c=({className:s,description:t,body:{freetext:r},htmlParseInstruction:i})=>r?e.jsxs("div",{className:u.appendClassNames(s,"humany-contact-method-free-text"),children:[e.jsx(d,{html:r,htmlParseInstruction:i}),t&&e.jsx(o.Description,{html:t,htmlParseInstruction:i})]}):null,d=l(n.Html)`
+    ${n.genericHtml};
+`;exports.default=c;

package/index-42994c22.mjs

@@ -0,0 +1,589 @@
+var H = Object.defineProperty;
+var q = (t, e, n) => e in t ? H(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
+var $ = (t, e, n) => (q(t, typeof e != "symbol" ? e + "" : e, n), n);
+import { FormBuilder as B, FormReader as w, FormComponent as K } from "@telia-ace/widget-forms";
+import { ComponentPlatform as S, Plugin as G } from "@telia-ace/knowledge-widget-core";
+import { lock as U, createParams as W, formatUrl as J, appendClassNames as Q } from "@telia-ace/widget-utilities";
+import { lazy as X, Suspense as Y, useState as Z, useEffect as _ } from "react";
+import { jsx as m, jsxs as I } from "react/jsx-runtime";
+import { css as C } from "@emotion/react";
+import f from "@emotion/styled";
+import { Paragraph as ee, headingElement as V, Html as te, genericHtml as ne, borderTabStyle as D, linkTabStyle as oe, StyledText as re, Link as ie, useComponent as ae, useRouteData as se, Typography as ce, SymbolBadge as le, ItemList as de, itemList as me, useContainer as he } from "@telia-ace/knowledge-widget-ui";
+const P = (t, e, n = !1) => t.getManyAsync("matchingClient", "router").then((r) => {
+  const { formData: o } = new w(e.body.form).export(n), { router: c, matchingClient: i } = r, { params: a } = c.getRouteData();
+  return i.customRequest(
+    `contactmethods/${e.id}${n ? "/validatedwithpayload" : ""}`,
+    "POST",
+    {
+      body: o,
+      configuration: {
+        guideId: e.body.guideId || a.guideId
+      }
+    }
+  );
+}), R = (t, e, n) => P(t, e).then((r) => n ? n(r) : r).then(({ ConfirmationText: r }) => r), y = (t, e) => P(t, e, !0).then((n) => ({
+  valid: n.Validation.IsValid,
+  errors: n.Validation.Errors,
+  errorTypes: n.Validation.ErrorTypes
+})), T = (t, e) => P(t, e, !0).then(
+  (n) => B.fromLegacyForm(e.id, n.ContactMethod.Form).get()
+), b = (t, e) => t.getAsync("matchingClient").then((n) => {
+  n.completeContactMethod(e.id);
+});
+function ue(t) {
+  t.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "email.form",
+      render: import("./email-form-component-ed964e9d.mjs"),
+      onEvaluate: (n) => T(t, n),
+      onValidate: (n) => y(t, n),
+      onSubmit: (n) => R(t, n),
+      onComplete: (n) => b(t, n)
+    });
+  });
+}
+const M = (t, e, n) => {
+  const { url: r, width: o, height: c } = e, i = n || {}, a = document.createElement("a");
+  return a.href = r, a.search.replace("?", "").split("&").forEach((s) => {
+    const [l, d] = s.split("=");
+    typeof d < "u" && (i[l] = d);
+  }), a.search = Object.keys(i).map((s) => `${s}=${i[s]}`).join("&"), window.open(a.href, t, `width=${o},height=${c}`), "";
+};
+function pe(t) {
+  t.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "chat.popup",
+      render: "email.form",
+      handleClick: (n) => {
+        const { title: r, body: o } = n, { form: c, guideId: i, confirmationFallback: a, ...s } = o;
+        return c ? () => {
+        } : (l) => {
+          l.preventDefault(), M(r, s);
+        };
+      },
+      onValidate: (n) => y(t, n),
+      onComplete: (n) => b(t, n),
+      onSubmit: (n) => {
+        const { title: r, body: o } = n, { form: c, guideId: i, confirmationFallback: a, ...s } = o, l = new w(c).export().values;
+        return M(r, s, l), a;
+      }
+    });
+  });
+}
+function fe(t) {
+  t.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "custom.freetext",
+      render: import("./free-text-component-7b456d3b.mjs")
+    });
+  });
+}
+function ge(t) {
+  t.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "custom.link",
+      render: import("./link-component-1c24e6af.mjs")
+    });
+  });
+}
+function ye(t) {
+  t.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "phone.text",
+      render: import("./phone-component-25f3e937.mjs")
+    });
+  });
+}
+const be = async (t, e) => {
+  const n = t.get(e.clientName);
+  let { description: r, disabled: o, onClick: c } = e;
+  if (n) {
+    const { handleClick: i, handleDescription: a, handleDisabled: s } = n;
+    typeof i == "function" && (c = await Promise.resolve(i(e))), typeof a == "function" && (r = await Promise.resolve(a(e))), typeof s == "function" && (o = await Promise.resolve(s(e)));
+  }
+  return Promise.resolve({
+    ...e,
+    description: r,
+    disabled: o,
+    onClick: c
+  });
+};
+class k {
+  constructor(e, n) {
+    $(this, "adapters", /* @__PURE__ */ new Map());
+    $(this, "subs", []);
+    if (this.container = e, this.componentPlatform = n, n) {
+      n.components().ofType("contact-list").select().actions.watch(
+        "contact-list.fetched",
+        async (i, a) => {
+          const { contactMethods: s } = i;
+          if (s) {
+            const l = Promise.all(
+              s.map(
+                (d) => this.handleAdapters(d)
+              )
+            );
+            await Promise.resolve(l).then((d) => {
+              i.contactMethods = d;
+            });
+          }
+          return a(i);
+        }
+      );
+      const o = n.components().ofType("guide").select();
+      o.actions.watch("guide.fetched", async (i, a) => {
+        const { contactMethods: s } = i;
+        if (s) {
+          const l = Promise.all(
+            s.map(
+              (d) => this.handleAdapters(d)
+            )
+          );
+          await Promise.resolve(l).then((d) => {
+            i.contactMethods = d;
+          });
+        }
+        return a(i);
+      }), o.actions.watch("guide.handover", async (i, a) => {
+        const { handoverContactMethods: s } = i;
+        if (s) {
+          const l = Promise.all(
+            s.map(
+              (d) => this.handleAdapters(d)
+            )
+          );
+          await Promise.resolve(l).then((d) => {
+            i.handoverContactMethods = d;
+          });
+        }
+        return a(i);
+      }), n.components().ofType("contact-method").select().actions.watch(
+        "contact-method.fetched",
+        async (i, a) => {
+          const { contactMethod: s } = i;
+          return s ? this.handleAdapters(s).then((l) => a({ ...i, contactMethod: l })) : a(i);
+        }
+      );
+    }
+  }
+  static create(e) {
+    return S.getInstance(e).then((n) => new k(e, n));
+  }
+  handleAdapters(e) {
+    return be(this.adapters, e);
+  }
+  static getInstance(e, n = "contactMethods") {
+    return U(e)(() => e.getAsync(n).then((r) => {
+      let o = r;
+      return o || S.getInstance(e).then((c) => (o = new k(
+        e,
+        c
+      ), e.registerAsync(n, () => o), o));
+    }));
+  }
+  track(e = {}, n) {
+    const { events: r } = this.container.get("$widget");
+    r.dispatch("tracking:service-client-response", {
+      type: n,
+      data: e
+    });
+  }
+  complete(e) {
+    const { id: n, title: r, clientName: o, expanded: c, body: i } = e;
+    this.track(
+      {
+        contactMethod: { id: n, title: r, expanded: c, type: o },
+        hasGuide: !!i.guideId
+      },
+      "contact-method-complete"
+      /* ContactMethodComplete */
+    );
+    const a = this.adapters.get(o);
+    if (a && a.onComplete)
+      return a.onComplete(e);
+  }
+  evaluate(e) {
+    const { clientName: n } = e, r = this.adapters.get(n);
+    return r && r.onEvaluate ? Promise.resolve(r.onEvaluate(e)) : Promise.resolve(e.body.form);
+  }
+  validate(e) {
+    const { id: n, title: r, clientName: o } = e, c = this.adapters.get(o);
+    return c && c.onValidate ? Promise.resolve(c.onValidate(e)).then(
+      (i) => {
+        this.track(
+          {
+            contactMethod: { id: n, title: r, type: o },
+            isValid: i.valid
+          },
+          "contact-method-validate"
+          /* ContactMethodValidate */
+        );
+        const { events: a } = this.container.get("$widget");
+        return a.dispatch("form:validated", { isValid: i.valid }), i;
+      }
+    ) : Promise.resolve({ valid: !0 });
+  }
+  submit(e) {
+    const { clientName: n } = e, r = this.adapters.get(n);
+    return r && r.onSubmit ? Promise.resolve(r.onSubmit(e)).then((o) => (this.complete(e), o)) : Promise.resolve("");
+  }
+  create(e) {
+    const { clientName: n, render: r } = e;
+    return this.adapters.set(n, {
+      onValidate: (o) => y(this.container, o),
+      onEvaluate: (o) => T(this.container, o),
+      onComplete: (o) => b(this.container, o),
+      ...e
+    }), this.container.getAsync("componentResolver").then((o) => {
+      typeof r == "string" ? this.subs.push(o.registerAlias(n, r)) : this.subs.push(
+        o.registerComponent(
+          n,
+          X(() => r)
+        )
+      );
+    });
+  }
+  dispose() {
+    this.subs.forEach((e) => e());
+  }
+}
+f(ee)`
+    ${(t) => {
+  var e;
+  return V(t)(
+    "h1",
+    C`
+                font-weight: normal;
+                font-size: ${(e = t.theme.fonts) == null ? void 0 : e.medium};
+            `
+  );
+}}
+`;
+const ve = f(te)`
+    ${ne}
+    font-weight: 300;
+    line-height: 1.5em;
+    button:focus-visible {
+        ${D};
+    }
+
+    a:focus-visible {
+        ${oe};
+    }
+`, Ce = (t) => {
+  const e = ae(t.clientName), {
+    params: { contactCategory: n, guideCategory: r, phrase: o }
+  } = se();
+  if (typeof e > "u")
+    return null;
+  if (e === null)
+    return process.env.NODE_ENV !== "production" ? /* @__PURE__ */ m(
+      we,
+      {
+        title: `client-name: ${t.clientName}, id: ${t.id}`,
+        className: "humany-non-resolved-contact-method",
+        children: /* @__PURE__ */ m(ce, { variant: "h5", children: "Non resolved Contact Method type" })
+      }
+    ) : null;
+  const c = (i = {}) => {
+    const a = { ...t, ...i }, {
+      id: s,
+      title: l,
+      clientName: d,
+      symbol: p,
+      inline: v,
+      onClick: g = () => {
+      },
+      description: u,
+      htmlParseInstruction: N,
+      className: F,
+      disabled: z,
+      guideId: j,
+      dispatch: x = () => {
+      },
+      expanded: A
+    } = a, O = v ? {
+      onKeyDown: (h) => {
+        h.key && h.key === "Enter" && (g(h, a), h.defaultPrevented || !A && x("expand", s));
+      },
+      onClick: (h) => {
+        g(h, a), h.defaultPrevented || !A && x("expand", s);
+      }
+    } : {
+      onClick: (h) => g(h, a),
+      routeName: "contact-method",
+      params: W({
+        contactCategory: n,
+        guideId: j,
+        guideCategory: r,
+        phrase: o,
+        contactMethod: s,
+        uriName: J(l)
+      })
+    };
+    return /* @__PURE__ */ I(
+      ke,
+      {
+        title: l,
+        "aria-label": l,
+        className: F,
+        disabled: z,
+        description: u,
+        "data-client-name": d,
+        ...i,
+        ...O,
+        children: [
+          p && /* @__PURE__ */ m(le, { symbol: p }),
+          u ? /* @__PURE__ */ I("div", { className: "humany-contact-link-rich-content", children: [
+            /* @__PURE__ */ m(E, { children: l }),
+            /* @__PURE__ */ m(
+              ve,
+              {
+                html: u,
+                htmlParseInstruction: N
+              }
+            )
+          ] }) : /* @__PURE__ */ m(E, { children: l })
+        ]
+      }
+    );
+  };
+  return t.expanded ? /* @__PURE__ */ m(Y, { fallback: null, children: /* @__PURE__ */ m(e, { ...t, renderDefault: c }) }) : c();
+}, $e = (t) => {
+  var e, n, r, o, c, i, a, s;
+  return C`
+  display: flex;
+  padding: ${(e = t.theme.sizes) == null ? void 0 : e.large};
+  ${t.description ? "" : "align-items: center;"}
+  text-decoration: none;
+  span {
+    display: inline-block;
+    color: ${(n = t.theme.colors) == null ? void 0 : n.text};
+  }
+  i {
+    font-size: ${(r = t.theme.fonts) == null ? void 0 : r.large};
+    margin: 0 ${(o = t.theme.sizes) == null ? void 0 : o.large} 0 0;
+    min-height: ${(c = t.theme.fonts) == null ? void 0 : c.large};
+    min-width: ${(i = t.theme.fonts) == null ? void 0 : i.large};
+    line-height: ${(a = t.theme.fonts) == null ? void 0 : a.large};
+    display: inline-block;
+    vertical-align: bottom;
+    color: ${(s = t.theme.colors) == null ? void 0 : s.text};
+  }
+`;
+}, E = f(re)`
+  line-height: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.large;
+}};
+`, ke = f(ie)`
+  ${(t) => $e(t)}
+
+  &:focus-visible {
+    ${D};
+  }
+`, we = f.div`
+  text-align: center;
+  display: block;
+  ${(t) => {
+  var e, n;
+  return typeof ((e = t.theme.colors) == null ? void 0 : e.warning) < "u" && `color: ${(n = t.theme.colors) == null ? void 0 : n.warning};`;
+}}
+`, Pe = (t) => {
+  var e, n, r;
+  return C`
+    ${me(t)}
+
+    > div {
+        padding: ${(e = t.theme.sizes) == null ? void 0 : e.large};
+
+        ${V(t)(
+    "h1",
+    C`
+                margin: 0;
+            `
+  )}
+    }
+
+    > ul {
+        &:not(:first-child) {
+            border-top: ${t.theme.border};
+        }
+
+        > li {
+            margin: 0;
+            white-space: normal;
+
+            > a {
+                overflow: hidden;
+            }
+
+            &:first-child > a {
+                border-radius: ${`${t.theme.borderRadius} ${t.theme.borderRadius} 0 0`};
+            }
+
+            &:last-child:not(:first-child) > a {
+                border-radius: ${`0 0 ${t.theme.borderRadius} ${t.theme.borderRadius}`};
+            }
+
+            &:not(:last-child) {
+                border-bottom: ${t.theme.border};
+            }
+
+            > div {
+                padding: ${(n = t.theme.sizes) == null ? void 0 : n.large};
+            }
+        }
+    }
+
+    @media (hover: hover) {
+        a:hover {
+            background-color: ${(r = t.theme.colors) == null ? void 0 : r.accent};
+        }
+    }
+`;
+}, Ne = f(de)`
+    ${(t) => Pe(t)}
+`, Le = ({
+  contactMethods: t,
+  children: e,
+  guideId: n,
+  dispatch: r,
+  className: o = "",
+  itemRenderer: c,
+  action: i = () => {
+  },
+  header: a = ""
+}) => t.length ? /* @__PURE__ */ m(
+  Ne,
+  {
+    header: a,
+    className: Q(o, "humany-contact-list"),
+    items: t,
+    renderItem: c ? (s) => /* @__PURE__ */ m("li", { "data-contact-method": s.id, children: c(s, { action: i, dispatch: r, guideId: n }) }, s.id) : (s) => /* @__PURE__ */ m("li", { "data-contact-method": s.id, children: /* @__PURE__ */ m(
+      Ce,
+      {
+        ...s,
+        action: i,
+        dispatch: r,
+        guideId: n
+      }
+    ) }, s.id),
+    children: e
+  }
+) : null, L = (t, e) => {
+  if (t.actionKey === e)
+    return t;
+  if (!t.properties)
+    return null;
+  const n = Object.keys(t.properties);
+  let r;
+  for (let o = 0; o < n.length; o++)
+    if (r = L(t.properties[n[o]], e), r)
+      return r;
+  return !1;
+}, Fe = ({
+  className: t,
+  body: { form: e },
+  id: n,
+  action: r,
+  dispatch: o,
+  disabled: c,
+  autoFocus: i
+}) => {
+  if (e && !c) {
+    const { schema: a, layout: s, data: l, meta: d } = e, p = o || r || (() => {
+    });
+    return /* @__PURE__ */ m(
+      K,
+      {
+        className: t,
+        schema: a,
+        layout: s,
+        data: l,
+        autoFocus: i,
+        onChange: (v, g) => {
+          const u = { schema: a, layout: s, data: g, meta: d };
+          v.toString() === "submit" ? p("submit", { id: n, form: u }) : L(a, v).evaluate ? p("evaluate", { id: n, form: u }) : p("validate", { id: n, form: u });
+        }
+      }
+    );
+  }
+  return null;
+}, ze = (t) => {
+  const [e, n] = Z(null), r = he();
+  return _(() => {
+    let o;
+    return r.getAsync("componentResolver").then((c) => {
+      o = c.registerResolver(
+        t,
+        (i) => n(i)
+      );
+    }), () => {
+      o && o();
+    };
+  }, [t]), e;
+};
+function xe(t) {
+  t.getAsync("contactMethods").then((e) => {
+    e.create({
+      clientName: "custom.webservice",
+      render: "email.form",
+      onValidate: (n) => y(t, n),
+      onComplete: (n) => b(t, n),
+      onSubmit: (n) => R(t, n, (r) => ({
+        ...r,
+        ConfirmationText: r.ResponseHtml
+      }))
+    });
+  });
+}
+const je = (t, e, n) => t.getAsync("contactMethods").then((r) => {
+  r.create({
+    clientName: e,
+    render: "email.form",
+    handleClick: () => (o, c) => {
+      const {
+        body: { form: i, guideId: a, confirmationFallback: s, ...l }
+      } = c;
+      i || (o.preventDefault(), n(l));
+    },
+    onValidate: (o) => y(t, o),
+    onComplete: (o) => b(t, o),
+    onSubmit: (o) => {
+      const {
+        body: { form: c, guideId: i, confirmationFallback: a, ...s }
+      } = o, { values: l } = new w(c).export();
+      return Promise.resolve(n(s, l)).then((d) => d || a);
+    }
+  });
+});
+class Oe extends G {
+  constructor(e, n) {
+    super(e, n), this.widget.implementation.configure((o) => {
+      o.plugin(ue).plugin(pe).plugin(fe).plugin(ye).plugin(xe).plugin(ge);
+    });
+  }
+}
+export {
+  Le as C,
+  ve as D,
+  Fe as F,
+  Pe as a,
+  $e as b,
+  pe as c,
+  Ce as d,
+  k as e,
+  b as f,
+  T as g,
+  ue as h,
+  fe as i,
+  je as j,
+  Oe as k,
+  ge as l,
+  ye as p,
+  R as s,
+  ze as u,
+  y as v,
+  xe as w
+};