@telia-ace/widget-components-widget-header 1.3.0-rc.9 → 1.3.1

package/{index-99ca7e5e.mjs → index-140d4815.mjs}

@@ -37,7 +37,7 @@ const z = (i, r, s) => {
 }), v = (i) => g(
   i,
   "widget-header",
-  import("./widget-header-26fb51da.mjs"),
+  import("./widget-header-6fc51386.mjs"),
   (r) => {
     const { events: s } = i.get("$widget"), [e, n] = b(s), {
       actions: c = {},

package/{index-fa6483a9.js → index-952a9cc1.js}

@@ -1 +1 @@
-"use strict";const b=require("@telia-ace/widget-core"),p=require("@telia-ace/widget-ui"),f=require("@telia-ace/widget-utilities"),h=(r,i,o)=>{if(o!=="center")return{};const t=s=>s.reduce((e,a)=>{const[u]=a.padding.split("px"),[g]=a.size.split("px");return e+(+g+ +u*2)},0),n=t(r),c=t(i),l=n-c;return l===0?{}:{[n>c?"right":"left"]:`${Math.abs(l)}px`}},w=r=>Object.keys(r).reduce((i,o)=>{const t=r[o];if(!t)return i;const[n,c]=i,l=t.position==="left"?n:c;return r[o].symbol,l.push({symbol:t.symbol&&typeof t.symbol=="string"?{type:"Uri",content:t.symbol}:t.symbol,type:o,padding:t.padding||"10px",label:t.label,size:t.size||"64px",tooltip:t.tooltip,order:t.order||0,show:t.show}),i},[[],[]]),m=r=>r.getAsync("router").then(i=>{if(!i)return!0;const o=i.getInitialRoute(),{name:t,params:n}=i.getRouteData();return f.removeNullAndUndefinedValues(n),!((o==null?void 0:o.name)!==t||Object.keys(n).length>0)}),k=r=>p.createReactComponent(r,"widget-header",Promise.resolve().then(()=>require("./widget-header-e0f309cb.js")),i=>{const{events:o}=r.get("$widget"),[t,n]=b.createEventSubscriber(o),{actions:c={},tooltipBackLabel:l="",tooltipMinimizeLabel:d=""}=i.properties();if(i.actions.create("close",(s,e)=>e.preventDefault?void 0:r.get("$widget").invoke("close")),i.actions.create("back",(s,e)=>{if(!e.preventDefault)return r.getAsync("router").then(a=>{a.goBack()})}),i.properties(s=>{const{actions:e={}}=s;if(e!=null&&e.back&&(e.back.tooltip=e.back.tooltip?e.back.tooltip:l),e!=null&&e.minimize&&(e.minimize.tooltip=e.minimize.tooltip?e.minimize.tooltip:d),!!e.back)return Object.keys(e).forEach(a=>{const u=e[a];a==="back"&&(u.show=s.showBack)}),{actions:e}}),i.actions.create("show-back",s=>{i.writeProperties({showBack:s})}),c.back){const s=()=>m(r).then(e=>i.actions.dispatch("show-back",!e));s(),t("router:changed",s)}return i.actions.create("minimize",(s,e)=>e.preventDefault?void 0:r.get("$widget").invoke("hide")),()=>{n()}});exports.WidgetHeaderComponent=k;exports.calculateMargin=h;exports.createNodes=w;
+"use strict";const b=require("@telia-ace/widget-core"),p=require("@telia-ace/widget-ui"),f=require("@telia-ace/widget-utilities"),h=(r,i,o)=>{if(o!=="center")return{};const t=s=>s.reduce((e,a)=>{const[u]=a.padding.split("px"),[g]=a.size.split("px");return e+(+g+ +u*2)},0),n=t(r),c=t(i),l=n-c;return l===0?{}:{[n>c?"right":"left"]:`${Math.abs(l)}px`}},w=r=>Object.keys(r).reduce((i,o)=>{const t=r[o];if(!t)return i;const[n,c]=i,l=t.position==="left"?n:c;return r[o].symbol,l.push({symbol:t.symbol&&typeof t.symbol=="string"?{type:"Uri",content:t.symbol}:t.symbol,type:o,padding:t.padding||"10px",label:t.label,size:t.size||"64px",tooltip:t.tooltip,order:t.order||0,show:t.show}),i},[[],[]]),m=r=>r.getAsync("router").then(i=>{if(!i)return!0;const o=i.getInitialRoute(),{name:t,params:n}=i.getRouteData();return f.removeNullAndUndefinedValues(n),!((o==null?void 0:o.name)!==t||Object.keys(n).length>0)}),k=r=>p.createReactComponent(r,"widget-header",Promise.resolve().then(()=>require("./widget-header-15d41ef5.js")),i=>{const{events:o}=r.get("$widget"),[t,n]=b.createEventSubscriber(o),{actions:c={},tooltipBackLabel:l="",tooltipMinimizeLabel:d=""}=i.properties();if(i.actions.create("close",(s,e)=>e.preventDefault?void 0:r.get("$widget").invoke("close")),i.actions.create("back",(s,e)=>{if(!e.preventDefault)return r.getAsync("router").then(a=>{a.goBack()})}),i.properties(s=>{const{actions:e={}}=s;if(e!=null&&e.back&&(e.back.tooltip=e.back.tooltip?e.back.tooltip:l),e!=null&&e.minimize&&(e.minimize.tooltip=e.minimize.tooltip?e.minimize.tooltip:d),!!e.back)return Object.keys(e).forEach(a=>{const u=e[a];a==="back"&&(u.show=s.showBack)}),{actions:e}}),i.actions.create("show-back",s=>{i.writeProperties({showBack:s})}),c.back){const s=()=>m(r).then(e=>i.actions.dispatch("show-back",!e));s(),t("router:changed",s)}return i.actions.create("minimize",(s,e)=>e.preventDefault?void 0:r.get("$widget").invoke("hide")),()=>{n()}});exports.WidgetHeaderComponent=k;exports.calculateMargin=h;exports.createNodes=w;

package/index.js

@@ -1 +1 @@
-"use strict";const e=require("./index-fa6483a9.js");require("@telia-ace/widget-core");require("@telia-ace/widget-ui");require("@telia-ace/widget-utilities");module.exports=e.WidgetHeaderComponent;
+"use strict";const e=require("./index-952a9cc1.js");require("@telia-ace/widget-core");require("@telia-ace/widget-ui");require("@telia-ace/widget-utilities");module.exports=e.WidgetHeaderComponent;

package/index.mjs

@@ -1,4 +1,4 @@
-import { W as i } from "./index-99ca7e5e.mjs";
+import { W as i } from "./index-140d4815.mjs";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-ui";
 import "@telia-ace/widget-utilities";

package/package.json

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

package/{widget-header-e0f309cb.js → widget-header-15d41ef5.js}

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("@emotion/react"),m=require("@emotion/styled"),r=require("@telia-ace/widget-ui"),v=require("@telia-ace/widget-utilities"),b=require("./index-fa6483a9.js");require("@telia-ace/widget-core");const j=({node:e})=>{if(!e.symbol)return null;let t;const s=e.symbol.type==="Svg";if(e.symbol.type==="Svg"){const o=parseInt(e.size,10);isNaN(o)||(t=o)}return i.jsx(f,{symbol:e.symbol,svg:s,size:t,backgroundSize:"cover"})},f=m(({svg:e,...t})=>i.jsx(r.SymbolBadge,{...t}))`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p=require("@emotion/react"),m=require("@emotion/styled"),r=require("@telia-ace/widget-ui"),$=require("@telia-ace/widget-utilities"),b=require("./index-952a9cc1.js");require("@telia-ace/widget-core");const f=({node:e})=>{if(!e.symbol)return null;let t;const s=e.symbol.type==="Svg";if(e.symbol.type==="Svg"){const o=parseInt(e.size,10);isNaN(o)||(t=o)}return i.jsx(j,{symbol:e.symbol,svg:s,size:t,backgroundSize:"cover"})},j=m(({svg:e,...t})=>i.jsx(r.SymbolBadge,{...t}))`
   color: ${e=>{var t;return(t=e.theme.colors)==null?void 0:t.text}};
-  ${e=>!e.svg&&u.css`
+  ${e=>!e.svg&&p.css`
       border-radius: 50%;
       overflow: hidden;
     `}
-`,z=({node:e})=>{const t=e.symbol||{type:"Svg",content:"back"};return i.jsx(r.SymbolBadge,{size:20,symbol:t})},k=({node:e})=>{const t=e.symbol||{type:"Svg",content:"close"},s=parseInt(e==null?void 0:e.size,10)||14;return i.jsx(r.SymbolBadge,{size:s,symbol:t})},S=({node:e})=>{const t=e.symbol||{type:"Svg",content:"minimize"},s=parseInt(e==null?void 0:e.size,10)||20;return i.jsx(r.SymbolBadge,{size:s,symbol:t})},y=({className:e="",...t})=>{const s=r.useDispatch(),{size:o,padding:g,type:a,tooltip:l,show:d=!0}=t;return a==="back"?i.jsx($,{size:o||"64px",padding:g||"10px",children:i.jsx(r.TransitionComponent,{in:d,timeout:300,transitions:{enter:{type:"scale",easing:"cubic-bezier(.08,.84,.74,1.84)"},exit:{type:"scale",easing:"ease-out"}},children:(h,x)=>i.jsx(p,{"data-testid":"back-button",title:l,"aria-label":l,animationCss:x,onClick:()=>{s("back")},children:i.jsx(z,{node:t})})})}):d?i.jsxs($,{size:o||"64px",padding:g||"10px",squareRatio:a==="avatar",children:[a==="avatar"&&i.jsx(j,{node:t}),a==="close"&&i.jsx(p,{title:l,"aria-label":l,onClick:()=>{s("close")},children:i.jsx(k,{node:t})}),a==="minimize"&&i.jsx(p,{title:l,"aria-label":l,onClick:()=>{s("minimize")},children:i.jsx(S,{node:t})})]}):null},$=m.div`
+`,z=({node:e})=>{const t=e.symbol||{type:"Svg",content:"back"};return i.jsx(r.SymbolBadge,{size:20,symbol:t})},k=({node:e})=>{const t=e.symbol||{type:"Svg",content:"close"},s=parseInt(e==null?void 0:e.size,10)||14;return i.jsx(r.SymbolBadge,{size:s,symbol:t})},S=({node:e})=>{const t=e.symbol||{type:"Svg",content:"minimize"},s=parseInt(e==null?void 0:e.size,10)||20;return i.jsx(r.SymbolBadge,{size:s,symbol:t})},y=({className:e="",...t})=>{const s=r.useDispatch(),{size:o,padding:g,type:a,tooltip:l,show:d=!0}=t;return a==="back"?i.jsx(v,{size:o||"64px",padding:g||"10px",children:i.jsx(r.TransitionComponent,{in:d,timeout:300,transitions:{enter:{type:"scale",easing:"cubic-bezier(.08,.84,.74,1.84)"},exit:{type:"scale",easing:"ease-out"}},children:(x,h)=>i.jsx(u,{"data-testid":"back-button",title:l,"aria-label":l,animationCss:h,onClick:()=>{s("back")},children:i.jsx(z,{node:t})})})}):d?i.jsxs(v,{size:o||"64px",padding:g||"10px",squareRatio:a==="avatar",children:[a==="avatar"&&i.jsx(f,{node:t}),a==="close"&&i.jsx(u,{title:l,"aria-label":l,onClick:()=>{s("close")},children:i.jsx(k,{node:t})}),a==="minimize"&&i.jsx(u,{title:l,"aria-label":l,onClick:()=>{s("minimize")},children:i.jsx(S,{node:t})})]}):null},v=m.div`
   flex: 1;
   max-width: ${e=>e.size};
   ${e=>e.squareRatio&&`max-height: ${e.size};`}
@@ -25,7 +25,7 @@
     min-height: 1em;
     display: inline-block;
   }
-`,p=m.button`
+`,u=m.button`
   ${e=>!!e.animationCss&&e.animationCss};
   background: none;
   border: none;
@@ -35,12 +35,12 @@
     ${r.borderTabStyle};
     border-color: ${e=>{var t,s;return(s=(t=e.theme.accessibility)==null?void 0:t.colors)==null?void 0:s.inactiveText}};
   }
-`,N=({className:e,...t})=>{const{header:s,tagline:o,route:g,tooltip:a="",actions:l={},textAlign:d="center"}=r.useProperties(),[h,x]=b.createNodes(l);return h.sort((n,c)=>(n.order||0)-(c.order||0)),x.sort((n,c)=>(n.order||0)-(c.order||0)),i.jsxs(w,{...t,className:v.appendClassNames(e,"humany-widget-header"),children:[h.map((n,c)=>i.jsx(y,{...n},`${n.type}+_${c}`)),i.jsxs(C,{textAlign:d,margin:b.calculateMargin(h,x,d),children:[g?i.jsx(T,{routeName:g,title:a,"aria-label":a,children:i.jsx(r.Typography,{variant:"h1",children:s})}):i.jsx(r.Typography,{variant:"h1",children:s}),o&&i.jsx(q,{children:o})]}),x.map((n,c)=>i.jsx(y,{...n},`${n.type}+_${c}`))]})},w=m.div`
+`,N=({className:e,...t})=>{const{header:s,tagline:o,route:g,tooltip:a="",actions:l={},textAlign:d="center"}=r.useProperties(),[x,h]=b.createNodes(l);return x.sort((n,c)=>(n.order||0)-(c.order||0)),h.sort((n,c)=>(n.order||0)-(c.order||0)),i.jsxs(w,{...t,className:$.appendClassNames(e,"humany-widget-header"),children:[x.map((n,c)=>i.jsx(y,{...n},`${n.type}+_${c}`)),i.jsxs(C,{textAlign:d,margin:b.calculateMargin(x,h,d),children:[g?i.jsx(T,{routeName:g,title:a,"aria-label":a,children:i.jsx(r.Typography,{variant:"h1",children:s})}):i.jsx(r.Typography,{variant:"h1",children:s}),o&&i.jsx(q,{children:o})]}),h.map((n,c)=>i.jsx(y,{...n},`${n.type}+_${c}`))]})},w=m.div`
   display: flex;
   flex-direction: row;
   align-items: center;
 
-  ${e=>{var t,s;return r.headingElement(e)("h1",u.css`
+  ${e=>{var t,s;return r.headingElement(e)("h1",p.css`
         font-size: ${(t=e.theme.fonts)==null?void 0:t.huge};
         margin: 0;
         font-weight: 300;
@@ -65,13 +65,14 @@
 `,C=m.div`
   flex: 1;
   text-align: ${e=>e.textAlign};
-
+  overflow: auto;
+  max-height: 100%;
   margin-right: ${e=>e.margin.right||0};
   margin-left: ${e=>e.margin.left||0};
 `,T=m(r.Link)`
   text-decoration: none;
   &:focus-visible {
-    ${e=>r.headingElement(e)("h1",u.css`
+    ${e=>r.headingElement(e)("h1",p.css`
           ${r.linkTabStyle(e)}
           display: inline-block;
         `)}

package/{widget-header-26fb51da.mjs → widget-header-6fc51386.mjs}

@@ -1,9 +1,9 @@
 import { jsx as i, jsxs as u } from "react/jsx-runtime";
 import { css as y } from "@emotion/react";
 import c from "@emotion/styled";
-import { SymbolBadge as h, borderTabStyle as z, useDispatch as k, TransitionComponent as N, useProperties as S, Typography as f, headingElement as v, Link as C, linkTabStyle as w } from "@telia-ace/widget-ui";
+import { SymbolBadge as h, borderTabStyle as z, useDispatch as k, TransitionComponent as N, useProperties as S, Typography as f, headingElement as v, Link as w, linkTabStyle as C } from "@telia-ace/widget-ui";
 import { appendClassNames as T } from "@telia-ace/widget-utilities";
-import { c as A, a as W } from "./index-99ca7e5e.mjs";
+import { c as A, a as W } from "./index-140d4815.mjs";
 import "@telia-ace/widget-core";
 const B = ({ node: e }) => {
   if (!e.symbol)
@@ -11,8 +11,8 @@ const B = ({ node: e }) => {
   let t;
   const r = e.symbol.type === "Svg";
   if (e.symbol.type === "Svg") {
-    const o = parseInt(e.size, 10);
-    isNaN(o) || (t = o);
+    const s = parseInt(e.size, 10);
+    isNaN(s) || (t = s);
   }
   return /* @__PURE__ */ i(
     I,
@@ -42,8 +42,8 @@ const B = ({ node: e }) => {
   const t = e.symbol || { type: "Svg", content: "minimize" }, r = parseInt(e == null ? void 0 : e.size, 10) || 20;
   return /* @__PURE__ */ i(h, { size: r, symbol: t });
 }, x = ({ className: e = "", ...t }) => {
-  const r = k(), { size: o, padding: m, type: n, tooltip: a, show: g = !0 } = t;
-  return n === "back" ? /* @__PURE__ */ i($, { size: o || "64px", padding: m || "10px", children: /* @__PURE__ */ i(
+  const r = k(), { size: s, padding: m, type: n, tooltip: a, show: g = !0 } = t;
+  return n === "back" ? /* @__PURE__ */ i($, { size: s || "64px", padding: m || "10px", children: /* @__PURE__ */ i(
     N,
     {
       in: g,
@@ -75,7 +75,7 @@ const B = ({ node: e }) => {
   ) }) : g ? /* @__PURE__ */ u(
     $,
     {
-      size: o || "64px",
+      size: s || "64px",
       padding: m || "10px",
       squareRatio: n === "avatar",
       children: [
@@ -145,19 +145,19 @@ const B = ({ node: e }) => {
 `, O = ({ className: e, ...t }) => {
   const {
     header: r,
-    tagline: o,
+    tagline: s,
     route: m,
     tooltip: n = "",
     actions: a = {},
     textAlign: g = "center"
   } = S(), [d, p] = A(a);
-  return d.sort((s, l) => (s.order || 0) - (l.order || 0)), p.sort((s, l) => (s.order || 0) - (l.order || 0)), /* @__PURE__ */ u(
+  return d.sort((o, l) => (o.order || 0) - (l.order || 0)), p.sort((o, l) => (o.order || 0) - (l.order || 0)), /* @__PURE__ */ u(
     L,
     {
       ...t,
       className: T(e, "humany-widget-header"),
       children: [
-        d.map((s, l) => /* @__PURE__ */ i(x, { ...s }, `${s.type}+_${l}`)),
+        d.map((o, l) => /* @__PURE__ */ i(x, { ...o }, `${o.type}+_${l}`)),
         /* @__PURE__ */ u(
           _,
           {
@@ -165,11 +165,11 @@ const B = ({ node: e }) => {
             margin: W(d, p, g),
             children: [
               m ? /* @__PURE__ */ i(D, { routeName: m, title: n, "aria-label": n, children: /* @__PURE__ */ i(f, { variant: "h1", children: r }) }) : /* @__PURE__ */ i(f, { variant: "h1", children: r }),
-              o && /* @__PURE__ */ i(R, { children: o })
+              s && /* @__PURE__ */ i(R, { children: s })
             ]
           }
         ),
-        p.map((s, l) => /* @__PURE__ */ i(x, { ...s }, `${s.type}+_${l}`))
+        p.map((o, l) => /* @__PURE__ */ i(x, { ...o }, `${o.type}+_${l}`))
       ]
     }
   );
@@ -218,16 +218,17 @@ const B = ({ node: e }) => {
 `, _ = c.div`
   flex: 1;
   text-align: ${(e) => e.textAlign};
-
+  overflow: auto;
+  max-height: 100%;
   margin-right: ${(e) => e.margin.right || 0};
   margin-left: ${(e) => e.margin.left || 0};
-`, D = c(C)`
+`, D = c(w)`
   text-decoration: none;
   &:focus-visible {
     ${(e) => v(e)(
   "h1",
   y`
-          ${w(e)}
+          ${C(e)}
           display: inline-block;
         `
 )}