@telia-ace/widget-components-widget-header 1.0.17 → 1.0.19-next.0

package/LICENSE.txt

@@ -1,6 +1,6 @@
-Copyright © 2021, Telia Company AB. All rights reserved.
-
-THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
-THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
-AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
+Copyright © 2021, Telia Company AB. All rights reserved.
+
+THIS PACKAGE AND CONTAINING SOFTWARE IS PART OF
+THE HUMANY SERVICE. BY USING THIS SOFTWARE YOU
+AGREE TO THE FOLLOWING TERMS AND CONDITIONS:
 http://www.humany.com/legal

package/README.md

@@ -1,3 +1,3 @@
-# `@telia-ace/widget-components-widget-header`
-
-Widget header component for ACE Widgets.
+# `@telia-ace/widget-components-widget-header`
+
+Widget header component for ACE Widgets.

package/dist/avatar.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ActionNode } from './widget-header-component';
-declare type Props = {
-    node: ActionNode;
-};
-declare const Avatar: React.FC<Props>;
-export default Avatar;
+import React from 'react';
+import { ActionNode } from './widget-header-component';
+declare type Props = {
+    node: ActionNode;
+};
+declare const Avatar: React.FC<Props>;
+export default Avatar;

package/dist/back.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ActionNode } from './widget-header-component';
-declare type Props = {
-    node: ActionNode;
-};
-declare const Back: React.FC<Props>;
-export default Back;
+import React from 'react';
+import { ActionNode } from './widget-header-component';
+declare type Props = {
+    node: ActionNode;
+};
+declare const Back: React.FC<Props>;
+export default Back;

package/dist/close.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ActionNode } from './widget-header-component';
-declare type Props = {
-    node: ActionNode;
-};
-declare const Close: React.FC<Props>;
-export default Close;
+import React from 'react';
+import { ActionNode } from './widget-header-component';
+declare type Props = {
+    node: ActionNode;
+};
+declare const Close: React.FC<Props>;
+export default Close;

package/dist/index.0ad4edcb.js

@@ -0,0 +1,73 @@
+import { createEventSubscriber as p } from "@telia-ace/widget-core";
+import { createReactComponent as f } from "@telia-ace/widget-ui";
+import { removeNullAndUndefinedValues as b } from "@telia-ace/widget-utilities";
+const y = (s, e, n) => {
+  if (n !== "center")
+    return {};
+  const t = (a) => a.reduce((u, d) => {
+    const [l] = d.padding.split("px"), [g] = d.size.split("px");
+    return u + (+g + +l * 2);
+  }, 0), o = t(s), c = t(e), r = o - c;
+  return r === 0 ? {} : {
+    [o > c ? "right" : "left"]: `${Math.abs(r)}px`
+  };
+}, v = (s) => Object.keys(s).reduce(
+  (e, n) => {
+    const t = s[n];
+    if (!t)
+      return e;
+    const [o, c] = e, r = t.position === "left" ? o : c;
+    return s[n].symbol, r.push({
+      symbol: t.symbol && typeof t.symbol == "string" ? { type: "Uri", content: t.symbol } : t.symbol,
+      type: n,
+      padding: t.padding || "10px",
+      label: t.label,
+      size: t.size || "64px",
+      tooltip: t.tooltip,
+      order: t.order || 0,
+      show: t.show
+    }), e;
+  },
+  [[], []]
+), h = (s) => s.getAsync("router").then((e) => {
+  if (!e)
+    return !0;
+  const n = e.getInitialRoute(), { name: t, params: o } = e.getRouteData();
+  return b(o), !((n == null ? void 0 : n.name) !== t || Object.keys(o).length > 0);
+}), z = (s) => f(
+  s,
+  "widget-header",
+  import("./widget-header.ba71fd3f.js"),
+  (e) => {
+    const { events: n } = s.get("$widget"), [t, o] = p(n), { actions: c = {} } = e.properties();
+    if (e.actions.create("close", (r, i) => i.preventDefault ? void 0 : s.get("$widget").invoke("close")), e.actions.create("back", (r, i) => {
+      if (!i.preventDefault)
+        return s.getAsync("router").then((a) => {
+          a.goBack();
+        });
+    }), e.properties((r) => {
+      const { actions: i = {} } = r;
+      if (!!i.back)
+        return Object.keys(i).forEach((a) => {
+          const u = i[a];
+          a === "back" && (u.show = r.showBack);
+        }), { actions: i };
+    }), e.actions.create("show-back", (r) => {
+      e.writeProperties({ showBack: r });
+    }), c.back) {
+      const r = () => h(s).then(
+        (i) => e.actions.dispatch("show-back", !i)
+      );
+      r(), t("router:changed", r);
+    }
+    return e.actions.create("minimize", (r, i) => i.preventDefault ? void 0 : s.get("$widget").invoke("hide")), () => {
+      o();
+    };
+  }
+);
+export {
+  z as W,
+  y as a,
+  v as c
+};
+//# sourceMappingURL=index.0ad4edcb.js.map

package/dist/index.0ad4edcb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.0ad4edcb.js","sources":["../src/utils.ts","../src/widget-header-component.ts"],"sourcesContent":["import { RoutingService } from '@telia-ace/widget-routing';\nimport { removeNullAndUndefinedValues } from '@telia-ace/widget-utilities';\nimport { Container } from '@webprovisions/platform';\nimport { ActionNode, Symbol } from './widget-header-component';\n\nexport const calculateMargin = (\n    leftNodes: ActionNode[],\n    rightNodes: ActionNode[],\n    textAlign: string\n) => {\n    if (textAlign !== 'center') {\n        return {};\n    }\n\n    const calculate = (nodes: ActionNode[]) => {\n        return nodes.reduce<number>((acc, node) => {\n            const [padding] = node.padding.split('px');\n            const [size] = node.size.split('px');\n            return acc + (+size + +padding * 2);\n        }, 0);\n    };\n    const leftSize = calculate(leftNodes);\n    const rightSize = calculate(rightNodes);\n\n    const total = leftSize - rightSize;\n\n    if (total === 0) {\n        return {};\n    }\n\n    const direction = leftSize > rightSize ? 'right' : 'left';\n    return {\n        [direction]: `${Math.abs(total)}px`,\n    };\n};\n\nexport const createNodes = (actions: { [key: string]: ActionNode }) => {\n    return Object.keys(actions).reduce<[ActionNode[], ActionNode[]]>(\n        (acc, key) => {\n            const node = actions[key];\n            if (!node) {\n                return acc;\n            }\n            const [left, right] = acc;\n            const arr = node.position === 'left' ? left : right;\n\n            let symbol = actions[key].symbol;\n            if (symbol && typeof symbol === 'string') {\n                symbol = {\n                    type: 'Uri',\n                    content: symbol,\n                };\n            }\n\n            arr.push({\n                symbol:\n                    node.symbol && typeof node.symbol === 'string'\n                        ? { type: 'Uri', content: node.symbol }\n                        : (node.symbol as Symbol),\n                type: key,\n                padding: node.padding || '10px',\n                label: node.label,\n                size: node.size || '64px',\n                tooltip: node.tooltip,\n                order: node.order || 0,\n                show: node.show,\n            });\n\n            return acc;\n        },\n        [[], []]\n    );\n};\n\nexport const isOnInitialRoute = (container: Container) =>\n    container.getAsync('router').then((router: RoutingService) => {\n        if (!router) {\n            return true;\n        }\n        const initialRoute = router.getInitialRoute();\n        const { name, params } = router.getRouteData();\n\n        removeNullAndUndefinedValues(params);\n\n        if (initialRoute?.name !== name || Object.keys(params).length > 0) {\n            return false;\n        }\n\n        return true;\n    });\n","import { createEventSubscriber } from '@telia-ace/widget-core';\nimport { RoutingService } from '@telia-ace/widget-routing';\nimport { createReactComponent } from '@telia-ace/widget-ui';\nimport { Container } from '@webprovisions/platform';\nimport { isOnInitialRoute } from './utils';\n\nexport type Symbol = {\n    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\n    content: string;\n};\n\nexport type ActionNode = {\n    type: string;\n    label?: string;\n    position?: 'right' | 'left';\n    symbol?: Symbol;\n    size: string;\n    padding: string;\n    tooltip?: string;\n    order?: number;\n    show?: boolean;\n};\n\nexport type WidgetHeaderComponentProps = {\n    header: string;\n    tagline: string;\n    textAlign?: string;\n    actions?: { [key: string]: ActionNode };\n    tooltip?: string;\n    route?: string;\n};\n\nconst WidgetHeaderComponent = (container: Container) => {\n    return createReactComponent(\n        container,\n        'widget-header',\n        import('./widget-header'),\n        (component) => {\n            const { events } = container.get('$widget');\n            const [subscribe, unsubscribe] = createEventSubscriber(events);\n\n            const { actions = {} } = component.properties<WidgetHeaderComponentProps>();\n\n            component.actions.create('close', (data, options) => {\n                if (options.preventDefault) {\n                    return;\n                }\n\n                const widget = container.get('$widget');\n                return widget.invoke('close');\n            });\n            component.actions.create('back', (data, options) => {\n                if (options.preventDefault) {\n                    return;\n                }\n\n                return container.getAsync('router').then((router: RoutingService) => {\n                    router.goBack();\n                });\n            });\n\n            component.properties((properties) => {\n                const { actions = {} } = properties;\n\n                if (!actions.back) {\n                    return;\n                }\n\n                Object.keys(actions).forEach((key) => {\n                    const node = actions[key];\n                    if (key === 'back') {\n                        node.show = properties.showBack;\n                    }\n                });\n\n                return { actions };\n            });\n\n            component.actions.create('show-back', (showBack) => {\n                component.writeProperties({ showBack });\n            });\n\n            if (actions.back) {\n                const showBack = () =>\n                    isOnInitialRoute(container).then((onInitialRoute) =>\n                        component.actions.dispatch('show-back', !onInitialRoute)\n                    );\n\n                showBack();\n                subscribe('router:changed', showBack);\n            }\n\n            component.actions.create('minimize', (data, options) => {\n                if (options.preventDefault) {\n                    return;\n                }\n\n                const widget = container.get('$widget');\n                return widget.invoke('hide');\n            });\n\n            return () => {\n                unsubscribe();\n            };\n        }\n    );\n};\n\nexport default WidgetHeaderComponent;\n"],"names":["calculateMargin","leftNodes","rightNodes","textAlign","calculate","nodes","acc","node","padding","size","leftSize","rightSize","total","createNodes","actions","key","left","right","arr","isOnInitialRoute","container","router","initialRoute","name","params","removeNullAndUndefinedValues","WidgetHeaderComponent","createReactComponent","component","events","subscribe","unsubscribe","createEventSubscriber","data","options","properties","showBack","onInitialRoute"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import WidgetHeaderComponent from './widget-header-component';
-export default WidgetHeaderComponent;
+import WidgetHeaderComponent from './widget-header-component';
+export default WidgetHeaderComponent;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { W as i } from "./index.7df5456d.js";
+import { W as i } from "./index.0ad4edcb.js";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-ui";
 import "@telia-ace/widget-utilities";

package/dist/minimize.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ActionNode } from './widget-header-component';
-declare type Props = {
-    node: ActionNode;
-};
-declare const Minimize: React.FC<Props>;
-export default Minimize;
+import React from 'react';
+import { ActionNode } from './widget-header-component';
+declare type Props = {
+    node: ActionNode;
+};
+declare const Minimize: React.FC<Props>;
+export default Minimize;

package/dist/node.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { ActionNode } from './widget-header-component';
-declare type Props = Merge<ActionNode, {
-    className?: string;
-}>;
-declare const Node: React.FC<Props>;
-export default Node;
+import React from 'react';
+import { ActionNode } from './widget-header-component';
+declare type Props = Merge<ActionNode, {
+    className?: string;
+}>;
+declare const Node: React.FC<Props>;
+export default Node;

package/dist/utils.d.ts

@@ -1,9 +1,9 @@
-import { Container } from '@webprovisions/platform';
-import { ActionNode } from './widget-header-component';
-export declare const calculateMargin: (leftNodes: ActionNode[], rightNodes: ActionNode[], textAlign: string) => {
-    [x: string]: string;
-};
-export declare const createNodes: (actions: {
-    [key: string]: ActionNode;
-}) => [ActionNode[], ActionNode[]];
-export declare const isOnInitialRoute: (container: Container) => Promise<boolean>;
+import { Container } from '@webprovisions/platform';
+import { ActionNode } from './widget-header-component';
+export declare const calculateMargin: (leftNodes: ActionNode[], rightNodes: ActionNode[], textAlign: string) => {
+    [x: string]: string;
+};
+export declare const createNodes: (actions: {
+    [key: string]: ActionNode;
+}) => [ActionNode[], ActionNode[]];
+export declare const isOnInitialRoute: (container: Container) => Promise<boolean>;

package/dist/widget-header-component.d.ts

@@ -1,28 +1,28 @@
-import { Container } from '@webprovisions/platform';
-export declare type Symbol = {
-    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;
-    content: string;
-};
-export declare type ActionNode = {
-    type: string;
-    label?: string;
-    position?: 'right' | 'left';
-    symbol?: Symbol;
-    size: string;
-    padding: string;
-    tooltip?: string;
-    order?: number;
-    show?: boolean;
-};
-export declare type WidgetHeaderComponentProps = {
-    header: string;
-    tagline: string;
-    textAlign?: string;
-    actions?: {
-        [key: string]: ActionNode;
-    };
-    tooltip?: string;
-    route?: string;
-};
-declare const WidgetHeaderComponent: (container: Container) => Promise<void>;
-export default WidgetHeaderComponent;
+import { Container } from '@webprovisions/platform';
+export declare type Symbol = {
+    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;
+    content: string;
+};
+export declare type ActionNode = {
+    type: string;
+    label?: string;
+    position?: 'right' | 'left';
+    symbol?: Symbol;
+    size: string;
+    padding: string;
+    tooltip?: string;
+    order?: number;
+    show?: boolean;
+};
+export declare type WidgetHeaderComponentProps = {
+    header: string;
+    tagline: string;
+    textAlign?: string;
+    actions?: {
+        [key: string]: ActionNode;
+    };
+    tooltip?: string;
+    route?: string;
+};
+declare const WidgetHeaderComponent: (container: Container) => Promise<void>;
+export default WidgetHeaderComponent;

package/dist/{widget-header.95f2f17b.js → widget-header.ba71fd3f.js}

@@ -1,29 +1,29 @@
 var A = Object.defineProperty, W = Object.defineProperties;
 var B = Object.getOwnPropertyDescriptors;
-var $ = Object.getOwnPropertySymbols;
-var v = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
-var E = (e, t, i) => t in e ? A(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, h = (e, t) => {
+var h = Object.getOwnPropertySymbols;
+var E = Object.prototype.hasOwnProperty, k = Object.prototype.propertyIsEnumerable;
+var z = (e, t, i) => t in e ? A(e, t, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[t] = i, u = (e, t) => {
   for (var i in t || (t = {}))
-    v.call(t, i) && E(e, i, t[i]);
-  if ($)
-    for (var i of $(t))
-      k.call(t, i) && E(e, i, t[i]);
+    E.call(t, i) && z(e, i, t[i]);
+  if (h)
+    for (var i of h(t))
+      k.call(t, i) && z(e, i, t[i]);
   return e;
 }, N = (e, t) => W(e, B(t));
 var f = (e, t) => {
   var i = {};
   for (var a in e)
-    v.call(e, a) && t.indexOf(a) < 0 && (i[a] = e[a]);
-  if (e != null && $)
-    for (var a of $(e))
+    E.call(e, a) && t.indexOf(a) < 0 && (i[a] = e[a]);
+  if (e != null && h)
+    for (var a of h(e))
       t.indexOf(a) < 0 && k.call(e, a) && (i[a] = e[a]);
   return i;
 };
-import { SymbolBadge as x, borderTabStyle as I, useDispatch as M, TransitionComponent as R, useProperties as q, Typography as S, headingElement as T, Link as L, linkTabStyle as _ } from "@telia-ace/widget-ui";
+import { SymbolBadge as $, borderTabStyle as I, useDispatch as M, TransitionComponent as R, useProperties as q, Typography as S, headingElement as T, Link as L, linkTabStyle as _ } from "@telia-ace/widget-ui";
 import { appendClassNames as D } from "@telia-ace/widget-utilities";
 import r from "react";
-import c, { css as d } from "styled-components";
-import { c as H, a as P } from "./index.7df5456d.js";
+import c, { css as x } from "styled-components";
+import { c as H, a as P } from "./index.0ad4edcb.js";
 import "@telia-ace/widget-core";
 const j = ({ node: e }) => {
   if (!e.symbol)
@@ -42,40 +42,40 @@ const j = ({ node: e }) => {
   });
 }, F = c((i) => {
   var a = i, { svg: e } = a, t = f(a, ["svg"]);
-  return /* @__PURE__ */ r.createElement(x, h({}, t));
+  return /* @__PURE__ */ r.createElement($, u({}, t));
 })`
     color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-    ${(e) => !e.svg && d`
+    ${(e) => !e.svg && x`
             border-radius: 50%;
             overflow: hidden;
         `}
 `, G = ({ node: e }) => {
   const t = e.symbol || { type: "Svg", content: "back" };
-  return /* @__PURE__ */ r.createElement(x, {
+  return /* @__PURE__ */ r.createElement($, {
     size: 20,
     symbol: t
   });
 }, J = ({ node: e }) => {
   const t = e.symbol || { type: "Svg", content: "close" }, i = parseInt(e == null ? void 0 : e.size, 10) || 14;
-  return /* @__PURE__ */ r.createElement(x, {
+  return /* @__PURE__ */ r.createElement($, {
     size: i,
     symbol: t
   });
 }, K = ({ node: e }) => {
   const t = e.symbol || { type: "Svg", content: "minimize" }, i = parseInt(e == null ? void 0 : e.size, 10) || 20;
-  return /* @__PURE__ */ r.createElement(x, {
+  return /* @__PURE__ */ r.createElement($, {
     size: i,
     symbol: t
   });
 }, C = (i) => {
   var a = i, { className: e = "" } = a, t = f(a, ["className"]);
-  const m = M(), { size: g, padding: p, type: s, tooltip: o, show: b = !0 } = t;
-  return s === "back" ? /* @__PURE__ */ r.createElement(w, {
-    size: g || "64px",
-    padding: p || "10px"
+  const m = M(), { size: p, padding: g, type: o, tooltip: s, show: b = !0 } = t;
+  return o === "back" ? /* @__PURE__ */ r.createElement(w, {
+    size: p || "64px",
+    padding: g || "10px"
   }, /* @__PURE__ */ r.createElement(R, {
     in: b,
     timeout: 300,
@@ -89,32 +89,32 @@ const j = ({ node: e }) => {
         easing: "ease-out"
       }
     }
-  }, (u, y) => /* @__PURE__ */ r.createElement(z, {
-    title: o,
-    "aria-label": o,
-    animationCss: y,
+  }, (y, d) => /* @__PURE__ */ r.createElement(v, {
+    title: s,
+    "aria-label": s,
+    animationCss: d,
     onClick: () => {
       m("back");
     }
   }, /* @__PURE__ */ r.createElement(G, {
     node: t
   })))) : b ? /* @__PURE__ */ r.createElement(w, {
-    size: g || "64px",
-    padding: p || "10px",
-    squareRatio: s === "avatar"
-  }, s === "avatar" && /* @__PURE__ */ r.createElement(j, {
+    size: p || "64px",
+    padding: g || "10px",
+    squareRatio: o === "avatar"
+  }, o === "avatar" && /* @__PURE__ */ r.createElement(j, {
     node: t
-  }), s === "close" && /* @__PURE__ */ r.createElement(z, {
-    title: o,
-    "aria-label": o,
+  }), o === "close" && /* @__PURE__ */ r.createElement(v, {
+    title: s,
+    "aria-label": s,
     onClick: () => {
       m("close");
     }
   }, /* @__PURE__ */ r.createElement(J, {
     node: t
-  })), s === "minimize" && /* @__PURE__ */ r.createElement(z, {
-    title: o,
-    "aria-label": o,
+  })), o === "minimize" && /* @__PURE__ */ r.createElement(v, {
+    title: s,
+    "aria-label": s,
     onClick: () => {
       m("minimize");
     }
@@ -145,47 +145,45 @@ const j = ({ node: e }) => {
         min-height: 1em;
         display: inline-block;
     }
-`, z = c.button`
+`, v = c.button`
     ${(e) => !!e.animationCss && e.animationCss};
     background: none;
     border: none;
     cursor: pointer;
     padding: 0;
-    &:focus {
-        ${(e) => {
-  var t, i, a;
-  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && d`
-                ${I};
-                border-color: ${(a = (i = e.theme.accessibility) == null ? void 0 : i.colors) == null ? void 0 : a.inactiveText};
-            `;
+    &:focus-visible {
+        ${I};
+        border-color: ${(e) => {
+  var t, i;
+  return (i = (t = e.theme.accessibility) == null ? void 0 : t.colors) == null ? void 0 : i.inactiveText;
 }};
     }
-`, re = (i) => {
+`, ae = (i) => {
   var a = i, { className: e } = a, t = f(a, ["className"]);
   const {
     header: m,
-    tagline: g,
-    route: p,
-    tooltip: s = "",
-    actions: o = {},
+    tagline: p,
+    route: g,
+    tooltip: o = "",
+    actions: s = {},
     textAlign: b = "center"
-  } = q(), [u, y] = H(o);
-  return u.sort((n, l) => (n.order || 0) - (l.order || 0)), y.sort((n, l) => (n.order || 0) - (l.order || 0)), /* @__PURE__ */ r.createElement(O, N(h({}, t), {
+  } = q(), [y, d] = H(s);
+  return y.sort((n, l) => (n.order || 0) - (l.order || 0)), d.sort((n, l) => (n.order || 0) - (l.order || 0)), /* @__PURE__ */ r.createElement(O, N(u({}, t), {
     className: D(e, "humany-widget-header")
-  }), u.map((n, l) => /* @__PURE__ */ r.createElement(C, h({
+  }), y.map((n, l) => /* @__PURE__ */ r.createElement(C, u({
     key: `${n.type}+_${l}`
   }, n))), /* @__PURE__ */ r.createElement(U, {
     textAlign: b,
-    margin: P(u, y, b)
-  }, p ? /* @__PURE__ */ r.createElement(V, {
-    routeName: p,
-    title: s,
-    "aria-label": s
+    margin: P(y, d, b)
+  }, g ? /* @__PURE__ */ r.createElement(V, {
+    routeName: g,
+    title: o,
+    "aria-label": o
   }, /* @__PURE__ */ r.createElement(S, {
     variant: "h1"
   }, m)) : /* @__PURE__ */ r.createElement(S, {
     variant: "h1"
-  }, m), g && /* @__PURE__ */ r.createElement(Q, null, g)), y.map((n, l) => /* @__PURE__ */ r.createElement(C, h({
+  }, m), p && /* @__PURE__ */ r.createElement(Q, null, p)), d.map((n, l) => /* @__PURE__ */ r.createElement(C, u({
     key: `${n.type}+_${l}`
   }, n))));
 }, O = c.div`
@@ -193,18 +191,21 @@ const j = ({ node: e }) => {
     flex-direction: row;
     align-items: center;
 
-    ${T("h1", d`
+    ${T(
+  "h1",
+  x`
             font-size: ${(e) => {
-  var t;
-  return (t = e.theme.fonts) == null ? void 0 : t.huge;
-}};
+    var t;
+    return (t = e.theme.fonts) == null ? void 0 : t.huge;
+  }};
             margin: 0;
             font-weight: 300;
             color: ${(e) => {
-  var t;
-  return (t = e.theme.colors) == null ? void 0 : t.text;
-}};
-        `)}
+    var t;
+    return (t = e.theme.colors) == null ? void 0 : t.text;
+  }};
+        `
+)}
 
     p {
         color: ${(e) => {
@@ -238,19 +239,17 @@ const j = ({ node: e }) => {
     margin-left: ${(e) => e.margin.left || 0};
 `, V = c(L)`
     text-decoration: none;
-    &:focus {
-        ${T("h1", d`
-                ${(e) => {
-  var t;
-  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && d`
-                        ${_}
-                        display: inline-block;
-                    `;
-}};
-            `)}
+    &:focus-visible {
+        ${T(
+  "h1",
+  x`
+                ${_}
+                display: inline-block;
+            `
+)}
     }
 `;
 export {
-  re as default
+  ae as default
 };
-//# sourceMappingURL=widget-header.95f2f17b.js.map
+//# sourceMappingURL=widget-header.ba71fd3f.js.map

package/dist/widget-header.ba71fd3f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-header.ba71fd3f.js","sources":["../src/avatar.tsx","../src/back.tsx","../src/close.tsx","../src/minimize.tsx","../src/node.tsx","../src/widget-header.tsx"],"sourcesContent":["import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport styled, { css } from 'styled-components';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = { node: ActionNode };\nconst Avatar: React.FC<Props> = ({ node }) => {\n    if (!node.symbol) {\n        return null;\n    }\n\n    let size;\n    const isSvg = node.symbol.type === 'Svg';\n    if (node.symbol.type === 'Svg') {\n        const sizeNumber = parseInt(node.size, 10);\n\n        if (!isNaN(sizeNumber)) {\n            size = sizeNumber;\n        }\n    }\n\n    return <Wrapper symbol={node.symbol} svg={isSvg} size={size} backgroundSize=\"cover\" />;\n};\n\nexport default Avatar;\n\nconst Wrapper = styled(({ svg, ...other }) => <SymbolBadge {...other} />)`\n    color: ${(p) => p.theme.colors?.text};\n    ${(p) =>\n        !p.svg &&\n        css`\n            border-radius: 50%;\n            overflow: hidden;\n        `}\n`;\n","import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = {\n    node: ActionNode;\n};\nconst Back: React.FC<Props> = ({ node }) => {\n    const symbol = node.symbol || { type: 'Svg', content: 'back' };\n    return <SymbolBadge size={20} symbol={symbol} />;\n};\n\nexport default Back;\n","import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = {\n    node: ActionNode;\n};\nconst Close: React.FC<Props> = ({ node }) => {\n    const symbol = node.symbol || { type: 'Svg', content: 'close' };\n    const size = parseInt(node?.size, 10) || 14;\n    return <SymbolBadge size={size} symbol={symbol} />;\n};\n\nexport default Close;\n","import { SymbolBadge } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = {\n    node: ActionNode;\n};\nconst Minimize: React.FC<Props> = ({ node }) => {\n    const symbol = node.symbol || { type: 'Svg', content: 'minimize' };\n    const size = parseInt(node?.size, 10) || 20;\n    return <SymbolBadge size={size} symbol={symbol} />;\n};\n\nexport default Minimize;\n","import { borderTabStyle, TransitionComponent, useDispatch } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport styled from 'styled-components';\nimport Avatar from './avatar';\nimport Back from './back';\nimport Close from './close';\nimport Minimize from './minimize';\nimport { ActionNode } from './widget-header-component';\n\ntype Props = Merge<\n    ActionNode,\n    {\n        className?: string;\n    }\n>;\n\nconst Node: React.FC<Props> = ({ className = '', ...node }) => {\n    const dispatch = useDispatch();\n\n    const { size, padding, type, tooltip, show = true } = node;\n\n    if (type === 'back') {\n        return (\n            <NodeWrapper size={size || '64px'} padding={padding || '10px'}>\n                <TransitionComponent\n                    in={show}\n                    timeout={300}\n                    transitions={{\n                        enter: {\n                            type: 'scale',\n                            easing: 'cubic-bezier(.08,.84,.74,1.84)',\n                        },\n                        exit: {\n                            type: 'scale',\n                            easing: 'ease-out',\n                        },\n                    }}\n                >\n                    {(state: any, css: any) => (\n                        <ActionButton\n                            title={tooltip}\n                            aria-label={tooltip}\n                            animationCss={css}\n                            onClick={() => {\n                                dispatch('back');\n                            }}\n                        >\n                            <Back node={node} />\n                        </ActionButton>\n                    )}\n                </TransitionComponent>\n            </NodeWrapper>\n        );\n    }\n\n    if (!show) {\n        return null;\n    }\n\n    return (\n        <NodeWrapper\n            size={size || '64px'}\n            padding={padding || '10px'}\n            squareRatio={type === 'avatar'}\n        >\n            {type === 'avatar' && <Avatar node={node} />}\n            {type === 'close' && (\n                <ActionButton\n                    title={tooltip}\n                    aria-label={tooltip}\n                    onClick={() => {\n                        dispatch('close');\n                    }}\n                >\n                    <Close node={node} />\n                </ActionButton>\n            )}\n            {type === 'minimize' && (\n                <ActionButton\n                    title={tooltip}\n                    aria-label={tooltip}\n                    onClick={() => {\n                        dispatch('minimize');\n                    }}\n                >\n                    <Minimize node={node} />\n                </ActionButton>\n            )}\n        </NodeWrapper>\n    );\n};\n\nexport default Node;\n\nconst NodeWrapper = styled.div<{ size: string; padding: string; squareRatio?: boolean }>`\n    flex: 1;\n    max-width: ${(p) => p.size};\n    ${(p) => p.squareRatio && `max-height: ${p.size};`}\n    text-align: center;\n    padding: 0 ${(p) => p.padding};\n    && {\n        box-sizing: content-box;\n    }\n\n    svg {\n        vertical-align: middle;\n    }\n\n    i {\n        color: ${(p) => p.theme.colors?.text};\n        font-size: ${(p) => p.size};\n        min-width: 1em;\n        min-height: 1em;\n        display: inline-block;\n    }\n`;\nconst ActionButton = styled.button<any>`\n    ${(p) => !!p.animationCss && p.animationCss};\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    &:focus-visible {\n        ${borderTabStyle};\n        border-color: ${(p) => p.theme.accessibility?.colors?.inactiveText};\n    }\n`;\n","import {\n    headingElement,\n    Link,\n    linkTabStyle,\n    Typography,\n    useProperties,\n} from '@telia-ace/widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React from 'react';\nimport styled, { css } from 'styled-components';\nimport Node from './node';\nimport { calculateMargin, createNodes } from './utils';\nimport { WidgetHeaderComponentProps } from './widget-header-component';\n\ntype Props = {\n    className: string;\n    role?: string;\n};\n\nconst WidgetHeader: React.FC<Props> = ({ className, ...other }) => {\n    const {\n        header,\n        tagline,\n        route,\n        tooltip = '',\n        actions = {},\n        textAlign = 'center',\n    } = useProperties<WidgetHeaderComponentProps>();\n\n    const [leftNodes, rightNodes] = createNodes(actions);\n    leftNodes.sort((a, b) => (a.order || 0) - (b.order || 0));\n    rightNodes.sort((a, b) => (a.order || 0) - (b.order || 0));\n    return (\n        <Wrapper {...other} className={appendClassNames(className, 'humany-widget-header')}>\n            {leftNodes.map((node, key) => (\n                <Node key={`${node.type}+_${key}`} {...node} />\n            ))}\n\n            <MainNode\n                textAlign={textAlign}\n                margin={calculateMargin(leftNodes, rightNodes, textAlign)}\n            >\n                {route ? (\n                    <StyledLink routeName={route} title={tooltip} aria-label={tooltip}>\n                        <Typography variant=\"h1\">{header}</Typography>\n                    </StyledLink>\n                ) : (\n                    <Typography variant=\"h1\">{header}</Typography>\n                )}\n                {tagline && <Tagline>{tagline}</Tagline>}\n            </MainNode>\n\n            {rightNodes.map((node, key) => (\n                <Node key={`${node.type}+_${key}`} {...node} />\n            ))}\n        </Wrapper>\n    );\n};\n\nexport default WidgetHeader;\n\nconst Wrapper = styled.div`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ${headingElement(\n        'h1',\n        css`\n            font-size: ${(p) => p.theme.fonts?.huge};\n            margin: 0;\n            font-weight: 300;\n            color: ${(p) => p.theme.colors?.text};\n        `\n    )}\n\n    p {\n        color: ${(p) => p.theme.colors?.text};\n        margin: 0;\n    }\n\n    svg {\n        line,\n        path,\n        circle {\n            stroke: ${(p) => p.theme.colors?.text};\n        }\n    }\n`;\n\nconst Tagline = styled.p`\n    font-size: ${(p) => p.theme.fonts?.normal};\n    font-weight: 300;\n`;\n\nconst MainNode = styled.div<{\n    textAlign: string;\n    margin: { left?: string; right?: string };\n}>`\n    flex: 1;\n    text-align: ${(p) => p.textAlign};\n\n    margin-right: ${(p) => p.margin.right || 0};\n    margin-left: ${(p) => p.margin.left || 0};\n`;\n\nconst StyledLink = styled(Link)<any>`\n    text-decoration: none;\n    &:focus-visible {\n        ${headingElement(\n            'h1',\n            css`\n                ${linkTabStyle}\n                display: inline-block;\n            `\n        )}\n    }\n`;\n"],"names":["Avatar","node","size","isSvg","sizeNumber","React","Wrapper","styled","_a","_b","svg","other","__objRest","SymbolBadge","__spreadValues","p","css","Back","symbol","Close","Minimize","Node","className","dispatch","useDispatch","padding","type","tooltip","show","NodeWrapper","TransitionComponent","state","ActionButton","borderTabStyle","WidgetHeader","header","tagline","route","actions","textAlign","useProperties","leftNodes","rightNodes","createNodes","a","b","__spreadProps","appendClassNames","key","MainNode","calculateMargin","StyledLink","Typography","Tagline","headingElement","Link","linkTabStyle"],"mappings":"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"}

package/dist/widget-header.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-declare type Props = {
-    className: string;
-    role?: string;
-};
-declare const WidgetHeader: React.FC<Props>;
-export default WidgetHeader;
+import React from 'react';
+declare type Props = {
+    className: string;
+    role?: string;
+};
+declare const WidgetHeader: React.FC<Props>;
+export default WidgetHeader;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telia-ace/widget-components-widget-header",
-    "version": "1.0.17",
+    "version": "1.0.19-next.0",
     "description": "Widget header component for ACE Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
@@ -8,6 +8,7 @@
         "telia"
     ],
     "main": "dist/index.js",
+    "sourceMain": "src/index.ts",
     "type": "module",
     "types": "dist/index.d.ts",
     "files": [
@@ -25,21 +26,20 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@telia-ace/widget-core": "^1.0.14",
-        "@telia-ace/widget-routing": "^1.0.15",
-        "@telia-ace/widget-ui": "^1.0.21",
-        "@telia-ace/widget-utilities": "^1.0.3",
+        "@telia-ace/widget-core": "^1.0.16-next.1",
+        "@telia-ace/widget-routing": "^1.0.17-next.1",
+        "@telia-ace/widget-ui": "^1.0.23-next.1",
+        "@telia-ace/widget-utilities": "^1.0.5-next.1",
         "@webprovisions/platform": "^1.1.2"
     },
     "peerDependencies": {
-        "react": "^16.8.0",
-        "react-dom": "^16.8.0",
-        "styled-components": "^4.3.2"
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "styled-components": "^5.3.6"
     },
     "devDependencies": {
-        "@types/react": "^16.8.0",
-        "@types/react-dom": "^16.8.0",
-        "@types/styled-components": "^5.1.7"
+        "@types/react-dom": "^18.0.6",
+        "@types/styled-components": "^5.1.26"
     },
-    "gitHead": "187396559955650eb5545c4fc4540b16658bcff0"
+    "gitHead": "d475a1626b7bec7add7db950829ef7943a9e0e25"
 }

package/dist/index.7df5456d.js

@@ -1,63 +0,0 @@
-import { createEventSubscriber as p } from "@telia-ace/widget-core";
-import { createReactComponent as f } from "@telia-ace/widget-ui";
-import { removeNullAndUndefinedValues as b } from "@telia-ace/widget-utilities";
-const y = (s, e, n) => {
-  if (n !== "center")
-    return {};
-  const t = (a) => a.reduce((u, d) => {
-    const [l] = d.padding.split("px"), [g] = d.size.split("px");
-    return u + (+g + +l * 2);
-  }, 0), o = t(s), c = t(e), r = o - c;
-  return r === 0 ? {} : {
-    [o > c ? "right" : "left"]: `${Math.abs(r)}px`
-  };
-}, v = (s) => Object.keys(s).reduce((e, n) => {
-  const t = s[n];
-  if (!t)
-    return e;
-  const [o, c] = e, r = t.position === "left" ? o : c;
-  return s[n].symbol, r.push({
-    symbol: t.symbol && typeof t.symbol == "string" ? { type: "Uri", content: t.symbol } : t.symbol,
-    type: n,
-    padding: t.padding || "10px",
-    label: t.label,
-    size: t.size || "64px",
-    tooltip: t.tooltip,
-    order: t.order || 0,
-    show: t.show
-  }), e;
-}, [[], []]), h = (s) => s.getAsync("router").then((e) => {
-  if (!e)
-    return !0;
-  const n = e.getInitialRoute(), { name: t, params: o } = e.getRouteData();
-  return b(o), !((n == null ? void 0 : n.name) !== t || Object.keys(o).length > 0);
-}), z = (s) => f(s, "widget-header", import("./widget-header.95f2f17b.js"), (e) => {
-  const { events: n } = s.get("$widget"), [t, o] = p(n), { actions: c = {} } = e.properties();
-  if (e.actions.create("close", (r, i) => i.preventDefault ? void 0 : s.get("$widget").invoke("close")), e.actions.create("back", (r, i) => {
-    if (!i.preventDefault)
-      return s.getAsync("router").then((a) => {
-        a.goBack();
-      });
-  }), e.properties((r) => {
-    const { actions: i = {} } = r;
-    if (!!i.back)
-      return Object.keys(i).forEach((a) => {
-        const u = i[a];
-        a === "back" && (u.show = r.showBack);
-      }), { actions: i };
-  }), e.actions.create("show-back", (r) => {
-    e.writeProperties({ showBack: r });
-  }), c.back) {
-    const r = () => h(s).then((i) => e.actions.dispatch("show-back", !i));
-    r(), t("router:changed", r);
-  }
-  return e.actions.create("minimize", (r, i) => i.preventDefault ? void 0 : s.get("$widget").invoke("hide")), () => {
-    o();
-  };
-});
-export {
-  z as W,
-  y as a,
-  v as c
-};
-//# sourceMappingURL=index.7df5456d.js.map

package/dist/index.7df5456d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.7df5456d.js","sources":["../src/utils.ts","../src/widget-header-component.ts"],"sourcesContent":["import { RoutingService } from '@telia-ace/widget-routing';\r\nimport { removeNullAndUndefinedValues } from '@telia-ace/widget-utilities';\r\nimport { Container } from '@webprovisions/platform';\r\nimport { ActionNode, Symbol } from './widget-header-component';\r\n\r\nexport const calculateMargin = (\r\n    leftNodes: ActionNode[],\r\n    rightNodes: ActionNode[],\r\n    textAlign: string\r\n) => {\r\n    if (textAlign !== 'center') {\r\n        return {};\r\n    }\r\n\r\n    const calculate = (nodes: ActionNode[]) => {\r\n        return nodes.reduce<number>((acc, node) => {\r\n            const [padding] = node.padding.split('px');\r\n            const [size] = node.size.split('px');\r\n            return acc + (+size + +padding * 2);\r\n        }, 0);\r\n    };\r\n    const leftSize = calculate(leftNodes);\r\n    const rightSize = calculate(rightNodes);\r\n\r\n    const total = leftSize - rightSize;\r\n\r\n    if (total === 0) {\r\n        return {};\r\n    }\r\n\r\n    const direction = leftSize > rightSize ? 'right' : 'left';\r\n    return {\r\n        [direction]: `${Math.abs(total)}px`,\r\n    };\r\n};\r\n\r\nexport const createNodes = (actions: { [key: string]: ActionNode }) => {\r\n    return Object.keys(actions).reduce<[ActionNode[], ActionNode[]]>(\r\n        (acc, key) => {\r\n            const node = actions[key];\r\n            if (!node) {\r\n                return acc;\r\n            }\r\n            const [left, right] = acc;\r\n            const arr = node.position === 'left' ? left : right;\r\n\r\n            let symbol = actions[key].symbol;\r\n            if (symbol && typeof symbol === 'string') {\r\n                symbol = {\r\n                    type: 'Uri',\r\n                    content: symbol,\r\n                };\r\n            }\r\n\r\n            arr.push({\r\n                symbol:\r\n                    node.symbol && typeof node.symbol === 'string'\r\n                        ? { type: 'Uri', content: node.symbol }\r\n                        : (node.symbol as Symbol),\r\n                type: key,\r\n                padding: node.padding || '10px',\r\n                label: node.label,\r\n                size: node.size || '64px',\r\n                tooltip: node.tooltip,\r\n                order: node.order || 0,\r\n                show: node.show,\r\n            });\r\n\r\n            return acc;\r\n        },\r\n        [[], []]\r\n    );\r\n};\r\n\r\nexport const isOnInitialRoute = (container: Container) =>\r\n    container.getAsync('router').then((router: RoutingService) => {\r\n        if (!router) {\r\n            return true;\r\n        }\r\n        const initialRoute = router.getInitialRoute();\r\n        const { name, params } = router.getRouteData();\r\n\r\n        removeNullAndUndefinedValues(params);\r\n\r\n        if (initialRoute?.name !== name || Object.keys(params).length > 0) {\r\n            return false;\r\n        }\r\n\r\n        return true;\r\n    });\r\n","import { createEventSubscriber } from '@telia-ace/widget-core';\r\nimport { RoutingService } from '@telia-ace/widget-routing';\r\nimport { createReactComponent } from '@telia-ace/widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\nimport { isOnInitialRoute } from './utils';\r\n\r\nexport type Symbol = {\r\n    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\r\n    content: string;\r\n};\r\n\r\nexport type ActionNode = {\r\n    type: string;\r\n    label?: string;\r\n    position?: 'right' | 'left';\r\n    symbol?: Symbol;\r\n    size: string;\r\n    padding: string;\r\n    tooltip?: string;\r\n    order?: number;\r\n    show?: boolean;\r\n};\r\n\r\nexport type WidgetHeaderComponentProps = {\r\n    header: string;\r\n    tagline: string;\r\n    textAlign?: string;\r\n    actions?: { [key: string]: ActionNode };\r\n    tooltip?: string;\r\n    route?: string;\r\n};\r\n\r\nconst WidgetHeaderComponent = (container: Container) => {\r\n    return createReactComponent(\r\n        container,\r\n        'widget-header',\r\n        import('./widget-header'),\r\n        (component) => {\r\n            const { events } = container.get('$widget');\r\n            const [subscribe, unsubscribe] = createEventSubscriber(events);\r\n\r\n            const { actions = {} } = component.properties<WidgetHeaderComponentProps>();\r\n\r\n            component.actions.create('close', (data, options) => {\r\n                if (options.preventDefault) {\r\n                    return;\r\n                }\r\n\r\n                const widget = container.get('$widget');\r\n                return widget.invoke('close');\r\n            });\r\n            component.actions.create('back', (data, options) => {\r\n                if (options.preventDefault) {\r\n                    return;\r\n                }\r\n\r\n                return container.getAsync('router').then((router: RoutingService) => {\r\n                    router.goBack();\r\n                });\r\n            });\r\n\r\n            component.properties((properties) => {\r\n                const { actions = {} } = properties;\r\n\r\n                if (!actions.back) {\r\n                    return;\r\n                }\r\n\r\n                Object.keys(actions).forEach((key) => {\r\n                    const node = actions[key];\r\n                    if (key === 'back') {\r\n                        node.show = properties.showBack;\r\n                    }\r\n                });\r\n\r\n                return { actions };\r\n            });\r\n\r\n            component.actions.create('show-back', (showBack) => {\r\n                component.writeProperties({ showBack });\r\n            });\r\n\r\n            if (actions.back) {\r\n                const showBack = () =>\r\n                    isOnInitialRoute(container).then((onInitialRoute) =>\r\n                        component.actions.dispatch('show-back', !onInitialRoute)\r\n                    );\r\n\r\n                showBack();\r\n                subscribe('router:changed', showBack);\r\n            }\r\n\r\n            component.actions.create('minimize', (data, options) => {\r\n                if (options.preventDefault) {\r\n                    return;\r\n                }\r\n\r\n                const widget = container.get('$widget');\r\n                return widget.invoke('hide');\r\n            });\r\n\r\n            return () => {\r\n                unsubscribe();\r\n            };\r\n        }\r\n    );\r\n};\r\n\r\nexport default WidgetHeaderComponent;\r\n"],"names":[],"mappings":"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"}

package/dist/widget-header.95f2f17b.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"widget-header.95f2f17b.js","sources":["../src/avatar.tsx","../src/back.tsx","../src/close.tsx","../src/minimize.tsx","../src/node.tsx","../src/widget-header.tsx"],"sourcesContent":["import { SymbolBadge } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { ActionNode } from './widget-header-component';\r\n\r\ntype Props = { node: ActionNode };\r\nconst Avatar: React.FC<Props> = ({ node }) => {\r\n    if (!node.symbol) {\r\n        return null;\r\n    }\r\n\r\n    let size;\r\n    const isSvg = node.symbol.type === 'Svg';\r\n    if (node.symbol.type === 'Svg') {\r\n        const sizeNumber = parseInt(node.size, 10);\r\n\r\n        if (!isNaN(sizeNumber)) {\r\n            size = sizeNumber;\r\n        }\r\n    }\r\n\r\n    return <Wrapper symbol={node.symbol} svg={isSvg} size={size} backgroundSize=\"cover\" />;\r\n};\r\n\r\nexport default Avatar;\r\n\r\nconst Wrapper = styled(({ svg, ...other }) => <SymbolBadge {...other} />)`\r\n    color: ${(p) => p.theme.colors?.text};\r\n    ${(p) =>\r\n        !p.svg &&\r\n        css`\r\n            border-radius: 50%;\r\n            overflow: hidden;\r\n        `}\r\n`;\r\n","import { SymbolBadge } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport { ActionNode } from './widget-header-component';\r\n\r\ntype Props = {\r\n    node: ActionNode;\r\n};\r\nconst Back: React.FC<Props> = ({ node }) => {\r\n    const symbol = node.symbol || { type: 'Svg', content: 'back' };\r\n    return <SymbolBadge size={20} symbol={symbol} />;\r\n};\r\n\r\nexport default Back;\r\n","import { SymbolBadge } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport { ActionNode } from './widget-header-component';\r\n\r\ntype Props = {\r\n    node: ActionNode;\r\n};\r\nconst Close: React.FC<Props> = ({ node }) => {\r\n    const symbol = node.symbol || { type: 'Svg', content: 'close' };\r\n    const size = parseInt(node?.size, 10) || 14;\r\n    return <SymbolBadge size={size} symbol={symbol} />;\r\n};\r\n\r\nexport default Close;\r\n","import { SymbolBadge } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport { ActionNode } from './widget-header-component';\r\n\r\ntype Props = {\r\n    node: ActionNode;\r\n};\r\nconst Minimize: React.FC<Props> = ({ node }) => {\r\n    const symbol = node.symbol || { type: 'Svg', content: 'minimize' };\r\n    const size = parseInt(node?.size, 10) || 20;\r\n    return <SymbolBadge size={size} symbol={symbol} />;\r\n};\r\n\r\nexport default Minimize;\r\n","import { borderTabStyle, TransitionComponent, useDispatch } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport Avatar from './avatar';\r\nimport Back from './back';\r\nimport Close from './close';\r\nimport Minimize from './minimize';\r\nimport { ActionNode } from './widget-header-component';\r\n\r\ntype Props = Merge<\r\n    ActionNode,\r\n    {\r\n        className?: string;\r\n    }\r\n>;\r\n\r\nconst Node: React.FC<Props> = ({ className = '', ...node }) => {\r\n    const dispatch = useDispatch();\r\n\r\n    const { size, padding, type, tooltip, show = true } = node;\r\n\r\n    if (type === 'back') {\r\n        return (\r\n            <NodeWrapper size={size || '64px'} padding={padding || '10px'}>\r\n                <TransitionComponent\r\n                    in={show}\r\n                    timeout={300}\r\n                    transitions={{\r\n                        enter: {\r\n                            type: 'scale',\r\n                            easing: 'cubic-bezier(.08,.84,.74,1.84)',\r\n                        },\r\n                        exit: {\r\n                            type: 'scale',\r\n                            easing: 'ease-out',\r\n                        },\r\n                    }}\r\n                >\r\n                    {(state: any, css: any) => (\r\n                        <ActionButton\r\n                            title={tooltip}\r\n                            aria-label={tooltip}\r\n                            animationCss={css}\r\n                            onClick={() => {\r\n                                dispatch('back');\r\n                            }}\r\n                        >\r\n                            <Back node={node} />\r\n                        </ActionButton>\r\n                    )}\r\n                </TransitionComponent>\r\n            </NodeWrapper>\r\n        );\r\n    }\r\n\r\n    if (!show) {\r\n        return null;\r\n    }\r\n\r\n    return (\r\n        <NodeWrapper\r\n            size={size || '64px'}\r\n            padding={padding || '10px'}\r\n            squareRatio={type === 'avatar'}\r\n        >\r\n            {type === 'avatar' && <Avatar node={node} />}\r\n            {type === 'close' && (\r\n                <ActionButton\r\n                    title={tooltip}\r\n                    aria-label={tooltip}\r\n                    onClick={() => {\r\n                        dispatch('close');\r\n                    }}\r\n                >\r\n                    <Close node={node} />\r\n                </ActionButton>\r\n            )}\r\n            {type === 'minimize' && (\r\n                <ActionButton\r\n                    title={tooltip}\r\n                    aria-label={tooltip}\r\n                    onClick={() => {\r\n                        dispatch('minimize');\r\n                    }}\r\n                >\r\n                    <Minimize node={node} />\r\n                </ActionButton>\r\n            )}\r\n        </NodeWrapper>\r\n    );\r\n};\r\n\r\nexport default Node;\r\n\r\nconst NodeWrapper = styled.div<{ size: string; padding: string; squareRatio?: boolean }>`\r\n    flex: 1;\r\n    max-width: ${(p) => p.size};\r\n    ${(p) => p.squareRatio && `max-height: ${p.size};`}\r\n    text-align: center;\r\n    padding: 0 ${(p) => p.padding};\r\n    && {\r\n        box-sizing: content-box;\r\n    }\r\n\r\n    svg {\r\n        vertical-align: middle;\r\n    }\r\n\r\n    i {\r\n        color: ${(p) => p.theme.colors?.text};\r\n        font-size: ${(p) => p.size};\r\n        min-width: 1em;\r\n        min-height: 1em;\r\n        display: inline-block;\r\n    }\r\n`;\r\nconst ActionButton = styled.button<any>`\r\n    ${(p) => !!p.animationCss && p.animationCss};\r\n    background: none;\r\n    border: none;\r\n    cursor: pointer;\r\n    padding: 0;\r\n    &:focus {\r\n        ${(p) =>\r\n            p.theme.accessibility?.isTabbing &&\r\n            css`\r\n                ${borderTabStyle};\r\n                border-color: ${p.theme.accessibility?.colors?.inactiveText};\r\n            `};\r\n    }\r\n`;\r\n","import {\r\n    headingElement,\r\n    Link,\r\n    linkTabStyle,\r\n    Typography,\r\n    useProperties,\r\n} from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport Node from './node';\r\nimport { calculateMargin, createNodes } from './utils';\r\nimport { WidgetHeaderComponentProps } from './widget-header-component';\r\n\r\ntype Props = {\r\n    className: string;\r\n    role?: string;\r\n};\r\n\r\nconst WidgetHeader: React.FC<Props> = ({ className, ...other }) => {\r\n    const {\r\n        header,\r\n        tagline,\r\n        route,\r\n        tooltip = '',\r\n        actions = {},\r\n        textAlign = 'center',\r\n    } = useProperties<WidgetHeaderComponentProps>();\r\n\r\n    const [leftNodes, rightNodes] = createNodes(actions);\r\n    leftNodes.sort((a, b) => (a.order || 0) - (b.order || 0));\r\n    rightNodes.sort((a, b) => (a.order || 0) - (b.order || 0));\r\n    return (\r\n        <Wrapper {...other} className={appendClassNames(className, 'humany-widget-header')}>\r\n            {leftNodes.map((node, key) => (\r\n                <Node key={`${node.type}+_${key}`} {...node} />\r\n            ))}\r\n\r\n            <MainNode\r\n                textAlign={textAlign}\r\n                margin={calculateMargin(leftNodes, rightNodes, textAlign)}\r\n            >\r\n                {route ? (\r\n                    <StyledLink routeName={route} title={tooltip} aria-label={tooltip}>\r\n                        <Typography variant=\"h1\">{header}</Typography>\r\n                    </StyledLink>\r\n                ) : (\r\n                    <Typography variant=\"h1\">{header}</Typography>\r\n                )}\r\n                {tagline && <Tagline>{tagline}</Tagline>}\r\n            </MainNode>\r\n\r\n            {rightNodes.map((node, key) => (\r\n                <Node key={`${node.type}+_${key}`} {...node} />\r\n            ))}\r\n        </Wrapper>\r\n    );\r\n};\r\n\r\nexport default WidgetHeader;\r\n\r\nconst Wrapper = styled.div`\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n\r\n    ${headingElement(\r\n        'h1',\r\n        css`\r\n            font-size: ${(p) => p.theme.fonts?.huge};\r\n            margin: 0;\r\n            font-weight: 300;\r\n            color: ${(p) => p.theme.colors?.text};\r\n        `\r\n    )}\r\n\r\n    p {\r\n        color: ${(p) => p.theme.colors?.text};\r\n        margin: 0;\r\n    }\r\n\r\n    svg {\r\n        line,\r\n        path,\r\n        circle {\r\n            stroke: ${(p) => p.theme.colors?.text};\r\n        }\r\n    }\r\n`;\r\n\r\nconst Tagline = styled.p`\r\n    font-size: ${(p) => p.theme.fonts?.normal};\r\n    font-weight: 300;\r\n`;\r\n\r\nconst MainNode = styled.div<{\r\n    textAlign: string;\r\n    margin: { left?: string; right?: string };\r\n}>`\r\n    flex: 1;\r\n    text-align: ${(p) => p.textAlign};\r\n\r\n    margin-right: ${(p) => p.margin.right || 0};\r\n    margin-left: ${(p) => p.margin.left || 0};\r\n`;\r\n\r\nconst StyledLink = styled(Link)<any>`\r\n    text-decoration: none;\r\n    &:focus {\r\n        ${headingElement(\r\n            'h1',\r\n            css`\r\n                ${(p) =>\r\n                    p.theme.accessibility?.isTabbing &&\r\n                    css`\r\n                        ${linkTabStyle}\r\n                        display: inline-block;\r\n                    `};\r\n            `\r\n        )}\r\n    }\r\n`;\r\n"],"names":["Wrapper"],"mappings":"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"}