@telia-ace/knowledge-widget-components-notification-row 1.3.28-rc.0 → 1.3.28-rc.1

package/index.js

@@ -1 +1 @@
-"use strict";const f=require("@telia-ace/knowledge-data-client"),d=require("@telia-ace/knowledge-widget-core"),w=require("@telia-ace/knowledge-widget-ui"),p=s=>{const{events:h}=s.get("$widget"),[u,c]=d.createEventSubscriber(h);return w.createReactComponent(s,"notification-row",Promise.resolve().then(()=>require("./notification-row-d5534c57.js")),t=>{const a=e=>{t.writeProperties({...t.properties(),loading:!0,error:void 0,notifications:[]}),t.actions.dispatch("fetch",{params:e})};return t.actions.create("fetch",({error:e,topNotifications:i,bottomNotifications:o,middleNotifications:g})=>{if(e)return t.actions.dispatch("fetched",{error:e,loading:!0,notifications:[]});let r=[];const{notifications:l,types:n=[]}=t.properties();return n.length?(n.indexOf("top")>-1&&(r=r.concat(i)),n.indexOf("middle")>-1&&(r=r.concat(g)),n.indexOf("bottom")>-1&&(r=r.concat(o))):r=i,t.actions.dispatch("fetched",{notifications:r.length?r:l,loading:!1})}),t.actions.create("fetched",e=>t.writeProperties({...e,loading:!1})),s.getAsync("router").then(e=>{const{params:i}=e.getRouteData();a(i)}),u("router:changed",(e,{current:i})=>{a(i.routeData.params)}),()=>{c()}}).then(()=>d.extendComponent(s,"notification-row",t=>{t.actions.watch("notification-row.fetch",(a,e)=>f.DataClient.getInstance(s).then(i=>i.fetch(f.DataType.RowNotifications,{categories:[a.params.guideCategory,a.params.contactCategory].filter(o=>!!o),searchPhrase:a.params.phrase})).then(e).catch(i=>{if(i)return e(i)}))})).then(()=>{c()})};module.exports=p;
+"use strict";const f=require("@telia-ace/knowledge-data-client"),d=require("@telia-ace/knowledge-widget-core"),w=require("@telia-ace/knowledge-widget-ui"),p=s=>{const{events:h}=s.get("$widget"),[u,c]=d.createEventSubscriber(h);return w.createReactComponent(s,"notification-row",Promise.resolve().then(()=>require("./notification-row-7a9d4926.js")),t=>{const a=e=>{t.writeProperties({...t.properties(),loading:!0,error:void 0,notifications:[]}),t.actions.dispatch("fetch",{params:e})};return t.actions.create("fetch",({error:e,topNotifications:i,bottomNotifications:o,middleNotifications:g})=>{if(e)return t.actions.dispatch("fetched",{error:e,loading:!0,notifications:[]});let r=[];const{notifications:l,types:n=[]}=t.properties();return n.length?(n.indexOf("top")>-1&&(r=r.concat(i)),n.indexOf("middle")>-1&&(r=r.concat(g)),n.indexOf("bottom")>-1&&(r=r.concat(o))):r=i,t.actions.dispatch("fetched",{notifications:r.length?r:l,loading:!1})}),t.actions.create("fetched",e=>t.writeProperties({...e,loading:!1})),s.getAsync("router").then(e=>{const{params:i}=e.getRouteData();a(i)}),u("router:changed",(e,{current:i})=>{a(i.routeData.params)}),()=>{c()}}).then(()=>d.extendComponent(s,"notification-row",t=>{t.actions.watch("notification-row.fetch",(a,e)=>f.DataClient.getInstance(s).then(i=>i.fetch(f.DataType.RowNotifications,{categories:[a.params.guideCategory,a.params.contactCategory].filter(o=>!!o),searchPhrase:a.params.phrase})).then(e).catch(i=>{if(i)return e(i)}))})).then(()=>{c()})};module.exports=p;

package/index.mjs

@@ -6,7 +6,7 @@ const v = (o) => {
   return m(
     o,
     "notification-row",
-    import("./notification-row-5d09c41e.mjs"),
+    import("./notification-row-a3660cfb.mjs"),
     (e) => {
       const r = (t) => {
         e.writeProperties({

package/notification-row-7a9d4926.js

@@ -0,0 +1,114 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),y=require("@emotion/react"),f=require("@emotion/styled"),o=require("@telia-ace/knowledge-widget-ui"),m=require("@telia-ace/widget-services"),S=require("@telia-ace/widget-utilities"),r=require("react"),C="closed-notifications",K={transform:{a:({children:e,...t})=>i.jsx("a",{...t,tabIndex:-1,children:e})}},U=({className:e,...t})=>{const{types:d=[],allowPaging:b=!0,notifications:B=[],closeAriaLabel:A="",pageNextAriaLabel:I="",pagePreviousAriaLabel:T="",expandAriaLabel:N=""}=o.useProperties(),[x,H]=r.useState(!1),[w,R]=r.useState([]),[s,v]=r.useState(0),l=o.useContainer(),[$,L]=r.useState();r.useEffect(()=>{l&&(m.readStorage(l,C,m.StorageMedium.Session).then((a=[])=>R(a)),m.createStorageWriter(l,C,m.StorageCategory.Functional).then(a=>L(()=>a)))},[l]),r.useEffect(()=>{l&&m.readStorage(l,C,m.StorageMedium.Session).then((a=[])=>{w.forEach(n=>a.indexOf(n)===-1&&a.push(n)),$&&$(a)})},[w,l,$]);const p=B.filter(({id:a})=>w.indexOf(a)===-1),{length:u}=p,[c,j]=r.useState(o.useProperties().expandable),W=r.useRef(null),g=l.get("$widget"),M=r.useRef(t.id);if(r.useEffect(()=>{g.events.subscribe("notification:expandable",(a,n)=>{n.notificationRowId===M.current&&j(n.expandable)})},[g.events]),!p.length)return o.createEmptyComponent(l,{...t,className:S.appendClassNames(e,"humany-notification-row")});const z=()=>H(!x);if(b){const a=p[s]||p[s+1]||p[s-1];if(!a)return o.createEmptyComponent(l,{...t,className:S.appendClassNames(e,"humany-notification-row")});const{id:n,body:k}=a||{};return!c&&g.container.expandableNotifications&&g.container.expandableNotifications.has(n)&&j(!0),i.jsxs(P,{...t,...c?{"aria-expanded":x,role:"button"}:{},...N?{"aria-label":N}:{},tabIndex:c?0:-1,className:S.appendClassNames(e,"humany-notification-row"),"data-pageable":u>1,"data-types":d,"data-allow-paging":b,"data-expandable":c,ref:W,onKeyDown:h=>{h.key==="Enter"&&z()},onClick:z,children:[i.jsx(F,{"aria-label":A,onClick:()=>{v(p.indexOf(a)),R([...w,n])},children:i.jsx(o.SymbolBadge,{symbol:{type:"Svg",content:"close"}})}),i.jsx(q,{htmlParseInstruction:!c||x?void 0:K,"data-pageable":u>1,"data-notification":n,"data-expandable":c,"data-expanded":x,html:k}),u>1&&i.jsxs(D,{children:[i.jsx(E,{"data-testid":"page-left-button","aria-label":T,"data-disabled":s===0,onClick:h=>{h.stopPropagation(),s>0&&v(s-1)},children:i.jsx(O,{size:10,symbol:{type:"Svg",content:"caret-left"}})}),i.jsxs("span",{children:[s+1,"/",u]}),i.jsx(E,{"data-testid":"page-right-button","aria-label":I,"data-disabled":s+1>=u,onClick:h=>{h.stopPropagation(),s<u-1&&v(s+1)},children:i.jsx(O,{size:10,symbol:{type:"Svg",content:"caret-right"}})})]})]})}return i.jsx(P,{...t,className:S.appendClassNames(e,"humany-notification-row"),"data-pageable":!1,"data-types":d,"data-allow-paging":!1,children:p.map(a=>{if(!a)return null;const{id:n,body:k}=a;return!c&&g.container.expandableNotifications&&g.container.expandableNotifications.has(n)&&j(!0),i.jsx(q,{"data-pageable":!1,"data-expandable":c,"data-expanded":x,"data-notification":n,html:k},n)})})},P=f.div`
+  ${o.genericHtml}
+  padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}} ${e=>{var t;return((t=e.theme.sizes)==null?void 0:t.cardinal)*12}}px;
+  background-color: ${e=>{var t,d,b;return e["data-types"].length?e["data-types"].indexOf("top")>-1?(t=e.theme.colors)==null?void 0:t.warning:e["data-types"].indexOf("bottom")>-1?"transparent":(d=e.theme.colors)==null?void 0:d.primary:(b=e.theme.colors)==null?void 0:b.warning}};
+  color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  border-radius: ${e=>e.theme.borderRadius};
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  cursor: ${e=>e["data-expandable"]?"pointer":"default"};
+  overflow: hidden;
+
+  i {
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  }
+
+  a {
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.link}};
+    &:focus-visible {
+      ${o.linkTabStyle}
+    }
+  }
+
+  ${e=>{var t;return!e["data-allow-paging"]&&y.css`
+      flex-wrap: wrap;
+
+      > div {
+        min-width: 100%;
+        margin: ${((t=e.theme.sizes)==null?void 0:t.cardinal)*2}px;
+      }
+    `}};
+
+  ${e=>y.css`
+      &:focus-visible {
+        .humany-html {
+          ${o.borderTabStyle(e)}
+        }
+      }
+    `}
+`,q=f(o.Html)`
+  flex: 1;
+  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+  line-height: 1.6em;
+  font-weight: 300;
+
+  ${e=>e["data-expandable"]&&!e["data-expanded"]&&y.css`
+      max-width: 100%;
+
+      p {
+        display: none;
+        &:first-child {
+          display: block;
+          margin-bottom: 0;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    `}
+`,D=f.div`
+  text-align: center;
+  width: 100%;
+  span {
+    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.small}};
+    display: inline-block;
+    width: 30px;
+    text-align: center;
+  }
+`,E=f(o.Button)`
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity 200ms ease-out;
+  justify-self: flex-end;
+  align-self: flex-start;
+  padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} svg {
+    display: block;
+  }
+
+  &:focus-visible {
+    ${o.borderTabStyle}
+  }
+
+  ${e=>e["data-disabled"]?y.css`
+          opacity: 0.8;
+        `:y.css`
+          @media (hover) {
+            &:hover {
+              opacity: 0.5;
+            }
+          }
+        `}
+`,F=f(E)`
+  position: absolute;
+  top: 7.5px;
+  right: 7.5px;
+  width: 25px;
+  height: auto;
+  padding: ${e=>{var t,d;return`calc(${(t=e.theme.sizes)==null?void 0:t.small}/2) ${(d=e.theme.sizes)==null?void 0:d.small}`}};
+  svg {
+    vertical-align: middle;
+    line,
+    path {
+      stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+    }
+  }
+`,O=f(o.SymbolBadge)`
+  line {
+    stroke: #ffffff;
+  }
+`;f.div`
+  display: none;
+`;exports.default=U;

package/notification-row-a3660cfb.mjs

@@ -0,0 +1,328 @@
+import { jsxs as k, jsx as l } from "react/jsx-runtime";
+import { css as u } from "@emotion/react";
+import c from "@emotion/styled";
+import { useProperties as O, useContainer as J, createEmptyComponent as A, SymbolBadge as T, genericHtml as Q, linkTabStyle as U, borderTabStyle as W, Html as V, Button as X } from "@telia-ace/knowledge-widget-ui";
+import { readStorage as B, StorageMedium as I, createStorageWriter as Z, StorageCategory as ee } from "@telia-ace/widget-services";
+import { appendClassNames as y } from "@telia-ace/widget-utilities";
+import te, { useState as h, useEffect as z, useRef as ae } from "react";
+const R = "closed-notifications", ne = {
+  transform: {
+    a: ({ children: e, ...t }) => /* @__PURE__ */ l("a", { ...t, tabIndex: -1, children: e })
+  }
+}, me = ({ className: e, ...t }) => {
+  const {
+    types: r = [],
+    allowPaging: m = !0,
+    notifications: K = [],
+    closeAriaLabel: D = "",
+    pageNextAriaLabel: F = "",
+    pagePreviousAriaLabel: G = "",
+    expandAriaLabel: C = ""
+  } = O(), [b, M] = h(!1), [x, N] = h([]), [i, w] = h(0), o = J(), [$, Y] = h();
+  z(() => {
+    o && (B(o, R, I.Session).then(
+      (a = []) => N(a)
+    ), Z(
+      o,
+      R,
+      ee.Functional
+    ).then((a) => Y(() => a)));
+  }, [o]), z(() => {
+    o && B(o, R, I.Session).then(
+      (a = []) => {
+        x.forEach(
+          (n) => a.indexOf(n) === -1 && a.push(n)
+        ), $ && $(a);
+      }
+    );
+  }, [x, o, $]);
+  const d = K.filter(({ id: a }) => x.indexOf(a) === -1), { length: p } = d, [s, v] = h(
+    O().expandable
+  ), _ = te.useRef(null), f = o.get("$widget"), q = ae(t.id);
+  if (z(() => {
+    f.events.subscribe(
+      "notification:expandable",
+      (a, n) => {
+        n.notificationRowId === q.current && v(n.expandable);
+      }
+    );
+  }, [f.events]), !d.length)
+    return A(o, {
+      ...t,
+      className: y(e, "humany-notification-row")
+    });
+  const P = () => M(!b);
+  if (m) {
+    const a = d[i] || d[i + 1] || d[i - 1];
+    if (!a)
+      return A(o, {
+        ...t,
+        className: y(e, "humany-notification-row")
+      });
+    const { id: n, body: S } = a || {};
+    return !s && f.container.expandableNotifications && f.container.expandableNotifications.has(n) && v(!0), /* @__PURE__ */ k(
+      H,
+      {
+        ...t,
+        ...s ? { "aria-expanded": b, role: "button" } : {},
+        ...C ? { "aria-label": C } : {},
+        tabIndex: s ? 0 : -1,
+        className: y(e, "humany-notification-row"),
+        "data-pageable": p > 1,
+        "data-types": r,
+        "data-allow-paging": m,
+        "data-expandable": s,
+        ref: _,
+        onKeyDown: (g) => {
+          g.key === "Enter" && P();
+        },
+        onClick: P,
+        children: [
+          /* @__PURE__ */ l(
+            oe,
+            {
+              "aria-label": D,
+              onClick: () => {
+                w(d.indexOf(a)), N([...x, n]);
+              },
+              children: /* @__PURE__ */ l(T, { symbol: { type: "Svg", content: "close" } })
+            }
+          ),
+          /* @__PURE__ */ l(
+            L,
+            {
+              htmlParseInstruction: !s || b ? void 0 : ne,
+              "data-pageable": p > 1,
+              "data-notification": n,
+              "data-expandable": s,
+              "data-expanded": b,
+              html: S
+            }
+          ),
+          p > 1 && /* @__PURE__ */ k(ie, { children: [
+            /* @__PURE__ */ l(
+              E,
+              {
+                "data-testid": "page-left-button",
+                "aria-label": G,
+                "data-disabled": i === 0,
+                onClick: (g) => {
+                  g.stopPropagation(), i > 0 && w(i - 1);
+                },
+                children: /* @__PURE__ */ l(
+                  j,
+                  {
+                    size: 10,
+                    symbol: { type: "Svg", content: "caret-left" }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ k("span", { children: [
+              i + 1,
+              "/",
+              p
+            ] }),
+            /* @__PURE__ */ l(
+              E,
+              {
+                "data-testid": "page-right-button",
+                "aria-label": F,
+                "data-disabled": i + 1 >= p,
+                onClick: (g) => {
+                  g.stopPropagation(), i < p - 1 && w(i + 1);
+                },
+                children: /* @__PURE__ */ l(
+                  j,
+                  {
+                    size: 10,
+                    symbol: { type: "Svg", content: "caret-right" }
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ l(
+    H,
+    {
+      ...t,
+      className: y(e, "humany-notification-row"),
+      "data-pageable": !1,
+      "data-types": r,
+      "data-allow-paging": !1,
+      children: d.map((a) => {
+        if (!a)
+          return null;
+        const { id: n, body: S } = a;
+        return !s && f.container.expandableNotifications && f.container.expandableNotifications.has(n) && v(!0), /* @__PURE__ */ l(
+          L,
+          {
+            "data-pageable": !1,
+            "data-expandable": s,
+            "data-expanded": b,
+            "data-notification": n,
+            html: S
+          },
+          n
+        );
+      })
+    }
+  );
+}, H = c.div`
+  ${Q}
+  padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}} ${(e) => {
+  var t;
+  return ((t = e.theme.sizes) == null ? void 0 : t.cardinal) * 12;
+}}px;
+  background-color: ${(e) => {
+  var t, r, m;
+  return e["data-types"].length ? e["data-types"].indexOf("top") > -1 ? (t = e.theme.colors) == null ? void 0 : t.warning : e["data-types"].indexOf("bottom") > -1 ? "transparent" : (r = e.theme.colors) == null ? void 0 : r.primary : (m = e.theme.colors) == null ? void 0 : m.warning;
+}};
+  color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  border-radius: ${(e) => e.theme.borderRadius};
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  cursor: ${(e) => e["data-expandable"] ? "pointer" : "default"};
+  overflow: hidden;
+
+  i {
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  }
+
+  a {
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.link;
+}};
+    &:focus-visible {
+      ${U}
+    }
+  }
+
+  ${(e) => {
+  var t;
+  return !e["data-allow-paging"] && u`
+      flex-wrap: wrap;
+
+      > div {
+        min-width: 100%;
+        margin: ${((t = e.theme.sizes) == null ? void 0 : t.cardinal) * 2}px;
+      }
+    `;
+}};
+
+  ${(e) => u`
+      &:focus-visible {
+        .humany-html {
+          ${W(e)}
+        }
+      }
+    `}
+`, L = c(V)`
+  flex: 1;
+  font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+  line-height: 1.6em;
+  font-weight: 300;
+
+  ${(e) => e["data-expandable"] && !e["data-expanded"] && u`
+      max-width: 100%;
+
+      p {
+        display: none;
+        &:first-child {
+          display: block;
+          margin-bottom: 0;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    `}
+`, ie = c.div`
+  text-align: center;
+  width: 100%;
+  span {
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.small;
+}};
+    display: inline-block;
+    width: 30px;
+    text-align: center;
+  }
+`, E = c(X)`
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity 200ms ease-out;
+  justify-self: flex-end;
+  align-self: flex-start;
+  padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} svg {
+    display: block;
+  }
+
+  &:focus-visible {
+    ${W}
+  }
+
+  ${(e) => e["data-disabled"] ? u`
+          opacity: 0.8;
+        ` : u`
+          @media (hover) {
+            &:hover {
+              opacity: 0.5;
+            }
+          }
+        `}
+`, oe = c(E)`
+  position: absolute;
+  top: 7.5px;
+  right: 7.5px;
+  width: 25px;
+  height: auto;
+  padding: ${(e) => {
+  var t, r;
+  return `calc(${(t = e.theme.sizes) == null ? void 0 : t.small}/2) ${(r = e.theme.sizes) == null ? void 0 : r.small}`;
+}};
+  svg {
+    vertical-align: middle;
+    line,
+    path {
+      stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    }
+  }
+`, j = c(T)`
+  line {
+    stroke: #ffffff;
+  }
+`;
+c.div`
+  display: none;
+`;
+export {
+  me as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/knowledge-widget-components-notification-row",
-  "version": "1.3.28-rc.0",
+  "version": "1.3.28-rc.1",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -10,11 +10,11 @@
     }
   },
   "dependencies": {
-    "@telia-ace/knowledge-widget-core": "^1.3.28-rc.0",
-    "@telia-ace/knowledge-widget-ui": "^1.3.28-rc.0",
-    "@telia-ace/widget-services": "^1.3.28-rc.0",
-    "@telia-ace/widget-utilities": "^1.3.28-rc.0",
-    "@telia-ace/knowledge-data-client": "^1.3.28-rc.0",
+    "@telia-ace/knowledge-widget-core": "^1.3.28-rc.1",
+    "@telia-ace/knowledge-widget-ui": "^1.3.28-rc.1",
+    "@telia-ace/widget-services": "^1.3.28-rc.1",
+    "@telia-ace/widget-utilities": "^1.3.28-rc.1",
+    "@telia-ace/knowledge-data-client": "^1.3.28-rc.1",
     "@webprovisions/platform": "^1.1.4"
   },
   "peerDependencies": {

package/notification-row-5d09c41e.mjs

@@ -1,318 +0,0 @@
-import { jsxs as v, jsx as o } from "react/jsx-runtime";
-import { css as h } from "@emotion/react";
-import d from "@emotion/styled";
-import { useProperties as G, useContainer as M, createEmptyComponent as P, SymbolBadge as N, genericHtml as Y, linkTabStyle as _, borderTabStyle as j, Html as q, Button as J } from "@telia-ace/knowledge-widget-ui";
-import { readStorage as O, StorageMedium as A, createStorageWriter as Q, StorageCategory as U } from "@telia-ace/widget-services";
-import { appendClassNames as u } from "@telia-ace/widget-utilities";
-import { useState as x, useEffect as B } from "react";
-const S = "closed-notifications", V = {
-  transform: {
-    a: ({ children: e, ...t }) => /* @__PURE__ */ o("a", { ...t, tabIndex: -1, children: e })
-  }
-}, re = ({ className: e, ...t }) => {
-  const {
-    types: l = [],
-    allowPaging: f = !0,
-    notifications: R = [],
-    expandable: c = !1,
-    closeAriaLabel: T = "",
-    pageNextAriaLabel: W = "",
-    pagePreviousAriaLabel: K = "",
-    expandAriaLabel: z = ""
-  } = G(), [m, D] = x(!1), [b, C] = x([]), [n, y] = x(0), i = M(), [w, F] = x();
-  B(() => {
-    i && (O(i, S, A.Session).then(
-      (a = []) => C(a)
-    ), Q(
-      i,
-      S,
-      U.Functional
-    ).then((a) => F(() => a)));
-  }, [i]), B(() => {
-    i && O(i, S, A.Session).then(
-      (a = []) => {
-        b.forEach(
-          (r) => a.indexOf(r) === -1 && a.push(r)
-        ), w && w(a);
-      }
-    );
-  }, [b, i, w]);
-  const s = R.filter(({ id: a }) => b.indexOf(a) === -1), { length: p } = s;
-  if (!s.length)
-    return P(i, {
-      ...t,
-      className: u(e, "humany-notification-row")
-    });
-  if (f) {
-    const a = s[n] || s[n + 1] || s[n - 1];
-    if (!a)
-      return P(i, {
-        ...t,
-        className: u(e, "humany-notification-row")
-      });
-    const { id: r, body: $ } = a || {}, E = () => D(!m);
-    return /* @__PURE__ */ v(
-      H,
-      {
-        ...t,
-        ...c ? { "aria-expanded": m, role: "button" } : {},
-        ...z ? { "aria-label": z } : {},
-        tabIndex: c ? 0 : -1,
-        className: u(e, "humany-notification-row"),
-        "data-pageable": p > 1,
-        "data-types": l,
-        "data-allow-paging": f,
-        "data-expandable": c,
-        onKeyDown: (g) => {
-          g.key === "Enter" && E();
-        },
-        onClick: E,
-        children: [
-          /* @__PURE__ */ o(
-            Z,
-            {
-              "aria-label": T,
-              onClick: () => {
-                y(s.indexOf(a)), C([...b, r]);
-              },
-              children: /* @__PURE__ */ o(N, { symbol: { type: "Svg", content: "close" } })
-            }
-          ),
-          /* @__PURE__ */ o(
-            I,
-            {
-              htmlParseInstruction: !c || m ? void 0 : V,
-              "data-pageable": p > 1,
-              "data-notification": r,
-              "data-expandable": c,
-              "data-expanded": m,
-              html: $
-            }
-          ),
-          p > 1 && /* @__PURE__ */ v(X, { children: [
-            /* @__PURE__ */ o(
-              k,
-              {
-                "data-testid": "page-left-button",
-                "aria-label": K,
-                "data-disabled": n === 0,
-                onClick: (g) => {
-                  g.stopPropagation(), n > 0 && y(n - 1);
-                },
-                children: /* @__PURE__ */ o(
-                  L,
-                  {
-                    size: 10,
-                    symbol: { type: "Svg", content: "caret-left" }
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ v("span", { children: [
-              n + 1,
-              "/",
-              p
-            ] }),
-            /* @__PURE__ */ o(
-              k,
-              {
-                "data-testid": "page-right-button",
-                "aria-label": W,
-                "data-disabled": n + 1 >= p,
-                onClick: (g) => {
-                  g.stopPropagation(), n < p - 1 && y(n + 1);
-                },
-                children: /* @__PURE__ */ o(
-                  L,
-                  {
-                    size: 10,
-                    symbol: { type: "Svg", content: "caret-right" }
-                  }
-                )
-              }
-            )
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ o(
-    H,
-    {
-      ...t,
-      className: u(e, "humany-notification-row"),
-      "data-pageable": !1,
-      "data-types": l,
-      "data-allow-paging": !1,
-      children: s.map((a) => {
-        if (!a)
-          return null;
-        const { id: r, body: $ } = a;
-        return /* @__PURE__ */ o(
-          I,
-          {
-            "data-pageable": !1,
-            "data-expandable": c,
-            "data-expanded": m,
-            "data-notification": r,
-            html: $
-          },
-          r
-        );
-      })
-    }
-  );
-}, H = d.div`
-  ${Y}
-  padding: ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.normal;
-}} ${(e) => {
-  var t;
-  return ((t = e.theme.sizes) == null ? void 0 : t.cardinal) * 12;
-}}px;
-  background-color: ${(e) => {
-  var t, l, f;
-  return e["data-types"].length ? e["data-types"].indexOf("top") > -1 ? (t = e.theme.colors) == null ? void 0 : t.warning : e["data-types"].indexOf("bottom") > -1 ? "transparent" : (l = e.theme.colors) == null ? void 0 : l.primary : (f = e.theme.colors) == null ? void 0 : f.warning;
-}};
-  color: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
-  border-radius: ${(e) => e.theme.borderRadius};
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  cursor: ${(e) => e["data-expandable"] ? "pointer" : "default"};
-  overflow: hidden;
-
-  i {
-    color: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
-  }
-
-  a {
-    color: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.link;
-}};
-    &:focus-visible {
-      ${_}
-    }
-  }
-
-  ${(e) => {
-  var t;
-  return !e["data-allow-paging"] && h`
-      flex-wrap: wrap;
-
-      > div {
-        min-width: 100%;
-        margin: ${((t = e.theme.sizes) == null ? void 0 : t.cardinal) * 2}px;
-      }
-    `;
-}};
-
-  ${(e) => h`
-      &:focus-visible {
-        .humany-html {
-          ${j(e)}
-        }
-      }
-    `}
-`, I = d(q)`
-  flex: 1;
-  font-size: ${(e) => {
-  var t;
-  return (t = e.theme.fonts) == null ? void 0 : t.normal;
-}};
-  line-height: 1.6em;
-  font-weight: 300;
-
-  ${(e) => e["data-expandable"] && !e["data-expanded"] && h`
-      max-width: 100%;
-
-      p {
-        display: none;
-        &:first-child {
-          display: block;
-          margin-bottom: 0;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    `}
-`, X = d.div`
-  text-align: center;
-  width: 100%;
-  span {
-    font-size: ${(e) => {
-  var t;
-  return (t = e.theme.fonts) == null ? void 0 : t.small;
-}};
-    display: inline-block;
-    width: 30px;
-    text-align: center;
-  }
-`, k = d(J)`
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  transition: opacity 200ms ease-out;
-  justify-self: flex-end;
-  align-self: flex-start;
-  padding: ${(e) => {
-  var t;
-  return (t = e.theme.sizes) == null ? void 0 : t.small;
-}} svg {
-    display: block;
-  }
-
-  &:focus-visible {
-    ${j}
-  }
-
-  ${(e) => e["data-disabled"] ? h`
-          opacity: 0.8;
-        ` : h`
-          @media (hover) {
-            &:hover {
-              opacity: 0.5;
-            }
-          }
-        `}
-`, Z = d(k)`
-  position: absolute;
-  top: 7.5px;
-  right: 7.5px;
-  width: 25px;
-  height: auto;
-  padding: ${(e) => {
-  var t, l;
-  return `calc(${(t = e.theme.sizes) == null ? void 0 : t.small}/2) ${(l = e.theme.sizes) == null ? void 0 : l.small}`;
-}};
-  svg {
-    vertical-align: middle;
-    line,
-    path {
-      stroke: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
-    }
-  }
-`, L = d(N)`
-  line {
-    stroke: #ffffff;
-  }
-`;
-d.div`
-  display: none;
-`;
-export {
-  re as default
-};

package/notification-row-d5534c57.js

@@ -1,114 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),b=require("@emotion/react"),c=require("@emotion/styled"),i=require("@telia-ace/knowledge-widget-ui"),m=require("@telia-ace/widget-services"),w=require("@telia-ace/widget-utilities"),g=require("react"),j="closed-notifications",L={transform:{a:({children:e,...t})=>n.jsx("a",{...t,tabIndex:-1,children:e})}},R=({className:e,...t})=>{const{types:l=[],allowPaging:u=!0,notifications:O=[],expandable:p=!1,closeAriaLabel:B="",pageNextAriaLabel:A="",pagePreviousAriaLabel:T="",expandAriaLabel:C=""}=i.useProperties(),[x,H]=g.useState(!1),[y,z]=g.useState([]),[o,S]=g.useState(0),s=i.useContainer(),[$,I]=g.useState();g.useEffect(()=>{s&&(m.readStorage(s,j,m.StorageMedium.Session).then((a=[])=>z(a)),m.createStorageWriter(s,j,m.StorageCategory.Functional).then(a=>I(()=>a)))},[s]),g.useEffect(()=>{s&&m.readStorage(s,j,m.StorageMedium.Session).then((a=[])=>{y.forEach(r=>a.indexOf(r)===-1&&a.push(r)),$&&$(a)})},[y,s,$]);const d=O.filter(({id:a})=>y.indexOf(a)===-1),{length:f}=d;if(!d.length)return i.createEmptyComponent(s,{...t,className:w.appendClassNames(e,"humany-notification-row")});if(u){const a=d[o]||d[o+1]||d[o-1];if(!a)return i.createEmptyComponent(s,{...t,className:w.appendClassNames(e,"humany-notification-row")});const{id:r,body:v}=a||{},E=()=>H(!x);return n.jsxs(P,{...t,...p?{"aria-expanded":x,role:"button"}:{},...C?{"aria-label":C}:{},tabIndex:p?0:-1,className:w.appendClassNames(e,"humany-notification-row"),"data-pageable":f>1,"data-types":l,"data-allow-paging":u,"data-expandable":p,onKeyDown:h=>{h.key==="Enter"&&E()},onClick:E,children:[n.jsx(M,{"aria-label":B,onClick:()=>{S(d.indexOf(a)),z([...y,r])},children:n.jsx(i.SymbolBadge,{symbol:{type:"Svg",content:"close"}})}),n.jsx(q,{htmlParseInstruction:!p||x?void 0:L,"data-pageable":f>1,"data-notification":r,"data-expandable":p,"data-expanded":x,html:v}),f>1&&n.jsxs(W,{children:[n.jsx(k,{"data-testid":"page-left-button","aria-label":T,"data-disabled":o===0,onClick:h=>{h.stopPropagation(),o>0&&S(o-1)},children:n.jsx(N,{size:10,symbol:{type:"Svg",content:"caret-left"}})}),n.jsxs("span",{children:[o+1,"/",f]}),n.jsx(k,{"data-testid":"page-right-button","aria-label":A,"data-disabled":o+1>=f,onClick:h=>{h.stopPropagation(),o<f-1&&S(o+1)},children:n.jsx(N,{size:10,symbol:{type:"Svg",content:"caret-right"}})})]})]})}return n.jsx(P,{...t,className:w.appendClassNames(e,"humany-notification-row"),"data-pageable":!1,"data-types":l,"data-allow-paging":!1,children:d.map(a=>{if(!a)return null;const{id:r,body:v}=a;return n.jsx(q,{"data-pageable":!1,"data-expandable":p,"data-expanded":x,"data-notification":r,html:v},r)})})},P=c.div`
-  ${i.genericHtml}
-  padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}} ${e=>{var t;return((t=e.theme.sizes)==null?void 0:t.cardinal)*12}}px;
-  background-color: ${e=>{var t,l,u;return e["data-types"].length?e["data-types"].indexOf("top")>-1?(t=e.theme.colors)==null?void 0:t.warning:e["data-types"].indexOf("bottom")>-1?"transparent":(l=e.theme.colors)==null?void 0:l.primary:(u=e.theme.colors)==null?void 0:u.warning}};
-  color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
-  border-radius: ${e=>e.theme.borderRadius};
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  cursor: ${e=>e["data-expandable"]?"pointer":"default"};
-  overflow: hidden;
-
-  i {
-    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
-  }
-
-  a {
-    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.link}};
-    &:focus-visible {
-      ${i.linkTabStyle}
-    }
-  }
-
-  ${e=>{var t;return!e["data-allow-paging"]&&b.css`
-      flex-wrap: wrap;
-
-      > div {
-        min-width: 100%;
-        margin: ${((t=e.theme.sizes)==null?void 0:t.cardinal)*2}px;
-      }
-    `}};
-
-  ${e=>b.css`
-      &:focus-visible {
-        .humany-html {
-          ${i.borderTabStyle(e)}
-        }
-      }
-    `}
-`,q=c(i.Html)`
-  flex: 1;
-  font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
-  line-height: 1.6em;
-  font-weight: 300;
-
-  ${e=>e["data-expandable"]&&!e["data-expanded"]&&b.css`
-      max-width: 100%;
-
-      p {
-        display: none;
-        &:first-child {
-          display: block;
-          margin-bottom: 0;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    `}
-`,W=c.div`
-  text-align: center;
-  width: 100%;
-  span {
-    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.small}};
-    display: inline-block;
-    width: 30px;
-    text-align: center;
-  }
-`,k=c(i.Button)`
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  transition: opacity 200ms ease-out;
-  justify-self: flex-end;
-  align-self: flex-start;
-  padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} svg {
-    display: block;
-  }
-
-  &:focus-visible {
-    ${i.borderTabStyle}
-  }
-
-  ${e=>e["data-disabled"]?b.css`
-          opacity: 0.8;
-        `:b.css`
-          @media (hover) {
-            &:hover {
-              opacity: 0.5;
-            }
-          }
-        `}
-`,M=c(k)`
-  position: absolute;
-  top: 7.5px;
-  right: 7.5px;
-  width: 25px;
-  height: auto;
-  padding: ${e=>{var t,l;return`calc(${(t=e.theme.sizes)==null?void 0:t.small}/2) ${(l=e.theme.sizes)==null?void 0:l.small}`}};
-  svg {
-    vertical-align: middle;
-    line,
-    path {
-      stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
-    }
-  }
-`,N=c(i.SymbolBadge)`
-  line {
-    stroke: #ffffff;
-  }
-`;c.div`
-  display: none;
-`;exports.default=R;