@telia-ace/widget-components-area 1.1.1-rc.0 → 1.1.1-rc.2

package/area-c682aa47.js

@@ -0,0 +1,108 @@
+"use strict";const d=require("react/jsx-runtime"),P=require("@emotion/react"),b=require("@emotion/styled"),n=require("./index-ca09668e.js"),m=require("react");require("react-dom");const q=require("react-transition-group"),W=require("react-router"),Y=e=>e==="entering"||e==="entered",H=e=>e==="exiting"||e==="exited",M={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);"}},F=["slide-up","slide-down","slide-left","slide-right","scale"],z={compose:(e="exited",t)=>{const{enter:o,exit:r}=t,s=o.transitionKeys.split(" "),a=F.indexOf(s[0])>-1?"transform":"opacity";if(Y(e))return s&&s.length>0?P.css`
+                    ${s&&s.length>0&&s.map(c=>M[c]?M[c].in:"")}
+                    transition: ${a} ${o.duration}ms ${o.easing};
+                `:"";const i=s&&s.length>0&&P.css`
+                ${s.map(c=>M[c]?M[c].out:"")}
+            `;if(H(e)){const c=r.transitionKeys.split(" ");return c&&c.length>0&&e==="exiting"?P.css`
+                    ${i};
+                    ${c.map(u=>M[u]?M[u].out:"")}
+                    transition: ${a} ${r.duration}ms ${r.easing};
+                `:i}},composeViewTransition:(e,t,o)=>{if(t==="slide")return z.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 z.compose(e,{enter:{transitionKeys:"fade",duration:500},exit:{transitionKeys:"fade",duration:500}})},get:e=>M[e]},_=(e={})=>(Object.keys(e).forEach(t=>{(e[t]===null||typeof e[t]>"u")&&delete e[t]}),e),U=(e,t)=>e.get("seoConfiguration")?d.jsx(n.Empty,{...t}):null,I=()=>m.useContext(n.ComponentNodeContext),B=(e,t)=>({id:e.id,type:e.type,name:e.name,branch:t||"default"}),J=()=>{const e=n.useComponentNode(),t=n.useComponentPlatform(),[o,r]=m.useState([]),s=n.useIsMounted(),a=m.useCallback(i=>{if(t&&s.current&&i){const c=t.getBranch(i),u=i.getChildren(c).map(l=>B(l));r(u)}},[s,t,r,e]);return m.useEffect(()=>{e&&a(e)},[e,t]),m.useEffect(()=>{if(t){const[i,c]=n.createEventSubscriber(t.events);return i("components:set-layout",(u,l)=>{(e===l.node.parent||l.node.parent===t.nodes.root)&&a(l.node.parent)}),i("components:node-appended",(u,l)=>{(e===l.node.parent||l.node.parent===t.nodes.root)&&a(l.node.parent)}),i("components:node-removed",(u,{parentNode:l})=>{(l===e||l===t.nodes.root)&&a(l)}),()=>{c()}}},[e,t,a]),o},Q=()=>m.useContext(n.ColumnContext),Z=(e,t)=>{const o=I(),r=n.useContainer(),[s,a]=m.useState(void 0),i=n.useIsMounted(),c=e||o.type||"";return m.useEffect(()=>{if(c){let u;return(t||r).getAsync("componentResolver").then(l=>{if(i.current){const p=l.getComponent(c);a(p)}u=l.registerResolver(c,p=>{i.current&&a(p)})}),()=>{u&&u()}}},[i,c,t,r]),s},ee=e=>{const t=n.useComponentNode(e),o=n.useComponentPlatform(),[r,s]=m.useState({}),a=n.useIsMounted();return m.useEffect(()=>{t&&a.current&&s(t.attributes.layout)},[t,a]),m.useEffect(()=>{if(o){const i=o.events.subscribe("components:layout-changed",(c,u)=>{t===u.node&&a.current&&s(u.node.attributes.layout)});return()=>{i()}}},[o,a,t]),r},L=()=>m.useContext(n.ComponentPropertyContext),te=e=>{const[t,o]=m.useState(),r=n.useContainer(),s=n.useIsMounted();return m.useEffect(()=>{let a;const i=(e||r).get("$widget");if(!i)return;const{name:c,invoke:u}=i;return u("renderState").then(l=>{s.current&&o(l)}),(e||r).getAsync("actionResolver").then(l=>{a=l.subscribe(c,(p,f)=>{switch(f){case"close":case"open":s.current&&o(f==="open"?n.WidgetRenderState.open:n.WidgetRenderState.closed);break;case"hide":s.current&&o(n.WidgetRenderState.hidden)}})}),()=>{a&&a()}},[s]),t},ne=e=>{const t=n.useContainer(),o=n.useRouter(),[r,s]=m.useState({name:"",params:{}}),a=n.useIsMounted();return m.useEffect(()=>{const i=(e||t).get("$widget");if(!i)return;const{events:c}=i;return c.subscribe("router:change",(l,{next:{routeData:p}})=>{if(a.current){const{name:f,params:h}=p;_(h),s({name:f,params:h})}})},[a,e,t]),m.useEffect(()=>{if(o&&o.history&&a.current){const i=o.getRouteData(),{name:c,params:u}=i;_(u),s({name:c,params:u})}},[o,a]),r},se=e=>{const{in:t,mountOnEnter:o=!0,unmountOnExit:r=!0,timeout:s,children:a,transitions:i}=e,u=(()=>{var l,p;if(!(!i||i==="none")){if(typeof i=="string")return{enter:{transitionKeys:i,duration:s?typeof s=="number"?s:s.enter:200,easing:"ease-in"},exit:{transitionKeys:i,duration:s?typeof s=="number"?s:s.exit:200,easing:"ease-out"}};if(typeof i=="object"){const{enter:f,exit:h}=i;return{enter:{transitionKeys:(l=i.enter)==null?void 0:l.type,duration:s?typeof s=="number"?s:s.enter:200,easing:f.easing?f.easing:"ease-in"},exit:{transitionKeys:(p=i.enter)==null?void 0:p.type,duration:s?typeof s=="number"?s:s.enter:200,easing:h.easing?h.easing:"ease-out"}}}}})();return d.jsx(q.Transition,{timeout:{enter:u&&u.enter.duration||0,exit:u&&u.exit.duration||0},in:t,appear:!0,mountOnEnter:o,unmountOnExit:r,onEnter:l=>l.clientHeight,children:l=>a&&a(l,u&&z.compose(l,u))})};var G=(e=>(e.back="back",e.forth="forth",e))(G||{});const oe=(e,t,o)=>typeof o[e]=="number"&&typeof o[t]=="number"&&o[e]>o[t]?"back":"forth",k=({views:e,location:t,render:o})=>d.jsx(W.Switch,{location:t&&{...t,pathname:t.pathname.split("?")[0]},children:[...Object.keys(e).filter(r=>!!e[r].path),...Object.keys(e).filter(r=>!e[r].path)].map(r=>{const{path:s}=e[r];return s?Array.isArray(s)?s.map(a=>d.jsx(W.Route,{exact:!0,path:a,render:()=>o(r)},r)):d.jsx(W.Route,{exact:!0,path:s,render:()=>o(r)},r):d.jsx(W.Route,{render:()=>o(r)},r)})}),re=b.div`
+  position: relative;
+  width: 100%;
+  flex: 1;
+`,ie=b(n.Grid)`
+  position: absolute;
+  left: 0;
+  right: 0;
+  ${e=>!!e.animationCss&&e.animationCss}
+  ${e=>!!e.scrollableCss&&e.scrollableCss}
+`,ae={index:1,search:2,browse:3,guide:4,contact:5,"contact-method":6,conversation:7},ce=({className:e="",...t})=>{const[o,r]=m.useState("index"),[s,a]=m.useState(G.forth),i=ne(),c=n.useRouter(),u=L(),l=n.useContext(),p=n.useContainer(),f=n.useComponentNode(),{gap:h="0"}=l,{columns:R=1,animation:S="none",scrollable:x=!1,...T}=u,[O,E]=n.useScroll(x);if(!f||!c)return null;const{location:D}=c;i.name!==o&&i.name!==""&&S&&(a(oe(o,i.name,ae)),r(i.name));const{views:C}=p.get("$settings");if(!Object.keys(C).length)return null;const $=(g,j,w)=>{const y=V(j,w),N=f.getChildren(g)[0];return d.jsx(ie,{...t,...T,scrollableCss:O,ref:E,columns:R,gap:h,...y,className:n.appendClassNames(e,"humany-view"),children:d.jsx(K,{id:N.id,branch:"default"})})},V=(g,j)=>{if(S==="slide"||S==="fade")return{animationCss:z.composeViewTransition(g,S,j),"data-state":g}};return d.jsx(re,{className:"humany-animated-view",children:d.jsx(q.TransitionGroup,{component:null,childFactory:g=>m.cloneElement(g,{direction:s}),children:d.jsx(q.Transition,{timeout:{enter:500,exit:500},onEnter:g=>g==null?void 0:g.clientHeight,unmountOnExit:!0,direction:G.forth,children:(g,{direction:j})=>d.jsx(k,{views:C,location:D,render:w=>$(w,g,j)})},o)})})},ue=b(n.Grid)`
+    ${e=>!!e.scrollableCss&&e.scrollableCss}
+`,le=({className:e="",...t})=>{const o=L(),r=n.useContext(),s=n.useContainer(),a=n.useComponentNode(),{views:i}=s.get("$settings"),{gap:c="0"}=r,{columns:u=1,animation:l="none",scrollable:p=!1,...f}=o,[h,R]=n.useScroll(p);return a?d.jsx(ue,{...t,...f,scrollableCss:h,ref:R,columns:u,gap:c,className:n.appendClassNames(e,"humany-view"),children:d.jsx(k,{views:i,render:S=>{const x=a.getChildren(S)[0];return d.jsx(K,{id:x.id,node:x,branch:"default"})}})}):null},A=e=>{var t,o;return P.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)};
+    }
+`},de=b(le)`
+    ${e=>A(e)}
+`,me=b(ce)`
+    ${e=>A(e)}
+`,fe=b.div`
+    text-align: center;
+    ${e=>{var t,o,r;return typeof((t=e.theme.colors)==null?void 0:t.warning)<"u"&&P.css`
+            color: ${(o=e.theme.colors)==null?void 0:o.warning};
+            border: 2px dashed ${(r=e.theme.colors)==null?void 0:r.warning};
+        `}}
+    ${e=>typeof e.theme.borderRadius<"u"&&`border-radius: ${e.theme.borderRadius};`}
+  ${e=>A(e)}
+`,pe=m.forwardRef(({className:e="",children:t,...o},r)=>{const s=Z(),{name:a,type:i,id:c}=I(),u=m.useMemo(()=>s?b(s)`
+                    ${A}
+                    ${n.filterCssPropsStyle}
+                `:null,[s]);return typeof s>"u"?null:s===null||u===null?process.env.NODE_ENV!=="production"?d.jsx(fe,{...o,title:`type: ${i}, definition-id: ${a}, instance-id: ${c}`,className:n.appendClassNames(e,"humany-non-resolved-component"),children:d.jsx(n.Typography,{variant:"h5",children:"Non Resolved Component Type"})}):null:d.jsx(m.Suspense,{fallback:null,children:d.jsx(u,{ref:r,...o,className:n.appendClassNames(e,"humany-component",`humany-component-${a}`),children:t})})}),he=e=>{const t=n.useComponentNode(e),o=n.useComponentPlatform(),[r,s]=m.useState({}),a=n.useIsMounted();return m.useEffect(()=>{t&&a.current&&s(t.attributes.properties)},[t,e,a]),m.useEffect(()=>{if(o){const i=o.events.subscribe("components:properties-changed",(c,u)=>{t===u.node&&a.current&&s(u.node.attributes.properties)});return()=>{i()}}},[o,a,e,t]),r},ge=(e,t)=>t?!0:typeof e=="string"?e==="full":e>0,K=m.forwardRef(({className:e="",id:t,branch:o,node:r,ariaLabel:s,tabIndex:a,context:i,...c},u)=>{const l=n.useComponentPlatform(),p=n.useContainer(),[f,h]=m.useState(),R=Q(),S=n.useContext(t),x=he(t),{size:T="none",indent:O=0}=ee(t),E=ge(T,r);if(m.useEffect(()=>{if(l){if(t&&!r){const y=l.nodes.get(t);if(y&&(h(B(y,o)),E)){const N=y.mount(p);return()=>{N()}}}else if(r){h(B(r,o));const y=r.mount(p);return()=>{y()}}}},[l,t,r,E]),!f||!E)return null;const D={...S,...i||{}},{cardinal:C,fonts:$={},accessibility:V={},...g}=D,j={type:$.type,base:$.base||"16px",small:$.small||"0.8em",normal:$.normal||"1em",medium:$.medium||"1.2em",large:$.large||"1.6em",huge:$.huge||"2.5em"},w={...g,fonts:j,accessibility:{...V}};return typeof C=="number"&&(w.sizes={cardinal:C,small:`${C}px`,normal:`${C*3}px`,medium:`${C*5}px`,large:`${C*8}px`}),d.jsx(P.ThemeProvider,{theme:w,children:d.jsx(n.ComponentNodeContext.Provider,{value:f,children:d.jsx(n.ComponentPropertyContext.Provider,{value:x,children:(()=>{const y={"data-width":T==="full"?R:Math.min(T,R),"data-indent":O,"data-name":f.name,"data-node-id":f.id,"data-component-type":f.type,"aria-label":s,tabIndex:a,id:f.id,role:x&&x.role,...c};switch(f.type){case"view":return typeof x.animation=="string"&&x.animation!=="none"?d.jsx(me,{...y,className:e}):d.jsx(de,{...y,className:e});default:{const N=n.filterCssProps(x);return d.jsx(pe,{ref:u,...y,...N,className:e})}}})()})})})});m.lazy(()=>Promise.resolve().then(()=>require("./detached-component-c01ac861.js")));const ye=m.forwardRef(({children:e,className:t,renderState:o,animation:r,...s},a)=>o?d.jsx(se,{mountOnEnter:o!==n.WidgetRenderState.hidden,timeout:200,in:o===n.WidgetRenderState.open,transitions:r,unmountOnExit:o===n.WidgetRenderState.closed,children:(i,c)=>d.jsx(xe,{...s,animationCss:c,"data-state":i,ref:a,className:n.appendClassNames("humany-animated-area",t),children:e})}):null),xe=b(n.Grid)`
+    ${A}
+    ${e=>!!e.animationCss&&e.animationCss}
+  ${e=>!!e.scrollableCss&&e.scrollableCss}
+  text-size-adjust: 100%;
+    input::-ms-clear {
+        display: none;
+    }
+    ${e=>e.hidden&&e["data-state"]==="exited"&&P.css`
+            visibility: collapse;
+            pointer-events: none;
+        `};
+`,be=({className:e,...t})=>{const{name:o}=I(),r=te(),s=n.useContext(),a=L(),i=J(),c=n.useContainer(),{gap:u="0"}=s,{columns:l=1,animation:p="none",scrollable:f=!1,mode:h=n.AreaMode.Static,trigger:R={},fullScreen:S,header:x,...T}=a,{size:O=24,symbol:E,label:D,ariaLabel:C,...$}=R,[V,g]=n.useScroll(f),j=m.useCallback(v=>{const{events:X}=c.get("$widget");return X.dispatch("widget:area-rendered",{name:o,properties:a,element:v}),g.current=v,v},[a,r]);if(!i.length)return U(c,{...t,className:n.appendClassNames(e,"humany-area")});const w={...t,className:n.appendClassNames(e,"humany-area",`humany-area-${o}`),scrollableCss:V,...T,columns:l,gap:u,renderState:r,animation:p,hidden:r===n.WidgetRenderState.hidden,ref:j},y=(()=>p!=="none"?d.jsx(n.ColumnContext.Provider,{value:l,children:d.jsx(ye,{...w,children:i.map(v=>d.jsx(K,{id:v.id,branch:"default"},v.id))})}):r===n.WidgetRenderState.closed?null:d.jsx(n.ColumnContext.Provider,{value:l,children:d.jsx(Se,{...w,children:i.map(v=>d.jsx(K,{id:v.id,branch:"default"},v.id))})}))();if(h===n.AreaMode.Static)return y;const N=d.jsxs(Ce,{className:"humany-area-trigger",title:C,...n.filterCssProps($),children:[D&&d.jsx($e,{children:D}),E&&d.jsx(ve,{symbol:E,size:O})]});if(h===n.AreaMode.Dropdown)return d.jsx(n.Dropdown,{trigger:N,children:y});if(h===n.AreaMode.Drawer){const v=Object.values(n.AnimationType).includes(p)&&{type:p}||void 0;return d.jsx(n.Drawer,{header:x,animation:v,fullScreen:S,trigger:N,children:y})}return h===n.AreaMode.Modal&&n.Logger.warn("modal area not implemented"),null},Ce=b(n.Button)`
+  display: flex;
+  align-items: inherit;
+  align-self: center;
+  width: fit-content;
+  height: fit-content;
+  ${n.filterCssPropsStyle}
+
+  ${e=>e.theme.fonts&&`
+    font-family: ${e.theme.fonts.type};
+    font-size: ${e.theme.fonts.normal};
+  `}
+
+  &:focus-visible {
+    ${n.paddedBorderTabStyle};
+  }
+`,$e=b(n.Text)`
+  margin: 0 ${e=>{var t;return(t=e.theme.sizes)==null?void 0:t.small}} 0 0;
+  color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+`,ve=b(n.SymbolBadge)`
+  path {
+    fill: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+  }
+`,Se=b(n.Grid)`
+  ${A}
+  ${e=>!!e.scrollableCss&&e.scrollableCss}
+  text-size-adjust: 100%;
+  input::-ms-clear {
+    display: none;
+  }
+  ${e=>e.hidden&&P.css`
+      visibility: collapse;
+      pointer-events: none;
+    `};
+`,je=Object.freeze(Object.defineProperty({__proto__:null,default:be},Symbol.toStringTag,{value:"Module"}));exports.Component=K;exports.area=je;