@telia-ace/knowledge-widget-components-notification-list 1.0.22 → 1.0.24-next.0

package/LICENSE.txt

@@ -1,6 +1,6 @@
-Copyright © 2021, Telia Company AB. All rights reserved.
-
-THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
-THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
-AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
+Copyright © 2021, Telia Company AB. All rights reserved.
+
+THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
+THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
+AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
 http://www.humany.com/legal

package/README.md

@@ -1,3 +1,3 @@
-# `@telia-ace/knowledge-widget-components-notification-list`
-
-Notification list component for ACE Knowledge Widgets.
+# `@telia-ace/knowledge-widget-components-notification-list`
+
+Notification list component for ACE Knowledge Widgets.

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import NotificationListComponent from './notification-list-component';
-export default NotificationListComponent;
+import NotificationListComponent from './notification-list-component';
+export default NotificationListComponent;

package/dist/index.js

@@ -15,41 +15,48 @@ 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
-      })), a.actions.dispatch("fetch", { params: r });
-    };
-    a.actions.create("fetch", ({ error: r, notificationLists: s }) => {
-      if (r)
-        return a.actions.dispatch("fetched", {
-          error: r,
+  return P(
+    t,
+    "notification-list",
+    import("./notification-list.ba190f64.js"),
+    (a) => {
+      const o = (r) => {
+        a.writeProperties(n(c({}, a.properties()), {
           loading: !0,
+          error: void 0,
           notificationList: void 0
-        });
-      const { category: f, notificationList: p } = a.properties(), g = {
-        notificationList: s.find((l) => l.id === f) || p
+        })), a.actions.dispatch("fetch", { params: r });
       };
-      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);
-    });
-  }).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) => {
+      a.actions.create("fetch", ({ error: r, notificationLists: s }) => {
+        if (r)
+          return a.actions.dispatch("fetched", {
+            error: r,
+            loading: !0,
+            notificationList: void 0
+          });
+        const { category: f, notificationList: p } = a.properties(), g = {
+          notificationList: s.find((l) => l.id === f) || p
+        };
+        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);
+      });
+    }
+  ).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);
     }));

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,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;"}
+{"version":3,"file":"index.js","sources":["../src/notification-list-component.ts"],"sourcesContent":["import {\n    createEventSubscriber,\n    extendComponent,\n    NotificationList,\n} from '@telia-ace/knowledge-widget-core';\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\nimport { Container, Widget } from '@webprovisions/platform';\n\nexport type NotificationListComponentProps = {\n    category?: string;\n    showHeader?: boolean;\n    notificationList?: NotificationList; // internal\n};\n\ntype FetchResults = NotificationResults & { error: any };\n\nexport const NotificationListComponent = (container: Container) => {\n    const { events }: Widget = container.get('$widget');\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n    return createReactComponent(\n        container,\n        'notification-list',\n        import('./notification-list'),\n        (component) => {\n            const fetch = (params: { [key: string]: any }) => {\n                component.writeProperties({\n                    ...component.properties<NotificationListComponentProps>(),\n                    loading: true,\n                    error: undefined,\n                    notificationList: undefined,\n                });\n                component.actions.dispatch('fetch', { params });\n            };\n\n            component.actions.create('fetch', ({ error, notificationLists }: FetchResults) => {\n                if (error) {\n                    return component.actions.dispatch('fetched', {\n                        error,\n                        loading: true,\n                        notificationList: undefined,\n                    });\n                }\n\n                const { category, notificationList } =\n                    component.properties<NotificationListComponentProps>();\n\n                const properties = {\n                    notificationList:\n                        notificationLists.find((n) => n.id === category) || notificationList,\n                };\n\n                return component.actions.dispatch('fetched', {\n                    ...properties,\n                    loading: true,\n                });\n            });\n\n            component.actions.create('fetched', (input) => {\n                return component.writeProperties({ ...input, loading: false });\n            });\n\n            container.getAsync('router').then((router) => {\n                const { params } = router.getRouteData();\n                fetch(params);\n            });\n\n            subscribe('router:changed', (event: any, { current }: any) => {\n                fetch(current.routeData.params);\n            });\n        }\n    )\n        .then(() => {\n            return extendComponent(container, 'notification-list', (component) => {\n                component.actions.watch('notification-list.fetch', (input, next) => {\n                    return container\n                        .getAsync('dataClient')\n                        .then((dataClient: DataClient) =>\n                            dataClient.fetch(DataType.NotificationLists, {\n                                categories: [\n                                    input.params.guideCategory,\n                                    input.params.contactCategory,\n                                ].filter((c) => !!c),\n                                searchPhrase: input.params.phrase,\n                            })\n                        )\n                        .then(next)\n                        .catch((error) => {\n                            if (error) {\n                                return next(error);\n                            }\n                        });\n                });\n            });\n        })\n        .then(() => {\n            unsubscribe();\n        });\n};\n\nexport default NotificationListComponent;\n"],"names":["NotificationListComponent","container","events","subscribe","unsubscribe","createEventSubscriber","createReactComponent","component","fetch","params","__spreadProps","__spreadValues","error","notificationLists","category","notificationList","properties","n","input","router","event","current","extendComponent","next","dataClient","DataType","c"],"mappings":";;;;;;;;;;;;;;;AAiBa,MAAAA,IAA4B,CAACC,MAAyB;AAC/D,QAAM,EAAE,QAAAC,EAAmB,IAAAD,EAAU,IAAI,SAAS,GAC5C,CAACE,GAAWC,CAAW,IAAIC,EAAsBH,CAAM;AAEtD,SAAAI;AAAA,IACHL;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,CAACM,MAAc;AACL,YAAAC,IAAQ,CAACC,MAAmC;AAC9C,QAAAF,EAAU,gBAAgBG,EAAAC,EAAA,IACnBJ,EAAU,WAA2C,IADlC;AAAA,UAEtB,SAAS;AAAA,UACT,OAAO;AAAA,UACP,kBAAkB;AAAA,QAAA,EACrB,GACDA,EAAU,QAAQ,SAAS,SAAS,EAAE,QAAAE,EAAQ,CAAA;AAAA,MAAA;AAGlD,MAAAF,EAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,OAAAK,GAAO,mBAAAC,QAAsC;AAC9E,YAAID;AACO,iBAAAL,EAAU,QAAQ,SAAS,WAAW;AAAA,YACzC,OAAAK;AAAA,YACA,SAAS;AAAA,YACT,kBAAkB;AAAA,UAAA,CACrB;AAGL,cAAM,EAAE,UAAAE,GAAU,kBAAAC,EAAiB,IAC/BR,EAAU,WAA2C,GAEnDS,IAAa;AAAA,UACf,kBACIH,EAAkB,KAAK,CAACI,MAAMA,EAAE,OAAOH,CAAQ,KAAKC;AAAA,QAAA;AAGrD,eAAAR,EAAU,QAAQ,SAAS,WAAWG,EAAAC,EAAA,IACtCK,IADsC;AAAA,UAEzC,SAAS;AAAA,QAAA,EACZ;AAAA,MAAA,CACJ,GAEDT,EAAU,QAAQ,OAAO,WAAW,CAACW,MAC1BX,EAAU,gBAAgBG,EAAAC,EAAA,IAAKO,IAAL,EAAY,SAAS,KAAO,CAChE,GAEDjB,EAAU,SAAS,QAAQ,EAAE,KAAK,CAACkB,MAAW;AAC1C,cAAM,EAAE,QAAAV,EAAA,IAAWU,EAAO,aAAa;AACvC,QAAAX,EAAMC,CAAM;AAAA,MAAA,CACf,GAEDN,EAAU,kBAAkB,CAACiB,GAAY,EAAE,SAAAC,QAAmB;AACpD,QAAAb,EAAAa,EAAQ,UAAU,MAAM;AAAA,MAAA,CACjC;AAAA,IACL;AAAA,EACJ,EACK,KAAK,MACKC,EAAgBrB,GAAW,qBAAqB,CAACM,MAAc;AAClE,IAAAA,EAAU,QAAQ,MAAM,2BAA2B,CAACW,GAAOK,MAChDtB,EACF,SAAS,YAAY,EACrB;AAAA,MAAK,CAACuB,MACHA,EAAW,MAAMC,EAAS,mBAAmB;AAAA,QACzC,YAAY;AAAA,UACRP,EAAM,OAAO;AAAA,UACbA,EAAM,OAAO;AAAA,UACf,OAAO,CAACQ,MAAM,CAAC,CAACA,CAAC;AAAA,QACnB,cAAcR,EAAM,OAAO;AAAA,MAAA,CAC9B;AAAA,MAEJ,KAAKK,CAAI,EACT,MAAM,CAACX,MAAU;AACd,UAAIA;AACA,eAAOW,EAAKX,CAAK;AAAA,IACrB,CACH,CACR;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI,IAAAR;EAAA,CACf;AACT;"}

package/dist/notification-list-component.d.ts

@@ -1,9 +1,9 @@
-import { NotificationList } from '@telia-ace/knowledge-widget-core';
-import { Container } from '@webprovisions/platform';
-export declare type NotificationListComponentProps = {
-    category?: string;
-    showHeader?: boolean;
-    notificationList?: NotificationList;
-};
-export declare const NotificationListComponent: (container: Container) => Promise<void>;
-export default NotificationListComponent;
+import { NotificationList } from '@telia-ace/knowledge-widget-core';
+import { Container } from '@webprovisions/platform';
+export declare type NotificationListComponentProps = {
+    category?: string;
+    showHeader?: boolean;
+    notificationList?: NotificationList;
+};
+export declare const NotificationListComponent: (container: Container) => Promise<void>;
+export default NotificationListComponent;

package/dist/notification-list.ba190f64.js

@@ -0,0 +1,47 @@
+var N = Object.defineProperty, y = Object.defineProperties;
+var C = Object.getOwnPropertyDescriptors;
+var a = Object.getOwnPropertySymbols;
+var f = Object.prototype.hasOwnProperty, p = Object.prototype.propertyIsEnumerable;
+var m = (t, o, i) => o in t ? N(t, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[o] = i, s = (t, o) => {
+  for (var i in o || (o = {}))
+    f.call(o, i) && m(t, i, o[i]);
+  if (a)
+    for (var i of a(o))
+      p.call(o, i) && m(t, i, o[i]);
+  return t;
+}, r = (t, o) => y(t, C(o));
+var l = (t, o) => {
+  var i = {};
+  for (var e in t)
+    f.call(t, e) && o.indexOf(e) < 0 && (i[e] = t[e]);
+  if (t != null && a)
+    for (var e of a(t))
+      o.indexOf(e) < 0 && p.call(t, e) && (i[e] = t[e]);
+  return i;
+};
+import { useContainer as L, useProperties as g, createEmptyComponent as h, NotificationList as x, contentBox as E } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames as $ } from "@telia-ace/widget-utilities";
+import w from "react";
+import B from "styled-components";
+const k = (i) => {
+  var e = i, { className: t } = e, o = l(e, ["className"]);
+  const d = L(), {
+    showHeader: u,
+    notificationList: n,
+    loading: c = !1
+  } = g();
+  return !(n != null && n.notifications.length) && !c ? h(d, r(s({}, o), {
+    className: $(t, "humany-notification-list")
+  })) : /* @__PURE__ */ w.createElement(H, r(s({}, o), {
+    className: t,
+    notificationList: n,
+    loading: c,
+    showHeader: u
+  }));
+}, H = B(x)`
+    ${E}
+`;
+export {
+  k as default
+};
+//# sourceMappingURL=notification-list.ba190f64.js.map

package/dist/notification-list.ba190f64.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-list.ba190f64.js","sources":["../src/notification-list.tsx"],"sourcesContent":["import {\n    contentBox,\n    createEmptyComponent,\n    NotificationList as NotificationListUi,\n    useContainer,\n    useProperties,\n} from '@telia-ace/knowledge-widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { NotificationListComponentProps } from './notification-list-component';\n\ntype Props = {\n    className: string;\n};\n\nconst NotificationList: React.FC<Props> = ({ className, ...other }) => {\n    const container = useContainer();\n    const {\n        showHeader,\n        notificationList,\n        loading = false,\n    } = useProperties<NotificationListComponentProps>();\n\n    if (!notificationList?.notifications.length && !loading) {\n        return createEmptyComponent(container, {\n            ...other,\n            className: appendClassNames(className, 'humany-notification-list'),\n        });\n    }\n\n    return (\n        <StyledNotificationList\n            {...other}\n            className={className}\n            notificationList={notificationList}\n            loading={loading}\n            showHeader={showHeader}\n        />\n    );\n};\n\nconst StyledNotificationList = styled(NotificationListUi)`\n    ${contentBox}\n`;\n\nexport default NotificationList;\n"],"names":["NotificationList","_a","_b","className","other","__objRest","container","useContainer","showHeader","notificationList","loading","useProperties","createEmptyComponent","__spreadProps","__spreadValues","appendClassNames","React","StyledNotificationList","styled","NotificationListUi","contentBox"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,IAAoC,CAACC,MAA4B;AAA5B,MAAAC,IAAAD,GAAE,aAAAE,MAAFD,GAAgBE,IAAAC,EAAhBH,GAAgB,CAAd;AACzC,QAAMI,IAAYC,KACZ;AAAA,IACF,YAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,MACVC,EAA8C;AAElD,SAAI,EAACF,KAAA,QAAAA,EAAkB,cAAc,WAAU,CAACC,IACrCE,EAAqBN,GAAWO,EAAAC,EAAA,IAChCV,IADgC;AAAA,IAEnC,WAAWW,EAAiBZ,GAAW,0BAA0B;AAAA,EAAA,EACpE,IAIA,gBAAAa,EAAA,cAAAC,GAAAJ,EAAAC,EAAA,IACOV,IADP;AAAA,IAEG,WAAAD;AAAA,IACA,kBAAAM;AAAA,IACA,SAAAC;AAAA,IACA,YAAAF;AAAA,EAAA,EACJ;AAER,GAEMS,IAAyBC,EAAOC,CAAkB;AAAA,MAClDC;AAAA;"}

package/dist/notification-list.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telia-ace/knowledge-widget-components-notification-list",
-    "version": "1.0.22",
+    "version": "1.0.24-next.0",
     "description": "Notification list component for ACE Knowledge Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
@@ -8,6 +8,7 @@
         "telia"
     ],
     "main": "dist/index.js",
+    "sourceMain": "src/index.ts",
     "type": "module",
     "types": "dist/index.d.ts",
     "files": [
@@ -25,21 +26,21 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@telia-ace/knowledge-widget-core": "^1.0.18",
-        "@telia-ace/knowledge-widget-types-grid": "^1.0.29",
-        "@telia-ace/knowledge-widget-ui": "^1.0.24",
-        "@telia-ace/widget-utilities": "^1.0.3",
+        "@telia-ace/knowledge-widget-core": "^1.0.20-next.1",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.31-next.1",
+        "@telia-ace/knowledge-widget-ui": "^1.0.26-next.1",
+        "@telia-ace/widget-utilities": "^1.0.5-next.1",
         "@webprovisions/platform": "^1.1.2"
     },
     "peerDependencies": {
-        "react": "^16.8.0",
-        "react-dom": "^16.8.0",
-        "styled-components": "^4.3.2"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "styled-components": "^5.3.6"
     },
     "devDependencies": {
-        "@types/react": "^16.8.0",
-        "@types/react-dom": "^16.8.0",
-        "@types/styled-components": "^5.1.7"
+        "@types/react": "^18.0.21",
+        "@types/react-dom": "^18.0.6",
+        "@types/styled-components": "^5.1.26"
     },
-    "gitHead": "b30b55cc433567b8f9de20d83b840919ffc0d58a"
+    "gitHead": "a81b35116f1f922623477a03097a1435db43a5ff"
 }

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

@@ -1,192 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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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"}