@telia-ace/knowledge-widget-components-notification-row 1.0.4 → 1.0.9

package/dist/index.js

@@ -0,0 +1,102 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { createEventSubscriber, extendComponent } from "@telia-ace/knowledge-widget-core";
+import { DataType } from "@telia-ace/knowledge-widget-types-grid";
+import { createReactComponent } from "@telia-ace/knowledge-widget-ui";
+const NotificationRowComponent = (container) => {
+  const { events } = container.get("$widget");
+  const [subscribe, unsubscribe] = createEventSubscriber(events);
+  return createReactComponent(container, "notification-row", import("./notification-row.js"), (component) => {
+    const fetch = (params) => {
+      component.writeProperties(__spreadProps(__spreadValues({}, component.properties()), {
+        loading: true,
+        error: void 0,
+        notifications: []
+      }));
+      component.actions.dispatch("fetch", { params });
+    };
+    component.actions.create("fetch", ({
+      error,
+      topNotifications,
+      bottomNotifications,
+      middleNotifications
+    }) => {
+      if (error) {
+        return component.actions.dispatch("fetched", {
+          error,
+          loading: true,
+          notifications: []
+        });
+      }
+      let newNotifications = [];
+      const { notifications, types = [] } = component.properties();
+      if (types.length) {
+        if (types.indexOf("top") > -1) {
+          newNotifications = newNotifications.concat(topNotifications);
+        }
+        if (types.indexOf("middle") > -1) {
+          newNotifications = newNotifications.concat(middleNotifications);
+        }
+        if (types.indexOf("bottom") > -1) {
+          newNotifications = newNotifications.concat(bottomNotifications);
+        }
+      } else {
+        newNotifications = topNotifications;
+      }
+      return component.actions.dispatch("fetched", {
+        notifications: newNotifications.length ? newNotifications : notifications,
+        loading: false
+      });
+    });
+    component.actions.create("fetched", (input) => {
+      return component.writeProperties(__spreadProps(__spreadValues({}, input), { loading: false }));
+    });
+    container.getAsync("router").then((router) => {
+      const { params } = router.getRouteData();
+      fetch(params);
+    });
+    subscribe("router:changed", (event, { current }) => {
+      fetch(current.routeData.params);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }).then(() => {
+    return extendComponent(container, "notification-row", (component) => {
+      component.actions.watch("notification-row.fetch", (input, next) => {
+        return container.getAsync("dataClient").then((dataClient) => dataClient.fetch(DataType.RowNotifications, {
+          categories: [
+            input.params.guideCategory,
+            input.params.contactCategory
+          ].filter((c) => !!c),
+          searchPhrase: input.params.phrase
+        })).then(next).catch((error) => {
+          if (error) {
+            return next(error);
+          }
+        });
+      });
+    });
+  }).then(() => {
+    unsubscribe();
+  });
+};
+export { NotificationRowComponent as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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,2BAA2B,CAAC,cAAyB;AAC9D,QAAM,EAAE,WAAmB,UAAU,IAAI,SAAS;AAClD,QAAM,CAAC,WAAW,eAAe,sBAAsB,MAAM;AAE7D,SAAO,qBACH,WACA,oBACA,OAAO,0BACP,CAAC,cAAc;AACL,UAAA,QAAQ,CAAC,WAAmC;AAC9C,gBAAU,gBAAgB,iCACnB,UAAU,WAA0C,IADjC;AAAA,QAEtB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,eAAe,CAAC;AAAA,MAAA,EACnB;AACD,gBAAU,QAAQ,SAAS,SAAS,EAAE,OAAQ,CAAA;AAAA,IAAA;AAGxC,cAAA,QAAQ,OACd,SACA,CAAC;AAAA,MACG;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,UACgB;AAChB,UAAI,OAAO;AACA,eAAA,UAAU,QAAQ,SAAS,WAAW;AAAA,UACzC;AAAA,UACA,SAAS;AAAA,UACT,eAAe,CAAC;AAAA,QAAA,CACnB;AAAA,MACL;AAEA,UAAI,mBAAmC,CAAA;AACvC,YAAM,EAAE,eAAe,QAAQ,CAAC,MAC5B,UAAU;AACd,UAAI,MAAM,QAAQ;AACd,YAAI,MAAM,QAAQ,KAAK,IAAI,IAAI;AACR,6BAAA,iBAAiB,OAAO,gBAAgB;AAAA,QAC/D;AACA,YAAI,MAAM,QAAQ,QAAQ,IAAI,IAAI;AACX,6BAAA,iBAAiB,OAAO,mBAAmB;AAAA,QAClE;AACA,YAAI,MAAM,QAAQ,QAAQ,IAAI,IAAI;AACX,6BAAA,iBAAiB,OAAO,mBAAmB;AAAA,QAClE;AAAA,MAAA,OACG;AACgB,2BAAA;AAAA,MACvB;AAEO,aAAA,UAAU,QAAQ,SAAS,WAAW;AAAA,QACzC,eAAe,iBAAiB,SAAS,mBAAmB;AAAA,QAC5D,SAAS;AAAA,MAAA,CACZ;AAAA,IAAA,CAET;AAEA,cAAU,QAAQ,OAAO,WAAW,CAAC,UAAU;AAC3C,aAAO,UAAU,gBAAgB,iCAAK,QAAL,EAAY,SAAS,QAAO;AAAA,IAAA,CAChE;AAED,cAAU,SAAS,QAAQ,EAAE,KAAK,CAAC,WAAW;AACpC,YAAA,EAAE,WAAW,OAAO,aAAa;AACvC,YAAM,MAAM;AAAA,IAAA,CACf;AAED,cAAU,kBAAkB,CAAC,OAAY,EAAE,cAAmB;AACpD,YAAA,QAAQ,UAAU,MAAM;AAAA,IAAA,CACjC;AAED,WAAO,MAAM;AACG;IAAA;AAAA,EAChB,CAER,EACK,KAAK,MAAM;AACR,WAAO,gBAAgB,WAAW,oBAAoB,CAAC,cAAc;AACjE,gBAAU,QAAQ,MAAM,0BAA0B,CAAC,OAAO,SAAS;AACxD,eAAA,UACF,SAAS,YAAY,EACrB,KAAK,CAAC,eACH,WAAW,MAAM,SAAS,kBAAkB;AAAA,UACxC,YAAY;AAAA,YACR,MAAM,OAAO;AAAA,YACb,MAAM,OAAO;AAAA,YACf,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAAA,UACnB,cAAc,MAAM,OAAO;AAAA,QAAA,CAC9B,CACL,EACC,KAAK,IAAI,EACT,MAAM,CAAC,UAAU;AACd,cAAI,OAAO;AACP,mBAAO,KAAK,KAAK;AAAA,UACrB;AAAA,QAAA,CACH;AAAA,MAAA,CACR;AAAA,IAAA,CACJ;AAAA,EAAA,CACJ,EACA,KAAK,MAAM;AACI;EAAA,CACf;AACT;;"}

package/dist/notification-row.js

@@ -0,0 +1,344 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { useProperties, useContainer, createEmptyComponent, SymbolBadge, genericHtml, linkTabStyle, borderTabStyle, Html, Button } from "@telia-ace/knowledge-widget-ui";
+import { readStorage, StorageMedium, createStorageWriter, StorageCategory } from "@telia-ace/widget-services";
+import { appendClassNames } from "@telia-ace/widget-utilities";
+import React, { useState, useEffect } from "react";
+import styled, { css } from "styled-components";
+const STORAGE_KEY = "closed-notifications";
+const infocusableHtml = {
+  transform: {
+    a: (_a) => {
+      var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+      return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({}, props), {
+        tabIndex: -1
+      }), children);
+    }
+  }
+};
+const NotificationRow = (_c) => {
+  var _d = _c, { className } = _d, other = __objRest(_d, ["className"]);
+  const {
+    types = [],
+    allowPaging = true,
+    notifications = [],
+    expandable = false,
+    closeAriaLabel = "",
+    pageNextAriaLabel = "",
+    pagePreviousAriaLabel = "",
+    expandAriaLabel = ""
+  } = useProperties();
+  const [expanded, setExpanded] = useState(false);
+  const [closed, setClosed] = useState([]);
+  const [index, setIndex] = useState(0);
+  const container = useContainer();
+  const [write, setWriter] = useState();
+  useEffect(() => {
+    if (container) {
+      readStorage(container, STORAGE_KEY, StorageMedium.Session).then((closed2 = []) => setClosed(closed2));
+      createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then((writer) => setWriter(() => writer));
+    }
+  }, [container]);
+  useEffect(() => {
+    if (container) {
+      readStorage(container, STORAGE_KEY, StorageMedium.Session).then((storedClosed = []) => {
+        closed.forEach((id) => storedClosed.indexOf(id) === -1 && storedClosed.push(id));
+        if (write) {
+          write(storedClosed);
+        }
+      });
+    }
+  }, [closed, container, write]);
+  const filtered = notifications.filter(({ id }) => closed.indexOf(id) === -1);
+  const { length } = filtered;
+  if (!filtered.length) {
+    return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
+      className: appendClassNames(className, "humany-notification-row")
+    }));
+  }
+  if (allowPaging) {
+    const notification = filtered[index] || filtered[index + 1] || filtered[index - 1];
+    if (!notification) {
+      return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
+        className: appendClassNames(className, "humany-notification-row")
+      }));
+    }
+    const { id, body } = notification || {};
+    const toggleExpand = () => setExpanded(!expanded);
+    return /* @__PURE__ */ React.createElement(Wrapper, __spreadProps(__spreadValues({}, other), {
+      "aria-expanded": expandable ? expanded : true,
+      "aria-label": expandAriaLabel,
+      tabIndex: expandable ? 0 : -1,
+      className: appendClassNames(className, "humany-notification-row"),
+      "data-pageable": length > 1,
+      "data-types": types,
+      "data-allow-paging": allowPaging,
+      "data-expandable": expandable,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          toggleExpand();
+        }
+      },
+      onClick: toggleExpand
+    }), /* @__PURE__ */ React.createElement(CloseButton, {
+      "aria-label": closeAriaLabel,
+      onClick: () => {
+        setIndex(filtered.indexOf(notification));
+        setClosed([...closed, id]);
+      }
+    }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+      symbol: { type: "Svg", content: "close" }
+    })), /* @__PURE__ */ React.createElement(StyledHtml, {
+      htmlParseInstruction: !expandable || expanded ? void 0 : infocusableHtml,
+      "data-pageable": length > 1,
+      "data-notification": id,
+      "data-expandable": expandable,
+      "data-expanded": expanded,
+      html: body
+    }), length > 1 && /* @__PURE__ */ React.createElement(Pager, null, /* @__PURE__ */ React.createElement(StyledButton, {
+      "aria-label": pagePreviousAriaLabel,
+      "data-disabled": index === 0,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (index > 0) {
+          setIndex(index - 1);
+        }
+      }
+    }, /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
+      size: 10,
+      symbol: { type: "Svg", content: "caret-left" }
+    })), /* @__PURE__ */ React.createElement("span", null, index + 1, "/", length), /* @__PURE__ */ React.createElement(StyledButton, {
+      "aria-label": pageNextAriaLabel,
+      "data-disabled": index + 1 >= length,
+      onClick: (e) => {
+        e.stopPropagation();
+        if (index < length - 1) {
+          setIndex(index + 1);
+        }
+      }
+    }, /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
+      size: 10,
+      symbol: { type: "Svg", content: "caret-right" }
+    }))));
+  }
+  return /* @__PURE__ */ React.createElement(Wrapper, __spreadProps(__spreadValues({}, other), {
+    className: appendClassNames(className, "humany-notification-row"),
+    "data-pageable": false,
+    "data-types": types,
+    "data-allow-paging": false
+  }), filtered.map((notification) => {
+    if (!notification) {
+      return null;
+    }
+    const { id, body } = notification;
+    return /* @__PURE__ */ React.createElement(StyledHtml, {
+      key: id,
+      "data-pageable": false,
+      "data-expandable": expandable,
+      "data-expanded": expanded,
+      "data-notification": id,
+      html: body
+    });
+  }));
+};
+const Wrapper = styled.div`
+    ${genericHtml}
+    padding: ${(p) => p.theme.sizes.normal} ${(p) => {
+  var _a;
+  return ((_a = p.theme.sizes) == null ? void 0 : _a.cardinal) * 12;
+}}px;
+    background-color: ${(p) => {
+  var _a, _b, _c;
+  if (p["data-types"].length) {
+    if (p["data-types"].indexOf("top") > -1) {
+      return (_a = p.theme.colors) == null ? void 0 : _a.warning;
+    }
+    if (p["data-types"].indexOf("bottom") > -1) {
+      return "transparent";
+    }
+    return (_b = p.theme.colors) == null ? void 0 : _b.primary;
+  }
+  return (_c = p.theme.colors) == null ? void 0 : _c.warning;
+}};
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    border-radius: ${(p) => p.theme.borderRadius};
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    cursor: ${(p) => p["data-expandable"] ? "pointer" : "default"};
+    overflow: hidden;
+
+    i {
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+
+    a {
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.link;
+}};
+        &:focus {
+            ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && linkTabStyle;
+}}
+        }
+    }
+
+    ${(p) => {
+  var _a;
+  return !p["data-allow-paging"] && css`
+            flex-wrap: wrap;
+
+            > div {
+                min-width: 100%;
+                margin: ${((_a = p.theme.sizes) == null ? void 0 : _a.cardinal) * 2}px;
+            }
+        `;
+}};
+
+    ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+            &:focus {
+                ${StyledHtml} {
+                    ${borderTabStyle}
+                }
+            }
+        `;
+}}
+`;
+const StyledHtml = styled(Html)`
+    flex: 1;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    line-height: 1.6em;
+    font-weight: 300;
+
+    ${(p) => p["data-expandable"] && !p["data-expanded"] && css`
+            max-width: 100%;
+
+            p {
+                display: none;
+                &:first-child {
+                    display: block;
+                    margin-bottom: 0;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        `}
+`;
+const Pager = styled.div`
+    text-align: center;
+    width: 100%;
+    span {
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.small;
+}};
+        display: inline-block;
+        width: 30px;
+        text-align: center;
+    }
+`;
+const StyledButton = styled(Button)`
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    transition: opacity 200ms ease-out;
+    justify-self: flex-end;
+    align-self: flex-start;
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} svg {
+        display: block;
+    }
+
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}}
+    }
+
+    ${(p) => p["data-disabled"] ? css`
+                  opacity: 0.8;
+              ` : css`
+                  @media (hover) {
+                      &:hover {
+                          opacity: 0.5;
+                      }
+                  }
+              `}
+`;
+const CloseButton = styled(StyledButton)`
+    position: absolute;
+    top: 7.5px;
+    right: 7.5px;
+    width: 25px;
+    height: auto;
+    padding: ${(p) => {
+  var _a, _b;
+  return `calc(${(_a = p.theme.sizes) == null ? void 0 : _a.small}/2) ${(_b = p.theme.sizes) == null ? void 0 : _b.small}`;
+}} svg {
+        vertical-align: middle;
+        line,
+        path {
+            stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+        }
+    }
+`;
+const StyledSymbolBadge = styled(SymbolBadge)`
+    line {
+        stroke: #ffffff;
+    }
+`;
+styled.div`
+    display: none;
+`;
+export { NotificationRow as default };
+//# sourceMappingURL=notification-row.js.map

package/dist/notification-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-row.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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"}

package/package.json

@@ -1,34 +1,33 @@
 {
     "name": "@telia-ace/knowledge-widget-components-notification-row",
-    "version": "1.0.4",
+    "version": "1.0.9",
     "description": "Notification row component for ACE Knowledge Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
     "keywords": [
         "telia"
     ],
-    "main": "lib/index.js",
-    "module": "lib-esm/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
     "files": [
         "LICENSE.txt",
         "README.md",
-        "lib/",
-        "lib-esm/"
+        "dist/"
     ],
     "publishConfig": {
         "access": "public"
     },
     "scripts": {
-        "clean": "cleandir lib && cleandir lib-esm",
-        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+        "clean": "rimraf ./dist",
+        "precompile": "tsc -emitDeclarationOnly",
+        "compile": "vite build"
     },
     "sideEffects": false,
-    "typings": "lib/index.d.ts",
     "dependencies": {
-        "@telia-ace/knowledge-widget-core": "^1.0.6",
-        "@telia-ace/knowledge-widget-types-grid": "^1.0.7",
-        "@telia-ace/knowledge-widget-ui": "^1.0.7",
-        "@telia-ace/widget-services": "^1.0.4",
+        "@telia-ace/knowledge-widget-core": "^1.0.7",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.14",
+        "@telia-ace/knowledge-widget-ui": "^1.0.11",
+        "@telia-ace/widget-services": "^1.0.5",
         "@telia-ace/widget-utilities": "^1.0.1",
         "@webprovisions/platform": "^1.1.2"
     },
@@ -42,5 +41,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "1a636ff74ac4e57ca173aa800b88a7853ceb7678"
+    "gitHead": "6223de72a56dbb4dfa05c2d22d6e2a6e55795d57"
 }

package/lib/index.d.ts

@@ -1,2 +0,0 @@
-import NotificationRowComponent from './notification-row-component';
-export default NotificationRowComponent;

package/lib/index.js

@@ -1,7 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var notification_row_component_1 = __importDefault(require("./notification-row-component"));
-exports.default = notification_row_component_1.default;

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

@@ -1,15 +0,0 @@
-import { Notification } from '@telia-ace/knowledge-widget-core';
-import { Container } from '@webprovisions/platform';
-declare type NotificationType = 'top' | 'middle' | 'bottom';
-export declare type NotificationRowComponentProps = {
-    types: NotificationType[];
-    allowPaging?: boolean;
-    notifications?: Notification[];
-    expandable?: boolean;
-    pageNextAriaLabel?: string;
-    pagePreviousAriaLabel?: string;
-    closeAriaLabel?: string;
-    expandAriaLabel?: string;
-};
-export declare const NotificationRowComponent: (container: Container) => Promise<void>;
-export default NotificationRowComponent;

package/lib/notification-row-component.js

@@ -1,138 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationRowComponent = void 0;
-var knowledge_widget_core_1 = require("@telia-ace/knowledge-widget-core");
-var knowledge_widget_types_grid_1 = require("@telia-ace/knowledge-widget-types-grid");
-var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
-var NotificationRowComponent = function (container) {
-    var events = container.get('$widget').events;
-    var _a = __read((0, knowledge_widget_core_1.createEventSubscriber)(events), 2), subscribe = _a[0], unsubscribe = _a[1];
-    return (0, knowledge_widget_ui_1.createReactComponent)(container, 'notification-row', Promise.resolve().then(function () { return __importStar(require('./notification-row')); }), function (component) {
-        var fetch = function (params) {
-            component.writeProperties(__assign(__assign({}, component.properties()), { loading: true, error: undefined, notifications: [] }));
-            component.actions.dispatch('fetch', { params: params });
-        };
-        component.actions.create('fetch', function (_a) {
-            var error = _a.error, topNotifications = _a.topNotifications, bottomNotifications = _a.bottomNotifications, middleNotifications = _a.middleNotifications;
-            if (error) {
-                return component.actions.dispatch('fetched', {
-                    error: error,
-                    loading: true,
-                    notifications: [],
-                });
-            }
-            var newNotifications = [];
-            var _b = component.properties(), notifications = _b.notifications, _c = _b.types, types = _c === void 0 ? [] : _c;
-            if (types.length) {
-                if (types.indexOf('top') > -1) {
-                    newNotifications = newNotifications.concat(topNotifications);
-                }
-                if (types.indexOf('middle') > -1) {
-                    newNotifications = newNotifications.concat(middleNotifications);
-                }
-                if (types.indexOf('bottom') > -1) {
-                    newNotifications = newNotifications.concat(bottomNotifications);
-                }
-            }
-            else {
-                newNotifications = topNotifications;
-            }
-            return component.actions.dispatch('fetched', {
-                notifications: newNotifications.length ? newNotifications : notifications,
-                loading: false,
-            });
-        });
-        component.actions.create('fetched', function (input) {
-            return component.writeProperties(__assign(__assign({}, input), { loading: false }));
-        });
-        container.getAsync('router').then(function (router) {
-            var params = router.getRouteData().params;
-            fetch(params);
-        });
-        subscribe('router:changed', function (event, _a) {
-            var current = _a.current;
-            fetch(current.routeData.params);
-        });
-        return function () {
-            unsubscribe();
-        };
-    })
-        .then(function () {
-        return (0, knowledge_widget_core_1.extendComponent)(container, 'notification-row', function (component) {
-            component.actions.watch('notification-row.fetch', function (input, next) {
-                return container
-                    .getAsync('dataClient')
-                    .then(function (dataClient) {
-                    return dataClient.fetch(knowledge_widget_types_grid_1.DataType.RowNotifications, {
-                        categories: [
-                            input.params.guideCategory,
-                            input.params.contactCategory,
-                        ].filter(function (c) { return !!c; }),
-                        searchPhrase: input.params.phrase,
-                    });
-                })
-                    .then(next)
-                    .catch(function (error) {
-                    if (error) {
-                        return next(error);
-                    }
-                });
-            });
-        });
-    })
-        .then(function () {
-        unsubscribe();
-    });
-};
-exports.NotificationRowComponent = NotificationRowComponent;
-exports.default = exports.NotificationRowComponent;

package/lib/notification-row.d.ts

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

package/lib/notification-row.js

@@ -1,207 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
-var widget_services_1 = require("@telia-ace/widget-services");
-var widget_utilities_1 = require("@telia-ace/widget-utilities");
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var STORAGE_KEY = 'closed-notifications';
-var infocusableHtml = {
-    transform: {
-        a: function (_a) {
-            var children = _a.children, props = __rest(_a, ["children"]);
-            return (react_1.default.createElement("a", __assign({}, props, { tabIndex: -1 }), children));
-        },
-    },
-};
-var NotificationRow = function (_a) {
-    var className = _a.className, other = __rest(_a, ["className"]);
-    var _b = (0, knowledge_widget_ui_1.useProperties)(), _c = _b.types, types = _c === void 0 ? [] : _c, _d = _b.allowPaging, allowPaging = _d === void 0 ? true : _d, _e = _b.notifications, notifications = _e === void 0 ? [] : _e, _f = _b.expandable, expandable = _f === void 0 ? false : _f, _g = _b.closeAriaLabel, closeAriaLabel = _g === void 0 ? '' : _g, _h = _b.pageNextAriaLabel, pageNextAriaLabel = _h === void 0 ? '' : _h, _j = _b.pagePreviousAriaLabel, pagePreviousAriaLabel = _j === void 0 ? '' : _j, _k = _b.expandAriaLabel, expandAriaLabel = _k === void 0 ? '' : _k;
-    var _l = __read((0, react_1.useState)(false), 2), expanded = _l[0], setExpanded = _l[1];
-    var _m = __read((0, react_1.useState)([]), 2), closed = _m[0], setClosed = _m[1];
-    var _o = __read((0, react_1.useState)(0), 2), index = _o[0], setIndex = _o[1];
-    var container = (0, knowledge_widget_ui_1.useContainer)();
-    var _p = __read((0, react_1.useState)(), 2), write = _p[0], setWriter = _p[1];
-    (0, react_1.useEffect)(function () {
-        if (container) {
-            (0, widget_services_1.readStorage)(container, STORAGE_KEY, widget_services_1.StorageMedium.Session).then(function (closed) {
-                if (closed === void 0) { closed = []; }
-                return setClosed(closed);
-            });
-            (0, widget_services_1.createStorageWriter)(container, STORAGE_KEY, widget_services_1.StorageCategory.Functional).then(function (writer) {
-                return setWriter(function () { return writer; });
-            });
-        }
-    }, [container]);
-    (0, react_1.useEffect)(function () {
-        if (container) {
-            (0, widget_services_1.readStorage)(container, STORAGE_KEY, widget_services_1.StorageMedium.Session).then(function (storedClosed) {
-                if (storedClosed === void 0) { storedClosed = []; }
-                closed.forEach(function (id) { return storedClosed.indexOf(id) === -1 && storedClosed.push(id); });
-                if (write) {
-                    write(storedClosed);
-                }
-            });
-        }
-    }, [closed, container, write]);
-    var filtered = notifications.filter(function (_a) {
-        var id = _a.id;
-        return closed.indexOf(id) === -1;
-    });
-    var length = filtered.length;
-    if (!filtered.length) {
-        return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-row') }));
-    }
-    if (allowPaging) {
-        var notification_1 = filtered[index] || filtered[index + 1] || filtered[index - 1];
-        if (!notification_1) {
-            return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-row') }));
-        }
-        var _q = notification_1 || {}, id_1 = _q.id, body = _q.body;
-        var toggleExpand_1 = function () { return setExpanded(!expanded); };
-        return (react_1.default.createElement(Wrapper, __assign({}, other, { "aria-expanded": expandable ? expanded : true, "aria-label": expandAriaLabel, tabIndex: expandable ? 0 : -1, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-row'), "data-pageable": length > 1, "data-types": types, "data-allow-paging": allowPaging, "data-expandable": expandable, onKeyDown: function (e) {
-                if (e.key === 'Enter') {
-                    toggleExpand_1();
-                }
-            }, onClick: toggleExpand_1 }),
-            react_1.default.createElement(CloseButton, { "aria-label": closeAriaLabel, onClick: function () {
-                    setIndex(filtered.indexOf(notification_1));
-                    setClosed(__spreadArray(__spreadArray([], __read(closed), false), [id_1], false));
-                } },
-                react_1.default.createElement(knowledge_widget_ui_1.SymbolBadge, { symbol: { type: 'Svg', content: 'close' } })),
-            react_1.default.createElement(StyledHtml, { htmlParseInstruction: !expandable || expanded ? undefined : infocusableHtml, "data-pageable": length > 1, "data-notification": id_1, "data-expandable": expandable, "data-expanded": expanded, html: body }),
-            length > 1 && (react_1.default.createElement(Pager, null,
-                react_1.default.createElement(StyledButton, { "aria-label": pagePreviousAriaLabel, "data-disabled": index === 0, onClick: function (e) {
-                        e.stopPropagation();
-                        if (index > 0) {
-                            setIndex(index - 1);
-                        }
-                    } },
-                    react_1.default.createElement(StyledSymbolBadge, { size: 10, symbol: { type: 'Svg', content: 'caret-left' } })),
-                react_1.default.createElement("span", null,
-                    index + 1,
-                    "/",
-                    length),
-                react_1.default.createElement(StyledButton, { "aria-label": pageNextAriaLabel, "data-disabled": index + 1 >= length, onClick: function (e) {
-                        e.stopPropagation();
-                        if (index < length - 1) {
-                            setIndex(index + 1);
-                        }
-                    } },
-                    react_1.default.createElement(StyledSymbolBadge, { size: 10, symbol: { type: 'Svg', content: 'caret-right' } }))))));
-    }
-    return (react_1.default.createElement(Wrapper, __assign({}, other, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-row'), "data-pageable": false, "data-types": types, "data-allow-paging": false }), filtered.map(function (notification) {
-        if (!notification) {
-            return null;
-        }
-        var id = notification.id, body = notification.body;
-        return (react_1.default.createElement(StyledHtml, { key: id, "data-pageable": false, "data-expandable": expandable, "data-expanded": expanded, "data-notification": id, html: body }));
-    })));
-};
-var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    padding: ", " ", "px;\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    cursor: ", ";\n    overflow: hidden;\n\n    i {\n        color: ", ";\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", "\n        }\n    }\n\n    ", ";\n\n    ", "\n"], ["\n    ", "\n    padding: ", " ", "px;\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    cursor: ", ";\n    overflow: hidden;\n\n    i {\n        color: ", ";\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", "\n        }\n    }\n\n    ", ";\n\n    ", "\n"])), knowledge_widget_ui_1.genericHtml, function (p) { return p.theme.sizes.normal; }, function (p) { var _a; return ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) * 12; }, function (p) {
-    var _a, _b, _c;
-    if (p['data-types'].length) {
-        if (p['data-types'].indexOf('top') > -1) {
-            return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.warning;
-        }
-        if (p['data-types'].indexOf('bottom') > -1) {
-            return 'transparent';
-        }
-        return (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary;
-    }
-    return (_c = p.theme.colors) === null || _c === void 0 ? void 0 : _c.warning;
-}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { return p.theme.borderRadius; }, function (p) { return (p['data-expandable'] ? 'pointer' : 'default'); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.link; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && knowledge_widget_ui_1.linkTabStyle; }, function (p) {
-    var _a;
-    return !p['data-allow-paging'] && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            flex-wrap: wrap;\n\n            > div {\n                min-width: 100%;\n                margin: ", "px;\n            }\n        "], ["\n            flex-wrap: wrap;\n\n            > div {\n                min-width: 100%;\n                margin: ", "px;\n            }\n        "])), ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) * 2);
-}, function (p) {
-    var _a;
-    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            &:focus {\n                ", " {\n                    ", "\n                }\n            }\n        "], ["\n            &:focus {\n                ", " {\n                    ", "\n                }\n            }\n        "])), StyledHtml, knowledge_widget_ui_1.borderTabStyle);
-});
-var StyledHtml = (0, styled_components_1.default)(knowledge_widget_ui_1.Html)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    flex: 1;\n    font-size: ", ";\n    line-height: 1.6em;\n    font-weight: 300;\n\n    ", "\n"], ["\n    flex: 1;\n    font-size: ", ";\n    line-height: 1.6em;\n    font-weight: 300;\n\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
-    return p['data-expandable'] &&
-        !p['data-expanded'] && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\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            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        "])));
-});
-var Pager = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    text-align: center;\n    width: 100%;\n    span {\n        font-size: ", ";\n        display: inline-block;\n        width: 30px;\n        text-align: center;\n    }\n"], ["\n    text-align: center;\n    width: 100%;\n    span {\n        font-size: ", ";\n        display: inline-block;\n        width: 30px;\n        text-align: center;\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
-var StyledButton = (0, styled_components_1.default)(knowledge_widget_ui_1.Button)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\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: ", " svg {\n        display: block;\n    }\n\n    &:focus {\n        ", "\n    }\n\n    ", "\n"], ["\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: ", " svg {\n        display: block;\n    }\n\n    &:focus {\n        ", "\n    }\n\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && knowledge_widget_ui_1.borderTabStyle; }, function (p) {
-    return p['data-disabled']
-        ? (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                  opacity: 0.8;\n              "], ["\n                  opacity: 0.8;\n              "]))) : (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                  @media (hover) {\n                      &:hover {\n                          opacity: 0.5;\n                      }\n                  }\n              "], ["\n                  @media (hover) {\n                      &:hover {\n                          opacity: 0.5;\n                      }\n                  }\n              "])));
-});
-var CloseButton = (0, styled_components_1.default)(StyledButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    position: absolute;\n    top: 7.5px;\n    right: 7.5px;\n    width: 25px;\n    height: auto;\n    padding: ", " svg {\n        vertical-align: middle;\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"], ["\n    position: absolute;\n    top: 7.5px;\n    right: 7.5px;\n    width: 25px;\n    height: auto;\n    padding: ", " svg {\n        vertical-align: middle;\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { var _a, _b; return "calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, "/2) ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
-var StyledSymbolBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.SymbolBadge)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    line {\n        stroke: #ffffff;\n    }\n"], ["\n    line {\n        stroke: #ffffff;\n    }\n"])));
-var Empty = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
-exports.default = NotificationRow;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;

package/lib-esm/index.js

@@ -1,2 +0,0 @@
-import NotificationRowComponent from './notification-row-component';
-export default NotificationRowComponent;

package/lib-esm/notification-row-component.js

@@ -1,111 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-import { createEventSubscriber, extendComponent, } from '@telia-ace/knowledge-widget-core';
-import { DataType } from '@telia-ace/knowledge-widget-types-grid';
-import { createReactComponent } from '@telia-ace/knowledge-widget-ui';
-export var NotificationRowComponent = function (container) {
-    var events = container.get('$widget').events;
-    var _a = __read(createEventSubscriber(events), 2), subscribe = _a[0], unsubscribe = _a[1];
-    return createReactComponent(container, 'notification-row', import('./notification-row'), function (component) {
-        var fetch = function (params) {
-            component.writeProperties(__assign(__assign({}, component.properties()), { loading: true, error: undefined, notifications: [] }));
-            component.actions.dispatch('fetch', { params: params });
-        };
-        component.actions.create('fetch', function (_a) {
-            var error = _a.error, topNotifications = _a.topNotifications, bottomNotifications = _a.bottomNotifications, middleNotifications = _a.middleNotifications;
-            if (error) {
-                return component.actions.dispatch('fetched', {
-                    error: error,
-                    loading: true,
-                    notifications: [],
-                });
-            }
-            var newNotifications = [];
-            var _b = component.properties(), notifications = _b.notifications, _c = _b.types, types = _c === void 0 ? [] : _c;
-            if (types.length) {
-                if (types.indexOf('top') > -1) {
-                    newNotifications = newNotifications.concat(topNotifications);
-                }
-                if (types.indexOf('middle') > -1) {
-                    newNotifications = newNotifications.concat(middleNotifications);
-                }
-                if (types.indexOf('bottom') > -1) {
-                    newNotifications = newNotifications.concat(bottomNotifications);
-                }
-            }
-            else {
-                newNotifications = topNotifications;
-            }
-            return component.actions.dispatch('fetched', {
-                notifications: newNotifications.length ? newNotifications : notifications,
-                loading: false,
-            });
-        });
-        component.actions.create('fetched', function (input) {
-            return component.writeProperties(__assign(__assign({}, input), { loading: false }));
-        });
-        container.getAsync('router').then(function (router) {
-            var params = router.getRouteData().params;
-            fetch(params);
-        });
-        subscribe('router:changed', function (event, _a) {
-            var current = _a.current;
-            fetch(current.routeData.params);
-        });
-        return function () {
-            unsubscribe();
-        };
-    })
-        .then(function () {
-        return extendComponent(container, 'notification-row', function (component) {
-            component.actions.watch('notification-row.fetch', function (input, next) {
-                return container
-                    .getAsync('dataClient')
-                    .then(function (dataClient) {
-                    return dataClient.fetch(DataType.RowNotifications, {
-                        categories: [
-                            input.params.guideCategory,
-                            input.params.contactCategory,
-                        ].filter(function (c) { return !!c; }),
-                        searchPhrase: input.params.phrase,
-                    });
-                })
-                    .then(next)
-                    .catch(function (error) {
-                    if (error) {
-                        return next(error);
-                    }
-                });
-            });
-        });
-    })
-        .then(function () {
-        unsubscribe();
-    });
-};
-export default NotificationRowComponent;

package/lib-esm/notification-row.js

@@ -1,182 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { borderTabStyle, Button, createEmptyComponent, genericHtml, Html, linkTabStyle, SymbolBadge, useContainer, useProperties, } from '@telia-ace/knowledge-widget-ui';
-import { createStorageWriter, readStorage, StorageCategory, StorageMedium, } from '@telia-ace/widget-services';
-import { appendClassNames } from '@telia-ace/widget-utilities';
-import React, { useEffect, useState } from 'react';
-import styled, { css } from 'styled-components';
-var STORAGE_KEY = 'closed-notifications';
-var infocusableHtml = {
-    transform: {
-        a: function (_a) {
-            var children = _a.children, props = __rest(_a, ["children"]);
-            return (React.createElement("a", __assign({}, props, { tabIndex: -1 }), children));
-        },
-    },
-};
-var NotificationRow = function (_a) {
-    var className = _a.className, other = __rest(_a, ["className"]);
-    var _b = useProperties(), _c = _b.types, types = _c === void 0 ? [] : _c, _d = _b.allowPaging, allowPaging = _d === void 0 ? true : _d, _e = _b.notifications, notifications = _e === void 0 ? [] : _e, _f = _b.expandable, expandable = _f === void 0 ? false : _f, _g = _b.closeAriaLabel, closeAriaLabel = _g === void 0 ? '' : _g, _h = _b.pageNextAriaLabel, pageNextAriaLabel = _h === void 0 ? '' : _h, _j = _b.pagePreviousAriaLabel, pagePreviousAriaLabel = _j === void 0 ? '' : _j, _k = _b.expandAriaLabel, expandAriaLabel = _k === void 0 ? '' : _k;
-    var _l = __read(useState(false), 2), expanded = _l[0], setExpanded = _l[1];
-    var _m = __read(useState([]), 2), closed = _m[0], setClosed = _m[1];
-    var _o = __read(useState(0), 2), index = _o[0], setIndex = _o[1];
-    var container = useContainer();
-    var _p = __read(useState(), 2), write = _p[0], setWriter = _p[1];
-    useEffect(function () {
-        if (container) {
-            readStorage(container, STORAGE_KEY, StorageMedium.Session).then(function (closed) {
-                if (closed === void 0) { closed = []; }
-                return setClosed(closed);
-            });
-            createStorageWriter(container, STORAGE_KEY, StorageCategory.Functional).then(function (writer) {
-                return setWriter(function () { return writer; });
-            });
-        }
-    }, [container]);
-    useEffect(function () {
-        if (container) {
-            readStorage(container, STORAGE_KEY, StorageMedium.Session).then(function (storedClosed) {
-                if (storedClosed === void 0) { storedClosed = []; }
-                closed.forEach(function (id) { return storedClosed.indexOf(id) === -1 && storedClosed.push(id); });
-                if (write) {
-                    write(storedClosed);
-                }
-            });
-        }
-    }, [closed, container, write]);
-    var filtered = notifications.filter(function (_a) {
-        var id = _a.id;
-        return closed.indexOf(id) === -1;
-    });
-    var length = filtered.length;
-    if (!filtered.length) {
-        return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-notification-row') }));
-    }
-    if (allowPaging) {
-        var notification_1 = filtered[index] || filtered[index + 1] || filtered[index - 1];
-        if (!notification_1) {
-            return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-notification-row') }));
-        }
-        var _q = notification_1 || {}, id_1 = _q.id, body = _q.body;
-        var toggleExpand_1 = function () { return setExpanded(!expanded); };
-        return (React.createElement(Wrapper, __assign({}, other, { "aria-expanded": expandable ? expanded : true, "aria-label": expandAriaLabel, tabIndex: expandable ? 0 : -1, className: appendClassNames(className, 'humany-notification-row'), "data-pageable": length > 1, "data-types": types, "data-allow-paging": allowPaging, "data-expandable": expandable, onKeyDown: function (e) {
-                if (e.key === 'Enter') {
-                    toggleExpand_1();
-                }
-            }, onClick: toggleExpand_1 }),
-            React.createElement(CloseButton, { "aria-label": closeAriaLabel, onClick: function () {
-                    setIndex(filtered.indexOf(notification_1));
-                    setClosed(__spreadArray(__spreadArray([], __read(closed), false), [id_1], false));
-                } },
-                React.createElement(SymbolBadge, { symbol: { type: 'Svg', content: 'close' } })),
-            React.createElement(StyledHtml, { htmlParseInstruction: !expandable || expanded ? undefined : infocusableHtml, "data-pageable": length > 1, "data-notification": id_1, "data-expandable": expandable, "data-expanded": expanded, html: body }),
-            length > 1 && (React.createElement(Pager, null,
-                React.createElement(StyledButton, { "aria-label": pagePreviousAriaLabel, "data-disabled": index === 0, onClick: function (e) {
-                        e.stopPropagation();
-                        if (index > 0) {
-                            setIndex(index - 1);
-                        }
-                    } },
-                    React.createElement(StyledSymbolBadge, { size: 10, symbol: { type: 'Svg', content: 'caret-left' } })),
-                React.createElement("span", null,
-                    index + 1,
-                    "/",
-                    length),
-                React.createElement(StyledButton, { "aria-label": pageNextAriaLabel, "data-disabled": index + 1 >= length, onClick: function (e) {
-                        e.stopPropagation();
-                        if (index < length - 1) {
-                            setIndex(index + 1);
-                        }
-                    } },
-                    React.createElement(StyledSymbolBadge, { size: 10, symbol: { type: 'Svg', content: 'caret-right' } }))))));
-    }
-    return (React.createElement(Wrapper, __assign({}, other, { className: appendClassNames(className, 'humany-notification-row'), "data-pageable": false, "data-types": types, "data-allow-paging": false }), filtered.map(function (notification) {
-        if (!notification) {
-            return null;
-        }
-        var id = notification.id, body = notification.body;
-        return (React.createElement(StyledHtml, { key: id, "data-pageable": false, "data-expandable": expandable, "data-expanded": expanded, "data-notification": id, html: body }));
-    })));
-};
-var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    padding: ", " ", "px;\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    cursor: ", ";\n    overflow: hidden;\n\n    i {\n        color: ", ";\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", "\n        }\n    }\n\n    ", ";\n\n    ", "\n"], ["\n    ", "\n    padding: ", " ", "px;\n    background-color: ", ";\n    color: ", ";\n    border-radius: ", ";\n    text-align: center;\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    cursor: ", ";\n    overflow: hidden;\n\n    i {\n        color: ", ";\n    }\n\n    a {\n        color: ", ";\n        &:focus {\n            ", "\n        }\n    }\n\n    ", ";\n\n    ", "\n"])), genericHtml, function (p) { return p.theme.sizes.normal; }, function (p) { var _a; return ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) * 12; }, function (p) {
-    var _a, _b, _c;
-    if (p['data-types'].length) {
-        if (p['data-types'].indexOf('top') > -1) {
-            return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.warning;
-        }
-        if (p['data-types'].indexOf('bottom') > -1) {
-            return 'transparent';
-        }
-        return (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary;
-    }
-    return (_c = p.theme.colors) === null || _c === void 0 ? void 0 : _c.warning;
-}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { return p.theme.borderRadius; }, function (p) { return (p['data-expandable'] ? 'pointer' : 'default'); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.link; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && linkTabStyle; }, function (p) {
-    var _a;
-    return !p['data-allow-paging'] && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            flex-wrap: wrap;\n\n            > div {\n                min-width: 100%;\n                margin: ", "px;\n            }\n        "], ["\n            flex-wrap: wrap;\n\n            > div {\n                min-width: 100%;\n                margin: ", "px;\n            }\n        "])), ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) * 2);
-}, function (p) {
-    var _a;
-    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            &:focus {\n                ", " {\n                    ", "\n                }\n            }\n        "], ["\n            &:focus {\n                ", " {\n                    ", "\n                }\n            }\n        "])), StyledHtml, borderTabStyle);
-});
-var StyledHtml = styled(Html)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    flex: 1;\n    font-size: ", ";\n    line-height: 1.6em;\n    font-weight: 300;\n\n    ", "\n"], ["\n    flex: 1;\n    font-size: ", ";\n    line-height: 1.6em;\n    font-weight: 300;\n\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
-    return p['data-expandable'] &&
-        !p['data-expanded'] && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\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            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        "])));
-});
-var Pager = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    text-align: center;\n    width: 100%;\n    span {\n        font-size: ", ";\n        display: inline-block;\n        width: 30px;\n        text-align: center;\n    }\n"], ["\n    text-align: center;\n    width: 100%;\n    span {\n        font-size: ", ";\n        display: inline-block;\n        width: 30px;\n        text-align: center;\n    }\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
-var StyledButton = styled(Button)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\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: ", " svg {\n        display: block;\n    }\n\n    &:focus {\n        ", "\n    }\n\n    ", "\n"], ["\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: ", " svg {\n        display: block;\n    }\n\n    &:focus {\n        ", "\n    }\n\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small; }, function (p) { var _a; return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && borderTabStyle; }, function (p) {
-    return p['data-disabled']
-        ? css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                  opacity: 0.8;\n              "], ["\n                  opacity: 0.8;\n              "]))) : css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                  @media (hover) {\n                      &:hover {\n                          opacity: 0.5;\n                      }\n                  }\n              "], ["\n                  @media (hover) {\n                      &:hover {\n                          opacity: 0.5;\n                      }\n                  }\n              "])));
-});
-var CloseButton = styled(StyledButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    position: absolute;\n    top: 7.5px;\n    right: 7.5px;\n    width: 25px;\n    height: auto;\n    padding: ", " svg {\n        vertical-align: middle;\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"], ["\n    position: absolute;\n    top: 7.5px;\n    right: 7.5px;\n    width: 25px;\n    height: auto;\n    padding: ", " svg {\n        vertical-align: middle;\n        line,\n        path {\n            stroke: ", ";\n        }\n    }\n"])), function (p) { var _a, _b; return "calc(".concat((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.small, "/2) ").concat((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.small); }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
-var StyledSymbolBadge = styled(SymbolBadge)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    line {\n        stroke: #ffffff;\n    }\n"], ["\n    line {\n        stroke: #ffffff;\n    }\n"])));
-var Empty = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    display: none;\n"], ["\n    display: none;\n"])));
-export default NotificationRow;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;