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

package/notification-row-aa8b7bd7.js

@@ -1,114 +0,0 @@
-"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;