@telia-ace/knowledge-widget-components-contact-list 1.1.1-rc.0 → 1.1.1-rc.2

package/contact-list-1432865e.js

@@ -0,0 +1,188 @@
+"use strict";const r=require("react/jsx-runtime"),p=require("@emotion/styled"),n=require("./index-c67477f3.js"),E=require("@emotion/react"),m=require("react");require("react-dom");const K=require("react-transition-group"),D=require("react-router");function*H(e){if(e)for(let t=0;t<e.length;t++){const o=e[t];yield o,o.items&&(yield*H(o.items))}}const W=(e,t)=>{const o=H(t);let s=o.next(),i=null;for(;!s.done;)s.value.id===e&&(i=s.value),s=o.next();return i},O=(e,t)=>({id:e.id,type:e.type,name:e.name,branch:t||"default"}),J=e=>e==="entering"||e==="entered",Z=e=>e==="exiting"||e==="exited",k={fade:{in:"opacity: 1;",out:"opacity: 0;"},"slide-left":{in:"transform: translateX(0);",out:"transform: translateX(-100%);"},"slide-right":{in:"transform: translateX(0);",out:"transform: translateX(100%);"},"slide-up":{in:"transform: translateY(0);",out:"transform: translateY(100%);"},"slide-down":{in:"transform: translateY(0);",out:"transform: translateY(-100%);"},scale:{in:"transform: scale(1);",out:"transform: scale(0);"}},ee=["slide-up","slide-down","slide-left","slide-right","scale"],q={compose:(e="exited",t)=>{const{enter:o,exit:s}=t,i=o.transitionKeys.split(" "),l=ee.indexOf(i[0])>-1?"transform":"opacity";if(J(e))return i&&i.length>0?E.css`
+                    ${i&&i.length>0&&i.map(c=>k[c]?k[c].in:"")}
+                    transition: ${l} ${o.duration}ms ${o.easing};
+                `:"";const d=i&&i.length>0&&E.css`
+                ${i.map(c=>k[c]?k[c].out:"")}
+            `;if(Z(e)){const c=s.transitionKeys.split(" ");return c&&c.length>0&&e==="exiting"?E.css`
+                    ${d};
+                    ${c.map(a=>k[a]?k[a].out:"")}
+                    transition: ${l} ${s.duration}ms ${s.easing};
+                `:d}},composeViewTransition:(e,t,o)=>{if(t==="slide")return q.compose(e,{enter:{transitionKeys:o==="forth"?"slide-right":"slide-left",duration:500},exit:{transitionKeys:o==="forth"?"slide-left":"slide-right",duration:500}});if(t==="fade")return q.compose(e,{enter:{transitionKeys:"fade",duration:500},exit:{transitionKeys:"fade",duration:500}})},get:e=>k[e]},_=(e,t)=>e.get("seoConfiguration")?r.jsx(n.Empty,{...t}):null,M=()=>m.useContext(n.ComponentNodeContext),te=()=>{const e=n.useComponentNode(),t=n.useComponentPlatform(),[o,s]=m.useState([]),i=n.useIsMounted(),l=m.useCallback(d=>{if(t&&i.current&&d){const c=t.getBranch(d),a=d.getChildren(c).map(u=>O(u));s(a)}},[i,t,s,e]);return m.useEffect(()=>{e&&l(e)},[e,t]),m.useEffect(()=>{if(t){const[d,c]=n.createEventSubscriber(t.events);return d("components:set-layout",(a,u)=>{(e===u.node.parent||u.node.parent===t.nodes.root)&&l(u.node.parent)}),d("components:node-appended",(a,u)=>{(e===u.node.parent||u.node.parent===t.nodes.root)&&l(u.node.parent)}),d("components:node-removed",(a,{parentNode:u})=>{(u===e||u===t.nodes.root)&&l(u)}),()=>{c()}}},[e,t,l]),o},ne=()=>m.useContext(n.ColumnContext),U=(e,t)=>{const o=M(),s=n.useContainer(),[i,l]=m.useState(void 0),d=n.useIsMounted(),c=e||o.type||"";return m.useEffect(()=>{if(c){let a;return(t||s).getAsync("componentResolver").then(u=>{if(d.current){const g=u.getComponent(c);l(g)}a=u.registerResolver(c,g=>{d.current&&l(g)})}),()=>{a&&a()}}},[d,c,t,s]),i},X=()=>{const e=n.useComponentPlatform(),t=M(),[o,s]=m.useState([]),[i,l]=m.useState();return m.useEffect(()=>{if(e&&t){const d=new n.ComponentQuery(e).withId(t.id),c=e.actions(d,t.type||n.uuid());l(c),o!==null&&(o.forEach(a=>{c.dispatch(a.key,a.data).then(u=>a.resolve(u)).catch(u=>a.reject(u))}),s(null))}},[e,t.id]),(d,c)=>o!==null?new Promise((a,u)=>{o.push({key:d,data:c,resolve:a,reject:u})}):i.dispatch(d,c)},oe=e=>{const t=n.useComponentNode(e),o=n.useComponentPlatform(),[s,i]=m.useState({}),l=n.useIsMounted();return m.useEffect(()=>{t&&l.current&&i(t.attributes.layout)},[t,l]),m.useEffect(()=>{if(o){const d=o.events.subscribe("components:layout-changed",(c,a)=>{t===a.node&&l.current&&i(a.node.attributes.layout)});return()=>{d()}}},[o,l,t]),s},B=()=>m.useContext(n.ComponentPropertyContext);p(n.Paragraph)`
+    ${e=>{var t;return n.headingElement(e)("h1",E.css`
+                font-weight: normal;
+                font-size: ${(t=e.theme.fonts)==null?void 0:t.medium};
+            `)}}
+`;const se=p(n.Html)`
+    ${n.genericHtml}
+    font-weight: 300;
+    line-height: 1.5em;
+    button:focus-visible {
+        ${n.borderTabStyle};
+    }
+
+    a:focus-visible {
+        ${n.linkTabStyle};
+    }
+`,re=e=>{const t=U(e.clientName),{params:{contactCategory:o,guideCategory:s,phrase:i}}=n.useRouteData();if(typeof t>"u")return null;if(t===null)return process.env.NODE_ENV!=="production"?r.jsx(ae,{title:`client-name: ${e.clientName}, id: ${e.id}`,className:"humany-non-resolved-contact-method",children:r.jsx(n.Typography,{variant:"h5",children:"Non resolved Contact Method type"})}):null;const l=(d={})=>{const c={...e,...d},{id:a,title:u,clientName:g,symbol:f,inline:P,onClick:j=()=>{},description:C,htmlParseInstruction:x,className:b,disabled:S,guideId:N,dispatch:w=()=>{},expanded:y}=c,$=P?{onKeyDown:h=>{h.key&&h.key==="Enter"&&(j(h,c),h.defaultPrevented||!y&&w("expand",a))},onClick:h=>{j(h,c),h.defaultPrevented||!y&&w("expand",a)}}:{onClick:h=>j(h,c),routeName:"contact-method",params:n.createParams({contactCategory:o,guideId:N,guideCategory:s,phrase:i,contactMethod:a,uriName:n.formatUrl(u)})};return r.jsxs(ie,{title:u,"aria-label":u,className:b,disabled:S,description:C,"data-client-name":g,...d,...$,children:[f&&r.jsx(n.SymbolBadge,{symbol:f}),C?r.jsxs("div",{className:"humany-contact-link-rich-content",children:[r.jsx(G,{children:u}),r.jsx(se,{html:C,htmlParseInstruction:x})]}):r.jsx(G,{children:u})]})};return e.expanded?r.jsx(m.Suspense,{fallback:null,children:r.jsx(t,{...e,renderDefault:l})}):l()},Y=e=>{var t,o,s,i,l,d,c,a;return E.css`
+  display: flex;
+  padding: ${(t=e.theme.sizes)==null?void 0:t.large};
+  ${e.description?"":"align-items: center;"}
+  text-decoration: none;
+  span {
+    display: inline-block;
+    color: ${(o=e.theme.colors)==null?void 0:o.text};
+  }
+  i {
+    font-size: ${(s=e.theme.fonts)==null?void 0:s.large};
+    margin: 0 ${(i=e.theme.sizes)==null?void 0:i.large} 0 0;
+    min-height: ${(l=e.theme.fonts)==null?void 0:l.large};
+    min-width: ${(d=e.theme.fonts)==null?void 0:d.large};
+    line-height: ${(c=e.theme.fonts)==null?void 0:c.large};
+    display: inline-block;
+    vertical-align: bottom;
+    color: ${(a=e.theme.colors)==null?void 0:a.text};
+  }
+`},G=p(n.StyledText)`
+  line-height: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.large}};
+`,ie=p(n.Link)`
+  ${e=>Y(e)}
+
+  &:focus-visible {
+    ${n.borderTabStyle};
+  }
+`,ae=p.div`
+  text-align: center;
+  display: block;
+  ${e=>{var t,o;return typeof((t=e.theme.colors)==null?void 0:t.warning)<"u"&&`color: ${(o=e.theme.colors)==null?void 0:o.warning};`}}
+`,F=e=>{var t,o,s;return E.css`
+    ${n.itemList(e)}
+
+    > div {
+        padding: ${(t=e.theme.sizes)==null?void 0:t.large};
+
+        ${n.headingElement(e)("h1",E.css`
+                margin: 0;
+            `)}
+    }
+
+    > ul {
+        &:not(:first-child) {
+            border-top: ${e.theme.border};
+        }
+
+        > li {
+            margin: 0;
+            white-space: normal;
+
+            > a {
+                overflow: hidden;
+            }
+
+            &:first-child > a {
+                border-radius: ${`${e.theme.borderRadius} ${e.theme.borderRadius} 0 0`};
+            }
+
+            &:last-child:not(:first-child) > a {
+                border-radius: ${`0 0 ${e.theme.borderRadius} ${e.theme.borderRadius}`};
+            }
+
+            &:not(:last-child) {
+                border-bottom: ${e.theme.border};
+            }
+
+            > div {
+                padding: ${(o=e.theme.sizes)==null?void 0:o.large};
+            }
+        }
+    }
+
+    @media (hover: hover) {
+        a:hover {
+            background-color: ${(s=e.theme.colors)==null?void 0:s.accent};
+        }
+    }
+`},ce=p(n.ItemList)`
+    ${e=>F(e)}
+`,le=({contactMethods:e,children:t,guideId:o,dispatch:s,className:i="",itemRenderer:l,action:d=()=>{},header:c=""})=>e.length?r.jsx(ce,{header:c,className:n.appendClassNames(i,"humany-contact-list"),items:e,renderItem:l?a=>r.jsx("li",{"data-contact-method":a.id,children:l(a,{action:d,dispatch:s,guideId:o})},a.id):a=>r.jsx("li",{"data-contact-method":a.id,children:r.jsx(re,{...a,action:d,dispatch:s,guideId:o})},a.id),children:t}):null;var A=(e=>(e.back="back",e.forth="forth",e))(A||{});const de=(e,t,o)=>typeof o[e]=="number"&&typeof o[t]=="number"&&o[e]>o[t]?"back":"forth",Q=({views:e,location:t,render:o})=>r.jsx(D.Switch,{location:t&&{...t,pathname:t.pathname.split("?")[0]},children:[...Object.keys(e).filter(s=>!!e[s].path),...Object.keys(e).filter(s=>!e[s].path)].map(s=>{const{path:i}=e[s];return i?Array.isArray(i)?i.map(l=>r.jsx(D.Route,{exact:!0,path:l,render:()=>o(s)},s)):r.jsx(D.Route,{exact:!0,path:i,render:()=>o(s)},s):r.jsx(D.Route,{render:()=>o(s)},s)})}),ue=p.div`
+  position: relative;
+  width: 100%;
+  flex: 1;
+`,me=p(n.Grid)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  ${e=>!!e.animationCss&&e.animationCss}
+  ${e=>!!e.scrollableCss&&e.scrollableCss}
+`,fe={index:1,search:2,browse:3,guide:4,contact:5,"contact-method":6,conversation:7},he=({className:e="",...t})=>{const[o,s]=m.useState("index"),[i,l]=m.useState(A.forth),d=n.useRouteData(),c=n.useRouter(),a=B(),u=n.useContext(),g=n.useContainer(),f=n.useComponentNode(),{gap:P="0"}=u,{columns:j=1,animation:C="none",scrollable:x=!1,...b}=a,[S,N]=n.useScroll(x);if(!f||!c)return null;const{location:w}=c;d.name!==o&&d.name!==""&&C&&(l(de(o,d.name,fe)),s(d.name));const{views:y}=g.get("$settings");if(!Object.keys(y).length)return null;const $=(v,R,T)=>{const L=h(R,T),I=f.getChildren(v)[0];return r.jsx(me,{...t,...b,scrollableCss:S,ref:N,columns:j,gap:P,...L,className:n.appendClassNames(e,"humany-view"),children:r.jsx(V,{id:I.id,branch:"default"})})},h=(v,R)=>{if(C==="slide"||C==="fade")return{animationCss:q.composeViewTransition(v,C,R),"data-state":v}};return r.jsx(ue,{className:"humany-animated-view",children:r.jsx(K.TransitionGroup,{component:null,childFactory:v=>m.cloneElement(v,{direction:i}),children:r.jsx(K.Transition,{timeout:{enter:500,exit:500},onEnter:v=>v==null?void 0:v.clientHeight,unmountOnExit:!0,direction:A.forth,children:(v,{direction:R})=>r.jsx(Q,{views:y,location:w,render:T=>$(T,v,R)})},o)})})},pe=p(n.Grid)`
+    ${e=>!!e.scrollableCss&&e.scrollableCss}
+`,ye=({className:e="",...t})=>{const o=B(),s=n.useContext(),i=n.useContainer(),l=n.useComponentNode(),{views:d}=i.get("$settings"),{gap:c="0"}=s,{columns:a=1,animation:u="none",scrollable:g=!1,...f}=o,[P,j]=n.useScroll(g);return l?r.jsx(pe,{...t,...f,scrollableCss:P,ref:j,columns:a,gap:c,className:n.appendClassNames(e,"humany-view"),children:r.jsx(Q,{views:d,render:C=>{const x=l.getChildren(C)[0];return r.jsx(V,{id:x.id,node:x,branch:"default"})}})}):null},z=e=>{var t,o;return E.css`
+    outline: none;
+    box-sizing: border-box;
+    * {
+        box-sizing: border-box;
+        outline: none;
+    }
+
+    grid-column: ${e["data-indent"]?`${e["data-indent"]+1} / ${e["data-indent"]+(e["data-width"]||0)+1}`:`span ${e["data-width"]}`};
+
+    ${((t=e.theme.fonts)==null?void 0:t.type)&&`
+    font-family: ${e.theme.fonts.type};
+
+    input, textarea {
+      font-family: ${e.theme.fonts.type};
+    }
+  `}
+
+    ${((o=e.theme.fonts)==null?void 0:o.base)&&`
+    font-size: ${e.theme.fonts.base};
+  `}
+
+  &:focus-visible {
+        ${n.paddedBorderTabStyle(e)};
+    }
+`},ge=p(ye)`
+    ${e=>z(e)}
+`,xe=p(he)`
+    ${e=>z(e)}
+`,be=p.div`
+    text-align: center;
+    ${e=>{var t,o,s;return typeof((t=e.theme.colors)==null?void 0:t.warning)<"u"&&E.css`
+            color: ${(o=e.theme.colors)==null?void 0:o.warning};
+            border: 2px dashed ${(s=e.theme.colors)==null?void 0:s.warning};
+        `}}
+    ${e=>typeof e.theme.borderRadius<"u"&&`border-radius: ${e.theme.borderRadius};`}
+  ${e=>z(e)}
+`,Ce=m.forwardRef(({className:e="",children:t,...o},s)=>{const i=U(),{name:l,type:d,id:c}=M(),a=m.useMemo(()=>i?p(i)`
+                    ${z}
+                    ${n.filterCssPropsStyle}
+                `:null,[i]);return typeof i>"u"?null:i===null||a===null?process.env.NODE_ENV!=="production"?r.jsx(be,{...o,title:`type: ${d}, definition-id: ${l}, instance-id: ${c}`,className:n.appendClassNames(e,"humany-non-resolved-component"),children:r.jsx(n.Typography,{variant:"h5",children:"Non Resolved Component Type"})}):null:r.jsx(m.Suspense,{fallback:null,children:r.jsx(a,{ref:s,...o,className:n.appendClassNames(e,"humany-component",`humany-component-${l}`),children:t})})}),$e=e=>{const t=n.useComponentNode(e),o=n.useComponentPlatform(),[s,i]=m.useState({}),l=n.useIsMounted();return m.useEffect(()=>{t&&l.current&&i(t.attributes.properties)},[t,e,l]),m.useEffect(()=>{if(o){const d=o.events.subscribe("components:properties-changed",(c,a)=>{t===a.node&&l.current&&i(a.node.attributes.properties)});return()=>{d()}}},[o,l,e,t]),s},je=(e,t)=>t?!0:typeof e=="string"?e==="full":e>0,V=m.forwardRef(({className:e="",id:t,branch:o,node:s,ariaLabel:i,tabIndex:l,context:d,...c},a)=>{const u=n.useComponentPlatform(),g=n.useContainer(),[f,P]=m.useState(),j=ne(),C=n.useContext(t),x=$e(t),{size:b="none",indent:S=0}=oe(t),N=je(b,s);if(m.useEffect(()=>{if(u){if(t&&!s){const L=u.nodes.get(t);if(L&&(P(O(L,o)),N)){const I=L.mount(g);return()=>{I()}}}else if(s){P(O(s,o));const L=s.mount(g);return()=>{L()}}}},[u,t,s,N]),!f||!N)return null;const w={...C,...d||{}},{cardinal:y,fonts:$={},accessibility:h={},...v}=w,R={type:$.type,base:$.base||"16px",small:$.small||"0.8em",normal:$.normal||"1em",medium:$.medium||"1.2em",large:$.large||"1.6em",huge:$.huge||"2.5em"},T={...v,fonts:R,accessibility:{...h}};return typeof y=="number"&&(T.sizes={cardinal:y,small:`${y}px`,normal:`${y*3}px`,medium:`${y*5}px`,large:`${y*8}px`}),r.jsx(E.ThemeProvider,{theme:T,children:r.jsx(n.ComponentNodeContext.Provider,{value:f,children:r.jsx(n.ComponentPropertyContext.Provider,{value:x,children:(()=>{const L={"data-width":b==="full"?j:Math.min(b,j),"data-indent":S,"data-name":f.name,"data-node-id":f.id,"data-component-type":f.type,"aria-label":i,tabIndex:l,id:f.id,role:x&&x.role,...c};switch(f.type){case"view":return typeof x.animation=="string"&&x.animation!=="none"?r.jsx(xe,{...L,className:e}):r.jsx(ge,{...L,className:e});default:{const I=n.filterCssProps(x);return r.jsx(Ce,{ref:a,...L,...I,className:e})}}})()})})})});m.lazy(()=>Promise.resolve().then(()=>require("./detached-component-cc2b6165.js")));const ve=({className:e,guides:t,header:o,accordion:s,loading:i,route:l="guide",categoryTitle:d,...c})=>{const{name:a,params:{contactCategory:u=0,guide:g}}=n.useRouteData(),{name:f}=M(),P=n.useContainer(),j=te(),C=X(),x=m.useCallback((b,S,N,w)=>{const{id:y,title:$}=b;return s&&g===y?r.jsx(n.AccordionListItem,{id:y,title:$,route:a,collapseUri:d&&n.formatUrl(d),children:j.map(h=>r.jsx(V,{id:h.id,branch:"default",accordion:s},h.id))},y):w?w(b,S,N,w):null},[s,j,g]);return!t.length&&!i?_(P,{...c,className:n.appendClassNames(e,"humany-deflection-list")}):r.jsx(Se,{...c,"data-loading":i,className:n.appendClassNames(e,"humany-deflection-list"),items:t,header:o,expandable:!!s,renderItem:x,dispatch:C,routing:{guide:l},paramMappers:{guide:({id:b,title:S})=>n.createParams({contactCategory:u,guide:b,accordion:s?f:void 0,uriName:n.formatUrl(S)})},children:r.jsx(n.Loader,{loading:i})})},Se=p(n.GuideList)`
+  ${n.contentBox}
+  ${n.loadingOpacity}
+`,Ne=p(le)`
+  ${n.loadingOpacity}
+  ${n.contentBox}
+`,we=p(n.ItemList)`
+  ${e=>n.loadingOpacity(e)}
+  ${n.contentBox}
+  ${F}
+
+  && {
+    i {
+      font-size: 25px;
+      width: 1.28571429em;
+      text-align: center;
+    }
+  }
+`,Pe=p(n.Link)`
+  &:focus-visible {
+    ${n.borderTabStyle};
+  }
+
+  ${Y}
+`,Le=p.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.normal}};
+`,Ee=p(n.StyledText)`
+  font-weight: bold;
+`,Re=({className:e,...t})=>{const o=X(),s=n.useContainer(),i=n.useRouteData(),{deflectionHeader:l="",routes:d={},contactMethods:c=[],categories:a=[],guides:u=[],deflectionAccordion:g=!1,loading:f=!1}=B(),{contactCategory:P,guide:j="guide"}=d;if(!a.length&&!c.length&&!f)return _(s,{...t,className:n.appendClassNames(e,"humany-contact-category-list")});const{name:C,params:{contactCategory:x}}=i,b=W(x,a);return c.length?r.jsxs(r.Fragment,{children:[r.jsx(ve,{className:e,guides:u,categoryTitle:b&&b.title,header:l,route:j,accordion:g,loading:f}),r.jsx(Ne,{"data-loading":f,className:e,contactMethods:c,dispatch:o,children:r.jsx(n.Loader,{loading:f})})]}):r.jsx(we,{...t,"data-loading":f,className:n.appendClassNames(e,"humany-contact-category-list"),items:b&&b.items||a,renderItem:({id:S,title:N,symbol:w,matches:y,items:$,description:h})=>y||$&&$.length?r.jsx("li",{"data-contact-category":S,children:r.jsxs(Pe,{routeName:P||C,params:n.createParams({contactCategory:S,uriName:n.formatUrl(N)}),children:[w&&r.jsx(n.SymbolBadge,{symbol:w}),h!=null&&h.length?r.jsxs(Le,{children:[r.jsx(Ee,{children:N}),r.jsx(n.StyledText,{children:h})]}):r.jsx(n.StyledText,{children:N})]})},S):null,children:r.jsx(n.Loader,{loading:f})})},ke=Object.freeze(Object.defineProperty({__proto__:null,default:Re},Symbol.toStringTag,{value:"Module"}));exports.Component=V;exports.contactList=ke;