@telia-ace/knowledge-widget-components-notification-list 1.0.5 → 1.0.10

package/dist/index.js

@@ -0,0 +1,82 @@
+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 NotificationListComponent = (container) => {
+  const { events } = container.get("$widget");
+  const [subscribe, unsubscribe] = createEventSubscriber(events);
+  return createReactComponent(container, "notification-list", import("./notification-list.js"), (component) => {
+    const fetch = (params) => {
+      component.writeProperties(__spreadProps(__spreadValues({}, component.properties()), {
+        loading: true,
+        error: void 0,
+        notificationList: void 0
+      }));
+      component.actions.dispatch("fetch", { params });
+    };
+    component.actions.create("fetch", ({ error, notificationLists }) => {
+      if (error) {
+        return component.actions.dispatch("fetched", {
+          error,
+          loading: true,
+          notificationList: void 0
+        });
+      }
+      const { category, notificationList } = component.properties();
+      const properties = {
+        notificationList: notificationLists.find((n) => n.id === category) || notificationList
+      };
+      return component.actions.dispatch("fetched", __spreadProps(__spreadValues({}, properties), {
+        loading: true
+      }));
+    });
+    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);
+    });
+  }).then(() => {
+    return extendComponent(container, "notification-list", (component) => {
+      component.actions.watch("notification-list.fetch", (input, next) => {
+        return container.getAsync("dataClient").then((dataClient) => dataClient.fetch(DataType.NotificationLists, {
+          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 { NotificationListComponent as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/notification-list-component.ts"],"sourcesContent":["import {\r\n    createEventSubscriber,\r\n    extendComponent,\r\n    NotificationList,\r\n} from '@telia-ace/knowledge-widget-core';\r\nimport { DataClient, DataType, NotificationResults } from '@telia-ace/knowledge-widget-types-grid';\r\nimport { createReactComponent } from '@telia-ace/knowledge-widget-ui';\r\nimport { Container, Widget } from '@webprovisions/platform';\r\n\r\nexport type NotificationListComponentProps = {\r\n    category?: string;\r\n    showHeader?: boolean;\r\n    notificationList?: NotificationList; // internal\r\n};\r\n\r\ntype FetchResults = NotificationResults & { error: any };\r\n\r\nexport const NotificationListComponent = (container: Container) => {\r\n    const { events }: Widget = container.get('$widget');\r\n    const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n    return createReactComponent(\r\n        container,\r\n        'notification-list',\r\n        import('./notification-list'),\r\n        (component) => {\r\n            const fetch = (params: { [key: string]: any }) => {\r\n                component.writeProperties({\r\n                    ...component.properties<NotificationListComponentProps>(),\r\n                    loading: true,\r\n                    error: undefined,\r\n                    notificationList: undefined,\r\n                });\r\n                component.actions.dispatch('fetch', { params });\r\n            };\r\n\r\n            component.actions.create('fetch', ({ error, notificationLists }: FetchResults) => {\r\n                if (error) {\r\n                    return component.actions.dispatch('fetched', {\r\n                        error,\r\n                        loading: true,\r\n                        notificationList: undefined,\r\n                    });\r\n                }\r\n\r\n                const { category, notificationList } =\r\n                    component.properties<NotificationListComponentProps>();\r\n\r\n                const properties = {\r\n                    notificationList:\r\n                        notificationLists.find((n) => n.id === category) || notificationList,\r\n                };\r\n\r\n                return component.actions.dispatch('fetched', {\r\n                    ...properties,\r\n                    loading: true,\r\n                });\r\n            });\r\n\r\n            component.actions.create('fetched', (input) => {\r\n                return component.writeProperties({ ...input, loading: false });\r\n            });\r\n\r\n            container.getAsync('router').then((router) => {\r\n                const { params } = router.getRouteData();\r\n                fetch(params);\r\n            });\r\n\r\n            subscribe('router:changed', (event: any, { current }: any) => {\r\n                fetch(current.routeData.params);\r\n            });\r\n        }\r\n    )\r\n        .then(() => {\r\n            return extendComponent(container, 'notification-list', (component) => {\r\n                component.actions.watch('notification-list.fetch', (input, next) => {\r\n                    return container\r\n                        .getAsync('dataClient')\r\n                        .then((dataClient: DataClient) =>\r\n                            dataClient.fetch(DataType.NotificationLists, {\r\n                                categories: [\r\n                                    input.params.guideCategory,\r\n                                    input.params.contactCategory,\r\n                                ].filter((c) => !!c),\r\n                                searchPhrase: input.params.phrase,\r\n                            })\r\n                        )\r\n                        .then(next)\r\n                        .catch((error) => {\r\n                            if (error) {\r\n                                return next(error);\r\n                            }\r\n                        });\r\n                });\r\n            });\r\n        })\r\n        .then(() => {\r\n            unsubscribe();\r\n        });\r\n};\r\n\r\nexport default NotificationListComponent;\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBa,MAAA,4BAA4B,CAAC,cAAyB;AAC/D,QAAM,EAAE,WAAmB,UAAU,IAAI,SAAS;AAClD,QAAM,CAAC,WAAW,eAAe,sBAAsB,MAAM;AAE7D,SAAO,qBACH,WACA,qBACA,OAAO,2BACP,CAAC,cAAc;AACL,UAAA,QAAQ,CAAC,WAAmC;AAC9C,gBAAU,gBAAgB,iCACnB,UAAU,WAA2C,IADlC;AAAA,QAEtB,SAAS;AAAA,QACT,OAAO;AAAA,QACP,kBAAkB;AAAA,MAAA,EACrB;AACD,gBAAU,QAAQ,SAAS,SAAS,EAAE,OAAQ,CAAA;AAAA,IAAA;AAGlD,cAAU,QAAQ,OAAO,SAAS,CAAC,EAAE,OAAO,wBAAsC;AAC9E,UAAI,OAAO;AACA,eAAA,UAAU,QAAQ,SAAS,WAAW;AAAA,UACzC;AAAA,UACA,SAAS;AAAA,UACT,kBAAkB;AAAA,QAAA,CACrB;AAAA,MACL;AAEA,YAAM,EAAE,UAAU,qBACd,UAAU,WAA2C;AAEzD,YAAM,aAAa;AAAA,QACf,kBACI,kBAAkB,KAAK,CAAC,MAAM,EAAE,OAAO,QAAQ,KAAK;AAAA,MAAA;AAGrD,aAAA,UAAU,QAAQ,SAAS,WAAW,iCACtC,aADsC;AAAA,QAEzC,SAAS;AAAA,MAAA,EACZ;AAAA,IAAA,CACJ;AAED,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;AAAA,EAAA,CAET,EACK,KAAK,MAAM;AACR,WAAO,gBAAgB,WAAW,qBAAqB,CAAC,cAAc;AAClE,gBAAU,QAAQ,MAAM,2BAA2B,CAAC,OAAO,SAAS;AACzD,eAAA,UACF,SAAS,YAAY,EACrB,KAAK,CAAC,eACH,WAAW,MAAM,SAAS,mBAAmB;AAAA,UACzC,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-list.js

@@ -0,0 +1,212 @@
+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 { useContainer, useProperties, createEmptyComponent, DateFormats, Loader, Button, borderTabStyle, ItemList, loadingOpacity, contentBox, itemList, headingElement, Paragraph, genericHtml, SymbolBadge, Timestamp } from "@telia-ace/knowledge-widget-ui";
+import { appendClassNames } from "@telia-ace/widget-utilities";
+import React, { useState } from "react";
+import styled, { css } from "styled-components";
+const NotificationList = (_a) => {
+  var _b = _a, { className } = _b, other = __objRest(_b, ["className"]);
+  const [expanded, setExpanded] = useState(null);
+  const container = useContainer();
+  const {
+    showHeader,
+    notificationList,
+    loading = false
+  } = useProperties();
+  const {
+    id,
+    title,
+    symbol,
+    notifications = [],
+    defaultHeaderOptions = { visible: true }
+  } = notificationList || {};
+  if (!notifications.length && !loading) {
+    return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
+      className: appendClassNames(className, "humany-notification-list")
+    }));
+  }
+  return /* @__PURE__ */ React.createElement(StyledItemList, __spreadProps(__spreadValues({}, other), {
+    "data-loading": loading,
+    "data-show-header": typeof showHeader === "boolean" ? showHeader : defaultHeaderOptions.visible,
+    className: appendClassNames(className, "humany-notification-list"),
+    "data-notification-category": id,
+    header: title,
+    symbol,
+    items: notifications,
+    renderItem: ({ id: id2, title: title2, body, modified, expandable }) => /* @__PURE__ */ React.createElement(StyledItem, {
+      key: id2,
+      "data-notification": id2,
+      "data-expanded": expandable ? expanded === id2 : true
+    }, expandable ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(StyledButton, {
+      title: title2,
+      "aria-label": title2,
+      "aria-expanded": expanded === id2,
+      onClick: () => setExpanded(expanded === id2 ? null : id2)
+    }, /* @__PURE__ */ React.createElement("span", null, title2), /* @__PURE__ */ React.createElement(StyledSymbolBadge, {
+      size: 11,
+      symbol: {
+        type: "Svg",
+        content: `caret-${expanded === id2 ? "up" : "down"}`
+      }
+    })), /* @__PURE__ */ React.createElement(StyledParagraph, {
+      html: body
+    }), modified && /* @__PURE__ */ React.createElement(StyledTimestamp, {
+      format: DateFormats.YYYY_MM_DD,
+      timestamp: modified
+    })) : /* @__PURE__ */ React.createElement(StyledParagraph, {
+      html: body
+    }))
+  }), /* @__PURE__ */ React.createElement(Loader, {
+    loading
+  }));
+};
+const StyledButton = styled(Button)`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+    svg,
+    i {
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    }
+    span {
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+        overflow: hidden;
+        text-overflow: ellipsis;
+        flex: 1;
+        white-space: nowrap;
+    }
+    &:focus {
+        ${(p) => {
+  var _a, _b;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${borderTabStyle}
+                span {
+                    color: ${(_b = p.theme.colors) == null ? void 0 : _b.primary};
+                    text-decoration: underline;
+                }
+            `;
+}};
+    }
+`;
+const StyledItemList = styled(ItemList)`
+    ${loadingOpacity}
+    ${contentBox}
+  ${itemList}
+  overflow: hidden;
+    justify-content: flex-start;
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    ${(p) => !p["data-show-header"] && css`
+            > div {
+                ${headingElement("h1", css`
+                        display: none;
+                    `)}
+            }
+        `}
+
+    @media (hover: hover) {
+        button:hover {
+            text-decoration: underline;
+        }
+    }
+`;
+const StyledParagraph = styled(Paragraph)`
+    ${genericHtml}
+    font-weight: 300;
+
+    p {
+        white-space: normal;
+    }
+`;
+const StyledItem = styled.li`
+    ${StyledParagraph} {
+        display: none;
+        &:not(:only-child) {
+            ${(p) => {
+  var _a, _b, _c;
+  return ((_a = p.theme.sizes) == null ? void 0 : _a.cardinal) && ((_b = p.theme.sizes) == null ? void 0 : _b.normal) && css`
+                    margin: ${(_c = p.theme.sizes) == null ? void 0 : _c.normal} 0;
+                `;
+}}
+        }
+    }
+
+    ${(p) => p["data-expanded"] && css`
+            ${StyledParagraph} {
+                display: block;
+            }
+        `}
+
+    > span {
+        display: block;
+        font-weight: 300;
+        color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.accent;
+}};
+    }
+`;
+const StyledSymbolBadge = styled(SymbolBadge)`
+    margin: 0 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}};
+    line {
+        stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    }
+`;
+const StyledTimestamp = styled(Timestamp)`
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.small;
+}};
+    font-weight: 300;
+`;
+export { NotificationList as default };
+//# sourceMappingURL=notification-list.js.map

package/dist/notification-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notification-list.js","sources":["../src/notification-list.tsx"],"sourcesContent":["import { Notification } from '@telia-ace/knowledge-widget-core';\r\nimport {\r\n    borderTabStyle,\r\n    Button,\r\n    contentBox,\r\n    createEmptyComponent,\r\n    DateFormats,\r\n    genericHtml,\r\n    headingElement,\r\n    ItemList,\r\n    itemList,\r\n    Loader,\r\n    loadingOpacity,\r\n    Paragraph,\r\n    SymbolBadge,\r\n    Timestamp,\r\n    useContainer,\r\n    useProperties,\r\n} from '@telia-ace/knowledge-widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useState } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { NotificationListComponentProps } from './notification-list-component';\r\n\r\ntype Props = {\r\n    className: string;\r\n};\r\n\r\nconst NotificationList: React.SFC<Props> = ({ className, ...other }) => {\r\n    const [expanded, setExpanded] = useState<string | null>(null);\r\n    const container = useContainer();\r\n    const {\r\n        showHeader,\r\n        notificationList,\r\n        loading = false,\r\n    } = useProperties<NotificationListComponentProps>();\r\n\r\n    const {\r\n        id,\r\n        title,\r\n        symbol,\r\n        notifications = [],\r\n        defaultHeaderOptions = { visible: true },\r\n    } = notificationList || {};\r\n\r\n    if (!notifications.length && !loading) {\r\n        return createEmptyComponent(container, {\r\n            ...other,\r\n            className: appendClassNames(className, 'humany-notification-list'),\r\n        });\r\n    }\r\n\r\n    return (\r\n        <StyledItemList\r\n            {...other}\r\n            data-loading={loading}\r\n            data-show-header={\r\n                typeof showHeader === 'boolean' ? showHeader : defaultHeaderOptions.visible\r\n            }\r\n            className={appendClassNames(className, 'humany-notification-list')}\r\n            data-notification-category={id}\r\n            header={title}\r\n            symbol={symbol}\r\n            items={notifications}\r\n            renderItem={({ id, title, body, modified, expandable }: Notification) => (\r\n                <StyledItem\r\n                    key={id}\r\n                    data-notification={id}\r\n                    data-expanded={expandable ? expanded === id : true}\r\n                >\r\n                    {expandable ? (\r\n                        <>\r\n                            <StyledButton\r\n                                title={title}\r\n                                aria-label={title}\r\n                                aria-expanded={expanded === id}\r\n                                onClick={() => setExpanded(expanded === id ? null : id)}\r\n                            >\r\n                                <span>{title}</span>\r\n                                <StyledSymbolBadge\r\n                                    size={11}\r\n                                    symbol={{\r\n                                        type: 'Svg',\r\n                                        content: `caret-${expanded === id ? 'up' : 'down'}`,\r\n                                    }}\r\n                                />\r\n                            </StyledButton>\r\n                            <StyledParagraph html={body} />\r\n                            {modified && (\r\n                                <StyledTimestamp\r\n                                    format={DateFormats.YYYY_MM_DD}\r\n                                    timestamp={modified}\r\n                                />\r\n                            )}\r\n                        </>\r\n                    ) : (\r\n                        <StyledParagraph html={body} />\r\n                    )}\r\n                </StyledItem>\r\n            )}\r\n        >\r\n            <Loader loading={loading} />\r\n        </StyledItemList>\r\n    );\r\n};\r\n\r\nconst StyledButton = styled(Button)`\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 100%;\r\n    text-align: left;\r\n    svg,\r\n    i {\r\n        color: ${(p) => p.theme.colors?.primary};\r\n    }\r\n    span {\r\n        color: ${(p) => p.theme.colors?.text};\r\n        font-size: ${(p) => p.theme.fonts?.normal};\r\n        overflow: hidden;\r\n        text-overflow: ellipsis;\r\n        flex: 1;\r\n        white-space: nowrap;\r\n    }\r\n    &:focus {\r\n        ${(p) =>\r\n            p.theme.accessibility?.isTabbing &&\r\n            css`\r\n                ${borderTabStyle}\r\n                span {\r\n                    color: ${p.theme.colors?.primary};\r\n                    text-decoration: underline;\r\n                }\r\n            `};\r\n    }\r\n`;\r\n\r\nconst StyledItemList = styled(ItemList)<\r\n    {\r\n        'data-loading': boolean;\r\n        'data-show-header': boolean;\r\n    } & any\r\n>`\r\n    ${loadingOpacity}\r\n    ${contentBox}\r\n  ${itemList}\r\n  overflow: hidden;\r\n    justify-content: flex-start;\r\n    padding: ${(p) => p.theme.sizes?.large};\r\n    ${(p) =>\r\n        !p['data-show-header'] &&\r\n        css`\r\n            > div {\r\n                ${headingElement(\r\n                    'h1',\r\n                    css`\r\n                        display: none;\r\n                    `\r\n                )}\r\n            }\r\n        `}\r\n\r\n    @media (hover: hover) {\r\n        button:hover {\r\n            text-decoration: underline;\r\n        }\r\n    }\r\n`;\r\n\r\nconst StyledParagraph = styled(Paragraph)`\r\n    ${genericHtml}\r\n    font-weight: 300;\r\n\r\n    p {\r\n        white-space: normal;\r\n    }\r\n`;\r\n\r\nconst StyledItem = styled.li<{ 'data-expanded': boolean }>`\r\n    ${StyledParagraph} {\r\n        display: none;\r\n        &:not(:only-child) {\r\n            ${(p) =>\r\n                p.theme.sizes?.cardinal &&\r\n                p.theme.sizes?.normal &&\r\n                css`\r\n                    margin: ${p.theme.sizes?.normal} 0;\r\n                `}\r\n        }\r\n    }\r\n\r\n    ${(p) =>\r\n        p['data-expanded'] &&\r\n        css`\r\n            ${StyledParagraph} {\r\n                display: block;\r\n            }\r\n        `}\r\n\r\n    > span {\r\n        display: block;\r\n        font-weight: 300;\r\n        color: ${(p) => p.theme.colors?.accent};\r\n    }\r\n`;\r\n\r\nconst StyledSymbolBadge = styled(SymbolBadge)`\r\n    margin: 0 0 0 ${(p) => p.theme.sizes?.small};\r\n    line {\r\n        stroke: ${(p) => p.theme.colors?.primary};\r\n    }\r\n`;\r\n\r\nconst StyledTimestamp = styled(Timestamp)`\r\n    font-size: ${(p) => p.theme.fonts?.small};\r\n    font-weight: 300;\r\n`;\r\n\r\nexport default NotificationList;\r\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,34 +1,33 @@
 {
     "name": "@telia-ace/knowledge-widget-components-notification-list",
-    "version": "1.0.5",
+    "version": "1.0.10",
     "description": "Notification list 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.12",
-        "@telia-ace/knowledge-widget-ui": "^1.0.9",
-        "@telia-ace/widget-utilities": "^1.0.1",
+        "@telia-ace/knowledge-widget-core": "^1.0.8",
+        "@telia-ace/knowledge-widget-types-grid": "^1.0.15",
+        "@telia-ace/knowledge-widget-ui": "^1.0.12",
+        "@telia-ace/widget-utilities": "^1.0.2",
         "@webprovisions/platform": "^1.1.2"
     },
     "peerDependencies": {
@@ -41,5 +40,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "1d81c21570237e665e19ff62f5345d55d524be27"
+    "gitHead": "c26936286e303a87e65a8df1d1269349f42ea043"
 }

package/lib/index.d.ts

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

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_list_component_1 = __importDefault(require("./notification-list-component"));
-exports.default = notification_list_component_1.default;

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

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

package/lib/notification-list-component.js

@@ -1,120 +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.NotificationListComponent = 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 NotificationListComponent = 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-list', Promise.resolve().then(function () { return __importStar(require('./notification-list')); }), function (component) {
-        var fetch = function (params) {
-            component.writeProperties(__assign(__assign({}, component.properties()), { loading: true, error: undefined, notificationList: undefined }));
-            component.actions.dispatch('fetch', { params: params });
-        };
-        component.actions.create('fetch', function (_a) {
-            var error = _a.error, notificationLists = _a.notificationLists;
-            if (error) {
-                return component.actions.dispatch('fetched', {
-                    error: error,
-                    loading: true,
-                    notificationList: undefined,
-                });
-            }
-            var _b = component.properties(), category = _b.category, notificationList = _b.notificationList;
-            var properties = {
-                notificationList: notificationLists.find(function (n) { return n.id === category; }) || notificationList,
-            };
-            return component.actions.dispatch('fetched', __assign(__assign({}, properties), { loading: true }));
-        });
-        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);
-        });
-    })
-        .then(function () {
-        return (0, knowledge_widget_core_1.extendComponent)(container, 'notification-list', function (component) {
-            component.actions.watch('notification-list.fetch', function (input, next) {
-                return container
-                    .getAsync('dataClient')
-                    .then(function (dataClient) {
-                    return dataClient.fetch(knowledge_widget_types_grid_1.DataType.NotificationLists, {
-                        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.NotificationListComponent = NotificationListComponent;
-exports.default = exports.NotificationListComponent;

package/lib/notification-list.d.ts

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

package/lib/notification-list.js

@@ -1,113 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var knowledge_widget_ui_1 = require("@telia-ace/knowledge-widget-ui");
-var widget_utilities_1 = require("@telia-ace/widget-utilities");
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var NotificationList = function (_a) {
-    var className = _a.className, other = __rest(_a, ["className"]);
-    var _b = __read((0, react_1.useState)(null), 2), expanded = _b[0], setExpanded = _b[1];
-    var container = (0, knowledge_widget_ui_1.useContainer)();
-    var _c = (0, knowledge_widget_ui_1.useProperties)(), showHeader = _c.showHeader, notificationList = _c.notificationList, _d = _c.loading, loading = _d === void 0 ? false : _d;
-    var _e = notificationList || {}, id = _e.id, title = _e.title, symbol = _e.symbol, _f = _e.notifications, notifications = _f === void 0 ? [] : _f, _g = _e.defaultHeaderOptions, defaultHeaderOptions = _g === void 0 ? { visible: true } : _g;
-    if (!notifications.length && !loading) {
-        return (0, knowledge_widget_ui_1.createEmptyComponent)(container, __assign(__assign({}, other), { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-list') }));
-    }
-    return (react_1.default.createElement(StyledItemList, __assign({}, other, { "data-loading": loading, "data-show-header": typeof showHeader === 'boolean' ? showHeader : defaultHeaderOptions.visible, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-notification-list'), "data-notification-category": id, header: title, symbol: symbol, items: notifications, renderItem: function (_a) {
-            var id = _a.id, title = _a.title, body = _a.body, modified = _a.modified, expandable = _a.expandable;
-            return (react_1.default.createElement(StyledItem, { key: id, "data-notification": id, "data-expanded": expandable ? expanded === id : true }, expandable ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(StyledButton, { title: title, "aria-label": title, "aria-expanded": expanded === id, onClick: function () { return setExpanded(expanded === id ? null : id); } },
-                    react_1.default.createElement("span", null, title),
-                    react_1.default.createElement(StyledSymbolBadge, { size: 11, symbol: {
-                            type: 'Svg',
-                            content: "caret-".concat(expanded === id ? 'up' : 'down'),
-                        } })),
-                react_1.default.createElement(StyledParagraph, { html: body }),
-                modified && (react_1.default.createElement(StyledTimestamp, { format: knowledge_widget_ui_1.DateFormats.YYYY_MM_DD, timestamp: modified })))) : (react_1.default.createElement(StyledParagraph, { html: body }))));
-        } }),
-        react_1.default.createElement(knowledge_widget_ui_1.Loader, { loading: loading })));
-};
-var StyledButton = (0, styled_components_1.default)(knowledge_widget_ui_1.Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    svg,\n    i {\n        color: ", ";\n    }\n    span {\n        color: ", ";\n        font-size: ", ";\n        overflow: hidden;\n        text-overflow: ellipsis;\n        flex: 1;\n        white-space: nowrap;\n    }\n    &:focus {\n        ", ";\n    }\n"], ["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    svg,\n    i {\n        color: ", ";\n    }\n    span {\n        color: ", ";\n        font-size: ", ";\n        overflow: hidden;\n        text-overflow: ellipsis;\n        flex: 1;\n        white-space: nowrap;\n    }\n    &:focus {\n        ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, 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.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
-    var _a, _b;
-    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                ", "\n                span {\n                    color: ", ";\n                    text-decoration: underline;\n                }\n            "], ["\n                ", "\n                span {\n                    color: ", ";\n                    text-decoration: underline;\n                }\n            "])), knowledge_widget_ui_1.borderTabStyle, (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary);
-});
-var StyledItemList = (0, styled_components_1.default)(knowledge_widget_ui_1.ItemList)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n    ", "\n  ", "\n  overflow: hidden;\n    justify-content: flex-start;\n    padding: ", ";\n    ", "\n\n    @media (hover: hover) {\n        button:hover {\n            text-decoration: underline;\n        }\n    }\n"], ["\n    ", "\n    ", "\n  ", "\n  overflow: hidden;\n    justify-content: flex-start;\n    padding: ", ";\n    ", "\n\n    @media (hover: hover) {\n        button:hover {\n            text-decoration: underline;\n        }\n    }\n"])), knowledge_widget_ui_1.loadingOpacity, knowledge_widget_ui_1.contentBox, knowledge_widget_ui_1.itemList, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) {
-    return !p['data-show-header'] && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            > div {\n                ", "\n            }\n        "], ["\n            > div {\n                ", "\n            }\n        "])), (0, knowledge_widget_ui_1.headingElement)('h1', (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                        display: none;\n                    "], ["\n                        display: none;\n                    "])))));
-});
-var StyledParagraph = (0, styled_components_1.default)(knowledge_widget_ui_1.Paragraph)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n    font-weight: 300;\n\n    p {\n        white-space: normal;\n    }\n"], ["\n    ", "\n    font-weight: 300;\n\n    p {\n        white-space: normal;\n    }\n"])), knowledge_widget_ui_1.genericHtml);
-var StyledItem = styled_components_1.default.li(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    ", " {\n        display: none;\n        &:not(:only-child) {\n            ", "\n        }\n    }\n\n    ", "\n\n    > span {\n        display: block;\n        font-weight: 300;\n        color: ", ";\n    }\n"], ["\n    ", " {\n        display: none;\n        &:not(:only-child) {\n            ", "\n        }\n    }\n\n    ", "\n\n    > span {\n        display: block;\n        font-weight: 300;\n        color: ", ";\n    }\n"])), StyledParagraph, function (p) {
-    var _a, _b, _c;
-    return ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) &&
-        ((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal) && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    margin: ", " 0;\n                "], ["\n                    margin: ", " 0;\n                "])), (_c = p.theme.sizes) === null || _c === void 0 ? void 0 : _c.normal);
-}, function (p) {
-    return p['data-expanded'] && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            ", " {\n                display: block;\n            }\n        "], ["\n            ", " {\n                display: block;\n            }\n        "])), StyledParagraph);
-}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent; });
-var StyledSymbolBadge = (0, styled_components_1.default)(knowledge_widget_ui_1.SymbolBadge)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    margin: 0 0 0 ", ";\n    line {\n        stroke: ", ";\n    }\n"], ["\n    margin: 0 0 0 ", ";\n    line {\n        stroke: ", ";\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.colors) === null || _a === void 0 ? void 0 : _a.primary; });
-var StyledTimestamp = (0, styled_components_1.default)(knowledge_widget_ui_1.Timestamp)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: 300;\n"], ["\n    font-size: ", ";\n    font-weight: 300;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
-exports.default = NotificationList;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/lib-esm/index.js

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

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

@@ -1,93 +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 NotificationListComponent = function (container) {
-    var events = container.get('$widget').events;
-    var _a = __read(createEventSubscriber(events), 2), subscribe = _a[0], unsubscribe = _a[1];
-    return createReactComponent(container, 'notification-list', import('./notification-list'), function (component) {
-        var fetch = function (params) {
-            component.writeProperties(__assign(__assign({}, component.properties()), { loading: true, error: undefined, notificationList: undefined }));
-            component.actions.dispatch('fetch', { params: params });
-        };
-        component.actions.create('fetch', function (_a) {
-            var error = _a.error, notificationLists = _a.notificationLists;
-            if (error) {
-                return component.actions.dispatch('fetched', {
-                    error: error,
-                    loading: true,
-                    notificationList: undefined,
-                });
-            }
-            var _b = component.properties(), category = _b.category, notificationList = _b.notificationList;
-            var properties = {
-                notificationList: notificationLists.find(function (n) { return n.id === category; }) || notificationList,
-            };
-            return component.actions.dispatch('fetched', __assign(__assign({}, properties), { loading: true }));
-        });
-        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);
-        });
-    })
-        .then(function () {
-        return extendComponent(container, 'notification-list', function (component) {
-            component.actions.watch('notification-list.fetch', function (input, next) {
-                return container
-                    .getAsync('dataClient')
-                    .then(function (dataClient) {
-                    return dataClient.fetch(DataType.NotificationLists, {
-                        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 NotificationListComponent;

package/lib-esm/notification-list.js

@@ -1,88 +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;
-};
-import { borderTabStyle, Button, contentBox, createEmptyComponent, DateFormats, genericHtml, headingElement, ItemList, itemList, Loader, loadingOpacity, Paragraph, SymbolBadge, Timestamp, useContainer, useProperties, } from '@telia-ace/knowledge-widget-ui';
-import { appendClassNames } from '@telia-ace/widget-utilities';
-import React, { useState } from 'react';
-import styled, { css } from 'styled-components';
-var NotificationList = function (_a) {
-    var className = _a.className, other = __rest(_a, ["className"]);
-    var _b = __read(useState(null), 2), expanded = _b[0], setExpanded = _b[1];
-    var container = useContainer();
-    var _c = useProperties(), showHeader = _c.showHeader, notificationList = _c.notificationList, _d = _c.loading, loading = _d === void 0 ? false : _d;
-    var _e = notificationList || {}, id = _e.id, title = _e.title, symbol = _e.symbol, _f = _e.notifications, notifications = _f === void 0 ? [] : _f, _g = _e.defaultHeaderOptions, defaultHeaderOptions = _g === void 0 ? { visible: true } : _g;
-    if (!notifications.length && !loading) {
-        return createEmptyComponent(container, __assign(__assign({}, other), { className: appendClassNames(className, 'humany-notification-list') }));
-    }
-    return (React.createElement(StyledItemList, __assign({}, other, { "data-loading": loading, "data-show-header": typeof showHeader === 'boolean' ? showHeader : defaultHeaderOptions.visible, className: appendClassNames(className, 'humany-notification-list'), "data-notification-category": id, header: title, symbol: symbol, items: notifications, renderItem: function (_a) {
-            var id = _a.id, title = _a.title, body = _a.body, modified = _a.modified, expandable = _a.expandable;
-            return (React.createElement(StyledItem, { key: id, "data-notification": id, "data-expanded": expandable ? expanded === id : true }, expandable ? (React.createElement(React.Fragment, null,
-                React.createElement(StyledButton, { title: title, "aria-label": title, "aria-expanded": expanded === id, onClick: function () { return setExpanded(expanded === id ? null : id); } },
-                    React.createElement("span", null, title),
-                    React.createElement(StyledSymbolBadge, { size: 11, symbol: {
-                            type: 'Svg',
-                            content: "caret-".concat(expanded === id ? 'up' : 'down'),
-                        } })),
-                React.createElement(StyledParagraph, { html: body }),
-                modified && (React.createElement(StyledTimestamp, { format: DateFormats.YYYY_MM_DD, timestamp: modified })))) : (React.createElement(StyledParagraph, { html: body }))));
-        } }),
-        React.createElement(Loader, { loading: loading })));
-};
-var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    svg,\n    i {\n        color: ", ";\n    }\n    span {\n        color: ", ";\n        font-size: ", ";\n        overflow: hidden;\n        text-overflow: ellipsis;\n        flex: 1;\n        white-space: nowrap;\n    }\n    &:focus {\n        ", ";\n    }\n"], ["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    svg,\n    i {\n        color: ", ";\n    }\n    span {\n        color: ", ";\n        font-size: ", ";\n        overflow: hidden;\n        text-overflow: ellipsis;\n        flex: 1;\n        white-space: nowrap;\n    }\n    &:focus {\n        ", ";\n    }\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.primary; }, 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.fonts) === null || _a === void 0 ? void 0 : _a.normal; }, function (p) {
-    var _a, _b;
-    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                ", "\n                span {\n                    color: ", ";\n                    text-decoration: underline;\n                }\n            "], ["\n                ", "\n                span {\n                    color: ", ";\n                    text-decoration: underline;\n                }\n            "])), borderTabStyle, (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.primary);
-});
-var StyledItemList = styled(ItemList)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n    ", "\n  ", "\n  overflow: hidden;\n    justify-content: flex-start;\n    padding: ", ";\n    ", "\n\n    @media (hover: hover) {\n        button:hover {\n            text-decoration: underline;\n        }\n    }\n"], ["\n    ", "\n    ", "\n  ", "\n  overflow: hidden;\n    justify-content: flex-start;\n    padding: ", ";\n    ", "\n\n    @media (hover: hover) {\n        button:hover {\n            text-decoration: underline;\n        }\n    }\n"])), loadingOpacity, contentBox, itemList, function (p) { var _a; return (_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.large; }, function (p) {
-    return !p['data-show-header'] && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            > div {\n                ", "\n            }\n        "], ["\n            > div {\n                ", "\n            }\n        "])), headingElement('h1', css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                        display: none;\n                    "], ["\n                        display: none;\n                    "])))));
-});
-var StyledParagraph = styled(Paragraph)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n    font-weight: 300;\n\n    p {\n        white-space: normal;\n    }\n"], ["\n    ", "\n    font-weight: 300;\n\n    p {\n        white-space: normal;\n    }\n"])), genericHtml);
-var StyledItem = styled.li(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    ", " {\n        display: none;\n        &:not(:only-child) {\n            ", "\n        }\n    }\n\n    ", "\n\n    > span {\n        display: block;\n        font-weight: 300;\n        color: ", ";\n    }\n"], ["\n    ", " {\n        display: none;\n        &:not(:only-child) {\n            ", "\n        }\n    }\n\n    ", "\n\n    > span {\n        display: block;\n        font-weight: 300;\n        color: ", ";\n    }\n"])), StyledParagraph, function (p) {
-    var _a, _b, _c;
-    return ((_a = p.theme.sizes) === null || _a === void 0 ? void 0 : _a.cardinal) &&
-        ((_b = p.theme.sizes) === null || _b === void 0 ? void 0 : _b.normal) && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    margin: ", " 0;\n                "], ["\n                    margin: ", " 0;\n                "])), (_c = p.theme.sizes) === null || _c === void 0 ? void 0 : _c.normal);
-}, function (p) {
-    return p['data-expanded'] && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            ", " {\n                display: block;\n            }\n        "], ["\n            ", " {\n                display: block;\n            }\n        "])), StyledParagraph);
-}, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.accent; });
-var StyledSymbolBadge = styled(SymbolBadge)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    margin: 0 0 0 ", ";\n    line {\n        stroke: ", ";\n    }\n"], ["\n    margin: 0 0 0 ", ";\n    line {\n        stroke: ", ";\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.colors) === null || _a === void 0 ? void 0 : _a.primary; });
-var StyledTimestamp = styled(Timestamp)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: 300;\n"], ["\n    font-size: ", ";\n    font-weight: 300;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.small; });
-export default NotificationList;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;