@telia-ace/widget-types-grid 1.0.0

package/lib/ui/resolvable-component.js

@@ -0,0 +1,87 @@
+"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;
+};
+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 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var component_1 = require("./component");
+var NonResolvedComponentWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    text-align: center;\n    ", "\n    ", "\n  ", "\n"], ["\n    text-align: center;\n    ", "\n    ", "\n  ", "\n"])), function (p) {
+    var _a, _b, _c;
+    return typeof ((_a = p.theme.colors) === null || _a === void 0 ? void 0 : _a.warning) !== 'undefined' && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            color: ", ";\n            border: 2px dashed ", ";\n        "], ["\n            color: ", ";\n            border: 2px dashed ", ";\n        "])), (_b = p.theme.colors) === null || _b === void 0 ? void 0 : _b.warning, (_c = p.theme.colors) === null || _c === void 0 ? void 0 : _c.warning);
+}, function (p) {
+    return typeof p.theme.borderRadius !== 'undefined' && "border-radius: ".concat(p.theme.borderRadius, ";");
+}, component_1.styling);
+var ResolvableComponent = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, other = __rest(_a, ["className", "children"]);
+    var ResolvedComponent = (0, widget_ui_1.useComponent)();
+    var _c = (0, widget_ui_1.useComponentDescriptor)(), name = _c.name, type = _c.type, id = _c.id;
+    var StyledResolvableComponent = (0, react_1.useMemo)(function () {
+        if (ResolvedComponent) {
+            return (0, styled_components_1.default)(ResolvedComponent)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    ", "\n                    ", "\n                "], ["\n                    ", "\n                    ", "\n                "])), component_1.styling, widget_ui_1.filterCssPropsStyle);
+        }
+        return null;
+    }, [ResolvedComponent]);
+    if (typeof ResolvedComponent === 'undefined') {
+        return null;
+    }
+    if (ResolvedComponent === null || StyledResolvableComponent === null) {
+        if (process.env.NODE_ENV !== 'production') {
+            return (react_1.default.createElement(NonResolvedComponentWrapper, __assign({}, other, { title: "type: ".concat(type, ", definition-id: ").concat(name, ", instance-id: ").concat(id), className: (0, widget_utilities_1.appendClassNames)(className, 'humany-non-resolved-component') }),
+                react_1.default.createElement(widget_ui_1.Typography, { variant: "h5" }, "Non Resolved Component Type")));
+        }
+        return null;
+    }
+    return (react_1.default.createElement(react_1.Suspense, { fallback: null },
+        react_1.default.createElement(StyledResolvableComponent, __assign({ ref: ref }, other, { className: (0, widget_utilities_1.appendClassNames)(className, 'humany-component', "humany-component-".concat(name)) }), children)));
+});
+exports.default = ResolvableComponent;
+var templateObject_1, templateObject_2, templateObject_3;

package/lib/ui/switch.d.ts

@@ -0,0 +1,11 @@
+import { ViewDefinition } from '@telia-ace/widget-core';
+import React from 'react';
+declare type Props = {
+    location?: any;
+    views: {
+        [key: string]: ViewDefinition;
+    };
+    render: (viewName: string) => JSX.Element | null;
+};
+declare const Switch: React.FC<Props>;
+export default Switch;

package/lib/ui/switch.js

@@ -0,0 +1,58 @@
+"use strict";
+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 __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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_router_1 = require("react-router");
+var Switch = function (_a) {
+    var views = _a.views, location = _a.location, render = _a.render;
+    return (react_1.default.createElement(react_router_1.Switch, { location: location
+            ? __assign(__assign({}, location), { pathname: location.pathname.split('?')[0] }) : location }, __spreadArray(__spreadArray([], __read(Object.keys(views).filter(function (key) { return !!views[key].path; })), false), __read(Object.keys(views).filter(function (key) { return !views[key].path; })), false).map(function (name) {
+        var path = views[name].path;
+        if (!path) {
+            return react_1.default.createElement(react_router_1.Route, { key: name, render: function () { return render(name); } });
+        }
+        if (Array.isArray(path)) {
+            return path.map(function (path) { return (react_1.default.createElement(react_router_1.Route, { key: name, exact: true, path: path, render: function () { return render(name); } })); });
+        }
+        return react_1.default.createElement(react_router_1.Route, { key: name, exact: true, path: path, render: function () { return render(name); } });
+    })));
+};
+exports.default = Switch;

package/lib/ui/unmount.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (element: HTMLElement) => boolean;
+export default _default;

package/lib/ui/unmount.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_dom_1 = require("react-dom");
+exports.default = (function (element) { return (0, react_dom_1.unmountComponentAtNode)(element); });

package/lib/ui/use-component-node-properties.d.ts

@@ -0,0 +1,3 @@
+import { ComponentNodeProperties } from '@telia-ace/widget-core';
+declare const _default: (id: string) => ComponentNodeProperties;
+export default _default;

package/lib/ui/use-component-node-properties.js

@@ -0,0 +1,44 @@
+"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 });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = require("react");
+exports.default = (function (id) {
+    var node = (0, widget_ui_1.useComponentNode)(id);
+    var components = (0, widget_ui_1.useComponentPlatform)();
+    var _a = __read((0, react_1.useState)({}), 2), properties = _a[0], setProperties = _a[1];
+    var isMounted = (0, widget_ui_1.useIsMounted)();
+    (0, react_1.useEffect)(function () {
+        if (node && isMounted.current) {
+            setProperties(node.attributes.properties);
+        }
+    }, [node, id, isMounted]);
+    (0, react_1.useEffect)(function () {
+        if (components) {
+            var unsubscribe_1 = components.events.subscribe('components:properties-changed', function (event, data) {
+                if (node === data.node && isMounted.current) {
+                    setProperties(data.node.attributes.properties);
+                }
+            });
+            return function () {
+                unsubscribe_1();
+            };
+        }
+    }, [components, isMounted, id, node]);
+    return properties;
+});

package/lib/ui/use-router.d.ts

@@ -0,0 +1,4 @@
+import { RoutingService } from '@telia-ace/widget-routing';
+import { Container } from '@webprovisions/platform';
+declare const _default: (container: Container) => RoutingService | null;
+export default _default;

package/lib/ui/use-router.js

@@ -0,0 +1,32 @@
+"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 });
+var widget_ui_1 = require("@telia-ace/widget-ui");
+var react_1 = require("react");
+exports.default = (function (container) {
+    var _a = __read((0, react_1.useState)(null), 2), router = _a[0], setRouter = _a[1];
+    var isMounted = (0, widget_ui_1.useIsMounted)();
+    (0, react_1.useEffect)(function () {
+        container.getAsync('router').then(function (router) {
+            if (isMounted.current) {
+                setRouter(router);
+            }
+        });
+    }, [container, isMounted]);
+    return router;
+});

package/lib/ui/view-outlet.d.ts

@@ -0,0 +1,32 @@
+import { Symbol } from '@telia-ace/widget-ui';
+import { Container } from '@webprovisions/platform';
+import { TriggerType } from './prepare-dom';
+export declare type BadgeOptions = {
+    symbol?: Symbol;
+    label?: string;
+    ariaLabel?: string;
+    openTooltip?: string;
+    closedTooltip?: string;
+};
+export declare type ViewOutletOptions = {
+    widgetDOMElement: HTMLElement;
+    triggerDOMElement?: HTMLElement;
+    triggerOptions?: BadgeOptions | boolean;
+    triggerType: TriggerType;
+    cachedOriginals: {
+        widgetDOMElement?: Node;
+        triggerDOMElement?: Node;
+    };
+};
+export declare class ViewOutlet {
+    options: ViewOutletOptions;
+    container: Container;
+    private unsubscribe;
+    constructor(container: Container, options: ViewOutletOptions);
+    /**
+     * Renders the view outlet to the DOM.
+     */
+    render(): Promise<void>;
+    renderBadge(options: BadgeOptions): void;
+    dispose(): Promise<void>;
+}

package/lib/ui/view-outlet.js

@@ -0,0 +1,151 @@
+"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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViewOutlet = void 0;
+var widget_services_1 = require("@telia-ace/widget-services");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var html_element_handlers_1 = require("./html-element-handlers");
+var prepare_dom_1 = require("./prepare-dom");
+var MODALS_STORAGE_KEY = 'modals';
+var ViewOutlet = /** @class */ (function () {
+    function ViewOutlet(container, options) {
+        this.options = options;
+        this.unsubscribe = [];
+        this.container = container.createChild(this);
+        this.container.register('widgetDOMElement', this.options.widgetDOMElement);
+        this.container.register('triggerDOMElement', this.options.triggerDOMElement);
+        var widget = this.container.get('$widget');
+        this.options.widgetDOMElement.classList.add('humany-widget');
+        this.options.widgetDOMElement.classList.add("humany_".concat(widget.name));
+        var widgetDOMElements = container.get('widgetDOMElements') || [];
+        container.register('widgetDOMElements', __spreadArray(__spreadArray([], __read(widgetDOMElements), false), [
+            this.options.widgetDOMElement,
+        ], false));
+    }
+    /**
+     * Renders the view outlet to the DOM.
+     */
+    ViewOutlet.prototype.render = function () {
+        var _this = this;
+        var _a = this.options, widgetDOMElement = _a.widgetDOMElement, triggerDOMElement = _a.triggerDOMElement;
+        var widget = this.container.get('$widget');
+        if (widgetDOMElement.getAttribute('data-rendered') === 'true') {
+            return Promise.resolve();
+        }
+        if (triggerDOMElement && this.options.triggerType === prepare_dom_1.TriggerType.Badge) {
+            (0, html_element_handlers_1.setLoading)(triggerDOMElement);
+        }
+        return Promise.resolve().then(function () { return __importStar(require('./render')); }).then(function (module) { return module.default(_this.container, widgetDOMElement); })
+            .then(function () {
+            widgetDOMElement.setAttribute('data-rendered', 'true');
+            if (triggerDOMElement && _this.options.triggerType === prepare_dom_1.TriggerType.Badge) {
+                var tooltip = _this.options.triggerOptions.openTooltip;
+                (0, html_element_handlers_1.setActive)(triggerDOMElement, tooltip);
+            }
+            (0, widget_utilities_1.notifyDataLoaded)(_this.container, widgetDOMElement);
+            var widgets = _this.container.get('$environment').widgets.all();
+            (0, widget_services_1.readStorage)(_this.container, MODALS_STORAGE_KEY, widget_services_1.StorageMedium.Session).then(function (modals) {
+                if (modals) {
+                    modals.forEach(function (modal) {
+                        if (widgets.find(function (w) { return w.name === modal.name && w.state === 'activated'; })) {
+                            widget.events.dispatch('widget:modal-opened', modal);
+                        }
+                    });
+                }
+            });
+        });
+    };
+    ViewOutlet.prototype.renderBadge = function (options) {
+        var triggerDOMElement = this.options.triggerDOMElement;
+        if (!triggerDOMElement) {
+            return;
+        }
+        if (!triggerDOMElement.getAttribute('role')) {
+            triggerDOMElement.setAttribute('role', 'button');
+        }
+        var name = this.container.get('$widget').name;
+        var label = options.label, symbol = options.symbol, ariaLabel = options.ariaLabel, closedTooltip = options.closedTooltip, openTooltip = options.openTooltip;
+        var triggerOptions = { closedTooltip: closedTooltip, openTooltip: openTooltip };
+        this.options.triggerOptions = triggerOptions;
+        var removeTriggerListeners = (0, html_element_handlers_1.createTriggerElement)(triggerDOMElement, {
+            label: label,
+            symbol: symbol,
+            ariaLabel: ariaLabel,
+            widgetName: name,
+            tooltip: closedTooltip,
+        });
+        this.unsubscribe.push(removeTriggerListeners);
+    };
+    ViewOutlet.prototype.dispose = function () {
+        var _this = this;
+        return Promise.resolve().then(function () { return __importStar(require('./unmount')); }).then(function (module) {
+            var _a, _b, _c, _d;
+            var _e = _this.options, triggerDOMElement = _e.triggerDOMElement, widgetDOMElement = _e.widgetDOMElement;
+            module.default(widgetDOMElement);
+            if (_this.options.cachedOriginals.widgetDOMElement) {
+                if (widgetDOMElement) {
+                    (_a = widgetDOMElement.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(_this.options.cachedOriginals.widgetDOMElement, widgetDOMElement);
+                }
+            }
+            if (_this.options.cachedOriginals.triggerDOMElement) {
+                if (triggerDOMElement) {
+                    (_b = triggerDOMElement.parentNode) === null || _b === void 0 ? void 0 : _b.replaceChild(_this.options.cachedOriginals.triggerDOMElement, triggerDOMElement);
+                }
+            }
+            _this.unsubscribe.forEach(function (unsubscribe) {
+                unsubscribe();
+            });
+            (_c = widgetDOMElement.parentNode) === null || _c === void 0 ? void 0 : _c.removeChild(widgetDOMElement);
+            (_d = triggerDOMElement === null || triggerDOMElement === void 0 ? void 0 : triggerDOMElement.parentNode) === null || _d === void 0 ? void 0 : _d.removeChild(triggerDOMElement);
+        });
+    };
+    return ViewOutlet;
+}());
+exports.ViewOutlet = ViewOutlet;

package/lib/ui/view.d.ts

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

package/lib/ui/view.js

@@ -0,0 +1,75 @@
+"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 __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 = __importDefault(require("styled-components"));
+var component_1 = __importDefault(require("./component"));
+var switch_1 = __importDefault(require("./switch"));
+var StyledView = (0, styled_components_1.default)(widget_ui_1.Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (p) { return !!p.scrollableCss && p.scrollableCss; });
+var View = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, other = __rest(_a, ["className"]);
+    var properties = (0, widget_ui_1.useProperties)();
+    var context = (0, widget_ui_1.useContext)();
+    var container = (0, widget_ui_1.useContainer)();
+    var node = (0, widget_ui_1.useComponentNode)();
+    var views = container.get('$settings').views;
+    var _c = context.gap, gap = _c === void 0 ? '0' : _c;
+    var _d = properties.columns, columns = _d === void 0 ? 1 : _d, _e = properties.animation, animation = _e === void 0 ? 'none' : _e, _f = properties.scrollable, scrollable = _f === void 0 ? false : _f, areaProperties = __rest(properties, ["columns", "animation", "scrollable"]);
+    var _g = __read((0, widget_ui_1.useScroll)(scrollable), 2), scrollableCss = _g[0], elem = _g[1];
+    if (!node) {
+        return null;
+    }
+    return (react_1.default.createElement(StyledView, __assign({}, other, areaProperties, { scrollableCss: scrollableCss, ref: elem, columns: columns, gap: gap, className: (0, widget_utilities_1.appendClassNames)(className, 'humany-view') }),
+        react_1.default.createElement(switch_1.default, { views: views, render: function (name) {
+                var childNode = node.getChildren(name)[0];
+                return react_1.default.createElement(component_1.default, { id: childNode.id, node: childNode, branch: "default" });
+            } })));
+};
+exports.default = View;
+var templateObject_1;

package/lib/ui/wrapper.d.ts

@@ -0,0 +1,7 @@
+import { Container } from '@webprovisions/platform';
+import React from 'react';
+declare type Props = {
+    container: Container;
+};
+declare const Wrapper: React.SFC<Props>;
+export default Wrapper;

package/lib/ui/wrapper.js

@@ -0,0 +1,108 @@
+"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;
+};
+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 = __importStar(require("react"));
+var react_router_dom_1 = require("react-router-dom");
+var component_1 = __importDefault(require("./component"));
+var use_router_1 = __importDefault(require("./use-router"));
+var keyNavigationKeys = ['Tab', 'ArrowDown', 'ArrowUp', 'ArrowRight', 'ArrowLeft'];
+var Wrapper = function (_a) {
+    var container = _a.container;
+    var components = (0, widget_ui_1.useComponentPlatform)(container);
+    var router = (0, use_router_1.default)(container);
+    var env = container.get('$environment');
+    var _b = __read((0, react_1.useState)((env === null || env === void 0 ? void 0 : env.container.get('isTabbing')) || false), 2), isTabbing = _b[0], setIsTabbing = _b[1];
+    var _c = __read((0, react_1.useState)(null), 2), entry = _c[0], setEntry = _c[1];
+    (0, react_1.useEffect)(function () {
+        var keydown = function (event) {
+            if (keyNavigationKeys.indexOf(event.key) > -1) {
+                if (!isTabbing) {
+                    env === null || env === void 0 ? void 0 : env.container.register('isTabbing', true);
+                }
+                setIsTabbing(true);
+            }
+        };
+        var click = function (event) {
+            if (event.screenX === 0 && event.screenY === 0) {
+                return;
+            }
+            if (isTabbing) {
+                env === null || env === void 0 ? void 0 : env.container.register('isTabbing', false);
+            }
+            setIsTabbing(false);
+        };
+        window.addEventListener('keydown', keydown);
+        window.addEventListener('click', click);
+        return function () {
+            window.removeEventListener('keydown', keydown);
+            window.removeEventListener('click', click);
+        };
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (components) {
+            setEntry(components.nodes.root.children.default[0].id || null);
+            var unsubscribe = components.events.subscribe('components:root-children-changed', function (event, _a) {
+                var node = _a.node;
+                if (node.parent && node.parent.type === 'root') {
+                    var entry_1 = node.parent.children.default[0].id;
+                    setEntry(entry_1);
+                }
+            });
+            return unsubscribe;
+        }
+    }, [components]);
+    if (!router || !router.history || !components) {
+        return null;
+    }
+    if (!entry) {
+        return null;
+    }
+    return (react_1.default.createElement(react_router_dom_1.Router, { history: router.history },
+        react_1.default.createElement(widget_ui_1.ContainerContext.Provider, { value: container },
+            react_1.default.createElement(widget_ui_1.RoutingContext.Provider, { value: router },
+                react_1.default.createElement(component_1.default, { className: (0, widget_utilities_1.appendClassNames)([isTabbing, 'humany-is-tabbing']), isTabbing: isTabbing, id: entry, branch: "default" })))));
+};
+exports.default = Wrapper;