@telia-ace/knowledge-widget-components-notification-row 1.0.38-experimental.0 → 1.0.38-experimental.1

package/dist/index.js

@@ -1,80 +1,16 @@
-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,
+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,
     "notification-row",
-    import("./notification-row.5162cdbf.js"),
+    import("./notification-row-wrapper.297e86c1.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();
-      };
     }
-  ).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;
+  );
+}, p = i;
 export {
-  S as default
+  p 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 {\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;"}
+{"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;"}

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

@@ -1,4 +1,3 @@
-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-data-provider.d.ts

@@ -0,0 +1,20 @@
+import { ReactiveControllerHost } from 'lit';
+import { ComponentNode } from '@telia-ace/knowledge-widget-core';
+import { Container } from '@webprovisions/platform';
+declare class DataProvider {
+    private _host;
+    node: ComponentNode | undefined;
+    nodeId: string;
+    container: Container | undefined;
+    constructor(elem: HTMLElement);
+    initialize(): Promise<void>;
+    _requestInstance(key: string): any;
+}
+export declare class NotificationRowDataProvider extends DataProvider {
+    host: ReactiveControllerHost;
+    constructor(host: ReactiveControllerHost);
+    hostConnected(): void;
+    initialize(): Promise<void>;
+    _fetch(): Promise<void>;
+}
+export {};

package/dist/notification-row-wrapper.297e86c1.js

@@ -0,0 +1,366 @@
+var P = Object.defineProperty, C = Object.defineProperties;
+var A = Object.getOwnPropertyDescriptors;
+var y = Object.getOwnPropertySymbols, k = Object.getPrototypeOf, L = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable, O = Reflect.get;
+var w = (a, t, e) => t in a ? P(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e, b = (a, t) => {
+  for (var e in t || (t = {}))
+    L.call(t, e) && w(a, e, t[e]);
+  if (y)
+    for (var e of y(t))
+      z.call(t, e) && w(a, e, t[e]);
+  return a;
+}, f = (a, t) => C(a, A(t));
+var m = (a, t, e) => O(k(a), e, t);
+var h = (a, t, e) => new Promise((o, i) => {
+  var l = (d) => {
+    try {
+      c(e.next(d));
+    } catch (u) {
+      i(u);
+    }
+  }, n = (d) => {
+    try {
+      c(e.throw(d));
+    } catch (u) {
+      i(u);
+    }
+  }, c = (d) => d.done ? o(d.value) : Promise.resolve(d.value).then(l, n);
+  c((e = e.apply(a, t)).next());
+});
+import { ComponentPlatform as I } from "@telia-ace/knowledge-widget-core";
+import { WidgetComponentMixin as E, NodeConnector as N } from "@telia-ace/widget-ui";
+import { LitElement as S, nothing as v, html as g, css as D } from "lit";
+import { property as p, state as $ } from "lit/decorators.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+class B {
+  constructor(t) {
+    this.nodeId = "", this._host = t;
+  }
+  initialize() {
+    return h(this, null, function* () {
+      if (this.nodeId = this._host.getAttribute("nodeId"), !this.nodeId) {
+        console.warn("Could not get node id in DataProvider.");
+        return;
+      }
+      if (this.container = this._requestInstance("container"), !this.container) {
+        console.warn("Could not get data in DataProvider. Container was not defined.");
+        return;
+      }
+      const t = yield I.getInstance(this.container);
+      if (this.node = t.nodes.get(this.nodeId), !this.node) {
+        console.warn(`Could not get component node with ID: ${this.nodeId}.`);
+        return;
+      }
+    });
+  }
+  _requestInstance(t) {
+    const e = new CustomEvent("request-instance", {
+      detail: { key: t },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    return this._host.dispatchEvent(e), e.detail.instance;
+  }
+}
+class x extends B {
+  constructor(t) {
+    super(t), (this.host = t).addController(this);
+  }
+  hostConnected() {
+    this.initialize();
+  }
+  initialize() {
+    return h(this, null, function* () {
+      yield m(x.prototype, this, "initialize").call(this), this._fetch();
+    });
+  }
+  _fetch() {
+    return h(this, null, function* () {
+      var c;
+      if (!this.node)
+        return;
+      this.node.writeProperties(f(b({}, this.node.attributes.properties), {
+        loading: !0,
+        error: void 0,
+        notifications: []
+      }));
+      const {
+        topNotifications: t = [],
+        bottomNotifications: e = [],
+        middleNotifications: o = []
+      } = yield (c = this.container) == null ? void 0 : c.getAsync("dataClient").then((d) => d.fetch("row-notices", {}));
+      let i = [];
+      const { notifications: l, types: n = [] } = this.node.attributes.properties;
+      n.length ? (n.indexOf("top") > -1 && (i = i.concat(t)), n.indexOf("middle") > -1 && (i = i.concat(o)), n.indexOf("bottom") > -1 && (i = i.concat(e))) : i = t, this.node.writeProperties(f(b({}, this.node.attributes.properties), {
+        loading: !1,
+        error: void 0,
+        notifications: i.length ? i : l
+      }));
+    });
+  }
+}
+var j = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (a, t, e, o) => {
+  for (var i = o > 1 ? void 0 : o ? q(t, e) : t, l = a.length - 1, n; l >= 0; l--)
+    (n = a[l]) && (i = (o ? n(t, e, i) : n(i)) || i);
+  return o && i && j(t, e, i), i;
+};
+class r extends S {
+  constructor() {
+    super(...arguments), this._allowPaging = !1, this._expandable = !1, this._closeAriaLabel = "", this._pageNextAriaLabel = "", this._expandAriaLabel = "", this._pagePreviousAriaLabel = "", this._types = [], this._notifications = [], this.closed = [], this.expanded = !1, this.index = 0;
+  }
+  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: i, body: l } = 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, i];
+      }}
+                    >
+                        <ui-symbol-badge .symbol=${{ type: "Svg", content: "close" }} />
+                    </ui-button>
+                    <ui-html
+                        data-pageable=${length > 1}
+                        data-notification=${i}
+                        data-expandable=${this._expandable}
+                        data-expanded=${this.expanded}
+                        .html=${l}
+                    />
+                    <div class="notification-row-pager" part="pager">
+                        <ui-button
+                            aria-label=${this._pagePreviousAriaLabel}
+                            data-disabled=${this.index === 0}
+                            @click=${(n) => {
+        n.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=${(n) => {
+        n.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 = [
+  D`
+            :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;
+                }
+            }
+        `
+];
+s([
+  p({ type: Boolean })
+], r.prototype, "_allowPaging", 2);
+s([
+  p({ type: Boolean })
+], r.prototype, "_expandable", 2);
+s([
+  p({ type: String })
+], r.prototype, "_closeAriaLabel", 2);
+s([
+  p({ type: String })
+], r.prototype, "_pageNextAriaLabel", 2);
+s([
+  p({ type: String })
+], r.prototype, "_expandAriaLabel", 2);
+s([
+  p({ type: String })
+], r.prototype, "_pagePreviousAriaLabel", 2);
+s([
+  p({ type: Array })
+], r.prototype, "_types", 2);
+s([
+  p({ type: Array })
+], r.prototype, "_notifications", 2);
+s([
+  $()
+], r.prototype, "closed", 2);
+s([
+  p({ reflect: !0 })
+], r.prototype, "expanded", 2);
+s([
+  $()
+], r.prototype, "index", 2);
+class G extends E(r) {
+  constructor() {
+    super(), this.connector = new N(this), this.dataProvider = new x(this);
+  }
+}
+export {
+  G as default
+};
+//# sourceMappingURL=notification-row-wrapper.297e86c1.js.map

package/dist/notification-row-wrapper.297e86c1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-row-wrapper.297e86c1.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 { ComponentNode, ComponentPlatform } from '@telia-ace/knowledge-widget-core';\nimport { Container } from '@webprovisions/platform';\n\nclass 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) {\n            return;\n        }\n        this.node.writeProperties({\n            ...this.node.attributes.properties,\n            loading: true,\n            error: undefined,\n            notifications: [],\n        });\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    _allowPaging = false;\n\n    @property({ type: Boolean })\n    _expandable = false;\n\n    @property({ type: String })\n    _closeAriaLabel = '';\n\n    @property({ type: String })\n    _pageNextAriaLabel = '';\n\n    @property({ type: String })\n    _expandAriaLabel = '';\n\n    @property({ type: String })\n    _pagePreviousAriaLabel = '';\n\n    @property({ type: Array })\n    _types: string[] = [];\n\n    @property({ type: Array })\n    _notifications: any[] = []; // TODO: no any\n\n    @state() closed: string[] = [];\n\n    @property({ reflect: true }) expanded = false;\n\n    @state() index = 0;\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    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                    />\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 { NodeConnector, WidgetComponentMixin } from '@telia-ace/knowledge-widget-ui';\n// import NotificationRow from './notification-row';\nimport { NotificationRowDataProvider } from './notification-row-data-provider';\n\nimport { NodeConnector, WidgetComponentMixin } from '@telia-ace/widget-ui';\nimport NotificationRow from './notification-row';\n\n// type Constructor<T = {}> = new (...args: any[]) => T;\n// type TestType = <T extends Constructor<LitElement>>(Base: T);\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":["DataProvider","elem","__async","platform","ComponentPlatform","key","event","NotificationRowDataProvider","host","__superGet","__spreadProps","__spreadValues","topNotifications","bottomNotifications","middleNotifications","_a","dataClient","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

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

package/dist/notification-row.d.ts

@@ -1,6 +1,19 @@
-import React from 'react';
-type Props = {
-    className: string;
-};
-declare const NotificationRow: React.FC<Props>;
-export default NotificationRow;
+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[];
+    connectedCallback(): void;
+    private _toggleExpand;
+    private getBackgroundColor;
+    render(): typeof nothing | import("lit").TemplateResult<1>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/knowledge-widget-components-notification-row",
-  "version": "1.0.38-experimental.0",
+  "version": "1.0.38-experimental.1",
   "description": "Notification row component for ACE Knowledge Widgets.",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "Telia Company AB",
@@ -21,16 +21,18 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@telia-ace/knowledge-widget-core": "^1.0.34-experimental.0",
-    "@telia-ace/knowledge-widget-types-grid": "^1.0.45-experimental.0",
-    "@telia-ace/knowledge-widget-ui": "^1.0.40-experimental.0",
-    "@telia-ace/widget-services": "^1.0.21-experimental.0",
-    "@telia-ace/widget-utilities": "^1.0.10-experimental.0",
+    "@telia-ace/knowledge-widget-core": "1.0.34-experimental.1",
+    "@telia-ace/knowledge-widget-types-grid": "1.0.45-experimental.1",
+    "@telia-ace/knowledge-widget-ui": "1.0.40-experimental.1",
+    "@telia-ace/widget-services": "^1.0.21-experimental.13",
+    "@telia-ace/widget-ui": "^1.0.28-experimental.13",
+    "@telia-ace/widget-utilities": "^1.0.10-experimental.13",
     "@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"
   },
@@ -39,6 +41,7 @@
     "@emotion/styled": "^11.10.5",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "lit": "^2.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

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

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

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