@telia-ace/widget-components-widget-header 1.0.4 → 1.0.7

package/dist/index.js

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

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/index2.js

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

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

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

@@ -0,0 +1 @@
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM,SAA0B,CAAC,EAAE,WAAW;AACtC,MAAA,CAAC,KAAK,QAAQ;AACP,WAAA;AAAA,EACX;AAEI,MAAA;AACE,QAAA,QAAQ,KAAK,OAAO,SAAS;AAC/B,MAAA,KAAK,OAAO,SAAS,OAAO;AAC5B,UAAM,aAAa,SAAS,KAAK,MAAM,EAAE;AAErC,QAAA,CAAC,MAAM,UAAU,GAAG;AACb,aAAA;AAAA,IACX;AAAA,EACJ;AAEA,SAAQ,sBAAA,cAAAA,WAAA;AAAA,IAAQ,QAAQ,KAAK;AAAA,IAAQ,KAAK;AAAA,IAAO;AAAA,IAAY,gBAAe;AAAA,EAAA,CAAQ;AACxF;AAIA,MAAMA,YAAU,OAAO,CAAC,OAAuB;AAAvB,eAAE,UAAF,IAAU,kBAAV,IAAU,CAAR;AAAqB,+BAAA,cAAA,aAAA,mBAAgB,MAAO;AAAA,CAAE;AAAA,aAC3D,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA,MAC9B,CAAC,MACC,CAAC,EAAE,OACH;AAAA;AAAA;AAAA;AAAA;ACvBR,MAAM,OAAwB,CAAC,EAAE,WAAW;AACxC,QAAM,SAAS,KAAK,UAAU,EAAE,MAAM,OAAO,SAAS;AACtD,SAAQ,sBAAA,cAAA,aAAA;AAAA,IAAY,MAAM;AAAA,IAAI;AAAA,EAAA,CAAgB;AAClD;ACHA,MAAM,QAAyB,CAAC,EAAE,WAAW;AACzC,QAAM,SAAS,KAAK,UAAU,EAAE,MAAM,OAAO,SAAS;AACtD,QAAM,OAAO,SAAS,6BAAM,MAAM,EAAE,KAAK;AACzC,SAAQ,sBAAA,cAAA,aAAA;AAAA,IAAY;AAAA,IAAY;AAAA,EAAA,CAAgB;AACpD;ACJA,MAAM,WAA4B,CAAC,EAAE,WAAW;AAC5C,QAAM,SAAS,KAAK,UAAU,EAAE,MAAM,OAAO,SAAS;AACtD,QAAM,OAAO,SAAS,6BAAM,MAAM,EAAE,KAAK;AACzC,SAAQ,sBAAA,cAAA,aAAA;AAAA,IAAY;AAAA,IAAY;AAAA,EAAA,CAAgB;AACpD;ACKA,MAAM,OAAwB,CAAC,OAAgC;AAAhC,eAAE,cAAY,OAAd,IAAqB,iBAArB,IAAqB,CAAnB;AAC7B,QAAM,WAAW;AAEjB,QAAM,EAAE,MAAM,SAAS,MAAM,SAAS,OAAO,SAAS;AAEtD,MAAI,SAAS,QAAQ;AACjB,WACK,sBAAA,cAAA,aAAA;AAAA,MAAY,MAAM,QAAQ;AAAA,MAAQ,SAAS,WAAW;AAAA,IAAA,GAClD,sBAAA,cAAA,qBAAA;AAAA,MACG,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,QACT,OAAO;AAAA,UACH,MAAM;AAAA,UACN,QAAQ;AAAA,QACZ;AAAA,QACA,MAAM;AAAA,UACF,MAAM;AAAA,UACN,QAAQ;AAAA,QACZ;AAAA,MACJ;AAAA,IAEC,GAAA,CAAC,OAAY,SACT,sBAAA,cAAA,cAAA;AAAA,MACG,OAAO;AAAA,MACP,cAAY;AAAA,MACZ,cAAc;AAAA,MACd,SAAS,MAAM;AACX,iBAAS,MAAM;AAAA,MACnB;AAAA,IAAA,GAEC,sBAAA,cAAA,MAAA;AAAA,MAAK;AAAA,IAAA,CAAY,CACtB,CAER,CACJ;AAAA,EAER;AAEA,MAAI,CAAC,MAAM;AACA,WAAA;AAAA,EACX;AAEA,SACK,sBAAA,cAAA,aAAA;AAAA,IACG,MAAM,QAAQ;AAAA,IACd,SAAS,WAAW;AAAA,IACpB,aAAa,SAAS;AAAA,EAErB,GAAA,SAAS,YAAa,sBAAA,cAAA,QAAA;AAAA,IAAO;AAAA,EAAY,CAAA,GACzC,SAAS,WACL,sBAAA,cAAA,cAAA;AAAA,IACG,OAAO;AAAA,IACP,cAAY;AAAA,IACZ,SAAS,MAAM;AACX,eAAS,OAAO;AAAA,IACpB;AAAA,EAAA,GAEC,sBAAA,cAAA,OAAA;AAAA,IAAM;AAAA,EAAA,CAAY,CACvB,GAEH,SAAS,cACL,sBAAA,cAAA,cAAA;AAAA,IACG,OAAO;AAAA,IACP,cAAY;AAAA,IACZ,SAAS,MAAM;AACX,eAAS,UAAU;AAAA,IACvB;AAAA,EAAA,GAEC,sBAAA,cAAA,UAAA;AAAA,IAAS;AAAA,EAAY,CAAA,CAC1B,CAER;AAER;AAIA,MAAM,cAAc,OAAO;AAAA;AAAA,iBAEV,CAAC,MAAM,EAAE;AAAA,MACpB,CAAC,MAAM,EAAE,eAAe,eAAe,EAAE;AAAA;AAAA,iBAE9B,CAAC,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAUT,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA,qBACnB,CAAC,MAAM,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAM9B,MAAM,eAAe,OAAO;AAAA,MACtB,CAAC,MAAM,CAAC,CAAC,EAAE,gBAAgB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMzB,CAAC,MAAA;;AACC,kBAAE,MAAM,kBAAR,mBAAuB,cACvB;AAAA,kBACM;AAAA,gCACc,cAAE,MAAM,kBAAR,mBAAuB,WAAvB,mBAA+B;AAAA;AAAA;AAAA;AAAA;AC5G/D,MAAM,eAAgC,CAAC,OAA4B;AAA5B,eAAE,gBAAF,IAAgB,kBAAhB,IAAgB,CAAd;AAC/B,QAAA;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,UAAU,CAAC;AAAA,IACX,YAAY;AAAA,MACZ,cAA0C;AAE9C,QAAM,CAAC,WAAW,cAAc,YAAY,OAAO;AACzC,YAAA,KAAK,CAAC,GAAG,SAAS,SAAS,KAAQ,GAAA,SAAS,EAAE;AAC7C,aAAA,KAAK,CAAC,GAAG,SAAS,SAAS,KAAQ,GAAA,SAAS,EAAE;AACzD,SACK,sBAAA,cAAA,SAAA,iCAAY,QAAZ;AAAA,IAAmB,WAAW,iBAAiB,WAAW,sBAAsB;AAAA,EAAA,IAC5E,UAAU,IAAI,CAAC,MAAM,QACjB,sBAAA,cAAA,MAAA;AAAA,IAAK,KAAK,GAAG,KAAK,SAAS;AAAA,KAAW,KAAM,CAChD,GAEA,sBAAA,cAAA,UAAA;AAAA,IACG;AAAA,IACA,QAAQ,gBAAgB,WAAW,YAAY,SAAS;AAAA,EAAA,GAEvD,QACI,sBAAA,cAAA,YAAA;AAAA,IAAW,WAAW;AAAA,IAAO,OAAO;AAAA,IAAS,cAAY;AAAA,EAAA,GACrD,sBAAA,cAAA,YAAA;AAAA,IAAW,SAAQ;AAAA,EAAM,GAAA,MAAO,CACrC,IAEC,sBAAA,cAAA,YAAA;AAAA,IAAW,SAAQ;AAAA,EAAA,GAAM,MAAO,GAEpC,WAAW,sBAAA,cAAC,SAAS,MAAA,OAAQ,CAClC,GAEC,WAAW,IAAI,CAAC,MAAM,QAClB,sBAAA,cAAA,MAAA;AAAA,IAAK,KAAK,GAAG,KAAK,SAAS;AAAA,KAAW,KAAM,CAChD,CACL;AAER;AAIA,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,MAKjB,eACE,MACA;AAAA,yBACiB,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAAA,qBAG1B,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA,SAExC;AAAA;AAAA;AAAA,iBAGa,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQlB,CAAC,MAAM;;AAAA,iBAAE,MAAM,WAAR,mBAAgB;AAAA;AAAA;AAAA;AAAA;AAK7C,MAAM,UAAU,OAAO;AAAA,iBACN,CAAC,MAAM;;AAAA,iBAAE,MAAM,UAAR,mBAAe;AAAA;AAAA;AAAA;AAIvC,MAAM,WAAW,OAAO;AAAA;AAAA,kBAKN,CAAC,MAAM,EAAE;AAAA;AAAA,oBAEP,CAAC,MAAM,EAAE,OAAO,SAAS;AAAA,mBAC1B,CAAC,MAAM,EAAE,OAAO,QAAQ;AAAA;AAG3C,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA,UAGpB,eACE,MACA;AAAA,kBACM,CAAC,MAAA;;AACC,kBAAE,MAAM,kBAAR,mBAAuB,cACvB;AAAA,0BACM;AAAA;AAAA;AAAA;AAAA,aAIlB;AAAA;AAAA;;"}

package/package.json

@@ -1,33 +1,32 @@
 {
     "name": "@telia-ace/widget-components-widget-header",
-    "version": "1.0.4",
+    "version": "1.0.7",
     "description": "Widget header component for ACE Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
     "keywords": [
         "telia"
     ],
-    "main": "lib/index.js",
-    "module": "lib-esm/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
     "files": [
         "LICENSE.txt",
         "README.md",
-        "lib/",
-        "lib-esm/"
+        "dist/"
     ],
     "publishConfig": {
         "access": "public"
     },
     "scripts": {
-        "clean": "cleandir lib && cleandir lib-esm",
-        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+        "clean": "rimraf ./dist",
+        "precompile": "tsc -emitDeclarationOnly",
+        "compile": "vite build"
     },
     "sideEffects": false,
-    "typings": "lib/index.d.ts",
     "dependencies": {
-        "@telia-ace/widget-core": "^1.0.4",
-        "@telia-ace/widget-routing": "^1.0.5",
-        "@telia-ace/widget-ui": "^1.0.6",
+        "@telia-ace/widget-core": "^1.0.5",
+        "@telia-ace/widget-routing": "^1.0.6",
+        "@telia-ace/widget-ui": "^1.0.9",
         "@telia-ace/widget-utilities": "^1.0.1",
         "@webprovisions/platform": "^1.1.2"
     },
@@ -41,5 +40,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "993320b5ff4692cf9cb896b0011acf5f42734a74"
+    "gitHead": "cbf3ac8268821668619bd7a3d0fb60bb13d9fb5b"
 }

package/lib/avatar.d.ts

@@ -1,7 +0,0 @@
-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/lib/avatar.js

@@ -1,80 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var widget_ui_1 = require("@telia-ace/widget-ui");
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var Avatar = function (_a) {
-    var node = _a.node;
-    if (!node.symbol) {
-        return null;
-    }
-    var size;
-    var isSvg = node.symbol.type === 'Svg';
-    if (node.symbol.type === 'Svg') {
-        var sizeNumber = parseInt(node.size, 10);
-        if (!isNaN(sizeNumber)) {
-            size = sizeNumber;
-        }
-    }
-    return react_1.default.createElement(Wrapper, { symbol: node.symbol, svg: isSvg, size: size, backgroundSize: "cover" });
-};
-exports.default = Avatar;
-var Wrapper = (0, styled_components_1.default)(function (_a) {
-    var svg = _a.svg, other = __rest(_a, ["svg"]);
-    return react_1.default.createElement(widget_ui_1.SymbolBadge, __assign({}, other));
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    color: ", ";\n    ", "\n"], ["\n    color: ", ";\n    ", "\n"])), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) {
-    return !p.svg && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            border-radius: 50%;\n            overflow: hidden;\n        "], ["\n            border-radius: 50%;\n            overflow: hidden;\n        "])));
-});
-var templateObject_1, templateObject_2;

package/lib/back.d.ts

@@ -1,7 +0,0 @@
-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/lib/back.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var widget_ui_1 = require("@telia-ace/widget-ui");
-var react_1 = __importDefault(require("react"));
-var Back = function (_a) {
-    var node = _a.node;
-    var symbol = node.symbol || { type: 'Svg', content: 'back' };
-    return react_1.default.createElement(widget_ui_1.SymbolBadge, { size: 20, symbol: symbol });
-};
-exports.default = Back;

package/lib/close.d.ts

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