@telia-ace/knowledge-widget-components-notification-row 1.0.22 → 1.0.23

package/dist/index.js

@@ -15,48 +15,58 @@ import { DataType as D } from "@telia-ace/knowledge-widget-types-grid";
 import { createReactComponent as O } from "@telia-ace/knowledge-widget-ui";
 const S = (t) => {
   const { events: e } = t.get("$widget"), [i, u] = x(e);
-  return O(t, "notification-row", import("./notification-row.41523207.js"), (r) => {
-    const c = (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,
+  return O(
+    t,
+    "notification-row",
+    import("./notification-row.7efcaf9d.js"),
+    (r) => {
+      const c = (a) => {
+        r.writeProperties(d(h({}, r.properties()), {
           loading: !0,
+          error: void 0,
           notifications: []
-        });
-      let s = [];
-      const { notifications: w, types: n = [] } = r.properties();
-      return n.length ? (n.indexOf("top") > -1 && (s = s.concat(o)), n.indexOf("middle") > -1 && (s = s.concat(l)), n.indexOf("bottom") > -1 && (s = s.concat(f))) : s = o, r.actions.dispatch("fetched", {
-        notifications: s.length ? s : 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();
-      c(o);
-    }), i("router:changed", (a, { current: o }) => {
-      c(o.routeData.params);
-    }), () => {
-      u();
-    };
-  }).then(() => R(t, "notification-row", (r) => {
-    r.actions.watch("notification-row.fetch", (c, a) => t.getAsync("dataClient").then((o) => o.fetch(D.RowNotifications, {
-      categories: [
-        c.params.guideCategory,
-        c.params.contactCategory
-      ].filter((f) => !!f),
-      searchPhrase: c.params.phrase
-    })).then(a).catch((o) => {
+        })), 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 s = [];
+          const { notifications: w, types: n = [] } = r.properties();
+          return n.length ? (n.indexOf("top") > -1 && (s = s.concat(o)), n.indexOf("middle") > -1 && (s = s.concat(l)), n.indexOf("bottom") > -1 && (s = s.concat(f))) : s = o, r.actions.dispatch("fetched", {
+            notifications: s.length ? s : 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();
+        c(o);
+      }), i("router:changed", (a, { current: o }) => {
+        c(o.routeData.params);
+      }), () => {
+        u();
+      };
+    }
+  ).then(() => R(t, "notification-row", (r) => {
+    r.actions.watch("notification-row.fetch", (c, a) => t.getAsync("dataClient").then(
+      (o) => o.fetch(D.RowNotifications, {
+        categories: [
+          c.params.guideCategory,
+          c.params.contactCategory
+        ].filter((f) => !!f),
+        searchPhrase: c.params.phrase
+      })
+    ).then(a).catch((o) => {
       if (o)
         return a(o);
     }));

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/notification-row-component.ts"],"sourcesContent":["import {\r\n    createEventSubscriber,\r\n    extendComponent,\r\n    Notification,\r\n} from '@telia-ace/knowledge-widget-core';\r\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container, Widget } from '@webprovisions/platform';\r\n\r\ntype NotificationType = 'top' | 'middle' | 'bottom';\r\nexport type NotificationRowComponentProps = {\r\n    types: NotificationType[];\r\n    allowPaging?: boolean;\r\n    notifications?: Notification[]; // internal\r\n    expandable?: boolean;\r\n    pageNextAriaLabel?: string;\r\n    pagePreviousAriaLabel?: string;\r\n    closeAriaLabel?: string;\r\n    expandAriaLabel?: string;\r\n};\r\n\r\ntype FetchResults = NotificationResults & { error: any };\r\n\r\nexport const NotificationRowComponent = (container: Container) => {\r\n    const { events }: Widget = container.get('$widget');\r\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n    return createReactComponent(\r\n        container,\r\n        'notification-row',\r\n        import('./notification-row'),\r\n        (component) => {\r\n            const fetch = (params: { [key: string]: any }) => {\r\n                component.writeProperties({\r\n                    ...component.properties<NotificationRowComponentProps>(),\r\n                    loading: true,\r\n                    error: undefined,\r\n                    notifications: [],\r\n                });\r\n                component.actions.dispatch('fetch', { params });\r\n            };\r\n\r\n            component.actions.create(\r\n                'fetch',\r\n                ({\r\n                    error,\r\n                    topNotifications,\r\n                    bottomNotifications,\r\n                    middleNotifications,\r\n                }: FetchResults) => {\r\n                    if (error) {\r\n                        return component.actions.dispatch('fetched', {\r\n                            error,\r\n                            loading: true,\r\n                            notifications: [],\r\n                        });\r\n                    }\r\n\r\n                    let newNotifications: Notification[] = [];\r\n                    const { notifications, types = [] } =\r\n                        component.properties<NotificationRowComponentProps>();\r\n                    if (types.length) {\r\n                        if (types.indexOf('top') > -1) {\r\n                            newNotifications = newNotifications.concat(topNotifications);\r\n                        }\r\n                        if (types.indexOf('middle') > -1) {\r\n                            newNotifications = newNotifications.concat(middleNotifications);\r\n                        }\r\n                        if (types.indexOf('bottom') > -1) {\r\n                            newNotifications = newNotifications.concat(bottomNotifications);\r\n                        }\r\n                    } else {\r\n                        newNotifications = topNotifications;\r\n                    }\r\n\r\n                    return component.actions.dispatch('fetched', {\r\n                        notifications: newNotifications.length ? newNotifications : notifications,\r\n                        loading: false,\r\n                    });\r\n                }\r\n            );\r\n\r\n            component.actions.create('fetched', (input) => {\r\n                return component.writeProperties({ ...input, loading: false });\r\n            });\r\n\r\n            container.getAsync('router').then((router) => {\r\n                const { params } = router.getRouteData();\r\n                fetch(params);\r\n            });\r\n\r\n            subscribe('router:changed', (event: any, { current }: any) => {\r\n                fetch(current.routeData.params);\r\n            });\r\n\r\n            return () => {\r\n                unsubscribe();\r\n            };\r\n        }\r\n    )\r\n        .then(() => {\r\n            return extendComponent(container, 'notification-row', (component) => {\r\n                component.actions.watch('notification-row.fetch', (input, next) => {\r\n                    return container\r\n                        .getAsync('dataClient')\r\n                        .then((dataClient: DataClient) =>\r\n                            dataClient.fetch(DataType.RowNotifications, {\r\n                                categories: [\r\n                                    input.params.guideCategory,\r\n                                    input.params.contactCategory,\r\n                                ].filter((c) => !!c),\r\n                                searchPhrase: input.params.phrase,\r\n                            })\r\n                        )\r\n                        .then(next)\r\n                        .catch((error) => {\r\n                            if (error) {\r\n                                return next(error);\r\n                            }\r\n                        });\r\n                });\r\n            });\r\n        })\r\n        .then(() => {\r\n            unsubscribe();\r\n        });\r\n};\r\n\r\nexport default NotificationRowComponent;\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBa,MAAA,IAA2B,CAAC,MAAyB;AAC9D,QAAM,EAAE,cAAmB,EAAU,IAAI,SAAS,GAC5C,CAAC,GAAW,KAAe,EAAsB,CAAM;AAE7D,SAAO,EACH,GACA,oBACA,OAAO,mCACP,CAAC,MAAc;AACL,UAAA,IAAQ,CAAC,MAAmC;AAC9C,QAAU,gBAAgB,QACnB,EAAU,WAA0C,IADjC;AAAA,QAEtB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,eAAe,CAAC;AAAA,MAAA,EACnB,GACD,EAAU,QAAQ,SAAS,SAAS,EAAE,UAAQ,CAAA;AAAA,IAAA;AAGxC,aAAA,QAAQ,OACd,SACA,CAAC;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,UACgB;AAChB,UAAI;AACO,eAAA,EAAU,QAAQ,SAAS,WAAW;AAAA,UACzC;AAAA,UACA,SAAS;AAAA,UACT,eAAe,CAAC;AAAA,QAAA,CACnB;AAGL,UAAI,IAAmC,CAAA;AACvC,YAAM,EAAE,kBAAe,WAAQ,CAAC,MAC5B,EAAU;AACd,aAAI,EAAM,SACF,GAAM,QAAQ,KAAK,IAAI,MACJ,KAAA,EAAiB,OAAO,CAAgB,IAE3D,EAAM,QAAQ,QAAQ,IAAI,MACP,KAAA,EAAiB,OAAO,CAAmB,IAE9D,EAAM,QAAQ,QAAQ,IAAI,MACP,KAAA,EAAiB,OAAO,CAAmB,MAG/C,IAAA,GAGhB,EAAU,QAAQ,SAAS,WAAW;AAAA,QACzC,eAAe,EAAiB,SAAS,IAAmB;AAAA,QAC5D,SAAS;AAAA,MAAA,CACZ;AAAA,IAAA,CAET,GAEA,EAAU,QAAQ,OAAO,WAAW,CAAC,MAC1B,EAAU,gBAAgB,QAAK,IAAL,EAAY,SAAS,KAAO,CAChE,GAED,EAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,MAAW;AACpC,YAAA,EAAE,cAAW,EAAO,aAAa;AACvC,QAAM,CAAM;AAAA,IAAA,CACf,GAED,EAAU,kBAAkB,CAAC,GAAY,EAAE,iBAAmB;AACpD,QAAA,EAAQ,UAAU,MAAM;AAAA,IAAA,CACjC,GAEM,MAAM;AACG;IAAA;AAAA,EAChB,CAER,EACK,KAAK,MACK,EAAgB,GAAW,oBAAoB,CAAC,MAAc;AACjE,MAAU,QAAQ,MAAM,0BAA0B,CAAC,GAAO,MAC/C,EACF,SAAS,YAAY,EACrB,KAAK,CAAC,MACH,EAAW,MAAM,EAAS,kBAAkB;AAAA,MACxC,YAAY;AAAA,QACR,EAAM,OAAO;AAAA,QACb,EAAM,OAAO;AAAA,QACf,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,MACnB,cAAc,EAAM,OAAO;AAAA,IAAA,CAC9B,CACL,EACC,KAAK,CAAI,EACT,MAAM,CAAC,MAAU;AACd,UAAI;AACA,eAAO,EAAK,CAAK;AAAA,IACrB,CACH,CACR;AAAA,EAAA,CACJ,CACJ,EACA,KAAK,MAAM;AACI;EAAA,CACf;AACT;"}
+{"version":3,"file":"index.js","sources":["../src/notification-row-component.ts"],"sourcesContent":["import {\r\n    createEventSubscriber,\r\n    extendComponent,\r\n    Notification,\r\n} from '@telia-ace/knowledge-widget-core';\r\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container, Widget } from '@webprovisions/platform';\r\n\r\ntype NotificationType = 'top' | 'middle' | 'bottom';\r\nexport type NotificationRowComponentProps = {\r\n    types: NotificationType[];\r\n    allowPaging?: boolean;\r\n    notifications?: Notification[]; // internal\r\n    expandable?: boolean;\r\n    pageNextAriaLabel?: string;\r\n    pagePreviousAriaLabel?: string;\r\n    closeAriaLabel?: string;\r\n    expandAriaLabel?: string;\r\n};\r\n\r\ntype FetchResults = NotificationResults & { error: any };\r\n\r\nexport const NotificationRowComponent = (container: Container) => {\r\n    const { events }: Widget = container.get('$widget');\r\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n    return createReactComponent(\r\n        container,\r\n        'notification-row',\r\n        import('./notification-row'),\r\n        (component) => {\r\n            const fetch = (params: { [key: string]: any }) => {\r\n                component.writeProperties({\r\n                    ...component.properties<NotificationRowComponentProps>(),\r\n                    loading: true,\r\n                    error: undefined,\r\n                    notifications: [],\r\n                });\r\n                component.actions.dispatch('fetch', { params });\r\n            };\r\n\r\n            component.actions.create(\r\n                'fetch',\r\n                ({\r\n                    error,\r\n                    topNotifications,\r\n                    bottomNotifications,\r\n                    middleNotifications,\r\n                }: FetchResults) => {\r\n                    if (error) {\r\n                        return component.actions.dispatch('fetched', {\r\n                            error,\r\n                            loading: true,\r\n                            notifications: [],\r\n                        });\r\n                    }\r\n\r\n                    let newNotifications: Notification[] = [];\r\n                    const { notifications, types = [] } =\r\n                        component.properties<NotificationRowComponentProps>();\r\n                    if (types.length) {\r\n                        if (types.indexOf('top') > -1) {\r\n                            newNotifications = newNotifications.concat(topNotifications);\r\n                        }\r\n                        if (types.indexOf('middle') > -1) {\r\n                            newNotifications = newNotifications.concat(middleNotifications);\r\n                        }\r\n                        if (types.indexOf('bottom') > -1) {\r\n                            newNotifications = newNotifications.concat(bottomNotifications);\r\n                        }\r\n                    } else {\r\n                        newNotifications = topNotifications;\r\n                    }\r\n\r\n                    return component.actions.dispatch('fetched', {\r\n                        notifications: newNotifications.length ? newNotifications : notifications,\r\n                        loading: false,\r\n                    });\r\n                }\r\n            );\r\n\r\n            component.actions.create('fetched', (input) => {\r\n                return component.writeProperties({ ...input, loading: false });\r\n            });\r\n\r\n            container.getAsync('router').then((router) => {\r\n                const { params } = router.getRouteData();\r\n                fetch(params);\r\n            });\r\n\r\n            subscribe('router:changed', (event: any, { current }: any) => {\r\n                fetch(current.routeData.params);\r\n            });\r\n\r\n            return () => {\r\n                unsubscribe();\r\n            };\r\n        }\r\n    )\r\n        .then(() => {\r\n            return extendComponent(container, 'notification-row', (component) => {\r\n                component.actions.watch('notification-row.fetch', (input, next) => {\r\n                    return container\r\n                        .getAsync('dataClient')\r\n                        .then((dataClient: DataClient) =>\r\n                            dataClient.fetch(DataType.RowNotifications, {\r\n                                categories: [\r\n                                    input.params.guideCategory,\r\n                                    input.params.contactCategory,\r\n                                ].filter((c) => !!c),\r\n                                searchPhrase: input.params.phrase,\r\n                            })\r\n                        )\r\n                        .then(next)\r\n                        .catch((error) => {\r\n                            if (error) {\r\n                                return next(error);\r\n                            }\r\n                        });\r\n                });\r\n            });\r\n        })\r\n        .then(() => {\r\n            unsubscribe();\r\n        });\r\n};\r\n\r\nexport default NotificationRowComponent;\r\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"],"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;"}

package/dist/{notification-row.41523207.js → notification-row.7efcaf9d.js}

@@ -1,126 +1,134 @@
 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) => {
+var L = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
+var I = (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]);
+    L.call(t, a) && I(e, a, t[a]);
   if (y)
     for (var a of y(t))
-      L.call(t, a) && H(e, a, t[a]);
+      N.call(t, a) && I(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]);
+    L.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]);
+      t.indexOf(n) < 0 && N.call(e, n) && (a[n] = e[n]);
   return a;
 };
-import { useProperties as ee, useContainer as te, createEmptyComponent as N, SymbolBadge as F, genericHtml as ae, linkTabStyle as ne, borderTabStyle as G, Html as ie, Button as oe } from "@telia-ace/knowledge-widget-ui";
-import { readStorage as R, StorageMedium as W, createStorageWriter as le, StorageCategory as re } from "@telia-ace/widget-services";
+import { useProperties as ee, useContainer as te, createEmptyComponent as R, 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 T, StorageMedium as W, createStorageWriter as le, StorageCategory as re } from "@telia-ace/widget-services";
 import { appendClassNames as w } from "@telia-ace/widget-utilities";
-import o, { useState as $, useEffect as K } from "react";
-import c, { css as u } from "styled-components";
+import i, { useState as $, useEffect as K } from "react";
+import c, { css as h } from "styled-components";
 const z = "closed-notifications", se = {
   transform: {
     a: (a) => {
       var n = a, { children: e } = n, t = k(n, ["children"]);
-      return /* @__PURE__ */ o.createElement("a", g(f({}, t), {
+      return /* @__PURE__ */ i.createElement("a", g(f({}, t), {
         tabIndex: -1
       }), e);
     }
   }
-}, ue = (a) => {
+}, he = (a) => {
   var n = a, { className: e } = n, t = k(n, ["className"]);
   const {
     types: O = [],
-    allowPaging: T = !0,
+    allowPaging: A = !0,
     notifications: M = [],
     expandable: m = !1,
     closeAriaLabel: Y = "",
     pageNextAriaLabel: _ = "",
     pagePreviousAriaLabel: q = "",
     expandAriaLabel: J = ""
-  } = ee(), [b, Q] = $(!1), [x, A] = $([]), [l, E] = $(0), r = te(), [v, U] = $();
+  } = ee(), [b, Q] = $(!1), [x, B] = $([]), [l, v] = $(0), r = te(), [E, U] = $();
   K(() => {
-    r && (R(r, z, W.Session).then((i = []) => A(i)), le(r, z, re.Functional).then((i) => U(() => i)));
+    r && (T(r, z, W.Session).then(
+      (o = []) => B(o)
+    ), le(r, z, re.Functional).then(
+      (o) => U(() => o)
+    ));
   }, [r]), K(() => {
-    r && R(r, z, W.Session).then((i = []) => {
-      x.forEach((s) => i.indexOf(s) === -1 && i.push(s)), v && v(i);
-    });
-  }, [x, r, v]);
-  const d = M.filter(({ id: i }) => x.indexOf(i) === -1), { length: p } = d;
+    r && T(r, z, W.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), {
+    return R(r, g(f({}, t), {
       className: w(e, "humany-notification-row")
     }));
-  if (T) {
-    const i = d[l] || d[l + 1] || d[l - 1];
-    if (!i)
-      return N(r, g(f({}, t), {
+  if (A) {
+    const o = d[l] || d[l + 1] || d[l - 1];
+    if (!o)
+      return R(r, g(f({}, t), {
         className: w(e, "humany-notification-row")
       }));
-    const { id: s, body: S } = i || {}, B = () => Q(!b);
-    return /* @__PURE__ */ o.createElement(j, g(f({}, t), {
+    const { id: s, body: S } = o || {}, H = () => Q(!b);
+    return /* @__PURE__ */ i.createElement(j, g(f({}, t), {
       "aria-expanded": m ? b : !0,
       "aria-label": J,
       tabIndex: m ? 0 : -1,
       className: w(e, "humany-notification-row"),
       "data-pageable": p > 1,
       "data-types": O,
-      "data-allow-paging": T,
+      "data-allow-paging": A,
       "data-expandable": m,
-      onKeyDown: (h) => {
-        h.key === "Enter" && B();
+      onKeyDown: (u) => {
+        u.key === "Enter" && H();
       },
-      onClick: B
-    }), /* @__PURE__ */ o.createElement(ce, {
+      onClick: H
+    }), /* @__PURE__ */ i.createElement(ce, {
       "aria-label": Y,
       onClick: () => {
-        E(d.indexOf(i)), A([...x, s]);
+        v(d.indexOf(o)), B([...x, s]);
       }
-    }, /* @__PURE__ */ o.createElement(F, {
+    }, /* @__PURE__ */ i.createElement(F, {
       symbol: { type: "Svg", content: "close" }
-    })), /* @__PURE__ */ o.createElement(C, {
+    })), /* @__PURE__ */ i.createElement(C, {
       htmlParseInstruction: !m || b ? void 0 : se,
       "data-pageable": p > 1,
       "data-notification": s,
       "data-expandable": m,
       "data-expanded": b,
       html: S
-    }), p > 1 && /* @__PURE__ */ o.createElement(de, null, /* @__PURE__ */ o.createElement(P, {
+    }), p > 1 && /* @__PURE__ */ i.createElement(de, null, /* @__PURE__ */ i.createElement(P, {
       "aria-label": q,
       "data-disabled": l === 0,
-      onClick: (h) => {
-        h.stopPropagation(), l > 0 && E(l - 1);
+      onClick: (u) => {
+        u.stopPropagation(), l > 0 && v(l - 1);
       }
-    }, /* @__PURE__ */ o.createElement(D, {
+    }, /* @__PURE__ */ i.createElement(D, {
       size: 10,
       symbol: { type: "Svg", content: "caret-left" }
-    })), /* @__PURE__ */ o.createElement("span", null, l + 1, "/", p), /* @__PURE__ */ o.createElement(P, {
+    })), /* @__PURE__ */ i.createElement("span", null, l + 1, "/", p), /* @__PURE__ */ i.createElement(P, {
       "aria-label": _,
       "data-disabled": l + 1 >= p,
-      onClick: (h) => {
-        h.stopPropagation(), l < p - 1 && E(l + 1);
+      onClick: (u) => {
+        u.stopPropagation(), l < p - 1 && v(l + 1);
       }
-    }, /* @__PURE__ */ o.createElement(D, {
+    }, /* @__PURE__ */ i.createElement(D, {
       size: 10,
       symbol: { type: "Svg", content: "caret-right" }
     }))));
   }
-  return /* @__PURE__ */ o.createElement(j, g(f({}, t), {
+  return /* @__PURE__ */ i.createElement(j, g(f({}, t), {
     className: w(e, "humany-notification-row"),
     "data-pageable": !1,
     "data-types": O,
     "data-allow-paging": !1
-  }), d.map((i) => {
-    if (!i)
+  }), d.map((o) => {
+    if (!o)
       return null;
-    const { id: s, body: S } = i;
-    return /* @__PURE__ */ o.createElement(C, {
+    const { id: s, body: S } = o;
+    return /* @__PURE__ */ i.createElement(C, {
       key: s,
       "data-pageable": !1,
       "data-expandable": m,
@@ -131,7 +139,10 @@ const z = "closed-notifications", se = {
   }));
 }, j = c.div`
     ${ae}
-    padding: ${(e) => e.theme.sizes.normal} ${(e) => {
+    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;
@@ -163,17 +174,14 @@ const z = "closed-notifications", se = {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.link;
 }};
-        &:focus {
-            ${(e) => {
-  var t;
-  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && ne;
-}}
+        &:focus-visible {
+            ${ne}
         }
     }
 
     ${(e) => {
   var t;
-  return !e["data-allow-paging"] && u`
+  return !e["data-allow-paging"] && h`
             flex-wrap: wrap;
 
             > div {
@@ -183,17 +191,14 @@ const z = "closed-notifications", se = {
         `;
 }};
 
-    ${(e) => {
-  var t;
-  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && u`
-            &:focus {
+    ${(e) => h`
+            &:focus-visible {
                 ${C} {
                     ${G}
                 }
             }
-        `;
-}}
-`, C = c(ie)`
+        `}
+`, C = c(oe)`
     flex: 1;
     font-size: ${(e) => {
   var t;
@@ -202,7 +207,7 @@ const z = "closed-notifications", se = {
     line-height: 1.6em;
     font-weight: 300;
 
-    ${(e) => e["data-expandable"] && !e["data-expanded"] && u`
+    ${(e) => e["data-expandable"] && !e["data-expanded"] && h`
             max-width: 100%;
 
             p {
@@ -228,7 +233,7 @@ const z = "closed-notifications", se = {
         width: 30px;
         text-align: center;
     }
-`, P = c(oe)`
+`, P = c(ie)`
     background-color: transparent;
     border: none;
     cursor: pointer;
@@ -242,16 +247,13 @@ const z = "closed-notifications", se = {
         display: block;
     }
 
-    &:focus {
-        ${(e) => {
-  var t;
-  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && G;
-}}
+    &:focus-visible {
+        ${G}
     }
 
-    ${(e) => e["data-disabled"] ? u`
+    ${(e) => e["data-disabled"] ? h`
                   opacity: 0.8;
-              ` : u`
+              ` : h`
                   @media (hover) {
                       &:hover {
                           opacity: 0.5;
@@ -267,7 +269,8 @@ const z = "closed-notifications", se = {
     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 {
+}};
+    svg {
         vertical-align: middle;
         line,
         path {
@@ -286,6 +289,6 @@ c.div`
     display: none;
 `;
 export {
-  ue as default
+  he as default
 };
-//# sourceMappingURL=notification-row.41523207.js.map
+//# sourceMappingURL=notification-row.7efcaf9d.js.map

package/dist/notification-row.7efcaf9d.js.map

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

@@ -1,6 +1,6 @@
 {
     "name": "@telia-ace/knowledge-widget-components-notification-row",
-    "version": "1.0.22",
+    "version": "1.0.23",
     "description": "Notification row component for ACE Knowledge Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
@@ -8,6 +8,7 @@
         "telia"
     ],
     "main": "dist/index.js",
+    "sourceMain": "src/index.ts",
     "type": "module",
     "types": "dist/index.d.ts",
     "files": [
@@ -25,11 +26,11 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@telia-ace/knowledge-widget-core": "^1.0.18",
-        "@telia-ace/knowledge-widget-types-grid": "^1.0.29",
-        "@telia-ace/knowledge-widget-ui": "^1.0.24",
-        "@telia-ace/widget-services": "^1.0.14",
-        "@telia-ace/widget-utilities": "^1.0.3",
+        "@telia-ace/knowledge-widget-core": "^1.0.19",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.30",
+        "@telia-ace/knowledge-widget-ui": "^1.0.25",
+        "@telia-ace/widget-services": "^1.0.15",
+        "@telia-ace/widget-utilities": "^1.0.4",
         "@webprovisions/platform": "^1.1.2"
     },
     "peerDependencies": {
@@ -42,5 +43,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "b30b55cc433567b8f9de20d83b840919ffc0d58a"
+    "gitHead": "db190a67f912245c4145c037972fac2039bda698"
 }

package/dist/notification-row.41523207.js.map

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