@telia-ace/widget-components-widget-header 1.0.0

package/LICENSE.txt

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

package/README.md

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

package/lib/avatar.d.ts

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

package/lib/avatar.js

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

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

package/lib/back.js

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

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

package/lib/close.js

@@ -0,0 +1,14 @@
+"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 Close = function (_a) {
+    var node = _a.node;
+    var symbol = node.symbol || { type: 'Svg', content: 'close' };
+    var size = parseInt(node === null || node === void 0 ? void 0 : node.size, 10) || 14;
+    return react_1.default.createElement(widget_ui_1.SymbolBadge, { size: size, symbol: symbol });
+};
+exports.default = Close;

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_header_component_1 = __importDefault(require("./widget-header-component"));
+exports.default = widget_header_component_1.default;

package/lib/minimize.d.ts

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

package/lib/minimize.js

@@ -0,0 +1,14 @@
+"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 Minimize = function (_a) {
+    var node = _a.node;
+    var symbol = node.symbol || { type: 'Svg', content: 'minimize' };
+    var size = parseInt(node === null || node === void 0 ? void 0 : node.size, 10) || 20;
+    return react_1.default.createElement(widget_ui_1.SymbolBadge, { size: size, symbol: symbol });
+};
+exports.default = Minimize;

package/lib/node.d.ts

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

package/lib/node.js

@@ -0,0 +1,91 @@
+"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 __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_1 = __importDefault(require("./avatar"));
+var back_1 = __importDefault(require("./back"));
+var close_1 = __importDefault(require("./close"));
+var minimize_1 = __importDefault(require("./minimize"));
+var Node = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, node = __rest(_a, ["className"]);
+    var dispatch = (0, widget_ui_1.useDispatch)();
+    var size = node.size, padding = node.padding, type = node.type, tooltip = node.tooltip, _c = node.show, show = _c === void 0 ? true : _c;
+    if (type === 'back') {
+        return (react_1.default.createElement(NodeWrapper, { size: size || '64px', padding: padding || '10px' },
+            react_1.default.createElement(widget_ui_1.TransitionComponent, { in: show, timeout: 300, transitions: {
+                    enter: {
+                        type: 'scale',
+                        easing: 'cubic-bezier(.08,.84,.74,1.84)',
+                    },
+                    exit: {
+                        type: 'scale',
+                        easing: 'ease-out',
+                    },
+                } }, function (state, css) { return (react_1.default.createElement(ActionButton, { title: tooltip, "aria-label": tooltip, animationCss: css, onClick: function () {
+                    dispatch('back');
+                } },
+                react_1.default.createElement(back_1.default, { node: node }))); })));
+    }
+    if (!show) {
+        return null;
+    }
+    return (react_1.default.createElement(NodeWrapper, { size: size || '64px', padding: padding || '10px', squareRatio: type === 'avatar' },
+        type === 'avatar' && react_1.default.createElement(avatar_1.default, { node: node }),
+        type === 'close' && (react_1.default.createElement(ActionButton, { title: tooltip, "aria-label": tooltip, onClick: function () {
+                dispatch('close');
+            } },
+            react_1.default.createElement(close_1.default, { node: node }))),
+        type === 'minimize' && (react_1.default.createElement(ActionButton, { title: tooltip, "aria-label": tooltip, onClick: function () {
+                dispatch('minimize');
+            } },
+            react_1.default.createElement(minimize_1.default, { node: node })))));
+};
+exports.default = Node;
+var NodeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex: 1;\n    max-width: ", ";\n    ", "\n    text-align: center;\n    padding: 0 ", ";\n    && {\n        box-sizing: content-box;\n    }\n\n    svg {\n        vertical-align: middle;\n    }\n\n    i {\n        color: ", ";\n        font-size: ", ";\n        min-width: 1em;\n        min-height: 1em;\n        display: inline-block;\n    }\n"], ["\n    flex: 1;\n    max-width: ", ";\n    ", "\n    text-align: center;\n    padding: 0 ", ";\n    && {\n        box-sizing: content-box;\n    }\n\n    svg {\n        vertical-align: middle;\n    }\n\n    i {\n        color: ", ";\n        font-size: ", ";\n        min-width: 1em;\n        min-height: 1em;\n        display: inline-block;\n    }\n"])), function (p) { return p.size; }, function (p) { return p.squareRatio && "max-height: ".concat(p.size, ";"); }, function (p) { return p.padding; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { return p.size; });
+var ActionButton = styled_components_1.default.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", ";\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    &:focus {\n        ", ";\n    }\n"], ["\n    ", ";\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    &:focus {\n        ", ";\n    }\n"])), function (p) { return !!p.animationCss && p.animationCss; }, function (p) {
+    var _a, _b, _c;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                ", ";\n                border-color: ", ";\n            "], ["\n                ", ";\n                border-color: ", ";\n            "])), widget_ui_1.borderTabStyle, (_c = (_b = p.theme.accessibility) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.inactiveText);
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/utils.d.ts

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

package/lib/utils.js

@@ -0,0 +1,90 @@
+"use strict";
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isOnInitialRoute = exports.createNodes = exports.calculateMargin = void 0;
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var calculateMargin = function (leftNodes, rightNodes, textAlign) {
+    var _a;
+    if (textAlign !== 'center') {
+        return {};
+    }
+    var calculate = function (nodes) {
+        return nodes.reduce(function (acc, node) {
+            var _a = __read(node.padding.split('px'), 1), padding = _a[0];
+            var _b = __read(node.size.split('px'), 1), size = _b[0];
+            return acc + (+size + +padding * 2);
+        }, 0);
+    };
+    var leftSize = calculate(leftNodes);
+    var rightSize = calculate(rightNodes);
+    var total = leftSize - rightSize;
+    if (total === 0) {
+        return {};
+    }
+    var direction = leftSize > rightSize ? 'right' : 'left';
+    return _a = {},
+        _a[direction] = "".concat(Math.abs(total), "px"),
+        _a;
+};
+exports.calculateMargin = calculateMargin;
+var createNodes = function (actions) {
+    return Object.keys(actions).reduce(function (acc, key) {
+        var node = actions[key];
+        if (!node) {
+            return acc;
+        }
+        var _a = __read(acc, 2), left = _a[0], right = _a[1];
+        var arr = node.position === 'left' ? left : right;
+        var symbol = actions[key].symbol;
+        if (symbol && typeof symbol === 'string') {
+            symbol = {
+                type: 'Uri',
+                content: 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;
+    }, [[], []]);
+};
+exports.createNodes = createNodes;
+var isOnInitialRoute = function (container) {
+    return container.getAsync('router').then(function (router) {
+        if (!router) {
+            return true;
+        }
+        var initialRoute = router.getInitialRoute();
+        var _a = router.getRouteData(), name = _a.name, params = _a.params;
+        (0, widget_utilities_1.removeNullAndUndefinedValues)(params);
+        if ((initialRoute === null || initialRoute === void 0 ? void 0 : initialRoute.name) !== name || Object.keys(params).length > 0) {
+            return false;
+        }
+        return true;
+    });
+};
+exports.isOnInitialRoute = isOnInitialRoute;

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

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

package/lib/widget-header-component.js

@@ -0,0 +1,102 @@
+"use strict";
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var widget_core_1 = require("@telia-ace/widget-core");
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var utils_1 = require("./utils");
+var WidgetHeaderComponent = function (container) {
+    return (0, widget_ui_1.createReactComponent)(container, 'widget-header', Promise.resolve().then(function () { return __importStar(require('./widget-header')); }), function (component) {
+        var events = container.get('$widget').events;
+        var _a = __read((0, widget_core_1.createEventSubscriber)(events), 2), subscribe = _a[0], unsubscribe = _a[1];
+        var _b = component.properties().actions, actions = _b === void 0 ? {} : _b;
+        component.actions.create('close', function (data, options) {
+            if (options.preventDefault) {
+                return;
+            }
+            var widget = container.get('$widget');
+            return widget.invoke('close');
+        });
+        component.actions.create('back', function (data, options) {
+            if (options.preventDefault) {
+                return;
+            }
+            return container.getAsync('router').then(function (router) {
+                router.goBack();
+            });
+        });
+        component.properties(function (properties) {
+            var _a = properties.actions, actions = _a === void 0 ? {} : _a;
+            if (!actions.back) {
+                return;
+            }
+            Object.keys(actions).forEach(function (key) {
+                var node = actions[key];
+                if (key === 'back') {
+                    node.show = properties.showBack;
+                }
+            });
+            return { actions: actions };
+        });
+        component.actions.create('show-back', function (showBack) {
+            component.writeProperties({ showBack: showBack });
+        });
+        if (actions.back) {
+            var showBack = function () {
+                return (0, utils_1.isOnInitialRoute)(container).then(function (onInitialRoute) {
+                    return component.actions.dispatch('show-back', !onInitialRoute);
+                });
+            };
+            showBack();
+            subscribe('router:changed', showBack);
+        }
+        component.actions.create('minimize', function (data, options) {
+            if (options.preventDefault) {
+                return;
+            }
+            var widget = container.get('$widget');
+            return widget.invoke('hide');
+        });
+        return function () {
+            unsubscribe();
+        };
+    });
+};
+exports.default = WidgetHeaderComponent;

package/lib/widget-header.d.ts

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

package/lib/widget-header.js

@@ -0,0 +1,99 @@
+"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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+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 widget_utilities_1 = require("@telia-ace/widget-utilities");
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var node_1 = __importDefault(require("./node"));
+var utils_1 = require("./utils");
+var WidgetHeader = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var _b = (0, widget_ui_1.useProperties)(), header = _b.header, tagline = _b.tagline, route = _b.route, _c = _b.tooltip, tooltip = _c === void 0 ? '' : _c, _d = _b.actions, actions = _d === void 0 ? {} : _d, _e = _b.textAlign, textAlign = _e === void 0 ? 'center' : _e;
+    var _f = __read((0, utils_1.createNodes)(actions), 2), leftNodes = _f[0], rightNodes = _f[1];
+    leftNodes.sort(function (a, b) { return (a.order || 0) - (b.order || 0); });
+    rightNodes.sort(function (a, b) { return (a.order || 0) - (b.order || 0); });
+    return (react_1.default.createElement(Wrapper, __assign({}, other, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-widget-header') }),
+        leftNodes.map(function (node, key) { return (react_1.default.createElement(node_1.default, __assign({ key: "".concat(node.type, "+_").concat(key) }, node))); }),
+        react_1.default.createElement(MainNode, { textAlign: textAlign, margin: (0, utils_1.calculateMargin)(leftNodes, rightNodes, textAlign) },
+            route ? (react_1.default.createElement(StyledLink, { routeName: route, title: tooltip, "aria-label": tooltip },
+                react_1.default.createElement(widget_ui_1.Typography, { variant: "h1" }, header))) : (react_1.default.createElement(widget_ui_1.Typography, { variant: "h1" }, header)),
+            tagline && react_1.default.createElement(Tagline, null, tagline)),
+        rightNodes.map(function (node, key) { return (react_1.default.createElement(node_1.default, __assign({ key: "".concat(node.type, "+_").concat(key) }, node))); })));
+};
+exports.default = WidgetHeader;
+var Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ", "\n\n    p {\n        color: ", ";\n        margin: 0;\n    }\n\n    svg {\n        line,\n        path,\n        circle {\n            stroke: ", ";\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ", "\n\n    p {\n        color: ", ";\n        margin: 0;\n    }\n\n    svg {\n        line,\n        path,\n        circle {\n            stroke: ", ";\n        }\n    }\n"])), (0, widget_ui_1.headingElement)('h1', (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            font-size: ", ";\n            margin: 0;\n            font-weight: 300;\n            color: ", ";\n        "], ["\n            font-size: ", ";\n            margin: 0;\n            font-weight: 300;\n            color: ", ";\n        "])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; })), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var Tagline = styled_components_1.default.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: 300;\n"], ["\n    font-size: ", ";\n    font-weight: 300;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var MainNode = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex: 1;\n    text-align: ", ";\n\n    margin-right: ", ";\n    margin-left: ", ";\n"], ["\n    flex: 1;\n    text-align: ", ";\n\n    margin-right: ", ";\n    margin-left: ", ";\n"])), function (p) { return p.textAlign; }, function (p) { return p.margin.right || 0; }, function (p) { return p.margin.left || 0; });
+var StyledLink = (0, styled_components_1.default)(widget_ui_1.Link)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    text-decoration: none;\n    &:focus {\n        ", "\n    }\n"], ["\n    text-decoration: none;\n    &:focus {\n        ", "\n    }\n"])), (0, widget_ui_1.headingElement)('h1', (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                ", ";\n            "], ["\n                ", ";\n            "])), function (p) {
+    var _a;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                        ", "\n                        display: inline-block;\n                    "], ["\n                        ", "\n                        display: inline-block;\n                    "])), widget_ui_1.linkTabStyle);
+})));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/lib-esm/avatar.d.ts

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

package/lib-esm/avatar.js

@@ -0,0 +1,52 @@
+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 __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;
+};
+import { SymbolBadge } from '@telia-ace/widget-ui';
+import React from 'react';
+import styled, { css } from '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.createElement(Wrapper, { symbol: node.symbol, svg: isSvg, size: size, backgroundSize: "cover" });
+};
+export default Avatar;
+var Wrapper = styled(function (_a) {
+    var svg = _a.svg, other = __rest(_a, ["svg"]);
+    return React.createElement(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 && 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-esm/back.d.ts

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

package/lib-esm/back.js

@@ -0,0 +1,8 @@
+import { SymbolBadge } from '@telia-ace/widget-ui';
+import React from 'react';
+var Back = function (_a) {
+    var node = _a.node;
+    var symbol = node.symbol || { type: 'Svg', content: 'back' };
+    return React.createElement(SymbolBadge, { size: 20, symbol: symbol });
+};
+export default Back;

package/lib-esm/close.d.ts

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

package/lib-esm/close.js

@@ -0,0 +1,9 @@
+import { SymbolBadge } from '@telia-ace/widget-ui';
+import React from 'react';
+var Close = function (_a) {
+    var node = _a.node;
+    var symbol = node.symbol || { type: 'Svg', content: 'close' };
+    var size = parseInt(node === null || node === void 0 ? void 0 : node.size, 10) || 14;
+    return React.createElement(SymbolBadge, { size: size, symbol: symbol });
+};
+export default Close;

package/lib-esm/index.d.ts

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

package/lib-esm/index.js

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

package/lib-esm/minimize.d.ts

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

package/lib-esm/minimize.js

@@ -0,0 +1,9 @@
+import { SymbolBadge } from '@telia-ace/widget-ui';
+import React from 'react';
+var Minimize = function (_a) {
+    var node = _a.node;
+    var symbol = node.symbol || { type: 'Svg', content: 'minimize' };
+    var size = parseInt(node === null || node === void 0 ? void 0 : node.size, 10) || 20;
+    return React.createElement(SymbolBadge, { size: size, symbol: symbol });
+};
+export default Minimize;

package/lib-esm/node.d.ts

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

package/lib-esm/node.js

@@ -0,0 +1,63 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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;
+};
+import { borderTabStyle, TransitionComponent, useDispatch } from '@telia-ace/widget-ui';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import Avatar from './avatar';
+import Back from './back';
+import Close from './close';
+import Minimize from './minimize';
+var Node = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, node = __rest(_a, ["className"]);
+    var dispatch = useDispatch();
+    var size = node.size, padding = node.padding, type = node.type, tooltip = node.tooltip, _c = node.show, show = _c === void 0 ? true : _c;
+    if (type === 'back') {
+        return (React.createElement(NodeWrapper, { size: size || '64px', padding: padding || '10px' },
+            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',
+                    },
+                } }, function (state, css) { return (React.createElement(ActionButton, { title: tooltip, "aria-label": tooltip, animationCss: css, onClick: function () {
+                    dispatch('back');
+                } },
+                React.createElement(Back, { node: node }))); })));
+    }
+    if (!show) {
+        return null;
+    }
+    return (React.createElement(NodeWrapper, { size: size || '64px', padding: padding || '10px', squareRatio: type === 'avatar' },
+        type === 'avatar' && React.createElement(Avatar, { node: node }),
+        type === 'close' && (React.createElement(ActionButton, { title: tooltip, "aria-label": tooltip, onClick: function () {
+                dispatch('close');
+            } },
+            React.createElement(Close, { node: node }))),
+        type === 'minimize' && (React.createElement(ActionButton, { title: tooltip, "aria-label": tooltip, onClick: function () {
+                dispatch('minimize');
+            } },
+            React.createElement(Minimize, { node: node })))));
+};
+export default Node;
+var NodeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex: 1;\n    max-width: ", ";\n    ", "\n    text-align: center;\n    padding: 0 ", ";\n    && {\n        box-sizing: content-box;\n    }\n\n    svg {\n        vertical-align: middle;\n    }\n\n    i {\n        color: ", ";\n        font-size: ", ";\n        min-width: 1em;\n        min-height: 1em;\n        display: inline-block;\n    }\n"], ["\n    flex: 1;\n    max-width: ", ";\n    ", "\n    text-align: center;\n    padding: 0 ", ";\n    && {\n        box-sizing: content-box;\n    }\n\n    svg {\n        vertical-align: middle;\n    }\n\n    i {\n        color: ", ";\n        font-size: ", ";\n        min-width: 1em;\n        min-height: 1em;\n        display: inline-block;\n    }\n"])), function (p) { return p.size; }, function (p) { return p.squareRatio && "max-height: ".concat(p.size, ";"); }, function (p) { return p.padding; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { return p.size; });
+var ActionButton = styled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", ";\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    &:focus {\n        ", ";\n    }\n"], ["\n    ", ";\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    &:focus {\n        ", ";\n    }\n"])), function (p) { return !!p.animationCss && p.animationCss; }, function (p) {
+    var _a, _b, _c;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                ", ";\n                border-color: ", ";\n            "], ["\n                ", ";\n                border-color: ", ";\n            "])), borderTabStyle, (_c = (_b = p.theme.accessibility) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.inactiveText);
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/lib-esm/utils.d.ts

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

package/lib-esm/utils.js

@@ -0,0 +1,84 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { removeNullAndUndefinedValues } from '@telia-ace/widget-utilities';
+export var calculateMargin = function (leftNodes, rightNodes, textAlign) {
+    var _a;
+    if (textAlign !== 'center') {
+        return {};
+    }
+    var calculate = function (nodes) {
+        return nodes.reduce(function (acc, node) {
+            var _a = __read(node.padding.split('px'), 1), padding = _a[0];
+            var _b = __read(node.size.split('px'), 1), size = _b[0];
+            return acc + (+size + +padding * 2);
+        }, 0);
+    };
+    var leftSize = calculate(leftNodes);
+    var rightSize = calculate(rightNodes);
+    var total = leftSize - rightSize;
+    if (total === 0) {
+        return {};
+    }
+    var direction = leftSize > rightSize ? 'right' : 'left';
+    return _a = {},
+        _a[direction] = "".concat(Math.abs(total), "px"),
+        _a;
+};
+export var createNodes = function (actions) {
+    return Object.keys(actions).reduce(function (acc, key) {
+        var node = actions[key];
+        if (!node) {
+            return acc;
+        }
+        var _a = __read(acc, 2), left = _a[0], right = _a[1];
+        var arr = node.position === 'left' ? left : right;
+        var symbol = actions[key].symbol;
+        if (symbol && typeof symbol === 'string') {
+            symbol = {
+                type: 'Uri',
+                content: 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;
+    }, [[], []]);
+};
+export var isOnInitialRoute = function (container) {
+    return container.getAsync('router').then(function (router) {
+        if (!router) {
+            return true;
+        }
+        var initialRoute = router.getInitialRoute();
+        var _a = router.getRouteData(), name = _a.name, params = _a.params;
+        removeNullAndUndefinedValues(params);
+        if ((initialRoute === null || initialRoute === void 0 ? void 0 : initialRoute.name) !== name || Object.keys(params).length > 0) {
+            return false;
+        }
+        return true;
+    });
+};

package/lib-esm/widget-header-component.d.ts

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

package/lib-esm/widget-header-component.js

@@ -0,0 +1,77 @@
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { createEventSubscriber } from '@telia-ace/widget-core';
+import { createReactComponent } from '@telia-ace/widget-ui';
+import { isOnInitialRoute } from './utils';
+var WidgetHeaderComponent = function (container) {
+    return createReactComponent(container, 'widget-header', import('./widget-header'), function (component) {
+        var events = container.get('$widget').events;
+        var _a = __read(createEventSubscriber(events), 2), subscribe = _a[0], unsubscribe = _a[1];
+        var _b = component.properties().actions, actions = _b === void 0 ? {} : _b;
+        component.actions.create('close', function (data, options) {
+            if (options.preventDefault) {
+                return;
+            }
+            var widget = container.get('$widget');
+            return widget.invoke('close');
+        });
+        component.actions.create('back', function (data, options) {
+            if (options.preventDefault) {
+                return;
+            }
+            return container.getAsync('router').then(function (router) {
+                router.goBack();
+            });
+        });
+        component.properties(function (properties) {
+            var _a = properties.actions, actions = _a === void 0 ? {} : _a;
+            if (!actions.back) {
+                return;
+            }
+            Object.keys(actions).forEach(function (key) {
+                var node = actions[key];
+                if (key === 'back') {
+                    node.show = properties.showBack;
+                }
+            });
+            return { actions: actions };
+        });
+        component.actions.create('show-back', function (showBack) {
+            component.writeProperties({ showBack: showBack });
+        });
+        if (actions.back) {
+            var showBack = function () {
+                return isOnInitialRoute(container).then(function (onInitialRoute) {
+                    return component.actions.dispatch('show-back', !onInitialRoute);
+                });
+            };
+            showBack();
+            subscribe('router:changed', showBack);
+        }
+        component.actions.create('minimize', function (data, options) {
+            if (options.preventDefault) {
+                return;
+            }
+            var widget = container.get('$widget');
+            return widget.invoke('hide');
+        });
+        return function () {
+            unsubscribe();
+        };
+    });
+};
+export default WidgetHeaderComponent;

package/lib-esm/widget-header.d.ts

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

package/lib-esm/widget-header.js

@@ -0,0 +1,71 @@
+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 __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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { headingElement, Link, linkTabStyle, Typography, useProperties, } from '@telia-ace/widget-ui';
+import { appendClassNames } from '@telia-ace/widget-utilities';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import Node from './node';
+import { calculateMargin, createNodes } from './utils';
+var WidgetHeader = function (_a) {
+    var className = _a.className, other = __rest(_a, ["className"]);
+    var _b = useProperties(), header = _b.header, tagline = _b.tagline, route = _b.route, _c = _b.tooltip, tooltip = _c === void 0 ? '' : _c, _d = _b.actions, actions = _d === void 0 ? {} : _d, _e = _b.textAlign, textAlign = _e === void 0 ? 'center' : _e;
+    var _f = __read(createNodes(actions), 2), leftNodes = _f[0], rightNodes = _f[1];
+    leftNodes.sort(function (a, b) { return (a.order || 0) - (b.order || 0); });
+    rightNodes.sort(function (a, b) { return (a.order || 0) - (b.order || 0); });
+    return (React.createElement(Wrapper, __assign({}, other, { className: appendClassNames(className, 'humany-widget-header') }),
+        leftNodes.map(function (node, key) { return (React.createElement(Node, __assign({ key: "".concat(node.type, "+_").concat(key) }, node))); }),
+        React.createElement(MainNode, { textAlign: textAlign, margin: calculateMargin(leftNodes, rightNodes, textAlign) },
+            route ? (React.createElement(StyledLink, { routeName: route, title: tooltip, "aria-label": tooltip },
+                React.createElement(Typography, { variant: "h1" }, header))) : (React.createElement(Typography, { variant: "h1" }, header)),
+            tagline && React.createElement(Tagline, null, tagline)),
+        rightNodes.map(function (node, key) { return (React.createElement(Node, __assign({ key: "".concat(node.type, "+_").concat(key) }, node))); })));
+};
+export default WidgetHeader;
+var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ", "\n\n    p {\n        color: ", ";\n        margin: 0;\n    }\n\n    svg {\n        line,\n        path,\n        circle {\n            stroke: ", ";\n        }\n    }\n"], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ", "\n\n    p {\n        color: ", ";\n        margin: 0;\n    }\n\n    svg {\n        line,\n        path,\n        circle {\n            stroke: ", ";\n        }\n    }\n"])), headingElement('h1', css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            font-size: ", ";\n            margin: 0;\n            font-weight: 300;\n            color: ", ";\n        "], ["\n            font-size: ", ";\n            margin: 0;\n            font-weight: 300;\n            color: ", ";\n        "])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.huge; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; })), function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; }, function (p) { var _a; return (_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.text; });
+var Tagline = styled.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-size: ", ";\n    font-weight: 300;\n"], ["\n    font-size: ", ";\n    font-weight: 300;\n"])), function (p) { var _a; return (_a = p.theme.fonts) === null || _a === void 0 ? void 0 : _a.normal; });
+var MainNode = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex: 1;\n    text-align: ", ";\n\n    margin-right: ", ";\n    margin-left: ", ";\n"], ["\n    flex: 1;\n    text-align: ", ";\n\n    margin-right: ", ";\n    margin-left: ", ";\n"])), function (p) { return p.textAlign; }, function (p) { return p.margin.right || 0; }, function (p) { return p.margin.left || 0; });
+var StyledLink = styled(Link)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    text-decoration: none;\n    &:focus {\n        ", "\n    }\n"], ["\n    text-decoration: none;\n    &:focus {\n        ", "\n    }\n"])), headingElement('h1', css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                ", ";\n            "], ["\n                ", ";\n            "])), function (p) {
+    var _a;
+    return ((_a = p.theme.accessibility) === null || _a === void 0 ? void 0 : _a.isTabbing) && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                        ", "\n                        display: inline-block;\n                    "], ["\n                        ", "\n                        display: inline-block;\n                    "])), linkTabStyle);
+})));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "@telia-ace/widget-components-widget-header",
+    "version": "1.0.0",
+    "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",
+    "files": [
+        "LICENSE.txt",
+        "README.md",
+        "lib/",
+        "lib-esm/"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "scripts": {
+        "clean": "cleandir lib && cleandir lib-esm",
+        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+    },
+    "sideEffects": false,
+    "typings": "lib/index.d.ts",
+    "dependencies": {
+        "@telia-ace/widget-core": "^1.0.0",
+        "@telia-ace/widget-routing": "^1.0.0",
+        "@telia-ace/widget-ui": "^1.0.0",
+        "@telia-ace/widget-utilities": "^1.0.1",
+        "@webprovisions/platform": "^1.1.2",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "styled-components": "^4.3.2"
+    },
+    "devDependencies": {
+        "@types/react": "^17.0.39",
+        "@types/react-dom": "^17.0.13",
+        "@types/styled-components": "^5.1.7"
+    },
+    "gitHead": "26a4f73e6b1811cf60ca62a274b54b15127a83f6"
+}