@telia-ace/knowledge-widget-components-contact-list 0.0.1

package/contact-list-05301ab8.js

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("@emotion/styled"),q=require("@telia-ace/knowledge-widget-adapters"),e=require("@telia-ace/knowledge-widget-ui"),a=require("@telia-ace/widget-utilities"),D=require("@telia-ace/widget-types-grid"),k=require("react"),w=({className:n,guides:s,header:L,accordion:c,loading:g,route:S="guide",categoryTitle:x,...l})=>{const{name:p,params:{contactCategory:I=0,guide:C}}=e.useRouteData(),{name:r}=e.useComponentDescriptor(),$=e.useContainer(),f=e.useChildren(),b=e.useDispatch(),N=k.useCallback((o,i,y,u)=>{const{id:h,title:j}=o;return c&&C===h?t.jsx(e.AccordionListItem,{id:h,title:j,route:p,collapseUri:x&&a.formatUrl(x),children:f.map(d=>t.jsx(D.Component,{id:d.id,branch:"default",accordion:c},d.id))},h):u?u(o,i,y,u):null},[c,f,C]);return!s.length&&!g?e.createEmptyComponent($,{...l,className:a.appendClassNames(n,"humany-deflection-list")}):t.jsx(T,{...l,"data-loading":g,className:a.appendClassNames(n,"humany-deflection-list"),items:s,header:L,expandable:!!c,renderItem:N,dispatch:b,routing:{guide:S},paramMappers:{guide:({id:o,title:i})=>a.createParams({contactCategory:I,guide:o,accordion:c?r:void 0,uriName:a.formatUrl(i)})},children:t.jsx(e.Loader,{loading:g})})},T=m(e.GuideList)`
+  ${e.contentBox}
+  ${e.loadingOpacity}
+`,U=m(q.ContactList)`
+  ${e.loadingOpacity}
+  ${e.contentBox}
+`,B=m(e.ItemList)`
+  ${n=>e.loadingOpacity(n)}
+  ${e.contentBox}
+  ${q.contactItemList}
+
+  && {
+    i {
+      font-size: 25px;
+      width: 1.28571429em;
+      text-align: center;
+    }
+  }
+`,v=m(e.Link)`
+  &:focus-visible {
+    ${e.borderTabStyle};
+  }
+
+  ${q.contactLink}
+`,G=m.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${n=>{var s;return(s=n.theme.sizes)==null?void 0:s.normal}};
+`,O=m(e.StyledText)`
+  font-weight: bold;
+`,P=({className:n,...s})=>{const L=e.useDispatch(),c=e.useContainer(),g=e.useRouteData(),{deflectionHeader:S="",routes:x={},contactMethods:l=[],categories:p=[],guides:I=[],deflectionAccordion:C=!1,loading:r=!1}=e.useProperties(),{contactCategory:$,guide:f="guide"}=x;if(!p.length&&!l.length&&!r)return e.createEmptyComponent(c,{...s,className:a.appendClassNames(n,"humany-contact-category-list")});const{name:b,params:{contactCategory:N}}=g,o=a.findCategoryById(N,p);return l.length?t.jsxs(t.Fragment,{children:[t.jsx(w,{className:n,guides:I,categoryTitle:o&&o.title,header:S,route:f,accordion:C,loading:r}),t.jsx(U,{"data-loading":r,className:n,contactMethods:l,dispatch:L,children:t.jsx(e.Loader,{loading:r})})]}):t.jsx(B,{...s,"data-loading":r,className:a.appendClassNames(n,"humany-contact-category-list"),items:o&&o.items||p,renderItem:({id:i,title:y,symbol:u,matches:h,items:j,description:d})=>h||j&&j.length?t.jsx("li",{"data-contact-category":i,children:t.jsxs(v,{routeName:$||b,params:a.createParams({contactCategory:i,uriName:a.formatUrl(y)}),children:[u&&t.jsx(e.SymbolBadge,{symbol:u}),d!=null&&d.length?t.jsxs(G,{children:[t.jsx(O,{children:y}),t.jsx(e.StyledText,{children:d})]}):t.jsx(e.StyledText,{children:y})]})},i):null,children:t.jsx(e.Loader,{loading:r})})};exports.default=P;

package/contact-list-300090b9.mjs

@@ -0,0 +1,190 @@
+import { jsx as t, jsxs as D, Fragment as P } from "react/jsx-runtime";
+import d from "@emotion/styled";
+import { ContactList as T, contactItemList as U, contactLink as E } from "@telia-ace/knowledge-widget-adapters";
+import { GuideList as F, contentBox as G, loadingOpacity as j, useRouteData as w, useComponentDescriptor as O, useContainer as z, useChildren as R, useDispatch as A, AccordionListItem as q, createEmptyComponent as H, Loader as k, ItemList as J, Link as K, borderTabStyle as Q, StyledText as v, useProperties as V, SymbolBadge as W } from "@telia-ace/knowledge-widget-ui";
+import { formatUrl as B, appendClassNames as L, createParams as M, findCategoryById as X } from "@telia-ace/widget-utilities";
+import { Component as Y } from "@telia-ace/widget-types-grid";
+import { useCallback as Z } from "react";
+const _ = ({
+  className: e,
+  guides: o,
+  header: $,
+  accordion: r,
+  loading: m,
+  route: x = "guide",
+  categoryTitle: p,
+  ...s
+}) => {
+  const {
+    name: u,
+    params: { contactCategory: I = 0, guide: y }
+  } = w(), { name: a } = O(), b = z(), f = R(), S = A(), N = Z(
+    (n, c, g, l) => {
+      const { id: h, title: C } = n;
+      return r && y === h ? /* @__PURE__ */ t(
+        q,
+        {
+          id: h,
+          title: C,
+          route: u,
+          collapseUri: p && B(p),
+          children: f.map((i) => /* @__PURE__ */ t(
+            Y,
+            {
+              id: i.id,
+              branch: "default",
+              accordion: r
+            },
+            i.id
+          ))
+        },
+        h
+      ) : l ? l(n, c, g, l) : null;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [r, f, y]
+  );
+  return !o.length && !m ? H(b, {
+    ...s,
+    className: L(e, "humany-deflection-list")
+  }) : /* @__PURE__ */ t(
+    tt,
+    {
+      ...s,
+      "data-loading": m,
+      className: L(e, "humany-deflection-list"),
+      items: o,
+      header: $,
+      expandable: !!r,
+      renderItem: N,
+      dispatch: S,
+      routing: {
+        guide: x
+      },
+      paramMappers: {
+        guide: ({ id: n, title: c }) => M({
+          contactCategory: I,
+          guide: n,
+          accordion: r ? a : void 0,
+          uriName: B(c)
+        })
+      },
+      children: /* @__PURE__ */ t(k, { loading: m })
+    }
+  );
+}, tt = d(F)`
+  ${G}
+  ${j}
+`, et = d(T)`
+  ${j}
+  ${G}
+`, nt = d(J)`
+  ${(e) => j(e)}
+  ${G}
+  ${U}
+
+  && {
+    i {
+      font-size: 25px;
+      width: 1.28571429em;
+      text-align: center;
+    }
+  }
+`, ot = d(K)`
+  &:focus-visible {
+    ${Q};
+  }
+
+  ${E}
+`, at = d.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(e) => {
+  var o;
+  return (o = e.theme.sizes) == null ? void 0 : o.normal;
+}};
+`, rt = d(v)`
+  font-weight: bold;
+`, gt = ({ className: e, ...o }) => {
+  const $ = A(), r = z(), m = w(), {
+    deflectionHeader: x = "",
+    routes: p = {},
+    contactMethods: s = [],
+    categories: u = [],
+    guides: I = [],
+    deflectionAccordion: y = !1,
+    loading: a = !1
+  } = V(), { contactCategory: b, guide: f = "guide" } = p;
+  if (!u.length && !s.length && !a)
+    return H(r, {
+      ...o,
+      className: L(e, "humany-contact-category-list")
+    });
+  const {
+    name: S,
+    params: { contactCategory: N }
+  } = m, n = X(
+    N,
+    u
+  );
+  return s.length ? /* @__PURE__ */ D(P, { children: [
+    /* @__PURE__ */ t(
+      _,
+      {
+        className: e,
+        guides: I,
+        categoryTitle: n && n.title,
+        header: x,
+        route: f,
+        accordion: y,
+        loading: a
+      }
+    ),
+    /* @__PURE__ */ t(
+      et,
+      {
+        "data-loading": a,
+        className: e,
+        contactMethods: s,
+        dispatch: $,
+        children: /* @__PURE__ */ t(k, { loading: a })
+      }
+    )
+  ] }) : /* @__PURE__ */ t(
+    nt,
+    {
+      ...o,
+      "data-loading": a,
+      className: L(e, "humany-contact-category-list"),
+      items: n && n.items || u,
+      renderItem: ({
+        id: c,
+        title: g,
+        symbol: l,
+        matches: h,
+        items: C,
+        description: i
+      }) => h || C && C.length ? /* @__PURE__ */ t("li", { "data-contact-category": c, children: /* @__PURE__ */ D(
+        ot,
+        {
+          routeName: b || S,
+          params: M({
+            contactCategory: c,
+            uriName: B(g)
+          }),
+          children: [
+            l && /* @__PURE__ */ t(W, { symbol: l }),
+            i != null && i.length ? /* @__PURE__ */ D(at, { children: [
+              /* @__PURE__ */ t(rt, { children: g }),
+              /* @__PURE__ */ t(v, { children: i })
+            ] }) : /* @__PURE__ */ t(v, { children: g })
+          ]
+        }
+      ) }, c) : null,
+      children: /* @__PURE__ */ t(k, { loading: a })
+    }
+  );
+};
+export {
+  gt as default
+};

package/contact-list-component.d.ts

@@ -0,0 +1,23 @@
+import { ContactMethodType } from '../../../knowledge/adapters/src/index.ts';
+import { Category, Guide } from '../../../knowledge/core/src/index.ts';
+import { FormComponentInstanceProperties } from '../../../forms/src/index.ts';
+import { Container } from '@webprovisions/platform';
+
+export type ContactListComponentProps = {
+    deflectionHeader?: string;
+    deflectionHeaderTag?: string;
+    deflection?: {
+        [contactCategoryId: string]: string[];
+    };
+    deflectionPageSize?: number;
+    routes?: {
+        contactCategory?: string;
+        guide?: string;
+    };
+    categories?: Category[];
+    contactMethods?: ContactMethodType[];
+    guides?: Guide[];
+    deflectionAccordion?: boolean;
+} & FormComponentInstanceProperties;
+export declare const ContactListComponent: (container: Container) => Promise<void>;
+export default ContactListComponent;

package/contact-list.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+
+type Props = {
+    className: string;
+};
+declare const ContactList: React.FC<Props>;
+export default ContactList;

package/deflection-list.d.ts

@@ -0,0 +1,14 @@
+import { Guide } from '../../../knowledge/core/src/index.ts';
+import { default as React } from 'react';
+
+type Props = {
+    className: string;
+    guides: Guide[];
+    header: string;
+    accordion?: boolean;
+    route?: string;
+    loading: boolean;
+    categoryTitle?: string;
+};
+declare const DeflectionList: React.FC<Props>;
+export default DeflectionList;

package/index.d.ts

@@ -0,0 +1,3 @@
+import { default as ContactListComponent } from './contact-list-component';
+
+export default ContactListComponent;

package/index.js

@@ -0,0 +1 @@
+"use strict";const h=require("@telia-ace/knowledge-data-client"),a=require("@telia-ace/knowledge-widget-component-utilities"),y=require("@telia-ace/knowledge-widget-core"),q=require("@telia-ace/knowledge-widget-ui"),M=s=>{const{events:m}=s.get("$widget"),[P,k]=y.createEventSubscriber(m);return q.createReactComponent(s,"contact-list",Promise.resolve().then(()=>require("./contact-list-05301ab8.js")),e=>{const i=t=>{e.writeProperties({loading:!0,contactMethods:[],categories:[]}),e.actions.dispatch("fetch",{params:t})};e.actions.create("fetch",t=>{const{submitButtonLabel:r="Submit",deflectionHeaderTag:o=void 0}=e.properties();o!==void 0&&(window.humany.deflectionHeaderTag=o);const d=(t.contactMethods||[]).map(c=>({...c,body:a.updateForm(c,{submit:r})}));return e.actions.dispatch("fetched",{...t,contactMethods:d,loading:!0})}),e.actions.create("fetched",t=>e.writeProperties({...t,guides:t.guides||[],loading:!1})),s.getAsync("router").then(t=>{const{params:r}=t.getRouteData();i(r)}),P("router:changed",(t,{current:r})=>{i(r.routeData.params)}),a.useForm(s,e),a.useExpand(e)}).then(()=>y.extendComponent(s,"contact-list",e=>{e.actions.watch("contact-list.fetch",(i,t)=>{const{deflection:r={},deflectionPageSize:o=5,deflectionAccordion:d}=e.properties(),{params:c={}}=i,{contactCategory:u,guide:l,accordion:v}=c;return h.DataClient.getInstance(s).then(g=>g.fetch(h.DataType.ContactMethodCategories,{contactMethodCategoryId:u}).then(({contactMethods:f,categories:b})=>{var p;const w=Object.keys(r),C=w.length===1&&!u?w[0]:u;return(p=r[C])!=null&&p.length?g.fetch(h.DataType.Guides,{categories:r[C],take:o}).then(n=>d&&l&&v===e.node.name?a.fetchAccordionGuideIfMissing(n,g,{guide:l}):new Promise(D=>D(n))).then(({guides:n})=>t({guides:n,contactMethods:f,categories:b})):t({contactMethods:f,categories:b})}))})})).then(()=>{k()})};module.exports=M;

package/index.mjs

@@ -0,0 +1,83 @@
+import { DataClient as M, DataType as b } from "@telia-ace/knowledge-data-client";
+import { updateForm as D, useForm as A, useExpand as I, fetchAccordionGuideIfMissing as S } from "@telia-ace/knowledge-widget-component-utilities";
+import { createEventSubscriber as T, extendComponent as k } from "@telia-ace/knowledge-widget-core";
+import { createReactComponent as x } from "@telia-ace/knowledge-widget-ui";
+const L = (o) => {
+  const { events: y } = o.get("$widget"), [C, w] = T(y);
+  return x(
+    o,
+    "contact-list",
+    import("./contact-list-300090b9.mjs"),
+    (t) => {
+      const c = (e) => {
+        t.writeProperties({
+          loading: !0,
+          contactMethods: [],
+          categories: []
+        }), t.actions.dispatch("fetch", { params: e });
+      };
+      t.actions.create("fetch", (e) => {
+        const {
+          submitButtonLabel: r = "Submit",
+          deflectionHeaderTag: s = void 0
+        } = t.properties();
+        s !== void 0 && (window.humany.deflectionHeaderTag = s);
+        const n = (e.contactMethods || []).map(
+          (a) => ({
+            ...a,
+            body: D(a, { submit: r })
+          })
+        );
+        return t.actions.dispatch("fetched", {
+          ...e,
+          contactMethods: n,
+          loading: !0
+        });
+      }), t.actions.create("fetched", (e) => t.writeProperties({
+        ...e,
+        guides: e.guides || [],
+        loading: !1
+      })), o.getAsync("router").then((e) => {
+        const { params: r } = e.getRouteData();
+        c(r);
+      }), C("router:changed", (e, { current: r }) => {
+        c(r.routeData.params);
+      }), A(o, t), I(t);
+    }
+  ).then(() => k(o, "contact-list", (t) => {
+    t.actions.watch("contact-list.fetch", (c, e) => {
+      const {
+        deflection: r = {},
+        deflectionPageSize: s = 5,
+        deflectionAccordion: n
+      } = t.properties(), { params: a = {} } = c, {
+        contactCategory: d,
+        guide: h,
+        accordion: P
+      } = a;
+      return M.getInstance(o).then(
+        (u) => u.fetch(b.ContactMethodCategories, {
+          contactMethodCategoryId: d
+        }).then(({ contactMethods: f, categories: g }) => {
+          var p;
+          const l = Object.keys(r), m = l.length === 1 && !d ? l[0] : d;
+          return (p = r[m]) != null && p.length ? u.fetch(b.Guides, {
+            categories: r[m],
+            take: s
+          }).then((i) => n && h && P === t.node.name ? S(
+            i,
+            u,
+            { guide: h }
+          ) : new Promise(
+            (v) => v(i)
+          )).then(({ guides: i }) => e({ guides: i, contactMethods: f, categories: g })) : e({ contactMethods: f, categories: g });
+        })
+      );
+    });
+  })).then(() => {
+    w();
+  });
+};
+export {
+  L as default
+};

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@telia-ace/knowledge-widget-components-contact-list",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  },
+  "dependencies": {
+    "@telia-ace/knowledge-widget-adapters": "*",
+    "@telia-ace/knowledge-widget-component-utilities": "*",
+    "@telia-ace/knowledge-widget-core": "*",
+    "@telia-ace/knowledge-widget-ui": "*",
+    "@telia-ace/widget-forms": "*",
+    "@telia-ace/widget-utilities": "*",
+    "@telia-ace/widget-types-grid": "*",
+    "@telia-ace/knowledge-data-client": "*",
+    "@webprovisions/platform": "^1.1.4"
+  },
+  "peerDependencies": {
+    "@emotion/styled": "11.11.0",
+    "react": "18.2.0",
+    "@emotion/react": "11.11.1"
+  }
+}