@telia-ace/knowledge-widget-components-notification-list 1.0.16 → 1.0.19

package/dist/index.js

@@ -1,82 +1,63 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { createEventSubscriber, extendComponent } from "@telia-ace/knowledge-widget-core";
-import { DataType } from "@telia-ace/knowledge-widget-types-grid";
-import { createReactComponent } from "@telia-ace/knowledge-widget-ui";
-const NotificationListComponent = (container) => {
-  const { events } = container.get("$widget");
-  const [subscribe, unsubscribe] = createEventSubscriber(events);
-  return createReactComponent(container, "notification-list", import("./notification-list.js"), (component) => {
-    const fetch = (params) => {
-      component.writeProperties(__spreadProps(__spreadValues({}, component.properties()), {
-        loading: true,
+var m = Object.defineProperty, b = Object.defineProperties;
+var v = Object.getOwnPropertyDescriptors;
+var h = Object.getOwnPropertySymbols;
+var y = Object.prototype.hasOwnProperty, C = Object.prototype.propertyIsEnumerable;
+var d = (t, e, i) => e in t ? m(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, c = (t, e) => {
+  for (var i in e || (e = {}))
+    y.call(e, i) && d(t, i, e[i]);
+  if (h)
+    for (var i of h(e))
+      C.call(e, i) && d(t, i, e[i]);
+  return t;
+}, n = (t, e) => b(t, v(e));
+import { createEventSubscriber as L, extendComponent as w } from "@telia-ace/knowledge-widget-core";
+import { DataType as D } from "@telia-ace/knowledge-widget-types-grid";
+import { createReactComponent as P } from "@telia-ace/knowledge-widget-ui";
+const E = (t) => {
+  const { events: e } = t.get("$widget"), [i, u] = L(e);
+  return P(t, "notification-list", import("./notification-list.682419d0.js"), (a) => {
+    const o = (r) => {
+      a.writeProperties(n(c({}, a.properties()), {
+        loading: !0,
         error: void 0,
         notificationList: void 0
-      }));
-      component.actions.dispatch("fetch", { params });
+      })), a.actions.dispatch("fetch", { params: r });
     };
-    component.actions.create("fetch", ({ error, notificationLists }) => {
-      if (error) {
-        return component.actions.dispatch("fetched", {
-          error,
-          loading: true,
+    a.actions.create("fetch", ({ error: r, notificationLists: s }) => {
+      if (r)
+        return a.actions.dispatch("fetched", {
+          error: r,
+          loading: !0,
           notificationList: void 0
         });
-      }
-      const { category, notificationList } = component.properties();
-      const properties = {
-        notificationList: notificationLists.find((n) => n.id === category) || notificationList
+      const { category: f, notificationList: p } = a.properties(), g = {
+        notificationList: s.find((l) => l.id === f) || p
       };
-      return component.actions.dispatch("fetched", __spreadProps(__spreadValues({}, properties), {
-        loading: true
+      return a.actions.dispatch("fetched", n(c({}, g), {
+        loading: !0
       }));
+    }), a.actions.create("fetched", (r) => a.writeProperties(n(c({}, r), { loading: !1 }))), t.getAsync("router").then((r) => {
+      const { params: s } = r.getRouteData();
+      o(s);
+    }), i("router:changed", (r, { current: s }) => {
+      o(s.routeData.params);
     });
-    component.actions.create("fetched", (input) => {
-      return component.writeProperties(__spreadProps(__spreadValues({}, input), { loading: false }));
-    });
-    container.getAsync("router").then((router) => {
-      const { params } = router.getRouteData();
-      fetch(params);
-    });
-    subscribe("router:changed", (event, { current }) => {
-      fetch(current.routeData.params);
-    });
-  }).then(() => {
-    return extendComponent(container, "notification-list", (component) => {
-      component.actions.watch("notification-list.fetch", (input, next) => {
-        return container.getAsync("dataClient").then((dataClient) => dataClient.fetch(DataType.NotificationLists, {
-          categories: [
-            input.params.guideCategory,
-            input.params.contactCategory
-          ].filter((c) => !!c),
-          searchPhrase: input.params.phrase
-        })).then(next).catch((error) => {
-          if (error) {
-            return next(error);
-          }
-        });
-      });
-    });
-  }).then(() => {
-    unsubscribe();
+  }).then(() => w(t, "notification-list", (a) => {
+    a.actions.watch("notification-list.fetch", (o, r) => t.getAsync("dataClient").then((s) => s.fetch(D.NotificationLists, {
+      categories: [
+        o.params.guideCategory,
+        o.params.contactCategory
+      ].filter((f) => !!f),
+      searchPhrase: o.params.phrase
+    })).then(r).catch((s) => {
+      if (s)
+        return r(s);
+    }));
+  })).then(() => {
+    u();
   });
 };
-export { NotificationListComponent as default };
+export {
+  E as default
+};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/notification-list-component.ts"],"sourcesContent":["import {\r\n    createEventSubscriber,\r\n    extendComponent,\r\n    NotificationList,\r\n} from '@telia-ace/knowledge-widget-core';\r\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container, Widget } from '@webprovisions/platform';\r\n\r\nexport type NotificationListComponentProps = {\r\n    category?: string;\r\n    showHeader?: boolean;\r\n    notificationList?: NotificationList; // internal\r\n};\r\n\r\ntype FetchResults = NotificationResults & { error: any };\r\n\r\nexport const NotificationListComponent = (container: Container) => {\r\n    const { events }: Widget = container.get('$widget');\r\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n    return createReactComponent(\r\n        container,\r\n        'notification-list',\r\n        import('./notification-list'),\r\n        (component) => {\r\n            const fetch = (params: { [key: string]: any }) => {\r\n                component.writeProperties({\r\n                    ...component.properties<NotificationListComponentProps>(),\r\n                    loading: true,\r\n                    error: undefined,\r\n                    notificationList: undefined,\r\n                });\r\n                component.actions.dispatch('fetch', { params });\r\n            };\r\n\r\n            component.actions.create('fetch', ({ error, notificationLists }: FetchResults) => {\r\n                if (error) {\r\n                    return component.actions.dispatch('fetched', {\r\n                        error,\r\n                        loading: true,\r\n                        notificationList: undefined,\r\n                    });\r\n                }\r\n\r\n                const { category, notificationList } =\r\n                    component.properties<NotificationListComponentProps>();\r\n\r\n                const properties = {\r\n                    notificationList:\r\n                        notificationLists.find((n) => n.id === category) || notificationList,\r\n                };\r\n\r\n                return component.actions.dispatch('fetched', {\r\n                    ...properties,\r\n                    loading: true,\r\n                });\r\n            });\r\n\r\n            component.actions.create('fetched', (input) => {\r\n                return component.writeProperties({ ...input, loading: false });\r\n            });\r\n\r\n            container.getAsync('router').then((router) => {\r\n                const { params } = router.getRouteData();\r\n                fetch(params);\r\n            });\r\n\r\n            subscribe('router:changed', (event: any, { current }: any) => {\r\n                fetch(current.routeData.params);\r\n            });\r\n        }\r\n    )\r\n        .then(() => {\r\n            return extendComponent(container, 'notification-list', (component) => {\r\n                component.actions.watch('notification-list.fetch', (input, next) => {\r\n                    return container\r\n                        .getAsync('dataClient')\r\n                        .then((dataClient: DataClient) =>\r\n                            dataClient.fetch(DataType.NotificationLists, {\r\n                                categories: [\r\n                                    input.params.guideCategory,\r\n                                    input.params.contactCategory,\r\n                                ].filter((c) => !!c),\r\n                                searchPhrase: input.params.phrase,\r\n                            })\r\n                        )\r\n                        .then(next)\r\n                        .catch((error) => {\r\n                            if (error) {\r\n                                return next(error);\r\n                            }\r\n                        });\r\n                });\r\n            });\r\n        })\r\n        .then(() => {\r\n            unsubscribe();\r\n        });\r\n};\r\n\r\nexport default NotificationListComponent;\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBa,MAAA,4BAA4B,CAAC,cAAyB;AAC/D,QAAM,EAAE,WAAmB,UAAU,IAAI,SAAS;AAClD,QAAM,CAAC,WAAW,eAAe,sBAAsB,MAAM;AAE7D,SAAO,qBACH,WACA,qBACA,OAAO,2BACP,CAAC,cAAc;AACL,UAAA,QAAQ,CAAC,WAAmC;AAC9C,gBAAU,gBAAgB,iCACnB,UAAU,WAA2C,IADlC;AAAA,QAEtB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,kBAAkB;AAAA,MAAA,EACrB;AACD,gBAAU,QAAQ,SAAS,SAAS,EAAE,OAAQ,CAAA;AAAA,IAAA;AAGlD,cAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,OAAO,wBAAsC;AAC9E,UAAI,OAAO;AACA,eAAA,UAAU,QAAQ,SAAS,WAAW;AAAA,UACzC;AAAA,UACA,SAAS;AAAA,UACT,kBAAkB;AAAA,QAAA,CACrB;AAAA,MACL;AAEA,YAAM,EAAE,UAAU,qBACd,UAAU,WAA2C;AAEzD,YAAM,aAAa;AAAA,QACf,kBACI,kBAAkB,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ,KAAK;AAAA,MAAA;AAGrD,aAAA,UAAU,QAAQ,SAAS,WAAW,iCACtC,aADsC;AAAA,QAEzC,SAAS;AAAA,MAAA,EACZ;AAAA,IAAA,CACJ;AAED,cAAU,QAAQ,OAAO,WAAW,CAAC,UAAU;AAC3C,aAAO,UAAU,gBAAgB,iCAAK,QAAL,EAAY,SAAS,QAAO;AAAA,IAAA,CAChE;AAED,cAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,WAAW;AACpC,YAAA,EAAE,WAAW,OAAO,aAAa;AACvC,YAAM,MAAM;AAAA,IAAA,CACf;AAED,cAAU,kBAAkB,CAAC,OAAY,EAAE,cAAmB;AACpD,YAAA,QAAQ,UAAU,MAAM;AAAA,IAAA,CACjC;AAAA,EAAA,CAET,EACK,KAAK,MAAM;AACR,WAAO,gBAAgB,WAAW,qBAAqB,CAAC,cAAc;AAClE,gBAAU,QAAQ,MAAM,2BAA2B,CAAC,OAAO,SAAS;AACzD,eAAA,UACF,SAAS,YAAY,EACrB,KAAK,CAAC,eACH,WAAW,MAAM,SAAS,mBAAmB;AAAA,UACzC,YAAY;AAAA,YACR,MAAM,OAAO;AAAA,YACb,MAAM,OAAO;AAAA,YACf,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,UACnB,cAAc,MAAM,OAAO;AAAA,QAAA,CAC9B,CACL,EACC,KAAK,IAAI,EACT,MAAM,CAAC,UAAU;AACd,cAAI,OAAO;AACP,mBAAO,KAAK,KAAK;AAAA,UACrB;AAAA,QAAA,CACH;AAAA,MAAA,CACR;AAAA,IAAA,CACJ;AAAA,EAAA,CACJ,EACA,KAAK,MAAM;AACI;EAAA,CACf;AACT;;"}
+{"version":3,"file":"index.js","sources":["../src/notification-list-component.ts"],"sourcesContent":["import {\r\n    createEventSubscriber,\r\n    extendComponent,\r\n    NotificationList,\r\n} from '@telia-ace/knowledge-widget-core';\r\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container, Widget } from '@webprovisions/platform';\r\n\r\nexport type NotificationListComponentProps = {\r\n    category?: string;\r\n    showHeader?: boolean;\r\n    notificationList?: NotificationList; // internal\r\n};\r\n\r\ntype FetchResults = NotificationResults & { error: any };\r\n\r\nexport const NotificationListComponent = (container: Container) => {\r\n    const { events }: Widget = container.get('$widget');\r\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n    return createReactComponent(\r\n        container,\r\n        'notification-list',\r\n        import('./notification-list'),\r\n        (component) => {\r\n            const fetch = (params: { [key: string]: any }) => {\r\n                component.writeProperties({\r\n                    ...component.properties<NotificationListComponentProps>(),\r\n                    loading: true,\r\n                    error: undefined,\r\n                    notificationList: undefined,\r\n                });\r\n                component.actions.dispatch('fetch', { params });\r\n            };\r\n\r\n            component.actions.create('fetch', ({ error, notificationLists }: FetchResults) => {\r\n                if (error) {\r\n                    return component.actions.dispatch('fetched', {\r\n                        error,\r\n                        loading: true,\r\n                        notificationList: undefined,\r\n                    });\r\n                }\r\n\r\n                const { category, notificationList } =\r\n                    component.properties<NotificationListComponentProps>();\r\n\r\n                const properties = {\r\n                    notificationList:\r\n                        notificationLists.find((n) => n.id === category) || notificationList,\r\n                };\r\n\r\n                return component.actions.dispatch('fetched', {\r\n                    ...properties,\r\n                    loading: true,\r\n                });\r\n            });\r\n\r\n            component.actions.create('fetched', (input) => {\r\n                return component.writeProperties({ ...input, loading: false });\r\n            });\r\n\r\n            container.getAsync('router').then((router) => {\r\n                const { params } = router.getRouteData();\r\n                fetch(params);\r\n            });\r\n\r\n            subscribe('router:changed', (event: any, { current }: any) => {\r\n                fetch(current.routeData.params);\r\n            });\r\n        }\r\n    )\r\n        .then(() => {\r\n            return extendComponent(container, 'notification-list', (component) => {\r\n                component.actions.watch('notification-list.fetch', (input, next) => {\r\n                    return container\r\n                        .getAsync('dataClient')\r\n                        .then((dataClient: DataClient) =>\r\n                            dataClient.fetch(DataType.NotificationLists, {\r\n                                categories: [\r\n                                    input.params.guideCategory,\r\n                                    input.params.contactCategory,\r\n                                ].filter((c) => !!c),\r\n                                searchPhrase: input.params.phrase,\r\n                            })\r\n                        )\r\n                        .then(next)\r\n                        .catch((error) => {\r\n                            if (error) {\r\n                                return next(error);\r\n                            }\r\n                        });\r\n                });\r\n            });\r\n        })\r\n        .then(() => {\r\n            unsubscribe();\r\n        });\r\n};\r\n\r\nexport default NotificationListComponent;\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiBa,MAAA,IAA4B,CAAC,MAAyB;AAC/D,QAAM,EAAE,cAAmB,EAAU,IAAI,SAAS,GAC5C,CAAC,GAAW,KAAe,EAAsB,CAAM;AAE7D,SAAO,EACH,GACA,qBACA,OAAO,oCACP,CAAC,MAAc;AACL,UAAA,IAAQ,CAAC,MAAmC;AAC9C,QAAU,gBAAgB,QACnB,EAAU,WAA2C,IADlC;AAAA,QAEtB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,kBAAkB;AAAA,MAAA,EACrB,GACD,EAAU,QAAQ,SAAS,SAAS,EAAE,UAAQ,CAAA;AAAA,IAAA;AAGlD,MAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,UAAO,2BAAsC;AAC9E,UAAI;AACO,eAAA,EAAU,QAAQ,SAAS,WAAW;AAAA,UACzC;AAAA,UACA,SAAS;AAAA,UACT,kBAAkB;AAAA,QAAA,CACrB;AAGL,YAAM,EAAE,aAAU,wBACd,EAAU,WAA2C,GAEnD,IAAa;AAAA,QACf,kBACI,EAAkB,KAAK,CAAC,MAAM,EAAE,OAAO,CAAQ,KAAK;AAAA,MAAA;AAGrD,aAAA,EAAU,QAAQ,SAAS,WAAW,QACtC,IADsC;AAAA,QAEzC,SAAS;AAAA,MAAA,EACZ;AAAA,IAAA,CACJ,GAED,EAAU,QAAQ,OAAO,WAAW,CAAC,MAC1B,EAAU,gBAAgB,QAAK,IAAL,EAAY,SAAS,KAAO,CAChE,GAED,EAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,MAAW;AACpC,YAAA,EAAE,cAAW,EAAO,aAAa;AACvC,QAAM,CAAM;AAAA,IAAA,CACf,GAED,EAAU,kBAAkB,CAAC,GAAY,EAAE,iBAAmB;AACpD,QAAA,EAAQ,UAAU,MAAM;AAAA,IAAA,CACjC;AAAA,EAAA,CAET,EACK,KAAK,MACK,EAAgB,GAAW,qBAAqB,CAAC,MAAc;AAClE,MAAU,QAAQ,MAAM,2BAA2B,CAAC,GAAO,MAChD,EACF,SAAS,YAAY,EACrB,KAAK,CAAC,MACH,EAAW,MAAM,EAAS,mBAAmB;AAAA,MACzC,YAAY;AAAA,QACR,EAAM,OAAO;AAAA,QACb,EAAM,OAAO;AAAA,QACf,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,MACnB,cAAc,EAAM,OAAO;AAAA,IAAA,CAC9B,CACL,EACC,KAAK,CAAI,EACT,MAAM,CAAC,MAAU;AACd,UAAI;AACA,eAAO,EAAK,CAAK;AAAA,IACrB,CACH,CACR;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI;EAAA,CACf;AACT;"}

package/dist/notification-list.682419d0.js

@@ -0,0 +1,192 @@
+var Y = Object.defineProperty, D = Object.defineProperties;
+var H = Object.getOwnPropertyDescriptors;
+var m = Object.getOwnPropertySymbols;
+var x = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
+var w = (t, e, a) => e in t ? Y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[e] = a, h = (t, e) => {
+  for (var a in e || (e = {}))
+    x.call(e, a) && w(t, a, e[a]);
+  if (m)
+    for (var a of m(e))
+      E.call(e, a) && w(t, a, e[a]);
+  return t;
+}, f = (t, e) => D(t, H(e));
+var v = (t, e) => {
+  var a = {};
+  for (var n in t)
+    x.call(t, n) && e.indexOf(n) < 0 && (a[n] = t[n]);
+  if (t != null && m)
+    for (var n of m(t))
+      e.indexOf(n) < 0 && E.call(t, n) && (a[n] = t[n]);
+  return a;
+};
+import { useContainer as N, useProperties as P, createEmptyComponent as j, DateFormats as F, Loader as M, Button as O, borderTabStyle as _, ItemList as R, loadingOpacity as q, contentBox as A, itemList as G, headingElement as J, Paragraph as K, genericHtml as Q, SymbolBadge as U, Timestamp as V } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as S } from "@telia-ace/widget-utilities";
+import o, { useState as W } from "react";
+import l, { css as s } from "styled-components";
+const re = (a) => {
+  var n = a, { className: t } = n, e = v(n, ["className"]);
+  const [r, z] = W(null), L = N(), {
+    showHeader: y,
+    notificationList: k,
+    loading: d = !1
+  } = P(), {
+    id: B,
+    title: C,
+    symbol: I,
+    notifications: g = [],
+    defaultHeaderOptions: T = { visible: !0 }
+  } = k || {};
+  return !g.length && !d ? j(L, f(h({}, e), {
+    className: S(t, "humany-notification-list")
+  })) : /* @__PURE__ */ o.createElement(Z, f(h({}, e), {
+    "data-loading": d,
+    "data-show-header": typeof y == "boolean" ? y : T.visible,
+    className: S(t, "humany-notification-list"),
+    "data-notification-category": B,
+    header: C,
+    symbol: I,
+    items: g,
+    renderItem: ({ id: i, title: p, body: u, modified: $, expandable: b }) => /* @__PURE__ */ o.createElement(ee, {
+      key: i,
+      "data-notification": i,
+      "data-expanded": b ? r === i : !0
+    }, b ? /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(X, {
+      title: p,
+      "aria-label": p,
+      "aria-expanded": r === i,
+      onClick: () => z(r === i ? null : i)
+    }, /* @__PURE__ */ o.createElement("span", null, p), /* @__PURE__ */ o.createElement(te, {
+      size: 11,
+      symbol: {
+        type: "Svg",
+        content: `caret-${r === i ? "up" : "down"}`
+      }
+    })), /* @__PURE__ */ o.createElement(c, {
+      html: u
+    }), $ && /* @__PURE__ */ o.createElement(ae, {
+      format: F.YYYY_MM_DD,
+      timestamp: $
+    })) : /* @__PURE__ */ o.createElement(c, {
+      html: u
+    }))
+  }), /* @__PURE__ */ o.createElement(M, {
+    loading: d
+  }));
+}, X = l(O)`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+    svg,
+    i {
+        color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+    }
+    span {
+        color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.text;
+}};
+        font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.normal;
+}};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        white-space: nowrap;
+    }
+    &:focus {
+        ${(t) => {
+  var e, a;
+  return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && s`
+                ${_}
+                span {
+                    color: ${(a = t.theme.colors) == null ? void 0 : a.primary};
+                    text-decoration: underline;
+                }
+            `;
+}};
+    }
+`, Z = l(R)`
+    ${q}
+    ${A}
+  ${G}
+  overflow: hidden;
+    justify-content: flex-start;
+    padding: ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.large;
+}};
+    ${(t) => !t["data-show-header"] && s`
+            > div {
+                ${J("h1", s`
+                        display: none;
+                    `)}
+            }
+        `}
+
+    @media (hover: hover) {
+        button:hover {
+            text-decoration: underline;
+        }
+    }
+`, c = l(K)`
+    ${Q}
+    font-weight: 300;
+
+    p {
+        white-space: normal;
+    }
+`, ee = l.li`
+    ${c} {
+        display: none;
+        &:not(:only-child) {
+            ${(t) => {
+  var e, a, n;
+  return ((e = t.theme.sizes) == null ? void 0 : e.cardinal) && ((a = t.theme.sizes) == null ? void 0 : a.normal) && s`
+                    margin: ${(n = t.theme.sizes) == null ? void 0 : n.normal} 0;
+                `;
+}}
+        }
+    }
+
+    ${(t) => t["data-expanded"] && s`
+            ${c} {
+                display: block;
+            }
+        `}
+
+    > span {
+        display: block;
+        font-weight: 300;
+        color: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.accent;
+}};
+    }
+`, te = l(U)`
+    margin: 0 0 0 ${(t) => {
+  var e;
+  return (e = t.theme.sizes) == null ? void 0 : e.small;
+}};
+    line {
+        stroke: ${(t) => {
+  var e;
+  return (e = t.theme.colors) == null ? void 0 : e.primary;
+}};
+    }
+`, ae = l(V)`
+    font-size: ${(t) => {
+  var e;
+  return (e = t.theme.fonts) == null ? void 0 : e.small;
+}};
+    font-weight: 300;
+`;
+export {
+  re as default
+};
+//# sourceMappingURL=notification-list.682419d0.js.map

package/dist/notification-list.682419d0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-list.682419d0.js","sources":["../src/notification-list.tsx"],"sourcesContent":["import { Notification } from '@telia-ace/knowledge-widget-core';\r\nimport {\r\n    borderTabStyle,\r\n    Button,\r\n    contentBox,\r\n    createEmptyComponent,\r\n    DateFormats,\r\n    genericHtml,\r\n    headingElement,\r\n    ItemList,\r\n    itemList,\r\n    Loader,\r\n    loadingOpacity,\r\n    Paragraph,\r\n    SymbolBadge,\r\n    Timestamp,\r\n    useContainer,\r\n    useProperties,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { NotificationListComponentProps } from './notification-list-component';\r\n\r\ntype Props = {\r\n    className: string;\r\n};\r\n\r\nconst NotificationList: React.SFC<Props> = ({ className, ...other }) => {\r\n    const [expanded, setExpanded] = useState<string | null>(null);\r\n    const container = useContainer();\r\n    const {\r\n        showHeader,\r\n        notificationList,\r\n        loading = false,\r\n    } = useProperties<NotificationListComponentProps>();\r\n\r\n    const {\r\n        id,\r\n        title,\r\n        symbol,\r\n        notifications = [],\r\n        defaultHeaderOptions = { visible: true },\r\n    } = notificationList || {};\r\n\r\n    if (!notifications.length && !loading) {\r\n        return createEmptyComponent(container, {\r\n            ...other,\r\n            className: appendClassNames(className, 'humany-notification-list'),\r\n        });\r\n    }\r\n\r\n    return (\r\n        <StyledItemList\r\n            {...other}\r\n            data-loading={loading}\r\n            data-show-header={\r\n                typeof showHeader === 'boolean' ? showHeader : defaultHeaderOptions.visible\r\n            }\r\n            className={appendClassNames(className, 'humany-notification-list')}\r\n            data-notification-category={id}\r\n            header={title}\r\n            symbol={symbol}\r\n            items={notifications}\r\n            renderItem={({ id, title, body, modified, expandable }: Notification) => (\r\n                <StyledItem\r\n                    key={id}\r\n                    data-notification={id}\r\n                    data-expanded={expandable ? expanded === id : true}\r\n                >\r\n                    {expandable ? (\r\n                        <>\r\n                            <StyledButton\r\n                                title={title}\r\n                                aria-label={title}\r\n                                aria-expanded={expanded === id}\r\n                                onClick={() => setExpanded(expanded === id ? null : id)}\r\n                            >\r\n                                <span>{title}</span>\r\n                                <StyledSymbolBadge\r\n                                    size={11}\r\n                                    symbol={{\r\n                                        type: 'Svg',\r\n                                        content: `caret-${expanded === id ? 'up' : 'down'}`,\r\n                                    }}\r\n                                />\r\n                            </StyledButton>\r\n                            <StyledParagraph html={body} />\r\n                            {modified && (\r\n                                <StyledTimestamp\r\n                                    format={DateFormats.YYYY_MM_DD}\r\n                                    timestamp={modified}\r\n                                />\r\n                            )}\r\n                        </>\r\n                    ) : (\r\n                        <StyledParagraph html={body} />\r\n                    )}\r\n                </StyledItem>\r\n            )}\r\n        >\r\n            <Loader loading={loading} />\r\n        </StyledItemList>\r\n    );\r\n};\r\n\r\nconst StyledButton = styled(Button)`\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 100%;\r\n    text-align: left;\r\n    svg,\r\n    i {\r\n        color: ${(p) => p.theme.colors?.primary};\r\n    }\r\n    span {\r\n        color: ${(p) => p.theme.colors?.text};\r\n        font-size: ${(p) => p.theme.fonts?.normal};\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n        flex: 1;\r\n        white-space: nowrap;\r\n    }\r\n    &:focus {\r\n        ${(p) =>\r\n            p.theme.accessibility?.isTabbing &&\r\n            css`\r\n                ${borderTabStyle}\r\n                span {\r\n                    color: ${p.theme.colors?.primary};\r\n                    text-decoration: underline;\r\n                }\r\n            `};\r\n    }\r\n`;\r\n\r\nconst StyledItemList = styled(ItemList)<\r\n    {\r\n        'data-loading': boolean;\r\n        'data-show-header': boolean;\r\n    } & any\r\n>`\r\n    ${loadingOpacity}\r\n    ${contentBox}\r\n  ${itemList}\r\n  overflow: hidden;\r\n    justify-content: flex-start;\r\n    padding: ${(p) => p.theme.sizes?.large};\r\n    ${(p) =>\r\n        !p['data-show-header'] &&\r\n        css`\r\n            > div {\r\n                ${headingElement(\r\n                    'h1',\r\n                    css`\r\n                        display: none;\r\n                    `\r\n                )}\r\n            }\r\n        `}\r\n\r\n    @media (hover: hover) {\r\n        button:hover {\r\n            text-decoration: underline;\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledParagraph = styled(Paragraph)`\r\n    ${genericHtml}\r\n    font-weight: 300;\r\n\r\n    p {\r\n        white-space: normal;\r\n    }\r\n`;\r\n\r\nconst StyledItem = styled.li<{ 'data-expanded': boolean }>`\r\n    ${StyledParagraph} {\r\n        display: none;\r\n        &:not(:only-child) {\r\n            ${(p) =>\r\n                p.theme.sizes?.cardinal &&\r\n                p.theme.sizes?.normal &&\r\n                css`\r\n                    margin: ${p.theme.sizes?.normal} 0;\r\n                `}\r\n        }\r\n    }\r\n\r\n    ${(p) =>\r\n        p['data-expanded'] &&\r\n        css`\r\n            ${StyledParagraph} {\r\n                display: block;\r\n            }\r\n        `}\r\n\r\n    > span {\r\n        display: block;\r\n        font-weight: 300;\r\n        color: ${(p) => p.theme.colors?.accent};\r\n    }\r\n`;\r\n\r\nconst StyledSymbolBadge = styled(SymbolBadge)`\r\n    margin: 0 0 0 ${(p) => p.theme.sizes?.small};\r\n    line {\r\n        stroke: ${(p) => p.theme.colors?.primary};\r\n    }\r\n`;\r\n\r\nconst StyledTimestamp = styled(Timestamp)`\r\n    font-size: ${(p) => p.theme.fonts?.small};\r\n    font-weight: 300;\r\n`;\r\n\r\nexport default NotificationList;\r\n"],"names":[],"mappings":"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"}

package/dist/notification-list.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 declare type Props = {
     className: string;
 };
-declare const NotificationList: React.FC<Props>;
+declare const NotificationList: React.SFC<Props>;
 export default NotificationList;

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@telia-ace/knowledge-widget-components-notification-list",
-    "version": "1.0.16",
+    "version": "1.0.19",
     "description": "Notification list component for ACE Knowledge Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
     "keywords": [
         "telia"
     ],
-    "source": "src/index.ts",
-    "module": "dist/index.js",
+    "main": "dist/index.js",
+    "type": "module",
     "types": "dist/index.d.ts",
     "files": [
         "LICENSE.txt",
@@ -25,9 +25,9 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@telia-ace/knowledge-widget-core": "^1.0.13",
-        "@telia-ace/knowledge-widget-types-grid": "^1.0.22",
-        "@telia-ace/knowledge-widget-ui": "^1.0.19",
+        "@telia-ace/knowledge-widget-core": "^1.0.17",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.26",
+        "@telia-ace/knowledge-widget-ui": "^1.0.23",
         "@telia-ace/widget-utilities": "^1.0.2",
         "@webprovisions/platform": "^1.1.2"
     },
@@ -41,5 +41,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "43581cc2553504251c952d927cc6c6743d2412ec"
+    "gitHead": "44efbdca7f57d6997132792020922c89b013c44d"
 }

package/dist/notification-list.js

@@ -1,60 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { useContainer, useProperties, createEmptyComponent, NotificationList as NotificationList$1, contentBox } from "@telia-ace/knowledge-widget-ui";
-import { appendClassNames } from "@telia-ace/widget-utilities";
-import React from "react";
-import styled from "styled-components";
-const NotificationList = (_a) => {
-  var _b = _a, { className } = _b, other = __objRest(_b, ["className"]);
-  const container = useContainer();
-  const {
-    showHeader,
-    notificationList,
-    loading = false
-  } = useProperties();
-  if (!(notificationList == null ? void 0 : notificationList.notifications.length) && !loading) {
-    return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
-      className: appendClassNames(className, "humany-notification-list")
-    }));
-  }
-  return /* @__PURE__ */ React.createElement(StyledNotificationList, __spreadProps(__spreadValues({}, other), {
-    className,
-    notificationList,
-    loading,
-    showHeader
-  }));
-};
-const StyledNotificationList = styled(NotificationList$1)`
-    ${contentBox}
-`;
-export { NotificationList as default };
-//# sourceMappingURL=notification-list.js.map

package/dist/notification-list.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"notification-list.js","sources":["../src/notification-list.tsx"],"sourcesContent":["import {\r\n    contentBox,\r\n    createEmptyComponent,\r\n    NotificationList as NotificationListUi,\r\n    useContainer,\r\n    useProperties,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport { NotificationListComponentProps } from './notification-list-component';\r\n\r\ntype Props = {\r\n    className: string;\r\n};\r\n\r\nconst NotificationList: React.FC<Props> = ({ className, ...other }) => {\r\n    const container = useContainer();\r\n    const {\r\n        showHeader,\r\n        notificationList,\r\n        loading = false,\r\n    } = useProperties<NotificationListComponentProps>();\r\n\r\n    if (!notificationList?.notifications.length && !loading) {\r\n        return createEmptyComponent(container, {\r\n            ...other,\r\n            className: appendClassNames(className, 'humany-notification-list'),\r\n        });\r\n    }\r\n\r\n    return (\r\n        <StyledNotificationList\r\n            {...other}\r\n            className={className}\r\n            notificationList={notificationList}\r\n            loading={loading}\r\n            showHeader={showHeader}\r\n        />\r\n    );\r\n};\r\n\r\nconst StyledNotificationList = styled(NotificationListUi)`\r\n    ${contentBox}\r\n`;\r\n\r\nexport default NotificationList;\r\n"],"names":["NotificationListUi"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,mBAAoC,CAAC,OAA4B;AAA5B,eAAE,gBAAF,IAAgB,kBAAhB,IAAgB,CAAd;AACzC,QAAM,YAAY;AACZ,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA,UAAU;AAAA,MACV,cAA8C;AAElD,MAAI,CAAC,sDAAkB,cAAc,WAAU,CAAC,SAAS;AACrD,WAAO,qBAAqB,WAAW,iCAChC,QADgC;AAAA,MAEnC,WAAW,iBAAiB,WAAW,0BAA0B;AAAA,IAAA,EACpE;AAAA,EACL;AAEA,SACK,sBAAA,cAAA,wBAAA,iCACO,QADP;AAAA,IAEG;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACJ;AAER;AAEA,MAAM,yBAAyB,OAAOA,kBAAkB;AAAA,MAClD;AAAA;;"}