@telia-ace/knowledge-widget-components-notification-row 0.0.1

package/index.d.ts

@@ -0,0 +1,3 @@
+import { default as NotificationRowComponent } from './notification-row-component';
+
+export default NotificationRowComponent;

package/index.js

@@ -0,0 +1 @@
+"use strict";const f=require("@telia-ace/knowledge-data-client"),d=require("@telia-ace/knowledge-widget-core"),w=require("@telia-ace/knowledge-widget-ui"),p=s=>{const{events:h}=s.get("$widget"),[u,c]=d.createEventSubscriber(h);return w.createReactComponent(s,"notification-row",Promise.resolve().then(()=>require("./notification-row-7a9d4926.js")),t=>{const a=e=>{t.writeProperties({...t.properties(),loading:!0,error:void 0,notifications:[]}),t.actions.dispatch("fetch",{params:e})};return t.actions.create("fetch",({error:e,topNotifications:i,bottomNotifications:o,middleNotifications:g})=>{if(e)return t.actions.dispatch("fetched",{error:e,loading:!0,notifications:[]});let r=[];const{notifications:l,types:n=[]}=t.properties();return n.length?(n.indexOf("top")>-1&&(r=r.concat(i)),n.indexOf("middle")>-1&&(r=r.concat(g)),n.indexOf("bottom")>-1&&(r=r.concat(o))):r=i,t.actions.dispatch("fetched",{notifications:r.length?r:l,loading:!1})}),t.actions.create("fetched",e=>t.writeProperties({...e,loading:!1})),s.getAsync("router").then(e=>{const{params:i}=e.getRouteData();a(i)}),u("router:changed",(e,{current:i})=>{a(i.routeData.params)}),()=>{c()}}).then(()=>d.extendComponent(s,"notification-row",t=>{t.actions.watch("notification-row.fetch",(a,e)=>f.DataClient.getInstance(s).then(i=>i.fetch(f.DataType.RowNotifications,{categories:[a.params.guideCategory,a.params.contactCategory].filter(o=>!!o),searchPhrase:a.params.phrase})).then(e).catch(i=>{if(i)return e(i)}))})).then(()=>{c()})};module.exports=p;

package/index.mjs

@@ -0,0 +1,68 @@
+import { DataClient as g, DataType as p } from "@telia-ace/knowledge-data-client";
+import { createEventSubscriber as l, extendComponent as w } from "@telia-ace/knowledge-widget-core";
+import { createReactComponent as m } from "@telia-ace/knowledge-widget-ui";
+const v = (o) => {
+  const { events: f } = o.get("$widget"), [h, n] = l(f);
+  return m(
+    o,
+    "notification-row",
+    import("./notification-row-a3660cfb.mjs"),
+    (e) => {
+      const r = (t) => {
+        e.writeProperties({
+          ...e.properties(),
+          loading: !0,
+          error: void 0,
+          notifications: []
+        }), e.actions.dispatch("fetch", { params: t });
+      };
+      return e.actions.create(
+        "fetch",
+        ({
+          error: t,
+          topNotifications: i,
+          bottomNotifications: c,
+          middleNotifications: d
+        }) => {
+          if (t)
+            return e.actions.dispatch("fetched", {
+              error: t,
+              loading: !0,
+              notifications: []
+            });
+          let a = [];
+          const { notifications: u, types: s = [] } = e.properties();
+          return s.length ? (s.indexOf("top") > -1 && (a = a.concat(i)), s.indexOf("middle") > -1 && (a = a.concat(d)), s.indexOf("bottom") > -1 && (a = a.concat(c))) : a = i, e.actions.dispatch("fetched", {
+            notifications: a.length ? a : u,
+            loading: !1
+          });
+        }
+      ), e.actions.create("fetched", (t) => e.writeProperties({ ...t, loading: !1 })), o.getAsync("router").then((t) => {
+        const { params: i } = t.getRouteData();
+        r(i);
+      }), h("router:changed", (t, { current: i }) => {
+        r(i.routeData.params);
+      }), () => {
+        n();
+      };
+    }
+  ).then(() => w(o, "notification-row", (e) => {
+    e.actions.watch("notification-row.fetch", (r, t) => g.getInstance(o).then(
+      (i) => i.fetch(p.RowNotifications, {
+        categories: [
+          r.params.guideCategory,
+          r.params.contactCategory
+        ].filter((c) => !!c),
+        searchPhrase: r.params.phrase
+      })
+    ).then(t).catch((i) => {
+      if (i)
+        return t(i);
+    }));
+  })).then(() => {
+    n();
+  });
+};
+export {
+  v as default
+};

package/notification-row-7a9d4926.js

@@ -0,0 +1,114 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),y=require("@emotion/react"),f=require("@emotion/styled"),o=require("@telia-ace/knowledge-widget-ui"),m=require("@telia-ace/widget-services"),S=require("@telia-ace/widget-utilities"),r=require("react"),C="closed-notifications",K={transform:{a:({children:e,...t})=>i.jsx("a",{...t,tabIndex:-1,children:e})}},U=({className:e,...t})=>{const{types:d=[],allowPaging:b=!0,notifications:B=[],closeAriaLabel:A="",pageNextAriaLabel:I="",pagePreviousAriaLabel:T="",expandAriaLabel:N=""}=o.useProperties(),[x,H]=r.useState(!1),[w,R]=r.useState([]),[s,v]=r.useState(0),l=o.useContainer(),[$,L]=r.useState();r.useEffect(()=>{l&&(m.readStorage(l,C,m.StorageMedium.Session).then((a=[])=>R(a)),m.createStorageWriter(l,C,m.StorageCategory.Functional).then(a=>L(()=>a)))},[l]),r.useEffect(()=>{l&&m.readStorage(l,C,m.StorageMedium.Session).then((a=[])=>{w.forEach(n=>a.indexOf(n)===-1&&a.push(n)),$&&$(a)})},[w,l,$]);const p=B.filter(({id:a})=>w.indexOf(a)===-1),{length:u}=p,[c,j]=r.useState(o.useProperties().expandable),W=r.useRef(null),g=l.get("$widget"),M=r.useRef(t.id);if(r.useEffect(()=>{g.events.subscribe("notification:expandable",(a,n)=>{n.notificationRowId===M.current&&j(n.expandable)})},[g.events]),!p.length)return o.createEmptyComponent(l,{...t,className:S.appendClassNames(e,"humany-notification-row")});const z=()=>H(!x);if(b){const a=p[s]||p[s+1]||p[s-1];if(!a)return o.createEmptyComponent(l,{...t,className:S.appendClassNames(e,"humany-notification-row")});const{id:n,body:k}=a||{};return!c&&g.container.expandableNotifications&&g.container.expandableNotifications.has(n)&&j(!0),i.jsxs(P,{...t,...c?{"aria-expanded":x,role:"button"}:{},...N?{"aria-label":N}:{},tabIndex:c?0:-1,className:S.appendClassNames(e,"humany-notification-row"),"data-pageable":u>1,"data-types":d,"data-allow-paging":b,"data-expandable":c,ref:W,onKeyDown:h=>{h.key==="Enter"&&z()},onClick:z,children:[i.jsx(F,{"aria-label":A,onClick:()=>{v(p.indexOf(a)),R([...w,n])},children:i.jsx(o.SymbolBadge,{symbol:{type:"Svg",content:"close"}})}),i.jsx(q,{htmlParseInstruction:!c||x?void 0:K,"data-pageable":u>1,"data-notification":n,"data-expandable":c,"data-expanded":x,html:k}),u>1&&i.jsxs(D,{children:[i.jsx(E,{"data-testid":"page-left-button","aria-label":T,"data-disabled":s===0,onClick:h=>{h.stopPropagation(),s>0&&v(s-1)},children:i.jsx(O,{size:10,symbol:{type:"Svg",content:"caret-left"}})}),i.jsxs("span",{children:[s+1,"/",u]}),i.jsx(E,{"data-testid":"page-right-button","aria-label":I,"data-disabled":s+1>=u,onClick:h=>{h.stopPropagation(),s<u-1&&v(s+1)},children:i.jsx(O,{size:10,symbol:{type:"Svg",content:"caret-right"}})})]})]})}return i.jsx(P,{...t,className:S.appendClassNames(e,"humany-notification-row"),"data-pageable":!1,"data-types":d,"data-allow-paging":!1,children:p.map(a=>{if(!a)return null;const{id:n,body:k}=a;return!c&&g.container.expandableNotifications&&g.container.expandableNotifications.has(n)&&j(!0),i.jsx(q,{"data-pageable":!1,"data-expandable":c,"data-expanded":x,"data-notification":n,html:k},n)})})},P=f.div`
+  ${o.genericHtml}
+  padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}} ${e=>{var t;return((t=e.theme.sizes)==null?void 0:t.cardinal)*12}}px;
+  background-color: ${e=>{var t,d,b;return e["data-types"].length?e["data-types"].indexOf("top")>-1?(t=e.theme.colors)==null?void 0:t.warning:e["data-types"].indexOf("bottom")>-1?"transparent":(d=e.theme.colors)==null?void 0:d.primary:(b=e.theme.colors)==null?void 0:b.warning}};
+  color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  border-radius: ${e=>e.theme.borderRadius};
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  cursor: ${e=>e["data-expandable"]?"pointer":"default"};
+  overflow: hidden;
+
+  i {
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  }
+
+  a {
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.link}};
+    &:focus-visible {
+      ${o.linkTabStyle}
+    }
+  }
+
+  ${e=>{var t;return!e["data-allow-paging"]&&y.css`
+      flex-wrap: wrap;
+
+      > div {
+        min-width: 100%;
+        margin: ${((t=e.theme.sizes)==null?void 0:t.cardinal)*2}px;
+      }
+    `}};
+
+  ${e=>y.css`
+      &:focus-visible {
+        .humany-html {
+          ${o.borderTabStyle(e)}
+        }
+      }
+    `}
+`,q=f(o.Html)`
+  flex: 1;
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+  line-height: 1.6em;
+  font-weight: 300;
+
+  ${e=>e["data-expandable"]&&!e["data-expanded"]&&y.css`
+      max-width: 100%;
+
+      p {
+        display: none;
+        &:first-child {
+          display: block;
+          margin-bottom: 0;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    `}
+`,D=f.div`
+  text-align: center;
+  width: 100%;
+  span {
+    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.small}};
+    display: inline-block;
+    width: 30px;
+    text-align: center;
+  }
+`,E=f(o.Button)`
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity 200ms ease-out;
+  justify-self: flex-end;
+  align-self: flex-start;
+  padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} svg {
+    display: block;
+  }
+
+  &:focus-visible {
+    ${o.borderTabStyle}
+  }
+
+  ${e=>e["data-disabled"]?y.css`
+          opacity: 0.8;
+        `:y.css`
+          @media (hover) {
+            &:hover {
+              opacity: 0.5;
+            }
+          }
+        `}
+`,F=f(E)`
+  position: absolute;
+  top: 7.5px;
+  right: 7.5px;
+  width: 25px;
+  height: auto;
+  padding: ${e=>{var t,d;return`calc(${(t=e.theme.sizes)==null?void 0:t.small}/2) ${(d=e.theme.sizes)==null?void 0:d.small}`}};
+  svg {
+    vertical-align: middle;
+    line,
+    path {
+      stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+    }
+  }
+`,O=f(o.SymbolBadge)`
+  line {
+    stroke: #ffffff;
+  }
+`;f.div`
+  display: none;
+`;exports.default=U;

package/notification-row-a3660cfb.mjs

@@ -0,0 +1,328 @@
+import { jsxs as k, jsx as l } from "react/jsx-runtime";
+import { css as u } from "@emotion/react";
+import c from "@emotion/styled";
+import { useProperties as O, useContainer as J, createEmptyComponent as A, SymbolBadge as T, genericHtml as Q, linkTabStyle as U, borderTabStyle as W, Html as V, Button as X } from "@telia-ace/knowledge-widget-ui";
+import { readStorage as B, StorageMedium as I, createStorageWriter as Z, StorageCategory as ee } from "@telia-ace/widget-services";
+import { appendClassNames as y } from "@telia-ace/widget-utilities";
+import te, { useState as h, useEffect as z, useRef as ae } from "react";
+const R = "closed-notifications", ne = {
+  transform: {
+    a: ({ children: e, ...t }) => /* @__PURE__ */ l("a", { ...t, tabIndex: -1, children: e })
+  }
+}, me = ({ className: e, ...t }) => {
+  const {
+    types: r = [],
+    allowPaging: m = !0,
+    notifications: K = [],
+    closeAriaLabel: D = "",
+    pageNextAriaLabel: F = "",
+    pagePreviousAriaLabel: G = "",
+    expandAriaLabel: C = ""
+  } = O(), [b, M] = h(!1), [x, N] = h([]), [i, w] = h(0), o = J(), [$, Y] = h();
+  z(() => {
+    o && (B(o, R, I.Session).then(
+      (a = []) => N(a)
+    ), Z(
+      o,
+      R,
+      ee.Functional
+    ).then((a) => Y(() => a)));
+  }, [o]), z(() => {
+    o && B(o, R, I.Session).then(
+      (a = []) => {
+        x.forEach(
+          (n) => a.indexOf(n) === -1 && a.push(n)
+        ), $ && $(a);
+      }
+    );
+  }, [x, o, $]);
+  const d = K.filter(({ id: a }) => x.indexOf(a) === -1), { length: p } = d, [s, v] = h(
+    O().expandable
+  ), _ = te.useRef(null), f = o.get("$widget"), q = ae(t.id);
+  if (z(() => {
+    f.events.subscribe(
+      "notification:expandable",
+      (a, n) => {
+        n.notificationRowId === q.current && v(n.expandable);
+      }
+    );
+  }, [f.events]), !d.length)
+    return A(o, {
+      ...t,
+      className: y(e, "humany-notification-row")
+    });
+  const P = () => M(!b);
+  if (m) {
+    const a = d[i] || d[i + 1] || d[i - 1];
+    if (!a)
+      return A(o, {
+        ...t,
+        className: y(e, "humany-notification-row")
+      });
+    const { id: n, body: S } = a || {};
+    return !s && f.container.expandableNotifications && f.container.expandableNotifications.has(n) && v(!0), /* @__PURE__ */ k(
+      H,
+      {
+        ...t,
+        ...s ? { "aria-expanded": b, role: "button" } : {},
+        ...C ? { "aria-label": C } : {},
+        tabIndex: s ? 0 : -1,
+        className: y(e, "humany-notification-row"),
+        "data-pageable": p > 1,
+        "data-types": r,
+        "data-allow-paging": m,
+        "data-expandable": s,
+        ref: _,
+        onKeyDown: (g) => {
+          g.key === "Enter" && P();
+        },
+        onClick: P,
+        children: [
+          /* @__PURE__ */ l(
+            oe,
+            {
+              "aria-label": D,
+              onClick: () => {
+                w(d.indexOf(a)), N([...x, n]);
+              },
+              children: /* @__PURE__ */ l(T, { symbol: { type: "Svg", content: "close" } })
+            }
+          ),
+          /* @__PURE__ */ l(
+            L,
+            {
+              htmlParseInstruction: !s || b ? void 0 : ne,
+              "data-pageable": p > 1,
+              "data-notification": n,
+              "data-expandable": s,
+              "data-expanded": b,
+              html: S
+            }
+          ),
+          p > 1 && /* @__PURE__ */ k(ie, { children: [
+            /* @__PURE__ */ l(
+              E,
+              {
+                "data-testid": "page-left-button",
+                "aria-label": G,
+                "data-disabled": i === 0,
+                onClick: (g) => {
+                  g.stopPropagation(), i > 0 && w(i - 1);
+                },
+                children: /* @__PURE__ */ l(
+                  j,
+                  {
+                    size: 10,
+                    symbol: { type: "Svg", content: "caret-left" }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ k("span", { children: [
+              i + 1,
+              "/",
+              p
+            ] }),
+            /* @__PURE__ */ l(
+              E,
+              {
+                "data-testid": "page-right-button",
+                "aria-label": F,
+                "data-disabled": i + 1 >= p,
+                onClick: (g) => {
+                  g.stopPropagation(), i < p - 1 && w(i + 1);
+                },
+                children: /* @__PURE__ */ l(
+                  j,
+                  {
+                    size: 10,
+                    symbol: { type: "Svg", content: "caret-right" }
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ l(
+    H,
+    {
+      ...t,
+      className: y(e, "humany-notification-row"),
+      "data-pageable": !1,
+      "data-types": r,
+      "data-allow-paging": !1,
+      children: d.map((a) => {
+        if (!a)
+          return null;
+        const { id: n, body: S } = a;
+        return !s && f.container.expandableNotifications && f.container.expandableNotifications.has(n) && v(!0), /* @__PURE__ */ l(
+          L,
+          {
+            "data-pageable": !1,
+            "data-expandable": s,
+            "data-expanded": b,
+            "data-notification": n,
+            html: S
+          },
+          n
+        );
+      })
+    }
+  );
+}, H = c.div`
+  ${Q}
+  padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}} ${(e) => {
+  var t;
+  return ((t = e.theme.sizes) == null ? void 0 : t.cardinal) * 12;
+}}px;
+  background-color: ${(e) => {
+  var t, r, m;
+  return e["data-types"].length ? e["data-types"].indexOf("top") > -1 ? (t = e.theme.colors) == null ? void 0 : t.warning : e["data-types"].indexOf("bottom") > -1 ? "transparent" : (r = e.theme.colors) == null ? void 0 : r.primary : (m = e.theme.colors) == null ? void 0 : m.warning;
+}};
+  color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  border-radius: ${(e) => e.theme.borderRadius};
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  cursor: ${(e) => e["data-expandable"] ? "pointer" : "default"};
+  overflow: hidden;
+
+  i {
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  }
+
+  a {
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.link;
+}};
+    &:focus-visible {
+      ${U}
+    }
+  }
+
+  ${(e) => {
+  var t;
+  return !e["data-allow-paging"] && u`
+      flex-wrap: wrap;
+
+      > div {
+        min-width: 100%;
+        margin: ${((t = e.theme.sizes) == null ? void 0 : t.cardinal) * 2}px;
+      }
+    `;
+}};
+
+  ${(e) => u`
+      &:focus-visible {
+        .humany-html {
+          ${W(e)}
+        }
+      }
+    `}
+`, L = c(V)`
+  flex: 1;
+  font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+  line-height: 1.6em;
+  font-weight: 300;
+
+  ${(e) => e["data-expandable"] && !e["data-expanded"] && u`
+      max-width: 100%;
+
+      p {
+        display: none;
+        &:first-child {
+          display: block;
+          margin-bottom: 0;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    `}
+`, ie = c.div`
+  text-align: center;
+  width: 100%;
+  span {
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.small;
+}};
+    display: inline-block;
+    width: 30px;
+    text-align: center;
+  }
+`, E = c(X)`
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity 200ms ease-out;
+  justify-self: flex-end;
+  align-self: flex-start;
+  padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} svg {
+    display: block;
+  }
+
+  &:focus-visible {
+    ${W}
+  }
+
+  ${(e) => e["data-disabled"] ? u`
+          opacity: 0.8;
+        ` : u`
+          @media (hover) {
+            &:hover {
+              opacity: 0.5;
+            }
+          }
+        `}
+`, oe = c(E)`
+  position: absolute;
+  top: 7.5px;
+  right: 7.5px;
+  width: 25px;
+  height: auto;
+  padding: ${(e) => {
+  var t, r;
+  return `calc(${(t = e.theme.sizes) == null ? void 0 : t.small}/2) ${(r = e.theme.sizes) == null ? void 0 : r.small}`;
+}};
+  svg {
+    vertical-align: middle;
+    line,
+    path {
+      stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    }
+  }
+`, j = c(T)`
+  line {
+    stroke: #ffffff;
+  }
+`;
+c.div`
+  display: none;
+`;
+export {
+  me as default
+};

package/notification-row-component.d.ts

@@ -0,0 +1,16 @@
+import { Notification } from '../../../knowledge/core/src/index.ts';
+import { Container } from '@webprovisions/platform';
+
+type NotificationType = 'top' | 'middle' | 'bottom';
+export type NotificationRowComponentProps = {
+    types: NotificationType[];
+    allowPaging?: boolean;
+    notifications?: Notification[];
+    expandable?: boolean;
+    pageNextAriaLabel?: string;
+    pagePreviousAriaLabel?: string;
+    closeAriaLabel?: string;
+    expandAriaLabel?: string;
+};
+export declare const NotificationRowComponent: (container: Container) => Promise<void>;
+export default NotificationRowComponent;

package/notification-row.d.ts

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

package/package.json

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