@telia-ace/knowledge-widget-components-notification-row 1.1.1-rc.0 → 1.1.1-rc.2

package/index.js

@@ -1 +1 @@
-"use strict";const e=require("./index-19df0eec.js");require("react/jsx-runtime");require("react");require("react-dom");module.exports=e.NotificationRowComponent;
+"use strict";const e=require("./index-421eaa7e.js");require("react/jsx-runtime");require("@emotion/styled");require("@emotion/react");require("react");require("react-transition-group");require("react-dom");require("react-router-dom");module.exports=e.NotificationRowComponent;

package/index.mjs

@@ -1,7 +1,11 @@
-import { N as i } from "./index-750561ea.mjs";
+import { N as d } from "./index-fbfe8881.mjs";
 import "react/jsx-runtime";
+import "@emotion/styled";
+import "@emotion/react";
 import "react";
+import "react-transition-group";
 import "react-dom";
+import "react-router-dom";
 export {
-  i as default
+  d as default
 };

package/{notification-row-ce337619.mjs → notification-row-856f5a51.mjs}

@@ -1,14 +1,18 @@
 import { jsx as n, jsxs as v } from "react/jsx-runtime";
-import { E as G, C as M, u as Y, r as E, S as P, c as _, a as q, b, d as L, n as d, g as J, l as Q, e as h, f as N, H as U, B as V } from "./index-750561ea.mjs";
+import { css as h } from "@emotion/react";
+import d from "@emotion/styled";
+import { E as G, C as M, u as Y, r as E, S as P, c as _, a as q, b, d as L, g as J, l as Q, e as N, H as U, B as V } from "./index-fbfe8881.mjs";
 import { useContext as X, useState as x, useEffect as B } from "react";
 import "react-dom";
+import "react-transition-group";
+import "react-router-dom";
 const O = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(G, { ...t }) : null, Z = () => X(M), S = "closed-notifications", ee = {
   transform: {
     a: ({ children: e, ...t }) => /* @__PURE__ */ n("a", { ...t, tabIndex: -1, children: e })
   }
-}, le = ({ className: e, ...t }) => {
+}, pe = ({ className: e, ...t }) => {
   const {
-    types: s = [],
+    types: r = [],
     allowPaging: f = !0,
     notifications: j = [],
     expandable: c = !1,
@@ -27,25 +31,25 @@ const O = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(G, { ...t }) :
     i && E(i, S, P.Session).then(
       (a = []) => {
         u.forEach(
-          (l) => a.indexOf(l) === -1 && a.push(l)
+          (s) => a.indexOf(s) === -1 && a.push(s)
         ), w && w(a);
       }
     );
   }, [u, i, w]);
-  const r = j.filter(({ id: a }) => u.indexOf(a) === -1), { length: p } = r;
-  if (!r.length)
+  const l = j.filter(({ id: a }) => u.indexOf(a) === -1), { length: p } = l;
+  if (!l.length)
     return O(i, {
       ...t,
       className: b(e, "humany-notification-row")
     });
   if (f) {
-    const a = r[o] || r[o + 1] || r[o - 1];
+    const a = l[o] || l[o + 1] || l[o - 1];
     if (!a)
       return O(i, {
         ...t,
         className: b(e, "humany-notification-row")
       });
-    const { id: l, body: $ } = a || {}, z = () => D(!m);
+    const { id: s, body: $ } = a || {}, z = () => D(!m);
     return /* @__PURE__ */ v(
       A,
       {
@@ -55,7 +59,7 @@ const O = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(G, { ...t }) :
         tabIndex: c ? 0 : -1,
         className: b(e, "humany-notification-row"),
         "data-pageable": p > 1,
-        "data-types": s,
+        "data-types": r,
         "data-allow-paging": f,
         "data-expandable": c,
         onKeyDown: (g) => {
@@ -68,7 +72,7 @@ const O = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(G, { ...t }) :
             {
               "aria-label": R,
               onClick: () => {
-                y(r.indexOf(a)), C([...u, l]);
+                y(l.indexOf(a)), C([...u, s]);
               },
               children: /* @__PURE__ */ n(L, { symbol: { type: "Svg", content: "close" } })
             }
@@ -78,7 +82,7 @@ const O = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(G, { ...t }) :
             {
               htmlParseInstruction: !c || m ? void 0 : ee,
               "data-pageable": p > 1,
-              "data-notification": l,
+              "data-notification": s,
               "data-expandable": c,
               "data-expanded": m,
               html: $
@@ -135,22 +139,22 @@ const O = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(G, { ...t }) :
       ...t,
       className: b(e, "humany-notification-row"),
       "data-pageable": !1,
-      "data-types": s,
+      "data-types": r,
       "data-allow-paging": !1,
-      children: r.map((a) => {
+      children: l.map((a) => {
         if (!a)
           return null;
-        const { id: l, body: $ } = a;
+        const { id: s, body: $ } = a;
         return /* @__PURE__ */ n(
           H,
           {
             "data-pageable": !1,
             "data-expandable": c,
             "data-expanded": m,
-            "data-notification": l,
+            "data-notification": s,
             html: $
           },
-          l
+          s
         );
       })
     }
@@ -165,8 +169,8 @@ const O = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(G, { ...t }) :
   return ((t = e.theme.sizes) == null ? void 0 : t.cardinal) * 12;
 }}px;
     background-color: ${(e) => {
-  var t, s, 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" : (s = e.theme.colors) == null ? void 0 : s.primary : (f = e.theme.colors) == null ? void 0 : f.warning;
+  var t, r, 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" : (r = e.theme.colors) == null ? void 0 : r.primary : (f = e.theme.colors) == null ? void 0 : f.warning;
 }};
     color: ${(e) => {
   var t;
@@ -285,8 +289,8 @@ const O = (e, t) => e.get("seoConfiguration") ? /* @__PURE__ */ n(G, { ...t }) :
     width: 25px;
     height: auto;
     padding: ${(e) => {
-  var t, s;
-  return `calc(${(t = e.theme.sizes) == null ? void 0 : t.small}/2) ${(s = e.theme.sizes) == null ? void 0 : s.small}`;
+  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;
@@ -307,5 +311,5 @@ d.div`
     display: none;
 `;
 export {
-  le as default
+  pe as default
 };

package/notification-row-aa8b7bd7.js

@@ -0,0 +1,114 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),h=require("@emotion/react"),p=require("@emotion/styled"),a=require("./index-421eaa7e.js"),c=require("react");require("react-dom");require("react-transition-group");require("react-router-dom");const k=(e,t)=>e.get("seoConfiguration")?i.jsx(a.Empty,{...t}):null,H=()=>c.useContext(a.ComponentPropertyContext),$="closed-notifications",I={transform:{a:({children:e,...t})=>i.jsx("a",{...t,tabIndex:-1,children:e})}},L=({className:e,...t})=>{const{types:r=[],allowPaging:m=!0,notifications:q=[],expandable:f=!1,closeAriaLabel:N="",pageNextAriaLabel:O="",pagePreviousAriaLabel:B="",expandAriaLabel:A=""}=H(),[x,R]=c.useState(!1),[b,j]=c.useState([]),[o,y]=c.useState(0),s=a.useContainer(),[S,T]=c.useState();c.useEffect(()=>{s&&(a.readStorage(s,$,a.StorageMedium.Session).then((n=[])=>j(n)),a.createStorageWriter(s,$,a.StorageCategory.Functional).then(n=>T(()=>n)))},[s]),c.useEffect(()=>{s&&a.readStorage(s,$,a.StorageMedium.Session).then((n=[])=>{b.forEach(l=>n.indexOf(l)===-1&&n.push(l)),S&&S(n)})},[b,s,S]);const d=q.filter(({id:n})=>b.indexOf(n)===-1),{length:u}=d;if(!d.length)return k(s,{...t,className:a.appendClassNames(e,"humany-notification-row")});if(m){const n=d[o]||d[o+1]||d[o-1];if(!n)return k(s,{...t,className:a.appendClassNames(e,"humany-notification-row")});const{id:l,body:w}=n||{},C=()=>R(!x);return i.jsxs(z,{...t,"aria-expanded":f?x:!0,"aria-label":A,tabIndex:f?0:-1,className:a.appendClassNames(e,"humany-notification-row"),"data-pageable":u>1,"data-types":r,"data-allow-paging":m,"data-expandable":f,onKeyDown:g=>{g.key==="Enter"&&C()},onClick:C,children:[i.jsx(W,{"aria-label":N,onClick:()=>{y(d.indexOf(n)),j([...b,l])},children:i.jsx(a.SymbolBadge,{symbol:{type:"Svg",content:"close"}})}),i.jsx(E,{htmlParseInstruction:!f||x?void 0:I,"data-pageable":u>1,"data-notification":l,"data-expandable":f,"data-expanded":x,html:w}),u>1&&i.jsxs(M,{children:[i.jsx(v,{"aria-label":B,"data-disabled":o===0,onClick:g=>{g.stopPropagation(),o>0&&y(o-1)},children:i.jsx(P,{size:10,symbol:{type:"Svg",content:"caret-left"}})}),i.jsxs("span",{children:[o+1,"/",u]}),i.jsx(v,{"aria-label":O,"data-disabled":o+1>=u,onClick:g=>{g.stopPropagation(),o<u-1&&y(o+1)},children:i.jsx(P,{size:10,symbol:{type:"Svg",content:"caret-right"}})})]})]})}return i.jsx(z,{...t,className:a.appendClassNames(e,"humany-notification-row"),"data-pageable":!1,"data-types":r,"data-allow-paging":!1,children:d.map(n=>{if(!n)return null;const{id:l,body:w}=n;return i.jsx(E,{"data-pageable":!1,"data-expandable":f,"data-expanded":x,"data-notification":l,html:w},l)})})},z=p.div`
+    ${a.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,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 {
+            ${a.linkTabStyle}
+        }
+    }
+
+    ${e=>{var t;return!e["data-allow-paging"]&&h.css`
+            flex-wrap: wrap;
+
+            > div {
+                min-width: 100%;
+                margin: ${((t=e.theme.sizes)==null?void 0:t.cardinal)*2}px;
+            }
+        `}};
+
+    ${e=>h.css`
+            &:focus-visible {
+                .humany-html {
+                    ${a.borderTabStyle(e)}
+                }
+            }
+        `}
+`,E=p(a.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"]&&h.css`
+            max-width: 100%;
+
+            p {
+                display: none;
+                &:first-child {
+                    display: block;
+                    margin-bottom: 0;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        `}
+`,M=p.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;
+    }
+`,v=p(a.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 {
+        ${a.borderTabStyle}
+    }
+
+    ${e=>e["data-disabled"]?h.css`
+                  opacity: 0.8;
+              `:h.css`
+                  @media (hover) {
+                      &:hover {
+                          opacity: 0.5;
+                      }
+                  }
+              `}
+`,W=p(v)`
+    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}};
+        }
+    }
+`,P=p(a.SymbolBadge)`
+    line {
+        stroke: #ffffff;
+    }
+`;p.div`
+    display: none;
+`;exports.default=L;

package/package.json

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