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

package/area-f4ab636a.js

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