@telia-ace/widget-components-widget-header 1.0.11 → 1.0.14

package/dist/index.7df5456d.js

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1 @@
+{"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/index.js

@@ -1,5 +1,8 @@
-export { W as default } from "./index2.js";
+import { W as i } from "./index.7df5456d.js";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-ui";
 import "@telia-ace/widget-utilities";
+export {
+  i as default
+};
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,256 @@
+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) => {
+  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]);
+  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))
+      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 { 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 "@telia-ace/widget-core";
+const j = ({ node: e }) => {
+  if (!e.symbol)
+    return null;
+  let t;
+  const i = e.symbol.type === "Svg";
+  if (e.symbol.type === "Svg") {
+    const a = parseInt(e.size, 10);
+    isNaN(a) || (t = a);
+  }
+  return /* @__PURE__ */ r.createElement(F, {
+    symbol: e.symbol,
+    svg: i,
+    size: t,
+    backgroundSize: "cover"
+  });
+}, F = c((i) => {
+  var a = i, { svg: e } = a, t = f(a, ["svg"]);
+  return /* @__PURE__ */ r.createElement(x, h({}, t));
+})`
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    ${(e) => !e.svg && d`
+            border-radius: 50%;
+            overflow: hidden;
+        `}
+`, G = ({ node: e }) => {
+  const t = e.symbol || { type: "Svg", content: "back" };
+  return /* @__PURE__ */ r.createElement(x, {
+    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, {
+    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, {
+    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"
+  }, /* @__PURE__ */ r.createElement(R, {
+    in: b,
+    timeout: 300,
+    transitions: {
+      enter: {
+        type: "scale",
+        easing: "cubic-bezier(.08,.84,.74,1.84)"
+      },
+      exit: {
+        type: "scale",
+        easing: "ease-out"
+      }
+    }
+  }, (u, y) => /* @__PURE__ */ r.createElement(z, {
+    title: o,
+    "aria-label": o,
+    animationCss: y,
+    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, {
+    node: t
+  }), s === "close" && /* @__PURE__ */ r.createElement(z, {
+    title: o,
+    "aria-label": o,
+    onClick: () => {
+      m("close");
+    }
+  }, /* @__PURE__ */ r.createElement(J, {
+    node: t
+  })), s === "minimize" && /* @__PURE__ */ r.createElement(z, {
+    title: o,
+    "aria-label": o,
+    onClick: () => {
+      m("minimize");
+    }
+  }, /* @__PURE__ */ r.createElement(K, {
+    node: t
+  }))) : null;
+}, w = c.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;
+    }
+`, z = 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};
+            `;
+}};
+    }
+`, re = (i) => {
+  var a = i, { className: e } = a, t = f(a, ["className"]);
+  const {
+    header: m,
+    tagline: g,
+    route: p,
+    tooltip: s = "",
+    actions: o = {},
+    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), {
+    className: D(e, "humany-widget-header")
+  }), u.map((n, l) => /* @__PURE__ */ r.createElement(C, h({
+    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
+  }, /* @__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({
+    key: `${n.type}+_${l}`
+  }, n))));
+}, O = c.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    ${T("h1", d`
+            font-size: ${(e) => {
+  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;
+}};
+        `)}
+
+    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;
+}};
+        }
+    }
+`, Q = c.p`
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    font-weight: 300;
+`, U = c.div`
+    flex: 1;
+    text-align: ${(e) => e.textAlign};
+
+    margin-right: ${(e) => e.margin.right || 0};
+    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;
+                    `;
+}};
+            `)}
+    }
+`;
+export {
+  re as default
+};
+//# sourceMappingURL=widget-header.95f2f17b.js.map

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

@@ -0,0 +1 @@
+{"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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"}

package/package.json

@@ -1,13 +1,17 @@
 {
     "name": "@telia-ace/widget-components-widget-header",
-    "version": "1.0.11",
+    "version": "1.0.14",
     "description": "Widget header component for ACE Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
     "keywords": [
         "telia"
     ],
-    "module": "dist/index.js",
+    "exports": {
+        "development": "./src/index.ts",
+        "default": "./dist/index.js"
+    },
+    "type": "module",
     "types": "dist/index.d.ts",
     "files": [
         "LICENSE.txt",
@@ -24,9 +28,9 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@telia-ace/widget-core": "^1.0.9",
-        "@telia-ace/widget-routing": "^1.0.10",
-        "@telia-ace/widget-ui": "^1.0.15",
+        "@telia-ace/widget-core": "^1.0.11",
+        "@telia-ace/widget-routing": "^1.0.12",
+        "@telia-ace/widget-ui": "^1.0.18",
         "@telia-ace/widget-utilities": "^1.0.2",
         "@webprovisions/platform": "^1.1.2"
     },
@@ -40,5 +44,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "d57f04d13a7b937875290ba5e016bd581fbfe889"
+    "gitHead": "4006655a78d8f0379c021e4362536dcdf881b3d0"
 }

package/dist/index2.js

@@ -1,114 +0,0 @@
-import { createEventSubscriber } from "@telia-ace/widget-core";
-import { createReactComponent } from "@telia-ace/widget-ui";
-import { removeNullAndUndefinedValues } from "@telia-ace/widget-utilities";
-const calculateMargin = (leftNodes, rightNodes, textAlign) => {
-  if (textAlign !== "center") {
-    return {};
-  }
-  const calculate = (nodes) => {
-    return nodes.reduce((acc, node) => {
-      const [padding] = node.padding.split("px");
-      const [size] = node.size.split("px");
-      return acc + (+size + +padding * 2);
-    }, 0);
-  };
-  const leftSize = calculate(leftNodes);
-  const rightSize = calculate(rightNodes);
-  const total = leftSize - rightSize;
-  if (total === 0) {
-    return {};
-  }
-  const direction = leftSize > rightSize ? "right" : "left";
-  return {
-    [direction]: `${Math.abs(total)}px`
-  };
-};
-const createNodes = (actions) => {
-  return Object.keys(actions).reduce((acc, key) => {
-    const node = actions[key];
-    if (!node) {
-      return acc;
-    }
-    const [left, right] = acc;
-    const arr = node.position === "left" ? left : right;
-    actions[key].symbol;
-    arr.push({
-      symbol: node.symbol && typeof node.symbol === "string" ? { type: "Uri", content: node.symbol } : node.symbol,
-      type: key,
-      padding: node.padding || "10px",
-      label: node.label,
-      size: node.size || "64px",
-      tooltip: node.tooltip,
-      order: node.order || 0,
-      show: node.show
-    });
-    return acc;
-  }, [[], []]);
-};
-const isOnInitialRoute = (container) => container.getAsync("router").then((router) => {
-  if (!router) {
-    return true;
-  }
-  const initialRoute = router.getInitialRoute();
-  const { name, params } = router.getRouteData();
-  removeNullAndUndefinedValues(params);
-  if ((initialRoute == null ? void 0 : initialRoute.name) !== name || Object.keys(params).length > 0) {
-    return false;
-  }
-  return true;
-});
-const WidgetHeaderComponent = (container) => {
-  return createReactComponent(container, "widget-header", import("./widget-header.js"), (component) => {
-    const { events } = container.get("$widget");
-    const [subscribe, unsubscribe] = createEventSubscriber(events);
-    const { actions = {} } = component.properties();
-    component.actions.create("close", (data, options) => {
-      if (options.preventDefault) {
-        return;
-      }
-      const widget = container.get("$widget");
-      return widget.invoke("close");
-    });
-    component.actions.create("back", (data, options) => {
-      if (options.preventDefault) {
-        return;
-      }
-      return container.getAsync("router").then((router) => {
-        router.goBack();
-      });
-    });
-    component.properties((properties) => {
-      const { actions: actions2 = {} } = properties;
-      if (!actions2.back) {
-        return;
-      }
-      Object.keys(actions2).forEach((key) => {
-        const node = actions2[key];
-        if (key === "back") {
-          node.show = properties.showBack;
-        }
-      });
-      return { actions: actions2 };
-    });
-    component.actions.create("show-back", (showBack) => {
-      component.writeProperties({ showBack });
-    });
-    if (actions.back) {
-      const showBack = () => isOnInitialRoute(container).then((onInitialRoute) => component.actions.dispatch("show-back", !onInitialRoute));
-      showBack();
-      subscribe("router:changed", showBack);
-    }
-    component.actions.create("minimize", (data, options) => {
-      if (options.preventDefault) {
-        return;
-      }
-      const widget = container.get("$widget");
-      return widget.invoke("hide");
-    });
-    return () => {
-      unsubscribe();
-    };
-  });
-};
-export { WidgetHeaderComponent as W, calculateMargin as a, createNodes as c };
-//# sourceMappingURL=index2.js.map

package/dist/index2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index2.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.js

@@ -1,291 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-import { SymbolBadge, borderTabStyle, useDispatch, TransitionComponent, useProperties, Typography, headingElement, Link, linkTabStyle } from "@telia-ace/widget-ui";
-import { appendClassNames } from "@telia-ace/widget-utilities";
-import React from "react";
-import styled, { css } from "styled-components";
-import { c as createNodes, a as calculateMargin } from "./index2.js";
-import "@telia-ace/widget-core";
-const Avatar = ({ node }) => {
-  if (!node.symbol) {
-    return null;
-  }
-  let size;
-  const isSvg = node.symbol.type === "Svg";
-  if (node.symbol.type === "Svg") {
-    const sizeNumber = parseInt(node.size, 10);
-    if (!isNaN(sizeNumber)) {
-      size = sizeNumber;
-    }
-  }
-  return /* @__PURE__ */ React.createElement(Wrapper$1, {
-    symbol: node.symbol,
-    svg: isSvg,
-    size,
-    backgroundSize: "cover"
-  });
-};
-const Wrapper$1 = styled((_a) => {
-  var _b = _a, { svg } = _b, other = __objRest(_b, ["svg"]);
-  return /* @__PURE__ */ React.createElement(SymbolBadge, __spreadValues({}, other));
-})`
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    ${(p) => !p.svg && css`
-            border-radius: 50%;
-            overflow: hidden;
-        `}
-`;
-const Back = ({ node }) => {
-  const symbol = node.symbol || { type: "Svg", content: "back" };
-  return /* @__PURE__ */ React.createElement(SymbolBadge, {
-    size: 20,
-    symbol
-  });
-};
-const Close = ({ node }) => {
-  const symbol = node.symbol || { type: "Svg", content: "close" };
-  const size = parseInt(node == null ? void 0 : node.size, 10) || 14;
-  return /* @__PURE__ */ React.createElement(SymbolBadge, {
-    size,
-    symbol
-  });
-};
-const Minimize = ({ node }) => {
-  const symbol = node.symbol || { type: "Svg", content: "minimize" };
-  const size = parseInt(node == null ? void 0 : node.size, 10) || 20;
-  return /* @__PURE__ */ React.createElement(SymbolBadge, {
-    size,
-    symbol
-  });
-};
-const Node = (_c) => {
-  var _d = _c, { className = "" } = _d, node = __objRest(_d, ["className"]);
-  const dispatch = useDispatch();
-  const { size, padding, type, tooltip, show = true } = node;
-  if (type === "back") {
-    return /* @__PURE__ */ React.createElement(NodeWrapper, {
-      size: size || "64px",
-      padding: padding || "10px"
-    }, /* @__PURE__ */ React.createElement(TransitionComponent, {
-      in: show,
-      timeout: 300,
-      transitions: {
-        enter: {
-          type: "scale",
-          easing: "cubic-bezier(.08,.84,.74,1.84)"
-        },
-        exit: {
-          type: "scale",
-          easing: "ease-out"
-        }
-      }
-    }, (state, css2) => /* @__PURE__ */ React.createElement(ActionButton, {
-      title: tooltip,
-      "aria-label": tooltip,
-      animationCss: css2,
-      onClick: () => {
-        dispatch("back");
-      }
-    }, /* @__PURE__ */ React.createElement(Back, {
-      node
-    }))));
-  }
-  if (!show) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(NodeWrapper, {
-    size: size || "64px",
-    padding: padding || "10px",
-    squareRatio: type === "avatar"
-  }, type === "avatar" && /* @__PURE__ */ React.createElement(Avatar, {
-    node
-  }), type === "close" && /* @__PURE__ */ React.createElement(ActionButton, {
-    title: tooltip,
-    "aria-label": tooltip,
-    onClick: () => {
-      dispatch("close");
-    }
-  }, /* @__PURE__ */ React.createElement(Close, {
-    node
-  })), type === "minimize" && /* @__PURE__ */ React.createElement(ActionButton, {
-    title: tooltip,
-    "aria-label": tooltip,
-    onClick: () => {
-      dispatch("minimize");
-    }
-  }, /* @__PURE__ */ React.createElement(Minimize, {
-    node
-  })));
-};
-const NodeWrapper = styled.div`
-    flex: 1;
-    max-width: ${(p) => p.size};
-    ${(p) => p.squareRatio && `max-height: ${p.size};`}
-    text-align: center;
-    padding: 0 ${(p) => p.padding};
-    && {
-        box-sizing: content-box;
-    }
-
-    svg {
-        vertical-align: middle;
-    }
-
-    i {
-        color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-        font-size: ${(p) => p.size};
-        min-width: 1em;
-        min-height: 1em;
-        display: inline-block;
-    }
-`;
-const ActionButton = styled.button`
-    ${(p) => !!p.animationCss && p.animationCss};
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-    &:focus {
-        ${(p) => {
-  var _a, _b, _c;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
-                ${borderTabStyle};
-                border-color: ${(_c = (_b = p.theme.accessibility) == null ? void 0 : _b.colors) == null ? void 0 : _c.inactiveText};
-            `;
-}};
-    }
-`;
-const WidgetHeader = (_e) => {
-  var _f = _e, { className } = _f, other = __objRest(_f, ["className"]);
-  const {
-    header,
-    tagline,
-    route,
-    tooltip = "",
-    actions = {},
-    textAlign = "center"
-  } = useProperties();
-  const [leftNodes, rightNodes] = createNodes(actions);
-  leftNodes.sort((a, b) => (a.order || 0) - (b.order || 0));
-  rightNodes.sort((a, b) => (a.order || 0) - (b.order || 0));
-  return /* @__PURE__ */ React.createElement(Wrapper, __spreadProps(__spreadValues({}, other), {
-    className: appendClassNames(className, "humany-widget-header")
-  }), leftNodes.map((node, key) => /* @__PURE__ */ React.createElement(Node, __spreadValues({
-    key: `${node.type}+_${key}`
-  }, node))), /* @__PURE__ */ React.createElement(MainNode, {
-    textAlign,
-    margin: calculateMargin(leftNodes, rightNodes, textAlign)
-  }, route ? /* @__PURE__ */ React.createElement(StyledLink, {
-    routeName: route,
-    title: tooltip,
-    "aria-label": tooltip
-  }, /* @__PURE__ */ React.createElement(Typography, {
-    variant: "h1"
-  }, header)) : /* @__PURE__ */ React.createElement(Typography, {
-    variant: "h1"
-  }, header), tagline && /* @__PURE__ */ React.createElement(Tagline, null, tagline)), rightNodes.map((node, key) => /* @__PURE__ */ React.createElement(Node, __spreadValues({
-    key: `${node.type}+_${key}`
-  }, node))));
-};
-const Wrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    ${headingElement("h1", css`
-            font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.huge;
-}};
-            margin: 0;
-            font-weight: 300;
-            color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-        `)}
-
-    p {
-        color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-        margin: 0;
-    }
-
-    svg {
-        line,
-        path,
-        circle {
-            stroke: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-        }
-    }
-`;
-const Tagline = styled.p`
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    font-weight: 300;
-`;
-const MainNode = styled.div`
-    flex: 1;
-    text-align: ${(p) => p.textAlign};
-
-    margin-right: ${(p) => p.margin.right || 0};
-    margin-left: ${(p) => p.margin.left || 0};
-`;
-const StyledLink = styled(Link)`
-    text-decoration: none;
-    &:focus {
-        ${headingElement("h1", css`
-                ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
-                        ${linkTabStyle}
-                        display: inline-block;
-                    `;
-}};
-            `)}
-    }
-`;
-export { WidgetHeader as default };
-//# sourceMappingURL=widget-header.js.map

package/dist/widget-header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"widget-header.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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"}