@telia-ace/knowledge-widget-ui 1.1.5 → 1.1.6

package/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("@telia-ace/widget-ui"),v=require("@telia-ace/widget-utilities"),d=require("@emotion/styled"),u=require("react"),y=require("@emotion/react"),P=({title:e="",className:t,id:a,parent:o,connection:i,type:r,target:l,href:h,children:c,connectionKey:m})=>{const p={},{name:f,params:g}=s.useRouteData();switch(r){case"default":case"guide":const{id:w,title:b}=o;let $=m||i;w!==a&&!m&&($=void 0),p.routeName=f,p.params=v.createParams({...g,guide:a,connection:$,uriName:a===w?v.formatUrl(b):v.formatUrl(e)});break;case"link":p.href=h,p.target=l;break}return n.jsx(s.Link,{className:v.appendClassNames(t,"humany-dialog-link"),...p,children:c||n.jsxs(n.Fragment,{children:[r==="link"&&n.jsx(s.Icon,{faIcon:"link"}),n.jsx("span",{children:e})]})})},ue=u.forwardRef(({className:e,dialog:t,...a},o)=>t.length?n.jsx(fe,{className:v.appendClassNames(e,"humany-dialog"),items:t,renderItem:i=>n.jsx("li",{"data-dialog":i.connection,children:n.jsx(P,{...i})},i.connection),...a,ref:o}):null),fe=d(s.List)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),s=require("@telia-ace/widget-ui"),v=require("@telia-ace/widget-utilities"),d=require("@emotion/styled"),u=require("react"),y=require("@emotion/react"),P=({title:e="",className:t,id:a,parent:i,connection:o,type:r,target:l,href:h,children:c,connectionKey:m})=>{const p={},{name:f,params:g}=s.useRouteData();switch(r){case"default":case"guide":const{id:w,title:b}=i;let $=m||o;w!==a&&!m&&($=void 0),p.routeName=f,p.params=v.createParams({...g,guide:a,connection:$,uriName:a===w?v.formatUrl(b):v.formatUrl(e)});break;case"link":p.href=h,p.target=l;break}return n.jsx(s.Link,{className:v.appendClassNames(t,"humany-dialog-link"),...p,children:c||n.jsxs(n.Fragment,{children:[r==="link"&&n.jsx(s.Icon,{faIcon:"link"}),n.jsx("span",{children:e})]})})},ge=u.forwardRef(({className:e,dialog:t,...a},i)=>t.length?n.jsx(pe,{className:v.appendClassNames(e,"humany-dialog"),items:t,renderItem:o=>n.jsx("li",{"data-dialog":o.connection,children:n.jsx(P,{...o})},o.connection),...a,ref:i}):null),pe=d(s.List)`
   ${s.list}
   a {
     min-width: 150px;
@@ -11,7 +11,7 @@
   i {
     margin: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} 0 0;
   }
-`,ge=({trigger:e,header:t,className:a,animation:o,fullScreen:i,onToggle:r,children:l,ref:h,closeButtonAriaLabel:c,...m})=>n.jsx(s.Drawer,{className:v.appendClassNames(a,"humany-drawer-list"),trigger:e,header:t,animation:o,fullScreen:i,onToggle:r,closeButtonAriaLabel:c,children:n.jsx(pe,{...m,children:l})}),pe=d(s.ItemList)`
+`,xe=({trigger:e,header:t,className:a,animation:i,fullScreen:o,onToggle:r,children:l,ref:h,closeButtonAriaLabel:c,...m})=>n.jsx(s.Drawer,{className:v.appendClassNames(a,"humany-drawer-list"),trigger:e,header:t,animation:i,fullScreen:o,onToggle:r,closeButtonAriaLabel:c,children:n.jsx(ye,{...m,children:l})}),ye=d(s.ItemList)`
   ${s.itemList}
   font-family: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.type}};
   padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.medium}};
@@ -20,13 +20,13 @@
     font-weight: 300;
     font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
   }
-`,xe=({items:e,renderItem:t,trigger:a,header:o,children:i})=>n.jsx(s.Dropdown,{className:"humany-dropdown-actions",trigger:a,children:n.jsxs(ye,{children:[!!o&&n.jsx(ve,{children:o}),e&&t&&n.jsx($e,{items:e,renderItem:t}),i]})}),ye=d.div`
+`,ve=({items:e,renderItem:t,trigger:a,header:i,children:o})=>n.jsx(s.Dropdown,{className:"humany-dropdown-actions",trigger:a,children:n.jsxs($e,{children:[!!i&&n.jsx(be,{children:i}),e&&t&&n.jsx(we,{items:e,renderItem:t}),o]})}),$e=d.div`
   background: #fff;
   border: #ccc 1px solid;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
   font-family: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.type}};
   font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
-`,ve=d.div`
+`,be=d.div`
   padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
   padding-bottom: 0;
   font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
@@ -50,7 +50,7 @@
   i {
     margin-right: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
   }
-`,$e=d(s.List)`
+`,we=d(s.List)`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -73,7 +73,7 @@
       }
     }
   }
-`,be=({trigger:e,className:t,children:a,closeButtonAriaLabel:o,...i})=>n.jsx(s.Dropdown,{className:v.appendClassNames(t,"humany-dropdown-list"),closeButtonAriaLabel:o,trigger:e,children:n.jsx(we,{...i,children:a})}),we=d(s.ItemList)`
+`,je=({trigger:e,className:t,children:a,closeButtonAriaLabel:i,...o})=>n.jsx(s.Dropdown,{className:v.appendClassNames(t,"humany-dropdown-list"),closeButtonAriaLabel:i,trigger:e,children:n.jsx(ke,{...o,children:a})}),ke=d(s.ItemList)`
   ${s.itemList}
   font-family: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.type}};
   > div {
@@ -107,12 +107,12 @@
   .humany-loader {
     opacity: ${e["data-loading"]?"1":"0"};
   }
-`,je=d(s.Icon)`
+`,Se=d(s.Icon)`
   && {
     font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.small}};
   }
   width: 1.2em;
-`,ke=d(s.Text)`
+`,ze=d(s.Text)`
   font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.medium}};
   font-weight: normal;
   line-height: 1.2em;
@@ -142,7 +142,7 @@
     flex: 1;
     font-weight: 300;
   }
-`,_=({addFavoriteTooltip:e,removeFavoriteCancelLabel:t,removeFavoriteConfirmLabel:a,removeFavoriteHeader:o,removeFavoriteLabel:i,removeFavoriteTooltip:r,id:l,isFavorite:h,guideTitle:c,buttonLabel:m="",actions:{addFavorite:p,removeFavorite:f}})=>{const g=u.useCallback(()=>{f(l)},[l,f]),w=u.useCallback(()=>{p(l)},[l,p]),b=`${h?r:e}${c?`: "${c}"`:""}`;return h?n.jsx(s.Confirm,{trigger:n.jsxs(M,{className:"humany-favorite-button",title:b,"aria-label":b,"data-favorite":"true","data-has-label":m?"true":"false","data-has-symbol":"true",children:[n.jsx(s.SymbolBadge,{size:16,symbol:{type:"Svg",content:"star-empty"}}),m&&n.jsx(s.StyledText,{children:m})]}),onConfirm:g,cancelLabel:t,confirmLabel:a,header:o,text:i}):n.jsxs(M,{className:"humany-favorite-button",title:b,"aria-label":b,onClick:w,"data-favorite":"false","data-has-label":m?"true":"false","data-has-symbol":"true",children:[n.jsx(s.SymbolBadge,{size:16,symbol:{type:"Svg",content:"star-empty"}}),m&&n.jsx(s.StyledText,{children:m})]})},M=d(Y)`
+`,_=({addFavoriteTooltip:e,removeFavoriteCancelLabel:t,removeFavoriteConfirmLabel:a,removeFavoriteHeader:i,removeFavoriteLabel:o,removeFavoriteTooltip:r,id:l,isFavorite:h,guideTitle:c,buttonLabel:m="",actions:{addFavorite:p,removeFavorite:f}})=>{const g=u.useCallback(()=>{f(l)},[l,f]),w=u.useCallback(()=>{p(l)},[l,p]),b=`${h?r:e}${c?`: "${c}"`:""}`;return h?n.jsx(s.Confirm,{trigger:n.jsxs(M,{className:"humany-favorite-button",title:b,"aria-label":b,"data-favorite":"true","data-has-label":m?"true":"false","data-has-symbol":"true",children:[n.jsx(s.SymbolBadge,{size:16,symbol:{type:"Svg",content:"star-empty"}}),m&&n.jsx(s.StyledText,{children:m})]}),onConfirm:g,cancelLabel:t,confirmLabel:a,header:i,text:o}):n.jsxs(M,{className:"humany-favorite-button",title:b,"aria-label":b,onClick:w,"data-favorite":"false","data-has-label":m?"true":"false","data-has-symbol":"true",children:[n.jsx(s.SymbolBadge,{size:16,symbol:{type:"Svg",content:"star-empty"}}),m&&n.jsx(s.StyledText,{children:m})]})},M=d(Y)`
   grid-area: favorite;
 
   &:focus-visible {
@@ -163,16 +163,16 @@
     }
   }
 
-  ${e=>{var t,a,o,i,r,l,h;return((t=e.theme.colors)==null?void 0:t.text)&&y.css`
+  ${e=>{var t,a,i,o,r,l,h;return((t=e.theme.colors)==null?void 0:t.text)&&y.css`
       svg {
         stroke: ${(a=e.theme.colors)==null?void 0:a.text};
 
         path {
-          stroke: ${(o=e.theme.colors)==null?void 0:o.text};
+          stroke: ${(i=e.theme.colors)==null?void 0:i.text};
         }
 
         ${e["data-favorite"]==="true"&&`
-          fill: ${(i=e.theme.colors)==null?void 0:i.text};
+          fill: ${(o=e.theme.colors)==null?void 0:o.text};
 
           path {
             fill: ${(r=e.theme.colors)==null?void 0:r.text};
@@ -198,7 +198,7 @@
         }
       }
     `}}
-`,Se=u.forwardRef(({onFeedback:e=()=>{},direction:t="horizontal",className:a,header:o,positive:i,negative:r,selected:l,...h},c)=>n.jsxs(Le,{className:v.appendClassNames(a,"humany-feedback"),"data-direction":t,...s.convertToStringAttributes(h),ref:c,children:[!!o&&n.jsx(ze,{children:o}),n.jsxs(O,{className:"humany-feedback-button",disabled:!!l,"data-selected":l==="positive","data-direction":t,onClick:()=>e("positive"),children:[n.jsx(s.Icon,{faIcon:"smile-o"}),n.jsx("span",{children:i})]}),n.jsxs(O,{className:"humany-feedback-button",disabled:!!l,"data-selected":l==="negative","data-direction":t,onClick:()=>e("negative"),children:[n.jsx(s.Icon,{faIcon:"frown-o"}),n.jsx("span",{children:r})]})]})),ze=d(s.StyledText)`
+`,Le=u.forwardRef(({onFeedback:e=()=>{},direction:t="horizontal",className:a,header:i,positive:o,negative:r,selected:l,...h},c)=>n.jsxs(Ce,{className:v.appendClassNames(a,"humany-feedback"),"data-direction":t,...s.convertToStringAttributes(h),ref:c,children:[!!i&&n.jsx(Ne,{children:i}),n.jsxs(O,{className:"humany-feedback-button",disabled:!!l,"data-selected":l==="positive","data-direction":t,onClick:()=>e("positive"),children:[n.jsx(s.Icon,{faIcon:"smile-o"}),n.jsx("span",{children:o})]}),n.jsxs(O,{className:"humany-feedback-button",disabled:!!l,"data-selected":l==="negative","data-direction":t,onClick:()=>e("negative"),children:[n.jsx(s.Icon,{faIcon:"frown-o"}),n.jsx("span",{children:r})]})]})),Ne=d(s.StyledText)`
   font-weight: normal;
   margin: 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
   font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
@@ -225,7 +225,7 @@
   i {
     margin: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} 0 0;
   }
-`,Le=d.div`
+`,Ce=d.div`
   ${e=>{var t;return e["data-direction"]==="vertical"&&y.css`
       > button {
         width: 100%;
@@ -234,7 +234,7 @@
         }
       }
     `}}
-`,Ne=()=>{const[e,t]=u.useState(null),a=s.useKeyPress("ArrowLeft"),o=s.useKeyPress("ArrowRight"),i=s.useKeyPress("ArrowUp"),r=s.useKeyPress("ArrowDown"),l=()=>{t(a?"left":o?"right":i?"up":r?"down":null)};return u.useEffect(l,[a,o,i,r]),e},Ce=(e,t)=>{const[a,o]=u.useState(e),i=u.useCallback(()=>setTimeout(()=>{o(e)},t),[t,o,e]);return u.useEffect(()=>{const r=i();return()=>{clearTimeout(r)}},[i]),a},K=()=>{const e=s.useContainer(),[t,a]=u.useState([]),o=e.get("favorites");u.useEffect(()=>{if(o){a(o.get());const{events:c}=e.get("$widget");return c.subscribe("widget:favorites-updated",(p,{updated:f})=>{a([...f])})}},[]);const i=c=>o?o.add(c):Promise.resolve([]),r=c=>o?o.remove(c):Promise.resolve([]),l=()=>o?o.clear():Promise.resolve([]),h=u.useCallback(c=>t.indexOf(c)>-1?r(c):i(c),[t]);return[t,u.useMemo(()=>({addFavorite:i,removeFavorite:r,clearFavorites:l,toggleFavorite:h}),[t])]},Te=()=>{const[e,t]=u.useState(!1),a=u.useRef(),o=u.useCallback(()=>t(!0),[t]),i=u.useCallback(()=>t(!1),[t]);return s.useEventListener("mouseenter",o,a.current),s.useEventListener("mouseleave",i,a.current),[e,a]},U=({format:e=s.DateFormats.YYYY_MM_DD_HH_MM,className:t="",byLabel:a="",modifiedLabel:o="",publishedLabel:i="",modifiedBy:r="",publishedBy:l="",showModified:h=!1,showPublished:c=!1,modified:m,published:p})=>{const f=c&&p?n.jsx(H,{format:e,timestamp:p}):null,g=h&&m?n.jsx(H,{format:e,timestamp:m}):null;return!f&&!g?null:n.jsxs(F,{className:v.appendClassNames(t,"humany-metadata"),children:[f&&n.jsxs(F,{className:"humany-published",children:[i,f,a&&l&&` ${a.replace("{{editor}}",l)}`]}),g&&n.jsxs(F,{className:"humany-modified",children:[f&&", ",o,g,a&&r&&` ${a.replace("{{editor}}",r)}`]})]})},H=d(s.Timestamp)`
+`,Te=()=>{const[e,t]=u.useState(null),a=s.useKeyPress("ArrowLeft"),i=s.useKeyPress("ArrowRight"),o=s.useKeyPress("ArrowUp"),r=s.useKeyPress("ArrowDown"),l=()=>{t(a?"left":i?"right":o?"up":r?"down":null)};return u.useEffect(l,[a,i,o,r]),e},Ie=(e,t)=>{const[a,i]=u.useState(e),o=u.useCallback(()=>setTimeout(()=>{i(e)},t),[t,i,e]);return u.useEffect(()=>{const r=o();return()=>{clearTimeout(r)}},[o]),a},K=()=>{const e=s.useContainer(),[t,a]=u.useState([]),i=e.get("favorites");u.useEffect(()=>{if(i){a(i.get());const{events:c}=e.get("$widget");return c.subscribe("widget:favorites-updated",(p,{updated:f})=>{a([...f])})}},[]);const o=c=>i?i.add(c):Promise.resolve([]),r=c=>i?i.remove(c):Promise.resolve([]),l=()=>i?i.clear():Promise.resolve([]),h=u.useCallback(c=>t.indexOf(c)>-1?r(c):o(c),[t]);return[t,u.useMemo(()=>({addFavorite:o,removeFavorite:r,clearFavorites:l,toggleFavorite:h}),[t])]},De=()=>{const[e,t]=u.useState(!1),a=u.useRef(),i=u.useCallback(()=>t(!0),[t]),o=u.useCallback(()=>t(!1),[t]);return s.useEventListener("mouseenter",i,a.current),s.useEventListener("mouseleave",o,a.current),[e,a]},U=({format:e=s.DateFormats.YYYY_MM_DD_HH_MM,className:t="",byLabel:a="",modifiedLabel:i="",publishedLabel:o="",modifiedBy:r="",publishedBy:l="",showModified:h=!1,showPublished:c=!1,modified:m,published:p})=>{const f=c&&p?n.jsx(H,{format:e,timestamp:p}):null,g=h&&m?n.jsx(H,{format:e,timestamp:m}):null;return!f&&!g?null:n.jsxs(F,{className:v.appendClassNames(t,"humany-metadata"),children:[f&&n.jsxs(F,{className:"humany-published",children:[o,f,a&&l&&` ${a.replace("{{editor}}",l)}`]}),g&&n.jsxs(F,{className:"humany-modified",children:[f&&", ",i,g,a&&r&&` ${a.replace("{{editor}}",r)}`]})]})},H=d(s.Timestamp)`
   &:not(:first-child) {
     margin-left: 4px;
   }
@@ -243,7 +243,7 @@
   }
 `,F=d(s.Text)`
   font-style: italic;
-`,Ie=({tags:e})=>e.filter(t=>t.symbol).length?n.jsx(Ae,{className:"humany-guide-list-tags",items:e,renderItem:({id:t,symbol:a,title:o})=>a&&n.jsx("li",{"data-tag":t,children:n.jsx(Re,{size:18,symbol:a,title:o})},t)}):null,De=u.forwardRef(({title:e,id:t,route:a,symbolSize:o,collapseUri:i,children:r},l)=>{const{params:h}=s.useRouteData();return n.jsxs(Be,{ref:l,"data-guide":t,children:[n.jsx(s.TextLink,{title:e,"aria-label":e,routeName:a,params:v.createParams({...h,uriName:i||void 0,id:void 0,guide:void 0,accordion:void 0}),text:e,children:n.jsx(s.SymbolBadge,{size:o,symbol:{type:"Svg",content:"caret-up"}})}),r]})}),Be=d.li`
+`,Be=({tags:e})=>e.filter(t=>t.symbol).length?n.jsx(Ee,{className:"humany-guide-list-tags",items:e,renderItem:({id:t,symbol:a,title:i})=>a&&n.jsx("li",{"data-tag":t,children:n.jsx(Me,{size:18,symbol:a,title:i})},t)}):null,Fe=u.forwardRef(({title:e,id:t,route:a,symbolSize:i,collapseUri:o,children:r},l)=>{const{params:h}=s.useRouteData();return n.jsxs(Pe,{ref:l,"data-guide":t,children:[n.jsx(s.TextLink,{title:e,"aria-label":e,routeName:a,params:v.createParams({...h,uriName:o||void 0,id:void 0,guide:void 0,accordion:void 0}),text:e,children:n.jsx(s.SymbolBadge,{size:i,symbol:{type:"Svg",content:"caret-up"}})}),r]})}),Pe=d.li`
   > a {
     grid-column: 1/-1;
     font-weight: bold;
@@ -253,7 +253,7 @@
   > div {
     grid-column: 1/-1;
   }
-`,Fe=u.forwardRef(({expandable:e=!1,routing:t={},paramMappers:a={},symbolSize:o=11,pageRole:i="link",pageCaret:r="down",showTags:l=!1,showFavoriteToggle:h=!1,localPaging:c=!1,onItemClick:m=()=>{},dispatch:p=()=>{},metadata:f={},pageLabel:g,className:w,children:b,items:$,renderItem:S,addFavoriteTooltip:J,removeFavoriteCancelLabel:Q,removeFavoriteConfirmLabel:X,removeFavoriteHeader:Z,removeFavoriteLabel:ee,removeFavoriteTooltip:te,searchResultsEmptyLabel:se,...A},ae)=>{const R=s.useIsTabbing(),L=u.useRef(),N=s.usePrevious($),{guide:ne="guide",page:oe="index"}=t,{guide:ie=({id:x})=>v.createParams({guide:x}),page:E=()=>v.createParams()}=a,[re,le]=K();u.useImperativeHandle(ae,()=>L.current);const D=x=>{const{id:k,title:j,tags:z,published:T,modified:C,publishedBy:I,modifiedBy:B}=x;return n.jsxs("li",{"data-guide":k,"has-metadata":(!!(f!=null&&f.showPublished)&&!!T||!!(f!=null&&f.showModified)&&!!C).toString(),children:[n.jsx(s.TextLink,{className:"humany-guide-link",title:j,"aria-label":j,routeName:ne,onClick:he=>m(he,x),params:ie(x),text:j,children:n.jsx(s.SymbolBadge,{size:o,symbol:{type:"Svg",content:e?"caret-down":"caret-right"}})}),h&&n.jsx(_,{guideTitle:j,addFavoriteTooltip:J,removeFavoriteCancelLabel:Q,removeFavoriteConfirmLabel:X,removeFavoriteHeader:Z,removeFavoriteLabel:ee,removeFavoriteTooltip:te,isFavorite:re.indexOf(k)>-1,actions:le,id:k}),l&&n.jsx(Ie,{tags:z}),n.jsx(Ee,{...f,indent:e?void 0:o,modified:C,published:T,publishedBy:I,modifiedBy:B})]},k)},ce=u.useCallback((x,k,j)=>S?S(x,k,j,D):D(x),[S,D]),de=u.useCallback(x=>{c&&(x.preventDefault(),p("page",E()))},[p,c]);u.useEffect(()=>{if(N&&N.length<$.length&&L.current){const x=L.current.querySelectorAll(".humany-guide-list > ul > li"),k=x[N.length];if(x.length===$.length&&N.length){const j=x[N.length];if(j){const z=j.querySelector(".humany-guide-link");z&&z.focus()}}else k&&new MutationObserver((z,T)=>{z.forEach(C=>{if(C.addedNodes){const I=Array.from(C.addedNodes).find(B=>B.tagName==="A");I&&v.htmlParentContains(L.current,document.activeElement)&&(R&&I.focus(),T.disconnect())}})}).observe(k,{attributes:!1,characterData:!1,childList:!0,subtree:!0,attributeOldValue:!1,characterDataOldValue:!1})}});const me=!!Object.keys(f).filter(x=>typeof f[x]<"u").length;return n.jsxs(Pe,{className:v.appendClassNames(w,"humany-guide-list"),"data-item-count":$.length,items:$,renderItem:ce,isTabbing:R,expandable:e?"true":"false","grid-items":l||h||me?"true":"false",...s.convertToStringAttributes(A),ref:L,children:[g?n.jsx(s.TextLink,{text:g,title:g,"aria-label":g,routeName:oe,role:i,params:E(),onClick:de,children:n.jsx(s.SymbolBadge,{size:o,symbol:{type:"Svg",content:`caret-${r}`}})}):null,b,!A["data-loading"]&&$.length===0&&n.jsx("p",{children:se})]})}),Pe=d(s.ItemList)`
+`,Ae=u.forwardRef(({expandable:e=!1,routing:t={},paramMappers:a={},symbolSize:i=11,pageRole:o="link",pageCaret:r="down",showTags:l=!1,showFavoriteToggle:h=!1,localPaging:c=!1,onItemClick:m=()=>{},dispatch:p=()=>{},metadata:f={},pageLabel:g,className:w,children:b,items:$,renderItem:S,addFavoriteTooltip:J,removeFavoriteCancelLabel:Q,removeFavoriteConfirmLabel:X,removeFavoriteHeader:Z,removeFavoriteLabel:ee,removeFavoriteTooltip:te,searchResultsEmptyLabel:se,...A},ae)=>{const R=s.useIsTabbing(),L=u.useRef(),N=s.usePrevious($),{guide:ne="guide",page:ie="index"}=t,{guide:oe=({id:x})=>v.createParams({guide:x}),page:E=()=>v.createParams()}=a,[re,le]=K(),ce=s.useContainer(),{events:de}=ce.get("$widget");u.useImperativeHandle(ae,()=>L.current);const D=x=>{const{id:k,title:j,tags:z,published:T,modified:C,publishedBy:I,modifiedBy:B}=x;return n.jsxs("li",{"data-guide":k,"has-metadata":(!!(f!=null&&f.showPublished)&&!!T||!!(f!=null&&f.showModified)&&!!C).toString(),children:[n.jsx(s.TextLink,{className:"humany-guide-link",title:j,"aria-label":j,routeName:ne,onClick:fe=>{m(fe,x),de.dispatch("tracking:guide-list-item-clicked",{guide:x})},params:oe(x),text:j,children:n.jsx(s.SymbolBadge,{size:i,symbol:{type:"Svg",content:e?"caret-down":"caret-right"}})}),h&&n.jsx(_,{guideTitle:j,addFavoriteTooltip:J,removeFavoriteCancelLabel:Q,removeFavoriteConfirmLabel:X,removeFavoriteHeader:Z,removeFavoriteLabel:ee,removeFavoriteTooltip:te,isFavorite:re.indexOf(k)>-1,actions:le,id:k}),l&&n.jsx(Be,{tags:z}),n.jsx(Oe,{...f,indent:e?void 0:i,modified:C,published:T,publishedBy:I,modifiedBy:B})]},k)},me=u.useCallback((x,k,j)=>S?S(x,k,j,D):D(x),[S,D]),he=u.useCallback(x=>{c&&(x.preventDefault(),p("page",E()))},[p,c]);u.useEffect(()=>{if(N&&N.length<$.length&&L.current){const x=L.current.querySelectorAll(".humany-guide-list > ul > li"),k=x[N.length];if(x.length===$.length&&N.length){const j=x[N.length];if(j){const z=j.querySelector(".humany-guide-link");z&&z.focus()}}else k&&new MutationObserver((z,T)=>{z.forEach(C=>{if(C.addedNodes){const I=Array.from(C.addedNodes).find(B=>B.tagName==="A");I&&v.htmlParentContains(L.current,document.activeElement)&&(R&&I.focus(),T.disconnect())}})}).observe(k,{attributes:!1,characterData:!1,childList:!0,subtree:!0,attributeOldValue:!1,characterDataOldValue:!1})}});const ue=!!Object.keys(f).filter(x=>typeof f[x]<"u").length;return n.jsxs(Re,{className:v.appendClassNames(w,"humany-guide-list"),"data-item-count":$.length,items:$,renderItem:me,isTabbing:R,expandable:e?"true":"false","grid-items":l||h||ue?"true":"false",...s.convertToStringAttributes(A),ref:L,children:[g?n.jsx(s.TextLink,{text:g,title:g,"aria-label":g,routeName:ie,role:o,params:E(),onClick:he,children:n.jsx(s.SymbolBadge,{size:i,symbol:{type:"Svg",content:`caret-${r}`}})}):null,b,!A["data-loading"]&&$.length===0&&n.jsx("p",{children:se})]})}),Re=d(s.ItemList)`
   ${s.itemList}
   padding: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.large}};
   overflow: auto;
@@ -371,7 +371,7 @@
       text-decoration: underline;
     }
   }
-`,Ae=d(s.List)`
+`,Ee=d(s.List)`
   ${s.list}
   display: flex;
   margin: 0 0 0 auto;
@@ -384,7 +384,7 @@
     align-items: center;
     justify-content: space-between;
   }
-`,Re=d(s.SymbolBadge)`
+`,Me=d(s.SymbolBadge)`
   display: block;
   color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
   ${e=>{if(e.symbol.type==="Uri")return`
@@ -393,17 +393,17 @@
       `;if(e.symbol.type==="FontAwesome")return`
         font-size: ${e.size}px;
       `}}
-`,Ee=d(U)`
+`,Oe=d(U)`
   grid-area: metadata;
   text-overflow: ellipsis;
   overflow: hidden;
   font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.small}};
   ${e=>{var t;return typeof e.indent=="number"&&`text-indent: calc(${(t=e.theme.sizes)==null?void 0:t.small} * 2 + ${e.indent}px);`}}
-`,Me=y.keyframes`
+`,He=y.keyframes`
   100% {
     transform: rotate(360deg);
   }
-`,Oe=y.keyframes`
+`,We=y.keyframes`
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -416,8 +416,8 @@
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-`,He=d.svg`
-  animation: ${Me} 2s linear infinite;
+`,qe=d.svg`
+  animation: ${He} 2s linear infinite;
   height: 100%;
   transform-origin: center center;
   width: 100%;
@@ -447,7 +447,7 @@
   .humany-spinner-svg {
     opacity: ${e=>e["data-loading"]?"1":"0"};
   }
-`,We=d.div`
+`,Ye=d.div`
   position: relative;
   margin: 0 auto;
   width: 100px;
@@ -456,14 +456,14 @@
     display: block;
     padding-top: 100%;
   }
-`,qe=d.circle`
+`,_e=d.circle`
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
-  animation: ${Oe} 1.5s ease-in-out infinite;
+  animation: ${We} 1.5s ease-in-out infinite;
   stroke-linecap: round;
   stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
   stroke-width: 2px;
-`,G=({loading:e=!1})=>n.jsx(V,{className:"humany-loader","data-loading":e,children:n.jsx(We,{className:"humany-spinner",children:n.jsx(He,{className:"humany-spinner-svg",viewBox:"25 25 50 50",children:n.jsx(qe,{cx:"50",cy:"50",r:"20",fill:"none","stroke-width":"2","stroke-miterlimit":"10"})})})}),Ye=({className:e,showHeader:t,notificationList:a,loading:o,...i})=>{const[r,l]=u.useState(null),{id:h,title:c,symbol:m,notifications:p=[],defaultHeaderOptions:f={visible:!0}}=a||{};return!p.length&&!o?null:n.jsx(Ke,{...i,"data-loading":o,"data-show-header":typeof t=="boolean"?t:f.visible,className:v.appendClassNames(e,"humany-notification-list"),"data-notification-category":h,header:c,symbol:m,items:p,renderItem:({id:g,title:w,body:b,modified:$,expandable:S})=>n.jsx(Ue,{"data-notification":g,"data-expanded":S?r===g:!0,children:S?n.jsxs(n.Fragment,{children:[n.jsxs(_e,{title:w,"aria-label":w,"aria-expanded":r===g,onClick:()=>l(r===g?null:g),children:[n.jsx("span",{children:w}),n.jsx(Ve,{size:11,symbol:{type:"Svg",content:`caret-${r===g?"up":"down"}`}})]}),n.jsx(W,{html:b}),$&&n.jsx(Ge,{format:s.DateFormats.YYYY_MM_DD,timestamp:$})]}):n.jsx(W,{html:b})},g),children:n.jsx(G,{loading:o})})},_e=d(s.Button)`
+`,G=({loading:e=!1})=>n.jsx(V,{className:"humany-loader","data-loading":e,children:n.jsx(Ye,{className:"humany-spinner",children:n.jsx(qe,{className:"humany-spinner-svg",viewBox:"25 25 50 50",children:n.jsx(_e,{cx:"50",cy:"50",r:"20",fill:"none","stroke-width":"2","stroke-miterlimit":"10"})})})}),Ke=({className:e,showHeader:t,notificationList:a,loading:i,...o})=>{const[r,l]=u.useState(null),{id:h,title:c,symbol:m,notifications:p=[],defaultHeaderOptions:f={visible:!0}}=a||{};return!p.length&&!i?null:n.jsx(Ve,{...o,"data-loading":i,"data-show-header":typeof t=="boolean"?t:f.visible,className:v.appendClassNames(e,"humany-notification-list"),"data-notification-category":h,header:c,symbol:m,items:p,renderItem:({id:g,title:w,body:b,modified:$,expandable:S})=>n.jsx(Ge,{"data-notification":g,"data-expanded":S?r===g:!0,children:S?n.jsxs(n.Fragment,{children:[n.jsxs(Ue,{title:w,"aria-label":w,"aria-expanded":r===g,onClick:()=>l(r===g?null:g),children:[n.jsx("span",{children:w}),n.jsx(Je,{size:11,symbol:{type:"Svg",content:`caret-${r===g?"up":"down"}`}})]}),n.jsx(W,{html:b}),$&&n.jsx(Qe,{format:s.DateFormats.YYYY_MM_DD,timestamp:$})]}):n.jsx(W,{html:b})},g),children:n.jsx(G,{loading:i})})},Ue=d(s.Button)`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -488,7 +488,7 @@
       text-decoration: underline;
     }
   }
-`,Ke=d(s.ItemList)`
+`,Ve=d(s.ItemList)`
   ${q}
   ${s.itemList}
   overflow: hidden;
@@ -514,12 +514,12 @@
   p {
     white-space: normal;
   }
-`,Ue=d.li`
+`,Ge=d.li`
   .humany-paragraph {
     display: none;
     &:not(:only-child) {
-      ${e=>{var t,a,o;return((t=e.theme.sizes)==null?void 0:t.cardinal)&&((a=e.theme.sizes)==null?void 0:a.normal)&&y.css`
-          margin: ${(o=e.theme.sizes)==null?void 0:o.normal} 0;
+      ${e=>{var t,a,i;return((t=e.theme.sizes)==null?void 0:t.cardinal)&&((a=e.theme.sizes)==null?void 0:a.normal)&&y.css`
+          margin: ${(i=e.theme.sizes)==null?void 0:i.normal} 0;
         `}}
     }
   }
@@ -535,12 +535,12 @@
     font-weight: 300;
     color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.accent}};
   }
-`,Ve=d(s.SymbolBadge)`
+`,Je=d(s.SymbolBadge)`
   margin: 0 0 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}};
   line {
     stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.primary}};
   }
-`,Ge=d(s.Timestamp)`
+`,Qe=d(s.Timestamp)`
   font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.small}};
   font-weight: 300;
-`,Je=e=>new RegExp("^#","i").test(e),Qe=e=>({children:t,...a})=>{const{implementation:o,name:i}=e.get("$widget"),{href:r=""}=a;if(Je(r))return n.jsx(s.AnchorLink,{smooth:!0,to:r,children:t});const l=o.bindings.map(m=>m.replace(/\./g,"\\.")).join("|"),c=new RegExp(`^((http[s]?:)?//)?(${l})/([^\\s]+)`).exec(r);if(c&&c.length>=4){const m=c[4];if(o.widgets.get(m)&&!m.startsWith("blob?")&&!m.startsWith(i))return n.jsx(s.WidgetLink,{widgetName:m,children:t})}return n.jsx("a",{...a,children:t})},Xe=(e,t=[])=>({transform:{a:a=>{const{children:o,...i}=a,r=i["data-target"];if(r&&t.length){const h=t.find(({connection:c})=>c===r);if(h)return n.jsx(P,{...h,children:o})}return Qe(e)(a)}}});exports.AccordionListItem=De;exports.DialogLink=P;exports.DialogList=ue;exports.DrawerList=ge;exports.DropdownActions=xe;exports.DropdownList=be;exports.FavoriteButton=_;exports.Feedback=Se;exports.GuideList=Fe;exports.Loader=G;exports.LoaderWrapper=V;exports.Metadata=U;exports.NotificationList=Ye;exports.SmallCaret=je;exports.StyledHeaderText=ke;exports.StyledListButton=Y;exports.guideRenderInstructions=Xe;exports.loadingOpacity=q;exports.useArrowKeys=Ne;exports.useDebounce=Ce;exports.useFavorites=K;exports.useHover=Te;Object.keys(s).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>s[e]})});
+`,Xe=e=>new RegExp("^#","i").test(e),Ze=e=>({children:t,...a})=>{const{implementation:i,name:o}=e.get("$widget"),{href:r=""}=a;if(Xe(r))return n.jsx(s.AnchorLink,{smooth:!0,to:r,children:t});const l=i.bindings.map(m=>m.replace(/\./g,"\\.")).join("|"),c=new RegExp(`^((http[s]?:)?//)?(${l})/([^\\s]+)`).exec(r);if(c&&c.length>=4){const m=c[4];if(i.widgets.get(m)&&!m.startsWith("blob?")&&!m.startsWith(o))return n.jsx(s.WidgetLink,{widgetName:m,children:t})}return n.jsx("a",{...a,children:t})},et=(e,t=[])=>({transform:{a:a=>{const{children:i,...o}=a,r=o["data-target"];if(r&&t.length){const h=t.find(({connection:c})=>c===r);if(h)return n.jsx(P,{...h,children:i})}return Ze(e)(a)}}});exports.AccordionListItem=Fe;exports.DialogLink=P;exports.DialogList=ge;exports.DrawerList=xe;exports.DropdownActions=ve;exports.DropdownList=je;exports.FavoriteButton=_;exports.Feedback=Le;exports.GuideList=Ae;exports.Loader=G;exports.LoaderWrapper=V;exports.Metadata=U;exports.NotificationList=Ke;exports.SmallCaret=Se;exports.StyledHeaderText=ze;exports.StyledListButton=Y;exports.guideRenderInstructions=et;exports.loadingOpacity=q;exports.useArrowKeys=Te;exports.useDebounce=Ie;exports.useFavorites=K;exports.useHover=De;Object.keys(s).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>s[e]})});

package/index.mjs

@@ -1,11 +1,11 @@
 import { jsx as o, jsxs as p, Fragment as se } from "react/jsx-runtime";
-import { useRouteData as re, Link as Pe, Icon as P, List as G, list as le, invertedHoverButton as ce, ItemList as j, itemList as R, Drawer as Be, Dropdown as de, headingElement as K, Text as me, Button as U, paddedBorderTabStyle as Z, Confirm as je, SymbolBadge as S, StyledText as _, convertToStringAttributes as he, useKeyPress as M, useContainer as Re, useEventListener as ee, Timestamp as fe, DateFormats as ue, TextLink as V, useIsTabbing as We, usePrevious as Ee, borderTabStyle as q, Paragraph as He, genericHtml as Oe, AnchorLink as Ye, WidgetLink as _e } from "@telia-ace/widget-ui";
+import { useRouteData as re, Link as Re, Icon as P, List as G, list as le, invertedHoverButton as ce, ItemList as j, itemList as R, Drawer as We, Dropdown as de, headingElement as K, Text as me, Button as U, paddedBorderTabStyle as Z, Confirm as Ee, SymbolBadge as S, StyledText as _, convertToStringAttributes as he, useKeyPress as M, useContainer as fe, useEventListener as ee, Timestamp as ue, DateFormats as ge, TextLink as V, useIsTabbing as He, usePrevious as Oe, borderTabStyle as q, Paragraph as Ye, genericHtml as _e, AnchorLink as Ve, WidgetLink as qe } from "@telia-ace/widget-ui";
 export * from "@telia-ace/widget-ui";
-import { createParams as B, formatUrl as te, appendClassNames as z, htmlParentContains as Ve } from "@telia-ace/widget-utilities";
+import { createParams as B, formatUrl as te, appendClassNames as z, htmlParentContains as Ge } from "@telia-ace/widget-utilities";
 import c from "@emotion/styled";
-import { forwardRef as W, useCallback as k, useState as F, useEffect as E, useMemo as qe, useRef as ge, useImperativeHandle as Ge } from "react";
-import { css as y, keyframes as pe } from "@emotion/react";
-const ye = ({
+import { forwardRef as W, useCallback as k, useState as F, useEffect as E, useMemo as Ke, useRef as pe, useImperativeHandle as Ue } from "react";
+import { css as y, keyframes as ye } from "@emotion/react";
+const $e = ({
   title: t = "",
   className: e,
   id: n,
@@ -35,7 +35,7 @@ const ye = ({
       break;
   }
   return /* @__PURE__ */ o(
-    Pe,
+    Re,
     {
       className: z(e, "humany-dialog-link"),
       ...u,
@@ -45,18 +45,18 @@ const ye = ({
       ] })
     }
   );
-}, At = W(
+}, Pt = W(
   ({ className: t, dialog: e, ...n }, a) => e.length ? /* @__PURE__ */ o(
-    Ke,
+    Je,
     {
       className: z(t, "humany-dialog"),
       items: e,
-      renderItem: (i) => /* @__PURE__ */ o("li", { "data-dialog": i.connection, children: /* @__PURE__ */ o(ye, { ...i }) }, i.connection),
+      renderItem: (i) => /* @__PURE__ */ o("li", { "data-dialog": i.connection, children: /* @__PURE__ */ o($e, { ...i }) }, i.connection),
       ...n,
       ref: a
     }
   ) : null
-), Ke = c(G)`
+), Je = c(G)`
   ${le}
   a {
     min-width: 150px;
@@ -79,7 +79,7 @@ const ye = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }} 0 0;
   }
-`, Mt = ({
+`, Bt = ({
   trigger: t,
   header: e,
   className: n,
@@ -91,7 +91,7 @@ const ye = ({
   closeButtonAriaLabel: l,
   ...d
 }) => /* @__PURE__ */ o(
-  Be,
+  We,
   {
     className: z(n, "humany-drawer-list"),
     trigger: t,
@@ -100,9 +100,9 @@ const ye = ({
     fullScreen: i,
     onToggle: s,
     closeButtonAriaLabel: l,
-    children: /* @__PURE__ */ o(Ue, { ...d, children: r })
+    children: /* @__PURE__ */ o(Qe, { ...d, children: r })
   }
-), Ue = c(j)`
+), Qe = c(j)`
   ${R}
   font-family: ${(t) => {
   var e;
@@ -120,17 +120,17 @@ const ye = ({
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
   }
-`, Pt = ({
+`, jt = ({
   items: t,
   renderItem: e,
   trigger: n,
   header: a,
   children: i
-}) => /* @__PURE__ */ o(de, { className: "humany-dropdown-actions", trigger: n, children: /* @__PURE__ */ p(Je, { children: [
-  !!a && /* @__PURE__ */ o(Qe, { children: a }),
-  t && e && /* @__PURE__ */ o(Xe, { items: t, renderItem: e }),
+}) => /* @__PURE__ */ o(de, { className: "humany-dropdown-actions", trigger: n, children: /* @__PURE__ */ p(Xe, { children: [
+  !!a && /* @__PURE__ */ o(Ze, { children: a }),
+  t && e && /* @__PURE__ */ o(et, { items: t, renderItem: e }),
   i
-] }) }), Je = c.div`
+] }) }), Xe = c.div`
   background: #fff;
   border: #ccc 1px solid;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
@@ -142,7 +142,7 @@ const ye = ({
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
-`, Qe = c.div`
+`, Ze = c.div`
   padding: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
@@ -175,7 +175,7 @@ const ye = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
   }
-`, Xe = c(G)`
+`, et = c(G)`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -210,7 +210,7 @@ const ye = ({
       }
     }
   }
-`, Bt = ({
+`, Rt = ({
   trigger: t,
   className: e,
   children: n,
@@ -222,9 +222,9 @@ const ye = ({
     className: z(e, "humany-dropdown-list"),
     closeButtonAriaLabel: a,
     trigger: t,
-    children: /* @__PURE__ */ o(Ze, { ...i, children: n })
+    children: /* @__PURE__ */ o(tt, { ...i, children: n })
   }
-), Ze = c(j)`
+), tt = c(j)`
   ${R}
   font-family: ${(t) => {
   var e;
@@ -260,7 +260,7 @@ const ye = ({
       }
     }
   }
-`, et = (t) => y`
+`, nt = (t) => y`
   ${t["data-loading"] && "position: relative;"};
   ${t["data-loading"] && "min-height: 150px;"}
   > * {
@@ -270,7 +270,7 @@ const ye = ({
   .humany-loader {
     opacity: ${t["data-loading"] ? "1" : "0"};
   }
-`, jt = c(P)`
+`, Wt = c(P)`
   && {
     font-size: ${(t) => {
   var e;
@@ -278,7 +278,7 @@ const ye = ({
 }};
   }
   width: 1.2em;
-`, Rt = c(me)`
+`, Et = c(me)`
   font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -289,7 +289,7 @@ const ye = ({
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
-`, tt = c(U)`
+`, at = c(U)`
   display: flex;
   align-items: center;
 
@@ -317,7 +317,7 @@ const ye = ({
     flex: 1;
     font-weight: 300;
   }
-`, nt = ({
+`, ot = ({
   addFavoriteTooltip: t,
   removeFavoriteCancelLabel: e,
   removeFavoriteConfirmLabel: n,
@@ -336,7 +336,7 @@ const ye = ({
     u(r);
   }, [r, u]), v = `${m ? s : t}${l ? `: "${l}"` : ""}`;
   return m ? /* @__PURE__ */ o(
-    je,
+    Ee,
     {
       trigger: /* @__PURE__ */ p(
         ne,
@@ -381,7 +381,7 @@ const ye = ({
       ]
     }
   );
-}, ne = c(tt)`
+}, ne = c(at)`
   grid-area: favorite;
 
   &:focus-visible {
@@ -443,7 +443,7 @@ const ye = ({
       }
     `;
 }}
-`, Wt = W(
+`, Ht = W(
   ({
     onFeedback: t = () => {
     },
@@ -455,14 +455,14 @@ const ye = ({
     selected: r,
     ...m
   }, l) => /* @__PURE__ */ p(
-    ot,
+    st,
     {
       className: z(n, "humany-feedback"),
       "data-direction": e,
       ...he(m),
       ref: l,
       children: [
-        !!a && /* @__PURE__ */ o(at, { children: a }),
+        !!a && /* @__PURE__ */ o(it, { children: a }),
         /* @__PURE__ */ p(
           ae,
           {
@@ -494,7 +494,7 @@ const ye = ({
       ]
     }
   )
-), at = c(_)`
+), it = c(_)`
   font-weight: normal;
   margin: 0 0 ${(t) => {
   var e;
@@ -547,7 +547,7 @@ const ye = ({
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }} 0 0;
   }
-`, ot = c.div`
+`, st = c.div`
   ${(t) => {
   var e;
   return t["data-direction"] === "vertical" && y`
@@ -559,12 +559,12 @@ const ye = ({
       }
     `;
 }}
-`, Et = () => {
+`, Ot = () => {
   const [t, e] = F(null), n = M("ArrowLeft"), a = M("ArrowRight"), i = M("ArrowUp"), s = M("ArrowDown");
   return E(() => {
     e(n ? "left" : a ? "right" : i ? "up" : s ? "down" : null);
   }, [n, a, i, s]), t;
-}, Ht = (t, e) => {
+}, Yt = (t, e) => {
   const [n, a] = F(t), i = k(() => setTimeout(() => {
     a(t);
   }, e), [e, a, t]);
@@ -578,8 +578,8 @@ const ye = ({
     [i]
     // Only re-call effect if value or delay changes
   ), n;
-}, it = () => {
-  const t = Re(), [e, n] = F([]), a = t.get("favorites");
+}, rt = () => {
+  const t = fe(), [e, n] = F([]), a = t.get("favorites");
   E(() => {
     if (a) {
       n(a.get());
@@ -599,7 +599,7 @@ const ye = ({
   );
   return [
     e,
-    qe(
+    Ke(
       () => ({
         addFavorite: i,
         removeFavorite: s,
@@ -610,11 +610,11 @@ const ye = ({
       [e]
     )
   ];
-}, Ot = () => {
-  const [t, e] = F(!1), n = ge(), a = k(() => e(!0), [e]), i = k(() => e(!1), [e]);
+}, _t = () => {
+  const [t, e] = F(!1), n = pe(), a = k(() => e(!0), [e]), i = k(() => e(!1), [e]);
   return ee("mouseenter", a, n.current), ee("mouseleave", i, n.current), [t, n];
-}, st = ({
-  format: t = ue.YYYY_MM_DD_HH_MM,
+}, lt = ({
+  format: t = ge.YYYY_MM_DD_HH_MM,
   className: e = "",
   byLabel: n = "",
   modifiedLabel: a = "",
@@ -640,7 +640,7 @@ const ye = ({
       n && s && ` ${n.replace("{{editor}}", s)}`
     ] })
   ] });
-}, oe = c(fe)`
+}, oe = c(ue)`
   &:not(:first-child) {
     margin-left: 4px;
   }
@@ -649,16 +649,16 @@ const ye = ({
   }
 `, Y = c(me)`
   font-style: italic;
-`, rt = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ o(
-  dt,
+`, ct = ({ tags: t }) => t.filter((e) => e.symbol).length ? /* @__PURE__ */ o(
+  ht,
   {
     className: "humany-guide-list-tags",
     items: t,
-    renderItem: ({ id: e, symbol: n, title: a }) => n && /* @__PURE__ */ o("li", { "data-tag": e, children: /* @__PURE__ */ o(mt, { size: 18, symbol: n, title: a }) }, e)
+    renderItem: ({ id: e, symbol: n, title: a }) => n && /* @__PURE__ */ o("li", { "data-tag": e, children: /* @__PURE__ */ o(ft, { size: 18, symbol: n, title: a }) }, e)
   }
-) : null, Yt = W(({ title: t, id: e, route: n, symbolSize: a, collapseUri: i, children: s }, r) => {
+) : null, Vt = W(({ title: t, id: e, route: n, symbolSize: a, collapseUri: i, children: s }, r) => {
   const { params: m } = re();
-  return /* @__PURE__ */ p(lt, { ref: r, "data-guide": e, children: [
+  return /* @__PURE__ */ p(dt, { ref: r, "data-guide": e, children: [
     /* @__PURE__ */ o(
       V,
       {
@@ -684,7 +684,7 @@ const ye = ({
     ),
     s
   ] });
-}), lt = c.li`
+}), dt = c.li`
   > a {
     grid-column: 1/-1;
     font-weight: bold;
@@ -697,7 +697,7 @@ const ye = ({
   > div {
     grid-column: 1/-1;
   }
-`, _t = W(
+`, qt = W(
   ({
     expandable: t = !1,
     routing: e = {},
@@ -718,20 +718,20 @@ const ye = ({
     children: v,
     items: $,
     renderItem: N,
-    addFavoriteTooltip: $e,
-    removeFavoriteCancelLabel: ve,
-    removeFavoriteConfirmLabel: xe,
-    removeFavoriteHeader: be,
-    removeFavoriteLabel: we,
-    removeFavoriteTooltip: ke,
-    searchResultsEmptyLabel: ze,
+    addFavoriteTooltip: ve,
+    removeFavoriteCancelLabel: xe,
+    removeFavoriteConfirmLabel: be,
+    removeFavoriteHeader: we,
+    removeFavoriteLabel: ke,
+    removeFavoriteTooltip: ze,
+    searchResultsEmptyLabel: Se,
     ...J
-  }, Se) => {
-    const Q = We(), I = ge(), T = Ee($), { guide: Ne = "guide", page: Le = "index" } = e, {
-      guide: Ie = ({ id: g }) => B({ guide: g }),
+  }, Ne) => {
+    const Q = He(), I = pe(), T = Oe($), { guide: Le = "guide", page: Ie = "index" } = e, {
+      guide: Te = ({ id: g }) => B({ guide: g }),
       page: X = () => B()
-    } = n, [Te, De] = it();
-    Ge(Se, () => I.current);
+    } = n, [De, Fe] = rt(), Ce = fe(), { events: Ae } = Ce.get("$widget");
+    Ue(Ne, () => I.current);
     const H = (g) => {
       const { id: w, title: b, tags: L, published: C, modified: D, publishedBy: A, modifiedBy: O } = g;
       return /* @__PURE__ */ p(
@@ -746,9 +746,13 @@ const ye = ({
                 className: "humany-guide-link",
                 title: b,
                 "aria-label": b,
-                routeName: Ne,
-                onClick: (Me) => d(Me, g),
-                params: Ie(g),
+                routeName: Le,
+                onClick: (je) => {
+                  d(je, g), Ae.dispatch("tracking:guide-list-item-clicked", {
+                    guide: g
+                  });
+                },
+                params: Te(g),
                 text: b,
                 children: /* @__PURE__ */ o(
                   S,
@@ -763,23 +767,23 @@ const ye = ({
               }
             ),
             m && /* @__PURE__ */ o(
-              nt,
+              ot,
               {
                 guideTitle: b,
-                addFavoriteTooltip: $e,
-                removeFavoriteCancelLabel: ve,
-                removeFavoriteConfirmLabel: xe,
-                removeFavoriteHeader: be,
-                removeFavoriteLabel: we,
-                removeFavoriteTooltip: ke,
-                isFavorite: Te.indexOf(w) > -1,
-                actions: De,
+                addFavoriteTooltip: ve,
+                removeFavoriteCancelLabel: xe,
+                removeFavoriteConfirmLabel: be,
+                removeFavoriteHeader: we,
+                removeFavoriteLabel: ke,
+                removeFavoriteTooltip: ze,
+                isFavorite: De.indexOf(w) > -1,
+                actions: Fe,
                 id: w
               }
             ),
-            r && /* @__PURE__ */ o(rt, { tags: L }),
+            r && /* @__PURE__ */ o(ct, { tags: L }),
             /* @__PURE__ */ o(
-              ht,
+              ut,
               {
                 ...h,
                 indent: t ? void 0 : a,
@@ -793,10 +797,10 @@ const ye = ({
         },
         w
       );
-    }, Fe = k(
+    }, Me = k(
       (g, w, b) => N ? N(g, w, b, H) : H(g),
       [N, H]
-    ), Ce = k(
+    ), Pe = k(
       (g) => {
         l && (g.preventDefault(), u("page", X()));
       },
@@ -822,7 +826,7 @@ const ye = ({
                 const A = Array.from(
                   D.addedNodes
                 ).find((O) => O.tagName === "A");
-                A && Ve(I.current, document.activeElement) && (Q && A.focus(), C.disconnect());
+                A && Ge(I.current, document.activeElement) && (Q && A.focus(), C.disconnect());
               }
             });
           }).observe(w, {
@@ -835,19 +839,19 @@ const ye = ({
           });
       }
     });
-    const Ae = !!Object.keys(h).filter(
+    const Be = !!Object.keys(h).filter(
       (g) => typeof h[g] < "u"
     ).length;
     return /* @__PURE__ */ p(
-      ct,
+      mt,
       {
         className: z(x, "humany-guide-list"),
         "data-item-count": $.length,
         items: $,
-        renderItem: Fe,
+        renderItem: Me,
         isTabbing: Q,
         expandable: t ? "true" : "false",
-        "grid-items": r || m || Ae ? "true" : "false",
+        "grid-items": r || m || Be ? "true" : "false",
         ...he(J),
         ref: I,
         children: [
@@ -857,10 +861,10 @@ const ye = ({
               text: f,
               title: f,
               "aria-label": f,
-              routeName: Le,
+              routeName: Ie,
               role: i,
               params: X(),
-              onClick: Ce,
+              onClick: Pe,
               children: /* @__PURE__ */ o(
                 S,
                 {
@@ -871,12 +875,12 @@ const ye = ({
             }
           ) : null,
           v,
-          !J["data-loading"] && $.length === 0 && /* @__PURE__ */ o("p", { children: ze })
+          !J["data-loading"] && $.length === 0 && /* @__PURE__ */ o("p", { children: Se })
         ]
       }
     );
   }
-), ct = c(j)`
+), mt = c(j)`
   ${R}
   padding: ${(t) => {
   var e;
@@ -1027,7 +1031,7 @@ const ye = ({
       text-decoration: underline;
     }
   }
-`, dt = c(G)`
+`, ht = c(G)`
   ${le}
   display: flex;
   margin: 0 0 0 auto;
@@ -1043,7 +1047,7 @@ const ye = ({
     align-items: center;
     justify-content: space-between;
   }
-`, mt = c(S)`
+`, ft = c(S)`
   display: block;
   color: ${(t) => {
   var e;
@@ -1060,7 +1064,7 @@ const ye = ({
         font-size: ${t.size}px;
       `;
 }}
-`, ht = c(st)`
+`, ut = c(lt)`
   grid-area: metadata;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -1072,11 +1076,11 @@ const ye = ({
   var e;
   return typeof t.indent == "number" && `text-indent: calc(${(e = t.theme.sizes) == null ? void 0 : e.small} * 2 + ${t.indent}px);`;
 }}
-`, ft = pe`
+`, gt = ye`
   100% {
     transform: rotate(360deg);
   }
-`, ut = pe`
+`, pt = ye`
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -1089,8 +1093,8 @@ const ye = ({
     stroke-dasharray: 89, 200;
     stroke-dashoffset: -124px;
   }
-`, gt = c.svg`
-  animation: ${ft} 2s linear infinite;
+`, yt = c.svg`
+  animation: ${gt} 2s linear infinite;
   height: 100%;
   transform-origin: center center;
   width: 100%;
@@ -1101,7 +1105,7 @@ const ye = ({
   right: 0;
   margin: auto;
   transition: 200ms ease-out opacity;
-`, pt = c.div`
+`, $t = c.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1120,7 +1124,7 @@ const ye = ({
   .humany-spinner-svg {
     opacity: ${(t) => t["data-loading"] ? "1" : "0"};
   }
-`, yt = c.div`
+`, vt = c.div`
   position: relative;
   margin: 0 auto;
   width: 100px;
@@ -1129,18 +1133,18 @@ const ye = ({
     display: block;
     padding-top: 100%;
   }
-`, $t = c.circle`
+`, xt = c.circle`
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
-  animation: ${ut} 1.5s ease-in-out infinite;
+  animation: ${pt} 1.5s ease-in-out infinite;
   stroke-linecap: round;
   stroke: ${(t) => {
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.primary;
 }};
   stroke-width: 2px;
-`, vt = ({ loading: t = !1 }) => /* @__PURE__ */ o(pt, { className: "humany-loader", "data-loading": t, children: /* @__PURE__ */ o(yt, { className: "humany-spinner", children: /* @__PURE__ */ o(gt, { className: "humany-spinner-svg", viewBox: "25 25 50 50", children: /* @__PURE__ */ o(
-  $t,
+`, bt = ({ loading: t = !1 }) => /* @__PURE__ */ o($t, { className: "humany-loader", "data-loading": t, children: /* @__PURE__ */ o(vt, { className: "humany-spinner", children: /* @__PURE__ */ o(yt, { className: "humany-spinner-svg", viewBox: "25 25 50 50", children: /* @__PURE__ */ o(
+  xt,
   {
     cx: "50",
     cy: "50",
@@ -1149,7 +1153,7 @@ const ye = ({
     "stroke-width": "2",
     "stroke-miterlimit": "10"
   }
-) }) }) }), Vt = ({
+) }) }) }), Gt = ({
   className: t,
   showHeader: e,
   notificationList: n,
@@ -1164,7 +1168,7 @@ const ye = ({
     defaultHeaderOptions: h = { visible: !0 }
   } = n || {};
   return !u.length && !a ? null : /* @__PURE__ */ o(
-    bt,
+    kt,
     {
       ...i,
       "data-loading": a,
@@ -1175,13 +1179,13 @@ const ye = ({
       symbol: d,
       items: u,
       renderItem: ({ id: f, title: x, body: v, modified: $, expandable: N }) => /* @__PURE__ */ o(
-        wt,
+        zt,
         {
           "data-notification": f,
           "data-expanded": N ? s === f : !0,
           children: N ? /* @__PURE__ */ p(se, { children: [
             /* @__PURE__ */ p(
-              xt,
+              wt,
               {
                 title: x,
                 "aria-label": x,
@@ -1190,7 +1194,7 @@ const ye = ({
                 children: [
                   /* @__PURE__ */ o("span", { children: x }),
                   /* @__PURE__ */ o(
-                    kt,
+                    St,
                     {
                       size: 11,
                       symbol: {
@@ -1204,9 +1208,9 @@ const ye = ({
             ),
             /* @__PURE__ */ o(ie, { html: v }),
             $ && /* @__PURE__ */ o(
-              zt,
+              Nt,
               {
-                format: ue.YYYY_MM_DD,
+                format: ge.YYYY_MM_DD,
                 timestamp: $
               }
             )
@@ -1214,10 +1218,10 @@ const ye = ({
         },
         f
       ),
-      children: /* @__PURE__ */ o(vt, { loading: a })
+      children: /* @__PURE__ */ o(bt, { loading: a })
     }
   );
-}, xt = c(U)`
+}, wt = c(U)`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1254,8 +1258,8 @@ const ye = ({
       text-decoration: underline;
     }
   }
-`, bt = c(j)`
-  ${et}
+`, kt = c(j)`
+  ${nt}
   ${R}
   overflow: hidden;
   justify-content: flex-start;
@@ -1279,14 +1283,14 @@ const ye = ({
       text-decoration: underline;
     }
   }
-`, ie = c(He)`
-  ${Oe}
+`, ie = c(Ye)`
+  ${_e}
   font-weight: 300;
 
   p {
     white-space: normal;
   }
-`, wt = c.li`
+`, zt = c.li`
   .humany-paragraph {
     display: none;
     &:not(:only-child) {
@@ -1313,7 +1317,7 @@ const ye = ({
   return (e = t.theme.colors) == null ? void 0 : e.accent;
 }};
   }
-`, kt = c(S)`
+`, St = c(S)`
   margin: 0 0 0 ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
@@ -1324,29 +1328,29 @@ const ye = ({
   return (e = t.theme.colors) == null ? void 0 : e.primary;
 }};
   }
-`, zt = c(fe)`
+`, Nt = c(ue)`
   font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.small;
 }};
   font-weight: 300;
-`, St = (t) => new RegExp("^#", "i").test(t), Nt = (t) => ({ children: e, ...n }) => {
+`, Lt = (t) => new RegExp("^#", "i").test(t), It = (t) => ({ children: e, ...n }) => {
   const {
     implementation: a,
     name: i
   } = t.get("$widget"), { href: s = "" } = n;
-  if (St(s))
-    return /* @__PURE__ */ o(Ye, { smooth: !0, to: s, children: e });
+  if (Lt(s))
+    return /* @__PURE__ */ o(Ve, { smooth: !0, to: s, children: e });
   const r = a.bindings.map((d) => d.replace(/\./g, "\\.")).join("|"), l = new RegExp(
     `^((http[s]?:)?//)?(${r})/([^\\s]+)`
   ).exec(s);
   if (l && l.length >= 4) {
     const d = l[4];
     if (a.widgets.get(d) && !d.startsWith("blob?") && !d.startsWith(i))
-      return /* @__PURE__ */ o(_e, { widgetName: d, children: e });
+      return /* @__PURE__ */ o(qe, { widgetName: d, children: e });
   }
   return /* @__PURE__ */ o("a", { ...n, children: e });
-}, qt = (t, e = []) => ({
+}, Kt = (t, e = []) => ({
   transform: {
     a: (n) => {
       const { children: a, ...i } = n, s = i["data-target"];
@@ -1355,33 +1359,33 @@ const ye = ({
           ({ connection: l }) => l === s
         );
         if (m)
-          return /* @__PURE__ */ o(ye, { ...m, children: a });
+          return /* @__PURE__ */ o($e, { ...m, children: a });
       }
-      return Nt(t)(n);
+      return It(t)(n);
     }
   }
 });
 export {
-  Yt as AccordionListItem,
-  ye as DialogLink,
-  At as DialogList,
-  Mt as DrawerList,
-  Pt as DropdownActions,
-  Bt as DropdownList,
-  nt as FavoriteButton,
-  Wt as Feedback,
-  _t as GuideList,
-  vt as Loader,
-  pt as LoaderWrapper,
-  st as Metadata,
-  Vt as NotificationList,
-  jt as SmallCaret,
-  Rt as StyledHeaderText,
-  tt as StyledListButton,
-  qt as guideRenderInstructions,
-  et as loadingOpacity,
-  Et as useArrowKeys,
-  Ht as useDebounce,
-  it as useFavorites,
-  Ot as useHover
+  Vt as AccordionListItem,
+  $e as DialogLink,
+  Pt as DialogList,
+  Bt as DrawerList,
+  jt as DropdownActions,
+  Rt as DropdownList,
+  ot as FavoriteButton,
+  Ht as Feedback,
+  qt as GuideList,
+  bt as Loader,
+  $t as LoaderWrapper,
+  lt as Metadata,
+  Gt as NotificationList,
+  Wt as SmallCaret,
+  Et as StyledHeaderText,
+  at as StyledListButton,
+  Kt as guideRenderInstructions,
+  nt as loadingOpacity,
+  Ot as useArrowKeys,
+  Yt as useDebounce,
+  rt as useFavorites,
+  _t as useHover
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/knowledge-widget-ui",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -10,9 +10,9 @@
     }
   },
   "dependencies": {
-    "@telia-ace/knowledge-widget-core": "^1.1.5",
-    "@telia-ace/widget-ui": "^1.1.5",
-    "@telia-ace/widget-utilities": "^1.1.5",
+    "@telia-ace/knowledge-widget-core": "^1.1.6",
+    "@telia-ace/widget-ui": "^1.1.6",
+    "@telia-ace/widget-utilities": "^1.1.6",
     "@webprovisions/platform": "^1.1.4"
   },
   "peerDependencies": {