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

package/index.js

@@ -1 +1 @@
-"use strict";const e=require("./index-8e05a7b4.js");require("react/jsx-runtime");require("react");require("react-dom");module.exports=e.WidgetHeaderComponent;
+"use strict";const e=require("./index-f80d12f5.js");require("@emotion/react");require("react/jsx-runtime");require("react");require("@emotion/styled");require("react-transition-group");require("react-dom");require("react-router-dom");module.exports=e.WidgetHeaderComponent;

package/index.mjs

@@ -1,7 +1,11 @@
-import { W as i } from "./index-addbd6d9.mjs";
+import { W as d } from "./index-8825e52f.mjs";
+import "@emotion/react";
 import "react/jsx-runtime";
 import "react";
+import "@emotion/styled";
+import "react-transition-group";
 import "react-dom";
+import "react-router-dom";
 export {
-  i as default
+  d as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telia-ace/widget-components-widget-header",
-  "version": "1.1.1-rc.0",
+  "version": "1.1.1-rc.2",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
@@ -10,10 +10,10 @@
     }
   },
   "dependencies": {
-    "@telia-ace/widget-core": "^1.1.1-rc.0",
-    "@telia-ace/widget-routing": "^1.1.1-rc.0",
-    "@telia-ace/widget-ui": "^1.1.1-rc.0",
-    "@telia-ace/widget-utilities": "^1.1.1-rc.0",
+    "@telia-ace/widget-core": "^1.1.1-rc.2",
+    "@telia-ace/widget-routing": "^1.1.1-rc.2",
+    "@telia-ace/widget-ui": "^1.1.1-rc.2",
+    "@telia-ace/widget-utilities": "^1.1.1-rc.2",
     "@webprovisions/platform": "^1.1.4"
   },
   "peerDependencies": {

package/widget-header-b177d340.js

@@ -0,0 +1,88 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),x=require("@emotion/react"),f=require("@emotion/styled"),l=require("./index-f80d12f5.js"),h=require("react");require("react-dom");const z=require("react-transition-group");require("react-router-dom");const S=e=>e==="entering"||e==="entered",C=e=>e==="exiting"||e==="exited",g={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);"}},w=["slide-up","slide-down","slide-left","slide-right","scale"],b={compose:(e="exited",t)=>{const{enter:i,exit:u}=t,n=i.transitionKeys.split(" "),m=w.indexOf(n[0])>-1?"transform":"opacity";if(S(e))return n&&n.length>0?x.css`
+                    ${n&&n.length>0&&n.map(o=>g[o]?g[o].in:"")}
+                    transition: ${m} ${i.duration}ms ${i.easing};
+                `:"";const s=n&&n.length>0&&x.css`
+                ${n.map(o=>g[o]?g[o].out:"")}
+            `;if(C(e)){const o=u.transitionKeys.split(" ");return o&&o.length>0&&e==="exiting"?x.css`
+                    ${s};
+                    ${o.map(a=>g[a]?g[a].out:"")}
+                    transition: ${m} ${u.duration}ms ${u.easing};
+                `:s}},composeViewTransition:(e,t,i)=>{if(t==="slide")return b.compose(e,{enter:{transitionKeys:i==="forth"?"slide-right":"slide-left",duration:500},exit:{transitionKeys:i==="forth"?"slide-left":"slide-right",duration:500}});if(t==="fade")return b.compose(e,{enter:{transitionKeys:"fade",duration:500},exit:{transitionKeys:"fade",duration:500}})},get:e=>g[e]},N=()=>h.useContext(l.ComponentNodeContext),T=()=>{const e=l.useComponentPlatform(),t=N(),[i,u]=h.useState([]),[n,m]=h.useState();return h.useEffect(()=>{if(e&&t){const s=new l.ComponentQuery(e).withId(t.id),o=e.actions(s,t.type||l.uuid());m(o),i!==null&&(i.forEach(a=>{o.dispatch(a.key,a.data).then(c=>a.resolve(c)).catch(c=>a.reject(c))}),u(null))}},[e,t.id]),(s,o)=>i!==null?new Promise((a,c)=>{i.push({key:s,data:o,resolve:a,reject:c})}):n.dispatch(s,o)},k=()=>h.useContext(l.ComponentPropertyContext),K=e=>{const{in:t,mountOnEnter:i=!0,unmountOnExit:u=!0,timeout:n,children:m,transitions:s}=e,a=(()=>{var c,d;if(!(!s||s==="none")){if(typeof s=="string")return{enter:{transitionKeys:s,duration:n?typeof n=="number"?n:n.enter:200,easing:"ease-in"},exit:{transitionKeys:s,duration:n?typeof n=="number"?n:n.exit:200,easing:"ease-out"}};if(typeof s=="object"){const{enter:p,exit:$}=s;return{enter:{transitionKeys:(c=s.enter)==null?void 0:c.type,duration:n?typeof n=="number"?n:n.enter:200,easing:p.easing?p.easing:"ease-in"},exit:{transitionKeys:(d=s.enter)==null?void 0:d.type,duration:n?typeof n=="number"?n:n.enter:200,easing:$.easing?$.easing:"ease-out"}}}}})();return r.jsx(z.Transition,{timeout:{enter:a&&a.enter.duration||0,exit:a&&a.exit.duration||0},in:t,appear:!0,mountOnEnter:i,unmountOnExit:u,onEnter:c=>c.clientHeight,children:c=>m&&m(c,a&&b.compose(c,a))})},q=({node:e})=>{if(!e.symbol)return null;let t;const i=e.symbol.type==="Svg";if(e.symbol.type==="Svg"){const u=parseInt(e.size,10);isNaN(u)||(t=u)}return r.jsx(E,{symbol:e.symbol,svg:i,size:t,backgroundSize:"cover"})},E=f(({svg:e,...t})=>r.jsx(l.SymbolBadge,{...t}))`
+    color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+    ${e=>!e.svg&&x.css`
+            border-radius: 50%;
+            overflow: hidden;
+        `}
+`,B=({node:e})=>{const t=e.symbol||{type:"Svg",content:"back"};return r.jsx(l.SymbolBadge,{size:20,symbol:t})},P=({node:e})=>{const t=e.symbol||{type:"Svg",content:"close"},i=parseInt(e==null?void 0:e.size,10)||14;return r.jsx(l.SymbolBadge,{size:i,symbol:t})},A=({node:e})=>{const t=e.symbol||{type:"Svg",content:"minimize"},i=parseInt(e==null?void 0:e.size,10)||20;return r.jsx(l.SymbolBadge,{size:i,symbol:t})},j=({className:e="",...t})=>{const i=T(),{size:u,padding:n,type:m,tooltip:s,show:o=!0}=t;return m==="back"?r.jsx(v,{size:u||"64px",padding:n||"10px",children:r.jsx(K,{in:o,timeout:300,transitions:{enter:{type:"scale",easing:"cubic-bezier(.08,.84,.74,1.84)"},exit:{type:"scale",easing:"ease-out"}},children:(a,c)=>r.jsx(y,{title:s,"aria-label":s,animationCss:c,onClick:()=>{i("back")},children:r.jsx(B,{node:t})})})}):o?r.jsxs(v,{size:u||"64px",padding:n||"10px",squareRatio:m==="avatar",children:[m==="avatar"&&r.jsx(q,{node:t}),m==="close"&&r.jsx(y,{title:s,"aria-label":s,onClick:()=>{i("close")},children:r.jsx(P,{node:t})}),m==="minimize"&&r.jsx(y,{title:s,"aria-label":s,onClick:()=>{i("minimize")},children:r.jsx(A,{node:t})})]}):null},v=f.div`
+    flex: 1;
+    max-width: ${e=>e.size};
+    ${e=>e.squareRatio&&`max-height: ${e.size};`}
+    text-align: center;
+    padding: 0 ${e=>e.padding};
+    && {
+        box-sizing: content-box;
+    }
+
+    svg {
+        vertical-align: middle;
+    }
+
+    i {
+        color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+        font-size: ${e=>e.size};
+        min-width: 1em;
+        min-height: 1em;
+        display: inline-block;
+    }
+`,y=f.button`
+    ${e=>!!e.animationCss&&e.animationCss};
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    &:focus-visible {
+        ${l.borderTabStyle};
+        border-color: ${e=>{var t,i;return(i=(t=e.theme.accessibility)==null?void 0:t.colors)==null?void 0:i.inactiveText}};
+    }
+`,D=({className:e,...t})=>{const{header:i,tagline:u,route:n,tooltip:m="",actions:s={},textAlign:o="center"}=k(),[a,c]=l.createNodes(s);return a.sort((d,p)=>(d.order||0)-(p.order||0)),c.sort((d,p)=>(d.order||0)-(p.order||0)),r.jsxs(I,{...t,className:l.appendClassNames(e,"humany-widget-header"),children:[a.map((d,p)=>r.jsx(j,{...d},`${d.type}+_${p}`)),r.jsxs(O,{textAlign:o,margin:l.calculateMargin(a,c,o),children:[n?r.jsx(R,{routeName:n,title:m,"aria-label":m,children:r.jsx(l.Typography,{variant:"h1",children:i})}):r.jsx(l.Typography,{variant:"h1",children:i}),u&&r.jsx(M,{children:u})]}),c.map((d,p)=>r.jsx(j,{...d},`${d.type}+_${p}`))]})},I=f.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    ${e=>{var t,i;return l.headingElement(e)("h1",x.css`
+                font-size: ${(t=e.theme.fonts)==null?void 0:t.huge};
+                margin: 0;
+                font-weight: 300;
+                color: ${(i=e.theme.colors)==null?void 0:i.text};
+            `)}}
+
+    p {
+        color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+        margin: 0;
+    }
+
+    svg {
+        line,
+        path,
+        circle {
+            stroke: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
+        }
+    }
+`,M=f.p`
+    font-size: ${e=>{var t;return(t=e.theme.fonts)==null?void 0:t.normal}};
+    font-weight: 300;
+`,O=f.div`
+    flex: 1;
+    text-align: ${e=>e.textAlign};
+
+    margin-right: ${e=>e.margin.right||0};
+    margin-left: ${e=>e.margin.left||0};
+`,R=f(l.Link)`
+    text-decoration: none;
+    &:focus-visible {
+        ${e=>l.headingElement(e)("h1",x.css`
+                    ${l.linkTabStyle(e)}
+                    display: inline-block;
+                `)}
+    }
+`;exports.default=D;

package/{widget-header-6ff6cb4a.mjs → widget-header-d82a1b88.mjs}

@@ -1,8 +1,12 @@
 import { jsx as a, jsxs as x } from "react/jsx-runtime";
-import { c as f, C as k, u as K, a as T, b as E, d as j, T as A, n as g, S as h, e as P, f as B, g as D, h as I, i as v, j as w, L as W, l as X } from "./index-addbd6d9.mjs";
-import { useContext as N, useState as z, useEffect as Y } from "react";
+import { css as f } from "@emotion/react";
+import g from "@emotion/styled";
+import { C as k, u as K, a as T, b as E, c as A, S as h, d as P, e as j, f as B, g as D, T as v, h as w, L as I, l as W } from "./index-8825e52f.mjs";
+import { useContext as N, useState as z, useEffect as X } from "react";
 import "react-dom";
-const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting" || t === "exited", p = {
+import { Transition as Y } from "react-transition-group";
+import "react-router-dom";
+const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting" || t === "exited", d = {
   fade: {
     in: "opacity: 1;",
     out: "opacity: 0;"
@@ -32,17 +36,17 @@ const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting"
     const { enter: i, exit: c } = e, n = i.transitionKeys.split(" "), m = M.indexOf(n[0]) > -1 ? "transform" : "opacity";
     if (q(t))
       return n && n.length > 0 ? f`
-                    ${n && n.length > 0 && n.map((s) => p[s] ? p[s].in : "")}
+                    ${n && n.length > 0 && n.map((o) => d[o] ? d[o].in : "")}
                     transition: ${m} ${i.duration}ms ${i.easing};
                 ` : "";
     const r = n && n.length > 0 && f`
-                ${n.map((s) => p[s] ? p[s].out : "")}
+                ${n.map((o) => d[o] ? d[o].out : "")}
             `;
     if (L(t)) {
-      const s = c.transitionKeys.split(" ");
-      return s && s.length > 0 && t === "exiting" ? f`
+      const o = c.transitionKeys.split(" ");
+      return o && o.length > 0 && t === "exiting" ? f`
                     ${r};
-                    ${s.map((o) => p[o] ? p[o].out : "")}
+                    ${o.map((s) => d[s] ? d[s].out : "")}
                     transition: ${m} ${c.duration}ms ${c.easing};
                 ` : r;
     }
@@ -71,25 +75,25 @@ const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting"
         }
       });
   },
-  get: (t) => p[t]
+  get: (t) => d[t]
 }, O = () => N(k), H = () => {
   const t = K(), e = O(), [i, c] = z([]), [n, m] = z();
-  return Y(() => {
+  return X(() => {
     if (t && e) {
-      const r = new T(t).withId(e.id), s = t.actions(r, e.type || E());
-      m(s), i !== null && (i.forEach((o) => {
-        s.dispatch(o.key, o.data).then((l) => o.resolve(l)).catch((l) => o.reject(l));
+      const r = new T(t).withId(e.id), o = t.actions(r, e.type || E());
+      m(o), i !== null && (i.forEach((s) => {
+        o.dispatch(s.key, s.data).then((l) => s.resolve(l)).catch((l) => s.reject(l));
       }), c(null));
     }
-  }, [t, e.id]), (r, s) => i !== null ? new Promise((o, l) => {
+  }, [t, e.id]), (r, o) => i !== null ? new Promise((s, l) => {
     i.push({
       key: r,
-      data: s,
-      resolve: o,
+      data: o,
+      resolve: s,
       reject: l
     });
-  }) : n.dispatch(r, s);
-}, Q = () => N(j), R = (t) => {
+  }) : n.dispatch(r, o);
+}, Q = () => N(A), R = (t) => {
   const {
     in: e,
     mountOnEnter: i = !0,
@@ -97,7 +101,7 @@ const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting"
     timeout: n,
     children: m,
     transitions: r
-  } = t, o = (() => {
+  } = t, s = (() => {
     var l, u;
     if (!(!r || r === "none")) {
       if (typeof r == "string")
@@ -114,12 +118,12 @@ const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting"
           }
         };
       if (typeof r == "object") {
-        const { enter: d, exit: $ } = r;
+        const { enter: p, exit: $ } = r;
         return {
           enter: {
             transitionKeys: (l = r.enter) == null ? void 0 : l.type,
             duration: n ? typeof n == "number" ? n : n.enter : 200,
-            easing: d.easing ? d.easing : "ease-in"
+            easing: p.easing ? p.easing : "ease-in"
           },
           exit: {
             transitionKeys: (u = r.enter) == null ? void 0 : u.type,
@@ -131,18 +135,18 @@ const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting"
     }
   })();
   return /* @__PURE__ */ a(
-    A,
+    Y,
     {
       timeout: {
-        enter: o && o.enter.duration || 0,
-        exit: o && o.exit.duration || 0
+        enter: s && s.enter.duration || 0,
+        exit: s && s.exit.duration || 0
       },
       in: e,
       appear: !0,
       mountOnEnter: i,
       unmountOnExit: c,
       onEnter: (l) => l.clientHeight,
-      children: (l) => m && m(l, o && b.compose(l, o))
+      children: (l) => m && m(l, s && b.compose(l, s))
     }
   );
 }, _ = ({ node: t }) => {
@@ -174,11 +178,11 @@ const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting"
   const e = t.symbol || { type: "Svg", content: "minimize" }, i = parseInt(t == null ? void 0 : t.size, 10) || 20;
   return /* @__PURE__ */ a(h, { size: i, symbol: e });
 }, C = ({ className: t = "", ...e }) => {
-  const i = H(), { size: c, padding: n, type: m, tooltip: r, show: s = !0 } = e;
+  const i = H(), { size: c, padding: n, type: m, tooltip: r, show: o = !0 } = e;
   return m === "back" ? /* @__PURE__ */ a(S, { size: c || "64px", padding: n || "10px", children: /* @__PURE__ */ a(
     R,
     {
-      in: s,
+      in: o,
       timeout: 300,
       transitions: {
         enter: {
@@ -190,7 +194,7 @@ const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting"
           easing: "ease-out"
         }
       },
-      children: (o, l) => /* @__PURE__ */ a(
+      children: (s, l) => /* @__PURE__ */ a(
         y,
         {
           title: r,
@@ -203,7 +207,7 @@ const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting"
         }
       )
     }
-  ) }) : s ? /* @__PURE__ */ x(
+  ) }) : o ? /* @__PURE__ */ x(
     S,
     {
       size: c || "64px",
@@ -273,29 +277,29 @@ const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting"
   return (i = (e = t.theme.accessibility) == null ? void 0 : e.colors) == null ? void 0 : i.inactiveText;
 }};
     }
-`, ot = ({ className: t, ...e }) => {
+`, mt = ({ className: t, ...e }) => {
   const {
     header: i,
     tagline: c,
     route: n,
     tooltip: m = "",
     actions: r = {},
-    textAlign: s = "center"
-  } = Q(), [o, l] = B(r);
-  return o.sort((u, d) => (u.order || 0) - (d.order || 0)), l.sort((u, d) => (u.order || 0) - (d.order || 0)), /* @__PURE__ */ x(U, { ...e, className: D(t, "humany-widget-header"), children: [
-    o.map((u, d) => /* @__PURE__ */ a(C, { ...u }, `${u.type}+_${d}`)),
+    textAlign: o = "center"
+  } = Q(), [s, l] = j(r);
+  return s.sort((u, p) => (u.order || 0) - (p.order || 0)), l.sort((u, p) => (u.order || 0) - (p.order || 0)), /* @__PURE__ */ x(U, { ...e, className: B(t, "humany-widget-header"), children: [
+    s.map((u, p) => /* @__PURE__ */ a(C, { ...u }, `${u.type}+_${p}`)),
     /* @__PURE__ */ x(
       tt,
       {
-        textAlign: s,
-        margin: I(o, l, s),
+        textAlign: o,
+        margin: D(s, l, o),
         children: [
           n ? /* @__PURE__ */ a(et, { routeName: n, title: m, "aria-label": m, children: /* @__PURE__ */ a(v, { variant: "h1", children: i }) }) : /* @__PURE__ */ a(v, { variant: "h1", children: i }),
           c && /* @__PURE__ */ a(Z, { children: c })
         ]
       }
     ),
-    l.map((u, d) => /* @__PURE__ */ a(C, { ...u }, `${u.type}+_${d}`))
+    l.map((u, p) => /* @__PURE__ */ a(C, { ...u }, `${u.type}+_${p}`))
   ] });
 }, U = g.div`
     display: flex;
@@ -345,18 +349,18 @@ const q = (t) => t === "entering" || t === "entered", L = (t) => t === "exiting"
 
     margin-right: ${(t) => t.margin.right || 0};
     margin-left: ${(t) => t.margin.left || 0};
-`, et = g(W)`
+`, et = g(I)`
     text-decoration: none;
     &:focus-visible {
         ${(t) => w(t)(
   "h1",
   f`
-                    ${X(t)}
+                    ${W(t)}
                     display: inline-block;
                 `
 )}
     }
 `;
 export {
-  ot as default
+  mt as default
 };