@telia-ace/knowledge-widget-components-notification-row 1.0.38-experimental.9 → 1.0.39-next.0

package/dist/index.js

@@ -1,16 +1,80 @@
-import { createEventSubscriber as e } from "@telia-ace/knowledge-widget-core";
-import { createWebComponent as n } from "@telia-ace/widget-ui";
-const i = (o) => {
-  const { events: t } = o.get("$widget");
-  return e(t), n(
-    o,
+var m = Object.defineProperty, b = Object.defineProperties;
+var C = Object.getOwnPropertyDescriptors;
+var g = Object.getOwnPropertySymbols;
+var y = Object.prototype.hasOwnProperty, R = Object.prototype.propertyIsEnumerable;
+var p = (t, e, i) => e in t ? m(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i, h = (t, e) => {
+  for (var i in e || (e = {}))
+    y.call(e, i) && p(t, i, e[i]);
+  if (g)
+    for (var i of g(e))
+      R.call(e, i) && p(t, i, e[i]);
+  return t;
+}, d = (t, e) => b(t, C(e));
+import { createEventSubscriber as v, extendComponent as x } from "@telia-ace/knowledge-widget-core";
+import { DataType as D } from "@telia-ace/knowledge-widget-types-grid";
+import { createReactComponent as N } from "@telia-ace/knowledge-widget-ui";
+const O = (t) => {
+  const { events: e } = t.get("$widget"), [i, u] = v(e);
+  return N(
+    t,
     "notification-row",
-    import("./notification-row-wrapper.0c7a13c6.js"),
+    import("./notification-row.5162cdbf.js"),
     (r) => {
+      const s = (a) => {
+        r.writeProperties(d(h({}, r.properties()), {
+          loading: !0,
+          error: void 0,
+          notifications: []
+        })), r.actions.dispatch("fetch", { params: a });
+      };
+      return r.actions.create(
+        "fetch",
+        ({
+          error: a,
+          topNotifications: o,
+          bottomNotifications: f,
+          middleNotifications: l
+        }) => {
+          if (a)
+            return r.actions.dispatch("fetched", {
+              error: a,
+              loading: !0,
+              notifications: []
+            });
+          let n = [];
+          const { notifications: w, types: c = [] } = r.properties();
+          return c.length ? (c.indexOf("top") > -1 && (n = n.concat(o)), c.indexOf("middle") > -1 && (n = n.concat(l)), c.indexOf("bottom") > -1 && (n = n.concat(f))) : n = o, r.actions.dispatch("fetched", {
+            notifications: n.length ? n : w,
+            loading: !1
+          });
+        }
+      ), r.actions.create("fetched", (a) => r.writeProperties(d(h({}, a), { loading: !1 }))), t.getAsync("router").then((a) => {
+        const { params: o } = a.getRouteData();
+        s(o);
+      }), i("router:changed", (a, { current: o }) => {
+        s(o.routeData.params);
+      }), () => {
+        u();
+      };
     }
-  );
-}, p = i;
+  ).then(() => x(t, "notification-row", (r) => {
+    r.actions.watch("notification-row.fetch", (s, a) => t.getAsync("dataClient").then(
+      (o) => o.fetch(D.RowNotifications, {
+        categories: [
+          s.params.guideCategory,
+          s.params.contactCategory
+        ].filter((f) => !!f),
+        searchPhrase: s.params.phrase
+      })
+    ).then(a).catch((o) => {
+      if (o)
+        return a(o);
+    }));
+  })).then(() => {
+    u();
+  });
+}, S = O;
 export {
-  p as default
+  S as default
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/notification-row-component.ts"],"sourcesContent":["import { createEventSubscriber } from '@telia-ace/knowledge-widget-core';\nimport { createWebComponent } from '@telia-ace/widget-ui';\n// import { createWebComponent } from '@telia-ace/knowledge-widget-ui';\nimport { Container, Widget } from '@webprovisions/platform';\n\n// const NotificationRowComponent = (container: Container) => {\n//   return createWebComponent(\n//     container,\n//     'notification-row',\n//     import('./notification-row-wrapper')\n//   );\n// };\n\ntype NotificationType = 'top' | 'middle' | 'bottom';\nexport type NotificationRowComponentProps = {\n    types: NotificationType[];\n    allowPaging?: boolean;\n    notifications?: Notification[]; // internal\n    expandable?: boolean;\n    pageNextAriaLabel?: string;\n    pagePreviousAriaLabel?: string;\n    closeAriaLabel?: string;\n    expandAriaLabel?: string;\n};\n\nexport const NotificationRowComponent = (container: Container) => {\n    const { events }: Widget = container.get('$widget');\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n    return createWebComponent(\n        container,\n        'notification-row',\n        import('./notification-row-wrapper'),\n        (component: any) => {}\n    );\n};\n\nexport default NotificationRowComponent;\n\n// import {\n//     createEventSubscriber,\n//     extendComponent,\n//     Notification,\n// } from '@telia-ace/knowledge-widget-core';\n// import { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\n// import { createReactComponent } from '@telia-ace/knowledge-widget-ui';\n// import { Container, Widget } from '@webprovisions/platform';\n\n// type NotificationType = 'top' | 'middle' | 'bottom';\n// export type NotificationRowComponentProps = {\n//     types: NotificationType[];\n//     allowPaging?: boolean;\n//     notifications?: Notification[]; // internal\n//     expandable?: boolean;\n//     pageNextAriaLabel?: string;\n//     pagePreviousAriaLabel?: string;\n//     closeAriaLabel?: string;\n//     expandAriaLabel?: string;\n// };\n\n// type FetchResults = NotificationResults & { error: any };\n\n// export const NotificationRowComponent = (container: Container) => {\n//     const { events }: Widget = container.get('$widget');\n//     const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n//     return createReactComponent(\n//         container,\n//         'notification-row',\n//         import('./notification-row'),\n//         (component) => {\n//             const fetch = (params: { [key: string]: any }) => {\n//                 component.writeProperties({\n//                     ...component.properties<NotificationRowComponentProps>(),\n//                     loading: true,\n//                     error: undefined,\n//                     notifications: [],\n//                 });\n//                 component.actions.dispatch('fetch', { params });\n//             };\n\n//             component.actions.create(\n//                 'fetch',\n//                 ({\n//                     error,\n//                     topNotifications,\n//                     bottomNotifications,\n//                     middleNotifications,\n//                 }: FetchResults) => {\n//                     if (error) {\n//                         return component.actions.dispatch('fetched', {\n//                             error,\n//                             loading: true,\n//                             notifications: [],\n//                         });\n//                     }\n\n//                     let newNotifications: Notification[] = [];\n//                     const { notifications, types = [] } =\n//                         component.properties<NotificationRowComponentProps>();\n//                     if (types.length) {\n//                         if (types.indexOf('top') > -1) {\n//                             newNotifications = newNotifications.concat(topNotifications);\n//                         }\n//                         if (types.indexOf('middle') > -1) {\n//                             newNotifications = newNotifications.concat(middleNotifications);\n//                         }\n//                         if (types.indexOf('bottom') > -1) {\n//                             newNotifications = newNotifications.concat(bottomNotifications);\n//                         }\n//                     } else {\n//                         newNotifications = topNotifications;\n//                     }\n\n//                     return component.actions.dispatch('fetched', {\n//                         notifications: newNotifications.length ? newNotifications : notifications,\n//                         loading: false,\n//                     });\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//             return () => {\n//                 unsubscribe();\n//             };\n//         }\n//     )\n//         .then(() => {\n//             return extendComponent(container, 'notification-row', (component) => {\n//                 component.actions.watch('notification-row.fetch', (input, next) => {\n//                     return container\n//                         .getAsync('dataClient')\n//                         .then((dataClient: DataClient) =>\n//                             dataClient.fetch(DataType.RowNotifications, {\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\n// export default NotificationRowComponent;\n"],"names":["NotificationRowComponent","container","events","createEventSubscriber","createWebComponent","component","NotificationRowComponent$1"],"mappings":";;AAyBa,MAAAA,IAA2B,CAACC,MAAyB;AAC9D,QAAM,EAAE,QAAAC,EAAmB,IAAAD,EAAU,IAAI,SAAS;AACjB,SAAAE,EAAsBD,CAAM,GAEtDE;AAAA,IACHH;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,CAACI,MAAmB;AAAA,IAAC;AAAA,EAAA;AAE7B,GAEAC,IAAeN;"}
+{"version":3,"file":"index.js","sources":["../src/notification-row-component.ts"],"sourcesContent":["import {\n    createEventSubscriber,\n    extendComponent,\n    Notification,\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\ntype NotificationType = 'top' | 'middle' | 'bottom';\nexport type NotificationRowComponentProps = {\n    types: NotificationType[];\n    allowPaging?: boolean;\n    notifications?: Notification[]; // internal\n    expandable?: boolean;\n    pageNextAriaLabel?: string;\n    pagePreviousAriaLabel?: string;\n    closeAriaLabel?: string;\n    expandAriaLabel?: string;\n};\n\ntype FetchResults = NotificationResults & { error: any };\n\nexport const NotificationRowComponent = (container: Container) => {\n    const { events }: Widget = container.get('$widget');\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n    return createReactComponent(\n        container,\n        'notification-row',\n        import('./notification-row'),\n        (component) => {\n            const fetch = (params: { [key: string]: any }) => {\n                component.writeProperties({\n                    ...component.properties<NotificationRowComponentProps>(),\n                    loading: true,\n                    error: undefined,\n                    notifications: [],\n                });\n                component.actions.dispatch('fetch', { params });\n            };\n\n            component.actions.create(\n                'fetch',\n                ({\n                    error,\n                    topNotifications,\n                    bottomNotifications,\n                    middleNotifications,\n                }: FetchResults) => {\n                    if (error) {\n                        return component.actions.dispatch('fetched', {\n                            error,\n                            loading: true,\n                            notifications: [],\n                        });\n                    }\n\n                    let newNotifications: Notification[] = [];\n                    const { notifications, types = [] } =\n                        component.properties<NotificationRowComponentProps>();\n                    if (types.length) {\n                        if (types.indexOf('top') > -1) {\n                            newNotifications = newNotifications.concat(topNotifications);\n                        }\n                        if (types.indexOf('middle') > -1) {\n                            newNotifications = newNotifications.concat(middleNotifications);\n                        }\n                        if (types.indexOf('bottom') > -1) {\n                            newNotifications = newNotifications.concat(bottomNotifications);\n                        }\n                    } else {\n                        newNotifications = topNotifications;\n                    }\n\n                    return component.actions.dispatch('fetched', {\n                        notifications: newNotifications.length ? newNotifications : notifications,\n                        loading: false,\n                    });\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            return () => {\n                unsubscribe();\n            };\n        }\n    )\n        .then(() => {\n            return extendComponent(container, 'notification-row', (component) => {\n                component.actions.watch('notification-row.fetch', (input, next) => {\n                    return container\n                        .getAsync('dataClient')\n                        .then((dataClient: DataClient) =>\n                            dataClient.fetch(DataType.RowNotifications, {\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 NotificationRowComponent;\n"],"names":["NotificationRowComponent","container","events","subscribe","unsubscribe","createEventSubscriber","createReactComponent","component","fetch","params","__spreadProps","__spreadValues","error","topNotifications","bottomNotifications","middleNotifications","newNotifications","notifications","types","input","router","event","current","extendComponent","next","dataClient","DataType","c","NotificationRowComponent$1"],"mappings":";;;;;;;;;;;;;;;AAuBa,MAAAA,IAA2B,CAACC,MAAyB;AAC9D,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,WAA0C,IADjC;AAAA,UAEtB,SAAS;AAAA,UACT,OAAO;AAAA,UACP,eAAe,CAAC;AAAA,QAAA,EACnB,GACDA,EAAU,QAAQ,SAAS,SAAS,EAAE,QAAAE,EAAQ,CAAA;AAAA,MAAA;AAGlD,aAAAF,EAAU,QAAQ;AAAA,QACd;AAAA,QACA,CAAC;AAAA,UACG,OAAAK;AAAA,UACA,kBAAAC;AAAA,UACA,qBAAAC;AAAA,UACA,qBAAAC;AAAA,QAAA,MACgB;AAChB,cAAIH;AACO,mBAAAL,EAAU,QAAQ,SAAS,WAAW;AAAA,cACzC,OAAAK;AAAA,cACA,SAAS;AAAA,cACT,eAAe,CAAC;AAAA,YAAA,CACnB;AAGL,cAAII,IAAmC,CAAA;AACvC,gBAAM,EAAE,eAAAC,GAAe,OAAAC,IAAQ,CAAG,EAAA,IAC9BX,EAAU;AACd,iBAAIW,EAAM,UACFA,EAAM,QAAQ,KAAK,IAAI,OACJF,IAAAA,EAAiB,OAAOH,CAAgB,IAE3DK,EAAM,QAAQ,QAAQ,IAAI,OACPF,IAAAA,EAAiB,OAAOD,CAAmB,IAE9DG,EAAM,QAAQ,QAAQ,IAAI,OACPF,IAAAA,EAAiB,OAAOF,CAAmB,MAG/CE,IAAAH,GAGhBN,EAAU,QAAQ,SAAS,WAAW;AAAA,YACzC,eAAeS,EAAiB,SAASA,IAAmBC;AAAA,YAC5D,SAAS;AAAA,UAAA,CACZ;AAAA,QACL;AAAA,MAAA,GAGJV,EAAU,QAAQ,OAAO,WAAW,CAACY,MAC1BZ,EAAU,gBAAgBG,EAAAC,EAAA,IAAKQ,IAAL,EAAY,SAAS,KAAO,CAChE,GAEDlB,EAAU,SAAS,QAAQ,EAAE,KAAK,CAACmB,MAAW;AAC1C,cAAM,EAAE,QAAAX,EAAA,IAAWW,EAAO,aAAa;AACvC,QAAAZ,EAAMC,CAAM;AAAA,MAAA,CACf,GAEDN,EAAU,kBAAkB,CAACkB,GAAY,EAAE,SAAAC,QAAmB;AACpD,QAAAd,EAAAc,EAAQ,UAAU,MAAM;AAAA,MAAA,CACjC,GAEM,MAAM;AACG,QAAAlB;MAAA;AAAA,IAEpB;AAAA,EACJ,EACK,KAAK,MACKmB,EAAgBtB,GAAW,oBAAoB,CAACM,MAAc;AACjE,IAAAA,EAAU,QAAQ,MAAM,0BAA0B,CAACY,GAAOK,MAC/CvB,EACF,SAAS,YAAY,EACrB;AAAA,MAAK,CAACwB,MACHA,EAAW,MAAMC,EAAS,kBAAkB;AAAA,QACxC,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,CAACZ,MAAU;AACd,UAAIA;AACA,eAAOY,EAAKZ,CAAK;AAAA,IACrB,CACH,CACR;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI,IAAAR;EAAA,CACf;AACT,GAEAwB,IAAe5B;"}

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

@@ -1,3 +1,4 @@
+import { Notification } from '@telia-ace/knowledge-widget-core';
 import { Container } from '@webprovisions/platform';
 type NotificationType = 'top' | 'middle' | 'bottom';
 export type NotificationRowComponentProps = {

package/dist/notification-row.5162cdbf.js

@@ -0,0 +1,325 @@
+var V = Object.defineProperty, X = Object.defineProperties;
+var Z = Object.getOwnPropertyDescriptors;
+var y = Object.getOwnPropertySymbols;
+var I = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
+var H = (e, t, a) => t in e ? V(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, f = (e, t) => {
+  for (var a in t || (t = {}))
+    I.call(t, a) && H(e, a, t[a]);
+  if (y)
+    for (var a of y(t))
+      L.call(t, a) && H(e, a, t[a]);
+  return e;
+}, g = (e, t) => X(e, Z(t));
+var k = (e, t) => {
+  var a = {};
+  for (var n in e)
+    I.call(e, n) && t.indexOf(n) < 0 && (a[n] = e[n]);
+  if (e != null && y)
+    for (var n of y(e))
+      t.indexOf(n) < 0 && L.call(e, n) && (a[n] = e[n]);
+  return a;
+};
+import { css as b } from "@emotion/react";
+import c from "@emotion/styled";
+import { useProperties as ee, useContainer as te, createEmptyComponent as N, SymbolBadge as F, genericHtml as ae, linkTabStyle as ne, borderTabStyle as G, Html as oe, Button as ie } from "@telia-ace/knowledge-widget-ui";
+import { readStorage as R, StorageMedium as T, createStorageWriter as le, StorageCategory as re } from "@telia-ace/widget-services";
+import { appendClassNames as w } from "@telia-ace/widget-utilities";
+import i, { useState as $, useEffect as W } from "react";
+const z = "closed-notifications", se = {
+  transform: {
+    a: (a) => {
+      var n = a, { children: e } = n, t = k(n, ["children"]);
+      return /* @__PURE__ */ i.createElement("a", g(f({}, t), { tabIndex: -1 }), e);
+    }
+  }
+}, xe = (a) => {
+  var n = a, { className: e } = n, t = k(n, ["className"]);
+  const {
+    types: P = [],
+    allowPaging: O = !0,
+    notifications: M = [],
+    expandable: m = !1,
+    closeAriaLabel: Y = "",
+    pageNextAriaLabel: _ = "",
+    pagePreviousAriaLabel: q = "",
+    expandAriaLabel: J = ""
+  } = ee(), [h, Q] = $(!1), [x, A] = $([]), [l, v] = $(0), r = te(), [E, U] = $();
+  W(() => {
+    r && (R(r, z, T.Session).then(
+      (o = []) => A(o)
+    ), le(r, z, re.Functional).then(
+      (o) => U(() => o)
+    ));
+  }, [r]), W(() => {
+    r && R(r, z, T.Session).then(
+      (o = []) => {
+        x.forEach(
+          (s) => o.indexOf(s) === -1 && o.push(s)
+        ), E && E(o);
+      }
+    );
+  }, [x, r, E]);
+  const d = M.filter(({ id: o }) => x.indexOf(o) === -1), { length: p } = d;
+  if (!d.length)
+    return N(r, g(f({}, t), {
+      className: w(e, "humany-notification-row")
+    }));
+  if (O) {
+    const o = d[l] || d[l + 1] || d[l - 1];
+    if (!o)
+      return N(r, g(f({}, t), {
+        className: w(e, "humany-notification-row")
+      }));
+    const { id: s, body: S } = o || {}, B = () => Q(!h);
+    return /* @__PURE__ */ i.createElement(
+      K,
+      g(f({}, t), {
+        "aria-expanded": m ? h : !0,
+        "aria-label": J,
+        tabIndex: m ? 0 : -1,
+        className: w(e, "humany-notification-row"),
+        "data-pageable": p > 1,
+        "data-types": P,
+        "data-allow-paging": O,
+        "data-expandable": m,
+        onKeyDown: (u) => {
+          u.key === "Enter" && B();
+        },
+        onClick: B
+      }),
+      /* @__PURE__ */ i.createElement(
+        ce,
+        {
+          "aria-label": Y,
+          onClick: () => {
+            v(d.indexOf(o)), A([...x, s]);
+          }
+        },
+        /* @__PURE__ */ i.createElement(F, { symbol: { type: "Svg", content: "close" } })
+      ),
+      /* @__PURE__ */ i.createElement(
+        j,
+        {
+          htmlParseInstruction: !m || h ? void 0 : se,
+          "data-pageable": p > 1,
+          "data-notification": s,
+          "data-expandable": m,
+          "data-expanded": h,
+          html: S
+        }
+      ),
+      p > 1 && /* @__PURE__ */ i.createElement(de, null, /* @__PURE__ */ i.createElement(
+        C,
+        {
+          "aria-label": q,
+          "data-disabled": l === 0,
+          onClick: (u) => {
+            u.stopPropagation(), l > 0 && v(l - 1);
+          }
+        },
+        /* @__PURE__ */ i.createElement(
+          D,
+          {
+            size: 10,
+            symbol: { type: "Svg", content: "caret-left" }
+          }
+        )
+      ), /* @__PURE__ */ i.createElement("span", null, l + 1, "/", p), /* @__PURE__ */ i.createElement(
+        C,
+        {
+          "aria-label": _,
+          "data-disabled": l + 1 >= p,
+          onClick: (u) => {
+            u.stopPropagation(), l < p - 1 && v(l + 1);
+          }
+        },
+        /* @__PURE__ */ i.createElement(
+          D,
+          {
+            size: 10,
+            symbol: { type: "Svg", content: "caret-right" }
+          }
+        )
+      ))
+    );
+  }
+  return /* @__PURE__ */ i.createElement(
+    K,
+    g(f({}, t), {
+      className: w(e, "humany-notification-row"),
+      "data-pageable": !1,
+      "data-types": P,
+      "data-allow-paging": !1
+    }),
+    d.map((o) => {
+      if (!o)
+        return null;
+      const { id: s, body: S } = o;
+      return /* @__PURE__ */ i.createElement(
+        j,
+        {
+          key: s,
+          "data-pageable": !1,
+          "data-expandable": m,
+          "data-expanded": h,
+          "data-notification": s,
+          html: S
+        }
+      );
+    })
+  );
+}, K = c.div`
+    ${ae}
+    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, a, n;
+  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" : (a = e.theme.colors) == null ? void 0 : a.primary : (n = e.theme.colors) == null ? void 0 : n.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 {
+            ${ne}
+        }
+    }
+
+    ${(e) => {
+  var t;
+  return !e["data-allow-paging"] && b`
+            flex-wrap: wrap;
+
+            > div {
+                min-width: 100%;
+                margin: ${((t = e.theme.sizes) == null ? void 0 : t.cardinal) * 2}px;
+            }
+        `;
+}};
+
+    ${(e) => b`
+            &:focus-visible {
+                .humany-html {
+                    ${G(e)}
+                }
+            }
+        `}
+`, j = c(oe)`
+    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"] && b`
+            max-width: 100%;
+
+            p {
+                display: none;
+                &:first-child {
+                    display: block;
+                    margin-bottom: 0;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        `}
+`, de = 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;
+    }
+`, C = c(ie)`
+    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 {
+        ${G}
+    }
+
+    ${(e) => e["data-disabled"] ? b`
+                  opacity: 0.8;
+              ` : b`
+                  @media (hover) {
+                      &:hover {
+                          opacity: 0.5;
+                      }
+                  }
+              `}
+`, ce = c(C)`
+    position: absolute;
+    top: 7.5px;
+    right: 7.5px;
+    width: 25px;
+    height: auto;
+    padding: ${(e) => {
+  var t, a;
+  return `calc(${(t = e.theme.sizes) == null ? void 0 : t.small}/2) ${(a = e.theme.sizes) == null ? void 0 : a.small}`;
+}};
+    svg {
+        vertical-align: middle;
+        line,
+        path {
+            stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+        }
+    }
+`, D = c(F)`
+    line {
+        stroke: #ffffff;
+    }
+`;
+c.div`
+    display: none;
+`;
+export {
+  xe as default
+};
+//# sourceMappingURL=notification-row.5162cdbf.js.map

package/dist/notification-row.5162cdbf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-row.5162cdbf.js","sources":["../src/notification-row.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport {\n    borderTabStyle,\n    Button,\n    createEmptyComponent,\n    genericHtml,\n    Html,\n    linkTabStyle,\n    SymbolBadge,\n    useContainer,\n    useProperties,\n} from '@telia-ace/knowledge-widget-ui';\nimport {\n    createStorageWriter,\n    readStorage,\n    StorageCategory,\n    StorageMedium,\n    StorageWriter,\n} from '@telia-ace/widget-services';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React, { useEffect, useState } from 'react';\nimport { NotificationRowComponentProps } from './notification-row-component';\n\ntype Props = {\n    className: string;\n};\n\nconst STORAGE_KEY = 'closed-notifications';\n\nconst infocusableHtml = {\n    transform: {\n        a: ({ children, ...props }: React.ComponentProps<'a'>) => (\n            <a {...props} tabIndex={-1}>\n                {children}\n            </a>\n        ),\n    },\n};\n\nconst NotificationRow: React.FC<Props> = ({ className, ...other }) => {\n    const {\n        types = [],\n        allowPaging = true,\n        notifications = [],\n        expandable = false,\n        closeAriaLabel = '',\n        pageNextAriaLabel = '',\n        pagePreviousAriaLabel = '',\n        expandAriaLabel = '',\n    } = useProperties<NotificationRowComponentProps>();\n    const [expanded, setExpanded] = useState(false);\n    const [closed, setClosed] = useState<string[]>([]);\n    const [index, setIndex] = useState(0);\n\n    const container = useContainer();\n    const [write, setWriter] = useState<StorageWriter | undefined>();\n\n    useEffect(() => {\n        if (container) {\n            readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\n                (closed = []) => setClosed(closed)\n            );\n\n            createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) =>\n                setWriter(() => writer)\n            );\n        }\n    }, [container]);\n\n    useEffect(() => {\n        if (container) {\n            readStorage<string[]>(container, STORAGE_KEY, StorageMedium.Session).then(\n                (storedClosed = []) => {\n                    closed.forEach(\n                        (id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id)\n                    );\n                    if (write) {\n                        write(storedClosed);\n                    }\n                }\n            );\n        }\n    }, [closed, container, write]);\n\n    const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);\n\n    const { length } = filtered;\n\n    if (!filtered.length) {\n        return createEmptyComponent(container, {\n            ...other,\n            className: appendClassNames(className, 'humany-notification-row'),\n        });\n    }\n\n    if (allowPaging) {\n        const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];\n\n        if (!notification) {\n            return createEmptyComponent(container, {\n                ...other,\n                className: appendClassNames(className, 'humany-notification-row'),\n            });\n        }\n\n        const { id, body } = notification || {};\n        const toggleExpand = () => setExpanded(!expanded);\n\n        return (\n            <Wrapper\n                {...other}\n                aria-expanded={expandable ? expanded : true}\n                aria-label={expandAriaLabel}\n                tabIndex={expandable ? 0 : -1}\n                className={appendClassNames(className, 'humany-notification-row')}\n                data-pageable={length > 1}\n                data-types={types}\n                data-allow-paging={allowPaging}\n                data-expandable={expandable}\n                onKeyDown={(e: React.KeyboardEvent) => {\n                    if (e.key === 'Enter') {\n                        toggleExpand();\n                    }\n                }}\n                onClick={toggleExpand}\n            >\n                <CloseButton\n                    aria-label={closeAriaLabel}\n                    onClick={() => {\n                        setIndex(filtered.indexOf(notification));\n                        setClosed([...closed, id]);\n                    }}\n                >\n                    <SymbolBadge symbol={{ type: 'Svg', content: 'close' }} />\n                </CloseButton>\n                <StyledHtml\n                    htmlParseInstruction={!expandable || expanded ? undefined : infocusableHtml}\n                    data-pageable={length > 1}\n                    data-notification={id}\n                    data-expandable={expandable}\n                    data-expanded={expanded}\n                    html={body}\n                />\n                {length > 1 && (\n                    <Pager>\n                        <StyledButton\n                            aria-label={pagePreviousAriaLabel}\n                            data-disabled={index === 0}\n                            onClick={(e) => {\n                                e.stopPropagation();\n                                if (index > 0) {\n                                    setIndex(index - 1);\n                                }\n                            }}\n                        >\n                            <StyledSymbolBadge\n                                size={10}\n                                symbol={{ type: 'Svg', content: 'caret-left' }}\n                            />\n                        </StyledButton>\n                        <span>\n                            {index + 1}/{length}\n                        </span>\n                        <StyledButton\n                            aria-label={pageNextAriaLabel}\n                            data-disabled={index + 1 >= length}\n                            onClick={(e) => {\n                                e.stopPropagation();\n                                if (index < length - 1) {\n                                    setIndex(index + 1);\n                                }\n                            }}\n                        >\n                            <StyledSymbolBadge\n                                size={10}\n                                symbol={{ type: 'Svg', content: 'caret-right' }}\n                            />\n                        </StyledButton>\n                    </Pager>\n                )}\n            </Wrapper>\n        );\n    }\n\n    return (\n        <Wrapper\n            {...other}\n            className={appendClassNames(className, 'humany-notification-row')}\n            data-pageable={false}\n            data-types={types}\n            data-allow-paging={false}\n        >\n            {filtered.map((notification) => {\n                if (!notification) {\n                    return null;\n                }\n\n                const { id, body } = notification;\n\n                return (\n                    <StyledHtml\n                        key={id}\n                        data-pageable={false}\n                        data-expandable={expandable}\n                        data-expanded={expanded}\n                        data-notification={id}\n                        html={body}\n                    />\n                );\n            })}\n        </Wrapper>\n    );\n};\n\nconst Wrapper = styled.div<{ 'data-types': string[]; 'data-allow-paging': boolean } & any>`\n    ${genericHtml}\n    padding: ${(p) => p.theme.sizes?.normal} ${(p) => p.theme.sizes?.cardinal * 12}px;\n    background-color: ${(p) => {\n        if (p['data-types'].length) {\n            if (p['data-types'].indexOf('top') > -1) {\n                return p.theme.colors?.warning;\n            }\n            if (p['data-types'].indexOf('bottom') > -1) {\n                return 'transparent';\n            }\n\n            return p.theme.colors?.primary;\n        }\n        return p.theme.colors?.warning;\n    }};\n    color: ${(p) => p.theme.colors?.text};\n    border-radius: ${(p) => p.theme.borderRadius};\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    cursor: ${(p) => (p['data-expandable'] ? 'pointer' : 'default')};\n    overflow: hidden;\n\n    i {\n        color: ${(p) => p.theme.colors?.text};\n    }\n\n    a {\n        color: ${(p) => p.theme.colors?.link};\n        &:focus-visible {\n            ${linkTabStyle}\n        }\n    }\n\n    ${(p) =>\n        !p['data-allow-paging'] &&\n        css`\n            flex-wrap: wrap;\n\n            > div {\n                min-width: 100%;\n                margin: ${p.theme.sizes?.cardinal * 2}px;\n            }\n        `};\n\n    ${(p) =>\n        css`\n            &:focus-visible {\n                .humany-html {\n                    ${borderTabStyle(p)}\n                }\n            }\n        `}\n`;\n\nconst StyledHtml = styled(Html)<{\n    'data-pageable': boolean;\n    'data-expandable': boolean;\n    'data-expanded': boolean;\n}>`\n    flex: 1;\n    font-size: ${(p) => p.theme.fonts?.normal};\n    line-height: 1.6em;\n    font-weight: 300;\n\n    ${(p) =>\n        p['data-expandable'] &&\n        !p['data-expanded'] &&\n        css`\n            max-width: 100%;\n\n            p {\n                display: none;\n                &:first-child {\n                    display: block;\n                    margin-bottom: 0;\n                    white-space: nowrap;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                }\n            }\n        `}\n`;\n\nconst Pager = styled.div`\n    text-align: center;\n    width: 100%;\n    span {\n        font-size: ${(p) => p.theme.fonts?.small};\n        display: inline-block;\n        width: 30px;\n        text-align: center;\n    }\n`;\n\nconst StyledButton = styled(Button)<{ 'data-disabled'?: boolean }>`\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    transition: opacity 200ms ease-out;\n    justify-self: flex-end;\n    align-self: flex-start;\n    padding: ${(p) => p.theme.sizes?.small} svg {\n        display: block;\n    }\n\n    &:focus-visible {\n        ${borderTabStyle}\n    }\n\n    ${(p) =>\n        p['data-disabled']\n            ? css`\n                  opacity: 0.8;\n              `\n            : css`\n                  @media (hover) {\n                      &:hover {\n                          opacity: 0.5;\n                      }\n                  }\n              `}\n`;\n\nconst CloseButton = styled(StyledButton)`\n    position: absolute;\n    top: 7.5px;\n    right: 7.5px;\n    width: 25px;\n    height: auto;\n    padding: ${(p) => `calc(${p.theme.sizes?.small}/2) ${p.theme.sizes?.small}`};\n    svg {\n        vertical-align: middle;\n        line,\n        path {\n            stroke: ${(p) => p.theme.colors?.text};\n        }\n    }\n`;\n\nconst StyledSymbolBadge = styled(SymbolBadge)`\n    line {\n        stroke: #ffffff;\n    }\n`;\n\nconst Empty = styled.div`\n    display: none;\n`;\n\nexport default NotificationRow;\n"],"names":["STORAGE_KEY","infocusableHtml","_a","_b","children","props","__objRest","React","__spreadProps","__spreadValues","NotificationRow","className","other","types","allowPaging","notifications","expandable","closeAriaLabel","pageNextAriaLabel","pagePreviousAriaLabel","expandAriaLabel","useProperties","expanded","setExpanded","useState","closed","setClosed","index","setIndex","container","useContainer","write","setWriter","useEffect","readStorage","StorageMedium","createStorageWriter","StorageCategory","writer","storedClosed","id","filtered","length","createEmptyComponent","appendClassNames","notification","body","toggleExpand","Wrapper","e","CloseButton","SymbolBadge","StyledHtml","Pager","StyledButton","StyledSymbolBadge","styled","genericHtml","p","_c","linkTabStyle","css","borderTabStyle","Html","Button"],"mappings":"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"}

package/dist/notification-row.d.ts

@@ -1,20 +1,6 @@
-import { LitElement, nothing } from 'lit';
-export default class NotificationRow extends LitElement {
-    _allowPaging: boolean;
-    _expandable: boolean;
-    _closeAriaLabel: string;
-    _pageNextAriaLabel: string;
-    _expandAriaLabel: string;
-    _pagePreviousAriaLabel: string;
-    _types: string[];
-    _notifications: any[];
-    closed: string[];
-    expanded: boolean;
-    index: number;
-    static styles: import("lit").CSSResult[];
-    constructor();
-    connectedCallback(): void;
-    private _toggleExpand;
-    private getBackgroundColor;
-    render(): typeof nothing | import("lit").TemplateResult<1>;
-}
+import React from 'react';
+type Props = {
+    className: string;
+};
+declare const NotificationRow: React.FC<Props>;
+export default NotificationRow;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/knowledge-widget-components-notification-row",
-  "version": "1.0.38-experimental.9",
+  "version": "1.0.39-next.0",
   "description": "Notification row component for ACE Knowledge Widgets.",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "Telia Company AB",
@@ -21,19 +21,16 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@telia-ace/knowledge-data-client": "^1.0.2-experimental.1",
-    "@telia-ace/knowledge-widget-core": "1.0.34-experimental.9",
-    "@telia-ace/knowledge-widget-types-grid": "1.0.45-experimental.9",
-    "@telia-ace/knowledge-widget-ui": "1.0.40-experimental.9",
-    "@telia-ace/widget-services": "^1.0.21-experimental.19",
-    "@telia-ace/widget-ui": "^1.0.28-experimental.19",
-    "@telia-ace/widget-utilities": "^1.0.10-experimental.19",
+    "@telia-ace/knowledge-widget-core": "^1.0.35-next.0",
+    "@telia-ace/knowledge-widget-types-grid": "^1.0.46-next.0",
+    "@telia-ace/knowledge-widget-ui": "^1.0.41-next.0",
+    "@telia-ace/widget-services": "^1.0.20",
+    "@telia-ace/widget-utilities": "^1.0.9",
     "@webprovisions/platform": "^1.1.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "lit": "^2.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -42,7 +39,6 @@
     "@emotion/styled": "^11.10.5",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
-    "lit": "^2.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/notification-row-data-provider.d.ts

@@ -1,9 +0,0 @@
-import { ReactiveControllerHost } from 'lit';
-import { DataProvider } from '@telia-ace/widget-ui';
-export declare class NotificationRowDataProvider extends DataProvider {
-    host: ReactiveControllerHost;
-    constructor(host: ReactiveControllerHost);
-    hostConnected(): void;
-    initialize(): Promise<void>;
-    _fetch(): Promise<void>;
-}

package/dist/notification-row-wrapper.0c7a13c6.js

@@ -1,339 +0,0 @@
-var P = Object.defineProperty, k = Object.defineProperties;
-var A = Object.getOwnPropertyDescriptors;
-var y = Object.getOwnPropertySymbols, C = Object.getPrototypeOf, L = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable, O = Reflect.get;
-var w = (i, t, e) => t in i ? P(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, b = (i, t) => {
-  for (var e in t || (t = {}))
-    L.call(t, e) && w(i, e, t[e]);
-  if (y)
-    for (var e of y(t))
-      z.call(t, e) && w(i, e, t[e]);
-  return i;
-}, f = (i, t) => k(i, A(t));
-var m = (i, t, e) => O(C(i), e, t);
-var u = (i, t, e) => new Promise((o, n) => {
-  var a = (c) => {
-    try {
-      p(e.next(c));
-    } catch (h) {
-      n(h);
-    }
-  }, s = (c) => {
-    try {
-      p(e.throw(c));
-    } catch (h) {
-      n(h);
-    }
-  }, p = (c) => c.done ? o(c.value) : Promise.resolve(c.value).then(a, s);
-  p((e = e.apply(i, t)).next());
-});
-import { DataClient as N } from "@telia-ace/knowledge-data-client";
-import { DataProvider as E, WidgetComponentMixin as S, NodeConnector as D } from "@telia-ace/widget-ui";
-import { LitElement as B, nothing as v, html as g, css as R } from "lit";
-import { property as d, state as $ } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-class x extends E {
-  constructor(t) {
-    super(t), (this.host = t).addController(this);
-  }
-  hostConnected() {
-    this.initialize();
-  }
-  initialize() {
-    return u(this, null, function* () {
-      yield m(x.prototype, this, "initialize").call(this), this._fetch();
-    });
-  }
-  _fetch() {
-    return u(this, null, function* () {
-      if (!this.node || !this.container)
-        return;
-      this.node.writeProperties(f(b({}, this.node.attributes.properties), {
-        loading: !0,
-        error: void 0,
-        notifications: []
-      }));
-      const t = yield N.getInstance(this.container);
-      if (!t) {
-        console.warn("Unable to get DataClient in NotificationRow.");
-        return;
-      }
-      const {
-        topNotifications: e = [],
-        bottomNotifications: o = [],
-        middleNotifications: n = []
-      } = yield t.fetch("row-notices", {});
-      let a = [];
-      const { notifications: s, types: p = [] } = this.node.attributes.properties;
-      p.length ? (p.indexOf("top") > -1 && (a = a.concat(e)), p.indexOf("middle") > -1 && (a = a.concat(n)), p.indexOf("bottom") > -1 && (a = a.concat(o))) : a = e, this.node.writeProperties(f(b({}, this.node.attributes.properties), {
-        loading: !1,
-        error: void 0,
-        notifications: a.length ? a : s
-      }));
-    });
-  }
-}
-var j = Object.defineProperty, K = Object.getOwnPropertyDescriptor, l = (i, t, e, o) => {
-  for (var n = o > 1 ? void 0 : o ? K(t, e) : t, a = i.length - 1, s; a >= 0; a--)
-    (s = i[a]) && (n = (o ? s(t, e, n) : s(n)) || n);
-  return o && n && j(t, e, n), n;
-};
-class r extends B {
-  constructor() {
-    super(), this._closeAriaLabel = "", this._pagePreviousAriaLabel = "", this._pageNextAriaLabel = "", this._types = [], this._notifications = [], this._expandable = !1, this._allowPaging = !1, this.expanded = !1, this.index = 0, this.closed = [];
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  _toggleExpand() {
-    this.expanded = !this.expanded;
-  }
-  getBackgroundColor() {
-    return this._types.length ? this._types.indexOf("top") > -1 ? "--colors-warning" : this._types.indexOf("bottom") > -1 ? "--colors-transparent" : "--colors-primary" : "--colors-warning";
-  }
-  render() {
-    this.style.setProperty(
-      "--notification-row-background-default",
-      `var(${this.getBackgroundColor()})`
-    );
-    const t = this._notifications.filter(({ id: o }) => this.closed.indexOf(o) === -1);
-    if (!t.length)
-      return v;
-    const e = {
-      "humany-notification-row": !0,
-      "notification-row": !0,
-      expandable: this._expandable,
-      expanded: this.expanded,
-      "not-expandable": this._expandable && !this.expanded
-    };
-    if (this._allowPaging = !0, this._allowPaging) {
-      const o = t[this.index] || t[this.index + 1] || t[this.index - 1], { id: n, body: a } = o || {};
-      return g`
-                <!-- onKeyDown={(e: React.KeyboardEvent) => {
-                    if (e.key === 'Enter') {
-                        toggleExpand();
-                    }
-                }}
-                onClick={toggleExpand} -->
-                <div
-                    class=${_(e)}
-                    part="container"
-                    data-expandable=${this._expandable}
-                    data-allow-paging=${this._allowPaging}
-                    aria-expanded=${this._expandable ? this.expanded : !0}
-                    aria-label=${this._expandAriaLabel}
-                    tabindex=${this._expandable ? 0 : -1}
-                    @click=${() => {
-        this._toggleExpand();
-      }}
-                >
-                    <ui-button
-                        class="notification-row-close-button"
-                        part="close-button"
-                        aria-label=${this._closeAriaLabel}
-                        @click=${() => {
-        this.index = t.indexOf(o), this.closed = [...this.closed, n];
-      }}
-                    >
-                        <ui-symbol-badge .symbol=${{ type: "Svg", content: "close" }} />
-                    </ui-button>
-                    <ui-html
-                        data-pageable=${length > 1}
-                        data-notification=${n}
-                        data-expandable=${this._expandable}
-                        data-expanded=${this.expanded}
-                        .html=${a}
-                    ></ui-html>
-                    <div class="notification-row-pager" part="pager">
-                        <ui-button
-                            aria-label=${this._pagePreviousAriaLabel}
-                            data-disabled=${this.index === 0}
-                            @click=${(s) => {
-        s.stopPropagation(), this.index > 0 && (this.index -= 1);
-      }}
-                            part="arrow-button"
-                        >
-                            <ui-symbol-badge
-                                .size=${10}
-                                .symbol=${{ type: "Svg", content: "caret-left" }}
-                                part="arrow-icon"
-                            />
-                        </ui-button>
-                        <span> ${this.index + 1}/${t.length} </span>
-                        <ui-button
-                            aria-label=${this._pageNextAriaLabel}
-                            data-disabled=${this.index + 1 >= t.length}
-                            @click=${(s) => {
-        s.stopPropagation(), this.index < t.length - 1 && (this.index += 1);
-      }}
-                            part="arrow-button"
-                        >
-                            <ui-symbol-badge
-                                .size=${10}
-                                .symbol=${{ type: "Svg", content: "caret-right" }}
-                                part="arrow-icon"
-                            />
-                        </ui-button>
-                    </div>
-                </div>
-            `;
-    }
-    return g`
-            <div part="container" class=${_(e)} data-expandable=${this._expandable}>
-                ${t.map((o) => o ? g` <ui-html .html=${o.body} /> ` : v)}
-            </div>
-        `;
-  }
-}
-r.styles = [
-  R`
-            :host::part(close-button) {
-                position: absolute;
-                top: 7.5px;
-                right: 7.5px;
-                width: 25px;
-                height: auto;
-                padding: calc(var(--size-small) / 2) var(--size-small);
-            }
-
-            :host::part(pager) {
-                text-align: center;
-                width: 100%;
-            }
-
-            :host::part(pager) span {
-                font-size: var(--fonts-small);
-                display: inline-block;
-                width: 30px;
-                text-align: center;
-            }
-
-            i {
-                color: var(--colors-text);
-            }
-
-            a {
-                color: var(--colors-link);
-            }
-
-            .notification-row {
-                padding: var(--size-normal) calc(var(--cardinal) * 12);
-                text-align: center;
-                display: flex;
-                flex-direction: column;
-                position: relative;
-                overflow: hidden;
-                background-color: var(
-                    --notification-row-background,
-                    var(--notification-row-background-default)
-                );
-                color: var(--colors-text);
-                border-radius: var(--borderRadius);
-            }
-
-            .notification-row.expandable {
-                cursor: pointer;
-            }
-
-            .notification-row.not-expandable ui-html {
-                max-width: 100%;
-            }
-
-            .notification-row.not-expandable ui-html p {
-                display: none;
-            }
-            .notification-row.not-expandable ui-html p:first-child {
-                display: block;
-                margin-bottom: 0;
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-
-            .notification-row[data-allow-paging='false'] {
-                flex-wrap: wrap;
-            }
-            .notification-row[data-allow-paging='false'] > div {
-                min-width: 100%;
-                margin: var(--cardinal * 2);
-            }
-
-            ui-html {
-                flex: 1;
-                font-size: var(--fonts-normal);
-                line-height: 1.6em;
-                font-weight: 300;
-            }
-
-            ui-button::part(container) {
-                background-color: transparent;
-                border: none;
-                cursor: pointer;
-                transition: opacity 200ms ease-out;
-                justify-self: flex-end;
-                align-self: flex-start;
-                padding: var(--size-small);
-            }
-
-            ui-button::part(container):focus-visible {
-                outline: var(--accessibility-border);
-                color: var(--accessibility-colors-inactiveText);
-                border-color: transparent;
-            }
-
-            ui-button::part(container[data-disabled]) {
-                display: none;
-            }
-
-            ui-button[data-disabled='true']::part(container) {
-                opacity: 0.8;
-            }
-
-            @media (hover: hover) {
-                ui-button[data-disabled='false']:hover::part(container) {
-                    opacity: 0.5;
-                }
-            }
-        `
-];
-l([
-  d({ type: Boolean })
-], r.prototype, "_allowPaging", 2);
-l([
-  d({ type: Boolean })
-], r.prototype, "_expandable", 2);
-l([
-  d({ type: String })
-], r.prototype, "_closeAriaLabel", 2);
-l([
-  d({ type: String })
-], r.prototype, "_pageNextAriaLabel", 2);
-l([
-  d({ type: String })
-], r.prototype, "_expandAriaLabel", 2);
-l([
-  d({ type: String })
-], r.prototype, "_pagePreviousAriaLabel", 2);
-l([
-  d({ type: Array })
-], r.prototype, "_types", 2);
-l([
-  d({ type: Array })
-], r.prototype, "_notifications", 2);
-l([
-  $()
-], r.prototype, "closed", 2);
-l([
-  d({ reflect: !0 })
-], r.prototype, "expanded", 2);
-l([
-  $()
-], r.prototype, "index", 2);
-class F extends S(r) {
-  constructor() {
-    super(), this.connector = new D(this), this.dataProvider = new x(this);
-  }
-}
-export {
-  F as default
-};
-//# sourceMappingURL=notification-row-wrapper.0c7a13c6.js.map

package/dist/notification-row-wrapper.0c7a13c6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"notification-row-wrapper.0c7a13c6.js","sources":["../src/notification-row-data-provider.ts","../src/notification-row.ts","../src/notification-row-wrapper.ts"],"sourcesContent":["import { ReactiveControllerHost } from 'lit';\n// import { DataProvider } from 'types-web';\nimport { DataClient } from '@telia-ace/knowledge-data-client';\nimport { DataProvider } from '@telia-ace/widget-ui';\n\n// class DataProvider {\n//     private _host: HTMLElement;\n//     node: ComponentNode | undefined;\n//     nodeId: string = '';\n//     container: Container | undefined;\n\n//     constructor(elem: HTMLElement) {\n//         this._host = elem;\n//     }\n\n//     async initialize() {\n//         this.nodeId = (this._host as any).getAttribute('nodeId');\n\n//         if (!this.nodeId) {\n//             console.warn('Could not get node id in DataProvider.');\n//             return;\n//         }\n\n//         this.container = this._requestInstance('container');\n\n//         if (!this.container) {\n//             console.warn('Could not get data in DataProvider. Container was not defined.');\n//             return;\n//         }\n//         const platform = await ComponentPlatform.getInstance(this.container);\n//         this.node = platform.nodes.get(this.nodeId);\n\n//         if (!this.node) {\n//             console.warn(`Could not get component node with ID: ${this.nodeId}.`);\n//             return;\n//         }\n//     }\n\n//     _requestInstance(key: string) {\n//         const event = new CustomEvent<{ key: string; instance?: any }>('request-instance', {\n//             detail: { key },\n//             bubbles: true,\n//             composed: true,\n//             cancelable: true,\n//         });\n//         (this._host as any).dispatchEvent(event);\n\n//         return event.detail.instance;\n//     }\n// }\n\nexport class NotificationRowDataProvider extends DataProvider {\n    host;\n\n    constructor(host: ReactiveControllerHost) {\n        super(host as any);\n        (this.host = host).addController(this);\n    }\n\n    hostConnected() {\n        this.initialize();\n    }\n\n    async initialize() {\n        await super.initialize();\n\n        this._fetch();\n    }\n\n    async _fetch() {\n        if (!this.node || !this.container) {\n            return;\n        }\n        this.node.writeProperties({\n            ...this.node.attributes.properties,\n            loading: true,\n            error: undefined,\n            notifications: [],\n        });\n\n        const dataClient = await DataClient.getInstance(this.container);\n\n        if (!dataClient) {\n            console.warn('Unable to get DataClient in NotificationRow.');\n            return;\n        }\n\n        const {\n            topNotifications = [],\n            bottomNotifications = [],\n            middleNotifications = [],\n        } = await (dataClient as any).fetch('row-notices', {\n            // categories: [ TODO: missing\n            //   input.params.guideCategory,\n            //   input.params.contactCategory,\n            // ].filter((c) => !!c),\n            // searchPhrase: input.params.phrase,\n        });\n        // const {\n        //     topNotifications = [],\n        //     bottomNotifications = [],\n        //     middleNotifications = [],\n        // } = await this.container?.getAsync('dataClient').then((dataClient) => {\n        //     return dataClient.fetch('row-notices', {\n        //         // categories: [ TODO: missing\n        //         //   input.params.guideCategory,\n        //         //   input.params.contactCategory,\n        //         // ].filter((c) => !!c),\n        //         // searchPhrase: input.params.phrase,\n        //     });\n        // });\n\n        let newNotifications: Notification[] = [];\n        const { notifications, types = [] } = this.node.attributes.properties;\n        if (types.length) {\n            if (types.indexOf('top') > -1) {\n                newNotifications = newNotifications.concat(topNotifications);\n            }\n            if (types.indexOf('middle') > -1) {\n                newNotifications = newNotifications.concat(middleNotifications);\n            }\n            if (types.indexOf('bottom') > -1) {\n                newNotifications = newNotifications.concat(bottomNotifications);\n            }\n        } else {\n            newNotifications = topNotifications;\n        }\n\n        this.node.writeProperties({\n            ...this.node.attributes.properties,\n            loading: false,\n            error: undefined,\n            notifications: newNotifications.length ? newNotifications : notifications,\n        });\n    }\n}\n","import { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nexport default class NotificationRow extends LitElement {\n    @property({ type: Boolean })\n    declare _allowPaging;\n\n    @property({ type: Boolean })\n    declare _expandable;\n\n    @property({ type: String })\n    declare _closeAriaLabel: string;\n\n    @property({ type: String })\n    declare _pageNextAriaLabel: string;\n\n    @property({ type: String })\n    declare _expandAriaLabel: string;\n\n    @property({ type: String })\n    declare _pagePreviousAriaLabel;\n\n    @property({ type: Array })\n    declare _types: string[];\n\n    @property({ type: Array })\n    declare _notifications: any[]; // TODO: no any\n\n    @state()\n    declare closed: string[];\n\n    @property({ reflect: true })\n    declare expanded: boolean;\n\n    @state()\n    declare index: number;\n\n    //   const CloseButton = styled(StyledButton)`\n    //   svg {\n    //       vertical-align: middle;\n    //       line,\n    //       path {\n    //           stroke: ${(p) => p.theme.colors?.text};\n    //       }\n    //   }\n    // `;\n\n    static styles = [\n        // genericHtml,\n        css`\n            :host::part(close-button) {\n                position: absolute;\n                top: 7.5px;\n                right: 7.5px;\n                width: 25px;\n                height: auto;\n                padding: calc(var(--size-small) / 2) var(--size-small);\n            }\n\n            :host::part(pager) {\n                text-align: center;\n                width: 100%;\n            }\n\n            :host::part(pager) span {\n                font-size: var(--fonts-small);\n                display: inline-block;\n                width: 30px;\n                text-align: center;\n            }\n\n            i {\n                color: var(--colors-text);\n            }\n\n            a {\n                color: var(--colors-link);\n            }\n\n            .notification-row {\n                padding: var(--size-normal) calc(var(--cardinal) * 12);\n                text-align: center;\n                display: flex;\n                flex-direction: column;\n                position: relative;\n                overflow: hidden;\n                background-color: var(\n                    --notification-row-background,\n                    var(--notification-row-background-default)\n                );\n                color: var(--colors-text);\n                border-radius: var(--borderRadius);\n            }\n\n            .notification-row.expandable {\n                cursor: pointer;\n            }\n\n            .notification-row.not-expandable ui-html {\n                max-width: 100%;\n            }\n\n            .notification-row.not-expandable ui-html p {\n                display: none;\n            }\n            .notification-row.not-expandable ui-html p:first-child {\n                display: block;\n                margin-bottom: 0;\n                white-space: nowrap;\n                overflow: hidden;\n                text-overflow: ellipsis;\n            }\n\n            .notification-row[data-allow-paging='false'] {\n                flex-wrap: wrap;\n            }\n            .notification-row[data-allow-paging='false'] > div {\n                min-width: 100%;\n                margin: var(--cardinal * 2);\n            }\n\n            ui-html {\n                flex: 1;\n                font-size: var(--fonts-normal);\n                line-height: 1.6em;\n                font-weight: 300;\n            }\n\n            ui-button::part(container) {\n                background-color: transparent;\n                border: none;\n                cursor: pointer;\n                transition: opacity 200ms ease-out;\n                justify-self: flex-end;\n                align-self: flex-start;\n                padding: var(--size-small);\n            }\n\n            ui-button::part(container):focus-visible {\n                outline: var(--accessibility-border);\n                color: var(--accessibility-colors-inactiveText);\n                border-color: transparent;\n            }\n\n            ui-button::part(container[data-disabled]) {\n                display: none;\n            }\n\n            ui-button[data-disabled='true']::part(container) {\n                opacity: 0.8;\n            }\n\n            @media (hover: hover) {\n                ui-button[data-disabled='false']:hover::part(container) {\n                    opacity: 0.5;\n                }\n            }\n        `,\n    ];\n\n    constructor() {\n        super();\n        this._closeAriaLabel = '';\n        this._pagePreviousAriaLabel = '';\n        this._pageNextAriaLabel = '';\n        this._types = [];\n        this._notifications = [];\n        this._expandable = false;\n        this._allowPaging = false;\n        this.expanded = false;\n        this.index = 0;\n        this.closed = [];\n    }\n\n    connectedCallback() {\n        super.connectedCallback();\n    }\n\n    private _toggleExpand() {\n        this.expanded = !this.expanded;\n    }\n\n    private getBackgroundColor() {\n        if (this._types.length) {\n            if (this._types.indexOf('top') > -1) {\n                return '--colors-warning';\n            } else if (this._types.indexOf('bottom') > -1) {\n                return '--colors-transparent';\n            }\n            return '--colors-primary';\n        }\n        return '--colors-warning';\n    }\n\n    render() {\n        this.style.setProperty(\n            '--notification-row-background-default',\n            `var(${this.getBackgroundColor()})`\n        );\n\n        const filtered = this._notifications.filter(({ id }) => this.closed.indexOf(id) === -1);\n\n        if (!filtered.length) {\n            return nothing;\n        }\n        const classes = {\n            'humany-notification-row': true,\n            'notification-row': true,\n            expandable: this._expandable,\n            expanded: this.expanded,\n            'not-expandable': this._expandable && !this.expanded,\n        };\n\n        this._allowPaging = true;\n\n        if (this._allowPaging) {\n            const notification =\n                filtered[this.index] || filtered[this.index + 1] || filtered[this.index - 1];\n\n            const { id, body } = notification || {};\n\n            return html`\n                <!-- onKeyDown={(e: React.KeyboardEvent) => {\n                    if (e.key === 'Enter') {\n                        toggleExpand();\n                    }\n                }}\n                onClick={toggleExpand} -->\n                <div\n                    class=${classMap(classes)}\n                    part=\"container\"\n                    data-expandable=${this._expandable}\n                    data-allow-paging=${this._allowPaging}\n                    aria-expanded=${this._expandable ? this.expanded : true}\n                    aria-label=${this._expandAriaLabel}\n                    tabindex=${this._expandable ? 0 : -1}\n                    @click=${() => {\n                        this._toggleExpand();\n                    }}\n                >\n                    <ui-button\n                        class=\"notification-row-close-button\"\n                        part=\"close-button\"\n                        aria-label=${this._closeAriaLabel}\n                        @click=${() => {\n                            this.index = filtered.indexOf(notification);\n                            this.closed = [...this.closed, id];\n                        }}\n                    >\n                        <ui-symbol-badge .symbol=${{ type: 'Svg', content: 'close' }} />\n                    </ui-button>\n                    <ui-html\n                        data-pageable=${length > 1}\n                        data-notification=${id}\n                        data-expandable=${this._expandable}\n                        data-expanded=${this.expanded}\n                        .html=${body}\n                    ></ui-html>\n                    <div class=\"notification-row-pager\" part=\"pager\">\n                        <ui-button\n                            aria-label=${this._pagePreviousAriaLabel}\n                            data-disabled=${this.index === 0}\n                            @click=${(e: Event) => {\n                                e.stopPropagation();\n                                if (this.index > 0) {\n                                    this.index -= 1;\n                                }\n                            }}\n                            part=\"arrow-button\"\n                        >\n                            <ui-symbol-badge\n                                .size=${10}\n                                .symbol=${{ type: 'Svg', content: 'caret-left' }}\n                                part=\"arrow-icon\"\n                            />\n                        </ui-button>\n                        <span> ${this.index + 1}/${filtered.length} </span>\n                        <ui-button\n                            aria-label=${this._pageNextAriaLabel}\n                            data-disabled=${this.index + 1 >= filtered.length}\n                            @click=${(e: Event) => {\n                                e.stopPropagation();\n                                if (this.index < filtered.length - 1) {\n                                    this.index += 1;\n                                }\n                            }}\n                            part=\"arrow-button\"\n                        >\n                            <ui-symbol-badge\n                                .size=${10}\n                                .symbol=${{ type: 'Svg', content: 'caret-right' }}\n                                part=\"arrow-icon\"\n                            />\n                        </ui-button>\n                    </div>\n                </div>\n            `;\n        }\n\n        // data-pageable=\"false\"\n        // data-types=${types}\n        // data-allow-paging=\"false\"\n        // className={appendClassNames(className, 'humany-notification-row')}\n        return html`\n            <div part=\"container\" class=${classMap(classes)} data-expandable=${this._expandable}>\n                ${filtered.map((notification) => {\n                    if (!notification) {\n                        return nothing;\n                    }\n\n                    return html` <ui-html .html=${notification.body} /> `;\n                })}\n            </div>\n        `;\n    }\n}\n","import { NotificationRowDataProvider } from './notification-row-data-provider';\n\nimport { NodeConnector, WidgetComponentMixin } from '@telia-ace/widget-ui';\nimport NotificationRow from './notification-row';\n\nexport default class NotificationRowWrapper extends WidgetComponentMixin(NotificationRow) {\n    connector = new NodeConnector(this);\n    dataProvider = new NotificationRowDataProvider(this);\n\n    constructor() {\n        super();\n    }\n}\n"],"names":["NotificationRowDataProvider","DataProvider","host","__async","__superGet","__spreadProps","__spreadValues","dataClient","DataClient","topNotifications","bottomNotifications","middleNotifications","newNotifications","notifications","types","NotificationRow","LitElement","filtered","id","nothing","classes","notification","body","html","classMap","e","css","__decorateClass","property","state","NotificationRowWrapper","WidgetComponentMixin","NodeConnector"],"mappings":"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"}

package/dist/notification-row-wrapper.d.ts

@@ -1,10 +0,0 @@
-import { NotificationRowDataProvider } from './notification-row-data-provider';
-import { NodeConnector } from '@telia-ace/widget-ui';
-import NotificationRow from './notification-row';
-declare const NotificationRowWrapper_base: import("@telia-ace/widget-ui").WidgetComponentConstructor<import("@telia-ace/widget-ui/dist/mixins/widget-component").WidgetComponentInterface> & typeof NotificationRow;
-export default class NotificationRowWrapper extends NotificationRowWrapper_base {
-    connector: NodeConnector;
-    dataProvider: NotificationRowDataProvider;
-    constructor();
-}
-export {};