@telia-ace/widget-components-widget-header 1.0.3 → 1.0.6

package/lib-esm/node.js

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

@@ -1,84 +0,0 @@
-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.js

@@ -1,77 +0,0 @@
-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.js

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